@next-bricks/form 1.21.11 → 1.21.13

package/docs/eo-dynamic-form-item.react.md

@@ -0,0 +1,186 @@
+---
+tagName: eo-dynamic-form-item
+displayName: EoDynamicFormItem
+description: 动态表单
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# EoDynamicFormItem
+
+> 动态表单
+
+## 导入
+
+```tsx
+import { EoDynamicFormItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                 | 类型                                                                | 必填 | 默认值 | 说明                     |
+| -------------------- | ------------------------------------------------------------------- | ---- | ------ | ------------------------ |
+| name                 | `string`                                                            | 否   | -      | 字段名称                 |
+| label                | `string`                                                            | 否   | -      | 字段说明                 |
+| required             | `boolean`                                                           | 否   | -      | 是否必填                 |
+| value                | `DynamicFormValuesItem[]`                                           | 否   | -      | 值                       |
+| message              | `Record<string, string>`                                            | 否   | -      | 校验文本                 |
+| useBrick             | `UseBrickConf`                                                      | 否   | -      | 动态表单子项构件列表     |
+| hideAddButton        | `boolean \| ((value: Record<string, any>[]) => boolean)`            | 否   | -      | 是否隐藏添加的按钮       |
+| disabledAddButton    | `boolean \| ((value: Record<string, any>[]) => boolean)`            | 否   | -      | 是否禁止添加的按钮       |
+| hideRemoveButton     | `boolean \| ((row: Record<string, any>, index: number) => boolean)` | 否   | -      | 是否隐藏每一行删除的按钮 |
+| disabledRemoveButton | `boolean \| ((row: Record<string, any>, index: number) => boolean)` | 否   | -      | 是否禁止每一行删除的按钮 |
+
+## Events
+
+| 事件        | detail                                                      | 说明             |
+| ----------- | ----------------------------------------------------------- | ---------------- |
+| onChange    | `DynamicFormValuesItem[]` — 整个动态表单当前所有行的值列表  | 表单值改变时触发 |
+| onRowAdd    | `rowDataType` — { detail: 该行的默认值, index: 该行的位置 } | 增加一行时触发   |
+| onRowRemove | `rowDataType` — { detail: 该行的值, index: 该行的位置 }     | 移除一行时触发   |
+
+## Examples
+
+### 与表单集成
+
+在 eo-form 中使用动态表单，支持必填校验和唯一性校验。
+
+```tsx
+<WrappedEoForm
+  layout="vertical"
+  values={{
+    id: "request_5XXX",
+    dimension: [
+      { dimensionName: "one", dimensionId: "one", dimensionValue: 1 },
+    ],
+  }}
+>
+  <WrappedEoInput name="id" label="指标ID" required />
+  <EoDynamicFormItem
+    name="dimension"
+    label="维度"
+    useBrick={[
+      {
+        brick: "eo-input",
+        properties: {
+          name: "dimensionName",
+          required: true,
+          message: { required: "维度名称为必填项" },
+          label: "维度名称",
+        },
+      },
+      {
+        brick: "eo-input",
+        properties: {
+          name: "dimensionId",
+          required: true,
+          message: { required: "维度id为必填项" },
+          label: "维度id",
+          unique: true,
+          validator: (value: string) =>
+            value.length > 5 ? "维度id不能超过5" : "",
+        },
+      },
+      {
+        brick: "eo-input",
+        properties: { name: "dimensionValue", label: "维度值" },
+      },
+    ]}
+  />
+  <WrappedEoSubmitButtons cancelText="取消" submitText="提交" />
+</WrappedEoForm>
+```
+
+### 显示标签
+
+展示带有 label 标签的动态表单。
+
+```tsx
+<EoDynamicFormItem
+  label="Label"
+  useBrick={[
+    { brick: "eo-input", properties: { name: "input" } },
+    {
+      brick: "eo-select",
+      properties: {
+        name: "select",
+        options: ["Beijing", "Shanghai", "Guangzhou", "Shenzhen"],
+      },
+    },
+  ]}
+/>
+```
+
+### 设置初始值
+
+通过 value 属性设置动态表单的初始数据。
+
+```tsx
+<EoDynamicFormItem
+  value={[
+    { input: "北京", select: "Beijing" },
+    { input: "上海", select: "Shanghai" },
+  ]}
+  useBrick={[
+    { brick: "eo-input", properties: { name: "input" } },
+    {
+      brick: "eo-select",
+      properties: {
+        name: "select",
+        options: ["Beijing", "Shanghai", "Guangzhou", "Shenzhen"],
+      },
+    },
+  ]}
+/>
+```
+
+### 隐藏或禁用按钮
+
+通过函数动态控制添加和删除按钮的显示与禁用状态。
+
+```tsx
+<EoDynamicFormItem
+  hideAddButton={(value) => value.length === 5}
+  disabledAddButton={(value) => value.length === 4}
+  hideRemoveButton={(_row, index) => index === 1}
+  disabledRemoveButton={(_row, index) => index === 0}
+  value={[
+    { input: "hello1", select: "abc1" },
+    { input: "hello2", select: "abc2" },
+    { input: "hello3", select: "abc3" },
+  ]}
+  useBrick={[
+    { brick: "eo-input", properties: { name: "input" } },
+    {
+      brick: "eo-select",
+      properties: {
+        name: "select",
+        options: ["abc1", "abc2", "abc3", "abc4"],
+      },
+    },
+  ]}
+/>
+```
+
+### 监听事件
+
+监听动态表单的值变化、添加行和删除行事件。
+
+```tsx
+<EoDynamicFormItem
+  name="dynamicForm"
+  useBrick={[
+    { brick: "eo-input", properties: { name: "input" } },
+    {
+      brick: "eo-select",
+      properties: {
+        name: "select",
+        options: ["Beijing", "Shanghai", "Guangzhou", "Shenzhen"],
+      },
+    },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+  onRowAdd={(e) => console.log(e.detail)}
+  onRowRemove={(e) => console.log(e.detail)}
+/>
+```

package/docs/eo-form-item.md

@@ -0,0 +1,194 @@
+---
+tagName: eo-form-item
+displayName: WrappedEoFormItem
+description: 表单项构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-form-item
+
+> 表单项构件
+
+## Props
+
+| 属性           | 类型                          | 必填 | 默认值       | 说明                                                                 |
+| -------------- | ----------------------------- | ---- | ------------ | -------------------------------------------------------------------- |
+| name           | `string`                      | 否   | -            | 字段名称                                                             |
+| label          | `string`                      | 否   | -            | 标签文字                                                             |
+| pattern        | `string`                      | 否   | -            | 正则校验规则                                                         |
+| message        | `Record<string, string>`      | 否   | -            | 校验失败时的提示信息                                                 |
+| type           | `string`                      | 否   | -            | 校验类型                                                             |
+| max            | `number`                      | 否   | -            | 表单校验最大值（当 type 为 number 时表示最大数值，否则表示最大长度） |
+| min            | `number`                      | 否   | -            | 表单校验最小值（当 type 为 number 时表示最小数值，否则表示最小长度） |
+| required       | `boolean`                     | 否   | -            | 表单项是否为必填                                                     |
+| value          | `string`                      | 否   | -            | 初始值                                                               |
+| valuePropsName | `string`                      | 否   | `"value"`    | 子构件中对应值的属性名                                               |
+| layout         | `Layout`                      | 否   | -            | 布局方式                                                             |
+| size           | `ComponentSize`               | 否   | -            | 尺寸                                                                 |
+| trim           | `any`                         | 是   | `true`       | 是否自动去除前后的空白字符                                           |
+| trigger        | `string`                      | 是   | `"onChange"` | 事件触发方法名                                                       |
+| validator      | `(value: any) => MessageBody` | 否   | -            | 表单项校验方法                                                       |
+| needValidate   | `boolean`                     | 否   | -            | 值变化时是否主动触发校验                                             |
+
+## Slots
+
+| 名称      | 说明       |
+| --------- | ---------- |
+| (default) | 表单项内容 |
+
+## Examples
+
+### Basic
+
+展示表单项的基本用法，包含必填、最大/最小长度校验。
+
+```yaml preview
+- brick: eo-form
+  slots:
+    "":
+      bricks:
+        - brick: eo-form-item
+          properties:
+            name: username
+            label: 用户名
+            required: true
+            max: 20
+            min: 2
+            message:
+              required: 用户名不能为空
+              max: 用户名不能超过 20 个字符
+              min: 用户名至少 2 个字符
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入用户名
+        - brick: eo-submit-buttons
+          properties:
+            submitText: 提交
+```
+
+### Validation
+
+演示正则校验（pattern）、自定义校验器（validator）以及类型校验（type）的用法。
+
+```yaml preview
+- brick: eo-form
+  slots:
+    "":
+      bricks:
+        - brick: eo-form-item
+          properties:
+            name: email
+            label: 邮箱
+            required: true
+            pattern: "^[\\w.-]+@[\\w.-]+\\.\\w+$"
+            message:
+              required: 邮箱不能为空
+              pattern: 邮箱格式不正确
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入邮箱
+        - brick: eo-form-item
+          properties:
+            name: age
+            label: 年龄
+            type: number
+            min: 1
+            max: 120
+            message:
+              min: 年龄不能小于 1
+              max: 年龄不能超过 120
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入年龄
+        - brick: eo-form-item
+          properties:
+            name: code
+            label: 编码
+            validator: "<% (value) => value && /^[A-Z]/.test(value) ? null : { message: '编码必须以大写字母开头' } %>"
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入编码
+        - brick: eo-submit-buttons
+          properties:
+            submitText: 提交
+```
+
+### Initial Value and ValuePropsName
+
+展示 value 初始值和 valuePropsName 的使用方式，以及 trim 自动去空格特性。
+
+```yaml preview
+- brick: eo-form
+  slots:
+    "":
+      bricks:
+        - brick: eo-form-item
+          properties:
+            name: city
+            label: 城市
+            value: Beijing
+            valuePropsName: value
+            trim: true
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入城市
+        - brick: eo-form-item
+          properties:
+            name: isActive
+            label: 是否激活
+            valuePropsName: checked
+            needValidate: false
+          slots:
+            "":
+              bricks:
+                - brick: eo-switch
+        - brick: eo-submit-buttons
+          properties:
+            submitText: 提交
+```
+
+### Layout and Size
+
+演示表单项的不同布局方式和尺寸设置，以及通过 trigger 指定事件触发方法名。
+
+```yaml preview
+- brick: eo-form
+  properties:
+    layout: horizontal
+  slots:
+    "":
+      bricks:
+        - brick: eo-form-item
+          properties:
+            name: name
+            label: 姓名
+            required: true
+            layout: horizontal
+            size: large
+            trigger: onChange
+          slots:
+            "":
+              bricks:
+                - brick: eo-input
+                  properties:
+                    placeholder: 请输入姓名
+        - brick: eo-submit-buttons
+          properties:
+            submitText: 提交
+```

package/docs/eo-form-item.react.md

@@ -0,0 +1,163 @@
+---
+tagName: eo-form-item
+displayName: WrappedEoFormItem
+description: 表单项构件
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoFormItem
+
+> 表单项构件
+
+## 导入
+
+```tsx
+import { WrappedEoFormItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                          | 必填 | 默认值       | 说明                                                                 |
+| -------------- | ----------------------------- | ---- | ------------ | -------------------------------------------------------------------- |
+| name           | `string`                      | 否   | -            | 字段名称                                                             |
+| label          | `string`                      | 否   | -            | 标签文字                                                             |
+| pattern        | `string`                      | 否   | -            | 正则校验规则                                                         |
+| message        | `Record<string, string>`      | 否   | -            | 校验失败时的提示信息                                                 |
+| type           | `string`                      | 否   | -            | 校验类型                                                             |
+| max            | `number`                      | 否   | -            | 表单校验最大值（当 type 为 number 时表示最大数值，否则表示最大长度） |
+| min            | `number`                      | 否   | -            | 表单校验最小值（当 type 为 number 时表示最小数值，否则表示最小长度） |
+| required       | `boolean`                     | 否   | -            | 表单项是否为必填                                                     |
+| value          | `string`                      | 否   | -            | 初始值                                                               |
+| valuePropsName | `string`                      | 否   | `"value"`    | 子构件中对应值的属性名                                               |
+| layout         | `Layout`                      | 否   | -            | 布局方式                                                             |
+| size           | `ComponentSize`               | 否   | -            | 尺寸                                                                 |
+| trim           | `any`                         | 是   | `true`       | 是否自动去除前后的空白字符                                           |
+| trigger        | `string`                      | 是   | `"onChange"` | 事件触发方法名                                                       |
+| validator      | `(value: any) => MessageBody` | 否   | -            | 表单项校验方法                                                       |
+| needValidate   | `boolean`                     | 否   | -            | 值变化时是否主动触发校验                                             |
+
+## Slots
+
+| 名称      | 说明       |
+| --------- | ---------- |
+| (default) | 表单项内容 |
+
+## Examples
+
+### Basic
+
+展示表单项的基本用法，包含必填、最大/最小长度校验。
+
+```tsx
+<WrappedEoForm>
+  <WrappedEoFormItem
+    name="username"
+    label="用户名"
+    required
+    max={20}
+    min={2}
+    message={{
+      required: "用户名不能为空",
+      max: "用户名不能超过 20 个字符",
+      min: "用户名至少 2 个字符",
+    }}
+  >
+    <WrappedEoInput placeholder="请输入用户名" />
+  </WrappedEoFormItem>
+  <WrappedEoSubmitButtons submitText="提交" />
+</WrappedEoForm>
+```
+
+### Validation
+
+演示正则校验（pattern）、自定义校验器（validator）以及类型校验（type）的用法。
+
+```tsx
+<WrappedEoForm>
+  <WrappedEoFormItem
+    name="email"
+    label="邮箱"
+    required
+    pattern="^[\w.-]+@[\w.-]+\.\w+$"
+    message={{
+      required: "邮箱不能为空",
+      pattern: "邮箱格式不正确",
+    }}
+  >
+    <WrappedEoInput placeholder="请输入邮箱" />
+  </WrappedEoFormItem>
+  <WrappedEoFormItem
+    name="age"
+    label="年龄"
+    type="number"
+    min={1}
+    max={120}
+    message={{
+      min: "年龄不能小于 1",
+      max: "年龄不能超过 120",
+    }}
+  >
+    <WrappedEoInput placeholder="请输入年龄" />
+  </WrappedEoFormItem>
+  <WrappedEoFormItem
+    name="code"
+    label="编码"
+    validator={(value) =>
+      value && /^[A-Z]/.test(value)
+        ? null
+        : { message: "编码必须以大写字母开头" }
+    }
+  >
+    <WrappedEoInput placeholder="请输入编码" />
+  </WrappedEoFormItem>
+  <WrappedEoSubmitButtons submitText="提交" />
+</WrappedEoForm>
+```
+
+### Initial Value and ValuePropsName
+
+展示 value 初始值和 valuePropsName 的使用方式，以及 trim 自动去空格特性。
+
+```tsx
+<WrappedEoForm>
+  <WrappedEoFormItem
+    name="city"
+    label="城市"
+    value="Beijing"
+    valuePropsName="value"
+    trim
+  >
+    <WrappedEoInput placeholder="请输入城市" />
+  </WrappedEoFormItem>
+  <WrappedEoFormItem
+    name="isActive"
+    label="是否激活"
+    valuePropsName="checked"
+    needValidate={false}
+  >
+    <WrappedEoSwitch />
+  </WrappedEoFormItem>
+  <WrappedEoSubmitButtons submitText="提交" />
+</WrappedEoForm>
+```
+
+### Layout and Size
+
+演示表单项的不同布局方式和尺寸设置，以及通过 trigger 指定事件触发方法名。
+
+```tsx
+<WrappedEoForm layout="horizontal">
+  <WrappedEoFormItem
+    name="name"
+    label="姓名"
+    required
+    layout="horizontal"
+    size="large"
+    trigger="onChange"
+  >
+    <WrappedEoInput placeholder="请输入姓名" />
+  </WrappedEoFormItem>
+  <WrappedEoSubmitButtons submitText="提交" />
+</WrappedEoForm>
+```