@next-bricks/form 1.21.13 → 1.21.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/bricks.json +27 -27
  2. package/dist/chunks/1889.b4966a67.js +2 -0
  3. package/dist/chunks/1889.b4966a67.js.map +1 -0
  4. package/dist/chunks/{2537.be4cf82c.js → 2537.f8b70fca.js} +2 -2
  5. package/dist/chunks/{2537.be4cf82c.js.map → 2537.f8b70fca.js.map} +1 -1
  6. package/dist/chunks/3171.19eb4447.js +2 -0
  7. package/dist/chunks/3171.19eb4447.js.map +1 -0
  8. package/dist/chunks/5399.2b43f9b8.js +2 -0
  9. package/dist/chunks/5399.2b43f9b8.js.map +1 -0
  10. package/dist/chunks/5552.ac9c4b9d.js +2 -0
  11. package/dist/chunks/5552.ac9c4b9d.js.map +1 -0
  12. package/dist/chunks/{845.2f598dd9.js → 845.66ebad07.js} +3 -3
  13. package/dist/chunks/845.66ebad07.js.map +1 -0
  14. package/dist/chunks/9118.00f515f7.js +3 -0
  15. package/dist/chunks/9118.00f515f7.js.LICENSE.txt +11 -0
  16. package/dist/chunks/9118.00f515f7.js.map +1 -0
  17. package/dist/chunks/948.5923c86a.js +3 -0
  18. package/dist/chunks/948.5923c86a.js.map +1 -0
  19. package/dist/chunks/9949.f1969338.js +3 -0
  20. package/dist/chunks/9949.f1969338.js.map +1 -0
  21. package/dist/chunks/eo-auto-complete.0ed854e4.js.map +1 -1
  22. package/dist/chunks/eo-checkbox.2d0a8dbc.js.map +1 -1
  23. package/dist/chunks/{eo-color-picker.ecf0c4c0.js → eo-color-picker.c8832147.js} +2 -2
  24. package/dist/chunks/eo-color-picker.c8832147.js.map +1 -0
  25. package/dist/chunks/{eo-date-picker.faa60507.js → eo-date-picker.358e2716.js} +2 -2
  26. package/dist/chunks/eo-date-picker.358e2716.js.map +1 -0
  27. package/dist/chunks/{eo-dynamic-form-item.aa5f7d9e.js → eo-dynamic-form-item.04bee6fb.js} +3 -3
  28. package/dist/chunks/eo-dynamic-form-item.04bee6fb.js.map +1 -0
  29. package/dist/chunks/eo-icon-select.6a7f7e12.js.map +1 -1
  30. package/dist/chunks/{eo-radio.b2ed57db.js → eo-radio.f2df4f10.js} +3 -3
  31. package/dist/chunks/eo-radio.f2df4f10.js.map +1 -0
  32. package/dist/chunks/{eo-select.cd00c791.js → eo-select.7976733a.js} +3 -3
  33. package/dist/chunks/eo-select.7976733a.js.map +1 -0
  34. package/dist/chunks/eo-submit-buttons.8a293f65.js.map +1 -1
  35. package/dist/chunks/eo-switch.f0a27c08.js.map +1 -1
  36. package/dist/chunks/eo-textarea.405851dd.js.map +1 -1
  37. package/dist/chunks/{eo-time-picker.46e7a667.js → eo-time-picker.8bd47e44.js} +2 -2
  38. package/dist/chunks/{eo-time-picker.46e7a667.js.map → eo-time-picker.8bd47e44.js.map} +1 -1
  39. package/dist/chunks/{eo-time-range-picker.5afbad69.js → eo-time-range-picker.b6932d6b.js} +2 -2
  40. package/dist/chunks/eo-time-range-picker.b6932d6b.js.map +1 -0
  41. package/dist/chunks/{eo-upload-file.27a4288d.js → eo-upload-file.64f3a33d.js} +3 -3
  42. package/dist/chunks/{eo-upload-file.27a4288d.js.map → eo-upload-file.64f3a33d.js.map} +1 -1
  43. package/dist/chunks/eo-upload-image.b43c2329.js.map +1 -1
  44. package/dist/chunks/main.370da6d5.js +2 -0
  45. package/dist/chunks/main.370da6d5.js.map +1 -0
  46. package/dist/chunks/react.241c9ae9.js +2 -0
  47. package/dist/examples.json +9 -9
  48. package/dist/index.32e08f2f.js +2 -0
  49. package/dist/index.32e08f2f.js.map +1 -0
  50. package/dist/manifest.json +284 -284
  51. package/dist/types.json +3 -3
  52. package/dist-types/dynamic-form-item/index.d.ts +3 -3
  53. package/dist-types/general-switch/index.d.ts +2 -1
  54. package/dist-types/radio/index.d.ts +3 -3
  55. package/dist-types/select/i18n.d.ts +1 -1
  56. package/dist-types/select/index.d.ts +3 -3
  57. package/package.json +2 -2
  58. package/dist/chunks/1889.96e6de82.js +0 -2
  59. package/dist/chunks/1889.96e6de82.js.map +0 -1
  60. package/dist/chunks/3171.30fac628.js +0 -2
  61. package/dist/chunks/3171.30fac628.js.map +0 -1
  62. package/dist/chunks/5399.b22b4003.js +0 -2
  63. package/dist/chunks/5399.b22b4003.js.map +0 -1
  64. package/dist/chunks/5552.75021017.js +0 -2
  65. package/dist/chunks/5552.75021017.js.map +0 -1
  66. package/dist/chunks/845.2f598dd9.js.map +0 -1
  67. package/dist/chunks/948.cb41e9a8.js +0 -3
  68. package/dist/chunks/948.cb41e9a8.js.map +0 -1
  69. package/dist/chunks/9949.3d28a915.js +0 -3
  70. package/dist/chunks/9949.3d28a915.js.map +0 -1
  71. package/dist/chunks/eo-color-picker.ecf0c4c0.js.map +0 -1
  72. package/dist/chunks/eo-date-picker.faa60507.js.map +0 -1
  73. package/dist/chunks/eo-dynamic-form-item.aa5f7d9e.js.map +0 -1
  74. package/dist/chunks/eo-radio.b2ed57db.js.map +0 -1
  75. package/dist/chunks/eo-select.cd00c791.js.map +0 -1
  76. package/dist/chunks/eo-time-range-picker.5afbad69.js.map +0 -1
  77. package/dist/chunks/main.59f7a796.js +0 -2
  78. package/dist/chunks/main.59f7a796.js.map +0 -1
  79. package/dist/chunks/react.2bcc835d.js +0 -2
  80. package/dist/index.2c92cf90.js +0 -2
  81. package/dist/index.2c92cf90.js.map +0 -1
  82. /package/dist/chunks/{845.2f598dd9.js.LICENSE.txt → 845.66ebad07.js.LICENSE.txt} +0 -0
  83. /package/dist/chunks/{948.cb41e9a8.js.LICENSE.txt → 948.5923c86a.js.LICENSE.txt} +0 -0
  84. /package/dist/chunks/{9949.3d28a915.js.LICENSE.txt → 9949.f1969338.js.LICENSE.txt} +0 -0
  85. /package/dist/chunks/{eo-dynamic-form-item.aa5f7d9e.js.LICENSE.txt → eo-dynamic-form-item.04bee6fb.js.LICENSE.txt} +0 -0
  86. /package/dist/chunks/{eo-radio.b2ed57db.js.LICENSE.txt → eo-radio.f2df4f10.js.LICENSE.txt} +0 -0
  87. /package/dist/chunks/{eo-select.cd00c791.js.LICENSE.txt → eo-select.7976733a.js.LICENSE.txt} +0 -0
  88. /package/dist/chunks/{eo-upload-file.27a4288d.js.LICENSE.txt → eo-upload-file.64f3a33d.js.LICENSE.txt} +0 -0
  89. /package/dist/chunks/{react.2bcc835d.js.LICENSE.txt → react.241c9ae9.js.LICENSE.txt} +0 -0
package/dist/examples.json CHANGED
@@ -1,28 +1,28 @@
1
1
  {
2
+ "eo-radio": {
3
+ "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"
4
+ },
2
5
  "eo-textarea": {
3
6
  "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"
4
7
  },
5
8
  "eo-form": {
6
9
  "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"
7
10
  },
8
- "eo-radio": {
9
- "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"
10
- },
11
11
  "eo-select": {
12
12
  "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"
13
13
  },
14
14
  "eo-submit-buttons": {
15
15
  "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"
16
16
  },
17
- "eo-dynamic-form-item": {
18
- "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"
19
- },
20
17
  "eo-checkbox": {
21
18
  "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"
22
19
  },
23
20
  "eo-search": {
24
21
  "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"
25
22
  },
23
+ "eo-dynamic-form-item": {
24
+ "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"
25
+ },
26
26
  "eo-icon-select": {
27
27
  "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"
28
28
  },
@@ -44,12 +44,12 @@
44
44
  "eo-date-picker": {
45
45
  "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"
46
46
  },
47
- "eo-time-range-picker": {
48
- "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"
49
- },
50
47
  "eo-color-picker": {
51
48
  "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"
52
49
  },
50
+ "eo-time-range-picker": {
51
+ "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"
52
+ },
53
53
  "eo-form-item": {
54
54
  "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"
55
55
  },