npm package: @mc20230601/filter-form
Description: 这是一个带有表单组相互关联功能的数据驱动表单
Author: username@email.com
Latest version: 0.1.4

### 表单数据 (FormSchema)

| 参数      | 说明                                           | 类型   | 可选值            | 默认值  |
| :-------- | :--------------------------------------------- | :----- | :---------------- | :------ |
| mode      | 表单状态                                       | String | add/edit/readOnly | 'add'   |
| groups    | 存放 `表单组数据` 的数组 (`Array<GrouopItem>`) | Array  | —                 | —       |
| formSize  | 表单的所有输入框尺寸                           | String | medium/small/mini | 'small' |
| lineSpace | 输入框的行间距 `px`                            | Number | —                 | 22      |
| rules?    | 验证规则                                       | Object | —                 | —       |

### 表单事件 (FormSchema)

| 参数     | 说明                                                   | 参数                                           |
| :------- | :----------------------------------------------------- | :--------------------------------------------- |
| onLoad?  | `mode`为`edit`编辑模式时才会生效，获取初始化数据的方法 | `() => Promise< Record< string, any > >`       |
| onSubmit | 提交表单触发的函数                                     | `(state: any) => Promise<Record<string, any>>` |



### 表单组数据 (GrouopItem)

| 参数          | 说明                                          | 类型     | 可选值 | 默认值 |
| :------------ | :-------------------------------------------- | :------- | :----- | :----- |
| key           | 暂时无用                                      | String   | —      | —      |
| name          | 表单组的标题                                  | String   | —      | —      |
| visible       | 表单组是否显示                                | Booolean | —      | false  |
| items         | 表单组内包含的 输入框数据 (`Array<FormItem>`) | Array    | —      | —      |
| relevanceKey? | 关联表单组的标识                              | String   | —      | —      |



### 表单组数据 (FormItem)

| 参数               | 说明                                                         | 类型                 | 可选值                                                       | 默认值  |
| :----------------- | :----------------------------------------------------------- | :------------------- | :----------------------------------------------------------- | :------ |
| relevance?         | 是否存在关联                                                 | Boolean              | —                                                            | false   |
| type               | 输入框的种类                                                 | String               | input/textarea/select/multiple-select/checkbox/radio-group   | 'input' |
| subItemType?       | 输入框子种类                                                 | String               | —                                                            | —       |
| label              | 输入框的标题                                                 | String               | —                                                            | —       |
| prop               | 输入框数据对应的`prop`字段                                   | String               | —                                                            | —       |
| span？             | 输入框在 `24格栅格化` 的行内占几格                           | Number               | —                                                            | 8       |
| required?          | 是否必填                                                     | Boolean              | —                                                            | false   |
| default?           | 默认值                                                       | String/Array/Boolean | —                                                            | —       |
| placeholder?       | `placeholder`只有输入框类型的输入框生效                      | String               | —                                                            | —       |
| disabled?          | 是否只读                                                     | Boolean              | —                                                            | false   |
| datePickerOptions? | 时间选择器的配置项 (`DatePickerOptions`)                     | Object               | —                                                            | —       |
| switchOptions?     | `switch` 的配置项 (`SwitchOptions`)                          | Object               | —                                                            | —       |
| options?           | 下拉框等种类选择器的选项数据；<br />如果参数类型为`Function`，则会自动执行获取抛出的数据(`Array<OptionsItem>/Function` ) | Array/Function       | —                                                            | —       |
| collapseTags?      | 下拉框多选时特殊字段：是否将多个选项值合并为数字显示         | Boolean              | —                                                            | false   |
| border?            | `checkbox` 的选项是否带边框                                  | Boolean              | —                                                            | false   |
| justifyContent?    | `checkbox`/`switch` 的选项水平排列方式                       | String               | start/center/end/<br />around(`checkbox`)<br />/between(`checkbox`) | 'start' |



### 下拉框等其他类型选择器的选项数据 (OptionsItem)

| 参数          | 说明                                                         | 类型     | 可选值 | 默认值 |
| :------------ | :----------------------------------------------------------- | :------- | :----- | :----- |
| value         | 值                                                           | String   | —      | —      |
| label         | 标题                                                         | String   | —      | —      |
| disabled?     | 选项是否禁止选中                                             | Booolean | —      | false  |
| relevanceKey? | 关联表单组的标识 (在表单组数据中的`relevance`为`true`时生效，和表单组数据中的`relevanceKey`对应) | String   | —      | —      |



### `switch` 的配置数据 (SwitchOptions)

| 参数           | 说明         | 类型   | 可选值 | 默认值 |
| :------------- | :----------- | :----- | :----- | :----- |
| activeColor?   | 打开时的颜色 | String | —      | —      |
| inactiveColor? | 关闭时的颜色 | String | —      | —      |
| activeText?    | 打开的文字   | String | —      | —      |
| inactiveText?  | 关闭的文字   | String | —      | —      |



### 日期选择器的配置数据 (DatePickerOptions)

| 参数              | 说明                   | 类型         | 可选值            | 默认值 |
| :---------------- | :--------------------- | :----------- | :---------------- | :----- |
| align?            | 内容对齐方式           | String       | left/center/right | left   |
| defaultTime?      | 默认值                 | String/Array | —                 | —      |
| valueFormat?      | 日期格式               | String       | —                 | —      |
| pickerOptions?    | 快捷选项配置           | Object       | —                 | {}     |
| placeholder?      | 单独选择框默认值       | String       | —                 | —      |
| startPlaceholder? | 多选选择框默认开始时间 | String       | —                 | —      |
| endPlaceholder?   | 多选选择框默认结束时间 | String       | —                 | —      |
| rangeSeparator?   | 连接符                 | String       | —                 | '-'    |