ketekny-ui-kit 1.0.141 → 1.0.143

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -158,6 +158,7 @@ export default {
       const favorites = []
       const collect = (items) => {
         for (const item of items) {
+          if (item?.isDivider) continue
           if (item?.children?.length) {
             collect(item.children)
             continue
@@ -329,7 +330,7 @@ export default {
             (routeFullPath && itemPath === routeFullPath) ||
             (routePath && normalizedItemPath === routePath)
 
-          if (matchesPath) {
+          if (matchesPath && item.selectable !== false) {
             return {
               id: item.id,
               parentIds,
@@ -350,8 +351,9 @@ export default {
         return
       }
 
-      if (!this.activeId && this.mainMenu[0]?.id) {
-        this.activeId = this.mainMenu[0].id
+      if (!this.activeId) {
+        const firstSelectableItem = this.mainMenu.find((item) => !item.isDivider && item.selectable !== false)
+        if (firstSelectableItem?.id) this.activeId = firstSelectableItem.id
       }
     },
     toggleCollapsed() {
@@ -375,6 +377,7 @@ export default {
       this.openIds = new Set([...this.openIds, id])
     },
     select(itemOrId) {
+      if (typeof itemOrId !== 'string' && (itemOrId?.isDivider || itemOrId?.selectable === false)) return
       const id = typeof itemOrId === 'string' ? itemOrId : itemOrId?.id
       if (!id) return
       this.activeId = id
@@ -399,7 +402,8 @@ export default {
     filterTree(nodes, q) {
       const result = []
       for (const node of nodes) {
-        const matches = node.label.toLowerCase().includes(q)
+        if (node.isDivider) continue
+        const matches = String(node.label ?? '').toLowerCase().includes(q)
         const matchedChildren = node.children ? this.filterTree(node.children, q) : []
         if (matches) result.push(node)
         else if (matchedChildren.length) result.push({ ...node, children: matchedChildren })

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -30,6 +30,9 @@ export default {
     hasChildren() {
       return Array.isArray(this.item.children) && this.item.children.length > 0
     },
+    isDivider() {
+      return this.item.isDivider === true
+    },
     isOpen() {
       return this.openIds.has(this.item.id)
     },
@@ -41,7 +44,7 @@ export default {
       return this.hasChildren && this.containsActive(this.item)
     },
     isActiveLeaf() {
-      return !this.hasChildren && this.item.id === this.activeId
+      return !this.hasChildren && this.item.selectable !== false && this.item.id === this.activeId
     },
     isActive() {
       return this.isActiveLeaf || this.isActiveTrail
@@ -82,7 +85,7 @@ export default {
   },
   methods: {
     containsActive(node) {
-      if (node.id === this.activeId) return true
+      if (node.selectable !== false && node.id === this.activeId) return true
       if (!node.children) return false
       return node.children.some((child) => this.containsActive(child))
     },
@@ -125,7 +128,18 @@ export default {
 </script>
 
 <template>
-  <li :class="isCollapsedTop ? 'group/fly relative' : ''">
+  <li v-if="isDivider" role="separator" :aria-label="item.label || undefined" class="py-2">
+    <div v-if="isCollapsedTop" class="mx-2 border-t border-[var(--sidebar-border)]" />
+    <div v-else class="flex items-center gap-2 px-3">
+      <span class="h-px flex-1 bg-[var(--sidebar-border)]" />
+      <span v-if="item.label" class="shrink-0 text-xs font-medium uppercase tracking-wider text-[var(--sidebar-text-muted)]">
+        {{ item.label }}
+      </span>
+      <span v-if="item.label" class="h-px flex-1 bg-[var(--sidebar-border)]" />
+    </div>
+  </li>
+
+  <li v-else :class="isCollapsedTop ? 'group/fly relative' : ''">
     <button
       type="button"
       :style="isCollapsedTop ? undefined : indentStyle"

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;
   }