ketekny-ui-kit 1.0.141 → 1.0.142

package/package.json

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

package/src/ui/kSelect.vue

@@ -74,6 +74,7 @@
                 ref="searchInput"
                 type="text"
                 v-model="searchQuery"
+                autofocus
                 placeholder="Αναζήτηση..."
                 class="w-full pl-9 pr-3 py-2 text-base border border-gray-200 rounded-lg focus-visible:outline-none focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary/20 transition-colors placeholder-gray-400 dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500"
                 role="searchbox"
@@ -94,17 +95,20 @@
               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-8 pr-3 text-base cursor-pointer outline-none select-none text-slate-700 dark:text-slate-200
+              class="select-item relative flex items-center gap-1.5 rounded-[4px] py-2.5 pl-3 pr-8 text-base cursor-pointer outline-none select-none text-slate-700 dark:text-slate-200
                      data-[highlighted]:bg-primary data-[highlighted]:text-white
                      data-[state=checked]:bg-primary/5 data-[state=checked]:text-primary dark:data-[state=checked]:bg-slate-700 dark:data-[state=checked]:text-primary
                      data-[state=checked]:data-[highlighted]:bg-primary data-[state=checked]:data-[highlighted]:text-white"
             >
-              <span class="absolute left-2 flex items-center justify-center w-4 h-4 shrink-0">
+              <span v-if="hasOptionIcons" class="flex items-center justify-center w-4 h-4 shrink-0">
+                <kIcon v-if="option[optionIcon]" :name="option[optionIcon]" class="w-4 h-4 !text-current" />
+              </span>
+              <SelectItemText class="truncate">{{ option[optionLabel] }}</SelectItemText>
+              <span class="absolute right-2 flex items-center justify-center w-5 h-5 shrink-0">
                 <SelectItemIndicator>
-                  <Check class="w-3.5 h-3.5" />
+                  <Check class="w-4 h-4 stroke-[2.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-base text-gray-400 text-center dark:text-slate-500">
@@ -149,6 +153,7 @@ import {
 } from "reka-ui";
 import { X, ChevronDown, Check, Search, SearchX } from "@lucide/vue";
 import kChip from "./kChip.vue";
+import kIcon from "./kIcon.vue";
 
 const props = defineProps({
   options: { type: Array, required: true },
@@ -156,6 +161,7 @@ const props = defineProps({
   multiple: { type: Boolean, default: false },
   optionValue: { type: String, default: "value" },
   optionLabel: { type: String, default: "label" },
+  optionIcon: { type: String, default: "icon" },
   label: String,
   info: String,
   error: [String, Boolean],
@@ -224,6 +230,7 @@ const isSelectionSet = computed(() => {
   return props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "";
 });
 const resolvedDropdownHeight = computed(() => normalizeDropdownHeight(props.dropdownHeight));
+const hasOptionIcons = computed(() => props.options.some((option) => Boolean(option?.[props.optionIcon])));
 const selectedOptions = computed(() => {
   if (!props.multiple || !Array.isArray(props.modelValue)) return [];
   return props.modelValue
@@ -294,10 +301,17 @@ const filteredOptions = computed(() => {
 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" });
+
+      if (props.searchable) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            if (open.value) searchInput.value?.focus({ preventScroll: true });
+          });
+        });
+      }
     });
     return;
   }