ketekny-ui-kit 1.0.139 → 1.0.141

package/package.json

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

package/src/ui/kPagination.vue

@@ -1,66 +1,116 @@
 <template>
-  <div class="flex flex-wrap items-center gap-3">
-    <div class="text-sm font-medium text-slate-500">
+  <div class="flex flex-wrap items-center" :class="size === 'small' ? 'gap-2' : 'gap-3'">
+    <div class="font-medium text-slate-500" :class="size === 'small' ? 'text-xs' : 'text-sm'">
       {{ 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">
+    <div v-if="showPageSize" class="w-36 shrink-0">
+      <kSelect
+        v-model="pageSizeModel"
+        :options="normalizedPageSizeOptions"
+        :clearable="false"
+        :searchable="false"
+        aria-label="Μέγεθος σελίδας"
+      />
+    </div>
+
+    <div v-if="compact" class="inline-flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300">
+      <button
+        type="button"
+        class="inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-300 dark:hover:bg-slate-800 dark:disabled:text-slate-600"
+        :disabled="loading || currentPage <= 1"
+        aria-label="Προηγούμενη σελίδα"
+        @click="emit('previous')"
+      >
+        <ChevronLeft class="w-4 h-4" />
+      </button>
+
+      <span class="inline-flex items-center justify-center min-w-10 h-10 px-3 border border-slate-200 rounded-lg text-slate-700 bg-white dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200">
+        {{ currentPage }}
+      </span>
+      <span>από</span>
+      <span>{{ safeTotalPages }}</span>
+
+      <button
+        type="button"
+        class="inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-slate-100 disabled:cursor-not-allowed disabled:text-slate-300 dark:hover:bg-slate-800 dark:disabled:text-slate-600"
+        :disabled="loading || currentPage >= safeTotalPages"
+        aria-label="Επόμενη σελίδα"
+        @click="emit('next')"
+      >
+        <ChevronRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <div v-else class="inline-flex overflow-hidden border border-slate-200 rounded-lg divide-x divide-slate-200 dark:border-slate-700 dark:divide-slate-700">
+      <button
+        type="button"
+        :class="controlClass"
+        :disabled="loading || currentPage <= 1"
+        @click="emit('first')"
+      >
+        <ChevronsLeft :class="iconClass" />
+        <span>Πρώτη</span>
+      </button>
+
+      <button
+        type="button"
+        :class="controlClass"
+        :disabled="loading || currentPage <= 1"
+        @click="emit('previous')"
+      >
+        <ChevronLeft :class="iconClass" />
+        <span>Προηγ.</span>
+      </button>
+
       <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"
+          class="flex items-center justify-center font-medium text-slate-400 bg-white dark:bg-slate-900"
+          :class="segmentClass"
         >
           ...
         </span>
 
-        <kButton
+        <button
           v-else
-          :label="String(item.page)"
-          variant="soft"
-          :class="item.active ? 'ring-2 ring-cyan-200' : ''"
+          type="button"
+          :class="[pageClass, item.active ? activePageClass : 'hover:bg-slate-50 dark:hover:bg-slate-800']"
           :disabled="loading || item.active"
           @click="emit('page', item.page)"
-        />
+          :aria-current="item.active ? 'page' : undefined"
+        >
+          {{ item.page }}
+        </button>
       </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')"
-    />
+      <button
+        type="button"
+        :class="controlClass"
+        :disabled="loading || currentPage >= safeTotalPages"
+        @click="emit('next')"
+      >
+        <span>Επόμ.</span>
+        <ChevronRight :class="iconClass" />
+      </button>
+
+      <button
+        type="button"
+        :class="controlClass"
+        :disabled="loading || currentPage >= safeTotalPages"
+        @click="emit('last')"
+      >
+        <span>Τελευταία</span>
+        <ChevronsRight :class="iconClass" />
+      </button>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import kButton from './kButton.vue'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
+import kSelect from './kSelect.vue'
 
 const props = defineProps({
   paginationLabel: {
@@ -79,12 +129,57 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['default', 'small'].includes(value),
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  pageSizeOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100],
+  },
+  showPageSize: {
+    type: Boolean,
+    default: true,
+  },
 })
 
-const emit = defineEmits(['first', 'previous', 'page', 'next', 'last'])
+const emit = defineEmits(['first', 'previous', 'page', 'next', 'last', 'update:pageSize'])
 
 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 segmentClass = computed(() => props.size === 'small' ? 'h-8 min-w-8 px-2 text-xs' : 'h-10 min-w-9 px-3 text-sm')
+const controlClass = computed(() => [
+  segmentClass.value,
+  'inline-flex items-center justify-center gap-1 bg-white text-slate-700 transition-colors',
+  'hover:bg-slate-50 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-white',
+  'dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800 dark:disabled:text-slate-600 dark:disabled:hover:bg-slate-900',
+])
+const pageClass = computed(() => [
+  segmentClass.value,
+  'inline-flex items-center justify-center bg-white text-slate-700 transition-colors',
+  'disabled:cursor-default dark:bg-slate-900 dark:text-slate-200',
+])
+const activePageClass = 'bg-slate-100 text-slate-900 dark:bg-slate-700 dark:text-white'
+const iconClass = computed(() => props.size === 'small' ? 'w-3.5 h-3.5' : 'w-4 h-4')
+const normalizedPageSizeOptions = computed(() =>
+  props.pageSizeOptions.map((value) => ({
+    value: Number(value),
+    label: `${value} / σελίδα`,
+  }))
+)
+const pageSizeModel = computed({
+  get: () => props.pageSize,
+  set: (value) => emit('update:pageSize', Number(value)),
+})
 
 const paginationItems = computed(() => {
   const pages = new Set([1, safeTotalPages.value, currentPage.value - 1, currentPage.value, currentPage.value + 1])

package/src/ui/kSelect.vue

@@ -17,13 +17,14 @@
             :placeholder="placeholder"
             class="block pr-10 truncate text-gray-700 data-[placeholder]:text-gray-400 dark:text-slate-100 dark:data-[placeholder]:text-slate-500"
           />
-          <div v-else class="flex flex-wrap items-center gap-1 pr-10">
+          <div v-else ref="selectedContainer" class="flex items-center gap-0.5 pr-10 overflow-hidden whitespace-nowrap">
             <span v-if="selectedOptions.length === 0" class="text-gray-400 dark:text-slate-500">
               {{ placeholder }}
             </span>
             <kChip
-              v-for="option in selectedOptions"
+              v-for="option in visibleSelectedOptions"
               :key="option[optionValue]"
+              class="shrink-0"
               size="small"
             >
               <span>{{ option[optionLabel] }}</span>
@@ -38,6 +39,9 @@
                 <X class="w-3 h-3" />
               </button>
             </kChip>
+            <span v-if="hiddenSelectedCount > 0" class="text-xs text-gray-500 shrink-0 dark:text-slate-400">
+              +{{ hiddenSelectedCount }}...
+            </span>
           </div>
 
           <button
@@ -82,7 +86,7 @@
 
           <SelectViewport
             ref="viewportRef"
-            class="select-viewport p-1 overflow-y-scroll"
+            class="select-viewport p-1 overflow-y-auto"
             :style="{ maxHeight: resolvedDropdownHeight }"
             @keydown="handleViewportKeydown"
           >
@@ -112,6 +116,14 @@
       </SelectPortal>
     </SelectRoot>
 
+    <div ref="chipMeasureContainer" class="fixed invisible flex items-center gap-0.5 pointer-events-none" aria-hidden="true">
+      <kChip v-for="option in selectedOptions" :key="option[optionValue]" size="small">
+        <span>{{ option[optionLabel] }}</span>
+        <X class="w-3 h-3 ml-1" />
+      </kChip>
+      <span ref="overflowLabelMeasure" class="text-xs">+{{ selectedOptions.length }}...</span>
+    </div>
+
     <div class="mt-1 text-sm text-red-500 dark:text-rose-400" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
@@ -123,7 +135,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import {
   SelectContent,
   SelectItem,
@@ -161,6 +173,11 @@ const open = ref(false);
 const searchQuery = ref("");
 const searchInput = ref(null);
 const viewportRef = ref(null);
+const selectedContainer = ref(null);
+const chipMeasureContainer = ref(null);
+const overflowLabelMeasure = ref(null);
+const visibleSelectedCount = ref(0);
+let selectedContainerObserver;
 const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
 const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus-visible:outline-none text-gray-700 focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500";
 const errorStyle = "border-red-500 focus-visible:ring focus-visible:ring-red-300 dark:border-rose-500 dark:focus-visible:ring-rose-500/20";
@@ -213,6 +230,40 @@ const selectedOptions = computed(() => {
     .map((value) => props.options.find((option) => option?.[props.optionValue] === value))
     .filter(Boolean);
 });
+const visibleSelectedOptions = computed(() => selectedOptions.value.slice(0, visibleSelectedCount.value));
+const hiddenSelectedCount = computed(() => selectedOptions.value.length - visibleSelectedOptions.value.length);
+
+function updateVisibleSelectedCount() {
+  if (!props.multiple || !selectedContainer.value || !chipMeasureContainer.value) return;
+
+  const chipElements = Array.from(chipMeasureContainer.value.children).slice(0, selectedOptions.value.length);
+  const availableWidth = selectedContainer.value.clientWidth;
+  const overflowLabelWidth = overflowLabelMeasure.value?.offsetWidth ?? 0;
+  const gap = 2;
+  let usedWidth = 0;
+  let count = 0;
+
+  for (const chip of chipElements) {
+    const nextWidth = usedWidth + (count > 0 ? gap : 0) + chip.offsetWidth;
+    const remainingAfterNext = selectedOptions.value.length - count - 1;
+    const reservedWidth = remainingAfterNext > 0 ? gap + overflowLabelWidth : 0;
+    if (nextWidth + reservedWidth > availableWidth) break;
+    usedWidth = nextWidth;
+    count += 1;
+  }
+
+  visibleSelectedCount.value = count;
+}
+
+onMounted(() => {
+  selectedContainerObserver = new ResizeObserver(updateVisibleSelectedCount);
+  if (selectedContainer.value) selectedContainerObserver.observe(selectedContainer.value);
+  nextTick(updateVisibleSelectedCount);
+});
+
+onBeforeUnmount(() => selectedContainerObserver?.disconnect());
+
+watch(selectedOptions, () => nextTick(updateVisibleSelectedCount), { deep: true });
 
 const internalValue = computed({
   get() {
@@ -367,7 +418,7 @@ function handleViewportKeydown(event) {
 }
 
 :deep([data-reka-select-viewport]) {
-  scrollbar-gutter: stable;
+  scrollbar-gutter: auto;
   scrollbar-width: auto !important;
   scrollbar-color: #475569 #cbd5e1 !important;
   -ms-overflow-style: auto !important;