code refactor

2026-05-15 15:37:33 +08:00 · 2025-02-09 21:52:48 +08:00
parent a21bc7aad7
commit fa77d3e837
2 changed files with 93 additions and 64 deletions
@@ -0,0 +1,88 @@
+<template>
+    <v-pagination :density="density"
+                  :disabled="disabled"
+                  :total-visible="totalVisible ?? 7"
+                  :length="totalPageCount"
+                  v-model="currentPage">
+        <template #item="{ page, isActive }">
+            <v-btn variant="text"
+                   :density="density"
+                   :disabled="disabled"
+                   :icon="true"
+                   :color="isActive ? 'primary' : 'default'"
+                   @click="currentPage = parseInt(page)"
+                   v-if="page !== '...'"
+            >
+                <span>{{ page }}</span>
+            </v-btn>
+            <v-btn variant="text"
+                   color="default"
+                   :density="density"
+                   :disabled="disabled"
+                   :icon="true"
+                   v-if="page === '...'"
+            >
+                <span>{{ page }}</span>
+                <v-menu :disabled="disabled" :close-on-content-click="false" activator="parent">
+                    <v-list>
+                        <v-list-item class="text-sm" :density="density">
+                            <v-list-item-title class="cursor-pointer">
+                                <v-autocomplete width="100"
+                                                item-title="page"
+                                                item-value="page"
+                                                :density="density"
+                                                :items="allPages"
+                                                :no-data-text="tt('No results')"
+                                                v-model="currentPage"
+                                />
+                            </v-list-item-title>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
+            </v-btn>
+        </template>
+    </v-pagination>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { ComponentDensity } from '@/lib/ui/desktop.ts';
+
+const props = defineProps<{
+    density?: ComponentDensity;
+    disabled?: boolean;
+    totalPageCount: number;
+    totalVisible?: number;
+    modelValue: number;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: number): void;
+}>();
+
+const { tt } = useI18n();
+
+const allPages = computed<{ page: number }[]>(() => {
+    const pages = [];
+
+    for (let i = 1; i <= props.totalPageCount; i++) {
+        pages.push({
+            page: i
+        });
+    }
+
+    return pages;
+});
+
+const currentPage = computed<number>({
+    get: () => props.modelValue,
+    set: (value) => {
+        if (value && value >= 1 && value <= props.totalPageCount) {
+            emit('update:modelValue', value);
+        }
+    }
+});
+</script>