@next-bricks/form 1.21.10 → 1.21.12

package/docs/eo-switch.md

@@ -1,4 +1,35 @@
-开关构件
+---
+tagName: eo-switch
+displayName: WrappedEoSwitch
+description: 开关
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-switch
+
+> 开关
+
+## Props
+
+| 属性          | 类型                   | 必填 | 默认值 | 说明                                         |
+| ------------- | ---------------------- | ---- | ------ | -------------------------------------------- |
+| name          | `string`               | 否   | -      | 字段名称                                     |
+| label         | `string`               | 否   | -      | 字段文本                                     |
+| value         | `boolean`              | 否   | -      | 初始值                                       |
+| disabled      | `boolean`              | 否   | -      | 是否禁用                                     |
+| size          | `ComponentSize`        | 否   | -      | 按钮大小，目前只支持small和非small两种大小。 |
+| checkedText   | `string`               | 否   | -      | 选中时的文本                                 |
+| unCheckedText | `string`               | 否   | -      | 非选中时的文本                               |
+| checkedIcon   | `GeneralIconProps`     | 否   | -      | 选中时的图标                                 |
+| unCheckedIcon | `GeneralIconProps`     | 否   | -      | 非选中时的图标                               |
+| themeVariant  | `"default" \| "elevo"` | 否   | -      | 主题变体                                     |
+
+## Events
+
+| 事件   | detail                                                  | 说明           |
+| ------ | ------------------------------------------------------- | -------------- |
+| switch | `boolean` — 开关当前状态，true 表示开启，false 表示关闭 | 开关改变时触发 |
 
 ## Examples
 
@@ -25,7 +56,18 @@
     label: switch
 ```
 
-### disabled
+### Value
+
+通过 `value` 属性设置开关的初始状态。
+
+```yaml preview
+- brick: eo-switch
+  properties:
+    value: true
+    label: switch
+```
+
+### Disabled
 
 ```yaml preview
 - brick: eo-switch
@@ -35,7 +77,7 @@
     label: switch
 ```
 
-### size
+### Size
 
 ```yaml preview
 - brick: eo-switch
@@ -48,6 +90,8 @@
 
 ### Customizations
 
+通过 `checkedText`、`unCheckedText`、`checkedIcon`、`unCheckedIcon` 属性自定义开关的文本和图标。
+
 ```yaml preview
 - brick: eo-switch
   properties:
@@ -65,6 +109,16 @@
       lib: antd
 ```
 
+### Theme Variant
+
+```yaml preview
+- brick: eo-switch
+  properties:
+    themeVariant: elevo
+    label: switch
+    value: true
+```
+
 ### Event
 
 ```yaml preview

package/docs/eo-switch.react.md

@@ -0,0 +1,136 @@
+---
+tagName: eo-switch
+displayName: WrappedEoSwitch
+description: 开关
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoSwitch
+
+> 开关
+
+## 导入
+
+```ts
+import { WrappedEoSwitch } from "@next-bricks/form/eo-switch";
+```
+
+## Props
+
+| 属性          | 类型                   | 必填 | 默认值 | 说明                                         |
+| ------------- | ---------------------- | ---- | ------ | -------------------------------------------- |
+| name          | `string`               | 否   | -      | 字段名称                                     |
+| label         | `string`               | 否   | -      | 字段文本                                     |
+| value         | `boolean`              | 否   | -      | 初始值                                       |
+| disabled      | `boolean`              | 否   | -      | 是否禁用                                     |
+| size          | `ComponentSize`        | 否   | -      | 按钮大小，目前只支持small和非small两种大小。 |
+| checkedText   | `string`               | 否   | -      | 选中时的文本                                 |
+| unCheckedText | `string`               | 否   | -      | 非选中时的文本                               |
+| checkedIcon   | `GeneralIconProps`     | 否   | -      | 选中时的图标                                 |
+| unCheckedIcon | `GeneralIconProps`     | 否   | -      | 非选中时的图标                               |
+| themeVariant  | `"default" \| "elevo"` | 否   | -      | 主题变体                                     |
+
+## Events
+
+| 事件     | detail                                                  | 说明           |
+| -------- | ------------------------------------------------------- | -------------- |
+| onSwitch | `boolean` — 开关当前状态，true 表示开启，false 表示关闭 | 开关改变时触发 |
+
+## Examples
+
+### Basic
+
+```tsx preview
+<WrappedEoSwitch disabled={false} onSwitch={(value) => console.log(value)} />
+```
+
+### Label
+
+```tsx preview
+<WrappedEoSwitch
+  disabled={false}
+  label="switch"
+  onSwitch={(value) => console.log(value)}
+/>
+```
+
+### Value
+
+通过 `value` 属性设置开关的初始状态。
+
+```tsx preview
+<WrappedEoSwitch value={true} label="switch" />
+```
+
+### Disabled
+
+```tsx preview
+<WrappedEoSwitch disabled={true} value={true} label="switch" />
+```
+
+### Size
+
+```tsx preview
+<WrappedEoSwitch disabled={false} value={true} label="switch" size="small" />
+```
+
+### Customizations
+
+通过 `checkedText`、`unCheckedText`、`checkedIcon`、`unCheckedIcon` 属性自定义开关的文本和图标。
+
+```tsx preview
+<WrappedEoSwitch
+  checkedText="123"
+  unCheckedText="456"
+  disabled={false}
+  size="small"
+  label="text"
+  checkedIcon={{ icon: "plus-circle", lib: "antd", theme: "outlined" }}
+  unCheckedIcon={{ icon: "plus-circle", lib: "antd" }}
+/>
+```
+
+### Theme Variant
+
+```tsx preview
+<WrappedEoSwitch themeVariant="elevo" label="switch" value={true} />
+```
+
+### Event
+
+```tsx preview
+function Demo() {
+  const [switchValue, setSwitchValue] = useState(false);
+  return (
+    <div>
+      <WrappedEoSwitch
+        disabled={false}
+        onSwitch={(value) => {
+          console.log(value);
+          setSwitchValue(value);
+        }}
+      />
+      <p>当前状态: {switchValue ? "开启" : "关闭"}</p>
+    </div>
+  );
+}
+```
+
+### With Form
+
+```tsx preview
+function Demo() {
+  const formRef = useRef(null);
+  return (
+    <WrappedEoForm
+      ref={formRef}
+      onValidateSuccess={(values) => console.log(values)}
+      onValuesChange={(values) => console.log(values)}
+    >
+      <WrappedEoSwitch name="switch" label="开关" />
+      <WrappedEoSubmitButtons />
+    </WrappedEoForm>
+  );
+}
+```

package/docs/eo-textarea.md

@@ -1,55 +1,109 @@
-表单多行文本输入框构件。
-
-```yaml preview
-- brick: eo-textarea
-```
+---
+tagName: eo-textarea
+displayName: WrappedEoTextarea
+description: 通用多行文本输入框构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-textarea
+
+> 通用多行文本输入框构件
+
+## Props
+
+| 属性          | 类型                     | 必填 | 默认值 | 说明                                                                        |
+| ------------- | ------------------------ | ---- | ------ | --------------------------------------------------------------------------- |
+| name          | `string`                 | 否   | -      | 字段名称                                                                    |
+| label         | `string`                 | 否   | -      | 标签文字                                                                    |
+| value         | `string`                 | 否   | -      | 值                                                                          |
+| placeholder   | `string`                 | 否   | -      | 占位说明                                                                    |
+| disabled      | `boolean`                | 否   | -      | 是否禁用                                                                    |
+| minLength     | `number`                 | 否   | -      | 最小长度                                                                    |
+| maxLength     | `number`                 | 否   | -      | 最大长度                                                                    |
+| autoSize      | `AutoSize`               | 否   | -      | 大小自适应                                                                  |
+| required      | `boolean`                | 否   | -      | 是否必填                                                                    |
+| max           | `number`                 | 否   | -      | 表单校验最大长度                                                            |
+| min           | `number`                 | 否   | -      | 表单校验最小长度                                                            |
+| message       | `Record<string, string>` | 否   | -      | 校验信息                                                                    |
+| textareaStyle | `React.CSSProperties`    | 否   | -      | 自定义样式                                                                  |
+| variant       | `"default" \| "muted"`   | 否   | -      | 变体。`muted`：在 themeVariant 为 elevo 时可用，设置时输入框没有 box-shadow |
+| themeVariant  | `"default" \| "elevo"`   | 否   | -      | 主题变体                                                                    |
+
+## Events
+
+| 事件   | detail                | 说明       |
+| ------ | --------------------- | ---------- |
+| change | `string` — 当前输入值 | 值改变事件 |
+
+## Methods
+
+| 方法            | 说明             |
+| --------------- | ---------------- |
+| focusTextarea() | 使文本域获得焦点 |
 
 ## Examples
 
-### Label
+### Basic
+
+展示多行文本输入框的最基本用法。
 
 ```yaml preview
 - brick: eo-textarea
   properties:
     label: 多行输入框
+    placeholder: 请输入内容
 ```
 
 ### Value
 
+通过 `value` 属性设置文本域的默认值。
+
 ```yaml preview
 - brick: eo-textarea
   properties:
+    label: 默认值
     value: Default Value
 ```
 
 ### Disabled
 
+设置 `disabled` 属性禁用文本域。
+
 ```yaml preview
 - brick: eo-textarea
   properties:
+    label: 禁用状态
     value: Default Value
     disabled: true
 ```
 
 ### Placeholder
 
+通过 `placeholder` 属性设置文本域的占位提示文字。
+
 ```yaml preview
 - brick: eo-textarea
   properties:
     placeholder: This is placeholder...
 ```
 
-### max length
+### MaxLength
+
+通过 `maxLength` 属性限制输入的最大字符数。
 
 ```yaml preview
 - brick: eo-textarea
   properties:
+    label: 最大长度
     placeholder: max length = 10
     maxLength: 10
 ```
 
 ### AutoSize
 
+通过 `autoSize` 属性让文本域高度随内容自动调整，支持设置 `minRows` 和 `maxRows` 限制行数范围。
+
 ```yaml preview
 - brick: eo-textarea
   properties:
@@ -57,18 +111,20 @@
     autoSize: true
 - brick: eo-textarea
   properties:
-    placeholder: "autoSize: { minRows: 3}"
+    placeholder: "autoSize: { minRows: 3 }"
     autoSize:
       minRows: 3
 - brick: eo-textarea
   properties:
-    placeholder: "autoSize: { minRows: 3, maxRows: 5}"
+    placeholder: "autoSize: { minRows: 3, maxRows: 5 }"
     autoSize:
       minRows: 3
       maxRows: 5
 ```
 
-### Textarea Style
+### TextareaStyle
+
+通过 `textareaStyle` 属性自定义文本域的内联样式。
 
 ```yaml preview
 - brick: eo-textarea
@@ -88,28 +144,26 @@
       border: "1px solid #8b2121"
 ```
 
-### Event
+### Events
+
+监听 `change` 事件获取用户输入的实时值。
 
 ```yaml preview
 - brick: eo-textarea
-  events:
+  properties:
     label: Event
+    placeholder: 请输入内容
+  events:
     change:
       action: message.success
       args:
         - <% EVENT.detail %>
-    focus:
-      action: message.success
-      args:
-        - focus
-    blur:
-      action: message.success
-      args:
-        - blur
 ```
 
 ### With Form
 
+在 `eo-form` 中使用，通过 `name`、`label`、`required`、`min`、`max`、`message` 属性集成表单校验功能。
+
 ```yaml preview
 - brick: eo-form
   events:
@@ -120,8 +174,33 @@
   children:
     - brick: eo-textarea
       properties:
-        label: 输入框
-        name: text
+        label: 描述
+        name: description
         required: true
+        min: 5
+        max: 200
+        message:
+          required: 请输入描述
+          min: 描述不能少于5个字符
+          max: 描述不能超过200个字符
     - brick: eo-submit-buttons
 ```
+
+### Methods
+
+通过 `focusTextarea` 方法使文本域获得焦点。
+
+```yaml preview
+- brick: eo-textarea
+  id: my-textarea
+  properties:
+    label: 文本域
+    placeholder: 点击按钮使其获得焦点
+- brick: eo-button
+  properties:
+    textContent: 获取焦点
+  events:
+    click:
+      target: "#my-textarea"
+      method: focusTextarea
+```

package/docs/eo-textarea.react.md

@@ -0,0 +1,193 @@
+---
+tagName: eo-textarea
+displayName: WrappedEoTextarea
+description: 通用多行文本输入框构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoTextarea
+
+> 通用多行文本输入框构件
+
+## 导入
+
+```tsx
+import { WrappedEoTextarea } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                     | 必填 | 默认值 | 说明                                                                        |
+| ------------- | ------------------------ | ---- | ------ | --------------------------------------------------------------------------- |
+| name          | `string`                 | 否   | -      | 字段名称                                                                    |
+| label         | `string`                 | 否   | -      | 标签文字                                                                    |
+| value         | `string`                 | 否   | -      | 值                                                                          |
+| placeholder   | `string`                 | 否   | -      | 占位说明                                                                    |
+| disabled      | `boolean`                | 否   | -      | 是否禁用                                                                    |
+| minLength     | `number`                 | 否   | -      | 最小长度                                                                    |
+| maxLength     | `number`                 | 否   | -      | 最大长度                                                                    |
+| autoSize      | `AutoSize`               | 否   | -      | 大小自适应                                                                  |
+| required      | `boolean`                | 否   | -      | 是否必填                                                                    |
+| max           | `number`                 | 否   | -      | 表单校验最大长度                                                            |
+| min           | `number`                 | 否   | -      | 表单校验最小长度                                                            |
+| message       | `Record<string, string>` | 否   | -      | 校验信息                                                                    |
+| textareaStyle | `React.CSSProperties`    | 否   | -      | 自定义样式                                                                  |
+| variant       | `"default" \| "muted"`   | 否   | -      | 变体。`muted`：在 themeVariant 为 elevo 时可用，设置时输入框没有 box-shadow |
+| themeVariant  | `"default" \| "elevo"`   | 否   | -      | 主题变体                                                                    |
+
+## Events
+
+| 事件     | detail                | 说明       |
+| -------- | --------------------- | ---------- |
+| onChange | `string` — 当前输入值 | 值改变事件 |
+
+## Methods
+
+| 方法            | 说明             |
+| --------------- | ---------------- |
+| focusTextarea() | 使文本域获得焦点 |
+
+## Examples
+
+### Basic
+
+展示多行文本输入框的最基本用法。
+
+```tsx
+<WrappedEoTextarea label="多行输入框" placeholder="请输入内容" />
+```
+
+### Value
+
+通过 `value` 属性设置文本域的默认值。
+
+```tsx
+<WrappedEoTextarea label="默认值" value="Default Value" />
+```
+
+### Disabled
+
+设置 `disabled` 属性禁用文本域。
+
+```tsx
+<WrappedEoTextarea label="禁用状态" value="Default Value" disabled />
+```
+
+### Placeholder
+
+通过 `placeholder` 属性设置文本域的占位提示文字。
+
+```tsx
+<WrappedEoTextarea placeholder="This is placeholder..." />
+```
+
+### MaxLength
+
+通过 `maxLength` 属性限制输入的最大字符数。
+
+```tsx
+<WrappedEoTextarea
+  label="最大长度"
+  placeholder="max length = 10"
+  maxLength={10}
+/>
+```
+
+### AutoSize
+
+通过 `autoSize` 属性让文本域高度随内容自动调整，支持设置 `minRows` 和 `maxRows` 限制行数范围。
+
+```tsx
+<>
+  <WrappedEoTextarea placeholder="autoSize: true" autoSize={true} />
+  <WrappedEoTextarea
+    placeholder="autoSize: { minRows: 3 }"
+    autoSize={{ minRows: 3 }}
+  />
+  <WrappedEoTextarea
+    placeholder="autoSize: { minRows: 3, maxRows: 5 }"
+    autoSize={{ minRows: 3, maxRows: 5 }}
+  />
+</>
+```
+
+### TextareaStyle
+
+通过 `textareaStyle` 属性自定义文本域的内联样式。
+
+```tsx
+<>
+  <WrappedEoTextarea
+    placeholder="width: 180px"
+    textareaStyle={{ width: "180px" }}
+  />
+  <WrappedEoTextarea
+    placeholder="width: 250px"
+    textareaStyle={{ width: "250px" }}
+  />
+  <WrappedEoTextarea
+    placeholder="border style"
+    textareaStyle={{ border: "1px solid #8b2121" }}
+  />
+</>
+```
+
+### Events
+
+监听 `onChange` 事件获取用户输入的实时值。
+
+```tsx
+<WrappedEoTextarea
+  label="Event"
+  placeholder="请输入内容"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Form
+
+在 `WrappedEoForm` 中使用，通过 `name`、`label`、`required`、`min`、`max`、`message` 属性集成表单校验功能。
+
+```tsx
+<WrappedEoForm
+  onValidateSuccess={(e) => console.log(e.detail)}
+  onValuesChange={(e) => console.log(e.detail)}
+>
+  <WrappedEoTextarea
+    label="描述"
+    name="description"
+    required
+    min={5}
+    max={200}
+    message={{
+      required: "请输入描述",
+      min: "描述不能少于5个字符",
+      max: "描述不能超过200个字符",
+    }}
+  />
+  <WrappedEoSubmitButtons />
+</WrappedEoForm>
+```
+
+### Methods
+
+通过 `focusTextarea` 方法使文本域获得焦点。
+
+```tsx
+function Demo() {
+  const ref = useRef(null);
+  return (
+    <>
+      <WrappedEoTextarea
+        ref={ref}
+        label="文本域"
+        placeholder="点击按钮使其获得焦点"
+      />
+      <WrappedEoButton onClick={() => ref.current?.focusTextarea()}>
+        获取焦点
+      </WrappedEoButton>
+    </>
+  );
+}
+```