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"> <script setup lang="ts">
import type { GetProductsFilters } from "~/composables/api/products/useGetProducts";
// types // types
type Props = { type Props = {
total: number; total: number;
items: { items: {
type: "page" | "not-page"; type: string;
value: number; value: number;
}[]; }[];
}; };
@@ -12,34 +14,48 @@ type Props = {
// props // props
defineProps<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> </script>
<template> <template>
<PaginationRoot <PaginationRoot
:total="100" :total="total"
:sibling-count="1" :sibling-count="1"
:items-per-page="10" :items-per-page="9"
show-edges show-edges
v-model:page="page"
> >
<PaginationList <PaginationList v-slot="{ items }" class="flex items-center gap-1">
v-slot="{ items }" <PaginationLast
class="flex items-center gap-1 text-stone-700 dark:text-white" 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"
>
<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" /> <Icon name="bi:chevron-double-right" class="**:stroke-black" />
</PaginationFirst> </PaginationLast>
<PaginationPrev <PaginationNext
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" 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" /> <Icon name="bi:chevron-right" class="**:stroke-black" />
</PaginationPrev> </PaginationNext>
<template v-for="(page, index) in items"> <template v-for="(page, index) in items">
<PaginationListItem <PaginationListItem
v-if="page.type === 'page'" v-if="page.type === 'page'"
:key="index" :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" :value="page.value"
> >
{{ page.value }} {{ page.value }}
@@ -53,16 +69,17 @@ defineProps<Props>();
&#8230; &#8230;
</PaginationEllipsis> </PaginationEllipsis>
</template> </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" /> <Icon name="bi:chevron-left" class="**:stroke-black" />
</PaginationNext> </PaginationPrev>
<PaginationLast <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" 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" /> <Icon name="bi:chevron-double-left" class="**:stroke-black" />
</PaginationLast> </PaginationFirst>
</PaginationList> </PaginationList>
</PaginationRoot> </PaginationRoot>
</template> </template>