@next-bricks/advanced 0.51.4 → 0.51.6

package/dist/examples.json

@@ -2,12 +2,12 @@
   "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": "---\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-cascader": {
+    "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-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"
   },
@@ -20,12 +20,12 @@
   "eo-tree-select": {
     "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": "---\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": "---\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"
   },
+  "eo-text-tooltip": {
+    "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.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"
   }

package/dist/index.2bb5aa4e.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e,t,r,n,a,o,l,i,c,s,f,d,u,h,p,m,b,v,x,g,y,P,w,k,j,S={73199:(e,t,r)=>{var n={"./eo-table":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(106),r.e(5612),r.e(4670),r.e(9655),r.e(8769),r.e(1468),r.e(1030),r.e(981),r.e(4419),r.e(128),r.e(8772),r.e(9733),r.e(9704),r.e(572)]).then((()=>()=>r(3250))),"./general-table":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(106),r.e(5612),r.e(4670),r.e(9655),r.e(8769),r.e(1468),r.e(1030),r.e(981),r.e(4419),r.e(128),r.e(8772),r.e(9733),r.e(9704),r.e(572)]).then((()=>()=>r(3250))),"./eo-next-table":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(106),r.e(5612),r.e(4670),r.e(1512),r.e(8769),r.e(1468),r.e(1030),r.e(981),r.e(4419),r.e(128),r.e(8772),r.e(9733),r.e(9704),r.e(7825),r.e(6184)]).then((()=>()=>r(58766))),"./eo-cascader":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(7039),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(8772),r.e(5008)]).then((()=>()=>r(62790))),"./general-cascader":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(7039),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(8772),r.e(5008)]).then((()=>()=>r(62790))),"./eo-workbench-layout":()=>Promise.all([r.e(1977),r.e(9946),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(9523),r.e(8772),r.e(9113),r.e(9326)]).then((()=>()=>r(40332))),"./capture-snapshot":()=>Promise.all([r.e(8317),r.e(9523),r.e(128),r.e(2919),r.e(944)]).then((()=>()=>r(8868))),"./eo-workbench-layout-v2":()=>Promise.all([r.e(1977),r.e(9946),r.e(6907),r.e(8769),r.e(1468),r.e(1030),r.e(981),r.e(4419),r.e(9523),r.e(128),r.e(8772),r.e(9113),r.e(9704),r.e(771)]).then((()=>()=>r(25261))),"./eo-tree":()=>Promise.all([r.e(1977),r.e(4758),r.e(2353),r.e(106),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(8772),r.e(5032)]).then((()=>()=>r(64718))),"./eo-tree-select":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(2353),r.e(9978),r.e(106),r.e(8623),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(8772),r.e(5677)]).then((()=>()=>r(28111))),"./pdf-viewer":()=>Promise.all([r.e(3063),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(2246)]).then((()=>()=>r(73275))),"./eo-text-tooltip":()=>Promise.all([r.e(1977),r.e(4758),r.e(2977),r.e(5612),r.e(8769),r.e(1468),r.e(981),r.e(4419),r.e(5807)]).then((()=>()=>r(9209)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},O={};function _(e){var t=O[e];if(void 0!==t)return t.exports;var r=O[e]={id:e,loaded:!1,exports:{}};return S[e].call(r.exports,r,r.exports,_),r.loaded=!0,r.exports}_.m=S,_.c=O,_.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return _.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,_.t=function(r,n){if(1&n&&(r=this(r)),8&n)return r;if("object"==typeof r&&r){if(4&n&&r.__esModule)return r;if(16&n&&"function"==typeof r.then)return r}var a=Object.create(null);_.r(a);var o={};e=e||[null,t({}),t([]),t(t)];for(var l=2&n&&r;"object"==typeof l&&!~e.indexOf(l);l=t(l))Object.getOwnPropertyNames(l).forEach((e=>o[e]=()=>r[e]));return o.default=()=>r,_.d(a,o),a},_.d=(e,t)=>{for(var r in t)_.o(t,r)&&!_.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},_.f={},_.e=e=>Promise.all(Object.keys(_.f).reduce(((t,r)=>(_.f[r](e,t),t)),[])),_.u=e=>"chunks/"+({572:"eo-table",771:"eo-workbench-layout-v2",944:"capture-snapshot",2246:"pdf-viewer",5008:"eo-cascader",5032:"eo-tree",5677:"eo-tree-select",5807:"eo-text-tooltip",6184:"eo-next-table",9326:"eo-workbench-layout"}[e]||e)+"."+{106:"46449f05",114:"e4e830d6",572:"9b4334a3",726:"4b35900f",771:"12b31a22",871:"85d96717",944:"3046c520",948:"c45999d0",1045:"96a924fb",1122:"bdc6fc27",1512:"42419e90",1576:"de87244a",1651:"995950c9",1889:"f8507811",1940:"51cab672",1977:"bd61f6b1",2052:"b5062857",2073:"9984bbeb",2246:"036787d7",2277:"04841590",2353:"1a21de38",2977:"8802438a",3063:"1dcd8ed5",3144:"a8b62897",3171:"5a42835a",3426:"e0fa46bd",4041:"806ee88e",4306:"b3556139",4658:"6665a649",4670:"bba60176",4758:"0ee6b1c2",4765:"971bdb2d",5008:"8d423eaa",5032:"e8729dea",5250:"3ab2d263",5384:"2dc078c6",5399:"90afc78f",5552:"3af82478",5612:"74b22a54",5677:"49c195a4",5807:"74db365e",6184:"7f8c557a",6376:"a5e3cba3",6519:"7f3a6524",6773:"e9348322",6907:"0c6e9b40",7039:"0ea489d5",7146:"39456b34",7304:"83c68bc3",7434:"288c8782",7721:"a2ced46d",7733:"a99c50bd",8097:"5dc54cfc",8317:"4cfa4505",8623:"d8f1c0ca",8989:"d6f1406a",9118:"f65d12a9",9326:"39666f6e",9515:"cb756ef8",9559:"569573af",9655:"d135a41f",9844:"9cb901e3",9946:"86c821ce",9978:"f9d039e7"}[e]+".js",_.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),_.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r={},n="@next-bricks/advanced:",_.l=(e,t,a,o)=>{if(r[e])r[e].push(t);else{var l,i;if(void 0!==a)for(var c=document.getElementsByTagName("script"),s=0;s<c.length;s++){var f=c[s];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==n+a){l=f;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,_.nc&&l.setAttribute("nonce",_.nc),l.setAttribute("data-webpack",n+a),l.src=e),r[e]=[t];var d=(t,n)=>{l.onerror=l.onload=null,clearTimeout(u);var a=r[e];if(delete r[e],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},u=setTimeout(d.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=d.bind(null,l.onerror),l.onload=d.bind(null,l.onload),i&&document.head.appendChild(l)}},_.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},_.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{_.S={};var e={},t={};_.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];_.o(_.S,r)||(_.S[r]={});var o=_.S[r],l="@next-bricks/advanced",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},c=[];return"default"===r&&(i("@babel/parser","7.27.2",(()=>_.e(6773).then((()=>()=>_(46773))))),i("@easyops-cn/brick-next-pipes","0.7.6",(()=>Promise.all([_.e(4306),_.e(1030),_.e(1916),_.e(5310)]).then((()=>()=>_(34306))))),i("@next-core/cook","2.5.14",(()=>Promise.all([_.e(1122),_.e(580)]).then((()=>()=>_(61122))))),i("@next-core/easyops-runtime","0.15.35",(()=>Promise.all([_.e(9118),_.e(1030),_.e(9523),_.e(128),_.e(9733),_.e(9933),_.e(2919),_.e(1321),_.e(44),_.e(5310)]).then((()=>()=>_(49118))))),i("@next-core/element","1.2.21",(()=>_.e(1045).then((()=>()=>_(21045))))),i("@next-core/http","1.2.16",(()=>_.e(8989).then((()=>()=>_(48989))))),i("@next-core/i18n/react","1.0.93",(()=>Promise.all([_.e(9733),_.e(7825),_.e(8097)]).then((()=>()=>_(88097))))),i("@next-core/i18n","1.0.93",(()=>Promise.all([_.e(9523),_.e(9733),_.e(671),_.e(5552)]).then((()=>()=>_(75552))))),i("@next-core/inject","1.0.65",(()=>Promise.all([_.e(1030),_.e(9933),_.e(2277)]).then((()=>()=>_(72277))))),i("@next-core/loader","1.6.21",(()=>_.e(5399).then((()=>()=>_(35399))))),i("@next-core/pipes","2.0.38",(()=>_.e(6519).then((()=>()=>_(76519))))),i("@next-core/react-element","1.0.40",(()=>Promise.all([_.e(8769),_.e(1468),_.e(114)]).then((()=>()=>_(20114))))),i("@next-core/react-runtime","1.11.4",(()=>Promise.all([_.e(6376),_.e(8769),_.e(1030),_.e(981),_.e(128),_.e(9113)]).then((()=>()=>_(16376))))),i("@next-core/runtime","1.72.10",(()=>Promise.all([_.e(948),_.e(1030),_.e(9523),_.e(9733),_.e(2919),_.e(1916),_.e(1321),_.e(44),_.e(668)]).then((()=>()=>_(30948))))),i("@next-core/supply","2.3.11",(()=>Promise.all([_.e(1030),_.e(9933),_.e(1916),_.e(9559)]).then((()=>()=>_(49559))))),i("@next-core/theme","1.6.1",(()=>Promise.all([_.e(1889),_.e(2052)]).then((()=>()=>_(51889))))),i("@next-core/utils/general","1.8.11",(()=>_.e(871).then((()=>()=>_(40871))))),i("@next-core/utils/storyboard","1.8.11",(()=>Promise.all([_.e(1030),_.e(9523),_.e(1321),_.e(7146)]).then((()=>()=>_(97146))))),i("history","4.10.1",(()=>_.e(5384).then((()=>()=>_(65384))))),i("i18next-browser-languagedetector","7.2.2",(()=>_.e(726).then((()=>()=>_(50726))))),i("i18next","22.5.1",(()=>_.e(7304).then((()=>()=>_(47304))))),i("js-yaml","3.14.1",(()=>_.e(9515).then((()=>()=>_(19515))))),i("lodash","4.17.21",(()=>_.e(5250).then((()=>()=>_(45250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([_.e(7721),_.e(9844)]).then((()=>()=>_(61329))))),i("moment","2.30.1",(()=>Promise.all([_.e(7721),_.e(9844)]).then((()=>()=>_(99420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([_.e(3144),_.e(8769)]).then((()=>()=>_(43144))))),i("react-i18next","12.3.1",(()=>Promise.all([_.e(7434),_.e(8769)]).then((()=>()=>_(97434))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>_.e(4041).then((()=>()=>_(14041)))))),e[r]=c.length?Promise.all(c).then((()=>e[r]=1)):1}}})(),(()=>{var e;_.g.importScripts&&(e=_.g.location+"");var t=_.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),_.p=e})(),a=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},o=(e,t)=>{e=a(e),t=a(t);for(var r=0;;){if(r>=e.length)return r<t.length&&"u"!=(typeof t[r])[0];var n=e[r],o=(typeof n)[0];if(r>=t.length)return"u"==o;var l=t[r],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&n!=l)return n<l;r++}},l=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,a=1;a<e.length;a++)n--,r+="u"==(typeof(i=e[a]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var o=[];for(a=1;a<e.length;a++){var i=e[a];o.push(0===i?"not("+c()+")":1===i?"("+c()+" || "+c()+")":2===i?o.pop()+" "+o.pop():l(i))}return c();function c(){return o.pop().replace(/^\((.+)\)$/,"$1")}},i=(e,t)=>{if(0 in e){t=a(t);var r=e[0],n=r<0;n&&(r=-r-1);for(var o=0,l=1,c=!0;;l++,o++){var s,f,d=l<e.length?(typeof e[l])[0]:"";if(o>=t.length||"o"==(f=(typeof(s=t[o]))[0]))return!c||("u"==d?l>r&&!n:""==d!=n);if("u"==f){if(!c||"u"!=d)return!1}else if(c)if(d==f)if(l<=r){if(s!=e[l])return!1}else{if(n?s>e[l]:s<e[l])return!1;s!=e[l]&&(c=!1)}else if("s"!=d&&"n"!=d){if(n||l<=r)return!1;c=!1,l--}else{if(l<=r||f<d!=n)return!1;c=!1}else"s"!=d&&"n"!=d&&(c=!1,l--)}}var u=[],h=u.pop.bind(u);for(o=1;o<e.length;o++){var p=e[o];u.push(1==p?h()|h():2==p?h()&h():p?i(p,t):!h())}return!!h()},c=(e,t)=>e&&_.o(e,t),s=e=>(e.loaded=1,e.get()),f=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),d=(e,t,r,n)=>{var a=n?f(e[t]):e[t];return(t=Object.keys(a).reduce(((e,t)=>!i(r,t)||e&&!o(e,t)?e:t),0))&&a[t]},u=(e,t,r)=>{var n=r?f(e[t]):e[t];return Object.keys(n).reduce(((e,t)=>!e||!n[e].loaded&&o(e,t)?t:e),0)},h=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+l(n)+")",p=(e,t,r,n,a)=>{var o=e[r];return"No satisfying version ("+l(n)+")"+(a?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(o).map((e=>e+" from "+o[e].from)).join(", ")},m=e=>{throw new Error(e)},b=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},x=(e,t,r)=>r?r():((e,t)=>m("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),g=(v=e=>function(t,r,n,a,o){var l=_.I(t);return l&&l.then&&!n?l.then(e.bind(e,t,_.S[t],r,!1,a,o)):e(t,_.S[t],r,n,a,o)})(((e,t,r,n,a,o)=>{if(!c(t,r))return x(e,r,o);var l=d(t,r,a,n);return l?s(l):o?o():void m(p(t,e,r,a,n))})),y=v(((e,t,r,n,a,o)=>{if(!c(t,r))return x(e,r,o);var l=u(t,r,n);return i(a,l)||b(h(t,r,l,a)),s(t[r][l])})),P={},w={41030:()=>y("default","lodash",!1,[1,4,17,21],(()=>_.e(5250).then((()=>()=>_(45250))))),91916:()=>y("default","moment",!1,[0],(()=>Promise.all([_.e(7721),_.e(9844)]).then((()=>()=>_(99420))))),55310:()=>y("default","js-yaml",!1,[0],(()=>_.e(9515).then((()=>()=>_(19515))))),40580:()=>y("default","@babel/parser",!1,[0],(()=>_.e(6773).then((()=>()=>_(46773))))),49523:()=>y("default","@next-core/utils/general",!1,[0],(()=>_.e(871).then((()=>()=>_(40871))))),60128:()=>y("default","@next-core/runtime",!1,[1,1,71,4],(()=>Promise.all([_.e(948),_.e(1030),_.e(9523),_.e(9733),_.e(2919),_.e(1916),_.e(1321),_.e(44),_.e(668)]).then((()=>()=>_(30948))))),99733:()=>y("default","@next-core/i18n",!1,[0],(()=>Promise.all([_.e(9523),_.e(671),_.e(3171)]).then((()=>()=>_(75552))))),59933:()=>y("default","@next-core/pipes",!1,[0],(()=>_.e(6519).then((()=>()=>_(76519))))),22919:()=>y("default","@next-core/http",!1,[1,1,2,14],(()=>_.e(8989).then((()=>()=>_(48989))))),71321:()=>y("default","@next-core/cook",!1,[0],(()=>Promise.all([_.e(1122),_.e(580)]).then((()=>()=>_(61122))))),11732:()=>y("default","history",!1,[0],(()=>_.e(5384).then((()=>()=>_(65384))))),85801:()=>y("default","@next-core/utils/storyboard",!1,[0],(()=>_.e(4765).then((()=>()=>_(97146))))),47825:()=>y("default","react-i18next",!1,[1,12,3,1],(()=>Promise.all([_.e(7434),_.e(8769)]).then((()=>()=>_(97434))))),848:()=>y("default","i18next-browser-languagedetector",!1,[0],(()=>_.e(726).then((()=>()=>_(50726))))),75630:()=>y("default","i18next",!1,[0],(()=>_.e(7304).then((()=>()=>_(47304))))),58377:()=>y("default","@easyops-cn/brick-next-pipes",!1,[0],(()=>Promise.all([_.e(4306),_.e(1030),_.e(1916),_.e(5310)]).then((()=>()=>_(34306))))),18769:()=>g("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>_.e(4041).then((()=>()=>_(14041))))),59435:()=>g("default","react-dom",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>_.e(3144).then((()=>()=>_(43144))))),90870:()=>g("default","@next-core/element",!1,[1,1,2,19],(()=>_.e(3426).then((()=>()=>_(21045))))),30981:()=>g("default","@next-core/react-element",!1,[1,1,0,38],(()=>Promise.all([_.e(1468),_.e(7733)]).then((()=>()=>_(20114))))),69113:()=>y("default","@next-core/easyops-runtime",!1,[0],(()=>Promise.all([_.e(9118),_.e(1030),_.e(9523),_.e(128),_.e(9733),_.e(9933),_.e(2919),_.e(1321),_.e(44),_.e(5310)]).then((()=>()=>_(49118))))),29283:()=>y("default","@next-core/inject",!1,[0],(()=>Promise.all([_.e(9933),_.e(4658)]).then((()=>()=>_(72277))))),45599:()=>y("default","@next-core/loader",!1,[0],(()=>_.e(5399).then((()=>()=>_(35399))))),71858:()=>y("default","moment/locale/zh-cn.js",!1,[0],(()=>Promise.all([_.e(7721),_.e(9844)]).then((()=>()=>_(61329))))),94167:()=>y("default","@next-core/supply",!1,[0],(()=>Promise.all([_.e(9933),_.e(1940)]).then((()=>()=>_(49559))))),34419:()=>y("default","@next-core/theme",!1,[1,1,6,1],(()=>_.e(1889).then((()=>()=>_(51889))))),58772:()=>g("default","@next-core/react-runtime",!1,[1,1,11,4],(()=>Promise.all([_.e(6376),_.e(1030),_.e(128),_.e(9113)]).then((()=>()=>_(16376))))),69704:()=>y("default","@next-core/i18n/react",!1,[0],(()=>Promise.all([_.e(9733),_.e(7825),_.e(8097)]).then((()=>()=>_(88097)))))},k={44:[11732,85801],128:[60128],580:[40580],668:[29283,45599,71858,94167],671:[848,75630],981:[30981],1030:[41030],1321:[71321],1468:[59435,90870],1916:[91916],2919:[22919],4419:[34419],5310:[55310],6519:[58377],7825:[47825],8769:[18769],8772:[58772],9113:[69113],9523:[49523],9704:[69704],9733:[99733],9933:[59933]},j={},_.f.consumes=(e,t)=>{_.o(k,e)&&k[e].forEach((e=>{if(_.o(P,e))return t.push(P[e]);if(!j[e]){var r=t=>{P[e]=0,_.m[e]=r=>{delete _.c[e],r.exports=t()}};j[e]=!0;var n=t=>{delete P[e],_.m[e]=r=>{throw delete _.c[e],t}};try{var a=w[e]();a.then?t.push(P[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{_.b=document.baseURI||self.location.href;var e={8978:0};_.f.j=(t,r)=>{var n=_.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|28|321|468|916)|44(|19)|87(69|72)|9((11|52|73|93)3|704|81)|2919|5310|580|668|671|7825)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=_.p+_.u(t),l=new Error;_.l(o,(r=>{if(_.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,c=0;if(o.some((t=>0!==e[t]))){for(n in l)_.o(l,n)&&(_.m[n]=l[n]);i&&i(_)}for(t&&t(r);c<o.length;c++)a=o[c],_.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_advanced=globalThis.webpackChunk_next_bricks_advanced||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),_.nc=void 0;var E=_(73199);window["bricks/advanced"]=E})();
+//# sourceMappingURL=index.2bb5aa4e.js.map