Mamalizz
71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
|
|
type Props = {
|
|
total: number;
|
|
items: {
|
|
type: "page" | "not-page";
|
|
value: number;
|
|
}[];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<PaginationRoot
|
|
:total="100"
|
|
:sibling-count="1"
|
|
:items-per-page="10"
|
|
show-edges
|
|
>
|
|
<PaginationList
|
|
v-slot="{ items }"
|
|
class="flex items-center gap-1 text-stone-700 dark:text-white"
|
|
>
|
|
<PaginationFirst
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
|
|
>
|
|
<Icon name="ci:double-arrow-left" />
|
|
</PaginationFirst>
|
|
<PaginationPrev
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition mr-4 disabled:opacity-50 rounded-lg"
|
|
>
|
|
<Icon name="ci:chevron-left" />
|
|
</PaginationPrev>
|
|
<template v-for="(page, index) in items">
|
|
<PaginationListItem
|
|
v-if="page.type === 'page'"
|
|
:key="index"
|
|
class="w-9 h-9 border dark:border-stone-800 rounded-lg data-[selected]:!bg-white data-[selected]:shadow-sm data-[selected]:text-blackA11 hover:bg-white dark:hover:bg-stone-700/70 transition"
|
|
:value="page.value"
|
|
>
|
|
{{ page.value }}
|
|
</PaginationListItem>
|
|
<PaginationEllipsis
|
|
v-else
|
|
:key="page.type"
|
|
:index="index"
|
|
class="w-9 h-9 flex items-center justify-center"
|
|
>
|
|
…
|
|
</PaginationEllipsis>
|
|
</template>
|
|
<PaginationNext
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition ml-4 disabled:opacity-50 rounded-lg"
|
|
>
|
|
<Icon name="ci:chevron-right" />
|
|
</PaginationNext>
|
|
<PaginationLast
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
|
|
>
|
|
<Icon name="ci:double-arrow-right" />
|
|
</PaginationLast>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</template>
|
|
|
|
<style scoped></style>
|