@next-bricks/advanced 0.49.3 → 0.49.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/bricks.json +19 -19
  2. package/dist/chunks/{4197.dc49fc4a.js → 4197.cdbb74e2.js} +2 -2
  3. package/dist/chunks/4197.cdbb74e2.js.map +1 -0
  4. package/dist/chunks/eo-workbench-layout-v2.07fb8030.js +3 -0
  5. package/dist/chunks/eo-workbench-layout-v2.07fb8030.js.map +1 -0
  6. package/dist/chunks/{main.08c22319.js → main.8176c0ea.js} +2 -2
  7. package/dist/chunks/{main.08c22319.js.map → main.8176c0ea.js.map} +1 -1
  8. package/dist/examples.json +11 -11
  9. package/dist/{index.eb3f07ba.js → index.6c12f757.js} +2 -2
  10. package/dist/{index.eb3f07ba.js.map → index.6c12f757.js.map} +1 -1
  11. package/dist/manifest.json +345 -345
  12. package/dist/types.json +946 -946
  13. package/package.json +2 -2
  14. package/dist/chunks/4197.dc49fc4a.js.map +0 -1
  15. package/dist/chunks/eo-workbench-layout-v2.2a779f9a.js +0 -3
  16. package/dist/chunks/eo-workbench-layout-v2.2a779f9a.js.map +0 -1
  17. /package/dist/chunks/{eo-workbench-layout-v2.2a779f9a.js.LICENSE.txt → eo-workbench-layout-v2.07fb8030.js.LICENSE.txt} +0 -0
package/dist/examples.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
- "eo-workbench-layout": {
3
- "doc": "工作台布局\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-workbench-layout\n properties:\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n - i: world\n x: 0\n y: 1\n w: 2\n h: 1\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n componentList:\n - title: 基础布局\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: Hello\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n key: hello\n - title: world\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: World\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: world\n x: 0\n y: 2\n w: 2\n h: 1\n key: world\n - title: small\n useBrick:\n brick: div\n properties:\n style:\n height: 100%\n background: \"#fff\"\n children:\n - brick: div\n properties:\n textContent: small\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 2\n key: small\n - title: custom\n useBrick:\n brick: div\n properties:\n style:\n background: \"#6ad26a\"\n width: 100%\n height: 100%\n position:\n i: custom\n x: 1\n y: 3\n w: 1\n h: 1\n key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"world\",\n# x: 0,\n# y: 1,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"基础布局\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"Hello\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# key: \"hello\",\n# },\n# {\n# title: \"world\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"World\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"world\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# key: \"world\",\n# },\n# {\n# title: \"small\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# height: \"100%\",\n# background: \"#fff\",\n# },\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"small\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 2,\n# },\n# key: \"small\",\n# },\n# {\n# title: \"custom\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# background: \"#6ad26a\",\n# width: \"100%\",\n# height: \"100%\",\n# },\n# },\n# },\n# position: {\n# i: \"custom\",\n# x: 1,\n# y: 3,\n# w: 1,\n# h: 1,\n# },\n# key: \"custom\",\n# },\n# ];\n# </script>\n# \n```\n\n### Edit & Event\n\n```yaml preview\n- brick: eo-workbench-layout\n events:\n save.layout:\n - action: console.log\n properties:\n isEdit: true\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n - i: world\n x: 0\n y: 1\n w: 2\n h: 1\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n componentList:\n - title: 基础布局\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: Hello\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n key: hello\n - title: world\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: World\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: world\n x: 0\n y: 2\n w: 2\n h: 1\n key: world\n - title: small\n useBrick:\n brick: div\n properties:\n style:\n height: 100%\n background: \"#fff\"\n children:\n - brick: div\n properties:\n textContent: small\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 2\n key: small\n - title: custom\n useBrick:\n brick: div\n properties:\n style:\n background: \"#6ad26a\"\n width: 100%\n height: 100%\n position:\n i: custom\n x: 1\n y: 3\n w: 1\n h: 1\n key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"world\",\n# x: 0,\n# y: 1,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"基础布局\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"Hello\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# key: \"hello\",\n# },\n# {\n# title: \"world\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"World\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"world\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# key: \"world\",\n# },\n# {\n# title: \"small\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# height: \"100%\",\n# background: \"#fff\",\n# },\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"small\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 2,\n# },\n# key: \"small\",\n# },\n# {\n# title: \"custom\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# background: \"#6ad26a\",\n# width: \"100%\",\n# height: \"100%\",\n# },\n# },\n# },\n# position: {\n# i: \"custom\",\n# x: 1,\n# y: 3,\n# w: 1,\n# h: 1,\n# },\n# key: \"custom\",\n# },\n# ];\n# brick_1.addEventListener(\"save.layout\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
2
+ "eo-next-table": {
3
+ "doc": "大型表格\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: false\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n - dataIndex: remarks\n key: remarks\n title: Long Column Long Column Long Column Long Column\n width: 200\n ellipsis: true\n - dataIndex: operator\n key: operator\n title: 操作\n width: 200\n useBrick:\n - brick: div\n properties:\n style:\n display: flex\n gap: 4px\n children:\n - brick: eo-button\n properties:\n type: link\n size: small\n icon:\n lib: antd\n icon: edit\n events:\n click:\n - action: message.info\n args:\n - <% DATA.rowData.name %>\n - brick: eo-button\n properties:\n type: link\n size: small\n danger: true\n icon:\n lib: antd\n icon: delete\n events:\n click:\n - action: message.error\n args:\n - <% JSON.stringify(DATA) %>\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n remarks: Long text Long text\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: false,\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# {\n# dataIndex: \"remarks\",\n# key: \"remarks\",\n# title: \"Long Column Long Column Long Column Long Column\",\n# width: 200,\n# ellipsis: true,\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# width: 200,\n# useBrick: [\n# {\n# brick: \"div\",\n# properties: {\n# style: {\n# display: \"flex\",\n# gap: \"4px\",\n# },\n# },\n# children: [\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.info\",\n# args: [\"<% DATA.rowData.name %>\"],\n# },\n# ],\n# },\n# },\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# danger: true,\n# icon: {\n# lib: \"antd\",\n# icon: \"delete\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.error\",\n# args: [\"<% JSON.stringify(DATA) %>\"],\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# remarks: \"Long text Long text\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: max-content\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n width: 100\n fixed: true\n headerBrick:\n useBrick:\n brick: span\n properties:\n style:\n color: red\n textContent: <% DATA.title %>\n useBrick:\n - brick: span\n properties:\n style:\n color: pink\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: column1\n title: column1\n - dataIndex: address\n key: column2\n title: column2\n - dataIndex: address\n key: column3\n title: column3\n - dataIndex: address\n key: column4\n title: column4\n - dataIndex: address\n key: column5\n title: column5\n - dataIndex: address\n key: column6\n title: column6\n - dataIndex: address\n key: column7\n title: column7\n - dataIndex: address\n key: column8\n title: column8\n - dataIndex: address\n key: column9\n title: column9\n - dataIndex: address\n key: column10\n title: column10\n - dataIndex: age\n key: age\n title: Age\n width: 100\n fixed: right\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: \"max-content\",\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# width: 100,\n# fixed: true,\n# headerBrick: {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"red\",\n# },\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# useBrick: [\n# {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"pink\",\n# },\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column1\",\n# title: \"column1\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column2\",\n# title: \"column2\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column3\",\n# title: \"column3\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column4\",\n# title: \"column4\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column5\",\n# title: \"column5\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column6\",\n# title: \"column6\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column7\",\n# title: \"column7\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column8\",\n# title: \"column8\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column9\",\n# title: \"column9\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column10\",\n# title: \"column10\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# width: 100,\n# fixed: \"right\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Front Search\n\n```yaml preview\n- brick: eo-search-bar\n children:\n - brick: eo-search\n slot: start\n properties:\n placeholder: Enter keyword\n events:\n search:\n target: \"#table\"\n method: search\n args:\n - q: <% EVENT.detail %>\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n sort.change:\n - action: console.log\n properties:\n id: table\n frontSearch: true\n searchFields:\n - address\n sort:\n columnKey: age\n order: descend\n multiSort: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n sortable: true\n sortPriority: 1\n - dataIndex: address\n key: address\n title: Address\n sortable: true\n sortPriority: 2\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n# <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"search\", (e) => {\n# const brick = document.querySelector(\"#table\");\n# brick.search({ q: \"<% EVENT.detail %>\" });\n# });\n# \n# const table = document.getElementById(\"table\");\n# table.searchFields = [\"address\"];\n# table.sort = {\n# columnKey: \"age\",\n# order: \"descend\",\n# };\n# table.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# table.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# sortable: true,\n# sortPriority: 1,\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# sortable: true,\n# sortPriority: 2,\n# },\n# ];\n# table.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# table.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"sort.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Row Selection\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n properties:\n rowSelection: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n useBrick:\n - brick: eo-tag\n properties:\n color: |\n <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# useBrick: [\n# {\n# brick: \"eo-tag\",\n# properties: {\n# color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expandable\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n expandable:\n rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n expandedRowBrick:\n useBrick:\n brick: eo-next-table\n properties:\n scrollConfig: false\n pagination: false\n bordered: true\n rowKey: title\n columns:\n - dataIndex: title\n key: title\n title: 标题\n - dataIndex: description\n key: description\n title: 描述\n - dataIndex: operator\n key: operator\n title: 操作\n useBrick:\n brick: eo-link\n properties:\n textContent: 操作\n dataSource:\n list: <% DATA.rowData.info %>\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n info:\n - title: 测试1\n description: 这是一串描述\n id: 1\n - title: 测试2\n description: 这是一串描述\n id: 2\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n info:\n - title: 测试3\n description: 这是一串描述\n id: 3\n - title: 测试4\n description: 这是一串描述\n id: 4\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Nanjing\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Wuhan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandable = {\n# rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n# expandedRowBrick: {\n# useBrick: {\n# brick: \"eo-next-table\",\n# properties: {\n# scrollConfig: false,\n# pagination: false,\n# bordered: true,\n# rowKey: \"title\",\n# columns: [\n# {\n# dataIndex: \"title\",\n# key: \"title\",\n# title: \"标题\",\n# },\n# {\n# dataIndex: \"description\",\n# key: \"description\",\n# title: \"描述\",\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# textContent: \"操作\",\n# },\n# },\n# },\n# ],\n# dataSource: {\n# list: \"<% DATA.rowData.info %>\",\n# },\n# },\n# },\n# },\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# info: [\n# {\n# title: \"测试1\",\n# description: \"这是一串描述\",\n# id: 1,\n# },\n# {\n# title: \"测试2\",\n# description: \"这是一串描述\",\n# id: 2,\n# },\n# ],\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# info: [\n# {\n# title: \"测试3\",\n# description: \"这是一串描述\",\n# id: 3,\n# },\n# {\n# title: \"测试4\",\n# description: \"这是一串描述\",\n# id: 4,\n# },\n# ],\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Nanjing\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Wuhan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-next-table\n properties:\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n - brick: :forEach\n dataSource:\n - large\n - middle\n - small\n children:\n - brick: strong\n properties:\n textContent: \"<% `Size: ${ITEM}` %>\"\n - brick: eo-next-table\n properties:\n size: <% ITEM %>\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Draggable\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.drag:\n - action: console.log\n properties:\n rowKey: name\n rowDraggable: true\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.drag\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n```yaml preview\n- brick: eo-next-table\n properties:\n pagination: false\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: mobile\n key: mobile\n title: phone\n colSpan: 2\n cellColSpanKey: mobileColSpan\n cellRowSpanKey: mobileRowSpan\n - dataIndex: landlines\n key: landlines\n colSpan: 0\n cellColSpanKey: landlinesColSpan\n cellRowSpanKey: landlinesRowSpan\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n mobile: 18900010222\n landlines: 0571-22098909\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n mobile: 18900010333\n mobileColSpan: 2\n landlinesColSpan: 0\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n mobile: 18900010444\n landlines: 0571-22098707\n landlinesRowSpan: 2\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n mobile: 18900010555\n landlines: 0571-22098707\n landlinesRowSpan: 0\n mobileRowSpan: 2\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n mobile: 18900010555\n landlines: 0571-22098606\n mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"mobile\",\n# key: \"mobile\",\n# title: \"phone\",\n# colSpan: 2,\n# cellColSpanKey: \"mobileColSpan\",\n# cellRowSpanKey: \"mobileRowSpan\",\n# },\n# {\n# dataIndex: \"landlines\",\n# key: \"landlines\",\n# colSpan: 0,\n# cellColSpanKey: \"landlinesColSpan\",\n# cellRowSpanKey: \"landlinesRowSpan\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# mobile: 18900010222,\n# landlines: \"0571-22098909\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# mobile: 18900010333,\n# mobileColSpan: 2,\n# landlinesColSpan: 0,\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# mobile: 18900010444,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 2,\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# mobile: 18900010555,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 0,\n# mobileRowSpan: 2,\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# mobile: 18900010555,\n# landlines: \"0571-22098606\",\n# mobileRowSpan: 0,\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n pagination: false\n childrenColumnName: student\n expandable:\n defaultExpandAllRows: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 28\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 35\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 33\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.expandable = {\n# defaultExpandAllRows: true,\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### With Row Selection\n\n设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n properties:\n pagination: false\n childrenColumnName: student\n rowSelection:\n checkStrictly: false\n indentSize: 50\n rowDisabled: <% DATA.rowData.age > 30 %>\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 34\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 27\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 35\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.rowSelection = {\n# checkStrictly: false,\n# indentSize: 50,\n# rowDisabled: \"<% DATA.rowData.age > 30 %>\",\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 34,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 27,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 35,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### With Front Search\n\n```yaml preview\n- brick: eo-search-bar\n children:\n - brick: eo-search\n slot: start\n properties:\n placeholder: Enter keyword\n events:\n search:\n target: \"#table\"\n method: search\n args:\n - q: <% EVENT.detail %>\n- brick: eo-next-table\n properties:\n id: table\n searchFields:\n - name\n - age\n - address\n pagination: false\n childrenColumnName: student\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 34\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 27\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 35\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n# <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table children-column-name=\"student\" id=\"table\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"search\", (e) => {\n# const brick = document.querySelector(\"#table\");\n# brick.search({ q: \"<% EVENT.detail %>\" });\n# });\n# \n# const table = document.getElementById(\"table\");\n# table.searchFields = [\"name\", \"age\", \"address\"];\n# table.pagination = false;\n# table.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# table.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 34,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 27,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 35,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Dynamic Columns\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n cell:\n useBrick:\n - if: <% DATA.columnKey !== '01-13' %>\n brick: em\n properties:\n textContent: <% DATA.cellData %>\n - if: <% DATA.columnKey === '01-13' %>\n brick: del\n properties:\n textContent: <% DATA.cellData %>\n header:\n useBrick:\n brick: em\n properties:\n textContent: <% DATA.title %>\n # Dynamic columns, such as by dates\n columns: <% CTX.dates %>\n dataSource:\n list:\n - \"01-11\": \"abc\"\n \"01-12\": \"def\"\n \"01-13\": \"ghi\"\n \"01-14\": \"jkl\"\n - \"01-11\": \"123\"\n \"01-12\": \"345\"\n \"01-13\": \"789\"\n \"01-14\": \"-\"\ncontext:\n - name: dates\n value: |\n <%\n new Array(4).fill(null).map(\n (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n ).map((key) => ({\n dataIndex: key,\n key,\n title: key,\n }))\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cell = {\n# useBrick: [\n# {\n# if: \"<% DATA.columnKey !== '01-13' %>\",\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# {\n# if: \"<% DATA.columnKey === '01-13' %>\",\n# brick: \"del\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# header: {\n# useBrick: {\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# };\n# brick_1.columns = \"<% CTX.dates %>\";\n# brick_1.dataSource = {\n# list: [\n# {\n# \"01-11\": \"abc\",\n# \"01-12\": \"def\",\n# \"01-13\": \"ghi\",\n# \"01-14\": \"jkl\",\n# },\n# {\n# \"01-11\": \"123\",\n# \"01-12\": \"345\",\n# \"01-13\": \"789\",\n# \"01-14\": \"-\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Cell status\n\n```yaml preview\n- brick: eo-next-table\n properties:\n columns:\n - dataIndex: name\n key: name\n title: Name\n cellStatus:\n dataIndex: age\n mapping:\n - value: 18\n leftBorderColor: green\n - value: 20\n leftBorderColor: blue\n - value: 28\n leftBorderColor: red\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# cellStatus: {\n# dataIndex: \"age\",\n# mapping: [\n# {\n# value: 18,\n# leftBorderColor: \"green\",\n# },\n# {\n# value: 20,\n# leftBorderColor: \"blue\",\n# },\n# {\n# value: 28,\n# leftBorderColor: \"red\",\n# },\n# ],\n# },\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n style:\n padding: 2em\n backgroundColor: \"#d8d8d8\"\nchildren:\n - brick: eo-next-table\n properties:\n themeVariant: elevo\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-next-table theme-variant=\"elevo\" id=\"brick-1\"></eo-next-table>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n"
4
4
  },
5
- "eo-tree": {
6
- "doc": "树形构件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Checkable\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n checkable: true\n selectable: false\n showLine: true\n switcherIcon: chevron\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n check:\n action: console.log\n check.detail:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.switcherIcon = \"chevron\";\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check.detail\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### titleSuffixBrick\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n titleSuffixBrick:\n useBrick:\n brick: eo-link\n properties:\n icon:\n lib: antd\n icon: edit\n theme: outlined\n style:\n margin-left: 5px\n font-size: 12px\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.titleSuffixBrick = {\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# theme: \"outlined\",\n# },\n# style: {\n# \"margin-left\": \"5px\",\n# \"font-size\": \"12px\",\n# },\n# },\n# },\n# };\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n"
5
+ "eo-cascader": {
6
+ "doc": "级联选择器\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 请选择城市\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n events:\n validate.success:\n - action: console.log\n values.change:\n - action: console.log\n children:\n - brick: eo-cascader\n properties:\n label: 城市选择\n name: city\n placeholder: 请选择城市\n required: true\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n events:\n cascader.change:\n - action: console.log\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-cascader\n# label=\"城市选择\"\n# name=\"city\"\n# placeholder=\"请选择城市\"\n# required\n# id=\"brick-2\"\n# ></eo-cascader>\n# <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# brick_2.addEventListener(\"cascader.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
7
7
  },
8
8
  "eo-tree-select": {
9
9
  "doc": "构件 `eo-tree-select`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-tree-select\n properties:\n treeData:\n - title: Node1\n value: 0\n key: 0\n children:\n - title: Node1-1\n value: 0-1\n - title: Node1-2\n value: 0-2\n - title: Node1-3\n value: 0-3\n - title: Node2\n value: 1\n key: 1\n children:\n - title: Node2-1\n value: 1-1\n - title: Node2-2\n value: 1-2\n - title: Node2-3\n value: 1-3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree-select id=\"brick-1\"></eo-tree-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.treeData = [\n# {\n# title: \"Node1\",\n# value: 0,\n# key: 0,\n# children: [\n# {\n# title: \"Node1-1\",\n# value: \"0-1\",\n# },\n# {\n# title: \"Node1-2\",\n# value: \"0-2\",\n# },\n# {\n# title: \"Node1-3\",\n# value: \"0-3\",\n# },\n# ],\n# },\n# {\n# title: \"Node2\",\n# value: 1,\n# key: 1,\n# children: [\n# {\n# title: \"Node2-1\",\n# value: \"1-1\",\n# },\n# {\n# title: \"Node2-2\",\n# value: \"1-2\",\n# },\n# {\n# title: \"Node2-3\",\n# value: \"1-3\",\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"500px\"\n- brick: eo-form\n events:\n validate.success:\n - action: console.log\n validate.error:\n - action: console.log\n children:\n - brick: eo-tree-select\n properties:\n label: tree\n name: tree\n required: true\n treeData:\n - title: \"Node1\"\n value: \"Node1\"\n key: \"0-0\"\n children:\n - title: \"Child Node1-1\"\n value: \"Child Node1-1\"\n key: \"0-0-0\"\n - title: \"Child Node1-2\"\n value: \"Child Node1-2\"\n key: \"0-0-1\"\n - title: \"Node2\"\n value: \"0-1\"\n key: \"0-1\"\n children:\n - title: \"Child Node2-1\"\n value: \"Child Node2-1\"\n key: \"0-1-0\"\n - title: \"Child Node2-2\"\n value: \"Child Node2-2\"\n key: \"0-1-1\"\n children:\n - title: Child Node2-2-1\n value: Child Node2-2-1\n key: \"0-1-1-0\"\n multiple: true\n checkable: true\n placeholder: 请选择树节点\n events:\n change:\n - action: console.log\n select:\n - action: console.log\n expand:\n - action: console.log\n search:\n - action: console.log\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-tree-select\n# label=\"tree\"\n# name=\"tree\"\n# required\n# multiple\n# checkable\n# placeholder=\"请选择树节点\"\n# id=\"brick-2\"\n# ></eo-tree-select>\n# <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"validate.error\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.treeData = [\n# {\n# title: \"Node1\",\n# value: \"Node1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"Child Node1-1\",\n# value: \"Child Node1-1\",\n# key: \"0-0-0\",\n# },\n# {\n# title: \"Child Node1-2\",\n# value: \"Child Node1-2\",\n# key: \"0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"Node2\",\n# value: \"0-1\",\n# key: \"0-1\",\n# children: [\n# {\n# title: \"Child Node2-1\",\n# value: \"Child Node2-1\",\n# key: \"0-1-0\",\n# },\n# {\n# title: \"Child Node2-2\",\n# value: \"Child Node2-2\",\n# key: \"0-1-1\",\n# children: [\n# {\n# title: \"Child Node2-2-1\",\n# value: \"Child Node2-2-1\",\n# key: \"0-1-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_2.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"select\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_2.addEventListener(\"search\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
10
10
  },
11
- "advanced.pdf-viewer": {
12
- "doc": "构件 `advanced.pdf-viewer`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n viewerStyle:\n height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n# url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n# id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.viewerStyle = {\n# height: \"500px\",\n# };\n# </script>\n# \n```\n"
13
- },
14
11
  "eo-text-tooltip": {
15
12
  "doc": "eo-text-tooltip\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: div\n properties:\n style:\n display: flex\n flex-direction: column\n gap: 16px\n children:\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\n lineClamp: 0\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 单行不超出不显示tips\n lineClamp: 1\n - brick: eo-text-tooltip\n properties:\n style:\n width: 180px\n label: 单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\n lineClamp: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; gap: 16px\">\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略不省略\"\n# line-clamp=\"0\"\n# ></eo-text-tooltip>\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"单行不超出不显示tips\"\n# line-clamp=\"1\"\n# ></eo-text-tooltip>\n# <eo-text-tooltip\n# style=\"width: 180px\"\n# label=\"单行超出省略显示tips单行超出省略显示tips单行超出省略显示tips\"\n# line-clamp=\"1\"\n# ></eo-text-tooltip>\n# </div>\n# \n```\n"
16
13
  },
17
- "eo-cascader": {
18
- "doc": "级联选择器\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-cascader\n properties:\n placeholder: 请选择城市\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-cascader placeholder=\"请选择城市\" id=\"brick-1\"></eo-cascader>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-form\n events:\n validate.success:\n - action: console.log\n values.change:\n - action: console.log\n children:\n - brick: eo-cascader\n properties:\n label: 城市选择\n name: city\n placeholder: 请选择城市\n required: true\n options:\n - children:\n - children:\n - label: West Lake\n value: xihu\n label: Hangzhou\n value: hangzhou\n label: Zhejiang\n value: zhejiang\n - children:\n - children:\n - label: Zhong Hua Men\n value: zhonghuamen\n label: Nanjing\n value: nanjing\n label: Jiangsu\n value: jiangsu\n events:\n cascader.change:\n - action: console.log\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-cascader\n# label=\"城市选择\"\n# name=\"city\"\n# placeholder=\"请选择城市\"\n# required\n# id=\"brick-2\"\n# ></eo-cascader>\n# <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"West Lake\",\n# value: \"xihu\",\n# },\n# ],\n# label: \"Hangzhou\",\n# value: \"hangzhou\",\n# },\n# ],\n# label: \"Zhejiang\",\n# value: \"zhejiang\",\n# },\n# {\n# children: [\n# {\n# children: [\n# {\n# label: \"Zhong Hua Men\",\n# value: \"zhonghuamen\",\n# },\n# ],\n# label: \"Nanjing\",\n# value: \"nanjing\",\n# },\n# ],\n# label: \"Jiangsu\",\n# value: \"jiangsu\",\n# },\n# ];\n# brick_2.addEventListener(\"cascader.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
14
+ "advanced.pdf-viewer": {
15
+ "doc": "构件 `advanced.pdf-viewer`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: advanced.pdf-viewer\nproperties:\n url: https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\n viewerStyle:\n height: 500px\n# -- YAML DELIMITER (1nbbm8) --\n# <advanced.pdf-viewer\n# url=\"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf\"\n# id=\"brick-1\"\n# ></advanced.pdf-viewer>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.viewerStyle = {\n# height: \"500px\",\n# };\n# </script>\n# \n```\n"
19
16
  },
20
- "eo-next-table": {
21
- "doc": "大型表格\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: false\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n - dataIndex: remarks\n key: remarks\n title: Long Column Long Column Long Column Long Column\n width: 200\n ellipsis: true\n - dataIndex: operator\n key: operator\n title: 操作\n width: 200\n useBrick:\n - brick: div\n properties:\n style:\n display: flex\n gap: 4px\n children:\n - brick: eo-button\n properties:\n type: link\n size: small\n icon:\n lib: antd\n icon: edit\n events:\n click:\n - action: message.info\n args:\n - <% DATA.rowData.name %>\n - brick: eo-button\n properties:\n type: link\n size: small\n danger: true\n icon:\n lib: antd\n icon: delete\n events:\n click:\n - action: message.error\n args:\n - <% JSON.stringify(DATA) %>\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n remarks: Long text Long text\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n remarks: Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: false,\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# {\n# dataIndex: \"remarks\",\n# key: \"remarks\",\n# title: \"Long Column Long Column Long Column Long Column\",\n# width: 200,\n# ellipsis: true,\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# width: 200,\n# useBrick: [\n# {\n# brick: \"div\",\n# properties: {\n# style: {\n# display: \"flex\",\n# gap: \"4px\",\n# },\n# },\n# children: [\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.info\",\n# args: [\"<% DATA.rowData.name %>\"],\n# },\n# ],\n# },\n# },\n# {\n# brick: \"eo-button\",\n# properties: {\n# type: \"link\",\n# size: \"small\",\n# danger: true,\n# icon: {\n# lib: \"antd\",\n# icon: \"delete\",\n# },\n# },\n# events: {\n# click: [\n# {\n# action: \"message.error\",\n# args: [\"<% JSON.stringify(DATA) %>\"],\n# },\n# ],\n# },\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# remarks: \"Long text Long text\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# remarks:\n# \"Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Fixed & Scroll & useBrick\n\n```yaml preview\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n properties:\n scrollConfig:\n x: max-content\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n width: 100\n fixed: true\n headerBrick:\n useBrick:\n brick: span\n properties:\n style:\n color: red\n textContent: <% DATA.title %>\n useBrick:\n - brick: span\n properties:\n style:\n color: pink\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: column1\n title: column1\n - dataIndex: address\n key: column2\n title: column2\n - dataIndex: address\n key: column3\n title: column3\n - dataIndex: address\n key: column4\n title: column4\n - dataIndex: address\n key: column5\n title: column5\n - dataIndex: address\n key: column6\n title: column6\n - dataIndex: address\n key: column7\n title: column7\n - dataIndex: address\n key: column8\n title: column8\n - dataIndex: address\n key: column9\n title: column9\n - dataIndex: address\n key: column10\n title: column10\n - dataIndex: age\n key: age\n title: Age\n width: 100\n fixed: right\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.scrollConfig = {\n# x: \"max-content\",\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# width: 100,\n# fixed: true,\n# headerBrick: {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"red\",\n# },\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# useBrick: [\n# {\n# brick: \"span\",\n# properties: {\n# style: {\n# color: \"pink\",\n# },\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column1\",\n# title: \"column1\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column2\",\n# title: \"column2\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column3\",\n# title: \"column3\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column4\",\n# title: \"column4\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column5\",\n# title: \"column5\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column6\",\n# title: \"column6\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column7\",\n# title: \"column7\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column8\",\n# title: \"column8\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column9\",\n# title: \"column9\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"column10\",\n# title: \"column10\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# width: 100,\n# fixed: \"right\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Front Search\n\n```yaml preview\n- brick: eo-search-bar\n children:\n - brick: eo-search\n slot: start\n properties:\n placeholder: Enter keyword\n events:\n search:\n target: \"#table\"\n method: search\n args:\n - q: <% EVENT.detail %>\n- brick: eo-next-table\n events:\n page.change:\n - action: console.log\n page.size.change:\n - action: console.log\n sort.change:\n - action: console.log\n properties:\n id: table\n frontSearch: true\n searchFields:\n - address\n sort:\n columnKey: age\n order: descend\n multiSort: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n sortable: true\n sortPriority: 1\n - dataIndex: address\n key: address\n title: Address\n sortable: true\n sortPriority: 2\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n# <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table front-search multi-sort id=\"table\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"search\", (e) => {\n# const brick = document.querySelector(\"#table\");\n# brick.search({ q: \"<% EVENT.detail %>\" });\n# });\n# \n# const table = document.getElementById(\"table\");\n# table.searchFields = [\"address\"];\n# table.sort = {\n# columnKey: \"age\",\n# order: \"descend\",\n# };\n# table.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# table.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# sortable: true,\n# sortPriority: 1,\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# sortable: true,\n# sortPriority: 2,\n# },\n# ];\n# table.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# table.addEventListener(\"page.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"page.size.change\", (e) => {\n# console.log(e.detail);\n# });\n# table.addEventListener(\"sort.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Row Selection\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n properties:\n rowSelection: true\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n useBrick:\n - brick: eo-tag\n properties:\n color: |\n <% DATA.cellData > 18 ? \"green\" : \"red\" %>\n textContent: <% DATA.cellData %>\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rowSelection = true;\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# useBrick: [\n# {\n# brick: \"eo-tag\",\n# properties: {\n# color: '<% DATA.cellData > 18 ? \"green\" : \"red\" %>\\n',\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Expandable\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n expandable:\n rowExpandable: <% DATA.rowData.key % 2 === 0 %>\n expandedRowBrick:\n useBrick:\n brick: eo-next-table\n properties:\n scrollConfig: false\n pagination: false\n bordered: true\n rowKey: title\n columns:\n - dataIndex: title\n key: title\n title: 标题\n - dataIndex: description\n key: description\n title: 描述\n - dataIndex: operator\n key: operator\n title: 操作\n useBrick:\n brick: eo-link\n properties:\n textContent: 操作\n dataSource:\n list: <% DATA.rowData.info %>\n pagination:\n pageSizeOptions:\n - 5\n - 10\n - 20\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n info:\n - title: 测试1\n description: 这是一串描述\n id: 1\n - title: 测试2\n description: 这是一串描述\n id: 2\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n info:\n - title: 测试3\n description: 这是一串描述\n id: 3\n - title: 测试4\n description: 这是一串描述\n id: 4\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Nanjing\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Wuhan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.expandable = {\n# rowExpandable: \"<% DATA.rowData.key % 2 === 0 %>\",\n# expandedRowBrick: {\n# useBrick: {\n# brick: \"eo-next-table\",\n# properties: {\n# scrollConfig: false,\n# pagination: false,\n# bordered: true,\n# rowKey: \"title\",\n# columns: [\n# {\n# dataIndex: \"title\",\n# key: \"title\",\n# title: \"标题\",\n# },\n# {\n# dataIndex: \"description\",\n# key: \"description\",\n# title: \"描述\",\n# },\n# {\n# dataIndex: \"operator\",\n# key: \"operator\",\n# title: \"操作\",\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# textContent: \"操作\",\n# },\n# },\n# },\n# ],\n# dataSource: {\n# list: \"<% DATA.rowData.info %>\",\n# },\n# },\n# },\n# },\n# };\n# brick_1.pagination = {\n# pageSizeOptions: [5, 10, 20],\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# info: [\n# {\n# title: \"测试1\",\n# description: \"这是一串描述\",\n# id: 1,\n# },\n# {\n# title: \"测试2\",\n# description: \"这是一串描述\",\n# id: 2,\n# },\n# ],\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# info: [\n# {\n# title: \"测试3\",\n# description: \"这是一串描述\",\n# id: 3,\n# },\n# {\n# title: \"测试4\",\n# description: \"这是一串描述\",\n# id: 4,\n# },\n# ],\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Nanjing\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Wuhan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Bordered\n\n```yaml preview\n- brick: eo-next-table\n properties:\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Size\n\n```yaml preview\nbrick: eo-content-layout\nchildren:\n - brick: :forEach\n dataSource:\n - large\n - middle\n - small\n children:\n - brick: strong\n properties:\n textContent: \"<% `Size: ${ITEM}` %>\"\n - brick: eo-next-table\n properties:\n size: <% ITEM %>\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-content-layout>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </eo-content-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Draggable\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.drag:\n - action: console.log\n properties:\n rowKey: name\n rowDraggable: true\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n - key: 5\n name: Ava\n age: 23\n address: Beijing\n - key: 6\n name: Sophia\n age: 20\n address: Shanghai\n - key: 7\n name: Charlotte\n age: 33\n address: Chongqing\n - key: 8\n name: Mia\n age: 18\n address: Chengdu\n - key: 9\n name: Noah\n age: 38\n address: Hainan\n - key: 10\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table row-key=\"name\" row-draggable id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# },\n# {\n# key: 5,\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: 6,\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 7,\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# },\n# {\n# key: 8,\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: 9,\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: 10,\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.drag\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### RowSpan & ColSpan\n\n```yaml preview\n- brick: eo-next-table\n properties:\n pagination: false\n bordered: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: mobile\n key: mobile\n title: phone\n colSpan: 2\n cellColSpanKey: mobileColSpan\n cellRowSpanKey: mobileRowSpan\n - dataIndex: landlines\n key: landlines\n colSpan: 0\n cellColSpanKey: landlinesColSpan\n cellRowSpanKey: landlinesRowSpan\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n mobile: 18900010222\n landlines: 0571-22098909\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n mobile: 18900010333\n mobileColSpan: 2\n landlinesColSpan: 0\n - key: 2\n name: Lucy\n age: 16\n address: Yunnan\n mobile: 18900010444\n landlines: 0571-22098707\n landlinesRowSpan: 2\n - key: 3\n name: Sam\n age: 28\n address: Guangzhou\n mobile: 18900010555\n landlines: 0571-22098707\n landlinesRowSpan: 0\n mobileRowSpan: 2\n - key: 4\n name: Bob\n age: 35\n address: Hainan\n mobile: 18900010555\n landlines: 0571-22098606\n mobileRowSpan: 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table bordered id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"mobile\",\n# key: \"mobile\",\n# title: \"phone\",\n# colSpan: 2,\n# cellColSpanKey: \"mobileColSpan\",\n# cellRowSpanKey: \"mobileRowSpan\",\n# },\n# {\n# dataIndex: \"landlines\",\n# key: \"landlines\",\n# colSpan: 0,\n# cellColSpanKey: \"landlinesColSpan\",\n# cellRowSpanKey: \"landlinesRowSpan\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# mobile: 18900010222,\n# landlines: \"0571-22098909\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# mobile: 18900010333,\n# mobileColSpan: 2,\n# landlinesColSpan: 0,\n# },\n# {\n# key: 2,\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# mobile: 18900010444,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 2,\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# mobile: 18900010555,\n# landlines: \"0571-22098707\",\n# landlinesRowSpan: 0,\n# mobileRowSpan: 2,\n# },\n# {\n# key: 4,\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# mobile: 18900010555,\n# landlines: \"0571-22098606\",\n# mobileRowSpan: 0,\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Tree\n\n设置 childrenColumnName 来指定树形结构的列名，展开功能的配置可以使用 expandable。目前树形结构暂不支持拖拽。\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.expand:\n - action: console.log\n expanded.rows.change:\n - action: console.log\n properties:\n pagination: false\n childrenColumnName: student\n expandable:\n defaultExpandAllRows: true\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 28\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 35\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 33\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.expandable = {\n# defaultExpandAllRows: true,\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 28,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 35,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 33,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.expand\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"expanded.rows.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### With Row Selection\n\n设置 rowSelection.checkStrictly 来控制父子数据选中状态是否关联。注意，关联的时候，节点勾选传导策略为【只勾选可触达的可勾选节点】\n\n```yaml preview\n- brick: eo-next-table\n events:\n row.select:\n - action: console.log\n properties:\n pagination: false\n childrenColumnName: student\n rowSelection:\n checkStrictly: false\n indentSize: 50\n rowDisabled: <% DATA.rowData.age > 30 %>\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 34\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 27\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 35\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table children-column-name=\"student\" id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.rowSelection = {\n# checkStrictly: false,\n# indentSize: 50,\n# rowDisabled: \"<% DATA.rowData.age > 30 %>\",\n# };\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 34,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 27,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 35,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# brick_1.addEventListener(\"row.select\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n#### With Front Search\n\n```yaml preview\n- brick: eo-search-bar\n children:\n - brick: eo-search\n slot: start\n properties:\n placeholder: Enter keyword\n events:\n search:\n target: \"#table\"\n method: search\n args:\n - q: <% EVENT.detail %>\n- brick: eo-next-table\n properties:\n id: table\n searchFields:\n - name\n - age\n - address\n pagination: false\n childrenColumnName: student\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n list:\n - key: \"1\"\n name: Jack\n age: 18\n address: Guangzhou\n student:\n - key: \"11\"\n name: Alex\n age: 20\n address: Shanghai\n - key: \"12\"\n name: Lucy\n age: 16\n address: Yunnan\n - key: \"13\"\n name: Sam\n age: 34\n address: Guangzhou\n - key: \"2\"\n name: Bob\n age: 27\n address: Hainan\n student:\n - key: \"21\"\n name: Ava\n age: 23\n address: Beijing\n - key: \"22\"\n name: Sophia\n age: 20\n address: Shanghai\n - key: \"23\"\n name: Charlotte\n age: 35\n address: Chongqing\n student:\n - key: \"231\"\n name: Mia\n age: 18\n address: Chengdu\n - key: \"232\"\n name: Noah\n age: 38\n address: Hainan\n - key: \"233\"\n name: William\n age: 16\n address: Taiwan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search-bar>\n# <eo-search slot=\"start\" placeholder=\"Enter keyword\" id=\"brick-1\"></eo-search>\n# </eo-search-bar>\n# <eo-next-table children-column-name=\"student\" id=\"table\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"search\", (e) => {\n# const brick = document.querySelector(\"#table\");\n# brick.search({ q: \"<% EVENT.detail %>\" });\n# });\n# \n# const table = document.getElementById(\"table\");\n# table.searchFields = [\"name\", \"age\", \"address\"];\n# table.pagination = false;\n# table.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# table.dataSource = {\n# list: [\n# {\n# key: \"1\",\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# student: [\n# {\n# key: \"11\",\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"12\",\n# name: \"Lucy\",\n# age: 16,\n# address: \"Yunnan\",\n# },\n# {\n# key: \"13\",\n# name: \"Sam\",\n# age: 34,\n# address: \"Guangzhou\",\n# },\n# ],\n# },\n# {\n# key: \"2\",\n# name: \"Bob\",\n# age: 27,\n# address: \"Hainan\",\n# student: [\n# {\n# key: \"21\",\n# name: \"Ava\",\n# age: 23,\n# address: \"Beijing\",\n# },\n# {\n# key: \"22\",\n# name: \"Sophia\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: \"23\",\n# name: \"Charlotte\",\n# age: 35,\n# address: \"Chongqing\",\n# student: [\n# {\n# key: \"231\",\n# name: \"Mia\",\n# age: 18,\n# address: \"Chengdu\",\n# },\n# {\n# key: \"232\",\n# name: \"Noah\",\n# age: 38,\n# address: \"Hainan\",\n# },\n# {\n# key: \"233\",\n# name: \"William\",\n# age: 16,\n# address: \"Taiwan\",\n# },\n# ],\n# },\n# ],\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Dynamic Columns\n\n```yaml preview\nbrick: eo-next-table\nproperties:\n cell:\n useBrick:\n - if: <% DATA.columnKey !== '01-13' %>\n brick: em\n properties:\n textContent: <% DATA.cellData %>\n - if: <% DATA.columnKey === '01-13' %>\n brick: del\n properties:\n textContent: <% DATA.cellData %>\n header:\n useBrick:\n brick: em\n properties:\n textContent: <% DATA.title %>\n # Dynamic columns, such as by dates\n columns: <% CTX.dates %>\n dataSource:\n list:\n - \"01-11\": \"abc\"\n \"01-12\": \"def\"\n \"01-13\": \"ghi\"\n \"01-14\": \"jkl\"\n - \"01-11\": \"123\"\n \"01-12\": \"345\"\n \"01-13\": \"789\"\n \"01-14\": \"-\"\ncontext:\n - name: dates\n value: |\n <%\n new Array(4).fill(null).map(\n (d, i) => moment('2023-01-11').add(i, 'days').format('MM-DD')\n ).map((key) => ({\n dataIndex: key,\n key,\n title: key,\n }))\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.cell = {\n# useBrick: [\n# {\n# if: \"<% DATA.columnKey !== '01-13' %>\",\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# {\n# if: \"<% DATA.columnKey === '01-13' %>\",\n# brick: \"del\",\n# properties: {\n# textContent: \"<% DATA.cellData %>\",\n# },\n# },\n# ],\n# header: {\n# useBrick: {\n# brick: \"em\",\n# properties: {\n# textContent: \"<% DATA.title %>\",\n# },\n# },\n# },\n# };\n# brick_1.columns = \"<% CTX.dates %>\";\n# brick_1.dataSource = {\n# list: [\n# {\n# \"01-11\": \"abc\",\n# \"01-12\": \"def\",\n# \"01-13\": \"ghi\",\n# \"01-14\": \"jkl\",\n# },\n# {\n# \"01-11\": \"123\",\n# \"01-12\": \"345\",\n# \"01-13\": \"789\",\n# \"01-14\": \"-\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Cell status\n\n```yaml preview\n- brick: eo-next-table\n properties:\n columns:\n - dataIndex: name\n key: name\n title: Name\n cellStatus:\n dataIndex: age\n mapping:\n - value: 18\n leftBorderColor: green\n - value: 20\n leftBorderColor: blue\n - value: 28\n leftBorderColor: red\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-next-table id=\"brick-1\"></eo-next-table>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# cellStatus: {\n# dataIndex: \"age\",\n# mapping: [\n# {\n# value: 18,\n# leftBorderColor: \"green\",\n# },\n# {\n# value: 20,\n# leftBorderColor: \"blue\",\n# },\n# {\n# value: 28,\n# leftBorderColor: \"red\",\n# },\n# ],\n# },\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n style:\n padding: 2em\n backgroundColor: \"#d8d8d8\"\nchildren:\n - brick: eo-next-table\n properties:\n themeVariant: elevo\n pagination: false\n columns:\n - dataIndex: name\n key: name\n title: Name\n - dataIndex: age\n key: age\n title: Age\n - dataIndex: address\n key: address\n title: Address\n dataSource:\n pageSize: 5\n page: 1\n list:\n - key: 0\n name: Jack\n age: 18\n address: Guangzhou\n - key: 1\n name: Alex\n age: 20\n address: Shanghai\n - key: 3\n name: Sam\n age: 28\n address: Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-next-table theme-variant=\"elevo\" id=\"brick-1\"></eo-next-table>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.pagination = false;\n# brick_1.columns = [\n# {\n# dataIndex: \"name\",\n# key: \"name\",\n# title: \"Name\",\n# },\n# {\n# dataIndex: \"age\",\n# key: \"age\",\n# title: \"Age\",\n# },\n# {\n# dataIndex: \"address\",\n# key: \"address\",\n# title: \"Address\",\n# },\n# ];\n# brick_1.dataSource = {\n# pageSize: 5,\n# page: 1,\n# list: [\n# {\n# key: 0,\n# name: \"Jack\",\n# age: 18,\n# address: \"Guangzhou\",\n# },\n# {\n# key: 1,\n# name: \"Alex\",\n# age: 20,\n# address: \"Shanghai\",\n# },\n# {\n# key: 3,\n# name: \"Sam\",\n# age: 28,\n# address: \"Shenzhen\",\n# },\n# ],\n# };\n# </script>\n# \n```\n"
17
+ "eo-tree": {
18
+ "doc": "树形构件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n\n### Checkable\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n checkable: true\n selectable: false\n showLine: true\n switcherIcon: chevron\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\nevents:\n check:\n action: console.log\n check.detail:\n action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all checkable show-line id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.switcherIcon = \"chevron\";\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# brick_1.addEventListener(\"check\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"check.detail\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### titleSuffixBrick\n\n```yaml preview\nbrick: eo-tree\nproperties:\n defaultExpandAll: true\n titleSuffixBrick:\n useBrick:\n brick: eo-link\n properties:\n icon:\n lib: antd\n icon: edit\n theme: outlined\n style:\n margin-left: 5px\n font-size: 12px\n dataSource:\n - title: parent 1\n key: 0-0\n children:\n - title: parent 1-0\n key: 0-0-0\n children:\n - title: leaf\n key: 0-0-0-0\n - title: leaf\n key: 0-0-0-1\n - title: parent 1-1\n key: 0-0-1\n children:\n - title: sss\n key: 0-0-1-0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-tree default-expand-all id=\"brick-1\"></eo-tree>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.titleSuffixBrick = {\n# useBrick: {\n# brick: \"eo-link\",\n# properties: {\n# icon: {\n# lib: \"antd\",\n# icon: \"edit\",\n# theme: \"outlined\",\n# },\n# style: {\n# \"margin-left\": \"5px\",\n# \"font-size\": \"12px\",\n# },\n# },\n# },\n# };\n# brick_1.dataSource = [\n# {\n# title: \"parent 1\",\n# key: \"0-0\",\n# children: [\n# {\n# title: \"parent 1-0\",\n# key: \"0-0-0\",\n# children: [\n# {\n# title: \"leaf\",\n# key: \"0-0-0-0\",\n# },\n# {\n# title: \"leaf\",\n# key: \"0-0-0-1\",\n# },\n# ],\n# },\n# {\n# title: \"parent 1-1\",\n# key: \"0-0-1\",\n# children: [\n# {\n# title: \"sss\",\n# key: \"0-0-1-0\",\n# },\n# ],\n# },\n# ],\n# },\n# ];\n# </script>\n# \n```\n"
19
+ },
20
+ "eo-workbench-layout": {
21
+ "doc": "工作台布局\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-workbench-layout\n properties:\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n - i: world\n x: 0\n y: 1\n w: 2\n h: 1\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n componentList:\n - title: 基础布局\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: Hello\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n key: hello\n - title: world\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: World\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: world\n x: 0\n y: 2\n w: 2\n h: 1\n key: world\n - title: small\n useBrick:\n brick: div\n properties:\n style:\n height: 100%\n background: \"#fff\"\n children:\n - brick: div\n properties:\n textContent: small\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 2\n key: small\n - title: custom\n useBrick:\n brick: div\n properties:\n style:\n background: \"#6ad26a\"\n width: 100%\n height: 100%\n position:\n i: custom\n x: 1\n y: 3\n w: 1\n h: 1\n key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"world\",\n# x: 0,\n# y: 1,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"基础布局\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"Hello\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# key: \"hello\",\n# },\n# {\n# title: \"world\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"World\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"world\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# key: \"world\",\n# },\n# {\n# title: \"small\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# height: \"100%\",\n# background: \"#fff\",\n# },\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"small\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 2,\n# },\n# key: \"small\",\n# },\n# {\n# title: \"custom\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# background: \"#6ad26a\",\n# width: \"100%\",\n# height: \"100%\",\n# },\n# },\n# },\n# position: {\n# i: \"custom\",\n# x: 1,\n# y: 3,\n# w: 1,\n# h: 1,\n# },\n# key: \"custom\",\n# },\n# ];\n# </script>\n# \n```\n\n### Edit & Event\n\n```yaml preview\n- brick: eo-workbench-layout\n events:\n save.layout:\n - action: console.log\n properties:\n isEdit: true\n layouts:\n - i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n - i: world\n x: 0\n y: 1\n w: 2\n h: 1\n - i: small\n x: 2\n y: 0\n w: 1\n h: 1\n componentList:\n - title: 基础布局\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: Hello\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: hello\n x: 0\n y: 0\n w: 2\n h: 1\n key: hello\n - title: world\n useBrick:\n brick: eo-card\n properties:\n fillVertical: true\n children:\n - brick: div\n properties:\n textContent: World\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: world\n x: 0\n y: 2\n w: 2\n h: 1\n key: world\n - title: small\n useBrick:\n brick: div\n properties:\n style:\n height: 100%\n background: \"#fff\"\n children:\n - brick: div\n properties:\n textContent: small\n style:\n textAlign: center\n fontSize: 20px\n position:\n i: small\n x: 2\n y: 0\n w: 1\n h: 2\n key: small\n - title: custom\n useBrick:\n brick: div\n properties:\n style:\n background: \"#6ad26a\"\n width: 100%\n height: 100%\n position:\n i: custom\n x: 1\n y: 3\n w: 1\n h: 1\n key: custom\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-workbench-layout is-edit id=\"brick-1\"></eo-workbench-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.layouts = [\n# {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"world\",\n# x: 0,\n# y: 1,\n# w: 2,\n# h: 1,\n# },\n# {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 1,\n# },\n# ];\n# brick_1.componentList = [\n# {\n# title: \"基础布局\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"Hello\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"hello\",\n# x: 0,\n# y: 0,\n# w: 2,\n# h: 1,\n# },\n# key: \"hello\",\n# },\n# {\n# title: \"world\",\n# useBrick: {\n# brick: \"eo-card\",\n# properties: {\n# fillVertical: true,\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"World\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"world\",\n# x: 0,\n# y: 2,\n# w: 2,\n# h: 1,\n# },\n# key: \"world\",\n# },\n# {\n# title: \"small\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# height: \"100%\",\n# background: \"#fff\",\n# },\n# },\n# children: [\n# {\n# brick: \"div\",\n# properties: {\n# textContent: \"small\",\n# style: {\n# textAlign: \"center\",\n# fontSize: \"20px\",\n# },\n# },\n# },\n# ],\n# },\n# position: {\n# i: \"small\",\n# x: 2,\n# y: 0,\n# w: 1,\n# h: 2,\n# },\n# key: \"small\",\n# },\n# {\n# title: \"custom\",\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style: {\n# background: \"#6ad26a\",\n# width: \"100%\",\n# height: \"100%\",\n# },\n# },\n# },\n# position: {\n# i: \"custom\",\n# x: 1,\n# y: 3,\n# w: 1,\n# h: 1,\n# },\n# key: \"custom\",\n# },\n# ];\n# brick_1.addEventListener(\"save.layout\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
22
22
  },
23
23
  "advanced.capture-snapshot": {
24
24
  "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"