ketekny-ui-kit 1.0.7 → 1.0.9

package/package.json

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

package/src/ui/kTable.vue

@@ -1,15 +1,17 @@
 <template>
   <div ref="tableWrapper" :class="['w-full', { 'k-table-mobile': isMobileLayout }]">
-    <table :class="['table-custom', `table-custom--${variant}`]">
-      <!-- Styled Thead -->
-      <thead ref="theadRef">
-        <slot name="head"></slot>
-      </thead>
-
-      <!-- Styled Tbody -->
-      <tbody ref="tbodyRef">
-        <slot name="body"></slot>
-      </tbody>
+    <table ref="tableRef" :class="['table-custom', `table-custom--${variant}`]">
+      <template v-if="hasNamedSlots">
+        <thead ref="theadRef">
+          <slot name="head"></slot>
+        </thead>
+        <tbody ref="tbodyRef">
+          <slot name="body"></slot>
+        </tbody>
+      </template>
+      <template v-else>
+        <slot></slot>
+      </template>
     </table>
   </div>
 </template>
@@ -21,7 +23,7 @@ export default {
     variant: {
       type: String,
       default: "card",
-      validator: (value) => ["card", "plain"].includes(value),
+      validator: (value) => ["card", "plain", "flat"].includes(value),
     },
   },
   data() {
@@ -29,6 +31,11 @@ export default {
       isMobileLayout: false,
     };
   },
+  computed: {
+    hasNamedSlots() {
+      return !!(this.$slots.head || this.$slots.body);
+    },
+  },
   mounted() {
     this.$nextTick(() => {
       this.updateLayoutMode();
@@ -39,10 +46,13 @@ export default {
         this.$nextTick(() => this.applyMobileLayout());
       });
 
-      this._observer.observe(this.$refs.tbodyRef, {
-        childList: true,
-        subtree: true,
-      });
+      const tbody = this.getTbodyRef();
+      if (tbody) {
+        this._observer.observe(tbody, {
+          childList: true,
+          subtree: true,
+        });
+      }
 
       this._resizeObserver = new ResizeObserver(() => {
         this.updateLayoutMode();
@@ -61,12 +71,13 @@ export default {
       this.isMobileLayout = wrapper.clientWidth < 640;
     },
     applyMobileLayout() {
-      const thead = this.$refs.theadRef;
+      const thead = this.getTheadRef();
       if (!thead) return;
 
       const headers = Array.from(thead.querySelectorAll("th")).map((th) => th.textContent.trim());
 
-      const tbody = this.$refs.tbodyRef;
+      const tbody = this.getTbodyRef();
+      if (!tbody) return;
       const rows = tbody.querySelectorAll("tr");
 
       rows.forEach((row) => {
@@ -76,6 +87,12 @@ export default {
         });
       });
     },
+    getTheadRef() {
+      return this.$refs.theadRef || this.$refs.tableRef?.querySelector("thead");
+    },
+    getTbodyRef() {
+      return this.$refs.tbodyRef || this.$refs.tableRef?.querySelector("tbody");
+    },
   },
 };
 </script>
@@ -93,6 +110,10 @@ export default {
   @apply bg-transparent border-0 rounded-none shadow-none;
 }
 
+.table-custom--flat {
+  @apply bg-white border border-slate-200 rounded-xl shadow-none;
+}
+
 .table-custom--card th {
   @apply px-6 py-4 text-xl font-semibold text-left text-white bg-primary border-b border-primary;
 }
@@ -101,6 +122,10 @@ export default {
   @apply px-4 py-2 text-sm font-semibold tracking-wide text-left text-slate-700 uppercase bg-transparent border-b border-slate-300;
 }
 
+.table-custom--flat th {
+  @apply px-4 py-2 text-sm font-semibold tracking-wide text-left uppercase text-slate-600 bg-slate-100 border-b border-slate-200 align-middle;
+}
+
 .table-custom--card td {
   @apply h-[4rem] px-6 py-4 text-lg text-slate-800;
 }
@@ -109,6 +134,10 @@ export default {
   @apply h-[3.2rem] px-2 py-2 text-base text-slate-800;
 }
 
+.table-custom--flat td {
+  @apply h-[3.2rem] px-4 py-2 text-base text-slate-900 align-middle;
+}
+
 .table-custom tr {
   @apply transition duration-200 ease-in-out hover:bg-slate-50;
 }

package/src/ui/kToolbar.vue

@@ -5,7 +5,8 @@
     :aria-label="ariaLabel"
     :aria-disabled="disabled.toString()"
     :class="[
-      'k-toolbar relative px-3 md:px-4 py-2.5',
+      'k-toolbar relative w-full',
+      dense ? 'p-0 md:p-0' : 'px-3 md:px-4 py-2.5',
       variant === 'plain' ? 'bg-transparent border-0 rounded-none shadow-none px-0 md:px-0' : 'border border-slate-200 rounded-lg bg-white shadow-sm',
       disabled ? 'pointer-events-none opacity-60' : '',
     ]">
@@ -119,6 +120,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
   variant: {
     type: String,
     default: "card",