@toolbox-web/grid-vue 0.4.0 → 0.4.2

package/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as y, provide as L, inject as F, createApp as f, createVNode as k, ref as R, computed as ne, onMounted as T, onBeforeUnmount as q, watch as j, createElementBlock as O, openBlock as P, renderSlot as U, useSlots as S, h as C } from "vue";
+import { defineComponent as y, provide as L, inject as F, createApp as f, createVNode as k, ref as R, computed as ne, onMounted as T, onBeforeUnmount as q, watch as j, createElementBlock as O, openBlock as P, renderSlot as U, useSlots as B, h as C } from "vue";
 import { DataGridElement as re } from "@toolbox-web/grid";
 import { c as oe } from "./chunks/feature-registry-BgEOysSJ.js";
-import { a as Ve, g as ke, b as Le, i as Fe, r as Me } from "./chunks/feature-registry-BgEOysSJ.js";
+import { a as Se, g as ke, b as Le, i as Fe, r as Me } from "./chunks/feature-registry-BgEOysSJ.js";
 import { G as H } from "./chunks/use-grid-DwjXrO19.js";
 import { u as Ae } from "./chunks/use-grid-DwjXrO19.js";
 const K = /* @__PURE__ */ Symbol("grid-icons");
@@ -45,32 +45,32 @@ const de = y({
   }
 }), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new Map();
 function le(i, e) {
-  const n = i.getAttribute("field"), t = v.get(i) ?? {};
-  if (t.renderer = e, v.set(i, t), n) {
-    const r = w.get(n) ?? {};
-    r.renderer = e, w.set(n, r);
+  const t = i.getAttribute("field"), n = v.get(i) ?? {};
+  if (n.renderer = e, v.set(i, n), t) {
+    const r = w.get(t) ?? {};
+    r.renderer = e, w.set(t, r);
   }
 }
 function ae(i, e) {
-  const n = i.getAttribute("field"), t = v.get(i) ?? {};
-  if (t.editor = e, v.set(i, t), n) {
-    const r = w.get(n) ?? {};
-    r.editor = e, w.set(n, r);
+  const t = i.getAttribute("field"), n = v.get(i) ?? {};
+  if (n.editor = e, v.set(i, n), t) {
+    const r = w.get(t) ?? {};
+    r.editor = e, w.set(t, r);
   }
 }
 function ce(i) {
   let e = v.get(i)?.renderer;
   if (!e) {
-    const n = i.getAttribute("field");
-    n && (e = w.get(n)?.renderer);
+    const t = i.getAttribute("field");
+    t && (e = w.get(t)?.renderer);
   }
   return e;
 }
 function ue(i) {
   let e = v.get(i)?.editor;
   if (!e) {
-    const n = i.getAttribute("field");
-    n && (e = w.get(n)?.editor);
+    const t = i.getAttribute("field");
+    t && (e = w.get(t)?.editor);
   }
   return e;
 }
@@ -84,17 +84,19 @@ function G(i) {
   if (typeof i == "function") {
     const e = Function.prototype.toString.call(i);
     if (e.startsWith("class ") || e.startsWith("class{")) return !0;
-    const n = i;
-    if ("__name" in n || typeof n.setup == "function") return !0;
+    const t = i;
+    if ("__name" in t || typeof t.setup == "function") return !0;
   }
   return !1;
 }
-function B(i) {
+function V(i) {
   return typeof i == "function" && !G(i);
 }
 const E = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
 class fe {
   mountedViews = [];
+  /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
+  editorViews = [];
   typeDefaults = null;
   // #region Config Processing
   /**
@@ -122,8 +124,8 @@ class fe {
    * @returns Processed config with DOM-returning functions
    */
   processGridConfig(e) {
-    const n = { ...e };
-    return e.columns && (n.columns = e.columns.map((t) => this.processColumn(t))), e.typeDefaults && (n.typeDefaults = this.processTypeDefaults(e.typeDefaults)), n;
+    const t = { ...e };
+    return e.columns && (t.columns = e.columns.map((n) => this.processColumn(n))), e.typeDefaults && (t.typeDefaults = this.processTypeDefaults(e.typeDefaults)), t;
   }
   /**
    * Processes typeDefaults, converting Vue component/VNode references
@@ -133,20 +135,20 @@ class fe {
    * @returns Processed TypeDefault record
    */
   processTypeDefaults(e) {
-    const n = {};
-    for (const [t, r] of Object.entries(e)) {
+    const t = {};
+    for (const [n, r] of Object.entries(e)) {
       const s = {
         editorParams: r.editorParams
       };
-      r.renderer && (G(r.renderer) ? s.renderer = this.createConfigComponentRenderer(r.renderer) : B(r.renderer) && (s.renderer = this.createTypeRenderer(
+      r.renderer && (G(r.renderer) ? s.renderer = this.createConfigComponentRenderer(r.renderer) : V(r.renderer) && (s.renderer = this.createTypeRenderer(
         r.renderer
       ))), r.editor && (G(r.editor) ? s.editor = this.createConfigComponentEditor(
         r.editor
-      ) : B(r.editor) && (s.editor = this.createTypeEditor(
+      ) : V(r.editor) && (s.editor = this.createTypeEditor(
         r.editor
-      ))), r.filterPanelRenderer && (s.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer)), n[t] = s;
+      ))), r.filterPanelRenderer && (s.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer)), t[n] = s;
     }
-    return n;
+    return t;
   }
   /**
    * Processes a single column configuration, converting Vue component references
@@ -156,26 +158,26 @@ class fe {
    * @returns Processed ColumnConfig with DOM-returning functions
    */
   processColumn(e) {
-    const n = { ...e };
+    const t = { ...e };
     if (e.renderer && !e.renderer[E]) {
       if (G(e.renderer)) {
-        const t = this.createConfigComponentRenderer(e.renderer);
-        t[E] = !0, n.renderer = t;
-      } else if (B(e.renderer)) {
-        const t = this.createConfigVNodeRenderer(e.renderer);
-        t[E] = !0, n.renderer = t;
+        const n = this.createConfigComponentRenderer(e.renderer);
+        n[E] = !0, t.renderer = n;
+      } else if (V(e.renderer)) {
+        const n = this.createConfigVNodeRenderer(e.renderer);
+        n[E] = !0, t.renderer = n;
       }
     }
     if (e.editor && !e.editor[E]) {
       if (G(e.editor)) {
-        const t = this.createConfigComponentEditor(e.editor);
-        t[E] = !0, n.editor = t;
-      } else if (B(e.editor)) {
-        const t = this.createConfigVNodeEditor(e.editor);
-        t[E] = !0, n.editor = t;
+        const n = this.createConfigComponentEditor(e.editor);
+        n[E] = !0, t.editor = n;
+      } else if (V(e.editor)) {
+        const n = this.createConfigVNodeEditor(e.editor);
+        n[E] = !0, t.editor = n;
       }
     }
-    return n;
+    return t;
   }
   /**
    * Creates a DOM-returning renderer from a Vue component class.
@@ -183,22 +185,22 @@ class fe {
    * @internal
    */
   createConfigComponentRenderer(e) {
-    const n = /* @__PURE__ */ new WeakMap();
-    return (t) => {
-      const r = t.cellEl;
+    const t = /* @__PURE__ */ new WeakMap();
+    return (n) => {
+      const r = n.cellEl;
       if (r) {
-        const a = n.get(r);
+        const a = t.get(r);
         if (a)
-          return a.update(t), a.container;
+          return a.update(n), a.container;
         const c = document.createElement("div");
         c.className = "vue-cell-renderer", c.style.display = "contents";
-        let u = t;
+        let u = n;
         const g = e, h = f({
           render() {
             return k(g, { ...u });
           }
         });
-        return h.mount(c), n.set(r, {
+        return h.mount(c), t.set(r, {
           app: h,
           container: c,
           update: (_) => {
@@ -210,7 +212,7 @@ class fe {
       s.className = "vue-cell-renderer", s.style.display = "contents";
       const d = e, l = f({
         render() {
-          return k(d, { ...t });
+          return k(d, { ...n });
         }
       });
       return l.mount(s), this.mountedViews.push({ app: l, container: s }), s;
@@ -222,22 +224,22 @@ class fe {
    * @internal
    */
   createConfigVNodeRenderer(e) {
-    const n = /* @__PURE__ */ new WeakMap();
-    return (t) => {
-      const r = t.cellEl;
+    const t = /* @__PURE__ */ new WeakMap();
+    return (n) => {
+      const r = n.cellEl;
       if (r) {
-        const l = n.get(r);
+        const l = t.get(r);
         if (l)
-          return l.update(t), l.container;
+          return l.update(n), l.container;
         const a = document.createElement("div");
         a.className = "vue-cell-renderer", a.style.display = "contents";
-        let c = t;
+        let c = n;
         const u = f({
           render() {
             return e(c);
           }
         });
-        return u.mount(a), n.set(r, {
+        return u.mount(a), t.set(r, {
           app: u,
           container: a,
           update: (g) => {
@@ -249,7 +251,7 @@ class fe {
       s.className = "vue-cell-renderer", s.style.display = "contents";
       const d = f({
         render() {
-          return e(t);
+          return e(n);
         }
       });
       return d.mount(s), this.mountedViews.push({ app: d, container: s }), s;
@@ -261,15 +263,15 @@ class fe {
    * @internal
    */
   createConfigComponentEditor(e) {
-    return (n) => {
-      const t = document.createElement("div");
-      t.className = "vue-cell-editor", t.style.display = "contents";
+    return (t) => {
+      const n = document.createElement("div");
+      n.className = "vue-cell-editor", n.style.display = "contents";
       const r = e, s = f({
         render() {
-          return k(r, { ...n });
+          return k(r, { ...t });
         }
       });
-      return s.mount(t), this.mountedViews.push({ app: s, container: t }), t;
+      return s.mount(n), this.editorViews.push({ app: s, container: n }), n;
     };
   }
   /**
@@ -278,15 +280,15 @@ class fe {
    * @internal
    */
   createConfigVNodeEditor(e) {
-    return (n) => {
-      const t = document.createElement("div");
-      t.className = "vue-cell-editor", t.style.display = "contents";
+    return (t) => {
+      const n = document.createElement("div");
+      n.className = "vue-cell-editor", n.style.display = "contents";
       const r = f({
         render() {
-          return e(n);
+          return e(t);
         }
       });
-      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
+      return r.mount(n), this.editorViews.push({ app: r, container: n }), n;
     };
   }
   // #endregion
@@ -304,28 +306,28 @@ class fe {
    * Checks if a renderer or editor is registered for this element.
    */
   canHandle(e) {
-    const n = e.getAttribute("field");
-    let t = v.get(e);
-    if (!t && n) {
-      const d = w.get(n);
-      d && (d.renderer || d.editor) && (t = d, v.set(e, t));
+    const t = e.getAttribute("field");
+    let n = v.get(e);
+    if (!n && t) {
+      const d = w.get(t);
+      d && (d.renderer || d.editor) && (n = d, v.set(e, n));
     }
-    const r = t?.renderer !== void 0, s = t?.editor !== void 0;
-    return t !== void 0 && (r || s);
+    const r = n?.renderer !== void 0, s = n?.editor !== void 0;
+    return n !== void 0 && (r || s);
   }
   /**
    * Creates a view renderer function that renders a Vue component
    * and returns its container DOM element.
    */
   createRenderer(e) {
-    const n = ce(e);
-    if (!n)
+    const t = ce(e);
+    if (!t)
       return;
-    const t = /* @__PURE__ */ new WeakMap();
+    const n = /* @__PURE__ */ new WeakMap();
     return (r) => {
       const s = r.cellEl;
       if (s) {
-        const a = t.get(s);
+        const a = n.get(s);
         if (a)
           return a.update(r), a.container;
         const c = document.createElement("div");
@@ -333,10 +335,10 @@ class fe {
         let u = r;
         const g = f({
           render() {
-            return n(u);
+            return t(u);
           }
         });
-        return g.mount(c), t.set(s, {
+        return g.mount(c), n.set(s, {
           app: g,
           container: c,
           update: (h) => {
@@ -348,7 +350,7 @@ class fe {
       d.className = "vue-cell-renderer", d.style.display = "contents";
       const l = f({
         render() {
-          return n(r);
+          return t(r);
         }
       });
       return l.mount(d), this.mountedViews.push({ app: l, container: d }), d;
@@ -359,17 +361,17 @@ class fe {
    * Returns a function that creates the editor DOM element.
    */
   createEditor(e) {
-    const n = ue(e);
-    if (n)
-      return (t) => {
+    const t = ue(e);
+    if (t)
+      return (n) => {
         const r = document.createElement("div");
         r.className = "vue-cell-editor", r.style.display = "contents";
         const s = f({
           render() {
-            return n(t);
+            return t(n);
           }
         });
-        return s.mount(r), this.mountedViews.push({ app: s, container: r }), r;
+        return s.mount(r), this.editorViews.push({ app: s, container: r }), r;
       };
   }
   /**
@@ -377,11 +379,11 @@ class fe {
    * Parses the <tbw-grid-detail> element and returns a Vue-based renderer.
    */
   parseDetailElement(e) {
-    const n = e.closest("tbw-grid");
-    if (!n) return;
-    const t = n.querySelector("tbw-grid-detail");
+    const t = e.closest("tbw-grid");
     if (!t) return;
-    const r = Q.get(t);
+    const n = t.querySelector("tbw-grid-detail");
+    if (!n) return;
+    const r = Q.get(n);
     if (r)
       return (s, d) => {
         const l = document.createElement("div");
@@ -403,11 +405,11 @@ class fe {
    * Parses the <tbw-grid-responsive-card> element and returns a Vue-based renderer.
    */
   parseResponsiveCardElement(e) {
-    const n = e.closest("tbw-grid");
-    if (!n) return;
-    const t = n.querySelector("tbw-grid-responsive-card");
+    const t = e.closest("tbw-grid");
     if (!t) return;
-    const r = X.get(t);
+    const n = t.querySelector("tbw-grid-responsive-card");
+    if (!n) return;
+    const r = X.get(n);
     if (r)
       return (s, d) => {
         const l = document.createElement("div");
@@ -456,28 +458,28 @@ class fe {
   getTypeDefault(e) {
     if (!this.typeDefaults)
       return;
-    const n = this.typeDefaults[e];
-    if (!n)
+    const t = this.typeDefaults[e];
+    if (!t)
       return;
-    const t = {
-      editorParams: n.editorParams
+    const n = {
+      editorParams: t.editorParams
     };
-    return n.renderer && (t.renderer = this.createTypeRenderer(n.renderer)), n.editor && (t.editor = this.createTypeEditor(n.editor)), n.filterPanelRenderer && (t.filterPanelRenderer = this.createFilterPanelRenderer(n.filterPanelRenderer)), t;
+    return t.renderer && (n.renderer = this.createTypeRenderer(t.renderer)), t.editor && (n.editor = this.createTypeEditor(t.editor)), t.filterPanelRenderer && (n.filterPanelRenderer = this.createFilterPanelRenderer(t.filterPanelRenderer)), n;
   }
   /**
    * Creates a renderer function from a Vue render function for type defaults.
    * @internal
    */
   createTypeRenderer(e) {
-    return (n) => {
-      const t = document.createElement("span");
-      t.style.display = "contents";
+    return (t) => {
+      const n = document.createElement("span");
+      n.style.display = "contents";
       const r = f({
         render() {
-          return e(n);
+          return e(t);
         }
       });
-      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
+      return r.mount(n), this.mountedViews.push({ app: r, container: n }), n;
     };
   }
   /**
@@ -485,15 +487,15 @@ class fe {
    * @internal
    */
   createTypeEditor(e) {
-    return (n) => {
-      const t = document.createElement("span");
-      t.style.display = "contents";
+    return (t) => {
+      const n = document.createElement("span");
+      n.style.display = "contents";
       const r = f({
         render() {
-          return e(n);
+          return e(t);
         }
       });
-      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
+      return r.mount(n), this.editorViews.push({ app: r, container: n }), n;
     };
   }
   /**
@@ -504,15 +506,15 @@ class fe {
    * @internal
    */
   createFilterPanelRenderer(e) {
-    return (n, t) => {
+    return (t, n) => {
       const r = document.createElement("div");
       r.style.display = "contents";
       const s = f({
         render() {
-          return e(t);
+          return e(n);
         }
       });
-      s.mount(r), this.mountedViews.push({ app: s, container: r }), n.appendChild(r);
+      s.mount(r), this.mountedViews.push({ app: s, container: r }), t.appendChild(r);
     };
   }
   // #endregion
@@ -520,12 +522,34 @@ class fe {
    * Cleanup all mounted Vue apps.
    */
   cleanup() {
-    for (const { app: e, container: n } of this.mountedViews)
+    for (const { app: e, container: t } of this.mountedViews)
       try {
-        e.unmount(), n.remove();
+        e.unmount(), t.remove();
       } catch {
       }
     this.mountedViews = [];
+    for (const { app: e, container: t } of this.editorViews)
+      try {
+        e.unmount(), t.remove();
+      } catch {
+      }
+    this.editorViews = [];
+  }
+  /**
+   * Called when a cell's content is about to be wiped.
+   * Destroys editor Vue apps whose container is inside the cell.
+   */
+  releaseCell(e) {
+    for (let t = this.editorViews.length - 1; t >= 0; t--) {
+      const { app: n, container: r } = this.editorViews[t];
+      if (e.contains(r)) {
+        try {
+          n.unmount(), r.remove();
+        } catch {
+        }
+        this.editorViews.splice(t, 1);
+      }
+    }
   }
 }
 const pe = fe, Re = /* @__PURE__ */ y({
@@ -671,13 +695,13 @@ const pe = fe, Re = /* @__PURE__ */ y({
     }
   },
   emits: ["cell-commit", "row-commit", "cell-click", "cell-dblclick", "selection-change", "row-toggle", "sort-change", "ready"],
-  setup(i, { expose: e, emit: n }) {
-    let t = !1, r = null;
+  setup(i, { expose: e, emit: t }) {
+    let n = !1, r = null;
     function s() {
-      return t || (r = new pe(), re.registerAdapter(r), t = !0), r;
+      return n || (r = new pe(), re.registerAdapter(r), n = !0), r;
     }
     s();
-    const d = i, l = n, a = R(null);
+    const d = i, l = t, a = R(null);
     L(H, a);
     const c = J(), u = ie(), g = [
       "selection",
@@ -756,8 +780,8 @@ const pe = fe, Re = /* @__PURE__ */ y({
         get() {
           return te.call(this);
         },
-        set(V) {
-          V && p ? D.call(this, p.processGridConfig(V)) : D.call(this, V);
+        set(S) {
+          S && p ? D.call(this, p.processGridConfig(S)) : D.call(this, S);
         },
         configurable: !0
       });
@@ -828,12 +852,12 @@ const pe = fe, Re = /* @__PURE__ */ y({
     hidden: { type: Boolean }
   },
   setup(i) {
-    const e = S(), n = R(null);
+    const e = B(), t = R(null);
     return T(() => {
-      const t = n.value;
-      if (!t) return;
+      const n = t.value;
+      if (!n) return;
       const r = !!e.cell, s = !!e.editor;
-      r && le(t, (d) => {
+      r && le(n, (d) => {
         const l = e.cell;
         if (!l) return C("span");
         const a = l({
@@ -842,7 +866,7 @@ const pe = fe, Re = /* @__PURE__ */ y({
           column: d.column
         });
         return C("div", { style: "display: contents" }, a);
-      }), s && ae(t, (d) => {
+      }), s && ae(n, (d) => {
         const l = e.editor;
         if (!l) return C("span");
         const a = l({
@@ -858,9 +882,9 @@ const pe = fe, Re = /* @__PURE__ */ y({
         });
         return C("div", { style: "display: contents" }, a);
       });
-    }), (t, r) => (P(), O("tbw-grid-column", {
+    }), (n, r) => (P(), O("tbw-grid-column", {
       ref_key: "columnRef",
-      ref: n,
+      ref: t,
       field: i.field,
       header: i.header,
       width: i.width,
@@ -881,11 +905,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
     animation: { type: [String, Boolean], default: "slide" }
   },
   setup(i) {
-    const e = R(null), n = S();
+    const e = R(null), t = B();
     return T(() => {
-      const t = e.value;
-      !t || !n.default || Q.set(t, (r) => n.default?.(r));
-    }), (t, r) => (P(), O("tbw-grid-detail", {
+      const n = e.value;
+      !n || !t.default || Q.set(n, (r) => t.default?.(r));
+    }), (n, r) => (P(), O("tbw-grid-detail", {
       ref_key: "detailRef",
       ref: e,
       "show-expand-column": i.showExpandColumn,
@@ -895,11 +919,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
 }), Pe = /* @__PURE__ */ y({
   __name: "TbwGridResponsiveCard",
   setup(i) {
-    const e = R(null), n = S();
+    const e = R(null), t = B();
     return T(() => {
-      const t = e.value;
-      !t || !n.default || X.set(t, (r) => n.default?.(r));
-    }), (t, r) => (P(), O("tbw-grid-responsive-card", {
+      const n = e.value;
+      !n || !t.default || X.set(n, (r) => t.default?.(r));
+    }), (n, r) => (P(), O("tbw-grid-responsive-card", {
       ref_key: "cardRef",
       ref: e
     }, null, 512));
@@ -907,7 +931,7 @@ const pe = fe, Re = /* @__PURE__ */ y({
 }), _e = /* @__PURE__ */ y({
   __name: "TbwGridToolButtons",
   setup(i) {
-    return (e, n) => (P(), O("tbw-grid-tool-buttons", null, [
+    return (e, t) => (P(), O("tbw-grid-tool-buttons", null, [
       U(e.$slots, "default")
     ]));
   }
@@ -921,11 +945,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
     width: { default: "250px" }
   },
   setup(i) {
-    const e = R(null), n = S();
+    const e = R(null), t = B();
     return T(() => {
-      const t = e.value;
-      !t || !n.default || ye.set(t, (r) => n.default?.(r));
-    }), (t, r) => (P(), O("tbw-grid-tool-panel", {
+      const n = e.value;
+      !n || !t.default || ye.set(n, (r) => t.default?.(r));
+    }), (n, r) => (P(), O("tbw-grid-tool-panel", {
       ref_key: "panelRef",
       ref: e,
       id: i.id,
@@ -936,11 +960,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
     }, null, 8, ve));
   }
 });
-function Ge(i, e, n) {
-  const t = n ?? F(H, R(null));
+function Ge(i, e, t) {
+  const n = t ?? F(H, R(null));
   let r = null;
   T(() => {
-    const s = t.value;
+    const s = n.value;
     if (!s) return;
     const d = e;
     s.addEventListener(i, d), r = () => s.removeEventListener(i, d);
@@ -968,8 +992,8 @@ const je = y({
   },
   setup(i, { slots: e }) {
     return () => {
-      let n = e.default?.();
-      return i.typeDefaults && (n = C(de, { defaults: i.typeDefaults }, () => n)), i.icons && (n = C(se, { icons: i.icons }, () => n)), n;
+      let t = e.default?.();
+      return i.typeDefaults && (t = C(de, { defaults: i.typeDefaults }, () => t)), i.icons && (t = C(se, { icons: i.icons }, () => t)), t;
     };
   }
 });
@@ -988,7 +1012,7 @@ export {
   _e as TbwGridToolButtons,
   De as TbwGridToolPanel,
   pe as VueGridAdapter,
-  Ve as clearFeatureRegistry,
+  Se as clearFeatureRegistry,
   oe as createPluginFromFeature,
   ke as getFeatureFactory,
   Le as getRegisteredFeatures,