@next-bricks/form 1.21.11 → 1.21.13

package/dist/examples.json

@@ -1,56 +1,59 @@
 {
   "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"
+    "doc": "---\ntagName: eo-textarea\ndisplayName: WrappedEoTextarea\ndescription: 通用多行文本输入框构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-textarea\n\n> 通用多行文本输入框构件\n\n## Props\n\n| 属性          | 类型                     | 必填 | 默认值 | 说明                                                                        |\n| ------------- | ------------------------ | ---- | ------ | --------------------------------------------------------------------------- |\n| name          | `string`                 | 否   | -      | 字段名称                                                                    |\n| label         | `string`                 | 否   | -      | 标签文字                                                                    |\n| value         | `string`                 | 否   | -      | 值                                                                          |\n| placeholder   | `string`                 | 否   | -      | 占位说明                                                                    |\n| disabled      | `boolean`                | 否   | -      | 是否禁用                                                                    |\n| minLength     | `number`                 | 否   | -      | 最小长度                                                                    |\n| maxLength     | `number`                 | 否   | -      | 最大长度                                                                    |\n| autoSize      | `AutoSize`               | 否   | -      | 大小自适应                                                                  |\n| required      | `boolean`                | 否   | -      | 是否必填                                                                    |\n| max           | `number`                 | 否   | -      | 表单校验最大长度                                                            |\n| min           | `number`                 | 否   | -      | 表单校验最小长度                                                            |\n| message       | `Record<string, string>` | 否   | -      | 校验信息                                                                    |\n| textareaStyle | `React.CSSProperties`    | 否   | -      | 自定义样式                                                                  |\n| variant       | `\"default\" \\| \"muted\"`   | 否   | -      | 变体。`muted`：在 themeVariant 为 elevo 时可用，设置时输入框没有 box-shadow |\n| themeVariant  | `\"default\" \\| \"elevo\"`   | 否   | -      | 主题变体                                                                    |\n\n## Events\n\n| 事件   | detail                | 说明       |\n| ------ | --------------------- | ---------- |\n| change | `string` — 当前输入值 | 值改变事件 |\n\n## Methods\n\n| 方法            | 说明             |\n| --------------- | ---------------- |\n| focusTextarea() | 使文本域获得焦点 |\n\n## Examples\n\n### Basic\n\n展示多行文本输入框的最基本用法。\n\n```yaml preview\n- brick: eo-textarea\n  properties:\n    label: 多行输入框\n    placeholder: 请输入内容\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"多行输入框\" placeholder=\"请输入内容\"></eo-textarea>\n# \n```\n\n### Value\n\n通过 `value` 属性设置文本域的默认值。\n\n```yaml preview\n- brick: eo-textarea\n  properties:\n    label: 默认值\n    value: Default Value\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"默认值\" value=\"Default Value\"></eo-textarea>\n# \n```\n\n### Disabled\n\n设置 `disabled` 属性禁用文本域。\n\n```yaml preview\n- brick: eo-textarea\n  properties:\n    label: 禁用状态\n    value: Default Value\n    disabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"禁用状态\" value=\"Default Value\" disabled></eo-textarea>\n# \n```\n\n### Placeholder\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### MaxLength\n\n通过 `maxLength` 属性限制输入的最大字符数。\n\n```yaml preview\n- brick: eo-textarea\n  properties:\n    label: 最大长度\n    placeholder: max length = 10\n    maxLength: 10\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea\n#   label=\"最大长度\"\n#   placeholder=\"max length = 10\"\n#   max-length=\"10\"\n# ></eo-textarea>\n# \n```\n\n### AutoSize\n\n通过 `autoSize` 属性让文本域高度随内容自动调整，支持设置 `minRows` 和 `maxRows` 限制行数范围。\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### TextareaStyle\n\n通过 `textareaStyle` 属性自定义文本域的内联样式。\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### Events\n\n监听 `change` 事件获取用户输入的实时值。\n\n```yaml preview\n- brick: eo-textarea\n  properties:\n    label: Event\n    placeholder: 请输入内容\n  events:\n    change:\n      action: message.success\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"Event\" placeholder=\"请输入内容\" id=\"brick-1\"></eo-textarea>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: e.detail });\n#   });\n# </script>\n# \n```\n\n### With Form\n\n在 `eo-form` 中使用，通过 `name`、`label`、`required`、`min`、`max`、`message` 属性集成表单校验功能。\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: description\n        required: true\n        min: 5\n        max: 200\n        message:\n          required: 请输入描述\n          min: 描述不能少于5个字符\n          max: 描述不能超过200个字符\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-textarea\n#     label=\"描述\"\n#     name=\"description\"\n#     required\n#     min=\"5\"\n#     max=\"200\"\n#     id=\"brick-2\"\n#   ></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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.message = {\n#     required: \"请输入描述\",\n#     min: \"描述不能少于5个字符\",\n#     max: \"描述不能超过200个字符\",\n#   };\n# </script>\n# \n```\n\n### Methods\n\n通过 `focusTextarea` 方法使文本域获得焦点。\n\n```yaml preview\n- brick: eo-textarea\n  id: my-textarea\n  properties:\n    label: 文本域\n    placeholder: 点击按钮使其获得焦点\n- brick: eo-button\n  properties:\n    textContent: 获取焦点\n  events:\n    click:\n      target: \"#my-textarea\"\n      method: focusTextarea\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-textarea label=\"文本域\" placeholder=\"点击按钮使其获得焦点\"></eo-textarea>\n# <eo-button id=\"brick-1\">获取焦点</eo-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#my-textarea\");\n#     brick.focusTextarea();\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\n### Theme variant Elevo\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n  style:\n    padding: 2em\n    backgroundColor: \"#d8d8d8\"\nchildren:\n  - brick: eo-form\n    properties:\n      themeVariant: elevo\n      layout: vertical\n      values:\n        city: 深圳\n        public: true\n        tags:\n          - 活泼\n    events:\n      validate.success:\n        useProvider: basic.show-dialog\n        args:\n          - title: 提交表单\n            type: confirm\n            content: 确定提交吗？\n            themeVariant: elevo\n    children:\n      - brick: eo-input\n        properties:\n          label: 名称\n          name: name\n          themeVariant: elevo\n          placeholder: 请输入\n      - brick: eo-textarea\n        properties:\n          label: 说明\n          name: desc\n          themeVariant: elevo\n          placeholder: 请输入\n      - brick: eo-select\n        properties:\n          label: 类型\n          name: type\n          themeVariant: elevo\n          placeholder: 请选择\n          options:\n            - 默认\n            - 其他\n      - brick: eo-radio\n        properties:\n          label: 城市\n          name: city\n          type: button\n          themeVariant: elevo\n          options:\n            - 北京\n            - 上海\n            - 深圳\n      - brick: eo-checkbox\n        properties:\n          label: 标签\n          name: tags\n          themeVariant: elevo\n          options:\n            - 活泼\n            - 开朗\n            - 好动\n      - brick: eo-switch\n        properties:\n          label: 公开\n          name: public\n          themeVariant: elevo\n      - brick: eo-submit-buttons\n        properties:\n          themeVariant: elevo\n          submitText: 提交\n          cancelText: 取消\n          submitType: primary\n          cancelType: default\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n#   <eo-form\n#     theme-variant=\"elevo\"\n#     layout=\"vertical\"\n#     values=\"[object Object]\"\n#     id=\"brick-1\"\n#   >\n#     <eo-input\n#       label=\"名称\"\n#       name=\"name\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请输入\"\n#     ></eo-input>\n#     <eo-textarea\n#       label=\"说明\"\n#       name=\"desc\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请输入\"\n#     ></eo-textarea>\n#     <eo-select\n#       label=\"类型\"\n#       name=\"type\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请选择\"\n#       id=\"brick-2\"\n#     ></eo-select>\n#     <eo-radio\n#       label=\"城市\"\n#       name=\"city\"\n#       type=\"button\"\n#       theme-variant=\"elevo\"\n#       id=\"brick-3\"\n#     ></eo-radio>\n#     <eo-checkbox\n#       label=\"标签\"\n#       name=\"tags\"\n#       theme-variant=\"elevo\"\n#       id=\"brick-4\"\n#     ></eo-checkbox>\n#     <eo-switch label=\"公开\" name=\"public\" theme-variant=\"elevo\"></eo-switch>\n#     <eo-submit-buttons\n#       theme-variant=\"elevo\"\n#       submit-text=\"提交\"\n#       cancel-text=\"取消\"\n#       submit-type=\"primary\"\n#       cancel-type=\"default\"\n#     ></eo-submit-buttons>\n#   </eo-form>\n# </ai-portal.home-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     const provider = document.createElement(\"basic.show-dialog\");\n#     provider.resolve({\n#       title: \"提交表单\",\n#       type: \"confirm\",\n#       content: \"确定提交吗？\",\n#       themeVariant: \"elevo\",\n#     });\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\"默认\", \"其他\"];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.options = [\"北京\", \"上海\", \"深圳\"];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.options = [\"活泼\", \"开朗\", \"好动\"];\n# </script>\n# \n```\n"
-  },
-  "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### 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"
+    "doc": "---\ntagName: eo-form\ndisplayName: WrappedEoForm\ndescription: 表单构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-form\n\n> 表单构件\n\n## Props\n\n| 属性                      | 类型                      | 必填 | 默认值                                                                                          | 说明                                                                   |\n| ------------------------- | ------------------------- | ---- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |\n| staticValues              | `Record<string, unknown>` | 否   | -                                                                                               | 静态附加值，在表单验证成功时会合并到 validate.success 事件的 detail 中 |\n| layout                    | `Layout`                  | 否   | `\"vertical\"`                                                                                    | 布局方式，可选值为 `vertical`、`horizontal`、`inline`                  |\n| size                      | `ComponentSize`           | 否   | -                                                                                               | 表单组件尺寸                                                           |\n| labelCol                  | `ColProps`                | 否   | `{ sm: { span: 24 }, md: { span: 24 }, lg: { span: 7 }, xl: { span: 5 }, xxl: { span: 4 } }`    | 标签列布局样式（仅当 layout=\"horizontal\" 时有效）                      |\n| wrapperCol                | `ColProps`                | 否   | `{ sm: { span: 18 }, md: { span: 18 }, lg: { span: 13 }, xl: { span: 16 }, xxl: { span: 18 } }` | 输入控件列布局样式（仅当 layout=\"horizontal\" 时有效）                  |\n| autoScrollToInvalidFields | `boolean`                 | 否   | -                                                                                               | 是否在验证失败时自动滚动到第一个错误字段                               |\n| formStyle                 | `React.CSSProperties`     | 否   | -                                                                                               | 表单自定义样式                                                         |\n\n## Events\n\n| 事件             | detail                                                                                           | 说明                   |\n| ---------------- | ------------------------------------------------------------------------------------------------ | ---------------------- |\n| values.change    | `Record<string, unknown>` — 当前所有表单字段的值                                                 | 表单值变更事件         |\n| validate.success | `Record<string, unknown>` — 表单所有字段的值，包含合并后的 staticValues                          | 表单验证成功时触发事件 |\n| validate.error   | `(MessageBody & { name: string })[]` — 校验失败的字段信息列表，每项包含 name（字段名）及错误消息 | 表单验证报错时触发事件 |\n\n## Methods\n\n| 方法               | 参数                                                                                                                                                                                                                                 | 返回值                               | 说明                                                                               |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------------------------- |\n| validate           | -                                                                                                                                                                                                                                    | `boolean \\| Record<string, unknown>` | 表单校验方法，校验通过触发 validate.success 事件，校验失败触发 validate.error 事件 |\n| setInitValue       | <ul><li>`values: Record<string, unknown>` - 要设置的表单字段值</li><li>`options?: { runInMacrotask?: boolean; runInMicrotask?: boolean }` - 可选配置，支持 runInMicrotask（微任务中执行）和 runInMacrotask（宏任务中执行）</li></ul> | `void`                               | 表单设置值方法                                                                     |\n| resetFields        | <ul><li>`name?: string` - 要重置的字段名，不传则重置所有字段</li></ul>                                                                                                                                                               | `void`                               | 表单重置值方法                                                                     |\n| getFieldsValue     | <ul><li>`name?: string` - 要获取的字段名，不传则获取所有字段的值</li></ul>                                                                                                                                                           | `Record<string, unknown> \\| unknown` | 获取表单值方法                                                                     |\n| validateField      | <ul><li>`name: string` - 要校验的字段名</li></ul>                                                                                                                                                                                    | `void`                               | 校验表单字段方法                                                                   |\n| resetValidateState | -                                                                                                                                                                                                                                    | `void`                               | 重置表单校验状态方法                                                               |\n\n## Slots\n\n| 名称     | 说明     |\n| -------- | -------- |\n| （默认） | 表单内容 |\n\n## Examples\n\n### Layout\n\n展示 inline、horizontal、vertical 三种布局方式的表单。\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通过 `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监听 values.change、validate.success、validate.error 事件响应表单交互。\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### Methods\n\n通过方法调用实现表单校验、赋值、重置、取值及字段级校验等操作。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    id: form\n    autoScrollToInvalidFields: true\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: validate\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 auto-scroll-to-invalid-fields 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\">validate</eo-button>\n# <eo-button id=\"brick-3\">setInitValue</eo-button>\n# <eo-button id=\"brick-4\">resetFields</eo-button>\n# <eo-button id=\"brick-5\">resetFields(name)</eo-button>\n# <eo-button id=\"brick-6\">getFieldsValue</eo-button>\n# <eo-button id=\"brick-7\">getFieldsValue(name)</eo-button>\n# <eo-button id=\"brick-8\">validateField(name)</eo-button>\n# <eo-button id=\"brick-9\">resetValidateState</eo-button>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"男\",\n#       value: 0,\n#     },\n#     {\n#       label: \"女\",\n#       value: 1,\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.validate();\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.setInitValue({ name: \"Mike\", sex: 0 });\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.resetFields();\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.resetFields(\"name\");\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.getFieldsValue();\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.getFieldsValue(\"name\");\n#   });\n# \n#   const brick_8 = document.getElementById(\"brick-8\");\n#   brick_8.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.validateField(\"name\");\n#   });\n# \n#   const brick_9 = document.getElementById(\"brick-9\");\n#   brick_9.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#form\");\n#     brick.resetValidateState();\n#   });\n# </script>\n# \n```\n\n### Static Values\n\n通过 staticValues 为验证成功事件附加额外的静态字段。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    id: form2\n    staticValues:\n      source: web\n      version: \"1.0\"\n  events:\n    validate.success:\n      - action: console.log\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-input\n          properties:\n            name: username\n            label: 用户名\n            required: true\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"form2\">\n#   <eo-input name=\"username\" label=\"用户名\" required></eo-input>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const form2 = document.getElementById(\"form2\");\n#   form2.staticValues = {\n#     source: \"web\",\n#     version: \"1.0\",\n#   };\n#   form2.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Custom Style\n\n通过 formStyle 自定义表单容器样式。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    layout: vertical\n    formStyle:\n      gap: 16px\n      padding: 16px\n      background: \"#f5f5f5\"\n      borderRadius: 8px\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-input\n          properties:\n            name: username\n            label: 用户名\n        - brick: eo-select\n          properties:\n            name: city\n            label: 城市\n            options:\n              - 北京\n              - 上海\n              - 深圳\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"vertical\" id=\"brick-1\">\n#   <eo-input name=\"username\" label=\"用户名\"></eo-input>\n#   <eo-select name=\"city\" label=\"城市\" 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.formStyle = {\n#     gap: \"16px\",\n#     padding: \"16px\",\n#     background: \"#f5f5f5\",\n#     borderRadius: \"8px\",\n#   };\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\"北京\", \"上海\", \"深圳\"];\n# </script>\n# \n```\n\n### Horizontal Layout with Column Config\n\n使用 horizontal 布局并自定义 labelCol 和 wrapperCol 比例。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    layout: horizontal\n    labelCol:\n      span: 6\n    wrapperCol:\n      span: 18\n    size: large\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-input\n          properties:\n            name: name\n            label: 姓名\n        - brick: eo-input\n          properties:\n            name: email\n            label: 邮箱\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"horizontal\" size=\"large\" id=\"brick-1\">\n#   <eo-input name=\"name\" label=\"姓名\"></eo-input>\n#   <eo-input name=\"email\" label=\"邮箱\"></eo-input>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.labelCol = {\n#     span: 6,\n#   };\n#   brick_1.wrapperCol = {\n#     span: 18,\n#   };\n# </script>\n# \n```\n\n### Theme variant Elevo\n\n在 Elevo 主题下展示表单的视觉效果。\n\n```yaml preview\n# Use this container to emulate background\nbrick: ai-portal.home-container\nproperties:\n  style:\n    padding: 2em\n    backgroundColor: \"#d8d8d8\"\nchildren:\n  - brick: eo-form\n    properties:\n      themeVariant: elevo\n      layout: vertical\n      values:\n        city: 深圳\n        public: true\n        tags:\n          - 活泼\n    events:\n      validate.success:\n        useProvider: basic.show-dialog\n        args:\n          - title: 提交表单\n            type: confirm\n            content: 确定提交吗？\n            themeVariant: elevo\n    children:\n      - brick: eo-input\n        properties:\n          label: 名称\n          name: name\n          themeVariant: elevo\n          placeholder: 请输入\n      - brick: eo-textarea\n        properties:\n          label: 说明\n          name: desc\n          themeVariant: elevo\n          placeholder: 请输入\n      - brick: eo-select\n        properties:\n          label: 类型\n          name: type\n          themeVariant: elevo\n          placeholder: 请选择\n          options:\n            - 默认\n            - 其他\n      - brick: eo-radio\n        properties:\n          label: 城市\n          name: city\n          type: button\n          themeVariant: elevo\n          options:\n            - 北京\n            - 上海\n            - 深圳\n      - brick: eo-checkbox\n        properties:\n          label: 标签\n          name: tags\n          themeVariant: elevo\n          options:\n            - 活泼\n            - 开朗\n            - 好动\n      - brick: eo-switch\n        properties:\n          label: 公开\n          name: public\n          themeVariant: elevo\n      - brick: eo-submit-buttons\n        properties:\n          themeVariant: elevo\n          submitText: 提交\n          cancelText: 取消\n          submitType: primary\n          cancelType: default\n# -- YAML DELIMITER (1nbbm8) --\n# <ai-portal.home-container style=\"padding: 2em; background-color: #d8d8d8\">\n#   <eo-form\n#     theme-variant=\"elevo\"\n#     layout=\"vertical\"\n#     values=\"[object Object]\"\n#     id=\"brick-1\"\n#   >\n#     <eo-input\n#       label=\"名称\"\n#       name=\"name\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请输入\"\n#     ></eo-input>\n#     <eo-textarea\n#       label=\"说明\"\n#       name=\"desc\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请输入\"\n#     ></eo-textarea>\n#     <eo-select\n#       label=\"类型\"\n#       name=\"type\"\n#       theme-variant=\"elevo\"\n#       placeholder=\"请选择\"\n#       id=\"brick-2\"\n#     ></eo-select>\n#     <eo-radio\n#       label=\"城市\"\n#       name=\"city\"\n#       type=\"button\"\n#       theme-variant=\"elevo\"\n#       id=\"brick-3\"\n#     ></eo-radio>\n#     <eo-checkbox\n#       label=\"标签\"\n#       name=\"tags\"\n#       theme-variant=\"elevo\"\n#       id=\"brick-4\"\n#     ></eo-checkbox>\n#     <eo-switch label=\"公开\" name=\"public\" theme-variant=\"elevo\"></eo-switch>\n#     <eo-submit-buttons\n#       theme-variant=\"elevo\"\n#       submit-text=\"提交\"\n#       cancel-text=\"取消\"\n#       submit-type=\"primary\"\n#       cancel-type=\"default\"\n#     ></eo-submit-buttons>\n#   </eo-form>\n# </ai-portal.home-container>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     const provider = document.createElement(\"basic.show-dialog\");\n#     provider.resolve({\n#       title: \"提交表单\",\n#       type: \"confirm\",\n#       content: \"确定提交吗？\",\n#       themeVariant: \"elevo\",\n#     });\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\"默认\", \"其他\"];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.options = [\"北京\", \"上海\", \"深圳\"];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.options = [\"活泼\", \"开朗\", \"好动\"];\n# </script>\n# \n```\n"
   },
   "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### Emoji\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    name: overall\n    label: 总体满意度\n    type: button\n    options:\n      - label: 差\n        emoji: 😔\n        value: -1\n      - label: 一般\n        emoji: 😐\n        value: 0\n      - label: 好\n        emoji: 😊\n        value: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio\n#   name=\"overall\"\n#   label=\"总体满意度\"\n#   type=\"button\"\n#   id=\"brick-1\"\n# ></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"差\",\n#       emoji: \"😔\",\n#       value: -1,\n#     },\n#     {\n#       label: \"一般\",\n#       emoji: \"😐\",\n#       value: 0,\n#     },\n#     {\n#       label: \"好\",\n#       emoji: \"😊\",\n#       value: 1,\n#     },\n#   ];\n# </script>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    gap: 20px\n    flexDirection: column\n  children:\n    - brick: eo-radio\n      properties:\n        value: 0\n        options:\n          - label: Beijing\n            value: 0\n            disabled: true\n          - label: Shanghai\n            value: 1\n          - label: Guangzhou\n            value: 2\n          - label: Shenzhen\n            value: 3\n    - brick: eo-radio\n      properties:\n        disabled: true\n        value: 1\n        options:\n          - label: Beijing\n            value: 0\n          - label: Shanghai\n            value: 1\n          - label: Guangzhou\n            value: 2\n          - label: Shenzhen\n            value: 3\n    - brick: eo-radio\n      properties:\n        label: Icon\n        type: default\n        disabled: true\n        value: 0\n        options:\n          - label: Python\n            value: 0\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: python\n          - label: Javascript\n            value: 1\n            icon:\n              lib: easyops\n              category: program-language\n              icon: javascript\n          - label: Powershell\n            value: 2\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: powershell\n          - label: Shell\n            value: 3\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: shell\n    - brick: eo-radio\n      properties:\n        label: Button\n        type: button\n        value: Shanghai\n        disabled: true\n        value: Beijing\n        options:\n          - Beijing\n          - Shanghai\n          - Guangzhou\n          - Shenzhen\n    - brick: eo-radio\n      properties:\n        label: dashboard\n        type: button\n        ui: dashboard\n        value: Shanghai\n        options:\n          - label: Beijing\n            value: Beijing\n          - label: Shanghai\n            value: Shanghai\n            disabled: true\n          - label: Guangzhou\n            value: Guangzhou\n          - label: Shenzhen\n            value: Shenzhen\n    - brick: eo-radio\n      properties:\n        label: Icon\n        type: icon\n        value: 1\n        disabled: true\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n    - brick: eo-radio\n      properties:\n        label: Icon Cricle\n        type: icon-circle\n        value: 0\n        disabled: true\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n    - brick: eo-radio\n      properties:\n        label: Icon Square\n        type: icon-square\n        value: 2\n        disabled: true\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n#   <eo-radio id=\"brick-1\"></eo-radio>\n#   <eo-radio disabled id=\"brick-2\"></eo-radio>\n#   <eo-radio label=\"Icon\" type=\"default\" disabled id=\"brick-3\"></eo-radio>\n#   <eo-radio label=\"Button\" type=\"button\" disabled id=\"brick-4\"></eo-radio>\n#   <eo-radio\n#     label=\"dashboard\"\n#     type=\"button\"\n#     ui=\"dashboard\"\n#     id=\"brick-5\"\n#   ></eo-radio>\n#   <eo-radio label=\"Icon\" type=\"icon\" disabled id=\"brick-6\"></eo-radio>\n#   <eo-radio\n#     label=\"Icon Cricle\"\n#     type=\"icon-circle\"\n#     disabled\n#     id=\"brick-7\"\n#   ></eo-radio>\n#   <eo-radio\n#     label=\"Icon Square\"\n#     type=\"icon-square\"\n#     disabled\n#     id=\"brick-8\"\n#   ></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = 0;\n#   brick_1.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       disabled: true,\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: 3,\n#     },\n#   ];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.value = 1;\n#   brick_2.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: 3,\n#     },\n#   ];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.value = 0;\n#   brick_3.options = [\n#     {\n#       label: \"Python\",\n#       value: 0,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"python\",\n#       },\n#     },\n#     {\n#       label: \"Javascript\",\n#       value: 1,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"program-language\",\n#         icon: \"javascript\",\n#       },\n#     },\n#     {\n#       label: \"Powershell\",\n#       value: 2,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"powershell\",\n#       },\n#     },\n#     {\n#       label: \"Shell\",\n#       value: 3,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"shell\",\n#       },\n#     },\n#   ];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.value = \"Beijing\";\n#   brick_4.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.value = \"Shanghai\";\n#   brick_5.options = [\n#     {\n#       label: \"Beijing\",\n#       value: \"Beijing\",\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: \"Shanghai\",\n#       disabled: true,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: \"Guangzhou\",\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: \"Shenzhen\",\n#     },\n#   ];\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.value = 1;\n#   brick_6.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.value = 0;\n#   brick_7.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# \n#   const brick_8 = document.getElementById(\"brick-8\");\n#   brick_8.value = 2;\n#   brick_8.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Size\n\nUsed only when `type` is `button`.\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    label: large\n    size: large\n    type: button\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n- brick: div\n  properties:\n    style:\n      height: 20px\n- brick: eo-radio\n  properties:\n    label: medium\n    size: medium\n    type: button\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n- brick: div\n  properties:\n    style:\n      height: 20px\n- brick: eo-radio\n  properties:\n    label: small\n    size: small\n    type: button\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"large\" size=\"large\" type=\"button\" id=\"brick-1\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"medium\" size=\"medium\" type=\"button\" id=\"brick-2\"></eo-radio>\n# <div style=\"height: 20px\"></div>\n# <eo-radio label=\"small\" size=\"small\" type=\"button\" id=\"brick-3\"></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Type\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    gap: 20px\n    flexDirection: column\n  children:\n    - brick: eo-radio\n      properties:\n        label: Default\n        type: default\n        value: Beijing\n        options:\n          - Beijing\n          - Shanghai\n          - Guangzhou\n          - Shenzhen\n    - brick: eo-radio\n      properties:\n        label: Icon\n        type: default\n        options:\n          - label: Python\n            value: 0\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: python\n          - label: Javascript\n            value: 1\n            icon:\n              lib: easyops\n              category: program-language\n              icon: javascript\n          - label: Powershell\n            value: 2\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: powershell\n          - label: Shell\n            value: 3\n            icon:\n              lib: easyops\n              category: colored-common\n              icon: shell\n    - brick: eo-radio\n      properties:\n        label: Button\n        type: button\n        value: Shanghai\n        options:\n          - Beijing\n          - Shanghai\n          - Guangzhou\n          - Shenzhen\n    - brick: eo-radio\n      properties:\n        label: dashboard\n        type: button\n        ui: dashboard\n        value: Shanghai\n        options:\n          - label: Beijing\n            value: Beijing\n          - label: Shanghai\n            value: Shanghai\n          - label: Guangzhou\n            value: Guangzhou\n          - label: Shenzhen\n            value: Shenzhen\n    - brick: eo-radio\n      properties:\n        label: Icon\n        type: icon\n        value: 1\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n    - brick: eo-radio\n      properties:\n        label: Icon Cricle\n        type: icon-circle\n        value: 0\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n    - brick: eo-radio\n      properties:\n        label: Icon Square\n        type: icon-square\n        value: 2\n        options:\n          - label: Beijing\n            value: 0\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n          - label: Shanghai\n            value: 1\n            icon:\n              icon: \"bar-chart\"\n              lib: \"antd\"\n          - label: Guangzhou\n            value: 2\n            icon:\n              icon: \"area-chart\"\n              lib: \"antd\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout gap=\"20px\" flex-direction=\"column\">\n#   <eo-radio label=\"Default\" type=\"default\" id=\"brick-1\"></eo-radio>\n#   <eo-radio label=\"Icon\" type=\"default\" id=\"brick-2\"></eo-radio>\n#   <eo-radio label=\"Button\" type=\"button\" id=\"brick-3\"></eo-radio>\n#   <eo-radio\n#     label=\"dashboard\"\n#     type=\"button\"\n#     ui=\"dashboard\"\n#     id=\"brick-4\"\n#   ></eo-radio>\n#   <eo-radio label=\"Icon\" type=\"icon\" id=\"brick-5\"></eo-radio>\n#   <eo-radio label=\"Icon Cricle\" type=\"icon-circle\" id=\"brick-6\"></eo-radio>\n#   <eo-radio label=\"Icon Square\" type=\"icon-square\" id=\"brick-7\"></eo-radio>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = \"Beijing\";\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       label: \"Python\",\n#       value: 0,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"python\",\n#       },\n#     },\n#     {\n#       label: \"Javascript\",\n#       value: 1,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"program-language\",\n#         icon: \"javascript\",\n#       },\n#     },\n#     {\n#       label: \"Powershell\",\n#       value: 2,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"powershell\",\n#       },\n#     },\n#     {\n#       label: \"Shell\",\n#       value: 3,\n#       icon: {\n#         lib: \"easyops\",\n#         category: \"colored-common\",\n#         icon: \"shell\",\n#       },\n#     },\n#   ];\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.value = \"Shanghai\";\n#   brick_3.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.value = \"Shanghai\";\n#   brick_4.options = [\n#     {\n#       label: \"Beijing\",\n#       value: \"Beijing\",\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: \"Shanghai\",\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: \"Guangzhou\",\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: \"Shenzhen\",\n#     },\n#   ];\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.value = 1;\n#   brick_5.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.value = 0;\n#   brick_6.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.value = 2;\n#   brick_7.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#       icon: {\n#         icon: \"bar-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#       icon: {\n#         icon: \"area-chart\",\n#         lib: \"antd\",\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    id: option-radio\n    options:\n      - label: Beijing\n        value: 0\n      - label: Shanghai\n        value: 1\n      - label: Guangzhou\n        value: 2\n      - label: Shenzhen\n        value: 3\n  events:\n    change:\n      - action: message.success\n        args:\n          - <% JSON.stringify(EVENT.detail) %>\n    options.change:\n      - action: message.success\n        args:\n          - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-button\n  properties:\n    textContent: Click to Change Radio Option\n  events:\n    click:\n      - target: \"#option-radio\"\n        properties:\n          options:\n            - label: Beijing\n              value: 0\n            - label: Shanghai\n              value: 1\n            - label: Guangzhou\n              value: 2\n            - label: Shenzhen\n              value: 3\n            - label: Hangzhou\n              value: 4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"option-radio\"></eo-radio>\n# <eo-button id=\"brick-1\">Click to Change Radio Option</eo-button>\n# \n# <script>\n#   const option_radio = document.getElementById(\"option-radio\");\n#   option_radio.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: 3,\n#     },\n#   ];\n#   option_radio.addEventListener(\"change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"success\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   option_radio.addEventListener(\"options.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"success\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n# \n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"#option-radio\");\n#     brick.options = [\n#       {\n#         label: \"Beijing\",\n#         value: 0,\n#       },\n#       {\n#         label: \"Shanghai\",\n#         value: 1,\n#       },\n#       {\n#         label: \"Guangzhou\",\n#         value: 2,\n#       },\n#       {\n#         label: \"Shenzhen\",\n#         value: 3,\n#       },\n#       {\n#         label: \"Hangzhou\",\n#         value: 4,\n#       },\n#     ];\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-radio\ndisplayName: WrappedEoRadio\ndescription: 通用单选构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-radio\n\n> 通用单选构件\n\n## Props\n\n| 属性         | 类型                     | 必填 | 默认值      | 说明                   |\n| ------------ | ------------------------ | ---- | ----------- | ---------------------- |\n| name         | `string`                 | -    | -           | 字段名称               |\n| label        | `string`                 | -    | -           | 单选框字段说明         |\n| options      | `GeneralOption[]`        | -    | -           | 单选框选项表           |\n| value        | `any`                    | -    | -           | 单选框当前选中值       |\n| required     | `boolean`                | -    | -           | 是否必填               |\n| message      | `Record<string, string>` | -    | -           | 校验文本信息           |\n| disabled     | `boolean`                | -    | -           | 是否禁用               |\n| type         | `RadioType`              | -    | `\"default\"` | 单选框样式类型         |\n| ui           | `UIType`                 | -    | -           | UI样式                 |\n| size         | `ComponentSize`          | -    | -           | 大小，只对按钮样式生效 |\n| customStyle  | `React.CSSProperties`    | -    | -           | 自定义radio的外层样式  |\n| useBrick     | `UseSingleBrickConf`     | -    | -           | 自定义radio的内容      |\n| themeVariant | `\"default\" \\| \"elevo\"`   | -    | -           | 主题变体               |\n\n## Events\n\n| 事件           | detail                                                                       | 说明             |\n| -------------- | ---------------------------------------------------------------------------- | ---------------- |\n| change         | `GeneralComplexOption \\| undefined` — 当前选中项的完整选项对象               | 值变化事件       |\n| options.change | `{ options: GeneralComplexOption[]; name: string }` — 最新的选项列表及字段名 | 选项列表变化事件 |\n\n## Examples\n\n### Basic\n\n基本用法，展示简单的单选框列表。\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### Label\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设置 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多种选项格式：字符串数组、对象数组和布尔值数组。\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n    value: Guangzhou\n- brick: eo-radio\n  properties:\n    options:\n      - label: Beijing\n        value: 0\n      - label: Shanghai\n        value: 1\n      - label: Guangzhou\n        value: 2\n      - label: Shenzhen\n        value: 3\n    value: 2\n- brick: eo-radio\n  properties:\n    options:\n      - true\n      - false\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-radio id=\"brick-2\"></eo-radio>\n# <eo-radio id=\"brick-3\"></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n#   brick_1.value = \"Guangzhou\";\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\n#     {\n#       label: \"Beijing\",\n#       value: 0,\n#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#     },\n#     {\n#       label: \"Shenzhen\",\n#       value: 3,\n#     },\n#   ];\n#   brick_2.value = 2;\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.options = [true, false];\n# </script>\n# \n```\n\n### Emoji\n\n按钮类型单选框支持 emoji 图标。\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    name: overall\n    label: 总体满意度\n    type: button\n    options:\n      - label: 差\n        emoji: \"\\U0001F614\"\n        value: -1\n      - label: 一般\n        emoji: \"\\U0001F610\"\n        value: 0\n      - label: 好\n        emoji: \"\\U0001F60A\"\n        value: 1\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio\n#   name=\"overall\"\n#   label=\"总体满意度\"\n#   type=\"button\"\n#   id=\"brick-1\"\n# ></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     {\n#       label: \"差\",\n#       emoji: \"😔\",\n#       value: -1,\n#     },\n#     {\n#       label: \"一般\",\n#       emoji: \"😐\",\n#       value: 0,\n#     },\n#     {\n#       label: \"好\",\n#       emoji: \"😊\",\n#       value: 1,\n#     },\n#   ];\n# </script>\n# \n```\n\n### Disabled\n\n禁用单个选项或整体禁用单选框，支持各种类型。\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        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\n设置 size 属性控制按钮样式单选框的大小。\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展示 default、button、icon、icon-circle、icon-square 等各种样式类型。\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### customStyle\n\n使用 customStyle 自定义单选项的外层样式。\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    label: 自定义样式\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n    customStyle:\n      padding: 8px\n      border: 1px solid #d9d9d9\n      borderRadius: 4px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"自定义样式\" id=\"brick-1\"></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\"];\n#   brick_1.customStyle = {\n#     padding: \"8px\",\n#     border: \"1px solid\",\n#     borderRadius: \"4px\",\n#   };\n# </script>\n# \n```\n\n### useBrick\n\n使用 useBrick 自定义单选框内容渲染（需搭配 type=\"custom\"）。\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    label: 自定义内容\n    type: custom\n    value: a\n    options:\n      - label: 选项A\n        value: a\n      - label: 选项B\n        value: b\n    useBrick:\n      brick: span\n      properties:\n        textContent: <% DATA.label %>\n        style:\n          color: green\n          fontWeight: bold\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio label=\"自定义内容\" type=\"custom\" id=\"brick-1\"></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = \"a\";\n#   brick_1.options = [\n#     {\n#       label: \"选项A\",\n#       value: \"a\",\n#     },\n#     {\n#       label: \"选项B\",\n#       value: \"b\",\n#     },\n#   ];\n#   brick_1.useBrick = {\n#     brick: \"span\",\n#     properties: {\n#       textContent: \"<% DATA.label %>\",\n#       style: {\n#         color: \"green\",\n#         fontWeight: \"bold\",\n#       },\n#     },\n#   };\n# </script>\n# \n```\n\n### themeVariant\n\n设置主题变体为 elevo 风格。\n\n```yaml preview\n- brick: eo-radio\n  properties:\n    themeVariant: elevo\n    label: Elevo 风格\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n    value: Beijing\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio theme-variant=\"elevo\" label=\"Elevo 风格\" id=\"brick-1\"></eo-radio>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\"];\n#   brick_1.value = \"Beijing\";\n# </script>\n# \n```\n\n### Event\n\n监听 change 和 options.change 事件，通过按钮动态修改选项触发 options.change 事件。\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\n### With Form\n\n在表单中使用单选框，支持 required 校验和 message 自定义校验文本。\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-radio\n      properties:\n        name: city\n        label: 城市\n        required: true\n        message:\n          required: 请选择一个城市\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-radio name=\"city\" label=\"城市\" required id=\"brick-2\"></eo-radio>\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.message = {\n#     required: \"请选择一个城市\",\n#   };\n#   brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\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-select": {
+    "doc": "---\ntagName: eo-select\ndisplayName: WrappedEoSelect\ndescription: 通用下拉选择构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-select\n\n> 通用下拉选择构件\n\n## Props\n\n| 属性                | 类型                                 | 必填 | 默认值 | 说明                                                                                         |\n| ------------------- | ------------------------------------ | ---- | ------ | -------------------------------------------------------------------------------------------- |\n| name                | `string`                             | -    | -      | 字段名称                                                                                     |\n| placeholder         | `string`                             | -    | -      | 占位说明                                                                                     |\n| label               | `string`                             | -    | -      | 字段文本                                                                                     |\n| options             | `GeneralComplexOption[]`             | 是   | -      | 选项列表                                                                                     |\n| value               | `any`                                | -    | -      | 值                                                                                           |\n| required            | `boolean`                            | -    | -      | 是否必填                                                                                     |\n| message             | `Record<string, string>`             | -    | -      | 校验文本信息                                                                                 |\n| disabled            | `boolean`                            | -    | -      | 是否禁用                                                                                     |\n| mode                | `\"tags\" \\| \"multiple\"`               | -    | -      | 类型                                                                                         |\n| tokenSeparators     | `string[]`                           | -    | -      | 自动分词的分隔符，仅在 mode=\"tags\" 时生效                                                    |\n| maxTagCount         | `number`                             | -    | -      | 最多显示多少个 tag, 剩余的 tag 将被隐藏                                                      |\n| groupBy             | `string`                             | -    | -      | 分组字段                                                                                     |\n| suffix              | `{ useBrick: UseSingleBrickConf }`   | -    | -      | 后缀内容，使用 useBrick 在选项及选中值旁显示额外信息                                         |\n| clearable           | `boolean`                            | -    | `true` | 是否支持清除                                                                                 |\n| fields              | `{ label?: string; value?: string }` | -    | -      | 列表指定字段作为 label 和 value                                                              |\n| useBackend          | `UseBackendConf`                     | -    | -      | 后端搜索                                                                                     |\n| debounceSearchDelay | `number`                             | -    | -      | 设置时，同时对 useBackend 和 search 事件进行防抖。未设置时，useBackend 有默认的 300ms 防抖。 |\n| inputStyle          | `React.CSSProperties`                | -    | -      | 输入框样式                                                                                   |\n| dropdownStyle       | `React.CSSProperties`                | -    | -      | 下拉框样式                                                                                   |\n| dropdownHoist       | `boolean`                            | -    | -      | 下拉框是否使用固定定位防止内容被裁切                                                         |\n| themeVariant        | `\"default\" \\| \"elevo\"`               | -    | -      | 主题变体                                                                                     |\n\n## Events\n\n| 事件           | detail                                                                   | 说明                              |\n| -------------- | ------------------------------------------------------------------------ | --------------------------------- |\n| change         | `ChangeEventDetail` — { value: 选中的值, options: 对应选项列表 }         | 下拉选择事件                      |\n| change.v2      | `string \\| string[]` — 选中的值                                          | 下拉选择事件 v2（仅传递选中的值） |\n| search         | `SearchEventDetail` — { value: 当前输入的搜索词 }                        | 下拉框search事件                  |\n| select.focus   | -                                                                        | 下拉框focus事件                   |\n| options.change | `OptionsChangeEventDetail` — { options: 最新的选项列表, name: 字段名称 } | 选项列表变化事件                  |\n\n## Examples\n\n### Basic\n\n基本用法，展示简单的下拉选择框。\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### Label\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设置 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多种选项格式：字符串数组、对象数组和布尔值数组。\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禁用单个选项或整体禁用下拉框。\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多选模式，支持同时选择多个选项。\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标签模式，支持自定义输入新标签、自动分词和最大标签数限制。\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设置 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使用 suffix 的 useBrick 在选项旁显示额外信息。\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使用 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使用 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使用 fields 属性指定选项列表中哪些字段作为 label 和 value。\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使用后端搜索从远程接口获取选项数据。\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使用 inputStyle 自定义输入框样式。\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### Dropdown Style And Hoist\n\n使用 dropdownStyle 自定义下拉框样式，dropdownHoist 使用固定定位防止内容被裁切。\n\n```yaml preview minHeight=\"350px\"\n- brick: eo-select\n  properties:\n    label: 自定义下拉框样式\n    dropdownStyle:\n      maxHeight: 150px\n    dropdownHoist: true\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n      - Hangzhou\n      - Chengdu\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"自定义下拉框样式\" dropdown-hoist id=\"brick-1\"></eo-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.dropdownStyle = {\n#     maxHeight: \"150px\",\n#   };\n#   brick_1.options = [\n#     \"Beijing\",\n#     \"Shanghai\",\n#     \"Guangzhou\",\n#     \"Shenzhen\",\n#     \"Hangzhou\",\n#     \"Chengdu\",\n#   ];\n# </script>\n# \n```\n\n### Clearable\n\n设置 clearable 为 false 禁用清除按钮。\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n  properties:\n    label: 不可清除\n    clearable: false\n    value: Beijing\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select label=\"不可清除\" id=\"brick-1\"></eo-select>\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# </script>\n# \n```\n\n### themeVariant\n\n设置主题变体为 elevo 风格。\n\n```yaml preview minHeight=\"250px\"\n- brick: eo-select\n  properties:\n    themeVariant: elevo\n    label: Elevo 风格\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n    value: Beijing\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-select theme-variant=\"elevo\" label=\"Elevo 风格\" id=\"brick-1\"></eo-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\"];\n#   brick_1.value = \"Beijing\";\n# </script>\n# \n```\n\n### Event\n\n监听 change、change.v2、search、select.focus 和 options.change 事件。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-select\n  properties:\n    id: options-change-select\n    label: Single\n    debounceSearchDelay: 500\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    change.v2:\n      - action: console.log\n        args:\n          - <% EVENT.detail %>\n    search:\n      - action: console.log\n        args:\n          - <% JSON.stringify(EVENT.detail) %>\n    select.focus:\n      - action: console.log\n        args:\n          - select focused\n    options.change:\n      - action: message.success\n        args:\n          - <% JSON.stringify(EVENT.detail) %>\n- brick: eo-select\n  properties:\n    label: Multiple\n    mode: multiple\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\n#   label=\"Single\"\n#   debounce-search-delay=\"500\"\n#   id=\"options-change-select\"\n# ></eo-select>\n# <eo-select label=\"Multiple\" mode=\"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(\"change.v2\", (e) => {\n#     console.log(e.detail)\n#   });\n#   options_change-select.addEventListener(\"search\", (e) => {\n#     console.log(/* WARN: incompatible expressions in HTML, please try YAML: */\n#     \"<% JSON.stringify(EVENT.detail) %>\")\n#   });\n#   options_change-select.addEventListener(\"select.focus\", (e) => {\n#     console.log(\"select focused\")\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在表单中使用下拉选择框，支持 required 校验和 message 自定义校验文本。\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        message:\n          required: 请选择一个选项\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#   brick_2.message = {\n#     required: \"请选择一个选项\",\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"
+  "eo-submit-buttons": {
+    "doc": "---\ntagName: eo-submit-buttons\ndisplayName: WrappedEoSubmitButtons\ndescription: 表单提交按钮\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-submit-buttons\n\n> 表单提交按钮\n\n## Props\n\n| 属性              | 类型                   | 必填 | 默认值   | 说明                                   |\n| ----------------- | ---------------------- | ---- | -------- | -------------------------------------- |\n| submitText        | `string`               | 是   | `\"提交\"` | 提交按钮的文字                         |\n| cancelText        | `string`               | 否   | -        | 取消按钮的文字，不设置则不显示取消按钮 |\n| disableAfterClick | `boolean`              | 否   | -        | 点击确定按钮后自动禁用                 |\n| submitDisabled    | `boolean`              | 否   | -        | 禁用提交按钮                           |\n| submitType        | `ButtonType`           | 否   | -        | 提交按钮类型                           |\n| cancelType        | `ButtonType`           | 否   | -        | 取消按钮类型                           |\n| themeVariant      | `\"default\" \\| \"elevo\"` | 否   | -        | 主题变体                               |\n\n## Events\n\n| 事件   | detail | 说明                   |\n| ------ | ------ | ---------------------- |\n| submit | `void` | 点击提交按钮触发的事件 |\n| cancel | `void` | 点击取消按钮触发的事件 |\n\n## Examples\n\n### Basic\n\n展示提交按钮与取消按钮的基本用法，并监听点击事件。\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通过 submitType 和 cancelType 自定义按钮的样式类型。\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展示 submitDisabled 禁用提交按钮的效果。\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\n### Disable After Click\n\n演示 disableAfterClick 在点击提交后自动禁用按钮，防止重复提交。\n\n```yaml preview\n- brick: eo-submit-buttons\n  properties:\n    submitText: 提交\n    cancelText: 取消\n    disableAfterClick: true\n  events:\n    submit:\n      - action: message.success\n        args:\n          - 已提交，按钮已禁用\n    cancel:\n      - action: message.info\n        args:\n          - 已取消\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons\n#   submit-text=\"提交\"\n#   cancel-text=\"取消\"\n#   disable-after-click\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: \"已提交，按钮已禁用\" });\n#   });\n#   brick_1.addEventListener(\"cancel\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"info\", message: \"已取消\" });\n#   });\n# </script>\n# \n```\n\n### Theme Variant Elevo\n\n展示 Elevo 主题变体下提交按钮的样式。\n\n```yaml preview\n- brick: eo-submit-buttons\n  properties:\n    submitText: 提交\n    cancelText: 取消\n    themeVariant: elevo\n    submitType: primary\n    cancelType: default\n  events:\n    submit:\n      - action: message.success\n        args:\n          - 提交成功\n    cancel:\n      - action: message.info\n        args:\n          - 已取消\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-submit-buttons\n#   submit-text=\"提交\"\n#   cancel-text=\"取消\"\n#   theme-variant=\"elevo\"\n#   submit-type=\"primary\"\n#   cancel-type=\"default\"\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: \"提交成功\" });\n#   });\n#   brick_1.addEventListener(\"cancel\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"info\", message: \"已取消\" });\n#   });\n# </script>\n# \n```\n\n### In Form\n\n与 eo-form 搭配使用，演示完整的表单提交流程。\n\n```yaml preview\n- brick: eo-form\n  events:\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        - brick: eo-select\n          properties:\n            required: true\n            name: city\n            label: 城市\n            options:\n              - label: 北京\n                value: beijing\n              - label: 上海\n                value: shanghai\n        - brick: eo-submit-buttons\n          properties:\n            submitText: 提交\n            cancelText: 取消\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-input required name=\"name\" label=\"姓名\"></eo-input>\n#   <eo-select required name=\"city\" label=\"城市\" id=\"brick-2\"></eo-select>\n#   <eo-submit-buttons submit-text=\"提交\" cancel-text=\"取消\"></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#     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.options = [\n#     {\n#       label: \"北京\",\n#       value: \"beijing\",\n#     },\n#     {\n#       label: \"上海\",\n#       value: \"shanghai\",\n#     },\n#   ];\n# </script>\n# \n```\n"
   },
   "eo-dynamic-form-item": {
-    "doc": "动态表单构件。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    layout: vertical\n    values:\n      id: request_5XXX\n      dimension:\n        - dimensionName: one\n          dimensionId: one\n          dimensionValue: 1\n  children:\n    - brick: eo-input\n      properties:\n        name: id\n        label: 指标ID\n        required: true\n    - brick: eo-dynamic-form-item\n      properties:\n        name: dimension\n        label: 维度\n        useBrick:\n          - brick: eo-input\n            properties:\n              name: dimensionName\n              required: true\n              message:\n                required: 维度名称为必填项\n              label: 维度名称\n          - brick: eo-input\n            properties:\n              name: dimensionId\n              required: true\n              message:\n                required: 维度id为必填项\n              label: 维度id\n              unique: true\n              validator: '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>'\n          - brick: eo-input\n            properties:\n              name: dimensionValue\n              label: 维度值\n    - brick: eo-submit-buttons\n      properties:\n        cancelText: 取消\n        submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"vertical\" values=\"[object Object]\">\n#   <eo-input name=\"id\" label=\"指标ID\" required></eo-input>\n#   <eo-dynamic-form-item\n#     name=\"dimension\"\n#     label=\"维度\"\n#     id=\"brick-1\"\n#   ></eo-dynamic-form-item>\n#   <eo-submit-buttons cancel-text=\"取消\" submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionName\",\n#         required: true,\n#         message: {\n#           required: \"维度名称为必填项\",\n#         },\n#         label: \"维度名称\",\n#       },\n#     },\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionId\",\n#         required: true,\n#         message: {\n#           required: \"维度id为必填项\",\n#         },\n#         label: \"维度id\",\n#         unique: true,\n#         validator:\n#           '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>',\n#       },\n#     },\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionValue\",\n#         label: \"维度值\",\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    label: Label\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item label=\"Label\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    value:\n      - input: 北京\n        select: Beijing\n      - input: 上海\n        select: Shanghai\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = [\n#     {\n#       input: \"北京\",\n#       select: \"Beijing\",\n#     },\n#     {\n#       input: \"上海\",\n#       select: \"Shanghai\",\n#     },\n#   ];\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Hide or disable buttons\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    hideAddButton: <% (value)=>value.length===5 %>\n    disabledAddButton: <% (value)=>value.length===4 %>\n    hideRemoveButton: <% (value,row)=>row===1 %>\n    disabledRemoveButton: <% (value,row)=>row===0 %>\n    value:\n      - input: hello1\n        select: abc1\n      - input: hello2\n        select: abc2\n      - input: hello3\n        select: abc3\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - abc1\n            - abc2\n            - abc3\n            - abc4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.hideAddButton = \"<% (value)=>value.length===5 %>\";\n#   brick_1.disabledAddButton = \"<% (value)=>value.length===4 %>\";\n#   brick_1.hideRemoveButton = \"<% (value,row)=>row===1 %>\";\n#   brick_1.disabledRemoveButton = \"<% (value,row)=>row===0 %>\";\n#   brick_1.value = [\n#     {\n#       input: \"hello1\",\n#       select: \"abc1\",\n#     },\n#     {\n#       input: \"hello2\",\n#       select: \"abc2\",\n#     },\n#     {\n#       input: \"hello3\",\n#       select: \"abc3\",\n#     },\n#   ];\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"abc1\", \"abc2\", \"abc3\", \"abc4\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    name: dynamicForm\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n  events:\n    row.remove:\n      action: console.log\n    row.add:\n      action: console.log\n    change:\n      - action: message.success\n        args:\n          - <% JSON.stringify(EVENT.detail) %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item name=\"dynamicForm\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"row.remove\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"row.add\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"success\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-dynamic-form-item\ndisplayName: EoDynamicFormItem\ndescription: 动态表单\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-dynamic-form-item\n\n> 动态表单\n\n## Props\n\n| 属性                 | 类型                                                                | 必填 | 默认值 | 说明                     |\n| -------------------- | ------------------------------------------------------------------- | ---- | ------ | ------------------------ |\n| name                 | `string`                                                            | 否   | -      | 字段名称                 |\n| label                | `string`                                                            | 否   | -      | 字段说明                 |\n| required             | `boolean`                                                           | 否   | -      | 是否必填                 |\n| value                | `DynamicFormValuesItem[]`                                           | 否   | -      | 值                       |\n| message              | `Record<string, string>`                                            | 否   | -      | 校验文本                 |\n| useBrick             | `UseBrickConf`                                                      | 否   | -      | 动态表单子项构件列表     |\n| hideAddButton        | `boolean \\| ((value: Record<string, any>[]) => boolean)`            | 否   | -      | 是否隐藏添加的按钮       |\n| disabledAddButton    | `boolean \\| ((value: Record<string, any>[]) => boolean)`            | 否   | -      | 是否禁止添加的按钮       |\n| hideRemoveButton     | `boolean \\| ((row: Record<string, any>, index: number) => boolean)` | 否   | -      | 是否隐藏每一行删除的按钮 |\n| disabledRemoveButton | `boolean \\| ((row: Record<string, any>, index: number) => boolean)` | 否   | -      | 是否禁止每一行删除的按钮 |\n\n## Events\n\n| 事件       | detail                                                      | 说明             |\n| ---------- | ----------------------------------------------------------- | ---------------- |\n| change     | `DynamicFormValuesItem[]` — 整个动态表单当前所有行的值列表  | 表单值改变时触发 |\n| row.add    | `rowDataType` — { detail: 该行的默认值, index: 该行的位置 } | 增加一行时触发   |\n| row.remove | `rowDataType` — { detail: 该行的值, index: 该行的位置 }     | 移除一行时触发   |\n\n## Examples\n\n### 与表单集成\n\n在 eo-form 中使用动态表单，支持必填校验和唯一性校验。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    layout: vertical\n    values:\n      id: request_5XXX\n      dimension:\n        - dimensionName: one\n          dimensionId: one\n          dimensionValue: 1\n  children:\n    - brick: eo-input\n      properties:\n        name: id\n        label: 指标ID\n        required: true\n    - brick: eo-dynamic-form-item\n      properties:\n        name: dimension\n        label: 维度\n        useBrick:\n          - brick: eo-input\n            properties:\n              name: dimensionName\n              required: true\n              message:\n                required: 维度名称为必填项\n              label: 维度名称\n          - brick: eo-input\n            properties:\n              name: dimensionId\n              required: true\n              message:\n                required: 维度id为必填项\n              label: 维度id\n              unique: true\n              validator: '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>'\n          - brick: eo-input\n            properties:\n              name: dimensionValue\n              label: 维度值\n    - brick: eo-submit-buttons\n      properties:\n        cancelText: 取消\n        submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"vertical\" values=\"[object Object]\">\n#   <eo-input name=\"id\" label=\"指标ID\" required></eo-input>\n#   <eo-dynamic-form-item\n#     name=\"dimension\"\n#     label=\"维度\"\n#     id=\"brick-1\"\n#   ></eo-dynamic-form-item>\n#   <eo-submit-buttons cancel-text=\"取消\" submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionName\",\n#         required: true,\n#         message: {\n#           required: \"维度名称为必填项\",\n#         },\n#         label: \"维度名称\",\n#       },\n#     },\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionId\",\n#         required: true,\n#         message: {\n#           required: \"维度id为必填项\",\n#         },\n#         label: \"维度id\",\n#         unique: true,\n#         validator:\n#           '<% (value) => (value.length > 5 ? \"维度id不能超过5\" : \"\") %>',\n#       },\n#     },\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"dimensionValue\",\n#         label: \"维度值\",\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### 显示标签\n\n展示带有 label 标签的动态表单。\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    label: Label\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item label=\"Label\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### 设置初始值\n\n通过 value 属性设置动态表单的初始数据。\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    value:\n      - input: 北京\n        select: Beijing\n      - input: 上海\n        select: Shanghai\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = [\n#     {\n#       input: \"北京\",\n#       select: \"Beijing\",\n#     },\n#     {\n#       input: \"上海\",\n#       select: \"Shanghai\",\n#     },\n#   ];\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### 隐藏或禁用按钮\n\n通过函数动态控制添加和删除按钮的显示与禁用状态。\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    hideAddButton: \"<% (value) => value.length === 5 %>\"\n    disabledAddButton: \"<% (value) => value.length === 4 %>\"\n    hideRemoveButton: \"<% (row, index) => index === 1 %>\"\n    disabledRemoveButton: \"<% (row, index) => index === 0 %>\"\n    value:\n      - input: hello1\n        select: abc1\n      - input: hello2\n        select: abc2\n      - input: hello3\n        select: abc3\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - abc1\n            - abc2\n            - abc3\n            - abc4\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.hideAddButton = \"<% (value) => value.length === 5 %>\";\n#   brick_1.disabledAddButton = \"<% (value) => value.length === 4 %>\";\n#   brick_1.hideRemoveButton = \"<% (row, index) => index === 1 %>\";\n#   brick_1.disabledRemoveButton = \"<% (row, index) => index === 0 %>\";\n#   brick_1.value = [\n#     {\n#       input: \"hello1\",\n#       select: \"abc1\",\n#     },\n#     {\n#       input: \"hello2\",\n#       select: \"abc2\",\n#     },\n#     {\n#       input: \"hello3\",\n#       select: \"abc3\",\n#     },\n#   ];\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"abc1\", \"abc2\", \"abc3\", \"abc4\"],\n#       },\n#     },\n#   ];\n# </script>\n# \n```\n\n### 监听事件\n\n监听动态表单的值变化、添加行和删除行事件。\n\n```yaml preview\n- brick: eo-dynamic-form-item\n  properties:\n    name: dynamicForm\n    useBrick:\n      - brick: eo-input\n        properties:\n          name: input\n      - brick: eo-select\n        properties:\n          name: select\n          options:\n            - Beijing\n            - Shanghai\n            - Guangzhou\n            - Shenzhen\n  events:\n    change:\n      - action: message.success\n        args:\n          - \"<% JSON.stringify(EVENT.detail) %>\"\n    row.add:\n      action: console.log\n    row.remove:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-dynamic-form-item name=\"dynamicForm\" id=\"brick-1\"></eo-dynamic-form-item>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.useBrick = [\n#     {\n#       brick: \"eo-input\",\n#       properties: {\n#         name: \"input\",\n#       },\n#     },\n#     {\n#       brick: \"eo-select\",\n#       properties: {\n#         name: \"select\",\n#         options: [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"],\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"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#   brick_1.addEventListener(\"row.add\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"row.remove\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
+  "eo-checkbox": {
+    "doc": "---\ntagName: eo-checkbox\ndisplayName: WrappedEoCheckbox\ndescription: 表单复选框构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-checkbox\n\n> 表单复选框构件\n\n## Props\n\n| 属性         | 类型                     | 必填 | 默认值      | 说明                                                                  |\n| ------------ | ------------------------ | ---- | ----------- | --------------------------------------------------------------------- |\n| name         | `string`                 | -    | -           | 字段名称                                                              |\n| label        | `string`                 | -    | -           | 字段说明                                                              |\n| value        | `CheckboxValueType[]`    | -    | -           | 值                                                                    |\n| options      | `CheckboxOptionType[]`   | -    | `[]`        | 多选框选项表                                                          |\n| type         | `CheckboxType`           | -    | `\"default\"` | 类型                                                                  |\n| disabled     | `boolean`                | -    | -           | 是否禁用                                                              |\n| isCustom     | `boolean`                | -    | `false`     | 是否为自定义样式，仅在 type=\"icon\" 时生效，启用后图标尺寸更大（52px） |\n| required     | `boolean`                | -    | -           | 是否必填                                                              |\n| message      | `Record<string, string>` | -    | -           | 校验文本                                                              |\n| isGroup      | `boolean`                | -    | -           | 是否启用分组模式，为 true 时，则可设置分组数据 optionGroups           |\n| optionGroups | `OptionGroup[]`          | -    | -           | 多选框选项分组数据，需要设置 isGroup 为 true 才生效                   |\n| themeVariant | `\"default\" \\| \"elevo\"`   | -    | -           | 主题变体                                                              |\n\n## Events\n\n| 事件           | detail                                                                                                               | 说明                       |\n| -------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| change         | `CheckboxOptionType[]` — { value: 选中项的值, label: 选中项的标签, disabled: 是否禁用, checkboxColor: 复选框颜色 }[] | 复选框选中项发生变化时触发 |\n| options.change | `OptionsChangeEventDetail` — { options: 最新的选项列表, name: 字段名称 }                                             | 复选框选项数据变化时触发   |\n\n## Examples\n\n### Basic\n\n基本用法，展示简单的多选框列表。\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### Label\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设置 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多种选项格式：字符串数组、对象数组和布尔值数组。\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禁用单个选项或整体禁用复选框。\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展示 default 和 icon 两种类型的复选框样式。\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### isCustom\n\n启用自定义样式（仅在 type=\"icon\" 时生效），图标尺寸更大。\n\n```yaml preview\n- brick: eo-checkbox\n  properties:\n    label: 自定义图标样式\n    type: icon\n    isCustom: true\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# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox\n#   label=\"自定义图标样式\"\n#   type=\"icon\"\n#   is-custom\n#   id=\"brick-1\"\n# ></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# </script>\n# \n```\n\n### checkboxColor\n\n为不同选项设置自定义颜色。\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启用分组模式，将选项按组展示，支持全选/取消全选操作。\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### themeVariant\n\n设置主题变体为 elevo 风格。\n\n```yaml preview\n- brick: eo-checkbox\n  properties:\n    themeVariant: elevo\n    label: Elevo 风格\n    options:\n      - label: Beijing\n        value: 0\n      - label: Shanghai\n        value: 1\n      - label: Guangzhou\n        value: 2\n    value:\n      - 0\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-checkbox\n#   theme-variant=\"elevo\"\n#   label=\"Elevo 风格\"\n#   id=\"brick-1\"\n# ></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#     },\n#     {\n#       label: \"Shanghai\",\n#       value: 1,\n#     },\n#     {\n#       label: \"Guangzhou\",\n#       value: 2,\n#     },\n#   ];\n#   brick_1.value = [0];\n# </script>\n# \n```\n\n### Event\n\n监听 change 和 options.change 事件，通过按钮动态修改选项触发 options.change 事件。\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 Checkbox 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 Checkbox 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在表单中使用复选框，支持 required 校验和 message 自定义校验文本。\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        message:\n          required: 请选择至少一个城市\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.message = {\n#     required: \"请选择至少一个城市\",\n#   };\n#   brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n"
   },
   "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"
+    "doc": "---\ntagName: eo-search\ndisplayName: WrappedEoSearch\ndescription: 搜索框\ncategory: interact-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-search\n\n> 搜索框\n\n## Props\n\n| 属性         | 类型                   | 必填 | 默认值 | 说明                     |\n| ------------ | ---------------------- | ---- | ------ | ------------------------ |\n| value        | `string`               | 是   | `\"\"`   | 搜索框的值               |\n| placeholder  | `string`               | 否   | -      | 提示语                   |\n| autoFocus    | `boolean`              | 否   | -      | 是否自动聚焦             |\n| clearable    | `boolean`              | 否   | -      | 可以点击清除图标删除内容 |\n| trim         | `boolean`              | 否   | -      | 是否剔除前后空格         |\n| debounceTime | `number`               | 是   | `0`    | 默认延迟时间             |\n| inputStyle   | `CSSProperties`        | 否   | -      | 输入框样式               |\n| themeVariant | `\"default\" \\| \"elevo\"` | 否   | -      | 主题变体                 |\n\n## Events\n\n| 事件   | detail                | 说明                           |\n| ------ | --------------------- | ------------------------------ |\n| change | `string` — 当前输入值 | 输入的搜索字符，输入变化时触发 |\n| search | `string` — 搜索关键词 | 搜索时触发                     |\n\n## Examples\n\n### Basic\n\n展示搜索框的最基本用法，配合 `placeholder`、`clearable` 和 `trim` 属性，并监听 `change` 和 `search` 事件。\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\n### Value\n\n通过 `value` 属性设置搜索框的默认值。\n\n```yaml preview\n- brick: eo-search\n  properties:\n    value: 默认搜索词\n    placeholder: 请输入\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search value=\"默认搜索词\" placeholder=\"请输入\"></eo-search>\n# \n```\n\n### AutoFocus\n\n设置 `autoFocus` 属性使搜索框在页面加载后自动获取焦点。\n\n```yaml preview\n- brick: eo-search\n  properties:\n    autoFocus: true\n    placeholder: 自动聚焦\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search auto-focus placeholder=\"自动聚焦\"></eo-search>\n# \n```\n\n### Debounce\n\n通过 `debounceTime` 属性设置 `change` 事件的防抖延迟时间（毫秒），减少频繁触发。\n\n```yaml preview\n- brick: eo-search\n  properties:\n    placeholder: 防抖 500ms\n    debounceTime: 500\n  events:\n    change:\n      action: console.log\n      args:\n        - \"<% EVENT.detail %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search\n#   placeholder=\"防抖 500ms\"\n#   debounce-time=\"500\"\n#   id=\"brick-1\"\n# ></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# </script>\n# \n```\n\n### Input Style\n\n通过 `inputStyle` 属性自定义搜索框的内联样式。\n\n```yaml preview\n- brick: eo-search\n  properties:\n    placeholder: 自定义样式\n    inputStyle:\n      width: 300px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search placeholder=\"自定义样式\" id=\"brick-1\"></eo-search>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.inputStyle = {\n#     width: \"300px\",\n#   };\n# </script>\n# \n```\n\n### Theme Variant\n\n通过 `themeVariant` 属性切换搜索框的主题变体，支持 `default` 和 `elevo`。\n\n```yaml preview\n- brick: eo-search\n  properties:\n    placeholder: elevo 主题\n    themeVariant: elevo\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-search placeholder=\"elevo 主题\" theme-variant=\"elevo\"></eo-search>\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"
+    "doc": "---\ntagName: eo-icon-select\ndisplayName: WrappedEoIconSelect\ndescription: 图标选择构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-icon-select\n\n> 图标选择构件\n\n## Props\n\n| 属性         | 类型                     | 必填 | 默认值 | 说明             |\n| ------------ | ------------------------ | ---- | ------ | ---------------- |\n| name         | `string`                 | 否   | -      | 字段名称         |\n| label        | `string`                 | 否   | -      | 字段说明         |\n| value        | `Icon`                   | 否   | -      | 值               |\n| disabled     | `boolean`                | 否   | -      | 是否禁用         |\n| required     | `boolean`                | 否   | -      | 是否必填         |\n| message      | `Record<string, string>` | 否   | -      | 校验错误提示信息 |\n| themeVariant | `\"default\" \\| \"elevo\"`   | 否   | -      | 主题变体         |\n\n## Events\n\n| 事件   | detail                                                                                                  | 说明         |\n| ------ | ------------------------------------------------------------------------------------------------------- | ------------ |\n| change | `Icon \\| undefined` — { lib: 图标库, icon: 图标名称, category: 图标分类, color: 图标颜色 } \\| undefined | 值变化时触发 |\n\n## Examples\n\n### Basic\n\n基础用法，点击图标选择器后打开图标选择弹窗，确认后通过 change 事件获取选中的图标。\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 Value\n\n设置初始值，展示已选中的图标。\n\n```yaml preview minHeight=\"750px\"\n- brick: eo-icon-select\n  properties:\n    value:\n      lib: antd\n      icon: star\n      theme: filled\n      color: \"#faad14\"\n  events:\n    change:\n      action: console.log\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.value = {\n#     lib: \"antd\",\n#     icon: \"star\",\n#     theme: \"filled\",\n#     color: \"#faad14\",\n#   };\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Disabled\n\n设置 disabled 为 true 禁用图标选择器，用户无法打开选择弹窗。\n\n```yaml preview\n- brick: eo-icon-select\n  properties:\n    disabled: true\n    value:\n      lib: antd\n      icon: heart\n      theme: filled\n      color: \"#ff4d4f\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-icon-select disabled id=\"brick-1\"></eo-icon-select>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = {\n#     lib: \"antd\",\n#     icon: \"heart\",\n#     theme: \"filled\",\n#     color: \"#ff4d4f\",\n#   };\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用图标选择器，配合 name、label、required、message 进行表单校验。\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        message:\n          required: 请选择一个图标\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-icon-select\n#     name=\"icon\"\n#     label=\"图标\"\n#     required\n#     id=\"brick-2\"\n#   ></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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.message = {\n#     required: \"请选择一个图标\",\n#   };\n# </script>\n# \n```\n\n### ThemeVariant\n\n通过 themeVariant 属性切换图标选择弹窗的主题样式。\n\n```yaml preview minHeight=\"750px\"\n- brick: eo-icon-select\n  properties:\n    themeVariant: elevo\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-icon-select theme-variant=\"elevo\" 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"
   },
   "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"
+    "doc": "---\ntagName: eo-upload-image\ndisplayName: WrappedEoUploadImage\ndescription: 上传图片构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-upload-image\n\n> 上传图片构件\n\n## Props\n\n| 属性         | 类型                                  | 必填 | 默认值 | 说明                    |\n| ------------ | ------------------------------------- | ---- | ------ | ----------------------- |\n| name         | `string \\| undefined`                 | 否   | -      | 字段名称                |\n| label        | `string \\| undefined`                 | 否   | -      | 字段说明                |\n| value        | `ImageData[] \\| undefined`            | 否   | -      | 值                      |\n| bucketName   | `string`                              | 是   | -      | 对象存储桶名字          |\n| maxCount     | `number \\| undefined`                 | 否   | -      | 最大上传数量            |\n| multiple     | `boolean \\| undefined`                | 否   | -      | 是否支持选定的多张图片  |\n| limitSize    | `number \\| undefined`                 | 否   | -      | 上传大小限制(单位为 MB) |\n| required     | `boolean \\| undefined`                | 否   | -      | 是否必填                |\n| message      | `Record<string, string> \\| undefined` | 否   | -      | 校验文本信息            |\n| variant      | `\"default\" \\| \"avatar\" \\| undefined`  | 否   | -      | 变体                    |\n| themeVariant | `\"default\" \\| \"elevo\" \\| undefined`   | 否   | -      | 主题变体                |\n\n## Events\n\n| 事件   | detail                                                                                                                                                                                   | 说明         |\n| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| change | `ImageData[]` — { uid: 文件唯一标识, name: 文件名, url: 图片地址, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \\| done \\| error）, errors: 错误信息列表 }[] | 值变化时触发 |\n\n## Examples\n\n### Basic\n\n展示上传图片的基本用法，支持多选并限制最大上传数量。\n\n```yaml preview\n- brick: eo-upload-image\n  properties:\n    bucketName: my-bucket\n    multiple: true\n    maxCount: 5\n    themeVariant: default\n    value: []\n  events:\n    change:\n      - action: console.log\n        args:\n          - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-image\n#   bucket-name=\"my-bucket\"\n#   multiple\n#   max-count=\"5\"\n#   theme-variant=\"default\"\n#   id=\"brick-1\"\n# ></eo-upload-image>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.value = [];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Avatar\n\n使用头像变体上传单张图片，并限制文件大小。\n\n```yaml preview\n- brick: eo-upload-image\n  properties:\n    bucketName: my-bucket\n    variant: avatar\n    limitSize: 2\n  events:\n    change:\n      - action: console.log\n        args:\n          - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-image\n#   bucket-name=\"my-bucket\"\n#   variant=\"avatar\"\n#   limit-size=\"2\"\n#   id=\"brick-1\"\n# ></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在表单中使用上传图片，展示字段名称、说明、必填校验及自定义校验文本。\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: image\n        required: true\n        message:\n          required: 请上传至少一张图片\n        bucketName: my-bucket\n        multiple: true\n        maxCount: 3\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=\"image\"\n#     required\n#     bucket-name=\"my-bucket\"\n#     multiple\n#     max-count=\"3\"\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.message = {\n#     required: \"请上传至少一张图片\",\n#   };\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+  },
+  "eo-switch": {
+    "doc": "---\ntagName: eo-switch\ndisplayName: WrappedEoSwitch\ndescription: 开关\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-switch\n\n> 开关\n\n## Props\n\n| 属性          | 类型                   | 必填 | 默认值 | 说明                                         |\n| ------------- | ---------------------- | ---- | ------ | -------------------------------------------- |\n| name          | `string`               | 否   | -      | 字段名称                                     |\n| label         | `string`               | 否   | -      | 字段文本                                     |\n| value         | `boolean`              | 否   | -      | 初始值                                       |\n| disabled      | `boolean`              | 否   | -      | 是否禁用                                     |\n| size          | `ComponentSize`        | 否   | -      | 按钮大小，目前只支持small和非small两种大小。 |\n| checkedText   | `string`               | 否   | -      | 选中时的文本                                 |\n| unCheckedText | `string`               | 否   | -      | 非选中时的文本                               |\n| checkedIcon   | `GeneralIconProps`     | 否   | -      | 选中时的图标                                 |\n| unCheckedIcon | `GeneralIconProps`     | 否   | -      | 非选中时的图标                               |\n| themeVariant  | `\"default\" \\| \"elevo\"` | 否   | -      | 主题变体                                     |\n\n## Events\n\n| 事件   | detail                                                  | 说明           |\n| ------ | ------------------------------------------------------- | -------------- |\n| switch | `boolean` — 开关当前状态，true 表示开启，false 表示关闭 | 开关改变时触发 |\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### Value\n\n通过 `value` 属性设置开关的初始状态。\n\n```yaml preview\n- brick: eo-switch\n  properties:\n    value: true\n    label: switch\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch value label=\"switch\"></eo-switch>\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通过 `checkedText`、`unCheckedText`、`checkedIcon`、`unCheckedIcon` 属性自定义开关的文本和图标。\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### Theme Variant\n\n```yaml preview\n- brick: eo-switch\n  properties:\n    themeVariant: elevo\n    label: switch\n    value: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-switch theme-variant=\"elevo\" label=\"switch\" value></eo-switch>\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"
+    "doc": "---\ntagName: eo-upload-file\ndisplayName: WrappedEoUploadFile\ndescription: 上传文件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-upload-file\n\n> 上传文件\n\n## Props\n\n| 属性               | 类型                                  | 必填 | 默认值                                               | 说明                                    |\n| ------------------ | ------------------------------------- | ---- | ---------------------------------------------------- | --------------------------------------- |\n| label              | `string \\| undefined`                 | 否   | -                                                    | 字段说明                                |\n| name               | `string \\| undefined`                 | 否   | -                                                    | 字段名称                                |\n| required           | `boolean \\| undefined`                | 否   | -                                                    | 是否必填                                |\n| message            | `Record<string, string> \\| undefined` | 否   | -                                                    | 校验文本信息                            |\n| value              | `FileData[] \\| undefined`             | 否   | -                                                    | 值                                      |\n| multiple           | `boolean \\| undefined`                | 否   | -                                                    | 是否支持多选                            |\n| accept             | `string \\| undefined`                 | 否   | -                                                    | 接受上传的文件类型，多个之间用 `,` 连接 |\n| maxCount           | `number \\| undefined`                 | 否   | -                                                    | 最大上传数量                            |\n| limitSize          | `number \\| undefined`                 | 否   | -                                                    | 上传大小限制(单位为 MB)                 |\n| buttonText         | `string \\| undefined`                 | 否   | -                                                    | 上传按钮文本                            |\n| buttonType         | `ButtonProps[\"type\"] \\| undefined`    | 否   | -                                                    | 上传按钮类型                            |\n| buttonIcon         | `GeneralIconProps`                    | 是   | `{ lib: \"antd\", icon: \"upload\", theme: \"outlined\" }` | 上传按钮图标                            |\n| overMaxCountMode   | `\"ignore\" \\| \"replace\"`               | 是   | `\"replace\"`                                          | 超出最大上传数量时文件的保留方式        |\n| uploadDraggable    | `boolean \\| undefined`                | 否   | -                                                    | 是否可以拖拽上传                        |\n| draggableUploadTip | `string \\| undefined`                 | 否   | -                                                    | 拖拽上传的提示信息                      |\n| autoUpload         | `boolean`                             | 是   | `false`                                              | 是否自动上传                            |\n| url                | `string \\| undefined`                 | 否   | -                                                    | 自动上传的地址                          |\n| method             | `string`                              | 是   | `\"POST\"`                                             | 自动上传的方法                          |\n| uploadName         | `string`                              | 是   | `\"file\"`                                             | 自动上传的文件参数名                    |\n| themeVariant       | `\"default\" \\| \"elevo\" \\| undefined`   | 否   | -                                                    | 主题变体                                |\n\n## Events\n\n| 事件   | detail                                                                                                                                                                   | 说明         |\n| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ |\n| change | `FileData[]` — { uid: 文件唯一标识, name: 文件名, file: 原始 File 对象, response: 上传响应内容, status: 上传状态（uploading \\| done \\| error）, errors: 错误信息列表 }[] | 值变化时触发 |\n\n## Examples\n\n### Basic\n\n展示上传文件的基本用法，包含按钮文本、类型和图标的自定义。\n\n```yaml preview\nbrick: eo-upload-file\nproperties:\n  buttonText: 选择文件\n  buttonType: primary\n  buttonIcon:\n    lib: antd\n    icon: paper-clip\n    theme: outlined\n  accept: .pdf,.docx,.xlsx\n  multiple: true\n  themeVariant: default\n  value: []\nevents:\n  change:\n    - action: console.log\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-file\n#   button-text=\"选择文件\"\n#   button-type=\"primary\"\n#   accept=\".pdf,.docx,.xlsx\"\n#   multiple\n#   theme-variant=\"default\"\n#   id=\"brick-1\"\n# ></eo-upload-file>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.buttonIcon = {\n#     lib: \"antd\",\n#     icon: \"paper-clip\",\n#     theme: \"outlined\",\n#   };\n#   brick_1.value = [];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Drag Upload\n\n展示拖拽上传功能，包含最大数量限制、文件大小限制和超出数量时的保留策略。\n\n```yaml preview\nbrick: eo-upload-file\nproperties:\n  style:\n    width: 360px\n  uploadDraggable: true\n  draggableUploadTip: 支持上传最多 3 个文件，每个不超过 10 MB\n  maxCount: 3\n  limitSize: 10\n  overMaxCountMode: replace\n  multiple: true\n  accept: image/*,.pdf\nevents:\n  change:\n    - action: console.log\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-file\n#   style=\"width: 360px\"\n#   upload-draggable\n#   draggable-upload-tip=\"支持上传最多 3 个文件，每个不超过 10 MB\"\n#   max-count=\"3\"\n#   limit-size=\"10\"\n#   over-max-count-mode=\"replace\"\n#   multiple\n#   accept=\"image/*,.pdf\"\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### Auto Upload\n\n展示自动上传功能，文件选择后立即上传到指定服务端地址。\n\n```yaml preview\nbrick: eo-upload-file\nproperties:\n  autoUpload: true\n  url: /api/upload\n  method: POST\n  uploadName: file\n  buttonText: 上传到服务器\nevents:\n  change:\n    - action: console.log\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-upload-file\n#   auto-upload\n#   url=\"/api/upload\"\n#   method=\"POST\"\n#   upload-name=\"file\"\n#   button-text=\"上传到服务器\"\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在表单中使用上传文件，展示字段名称、说明、必填校验及自定义校验文本。\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: attachment\n        required: true\n        message:\n          required: 请上传至少一个文件\n        style:\n          width: 360px\n        uploadDraggable: true\n        draggableUploadTip: 支持上传图片\n        maxCount: 2\n        multiple: true\n        accept: image/*\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=\"attachment\"\n#     required\n#     style=\"width: 360px\"\n#     upload-draggable\n#     draggable-upload-tip=\"支持上传图片\"\n#     max-count=\"2\"\n#     multiple\n#     accept=\"image/*\"\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.message = {\n#     required: \"请上传至少一个文件\",\n#   };\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"
+    "doc": "---\ntagName: eo-auto-complete\ndisplayName: WrappedEoAutoComplete\ndescription: 带候选项的输入框\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-auto-complete\n\n> 带候选项的输入框\n\n## Props\n\n| 属性            | 类型                          | 必填 | 默认值 | 说明                             |\n| --------------- | ----------------------------- | ---- | ------ | -------------------------------- |\n| name            | `string`                      | 否   | -      | 字段名称                         |\n| placeholder     | `string`                      | 否   | -      | 占位说明                         |\n| label           | `string`                      | 否   | -      | 字段文本                         |\n| inputStyle      | `React.CSSProperties`         | 否   | -      | 输入框样式                       |\n| disabled        | `boolean`                     | 否   | -      | 是否禁用                         |\n| required        | `boolean`                     | 否   | -      | 是否必填                         |\n| value           | `string`                      | 否   | -      | 输入框当前值                     |\n| options         | `string[] \\| OptionType[]`    | 否   | -      | 选项列表                         |\n| filterByCaption | `boolean`                     | 否   | -      | 搜索时是否根据caption过滤options |\n| validator       | `(value: any) => MessageBody` | 否   | -      | 表单项校验方法                   |\n| pattern         | `string`                      | 否   | -      | 正则校验规则                     |\n| message         | `Record<string, string>`      | 否   | -      | 校验文本信息                     |\n\n## Events\n\n| 事件   | detail                    | 说明       |\n| ------ | ------------------------- | ---------- |\n| change | `string` — 当前输入框的值 | 值改变事件 |\n\n## Slots\n\n| 名称            | 说明               |\n| --------------- | ------------------ |\n| options-toolbar | 下拉列表底部工具栏 |\n\n## Examples\n\n### Basic\n\n展示带候选项输入框的最基本用法，通过字符串数组提供候选选项。\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通过 `OptionType` 对象格式为每个选项添加 `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通过 `OptionGroup` 格式对选项进行分组展示，组内每个选项可包含 `label`、`value` 和 `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: 分组1\n        options:\n          - label: 选项3-1\n            value: 3-1\n            caption: 说明3-1\n          - label: 选项3-2\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-2\",\n#           value: \"3-2\",\n#           caption: \"说明3-2\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### filterByCaption\n\n设置 `filterByCaption` 为 `true`，搜索时同时匹配选项的 `caption` 字段。\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-2\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-2\",\n#           value: \"3-2\",\n#           caption: \"说明3-2\",\n#         },\n#       ],\n#     },\n#   ];\n# </script>\n# \n```\n\n### Value\n\n通过 `value` 属性设置输入框的默认值。\n\n```yaml preview minHeight=300px\n- brick: eo-auto-complete\n  properties:\n    value: Beijing\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete value=\"Beijing\" 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### Placeholder\n\n通过 `placeholder` 属性设置输入框的占位提示文字。\n\n```yaml preview minHeight=300px\n- brick: eo-auto-complete\n  properties:\n    placeholder: 请输入城市名称\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete placeholder=\"请输入城市名称\" 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### Input Style\n\n通过 `inputStyle` 属性自定义输入框的内联样式。\n\n```yaml preview minHeight=300px\n- brick: eo-auto-complete\n  properties:\n    inputStyle:\n      width: 300px\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.inputStyle = {\n#     width: \"300px\",\n#   };\n#   brick_1.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Disabled\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监听 `change` 事件获取用户输入或选中的实时值。\n\n```yaml preview minHeight=300px\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在 `eo-form` 中使用，通过 `name`、`label` 属性集成表单功能，并可配合 `required`、`pattern`、`message` 属性实现表单校验。\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-auto-complete\n      properties:\n        name: city\n        label: 城市\n        required: true\n        pattern: \"^[A-Za-z]+\"\n        message:\n          required: 请选择城市\n          pattern: 城市名称只能包含字母\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#     pattern=\"^[A-Za-z]+\"\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.message = {\n#     required: \"请选择城市\",\n#     pattern: \"城市名称只能包含字母\",\n#   };\n#   brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n# </script>\n# \n```\n\n### Validator\n\n通过 `validator` 属性自定义表单项的校验逻辑，返回 `null` 表示校验通过，返回包含 `message` 的对象表示校验失败。\n\n```yaml preview minHeight=400px\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n  children:\n    - brick: eo-auto-complete\n      properties:\n        name: city\n        label: 城市\n        options:\n          - Beijing\n          - Shanghai\n          - Guangzhou\n          - Shenzhen\n        validator: \"<% (value) => value && value.length > 10 ? { message: '城市名称不能超过10个字符' } : null %>\"\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-auto-complete name=\"city\" label=\"城市\" id=\"brick-2\"></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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.options = [\"Beijing\", \"Shanghai\", \"Guangzhou\", \"Shenzhen\"];\n#   brick_2.validator =\n#     \"<% (value) => value && value.length > 10 ? { message: '城市名称不能超过10个字符' } : null %>\";\n# </script>\n# \n```\n\n### Options Toolbar Slot\n\n通过 `options-toolbar` 插槽在下拉列表底部添加自定义工具栏内容。\n\n```yaml preview minHeight=400px\n- brick: eo-auto-complete\n  properties:\n    options:\n      - Beijing\n      - Shanghai\n      - Guangzhou\n      - Shenzhen\n  slots:\n    options-toolbar:\n      bricks:\n        - brick: span\n          properties:\n            textContent: 自定义工具栏\n            style:\n              padding: 4px 8px\n              color: \"#999\"\n              fontSize: 12px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-auto-complete id=\"brick-1\">\n#   <span\n#     slot=\"options-toolbar\"\n#     style=\"padding: 4px 8px; color: #999; font-size: 12px\"\n#   >\n#     自定义工具栏\n#   </span>\n# </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"
   },
   "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"
+    "doc": "---\ntagName: eo-time-picker\ndisplayName: WrappedEoTimePicker\ndescription: 时间选择器\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-time-picker\n\n> 时间选择器\n\n## Props\n\n| 属性        | 类型                       | 必填 | 默认值 | 说明                                                                                            |\n| ----------- | -------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------- |\n| name        | `string`                   | 否   | -      | 时间选择器字段名                                                                                |\n| label       | `string`                   | 否   | -      | 时间选择器说明                                                                                  |\n| value       | `string`                   | 否   | -      | 时间选择器的初始值                                                                              |\n| placeholder | `string`                   | 否   | -      | 时间选择器占位说明                                                                              |\n| message     | `Record<string, string>`   | 否   | -      | 校验文本信息                                                                                    |\n| disabled    | `boolean`                  | 否   | -      | 是否禁用                                                                                        |\n| required    | `boolean`                  | 否   | -      | 是否必填                                                                                        |\n| configProps | `Partial<TimePickerProps>` | 否   | -      | 透传 antd TimePicker 属性，详见 [timePickerProps](https://ant.design/components/time-picker-cn) |\n\n## Events\n\n| 事件   | detail                                  | 说明                           |\n| ------ | --------------------------------------- | ------------------------------ |\n| change | `string` — 格式化后的时间字符串         | 时间变化时触发                 |\n| open   | `string` — 面板打开时的当前时间值字符串 | 面板打开时触发，传出当前时间值 |\n| close  | `string` — 面板关闭时的当前时间值字符串 | 面板关闭时触发，传出当前时间值 |\n\n## Examples\n\n### Basic\n\n展示时间选择器的基本用法，包含初始值和占位说明。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-picker\n  properties:\n    label: 时间\n    placeholder: 选择时间\n    value: \"12:30:01\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"时间\"\n#   placeholder=\"选择时间\"\n#   value=\"12:30:01\"\n# ></eo-time-picker>\n# \n```\n\n### 事件监听\n\n展示监听 change、open、close 事件的用法。\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: 时间\n    placeholder: 选择时间\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"时间\"\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### 透传 antd 属性\n\n通过 configProps 透传 antd TimePicker 属性，自定义时间格式等配置。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-picker\n  properties:\n    label: 时间（时分）\n    placeholder: 选择时间\n    configProps:\n      format: \"HH:mm\"\n      allowClear: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"时间（时分）\"\n#   placeholder=\"选择时间\"\n#   id=\"brick-1\"\n# ></eo-time-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.configProps = {\n#     format: \"HH:mm\",\n#     allowClear: true,\n#   };\n# </script>\n# \n```\n\n### 禁用状态\n\n展示禁用状态下时间选择器的效果。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-picker\n  properties:\n    label: 时间\n    disabled: true\n    value: \"09:00:00\"\n    placeholder: 已禁用\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-picker\n#   label=\"时间\"\n#   disabled\n#   value=\"09:00:00\"\n#   placeholder=\"已禁用\"\n# ></eo-time-picker>\n# \n```\n\n### 表单集成\n\n在表单中使用时间选择器，支持 label、name、required 及自定义校验信息。\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        message:\n          required: 请选择时间\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-time-picker\n#     label=\"时间\"\n#     name=\"time\"\n#     required\n#     id=\"brick-2\"\n#   ></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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.message = {\n#     required: \"请选择时间\",\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"
+    "doc": "---\ntagName: eo-date-picker\ndisplayName: WrappedEoDatePicker\ndescription: 日期选择器\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-date-picker\n\n> 日期选择器\n\n## Props\n\n| 属性               | 类型                     | 必填 | 默认值 | 说明                                                                               |\n| ------------------ | ------------------------ | ---- | ------ | ---------------------------------------------------------------------------------- |\n| name               | `string`                 | 否   | -      | 日期选择器字段名                                                                   |\n| label              | `string`                 | 否   | -      | 日期选择器说明                                                                     |\n| value              | `string`                 | 否   | -      | 日期选择器的初始值                                                                 |\n| placeholder        | `string`                 | 否   | -      | 日期选择器占位说明                                                                 |\n| message            | `Record<string, string>` | 否   | -      | 校验文本信息                                                                       |\n| disabled           | `boolean`                | 否   | -      | 是否禁用                                                                           |\n| required           | `boolean`                | 否   | -      | 是否必填                                                                           |\n| showTime           | `boolean`                | 否   | -      | 是否显示时间，当设为 `true` 时，请同时设置 `format` 为 `YYYY-MM-DD HH:mm:ss`       |\n| format             | `string`                 | 否   | -      | 显示预览的格式，具体配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) |\n| picker             | `PickerMode`             | 否   | -      | 设置选择器类型，可选值：`date` \\| `week` \\| `month` \\| `quarter` \\| `year`         |\n| futureDateDisabled | `boolean`                | 否   | -      | 不可选择未来日期，优先级高于 `disabledDate`                                        |\n| disabledDate       | `DisabledDateType`       | 否   | -      | 不可选择的日期                                                                     |\n| useFastSelectBtn   | `boolean`                | 否   | -      | 启用快速切换按钮，显示上一个/当前/下一个的快速选项                                 |\n| inputStyle         | `CSSProperties`          | 否   | -      | 输入框样式                                                                         |\n\n## Events\n\n| 事件   | detail                          | 说明                                      |\n| ------ | ------------------------------- | ----------------------------------------- |\n| change | `string` — 格式化后的日期字符串 | 日期变化时触发                            |\n| ok     | `string` — 格式化后的日期字符串 | 点击确定按钮触发（showTime 为 true 使用） |\n\n## Examples\n\n### Basic\n\n展示日期选择器的基本用法。\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### 日期时间选择\n\n展示开启时间选择、指定格式并监听 ok 事件的用法。\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    placeholder: 选择日期时间\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#   placeholder=\"选择日期时间\"\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通过 picker 属性设置选择器类型（天/周/月/季度/年），并启用快速切换按钮；还可通过 inputStyle 自定义输入框宽度。\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: eo-date-picker\n  properties:\n    id: datePicker\n    useFastSelectBtn: true\n    inputStyle:\n      width: 200px\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\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 datePicker = document.getElementById(\"datePicker\");\n#   datePicker.inputStyle = {\n#     width: \"200px\",\n#   };\n# </script>\n# \n```\n\n### 禁用日期\n\n通过 disabledDate 禁止特定日期或时间段，通过 futureDateDisabled 禁止选择未来日期。\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    futureDateDisabled: true\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#   future-date-disabled\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### 禁用状态\n\n展示禁用状态下日期选择器的效果。\n\n```yaml preview minHeight=\"450px\"\n- brick: eo-date-picker\n  properties:\n    disabled: true\n    value: \"2024-01-15\"\n    placeholder: 已禁用\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-date-picker\n#   disabled\n#   value=\"2024-01-15\"\n#   placeholder=\"已禁用\"\n# ></eo-date-picker>\n# \n```\n\n### 表单集成\n\n在表单中使用日期选择器，支持 label、name、required 及自定义校验信息。\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        message:\n          required: 请选择日期\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-date-picker\n#     label=\"日期\"\n#     name=\"date\"\n#     required\n#     id=\"brick-2\"\n#   ></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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.message = {\n#     required: \"请选择日期\",\n#   };\n# </script>\n# \n```\n"
   },
   "eo-time-range-picker": {
-    "doc": "构件 `eo-time-range-picker`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  properties:\n    label: hello\n    name: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker label=\"hello\" name=\"time\"></eo-time-range-picker>\n# \n```\n\n### rangeType\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-radio\n  properties:\n    options:\n      - time\n      - date\n      - dateTime\n      - hmTime\n      - week\n      - month\n      - quarter\n      - year\n  events:\n    change:\n      - target: \"#rangePicker\"\n        properties:\n          rangeType: <% EVENT.detail.value %>\n- brick: eo-time-range-picker\n  properties:\n    label: hello\n    name: time\n    id: rangePicker\n    rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-time-range-picker\n#   label=\"hello\"\n#   name=\"time\"\n#   id=\"rangePicker\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     \"time\",\n#     \"date\",\n#     \"dateTime\",\n#     \"hmTime\",\n#     \"week\",\n#     \"month\",\n#     \"quarter\",\n#     \"year\",\n#   ];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     const brick = document.querySelector(\"#rangePicker\");\n#     brick.rangeType = \"<% EVENT.detail.value %>\";\n#   });\n# \n#   const rangePicker = document.getElementById(\"rangePicker\");\n#   rangePicker.rangeType = \"date\";\n# </script>\n# \n```\n\n### presetRanges\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  properties:\n    label: hello\n    name: time\n    rangeType: week\n    required: true\n    presetRanges:\n      - 本周\n      - 本月\n      - 本季度\n      - 今年\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"hello\"\n#   name=\"time\"\n#   required\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rangeType = \"week\";\n#   brick_1.presetRanges = [\"本周\", \"本月\", \"本季度\", \"今年\"];\n# </script>\n# \n```\n\n### validate\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-form\n  events:\n    values.change:\n      - action: console.log\n    validate.success:\n      - action: message.success\n        args:\n          - 表单提交成功\n    validate.error:\n      - action: message.error\n        args:\n          - 表单校验失败\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-time-range-picker\n          events:\n            change:\n              action: console.log\n          properties:\n            label: hello\n            name: time\n            required: true\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-time-range-picker\n#     label=\"hello\"\n#     name=\"time\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-time-range-picker>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: \"表单提交成功\" });\n#   });\n#   brick_1.addEventListener(\"validate.error\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"error\", message: \"表单校验失败\" });\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### selectNearDays\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  events:\n    - action: console.log\n  properties:\n    label: hello\n    name: time\n    selectNearDays: 10\n    rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"hello\"\n#   name=\"time\"\n#   select-near-days=\"10\"\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rangeType = \"date\";\n#   brick_1.addEventListener(\"0\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### Events\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  events:\n    - action: console.log\n  properties:\n    label: hello\n    name: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"hello\"\n#   name=\"time\"\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"0\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    values.change:\n      - action: console.log\n  children:\n    - brick: eo-time-range-picker\n      properties:\n        label: 时间\n        name: time\n        required: true\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-time-range-picker\n#     label=\"时间\"\n#     name=\"time\"\n#     required\n#   ></eo-time-range-picker>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-time-range-picker\ndisplayName: WrappedEoTimeRangePicker\ndescription: 时间区间选择器\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-time-range-picker\n\n> 时间区间选择器\n\n## Props\n\n| 属性             | 类型                                    | 必填 | 默认值 | 说明                                                                                                       |\n| ---------------- | --------------------------------------- | ---- | ------ | ---------------------------------------------------------------------------------------------------------- |\n| name             | `string`                                | 否   | -      | 时间段选择器字段名                                                                                         |\n| label            | `string`                                | 否   | -      | 时间段选择器说明                                                                                           |\n| value            | `TimeRange`                             | 否   | -      | 时间段选择器的初始值，格式为 `{ startTime, endTime }`                                                      |\n| required         | `boolean`                               | 否   | -      | 是否必填                                                                                                   |\n| rangeType        | `RangeType`                             | 否   | -      | 时间段类型，可选值：`time` \\| `hmTime` \\| `date` \\| `dateTime` \\| `week` \\| `month` \\| `quarter` \\| `year` |\n| placeholder      | `string \\| [string, string]`            | 否   | -      | 输入框提示文字，单时间段时为 `string`，范围时间段时为 `[string, string]`                                   |\n| inputStyle       | `React.CSSProperties`                   | 否   | -      | 输入框样式                                                                                                 |\n| selectNearDays   | `number`                                | 否   | -      | 仅在 `rangeType` 为 `date` 或 `dateTime` 时生效，限制只能选择最近 n 天（当前时间向前 n 天）                |\n| emitChangeOnInit | `boolean`                               | 否   | `true` | 是否在初始化完成后额外触发一次 change 事件。默认为 `true` 以兼容历史行为。                                 |\n| presetRanges     | `presetRangeType[]`                     | 否   | -      | 预设时间范围快捷选择。设置了 `selectNearDays` 时不生效；不同 `rangeType` 下可选值有限制。                  |\n| validator        | `(value: any) => MessageBody \\| string` | 否   | -      | 自定义校验函数，返回错误信息字符串或 MessageBody 对象，返回空字符串表示校验通过。                          |\n\n## Events\n\n| 事件   | detail                                                               | 说明             |\n| ------ | -------------------------------------------------------------------- | ---------------- |\n| change | `TimeRange` — { startTime: 开始时间字符串, endTime: 结束时间字符串 } | 时间段变化时触发 |\n\n## Examples\n\n### Basic\n\n展示时间区间选择器的基本用法。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  properties:\n    label: 时间段\n    name: time\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker label=\"时间段\" name=\"time\"></eo-time-range-picker>\n# \n```\n\n### 区间类型\n\n通过 rangeType 属性切换不同的时间段类型（时间/日期/日期时间/周/月/季度/年）。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-radio\n  properties:\n    options:\n      - time\n      - date\n      - dateTime\n      - hmTime\n      - week\n      - month\n      - quarter\n      - year\n  events:\n    change:\n      - target: \"#rangePicker\"\n        properties:\n          rangeType: <% EVENT.detail.value %>\n- brick: eo-time-range-picker\n  properties:\n    label: 时间段\n    name: time\n    id: rangePicker\n    rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-radio id=\"brick-1\"></eo-radio>\n# <eo-time-range-picker\n#   label=\"时间段\"\n#   name=\"time\"\n#   id=\"rangePicker\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.options = [\n#     \"time\",\n#     \"date\",\n#     \"dateTime\",\n#     \"hmTime\",\n#     \"week\",\n#     \"month\",\n#     \"quarter\",\n#     \"year\",\n#   ];\n#   brick_1.addEventListener(\"change\", (e) => {\n#     const brick = document.querySelector(\"#rangePicker\");\n#     brick.rangeType = \"<% EVENT.detail.value %>\";\n#   });\n# \n#   const rangePicker = document.getElementById(\"rangePicker\");\n#   rangePicker.rangeType = \"date\";\n# </script>\n# \n```\n\n### 预设时间范围\n\n通过 presetRanges 属性设置快捷选择按钮，方便用户快速选择常用时间段。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  properties:\n    label: 时间段\n    name: time\n    rangeType: week\n    required: true\n    presetRanges:\n      - 本周\n      - 本月\n      - 本季度\n      - 今年\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"时间段\"\n#   name=\"time\"\n#   required\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rangeType = \"week\";\n#   brick_1.presetRanges = [\"本周\", \"本月\", \"本季度\", \"今年\"];\n# </script>\n# \n```\n\n### 最近 N 天\n\n通过 selectNearDays 属性限制只能选择最近 n 天范围内的日期（rangeType 为 date 或 dateTime 时有效）。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  events:\n    change:\n      action: console.log\n  properties:\n    label: 最近 10 天\n    name: time\n    selectNearDays: 10\n    rangeType: date\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"最近 10 天\"\n#   name=\"time\"\n#   select-near-days=\"10\"\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rangeType = \"date\";\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### 初始值与输入框样式\n\n通过 value 设置初始时间段，通过 inputStyle 自定义输入框样式。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-time-range-picker\n  properties:\n    label: 时间段\n    name: time\n    rangeType: date\n    value:\n      startTime: \"2024-01-01\"\n      endTime: \"2024-01-31\"\n    inputStyle:\n      width: 300px\n    placeholder:\n      - 开始日期\n      - 结束日期\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-time-range-picker\n#   label=\"时间段\"\n#   name=\"time\"\n#   id=\"brick-1\"\n# ></eo-time-range-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.rangeType = \"date\";\n#   brick_1.value = {\n#     startTime: \"2024-01-01\",\n#     endTime: \"2024-01-31\",\n#   };\n#   brick_1.inputStyle = {\n#     width: \"300px\",\n#   };\n#   brick_1.placeholder = [\"开始日期\", \"结束日期\"];\n# </script>\n# \n```\n\n### 自定义校验\n\n通过 validator 属性自定义校验逻辑，返回错误信息时显示校验失败。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: message.success\n        args:\n          - 表单提交成功\n    validate.error:\n      - action: message.error\n        args:\n          - 表单校验失败\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-time-range-picker\n          events:\n            change:\n              action: console.log\n          properties:\n            label: 时间段\n            name: time\n            required: true\n            emitChangeOnInit: false\n            validator: \"<% (value) => value && value.startTime && value.endTime ? '' : '请选择完整的时间段' %>\"\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-time-range-picker\n#     label=\"时间段\"\n#     name=\"time\"\n#     required\n#     id=\"brick-2\"\n#   ></eo-time-range-picker>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"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.validator =\n#     \"<% (value) => value && value.startTime && value.endTime ? '' : '请选择完整的时间段' %>\";\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### 表单集成\n\n在表单中使用时间区间选择器，结合 name、label、required 进行完整的表单提交。\n\n```yaml preview minHeight=\"400px\"\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    values.change:\n      - action: console.log\n  children:\n    - brick: eo-time-range-picker\n      properties:\n        label: 时间段\n        name: time\n        required: true\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-time-range-picker\n#     label=\"时间段\"\n#     name=\"time\"\n#     required\n#   ></eo-time-range-picker>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"values.change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
   },
   "eo-color-picker": {
-    "doc": "构件 `eo-color-picker`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: eo-color-picker\nevents:\n  change:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker id=\"brick-1\"></eo-color-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# </script>\n# \n```\n\n### Size\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    justifyContent: start\n    gap: 20px\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-color-picker\n          properties:\n            size: small\n            value: red\n        - brick: eo-color-picker\n          properties:\n            size: medium\n            value: \"#36b545\"\n        - brick: eo-color-picker\n          properties:\n            size: large\n            value: rgb(59, 52, 255)\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout justify-content=\"start\" gap=\"20px\">\n#   <eo-color-picker value=\"red\" id=\"brick-1\"></eo-color-picker>\n#   <eo-color-picker value=\"#36b545\" id=\"brick-2\"></eo-color-picker>\n#   <eo-color-picker value=\"rgb(59, 52, 255)\" id=\"brick-3\"></eo-color-picker>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.size = \"small\";\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.size = \"medium\";\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.size = \"large\";\n# </script>\n# \n```\n\n### ShowText\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    showText: true\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker show-text id=\"brick-1\"></eo-color-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# </script>\n# \n```\n\n### AllowClear\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    allowClear: true\n    defaultValue: \"#f5a623\"\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker\n#   allow-clear\n#   default-value=\"#f5a623\"\n#   id=\"brick-1\"\n# ></eo-color-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# </script>\n# \n```\n\n### Formats\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    justifyContent: start\n    gap: 20px\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-color-picker\n          properties:\n            format: hex\n            value: \"#FCFA0E\"\n        - brick: eo-color-picker\n          properties:\n            format: rgb\n            value: rgb(80, 227, 194)\n        - brick: eo-color-picker\n          properties:\n            format: hsb\n            value: hsb(215, 91%, 100%)\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout justify-content=\"start\" gap=\"20px\">\n#   <eo-color-picker value=\"#FCFA0E\" id=\"brick-1\"></eo-color-picker>\n#   <eo-color-picker value=\"rgb(80, 227, 194)\" id=\"brick-2\"></eo-color-picker>\n#   <eo-color-picker value=\"hsb(215, 91%, 100%)\" id=\"brick-3\"></eo-color-picker>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.format = \"hex\";\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.format = \"rgb\";\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.format = \"hsb\";\n# </script>\n# \n```\n\n### With Form\n\n```yaml preview\n- brick: form.general-form\n  events:\n    validate.success:\n      - action: console.log\n    validate.error:\n      - action: console.log\n  slots:\n    \"\":\n      type: bricks\n      bricks:\n        - brick: eo-color-picker\n          properties:\n            name: color\n            label: 颜色\n            required: true\n            defaultValue: \"#1677FF\"\n            showText: true\n          events:\n            change:\n              action: console.log\n        - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <form.general-form id=\"brick-1\">\n#   <eo-color-picker\n#     name=\"color\"\n#     label=\"颜色\"\n#     required\n#     default-value=\"#1677FF\"\n#     show-text\n#     id=\"brick-2\"\n#   ></eo-color-picker>\n#   <eo-submit-buttons></eo-submit-buttons>\n# </form.general-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"validate.success\", (e) => {\n#     console.log(e.detail);\n#   });\n#   brick_1.addEventListener(\"validate.error\", (e) => {\n#     console.log(e.detail);\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n"
+    "doc": "---\ntagName: eo-color-picker\ndisplayName: WrappedEoColorPicker\ndescription: 颜色选择器\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-color-picker\n\n> 颜色选择器\n\n## Props\n\n| 属性         | 类型                             | 必填 | 默认值   | 说明                                                                                             |\n| ------------ | -------------------------------- | ---- | -------- | ------------------------------------------------------------------------------------------------ |\n| name         | `string`                         | 否   | -        | 字段名称                                                                                         |\n| label        | `string`                         | 否   | -        | 字段说明                                                                                         |\n| value        | `string`                         | 否   | -        | 值                                                                                               |\n| defaultValue | `string \\| Color`                | 否   | -        | 颜色默认的值                                                                                     |\n| required     | `boolean`                        | 否   | -        | 是否必填                                                                                         |\n| allowClear   | `boolean`                        | 否   | -        | 允许清除选择的颜色                                                                               |\n| size         | `\"small\" \\| \"middle\" \\| \"large\"` | 否   | `middle` | 设置触发器大小                                                                                   |\n| showText     | `boolean`                        | 否   | -        | 显示颜色文本                                                                                     |\n| disabled     | `boolean`                        | 否   | -        | 是否禁用                                                                                         |\n| format       | `\"rgb\" \\| \"hex\" \\| \"hsb\"`        | 否   | `hex`    | 颜色格式                                                                                         |\n| configProps  | `Partial<ColorPickerProps>`      | 否   | -        | 透传 antd ColorPicker 属性 [ColorPickerProps](https://ant.design/components/color-picker-cn#api) |\n\n## Events\n\n| 事件   | detail                                                                                          | 说明                                       |\n| ------ | ----------------------------------------------------------------------------------------------- | ------------------------------------------ |\n| change | `string \\| undefined` — 选中的颜色值，格式由 format 属性决定（hex/rgb/hsb），清除时为 undefined | 颜色变化事件, 返回值格式和`format`格式一致 |\n\n## Examples\n\n### Basic\n\n基础用法，选择颜色后通过 change 事件获取颜色值。\n\n```yaml preview\nbrick: eo-color-picker\nevents:\n  change:\n    action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker id=\"brick-1\"></eo-color-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# </script>\n# \n```\n\n### Size\n\n通过 size 属性设置颜色选择器触发器的尺寸大小。\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    justifyContent: start\n    gap: 20px\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-color-picker\n          properties:\n            size: small\n            value: \"#ff4d4f\"\n        - brick: eo-color-picker\n          properties:\n            size: middle\n            value: \"#36b545\"\n        - brick: eo-color-picker\n          properties:\n            size: large\n            value: \"#1677ff\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout justify-content=\"start\" gap=\"20px\">\n#   <eo-color-picker value=\"#ff4d4f\" id=\"brick-1\"></eo-color-picker>\n#   <eo-color-picker value=\"#36b545\" id=\"brick-2\"></eo-color-picker>\n#   <eo-color-picker value=\"#1677ff\" id=\"brick-3\"></eo-color-picker>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.size = \"small\";\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.size = \"middle\";\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.size = \"large\";\n# </script>\n# \n```\n\n### ShowText\n\n设置 showText 为 true，在颜色选择器旁边显示当前颜色的文本值。\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    showText: true\n    value: \"#1677ff\"\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker show-text value=\"#1677ff\" id=\"brick-1\"></eo-color-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# </script>\n# \n```\n\n### AllowClear\n\n设置 allowClear 为 true，允许用户清除已选颜色；结合 defaultValue 设置初始颜色。\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    allowClear: true\n    defaultValue: \"#f5a623\"\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker\n#   allow-clear\n#   default-value=\"#f5a623\"\n#   id=\"brick-1\"\n# ></eo-color-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# </script>\n# \n```\n\n### Formats\n\n通过 format 属性控制颜色输出格式，支持 hex、rgb 和 hsb 三种格式。\n\n```yaml preview\n- brick: eo-flex-layout\n  properties:\n    justifyContent: start\n    gap: 20px\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-color-picker\n          properties:\n            format: hex\n            value: \"#FCFA0E\"\n            showText: true\n        - brick: eo-color-picker\n          properties:\n            format: rgb\n            value: \"rgb(80, 227, 194)\"\n            showText: true\n        - brick: eo-color-picker\n          properties:\n            format: hsb\n            value: \"hsb(215, 91%, 100%)\"\n            showText: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-flex-layout justify-content=\"start\" gap=\"20px\">\n#   <eo-color-picker value=\"#FCFA0E\" show-text id=\"brick-1\"></eo-color-picker>\n#   <eo-color-picker\n#     value=\"rgb(80, 227, 194)\"\n#     show-text\n#     id=\"brick-2\"\n#   ></eo-color-picker>\n#   <eo-color-picker\n#     value=\"hsb(215, 91%, 100%)\"\n#     show-text\n#     id=\"brick-3\"\n#   ></eo-color-picker>\n# </eo-flex-layout>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.format = \"hex\";\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.format = \"rgb\";\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.format = \"hsb\";\n# </script>\n# \n```\n\n### Disabled\n\n设置 disabled 为 true 禁用颜色选择器，用户无法进行交互。\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    disabled: true\n    value: \"#1677ff\"\n    showText: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker disabled value=\"#1677ff\" show-text></eo-color-picker>\n# \n```\n\n### ConfigProps\n\n通过 configProps 透传 antd ColorPicker 的高级属性，例如设置预设颜色。\n\n```yaml preview\n- brick: eo-color-picker\n  properties:\n    showText: true\n    configProps:\n      presets:\n        - label: 推荐颜色\n          colors:\n            - \"#F5222D\"\n            - \"#FA8C16\"\n            - \"#FADB14\"\n            - \"#52C41A\"\n            - \"#1677FF\"\n            - \"#722ED1\"\n  events:\n    change:\n      action: console.log\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-color-picker show-text id=\"brick-1\"></eo-color-picker>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.configProps = {\n#     presets: [\n#       {\n#         label: \"推荐颜色\",\n#         colors: [\n#           \"#F5222D\",\n#           \"#FA8C16\",\n#           \"#FADB14\",\n#           \"#52C41A\",\n#           \"#1677FF\",\n#           \"#722ED1\",\n#         ],\n#       },\n#     ],\n#   };\n#   brick_1.addEventListener(\"change\", (e) => {\n#     console.log(e.detail);\n#   });\n# </script>\n# \n```\n\n### With Form\n\n在表单中使用颜色选择器，配合 name、label、required 进行表单校验。\n\n```yaml preview\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n    validate.error:\n      - action: console.log\n  children:\n    - brick: eo-color-picker\n      properties:\n        name: color\n        label: 颜色\n        required: true\n        defaultValue: \"#1677FF\"\n        showText: true\n      events:\n        change:\n          action: console.log\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-color-picker\n#     name=\"color\"\n#     label=\"颜色\"\n#     required\n#     default-value=\"#1677FF\"\n#     show-text\n#     id=\"brick-2\"\n#   ></eo-color-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(\"validate.error\", (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-form-item": {
+    "doc": "---\ntagName: eo-form-item\ndisplayName: WrappedEoFormItem\ndescription: 表单项构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-form-item\n\n> 表单项构件\n\n## Props\n\n| 属性           | 类型                          | 必填 | 默认值       | 说明                                                                 |\n| -------------- | ----------------------------- | ---- | ------------ | -------------------------------------------------------------------- |\n| name           | `string`                      | 否   | -            | 字段名称                                                             |\n| label          | `string`                      | 否   | -            | 标签文字                                                             |\n| pattern        | `string`                      | 否   | -            | 正则校验规则                                                         |\n| message        | `Record<string, string>`      | 否   | -            | 校验失败时的提示信息                                                 |\n| type           | `string`                      | 否   | -            | 校验类型                                                             |\n| max            | `number`                      | 否   | -            | 表单校验最大值（当 type 为 number 时表示最大数值，否则表示最大长度） |\n| min            | `number`                      | 否   | -            | 表单校验最小值（当 type 为 number 时表示最小数值，否则表示最小长度） |\n| required       | `boolean`                     | 否   | -            | 表单项是否为必填                                                     |\n| value          | `string`                      | 否   | -            | 初始值                                                               |\n| valuePropsName | `string`                      | 否   | `\"value\"`    | 子构件中对应值的属性名                                               |\n| layout         | `Layout`                      | 否   | -            | 布局方式                                                             |\n| size           | `ComponentSize`               | 否   | -            | 尺寸                                                                 |\n| trim           | `any`                         | 是   | `true`       | 是否自动去除前后的空白字符                                           |\n| trigger        | `string`                      | 是   | `\"onChange\"` | 事件触发方法名                                                       |\n| validator      | `(value: any) => MessageBody` | 否   | -            | 表单项校验方法                                                       |\n| needValidate   | `boolean`                     | 否   | -            | 值变化时是否主动触发校验                                             |\n\n## Slots\n\n| 名称      | 说明       |\n| --------- | ---------- |\n| (default) | 表单项内容 |\n\n## Examples\n\n### Basic\n\n展示表单项的基本用法，包含必填、最大/最小长度校验。\n\n```yaml preview\n- brick: eo-form\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-form-item\n          properties:\n            name: username\n            label: 用户名\n            required: true\n            max: 20\n            min: 2\n            message:\n              required: 用户名不能为空\n              max: 用户名不能超过 20 个字符\n              min: 用户名至少 2 个字符\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入用户名\n        - brick: eo-submit-buttons\n          properties:\n            submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form>\n#   <eo-form-item\n#     name=\"username\"\n#     label=\"用户名\"\n#     required\n#     max=\"20\"\n#     min=\"2\"\n#     id=\"brick-1\"\n#   >\n#     <eo-input placeholder=\"请输入用户名\"></eo-input>\n#   </eo-form-item>\n#   <eo-submit-buttons submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.message = {\n#     required: \"用户名不能为空\",\n#     max: \"用户名不能超过 20 个字符\",\n#     min: \"用户名至少 2 个字符\",\n#   };\n# </script>\n# \n```\n\n### Validation\n\n演示正则校验（pattern）、自定义校验器（validator）以及类型校验（type）的用法。\n\n```yaml preview\n- brick: eo-form\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-form-item\n          properties:\n            name: email\n            label: 邮箱\n            required: true\n            pattern: \"^[\\\\w.-]+@[\\\\w.-]+\\\\.\\\\w+$\"\n            message:\n              required: 邮箱不能为空\n              pattern: 邮箱格式不正确\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入邮箱\n        - brick: eo-form-item\n          properties:\n            name: age\n            label: 年龄\n            type: number\n            min: 1\n            max: 120\n            message:\n              min: 年龄不能小于 1\n              max: 年龄不能超过 120\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入年龄\n        - brick: eo-form-item\n          properties:\n            name: code\n            label: 编码\n            validator: \"<% (value) => value && /^[A-Z]/.test(value) ? null : { message: '编码必须以大写字母开头' } %>\"\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入编码\n        - brick: eo-submit-buttons\n          properties:\n            submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form>\n#   <eo-form-item\n#     name=\"email\"\n#     label=\"邮箱\"\n#     required\n#     pattern=\"^[\\w.-]+@[\\w.-]+\\.\\w+$\"\n#     id=\"brick-1\"\n#   >\n#     <eo-input placeholder=\"请输入邮箱\"></eo-input>\n#   </eo-form-item>\n#   <eo-form-item\n#     name=\"age\"\n#     label=\"年龄\"\n#     type=\"number\"\n#     min=\"1\"\n#     max=\"120\"\n#     id=\"brick-2\"\n#   >\n#     <eo-input placeholder=\"请输入年龄\"></eo-input>\n#   </eo-form-item>\n#   <eo-form-item name=\"code\" label=\"编码\" id=\"brick-3\">\n#     <eo-input placeholder=\"请输入编码\"></eo-input>\n#   </eo-form-item>\n#   <eo-submit-buttons submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.message = {\n#     required: \"邮箱不能为空\",\n#     pattern: \"邮箱格式不正确\",\n#   };\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.message = {\n#     min: \"年龄不能小于 1\",\n#     max: \"年龄不能超过 120\",\n#   };\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.validator =\n#     \"<% (value) => value && /^[A-Z]/.test(value) ? null : { message: '编码必须以大写字母开头' } %>\";\n# </script>\n# \n```\n\n### Initial Value and ValuePropsName\n\n展示 value 初始值和 valuePropsName 的使用方式，以及 trim 自动去空格特性。\n\n```yaml preview\n- brick: eo-form\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-form-item\n          properties:\n            name: city\n            label: 城市\n            value: Beijing\n            valuePropsName: value\n            trim: true\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入城市\n        - brick: eo-form-item\n          properties:\n            name: isActive\n            label: 是否激活\n            valuePropsName: checked\n            needValidate: false\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-switch\n        - brick: eo-submit-buttons\n          properties:\n            submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form>\n#   <eo-form-item\n#     name=\"city\"\n#     label=\"城市\"\n#     value=\"Beijing\"\n#     value-props-name=\"value\"\n#     trim=\"true\"\n#   >\n#     <eo-input placeholder=\"请输入城市\"></eo-input>\n#   </eo-form-item>\n#   <eo-form-item name=\"isActive\" label=\"是否激活\" value-props-name=\"checked\">\n#     <eo-switch></eo-switch>\n#   </eo-form-item>\n#   <eo-submit-buttons submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n```\n\n### Layout and Size\n\n演示表单项的不同布局方式和尺寸设置，以及通过 trigger 指定事件触发方法名。\n\n```yaml preview\n- brick: eo-form\n  properties:\n    layout: horizontal\n  slots:\n    \"\":\n      bricks:\n        - brick: eo-form-item\n          properties:\n            name: name\n            label: 姓名\n            required: true\n            layout: horizontal\n            size: large\n            trigger: onChange\n          slots:\n            \"\":\n              bricks:\n                - brick: eo-input\n                  properties:\n                    placeholder: 请输入姓名\n        - brick: eo-submit-buttons\n          properties:\n            submitText: 提交\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form layout=\"horizontal\">\n#   <eo-form-item\n#     name=\"name\"\n#     label=\"姓名\"\n#     required\n#     layout=\"horizontal\"\n#     size=\"large\"\n#     trigger=\"onChange\"\n#   >\n#     <eo-input placeholder=\"请输入姓名\"></eo-input>\n#   </eo-form-item>\n#   <eo-submit-buttons submit-text=\"提交\"></eo-submit-buttons>\n# </eo-form>\n# \n```\n"
   },
   "eo-input": {
-    "doc": "表单输入框构件。\n\n```yaml preview\n- brick: eo-input\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input></eo-input>\n# \n```\n\n## Examples\n\n### Label\n\n```yaml preview\n- brick: eo-input\n  properties:\n    label: 输入框\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input label=\"输入框\"></eo-input>\n# \n```\n\n### Value\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\"></eo-input>\n# \n```\n\n### Disabled\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n    disabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\" disabled></eo-input>\n# \n```\n\n### Clearable\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n    clearable: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\" clearable></eo-input>\n# \n```\n\n### Placeholder\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: This is placeholder...\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"This is placeholder...\"></eo-input>\n# \n```\n\n### max length\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: max length = 5\n    maxLength: 5\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"max length = 5\" max-length=\"5\"></eo-input>\n# \n```\n\n### Type\n\n```yaml preview\n- brick: eo-input\n  properties:\n    label: password\n    type: password\n- brick: eo-input\n  properties:\n    label: date\n    type: date\n- brick: eo-input\n  properties:\n    label: color\n    type: color\n- brick: eo-input\n  properties:\n    label: search\n    type: search\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input label=\"password\" type=\"password\"></eo-input>\n# <eo-input label=\"date\" type=\"date\"></eo-input>\n# <eo-input label=\"color\" type=\"color\"></eo-input>\n# <eo-input label=\"search\" type=\"search\"></eo-input>\n# \n```\n\n### Size\n\n```yaml preview\n- brick: eo-input\n  properties:\n    size: large\n    placeholder: large\n- brick: eo-input\n  properties:\n    size: medium\n    placeholder: medium\n- brick: eo-input\n  properties:\n    size: small\n    placeholder: small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input size=\"large\" placeholder=\"large\"></eo-input>\n# <eo-input size=\"medium\" placeholder=\"medium\"></eo-input>\n# <eo-input size=\"small\" placeholder=\"small\"></eo-input>\n# \n```\n\n### Input Style\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: \"width: 180px\"\n    inputStyle:\n      width: 180px\n- brick: eo-input\n  properties:\n    placeholder: \"width: 250px\"\n    inputStyle:\n      width: 250px\n- brick: eo-input\n  properties:\n    placeholder: \"border style\"\n    inputStyle:\n      border: \"1px solid #8b2121\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"width: 180px\" id=\"brick-1\"></eo-input>\n# <eo-input placeholder=\"width: 250px\" id=\"brick-2\"></eo-input>\n# <eo-input placeholder=\"border style\" id=\"brick-3\"></eo-input>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.inputStyle = {\n#     width: \"180px\",\n#   };\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.inputStyle = {\n#     width: \"250px\",\n#   };\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.inputStyle = {\n#     border: \"1px solid #8b2121\",\n#   };\n# </script>\n# \n```\n\n### Event\n\n```yaml preview\n- brick: eo-input\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-input id=\"brick-1\"></eo-input>\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### Slot\n\n```yaml preview gap\n- brick: eo-input\n  properties:\n    placeholder: prefix slot\n  slots:\n    prefix:\n      bricks:\n        - brick: eo-icon\n          properties:\n            icon: search\n            lib: antd\n            theme: outlined\n- brick: eo-input\n  properties:\n    placeholder: suffix slot\n  slots:\n    suffix:\n      bricks:\n        - brick: eo-icon\n          properties:\n            icon: search\n            lib: antd\n            theme: outlined\n- brick: eo-input\n  properties:\n    placeholder: addon slot\n  slots:\n    addonBefore:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: https://\n    addonAfter:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: .com\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"prefix slot\">\n#   <eo-icon slot=\"prefix\" icon=\"search\" lib=\"antd\" theme=\"outlined\"></eo-icon>\n# </eo-input>\n# <eo-input placeholder=\"suffix slot\">\n#   <eo-icon slot=\"suffix\" icon=\"search\" lib=\"antd\" theme=\"outlined\"></eo-icon>\n# </eo-input>\n# <eo-input placeholder=\"addon slot\">\n#   <span slot=\"addonBefore\">https://</span>\n#   <span slot=\"addonAfter\">.com</span>\n# </eo-input>\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-input\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-input label=\"输入框\" name=\"text\" required></eo-input>\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"
+    "doc": "---\ntagName: eo-input\ndisplayName: WrappedEoInput\ndescription: 通用输入框构件\ncategory: form-input-basic\nsource: \"@next-bricks/form\"\n---\n\n# eo-input\n\n> 通用输入框构件\n\n## Props\n\n| 属性        | 类型                          | 必填 | 默认值     | 说明                                                 |\n| ----------- | ----------------------------- | ---- | ---------- | ---------------------------------------------------- |\n| name        | `string`                      | 否   | -          | 字段名称                                             |\n| label       | `string`                      | 否   | -          | 标签文字                                             |\n| value       | `string`                      | 否   | -          | 输入框值                                             |\n| placeholder | `string`                      | 否   | -          | 占位说明                                             |\n| disabled    | `boolean`                     | 否   | -          | 是否禁用                                             |\n| readonly    | `boolean`                     | 否   | -          | 是否只读                                             |\n| clearable   | `boolean`                     | 否   | -          | 是否显示清除按钮                                     |\n| autoFocus   | `boolean`                     | 否   | -          | 是否自动聚焦                                         |\n| type        | `InputType`                   | 否   | `\"text\"`   | 类型                                                 |\n| size        | `ComponentSize`               | 否   | `\"medium\"` | 大小                                                 |\n| minLength   | `number`                      | 否   | -          | 最小长度                                             |\n| maxLength   | `number`                      | 否   | -          | 最大长度（用户无法输入超过此最大长度的字符串）       |\n| min         | `number`                      | 否   | -          | 表单校验最小长度（当 type 为 number 时，表示最小值） |\n| max         | `number`                      | 否   | -          | 表单校验最大长度（当 type 为 number 时，表示最大值） |\n| pattern     | `string`                      | 否   | -          | 正则校验规则                                         |\n| required    | `boolean`                     | 否   | -          | 是否必填                                             |\n| message     | `Record<string, string>`      | 否   | -          | 错误时显示消息                                       |\n| inputStyle  | `React.CSSProperties`         | 否   | -          | 输入框样式                                           |\n| validator   | `(value: any) => MessageBody` | 否   | -          | 表单项校验方法                                       |\n\n## Events\n\n| 事件   | detail                | 说明       |\n| ------ | --------------------- | ---------- |\n| change | `string` — 当前输入值 | 值改变事件 |\n\n## Methods\n\n| 方法       | 签名         | 说明             |\n| ---------- | ------------ | ---------------- |\n| focusInput | `() => void` | 使输入框获得焦点 |\n| blurInput  | `() => void` | 使输入框失去焦点 |\n\n## Slots\n\n| 名称        | 说明           |\n| ----------- | -------------- |\n| addonBefore | 输入框前置标签 |\n| addonAfter  | 输入框后置标签 |\n| prefix      | 输入框前缀图标 |\n| suffix      | 输入框后缀图标 |\n\n## CSS Parts\n\n| 名称          | 说明                                       |\n| ------------- | ------------------------------------------ |\n| addon-wrapper | 包裹输入组件、前缀、后缀、前置和后置的容器 |\n| affix-wrapper | 包裹输入组件、前缀和后缀的容器             |\n| input         | 输入组件                                   |\n| clear-icon    | 清除按钮                                   |\n| prefix        | 输入框前缀容器                             |\n| suffix        | 输入框后缀容器                             |\n| before-addon  | 输入框前置容器                             |\n| after-addon   | 输入框后置容器                             |\n\n## Examples\n\n### Basic\n\n展示通用输入框的最基本用法。\n\n```yaml preview\n- brick: eo-input\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input></eo-input>\n# \n```\n\n### Label\n\n通过 `label` 属性为输入框设置标签文字。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    label: 输入框\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input label=\"输入框\"></eo-input>\n# \n```\n\n### Value\n\n通过 `value` 属性设置输入框的默认值。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\"></eo-input>\n# \n```\n\n### Placeholder\n\n通过 `placeholder` 属性设置占位提示文字。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: This is placeholder...\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"This is placeholder...\"></eo-input>\n# \n```\n\n### Disabled\n\n设置 `disabled` 属性禁用输入框。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n    disabled: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\" disabled></eo-input>\n# \n```\n\n### Readonly\n\n设置 `readonly` 属性使输入框只读。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Read only value\n    readonly: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Read only value\" readonly></eo-input>\n# \n```\n\n### Clearable\n\n设置 `clearable` 属性在输入框非空时显示清除按钮。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    value: Default Value\n    clearable: true\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input value=\"Default Value\" clearable></eo-input>\n# \n```\n\n### Max Length\n\n通过 `maxLength` 属性限制用户最多输入的字符数。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: max length = 5\n    maxLength: 5\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"max length = 5\" max-length=\"5\"></eo-input>\n# \n```\n\n### Type\n\n通过 `type` 属性切换输入框类型，支持 `password`、`date`、`color`、`number`、`search` 等。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    label: password\n    type: password\n- brick: eo-input\n  properties:\n    label: date\n    type: date\n- brick: eo-input\n  properties:\n    label: color\n    type: color\n- brick: eo-input\n  properties:\n    label: number\n    type: number\n    min: 0\n    max: 100\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input label=\"password\" type=\"password\"></eo-input>\n# <eo-input label=\"date\" type=\"date\"></eo-input>\n# <eo-input label=\"color\" type=\"color\"></eo-input>\n# <eo-input label=\"number\" type=\"number\" min=\"0\" max=\"100\"></eo-input>\n# \n```\n\n### Size\n\n通过 `size` 属性控制输入框大小，支持 `large`、`medium`（默认）和 `small`。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    size: large\n    placeholder: large\n- brick: eo-input\n  properties:\n    size: medium\n    placeholder: medium\n- brick: eo-input\n  properties:\n    size: small\n    placeholder: small\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input size=\"large\" placeholder=\"large\"></eo-input>\n# <eo-input size=\"medium\" placeholder=\"medium\"></eo-input>\n# <eo-input size=\"small\" placeholder=\"small\"></eo-input>\n# \n```\n\n### Input Style\n\n通过 `inputStyle` 属性自定义输入框的内联样式。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    placeholder: \"width: 180px\"\n    inputStyle:\n      width: 180px\n- brick: eo-input\n  properties:\n    placeholder: \"width: 250px\"\n    inputStyle:\n      width: 250px\n- brick: eo-input\n  properties:\n    placeholder: \"border style\"\n    inputStyle:\n      border: \"1px solid #8b2121\"\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"width: 180px\" id=\"brick-1\"></eo-input>\n# <eo-input placeholder=\"width: 250px\" id=\"brick-2\"></eo-input>\n# <eo-input placeholder=\"border style\" id=\"brick-3\"></eo-input>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.inputStyle = {\n#     width: \"180px\",\n#   };\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.inputStyle = {\n#     width: \"250px\",\n#   };\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.inputStyle = {\n#     border: \"1px solid #8b2121\",\n#   };\n# </script>\n# \n```\n\n### Events\n\n监听 `change` 事件获取输入框值变化。\n\n```yaml preview\n- brick: eo-input\n  properties:\n    label: Event\n  events:\n    change:\n      action: message.success\n      args:\n        - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input label=\"Event\" id=\"brick-1\"></eo-input>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({ type: \"success\", message: e.detail });\n#   });\n# </script>\n# \n```\n\n### Slots\n\n通过 `prefix`、`suffix`、`addonBefore`、`addonAfter` 插槽在输入框不同位置插入自定义内容。\n\n```yaml preview gap\n- brick: eo-input\n  properties:\n    placeholder: prefix slot\n  slots:\n    prefix:\n      bricks:\n        - brick: eo-icon\n          properties:\n            icon: search\n            lib: antd\n            theme: outlined\n- brick: eo-input\n  properties:\n    placeholder: suffix slot\n  slots:\n    suffix:\n      bricks:\n        - brick: eo-icon\n          properties:\n            icon: search\n            lib: antd\n            theme: outlined\n- brick: eo-input\n  properties:\n    placeholder: addon slot\n  slots:\n    addonBefore:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: https://\n    addonAfter:\n      type: bricks\n      bricks:\n        - brick: span\n          properties:\n            textContent: .com\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-input placeholder=\"prefix slot\">\n#   <eo-icon slot=\"prefix\" icon=\"search\" lib=\"antd\" theme=\"outlined\"></eo-icon>\n# </eo-input>\n# <eo-input placeholder=\"suffix slot\">\n#   <eo-icon slot=\"suffix\" icon=\"search\" lib=\"antd\" theme=\"outlined\"></eo-icon>\n# </eo-input>\n# <eo-input placeholder=\"addon slot\">\n#   <span slot=\"addonBefore\">https://</span>\n#   <span slot=\"addonAfter\">.com</span>\n# </eo-input>\n# \n```\n\n### With Form\n\n在 `eo-form` 中使用，通过 `name`、`label` 属性集成表单功能，并可配合 `required`、`pattern`、`message` 属性实现表单校验。\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-input\n      properties:\n        label: 输入框\n        name: text\n        required: true\n        pattern: \"^[A-Za-z]+\"\n        message:\n          required: 请输入内容\n          pattern: 只能输入字母\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-input\n#     label=\"输入框\"\n#     name=\"text\"\n#     required\n#     pattern=\"^[A-Za-z]+\"\n#     id=\"brick-2\"\n#   ></eo-input>\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.message = {\n#     required: \"请输入内容\",\n#     pattern: \"只能输入字母\",\n#   };\n# </script>\n# \n```\n\n### Validator\n\n通过 `validator` 属性自定义表单项校验逻辑，返回 `null` 表示校验通过，返回包含 `message` 的对象表示校验失败。\n\n```yaml preview\n- brick: eo-form\n  events:\n    validate.success:\n      - action: console.log\n  children:\n    - brick: eo-input\n      properties:\n        name: username\n        label: 用户名\n        validator: \"<% (value) => value && value.length > 10 ? { message: '用户名不能超过10个字符' } : null %>\"\n    - brick: eo-submit-buttons\n# -- YAML DELIMITER (1nbbm8) --\n# <eo-form id=\"brick-1\">\n#   <eo-input name=\"username\" label=\"用户名\" id=\"brick-2\"></eo-input>\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# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.validator =\n#     \"<% (value) => value && value.length > 10 ? { message: '用户名不能超过10个字符' } : null %>\";\n# </script>\n# \n```\n"
   }
 }