@toolbox-web/grid-vue 0.11.1 → 0.11.3
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.
- package/README.md +69 -22
- package/chunks/use-grid-DjGoQOoZ.js +52 -0
- package/chunks/use-grid-DjGoQOoZ.js.map +1 -0
- package/features/export.d.ts +4 -1
- package/features/export.d.ts.map +1 -1
- package/features/export.js +5 -5
- package/features/export.js.map +1 -1
- package/features/filtering.d.ts +4 -1
- package/features/filtering.d.ts.map +1 -1
- package/features/filtering.js +14 -14
- package/features/filtering.js.map +1 -1
- package/features/print.d.ts +4 -1
- package/features/print.d.ts.map +1 -1
- package/features/print.js +10 -10
- package/features/print.js.map +1 -1
- package/features/selection.d.ts +4 -1
- package/features/selection.d.ts.map +1 -1
- package/features/selection.js +9 -9
- package/features/selection.js.map +1 -1
- package/features/undo-redo.d.ts +4 -1
- package/features/undo-redo.d.ts.map +1 -1
- package/features/undo-redo.js +8 -8
- package/features/undo-redo.js.map +1 -1
- package/index.js +320 -253
- package/index.js.map +1 -1
- package/lib/TbwGrid.vue.d.ts +13 -2
- package/lib/TbwGrid.vue.d.ts.map +1 -1
- package/lib/use-grid.d.ts +20 -5
- package/lib/use-grid.d.ts.map +1 -1
- package/package.json +1 -1
- package/chunks/use-grid-B59B6XdD.js +0 -22
- package/chunks/use-grid-B59B6XdD.js.map +0 -1
package/README.md
CHANGED
|
@@ -80,6 +80,20 @@ const employees = ref<Employee[]>([
|
|
|
80
80
|
</template>
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
+
## TbwGrid Props
|
|
84
|
+
|
|
85
|
+
| Prop | Type | Description |
|
|
86
|
+
| -------------- | ------------------------------------------ | ---------------------------------------------- |
|
|
87
|
+
| `rows` | `TRow[]` | Row data to display |
|
|
88
|
+
| `columns` | `ColumnConfig[]` | Column definitions |
|
|
89
|
+
| `gridConfig` | `GridConfig` | Full configuration object |
|
|
90
|
+
| `fitMode` | `'stretch' \| 'fit-columns' \| 'auto-fit'` | Column sizing mode |
|
|
91
|
+
| `sortable` | `boolean` | Grid-wide sorting toggle (default: `true`) |
|
|
92
|
+
| `filterable` | `boolean` | Grid-wide filtering toggle (default: `true`) |
|
|
93
|
+
| `selectable` | `boolean` | Grid-wide selection toggle (default: `true`) |
|
|
94
|
+
| `loading` | `boolean` | Show loading overlay (default: `false`) |
|
|
95
|
+
| `customStyles` | `string` | CSS injected via `document.adoptedStyleSheets` |
|
|
96
|
+
|
|
83
97
|
## Enabling Features
|
|
84
98
|
|
|
85
99
|
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>) {
|
|
|
246
260
|
|
|
247
261
|
### Available Events
|
|
248
262
|
|
|
249
|
-
| Event | Detail Type
|
|
250
|
-
| ---------------------- |
|
|
251
|
-
| `@cell-click` | `CellClickDetail`
|
|
252
|
-
| `@row-click` | `RowClickDetail`
|
|
253
|
-
| `@cell-
|
|
254
|
-
| `@
|
|
255
|
-
| `@cell-
|
|
256
|
-
| `@
|
|
257
|
-
| `@
|
|
258
|
-
| `@
|
|
259
|
-
| `@
|
|
263
|
+
| Event | Detail Type | Description |
|
|
264
|
+
| ---------------------- | ------------------------ | --------------------------------- |
|
|
265
|
+
| `@cell-click` | `CellClickDetail` | Cell was clicked |
|
|
266
|
+
| `@row-click` | `RowClickDetail` | Row was clicked |
|
|
267
|
+
| `@cell-activate` | `CellActivateDetail` | Cell activated (cancelable) |
|
|
268
|
+
| `@cell-change` | `CellChangeDetail` | Row updated via API |
|
|
269
|
+
| `@cell-commit` | `CellCommitDetail` | Cell value committed (cancelable) |
|
|
270
|
+
| `@row-commit` | `RowCommitDetail` | Row edit completed (cancelable) |
|
|
271
|
+
| `@changed-rows-reset` | `ChangedRowsResetDetail` | Changed rows state was reset |
|
|
272
|
+
| `@sort-change` | `SortChangeDetail` | Sort state changed |
|
|
273
|
+
| `@filter-change` | `FilterChangeDetail` | Filter state changed |
|
|
274
|
+
| `@column-resize` | `ColumnResizeDetail` | Column was resized |
|
|
275
|
+
| `@column-move` | `ColumnMoveDetail` | Column was reordered |
|
|
276
|
+
| `@column-visibility` | `ColumnVisibilityDetail` | Column visibility toggled |
|
|
277
|
+
| `@column-state-change` | `GridColumnState` | Column visibility/order changed |
|
|
278
|
+
| `@selection-change` | `SelectionChangeDetail` | Selection state changed |
|
|
279
|
+
| `@row-move` | `RowMoveDetail` | Row was reordered |
|
|
280
|
+
| `@group-toggle` | `GroupToggleDetail` | Row group expanded/collapsed |
|
|
281
|
+
| `@tree-expand` | `TreeExpandDetail` | Tree node expanded/collapsed |
|
|
282
|
+
| `@detail-expand` | `DetailExpandDetail` | Master-detail row toggled |
|
|
283
|
+
| `@responsive-change` | `ResponsiveChangeDetail` | Responsive layout mode changed |
|
|
284
|
+
| `@copy` | `CopyDetail` | Data copied to clipboard |
|
|
285
|
+
| `@paste` | `PasteDetail` | Data pasted from clipboard |
|
|
286
|
+
| `@undo-redo` | `UndoRedoDetail` | Undo/redo action performed |
|
|
287
|
+
| `@export-complete` | `ExportCompleteDetail` | Export operation completed |
|
|
288
|
+
| `@print-start` | `PrintStartDetail` | Print operation started |
|
|
289
|
+
| `@print-complete` | `PrintCompleteDetail` | Print operation completed |
|
|
260
290
|
|
|
261
291
|
## Using Plugins (Advanced)
|
|
262
292
|
|
|
@@ -287,25 +317,42 @@ const gridConfig = {
|
|
|
287
317
|
|
|
288
318
|
### useGrid
|
|
289
319
|
|
|
290
|
-
Access grid methods programmatically:
|
|
320
|
+
Access grid methods and state programmatically:
|
|
291
321
|
|
|
292
322
|
```vue
|
|
293
323
|
<script setup lang="ts">
|
|
294
324
|
import { useGrid } from '@toolbox-web/grid-vue';
|
|
295
325
|
|
|
296
|
-
const {
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
326
|
+
const {
|
|
327
|
+
isReady,
|
|
328
|
+
config,
|
|
329
|
+
forceLayout,
|
|
330
|
+
getConfig,
|
|
331
|
+
ready,
|
|
332
|
+
getPlugin,
|
|
333
|
+
toggleGroup,
|
|
334
|
+
registerStyles,
|
|
335
|
+
unregisterStyles,
|
|
336
|
+
getVisibleColumns,
|
|
337
|
+
} = useGrid();
|
|
306
338
|
</script>
|
|
307
339
|
```
|
|
308
340
|
|
|
341
|
+
| Property / Method | Type | Description |
|
|
342
|
+
| ------------------------- | -------------------------------------------- | ----------------------------------------- |
|
|
343
|
+
| `isReady` | `Ref<boolean>` | Reactive flag — `true` once grid is ready |
|
|
344
|
+
| `config` | `Ref<GridConfig \| null>` | Reactive effective grid configuration |
|
|
345
|
+
| `gridElement` | `Ref<DataGridElement \| null>` | Raw grid element reference |
|
|
346
|
+
| `ready()` | `() => Promise<void>` | Wait for grid to finish initializing |
|
|
347
|
+
| `forceLayout()` | `() => Promise<void>` | Force layout recalculation |
|
|
348
|
+
| `getConfig()` | `() => GridConfig \| undefined` | Get effective configuration snapshot |
|
|
349
|
+
| `getPlugin(pluginClass)` | `<T>(cls: new (...) => T) => T \| undefined` | Get plugin by class |
|
|
350
|
+
| `getPluginByName(name)` | `(name: string) => Plugin \| undefined` | Get plugin by name |
|
|
351
|
+
| `toggleGroup(key)` | `(key: string) => Promise<void>` | Toggle group expansion |
|
|
352
|
+
| `registerStyles(id, css)` | `(id: string, css: string) => void` | Register custom stylesheet |
|
|
353
|
+
| `unregisterStyles(id)` | `(id: string) => void` | Remove custom stylesheet |
|
|
354
|
+
| `getVisibleColumns()` | `() => ColumnConfig[]` | Get non-hidden columns |
|
|
355
|
+
|
|
309
356
|
### useGridEvent
|
|
310
357
|
|
|
311
358
|
Subscribe to grid events with automatic cleanup:
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { ref as i, inject as a, onMounted as l } from "vue";
|
|
2
|
+
const c = /* @__PURE__ */ Symbol("tbw-grid");
|
|
3
|
+
function d(u) {
|
|
4
|
+
const r = u ? i(null) : a(c, i(null)), o = i(!1), g = i(null), t = () => {
|
|
5
|
+
if (u) {
|
|
6
|
+
const e = document.querySelector(u);
|
|
7
|
+
return e && !r.value && (r.value = e), e;
|
|
8
|
+
}
|
|
9
|
+
return r.value;
|
|
10
|
+
};
|
|
11
|
+
return l(async () => {
|
|
12
|
+
try {
|
|
13
|
+
const e = t();
|
|
14
|
+
if (!e) return;
|
|
15
|
+
await e.ready?.(), o.value = !0;
|
|
16
|
+
const n = await e.getConfig?.();
|
|
17
|
+
n && (g.value = n);
|
|
18
|
+
} catch {
|
|
19
|
+
}
|
|
20
|
+
}), {
|
|
21
|
+
gridElement: r,
|
|
22
|
+
isReady: o,
|
|
23
|
+
config: g,
|
|
24
|
+
forceLayout: async () => {
|
|
25
|
+
await t()?.forceLayout();
|
|
26
|
+
},
|
|
27
|
+
getConfig: () => t()?.getConfig(),
|
|
28
|
+
ready: async () => {
|
|
29
|
+
await t()?.ready();
|
|
30
|
+
},
|
|
31
|
+
getPlugin: (e) => t()?.getPlugin(e),
|
|
32
|
+
getPluginByName: ((e) => t()?.getPluginByName(e)),
|
|
33
|
+
toggleGroup: async (e) => {
|
|
34
|
+
await t()?.toggleGroup?.(e);
|
|
35
|
+
},
|
|
36
|
+
registerStyles: (e, n) => {
|
|
37
|
+
t()?.registerStyles?.(e, n);
|
|
38
|
+
},
|
|
39
|
+
unregisterStyles: (e) => {
|
|
40
|
+
t()?.unregisterStyles?.(e);
|
|
41
|
+
},
|
|
42
|
+
getVisibleColumns: () => {
|
|
43
|
+
const e = t();
|
|
44
|
+
return e ? (e.gridConfig?.columns ?? []).filter((s) => !s.hidden) : [];
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
c as G,
|
|
50
|
+
d as u
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=use-grid-DjGoQOoZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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.d.ts
CHANGED
|
@@ -56,6 +56,9 @@ export interface ExportMethods {
|
|
|
56
56
|
* }
|
|
57
57
|
* </script>
|
|
58
58
|
* ```
|
|
59
|
+
* @param selector - Optional CSS selector to target a specific grid element via
|
|
60
|
+
* DOM query instead of using Vue's provide/inject. Use when the component
|
|
61
|
+
* contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
|
|
59
62
|
*/
|
|
60
|
-
export declare function useGridExport(): ExportMethods;
|
|
63
|
+
export declare function useGridExport(selector?: string): ExportMethods;
|
|
61
64
|
//# sourceMappingURL=export.d.ts.map
|
package/features/export.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,
|
|
1
|
+
{"version":3,"file":"export.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/export.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAK3G,OAAO,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAEzE;;;;OAIG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAE3E;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAE1E;;OAEG;IACH,WAAW,EAAE,MAAM,OAAO,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE,MAAM;QAAE,MAAM,EAAE,YAAY,CAAC;QAAC,SAAS,EAAE,IAAI,CAAA;KAAE,GAAG,IAAI,CAAC;CACvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,CAwD9D"}
|
package/features/export.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { G as p } from "../chunks/use-grid-
|
|
1
|
+
import { ref as i, inject as l } from "vue";
|
|
2
|
+
import { G as p } from "../chunks/use-grid-DjGoQOoZ.js";
|
|
3
3
|
import "@toolbox-web/grid/features/export";
|
|
4
|
-
function
|
|
5
|
-
const
|
|
4
|
+
function E(n) {
|
|
5
|
+
const x = n ? i(null) : l(p, i(null)), o = () => (n ? document.querySelector(n) : x.value)?.getPluginByName("export");
|
|
6
6
|
return {
|
|
7
7
|
exportToCsv: (r, e) => {
|
|
8
8
|
const t = o();
|
|
@@ -48,6 +48,6 @@ function s() {
|
|
|
48
48
|
};
|
|
49
49
|
}
|
|
50
50
|
export {
|
|
51
|
-
|
|
51
|
+
E as useGridExport
|
|
52
52
|
};
|
|
53
53
|
//# sourceMappingURL=export.js.map
|
package/features/export.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"export.js","sources":["../../../../libs/grid-vue/src/features/export.ts"],"sourcesContent":["/**\n * Export feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `export` prop on TbwGrid.\n * Also exports `useGridExport()` composable for programmatic export control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/export';\n * </script>\n *\n * <template>\n * <TbwGrid export />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridExport } from '@toolbox-web/grid-vue/features/export';\n *\n * const { exportToCsv, exportToExcel, exportToJson } = useGridExport();\n *\n * function handleExport() {\n * exportToCsv('employees.csv');\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { type
|
|
1
|
+
{"version":3,"file":"export.js","sources":["../../../../libs/grid-vue/src/features/export.ts"],"sourcesContent":["/**\n * Export feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `export` prop on TbwGrid.\n * Also exports `useGridExport()` composable for programmatic export control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/export';\n * </script>\n *\n * <template>\n * <TbwGrid export />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridExport } from '@toolbox-web/grid-vue/features/export';\n *\n * const { exportToCsv, exportToExcel, exportToJson } = useGridExport();\n *\n * function handleExport() {\n * exportToCsv('employees.csv');\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { type ExportFormat, type ExportParams, type ExportPlugin } from '@toolbox-web/grid/plugins/export';\nimport { inject, ref } from 'vue';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\n// Delegate to core feature registration\nimport '@toolbox-web/grid/features/export';\n\n/**\n * Export methods returned from useGridExport.\n */\nexport interface ExportMethods {\n /**\n * Export grid data to CSV file.\n * @param filename - Optional filename (defaults to 'export.csv')\n * @param params - Optional export parameters\n */\n exportToCsv: (filename?: string, params?: Partial<ExportParams>) => void;\n\n /**\n * Export grid data to Excel file (XML Spreadsheet format).\n * @param filename - Optional filename (defaults to 'export.xlsx')\n * @param params - Optional export parameters\n */\n exportToExcel: (filename?: string, params?: Partial<ExportParams>) => void;\n\n /**\n * Export grid data to JSON file.\n * @param filename - Optional filename (defaults to 'export.json')\n * @param params - Optional export parameters\n */\n exportToJson: (filename?: string, params?: Partial<ExportParams>) => void;\n\n /**\n * Check if an export is currently in progress.\n */\n isExporting: () => boolean;\n\n /**\n * Get information about the last export.\n */\n getLastExport: () => { format: ExportFormat; timestamp: Date } | null;\n}\n\n/**\n * Composable for programmatic export control.\n *\n * Must be used within a component that contains a TbwGrid with the export feature enabled.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridExport } from '@toolbox-web/grid-vue/features/export';\n *\n * const { exportToCsv, exportToExcel, isExporting } = useGridExport();\n *\n * async function handleExport(format: 'csv' | 'excel' | 'json') {\n * if (isExporting()) return; // Prevent concurrent exports\n *\n * switch (format) {\n * case 'csv': exportToCsv('data.csv'); break;\n * case 'excel': exportToExcel('data.xlsx'); break;\n * case 'json': exportToJson('data.json'); break;\n * }\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 useGridExport(selector?: string): ExportMethods {\n const gridElement = selector ? ref(null) : inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): ExportPlugin | undefined => {\n const grid = (selector ? document.querySelector(selector) : gridElement.value) as DataGridElement | null;\n return grid?.getPluginByName('export');\n };\n\n return {\n exportToCsv: (filename?: string, params?: Partial<ExportParams>) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n ` → Enable export on the grid:\\n` +\n ` <TbwGrid :export=\"true\" />`,\n );\n return;\n }\n plugin.exportCsv({ ...params, fileName: filename ?? params?.fileName ?? 'export.csv' });\n },\n\n exportToExcel: (filename?: string, params?: Partial<ExportParams>) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n ` → Enable export on the grid:\\n` +\n ` <TbwGrid :export=\"true\" />`,\n );\n return;\n }\n plugin.exportExcel({ ...params, fileName: filename ?? params?.fileName ?? 'export.xlsx' });\n },\n\n exportToJson: (filename?: string, params?: Partial<ExportParams>) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:export] ExportPlugin not found.\\n\\n` +\n ` → Enable export on the grid:\\n` +\n ` <TbwGrid :export=\"true\" />`,\n );\n return;\n }\n plugin.exportJson({ ...params, fileName: filename ?? params?.fileName ?? 'export.json' });\n },\n\n isExporting: () => {\n return getPlugin()?.isExporting() ?? false;\n },\n\n getLastExport: () => {\n return getPlugin()?.getLastExport() ?? null;\n },\n };\n}\n"],"names":["useGridExport","selector","gridElement","ref","inject","GRID_ELEMENT_KEY","getPlugin","filename","params","plugin"],"mappings":";;;AAwGO,SAASA,EAAcC,GAAkC;AAC9D,QAAMC,IAAcD,IAAWE,EAAI,IAAI,IAAIC,EAAOC,GAAkBF,EAAI,IAAI,CAAC,GAEvEG,IAAY,OACFL,IAAW,SAAS,cAAcA,CAAQ,IAAIC,EAAY,QAC3D,gBAAgB,QAAQ;AAGvC,SAAO;AAAA,IACL,aAAa,CAACK,GAAmBC,MAAmC;AAClE,YAAMC,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,UAAU,EAAE,GAAGD,GAAQ,UAAUD,KAAYC,GAAQ,YAAY,cAAc;AAAA,IACxF;AAAA,IAEA,eAAe,CAACD,GAAmBC,MAAmC;AACpE,YAAMC,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,YAAY,EAAE,GAAGD,GAAQ,UAAUD,KAAYC,GAAQ,YAAY,eAAe;AAAA,IAC3F;AAAA,IAEA,cAAc,CAACD,GAAmBC,MAAmC;AACnE,YAAMC,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,WAAW,EAAE,GAAGD,GAAQ,UAAUD,KAAYC,GAAQ,YAAY,eAAe;AAAA,IAC1F;AAAA,IAEA,aAAa,MACJF,EAAA,GAAa,YAAA,KAAiB;AAAA,IAGvC,eAAe,MACNA,EAAA,GAAa,cAAA,KAAmB;AAAA,EACzC;AAEJ;"}
|
package/features/filtering.d.ts
CHANGED
|
@@ -89,6 +89,9 @@ export interface FilteringMethods {
|
|
|
89
89
|
* <button @click="clearAllFilters">Clear Filters</button>
|
|
90
90
|
* </template>
|
|
91
91
|
* ```
|
|
92
|
+
* @param selector - Optional CSS selector to target a specific grid element via
|
|
93
|
+
* DOM query instead of using Vue's provide/inject. Use when the component
|
|
94
|
+
* contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
|
|
92
95
|
*/
|
|
93
|
-
export declare function useGridFiltering(): FilteringMethods;
|
|
96
|
+
export declare function useGridFiltering(selector?: string): FilteringMethods;
|
|
94
97
|
//# sourceMappingURL=filtering.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filtering.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/filtering.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,WAAW,EAEjB,MAAM,qCAAqC,CAAC;AAqC7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9G;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACH,UAAU,EAAE,MAAM,WAAW,EAAE,CAAC;IAEhC;;;OAGG;IACH,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAEjF;;;OAGG;IACH,eAAe,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1D;;;OAGG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,mBAAmB,EAAE,MAAM,MAAM,CAAC;IAElC;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC;IAE9C;;OAEG;IACH,eAAe,EAAE,MAAM,WAAW,EAAE,CAAC;IAErC;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAE3C;;OAEG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7D;AAED
|
|
1
|
+
{"version":3,"file":"filtering.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/filtering.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,WAAW,EAEjB,MAAM,qCAAqC,CAAC;AAqC7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE9G;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;IAEtD;;OAEG;IACH,UAAU,EAAE,MAAM,WAAW,EAAE,CAAC;IAEhC;;;OAGG;IACH,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAEjF;;;OAGG;IACH,eAAe,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1D;;;OAGG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,mBAAmB,EAAE,MAAM,MAAM,CAAC;IAElC;;OAEG;IACH,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,CAAC;IAE9C;;OAEG;IACH,eAAe,EAAE,MAAM,WAAW,EAAE,CAAC;IAErC;;OAEG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAE3C;;OAEG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CAC7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAwFpE"}
|
package/features/filtering.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { FilteringPlugin as o } from "@toolbox-web/grid/plugins/filtering";
|
|
2
|
-
import {
|
|
2
|
+
import { ref as u, inject as d, createApp as f } from "vue";
|
|
3
3
|
import { registerFeature as s } from "@toolbox-web/grid/features/registry";
|
|
4
|
-
import { G as a } from "../chunks/use-grid-
|
|
4
|
+
import { G as a } from "../chunks/use-grid-DjGoQOoZ.js";
|
|
5
5
|
s("filtering", (r) => {
|
|
6
6
|
if (r === !0)
|
|
7
7
|
return new o();
|
|
8
8
|
if (!r)
|
|
9
9
|
return new o();
|
|
10
|
-
const
|
|
11
|
-
if (typeof
|
|
12
|
-
const
|
|
13
|
-
|
|
10
|
+
const l = r, t = { ...l };
|
|
11
|
+
if (typeof l.filterPanelRenderer == "function" && l.filterPanelRenderer.length <= 1) {
|
|
12
|
+
const e = l.filterPanelRenderer;
|
|
13
|
+
t.filterPanelRenderer = (i, n) => {
|
|
14
14
|
const g = document.createElement("div");
|
|
15
15
|
g.style.display = "contents", f({
|
|
16
16
|
render() {
|
|
17
|
-
return
|
|
17
|
+
return e(n);
|
|
18
18
|
}
|
|
19
|
-
}).mount(g),
|
|
19
|
+
}).mount(g), i.appendChild(g);
|
|
20
20
|
};
|
|
21
21
|
}
|
|
22
|
-
return new o(
|
|
22
|
+
return new o(t);
|
|
23
23
|
});
|
|
24
|
-
function m() {
|
|
25
|
-
const
|
|
24
|
+
function m(r) {
|
|
25
|
+
const l = r ? u(null) : d(a, u(null)), t = () => (r ? document.querySelector(r) : l.value)?.getPluginByName("filtering");
|
|
26
26
|
return {
|
|
27
27
|
setFilter: (e, i, n) => {
|
|
28
|
-
const
|
|
29
|
-
if (!
|
|
28
|
+
const g = t();
|
|
29
|
+
if (!g) {
|
|
30
30
|
console.warn(
|
|
31
31
|
`[tbw-grid:filtering] FilteringPlugin not found.
|
|
32
32
|
|
|
@@ -35,7 +35,7 @@ function m() {
|
|
|
35
35
|
);
|
|
36
36
|
return;
|
|
37
37
|
}
|
|
38
|
-
|
|
38
|
+
g.setFilter(e, i, n);
|
|
39
39
|
},
|
|
40
40
|
getFilter: (e) => t()?.getFilter(e),
|
|
41
41
|
getFilters: () => t()?.getFilters() ?? [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filtering.js","sources":["../../../../libs/grid-vue/src/features/filtering.ts"],"sourcesContent":["/**\n * Filtering feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `filtering` prop on TbwGrid.\n * Also exports `useGridFiltering()` composable for programmatic filter control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/filtering';\n * </script>\n *\n * <template>\n * <TbwGrid filtering />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridFiltering } from '@toolbox-web/grid-vue/features/filtering';\n *\n * const { setFilter, clearAllFilters, getFilteredRowCount } = useGridFiltering();\n *\n * function filterByStatus(status: string) {\n * setFilter('status', { operator: 'equals', value: status });\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport {\n FilteringPlugin,\n type BlankMode,\n type FilterConfig,\n type FilterModel,\n type FilterPanelParams,\n} from '@toolbox-web/grid/plugins/filtering';\nimport { createApp, inject, ref, type VNode } from 'vue';\nimport { registerFeature } from '../lib/feature-registry';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\nregisterFeature('filtering', (rawConfig) => {\n if (rawConfig === true) {\n return new FilteringPlugin();\n }\n if (!rawConfig) {\n return new FilteringPlugin();\n }\n\n const config = rawConfig as FilterConfig & { filterPanelRenderer?: unknown };\n const options = { ...config } as FilterConfig;\n\n // Bridge Vue filterPanelRenderer (1 arg: params → VNode) to vanilla (2 args: container, params)\n if (typeof config.filterPanelRenderer === 'function' && config.filterPanelRenderer.length <= 1) {\n const vueFn = config.filterPanelRenderer as unknown as (params: FilterPanelParams) => VNode;\n options.filterPanelRenderer = (container: HTMLElement, params: FilterPanelParams) => {\n const wrapper = document.createElement('div');\n wrapper.style.display = 'contents';\n\n const app = createApp({\n render() {\n return vueFn(params);\n },\n });\n\n app.mount(wrapper);\n container.appendChild(wrapper);\n };\n }\n\n return new FilteringPlugin(options);\n});\n\n/**\n * Filtering methods returned from useGridFiltering.\n */\nexport interface FilteringMethods {\n /**\n * Set a filter on a specific field.\n * @param field - The field name to filter\n * @param filter - Filter configuration, or null to remove\n * @param options - `{ silent: true }` applies the filter without emitting `filter-change`\n */\n setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null, options?: { silent?: boolean }) => void;\n\n /**\n * Get the current filter for a field.\n */\n getFilter: (field: string) => FilterModel | undefined;\n\n /**\n * Get all active filters.\n */\n getFilters: () => FilterModel[];\n\n /**\n * Set all filters at once (replaces existing).\n * @param options - `{ silent: true }` applies filters without emitting `filter-change`\n */\n setFilterModel: (filters: FilterModel[], options?: { silent?: boolean }) => void;\n\n /**\n * Clear all active filters.\n * @param options - `{ silent: true }` clears filters without emitting `filter-change`\n */\n clearAllFilters: (options?: { silent?: boolean }) => void;\n\n /**\n * Clear filter for a specific field.\n * @param options - `{ silent: true }` clears filter without emitting `filter-change`\n */\n clearFieldFilter: (field: string, options?: { silent?: boolean }) => void;\n\n /**\n * Check if a field has an active filter.\n */\n isFieldFiltered: (field: string) => boolean;\n\n /**\n * Get the count of rows after filtering.\n */\n getFilteredRowCount: () => number;\n\n /**\n * Get unique values for a field (for building filter dropdowns).\n */\n getUniqueValues: (field: string) => unknown[];\n\n /**\n * Get set filters whose values no longer match any rows in the current data.\n */\n getStaleFilters: () => FilterModel[];\n\n /**\n * Get the current blank mode for a field.\n */\n getBlankMode: (field: string) => BlankMode;\n\n /**\n * Toggle blank filter mode for a field.\n */\n toggleBlankFilter: (field: string, mode: BlankMode) => void;\n}\n\n/**\n * Composable for programmatic filter control.\n *\n * Must be used within a component that contains a TbwGrid with filtering enabled.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridFiltering } from '@toolbox-web/grid-vue/features/filtering';\n *\n * const { setFilter, clearAllFilters, getFilteredRowCount, isFieldFiltered } = useGridFiltering();\n *\n * function applyQuickFilter(field: string, value: string) {\n * setFilter(field, { operator: 'contains', value });\n * }\n * </script>\n *\n * <template>\n * <input @input=\"applyQuickFilter('name', $event.target.value)\" placeholder=\"Filter by name...\" />\n * <span>{{ getFilteredRowCount() }} results</span>\n * <button @click=\"clearAllFilters\">Clear Filters</button>\n * </template>\n * ```\n */\nexport function useGridFiltering(): FilteringMethods {\n const gridElement = inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): FilteringPlugin | undefined => {\n const grid = gridElement.value as DataGridElement | null;\n return grid?.getPluginByName('filtering');\n };\n\n return {\n setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null, options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.setFilter(field, filter, options);\n },\n\n getFilter: (field: string) => getPlugin()?.getFilter(field),\n\n getFilters: () => getPlugin()?.getFilters() ?? [],\n\n setFilterModel: (filters: FilterModel[], options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.setFilterModel(filters, options);\n },\n\n clearAllFilters: (options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.clearAllFilters(options);\n },\n\n clearFieldFilter: (field: string, options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.clearFieldFilter(field, options);\n },\n\n isFieldFiltered: (field: string) => getPlugin()?.isFieldFiltered(field) ?? false,\n\n getFilteredRowCount: () => getPlugin()?.getFilteredRowCount() ?? 0,\n\n getUniqueValues: (field: string) => getPlugin()?.getUniqueValues(field) ?? [],\n\n getStaleFilters: () => getPlugin()?.getStaleFilters() ?? [],\n\n getBlankMode: (field: string): BlankMode => getPlugin()?.getBlankMode(field) ?? 'all',\n\n toggleBlankFilter: (field: string, mode: BlankMode) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.toggleBlankFilter(field, mode);\n },\n };\n}\n"],"names":["registerFeature","rawConfig","FilteringPlugin","config","options","vueFn","container","params","wrapper","createApp","useGridFiltering","gridElement","inject","GRID_ELEMENT_KEY","ref","getPlugin","field","filter","plugin","filters","mode"],"mappings":";;;;AA6CAA,EAAgB,aAAa,CAACC,MAAc;AAC1C,MAAIA,MAAc;AAChB,WAAO,IAAIC,EAAA;AAEb,MAAI,CAACD;AACH,WAAO,IAAIC,EAAA;AAGb,QAAMC,IAASF,GACTG,IAAU,EAAE,GAAGD,EAAA;AAGrB,MAAI,OAAOA,EAAO,uBAAwB,cAAcA,EAAO,oBAAoB,UAAU,GAAG;AAC9F,UAAME,IAAQF,EAAO;AACrB,IAAAC,EAAQ,sBAAsB,CAACE,GAAwBC,MAA8B;AACnF,YAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,MAAM,UAAU,YAEZC,EAAU;AAAA,QACpB,SAAS;AACP,iBAAOJ,EAAME,CAAM;AAAA,QACrB;AAAA,MAAA,CACD,EAEG,MAAMC,CAAO,GACjBF,EAAU,YAAYE,CAAO;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO,IAAIN,EAAgBE,CAAO;AACpC,CAAC;AAiGM,SAASM,IAAqC;AACnD,QAAMC,IAAcC,EAAOC,GAAkBC,EAAI,IAAI,CAAC,GAEhDC,IAAY,MACHJ,EAAY,OACZ,gBAAgB,WAAW;AAG1C,SAAO;AAAA,IACL,WAAW,CAACK,GAAeC,GAA2Cb,MAAmC;AACvG,YAAMc,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,UAAUF,GAAOC,GAAQb,CAAO;AAAA,IACzC;AAAA,IAEA,WAAW,CAACY,MAAkBD,EAAA,GAAa,UAAUC,CAAK;AAAA,IAE1D,YAAY,MAAMD,KAAa,WAAA,KAAgB,CAAA;AAAA,IAE/C,gBAAgB,CAACI,GAAwBf,MAAmC;AAC1E,YAAMc,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,eAAeC,GAASf,CAAO;AAAA,IACxC;AAAA,IAEA,iBAAiB,CAACA,MAAmC;AACnD,YAAMc,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,gBAAgBd,CAAO;AAAA,IAChC;AAAA,IAEA,kBAAkB,CAACY,GAAeZ,MAAmC;AACnE,YAAMc,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,iBAAiBF,GAAOZ,CAAO;AAAA,IACxC;AAAA,IAEA,iBAAiB,CAACY,MAAkBD,KAAa,gBAAgBC,CAAK,KAAK;AAAA,IAE3E,qBAAqB,MAAMD,KAAa,yBAAyB;AAAA,IAEjE,iBAAiB,CAACC,MAAkBD,EAAA,GAAa,gBAAgBC,CAAK,KAAK,CAAA;AAAA,IAE3E,iBAAiB,MAAMD,KAAa,gBAAA,KAAqB,CAAA;AAAA,IAEzD,cAAc,CAACC,MAA6BD,KAAa,aAAaC,CAAK,KAAK;AAAA,IAEhF,mBAAmB,CAACA,GAAeI,MAAoB;AACrD,YAAMF,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,kBAAkBF,GAAOI,CAAI;AAAA,IACtC;AAAA,EAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"filtering.js","sources":["../../../../libs/grid-vue/src/features/filtering.ts"],"sourcesContent":["/**\n * Filtering feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `filtering` prop on TbwGrid.\n * Also exports `useGridFiltering()` composable for programmatic filter control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/filtering';\n * </script>\n *\n * <template>\n * <TbwGrid filtering />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridFiltering } from '@toolbox-web/grid-vue/features/filtering';\n *\n * const { setFilter, clearAllFilters, getFilteredRowCount } = useGridFiltering();\n *\n * function filterByStatus(status: string) {\n * setFilter('status', { operator: 'equals', value: status });\n * }\n * </script>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport {\n FilteringPlugin,\n type BlankMode,\n type FilterConfig,\n type FilterModel,\n type FilterPanelParams,\n} from '@toolbox-web/grid/plugins/filtering';\nimport { createApp, inject, ref, type VNode } from 'vue';\nimport { registerFeature } from '../lib/feature-registry';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\nregisterFeature('filtering', (rawConfig) => {\n if (rawConfig === true) {\n return new FilteringPlugin();\n }\n if (!rawConfig) {\n return new FilteringPlugin();\n }\n\n const config = rawConfig as FilterConfig & { filterPanelRenderer?: unknown };\n const options = { ...config } as FilterConfig;\n\n // Bridge Vue filterPanelRenderer (1 arg: params → VNode) to vanilla (2 args: container, params)\n if (typeof config.filterPanelRenderer === 'function' && config.filterPanelRenderer.length <= 1) {\n const vueFn = config.filterPanelRenderer as unknown as (params: FilterPanelParams) => VNode;\n options.filterPanelRenderer = (container: HTMLElement, params: FilterPanelParams) => {\n const wrapper = document.createElement('div');\n wrapper.style.display = 'contents';\n\n const app = createApp({\n render() {\n return vueFn(params);\n },\n });\n\n app.mount(wrapper);\n container.appendChild(wrapper);\n };\n }\n\n return new FilteringPlugin(options);\n});\n\n/**\n * Filtering methods returned from useGridFiltering.\n */\nexport interface FilteringMethods {\n /**\n * Set a filter on a specific field.\n * @param field - The field name to filter\n * @param filter - Filter configuration, or null to remove\n * @param options - `{ silent: true }` applies the filter without emitting `filter-change`\n */\n setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null, options?: { silent?: boolean }) => void;\n\n /**\n * Get the current filter for a field.\n */\n getFilter: (field: string) => FilterModel | undefined;\n\n /**\n * Get all active filters.\n */\n getFilters: () => FilterModel[];\n\n /**\n * Set all filters at once (replaces existing).\n * @param options - `{ silent: true }` applies filters without emitting `filter-change`\n */\n setFilterModel: (filters: FilterModel[], options?: { silent?: boolean }) => void;\n\n /**\n * Clear all active filters.\n * @param options - `{ silent: true }` clears filters without emitting `filter-change`\n */\n clearAllFilters: (options?: { silent?: boolean }) => void;\n\n /**\n * Clear filter for a specific field.\n * @param options - `{ silent: true }` clears filter without emitting `filter-change`\n */\n clearFieldFilter: (field: string, options?: { silent?: boolean }) => void;\n\n /**\n * Check if a field has an active filter.\n */\n isFieldFiltered: (field: string) => boolean;\n\n /**\n * Get the count of rows after filtering.\n */\n getFilteredRowCount: () => number;\n\n /**\n * Get unique values for a field (for building filter dropdowns).\n */\n getUniqueValues: (field: string) => unknown[];\n\n /**\n * Get set filters whose values no longer match any rows in the current data.\n */\n getStaleFilters: () => FilterModel[];\n\n /**\n * Get the current blank mode for a field.\n */\n getBlankMode: (field: string) => BlankMode;\n\n /**\n * Toggle blank filter mode for a field.\n */\n toggleBlankFilter: (field: string, mode: BlankMode) => void;\n}\n\n/**\n * Composable for programmatic filter control.\n *\n * Must be used within a component that contains a TbwGrid with filtering enabled.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridFiltering } from '@toolbox-web/grid-vue/features/filtering';\n *\n * const { setFilter, clearAllFilters, getFilteredRowCount, isFieldFiltered } = useGridFiltering();\n *\n * function applyQuickFilter(field: string, value: string) {\n * setFilter(field, { operator: 'contains', value });\n * }\n * </script>\n *\n * <template>\n * <input @input=\"applyQuickFilter('name', $event.target.value)\" placeholder=\"Filter by name...\" />\n * <span>{{ getFilteredRowCount() }} results</span>\n * <button @click=\"clearAllFilters\">Clear Filters</button>\n * </template>\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 useGridFiltering(selector?: string): FilteringMethods {\n const gridElement = selector ? ref(null) : inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): FilteringPlugin | undefined => {\n const grid = (selector ? document.querySelector(selector) : gridElement.value) as DataGridElement | null;\n return grid?.getPluginByName('filtering');\n };\n\n return {\n setFilter: (field: string, filter: Omit<FilterModel, 'field'> | null, options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.setFilter(field, filter, options);\n },\n\n getFilter: (field: string) => getPlugin()?.getFilter(field),\n\n getFilters: () => getPlugin()?.getFilters() ?? [],\n\n setFilterModel: (filters: FilterModel[], options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.setFilterModel(filters, options);\n },\n\n clearAllFilters: (options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.clearAllFilters(options);\n },\n\n clearFieldFilter: (field: string, options?: { silent?: boolean }) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.clearFieldFilter(field, options);\n },\n\n isFieldFiltered: (field: string) => getPlugin()?.isFieldFiltered(field) ?? false,\n\n getFilteredRowCount: () => getPlugin()?.getFilteredRowCount() ?? 0,\n\n getUniqueValues: (field: string) => getPlugin()?.getUniqueValues(field) ?? [],\n\n getStaleFilters: () => getPlugin()?.getStaleFilters() ?? [],\n\n getBlankMode: (field: string): BlankMode => getPlugin()?.getBlankMode(field) ?? 'all',\n\n toggleBlankFilter: (field: string, mode: BlankMode) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:filtering] FilteringPlugin not found.\\n\\n` +\n ` → Enable filtering on the grid:\\n` +\n ` <TbwGrid filtering />`,\n );\n return;\n }\n plugin.toggleBlankFilter(field, mode);\n },\n };\n}\n"],"names":["registerFeature","rawConfig","FilteringPlugin","config","options","vueFn","container","params","wrapper","createApp","useGridFiltering","selector","gridElement","ref","inject","GRID_ELEMENT_KEY","getPlugin","field","filter","plugin","filters","mode"],"mappings":";;;;AA6CAA,EAAgB,aAAa,CAACC,MAAc;AAC1C,MAAIA,MAAc;AAChB,WAAO,IAAIC,EAAA;AAEb,MAAI,CAACD;AACH,WAAO,IAAIC,EAAA;AAGb,QAAMC,IAASF,GACTG,IAAU,EAAE,GAAGD,EAAA;AAGrB,MAAI,OAAOA,EAAO,uBAAwB,cAAcA,EAAO,oBAAoB,UAAU,GAAG;AAC9F,UAAME,IAAQF,EAAO;AACrB,IAAAC,EAAQ,sBAAsB,CAACE,GAAwBC,MAA8B;AACnF,YAAMC,IAAU,SAAS,cAAc,KAAK;AAC5C,MAAAA,EAAQ,MAAM,UAAU,YAEZC,EAAU;AAAA,QACpB,SAAS;AACP,iBAAOJ,EAAME,CAAM;AAAA,QACrB;AAAA,MAAA,CACD,EAEG,MAAMC,CAAO,GACjBF,EAAU,YAAYE,CAAO;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO,IAAIN,EAAgBE,CAAO;AACpC,CAAC;AAoGM,SAASM,EAAiBC,GAAqC;AACpE,QAAMC,IAAcD,IAAWE,EAAI,IAAI,IAAIC,EAAOC,GAAkBF,EAAI,IAAI,CAAC,GAEvEG,IAAY,OACFL,IAAW,SAAS,cAAcA,CAAQ,IAAIC,EAAY,QAC3D,gBAAgB,WAAW;AAG1C,SAAO;AAAA,IACL,WAAW,CAACK,GAAeC,GAA2Cd,MAAmC;AACvG,YAAMe,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,UAAUF,GAAOC,GAAQd,CAAO;AAAA,IACzC;AAAA,IAEA,WAAW,CAACa,MAAkBD,EAAA,GAAa,UAAUC,CAAK;AAAA,IAE1D,YAAY,MAAMD,KAAa,WAAA,KAAgB,CAAA;AAAA,IAE/C,gBAAgB,CAACI,GAAwBhB,MAAmC;AAC1E,YAAMe,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,eAAeC,GAAShB,CAAO;AAAA,IACxC;AAAA,IAEA,iBAAiB,CAACA,MAAmC;AACnD,YAAMe,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,gBAAgBf,CAAO;AAAA,IAChC;AAAA,IAEA,kBAAkB,CAACa,GAAeb,MAAmC;AACnE,YAAMe,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,iBAAiBF,GAAOb,CAAO;AAAA,IACxC;AAAA,IAEA,iBAAiB,CAACa,MAAkBD,KAAa,gBAAgBC,CAAK,KAAK;AAAA,IAE3E,qBAAqB,MAAMD,KAAa,yBAAyB;AAAA,IAEjE,iBAAiB,CAACC,MAAkBD,EAAA,GAAa,gBAAgBC,CAAK,KAAK,CAAA;AAAA,IAE3E,iBAAiB,MAAMD,KAAa,gBAAA,KAAqB,CAAA;AAAA,IAEzD,cAAc,CAACC,MAA6BD,KAAa,aAAaC,CAAK,KAAK;AAAA,IAEhF,mBAAmB,CAACA,GAAeI,MAAoB;AACrD,YAAMF,IAASH,EAAA;AACf,UAAI,CAACG,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,MAAAA,EAAO,kBAAkBF,GAAOI,CAAI;AAAA,IACtC;AAAA,EAAA;AAEJ;"}
|
package/features/print.d.ts
CHANGED
|
@@ -38,6 +38,9 @@ export interface PrintMethods {
|
|
|
38
38
|
* </button>
|
|
39
39
|
* </template>
|
|
40
40
|
* ```
|
|
41
|
+
* @param selector - Optional CSS selector to target a specific grid element via
|
|
42
|
+
* DOM query instead of using Vue's provide/inject. Use when the component
|
|
43
|
+
* contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
|
|
41
44
|
*/
|
|
42
|
-
export declare function useGridPrint(): PrintMethods;
|
|
45
|
+
export declare function useGridPrint(selector?: string): PrintMethods;
|
|
43
46
|
//# sourceMappingURL=print.d.ts.map
|
package/features/print.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/print.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,
|
|
1
|
+
{"version":3,"file":"print.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/print.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAE,KAAK,WAAW,EAAoB,MAAM,iCAAiC,CAAC;AAKrF,OAAO,kCAAkC,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE/C;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAsB5D"}
|
package/features/print.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { G as g } from "../chunks/use-grid-
|
|
1
|
+
import { ref as e, inject as u } from "vue";
|
|
2
|
+
import { G as g } from "../chunks/use-grid-DjGoQOoZ.js";
|
|
3
3
|
import "@toolbox-web/grid/features/print";
|
|
4
|
-
function
|
|
5
|
-
const
|
|
4
|
+
function d(n) {
|
|
5
|
+
const o = n ? e(null) : u(g, e(null)), i = () => (n ? document.querySelector(n) : o.value)?.getPluginByName("print");
|
|
6
6
|
return {
|
|
7
|
-
print: async (
|
|
8
|
-
const
|
|
9
|
-
if (!
|
|
7
|
+
print: async (r) => {
|
|
8
|
+
const t = i();
|
|
9
|
+
if (!t) {
|
|
10
10
|
console.warn(
|
|
11
11
|
`[tbw-grid:print] PrintPlugin not found.
|
|
12
12
|
|
|
@@ -15,12 +15,12 @@ function s() {
|
|
|
15
15
|
);
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
|
-
await
|
|
18
|
+
await t.print(r);
|
|
19
19
|
},
|
|
20
|
-
isPrinting: () =>
|
|
20
|
+
isPrinting: () => i()?.isPrinting() ?? !1
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
23
|
export {
|
|
24
|
-
|
|
24
|
+
d as useGridPrint
|
|
25
25
|
};
|
|
26
26
|
//# sourceMappingURL=print.js.map
|
package/features/print.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"print.js","sources":["../../../../libs/grid-vue/src/features/print.ts"],"sourcesContent":["/**\n * Print feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `print` prop on TbwGrid.\n * Also exports `useGridPrint()` composable for programmatic print control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/print';\n * </script>\n *\n * <template>\n * <TbwGrid print />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridPrint } from '@toolbox-web/grid-vue/features/print';\n *\n * const { print, isPrinting } = useGridPrint();\n * </script>\n *\n * <template>\n * <button @click=\"print\" :disabled=\"isPrinting()\">Print Grid</button>\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { type
|
|
1
|
+
{"version":3,"file":"print.js","sources":["../../../../libs/grid-vue/src/features/print.ts"],"sourcesContent":["/**\n * Print feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `print` prop on TbwGrid.\n * Also exports `useGridPrint()` composable for programmatic print control.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/print';\n * </script>\n *\n * <template>\n * <TbwGrid print />\n * </template>\n * ```\n *\n * @example Using the composable\n * ```vue\n * <script setup>\n * import { useGridPrint } from '@toolbox-web/grid-vue/features/print';\n *\n * const { print, isPrinting } = useGridPrint();\n * </script>\n *\n * <template>\n * <button @click=\"print\" :disabled=\"isPrinting()\">Print Grid</button>\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { type PrintParams, type PrintPlugin } from '@toolbox-web/grid/plugins/print';\nimport { inject, ref } from 'vue';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\n// Delegate to core feature registration\nimport '@toolbox-web/grid/features/print';\n\n/**\n * Print methods returned from useGridPrint.\n */\nexport interface PrintMethods {\n /**\n * Print the grid.\n * Opens browser print dialog after preparing the grid for printing.\n * @param params - Optional print parameters\n */\n print: (params?: PrintParams) => Promise<void>;\n\n /**\n * Check if a print operation is currently in progress.\n */\n isPrinting: () => boolean;\n}\n\n/**\n * Composable for programmatic print control.\n *\n * Must be used within a component that contains a TbwGrid with print enabled.\n *\n * @example\n * ```vue\n * <script setup>\n * import { useGridPrint } from '@toolbox-web/grid-vue/features/print';\n *\n * const { print, isPrinting } = useGridPrint();\n *\n * async function handlePrint() {\n * await print({ title: 'My Report', isolate: true });\n * console.log('Print completed');\n * }\n * </script>\n *\n * <template>\n * <button @click=\"handlePrint\" :disabled=\"isPrinting()\">\n * {{ isPrinting() ? 'Printing...' : 'Print' }}\n * </button>\n * </template>\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 useGridPrint(selector?: string): PrintMethods {\n const gridElement = selector ? ref(null) : inject(GRID_ELEMENT_KEY, ref(null));\n\n const getPlugin = (): PrintPlugin | undefined => {\n const grid = (selector ? document.querySelector(selector) : gridElement.value) as DataGridElement | null;\n return grid?.getPluginByName('print');\n };\n\n return {\n print: async (params?: PrintParams) => {\n const plugin = getPlugin();\n if (!plugin) {\n console.warn(\n `[tbw-grid:print] PrintPlugin not found.\\n\\n` + ` → Enable print on the grid:\\n` + ` <TbwGrid print />`,\n );\n return;\n }\n await plugin.print(params);\n },\n\n isPrinting: () => getPlugin()?.isPrinting() ?? false,\n };\n}\n"],"names":["useGridPrint","selector","gridElement","ref","inject","GRID_ELEMENT_KEY","getPlugin","params","plugin"],"mappings":";;;AAsFO,SAASA,EAAaC,GAAiC;AAC5D,QAAMC,IAAcD,IAAWE,EAAI,IAAI,IAAIC,EAAOC,GAAkBF,EAAI,IAAI,CAAC,GAEvEG,IAAY,OACFL,IAAW,SAAS,cAAcA,CAAQ,IAAIC,EAAY,QAC3D,gBAAgB,OAAO;AAGtC,SAAO;AAAA,IACL,OAAO,OAAOK,MAAyB;AACrC,YAAMC,IAASF,EAAA;AACf,UAAI,CAACE,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAEF;AAAA,MACF;AACA,YAAMA,EAAO,MAAMD,CAAM;AAAA,IAC3B;AAAA,IAEA,YAAY,MAAMD,KAAa,gBAAgB;AAAA,EAAA;AAEnD;"}
|
package/features/selection.d.ts
CHANGED
|
@@ -58,6 +58,9 @@ export interface SelectionMethods<TRow = unknown> {
|
|
|
58
58
|
* }
|
|
59
59
|
* </script>
|
|
60
60
|
* ```
|
|
61
|
+
* @param selector - Optional CSS selector to target a specific grid element via
|
|
62
|
+
* DOM query instead of using Vue's provide/inject. Use when the component
|
|
63
|
+
* contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
|
|
61
64
|
*/
|
|
62
|
-
export declare function useGridSelection<TRow = unknown>(): SelectionMethods<TRow>;
|
|
65
|
+
export declare function useGridSelection<TRow = unknown>(selector?: string): SelectionMethods<TRow>;
|
|
63
66
|
//# 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,
|
|
1
|
+
{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAGH,OAAO,EAAE,KAAK,SAAS,EAAwB,KAAK,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAKjH,OAAO,sCAAsC,CAAC;AAE9C;;;;;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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,CA8D1F"}
|
package/features/selection.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { G as
|
|
1
|
+
import { ref as u, inject as d } from "vue";
|
|
2
|
+
import { G as a } from "../chunks/use-grid-DjGoQOoZ.js";
|
|
3
3
|
import "@toolbox-web/grid/features/selection";
|
|
4
|
-
function
|
|
5
|
-
const
|
|
4
|
+
function S(r) {
|
|
5
|
+
const g = r ? u(null) : d(a, u(null)), i = () => r ? document.querySelector(r) : g.value, t = () => i()?.getPluginByName("selection");
|
|
6
6
|
return {
|
|
7
7
|
selectAll: () => {
|
|
8
8
|
const e = t();
|
|
@@ -15,12 +15,12 @@ function w() {
|
|
|
15
15
|
);
|
|
16
16
|
return;
|
|
17
17
|
}
|
|
18
|
-
const n =
|
|
19
|
-
if (
|
|
18
|
+
const n = i(), s = e.config?.mode;
|
|
19
|
+
if (s === "row") {
|
|
20
20
|
const l = n?.rows?.length ?? 0, o = /* @__PURE__ */ new Set();
|
|
21
|
-
for (let
|
|
21
|
+
for (let c = 0; c < l; c++) o.add(c);
|
|
22
22
|
e.selected = o, e.requestAfterRender?.();
|
|
23
|
-
} else if (
|
|
23
|
+
} else if (s === "range") {
|
|
24
24
|
const l = n?.rows?.length ?? 0, o = n?._columns?.length ?? 0;
|
|
25
25
|
l > 0 && o > 0 && e.setRanges([{ from: { row: 0, col: 0 }, to: { row: l - 1, col: o - 1 } }]);
|
|
26
26
|
}
|
|
@@ -37,6 +37,6 @@ function w() {
|
|
|
37
37
|
};
|
|
38
38
|
}
|
|
39
39
|
export {
|
|
40
|
-
|
|
40
|
+
S as useGridSelection
|
|
41
41
|
};
|
|
42
42
|
//# 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 { type
|
|
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 { type CellRange, type SelectionPlugin, type SelectionResult } from '@toolbox-web/grid/plugins/selection';\nimport { inject, ref } from 'vue';\nimport { GRID_ELEMENT_KEY } from '../lib/use-grid';\n\n// Delegate to core feature registration\nimport '@toolbox-web/grid/features/selection';\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 * @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 useGridSelection<TRow = unknown>(selector?: string): SelectionMethods<TRow> {\n const gridElement = selector ? ref(null) : inject(GRID_ELEMENT_KEY, ref(null));\n\n const getGrid = (): DataGridElement<TRow> | null => {\n if (selector) return document.querySelector(selector) as DataGridElement<TRow> | null;\n return gridElement.value as DataGridElement<TRow> | null;\n };\n\n const getPlugin = (): SelectionPlugin | undefined => {\n return getGrid()?.getPluginByName('selection');\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 = getGrid();\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":["useGridSelection","selector","gridElement","ref","inject","GRID_ELEMENT_KEY","getGrid","getPlugin","plugin","grid","mode","rowCount","allIndices","i","colCount","row","col","ranges"],"mappings":";;;AA8GO,SAASA,EAAiCC,GAA2C;AAC1F,QAAMC,IAAcD,IAAWE,EAAI,IAAI,IAAIC,EAAOC,GAAkBF,EAAI,IAAI,CAAC,GAEvEG,IAAU,MACVL,IAAiB,SAAS,cAAcA,CAAQ,IAC7CC,EAAY,OAGfK,IAAY,MACTD,EAAA,GAAW,gBAAgB,WAAW;AAG/C,SAAO;AAAA,IACL,WAAW,MAAM;AACf,YAAME,IAASD,EAAA;AACf,UAAI,CAACC,GAAQ;AACX,gBAAQ;AAAA,UACN;AAAA;AAAA;AAAA;AAAA,QAAA;AAIF;AAAA,MACF;AACA,YAAMC,IAAOH,EAAA,GAEPI,IAAQF,EAAe,QAAQ;AAErC,UAAIE,MAAS,OAAO;AAClB,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCG,wBAAiB,IAAA;AACvB,iBAASC,IAAI,GAAGA,IAAIF,GAAUE,IAAK,CAAAD,EAAW,IAAIC,CAAC;AAClD,QAAAL,EAAe,WAAWI,GAC1BJ,EAAe,qBAAA;AAAA,MAClB,WAAWE,MAAS,SAAS;AAC3B,cAAMC,IAAWF,GAAM,MAAM,UAAU,GACjCK,IAAYL,GAAc,UAAU,UAAU;AACpD,QAAIE,IAAW,KAAKG,IAAW,KAC7BN,EAAO,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,GAAG,KAAK,EAAA,GAAK,IAAI,EAAE,KAAKG,IAAW,GAAG,KAAKG,IAAW,EAAA,EAAE,CAAG,CAAC;AAAA,MAEjG;AAAA,IACF;AAAA,IAEA,gBAAgB,MAAM;AACpB,MAAAP,EAAA,GAAa,eAAA;AAAA,IACf;AAAA,IAEA,cAAc,MACLA,EAAA,GAAa,aAAA,KAAkB;AAAA,IAGxC,gBAAgB,CAACQ,GAAaC,MACrBT,EAAA,GAAa,eAAeQ,GAAKC,CAAG,KAAK;AAAA,IAGlD,WAAW,CAACC,MAAwB;AAClC,MAAAV,EAAA,GAAa,UAAUU,CAAM;AAAA,IAC/B;AAAA,IAEA,iBAAiB,MACRV,EAAA,GAAa,gBAAA,KAA2B,CAAA;AAAA,EACjD;AAEJ;"}
|
package/features/undo-redo.d.ts
CHANGED
|
@@ -73,6 +73,9 @@ export interface UndoRedoMethods {
|
|
|
73
73
|
* </div>
|
|
74
74
|
* </template>
|
|
75
75
|
* ```
|
|
76
|
+
* @param selector - Optional CSS selector to target a specific grid element via
|
|
77
|
+
* DOM query instead of using Vue's provide/inject. Use when the component
|
|
78
|
+
* contains multiple grids, e.g. `'tbw-grid.primary'` or `'#my-grid'`.
|
|
76
79
|
*/
|
|
77
|
-
export declare function useGridUndoRedo(): UndoRedoMethods;
|
|
80
|
+
export declare function useGridUndoRedo(selector?: string): UndoRedoMethods;
|
|
78
81
|
//# sourceMappingURL=undo-redo.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"undo-redo.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/undo-redo.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAGH,OAAO,
|
|
1
|
+
{"version":3,"file":"undo-redo.d.ts","sourceRoot":"","sources":["../../../../libs/grid-vue/src/features/undo-redo.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAGH,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,qCAAqC,CAAC;AAK/F,OAAO,sCAAsC,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,IAAI,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAElC;;;OAGG;IACH,IAAI,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;IAElC;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,OAAO,CAAC;IAEvB;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,YAAY,EAAE,MAAM,cAAc,EAAE,CAAC;IAErC;;OAEG;IACH,YAAY,EAAE,MAAM,cAAc,EAAE,CAAC;IAErC;;;OAGG;IACH,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5F;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAE7B;;;;;OAKG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,eAAe,CA+FlE"}
|