ketekny-ui-kit 1.0.28 → 1.0.30

package/package.json

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

package/src/ui/kDatatable.vue

@@ -5,6 +5,7 @@
       :headers="headers"
       :items="items"
       :search="search"
+      :theme-color="themeColor"
       :show-select="effectiveSelectionMode !== 'none'"
       :single-select="effectiveSelectionMode === 'single'"
       v-if="effectiveSelectionMode !== 'none'"
@@ -23,7 +24,7 @@
     </EasyDataTable>
 
     <!-- Render separate table without v-model when no selection -->
-    <EasyDataTable v-else v-bind="$attrs" :headers="headers" :items="items" :search="search" :show-select="false" :body-row-class-name="composeBodyRowClassName" alternating buttons-pagination table-class-name="customize-table">
+    <EasyDataTable v-else v-bind="$attrs" :headers="headers" :items="items" :search="search" :theme-color="themeColor" :show-select="false" :body-row-class-name="composeBodyRowClassName" alternating buttons-pagination table-class-name="customize-table">
       <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotProps">
         <slot :name="name" v-bind="slotProps" />
       </template>
@@ -44,6 +45,7 @@ export default {
     headers: { type: Array, required: true },
     items: { type: Array, required: true },
     search: { type: String, default: "" },
+    themeColor: { type: String, default: "#2563eb" },
 
     selectionMode: {
       type: String,
@@ -128,9 +130,12 @@ export default {
       const checkbox = event.target.closest(".easy-checkbox");
       if (!checkbox) return;
 
-      // Ignore the header "select all" checkbox.
       const row = checkbox.closest("tbody tr");
-      if (!row) return;
+      if (!row) {
+        // Clear pending row interaction so bulk select doesn't reuse stale row state.
+        this.pendingSelectionInteraction = null;
+        return;
+      }
 
       const rowNumber = this.resolveClickedRowNumber(row);
       if (!rowNumber) return;
@@ -191,12 +196,15 @@ export default {
       this.pendingSelectionInteraction = null;
 
       const toggledItemFromInteraction = interaction?.rowNumber ? this.currentPageRowsCache[interaction.rowNumber - 1] : null;
-      const toggledItem = toggledItemFromInteraction ?? this.getToggledItem(oldSelection, newSelection);
+      const hasInteractionToggle = toggledItemFromInteraction
+        ? this.didItemSelectionChange(toggledItemFromInteraction, oldSelection, newSelection)
+        : false;
+      const toggledItem = hasInteractionToggle ? toggledItemFromInteraction : this.getToggledItem(oldSelection, newSelection);
       if (!toggledItem) return newSelection;
 
-      if (!interaction?.shiftKey || !this.lastSelectionAnchor) {
+      if (!interaction?.shiftKey || !hasInteractionToggle || !this.lastSelectionAnchor) {
         this.lastSelectionAnchor = toggledItem;
-        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
+        this.lastSelectionAnchorRowNumber = hasInteractionToggle ? interaction?.rowNumber ?? null : null;
         return newSelection;
       }
 
@@ -250,12 +258,35 @@ export default {
       delete normalized.index;
       return normalized;
     },
+    extractStableKey(item) {
+      const normalized = this.normalizeItem(item);
+      if (!normalized || typeof normalized !== "object") return null;
+      if (normalized.id != null) return `id:${normalized.id}`;
+      if (normalized.uuid != null) return `uuid:${normalized.uuid}`;
+      if (normalized.hospIncNumber != null) return `hospIncNumber:${normalized.hospIncNumber}`;
+      return null;
+    },
     areItemsEqual(left, right) {
-      return JSON.stringify(this.normalizeItem(left)) === JSON.stringify(this.normalizeItem(right));
+      const leftKey = this.extractStableKey(left);
+      const rightKey = this.extractStableKey(right);
+      if (leftKey != null || rightKey != null) {
+        return leftKey != null && leftKey === rightKey;
+      }
+
+      const normalizedLeft = this.normalizeItem(left);
+      const normalizedRight = this.normalizeItem(right);
+      try {
+        return JSON.stringify(normalizedLeft) === JSON.stringify(normalizedRight);
+      } catch {
+        return normalizedLeft === normalizedRight;
+      }
     },
     containsItem(collection, item) {
       return collection.some((current) => this.areItemsEqual(current, item));
     },
+    didItemSelectionChange(item, previousSelection, nextSelection) {
+      return this.containsItem(previousSelection, item) !== this.containsItem(nextSelection, item);
+    },
     getToggledItem(previousSelection, nextSelection) {
       const added = nextSelection.filter((item) => !this.containsItem(previousSelection, item));
       if (added.length === 1) return this.normalizeItem(added[0]);
@@ -310,7 +341,7 @@ export default {
   --easy-table-body-row-height: 3.2rem;
   --easy-table-body-row-font-size: 12px;
   --easy-table-body-row-hover-font-color: #1f2937;
-  --easy-table-body-row-hover-background-color: #ecfdf3;
+  --easy-table-body-row-hover-background-color: #eff6ff;
   --easy-table-body-item-padding: 0.5rem 0.75rem;
 
   --easy-table-footer-background-color: transparent;
@@ -327,7 +358,7 @@ export default {
 
   --easy-table-scrollbar-track-color: transparent;
   --easy-table-scrollbar-color: transparent;
-  --easy-table-scrollbar-thumb-color: #86efac;
+  --easy-table-scrollbar-thumb-color: #93c5fd;
   --easy-table-scrollbar-corner-color: transparent;
 
   --easy-table-loading-mask-background-color: rgba(255, 255, 255, 0.6);
@@ -338,7 +369,7 @@ export default {
   background-color: #fff; /* white dropdown background */
   color: #1f2937; /* gray-800 text */
   padding: 0.25rem 0.5rem; /* small padding */
-  border: 1px solid #bbf7d0;
+  border: 1px solid #bfdbfe;
   border-radius: 0.25rem;
 }