cynx-lib 1.3.51 → 1.3.52

package/vue/components/Pagination.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ChevronLeft, ChevronRight } from "lucide-vue-next";
+import Button from "./Button.vue";
+
+const props = withDefaults(
+  defineProps<{
+    page?: number;
+    pages?: number;
+    total?: number;
+    perPage?: number;
+    pageSize?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    page: 1,
+    pages: 1,
+    total: 0,
+    perPage: 20,
+    disabled: false,
+  }
+);
+
+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);
+};
+</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 Buttons -->
+    <div class="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="xs"
+        :disabled="disabled || page <= 1"
+        title="Previous page"
+        @click="handlePageChange(page - 1)"
+      >
+        <template #icon>
+          <ChevronLeft :size="14" />
+        </template>
+      </Button>
+
+      <template v-for="(item, i) in pageItems" :key="`p-${i}`">
+        <span
+          v-if="item === '...'"
+          class="px-1 text-xs text-slate-400 dark:text-slate-500"
+        >
+          …
+        </span>
+        <Button
+          :variant="item === page ? 'primary' : 'ghost'"
+          size="xs"
+          class="min-w-[28px] h-7 px-2 font-semibold text-xs"
+          :disabled="disabled"
+          @click="handlePageChange(Number(item))"
+        >
+          {{ item }}
+        </Button>
+      </template>
+
+      <Button
+        variant="ghost"
+        size="xs"
+        :disabled="disabled || page >= totalPages"
+        title="Next page"
+        @click="handlePageChange(page + 1)"
+      >
+        <template #icon>
+          <ChevronRight :size="14" />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>