ketekny-ui-kit 1.0.18 → 1.0.20

package/package.json

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

package/src/ui/kSelect.vue

@@ -17,86 +17,88 @@
           <button
             v-if="clearable && isSelectionSet && !disabled"
             type="button"
-            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500"
+            class="absolute text-gray-400 -translate-y-1/2 right-8 top-1/2 hover:text-red-500 transition-colors"
             aria-label="Clear selection"
             @pointerdown.stop.prevent="clearSelection"
             @click.stop.prevent="clearSelection"
           >
-            <X class="w-5 h-5 mr-2" />
+            <X class="w-4 h-4" />
           </button>
 
           <span class="absolute text-gray-400 -translate-y-1/2 pointer-events-none right-3 top-1/2">
-            <ChevronDown class="w-5 h-5" v-if="!open" />
-            <ChevronUp class="w-5 h-5" v-else />
+            <ChevronDown class="w-4 h-4 transition-transform duration-200" :class="{ 'rotate-180': open }" />
           </span>
         </div>
       </SelectTrigger>
 
       <SelectPortal>
         <SelectContent
-          :id="dropdownId"
           position="popper"
           :side-offset="6"
-          class="z-[9999] overflow-hidden bg-white border border-gray-200 rounded-lg shadow-[0_20px_45px_-15px_rgba(15,23,42,0.35),0_8px_18px_-10px_rgba(15,23,42,0.25)] ring-1 ring-slate-900/10"
+          class="select-content z-[9999] bg-white border border-gray-200 rounded-lg shadow-[0_10px_38px_-10px_rgba(22,23,24,0.35),0_10px_20px_-15px_rgba(22,23,24,0.2)] overflow-hidden"
         >
-          <div v-if="searchable" data-select-search-header class="sticky top-0 z-10 pt-2 pb-2 mx-2 bg-white">
-            <input
-              ref="searchInput"
-              type="text"
-              v-model="searchQuery"
-              placeholder="Αναζήτηση..."
-              class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none"
-              role="searchbox"
-              aria-label="Search options"
-              @keydown.stop="handleSearchKeydown"
-            />
+          <div v-if="searchable" class="sticky top-0 z-10 p-1.5 border-b border-gray-100 bg-white">
+            <div class="relative">
+              <Search class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none" />
+              <input
+                ref="searchInput"
+                type="text"
+                v-model="searchQuery"
+                placeholder="Αναζήτηση..."
+                class="w-full pl-7 pr-2.5 py-1.5 text-sm border border-gray-200 rounded-md focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/30 transition-colors placeholder-gray-400"
+                role="searchbox"
+                aria-label="Search options"
+                @keydown="handleSearchKeydown"
+                @keyup.stop
+              />
+            </div>
           </div>
 
-          <div class="relative">
-            <SelectViewport
-              class="p-2 overflow-y-auto"
-              :class="canScrollAny ? 'pt-8 pb-8' : ''"
-              :style="{ maxHeight: viewportMaxHeight }"
-              @scroll="updateScrollState"
+          <SelectScrollUpButton class="flex items-center justify-center py-1 text-gray-400 hover:text-gray-600 cursor-default bg-white border-b border-gray-100">
+            <ChevronUp class="w-4 h-4" />
+          </SelectScrollUpButton>
+
+          <SelectViewport
+            ref="viewportRef"
+            class="p-1"
+            :style="{ maxHeight: dropdownHeight }"
+            @keydown="handleViewportKeydown"
+          >
+            <SelectItem
+              v-for="(option, index) in filteredOptions"
+              :key="option[optionValue]"
+              :value="option[optionValue]"
+              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-7 pr-3 text-sm cursor-pointer outline-none select-none text-slate-700
+                     data-[highlighted]:bg-primary data-[highlighted]:text-white
+                     data-[state=checked]:bg-primary/5 data-[state=checked]:text-primary
+                     data-[state=checked]:data-[highlighted]:bg-primary data-[state=checked]:data-[highlighted]:text-white"
             >
-              <div class="flex flex-col gap-0">
-                <SelectItem
-                  v-for="(option, index) in filteredOptions"
-                  :key="`${option[optionValue]}-${index}`"
-                  :value="option[optionValue]"
-                  class="px-3 py-2 rounded cursor-pointer outline-none text-slate-700 hover:bg-primary/20 hover:text-primary data-[highlighted]:bg-primary data-[highlighted]:text-white data-[state=checked]:text-primary data-[state=checked]:data-[highlighted]:text-white"
-                >
-                  <div class="flex items-center justify-between gap-2">
-                    <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
-                    <span class="inline-flex items-center justify-center w-4 h-4 shrink-0">
-                      <SelectItemIndicator>
-                        <Check class="w-4 h-4" />
-                      </SelectItemIndicator>
-                    </span>
-                  </div>
-                </SelectItem>
-              </div>
-
-              <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-gray-400">Δεν βρέθηκαν επιλογές</div>
-            </SelectViewport>
-
-            <SelectScrollUpButton class="absolute top-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
-              <ChevronUp class="w-4 h-4" />
-            </SelectScrollUpButton>
-
-            <SelectScrollDownButton class="absolute bottom-0 left-0 right-0 z-10 flex items-center justify-center h-6 text-gray-500 bg-white/95">
-              <ChevronDown class="w-4 h-4" />
-            </SelectScrollDownButton>
-          </div>
+              <span class="absolute left-2 flex items-center justify-center w-4 h-4 shrink-0">
+                <SelectItemIndicator>
+                  <Check class="w-3.5 h-3.5" />
+                </SelectItemIndicator>
+              </span>
+              <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
+            </SelectItem>
+
+            <div v-if="filteredOptions.length === 0" class="flex flex-col items-center gap-1.5 px-3 py-4 text-sm text-gray-400 text-center">
+              <SearchX class="w-5 h-5 text-gray-300" />
+              <span>Δεν βρέθηκαν επιλογές</span>
+            </div>
+          </SelectViewport>
+
+          <SelectScrollDownButton class="flex items-center justify-center py-1 text-gray-400 hover:text-gray-600 cursor-default bg-white border-t border-gray-100">
+            <ChevronDown class="w-4 h-4" />
+          </SelectScrollDownButton>
         </SelectContent>
       </SelectPortal>
     </SelectRoot>
 
-    <div class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
+    <div class="mt-1 text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
       {{ error }}
     </div>
 
-    <div class="mt-1 text-gray-500" v-if="info">
+    <div class="mt-1 text-sm text-gray-500" v-if="info">
       {{ info }}
     </div>
   </div>
@@ -117,7 +119,7 @@ import {
   SelectValue,
   SelectViewport,
 } from "reka-ui";
-import { X, ChevronDown, ChevronUp, Check } from "lucide-vue-next";
+import { X, ChevronDown, ChevronUp, Check, Search, SearchX } from "lucide-vue-next";
 
 const props = defineProps({
   options: { type: Array, required: true },
@@ -130,6 +132,7 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   placeholder: { type: String, default: "Επιλέξτε μία τιμή" },
   id: { type: String, default: null },
+  dropdownHeight: { type: String, default: "min(400px, 40vh)" },
   clearable: { type: Boolean, default: true },
   searchable: { type: Boolean, default: true },
 });
@@ -139,16 +142,13 @@ const emit = defineEmits(["update:modelValue"]);
 const open = ref(false);
 const searchQuery = ref("");
 const searchInput = ref(null);
-const canScrollAny = ref(false);
+const viewportRef = ref(null);
 const generatedId = `select-${Math.random().toString(36).substr(2, 9)}`;
-const viewportMaxHeight = "400px";
 const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400";
 const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
 const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
 
 const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
-const dropdownId = computed(() => `${computedId.value}-listbox`);
-
 const hasError = computed(() => props.error != null && props.error !== false);
 const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
 
@@ -161,28 +161,33 @@ const internalValue = computed({
   },
 });
 
+const normalizedOptions = computed(() =>
+  props.options.map((o) => ({
+    option: o,
+    normalized: String(o?.[props.optionLabel] ?? "").toLowerCase(),
+  }))
+);
+
 const filteredOptions = computed(() => {
   if (!props.searchable) return props.options;
   const q = searchQuery.value.trim().toLowerCase();
   if (!q) return props.options;
-  return props.options.filter((o) => String(o?.[props.optionLabel] ?? "").toLowerCase().includes(q));
+  return normalizedOptions.value
+    .filter(({ normalized }) => normalized.includes(q))
+    .map(({ option }) => option);
 });
 
 watch(open, (val) => {
   if (val) {
     nextTick(() => {
       if (props.searchable) searchInput.value?.focus();
-      updateScrollState();
+      const el = viewportRef.value?.$el ?? viewportRef.value;
+      const checked = el?.querySelector('[data-state="checked"]');
+      checked?.scrollIntoView({ block: "nearest" });
     });
     return;
   }
   searchQuery.value = "";
-  canScrollAny.value = false;
-});
-
-watch(filteredOptions, () => {
-  if (!open.value) return;
-  nextTick(() => updateScrollState());
 });
 
 function clearSelection() {
@@ -190,81 +195,108 @@ function clearSelection() {
   open.value = false;
 }
 
-function focusFirstOrLastOption(last = false) {
-  const container = document.getElementById(dropdownId.value);
-  if (!container) return;
-  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
-  if (!nodes.length) return;
-  const target = last ? nodes[nodes.length - 1] : nodes[0];
-  target.focus();
-}
-
-function moveOptionFocus(step) {
-  const container = document.getElementById(dropdownId.value);
-  if (!container) return;
-  const nodes = Array.from(container.querySelectorAll('[role="option"]:not([data-disabled])'));
-  if (!nodes.length) return;
-  const activeIndex = nodes.findIndex((node) => node === document.activeElement);
-  const baseIndex = activeIndex >= 0 ? activeIndex : step > 0 ? -1 : 0;
-  const nextIndex = Math.min(Math.max(baseIndex + step, 0), nodes.length - 1);
-  nodes[nextIndex].focus();
+function getOptionNodes() {
+  const el = viewportRef.value?.$el ?? viewportRef.value;
+  if (!el) return [];
+  return Array.from(el.querySelectorAll('[role="option"]:not([data-disabled])'));
 }
 
 function handleSearchKeydown(event) {
+  // Always stop propagation to prevent reka-ui typeahead on character keys
+  event.stopPropagation();
+
   if (event.key === "Escape") {
     event.preventDefault();
-    event.stopPropagation();
     open.value = false;
     return;
   }
 
-  if (event.key === "ArrowDown") {
-    event.preventDefault();
-    event.stopPropagation();
-    moveOptionFocus(1);
-    return;
-  }
-
-  if (event.key === "ArrowUp") {
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
     event.preventDefault();
-    event.stopPropagation();
-    moveOptionFocus(-1);
+    const nodes = getOptionNodes();
+    if (!nodes.length) return;
+    const activeIndex = nodes.findIndex((n) => n === document.activeElement);
+    if (event.key === "ArrowDown") {
+      const next = activeIndex < nodes.length - 1 ? nodes[activeIndex + 1] : nodes[0];
+      next.focus();
+    } else {
+      const prev = activeIndex > 0 ? nodes[activeIndex - 1] : nodes[nodes.length - 1];
+      prev.focus();
+    }
     return;
   }
 
   if (event.key === "Home") {
     event.preventDefault();
-    event.stopPropagation();
-    focusFirstOrLastOption(false);
+    const nodes = getOptionNodes();
+    nodes[0]?.focus();
     return;
   }
 
   if (event.key === "End") {
     event.preventDefault();
-    event.stopPropagation();
-    focusFirstOrLastOption(true);
+    const nodes = getOptionNodes();
+    nodes[nodes.length - 1]?.focus();
     return;
   }
 
   if (event.key === "Enter") {
-    const container = document.getElementById(dropdownId.value);
-    if (!container) return;
-    const active = document.activeElement;
-    if (active && container.contains(active) && active.getAttribute("role") === "option") {
-      event.preventDefault();
-      event.stopPropagation();
-      active.click();
-    }
+    event.preventDefault();
+    const nodes = getOptionNodes();
+    const focused = nodes.find((n) => n === document.activeElement);
+    if (focused) focused.click();
   }
 }
 
-function updateScrollState() {
-  const container = document.getElementById(dropdownId.value);
-  const viewport = container?.querySelector("[data-reka-select-viewport]");
-  if (!viewport) {
-    canScrollAny.value = false;
-    return;
-  }
-  canScrollAny.value = viewport.scrollHeight > viewport.clientHeight + 1;
+function handleViewportKeydown(event) {
+  if (!props.searchable || !searchInput.value || event.target === searchInput.value) return;
+  const isPrintable = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+  if (!isPrintable) return;
+  event.preventDefault();
+  searchQuery.value += event.key;
+  nextTick(() => searchInput.value?.focus());
 }
 </script>
+
+<style scoped>
+.select-content {
+  transform-origin: var(--reka-select-content-transform-origin);
+  width: var(--reka-popper-anchor-width);
+}
+
+.select-content[data-state="open"] {
+  animation: selectOpen 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.select-content[data-state="closed"] {
+  animation: selectClose 0.1s ease-in;
+}
+
+@keyframes selectOpen {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes selectClose {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.97);
+  }
+}
+
+.select-item {
+  transition: background-color 80ms, color 80ms;
+}
+
+</style>
+