ketekny-ui-kit 1.0.19 → 1.0.21

package/package.json

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

package/src/ui/kSelect.vue

@@ -37,35 +37,39 @@
           :side-offset="6"
           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 v-if="searchable" class="sticky top-0 z-10 p-2 border-b border-gray-100 bg-white">
+            <div class="relative">
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
+              <input
+                ref="searchInput"
+                type="text"
+                v-model="searchQuery"
+                placeholder="Αναζήτηση..."
+                class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors placeholder-gray-400"
+                role="searchbox"
+                aria-label="Search options"
+                @keydown="handleSearchKeydown"
+                @keyup.stop
+              />
+            </div>
           </div>
 
           <SelectViewport
             ref="viewportRef"
-            class="p-1 overflow-y-auto"
+            class="select-viewport p-1 overflow-y-scroll"
             :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-8 pr-3 text-base 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,8 +77,9 @@
               <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-base text-gray-400 text-center">
+              <SearchX class="w-5 h-5 text-gray-300" />
+              <span>Δεν βρέθηκαν επιλογές</span>
             </div>
           </SelectViewport>
         </SelectContent>
@@ -104,7 +109,7 @@ import {
   SelectValue,
   SelectViewport,
 } from "reka-ui";
-import { X, ChevronDown, Check } from "lucide-vue-next";
+import { X, ChevronDown, Check, Search, SearchX } from "lucide-vue-next";
 
 const props = defineProps({
   options: { type: Array, required: true },
@@ -146,17 +151,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 +237,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 +287,31 @@ function handleSearchKeydown(event) {
 .select-item {
   transition: background-color 80ms, color 80ms;
 }
+
+:deep([data-reka-select-viewport]) {
+  scrollbar-gutter: stable;
+  scrollbar-width: auto !important;
+  scrollbar-color: #475569 #cbd5e1 !important;
+  -ms-overflow-style: auto !important;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar) {
+  display: block !important;
+  width: 12px;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-track) {
+  background: #cbd5e1;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-thumb) {
+  background-color: #475569;
+  border-radius: 999px;
+  border: 2px solid #cbd5e1;
+}
+
+:deep([data-reka-select-viewport]::-webkit-scrollbar-thumb:hover) {
+  background-color: #334155;
+}
+
 </style>