@toolbox-web/grid 0.0.7 → 0.1.1

package/lib/plugins/selection/index.js

@@ -5,7 +5,8 @@ const f = {
   sortDesc: "▼",
   sortNone: "⇅",
   submenuArrow: "▶",
-  dragHandle: "⋮⋮"
+  dragHandle: "⋮⋮",
+  toolPanel: "☰"
 };
 class w {
   /** Plugin version - override in subclass if needed */
@@ -162,7 +163,7 @@ class w {
     console.warn(`[tbw-grid:${this.name}] ${e}`);
   }
 }
-function d(s) {
+function h(s) {
   return {
     startRow: Math.min(s.startRow, s.endRow),
     startCol: Math.min(s.startCol, s.endCol),
@@ -171,37 +172,37 @@ function d(s) {
   };
 }
 function R(s) {
-  const e = d(s);
+  const e = h(s);
   return {
     from: { row: e.startRow, col: e.startCol },
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function h(s) {
+function g(s) {
   return s.map(R);
 }
 function C(s, e, t) {
-  const r = d(t);
+  const r = h(t);
   return s >= r.startRow && s <= r.endRow && e >= r.startCol && e <= r.endCol;
 }
-function g(s, e, t) {
+function u(s, e, t) {
   return t.some((r) => C(s, e, r));
 }
 function m(s) {
-  const e = [], t = d(s);
+  const e = [], t = h(s);
   for (let r = t.startRow; r <= t.endRow; r++)
     for (let n = t.startCol; n <= t.endCol; n++)
       e.push({ row: r, col: n });
   return e;
 }
-function b(s) {
+function A(s) {
   const e = /* @__PURE__ */ new Map();
   for (const t of s)
     for (const r of m(t))
       e.set(`${r.row},${r.col}`, r);
   return [...e.values()];
 }
-function u(s, e) {
+function d(s, e) {
   return {
     startRow: s.row,
     startCol: s.col,
@@ -209,7 +210,8 @@ function u(s, e) {
     endCol: e.col
   };
 }
-function A(s, e, t) {
+const b = ':host .selecting .data-grid-row>.cell{-webkit-user-select:none;user-select:none}:host .data-grid-row.row-focus{background-color:var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%))}:host([data-selection-mode="row"]) .cell-focus{outline:none}:host .data-grid-row>.cell.selected{background-color:var(--tbw-range-selection-bg)}:host .data-grid-row>.cell.selected.top{border-top:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.bottom{border-bottom:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.first{border-left:2px solid var(--tbw-range-border-color)}:host .data-grid-row>.cell.selected.last{border-right:2px solid var(--tbw-range-border-color)}';
+function p(s, e, t) {
   if (s === "cell" && e.selectedCell)
     return {
       mode: s,
@@ -227,7 +229,7 @@ function A(s, e, t) {
     }));
     return { mode: s, ranges: r };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: h(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: g(e.ranges) } : { mode: s, ranges: [] };
 }
 class v extends w {
   name = "selection";
@@ -261,45 +263,68 @@ class v extends w {
     if (o === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     if (o === "range") {
-      const a = n.shiftKey, i = n.ctrlKey || n.metaKey;
-      if (a && this.cellAnchor) {
-        const l = u(this.cellAnchor, { row: t, col: r });
-        i ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
-      } else if (i) {
-        const l = {
+      const c = n.shiftKey, l = n.ctrlKey || n.metaKey;
+      if (c && this.cellAnchor) {
+        const i = d(this.cellAnchor, { row: t, col: r });
+        l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = i : this.ranges.push(i) : this.ranges = [i], this.activeRange = i;
+      } else if (l) {
+        const i = {
           startRow: t,
           startCol: r,
           endRow: t,
           endCol: r
         };
-        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges.push(i), this.activeRange = i, this.cellAnchor = { row: t, col: r };
       } else {
-        const l = {
+        const i = {
           startRow: t,
           startCol: r,
           endRow: t,
           endCol: r
         };
-        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges = [i], this.activeRange = i, this.cellAnchor = { row: t, col: r };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
     return !1;
   }
   onKeyDown(e) {
-    const { mode: t } = this.config;
+    const { mode: t } = this.config, n = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab", "Home", "End", "PageUp", "PageDown"].includes(e.key);
     if (e.key === "Escape")
       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" && n)
+      return queueMicrotask(() => {
+        const o = this.grid;
+        this.selectedCell = { row: o.focusRow, col: o.focusCol }, this.emit("selection-change", this.#e()), this.requestAfterRender();
+      }), !1;
+    if (t === "row" && (e.key === "ArrowUp" || e.key === "ArrowDown"))
+      return queueMicrotask(() => {
+        const o = this.grid;
+        this.selected.clear(), this.selected.add(o.focusRow), this.lastSelected = o.focusRow, this.emit("selection-change", this.#e()), this.requestAfterRender();
+      }), !1;
+    if (t === "range" && n) {
+      const o = e.shiftKey;
+      return queueMicrotask(() => {
+        const c = this.grid, l = c.focusRow, i = c.focusCol;
+        if (o) {
+          this.cellAnchor || (this.cellAnchor = { row: l, col: i });
+          const a = d(this.cellAnchor, { row: l, col: i });
+          this.ranges = [a], this.activeRange = a;
+        } else
+          this.ranges = [], this.activeRange = null, this.cellAnchor = { row: l, col: i };
+        this.emit("selection-change", this.#e()), this.requestAfterRender();
+      }), !1;
+    }
     if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
-      const r = this.rows.length, n = this.columns.length;
-      if (r > 0 && n > 0) {
-        const o = {
+      const o = this.rows.length, c = this.columns.length;
+      if (o > 0 && c > 0) {
+        const l = {
           startRow: 0,
           startCol: 0,
-          endRow: r - 1,
-          endCol: n - 1
+          endRow: o - 1,
+          endCol: c - 1
         };
-        return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+        return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
       }
     }
     return !1;
@@ -320,7 +345,7 @@ class v extends w {
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
-    const t = u(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
+    const t = d(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
     return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseUp(e) {
@@ -341,14 +366,14 @@ class v extends w {
     const n = e.querySelectorAll(".data-grid-row");
     if (n.forEach((o) => {
       o.classList.remove("selected", "row-focus");
-    }), t === "row" && n.forEach((o) => {
-      const a = o.querySelector(".cell[data-row]"), i = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
-      i >= 0 && this.selected.has(i) && (o.classList.add("selected", "row-focus"), o.querySelectorAll(".cell-focus").forEach((l) => l.classList.remove("cell-focus")));
-    }), t === "range" && this.ranges.length > 0) {
-      const o = this.activeRange ? d(this.activeRange) : null;
-      e.querySelectorAll(".cell[data-row][data-col]").forEach((i) => {
-        const l = parseInt(i.getAttribute("data-row") ?? "-1", 10), c = parseInt(i.getAttribute("data-col") ?? "-1", 10);
-        l >= 0 && c >= 0 && g(l, c, this.ranges) && (i.classList.add("selected"), i.classList.remove("cell-focus"), o && (l === o.startRow && i.classList.add("top"), l === o.endRow && i.classList.add("bottom"), c === o.startCol && i.classList.add("first"), c === o.endCol && i.classList.add("last")));
+    }), t === "row" && (e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus")), n.forEach((o) => {
+      const c = o.querySelector(".cell[data-row]"), l = parseInt(c?.getAttribute("data-row") ?? "-1", 10);
+      l >= 0 && this.selected.has(l) && o.classList.add("selected", "row-focus");
+    })), t === "range" && this.ranges.length > 0) {
+      const o = this.activeRange ? h(this.activeRange) : null;
+      e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
+        const i = parseInt(l.getAttribute("data-row") ?? "-1", 10), a = parseInt(l.getAttribute("data-col") ?? "-1", 10);
+        i >= 0 && a >= 0 && u(i, a, this.ranges) && (l.classList.add("selected"), l.classList.remove("cell-focus"), o && (i === o.startRow && l.classList.add("top"), i === o.endRow && l.classList.add("bottom"), a === o.startCol && l.classList.add("first"), a === o.endCol && l.classList.add("last")));
       });
     }
     t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus"));
@@ -383,19 +408,19 @@ class v extends w {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return h(this.ranges);
+    return g(this.ranges);
   }
   /**
    * Get all selected cells across all ranges.
    */
   getSelectedCells() {
-    return b(this.ranges);
+    return A(this.ranges);
   }
   /**
    * Check if a specific cell is in range selection.
    */
   isCellSelected(e, t) {
-    return g(e, t, this.ranges);
+    return u(e, t, this.ranges);
   }
   /**
    * Clear all selection.
@@ -414,12 +439,12 @@ class v extends w {
       endCol: t.to.col
     })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
       mode: this.config.mode,
-      ranges: h(this.ranges)
+      ranges: g(this.ranges)
     }), this.requestAfterRender();
   }
   // ===== Private Helpers =====
   #e() {
-    return A(
+    return p(
       this.config.mode,
       {
         selectedCell: this.selectedCell,
@@ -430,52 +455,20 @@ class v extends w {
     );
   }
   // ===== Styles =====
-  styles = `
-    /* Prevent text selection during range drag */
-    :host .selecting .data-grid-row > .cell {
-      user-select: none;
-    }
-
-    /* Row selection - use accent color for row focus */
-    :host .data-grid-row.row-focus {
-      background-color: var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));
-    }
-
-    /* Disable cell-focus outline in row mode - row is the focus unit */
-    :host([data-selection-mode="row"]) .cell-focus {
-      outline: none;
-    }
-
-    /* Selection cell styles - for range mode */
-    :host .data-grid-row > .cell.selected {
-      background-color: var(--tbw-range-selection-bg);
-    }
-    :host .data-grid-row > .cell.selected.top {
-      border-top: 2px solid var(--tbw-range-border-color);
-    }
-    :host .data-grid-row > .cell.selected.bottom {
-      border-bottom: 2px solid var(--tbw-range-border-color);
-    }
-    :host .data-grid-row > .cell.selected.first {
-      border-left: 2px solid var(--tbw-range-border-color);
-    }
-    :host .data-grid-row > .cell.selected.last {
-      border-right: 2px solid var(--tbw-range-border-color);
-    }
-  `;
+  styles = b;
 }
-function y(s, e, t, r) {
+function q(s, e, t, r) {
   const n = new Set(s.selected);
   let o = s.anchor;
   if (t === "single")
     n.clear(), n.add(e), o = e;
   else if (t === "multiple") {
-    const a = r.ctrlKey || r.metaKey;
+    const c = r.ctrlKey || r.metaKey;
     if (r.shiftKey && s.anchor !== null) {
-      const i = Math.min(s.anchor, e), l = Math.max(s.anchor, e);
-      for (let c = i; c <= l; c++)
-        n.add(c);
-    } else a ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
+      const l = Math.min(s.anchor, e), i = Math.max(s.anchor, e);
+      for (let a = l; a <= i; a++)
+        n.add(a);
+    } else c ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
   }
   return { selected: n, lastSelected: e, anchor: o };
 }
@@ -485,7 +478,7 @@ function S(s) {
     e.add(t);
   return e;
 }
-function I(s, e) {
+function K(s, e) {
   const t = [], r = [];
   for (const n of e)
     s.has(n) || t.push(n);
@@ -495,8 +488,8 @@ function I(s, e) {
 }
 export {
   v as SelectionPlugin,
-  I as computeSelectionDiff,
-  y as handleRowClick,
+  K as computeSelectionDiff,
+  q as handleRowClick,
   S as selectAll
 };
 //# sourceMappingURL=index.js.map