heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added pagination

Browse Source
This commit is contained in:
Mamalizz
2025-01-19 19:16:08 +03:30
parent 18d51c994a
commit 4d8dccf2cc
1 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Pagination.vue
+41 -24
View File
@@ -1,10 +1,12 @@
<script setup lang="ts">
import type { GetProductsFilters } from "~/composables/api/products/useGetProducts";
// types
type Props = {
total: number;
items: {
type: "page" | "not-page";
type: string;
value: number;
}[];
};
@@ -12,34 +14,48 @@ type Props = {
// 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="100"
:total="total"
:sibling-count="1"
:items-per-page="10"
:items-per-page="9"
show-edges
v-model:page="page"
>
<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"
<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="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="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="ci:chevron-left" />
</PaginationPrev>
<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 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"
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 }}
@@ -53,16 +69,17 @@ defineProps<Props>();
&#8230;
</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"
<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="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="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="ci:double-arrow-right" />
</PaginationLast>
<Icon name="bi:chevron-double-left" class="**:stroke-black" />
</PaginationFirst>
</PaginationList>
</PaginationRoot>
</template>