haditha_ui/components/haditha/search-page/SearchList.vue

286 lines
6.6 KiB
Vue
Raw Normal View History

2025-02-22 13:07:20 +00:00
<script setup>
const props = defineProps({
list: {
default() {
return [];
},
},
2025-02-26 07:52:21 +00:00
noDataText: {
default: "نتیجه‌ای یافت نشد!",
},
noDataIcon: {
2025-03-06 11:28:20 +00:00
default: "/img/haditha/no-data.png",
2025-02-26 07:52:21 +00:00
},
2025-02-22 13:07:20 +00:00
});
2025-02-26 07:52:21 +00:00
const route = useRoute();
2025-02-22 13:07:20 +00:00
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" });
}
2025-02-26 07:52:21 +00:00
// components declaration
const SearchShow = defineAsyncComponent(() =>
2025-03-06 11:28:20 +00:00
import("@haditha/components/haditha/search-page/SearchShow.vue")
2025-02-26 07:52:21 +00:00
);
2025-02-22 13:07:20 +00:00
</script>
<template>
<div class="search-list-contianer">
<div class="total">
<span>48</span>
نتیجه
</div>
2025-03-06 11:28:20 +00:00
<div class="search-list firefox-scrollbar" :class="route.name">
2025-02-22 13:07:20 +00:00
<div
2025-02-26 07:52:21 +00:00
v-if="props.list.length"
2025-02-22 13:07:20 +00:00
class="search-list-item"
v-for="(item, index) in props.list"
:key="index"
>
<p @click="openModal(item)" class="from-person">امام علی علیهالسلام</p>
<p @click="openModal(item)" class="arabic-text">
وَمَا يَذۡكُرُونَ إِلَّآ أَن يَشَآءَ ٱللَّهُ هُوَ أَهلُ ٱلتَّقوَىٰ
وَأَهلُ ٱلمَغفِرَةِ هُوَ أَهلُ ٱلتَّقوَىٰ وَأَهلُ ٱلمَغفِرَةِ
</p>
<p class="persian-text">
خداوند متعال ما (اهل بیت) را آفرید و ما را خازنان علم خود در آسمان و
زمین قرار داد. و نماز در مسیحیت برای ما قرار که پیش
</p>
<div class="flex justify-end">
<p class="reference">الکافی، جلد ۱، صفحه ۱۰۳</p>
</div>
</div>
2025-02-26 07:52:21 +00:00
<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>
2025-02-22 13:07:20 +00:00
</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 - 15.2em);
overflow-y: auto;
2025-03-06 11:28:20 +00:00
&.hadithaFavorites {
2025-02-26 07:52:21 +00:00
height: calc(100dvh - 8em);
}
2025-02-22 13:07:20 +00:00
&: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;
2025-02-26 07:52:21 +00:00
color: var(--ui-color-two);
2025-02-22 13:07:20 +00:00
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;
}
}
}
}
2025-02-26 07:52:21 +00:00
.no-data-text {
font-family: IRANSansX;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
}
2025-02-22 13:07:20 +00:00
}
</style>
<style>
.modal-content {
border: 0.3px solid #e0e0e0;
box-shadow: 0px 8px 20px 0px #0000001a;
background: #ffffff;
2025-02-26 07:52:21 +00:00
width: 100%;
max-width: 720px;
2025-02-22 13:07:20 +00:00
border-radius: 16px;
gap: 8px;
border-width: 0.3px;
.modal-body {
border-radius: 16px;
2025-02-26 07:52:21 +00:00
2025-02-22 13:07:20 +00:00
height: 800px;
position: relative;
.top-left-bgi {
position: absolute;
top: 0;
left: 0;
2025-03-06 11:28:20 +00:00
background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
2025-02-22 13:07:20 +00:00
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;
2025-03-06 11:28:20 +00:00
background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
2025-02-22 13:07:20 +00:00
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;
2025-03-06 11:28:20 +00:00
background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
2025-02-22 13:07:20 +00:00
background-repeat: no-repeat;
background-size: cover;
backdrop-filter: blur(54px);
z-index: -1;
}
}
}
.modal-overlay {
background: #00000033;
}
</style>