ketekny-ui-kit 1.0.35 → 1.0.36

package/package.json

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

package/src/ui/kDatatable.vue

@@ -5,6 +5,7 @@
       'k-datatable-wrapper rounded-lg border border-primary/15',
       disabled ? 'pointer-events-none opacity-60' : '',
     ]"
+    :style="{ '--k-datatable-checkbox-accent': themeColor }"
   >
     <EasyDataTable
       v-bind="$attrs"
@@ -22,10 +23,11 @@
         <div class="k-datatable-select-cell">
           <input
             type="checkbox"
-            class="easy-checkbox"
+            class="k-datatable-checkbox"
             :checked="allSelectableSelected"
             :indeterminate.prop="partiallySelectableSelected"
             :disabled="disabled || pageSelectableKeys.length === 0"
+            @mousedown="captureSelectionInteraction"
             @click.stop
             @change="handleSelectAllChange"
           />
@@ -36,10 +38,12 @@
         <div class="k-datatable-select-cell">
           <input
             type="checkbox"
-            class="easy-checkbox"
+            class="k-datatable-checkbox"
             :checked="isItemSelected(slotItem)"
             :disabled="disabled || !isItemSelectable(slotItem)"
-            @click.stop
+            :title="!isItemSelectable(slotItem) ? 'Row is not selectable' : ''"
+            @mousedown="captureSelectionInteraction"
+            @click.stop="captureSelectionInteraction"
             @change="($event) => handleItemSelectionChange($event, slotItem)"
           />
         </div>
@@ -101,6 +105,8 @@ export default {
       selectedKeys: [],
       selectedKeySet: new Set(),
       lastSelectionAnchorKey: null,
+      pendingShiftSelection: false,
+      isShiftKeyPressed: false,
       _pageSelectableKeys: [],
       keyedItems: [],
       currentItemsByKey: new Map(),
@@ -141,6 +147,16 @@ export default {
     this.rebuildItemCaches();
     this.applyExternalModelValue(this.modelValue);
   },
+  mounted() {
+    window.addEventListener("keydown", this.handleWindowKeydown);
+    window.addEventListener("keyup", this.handleWindowKeyup);
+    window.addEventListener("blur", this.handleWindowBlur);
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.handleWindowKeydown);
+    window.removeEventListener("keyup", this.handleWindowKeyup);
+    window.removeEventListener("blur", this.handleWindowBlur);
+  },
 
   watch: {
     items: {
@@ -173,8 +189,26 @@ export default {
   },
 
   methods: {
+    captureSelectionInteraction(event) {
+      this.pendingShiftSelection = Boolean(event?.shiftKey || this.isShiftKeyPressed);
+    },
+    handleWindowKeydown(event) {
+      if (event?.key === "Shift") {
+        this.isShiftKeyPressed = true;
+      }
+    },
+    handleWindowKeyup(event) {
+      if (event?.key === "Shift") {
+        this.isShiftKeyPressed = false;
+      }
+    },
+    handleWindowBlur() {
+      this.isShiftKeyPressed = false;
+      this.pendingShiftSelection = false;
+    },
     handleSelectAllChange(event) {
       if (this.effectiveSelectionMode !== "multiple" || this.disabled) return;
+      this.pendingShiftSelection = false;
       const shouldSelect = Boolean(event?.target?.checked);
       const nextKeySet = new Set(this.selectedKeys);
 
@@ -199,6 +233,8 @@ export default {
       if (!sourceItem || !this.isItemSelectable(sourceItem)) return;
 
       const shouldSelect = Boolean(event?.target?.checked);
+      const shiftPressed = Boolean(this.pendingShiftSelection || event?.shiftKey || this.isShiftKeyPressed);
+      this.pendingShiftSelection = false;
 
       if (this.selectionMode === "single") {
         this.commitSelectionByKeys(shouldSelect ? [key] : [], {
@@ -208,7 +244,7 @@ export default {
         return;
       }
 
-      if (event?.shiftKey && this.lastSelectionAnchorKey && key !== this.lastSelectionAnchorKey) {
+      if (shiftPressed && this.lastSelectionAnchorKey && key !== this.lastSelectionAnchorKey) {
         const selectableKeySet = new Set(this.selectableKeys);
         const rangeKeys = this.resolveRangeKeys(this.lastSelectionAnchorKey, key).filter((rangeKey) =>
           selectableKeySet.has(rangeKey),
@@ -569,6 +605,70 @@ export default {
   justify-content: center;
 }
 
+.k-datatable-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  border: 1px solid #94a3b8;
+  border-radius: 0.2rem;
+  background-color: #fff;
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+  transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
+}
+
+.k-datatable-checkbox::before {
+  content: "";
+  width: 0.58rem;
+  height: 0.32rem;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-right: 0;
+  transform: rotate(-45deg) scale(0);
+  transform-origin: center;
+  transition: transform 0.12s ease;
+  margin-top: -0.05rem;
+}
+
+.k-datatable-checkbox:checked {
+  background-color: var(--k-datatable-checkbox-accent, #2563eb);
+  border-color: var(--k-datatable-checkbox-accent, #2563eb);
+}
+
+.k-datatable-checkbox:checked::before {
+  transform: rotate(-45deg) scale(1);
+}
+
+.k-datatable-checkbox:indeterminate {
+  background-color: var(--k-datatable-checkbox-accent, #2563eb);
+  border-color: var(--k-datatable-checkbox-accent, #2563eb);
+}
+
+.k-datatable-checkbox:indeterminate::before {
+  width: 0.52rem;
+  height: 0;
+  border: 0;
+  border-top: 2px solid #fff;
+  transform: scale(1);
+  margin-top: 0;
+}
+
+.k-datatable-checkbox:disabled {
+  cursor: not-allowed;
+  background-color: #e5e7eb;
+  border-color: #cbd5e1;
+  opacity: 1;
+}
+
+.k-datatable-checkbox:disabled:checked,
+.k-datatable-checkbox:disabled:indeterminate {
+  background-color: #9ca3af;
+  border-color: #9ca3af;
+}
+
 /* Target the rows-per-page dropdown */
 .customize-table .easy-data-table__footer select {
   background-color: #fff;