ketekny-ui-kit 1.0.92 → 1.0.94

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -33,6 +33,10 @@ export default {
       type: String,
       default: "",
     },
+    appIcon: {
+      type: String,
+      default: "",
+    },
     width: {
       type: String,
       default: "360px",
@@ -65,7 +69,7 @@ export default {
   emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
   data() {
     return {
-      activeId: 'dashboard',
+      activeId: '',
       query: '',
       collapsed: false,
       openIds: new Set(['projects']),
@@ -114,8 +118,53 @@ export default {
       collect(this.filteredMenu)
       return all
     },
+    expandedFooterLinks() {
+      return this.footerLinks.filter(link => link.id !== 'my-profile')
+    },
+  },
+  watch: {
+    mainMenu: {
+      handler() {
+        this.syncActiveFromMenu()
+      },
+      deep: true,
+      immediate: true,
+    },
+    $route() {
+      this.syncActiveFromMenu()
+    },
   },
   methods: {
+    syncActiveFromMenu() {
+      const routePath = this.$route?.path
+      const findMatch = (items, parentIds = []) => {
+        for (const item of items) {
+          const itemPath = item?.link?.to ?? item?.to ?? null
+          if (routePath && itemPath === routePath) {
+            return {
+              id: item.id,
+              parentIds,
+            }
+          }
+          if (item?.children?.length) {
+            const childMatch = findMatch(item.children, [...parentIds, item.id])
+            if (childMatch) return childMatch
+          }
+        }
+        return null
+      }
+
+      const matched = findMatch(this.mainMenu)
+      if (matched?.id) {
+        this.activeId = matched.id
+        this.openIds = new Set([...this.openIds, ...matched.parentIds])
+        return
+      }
+
+      if (!this.activeId && this.mainMenu[0]?.id) {
+        this.activeId = this.mainMenu[0].id
+      }
+    },
     toggleCollapsed() {
       this.collapsed = !this.collapsed
     },
@@ -225,12 +274,20 @@ export default {
       </p>
     </div>
 
-    <div v-else-if="title && collapsed" class="px-3 pb-2">
+    <div v-else-if="(title || appIcon) && collapsed" class="flex justify-center px-3 pb-2">
       <div
         v-tooltip.right="title"
         class="flex h-10 w-10 items-center justify-center rounded-md border border-sidebar-border/30 bg-sidebar-accent/30 text-[10px] font-bold tracking-[0.18em] text-sidebar-muted"
       >
-        {{ collapsedTitle }}
+        <img
+          v-if="appIcon"
+          :src="appIcon"
+          alt="App icon"
+          class="h-6 w-6 object-contain"
+        />
+        <template v-else>
+          {{ collapsedTitle }}
+        </template>
       </div>
     </div>
 
@@ -298,29 +355,27 @@ export default {
     </nav>
 
     <div class="p-3 mt-auto border-t border-sidebar-border">
-      <div
-        class="flex items-center py-2 rounded-md hover:bg-sidebar-accent"
-        :class="collapsed ? 'justify-center px-0' : 'gap-2.5 px-2'"
-      >
-        <CircleUser class="size-8 shrink-0 text-sidebar-muted" :stroke-width="1.75" />
-        <div v-if="!collapsed" class="flex-1 min-w-0">
-          <p class="text-sm font-medium truncate text-sidebar-foreground">{{ accountDisplayName }}</p>
-          <p class="text-xs truncate text-sidebar-muted">{{ accountEmail }}</p>
+      <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 text-sm 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>
-        <button
-          v-if="!collapsed"
-          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="pt-2 mt-2 border-t border-sidebar-border/70"
-        :class="collapsed ? 'flex flex-col items-center gap-1' : 'space-y-1'"
-      >
         <button
           v-for="link in footerLinks"
           :key="link.id"
@@ -353,7 +408,7 @@ export default {
           />
         </button>
         <button
-          v-for="link in footerLinks"
+          v-for="link in expandedFooterLinks"
           :key="`${link.id}-expanded`"
           v-else
           type="button"

package/src/twoColLayout/components/TwoColLayout.vue

@@ -4,6 +4,7 @@
 
     <MultilevelSidebar
       :title="title"
+      :app-icon="appIcon"
       :width="width"
       :collapsed-width="collapsedWidth"
       :main-menu="mainMenu"
@@ -50,6 +51,10 @@ export default {
       type: String,
       default: "",
     },
+    appIcon: {
+      type: String,
+      default: "",
+    },
     width: {
       type: String,
       default: "360px",

package/src/ui/componentDescription.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
+  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border text-[14px]">
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
-      <h2 class="text-lg font-semibold cp-text">{{ componentName }} Description</h2>
+      <h2 class="text-[15px] font-semibold cp-text">{{ componentName }} Description</h2>
 
       <div class="flex items-center gap-1">
         <button
           v-for="tab in tabs"
           :key="tab.id"
           @click="activeTab = tab.id"
-          :class="['px-3 py-1.5 text-sm font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
+          :class="['px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
           {{ tab.label }}
         </button>
       </div>
@@ -17,7 +17,7 @@
     <div class="p-4">
       <div v-show="activeTab === 'props'">
         <div v-if="props.length > 0" class="overflow-x-auto">
-          <table class="w-full text-sm">
+          <table class="w-full text-[13px]">
             <thead>
               <tr class="border-b cp-border">
                 <th class="px-4 py-3 font-semibold text-left cp-text">Name</th>
@@ -30,11 +30,11 @@
             <tbody>
               <tr v-for="(prop, index) in props" :key="prop.name" :class="index % 2 === 0 ? 'cp-muted-30' : ''">
                 <td class="px-4 py-3">
-                  <code class="text-sm font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ prop.name }}</code>
+                  <code class="text-[13px] font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ prop.name }}</code>
                 </td>
-                <td class="px-4 py-3"><span class="font-mono text-sm text-blue-600">{{ prop.type }}</span></td>
+                <td class="px-4 py-3"><span class="font-mono text-[13px] text-blue-600">{{ prop.type }}</span></td>
                 <td class="px-4 py-3">
-                  <code v-if="prop.default !== undefined" class="font-mono text-sm text-slate-700">{{ prop.default }}</code>
+                  <code v-if="prop.default !== undefined" class="font-mono text-[13px] text-slate-700">{{ prop.default }}</code>
                   <span v-else class="cp-text-muted">-</span>
                 </td>
                 <td class="px-4 py-3 cp-text-muted">{{ prop.description }}</td>
@@ -50,7 +50,7 @@
 
       <div v-show="activeTab === 'slots'">
         <div v-if="slots.length > 0" class="overflow-x-auto">
-          <table class="w-full text-sm">
+          <table class="w-full text-[13px]">
             <thead>
               <tr class="border-b cp-border">
                 <th class="px-4 py-3 font-semibold text-left cp-text">Name</th>
@@ -62,10 +62,10 @@
             <tbody>
               <tr v-for="(slot, index) in slots" :key="slot.name" :class="index % 2 === 0 ? 'cp-muted-30' : ''">
                 <td class="px-4 py-3">
-                  <code class="text-sm font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ slot.name }}</code>
+                  <code class="text-[13px] font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ slot.name }}</code>
                 </td>
                 <td class="px-4 py-3">
-                  <span :class="['inline-flex items-center px-2 py-0.5 rounded-full text-sm font-medium', slot.scoped ? 'bg-emerald-100 text-emerald-700' : 'cp-badge-muted']">
+                  <span :class="['inline-flex items-center px-2 py-0.5 rounded-full text-[13px] font-medium', slot.scoped ? 'bg-emerald-100 text-emerald-700' : 'cp-badge-muted']">
                     {{ slot.scoped ? "Yes" : "No" }}
                   </span>
                 </td>

package/src/ui/componentShowcase.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
+  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border text-[14px]">
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
-      <h2 class="text-lg font-semibold cp-text">{{ componentName }} Preview</h2>
+      <h2 class="text-[15px] font-semibold cp-text">{{ componentName }} Preview</h2>
 
       <div class="flex items-center gap-1">
         <button
           v-for="tab in tabs"
           :key="tab.id"
           @click="activeTab = tab.id"
-          :class="['px-3 py-1.5 text-sm font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
+          :class="['px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
           {{ tab.label }}
         </button>
       </div>
@@ -22,7 +22,7 @@
               v-for="vp in previewViewports"
               :key="vp.id"
               @click="activeViewport = vp.id"
-              :class="['px-3 py-1.5 text-sm font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
+              :class="['px-3 py-1.5 text-[13px] font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
               {{ vp.label }}
             </button>
           </div>
@@ -37,7 +37,7 @@
 
       <div v-show="activeTab === 'code'" class="relative">
         <div class="absolute z-10 top-3 right-3">
-          <button @click="copyCode" class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors cp-chip cp-chip-hover cp-chip-text">
+          <button @click="copyCode" class="flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium rounded-md transition-colors cp-chip cp-chip-hover cp-chip-text">
             <svg
               v-if="!copied"
               xmlns="http://www.w3.org/2000/svg"
@@ -72,8 +72,8 @@
           </button>
         </div>
 
-        <pre class="p-4 overflow-x-auto rounded-lg cp-pre">
-<code class="font-mono text-sm" v-html="highlightedCode"></code>
+        <pre class="p-4 overflow-x-auto rounded-lg text-[11px] leading-5 cp-pre">
+<code class="font-mono text-[11px]" v-html="highlightedCode"></code>
         </pre>
       </div>
     </div>

package/src/ui/kCode.vue

@@ -1,8 +1,8 @@
 <!-- kCode.vue -->
 <template>
-  <div class="p-4 mt-3 overflow-hidden text-white whitespace-pre bg-gray-900 border rounded-lg border-primary/30">
+  <div class="p-4 mt-3 overflow-hidden text-[11px] leading-5 text-white whitespace-pre bg-gray-900 border rounded-lg border-primary/30">
     <div class="overflow-auto">
-      <code>{{ normalizedContent }}</code>
+      <code class="font-mono text-[11px]">{{ normalizedContent }}</code>
     </div>
   </div>
 </template>

package/src/ui/themes/kButton.theme.js

@@ -5,7 +5,7 @@ export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center f
 
 export const K_BUTTON_SIZE_STYLES = {
   normal: {
-    regular: "h-10 px-4 text-base",
+    regular: "h-9 px-4 text-sm",
     iconOnly: "h-10 w-10 p-0",
     icon: "w-5 h-5",
     loader: "w-5 h-5",
@@ -27,7 +27,7 @@ export const K_BUTTON_SIZE_STYLES = {
   },
   // Backward compatibility aliases
   default: {
-    regular: "h-10 px-4 text-base",
+    regular: "h-9 px-4 text-sm",
     iconOnly: "h-10 w-10 p-0",
     icon: "w-5 h-5",
     loader: "w-5 h-5",