ketekny-ui-kit 1.0.143 → 1.0.144

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.143",
+  "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'
@@ -243,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,
@@ -301,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'
@@ -444,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/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,