@toolbox-web/grid-vue 0.3.0 → 0.3.1

package/index.js

@@ -1,14 +1,14 @@
-import { defineComponent as p, provide as j, inject as D, createApp as g, ref as h, computed as Y, onMounted as b, onBeforeUnmount as W, watch as B, createElementBlock as w, openBlock as E, renderSlot as $, useSlots as G, h as y } from "vue";
-import { DataGridElement as K } from "@toolbox-web/grid";
-import { c as J } from "./chunks/feature-registry-BgEOysSJ.js";
-import { a as Be, g as Ge, b as Oe, i as _e, r as je } from "./chunks/feature-registry-BgEOysSJ.js";
-import { G as I } from "./chunks/use-grid-DwjXrO19.js";
-import { u as ke } from "./chunks/use-grid-DwjXrO19.js";
-const z = /* @__PURE__ */ Symbol("grid-icons");
-function Q() {
-  return D(z, void 0);
+import { defineComponent as y, provide as L, inject as M, createApp as p, createVNode as V, ref as R, computed as ne, onMounted as T, onBeforeUnmount as q, watch as B, createElementBlock as O, openBlock as _, renderSlot as U, useSlots as P, 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 ke, g as Ve, b as Le, i as Me, r as Ne } from "./chunks/feature-registry-BgEOysSJ.js";
+import { G as H } from "./chunks/use-grid-DwjXrO19.js";
+import { u as Fe } from "./chunks/use-grid-DwjXrO19.js";
+const K = /* @__PURE__ */ Symbol("grid-icons");
+function ie() {
+  return M(K, void 0);
 }
-const X = p({
+const se = y({
   name: "GridIconProvider",
   props: {
     /**
@@ -19,17 +19,17 @@ const X = p({
       required: !0
     }
   },
-  setup(o, { slots: t }) {
-    return j(z, o.icons), () => t.default?.();
+  setup(i, { slots: e }) {
+    return L(K, i.icons), () => e.default?.();
   }
-}), N = /* @__PURE__ */ Symbol("grid-type-defaults");
-function q() {
-  return D(N, void 0);
+}), Y = /* @__PURE__ */ Symbol("grid-type-defaults");
+function J() {
+  return M(Y, void 0);
 }
-function me(o) {
-  return q()?.[o];
+function Ce(i) {
+  return J()?.[i];
 }
-const Z = p({
+const de = y({
   name: "GridTypeProvider",
   props: {
     /**
@@ -40,175 +40,388 @@ const Z = p({
       required: !0
     }
   },
-  setup(o, { slots: t }) {
-    return j(N, o.defaults), () => t.default?.();
+  setup(i, { slots: e }) {
+    return L(Y, i.defaults), () => e.default?.();
   }
-}), U = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new Map();
-function ee(o, t) {
-  const e = o.getAttribute("field"), n = m.get(o) ?? {};
-  if (n.renderer = t, m.set(o, n), e) {
-    const i = v.get(e) ?? {};
-    i.renderer = t, v.set(e, i);
+}), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), b = /* @__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 = b.get(n) ?? {};
+    r.renderer = e, b.set(n, r);
   }
 }
-function te(o, t) {
-  const e = o.getAttribute("field"), n = m.get(o) ?? {};
-  if (n.editor = t, m.set(o, n), e) {
-    const i = v.get(e) ?? {};
-    i.editor = t, v.set(e, i);
+function ce(i, e) {
+  const n = i.getAttribute("field"), t = v.get(i) ?? {};
+  if (t.editor = e, v.set(i, t), n) {
+    const r = b.get(n) ?? {};
+    r.editor = e, b.set(n, r);
   }
 }
-function ne(o) {
-  let t = m.get(o)?.renderer;
-  if (!t) {
-    const e = o.getAttribute("field");
-    e && (t = v.get(e)?.renderer);
+function ae(i) {
+  let e = v.get(i)?.renderer;
+  if (!e) {
+    const n = i.getAttribute("field");
+    n && (e = b.get(n)?.renderer);
   }
-  return t;
+  return e;
 }
-function re(o) {
-  let t = m.get(o)?.editor;
-  if (!t) {
-    const e = o.getAttribute("field");
-    e && (t = v.get(e)?.editor);
+function ue(i) {
+  let e = v.get(i)?.editor;
+  if (!e) {
+    const n = i.getAttribute("field");
+    n && (e = b.get(n)?.editor);
   }
-  return t;
+  return e;
 }
-class oe {
+function j(i) {
+  if (i == null || typeof i == "function" && i.prototype === void 0)
+    return !1;
+  if (typeof i == "object") {
+    const e = i;
+    if ("__name" in e || typeof e.setup == "function" || typeof e.render == "function") return !0;
+  }
+  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;
+  }
+  return !1;
+}
+function S(i) {
+  return typeof i == "function" && !j(i);
+}
+const E = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
+class fe {
   mountedViews = [];
   typeDefaults = null;
+  // #region Config Processing
+  /**
+   * Processes a Vue grid configuration, converting Vue component references
+   * and VNode-returning render functions to DOM-returning functions.
+   *
+   * This is idempotent — already-processed configs pass through safely.
+   *
+   * @example
+   * ```ts
+   * import { GridAdapter, type GridConfig } from '@toolbox-web/grid-vue';
+   * import StatusBadge from './StatusBadge.vue';
+   *
+   * const config: GridConfig<Employee> = {
+   *   columns: [
+   *     { field: 'status', renderer: StatusBadge },
+   *   ],
+   * };
+   *
+   * const adapter = new GridAdapter();
+   * const processedConfig = adapter.processGridConfig(config);
+   * ```
+   *
+   * @param config - Vue grid config with possible component/VNode references
+   * @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;
+  }
+  /**
+   * Processes typeDefaults, converting Vue component/VNode references
+   * to DOM-returning functions.
+   *
+   * @param typeDefaults - Vue type defaults with possible component references
+   * @returns Processed TypeDefault record
+   */
+  processTypeDefaults(e) {
+    const n = {};
+    for (const [t, r] of Object.entries(e)) {
+      const s = {
+        editorParams: r.editorParams
+      };
+      r.renderer && (j(r.renderer) ? s.renderer = this.createConfigComponentRenderer(r.renderer) : S(r.renderer) && (s.renderer = this.createTypeRenderer(
+        r.renderer
+      ))), r.editor && (j(r.editor) ? s.editor = this.createConfigComponentEditor(
+        r.editor
+      ) : S(r.editor) && (s.editor = this.createTypeEditor(
+        r.editor
+      ))), n[t] = s;
+    }
+    return n;
+  }
+  /**
+   * Processes a single column configuration, converting Vue component references
+   * and VNode-returning render functions to DOM-returning functions.
+   *
+   * @param column - Vue column config
+   * @returns Processed ColumnConfig with DOM-returning functions
+   */
+  processColumn(e) {
+    const n = { ...e };
+    if (e.renderer && !e.renderer[E]) {
+      if (j(e.renderer)) {
+        const t = this.createConfigComponentRenderer(e.renderer);
+        t[E] = !0, n.renderer = t;
+      } else if (S(e.renderer)) {
+        const t = this.createConfigVNodeRenderer(e.renderer);
+        t[E] = !0, n.renderer = t;
+      }
+    }
+    if (e.editor && !e.editor[E]) {
+      if (j(e.editor)) {
+        const t = this.createConfigComponentEditor(e.editor);
+        t[E] = !0, n.editor = t;
+      } else if (S(e.editor)) {
+        const t = this.createConfigVNodeEditor(e.editor);
+        t[E] = !0, n.editor = t;
+      }
+    }
+    return n;
+  }
+  /**
+   * Creates a DOM-returning renderer from a Vue component class.
+   * Used for config-based renderers (not slot-based).
+   * @internal
+   */
+  createConfigComponentRenderer(e) {
+    const n = /* @__PURE__ */ new WeakMap();
+    return (t) => {
+      const r = t.cellEl;
+      if (r) {
+        const c = n.get(r);
+        if (c)
+          return c.update(t), c.container;
+        const a = document.createElement("div");
+        a.className = "vue-cell-renderer", a.style.display = "contents";
+        let u = t;
+        const g = e, h = p({
+          render() {
+            return V(g, { ...u });
+          }
+        });
+        return h.mount(a), n.set(r, {
+          app: h,
+          container: a,
+          update: (D) => {
+            u = D, h._instance?.update();
+          }
+        }), a;
+      }
+      const s = document.createElement("div");
+      s.className = "vue-cell-renderer", s.style.display = "contents";
+      const d = e, l = p({
+        render() {
+          return V(d, { ...t });
+        }
+      });
+      return l.mount(s), this.mountedViews.push({ app: l, container: s }), s;
+    };
+  }
+  /**
+   * Creates a DOM-returning renderer from a VNode-returning render function.
+   * Used for config-based renderers (not slot-based).
+   * @internal
+   */
+  createConfigVNodeRenderer(e) {
+    const n = /* @__PURE__ */ new WeakMap();
+    return (t) => {
+      const r = t.cellEl;
+      if (r) {
+        const l = n.get(r);
+        if (l)
+          return l.update(t), l.container;
+        const c = document.createElement("div");
+        c.className = "vue-cell-renderer", c.style.display = "contents";
+        let a = t;
+        const u = p({
+          render() {
+            return e(a);
+          }
+        });
+        return u.mount(c), n.set(r, {
+          app: u,
+          container: c,
+          update: (g) => {
+            a = g, u._instance?.update();
+          }
+        }), c;
+      }
+      const s = document.createElement("div");
+      s.className = "vue-cell-renderer", s.style.display = "contents";
+      const d = p({
+        render() {
+          return e(t);
+        }
+      });
+      return d.mount(s), this.mountedViews.push({ app: d, container: s }), s;
+    };
+  }
+  /**
+   * Creates a DOM-returning editor from a Vue component class.
+   * Used for config-based editors (not slot-based).
+   * @internal
+   */
+  createConfigComponentEditor(e) {
+    return (n) => {
+      const t = document.createElement("div");
+      t.className = "vue-cell-editor", t.style.display = "contents";
+      const r = e, s = p({
+        render() {
+          return V(r, { ...n });
+        }
+      });
+      return s.mount(t), this.mountedViews.push({ app: s, container: t }), t;
+    };
+  }
+  /**
+   * Creates a DOM-returning editor from a VNode-returning render function.
+   * Used for config-based editors (not slot-based).
+   * @internal
+   */
+  createConfigVNodeEditor(e) {
+    return (n) => {
+      const t = document.createElement("div");
+      t.className = "vue-cell-editor", t.style.display = "contents";
+      const r = p({
+        render() {
+          return e(n);
+        }
+      });
+      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
+    };
+  }
+  // #endregion
   /**
    * Sets the type defaults map for this adapter.
    * Called by TbwGrid when it receives type defaults from context.
    *
    * @internal
    */
-  setTypeDefaults(t) {
-    this.typeDefaults = t;
+  setTypeDefaults(e) {
+    this.typeDefaults = e;
   }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a renderer or editor is registered for this element.
    */
-  canHandle(t) {
-    const e = t.getAttribute("field");
-    let n = m.get(t);
-    if (!n && e) {
-      const l = v.get(e);
-      l && (l.renderer || l.editor) && (n = l, m.set(t, n));
+  canHandle(e) {
+    const n = e.getAttribute("field");
+    let t = v.get(e);
+    if (!t && n) {
+      const d = b.get(n);
+      d && (d.renderer || d.editor) && (t = d, v.set(e, t));
     }
-    const i = n?.renderer !== void 0, a = n?.editor !== void 0;
-    return n !== void 0 && (i || a);
+    const r = t?.renderer !== void 0, s = t?.editor !== void 0;
+    return t !== void 0 && (r || s);
   }
   /**
    * Creates a view renderer function that renders a Vue component
    * and returns its container DOM element.
    */
-  createRenderer(t) {
-    const e = ne(t);
-    if (!e)
+  createRenderer(e) {
+    const n = ae(e);
+    if (!n)
       return;
-    const n = /* @__PURE__ */ new WeakMap();
-    return (i) => {
-      const a = i.cellEl;
-      if (a) {
-        const s = n.get(a);
-        if (s)
-          return s.update(i), s.container;
-        const c = document.createElement("div");
-        c.className = "vue-cell-renderer", c.style.display = "contents";
-        let u = i;
-        const R = g({
+    const t = /* @__PURE__ */ new WeakMap();
+    return (r) => {
+      const s = r.cellEl;
+      if (s) {
+        const c = t.get(s);
+        if (c)
+          return c.update(r), c.container;
+        const a = document.createElement("div");
+        a.className = "vue-cell-renderer", a.style.display = "contents";
+        let u = r;
+        const g = p({
           render() {
-            return e(u);
+            return n(u);
           }
         });
-        return R.mount(c), n.set(a, {
-          app: R,
-          container: c,
-          update: (O) => {
-            u = O, R._instance?.update();
+        return g.mount(a), t.set(s, {
+          app: g,
+          container: a,
+          update: (h) => {
+            u = h, g._instance?.update();
           }
-        }), c;
+        }), a;
       }
-      const l = document.createElement("div");
-      l.className = "vue-cell-renderer", l.style.display = "contents";
-      const d = g({
+      const d = document.createElement("div");
+      d.className = "vue-cell-renderer", d.style.display = "contents";
+      const l = p({
         render() {
-          return e(i);
+          return n(r);
         }
       });
-      return d.mount(l), this.mountedViews.push({ app: d, container: l }), l;
+      return l.mount(d), this.mountedViews.push({ app: l, container: d }), d;
     };
   }
   /**
    * Creates an editor spec that renders a Vue component for cell editing.
    * Returns a function that creates the editor DOM element.
    */
-  createEditor(t) {
-    const e = re(t);
-    if (e)
-      return (n) => {
-        const i = document.createElement("div");
-        i.className = "vue-cell-editor", i.style.display = "contents";
-        const a = g({
+  createEditor(e) {
+    const n = ue(e);
+    if (n)
+      return (t) => {
+        const r = document.createElement("div");
+        r.className = "vue-cell-editor", r.style.display = "contents";
+        const s = p({
           render() {
-            return e(n);
+            return n(t);
           }
         });
-        return a.mount(i), this.mountedViews.push({ app: a, container: i }), i;
+        return s.mount(r), this.mountedViews.push({ app: s, container: r }), r;
       };
   }
   /**
    * Framework adapter hook called by MasterDetailPlugin during attach().
    * Parses the <tbw-grid-detail> element and returns a Vue-based renderer.
    */
-  parseDetailElement(t) {
-    const e = t.closest("tbw-grid");
-    if (!e) return;
-    const n = e.querySelector("tbw-grid-detail");
+  parseDetailElement(e) {
+    const n = e.closest("tbw-grid");
     if (!n) return;
-    const i = U.get(n);
-    if (i)
-      return (a, l) => {
-        const d = document.createElement("div");
-        d.className = "vue-detail-panel";
-        const c = i({ row: a, rowIndex: l });
-        if (c && c.length > 0) {
-          const u = g({
+    const t = n.querySelector("tbw-grid-detail");
+    if (!t) return;
+    const r = Q.get(t);
+    if (r)
+      return (s, d) => {
+        const l = document.createElement("div");
+        l.className = "vue-detail-panel";
+        const a = r({ row: s, rowIndex: d });
+        if (a && a.length > 0) {
+          const u = p({
             render() {
-              return c;
+              return a;
             }
           });
-          u.mount(d), this.mountedViews.push({ app: u, container: d });
+          u.mount(l), this.mountedViews.push({ app: u, container: l });
         }
-        return d;
+        return l;
       };
   }
   /**
    * Framework adapter hook called by ResponsivePlugin during attach().
    * Parses the <tbw-grid-responsive-card> element and returns a Vue-based renderer.
    */
-  parseResponsiveCardElement(t) {
-    const e = t.closest("tbw-grid");
-    if (!e) return;
-    const n = e.querySelector("tbw-grid-responsive-card");
+  parseResponsiveCardElement(e) {
+    const n = e.closest("tbw-grid");
     if (!n) return;
-    const i = H.get(n);
-    if (i)
-      return (a, l) => {
-        const d = document.createElement("div");
-        d.className = "vue-responsive-card";
-        const c = i({ row: a, rowIndex: l });
-        if (c && c.length > 0) {
-          const u = g({
+    const t = n.querySelector("tbw-grid-responsive-card");
+    if (!t) return;
+    const r = X.get(t);
+    if (r)
+      return (s, d) => {
+        const l = document.createElement("div");
+        l.className = "vue-responsive-card";
+        const a = r({ row: s, rowIndex: d });
+        if (a && a.length > 0) {
+          const u = p({
             render() {
-              return c;
+              return a;
             }
           });
-          u.mount(d), this.mountedViews.push({ app: u, container: d });
+          u.mount(l), this.mountedViews.push({ app: u, container: l });
         }
-        return d;
+        return l;
       };
   }
   // #region Type Defaults Support
@@ -240,47 +453,47 @@ class oe {
    * </template>
    * ```
    */
-  getTypeDefault(t) {
+  getTypeDefault(e) {
     if (!this.typeDefaults)
       return;
-    const e = this.typeDefaults[t];
-    if (!e)
+    const n = this.typeDefaults[e];
+    if (!n)
       return;
-    const n = {
-      editorParams: e.editorParams
+    const t = {
+      editorParams: n.editorParams
     };
-    return e.renderer && (n.renderer = this.createTypeRenderer(e.renderer)), e.editor && (n.editor = this.createTypeEditor(e.editor)), n;
+    return n.renderer && (t.renderer = this.createTypeRenderer(n.renderer)), n.editor && (t.editor = this.createTypeEditor(n.editor)), t;
   }
   /**
    * Creates a renderer function from a Vue render function for type defaults.
    * @internal
    */
-  createTypeRenderer(t) {
-    return (e) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const i = g({
+  createTypeRenderer(e) {
+    return (n) => {
+      const t = document.createElement("span");
+      t.style.display = "contents";
+      const r = p({
         render() {
-          return t(e);
+          return e(n);
         }
       });
-      return i.mount(n), this.mountedViews.push({ app: i, container: n }), n;
+      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
     };
   }
   /**
    * Creates an editor function from a Vue render function for type defaults.
    * @internal
    */
-  createTypeEditor(t) {
-    return (e) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const i = g({
+  createTypeEditor(e) {
+    return (n) => {
+      const t = document.createElement("span");
+      t.style.display = "contents";
+      const r = p({
         render() {
-          return t(e);
+          return e(n);
         }
       });
-      return i.mount(n), this.mountedViews.push({ app: i, container: n }), n;
+      return r.mount(t), this.mountedViews.push({ app: r, container: t }), t;
     };
   }
   // #endregion
@@ -288,15 +501,15 @@ class oe {
    * Cleanup all mounted Vue apps.
    */
   cleanup() {
-    for (const { app: t, container: e } of this.mountedViews)
+    for (const { app: e, container: n } of this.mountedViews)
       try {
-        t.unmount(), e.remove();
+        e.unmount(), n.remove();
       } catch {
       }
     this.mountedViews = [];
   }
 }
-const ie = oe, ge = /* @__PURE__ */ p({
+const pe = fe, Re = /* @__PURE__ */ y({
   __name: "TbwGrid",
   props: {
     /** Row data to display */
@@ -439,15 +652,15 @@ const ie = oe, ge = /* @__PURE__ */ p({
     }
   },
   emits: ["cell-commit", "row-commit", "cell-click", "cell-dblclick", "selection-change", "row-toggle", "sort-change", "ready"],
-  setup(o, { expose: t, emit: e }) {
-    let n = !1, i = null;
-    function a() {
-      return n || (i = new ie(), K.registerAdapter(i), n = !0), i;
+  setup(i, { expose: e, emit: n }) {
+    let t = !1, r = null;
+    function s() {
+      return t || (r = new pe(), re.registerAdapter(r), t = !0), r;
     }
-    a();
-    const l = o, d = e, s = h(null);
-    j(I, s);
-    const c = q(), u = Q(), R = [
+    s();
+    const d = i, l = n, c = R(null);
+    L(H, c);
+    const a = J(), u = ie(), g = [
       "selection",
       "editing",
       "clipboard",
@@ -472,98 +685,115 @@ const ie = oe, ge = /* @__PURE__ */ p({
       "pivot",
       "serverSide"
     ];
-    function O() {
-      const r = [];
-      for (const f of R) {
-        const T = l[f];
-        if (T !== void 0) {
-          const C = J(f, T);
-          C && r.push(C);
+    function h() {
+      const o = [];
+      for (const f of g) {
+        const w = d[f];
+        if (w !== void 0) {
+          const m = oe(f, w);
+          m && o.push(m);
         }
       }
-      return r;
+      return o;
     }
-    const _ = Y(() => {
-      const r = l.gridConfig ?? {}, f = O(), T = r.plugins ?? [], C = [...f, ...T], V = u ? { ...r.icons, ...u } : r.icons;
+    const D = ne(() => {
+      const o = d.gridConfig ?? {}, f = h(), w = o.plugins ?? [], m = [...f, ...w], G = u ? { ...o.icons, ...u } : o.icons;
       return {
-        ...r,
-        ...l.columns ? { columns: l.columns } : {},
-        ...C.length > 0 ? { plugins: C } : {},
-        ...V ? { icons: V } : {}
+        ...o,
+        ...d.columns ? { columns: d.columns } : {},
+        ...m.length > 0 ? { plugins: m } : {},
+        ...G ? { icons: G } : {}
       };
     });
-    function k(r) {
-      d("cell-commit", r);
+    function N(o) {
+      l("cell-commit", o);
+    }
+    function A(o) {
+      l("row-commit", o);
     }
-    function S(r) {
-      d("row-commit", r);
+    function F(o) {
+      l("cell-click", o);
     }
-    function L(r) {
-      d("cell-click", r);
+    function x(o) {
+      l("cell-dblclick", o);
     }
-    function P(r) {
-      d("cell-dblclick", r);
+    function W(o) {
+      l("selection-change", o);
     }
-    function x(r) {
-      d("selection-change", r);
+    function $(o) {
+      l("row-toggle", o);
     }
-    function A(r) {
-      d("row-toggle", r);
+    function I(o) {
+      l("sort-change", o);
     }
-    function F(r) {
-      d("sort-change", r);
+    function z(o) {
+      l("ready", o);
     }
-    function M(r) {
-      d("ready", r);
+    function Z(o, f) {
+      const w = Object.getPrototypeOf(o), m = Object.getOwnPropertyDescriptor(w, "gridConfig");
+      if (!m?.set || !m?.get) return;
+      const G = m.set, te = m.get;
+      Object.defineProperty(o, "gridConfig", {
+        get() {
+          return te.call(this);
+        },
+        set(k) {
+          k && f ? G.call(this, f.processGridConfig(k)) : G.call(this, k);
+        },
+        configurable: !0
+      });
     }
-    return b(() => {
-      const r = s.value;
-      if (!r) return;
-      const f = a();
-      r.__frameworkAdapter = f, f.setTypeDefaults(c ?? null), r.addEventListener("cell-commit", k), r.addEventListener("row-commit", S), r.addEventListener("cell-click", L), r.addEventListener("cell-dblclick", P), r.addEventListener("selection-change", x), r.addEventListener("row-toggle", A), r.addEventListener("sort-change", F), r.addEventListener("ready", M), l.rows.length > 0 && (r.rows = l.rows), _.value && (r.gridConfig = _.value), l.fitMode && (r.fitMode = l.fitMode);
-    }), W(() => {
-      const r = s.value;
-      r && (r.removeEventListener("cell-commit", k), r.removeEventListener("row-commit", S), r.removeEventListener("cell-click", L), r.removeEventListener("cell-dblclick", P), r.removeEventListener("selection-change", x), r.removeEventListener("row-toggle", A), r.removeEventListener("sort-change", F), r.removeEventListener("ready", M));
+    function ee(o) {
+      delete o.gridConfig;
+    }
+    return T(() => {
+      const o = c.value;
+      if (!o) return;
+      const f = s();
+      o.__frameworkAdapter = f, f.setTypeDefaults(a ?? null), Z(o, f), o.addEventListener("cell-commit", N), o.addEventListener("row-commit", A), o.addEventListener("cell-click", F), o.addEventListener("cell-dblclick", x), o.addEventListener("selection-change", W), o.addEventListener("row-toggle", $), o.addEventListener("sort-change", I), o.addEventListener("ready", z), d.rows.length > 0 && (o.rows = d.rows), D.value && (o.gridConfig = D.value), d.fitMode && (o.fitMode = d.fitMode);
+    }), q(() => {
+      const o = c.value;
+      o && (ee(o), o.removeEventListener("cell-commit", N), o.removeEventListener("row-commit", A), o.removeEventListener("cell-click", F), o.removeEventListener("cell-dblclick", x), o.removeEventListener("selection-change", W), o.removeEventListener("row-toggle", $), o.removeEventListener("sort-change", I), o.removeEventListener("ready", z));
     }), B(
-      () => l.rows,
-      (r) => {
-        s.value && (s.value.rows = r);
+      () => d.rows,
+      (o) => {
+        c.value && (c.value.rows = o);
       },
       { deep: !0 }
     ), B(
-      _,
-      (r) => {
-        s.value && r && (s.value.gridConfig = r);
+      D,
+      (o) => {
+        c.value && o && (c.value.gridConfig = o);
       },
       { deep: !0 }
     ), B(
-      () => l.fitMode,
-      (r) => {
-        s.value && r && (s.value.fitMode = r);
+      () => d.fitMode,
+      (o) => {
+        c.value && o && (c.value.fitMode = o);
       }
     ), B(
-      () => c,
-      (r) => {
-        a().setTypeDefaults(r ?? null);
+      () => a,
+      (o) => {
+        s().setTypeDefaults(o ?? null);
       },
       { deep: !0 }
-    ), t({
+    ), e({
       /** The underlying grid element */
-      gridElement: s,
+      gridElement: c,
       /** Force a layout recalculation */
-      forceLayout: () => s.value?.forceLayout(),
+      forceLayout: () => c.value?.forceLayout(),
       /** Get current grid configuration */
-      getConfig: () => s.value?.getConfig(),
+      getConfig: () => c.value?.getConfig(),
       /** Wait for grid to be ready */
-      ready: () => s.value?.ready()
-    }), (r, f) => (E(), w("tbw-grid", {
+      ready: () => c.value?.ready()
+    }), (o, f) => (_(), O("tbw-grid", {
       ref_key: "gridRef",
-      ref: s
+      ref: c
     }, [
-      $(r.$slots, "default")
+      U(o.$slots, "default")
     ], 512));
   }
-}), le = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], ve = /* @__PURE__ */ p({
+}), me = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], Te = /* @__PURE__ */ y({
   __name: "TbwGridColumn",
   props: {
     field: {},
@@ -578,87 +808,87 @@ const ie = oe, ge = /* @__PURE__ */ p({
     align: {},
     hidden: { type: Boolean }
   },
-  setup(o) {
-    const t = G(), e = h(null);
-    return b(() => {
-      const n = e.value;
-      if (!n) return;
-      const i = !!t.cell, a = !!t.editor;
-      i && ee(n, (l) => {
-        const d = t.cell;
-        if (!d) return y("span");
-        const s = d({
-          value: l.value,
-          row: l.row,
-          column: l.column
+  setup(i) {
+    const e = P(), n = R(null);
+    return T(() => {
+      const t = n.value;
+      if (!t) return;
+      const r = !!e.cell, s = !!e.editor;
+      r && le(t, (d) => {
+        const l = e.cell;
+        if (!l) return C("span");
+        const c = l({
+          value: d.value,
+          row: d.row,
+          column: d.column
         });
-        return y("div", { style: "display: contents" }, s);
-      }), a && te(n, (l) => {
-        const d = t.editor;
-        if (!d) return y("span");
-        const s = d({
-          value: l.value,
-          row: l.row,
-          column: l.column,
-          commit: l.commit,
-          cancel: l.cancel
+        return C("div", { style: "display: contents" }, c);
+      }), s && ce(t, (d) => {
+        const l = e.editor;
+        if (!l) return C("span");
+        const c = l({
+          value: d.value,
+          row: d.row,
+          column: d.column,
+          commit: d.commit,
+          cancel: d.cancel
         });
-        return y("div", { style: "display: contents" }, s);
+        return C("div", { style: "display: contents" }, c);
       });
-    }), (n, i) => (E(), w("tbw-grid-column", {
+    }), (t, r) => (_(), O("tbw-grid-column", {
       ref_key: "columnRef",
-      ref: e,
-      field: o.field,
-      header: o.header,
-      width: o.width,
-      "min-width": o.minWidth,
-      "max-width": o.maxWidth,
-      sortable: o.sortable,
-      resizable: o.resizable,
-      editable: o.editable,
-      type: o.type,
-      align: o.align,
-      hidden: o.hidden
-    }, null, 8, le));
-  }
-}), de = ["show-expand-column", "animation"], ye = /* @__PURE__ */ p({
+      ref: n,
+      field: i.field,
+      header: i.header,
+      width: i.width,
+      "min-width": i.minWidth,
+      "max-width": i.maxWidth,
+      sortable: i.sortable,
+      resizable: i.resizable,
+      editable: i.editable,
+      type: i.type,
+      align: i.align,
+      hidden: i.hidden
+    }, null, 8, me));
+  }
+}), ge = ["show-expand-column", "animation"], Oe = /* @__PURE__ */ y({
   __name: "TbwGridDetailPanel",
   props: {
     showExpandColumn: { type: Boolean, default: !0 },
     animation: { type: [String, Boolean], default: "slide" }
   },
-  setup(o) {
-    const t = h(null), e = G();
-    return b(() => {
-      const n = t.value;
-      !n || !e.default || U.set(n, (i) => e.default?.(i));
-    }), (n, i) => (E(), w("tbw-grid-detail", {
+  setup(i) {
+    const e = R(null), n = P();
+    return T(() => {
+      const t = e.value;
+      !t || !n.default || Q.set(t, (r) => n.default?.(r));
+    }), (t, r) => (_(), O("tbw-grid-detail", {
       ref_key: "detailRef",
-      ref: t,
-      "show-expand-column": o.showExpandColumn,
-      animation: o.animation
-    }, null, 8, de));
+      ref: e,
+      "show-expand-column": i.showExpandColumn,
+      animation: i.animation
+    }, null, 8, ge));
   }
-}), he = /* @__PURE__ */ p({
+}), _e = /* @__PURE__ */ y({
   __name: "TbwGridResponsiveCard",
-  setup(o) {
-    const t = h(null), e = G();
-    return b(() => {
-      const n = t.value;
-      !n || !e.default || H.set(n, (i) => e.default?.(i));
-    }), (n, i) => (E(), w("tbw-grid-responsive-card", {
+  setup(i) {
+    const e = R(null), n = P();
+    return T(() => {
+      const t = e.value;
+      !t || !n.default || X.set(t, (r) => n.default?.(r));
+    }), (t, r) => (_(), O("tbw-grid-responsive-card", {
       ref_key: "cardRef",
-      ref: t
+      ref: e
     }, null, 512));
   }
-}), be = /* @__PURE__ */ p({
+}), De = /* @__PURE__ */ y({
   __name: "TbwGridToolButtons",
-  setup(o) {
-    return (t, e) => (E(), w("tbw-grid-tool-buttons", null, [
-      $(t.$slots, "default")
+  setup(i) {
+    return (e, n) => (_(), O("tbw-grid-tool-buttons", null, [
+      U(e.$slots, "default")
     ]));
   }
-}), se = /* @__PURE__ */ new WeakMap(), ae = ["id", "label", "icon", "position", "width"], we = /* @__PURE__ */ p({
+}), ye = /* @__PURE__ */ new WeakMap(), ve = ["id", "label", "icon", "position", "width"], Ge = /* @__PURE__ */ y({
   __name: "TbwGridToolPanel",
   props: {
     id: {},
@@ -667,35 +897,35 @@ const ie = oe, ge = /* @__PURE__ */ p({
     position: { default: "right" },
     width: { default: "250px" }
   },
-  setup(o) {
-    const t = h(null), e = G();
-    return b(() => {
-      const n = t.value;
-      !n || !e.default || se.set(n, (i) => e.default?.(i));
-    }), (n, i) => (E(), w("tbw-grid-tool-panel", {
+  setup(i) {
+    const e = R(null), n = P();
+    return T(() => {
+      const t = e.value;
+      !t || !n.default || ye.set(t, (r) => n.default?.(r));
+    }), (t, r) => (_(), O("tbw-grid-tool-panel", {
       ref_key: "panelRef",
-      ref: t,
-      id: o.id,
-      label: o.label,
-      icon: o.icon,
-      position: o.position,
-      width: o.width
-    }, null, 8, ae));
+      ref: e,
+      id: i.id,
+      label: i.label,
+      icon: i.icon,
+      position: i.position,
+      width: i.width
+    }, null, 8, ve));
   }
 });
-function Ee(o, t, e) {
-  const n = e ?? D(I, h(null));
-  let i = null;
-  b(() => {
-    const a = n.value;
-    if (!a) return;
-    const l = t;
-    a.addEventListener(o, l), i = () => a.removeEventListener(o, l);
-  }), W(() => {
-    i?.();
+function je(i, e, n) {
+  const t = n ?? M(H, R(null));
+  let r = null;
+  T(() => {
+    const s = t.value;
+    if (!s) return;
+    const d = e;
+    s.addEventListener(i, d), r = () => s.removeEventListener(i, d);
+  }), q(() => {
+    r?.();
   });
 }
-const Re = p({
+const Be = y({
   name: "GridProvider",
   props: {
     /**
@@ -713,38 +943,39 @@ const Re = p({
       default: void 0
     }
   },
-  setup(o, { slots: t }) {
+  setup(i, { slots: e }) {
     return () => {
-      let e = t.default?.();
-      return o.typeDefaults && (e = y(Z, { defaults: o.typeDefaults }, () => e)), o.icons && (e = y(X, { icons: o.icons }, () => e)), e;
+      let n = e.default?.();
+      return i.typeDefaults && (n = C(de, { defaults: i.typeDefaults }, () => n)), i.icons && (n = C(se, { icons: i.icons }, () => n)), n;
     };
   }
 });
 export {
-  I as GRID_ELEMENT_KEY,
-  z as GRID_ICONS,
-  N as GRID_TYPE_DEFAULTS,
-  oe as GridAdapter,
-  X as GridIconProvider,
-  Re as GridProvider,
-  Z as GridTypeProvider,
-  ge as TbwGrid,
-  ve as TbwGridColumn,
-  ye as TbwGridDetailPanel,
-  he as TbwGridResponsiveCard,
-  be as TbwGridToolButtons,
-  we as TbwGridToolPanel,
-  ie as VueGridAdapter,
-  Be as clearFeatureRegistry,
-  J as createPluginFromFeature,
-  Ge as getFeatureFactory,
-  Oe as getRegisteredFeatures,
-  _e as isFeatureRegistered,
-  je as registerFeature,
-  ke as useGrid,
-  Ee as useGridEvent,
-  Q as useGridIcons,
-  q as useGridTypeDefaults,
-  me as useTypeDefault
+  H as GRID_ELEMENT_KEY,
+  K as GRID_ICONS,
+  Y as GRID_TYPE_DEFAULTS,
+  fe as GridAdapter,
+  se as GridIconProvider,
+  Be as GridProvider,
+  de as GridTypeProvider,
+  Re as TbwGrid,
+  Te as TbwGridColumn,
+  Oe as TbwGridDetailPanel,
+  _e as TbwGridResponsiveCard,
+  De as TbwGridToolButtons,
+  Ge as TbwGridToolPanel,
+  pe as VueGridAdapter,
+  ke as clearFeatureRegistry,
+  oe as createPluginFromFeature,
+  Ve as getFeatureFactory,
+  Le as getRegisteredFeatures,
+  Me as isFeatureRegistered,
+  j as isVueComponent,
+  Ne as registerFeature,
+  Fe as useGrid,
+  je as useGridEvent,
+  ie as useGridIcons,
+  J as useGridTypeDefaults,
+  Ce as useTypeDefault
 };
 //# sourceMappingURL=index.js.map