ketekny-ui-kit 1.0.116 → 1.0.118

package/package.json

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

package/src/layout/kTwoColPage.vue

@@ -1,8 +1,15 @@
 <template>
-  <main class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-hidden bg-slate-100">
+  <main
+    class="flex min-h-0 w-full max-w-none flex-1 flex-col overflow-hidden bg-slate-100"
+    @touchstart.passive="handleTouchStart"
+    @touchmove.passive="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @touchcancel="resetTouchState"
+  >
     <div
-      v-if="mobileSidebarOpen && !isDesktopViewport"
+      v-if="showMobileOverlay"
       class="fixed inset-0 z-20 bg-slate-950/40 backdrop-blur-[1px] lg:hidden"
+      :style="mobileOverlayStyle"
       @click="toggleMobileSidebar"
     />
 
@@ -58,9 +65,10 @@
           :label="mobileSidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
           :icon="mobileSidebarOpen ? 'PanelLeftClose' : 'PanelLeftOpen'"
           variant="soft"
+          size="large"
           :icon-only="!mobileSidebarOpen"
           :aria-label="mobileSidebarOpen ? null : 'Show sidebar'"
-          :class="mobileSidebarOpen ? '' : 'rounded-full shadow-lg shadow-slate-900/15'"
+          :class="mobileSidebarOpen ? '' : 'rounded-full text-slate-900 shadow-lg shadow-slate-900/15'"
           @click="toggleMobileSidebar"
         />
       </div>
@@ -69,7 +77,7 @@
           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"
+          :style="mobileSidebarStyle"
         >
           <slot name="sidebar" />
         </aside>
@@ -87,6 +95,9 @@ import kButton from '../ui/kButton.vue'
 
 const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
 const MAIN_MENU_TOGGLE_EVENT = 'ketekny:two-col-layout-mobile-menu'
+const MOBILE_EDGE_SWIPE_THRESHOLD = 72
+const MOBILE_SWIPE_OPEN_DISTANCE = 52
+const MOBILE_SWIPE_VERTICAL_TOLERANCE = 48
 
 export default {
   name: 'PageTwoColShell',
@@ -118,6 +129,12 @@ export default {
       isDesktopViewport: true,
       mobileSidebarOpen: false,
       viewportQuery: null,
+      touchGesture: {
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        trackingEdgeSwipe: false,
+      },
     }
   },
   computed: {
@@ -142,10 +159,38 @@ export default {
     },
     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'
+      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 transition-transform duration-200 ease-out'
+    },
+    dragOffset() {
+      if (!this.touchGesture.trackingEdgeSwipe) return 0
+      return Math.max(0, this.touchGesture.currentX - this.touchGesture.startX)
+    },
+    mobileSidebarStyle() {
+      const baseStyle = this.sidebarStyle
+      if (this.isDesktopViewport || this.mobileSidebarOpen || !this.touchGesture.trackingEdgeSwipe) {
+        return baseStyle
+      }
+      const widthValue = Number.parseFloat(this.sidebarWidth)
+      const effectiveWidth = Number.isFinite(widthValue) ? widthValue : 300
+      const clampedOffset = Math.min(this.dragOffset, effectiveWidth)
+      return {
+        ...baseStyle,
+        transform: `translateX(${clampedOffset - effectiveWidth}px)`,
+        transition: 'none',
+      }
+    },
+    showMobileOverlay() {
+      return !this.isDesktopViewport && (this.mobileSidebarOpen || this.touchGesture.trackingEdgeSwipe)
+    },
+    mobileOverlayStyle() {
+      if (this.mobileSidebarOpen || !this.touchGesture.trackingEdgeSwipe) return null
+      const progress = Math.min(this.dragOffset / MOBILE_SWIPE_OPEN_DISTANCE, 1) * 0.4
+      return {
+        opacity: String(progress),
+      }
     },
     showSidebar() {
-      return this.isDesktopViewport || this.mobileSidebarOpen
+      return this.isDesktopViewport || this.mobileSidebarOpen || this.touchGesture.trackingEdgeSwipe
     },
   },
   mounted() {
@@ -174,11 +219,55 @@ export default {
     syncSidebarForViewport() {
       if (!this.isDesktopViewport) {
         this.mobileSidebarOpen = false
+        this.resetTouchState()
       }
     },
     toggleMobileSidebar() {
       if (this.isDesktopViewport) return
       this.mobileSidebarOpen = !this.mobileSidebarOpen
+      this.resetTouchState()
+    },
+    handleTouchStart(event) {
+      if (this.isDesktopViewport || this.mobileSidebarOpen) {
+        this.resetTouchState()
+        return
+      }
+      const touch = event.touches?.[0]
+      if (!touch) return
+      this.touchGesture = {
+        startX: touch.clientX,
+        startY: touch.clientY,
+        currentX: touch.clientX,
+        trackingEdgeSwipe: touch.clientX <= MOBILE_EDGE_SWIPE_THRESHOLD,
+      }
+    },
+    handleTouchMove(event) {
+      if (!this.touchGesture.trackingEdgeSwipe) return
+      const touch = event.touches?.[0]
+      if (!touch) return
+      this.touchGesture.currentX = touch.clientX
+      if (Math.abs(touch.clientY - this.touchGesture.startY) > MOBILE_SWIPE_VERTICAL_TOLERANCE) {
+        this.resetTouchState()
+      }
+    },
+    handleTouchEnd() {
+      if (!this.touchGesture.trackingEdgeSwipe) {
+        this.resetTouchState()
+        return
+      }
+      const deltaX = this.touchGesture.currentX - this.touchGesture.startX
+      if (deltaX >= MOBILE_SWIPE_OPEN_DISTANCE) {
+        this.mobileSidebarOpen = true
+      }
+      this.resetTouchState()
+    },
+    resetTouchState() {
+      this.touchGesture = {
+        startX: 0,
+        startY: 0,
+        currentX: 0,
+        trackingEdgeSwipe: false,
+      }
     },
     openExternalUrl() {
       const target = String(this.externalUrl || '').trim()

package/src/twoColLayout/components/TwoColLayout.vue

@@ -43,8 +43,8 @@
       type="button"
       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'"
+        ? 'border border-rose-200 bg-rose-100 text-rose-900 shadow-lg shadow-slate-900/10 hover:bg-rose-200'
+        : ' bg-[#e63933] text-white shadow-lg shadow-black/25'"
       aria-label="Open menu"
       @click="toggleMenu">
       <Menu class="size-6" :stroke-width="2.25" />
@@ -58,7 +58,6 @@ 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: {