@toolbox-web/grid-vue 0.11.2 → 0.11.3

package/index.js

@@ -1,14 +1,14 @@
-import { defineComponent as h, provide as k, inject as A, createApp as u, createVNode as V, ref as _, computed as U, onMounted as D, onBeforeUnmount as M, watch as B, createElementBlock as j, openBlock as O, renderSlot as W, useSlots as G, h as T } from "vue";
-import { DataGridElement as K } from "@toolbox-web/grid";
-import { createPluginFromFeature as Y } from "@toolbox-web/grid/features/registry";
-import { clearFeatureRegistry as Ve, createPluginFromFeature as Te, getFeatureFactory as _e, getRegisteredFeatures as De, isFeatureRegistered as je, registerFeature as Oe } from "@toolbox-web/grid/features/registry";
-import { G as x } from "./chunks/use-grid-CeVD1azo.js";
-import { u as Be } from "./chunks/use-grid-CeVD1azo.js";
-const I = /* @__PURE__ */ Symbol("grid-icons");
-function J() {
-  return A(I, void 0);
+import { defineComponent as y, provide as A, inject as L, createApp as u, createVNode as V, ref as B, computed as K, onMounted as _, onBeforeUnmount as W, watch as S, createElementBlock as D, openBlock as O, renderSlot as x, useSlots as G, h as T } from "vue";
+import { DataGridElement as Y } from "@toolbox-web/grid";
+import { createPluginFromFeature as J } from "@toolbox-web/grid/features/registry";
+import { clearFeatureRegistry as Se, createPluginFromFeature as Te, getFeatureFactory as Be, getRegisteredFeatures as _e, isFeatureRegistered as De, registerFeature as Oe } from "@toolbox-web/grid/features/registry";
+import { G as I } from "./chunks/use-grid-DjGoQOoZ.js";
+import { u as Pe } from "./chunks/use-grid-DjGoQOoZ.js";
+const z = /* @__PURE__ */ Symbol("grid-icons");
+function Q() {
+  return L(z, void 0);
 }
-const Q = h({
+const X = y({
   name: "GridIconProvider",
   props: {
     /**
@@ -20,16 +20,16 @@ const Q = h({
     }
   },
   setup(o, { slots: r }) {
-    return k(I, o.icons), () => r.default?.();
+    return A(z, o.icons), () => r.default?.();
   }
-}), z = /* @__PURE__ */ Symbol("grid-type-defaults");
-function H() {
-  return A(z, void 0);
+}), H = /* @__PURE__ */ Symbol("grid-type-defaults");
+function $() {
+  return L(H, void 0);
 }
-function fe(o) {
-  return H()?.[o];
+function me(o) {
+  return $()?.[o];
 }
-const X = h({
+const Z = y({
   name: "GridTypeProvider",
   props: {
     /**
@@ -41,40 +41,40 @@ const X = h({
     }
   },
   setup(o, { slots: r }) {
-    return k(z, o.defaults), () => r.default?.();
+    return A(H, o.defaults), () => r.default?.();
   }
-}), $ = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new Map();
-function Z(o, r) {
-  const t = o.getAttribute("field"), e = v.get(o) ?? {};
-  if (e.renderer = r, v.set(o, e), t) {
-    const n = w.get(t) ?? {};
-    n.renderer = r, w.set(t, n);
+}), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new Map();
+function ee(o, r) {
+  const t = o.getAttribute("field"), e = w.get(o) ?? {};
+  if (e.renderer = r, w.set(o, e), t) {
+    const n = b.get(t) ?? {};
+    n.renderer = r, b.set(t, n);
   }
 }
-function ee(o, r) {
-  const t = o.getAttribute("field"), e = v.get(o) ?? {};
-  if (e.editor = r, v.set(o, e), t) {
-    const n = w.get(t) ?? {};
-    n.editor = r, w.set(t, n);
+function te(o, r) {
+  const t = o.getAttribute("field"), e = w.get(o) ?? {};
+  if (e.editor = r, w.set(o, e), t) {
+    const n = b.get(t) ?? {};
+    n.editor = r, b.set(t, n);
   }
 }
-function te(o) {
-  let r = v.get(o)?.renderer;
+function re(o) {
+  let r = w.get(o)?.renderer;
   if (!r) {
     const t = o.getAttribute("field");
-    t && (r = w.get(t)?.renderer);
+    t && (r = b.get(t)?.renderer);
   }
   return r;
 }
-function re(o) {
-  let r = v.get(o)?.editor;
+function ne(o) {
+  let r = w.get(o)?.editor;
   if (!r) {
     const t = o.getAttribute("field");
-    t && (r = w.get(t)?.editor);
+    t && (r = b.get(t)?.editor);
   }
   return r;
 }
-function y(o) {
+function v(o) {
   if (o == null || typeof o == "function" && o.prototype === void 0)
     return !1;
   if (typeof o == "object") {
@@ -90,10 +90,10 @@ function y(o) {
   return !1;
 }
 function C(o) {
-  return typeof o == "function" && !y(o);
+  return typeof o == "function" && !v(o);
 }
-const f = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
-class ne {
+const m = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
+class oe {
   mountedViews = [];
   /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
   editorViews = [];
@@ -132,7 +132,7 @@ class ne {
    */
   processConfig(r) {
     const t = r, e = { ...t };
-    return t.columns && (e.columns = t.columns.map((n) => this.processColumn(n))), t.typeDefaults && (e.typeDefaults = this.processTypeDefaults(t.typeDefaults)), t.loadingRenderer && (y(t.loadingRenderer) ? e.loadingRenderer = this.createComponentLoadingRenderer(
+    return t.columns && (e.columns = t.columns.map((n) => this.processColumn(n))), t.typeDefaults && (e.typeDefaults = this.processTypeDefaults(t.typeDefaults)), t.loadingRenderer && (v(t.loadingRenderer) ? e.loadingRenderer = this.createComponentLoadingRenderer(
       t.loadingRenderer
     ) : C(t.loadingRenderer) && (e.loadingRenderer = this.createVNodeLoadingRenderer(
       t.loadingRenderer
@@ -148,16 +148,16 @@ class ne {
   processTypeDefaults(r) {
     const t = {};
     for (const [e, n] of Object.entries(r)) {
-      const i = {
+      const s = {
         editorParams: n.editorParams
       };
-      n.renderer && (y(n.renderer) ? i.renderer = this.createConfigComponentRenderer(n.renderer) : C(n.renderer) && (i.renderer = this.createTypeRenderer(
+      n.renderer && (v(n.renderer) ? s.renderer = this.createConfigComponentRenderer(n.renderer) : C(n.renderer) && (s.renderer = this.createTypeRenderer(
         n.renderer
-      ))), n.editor && (y(n.editor) ? i.editor = this.createConfigComponentEditor(
+      ))), n.editor && (v(n.editor) ? s.editor = this.createConfigComponentEditor(
         n.editor
-      ) : C(n.editor) && (i.editor = this.createTypeEditor(
+      ) : C(n.editor) && (s.editor = this.createTypeEditor(
         n.editor
-      ))), n.filterPanelRenderer && (i.filterPanelRenderer = this.createFilterPanelRenderer(n.filterPanelRenderer)), t[e] = i;
+      ))), n.filterPanelRenderer && (s.filterPanelRenderer = this.createFilterPanelRenderer(n.filterPanelRenderer)), t[e] = s;
     }
     return t;
   }
@@ -170,44 +170,44 @@ class ne {
    */
   processColumn(r) {
     const t = { ...r };
-    if (r.renderer && !r.renderer[f]) {
-      if (y(r.renderer)) {
+    if (r.renderer && !r.renderer[m]) {
+      if (v(r.renderer)) {
         const e = this.createConfigComponentRenderer(r.renderer);
-        e[f] = !0, t.renderer = e;
+        e[m] = !0, t.renderer = e;
       } else if (C(r.renderer)) {
         const e = this.createConfigVNodeRenderer(r.renderer);
-        e[f] = !0, t.renderer = e;
+        e[m] = !0, t.renderer = e;
       }
     }
-    if (r.editor && !r.editor[f]) {
-      if (y(r.editor)) {
+    if (r.editor && !r.editor[m]) {
+      if (v(r.editor)) {
         const e = this.createConfigComponentEditor(r.editor);
-        e[f] = !0, t.editor = e;
+        e[m] = !0, t.editor = e;
       } else if (C(r.editor)) {
         const e = this.createConfigVNodeEditor(r.editor);
-        e[f] = !0, t.editor = e;
+        e[m] = !0, t.editor = e;
       }
     }
-    if (r.headerRenderer && !r.headerRenderer[f]) {
-      if (y(r.headerRenderer)) {
+    if (r.headerRenderer && !r.headerRenderer[m]) {
+      if (v(r.headerRenderer)) {
         const e = this.createConfigComponentHeaderRenderer(r.headerRenderer);
-        e[f] = !0, t.headerRenderer = e;
+        e[m] = !0, t.headerRenderer = e;
       } else if (C(r.headerRenderer)) {
         const e = this.createConfigVNodeHeaderRenderer(
           r.headerRenderer
         );
-        e[f] = !0, t.headerRenderer = e;
+        e[m] = !0, t.headerRenderer = e;
       }
     }
-    if (r.headerLabelRenderer && !r.headerLabelRenderer[f]) {
-      if (y(r.headerLabelRenderer)) {
+    if (r.headerLabelRenderer && !r.headerLabelRenderer[m]) {
+      if (v(r.headerLabelRenderer)) {
         const e = this.createConfigComponentHeaderLabelRenderer(r.headerLabelRenderer);
-        e[f] = !0, t.headerLabelRenderer = e;
+        e[m] = !0, t.headerLabelRenderer = e;
       } else if (C(r.headerLabelRenderer)) {
         const e = this.createConfigVNodeHeaderLabelRenderer(
           r.headerLabelRenderer
         );
-        e[f] = !0, t.headerLabelRenderer = e;
+        e[m] = !0, t.headerLabelRenderer = e;
       }
     }
     return t;
@@ -228,27 +228,27 @@ class ne {
         const d = document.createElement("div");
         d.className = "vue-cell-renderer", d.style.display = "contents";
         let p = e;
-        const g = r, b = u({
+        const g = r, R = u({
           render() {
             return V(g, { ...p });
           }
         });
-        return b.mount(d), t.set(n, {
-          app: b,
+        return R.mount(d), t.set(n, {
+          app: R,
           container: d,
           update: (N) => {
-            p = N, b._instance?.update();
+            p = N, R._instance?.update();
           }
         }), d;
       }
-      const i = document.createElement("div");
-      i.className = "vue-cell-renderer", i.style.display = "contents";
-      const s = r, a = u({
+      const s = document.createElement("div");
+      s.className = "vue-cell-renderer", s.style.display = "contents";
+      const i = r, l = u({
         render() {
-          return V(s, { ...e });
+          return V(i, { ...e });
         }
       });
-      return a.mount(i), this.mountedViews.push({ app: a, container: i }), i;
+      return l.mount(s), this.mountedViews.push({ app: l, container: s }), s;
     };
   }
   /**
@@ -261,9 +261,9 @@ class ne {
     return (e) => {
       const n = e.cellEl;
       if (n) {
-        const a = t.get(n);
-        if (a)
-          return a.update(e), a.container;
+        const l = t.get(n);
+        if (l)
+          return l.update(e), l.container;
         const c = document.createElement("div");
         c.className = "vue-cell-renderer", c.style.display = "contents";
         let d = e;
@@ -280,14 +280,14 @@ class ne {
           }
         }), c;
       }
-      const i = document.createElement("div");
-      i.className = "vue-cell-renderer", i.style.display = "contents";
-      const s = u({
+      const s = document.createElement("div");
+      s.className = "vue-cell-renderer", s.style.display = "contents";
+      const i = u({
         render() {
           return r(e);
         }
       });
-      return s.mount(i), this.mountedViews.push({ app: s, container: i }), i;
+      return i.mount(s), this.mountedViews.push({ app: i, container: s }), s;
     };
   }
   /**
@@ -299,12 +299,12 @@ class ne {
     return (t) => {
       const e = document.createElement("div");
       e.className = "vue-cell-editor", e.style.display = "contents";
-      const n = r, i = u({
+      const n = r, s = u({
         render() {
           return V(n, { ...t });
         }
       });
-      return i.mount(e), this.editorViews.push({ app: i, container: e }), e;
+      return s.mount(e), this.editorViews.push({ app: s, container: e }), e;
     };
   }
   /**
@@ -333,7 +333,7 @@ class ne {
     return (t) => {
       const e = document.createElement("div");
       e.className = "vue-header-renderer", e.style.display = "contents";
-      const n = r, i = u({
+      const n = r, s = u({
         render() {
           return V(n, {
             column: t.column,
@@ -345,7 +345,7 @@ class ne {
           });
         }
       });
-      return i.mount(e), this.mountedViews.push({ app: i, container: e }), e;
+      return s.mount(e), this.mountedViews.push({ app: s, container: e }), e;
     };
   }
   /**
@@ -374,7 +374,7 @@ class ne {
     return (t) => {
       const e = document.createElement("div");
       e.className = "vue-header-label-renderer", e.style.display = "contents";
-      const n = r, i = u({
+      const n = r, s = u({
         render() {
           return V(n, {
             column: t.column,
@@ -382,7 +382,7 @@ class ne {
           });
         }
       });
-      return i.mount(e), this.mountedViews.push({ app: i, container: e }), e;
+      return s.mount(e), this.mountedViews.push({ app: s, container: e }), e;
     };
   }
   /**
@@ -410,12 +410,12 @@ class ne {
     return (t) => {
       const e = document.createElement("div");
       e.className = "vue-loading-renderer", e.style.display = "contents";
-      const n = r, i = u({
+      const n = r, s = u({
         render() {
           return V(n, { size: t.size });
         }
       });
-      return i.mount(e), this.mountedViews.push({ app: i, container: e }), e;
+      return s.mount(e), this.mountedViews.push({ app: s, container: e }), e;
     };
   }
   /**
@@ -450,27 +450,27 @@ class ne {
    */
   canHandle(r) {
     const t = r.getAttribute("field");
-    let e = v.get(r);
+    let e = w.get(r);
     if (!e && t) {
-      const s = w.get(t);
-      s && (s.renderer || s.editor) && (e = s, v.set(r, e));
+      const i = b.get(t);
+      i && (i.renderer || i.editor) && (e = i, w.set(r, e));
     }
-    const n = e?.renderer !== void 0, i = e?.editor !== void 0;
-    return e !== void 0 && (n || i);
+    const n = e?.renderer !== void 0, s = e?.editor !== void 0;
+    return e !== void 0 && (n || s);
   }
   /**
    * Creates a view renderer function that renders a Vue component
    * and returns its container DOM element.
    */
   createRenderer(r) {
-    const t = te(r);
+    const t = re(r);
     if (!t)
       return;
     const e = /* @__PURE__ */ new WeakMap();
     return (n) => {
-      const i = n.cellEl;
-      if (i) {
-        const c = e.get(i);
+      const s = n.cellEl;
+      if (s) {
+        const c = e.get(s);
         if (c)
           return c.update(n), c.container;
         const d = document.createElement("div");
@@ -481,22 +481,22 @@ class ne {
             return t(p);
           }
         });
-        return g.mount(d), e.set(i, {
+        return g.mount(d), e.set(s, {
           app: g,
           container: d,
-          update: (b) => {
-            p = b, g._instance?.update();
+          update: (R) => {
+            p = R, g._instance?.update();
           }
         }), d;
       }
-      const s = document.createElement("div");
-      s.className = "vue-cell-renderer", s.style.display = "contents";
-      const a = u({
+      const i = document.createElement("div");
+      i.className = "vue-cell-renderer", i.style.display = "contents";
+      const l = u({
         render() {
           return t(n);
         }
       });
-      return a.mount(s), this.mountedViews.push({ app: a, container: s }), s;
+      return l.mount(i), this.mountedViews.push({ app: l, container: i }), i;
     };
   }
   /**
@@ -504,17 +504,17 @@ class ne {
    * Returns a function that creates the editor DOM element.
    */
   createEditor(r) {
-    const t = re(r);
+    const t = ne(r);
     if (t)
       return (e) => {
         const n = document.createElement("div");
         n.className = "vue-cell-editor", n.style.display = "contents";
-        const i = u({
+        const s = u({
           render() {
             return t(e);
           }
         });
-        return i.mount(n), this.editorViews.push({ app: i, container: n }), n;
+        return s.mount(n), this.editorViews.push({ app: s, container: n }), n;
       };
   }
   /**
@@ -526,21 +526,21 @@ class ne {
     if (!t) return;
     const e = t.querySelector("tbw-grid-detail");
     if (!e) return;
-    const n = $.get(e);
+    const n = q.get(e);
     if (n)
-      return (i, s) => {
-        const a = document.createElement("div");
-        a.className = "vue-detail-panel";
-        const d = n({ row: i, rowIndex: s });
+      return (s, i) => {
+        const l = document.createElement("div");
+        l.className = "vue-detail-panel";
+        const d = n({ row: s, rowIndex: i });
         if (d && d.length > 0) {
           const p = u({
             render() {
               return d;
             }
           });
-          p.mount(a), this.mountedViews.push({ app: p, container: a });
+          p.mount(l), this.mountedViews.push({ app: p, container: l });
         }
-        return a;
+        return l;
       };
   }
   /**
@@ -552,21 +552,21 @@ class ne {
     if (!t) return;
     const e = t.querySelector("tbw-grid-responsive-card");
     if (!e) return;
-    const n = q.get(e);
+    const n = U.get(e);
     if (n)
-      return (i, s) => {
-        const a = document.createElement("div");
-        a.className = "vue-responsive-card";
-        const d = n({ row: i, rowIndex: s });
+      return (s, i) => {
+        const l = document.createElement("div");
+        l.className = "vue-responsive-card";
+        const d = n({ row: s, rowIndex: i });
         if (d && d.length > 0) {
           const p = u({
             render() {
               return d;
             }
           });
-          p.mount(a), this.mountedViews.push({ app: p, container: a });
+          p.mount(l), this.mountedViews.push({ app: p, container: l });
         }
-        return a;
+        return l;
       };
   }
   // #region Type Defaults Support
@@ -652,12 +652,12 @@ class ne {
     return (t, e) => {
       const n = document.createElement("div");
       n.style.display = "contents";
-      const i = u({
+      const s = u({
         render() {
           return r(e);
         }
       });
-      i.mount(n), this.mountedViews.push({ app: i, container: n }), t.appendChild(n);
+      s.mount(n), this.mountedViews.push({ app: s, container: n }), t.appendChild(n);
     };
   }
   // #endregion
@@ -676,7 +676,7 @@ class ne {
         r.unmount(), t.remove();
       } catch {
       }
-    this.editorViews = [], w.clear();
+    this.editorViews = [], b.clear();
   }
   /**
    * Unmount a specific container (e.g., detail panel, tool panel).
@@ -713,7 +713,7 @@ class ne {
     }
   }
 }
-const oe = ne, me = /* @__PURE__ */ h({
+const ie = oe, ge = /* @__PURE__ */ y({
   __name: "TbwGrid",
   props: {
     /** Row data to display */
@@ -737,6 +737,54 @@ const oe = ne, me = /* @__PURE__ */ h({
       default: void 0
     },
     // ═══════════════════════════════════════════════════════════════════
+    // GRID-WIDE TOGGLES
+    // ═══════════════════════════════════════════════════════════════════
+    /**
+     * Grid-wide sorting toggle.
+     * When false, disables sorting for all columns regardless of their individual `sortable` setting.
+     * @default true
+     */
+    sortable: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Grid-wide filtering toggle.
+     * When false, disables filtering for all columns regardless of their individual `filterable` setting.
+     * Requires the FilteringPlugin to be loaded (via `filtering` prop or feature import).
+     * @default true
+     */
+    filterable: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Grid-wide selection toggle.
+     * When false, disables selection for all rows/cells.
+     * Requires the SelectionPlugin to be loaded (via `selection` prop or feature import).
+     * @default true
+     */
+    selectable: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Show a loading overlay on the grid.
+     * Use this during initial data fetch or refresh operations.
+     * @default false
+     */
+    loading: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Custom CSS styles to inject into the grid via `document.adoptedStyleSheets`.
+     */
+    customStyles: {
+      type: String,
+      default: void 0
+    },
+    // ═══════════════════════════════════════════════════════════════════
     // FEATURE PROPS - Declarative plugin configuration
     // ═══════════════════════════════════════════════════════════════════
     /** Enable cell/row/range selection */
@@ -870,20 +918,21 @@ const oe = ne, me = /* @__PURE__ */ h({
       default: void 0
     }
   },
-  emits: ["cell-click", "row-click", "cell-activate", "cell-change", "cell-commit", "row-commit", "sort-change", "filter-change", "column-resize", "column-move", "column-visibility", "column-state-change", "selection-change", "row-move", "group-toggle", "tree-expand", "detail-expand", "responsive-change", "copy", "paste", "undo-redo", "export-complete", "print-start", "print-complete"],
+  emits: ["cell-click", "row-click", "cell-activate", "cell-change", "cell-commit", "row-commit", "changed-rows-reset", "sort-change", "filter-change", "column-resize", "column-move", "column-visibility", "column-state-change", "selection-change", "row-move", "group-toggle", "tree-expand", "detail-expand", "responsive-change", "copy", "paste", "undo-redo", "export-complete", "print-start", "print-complete"],
   setup(o, { expose: r, emit: t }) {
     let e = !1, n = null;
-    function i() {
-      return e || (n = new oe(), K.registerAdapter(n), e = !0), n;
+    function s() {
+      return e || (n = new ie(), Y.registerAdapter(n), e = !0), n;
     }
-    i();
-    const s = o, a = {
+    s();
+    const i = o, l = {
       "cell-click": "",
       "row-click": "",
       "cell-activate": "",
       "cell-change": "",
       "cell-commit": "",
       "row-commit": "",
+      "changed-rows-reset": "",
       "sort-change": "",
       "filter-change": "",
       "column-resize": "",
@@ -902,9 +951,9 @@ const oe = ne, me = /* @__PURE__ */ h({
       "export-complete": "",
       "print-start": "",
       "print-complete": ""
-    }, c = t, d = _(null);
-    k(x, d);
-    const p = H(), g = J(), b = [
+    }, c = t, d = B(null);
+    A(I, d);
+    const p = $(), g = Q(), R = [
       "selection",
       "editing",
       "clipboard",
@@ -935,56 +984,74 @@ const oe = ne, me = /* @__PURE__ */ h({
       "tooltip"
     ];
     function N() {
-      const l = [];
-      for (const m of b) {
-        const R = s[m];
-        if (R !== void 0) {
-          const E = Y(m, R);
-          E && l.push(E);
+      const a = [];
+      for (const f of R) {
+        const h = i[f];
+        if (h !== void 0) {
+          const E = J(f, h);
+          E && a.push(E);
         }
       }
-      return l;
+      return a;
     }
-    const S = U(() => {
-      const l = s.gridConfig ?? {}, m = N(), R = l.plugins ?? [], E = [...m, ...R], P = g ? { ...l.icons, ...g } : l.icons;
-      return {
-        ...l,
-        ...s.columns ? { columns: s.columns } : {},
+    const F = K(() => {
+      const a = i.gridConfig ?? {}, f = N(), h = a.plugins ?? [], E = [...f, ...h], j = g ? { ...a.icons, ...g } : a.icons, P = {};
+      return i.sortable !== void 0 && (P.sortable = i.sortable), i.filterable !== void 0 && (P.filterable = i.filterable), i.selectable !== void 0 && (P.selectable = i.selectable), {
+        ...a,
+        ...P,
+        ...i.columns ? { columns: i.columns } : {},
         ...E.length > 0 ? { plugins: E } : {},
-        ...P ? { icons: P } : {}
+        ...j ? { icons: j } : {}
       };
-    }), F = [];
-    return D(() => {
-      const l = d.value;
-      if (!l) return;
-      const m = i();
-      l.__frameworkAdapter = m, m.setTypeDefaults(p ?? null);
-      for (const R of Object.keys(a))
-        F.push(l.on(R, (E, P) => c(R, P)));
-      s.rows.length > 0 && (l.rows = s.rows), S.value && (l.gridConfig = S.value), s.fitMode && (l.fitMode = s.fitMode);
-    }), M(() => {
-      d.value && (F.forEach((m) => m()), F.length = 0);
-    }), B(
-      () => s.rows,
-      (l) => {
-        d.value && (d.value.rows = l);
+    }), k = [];
+    return _(() => {
+      const a = d.value;
+      if (!a) return;
+      const f = s();
+      a.__frameworkAdapter = f, f.setTypeDefaults(p ?? null);
+      for (const h of Object.keys(l))
+        k.push(a.on(h, (E, j) => c(h, j)));
+      i.rows.length > 0 && (a.rows = i.rows), F.value && (a.gridConfig = F.value), i.fitMode && (a.fitMode = i.fitMode), i.loading !== void 0 && (a.loading = i.loading), i.customStyles && a.ready?.().then(() => {
+        d.value && d.value.registerStyles?.("vue-custom-styles", i.customStyles);
+      });
+    }), W(() => {
+      const a = d.value;
+      a && (i.customStyles && a.unregisterStyles?.("vue-custom-styles"), k.forEach((f) => f()), k.length = 0);
+    }), S(
+      () => i.rows,
+      (a) => {
+        d.value && (d.value.rows = a);
       },
       { deep: !0 }
-    ), B(
-      S,
-      (l) => {
-        d.value && l && (d.value.gridConfig = l);
+    ), S(
+      F,
+      (a) => {
+        d.value && a && (d.value.gridConfig = a);
       },
       { deep: !0 }
-    ), B(
-      () => s.fitMode,
-      (l) => {
-        d.value && l && (d.value.fitMode = l);
+    ), S(
+      () => i.fitMode,
+      (a) => {
+        d.value && a && (d.value.fitMode = a);
       }
-    ), B(
+    ), S(
+      () => i.loading,
+      (a) => {
+        d.value && a !== void 0 && (d.value.loading = a);
+      }
+    ), S(
+      () => i.customStyles,
+      (a, f) => {
+        if (!d.value) return;
+        const h = d.value;
+        f && !a ? h.unregisterStyles?.("vue-custom-styles") : a && h.ready?.().then(() => {
+          d.value && d.value.registerStyles?.("vue-custom-styles", a);
+        });
+      }
+    ), S(
       () => p,
-      (l) => {
-        i().setTypeDefaults(l ?? null);
+      (a) => {
+        s().setTypeDefaults(a ?? null);
       },
       { deep: !0 }
     ), r({
@@ -996,14 +1063,14 @@ const oe = ne, me = /* @__PURE__ */ h({
       getConfig: () => d.value?.getConfig(),
       /** Wait for grid to be ready */
       ready: () => d.value?.ready()
-    }), (l, m) => (O(), j("tbw-grid", {
+    }), (a, f) => (O(), D("tbw-grid", {
       ref_key: "gridRef",
       ref: d
     }, [
-      W(l.$slots, "default")
+      x(a.$slots, "default")
     ], 512));
   }
-}), ie = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], ge = /* @__PURE__ */ h({
+}), se = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], he = /* @__PURE__ */ y({
   __name: "TbwGridColumn",
   props: {
     field: {},
@@ -1019,37 +1086,37 @@ const oe = ne, me = /* @__PURE__ */ h({
     hidden: { type: Boolean }
   },
   setup(o) {
-    const r = G(), t = _(null);
-    return D(() => {
+    const r = G(), t = B(null);
+    return _(() => {
       const e = t.value;
       if (!e) return;
-      const n = !!r.cell, i = !!r.editor;
-      n && Z(e, (s) => {
-        const a = r.cell;
-        if (!a) return T("span");
-        const c = a({
-          value: s.value,
-          row: s.row,
-          column: s.column
+      const n = !!r.cell, s = !!r.editor;
+      n && ee(e, (i) => {
+        const l = r.cell;
+        if (!l) return T("span");
+        const c = l({
+          value: i.value,
+          row: i.row,
+          column: i.column
         });
         return T("div", { style: "display: contents" }, c);
-      }), i && ee(e, (s) => {
-        const a = r.editor;
-        if (!a) return T("span");
-        const c = a({
-          value: s.value,
-          row: s.row,
-          column: s.column,
-          field: s.field,
-          rowId: s.rowId ?? "",
-          commit: s.commit,
-          cancel: s.cancel,
-          updateRow: s.updateRow,
-          onValueChange: s.onValueChange
+      }), s && te(e, (i) => {
+        const l = r.editor;
+        if (!l) return T("span");
+        const c = l({
+          value: i.value,
+          row: i.row,
+          column: i.column,
+          field: i.field,
+          rowId: i.rowId ?? "",
+          commit: i.commit,
+          cancel: i.cancel,
+          updateRow: i.updateRow,
+          onValueChange: i.onValueChange
         });
         return T("div", { style: "display: contents" }, c);
       });
-    }), (e, n) => (O(), j("tbw-grid-column", {
+    }), (e, n) => (O(), D("tbw-grid-column", {
       ref_key: "columnRef",
       ref: t,
       field: o.field,
@@ -1063,46 +1130,46 @@ const oe = ne, me = /* @__PURE__ */ h({
       type: o.type,
       align: o.align,
       hidden: o.hidden
-    }, null, 8, ie));
+    }, null, 8, se));
   }
-}), se = ["show-expand-column", "animation"], he = /* @__PURE__ */ h({
+}), de = ["show-expand-column", "animation"], ye = /* @__PURE__ */ y({
   __name: "TbwGridDetailPanel",
   props: {
     showExpandColumn: { type: Boolean, default: !0 },
     animation: { type: [String, Boolean], default: "slide" }
   },
   setup(o) {
-    const r = _(null), t = G();
-    return D(() => {
+    const r = B(null), t = G();
+    return _(() => {
       const e = r.value;
-      !e || !t.default || $.set(e, (n) => t.default?.(n));
-    }), (e, n) => (O(), j("tbw-grid-detail", {
+      !e || !t.default || q.set(e, (n) => t.default?.(n));
+    }), (e, n) => (O(), D("tbw-grid-detail", {
       ref_key: "detailRef",
       ref: r,
       "show-expand-column": o.showExpandColumn,
       animation: o.animation
-    }, null, 8, se));
+    }, null, 8, de));
   }
-}), ye = /* @__PURE__ */ h({
+}), ve = /* @__PURE__ */ y({
   __name: "TbwGridResponsiveCard",
   setup(o) {
-    const r = _(null), t = G();
-    return D(() => {
+    const r = B(null), t = G();
+    return _(() => {
       const e = r.value;
-      !e || !t.default || q.set(e, (n) => t.default?.(n));
-    }), (e, n) => (O(), j("tbw-grid-responsive-card", {
+      !e || !t.default || U.set(e, (n) => t.default?.(n));
+    }), (e, n) => (O(), D("tbw-grid-responsive-card", {
       ref_key: "cardRef",
       ref: r
     }, null, 512));
   }
-}), ve = /* @__PURE__ */ h({
+}), we = /* @__PURE__ */ y({
   __name: "TbwGridToolButtons",
   setup(o) {
-    return (r, t) => (O(), j("tbw-grid-tool-buttons", null, [
-      W(r.$slots, "default")
+    return (r, t) => (O(), D("tbw-grid-tool-buttons", null, [
+      x(r.$slots, "default")
     ]));
   }
-}), de = /* @__PURE__ */ new WeakMap(), ae = ["id", "label", "icon", "position", "width"], we = /* @__PURE__ */ h({
+}), ae = /* @__PURE__ */ new WeakMap(), le = ["id", "label", "icon", "position", "width"], be = /* @__PURE__ */ y({
   __name: "TbwGridToolPanel",
   props: {
     id: {},
@@ -1112,11 +1179,11 @@ const oe = ne, me = /* @__PURE__ */ h({
     width: { default: "250px" }
   },
   setup(o) {
-    const r = _(null), t = G();
-    return D(() => {
+    const r = B(null), t = G();
+    return _(() => {
       const e = r.value;
-      !e || !t.default || de.set(e, (n) => t.default?.(n));
-    }), (e, n) => (O(), j("tbw-grid-tool-panel", {
+      !e || !t.default || ae.set(e, (n) => t.default?.(n));
+    }), (e, n) => (O(), D("tbw-grid-tool-panel", {
       ref_key: "panelRef",
       ref: r,
       id: o.id,
@@ -1124,29 +1191,29 @@ const oe = ne, me = /* @__PURE__ */ h({
       icon: o.icon,
       position: o.position,
       width: o.width
-    }, null, 8, ae));
+    }, null, 8, le));
   }
 });
-let L = !1;
-function be(o, r, t) {
-  !L && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (L = !0, console.warn(
+let M = !1;
+function Re(o, r, t) {
+  !M && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (M = !0, console.warn(
     `[useGridEvent] Deprecated: Use @event handlers directly on <TbwGrid> instead.
 Example: <TbwGrid @selection-change="handler" />
 See migration guide: https://toolboxjs.com/grid-vue/migration`
   ));
-  const e = t ?? A(x, _(null));
+  const e = t ?? L(I, B(null));
   let n = null;
-  D(() => {
-    const i = e.value;
-    i && (n = i.on(
+  _(() => {
+    const s = e.value;
+    s && (n = s.on(
       o,
-      (s, a) => r(a)
+      (i, l) => r(l)
     ));
-  }), M(() => {
+  }), W(() => {
     n?.();
   });
 }
-const Re = h({
+const Ce = y({
   name: "GridProvider",
   props: {
     /**
@@ -1169,42 +1236,42 @@ const Re = h({
       let t = r.default?.();
       if (o.typeDefaults) {
         const e = t;
-        t = T(X, { defaults: o.typeDefaults }, () => e);
+        t = T(Z, { defaults: o.typeDefaults }, () => e);
       }
       if (o.icons) {
         const e = t;
-        t = T(Q, { icons: o.icons }, () => e);
+        t = T(X, { icons: o.icons }, () => e);
       }
       return t;
     };
   }
 });
 export {
-  x as GRID_ELEMENT_KEY,
-  I as GRID_ICONS,
-  z as GRID_TYPE_DEFAULTS,
-  ne as GridAdapter,
-  Q as GridIconProvider,
-  Re as GridProvider,
-  X as GridTypeProvider,
-  me as TbwGrid,
-  ge as TbwGridColumn,
-  he as TbwGridDetailPanel,
-  ye as TbwGridResponsiveCard,
-  ve as TbwGridToolButtons,
-  we as TbwGridToolPanel,
-  oe as VueGridAdapter,
-  Ve as clearFeatureRegistry,
+  I as GRID_ELEMENT_KEY,
+  z as GRID_ICONS,
+  H as GRID_TYPE_DEFAULTS,
+  oe as GridAdapter,
+  X as GridIconProvider,
+  Ce as GridProvider,
+  Z as GridTypeProvider,
+  ge as TbwGrid,
+  he as TbwGridColumn,
+  ye as TbwGridDetailPanel,
+  ve as TbwGridResponsiveCard,
+  we as TbwGridToolButtons,
+  be as TbwGridToolPanel,
+  ie as VueGridAdapter,
+  Se as clearFeatureRegistry,
   Te as createPluginFromFeature,
-  _e as getFeatureFactory,
-  De as getRegisteredFeatures,
-  je as isFeatureRegistered,
-  y as isVueComponent,
+  Be as getFeatureFactory,
+  _e as getRegisteredFeatures,
+  De as isFeatureRegistered,
+  v as isVueComponent,
   Oe as registerFeature,
-  Be as useGrid,
-  be as useGridEvent,
-  J as useGridIcons,
-  H as useGridTypeDefaults,
-  fe as useTypeDefault
+  Pe as useGrid,
+  Re as useGridEvent,
+  Q as useGridIcons,
+  $ as useGridTypeDefaults,
+  me as useTypeDefault
 };
 //# sourceMappingURL=index.js.map