@toolbox-web/grid-vue 0.0.0 → 0.1.0

package/index.js

@@ -0,0 +1,673 @@
+import { defineComponent as f, provide as T, inject as _, ref as v, createApp as B, computed as H, onMounted as b, onBeforeUnmount as W, watch as G, createElementBlock as w, openBlock as h, renderSlot as $, useSlots as j, h as y } from "vue";
+import { DataGridElement as Y } from "@toolbox-web/grid";
+import { c as K } from "./chunks/feature-registry-BgEOysSJ.js";
+import { a as Ce, g as Be, b as Oe, i as _e, r as je } from "./chunks/feature-registry-BgEOysSJ.js";
+const I = /* @__PURE__ */ Symbol("grid-icons");
+function J() {
+  return _(I, void 0);
+}
+const Q = f({
+  name: "GridIconProvider",
+  props: {
+    /**
+     * Icon overrides to provide to all descendant grids.
+     */
+    icons: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e, { slots: n }) {
+    return T(I, e.icons), () => n.default?.();
+  }
+}), z = /* @__PURE__ */ Symbol("grid-type-defaults");
+function N() {
+  return _(z, void 0);
+}
+function ue(e) {
+  return N()?.[e];
+}
+const X = f({
+  name: "GridTypeProvider",
+  props: {
+    /**
+     * Type defaults to provide to all descendant grids.
+     */
+    defaults: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(e, { slots: n }) {
+    return T(z, e.defaults), () => n.default?.();
+  }
+}), L = /* @__PURE__ */ Symbol("tbw-grid");
+function fe() {
+  const e = _(L, v(null));
+  return {
+    gridElement: e,
+    forceLayout: async () => {
+      await e.value?.forceLayout();
+    },
+    getConfig: () => e.value?.getConfig(),
+    ready: async () => {
+      await e.value?.ready();
+    },
+    getPlugin: (n) => e.value?.getPlugin(n)
+  };
+}
+const q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new Map();
+function Z(e, n) {
+  const o = e.getAttribute("field"), r = g.get(e) ?? {};
+  if (r.renderer = n, g.set(e, r), o) {
+    const i = p.get(o) ?? {};
+    i.renderer = n, p.set(o, i);
+  }
+}
+function ee(e, n) {
+  const o = e.getAttribute("field"), r = g.get(e) ?? {};
+  if (r.editor = n, g.set(e, r), o) {
+    const i = p.get(o) ?? {};
+    i.editor = n, p.set(o, i);
+  }
+}
+function te(e) {
+  let n = g.get(e)?.renderer;
+  if (!n) {
+    const o = e.getAttribute("field");
+    o && (n = p.get(o)?.renderer);
+  }
+  return n;
+}
+function ne(e) {
+  let n = g.get(e)?.editor;
+  if (!n) {
+    const o = e.getAttribute("field");
+    o && (n = p.get(o)?.editor);
+  }
+  return n;
+}
+class oe {
+  mountedViews = [];
+  /**
+   * Determines if this adapter can handle the given element.
+   * Checks if a renderer or editor is registered for this element.
+   */
+  canHandle(n) {
+    const o = n.getAttribute("field");
+    let r = g.get(n);
+    if (!r && o) {
+      const l = p.get(o);
+      l && (l.renderer || l.editor) && (r = l, g.set(n, r));
+    }
+    const i = r?.renderer !== void 0, s = r?.editor !== void 0;
+    return r !== void 0 && (i || s);
+  }
+  /**
+   * Creates a view renderer function that renders a Vue component
+   * and returns its container DOM element.
+   */
+  createRenderer(n) {
+    const o = te(n);
+    if (!o)
+      return;
+    const r = /* @__PURE__ */ new WeakMap();
+    return (i) => {
+      const s = i.cellEl;
+      if (s) {
+        const a = r.get(s);
+        if (a)
+          return a.update(i), a.container;
+        const c = document.createElement("div");
+        c.className = "vue-cell-renderer", c.style.display = "contents";
+        let u = i;
+        const E = B({
+          render() {
+            return o(u);
+          }
+        });
+        return E.mount(c), r.set(s, {
+          app: E,
+          container: c,
+          update: (R) => {
+            u = R, E._instance?.update();
+          }
+        }), c;
+      }
+      const l = document.createElement("div");
+      l.className = "vue-cell-renderer", l.style.display = "contents";
+      const d = B({
+        render() {
+          return o(i);
+        }
+      });
+      return d.mount(l), this.mountedViews.push({ app: d, container: l }), l;
+    };
+  }
+  /**
+   * Creates an editor spec that renders a Vue component for cell editing.
+   * Returns a function that creates the editor DOM element.
+   */
+  createEditor(n) {
+    const o = ne(n);
+    if (o)
+      return (r) => {
+        const i = document.createElement("div");
+        i.className = "vue-cell-editor", i.style.display = "contents";
+        const s = B({
+          render() {
+            return o(r);
+          }
+        });
+        return s.mount(i), this.mountedViews.push({ app: s, container: i }), i;
+      };
+  }
+  /**
+   * Framework adapter hook called by MasterDetailPlugin during attach().
+   * Parses the <tbw-grid-detail> element and returns a Vue-based renderer.
+   */
+  parseDetailElement(n) {
+    const o = n.closest("tbw-grid");
+    if (!o) return;
+    const r = o.querySelector("tbw-grid-detail");
+    if (!r) return;
+    const i = q.get(r);
+    if (i)
+      return (s, l) => {
+        const d = document.createElement("div");
+        d.className = "vue-detail-panel";
+        const c = i({ row: s, rowIndex: l });
+        if (c && c.length > 0) {
+          const u = B({
+            render() {
+              return c;
+            }
+          });
+          u.mount(d), this.mountedViews.push({ app: u, container: d });
+        }
+        return d;
+      };
+  }
+  /**
+   * Framework adapter hook called by ResponsivePlugin during attach().
+   * Parses the <tbw-grid-responsive-card> element and returns a Vue-based renderer.
+   */
+  parseResponsiveCardElement(n) {
+    const o = n.closest("tbw-grid");
+    if (!o) return;
+    const r = o.querySelector("tbw-grid-responsive-card");
+    if (!r) return;
+    const i = U.get(r);
+    if (i)
+      return (s, l) => {
+        const d = document.createElement("div");
+        d.className = "vue-responsive-card";
+        const c = i({ row: s, rowIndex: l });
+        if (c && c.length > 0) {
+          const u = B({
+            render() {
+              return c;
+            }
+          });
+          u.mount(d), this.mountedViews.push({ app: u, container: d });
+        }
+        return d;
+      };
+  }
+  /**
+   * Cleanup all mounted Vue apps.
+   */
+  cleanup() {
+    for (const { app: n, container: o } of this.mountedViews)
+      try {
+        n.unmount(), o.remove();
+      } catch {
+      }
+    this.mountedViews = [];
+  }
+}
+const ge = /* @__PURE__ */ f({
+  __name: "TbwGrid",
+  props: {
+    /** Row data to display */
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    /** Column definitions (shorthand for gridConfig.columns) */
+    columns: {
+      type: Array,
+      default: void 0
+    },
+    /** Full grid configuration */
+    gridConfig: {
+      type: Object,
+      default: void 0
+    },
+    /** Fit mode shorthand */
+    fitMode: {
+      type: String,
+      default: void 0
+    },
+    // ═══════════════════════════════════════════════════════════════════
+    // FEATURE PROPS - Declarative plugin configuration
+    // ═══════════════════════════════════════════════════════════════════
+    /** Enable cell/row/range selection */
+    selection: {
+      type: [String, Object],
+      default: void 0
+    },
+    /** Enable inline cell editing */
+    editing: {
+      type: [Boolean, String],
+      default: void 0
+    },
+    /** Enable clipboard copy/paste */
+    clipboard: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable right-click context menu */
+    contextMenu: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable multi-column sorting */
+    multiSort: {
+      type: [Boolean, String, Object],
+      default: void 0
+    },
+    /** @deprecated Use multiSort instead */
+    sorting: {
+      type: [Boolean, String, Object],
+      default: void 0
+    },
+    /** Enable column filtering */
+    filtering: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable column drag-to-reorder */
+    reorder: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable column visibility toggle panel */
+    visibility: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable pinned/sticky columns */
+    pinnedColumns: {
+      type: Boolean,
+      default: void 0
+    },
+    /** Enable multi-level column headers */
+    groupingColumns: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable horizontal column virtualization */
+    columnVirtualization: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable row drag-to-reorder */
+    rowReorder: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable row grouping by field values */
+    groupingRows: {
+      type: Object,
+      default: void 0
+    },
+    /** Enable pinned rows */
+    pinnedRows: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable hierarchical tree view */
+    tree: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable master-detail expandable rows */
+    masterDetail: {
+      type: Object,
+      default: void 0
+    },
+    /** Enable responsive card layout */
+    responsive: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable undo/redo for cell edits */
+    undoRedo: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable CSV/JSON export */
+    export: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable print functionality */
+    print: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    /** Enable pivot table functionality */
+    pivot: {
+      type: Object,
+      default: void 0
+    },
+    /** Enable server-side data operations */
+    serverSide: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["cell-commit", "row-commit", "cell-click", "cell-dblclick", "selection-change", "row-toggle", "sort-change", "ready"],
+  setup(e, { expose: n, emit: o }) {
+    let r = !1, i = null;
+    function s() {
+      return r || (i = new oe(), Y.registerAdapter(i), r = !0), i;
+    }
+    s();
+    const l = e, d = o, a = v(null);
+    T(L, a), N();
+    const c = J(), u = [
+      "selection",
+      "editing",
+      "clipboard",
+      "contextMenu",
+      "multiSort",
+      "sorting",
+      "filtering",
+      "reorder",
+      "visibility",
+      "pinnedColumns",
+      "groupingColumns",
+      "columnVirtualization",
+      "rowReorder",
+      "groupingRows",
+      "pinnedRows",
+      "tree",
+      "masterDetail",
+      "responsive",
+      "undoRedo",
+      "export",
+      "print",
+      "pivot",
+      "serverSide"
+    ];
+    function E() {
+      const t = [];
+      for (const m of u) {
+        const O = l[m];
+        if (O !== void 0) {
+          const C = K(m, O);
+          C && t.push(C);
+        }
+      }
+      return t;
+    }
+    const R = H(() => {
+      const t = l.gridConfig ?? {}, m = E(), O = t.plugins ?? [], C = [...m, ...O], V = c ? { ...t.icons, ...c } : t.icons;
+      return {
+        ...t,
+        ...l.columns ? { columns: l.columns } : {},
+        ...C.length > 0 ? { plugins: C } : {},
+        ...V ? { icons: V } : {}
+      };
+    });
+    function S(t) {
+      d("cell-commit", t);
+    }
+    function k(t) {
+      d("row-commit", t);
+    }
+    function P(t) {
+      d("cell-click", t);
+    }
+    function x(t) {
+      d("cell-dblclick", t);
+    }
+    function D(t) {
+      d("selection-change", t);
+    }
+    function F(t) {
+      d("row-toggle", t);
+    }
+    function A(t) {
+      d("sort-change", t);
+    }
+    function M(t) {
+      d("ready", t);
+    }
+    return b(() => {
+      const t = a.value;
+      if (!t) return;
+      const m = s();
+      t.__frameworkAdapter = m, t.addEventListener("cell-commit", S), t.addEventListener("row-commit", k), t.addEventListener("cell-click", P), t.addEventListener("cell-dblclick", x), t.addEventListener("selection-change", D), t.addEventListener("row-toggle", F), t.addEventListener("sort-change", A), t.addEventListener("ready", M), l.rows.length > 0 && (t.rows = l.rows), R.value && (t.gridConfig = R.value), l.fitMode && (t.fitMode = l.fitMode);
+    }), W(() => {
+      const t = a.value;
+      t && (t.removeEventListener("cell-commit", S), t.removeEventListener("row-commit", k), t.removeEventListener("cell-click", P), t.removeEventListener("cell-dblclick", x), t.removeEventListener("selection-change", D), t.removeEventListener("row-toggle", F), t.removeEventListener("sort-change", A), t.removeEventListener("ready", M));
+    }), G(
+      () => l.rows,
+      (t) => {
+        a.value && (a.value.rows = t);
+      },
+      { deep: !0 }
+    ), G(
+      R,
+      (t) => {
+        a.value && t && (a.value.gridConfig = t);
+      },
+      { deep: !0 }
+    ), G(
+      () => l.fitMode,
+      (t) => {
+        a.value && t && (a.value.fitMode = t);
+      }
+    ), n({
+      /** The underlying grid element */
+      gridElement: a,
+      /** Force a layout recalculation */
+      forceLayout: () => a.value?.forceLayout(),
+      /** Get current grid configuration */
+      getConfig: () => a.value?.getConfig(),
+      /** Wait for grid to be ready */
+      ready: () => a.value?.ready()
+    }), (t, m) => (h(), w("tbw-grid", {
+      ref_key: "gridRef",
+      ref: a
+    }, [
+      $(t.$slots, "default")
+    ], 512));
+  }
+}), re = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], me = /* @__PURE__ */ f({
+  __name: "TbwGridColumn",
+  props: {
+    field: {},
+    header: {},
+    width: {},
+    minWidth: {},
+    maxWidth: {},
+    sortable: { type: Boolean },
+    resizable: { type: Boolean },
+    editable: { type: Boolean },
+    type: {},
+    align: {},
+    hidden: { type: Boolean }
+  },
+  setup(e) {
+    const n = j(), o = v(null);
+    return b(() => {
+      const r = o.value;
+      if (!r) return;
+      const i = !!n.cell, s = !!n.editor;
+      i && Z(r, (l) => {
+        const d = n.cell;
+        if (!d) return y("span");
+        const a = d({
+          value: l.value,
+          row: l.row,
+          column: l.column
+        });
+        return y("div", { style: "display: contents" }, a);
+      }), s && ee(r, (l) => {
+        const d = n.editor;
+        if (!d) return y("span");
+        const a = d({
+          value: l.value,
+          row: l.row,
+          column: l.column,
+          commit: l.commit,
+          cancel: l.cancel
+        });
+        return y("div", { style: "display: contents" }, a);
+      });
+    }), (r, i) => (h(), w("tbw-grid-column", {
+      ref_key: "columnRef",
+      ref: o,
+      field: e.field,
+      header: e.header,
+      width: e.width,
+      "min-width": e.minWidth,
+      "max-width": e.maxWidth,
+      sortable: e.sortable,
+      resizable: e.resizable,
+      editable: e.editable,
+      type: e.type,
+      align: e.align,
+      hidden: e.hidden
+    }, null, 8, re));
+  }
+}), ie = ["show-expand-column", "animation"], pe = /* @__PURE__ */ f({
+  __name: "TbwGridDetailPanel",
+  props: {
+    showExpandColumn: { type: Boolean, default: !0 },
+    animation: { type: [String, Boolean], default: "slide" }
+  },
+  setup(e) {
+    const n = v(null), o = j();
+    return b(() => {
+      const r = n.value;
+      !r || !o.default || q.set(r, (i) => o.default?.(i));
+    }), (r, i) => (h(), w("tbw-grid-detail", {
+      ref_key: "detailRef",
+      ref: n,
+      "show-expand-column": e.showExpandColumn,
+      animation: e.animation
+    }, null, 8, ie));
+  }
+}), ve = /* @__PURE__ */ f({
+  __name: "TbwGridResponsiveCard",
+  setup(e) {
+    const n = v(null), o = j();
+    return b(() => {
+      const r = n.value;
+      !r || !o.default || U.set(r, (i) => o.default?.(i));
+    }), (r, i) => (h(), w("tbw-grid-responsive-card", {
+      ref_key: "cardRef",
+      ref: n
+    }, null, 512));
+  }
+}), ye = /* @__PURE__ */ f({
+  __name: "TbwGridToolButtons",
+  setup(e) {
+    return (n, o) => (h(), w("tbw-grid-tool-buttons", null, [
+      $(n.$slots, "default")
+    ]));
+  }
+}), le = /* @__PURE__ */ new WeakMap(), de = ["id", "label", "icon", "position", "width"], be = /* @__PURE__ */ f({
+  __name: "TbwGridToolPanel",
+  props: {
+    id: {},
+    label: {},
+    icon: {},
+    position: { default: "right" },
+    width: { default: "250px" }
+  },
+  setup(e) {
+    const n = v(null), o = j();
+    return b(() => {
+      const r = n.value;
+      !r || !o.default || le.set(r, (i) => o.default?.(i));
+    }), (r, i) => (h(), w("tbw-grid-tool-panel", {
+      ref_key: "panelRef",
+      ref: n,
+      id: e.id,
+      label: e.label,
+      icon: e.icon,
+      position: e.position,
+      width: e.width
+    }, null, 8, de));
+  }
+});
+function we(e, n, o) {
+  const r = o ?? _(L, v(null));
+  let i = null;
+  b(() => {
+    const s = r.value;
+    if (!s) return;
+    const l = n;
+    s.addEventListener(e, l), i = () => s.removeEventListener(e, l);
+  }), W(() => {
+    i?.();
+  });
+}
+const he = f({
+  name: "GridProvider",
+  props: {
+    /**
+     * Type defaults to provide to all descendant grids.
+     */
+    typeDefaults: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Icon overrides to provide to all descendant grids.
+     */
+    icons: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(e, { slots: n }) {
+    return () => {
+      let o = n.default?.();
+      return e.typeDefaults && (o = y(X, { defaults: e.typeDefaults }, () => o)), e.icons && (o = y(Q, { icons: e.icons }, () => o)), o;
+    };
+  }
+});
+export {
+  L as GRID_ELEMENT_KEY,
+  I as GRID_ICONS,
+  z as GRID_TYPE_DEFAULTS,
+  Q as GridIconProvider,
+  he as GridProvider,
+  X as GridTypeProvider,
+  ge as TbwGrid,
+  me as TbwGridColumn,
+  pe as TbwGridDetailPanel,
+  ve as TbwGridResponsiveCard,
+  ye as TbwGridToolButtons,
+  be as TbwGridToolPanel,
+  oe as VueGridAdapter,
+  Ce as clearFeatureRegistry,
+  K as createPluginFromFeature,
+  Be as getFeatureFactory,
+  Oe as getRegisteredFeatures,
+  _e as isFeatureRegistered,
+  je as registerFeature,
+  fe as useGrid,
+  we as useGridEvent,
+  J as useGridIcons,
+  N as useGridTypeDefaults,
+  ue as useTypeDefault
+};
+//# sourceMappingURL=index.js.map