@toolbox-web/grid 0.1.0 → 0.2.1

package/lib/plugins/selection/index.js

@@ -178,31 +178,31 @@ function R(s) {
     to: { row: e.endRow, col: e.endCol }
   };
 }
-function d(s) {
+function g(s) {
   return s.map(R);
 }
 function C(s, e, 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 = 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 });
+    for (let o = t.startCol; o <= t.endCol; o++)
+      e.push({ row: r, col: o });
   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,
@@ -210,7 +210,7 @@ function u(s, e) {
     endCol: e.col
   };
 }
-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)}';
+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 {
@@ -223,15 +223,15 @@ function p(s, e, t) {
       ]
     };
   if (s === "row" && e.selected.size > 0) {
-    const r = [...e.selected].map((n) => ({
-      from: { row: n, col: 0 },
-      to: { row: n, col: t - 1 }
+    const r = [...e.selected].map((o) => ({
+      from: { row: o, col: 0 },
+      to: { row: o, col: t - 1 }
     }));
     return { mode: s, ranges: r };
   }
-  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: d(e.ranges) } : { mode: s, ranges: [] };
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: g(e.ranges) } : { mode: s, ranges: [] };
 }
-class y extends w {
+class v extends w {
   name = "selection";
   version = "1.0.0";
   get defaultConfig() {
@@ -257,49 +257,70 @@ class y extends w {
   }
   // ===== Event Handlers =====
   onCellClick(e) {
-    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: l } = this.config;
-    if (l === "cell")
+    const { rowIndex: t, colIndex: r, originalEvent: o } = e, { mode: n } = this.config;
+    if (n === "cell")
       return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (l === "row")
+    if (n === "row")
       return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
-    if (l === "range") {
-      const a = n.shiftKey, i = n.ctrlKey || n.metaKey;
-      if (a && this.cellAnchor) {
-        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 o = {
+    if (n === "range") {
+      const c = o.shiftKey, l = o.ctrlKey || o.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(o), this.activeRange = o, this.cellAnchor = { row: t, col: r };
+        this.ranges.push(i), this.activeRange = i, this.cellAnchor = { row: t, col: r };
       } else {
-        const o = {
+        const i = {
           startRow: t,
           startCol: r,
           endRow: t,
           endCol: r
         };
-        this.ranges = [o], this.activeRange = o, 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, o = ["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" && o)
+      return queueMicrotask(() => {
+        this.selectedCell = { row: this.grid.focusRow, col: this.grid.focusCol }, 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();
+      }), !1;
+    if (t === "range" && o) {
+      const n = e.shiftKey;
+      return queueMicrotask(() => {
+        const c = this.grid.focusRow, l = this.grid.focusCol;
+        if (n) {
+          this.cellAnchor || (this.cellAnchor = { row: c, col: l });
+          const i = d(this.cellAnchor, { row: c, col: l });
+          this.ranges = [i], this.activeRange = i;
+        } else
+          this.ranges = [], this.activeRange = null, this.cellAnchor = { row: c, col: l };
+        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 n = this.rows.length, c = this.columns.length;
+      if (n > 0 && c > 0) {
         const l = {
           startRow: 0,
           startCol: 0,
-          endRow: r - 1,
-          endCol: n - 1
+          endRow: n - 1,
+          endCol: c - 1
         };
         return this.ranges = [l], this.activeRange = l, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
       }
@@ -312,17 +333,17 @@ class y 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 l = {
+    const n = {
       startRow: t,
       startCol: r,
       endRow: t,
       endCol: r
     };
-    return this.ranges.push(l), this.activeRange = l, 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;
   }
   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) {
@@ -337,23 +358,23 @@ class y extends w {
     const e = this.shadowRoot;
     if (!e) return;
     const { mode: t } = this.config;
-    e.querySelectorAll(".cell").forEach((l) => {
-      l.classList.remove("selected", "top", "bottom", "first", "last");
+    e.querySelectorAll(".cell").forEach((n) => {
+      n.classList.remove("selected", "top", "bottom", "first", "last");
     });
-    const n = e.querySelectorAll(".data-grid-row");
-    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 l = this.activeRange ? h(this.activeRange) : null;
-      e.querySelectorAll(".cell[data-row][data-col]").forEach((i) => {
-        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")));
+    const o = e.querySelectorAll(".data-grid-row");
+    if (o.forEach((n) => {
+      n.classList.remove("selected", "row-focus");
+    }), t === "row" && (e.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus")), o.forEach((n) => {
+      const c = n.querySelector(".cell[data-row]"), l = parseInt(c?.getAttribute("data-row") ?? "-1", 10);
+      l >= 0 && this.selected.has(l) && n.classList.add("selected", "row-focus");
+    })), t === "range" && this.ranges.length > 0) {
+      const n = 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"), n && (i === n.startRow && l.classList.add("top"), i === n.endRow && l.classList.add("bottom"), a === n.startCol && l.classList.add("first"), a === n.endCol && l.classList.add("last")));
       });
     }
-    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((l) => l.classList.remove("cell-focus"));
+    t === "cell" && this.selectedCell && e.querySelectorAll(".cell-focus").forEach((n) => n.classList.remove("cell-focus"));
   }
   afterRender() {
     const e = this.shadowRoot;
@@ -385,19 +406,19 @@ class y extends w {
    * Get all selected cell ranges in public format.
    */
   getRanges() {
-    return d(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.
@@ -416,7 +437,7 @@ class y 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: d(this.ranges)
+      ranges: g(this.ranges)
     }), this.requestAfterRender();
   }
   // ===== Private Helpers =====
@@ -432,41 +453,41 @@ class y extends w {
     );
   }
   // ===== Styles =====
-  styles = A;
+  styles = b;
 }
-function S(s, e, t, r) {
-  const n = new Set(s.selected);
-  let l = s.anchor;
+function q(s, e, t, r) {
+  const o = new Set(s.selected);
+  let n = s.anchor;
   if (t === "single")
-    n.clear(), n.add(e), l = e;
+    o.clear(), o.add(e), n = 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), 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), l = e) : (n.clear(), n.add(e), l = e);
+      const l = Math.min(s.anchor, e), i = Math.max(s.anchor, e);
+      for (let a = l; a <= i; a++)
+        o.add(a);
+    } else c ? (o.has(e) ? o.delete(e) : o.add(e), n = e) : (o.clear(), o.add(e), n = e);
   }
-  return { selected: n, lastSelected: e, anchor: l };
+  return { selected: o, lastSelected: e, anchor: n };
 }
-function I(s) {
+function S(s) {
   const e = /* @__PURE__ */ new Set();
   for (let t = 0; t < s; t++)
     e.add(t);
   return e;
 }
-function q(s, e) {
+function K(s, e) {
   const t = [], r = [];
-  for (const n of e)
-    s.has(n) || t.push(n);
-  for (const n of s)
-    e.has(n) || r.push(n);
+  for (const o of e)
+    s.has(o) || t.push(o);
+  for (const o of s)
+    e.has(o) || r.push(o);
   return { added: t, removed: r };
 }
 export {
-  y as SelectionPlugin,
-  q as computeSelectionDiff,
-  S as handleRowClick,
-  I as selectAll
+  v as SelectionPlugin,
+  K as computeSelectionDiff,
+  q as handleRowClick,
+  S as selectAll
 };
 //# sourceMappingURL=index.js.map