ketekny-ui-kit 1.0.114 → 1.0.116

package/package.json

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

package/src/layout/kTwoColPage.vue

@@ -1,5 +1,11 @@
 <template>
   <main class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-hidden bg-slate-100">
+    <div
+      v-if="mobileSidebarOpen && !isDesktopViewport"
+      class="fixed inset-0 z-20 bg-slate-950/40 backdrop-blur-[1px] lg:hidden"
+      @click="toggleMobileSidebar"
+    />
+
     <section
       v-if="hasTopSection"
       class="shrink-0 bg-white px-4 pb-4 pb-0 pt-8 sm:px-6 lg:px-8"
@@ -44,8 +50,27 @@
     </div>
 
     <div class="flex min-h-0 flex-1 flex-col overflow-hidden bg-slate-100 py-4">
+      <div
+        class="lg:hidden"
+        :class="mobileSidebarOpen ? 'mx-auto flex w-full max-w-none px-4 pb-3 sm:px-6' : 'fixed left-0 top-1/2 z-20 -translate-y-1/2'"
+      >
+        <kButton
+          :label="mobileSidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
+          :icon="mobileSidebarOpen ? 'PanelLeftClose' : 'PanelLeftOpen'"
+          variant="soft"
+          :icon-only="!mobileSidebarOpen"
+          :aria-label="mobileSidebarOpen ? null : 'Show sidebar'"
+          :class="mobileSidebarOpen ? '' : 'rounded-full shadow-lg shadow-slate-900/15'"
+          @click="toggleMobileSidebar"
+        />
+      </div>
       <div class="mx-auto flex min-h-0 w-full max-w-none flex-1 gap-2">
-        <aside class="ml-8 min-h-0 shrink-0 overflow-y-auto pr-4" :style="sidebarStyle">
+        <aside
+          v-if="showSidebar"
+          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100 px-4 sm:px-6 lg:ml-8 lg:pr-4 lg:pl-0"
+          :class="mobileSidebarClass"
+          :style="sidebarStyle"
+        >
           <slot name="sidebar" />
         </aside>
         <section class="min-h-0 min-w-0 flex-1 overflow-y-auto px-2">
@@ -60,6 +85,9 @@
 import packageJson from '../../package.json'
 import kButton from '../ui/kButton.vue'
 
+const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
+const MAIN_MENU_TOGGLE_EVENT = 'ketekny:two-col-layout-mobile-menu'
+
 export default {
   name: 'PageTwoColShell',
   components: { kButton },
@@ -85,6 +113,13 @@ export default {
       default: '300px',
     },
   },
+  data() {
+    return {
+      isDesktopViewport: true,
+      mobileSidebarOpen: false,
+      viewportQuery: null,
+    }
+  },
   computed: {
     hasTopSection() {
       return Boolean(
@@ -105,8 +140,46 @@ export default {
         maxWidth: this.sidebarWidth,
       }
     },
+    mobileSidebarClass() {
+      if (this.isDesktopViewport) return ''
+      return 'fixed left-0 top-0 z-20 h-full max-w-[85vw] border-r border-slate-200 bg-slate-100 py-4 shadow-xl shadow-slate-900/20'
+    },
+    showSidebar() {
+      return this.isDesktopViewport || this.mobileSidebarOpen
+    },
+  },
+  mounted() {
+    if (typeof window === 'undefined') return
+    this.viewportQuery = window.matchMedia(LG_VIEWPORT_QUERY)
+    this.isDesktopViewport = this.viewportQuery.matches
+    this.syncSidebarForViewport()
+    this.viewportQuery.addEventListener('change', this.handleViewportChange)
+    window.addEventListener(MAIN_MENU_TOGGLE_EVENT, this.handleMainMenuToggle)
+  },
+  beforeUnmount() {
+    this.viewportQuery?.removeEventListener?.('change', this.handleViewportChange)
+    window.removeEventListener(MAIN_MENU_TOGGLE_EVENT, this.handleMainMenuToggle)
   },
   methods: {
+    handleMainMenuToggle(event) {
+      if (this.isDesktopViewport) return
+      if (event?.detail?.open) {
+        this.mobileSidebarOpen = false
+      }
+    },
+    handleViewportChange(event) {
+      this.isDesktopViewport = event.matches
+      this.syncSidebarForViewport()
+    },
+    syncSidebarForViewport() {
+      if (!this.isDesktopViewport) {
+        this.mobileSidebarOpen = false
+      }
+    },
+    toggleMobileSidebar() {
+      if (this.isDesktopViewport) return
+      this.mobileSidebarOpen = !this.mobileSidebarOpen
+    },
     openExternalUrl() {
       const target = String(this.externalUrl || '').trim()
       if (!target) return

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -18,6 +18,7 @@ import demoAvatarUrl from '../assets/placeholder-user.jpg'
 const FAVORITES_STORAGE_KEY = 'ketekny-ui-sidebar-favorites'
 const MENU_TAB_STORAGE_KEY = 'ketekny-ui-sidebar-menu-tab'
 const LOGO_BASE_URL = 'https://s3.ketekny.gr/public/web-apps/logos'
+const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
 
 export default {
   name: 'MultilevelSidebar',
@@ -86,6 +87,8 @@ export default {
       activeMenuTab: 'all',
       query: '',
       collapsed: false,
+      isDesktopViewport: true,
+      viewportQuery: null,
       openIds: new Set(['projects']),
       favoriteIds: new Set(),
       footerLinks: [
@@ -232,8 +235,30 @@ export default {
     activeMenuTab(value) {
       this.persistActiveMenuTab(value)
     },
+    mobileOpen(isOpen) {
+      if (isOpen) this.syncCollapsedForViewport()
+    },
+  },
+  mounted() {
+    if (typeof window === 'undefined') return
+    this.viewportQuery = window.matchMedia(LG_VIEWPORT_QUERY)
+    this.isDesktopViewport = this.viewportQuery.matches
+    this.syncCollapsedForViewport()
+    this.viewportQuery.addEventListener('change', this.handleViewportChange)
+  },
+  beforeUnmount() {
+    this.viewportQuery?.removeEventListener?.('change', this.handleViewportChange)
   },
   methods: {
+    handleViewportChange(event) {
+      this.isDesktopViewport = event.matches
+      this.syncCollapsedForViewport()
+    },
+    syncCollapsedForViewport() {
+      if (!this.isDesktopViewport) {
+        this.collapsed = false
+      }
+    },
     findMenuItemById(items, id) {
       for (const item of items) {
         if (item.id === id) return item
@@ -307,6 +332,10 @@ export default {
       }
     },
     toggleCollapsed() {
+      if (!this.isDesktopViewport) {
+        this.collapsed = false
+        return
+      }
       this.collapsed = !this.collapsed
     },
     toggle(id) {

package/src/twoColLayout/components/TwoColLayout.vue

@@ -39,9 +39,9 @@
     </main>
 
     <button
-      v-if="!mobileMenuOpen"
+      v-if="!mobileMenuOpen && showMobileMenuButton"
       type="button"
-      class="fixed bottom-5 left-5 z-50 inline-flex size-14 items-center justify-center rounded-full transition-colors lg:hidden"
+      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl transition-colors lg:hidden"
       :class="theme === 'light'
         ? 'border border-slate-200 bg-white text-slate-700 shadow-lg shadow-slate-900/10 hover:bg-slate-100'
         : 'bg-sidebar text-white shadow-lg shadow-black/25 hover:bg-sidebar-accent'"
@@ -56,6 +56,9 @@
 import { Menu } from "@lucide/vue";
 import MultilevelSidebar from "./MultilevelSidebar.vue";
 
+const LG_VIEWPORT_QUERY = "(min-width: 1024px)";
+const MAIN_MENU_TOGGLE_EVENT = "ketekny:two-col-layout-mobile-menu";
+
 export default {
   name: "TwoColLayout",
   components: {
@@ -105,14 +108,66 @@ export default {
   data() {
     return {
       mobileMenuOpen: false,
+      desktopViewportQuery: null,
+      showMobileMenuButton: true,
+      mobileScrollHideTimer: null,
     };
   },
+  mounted() {
+    if (typeof window === "undefined") return;
+    this.desktopViewportQuery = window.matchMedia(LG_VIEWPORT_QUERY);
+    this.syncMenuForViewport(this.desktopViewportQuery.matches);
+    this.desktopViewportQuery.addEventListener("change", this.handleViewportChange);
+    window.addEventListener("scroll", this.handleWindowScroll, { passive: true });
+  },
+  beforeUnmount() {
+    this.desktopViewportQuery?.removeEventListener?.("change", this.handleViewportChange);
+    window.removeEventListener("scroll", this.handleWindowScroll);
+    if (this.mobileScrollHideTimer) {
+      window.clearTimeout(this.mobileScrollHideTimer);
+      this.mobileScrollHideTimer = null;
+    }
+  },
   methods: {
+    handleWindowScroll() {
+      if (typeof window === "undefined") return;
+      if (this.mobileMenuOpen || this.desktopViewportQuery?.matches) return;
+      this.showMobileMenuButton = false;
+      if (this.mobileScrollHideTimer) {
+        window.clearTimeout(this.mobileScrollHideTimer);
+      }
+      this.mobileScrollHideTimer = window.setTimeout(() => {
+        this.showMobileMenuButton = true;
+        this.mobileScrollHideTimer = null;
+      }, 180);
+    },
+    emitMobileMenuState() {
+      if (typeof window === "undefined") return;
+      window.dispatchEvent(
+        new CustomEvent(MAIN_MENU_TOGGLE_EVENT, {
+          detail: { open: this.mobileMenuOpen },
+        })
+      );
+    },
+    handleViewportChange(event) {
+      this.syncMenuForViewport(event.matches);
+    },
+    syncMenuForViewport(isDesktopViewport) {
+      if (!isDesktopViewport) {
+        this.mobileMenuOpen = false;
+        this.emitMobileMenuState();
+        this.showMobileMenuButton = true;
+      }
+    },
     toggleMenu() {
       this.mobileMenuOpen = !this.mobileMenuOpen;
+      this.showMobileMenuButton = !this.mobileMenuOpen;
+      this.emitMobileMenuState();
     },
     closeMenu() {
       this.mobileMenuOpen = false;
+      this.showMobileMenuButton = true;
+      this.emitMobileMenuState();
     },
     handleSelect(id) {
       this.closeMenu();

package/src/ui/kMenu.vue

@@ -53,6 +53,13 @@
                   @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>
+                  <kIcon
+                    v-if="link.checked"
+                    name="Check"
+                    :size="16"
+                    class="ml-auto shrink-0"
+                    :class="checkedIconClass(link)"
+                  />
                 </component>
               </li>
             </ul>
@@ -135,6 +142,10 @@ export default {
       if (link?.tone === "danger") return "text-orange-500 dark:text-orange-300";
       return "text-primary/80";
     },
+    checkedIconClass(link) {
+      if (link?.tone === "danger") return "text-orange-500 dark:text-orange-300";
+      return "text-primary dark:text-primary";
+    },
     handleLinkClick(link, event) {
       if (link?.disabled) {
         event.preventDefault();

package/src/ui/kToolbar.vue

@@ -37,24 +37,48 @@
       </button>
 
       <div v-if="actions.length && !isCompact" class="flex flex-wrap items-center justify-end gap-2 ml-auto shrink-0">
-        <kButton
-          v-for="(action, index) in actions"
-          :key="`${action.label || 'action'}-${index}`"
-          :label="action.label"
-          :icon="action.icon"
-          :loading="!!action.loading"
-          :disabled="disabled || !!action.disabled"
-          :aria-label="action.ariaLabel || action.label"
-          :tooltip="action.tooltip"
-          :size="resolveActionButtonSize(action)"
-          :small="action.small === true"
-          :icon-only="!!action.iconOnly"
-          :variant="action.variant || 'outlined'"
-          :secondary="!!action.secondary"
-          :success="!!action.success"
-          :warning="!!action.warning"
-          :danger="!!action.danger"
-          @click="handleActionClick(action)" />
+        <template v-for="(action, index) in actions" :key="`${action.label || 'action'}-${index}`">
+          <kMenu
+            v-if="isActionGroup(action)"
+            :links="resolveActionGroupLinks(action)"
+            :aria-label="action.ariaLabel || action.label || 'Action group'"
+          >
+            <template #trigger>
+              <button
+                type="button"
+                :disabled="disabled || !!action.disabled"
+                :aria-label="action.ariaLabel || action.label"
+                :class="resolveActionGroupTriggerClass(action)"
+              >
+                <kIcon
+                  v-if="action.icon"
+                  :name="action.icon"
+                  :size="resolveActionGroupIconSize(action)"
+                  class="shrink-0"
+                />
+                <span v-if="!action.iconOnly" class="truncate">{{ action.label }}</span>
+                <kIcon v-if="!action.iconOnly" name="ChevronDown" :size="16" class="shrink-0 opacity-80" />
+              </button>
+            </template>
+          </kMenu>
+          <kButton
+            v-else
+            :label="action.label"
+            :icon="action.icon"
+            :loading="!!action.loading"
+            :disabled="disabled || !!action.disabled"
+            :aria-label="action.ariaLabel || action.label"
+            :tooltip="action.tooltip"
+            :size="resolveActionButtonSize(action)"
+            :small="action.small === true"
+            :icon-only="!!action.iconOnly"
+            :variant="action.variant || 'outlined'"
+            :secondary="!!action.secondary"
+            :success="!!action.success"
+            :warning="!!action.warning"
+            :danger="!!action.danger"
+            @click="handleActionClick(action)" />
+        </template>
       </div>
     </div>
 
@@ -79,20 +103,42 @@
         </div>
 
         <div class="flex flex-col overflow-y-auto max-h-[60vh]">
-          <button
-            v-for="(action, index) in actions"
-            :key="`mobile-${action.label || 'action'}-${index}`"
-            type="button"
-            :disabled="disabled || !!action.disabled || !!action.loading"
-            :class="[
-              'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
-              disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
-            ]"
-            @click="handleMobileAction(action)">
-            <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
-            <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
-            <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin dark:border-slate-600"></span>
-          </button>
+          <template v-for="(action, index) in actions" :key="`mobile-${action.label || 'action'}-${index}`">
+            <kMenu
+              v-if="isActionGroup(action)"
+              class="w-full"
+              :links="resolveActionGroupLinks(action)"
+              :aria-label="action.ariaLabel || action.label || 'Action group'"
+            >
+              <template #trigger>
+                <button
+                  type="button"
+                  :disabled="disabled || !!action.disabled"
+                  :class="[
+                    'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
+                    disabled || action.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
+                  ]"
+                >
+                  <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
+                  <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
+                  <kIcon name="ChevronDown" :size="16" class="ml-auto shrink-0 text-slate-500 dark:text-slate-400" />
+                </button>
+              </template>
+            </kMenu>
+            <button
+              v-else
+              type="button"
+              :disabled="disabled || !!action.disabled || !!action.loading"
+              :class="[
+                'flex items-center w-full gap-3 px-2 py-3 text-left rounded-lg min-h-11',
+                disabled || action.disabled || action.loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-primary/10 active:bg-primary/15',
+              ]"
+              @click="handleMobileAction(action)">
+              <kIcon v-if="action.icon" :name="action.icon" :size="18" class="shrink-0 text-slate-600 dark:text-slate-400" />
+              <span class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ action.label }}</span>
+              <span v-if="action.loading" class="w-4 h-4 ml-auto border-2 rounded-full border-slate-300 border-t-transparent animate-spin dark:border-slate-600"></span>
+            </button>
+          </template>
         </div>
       </section>
     </div>
@@ -103,6 +149,13 @@
 import { ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import kButton from "./kButton.vue";
 import kIcon from "./kIcon.vue";
+import kMenu from "./kMenu.vue";
+import {
+  K_BUTTON_BASE,
+  K_BUTTON_FOCUS_RING,
+  K_BUTTON_SIZE_STYLES,
+  K_BUTTON_VARIANT_STYLES,
+} from "./themes/kButton.theme";
 
 const props = defineProps({
   title: {
@@ -140,6 +193,18 @@ const isCompact = ref(false);
 let resizeObserver = null;
 
 const VALID_BUTTON_SIZES = ["small", "normal", "large"];
+const ACTION_GROUP_KEYS = ["items", "children", "links"];
+
+const isActionGroup = (action) =>
+  ACTION_GROUP_KEYS.some((key) => Array.isArray(action?.[key]) && action[key].length > 0);
+
+const resolveActionGroupLinks = (action) => {
+  const items = ACTION_GROUP_KEYS.map((key) => action?.[key]).find((value) => Array.isArray(value)) || [];
+  return items.map((item) => ({
+    ...item,
+    action: item?.action || item?.onClick,
+  }));
+};
 
 const handleActionClick = (action) => {
   if (typeof action?.onClick === "function") action.onClick();
@@ -157,6 +222,52 @@ const resolveActionButtonSize = (action) => {
   return "normal";
 };
 
+const resolveActionGroupIntent = (action) => {
+  if (action?.danger) return "danger";
+  if (action?.success) return "success";
+  if (action?.warning) return "warning";
+  if (action?.secondary) return "secondary";
+  return "primary";
+};
+
+const resolveActionGroupVariant = (action) => {
+  if (action?.outlined) return "outlined";
+  if (action?.secondary && !action?.variant) return "soft";
+  return action?.variant || "outlined";
+};
+
+const resolveActionGroupSizeKey = (action) => {
+  const size = resolveActionButtonSize(action);
+  return K_BUTTON_SIZE_STYLES[size] ? size : "normal";
+};
+
+const resolveActionGroupTriggerClass = (action) => {
+  const intent = resolveActionGroupIntent(action);
+  const variant = resolveActionGroupVariant(action);
+  const sizeSet = K_BUTTON_SIZE_STYLES[resolveActionGroupSizeKey(action)];
+  const intentSet = K_BUTTON_VARIANT_STYLES[intent] || K_BUTTON_VARIANT_STYLES.primary;
+  const styleSet = intentSet[variant] || intentSet.outlined;
+  const variantClass = (action?.disabled || props.disabled) ? styleSet.disabled : styleSet.enabled;
+  const sizeClass = action?.iconOnly ? sizeSet.iconOnly : sizeSet.regular;
+
+  return [
+    K_BUTTON_BASE,
+    K_BUTTON_FOCUS_RING,
+    variantClass,
+    sizeClass,
+    "gap-2",
+    action?.fullWidth ? "w-full justify-center" : action?.iconOnly ? "" : "w-max shrink-0",
+  ];
+};
+
+const resolveActionGroupIconSize = (action) => {
+  const sizeSet = K_BUTTON_SIZE_STYLES[resolveActionGroupSizeKey(action)];
+  const iconClass = sizeSet?.icon || "h-4 w-4";
+  const match = /(?:^|\s)(?:size-|h-)(\d+(?:\.\d+)?)/.exec(iconClass);
+  if (!match) return 16;
+  return Number(match[1]) * 4;
+};
+
 const updateCompactMode = () => {
   if (!toolbarRef.value) return;
   isCompact.value = toolbarRef.value.clientWidth < 768;