@toolbox-web/grid 0.4.2 → 0.6.0

package/lib/plugins/editing/index.js

@@ -185,10 +185,21 @@ class S {
     return this.grid;
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -239,7 +250,7 @@ class S {
     const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
     if (e === !1 || e === "off") return !1;
     if (e === !0 || e === "on") return !0;
-    const t = this.shadowRoot?.host;
+    const t = this.gridElement;
     return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
   /**
@@ -255,7 +266,7 @@ class S {
    * ```
    */
   get animationDuration() {
-    const e = this.shadowRoot?.host;
+    const e = this.gridElement;
     if (e) {
       const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
       if (!isNaN(i)) return i;
@@ -292,7 +303,8 @@ class S {
   }
   // #endregion
 }
-function L(l) {
+const L = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px}tbw-grid .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}}";
+function k(l) {
   switch (l.type) {
     case "number":
       return (e) => {
@@ -320,14 +332,14 @@ function L(l) {
         i.multi && (t.multiple = !0);
         const s = i.options;
         (typeof s == "function" ? s() : s || []).forEach((r) => {
-          const c = document.createElement("option");
-          c.value = String(r.value), c.textContent = r.label, (i.multi && Array.isArray(e.value) && e.value.includes(r.value) || !i.multi && e.value === r.value) && (c.selected = !0), t.appendChild(c);
+          const a = document.createElement("option");
+          a.value = String(r.value), a.textContent = r.label, (i.multi && Array.isArray(e.value) && e.value.includes(r.value) || !i.multi && e.value === r.value) && (a.selected = !0), t.appendChild(a);
         });
         const o = () => {
           if (i.multi) {
             const r = [];
-            Array.from(t.selectedOptions).forEach((c) => {
-              r.push(c.value);
+            Array.from(t.selectedOptions).forEach((a) => {
+              r.push(a.value);
             }), e.commit(r);
           } else
             e.commit(t.value);
@@ -346,30 +358,31 @@ function L(l) {
   }
 }
 const C = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
-function b(l) {
+function w(l) {
   return !(typeof l != "string" || l === "__proto__" || l === "constructor" || l === "prototype");
 }
-function T(l) {
+function O(l) {
   return (l.__editingCellCount ?? 0) > 0;
 }
-function k(l) {
+function A(l) {
   const e = (l.__editingCellCount ?? 0) + 1;
   l.__editingCellCount = e, l.setAttribute("data-has-editing", "");
 }
-function A(l) {
+function q(l) {
   l.__editingCellCount = 0, l.removeAttribute("data-has-editing");
 }
-function y(l, e) {
+function v(l, e) {
   return l instanceof HTMLInputElement ? l.type === "checkbox" ? l.checked : l.type === "number" ? l.value === "" ? null : Number(l.value) : l.type === "date" ? l.valueAsDate : l.value : e?.type === "number" && l.value !== "" ? Number(l.value) : l.value;
 }
-function q(l, e, t) {
+function T(l, e, t) {
   const i = l.querySelector("input,textarea,select");
   i && (i.addEventListener("blur", () => {
-    t(y(i, e));
-  }), i instanceof HTMLInputElement && i.type === "checkbox" ? i.addEventListener("change", () => t(i.checked)) : i instanceof HTMLSelectElement && i.addEventListener("change", () => t(y(i, e))));
+    t(v(i, e));
+  }), i instanceof HTMLInputElement && i.type === "checkbox" ? i.addEventListener("change", () => t(i.checked)) : i instanceof HTMLSelectElement && i.addEventListener("change", () => t(v(i, e))));
 }
-class O extends S {
+class N extends S {
   name = "editing";
+  styles = L;
   get defaultConfig() {
     return {
       editOn: "click"
@@ -448,9 +461,9 @@ class O extends S {
         const n = t._visibleColumns[s], o = t._rows[i];
         if (n?.editable && n.type === "boolean" && o) {
           const r = n.field;
-          if (b(r)) {
+          if (w(r)) {
             const f = !o[r];
-            return this.#c(i, n, f, o), e.preventDefault(), this.requestRender(), !0;
+            return this.#a(i, n, f, o), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -479,10 +492,10 @@ class O extends S {
       for (const t of this.#n) {
         const [i, s] = t.split(":"), n = parseInt(i, 10), o = parseInt(s, 10), r = e.findRenderedRowElement?.(n);
         if (!r) continue;
-        const c = r.querySelector(`.cell[data-col="${o}"]`);
-        if (!c || c.classList.contains("editing")) continue;
+        const a = r.querySelector(`.cell[data-col="${o}"]`);
+        if (!a || a.classList.contains("editing")) continue;
         const f = e._rows[n], d = e._visibleColumns[o];
-        f && d && this.#a(f, n, d, o, c, !0);
+        f && d && this.#c(f, n, d, o, a, !0);
       }
   }
   /**
@@ -547,7 +560,7 @@ class O extends S {
    * Programmatically begin editing a cell.
    */
   beginCellEdit(e, t) {
-    const i = this.grid, s = i._visibleColumns.findIndex((c) => c.field === t);
+    const i = this.grid, s = i._visibleColumns.findIndex((a) => a.field === t);
     if (s === -1 || !i._visibleColumns[s]?.editable) return;
     const r = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${s}"]`);
     r && this.#f(e, s, r);
@@ -561,18 +574,18 @@ class O extends S {
     const n = t.findRenderedRowElement?.(e);
     if (!n) return;
     const o = t._rows[e];
-    this.#d(e, o), Array.from(n.children).forEach((r, c) => {
-      const f = t._visibleColumns[c];
+    this.#d(e, o), Array.from(n.children).forEach((r, a) => {
+      const f = t._visibleColumns[a];
       if (f?.editable) {
         const d = r;
-        d.classList.contains("editing") || this.#a(o, e, f, c, d, !0);
+        d.classList.contains("editing") || this.#c(o, e, f, a, d, !0);
       }
     }), setTimeout(() => {
       let r = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
       if (r?.classList.contains("editing") || (r = n.querySelector(".cell.editing")), r?.classList.contains("editing")) {
-        const c = r.querySelector(C);
+        const a = r.querySelector(C);
         try {
-          c?.focus({ preventScroll: !0 });
+          a?.focus({ preventScroll: !0 });
         } catch {
         }
       }
@@ -597,7 +610,7 @@ class O extends S {
    */
   #f(e, t, i) {
     const s = this.grid, n = s._rows[e], o = s._visibleColumns[t];
-    !n || !o?.editable || i.classList.contains("editing") || (this.#e !== e && this.#d(e, n), this.#r = t, this.#a(n, e, o, t, i, !1));
+    !n || !o?.editable || i.classList.contains("editing") || (this.#e !== e && this.#d(e, n), this.#r = t, this.#c(n, e, o, t, i, !1));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
@@ -618,15 +631,15 @@ class O extends S {
   #i(e, t) {
     if (this.#e !== e) return;
     const i = this.grid, s = this.#s.get(e), n = i._rows[e], o = i.findRenderedRowElement?.(e);
-    if (!t && o && n && o.querySelectorAll(".cell.editing").forEach((c) => {
-      const f = Number(c.getAttribute("data-col"));
+    if (!t && o && n && o.querySelectorAll(".cell.editing").forEach((a) => {
+      const f = Number(a.getAttribute("data-col"));
       if (isNaN(f)) return;
       const d = i._visibleColumns[f];
       if (!d) return;
-      const p = c.querySelector("input,textarea,select");
-      if (p) {
-        const a = y(p, d);
-        n[d.field] !== a && this.#c(e, d, a, n);
+      const b = a.querySelector("input,textarea,select");
+      if (b) {
+        const c = v(b, d);
+        n[d.field] !== c && this.#a(e, d, c, n);
       }
     }), t && s && n)
       Object.keys(s).forEach((r) => {
@@ -646,15 +659,15 @@ class O extends S {
     for (const r of this.#n)
       r.startsWith(`${e}:`) && this.#n.delete(r);
     o && (o.querySelectorAll(".cell.editing").forEach((r) => {
-      r.classList.remove("editing"), A(r.parentElement);
+      r.classList.remove("editing"), q(r.parentElement);
     }), this.requestRender()), this.#o = !0, o || (this.#u(i), this.#o = !1);
   }
   /**
    * Commit a single cell value change.
    */
-  #c(e, t, i, s) {
+  #a(e, t, i, s) {
     const n = t.field;
-    if (!b(n)) return;
+    if (!w(n)) return;
     const o = s[n];
     if (o === i) return;
     const r = !this.#t.has(e);
@@ -675,58 +688,58 @@ class O extends S {
   /**
    * Inject an editor into a cell.
    */
-  #a(e, t, i, s, n, o) {
+  #c(e, t, i, s, n, o) {
     if (!i.editable || n.classList.contains("editing")) return;
-    const r = b(i.field) ? e[i.field] : void 0;
+    const r = w(i.field) ? e[i.field] : void 0;
     n.classList.add("editing"), this.#n.add(`${t}:${s}`);
-    const c = n.parentElement;
-    c && k(c);
+    const a = n.parentElement;
+    a && A(a);
     let f = !1;
     const d = (h) => {
-      f || this.#e === -1 || this.#c(t, i, h, e);
-    }, p = () => {
-      f = !0, b(i.field) && (e[i.field] = r);
-    }, a = document.createElement("div");
-    a.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(a), a.addEventListener("keydown", (h) => {
-      h.key === "Enter" && (h.stopPropagation(), h.preventDefault(), f = !0, this.#i(t, !1)), h.key === "Escape" && (h.stopPropagation(), h.preventDefault(), p(), this.#i(t, !0));
+      f || this.#e === -1 || this.#a(t, i, h, e);
+    }, b = () => {
+      f = !0, w(i.field) && (e[i.field] = r);
+    }, c = document.createElement("div");
+    c.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(c), c.addEventListener("keydown", (h) => {
+      h.key === "Enter" && (h.stopPropagation(), h.preventDefault(), f = !0, this.#i(t, !1)), h.key === "Escape" && (h.stopPropagation(), h.preventDefault(), b(), this.#i(t, !0));
     });
-    const g = i, v = g.__editorTemplate, u = g.editor || (v ? "template" : L(i)), m = r;
-    if (u === "template" && v)
-      this.#h(a, g, e, r, d, p, o, t);
+    const g = i, E = g.__editorTemplate, u = g.editor || (E ? "template" : k(i)), m = r;
+    if (u === "template" && E)
+      this.#h(c, g, e, r, d, b, o, t);
     else if (typeof u == "string") {
       const h = document.createElement(u);
-      h.value = m, h.addEventListener("change", () => d(h.value)), a.appendChild(h), o || queueMicrotask(() => {
-        a.querySelector(C)?.focus({ preventScroll: !0 });
+      h.value = m, h.addEventListener("change", () => d(h.value)), c.appendChild(h), o || queueMicrotask(() => {
+        c.querySelector(C)?.focus({ preventScroll: !0 });
       });
     } else if (typeof u == "function") {
-      const h = { row: e, value: m, field: i.field, column: i, commit: d, cancel: p }, E = u(h);
-      typeof E == "string" ? (a.innerHTML = E, q(a, i, d)) : E instanceof Node && a.appendChild(E), o || queueMicrotask(() => {
-        a.querySelector(C)?.focus({ preventScroll: !0 });
+      const h = { row: e, value: m, field: i.field, column: i, commit: d, cancel: b }, p = u(h);
+      typeof p == "string" ? (c.innerHTML = p, T(c, i, d)) : p instanceof Node && c.appendChild(p), o || queueMicrotask(() => {
+        c.querySelector(C)?.focus({ preventScroll: !0 });
       });
     } else if (u && typeof u == "object") {
-      const h = this.grid, E = document.createElement("div");
-      E.setAttribute("data-external-editor", ""), E.setAttribute("data-field", i.field), a.appendChild(E);
-      const w = { row: e, value: m, field: i.field, column: i, commit: d, cancel: p };
+      const h = this.grid, p = document.createElement("div");
+      p.setAttribute("data-external-editor", ""), p.setAttribute("data-field", i.field), c.appendChild(p);
+      const y = { row: e, value: m, field: i.field, column: i, commit: d, cancel: b };
       if (u.mount)
         try {
-          u.mount({ placeholder: E, context: w, spec: u });
+          u.mount({ placeholder: p, context: y, spec: u });
         } catch (R) {
           console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, R);
         }
       else
         h.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: E, spec: u, context: w } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: p, spec: u, context: y } })
         );
     }
   }
   /**
    * Render a template-based editor.
    */
-  #h(e, t, i, s, n, o, r, c) {
+  #h(e, t, i, s, n, o, r, a) {
     const f = t.__editorTemplate;
     if (!f) return;
-    const d = f.cloneNode(!0), p = t.__compiledEditor;
-    p ? d.innerHTML = p({
+    const d = f.cloneNode(!0), b = t.__compiledEditor;
+    b ? d.innerHTML = b({
       row: i,
       value: s,
       field: t.field,
@@ -734,24 +747,24 @@ class O extends S {
       commit: n,
       cancel: o
     }) : d.querySelectorAll("*").forEach((g) => {
-      g.childNodes.length === 1 && g.firstChild?.nodeType === Node.TEXT_NODE && (g.textContent = g.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, u) => {
-        if (!b(u)) return "";
+      g.childNodes.length === 1 && g.firstChild?.nodeType === Node.TEXT_NODE && (g.textContent = g.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (E, u) => {
+        if (!w(u)) return "";
         const m = i[u];
         return m == null ? "" : String(m);
       }) || "");
     });
-    const a = d.querySelector(
+    const c = d.querySelector(
       "input,textarea,select"
     );
-    if (a) {
-      a instanceof HTMLInputElement && a.type === "checkbox" ? a.checked = !!s : a.value = String(s ?? "");
+    if (c) {
+      c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : c.value = String(s ?? "");
       let g = !1;
-      a.addEventListener("blur", () => {
-        g || n(y(a, t));
-      }), a.addEventListener("keydown", (v) => {
-        const u = v;
-        u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, n(y(a, t)), this.#i(c, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), o(), this.#i(c, !0));
-      }), a instanceof HTMLInputElement && a.type === "checkbox" && a.addEventListener("change", () => n(a.checked)), r || setTimeout(() => a.focus({ preventScroll: !0 }), 0);
+      c.addEventListener("blur", () => {
+        g || n(v(c, t));
+      }), c.addEventListener("keydown", (E) => {
+        const u = E;
+        u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, n(v(c, t)), this.#i(a, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), o(), this.#i(a, !0));
+      }), c instanceof HTMLInputElement && c.type === "checkbox" && c.addEventListener("change", () => n(c.checked)), r || setTimeout(() => c.focus({ preventScroll: !0 }), 0);
     }
     e.appendChild(d);
   }
@@ -776,10 +789,10 @@ class O extends S {
   // #endregion
 }
 export {
-  O as EditingPlugin,
+  N as EditingPlugin,
   C as FOCUSABLE_EDITOR_SELECTOR,
-  A as clearEditingState,
-  L as defaultEditorFor,
-  T as hasEditingCells
+  q as clearEditingState,
+  k as defaultEditorFor,
+  O as hasEditingCells
 };
 //# sourceMappingURL=index.js.map