cynx-lib 1.3.80 → 1.3.82

package/vue/components/Pagination.vue

@@ -1,199 +1,199 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { ChevronLeft, ChevronRight } from "lucide-vue-next";
-
-const props = withDefaults(
-  defineProps<{
-    page?: number;
-    pages?: number;
-    total?: number;
-    perPage?: number;
-    pageSize?: number;
-    disabled?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-  }>(),
-  {
-    page: 1,
-    pages: 1,
-    total: 0,
-    perPage: 20,
-    disabled: false,
-    size: "md",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:page", page: number): void;
-  (e: "change", page: number): void;
-}>();
-
-const effectivePerPage = computed(() => props.pageSize || props.perPage || 20);
-
-const totalPages = computed(() => {
-  if (props.pages && props.pages > 1) return props.pages;
-  if (props.total && effectivePerPage.value) {
-    return Math.ceil(props.total / effectivePerPage.value);
-  }
-  return 1;
-});
-
-const pageItems = computed(() => {
-  const totalP = totalPages.value;
-  if (!totalP || totalP <= 1) return [];
-
-  const cur = props.page || 1;
-  const items: (number | string)[] = [];
-
-  for (let i = 1; i <= totalP; i++) {
-    if (i === 1 || i === totalP || (i >= cur - 1 && i <= cur + 1)) {
-      items.push(i);
-    } else if (items[items.length - 1] !== "...") {
-      items.push("...");
-    }
-  }
-
-  return items;
-});
-
-const startItem = computed(() => {
-  if (!props.total) return null;
-  return (props.page - 1) * effectivePerPage.value + 1;
-});
-
-const endItem = computed(() => {
-  if (!props.total) return null;
-  return Math.min(props.page * effectivePerPage.value, props.total);
-});
-
-const handlePageChange = (newPage: number) => {
-  if (props.disabled || newPage < 1 || newPage > totalPages.value || newPage === props.page) return;
-  emit("update:page", newPage);
-  emit("change", newPage);
-};
-
-const SIZES = {
-  xs: { box: 26, icon: 13, font: "11px", gap: "6px" },
-  sm: { box: 30, icon: 15, font: "12px", gap: "8px" },
-  md: { box: 34, icon: 17, font: "13.5px", gap: "10px" },
-  lg: { box: 38, icon: 19, font: "15px", gap: "12px" },
-};
-
-const currentSize = computed(() => SIZES[props.size] || SIZES.md);
-</script>
-
-<template>
-  <div
-    v-if="totalPages > 1 || (total != null && total > 0)"
-    class="flex items-center justify-between w-full py-2 select-none"
-  >
-    <!-- Info Counter -->
-    <div v-if="startItem !== null" class="text-xs text-slate-500 dark:text-slate-400 font-mono">
-      {{ startItem }}–{{ endItem }} of {{ total }}
-    </div>
-    <div v-else />
-
-    <!-- Page Controls Container -->
-    <div
-      class="flex items-center"
-      :style="{ gap: currentSize.gap }"
-    >
-      <!-- Prev Arrow Button (Card Style) -->
-      <button
-        type="button"
-        :disabled="disabled || page <= 1"
-        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
-        :style="{
-          width: `${currentSize.box}px`,
-          height: `${currentSize.box}px`,
-          borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-          background: 'var(--surface, #ffffff)',
-          border: '1px solid var(--border, var(--bd, #e2e8f0))',
-          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
-          color: 'var(--muted, #64748b)',
-          cursor: disabled || page <= 1 ? 'not-allowed' : 'pointer',
-          opacity: disabled || page <= 1 ? 0.35 : 1,
-        }"
-        title="Previous page"
-        @click="handlePageChange(page - 1)"
-      >
-        <ChevronLeft :size="currentSize.icon" :stroke-width="2.2" />
-      </button>
-
-      <!-- Page Numbers / Ellipsis -->
-      <template v-for="(item, i) in pageItems" :key="`page-${i}`">
-        <!-- Ellipsis -->
-        <span
-          v-if="item === '...'"
-          class="inline-flex items-center justify-center text-slate-400 dark:text-slate-500 select-none font-medium"
-          :style="{
-            minWidth: `${currentSize.box}px`,
-            height: `${currentSize.box}px`,
-            fontSize: currentSize.font,
-          }"
-        >
-          …
-        </span>
-
-        <!-- Page Button -->
-        <button
-          v-else
-          type="button"
-          :disabled="disabled"
-          class="cynx-page-num inline-flex items-center justify-center transition-all"
-          :class="[
-            item === page ? 'cynx-page-num--active font-semibold' : 'cynx-page-num--inactive font-medium hover:bg-slate-100/70 dark:hover:bg-slate-800/70'
-          ]"
-          :style="{
-            minWidth: `${currentSize.box}px`,
-            height: `${currentSize.box}px`,
-            padding: '0 6px',
-            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-            fontSize: currentSize.font,
-            background: item === page ? 'var(--accent, #12675D)' : 'transparent',
-            color: item === page ? '#ffffff' : 'var(--muted, #64748b)',
-            boxShadow: item === page ? '0 3px 8px rgba(0, 0, 0, 0.12)' : 'none',
-            border: 'none',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-          }"
-          @click="handlePageChange(Number(item))"
-        >
-          {{ item }}
-        </button>
-      </template>
-
-      <!-- Next Arrow Button (Card Style) -->
-      <button
-        type="button"
-        :disabled="disabled || page >= totalPages"
-        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
-        :style="{
-          width: `${currentSize.box}px`,
-          height: `${currentSize.box}px`,
-          borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
-          background: 'var(--surface, #ffffff)',
-          border: '1px solid var(--border, var(--bd, #e2e8f0))',
-          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
-          color: 'var(--muted, #64748b)',
-          cursor: disabled || page >= totalPages ? 'not-allowed' : 'pointer',
-          opacity: disabled || page >= totalPages ? 0.35 : 1,
-        }"
-        title="Next page"
-        @click="handlePageChange(page + 1)"
-      >
-        <ChevronRight :size="currentSize.icon" :stroke-width="2.2" />
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cynx-page-arrow:not(:disabled):hover {
-  color: var(--t, #0f111c);
-  border-color: var(--border-hover, #cbd5e1);
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
-}
-
-.cynx-page-num--inactive:not(:disabled):hover {
-  color: var(--t, #0f111c);
-}
-</style>
+<script setup lang="ts">
+import { computed } from "vue";
+import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+
+const props = withDefaults(
+  defineProps<{
+    page?: number;
+    pages?: number;
+    total?: number;
+    perPage?: number;
+    pageSize?: number;
+    disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+  }>(),
+  {
+    page: 1,
+    pages: 1,
+    total: 0,
+    perPage: 20,
+    disabled: false,
+    size: "md",
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:page", page: number): void;
+  (e: "change", page: number): void;
+}>();
+
+const effectivePerPage = computed(() => props.pageSize || props.perPage || 20);
+
+const totalPages = computed(() => {
+  if (props.pages && props.pages > 1) return props.pages;
+  if (props.total && effectivePerPage.value) {
+    return Math.ceil(props.total / effectivePerPage.value);
+  }
+  return 1;
+});
+
+const pageItems = computed(() => {
+  const totalP = totalPages.value;
+  if (!totalP || totalP <= 1) return [];
+
+  const cur = props.page || 1;
+  const items: (number | string)[] = [];
+
+  for (let i = 1; i <= totalP; i++) {
+    if (i === 1 || i === totalP || (i >= cur - 1 && i <= cur + 1)) {
+      items.push(i);
+    } else if (items[items.length - 1] !== "...") {
+      items.push("...");
+    }
+  }
+
+  return items;
+});
+
+const startItem = computed(() => {
+  if (!props.total) return null;
+  return (props.page - 1) * effectivePerPage.value + 1;
+});
+
+const endItem = computed(() => {
+  if (!props.total) return null;
+  return Math.min(props.page * effectivePerPage.value, props.total);
+});
+
+const handlePageChange = (newPage: number) => {
+  if (props.disabled || newPage < 1 || newPage > totalPages.value || newPage === props.page) return;
+  emit("update:page", newPage);
+  emit("change", newPage);
+};
+
+const SIZES = {
+  xs: { box: 26, icon: 13, font: "11px", gap: "6px" },
+  sm: { box: 30, icon: 15, font: "12px", gap: "8px" },
+  md: { box: 34, icon: 17, font: "13.5px", gap: "10px" },
+  lg: { box: 38, icon: 19, font: "15px", gap: "12px" },
+};
+
+const currentSize = computed(() => SIZES[props.size] || SIZES.md);
+</script>
+
+<template>
+  <div
+    v-if="totalPages > 1 || (total != null && total > 0)"
+    class="flex items-center justify-between w-full py-2 select-none"
+  >
+    <!-- Info Counter -->
+    <div v-if="startItem !== null" class="text-xs text-slate-500 dark:text-slate-400 font-mono">
+      {{ startItem }}–{{ endItem }} of {{ total }}
+    </div>
+    <div v-else />
+
+    <!-- Page Controls Container -->
+    <div
+      class="flex items-center"
+      :style="{ gap: currentSize.gap }"
+    >
+      <!-- Prev Arrow Button (Card Style) -->
+      <button
+        type="button"
+        :disabled="disabled || page <= 1"
+        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
+        :style="{
+          width: `${currentSize.box}px`,
+          height: `${currentSize.box}px`,
+          borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+          background: 'var(--surface, #ffffff)',
+          border: '1px solid var(--border, var(--bd, #e2e8f0))',
+          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+          color: 'var(--muted, #64748b)',
+          cursor: disabled || page <= 1 ? 'not-allowed' : 'pointer',
+          opacity: disabled || page <= 1 ? 0.35 : 1,
+        }"
+        title="Previous page"
+        @click="handlePageChange(page - 1)"
+      >
+        <ChevronLeft :size="currentSize.icon" :stroke-width="2.2" />
+      </button>
+
+      <!-- Page Numbers / Ellipsis -->
+      <template v-for="(item, i) in pageItems" :key="`page-${i}`">
+        <!-- Ellipsis -->
+        <span
+          v-if="item === '...'"
+          class="inline-flex items-center justify-center text-slate-400 dark:text-slate-500 select-none font-medium"
+          :style="{
+            minWidth: `${currentSize.box}px`,
+            height: `${currentSize.box}px`,
+            fontSize: currentSize.font,
+          }"
+        >
+          …
+        </span>
+
+        <!-- Page Button -->
+        <button
+          v-else
+          type="button"
+          :disabled="disabled"
+          class="cynx-page-num inline-flex items-center justify-center transition-all"
+          :class="[
+            item === page ? 'cynx-page-num--active font-semibold' : 'cynx-page-num--inactive font-medium hover:bg-slate-100/70 dark:hover:bg-slate-800/70'
+          ]"
+          :style="{
+            minWidth: `${currentSize.box}px`,
+            height: `${currentSize.box}px`,
+            padding: '0 6px',
+            borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+            fontSize: currentSize.font,
+            background: item === page ? 'var(--accent, #12675D)' : 'transparent',
+            color: item === page ? '#ffffff' : 'var(--muted, #64748b)',
+            boxShadow: item === page ? '0 3px 8px rgba(0, 0, 0, 0.12)' : 'none',
+            border: 'none',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+          }"
+          @click="handlePageChange(Number(item))"
+        >
+          {{ item }}
+        </button>
+      </template>
+
+      <!-- Next Arrow Button (Card Style) -->
+      <button
+        type="button"
+        :disabled="disabled || page >= totalPages"
+        class="cynx-page-arrow inline-flex items-center justify-center transition-all"
+        :style="{
+          width: `${currentSize.box}px`,
+          height: `${currentSize.box}px`,
+          borderRadius: 'var(--radm, var(--rads, var(--radius, 10px)))',
+          background: 'var(--surface, #ffffff)',
+          border: '1px solid var(--border, var(--bd, #e2e8f0))',
+          boxShadow: '0 2px 5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02)',
+          color: 'var(--muted, #64748b)',
+          cursor: disabled || page >= totalPages ? 'not-allowed' : 'pointer',
+          opacity: disabled || page >= totalPages ? 0.35 : 1,
+        }"
+        title="Next page"
+        @click="handlePageChange(page + 1)"
+      >
+        <ChevronRight :size="currentSize.icon" :stroke-width="2.2" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cynx-page-arrow:not(:disabled):hover {
+  color: var(--t, #0f111c);
+  border-color: var(--border-hover, #cbd5e1);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
+}
+
+.cynx-page-num--inactive:not(:disabled):hover {
+  color: var(--t, #0f111c);
+}
+</style>