ketekny-ui-kit 1.0.142 → 1.0.144

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -102,8 +102,12 @@ export default {
       default: null,
       validator: value => value === null || ['dark', 'light'].includes(value),
     },
+    favorites: {
+      type: Array,
+      default: null,
+    },
   },
-  emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
+  emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click', 'update:favorites'],
   data() {
     return {
       demoAvatarUrl,
@@ -142,6 +146,9 @@ export default {
     hasAccount() {
       return Boolean(this.account)
     },
+    isControlledFavorites() {
+      return Array.isArray(this.favorites)
+    },
     accountDisplayName() {
       if (!this.account) return ''
       return [this.account.firstName, this.account.lastName].filter(Boolean).join(' ') || 'Account'
@@ -158,6 +165,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
@@ -242,12 +250,18 @@ export default {
       deep: true,
       immediate: true,
     },
+    favorites: {
+      handler() {
+        this.syncFavoritesFromMenu()
+      },
+      deep: true,
+    },
     $route() {
       this.syncActiveFromMenu()
     },
     favoriteIds: {
       handler(value) {
-        this.persistFavorites(value)
+        if (!this.isControlledFavorites) this.persistFavorites(value)
         if (!value.size && this.activeMenuTab === 'favorites') this.activeMenuTab = 'all'
       },
       deep: false,
@@ -300,19 +314,33 @@ export default {
       }
       return ids
     },
+    normalizeFavorite(value) {
+      return String(value ?? '').replace(/^\/+/, '').trim()
+    },
+    favoriteValue(item) {
+      const value = item?.link?.to ?? item?.to ?? item?.link?.href ?? item?.href
+      return this.normalizeFavorite(typeof value === 'string' ? value : item?.id)
+    },
     syncFavoritesFromMenu() {
-      const storedFavorites = this.readStoredFavorites()
+      const storedFavorites = this.isControlledFavorites ? this.favorites : this.readStoredFavorites()
       const storedTab = this.readStoredActiveMenuTab()
+      const controlledFavorites = new Set(storedFavorites.map(value => this.normalizeFavorite(value)))
       const discovered = []
       const collect = (items) => {
         for (const item of items) {
-          if (item?.favorite && !item?.children?.length) discovered.push(item.id)
+          if (
+            !item?.children?.length
+            && (this.isControlledFavorites
+              ? controlledFavorites.has(this.favoriteValue(item))
+                || controlledFavorites.has(this.normalizeFavorite(item?.id))
+              : item?.favorite)
+          ) discovered.push(item.id)
           if (item?.children?.length) collect(item.children)
         }
       }
       collect(this.mainMenu)
-      this.favoriteIds = new Set([...discovered, ...storedFavorites])
-      if (storedTab === 'favorites' && (this.favoriteIds.size > 0 || discovered.length > 0)) {
+      this.favoriteIds = new Set(this.isControlledFavorites ? discovered : [...discovered, ...storedFavorites])
+      if (storedTab === 'favorites' && this.favoriteIds.size > 0) {
         this.activeMenuTab = 'favorites'
       } else {
         this.activeMenuTab = 'all'
@@ -329,7 +357,7 @@ export default {
             (routeFullPath && itemPath === routeFullPath) ||
             (routePath && normalizedItemPath === routePath)
 
-          if (matchesPath) {
+          if (matchesPath && item.selectable !== false) {
             return {
               id: item.id,
               parentIds,
@@ -350,8 +378,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 +404,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 +429,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 })
@@ -440,6 +471,16 @@ export default {
       if (next.has(item.id)) next.delete(item.id)
       else next.add(item.id)
       this.favoriteIds = next
+      if (this.isControlledFavorites) {
+        const favorites = new Set(this.favorites.map(value => this.normalizeFavorite(value)))
+        const value = this.favoriteValue(item)
+        if (next.has(item.id)) favorites.add(value)
+        else {
+          favorites.delete(value)
+          favorites.delete(this.normalizeFavorite(item.id))
+        }
+        this.$emit('update:favorites', Array.from(favorites))
+      }
       if (next.size && this.activeMenuTab !== 'favorites' && this.activeMenuTab !== 'all') {
         this.activeMenuTab = 'all'
       }

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/twoColLayout/components/TwoColLayout.vue

@@ -16,6 +16,8 @@
       :account-menu-items="accountMenuItems"
       :contact-email="contactEmail"
       :help-url="helpUrl"
+      :favorites="favorites"
+      @update:favorites="$emit('update:favorites', $event)"
       @logo-click="handleLogoClick"
       @signin="handleSignin"
       @signup="handleSignup"
@@ -118,8 +120,12 @@ export default {
       default: null,
       validator: value => value === null || ["dark", "light"].includes(value),
     },
+    favorites: {
+      type: Array,
+      default: null,
+    },
   },
-  emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],
+  emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click", "update:favorites"],
   data() {
     return {
       mobileMenuOpen: false,