ketekny-ui-kit 1.0.27 → 1.0.29

package/package.json

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

package/src/ui/kDatatable.vue

@@ -1,15 +1,18 @@
 <template>
-  <div :class="['k-datatable-wrapper rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
+  <div ref="tableWrapper" :class="['k-datatable-wrapper rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
     <EasyDataTable
       v-bind="$attrs"
       :headers="headers"
       :items="items"
       :search="search"
+      :theme-color="themeColor"
       :show-select="effectiveSelectionMode !== 'none'"
       :single-select="effectiveSelectionMode === 'single'"
       v-if="effectiveSelectionMode !== 'none'"
-      v-model:items-selected="internalSelection"
+      :items-selected="internalSelection"
+      @update:items-selected="handleSelectionUpdate"
       :itemSelectable="itemSelectable"
+      :body-row-class-name="composeBodyRowClassName"
       alternating
       buttons-pagination
       table-class-name="customize-table"
@@ -21,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" 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>
@@ -42,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,
@@ -69,8 +73,20 @@ export default {
   data() {
     return {
       internalSelection: this.normalizeModelValue(this.modelValue),
+      pendingSelectionInteraction: null,
+      lastSelectionAnchor: null,
+      lastSelectionAnchorRowNumber: null,
     };
   },
+  created() {
+    this.currentPageRowsCache = [];
+  },
+  mounted() {
+    this.bindSelectionInteractionListener();
+  },
+  beforeUnmount() {
+    this.unbindSelectionInteractionListener();
+  },
   computed: {
     effectiveSelectionMode() {
       return this.disabled ? "none" : this.selectionMode;
@@ -81,16 +97,183 @@ export default {
     modelValue(val) {
       this.internalSelection = this.normalizeModelValue(val);
     },
-    internalSelection(newVal) {
+  },
+
+  methods: {
+    handleSelectionUpdate(newSelection) {
       if (this.selectionMode === "single") {
-        this.$emit("update:modelValue", newVal[0] || null);
-      } else if (this.selectionMode === "multiple") {
-        this.$emit("update:modelValue", newVal);
+        const nextSelection = Array.isArray(newSelection) ? newSelection : [];
+        this.internalSelection = nextSelection;
+        this.$emit("update:modelValue", nextSelection[0] || null);
+        return;
+      }
+
+      if (this.selectionMode === "multiple") {
+        const oldSelection = Array.isArray(this.internalSelection) ? this.internalSelection : [];
+        const candidateSelection = Array.isArray(newSelection) ? newSelection : [];
+        const nextSelection = this.resolveShiftRangeSelection(candidateSelection, oldSelection);
+        this.internalSelection = nextSelection;
+        this.$emit("update:modelValue", nextSelection);
       }
     },
-  },
+    bindSelectionInteractionListener() {
+      this.$refs.tableWrapper?.addEventListener("click", this.captureSelectionInteraction, true);
+    },
+    unbindSelectionInteractionListener() {
+      this.$refs.tableWrapper?.removeEventListener("click", this.captureSelectionInteraction, true);
+    },
+    captureSelectionInteraction(event) {
+      if (this.selectionMode !== "multiple" || this.disabled || !(event.target instanceof Element)) {
+        return;
+      }
 
-  methods: {
+      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;
+
+      const rowNumber = this.resolveClickedRowNumber(row);
+      if (!rowNumber) return;
+      const clickedItem = this.currentPageRowsCache[rowNumber - 1];
+
+      if (!event.shiftKey && clickedItem) {
+        this.lastSelectionAnchor = clickedItem;
+        this.lastSelectionAnchorRowNumber = rowNumber;
+      }
+
+      if (event.shiftKey && this.lastSelectionAnchor && clickedItem) {
+        const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
+        const targetIndex = this.findItemIndex(clickedItem);
+        if (anchorIndex !== -1 && targetIndex !== -1) {
+          event.preventDefault();
+          event.stopPropagation();
+          const shouldSelectRange = !this.containsItem(this.internalSelection, clickedItem);
+          const nextSelection = this.applyRangeSelection(this.internalSelection, anchorIndex, targetIndex, rowNumber, shouldSelectRange);
+          this.pendingSelectionInteraction = null;
+          this.internalSelection = nextSelection;
+          this.$emit("update:modelValue", nextSelection);
+          return;
+        }
+      }
+
+      this.pendingSelectionInteraction = {
+        shiftKey: event.shiftKey,
+        rowNumber,
+      };
+    },
+    resolveClickedRowNumber(rowElement) {
+      const tbody = rowElement.parentElement;
+      if (!tbody) return null;
+
+      const selectableRows = Array.from(tbody.querySelectorAll("tr")).filter((row) => row.querySelector(".easy-checkbox"));
+      const rowIndex = selectableRows.indexOf(rowElement);
+      return rowIndex === -1 ? null : rowIndex + 1;
+    },
+    composeBodyRowClassName(item, rowNumber) {
+      if (rowNumber === 1) {
+        this.currentPageRowsCache = [];
+      }
+      this.currentPageRowsCache[rowNumber - 1] = this.normalizeItem(item);
+
+      const externalBodyRowClass = this.$attrs["body-row-class-name"] ?? this.$attrs.bodyRowClassName;
+      if (typeof externalBodyRowClass === "function") {
+        return externalBodyRowClass(item, rowNumber);
+      }
+      if (typeof externalBodyRowClass === "string") {
+        return externalBodyRowClass;
+      }
+      return "";
+    },
+    resolveShiftRangeSelection(newSelection, oldSelection = []) {
+      if (this.selectionMode !== "multiple") return newSelection;
+
+      const interaction = this.pendingSelectionInteraction;
+      this.pendingSelectionInteraction = null;
+
+      const toggledItemFromInteraction = interaction?.rowNumber ? this.currentPageRowsCache[interaction.rowNumber - 1] : null;
+      const toggledItem = toggledItemFromInteraction ?? this.getToggledItem(oldSelection, newSelection);
+      if (!toggledItem) return newSelection;
+
+      if (!interaction?.shiftKey || !this.lastSelectionAnchor) {
+        this.lastSelectionAnchor = toggledItem;
+        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
+        return newSelection;
+      }
+
+      const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
+      const targetIndex = this.findItemIndex(toggledItem);
+      if (anchorIndex === -1 || targetIndex === -1) {
+        this.lastSelectionAnchor = toggledItem;
+        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
+        return newSelection;
+      }
+
+      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, interaction.rowNumber);
+      if (!rangeItems.length) return newSelection;
+      const shouldSelectRange = this.containsItem(newSelection, toggledItem);
+      return this.applyRangeSelection(newSelection, anchorIndex, targetIndex, interaction.rowNumber, shouldSelectRange);
+    },
+    applyRangeSelection(baseSelection, anchorIndex, targetIndex, targetRowNumber, shouldSelectRange) {
+      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, targetRowNumber);
+      if (!rangeItems.length) return baseSelection;
+
+      let nextSelection = [...baseSelection];
+      if (shouldSelectRange) {
+        rangeItems.forEach((item) => {
+          if (!this.containsItem(nextSelection, item)) {
+            nextSelection.push(this.normalizeItem(item));
+          }
+        });
+      } else {
+        nextSelection = nextSelection.filter((selectedItem) => !rangeItems.some((item) => this.areItemsEqual(selectedItem, item)));
+      }
+
+      return this.areSelectionsEqual(nextSelection, baseSelection) ? baseSelection : nextSelection;
+    },
+    getRangeItems(anchorIndex, targetIndex, targetRowNumber) {
+      const anchorRowNumber = this.lastSelectionAnchorRowNumber;
+      if (anchorRowNumber && targetRowNumber) {
+        const [start, end] = anchorRowNumber <= targetRowNumber ? [anchorRowNumber, targetRowNumber] : [targetRowNumber, anchorRowNumber];
+        const visibleRange = this.currentPageRowsCache.slice(start - 1, end).filter((item) => item);
+        if (visibleRange.length === end - start + 1) {
+          return visibleRange;
+        }
+      }
+
+      const [start, end] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+      return this.items.slice(start, end + 1);
+    },
+    normalizeItem(item) {
+      if (!item || typeof item !== "object") return item;
+      const normalized = { ...item };
+      delete normalized.checkbox;
+      delete normalized.index;
+      return normalized;
+    },
+    areItemsEqual(left, right) {
+      return JSON.stringify(this.normalizeItem(left)) === JSON.stringify(this.normalizeItem(right));
+    },
+    containsItem(collection, item) {
+      return collection.some((current) => this.areItemsEqual(current, item));
+    },
+    getToggledItem(previousSelection, nextSelection) {
+      const added = nextSelection.filter((item) => !this.containsItem(previousSelection, item));
+      if (added.length === 1) return this.normalizeItem(added[0]);
+
+      const removed = previousSelection.filter((item) => !this.containsItem(nextSelection, item));
+      if (removed.length === 1) return this.normalizeItem(removed[0]);
+
+      return null;
+    },
+    findItemIndex(itemToFind) {
+      return this.items.findIndex((item) => this.areItemsEqual(item, itemToFind));
+    },
+    areSelectionsEqual(first, second) {
+      if (first.length !== second.length) return false;
+      return first.every((item) => this.containsItem(second, item));
+    },
     normalizeModelValue(val) {
       if (this.selectionMode === "none") return [];
       if (this.selectionMode === "single") return val ? [val] : [];
@@ -129,7 +312,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;
@@ -146,7 +329,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);
@@ -157,7 +340,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;
 }