ketekny-ui-kit 1.0.97 → 1.0.98

package/package.json

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

package/src/directives/v-tooltip.js

@@ -196,6 +196,18 @@ export default {
       visible: false,
       nodes: null,
       app: null,
+      content,
+    }
+
+    function renderContent(bubble) {
+      const content = state.content
+      if (content.mode === 'text') bubble.textContent = content.text || ''
+      else if (content.mode === 'html') bubble.innerHTML = content.html || ''
+      else if (content.mode === 'component') {
+        state.app?.unmount?.()
+        state.app = createApp({ render: () => h(content.component, content.props || {}) })
+        state.app.mount(bubble)
+      }
     }
 
     function ensureNodes() {
@@ -204,12 +216,7 @@ export default {
       const { wrapper, bubble, arrow } = createNodes()
       document.body.appendChild(wrapper)
 
-      if (content.mode === 'text') bubble.textContent = content.text
-      if (content.mode === 'html') bubble.innerHTML = content.html
-      if (content.mode === 'component') {
-        state.app = createApp({ render: () => h(content.component, content.props || {}) })
-        state.app.mount(bubble)
-      }
+      renderContent(bubble)
 
       state.nodes = { wrapper, bubble, arrow }
       return state.nodes
@@ -297,17 +304,17 @@ export default {
       t.state.placement = nextPlacement
     }
 
-    const content = normalizeValue(binding)
+    t.state.content = normalizeValue(binding)
     if (!t.state.nodes) return
 
     const { bubble } = t.state.nodes
+    const content = t.state.content
     if (content.mode === 'text') bubble.textContent = content.text || ''
     else if (content.mode === 'html') bubble.innerHTML = content.html || ''
     else if (content.mode === 'component') {
       t.state.app?.unmount?.()
-      const app = createApp({ render: () => h(content.component, content.props || {}) })
-      app.mount(bubble)
-      t.state.app = app
+      t.state.app = createApp({ render: () => h(content.component, content.props || {}) })
+      t.state.app.mount(bubble)
     }
   },
 

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -239,33 +239,38 @@ export default {
 
 <template>
   <aside
-    class="fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
+    class="group/sidebar fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
     :style="sidebarWidthStyle"
     :class="[
       mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
     ]"
   >
-    <div class="flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
+    <button
+      type="button"
+      v-tooltip.right="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
+      class="absolute right-0 top-1/2 z-50 hidden h-14 w-6 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-r-md border border-sidebar-border bg-sidebar-accent text-sidebar-muted opacity-70 shadow-lg shadow-black/30 transition-[color,opacity] hover:opacity-100 hover:text-sidebar-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand lg:inline-flex"
+      :aria-label="collapsed ? 'Ανάπτυξη πλαϊνού μενού' : 'Σύμπτυξη πλαϊνού μενού'"
+      @click="toggleCollapsed"
+    >
+      <PanelLeftOpen v-if="collapsed" class="size-4" :stroke-width="2" />
+      <PanelLeftClose v-else class="size-4" :stroke-width="2" />
+    </button>
+
+    <div class="relative flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
       <img
-        :src="
-          collapsed
-            ? 'https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png'
-            : 'https://support.ketekny.gr/logo-dark.png'
-        "
+        v-if="collapsed"
+        src="https://s3.ketekny.gr/public/web-apps/logos/logo-icon-dark.png"
         alt="Ketekny logo"
-        class="object-contain"
-        :class="collapsed ? 'size-9 shrink-0 rounded-lg' : 'h-10 min-w-0 flex-1'"
+        class="size-9 shrink-0 rounded-lg object-contain"
+        @click="handleLogoClick"
+      />
+      <img
+        v-else
+        src="https://support.ketekny.gr/logo-dark.png"
+        alt="Ketekny logo"
+        class="h-10 min-w-0 flex-1 object-contain"
         @click="handleLogoClick"
       />
-      <button
-        v-if="!collapsed"
-        type="button"
-        class="ml-auto hidden rounded-md p-1.5 text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground lg:inline-flex"
-        aria-label="Collapse sidebar"
-        @click="toggleCollapsed"
-      >
-        <PanelLeftClose class="size-4" :stroke-width="2" />
-      </button>
     </div>
 
     <div v-if="title && !collapsed" class="px-4 pb-2">
@@ -291,18 +296,6 @@ export default {
       </div>
     </div>
 
-    <div v-if="collapsed" class="justify-center hidden px-3 pb-1 lg:flex">
-      <button
-        type="button"
-        v-tooltip.right="'Ανάπτυξη πλαϊνού μενού'"
-        class="flex h-10 w-10 items-center justify-center rounded-md text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
-        aria-label="Ανάπτυξη πλαϊνού μενού"
-        @click="toggleCollapsed"
-      >
-        <PanelLeftOpen class="size-4" :stroke-width="2" />
-      </button>
-    </div>
-
     <div v-if="!collapsed" class="px-3 pb-2">
       <div class="relative">
         <Search
@@ -376,67 +369,69 @@ export default {
             <Bell class="size-4" :stroke-width="2" />
           </button>
         </div>
-        <button
-          v-for="link in footerLinks"
-          :key="link.id"
-          v-if="collapsed"
-          type="button"
-          v-tooltip.right="link.label"
-          class="flex items-center w-full rounded-md transition-colors duration-150"
-          :class="[
-            'justify-center px-0 py-2',
-            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',
-          ]"
-          :aria-label="collapsed ? link.label : undefined"
-          @click="handleFooterSelect(link.id)"
-        >
-          <component
-            :is="link.icon"
-            class="size-4 shrink-0"
-            :class="
+        <template v-if="collapsed">
+          <button
+            v-for="link in footerLinks"
+            :key="link.id"
+            type="button"
+            v-tooltip.right="link.label"
+            class="flex items-center w-full rounded-md transition-colors duration-150"
+            :class="[
+              'justify-center px-0 py-2',
               activeId === link.id
-                ? 'text-brand-foreground'
+                ? 'bg-brand text-brand-foreground font-medium'
                 : link.id === 'sign-out'
-                  ? 'text-orange-400'
-                  : 'text-sidebar-muted'
-            "
-            :stroke-width="2"
-          />
-        </button>
-        <button
-          v-for="link in expandedFooterLinks"
-          :key="`${link.id}-expanded`"
-          v-else
-          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)"
-        >
-          <component
-            :is="link.icon"
-            class="size-4 shrink-0"
-            :class="
+                  ? 'text-orange-300 hover:bg-orange-500/10 hover:text-orange-200'
+                  : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-foreground',
+            ]"
+            :aria-label="link.label"
+            @click="handleFooterSelect(link.id)"
+          >
+            <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"
+            />
+          </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
-                ? 'text-brand-foreground'
+                ? 'bg-brand text-brand-foreground font-medium'
                 : link.id === 'sign-out'
-                  ? 'text-orange-400'
-                  : 'text-sidebar-muted'
-            "
-            :stroke-width="2"
-          />
-          <span class="truncate">{{ link.label }}</span>
-        </button>
+                  ? '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)"
+          >
+            <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>
       </div>
 
       <div

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -164,6 +164,7 @@ export default {
             :level="level + 1"
             :active-id="activeId"
             :open-ids="openIds"
+            :collapsed="collapsed"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
           />
@@ -207,6 +208,7 @@ export default {
             :level="0"
             :active-id="activeId"
             :open-ids="openIds"
+            :collapsed="false"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
           />