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-14 20:47:05 +03:30
parent 74137bb12c
commit 96d8663c35
1 changed files with 59 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Pagination.vue
+59 -9
View File
@@ -1,18 +1,68 @@
<script setup lang="ts"></script>
<script setup lang="ts">
// types
type Props = {
total: number;
items: {
type: "page" | "not-page";
value: number;
}[];
};
// props
defineProps<Props>();
</script>
<template>
<PaginationRoot>
<PaginationList v-slot="{ items }">
<PaginationFirst />
<PaginationPrev />
<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" />
<PaginationEllipsis v-else :key="page.type" :index="index">
<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"
>
&#8230;
</PaginationEllipsis>
</template>
<PaginationNext />
<PaginationLast />
<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>