marzban-dev
84 lines
2.7 KiB
Vue
84 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
total: number;
|
|
items: {
|
|
type: string;
|
|
value: number;
|
|
}[];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const params : any = inject("params");
|
|
|
|
const page = ref(params?.page ? Number(params.page) : 1);
|
|
|
|
// watch
|
|
|
|
watch(
|
|
() => page.value,
|
|
(newPage) => {
|
|
params.page = newPage;
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<PaginationRoot
|
|
:total="total"
|
|
:sibling-count="1"
|
|
:items-per-page="9"
|
|
show-edges
|
|
v-model:page="page"
|
|
>
|
|
<PaginationList v-slot="{ items }" class="flex items-center gap-2">
|
|
<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>
|
|
<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-right" class="**:fill-back" size="18px" />
|
|
</PaginationNext>
|
|
|
|
<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>
|
|
|
|
<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-left" class="**:fill-back" size="18px" />
|
|
</PaginationPrev>
|
|
<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>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</template> |