@toolbox-web/grid-vue 0.11.2 → 0.11.3

package/README.md

@@ -80,6 +80,20 @@ const employees = ref<Employee[]>([
 </template>
 ```
 
+## TbwGrid Props
+
+| Prop           | Type                                       | Description                                    |
+| -------------- | ------------------------------------------ | ---------------------------------------------- |
+| `rows`         | `TRow[]`                                   | Row data to display                            |
+| `columns`      | `ColumnConfig[]`                           | Column definitions                             |
+| `gridConfig`   | `GridConfig`                               | Full configuration object                      |
+| `fitMode`      | `'stretch' \| 'fit-columns' \| 'auto-fit'` | Column sizing mode                             |
+| `sortable`     | `boolean`                                  | Grid-wide sorting toggle (default: `true`)     |
+| `filterable`   | `boolean`                                  | Grid-wide filtering toggle (default: `true`)   |
+| `selectable`   | `boolean`                                  | Grid-wide selection toggle (default: `true`)   |
+| `loading`      | `boolean`                                  | Show loading overlay (default: `false`)        |
+| `customStyles` | `string`                                   | CSS injected via `document.adoptedStyleSheets` |
+
 ## Enabling Features
 
 Features are enabled using **declarative props** with **side-effect imports**. This gives you the best of both worlds: clean, intuitive templates and tree-shakeable bundles.
@@ -246,17 +260,33 @@ function onSortChange(e: CustomEvent<SortChangeDetail>) {
 
 ### Available Events
 
-| Event                  | Detail Type          | Description                       |
-| ---------------------- | -------------------- | --------------------------------- |
-| `@cell-click`          | `CellClickDetail`    | Cell was clicked                  |
-| `@row-click`           | `RowClickDetail`     | Row was clicked                   |
-| `@cell-commit`         | `CellCommitDetail`   | Cell value committed (cancelable) |
-| `@row-commit`          | `RowCommitDetail`    | Row edit completed (cancelable)   |
-| `@cell-change`         | `CellChangeDetail`   | Row updated via API               |
-| `@sort-change`         | `SortChangeDetail`   | Sort state changed                |
-| `@column-resize`       | `ColumnResizeDetail` | Column was resized                |
-| `@cell-activate`       | `CellActivateDetail` | Cell activated (cancelable)       |
-| `@column-state-change` | `GridColumnState`    | Column visibility/order changed   |
+| Event                  | Detail Type              | Description                       |
+| ---------------------- | ------------------------ | --------------------------------- |
+| `@cell-click`          | `CellClickDetail`        | Cell was clicked                  |
+| `@row-click`           | `RowClickDetail`         | Row was clicked                   |
+| `@cell-activate`       | `CellActivateDetail`     | Cell activated (cancelable)       |
+| `@cell-change`         | `CellChangeDetail`       | Row updated via API               |
+| `@cell-commit`         | `CellCommitDetail`       | Cell value committed (cancelable) |
+| `@row-commit`          | `RowCommitDetail`        | Row edit completed (cancelable)   |
+| `@changed-rows-reset`  | `ChangedRowsResetDetail` | Changed rows state was reset      |
+| `@sort-change`         | `SortChangeDetail`       | Sort state changed                |
+| `@filter-change`       | `FilterChangeDetail`     | Filter state changed              |
+| `@column-resize`       | `ColumnResizeDetail`     | Column was resized                |
+| `@column-move`         | `ColumnMoveDetail`       | Column was reordered              |
+| `@column-visibility`   | `ColumnVisibilityDetail` | Column visibility toggled         |
+| `@column-state-change` | `GridColumnState`        | Column visibility/order changed   |
+| `@selection-change`    | `SelectionChangeDetail`  | Selection state changed           |
+| `@row-move`            | `RowMoveDetail`          | Row was reordered                 |
+| `@group-toggle`        | `GroupToggleDetail`      | Row group expanded/collapsed      |
+| `@tree-expand`         | `TreeExpandDetail`       | Tree node expanded/collapsed      |
+| `@detail-expand`       | `DetailExpandDetail`     | Master-detail row toggled         |
+| `@responsive-change`   | `ResponsiveChangeDetail` | Responsive layout mode changed    |
+| `@copy`                | `CopyDetail`             | Data copied to clipboard          |
+| `@paste`               | `PasteDetail`            | Data pasted from clipboard        |
+| `@undo-redo`           | `UndoRedoDetail`         | Undo/redo action performed        |
+| `@export-complete`     | `ExportCompleteDetail`   | Export operation completed        |
+| `@print-start`         | `PrintStartDetail`       | Print operation started           |
+| `@print-complete`      | `PrintCompleteDetail`    | Print operation completed         |
 
 ## Using Plugins (Advanced)
 
@@ -287,25 +317,42 @@ const gridConfig = {
 
 ### useGrid
 
-Access grid methods programmatically:
+Access grid methods and state programmatically:
 
 ```vue
 <script setup lang="ts">
 import { useGrid } from '@toolbox-web/grid-vue';
 
-const { forceLayout, getConfig, ready, getPlugin } = useGrid();
-
-async function handleResize() {
-  await forceLayout();
-}
-
-async function logConfig() {
-  await ready();
-  console.log(getConfig());
-}
+const {
+  isReady,
+  config,
+  forceLayout,
+  getConfig,
+  ready,
+  getPlugin,
+  toggleGroup,
+  registerStyles,
+  unregisterStyles,
+  getVisibleColumns,
+} = useGrid();
 </script>
 ```
 
+| Property / Method         | Type                                         | Description                               |
+| ------------------------- | -------------------------------------------- | ----------------------------------------- |
+| `isReady`                 | `Ref<boolean>`                               | Reactive flag — `true` once grid is ready |
+| `config`                  | `Ref<GridConfig \| null>`                    | Reactive effective grid configuration     |
+| `gridElement`             | `Ref<DataGridElement \| null>`               | Raw grid element reference                |
+| `ready()`                 | `() => Promise<void>`                        | Wait for grid to finish initializing      |
+| `forceLayout()`           | `() => Promise<void>`                        | Force layout recalculation                |
+| `getConfig()`             | `() => GridConfig \| undefined`              | Get effective configuration snapshot      |
+| `getPlugin(pluginClass)`  | `<T>(cls: new (...) => T) => T \| undefined` | Get plugin by class                       |
+| `getPluginByName(name)`   | `(name: string) => Plugin \| undefined`      | Get plugin by name                        |
+| `toggleGroup(key)`        | `(key: string) => Promise<void>`             | Toggle group expansion                    |
+| `registerStyles(id, css)` | `(id: string, css: string) => void`          | Register custom stylesheet                |
+| `unregisterStyles(id)`    | `(id: string) => void`                       | Remove custom stylesheet                  |
+| `getVisibleColumns()`     | `() => ColumnConfig[]`                       | Get non-hidden columns                    |
+
 ### useGridEvent
 
 Subscribe to grid events with automatic cleanup:

package/chunks/use-grid-DjGoQOoZ.js

@@ -0,0 +1,52 @@
+import { ref as i, inject as a, onMounted as l } from "vue";
+const c = /* @__PURE__ */ Symbol("tbw-grid");
+function d(u) {
+  const r = u ? i(null) : a(c, i(null)), o = i(!1), g = i(null), t = () => {
+    if (u) {
+      const e = document.querySelector(u);
+      return e && !r.value && (r.value = e), e;
+    }
+    return r.value;
+  };
+  return l(async () => {
+    try {
+      const e = t();
+      if (!e) return;
+      await e.ready?.(), o.value = !0;
+      const n = await e.getConfig?.();
+      n && (g.value = n);
+    } catch {
+    }
+  }), {
+    gridElement: r,
+    isReady: o,
+    config: g,
+    forceLayout: async () => {
+      await t()?.forceLayout();
+    },
+    getConfig: () => t()?.getConfig(),
+    ready: async () => {
+      await t()?.ready();
+    },
+    getPlugin: (e) => t()?.getPlugin(e),
+    getPluginByName: ((e) => t()?.getPluginByName(e)),
+    toggleGroup: async (e) => {
+      await t()?.toggleGroup?.(e);
+    },
+    registerStyles: (e, n) => {
+      t()?.registerStyles?.(e, n);
+    },
+    unregisterStyles: (e) => {
+      t()?.unregisterStyles?.(e);
+    },
+    getVisibleColumns: () => {
+      const e = t();
+      return e ? (e.gridConfig?.columns ?? []).filter((s) => !s.hidden) : [];
+    }
+  };
+}
+export {
+  c as G,
+  d as u
+};
+//# sourceMappingURL=use-grid-DjGoQOoZ.js.map

package/chunks/use-grid-DjGoQOoZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-DjGoQOoZ.js","sources":["../../../../libs/grid-vue/src/lib/use-grid.ts"],"sourcesContent":["import type { ColumnConfig, DataGridElement, GridConfig } from '@toolbox-web/grid';\nimport { inject, onMounted, ref, type InjectionKey, type Ref } from 'vue';\n\n/**\n * Injection key for the grid element.\n */\nexport const GRID_ELEMENT_KEY: InjectionKey<Ref<DataGridElement | null>> = Symbol('tbw-grid');\n\n/**\n * Return type for useGrid composable.\n */\nexport interface UseGridReturn<TRow = unknown> {\n  /** The grid element reference */\n  gridElement: Ref<DataGridElement<TRow> | null>;\n  /** Whether the grid is ready */\n  isReady: Ref<boolean>;\n  /** Current grid configuration (reactive) */\n  config: Ref<GridConfig<TRow> | null>;\n  /** Force a layout recalculation */\n  forceLayout: () => Promise<void>;\n  /** Get current grid configuration */\n  getConfig: () => ReturnType<DataGridElement['getConfig']> | undefined;\n  /** Wait for grid to be ready */\n  ready: () => Promise<void>;\n  /** Get a plugin by its class */\n  getPlugin: <T>(pluginClass: new (...args: unknown[]) => T) => T | undefined;\n  /**\n   * Get a plugin by its registered name (preferred).\n   * Uses the type-safe PluginNameMap for auto-completion and return type narrowing.\n   */\n  getPluginByName: DataGridElement['getPluginByName'];\n  /** Toggle a group row */\n  toggleGroup: (key: string) => Promise<void>;\n  /** Register custom styles via `document.adoptedStyleSheets` */\n  registerStyles: (id: string, css: string) => void;\n  /** Unregister previously registered custom styles */\n  unregisterStyles: (id: string) => void;\n  /** Get currently visible columns (excluding hidden columns) */\n  getVisibleColumns: () => ColumnConfig<TRow>[];\n}\n\n/**\n * Composable for programmatic access to the grid.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGrid } from '@toolbox-web/grid-vue';\n *\n * const { forceLayout, getConfig, isReady, getVisibleColumns } = useGrid();\n *\n * async function handleResize() {\n *   await forceLayout();\n * }\n * </script>\n * ```\n * @param selector - Optional CSS selector to target a specific grid element via\n *   DOM query instead of using Vue's provide/inject. Use when the component\n *   contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.\n */\nexport function useGrid<TRow = unknown>(selector?: string): UseGridReturn<TRow> {\n  const gridElement = selector\n    ? (ref(null) as Ref<DataGridElement<TRow> | null>)\n    : (inject(GRID_ELEMENT_KEY, ref(null)) as Ref<DataGridElement<TRow> | null>);\n  const isReady = ref(false) as Ref<boolean>;\n  const config = ref<GridConfig<TRow> | null>(null) as Ref<GridConfig<TRow> | null>;\n\n  /**\n   * Resolve the grid element. When a selector is provided, uses a DOM query;\n   * otherwise falls back to the injected ref.\n   */\n  const getGrid = (): DataGridElement<TRow> | null => {\n    if (selector) {\n      const el = document.querySelector(selector) as DataGridElement<TRow> | null;\n      if (el && !gridElement.value) gridElement.value = el;\n      return el;\n    }\n    return gridElement.value;\n  };\n\n  // Track ready state\n  onMounted(async () => {\n    try {\n      const grid = getGrid();\n      if (!grid) return;\n      await grid.ready?.();\n      isReady.value = true;\n      const effectiveConfig = await grid.getConfig?.();\n      if (effectiveConfig) {\n        config.value = effectiveConfig as GridConfig<TRow>;\n      }\n    } catch {\n      // Grid may not be available yet\n    }\n  });\n\n  return {\n    gridElement,\n    isReady,\n    config,\n    forceLayout: async () => {\n      await getGrid()?.forceLayout();\n    },\n    getConfig: () => {\n      return getGrid()?.getConfig();\n    },\n    ready: async () => {\n      await getGrid()?.ready();\n    },\n    getPlugin: <T>(pluginClass: new (...args: unknown[]) => T) => {\n      return getGrid()?.getPlugin(pluginClass);\n    },\n    getPluginByName: ((name: string) => {\n      return getGrid()?.getPluginByName(name);\n    }) as DataGridElement['getPluginByName'],\n    toggleGroup: async (key: string) => {\n      const grid = getGrid() as DataGridElement<TRow> & { toggleGroup?: (key: string) => Promise<void> };\n      await grid?.toggleGroup?.(key);\n    },\n    registerStyles: (id: string, css: string) => {\n      getGrid()?.registerStyles?.(id, css);\n    },\n    unregisterStyles: (id: string) => {\n      getGrid()?.unregisterStyles?.(id);\n    },\n    getVisibleColumns: () => {\n      const grid = getGrid();\n      if (!grid) return [];\n      const cfg = grid.gridConfig;\n      const columns = cfg?.columns ?? [];\n      return columns.filter((col: ColumnConfig<TRow>) => !col.hidden) as ColumnConfig<TRow>[];\n    },\n  };\n}\n"],"names":["GRID_ELEMENT_KEY","useGrid","selector","gridElement","ref","inject","isReady","config","getGrid","el","onMounted","grid","effectiveConfig","pluginClass","name","key","id","css","col"],"mappings":";AAMO,MAAMA,2BAAqE,UAAU;AAsDrF,SAASC,EAAwBC,GAAwC;AAC9E,QAAMC,IAAcD,IACfE,EAAI,IAAI,IACRC,EAAOL,GAAkBI,EAAI,IAAI,CAAC,GACjCE,IAAUF,EAAI,EAAK,GACnBG,IAASH,EAA6B,IAAI,GAM1CI,IAAU,MAAoC;AAClD,QAAIN,GAAU;AACZ,YAAMO,IAAK,SAAS,cAAcP,CAAQ;AAC1C,aAAIO,KAAM,CAACN,EAAY,YAAmB,QAAQM,IAC3CA;AAAA,IACT;AACA,WAAON,EAAY;AAAA,EACrB;AAGA,SAAAO,EAAU,YAAY;AACpB,QAAI;AACF,YAAMC,IAAOH,EAAA;AACb,UAAI,CAACG,EAAM;AACX,YAAMA,EAAK,QAAA,GACXL,EAAQ,QAAQ;AAChB,YAAMM,IAAkB,MAAMD,EAAK,YAAA;AACnC,MAAIC,MACFL,EAAO,QAAQK;AAAA,IAEnB,QAAQ;AAAA,IAER;AAAA,EACF,CAAC,GAEM;AAAA,IACL,aAAAT;AAAA,IACA,SAAAG;AAAA,IACA,QAAAC;AAAA,IACA,aAAa,YAAY;AACvB,YAAMC,EAAA,GAAW,YAAA;AAAA,IACnB;AAAA,IACA,WAAW,MACFA,EAAA,GAAW,UAAA;AAAA,IAEpB,OAAO,YAAY;AACjB,YAAMA,EAAA,GAAW,MAAA;AAAA,IACnB;AAAA,IACA,WAAW,CAAIK,MACNL,EAAA,GAAW,UAAUK,CAAW;AAAA,IAEzC,kBAAkB,CAACC,MACVN,EAAA,GAAW,gBAAgBM,CAAI;AAAA,IAExC,aAAa,OAAOC,MAAgB;AAElC,YADaP,EAAA,GACD,cAAcO,CAAG;AAAA,IAC/B;AAAA,IACA,gBAAgB,CAACC,GAAYC,MAAgB;AAC3C,MAAAT,KAAW,iBAAiBQ,GAAIC,CAAG;AAAA,IACrC;AAAA,IACA,kBAAkB,CAACD,MAAe;AAChC,MAAAR,EAAA,GAAW,mBAAmBQ,CAAE;AAAA,IAClC;AAAA,IACA,mBAAmB,MAAM;AACvB,YAAML,IAAOH,EAAA;AACb,aAAKG,KACOA,EAAK,YACI,WAAW,CAAA,GACjB,OAAO,CAACO,MAA4B,CAACA,EAAI,MAAM,IAH5C,CAAA;AAAA,IAIpB;AAAA,EAAA;AAEJ;"}

package/features/export.js

@@ -1,5 +1,5 @@
 import { ref as i, inject as l } from "vue";
-import { G as p } from "../chunks/use-grid-CeVD1azo.js";
+import { G as p } from "../chunks/use-grid-DjGoQOoZ.js";
 import "@toolbox-web/grid/features/export";
 function E(n) {
   const x = n ? i(null) : l(p, i(null)), o = () => (n ? document.querySelector(n) : x.value)?.getPluginByName("export");

package/features/filtering.js

@@ -1,7 +1,7 @@
 import { FilteringPlugin as o } from "@toolbox-web/grid/plugins/filtering";
 import { ref as u, inject as d, createApp as f } from "vue";
 import { registerFeature as s } from "@toolbox-web/grid/features/registry";
-import { G as a } from "../chunks/use-grid-CeVD1azo.js";
+import { G as a } from "../chunks/use-grid-DjGoQOoZ.js";
 s("filtering", (r) => {
   if (r === !0)
     return new o();

package/features/print.js

@@ -1,5 +1,5 @@
 import { ref as e, inject as u } from "vue";
-import { G as g } from "../chunks/use-grid-CeVD1azo.js";
+import { G as g } from "../chunks/use-grid-DjGoQOoZ.js";
 import "@toolbox-web/grid/features/print";
 function d(n) {
   const o = n ? e(null) : u(g, e(null)), i = () => (n ? document.querySelector(n) : o.value)?.getPluginByName("print");

package/features/selection.js

@@ -1,5 +1,5 @@
 import { ref as u, inject as d } from "vue";
-import { G as a } from "../chunks/use-grid-CeVD1azo.js";
+import { G as a } from "../chunks/use-grid-DjGoQOoZ.js";
 import "@toolbox-web/grid/features/selection";
 function S(r) {
   const g = r ? u(null) : d(a, u(null)), i = () => r ? document.querySelector(r) : g.value, t = () => i()?.getPluginByName("selection");

package/features/undo-redo.js

@@ -1,5 +1,5 @@
 import { ref as i, inject as c } from "vue";
-import { G as g } from "../chunks/use-grid-CeVD1azo.js";
+import { G as g } from "../chunks/use-grid-DjGoQOoZ.js";
 import "@toolbox-web/grid/features/undo-redo";
 function s(d) {
   const r = d ? i(null) : c(g, i(null)), o = () => (d ? document.querySelector(d) : r.value)?.getPluginByName("undoRedo");