@canvas-components/list-table 0.2.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/LICENSE +21 -0
- package/README.md +198 -0
- package/dist/index.cjs +22097 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1652 -0
- package/dist/index.d.ts +1652 -0
- package/dist/index.js +22095 -0
- package/dist/index.js.map +1 -0
- package/package.json +37 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1652 @@
|
|
|
1
|
+
import { CanvasChartSparklineOption } from '@canvas-components/chart';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 排序状态。
|
|
5
|
+
*/
|
|
6
|
+
interface ListTableSortState {
|
|
7
|
+
key: string | null;
|
|
8
|
+
order: "ascend" | "descend" | null;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* 多列排序项。
|
|
12
|
+
*/
|
|
13
|
+
interface ListTableSortItem {
|
|
14
|
+
key: string;
|
|
15
|
+
order: "ascend" | "descend";
|
|
16
|
+
priority: number;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* 过滤匹配模式。
|
|
20
|
+
*/
|
|
21
|
+
type ListTableFilterMatchMode$1 = "fuzzy" | "exact";
|
|
22
|
+
/**
|
|
23
|
+
* 过滤类型。
|
|
24
|
+
*/
|
|
25
|
+
type ListTableFilterType$1 = "value" | "condition";
|
|
26
|
+
/**
|
|
27
|
+
* 条件关系。
|
|
28
|
+
*/
|
|
29
|
+
type ListTableFilterConditionRelation$1 = "and" | "or";
|
|
30
|
+
/**
|
|
31
|
+
* 条件运算符。
|
|
32
|
+
*/
|
|
33
|
+
type ListTableFilterConditionOperator$1 = "none" | "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "between" | "notBetween" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith" | "includes" | "notIncludes" | "blank" | "notBlank";
|
|
34
|
+
/**
|
|
35
|
+
* 过滤值定义。
|
|
36
|
+
*/
|
|
37
|
+
interface ListTableFilterValue$1 {
|
|
38
|
+
keyword: string;
|
|
39
|
+
mode: ListTableFilterMatchMode$1;
|
|
40
|
+
selectedKeys?: string[];
|
|
41
|
+
searchExact?: boolean;
|
|
42
|
+
filterType?: ListTableFilterType$1;
|
|
43
|
+
conditionOperator?: ListTableFilterConditionOperator$1;
|
|
44
|
+
conditionValue?: string;
|
|
45
|
+
conditionSecondValue?: string;
|
|
46
|
+
conditionRelation?: ListTableFilterConditionRelation$1;
|
|
47
|
+
secondConditionOperator?: ListTableFilterConditionOperator$1;
|
|
48
|
+
secondConditionValue?: string;
|
|
49
|
+
secondConditionSecondValue?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* 过滤状态。
|
|
53
|
+
*/
|
|
54
|
+
type ListTableFilterState = Record<string, ListTableFilterValue$1>;
|
|
55
|
+
/**
|
|
56
|
+
* 选中状态。
|
|
57
|
+
*/
|
|
58
|
+
interface ListTableSelectionState {
|
|
59
|
+
rowIndex: number | null;
|
|
60
|
+
columnKey: string | null;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* 表头 action 显隐状态。
|
|
64
|
+
*/
|
|
65
|
+
interface HeaderActionVisibilityState {
|
|
66
|
+
hovered: boolean;
|
|
67
|
+
sorted: boolean;
|
|
68
|
+
filtered: boolean;
|
|
69
|
+
fixed: boolean;
|
|
70
|
+
visible: boolean;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* 调试选项。
|
|
74
|
+
*/
|
|
75
|
+
interface ListTableDebugOptions {
|
|
76
|
+
enabled?: boolean;
|
|
77
|
+
showHeaderBounds?: boolean;
|
|
78
|
+
showBodyBounds?: boolean;
|
|
79
|
+
showFixedSplitLines?: boolean;
|
|
80
|
+
showViewportBounds?: boolean;
|
|
81
|
+
showHitTarget?: boolean;
|
|
82
|
+
showHeaderActionOverlay?: boolean;
|
|
83
|
+
logDrawCalls?: boolean;
|
|
84
|
+
logStateChanges?: boolean;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* 查询回调扩展参数。
|
|
88
|
+
*/
|
|
89
|
+
interface ListTableQueryChangeExtra<RecordType> {
|
|
90
|
+
currentDataSource: RecordType[];
|
|
91
|
+
action: "sort" | "filter" | "paginate";
|
|
92
|
+
mode: "local" | "remote";
|
|
93
|
+
activeColumnKeys: string[];
|
|
94
|
+
filteredDataSource: RecordType[];
|
|
95
|
+
rawFilters: ListTableFilterState;
|
|
96
|
+
sorter: ListTableSortState;
|
|
97
|
+
sorters?: ListTableSortItem[];
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/**
|
|
101
|
+
* 矩形。
|
|
102
|
+
*/
|
|
103
|
+
interface Rect {
|
|
104
|
+
x: number;
|
|
105
|
+
y: number;
|
|
106
|
+
width: number;
|
|
107
|
+
height: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* 命中结果。
|
|
111
|
+
*/
|
|
112
|
+
interface DebugHitTestResult {
|
|
113
|
+
area: "header" | "body" | "body-content" | "body-control" | "expand-trigger" | "collapse-trigger" | "column-collapse-trigger" | "expanded-row" | "header-selection" | "sort-trigger" | "filter-trigger" | "fixed-trigger" | "resize-handle" | "horizontal-scrollbar" | "vertical-scrollbar" | "summary" | "summary" | "empty";
|
|
114
|
+
scrollbarRole?: "thumb" | "track" | "decrease-button" | "increase-button";
|
|
115
|
+
columnKey?: string;
|
|
116
|
+
rowIndex?: number;
|
|
117
|
+
rowSpan?: number;
|
|
118
|
+
hitRowIndex?: number;
|
|
119
|
+
controlType?: "checkbox" | "radio" | "switch";
|
|
120
|
+
contentIndex?: number;
|
|
121
|
+
contentKey?: string;
|
|
122
|
+
nestedRowKey?: string | number;
|
|
123
|
+
nestedRowIndex?: number;
|
|
124
|
+
nestedColumnDataIndex?: string;
|
|
125
|
+
nestedColumnIndex?: number;
|
|
126
|
+
resizeEdge?: "left" | "right";
|
|
127
|
+
cursor?: string;
|
|
128
|
+
rect?: Rect;
|
|
129
|
+
tooltipText?: string;
|
|
130
|
+
tooltipVariant?: "default" | "error";
|
|
131
|
+
}
|
|
132
|
+
/**
|
|
133
|
+
* action 类型。
|
|
134
|
+
*/
|
|
135
|
+
type HeaderActionType = "sort" | "filter" | "fixed";
|
|
136
|
+
/**
|
|
137
|
+
* 渲染矩形描述。
|
|
138
|
+
*/
|
|
139
|
+
interface RenderCellDescriptor {
|
|
140
|
+
kind: "header" | "body" | "body-content" | "body-control" | "expand-trigger" | "collapse-trigger" | "column-collapse-trigger" | "expanded-row" | "header-selection" | "header-action" | "resize-handle" | "horizontal-scrollbar" | "vertical-scrollbar" | "summary";
|
|
141
|
+
rect: Rect;
|
|
142
|
+
columnKey?: string;
|
|
143
|
+
rowIndex?: number;
|
|
144
|
+
rowSpan?: number;
|
|
145
|
+
controlType?: "checkbox" | "radio" | "switch";
|
|
146
|
+
contentIndex?: number;
|
|
147
|
+
contentKey?: string;
|
|
148
|
+
nestedRowKey?: string | number;
|
|
149
|
+
nestedRowIndex?: number;
|
|
150
|
+
nestedColumnDataIndex?: string;
|
|
151
|
+
nestedColumnIndex?: number;
|
|
152
|
+
resizeEdge?: "left" | "right";
|
|
153
|
+
cursor?: string;
|
|
154
|
+
tooltipText?: string;
|
|
155
|
+
tooltipVariant?: "default" | "error";
|
|
156
|
+
actionType?: HeaderActionType;
|
|
157
|
+
scrollbarRole?: "thumb" | "track" | "decrease-button" | "increase-button";
|
|
158
|
+
visibilityState?: HeaderActionVisibilityState;
|
|
159
|
+
/** 列固定方向,用于命中测试优先级。 */
|
|
160
|
+
fixed?: "left" | "right";
|
|
161
|
+
/** 是否为冻结行,用于命中测试优先级。 */
|
|
162
|
+
frozen?: boolean;
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* 调试快照。
|
|
166
|
+
*/
|
|
167
|
+
interface ListTableDebugSnapshot {
|
|
168
|
+
layout: {
|
|
169
|
+
fixedWidthLeft: number;
|
|
170
|
+
fixedWidthRight: number;
|
|
171
|
+
headerHeight: number;
|
|
172
|
+
totalWidth: number;
|
|
173
|
+
totalBodyHeight: number;
|
|
174
|
+
};
|
|
175
|
+
viewport: unknown;
|
|
176
|
+
scroll: unknown;
|
|
177
|
+
hover: unknown;
|
|
178
|
+
selection: unknown;
|
|
179
|
+
sort: unknown;
|
|
180
|
+
filter: unknown;
|
|
181
|
+
runtimeColumns: unknown;
|
|
182
|
+
descriptors: RenderCellDescriptor[];
|
|
183
|
+
hitTest?: DebugHitTestResult;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/**
|
|
187
|
+
* 单元格样式定义。
|
|
188
|
+
*/
|
|
189
|
+
interface ListTableCellStyle {
|
|
190
|
+
backgroundColor?: string;
|
|
191
|
+
color?: string;
|
|
192
|
+
fontSize?: number;
|
|
193
|
+
fontWeight?: string;
|
|
194
|
+
textAlign?: CanvasTextAlign;
|
|
195
|
+
verticalAlign?: "top" | "middle" | "bottom";
|
|
196
|
+
paddingInline?: number;
|
|
197
|
+
paddingBlock?: number;
|
|
198
|
+
borderColor?: string;
|
|
199
|
+
borderWidth?: number;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* 主题定义。
|
|
203
|
+
*/
|
|
204
|
+
interface ListTableTheme {
|
|
205
|
+
backgroundColor: string;
|
|
206
|
+
stripedBackgroundColor: string;
|
|
207
|
+
borderColor: string;
|
|
208
|
+
textColor: string;
|
|
209
|
+
mutedTextColor: string;
|
|
210
|
+
headerBackgroundColor: string;
|
|
211
|
+
headerTextColor: string;
|
|
212
|
+
fixedShadowColor: string;
|
|
213
|
+
frozenRowBackgroundColor: string;
|
|
214
|
+
hoverBackgroundColor: string;
|
|
215
|
+
selectionBackgroundColor: string;
|
|
216
|
+
emptyBackgroundColor: string;
|
|
217
|
+
emptyTextColor: string;
|
|
218
|
+
debugStrokeColor: string;
|
|
219
|
+
debugFillColor: string;
|
|
220
|
+
fontFamily: string;
|
|
221
|
+
fontSize: number;
|
|
222
|
+
headerFontWeight: string;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* 汇总类型说明:
|
|
227
|
+
* - `sum`:对当前列做求和
|
|
228
|
+
* - `count`:统计当前列中有值的记录数量
|
|
229
|
+
* - `unionCount`:统计当前列中非空值的去重数量
|
|
230
|
+
* - `rowCount`:统计可见记录总行数
|
|
231
|
+
* - `mergedRowCount`:统计合并单元格后的逻辑行数,`rowSpan > 0` 视为一条
|
|
232
|
+
* - `avg`:对当前列做平均值计算
|
|
233
|
+
* - `min`:取当前列最小值
|
|
234
|
+
* - `max`:取当前列最大值
|
|
235
|
+
*/
|
|
236
|
+
type ListTableSummaryType = "sum" | "avg" | "count" | "unionCount" | "rowCount" | "mergedRowCount" | "min" | "max";
|
|
237
|
+
type ListTableFilterOptionValue = string | number | null;
|
|
238
|
+
interface ListTableFilterOption {
|
|
239
|
+
label: string;
|
|
240
|
+
value: ListTableFilterOptionValue;
|
|
241
|
+
}
|
|
242
|
+
/**
|
|
243
|
+
* 汇总行聚合配置。
|
|
244
|
+
*/
|
|
245
|
+
interface ListTableSummaryConfig<RecordType = Record<string, unknown>> {
|
|
246
|
+
/** 聚合函数类型,默认 `sum`。 */
|
|
247
|
+
type?: ListTableSummaryType;
|
|
248
|
+
/** 自定义值提取函数。 */
|
|
249
|
+
valueGetter?: (record: RecordType) => string | number | null | undefined;
|
|
250
|
+
/** 值格式化函数。 */
|
|
251
|
+
formatter?: (value: string | number, records: RecordType[], column: ListTableColumn<RecordType>) => string;
|
|
252
|
+
/** 小数精度(四舍五入),不传则整数不保留小数、非整数保留两位。 */
|
|
253
|
+
precision?: number;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* 路径索引定义。
|
|
257
|
+
*/
|
|
258
|
+
type TableColumnDataIndex = string | number | Array<string | number>;
|
|
259
|
+
/**
|
|
260
|
+
* 单元格内容点击上下文。
|
|
261
|
+
*/
|
|
262
|
+
interface ListTableCellContentClickContext<RecordType = any> {
|
|
263
|
+
record: RecordType;
|
|
264
|
+
rowIndex: number;
|
|
265
|
+
column: ListTableColumn<RecordType>;
|
|
266
|
+
value: unknown;
|
|
267
|
+
contentIndex: number;
|
|
268
|
+
nativeEvent: MouseEvent;
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* 单元格内容片段样式。
|
|
272
|
+
*/
|
|
273
|
+
type ListTableImageObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down";
|
|
274
|
+
type ListTableTextDecoration = "none" | "underline" | "line-through" | "overline";
|
|
275
|
+
type ListTableProgressShape = "line" | "circle";
|
|
276
|
+
type ListTableProgressSize = "small" | "medium" | number | [number, number] | {
|
|
277
|
+
width?: number;
|
|
278
|
+
height?: number;
|
|
279
|
+
};
|
|
280
|
+
type ListTableSparklineSize = "small" | "medium" | number | [number, number] | {
|
|
281
|
+
width?: number;
|
|
282
|
+
height?: number;
|
|
283
|
+
};
|
|
284
|
+
type ListTableChartType = "sparkline" | (string & {});
|
|
285
|
+
type ListTableChartSize = ListTableSparklineSize;
|
|
286
|
+
type ListTableRateSize = "small" | "medium" | "large" | number;
|
|
287
|
+
type ListTableSymbolType = "star" | "sun" | "moon";
|
|
288
|
+
type ListTableButtonType = "primary" | "default" | "dashed" | "text" | "link";
|
|
289
|
+
type ListTableButtonSize = "small" | "middle" | "medium" | "large";
|
|
290
|
+
/**
|
|
291
|
+
* 金额内容格式化配置。
|
|
292
|
+
*/
|
|
293
|
+
interface ListTableMoneyFormatOptions {
|
|
294
|
+
/** 金额符号,例如 `¥`、`$`,默认不显示。 */
|
|
295
|
+
symbol?: string;
|
|
296
|
+
/** 是否显示千位分隔符,传入字符串时作为分隔符,默认显示 `,`。 */
|
|
297
|
+
thousandsSeparator?: boolean | string;
|
|
298
|
+
/** 小数位数,默认保留两位。 */
|
|
299
|
+
decimalPlaces?: number;
|
|
300
|
+
}
|
|
301
|
+
/**
|
|
302
|
+
* 危险按钮二次确认配置。
|
|
303
|
+
*/
|
|
304
|
+
interface ListTableButtonPopconfirmOptions {
|
|
305
|
+
title?: string;
|
|
306
|
+
description?: string;
|
|
307
|
+
okText?: string;
|
|
308
|
+
cancelText?: string;
|
|
309
|
+
}
|
|
310
|
+
type ListTableQrCodeLevel = "L" | "M" | "Q" | "H";
|
|
311
|
+
type ListTableBarcodeFormat = "code128" | "code128b" | "code128c" | "code39" | "itf" | "ean13" | "ean8" | "upca";
|
|
312
|
+
/**
|
|
313
|
+
* 单元格编辑校验规则。
|
|
314
|
+
*/
|
|
315
|
+
interface ListTableFormRule<RecordType = Record<string, unknown>> {
|
|
316
|
+
required?: boolean;
|
|
317
|
+
/** 必填时是否在表头展示红色星号,默认展示。 */
|
|
318
|
+
showRequiredMark?: boolean;
|
|
319
|
+
message: string;
|
|
320
|
+
validator?: (value: unknown, record: RecordType, index: number) => boolean | string | void | Promise<boolean | string | void>;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* 单元格编辑校验规则集合。
|
|
324
|
+
*/
|
|
325
|
+
type ListTableFormRules<RecordType = Record<string, unknown>> = ListTableFormRule<RecordType>[] | ((text: unknown, record: RecordType, index: number) => ListTableFormRule<RecordType>[]);
|
|
326
|
+
/**
|
|
327
|
+
* 单元格内容片段样式。
|
|
328
|
+
*/
|
|
329
|
+
interface ListTableContentStyle {
|
|
330
|
+
display?: "block" | "inline-block";
|
|
331
|
+
textAlign?: CanvasTextAlign;
|
|
332
|
+
fontSize?: number;
|
|
333
|
+
fontWeight?: string;
|
|
334
|
+
fontFamily?: string;
|
|
335
|
+
color?: string;
|
|
336
|
+
backgroundColor?: string;
|
|
337
|
+
opacity?: number;
|
|
338
|
+
textDecoration?: ListTableTextDecoration;
|
|
339
|
+
textIndent?: number;
|
|
340
|
+
width?: number;
|
|
341
|
+
height?: number;
|
|
342
|
+
objectFit?: ListTableImageObjectFit;
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* 单元格内容基础定义。
|
|
346
|
+
*/
|
|
347
|
+
interface ListTableBaseCellContent<RecordType = any> {
|
|
348
|
+
key?: string;
|
|
349
|
+
style?: ListTableContentStyle;
|
|
350
|
+
cursor?: string;
|
|
351
|
+
onClick?: (context: ListTableCellContentClickContext<RecordType>) => void;
|
|
352
|
+
}
|
|
353
|
+
/**
|
|
354
|
+
* 单元格文本片段。
|
|
355
|
+
*/
|
|
356
|
+
interface ListTableTextCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
357
|
+
type: "text";
|
|
358
|
+
text: string;
|
|
359
|
+
color?: string;
|
|
360
|
+
fontSize?: number;
|
|
361
|
+
fontWeight?: string;
|
|
362
|
+
}
|
|
363
|
+
/**
|
|
364
|
+
* 单元格金额片段。
|
|
365
|
+
*/
|
|
366
|
+
interface ListTableMoneyCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
367
|
+
type: "money";
|
|
368
|
+
value: string | number | null | undefined;
|
|
369
|
+
symbol?: string;
|
|
370
|
+
thousandsSeparator?: boolean | string;
|
|
371
|
+
decimalPlaces?: number;
|
|
372
|
+
color?: string;
|
|
373
|
+
fontSize?: number;
|
|
374
|
+
fontWeight?: string;
|
|
375
|
+
}
|
|
376
|
+
interface ListTableHeaderTextContent {
|
|
377
|
+
type: "text";
|
|
378
|
+
text: string;
|
|
379
|
+
color?: string;
|
|
380
|
+
fontSize?: number;
|
|
381
|
+
fontWeight?: string;
|
|
382
|
+
}
|
|
383
|
+
interface ListTableHeaderImageContent {
|
|
384
|
+
type: "img";
|
|
385
|
+
src: string;
|
|
386
|
+
alt?: string;
|
|
387
|
+
width?: number;
|
|
388
|
+
height?: number;
|
|
389
|
+
}
|
|
390
|
+
type ListTableHeaderContent = ListTableHeaderTextContent | ListTableHeaderImageContent;
|
|
391
|
+
type ListTableHeaderTitle = string | ListTableHeaderContent | ListTableHeaderContent[];
|
|
392
|
+
/**
|
|
393
|
+
* 单元格链接片段。
|
|
394
|
+
*/
|
|
395
|
+
interface ListTableLinkCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
396
|
+
type: "link";
|
|
397
|
+
text: string;
|
|
398
|
+
href?: string;
|
|
399
|
+
target?: "_self" | "_blank";
|
|
400
|
+
disabled?: boolean;
|
|
401
|
+
visited?: boolean;
|
|
402
|
+
color?: string;
|
|
403
|
+
hoverColor?: string;
|
|
404
|
+
visitedColor?: string;
|
|
405
|
+
disabledColor?: string;
|
|
406
|
+
fontSize?: number;
|
|
407
|
+
fontWeight?: string;
|
|
408
|
+
underline?: boolean | "hover";
|
|
409
|
+
}
|
|
410
|
+
/**
|
|
411
|
+
* 单元格图片片段。
|
|
412
|
+
*/
|
|
413
|
+
interface ListTableImageCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
414
|
+
type: "image";
|
|
415
|
+
src: string;
|
|
416
|
+
alt?: string;
|
|
417
|
+
/** 是否允许点击预览,默认开启。 */
|
|
418
|
+
preview?: boolean;
|
|
419
|
+
}
|
|
420
|
+
/**
|
|
421
|
+
* 单元格进度片段。
|
|
422
|
+
*/
|
|
423
|
+
interface ListTableProgressCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
424
|
+
type: "progress";
|
|
425
|
+
value: number;
|
|
426
|
+
min?: number;
|
|
427
|
+
max?: number;
|
|
428
|
+
shape?: ListTableProgressShape;
|
|
429
|
+
size?: ListTableProgressSize;
|
|
430
|
+
showPercent?: boolean;
|
|
431
|
+
showInfo?: boolean;
|
|
432
|
+
text?: string;
|
|
433
|
+
progressColor?: string;
|
|
434
|
+
color?: string;
|
|
435
|
+
trackColor?: string;
|
|
436
|
+
successColor?: string;
|
|
437
|
+
strokeWidth?: number;
|
|
438
|
+
}
|
|
439
|
+
/**
|
|
440
|
+
* 通用单元格图表片段基类。
|
|
441
|
+
*/
|
|
442
|
+
interface ListTableBaseChartCellContent<RecordType = any, ChartType extends string = string, Option = unknown> extends ListTableBaseCellContent<RecordType> {
|
|
443
|
+
type: "chart";
|
|
444
|
+
/** 是否允许点击预览,默认开启。 */
|
|
445
|
+
preview?: boolean;
|
|
446
|
+
chartType: ChartType;
|
|
447
|
+
option: Option;
|
|
448
|
+
size?: ListTableChartSize;
|
|
449
|
+
}
|
|
450
|
+
/**
|
|
451
|
+
* 单元格图表片段。
|
|
452
|
+
*/
|
|
453
|
+
interface ListTableCustomChartCellContent<RecordType = any> extends ListTableBaseChartCellContent<RecordType, ListTableChartType, unknown> {
|
|
454
|
+
}
|
|
455
|
+
/**
|
|
456
|
+
* 单元格 sparkline 图表片段。
|
|
457
|
+
*/
|
|
458
|
+
interface ListTableSparklineChartCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
459
|
+
type: "chart";
|
|
460
|
+
/** 是否允许点击预览,默认开启。 */
|
|
461
|
+
preview?: boolean;
|
|
462
|
+
chartType: "sparkline";
|
|
463
|
+
option?: CanvasChartSparklineOption;
|
|
464
|
+
values?: number[];
|
|
465
|
+
min?: number;
|
|
466
|
+
max?: number;
|
|
467
|
+
size?: ListTableSparklineSize;
|
|
468
|
+
color?: string;
|
|
469
|
+
lineWidth?: number;
|
|
470
|
+
areaColor?: string;
|
|
471
|
+
pointColor?: string;
|
|
472
|
+
pointRadius?: number;
|
|
473
|
+
padding?: number;
|
|
474
|
+
smooth?: boolean;
|
|
475
|
+
}
|
|
476
|
+
/**
|
|
477
|
+
* 单元格图表片段。
|
|
478
|
+
*/
|
|
479
|
+
type ListTableChartCellContent<RecordType = any> = ListTableSparklineChartCellContent<RecordType> | ListTableCustomChartCellContent<RecordType>;
|
|
480
|
+
/**
|
|
481
|
+
* 单元格评分片段。
|
|
482
|
+
*/
|
|
483
|
+
interface ListTableRateCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
484
|
+
type: "rate";
|
|
485
|
+
value: number;
|
|
486
|
+
count?: number;
|
|
487
|
+
allowHalf?: boolean;
|
|
488
|
+
/** 评分图形,默认星星。 */
|
|
489
|
+
shape?: ListTableSymbolType;
|
|
490
|
+
size?: ListTableRateSize;
|
|
491
|
+
color?: string;
|
|
492
|
+
backgroundColor?: string;
|
|
493
|
+
gap?: number;
|
|
494
|
+
text?: string;
|
|
495
|
+
showText?: boolean;
|
|
496
|
+
}
|
|
497
|
+
/**
|
|
498
|
+
* 单元格图形图标片段。
|
|
499
|
+
*/
|
|
500
|
+
interface ListTableIconCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
501
|
+
type: "icon";
|
|
502
|
+
icon: ListTableSymbolType;
|
|
503
|
+
color?: string;
|
|
504
|
+
size?: number;
|
|
505
|
+
}
|
|
506
|
+
/**
|
|
507
|
+
* 单元格按钮片段。
|
|
508
|
+
*/
|
|
509
|
+
interface ListTableButtonCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
510
|
+
type: "button";
|
|
511
|
+
text: string;
|
|
512
|
+
buttonType?: ListTableButtonType;
|
|
513
|
+
size?: ListTableButtonSize;
|
|
514
|
+
/**
|
|
515
|
+
* 是否使用危险操作模式。
|
|
516
|
+
*
|
|
517
|
+
* 开启后按钮会使用危险色,并在点击前弹出二次确认。
|
|
518
|
+
*/
|
|
519
|
+
danger?: boolean;
|
|
520
|
+
/**
|
|
521
|
+
* 危险操作二次确认文案配置。
|
|
522
|
+
*/
|
|
523
|
+
popconfirm?: ListTableButtonPopconfirmOptions;
|
|
524
|
+
disabled?: boolean;
|
|
525
|
+
}
|
|
526
|
+
/**
|
|
527
|
+
* 单元格二维码片段。
|
|
528
|
+
*/
|
|
529
|
+
interface ListTableQrCodeCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
530
|
+
type: "qrcode";
|
|
531
|
+
value: string;
|
|
532
|
+
level?: ListTableQrCodeLevel;
|
|
533
|
+
size?: number;
|
|
534
|
+
color?: string;
|
|
535
|
+
backgroundColor?: string;
|
|
536
|
+
padding?: number;
|
|
537
|
+
/** 是否允许点击预览,默认开启。 */
|
|
538
|
+
preview?: boolean;
|
|
539
|
+
}
|
|
540
|
+
/**
|
|
541
|
+
* 单元格条形码片段。
|
|
542
|
+
*/
|
|
543
|
+
interface ListTableBarcodeCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
544
|
+
type: "barcode";
|
|
545
|
+
value: string;
|
|
546
|
+
format?: ListTableBarcodeFormat;
|
|
547
|
+
padding?: number;
|
|
548
|
+
color?: string;
|
|
549
|
+
backgroundColor?: string;
|
|
550
|
+
showText?: boolean;
|
|
551
|
+
text?: string;
|
|
552
|
+
/** 是否允许点击预览,默认开启。 */
|
|
553
|
+
preview?: boolean;
|
|
554
|
+
}
|
|
555
|
+
/**
|
|
556
|
+
* 单元格颜色块片段。
|
|
557
|
+
*/
|
|
558
|
+
interface ListTableColorCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
559
|
+
type: "color";
|
|
560
|
+
/** CSS 颜色值。 */
|
|
561
|
+
value: string;
|
|
562
|
+
width?: number;
|
|
563
|
+
height?: number;
|
|
564
|
+
radius?: number;
|
|
565
|
+
borderColor?: string;
|
|
566
|
+
}
|
|
567
|
+
/**
|
|
568
|
+
* 单元格上下箭头片段。
|
|
569
|
+
*/
|
|
570
|
+
interface ListTableArrowCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
571
|
+
type: "arrow";
|
|
572
|
+
direction: "up" | "down";
|
|
573
|
+
/** 箭头颜色,默认上箭头绿色、下箭头红色。 */
|
|
574
|
+
color?: string;
|
|
575
|
+
size?: number;
|
|
576
|
+
lineWidth?: number;
|
|
577
|
+
}
|
|
578
|
+
/**
|
|
579
|
+
* 单元格标签片段。
|
|
580
|
+
*/
|
|
581
|
+
interface ListTableTagCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
582
|
+
type: "tag";
|
|
583
|
+
text: string;
|
|
584
|
+
/**
|
|
585
|
+
* 标签颜色配置。
|
|
586
|
+
*
|
|
587
|
+
* - 传入预设值时,会套用接近 AntD 的标签前景色 / 背景色 / 边框色
|
|
588
|
+
* - 传入任意颜色字符串时,会作为实色标签背景并自动推导文字颜色
|
|
589
|
+
*/
|
|
590
|
+
color?: "default" | "success" | "processing" | "error" | "warning" | "blue" | "cyan" | "geekblue" | "gold" | "green" | "lime" | "magenta" | "orange" | "purple" | "red" | "volcano" | string;
|
|
591
|
+
textColor?: string;
|
|
592
|
+
backgroundColor?: string;
|
|
593
|
+
borderColor?: string;
|
|
594
|
+
fontSize?: number;
|
|
595
|
+
fontWeight?: string;
|
|
596
|
+
bordered?: boolean;
|
|
597
|
+
radius?: number;
|
|
598
|
+
paddingInline?: number;
|
|
599
|
+
height?: number;
|
|
600
|
+
}
|
|
601
|
+
/**
|
|
602
|
+
* 单元格选择器片段。
|
|
603
|
+
*/
|
|
604
|
+
interface ListTableSelectionCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
605
|
+
type: "checkbox" | "radio";
|
|
606
|
+
checked: boolean;
|
|
607
|
+
disabled?: boolean;
|
|
608
|
+
label?: string;
|
|
609
|
+
}
|
|
610
|
+
/**
|
|
611
|
+
* 单元格开关片段。
|
|
612
|
+
*/
|
|
613
|
+
interface ListTableSwitchCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
614
|
+
type: "switch";
|
|
615
|
+
checked: boolean;
|
|
616
|
+
disabled?: boolean;
|
|
617
|
+
checkedChildren?: string;
|
|
618
|
+
uncheckedChildren?: string;
|
|
619
|
+
}
|
|
620
|
+
interface ListTableNestedTableColumn {
|
|
621
|
+
title: string;
|
|
622
|
+
dataIndex: TableColumnDataIndex;
|
|
623
|
+
width?: number;
|
|
624
|
+
align?: "left" | "center" | "right";
|
|
625
|
+
}
|
|
626
|
+
/**
|
|
627
|
+
* 单元格内嵌表格片段。
|
|
628
|
+
*/
|
|
629
|
+
interface ListTableNestedTableCellContent<RecordType = any> extends ListTableBaseCellContent<RecordType> {
|
|
630
|
+
type: "table";
|
|
631
|
+
columns: ListTableNestedTableColumn[];
|
|
632
|
+
dataSource: Record<string, unknown>[];
|
|
633
|
+
rowKey?: TableColumnDataIndex | ((record: Record<string, unknown>, index: number) => string | number);
|
|
634
|
+
width?: number;
|
|
635
|
+
rowHeight?: number;
|
|
636
|
+
headerHeight?: number;
|
|
637
|
+
bordered?: boolean;
|
|
638
|
+
size?: "small" | "middle";
|
|
639
|
+
emptyText?: string;
|
|
640
|
+
highlightRowKeys?: Array<string | number>;
|
|
641
|
+
highlightRowIndexes?: number[];
|
|
642
|
+
highlightColumnDataIndexes?: TableColumnDataIndex[];
|
|
643
|
+
highlightColumnIndexes?: number[];
|
|
644
|
+
}
|
|
645
|
+
/**
|
|
646
|
+
* 单元格内容定义。
|
|
647
|
+
*/
|
|
648
|
+
type ListTableCellContent<RecordType = any> = ListTableArrowCellContent<RecordType> | ListTableIconCellContent<RecordType> | ListTableTextCellContent<RecordType> | ListTableMoneyCellContent<RecordType> | ListTableLinkCellContent<RecordType> | ListTableImageCellContent<RecordType> | ListTableProgressCellContent<RecordType> | ListTableChartCellContent<RecordType> | ListTableRateCellContent<RecordType> | ListTableButtonCellContent<RecordType> | ListTableQrCodeCellContent<RecordType> | ListTableBarcodeCellContent<RecordType> | ListTableColorCellContent<RecordType> | ListTableTagCellContent<RecordType> | ListTableSelectionCellContent<RecordType> | ListTableSwitchCellContent<RecordType> | ListTableNestedTableCellContent<RecordType>;
|
|
649
|
+
/**
|
|
650
|
+
* 单元格跨度配置。
|
|
651
|
+
*
|
|
652
|
+
* 语义与 AntD Table 保持一致:
|
|
653
|
+
* - `rowSpan` / `colSpan` 大于 `1` 时表示从当前单元格向下/向右合并。
|
|
654
|
+
* - `rowSpan` / `colSpan` 为 `0` 时表示当前单元格不单独渲染。
|
|
655
|
+
*/
|
|
656
|
+
interface ListTableCellSpan {
|
|
657
|
+
rowSpan?: number;
|
|
658
|
+
colSpan?: number;
|
|
659
|
+
}
|
|
660
|
+
/**
|
|
661
|
+
* 单元格内容渲染函数。
|
|
662
|
+
*/
|
|
663
|
+
type ListTableRenderResult<RecordType = any> = ListTableCellContent<RecordType> | ListTableCellContent<RecordType>[] | string | number | null | undefined;
|
|
664
|
+
type ListTableCellRender<RecordType> = (value: unknown, record: RecordType, rowIndex: number, column: ListTableColumn<RecordType>) => ListTableRenderResult<RecordType>;
|
|
665
|
+
/**
|
|
666
|
+
* 单元格编辑值类型。
|
|
667
|
+
*
|
|
668
|
+
* 采用可扩展枚举,便于后续继续补充原生编辑器实现。
|
|
669
|
+
*/
|
|
670
|
+
type ListTableEditValueType = "text" | "number" | "input-range" | "year" | "quarter" | "month" | "time" | "datetime" | "timerange" | "date" | "date-range" | "datetime-range" | "color" | "select" | "auto-complete";
|
|
671
|
+
/**
|
|
672
|
+
* 下拉编辑选项。
|
|
673
|
+
*/
|
|
674
|
+
interface ListTableEditOption {
|
|
675
|
+
label: string;
|
|
676
|
+
value: string | number;
|
|
677
|
+
}
|
|
678
|
+
/**
|
|
679
|
+
* 下拉编辑选项过滤函数。
|
|
680
|
+
*/
|
|
681
|
+
type ListTableEditFilterOption = (input: string, option: ListTableEditOption) => boolean;
|
|
682
|
+
/**
|
|
683
|
+
* AutoComplete 可选的回车扩展回调。
|
|
684
|
+
*/
|
|
685
|
+
type ListTableEditAutoCompleteEnter = (input: string) => ListTableEditOption[] | void | Promise<ListTableEditOption[] | void>;
|
|
686
|
+
/**
|
|
687
|
+
* 表单内容格式化器。
|
|
688
|
+
*/
|
|
689
|
+
type ListTableFormItemFormatter<RecordType = Record<string, unknown>> = "" | ((value: unknown, record: RecordType, rowIndex: number) => string);
|
|
690
|
+
/**
|
|
691
|
+
* 下拉编辑选项解析上下文。
|
|
692
|
+
*/
|
|
693
|
+
interface ListTableFormItemPropsConfig<RecordType = Record<string, unknown>> {
|
|
694
|
+
valueType?: ListTableEditValueType;
|
|
695
|
+
clickCount?: number;
|
|
696
|
+
placeholder?: string;
|
|
697
|
+
min?: number | string;
|
|
698
|
+
max?: number | string;
|
|
699
|
+
step?: number | string;
|
|
700
|
+
options?: ListTableEditOption[];
|
|
701
|
+
/** 是否开启下拉选项搜索。 */
|
|
702
|
+
showSearch?: boolean;
|
|
703
|
+
/** 自定义下拉选项过滤逻辑,仅在开启搜索时生效。 */
|
|
704
|
+
filterOption?: ListTableEditFilterOption;
|
|
705
|
+
/**
|
|
706
|
+
* AutoComplete 可选的回车扩展回调。返回刷新后的 options 时才重新映射输入值。
|
|
707
|
+
*/
|
|
708
|
+
onPressEnter?: ListTableEditAutoCompleteEnter;
|
|
709
|
+
dependencies?: TableColumnDataIndex[];
|
|
710
|
+
rules?: ListTableFormRules<RecordType>;
|
|
711
|
+
rangeSeparator?: string;
|
|
712
|
+
format?: ListTableFormItemFormatter<RecordType>;
|
|
713
|
+
}
|
|
714
|
+
/**
|
|
715
|
+
* 单元格编辑器配置。
|
|
716
|
+
*/
|
|
717
|
+
type ListTableFormItemProps<RecordType = Record<string, unknown>> = ListTableFormItemPropsConfig<RecordType> | ((text: unknown, record: RecordType, index: number) => ListTableFormItemPropsConfig<RecordType>);
|
|
718
|
+
/**
|
|
719
|
+
* 单元格是否可编辑配置。
|
|
720
|
+
*/
|
|
721
|
+
type ListTableEditable<RecordType = Record<string, unknown>> = boolean | ((text: unknown, record: RecordType, index: number) => boolean);
|
|
722
|
+
/**
|
|
723
|
+
* 列定义。
|
|
724
|
+
*/
|
|
725
|
+
interface ListTableColumn<RecordType = Record<string, unknown>> {
|
|
726
|
+
key?: string;
|
|
727
|
+
title?: ListTableHeaderTitle;
|
|
728
|
+
dataIndex: TableColumnDataIndex;
|
|
729
|
+
children?: ListTableColumn<RecordType>[];
|
|
730
|
+
width?: number;
|
|
731
|
+
minWidth?: number;
|
|
732
|
+
maxWidth?: number;
|
|
733
|
+
align?: "left" | "center" | "right";
|
|
734
|
+
fixed?: "left" | "right";
|
|
735
|
+
hidden?: boolean;
|
|
736
|
+
ellipsis?: boolean;
|
|
737
|
+
/** 是否允许进入编辑输入态。 */
|
|
738
|
+
editable?: ListTableEditable<RecordType>;
|
|
739
|
+
/** 编辑器配置,未传时默认使用文本输入。 */
|
|
740
|
+
formItemProps?: ListTableFormItemProps<RecordType>;
|
|
741
|
+
/** 是否允许拖拽改变列宽。默认取表格级配置。 */
|
|
742
|
+
resizable?: boolean;
|
|
743
|
+
/** 是否允许拖拽排序。默认取表格级配置。 */
|
|
744
|
+
draggable?: boolean;
|
|
745
|
+
allowSort?: boolean;
|
|
746
|
+
sortValueGetter?: (record: RecordType) => string | number | null | undefined;
|
|
747
|
+
defaultSortOrder?: "ascend" | "descend";
|
|
748
|
+
sortPriority?: number;
|
|
749
|
+
allowFilter?: boolean;
|
|
750
|
+
filterModes?: Array<"fuzzy" | "exact">;
|
|
751
|
+
filterValueGetter?: (record: RecordType) => unknown;
|
|
752
|
+
filterOptionValueGetter?: (record: RecordType) => unknown;
|
|
753
|
+
filterOptions?: Array<string | ListTableFilterOption>;
|
|
754
|
+
render?: ListTableCellRender<RecordType>;
|
|
755
|
+
/**
|
|
756
|
+
* 单元格配置回调。
|
|
757
|
+
*
|
|
758
|
+
* 可返回 `rowSpan` / `colSpan` 来声明当前单元格的合并范围,
|
|
759
|
+
* 用法参考 AntD Table 的 `onCell`。
|
|
760
|
+
*/
|
|
761
|
+
onCell?: (value: unknown, record: RecordType, rowIndex: number, column: ListTableColumn<RecordType>) => ListTableCellSpan | null | undefined;
|
|
762
|
+
cellType?: "text" | "money" | "link" | "image" | "qrcode" | "barcode" | "color" | "progress" | "chart" | "rate" | "checkbox" | "radio" | "switch" | "tag" | "button" | "custom";
|
|
763
|
+
cellStyle?: ListTableCellStyle;
|
|
764
|
+
/** 金额单元格格式配置,仅在 `cellType: "money"` 时生效。 */
|
|
765
|
+
moneyFormat?: ListTableMoneyFormatOptions;
|
|
766
|
+
headerStyle?: ListTableCellStyle;
|
|
767
|
+
/** 汇总行配置。设为 `true` 等效于 `{ type: "sum" }`。 */
|
|
768
|
+
summary?: boolean | ListTableSummaryConfig<RecordType>;
|
|
769
|
+
/** 汇总行标题。设置后该列在汇总行中显示此标题文本(用于"合计"等标签列)。 */
|
|
770
|
+
summaryTitle?: string;
|
|
771
|
+
meta?: Record<string, unknown>;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
/**
|
|
775
|
+
* 列表表格 UI 适配层公共类型。
|
|
776
|
+
*/
|
|
777
|
+
|
|
778
|
+
type ListTableFilterMatchMode = "fuzzy" | "exact";
|
|
779
|
+
type ListTableFilterType = "value" | "condition";
|
|
780
|
+
type ListTableFilterConditionRelation = "and" | "or";
|
|
781
|
+
type ListTableFilterConditionOperator = "none" | "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "between" | "notBetween" | "startsWith" | "notStartsWith" | "endsWith" | "notEndsWith" | "includes" | "notIncludes" | "blank" | "notBlank";
|
|
782
|
+
interface ListTableFilterValue {
|
|
783
|
+
keyword: string;
|
|
784
|
+
mode: ListTableFilterMatchMode;
|
|
785
|
+
searchExact?: boolean;
|
|
786
|
+
selectedKeys?: string[];
|
|
787
|
+
filterType?: ListTableFilterType;
|
|
788
|
+
conditionOperator?: ListTableFilterConditionOperator;
|
|
789
|
+
conditionValue?: string;
|
|
790
|
+
conditionSecondValue?: string;
|
|
791
|
+
conditionRelation?: ListTableFilterConditionRelation;
|
|
792
|
+
secondConditionOperator?: ListTableFilterConditionOperator;
|
|
793
|
+
secondConditionValue?: string;
|
|
794
|
+
secondConditionSecondValue?: string;
|
|
795
|
+
}
|
|
796
|
+
interface FilterPanelOptionItem {
|
|
797
|
+
label: string;
|
|
798
|
+
value: string;
|
|
799
|
+
count: number;
|
|
800
|
+
kind?: "all" | "blank" | "notBlank" | "value";
|
|
801
|
+
}
|
|
802
|
+
interface FilterPanelTexts {
|
|
803
|
+
title: string;
|
|
804
|
+
valueFilterTab: string;
|
|
805
|
+
conditionFilterTab: string;
|
|
806
|
+
searchPlaceholder: string;
|
|
807
|
+
optionsLabel: string;
|
|
808
|
+
emptyOptions: string;
|
|
809
|
+
loadingOptions: string;
|
|
810
|
+
exactToggleLabel: string;
|
|
811
|
+
allOptionLabel: string;
|
|
812
|
+
blankOptionLabel: string;
|
|
813
|
+
notBlankOptionLabel: string;
|
|
814
|
+
operatorLabel: string;
|
|
815
|
+
relationLabel: string;
|
|
816
|
+
firstConditionLabel: string;
|
|
817
|
+
secondConditionLabel: string;
|
|
818
|
+
firstValuePlaceholder: string;
|
|
819
|
+
secondValuePlaceholder: string;
|
|
820
|
+
relationAndLabel: string;
|
|
821
|
+
relationOrLabel: string;
|
|
822
|
+
resetAction: string;
|
|
823
|
+
applyAction: string;
|
|
824
|
+
}
|
|
825
|
+
interface FilterPanelConfig {
|
|
826
|
+
columnTitle: string;
|
|
827
|
+
anchorRect: {
|
|
828
|
+
x: number;
|
|
829
|
+
y: number;
|
|
830
|
+
width: number;
|
|
831
|
+
height: number;
|
|
832
|
+
};
|
|
833
|
+
value: ListTableFilterValue;
|
|
834
|
+
/** 点击过滤候选项后是否立即应用,并保持当前候选项列表。 */
|
|
835
|
+
filterOptionImmediateApply?: boolean;
|
|
836
|
+
modes: ListTableFilterMatchMode[];
|
|
837
|
+
options: FilterPanelOptionItem[];
|
|
838
|
+
loadOptions?: (signal: AbortSignal) => FilterPanelOptionItem[] | Promise<FilterPanelOptionItem[]>;
|
|
839
|
+
texts: FilterPanelTexts;
|
|
840
|
+
onApply: (value: ListTableFilterValue) => void;
|
|
841
|
+
onReset: () => void;
|
|
842
|
+
onClose: () => void;
|
|
843
|
+
}
|
|
844
|
+
interface ListTableTooltipRequest {
|
|
845
|
+
x: number;
|
|
846
|
+
y: number;
|
|
847
|
+
content: string;
|
|
848
|
+
variant?: "default" | "error";
|
|
849
|
+
/**
|
|
850
|
+
* 表格内容缩放(1 = 100%),用于 tooltip 与画布视觉同步。
|
|
851
|
+
*/
|
|
852
|
+
contentZoom?: number;
|
|
853
|
+
}
|
|
854
|
+
interface ListTableLoadingRequest {
|
|
855
|
+
text?: string;
|
|
856
|
+
}
|
|
857
|
+
interface FixedPopupConfig {
|
|
858
|
+
anchorRect: {
|
|
859
|
+
x: number;
|
|
860
|
+
y: number;
|
|
861
|
+
width: number;
|
|
862
|
+
height: number;
|
|
863
|
+
};
|
|
864
|
+
currentFixed?: "left" | "right";
|
|
865
|
+
onSelect: (direction: "left" | "right" | "none") => void;
|
|
866
|
+
onClose: () => void;
|
|
867
|
+
}
|
|
868
|
+
interface ListTableDangerConfirmRequest {
|
|
869
|
+
anchorRect: {
|
|
870
|
+
x: number;
|
|
871
|
+
y: number;
|
|
872
|
+
width: number;
|
|
873
|
+
height: number;
|
|
874
|
+
};
|
|
875
|
+
title: string;
|
|
876
|
+
description?: string;
|
|
877
|
+
okText?: string;
|
|
878
|
+
cancelText?: string;
|
|
879
|
+
onConfirm: () => void;
|
|
880
|
+
onCancel: () => void;
|
|
881
|
+
}
|
|
882
|
+
interface HeaderContextMenuColumnItem {
|
|
883
|
+
key: string;
|
|
884
|
+
title: string;
|
|
885
|
+
checked: boolean;
|
|
886
|
+
indeterminate?: boolean;
|
|
887
|
+
disabled?: boolean;
|
|
888
|
+
children?: HeaderContextMenuColumnItem[];
|
|
889
|
+
}
|
|
890
|
+
type HeaderContextMenuDensity = "comfortable" | "middle" | "compact";
|
|
891
|
+
interface HeaderContextMenuConfig {
|
|
892
|
+
x: number;
|
|
893
|
+
y: number;
|
|
894
|
+
columns?: HeaderContextMenuColumnItem[];
|
|
895
|
+
density?: HeaderContextMenuDensity;
|
|
896
|
+
/**
|
|
897
|
+
* 当前表格缩放比例(1 = 100%)。
|
|
898
|
+
*/
|
|
899
|
+
zoom?: number;
|
|
900
|
+
onCopyCell?: () => void;
|
|
901
|
+
onCopyColumn?: () => void;
|
|
902
|
+
onCopyRowText?: () => void;
|
|
903
|
+
onCopyRowJson?: () => void;
|
|
904
|
+
onCopySelection?: () => void;
|
|
905
|
+
customSelection?: {
|
|
906
|
+
startRow: number;
|
|
907
|
+
startColumn: number;
|
|
908
|
+
endRow: number;
|
|
909
|
+
endColumn: number;
|
|
910
|
+
rowCount: number;
|
|
911
|
+
columnCount: number;
|
|
912
|
+
};
|
|
913
|
+
onCopyCustomSelection?: (range: {
|
|
914
|
+
startRow: number;
|
|
915
|
+
startColumn: number;
|
|
916
|
+
endRow: number;
|
|
917
|
+
endColumn: number;
|
|
918
|
+
}) => void;
|
|
919
|
+
onExportJson?: () => void;
|
|
920
|
+
onExportCsv?: () => void;
|
|
921
|
+
onExportTxt?: () => void;
|
|
922
|
+
onExportXlsx?: () => void;
|
|
923
|
+
downloadContentLabel?: string;
|
|
924
|
+
onDownloadContent?: () => void;
|
|
925
|
+
toggleExpandRowLabel?: string;
|
|
926
|
+
onToggleExpandRow?: () => void;
|
|
927
|
+
onExpandAllCollapsedRows?: () => void;
|
|
928
|
+
toggleColumnLabel?: string;
|
|
929
|
+
onToggleCurrentColumn?: () => void;
|
|
930
|
+
onExpandAllCollapsedColumns?: () => void;
|
|
931
|
+
onFreezeRowTop?: () => void;
|
|
932
|
+
onFreezeRowBottom?: () => void;
|
|
933
|
+
onUnfreezeRow?: () => void;
|
|
934
|
+
onResetFilter?: () => void;
|
|
935
|
+
onResetSort?: () => void;
|
|
936
|
+
onResetHeader?: () => void;
|
|
937
|
+
onChangeDensity?: (density: HeaderContextMenuDensity) => void;
|
|
938
|
+
/**
|
|
939
|
+
* 调整表格缩放。
|
|
940
|
+
*/
|
|
941
|
+
onChangeZoom?: (zoom: number) => void;
|
|
942
|
+
onToggleColumn?: (columnKey: string, visible: boolean) => void;
|
|
943
|
+
summaryVisible?: boolean;
|
|
944
|
+
summaryColumnKey?: string;
|
|
945
|
+
summaryType?: ListTableSummaryType;
|
|
946
|
+
summaryPrecision?: number;
|
|
947
|
+
onToggleSummary?: () => void;
|
|
948
|
+
onChangeSummaryType?: (type: ListTableSummaryType) => void;
|
|
949
|
+
onChangeSummaryPrecision?: (precision: number | undefined) => void;
|
|
950
|
+
onClose: () => void;
|
|
951
|
+
}
|
|
952
|
+
interface PaginationConfig {
|
|
953
|
+
mode?: "button" | "scroll";
|
|
954
|
+
current: number;
|
|
955
|
+
total: number;
|
|
956
|
+
pageSize?: number;
|
|
957
|
+
pageSizeOptions?: number[];
|
|
958
|
+
disabled?: boolean;
|
|
959
|
+
showSizeChanger?: boolean;
|
|
960
|
+
showQuickJumper?: boolean;
|
|
961
|
+
showLessItems?: boolean;
|
|
962
|
+
simple?: boolean;
|
|
963
|
+
showTotal?: (total: number, range: [number, number]) => string;
|
|
964
|
+
onChange?: (page: number, pageSize: number) => void;
|
|
965
|
+
onPageSizeChange?: (page: number, pageSize: number) => void;
|
|
966
|
+
}
|
|
967
|
+
type ListTableEditorValueType = "text" | "number" | "input-range" | "year" | "quarter" | "month" | "time" | "datetime" | "timerange" | "date" | "date-range" | "datetime-range" | "color" | "select" | "auto-complete";
|
|
968
|
+
interface ListTableEditorOption {
|
|
969
|
+
label: string;
|
|
970
|
+
value: string | number;
|
|
971
|
+
}
|
|
972
|
+
type ListTableEditorFilterOption = (input: string, option: ListTableEditorOption) => boolean;
|
|
973
|
+
/**
|
|
974
|
+
* AutoComplete 可选的回车扩展回调。
|
|
975
|
+
*/
|
|
976
|
+
type ListTableEditorAutoCompleteEnter = (input: string) => ListTableEditorOption[] | void | Promise<ListTableEditorOption[] | void>;
|
|
977
|
+
interface ListTableEditorConfig {
|
|
978
|
+
valueType?: ListTableEditorValueType;
|
|
979
|
+
format?: ListTableFormItemFormatter<any>;
|
|
980
|
+
placeholder?: string;
|
|
981
|
+
min?: number | string;
|
|
982
|
+
max?: number | string;
|
|
983
|
+
step?: number | string;
|
|
984
|
+
options?: ListTableEditorOption[];
|
|
985
|
+
showSearch?: boolean;
|
|
986
|
+
filterOption?: ListTableEditorFilterOption;
|
|
987
|
+
onPressEnter?: ListTableEditorAutoCompleteEnter;
|
|
988
|
+
rangeSeparator?: string;
|
|
989
|
+
}
|
|
990
|
+
interface ListTableEditorRect {
|
|
991
|
+
x: number;
|
|
992
|
+
y: number;
|
|
993
|
+
width: number;
|
|
994
|
+
height: number;
|
|
995
|
+
}
|
|
996
|
+
interface ListTableEditorTheme {
|
|
997
|
+
fontSize: number;
|
|
998
|
+
fontFamily: string;
|
|
999
|
+
textColor: string;
|
|
1000
|
+
cellColor?: string;
|
|
1001
|
+
/**
|
|
1002
|
+
* 单元格水平内边距(已含缩放),用于编辑表单与画布内容对齐。
|
|
1003
|
+
*/
|
|
1004
|
+
paddingInline?: number;
|
|
1005
|
+
/**
|
|
1006
|
+
* 单元格垂直内边距(已含缩放),用于编辑表单与画布内容对齐。
|
|
1007
|
+
*/
|
|
1008
|
+
paddingBlock?: number;
|
|
1009
|
+
/**
|
|
1010
|
+
* 表格内容缩放(1 = 100%),用于编辑浮层 / 弹出层与画布视觉同步。
|
|
1011
|
+
*/
|
|
1012
|
+
contentZoom?: number;
|
|
1013
|
+
}
|
|
1014
|
+
interface ListTableCellEditorSession {
|
|
1015
|
+
element?: HTMLElement;
|
|
1016
|
+
focus(): void;
|
|
1017
|
+
getValue(): unknown;
|
|
1018
|
+
destroy?(): void;
|
|
1019
|
+
}
|
|
1020
|
+
/**
|
|
1021
|
+
* 编辑提交选项。
|
|
1022
|
+
*/
|
|
1023
|
+
interface ListTableEditorCommitOptions {
|
|
1024
|
+
/** 提交后是否把键盘焦点交还给表格。 */
|
|
1025
|
+
restoreTableFocus?: boolean;
|
|
1026
|
+
}
|
|
1027
|
+
interface ListTableTooltipAdapter {
|
|
1028
|
+
mount(parent?: HTMLElement): void;
|
|
1029
|
+
show(x: number, y: number, content: string, variant?: ListTableTooltipRequest["variant"]): void;
|
|
1030
|
+
hide(): void;
|
|
1031
|
+
destroy(): void;
|
|
1032
|
+
}
|
|
1033
|
+
interface ListTableLoadingAdapter {
|
|
1034
|
+
show(request?: ListTableLoadingRequest): void;
|
|
1035
|
+
hide(): void;
|
|
1036
|
+
}
|
|
1037
|
+
interface ListTableFilterPanelAdapter {
|
|
1038
|
+
mount(parent?: HTMLElement): void;
|
|
1039
|
+
show(config: FilterPanelConfig): void;
|
|
1040
|
+
hide(): void;
|
|
1041
|
+
isVisible(): boolean;
|
|
1042
|
+
destroy(): void;
|
|
1043
|
+
}
|
|
1044
|
+
interface ListTableFixedPopupAdapter {
|
|
1045
|
+
mount(parent?: HTMLElement): void;
|
|
1046
|
+
show(config: FixedPopupConfig): void;
|
|
1047
|
+
hide(): void;
|
|
1048
|
+
isVisible(): boolean;
|
|
1049
|
+
destroy(): void;
|
|
1050
|
+
}
|
|
1051
|
+
interface ListTableHeaderContextMenuAdapter {
|
|
1052
|
+
mount(parent?: HTMLElement): void;
|
|
1053
|
+
show(config: HeaderContextMenuConfig): void;
|
|
1054
|
+
hide(): void;
|
|
1055
|
+
isVisible(): boolean;
|
|
1056
|
+
updateColumns(columns: HeaderContextMenuColumnItem[]): void;
|
|
1057
|
+
destroy(): void;
|
|
1058
|
+
}
|
|
1059
|
+
interface ListTablePaginationAdapter {
|
|
1060
|
+
mount(parent: HTMLElement, config: PaginationConfig): void;
|
|
1061
|
+
update(config: PaginationConfig): void;
|
|
1062
|
+
destroy(): void;
|
|
1063
|
+
}
|
|
1064
|
+
interface CreateCellEditorSessionParams {
|
|
1065
|
+
rect: ListTableEditorRect;
|
|
1066
|
+
clipRect?: ListTableEditorRect;
|
|
1067
|
+
hostRect?: ListTableEditorRect;
|
|
1068
|
+
hostElement?: HTMLElement;
|
|
1069
|
+
value: unknown;
|
|
1070
|
+
config: ListTableEditorConfig;
|
|
1071
|
+
theme: ListTableEditorTheme;
|
|
1072
|
+
onCommit: (options?: ListTableEditorCommitOptions) => void;
|
|
1073
|
+
onCancel: () => void;
|
|
1074
|
+
onNavigate?: (direction: ListTableEditorNavigateDirection) => void;
|
|
1075
|
+
}
|
|
1076
|
+
type ListTableEditorNavigateDirection = "up" | "down" | "prev" | "next";
|
|
1077
|
+
interface ListTableEditorRequest {
|
|
1078
|
+
/** 当前编辑单元格标识,用于切换单元格时重置编辑器状态。 */
|
|
1079
|
+
editorKey?: string;
|
|
1080
|
+
rect: ListTableEditorRect;
|
|
1081
|
+
clipRect?: ListTableEditorRect;
|
|
1082
|
+
hostRect?: ListTableEditorRect;
|
|
1083
|
+
hostElement?: HTMLElement;
|
|
1084
|
+
value: unknown;
|
|
1085
|
+
config: ListTableEditorConfig;
|
|
1086
|
+
theme: ListTableEditorTheme;
|
|
1087
|
+
onChange: (value: unknown) => void;
|
|
1088
|
+
onCommit: (options?: ListTableEditorCommitOptions) => void;
|
|
1089
|
+
onCancel: () => void;
|
|
1090
|
+
onNavigate?: (direction: ListTableEditorNavigateDirection) => void;
|
|
1091
|
+
}
|
|
1092
|
+
interface ListTableEditorFactory {
|
|
1093
|
+
createCellEditorSession(params: CreateCellEditorSessionParams): ListTableCellEditorSession | null;
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
/**
|
|
1097
|
+
* 行拖拽可放置区域。
|
|
1098
|
+
*/
|
|
1099
|
+
type ListTableRowDragZone = "body" | "summary";
|
|
1100
|
+
/**
|
|
1101
|
+
* 行拖拽成功放置后的源数据处理模式。
|
|
1102
|
+
*/
|
|
1103
|
+
type ListTableRowDragMode = "copy" | "move";
|
|
1104
|
+
/**
|
|
1105
|
+
* 拖出来源信息。
|
|
1106
|
+
*/
|
|
1107
|
+
interface ListTableRowDragSourceInfo {
|
|
1108
|
+
tableId: string;
|
|
1109
|
+
payloadType: string;
|
|
1110
|
+
}
|
|
1111
|
+
/**
|
|
1112
|
+
* 跨表行拖拽载荷。
|
|
1113
|
+
*/
|
|
1114
|
+
interface ListTableRowDragPayload {
|
|
1115
|
+
version: 1;
|
|
1116
|
+
type: string;
|
|
1117
|
+
source: ListTableRowDragSourceInfo;
|
|
1118
|
+
rowKeys: Array<string | number>;
|
|
1119
|
+
records: unknown[];
|
|
1120
|
+
columns: Array<{
|
|
1121
|
+
key: string;
|
|
1122
|
+
dataIndex?: string | number | Array<string | number>;
|
|
1123
|
+
title?: string;
|
|
1124
|
+
}>;
|
|
1125
|
+
previewDataUrl?: string;
|
|
1126
|
+
}
|
|
1127
|
+
/**
|
|
1128
|
+
* 行拖拽配置。
|
|
1129
|
+
*
|
|
1130
|
+
* 同一张表同时设置 `enabled`、`droppable` 和 `allowSelfDrop` 后,可在
|
|
1131
|
+
* `onDrop` 中根据 `insertIndex` 更新数据顺序。两张表分别同时设置
|
|
1132
|
+
* `enabled` 和 `droppable`,并互相接受对方的 `payloadType`,即可双向拖放。
|
|
1133
|
+
* 表格只负责交互与回调,不会直接修改业务数据。
|
|
1134
|
+
*/
|
|
1135
|
+
interface ListTableRowDragOptions<RecordType> {
|
|
1136
|
+
/**
|
|
1137
|
+
* 是否允许从本表发起行拖拽。
|
|
1138
|
+
* 双向拖放时,两张表都需要启用该项。
|
|
1139
|
+
* @default false
|
|
1140
|
+
*/
|
|
1141
|
+
enabled?: boolean;
|
|
1142
|
+
/**
|
|
1143
|
+
* 是否允许本表作为行放置目标。
|
|
1144
|
+
* 同表排序和双向拖放时,参与接收的表都需要启用该项。
|
|
1145
|
+
* @default false
|
|
1146
|
+
*/
|
|
1147
|
+
droppable?: boolean;
|
|
1148
|
+
/**
|
|
1149
|
+
* 可接受的放置区域。
|
|
1150
|
+
* @default ["body"]
|
|
1151
|
+
*/
|
|
1152
|
+
acceptZones?: ListTableRowDragZone[];
|
|
1153
|
+
/**
|
|
1154
|
+
* 拖出模式:`copy` 保留源行;`move` 在目标表成功执行 `onDrop` 后,
|
|
1155
|
+
* 通过源表的 `onDragEndRemove` 通知业务移除源行。
|
|
1156
|
+
* 该配置属于拖拽来源表,不会自动修改任何一张表的数据。
|
|
1157
|
+
* @default "copy"
|
|
1158
|
+
*/
|
|
1159
|
+
mode?: ListTableRowDragMode;
|
|
1160
|
+
/**
|
|
1161
|
+
* 本表发起拖拽时写入载荷的类型。
|
|
1162
|
+
* 异构表双向拖放时,每张表可声明各自的类型。
|
|
1163
|
+
* @default "list-table/row"
|
|
1164
|
+
*/
|
|
1165
|
+
payloadType?: string;
|
|
1166
|
+
/**
|
|
1167
|
+
* 本表作为目标时接受的载荷类型列表。
|
|
1168
|
+
* 异构表双向拖放时,应包含另一张表的 `payloadType`;同构表使用相同
|
|
1169
|
+
* `payloadType` 时通常无需显式设置。
|
|
1170
|
+
* @default [当前表的 payloadType]
|
|
1171
|
+
*/
|
|
1172
|
+
acceptTypes?: string[];
|
|
1173
|
+
/**
|
|
1174
|
+
* 是否接受来源也是当前表的载荷。
|
|
1175
|
+
* 该项只开放同表放置能力;数据重排仍需由 `onDrop` 根据 `insertIndex`
|
|
1176
|
+
* 完成。
|
|
1177
|
+
* @default false
|
|
1178
|
+
*/
|
|
1179
|
+
allowSelfDrop?: boolean;
|
|
1180
|
+
/**
|
|
1181
|
+
* 启动拖拽的像素阈值。
|
|
1182
|
+
* @default 5
|
|
1183
|
+
*/
|
|
1184
|
+
dragThreshold?: number;
|
|
1185
|
+
/** 判断指定行是否允许拖出。 */
|
|
1186
|
+
canDragRow?: (params: {
|
|
1187
|
+
record: RecordType;
|
|
1188
|
+
rowIndex: number;
|
|
1189
|
+
}) => boolean;
|
|
1190
|
+
/**
|
|
1191
|
+
* 判断本表是否接受当前载荷与插入位置。
|
|
1192
|
+
* 同表拖拽时可通过 `payload.source.tableId` 与当前表 `tableId` 比较来源。
|
|
1193
|
+
*/
|
|
1194
|
+
canDrop?: (params: {
|
|
1195
|
+
payload: ListTableRowDragPayload;
|
|
1196
|
+
zone: ListTableRowDragZone;
|
|
1197
|
+
/** `body` 区域内相对目标展示数据的插入索引,其他区域为 `null`。 */
|
|
1198
|
+
insertIndex: number | null;
|
|
1199
|
+
}) => boolean;
|
|
1200
|
+
/**
|
|
1201
|
+
* 将来源表行数据转换为当前目标表的数据结构。
|
|
1202
|
+
* 双向拖放且两侧数据结构不同时,两张表需要分别提供反方向转换。
|
|
1203
|
+
*/
|
|
1204
|
+
transform?: (payload: ListTableRowDragPayload) => RecordType[] | Promise<RecordType[]>;
|
|
1205
|
+
/**
|
|
1206
|
+
* 成功放入当前目标表后的业务处理。
|
|
1207
|
+
* 跨表插入和同表排序都由业务在此更新数据源;表格不会自动插入或重排。
|
|
1208
|
+
*/
|
|
1209
|
+
onDrop?: (params: {
|
|
1210
|
+
rows: RecordType[];
|
|
1211
|
+
zone: ListTableRowDragZone;
|
|
1212
|
+
/** `body` 区域内相对目标展示数据的插入索引,其他区域为 `null`。 */
|
|
1213
|
+
insertIndex: number | null;
|
|
1214
|
+
source: ListTableRowDragSourceInfo;
|
|
1215
|
+
nativeEvent: MouseEvent;
|
|
1216
|
+
}) => void | Promise<void>;
|
|
1217
|
+
/**
|
|
1218
|
+
* `move` 模式下目标表成功接受放置后,通知来源表业务移除原始行。
|
|
1219
|
+
* 同表放置由 `onDrop` 直接完成重排,不会调用该回调。
|
|
1220
|
+
*/
|
|
1221
|
+
onDragEndRemove?: (params: {
|
|
1222
|
+
keys: Array<string | number>;
|
|
1223
|
+
records: unknown[];
|
|
1224
|
+
}) => void | Promise<void>;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
/**
|
|
1228
|
+
* 表格点击高亮模式。
|
|
1229
|
+
* - `cell`: 仅高亮当前单元格
|
|
1230
|
+
* - `row`: 仅高亮当前行
|
|
1231
|
+
* - `column`: 仅高亮当前列
|
|
1232
|
+
* - `cross`: 同时高亮当前行与列(交叉高亮)
|
|
1233
|
+
*/
|
|
1234
|
+
type ListTableHighlightMode = "cell" | "row" | "column" | "cross";
|
|
1235
|
+
/**
|
|
1236
|
+
* 右键菜单功能项。
|
|
1237
|
+
*/
|
|
1238
|
+
type ListTableContextMenuFeature = "copy" | "export" | "downloadContent" | "rowCollapse" | "columnCollapse" | "freeze" | "reset" | "density" | "zoom" | "columnVisibility";
|
|
1239
|
+
/**
|
|
1240
|
+
* 右键菜单配置。
|
|
1241
|
+
*/
|
|
1242
|
+
interface ListTableContextMenuOptions {
|
|
1243
|
+
/**
|
|
1244
|
+
* 启用的功能列表。
|
|
1245
|
+
* 不传时默认启用全部功能。
|
|
1246
|
+
*/
|
|
1247
|
+
features?: ListTableContextMenuFeature[];
|
|
1248
|
+
/**
|
|
1249
|
+
* 禁用的功能列表,会从默认功能或 `features` 中排除。
|
|
1250
|
+
*/
|
|
1251
|
+
disabledFeatures?: ListTableContextMenuFeature[];
|
|
1252
|
+
}
|
|
1253
|
+
/**
|
|
1254
|
+
* 画布滚动条配置。
|
|
1255
|
+
*/
|
|
1256
|
+
interface ListTableScrollbarOptions {
|
|
1257
|
+
thickness?: number;
|
|
1258
|
+
horizontalLeft?: number;
|
|
1259
|
+
horizontalRight?: number;
|
|
1260
|
+
horizontalBottom?: number;
|
|
1261
|
+
verticalTop?: number;
|
|
1262
|
+
verticalRight?: number;
|
|
1263
|
+
verticalBottom?: number;
|
|
1264
|
+
/**
|
|
1265
|
+
* 滚动条可见性。
|
|
1266
|
+
* - `true`: 始终显示
|
|
1267
|
+
* - `false`: 始终隐藏
|
|
1268
|
+
* - `undefined`: 自动模式(滚动/悬停时显示,随后自动隐藏)
|
|
1269
|
+
*/
|
|
1270
|
+
visible?: boolean;
|
|
1271
|
+
}
|
|
1272
|
+
/**
|
|
1273
|
+
* 轮播滚动配置。
|
|
1274
|
+
*/
|
|
1275
|
+
interface ListTableCarouselScrollOptions {
|
|
1276
|
+
/**
|
|
1277
|
+
* 轮播滚动方向。
|
|
1278
|
+
*
|
|
1279
|
+
* - `vertical`: 纵向轮播滚动,每次按行步进。
|
|
1280
|
+
* - `horizontal`: 横向轮播滚动,每次按列步进。
|
|
1281
|
+
*
|
|
1282
|
+
* @default "vertical"
|
|
1283
|
+
*/
|
|
1284
|
+
direction?: "vertical" | "horizontal";
|
|
1285
|
+
/**
|
|
1286
|
+
* 轮播滚动间隔,单位毫秒。
|
|
1287
|
+
*
|
|
1288
|
+
* @default 2000
|
|
1289
|
+
*/
|
|
1290
|
+
interval?: number;
|
|
1291
|
+
/**
|
|
1292
|
+
* 单次滚动步进单位。
|
|
1293
|
+
*
|
|
1294
|
+
* - `row`: 每次滚动一行。
|
|
1295
|
+
* - `column`: 每次滚动一列。
|
|
1296
|
+
*
|
|
1297
|
+
* 未传时会根据 `direction` 自动推断:
|
|
1298
|
+
* - `vertical` => `row`
|
|
1299
|
+
* - `horizontal` => `column`
|
|
1300
|
+
*/
|
|
1301
|
+
step?: "row" | "column";
|
|
1302
|
+
/**
|
|
1303
|
+
* 到达边界后是否循环滚动。
|
|
1304
|
+
*
|
|
1305
|
+
* - `true`: 到达底部或最右侧后,回到起点继续轮播。
|
|
1306
|
+
* - `false`: 到达底部或最右侧后,停留在边界位置并停止轮播。
|
|
1307
|
+
*
|
|
1308
|
+
* @default true
|
|
1309
|
+
*/
|
|
1310
|
+
loop?: boolean;
|
|
1311
|
+
}
|
|
1312
|
+
/**
|
|
1313
|
+
* 自动合并配置。
|
|
1314
|
+
*/
|
|
1315
|
+
interface ListTableAutoMergeRule {
|
|
1316
|
+
/**
|
|
1317
|
+
* 参与自动合并判定的字段路径。
|
|
1318
|
+
*
|
|
1319
|
+
* - 行合并:连续记录在这些字段上的值都相同时,视为同一分组。
|
|
1320
|
+
* - 列合并:同一行中这些字段对应的相邻列值相同时,会自动向右合并。
|
|
1321
|
+
*/
|
|
1322
|
+
keys: TableColumnDataIndex[];
|
|
1323
|
+
/**
|
|
1324
|
+
* 需要真正执行合并的列。
|
|
1325
|
+
*
|
|
1326
|
+
* - 行合并:指定哪些列要显示成合并后的单元格。
|
|
1327
|
+
* - 未传时默认回退为 `keys`,兼容旧配置。
|
|
1328
|
+
*/
|
|
1329
|
+
columns?: TableColumnDataIndex[];
|
|
1330
|
+
}
|
|
1331
|
+
/**
|
|
1332
|
+
* 查询区中的合并单元格配置。
|
|
1333
|
+
*/
|
|
1334
|
+
interface ListTableMergeCellOptions {
|
|
1335
|
+
/**
|
|
1336
|
+
* 自动合并行配置。
|
|
1337
|
+
*/
|
|
1338
|
+
row?: ListTableAutoMergeRule;
|
|
1339
|
+
/**
|
|
1340
|
+
* 自动合并列配置。
|
|
1341
|
+
*/
|
|
1342
|
+
column?: ListTableAutoMergeRule;
|
|
1343
|
+
}
|
|
1344
|
+
/**
|
|
1345
|
+
* 查询配置。
|
|
1346
|
+
*/
|
|
1347
|
+
type ListTableQueryPagination = false | {
|
|
1348
|
+
current: number;
|
|
1349
|
+
pageSize: number;
|
|
1350
|
+
total: number;
|
|
1351
|
+
};
|
|
1352
|
+
/**
|
|
1353
|
+
* AntD 风格的过滤结果。
|
|
1354
|
+
*/
|
|
1355
|
+
type ListTableQueryFilters = Record<string, string[] | null>;
|
|
1356
|
+
/**
|
|
1357
|
+
* AntD 风格的排序结果。
|
|
1358
|
+
*/
|
|
1359
|
+
interface ListTableQuerySorter {
|
|
1360
|
+
columnKey: string | null;
|
|
1361
|
+
field?: TableColumnDataIndex;
|
|
1362
|
+
order: ListTableSortState["order"];
|
|
1363
|
+
}
|
|
1364
|
+
/**
|
|
1365
|
+
* 分页配置。
|
|
1366
|
+
*/
|
|
1367
|
+
interface ListTablePaginationOptions {
|
|
1368
|
+
/**
|
|
1369
|
+
* 分页模式。
|
|
1370
|
+
*
|
|
1371
|
+
* - `button`: 底部按钮分页,行为与 AntD Table 类似。
|
|
1372
|
+
* - `scroll`: 滚动加载,滚动到底部时自动追加下一批数据,不渲染分页组件。
|
|
1373
|
+
*/
|
|
1374
|
+
mode?: "button" | "scroll";
|
|
1375
|
+
current?: number;
|
|
1376
|
+
pageSize?: number;
|
|
1377
|
+
total?: number;
|
|
1378
|
+
pageSizeOptions?: number[];
|
|
1379
|
+
disabled?: boolean;
|
|
1380
|
+
showSizeChanger?: boolean;
|
|
1381
|
+
showQuickJumper?: boolean;
|
|
1382
|
+
showLessItems?: boolean;
|
|
1383
|
+
simple?: boolean;
|
|
1384
|
+
showTotal?: (total: number, range: [number, number]) => string;
|
|
1385
|
+
onChange?: (page: number, pageSize: number) => void;
|
|
1386
|
+
onShowSizeChange?: (page: number, pageSize: number) => void;
|
|
1387
|
+
}
|
|
1388
|
+
interface ListTableRowSelectionRecordProps {
|
|
1389
|
+
disabled?: boolean;
|
|
1390
|
+
}
|
|
1391
|
+
/**
|
|
1392
|
+
* 行选择变更信息。
|
|
1393
|
+
*/
|
|
1394
|
+
interface ListTableRowSelectionChangeInfo {
|
|
1395
|
+
type: "single" | "all" | "invert" | "none" | "multiple";
|
|
1396
|
+
}
|
|
1397
|
+
/**
|
|
1398
|
+
* 行选择配置。
|
|
1399
|
+
*/
|
|
1400
|
+
interface ListTableRowSelectionOptions<RecordType> {
|
|
1401
|
+
type?: "checkbox" | "radio";
|
|
1402
|
+
selectedRowKeys?: Array<string | number>;
|
|
1403
|
+
defaultSelectedRowKeys?: Array<string | number>;
|
|
1404
|
+
fixed?: "left" | "right";
|
|
1405
|
+
columnWidth?: number;
|
|
1406
|
+
align?: "left" | "center" | "right";
|
|
1407
|
+
onChange?: (selectedRowKeys: Array<string | number>, selectedRows: RecordType[], info: ListTableRowSelectionChangeInfo) => void;
|
|
1408
|
+
onSelect?: (record: RecordType, selected: boolean, selectedRows: RecordType[]) => void;
|
|
1409
|
+
getCheckboxProps?: (record: RecordType) => ListTableRowSelectionRecordProps;
|
|
1410
|
+
}
|
|
1411
|
+
/**
|
|
1412
|
+
* AntD 风格的四参数查询回调。
|
|
1413
|
+
*/
|
|
1414
|
+
type ListTableQueryChange<RecordType> = (pagination: ListTableQueryPagination, filters: ListTableQueryFilters, sorter: ListTableQuerySorter, extra: ListTableQueryChangeExtra<RecordType>) => void;
|
|
1415
|
+
interface ListTableQueryOptions<RecordType> {
|
|
1416
|
+
enabled?: boolean;
|
|
1417
|
+
mode?: "local" | "remote";
|
|
1418
|
+
dataSource?: RecordType[];
|
|
1419
|
+
optionThreshold?: number;
|
|
1420
|
+
/**
|
|
1421
|
+
* 点击过滤候选项后是否立即应用过滤,并保持过滤面板打开。
|
|
1422
|
+
*
|
|
1423
|
+
* @default false
|
|
1424
|
+
*/
|
|
1425
|
+
filterOptionImmediateApply?: boolean;
|
|
1426
|
+
mergeCell?: ListTableMergeCellOptions;
|
|
1427
|
+
onChange?: ListTableQueryChange<RecordType>;
|
|
1428
|
+
}
|
|
1429
|
+
/**
|
|
1430
|
+
* 可展开行配置。
|
|
1431
|
+
*/
|
|
1432
|
+
interface ListTableExpandableOptions<RecordType = Record<string, unknown>> {
|
|
1433
|
+
childrenColumnName?: string;
|
|
1434
|
+
defaultExpandedRowKeys?: Array<string | number>;
|
|
1435
|
+
expandedRowKeys?: Array<string | number>;
|
|
1436
|
+
onExpand?: (expanded: boolean, record: RecordType) => void;
|
|
1437
|
+
onExpandedRowsChange?: (expandedRowKeys: Array<string | number>) => void;
|
|
1438
|
+
rowExpandable?: (record: RecordType) => boolean;
|
|
1439
|
+
expandedRowRender?: (record: RecordType, index: number) => ListTableRenderResult<RecordType> | ListTableRenderResult<RecordType>[];
|
|
1440
|
+
expandedRowHeight?: number | ((record: RecordType, index: number) => number);
|
|
1441
|
+
indentSize?: number;
|
|
1442
|
+
showExpandIcon?: boolean;
|
|
1443
|
+
showExpandColumn?: boolean;
|
|
1444
|
+
columnWidth?: number;
|
|
1445
|
+
fixed?: "left" | "right";
|
|
1446
|
+
expandRowByClick?: boolean;
|
|
1447
|
+
}
|
|
1448
|
+
/**
|
|
1449
|
+
* UI 适配层配置。
|
|
1450
|
+
*/
|
|
1451
|
+
interface ListTableUiOptions {
|
|
1452
|
+
editorFactory?: ListTableEditorFactory;
|
|
1453
|
+
paginationAdapter?: ListTablePaginationAdapter;
|
|
1454
|
+
onEditorRequest?: (request: ListTableEditorRequest | null) => void;
|
|
1455
|
+
onPaginationRender?: (config: PaginationConfig | null) => void;
|
|
1456
|
+
onTooltipRequest?: (request: ListTableTooltipRequest | null) => void;
|
|
1457
|
+
onLoadingRequest?: (request: ListTableLoadingRequest | null) => void;
|
|
1458
|
+
onFilterPanelRequest?: (request: FilterPanelConfig | null) => void;
|
|
1459
|
+
onFixedPopupRequest?: (request: FixedPopupConfig | null) => void;
|
|
1460
|
+
onHeaderContextMenuRequest?: (request: HeaderContextMenuConfig | null) => void;
|
|
1461
|
+
onImagePreviewRequest?: (request: ListTableImagePreviewRequest | null) => void;
|
|
1462
|
+
onDangerConfirmRequest?: (request: ListTableDangerConfirmRequest | null) => void;
|
|
1463
|
+
}
|
|
1464
|
+
interface ListTableImagePreviewRequest {
|
|
1465
|
+
src: string;
|
|
1466
|
+
alt?: string;
|
|
1467
|
+
onClose: () => void;
|
|
1468
|
+
}
|
|
1469
|
+
/**
|
|
1470
|
+
* 表格配置。
|
|
1471
|
+
*/
|
|
1472
|
+
interface ListTableOptions<RecordType = Record<string, unknown>> {
|
|
1473
|
+
type?: "list";
|
|
1474
|
+
rowKey?: TableColumnDataIndex | ((record: RecordType, index: number) => string | number);
|
|
1475
|
+
/**
|
|
1476
|
+
* 表格宽度。未传时默认占满宿主容器宽度。
|
|
1477
|
+
*/
|
|
1478
|
+
width?: number | string;
|
|
1479
|
+
/**
|
|
1480
|
+
* 表格高度。未传时默认占满宿主容器高度。
|
|
1481
|
+
* 当表格内容高度小于可用容器高度时,宿主会自动收缩到内容高度。
|
|
1482
|
+
*/
|
|
1483
|
+
height?: number | string;
|
|
1484
|
+
columns: ListTableColumn<RecordType>[];
|
|
1485
|
+
dataSource: RecordType[];
|
|
1486
|
+
emptyText?: string;
|
|
1487
|
+
theme?: Partial<ListTableTheme>;
|
|
1488
|
+
/**
|
|
1489
|
+
* 是否开启斑马条纹。
|
|
1490
|
+
* @default false
|
|
1491
|
+
*/
|
|
1492
|
+
striped?: boolean;
|
|
1493
|
+
/**
|
|
1494
|
+
* 点击高亮模式。
|
|
1495
|
+
* - `cell`: 仅高亮当前单元格
|
|
1496
|
+
* - `row`: 仅高亮当前行(默认)
|
|
1497
|
+
* - `column`: 仅高亮当前列
|
|
1498
|
+
* - `cross`: 同时高亮当前行与列(交叉高亮)
|
|
1499
|
+
* @default "row"
|
|
1500
|
+
*/
|
|
1501
|
+
highlightMode?: ListTableHighlightMode;
|
|
1502
|
+
/**
|
|
1503
|
+
* 数据行高度。
|
|
1504
|
+
*
|
|
1505
|
+
* - 传入数字时使用固定高度
|
|
1506
|
+
* - 默认 `auto`,会按当前列宽和单元格内容自动计算
|
|
1507
|
+
* - 自动计算结果最小不低于 `40px`
|
|
1508
|
+
*
|
|
1509
|
+
* @default "auto"
|
|
1510
|
+
*/
|
|
1511
|
+
rowHeight?: number | "auto";
|
|
1512
|
+
headerRowHeight?: number;
|
|
1513
|
+
/** 汇总行高度。 */
|
|
1514
|
+
summaryRowHeight?: number;
|
|
1515
|
+
overscanRowCount?: number;
|
|
1516
|
+
query?: ListTableQueryOptions<RecordType>;
|
|
1517
|
+
rowSelection?: ListTableRowSelectionOptions<RecordType>;
|
|
1518
|
+
expandable?: ListTableExpandableOptions<RecordType>;
|
|
1519
|
+
pagination?: false | ListTablePaginationOptions;
|
|
1520
|
+
scrollbar?: ListTableScrollbarOptions;
|
|
1521
|
+
carouselScroll?: ListTableCarouselScrollOptions;
|
|
1522
|
+
/**
|
|
1523
|
+
* 列宽不足容器宽度时,是否自动均分剩余空间。
|
|
1524
|
+
* @default true
|
|
1525
|
+
*/
|
|
1526
|
+
stretchColumns?: boolean;
|
|
1527
|
+
/**
|
|
1528
|
+
* 是否允许拖拽改变列宽。
|
|
1529
|
+
* @default false
|
|
1530
|
+
*/
|
|
1531
|
+
resizable?: boolean;
|
|
1532
|
+
/**
|
|
1533
|
+
* 列配置持久化存储键。设置后列宽、固定、排序、过滤、缩放状态会自动保存到 IndexDB。
|
|
1534
|
+
*/
|
|
1535
|
+
storageKey?: string;
|
|
1536
|
+
draggable?: boolean;
|
|
1537
|
+
/**
|
|
1538
|
+
* 跨表拖拽时的表格实例标识。不传则运行时自动生成。
|
|
1539
|
+
*/
|
|
1540
|
+
tableId?: string;
|
|
1541
|
+
/**
|
|
1542
|
+
* 行拖拽配置,支持同表排序、跨表拖放以及两张表互相拖放。
|
|
1543
|
+
*/
|
|
1544
|
+
rowDrag?: ListTableRowDragOptions<RecordType>;
|
|
1545
|
+
/**
|
|
1546
|
+
* 右键菜单配置。
|
|
1547
|
+
* - 不传:启用全部默认功能
|
|
1548
|
+
* - `false`:禁用右键菜单
|
|
1549
|
+
* - 对象:按功能开关裁剪菜单项
|
|
1550
|
+
*/
|
|
1551
|
+
contextMenu?: false | ListTableContextMenuOptions;
|
|
1552
|
+
debug?: ListTableDebugOptions;
|
|
1553
|
+
ui?: ListTableUiOptions;
|
|
1554
|
+
}
|
|
1555
|
+
|
|
1556
|
+
/**
|
|
1557
|
+
* 表格实例滚动参数。
|
|
1558
|
+
*/
|
|
1559
|
+
interface ListTableScrollToOptions {
|
|
1560
|
+
rowIndex?: number;
|
|
1561
|
+
colIndex?: number;
|
|
1562
|
+
behavior?: "auto" | "smooth";
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
/**
|
|
1566
|
+
* ListTable 原生入口。
|
|
1567
|
+
*/
|
|
1568
|
+
declare class ListTable<RecordType = Record<string, unknown>> {
|
|
1569
|
+
private readonly container;
|
|
1570
|
+
private options;
|
|
1571
|
+
private core;
|
|
1572
|
+
/**
|
|
1573
|
+
* 创建表格实例。
|
|
1574
|
+
*
|
|
1575
|
+
* @param container 宿主容器。
|
|
1576
|
+
* @param options 初始化参数。
|
|
1577
|
+
*/
|
|
1578
|
+
constructor(container: HTMLElement, options: ListTableOptions<RecordType>);
|
|
1579
|
+
/**
|
|
1580
|
+
* 挂载表格。
|
|
1581
|
+
*/
|
|
1582
|
+
mount(): void;
|
|
1583
|
+
/**
|
|
1584
|
+
* 更新配置。
|
|
1585
|
+
*
|
|
1586
|
+
* @param options 新配置。
|
|
1587
|
+
*/
|
|
1588
|
+
updateOptions(options: ListTableOptions<RecordType>): void;
|
|
1589
|
+
/**
|
|
1590
|
+
* 获取调试快照。
|
|
1591
|
+
*
|
|
1592
|
+
* @returns 调试快照。
|
|
1593
|
+
*/
|
|
1594
|
+
getDebugSnapshot(): ListTableDebugSnapshot | null;
|
|
1595
|
+
/**
|
|
1596
|
+
* 手动触发表格校验。
|
|
1597
|
+
*
|
|
1598
|
+
* 成功时返回当前表格数据,失败时抛出校验失败结果。
|
|
1599
|
+
*/
|
|
1600
|
+
validate(): Promise<RecordType[]>;
|
|
1601
|
+
/**
|
|
1602
|
+
* 异步导出全部原始数据为 XLSX。
|
|
1603
|
+
*/
|
|
1604
|
+
exportXlsx(): void;
|
|
1605
|
+
/**
|
|
1606
|
+
* 滚动到指定行。
|
|
1607
|
+
*/
|
|
1608
|
+
scrollTo(options: ListTableScrollToOptions): void;
|
|
1609
|
+
/**
|
|
1610
|
+
* 重置排序状态。
|
|
1611
|
+
*/
|
|
1612
|
+
resetSorter(): void;
|
|
1613
|
+
/**
|
|
1614
|
+
* 重置筛选状态。
|
|
1615
|
+
*/
|
|
1616
|
+
resetFilter(): void;
|
|
1617
|
+
/**
|
|
1618
|
+
* 销毁实例。
|
|
1619
|
+
*/
|
|
1620
|
+
destroy(): void;
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1623
|
+
interface ListTableValidationError<RecordType> {
|
|
1624
|
+
rowIndex: number;
|
|
1625
|
+
rowKey: string | number;
|
|
1626
|
+
columnKey: string;
|
|
1627
|
+
dataIndex?: TableColumnDataIndex;
|
|
1628
|
+
message: string;
|
|
1629
|
+
value: unknown;
|
|
1630
|
+
record: RecordType;
|
|
1631
|
+
}
|
|
1632
|
+
interface ListTableValidationErrorField<RecordType> {
|
|
1633
|
+
rowIndex: number;
|
|
1634
|
+
rowKey: string | number;
|
|
1635
|
+
columnKey: string;
|
|
1636
|
+
dataIndex?: TableColumnDataIndex;
|
|
1637
|
+
name: Array<string | number>;
|
|
1638
|
+
errors: string[];
|
|
1639
|
+
value: unknown;
|
|
1640
|
+
record: RecordType;
|
|
1641
|
+
}
|
|
1642
|
+
interface ListTableValidationFailure<RecordType> {
|
|
1643
|
+
values: RecordType[];
|
|
1644
|
+
errorFields: ListTableValidationErrorField<RecordType>[];
|
|
1645
|
+
outOfDate: boolean;
|
|
1646
|
+
}
|
|
1647
|
+
interface ListTableValidationTarget {
|
|
1648
|
+
rowIndex: number;
|
|
1649
|
+
columnKey: string;
|
|
1650
|
+
}
|
|
1651
|
+
|
|
1652
|
+
export { type CreateCellEditorSessionParams, type DebugHitTestResult, type FilterPanelConfig, type FilterPanelOptionItem, type FilterPanelTexts, type FixedPopupConfig, type HeaderContextMenuColumnItem, type HeaderContextMenuConfig, type HeaderContextMenuDensity, ListTable, type ListTableAutoMergeRule, type ListTableBarcodeCellContent, type ListTableBarcodeFormat, type ListTableButtonCellContent, type ListTableButtonPopconfirmOptions, type ListTableButtonSize, type ListTableButtonType, type ListTableCarouselScrollOptions, type ListTableCellContent, type ListTableCellContentClickContext, type ListTableCellEditorSession, type ListTableCellSpan, type ListTableCellStyle, type ListTableChartCellContent, type ListTableChartSize, type ListTableChartType, type ListTableColorCellContent, type ListTableColumn, type ListTableContextMenuFeature, type ListTableContextMenuOptions, type ListTableCustomChartCellContent, type ListTableDangerConfirmRequest, type ListTableDebugOptions, type ListTableDebugSnapshot, type ListTableEditAutoCompleteEnter, type ListTableEditFilterOption, type ListTableEditOption, type ListTableEditValueType, type ListTableEditable, type ListTableEditorAutoCompleteEnter, type ListTableEditorConfig, type ListTableEditorFactory, type ListTableEditorFilterOption, type ListTableEditorNavigateDirection, type ListTableEditorOption, type ListTableEditorRect, type ListTableEditorRequest, type ListTableEditorTheme, type ListTableEditorValueType, type ListTableFilterConditionOperator, type ListTableFilterConditionRelation, type ListTableFilterMatchMode, type ListTableFilterOption, type ListTableFilterOptionValue, type ListTableFilterPanelAdapter, type ListTableFilterState, type ListTableFilterType, type ListTableFilterValue$1 as ListTableFilterValue, type ListTableFixedPopupAdapter, type ListTableFormItemProps, type ListTableFormItemPropsConfig, type ListTableFormRule, type ListTableFormRules, type ListTableHeaderContextMenuAdapter, type ListTableHighlightMode, type ListTableIconCellContent, type ListTableImageCellContent, type ListTableImageObjectFit, type ListTableImagePreviewRequest, type ListTableLoadingAdapter, type ListTableLoadingRequest, type ListTableMergeCellOptions, type ListTableNestedTableCellContent, type ListTableNestedTableColumn, type ListTableOptions, type ListTablePaginationAdapter, type ListTablePaginationOptions, type ListTableProgressCellContent, type ListTableProgressShape, type ListTableProgressSize, type ListTableQrCodeCellContent, type ListTableQrCodeLevel, type ListTableQueryChange, type ListTableQueryChangeExtra, type ListTableQueryFilters, type ListTableQueryOptions, type ListTableQueryPagination, type ListTableQuerySorter, type ListTableRateCellContent, type ListTableRateSize, type ListTableRowDragMode, type ListTableRowDragOptions, type ListTableRowDragPayload, type ListTableRowDragSourceInfo, type ListTableRowDragZone, type ListTableRowSelectionChangeInfo, type ListTableRowSelectionOptions, type ListTableScrollToOptions, type ListTableScrollbarOptions, type ListTableSelectionState, type ListTableSortItem, type ListTableSortState, type ListTableSparklineChartCellContent, type ListTableSparklineSize, type ListTableSymbolType, type ListTableTagCellContent, type ListTableTheme, type ListTableTooltipAdapter, type ListTableTooltipRequest, type ListTableUiOptions, type ListTableValidationError, type ListTableValidationErrorField, type ListTableValidationFailure, type ListTableValidationTarget, type PaginationConfig, type RenderCellDescriptor };
|