ketekny-ui-kit 1.0.142 → 1.0.143

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.142",
+  "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"