119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
list: {
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
noDataText: {
|
|
default: "نتیجهای یافت نشد!",
|
|
},
|
|
noDataIcon: {
|
|
default: "/img/haditha/no-data.png",
|
|
},
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
const goToLibraryShow = (item) => {
|
|
router.push({
|
|
name: "hadithaLibraryShow",
|
|
params: {
|
|
id: item?._source?.id,
|
|
slug: item?._source?.title,
|
|
},
|
|
query: {
|
|
firstPage: item._source.page_first,
|
|
},
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
v-if="props.list?.length"
|
|
v-for="(item, index) in props.list"
|
|
:key="index"
|
|
variant="solid"
|
|
:ui="{
|
|
root: 'ring ring-[white] divide-y divide-[var(--ui-border)] rounded-0 shadow-none bg-transparent library-list-item',
|
|
header: 'header',
|
|
body: 'sm:p-0 p-0 bg-transparent',
|
|
footer: 'footer',
|
|
}"
|
|
>
|
|
<!-- <template #header></template> -->
|
|
|
|
<ULink
|
|
v-if="item?._source?.id"
|
|
:to="{
|
|
name: 'hadithaLibraryShow',
|
|
params: {
|
|
id: item?._source?.id,
|
|
slug: item?._source?.title,
|
|
},
|
|
query: {
|
|
page_first: item._source.page_first,
|
|
page_last: item._source.page_last,
|
|
page_count: item._source.page_count,
|
|
},
|
|
}"
|
|
color="neutral"
|
|
variant="outline"
|
|
:ui="{
|
|
leadingIcon: 'text-(--ui-primary)',
|
|
}"
|
|
>
|
|
<img
|
|
fit="auto"
|
|
quality="80"
|
|
placeholder
|
|
src="/img/haditha/sample-bgi.svg"
|
|
/>
|
|
<p class="title">{{ item?._source?.title }}</p>
|
|
<p class="version">
|
|
{{ item?._source?.vol_title + item?._source?.vol_num }}
|
|
</p>
|
|
</ULink>
|
|
|
|
<!-- <template #footer> </template> -->
|
|
</UCard>
|
|
|
|
<no-data
|
|
class="h-full w-full flex flex-col justify-center items-center"
|
|
v-else
|
|
>
|
|
<img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
|
|
<p class="no-data-text">{{ props.noDataText }}</p>
|
|
</no-data>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.library-list-item {
|
|
width: 140;
|
|
height: 200;
|
|
border-radius: 8px;
|
|
|
|
.title {
|
|
margin-top: 0.7em;
|
|
font-family: IRANSansX;
|
|
font-weight: 400;
|
|
font-size: 13px;
|
|
line-height: 19.5px;
|
|
letter-spacing: 0%;
|
|
text-align: right;
|
|
color: #444444;
|
|
}
|
|
|
|
.version {
|
|
font-family: IRANSansX;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
line-height: 15px;
|
|
letter-spacing: 0%;
|
|
text-align: right;
|
|
color: #444444;
|
|
}
|
|
}
|
|
</style>
|