@toolbox-web/grid-vue 0.7.1 → 0.9.0

package/index.js

@@ -1,14 +1,14 @@
-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 G, 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 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-B59B6XdD.js";
-import { u as Ae } from "./chunks/use-grid-B59B6XdD.js";
+import { defineComponent as y, provide as N, inject as k, createApp as u, createVNode as V, ref as O, computed as re, onMounted as P, onBeforeUnmount as q, watch as G, createElementBlock as T, openBlock as j, renderSlot as x, useSlots as B, h as L } from "vue";
+import { DataGridElement as ne } from "@toolbox-web/grid";
+import { createPluginFromFeature as oe } from "@toolbox-web/grid/features/registry";
+import { clearFeatureRegistry as Be, createPluginFromFeature as Se, getFeatureFactory as Ne, getRegisteredFeatures as ke, isFeatureRegistered as Fe, registerFeature as Ae } from "@toolbox-web/grid/features/registry";
+import { G as U } from "./chunks/use-grid-B59B6XdD.js";
+import { u as We } from "./chunks/use-grid-B59B6XdD.js";
 const K = /* @__PURE__ */ Symbol("grid-icons");
 function ie() {
-  return F(K, void 0);
+  return k(K, void 0);
 }
-const se = y({
+const de = y({
   name: "GridIconProvider",
   props: {
     /**
@@ -19,17 +19,17 @@ const se = y({
       required: !0
     }
   },
-  setup(i, { slots: e }) {
-    return L(K, i.icons), () => e.default?.();
+  setup(i, { slots: t }) {
+    return N(K, i.icons), () => t.default?.();
   }
 }), Y = /* @__PURE__ */ Symbol("grid-type-defaults");
 function J() {
-  return F(Y, void 0);
+  return k(Y, void 0);
 }
 function Ce(i) {
   return J()?.[i];
 }
-const de = y({
+const se = y({
   name: "GridTypeProvider",
   props: {
     /**
@@ -40,60 +40,60 @@ const de = y({
       required: !0
     }
   },
-  setup(i, { slots: e }) {
-    return L(Y, i.defaults), () => e.default?.();
+  setup(i, { slots: t }) {
+    return N(Y, i.defaults), () => t.default?.();
   }
-}), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new Map();
-function le(i, e) {
-  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);
+}), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new Map();
+function ae(i, t) {
+  const r = i.getAttribute("field"), e = w.get(i) ?? {};
+  if (e.renderer = t, w.set(i, e), r) {
+    const n = C.get(r) ?? {};
+    n.renderer = t, C.set(r, n);
   }
 }
-function ae(i, e) {
-  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 le(i, t) {
+  const r = i.getAttribute("field"), e = w.get(i) ?? {};
+  if (e.editor = t, w.set(i, e), r) {
+    const n = C.get(r) ?? {};
+    n.editor = t, C.set(r, n);
   }
 }
 function ce(i) {
-  let e = v.get(i)?.renderer;
-  if (!e) {
-    const t = i.getAttribute("field");
-    t && (e = w.get(t)?.renderer);
+  let t = w.get(i)?.renderer;
+  if (!t) {
+    const r = i.getAttribute("field");
+    r && (t = C.get(r)?.renderer);
   }
-  return e;
+  return t;
 }
 function ue(i) {
-  let e = v.get(i)?.editor;
-  if (!e) {
-    const t = i.getAttribute("field");
-    t && (e = w.get(t)?.editor);
+  let t = w.get(i)?.editor;
+  if (!t) {
+    const r = i.getAttribute("field");
+    r && (t = C.get(r)?.editor);
   }
-  return e;
+  return t;
 }
-function D(i) {
+function v(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;
+    const t = i;
+    if ("__name" in t || typeof t.setup == "function" || typeof t.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 t = i;
-    if ("__name" in t || typeof t.setup == "function") return !0;
+    const t = Function.prototype.toString.call(i);
+    if (t.startsWith("class ") || t.startsWith("class{")) return !0;
+    const r = i;
+    if ("__name" in r || typeof r.setup == "function") return !0;
   }
   return !1;
 }
-function j(i) {
-  return typeof i == "function" && !D(i);
+function R(i) {
+  return typeof i == "function" && !v(i);
 }
-const E = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
-class fe {
+const m = /* @__PURE__ */ Symbol.for("tbw:vue-processed");
+class pe {
   mountedViews = [];
   /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
   editorViews = [];
@@ -123,9 +123,13 @@ class fe {
    * @param config - Vue grid config with possible component/VNode references
    * @returns Processed config with DOM-returning functions
    */
-  processGridConfig(e) {
-    const t = { ...e };
-    return e.columns && (t.columns = e.columns.map((n) => this.processColumn(n))), e.typeDefaults && (t.typeDefaults = this.processTypeDefaults(e.typeDefaults)), t;
+  processGridConfig(t) {
+    const r = { ...t };
+    return t.columns && (r.columns = t.columns.map((e) => this.processColumn(e))), t.typeDefaults && (r.typeDefaults = this.processTypeDefaults(t.typeDefaults)), t.loadingRenderer && (v(t.loadingRenderer) ? r.loadingRenderer = this.createComponentLoadingRenderer(
+      t.loadingRenderer
+    ) : R(t.loadingRenderer) && (r.loadingRenderer = this.createVNodeLoadingRenderer(
+      t.loadingRenderer
+    ))), r;
   }
   /**
    * Processes typeDefaults, converting Vue component/VNode references
@@ -134,21 +138,21 @@ class fe {
    * @param typeDefaults - Vue type defaults with possible component references
    * @returns Processed TypeDefault record
    */
-  processTypeDefaults(e) {
-    const t = {};
-    for (const [n, r] of Object.entries(e)) {
-      const s = {
-        editorParams: r.editorParams
+  processTypeDefaults(t) {
+    const r = {};
+    for (const [e, n] of Object.entries(t)) {
+      const d = {
+        editorParams: n.editorParams
       };
-      r.renderer && (D(r.renderer) ? s.renderer = this.createConfigComponentRenderer(r.renderer) : j(r.renderer) && (s.renderer = this.createTypeRenderer(
-        r.renderer
-      ))), r.editor && (D(r.editor) ? s.editor = this.createConfigComponentEditor(
-        r.editor
-      ) : j(r.editor) && (s.editor = this.createTypeEditor(
-        r.editor
-      ))), r.filterPanelRenderer && (s.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer)), t[n] = s;
+      n.renderer && (v(n.renderer) ? d.renderer = this.createConfigComponentRenderer(n.renderer) : R(n.renderer) && (d.renderer = this.createTypeRenderer(
+        n.renderer
+      ))), n.editor && (v(n.editor) ? d.editor = this.createConfigComponentEditor(
+        n.editor
+      ) : R(n.editor) && (d.editor = this.createTypeEditor(
+        n.editor
+      ))), n.filterPanelRenderer && (d.filterPanelRenderer = this.createFilterPanelRenderer(n.filterPanelRenderer)), r[e] = d;
     }
-    return t;
+    return r;
   }
   /**
    * Processes a single column configuration, converting Vue component references
@@ -157,65 +161,87 @@ class fe {
    * @param column - Vue column config
    * @returns Processed ColumnConfig with DOM-returning functions
    */
-  processColumn(e) {
-    const t = { ...e };
-    if (e.renderer && !e.renderer[E]) {
-      if (D(e.renderer)) {
-        const n = this.createConfigComponentRenderer(e.renderer);
-        n[E] = !0, t.renderer = n;
-      } else if (j(e.renderer)) {
-        const n = this.createConfigVNodeRenderer(e.renderer);
-        n[E] = !0, t.renderer = n;
+  processColumn(t) {
+    const r = { ...t };
+    if (t.renderer && !t.renderer[m]) {
+      if (v(t.renderer)) {
+        const e = this.createConfigComponentRenderer(t.renderer);
+        e[m] = !0, r.renderer = e;
+      } else if (R(t.renderer)) {
+        const e = this.createConfigVNodeRenderer(t.renderer);
+        e[m] = !0, r.renderer = e;
+      }
+    }
+    if (t.editor && !t.editor[m]) {
+      if (v(t.editor)) {
+        const e = this.createConfigComponentEditor(t.editor);
+        e[m] = !0, r.editor = e;
+      } else if (R(t.editor)) {
+        const e = this.createConfigVNodeEditor(t.editor);
+        e[m] = !0, r.editor = e;
       }
     }
-    if (e.editor && !e.editor[E]) {
-      if (D(e.editor)) {
-        const n = this.createConfigComponentEditor(e.editor);
-        n[E] = !0, t.editor = n;
-      } else if (j(e.editor)) {
-        const n = this.createConfigVNodeEditor(e.editor);
-        n[E] = !0, t.editor = n;
+    if (t.headerRenderer && !t.headerRenderer[m]) {
+      if (v(t.headerRenderer)) {
+        const e = this.createConfigComponentHeaderRenderer(t.headerRenderer);
+        e[m] = !0, r.headerRenderer = e;
+      } else if (R(t.headerRenderer)) {
+        const e = this.createConfigVNodeHeaderRenderer(
+          t.headerRenderer
+        );
+        e[m] = !0, r.headerRenderer = e;
       }
     }
-    return t;
+    if (t.headerLabelRenderer && !t.headerLabelRenderer[m]) {
+      if (v(t.headerLabelRenderer)) {
+        const e = this.createConfigComponentHeaderLabelRenderer(t.headerLabelRenderer);
+        e[m] = !0, r.headerLabelRenderer = e;
+      } else if (R(t.headerLabelRenderer)) {
+        const e = this.createConfigVNodeHeaderLabelRenderer(
+          t.headerLabelRenderer
+        );
+        e[m] = !0, r.headerLabelRenderer = e;
+      }
+    }
+    return r;
   }
   /**
    * Creates a DOM-returning renderer from a Vue component class.
    * Used for config-based renderers (not slot-based).
    * @internal
    */
-  createConfigComponentRenderer(e) {
-    const t = /* @__PURE__ */ new WeakMap();
-    return (n) => {
-      const r = n.cellEl;
-      if (r) {
-        const a = t.get(r);
-        if (a)
-          return a.update(n), a.container;
+  createConfigComponentRenderer(t) {
+    const r = /* @__PURE__ */ new WeakMap();
+    return (e) => {
+      const n = e.cellEl;
+      if (n) {
+        const l = r.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 u = n;
-        const g = e, h = f({
+        let p = e;
+        const h = t, b = u({
           render() {
-            return k(g, { ...u });
+            return V(h, { ...p });
           }
         });
-        return h.mount(c), t.set(r, {
-          app: h,
+        return b.mount(c), r.set(n, {
+          app: b,
           container: c,
-          update: (V) => {
-            u = V, h._instance?.update();
+          update: (_) => {
+            p = _, b._instance?.update();
           }
         }), c;
       }
-      const s = document.createElement("div");
-      s.className = "vue-cell-renderer", s.style.display = "contents";
-      const d = e, l = f({
+      const d = document.createElement("div");
+      d.className = "vue-cell-renderer", d.style.display = "contents";
+      const s = t, a = u({
         render() {
-          return k(d, { ...n });
+          return V(s, { ...e });
         }
       });
-      return l.mount(s), this.mountedViews.push({ app: l, container: s }), s;
+      return a.mount(d), this.mountedViews.push({ app: a, container: d }), d;
     };
   }
   /**
@@ -223,38 +249,38 @@ class fe {
    * Used for config-based renderers (not slot-based).
    * @internal
    */
-  createConfigVNodeRenderer(e) {
-    const t = /* @__PURE__ */ new WeakMap();
-    return (n) => {
-      const r = n.cellEl;
-      if (r) {
-        const l = t.get(r);
-        if (l)
-          return l.update(n), l.container;
-        const a = document.createElement("div");
-        a.className = "vue-cell-renderer", a.style.display = "contents";
-        let c = n;
-        const u = f({
+  createConfigVNodeRenderer(t) {
+    const r = /* @__PURE__ */ new WeakMap();
+    return (e) => {
+      const n = e.cellEl;
+      if (n) {
+        const a = r.get(n);
+        if (a)
+          return a.update(e), a.container;
+        const l = document.createElement("div");
+        l.className = "vue-cell-renderer", l.style.display = "contents";
+        let c = e;
+        const p = u({
           render() {
-            return e(c);
+            return t(c);
           }
         });
-        return u.mount(a), t.set(r, {
-          app: u,
-          container: a,
-          update: (g) => {
-            c = g, u._instance?.update();
+        return p.mount(l), r.set(n, {
+          app: p,
+          container: l,
+          update: (h) => {
+            c = h, p._instance?.update();
           }
-        }), a;
+        }), l;
       }
-      const s = document.createElement("div");
-      s.className = "vue-cell-renderer", s.style.display = "contents";
-      const d = f({
+      const d = document.createElement("div");
+      d.className = "vue-cell-renderer", d.style.display = "contents";
+      const s = u({
         render() {
-          return e(n);
+          return t(e);
         }
       });
-      return d.mount(s), this.mountedViews.push({ app: d, container: s }), s;
+      return s.mount(d), this.mountedViews.push({ app: s, container: d }), d;
     };
   }
   /**
@@ -262,16 +288,16 @@ class fe {
    * Used for config-based editors (not slot-based).
    * @internal
    */
-  createConfigComponentEditor(e) {
-    return (t) => {
-      const n = document.createElement("div");
-      n.className = "vue-cell-editor", n.style.display = "contents";
-      const r = e, s = f({
+  createConfigComponentEditor(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-cell-editor", e.style.display = "contents";
+      const n = t, d = u({
         render() {
-          return k(r, { ...t });
+          return V(n, { ...r });
         }
       });
-      return s.mount(n), this.editorViews.push({ app: s, container: n }), n;
+      return d.mount(e), this.editorViews.push({ app: d, container: e }), e;
     };
   }
   /**
@@ -279,16 +305,126 @@ class fe {
    * Used for config-based editors (not slot-based).
    * @internal
    */
-  createConfigVNodeEditor(e) {
-    return (t) => {
-      const n = document.createElement("div");
-      n.className = "vue-cell-editor", n.style.display = "contents";
-      const r = f({
+  createConfigVNodeEditor(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-cell-editor", e.style.display = "contents";
+      const n = u({
+        render() {
+          return t(r);
+        }
+      });
+      return n.mount(e), this.editorViews.push({ app: n, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning header renderer from a Vue component class.
+   * Used for config-based headerRenderer (not slot-based).
+   * @internal
+   */
+  createConfigComponentHeaderRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-header-renderer", e.style.display = "contents";
+      const n = t, d = u({
+        render() {
+          return V(n, {
+            column: r.column,
+            value: r.value,
+            sortState: r.sortState,
+            filterActive: r.filterActive,
+            renderSortIcon: r.renderSortIcon,
+            renderFilterButton: r.renderFilterButton
+          });
+        }
+      });
+      return d.mount(e), this.mountedViews.push({ app: d, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning header renderer from a VNode-returning render function.
+   * Used for config-based headerRenderer (not slot-based).
+   * @internal
+   */
+  createConfigVNodeHeaderRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-header-renderer", e.style.display = "contents";
+      const n = u({
         render() {
-          return e(t);
+          return t(r);
         }
       });
-      return r.mount(n), this.editorViews.push({ app: r, container: n }), n;
+      return n.mount(e), this.mountedViews.push({ app: n, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning header label renderer from a Vue component class.
+   * Used for config-based headerLabelRenderer (not slot-based).
+   * @internal
+   */
+  createConfigComponentHeaderLabelRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-header-label-renderer", e.style.display = "contents";
+      const n = t, d = u({
+        render() {
+          return V(n, {
+            column: r.column,
+            value: r.value
+          });
+        }
+      });
+      return d.mount(e), this.mountedViews.push({ app: d, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning header label renderer from a VNode-returning render function.
+   * Used for config-based headerLabelRenderer (not slot-based).
+   * @internal
+   */
+  createConfigVNodeHeaderLabelRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-header-label-renderer", e.style.display = "contents";
+      const n = u({
+        render() {
+          return t(r);
+        }
+      });
+      return n.mount(e), this.mountedViews.push({ app: n, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning loading renderer from a Vue component class.
+   * @internal
+   */
+  createComponentLoadingRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-loading-renderer", e.style.display = "contents";
+      const n = t, d = u({
+        render() {
+          return V(n, { size: r.size });
+        }
+      });
+      return d.mount(e), this.mountedViews.push({ app: d, container: e }), e;
+    };
+  }
+  /**
+   * Creates a DOM-returning loading renderer from a VNode-returning render function.
+   * @internal
+   */
+  createVNodeLoadingRenderer(t) {
+    return (r) => {
+      const e = document.createElement("div");
+      e.className = "vue-loading-renderer", e.style.display = "contents";
+      const n = u({
+        render() {
+          return t(r);
+        }
+      });
+      return n.mount(e), this.mountedViews.push({ app: n, container: e }), e;
     };
   }
   // #endregion
@@ -298,132 +434,132 @@ class fe {
    *
    * @internal
    */
-  setTypeDefaults(e) {
-    this.typeDefaults = e;
+  setTypeDefaults(t) {
+    this.typeDefaults = t;
   }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a renderer or editor is registered for this element.
    */
-  canHandle(e) {
-    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));
+  canHandle(t) {
+    const r = t.getAttribute("field");
+    let e = w.get(t);
+    if (!e && r) {
+      const s = C.get(r);
+      s && (s.renderer || s.editor) && (e = s, w.set(t, e));
     }
-    const r = n?.renderer !== void 0, s = n?.editor !== void 0;
-    return n !== void 0 && (r || s);
+    const n = e?.renderer !== void 0, d = e?.editor !== void 0;
+    return e !== void 0 && (n || d);
   }
   /**
    * Creates a view renderer function that renders a Vue component
    * and returns its container DOM element.
    */
-  createRenderer(e) {
-    const t = ce(e);
-    if (!t)
+  createRenderer(t) {
+    const r = ce(t);
+    if (!r)
       return;
-    const n = /* @__PURE__ */ new WeakMap();
-    return (r) => {
-      const s = r.cellEl;
-      if (s) {
-        const a = n.get(s);
-        if (a)
-          return a.update(r), a.container;
+    const e = /* @__PURE__ */ new WeakMap();
+    return (n) => {
+      const d = n.cellEl;
+      if (d) {
+        const l = e.get(d);
+        if (l)
+          return l.update(n), l.container;
         const c = document.createElement("div");
         c.className = "vue-cell-renderer", c.style.display = "contents";
-        let u = r;
-        const g = f({
+        let p = n;
+        const h = u({
           render() {
-            return t(u);
+            return r(p);
           }
         });
-        return g.mount(c), n.set(s, {
-          app: g,
+        return h.mount(c), e.set(d, {
+          app: h,
           container: c,
-          update: (h) => {
-            u = h, g._instance?.update();
+          update: (b) => {
+            p = b, h._instance?.update();
           }
         }), c;
       }
-      const d = document.createElement("div");
-      d.className = "vue-cell-renderer", d.style.display = "contents";
-      const l = f({
+      const s = document.createElement("div");
+      s.className = "vue-cell-renderer", s.style.display = "contents";
+      const a = u({
         render() {
-          return t(r);
+          return r(n);
         }
       });
-      return l.mount(d), this.mountedViews.push({ app: l, container: d }), d;
+      return a.mount(s), this.mountedViews.push({ app: a, container: s }), s;
     };
   }
   /**
    * Creates an editor spec that renders a Vue component for cell editing.
    * Returns a function that creates the editor DOM element.
    */
-  createEditor(e) {
-    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({
+  createEditor(t) {
+    const r = ue(t);
+    if (r)
+      return (e) => {
+        const n = document.createElement("div");
+        n.className = "vue-cell-editor", n.style.display = "contents";
+        const d = u({
           render() {
-            return t(n);
+            return r(e);
           }
         });
-        return s.mount(r), this.editorViews.push({ app: s, container: r }), r;
+        return d.mount(n), this.editorViews.push({ app: d, container: n }), n;
       };
   }
   /**
    * Framework adapter hook called by MasterDetailPlugin during attach().
    * Parses the <tbw-grid-detail> element and returns a Vue-based renderer.
    */
-  parseDetailElement(e) {
-    const t = e.closest("tbw-grid");
-    if (!t) return;
-    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");
-        l.className = "vue-detail-panel";
-        const c = r({ row: s, rowIndex: d });
+  parseDetailElement(t) {
+    const r = t.closest("tbw-grid");
+    if (!r) return;
+    const e = r.querySelector("tbw-grid-detail");
+    if (!e) return;
+    const n = Q.get(e);
+    if (n)
+      return (d, s) => {
+        const a = document.createElement("div");
+        a.className = "vue-detail-panel";
+        const c = n({ row: d, rowIndex: s });
         if (c && c.length > 0) {
-          const u = f({
+          const p = u({
             render() {
               return c;
             }
           });
-          u.mount(l), this.mountedViews.push({ app: u, container: l });
+          p.mount(a), this.mountedViews.push({ app: p, container: a });
         }
-        return l;
+        return a;
       };
   }
   /**
    * Framework adapter hook called by ResponsivePlugin during attach().
    * Parses the <tbw-grid-responsive-card> element and returns a Vue-based renderer.
    */
-  parseResponsiveCardElement(e) {
-    const t = e.closest("tbw-grid");
-    if (!t) return;
-    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");
-        l.className = "vue-responsive-card";
-        const c = r({ row: s, rowIndex: d });
+  parseResponsiveCardElement(t) {
+    const r = t.closest("tbw-grid");
+    if (!r) return;
+    const e = r.querySelector("tbw-grid-responsive-card");
+    if (!e) return;
+    const n = X.get(e);
+    if (n)
+      return (d, s) => {
+        const a = document.createElement("div");
+        a.className = "vue-responsive-card";
+        const c = n({ row: d, rowIndex: s });
         if (c && c.length > 0) {
-          const u = f({
+          const p = u({
             render() {
               return c;
             }
           });
-          u.mount(l), this.mountedViews.push({ app: u, container: l });
+          p.mount(a), this.mountedViews.push({ app: p, container: a });
         }
-        return l;
+        return a;
       };
   }
   // #region Type Defaults Support
@@ -455,47 +591,47 @@ class fe {
    * </template>
    * ```
    */
-  getTypeDefault(e) {
+  getTypeDefault(t) {
     if (!this.typeDefaults)
       return;
-    const t = this.typeDefaults[e];
-    if (!t)
+    const r = this.typeDefaults[t];
+    if (!r)
       return;
-    const n = {
-      editorParams: t.editorParams
+    const e = {
+      editorParams: r.editorParams
     };
-    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;
+    return r.renderer && (e.renderer = this.createTypeRenderer(r.renderer)), r.editor && (e.editor = this.createTypeEditor(r.editor)), r.filterPanelRenderer && (e.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer)), e;
   }
   /**
    * Creates a renderer function from a Vue render function for type defaults.
    * @internal
    */
-  createTypeRenderer(e) {
-    return (t) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const r = f({
+  createTypeRenderer(t) {
+    return (r) => {
+      const e = document.createElement("span");
+      e.style.display = "contents";
+      const n = u({
         render() {
-          return e(t);
+          return t(r);
         }
       });
-      return r.mount(n), this.mountedViews.push({ app: r, container: n }), n;
+      return n.mount(e), this.mountedViews.push({ app: n, container: e }), e;
     };
   }
   /**
    * Creates an editor function from a Vue render function for type defaults.
    * @internal
    */
-  createTypeEditor(e) {
-    return (t) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const r = f({
+  createTypeEditor(t) {
+    return (r) => {
+      const e = document.createElement("span");
+      e.style.display = "contents";
+      const n = u({
         render() {
-          return e(t);
+          return t(r);
         }
       });
-      return r.mount(n), this.editorViews.push({ app: r, container: n }), n;
+      return n.mount(e), this.editorViews.push({ app: n, container: e }), e;
     };
   }
   /**
@@ -505,16 +641,16 @@ class fe {
    * imperative `(container, params) => void` signature expected by the core grid.
    * @internal
    */
-  createFilterPanelRenderer(e) {
-    return (t, n) => {
-      const r = document.createElement("div");
-      r.style.display = "contents";
-      const s = f({
+  createFilterPanelRenderer(t) {
+    return (r, e) => {
+      const n = document.createElement("div");
+      n.style.display = "contents";
+      const d = u({
         render() {
-          return e(n);
+          return t(e);
         }
       });
-      s.mount(r), this.mountedViews.push({ app: s, container: r }), t.appendChild(r);
+      d.mount(n), this.mountedViews.push({ app: d, container: n }), r.appendChild(n);
     };
   }
   // #endregion
@@ -522,15 +658,15 @@ class fe {
    * Cleanup all mounted Vue apps.
    */
   cleanup() {
-    for (const { app: e, container: t } of this.mountedViews)
+    for (const { app: t, container: r } of this.mountedViews)
       try {
-        e.unmount(), t.remove();
+        t.unmount(), r.remove();
       } catch {
       }
     this.mountedViews = [];
-    for (const { app: e, container: t } of this.editorViews)
+    for (const { app: t, container: r } of this.editorViews)
       try {
-        e.unmount(), t.remove();
+        t.unmount(), r.remove();
       } catch {
       }
     this.editorViews = [];
@@ -540,15 +676,15 @@ class fe {
    * Finds the matching entry in mountedViews by container reference
    * and properly destroys the Vue app to prevent memory leaks.
    */
-  unmount(e) {
-    for (let t = this.mountedViews.length - 1; t >= 0; t--) {
-      const n = this.mountedViews[t];
-      if (n.container === e || e.contains(n.container)) {
+  unmount(t) {
+    for (let r = this.mountedViews.length - 1; r >= 0; r--) {
+      const e = this.mountedViews[r];
+      if (e.container === t || t.contains(e.container)) {
         try {
-          n.app.unmount();
+          e.app.unmount();
         } catch {
         }
-        this.mountedViews.splice(t, 1);
+        this.mountedViews.splice(r, 1);
         return;
       }
     }
@@ -557,20 +693,20 @@ class fe {
    * 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)) {
+  releaseCell(t) {
+    for (let r = this.editorViews.length - 1; r >= 0; r--) {
+      const { app: e, container: n } = this.editorViews[r];
+      if (t.contains(n)) {
         try {
-          n.unmount(), r.remove();
+          e.unmount(), n.remove();
         } catch {
         }
-        this.editorViews.splice(t, 1);
+        this.editorViews.splice(r, 1);
       }
     }
   }
 }
-const pe = fe, Re = /* @__PURE__ */ y({
+const fe = pe, Ee = /* @__PURE__ */ y({
   __name: "TbwGrid",
   props: {
     /** Row data to display */
@@ -632,6 +768,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
       default: void 0
     },
     /** Enable column drag-to-reorder */
+    reorderColumns: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** @deprecated Use `reorderColumns` instead */
     reorder: {
       type: [Boolean, Object],
       default: void 0
@@ -657,6 +798,11 @@ const pe = fe, Re = /* @__PURE__ */ y({
       default: void 0
     },
     /** Enable row drag-to-reorder */
+    reorderRows: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** @deprecated Use `reorderRows` instead */
     rowReorder: {
       type: [Boolean, Object],
       default: void 0
@@ -713,15 +859,15 @@ 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: t }) {
-    let n = !1, r = null;
-    function s() {
-      return n || (r = new pe(), re.registerAdapter(r), n = !0), r;
+  setup(i, { expose: t, emit: r }) {
+    let e = !1, n = null;
+    function d() {
+      return e || (n = new fe(), ne.registerAdapter(n), e = !0), n;
     }
-    s();
-    const d = i, l = t, a = R(null);
-    L(H, a);
-    const c = J(), u = ie(), g = [
+    d();
+    const s = i, a = r, l = O(null);
+    N(U, l);
+    const c = J(), p = ie(), h = [
       "selection",
       "editing",
       "clipboard",
@@ -729,12 +875,16 @@ const pe = fe, Re = /* @__PURE__ */ y({
       "multiSort",
       "sorting",
       "filtering",
+      "reorderColumns",
       "reorder",
+      // deprecated alias for reorderColumns
       "visibility",
       "pinnedColumns",
       "groupingColumns",
       "columnVirtualization",
+      "reorderRows",
       "rowReorder",
+      // deprecated alias for reorderRows
       "groupingRows",
       "pinnedRows",
       "tree",
@@ -746,60 +896,60 @@ const pe = fe, Re = /* @__PURE__ */ y({
       "pivot",
       "serverSide"
     ];
-    function h() {
+    function b() {
       const o = [];
-      for (const p of g) {
-        const b = d[p];
-        if (b !== void 0) {
-          const m = oe(p, b);
-          m && o.push(m);
+      for (const f of h) {
+        const E = s[f];
+        if (E !== void 0) {
+          const g = oe(f, E);
+          g && o.push(g);
         }
       }
       return o;
     }
-    const V = ne(() => {
-      const o = d.gridConfig ?? {}, p = h(), b = o.plugins ?? [], m = [...p, ...b], _ = u ? { ...o.icons, ...u } : o.icons;
+    const _ = re(() => {
+      const o = s.gridConfig ?? {}, f = b(), E = o.plugins ?? [], g = [...f, ...E], D = p ? { ...o.icons, ...p } : o.icons;
       return {
         ...o,
-        ...d.columns ? { columns: d.columns } : {},
-        ...m.length > 0 ? { plugins: m } : {},
-        ..._ ? { icons: _ } : {}
+        ...s.columns ? { columns: s.columns } : {},
+        ...g.length > 0 ? { plugins: g } : {},
+        ...D ? { icons: D } : {}
       };
     });
-    function M(o) {
-      l("cell-commit", o);
-    }
-    function N(o) {
-      l("row-commit", o);
+    function F(o) {
+      a("cell-commit", o);
     }
     function A(o) {
-      l("cell-click", o);
+      a("row-commit", o);
+    }
+    function M(o) {
+      a("cell-click", o);
     }
     function W(o) {
-      l("cell-dblclick", o);
+      a("cell-dblclick", o);
     }
     function I(o) {
-      l("selection-change", o);
+      a("selection-change", o);
     }
-    function x(o) {
-      l("row-toggle", o);
+    function H(o) {
+      a("row-toggle", o);
     }
     function $(o) {
-      l("sort-change", o);
+      a("sort-change", o);
     }
     function z(o) {
-      l("ready", o);
+      a("ready", o);
     }
-    function Z(o, p) {
-      const b = Object.getPrototypeOf(o), m = Object.getOwnPropertyDescriptor(b, "gridConfig");
-      if (!m?.set || !m?.get) return;
-      const _ = m.set, te = m.get;
+    function Z(o, f) {
+      const E = Object.getPrototypeOf(o), g = Object.getOwnPropertyDescriptor(E, "gridConfig");
+      if (!g?.set || !g?.get) return;
+      const D = g.set, te = g.get;
       Object.defineProperty(o, "gridConfig", {
         get() {
           return te.call(this);
         },
         set(S) {
-          S && p ? _.call(this, p.processGridConfig(S)) : _.call(this, S);
+          S && f ? D.call(this, f.processGridConfig(S)) : D.call(this, S);
         },
         configurable: !0
       });
@@ -807,54 +957,54 @@ const pe = fe, Re = /* @__PURE__ */ y({
     function ee(o) {
       delete o.gridConfig;
     }
-    return T(() => {
-      const o = a.value;
+    return P(() => {
+      const o = l.value;
       if (!o) return;
-      const p = s();
-      o.__frameworkAdapter = p, p.setTypeDefaults(c ?? null), Z(o, p), o.addEventListener("cell-commit", M), o.addEventListener("row-commit", N), o.addEventListener("cell-click", A), o.addEventListener("cell-dblclick", W), o.addEventListener("selection-change", I), o.addEventListener("row-toggle", x), o.addEventListener("sort-change", $), o.addEventListener("ready", z), d.rows.length > 0 && (o.rows = d.rows), V.value && (o.gridConfig = V.value), d.fitMode && (o.fitMode = d.fitMode);
+      const f = d();
+      o.__frameworkAdapter = f, f.setTypeDefaults(c ?? null), Z(o, f), o.addEventListener("cell-commit", F), o.addEventListener("row-commit", A), o.addEventListener("cell-click", M), o.addEventListener("cell-dblclick", W), o.addEventListener("selection-change", I), o.addEventListener("row-toggle", H), o.addEventListener("sort-change", $), o.addEventListener("ready", z), s.rows.length > 0 && (o.rows = s.rows), _.value && (o.gridConfig = _.value), s.fitMode && (o.fitMode = s.fitMode);
     }), q(() => {
-      const o = a.value;
-      o && (ee(o), o.removeEventListener("cell-commit", M), o.removeEventListener("row-commit", N), o.removeEventListener("cell-click", A), o.removeEventListener("cell-dblclick", W), o.removeEventListener("selection-change", I), o.removeEventListener("row-toggle", x), o.removeEventListener("sort-change", $), o.removeEventListener("ready", z));
+      const o = l.value;
+      o && (ee(o), o.removeEventListener("cell-commit", F), o.removeEventListener("row-commit", A), o.removeEventListener("cell-click", M), o.removeEventListener("cell-dblclick", W), o.removeEventListener("selection-change", I), o.removeEventListener("row-toggle", H), o.removeEventListener("sort-change", $), o.removeEventListener("ready", z));
     }), G(
-      () => d.rows,
+      () => s.rows,
       (o) => {
-        a.value && (a.value.rows = o);
+        l.value && (l.value.rows = o);
       },
       { deep: !0 }
     ), G(
-      V,
+      _,
       (o) => {
-        a.value && o && (a.value.gridConfig = o);
+        l.value && o && (l.value.gridConfig = o);
       },
       { deep: !0 }
     ), G(
-      () => d.fitMode,
+      () => s.fitMode,
       (o) => {
-        a.value && o && (a.value.fitMode = o);
+        l.value && o && (l.value.fitMode = o);
       }
     ), G(
       () => c,
       (o) => {
-        s().setTypeDefaults(o ?? null);
+        d().setTypeDefaults(o ?? null);
       },
       { deep: !0 }
-    ), e({
+    ), t({
       /** The underlying grid element */
-      gridElement: a,
+      gridElement: l,
       /** Force a layout recalculation */
-      forceLayout: () => a.value?.forceLayout(),
+      forceLayout: () => l.value?.forceLayout(),
       /** Get current grid configuration */
-      getConfig: () => a.value?.getConfig(),
+      getConfig: () => l.value?.getConfig(),
       /** Wait for grid to be ready */
-      ready: () => a.value?.ready()
-    }), (o, p) => (P(), O("tbw-grid", {
+      ready: () => l.value?.ready()
+    }), (o, f) => (j(), T("tbw-grid", {
       ref_key: "gridRef",
-      ref: a
+      ref: l
     }, [
-      U(o.$slots, "default")
+      x(o.$slots, "default")
     ], 512));
   }
-}), me = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], Te = /* @__PURE__ */ y({
+}), me = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], Ve = /* @__PURE__ */ y({
   __name: "TbwGridColumn",
   props: {
     field: {},
@@ -870,39 +1020,39 @@ const pe = fe, Re = /* @__PURE__ */ y({
     hidden: { type: Boolean }
   },
   setup(i) {
-    const e = B(), t = R(null);
-    return T(() => {
-      const n = t.value;
-      if (!n) return;
-      const r = !!e.cell, s = !!e.editor;
-      r && le(n, (d) => {
-        const l = e.cell;
-        if (!l) return C("span");
-        const a = l({
-          value: d.value,
-          row: d.row,
-          column: d.column
+    const t = B(), r = O(null);
+    return P(() => {
+      const e = r.value;
+      if (!e) return;
+      const n = !!t.cell, d = !!t.editor;
+      n && ae(e, (s) => {
+        const a = t.cell;
+        if (!a) return L("span");
+        const l = a({
+          value: s.value,
+          row: s.row,
+          column: s.column
         });
-        return C("div", { style: "display: contents" }, a);
-      }), s && ae(n, (d) => {
-        const l = e.editor;
-        if (!l) return C("span");
-        const a = l({
-          value: d.value,
-          row: d.row,
-          column: d.column,
-          field: d.field,
-          rowId: d.rowId ?? "",
-          commit: d.commit,
-          cancel: d.cancel,
-          updateRow: d.updateRow,
-          onValueChange: d.onValueChange
+        return L("div", { style: "display: contents" }, l);
+      }), d && le(e, (s) => {
+        const a = t.editor;
+        if (!a) return L("span");
+        const l = 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
         });
-        return C("div", { style: "display: contents" }, a);
+        return L("div", { style: "display: contents" }, l);
       });
-    }), (n, r) => (P(), O("tbw-grid-column", {
+    }), (e, n) => (j(), T("tbw-grid-column", {
       ref_key: "columnRef",
-      ref: t,
+      ref: r,
       field: i.field,
       header: i.header,
       width: i.width,
@@ -916,44 +1066,44 @@ const pe = fe, Re = /* @__PURE__ */ y({
       hidden: i.hidden
     }, null, 8, me));
   }
-}), ge = ["show-expand-column", "animation"], Oe = /* @__PURE__ */ y({
+}), ge = ["show-expand-column", "animation"], Le = /* @__PURE__ */ y({
   __name: "TbwGridDetailPanel",
   props: {
     showExpandColumn: { type: Boolean, default: !0 },
     animation: { type: [String, Boolean], default: "slide" }
   },
   setup(i) {
-    const e = R(null), t = B();
-    return T(() => {
-      const n = e.value;
-      !n || !t.default || Q.set(n, (r) => t.default?.(r));
-    }), (n, r) => (P(), O("tbw-grid-detail", {
+    const t = O(null), r = B();
+    return P(() => {
+      const e = t.value;
+      !e || !r.default || Q.set(e, (n) => r.default?.(n));
+    }), (e, n) => (j(), T("tbw-grid-detail", {
       ref_key: "detailRef",
-      ref: e,
+      ref: t,
       "show-expand-column": i.showExpandColumn,
       animation: i.animation
     }, null, 8, ge));
   }
-}), Pe = /* @__PURE__ */ y({
+}), Oe = /* @__PURE__ */ y({
   __name: "TbwGridResponsiveCard",
   setup(i) {
-    const e = R(null), t = B();
-    return T(() => {
-      const n = e.value;
-      !n || !t.default || X.set(n, (r) => t.default?.(r));
-    }), (n, r) => (P(), O("tbw-grid-responsive-card", {
+    const t = O(null), r = B();
+    return P(() => {
+      const e = t.value;
+      !e || !r.default || X.set(e, (n) => r.default?.(n));
+    }), (e, n) => (j(), T("tbw-grid-responsive-card", {
       ref_key: "cardRef",
-      ref: e
+      ref: t
     }, null, 512));
   }
-}), Ve = /* @__PURE__ */ y({
+}), Pe = /* @__PURE__ */ y({
   __name: "TbwGridToolButtons",
   setup(i) {
-    return (e, t) => (P(), O("tbw-grid-tool-buttons", null, [
-      U(e.$slots, "default")
+    return (t, r) => (j(), T("tbw-grid-tool-buttons", null, [
+      x(t.$slots, "default")
     ]));
   }
-}), ye = /* @__PURE__ */ new WeakMap(), ve = ["id", "label", "icon", "position", "width"], _e = /* @__PURE__ */ y({
+}), he = /* @__PURE__ */ new WeakMap(), ye = ["id", "label", "icon", "position", "width"], Te = /* @__PURE__ */ y({
   __name: "TbwGridToolPanel",
   props: {
     id: {},
@@ -963,34 +1113,34 @@ const pe = fe, Re = /* @__PURE__ */ y({
     width: { default: "250px" }
   },
   setup(i) {
-    const e = R(null), t = B();
-    return T(() => {
-      const n = e.value;
-      !n || !t.default || ye.set(n, (r) => t.default?.(r));
-    }), (n, r) => (P(), O("tbw-grid-tool-panel", {
+    const t = O(null), r = B();
+    return P(() => {
+      const e = t.value;
+      !e || !r.default || he.set(e, (n) => r.default?.(n));
+    }), (e, n) => (j(), T("tbw-grid-tool-panel", {
       ref_key: "panelRef",
-      ref: e,
+      ref: t,
       id: i.id,
       label: i.label,
       icon: i.icon,
       position: i.position,
       width: i.width
-    }, null, 8, ve));
+    }, null, 8, ye));
   }
 });
-function De(i, e, t) {
-  const n = t ?? F(H, R(null));
-  let r = null;
-  T(() => {
-    const s = n.value;
-    if (!s) return;
-    const d = e;
-    s.addEventListener(i, d), r = () => s.removeEventListener(i, d);
+function je(i, t, r) {
+  const e = r ?? k(U, O(null));
+  let n = null;
+  P(() => {
+    const d = e.value;
+    if (!d) return;
+    const s = t;
+    d.addEventListener(i, s), n = () => d.removeEventListener(i, s);
   }), q(() => {
-    r?.();
+    n?.();
   });
 }
-const Ge = y({
+const _e = y({
   name: "GridProvider",
   props: {
     /**
@@ -1008,37 +1158,37 @@ const Ge = y({
       default: void 0
     }
   },
-  setup(i, { slots: e }) {
+  setup(i, { slots: t }) {
     return () => {
-      let t = e.default?.();
-      return i.typeDefaults && (t = C(de, { defaults: i.typeDefaults }, () => t)), i.icons && (t = C(se, { icons: i.icons }, () => t)), t;
+      let r = t.default?.();
+      return i.typeDefaults && (r = L(se, { defaults: i.typeDefaults }, () => r)), i.icons && (r = L(de, { icons: i.icons }, () => r)), r;
     };
   }
 });
 export {
-  H as GRID_ELEMENT_KEY,
+  U as GRID_ELEMENT_KEY,
   K as GRID_ICONS,
   Y as GRID_TYPE_DEFAULTS,
-  fe as GridAdapter,
-  se as GridIconProvider,
-  Ge as GridProvider,
-  de as GridTypeProvider,
-  Re as TbwGrid,
-  Te as TbwGridColumn,
-  Oe as TbwGridDetailPanel,
-  Pe as TbwGridResponsiveCard,
-  Ve as TbwGridToolButtons,
-  _e as TbwGridToolPanel,
-  pe as VueGridAdapter,
-  Se as clearFeatureRegistry,
-  oe as createPluginFromFeature,
-  ke as getFeatureFactory,
-  Le as getRegisteredFeatures,
+  pe as GridAdapter,
+  de as GridIconProvider,
+  _e as GridProvider,
+  se as GridTypeProvider,
+  Ee as TbwGrid,
+  Ve as TbwGridColumn,
+  Le as TbwGridDetailPanel,
+  Oe as TbwGridResponsiveCard,
+  Pe as TbwGridToolButtons,
+  Te as TbwGridToolPanel,
+  fe as VueGridAdapter,
+  Be as clearFeatureRegistry,
+  Se as createPluginFromFeature,
+  Ne as getFeatureFactory,
+  ke as getRegisteredFeatures,
   Fe as isFeatureRegistered,
-  D as isVueComponent,
-  Me as registerFeature,
-  Ae as useGrid,
-  De as useGridEvent,
+  v as isVueComponent,
+  Ae as registerFeature,
+  We as useGrid,
+  je as useGridEvent,
   ie as useGridIcons,
   J as useGridTypeDefaults,
   Ce as useTypeDefault