@next-bricks/form 1.21.10 → 1.21.12

package/docs/eo-color-picker.react.md

@@ -0,0 +1,160 @@
+---
+tagName: eo-color-picker
+displayName: WrappedEoColorPicker
+description: 颜色选择器
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoColorPicker
+
+> 颜色选择器
+
+## 导入
+
+```tsx
+import { WrappedEoColorPicker } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性         | 类型                             | 必填 | 默认值   | 说明                                                                                             |
+| ------------ | -------------------------------- | ---- | -------- | ------------------------------------------------------------------------------------------------ |
+| name         | `string`                         | 否   | -        | 字段名称                                                                                         |
+| label        | `string`                         | 否   | -        | 字段说明                                                                                         |
+| value        | `string`                         | 否   | -        | 值                                                                                               |
+| defaultValue | `string \| Color`                | 否   | -        | 颜色默认的值                                                                                     |
+| required     | `boolean`                        | 否   | -        | 是否必填                                                                                         |
+| allowClear   | `boolean`                        | 否   | -        | 允许清除选择的颜色                                                                               |
+| size         | `"small" \| "middle" \| "large"` | 否   | `middle` | 设置触发器大小                                                                                   |
+| showText     | `boolean`                        | 否   | -        | 显示颜色文本                                                                                     |
+| disabled     | `boolean`                        | 否   | -        | 是否禁用                                                                                         |
+| format       | `"rgb" \| "hex" \| "hsb"`        | 否   | `hex`    | 颜色格式                                                                                         |
+| configProps  | `Partial<ColorPickerProps>`      | 否   | -        | 透传 antd ColorPicker 属性 [ColorPickerProps](https://ant.design/components/color-picker-cn#api) |
+
+## Events
+
+| 事件     | detail                                                                                          | 说明                                       |
+| -------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| onChange | `string \| undefined` — 选中的颜色值，格式由 format 属性决定（hex/rgb/hsb），清除时为 undefined | 颜色变化事件, 返回值格式和`format`格式一致 |
+
+## Examples
+
+### Basic
+
+基础用法，选择颜色后通过 onChange 事件获取颜色值。
+
+```tsx
+<WrappedEoColorPicker onChange={(e) => console.log(e.detail)} />
+```
+
+### Size
+
+通过 size 属性设置颜色选择器触发器的尺寸大小。
+
+```tsx
+<WrappedEoFlexLayout justifyContent="start" gap="20px">
+  <WrappedEoColorPicker size="small" value="#ff4d4f" />
+  <WrappedEoColorPicker size="middle" value="#36b545" />
+  <WrappedEoColorPicker size="large" value="#1677ff" />
+</WrappedEoFlexLayout>
+```
+
+### ShowText
+
+设置 showText 为 true，在颜色选择器旁边显示当前颜色的文本值。
+
+```tsx
+<WrappedEoColorPicker
+  showText={true}
+  value="#1677ff"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### AllowClear
+
+设置 allowClear 为 true，允许用户清除已选颜色；结合 defaultValue 设置初始颜色。
+
+```tsx
+<WrappedEoColorPicker
+  allowClear={true}
+  defaultValue="#f5a623"
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### Formats
+
+通过 format 属性控制颜色输出格式，支持 hex、rgb 和 hsb 三种格式。
+
+```tsx
+<WrappedEoFlexLayout justifyContent="start" gap="20px">
+  <WrappedEoColorPicker format="hex" value="#FCFA0E" showText={true} />
+  <WrappedEoColorPicker
+    format="rgb"
+    value="rgb(80, 227, 194)"
+    showText={true}
+  />
+  <WrappedEoColorPicker
+    format="hsb"
+    value="hsb(215, 91%, 100%)"
+    showText={true}
+  />
+</WrappedEoFlexLayout>
+```
+
+### Disabled
+
+设置 disabled 为 true 禁用颜色选择器，用户无法进行交互。
+
+```tsx
+<WrappedEoColorPicker disabled={true} value="#1677ff" showText={true} />
+```
+
+### ConfigProps
+
+通过 configProps 透传 antd ColorPicker 的高级属性，例如设置预设颜色。
+
+```tsx
+<WrappedEoColorPicker
+  showText={true}
+  configProps={{
+    presets: [
+      {
+        label: "推荐颜色",
+        colors: [
+          "#F5222D",
+          "#FA8C16",
+          "#FADB14",
+          "#52C41A",
+          "#1677FF",
+          "#722ED1",
+        ],
+      },
+    ],
+  }}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Form
+
+在表单中使用颜色选择器，配合 name、label、required 进行表单校验。
+
+```tsx
+<WrappedEoForm
+  onValidateSuccess={(e) => console.log(e.detail)}
+  onValidateError={(e) => console.log(e.detail)}
+>
+  <WrappedEoColorPicker
+    name="color"
+    label="颜色"
+    required={true}
+    defaultValue="#1677FF"
+    showText={true}
+    onChange={(e) => console.log(e.detail)}
+  />
+  <WrappedEoSubmitButtons />
+</WrappedEoForm>
+```

package/docs/eo-date-picker.md

@@ -1,14 +1,72 @@
-构件 `eo-date-picker`
+---
+tagName: eo-date-picker
+displayName: WrappedEoDatePicker
+description: 日期选择器
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-date-picker
+
+> 日期选择器
+
+## Props
+
+| 属性               | 类型                     | 必填 | 默认值 | 说明                                                                               |
+| ------------------ | ------------------------ | ---- | ------ | ---------------------------------------------------------------------------------- |
+| name               | `string`                 | 否   | -      | 日期选择器字段名                                                                   |
+| label              | `string`                 | 否   | -      | 日期选择器说明                                                                     |
+| value              | `string`                 | 否   | -      | 日期选择器的初始值                                                                 |
+| placeholder        | `string`                 | 否   | -      | 日期选择器占位说明                                                                 |
+| message            | `Record<string, string>` | 否   | -      | 校验文本信息                                                                       |
+| disabled           | `boolean`                | 否   | -      | 是否禁用                                                                           |
+| required           | `boolean`                | 否   | -      | 是否必填                                                                           |
+| showTime           | `boolean`                | 否   | -      | 是否显示时间，当设为 `true` 时，请同时设置 `format` 为 `YYYY-MM-DD HH:mm:ss`       |
+| format             | `string`                 | 否   | -      | 显示预览的格式，具体配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) |
+| picker             | `PickerMode`             | 否   | -      | 设置选择器类型，可选值：`date` \| `week` \| `month` \| `quarter` \| `year`         |
+| futureDateDisabled | `boolean`                | 否   | -      | 不可选择未来日期，优先级高于 `disabledDate`                                        |
+| disabledDate       | `DisabledDateType`       | 否   | -      | 不可选择的日期                                                                     |
+| useFastSelectBtn   | `boolean`                | 否   | -      | 启用快速切换按钮，显示上一个/当前/下一个的快速选项                                 |
+| inputStyle         | `CSSProperties`          | 否   | -      | 输入框样式                                                                         |
+
+## Events
+
+| 事件   | detail                          | 说明                                      |
+| ------ | ------------------------------- | ----------------------------------------- |
+| change | `string` — 格式化后的日期字符串 | 日期变化时触发                            |
+| ok     | `string` — 格式化后的日期字符串 | 点击确定按钮触发（showTime 为 true 使用） |
 
 ## Examples
 
 ### Basic
 
+展示日期选择器的基本用法。
+
 ```yaml preview minHeight="450px"
 - brick: eo-date-picker
 ```
 
-### picker
+### 日期时间选择
+
+展示开启时间选择、指定格式并监听 ok 事件的用法。
+
+```yaml preview minHeight="450px"
+- brick: eo-date-picker
+  events:
+    ok:
+      action: console.log
+    change:
+      action: console.log
+  properties:
+    showTime: true
+    value: "2020-02-01 14:30:00"
+    format: "YYYY-MM-DD HH:mm:ss"
+    placeholder: 选择日期时间
+```
+
+### 选择器类型与快速切换
+
+通过 picker 属性设置选择器类型（天/周/月/季度/年），并启用快速切换按钮；还可通过 inputStyle 自定义输入框宽度。
 
 ```yaml preview minHeight="550px"
 - brick: eo-radio
@@ -29,61 +87,18 @@
         value: quarter
       - label: 年
         value: year
-- brick: div
-  properties:
-    style:
-      display: grid
-      gap: 1em
-  children:
-    - brick: eo-button
-      properties:
-        textContent: 中文
-      events:
-        click:
-          useProvider: basic.change-language
-          args:
-            - zh
-          callback:
-            success:
-              action: message.success
-              args:
-                - '<% I18N_TEXT({ zh: "你好", "en": "Hello" }) %>'
-    - brick: eo-button
-      properties:
-        textContent: English
-      events:
-        click:
-          useProvider: basic.change-language
-          args:
-            - en
-          callback:
-            success:
-              action: message.success
-              args:
-                - '<% I18N_TEXT({ zh: "你好", "en": "Hello" }) %>'
 - brick: eo-date-picker
   properties:
     id: datePicker
     useFastSelectBtn: true
-```
-
-### showTime
-
-```yaml preview minHeight="450px"
-- brick: eo-date-picker
-  events:
-    ok:
-      action: console.log
-    change:
-      action: console.log
-  properties:
-    showTime: true
-    value: "2020-02-01 14:30:00"
-    format: "YYYY-MM-DD HH:mm:ss"
+    inputStyle:
+      width: 200px
 ```
 
 ### 禁用日期
 
+通过 disabledDate 禁止特定日期或时间段，通过 futureDateDisabled 禁止选择未来日期。
+
 ```yaml preview minHeight="450px"
 - brick: eo-date-picker
   events:
@@ -102,9 +117,24 @@
     format: "YYYY-MM-DD HH:mm:ss"
     showTime: true
     value: "2019-10-01 00:00:00"
+    futureDateDisabled: true
+```
+
+### 禁用状态
+
+展示禁用状态下日期选择器的效果。
+
+```yaml preview minHeight="450px"
+- brick: eo-date-picker
+  properties:
+    disabled: true
+    value: "2024-01-15"
+    placeholder: 已禁用
 ```
 
-### With Form
+### 表单集成
+
+在表单中使用日期选择器，支持 label、name、required 及自定义校验信息。
 
 ```yaml preview minHeight="450px"
 - brick: eo-form
@@ -119,5 +149,7 @@
         label: 日期
         name: date
         required: true
+        message:
+          required: 请选择日期
     - brick: eo-submit-buttons
 ```

package/docs/eo-date-picker.react.md

@@ -0,0 +1,146 @@
+---
+tagName: eo-date-picker
+displayName: WrappedEoDatePicker
+description: 日期选择器
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# WrappedEoDatePicker
+
+> 日期选择器
+
+## 导入
+
+```tsx
+import { WrappedEoDatePicker } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性               | 类型                     | 必填 | 默认值 | 说明                                                                               |
+| ------------------ | ------------------------ | ---- | ------ | ---------------------------------------------------------------------------------- |
+| name               | `string`                 | 否   | -      | 日期选择器字段名                                                                   |
+| label              | `string`                 | 否   | -      | 日期选择器说明                                                                     |
+| value              | `string`                 | 否   | -      | 日期选择器的初始值                                                                 |
+| placeholder        | `string`                 | 否   | -      | 日期选择器占位说明                                                                 |
+| message            | `Record<string, string>` | 否   | -      | 校验文本信息                                                                       |
+| disabled           | `boolean`                | 否   | -      | 是否禁用                                                                           |
+| required           | `boolean`                | 否   | -      | 是否必填                                                                           |
+| showTime           | `boolean`                | 否   | -      | 是否显示时间，当设为 `true` 时，请同时设置 `format` 为 `YYYY-MM-DD HH:mm:ss`       |
+| format             | `string`                 | 否   | -      | 显示预览的格式，具体配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) |
+| picker             | `PickerMode`             | 否   | -      | 设置选择器类型，可选值：`date` \| `week` \| `month` \| `quarter` \| `year`         |
+| futureDateDisabled | `boolean`                | 否   | -      | 不可选择未来日期，优先级高于 `disabledDate`                                        |
+| disabledDate       | `DisabledDateType`       | 否   | -      | 不可选择的日期                                                                     |
+| useFastSelectBtn   | `boolean`                | 否   | -      | 启用快速切换按钮，显示上一个/当前/下一个的快速选项                                 |
+| inputStyle         | `CSSProperties`          | 否   | -      | 输入框样式                                                                         |
+
+## Events
+
+| 事件     | detail                          | 说明                                      |
+| -------- | ------------------------------- | ----------------------------------------- |
+| onChange | `string` — 格式化后的日期字符串 | 日期变化时触发                            |
+| onOk     | `string` — 格式化后的日期字符串 | 点击确定按钮触发（showTime 为 true 使用） |
+
+## Examples
+
+### Basic
+
+展示日期选择器的基本用法。
+
+```tsx
+<WrappedEoDatePicker />
+```
+
+### 日期时间选择
+
+展示开启时间选择、指定格式并监听 ok 事件的用法。
+
+```tsx
+<WrappedEoDatePicker
+  showTime={true}
+  value="2020-02-01 14:30:00"
+  format="YYYY-MM-DD HH:mm:ss"
+  placeholder="选择日期时间"
+  onOk={(e) => console.log(e.detail)}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### 选择器类型与快速切换
+
+通过 picker 属性设置选择器类型（天/周/月/季度/年），并启用快速切换按钮；还可通过 inputStyle 自定义输入框宽度。
+
+```tsx
+import { useState } from "react";
+
+function Demo() {
+  const [picker, setPicker] = useState("date");
+  return (
+    <>
+      <WrappedEoRadio
+        options={[
+          { label: "天", value: "date" },
+          { label: "周", value: "week" },
+          { label: "月", value: "month" },
+          { label: "季度", value: "quarter" },
+          { label: "年", value: "year" },
+        ]}
+        onChange={(e) => setPicker(e.detail.value)}
+      />
+      <WrappedEoDatePicker
+        picker={picker}
+        useFastSelectBtn={true}
+        inputStyle={{ width: 200 }}
+      />
+    </>
+  );
+}
+```
+
+### 禁用日期
+
+通过 disabledDate 禁止特定日期或时间段，通过 futureDateDisabled 禁止选择未来日期。
+
+```tsx
+<WrappedEoDatePicker
+  disabledDate={[
+    { weekday: 4 },
+    { date: "10-15", year: "2010-2020" },
+    { hour: "12-18", minute: "0-29", weekday: 3 },
+  ]}
+  format="YYYY-MM-DD HH:mm:ss"
+  showTime={true}
+  value="2019-10-01 00:00:00"
+  futureDateDisabled={true}
+  onOk={(e) => console.log(e.detail)}
+  onChange={(e) => console.log(e.detail)}
+/>
+```
+
+### 禁用状态
+
+展示禁用状态下日期选择器的效果。
+
+```tsx
+<WrappedEoDatePicker disabled={true} value="2024-01-15" placeholder="已禁用" />
+```
+
+### 表单集成
+
+在表单中使用日期选择器，支持 label、name、required 及自定义校验信息。
+
+```tsx
+<WrappedEoForm
+  onValidateSuccess={(e) => console.log(e.detail)}
+  onValuesChange={(e) => console.log(e.detail)}
+>
+  <WrappedEoDatePicker
+    label="日期"
+    name="date"
+    required={true}
+    message={{ required: "请选择日期" }}
+  />
+  <WrappedEoSubmitButtons />
+</WrappedEoForm>
+```

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

@@ -1,4 +1,43 @@
-动态表单构件。
+---
+tagName: eo-dynamic-form-item
+displayName: EoDynamicFormItem
+description: 动态表单
+category: form-input-basic
+source: "@next-bricks/form"
+---
+
+# eo-dynamic-form-item
+
+> 动态表单
+
+## 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                                                      | 说明             |
+| ---------- | ----------------------------------------------------------- | ---------------- |
+| change     | `DynamicFormValuesItem[]` — 整个动态表单当前所有行的值列表  | 表单值改变时触发 |
+| row.add    | `rowDataType` — { detail: 该行的默认值, index: 该行的位置 } | 增加一行时触发   |
+| row.remove | `rowDataType` — { detail: 该行的值, index: 该行的位置 }     | 移除一行时触发   |
+
+## Examples
+
+### 与表单集成
+
+在 eo-form 中使用动态表单，支持必填校验和唯一性校验。
 
 ```yaml preview
 - brick: eo-form
@@ -47,9 +86,9 @@
         submitText: 提交
 ```
 
-## Examples
+### 显示标签
 
-### Label
+展示带有 label 标签的动态表单。
 
 ```yaml preview
 - brick: eo-dynamic-form-item
@@ -69,7 +108,9 @@
             - Shenzhen
 ```
 
-### Value
+### 设置初始值
+
+通过 value 属性设置动态表单的初始数据。
 
 ```yaml preview
 - brick: eo-dynamic-form-item
@@ -93,15 +134,17 @@
             - Shenzhen
 ```
 
-### Hide or disable buttons
+### 隐藏或禁用按钮
+
+通过函数动态控制添加和删除按钮的显示与禁用状态。
 
 ```yaml preview
 - brick: eo-dynamic-form-item
   properties:
-    hideAddButton: <% (value)=>value.length===5 %>
-    disabledAddButton: <% (value)=>value.length===4 %>
-    hideRemoveButton: <% (value,row)=>row===1 %>
-    disabledRemoveButton: <% (value,row)=>row===0 %>
+    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
@@ -123,7 +166,9 @@
             - abc4
 ```
 
-### Event
+### 监听事件
+
+监听动态表单的值变化、添加行和删除行事件。
 
 ```yaml preview
 - brick: eo-dynamic-form-item
@@ -142,12 +187,12 @@
             - Guangzhou
             - Shenzhen
   events:
-    row.remove:
-      action: console.log
-    row.add:
-      action: console.log
     change:
       - action: message.success
         args:
-          - <% JSON.stringify(EVENT.detail) %>
+          - "<% JSON.stringify(EVENT.detail) %>"
+    row.add:
+      action: console.log
+    row.remove:
+      action: console.log
 ```