@toolbox-web/grid 0.0.7 → 0.1.0

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,24 +172,24 @@ 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 d(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) {
   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 });
@@ -209,7 +210,8 @@ function u(s, e) {
     endCol: e.col
   };
 }
-function A(s, e, t) {
+const A = ':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,9 +229,9 @@ 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: d(e.ranges) } : { mode: s, ranges: [] };
 }
-class v extends w {
+class y extends w {
   name = "selection";
   version = "1.0.0";
   get defaultConfig() {
@@ -255,32 +257,32 @@ class v extends w {
   }
   // ===== Event Handlers =====
   onCellClick(e) {
-    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: o } = this.config;
-    if (o === "cell")
+    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: l } = this.config;
+    if (l === "cell")
       return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (o === "row")
+    if (l === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (o === "range") {
+    if (l === "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;
+        const o = u(this.cellAnchor, { row: t, col: r });
+        i ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = o : this.ranges.push(o) : this.ranges = [o], this.activeRange = o;
       } else if (i) {
-        const l = {
+        const o = {
           startRow: t,
           startCol: r,
           endRow: t,
           endCol: r
         };
-        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges.push(o), this.activeRange = o, this.cellAnchor = { row: t, col: r };
       } else {
-        const l = {
+        const o = {
           startRow: t,
           startCol: r,
           endRow: t,
           endCol: r
         };
-        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: r };
+        this.ranges = [o], this.activeRange = o, this.cellAnchor = { row: t, col: r };
       }
       return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
     }
@@ -293,13 +295,13 @@ class v extends w {
     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 l = {
           startRow: 0,
           startCol: 0,
           endRow: r - 1,
           endCol: n - 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;
@@ -310,13 +312,13 @@ class v extends w {
     this.isDragging = !0;
     const t = e.rowIndex, r = e.colIndex;
     this.cellAnchor = { row: t, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
-    const o = {
+    const l = {
       startRow: t,
       startCol: r,
       endRow: t,
       endCol: r
     };
-    return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+    return this.ranges.push(l), this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
   }
   onCellMouseMove(e) {
     if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
@@ -335,23 +337,23 @@ class v extends w {
     const e = this.shadowRoot;
     if (!e) return;
     const { mode: t } = this.config;
-    e.querySelectorAll(".cell").forEach((o) => {
-      o.classList.remove("selected", "top", "bottom", "first", "last");
+    e.querySelectorAll(".cell").forEach((l) => {
+      l.classList.remove("selected", "top", "bottom", "first", "last");
     });
     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")));
+    if (n.forEach((l) => {
+      l.classList.remove("selected", "row-focus");
+    }), t === "row" && n.forEach((l) => {
+      const a = l.querySelector(".cell[data-row]"), i = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
+      i >= 0 && this.selected.has(i) && (l.classList.add("selected", "row-focus"), l.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus")));
     }), t === "range" && this.ranges.length > 0) {
-      const o = this.activeRange ? d(this.activeRange) : null;
+      const l = this.activeRange ? h(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")));
+        const o = parseInt(i.getAttribute("data-row") ?? "-1", 10), c = parseInt(i.getAttribute("data-col") ?? "-1", 10);
+        o >= 0 && c >= 0 && g(o, c, this.ranges) && (i.classList.add("selected"), i.classList.remove("cell-focus"), l && (o === l.startRow && i.classList.add("top"), o === l.endRow && i.classList.add("bottom"), c === l.startCol && i.classList.add("first"), c === l.endCol && i.classList.add("last")));
       });
     }
-    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((o) => o.classList.remove("cell-focus"));
+    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((l) => l.classList.remove("cell-focus"));
   }
   afterRender() {
     const e = this.shadowRoot;
@@ -383,7 +385,7 @@ class v extends w {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return h(this.ranges);
+    return d(this.ranges);
   }
   /**
    * Get all selected cells across all ranges.
@@ -414,12 +416,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: d(this.ranges)
     }), this.requestAfterRender();
   }
   // ===== Private Helpers =====
   #e() {
-    return A(
+    return p(
       this.config.mode,
       {
         selectedCell: this.selectedCell,
@@ -430,62 +432,30 @@ 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 = A;
 }
-function y(s, e, t, r) {
+function S(s, e, t, r) {
   const n = new Set(s.selected);
-  let o = s.anchor;
+  let l = s.anchor;
   if (t === "single")
-    n.clear(), n.add(e), o = e;
+    n.clear(), n.add(e), l = e;
   else if (t === "multiple") {
     const a = 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++)
+      const i = Math.min(s.anchor, e), o = Math.max(s.anchor, e);
+      for (let c = i; c <= o; c++)
         n.add(c);
-    } else a ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
+    } else a ? (n.has(e) ? n.delete(e) : n.add(e), l = e) : (n.clear(), n.add(e), l = e);
   }
-  return { selected: n, lastSelected: e, anchor: o };
+  return { selected: n, lastSelected: e, anchor: l };
 }
-function S(s) {
+function I(s) {
   const e = /* @__PURE__ */ new Set();
   for (let t = 0; t < s; t++)
     e.add(t);
   return e;
 }
-function I(s, e) {
+function q(s, e) {
   const t = [], r = [];
   for (const n of e)
     s.has(n) || t.push(n);
@@ -494,9 +464,9 @@ function I(s, e) {
   return { added: t, removed: r };
 }
 export {
-  v as SelectionPlugin,
-  I as computeSelectionDiff,
-  y as handleRowClick,
-  S as selectAll
+  y as SelectionPlugin,
+  q as computeSelectionDiff,
+  S as handleRowClick,
+  I as selectAll
 };
 //# sourceMappingURL=index.js.map