@stonecrop/atable 0.4.11 → 0.4.13
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/assets/index.css +1 -1
- package/dist/atable.d.ts +420 -110
- package/dist/atable.js +916 -886
- package/dist/atable.js.map +1 -1
- package/dist/atable.umd.cjs +2 -2
- package/dist/atable.umd.cjs.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/stores/table.d.ts +113 -83
- package/dist/src/stores/table.d.ts.map +1 -1
- package/dist/src/types/index.d.ts +305 -27
- package/dist/src/types/index.d.ts.map +1 -1
- package/dist/stores/table.js +24 -0
- package/package.json +3 -3
- package/src/components/AGanttCell.vue +27 -21
- package/src/components/ATable.vue +42 -17
- package/src/index.ts +2 -0
- package/src/stores/table.ts +33 -1
- package/src/types/index.ts +333 -23
package/dist/atable.d.ts
CHANGED
|
@@ -36,13 +36,22 @@ export { ATableModal }
|
|
|
36
36
|
* Table cell context definition.
|
|
37
37
|
* @public
|
|
38
38
|
*/
|
|
39
|
-
export declare
|
|
39
|
+
export declare interface CellContext {
|
|
40
|
+
/**
|
|
41
|
+
* The row object for the current cell.
|
|
42
|
+
*/
|
|
40
43
|
row: TableRow;
|
|
44
|
+
/**
|
|
45
|
+
* The column object for the current cell.
|
|
46
|
+
*/
|
|
41
47
|
column: TableColumn;
|
|
48
|
+
/**
|
|
49
|
+
* The table object for the current cell.
|
|
50
|
+
*/
|
|
42
51
|
table: {
|
|
43
52
|
[key: string]: any;
|
|
44
53
|
};
|
|
45
|
-
}
|
|
54
|
+
}
|
|
46
55
|
|
|
47
56
|
/**
|
|
48
57
|
* Create a table store
|
|
@@ -69,17 +78,16 @@ label?: string | undefined;
|
|
|
69
78
|
type?: string | undefined;
|
|
70
79
|
width?: string | undefined;
|
|
71
80
|
pinned?: boolean | undefined;
|
|
72
|
-
color?: string | undefined;
|
|
73
|
-
colspan?: number | undefined;
|
|
74
|
-
ganttComponent?: string | undefined;
|
|
75
|
-
isGantt?: boolean | undefined;
|
|
76
|
-
originalIndex?: number | undefined;
|
|
77
81
|
cellComponent?: string | undefined;
|
|
78
82
|
cellComponentProps?: Record<string, any> | undefined;
|
|
79
83
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
80
84
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
81
85
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
82
86
|
mask?: ((value: any) => any) | undefined;
|
|
87
|
+
isGantt?: boolean | undefined;
|
|
88
|
+
ganttComponent?: string | undefined;
|
|
89
|
+
colspan?: number | undefined;
|
|
90
|
+
originalIndex?: number | undefined;
|
|
83
91
|
}[], TableColumn[] | {
|
|
84
92
|
name: string;
|
|
85
93
|
align?: CanvasTextAlign | undefined;
|
|
@@ -88,17 +96,16 @@ label?: string | undefined;
|
|
|
88
96
|
type?: string | undefined;
|
|
89
97
|
width?: string | undefined;
|
|
90
98
|
pinned?: boolean | undefined;
|
|
91
|
-
color?: string | undefined;
|
|
92
|
-
colspan?: number | undefined;
|
|
93
|
-
ganttComponent?: string | undefined;
|
|
94
|
-
isGantt?: boolean | undefined;
|
|
95
|
-
originalIndex?: number | undefined;
|
|
96
99
|
cellComponent?: string | undefined;
|
|
97
100
|
cellComponentProps?: Record<string, any> | undefined;
|
|
98
101
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
99
102
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
100
103
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
101
104
|
mask?: ((value: any) => any) | undefined;
|
|
105
|
+
isGantt?: boolean | undefined;
|
|
106
|
+
ganttComponent?: string | undefined;
|
|
107
|
+
colspan?: number | undefined;
|
|
108
|
+
originalIndex?: number | undefined;
|
|
102
109
|
}[]>;
|
|
103
110
|
config: Ref< {
|
|
104
111
|
view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
@@ -108,59 +115,69 @@ view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
|
108
115
|
fullWidth?: boolean | undefined;
|
|
109
116
|
}>;
|
|
110
117
|
display: Ref< {
|
|
111
|
-
childrenOpen?: boolean | undefined;
|
|
112
118
|
expanded?: boolean | undefined;
|
|
113
|
-
|
|
119
|
+
childrenOpen?: boolean | undefined;
|
|
114
120
|
isParent?: boolean | undefined;
|
|
115
121
|
isRoot?: boolean | undefined;
|
|
116
122
|
open?: boolean | undefined;
|
|
123
|
+
indent?: number | undefined;
|
|
117
124
|
parent?: number | undefined;
|
|
118
125
|
rowModified?: boolean | undefined;
|
|
119
126
|
}[], TableDisplay[] | {
|
|
120
|
-
childrenOpen?: boolean | undefined;
|
|
121
127
|
expanded?: boolean | undefined;
|
|
122
|
-
|
|
128
|
+
childrenOpen?: boolean | undefined;
|
|
123
129
|
isParent?: boolean | undefined;
|
|
124
130
|
isRoot?: boolean | undefined;
|
|
125
131
|
open?: boolean | undefined;
|
|
132
|
+
indent?: number | undefined;
|
|
126
133
|
parent?: number | undefined;
|
|
127
134
|
rowModified?: boolean | undefined;
|
|
128
135
|
}[]>;
|
|
129
136
|
modal: Ref< {
|
|
130
|
-
|
|
137
|
+
visible?: boolean | undefined;
|
|
131
138
|
cell?: (HTMLTableCellElement | null) | undefined;
|
|
132
|
-
colIndex?: number | undefined;
|
|
133
|
-
event?: string | undefined;
|
|
134
|
-
height?: number | undefined;
|
|
135
|
-
left?: number | undefined;
|
|
136
139
|
parent?: HTMLElement | undefined;
|
|
140
|
+
colIndex?: number | undefined;
|
|
137
141
|
rowIndex?: number | undefined;
|
|
138
|
-
visible?: boolean | undefined;
|
|
139
|
-
width?: number | undefined;
|
|
140
142
|
component?: string | undefined;
|
|
141
143
|
componentProps?: Record<string, any> | undefined;
|
|
142
|
-
}, TableModal | {
|
|
143
144
|
bottom?: number | undefined;
|
|
144
|
-
cell?: (HTMLTableCellElement | null) | undefined;
|
|
145
|
-
colIndex?: number | undefined;
|
|
146
|
-
event?: string | undefined;
|
|
147
145
|
height?: number | undefined;
|
|
148
146
|
left?: number | undefined;
|
|
147
|
+
width?: number | undefined;
|
|
148
|
+
}, TableModal | {
|
|
149
|
+
visible?: boolean | undefined;
|
|
150
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
149
151
|
parent?: HTMLElement | undefined;
|
|
152
|
+
colIndex?: number | undefined;
|
|
150
153
|
rowIndex?: number | undefined;
|
|
151
|
-
visible?: boolean | undefined;
|
|
152
|
-
width?: number | undefined;
|
|
153
154
|
component?: string | undefined;
|
|
154
155
|
componentProps?: Record<string, any> | undefined;
|
|
156
|
+
bottom?: number | undefined;
|
|
157
|
+
height?: number | undefined;
|
|
158
|
+
left?: number | undefined;
|
|
159
|
+
width?: number | undefined;
|
|
155
160
|
}>;
|
|
156
161
|
rows: Ref< {
|
|
157
162
|
[x: string]: any;
|
|
158
163
|
indent?: number | undefined;
|
|
159
164
|
parent?: number | undefined;
|
|
165
|
+
gantt?: {
|
|
166
|
+
color?: string | undefined;
|
|
167
|
+
startIndex?: number | undefined;
|
|
168
|
+
endIndex?: number | undefined;
|
|
169
|
+
colspan?: number | undefined;
|
|
170
|
+
} | undefined;
|
|
160
171
|
}[], TableRow[] | {
|
|
161
172
|
[x: string]: any;
|
|
162
173
|
indent?: number | undefined;
|
|
163
174
|
parent?: number | undefined;
|
|
175
|
+
gantt?: {
|
|
176
|
+
color?: string | undefined;
|
|
177
|
+
startIndex?: number | undefined;
|
|
178
|
+
endIndex?: number | undefined;
|
|
179
|
+
colspan?: number | undefined;
|
|
180
|
+
} | undefined;
|
|
164
181
|
}[]>;
|
|
165
182
|
table: Ref< {}, {}>;
|
|
166
183
|
updates: Ref<Record<string, string>, Record<string, string>>;
|
|
@@ -174,10 +191,12 @@ getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
|
|
|
174
191
|
getHeaderCellStyle: (column: TableColumn) => CSSProperties;
|
|
175
192
|
getIndent: (colIndex: number, indentLevel?: number) => string;
|
|
176
193
|
getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
|
|
194
|
+
isRowGantt: (rowIndex: number) => boolean;
|
|
177
195
|
isRowVisible: (rowIndex: number) => boolean | undefined;
|
|
178
196
|
setCellData: (colIndex: number, rowIndex: number, value: any) => void;
|
|
179
197
|
setCellText: (colIndex: number, rowIndex: number, value: string) => void;
|
|
180
198
|
toggleRowExpand: (rowIndex: number) => void;
|
|
199
|
+
updateGanttBar: (event: GanttDragEvent) => void;
|
|
181
200
|
}, "columns" | "config" | "display" | "modal" | "rows" | "table" | "updates">, Pick<{
|
|
182
201
|
columns: Ref< {
|
|
183
202
|
name: string;
|
|
@@ -187,17 +206,16 @@ label?: string | undefined;
|
|
|
187
206
|
type?: string | undefined;
|
|
188
207
|
width?: string | undefined;
|
|
189
208
|
pinned?: boolean | undefined;
|
|
190
|
-
color?: string | undefined;
|
|
191
|
-
colspan?: number | undefined;
|
|
192
|
-
ganttComponent?: string | undefined;
|
|
193
|
-
isGantt?: boolean | undefined;
|
|
194
|
-
originalIndex?: number | undefined;
|
|
195
209
|
cellComponent?: string | undefined;
|
|
196
210
|
cellComponentProps?: Record<string, any> | undefined;
|
|
197
211
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
198
212
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
199
213
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
200
214
|
mask?: ((value: any) => any) | undefined;
|
|
215
|
+
isGantt?: boolean | undefined;
|
|
216
|
+
ganttComponent?: string | undefined;
|
|
217
|
+
colspan?: number | undefined;
|
|
218
|
+
originalIndex?: number | undefined;
|
|
201
219
|
}[], TableColumn[] | {
|
|
202
220
|
name: string;
|
|
203
221
|
align?: CanvasTextAlign | undefined;
|
|
@@ -206,17 +224,16 @@ label?: string | undefined;
|
|
|
206
224
|
type?: string | undefined;
|
|
207
225
|
width?: string | undefined;
|
|
208
226
|
pinned?: boolean | undefined;
|
|
209
|
-
color?: string | undefined;
|
|
210
|
-
colspan?: number | undefined;
|
|
211
|
-
ganttComponent?: string | undefined;
|
|
212
|
-
isGantt?: boolean | undefined;
|
|
213
|
-
originalIndex?: number | undefined;
|
|
214
227
|
cellComponent?: string | undefined;
|
|
215
228
|
cellComponentProps?: Record<string, any> | undefined;
|
|
216
229
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
217
230
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
218
231
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
219
232
|
mask?: ((value: any) => any) | undefined;
|
|
233
|
+
isGantt?: boolean | undefined;
|
|
234
|
+
ganttComponent?: string | undefined;
|
|
235
|
+
colspan?: number | undefined;
|
|
236
|
+
originalIndex?: number | undefined;
|
|
220
237
|
}[]>;
|
|
221
238
|
config: Ref< {
|
|
222
239
|
view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
@@ -226,59 +243,69 @@ view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
|
226
243
|
fullWidth?: boolean | undefined;
|
|
227
244
|
}>;
|
|
228
245
|
display: Ref< {
|
|
229
|
-
childrenOpen?: boolean | undefined;
|
|
230
246
|
expanded?: boolean | undefined;
|
|
231
|
-
|
|
247
|
+
childrenOpen?: boolean | undefined;
|
|
232
248
|
isParent?: boolean | undefined;
|
|
233
249
|
isRoot?: boolean | undefined;
|
|
234
250
|
open?: boolean | undefined;
|
|
251
|
+
indent?: number | undefined;
|
|
235
252
|
parent?: number | undefined;
|
|
236
253
|
rowModified?: boolean | undefined;
|
|
237
254
|
}[], TableDisplay[] | {
|
|
238
|
-
childrenOpen?: boolean | undefined;
|
|
239
255
|
expanded?: boolean | undefined;
|
|
240
|
-
|
|
256
|
+
childrenOpen?: boolean | undefined;
|
|
241
257
|
isParent?: boolean | undefined;
|
|
242
258
|
isRoot?: boolean | undefined;
|
|
243
259
|
open?: boolean | undefined;
|
|
260
|
+
indent?: number | undefined;
|
|
244
261
|
parent?: number | undefined;
|
|
245
262
|
rowModified?: boolean | undefined;
|
|
246
263
|
}[]>;
|
|
247
264
|
modal: Ref< {
|
|
248
|
-
|
|
265
|
+
visible?: boolean | undefined;
|
|
249
266
|
cell?: (HTMLTableCellElement | null) | undefined;
|
|
250
|
-
colIndex?: number | undefined;
|
|
251
|
-
event?: string | undefined;
|
|
252
|
-
height?: number | undefined;
|
|
253
|
-
left?: number | undefined;
|
|
254
267
|
parent?: HTMLElement | undefined;
|
|
268
|
+
colIndex?: number | undefined;
|
|
255
269
|
rowIndex?: number | undefined;
|
|
256
|
-
visible?: boolean | undefined;
|
|
257
|
-
width?: number | undefined;
|
|
258
270
|
component?: string | undefined;
|
|
259
271
|
componentProps?: Record<string, any> | undefined;
|
|
260
|
-
}, TableModal | {
|
|
261
272
|
bottom?: number | undefined;
|
|
262
|
-
cell?: (HTMLTableCellElement | null) | undefined;
|
|
263
|
-
colIndex?: number | undefined;
|
|
264
|
-
event?: string | undefined;
|
|
265
273
|
height?: number | undefined;
|
|
266
274
|
left?: number | undefined;
|
|
275
|
+
width?: number | undefined;
|
|
276
|
+
}, TableModal | {
|
|
277
|
+
visible?: boolean | undefined;
|
|
278
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
267
279
|
parent?: HTMLElement | undefined;
|
|
280
|
+
colIndex?: number | undefined;
|
|
268
281
|
rowIndex?: number | undefined;
|
|
269
|
-
visible?: boolean | undefined;
|
|
270
|
-
width?: number | undefined;
|
|
271
282
|
component?: string | undefined;
|
|
272
283
|
componentProps?: Record<string, any> | undefined;
|
|
284
|
+
bottom?: number | undefined;
|
|
285
|
+
height?: number | undefined;
|
|
286
|
+
left?: number | undefined;
|
|
287
|
+
width?: number | undefined;
|
|
273
288
|
}>;
|
|
274
289
|
rows: Ref< {
|
|
275
290
|
[x: string]: any;
|
|
276
291
|
indent?: number | undefined;
|
|
277
292
|
parent?: number | undefined;
|
|
293
|
+
gantt?: {
|
|
294
|
+
color?: string | undefined;
|
|
295
|
+
startIndex?: number | undefined;
|
|
296
|
+
endIndex?: number | undefined;
|
|
297
|
+
colspan?: number | undefined;
|
|
298
|
+
} | undefined;
|
|
278
299
|
}[], TableRow[] | {
|
|
279
300
|
[x: string]: any;
|
|
280
301
|
indent?: number | undefined;
|
|
281
302
|
parent?: number | undefined;
|
|
303
|
+
gantt?: {
|
|
304
|
+
color?: string | undefined;
|
|
305
|
+
startIndex?: number | undefined;
|
|
306
|
+
endIndex?: number | undefined;
|
|
307
|
+
colspan?: number | undefined;
|
|
308
|
+
} | undefined;
|
|
282
309
|
}[]>;
|
|
283
310
|
table: Ref< {}, {}>;
|
|
284
311
|
updates: Ref<Record<string, string>, Record<string, string>>;
|
|
@@ -292,10 +319,12 @@ getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
|
|
|
292
319
|
getHeaderCellStyle: (column: TableColumn) => CSSProperties;
|
|
293
320
|
getIndent: (colIndex: number, indentLevel?: number) => string;
|
|
294
321
|
getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
|
|
322
|
+
isRowGantt: (rowIndex: number) => boolean;
|
|
295
323
|
isRowVisible: (rowIndex: number) => boolean | undefined;
|
|
296
324
|
setCellData: (colIndex: number, rowIndex: number, value: any) => void;
|
|
297
325
|
setCellText: (colIndex: number, rowIndex: number, value: string) => void;
|
|
298
326
|
toggleRowExpand: (rowIndex: number) => void;
|
|
327
|
+
updateGanttBar: (event: GanttDragEvent) => void;
|
|
299
328
|
}, "hasPinnedColumns" | "numberedRowWidth" | "zeroColumn">, Pick<{
|
|
300
329
|
columns: Ref< {
|
|
301
330
|
name: string;
|
|
@@ -305,17 +334,16 @@ label?: string | undefined;
|
|
|
305
334
|
type?: string | undefined;
|
|
306
335
|
width?: string | undefined;
|
|
307
336
|
pinned?: boolean | undefined;
|
|
308
|
-
color?: string | undefined;
|
|
309
|
-
colspan?: number | undefined;
|
|
310
|
-
ganttComponent?: string | undefined;
|
|
311
|
-
isGantt?: boolean | undefined;
|
|
312
|
-
originalIndex?: number | undefined;
|
|
313
337
|
cellComponent?: string | undefined;
|
|
314
338
|
cellComponentProps?: Record<string, any> | undefined;
|
|
315
339
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
316
340
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
317
341
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
318
342
|
mask?: ((value: any) => any) | undefined;
|
|
343
|
+
isGantt?: boolean | undefined;
|
|
344
|
+
ganttComponent?: string | undefined;
|
|
345
|
+
colspan?: number | undefined;
|
|
346
|
+
originalIndex?: number | undefined;
|
|
319
347
|
}[], TableColumn[] | {
|
|
320
348
|
name: string;
|
|
321
349
|
align?: CanvasTextAlign | undefined;
|
|
@@ -324,17 +352,16 @@ label?: string | undefined;
|
|
|
324
352
|
type?: string | undefined;
|
|
325
353
|
width?: string | undefined;
|
|
326
354
|
pinned?: boolean | undefined;
|
|
327
|
-
color?: string | undefined;
|
|
328
|
-
colspan?: number | undefined;
|
|
329
|
-
ganttComponent?: string | undefined;
|
|
330
|
-
isGantt?: boolean | undefined;
|
|
331
|
-
originalIndex?: number | undefined;
|
|
332
355
|
cellComponent?: string | undefined;
|
|
333
356
|
cellComponentProps?: Record<string, any> | undefined;
|
|
334
357
|
modalComponent?: (string | ((context: CellContext) => string)) | undefined;
|
|
335
358
|
modalComponentExtraProps?: Record<string, any> | undefined;
|
|
336
359
|
format?: (string | ((value: any, context: CellContext) => string)) | undefined;
|
|
337
360
|
mask?: ((value: any) => any) | undefined;
|
|
361
|
+
isGantt?: boolean | undefined;
|
|
362
|
+
ganttComponent?: string | undefined;
|
|
363
|
+
colspan?: number | undefined;
|
|
364
|
+
originalIndex?: number | undefined;
|
|
338
365
|
}[]>;
|
|
339
366
|
config: Ref< {
|
|
340
367
|
view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
@@ -344,59 +371,69 @@ view?: ("uncounted" | "list" | "list-expansion" | "tree" | "gantt") | undefined;
|
|
|
344
371
|
fullWidth?: boolean | undefined;
|
|
345
372
|
}>;
|
|
346
373
|
display: Ref< {
|
|
347
|
-
childrenOpen?: boolean | undefined;
|
|
348
374
|
expanded?: boolean | undefined;
|
|
349
|
-
|
|
375
|
+
childrenOpen?: boolean | undefined;
|
|
350
376
|
isParent?: boolean | undefined;
|
|
351
377
|
isRoot?: boolean | undefined;
|
|
352
378
|
open?: boolean | undefined;
|
|
379
|
+
indent?: number | undefined;
|
|
353
380
|
parent?: number | undefined;
|
|
354
381
|
rowModified?: boolean | undefined;
|
|
355
382
|
}[], TableDisplay[] | {
|
|
356
|
-
childrenOpen?: boolean | undefined;
|
|
357
383
|
expanded?: boolean | undefined;
|
|
358
|
-
|
|
384
|
+
childrenOpen?: boolean | undefined;
|
|
359
385
|
isParent?: boolean | undefined;
|
|
360
386
|
isRoot?: boolean | undefined;
|
|
361
387
|
open?: boolean | undefined;
|
|
388
|
+
indent?: number | undefined;
|
|
362
389
|
parent?: number | undefined;
|
|
363
390
|
rowModified?: boolean | undefined;
|
|
364
391
|
}[]>;
|
|
365
392
|
modal: Ref< {
|
|
366
|
-
|
|
393
|
+
visible?: boolean | undefined;
|
|
367
394
|
cell?: (HTMLTableCellElement | null) | undefined;
|
|
368
|
-
colIndex?: number | undefined;
|
|
369
|
-
event?: string | undefined;
|
|
370
|
-
height?: number | undefined;
|
|
371
|
-
left?: number | undefined;
|
|
372
395
|
parent?: HTMLElement | undefined;
|
|
396
|
+
colIndex?: number | undefined;
|
|
373
397
|
rowIndex?: number | undefined;
|
|
374
|
-
visible?: boolean | undefined;
|
|
375
|
-
width?: number | undefined;
|
|
376
398
|
component?: string | undefined;
|
|
377
399
|
componentProps?: Record<string, any> | undefined;
|
|
378
|
-
}, TableModal | {
|
|
379
400
|
bottom?: number | undefined;
|
|
380
|
-
cell?: (HTMLTableCellElement | null) | undefined;
|
|
381
|
-
colIndex?: number | undefined;
|
|
382
|
-
event?: string | undefined;
|
|
383
401
|
height?: number | undefined;
|
|
384
402
|
left?: number | undefined;
|
|
403
|
+
width?: number | undefined;
|
|
404
|
+
}, TableModal | {
|
|
405
|
+
visible?: boolean | undefined;
|
|
406
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
385
407
|
parent?: HTMLElement | undefined;
|
|
408
|
+
colIndex?: number | undefined;
|
|
386
409
|
rowIndex?: number | undefined;
|
|
387
|
-
visible?: boolean | undefined;
|
|
388
|
-
width?: number | undefined;
|
|
389
410
|
component?: string | undefined;
|
|
390
411
|
componentProps?: Record<string, any> | undefined;
|
|
412
|
+
bottom?: number | undefined;
|
|
413
|
+
height?: number | undefined;
|
|
414
|
+
left?: number | undefined;
|
|
415
|
+
width?: number | undefined;
|
|
391
416
|
}>;
|
|
392
417
|
rows: Ref< {
|
|
393
418
|
[x: string]: any;
|
|
394
419
|
indent?: number | undefined;
|
|
395
420
|
parent?: number | undefined;
|
|
421
|
+
gantt?: {
|
|
422
|
+
color?: string | undefined;
|
|
423
|
+
startIndex?: number | undefined;
|
|
424
|
+
endIndex?: number | undefined;
|
|
425
|
+
colspan?: number | undefined;
|
|
426
|
+
} | undefined;
|
|
396
427
|
}[], TableRow[] | {
|
|
397
428
|
[x: string]: any;
|
|
398
429
|
indent?: number | undefined;
|
|
399
430
|
parent?: number | undefined;
|
|
431
|
+
gantt?: {
|
|
432
|
+
color?: string | undefined;
|
|
433
|
+
startIndex?: number | undefined;
|
|
434
|
+
endIndex?: number | undefined;
|
|
435
|
+
colspan?: number | undefined;
|
|
436
|
+
} | undefined;
|
|
400
437
|
}[]>;
|
|
401
438
|
table: Ref< {}, {}>;
|
|
402
439
|
updates: Ref<Record<string, string>, Record<string, string>>;
|
|
@@ -410,11 +447,56 @@ getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any;
|
|
|
410
447
|
getHeaderCellStyle: (column: TableColumn) => CSSProperties;
|
|
411
448
|
getIndent: (colIndex: number, indentLevel?: number) => string;
|
|
412
449
|
getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+";
|
|
450
|
+
isRowGantt: (rowIndex: number) => boolean;
|
|
413
451
|
isRowVisible: (rowIndex: number) => boolean | undefined;
|
|
414
452
|
setCellData: (colIndex: number, rowIndex: number, value: any) => void;
|
|
415
453
|
setCellText: (colIndex: number, rowIndex: number, value: string) => void;
|
|
416
454
|
toggleRowExpand: (rowIndex: number) => void;
|
|
417
|
-
|
|
455
|
+
updateGanttBar: (event: GanttDragEvent) => void;
|
|
456
|
+
}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowGantt" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand" | "updateGanttBar">>;
|
|
457
|
+
|
|
458
|
+
/**
|
|
459
|
+
* Gantt table drag event definition.
|
|
460
|
+
* @public
|
|
461
|
+
*/
|
|
462
|
+
export declare type GanttDragEvent = {
|
|
463
|
+
rowIndex: number;
|
|
464
|
+
colIndex: number;
|
|
465
|
+
type: 'bar';
|
|
466
|
+
start: number;
|
|
467
|
+
end: number;
|
|
468
|
+
} | {
|
|
469
|
+
rowIndex: number;
|
|
470
|
+
colIndex: number;
|
|
471
|
+
type: 'resize';
|
|
472
|
+
edge: 'start' | 'end';
|
|
473
|
+
value: number;
|
|
474
|
+
};
|
|
475
|
+
|
|
476
|
+
/**
|
|
477
|
+
* This interface defines the options for a row when it is being viewed as a Gantt chart.
|
|
478
|
+
* @public
|
|
479
|
+
*/
|
|
480
|
+
export declare interface GanttOptions {
|
|
481
|
+
/**
|
|
482
|
+
* The colour to be applied to the row's gantt bar.
|
|
483
|
+
*/
|
|
484
|
+
color?: string;
|
|
485
|
+
/**
|
|
486
|
+
* The starting column index for the gantt bar.
|
|
487
|
+
*/
|
|
488
|
+
startIndex?: number;
|
|
489
|
+
/**
|
|
490
|
+
* The ending column index for the gantt bar. If the endIndex and colspan are not provided,
|
|
491
|
+
* the bar will stretch to the end of the table.
|
|
492
|
+
*/
|
|
493
|
+
endIndex?: number;
|
|
494
|
+
/**
|
|
495
|
+
* The length of the gantt bar. Useful when only the start index is provided. If the
|
|
496
|
+
* colspan and endIndex are not provided, the bar will stretch to the end of the table.
|
|
497
|
+
*/
|
|
498
|
+
colspan?: number;
|
|
499
|
+
}
|
|
418
500
|
|
|
419
501
|
/**
|
|
420
502
|
* Install all ATable components
|
|
@@ -427,20 +509,67 @@ export declare function install(app: App): void;
|
|
|
427
509
|
* Table column definition.
|
|
428
510
|
* @public
|
|
429
511
|
*/
|
|
430
|
-
export declare
|
|
512
|
+
export declare interface TableColumn {
|
|
513
|
+
/**
|
|
514
|
+
* The key of the column. This is used to identify the column in the table.
|
|
515
|
+
*/
|
|
431
516
|
name: string;
|
|
517
|
+
/**
|
|
518
|
+
* The alignment of the column. Possible values:
|
|
519
|
+
* - `left` - left aligned
|
|
520
|
+
* - `center` - center aligned
|
|
521
|
+
* - `right` - right aligned
|
|
522
|
+
* - `start` - aligned to the start of the column
|
|
523
|
+
* - `end` - aligned to the end of the column
|
|
524
|
+
*
|
|
525
|
+
* @defaultValue 'center'
|
|
526
|
+
*/
|
|
432
527
|
align?: CanvasTextAlign;
|
|
528
|
+
/**
|
|
529
|
+
* Control whether cells for the column is editable.
|
|
530
|
+
*
|
|
531
|
+
* @defaultValue false
|
|
532
|
+
*/
|
|
433
533
|
edit?: boolean;
|
|
534
|
+
/**
|
|
535
|
+
* The label of the column. This is displayed in the table header.
|
|
536
|
+
*
|
|
537
|
+
* @defaultValue If no label is provided, a character will be assigned alphabetically,
|
|
538
|
+
* starting from 'A' for the first column, 'B' for the second column, and so on.
|
|
539
|
+
*/
|
|
434
540
|
label?: string;
|
|
541
|
+
/**
|
|
542
|
+
* The data-type of the column. Possible values:
|
|
543
|
+
* - `Data` - the column contains text data
|
|
544
|
+
* - `Select` - the column contains a select input
|
|
545
|
+
* - `Date` - the column contains a date input
|
|
546
|
+
* - `component` - the column contains a custom component
|
|
547
|
+
*
|
|
548
|
+
* @beta
|
|
549
|
+
*/
|
|
435
550
|
type?: string;
|
|
551
|
+
/**
|
|
552
|
+
* The width of the column. This can be a number (in pixels) or a string (in CSS units).
|
|
553
|
+
*
|
|
554
|
+
* @defaultValue '40ch'
|
|
555
|
+
*/
|
|
436
556
|
width?: string;
|
|
557
|
+
/**
|
|
558
|
+
* Control whether the column should be pinned to the table.
|
|
559
|
+
*
|
|
560
|
+
* @defaultValue false
|
|
561
|
+
*/
|
|
437
562
|
pinned?: boolean;
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
originalIndex?: number;
|
|
563
|
+
/**
|
|
564
|
+
* The component to use to render the cell for the column. If not provided, the table will
|
|
565
|
+
* render the default `<td>` element.
|
|
566
|
+
*/
|
|
443
567
|
cellComponent?: string;
|
|
568
|
+
/**
|
|
569
|
+
* Additional properties to pass to the table's cell component.
|
|
570
|
+
*
|
|
571
|
+
* Only applicable if the `cellComponent` property is set for the column.
|
|
572
|
+
*/
|
|
444
573
|
cellComponentProps?: Record<string, any>;
|
|
445
574
|
/**
|
|
446
575
|
* The component to use for the modal. If a function is provided, it will be called with the cell context.
|
|
@@ -457,16 +586,63 @@ export declare type TableColumn = {
|
|
|
457
586
|
* - `store` - the table data store
|
|
458
587
|
*/
|
|
459
588
|
modalComponent?: string | ((context: CellContext) => string);
|
|
589
|
+
/**
|
|
590
|
+
* Additional properties to pass to the modal component.
|
|
591
|
+
*
|
|
592
|
+
* Only applicable if the `modalComponent` property is set for the column.
|
|
593
|
+
*/
|
|
460
594
|
modalComponentExtraProps?: Record<string, any>;
|
|
595
|
+
/**
|
|
596
|
+
* The format function to use to format the value of the cell. This can either be a normal or stringified
|
|
597
|
+
* function that takes the value and the cell context and returns a string.
|
|
598
|
+
*/
|
|
461
599
|
format?: string | ((value: any, context: CellContext) => string);
|
|
600
|
+
/**
|
|
601
|
+
* The masking function to use to apply an input mask to the cell. This will accept an input value and
|
|
602
|
+
* return the masked value.
|
|
603
|
+
*/
|
|
462
604
|
mask?: (value: any) => any;
|
|
463
|
-
|
|
605
|
+
/**
|
|
606
|
+
* Whether the column is a Gantt column.
|
|
607
|
+
*
|
|
608
|
+
* Only applicable for Gantt tables.
|
|
609
|
+
*
|
|
610
|
+
* @defaultValue false
|
|
611
|
+
*/
|
|
612
|
+
isGantt?: boolean;
|
|
613
|
+
/**
|
|
614
|
+
* The component to use to render the Gantt bar for the column.
|
|
615
|
+
*
|
|
616
|
+
* Only applicable for Gantt tables.
|
|
617
|
+
*
|
|
618
|
+
* @defaultValue 'AGanttCell'
|
|
619
|
+
*/
|
|
620
|
+
ganttComponent?: string;
|
|
621
|
+
/**
|
|
622
|
+
* The colspan of the Gantt-bar for the column. This is used to determine how many columns
|
|
623
|
+
* the Gantt-bar should span.
|
|
624
|
+
*
|
|
625
|
+
* Only applicable for Gantt tables.
|
|
626
|
+
*
|
|
627
|
+
* @defaultValue The number of columns in the table, excluding any pinned columns.
|
|
628
|
+
*/
|
|
629
|
+
colspan?: number;
|
|
630
|
+
/**
|
|
631
|
+
* The starting column index for the Gantt-bar, excluding any pinned columns. This is
|
|
632
|
+
* evaluated automatically while rendering the table.
|
|
633
|
+
*
|
|
634
|
+
* Only applicable for Gantt tables.
|
|
635
|
+
*
|
|
636
|
+
* @defaultValue 0
|
|
637
|
+
*/
|
|
638
|
+
originalIndex?: number;
|
|
639
|
+
}
|
|
464
640
|
|
|
465
641
|
/**
|
|
466
642
|
* Table configuration definition.
|
|
467
643
|
* @public
|
|
468
644
|
*/
|
|
469
|
-
export declare
|
|
645
|
+
export declare interface TableConfig {
|
|
470
646
|
/**
|
|
471
647
|
* The type of view to display the table in. Possible values:
|
|
472
648
|
* - `uncounted` - row numbers are not displayed in the table
|
|
@@ -475,62 +651,196 @@ export declare type TableConfig = {
|
|
|
475
651
|
* - `tree` - carets are displayed in the number column that expand/collapse grouped rows
|
|
476
652
|
*/
|
|
477
653
|
view?: 'uncounted' | 'list' | 'list-expansion' | 'tree' | 'gantt';
|
|
654
|
+
/**
|
|
655
|
+
* Control whether the table should be allowed to use the full width of its container.
|
|
656
|
+
*
|
|
657
|
+
* @defaultValue false
|
|
658
|
+
*/
|
|
478
659
|
fullWidth?: boolean;
|
|
479
|
-
}
|
|
660
|
+
}
|
|
480
661
|
|
|
481
662
|
/**
|
|
482
663
|
* Table display definition.
|
|
483
664
|
* @public
|
|
484
665
|
*/
|
|
485
|
-
export declare
|
|
486
|
-
|
|
666
|
+
export declare interface TableDisplay {
|
|
667
|
+
/**
|
|
668
|
+
* Indicates whether a row node is expanded or collapsed.
|
|
669
|
+
*
|
|
670
|
+
* Only applicable for list-expansion views.
|
|
671
|
+
*
|
|
672
|
+
* @defaultValue false
|
|
673
|
+
*/
|
|
487
674
|
expanded?: boolean;
|
|
488
|
-
|
|
675
|
+
/**
|
|
676
|
+
* Indicates whether a row node's child nodes are open or closed.
|
|
677
|
+
*
|
|
678
|
+
* Only applicable for tree views.
|
|
679
|
+
*
|
|
680
|
+
* @defaultValue false
|
|
681
|
+
*/
|
|
682
|
+
childrenOpen?: boolean;
|
|
683
|
+
/**
|
|
684
|
+
* Indicates whether a row node is a parent node. This is evaluated automatically
|
|
685
|
+
* while rendering the table.
|
|
686
|
+
*
|
|
687
|
+
* Only applicable for tree views.
|
|
688
|
+
*/
|
|
489
689
|
isParent?: boolean;
|
|
690
|
+
/**
|
|
691
|
+
* Indicates whether a row node is a root node. This is evaluated automatically
|
|
692
|
+
* while rendering the table.
|
|
693
|
+
*
|
|
694
|
+
* Only applicable for tree views.
|
|
695
|
+
*/
|
|
490
696
|
isRoot?: boolean;
|
|
697
|
+
/**
|
|
698
|
+
* Indicates whether a row node is visible. This is evaluated automatically
|
|
699
|
+
* while rendering the table.
|
|
700
|
+
*
|
|
701
|
+
* Only applicable for tree views.
|
|
702
|
+
*/
|
|
491
703
|
open?: boolean;
|
|
704
|
+
/**
|
|
705
|
+
* The indentation level of the row node.
|
|
706
|
+
*
|
|
707
|
+
* Only applicable for tree and gantt views.
|
|
708
|
+
*
|
|
709
|
+
* @defaultValue 0
|
|
710
|
+
*/
|
|
711
|
+
indent?: number;
|
|
712
|
+
/**
|
|
713
|
+
* The HTML parent element for the row node. This is evaluated automatically while rendering
|
|
714
|
+
* the table.
|
|
715
|
+
*
|
|
716
|
+
* Only applicable for tree and gantt views.
|
|
717
|
+
*/
|
|
492
718
|
parent?: number;
|
|
719
|
+
/**
|
|
720
|
+
* Indicates whether a row node has been modified. This is evaluated automatically when a cell
|
|
721
|
+
* is edited.
|
|
722
|
+
*
|
|
723
|
+
* @defaultValue false
|
|
724
|
+
*/
|
|
493
725
|
rowModified?: boolean;
|
|
494
|
-
}
|
|
726
|
+
}
|
|
495
727
|
|
|
496
728
|
/**
|
|
497
729
|
* Table modal definition.
|
|
498
730
|
* @public
|
|
499
731
|
*/
|
|
500
|
-
export declare
|
|
501
|
-
|
|
732
|
+
export declare interface TableModal {
|
|
733
|
+
/**
|
|
734
|
+
* Indicates whether the table modal is currently visible.
|
|
735
|
+
*
|
|
736
|
+
* @defaultValue false
|
|
737
|
+
*/
|
|
738
|
+
visible?: boolean;
|
|
739
|
+
/**
|
|
740
|
+
* The HTML cell element that the modal is currently being displayed for. The field is unset
|
|
741
|
+
* when the modal is not being displayed.
|
|
742
|
+
*/
|
|
502
743
|
cell?: HTMLTableCellElement | null;
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
744
|
+
/**
|
|
745
|
+
* The HTML parent element that the modal is currently being displayed for. The field is unset
|
|
746
|
+
* when the modal is not being displayed.
|
|
747
|
+
*/
|
|
507
748
|
parent?: HTMLElement;
|
|
749
|
+
/**
|
|
750
|
+
* The index of the column that the modal is currently being displayed for. The field is
|
|
751
|
+
* unset when the modal is not being displayed.
|
|
752
|
+
*/
|
|
753
|
+
colIndex?: number;
|
|
754
|
+
/**
|
|
755
|
+
* The index of the row that the modal is currently being displayed for. The field is
|
|
756
|
+
* unset when the modal is not being displayed.
|
|
757
|
+
*/
|
|
508
758
|
rowIndex?: number;
|
|
509
|
-
|
|
510
|
-
|
|
759
|
+
/**
|
|
760
|
+
* The component to use to render the modal. If not provided, the table will
|
|
761
|
+
* try to use the column's `modalComponent` property, if set. If that is not set,
|
|
762
|
+
* the table will not display a modal.
|
|
763
|
+
*
|
|
764
|
+
* @see {@link TableColumn.modalComponent}
|
|
765
|
+
*/
|
|
511
766
|
component?: string;
|
|
767
|
+
/**
|
|
768
|
+
* Additional properties to pass to the table's modal component.
|
|
769
|
+
*/
|
|
512
770
|
componentProps?: Record<string, any>;
|
|
513
|
-
|
|
771
|
+
/**
|
|
772
|
+
* Reactive bottom value for the modal's bounding box. The field is unset when the modal
|
|
773
|
+
* is not being displayed.
|
|
774
|
+
*/
|
|
775
|
+
bottom?: ReturnType<typeof useElementBounding>['bottom'];
|
|
776
|
+
/**
|
|
777
|
+
* Reactive height value for the modal's bounding box. The field is unset when the modal
|
|
778
|
+
* is not being displayed.
|
|
779
|
+
*/
|
|
780
|
+
height?: ReturnType<typeof useElementBounding>['height'];
|
|
781
|
+
/**
|
|
782
|
+
* Reactive left value for the modal's bounding box. The field is unset when the modal
|
|
783
|
+
* is not being displayed.
|
|
784
|
+
*/
|
|
785
|
+
left?: ReturnType<typeof useElementBounding>['left'];
|
|
786
|
+
/**
|
|
787
|
+
* Reactive width value for the modal's bounding box. The field is unset when the modal
|
|
788
|
+
* is not being displayed.
|
|
789
|
+
*/
|
|
790
|
+
width?: ReturnType<typeof useElementBounding>['width'];
|
|
791
|
+
}
|
|
514
792
|
|
|
515
793
|
/**
|
|
516
794
|
* Table modal component props definition.
|
|
517
795
|
* @public
|
|
518
796
|
*/
|
|
519
|
-
export declare
|
|
797
|
+
export declare interface TableModalProps {
|
|
798
|
+
/**
|
|
799
|
+
* Additional arbitrary properties that can be passed to the modal component.
|
|
800
|
+
*/
|
|
520
801
|
[key: string]: any;
|
|
802
|
+
/**
|
|
803
|
+
* The index of the column that the modal is currently being displayed for.
|
|
804
|
+
*/
|
|
521
805
|
colIndex: number;
|
|
806
|
+
/**
|
|
807
|
+
* The index of the row that the modal is currently being displayed for.
|
|
808
|
+
*/
|
|
522
809
|
rowIndex: number;
|
|
810
|
+
/**
|
|
811
|
+
* The store for managing the current table's state.
|
|
812
|
+
*/
|
|
523
813
|
store: ReturnType<typeof createTableStore>;
|
|
524
|
-
}
|
|
814
|
+
}
|
|
525
815
|
|
|
526
816
|
/**
|
|
527
817
|
* Table row definition.
|
|
528
818
|
* @public
|
|
529
819
|
*/
|
|
530
|
-
export declare
|
|
820
|
+
export declare interface TableRow {
|
|
821
|
+
/**
|
|
822
|
+
* Additional arbitrary properties that can be passed to the row object.
|
|
823
|
+
*/
|
|
531
824
|
[key: string]: any;
|
|
825
|
+
/**
|
|
826
|
+
* The indentation level of the row node.
|
|
827
|
+
*
|
|
828
|
+
* Only applicable for tree and gantt views.
|
|
829
|
+
*
|
|
830
|
+
* @defaultValue 0
|
|
831
|
+
*/
|
|
532
832
|
indent?: number;
|
|
833
|
+
/**
|
|
834
|
+
* The HTML parent element for the row node. This is evaluated automatically while rendering
|
|
835
|
+
* the table.
|
|
836
|
+
*
|
|
837
|
+
* Only applicable for tree and gantt views.
|
|
838
|
+
*/
|
|
533
839
|
parent?: number;
|
|
534
|
-
|
|
840
|
+
/**
|
|
841
|
+
* The options to use when rendering the row as a Gantt table.
|
|
842
|
+
*/
|
|
843
|
+
gantt?: GanttOptions;
|
|
844
|
+
}
|
|
535
845
|
|
|
536
846
|
export { }
|