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

changed pagination logic

Browse Source
This commit is contained in:
Mamalizz
2025-06-04 19:11:24 +03:30
parent 5373db57bd
commit 632a8e46e5
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Pagination.vue
+28 -11
View File
@@ -11,6 +11,7 @@ type Props = {
type: string;
value: number;
}[];
perPage: number;
};
// props
@@ -21,6 +22,9 @@ defineProps<Props>();
const params: any = inject("params");
const router = useRouter();
const route = useRoute();
const { isMobile } = useRatio();
const { y } = useWindowScroll({ behavior: "smooth" });
@@ -28,9 +32,12 @@ const { y } = useWindowScroll({ behavior: "smooth" });
// computed
const page = computed({
get: () => (params?.page ? Number(params.page) : 1),
get: () => (route.query["page"] ? Number(route.query["page"]) : 1),
set: (value: number) => {
params.page = value;
router.push({
query: { ...route.query, page: value },
});
y.value = 0;
},
});
@@ -40,24 +47,30 @@ const page = computed({
<PaginationRoot
:total="total"
:sibling-count="isMobile ? 0 : 1"
:items-per-page="15"
:items-per-page="perPage"
show-edges
v-model:page="page"
class="max-w-full"
>
<PaginationList
v-slot="{ items }"
class="flex items-center gap-2"
>
<PaginationFirst
class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
>
برو اول
<Icon
name="bi:chevron-double-right"
class="**:fill-back"
size="18px"
/>
</PaginationFirst>
<PaginationPrev
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
>
<Icon
name="ci:chevron-right"
name="bi:chevron-right"
class="**:fill-back"
size="18px"
/>
@@ -67,7 +80,7 @@ const page = computed({
<PaginationListItem
v-if="page.type === 'page'"
:key="index"
class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
class="w-9 h-9 shrink-0 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
:value="page.value"
>
{{ page.value }}
@@ -83,19 +96,23 @@ const page = computed({
</template>
<PaginationNext
class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
class="w-9 h-9 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
>
<Icon
name="ci:chevron-left"
name="bi:chevron-left"
class="**:fill-back"
size="18px"
/>
</PaginationNext>
<PaginationLast
class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
>
برو آخر
<Icon
name="bi:chevron-double-left"
class="**:fill-back"
size="18px"
/>
</PaginationLast>
</PaginationList>
</PaginationRoot>