ketekny-ui-kit 1.0.127 → 1.0.129

package/README.md

@@ -205,7 +205,7 @@ Components:
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
-- `kSingleColPage`, `kTwoColPage`, `twoColLayout`, `legacyTwoColLayout`
+- `kSingleColPage`, `kMultiColPage`, `twoColLayout`, `legacyTwoColLayout`
 
 Other exports:
 
@@ -242,4 +242,3 @@ ISC
 
 - Live demo/docs: https://ui.ketekny.gr
 - npm: https://www.npmjs.com/package/ketekny-ui-kit
-

package/index.js

@@ -40,6 +40,7 @@ import kAppFooter from './src/layout/kAppFooter.vue'
 import kAppMain from './src/layout/kAppMain.vue'
 import kHero from './src/layout/kHero.vue'
 import kSingleColPage from './src/layout/kSingleColPage.vue'
+import kMultiColPage from './src/layout/kMultiColPage.vue'
 import kTwoColPage from './src/layout/kTwoColPage.vue'
 import twoColLayout from './src/twoColLayout/components/TwoColLayout.vue'
 import legacyTwoColLayout from './src/layout/twoColLayout.vue'
@@ -66,7 +67,7 @@ export {
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kTwoColPage, twoColLayout, legacyTwoColLayout,
+  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kMultiColPage, 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.127",
+  "version": "1.0.129",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/layout/kMultiColPage.vue

@@ -0,0 +1,5 @@
+<script>
+import kMultiColPage from './kTwoColPage.vue'
+
+export default kMultiColPage
+</script>

package/src/layout/kTwoColPage.vue

@@ -10,7 +10,7 @@
       v-if="showMobileOverlay"
       class="fixed inset-0 z-20 bg-slate-950/40 backdrop-blur-[1px] lg:hidden"
       :style="mobileOverlayStyle"
-      @click="toggleMobileSidebar"
+      @click="closeMobileSidebar"
     />
 
     <section
@@ -59,31 +59,73 @@
     <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'"
+        :class="mobileSidebarOpen ? 'mx-auto flex w-full max-w-none items-center justify-between gap-3 px-4 pb-3 sm:px-6' : 'pointer-events-none fixed inset-x-0 top-1/2 z-20 flex -translate-y-1/2'"
       >
-        <kButton
-          :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 text-slate-900 shadow-lg shadow-slate-900/15'"
-          @click="toggleMobileSidebar"
-        />
+        <button
+          v-if="hasLeftSidebar"
+          type="button"
+          :aria-label="mobileSidebarButtonAriaLabel('left')"
+          class="mobile-sidebar-trigger pointer-events-auto"
+          :class="mobileSidebarButtonClass('left')"
+          @click="toggleMobileSidebar('left')"
+        >
+          <kIcon
+            :name="mobileSidebarIconName('left')"
+            size="18"
+          />
+          <span v-if="mobileSidebarButtonShowsLabel('left')" class="mobile-sidebar-trigger__label">
+            {{ mobileSidebarButtonLabel('left') }}
+          </span>
+        </button>
+        <button
+          v-if="hasRightSidebar"
+          type="button"
+          :aria-label="mobileSidebarButtonAriaLabel('right')"
+          class="mobile-sidebar-trigger pointer-events-auto"
+          :class="mobileSidebarButtonClass('right')"
+          @click="toggleMobileSidebar('right')"
+        >
+          <kIcon
+            :name="mobileSidebarIconName('right')"
+            size="18"
+          />
+          <span v-if="mobileSidebarButtonShowsLabel('right')" class="mobile-sidebar-trigger__label">
+            {{ mobileSidebarButtonLabel('right') }}
+          </span>
+        </button>
       </div>
       <div class="mx-auto flex min-h-0 w-full max-w-none flex-1 gap-2">
         <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="mobileSidebarStyle"
+          v-if="showLeftSidebar"
+          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100"
+          :class="[mobileSidebarClass('left'), sidebarSurfaceClass('left')]"
+          :style="mobileSidebarStyle('left')"
         >
-          <slot name="sidebar" />
+          <div v-if="effectiveSidebarLeftTitle" :class="sidebarTitleWrapClass('left')">
+            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">
+              {{ effectiveSidebarLeftTitle }}
+            </p>
+          </div>
+          <slot name="sidebar-left" v-bind="sidebarSlotProps('left')">
+            <slot name="sidebar" v-bind="sidebarSlotProps('left')" />
+          </slot>
         </aside>
         <section class="min-h-0 min-w-0 flex-1 overflow-y-auto px-2">
           <slot name="content" />
         </section>
+        <aside
+          v-if="showRightSidebar"
+          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100"
+          :class="[mobileSidebarClass('right'), sidebarSurfaceClass('right')]"
+          :style="mobileSidebarStyle('right')"
+        >
+          <div v-if="sidebarRightTitle" :class="sidebarTitleWrapClass('right')">
+            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">
+              {{ sidebarRightTitle }}
+            </p>
+          </div>
+          <slot name="sidebar-right" v-bind="sidebarSlotProps('right')" />
+        </aside>
       </div>
     </div>
   </main>
@@ -92,6 +134,7 @@
 <script>
 import packageJson from '../../package.json'
 import kButton from '../ui/kButton.vue'
+import kIcon from '../ui/kIcon.vue'
 
 const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
 const MAIN_MENU_TOGGLE_EVENT = 'ketekny:two-col-layout-mobile-menu'
@@ -100,8 +143,8 @@ const MOBILE_SWIPE_OPEN_DISTANCE = 52
 const MOBILE_SWIPE_VERTICAL_TOLERANCE = 48
 
 export default {
-  name: 'PageTwoColShell',
-  components: { kButton },
+  name: 'MultiColPage',
+  components: { kButton, kIcon },
   props: {
     appTitle: {
       type: String,
@@ -123,13 +166,47 @@ export default {
       type: String,
       default: '300px',
     },
+    sidebarLeftWidth: {
+      type: String,
+      default: '',
+    },
+    sidebarDense: {
+      type: Boolean,
+      default: false,
+    },
+    sidebarLeftDense: {
+      type: Boolean,
+      default: false,
+    },
+    sidebarTitle: {
+      type: String,
+      default: '',
+    },
+    sidebarLeftTitle: {
+      type: String,
+      default: '',
+    },
+    sidebarRightWidth: {
+      type: String,
+      default: '',
+    },
+    sidebarRightDense: {
+      type: Boolean,
+      default: false,
+    },
+    sidebarRightTitle: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
       isDesktopViewport: true,
       mobileSidebarOpen: false,
+      mobileSidebarSide: 'left',
       viewportQuery: null,
       touchGesture: {
+        side: 'left',
         startX: 0,
         startY: 0,
         currentX: 0,
@@ -151,33 +228,42 @@ export default {
       if (!target) return ''
       return target.replace(/^https?:\/\//i, '').replace(/\/$/, '')
     },
-    sidebarStyle() {
+    hasLeftSidebar() {
+      return Boolean(this.$slots['sidebar-left'] || this.$slots.sidebar)
+    },
+    hasRightSidebar() {
+      return Boolean(this.$slots['sidebar-right'])
+    },
+    effectiveSidebarLeftWidth() {
+      return this.sidebarLeftWidth || this.sidebarWidth || '300px'
+    },
+    effectiveSidebarLeftTitle() {
+      return this.sidebarLeftTitle || this.sidebarTitle
+    },
+    effectiveSidebarLeftDense() {
+      return this.sidebarLeftDense || this.sidebarDense
+    },
+    effectiveSidebarRightWidth() {
+      return this.sidebarRightWidth || this.effectiveSidebarLeftWidth
+    },
+    sidebarLeftStyle() {
       return {
-        minWidth: this.sidebarWidth,
-        maxWidth: this.sidebarWidth,
+        minWidth: this.effectiveSidebarLeftWidth,
+        maxWidth: this.effectiveSidebarLeftWidth,
       }
     },
-    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 transition-transform duration-200 ease-out'
+    sidebarRightStyle() {
+      return {
+        minWidth: this.effectiveSidebarRightWidth,
+        maxWidth: this.effectiveSidebarRightWidth,
+      }
     },
     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',
+      if (this.touchGesture.side === 'right') {
+        return Math.max(0, this.touchGesture.startX - this.touchGesture.currentX)
       }
+      return Math.max(0, this.touchGesture.currentX - this.touchGesture.startX)
     },
     showMobileOverlay() {
       return !this.isDesktopViewport && (this.mobileSidebarOpen || this.touchGesture.trackingEdgeSwipe)
@@ -189,8 +275,13 @@ export default {
         opacity: String(progress),
       }
     },
-    showSidebar() {
-      return this.isDesktopViewport || this.mobileSidebarOpen || this.touchGesture.trackingEdgeSwipe
+    showLeftSidebar() {
+      if (!this.hasLeftSidebar) return false
+      return this.showSidebarForSide('left')
+    },
+    showRightSidebar() {
+      if (!this.hasRightSidebar) return false
+      return this.showSidebarForSide('right')
     },
   },
   mounted() {
@@ -206,10 +297,116 @@ export default {
     window.removeEventListener(MAIN_MENU_TOGGLE_EVENT, this.handleMainMenuToggle)
   },
   methods: {
+    sidebarSlotProps(side) {
+      return {
+        side,
+        title: side === 'right' ? this.sidebarRightTitle : this.effectiveSidebarLeftTitle,
+        dense: side === 'right' ? this.sidebarRightDense : this.effectiveSidebarLeftDense,
+        isDesktopViewport: this.isDesktopViewport,
+        mobileSidebarOpen: this.mobileSidebarOpen,
+        mobileSidebarSide: this.mobileSidebarSide,
+        isMobileSidebarActive: this.mobileSidebarOpen && this.mobileSidebarSide === side,
+        toggleMobileSidebar: () => this.toggleMobileSidebar(side),
+        closeMobileSidebar: this.closeMobileSidebar,
+      }
+    },
+    showSidebarForSide(side) {
+      if (this.isDesktopViewport) return true
+      return (
+        (this.mobileSidebarOpen && this.mobileSidebarSide === side) ||
+        (this.touchGesture.trackingEdgeSwipe && this.touchGesture.side === side)
+      )
+    },
+    mobileSidebarClass(side) {
+      if (this.isDesktopViewport) return ''
+      const horizontalClass = side === 'right'
+        ? 'fixed right-0 top-0 border-l border-slate-200'
+        : 'fixed left-0 top-0 border-r border-slate-200'
+      return `${horizontalClass} z-20 h-full max-w-[85vw] bg-slate-100 py-4 shadow-xl shadow-slate-900/20 transition-transform duration-200 ease-out`
+    },
+    mobileSidebarStyle(side) {
+      const baseStyle = side === 'right' ? this.sidebarRightStyle : this.sidebarLeftStyle
+      if (
+        this.isDesktopViewport ||
+        this.mobileSidebarOpen ||
+        !this.touchGesture.trackingEdgeSwipe ||
+        this.touchGesture.side !== side
+      ) {
+        return baseStyle
+      }
+      const widthValue = Number.parseFloat(
+        side === 'right' ? this.effectiveSidebarRightWidth : this.effectiveSidebarLeftWidth
+      )
+      const effectiveWidth = Number.isFinite(widthValue) ? widthValue : 300
+      const clampedOffset = Math.min(this.dragOffset, effectiveWidth)
+      const hiddenOffset = effectiveWidth - clampedOffset
+      const direction = side === 'right' ? hiddenOffset : clampedOffset - effectiveWidth
+      return {
+        ...baseStyle,
+        transform: `translateX(${direction}px)`,
+        transition: 'none',
+      }
+    },
+    mobileSidebarButtonClass(side) {
+      if (this.mobileSidebarOpen) {
+        return side === 'right' ? 'ml-auto' : ''
+      }
+      const title = this.sidebarTitleForSide(side)
+      const edgeClass = side === 'right'
+        ? 'ml-auto rounded-l-xl rounded-r-none border-r-0'
+        : 'rounded-l-none rounded-r-xl border-l-0'
+      if (title) {
+        return `${edgeClass} mobile-sidebar-trigger--titled min-h-0 min-w-0 px-2 py-3`
+      }
+      return side === 'right'
+        ? 'ml-auto rounded-full'
+        : 'rounded-full'
+    },
+    sidebarTitleForSide(side) {
+      return side === 'right' ? this.sidebarRightTitle : this.effectiveSidebarLeftTitle
+    },
+    sidebarDenseForSide(side) {
+      return side === 'right' ? this.sidebarRightDense : this.effectiveSidebarLeftDense
+    },
+    sidebarSurfaceClass(side) {
+      if (this.sidebarDenseForSide(side)) {
+        return ''
+      }
+      return side === 'right'
+        ? 'px-4 sm:px-6 lg:mr-8 lg:pl-4 lg:pr-0'
+        : 'px-4 sm:px-6 lg:ml-8 lg:pr-4 lg:pl-0'
+    },
+    sidebarTitleWrapClass(side) {
+      return this.sidebarDenseForSide(side) ? '' : 'pb-3'
+    },
+    mobileSidebarButtonLabel(side) {
+      if (this.mobileSidebarOpen && this.mobileSidebarSide === side) {
+        return 'Hide sidebar'
+      }
+      return this.sidebarTitleForSide(side) || 'Show sidebar'
+    },
+    mobileSidebarButtonAriaLabel(side) {
+      if (this.mobileSidebarOpen && this.mobileSidebarSide === side) return null
+      return this.sidebarTitleForSide(side) || 'Show sidebar'
+    },
+    mobileSidebarButtonShowsLabel(side) {
+      if (this.mobileSidebarOpen && this.mobileSidebarSide === side) return true
+      return Boolean(this.sidebarTitleForSide(side))
+    },
+    mobileSidebarIconName(side) {
+      if (side === 'right') {
+        return this.mobileSidebarOpen && this.mobileSidebarSide === side
+          ? 'PanelRightClose'
+          : 'PanelRightOpen'
+      }
+      return this.mobileSidebarOpen && this.mobileSidebarSide === side
+        ? 'PanelLeftClose'
+        : 'PanelLeftOpen'
+    },
     handleMainMenuToggle(event) {
       if (this.isDesktopViewport) return
       if (event?.detail?.open) {
-        this.mobileSidebarOpen = false
+        this.closeMobileSidebar()
       }
     },
     handleViewportChange(event) {
@@ -218,13 +415,22 @@ export default {
     },
     syncSidebarForViewport() {
       if (!this.isDesktopViewport) {
-        this.mobileSidebarOpen = false
-        this.resetTouchState()
+        this.closeMobileSidebar()
       }
     },
-    toggleMobileSidebar() {
+    toggleMobileSidebar(side = 'left') {
       if (this.isDesktopViewport) return
-      this.mobileSidebarOpen = !this.mobileSidebarOpen
+      if ((side === 'left' && !this.hasLeftSidebar) || (side === 'right' && !this.hasRightSidebar)) return
+      if (this.mobileSidebarOpen && this.mobileSidebarSide === side) {
+        this.mobileSidebarOpen = false
+      } else {
+        this.mobileSidebarOpen = true
+        this.mobileSidebarSide = side
+      }
+      this.resetTouchState()
+    },
+    closeMobileSidebar() {
+      this.mobileSidebarOpen = false
       this.resetTouchState()
     },
     handleTouchStart(event) {
@@ -234,11 +440,19 @@ export default {
       }
       const touch = event.touches?.[0]
       if (!touch) return
+      const viewportWidth = typeof window === 'undefined' ? 0 : window.innerWidth
+      const isLeftEdge = this.hasLeftSidebar && touch.clientX <= MOBILE_EDGE_SWIPE_THRESHOLD
+      const isRightEdge = this.hasRightSidebar && viewportWidth - touch.clientX <= MOBILE_EDGE_SWIPE_THRESHOLD
+      if (!isLeftEdge && !isRightEdge) {
+        this.resetTouchState()
+        return
+      }
       this.touchGesture = {
+        side: isRightEdge ? 'right' : 'left',
         startX: touch.clientX,
         startY: touch.clientY,
         currentX: touch.clientX,
-        trackingEdgeSwipe: touch.clientX <= MOBILE_EDGE_SWIPE_THRESHOLD,
+        trackingEdgeSwipe: true,
       }
     },
     handleTouchMove(event) {
@@ -255,14 +469,18 @@ export default {
         this.resetTouchState()
         return
       }
-      const deltaX = this.touchGesture.currentX - this.touchGesture.startX
+      const deltaX = this.touchGesture.side === 'right'
+        ? this.touchGesture.startX - this.touchGesture.currentX
+        : this.touchGesture.currentX - this.touchGesture.startX
       if (deltaX >= MOBILE_SWIPE_OPEN_DISTANCE) {
         this.mobileSidebarOpen = true
+        this.mobileSidebarSide = this.touchGesture.side
       }
       this.resetTouchState()
     },
     resetTouchState() {
       this.touchGesture = {
+        side: 'left',
         startX: 0,
         startY: 0,
         currentX: 0,
@@ -277,3 +495,56 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.mobile-sidebar-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 3.5rem;
+  padding: 0.875rem;
+  border: 1px solid rgb(203 213 225);
+  background: rgb(239 246 255);
+  color: rgb(15 23 42);
+  box-shadow: 0 10px 25px -15px rgba(15, 23, 42, 0.45);
+}
+
+.mobile-sidebar-trigger--titled {
+  flex-direction: column;
+  width: 3rem;
+  min-height: 8.5rem;
+  padding: 0.75rem 0.35rem;
+}
+
+.mobile-sidebar-trigger:focus-visible {
+  outline: 2px solid rgb(37 99 235);
+  outline-offset: 2px;
+}
+
+.mobile-sidebar-trigger__label {
+  display: inline-block;
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.mobile-sidebar-trigger--titled .mobile-sidebar-trigger__label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  line-height: 1;
+}
+
+.mobile-sidebar-trigger--titled :deep(svg) {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex-shrink: 0;
+  display: block;
+}
+
+.mobile-sidebar-trigger--titled.rounded-l-none .mobile-sidebar-trigger__label {
+  transform: rotate(180deg);
+}
+</style>