@toolbox-web/grid-vue 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ import { CellRange, SelectionResult } from '@toolbox-web/grid/plugins/selection'
5
5
  * Uses the injected grid element from TbwGrid's provide/inject.
6
6
  * Methods work immediately when grid is available.
7
7
  */
8
- export interface SelectionMethods {
8
+ export interface SelectionMethods<TRow = unknown> {
9
9
  /**
10
10
  * Select all rows (row mode) or all cells (range mode).
11
11
  */
@@ -27,6 +27,16 @@ export interface SelectionMethods {
27
27
  * Set selection ranges programmatically.
28
28
  */
29
29
  setRanges: (ranges: CellRange[]) => void;
30
+ /**
31
+ * Get actual row objects for the current selection.
32
+ * Works in all selection modes (row, cell, range) — resolves indices
33
+ * against the grid's processed (sorted/filtered) rows.
34
+ *
35
+ * This is the recommended way to get selected rows. Unlike manual
36
+ * index mapping, it correctly resolves rows even when the grid is
37
+ * sorted or filtered.
38
+ */
39
+ getSelectedRows: () => TRow[];
30
40
  }
31
41
  /**
32
42
  * Composable for programmatic selection control.
@@ -49,5 +59,5 @@ export interface SelectionMethods {
49
59
  * </script>
50
60
  * ```
51
61
  */
52
- export declare function useGridSelection<TRow = unknown>(): SelectionMethods;
62
+ export declare function useGridSelection<TRow = unknown>(): SelectionMethods<TRow>;
53
63
  //# sourceMappingURL=selection.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAc5G;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;;OAGG;IACH,YAAY,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,GAAG,OAAO,KAAK,gBAAgB,CAsDnE"}
1
+ {"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAmB,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAc5G;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,OAAO;IAC9C;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;;OAGG;IACH,YAAY,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAE3C;;OAEG;IACH,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAEtD;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IAEzC;;;;;;;;OAQG;IACH,eAAe,EAAE,MAAM,IAAI,EAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,GAAG,OAAO,KAAK,gBAAgB,CAAC,IAAI,CAAC,CA0DzE"}
@@ -3,7 +3,7 @@ import { inject as u, ref as g } from "vue";
3
3
  import { r as d } from "../chunks/feature-registry-BgEOysSJ.js";
4
4
  import { G as a } from "../chunks/use-grid-DwjXrO19.js";
5
5
  d("selection", (t) => t === "cell" || t === "row" || t === "range" ? new s({ mode: t }) : new s(t ?? void 0));
6
- function p() {
6
+ function R() {
7
7
  const t = u(a, g(null)), n = () => t.value?.getPlugin(s);
8
8
  return {
9
9
  selectAll: () => {
@@ -34,10 +34,11 @@ function p() {
34
34
  isCellSelected: (e, o) => n()?.isCellSelected(e, o) ?? !1,
35
35
  setRanges: (e) => {
36
36
  n()?.setRanges(e);
37
- }
37
+ },
38
+ getSelectedRows: () => n()?.getSelectedRows() ?? []
38
39
  };
39
40
  }
40
41
  export {
41
- p as useGridSelection
42
+ R as useGridSelection
42
43
  };
43
44
  //# sourceMappingURL=selection.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"selection.js","sources":["../../../../libs/grid-vue/src/features/selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `selection` prop on TbwGrid.\n * Also exports `useGridSelection()` composable for programmatic selection control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/selection';\n * </script>\n *\n * <template>\n * <TbwGrid selection=\"range\" />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridSelection } from '@toolbox-web/grid-vue/features/selection';\n *\n * const { selectAll, clearSelection, getSelection } = useGridSelection();\n *\n * function handleSelectAll() {\n * selectAll();\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { SelectionPlugin, type CellRange, type SelectionResult } from '@toolbox-web/grid/plugins/selection';\nimport { inject, ref } from 'vue';\nimport { registerFeature } from '../lib/feature-registry';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\nregisterFeature('selection', (config) => {\n // Handle shorthand: 'cell', 'row', 'range'\n if (config === 'cell' || config === 'row' || config === 'range') {\n return new SelectionPlugin({ mode: config });\n }\n // Full config object\n return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from useGridSelection.\n *\n * Uses the injected grid element from TbwGrid's provide/inject.\n * Methods work immediately when grid is available.\n */\nexport interface SelectionMethods {\n /**\n * Select all rows (row mode) or all cells (range mode).\n */\n selectAll: () => void;\n\n /**\n * Clear all selection.\n */\n clearSelection: () => void;\n\n /**\n * Get the current selection state.\n * Use this to derive selected rows, indices, etc.\n */\n getSelection: () => SelectionResult | null;\n\n /**\n * Check if a specific cell is selected.\n */\n isCellSelected: (row: number, col: number) => boolean;\n\n /**\n * Set selection ranges programmatically.\n */\n setRanges: (ranges: CellRange[]) => void;\n}\n\n/**\n * Composable for programmatic selection control.\n *\n * Must be used within a component that contains a TbwGrid with the selection feature enabled.\n * Uses Vue's provide/inject, so it works reliably regardless of when the grid renders.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridSelection } from '@toolbox-web/grid-vue/features/selection';\n *\n * const { selectAll, clearSelection, getSelection } = useGridSelection();\n *\n * function exportSelected() {\n * const selection = getSelection();\n * if (!selection) return;\n * // Derive rows from selection.ranges and grid.rows\n * }\n * </script>\n * ```\n */\nexport function useGridSelection<TRow = unknown>(): SelectionMethods {\n const gridElement = inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): SelectionPlugin | undefined => {\n const grid = gridElement.value as DataGridElement<TRow> | null;\n return grid?.getPlugin(SelectionPlugin);\n };\n\n return {\n selectAll: () => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n ` → Enable selection on the grid:\\n` +\n ` <TbwGrid selection=\"range\" />`,\n );\n return;\n }\n const grid = gridElement.value as DataGridElement<TRow> | null;\n // Cast to any to access protected config\n const mode = (plugin as any).config?.mode;\n\n if (mode === 'row') {\n const rowCount = grid?.rows?.length ?? 0;\n const allIndices = new Set<number>();\n for (let i = 0; i < rowCount; i++) allIndices.add(i);\n (plugin as any).selected = allIndices;\n (plugin as any).requestAfterRender?.();\n } else if (mode === 'range') {\n const rowCount = grid?.rows?.length ?? 0;\n const colCount = (grid as any)?._columns?.length ?? 0;\n if (rowCount > 0 && colCount > 0) {\n plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n }\n }\n },\n\n clearSelection: () => {\n getPlugin()?.clearSelection();\n },\n\n getSelection: () => {\n return getPlugin()?.getSelection() ?? null;\n },\n\n isCellSelected: (row: number, col: number) => {\n return getPlugin()?.isCellSelected(row, col) ?? false;\n },\n\n setRanges: (ranges: CellRange[]) => {\n getPlugin()?.setRanges(ranges);\n },\n };\n}\n"],"names":["registerFeature","config","SelectionPlugin","useGridSelection","gridElement","inject","GRID_ELEMENT_KEY","ref","getPlugin","plugin","grid","mode","rowCount","allIndices","colCount","row","col","ranges"],"mappings":";;;;AAuCAA,EAAgB,aAAa,CAACC,MAExBA,MAAW,UAAUA,MAAW,SAASA,MAAW,UAC/C,IAAIC,EAAgB,EAAE,MAAMD,GAAQ,IAGtC,IAAIC,EAAgBD,KAAU,MAAS,CAC/C;AAyDM,SAASE,IAAqD;AACnE,QAAMC,IAAcC,EAAOC,GAAkBC,EAAI,IAAI,CAAC,GAEhDC,IAAY,MACHJ,EAAY,OACZ,UAAUF,CAAe;AAGxC,SAAO;AAAA,IACL,WAAW,MAAM;AACf,YAAMO,IAASD,EAAA;AACf,UAAI,CAACC,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,YAAMC,IAAON,EAAY,OAEnBO,IAAQF,EAAe,QAAQ;AAErC,UAAIE,MAAS,OAAO;AAClB,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCG,wBAAiB,IAAA;AACvB,iBAAS,IAAI,GAAG,IAAID,GAAU,IAAK,CAAAC,EAAW,IAAI,CAAC;AAClD,QAAAJ,EAAe,WAAWI,GAC1BJ,EAAe,qBAAA;AAAA,MAClB,WAAWE,MAAS,SAAS;AAC3B,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCI,IAAYJ,GAAc,UAAU,UAAU;AACpD,QAAIE,IAAW,KAAKE,IAAW,KAC7BL,EAAO,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAAA,GAAK,IAAI,EAAE,KAAKG,IAAW,GAAG,KAAKE,IAAW,EAAA,EAAE,CAAG,CAAC;AAAA,MAEjG;AAAA,IACF;AAAA,IAEA,gBAAgB,MAAM;AACpB,MAAAN,EAAA,GAAa,eAAA;AAAA,IACf;AAAA,IAEA,cAAc,MACLA,EAAA,GAAa,aAAA,KAAkB;AAAA,IAGxC,gBAAgB,CAACO,GAAaC,MACrBR,EAAA,GAAa,eAAeO,GAAKC,CAAG,KAAK;AAAA,IAGlD,WAAW,CAACC,MAAwB;AAClC,MAAAT,EAAA,GAAa,UAAUS,CAAM;AAAA,IAC/B;AAAA,EAAA;AAEJ;"}
1
+ {"version":3,"file":"selection.js","sources":["../../../../libs/grid-vue/src/features/selection.ts"],"sourcesContent":["/**\n * Selection feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `selection` prop on TbwGrid.\n * Also exports `useGridSelection()` composable for programmatic selection control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/selection';\n * </script>\n *\n * <template>\n * <TbwGrid selection=\"range\" />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridSelection } from '@toolbox-web/grid-vue/features/selection';\n *\n * const { selectAll, clearSelection, getSelection } = useGridSelection();\n *\n * function handleSelectAll() {\n * selectAll();\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { SelectionPlugin, type CellRange, type SelectionResult } from '@toolbox-web/grid/plugins/selection';\nimport { inject, ref } from 'vue';\nimport { registerFeature } from '../lib/feature-registry';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\nregisterFeature('selection', (config) => {\n // Handle shorthand: 'cell', 'row', 'range'\n if (config === 'cell' || config === 'row' || config === 'range') {\n return new SelectionPlugin({ mode: config });\n }\n // Full config object\n return new SelectionPlugin(config ?? undefined);\n});\n\n/**\n * Selection methods returned from useGridSelection.\n *\n * Uses the injected grid element from TbwGrid's provide/inject.\n * Methods work immediately when grid is available.\n */\nexport interface SelectionMethods<TRow = unknown> {\n /**\n * Select all rows (row mode) or all cells (range mode).\n */\n selectAll: () => void;\n\n /**\n * Clear all selection.\n */\n clearSelection: () => void;\n\n /**\n * Get the current selection state.\n * Use this to derive selected rows, indices, etc.\n */\n getSelection: () => SelectionResult | null;\n\n /**\n * Check if a specific cell is selected.\n */\n isCellSelected: (row: number, col: number) => boolean;\n\n /**\n * Set selection ranges programmatically.\n */\n setRanges: (ranges: CellRange[]) => void;\n\n /**\n * Get actual row objects for the current selection.\n * Works in all selection modes (row, cell, range) — resolves indices\n * against the grid's processed (sorted/filtered) rows.\n *\n * This is the recommended way to get selected rows. Unlike manual\n * index mapping, it correctly resolves rows even when the grid is\n * sorted or filtered.\n */\n getSelectedRows: () => TRow[];\n}\n\n/**\n * Composable for programmatic selection control.\n *\n * Must be used within a component that contains a TbwGrid with the selection feature enabled.\n * Uses Vue's provide/inject, so it works reliably regardless of when the grid renders.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridSelection } from '@toolbox-web/grid-vue/features/selection';\n *\n * const { selectAll, clearSelection, getSelection } = useGridSelection();\n *\n * function exportSelected() {\n * const selection = getSelection();\n * if (!selection) return;\n * // Derive rows from selection.ranges and grid.rows\n * }\n * </script>\n * ```\n */\nexport function useGridSelection<TRow = unknown>(): SelectionMethods<TRow> {\n const gridElement = inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): SelectionPlugin | undefined => {\n const grid = gridElement.value as DataGridElement<TRow> | null;\n return grid?.getPlugin(SelectionPlugin);\n };\n\n return {\n selectAll: () => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:selection] SelectionPlugin not found.\\n\\n` +\n ` → Enable selection on the grid:\\n` +\n ` <TbwGrid selection=\"range\" />`,\n );\n return;\n }\n const grid = gridElement.value as DataGridElement<TRow> | null;\n // Cast to any to access protected config\n const mode = (plugin as any).config?.mode;\n\n if (mode === 'row') {\n const rowCount = grid?.rows?.length ?? 0;\n const allIndices = new Set<number>();\n for (let i = 0; i < rowCount; i++) allIndices.add(i);\n (plugin as any).selected = allIndices;\n (plugin as any).requestAfterRender?.();\n } else if (mode === 'range') {\n const rowCount = grid?.rows?.length ?? 0;\n const colCount = (grid as any)?._columns?.length ?? 0;\n if (rowCount > 0 && colCount > 0) {\n plugin.setRanges([{ from: { row: 0, col: 0 }, to: { row: rowCount - 1, col: colCount - 1 } }]);\n }\n }\n },\n\n clearSelection: () => {\n getPlugin()?.clearSelection();\n },\n\n getSelection: () => {\n return getPlugin()?.getSelection() ?? null;\n },\n\n isCellSelected: (row: number, col: number) => {\n return getPlugin()?.isCellSelected(row, col) ?? false;\n },\n\n setRanges: (ranges: CellRange[]) => {\n getPlugin()?.setRanges(ranges);\n },\n\n getSelectedRows: (): TRow[] => {\n return getPlugin()?.getSelectedRows<TRow>() ?? [];\n },\n };\n}\n"],"names":["registerFeature","config","SelectionPlugin","useGridSelection","gridElement","inject","GRID_ELEMENT_KEY","ref","getPlugin","plugin","grid","mode","rowCount","allIndices","colCount","row","col","ranges"],"mappings":";;;;AAuCAA,EAAgB,aAAa,CAACC,MAExBA,MAAW,UAAUA,MAAW,SAASA,MAAW,UAC/C,IAAIC,EAAgB,EAAE,MAAMD,GAAQ,IAGtC,IAAIC,EAAgBD,KAAU,MAAS,CAC/C;AAoEM,SAASE,IAA2D;AACzE,QAAMC,IAAcC,EAAOC,GAAkBC,EAAI,IAAI,CAAC,GAEhDC,IAAY,MACHJ,EAAY,OACZ,UAAUF,CAAe;AAGxC,SAAO;AAAA,IACL,WAAW,MAAM;AACf,YAAMO,IAASD,EAAA;AACf,UAAI,CAACC,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,YAAMC,IAAON,EAAY,OAEnBO,IAAQF,EAAe,QAAQ;AAErC,UAAIE,MAAS,OAAO;AAClB,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCG,wBAAiB,IAAA;AACvB,iBAAS,IAAI,GAAG,IAAID,GAAU,IAAK,CAAAC,EAAW,IAAI,CAAC;AAClD,QAAAJ,EAAe,WAAWI,GAC1BJ,EAAe,qBAAA;AAAA,MAClB,WAAWE,MAAS,SAAS;AAC3B,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCI,IAAYJ,GAAc,UAAU,UAAU;AACpD,QAAIE,IAAW,KAAKE,IAAW,KAC7BL,EAAO,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAAA,GAAK,IAAI,EAAE,KAAKG,IAAW,GAAG,KAAKE,IAAW,EAAA,EAAE,CAAG,CAAC;AAAA,MAEjG;AAAA,IACF;AAAA,IAEA,gBAAgB,MAAM;AACpB,MAAAN,EAAA,GAAa,eAAA;AAAA,IACf;AAAA,IAEA,cAAc,MACLA,EAAA,GAAa,aAAA,KAAkB;AAAA,IAGxC,gBAAgB,CAACO,GAAaC,MACrBR,EAAA,GAAa,eAAeO,GAAKC,CAAG,KAAK;AAAA,IAGlD,WAAW,CAACC,MAAwB;AAClC,MAAAT,EAAA,GAAa,UAAUS,CAAM;AAAA,IAC/B;AAAA,IAEA,iBAAiB,MACRT,EAAA,GAAa,gBAAA,KAA2B,CAAA;AAAA,EACjD;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toolbox-web/grid-vue",
3
- "version": "0.4.2",
3
+ "version": "0.5.0",
4
4
  "description": "Vue 3 adapter for @toolbox-web/grid data grid component",
5
5
  "type": "module",
6
6
  "main": "./index.js",