ketekny-ui-kit 1.0.128 → 1.0.130

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/index.js

@@ -2,6 +2,7 @@
 import kMessage from './src/ui/kMessage.vue'
 import kButton from './src/ui/kButton.vue'
 import kCheckbox from './src/ui/kCheckbox.vue'
+import kCard from './src/ui/kCard.vue'
 import kChip from './src/ui/kChip.vue'
 import kClipboard from './src/ui/kClipboard.vue'
 import kCode from './src/ui/kCode.vue'
@@ -38,6 +39,7 @@ import kTree from './src/ui/kTree.vue'
 import kAppHeader from './src/layout/kAppHeader.vue'
 import kAppFooter from './src/layout/kAppFooter.vue'
 import kAppMain from './src/layout/kAppMain.vue'
+import kFormSection from './src/layout/kFormSection.vue'
 import kHero from './src/layout/kHero.vue'
 import kSingleColPage from './src/layout/kSingleColPage.vue'
 import kMultiColPage from './src/layout/kMultiColPage.vue'
@@ -58,7 +60,7 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kClipboard, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
+  kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kCard, kChip, kClipboard, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
   kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm, kOptionGroup,
@@ -67,7 +69,7 @@ export {
   kDialog, kDrawer,
 
   // Layout Components
-  kAppHeader, kAppFooter, kAppMain, kHero, kSingleColPage, kMultiColPage, kTwoColPage, twoColLayout, legacyTwoColLayout,
+  kAppHeader, kAppFooter, kAppMain, kFormSection, 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.128",
+  "version": "1.0.130",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/layout/kFormSection.vue

@@ -0,0 +1,55 @@
+<template>
+  <section :class="sectionClasses">
+    <div class="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:items-start">
+      <div>
+        <h3 class="text-lg font-semibold">
+          {{ title }}
+        </h3>
+        <p v-if="help" class="mt-1 text-sm text-slate-500">
+          {{ help }}
+        </p>
+        <div v-if="$slots.left" class="mt-4">
+          <slot name="left" />
+        </div>
+      </div>
+
+      <div class="w-full" :style="contentStyles">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'kFormSection',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    help: {
+      type: String,
+      default: '',
+    },
+    borderTop: {
+      type: Boolean,
+      default: false,
+    },
+    contentMaxWidth: {
+      type: String,
+      default: '56rem',
+    },
+  },
+  computed: {
+    sectionClasses() {
+      return this.borderTop ? 'border-t border-slate-200 pt-8' : ''
+    },
+    contentStyles() {
+      return {
+        maxWidth: this.contentMaxWidth,
+      }
+    },
+  },
+}
+</script>

package/src/layout/kSingleColPage.vue

@@ -5,8 +5,16 @@
       class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
       :style="{ top: resolvedHeaderExtraTop }"
     >
-      <div class="mx-auto flex w-full max-w-none items-center">
-        <slot name="header-extra" />
+      <div class="mx-auto w-full max-w-none py-1">
+        <kToolbar
+          v-if="hasActions"
+          :actions="actions"
+          dense
+          variant="plain"
+        />
+        <div v-if="$slots['header-extra']" class="flex items-center">
+          <slot name="header-extra" />
+        </div>
       </div>
     </div>
 
@@ -49,8 +57,16 @@
       class="sticky z-30 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur sm:px-6 lg:px-8"
       :style="{ top: resolvedHeaderExtraTop }"
     >
-      <div class="mx-auto flex w-full max-w-none items-center">
-        <slot name="header-extra" />
+      <div class="mx-auto w-full max-w-none py-1">
+        <kToolbar
+          v-if="hasActions"
+          :actions="actions"
+          dense
+          variant="plain"
+        />
+        <div v-if="$slots['header-extra']" class="flex items-center">
+          <slot name="header-extra" />
+        </div>
       </div>
     </div>
 
@@ -65,10 +81,11 @@
 <script>
 import packageJson from '../../package.json'
 import kButton from '../ui/kButton.vue'
+import kToolbar from '../ui/kToolbar.vue'
 
 export default {
   name: 'PageShell',
-  components: { kButton },
+  components: { kButton, kToolbar },
   props: {
     appTitle: {
       type: String,
@@ -86,6 +103,10 @@ export default {
       type: String,
       default: '',
     },
+    actions: {
+      type: Array,
+      default: () => [],
+    },
     headerExtraTop: {
       type: String,
       default: '0px',
@@ -104,11 +125,14 @@ export default {
         this.$slots['header-actions']
       )
     },
+    hasActions() {
+      return Array.isArray(this.actions) && this.actions.length > 0
+    },
     showHeaderExtraBeforeTitle() {
-      return this.headerExtraBeforeTitle && Boolean(this.$slots['header-extra'])
+      return this.headerExtraBeforeTitle && (Boolean(this.$slots['header-extra']) || this.hasActions)
     },
     showHeaderExtraAfterTitle() {
-      return !this.headerExtraBeforeTitle && Boolean(this.$slots['header-extra'])
+      return !this.headerExtraBeforeTitle && (Boolean(this.$slots['header-extra']) || this.hasActions)
     },
     resolvedHeaderExtraTop() {
       return this.hasTopSection ? this.headerExtraTop : '0px'

package/src/layout/kTwoColPage.vue

@@ -48,11 +48,19 @@
     </section>
 
     <div
-      v-if="$slots['header-extra']"
+      v-if="$slots['header-extra'] || hasActions"
       class="shrink-0 border-b border-t border-slate-200 bg-slate-50 px-4 backdrop-blur"
     >
-      <div class="mx-auto flex w-full max-w-none items-center">
-        <slot name="header-extra" />
+      <div class="mx-auto w-full max-w-none py-1">
+        <kToolbar
+          v-if="hasActions"
+          :actions="actions"
+          dense
+          variant="plain"
+        />
+        <div v-if="$slots['header-extra']" class="flex items-center">
+          <slot name="header-extra" />
+        </div>
       </div>
     </div>
 
@@ -97,11 +105,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 +123,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>
@@ -135,6 +143,7 @@
 import packageJson from '../../package.json'
 import kButton from '../ui/kButton.vue'
 import kIcon from '../ui/kIcon.vue'
+import kToolbar from '../ui/kToolbar.vue'
 
 const LG_VIEWPORT_QUERY = '(min-width: 1024px)'
 const MAIN_MENU_TOGGLE_EVENT = 'ketekny:two-col-layout-mobile-menu'
@@ -144,7 +153,7 @@ const MOBILE_SWIPE_VERTICAL_TOLERANCE = 48
 
 export default {
   name: 'MultiColPage',
-  components: { kButton, kIcon },
+  components: { kButton, kIcon, kToolbar },
   props: {
     appTitle: {
       type: String,
@@ -162,6 +171,10 @@ export default {
       type: String,
       default: '',
     },
+    actions: {
+      type: Array,
+      default: () => [],
+    },
     sidebarWidth: {
       type: String,
       default: '300px',
@@ -170,6 +183,14 @@ export default {
       type: String,
       default: '',
     },
+    sidebarDense: {
+      type: Boolean,
+      default: false,
+    },
+    sidebarLeftDense: {
+      type: Boolean,
+      default: false,
+    },
     sidebarTitle: {
       type: String,
       default: '',
@@ -182,6 +203,10 @@ export default {
       type: String,
       default: '',
     },
+    sidebarRightDense: {
+      type: Boolean,
+      default: false,
+    },
     sidebarRightTitle: {
       type: String,
       default: '',
@@ -222,12 +247,18 @@ export default {
     hasRightSidebar() {
       return Boolean(this.$slots['sidebar-right'])
     },
+    hasActions() {
+      return Array.isArray(this.actions) && this.actions.length > 0
+    },
     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
     },
@@ -286,6 +317,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 +381,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'

package/src/ui/kCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <article class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+    <header
+      v-if="hasHeader"
+      class="border-b border-slate-200 px-5 py-4"
+    >
+      <slot name="header">
+        <div>
+          <p v-if="title" class="text-sm font-semibold text-slate-900">
+            {{ title }}
+          </p>
+          <p v-if="subtitle" :class="title ? 'mt-1 text-sm text-slate-500' : 'text-sm text-slate-500'">
+            {{ subtitle }}
+          </p>
+        </div>
+      </slot>
+    </header>
+
+    <div class="px-5 py-4">
+      <slot />
+    </div>
+
+    <footer
+      v-if="$slots.footer"
+      class="border-t border-slate-200 px-5 py-4"
+    >
+      <slot name="footer" />
+    </footer>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'kCard',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subtitle: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    hasHeader() {
+      return Boolean(this.$slots.header || this.title || this.subtitle)
+    },
+  },
+}
+</script>