@next-bricks/form 1.15.20 → 1.16.0

package/dist/examples.json

@@ -1,19 +1,19 @@
 {
-  "eo-textarea": {
-    "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"
-  },
-  "eo-form": {
-    "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"
+  "eo-radio": {
+    "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### 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"
   },
   "eo-select": {
-    "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### 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"
+    "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"
   },
-  "eo-radio": {
-    "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### 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"
+  "eo-form": {
+    "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"
   },
   "eo-submit-buttons": {
     "doc": "表单提交按钮。\n(tips: 通常在于 eo-form 构件搭配使用)\n\n```yaml preview\n- brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons></eo-submit-buttons>\n# \n```\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-submit-buttons\n  properties:\n    submitText: Submit\n    cancelText: Cancel\n  events:\n    submit:\n      - action: message.success\n        args:\n          - Submit\n    cancel:\n      - action: message.warn\n        args:\n          - Cancel\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons\n#   submit-text=\"Submit\"\n#   cancel-text=\"Cancel\"\n#   id=\"brick-1\"\n# ></eo-submit-buttons>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"submit\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: \"Submit\" });\n#   });\n#   brick_1.addEventListener(\"cancel\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"warn\", message: \"Cancel\" });\n#   });\n# </script>\n# \n```\n\n### Button types\n\n```yaml preview\n- brick: eo-submit-buttons\n  properties:\n    submitText: Submit\n    cancelText: Cancel\n    submitType: primary\n    cancelType: default\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons\n#   submit-text=\"Submit\"\n#   cancel-text=\"Cancel\"\n#   submit-type=\"primary\"\n#   cancel-type=\"default\"\n# ></eo-submit-buttons>\n# \n```\n\n### Disable submit button\n\n```yaml preview\n- brick: eo-submit-buttons\n  properties:\n    submitText: Submit\n    cancelText: Cancel\n    submitDisabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons\n#   submit-text=\"Submit\"\n#   cancel-text=\"Cancel\"\n#   submit-disabled\n# ></eo-submit-buttons>\n# \n```\n"
   },
+  "eo-textarea": {
+    "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"
+  },
   "eo-checkbox": {
     "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"
   },
@@ -23,24 +23,24 @@
   "eo-search": {
     "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"
   },
-  "eo-icon-select": {
-    "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"
-  },
   "eo-upload-image": {
     "doc": "上传图片构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-upload-image\n  events:\n    change:\n      action: console.log\n      args:\n        - \"<% EVENT.detail %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-image id=\"brick-1\"></eo-upload-image>\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\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-upload-image\n      properties:\n        label: 文件\n        name: file\n        required: true\n      events:\n        change:\n          - action: console.log\n            args:\n              - <% EVENT.detail %>\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-upload-image\n#     label=\"文件\"\n#     name=\"file\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-upload-image>\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.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
+  "eo-icon-select": {
+    "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"
+  },
   "eo-switch": {
     "doc": "开关构件\n\n## Examples\n\n### Basic\n\n```yaml preview\n- brick: eo-switch\n  events:\n    switch:\n      action: console.log\n  properties:\n    disabled: false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch id=\"brick-1\"></eo-switch>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"switch\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Label\n\n```yaml preview\n- brick: eo-switch\n  events:\n    switch:\n      action: console.log\n  properties:\n    disabled: false\n    label: switch\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch label=\"switch\" id=\"brick-1\"></eo-switch>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"switch\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### disabled\n\n```yaml preview\n- brick: eo-switch\n  properties:\n    disabled: true\n    value: true\n    label: switch\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch disabled value label=\"switch\"></eo-switch>\n# \n```\n\n### size\n\n```yaml preview\n- brick: eo-switch\n  properties:\n    disabled: false\n    value: true\n    label: switch\n    size: small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch value label=\"switch\" size=\"small\"></eo-switch>\n# \n```\n\n### Customizations\n\n```yaml preview\n- brick: eo-switch\n  properties:\n    checkedText: 123\n    unCheckedText: 456\n    disabled: false\n    size: small\n    label: text\n    checkedIcon:\n      icon: plus-circle\n      lib: antd\n      theme: outlined\n    unCheckedIcon:\n      icon: plus-circle\n      lib: antd\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch\n#   checked-text=\"123\"\n#   un-checked-text=\"456\"\n#   size=\"small\"\n#   label=\"text\"\n#   id=\"brick-1\"\n# ></eo-switch>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.checkedIcon = {\n#     icon: \"plus-circle\",\n#     lib: \"antd\",\n#     theme: \"outlined\",\n#   };\n#   brick_1.unCheckedIcon = {\n#     icon: \"plus-circle\",\n#     lib: \"antd\",\n#   };\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-switch\n  events:\n    switch:\n      action: console.log\n  properties:\n    disabled: false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch id=\"brick-1\"></eo-switch>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"switch\", (e) => {\n#     console.log(e.detail);\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-switch\n      properties:\n        name: switch\n        label: 开关\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-switch name=\"switch\" label=\"开关\"></eo-switch>\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"
   },
+  "eo-upload-file": {
+    "doc": "上传文件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-upload-file\nproperties:\n  style:\n    width: 300px\n  uploadDraggable: true\n  maxCount: 2\n  multiple: true\n  accept: image/*\n  draggableUploadTip: 支持上传2张图片\nevents:\n  change:\n    - action: console.log\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-file\n#   style=\"width: 300px\"\n#   upload-draggable\n#   max-count=\"2\"\n#   multiple\n#   accept=\"image/*\"\n#   draggable-upload-tip=\"支持上传2张图片\"\n#   id=\"brick-1\"\n# ></eo-upload-file>\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\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-upload-file\n      properties:\n        label: 文件\n        name: file\n        required: true\n        style:\n          width: 300px\n        uploadDraggable: true\n        maxCount: 2\n        multiple: true\n        accept: image/*\n        draggableUploadTip: 支持上传图片\n      events:\n        change:\n          - action: console.log\n            args:\n              - <% EVENT.detail %>\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-upload-file\n#     label=\"文件\"\n#     name=\"file\"\n#     required\n#     style=\"width: 300px\"\n#     upload-draggable\n#     max-count=\"2\"\n#     multiple\n#     accept=\"image/*\"\n#     draggable-upload-tip=\"支持上传图片\"\n#     id=\"brick-2\"\n#   ></eo-upload-file>\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.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
   "eo-auto-complete": {
     "doc": "构件 `eo-auto-complete`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=500px\n- brick: eo-auto-complete\n  properties:\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete id=\"brick-1\"></eo-auto-complete>\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### caption\n\n```yaml preview\n- brick: eo-auto-complete\n  properties:\n    options:\n      - label: 选项1\n        value: \"1\"\n        caption: 说明1\n      - label: 选项2\n        value: \"2\"\n        caption: 说明2\n      - label: 选项3\n        value: \"3\"\n        caption: 说明3\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete id=\"brick-1\"></eo-auto-complete>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"选项1\",\n#       value: \"1\",\n#       caption: \"说明1\",\n#     },\n#     {\n#       label: \"选项2\",\n#       value: \"2\",\n#       caption: \"说明2\",\n#     },\n#     {\n#       label: \"选项3\",\n#       value: \"3\",\n#       caption: \"说明3\",\n#     },\n#   ];\n# </script>\n# \n```\n\n### 分组\n\n```yaml preview\n- brick: eo-auto-complete\n  properties:\n    options:\n      - label: 选项1\n        value: \"1\"\n        caption: 说明1\n      - label: 选项2\n        value: \"2\"\n        caption: 说明2\n      - label: 分组1\n        options:\n          - label: 选项3-1\n            value: 3-1\n            caption: 说明3-1\n          - label: 选项3-1\n            value: 3-2\n            caption: 说明3-2\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete id=\"brick-1\"></eo-auto-complete>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"选项1\",\n#       value: \"1\",\n#       caption: \"说明1\",\n#     },\n#     {\n#       label: \"选项2\",\n#       value: \"2\",\n#       caption: \"说明2\",\n#     },\n#     {\n#       label: \"分组1\",\n#       options: [\n#         {\n#           label: \"选项3-1\",\n#           value: \"3-1\",\n#           caption: \"说明3-1\",\n#         },\n#         {\n#           label: \"选项3-1\",\n#           value: \"3-2\",\n#           caption: \"说明3-2\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### filterByCaption\n\n```yaml preview\n- brick: eo-auto-complete\n  properties:\n    filterByCaption: true\n    options:\n      - label: 选项1\n        value: \"1\"\n        caption: 说明1\n      - label: 选项2\n        value: \"2\"\n        caption: 说明2\n      - label: 分组1\n        options:\n          - label: 选项3-1\n            value: 3-1\n            caption: 说明3-1\n          - label: 选项3-1\n            value: 3-2\n            caption: 说明3-2\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete filter-by-caption id=\"brick-1\"></eo-auto-complete>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"选项1\",\n#       value: \"1\",\n#       caption: \"说明1\",\n#     },\n#     {\n#       label: \"选项2\",\n#       value: \"2\",\n#       caption: \"说明2\",\n#     },\n#     {\n#       label: \"分组1\",\n#       options: [\n#         {\n#           label: \"选项3-1\",\n#           value: \"3-1\",\n#           caption: \"说明3-1\",\n#         },\n#         {\n#           label: \"选项3-1\",\n#           value: \"3-2\",\n#           caption: \"说明3-2\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### disabled\n\n```yaml preview\n- brick: eo-auto-complete\n  properties:\n    disabled: true\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete disabled id=\"brick-1\"></eo-auto-complete>\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### events\n\n```yaml preview\n- brick: eo-auto-complete\n  events:\n    change:\n      - action: console.log\n  properties:\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete id=\"brick-1\"></eo-auto-complete>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\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=500px\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-auto-complete\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-auto-complete\n#     name=\"city\"\n#     label=\"城市\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-auto-complete>\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"
   },
   "eo-time-picker": {
     "doc": "构件 `eo-time-picker`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-picker\n  properties:\n    label: time\n    placeholder: 选择时间\n    value: \"12:30:01\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"time\"\n#   placeholder=\"选择时间\"\n#   value=\"12:30:01\"\n# ></eo-time-picker>\n# \n```\n\n### 国际化\n\n```yaml preview minHeight=\"400px\"\n- brick: div\n  properties:\n    style:\n      display: grid\n      gap: 1em\n  children:\n    - brick: eo-time-picker\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# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: grid; gap: 1em\">\n#   <eo-time-picker></eo-time-picker>\n#   <eo-button id=\"brick-1\">中文</eo-button>\n#   <eo-button id=\"brick-2\">English</eo-button>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.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_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(\"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### event\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-picker\n  events:\n    change:\n      action: console.log\n    open:\n      action: console.log\n    close:\n      action: console.log\n  properties:\n    label: time\n    placeholder: 选择时间\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"time\"\n#   placeholder=\"选择时间\"\n#   id=\"brick-1\"\n# ></eo-time-picker>\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(\"open\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"close\", (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-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-picker label=\"时间\" name=\"time\" required></eo-time-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"
   },
-  "eo-upload-file": {
-    "doc": "上传文件\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-upload-file\nproperties:\n  style:\n    width: 300px\n  uploadDraggable: true\n  maxCount: 2\n  multiple: true\n  accept: image/*\n  draggableUploadTip: 支持上传2张图片\nevents:\n  change:\n    - action: console.log\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-file\n#   style=\"width: 300px\"\n#   upload-draggable\n#   max-count=\"2\"\n#   multiple\n#   accept=\"image/*\"\n#   draggable-upload-tip=\"支持上传2张图片\"\n#   id=\"brick-1\"\n# ></eo-upload-file>\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\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-upload-file\n      properties:\n        label: 文件\n        name: file\n        required: true\n        style:\n          width: 300px\n        uploadDraggable: true\n        maxCount: 2\n        multiple: true\n        accept: image/*\n        draggableUploadTip: 支持上传图片\n      events:\n        change:\n          - action: console.log\n            args:\n              - <% EVENT.detail %>\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-upload-file\n#     label=\"文件\"\n#     name=\"file\"\n#     required\n#     style=\"width: 300px\"\n#     upload-draggable\n#     max-count=\"2\"\n#     multiple\n#     accept=\"image/*\"\n#     draggable-upload-tip=\"支持上传图片\"\n#     id=\"brick-2\"\n#   ></eo-upload-file>\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.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
-  },
   "eo-date-picker": {
     "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"
   },

package/dist/index.a43217c7.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e,t,r,o,n,a,l,i,s,c,h,u,d,m,f,p,b,g,P,v,x,y,k,w={9836:(e,t,r)=>{var o={"./eo-radio":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(3449)]).then((()=>()=>r(4446))),"./general-radio":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(3449)]).then((()=>()=>r(4446))),"./eo-select":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(8974),r.e(9768)]).then((()=>()=>r(1285))),"./general-select":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(8974),r.e(9768)]).then((()=>()=>r(1285))),"./eo-form":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(3778)]).then((()=>()=>r(7331))),"./general-form":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(3778)]).then((()=>()=>r(7331))),"./eo-submit-buttons":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(172)]).then((()=>()=>r(349))),"./submit-buttons":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(172)]).then((()=>()=>r(349))),"./eo-textarea":()=>Promise.all([r.e(9126),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(382)]).then((()=>()=>r(8871))),"./general-textarea":()=>Promise.all([r.e(9126),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(382)]).then((()=>()=>r(8871))),"./eo-checkbox":()=>Promise.all([r.e(4056),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9107)]).then((()=>()=>r(8933))),"./general-checkbox":()=>Promise.all([r.e(4056),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9107)]).then((()=>()=>r(8933))),"./eo-dynamic-form-item":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9704),r.e(6842)]).then((()=>()=>r(4753))),"./dynamic-form-item":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9704),r.e(6842)]).then((()=>()=>r(4753))),"./eo-search":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(6324)]).then((()=>()=>r(625))),"./general-search":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(6324)]).then((()=>()=>r(625))),"./eo-upload-image":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9733),r.e(9933),r.e(8974),r.e(9704),r.e(3357),r.e(8771)]).then((()=>()=>r(1726))),"./upload-image":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9733),r.e(9933),r.e(8974),r.e(9704),r.e(3357),r.e(8771)]).then((()=>()=>r(1726))),"./eo-icon-select":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9523),r.e(9704),r.e(740)]).then((()=>()=>r(3659))),"./icon-select":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(9523),r.e(9704),r.e(740)]).then((()=>()=>r(3659))),"./eo-switch":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(7572)]).then((()=>()=>r(8848))),"./general-switch":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(7572)]).then((()=>()=>r(8848))),"./eo-upload-file":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9733),r.e(9704),r.e(3357),r.e(7825),r.e(9910)]).then((()=>()=>r(1153))),"./eo-auto-complete":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(6511)]).then((()=>()=>r(7060))),"./eo-time-picker":()=>Promise.all([r.e(4056),r.e(9126),r.e(845),r.e(5026),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9733),r.e(9435),r.e(1410)]).then((()=>()=>r(2137))),"./eo-date-picker":()=>Promise.all([r.e(4056),r.e(9126),r.e(845),r.e(5026),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9733),r.e(9435),r.e(1916),r.e(5563)]).then((()=>()=>r(7588))),"./eo-time-range-picker":()=>Promise.all([r.e(4056),r.e(9126),r.e(845),r.e(5026),r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9733),r.e(9435),r.e(762)]).then((()=>()=>r(7797))),"./eo-color-picker":()=>Promise.all([r.e(4056),r.e(9126),r.e(845),r.e(5025),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(9435),r.e(2652)]).then((()=>()=>r(1653))),"./eo-input":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(149),r.e(3777)]).then((()=>()=>r(9502))),"./general-input":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(149),r.e(3777)]).then((()=>()=>r(9502))),"./eo-form-item":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(149),r.e(3777)]).then((()=>()=>r(9502))),"./general-form-item":()=>Promise.all([r.e(1030),r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(8361),r.e(149),r.e(3777)]).then((()=>()=>r(9502)))},n=(e,t)=>(r.R=t,t=r.o(o,e)?o[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),a=(e,t)=>{if(r.S){var o="default",n=r.S[o];if(n&&n!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[o]=e,r.I(o,t)}};r.d(t,{get:()=>n,init:()=>a})}},j={};function S(e){var t=j[e];if(void 0!==t)return t.exports;var r=j[e]={id:e,loaded:!1,exports:{}};return w[e].call(r.exports,r,r.exports,S),r.loaded=!0,r.exports}S.m=w,S.c=j,S.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return S.d(t,{a:t}),t},S.d=(e,t)=>{for(var r in t)S.o(t,r)&&!S.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},S.f={},S.e=e=>Promise.all(Object.keys(S.f).reduce(((t,r)=>(S.f[r](e,t),t)),[])),S.u=e=>"chunks/"+({172:"eo-submit-buttons",382:"eo-textarea",740:"eo-icon-select",762:"eo-time-range-picker",1410:"eo-time-picker",2652:"eo-color-picker",3449:"eo-radio",3777:"input",3778:"eo-form",4644:"react",5563:"eo-date-picker",6324:"eo-search",6511:"eo-auto-complete",6842:"eo-dynamic-form-item",7572:"eo-switch",8771:"eo-upload-image",9107:"eo-checkbox",9768:"eo-select",9910:"eo-upload-file"}[e]||e)+"."+{149:"9f425d9e",172:"c6177598",382:"66c4e981",726:"83839f5d",740:"be749f9e",762:"586762ea",845:"f6378665",871:"f28f105b",1045:"7ad43dc1",1122:"01bc0d6d",1370:"a56b4fa3",1410:"9402ab95",1889:"95e02530",1940:"391033f5",2052:"9f08e1db",2277:"711bdf6f",2652:"5f9d5ae6",3171:"30fac628",3426:"01e02597",3449:"73b27079",3777:"f9fa4d49",3778:"7871c99c",3933:"90c09f51",4056:"aac4a786",4306:"c52b6739",4644:"b86c57e9",4658:"1684bc0d",5025:"53c94173",5026:"0c71a0de",5250:"a8e6fa5e",5384:"8bd748af",5399:"b22b4003",5552:"75021017",5563:"e89ab216",6167:"3c7a7196",6314:"c745a9a0",6324:"66eed07c",6511:"15a63660",6519:"8210b094",6773:"ab912e2d",6842:"4e8ac208",7304:"39f60560",7434:"9dfca74d",7572:"585881ce",7721:"56f06716",8097:"b37b6f9e",8548:"3d64fb28",8771:"fea2ce95",8989:"d6efe180",9107:"2a41fe6a",9126:"52ec02c1",9140:"92a1595b",9515:"c2a64690",9559:"68b6693a",9768:"6e142ce3",9844:"0e7eb437",9910:"044bd857"}[e]+".js",S.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),S.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/form:",S.l=(r,o,n,a)=>{if(e[r])e[r].push(o);else{var l,i;if(void 0!==n)for(var s=document.getElementsByTagName("script"),c=0;c<s.length;c++){var h=s[c];if(h.getAttribute("src")==r||h.getAttribute("data-webpack")==t+n){l=h;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,S.nc&&l.setAttribute("nonce",S.nc),l.setAttribute("data-webpack",t+n),l.src=r),e[r]=[o];var u=(t,o)=>{l.onerror=l.onload=null,clearTimeout(d);var n=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),n&&n.forEach((e=>e(o))),t)return t(o)},d=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},S.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},S.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{S.S={};var e={},t={};S.I=(r,o)=>{o||(o=[]);var n=t[r];if(n||(n=t[r]={}),!(o.indexOf(n)>=0)){if(o.push(n),e[r])return e[r];S.o(S.S,r)||(S.S[r]={});var a=S.S[r],l="@next-bricks/form",i=(e,t,r,o)=>{var n=a[e]=a[e]||{},i=n[t];(!i||!i.loaded&&(!o!=!i.eager?o:l>i.from))&&(n[t]={get:r,from:l,eager:!!o})},s=[];return"default"===r&&(i("@babel/parser","7.25.3",(()=>S.e(6773).then((()=>()=>S(6773))))),i("@easyops-cn/brick-next-pipes","0.7.2",(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),i("@next-core/cook","2.5.8",(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),i("@next-core/element","1.2.17",(()=>S.e(1045).then((()=>()=>S(1045))))),i("@next-core/http","1.2.12",(()=>S.e(8989).then((()=>()=>S(8989))))),i("@next-core/i18n/react","1.0.75",(()=>Promise.all([S.e(9733),S.e(7825),S.e(8097)]).then((()=>()=>S(8097))))),i("@next-core/i18n","1.0.75",(()=>Promise.all([S.e(9733),S.e(9523),S.e(671),S.e(5552)]).then((()=>()=>S(5552))))),i("@next-core/inject","1.0.53",(()=>Promise.all([S.e(1030),S.e(9933),S.e(2277)]).then((()=>()=>S(2277))))),i("@next-core/loader","1.6.15",(()=>S.e(5399).then((()=>()=>S(5399))))),i("@next-core/pipes","2.0.32",(()=>S.e(6519).then((()=>()=>S(6519))))),i("@next-core/react-element","1.0.36",(()=>Promise.all([S.e(4644),S.e(8769),S.e(6192),S.e(9435),S.e(8548)]).then((()=>()=>S(114))))),i("@next-core/react-runtime","1.7.13",(()=>Promise.all([S.e(4644),S.e(1030),S.e(8769),S.e(9859),S.e(8974)]).then((()=>()=>S(4837))))),i("@next-core/runtime","1.60.0",(()=>Promise.all([S.e(9140),S.e(1030),S.e(9733),S.e(9523),S.e(1916),S.e(3357),S.e(1321),S.e(5789)]).then((()=>()=>S(9140))))),i("@next-core/supply","2.3.5",(()=>Promise.all([S.e(1030),S.e(1916),S.e(9933),S.e(9559)]).then((()=>()=>S(9559))))),i("@next-core/theme","1.5.4",(()=>Promise.all([S.e(1889),S.e(2052)]).then((()=>()=>S(1889))))),i("@next-core/utils/general","1.7.33",(()=>S.e(871).then((()=>()=>S(871))))),i("@next-core/utils/storyboard","1.7.33",(()=>Promise.all([S.e(9523),S.e(1321),S.e(3933)]).then((()=>()=>S(3933))))),i("history","4.10.1",(()=>S.e(5384).then((()=>()=>S(5384))))),i("i18next-browser-languagedetector","7.2.2",(()=>S.e(726).then((()=>()=>S(726))))),i("i18next","22.5.1",(()=>S.e(7304).then((()=>()=>S(7304))))),i("js-yaml","3.14.1",(()=>S.e(9515).then((()=>()=>S(9515))))),i("lodash","4.17.21",(()=>S.e(5250).then((()=>()=>S(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),i("moment","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([S.e(4644),S.e(8769)]).then((()=>()=>S(3144))))),i("react-i18next","12.3.1",(()=>Promise.all([S.e(7434),S.e(8769)]).then((()=>()=>S(7434))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>S.e(4644).then((()=>()=>S(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;S.g.importScripts&&(e=S.g.location+"");var t=S.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&(!e||!/^http(s?):/.test(e));)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),S.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),o=r[1]?t(r[1]):[];return r[2]&&(o.length++,o.push.apply(o,t(r[2]))),r[3]&&(o.push([]),o.push.apply(o,t(r[3]))),o},o=(e,t)=>{e=r(e),t=r(t);for(var o=0;;){if(o>=e.length)return o<t.length&&"u"!=(typeof t[o])[0];var n=e[o],a=(typeof n)[0];if(o>=t.length)return"u"==a;var l=t[o],i=(typeof l)[0];if(a!=i)return"o"==a&&"n"==i||"s"==i||"u"==a;if("o"!=a&&"u"!=a&&n!=l)return n<l;o++}},n=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var o=1,a=1;a<e.length;a++)o--,r+="u"==(typeof(i=e[a]))[0]?"-":(o>0?".":"")+(o=2,i);return r}var l=[];for(a=1;a<e.length;a++){var i=e[a];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():n(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},a=(e,t)=>{if(0 in e){t=r(t);var o=e[0],n=o<0;n&&(o=-o-1);for(var l=0,i=1,s=!0;;i++,l++){var c,h,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(h=(typeof(c=t[l]))[0]))return!s||("u"==u?i>o&&!n:""==u!=n);if("u"==h){if(!s||"u"!=u)return!1}else if(s)if(u==h)if(i<=o){if(c!=e[i])return!1}else{if(n?c>e[i]:c<e[i])return!1;c!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(n||i<=o)return!1;s=!1,i--}else{if(i<=o||h<u!=n)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var d=[],m=d.pop.bind(d);for(l=1;l<e.length;l++){var f=e[l];d.push(1==f?m()|m():2==f?m()&m():f?a(f,t):!m())}return!!m()},l=(e,t)=>e&&S.o(e,t),i=e=>(e.loaded=1,e.get()),s=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),c=(e,t,r,n)=>{var l=n?s(e[t]):e[t];return(t=Object.keys(l).reduce(((e,t)=>!a(r,t)||e&&!o(e,t)?e:t),0))&&l[t]},h=(e,t,r)=>{var n=r?s(e[t]):e[t];return Object.keys(n).reduce(((e,t)=>!e||!n[e].loaded&&o(e,t)?t:e),0)},u=(e,t,r,o)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+n(o)+")",d=(e,t,r,o,a)=>{var l=e[r];return"No satisfying version ("+n(o)+")"+(a?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(l).map((e=>e+" from "+l[e].from)).join(", ")},m=e=>{throw new Error(e)},f=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},b=(e,t,r)=>r?r():((e,t)=>m("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),g=(p=e=>function(t,r,o,n,a){var l=S.I(t);return l&&l.then&&!o?l.then(e.bind(e,t,S.S[t],r,!1,n,a)):e(t,S.S[t],r,o,n,a)})(((e,t,r,o,n,a)=>{if(!l(t,r))return b(e,r,a);var s=c(t,r,n,o);return s?i(s):a?a():void m(d(t,e,r,n,o))})),P=p(((e,t,r,o,n,s)=>{if(!l(t,r))return b(e,r,s);var c=h(t,r,o);return a(n,c)||f(u(t,r,c,n)),i(t[r][c])})),v={},x={1030:()=>P("default","lodash",!1,[1,4,17,21],(()=>S.e(5250).then((()=>()=>S(5250))))),1916:()=>P("default","moment",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),5310:()=>P("default","js-yaml",!1,[0],(()=>S.e(9515).then((()=>()=>S(9515))))),580:()=>P("default","@babel/parser",!1,[0],(()=>S.e(6773).then((()=>()=>S(6773))))),9733:()=>P("default","@next-core/i18n",!1,[0],(()=>Promise.all([S.e(9523),S.e(671),S.e(3171)]).then((()=>()=>S(5552))))),7825:()=>P("default","react-i18next",!1,[1,12,3,1],(()=>Promise.all([S.e(7434),S.e(8769)]).then((()=>()=>S(7434))))),9523:()=>P("default","@next-core/utils/general",!1,[0],(()=>S.e(871).then((()=>()=>S(871))))),848:()=>P("default","i18next-browser-languagedetector",!1,[0],(()=>S.e(726).then((()=>()=>S(726))))),5630:()=>P("default","i18next",!1,[0],(()=>S.e(7304).then((()=>()=>S(7304))))),9933:()=>P("default","@next-core/pipes",!1,[0],(()=>S.e(6519).then((()=>()=>S(6519))))),8377:()=>P("default","@easyops-cn/brick-next-pipes",!1,[0],(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),8769:()=>g("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4644).then((()=>()=>S(4041))))),6192:()=>g("default","@next-core/element",!1,[1,1,2,17],(()=>S.e(3426).then((()=>()=>S(1045))))),9435:()=>g("default","react-dom",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4644).then((()=>()=>S(3144))))),9859:()=>g("default","@next-core/react-element",!1,[1,1,0,36],(()=>Promise.all([S.e(4644),S.e(6192),S.e(9435),S.e(6167)]).then((()=>()=>S(114))))),8974:()=>P("default","@next-core/runtime",!1,[1,1,60,0],(()=>Promise.all([S.e(9140),S.e(9733),S.e(9523),S.e(1916),S.e(3357),S.e(1321),S.e(5789)]).then((()=>()=>S(9140))))),3357:()=>P("default","@next-core/http",!1,[1,1,2,12],(()=>S.e(1370).then((()=>()=>S(8989))))),1321:()=>P("default","@next-core/cook",!1,[0],(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),1732:()=>P("default","history",!1,[0],(()=>S.e(5384).then((()=>()=>S(5384))))),1858:()=>P("default","moment/locale/zh-cn.js",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),4167:()=>P("default","@next-core/supply",!1,[0],(()=>Promise.all([S.e(9933),S.e(1940)]).then((()=>()=>S(9559))))),5599:()=>P("default","@next-core/loader",!1,[0],(()=>S.e(5399).then((()=>()=>S(5399))))),5801:()=>P("default","@next-core/utils/storyboard",!1,[0],(()=>S.e(6314).then((()=>()=>S(3933))))),9283:()=>P("default","@next-core/inject",!1,[0],(()=>Promise.all([S.e(9933),S.e(4658)]).then((()=>()=>S(2277))))),6477:()=>P("default","@next-core/theme",!1,[1,1,5,4],(()=>S.e(1889).then((()=>()=>S(1889))))),8361:()=>g("default","@next-core/react-runtime",!1,[1,1,7,13],(()=>Promise.all([S.e(4644),S.e(1030),S.e(8974)]).then((()=>()=>S(4837))))),9704:()=>P("default","@next-core/i18n/react",!1,[0],(()=>Promise.all([S.e(9733),S.e(7825),S.e(8097)]).then((()=>()=>S(8097)))))},y={580:[580],671:[848,5630],1030:[1030],1321:[1321],1916:[1916],3357:[3357],5310:[5310],5789:[1732,1858,4167,5599,5801,9283],6192:[6192],6477:[6477],6519:[8377],7825:[7825],8361:[8361],8769:[8769],8974:[8974],9435:[9435],9523:[9523],9704:[9704],9733:[9733],9859:[9859],9933:[9933]},k={},S.f.consumes=(e,t)=>{S.o(y,e)&&y[e].forEach((e=>{if(S.o(v,e))return t.push(v[e]);if(!k[e]){var r=t=>{v[e]=0,S.m[e]=r=>{delete S.c[e],r.exports=t()}};k[e]=!0;var o=t=>{delete v[e],S.m[e]=r=>{throw delete S.c[e],t}};try{var n=x[e]();n.then?t.push(v[e]=n.then(r).catch(o)):r(n)}catch(e){o(e)}}}))},(()=>{var e={6718:0};S.f.j=(t,r)=>{var o=S.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else if(/^(1(030|321|916)|5(310|789|80)|6(192|477|71)|8(361|769|974)|9((52|73|93)3|435|704|859)|3357|7825)$/.test(t))e[t]=0;else{var n=new Promise(((r,n)=>o=e[t]=[r,n]));r.push(o[2]=n);var a=S.p+S.u(t),l=new Error;S.l(a,(r=>{if(S.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+n+": "+a+")",l.name="ChunkLoadError",l.type=n,l.request=a,o[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var o,n,[a,l,i]=r,s=0;if(a.some((t=>0!==e[t]))){for(o in l)S.o(l,o)&&(S.m[o]=l[o]);i&&i(S)}for(t&&t(r);s<a.length;s++)n=a[s],S.o(e,n)&&e[n]&&e[n][0](),e[n]=0},r=globalThis.webpackChunk_next_bricks_form=globalThis.webpackChunk_next_bricks_form||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),S.nc=void 0;var E=S(9836);window["bricks/form"]=E})();
+//# sourceMappingURL=index.a43217c7.js.map