@toolbox-web/grid-vue 0.0.0 → 0.2.0

package/index.js

@@ -0,0 +1,762 @@
+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 { 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";
+const z = /* @__PURE__ */ Symbol("grid-icons");
+function Q() {
+  return O(z, void 0);
+}
+const X = p({
+  name: "GridIconProvider",
+  props: {
+    /**
+     * Icon overrides to provide to all descendant grids.
+     */
+    icons: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(n, { slots: t }) {
+    return G(z, n.icons), () => t.default?.();
+  }
+}), N = /* @__PURE__ */ Symbol("grid-type-defaults");
+function q() {
+  return O(N, void 0);
+}
+function fe(n) {
+  return q()?.[n];
+}
+const Z = p({
+  name: "GridTypeProvider",
+  props: {
+    /**
+     * Type defaults to provide to all descendant grids.
+     */
+    defaults: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(n, { slots: t }) {
+    return G(N, n.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) {
+    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) {
+    const i = v.get(e) ?? {};
+    i.editor = t, v.set(e, i);
+  }
+}
+function ne(n) {
+  let t = m.get(n)?.renderer;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = v.get(e)?.renderer);
+  }
+  return t;
+}
+function re(n) {
+  let t = m.get(n)?.editor;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = v.get(e)?.editor);
+  }
+  return t;
+}
+class oe {
+  mountedViews = [];
+  typeDefaults = null;
+  /**
+   * Sets the type defaults map for this adapter.
+   * Called by TbwGrid when it receives type defaults from context.
+   *
+   * @internal
+   */
+  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(t) {
+    const e = t.getAttribute("field");
+    let r = m.get(t);
+    if (!r && e) {
+      const l = v.get(e);
+      l && (l.renderer || l.editor) && (r = l, m.set(t, r));
+    }
+    const i = r?.renderer !== void 0, a = r?.editor !== void 0;
+    return r !== void 0 && (i || a);
+  }
+  /**
+   * Creates a view renderer function that renders a Vue component
+   * and returns its container DOM element.
+   */
+  createRenderer(t) {
+    const e = ne(t);
+    if (!e)
+      return;
+    const r = /* @__PURE__ */ new WeakMap();
+    return (i) => {
+      const a = i.cellEl;
+      if (a) {
+        const s = r.get(a);
+        if (s)
+          return s.update(i), s.container;
+        const c = document.createElement("div");
+        c.className = "vue-cell-renderer", c.style.display = "contents";
+        let u = i;
+        const R = g({
+          render() {
+            return e(u);
+          }
+        });
+        return R.mount(c), r.set(a, {
+          app: R,
+          container: c,
+          update: (j) => {
+            u = j, R._instance?.update();
+          }
+        }), c;
+      }
+      const l = document.createElement("div");
+      l.className = "vue-cell-renderer", l.style.display = "contents";
+      const d = g({
+        render() {
+          return e(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(t) {
+    const e = re(t);
+    if (e)
+      return (r) => {
+        const i = document.createElement("div");
+        i.className = "vue-cell-editor", i.style.display = "contents";
+        const a = g({
+          render() {
+            return e(r);
+          }
+        });
+        return a.mount(i), this.mountedViews.push({ app: a, container: i }), i;
+      };
+  }
+  /**
+   * Framework adapter hook called by MasterDetailPlugin during attach().
+   * Parses the <tbw-grid-detail> element and returns a Vue-based renderer.
+   */
+  parseDetailElement(t) {
+    const e = t.closest("tbw-grid");
+    if (!e) return;
+    const r = e.querySelector("tbw-grid-detail");
+    if (!r) return;
+    const i = U.get(r);
+    if (i)
+      return (a, l) => {
+        const d = document.createElement("div");
+        d.className = "vue-detail-panel";
+        const c = i({ row: a, rowIndex: l });
+        if (c && c.length > 0) {
+          const u = g({
+            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(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);
+    if (i)
+      return (a, l) => {
+        const d = document.createElement("div");
+        d.className = "vue-responsive-card";
+        const c = i({ row: a, rowIndex: l });
+        if (c && c.length > 0) {
+          const u = g({
+            render() {
+              return c;
+            }
+          });
+          u.mount(d), this.mountedViews.push({ app: u, container: d });
+        }
+        return d;
+      };
+  }
+  // #region Type Defaults Support
+  /**
+   * Gets type-level defaults from the type defaults map.
+   *
+   * This enables application-wide type defaults configured via GridTypeProvider.
+   * The returned TypeDefault contains renderer/editor functions that render
+   * Vue components into the grid's cells.
+   *
+   * @example
+   * ```vue
+   * <script setup>
+   * import { GridTypeProvider } from '@toolbox-web/grid-vue';
+   * import { h } from 'vue';
+   * import CountryBadge from './CountryBadge.vue';
+   *
+   * const typeDefaults = {
+   *   country: {
+   *     renderer: (ctx) => h(CountryBadge, { code: ctx.value }),
+   *   },
+   * };
+   * <\/script>
+   *
+   * <template>
+   *   <GridTypeProvider :defaults="typeDefaults">
+   *     <App />
+   *   </GridTypeProvider>
+   * </template>
+   * ```
+   */
+  getTypeDefault(t) {
+    if (!this.typeDefaults)
+      return;
+    const e = this.typeDefaults[t];
+    if (!e)
+      return;
+    const r = {
+      editorParams: e.editorParams
+    };
+    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), r;
+  }
+  /**
+   * Creates a renderer function from a Vue render function for type defaults.
+   * @internal
+   */
+  createTypeRenderer(t) {
+    return (e) => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const i = g({
+        render() {
+          return t(e);
+        }
+      });
+      return i.mount(r), this.mountedViews.push({ app: i, container: r }), r;
+    };
+  }
+  /**
+   * Creates an editor function from a Vue render function for type defaults.
+   * @internal
+   */
+  createTypeEditor(t) {
+    return (e) => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const i = g({
+        render() {
+          return t(e);
+        }
+      });
+      return i.mount(r), this.mountedViews.push({ app: i, container: r }), r;
+    };
+  }
+  // #endregion
+  /**
+   * Cleanup all mounted Vue apps.
+   */
+  cleanup() {
+    for (const { app: t, container: e } of this.mountedViews)
+      try {
+        t.unmount(), e.remove();
+      } catch {
+      }
+    this.mountedViews = [];
+  }
+}
+const me = /* @__PURE__ */ p({
+  __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(n, { expose: t, emit: e }) {
+    let r = !1, i = null;
+    function a() {
+      return r || (i = new oe(), K.registerAdapter(i), r = !0), i;
+    }
+    a();
+    const l = n, d = e, s = y(null);
+    G(L, s);
+    const c = q(), u = Q(), R = [
+      "selection",
+      "editing",
+      "clipboard",
+      "contextMenu",
+      "multiSort",
+      "sorting",
+      "filtering",
+      "reorder",
+      "visibility",
+      "pinnedColumns",
+      "groupingColumns",
+      "columnVirtualization",
+      "rowReorder",
+      "groupingRows",
+      "pinnedRows",
+      "tree",
+      "masterDetail",
+      "responsive",
+      "undoRedo",
+      "export",
+      "print",
+      "pivot",
+      "serverSide"
+    ];
+    function j() {
+      const o = [];
+      for (const f of R) {
+        const T = l[f];
+        if (T !== void 0) {
+          const C = J(f, T);
+          C && o.push(C);
+        }
+      }
+      return o;
+    }
+    const D = Y(() => {
+      const o = l.gridConfig ?? {}, f = j(), T = o.plugins ?? [], C = [...f, ...T], W = u ? { ...o.icons, ...u } : o.icons;
+      return {
+        ...o,
+        ...l.columns ? { columns: l.columns } : {},
+        ...C.length > 0 ? { plugins: C } : {},
+        ...W ? { icons: W } : {}
+      };
+    });
+    function S(o) {
+      d("cell-commit", o);
+    }
+    function k(o) {
+      d("row-commit", o);
+    }
+    function P(o) {
+      d("cell-click", o);
+    }
+    function x(o) {
+      d("cell-dblclick", o);
+    }
+    function F(o) {
+      d("selection-change", o);
+    }
+    function A(o) {
+      d("row-toggle", o);
+    }
+    function M(o) {
+      d("sort-change", o);
+    }
+    function V(o) {
+      d("ready", o);
+    }
+    return b(() => {
+      const o = s.value;
+      if (!o) 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));
+    }), B(
+      () => l.rows,
+      (o) => {
+        s.value && (s.value.rows = o);
+      },
+      { deep: !0 }
+    ), B(
+      D,
+      (o) => {
+        s.value && o && (s.value.gridConfig = o);
+      },
+      { deep: !0 }
+    ), B(
+      () => l.fitMode,
+      (o) => {
+        s.value && o && (s.value.fitMode = o);
+      }
+    ), B(
+      () => c,
+      (o) => {
+        a().setTypeDefaults(o ?? null);
+      },
+      { deep: !0 }
+    ), t({
+      /** The underlying grid element */
+      gridElement: s,
+      /** Force a layout recalculation */
+      forceLayout: () => s.value?.forceLayout(),
+      /** Get current grid configuration */
+      getConfig: () => s.value?.getConfig(),
+      /** Wait for grid to be ready */
+      ready: () => s.value?.ready()
+    }), (o, f) => (E(), w("tbw-grid", {
+      ref_key: "gridRef",
+      ref: s
+    }, [
+      I(o.$slots, "default")
+    ], 512));
+  }
+}), ie = ["field", "header", "width", "min-width", "max-width", "sortable", "resizable", "editable", "type", "align", "hidden"], ge = /* @__PURE__ */ p({
+  __name: "TbwGridColumn",
+  props: {
+    field: {},
+    header: {},
+    width: {},
+    minWidth: {},
+    maxWidth: {},
+    sortable: { type: Boolean },
+    resizable: { type: Boolean },
+    editable: { type: Boolean },
+    type: {},
+    align: {},
+    hidden: { type: Boolean }
+  },
+  setup(n) {
+    const t = _(), e = y(null);
+    return b(() => {
+      const r = e.value;
+      if (!r) return;
+      const i = !!t.cell, a = !!t.editor;
+      i && ee(r, (l) => {
+        const d = t.cell;
+        if (!d) return h("span");
+        const s = d({
+          value: l.value,
+          row: l.row,
+          column: l.column
+        });
+        return h("div", { style: "display: contents" }, s);
+      }), a && te(r, (l) => {
+        const d = t.editor;
+        if (!d) return h("span");
+        const s = d({
+          value: l.value,
+          row: l.row,
+          column: l.column,
+          commit: l.commit,
+          cancel: l.cancel
+        });
+        return h("div", { style: "display: contents" }, s);
+      });
+    }), (r, 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));
+  }
+}), le = ["show-expand-column", "animation"], ve = /* @__PURE__ */ p({
+  __name: "TbwGridDetailPanel",
+  props: {
+    showExpandColumn: { type: Boolean, default: !0 },
+    animation: { type: [String, Boolean], default: "slide" }
+  },
+  setup(n) {
+    const t = y(null), e = _();
+    return b(() => {
+      const r = t.value;
+      !r || !e.default || U.set(r, (i) => e.default?.(i));
+    }), (r, i) => (E(), w("tbw-grid-detail", {
+      ref_key: "detailRef",
+      ref: t,
+      "show-expand-column": n.showExpandColumn,
+      animation: n.animation
+    }, null, 8, le));
+  }
+}), ye = /* @__PURE__ */ p({
+  __name: "TbwGridResponsiveCard",
+  setup(n) {
+    const t = y(null), e = _();
+    return b(() => {
+      const r = t.value;
+      !r || !e.default || H.set(r, (i) => e.default?.(i));
+    }), (r, i) => (E(), w("tbw-grid-responsive-card", {
+      ref_key: "cardRef",
+      ref: t
+    }, null, 512));
+  }
+}), he = /* @__PURE__ */ p({
+  __name: "TbwGridToolButtons",
+  setup(n) {
+    return (t, e) => (E(), w("tbw-grid-tool-buttons", null, [
+      I(t.$slots, "default")
+    ]));
+  }
+}), de = /* @__PURE__ */ new WeakMap(), se = ["id", "label", "icon", "position", "width"], be = /* @__PURE__ */ p({
+  __name: "TbwGridToolPanel",
+  props: {
+    id: {},
+    label: {},
+    icon: {},
+    position: { default: "right" },
+    width: { default: "250px" }
+  },
+  setup(n) {
+    const t = y(null), e = _();
+    return b(() => {
+      const r = t.value;
+      !r || !e.default || de.set(r, (i) => e.default?.(i));
+    }), (r, 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));
+  }
+});
+function we(n, t, e) {
+  const r = e ?? O(L, y(null));
+  let i = null;
+  b(() => {
+    const a = r.value;
+    if (!a) return;
+    const l = t;
+    a.addEventListener(n, l), i = () => a.removeEventListener(n, l);
+  }), $(() => {
+    i?.();
+  });
+}
+const Ee = p({
+  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(n, { 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;
+    };
+  }
+});
+export {
+  L as GRID_ELEMENT_KEY,
+  z as GRID_ICONS,
+  N as GRID_TYPE_DEFAULTS,
+  X as GridIconProvider,
+  Ee 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,
+  J as createPluginFromFeature,
+  Be as getFeatureFactory,
+  Oe as getRegisteredFeatures,
+  _e as isFeatureRegistered,
+  je as registerFeature,
+  pe as useGrid,
+  we as useGridEvent,
+  Q as useGridIcons,
+  q as useGridTypeDefaults,
+  fe as useTypeDefault
+};
+//# sourceMappingURL=index.js.map