marzban-dev
103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import { useAppParams } from "~/composables/global/useAppParams";
|
|
import { useRatio } from "~/composables/global/useRatio";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
total: number;
|
|
items: {
|
|
type: string;
|
|
value: number;
|
|
}[];
|
|
perPage: number;
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const { page } = useAppParams();
|
|
|
|
const { isMobile } = useRatio();
|
|
</script>
|
|
|
|
<template>
|
|
<PaginationRoot
|
|
:total="total"
|
|
:sibling-count="isMobile ? 0 : 1"
|
|
:items-per-page="perPage"
|
|
show-edges
|
|
v-model:page="page"
|
|
class="max-w-full"
|
|
>
|
|
<PaginationList
|
|
v-slot="{ items }"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<PaginationFirst
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:bi-chevron-double-right"
|
|
class="**:fill-back"
|
|
size="18px"
|
|
/>
|
|
</PaginationFirst>
|
|
|
|
<PaginationPrev
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:bi-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 shrink-0 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 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:bi-chevron-left"
|
|
class="**:fill-back"
|
|
size="18px"
|
|
/>
|
|
</PaginationNext>
|
|
|
|
<PaginationLast
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon
|
|
name="ci:bi-chevron-double-left"
|
|
class="**:fill-back"
|
|
size="18px"
|
|
/>
|
|
</PaginationLast>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</template>
|