@next-bricks/advanced 0.51.3 → 0.51.5

package/dist/examples.json

@@ -1,24 +1,30 @@
 {
+  "eo-table": {
+    "doc": "---\ntagName: eo-table\ndisplayName: WrappedEoTable\ndescription: 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\ncategory: table\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-table\n\n> 简易表格构件。⚠️ 通常情况下，应使用 `eo-next-table` 替代。\n\n## Props\n\n| 属性                                    | 类型                                                                  | 必填 | 默认值        | 说明                                                                                                                                  |\n| --------------------------------------- | --------------------------------------------------------------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| showCard                                | `any`                                                                 | 否   | `true`        | 是否显示外层卡片                                                                                                                      |\n| rowSelection                            | `false \\| TableRowSelection<any>`                                     | 否   | -             | 表格行是否可选择，具体查阅：[rowSelection](https://ant.design/components/table-cn/#rowSelection)                                      |\n| rowKey                                  | `string`                                                              | 否   | -             | 指定每一行的 key，不指定则默认为索引 index。强烈建议设置该属性，否则在某些情况下可能行为不如预期。                                    |\n| hiddenColumns                           | `Array<string \\| number>`                                             | 否   | -             | 隐藏相应列（输入对应的 dataIndex 或者 key 即可）                                                                                      |\n| showSelectInfo                          | `any`                                                                 | 否   | `false`       | 是否显示已选择信息和清除按钮。仅在设置了 `rowSelection` 时有效。                                                                      |\n| filters                                 | `Record<string, string[]>`                                            | 否   | -             | 表头过滤的过滤项，key 为 column 的 dataIndex，value 为过滤值集合。                                                                    |\n| configProps                             | `any`                                                                 | 否   | -             | ant-design 的 Table 相关配置项，具体查阅：[Table](https://ant.design/components/table-cn/#Table)                                      |\n| sort                                    | `string`                                                              | 否   | -             | 被排序列的 dataIndex。通常来自于 url 参数，可以设置成 `${QUERY.sort}`。                                                               |\n| order                                   | `string \\| number`                                                    | 否   | -             | 升序/降序，可以设置成 `${QUERY.order}`。                                                                                              |\n| rowDisabledConfig                       | `RowDisabledProps \\| RowDisabledProps[]`                              | 否   | -             | 配置每一行是否禁用，field 表示数据源中的字段路径，value 表示与其字段比较的值，operator 表示两者比较的方法，结果为 true 时会禁用当前行 |\n| expandedRowBrick                        | `{ useBrick?: UseSingleBrickConf }`                                   | 否   | -             | 自定义行展开的构件                                                                                                                    |\n| expandIcon                              | `{ collapsedIcon: GeneralIconProps; expandedIcon: GeneralIconProps }` | 否   | -             | 自定义展开图标。                                                                                                                      |\n| expandIconAsCell                        | `any`                                                                 | 否   | `true`        | 展开的图标是否为一个单元格，默认显示在第一列                                                                                          |\n| expandIconColumnIndex                   | `number`                                                              | 否   | -             | 展开的图标显示在哪一列，当 `expandIconAsCell` 为 false 时生效                                                                         |\n| expandRowByClick                        | `boolean`                                                             | 否   | -             | 通过点击行来展开子行                                                                                                                  |\n| optimizedColumns                        | `Array<string \\| number>`                                             | 否   | -             | 优化渲染的列（输入对应的 dataIndex），针对配置了 useBrick 的列                                                                        |\n| stripEmptyExpandableChildren            | `any`                                                                 | 否   | `false`       | 树形数据展示时是否需要去除空数组                                                                                                      |\n| defaultExpandAllRows                    | `boolean`                                                             | 否   | -             | 初始时，是否展开所有行                                                                                                                |\n| ellipsisInfo                            | `boolean`                                                             | 否   | -             | 是否显示省略信息                                                                                                                      |\n| expandedRowKeys                         | `string[]`                                                            | 否   | -             | 展开的行的 rowKey                                                                                                                     |\n| selectAllChildren                       | `boolean`                                                             | 否   | -             | 树形数据展示时，行选择父节点是否同步勾选/取消勾选所有子节点                                                                           |\n| defaultSelectAll                        | `boolean`                                                             | 否   | -             | 是否默认选择所有行                                                                                                                    |\n| childrenColumnName                      | `any`                                                                 | 否   | `\"children\"`  | 指定树形结构的列名                                                                                                                    |\n| sortable                                | `any`                                                                 | 否   | `true`        | 是否支持排序。当对应列的 sorter 设置成 true 时则可排序                                                                                |\n| frontSearch                             | `boolean`                                                             | 否   | -             | 是否前端进行搜索，配合 `presentational-bricks.brick-input` 使用                                                                       |\n| frontSearchQuery                        | `any`                                                                 | 否   | `\"\"`          | 前端搜索参数                                                                                                                          |\n| exactSearch                             | `boolean`                                                             | 否   | -             | 是否精确搜索                                                                                                                          |\n| frontSearchFilterKeys                   | `string[]`                                                            | 否   | -             | 进行前端搜索的字段，支持嵌套的写法如 `[\"name\",\"value.a\"]`                                                                             |\n| page                                    | `number`                                                              | 否   | -             | 页码                                                                                                                                  |\n| pageSize                                | `number`                                                              | 否   | -             | 页码条数                                                                                                                              |\n| scrollConfigs                           | `TableProps[\"scroll\"]`                                                | 否   | `{ x: true }` | 表格是否可滚动，也可以指定滚动区域的宽、高                                                                                            |\n| qField                                  | `any`                                                                 | 否   | `\"q\"`         | 把过滤条件更新到 url 时的字段名                                                                                                       |\n| tableDraggable                          | `boolean`                                                             | 否   | -             | 表格行是否可拖拽，注意，树形数据的表格不支持该功能                                                                                    |\n| zebraPattern                            | `boolean`                                                             | 否   | -             | 是否展示斑马纹                                                                                                                        |\n| storeCheckedByUrl                       | `boolean`                                                             | 否   | -             | 翻页时是否记住之前选中的项                                                                                                            |\n| extraRows                               | `Record<string, unknown>[]`                                           | 否   | `[]`          | 额外的行，通常为跨页勾选时，不在当前页的行                                                                                            |\n| autoSelectParentWhenAllChildrenSelected | `boolean`                                                             | 否   | -             | 当所有子节点选中时，自动选中父节点                                                                                                    |\n| thTransparent                           | `boolean`                                                             | 否   | -             | 表格表头是否透明                                                                                                                      |\n| showHeader                              | `any`                                                                 | 否   | `true`        | 是否显示表头                                                                                                                          |\n| pagination                              | `false \\| TablePaginationConfig`                                      | 否   | -             | 是否显示分页                                                                                                                          |\n| size                                    | `SizeType \\| \"x-small\"`                                               | 否   | -             | 表格大小（antd 原生 size）                                                                                                            |\n| type                                    | `RowSelectionType`                                                    | 否   | -             | 选框类型（单选/多选）                                                                                                                 |\n| shouldUpdateUrlParams                   | `any`                                                                 | 否   | `true`        | 是否更新 url 参数                                                                                                                     |\n| shouldRenderWhenUrlParamsUpdate         | `any`                                                                 | 否   | `true`        | 更新 url 参数时是否触发页面重新渲染                                                                                                   |\n| selectedRowKeys                         | `React.Key[]`                                                         | 否   | `[]`          | 指定选中项的 key 数组                                                                                                                 |\n\n## Events\n\n| 事件                   | detail                                                                           | 说明                                     |\n| ---------------------- | -------------------------------------------------------------------------------- | ---------------------------------------- |\n| page.update            | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 }                | 页码变化                                 |\n| filter.update          | `Record<string, number>` — { page: 当前页码, pageSize: 每页条数 }                | 每页条数变化                             |\n| select.update          | `Record<string, any>[]` — 选中的行数据数组                                       | 勾选框变化，detail 中为所选的行数据      |\n| select.row.keys.update | `string[]` — 选中的行 key 集合                                                   | 勾选框变化，detail 中为所选的行 key 集合 |\n| sort.update            | `SortUpdateEventDetail` — { sort: 排序列的 key/dataIndex, order: 升序/降序 }     | 排序变化                                 |\n| row.expand             | `RowExpandEventDetail` — { expanded: 是否展开, record: 被点击的行数据 }          | 点击展开图标时触发                       |\n| expand.rows.change     | `ExpandRowsChangeEventDetail` — { expandedRows: 当前展开的所有行的 rowKey 集合 } | 展开的行变化时触发                       |\n| row.drag               | `RowDragEventDetail` — { data: 拖拽后重新排序的所有行数据 }                      | 表格行拖拽结束发生的事件                 |\n\n## Methods\n\n| 方法             | 参数                           | 返回值 | 说明       |\n| ---------------- | ------------------------------ | ------ | ---------- |\n| filterSourceData | `(event: CustomEvent) => void` | `void` | 搜索过滤   |\n| expandAll        | `() => void`                   | `void` | 展开所有行 |\n\n## Examples\n\n### Basic\n\n展示表格的基本用法，配置 columns 和 dataSource 展示列表数据。\n\n```yaml preview\n- brick: eo-table\n  properties:\n    showCard: false\n    rowKey: key\n    configProps:\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.configProps = {\n#     columns: [\n#       {\n#         dataIndex: \"name\",\n#         key: \"name\",\n#         title: \"Name\",\n#       },\n#       {\n#         dataIndex: \"age\",\n#         key: \"age\",\n#         title: \"Age\",\n#       },\n#       {\n#         dataIndex: \"address\",\n#         key: \"address\",\n#         title: \"Address\",\n#       },\n#     ],\n#     dataSource: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Row Selection\n\n配置 rowSelection 开启行选择，通过 select.update 事件获取选中行数据。\n\n```yaml preview\n- brick: eo-table\n  events:\n    select.update:\n      - action: console.log\n    select.row.keys.update:\n      - action: console.log\n  properties:\n    showCard: false\n    rowKey: key\n    rowSelection: true\n    showSelectInfo: true\n    configProps:\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n#   show-card=\"false\"\n#   row-key=\"key\"\n#   show-select-info=\"true\"\n#   id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.configProps = {\n#     columns: [\n#       {\n#         dataIndex: \"name\",\n#         key: \"name\",\n#         title: \"Name\",\n#       },\n#       {\n#         dataIndex: \"age\",\n#         key: \"age\",\n#         title: \"Age\",\n#       },\n#       {\n#         dataIndex: \"address\",\n#         key: \"address\",\n#         title: \"Address\",\n#       },\n#     ],\n#     dataSource: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"select.update\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"select.row.keys.update\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expandable\n\n配置 expandedRowBrick 自定义展开行内容，通过 row.expand 事件监听展开状态变化。\n\n```yaml preview\n- brick: eo-table\n  events:\n    row.expand:\n      - action: console.log\n    expand.rows.change:\n      - action: console.log\n  properties:\n    showCard: false\n    rowKey: key\n    expandedRowBrick:\n      useBrick:\n        brick: span\n        properties:\n          textContent: <% DATA.rowData.address %>\n    configProps:\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandedRowBrick = {\n#     useBrick: {\n#       brick: \"span\",\n#       properties: {\n#         textContent: \"<% DATA.rowData.address %>\",\n#       },\n#     },\n#   };\n#   brick_1.configProps = {\n#     columns: [\n#       {\n#         dataIndex: \"name\",\n#         key: \"name\",\n#         title: \"Name\",\n#       },\n#       {\n#         dataIndex: \"age\",\n#         key: \"age\",\n#         title: \"Age\",\n#       },\n#       {\n#         dataIndex: \"address\",\n#         key: \"address\",\n#         title: \"Address\",\n#       },\n#     ],\n#     dataSource: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expand.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Sortable\n\n配置 sorter 列实现排序功能，通过 sort.update 事件获取排序变化。\n\n```yaml preview\n- brick: eo-table\n  events:\n    sort.update:\n      - action: console.log\n  properties:\n    showCard: false\n    rowKey: key\n    configProps:\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n          sorter: true\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table show-card=\"false\" row-key=\"key\" id=\"brick-1\"></eo-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.configProps = {\n#     columns: [\n#       {\n#         dataIndex: \"name\",\n#         key: \"name\",\n#         title: \"Name\",\n#       },\n#       {\n#         dataIndex: \"age\",\n#         key: \"age\",\n#         title: \"Age\",\n#         sorter: true,\n#       },\n#       {\n#         dataIndex: \"address\",\n#         key: \"address\",\n#         title: \"Address\",\n#       },\n#     ],\n#     dataSource: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"sort.update\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Draggable\n\n开启 tableDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。\n\n```yaml preview\n- brick: eo-table\n  events:\n    row.drag:\n      - action: console.log\n  properties:\n    showCard: false\n    rowKey: key\n    tableDraggable: true\n    configProps:\n      pagination: false\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-table\n#   show-card=\"false\"\n#   row-key=\"key\"\n#   table-draggable\n#   id=\"brick-1\"\n# ></eo-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.configProps = {\n#     pagination: false,\n#     columns: [\n#       {\n#         dataIndex: \"name\",\n#         key: \"name\",\n#         title: \"Name\",\n#       },\n#       {\n#         dataIndex: \"age\",\n#         key: \"age\",\n#         title: \"Age\",\n#       },\n#       {\n#         dataIndex: \"address\",\n#         key: \"address\",\n#         title: \"Address\",\n#       },\n#     ],\n#     dataSource: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.drag\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
   "eo-cascader": {
-    "doc": "级联选择器\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 请选择城市\n    options:\n      - children:\n          - children:\n              - label: West Lake\n                value: xihu\n            label: Hangzhou\n            value: hangzhou\n        label: Zhejiang\n        value: zhejiang\n      - children:\n          - children:\n              - label: Zhong Hua Men\n                value: zhonghuamen\n            label: Nanjing\n            value: nanjing\n        label: Jiangsu\n        value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    values.change:\n      - action: console.log\n  children:\n    - brick: eo-cascader\n      properties:\n        label: 城市选择\n        name: city\n        placeholder: 请选择城市\n        required: true\n        options:\n          - children:\n              - children:\n                  - label: West Lake\n                    value: xihu\n                label: Hangzhou\n                value: hangzhou\n            label: Zhejiang\n            value: zhejiang\n          - children:\n              - children:\n                  - label: Zhong Hua Men\n                    value: zhonghuamen\n                label: Nanjing\n                value: nanjing\n            label: Jiangsu\n            value: jiangsu\n      events:\n        cascader.change:\n          - action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-cascader\n#     label=\"城市选择\"\n#     name=\"city\"\n#     placeholder=\"请选择城市\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-cascader>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n#   brick_2.addEventListener(\"cascader.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-cascader\ndisplayName: WrappedEoCascader\ndescription: 级联选择器\ncategory: form-input-basic\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-cascader\n\n> 级联选择器\n\n## Props\n\n| 属性           | 类型                                 | 必填 | 默认值                                                     | 说明                                                          |\n| -------------- | ------------------------------------ | ---- | ---------------------------------------------------------- | ------------------------------------------------------------- |\n| name           | `string`                             | 否   | -                                                          | 表单字段名                                                    |\n| label          | `string`                             | 否   | -                                                          | 表单字段标签                                                  |\n| required       | `boolean`                            | 否   | -                                                          | 是否为必填项                                                  |\n| options        | `AntdCascaderProps[\"options\"]`       | 否   | -                                                          | 可选项数据源                                                  |\n| fieldNames     | `AntdCascaderProps[\"fieldNames\"]`    | 否   | `{ label: \"label\", value: \"value\", children: \"children\" }` | 自定义字段名，指定 label、value、children 对应的字段          |\n| value          | `AntdCascaderProps[\"value\"]`         | 否   | -                                                          | 当前选中的值                                                  |\n| placeholder    | `string`                             | 否   | -                                                          | 输入框占位文本                                                |\n| multiple       | `boolean`                            | 否   | -                                                          | 是否支持多选                                                  |\n| disabled       | `boolean`                            | 否   | -                                                          | 是否禁用                                                      |\n| allowClear     | `boolean`                            | 否   | `true`                                                     | 是否支持清除                                                  |\n| showSearch     | `boolean`                            | 否   | `true`                                                     | 是否支持搜索，开启后可通过输入关键字过滤选项                  |\n| suffixIcon     | `GeneralIconProps`                   | 否   | -                                                          | 自定义下拉箭头图标                                            |\n| expandTrigger  | `AntdCascaderProps[\"expandTrigger\"]` | 否   | `\"click\"`                                                  | 次级菜单的展开方式，可选 click 或 hover                       |\n| popupPlacement | `AntdCascaderProps[\"placement\"]`     | 否   | `\"bottomLeft\"`                                             | 浮层预设位置，可选 bottomLeft、bottomRight、topLeft、topRight |\n| size           | `AntdCascaderProps[\"size\"]`          | 否   | -                                                          | 输入框大小，可选 large、middle、small                         |\n| limit          | `number`                             | 否   | `50`                                                       | 搜索结果的最大条数，0 表示不限制                              |\n| maxTagCount    | `number \\| \"responsive\"`             | 否   | -                                                          | 多选模式下最多显示的 tag 数量，设为 responsive 时会自适应宽度 |\n| cascaderStyle  | `CSSProperties`                      | 否   | -                                                          | 级联选择器的内联样式                                          |\n\n## Events\n\n| 事件            | detail                                                                                       | 说明                     |\n| --------------- | -------------------------------------------------------------------------------------------- | ------------------------ |\n| cascader.change | `CascaderChangeEventDetail` — { value: 选择的值, selectedOptions: 选择的值所对应的 options } | 级联选择项输入变化时触发 |\n\n## Examples\n\n### Basic\n\n展示级联选择器的基本用法，通过 options 提供层级数据源。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 请选择城市\n    options:\n      - children:\n          - children:\n              - label: West Lake\n                value: xihu\n            label: Hangzhou\n            value: hangzhou\n        label: Zhejiang\n        value: zhejiang\n      - children:\n          - children:\n              - label: Zhong Hua Men\n                value: zhonghuamen\n            label: Nanjing\n            value: nanjing\n        label: Jiangsu\n        value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用级联选择器，配置 name、label 和 required 实现表单集成与校验。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    values.change:\n      - action: console.log\n  children:\n    - brick: eo-cascader\n      properties:\n        label: 城市选择\n        name: city\n        placeholder: 请选择城市\n        required: true\n        options:\n          - children:\n              - children:\n                  - label: West Lake\n                    value: xihu\n                label: Hangzhou\n                value: hangzhou\n            label: Zhejiang\n            value: zhejiang\n          - children:\n              - children:\n                  - label: Zhong Hua Men\n                    value: zhonghuamen\n                label: Nanjing\n                value: nanjing\n            label: Jiangsu\n            value: jiangsu\n      events:\n        cascader.change:\n          - action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-cascader\n#     label=\"城市选择\"\n#     name=\"city\"\n#     placeholder=\"请选择城市\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-cascader>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n#   brick_2.addEventListener(\"cascader.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Multiple Selection\n\n开启多选模式，并配置 maxTagCount 限制最多显示的 tag 数量。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 请选择城市（可多选）\n    multiple: true\n    maxTagCount: 2\n    options:\n      - children:\n          - children:\n              - label: West Lake\n                value: xihu\n            label: Hangzhou\n            value: hangzhou\n        label: Zhejiang\n        value: zhejiang\n      - children:\n          - children:\n              - label: Zhong Hua Men\n                value: zhonghuamen\n            label: Nanjing\n            value: nanjing\n        label: Jiangsu\n        value: jiangsu\n  events:\n    cascader.change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader\n#   placeholder=\"请选择城市（可多选）\"\n#   multiple\n#   id=\"brick-1\"\n# ></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.maxTagCount = 2;\n#   brick_1.options = [\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#         },\n#       ],\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#     },\n#     {\n#       children: [\n#         {\n#           children: [\n#             {\n#               label: \"Zhong Hua Men\",\n#               value: \"zhonghuamen\",\n#             },\n#           ],\n#           label: \"Nanjing\",\n#           value: \"nanjing\",\n#         },\n#       ],\n#       label: \"Jiangsu\",\n#       value: \"jiangsu\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"cascader.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Custom Field Names\n\n使用 fieldNames 自定义数据源中 label、value、children 对应的字段名。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 请选择分类\n    fieldNames:\n      label: name\n      value: id\n      children: sub\n    options:\n      - id: tech\n        name: 技术\n        sub:\n          - id: frontend\n            name: 前端\n            sub:\n              - id: react\n                name: React\n              - id: vue\n                name: Vue\n          - id: backend\n            name: 后端\n            sub:\n              - id: java\n                name: Java\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择分类\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.fieldNames = {\n#     label: \"name\",\n#     value: \"id\",\n#     children: \"sub\",\n#   };\n#   brick_1.options = [\n#     {\n#       id: \"tech\",\n#       name: \"技术\",\n#       sub: [\n#         {\n#           id: \"frontend\",\n#           name: \"前端\",\n#           sub: [\n#             {\n#               id: \"react\",\n#               name: \"React\",\n#             },\n#             {\n#               id: \"vue\",\n#               name: \"Vue\",\n#             },\n#           ],\n#         },\n#         {\n#           id: \"backend\",\n#           name: \"后端\",\n#           sub: [\n#             {\n#               id: \"java\",\n#               name: \"Java\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Disabled and Size\n\n展示禁用状态和不同尺寸（large、middle、small）的级联选择器。\n\n```yaml preview minHeight=\"300px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      gap: 12px\n  children:\n    - brick: eo-cascader\n      properties:\n        placeholder: Large 尺寸\n        size: large\n        options:\n          - label: Zhejiang\n            value: zhejiang\n            children:\n              - label: Hangzhou\n                value: hangzhou\n                children:\n                  - label: West Lake\n                    value: xihu\n    - brick: eo-cascader\n      properties:\n        placeholder: Small 尺寸\n        size: small\n        options:\n          - label: Zhejiang\n            value: zhejiang\n            children:\n              - label: Hangzhou\n                value: hangzhou\n                children:\n                  - label: West Lake\n                    value: xihu\n    - brick: eo-cascader\n      properties:\n        placeholder: 禁用状态\n        disabled: true\n        options:\n          - label: Zhejiang\n            value: zhejiang\n            children:\n              - label: Hangzhou\n                value: hangzhou\n                children:\n                  - label: West Lake\n                    value: xihu\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 12px\">\n#   <eo-cascader placeholder=\"Large 尺寸\" size=\"large\" id=\"brick-1\"></eo-cascader>\n#   <eo-cascader placeholder=\"Small 尺寸\" size=\"small\" id=\"brick-2\"></eo-cascader>\n#   <eo-cascader placeholder=\"禁用状态\" disabled id=\"brick-3\"></eo-cascader>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#       children: [\n#         {\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#       children: [\n#         {\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.options = [\n#     {\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#       children: [\n#         {\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Custom Style and Icon\n\n通过 cascaderStyle 设置内联样式，通过 suffixIcon 自定义下拉箭头图标。\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n  properties:\n    placeholder: 自定义样式与图标\n    suffixIcon:\n      lib: antd\n      icon: down\n    cascaderStyle:\n      width: 300px\n    expandTrigger: hover\n    options:\n      - label: Zhejiang\n        value: zhejiang\n        children:\n          - label: Hangzhou\n            value: hangzhou\n            children:\n              - label: West Lake\n                value: xihu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader\n#   placeholder=\"自定义样式与图标\"\n#   expand-trigger=\"hover\"\n#   id=\"brick-1\"\n# ></eo-cascader>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.suffixIcon = {\n#     lib: \"antd\",\n#     icon: \"down\",\n#   };\n#   brick_1.cascaderStyle = {\n#     width: \"300px\",\n#   };\n#   brick_1.options = [\n#     {\n#       label: \"Zhejiang\",\n#       value: \"zhejiang\",\n#       children: [\n#         {\n#           label: \"Hangzhou\",\n#           value: \"hangzhou\",\n#           children: [\n#             {\n#               label: \"West Lake\",\n#               value: \"xihu\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n"
+  },
+  "eo-next-table": {
+    "doc": "---\ntagName: eo-next-table\ndisplayName: WrappedEoNextTable\ndescription: 大型表格\ncategory: table\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-next-table\n\n> 大型表格\n\n## Props\n\n| 属性               | 类型                     | 必填 | 默认值        | 说明                                                                                       |\n| ------------------ | ------------------------ | ---- | ------------- | ------------------------------------------------------------------------------------------ |\n| rowKey             | `string`                 | 否   | `\"key\"`       | 指定表格行的 key                                                                           |\n| columns            | `Column[]`               | 否   | -             | 列定义                                                                                     |\n| cell               | `CellConfig`             | 否   | -             | 单元格统一配置，可配置 useBrick 自定义渲染所有单元格及表头                                 |\n| dataSource         | `DataSource`             | 否   | -             | 数据源                                                                                     |\n| frontSearch        | `boolean`                | 否   | -             | 是否前端搜索                                                                               |\n| pagination         | `PaginationType`         | 否   | -             | 分页配置                                                                                   |\n| loading            | `boolean`                | 否   | -             | 显示加载中状态                                                                             |\n| multiSort          | `boolean`                | 否   | -             | 是否支持多列排序，前端搜索时需设置 column.sortPriority 优先级                              |\n| sort               | `Sort \\| Sort[]`         | 否   | -             | 排序信息                                                                                   |\n| rowSelection       | `RowSelectionType`       | 否   | -             | 表格行可选择配置                                                                           |\n| selectedRowKeys    | `(string \\| number)[]`   | 否   | -             | 选中项的 key                                                                               |\n| hiddenColumns      | `(string \\| number)[]`   | 否   | -             | 隐藏的列（输入对应的 column.key）                                                          |\n| expandable         | `ExpandableType`         | 否   | -             | 表格行展开配置                                                                             |\n| expandedRowKeys    | `(string \\| number)[]`   | 否   | -             | 展开项的 key                                                                               |\n| childrenColumnName | `string`                 | 否   | `\"children\"`  | 树形结构的列名                                                                             |\n| rowDraggable       | `boolean`                | 否   | -             | 表格行拖拽配置                                                                             |\n| rowClickable       | `boolean`                | 否   | -             | 表格行可点击（激活鼠标手势）                                                               |\n| searchFields       | `(string \\| string[])[]` | 否   | -             | 进行前端搜索的字段，支持嵌套的写法。不配置的时候默认为对所有 column.dataIndex 进行前端搜索 |\n| size               | `TableProps[\"size\"]`     | 否   | `\"large\"`     | 表格大小                                                                                   |\n| showHeader         | `boolean`                | 否   | `true`        | 是否显示表头                                                                               |\n| bordered           | `boolean`                | 否   | -             | 是否显示边框                                                                               |\n| scrollConfig       | `TableScroll`            | 否   | `{ x: true }` | 滚动配置                                                                                   |\n| optimizedColumns   | `(string \\| number)[]`   | 否   | -             | 优化渲染的列（输入对应的 column.key）                                                      |\n| themeVariant       | `\"default\" \\| \"elevo\"`   | 否   | -             | 主题变体                                                                                   |\n\n## Events\n\n| 事件                 | detail                                                                  | 说明                                                   |\n| -------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------ |\n| page.change          | `PageOrPageSizeChangeEventDetail` — 改变后的页码及每页条数              | page 或 pageSize 改变的回调                            |\n| page.size.change     | `PageOrPageSizeChangeEventDetail` — 改变后的页码及每页条数              | pageSize 变化的回调（已废弃，统一用 page.change 事件） |\n| sort.change          | `Sort \\| Sort[] \\| undefined` — 当前排序的信息                          | 排序变化的回调                                         |\n| row.click            | `RecordType` — 被点击的行数据                                           | 行点击时的回调                                         |\n| row.select           | `RowSelectEventDetail` — 改变后的 rowKey 及行数据                       | 行选中项发生变化时的回调                               |\n| row.select.v2        | `RecordType[]` — 改变后的行数据                                         | 行选中项发生变化时的回调（v2 版本）                    |\n| row.expand           | `RowExpandEventDetail` — 当前行的展开情况及数据                         | 点击展开图标时触发                                     |\n| expanded.rows.change | `(string \\| number)[]` — 所有展开行的 key                               | 展开的行变化时触发                                     |\n| row.drag             | `RowDragEventDetail` — 重新排序的行数据、拖拽的行数据、放下位置的行数据 | 表格行拖拽结束发生的事件                               |\n\n## Methods\n\n| 方法   | 参数                                                                 | 返回值 | 说明     |\n| ------ | -------------------------------------------------------------------- | ------ | -------- |\n| search | <ul><li>`params: { q: string }` - 搜索参数，q 为搜索关键词</li></ul> | `void` | 前端搜索 |\n\n## Examples\n\n### Basic\n\n展示大型表格的基本用法，配置 columns 和 dataSource，并支持分页与操作列。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: false\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n      - dataIndex: remarks\n        key: remarks\n        title: Long Column Long Column Long Column Long Column\n        width: 200\n        ellipsis: true\n      - dataIndex: operator\n        key: operator\n        title: 操作\n        width: 200\n        useBrick:\n          - brick: div\n            properties:\n              style:\n                display: flex\n                gap: 4px\n            children:\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  icon:\n                    lib: antd\n                    icon: edit\n                events:\n                  click:\n                    - action: message.info\n                      args:\n                        - <% DATA.rowData.name %>\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  danger: true\n                  icon:\n                    lib: antd\n                    icon: delete\n                events:\n                  click:\n                    - action: message.error\n                      args:\n                        - <% JSON.stringify(DATA) %>\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          remarks: Long text Long text\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: false,\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#     {\n#       dataIndex: \"remarks\",\n#       key: \"remarks\",\n#       title: \"Long Column Long Column Long Column Long Column\",\n#       width: 200,\n#       ellipsis: true,\n#     },\n#     {\n#       dataIndex: \"operator\",\n#       key: \"operator\",\n#       title: \"操作\",\n#       width: 200,\n#       useBrick: [\n#         {\n#           brick: \"div\",\n#           properties: {\n#             style: {\n#               display: \"flex\",\n#               gap: \"4px\",\n#             },\n#           },\n#           children: [\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"edit\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.info\",\n#                     args: [\"<% DATA.rowData.name %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 danger: true,\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"delete\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.error\",\n#                     args: [\"<% JSON.stringify(DATA) %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         remarks: \"Long text Long text\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n展示固定列、水平滚动及通过 useBrick 自定义单元格内容。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: max-content\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        width: 100\n        fixed: true\n        headerBrick:\n          useBrick:\n            brick: span\n            properties:\n              style:\n                color: red\n              textContent: <% DATA.title %>\n        useBrick:\n          - brick: span\n            properties:\n              style:\n                color: pink\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: column1\n        title: column1\n      - dataIndex: address\n        key: column2\n        title: column2\n      - dataIndex: address\n        key: column3\n        title: column3\n      - dataIndex: address\n        key: column4\n        title: column4\n      - dataIndex: address\n        key: column5\n        title: column5\n      - dataIndex: address\n        key: column6\n        title: column6\n      - dataIndex: address\n        key: column7\n        title: column7\n      - dataIndex: address\n        key: column8\n        title: column8\n      - dataIndex: address\n        key: column9\n        title: column9\n      - dataIndex: address\n        key: column10\n        title: column10\n      - dataIndex: age\n        key: age\n        title: Age\n        width: 100\n        fixed: right\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: \"max-content\",\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       width: 100,\n#       fixed: true,\n#       headerBrick: {\n#         useBrick: {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"red\",\n#             },\n#             textContent: \"<% DATA.title %>\",\n#           },\n#         },\n#       },\n#       useBrick: [\n#         {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"pink\",\n#             },\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column1\",\n#       title: \"column1\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column2\",\n#       title: \"column2\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column3\",\n#       title: \"column3\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column4\",\n#       title: \"column4\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column5\",\n#       title: \"column5\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column6\",\n#       title: \"column6\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column7\",\n#       title: \"column7\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column8\",\n#       title: \"column8\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column9\",\n#       title: \"column9\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column10\",\n#       title: \"column10\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       width: 100,\n#       fixed: \"right\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Front Search\n\n开启前端搜索，配合 search 方法与 searchFields 实现关键字过滤，支持多列排序。\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n    sort.change:\n      - action: console.log\n  properties:\n    id: table\n    frontSearch: true\n    searchFields:\n      - address\n    sort:\n      columnKey: age\n      order: descend\n    multiSort: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        sortable: true\n        sortPriority: 1\n      - dataIndex: address\n        key: address\n        title: Address\n        sortable: true\n        sortPriority: 2\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"address\"];\n#   table.sort = {\n#     columnKey: \"age\",\n#     order: \"descend\",\n#   };\n#   table.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       sortable: true,\n#       sortPriority: 1,\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#       sortable: true,\n#       sortPriority: 2,\n#     },\n#   ];\n#   table.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   table.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"sort.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Row Selection\n\n配置 rowSelection 开启行选择功能，选中状态变化时触发 row.select 事件。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    rowSelection: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        useBrick:\n          - brick: eo-tag\n            properties:\n              color: |\n                <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       useBrick: [\n#         {\n#           brick: \"eo-tag\",\n#           properties: {\n#             color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Row Click\n\n配置 rowClickable 开启行点击功能，点击行时触发 row.click 事件。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.click:\n      - action: console.log\n  properties:\n    rowClickable: true\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-clickable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.click\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expandable\n\n配置 expandable 开启行展开功能，支持展开行内嵌套表格。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    expandable:\n      rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n      expandedRowBrick:\n        useBrick:\n          brick: eo-next-table\n          properties:\n            scrollConfig: false\n            pagination: false\n            bordered: true\n            rowKey: title\n            columns:\n              - dataIndex: title\n                key: title\n                title: 标题\n              - dataIndex: description\n                key: description\n                title: 描述\n              - dataIndex: operator\n                key: operator\n                title: 操作\n                useBrick:\n                  brick: eo-link\n                  properties:\n                    textContent: 操作\n            dataSource:\n              list: <% DATA.rowData.info %>\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          info:\n            - title: 测试1\n              description: 这是一串描述\n              id: 1\n            - title: 测试2\n              description: 这是一串描述\n              id: 2\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          info:\n            - title: 测试3\n              description: 这是一串描述\n              id: 3\n            - title: 测试4\n              description: 这是一串描述\n              id: 4\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Nanjing\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Wuhan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandable = {\n#     rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n#     expandedRowBrick: {\n#       useBrick: {\n#         brick: \"eo-next-table\",\n#         properties: {\n#           scrollConfig: false,\n#           pagination: false,\n#           bordered: true,\n#           rowKey: \"title\",\n#           columns: [\n#             {\n#               dataIndex: \"title\",\n#               key: \"title\",\n#               title: \"标题\",\n#             },\n#             {\n#               dataIndex: \"description\",\n#               key: \"description\",\n#               title: \"描述\",\n#             },\n#             {\n#               dataIndex: \"operator\",\n#               key: \"operator\",\n#               title: \"操作\",\n#               useBrick: {\n#                 brick: \"eo-link\",\n#                 properties: {\n#                   textContent: \"操作\",\n#                 },\n#               },\n#             },\n#           ],\n#           dataSource: {\n#             list: \"<% DATA.rowData.info %>\",\n#           },\n#         },\n#       },\n#     },\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         info: [\n#           {\n#             title: \"测试1\",\n#             description: \"这是一串描述\",\n#             id: 1,\n#           },\n#           {\n#             title: \"测试2\",\n#             description: \"这是一串描述\",\n#             id: 2,\n#           },\n#         ],\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         info: [\n#           {\n#             title: \"测试3\",\n#             description: \"这是一串描述\",\n#             id: 3,\n#           },\n#           {\n#             title: \"测试4\",\n#             description: \"这是一串描述\",\n#             id: 4,\n#           },\n#         ],\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Nanjing\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Wuhan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Bordered\n\n展示带边框的表格样式。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Size\n\n展示不同尺寸（large、middle、small）的表格效果。\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n  - brick: :forEach\n    dataSource:\n      - large\n      - middle\n      - small\n    children:\n      - brick: strong\n        properties:\n          textContent: \"<% `Size: ${ITEM}` %>\"\n      - brick: eo-next-table\n        properties:\n          size: <% ITEM %>\n          pagination: false\n          columns:\n            - dataIndex: name\n              key: name\n              title: Name\n            - dataIndex: age\n              key: age\n              title: Age\n            - dataIndex: address\n              key: address\n              title: Address\n          dataSource:\n            pageSize: 5\n            page: 1\n            list:\n              - key: 0\n                name: Jack\n                age: 18\n                address: Guangzhou\n              - key: 1\n                name: Alex\n                age: 20\n                address: Shanghai\n              - key: 3\n                name: Sam\n                age: 28\n                address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n#   <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Draggable\n\n开启 rowDraggable 支持行拖拽排序，拖拽结束触发 row.drag 事件。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.drag:\n      - action: console.log\n  properties:\n    rowKey: name\n    rowDraggable: true\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.drag\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n通过列配置的 colSpan、cellColSpanKey、cellRowSpanKey 实现单元格合并。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    pagination: false\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: mobile\n        key: mobile\n        title: phone\n        colSpan: 2\n        cellColSpanKey: mobileColSpan\n        cellRowSpanKey: mobileRowSpan\n      - dataIndex: landlines\n        key: landlines\n        colSpan: 0\n        cellColSpanKey: landlinesColSpan\n        cellRowSpanKey: landlinesRowSpan\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          mobile: 18900010222\n          landlines: 0571-22098909\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          mobile: 18900010333\n          mobileColSpan: 2\n          landlinesColSpan: 0\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          mobile: 18900010444\n          landlines: 0571-22098707\n          landlinesRowSpan: 2\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          mobile: 18900010555\n          landlines: 0571-22098707\n          landlinesRowSpan: 0\n          mobileRowSpan: 2\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n          mobile: 18900010555\n          landlines: 0571-22098606\n          mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"mobile\",\n#       key: \"mobile\",\n#       title: \"phone\",\n#       colSpan: 2,\n#       cellColSpanKey: \"mobileColSpan\",\n#       cellRowSpanKey: \"mobileRowSpan\",\n#     },\n#     {\n#       dataIndex: \"landlines\",\n#       key: \"landlines\",\n#       colSpan: 0,\n#       cellColSpanKey: \"landlinesColSpan\",\n#       cellRowSpanKey: \"landlinesRowSpan\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         mobile: 18900010222,\n#         landlines: \"0571-22098909\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         mobile: 18900010333,\n#         mobileColSpan: 2,\n#         landlinesColSpan: 0,\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         mobile: 18900010444,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 2,\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 0,\n#         mobileRowSpan: 2,\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098606\",\n#         mobileRowSpan: 0,\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    expandable:\n      defaultExpandAllRows: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 28\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 35\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 33\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.expandable = {\n#     defaultExpandAllRows: true,\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 28,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 33,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Dynamic Columns\n\n通过 cell 配置统一自定义单元格渲染，结合动态列实现灵活的表格展示。\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n  cell:\n    useBrick:\n      - if: <% DATA.columnKey !== '01-13' %>\n        brick: em\n        properties:\n          textContent: <% DATA.cellData %>\n      - if: <% DATA.columnKey === '01-13' %>\n        brick: del\n        properties:\n          textContent: <% DATA.cellData %>\n    header:\n      useBrick:\n        brick: em\n        properties:\n          textContent: <% DATA.title %>\n  columns: <% CTX.dates %>\n  dataSource:\n    list:\n      - \"01-11\": \"abc\"\n        \"01-12\": \"def\"\n        \"01-13\": \"ghi\"\n        \"01-14\": \"jkl\"\n      - \"01-11\": \"123\"\n        \"01-12\": \"345\"\n        \"01-13\": \"789\"\n        \"01-14\": \"-\"\ncontext:\n  - name: dates\n    value: |\n      <%\n        new Array(4).fill(null).map(\n          (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n        ).map((key) => ({\n          dataIndex: key,\n          key,\n          title: key,\n        }))\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.cell = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.columnKey !== '01-13' %>\",\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#       {\n#         if: \"<% DATA.columnKey === '01-13' %>\",\n#         brick: \"del\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#     ],\n#     header: {\n#       useBrick: {\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.title %>\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.columns = \"<% CTX.dates %>\";\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         \"01-11\": \"abc\",\n#         \"01-12\": \"def\",\n#         \"01-13\": \"ghi\",\n#         \"01-14\": \"jkl\",\n#       },\n#       {\n#         \"01-11\": \"123\",\n#         \"01-12\": \"345\",\n#         \"01-13\": \"789\",\n#         \"01-14\": \"-\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Cell Status\n\n通过列的 cellStatus 配置，根据数据值设置单元格左边框颜色来表示状态。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        cellStatus:\n          dataIndex: age\n          mapping:\n            - value: 18\n              leftBorderColor: green\n            - value: 20\n              leftBorderColor: blue\n            - value: 28\n              leftBorderColor: red\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       cellStatus: {\n#         dataIndex: \"age\",\n#         mapping: [\n#           {\n#             value: 18,\n#             leftBorderColor: \"green\",\n#           },\n#           {\n#             value: 20,\n#             leftBorderColor: \"blue\",\n#           },\n#           {\n#             value: 28,\n#             leftBorderColor: \"red\",\n#           },\n#         ],\n#       },\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Hidden Columns\n\n通过 hiddenColumns 隐藏指定列，传入对应的 column.key 即可。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    hiddenColumns:\n      - age\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.hiddenColumns = [\"age\"];\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Selected Row Keys\n\n通过 selectedRowKeys 设置默认选中的行。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n    row.select.v2:\n      - action: console.log\n  properties:\n    rowSelection: true\n    selectedRowKeys:\n      - 0\n      - 2\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.selectedRowKeys = [0, 2];\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"row.select.v2\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expanded Row Keys\n\n通过 expandedRowKeys 设置默认展开的行。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    expandedRowKeys:\n      - 0\n    expandable:\n      expandedRowBrick:\n        useBrick:\n          brick: span\n          properties:\n            textContent: 展开内容\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandedRowKeys = [0];\n#   brick_1.expandable = {\n#     expandedRowBrick: {\n#       useBrick: {\n#         brick: \"span\",\n#         properties: {\n#           textContent: \"展开内容\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Loading\n\n显示加载中状态。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    loading: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table loading id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Show Header\n\n通过 showHeader 控制是否显示表头。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    showHeader: false\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Optimized Columns\n\n通过 optimizedColumns 指定需要优化渲染的列。\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    optimizedColumns:\n      - name\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.optimizedColumns = [\"name\"];\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Theme Variant Elevo\n\n使用 themeVariant 为表格设置 elevo 主题样式。\n\n```yaml preview\nbrick: ai-portal.home-container\nproperties:\n  style:\n    padding: 2em\n    backgroundColor: \"#d8d8d8\"\nchildren:\n  - brick: eo-next-table\n    properties:\n      themeVariant: elevo\n      pagination: false\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        pageSize: 5\n        page: 1\n        list:\n          - key: 0\n            name: Jack\n            age: 18\n            address: Guangzhou\n          - key: 1\n            name: Alex\n            age: 20\n            address: Shanghai\n          - key: 3\n            name: Sam\n            age: 28\n            address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n#   <eo-next-table theme-variant=\"elevo\" id=\"brick-1\"></eo-next-table>\n# </ai-portal.home-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
+  },
+  "eo-workbench-layout": {
+    "doc": "---\ntagName: eo-workbench-layout\ndisplayName: WrappedEoWorkbenchLayout\ndescription: 工作台布局（拖拽式卡片布局，支持编辑模式）\ncategory: layout\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-workbench-layout\n\n> 工作台布局（拖拽式卡片布局，支持编辑模式）。⚠️ 已废弃，请使用 `eo-workbench-layout-v2`。\n\n## Props\n\n| 属性          | 类型       | 必填 | 默认值 | 说明                                                         |\n| ------------- | ---------- | ---- | ------ | ------------------------------------------------------------ |\n| cardTitle     | `string`   | 否   | -      | 编辑模式下左侧卡片列表面板的标题                             |\n| isEdit        | `boolean`  | 否   | -      | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |\n| layouts       | `Layout[]` | 否   | -      | 当前布局配置，每项对应一个卡片的位置与大小                   |\n| componentList | `Item[]`   | 否   | -      | 组件列表，每项包含 key、title、useBrick 和 position 信息     |\n\n## Events\n\n| 事件         | detail                                                                                              | 说明               |\n| ------------ | --------------------------------------------------------------------------------------------------- | ------------------ |\n| change       | `Layout[]` — 当前布局配置数组                                                                       | 布局发生变化时触发 |\n| save         | `Layout[]` — 保存时的布局配置数组                                                                   | 点击保存按钮时触发 |\n| cancel       | `void`                                                                                              | 点击取消按钮时触发 |\n| action.click | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 操作点击事件       |\n\n## Methods\n\n| 方法       | 参数                          | 返回值 | 说明         |\n| ---------- | ----------------------------- | ------ | ------------ |\n| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |\n\n## Examples\n\n### Basic\n\n展示工作台布局的基本用法，通过 layouts 和 componentList 配置卡片位置与内容。\n\n```yaml preview\n- brick: eo-workbench-layout\n  properties:\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Edit Mode\n\n开启 isEdit 进入编辑模式，支持拖拽调整卡片位置，并监听 save 和 cancel 事件。\n\n```yaml preview\n- brick: eo-workbench-layout\n  events:\n    save:\n      - action: console.log\n    cancel:\n      - action: console.log\n    change:\n      - action: console.log\n  properties:\n    isEdit: true\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"save\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"cancel\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
+  "eo-workbench-layout-v2": {
+    "doc": "---\ntagName: eo-workbench-layout-v2\ndisplayName: WrappedEoWorkbenchLayoutV2\ndescription: 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）\ncategory: layout\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-workbench-layout-v2\n\n> 工作台布局 V2，支持拖拽式卡片布局与全局样式（不使用 shadow DOM）\n\n## Props\n\n| 属性                       | 类型                                 | 必填 | 默认值 | 说明                                                         |\n| -------------------------- | ------------------------------------ | ---- | ------ | ------------------------------------------------------------ |\n| cardTitle                  | `string`                             | 否   | -      | 编辑模式下左侧卡片列表面板的标题                             |\n| isEdit                     | `boolean`                            | 否   | -      | 是否进入编辑模式，编辑模式下可拖拽调整布局并显示卡片选择面板 |\n| layouts                    | `ExtraLayout[]`                      | 否   | -      | 当前布局配置，每项对应一个卡片的位置与大小及样式信息         |\n| toolbarBricks              | `{ useBrick: UseSingleBrickConf[] }` | 否   | -      | 编辑模式下工具栏区域的自定义构件                             |\n| componentList              | `WorkbenchComponent[]`               | 否   | -      | 组件列表，每项包含 key、title、useBrick 和 position 信息     |\n| customDefaultCardConfigMap | `Record<string, CardStyleConfig>`    | 否   | -      | 自定义卡片默认配置，用于覆盖默认卡片样式配置                 |\n| showSettingButton          | `boolean`                            | 否   | -      | 是否显示设置按钮，用于触发页面样式和布局设置                 |\n| gap                        | `number`                             | 否   | -      | 卡片之间的间距（px）                                         |\n\n## Events\n\n| 事件         | detail                                                                                              | 说明                           |\n| ------------ | --------------------------------------------------------------------------------------------------- | ------------------------------ |\n| change       | `ExtraLayout[]` — 当前布局配置数组                                                                  | 布局发生变化时触发             |\n| save         | `ExtraLayout[]` — 保存时的布局配置数组                                                              | 点击保存按钮时触发             |\n| cancel       | `void`                                                                                              | 点击取消按钮时触发             |\n| setting      | `void`                                                                                              | 点击设置按钮时触发             |\n| action.click | `{ action: SimpleAction; layouts: Layout[] }` — { action: 点击的操作项, layouts: 当前布局配置数组 } | 更多操作菜单中的操作点击时触发 |\n\n## Methods\n\n| 方法       | 参数                          | 返回值 | 说明         |\n| ---------- | ----------------------------- | ------ | ------------ |\n| setLayouts | `(layouts: Layout[]) => void` | `void` | 设置布局配置 |\n\n## Examples\n\n### Basic\n\n展示工作台布局 V2 的基本用法，通过 layouts 和 componentList 配置卡片布局。\n\n```yaml preview\n- brick: eo-workbench-layout-v2\n  properties:\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n        type: hello\n        cardWidth: 2\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n        type: world\n        cardWidth: 2\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n        type: small\n        cardWidth: 1\n    componentList:\n      - title: Hello 卡片\n        key: hello\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              background: \"#fff\"\n              height: 100%\n            textContent: Hello World\n      - title: World 卡片\n        key: world\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              background: \"#fff\"\n              height: 100%\n            textContent: World Content\n      - title: Small 卡片\n        key: small\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              background: \"#fff\"\n              height: 100%\n            textContent: Small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout-v2 id=\"brick-1\"></eo-workbench-layout-v2>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#       type: \"hello\",\n#       cardWidth: 2,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#       type: \"world\",\n#       cardWidth: 2,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#       type: \"small\",\n#       cardWidth: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"Hello 卡片\",\n#       key: \"hello\",\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             background: \"#fff\",\n#             height: \"100%\",\n#           },\n#           textContent: \"Hello World\",\n#         },\n#       },\n#     },\n#     {\n#       title: \"World 卡片\",\n#       key: \"world\",\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             background: \"#fff\",\n#             height: \"100%\",\n#           },\n#           textContent: \"World Content\",\n#         },\n#       },\n#     },\n#     {\n#       title: \"Small 卡片\",\n#       key: \"small\",\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             background: \"#fff\",\n#             height: \"100%\",\n#           },\n#           textContent: \"Small\",\n#         },\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Edit Mode with Settings\n\n开启编辑模式，显示设置按钮，并监听 save、cancel、setting 事件。\n\n```yaml preview\n- brick: eo-workbench-layout-v2\n  events:\n    save:\n      - action: console.log\n    cancel:\n      - action: console.log\n    change:\n      - action: console.log\n    setting:\n      - action: console.log\n  properties:\n    isEdit: true\n    showSettingButton: true\n    gap: 16\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n        type: hello\n        cardWidth: 2\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n        type: small\n        cardWidth: 1\n    componentList:\n      - title: Hello 卡片\n        key: hello\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              height: 100%\n            textContent: Hello World\n      - title: Small 卡片\n        key: small\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              height: 100%\n            textContent: Small\n      - title: Extra 卡片\n        key: extra\n        position:\n          i: extra\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        useBrick:\n          brick: div\n          properties:\n            style:\n              padding: 16px\n              height: 100%\n            textContent: Extra Content\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout-v2\n#   is-edit\n#   show-setting-button\n#   gap=\"16\"\n#   id=\"brick-1\"\n# ></eo-workbench-layout-v2>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#       type: \"hello\",\n#       cardWidth: 2,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#       type: \"small\",\n#       cardWidth: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"Hello 卡片\",\n#       key: \"hello\",\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             height: \"100%\",\n#           },\n#           textContent: \"Hello World\",\n#         },\n#       },\n#     },\n#     {\n#       title: \"Small 卡片\",\n#       key: \"small\",\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             height: \"100%\",\n#           },\n#           textContent: \"Small\",\n#         },\n#       },\n#     },\n#     {\n#       title: \"Extra 卡片\",\n#       key: \"extra\",\n#       position: {\n#         i: \"extra\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             padding: \"16px\",\n#             height: \"100%\",\n#           },\n#           textContent: \"Extra Content\",\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"save\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"cancel\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"setting\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "eo-tree": {
-    "doc": "树形构件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Checkable\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  checkable: true\n  selectable: false\n  showLine: true\n  switcherIcon: chevron\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\nevents:\n  check:\n    action: console.log\n  check.detail:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.switcherIcon = \"chevron\";\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"check\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"check.detail\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### titleSuffixBrick\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  titleSuffixBrick:\n    useBrick:\n      brick: eo-link\n      properties:\n        icon:\n          lib: antd\n          icon: edit\n          theme: outlined\n        style:\n          margin-left: 5px\n          font-size: 12px\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.titleSuffixBrick = {\n#     useBrick: {\n#       brick: \"eo-link\",\n#       properties: {\n#         icon: {\n#           lib: \"antd\",\n#           icon: \"edit\",\n#           theme: \"outlined\",\n#         },\n#         style: {\n#           \"margin-left\": \"5px\",\n#           \"font-size\": \"12px\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-tree\ndisplayName: WrappedEoTree\ndescription: 树形构件\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-tree\n\n> 树形构件\n\n## Props\n\n| 属性             | 类型                               | 必填 | 默认值 | 说明                                                                            |\n| ---------------- | ---------------------------------- | ---- | ------ | ------------------------------------------------------------------------------- |\n| dataSource       | `TreeNode[]`                       | 否   | -      | 树形数据源                                                                      |\n| checkable        | `boolean`                          | 否   | -      | 是否显示 Checkbox，开启后可勾选节点                                             |\n| selectable       | `boolean`                          | 否   | -      | 是否可选中节点                                                                  |\n| defaultExpandAll | `boolean`                          | 否   | -      | 是否默认展开所有树节点                                                          |\n| showLine         | `boolean`                          | 否   | -      | 是否显示连接线                                                                  |\n| expandedKeys     | `TreeNodeKey[]`                    | 否   | -      | 受控展开的节点 key 集合                                                         |\n| checkedKeys      | `TreeNodeKey[]`                    | 否   | -      | 受控勾选的节点 key 集合（仅在 checkable 为 true 时有效）                        |\n| nodeDraggable    | `boolean \\| { icon?: false }`      | 否   | -      | 是否允许拖拽节点，也可传入对象配置是否显示拖拽图标                              |\n| switcherIcon     | `\"auto\" \\| \"chevron\" \\| false`     | 否   | -      | 自定义展开/折叠图标，可选 auto（默认箭头）、chevron（下箭头）或 false（不显示） |\n| allowDrop        | `(info: AllowDropInfo) => boolean` | 否   | -      | 是否允许拖放到指定位置的判断函数                                                |\n| titleSuffixBrick | `{ useBrick: UseBrickConf }`       | 否   | -      | 节点标题后缀插槽，通过 useBrick 在每个节点标题后渲染自定义构件                  |\n\n## Events\n\n| 事件         | detail                                                                                                                           | 说明                               |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |\n| check        | `TreeNodeKey[]` — 所有勾选节点的 key 数组                                                                                        | 勾选状态变化时触发                 |\n| check.detail | `CheckDetail` — { checkedKeys: 已勾选的节点 key 数组, halfCheckedKeys: 半选中的节点 key 数组 }                                   | 勾选状态变化时触发，包含半选中状态 |\n| expand       | `TreeNodeKey[]` — 当前展开的节点 key 数组                                                                                        | 展开/折叠节点时触发                |\n| node.drop    | `DropDetail` — { dragNode: 被拖拽的节点, dropNode: 放置目标节点, dropPosition: 放置位置（0 表示内部，-1 表示上方，1 表示下方） } | 节点拖拽放置时触发                 |\n\n## Examples\n\n### Basic\n\n展示树形构件的基本用法，默认展开所有节点。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Checkable\n\n开启 checkable 显示勾选框，并配置 showLine 显示连接线，勾选变化时触发 check 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  checkable: true\n  selectable: false\n  showLine: true\n  switcherIcon: chevron\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\nevents:\n  check:\n    action: console.log\n  check.detail:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.switcherIcon = \"chevron\";\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"check\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"check.detail\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Title Suffix Brick\n\n通过 titleSuffixBrick 在每个节点标题后渲染自定义构件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  titleSuffixBrick:\n    useBrick:\n      brick: eo-link\n      properties:\n        icon:\n          lib: antd\n          icon: edit\n          theme: outlined\n        style:\n          margin-left: 5px\n          font-size: 12px\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.titleSuffixBrick = {\n#     useBrick: {\n#       brick: \"eo-link\",\n#       properties: {\n#         icon: {\n#           lib: \"antd\",\n#           icon: \"edit\",\n#           theme: \"outlined\",\n#         },\n#         style: {\n#           \"margin-left\": \"5px\",\n#           \"font-size\": \"12px\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Draggable\n\n开启 nodeDraggable 允许拖拽节点，拖拽放置后触发 node.drop 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  defaultExpandAll: true\n  nodeDraggable: true\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\nevents:\n  node.drop:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.nodeDraggable = true;\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"node.drop\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Controlled Expand and Check\n\n通过 expandedKeys 和 checkedKeys 受控管理展开与勾选状态，并监听 expand 事件。\n\n```yaml preview\nbrick: eo-tree\nproperties:\n  checkable: true\n  expandedKeys:\n    - 0-0\n  checkedKeys:\n    - 0-0-0-0\n  dataSource:\n    - title: parent 1\n      key: 0-0\n      children:\n        - title: parent 1-0\n          key: 0-0-0\n          children:\n            - title: leaf\n              key: 0-0-0-0\n            - title: leaf\n              key: 0-0-0-1\n        - title: parent 1-1\n          key: 0-0-1\n          children:\n            - title: sss\n              key: 0-0-1-0\nevents:\n  expand:\n    action: console.log\n  check:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree checkable id=\"brick-1\"></eo-tree>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandedKeys = [\"0-0\"];\n#   brick_1.checkedKeys = [\"0-0-0-0\"];\n#   brick_1.dataSource = [\n#     {\n#       title: \"parent 1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"parent 1-0\",\n#           key: \"0-0-0\",\n#           children: [\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-0\",\n#             },\n#             {\n#               title: \"leaf\",\n#               key: \"0-0-0-1\",\n#             },\n#           ],\n#         },\n#         {\n#           title: \"parent 1-1\",\n#           key: \"0-0-1\",\n#           children: [\n#             {\n#               title: \"sss\",\n#               key: \"0-0-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"check\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "eo-tree-select": {
-    "doc": "构件 `eo-tree-select`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-tree-select\n  properties:\n    treeData:\n      - title: Node1\n        value: 0\n        key: 0\n        children:\n          - title: Node1-1\n            value: 0-1\n          - title: Node1-2\n            value: 0-2\n          - title: Node1-3\n            value: 0-3\n      - title: Node2\n        value: 1\n        key: 1\n        children:\n          - title: Node2-1\n            value: 1-1\n          - title: Node2-2\n            value: 1-2\n          - title: Node2-3\n            value: 1-3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select id=\"brick-1\"></eo-tree-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: 0,\n#       key: 0,\n#       children: [\n#         {\n#           title: \"Node1-1\",\n#           value: \"0-1\",\n#         },\n#         {\n#           title: \"Node1-2\",\n#           value: \"0-2\",\n#         },\n#         {\n#           title: \"Node1-3\",\n#           value: \"0-3\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"Node2\",\n#       value: 1,\n#       key: 1,\n#       children: [\n#         {\n#           title: \"Node2-1\",\n#           value: \"1-1\",\n#         },\n#         {\n#           title: \"Node2-2\",\n#           value: \"1-2\",\n#         },\n#         {\n#           title: \"Node2-3\",\n#           value: \"1-3\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    validate.error:\n      - action: console.log\n  children:\n    - brick: eo-tree-select\n      properties:\n        label: tree\n        name: tree\n        required: true\n        treeData:\n          - title: \"Node1\"\n            value: \"Node1\"\n            key: \"0-0\"\n            children:\n              - title: \"Child Node1-1\"\n                value: \"Child Node1-1\"\n                key: \"0-0-0\"\n              - title: \"Child Node1-2\"\n                value: \"Child Node1-2\"\n                key: \"0-0-1\"\n          - title: \"Node2\"\n            value: \"0-1\"\n            key: \"0-1\"\n            children:\n              - title: \"Child Node2-1\"\n                value: \"Child Node2-1\"\n                key: \"0-1-0\"\n              - title: \"Child Node2-2\"\n                value: \"Child Node2-2\"\n                key: \"0-1-1\"\n                children:\n                  - title: Child Node2-2-1\n                    value: Child Node2-2-1\n                    key: \"0-1-1-0\"\n        multiple: true\n        checkable: true\n        placeholder: 请选择树节点\n      events:\n        change:\n          - action: console.log\n        select:\n          - action: console.log\n        expand:\n          - action: console.log\n        search:\n          - action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-tree-select\n#     label=\"tree\"\n#     name=\"tree\"\n#     required\n#     multiple\n#     checkable\n#     placeholder=\"请选择树节点\"\n#     id=\"brick-2\"\n#   ></eo-tree-select>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"validate.error\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: \"Node1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"Child Node1-1\",\n#           value: \"Child Node1-1\",\n#           key: \"0-0-0\",\n#         },\n#         {\n#           title: \"Child Node1-2\",\n#           value: \"Child Node1-2\",\n#           key: \"0-0-1\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"Node2\",\n#       value: \"0-1\",\n#       key: \"0-1\",\n#       children: [\n#         {\n#           title: \"Child Node2-1\",\n#           value: \"Child Node2-1\",\n#           key: \"0-1-0\",\n#         },\n#         {\n#           title: \"Child Node2-2\",\n#           value: \"Child Node2-2\",\n#           key: \"0-1-1\",\n#           children: [\n#             {\n#               title: \"Child Node2-2-1\",\n#               value: \"Child Node2-2-1\",\n#               key: \"0-1-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-tree-select\ndisplayName: WrappedEoTreeSelect\ndescription: 树选择器，支持从树形数据中单选或多选节点\ncategory: form-input-basic\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-tree-select\n\n> 树选择器，支持从树形数据中单选或多选节点\n\n## Props\n\n| 属性                  | 类型                                    | 必填 | 默认值         | 说明                                                          |\n| --------------------- | --------------------------------------- | ---- | -------------- | ------------------------------------------------------------- |\n| name                  | `string`                                | 否   | -              | 表单字段名                                                    |\n| label                 | `string`                                | 否   | -              | 表单字段标签                                                  |\n| required              | `boolean`                               | 否   | -              | 是否为必填项                                                  |\n| treeData              | `AntdTreeSelectProps[\"treeData\"]`       | 否   | -              | 树形数据源                                                    |\n| treeDefaultExpandAll  | `boolean`                               | 否   | -              | 是否默认展开所有树节点                                        |\n| treeExpandedKeys      | `string[]`                              | 否   | -              | 受控展开的树节点 key 集合                                     |\n| fieldNames            | `AntdTreeSelectProps[\"fieldNames\"]`     | 否   | -              | 自定义字段名，指定 label、value、children 对应的字段          |\n| value                 | `AntdTreeSelectProps[\"value\"]`          | 否   | -              | 当前选中的值                                                  |\n| placeholder           | `string`                                | 否   | -              | 输入框占位文本                                                |\n| multiple              | `boolean`                               | 否   | -              | 是否支持多选                                                  |\n| disabled              | `boolean`                               | 否   | -              | 是否禁用                                                      |\n| checkable             | `boolean`                               | 否   | -              | 是否支持勾选树节点（开启后自动开启 multiple 模式）            |\n| allowClear            | `boolean`                               | 否   | `true`         | 是否支持清除                                                  |\n| loading               | `boolean`                               | 否   | `false`        | 是否显示加载中状态                                            |\n| filterTreeNode        | `AntdTreeSelectProps[\"filterTreeNode\"]` | 否   | -              | 自定义树节点过滤函数                                          |\n| showSearch            | `boolean`                               | 否   | `true`         | 是否支持搜索，开启后可通过输入关键字过滤树节点                |\n| suffixIcon            | `GeneralIconProps`                      | 否   | -              | 自定义下拉箭头图标                                            |\n| popupPlacement        | `AntdTreeSelectProps[\"placement\"]`      | 否   | `\"bottomLeft\"` | 浮层预设位置，可选 bottomLeft、bottomRight、topLeft、topRight |\n| size                  | `AntdTreeSelectProps[\"size\"]`           | 否   | -              | 输入框大小，可选 large、middle、small                         |\n| maxTagCount           | `number \\| \"responsive\"`                | 否   | -              | 多选模式下最多显示的 tag 数量，设为 responsive 时会自适应宽度 |\n| dropdownStyle         | `CSSProperties`                         | 否   | -              | 下拉框的样式                                                  |\n| popupMatchSelectWidth | `boolean`                               | 否   | `true`         | 下拉菜单的宽度是否与选择框相同                                |\n\n## Events\n\n| 事件   | detail                                                              | 说明                  |\n| ------ | ------------------------------------------------------------------- | --------------------- |\n| change | `{ value: AntdTreeSelectProps[\"value\"] }` — { value: 选择的值 }     | 选中值变化时触发      |\n| search | `string` — 搜索关键词                                               | 搜索框值变化时触发    |\n| select | `{ value: AntdTreeSelectProps[\"value\"] }` — { value: 选中的节点值 } | 选中某一树节点时触发  |\n| expand | `{ keys: React.Key[] }` — { keys: 展开的节点 key 数组 }             | 树节点展开/收缩时触发 |\n\n## Examples\n\n### Basic\n\n展示树选择器的基本用法，通过 treeData 提供树形数据源。\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-tree-select\n  properties:\n    treeData:\n      - title: Node1\n        value: 0\n        key: 0\n        children:\n          - title: Node1-1\n            value: 0-1\n          - title: Node1-2\n            value: 0-2\n          - title: Node1-3\n            value: 0-3\n      - title: Node2\n        value: 1\n        key: 1\n        children:\n          - title: Node2-1\n            value: 1-1\n          - title: Node2-2\n            value: 1-2\n          - title: Node2-3\n            value: 1-3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select id=\"brick-1\"></eo-tree-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: 0,\n#       key: 0,\n#       children: [\n#         {\n#           title: \"Node1-1\",\n#           value: \"0-1\",\n#         },\n#         {\n#           title: \"Node1-2\",\n#           value: \"0-2\",\n#         },\n#         {\n#           title: \"Node1-3\",\n#           value: \"0-3\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"Node2\",\n#       value: 1,\n#       key: 1,\n#       children: [\n#         {\n#           title: \"Node2-1\",\n#           value: \"1-1\",\n#         },\n#         {\n#           title: \"Node2-2\",\n#           value: \"1-2\",\n#         },\n#         {\n#           title: \"Node2-3\",\n#           value: \"1-3\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用树选择器，配置 name、label 和 required 实现表单集成与校验。\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    validate.error:\n      - action: console.log\n  children:\n    - brick: eo-tree-select\n      properties:\n        label: tree\n        name: tree\n        required: true\n        treeData:\n          - title: \"Node1\"\n            value: \"Node1\"\n            key: \"0-0\"\n            children:\n              - title: \"Child Node1-1\"\n                value: \"Child Node1-1\"\n                key: \"0-0-0\"\n              - title: \"Child Node1-2\"\n                value: \"Child Node1-2\"\n                key: \"0-0-1\"\n          - title: \"Node2\"\n            value: \"0-1\"\n            key: \"0-1\"\n            children:\n              - title: \"Child Node2-1\"\n                value: \"Child Node2-1\"\n                key: \"0-1-0\"\n              - title: \"Child Node2-2\"\n                value: \"Child Node2-2\"\n                key: \"0-1-1\"\n                children:\n                  - title: Child Node2-2-1\n                    value: Child Node2-2-1\n                    key: \"0-1-1-0\"\n        multiple: true\n        checkable: true\n        placeholder: 请选择树节点\n      events:\n        change:\n          - action: console.log\n        select:\n          - action: console.log\n        expand:\n          - action: console.log\n        search:\n          - action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-tree-select\n#     label=\"tree\"\n#     name=\"tree\"\n#     required\n#     multiple\n#     checkable\n#     placeholder=\"请选择树节点\"\n#     id=\"brick-2\"\n#   ></eo-tree-select>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"validate.error\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: \"Node1\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"Child Node1-1\",\n#           value: \"Child Node1-1\",\n#           key: \"0-0-0\",\n#         },\n#         {\n#           title: \"Child Node1-2\",\n#           value: \"Child Node1-2\",\n#           key: \"0-0-1\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"Node2\",\n#       value: \"0-1\",\n#       key: \"0-1\",\n#       children: [\n#         {\n#           title: \"Child Node2-1\",\n#           value: \"Child Node2-1\",\n#           key: \"0-1-0\",\n#         },\n#         {\n#           title: \"Child Node2-2\",\n#           value: \"Child Node2-2\",\n#           key: \"0-1-1\",\n#           children: [\n#             {\n#               title: \"Child Node2-2-1\",\n#               value: \"Child Node2-2-1\",\n#               key: \"0-1-1-0\",\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"select\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_2.addEventListener(\"search\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Multiple Selection with Max Tag Count\n\n开启多选模式并设置 maxTagCount 限制显示的 tag 数量。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-tree-select\n  properties:\n    multiple: true\n    maxTagCount: 2\n    treeDefaultExpandAll: true\n    placeholder: 可多选，最多显示2个标签\n    treeData:\n      - title: Node1\n        value: \"0-0\"\n        key: \"0-0\"\n        children:\n          - title: Node1-1\n            value: \"0-0-1\"\n            key: \"0-0-1\"\n          - title: Node1-2\n            value: \"0-0-2\"\n            key: \"0-0-2\"\n      - title: Node2\n        value: \"0-1\"\n        key: \"0-1\"\n        children:\n          - title: Node2-1\n            value: \"0-1-1\"\n            key: \"0-1-1\"\n          - title: Node2-2\n            value: \"0-1-2\"\n            key: \"0-1-2\"\n  events:\n    change:\n      - action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select\n#   multiple\n#   tree-default-expand-all\n#   placeholder=\"可多选，最多显示2个标签\"\n#   id=\"brick-1\"\n# ></eo-tree-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.maxTagCount = 2;\n#   brick_1.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: \"0-0\",\n#       key: \"0-0\",\n#       children: [\n#         {\n#           title: \"Node1-1\",\n#           value: \"0-0-1\",\n#           key: \"0-0-1\",\n#         },\n#         {\n#           title: \"Node1-2\",\n#           value: \"0-0-2\",\n#           key: \"0-0-2\",\n#         },\n#       ],\n#     },\n#     {\n#       title: \"Node2\",\n#       value: \"0-1\",\n#       key: \"0-1\",\n#       children: [\n#         {\n#           title: \"Node2-1\",\n#           value: \"0-1-1\",\n#           key: \"0-1-1\",\n#         },\n#         {\n#           title: \"Node2-2\",\n#           value: \"0-1-2\",\n#           key: \"0-1-2\",\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Custom Field Names and Disabled\n\n使用 fieldNames 自定义数据源字段，并展示禁用状态。\n\n```yaml preview minHeight=\"400px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      gap: 16px\n  children:\n    - brick: eo-tree-select\n      properties:\n        fieldNames:\n          label: name\n          value: id\n          children: sub\n        treeDefaultExpandAll: true\n        placeholder: 自定义字段名\n        treeData:\n          - name: 技术\n            id: tech\n            sub:\n              - name: 前端\n                id: frontend\n              - name: 后端\n                id: backend\n    - brick: eo-tree-select\n      properties:\n        disabled: true\n        value: \"0-0\"\n        placeholder: 禁用状态\n        treeData:\n          - title: Node1\n            value: \"0-0\"\n            key: \"0-0\"\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n#   <eo-tree-select\n#     tree-default-expand-all\n#     placeholder=\"自定义字段名\"\n#     id=\"brick-1\"\n#   ></eo-tree-select>\n#   <eo-tree-select disabled placeholder=\"禁用状态\" id=\"brick-2\"></eo-tree-select>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.fieldNames = {\n#     label: \"name\",\n#     value: \"id\",\n#     children: \"sub\",\n#   };\n#   brick_1.treeData = [\n#     {\n#       name: \"技术\",\n#       id: \"tech\",\n#       sub: [\n#         {\n#           name: \"前端\",\n#           id: \"frontend\",\n#         },\n#         {\n#           name: \"后端\",\n#           id: \"backend\",\n#         },\n#       ],\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.value = \"0-0\";\n#   brick_2.treeData = [\n#     {\n#       title: \"Node1\",\n#       value: \"0-0\",\n#       key: \"0-0\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "eo-text-tooltip": {
-    "doc": "eo-text-tooltip\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      display: flex\n      flex-direction: column\n      gap: 16px\n  children:\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\n        lineClamp: 0\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 单行不超出不显示tips\n        lineClamp: 1\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\n        lineClamp: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\"\n#     line-clamp=\"0\"\n#   ></eo-text-tooltip>\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"单行不超出不显示tips\"\n#     line-clamp=\"1\"\n#   ></eo-text-tooltip>\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\"\n#     line-clamp=\"1\"\n#   ></eo-text-tooltip>\n# </div>\n# \n```\n"
-  },
-  "eo-workbench-layout": {
-    "doc": "工作台布局\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-workbench-layout\n  properties:\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### Edit & Event\n\n```yaml preview\n- brick: eo-workbench-layout\n  events:\n    save.layout:\n      - action: console.log\n  properties:\n    isEdit: true\n    layouts:\n      - i: hello\n        x: 0\n        y: 0\n        w: 2\n        h: 1\n      - i: world\n        x: 0\n        y: 1\n        w: 2\n        h: 1\n      - i: small\n        x: 2\n        y: 0\n        w: 1\n        h: 1\n    componentList:\n      - title: 基础布局\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: Hello\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: hello\n          x: 0\n          y: 0\n          w: 2\n          h: 1\n        key: hello\n      - title: world\n        useBrick:\n          brick: eo-card\n          properties:\n            fillVertical: true\n          children:\n            - brick: div\n              properties:\n                textContent: World\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: world\n          x: 0\n          y: 2\n          w: 2\n          h: 1\n        key: world\n      - title: small\n        useBrick:\n          brick: div\n          properties:\n            style:\n              height: 100%\n              background: \"#fff\"\n          children:\n            - brick: div\n              properties:\n                textContent: small\n                style:\n                  textAlign: center\n                  fontSize: 20px\n        position:\n          i: small\n          x: 2\n          y: 0\n          w: 1\n          h: 2\n        key: small\n      - title: custom\n        useBrick:\n          brick: div\n          properties:\n            style:\n              background: \"#6ad26a\"\n              width: 100%\n              height: 100%\n        position:\n          i: custom\n          x: 1\n          y: 3\n          w: 1\n          h: 1\n        key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.layouts = [\n#     {\n#       i: \"hello\",\n#       x: 0,\n#       y: 0,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"world\",\n#       x: 0,\n#       y: 1,\n#       w: 2,\n#       h: 1,\n#     },\n#     {\n#       i: \"small\",\n#       x: 2,\n#       y: 0,\n#       w: 1,\n#       h: 1,\n#     },\n#   ];\n#   brick_1.componentList = [\n#     {\n#       title: \"基础布局\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"Hello\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"hello\",\n#         x: 0,\n#         y: 0,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"hello\",\n#     },\n#     {\n#       title: \"world\",\n#       useBrick: {\n#         brick: \"eo-card\",\n#         properties: {\n#           fillVertical: true,\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"World\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"world\",\n#         x: 0,\n#         y: 2,\n#         w: 2,\n#         h: 1,\n#       },\n#       key: \"world\",\n#     },\n#     {\n#       title: \"small\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             height: \"100%\",\n#             background: \"#fff\",\n#           },\n#         },\n#         children: [\n#           {\n#             brick: \"div\",\n#             properties: {\n#               textContent: \"small\",\n#               style: {\n#                 textAlign: \"center\",\n#                 fontSize: \"20px\",\n#               },\n#             },\n#           },\n#         ],\n#       },\n#       position: {\n#         i: \"small\",\n#         x: 2,\n#         y: 0,\n#         w: 1,\n#         h: 2,\n#       },\n#       key: \"small\",\n#     },\n#     {\n#       title: \"custom\",\n#       useBrick: {\n#         brick: \"div\",\n#         properties: {\n#           style: {\n#             background: \"#6ad26a\",\n#             width: \"100%\",\n#             height: \"100%\",\n#           },\n#         },\n#       },\n#       position: {\n#         i: \"custom\",\n#         x: 1,\n#         y: 3,\n#         w: 1,\n#         h: 1,\n#       },\n#       key: \"custom\",\n#     },\n#   ];\n#   brick_1.addEventListener(\"save.layout\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-text-tooltip\ndisplayName: WrappedEoTextTooltip\ndescription: 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# eo-text-tooltip\n\n> 文本超出显示区域时，鼠标悬浮显示完整内容的 Tooltip\n\n## Props\n\n| 属性      | 类型     | 必填 | 默认值 | 说明                                                  |\n| --------- | -------- | ---- | ------ | ----------------------------------------------------- |\n| label     | `string` | 否   | -      | 显示的文本内容，超出时以省略号截断                    |\n| lineClamp | `number` | 否   | `1`    | 省略的行数，超过该行数后显示省略号，设为 0 表示不省略 |\n\n## Examples\n\n### Basic\n\n展示文本 Tooltip 的基本用法，超出宽度时鼠标悬浮显示完整内容。\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      display: flex\n      flex-direction: column\n      gap: 16px\n  children:\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\n        lineClamp: 0\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 单行不超出不显示tips\n        lineClamp: 1\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 180px\n        label: 单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\n        lineClamp: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\"\n#     line-clamp=\"0\"\n#   ></eo-text-tooltip>\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"单行不超出不显示tips\"\n#     line-clamp=\"1\"\n#   ></eo-text-tooltip>\n#   <eo-text-tooltip\n#     style=\"width: 180px\"\n#     label=\"单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\"\n#     line-clamp=\"1\"\n#   ></eo-text-tooltip>\n# </div>\n# \n```\n\n### Multi-line Clamp\n\n通过设置 lineClamp 控制最多显示的行数，超出时显示省略号并悬浮展示完整内容。\n\n```yaml preview\n- brick: div\n  properties:\n    style:\n      display: flex\n      flex-direction: column\n      gap: 16px\n  children:\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 200px\n        label: 多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略\n        lineClamp: 2\n    - brick: eo-text-tooltip\n      properties:\n        style:\n          width: 200px\n        label: 三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略\n        lineClamp: 3\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n#   <eo-text-tooltip\n#     style=\"width: 200px\"\n#     label=\"多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略\"\n#     line-clamp=\"2\"\n#   ></eo-text-tooltip>\n#   <eo-text-tooltip\n#     style=\"width: 200px\"\n#     label=\"三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略三行省略\"\n#     line-clamp=\"3\"\n#   ></eo-text-tooltip>\n# </div>\n# \n```\n"
   },
   "advanced.pdf-viewer": {
-    "doc": "构件 `advanced.pdf-viewer`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n  url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n  viewerStyle:\n    height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n#   url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n#   id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.viewerStyle = {\n#     height: \"500px\",\n#   };\n# </script>\n# \n```\n"
-  },
-  "eo-next-table": {
-    "doc": "大型表格\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: false\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n      - dataIndex: remarks\n        key: remarks\n        title: Long Column Long Column Long Column Long Column\n        width: 200\n        ellipsis: true\n      - dataIndex: operator\n        key: operator\n        title: 操作\n        width: 200\n        useBrick:\n          - brick: div\n            properties:\n              style:\n                display: flex\n                gap: 4px\n            children:\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  icon:\n                    lib: antd\n                    icon: edit\n                events:\n                  click:\n                    - action: message.info\n                      args:\n                        - <% DATA.rowData.name %>\n              - brick: eo-button\n                properties:\n                  type: link\n                  size: small\n                  danger: true\n                  icon:\n                    lib: antd\n                    icon: delete\n                events:\n                  click:\n                    - action: message.error\n                      args:\n                        - <% JSON.stringify(DATA) %>\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          remarks: Long text Long text\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: false,\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#     {\n#       dataIndex: \"remarks\",\n#       key: \"remarks\",\n#       title: \"Long Column Long Column Long Column Long Column\",\n#       width: 200,\n#       ellipsis: true,\n#     },\n#     {\n#       dataIndex: \"operator\",\n#       key: \"operator\",\n#       title: \"操作\",\n#       width: 200,\n#       useBrick: [\n#         {\n#           brick: \"div\",\n#           properties: {\n#             style: {\n#               display: \"flex\",\n#               gap: \"4px\",\n#             },\n#           },\n#           children: [\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"edit\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.info\",\n#                     args: [\"<% DATA.rowData.name %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#             {\n#               brick: \"eo-button\",\n#               properties: {\n#                 type: \"link\",\n#                 size: \"small\",\n#                 danger: true,\n#                 icon: {\n#                   lib: \"antd\",\n#                   icon: \"delete\",\n#                 },\n#               },\n#               events: {\n#                 click: [\n#                   {\n#                     action: \"message.error\",\n#                     args: [\"<% JSON.stringify(DATA) %>\"],\n#                   },\n#                 ],\n#               },\n#             },\n#           ],\n#         },\n#       ],\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         remarks: \"Long text Long text\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         remarks:\n#           \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n  properties:\n    scrollConfig:\n      x: max-content\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        width: 100\n        fixed: true\n        headerBrick:\n          useBrick:\n            brick: span\n            properties:\n              style:\n                color: red\n              textContent: <% DATA.title %>\n        useBrick:\n          - brick: span\n            properties:\n              style:\n                color: pink\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: column1\n        title: column1\n      - dataIndex: address\n        key: column2\n        title: column2\n      - dataIndex: address\n        key: column3\n        title: column3\n      - dataIndex: address\n        key: column4\n        title: column4\n      - dataIndex: address\n        key: column5\n        title: column5\n      - dataIndex: address\n        key: column6\n        title: column6\n      - dataIndex: address\n        key: column7\n        title: column7\n      - dataIndex: address\n        key: column8\n        title: column8\n      - dataIndex: address\n        key: column9\n        title: column9\n      - dataIndex: address\n        key: column10\n        title: column10\n      - dataIndex: age\n        key: age\n        title: Age\n        width: 100\n        fixed: right\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.scrollConfig = {\n#     x: \"max-content\",\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       width: 100,\n#       fixed: true,\n#       headerBrick: {\n#         useBrick: {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"red\",\n#             },\n#             textContent: \"<% DATA.title %>\",\n#           },\n#         },\n#       },\n#       useBrick: [\n#         {\n#           brick: \"span\",\n#           properties: {\n#             style: {\n#               color: \"pink\",\n#             },\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column1\",\n#       title: \"column1\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column2\",\n#       title: \"column2\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column3\",\n#       title: \"column3\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column4\",\n#       title: \"column4\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column5\",\n#       title: \"column5\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column6\",\n#       title: \"column6\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column7\",\n#       title: \"column7\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column8\",\n#       title: \"column8\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column9\",\n#       title: \"column9\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"column10\",\n#       title: \"column10\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       width: 100,\n#       fixed: \"right\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  events:\n    page.change:\n      - action: console.log\n    page.size.change:\n      - action: console.log\n    sort.change:\n      - action: console.log\n  properties:\n    id: table\n    frontSearch: true\n    searchFields:\n      - address\n    sort:\n      columnKey: age\n      order: descend\n    multiSort: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        sortable: true\n        sortPriority: 1\n      - dataIndex: address\n        key: address\n        title: Address\n        sortable: true\n        sortPriority: 2\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"address\"];\n#   table.sort = {\n#     columnKey: \"age\",\n#     order: \"descend\",\n#   };\n#   table.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       sortable: true,\n#       sortPriority: 1,\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#       sortable: true,\n#       sortPriority: 2,\n#     },\n#   ];\n#   table.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   table.addEventListener(\"page.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"page.size.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   table.addEventListener(\"sort.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Row Selection\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    rowSelection: true\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n        useBrick:\n          - brick: eo-tag\n            properties:\n              color: |\n                <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n              textContent: <% DATA.cellData %>\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rowSelection = true;\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#       useBrick: [\n#         {\n#           brick: \"eo-tag\",\n#           properties: {\n#             color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n#             textContent: \"<% DATA.cellData %>\",\n#           },\n#         },\n#       ],\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Expandable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    expandable:\n      rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n      expandedRowBrick:\n        useBrick:\n          brick: eo-next-table\n          properties:\n            scrollConfig: false\n            pagination: false\n            bordered: true\n            rowKey: title\n            columns:\n              - dataIndex: title\n                key: title\n                title: 标题\n              - dataIndex: description\n                key: description\n                title: 描述\n              - dataIndex: operator\n                key: operator\n                title: 操作\n                useBrick:\n                  brick: eo-link\n                  properties:\n                    textContent: 操作\n            dataSource:\n              list: <% DATA.rowData.info %>\n    pagination:\n      pageSizeOptions:\n        - 5\n        - 10\n        - 20\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          info:\n            - title: 测试1\n              description: 这是一串描述\n              id: 1\n            - title: 测试2\n              description: 这是一串描述\n              id: 2\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          info:\n            - title: 测试3\n              description: 这是一串描述\n              id: 3\n            - title: 测试4\n              description: 这是一串描述\n              id: 4\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Nanjing\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Wuhan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.expandable = {\n#     rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n#     expandedRowBrick: {\n#       useBrick: {\n#         brick: \"eo-next-table\",\n#         properties: {\n#           scrollConfig: false,\n#           pagination: false,\n#           bordered: true,\n#           rowKey: \"title\",\n#           columns: [\n#             {\n#               dataIndex: \"title\",\n#               key: \"title\",\n#               title: \"标题\",\n#             },\n#             {\n#               dataIndex: \"description\",\n#               key: \"description\",\n#               title: \"描述\",\n#             },\n#             {\n#               dataIndex: \"operator\",\n#               key: \"operator\",\n#               title: \"操作\",\n#               useBrick: {\n#                 brick: \"eo-link\",\n#                 properties: {\n#                   textContent: \"操作\",\n#                 },\n#               },\n#             },\n#           ],\n#           dataSource: {\n#             list: \"<% DATA.rowData.info %>\",\n#           },\n#         },\n#       },\n#     },\n#   };\n#   brick_1.pagination = {\n#     pageSizeOptions: [5, 10, 20],\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         info: [\n#           {\n#             title: \"测试1\",\n#             description: \"这是一串描述\",\n#             id: 1,\n#           },\n#           {\n#             title: \"测试2\",\n#             description: \"这是一串描述\",\n#             id: 2,\n#           },\n#         ],\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         info: [\n#           {\n#             title: \"测试3\",\n#             description: \"这是一串描述\",\n#             id: 3,\n#           },\n#           {\n#             title: \"测试4\",\n#             description: \"这是一串描述\",\n#             id: 4,\n#           },\n#         ],\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Nanjing\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Wuhan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n  - brick: :forEach\n    dataSource:\n      - large\n      - middle\n      - small\n    children:\n      - brick: strong\n        properties:\n          textContent: \"<% `Size: ${ITEM}` %>\"\n      - brick: eo-next-table\n        properties:\n          size: <% ITEM %>\n          pagination: false\n          columns:\n            - dataIndex: name\n              key: name\n              title: Name\n            - dataIndex: age\n              key: age\n              title: Age\n            - dataIndex: address\n              key: address\n              title: Address\n          dataSource:\n            pageSize: 5\n            page: 1\n            list:\n              - key: 0\n                name: Jack\n                age: 18\n                address: Guangzhou\n              - key: 1\n                name: Alex\n                age: 20\n                address: Shanghai\n              - key: 3\n                name: Sam\n                age: 28\n                address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n#   <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Draggable\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.drag:\n      - action: console.log\n  properties:\n    rowKey: name\n    rowDraggable: true\n    pagination: false\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n        - key: 5\n          name: Ava\n          age: 23\n          address: Beijing\n        - key: 6\n          name: Sophia\n          age: 20\n          address: Shanghai\n        - key: 7\n          name: Charlotte\n          age: 33\n          address: Chongqing\n        - key: 8\n          name: Mia\n          age: 18\n          address: Chengdu\n        - key: 9\n          name: Noah\n          age: 38\n          address: Hainan\n        - key: 10\n          name: William\n          age: 16\n          address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 5,\n#         name: \"Ava\",\n#         age: 23,\n#         address: \"Beijing\",\n#       },\n#       {\n#         key: 6,\n#         name: \"Sophia\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 7,\n#         name: \"Charlotte\",\n#         age: 33,\n#         address: \"Chongqing\",\n#       },\n#       {\n#         key: 8,\n#         name: \"Mia\",\n#         age: 18,\n#         address: \"Chengdu\",\n#       },\n#       {\n#         key: 9,\n#         name: \"Noah\",\n#         age: 38,\n#         address: \"Hainan\",\n#       },\n#       {\n#         key: 10,\n#         name: \"William\",\n#         age: 16,\n#         address: \"Taiwan\",\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.drag\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    pagination: false\n    bordered: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: mobile\n        key: mobile\n        title: phone\n        colSpan: 2\n        cellColSpanKey: mobileColSpan\n        cellRowSpanKey: mobileRowSpan\n      - dataIndex: landlines\n        key: landlines\n        colSpan: 0\n        cellColSpanKey: landlinesColSpan\n        cellRowSpanKey: landlinesRowSpan\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n          mobile: 18900010222\n          landlines: 0571-22098909\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n          mobile: 18900010333\n          mobileColSpan: 2\n          landlinesColSpan: 0\n        - key: 2\n          name: Lucy\n          age: 16\n          address: Yunnan\n          mobile: 18900010444\n          landlines: 0571-22098707\n          landlinesRowSpan: 2\n        - key: 3\n          name: Sam\n          age: 28\n          address: Guangzhou\n          mobile: 18900010555\n          landlines: 0571-22098707\n          landlinesRowSpan: 0\n          mobileRowSpan: 2\n        - key: 4\n          name: Bob\n          age: 35\n          address: Hainan\n          mobile: 18900010555\n          landlines: 0571-22098606\n          mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"mobile\",\n#       key: \"mobile\",\n#       title: \"phone\",\n#       colSpan: 2,\n#       cellColSpanKey: \"mobileColSpan\",\n#       cellRowSpanKey: \"mobileRowSpan\",\n#     },\n#     {\n#       dataIndex: \"landlines\",\n#       key: \"landlines\",\n#       colSpan: 0,\n#       cellColSpanKey: \"landlinesColSpan\",\n#       cellRowSpanKey: \"landlinesRowSpan\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         mobile: 18900010222,\n#         landlines: \"0571-22098909\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#         mobile: 18900010333,\n#         mobileColSpan: 2,\n#         landlinesColSpan: 0,\n#       },\n#       {\n#         key: 2,\n#         name: \"Lucy\",\n#         age: 16,\n#         address: \"Yunnan\",\n#         mobile: 18900010444,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 2,\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Guangzhou\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098707\",\n#         landlinesRowSpan: 0,\n#         mobileRowSpan: 2,\n#       },\n#       {\n#         key: 4,\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         mobile: 18900010555,\n#         landlines: \"0571-22098606\",\n#         mobileRowSpan: 0,\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.expand:\n      - action: console.log\n    expanded.rows.change:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    expandable:\n      defaultExpandAllRows: true\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 28\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 35\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 33\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.expandable = {\n#     defaultExpandAllRows: true,\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 28,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 35,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 33,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.expand\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Row Selection\n\n设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】\n\n```yaml preview\n- brick: eo-next-table\n  events:\n    row.select:\n      - action: console.log\n  properties:\n    pagination: false\n    childrenColumnName: student\n    rowSelection:\n      checkStrictly: false\n      indentSize: 50\n      rowDisabled: <% DATA.rowData.age > 30 %>\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.rowSelection = {\n#     checkStrictly: false,\n#     indentSize: 50,\n#     rowDisabled: \"<% DATA.rowData.age > 30 %>\",\n#   };\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"row.select\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n#### With Front Search\n\n```yaml preview\n- brick: eo-search-bar\n  children:\n    - brick: eo-search\n      slot: start\n      properties:\n        placeholder: Enter keyword\n      events:\n        search:\n          target: \"#table\"\n          method: search\n          args:\n            - q: <% EVENT.detail %>\n- brick: eo-next-table\n  properties:\n    id: table\n    searchFields:\n      - name\n      - age\n      - address\n    pagination: false\n    childrenColumnName: student\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      list:\n        - key: \"1\"\n          name: Jack\n          age: 18\n          address: Guangzhou\n          student:\n            - key: \"11\"\n              name: Alex\n              age: 20\n              address: Shanghai\n            - key: \"12\"\n              name: Lucy\n              age: 16\n              address: Yunnan\n            - key: \"13\"\n              name: Sam\n              age: 34\n              address: Guangzhou\n        - key: \"2\"\n          name: Bob\n          age: 27\n          address: Hainan\n          student:\n            - key: \"21\"\n              name: Ava\n              age: 23\n              address: Beijing\n            - key: \"22\"\n              name: Sophia\n              age: 20\n              address: Shanghai\n            - key: \"23\"\n              name: Charlotte\n              age: 35\n              address: Chongqing\n              student:\n                - key: \"231\"\n                  name: Mia\n                  age: 18\n                  address: Chengdu\n                - key: \"232\"\n                  name: Noah\n                  age: 38\n                  address: Hainan\n                - key: \"233\"\n                  name: William\n                  age: 16\n                  address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n#   <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table children-column-name=\"student\" id=\"table\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"search\", (e) => {\n#     const brick = document.querySelector(\"#table\");\n#     brick.search({ q: \"<% EVENT.detail %>\" });\n#   });\n# \n#   const table = document.getElementById(\"table\");\n#   table.searchFields = [\"name\", \"age\", \"address\"];\n#   table.pagination = false;\n#   table.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   table.dataSource = {\n#     list: [\n#       {\n#         key: \"1\",\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#         student: [\n#           {\n#             key: \"11\",\n#             name: \"Alex\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"12\",\n#             name: \"Lucy\",\n#             age: 16,\n#             address: \"Yunnan\",\n#           },\n#           {\n#             key: \"13\",\n#             name: \"Sam\",\n#             age: 34,\n#             address: \"Guangzhou\",\n#           },\n#         ],\n#       },\n#       {\n#         key: \"2\",\n#         name: \"Bob\",\n#         age: 27,\n#         address: \"Hainan\",\n#         student: [\n#           {\n#             key: \"21\",\n#             name: \"Ava\",\n#             age: 23,\n#             address: \"Beijing\",\n#           },\n#           {\n#             key: \"22\",\n#             name: \"Sophia\",\n#             age: 20,\n#             address: \"Shanghai\",\n#           },\n#           {\n#             key: \"23\",\n#             name: \"Charlotte\",\n#             age: 35,\n#             address: \"Chongqing\",\n#             student: [\n#               {\n#                 key: \"231\",\n#                 name: \"Mia\",\n#                 age: 18,\n#                 address: \"Chengdu\",\n#               },\n#               {\n#                 key: \"232\",\n#                 name: \"Noah\",\n#                 age: 38,\n#                 address: \"Hainan\",\n#               },\n#               {\n#                 key: \"233\",\n#                 name: \"William\",\n#                 age: 16,\n#                 address: \"Taiwan\",\n#               },\n#             ],\n#           },\n#         ],\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Dynamic Columns\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n  cell:\n    useBrick:\n      - if: <% DATA.columnKey !== '01-13' %>\n        brick: em\n        properties:\n          textContent: <% DATA.cellData %>\n      - if: <% DATA.columnKey === '01-13' %>\n        brick: del\n        properties:\n          textContent: <% DATA.cellData %>\n    header:\n      useBrick:\n        brick: em\n        properties:\n          textContent: <% DATA.title %>\n  # Dynamic columns, such as by dates\n  columns: <% CTX.dates %>\n  dataSource:\n    list:\n      - \"01-11\": \"abc\"\n        \"01-12\": \"def\"\n        \"01-13\": \"ghi\"\n        \"01-14\": \"jkl\"\n      - \"01-11\": \"123\"\n        \"01-12\": \"345\"\n        \"01-13\": \"789\"\n        \"01-14\": \"-\"\ncontext:\n  - name: dates\n    value: |\n      <%\n        new Array(4).fill(null).map(\n          (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n        ).map((key) => ({\n          dataIndex: key,\n          key,\n          title: key,\n        }))\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.cell = {\n#     useBrick: [\n#       {\n#         if: \"<% DATA.columnKey !== '01-13' %>\",\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#       {\n#         if: \"<% DATA.columnKey === '01-13' %>\",\n#         brick: \"del\",\n#         properties: {\n#           textContent: \"<% DATA.cellData %>\",\n#         },\n#       },\n#     ],\n#     header: {\n#       useBrick: {\n#         brick: \"em\",\n#         properties: {\n#           textContent: \"<% DATA.title %>\",\n#         },\n#       },\n#     },\n#   };\n#   brick_1.columns = \"<% CTX.dates %>\";\n#   brick_1.dataSource = {\n#     list: [\n#       {\n#         \"01-11\": \"abc\",\n#         \"01-12\": \"def\",\n#         \"01-13\": \"ghi\",\n#         \"01-14\": \"jkl\",\n#       },\n#       {\n#         \"01-11\": \"123\",\n#         \"01-12\": \"345\",\n#         \"01-13\": \"789\",\n#         \"01-14\": \"-\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Cell status\n\n```yaml preview\n- brick: eo-next-table\n  properties:\n    columns:\n      - dataIndex: name\n        key: name\n        title: Name\n        cellStatus:\n          dataIndex: age\n          mapping:\n            - value: 18\n              leftBorderColor: green\n            - value: 20\n              leftBorderColor: blue\n            - value: 28\n              leftBorderColor: red\n      - dataIndex: age\n        key: age\n        title: Age\n      - dataIndex: address\n        key: address\n        title: Address\n    dataSource:\n      pageSize: 5\n      page: 1\n      list:\n        - key: 0\n          name: Jack\n          age: 18\n          address: Guangzhou\n        - key: 1\n          name: Alex\n          age: 20\n          address: Shanghai\n        - key: 3\n          name: Sam\n          age: 28\n          address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#       cellStatus: {\n#         dataIndex: \"age\",\n#         mapping: [\n#           {\n#             value: 18,\n#             leftBorderColor: \"green\",\n#           },\n#           {\n#             value: 20,\n#             leftBorderColor: \"blue\",\n#           },\n#           {\n#             value: 28,\n#             leftBorderColor: \"red\",\n#           },\n#         ],\n#       },\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n  style:\n    padding: 2em\n    backgroundColor: \"#d8d8d8\"\nchildren:\n  - brick: eo-next-table\n    properties:\n      themeVariant: elevo\n      pagination: false\n      columns:\n        - dataIndex: name\n          key: name\n          title: Name\n        - dataIndex: age\n          key: age\n          title: Age\n        - dataIndex: address\n          key: address\n          title: Address\n      dataSource:\n        pageSize: 5\n        page: 1\n        list:\n          - key: 0\n            name: Jack\n            age: 18\n            address: Guangzhou\n          - key: 1\n            name: Alex\n            age: 20\n            address: Shanghai\n          - key: 3\n            name: Sam\n            age: 28\n            address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n#   <eo-next-table theme-variant=\"elevo\" id=\"brick-1\"></eo-next-table>\n# </ai-portal.home-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.pagination = false;\n#   brick_1.columns = [\n#     {\n#       dataIndex: \"name\",\n#       key: \"name\",\n#       title: \"Name\",\n#     },\n#     {\n#       dataIndex: \"age\",\n#       key: \"age\",\n#       title: \"Age\",\n#     },\n#     {\n#       dataIndex: \"address\",\n#       key: \"address\",\n#       title: \"Address\",\n#     },\n#   ];\n#   brick_1.dataSource = {\n#     pageSize: 5,\n#     page: 1,\n#     list: [\n#       {\n#         key: 0,\n#         name: \"Jack\",\n#         age: 18,\n#         address: \"Guangzhou\",\n#       },\n#       {\n#         key: 1,\n#         name: \"Alex\",\n#         age: 20,\n#         address: \"Shanghai\",\n#       },\n#       {\n#         key: 3,\n#         name: \"Sam\",\n#         age: 28,\n#         address: \"Shenzhen\",\n#       },\n#     ],\n#   };\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: advanced.pdf-viewer\ndisplayName: WrappedAdvancedPdfViewer\ndescription: PDF 文件预览器，支持分页跳转和关键字高亮搜索\ncategory: display\nsource: \"@next-bricks/advanced\"\n---\n\n# advanced.pdf-viewer\n\n> PDF 文件预览器，支持分页跳转和关键字高亮搜索\n\n## Props\n\n| 属性        | 类型            | 必填 | 默认值 | 说明                                                             |\n| ----------- | --------------- | ---- | ------ | ---------------------------------------------------------------- |\n| url         | `string`        | 是   | -      | PDF 文件的访问地址                                               |\n| page        | `number`        | 否   | -      | 初始显示的页码（从 1 开始），内部会自动转换为从 0 开始的索引     |\n| search      | `string`        | 否   | -      | 文档加载后自动高亮的搜索关键字                                   |\n| viewerStyle | `CSSProperties` | 否   | -      | 查看器容器的内联样式，常用于设置高度（如 `{ height: \"500px\" }`） |\n\n## Examples\n\n### Basic\n\n展示 PDF 文件预览的基本用法，通过 url 指定 PDF 地址并设置查看器高度。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n  url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n  viewerStyle:\n    height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n#   url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n#   id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.viewerStyle = {\n#     height: \"500px\",\n#   };\n# </script>\n# \n```\n\n### Jump to Page\n\n通过 page 属性指定 PDF 打开后跳转到的初始页码。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n  url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n  page: 3\n  viewerStyle:\n    height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n#   url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n#   page=\"3\"\n#   id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.viewerStyle = {\n#     height: \"500px\",\n#   };\n# </script>\n# \n```\n\n### Keyword Search\n\n通过 search 属性在文档加载后自动高亮指定关键字。\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n  url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n  search: JavaScript\n  viewerStyle:\n    height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n#   url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n#   search=\"JavaScript\"\n#   id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.viewerStyle = {\n#     height: \"500px\",\n#   };\n# </script>\n# \n```\n"
   },
   "advanced.capture-snapshot": {
     "doc": "构件 `advanced.capture-snapshot`\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-button\n  properties:\n    textContent: Save As Image\n    style:\n      margin-right: 10px\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: image\n            name: image\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n- brick: eo-button\n  properties:\n    textContent: Save As PDF\n    style:\n      margin-right: 10px\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: pdf\n            name: pdf\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n- brick: eo-button\n  properties:\n    textContent: Capture And Upload\n  events:\n    click:\n      - useProvider: advanced.capture-snapshot\n        args:\n          - fileType: image\n            name: upload\n            bucketName: examples\n            selector: \"#uploadImage\"\n        callback:\n          success:\n            - action: console.log\n          error:\n            - action: console.error\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-button style=\"margin-right: 10px\" id=\"brick-1\">Save As Image</eo-button>\n# <eo-button style=\"margin-right: 10px\" id=\"brick-2\">Save As PDF</eo-button>\n# <eo-button id=\"brick-3\">Capture And Upload</eo-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({ fileType: \"image\", name: \"image\" })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({ fileType: \"pdf\", name: \"pdf\" })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const provider = document.createElement(\"advanced.capture-snapshot\");\n#     const promise = Promise.resolve(\n#       provider.resolve({\n#         fileType: \"image\",\n#         name: \"upload\",\n#         bucketName: \"examples\",\n#         selector: \"#uploadImage\",\n#       })\n#     );\n#     promise.then((r) => {\n#       console.log(r);\n#     });\n#     promise.catch((r) => {\n#       console.error(r);\n#     });\n#   });\n# </script>\n# \n```\n"