haditha_ui/components/haditha/search-page/SearchList.vue
2025-03-15 13:41:29 +03:30

294 lines
6.4 KiB
Vue

<script setup>
const props = defineProps({
list: {
default() {
return [];
},
},
total: {
default: 0,
},
noDataText: {
default: "نتیجه‌ای یافت نشد!",
},
noDataIcon: {
default: "/img/haditha/no-data.png",
},
});
const route = useRoute();
const modal = useModal();
const isModalOpen = ref(false);
function openModal() {
// modal.open(SearchShow, { title: "Welcome" });
isModalOpen.value = true;
}
async function closeModal() {
await modal.close();
}
function resetModal() {
modal.reset();
}
function updateModalTitle() {
modal.patch({ title: "Updated Title" });
}
// components declaration
const SearchShow = defineAsyncComponent(() =>
import("@haditha/components/haditha/search-page/SearchShow.vue")
);
</script>
<template>
<div class="search-list-contianer">
<div class="total">
<span>{{ total }}</span>
نتیجه
</div>
<div class="search-list firefox-scrollbar">
<div
v-if="props.list.length"
class="search-list-item"
v-for="(item, index) in props.list"
:key="index"
>
<p @click="openModal(item)" class="from-person">
{{ item._source.meta.hadith_masoum ?? "بدون عنوان" }}
</p>
<p @click="openModal(item)" class="arabic-text">بدون متن عربی</p>
<p
class="persian-text"
v-html="item.highlight['content.fa'] ?? item._source.content"
></p>
<div class="flex justify-end">
<p class="reference">
{{ item._source.address.vol_title }}، صفحه {{ item._source.address.page_num }}
</p>
</div>
</div>
<no-data
class="h-full w-full flex flex-col justify-center items-center"
v-else
>
<NuxtImg fit="auto" quality="80" placeholder :src="props.noDataIcon" />
<p class="no-data-text">{{ props.noDataText }}</p>
</no-data>
</div>
<UModal
v-model:open="isModalOpen"
:dismissible="false"
:ui="{
footer: 'modal-footer',
overlay: 'modal-overlay',
content: 'modal-content',
header: 'modal-header hidden',
wrapper: 'modal-wrapper',
body: 'modal-body',
title: 'modal-title',
description: 'modal-description',
close: 'modal-close',
}"
>
<!-- <template #header><div class="hidden"></div></template> -->
<!-- <template #content></template> -->
<template #body>
<search-show @close="isModalOpen = !isModalOpen"></search-show>
</template>
<!-- <template #footer></template> -->
</UModal>
</div>
</template>
<style scoped>
.search-list-contianer {
max-width: 656px;
width: 100%;
margin: 0 1em;
.total {
padding: 0.5em 1.8em;
font-family: IRANSansX;
font-weight: 400;
font-size: 11px;
line-height: 16.5px;
letter-spacing: 0%;
text-align: right;
color: #b4c2cf;
}
.search-list {
padding: 1em 1.3em;
height: calc(100dvh - 16em);
overflow-y: auto;
&.hadithaFavorites {
height: calc(100dvh - 8em);
}
&:not(:last-child) {
border-bottom: 0.3px solid #d9d9d9;
}
.search-list-item {
.from-person {
font-family: IRANSansX;
font-weight: 300;
font-size: 12px;
line-height: 18px;
letter-spacing: 0%;
text-align: right;
color: #00a762; /* #4be8ae 7.38% */
margin-bottom: 0.5em;
&:hover,
&:focus,
&:active {
cursor: pointer;
background-color: #fafafa;
}
}
.arabic-text {
font-family: Takrim;
font-weight: 400;
font-size: 18px;
line-height: 32px;
letter-spacing: 0%;
text-align: right;
color: var(--ui-color-two);
margin-bottom: 0.5em;
&:hover,
&:focus,
&:active {
cursor: pointer;
background-color: #fafafa;
}
}
.persian-text {
font-family: Takrim;
font-weight: 400;
font-size: 16px;
line-height: 22px;
letter-spacing: 0%;
text-align: right;
color: #626b84;
margin-bottom: 0.5em;
}
.reference {
height: 24px;
gap: 4px;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
border-radius: 6px;
border-width: 0.5px;
border: 0.5px solid #d9d9d9;
font-family: IRANSansX;
font-weight: 300;
font-size: 10px;
line-height: 15px;
letter-spacing: 0%;
text-align: right;
color: #8a92a8;
&:hover,
&:focus,
&:active {
cursor: pointer;
background-color: #fafafa;
}
}
}
}
.no-data-text {
font-family: IRANSansX;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
}
}
</style>
<style>
.text__orange {
color: orange;
}
.modal-content {
border: 0.3px solid #e0e0e0;
box-shadow: 0px 8px 20px 0px #0000001a;
background: #ffffff;
width: 100%;
max-width: 720px;
border-radius: 16px;
gap: 8px;
border-width: 0.3px;
.modal-body {
border-radius: 16px;
height: 800px;
position: relative;
.top-left-bgi {
position: absolute;
top: 0;
left: 0;
background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
backdrop-filter: blur(54px);
width: 447px;
height: 447px;
top: 0;
left: 0;
background-repeat: no-repeat;
background-size: auto;
z-index: -1;
}
&::before {
content: "";
position: absolute;
right: 0;
bottom: 0;
background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
backdrop-filter: blur(54px);
width: 438px;
height: 238px;
mix-blend-mode: Multiply;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 458px;
height: 239px;
mix-blend-mode: Multiply;
background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(54px);
z-index: -1;
}
}
}
.modal-overlay {
background: #00000033;
}
</style>