ketekny-ui-kit 1.0.128 → 1.0.129

package/README.md

@@ -205,7 +205,7 @@ Components:
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
-- `kSingleColPage`, `kMultiColPage`, `kTwoColPage` (backwards-compatible alias), `twoColLayout`, `legacyTwoColLayout`
+- `kSingleColPage`, `kMultiColPage`, `twoColLayout`, `legacyTwoColLayout`
 
 Other exports:
 

package/package.json

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

package/src/layout/kTwoColPage.vue

@@ -97,11 +97,11 @@
       <div class="mx-auto flex min-h-0 w-full max-w-none flex-1 gap-2">
         <aside
           v-if="showLeftSidebar"
-          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('left')"
+          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100"
+          :class="[mobileSidebarClass('left'), sidebarSurfaceClass('left')]"
           :style="mobileSidebarStyle('left')"
         >
-          <div v-if="effectiveSidebarLeftTitle" class="pb-3">
+          <div v-if="effectiveSidebarLeftTitle" :class="sidebarTitleWrapClass('left')">
             <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">
               {{ effectiveSidebarLeftTitle }}
             </p>
@@ -115,11 +115,11 @@
         </section>
         <aside
           v-if="showRightSidebar"
-          class="min-h-0 shrink-0 overflow-y-auto bg-slate-100 px-4 sm:px-6 lg:mr-8 lg:pl-4 lg:pr-0"
-          :class="mobileSidebarClass('right')"
+          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="pb-3">
+          <div v-if="sidebarRightTitle" :class="sidebarTitleWrapClass('right')">
             <p class="text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">
               {{ sidebarRightTitle }}
             </p>
@@ -170,6 +170,14 @@ export default {
       type: String,
       default: '',
     },
+    sidebarDense: {
+      type: Boolean,
+      default: false,
+    },
+    sidebarLeftDense: {
+      type: Boolean,
+      default: false,
+    },
     sidebarTitle: {
       type: String,
       default: '',
@@ -182,6 +190,10 @@ export default {
       type: String,
       default: '',
     },
+    sidebarRightDense: {
+      type: Boolean,
+      default: false,
+    },
     sidebarRightTitle: {
       type: String,
       default: '',
@@ -228,6 +240,9 @@ export default {
     effectiveSidebarLeftTitle() {
       return this.sidebarLeftTitle || this.sidebarTitle
     },
+    effectiveSidebarLeftDense() {
+      return this.sidebarLeftDense || this.sidebarDense
+    },
     effectiveSidebarRightWidth() {
       return this.sidebarRightWidth || this.effectiveSidebarLeftWidth
     },
@@ -286,6 +301,7 @@ export default {
       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,
@@ -349,6 +365,20 @@ export default {
     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'