@toolbox-web/grid-vue 0.2.0 → 0.3.0

package/index.js

@@ -1,10 +1,12 @@
-import { defineComponent as p, provide as G, inject as O, ref as y, createApp as g, computed as Y, onMounted as b, onBeforeUnmount as $, watch as B, createElementBlock as w, openBlock as E, renderSlot as I, useSlots as _, h } from "vue";
+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 Te, g as Be, b as Oe, i as _e, r as je } 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 O(z, void 0);
+  return D(z, void 0);
 }
 const X = p({
   name: "GridIconProvider",
@@ -17,15 +19,15 @@ const X = p({
       required: !0
     }
   },
-  setup(n, { slots: t }) {
-    return G(z, n.icons), () => t.default?.();
+  setup(o, { slots: t }) {
+    return j(z, o.icons), () => t.default?.();
   }
 }), N = /* @__PURE__ */ Symbol("grid-type-defaults");
 function q() {
-  return O(N, void 0);
+  return D(N, void 0);
 }
-function fe(n) {
-  return q()?.[n];
+function me(o) {
+  return q()?.[o];
 }
 const Z = p({
   name: "GridTypeProvider",
@@ -38,51 +40,36 @@ const Z = p({
       required: !0
     }
   },
-  setup(n, { slots: t }) {
-    return G(N, n.defaults), () => t.default?.();
+  setup(o, { slots: t }) {
+    return j(N, o.defaults), () => t.default?.();
   }
-}), L = /* @__PURE__ */ Symbol("tbw-grid");
-function pe() {
-  const n = O(L, y(null));
-  return {
-    gridElement: n,
-    forceLayout: async () => {
-      await n.value?.forceLayout();
-    },
-    getConfig: () => n.value?.getConfig(),
-    ready: async () => {
-      await n.value?.ready();
-    },
-    getPlugin: (t) => n.value?.getPlugin(t)
-  };
-}
-const U = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new Map();
-function ee(n, t) {
-  const e = n.getAttribute("field"), r = m.get(n) ?? {};
-  if (r.renderer = t, m.set(n, r), e) {
+}), 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);
   }
 }
-function te(n, t) {
-  const e = n.getAttribute("field"), r = m.get(n) ?? {};
-  if (r.editor = t, m.set(n, r), e) {
+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 ne(n) {
-  let t = m.get(n)?.renderer;
+function ne(o) {
+  let t = m.get(o)?.renderer;
   if (!t) {
-    const e = n.getAttribute("field");
+    const e = o.getAttribute("field");
     e && (t = v.get(e)?.renderer);
   }
   return t;
 }
-function re(n) {
-  let t = m.get(n)?.editor;
+function re(o) {
+  let t = m.get(o)?.editor;
   if (!t) {
-    const e = n.getAttribute("field");
+    const e = o.getAttribute("field");
     e && (t = v.get(e)?.editor);
   }
   return t;
@@ -105,13 +92,13 @@ class oe {
    */
   canHandle(t) {
     const e = t.getAttribute("field");
-    let r = m.get(t);
-    if (!r && e) {
+    let n = m.get(t);
+    if (!n && e) {
       const l = v.get(e);
-      l && (l.renderer || l.editor) && (r = l, m.set(t, r));
+      l && (l.renderer || l.editor) && (n = l, m.set(t, n));
     }
-    const i = r?.renderer !== void 0, a = r?.editor !== void 0;
-    return r !== void 0 && (i || a);
+    const i = n?.renderer !== void 0, a = n?.editor !== void 0;
+    return n !== void 0 && (i || a);
   }
   /**
    * Creates a view renderer function that renders a Vue component
@@ -121,11 +108,11 @@ class oe {
     const e = ne(t);
     if (!e)
       return;
-    const r = /* @__PURE__ */ new WeakMap();
+    const n = /* @__PURE__ */ new WeakMap();
     return (i) => {
       const a = i.cellEl;
       if (a) {
-        const s = r.get(a);
+        const s = n.get(a);
         if (s)
           return s.update(i), s.container;
         const c = document.createElement("div");
@@ -136,11 +123,11 @@ class oe {
             return e(u);
           }
         });
-        return R.mount(c), r.set(a, {
+        return R.mount(c), n.set(a, {
           app: R,
           container: c,
-          update: (j) => {
-            u = j, R._instance?.update();
+          update: (O) => {
+            u = O, R._instance?.update();
           }
         }), c;
       }
@@ -161,12 +148,12 @@ class oe {
   createEditor(t) {
     const e = re(t);
     if (e)
-      return (r) => {
+      return (n) => {
         const i = document.createElement("div");
         i.className = "vue-cell-editor", i.style.display = "contents";
         const a = g({
           render() {
-            return e(r);
+            return e(n);
           }
         });
         return a.mount(i), this.mountedViews.push({ app: a, container: i }), i;
@@ -179,9 +166,9 @@ class oe {
   parseDetailElement(t) {
     const e = t.closest("tbw-grid");
     if (!e) return;
-    const r = e.querySelector("tbw-grid-detail");
-    if (!r) return;
-    const i = U.get(r);
+    const n = e.querySelector("tbw-grid-detail");
+    if (!n) return;
+    const i = U.get(n);
     if (i)
       return (a, l) => {
         const d = document.createElement("div");
@@ -205,9 +192,9 @@ class oe {
   parseResponsiveCardElement(t) {
     const e = t.closest("tbw-grid");
     if (!e) return;
-    const r = e.querySelector("tbw-grid-responsive-card");
-    if (!r) return;
-    const i = H.get(r);
+    const n = e.querySelector("tbw-grid-responsive-card");
+    if (!n) return;
+    const i = H.get(n);
     if (i)
       return (a, l) => {
         const d = document.createElement("div");
@@ -259,10 +246,10 @@ class oe {
     const e = this.typeDefaults[t];
     if (!e)
       return;
-    const r = {
+    const n = {
       editorParams: e.editorParams
     };
-    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), r;
+    return e.renderer && (n.renderer = this.createTypeRenderer(e.renderer)), e.editor && (n.editor = this.createTypeEditor(e.editor)), n;
   }
   /**
    * Creates a renderer function from a Vue render function for type defaults.
@@ -270,14 +257,14 @@ class oe {
    */
   createTypeRenderer(t) {
     return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
+      const n = document.createElement("span");
+      n.style.display = "contents";
       const i = g({
         render() {
           return t(e);
         }
       });
-      return i.mount(r), this.mountedViews.push({ app: i, container: r }), r;
+      return i.mount(n), this.mountedViews.push({ app: i, container: n }), n;
     };
   }
   /**
@@ -286,14 +273,14 @@ class oe {
    */
   createTypeEditor(t) {
     return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
+      const n = document.createElement("span");
+      n.style.display = "contents";
       const i = g({
         render() {
           return t(e);
         }
       });
-      return i.mount(r), this.mountedViews.push({ app: i, container: r }), r;
+      return i.mount(n), this.mountedViews.push({ app: i, container: n }), n;
     };
   }
   // #endregion
@@ -309,7 +296,7 @@ class oe {
     this.mountedViews = [];
   }
 }
-const me = /* @__PURE__ */ p({
+const ie = oe, ge = /* @__PURE__ */ p({
   __name: "TbwGrid",
   props: {
     /** Row data to display */
@@ -452,14 +439,14 @@ const me = /* @__PURE__ */ p({
     }
   },
   emits: ["cell-commit", "row-commit", "cell-click", "cell-dblclick", "selection-change", "row-toggle", "sort-change", "ready"],
-  setup(n, { expose: t, emit: e }) {
-    let r = !1, i = null;
+  setup(o, { expose: t, emit: e }) {
+    let n = !1, i = null;
     function a() {
-      return r || (i = new oe(), K.registerAdapter(i), r = !0), i;
+      return n || (i = new ie(), K.registerAdapter(i), n = !0), i;
     }
     a();
-    const l = n, d = e, s = y(null);
-    G(L, s);
+    const l = o, d = e, s = h(null);
+    j(I, s);
     const c = q(), u = Q(), R = [
       "selection",
       "editing",
@@ -485,79 +472,79 @@ const me = /* @__PURE__ */ p({
       "pivot",
       "serverSide"
     ];
-    function j() {
-      const o = [];
+    function O() {
+      const r = [];
       for (const f of R) {
         const T = l[f];
         if (T !== void 0) {
           const C = J(f, T);
-          C && o.push(C);
+          C && r.push(C);
         }
       }
-      return o;
+      return r;
     }
-    const D = Y(() => {
-      const o = l.gridConfig ?? {}, f = j(), T = o.plugins ?? [], C = [...f, ...T], W = u ? { ...o.icons, ...u } : o.icons;
+    const _ = Y(() => {
+      const r = l.gridConfig ?? {}, f = O(), T = r.plugins ?? [], C = [...f, ...T], V = u ? { ...r.icons, ...u } : r.icons;
       return {
-        ...o,
+        ...r,
         ...l.columns ? { columns: l.columns } : {},
         ...C.length > 0 ? { plugins: C } : {},
-        ...W ? { icons: W } : {}
+        ...V ? { icons: V } : {}
       };
     });
-    function S(o) {
-      d("cell-commit", o);
+    function k(r) {
+      d("cell-commit", r);
     }
-    function k(o) {
-      d("row-commit", o);
+    function S(r) {
+      d("row-commit", r);
     }
-    function P(o) {
-      d("cell-click", o);
+    function L(r) {
+      d("cell-click", r);
     }
-    function x(o) {
-      d("cell-dblclick", o);
+    function P(r) {
+      d("cell-dblclick", r);
     }
-    function F(o) {
-      d("selection-change", o);
+    function x(r) {
+      d("selection-change", r);
     }
-    function A(o) {
-      d("row-toggle", o);
+    function A(r) {
+      d("row-toggle", r);
     }
-    function M(o) {
-      d("sort-change", o);
+    function F(r) {
+      d("sort-change", r);
     }
-    function V(o) {
-      d("ready", o);
+    function M(r) {
+      d("ready", r);
     }
     return b(() => {
-      const o = s.value;
-      if (!o) return;
+      const r = s.value;
+      if (!r) return;
       const f = a();
-      o.__frameworkAdapter = f, f.setTypeDefaults(c ?? null), o.addEventListener("cell-commit", S), o.addEventListener("row-commit", k), o.addEventListener("cell-click", P), o.addEventListener("cell-dblclick", x), o.addEventListener("selection-change", F), o.addEventListener("row-toggle", A), o.addEventListener("sort-change", M), o.addEventListener("ready", V), l.rows.length > 0 && (o.rows = l.rows), D.value && (o.gridConfig = D.value), l.fitMode && (o.fitMode = l.fitMode);
-    }), $(() => {
-      const o = s.value;
-      o && (o.removeEventListener("cell-commit", S), o.removeEventListener("row-commit", k), o.removeEventListener("cell-click", P), o.removeEventListener("cell-dblclick", x), o.removeEventListener("selection-change", F), o.removeEventListener("row-toggle", A), o.removeEventListener("sort-change", M), o.removeEventListener("ready", V));
+      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));
     }), B(
       () => l.rows,
-      (o) => {
-        s.value && (s.value.rows = o);
+      (r) => {
+        s.value && (s.value.rows = r);
       },
       { deep: !0 }
     ), B(
-      D,
-      (o) => {
-        s.value && o && (s.value.gridConfig = o);
+      _,
+      (r) => {
+        s.value && r && (s.value.gridConfig = r);
       },
       { deep: !0 }
     ), B(
       () => l.fitMode,
-      (o) => {
-        s.value && o && (s.value.fitMode = o);
+      (r) => {
+        s.value && r && (s.value.fitMode = r);
       }
     ), B(
       () => c,
-      (o) => {
-        a().setTypeDefaults(o ?? null);
+      (r) => {
+        a().setTypeDefaults(r ?? null);
       },
       { deep: !0 }
     ), t({
@@ -569,14 +556,14 @@ const me = /* @__PURE__ */ p({
       getConfig: () => s.value?.getConfig(),
       /** Wait for grid to be ready */
       ready: () => s.value?.ready()
-    }), (o, f) => (E(), w("tbw-grid", {
+    }), (r, f) => (E(), w("tbw-grid", {
       ref_key: "gridRef",
       ref: s
     }, [
-      I(o.$slots, "default")
+      $(r.$slots, "default")
     ], 512));
   }
-}), ie = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], ge = /* @__PURE__ */ p({
+}), le = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], ve = /* @__PURE__ */ p({
   __name: "TbwGridColumn",
   props: {
     field: {},
@@ -591,24 +578,24 @@ const me = /* @__PURE__ */ p({
     align: {},
     hidden: { type: Boolean }
   },
-  setup(n) {
-    const t = _(), e = y(null);
+  setup(o) {
+    const t = G(), e = h(null);
     return b(() => {
-      const r = e.value;
-      if (!r) return;
+      const n = e.value;
+      if (!n) return;
       const i = !!t.cell, a = !!t.editor;
-      i && ee(r, (l) => {
+      i && ee(n, (l) => {
         const d = t.cell;
-        if (!d) return h("span");
+        if (!d) return y("span");
         const s = d({
           value: l.value,
           row: l.row,
           column: l.column
         });
-        return h("div", { style: "display: contents" }, s);
-      }), a && te(r, (l) => {
+        return y("div", { style: "display: contents" }, s);
+      }), a && te(n, (l) => {
         const d = t.editor;
-        if (!d) return h("span");
+        if (!d) return y("span");
         const s = d({
           value: l.value,
           row: l.row,
@@ -616,62 +603,62 @@ const me = /* @__PURE__ */ p({
           commit: l.commit,
           cancel: l.cancel
         });
-        return h("div", { style: "display: contents" }, s);
+        return y("div", { style: "display: contents" }, s);
       });
-    }), (r, i) => (E(), w("tbw-grid-column", {
+    }), (n, i) => (E(), w("tbw-grid-column", {
       ref_key: "columnRef",
       ref: e,
-      field: n.field,
-      header: n.header,
-      width: n.width,
-      "min-width": n.minWidth,
-      "max-width": n.maxWidth,
-      sortable: n.sortable,
-      resizable: n.resizable,
-      editable: n.editable,
-      type: n.type,
-      align: n.align,
-      hidden: n.hidden
-    }, null, 8, ie));
+      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));
   }
-}), le = ["show-expand-column", "animation"], ve = /* @__PURE__ */ p({
+}), de = ["show-expand-column", "animation"], ye = /* @__PURE__ */ p({
   __name: "TbwGridDetailPanel",
   props: {
     showExpandColumn: { type: Boolean, default: !0 },
     animation: { type: [String, Boolean], default: "slide" }
   },
-  setup(n) {
-    const t = y(null), e = _();
+  setup(o) {
+    const t = h(null), e = G();
     return b(() => {
-      const r = t.value;
-      !r || !e.default || U.set(r, (i) => e.default?.(i));
-    }), (r, i) => (E(), w("tbw-grid-detail", {
+      const n = t.value;
+      !n || !e.default || U.set(n, (i) => e.default?.(i));
+    }), (n, i) => (E(), w("tbw-grid-detail", {
       ref_key: "detailRef",
       ref: t,
-      "show-expand-column": n.showExpandColumn,
-      animation: n.animation
-    }, null, 8, le));
+      "show-expand-column": o.showExpandColumn,
+      animation: o.animation
+    }, null, 8, de));
   }
-}), ye = /* @__PURE__ */ p({
+}), he = /* @__PURE__ */ p({
   __name: "TbwGridResponsiveCard",
-  setup(n) {
-    const t = y(null), e = _();
+  setup(o) {
+    const t = h(null), e = G();
     return b(() => {
-      const r = t.value;
-      !r || !e.default || H.set(r, (i) => e.default?.(i));
-    }), (r, i) => (E(), w("tbw-grid-responsive-card", {
+      const n = t.value;
+      !n || !e.default || H.set(n, (i) => e.default?.(i));
+    }), (n, i) => (E(), w("tbw-grid-responsive-card", {
       ref_key: "cardRef",
       ref: t
     }, null, 512));
   }
-}), he = /* @__PURE__ */ p({
+}), be = /* @__PURE__ */ p({
   __name: "TbwGridToolButtons",
-  setup(n) {
+  setup(o) {
     return (t, e) => (E(), w("tbw-grid-tool-buttons", null, [
-      I(t.$slots, "default")
+      $(t.$slots, "default")
     ]));
   }
-}), de = /* @__PURE__ */ new WeakMap(), se = ["id", "label", "icon", "position", "width"], be = /* @__PURE__ */ p({
+}), se = /* @__PURE__ */ new WeakMap(), ae = ["id", "label", "icon", "position", "width"], we = /* @__PURE__ */ p({
   __name: "TbwGridToolPanel",
   props: {
     id: {},
@@ -680,35 +667,35 @@ const me = /* @__PURE__ */ p({
     position: { default: "right" },
     width: { default: "250px" }
   },
-  setup(n) {
-    const t = y(null), e = _();
+  setup(o) {
+    const t = h(null), e = G();
     return b(() => {
-      const r = t.value;
-      !r || !e.default || de.set(r, (i) => e.default?.(i));
-    }), (r, i) => (E(), w("tbw-grid-tool-panel", {
+      const n = t.value;
+      !n || !e.default || se.set(n, (i) => e.default?.(i));
+    }), (n, i) => (E(), w("tbw-grid-tool-panel", {
       ref_key: "panelRef",
       ref: t,
-      id: n.id,
-      label: n.label,
-      icon: n.icon,
-      position: n.position,
-      width: n.width
-    }, null, 8, se));
+      id: o.id,
+      label: o.label,
+      icon: o.icon,
+      position: o.position,
+      width: o.width
+    }, null, 8, ae));
   }
 });
-function we(n, t, e) {
-  const r = e ?? O(L, y(null));
+function Ee(o, t, e) {
+  const n = e ?? D(I, h(null));
   let i = null;
   b(() => {
-    const a = r.value;
+    const a = n.value;
     if (!a) return;
     const l = t;
-    a.addEventListener(n, l), i = () => a.removeEventListener(n, l);
-  }), $(() => {
+    a.addEventListener(o, l), i = () => a.removeEventListener(o, l);
+  }), W(() => {
     i?.();
   });
 }
-const Ee = p({
+const Re = p({
   name: "GridProvider",
   props: {
     /**
@@ -726,37 +713,38 @@ const Ee = p({
       default: void 0
     }
   },
-  setup(n, { slots: t }) {
+  setup(o, { slots: t }) {
     return () => {
       let e = t.default?.();
-      return n.typeDefaults && (e = h(Z, { defaults: n.typeDefaults }, () => e)), n.icons && (e = h(X, { icons: n.icons }, () => e)), e;
+      return o.typeDefaults && (e = y(Z, { defaults: o.typeDefaults }, () => e)), o.icons && (e = y(X, { icons: o.icons }, () => e)), e;
     };
   }
 });
 export {
-  L as GRID_ELEMENT_KEY,
+  I as GRID_ELEMENT_KEY,
   z as GRID_ICONS,
   N as GRID_TYPE_DEFAULTS,
+  oe as GridAdapter,
   X as GridIconProvider,
-  Ee as GridProvider,
+  Re as GridProvider,
   Z as GridTypeProvider,
-  me as TbwGrid,
-  ge as TbwGridColumn,
-  ve as TbwGridDetailPanel,
-  ye as TbwGridResponsiveCard,
-  he as TbwGridToolButtons,
-  be as TbwGridToolPanel,
-  oe as VueGridAdapter,
-  Te as clearFeatureRegistry,
+  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,
-  Be as getFeatureFactory,
+  Ge as getFeatureFactory,
   Oe as getRegisteredFeatures,
   _e as isFeatureRegistered,
   je as registerFeature,
-  pe as useGrid,
-  we as useGridEvent,
+  ke as useGrid,
+  Ee as useGridEvent,
   Q as useGridIcons,
   q as useGridTypeDefaults,
-  fe as useTypeDefault
+  me as useTypeDefault
 };
 //# sourceMappingURL=index.js.map