ketekny-ui-kit 1.0.91 → 1.0.93

package/README.md

@@ -46,6 +46,7 @@ import {
   kDateSelector,
   kToggle,
   kCheckbox,
+  twoColLayout,
   toastPlugin,
   confirmPlugin,
   alertPlugin,
@@ -61,6 +62,7 @@ app.component("kSelect", kSelect);
 app.component("kDateSelector", kDateSelector);
 app.component("kToggle", kToggle);
 app.component("kCheckbox", kCheckbox);
+app.component("twoColLayout", twoColLayout);
 
 app.use(toastPlugin);
 app.use(confirmPlugin);
@@ -92,6 +94,44 @@ function save() {
 </script>
 ```
 
+Two-column layout usage:
+
+```vue
+<template>
+  <twoColLayout
+    title="App title"
+    :main-menu="menu"
+    :account="account"
+    @select-menu="handleSelect"
+  >
+    <kSingleColPage app-title="Demo" page-title="Dashboard">
+      <div class="p-6">Page content</div>
+    </kSingleColPage>
+  </twoColLayout>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { kSingleColPage } from "ketekny-ui-kit";
+
+const account = ref({
+  loggedIn: true,
+  firstName: "Demo",
+  lastName: "User",
+  email: "demo@ketekny.gr",
+});
+
+const menu = [
+  { id: "dashboard", label: "Dashboard", icon: "LayoutDashboard" },
+  { id: "reports", label: "Reports", icon: "BarChart3" },
+];
+
+function handleSelect(id) {
+  console.log("Selected menu item:", id);
+}
+</script>
+```
+
 ## Tailwind Setup
 
 Use the provided preset to include semantic tokens and safelist patterns used by dynamic component classes.
@@ -165,6 +205,7 @@ Components:
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
+- `kSingleColPage`, `kTwoColPage`, `twoColLayout`, `legacyTwoColLayout`
 
 Other exports:
 
@@ -202,4 +243,3 @@ ISC
 - Live demo/docs: https://ui.ketekny.gr
 - npm: https://www.npmjs.com/package/ketekny-ui-kit
 
-

package/index.js

@@ -38,7 +38,8 @@ import kAppMain from './src/layout/kAppMain.vue'
 import kHero from './src/layout/kHero.vue'
 import kSingleColPage from './src/layout/kSingleColPage.vue'
 import kTwoColPage from './src/layout/kTwoColPage.vue'
-import twoColLayout from './src/layout/twoColLayout.vue'
+import twoColLayout from './src/twoColLayout/components/TwoColLayout.vue'
+import legacyTwoColLayout from './src/layout/twoColLayout.vue'
 
 // Toast/Confirm/Alert Plugins
 import toastPlugin from './src/plugins/toastPlugin.js'
@@ -62,7 +63,7 @@ export {
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout,
+  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout, legacyTwoColLayout,
 
   // Plugins
   toastPlugin, confirmPlugin, alertPlugin, tooltipPlugin, inputDialogPlugin,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.91",
+  "version": "1.0.93",
   "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']),
@@ -115,7 +119,49 @@ export default {
       return all
     },
   },
+  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 +271,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>
 

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",