434 lines
11 KiB
Vue
434 lines
11 KiB
Vue
<script setup lang="ts">
|
||
const props = defineProps({
|
||
showFilter: {
|
||
default: false,
|
||
},
|
||
showPrevSearch: {
|
||
default: false,
|
||
},
|
||
});
|
||
const emit = defineEmits(["response-ready"]);
|
||
const router = useRouter();
|
||
|
||
export type Sample = {
|
||
fromPerson: string;
|
||
arabicText: string;
|
||
persianText: string;
|
||
reference: string;
|
||
};
|
||
|
||
const state = reactive({
|
||
list: [
|
||
{
|
||
fromPerson: "امام علی علیه‌السلام",
|
||
arabicText:
|
||
" وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
|
||
persianText:
|
||
" خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
|
||
reference: "الکافی، جلد ۱، صفحه ۱۰۳",
|
||
},
|
||
{
|
||
fromPerson: "امام علی علیه‌السلام",
|
||
arabicText:
|
||
" وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
|
||
persianText:
|
||
" خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
|
||
reference: "الکافی، جلد ۱، صفحه ۱۰۳",
|
||
},
|
||
{
|
||
fromPerson: "امام علی علیه‌السلام",
|
||
arabicText:
|
||
" وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ",
|
||
persianText:
|
||
" خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و زمین قرار داد. و نماز در مسیحیت برای ما قرار که پیش",
|
||
reference: "الکافی، جلد ۱، صفحه ۱۰۳",
|
||
},
|
||
],
|
||
filters: [
|
||
{
|
||
label: "معنایی",
|
||
items: [],
|
||
},
|
||
{
|
||
label: "ترجمه",
|
||
items: [],
|
||
},
|
||
{
|
||
label: "مترادف",
|
||
items: [
|
||
{
|
||
label: "جستجو در همه",
|
||
},
|
||
{
|
||
label: "فقط در متن عربی حدیث",
|
||
},
|
||
{
|
||
label: "فقط در ترجمه ها",
|
||
},
|
||
{
|
||
label: "فقط در شروح",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "نوع",
|
||
items: [
|
||
{
|
||
label: "جستجو در همه",
|
||
},
|
||
{
|
||
label: "فقط در متن عربی حدیث",
|
||
},
|
||
{
|
||
label: "فقط در ترجمه ها",
|
||
},
|
||
{
|
||
label: "فقط در شروح",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "عین عبارت",
|
||
items: [
|
||
{
|
||
label: "جستجو در همه",
|
||
},
|
||
{
|
||
label: "فقط در متن عربی حدیث",
|
||
},
|
||
{
|
||
label: "فقط در ترجمه ها",
|
||
},
|
||
{
|
||
label: "فقط در شروح",
|
||
},
|
||
],
|
||
},
|
||
],
|
||
});
|
||
const searchTerm = ref<string>("");
|
||
const open = ref(false);
|
||
const loading = ref(false);
|
||
|
||
// fetch history list from backend(ssr)
|
||
// const { data: users, status } = await useFetch(
|
||
// "https://jsonplaceholder.typicode.com/users",
|
||
// {
|
||
// transform: (data: { id: number; name: string }[]) => {
|
||
// return (
|
||
// data?.map((user) => ({
|
||
// label: user.name,
|
||
// value: String(user.id),
|
||
// avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` },
|
||
// })) || []
|
||
// );
|
||
// },
|
||
// lazy: true,
|
||
// }
|
||
// );
|
||
|
||
const clearSimilar = () => {
|
||
console.info("clearSimilar");
|
||
};
|
||
const onBlur = () => {
|
||
// console.info("onBlue");
|
||
};
|
||
const onChange = () => {
|
||
// console.info("onChange");
|
||
};
|
||
const onUpdateModel = (newVal: string) => {
|
||
console.info("onUpdateModel", newVal);
|
||
};
|
||
const onSearch = () => {
|
||
console.info("onSearch");
|
||
router.push({
|
||
name: "hadithSearch",
|
||
});
|
||
};
|
||
const onKeyDown = () => {
|
||
// console.info("onKeyDown");
|
||
};
|
||
const onKeyUp = () => {
|
||
// console.info("onKeyUp");
|
||
};
|
||
const onSend = () => {
|
||
console.info("onSend");
|
||
|
||
emit("response-ready", {
|
||
searchList: state.list,
|
||
searchQuery: searchTerm.value,
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="hadith-search-root-wrapper">
|
||
<div class="hadith-search-root">
|
||
<div v-if="showPrevSearch" class="prev-search-item flex items-center">
|
||
<span class="total">۴۷ مشابه </span>
|
||
<span class="text me-auto">
|
||
عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ:
|
||
</span>
|
||
<UButton
|
||
icon="i-lucide:x"
|
||
color="neutral"
|
||
variant="ghost"
|
||
class="clear-similar-btn"
|
||
@click="clearSimilar"
|
||
/>
|
||
</div>
|
||
<div class="search-input">
|
||
<UInputMenu
|
||
class="w-full focus:placeholder-gray-800"
|
||
:items="[]"
|
||
v-model="searchTerm"
|
||
v-model:open="open"
|
||
v-model:search-term="searchTerm"
|
||
placeholder="هوشمند جستجو کنید..."
|
||
:ui="{
|
||
base: ['hadith-search-input'],
|
||
}"
|
||
:content="{
|
||
align: 'start',
|
||
side: 'bottom',
|
||
sideOffset: 4,
|
||
}"
|
||
:loading="loading"
|
||
highlight
|
||
highlightOnHover
|
||
@focus="open = true"
|
||
@blur="open = false"
|
||
@change="onChange"
|
||
@update:modelValue="onUpdateModel"
|
||
@update:searchTerm="onUpdateModel"
|
||
@keydown="onKeyDown"
|
||
@keyup="onKeyUp"
|
||
@keydown.enter="onSend"
|
||
>
|
||
</UInputMenu>
|
||
</div>
|
||
<UButton class="my-trailing-button" @click.prevent="onSearch" icon="i-lucide-search">
|
||
<!-- <UIcon name="i-lucide-search" /> -->
|
||
</UButton>
|
||
</div>
|
||
<div class="search-filter my-3 space-x-2" v-if="props.showFilter">
|
||
<UDropdownMenu
|
||
v-for="(filter, index) in state.filters"
|
||
:items="filter.items"
|
||
:content="{
|
||
align: 'start',
|
||
side: 'bottom',
|
||
sideOffset: 8,
|
||
}"
|
||
:ui="{
|
||
content: 'w-48',
|
||
}"
|
||
>
|
||
<UButton
|
||
class="filter-item"
|
||
:label="filter.label"
|
||
:trailingIcon="filter.items?.length ? 'i-lucide-chevron-down' : ''"
|
||
/>
|
||
</UDropdownMenu>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.hadith-search-root-wrapper {
|
||
max-width: 656px;
|
||
width: 100%;
|
||
margin: 0 1em;
|
||
|
||
.hadith-search-root {
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: "";
|
||
|
||
position: absolute;
|
||
left: 1em;
|
||
right: 1em;
|
||
top: 50%;
|
||
|
||
backdrop-filter: blur(60px);
|
||
background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
|
||
filter: blur(60px);
|
||
width: 626px;
|
||
height: 68px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.prev-search-item {
|
||
width: 328;
|
||
height: 49;
|
||
gap: 6px;
|
||
border-radius: 12px;
|
||
border-width: 0.5px;
|
||
padding-top: 8px;
|
||
padding-right: 12px;
|
||
padding-bottom: 8px;
|
||
padding-left: 12px;
|
||
background: #626b84;
|
||
border: 0.5px solid;
|
||
margin-bottom: 0.7em;
|
||
|
||
border-image-source: linear-gradient(
|
||
102.02deg,
|
||
#4be8ae 7.38%,
|
||
#00a762 91.78%
|
||
);
|
||
|
||
.total {
|
||
width: 53;
|
||
height: 24;
|
||
gap: 4px;
|
||
border-radius: 6px;
|
||
padding: 5px 7px;
|
||
background: #1b213266;
|
||
|
||
font-family: IRANSansX;
|
||
font-weight: 500;
|
||
font-size: 10px;
|
||
line-height: 15px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
color: #ffffff;
|
||
}
|
||
.text {
|
||
font-family: Takrim;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
color: #ffffff;
|
||
}
|
||
.clear-similar-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
gap: 4px;
|
||
border-radius: 60px;
|
||
padding-top: 11px;
|
||
padding-right: 6px;
|
||
padding-bottom: 11px;
|
||
padding-left: 6px;
|
||
background: #1b213266;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.search-input {
|
||
position: relative;
|
||
}
|
||
.search-filter {
|
||
.filter-item {
|
||
/* width: 81px; */
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
border-width: 0.3px;
|
||
padding-top: 8px;
|
||
padding-right: 12px;
|
||
padding-bottom: 8px;
|
||
padding-left: 12px;
|
||
gap: 4px;
|
||
background-color: #fff;
|
||
border: 0.3px solid #e0e0e0;
|
||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||
color: #8a92a8;
|
||
font-family: IRANSansX;
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
line-height: 20px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
|
||
&.active {
|
||
color: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
|
||
|
||
* {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&.search-page {
|
||
&::before {
|
||
content: none;
|
||
}
|
||
.my-trailing-button {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
.hadith-search-input {
|
||
height: 56px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.hadith-search-root-wrapper {
|
||
.my-trailing-button {
|
||
position: absolute;
|
||
|
||
z-index: 1;
|
||
width: 48px;
|
||
height: 48px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
padding: 0;
|
||
border-radius: 50px;
|
||
background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
|
||
left: 12px;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
transition: all 0.2s ease-in-out;
|
||
|
||
&:hover {
|
||
transition: all 0.2s ease-in-out;
|
||
background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
|
||
}
|
||
|
||
& > span {
|
||
width: 18px;
|
||
height: 18px;
|
||
|
||
background-image: linear-gradient(
|
||
102.02deg,
|
||
#4be8ae 7.38%,
|
||
#00a762 91.78%
|
||
);
|
||
}
|
||
}
|
||
.hadith-search-input {
|
||
z-index: 0;
|
||
|
||
height: 72px;
|
||
justify-content: space-between;
|
||
padding-top: 12px;
|
||
padding-right: 12px;
|
||
padding-bottom: 12px;
|
||
padding-left: 12px;
|
||
border-radius: 12px;
|
||
border-width: 0.3px;
|
||
|
||
background-color: #fff;
|
||
border: 0.3px solid #e0e0e0;
|
||
box-shadow: 0px 1px 4px 0px #0000000d;
|
||
|
||
font-family: IRANSansX;
|
||
font-weight: 300;
|
||
font-size: 14px;
|
||
line-height: 21px;
|
||
letter-spacing: 0%;
|
||
text-align: right;
|
||
color: #a7acbe;
|
||
}
|
||
}
|
||
</style>
|