@next-bricks/advanced 0.51.3 → 0.51.4

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.
Files changed (61) hide show
  1. package/dist/bricks.json +22 -22
  2. package/dist/chunks/4758.703acb39.js +3 -0
  3. package/dist/chunks/4758.703acb39.js.map +1 -0
  4. package/dist/chunks/{6070.74d93326.js → 7039.0ea489d5.js} +2 -2
  5. package/dist/chunks/7039.0ea489d5.js.map +1 -0
  6. package/dist/chunks/8382.eba253d7.js +2 -0
  7. package/dist/chunks/8382.eba253d7.js.map +1 -0
  8. package/dist/chunks/eo-cascader.b5d6ee02.js +2 -0
  9. package/dist/chunks/eo-cascader.b5d6ee02.js.map +1 -0
  10. package/dist/chunks/eo-next-table.25f4bf4d.js.map +1 -1
  11. package/dist/chunks/eo-table.5dd09651.js.map +1 -1
  12. package/dist/chunks/eo-text-tooltip.74db365e.js.map +1 -1
  13. package/dist/chunks/eo-tree-select.4034b1d9.js +2 -0
  14. package/dist/chunks/eo-tree-select.4034b1d9.js.map +1 -0
  15. package/dist/chunks/eo-workbench-layout-v2.24da89e7.js.map +1 -1
  16. package/dist/chunks/eo-workbench-layout.1ed8ce80.js.map +1 -1
  17. package/dist/chunks/{main.f43a8ad8.js → main.6b40d042.js} +2 -2
  18. package/dist/chunks/{main.f43a8ad8.js.map → main.6b40d042.js.map} +1 -1
  19. package/dist/chunks/pdf-viewer.036787d7.js.map +1 -1
  20. package/dist/examples.json +17 -11
  21. package/dist/{index.3d8026b9.js → index.6f2baf4a.js} +2 -2
  22. package/dist/{index.3d8026b9.js.map → index.6f2baf4a.js.map} +1 -1
  23. package/dist/manifest.json +656 -563
  24. package/dist/types.json +234 -234
  25. package/dist-types/cascader/index.d.ts +18 -0
  26. package/dist-types/next-table/index.d.ts +2 -1
  27. package/dist-types/pdf-viewer/index.d.ts +7 -1
  28. package/dist-types/table/index.d.ts +2 -1
  29. package/dist-types/text-tooltip/index.d.ts +5 -4
  30. package/dist-types/tree-select/index.d.ts +41 -1
  31. package/dist-types/workbench-layout/index.d.ts +26 -1
  32. package/dist-types/workbench-layout-v2/index.d.ts +31 -9
  33. package/docs/eo-cascader.md +184 -1
  34. package/docs/eo-cascader.react.md +247 -0
  35. package/docs/eo-next-table.md +343 -168
  36. package/docs/eo-next-table.react.md +923 -0
  37. package/docs/eo-table.md +296 -0
  38. package/docs/eo-table.react.md +223 -0
  39. package/docs/eo-text-tooltip.md +46 -1
  40. package/docs/eo-text-tooltip.react.md +69 -0
  41. package/docs/eo-tree-select.md +127 -1
  42. package/docs/eo-tree-select.react.md +206 -0
  43. package/docs/eo-tree.md +108 -2
  44. package/docs/eo-tree.react.md +220 -0
  45. package/docs/eo-workbench-layout-v2.md +204 -0
  46. package/docs/eo-workbench-layout-v2.react.md +162 -0
  47. package/docs/eo-workbench-layout.md +45 -3
  48. package/docs/eo-workbench-layout.react.md +141 -0
  49. package/docs/pdf-viewer.md +48 -1
  50. package/docs/pdf-viewer.react.md +63 -0
  51. package/package.json +2 -2
  52. package/dist/chunks/4758.5f79e636.js +0 -3
  53. package/dist/chunks/4758.5f79e636.js.map +0 -1
  54. package/dist/chunks/6070.74d93326.js.map +0 -1
  55. package/dist/chunks/8382.d552299f.js +0 -2
  56. package/dist/chunks/8382.d552299f.js.map +0 -1
  57. package/dist/chunks/eo-cascader.86a685ca.js +0 -2
  58. package/dist/chunks/eo-cascader.86a685ca.js.map +0 -1
  59. package/dist/chunks/eo-tree-select.31dae71f.js +0 -2
  60. package/dist/chunks/eo-tree-select.31dae71f.js.map +0 -1
  61. /package/dist/chunks/{4758.5f79e636.js.LICENSE.txt → 4758.703acb39.js.LICENSE.txt} +0 -0
package/docs/eo-table.md ADDED
@@ -0,0 +1,296 @@
1
+ ---
2
+ tagName: eo-table
3
+ displayName: WrappedEoTable
4
+ description: 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。
5
+ category: table
6
+ source: "@next-bricks/advanced"
7
+ ---
8
+
9
+ # eo-table
10
+
11
+ > 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | --------------------------------------- | --------------------------------------------------------------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | showCard | `any` | 否 | `true` | 是否显示外层卡片 |
18
+ | rowSelection | `false \| TableRowSelection<any>` | 否 | - | 表格行是否可选择，具体查阅：[rowSelection](https://ant.design/components/table-cn/#rowSelection) |
19
+ | rowKey | `string` | 否 | - | 指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。 |
20
+ | hiddenColumns | `Array<string \| number>` | 否 | - | 隐藏相应列（输入对应的 dataIndex 或者 key 即可） |
21
+ | showSelectInfo | `any` | 否 | `false` | 是否显示已选择信息和清除按钮。仅在设置了 `rowSelection` 时有效。 |
22
+ | filters | `Record<string, string[]>` | 否 | - | 表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。 |
23
+ | configProps | `any` | 否 | - | ant-design 的 Table 相关配置项，具体查阅：[Table](https://ant.design/components/table-cn/#Table) |
24
+ | sort | `string` | 否 | - | 被排序列的 dataIndex。通常来自于 url 参数，可以设置成 `${QUERY.sort}`。 |
25
+ | order | `string \| number` | 否 | - | 升序/降序，可以设置成 `${QUERY.order}`。 |
26
+ | rowDisabledConfig | `RowDisabledProps \| RowDisabledProps[]` | 否 | - | 配置每一行是否禁用，field 表示数据源中的字段路径，value 表示与其字段比较的值，operator 表示两者比较的方法，结果为 true 时会禁用当前行 |
27
+ | expandedRowBrick | `{ useBrick?: UseSingleBrickConf }` | 否 | - | 自定义行展开的构件 |
28
+ | expandIcon | `{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }` | 否 | - | 自定义展开图标。 |
29
+ | expandIconAsCell | `any` | 否 | `true` | 展开的图标是否为一个单元格，默认显示在第一列 |
30
+ | expandIconColumnIndex | `number` | 否 | - | 展开的图标显示在哪一列，当 `expandIconAsCell` 为 false 时生效 |
31
+ | expandRowByClick | `boolean` | 否 | - | 通过点击行来展开子行 |
32
+ | optimizedColumns | `Array<string \| number>` | 否 | - | 优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列 |
33
+ | stripEmptyExpandableChildren | `any` | 否 | `false` | 树形数据展示时是否需要去除空数组 |
34
+ | defaultExpandAllRows | `boolean` | 否 | - | 初始时，是否展开所有行 |
35
+ | ellipsisInfo | `boolean` | 否 | - | 是否显示省略信息 |
36
+ | expandedRowKeys | `string[]` | 否 | - | 展开的行的 rowKey |
37
+ | selectAllChildren | `boolean` | 否 | - | 树形数据展示时，行选择父节点是否同步勾选/取消勾选所有子节点 |
38
+ | defaultSelectAll | `boolean` | 否 | - | 是否默认选择所有行 |
39
+ | childrenColumnName | `any` | 否 | `"children"` | 指定树形结构的列名 |
40
+ | sortable | `any` | 否 | `true` | 是否支持排序。当对应列的 sorter 设置成 true 时则可排序 |
41
+ | frontSearch | `boolean` | 否 | - | 是否前端进行搜索，配合 `presentational-bricks.brick-input` 使用 |
42
+ | frontSearchQuery | `any` | 否 | `""` | 前端搜索参数 |
43
+ | exactSearch | `boolean` | 否 | - | 是否精确搜索 |
44
+ | frontSearchFilterKeys | `string[]` | 否 | - | 进行前端搜索的字段，支持嵌套的写法如 `["name","value.a"]` |
45
+ | page | `number` | 否 | - | 页码 |
46
+ | pageSize | `number` | 否 | - | 页码条数 |
47
+ | scrollConfigs | `TableProps["scroll"]` | 否 | `{ x: true }` | 表格是否可滚动，也可以指定滚动区域的宽、高 |
48
+ | qField | `any` | 否 | `"q"` | 把过滤条件更新到 url 时的字段名 |
49
+ | tableDraggable | `boolean` | 否 | - | 表格行是否可拖拽，注意，树形数据的表格不支持该功能 |
50
+ | zebraPattern | `boolean` | 否 | - | 是否展示斑马纹 |
51
+ | storeCheckedByUrl | `boolean` | 否 | - | 翻页时是否记住之前选中的项 |
52
+ | extraRows | `Record<string, unknown>[]` | 否 | `[]` | 额外的行，通常为跨页勾选时，不在当前页的行 |
53
+ | autoSelectParentWhenAllChildrenSelected | `boolean` | 否 | - | 当所有子节点选中时，自动选中父节点 |
54
+ | thTransparent | `boolean` | 否 | - | 表格表头是否透明 |
55
+ | showHeader | `any` | 否 | `true` | 是否显示表头 |
56
+ | pagination | `false \| TablePaginationConfig` | 否 | - | 是否显示分页 |
57
+ | size | `SizeType \| "x-small"` | 否 | - | 表格大小（antd 原生 size） |
58
+ | type | `RowSelectionType` | 否 | - | 选框类型（单选/多选） |
59
+ | shouldUpdateUrlParams | `any` | 否 | `true` | 是否更新 url 参数 |
60
+ | shouldRenderWhenUrlParamsUpdate | `any` | 否 | `true` | 更新 url 参数时是否触发页面重新渲染 |
61
+ | selectedRowKeys | `React.Key[]` | 否 | `[]` | 指定选中项的 key 数组 |
62
+
63
+ ## Events
64
+
65
+ | 事件 | detail | 说明 |
66
+ | ---------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |
67
+ | page.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 页码变化 |
68
+ | filter.update | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 每页条数变化 |
69
+ | select.update | `Record<string, any>[]` — 选中的行数据数组 | 勾选框变化，detail 中为所选的行数据 |
70
+ | select.row.keys.update | `string[]` — 选中的行 key 集合 | 勾选框变化，detail 中为所选的行 key 集合 |
71
+ | sort.update | `SortUpdateEventDetail` — { sort: 排序列的 key/dataIndex, order: 升序/降序 } | 排序变化 |
72
+ | row.expand | `RowExpandEventDetail` — { expanded: 是否展开, record: 被点击的行数据 } | 点击展开图标时触发 |
73
+ | expand.rows.change | `ExpandRowsChangeEventDetail` — { expandedRows: 当前展开的所有行的 rowKey 集合 } | 展开的行变化时触发 |
74
+ | row.drag | `RowDragEventDetail` — { data: 拖拽后重新排序的所有行数据 } | 表格行拖拽结束发生的事件 |
75
+
76
+ ## Methods
77
+
78
+ | 方法 | 参数 | 返回值 | 说明 |
79
+ | ---------------- | ------------------------------ | ------ | ---------- |
80
+ | filterSourceData | `(event: CustomEvent) => void` | `void` | 搜索过滤 |
81
+ | expandAll | `() => void` | `void` | 展开所有行 |
82
+
83
+ ## Examples
84
+
85
+ ### Basic
86
+
87
+ 展示表格的基本用法，配置 columns 和 dataSource 展示列表数据。
88
+
89
+ ```yaml preview
90
+ - brick: eo-table
91
+ properties:
92
+ showCard: false
93
+ rowKey: key
94
+ configProps:
95
+ columns:
96
+ - dataIndex: name
97
+ key: name
98
+ title: Name
99
+ - dataIndex: age
100
+ key: age
101
+ title: Age
102
+ - dataIndex: address
103
+ key: address
104
+ title: Address
105
+ dataSource:
106
+ - key: 0
107
+ name: Jack
108
+ age: 18
109
+ address: Guangzhou
110
+ - key: 1
111
+ name: Alex
112
+ age: 20
113
+ address: Shanghai
114
+ - key: 2
115
+ name: Lucy
116
+ age: 16
117
+ address: Yunnan
118
+ - key: 3
119
+ name: Sam
120
+ age: 28
121
+ address: Guangzhou
122
+ - key: 4
123
+ name: Bob
124
+ age: 35
125
+ address: Hainan
126
+ ```
127
+
128
+ ### Row Selection
129
+
130
+ 配置 rowSelection 开启行选择，通过 select.update 事件获取选中行数据。
131
+
132
+ ```yaml preview
133
+ - brick: eo-table
134
+ events:
135
+ select.update:
136
+ - action: console.log
137
+ select.row.keys.update:
138
+ - action: console.log
139
+ properties:
140
+ showCard: false
141
+ rowKey: key
142
+ rowSelection: true
143
+ showSelectInfo: true
144
+ configProps:
145
+ columns:
146
+ - dataIndex: name
147
+ key: name
148
+ title: Name
149
+ - dataIndex: age
150
+ key: age
151
+ title: Age
152
+ - dataIndex: address
153
+ key: address
154
+ title: Address
155
+ dataSource:
156
+ - key: 0
157
+ name: Jack
158
+ age: 18
159
+ address: Guangzhou
160
+ - key: 1
161
+ name: Alex
162
+ age: 20
163
+ address: Shanghai
164
+ - key: 2
165
+ name: Lucy
166
+ age: 16
167
+ address: Yunnan
168
+ ```
169
+
170
+ ### Expandable
171
+
172
+ 配置 expandedRowBrick 自定义展开行内容，通过 row.expand 事件监听展开状态变化。
173
+
174
+ ```yaml preview
175
+ - brick: eo-table
176
+ events:
177
+ row.expand:
178
+ - action: console.log
179
+ expand.rows.change:
180
+ - action: console.log
181
+ properties:
182
+ showCard: false
183
+ rowKey: key
184
+ expandedRowBrick:
185
+ useBrick:
186
+ brick: span
187
+ properties:
188
+ textContent: <% DATA.rowData.address %>
189
+ configProps:
190
+ columns:
191
+ - dataIndex: name
192
+ key: name
193
+ title: Name
194
+ - dataIndex: age
195
+ key: age
196
+ title: Age
197
+ - dataIndex: address
198
+ key: address
199
+ title: Address
200
+ dataSource:
201
+ - key: 0
202
+ name: Jack
203
+ age: 18
204
+ address: Guangzhou
205
+ - key: 1
206
+ name: Alex
207
+ age: 20
208
+ address: Shanghai
209
+ - key: 2
210
+ name: Lucy
211
+ age: 16
212
+ address: Yunnan
213
+ ```
214
+
215
+ ### Sortable
216
+
217
+ 配置 sorter 列实现排序功能，通过 sort.update 事件获取排序变化。
218
+
219
+ ```yaml preview
220
+ - brick: eo-table
221
+ events:
222
+ sort.update:
223
+ - action: console.log
224
+ properties:
225
+ showCard: false
226
+ rowKey: key
227
+ configProps:
228
+ columns:
229
+ - dataIndex: name
230
+ key: name
231
+ title: Name
232
+ - dataIndex: age
233
+ key: age
234
+ title: Age
235
+ sorter: true
236
+ - dataIndex: address
237
+ key: address
238
+ title: Address
239
+ dataSource:
240
+ - key: 0
241
+ name: Jack
242
+ age: 18
243
+ address: Guangzhou
244
+ - key: 1
245
+ name: Alex
246
+ age: 20
247
+ address: Shanghai
248
+ - key: 2
249
+ name: Lucy
250
+ age: 16
251
+ address: Yunnan
252
+ - key: 3
253
+ name: Sam
254
+ age: 28
255
+ address: Guangzhou
256
+ ```
257
+
258
+ ### Draggable
259
+
260
+ 开启 tableDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。
261
+
262
+ ```yaml preview
263
+ - brick: eo-table
264
+ events:
265
+ row.drag:
266
+ - action: console.log
267
+ properties:
268
+ showCard: false
269
+ rowKey: key
270
+ tableDraggable: true
271
+ configProps:
272
+ pagination: false
273
+ columns:
274
+ - dataIndex: name
275
+ key: name
276
+ title: Name
277
+ - dataIndex: age
278
+ key: age
279
+ title: Age
280
+ - dataIndex: address
281
+ key: address
282
+ title: Address
283
+ dataSource:
284
+ - key: 0
285
+ name: Jack
286
+ age: 18
287
+ address: Guangzhou
288
+ - key: 1
289
+ name: Alex
290
+ age: 20
291
+ address: Shanghai
292
+ - key: 2
293
+ name: Lucy
294
+ age: 16
295
+ address: Yunnan
296
+ ```
package/docs/eo-table.react.md ADDED
@@ -0,0 +1,223 @@
1
+ ---
2
+ tagName: eo-table
3
+ displayName: WrappedEoTable
4
+ description: 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。
5
+ category: table
6
+ source: "@next-bricks/advanced"
7
+ ---
8
+
9
+ # WrappedEoTable
10
+
11
+ > 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedEoTable } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | --------------------------------------- | --------------------------------------------------------------------- | ---- | ------------- | ------------------------------------------------ |
23
+ | showCard | `any` | 否 | `true` | 是否显示外层卡片 |
24
+ | rowSelection | `false \| TableRowSelection<any>` | 否 | - | 表格行是否可选择 |
25
+ | rowKey | `string` | 否 | - | 指定每一行的 key，强烈建议设置 |
26
+ | hiddenColumns | `Array<string \| number>` | 否 | - | 隐藏相应列（输入对应的 dataIndex 或者 key 即可） |
27
+ | showSelectInfo | `any` | 否 | `false` | 是否显示已选择信息和清除按钮 |
28
+ | filters | `Record<string, string[]>` | 否 | - | 表头过滤的过滤项 |
29
+ | configProps | `any` | 否 | - | ant-design 的 Table 相关配置项 |
30
+ | sort | `string` | 否 | - | 被排序列的 dataIndex |
31
+ | order | `string \| number` | 否 | - | 升序/降序 |
32
+ | rowDisabledConfig | `RowDisabledProps \| RowDisabledProps[]` | 否 | - | 配置每一行是否禁用 |
33
+ | expandedRowBrick | `{ useBrick?: UseSingleBrickConf }` | 否 | - | 自定义行展开的构件 |
34
+ | expandIcon | `{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }` | 否 | - | 自定义展开图标 |
35
+ | expandIconAsCell | `any` | 否 | `true` | 展开的图标是否为一个单元格 |
36
+ | expandIconColumnIndex | `number` | 否 | - | 展开的图标显示在哪一列 |
37
+ | expandRowByClick | `boolean` | 否 | - | 通过点击行来展开子行 |
38
+ | optimizedColumns | `Array<string \| number>` | 否 | - | 优化渲染的列 |
39
+ | stripEmptyExpandableChildren | `any` | 否 | `false` | 树形数据展示时是否需要去除空数组 |
40
+ | defaultExpandAllRows | `boolean` | 否 | - | 初始时，是否展开所有行 |
41
+ | ellipsisInfo | `boolean` | 否 | - | 是否显示省略信息 |
42
+ | expandedRowKeys | `string[]` | 否 | - | 展开的行的 rowKey |
43
+ | selectAllChildren | `boolean` | 否 | - | 树形数据时，行选择父节点是否同步勾选所有子节点 |
44
+ | defaultSelectAll | `boolean` | 否 | - | 是否默认选择所有行 |
45
+ | childrenColumnName | `any` | 否 | `"children"` | 指定树形结构的列名 |
46
+ | sortable | `any` | 否 | `true` | 是否支持排序 |
47
+ | frontSearch | `boolean` | 否 | - | 是否前端进行搜索 |
48
+ | frontSearchQuery | `any` | 否 | `""` | 前端搜索参数 |
49
+ | exactSearch | `boolean` | 否 | - | 是否精确搜索 |
50
+ | frontSearchFilterKeys | `string[]` | 否 | - | 进行前端搜索的字段 |
51
+ | page | `number` | 否 | - | 页码 |
52
+ | pageSize | `number` | 否 | - | 页码条数 |
53
+ | scrollConfigs | `TableProps["scroll"]` | 否 | `{ x: true }` | 表格是否可滚动 |
54
+ | qField | `any` | 否 | `"q"` | 把过滤条件更新到 url 时的字段名 |
55
+ | tableDraggable | `boolean` | 否 | - | 表格行是否可拖拽 |
56
+ | zebraPattern | `boolean` | 否 | - | 是否展示斑马纹 |
57
+ | storeCheckedByUrl | `boolean` | 否 | - | 翻页时是否记住之前选中的项 |
58
+ | extraRows | `Record<string, unknown>[]` | 否 | `[]` | 额外的行 |
59
+ | autoSelectParentWhenAllChildrenSelected | `boolean` | 否 | - | 当所有子节点选中时，自动选中父节点 |
60
+ | thTransparent | `boolean` | 否 | - | 表格表头是否透明 |
61
+ | showHeader | `any` | 否 | `true` | 是否显示表头 |
62
+ | pagination | `false \| TablePaginationConfig` | 否 | - | 是否显示分页 |
63
+ | size | `SizeType \| "x-small"` | 否 | - | 表格大小 |
64
+ | type | `RowSelectionType` | 否 | - | 选框类型（单选/多选） |
65
+ | shouldUpdateUrlParams | `any` | 否 | `true` | 是否更新 url 参数 |
66
+ | shouldRenderWhenUrlParamsUpdate | `any` | 否 | `true` | 更新 url 参数时是否触发页面重新渲染 |
67
+ | selectedRowKeys | `React.Key[]` | 否 | `[]` | 指定选中项的 key 数组 |
68
+
69
+ ## Events
70
+
71
+ | 事件 | detail | 说明 |
72
+ | --------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |
73
+ | onPageChange | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 页码变化 |
74
+ | onFilterUpdate | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 } | 每页条数变化 |
75
+ | onSelectUpdate | `Record<string, any>[]` — 选中的行数据数组 | 勾选框变化，detail 中为所选的行数据 |
76
+ | onSelectRowKeysUpdate | `string[]` — 选中的行 key 集合 | 勾选框变化，detail 中为所选的行 key 集合 |
77
+ | onSortUpdate | `SortUpdateEventDetail` — { sort: 排序列的 key/dataIndex, order: 升序/降序 } | 排序变化 |
78
+ | onRowExpand | `RowExpandEventDetail` — { expanded: 是否展开, record: 被点击的行数据 } | 点击展开图标时触发 |
79
+ | onExpandRowsChange | `ExpandRowsChangeEventDetail` — { expandedRows: 当前展开的所有行的 rowKey 集合 } | 展开的行变化时触发 |
80
+ | onRowDrag | `RowDragEventDetail` — { data: 拖拽后重新排序的所有行数据 } | 表格行拖拽结束发生的事件 |
81
+
82
+ ## Methods
83
+
84
+ | 方法 | 参数 | 返回值 | 说明 |
85
+ | ---------------- | ------------------------------ | ------ | ---------- |
86
+ | filterSourceData | `(event: CustomEvent) => void` | `void` | 搜索过滤 |
87
+ | expandAll | `() => void` | `void` | 展开所有行 |
88
+
89
+ ## Examples
90
+
91
+ ### Basic
92
+
93
+ 展示表格的基本用法，配置 columns 和 dataSource 展示列表数据。
94
+
95
+ ```tsx
96
+ <WrappedEoTable
97
+ showCard={false}
98
+ rowKey="key"
99
+ configProps={{
100
+ columns: [
101
+ { dataIndex: "name", key: "name", title: "Name" },
102
+ { dataIndex: "age", key: "age", title: "Age" },
103
+ { dataIndex: "address", key: "address", title: "Address" },
104
+ ],
105
+ dataSource: [
106
+ { key: 0, name: "Jack", age: 18, address: "Guangzhou" },
107
+ { key: 1, name: "Alex", age: 20, address: "Shanghai" },
108
+ { key: 2, name: "Lucy", age: 16, address: "Yunnan" },
109
+ { key: 3, name: "Sam", age: 28, address: "Guangzhou" },
110
+ { key: 4, name: "Bob", age: 35, address: "Hainan" },
111
+ ],
112
+ }}
113
+ />
114
+ ```
115
+
116
+ ### Row Selection
117
+
118
+ 配置 rowSelection 开启行选择，通过 onSelectUpdate 事件获取选中行数据。
119
+
120
+ ```tsx
121
+ <WrappedEoTable
122
+ showCard={false}
123
+ rowKey="key"
124
+ rowSelection={true}
125
+ showSelectInfo={true}
126
+ configProps={{
127
+ columns: [
128
+ { dataIndex: "name", key: "name", title: "Name" },
129
+ { dataIndex: "age", key: "age", title: "Age" },
130
+ { dataIndex: "address", key: "address", title: "Address" },
131
+ ],
132
+ dataSource: [
133
+ { key: 0, name: "Jack", age: 18, address: "Guangzhou" },
134
+ { key: 1, name: "Alex", age: 20, address: "Shanghai" },
135
+ { key: 2, name: "Lucy", age: 16, address: "Yunnan" },
136
+ ],
137
+ }}
138
+ onSelectUpdate={(e) => console.log(e.detail)}
139
+ onSelectRowKeysUpdate={(e) => console.log(e.detail)}
140
+ />
141
+ ```
142
+
143
+ ### Expandable
144
+
145
+ 配置 expandedRowBrick 自定义展开行内容，通过 onRowExpand 事件监听展开状态变化。
146
+
147
+ ```tsx
148
+ <WrappedEoTable
149
+ showCard={false}
150
+ rowKey="key"
151
+ expandedRowBrick={{
152
+ useBrick: {
153
+ brick: "span",
154
+ properties: { textContent: "<% DATA.rowData.address %>" },
155
+ },
156
+ }}
157
+ configProps={{
158
+ columns: [
159
+ { dataIndex: "name", key: "name", title: "Name" },
160
+ { dataIndex: "age", key: "age", title: "Age" },
161
+ { dataIndex: "address", key: "address", title: "Address" },
162
+ ],
163
+ dataSource: [
164
+ { key: 0, name: "Jack", age: 18, address: "Guangzhou" },
165
+ { key: 1, name: "Alex", age: 20, address: "Shanghai" },
166
+ { key: 2, name: "Lucy", age: 16, address: "Yunnan" },
167
+ ],
168
+ }}
169
+ onRowExpand={(e) => console.log(e.detail)}
170
+ onExpandRowsChange={(e) => console.log(e.detail)}
171
+ />
172
+ ```
173
+
174
+ ### Sortable
175
+
176
+ 配置 sorter 列实现排序功能，通过 onSortUpdate 事件获取排序变化。
177
+
178
+ ```tsx
179
+ <WrappedEoTable
180
+ showCard={false}
181
+ rowKey="key"
182
+ configProps={{
183
+ columns: [
184
+ { dataIndex: "name", key: "name", title: "Name" },
185
+ { dataIndex: "age", key: "age", title: "Age", sorter: true },
186
+ { dataIndex: "address", key: "address", title: "Address" },
187
+ ],
188
+ dataSource: [
189
+ { key: 0, name: "Jack", age: 18, address: "Guangzhou" },
190
+ { key: 1, name: "Alex", age: 20, address: "Shanghai" },
191
+ { key: 2, name: "Lucy", age: 16, address: "Yunnan" },
192
+ { key: 3, name: "Sam", age: 28, address: "Guangzhou" },
193
+ ],
194
+ }}
195
+ onSortUpdate={(e) => console.log(e.detail)}
196
+ />
197
+ ```
198
+
199
+ ### Draggable
200
+
201
+ 开启 tableDraggable 支持行拖拽排序，拖拽结束触发 onRowDrag 事件。
202
+
203
+ ```tsx
204
+ <WrappedEoTable
205
+ showCard={false}
206
+ rowKey="key"
207
+ tableDraggable={true}
208
+ configProps={{
209
+ pagination: false,
210
+ columns: [
211
+ { dataIndex: "name", key: "name", title: "Name" },
212
+ { dataIndex: "age", key: "age", title: "Age" },
213
+ { dataIndex: "address", key: "address", title: "Address" },
214
+ ],
215
+ dataSource: [
216
+ { key: 0, name: "Jack", age: 18, address: "Guangzhou" },
217
+ { key: 1, name: "Alex", age: 20, address: "Shanghai" },
218
+ { key: 2, name: "Lucy", age: 16, address: "Yunnan" },
219
+ ],
220
+ }}
221
+ onRowDrag={(e) => console.log(e.detail)}
222
+ />
223
+ ```
package/docs/eo-text-tooltip.md CHANGED
@@ -1,9 +1,28 @@
1
- eo-text-tooltip
1
+ ---
2
+ tagName: eo-text-tooltip
3
+ displayName: WrappedEoTextTooltip
4
+ description: 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip
5
+ category: display
6
+ source: "@next-bricks/advanced"
7
+ ---
8
+
9
+ # eo-text-tooltip
10
+
11
+ > 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | --------- | -------- | ---- | ------ | ----------------------------------------------------- |
17
+ | label | `string` | 否 | - | 显示的文本内容，超出时以省略号截断 |
18
+ | lineClamp | `number` | 否 | `1` | 省略的行数，超过该行数后显示省略号，设为 0 表示不省略 |
2
19
 
3
20
  ## Examples
4
21
 
5
22
  ### Basic
6
23
 
24
+ 展示文本 Tooltip 的基本用法，超出宽度时鼠标悬浮显示完整内容。
25
+
7
26
  ```yaml preview
8
27
  - brick: div
9
28
  properties:
@@ -31,3 +50,29 @@ eo-text-tooltip
31
50
  label: 单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips
32
51
  lineClamp: 1
33
52
  ```
53
+
54
+ ### Multi-line Clamp
55
+
56
+ 通过设置 lineClamp 控制最多显示的行数，超出时显示省略号并悬浮展示完整内容。
57
+
58
+ ```yaml preview
59
+ - brick: div
60
+ properties:
61
+ style:
62
+ display: flex
63
+ flex-direction: column
64
+ gap: 16px
65
+ children:
66
+ - brick: eo-text-tooltip
67
+ properties:
68
+ style:
69
+ width: 200px
70
+ label: 多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略
71
+ lineClamp: 2
72
+ - brick: eo-text-tooltip
73
+ properties:
74
+ style:
75
+ width: 200px
76
+ label: 三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略
77
+ lineClamp: 3
78
+ ```
package/docs/eo-text-tooltip.react.md ADDED
@@ -0,0 +1,69 @@
1
+ ---
2
+ tagName: eo-text-tooltip
3
+ displayName: WrappedEoTextTooltip
4
+ description: 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip
5
+ category: display
6
+ source: "@next-bricks/advanced"
7
+ ---
8
+
9
+ # WrappedEoTextTooltip
10
+
11
+ > 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedEoTextTooltip } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | --------- | -------- | ---- | ------ | ----------------------------------------------------- |
23
+ | label | `string` | 否 | - | 显示的文本内容，超出时以省略号截断 |
24
+ | lineClamp | `number` | 否 | `1` | 省略的行数，超过该行数后显示省略号，设为 0 表示不省略 |
25
+
26
+ ## Examples
27
+
28
+ ### Basic
29
+
30
+ 展示文本 Tooltip 的基本用法，超出宽度时鼠标悬浮显示完整内容。
31
+
32
+ ```tsx
33
+ <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
34
+ <WrappedEoTextTooltip
35
+ style={{ width: 180 }}
36
+ label="不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略"
37
+ lineClamp={0}
38
+ />
39
+ <WrappedEoTextTooltip
40
+ style={{ width: 180 }}
41
+ label="单行不超出不显示tips"
42
+ lineClamp={1}
43
+ />
44
+ <WrappedEoTextTooltip
45
+ style={{ width: 180 }}
46
+ label="单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips"
47
+ lineClamp={1}
48
+ />
49
+ </div>
50
+ ```
51
+
52
+ ### Multi-line Clamp
53
+
54
+ 通过设置 lineClamp 控制最多显示的行数，超出时显示省略号并悬浮展示完整内容。
55
+
56
+ ```tsx
57
+ <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
58
+ <WrappedEoTextTooltip
59
+ style={{ width: 200 }}
60
+ label="多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略"
61
+ lineClamp={2}
62
+ />
63
+ <WrappedEoTextTooltip
64
+ style={{ width: 200 }}
65
+ label="三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略"
66
+ lineClamp={3}
67
+ />
68
+ </div>
69
+ ```