ketekny-ui-kit 1.0.62 → 1.0.63

package/README.md

@@ -154,7 +154,7 @@ Components:
 
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
-- `kProgressBar`, `kTree`, `kButton`, `kSelect`, `kUploader`
+- `kProgressBar`, `kPagination`, `kTree`, `kButton`, `kSelect`, `kUploader`
 - `kToggle`, `kInput`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`

package/index.js

@@ -25,6 +25,7 @@ import kArrayList from './src/ui/kArrayList.vue'
 import kList from './src/ui/kList.vue'
 import kSkeleton from './src/ui/kSkeleton.vue'
 import kProgressBar from './src/ui/kProgressBar.vue'
+import kPagination from './src/ui/kPagination.vue'
 import kTextArea from './src/ui/kTextArea.vue'
 import kTree from './src/ui/kTree.vue'
 
@@ -47,7 +48,7 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
+  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
   kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kPagination.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <div class="text-sm font-medium text-slate-500">
+      {{ paginationLabel }}
+    </div>
+
+    <kButton
+      label="First"
+      icon="ChevronsLeft"
+      variant="soft"
+      :disabled="loading || currentPage <= 1"
+      @click="emit('first')"
+    />
+
+    <kButton
+      label="Previous"
+      icon="ChevronLeft"
+      variant="soft"
+      :disabled="loading || currentPage <= 1"
+      @click="emit('previous')"
+    />
+
+    <div class="flex items-center gap-1">
+      <template v-for="item in paginationItems" :key="item.key">
+        <span
+          v-if="item.type === 'ellipsis'"
+          class="px-2 text-sm font-medium text-slate-400"
+        >
+          ...
+        </span>
+
+        <kButton
+          v-else
+          :label="String(item.page)"
+          variant="soft"
+          :class="item.active ? 'ring-2 ring-cyan-200' : ''"
+          :disabled="loading || item.active"
+          @click="emit('page', item.page)"
+        />
+      </template>
+    </div>
+
+    <kButton
+      label="Next"
+      icon="ChevronRight"
+      variant="soft"
+      :disabled="loading || currentPage >= safeTotalPages"
+      @click="emit('next')"
+    />
+
+    <kButton
+      label="Last"
+      icon="ChevronsRight"
+      variant="soft"
+      :disabled="loading || currentPage >= safeTotalPages"
+      @click="emit('last')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import kButton from './kButton.vue'
+
+const props = defineProps({
+  paginationLabel: {
+    type: String,
+    default: '',
+  },
+  page: {
+    type: Number,
+    required: true,
+  },
+  totalPages: {
+    type: Number,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['first', 'previous', 'page', 'next', 'last'])
+
+const safeTotalPages = computed(() => Math.max(1, Math.trunc(props.totalPages || 0)))
+const currentPage = computed(() => Math.min(Math.max(Math.trunc(props.page || 1), 1), safeTotalPages.value))
+
+const paginationItems = computed(() => {
+  const pages = new Set([1, safeTotalPages.value, currentPage.value - 1, currentPage.value, currentPage.value + 1])
+  const clampedPages = [...pages]
+    .filter((pageNumber) => Number.isFinite(pageNumber) && pageNumber >= 1 && pageNumber <= safeTotalPages.value)
+    .sort((a, b) => a - b)
+
+  const items = []
+  let lastPage = 0
+
+  for (const pageNumber of clampedPages) {
+    if (lastPage && pageNumber - lastPage > 1) {
+      items.push({
+        key: `ellipsis-${lastPage}-${pageNumber}`,
+        type: 'ellipsis',
+      })
+    }
+
+    items.push({
+      key: `page-${pageNumber}`,
+      type: 'page',
+      page: pageNumber,
+      active: pageNumber === currentPage.value,
+    })
+
+    lastPage = pageNumber
+  }
+
+  return items
+})
+</script>