@svgrid/grid-wc 2.6.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GridMenus-DpmS1pzo.js +1121 -0
- package/dist/SvDateRangeInput-u4ibte8S.js +196 -0
- package/dist/SvDateTimePicker-DVFiDxUq.js +765 -0
- package/dist/{dismissable-xj_k_fnZ.js → SvField-ChCI-O2O.js} +44 -84
- package/dist/{SvGrid.helpers-CgUd39VT.js → SvGrid.helpers-BdVDtjUm.js} +37 -11
- package/dist/SvGridCellEditor-DvsQyE9a.js +550 -0
- package/dist/{SvGridChart-BztTavvw.js → SvGridChart-yK5Zv85y.js} +158 -158
- package/dist/{SvGridChartPanel-Ca5HWIZ3.js → SvGridChartPanel-B38_VjXM.js} +52 -52
- package/dist/{SvGridChartView-AcWj_tcs.js → SvGridChartView-ScXTF6t-.js} +4 -4
- package/dist/{SvGridDropdown-BXqvR1cs.js → SvGridDropdown-DnAESFDu.js} +29 -29
- package/dist/angular/fesm2022/svgrid-grid-wc-angular.mjs +358 -0
- package/dist/angular/fesm2022/svgrid-grid-wc-angular.mjs.map +1 -0
- package/dist/angular/package.json +25 -0
- package/dist/angular/types/svgrid-grid-wc-angular.d.ts +161 -0
- package/dist/{client-DoXxrq8q.js → client-DjwUji8D.js} +1 -1
- package/dist/column-resize-DvCRUrN3.js +101 -0
- package/dist/date-format-CPHqTHN6.js +1127 -0
- package/dist/dismissable-DvhBKm3q.js +41 -0
- package/dist/react/index.d.ts +313 -0
- package/dist/react/index.js +72 -0
- package/dist/{row-drag-touch-Ddaa-QeB.js → row-drag-touch-CycRR65n.js} +12 -10
- package/dist/row-resize-D-8s3cqT.js +94 -0
- package/dist/shadow/GridMenus-DpmS1pzo.js +1121 -0
- package/dist/shadow/SvDateRangeInput-u4ibte8S.js +196 -0
- package/dist/shadow/SvDateTimePicker-DVFiDxUq.js +765 -0
- package/dist/shadow/SvField-ChCI-O2O.js +146 -0
- package/dist/shadow/SvGrid.helpers-BdVDtjUm.js +135 -0
- package/dist/shadow/SvGridCellEditor-DvsQyE9a.js +550 -0
- package/dist/shadow/SvGridChart-yK5Zv85y.js +1199 -0
- package/dist/shadow/SvGridChartPanel-B38_VjXM.js +584 -0
- package/dist/shadow/SvGridChartView-ScXTF6t-.js +50 -0
- package/dist/shadow/SvGridDropdown-DnAESFDu.js +256 -0
- package/dist/shadow/cell-formatting-C0OsDmi_.js +86 -0
- package/dist/shadow/chart-uvs3sFJA.js +1220 -0
- package/dist/shadow/client-DjwUji8D.js +2960 -0
- package/dist/shadow/column-resize-DvCRUrN3.js +101 -0
- package/dist/shadow/date-format-CPHqTHN6.js +1127 -0
- package/dist/shadow/dismissable-DvhBKm3q.js +41 -0
- package/dist/shadow/editor-contract-peBDxir_.js +22 -0
- package/dist/shadow/editor-registry-DxGKqcvx.js +24 -0
- package/dist/shadow/export-format-C8kZGZfz.js +161 -0
- package/dist/shadow/popover-WsGlvtQv.js +69 -0
- package/dist/shadow/row-drag-touch-CycRR65n.js +93 -0
- package/dist/shadow/row-resize-D-8s3cqT.js +94 -0
- package/dist/shadow/sv-grid-shadow-element.d.ts +246 -0
- package/dist/shadow/sv-grid-shadow-element.js +10175 -0
- package/dist/{svelte-virtualizer.svelte-CFoYP2Ls.js → shadow/svelte-virtualizer.svelte-DZ9UcyfT.js} +35 -30
- package/dist/shadow/validate-CgmAtX1A.js +75 -0
- package/dist/sv-grid-element.d.ts +246 -0
- package/dist/sv-grid-element.js +3655 -2620
- package/dist/svelte-virtualizer.svelte-DZ9UcyfT.js +527 -0
- package/dist/validate-CgmAtX1A.js +75 -0
- package/dist/vue/index.d.ts +147 -0
- package/dist/vue/index.js +72 -0
- package/package.json +71 -6
- package/dist/GridMenus-CU_-Ks4f.js +0 -1001
- package/dist/SvDateTimePicker-Ch1Vug8H.js +0 -1885
- package/dist/SvGridCellEditor-CBJUbAsR.js +0 -523
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
//#region ../grid/dist/a11y/dismissable.js
|
|
2
|
+
function e(e, t) {
|
|
3
|
+
return t ? (Array.isArray(e) ? e : [e]).some((e) => e != null && e.contains(t)) : !1;
|
|
4
|
+
}
|
|
5
|
+
var t = [], n = !1;
|
|
6
|
+
function r() {
|
|
7
|
+
n || typeof document > "u" || (n = !0, document.addEventListener("keydown", (e) => {
|
|
8
|
+
if (e.key !== "Escape") return;
|
|
9
|
+
let n = t[t.length - 1];
|
|
10
|
+
n?.closeOnEscape && (e.stopPropagation(), n.onDismiss("escape"));
|
|
11
|
+
}, !0), document.addEventListener("pointerdown", (n) => {
|
|
12
|
+
let r = t[t.length - 1];
|
|
13
|
+
r?.closeOnOutside && (e(r.element(), n.target) || r.onDismiss("outside"));
|
|
14
|
+
}, !0));
|
|
15
|
+
}
|
|
16
|
+
function i(e) {
|
|
17
|
+
let n = {
|
|
18
|
+
element: e.element,
|
|
19
|
+
onDismiss: e.onDismiss,
|
|
20
|
+
closeOnEscape: e.closeOnEscape ?? !0,
|
|
21
|
+
closeOnOutside: e.closeOnOutside ?? !0
|
|
22
|
+
};
|
|
23
|
+
return {
|
|
24
|
+
activate() {
|
|
25
|
+
r(), t.includes(n) || t.push(n);
|
|
26
|
+
},
|
|
27
|
+
release() {
|
|
28
|
+
let e = t.indexOf(n);
|
|
29
|
+
e >= 0 && t.splice(e, 1);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function a(t, n) {
|
|
34
|
+
if (typeof window > "u") return () => {};
|
|
35
|
+
let r = (r) => {
|
|
36
|
+
e(t(), r.target) || n();
|
|
37
|
+
};
|
|
38
|
+
return window.addEventListener("scroll", r, !0), () => window.removeEventListener("scroll", r, !0);
|
|
39
|
+
}
|
|
40
|
+
//#endregion
|
|
41
|
+
export { a as n, i as t };
|
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
import '@svgrid/grid-wc';
|
|
2
|
+
export interface SvGridProps {
|
|
3
|
+
/** `property only` - ReadonlyArray<TData> */
|
|
4
|
+
data?: readonly unknown[];
|
|
5
|
+
/** `property only` - Array<ColumnDef<TFeatures, TData>> */
|
|
6
|
+
columns?: readonly unknown[];
|
|
7
|
+
/** `property only` - BoardConfig<TFeatures, TData> */
|
|
8
|
+
board?: unknown;
|
|
9
|
+
/** `property only` - SchedulerConfig<TFeatures, TData> */
|
|
10
|
+
scheduler?: unknown;
|
|
11
|
+
/** `property only` - ChartViewConfig<TFeatures, TData> */
|
|
12
|
+
chart?: unknown;
|
|
13
|
+
/** `property only` - GridPivotConfig<TData> */
|
|
14
|
+
pivot?: unknown;
|
|
15
|
+
/** `pivot-mode` - boolean */
|
|
16
|
+
pivotMode?: boolean;
|
|
17
|
+
/** `context-menu` - boolean | ReadonlyArray<ContextMenuItem<TData>> */
|
|
18
|
+
contextMenu?: boolean;
|
|
19
|
+
/** `selection-bar` - | boolean | ReadonlyArray<SelectionBarAction<TData> | SelectionBarBuiltin> | SelectionBarC */
|
|
20
|
+
selectionBar?: boolean;
|
|
21
|
+
/** `property only` - TFeatures */
|
|
22
|
+
features?: unknown;
|
|
23
|
+
/** `sortable` - boolean */
|
|
24
|
+
sortable?: boolean;
|
|
25
|
+
/** `filterable` - boolean */
|
|
26
|
+
filterable?: boolean;
|
|
27
|
+
/** `editable` - boolean */
|
|
28
|
+
editable?: boolean;
|
|
29
|
+
/** `property only` - { parentField: string; idField?: string; column?: string; indentPx?: number; } */
|
|
30
|
+
treeData?: unknown;
|
|
31
|
+
/** `groupable` - boolean */
|
|
32
|
+
groupable?: boolean;
|
|
33
|
+
/** `property only` - ReadonlyArray<string> */
|
|
34
|
+
groupBy?: readonly unknown[];
|
|
35
|
+
/** `property only` - Record<string, boolean> */
|
|
36
|
+
expanded?: unknown;
|
|
37
|
+
/** `group-footers` - boolean */
|
|
38
|
+
groupFooters?: boolean;
|
|
39
|
+
/** `grand-total-row` - boolean */
|
|
40
|
+
grandTotalRow?: boolean;
|
|
41
|
+
/** `group-display-mode` - GroupDisplayType */
|
|
42
|
+
groupDisplayMode?: string;
|
|
43
|
+
/** `auto-group-column-header` - string */
|
|
44
|
+
autoGroupColumnHeader?: string;
|
|
45
|
+
/** `auto-group-column-width` - number */
|
|
46
|
+
autoGroupColumnWidth?: number;
|
|
47
|
+
/** `pageable` - boolean */
|
|
48
|
+
pageable?: boolean;
|
|
49
|
+
/** `loading` - boolean */
|
|
50
|
+
loading?: boolean;
|
|
51
|
+
/** `loading-overlay` - boolean */
|
|
52
|
+
loadingOverlay?: boolean;
|
|
53
|
+
/** `loading-skeleton-rows` - number */
|
|
54
|
+
loadingSkeletonRows?: number;
|
|
55
|
+
/** `error` - string | null */
|
|
56
|
+
error?: string | null;
|
|
57
|
+
/** `empty-message` - string */
|
|
58
|
+
emptyMessage?: string;
|
|
59
|
+
/** `property only` - GridLocalization */
|
|
60
|
+
localization?: unknown;
|
|
61
|
+
/** `show-global-filter` - boolean */
|
|
62
|
+
showGlobalFilter?: boolean;
|
|
63
|
+
/** `show-column-filters` - boolean */
|
|
64
|
+
showColumnFilters?: boolean;
|
|
65
|
+
/** `filter-mode` - "row" | "menu" | "global" | "none" */
|
|
66
|
+
filterMode?: "row" | "menu" | "global" | "none";
|
|
67
|
+
/** `show-grouping-controls` - boolean */
|
|
68
|
+
showGroupingControls?: boolean;
|
|
69
|
+
/** `show-row-selection` - boolean */
|
|
70
|
+
showRowSelection?: boolean;
|
|
71
|
+
/** `show-pagination` - boolean */
|
|
72
|
+
showPagination?: boolean;
|
|
73
|
+
/** `page-size` - number */
|
|
74
|
+
pageSize?: number;
|
|
75
|
+
/** `property only` - number[] */
|
|
76
|
+
pageSizeOptions?: readonly unknown[];
|
|
77
|
+
/** `pagination-position` - 'top' | 'bottom' | 'both' */
|
|
78
|
+
paginationPosition?: "top" | "bottom" | "both";
|
|
79
|
+
/** `external-pagination` - boolean */
|
|
80
|
+
externalPagination?: boolean;
|
|
81
|
+
/** `row-count` - number */
|
|
82
|
+
rowCount?: number;
|
|
83
|
+
/** `page-index` - number */
|
|
84
|
+
pageIndex?: number;
|
|
85
|
+
/** `virtualization` - boolean */
|
|
86
|
+
virtualization?: boolean;
|
|
87
|
+
/** `row-height` - number | ((rowIndex: number) => number) */
|
|
88
|
+
rowHeight?: number;
|
|
89
|
+
/** `auto-row-height` - boolean */
|
|
90
|
+
autoRowHeight?: boolean;
|
|
91
|
+
/** `row-resize` - boolean */
|
|
92
|
+
rowResize?: boolean;
|
|
93
|
+
/** `header-height` - number */
|
|
94
|
+
headerHeight?: number;
|
|
95
|
+
/** `overscan` - number */
|
|
96
|
+
overscan?: number;
|
|
97
|
+
/** `container-height` - number | string */
|
|
98
|
+
containerHeight?: string;
|
|
99
|
+
/** `column-virtualization` - boolean */
|
|
100
|
+
columnVirtualization?: boolean;
|
|
101
|
+
/** `column-overscan` - number */
|
|
102
|
+
columnOverscan?: number;
|
|
103
|
+
/** `column-width` - number */
|
|
104
|
+
columnWidth?: number;
|
|
105
|
+
/** `property only` - { left?: ReadonlyArray<string>; right?: ReadonlyArray<string>; } */
|
|
106
|
+
initialColumnPinning?: unknown;
|
|
107
|
+
/** `fit-columns` - boolean */
|
|
108
|
+
fitColumns?: boolean;
|
|
109
|
+
/** `column-resize` - boolean */
|
|
110
|
+
columnResize?: boolean;
|
|
111
|
+
/** `responsive` - boolean | { breakpoint?: number } */
|
|
112
|
+
responsive?: boolean;
|
|
113
|
+
/** `show-filter-menu` - boolean */
|
|
114
|
+
showFilterMenu?: boolean;
|
|
115
|
+
/** `show-filter-row` - boolean */
|
|
116
|
+
showFilterRow?: boolean;
|
|
117
|
+
/** `enable-cell-selection` - boolean */
|
|
118
|
+
enableCellSelection?: boolean;
|
|
119
|
+
/** `move-cells` - boolean */
|
|
120
|
+
moveCells?: boolean;
|
|
121
|
+
/** `enable-row-hover` - boolean */
|
|
122
|
+
enableRowHover?: boolean;
|
|
123
|
+
/** `copy-headers-to-clipboard` - boolean */
|
|
124
|
+
copyHeadersToClipboard?: boolean;
|
|
125
|
+
/** `property only` - (params: { value: unknown; column: unknown; row: TData; rowIndex: number; columnId: string */
|
|
126
|
+
processCellForClipboard?: unknown;
|
|
127
|
+
/** `enable-inline-editing` - boolean */
|
|
128
|
+
enableInlineEditing?: boolean;
|
|
129
|
+
/** `full-row-editing` - boolean */
|
|
130
|
+
fullRowEditing?: boolean;
|
|
131
|
+
/** `enable-row-summaries` - boolean */
|
|
132
|
+
enableRowSummaries?: boolean;
|
|
133
|
+
/** `summary` - boolean */
|
|
134
|
+
summary?: boolean;
|
|
135
|
+
/** `status-bar` - | boolean | { aggregates?: ReadonlyArray< "count" | "numericCount" | "sum" | "avg" | "min" */
|
|
136
|
+
statusBar?: boolean;
|
|
137
|
+
/** `tool-panel` - boolean */
|
|
138
|
+
toolPanel?: boolean;
|
|
139
|
+
/** `charting` - boolean | ChartingConfig<TData> */
|
|
140
|
+
charting?: boolean;
|
|
141
|
+
/** `column-menu-tabs` - boolean */
|
|
142
|
+
columnMenuTabs?: boolean;
|
|
143
|
+
/** `tool-panel-default-open` - boolean */
|
|
144
|
+
toolPanelDefaultOpen?: boolean;
|
|
145
|
+
/** `tool-panel-default-tab` - "columns" | "filters" */
|
|
146
|
+
toolPanelDefaultTab?: "columns" | "filters";
|
|
147
|
+
/** `selection-mode` - "row" | "cell" | "both" | "none" */
|
|
148
|
+
selectionMode?: "row" | "cell" | "both" | "none";
|
|
149
|
+
/** `show-row-numbers` - boolean */
|
|
150
|
+
showRowNumbers?: boolean;
|
|
151
|
+
/** `zebra-rows` - boolean */
|
|
152
|
+
zebraRows?: boolean;
|
|
153
|
+
/** `row-number-width` - number */
|
|
154
|
+
rowNumberWidth?: number;
|
|
155
|
+
/** `external-sort` - boolean */
|
|
156
|
+
externalSort?: boolean;
|
|
157
|
+
/** `property only` - Array<{ id: string; desc: boolean }> */
|
|
158
|
+
initialSorting?: readonly unknown[];
|
|
159
|
+
/** `property only` - GridPredicateExpr | null */
|
|
160
|
+
initialAdvancedFilter?: unknown;
|
|
161
|
+
/** `external-filter` - boolean */
|
|
162
|
+
externalFilter?: boolean;
|
|
163
|
+
/** `property only` - (row: TData, index: number) => string */
|
|
164
|
+
getRowId?: unknown;
|
|
165
|
+
/** `property only` - (ctx: { row: TData; rowIndex: number; }) => string | ReadonlyArray<string> | Record<string */
|
|
166
|
+
rowClass?: unknown;
|
|
167
|
+
/** `property only` - Record<string, Record<string, string>> */
|
|
168
|
+
notes?: unknown;
|
|
169
|
+
/** `editable-comments` - boolean */
|
|
170
|
+
editableComments?: boolean;
|
|
171
|
+
/** `property only` - ReadonlyArray<ConditionalFormat<TData>> */
|
|
172
|
+
conditionalFormats?: readonly unknown[];
|
|
173
|
+
/** `conditional-stat-scope` - "filtered" | "visible" | "all" */
|
|
174
|
+
conditionalStatScope?: "filtered" | "visible" | "all";
|
|
175
|
+
/** `property only` - (row: TData, rowIndex: number) => boolean */
|
|
176
|
+
isDetailRow?: unknown;
|
|
177
|
+
/** `property only` - { isGroup: (row: TData) => boolean; level: (row: TData) => number; expanded?: (row: TData) */
|
|
178
|
+
serverGroup?: unknown;
|
|
179
|
+
/** `property only` - (columnId: string) => Promise<string[]> */
|
|
180
|
+
serverFilterValues?: unknown;
|
|
181
|
+
/** `property only` - ReadonlyArray<TData> */
|
|
182
|
+
pinnedTopRows?: readonly unknown[];
|
|
183
|
+
/** `property only` - ReadonlyArray<TData> */
|
|
184
|
+
pinnedBottomRows?: readonly unknown[];
|
|
185
|
+
/** `enable-column-reorder` - boolean */
|
|
186
|
+
enableColumnReorder?: boolean;
|
|
187
|
+
/** `property only` - ReadonlyArray<string> */
|
|
188
|
+
columnOrder?: readonly unknown[];
|
|
189
|
+
/** `infer-column-types` - boolean */
|
|
190
|
+
inferColumnTypes?: boolean;
|
|
191
|
+
/** `row-drag-managed` - boolean */
|
|
192
|
+
rowDragManaged?: boolean;
|
|
193
|
+
/** `row-drag-group` - string */
|
|
194
|
+
rowDragGroup?: string;
|
|
195
|
+
/** `aligned-grid-group` - string */
|
|
196
|
+
alignedGridGroup?: string;
|
|
197
|
+
/** `filter-locale` - string | ReadonlyArray<string> */
|
|
198
|
+
filterLocale?: string;
|
|
199
|
+
/** `pivotmodechange` */
|
|
200
|
+
onPivotModeChange?: (detail: boolean) => void;
|
|
201
|
+
/** `expandedchange` */
|
|
202
|
+
onExpandedChange?: (detail: Record<string, boolean>) => void;
|
|
203
|
+
/** `paginationchange` */
|
|
204
|
+
onPaginationChange?: (detail: {
|
|
205
|
+
pageIndex: number;
|
|
206
|
+
pageSize: number;
|
|
207
|
+
}) => void;
|
|
208
|
+
/** `apiready` */
|
|
209
|
+
onApiReady?: (detail: unknown) => void;
|
|
210
|
+
/** `rowselectionchange` */
|
|
211
|
+
onRowSelectionChange?: (detail: {
|
|
212
|
+
selection: Record<string, boolean>;
|
|
213
|
+
rows: Record<string, unknown>[];
|
|
214
|
+
}) => void;
|
|
215
|
+
/** `cellselectionchange` */
|
|
216
|
+
onCellSelectionChange?: (detail: Array<[number, number, number, number]>) => void;
|
|
217
|
+
/** `sortingchange` */
|
|
218
|
+
onSortingChange?: (detail: Array<{
|
|
219
|
+
id: string;
|
|
220
|
+
desc: boolean;
|
|
221
|
+
}>) => void;
|
|
222
|
+
/** `advancedfilterchange` */
|
|
223
|
+
onAdvancedFilterChange?: (detail: unknown) => void;
|
|
224
|
+
/** `filterschange` */
|
|
225
|
+
onFiltersChange?: (detail: unknown) => void;
|
|
226
|
+
/** `notechange` */
|
|
227
|
+
onNoteChange?: (detail: {
|
|
228
|
+
rowId: string;
|
|
229
|
+
columnId: string;
|
|
230
|
+
note: string;
|
|
231
|
+
}) => void;
|
|
232
|
+
/** `cellvaluechange` */
|
|
233
|
+
onCellValueChange?: (detail: {
|
|
234
|
+
rowIndex: number;
|
|
235
|
+
columnId: string;
|
|
236
|
+
oldValue: unknown;
|
|
237
|
+
newValue: unknown;
|
|
238
|
+
row: Record<string, unknown>;
|
|
239
|
+
}) => void;
|
|
240
|
+
/** `activecellchange` */
|
|
241
|
+
onActiveCellChange?: (detail: {
|
|
242
|
+
rowIndex: number;
|
|
243
|
+
colIndex: number;
|
|
244
|
+
columnId: string;
|
|
245
|
+
}) => void;
|
|
246
|
+
/** `cellclick` */
|
|
247
|
+
onCellClick?: (detail: {
|
|
248
|
+
rowIndex: number;
|
|
249
|
+
colIndex: number;
|
|
250
|
+
columnId: string;
|
|
251
|
+
value: unknown;
|
|
252
|
+
row: Record<string, unknown>;
|
|
253
|
+
}) => void;
|
|
254
|
+
/** `rowclick` */
|
|
255
|
+
onRowClick?: (detail: {
|
|
256
|
+
rowIndex: number;
|
|
257
|
+
columnId: string;
|
|
258
|
+
row: Record<string, unknown>;
|
|
259
|
+
}) => void;
|
|
260
|
+
/** `celldoubleclick` */
|
|
261
|
+
onCellDoubleClick?: (detail: {
|
|
262
|
+
rowIndex: number;
|
|
263
|
+
colIndex: number;
|
|
264
|
+
columnId: string;
|
|
265
|
+
value: unknown;
|
|
266
|
+
row: Record<string, unknown>;
|
|
267
|
+
}) => void;
|
|
268
|
+
/** `rowdoubleclick` */
|
|
269
|
+
onRowDoubleClick?: (detail: {
|
|
270
|
+
rowIndex: number;
|
|
271
|
+
columnId: string;
|
|
272
|
+
row: Record<string, unknown>;
|
|
273
|
+
}) => void;
|
|
274
|
+
/** `scrollbottomreached` */
|
|
275
|
+
onScrollBottomReached?: (detail: {
|
|
276
|
+
scrollTop: number;
|
|
277
|
+
scrollHeight: number;
|
|
278
|
+
clientHeight: number;
|
|
279
|
+
}) => void;
|
|
280
|
+
/** `columnorderchange` */
|
|
281
|
+
onColumnOrderChange?: (detail: ReadonlyArray<string>) => void;
|
|
282
|
+
/** `rowdragend` */
|
|
283
|
+
onRowDragEnd?: (detail: {
|
|
284
|
+
row: Record<string, unknown>;
|
|
285
|
+
toIndex: number;
|
|
286
|
+
sameGrid: boolean;
|
|
287
|
+
fromGridId: number;
|
|
288
|
+
toGridId: number;
|
|
289
|
+
}) => void;
|
|
290
|
+
/** `selectionchange` - published alias of rowselectionchange, detail is the selected rows */
|
|
291
|
+
onSelectionchange?: (detail: unknown) => void;
|
|
292
|
+
/** Render inside an open shadow root, so page CSS cannot reach the grid. */
|
|
293
|
+
shadow?: boolean;
|
|
294
|
+
/** Forwarded to the host element. */
|
|
295
|
+
className?: string;
|
|
296
|
+
style?: Record<string, string | number>;
|
|
297
|
+
}
|
|
298
|
+
/** The grid's imperative api, reachable through a ref. */
|
|
299
|
+
export interface SvGridHandle {
|
|
300
|
+
/** The host custom element. */
|
|
301
|
+
element: HTMLElement | null;
|
|
302
|
+
/** The grid api, once `apiready` has fired. */
|
|
303
|
+
api: unknown;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* SvGrid as a React component.
|
|
307
|
+
*
|
|
308
|
+
* Every non-primitive prop is assigned as a DOM property in an effect rather
|
|
309
|
+
* than passed through JSX, because React 18 and earlier stringify them onto
|
|
310
|
+
* attributes and an attribute cannot hold an array.
|
|
311
|
+
*/
|
|
312
|
+
export declare const SvGrid: import("react").ForwardRefExoticComponent<SvGridProps & import("react").RefAttributes<SvGridHandle>>;
|
|
313
|
+
export default SvGrid;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { createElement as e, forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i } from "react";
|
|
2
|
+
import "@svgrid/grid-wc";
|
|
3
|
+
//#region src/react/index.tsx
|
|
4
|
+
var a = /* @__PURE__ */ "data.columns.board.scheduler.chart.pivot.pivotMode.contextMenu.selectionBar.features.sortable.filterable.editable.treeData.groupable.groupBy.expanded.groupFooters.grandTotalRow.groupDisplayMode.autoGroupColumnHeader.autoGroupColumnWidth.pageable.loading.loadingOverlay.loadingSkeletonRows.error.emptyMessage.localization.showGlobalFilter.showColumnFilters.filterMode.showGroupingControls.showRowSelection.showPagination.pageSize.pageSizeOptions.paginationPosition.externalPagination.rowCount.pageIndex.virtualization.rowHeight.autoRowHeight.rowResize.headerHeight.overscan.containerHeight.columnVirtualization.columnOverscan.columnWidth.initialColumnPinning.fitColumns.columnResize.responsive.showFilterMenu.showFilterRow.enableCellSelection.moveCells.enableRowHover.copyHeadersToClipboard.processCellForClipboard.enableInlineEditing.fullRowEditing.enableRowSummaries.summary.statusBar.toolPanel.charting.columnMenuTabs.toolPanelDefaultOpen.toolPanelDefaultTab.selectionMode.showRowNumbers.zebraRows.rowNumberWidth.externalSort.initialSorting.initialAdvancedFilter.externalFilter.getRowId.rowClass.notes.editableComments.conditionalFormats.conditionalStatScope.isDetailRow.serverGroup.serverFilterValues.pinnedTopRows.pinnedBottomRows.enableColumnReorder.columnOrder.inferColumnTypes.rowDragManaged.rowDragGroup.alignedGridGroup.filterLocale".split("."), o = [
|
|
5
|
+
["onPivotModeChange", "pivotmodechange"],
|
|
6
|
+
["onExpandedChange", "expandedchange"],
|
|
7
|
+
["onPaginationChange", "paginationchange"],
|
|
8
|
+
["onApiReady", "apiready"],
|
|
9
|
+
["onRowSelectionChange", "rowselectionchange"],
|
|
10
|
+
["onCellSelectionChange", "cellselectionchange"],
|
|
11
|
+
["onSortingChange", "sortingchange"],
|
|
12
|
+
["onAdvancedFilterChange", "advancedfilterchange"],
|
|
13
|
+
["onFiltersChange", "filterschange"],
|
|
14
|
+
["onNoteChange", "notechange"],
|
|
15
|
+
["onCellValueChange", "cellvaluechange"],
|
|
16
|
+
["onActiveCellChange", "activecellchange"],
|
|
17
|
+
["onCellClick", "cellclick"],
|
|
18
|
+
["onRowClick", "rowclick"],
|
|
19
|
+
["onCellDoubleClick", "celldoubleclick"],
|
|
20
|
+
["onRowDoubleClick", "rowdoubleclick"],
|
|
21
|
+
["onScrollBottomReached", "scrollbottomreached"],
|
|
22
|
+
["onColumnOrderChange", "columnorderchange"],
|
|
23
|
+
["onRowDragEnd", "rowdragend"],
|
|
24
|
+
["onSelectionchange", "selectionchange"]
|
|
25
|
+
], s = t(function(t, s) {
|
|
26
|
+
let c = i(null), { shadow: l, className: u, style: d, ...f } = t;
|
|
27
|
+
n(() => {
|
|
28
|
+
l && import("@svgrid/grid-wc/shadow");
|
|
29
|
+
}, [l]);
|
|
30
|
+
let p = i({});
|
|
31
|
+
n(() => {
|
|
32
|
+
let e = c.current;
|
|
33
|
+
if (e) for (let t of a) {
|
|
34
|
+
let n = f[t];
|
|
35
|
+
n === void 0 || Object.is(p.current[t], n) || (p.current[t] = n, e[t] = n);
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
let m = i(f);
|
|
39
|
+
return m.current = f, n(() => {
|
|
40
|
+
let e = c.current;
|
|
41
|
+
if (!e) return;
|
|
42
|
+
let t = [];
|
|
43
|
+
for (let [n, r] of o) {
|
|
44
|
+
let i = (e) => {
|
|
45
|
+
let t = m.current[n];
|
|
46
|
+
t?.(e.detail);
|
|
47
|
+
};
|
|
48
|
+
e.addEventListener(r, i), t.push([r, i]);
|
|
49
|
+
}
|
|
50
|
+
let n = m.current.onApiReady, r = e.api;
|
|
51
|
+
return n && r != null && n(r), () => {
|
|
52
|
+
for (let [n, r] of t) e.removeEventListener(n, r);
|
|
53
|
+
};
|
|
54
|
+
}, []), r(s, () => ({
|
|
55
|
+
get element() {
|
|
56
|
+
return c.current;
|
|
57
|
+
},
|
|
58
|
+
get api() {
|
|
59
|
+
return c.current?.api ?? null;
|
|
60
|
+
}
|
|
61
|
+
}), []), e(l ? "sv-grid-shadow" : "sv-grid", {
|
|
62
|
+
ref: c,
|
|
63
|
+
class: u,
|
|
64
|
+
style: {
|
|
65
|
+
display: "block",
|
|
66
|
+
height: "100%",
|
|
67
|
+
...d
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
//#endregion
|
|
72
|
+
export { s as SvGrid, s as default };
|
|
@@ -57,11 +57,11 @@ function e(e) {
|
|
|
57
57
|
!n || e.pointerId !== n.pointerId || c(!1);
|
|
58
58
|
}
|
|
59
59
|
return {
|
|
60
|
-
start(r, i) {
|
|
60
|
+
start(r, i, a) {
|
|
61
61
|
if (!e.managed() || n) return;
|
|
62
|
-
let
|
|
63
|
-
if (
|
|
64
|
-
let
|
|
62
|
+
let s = e.originalAt(i);
|
|
63
|
+
if (s == null) return;
|
|
64
|
+
let c = r.currentTarget;
|
|
65
65
|
n = {
|
|
66
66
|
pointerId: r.pointerId,
|
|
67
67
|
rowIndex: i,
|
|
@@ -70,17 +70,19 @@ function e(e) {
|
|
|
70
70
|
started: !1,
|
|
71
71
|
timer: null,
|
|
72
72
|
scrollFrame: null,
|
|
73
|
-
scroller:
|
|
74
|
-
root:
|
|
75
|
-
}, window.addEventListener("pointermove", l, { passive: !1 }), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", d), window.addEventListener("touchmove", o, { passive: !1 })
|
|
73
|
+
scroller: c?.closest?.(".sv-grid-container") ?? null,
|
|
74
|
+
root: c?.closest?.(".sv-grid-root") ?? null
|
|
75
|
+
}, window.addEventListener("pointermove", l, { passive: !1 }), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", d), window.addEventListener("touchmove", o, { passive: !1 });
|
|
76
|
+
let f = a == null ? 0 : Math.max(0, performance.now() - a);
|
|
77
|
+
n.timer = setTimeout(() => {
|
|
76
78
|
if (n) {
|
|
77
79
|
n.started = !0, n.timer = null, n.root?.classList.add("sv-grid-row-drag-active");
|
|
78
80
|
try {
|
|
79
|
-
|
|
81
|
+
c?.setPointerCapture?.(r.pointerId);
|
|
80
82
|
} catch {}
|
|
81
|
-
e.openBus(
|
|
83
|
+
e.openBus(s), t.rowDragActive = !0, t.rowDropIndex = i, t.rowDropSide = "before";
|
|
82
84
|
}
|
|
83
|
-
}, 350);
|
|
85
|
+
}, Math.max(0, 350 - f));
|
|
84
86
|
},
|
|
85
87
|
destroy() {
|
|
86
88
|
c(!1);
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
//#region ../grid/dist/row-resize.js
|
|
2
|
+
var e = "sv-grid-row-resize-handle";
|
|
3
|
+
function t(t, n) {
|
|
4
|
+
let r = n, i = null;
|
|
5
|
+
function a(e) {
|
|
6
|
+
let t = e.querySelector("[data-svgrid-row]")?.dataset.svgridRow;
|
|
7
|
+
return t == null ? NaN : Number(t);
|
|
8
|
+
}
|
|
9
|
+
function o(e) {
|
|
10
|
+
if (!i) return;
|
|
11
|
+
let t = r.min ?? 20, n = r.max ?? 320, a = Math.max(t, Math.min(n, i.startHeight + (e.clientY - i.startY)));
|
|
12
|
+
i.trEl.style.height = `${Math.round(a)}px`, r.onResizeMove?.(i.rowIndex, Math.round(a));
|
|
13
|
+
}
|
|
14
|
+
function s(e) {
|
|
15
|
+
if (!i) return;
|
|
16
|
+
let t = r.min ?? 20, n = r.max ?? 320, a = Math.max(t, Math.min(n, i.startHeight + (e.clientY - i.startY)));
|
|
17
|
+
r.onResize(i.rowIndex, Math.round(a)), i.strip.classList.remove("is-resizing");
|
|
18
|
+
try {
|
|
19
|
+
i.trEl.releasePointerCapture(e.pointerId);
|
|
20
|
+
} catch {}
|
|
21
|
+
i = null, window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s), document.body.style.cursor = "";
|
|
22
|
+
}
|
|
23
|
+
function c(t) {
|
|
24
|
+
if (r.disabled) return;
|
|
25
|
+
let n = t.target;
|
|
26
|
+
if (!n?.classList.contains(e)) return;
|
|
27
|
+
let i = t.shiftKey ? 1 : 10, o = 0;
|
|
28
|
+
if (t.key === "ArrowUp") o = -i;
|
|
29
|
+
else if (t.key === "ArrowDown") o = i;
|
|
30
|
+
else return;
|
|
31
|
+
let s = n.closest("tr.sv-grid-row");
|
|
32
|
+
if (!s) return;
|
|
33
|
+
let c = a(s);
|
|
34
|
+
if (!Number.isFinite(c)) return;
|
|
35
|
+
t.preventDefault(), t.stopPropagation();
|
|
36
|
+
let l = r.min ?? 20, u = r.max ?? 320, d = Math.round(Math.max(l, Math.min(u, s.getBoundingClientRect().height + o)));
|
|
37
|
+
s.style.height = `${d}px`, r.onResizeMove?.(c, d), r.onResize(c, d);
|
|
38
|
+
}
|
|
39
|
+
function l(t) {
|
|
40
|
+
if (r.disabled) return;
|
|
41
|
+
let n = t.target;
|
|
42
|
+
if (!n?.classList.contains(e)) return;
|
|
43
|
+
let c = n.closest("tr.sv-grid-row");
|
|
44
|
+
if (!c) return;
|
|
45
|
+
let l = a(c);
|
|
46
|
+
if (Number.isFinite(l)) {
|
|
47
|
+
t.preventDefault(), t.stopPropagation(), n.classList.add("is-resizing"), i = {
|
|
48
|
+
rowIndex: l,
|
|
49
|
+
startY: t.clientY,
|
|
50
|
+
startHeight: c.getBoundingClientRect().height,
|
|
51
|
+
trEl: c,
|
|
52
|
+
strip: n
|
|
53
|
+
};
|
|
54
|
+
try {
|
|
55
|
+
c.setPointerCapture(t.pointerId);
|
|
56
|
+
} catch {}
|
|
57
|
+
document.body.style.cursor = "row-resize", window.addEventListener("pointermove", o), window.addEventListener("pointerup", s);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function u() {
|
|
61
|
+
if (r.disabled) {
|
|
62
|
+
d();
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
let n = t.querySelectorAll("tr.sv-grid-row");
|
|
66
|
+
for (let t of n) {
|
|
67
|
+
if (t.classList.contains("sv-grid-header-row") || t.classList.contains("sv-grid-row-spacer")) continue;
|
|
68
|
+
let n = t.querySelector(".sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell") ?? (r.anchor === "row" ? t.querySelector(".sv-grid-cell") : null);
|
|
69
|
+
if (!n || n.querySelector(`:scope > .${e}`)) continue;
|
|
70
|
+
getComputedStyle(n).position === "static" && (n.style.position = "relative"), n.style.overflow = "visible";
|
|
71
|
+
let i = document.createElement("div");
|
|
72
|
+
i.className = e, i.setAttribute("role", "separator"), i.setAttribute("aria-orientation", "horizontal"), i.setAttribute("aria-label", "Resize row"), i.tabIndex = 0, i.style.cssText = "position:absolute;left:0;right:0;bottom:0;height:5px;cursor:row-resize;user-select:none;z-index:60;pointer-events:auto;", n.appendChild(i);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
function d() {
|
|
76
|
+
t.querySelectorAll(`.${e}`).forEach((e) => e.remove());
|
|
77
|
+
}
|
|
78
|
+
t.addEventListener("pointerdown", l, { capture: !0 }), t.addEventListener("keydown", c, { capture: !0 });
|
|
79
|
+
let f = new MutationObserver(() => u());
|
|
80
|
+
return f.observe(t, {
|
|
81
|
+
childList: !0,
|
|
82
|
+
subtree: !0
|
|
83
|
+
}), u(), {
|
|
84
|
+
update(e) {
|
|
85
|
+
let t = r.disabled;
|
|
86
|
+
r = e, t !== r.disabled && u();
|
|
87
|
+
},
|
|
88
|
+
destroy() {
|
|
89
|
+
t.removeEventListener("pointerdown", l, { capture: !0 }), t.removeEventListener("keydown", c, { capture: !0 }), window.removeEventListener("pointermove", o), window.removeEventListener("pointerup", s), f.disconnect(), d();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
//#endregion
|
|
94
|
+
export { t as rowResize };
|