Mamalizz
88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import type { GetProductsFilters } from "~/composables/api/products/useGetProducts";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
total: number;
|
|
items: {
|
|
type: string;
|
|
value: number;
|
|
}[];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// state
|
|
|
|
const params: GetProductsFilters = inject("params");
|
|
|
|
const page = ref(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-1">
|
|
<PaginationLast
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon name="bi:chevron-double-right" class="**:stroke-black" />
|
|
</PaginationLast>
|
|
<PaginationNext
|
|
class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon name="bi:chevron-right" class="**:stroke-black" />
|
|
</PaginationNext>
|
|
|
|
<template v-for="(page, index) in items">
|
|
<PaginationListItem
|
|
v-if="page.type === 'page'"
|
|
:key="index"
|
|
class="w-9 h-9 border border-stone-800 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-stone-700/20 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>
|
|
|
|
<PaginationPrev
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon name="bi:chevron-left" class="**:stroke-black" />
|
|
</PaginationPrev>
|
|
<PaginationFirst
|
|
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
|
|
>
|
|
<Icon name="bi:chevron-double-left" class="**:stroke-black" />
|
|
</PaginationFirst>
|
|
</PaginationList>
|
|
</PaginationRoot>
|
|
</template>
|
|
|
|
<style scoped></style>
|