@toolbox-web/grid 1.3.0 → 1.3.1

package/lib/plugins/editing/index.js

@@ -1,8 +1,8 @@
-const R = "data-animating", k = {
+const R = "data-animating", A = {
   change: "--tbw-row-change-duration",
   insert: "--tbw-row-insert-duration",
   remove: "--tbw-row-remove-duration"
-}, A = {
+}, T = {
   change: 500,
   insert: 300,
   remove: 200
@@ -11,23 +11,23 @@ function P(s) {
   const e = s.trim().toLowerCase();
   return e.endsWith("ms") ? parseFloat(e) : e.endsWith("s") ? parseFloat(e) * 1e3 : parseFloat(e);
 }
-function T(s, e) {
-  const i = k[e], t = getComputedStyle(s).getPropertyValue(i);
+function I(s, e) {
+  const i = A[e], t = getComputedStyle(s).getPropertyValue(i);
   if (t) {
     const r = P(t);
     if (!isNaN(r) && r > 0)
       return r;
   }
-  return A[e];
+  return T[e];
 }
-function I(s, e, i) {
+function D(s, e, i) {
   s.removeAttribute(R), s.offsetWidth, s.setAttribute(R, e);
-  const t = T(s, e);
+  const t = I(s, e);
   setTimeout(() => {
     s.removeAttribute(R);
   }, t);
 }
-const D = {
+const L = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', O = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -35,7 +35,9 @@ const D = {
   sortNone: "⇅",
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
-  toolPanel: "☰"
+  toolPanel: "☰",
+  filter: L,
+  filterActive: L
 };
 class q {
   /**
@@ -261,7 +263,7 @@ class q {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...D, ...e };
+    return { ...O, ...e };
   }
   // #region Animation Helpers
   /**
@@ -337,8 +339,8 @@ class q {
   }
   // #endregion
 }
-const O = "@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 N(s) {
+const N = "@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 M(s) {
   const e = s.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
@@ -352,7 +354,7 @@ function H(s) {
     }), t;
   };
 }
-function M() {
+function x() {
   return (s) => {
     const e = document.createElement("input");
     return e.type = "checkbox", e.checked = !!s.value, e.addEventListener("change", () => s.commit(e.checked)), e;
@@ -366,14 +368,14 @@ function G(s) {
     }), t;
   };
 }
-function x(s) {
+function $(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("select");
     if (s.multi && (t.multiple = !0), i?.includeEmpty) {
       const o = document.createElement("option");
       o.value = "", o.textContent = i.emptyLabel ?? "", t.appendChild(o);
     }
-    N(s).forEach((o) => {
+    M(s).forEach((o) => {
       const a = document.createElement("option");
       a.value = String(o.value), a.textContent = o.label, (s.multi && Array.isArray(e.value) && e.value.includes(o.value) || !s.multi && e.value === o.value) && (a.selected = !0), t.appendChild(a);
     });
@@ -389,7 +391,7 @@ function x(s) {
     }), t;
   };
 }
-function $(s) {
+function F(s) {
   return (e) => {
     const i = s.editorParams, t = document.createElement("input");
     return t.type = "text", t.value = e.value != null ? String(e.value) : "", i?.maxLength !== void 0 && (t.maxLength = i.maxLength), i?.pattern && (t.pattern = i.pattern), i?.placeholder && (t.placeholder = i.placeholder), t.addEventListener("blur", () => e.commit(t.value)), t.addEventListener("keydown", (r) => {
@@ -397,18 +399,18 @@ function $(s) {
     }), t;
   };
 }
-function F(s) {
+function z(s) {
   switch (s.type) {
     case "number":
       return H(s);
     case "boolean":
-      return M();
+      return x();
     case "date":
       return G(s);
     case "select":
-      return x(s);
-    default:
       return $(s);
+    default:
+      return F(s);
   }
 }
 const _ = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
@@ -426,28 +428,28 @@ function B(s, e) {
       return n.editor;
   }
 }
-function E(s) {
+function v(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function z(s) {
+function U(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function U(s) {
+function j(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
-function v(s, e) {
+function E(s, e) {
   return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? s.valueAsDate : s.value : e?.type === "number" && s.value !== "" ? Number(s.value) : s.value;
 }
-function L(s) {
+function k(s) {
 }
-function j(s, e, i) {
+function V(s, e, i) {
   const t = s.querySelector("input,textarea,select");
   t && (t.addEventListener("blur", () => {
-    i(v(t, e));
-  }), t instanceof HTMLInputElement && t.type === "checkbox" ? t.addEventListener("change", () => i(t.checked)) : t instanceof HTMLSelectElement && t.addEventListener("change", () => i(v(t, e))));
+    i(E(t, e));
+  }), t instanceof HTMLInputElement && t.type === "checkbox" ? t.addEventListener("change", () => i(t.checked)) : t instanceof HTMLSelectElement && t.addEventListener("change", () => i(E(t, e))));
 }
-class V extends q {
+class W extends q {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -475,7 +477,7 @@ class V extends q {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = O;
+  styles = N;
   /** @internal */
   get defaultConfig() {
     return {
@@ -559,7 +561,7 @@ class V extends q {
         const n = i._visibleColumns[r], o = i._rows[t];
         if (n?.editable && n.type === "boolean" && o) {
           const a = n.field;
-          if (E(a)) {
+          if (v(a)) {
             const c = !o[a];
             return this.#l(t, n, c, o), e.preventDefault(), this.requestRender(), !0;
           }
@@ -816,7 +818,7 @@ class V extends q {
       if (!g) return;
       const d = c.querySelector("input,textarea,select");
       if (d) {
-        const h = v(d, g);
+        const h = E(d, g);
         n[g.field] !== h && this.#l(e, g, h, n);
       }
     }), i && r && n)
@@ -838,7 +840,7 @@ class V extends q {
     for (const l of this.#n)
       l.startsWith(`${e}:`) && this.#n.delete(l);
     o && (o.querySelectorAll(".cell.editing").forEach((l) => {
-      l.classList.remove("editing"), U(l.parentElement);
+      l.classList.remove("editing"), j(l.parentElement);
     }), this.requestRender()), this.#o = !0, o || (this.#u(t), this.#o = !1);
   }
   /**
@@ -847,7 +849,7 @@ class V extends q {
    */
   #l(e, i, t, r) {
     const n = i.field;
-    if (!E(n)) return;
+    if (!v(n)) return;
     const o = r[n];
     if (o === t) return;
     const a = this.grid;
@@ -856,7 +858,7 @@ class V extends q {
       l = this.grid.getRowId(r);
     } catch {
     }
-    const c = l ? !this.#t.has(l) : !0, f = l ? (h) => this.grid.updateRow(l, h, "cascade") : L;
+    const c = l ? !this.#t.has(l) : !0, f = l ? (h) => this.grid.updateRow(l, h, "cascade") : k;
     if (this.emitCancelable("cell-commit", {
       row: r,
       rowId: l ?? "",
@@ -871,7 +873,7 @@ class V extends q {
     })) return;
     r[n] = t, l && this.#t.add(l), this.#a();
     const d = a.findRenderedRowElement?.(e);
-    d && (d.classList.add("changed"), I(d, "change"));
+    d && (d.classList.add("changed"), D(d, "change"));
   }
   /**
    * Inject an editor into a cell.
@@ -883,20 +885,20 @@ class V extends q {
       a = this.grid.getRowId(e);
     } catch {
     }
-    const l = a ? (u) => this.grid.updateRow(a, u, "cascade") : L, c = E(t.field) ? e[t.field] : void 0;
+    const l = a ? (u) => this.grid.updateRow(a, u, "cascade") : k, c = v(t.field) ? e[t.field] : void 0;
     n.classList.add("editing"), this.#n.add(`${i}:${r}`);
     const f = n.parentElement;
-    f && z(f);
+    f && U(f);
     let g = !1;
     const d = (u) => {
       g || this.#e === -1 || this.#l(i, t, u, e);
     }, h = () => {
-      g = !0, E(t.field) && (e[t.field] = c);
+      g = !0, v(t.field) && (e[t.field] = c);
     }, p = document.createElement("div");
     p.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(p), p.addEventListener("keydown", (u) => {
       u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, this.#i(i, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), h(), this.#i(i, !0));
     });
-    const m = t, y = m.__editorTemplate, b = B(this.grid, m) ?? F(t), C = c;
+    const m = t, y = m.__editorTemplate, b = B(this.grid, m) ?? z(t), C = c;
     if (b === "template" && y)
       this.#h(p, m, e, c, d, h, o, i);
     else if (typeof b == "string") {
@@ -915,7 +917,7 @@ class V extends q {
         cancel: h,
         updateRow: l
       }, w = b(u);
-      typeof w == "string" ? (p.innerHTML = w, j(p, t, d)) : w instanceof Node && p.appendChild(w), o || queueMicrotask(() => {
+      typeof w == "string" ? (p.innerHTML = w, V(p, t, d)) : w instanceof Node && p.appendChild(w), o || queueMicrotask(() => {
         p.querySelector(_)?.focus({ preventScroll: !0 });
       });
     } else if (b && typeof b == "object") {
@@ -959,7 +961,7 @@ class V extends q {
       cancel: o
     }) : f.querySelectorAll("*").forEach((h) => {
       h.childNodes.length === 1 && h.firstChild?.nodeType === Node.TEXT_NODE && (h.textContent = h.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, m) => {
-        if (!E(m)) return "";
+        if (!v(m)) return "";
         const y = t[m];
         return y == null ? "" : String(y);
       }) || "");
@@ -971,10 +973,10 @@ class V extends q {
       d instanceof HTMLInputElement && d.type === "checkbox" ? d.checked = !!r : d.value = String(r ?? "");
       let h = !1;
       d.addEventListener("blur", () => {
-        h || n(v(d, i));
+        h || n(E(d, i));
       }), d.addEventListener("keydown", (p) => {
         const m = p;
-        m.key === "Enter" && (m.stopPropagation(), m.preventDefault(), h = !0, n(v(d, i)), this.#i(l, !1)), m.key === "Escape" && (m.stopPropagation(), m.preventDefault(), o(), this.#i(l, !0));
+        m.key === "Enter" && (m.stopPropagation(), m.preventDefault(), h = !0, n(E(d, i)), this.#i(l, !1)), m.key === "Escape" && (m.stopPropagation(), m.preventDefault(), o(), this.#i(l, !0));
       }), d instanceof HTMLInputElement && d.type === "checkbox" && d.addEventListener("change", () => n(d.checked)), a || setTimeout(() => d.focus({ preventScroll: !0 }), 0);
     }
     e.appendChild(f);
@@ -1000,7 +1002,7 @@ class V extends q {
   // #endregion
 }
 export {
-  V as EditingPlugin,
-  F as defaultEditorFor
+  W as EditingPlugin,
+  z as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map