@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.19 → 1.0.20

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.19",
+  "version": "1.0.20",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/ui/pagination.vue

@@ -1,21 +1,37 @@
 <template>
-  <nav class="flex items-center justify-center gap-2" role="navigation" aria-label="Pagination">
+  <nav class="flex items-center justify-center gap-1" role="navigation" aria-label="Pagination">
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page <= 1"
       @click="$emit('update:page', page - 1)"
       aria-label="Previous page"
     >
-      &lt;
+      Previous
     </button>
-    <span class="px-2 text-sm">{{ page }} / {{ totalPages }}</span>
+    
+    <template v-for="(pageNum, index) in visiblePages" :key="pageNum">
+      <span v-if="pageNum === '...'" class="px-3 py-2 text-sm">...</span>
+      <button
+        v-else
+        class="px-3 py-2 text-sm font-medium rounded-md transition-colors"
+        :class="pageNum === page 
+          ? 'border border-input bg-background' 
+          : 'hover:bg-accent hover:text-accent-foreground'"
+        @click="$emit('update:page', pageNum)"
+        :aria-label="`Page ${pageNum}`"
+        :aria-current="pageNum === page ? 'page' : undefined"
+      >
+        {{ pageNum }}
+      </button>
+    </template>
+    
     <button
-      class="h-8 w-8 flex items-center justify-center rounded border border-input bg-background px-0 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+      class="px-3 py-2 text-sm font-medium rounded-md transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
       :disabled="page >= totalPages"
       @click="$emit('update:page', page + 1)"
       aria-label="Next page"
     >
-      &gt;
+      Next
     </button>
   </nav>
 </template>
@@ -38,4 +54,45 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:page']);
 const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const current = props.page;
+  const total = totalPages.value;
+  
+  if (total <= 7) {
+    // Show all pages if total is 7 or less
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    // Always show first page
+    pages.push(1);
+    
+    if (current <= 4) {
+      // Show pages 2, 3, 4, 5, then ellipsis, then last page
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push('...');
+      pages.push(total);
+    } else if (current >= total - 3) {
+      // Show first page, ellipsis, then last 4 pages
+      pages.push('...');
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Show first page, ellipsis, current-1, current, current+1, ellipsis, last page
+      pages.push('...');
+      pages.push(current - 1);
+      pages.push(current);
+      pages.push(current + 1);
+      pages.push('...');
+      pages.push(total);
+    }
+  }
+  
+  return pages;
+});
 </script>