ketekny-ui-kit 1.0.19 → 1.0.20

package/package.json

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

package/src/ui/kSelect.vue

@@ -38,34 +38,42 @@
           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" class="sticky top-0 z-10 p-1.5 border-b border-gray-100 bg-white">
-            <input
-              ref="searchInput"
-              type="text"
-              v-model="searchQuery"
-              placeholder="Αναζήτηση..."
-              class="w-full px-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 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>
 
+          <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 overflow-y-auto"
+            class="p-1"
             :style="{ maxHeight: dropdownHeight }"
+            @keydown="handleViewportKeydown"
           >
             <SelectItem
               v-for="(option, index) in filteredOptions"
-              :key="`${option[optionValue]}-${index}`"
+              :key="option[optionValue]"
               :value="option[optionValue]"
-              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-1.5 pl-6 pr-3 text-sm cursor-pointer outline-none select-none text-slate-700
+              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]:text-primary
-                     data-[state=checked]: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"
             >
-              <span class="absolute left-1.5 flex items-center justify-center w-4 h-4 shrink-0">
+              <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>
@@ -73,10 +81,15 @@
               <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
             </SelectItem>
 
-            <div v-if="filteredOptions.length === 0" class="px-3 py-2 text-sm text-gray-400 text-center">
-              Δεν βρέθηκαν επιλογές
+            <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>
@@ -100,11 +113,13 @@ import {
   SelectItemText,
   SelectPortal,
   SelectRoot,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
   SelectTrigger,
   SelectValue,
   SelectViewport,
 } from "reka-ui";
-import { X, ChevronDown, Check } from "lucide-vue-next";
+import { X, ChevronDown, ChevronUp, Check, Search, SearchX } from "lucide-vue-next";
 
 const props = defineProps({
   options: { type: Array, required: true },
@@ -146,17 +161,29 @@ 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();
+      const el = viewportRef.value?.$el ?? viewportRef.value;
+      const checked = el?.querySelector('[data-state="checked"]');
+      checked?.scrollIntoView({ block: "nearest" });
     });
     return;
   }
@@ -220,6 +247,15 @@ function handleSearchKeydown(event) {
     if (focused) focused.click();
   }
 }
+
+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>
@@ -261,4 +297,6 @@ function handleSearchKeydown(event) {
 .select-item {
   transition: background-color 80ms, color 80ms;
 }
+
 </style>
+