@toolbox-web/grid 1.1.2 → 1.3.0

package/lib/plugins/selection/index.js

@@ -1,4 +1,4 @@
-function b(r) {
+function p(r) {
   if (!r) return -1;
   const e = r.getAttribute("data-row");
   if (e) return parseInt(e, 10);
@@ -7,14 +7,14 @@ function b(r) {
   const s = t.parentElement;
   if (!s) return -1;
   const i = s.querySelectorAll(":scope > .data-grid-row");
-  for (let n = 0; n < i.length; n++)
-    if (i[n] === t) return n;
+  for (let l = 0; l < i.length; l++)
+    if (i[l] === t) return l;
   return -1;
 }
-function w(r) {
+function b(r) {
   r && r.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
 }
-const p = {
+const A = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -248,7 +248,7 @@ class y {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...p, ...e };
+    return { ...A, ...e };
   }
   // #region Animation Helpers
   /**
@@ -335,7 +335,7 @@ function u(r) {
     endCol: Math.max(r.startCol, r.endCol)
   };
 }
-function A(r) {
+function v(r) {
   const e = u(r);
   return {
     from: { row: e.startRow, col: e.startCol },
@@ -343,14 +343,14 @@ function A(r) {
   };
 }
 function R(r) {
-  return r.map(A);
+  return r.map(v);
 }
-function v(r, e, t) {
+function S(r, e, t) {
   const s = u(t);
   return r >= s.startRow && r <= s.endRow && e >= s.startCol && e <= s.endCol;
 }
 function m(r, e, t) {
-  return t.some((s) => v(r, e, s));
+  return t.some((s) => S(r, e, s));
 }
 function I(r) {
   const e = [], t = u(r);
@@ -374,7 +374,7 @@ function f(r, e) {
     endCol: e.col
   };
 }
-const x = "@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";
+const x = "@layer tbw-plugins{tbw-grid.selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}tbw-grid[data-has-focus] .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}tbw-grid[data-selection-mode=row] .cell-focus{outline:none}tbw-grid .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}tbw-grid .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}tbw-grid .data-grid-row[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row[data-selectable=false].row-focus{background-color:var(--tbw-color-row-alt)}tbw-grid .data-grid-row>.cell[data-selectable=false]{cursor:not-allowed;opacity:.6}tbw-grid .data-grid-row>.cell[data-selectable=false].selected{background-color:var(--tbw-color-warning-bg, rgba(255, 243, 205, .5))}tbw-grid .tbw-selection-summary{font-size:var(--tbw-font-size-sm, .8125rem);color:var(--tbw-color-fg-muted);white-space:nowrap}}";
 function q(r, e, t) {
   if (r === "cell" && e.selectedCell)
     return {
@@ -438,6 +438,32 @@ class K extends y {
   /** Cell selection state (cell mode) */
   selectedCell = null;
   // #endregion
+  // #region Private Helpers - Selectability
+  /**
+   * Check if a row/cell is selectable.
+   * Returns true if selectable, false if not.
+   */
+  checkSelectable(e, t) {
+    const { isSelectable: s } = this.config;
+    if (!s) return !0;
+    const i = this.rows[e];
+    if (!i) return !1;
+    const l = t !== void 0 ? this.columns[t] : void 0;
+    return s(i, e, l, t);
+  }
+  /**
+   * Check if an entire row is selectable (for row mode).
+   */
+  isRowSelectable(e) {
+    return this.checkSelectable(e);
+  }
+  /**
+   * Check if a cell is selectable (for cell/range modes).
+   */
+  isCellSelectable(e, t) {
+    return this.checkSelectable(e, t);
+  }
+  // #endregion
   // #region Lifecycle
   /** @internal */
   detach() {
@@ -447,37 +473,37 @@ class K extends y {
   // #region Event Handlers
   /** @internal */
   onCellClick(e) {
-    const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: n, triggerOn: o = "click" } = this.config;
-    if (i.type !== o)
+    const { rowIndex: t, colIndex: s, originalEvent: i } = e, { mode: l, triggerOn: n = "click" } = this.config;
+    if (i.type !== n)
       return !1;
-    const c = this.columns[s], a = c && h(c);
-    if (n === "cell")
-      return a || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
-    if (n === "row")
-      return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (n === "range") {
-      if (a)
+    const o = this.columns[s], d = o && h(o);
+    if (l === "cell")
+      return d || !this.isCellSelectable(t, s) || (this.selectedCell = { row: t, col: s }, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
+    if (l === "row")
+      return this.isRowSelectable(t) && (this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender()), !1;
+    if (l === "range") {
+      if (d || !this.isCellSelectable(t, s))
         return !1;
-      const g = i.shiftKey, d = i.ctrlKey || i.metaKey;
-      if (g && this.cellAnchor) {
-        const l = f(this.cellAnchor, { row: t, col: s });
-        d ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
-      } else if (d) {
-        const l = {
+      const a = i.shiftKey, g = i.ctrlKey || i.metaKey;
+      if (a && this.cellAnchor) {
+        const c = f(this.cellAnchor, { row: t, col: s });
+        g ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = c : this.ranges.push(c) : this.ranges = [c], this.activeRange = c;
+      } else if (g) {
+        const c = {
           startRow: t,
           startCol: s,
           endRow: t,
           endCol: s
         };
-        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: s };
+        this.ranges.push(c), this.activeRange = c, this.cellAnchor = { row: t, col: s };
       } else {
-        const l = {
+        const c = {
           startRow: t,
           startCol: s,
           endRow: t,
           endCol: s
         };
-        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: s };
+        this.ranges = [c], this.activeRange = c, this.cellAnchor = { row: t, col: s };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
@@ -490,26 +516,28 @@ class K extends y {
       return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
     if (t === "cell" && i)
       return queueMicrotask(() => {
-        this.selectedCell = { row: this.grid._focusRow, col: this.grid._focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
+        const l = this.grid._focusRow, n = this.grid._focusCol;
+        this.isCellSelectable(l, n) ? this.selectedCell = { row: l, col: n } : this.selectedCell = null, this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
     if (t === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
       return queueMicrotask(() => {
-        this.selected.clear(), this.selected.add(this.grid._focusRow), this.lastSelected = this.grid._focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
+        const l = this.grid._focusRow;
+        this.isRowSelectable(l) ? (this.selected.clear(), this.selected.add(l), this.lastSelected = l) : this.selected.clear(), this.emit("selection-change", this.#e()), this.requestAfterRender();
       }), !1;
     if (t === "range" && i) {
-      const n = e.key === "Tab", o = e.shiftKey && !n;
-      return o && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: o }, queueMicrotask(() => this.requestAfterRender()), !1;
+      const l = e.key === "Tab", n = e.shiftKey && !l;
+      return n && !this.cellAnchor && (this.cellAnchor = { row: this.grid._focusRow, col: this.grid._focusCol }), this.pendingKeyboardUpdate = { shiftKey: n }, queueMicrotask(() => this.requestAfterRender()), !1;
     }
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const n = this.rows.length, o = this.columns.length;
-      if (n > 0 && o > 0) {
-        const c = {
+      const l = this.rows.length, n = this.columns.length;
+      if (l > 0 && n > 0) {
+        const o = {
           startRow: 0,
           startCol: 0,
-          endRow: n - 1,
-          endCol: o - 1
+          endRow: l - 1,
+          endCol: n - 1
         };
-        return this.ranges = [c], this.activeRange = c, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+        return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
       }
     }
     return !1;
@@ -518,18 +546,18 @@ class K extends y {
   onCellMouseDown(e) {
     if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
     const t = this.columns[e.colIndex];
-    if (t && h(t) || e.originalEvent.shiftKey && this.cellAnchor)
+    if (t && h(t) || !this.isCellSelectable(e.rowIndex, e.colIndex) || e.originalEvent.shiftKey && this.cellAnchor)
       return;
     this.isDragging = !0;
     const s = e.rowIndex, i = e.colIndex;
     this.cellAnchor = { row: s, col: i }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
-    const o = {
+    const n = {
       startRow: s,
       startCol: i,
       endRow: s,
       endCol: i
     };
-    return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+    return this.ranges.push(n), this.activeRange = n, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   /** @internal */
   onCellMouseMove(e) {
@@ -537,8 +565,8 @@ class K extends y {
     let t = e.colIndex;
     const s = this.columns[t];
     if (s && h(s)) {
-      const n = this.columns.findIndex((o) => !h(o));
-      n >= 0 && (t = n);
+      const l = this.columns.findIndex((n) => !h(n));
+      l >= 0 && (t = l);
     }
     const i = f(this.cellAnchor, { row: e.rowIndex, col: t });
     return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i), this.activeRange = i, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
@@ -555,29 +583,32 @@ class K extends y {
   #t() {
     const e = this.gridElement;
     if (!e) return;
-    const { mode: t } = this.config;
+    const { mode: t } = this.config, s = !!this.config.isSelectable;
     e.querySelectorAll(".cell").forEach((n) => {
-      n.classList.remove("selected", "top", "bottom", "first", "last");
+      n.classList.remove("selected", "top", "bottom", "first", "last"), s && n.removeAttribute("data-selectable");
     });
-    const i = e.querySelectorAll(".data-grid-row");
-    if (i.forEach((n) => {
-      n.classList.remove("selected", "row-focus");
-    }), t === "row" && (w(e), i.forEach((n) => {
-      const o = n.querySelector(".cell[data-row]"), c = b(o);
-      c >= 0 && this.selected.has(c) && n.classList.add("selected", "row-focus");
-    })), t === "range" && this.ranges.length > 0) {
-      w(e);
+    const l = e.querySelectorAll(".data-grid-row");
+    if (l.forEach((n) => {
+      n.classList.remove("selected", "row-focus"), s && n.removeAttribute("data-selectable");
+    }), t === "row" && (b(e), l.forEach((n) => {
+      const o = n.querySelector(".cell[data-row]"), d = p(o);
+      d >= 0 && (s && !this.isRowSelectable(d) && n.setAttribute("data-selectable", "false"), this.selected.has(d) && n.classList.add("selected", "row-focus"));
+    })), (t === "cell" || t === "range") && s && e.querySelectorAll(".cell[data-row][data-col]").forEach((o) => {
+      const d = parseInt(o.getAttribute("data-row") ?? "-1", 10), a = parseInt(o.getAttribute("data-col") ?? "-1", 10);
+      d >= 0 && a >= 0 && (this.isCellSelectable(d, a) || o.setAttribute("data-selectable", "false"));
+    }), t === "range" && this.ranges.length > 0) {
+      b(e);
       const n = this.activeRange ? u(this.activeRange) : null, o = this.columns.findIndex((a) => !h(a));
       this.columns.length - 1, e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
-        const g = parseInt(a.getAttribute("data-row") ?? "-1", 10), d = parseInt(a.getAttribute("data-col") ?? "-1", 10);
-        if (g >= 0 && d >= 0) {
-          const l = this.columns[d];
-          if (l && h(l))
+        const g = parseInt(a.getAttribute("data-row") ?? "-1", 10), c = parseInt(a.getAttribute("data-col") ?? "-1", 10);
+        if (g >= 0 && c >= 0) {
+          const w = this.columns[c];
+          if (w && h(w))
             return;
-          if (m(g, d, this.ranges) && (a.classList.add("selected"), n)) {
+          if (m(g, c, this.ranges) && (a.classList.add("selected"), n)) {
             g === n.startRow && a.classList.add("top"), g === n.endRow && a.classList.add("bottom");
             const C = Math.max(n.startCol, o);
-            d === C && a.classList.add("first"), d === n.endCol && a.classList.add("last");
+            c === C && a.classList.add("first"), c === n.endCol && a.classList.add("last");
           }
         }
       });
@@ -591,11 +622,11 @@ class K extends y {
     if (this.pendingKeyboardUpdate && s === "range") {
       const { shiftKey: i } = this.pendingKeyboardUpdate;
       this.pendingKeyboardUpdate = null;
-      const n = this.grid._focusRow, o = this.grid._focusCol;
+      const l = this.grid._focusRow, n = this.grid._focusCol;
       if (i && this.cellAnchor) {
-        const c = f(this.cellAnchor, { row: n, col: o });
-        this.ranges = [c], this.activeRange = c;
-      } else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: n, col: o });
+        const o = f(this.cellAnchor, { row: l, col: n });
+        this.ranges = [o], this.activeRange = o;
+      } else i || (this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: n });
       this.emit("selection-change", this.#e());
     }
     this.grid.setAttribute("data-selection-mode", s), t && t.classList.toggle("selecting", this.isDragging), this.#t();