ketekny-ui-kit 1.0.101 → 1.0.102

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -1,7 +1,6 @@
 <script>
 import {
   Search,
-  Bell,
   Building2,
   CircleUser,
   CircleHelp,
@@ -10,14 +9,19 @@ import {
   PanelLeftClose,
   PanelLeftOpen,
   UserRound,
+  Ellipsis,
 } from '@lucide/vue'
 import SidebarMenuItem from './SidebarMenuItem.vue'
+import kMenu from '../../ui/kMenu.vue'
+import demoAvatarUrl from '../../../dark-sidebar-menu-design/public/placeholder-user.jpg'
+
+const FAVORITES_STORAGE_KEY = 'ketekny-ui-sidebar-favorites'
+const MENU_TAB_STORAGE_KEY = 'ketekny-ui-sidebar-menu-tab'
 
 export default {
   name: 'MultilevelSidebar',
   components: {
     Search,
-    Bell,
     Building2,
     CircleUser,
     CircleHelp,
@@ -26,7 +30,9 @@ export default {
     PanelLeftClose,
     PanelLeftOpen,
     UserRound,
+    Ellipsis,
     SidebarMenuItem,
+    kMenu,
   },
   props: {
     title: {
@@ -69,10 +75,13 @@ export default {
   emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
   data() {
     return {
+      demoAvatarUrl,
       activeId: '',
+      activeMenuTab: 'all',
       query: '',
       collapsed: false,
       openIds: new Set(['projects']),
+      favoriteIds: new Set(),
       footerLinks: [
         { id: 'my-profile', label: 'Το προφίλ μου', icon: 'UserRound' },
         { id: 'help', label: 'Βοήθεια', icon: 'CircleHelp' },
@@ -103,6 +112,44 @@ export default {
       if (!q) return this.mainMenu
       return this.filterTree(this.mainMenu, q)
     },
+    favoriteItems() {
+      const favorites = []
+      const collect = (items) => {
+        for (const item of items) {
+          if (item?.children?.length) {
+            collect(item.children)
+            continue
+          }
+          if (this.favoriteIds.has(item.id)) favorites.push(item)
+        }
+      }
+      collect(this.mainMenu)
+      return favorites
+    },
+    hasFavorites() {
+      return this.favoriteItems.length > 0
+    },
+    showMenuTabs() {
+      return !this.collapsed && this.hasFavorites
+    },
+    displayedMenuItems() {
+      if (this.activeMenuTab === 'favorites') return this.favoriteItems
+      return this.filteredMenu
+    },
+    collapsedMenuItems() {
+      if (!this.collapsed) return this.displayedMenuItems
+      if (!this.hasFavorites) return this.mainMenu
+      return [
+        {
+          id: 'favorites-shortcut',
+          label: 'Αγαπημένα',
+          icon: 'Star',
+          syntheticFavoritesShortcut: true,
+          children: this.favoriteItems,
+        },
+        ...this.mainMenu,
+      ]
+    },
     effectiveOpenIds() {
       const q = this.query.trim().toLowerCase()
       if (!q) return this.openIds
@@ -121,10 +168,31 @@ export default {
     expandedFooterLinks() {
       return this.footerLinks.filter(link => link.id !== 'my-profile')
     },
+    accountMenuLinks() {
+      return [
+        {
+          label: 'Το προφίλ μου',
+          icon: 'UserRound',
+          action: () => this.handleFooterSelect('my-profile'),
+        },
+        {
+          label: 'Βοήθεια',
+          icon: 'CircleHelp',
+          action: () => this.handleFooterSelect('help'),
+        },
+        {
+          label: 'Αποσύνδεση',
+          icon: 'LogOut',
+          tone: 'danger',
+          action: () => this.handleFooterSelect('sign-out'),
+        },
+      ]
+    },
   },
   watch: {
     mainMenu: {
       handler() {
+        this.syncFavoritesFromMenu()
         this.syncActiveFromMenu()
       },
       deep: true,
@@ -133,8 +201,36 @@ export default {
     $route() {
       this.syncActiveFromMenu()
     },
+    favoriteIds: {
+      handler(value) {
+        this.persistFavorites(value)
+        if (!value.size && this.activeMenuTab === 'favorites') this.activeMenuTab = 'all'
+      },
+      deep: false,
+    },
+    activeMenuTab(value) {
+      this.persistActiveMenuTab(value)
+    },
   },
   methods: {
+    syncFavoritesFromMenu() {
+      const storedFavorites = this.readStoredFavorites()
+      const storedTab = this.readStoredActiveMenuTab()
+      const discovered = []
+      const collect = (items) => {
+        for (const item of items) {
+          if (item?.favorite && !item?.children?.length) 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.activeMenuTab = 'favorites'
+      } else {
+        this.activeMenuTab = 'all'
+      }
+    },
     syncActiveFromMenu() {
       const routePath = this.$route?.path
       const routeFullPath = this.$route?.fullPath
@@ -175,8 +271,11 @@ export default {
       this.collapsed = !this.collapsed
     },
     toggle(id) {
-      if (this.openIds.has(id)) this.openIds.delete(id)
-      else this.openIds.add(id)
+      if (this.openIds.has(id)) {
+        this.openIds = new Set()
+        return
+      }
+      this.openIds = new Set([id])
     },
     select(itemOrId) {
       const id = typeof itemOrId === 'string' ? itemOrId : itemOrId?.id
@@ -239,6 +338,57 @@ export default {
     clearQuery() {
       this.query = ''
     },
+    toggleFavorite(item) {
+      const next = new Set(this.favoriteIds)
+      if (next.has(item.id)) next.delete(item.id)
+      else next.add(item.id)
+      this.favoriteIds = next
+      if (next.size && this.activeMenuTab !== 'favorites' && this.activeMenuTab !== 'all') {
+        this.activeMenuTab = 'all'
+      }
+    },
+    readStoredFavorites() {
+      if (typeof window === 'undefined') return []
+      try {
+        const raw = window.localStorage.getItem(FAVORITES_STORAGE_KEY)
+        if (!raw) return []
+        const parsed = JSON.parse(raw)
+        return Array.isArray(parsed) ? parsed.filter(value => typeof value === 'string') : []
+      } catch {
+        return []
+      }
+    },
+    persistFavorites(favorites) {
+      if (typeof window === 'undefined') return
+      try {
+        window.localStorage.setItem(
+          FAVORITES_STORAGE_KEY,
+          JSON.stringify(Array.from(favorites))
+        )
+      } catch {
+        // Ignore storage failures silently.
+      }
+    },
+    readStoredActiveMenuTab() {
+      if (typeof window === 'undefined') return 'all'
+      try {
+        const raw = window.localStorage.getItem(MENU_TAB_STORAGE_KEY)
+        return raw === 'favorites' ? 'favorites' : 'all'
+      } catch {
+        return 'all'
+      }
+    },
+    persistActiveMenuTab(value) {
+      if (typeof window === 'undefined') return
+      try {
+        window.localStorage.setItem(
+          MENU_TAB_STORAGE_KEY,
+          value === 'favorites' ? 'favorites' : 'all'
+        )
+      } catch {
+        // Ignore storage failures silently.
+      }
+    },
   },
 }
 </script>
@@ -302,79 +452,90 @@ export default {
       </div>
     </div>
 
-    <div v-if="!collapsed" class="px-3 pb-2">
-      <div class="relative">
-        <Search
-          class="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted"
-          :stroke-width="2"
-        />
-        <input
-          v-model="query"
-          type="text"
-          placeholder="Αναζήτηση μενού..."
-          aria-label="Αναζήτηση μενού"
-          class="w-full border rounded-md border-sidebar-border/35 bg-sidebar-accent/40 py-2 pl-8 pr-9 text-sidebar-foreground placeholder:text-sidebar-muted focus:border-white/15 focus:outline-none focus:ring-1 focus:ring-white/10"
-        />
-        <button
-          v-if="query"
-          type="button"
-          class="absolute right-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
-          aria-label="Καθαρισμός αναζήτησης"
-          @click="clearQuery"
-        >
-          <X class="size-3.5" :stroke-width="2" />
-        </button>
-      </div>
-    </div>
-
     <nav
       class="flex-1 px-3 py-2"
       :class="collapsed ? 'overflow-visible' : 'overflow-y-auto'"
       aria-label="Main navigation"
     >
+      <div v-if="showMenuTabs" class="mb-3 px-1">
+        <div class="inline-flex w-full rounded-lg bg-sidebar-accent/35 p-1">
+          <button
+            type="button"
+            class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
+            :class="activeMenuTab === 'all'
+              ? 'bg-sidebar text-sidebar-foreground shadow-sm'
+              : 'text-sidebar-muted hover:text-sidebar-foreground'"
+            @click="activeMenuTab = 'all'"
+          >
+            Όλα
+          </button>
+          <button
+            type="button"
+            class="flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
+            :class="activeMenuTab === 'favorites'
+              ? 'bg-sidebar text-sidebar-foreground shadow-sm'
+              : 'text-sidebar-muted hover:text-sidebar-foreground'"
+            @click="activeMenuTab = 'favorites'"
+          >
+            Αγαπημένα
+          </button>
+        </div>
+      </div>
+
+      <div v-if="!collapsed && (!showMenuTabs || activeMenuTab === 'all')" class="px-1 pb-3">
+        <div class="relative">
+          <Search
+            class="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-sidebar-muted"
+            :stroke-width="2"
+          />
+          <input
+            v-model="query"
+            type="text"
+            placeholder="Αναζήτηση μενού..."
+            aria-label="Αναζήτηση μενού"
+            class="w-full border rounded-md border-sidebar-border/35 bg-sidebar-accent/40 py-2 pl-8 pr-9 text-sidebar-foreground placeholder:text-sidebar-muted focus:border-white/15 focus:outline-none focus:ring-1 focus:ring-white/10"
+          />
+          <button
+            v-if="query"
+            type="button"
+            class="absolute right-2 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-md text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+            aria-label="Καθαρισμός αναζήτησης"
+            @click="clearQuery"
+          >
+            <X class="size-3.5" :stroke-width="2" />
+          </button>
+        </div>
+      </div>
+
       <ul class="flex flex-col gap-0.5">
         <SidebarMenuItem
-          v-for="item in filteredMenu"
+          v-for="item in collapsed ? collapsedMenuItems : displayedMenuItems"
           :key="item.id"
           :item="item"
           :level="0"
           :active-id="activeId"
           :open-ids="effectiveOpenIds"
           :collapsed="collapsed"
+          :favorites="favoriteIds"
           @select="handleMenuSelect"
           @toggle="toggle"
+          @toggle-favorite="toggleFavorite"
         />
       </ul>
       <p
-        v-if="!collapsed && filteredMenu.length === 0"
+        v-if="!collapsed && displayedMenuItems.length === 0"
         class="px-3 py-6 text-center text-sidebar-muted"
       >
         Δεν βρέθηκαν αποτελέσματα.
       </p>
     </nav>
 
-    <div class="p-3 mt-auto border-t border-sidebar-border">
-      <div :class="collapsed ? 'flex flex-col items-center gap-1' : 'space-y-1'">
-        <div v-if="!collapsed" class="flex items-center gap-2">
-          <button
-            type="button"
-            class="sidebar-footer-item flex min-h-[38px] flex-1 items-center gap-2.5 rounded-md bg-transparent px-2 py-2 text-left font-medium text-sidebar-foreground/80 outline-none transition-colors duration-150 hover:bg-sidebar-accent hover:text-sidebar-foreground"
-            @click="handleFooterSelect('my-profile')"
-          >
-            <CircleUser class="sidebar-footer-item-icon size-4 shrink-0" :stroke-width="1.9" />
-            <span class="min-w-0 flex-1">
-              <span class="block truncate">Το προφίλ μου</span>
-              <span class="block truncate text-xs font-normal text-sidebar-muted">{{ accountEmail }}</span>
-            </span>
-          </button>
-          <button
-            type="button"
-            class="rounded-md p-1.5 text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
-            aria-label="Notifications"
-          >
-            <Bell class="size-4" :stroke-width="2" />
-          </button>
-        </div>
+    <div class="mt-auto border-t border-sidebar-border px-3 pb-3 pt-4">
+      <div
+        :class="collapsed
+          ? 'flex flex-col items-center gap-1'
+          : ''"
+      >
         <template v-if="collapsed">
           <button
             v-for="link in footerLinks"
@@ -408,35 +569,34 @@ export default {
           </button>
         </template>
         <template v-else>
-          <button
-            v-for="link in expandedFooterLinks"
-            :key="`${link.id}-expanded`"
-            type="button"
-            class="flex items-center w-full rounded-md transition-colors duration-150"
-            :class="[
-              'gap-2.5 px-2 py-2 text-left',
-              activeId === link.id
-                ? 'bg-brand text-brand-foreground font-medium'
-                : link.id === 'sign-out'
-                  ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
-                  : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
-            ]"
-            @click="handleFooterSelect(link.id)"
+          <kMenu
+            class="block w-full"
+            :links="accountMenuLinks"
+            aria-label="Account options"
           >
-            <component
-              :is="link.icon"
-              class="size-4 shrink-0"
-              :class="
-                activeId === link.id
-                  ? 'text-brand-foreground'
-                  : link.id === 'sign-out'
-                    ? 'text-orange-400'
-                    : 'text-sidebar-muted'
-              "
-              :stroke-width="2"
-            />
-            <span class="truncate">{{ link.label }}</span>
-          </button>
+            <template #trigger>
+              <div class="flex w-full items-center gap-2 rounded-lg px-1 py-1 text-sidebar-foreground/90 transition-colors duration-150">
+                <div class="sidebar-footer-item flex min-h-[44px] flex-1 items-center gap-2.5 rounded-lg bg-transparent px-1.5 py-1.5 text-left font-medium">
+                  <img
+                    :src="demoAvatarUrl"
+                    alt="Account avatar"
+                    class="size-8 shrink-0 rounded-md object-cover"
+                  />
+                  <span class="min-w-0 flex-1">
+                    <span class="block truncate text-sm font-semibold">{{ accountDisplayName || 'Το προφίλ μου' }}</span>
+                    <span class="block truncate text-xs font-normal text-sidebar-muted">{{ accountEmail }}</span>
+                  </span>
+                </div>
+
+                <span
+                  class="inline-flex size-9 items-center justify-center rounded-lg text-sidebar-muted"
+                  aria-hidden="true"
+                >
+                  <Ellipsis class="size-4" :stroke-width="2" />
+                </span>
+              </div>
+            </template>
+          </kMenu>
         </template>
       </div>
 

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -1,5 +1,5 @@
 <script>
-import { ChevronRight, ExternalLink } from '@lucide/vue'
+import { ChevronRight, ExternalLink, Star } from '@lucide/vue'
 import * as icons from '@lucide/vue'
 
 export default {
@@ -7,6 +7,7 @@ export default {
   components: {
     ChevronRight,
     ExternalLink,
+    Star,
   },
   props: {
     item: { type: Object, required: true },
@@ -14,8 +15,9 @@ export default {
     activeId: { type: String, default: '' },
     openIds: { type: Object, required: true },
     collapsed: { type: Boolean, default: false },
+    favorites: { type: Object, default: null },
   },
-  emits: ['select', 'toggle'],
+  emits: ['select', 'toggle', 'toggle-favorite'],
   computed: {
     hasChildren() {
       return Array.isArray(this.item.children) && this.item.children.length > 0
@@ -27,6 +29,7 @@ export default {
       return this.item.icon ? icons[this.item.icon] : null
     },
     isActiveTrail() {
+      if (this.item?.syntheticFavoritesShortcut) return false
       return this.hasChildren && this.containsActive(this.item)
     },
     isActiveLeaf() {
@@ -41,6 +44,9 @@ export default {
     isExternalLink() {
       return !this.hasChildren && Boolean(this.item?.link?.href ?? this.item?.href)
     },
+    isFavorite() {
+      return !this.hasChildren && this.favorites?.has?.(this.item.id)
+    },
     indentStyle() {
       return {
         paddingLeft: this.level === 0 ? '0.75rem' : `${this.level * 0.875 + 0.75}rem`,
@@ -60,6 +66,12 @@ export default {
         this.$emit('select', this.item)
       }
     },
+    toggleFavorite(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (this.hasChildren) return
+      this.$emit('toggle-favorite', this.item)
+    },
     onEnter(el) {
       el.style.height = '0'
       el.offsetHeight
@@ -131,6 +143,21 @@ export default {
           :stroke-width="2"
         />
 
+        <button
+          v-if="!hasChildren"
+          type="button"
+          class="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-sidebar-muted opacity-0 transition-all duration-150 group-hover:opacity-100 hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:opacity-100 focus-visible:outline-none"
+          :class="isFavorite ? 'opacity-100 text-amber-400 hover:text-amber-300' : ''"
+          :aria-label="isFavorite ? 'Remove from favorites' : 'Add to favorites'"
+          @click="toggleFavorite"
+        >
+          <Star
+            class="size-3.5"
+            :class="isFavorite ? 'fill-current' : ''"
+            :stroke-width="2"
+          />
+        </button>
+
         <ChevronRight
           v-if="hasChildren"
           class="size-4 shrink-0 text-sidebar-muted transition-transform duration-200"
@@ -165,8 +192,10 @@ export default {
             :active-id="activeId"
             :open-ids="openIds"
             :collapsed="collapsed"
+            :favorites="favorites"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
+            @toggle-favorite="$emit('toggle-favorite', $event)"
           />
       </ul>
     </Transition>
@@ -209,8 +238,10 @@ export default {
             :active-id="activeId"
             :open-ids="openIds"
             :collapsed="false"
+            :favorites="favorites"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
+            @toggle-favorite="$emit('toggle-favorite', $event)"
           />
         </ul>
       </div>

package/src/ui/kMenu.vue

@@ -24,7 +24,7 @@
       <div
         v-if="isOpen"
         ref="menuPanelRef"
-        class="z-[9999] overflow-auto border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10 max-h-[70vh] dark:bg-slate-800/95 dark:border-slate-700 dark:ring-slate-700"
+        class="z-[9999] overflow-visible border rounded-lg shadow-lg bg-white/95 backdrop-blur-sm border-primary/20 ring-1 ring-primary/10 dark:bg-slate-800/95 dark:border-slate-700 dark:ring-slate-700"
         :style="panelStyle"
         role="menu">
         <span
@@ -36,30 +36,28 @@
               : 'top-[-7px] border-l border-t border-primary/20',
           ]"
           :style="{ left: `${chevronOffset}px` }"></span>
-        <slot name="items" :close-menu="closeMenu" :close="closeMenu" :select="handleLinkClick">
-          <ul class="p-2">
-            <li v-for="(link, index) in normalizedLinks" :key="link.key || `${link.label}-${index}`">
-              <component
-                :is="resolveLinkTag(link)"
-                class="flex items-center w-full gap-2 px-3 py-2 min-h-11 text-base rounded-md text-slate-700 dark:text-slate-200"
-                :class="[
-                  link.disabled
-                    ? 'cursor-not-allowed opacity-50'
-                    : 'cursor-pointer hover:bg-primary/10 hover:text-primary active:bg-primary/15',
-                ]"
-                :to="isRouterLink(link) ? link.to : undefined"
-                :href="!isRouterLink(link) && link.href ? link.href : undefined"
-                :target="!isRouterLink(link) && link.target ? link.target : undefined"
-                :rel="!isRouterLink(link) ? resolvedRel(link) : undefined"
-                :disabled="resolveLinkTag(link) === 'button' ? !!link.disabled : undefined"
-                role="menuitem"
-                @click="handleLinkClick(link, $event)">
-                <kIcon v-if="link.icon" :name="link.icon" :size="16" class="shrink-0 self-center text-primary/80" />
-                <span class="leading-none">{{ link.label }}</span>
-              </component>
-            </li>
-          </ul>
-        </slot>
+        <div class="max-h-[70vh] overflow-y-auto overflow-x-hidden rounded-lg">
+          <slot name="items" :close-menu="closeMenu" :close="closeMenu" :select="handleLinkClick">
+            <ul class="p-2">
+              <li v-for="(link, index) in normalizedLinks" :key="link.key || `${link.label}-${index}`">
+                <component
+                  :is="resolveLinkTag(link)"
+                  class="flex items-center w-full gap-2 px-3 py-2 min-h-11 text-base rounded-md"
+                  :class="itemClass(link)"
+                  :to="isRouterLink(link) ? link.to : undefined"
+                  :href="!isRouterLink(link) && link.href ? link.href : undefined"
+                  :target="!isRouterLink(link) && link.target ? link.target : undefined"
+                  :rel="!isRouterLink(link) ? resolvedRel(link) : undefined"
+                  :disabled="resolveLinkTag(link) === 'button' ? !!link.disabled : undefined"
+                  role="menuitem"
+                  @click="handleLinkClick(link, $event)">
+                  <kIcon v-if="link.icon" :name="link.icon" :size="16" class="shrink-0 self-center" :class="iconClass(link)" />
+                  <span class="leading-none">{{ link.label }}</span>
+                </component>
+              </li>
+            </ul>
+          </slot>
+        </div>
       </div>
     </Teleport>
   </div>
@@ -126,6 +124,17 @@ export default {
       if (!link?.target || link.target !== "_blank") return link?.rel || undefined;
       return link?.rel || "noopener noreferrer";
     },
+    itemClass(link) {
+      if (link?.disabled) return "cursor-not-allowed opacity-50 text-slate-700 dark:text-slate-200";
+      if (link?.tone === "danger") {
+        return "cursor-pointer text-orange-600 hover:bg-orange-500/10 hover:text-orange-700 active:bg-orange-500/15 dark:text-orange-300 dark:hover:bg-orange-500/10 dark:hover:text-orange-200";
+      }
+      return "cursor-pointer text-slate-700 hover:bg-primary/10 hover:text-primary active:bg-primary/15 dark:text-slate-200";
+    },
+    iconClass(link) {
+      if (link?.tone === "danger") return "text-orange-500 dark:text-orange-300";
+      return "text-primary/80";
+    },
     handleLinkClick(link, event) {
       if (link?.disabled) {
         event.preventDefault();