@next-bricks/form 1.20.5 → 1.20.6

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 (7) hide show
  1. package/dist/bricks.json +21 -21
  2. package/dist/examples.json +8 -8
  3. package/dist/{index.56e0bce8.js → index.244d1588.js} +2 -2
  4. package/dist/{index.56e0bce8.js.map → index.244d1588.js.map} +1 -1
  5. package/dist/manifest.json +229 -229
  6. package/dist/types.json +1042 -1042
  7. package/package.json +2 -2
package/dist/bricks.json CHANGED
@@ -1,29 +1,28 @@
1
1
  {
2
2
  "id": "bricks/form",
3
3
  "bricks": [
4
- "form.general-textarea",
5
- "form.general-form",
6
4
  "form.general-radio",
5
+ "form.general-form",
7
6
  "form.general-select",
8
7
  "form.submit-buttons",
9
8
  "form.general-checkbox",
10
- "form.dynamic-form-item",
11
9
  "form.general-search",
10
+ "form.dynamic-form-item",
12
11
  "form.icon-select",
13
12
  "form.upload-image",
14
13
  "form.general-switch",
14
+ "form.general-textarea",
15
15
  "form.general-form-item",
16
16
  "form.general-input"
17
17
  ],
18
18
  "elements": [
19
- "eo-textarea",
20
- "eo-form",
21
19
  "eo-radio",
20
+ "eo-form",
22
21
  "eo-select",
23
22
  "eo-submit-buttons",
24
23
  "eo-checkbox",
25
- "eo-dynamic-form-item",
26
24
  "eo-search",
25
+ "eo-dynamic-form-item",
27
26
  "eo-icon-select",
28
27
  "eo-upload-image",
29
28
  "eo-switch",
@@ -31,6 +30,7 @@
31
30
  "eo-auto-complete",
32
31
  "eo-time-picker",
33
32
  "eo-date-picker",
33
+ "eo-textarea",
34
34
  "eo-time-range-picker",
35
35
  "eo-color-picker",
36
36
  "eo-form-item",
@@ -39,12 +39,6 @@
39
39
  "processors": [],
40
40
  "editors": [],
41
41
  "dependencies": {
42
- "eo-textarea": [
43
- "eo-form-item"
44
- ],
45
- "form.general-textarea": [
46
- "eo-form-item"
47
- ],
48
42
  "eo-radio": [
49
43
  "eo-icon",
50
44
  "eo-form-item"
@@ -81,6 +75,14 @@
81
75
  "eo-form-item",
82
76
  "eo-icon"
83
77
  ],
78
+ "eo-search": [
79
+ "eo-icon",
80
+ "eo-input"
81
+ ],
82
+ "form.general-search": [
83
+ "eo-icon",
84
+ "eo-input"
85
+ ],
84
86
  "eo-dynamic-form-item": [
85
87
  "eo-icon",
86
88
  "eo-button",
@@ -93,14 +95,6 @@
93
95
  "eo-form",
94
96
  "eo-form-item"
95
97
  ],
96
- "eo-search": [
97
- "eo-icon",
98
- "eo-input"
99
- ],
100
- "form.general-search": [
101
- "eo-icon",
102
- "eo-input"
103
- ],
104
98
  "eo-icon-select": [
105
99
  "icons.get-libs",
106
100
  "icons.search-icons",
@@ -157,6 +151,12 @@
157
151
  "eo-form-item",
158
152
  "eo-icon"
159
153
  ],
154
+ "eo-textarea": [
155
+ "eo-form-item"
156
+ ],
157
+ "form.general-textarea": [
158
+ "eo-form-item"
159
+ ],
160
160
  "eo-time-range-picker": [
161
161
  "eo-form-item",
162
162
  "eo-icon"
@@ -171,5 +171,5 @@
171
171
  "eo-icon"
172
172
  ]
173
173
  },
174
- "filePath": "bricks/form/dist/index.56e0bce8.js"
174
+ "filePath": "bricks/form/dist/index.244d1588.js"
175
175
  }
package/dist/examples.json CHANGED
@@ -1,13 +1,10 @@
1
1
  {
2
- "eo-textarea": {
3
- "doc": "表单多行文本输入框构件。\n\n```yaml preview\n- brick: eo-textarea\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea></eo-textarea>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-textarea\n properties:\n label: 多行输入框\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"多行输入框\"></eo-textarea>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-textarea\n properties:\n value: Default Value\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea value=\"Default Value\"></eo-textarea>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-textarea\n properties:\n value: Default Value\n disabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea value=\"Default Value\" disabled></eo-textarea>\n# \n```\n\n### Placeholder\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: This is placeholder...\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"This is placeholder...\"></eo-textarea>\n# \n```\n\n### max length\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: max length = 10\n maxLength: 10\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"max length = 10\" max-length=\"10\"></eo-textarea>\n# \n```\n\n### AutoSize\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: true\"\n autoSize: true\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: { minRows: 3}\"\n autoSize:\n minRows: 3\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: { minRows: 3, maxRows: 5}\"\n autoSize:\n minRows: 3\n maxRows: 5\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"autoSize: true\" id=\"brick-1\"></eo-textarea>\n# <eo-textarea placeholder=\"autoSize: { minRows: 3}\" id=\"brick-2\"></eo-textarea>\n# <eo-textarea\n# placeholder=\"autoSize: { minRows: 3, maxRows: 5}\"\n# id=\"brick-3\"\n# ></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.autoSize = true;\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.autoSize = {\n# minRows: 3,\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.autoSize = {\n# minRows: 3,\n# maxRows: 5,\n# };\n# </script>\n# \n```\n\n### Textarea Style\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: \"width: 180px\"\n textareaStyle:\n width: 180px\n- brick: eo-textarea\n properties:\n placeholder: \"width: 250px\"\n textareaStyle:\n width: 250px\n- brick: eo-textarea\n properties:\n placeholder: \"border style\"\n textareaStyle:\n border: \"1px solid #8b2121\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"width: 180px\" id=\"brick-1\"></eo-textarea>\n# <eo-textarea placeholder=\"width: 250px\" id=\"brick-2\"></eo-textarea>\n# <eo-textarea placeholder=\"border style\" id=\"brick-3\"></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.textareaStyle = {\n# width: \"180px\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.textareaStyle = {\n# width: \"250px\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.textareaStyle = {\n# border: \"1px solid #8b2121\",\n# };\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-textarea\n events:\n label: Event\n change:\n action: message.success\n args:\n - <% EVENT.detail %>\n focus:\n action: message.success\n args:\n - focus\n blur:\n action: message.success\n args:\n - blur\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea id=\"brick-1\"></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"label\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: e.detail });\n# });\n# brick_1.addEventListener(\"focus\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"focus\" });\n# });\n# brick_1.addEventListener(\"blur\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"blur\" });\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview\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-textarea\n properties:\n label: 输入框\n name: text\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-textarea label=\"输入框\" name=\"text\" required></eo-textarea>\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# </script>\n# \n```\n"
2
+ "eo-radio": {
3
+ "doc": "表单单选构件。\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-radio\n properties:\n label: city\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"city\" id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value: Guangzhou\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = \"Guangzhou\";\n# </script>\n# \n```\n\n### Options\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value: Guangzhou\n- brick: eo-radio\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n value: 2\n- brick: eo-radio\n properties:\n options:\n - true\n - false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-radio id=\"brick-2\"></eo-radio>\n# <eo-radio id=\"brick-3\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = \"Guangzhou\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# brick_2.value = 2;\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [true, false];\n# </script>\n# \n```\n\n### Emoji\n\n```yaml preview\n- brick: eo-radio\n properties:\n name: overall\n label: 总体满意度\n type: button\n options:\n - label: 差\n emoji: 😔\n value: -1\n - label: 一般\n emoji: 😐\n value: 0\n - label: 好\n emoji: 😊\n value: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio\n# name=\"overall\"\n# label=\"总体满意度\"\n# type=\"button\"\n# id=\"brick-1\"\n# ></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"差\",\n# emoji: \"😔\",\n# value: -1,\n# },\n# {\n# label: \"一般\",\n# emoji: \"😐\",\n# value: 0,\n# },\n# {\n# label: \"好\",\n# emoji: \"😊\",\n# value: 1,\n# },\n# ];\n# </script>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-flex-layout\n properties:\n gap: 20px\n flexDirection: column\n children:\n - brick: eo-radio\n properties:\n value: 0\n options:\n - label: Beijing\n value: 0\n disabled: true\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - brick: eo-radio\n properties:\n disabled: true\n value: 1\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - brick: eo-radio\n properties:\n label: Icon\n type: default\n disabled: true\n value: 0\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n - brick: eo-radio\n properties:\n label: Button\n type: button\n value: Shanghai\n disabled: true\n value: Beijing\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: dashboard\n type: button\n ui: dashboard\n value: Shanghai\n options:\n - label: Beijing\n value: Beijing\n - label: Shanghai\n value: Shanghai\n disabled: true\n - label: Guangzhou\n value: Guangzhou\n - label: Shenzhen\n value: Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: icon\n value: 1\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Cricle\n type: icon-circle\n value: 0\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Square\n type: icon-square\n value: 2\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-radio disabled id=\"brick-2\"></eo-radio>\n# <eo-radio label=\"Icon\" type=\"default\" disabled id=\"brick-3\"></eo-radio>\n# <eo-radio label=\"Button\" type=\"button\" disabled id=\"brick-4\"></eo-radio>\n# <eo-radio\n# label=\"dashboard\"\n# type=\"button\"\n# ui=\"dashboard\"\n# id=\"brick-5\"\n# ></eo-radio>\n# <eo-radio label=\"Icon\" type=\"icon\" disabled id=\"brick-6\"></eo-radio>\n# <eo-radio\n# label=\"Icon Cricle\"\n# type=\"icon-circle\"\n# disabled\n# id=\"brick-7\"\n# ></eo-radio>\n# <eo-radio\n# label=\"Icon Square\"\n# type=\"icon-square\"\n# disabled\n# id=\"brick-8\"\n# ></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = 0;\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# disabled: true,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.value = 1;\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.value = 0;\n# brick_3.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.value = \"Beijing\";\n# brick_4.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.value = \"Shanghai\";\n# brick_5.options = [\n# {\n# label: \"Beijing\",\n# value: \"Beijing\",\n# },\n# {\n# label: \"Shanghai\",\n# value: \"Shanghai\",\n# disabled: true,\n# },\n# {\n# label: \"Guangzhou\",\n# value: \"Guangzhou\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: \"Shenzhen\",\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.value = 1;\n# brick_6.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.value = 0;\n# brick_7.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_8 = document.getElementById(\"brick-8\");\n# brick_8.value = 2;\n# brick_8.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Size\n\nUsed only when `type` is `button`.\n\n```yaml preview\n- brick: eo-radio\n properties:\n label: large\n size: large\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-radio\n properties:\n label: medium\n size: medium\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-radio\n properties:\n label: small\n size: small\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"large\" size=\"large\" type=\"button\" id=\"brick-1\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"medium\" size=\"medium\" type=\"button\" id=\"brick-2\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"small\" size=\"small\" type=\"button\" id=\"brick-3\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Type\n\n```yaml preview\n- brick: eo-flex-layout\n properties:\n gap: 20px\n flexDirection: column\n children:\n - brick: eo-radio\n properties:\n label: Default\n type: default\n value: Beijing\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: default\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n - brick: eo-radio\n properties:\n label: Button\n type: button\n value: Shanghai\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: dashboard\n type: button\n ui: dashboard\n value: Shanghai\n options:\n - label: Beijing\n value: Beijing\n - label: Shanghai\n value: Shanghai\n - label: Guangzhou\n value: Guangzhou\n - label: Shenzhen\n value: Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: icon\n value: 1\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Cricle\n type: icon-circle\n value: 0\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Square\n type: icon-square\n value: 2\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n# <eo-radio label=\"Default\" type=\"default\" id=\"brick-1\"></eo-radio>\n# <eo-radio label=\"Icon\" type=\"default\" id=\"brick-2\"></eo-radio>\n# <eo-radio label=\"Button\" type=\"button\" id=\"brick-3\"></eo-radio>\n# <eo-radio\n# label=\"dashboard\"\n# type=\"button\"\n# ui=\"dashboard\"\n# id=\"brick-4\"\n# ></eo-radio>\n# <eo-radio label=\"Icon\" type=\"icon\" id=\"brick-5\"></eo-radio>\n# <eo-radio label=\"Icon Cricle\" type=\"icon-circle\" id=\"brick-6\"></eo-radio>\n# <eo-radio label=\"Icon Square\" type=\"icon-square\" id=\"brick-7\"></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"Beijing\";\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.value = \"Shanghai\";\n# brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.value = \"Shanghai\";\n# brick_4.options = [\n# {\n# label: \"Beijing\",\n# value: \"Beijing\",\n# },\n# {\n# label: \"Shanghai\",\n# value: \"Shanghai\",\n# },\n# {\n# label: \"Guangzhou\",\n# value: \"Guangzhou\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: \"Shenzhen\",\n# },\n# ];\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.value = 1;\n# brick_5.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.value = 0;\n# brick_6.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.value = 2;\n# brick_7.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-radio\n properties:\n id: option-radio\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n events:\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n options.change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-button\n properties:\n textContent: Click to Change Radio Option\n events:\n click:\n - target: \"#option-radio\"\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - label: Hangzhou\n value: 4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"option-radio\"></eo-radio>\n# <eo-button id=\"brick-1\">Click to Change Radio Option</eo-button>\n# \n# <script>\n# const option_radio = document.getElementById(\"option-radio\");\n# option_radio.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# option_radio.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# option_radio.addEventListener(\"options.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# \n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#option-radio\");\n# brick.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# {\n# label: \"Hangzhou\",\n# value: 4,\n# },\n# ];\n# });\n# </script>\n# \n```\n"
4
4
  },
5
5
  "eo-form": {
6
6
  "doc": "表单构件。\n\n## Examples\n\n### Layout\n\n```yaml preview\n- brick: eo-form\n properties:\n layout: inline\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n label: input\n - brick: eo-select\n properties:\n label: select\n- brick: div\n properties:\n style:\n height: 1px\n background: \"#abc\"\n margin: \"20px 0\"\n- brick: eo-form\n properties:\n layout: horizontal\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n label: input\n - brick: eo-select\n properties:\n label: select\n- brick: div\n properties:\n style:\n height: 1px\n background: \"#abc\"\n margin: \"20px 0\"\n- brick: eo-form\n properties:\n layout: vertical\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n label: input\n - brick: eo-select\n properties:\n label: select\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"inline\">\n# <eo-input label=\"input\"></eo-input>\n# <eo-select label=\"select\"></eo-select>\n# </eo-form>\n# <div style=\"height: 1px; background: #abc; margin: 20px 0\"></div>\n# <eo-form layout=\"horizontal\">\n# <eo-input label=\"input\"></eo-input>\n# <eo-select label=\"select\"></eo-select>\n# </eo-form>\n# <div style=\"height: 1px; background: #abc; margin: 20px 0\"></div>\n# <eo-form layout=\"vertical\">\n# <eo-input label=\"input\"></eo-input>\n# <eo-select label=\"select\"></eo-select>\n# </eo-form>\n# \n```\n\n### Values\n\n```yaml preview\n- brick: eo-form\n properties:\n values:\n input: This is default value\n select: Beijing\n radio: Guangzhou\n checkbox:\n - C\n - D\n textarea: \"Hello World! \\nNice to see you!\"\n dynamicForm:\n - input: beijing\n select: Guangzhou\n - input: shenzhen\n select: Shenzhen\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n label: input\n name: input\n - brick: eo-select\n properties:\n label: select\n name: select\n options:\n - Beijing\n - Shanghai\n - brick: eo-radio\n properties:\n label: radio\n name: radio\n options:\n - Guangzhou\n - Shenzhen\n - brick: eo-checkbox\n properties:\n name: checkbox\n label: checkbox\n options:\n - A\n - B\n - C\n - D\n - brick: eo-textarea\n properties:\n name: textarea\n label: textarea\n autoSize:\n minRows: 3\n - brick: eo-dynamic-form-item\n properties:\n label: dynamic-form\n name: dynamicForm\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form values=\"[object Object]\">\n# <eo-input label=\"input\" name=\"input\"></eo-input>\n# <eo-select label=\"select\" name=\"select\" id=\"brick-1\"></eo-select>\n# <eo-radio label=\"radio\" name=\"radio\" id=\"brick-2\"></eo-radio>\n# <eo-checkbox name=\"checkbox\" label=\"checkbox\" id=\"brick-3\"></eo-checkbox>\n# <eo-textarea name=\"textarea\" label=\"textarea\" id=\"brick-4\"></eo-textarea>\n# <eo-dynamic-form-item\n# label=\"dynamic-form\"\n# name=\"dynamicForm\"\n# id=\"brick-5\"\n# ></eo-dynamic-form-item>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\"A\", \"B\", \"C\", \"D\"];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.autoSize = {\n# minRows: 3,\n# };\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Events\n\n```yaml preview\n- brick: eo-form\n events:\n values.change:\n - action: console.log\n validate.success:\n - action: message.success\n args:\n - 表单提交成功\n validate.error:\n - action: message.error\n args:\n - 表单校验失败\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n required: true\n name: name\n label: 姓名\n max: 6\n min: 2\n message:\n required: 一定要填写姓名哟\n max: 不能超过 6 个字符哟\n min: 最少填写 2 个字符哟\n - brick: eo-select\n properties:\n required: true\n name: sex\n label: 性别\n options:\n - label: 男\n value: 0\n - label: 女\n value: 1\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-input\n# required\n# name=\"name\"\n# label=\"姓名\"\n# max=\"6\"\n# min=\"2\"\n# id=\"brick-2\"\n# ></eo-input>\n# <eo-select required name=\"sex\" label=\"性别\" id=\"brick-3\"></eo-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(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"表单提交成功\" });\n# });\n# brick_1.addEventListener(\"validate.error\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"error\", message: \"表单校验失败\" });\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.message = {\n# required: \"一定要填写姓名哟\",\n# max: \"不能超过 6 个字符哟\",\n# min: \"最少填写 2 个字符哟\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\n# {\n# label: \"男\",\n# value: 0,\n# },\n# {\n# label: \"女\",\n# value: 1,\n# },\n# ];\n# </script>\n# \n```\n\n### Method\n\n```yaml preview\n- brick: eo-form\n properties:\n id: form\n slots:\n \"\":\n bricks:\n - brick: eo-input\n properties:\n required: true\n name: name\n label: 姓名\n max: 6\n min: 2\n - brick: eo-select\n properties:\n required: true\n name: sex\n label: 性别\n options:\n - label: 男\n value: 0\n - label: 女\n value: 1\n- brick: eo-button\n properties:\n textContent: validateFields\n events:\n click:\n - target: \"#form\"\n method: validate\n- brick: eo-button\n properties:\n textContent: setInitValue\n events:\n click:\n - target: \"#form\"\n method: setInitValue\n args:\n - name: Mike\n sex: 0\n- brick: eo-button\n properties:\n textContent: resetFields\n events:\n click:\n - target: \"#form\"\n method: resetFields\n- brick: eo-button\n properties:\n textContent: resetFields(name)\n events:\n click:\n - target: \"#form\"\n method: resetFields\n args:\n - name\n- brick: eo-button\n properties:\n textContent: getFieldsValue\n events:\n click:\n - target: \"#form\"\n method: getFieldsValue\n callback:\n success:\n - action: console.log\n- brick: eo-button\n properties:\n textContent: getFieldsValue(name)\n events:\n click:\n - target: \"#form\"\n method: getFieldsValue\n args:\n - name\n callback:\n success:\n - action: console.log\n- brick: eo-button\n properties:\n textContent: validateField(name)\n events:\n click:\n - target: \"#form\"\n method: validateField\n args:\n - name\n- brick: eo-button\n properties:\n textContent: resetValidateState\n events:\n click:\n - target: \"#form\"\n method: resetValidateState\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"form\">\n# <eo-input required name=\"name\" label=\"姓名\" max=\"6\" min=\"2\"></eo-input>\n# <eo-select required name=\"sex\" label=\"性别\" id=\"brick-1\"></eo-select>\n# </eo-form>\n# <eo-button id=\"brick-2\">validateFields</eo-button>\n# <eo-button id=\"brick-3\">setInitValue</eo-button>\n# <eo-button id=\"brick-4\">resetFields</eo-button>\n# <eo-button id=\"brick-5\">resetFields(name)</eo-button>\n# <eo-button id=\"brick-6\">getFieldsValue</eo-button>\n# <eo-button id=\"brick-7\">getFieldsValue(name)</eo-button>\n# <eo-button id=\"brick-8\">validateField(name)</eo-button>\n# <eo-button id=\"brick-9\">resetValidateState</eo-button>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"男\",\n# value: 0,\n# },\n# {\n# label: \"女\",\n# value: 1,\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.validate();\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.setInitValue({ name: \"Mike\", sex: 0 });\n# });\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.resetFields();\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.resetFields(\"name\");\n# });\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.getFieldsValue();\n# });\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.getFieldsValue(\"name\");\n# });\n# \n# const brick_8 = document.getElementById(\"brick-8\");\n# brick_8.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.validateField(\"name\");\n# });\n# \n# const brick_9 = document.getElementById(\"brick-9\");\n# brick_9.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#form\");\n# brick.resetValidateState();\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-form\n properties:\n themeVariant: elevo\n layout: vertical\n values:\n city: 深圳\n public: true\n tags:\n - 活泼\n events:\n validate.success:\n useProvider: basic.show-dialog\n args:\n - title: 提交表单\n type: confirm\n content: 确定提交吗？\n themeVariant: elevo\n children:\n - brick: eo-input\n properties:\n label: 名称\n name: name\n themeVariant: elevo\n placeholder: 请输入\n - brick: eo-textarea\n properties:\n label: 说明\n name: desc\n themeVariant: elevo\n placeholder: 请输入\n - brick: eo-select\n properties:\n label: 类型\n name: type\n themeVariant: elevo\n placeholder: 请选择\n options:\n - 默认\n - 其他\n - brick: eo-radio\n properties:\n label: 城市\n name: city\n type: button\n themeVariant: elevo\n options:\n - 北京\n - 上海\n - 深圳\n - brick: eo-checkbox\n properties:\n label: 标签\n name: tags\n themeVariant: elevo\n options:\n - 活泼\n - 开朗\n - 好动\n - brick: eo-switch\n properties:\n label: 公开\n name: public\n themeVariant: elevo\n - brick: eo-submit-buttons\n properties:\n themeVariant: elevo\n submitText: 提交\n cancelText: 取消\n submitType: primary\n cancelType: default\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n# <eo-form\n# theme-variant=\"elevo\"\n# layout=\"vertical\"\n# values=\"[object Object]\"\n# id=\"brick-1\"\n# >\n# <eo-input\n# label=\"名称\"\n# name=\"name\"\n# theme-variant=\"elevo\"\n# placeholder=\"请输入\"\n# ></eo-input>\n# <eo-textarea\n# label=\"说明\"\n# name=\"desc\"\n# theme-variant=\"elevo\"\n# placeholder=\"请输入\"\n# ></eo-textarea>\n# <eo-select\n# label=\"类型\"\n# name=\"type\"\n# theme-variant=\"elevo\"\n# placeholder=\"请选择\"\n# id=\"brick-2\"\n# ></eo-select>\n# <eo-radio\n# label=\"城市\"\n# name=\"city\"\n# type=\"button\"\n# theme-variant=\"elevo\"\n# id=\"brick-3\"\n# ></eo-radio>\n# <eo-checkbox\n# label=\"标签\"\n# name=\"tags\"\n# theme-variant=\"elevo\"\n# id=\"brick-4\"\n# ></eo-checkbox>\n# <eo-switch label=\"公开\" name=\"public\" theme-variant=\"elevo\"></eo-switch>\n# <eo-submit-buttons\n# theme-variant=\"elevo\"\n# submit-text=\"提交\"\n# cancel-text=\"取消\"\n# submit-type=\"primary\"\n# cancel-type=\"default\"\n# ></eo-submit-buttons>\n# </eo-form>\n# </ai-portal.home-container>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# provider.resolve({\n# title: \"提交表单\",\n# type: \"confirm\",\n# content: \"确定提交吗？\",\n# themeVariant: \"elevo\",\n# });\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\"默认\", \"其他\"];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\"北京\", \"上海\", \"深圳\"];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.options = [\"活泼\", \"开朗\", \"好动\"];\n# </script>\n# \n```\n"
7
7
  },
8
- "eo-radio": {
9
- "doc": "表单单选构件。\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-radio\n properties:\n label: city\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"city\" id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value: Guangzhou\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = \"Guangzhou\";\n# </script>\n# \n```\n\n### Options\n\n```yaml preview\n- brick: eo-radio\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value: Guangzhou\n- brick: eo-radio\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n value: 2\n- brick: eo-radio\n properties:\n options:\n - true\n - false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-radio id=\"brick-2\"></eo-radio>\n# <eo-radio id=\"brick-3\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = \"Guangzhou\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# brick_2.value = 2;\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [true, false];\n# </script>\n# \n```\n\n### Emoji\n\n```yaml preview\n- brick: eo-radio\n properties:\n name: overall\n label: 总体满意度\n type: button\n options:\n - label: 差\n emoji: 😔\n value: -1\n - label: 一般\n emoji: 😐\n value: 0\n - label: 好\n emoji: 😊\n value: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio\n# name=\"overall\"\n# label=\"总体满意度\"\n# type=\"button\"\n# id=\"brick-1\"\n# ></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"差\",\n# emoji: \"😔\",\n# value: -1,\n# },\n# {\n# label: \"一般\",\n# emoji: \"😐\",\n# value: 0,\n# },\n# {\n# label: \"好\",\n# emoji: \"😊\",\n# value: 1,\n# },\n# ];\n# </script>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-flex-layout\n properties:\n gap: 20px\n flexDirection: column\n children:\n - brick: eo-radio\n properties:\n value: 0\n options:\n - label: Beijing\n value: 0\n disabled: true\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - brick: eo-radio\n properties:\n disabled: true\n value: 1\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - brick: eo-radio\n properties:\n label: Icon\n type: default\n disabled: true\n value: 0\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n - brick: eo-radio\n properties:\n label: Button\n type: button\n value: Shanghai\n disabled: true\n value: Beijing\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: dashboard\n type: button\n ui: dashboard\n value: Shanghai\n options:\n - label: Beijing\n value: Beijing\n - label: Shanghai\n value: Shanghai\n disabled: true\n - label: Guangzhou\n value: Guangzhou\n - label: Shenzhen\n value: Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: icon\n value: 1\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Cricle\n type: icon-circle\n value: 0\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Square\n type: icon-square\n value: 2\n disabled: true\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-radio disabled id=\"brick-2\"></eo-radio>\n# <eo-radio label=\"Icon\" type=\"default\" disabled id=\"brick-3\"></eo-radio>\n# <eo-radio label=\"Button\" type=\"button\" disabled id=\"brick-4\"></eo-radio>\n# <eo-radio\n# label=\"dashboard\"\n# type=\"button\"\n# ui=\"dashboard\"\n# id=\"brick-5\"\n# ></eo-radio>\n# <eo-radio label=\"Icon\" type=\"icon\" disabled id=\"brick-6\"></eo-radio>\n# <eo-radio\n# label=\"Icon Cricle\"\n# type=\"icon-circle\"\n# disabled\n# id=\"brick-7\"\n# ></eo-radio>\n# <eo-radio\n# label=\"Icon Square\"\n# type=\"icon-square\"\n# disabled\n# id=\"brick-8\"\n# ></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = 0;\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# disabled: true,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.value = 1;\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.value = 0;\n# brick_3.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.value = \"Beijing\";\n# brick_4.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.value = \"Shanghai\";\n# brick_5.options = [\n# {\n# label: \"Beijing\",\n# value: \"Beijing\",\n# },\n# {\n# label: \"Shanghai\",\n# value: \"Shanghai\",\n# disabled: true,\n# },\n# {\n# label: \"Guangzhou\",\n# value: \"Guangzhou\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: \"Shenzhen\",\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.value = 1;\n# brick_6.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.value = 0;\n# brick_7.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_8 = document.getElementById(\"brick-8\");\n# brick_8.value = 2;\n# brick_8.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Size\n\nUsed only when `type` is `button`.\n\n```yaml preview\n- brick: eo-radio\n properties:\n label: large\n size: large\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-radio\n properties:\n label: medium\n size: medium\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-radio\n properties:\n label: small\n size: small\n type: button\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"large\" size=\"large\" type=\"button\" id=\"brick-1\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"medium\" size=\"medium\" type=\"button\" id=\"brick-2\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"small\" size=\"small\" type=\"button\" id=\"brick-3\"></eo-radio>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Type\n\n```yaml preview\n- brick: eo-flex-layout\n properties:\n gap: 20px\n flexDirection: column\n children:\n - brick: eo-radio\n properties:\n label: Default\n type: default\n value: Beijing\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: default\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n - brick: eo-radio\n properties:\n label: Button\n type: button\n value: Shanghai\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-radio\n properties:\n label: dashboard\n type: button\n ui: dashboard\n value: Shanghai\n options:\n - label: Beijing\n value: Beijing\n - label: Shanghai\n value: Shanghai\n - label: Guangzhou\n value: Guangzhou\n - label: Shenzhen\n value: Shenzhen\n - brick: eo-radio\n properties:\n label: Icon\n type: icon\n value: 1\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Cricle\n type: icon-circle\n value: 0\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - brick: eo-radio\n properties:\n label: Icon Square\n type: icon-square\n value: 2\n options:\n - label: Beijing\n value: 0\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n icon:\n icon: \"area-chart\"\n lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n# <eo-radio label=\"Default\" type=\"default\" id=\"brick-1\"></eo-radio>\n# <eo-radio label=\"Icon\" type=\"default\" id=\"brick-2\"></eo-radio>\n# <eo-radio label=\"Button\" type=\"button\" id=\"brick-3\"></eo-radio>\n# <eo-radio\n# label=\"dashboard\"\n# type=\"button\"\n# ui=\"dashboard\"\n# id=\"brick-4\"\n# ></eo-radio>\n# <eo-radio label=\"Icon\" type=\"icon\" id=\"brick-5\"></eo-radio>\n# <eo-radio label=\"Icon Cricle\" type=\"icon-circle\" id=\"brick-6\"></eo-radio>\n# <eo-radio label=\"Icon Square\" type=\"icon-square\" id=\"brick-7\"></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"Beijing\";\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.value = \"Shanghai\";\n# brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.value = \"Shanghai\";\n# brick_4.options = [\n# {\n# label: \"Beijing\",\n# value: \"Beijing\",\n# },\n# {\n# label: \"Shanghai\",\n# value: \"Shanghai\",\n# },\n# {\n# label: \"Guangzhou\",\n# value: \"Guangzhou\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: \"Shenzhen\",\n# },\n# ];\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.value = 1;\n# brick_5.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.value = 0;\n# brick_6.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.value = 2;\n# brick_7.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# icon: {\n# icon: \"area-chart\",\n# lib: \"antd\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-radio\n properties:\n id: option-radio\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n events:\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n options.change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-button\n properties:\n textContent: Click to Change Radio Option\n events:\n click:\n - target: \"#option-radio\"\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - label: Hangzhou\n value: 4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"option-radio\"></eo-radio>\n# <eo-button id=\"brick-1\">Click to Change Radio Option</eo-button>\n# \n# <script>\n# const option_radio = document.getElementById(\"option-radio\");\n# option_radio.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# option_radio.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# option_radio.addEventListener(\"options.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# \n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#option-radio\");\n# brick.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# {\n# label: \"Hangzhou\",\n# value: 4,\n# },\n# ];\n# });\n# </script>\n# \n```\n"
10
- },
11
8
  "eo-select": {
12
9
  "doc": "表单下拉选择构件。\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n label: city\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"city\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n label: city\n value: Shanghai\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"city\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"Shanghai\";\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Options\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-select\n properties:\n label: string\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value: Guangzhou\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-select\n properties:\n label: Array<object>\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n value: 2\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-select\n properties:\n label: boolean\n options:\n - true\n - false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"string\" id=\"brick-1\"></eo-select>\n# <div style=\"height: 20px\"></div>\n# <eo-select label=\"Array&lt;object&gt;\" id=\"brick-2\"></eo-select>\n# <div style=\"height: 20px\"></div>\n# <eo-select label=\"boolean\" id=\"brick-3\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = \"Guangzhou\";\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# brick_2.value = 2;\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [true, false];\n# </script>\n# \n```\n\n### Disabled\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n options:\n - label: Beijing\n value: 0\n disabled: true\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n- brick: eo-select\n properties:\n disabled: true\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select id=\"brick-1\"></eo-select>\n# <eo-select disabled id=\"brick-2\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# disabled: true,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# </script>\n# \n```\n\n### Multiple\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n label: multiple\n mode: multiple\n value:\n - Beijing\n - Guangzhou\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"multiple\" mode=\"multiple\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = [\"Beijing\", \"Guangzhou\"];\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Tags\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n label: tags\n mode: tags\n tokenSeparators:\n - \" \"\n - \";\"\n - \"；\"\n maxTagCount: 3\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"tags\" mode=\"tags\" max-tag-count=\"3\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.tokenSeparators = [\" \", \";\", \"；\"];\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Placeholder\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n placeholder: This is placeholder...\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select placeholder=\"This is placeholder...\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Suffix\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n placeholder: This is placeholder...\n options:\n - label: Beijing\n value: 1\n color: red\n tag: 京\n - label: Shanghai\n value: 2\n color: green\n tag: 沪\n - label: Guangzhou\n value: 3\n color: blue\n tag: 粤\n - label: Shenzhen\n value: 4\n color: yellow\n tag: 粤\n suffix:\n useBrick:\n brick: eo-tag\n properties:\n textContent: <% DATA.tag %>\n color: <% DATA.color %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select placeholder=\"This is placeholder...\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 1,\n# color: \"red\",\n# tag: \"京\",\n# },\n# {\n# label: \"Shanghai\",\n# value: 2,\n# color: \"green\",\n# tag: \"沪\",\n# },\n# {\n# label: \"Guangzhou\",\n# value: 3,\n# color: \"blue\",\n# tag: \"粤\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: 4,\n# color: \"yellow\",\n# tag: \"粤\",\n# },\n# ];\n# brick_1.suffix = {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"<% DATA.tag %>\",\n# color: \"<% DATA.color %>\",\n# },\n# },\n# };\n# </script>\n# \n```\n\n### GroupBy\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-select\n properties:\n placeholder: This is placeholder...\n groupBy: tag\n options:\n - label: Beijing\n value: 1\n color: red\n tag: 京\n - label: Shanghai\n value: 2\n color: green\n tag: 沪\n - label: Guangzhou\n value: 3\n color: blue\n tag: 粤\n - label: Shenzhen\n value: 4\n color: yellow\n tag: 粤\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select\n# placeholder=\"This is placeholder...\"\n# group-by=\"tag\"\n# id=\"brick-1\"\n# ></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 1,\n# color: \"red\",\n# tag: \"京\",\n# },\n# {\n# label: \"Shanghai\",\n# value: 2,\n# color: \"green\",\n# tag: \"沪\",\n# },\n# {\n# label: \"Guangzhou\",\n# value: 3,\n# color: \"blue\",\n# tag: \"粤\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: 4,\n# color: \"yellow\",\n# tag: \"粤\",\n# },\n# ];\n# </script>\n# \n```\n\n### caption 展示下拉候选项说明文案\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-select\n properties:\n placeholder: This is placeholder...\n options:\n - caption: 如nginx、api_gateway等\n label: 接入层\n value: 接入层\n - caption: 如DB等\n label: 数据层\n value: 数据层\n - caption: 如业务逻辑组件\n label: 业务层\n value: 业务层\n - caption: 如平台通用组件\n label: 中台层\n value: 中台层\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select placeholder=\"This is placeholder...\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# caption: \"如nginx、api_gateway等\",\n# label: \"接入层\",\n# value: \"接入层\",\n# },\n# {\n# caption: \"如DB等\",\n# label: \"数据层\",\n# value: \"数据层\",\n# },\n# {\n# caption: \"如业务逻辑组件\",\n# label: \"业务层\",\n# value: \"业务层\",\n# },\n# {\n# caption: \"如平台通用组件\",\n# label: \"中台层\",\n# value: \"中台层\",\n# },\n# ];\n# </script>\n# \n```\n\n### Fields\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-select\n properties:\n placeholder: This is placeholder...\n fields:\n label: name\n value: city\n value: 3\n options:\n - name: Beijing\n city: 1\n color: red\n tag: 京\n - name: Shanghai\n city: 2\n color: green\n tag: 沪\n - name: Guangzhou\n city: 3\n color: blue\n tag: 粤\n - name: Shenzhen\n city: 4\n color: yellow\n tag: 粤\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select placeholder=\"This is placeholder...\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.fields = {\n# label: \"name\",\n# value: \"city\",\n# };\n# brick_1.value = 3;\n# brick_1.options = [\n# {\n# name: \"Beijing\",\n# city: 1,\n# color: \"red\",\n# tag: \"京\",\n# },\n# {\n# name: \"Shanghai\",\n# city: 2,\n# color: \"green\",\n# tag: \"沪\",\n# },\n# {\n# name: \"Guangzhou\",\n# city: 3,\n# color: \"blue\",\n# tag: \"粤\",\n# },\n# {\n# name: \"Shenzhen\",\n# city: 4,\n# color: \"yellow\",\n# tag: \"粤\",\n# },\n# ];\n# </script>\n# \n```\n\n### UseBackend\n\n```yaml preview minHeight=\"300px\"\n- brick: eo-select\n properties:\n label: useBackend\n placeholder: 后端搜索\n value: Shenzhen\n useBackend:\n provider: basic.http-request\n transform: |\n <% (data) => data %>\n onValueChangeArgs:\n - |\n <% \n (q) => \n `//api.weatherapi.com/v1/search.json?q=${q}&key=${MISC.weather_api_key}`\n %>\n args:\n - |\n <% \n (q) => \n `//api.weatherapi.com/v1/search.json?q=${q ? q : \"China\"}&key=${MISC.weather_api_key}`\n %>\n fields:\n label: name\n value: name\n suffix:\n useBrick:\n brick: eo-tag\n properties:\n textContent: <% DATA.country %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"useBackend\" placeholder=\"后端搜索\" id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = \"Shenzhen\";\n# brick_1.useBackend = {\n# provider: \"basic.http-request\",\n# transform: \"<% (data) => data %>\\n\",\n# onValueChangeArgs: [\n# \"<% \\n (q) => \\n `//api.weatherapi.com/v1/search.json?q=${q}&key=${MISC.weather_api_key}`\\n%>\\n\",\n# ],\n# args: [\n# '<% \\n (q) => \\n `//api.weatherapi.com/v1/search.json?q=${q ? q : \"China\"}&key=${MISC.weather_api_key}`\\n%>\\n',\n# ],\n# };\n# brick_1.fields = {\n# label: \"name\",\n# value: \"name\",\n# };\n# brick_1.suffix = {\n# useBrick: {\n# brick: \"eo-tag\",\n# properties: {\n# textContent: \"<% DATA.country %>\",\n# },\n# },\n# };\n# </script>\n# \n```\n\n### Input Style\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n properties:\n inputStyle:\n width: 180px\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select id=\"brick-1\"></eo-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.inputStyle = {\n# width: \"180px\",\n# };\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-select\n properties:\n id: options-change-select\n label: Single\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n events:\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n options.change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-select\n properties:\n label: Multiple\n multiple: true\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n events:\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-button\n properties:\n textContent: Click to change options\n events:\n click:\n - target: \"#options-change-select\"\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - Hangzhou\n- brick: div\n properties:\n style:\n height: 20px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"Single\" id=\"options-change-select\"></eo-select>\n# <eo-select label=\"Multiple\" multiple id=\"brick-1\"></eo-select>\n# <eo-button id=\"brick-2\">Click to change options</eo-button>\n# <div style=\"height: 20px\"></div>\n# \n# <script>\n# const options_change-select = document.getElementById(\"options-change-select\");\n# options_change-select.options = [\n# \"Beijing\",\n# \"Shanghai\",\n# \"Guangzhou\",\n# \"Shenzhen\"\n# ];\n# options_change-select.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% JSON.stringify(EVENT.detail) %>\" });\n# });\n# options_change-select.addEventListener(\"options.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% JSON.stringify(EVENT.detail) %>\" });\n# });\n# \n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# \"Beijing\",\n# \"Shanghai\",\n# \"Guangzhou\",\n# \"Shenzhen\"\n# ];\n# brick_1.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% JSON.stringify(EVENT.detail) %>\" });\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#options-change-select\");\n# brick.options = [\n# \"Beijing\",\n# \"Shanghai\",\n# \"Guangzhou\",\n# \"Shenzhen\",\n# \"Hangzhou\"\n# ];\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"250px\"\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-select\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n label: 选择框\n name: select\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-select label=\"选择框\" name=\"select\" required id=\"brick-2\"></eo-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(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n"
13
10
  },
@@ -17,12 +14,12 @@
17
14
  "eo-checkbox": {
18
15
  "doc": "表单复选框构件。\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"brick-1\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n label: city\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - Tianjin\n - Hanzhou\n - Xi'an\n - Fuzhou\n - Nanchan\n - Changsha\n - Shenyang\n - Jinan\n - Guiyang\n - Wuhan\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox label=\"city\" id=\"brick-1\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# \"Beijing\",\n# \"Shanghai\",\n# \"Guangzhou\",\n# \"Shenzhen\",\n# \"Tianjin\",\n# \"Hanzhou\",\n# \"Xi'an\",\n# \"Fuzhou\",\n# \"Nanchan\",\n# \"Changsha\",\n# \"Shenyang\",\n# \"Jinan\",\n# \"Guiyang\",\n# \"Wuhan\",\n# ];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n value:\n - Beijing\n - Guangzhou\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"brick-1\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = [\"Beijing\", \"Guangzhou\"];\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Options\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n value:\n - Guangzhou\n- brick: eo-checkbox\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n value:\n - 2\n - 3\n- brick: eo-checkbox\n properties:\n options:\n - true\n - false\n value:\n - true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"brick-1\"></eo-checkbox>\n# <eo-checkbox id=\"brick-2\"></eo-checkbox>\n# <eo-checkbox id=\"brick-3\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# brick_1.value = [\"Guangzhou\"];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# brick_2.value = [2, 3];\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.options = [true, false];\n# brick_3.value = [true];\n# </script>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n options:\n - label: Beijing\n value: 0\n disabled: true\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n value:\n - 0\n - 2\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-checkbox\n properties:\n disabled: true\n value:\n - 1\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"brick-1\"></eo-checkbox>\n# <div style=\"height: 20px\"></div>\n# <eo-checkbox disabled id=\"brick-2\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# disabled: true,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# brick_1.value = [0, 2];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.value = [1];\n# brick_2.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# </script>\n# \n```\n\n### Type\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n label: Default\n type: default\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n- brick: div\n properties:\n style:\n height: 20px\n- brick: eo-checkbox\n properties:\n label: Icon\n type: icon\n options:\n - label: Python\n value: 0\n icon:\n lib: easyops\n category: colored-common\n icon: python\n - label: Javascript\n value: 1\n icon:\n lib: easyops\n category: program-language\n icon: javascript\n - label: Powershell\n value: 2\n icon:\n lib: easyops\n category: colored-common\n icon: powershell\n - label: Shell\n value: 3\n icon:\n lib: easyops\n category: colored-common\n icon: shell\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox label=\"Default\" type=\"default\" id=\"brick-1\"></eo-checkbox>\n# <div style=\"height: 20px\"></div>\n# <eo-checkbox label=\"Icon\" type=\"icon\" id=\"brick-2\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.options = [\n# {\n# label: \"Python\",\n# value: 0,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"python\",\n# },\n# },\n# {\n# label: \"Javascript\",\n# value: 1,\n# icon: {\n# lib: \"easyops\",\n# category: \"program-language\",\n# icon: \"javascript\",\n# },\n# },\n# {\n# label: \"Powershell\",\n# value: 2,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"powershell\",\n# },\n# },\n# {\n# label: \"Shell\",\n# value: 3,\n# icon: {\n# lib: \"easyops\",\n# category: \"colored-common\",\n# icon: \"shell\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### checkboxColor\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n options:\n - label: Beijing\n value: 0\n checkboxColor: red\n - label: Shanghai\n value: 1\n checkboxColor: orange\n - label: Guangzhou\n value: 2\n checkboxColor: blue\n - label: Shenzhen\n value: 3\n checkboxColor: green\n value:\n - 2\n - 1\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"brick-1\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# checkboxColor: \"red\",\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# checkboxColor: \"orange\",\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# checkboxColor: \"blue\",\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# checkboxColor: \"green\",\n# },\n# ];\n# brick_1.value = [2, 1];\n# </script>\n# \n```\n\n### optionGroups\n\n```yaml preview\n- brick: eo-checkbox\n events:\n change:\n action: console.log\n properties:\n isGroup: true\n label: 商品\n name: goods\n optionGroups:\n - key: fruits\n name: 水果\n options:\n - label: 苹果\n value: apple\n - label: 香蕉\n value: banana\n - key: vegetables\n name: 蔬菜\n options:\n - label: 土豆\n value: potato\n value:\n - banana\n - potato\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox is-group label=\"商品\" name=\"goods\" id=\"brick-1\"></eo-checkbox>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.optionGroups = [\n# {\n# key: \"fruits\",\n# name: \"水果\",\n# options: [\n# {\n# label: \"苹果\",\n# value: \"apple\",\n# },\n# {\n# label: \"香蕉\",\n# value: \"banana\",\n# },\n# ],\n# },\n# {\n# key: \"vegetables\",\n# name: \"蔬菜\",\n# options: [\n# {\n# label: \"土豆\",\n# value: \"potato\",\n# },\n# ],\n# },\n# ];\n# brick_1.value = [\"banana\", \"potato\"];\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-checkbox\n properties:\n id: option-checkbox\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n events:\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n options.change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-button\n properties:\n textContent: Click to Change Radio Option\n events:\n click:\n - target: \"#option-checkbox\"\n properties:\n options:\n - label: Beijing\n value: 0\n - label: Shanghai\n value: 1\n icon:\n icon: \"bar-chart\"\n lib: \"antd\"\n - label: Guangzhou\n value: 2\n - label: Shenzhen\n value: 3\n - label: Hangzhou\n value: 4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox id=\"option-checkbox\"></eo-checkbox>\n# <eo-button id=\"brick-1\">Click to Change Radio Option</eo-button>\n# \n# <script>\n# const option_checkbox = document.getElementById(\"option-checkbox\");\n# option_checkbox.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# ];\n# option_checkbox.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# option_checkbox.addEventListener(\"options.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# \n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"#option-checkbox\");\n# brick.options = [\n# {\n# label: \"Beijing\",\n# value: 0,\n# },\n# {\n# label: \"Shanghai\",\n# value: 1,\n# icon: {\n# icon: \"bar-chart\",\n# lib: \"antd\",\n# },\n# },\n# {\n# label: \"Guangzhou\",\n# value: 2,\n# },\n# {\n# label: \"Shenzhen\",\n# value: 3,\n# },\n# {\n# label: \"Hangzhou\",\n# value: 4,\n# },\n# ];\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview\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-checkbox\n properties:\n name: city\n label: 城市\n required: true\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-checkbox name=\"city\" label=\"城市\" required id=\"brick-2\"></eo-checkbox>\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 = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n"
19
16
  },
20
- "eo-dynamic-form-item": {
21
- "doc": "动态表单构件。\n\n```yaml preview\n- brick: eo-form\n properties:\n layout: vertical\n values:\n id: request_5XXX\n dimension:\n - dimensionName: one\n dimensionId: one\n dimensionValue: 1\n children:\n - brick: eo-input\n properties:\n name: id\n label: 指标ID\n required: true\n - brick: eo-dynamic-form-item\n properties:\n name: dimension\n label: 维度\n useBrick:\n - brick: eo-input\n properties:\n name: dimensionName\n required: true\n message:\n required: 维度名称为必填项\n label: 维度名称\n - brick: eo-input\n properties:\n name: dimensionId\n required: true\n message:\n required: 维度id为必填项\n label: 维度id\n unique: true\n validator: '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>'\n - brick: eo-input\n properties:\n name: dimensionValue\n label: 维度值\n - brick: eo-submit-buttons\n properties:\n cancelText: 取消\n submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"vertical\" values=\"[object Object]\">\n# <eo-input name=\"id\" label=\"指标ID\" required></eo-input>\n# <eo-dynamic-form-item\n# name=\"dimension\"\n# label=\"维度\"\n# id=\"brick-1\"\n# ></eo-dynamic-form-item>\n# <eo-submit-buttons cancel-text=\"取消\" submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionName\",\n# required: true,\n# message: {\n# required: \"维度名称为必填项\",\n# },\n# label: \"维度名称\",\n# },\n# },\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionId\",\n# required: true,\n# message: {\n# required: \"维度id为必填项\",\n# },\n# label: \"维度id\",\n# unique: true,\n# validator:\n# '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>',\n# },\n# },\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionValue\",\n# label: \"维度值\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n label: Label\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item label=\"Label\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n value:\n - input: 北京\n select: Beijing\n - input: 上海\n select: Shanghai\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = [\n# {\n# input: \"北京\",\n# select: \"Beijing\",\n# },\n# {\n# input: \"上海\",\n# select: \"Shanghai\",\n# },\n# ];\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Hide or disable buttons\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n hideAddButton: <% (value)=>value.length===5 %>\n disabledAddButton: <% (value)=>value.length===4 %>\n hideRemoveButton: <% (value,row)=>row===1 %>\n disabledRemoveButton: <% (value,row)=>row===0 %>\n value:\n - input: hello1\n select: abc1\n - input: hello2\n select: abc2\n - input: hello3\n select: abc3\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - abc1\n - abc2\n - abc3\n - abc4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.hideAddButton = \"<% (value)=>value.length===5 %>\";\n# brick_1.disabledAddButton = \"<% (value)=>value.length===4 %>\";\n# brick_1.hideRemoveButton = \"<% (value,row)=>row===1 %>\";\n# brick_1.disabledRemoveButton = \"<% (value,row)=>row===0 %>\";\n# brick_1.value = [\n# {\n# input: \"hello1\",\n# select: \"abc1\",\n# },\n# {\n# input: \"hello2\",\n# select: \"abc2\",\n# },\n# {\n# input: \"hello3\",\n# select: \"abc3\",\n# },\n# ];\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"abc1\", \"abc2\", \"abc3\", \"abc4\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n name: dynamicForm\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n events:\n row.remove:\n action: console.log\n row.add:\n action: console.log\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item name=\"dynamicForm\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# brick_1.addEventListener(\"row.remove\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"row.add\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# </script>\n# \n```\n"
22
- },
23
17
  "eo-search": {
24
18
  "doc": "搜索框\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-search\n properties:\n placeholder: 请输入\n clearable: true\n trim: true\n events:\n change:\n action: console.log\n args:\n - \"<% EVENT.detail %>\"\n search:\n action: console.log\n args:\n - \"<% EVENT.detail %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search placeholder=\"请输入\" clearable trim id=\"brick-1\"></eo-search>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"search\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
25
19
  },
20
+ "eo-dynamic-form-item": {
21
+ "doc": "动态表单构件。\n\n```yaml preview\n- brick: eo-form\n properties:\n layout: vertical\n values:\n id: request_5XXX\n dimension:\n - dimensionName: one\n dimensionId: one\n dimensionValue: 1\n children:\n - brick: eo-input\n properties:\n name: id\n label: 指标ID\n required: true\n - brick: eo-dynamic-form-item\n properties:\n name: dimension\n label: 维度\n useBrick:\n - brick: eo-input\n properties:\n name: dimensionName\n required: true\n message:\n required: 维度名称为必填项\n label: 维度名称\n - brick: eo-input\n properties:\n name: dimensionId\n required: true\n message:\n required: 维度id为必填项\n label: 维度id\n unique: true\n validator: '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>'\n - brick: eo-input\n properties:\n name: dimensionValue\n label: 维度值\n - brick: eo-submit-buttons\n properties:\n cancelText: 取消\n submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"vertical\" values=\"[object Object]\">\n# <eo-input name=\"id\" label=\"指标ID\" required></eo-input>\n# <eo-dynamic-form-item\n# name=\"dimension\"\n# label=\"维度\"\n# id=\"brick-1\"\n# ></eo-dynamic-form-item>\n# <eo-submit-buttons cancel-text=\"取消\" submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionName\",\n# required: true,\n# message: {\n# required: \"维度名称为必填项\",\n# },\n# label: \"维度名称\",\n# },\n# },\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionId\",\n# required: true,\n# message: {\n# required: \"维度id为必填项\",\n# },\n# label: \"维度id\",\n# unique: true,\n# validator:\n# '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>',\n# },\n# },\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"dimensionValue\",\n# label: \"维度值\",\n# },\n# },\n# ];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n label: Label\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item label=\"Label\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n value:\n - input: 北京\n select: Beijing\n - input: 上海\n select: Shanghai\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.value = [\n# {\n# input: \"北京\",\n# select: \"Beijing\",\n# },\n# {\n# input: \"上海\",\n# select: \"Shanghai\",\n# },\n# ];\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Hide or disable buttons\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n hideAddButton: <% (value)=>value.length===5 %>\n disabledAddButton: <% (value)=>value.length===4 %>\n hideRemoveButton: <% (value,row)=>row===1 %>\n disabledRemoveButton: <% (value,row)=>row===0 %>\n value:\n - input: hello1\n select: abc1\n - input: hello2\n select: abc2\n - input: hello3\n select: abc3\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - abc1\n - abc2\n - abc3\n - abc4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.hideAddButton = \"<% (value)=>value.length===5 %>\";\n# brick_1.disabledAddButton = \"<% (value)=>value.length===4 %>\";\n# brick_1.hideRemoveButton = \"<% (value,row)=>row===1 %>\";\n# brick_1.disabledRemoveButton = \"<% (value,row)=>row===0 %>\";\n# brick_1.value = [\n# {\n# input: \"hello1\",\n# select: \"abc1\",\n# },\n# {\n# input: \"hello2\",\n# select: \"abc2\",\n# },\n# {\n# input: \"hello3\",\n# select: \"abc3\",\n# },\n# ];\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"abc1\", \"abc2\", \"abc3\", \"abc4\"],\n# },\n# },\n# ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-dynamic-form-item\n properties:\n name: dynamicForm\n useBrick:\n - brick: eo-input\n properties:\n name: input\n - brick: eo-select\n properties:\n name: select\n options:\n - Beijing\n - Shanghai\n - Guangzhou\n - Shenzhen\n events:\n row.remove:\n action: console.log\n row.add:\n action: console.log\n change:\n - action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item name=\"dynamicForm\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.useBrick = [\n# {\n# brick: \"eo-input\",\n# properties: {\n# name: \"input\",\n# },\n# },\n# {\n# brick: \"eo-select\",\n# properties: {\n# name: \"select\",\n# options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n# },\n# },\n# ];\n# brick_1.addEventListener(\"row.remove\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"row.add\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# </script>\n# \n```\n"
22
+ },
26
23
  "eo-icon-select": {
27
24
  "doc": "图标选择器\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"750px\"\n- brick: eo-icon-select\n events:\n change:\n action: console.log\n args:\n - \"<% EVENT.detail %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-icon-select id=\"brick-1\"></eo-icon-select>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"750px\"\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-icon-select\n properties:\n name: icon\n label: 图标\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-icon-select name=\"icon\" label=\"图标\" required></eo-icon-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(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n"
28
25
  },
@@ -44,6 +41,9 @@
44
41
  "eo-date-picker": {
45
42
  "doc": "构件 `eo-date-picker`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"450px\"\n- brick: eo-date-picker\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-date-picker></eo-date-picker>\n# \n```\n\n### picker\n\n```yaml preview minHeight=\"550px\"\n- brick: eo-radio\n events:\n change:\n - target: \"#datePicker\"\n properties:\n picker: <% EVENT.detail.value %>\n properties:\n options:\n - label: 天\n value: date\n - label: 周\n value: week\n - label: 月\n value: month\n - label: 季度\n value: quarter\n - label: 年\n value: year\n- brick: div\n properties:\n style:\n display: grid\n gap: 1em\n children:\n - brick: eo-button\n properties:\n textContent: 中文\n events:\n click:\n useProvider: basic.change-language\n args:\n - zh\n callback:\n success:\n action: message.success\n args:\n - '<% I18N_TEXT({ zh: \"你好\", \"en\": \"Hello\" }) %>'\n - brick: eo-button\n properties:\n textContent: English\n events:\n click:\n useProvider: basic.change-language\n args:\n - en\n callback:\n success:\n action: message.success\n args:\n - '<% I18N_TEXT({ zh: \"你好\", \"en\": \"Hello\" }) %>'\n- brick: eo-date-picker\n properties:\n id: datePicker\n useFastSelectBtn: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <div style=\"display: grid; gap: 1em\">\n# <eo-button id=\"brick-2\">中文</eo-button>\n# <eo-button id=\"brick-3\">English</eo-button>\n# </div>\n# <eo-date-picker use-fast-select-btn id=\"datePicker\"></eo-date-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# {\n# label: \"天\",\n# value: \"date\",\n# },\n# {\n# label: \"周\",\n# value: \"week\",\n# },\n# {\n# label: \"月\",\n# value: \"month\",\n# },\n# {\n# label: \"季度\",\n# value: \"quarter\",\n# },\n# {\n# label: \"年\",\n# value: \"year\",\n# },\n# ];\n# brick_1.addEventListener(\"change\", (e) => {\n# const brick = document.querySelector(\"#datePicker\");\n# brick.picker = \"<% EVENT.detail.value %>\";\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const provider = document.createElement(\"basic.change-language\");\n# const promise = Promise.resolve(provider.resolve(\"zh\"));\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: '<% I18N_TEXT({ zh: \"你好\", \"en\": \"Hello\" }) %>',\n# });\n# });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.addEventListener(\"click\", (e) => {\n# const provider = document.createElement(\"basic.change-language\");\n# const promise = Promise.resolve(provider.resolve(\"en\"));\n# promise.then((r) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: '<% I18N_TEXT({ zh: \"你好\", \"en\": \"Hello\" }) %>',\n# });\n# });\n# });\n# </script>\n# \n```\n\n### showTime\n\n```yaml preview minHeight=\"450px\"\n- brick: eo-date-picker\n events:\n ok:\n action: console.log\n change:\n action: console.log\n properties:\n showTime: true\n value: \"2020-02-01 14:30:00\"\n format: \"YYYY-MM-DD HH:mm:ss\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-date-picker\n# show-time\n# value=\"2020-02-01 14:30:00\"\n# format=\"YYYY-MM-DD HH:mm:ss\"\n# id=\"brick-1\"\n# ></eo-date-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"ok\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### 禁用日期\n\n```yaml preview minHeight=\"450px\"\n- brick: eo-date-picker\n events:\n ok:\n action: console.log\n change:\n action: console.log\n properties:\n disabledDate:\n - weekday: 4\n - date: 10-15\n year: 2010-2020\n - hour: 12-18\n minute: 0-29\n weekday: 3\n format: \"YYYY-MM-DD HH:mm:ss\"\n showTime: true\n value: \"2019-10-01 00:00:00\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-date-picker\n# format=\"YYYY-MM-DD HH:mm:ss\"\n# show-time\n# value=\"2019-10-01 00:00:00\"\n# id=\"brick-1\"\n# ></eo-date-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.disabledDate = [\n# {\n# weekday: 4,\n# },\n# {\n# date: \"10-15\",\n# year: \"2010-2020\",\n# },\n# {\n# hour: \"12-18\",\n# minute: \"0-29\",\n# weekday: 3,\n# },\n# ];\n# brick_1.addEventListener(\"ok\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"450px\"\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-date-picker\n properties:\n label: 日期\n name: date\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-date-picker label=\"日期\" name=\"date\" required></eo-date-picker>\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# </script>\n# \n```\n"
46
43
  },
44
+ "eo-textarea": {
45
+ "doc": "表单多行文本输入框构件。\n\n```yaml preview\n- brick: eo-textarea\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea></eo-textarea>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-textarea\n properties:\n label: 多行输入框\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"多行输入框\"></eo-textarea>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-textarea\n properties:\n value: Default Value\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea value=\"Default Value\"></eo-textarea>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-textarea\n properties:\n value: Default Value\n disabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea value=\"Default Value\" disabled></eo-textarea>\n# \n```\n\n### Placeholder\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: This is placeholder...\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"This is placeholder...\"></eo-textarea>\n# \n```\n\n### max length\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: max length = 10\n maxLength: 10\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"max length = 10\" max-length=\"10\"></eo-textarea>\n# \n```\n\n### AutoSize\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: true\"\n autoSize: true\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: { minRows: 3}\"\n autoSize:\n minRows: 3\n- brick: eo-textarea\n properties:\n placeholder: \"autoSize: { minRows: 3, maxRows: 5}\"\n autoSize:\n minRows: 3\n maxRows: 5\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"autoSize: true\" id=\"brick-1\"></eo-textarea>\n# <eo-textarea placeholder=\"autoSize: { minRows: 3}\" id=\"brick-2\"></eo-textarea>\n# <eo-textarea\n# placeholder=\"autoSize: { minRows: 3, maxRows: 5}\"\n# id=\"brick-3\"\n# ></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.autoSize = true;\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.autoSize = {\n# minRows: 3,\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.autoSize = {\n# minRows: 3,\n# maxRows: 5,\n# };\n# </script>\n# \n```\n\n### Textarea Style\n\n```yaml preview\n- brick: eo-textarea\n properties:\n placeholder: \"width: 180px\"\n textareaStyle:\n width: 180px\n- brick: eo-textarea\n properties:\n placeholder: \"width: 250px\"\n textareaStyle:\n width: 250px\n- brick: eo-textarea\n properties:\n placeholder: \"border style\"\n textareaStyle:\n border: \"1px solid #8b2121\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea placeholder=\"width: 180px\" id=\"brick-1\"></eo-textarea>\n# <eo-textarea placeholder=\"width: 250px\" id=\"brick-2\"></eo-textarea>\n# <eo-textarea placeholder=\"border style\" id=\"brick-3\"></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.textareaStyle = {\n# width: \"180px\",\n# };\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.textareaStyle = {\n# width: \"250px\",\n# };\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.textareaStyle = {\n# border: \"1px solid #8b2121\",\n# };\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-textarea\n events:\n label: Event\n change:\n action: message.success\n args:\n - <% EVENT.detail %>\n focus:\n action: message.success\n args:\n - focus\n blur:\n action: message.success\n args:\n - blur\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea id=\"brick-1\"></eo-textarea>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"label\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: e.detail });\n# });\n# brick_1.addEventListener(\"focus\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"focus\" });\n# });\n# brick_1.addEventListener(\"blur\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"blur\" });\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview\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-textarea\n properties:\n label: 输入框\n name: text\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-textarea label=\"输入框\" name=\"text\" required></eo-textarea>\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# </script>\n# \n```\n"
46
+ },
47
47
  "eo-time-range-picker": {
48
48
  "doc": "构件 `eo-time-range-picker`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n properties:\n label: hello\n name: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker label=\"hello\" name=\"time\"></eo-time-range-picker>\n# \n```\n\n### rangeType\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-radio\n properties:\n options:\n - time\n - date\n - dateTime\n - hmTime\n - week\n - month\n - quarter\n - year\n events:\n change:\n - target: \"#rangePicker\"\n properties:\n rangeType: <% EVENT.detail.value %>\n- brick: eo-time-range-picker\n properties:\n label: hello\n name: time\n id: rangePicker\n rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-time-range-picker\n# label=\"hello\"\n# name=\"time\"\n# id=\"rangePicker\"\n# ></eo-time-range-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.options = [\n# \"time\",\n# \"date\",\n# \"dateTime\",\n# \"hmTime\",\n# \"week\",\n# \"month\",\n# \"quarter\",\n# \"year\",\n# ];\n# brick_1.addEventListener(\"change\", (e) => {\n# const brick = document.querySelector(\"#rangePicker\");\n# brick.rangeType = \"<% EVENT.detail.value %>\";\n# });\n# \n# const rangePicker = document.getElementById(\"rangePicker\");\n# rangePicker.rangeType = \"date\";\n# </script>\n# \n```\n\n### presetRanges\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n properties:\n label: hello\n name: time\n rangeType: week\n required: true\n presetRanges:\n - 本周\n - 本月\n - 本季度\n - 今年\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n# label=\"hello\"\n# name=\"time\"\n# required\n# id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rangeType = \"week\";\n# brick_1.presetRanges = [\"本周\", \"本月\", \"本季度\", \"今年\"];\n# </script>\n# \n```\n\n### validate\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-form\n events:\n values.change:\n - action: console.log\n validate.success:\n - action: message.success\n args:\n - 表单提交成功\n validate.error:\n - action: message.error\n args:\n - 表单校验失败\n slots:\n \"\":\n bricks:\n - brick: eo-time-range-picker\n events:\n change:\n action: console.log\n properties:\n label: hello\n name: time\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-time-range-picker\n# label=\"hello\"\n# name=\"time\"\n# required\n# id=\"brick-2\"\n# ></eo-time-range-picker>\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(\"values.change\", (e) => {\n# console.log(e.detail);\n# });\n# brick_1.addEventListener(\"validate.success\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"success\", message: \"表单提交成功\" });\n# });\n# brick_1.addEventListener(\"validate.error\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({ type: \"error\", message: \"表单校验失败\" });\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"change\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### selectNearDays\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n events:\n - action: console.log\n properties:\n label: hello\n name: time\n selectNearDays: 10\n rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n# label=\"hello\"\n# name=\"time\"\n# select-near-days=\"10\"\n# id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.rangeType = \"date\";\n# brick_1.addEventListener(\"0\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### Events\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n events:\n - action: console.log\n properties:\n label: hello\n name: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n# label=\"hello\"\n# name=\"time\"\n# id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"0\", (e) => {\n# console.log(e.detail);\n# });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"400px\"\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-time-range-picker\n properties:\n label: 时间\n name: time\n required: true\n - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n# <eo-time-range-picker\n# label=\"时间\"\n# name=\"time\"\n# required\n# ></eo-time-range-picker>\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# </script>\n# \n```\n"
49
49
  },