@rastr/vue 0.0.0-stage → 0.1.0-beta.1
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/LICENSE +21 -0
- package/README.md +209 -2
- package/dist/RsGrid-CuQ785Nt.d.cts +298 -0
- package/dist/RsGrid-CuQ785Nt.d.ts +298 -0
- package/dist/index.cjs +973 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +222 -0
- package/dist/index.d.ts +222 -0
- package/dist/index.js +926 -0
- package/dist/index.js.map +1 -0
- package/dist/pdf-designer.cjs +119 -0
- package/dist/pdf-designer.cjs.map +1 -0
- package/dist/pdf-designer.d.cts +68 -0
- package/dist/pdf-designer.d.ts +68 -0
- package/dist/pdf-designer.js +82 -0
- package/dist/pdf-designer.js.map +1 -0
- package/dist/tree-list.cjs +133 -0
- package/dist/tree-list.cjs.map +1 -0
- package/dist/tree-list.d.cts +91 -0
- package/dist/tree-list.d.ts +91 -0
- package/dist/tree-list.js +106 -0
- package/dist/tree-list.js.map +1 -0
- package/package.json +96 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Ondřej Synek
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,210 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @rastr/vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vue 3 components for the Rastr data grid: `RsGrid` and the declarative `RsColumn`.
|
|
4
|
+
Cell slots are real Vue components (global components, plugins and `inject` work), and they
|
|
5
|
+
keep their state when the data reloads.
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<script setup lang="ts">
|
|
9
|
+
import { createArrayDataSource, defineColumns, RsGrid } from '@rastr/vue';
|
|
10
|
+
import '@rastr/controls/styles.css';
|
|
11
|
+
import '@rastr/grid/styles.css';
|
|
12
|
+
|
|
13
|
+
const columns = defineColumns<Order>([
|
|
14
|
+
{ field: 'number', caption: 'Číslo', width: 120, pinned: 'start' },
|
|
15
|
+
{ field: 'customer.name', caption: 'Zákazník' },
|
|
16
|
+
{ field: 'status', caption: 'Stav', dataType: 'enum', lookup: statuses },
|
|
17
|
+
{ field: 'total', caption: 'Celkem', dataType: 'number', format: { style: 'currency', currency: 'CZK' } },
|
|
18
|
+
]);
|
|
19
|
+
const source = createArrayDataSource(orders, columns); // or createRemoteDataSource({ url }) from @rastr/core
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<template>
|
|
23
|
+
<RsGrid
|
|
24
|
+
:data-source="source"
|
|
25
|
+
key-field="id"
|
|
26
|
+
:columns="columns"
|
|
27
|
+
v-model:state="gridState"
|
|
28
|
+
selection-mode="multiple"
|
|
29
|
+
state-storage="local:orders-grid:v1"
|
|
30
|
+
@row-dbl-click="({ row }) => openOrder(row)"
|
|
31
|
+
>
|
|
32
|
+
<template #cell-status="{ value, text }"><StatusBadge :value="value" :text="text" /></template>
|
|
33
|
+
<template #toolbar-end><v-btn @click="add">Nová objednávka</v-btn></template>
|
|
34
|
+
</RsGrid>
|
|
35
|
+
</template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Declarative columns work too (do not combine with the `columns` prop):
|
|
39
|
+
|
|
40
|
+
```vue
|
|
41
|
+
<RsGrid :data-source="source" key-field="id">
|
|
42
|
+
<RsColumn field="number" caption="Číslo" :width="120" pinned="start" />
|
|
43
|
+
<RsColumn field="status" caption="Stav">
|
|
44
|
+
<template #cell="{ text }"><b>{{ text }}</b></template>
|
|
45
|
+
</RsColumn>
|
|
46
|
+
</RsGrid>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Changing `columns`, `dataSource`, `keyField`, `selectionMode`, `locale` or `messages` rebuilds the
|
|
50
|
+
grid and keeps sorting, filters, widths, search and page. `theme`, `density`, `rowClass` and
|
|
51
|
+
`height` change in place. A row that leaves the current page unmounts its cell components.
|
|
52
|
+
|
|
53
|
+
## Saved views and the filter builder
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<script setup lang="ts">
|
|
57
|
+
import { RsGrid } from '@rastr/vue';
|
|
58
|
+
import type { SavedViewsAdapter } from '@rastr/vue';
|
|
59
|
+
import '@rastr/filter-builder/styles.css';
|
|
60
|
+
|
|
61
|
+
// MemosERP: userGridFilterApi; filterJson keeps storing JSON, old DevExtreme content is read too.
|
|
62
|
+
const views: SavedViewsAdapter = {
|
|
63
|
+
list: async () => (await userGridFilterApi.list(gridKey)).map(f => ({ id: String(f.id), name: f.name, isDefault: f.isDefault, state: JSON.parse(f.filterJson) })),
|
|
64
|
+
save: async v => ({ id: String(await userGridFilterApi.upsert({ id: v.id, gridKey, name: v.name, isDefault: v.isDefault, filterJson: JSON.stringify(v.state) })) }),
|
|
65
|
+
remove: id => userGridFilterApi.remove(Number(id)),
|
|
66
|
+
};
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<RsGrid :data-source="source" key-field="id" :columns="columns" :saved-views="views" state-storage="session:orders" />
|
|
71
|
+
</template>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
- The view picker appears in the toolbar (unless `#toolbar-start` is used; then place
|
|
75
|
+
`<RsSavedViews :views="grid.savedViews" :store="grid.store" :columns="columns" />` yourself).
|
|
76
|
+
- A view stores filter, columns, sort and search. The default view is applied when the grid is
|
|
77
|
+
created without a state restored from `state-storage`.
|
|
78
|
+
- Views saved by DevExtreme (`filterValue` + `columns`) are converted when read; an unconvertible one
|
|
79
|
+
is listed as disabled with the reason. New saves write the Rastr format, so the stored JSON
|
|
80
|
+
migrates view by view (or all at once with `DevExtremeGridStatusConverter` in Rastr.Data).
|
|
81
|
+
- `RsFilterBuilder` is the builder alone: `<RsFilterBuilder v-model="filter" :columns="columns" />`.
|
|
82
|
+
|
|
83
|
+
## Virtual scrolling
|
|
84
|
+
|
|
85
|
+
`<RsGrid scrolling="virtual" :block-size="100" height="640px" … />` renders only the visible rows and loads them in
|
|
86
|
+
blocks while scrolling; the exposed `scrollToIndex(index)` brings a row into view. See the `@rastr/grid` README.
|
|
87
|
+
|
|
88
|
+
## Moving rows
|
|
89
|
+
|
|
90
|
+
```vue
|
|
91
|
+
<RsGrid :data-source="source" key-field="id" :columns="columns"
|
|
92
|
+
:row-reorder="{ onReorder: e => saveOrder(e.fromIndex, e.toIndex), sortField: 'order' }"
|
|
93
|
+
@reorder-error="e => toast(e.error)" />
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
`row-reorder` is read again on every move, so its functions may change. Details and the copy
|
|
97
|
+
shortcuts are in the `@rastr/grid` README (Moving rows, Copying cells).
|
|
98
|
+
|
|
99
|
+
## Summaries and row details
|
|
100
|
+
|
|
101
|
+
```vue
|
|
102
|
+
<RsGrid :data-source="source" key-field="id" ref="grid" :detail-can-expand="row => row.items > 0" @detail-toggle="onToggle">
|
|
103
|
+
<RsColumn field="number" :summary="['count']" />
|
|
104
|
+
<RsColumn field="total" data-type="number" :summary="['sum', 'avg']" />
|
|
105
|
+
<template #detail="{ row }">
|
|
106
|
+
<OrderDetail :order="row" />
|
|
107
|
+
</template>
|
|
108
|
+
</RsGrid>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The `#detail` slot turns the detail column on; its component keeps its state across reloads and is
|
|
112
|
+
unmounted when the detail closes or the row leaves the page. `grid.value.expandDetail(key)` /
|
|
113
|
+
`collapseDetail(key)` / `isDetailExpanded(key)` are exposed. Summaries work with `columns` too
|
|
114
|
+
(`summary`, `summaryFormat`). See the `@rastr/grid` README.
|
|
115
|
+
|
|
116
|
+
## Bands, narrow and wide grids
|
|
117
|
+
|
|
118
|
+
```vue
|
|
119
|
+
<RsGrid :header-bands="[{ caption: 'Zákazník', children: ['customer', 'city'] }]" :column-virtualization="'auto'" …>
|
|
120
|
+
<RsColumn field="customer" />
|
|
121
|
+
<RsColumn field="city" :hiding-priority="1" />
|
|
122
|
+
</RsGrid>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
See the `@rastr/grid` README (Header bands, Narrow grids and wide grids).
|
|
126
|
+
|
|
127
|
+
## Tree list
|
|
128
|
+
|
|
129
|
+
```vue
|
|
130
|
+
<script setup lang="ts">
|
|
131
|
+
import { RsTreeList } from '@rastr/vue/tree-list';
|
|
132
|
+
import '@rastr/tree-list/styles.css';
|
|
133
|
+
const expanded = ref<Key[]>([]);
|
|
134
|
+
</script>
|
|
135
|
+
|
|
136
|
+
<template>
|
|
137
|
+
<RsTreeList v-model:expanded-keys="expanded" :rows="units" key-field="id" parent-field="parentId" :columns="columns" height="600px" />
|
|
138
|
+
</template>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
`@rastr/vue/tree-list` is a separate entry, and `@rastr/tree-list` is an optional peer dependency.
|
|
142
|
+
- A new `rows` array refreshes the tree and drops expanded keys that no longer exist.
|
|
143
|
+
- Exposed: `expand`, `collapse`, `expandAll`, `collapseAll`, `refresh` and `store`.
|
|
144
|
+
- Events: `rowClick`, `rowDblClick`, `focusedRowChange` and `selectionChange`.
|
|
145
|
+
|
|
146
|
+
## PDF template designer
|
|
147
|
+
|
|
148
|
+
```vue
|
|
149
|
+
<script setup lang="ts">
|
|
150
|
+
import { RsGrid } from '@rastr/vue';
|
|
151
|
+
import type { RsGridExpose } from '@rastr/vue';
|
|
152
|
+
import { RsPdfDesigner } from '@rastr/vue/pdf-designer';
|
|
153
|
+
import { createRestTemplateStore } from '@rastr/pdf-template';
|
|
154
|
+
import '@rastr/pdf-designer/styles.css';
|
|
155
|
+
|
|
156
|
+
const grid = ref<RsGridExpose<Order>>();
|
|
157
|
+
const template = shallowRef<ReportTemplate | null>(null);
|
|
158
|
+
const store = createRestTemplateStore({ url: '/api/pdf-templates' });
|
|
159
|
+
</script>
|
|
160
|
+
|
|
161
|
+
<template>
|
|
162
|
+
<RsGrid ref="grid" :data-source="source" key-field="id" :columns="columns" />
|
|
163
|
+
<RsPdfDesigner v-model:template="template" :grid="grid ?? null" :store="store" grid-id="orders" title="Přehled objednávek" @issues="issues = $event" />
|
|
164
|
+
</template>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
- `@rastr/vue/pdf-designer` is a separate entry. The main bundle does not contain the designer, and
|
|
168
|
+
`@rastr/pdf-designer`, `@rastr/pdf-template` and `@rastr/export-pdf` are optional peer
|
|
169
|
+
dependencies.
|
|
170
|
+
- With `grid`, the preview shows the grid's first rows and the table offers its columns.
|
|
171
|
+
`@rastr/export-pdf` is imported when the designer needs it.
|
|
172
|
+
- `update:template` is emitted on every change, also an invalid one. `issues` lists the problems
|
|
173
|
+
(empty = valid). Its own template coming back through v-model keeps the undo history.
|
|
174
|
+
- Other props: `locale`, `messages`, `variables`, `snap`, `preview-rows`, `pdf-context` (company,
|
|
175
|
+
user, … for the preview). Exposed `undo()` / `redo()`.
|
|
176
|
+
- `RsGridExpose.columns` are the columns the grid shows.
|
|
177
|
+
|
|
178
|
+
## Migrating from the MemosERP `DataGrid.vue` wrapper
|
|
179
|
+
|
|
180
|
+
| `DataGrid.vue` | `RsGrid` |
|
|
181
|
+
|---|---|
|
|
182
|
+
| `:columns` (`dataField`, `caption`, `dataType`, `lookup`, `calculateCellValue`) | `:columns` (`field`, `caption`, `dataType`, `lookup`, `value`) |
|
|
183
|
+
| `:data-source` (DevExtreme store) | `:data-source` (`createRemoteDataSource`) + `key-field` |
|
|
184
|
+
| `column-configuration` | `applyColumnMetadata(columns, metadata)` from `@rastr/core` |
|
|
185
|
+
| `#[dataField]` cell slots (`useCellSlot`) | `#cell-<field>` slots, props `{ row, value, text, key, rowIndex, column }` |
|
|
186
|
+
| `#headerLeft` / `#headerRight` / `#toolbarActions` | `#toolbar-start` / `#toolbar-end` |
|
|
187
|
+
| `@row-dbl-click` (row) | `@row-dbl-click` (`{ row, key, event }`) |
|
|
188
|
+
| `selection-mode`, `show-check-boxe-mode="always"` | `selection-mode` (checkboxes shown for `multiple`) |
|
|
189
|
+
| `select-all-mode="allPages"` + `selectAll()` | `ref.selectAll()` (all pages, `getSelection()` returns `{ mode: 'exclude' }`) |
|
|
190
|
+
| `@selection-changed` | `@selection-change` (`keys, selection`) |
|
|
191
|
+
| `disable-pagination`, `:page-size` | `:paging="false"`, `:page-size` |
|
|
192
|
+
| `map-row-class` | `row-class` |
|
|
193
|
+
| `grid-height` | `height` |
|
|
194
|
+
| `filters-route-key-suffix` (session storage per route) | `state-storage="session:<route>-<suffix>"` |
|
|
195
|
+
| `ref` → `refresh`, `setFieldFilter`, `clearFieldFilter`, `getCurrentFilter`, `getSelectedRowsData`, `getSelectedRowsKeys` | `refresh`, `setColumnFilter(field, filter)`, `setColumnFilter(field, null)`, `getState().filter`, `getSelectedRows`, `getSelectedKeys` |
|
|
196
|
+
| `calculateFilterExpression: handleNullFilterExpression` | not needed: null semantics are built in |
|
|
197
|
+
| `row-number-column` | `rowNumberColumn()` in `columns` (numbers continue across pages) |
|
|
198
|
+
| `:actions` (`requireAnyPermission`, `hidden`, `disabledRowIds`, `loadingRowIds`) | `actionsColumn(actions.filter(a => can(a)))` with `hidden(row)`, `disabled(row)`, `loading(row)` |
|
|
199
|
+
| `copyable: true` + toast from the wrapper | `copyable: true` + `@copy="({ ok, text }) => toast(…)"` |
|
|
200
|
+
| `allow-export` (`devextreme/excel_exporter` + `exceljs`) | `:export="{ fileName: 'Export-' + title, formats: { xlsx: () => import('@rastr/export-xlsx'), csv: () => import('@rastr/export-csv') } }"` (typed values, no runtime dependency; a changing `fileName` does not rebuild the grid) |
|
|
201
|
+
| large exports through `MemosERP.API` + `exceljs` | `:export="{ …, server: createRemoteExport({ url: '/api/orders/export' }), serverFormats: ['xlsx'] }"` + `query.ToGridExportResult(request, Options)` |
|
|
202
|
+
| `DataGridFilters` + `DxFilterBuilder` | `:saved-views="adapter"` (picker, builder dialog, default view) |
|
|
203
|
+
| `UpsertUserGridFilterRequest.filterJson` | unchanged JSON column; content moves from the DevExtreme to the Rastr format as views are saved |
|
|
204
|
+
| `edit-mode="cell\|row\|batch"` | `:editing="{ mode, onSave }"` (callbacks are read when called, inline objects do not rebuild) |
|
|
205
|
+
| `allowEditing` / `allow-editing` | `editable` on the column or `<RsColumn editable>` |
|
|
206
|
+
| `validationRules` (`range`, `custom`) | `validate: [range({ min, max }), custom(test, message)]` |
|
|
207
|
+
| `@update-row` / `@save-batch` / `@delete-row` | one `onSave(changes)` returning a promise (errors per field are shown at the cells) |
|
|
208
|
+
| `applyChangesToGrid` | not needed: the grid reloads after a successful save |
|
|
209
|
+
| `editCellTemplate` editor templates | `#edit-<field>` or `<RsColumn>` `#edit`, props `{ row, value, column, setValue, commit, cancel }` |
|
|
210
|
+
| edit/delete buttons in `:actions` | `editActionsColumn()` with `editing.allowDelete` / `confirmDelete`; `@save-error` for a toast |
|
|
@@ -0,0 +1,298 @@
|
|
|
1
|
+
import * as _rastr_grid from '@rastr/grid';
|
|
2
|
+
import { GridColumn, CellRenderer, HeaderRenderer, Messages, GridEditingOptions, GridRowReorderOptions, HeaderBand, GridExportOptions, GridEvents, CopyResult, ExportFormat } from '@rastr/grid';
|
|
3
|
+
import * as vue from 'vue';
|
|
4
|
+
import { Slot, ComponentInternalInstance, PropType, VNode, SlotsType } from 'vue';
|
|
5
|
+
import { Key, StateStorage, DataSource, GridState, GridStore, SavedViewsAdapter, SelectionState, FilterNode, SavedViews } from '@rastr/core';
|
|
6
|
+
|
|
7
|
+
interface CellSlotProps<TRow> {
|
|
8
|
+
readonly row: TRow;
|
|
9
|
+
readonly value: unknown;
|
|
10
|
+
readonly text: string;
|
|
11
|
+
readonly key: Key;
|
|
12
|
+
readonly rowIndex: number;
|
|
13
|
+
readonly column: GridColumn<TRow>;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Creates a cell renderer that mounts a Vue slot into each cell. The slot sees the parent's app
|
|
17
|
+
* context and provides (global components, plugins, inject), and a new row object for the same
|
|
18
|
+
* key only updates the slot props, so components in cells keep their state.
|
|
19
|
+
*/
|
|
20
|
+
declare function createVueCellRenderer<TRow>(getSlot: () => Slot | undefined, parent: ComponentInternalInstance): CellRenderer<TRow>;
|
|
21
|
+
interface HeaderSlotProps<TRow> {
|
|
22
|
+
readonly column: GridColumn<TRow>;
|
|
23
|
+
readonly caption: string;
|
|
24
|
+
}
|
|
25
|
+
/** Header renderer that mounts a Vue slot with { column, caption }. */
|
|
26
|
+
declare function createVueHeaderRenderer<TRow>(getSlot: () => Slot | undefined, parent: ComponentInternalInstance): HeaderRenderer<TRow>;
|
|
27
|
+
|
|
28
|
+
interface EditSlotProps<TRow> {
|
|
29
|
+
readonly row: TRow;
|
|
30
|
+
readonly value: unknown;
|
|
31
|
+
readonly column: GridColumn<TRow>;
|
|
32
|
+
setValue(value: unknown): void;
|
|
33
|
+
commit(): void;
|
|
34
|
+
cancel(): void;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
type StateStorageProp = `local:${string}` | `session:${string}` | {
|
|
38
|
+
readonly key: string;
|
|
39
|
+
readonly storage: StateStorage;
|
|
40
|
+
};
|
|
41
|
+
interface RsGridStoreProps<TRow> {
|
|
42
|
+
readonly dataSource: DataSource<TRow>;
|
|
43
|
+
readonly keyField: string;
|
|
44
|
+
readonly selectionMode?: 'none' | 'single' | 'multiple' | undefined;
|
|
45
|
+
readonly pageSize?: number | undefined;
|
|
46
|
+
/** Defaults to true. */
|
|
47
|
+
readonly paging?: boolean | undefined;
|
|
48
|
+
/** 'virtual' renders the visible rows only and loads blocks while scrolling; needs height. */
|
|
49
|
+
readonly scrolling?: 'paged' | 'virtual' | undefined;
|
|
50
|
+
readonly blockSize?: number | undefined;
|
|
51
|
+
readonly stateStorage?: StateStorageProp | undefined;
|
|
52
|
+
readonly initialState?: Partial<GridState> | undefined;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/** Props of the #detail slot. */
|
|
56
|
+
interface DetailSlotProps<TRow> {
|
|
57
|
+
readonly row: TRow;
|
|
58
|
+
readonly key: Key;
|
|
59
|
+
}
|
|
60
|
+
interface RsGridExpose<TRow> {
|
|
61
|
+
readonly store: GridStore<TRow>;
|
|
62
|
+
refresh(): Promise<void>;
|
|
63
|
+
setFilter(filter: FilterNode | null): void;
|
|
64
|
+
setColumnFilter(field: string, filter: FilterNode | null): void;
|
|
65
|
+
clearFilters(): void;
|
|
66
|
+
getState(): GridState;
|
|
67
|
+
/** Selected keys; throws when "select all" is active, use getSelection() then. */
|
|
68
|
+
getSelectedKeys(): readonly Key[];
|
|
69
|
+
getSelection(): SelectionState;
|
|
70
|
+
/** Selected rows on the current page. */
|
|
71
|
+
getSelectedRows(): readonly TRow[];
|
|
72
|
+
selectAll(): void;
|
|
73
|
+
clearSelection(): void;
|
|
74
|
+
focusRow(key: Key): void;
|
|
75
|
+
/** Opens the detail (#detail slot) of a row on the current page. */
|
|
76
|
+
expandDetail(key: Key): void;
|
|
77
|
+
collapseDetail(key: Key): void;
|
|
78
|
+
isDetailExpanded(key: Key): boolean;
|
|
79
|
+
/** Scrolls a row of the whole result into view (virtual) or opens its page (paged). */
|
|
80
|
+
scrollToIndex(index: number): void;
|
|
81
|
+
/** Exports the current result in a format from the export prop. */
|
|
82
|
+
export(format: ExportFormat): Promise<void>;
|
|
83
|
+
/** Saved views controller; null without the savedViews prop or before mount. */
|
|
84
|
+
readonly savedViews: SavedViews | null;
|
|
85
|
+
/** Columns the grid shows (from the columns prop or RsColumn children); empty before mount. */
|
|
86
|
+
readonly columns: readonly GridColumn<TRow>[];
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Row type for runtime props. Vue props cannot be generic, and GridColumn<Row> is not assignable to
|
|
90
|
+
* GridColumn<unknown> (callbacks are contravariant), so props accept any row type.
|
|
91
|
+
*/
|
|
92
|
+
type AnyRow = any;
|
|
93
|
+
declare const RsGrid: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
94
|
+
dataSource: PropType<DataSource<AnyRow>>;
|
|
95
|
+
keyField: StringConstructor;
|
|
96
|
+
store: PropType<GridStore<AnyRow>>;
|
|
97
|
+
columns: PropType<GridColumn<AnyRow>[]>;
|
|
98
|
+
selectionMode: PropType<"none" | "single" | "multiple">;
|
|
99
|
+
pageSize: NumberConstructor;
|
|
100
|
+
paging: {
|
|
101
|
+
readonly type: BooleanConstructor;
|
|
102
|
+
readonly default: undefined;
|
|
103
|
+
};
|
|
104
|
+
scrolling: PropType<"paged" | "virtual">;
|
|
105
|
+
blockSize: NumberConstructor;
|
|
106
|
+
stateStorage: PropType<StateStorageProp>;
|
|
107
|
+
initialState: PropType<Partial<GridState>>;
|
|
108
|
+
/** v-model:state */
|
|
109
|
+
state: PropType<GridState>;
|
|
110
|
+
showCheckboxes: {
|
|
111
|
+
readonly type: BooleanConstructor;
|
|
112
|
+
readonly default: undefined;
|
|
113
|
+
};
|
|
114
|
+
filterRow: {
|
|
115
|
+
readonly type: BooleanConstructor;
|
|
116
|
+
readonly default: undefined;
|
|
117
|
+
};
|
|
118
|
+
headerFilter: {
|
|
119
|
+
readonly type: BooleanConstructor;
|
|
120
|
+
readonly default: undefined;
|
|
121
|
+
};
|
|
122
|
+
columnChooser: {
|
|
123
|
+
readonly type: BooleanConstructor;
|
|
124
|
+
readonly default: undefined;
|
|
125
|
+
};
|
|
126
|
+
pager: {
|
|
127
|
+
type: PropType<false | {
|
|
128
|
+
readonly pageSizes?: readonly number[];
|
|
129
|
+
}>;
|
|
130
|
+
default: undefined;
|
|
131
|
+
};
|
|
132
|
+
toolbar: {
|
|
133
|
+
readonly type: BooleanConstructor;
|
|
134
|
+
readonly default: undefined;
|
|
135
|
+
};
|
|
136
|
+
rowClass: PropType<(row: AnyRow) => string | undefined>;
|
|
137
|
+
height: StringConstructor;
|
|
138
|
+
locale: StringConstructor;
|
|
139
|
+
messages: PropType<Partial<Messages>>;
|
|
140
|
+
theme: PropType<"light" | "dark">;
|
|
141
|
+
density: PropType<"compact" | "normal" | "comfortable">;
|
|
142
|
+
/** Editing; only the mode is structural, callbacks are read when called (inline objects are fine). */
|
|
143
|
+
editing: PropType<GridEditingOptions<AnyRow>>;
|
|
144
|
+
/** Drag handle column; onReorder, canDrag and sortField are read from the latest props on every move. */
|
|
145
|
+
rowReorder: PropType<GridRowReorderOptions<AnyRow>>;
|
|
146
|
+
/** Caption rows above the column headers (bands follow their columns when they move). */
|
|
147
|
+
headerBands: PropType<readonly HeaderBand[]>;
|
|
148
|
+
/** Renders only the body cells in view; 'auto' (default) from 50 data columns. */
|
|
149
|
+
columnVirtualization: {
|
|
150
|
+
type: PropType<boolean | "auto">;
|
|
151
|
+
default: undefined;
|
|
152
|
+
};
|
|
153
|
+
/** Rows that get a detail toggle (with the #detail slot); defaults to all rows. Read on every render of a row. */
|
|
154
|
+
detailCanExpand: PropType<(row: AnyRow) => boolean>;
|
|
155
|
+
/** Storage of the user's saved views; shows the view picker in the toolbar (unless #toolbar-start is used). */
|
|
156
|
+
savedViews: PropType<SavedViewsAdapter>;
|
|
157
|
+
/** { fileName, sheetName, title, maxRows, formats: { xlsx: () => import('@rastr/export-xlsx'), … } } */
|
|
158
|
+
export: PropType<GridExportOptions>;
|
|
159
|
+
}>, () => VNode<vue.RendererNode, vue.RendererElement, {
|
|
160
|
+
[key: string]: any;
|
|
161
|
+
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
|
162
|
+
rowClick: (payload: GridEvents<AnyRow>["rowClick"]) => boolean;
|
|
163
|
+
rowDblClick: (payload: GridEvents<AnyRow>["rowDblClick"]) => boolean;
|
|
164
|
+
rowActivate: (payload: GridEvents<AnyRow>["rowActivate"]) => boolean;
|
|
165
|
+
focusedRowChange: (payload: GridEvents<AnyRow>["focusedRowChange"]) => boolean;
|
|
166
|
+
selectionChange: (keys: readonly Key[], selection: SelectionState) => boolean;
|
|
167
|
+
stateChange: (state: GridState) => boolean;
|
|
168
|
+
loadError: (error: unknown) => error is {} | null | undefined;
|
|
169
|
+
'update:state': (state: GridState) => boolean;
|
|
170
|
+
copy: (result: CopyResult) => boolean;
|
|
171
|
+
saveError: (payload: GridEvents<AnyRow>["saveError"]) => boolean;
|
|
172
|
+
exportError: (error: unknown) => error is {} | null | undefined;
|
|
173
|
+
reorderError: (payload: GridEvents<AnyRow>["reorderError"]) => boolean;
|
|
174
|
+
detailToggle: (payload: GridEvents<AnyRow>["detailToggle"]) => boolean;
|
|
175
|
+
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
176
|
+
dataSource: PropType<DataSource<AnyRow>>;
|
|
177
|
+
keyField: StringConstructor;
|
|
178
|
+
store: PropType<GridStore<AnyRow>>;
|
|
179
|
+
columns: PropType<GridColumn<AnyRow>[]>;
|
|
180
|
+
selectionMode: PropType<"none" | "single" | "multiple">;
|
|
181
|
+
pageSize: NumberConstructor;
|
|
182
|
+
paging: {
|
|
183
|
+
readonly type: BooleanConstructor;
|
|
184
|
+
readonly default: undefined;
|
|
185
|
+
};
|
|
186
|
+
scrolling: PropType<"paged" | "virtual">;
|
|
187
|
+
blockSize: NumberConstructor;
|
|
188
|
+
stateStorage: PropType<StateStorageProp>;
|
|
189
|
+
initialState: PropType<Partial<GridState>>;
|
|
190
|
+
/** v-model:state */
|
|
191
|
+
state: PropType<GridState>;
|
|
192
|
+
showCheckboxes: {
|
|
193
|
+
readonly type: BooleanConstructor;
|
|
194
|
+
readonly default: undefined;
|
|
195
|
+
};
|
|
196
|
+
filterRow: {
|
|
197
|
+
readonly type: BooleanConstructor;
|
|
198
|
+
readonly default: undefined;
|
|
199
|
+
};
|
|
200
|
+
headerFilter: {
|
|
201
|
+
readonly type: BooleanConstructor;
|
|
202
|
+
readonly default: undefined;
|
|
203
|
+
};
|
|
204
|
+
columnChooser: {
|
|
205
|
+
readonly type: BooleanConstructor;
|
|
206
|
+
readonly default: undefined;
|
|
207
|
+
};
|
|
208
|
+
pager: {
|
|
209
|
+
type: PropType<false | {
|
|
210
|
+
readonly pageSizes?: readonly number[];
|
|
211
|
+
}>;
|
|
212
|
+
default: undefined;
|
|
213
|
+
};
|
|
214
|
+
toolbar: {
|
|
215
|
+
readonly type: BooleanConstructor;
|
|
216
|
+
readonly default: undefined;
|
|
217
|
+
};
|
|
218
|
+
rowClass: PropType<(row: AnyRow) => string | undefined>;
|
|
219
|
+
height: StringConstructor;
|
|
220
|
+
locale: StringConstructor;
|
|
221
|
+
messages: PropType<Partial<Messages>>;
|
|
222
|
+
theme: PropType<"light" | "dark">;
|
|
223
|
+
density: PropType<"compact" | "normal" | "comfortable">;
|
|
224
|
+
/** Editing; only the mode is structural, callbacks are read when called (inline objects are fine). */
|
|
225
|
+
editing: PropType<GridEditingOptions<AnyRow>>;
|
|
226
|
+
/** Drag handle column; onReorder, canDrag and sortField are read from the latest props on every move. */
|
|
227
|
+
rowReorder: PropType<GridRowReorderOptions<AnyRow>>;
|
|
228
|
+
/** Caption rows above the column headers (bands follow their columns when they move). */
|
|
229
|
+
headerBands: PropType<readonly HeaderBand[]>;
|
|
230
|
+
/** Renders only the body cells in view; 'auto' (default) from 50 data columns. */
|
|
231
|
+
columnVirtualization: {
|
|
232
|
+
type: PropType<boolean | "auto">;
|
|
233
|
+
default: undefined;
|
|
234
|
+
};
|
|
235
|
+
/** Rows that get a detail toggle (with the #detail slot); defaults to all rows. Read on every render of a row. */
|
|
236
|
+
detailCanExpand: PropType<(row: AnyRow) => boolean>;
|
|
237
|
+
/** Storage of the user's saved views; shows the view picker in the toolbar (unless #toolbar-start is used). */
|
|
238
|
+
savedViews: PropType<SavedViewsAdapter>;
|
|
239
|
+
/** { fileName, sheetName, title, maxRows, formats: { xlsx: () => import('@rastr/export-xlsx'), … } } */
|
|
240
|
+
export: PropType<GridExportOptions>;
|
|
241
|
+
}>> & Readonly<{
|
|
242
|
+
onCopy?: (result: CopyResult) => any;
|
|
243
|
+
onLoadError?: (error: unknown) => any;
|
|
244
|
+
onRowClick?: (payload: {
|
|
245
|
+
readonly row: any;
|
|
246
|
+
readonly key: Key;
|
|
247
|
+
readonly event: MouseEvent;
|
|
248
|
+
}) => any;
|
|
249
|
+
onRowDblClick?: (payload: {
|
|
250
|
+
readonly row: any;
|
|
251
|
+
readonly key: Key;
|
|
252
|
+
readonly event: MouseEvent;
|
|
253
|
+
}) => any;
|
|
254
|
+
onRowActivate?: (payload: {
|
|
255
|
+
readonly row: any;
|
|
256
|
+
readonly key: Key;
|
|
257
|
+
}) => any;
|
|
258
|
+
onFocusedRowChange?: (payload: {
|
|
259
|
+
readonly row: any;
|
|
260
|
+
readonly key: Key | null;
|
|
261
|
+
}) => any;
|
|
262
|
+
onSaveError?: (payload: {
|
|
263
|
+
readonly message: string;
|
|
264
|
+
readonly errors: _rastr_grid.SaveErrors;
|
|
265
|
+
}) => any;
|
|
266
|
+
onReorderError?: (payload: {
|
|
267
|
+
readonly error: unknown;
|
|
268
|
+
}) => any;
|
|
269
|
+
onDetailToggle?: (payload: {
|
|
270
|
+
readonly key: Key;
|
|
271
|
+
readonly row: any;
|
|
272
|
+
readonly expanded: boolean;
|
|
273
|
+
}) => any;
|
|
274
|
+
onSelectionChange?: (keys: readonly Key[], selection: SelectionState) => any;
|
|
275
|
+
onStateChange?: (state: GridState) => any;
|
|
276
|
+
"onUpdate:state"?: (state: GridState) => any;
|
|
277
|
+
onExportError?: (error: unknown) => any;
|
|
278
|
+
}>, {
|
|
279
|
+
paging: boolean;
|
|
280
|
+
toolbar: boolean;
|
|
281
|
+
headerFilter: boolean;
|
|
282
|
+
showCheckboxes: boolean;
|
|
283
|
+
filterRow: boolean;
|
|
284
|
+
columnChooser: boolean;
|
|
285
|
+
pager: false | {
|
|
286
|
+
readonly pageSizes?: readonly number[];
|
|
287
|
+
};
|
|
288
|
+
columnVirtualization: boolean | "auto";
|
|
289
|
+
}, SlotsType<{
|
|
290
|
+
[name: `cell-${string}`]: CellSlotProps<any>;
|
|
291
|
+
[name: `edit-${string}`]: EditSlotProps<any>;
|
|
292
|
+
'toolbar-start': Record<string, never>;
|
|
293
|
+
'toolbar-end': Record<string, never>;
|
|
294
|
+
detail: DetailSlotProps<AnyRow>;
|
|
295
|
+
default: Record<string, never>;
|
|
296
|
+
}>, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
297
|
+
|
|
298
|
+
export { type CellSlotProps as C, type DetailSlotProps as D, type EditSlotProps as E, type HeaderSlotProps as H, RsGrid as R, type StateStorageProp as S, type RsGridExpose as a, type RsGridStoreProps as b, createVueCellRenderer as c, createVueHeaderRenderer as d };
|