Mamalizz
103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import { useRatio } from "~/composables/global/useRatio";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
total: number;
|
|
items: {
|
|
type: string;
|
|
value: number;
|
|
}[];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const params: any = inject("params");
|
|
|
|
const { isMobile } = useRatio();
|
|
|
|
const { y } = useWindowScroll({ behavior: "smooth" });
|
|
|
|
// computed
|
|
|
|
const page = computed({
|
|
get: () => (params?.page ? Number(params.page) : 1),
|
|
set: (value: number) => {
|
|
params.page = value;
|
|
y.value = 0;
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<PaginationRoot
|
|
:total="total"
|
|
:sibling-count="isMobile ? 0 : 1"
|
|
:items-per-page="15"
|
|
v-model:page="page"
|
|
>
|
|
<PaginationList
|
|
v-slot="{ items }"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<PaginationFirst
|
|
class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
برو اول
|
|
</PaginationFirst>
|
|
|
|
<PaginationPrev
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:chevron-right"
|
|
class="**:fill-back"
|
|
size="18px"
|
|
/>
|
|
</PaginationPrev>
|
|
|
|
<template v-for="(page, index) in items">
|
|
<PaginationListItem
|
|
v-if="page.type === 'page'"
|
|
:key="index"
|
|
class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
|
|
:value="page.value"
|
|
>
|
|
{{ page.value }}
|
|
</PaginationListItem>
|
|
<PaginationEllipsis
|
|
v-else
|
|
:key="page.type"
|
|
:index="index"
|
|
class="w-9 h-9 select-none flex items-center justify-center"
|
|
>
|
|
…
|
|
</PaginationEllipsis>
|
|
</template>
|
|
|
|
<PaginationNext
|
|
class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:chevron-left"
|
|
class="**:fill-back"
|
|
size="18px"
|
|
/>
|
|
</PaginationNext>
|
|
|
|
<PaginationLast
|
|
class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
برو آخر
|
|
</PaginationLast>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</template>
|