ketekny-ui-kit 1.0.132 → 1.0.133

package/package.json

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

package/src/ui/kCard.vue

@@ -1,22 +1,44 @@
 <template>
-  <article class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+  <article class="self-start 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"
+      class="flex items-start justify-between gap-3 border-slate-200 px-5 py-4"
+      :class="{
+        'border-b': !isCollapsed,
+        'group cursor-pointer select-none transition-colors hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/30': collapsible,
+      }"
+      :role="collapsible ? 'button' : undefined"
+      :tabindex="collapsible ? 0 : undefined"
+      :aria-label="collapsible ? (isCollapsed ? 'Expand card body' : 'Collapse card body') : undefined"
+      :aria-expanded="collapsible ? !isCollapsed : undefined"
+      @click="collapsible && toggleCollapsed()"
+      @keydown.enter.prevent="collapsible && toggleCollapsed()"
+      @keydown.space.prevent="collapsible && toggleCollapsed()"
     >
-      <slot name="header">
-        <div>
+      <div class="min-w-0 flex-1">
+        <slot name="header">
           <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>
+        </slot>
+      </div>
+
+      <span
+        v-if="collapsible"
+        class="-mr-1 inline-flex size-8 shrink-0 items-center justify-center text-slate-500 transition-colors group-hover:text-slate-700"
+      >
+        <ChevronDown
+          class="size-5 transition-transform duration-200"
+          :class="{ 'rotate-180': !isCollapsed }"
+          aria-hidden="true"
+        />
+      </span>
     </header>
 
-    <div class="px-5 py-4">
+    <div v-show="!isCollapsed" class="px-5 py-4">
       <slot />
     </div>
 
@@ -30,8 +52,12 @@
 </template>
 
 <script>
+import { ChevronDown } from '@lucide/vue'
+
 export default {
   name: 'kCard',
+  components: { ChevronDown },
+  emits: ['update:collapsed', 'toggle'],
   props: {
     title: {
       type: String,
@@ -41,10 +67,38 @@ export default {
       type: String,
       default: '',
     },
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      internalCollapsed: this.collapsed,
+    }
   },
   computed: {
     hasHeader() {
-      return Boolean(this.$slots.header || this.title || this.subtitle)
+      return Boolean(this.$slots.header || this.title || this.subtitle || this.collapsible)
+    },
+    isCollapsed() {
+      return this.collapsible && this.internalCollapsed
+    },
+  },
+  watch: {
+    collapsed(value) {
+      this.internalCollapsed = value
+    },
+  },
+  methods: {
+    toggleCollapsed() {
+      this.internalCollapsed = !this.internalCollapsed
+      this.$emit('update:collapsed', this.internalCollapsed)
+      this.$emit('toggle', this.internalCollapsed)
     },
   },
 }