ketekny-ui-kit 1.0.61 → 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.61",
+  "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>

package/src/ui/kTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="k-tree text-primary/90" :class="disabled ? 'k-tree--disabled' : ''">
-    <TreeBranch
+    <kTreeBranch
       :nodes="treeData"
       :indent="indent"
       :disabled="disabled"
@@ -17,112 +17,16 @@
           {{ resolveNodeLabel(node) }}
         </slot>
       </template>
-    </TreeBranch>
+    </kTreeBranch>
   </div>
 </template>
 
 <script>
-import { ChevronRight } from 'lucide-vue-next'
-
-const TreeBranch = {
-  name: 'TreeBranch',
-  components: { ChevronRight },
-  props: {
-    nodes: { type: Array, default: () => [] },
-    indent: { type: Number, default: 20 },
-    disabled: { type: Boolean, default: false },
-    draggable: { type: [Boolean, Function], default: false },
-    droppable: { type: [Boolean, Function], default: false },
-    selectedKeys: { type: Object, default: () => ({}) },
-    resolveNodeLabel: { type: Function, required: true },
-  },
-  emits: ['node-click', 'toggle', 'drag-start', 'node-drop'],
-  methods: {
-    hasChildren(node) {
-      return Array.isArray(node?.children) && node.children.length > 0
-    },
-    canDrag(node) {
-      return this.draggable === true || (typeof this.draggable === 'function' && this.draggable(node.__raw || node))
-    },
-    canDrop(node) {
-      return this.droppable === true || (typeof this.droppable === 'function' && this.droppable(node.__raw || node))
-    },
-    isSelected(key) {
-      return this.selectedKeys?.[String(key)] === true
-    },
-    onDragStart(event, node) {
-      if (!this.canDrag(node)) {
-        event.preventDefault()
-        return
-      }
-      event.dataTransfer.effectAllowed = 'move'
-      event.dataTransfer.setData('text/plain', String(node.key))
-      this.$emit('drag-start', node)
-    },
-    onDrop(event, node) {
-      if (!this.canDrop(node)) return
-      event.preventDefault()
-      this.$emit('node-drop', node)
-    },
-  },
-  template: `
-    <ul class="k-tree-branch">
-      <li v-for="node in nodes" :key="node.key" class="k-tree-node">
-        <div
-          class="k-tree-node-content"
-          :class="[
-            isSelected(node.key) ? 'k-tree-node-content--selected' : '',
-            canDrop(node) ? 'k-tree-node-content--droppable' : '',
-          ]"
-          :style="{ paddingLeft: node.__level ? (node.__level * indent + 7) + 'px' : undefined }"
-          :draggable="canDrag(node)"
-          @dragstart="onDragStart($event, node)"
-          @dragover.prevent="canDrop(node)"
-          @drop="onDrop($event, node)"
-          @click="$emit('node-click', $event, node)">
-          <button
-            v-if="hasChildren(node)"
-            type="button"
-            class="k-tree-node-toggler"
-            :aria-label="node.$folded ? 'Expand node' : 'Collapse node'"
-            @click.stop="$emit('toggle', node)">
-            <ChevronRight class="k-tree-node-toggler-icon" :class="node.$folded ? '' : 'k-tree-node-toggler-icon--open'" />
-          </button>
-
-          <span v-else class="k-tree-node-toggler k-tree-node-toggler--empty"></span>
-
-          <div class="k-tree-node-label">
-            <slot :node="node.__raw || node" :path="node.__path">
-              {{ resolveNodeLabel(node.__raw || node) }}
-            </slot>
-          </div>
-        </div>
-
-        <TreeBranch
-          v-if="hasChildren(node) && !node.$folded"
-          :nodes="node.children"
-          :indent="indent"
-          :disabled="disabled"
-          :draggable="draggable"
-          :droppable="droppable"
-          :selected-keys="selectedKeys"
-          :resolve-node-label="resolveNodeLabel"
-          @node-click="(...args) => $emit('node-click', ...args)"
-          @toggle="(...args) => $emit('toggle', ...args)"
-          @drag-start="(...args) => $emit('drag-start', ...args)"
-          @node-drop="(...args) => $emit('node-drop', ...args)">
-          <template #default="slotProps">
-            <slot v-bind="slotProps" />
-          </template>
-        </TreeBranch>
-      </li>
-    </ul>
-  `,
-}
+import kTreeBranch from './kTreeBranch.vue'
 
 export default {
   name: 'kTree',
-  components: { TreeBranch },
+  components: { kTreeBranch },
   props: {
     value: { type: Array, default: () => [] },
     selectionKeys: { type: [Object, null], default: null },

package/src/ui/kTreeBranch.vue

@@ -0,0 +1,100 @@
+<template>
+  <ul class="k-tree-branch">
+    <li v-for="node in nodes" :key="node.key" class="k-tree-node">
+      <div
+        class="k-tree-node-content"
+        :class="[
+          isSelected(node.key) ? 'k-tree-node-content--selected' : '',
+          canDrop(node) ? 'k-tree-node-content--droppable' : '',
+        ]"
+        :style="{ paddingLeft: node.__level ? (node.__level * indent + 7) + 'px' : undefined }"
+        :draggable="canDrag(node)"
+        @dragstart="onDragStart($event, node)"
+        @dragover.prevent="canDrop(node)"
+        @drop="onDrop($event, node)"
+        @click="$emit('node-click', $event, node)">
+        <button
+          v-if="hasChildren(node)"
+          type="button"
+          class="k-tree-node-toggler"
+          :aria-label="node.$folded ? 'Expand node' : 'Collapse node'"
+          @click.stop="$emit('toggle', node)">
+          <ChevronRight class="k-tree-node-toggler-icon" :class="node.$folded ? '' : 'k-tree-node-toggler-icon--open'" />
+        </button>
+
+        <span v-else class="k-tree-node-toggler k-tree-node-toggler--empty"></span>
+
+        <div class="k-tree-node-label">
+          <slot :node="node.__raw || node" :path="node.__path">
+            {{ resolveNodeLabel(node.__raw || node) }}
+          </slot>
+        </div>
+      </div>
+
+      <kTreeBranch
+        v-if="hasChildren(node) && !node.$folded"
+        :nodes="node.children"
+        :indent="indent"
+        :disabled="disabled"
+        :draggable="draggable"
+        :droppable="droppable"
+        :selected-keys="selectedKeys"
+        :resolve-node-label="resolveNodeLabel"
+        @node-click="(...args) => $emit('node-click', ...args)"
+        @toggle="(...args) => $emit('toggle', ...args)"
+        @drag-start="(...args) => $emit('drag-start', ...args)"
+        @node-drop="(...args) => $emit('node-drop', ...args)">
+        <template #default="slotProps">
+          <slot v-bind="slotProps" />
+        </template>
+      </kTreeBranch>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { ChevronRight } from 'lucide-vue-next'
+
+export default {
+  name: 'kTreeBranch',
+  components: { ChevronRight },
+  props: {
+    nodes: { type: Array, default: () => [] },
+    indent: { type: Number, default: 20 },
+    disabled: { type: Boolean, default: false },
+    draggable: { type: [Boolean, Function], default: false },
+    droppable: { type: [Boolean, Function], default: false },
+    selectedKeys: { type: Object, default: () => ({}) },
+    resolveNodeLabel: { type: Function, required: true },
+  },
+  emits: ['node-click', 'toggle', 'drag-start', 'node-drop'],
+  methods: {
+    hasChildren(node) {
+      return Array.isArray(node?.children) && node.children.length > 0
+    },
+    canDrag(node) {
+      return this.draggable === true || (typeof this.draggable === 'function' && this.draggable(node.__raw || node))
+    },
+    canDrop(node) {
+      return this.droppable === true || (typeof this.droppable === 'function' && this.droppable(node.__raw || node))
+    },
+    isSelected(key) {
+      return this.selectedKeys?.[String(key)] === true
+    },
+    onDragStart(event, node) {
+      if (!this.canDrag(node)) {
+        event.preventDefault()
+        return
+      }
+      event.dataTransfer.effectAllowed = 'move'
+      event.dataTransfer.setData('text/plain', String(node.key))
+      this.$emit('drag-start', node)
+    },
+    onDrop(event, node) {
+      if (!this.canDrop(node)) return
+      event.preventDefault()
+      this.$emit('node-drop', node)
+    },
+  },
+}
+</script>