ketekny-ui-kit 1.0.129 → 1.0.130

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.129",
+  "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>
 
@@ -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',
@@ -234,6 +247,9 @@ 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'
     },

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>