ketekny-ui-kit 1.0.110 → 1.0.112

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -234,6 +234,24 @@ export default {
     },
   },
   methods: {
+    findMenuItemById(items, id) {
+      for (const item of items) {
+        if (item.id === id) return item
+        if (item?.children?.length) {
+          const found = this.findMenuItemById(item.children, id)
+          if (found) return found
+        }
+      }
+      return null
+    },
+    collectDescendantIds(item, ids = []) {
+      if (!item?.children?.length) return ids
+      for (const child of item.children) {
+        ids.push(child.id)
+        this.collectDescendantIds(child, ids)
+      }
+      return ids
+    },
     syncFavoritesFromMenu() {
       const storedFavorites = this.readStoredFavorites()
       const storedTab = this.readStoredActiveMenuTab()
@@ -293,10 +311,16 @@ export default {
     },
     toggle(id) {
       if (this.openIds.has(id)) {
-        this.openIds = new Set()
+        const target = this.findMenuItemById(this.mainMenu, id)
+        const next = new Set(this.openIds)
+        next.delete(id)
+        for (const childId of this.collectDescendantIds(target)) {
+          next.delete(childId)
+        }
+        this.openIds = next
         return
       }
-      this.openIds = new Set([id])
+      this.openIds = new Set([...this.openIds, id])
     },
     select(itemOrId) {
       const id = typeof itemOrId === 'string' ? itemOrId : itemOrId?.id

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -19,6 +19,12 @@ export default {
     theme: { type: String, default: 'dark' },
   },
   emits: ['select', 'toggle', 'toggle-favorite'],
+  data() {
+    return {
+      showLabelTooltip: false,
+      resizeObserver: null,
+    }
+  },
   computed: {
     hasChildren() {
       return Array.isArray(this.item.children) && this.item.children.length > 0
@@ -54,12 +60,39 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateLabelTooltip()
+      if (typeof ResizeObserver !== 'undefined' && this.$refs.labelText) {
+        this.resizeObserver = new ResizeObserver(() => {
+          this.updateLabelTooltip()
+        })
+        this.resizeObserver.observe(this.$refs.labelText)
+      }
+    })
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.updateLabelTooltip()
+    })
+  },
+  beforeUnmount() {
+    this.resizeObserver?.disconnect?.()
+  },
   methods: {
     containsActive(node) {
       if (node.id === this.activeId) return true
       if (!node.children) return false
       return node.children.some((child) => this.containsActive(child))
     },
+    updateLabelTooltip() {
+      const labelEl = this.$refs.labelText
+      if (!labelEl || this.isCollapsedTop) {
+        this.showLabelTooltip = false
+        return
+      }
+      this.showLabelTooltip = labelEl.scrollWidth > labelEl.clientWidth
+    },
     handleClick() {
       if (this.hasChildren && !this.isCollapsedTop) {
         this.$emit('toggle', this.item.id)
@@ -127,7 +160,11 @@ export default {
       />
 
       <template v-if="!isCollapsedTop">
-        <span class="flex-1 truncate">{{ item.label }}</span>
+        <span
+          ref="labelText"
+          class="flex-1 truncate"
+          v-tooltip.right="showLabelTooltip ? item.label : null"
+        >{{ item.label }}</span>
 
         <span
           v-if="item.badge != null"