@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/components/check-card.md

@@ -0,0 +1,108 @@
+# CheckCard 多选卡片
+
+## 简介
+
+PlusCheckCard 集合多种相关联说明信息，并且可被选择的卡片。PlusCheckCardGroup 集成 PlusCheckCard 可以实现多选功能。
+
+## 基础用法
+
+:::demo
+
+check-card/basic
+
+:::
+
+## 不同尺寸
+
+配置 size 尺寸大小，当前可选 large，default，small，不同尺寸仅宽度不同。可以根据需要修改样式自定义大小。
+
+:::demo
+
+check-card/size
+
+:::
+
+## 禁用
+
+配置 disabled 可实现禁用。
+
+:::demo
+
+check-card/disabled
+
+:::
+
+## 操作栏
+
+:::demo
+
+check-card/extra
+
+:::
+
+## 自定义 (render)
+
+:::warning 注意
+**render 函数的优先级高于插槽**
+:::
+
+`title`，`description` 和`avatar` 属性支持 字符串和渲染函数 和`undefined`，当值是 undefined 时不渲染。
+
+:::demo
+
+check-card/custom
+
+:::
+
+## 自定义 (jsx/tsx)
+
+:::demo
+
+check-card/tsx
+
+:::
+
+## 自定义 (插槽)
+
+:::warning 注意
+**插槽优先级低于 render**
+:::
+
+`title`，`description` 和`avatar` 支持 同名插槽。
+
+:::demo
+
+check-card/slot
+
+:::
+
+## CheckCard API
+
+## CheckCard Attributes
+
+| 名称                    | 说明                                                                       | 类型                                                                                       | 默认值 | 是否必须 |
+| ----------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------ | -------- |
+| `model-value / v-model` | 绑定值                                                                     | `boolean`                                                                                  |        | 否       |
+| `avatar`                | 头像                                                                       | `string`/ `function` <docs-tip content="(data) => VNode / string"></docs-tip>              |        | 否       |
+| `avatarProps`           | [el-avatar](https://element-plus.org/zh-CN/component/avatar.html) 的 props | `object` [ ElAvatarProps](https://element-plus.org/zh-CN/component/avatar.html#attributes) |        | 否       |
+| `title`                 | 标题                                                                       | `string`/ `function` <docs-tip content="(data) => VNode / string"></docs-tip>              |        | 否       |
+| `description`           | 描述                                                                       | `string`/ `function` <docs-tip content="(data) => VNode / string"></docs-tip>              |        | 否       |
+| `extra`                 | 操作栏                                                                     | `function` <docs-tip content="(data) => VNode / string"></docs-tip>                        |        | 否       |
+| `size`                  | 尺寸                                                                       | `string` <docs-tip content='"default" / "small" / "large"'></docs-tip>                     |        | 否       |
+| `disabled`              | 禁用                                                                       | `boolean`                                                                                  |        | 否       |
+
+## CheckCard Events
+
+| 名称     | 说明           | 类型                                                                 |
+| -------- | -------------- | -------------------------------------------------------------------- |
+| `change` | 点击卡片时触发 | `function` <docs-tip content='(checked:boolean) => void'></docs-tip> |
+| `extra`  | 点击操作栏触发 | `function` <docs-tip content='() => void'></docs-tip>                |
+
+## CheckCard Slots
+
+| 插槽名        | 说明          | 作用域插槽参数                                                      |
+| ------------- | ------------- | ------------------------------------------------------------------- |
+| `avatar`      | 自定义 头像   | `object` <docs-tip content='{avatar,title,description}'></docs-tip> |
+| `title`       | 自定义 标题   | `object` <docs-tip content='{avatar,title,description}'></docs-tip> |
+| `description` | 自定义 描述   | `object` <docs-tip content='{avatar,title,description}'></docs-tip> |
+| `extra`       | 自定义 操作栏 | `object` <docs-tip content='{avatar,title,description}'></docs-tip> |

package/docs/components/config.md

@@ -0,0 +1,99 @@
+# 通用配置
+
+::: tip 提示
+文中的一些类型来自 <a href="/components/type.html" style="text-decoration: underline;">基础 Ts 类型</a> 章节，建议先阅读。
+:::
+
+高级组件中除了布局组件[Layout](/components/layout.html)和多选卡片[CheckCardGroup ](/components/check-card-group.html)之外的组件通用配置。
+
+配置的核心字段是`valueType`，渲染的 key 是`prop`（所以需要保证唯一）。
+
+## columns 配置
+
+TS 类型 `PlusColumn`
+
+| 名称                                                                                         | 说明                                                                                                                                                                                                                                                                                                  | 类型                                                                                                                                                                                                       | 默认值                             | 是否必须                                 |
+| -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ---------------------------------------- |
+| `prop` （**不可重复**）                                                                      | 表格对应列内容的字段名 ；在 form/search 中是 el-input 等所有表单项的双向绑定的值；在 descriptions 是 el-descriptions-item 的值对应的字段； **支持`x.y.z`形式的多（无限）级数据形式**； 表单中<el-tag>v0.1.7</el-tag>版本开始支持多级                                                                  | `string`                                                                                                                                                                                                   |                                    | 是                                       |
+| `label`                                                                                      | 表格表头显示的标题 ；在 form 中是 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 的 label；在 descriptions 是 el-descriptions-item 的 label；<el-tag>v0.1.0</el-tag> 版本开始支持计算属性，可用于实现国际化。                                                | `string`\|`ComputedRef<string>`(<el-tag>v0.1.0</el-tag>新增)                                                                                                                                               |                                    | 否 (小于<el-tag>v0.0.10</el-tag>是必须 ) |
+| `width`                                                                                      | 表格列宽                                                                                                                                                                                                                                                                                              | `string`\| `number`                                                                                                                                                                                        |                                    | 否                                       |
+| `minWidth`                                                                                   | 表格列最小宽                                                                                                                                                                                                                                                                                          | `string`\| `number`                                                                                                                                                                                        |                                    | 否                                       |
+| **`valueType`**                                                                              | 值的类型                                                                                                                                                                                                                                                                                              | `string`([TableValueType](/components/type.html#tablevaluetype) / [FormItemValueType](/components/type.html#formitemvaluetype) )                                                                           |                                    | 否                                       |
+| `editable`                                                                                   | 当值为`true`时，表格中整列显示的是`valueType`取值对应的可编辑的表单，`valueType`取值为 [FormItemValueType](/components/type.html#formitemvaluetype)                                                                                                                                                   | `boolean`                                                                                                                                                                                                  | `false`                            | 否                                       |
+| <el-text tag="del">`headerFilter`</el-text> <el-tag type="danger">deprecated v0.0.3</el-tag> | 表格列设置中禁止表格当前列的表头过滤，已废弃，请使用`disabledHeaderFilter`代替                                                                                                                                                                                                                        | `boolean`                                                                                                                                                                                                  | `false`                            | 否                                       |
+| `disabledHeaderFilter` <el-tag>v0.0.3</el-tag>                                               | 表格列设置中禁止表格当前列的表头过滤                                                                                                                                                                                                                                                                  | `boolean`                                                                                                                                                                                                  | `false`                            | 否                                       |
+| `headerIsChecked` <el-tag>v0.1.22</el-tag>                                                   | 表格列设置中当前表格项是否勾选，默认勾选                                                                                                                                                                                                                                                              | `boolean`                                                                                                                                                                                                  | `true`                             | 否                                       |
+| `tableColumnProps`                                                                           | 表格 column，支持所有[el-table-column 属性](https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7) （不包含 `label,prop,width,minWidth，formatter`），[支持事件透传](/components/attrs.html)                                                                            | `object` [ElTableColumnProps](https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7)                                                                                         |                                    | 否                                       |
+| `preview`                                                                                    | 表格列图片预览，仅当 valueType 等于 img 时生效；[ el-image](https://element-plus.org/zh-CN/component/image.html) 图片预览 默认开启 给 false 关闭                                                                                                                                                      | `boolean`                                                                                                                                                                                                  |                                    | 否                                       |
+| `linkText`                                                                                   | 表格列 link 文字，valueType 等于 link 时生效；有值时则表格的整列都会显示这个值，默认取得是 prop 对应的表格数据                                                                                                                                                                                        | `string`                                                                                                                                                                                                   |                                    | 否                                       |
+| `descriptionsItemProps`                                                                      | 描述行，[el-descriptions-item](https://element-plus.org/zh-CN/component/descriptions.html#descriptionsitem-attributes) 的 props ，[支持事件透传](/components/attrs.html)                                                                                                                              | `object` [DescriptionsItemProps](https://element-plus.org/zh-CN/component/descriptions.html#descriptionsitem-attributes)                                                                                   |                                    | 否                                       |
+| `renderDescriptionsItem`<el-tag>v0.0.2</el-tag>                                              | 自定义[PlusDescriptions ](/components/descriptions.html) 单行显示内容，在[PlusDescriptions ](/components/descriptions.html)组件中优先级最高，高于 render,renderHTML                                                                                                                                   | `function` <docs-tip content='(data: { value: string; column: PlusColumn; row: RecordType }) =>  VNode \| string'></docs-tip>                                                                              |                                    | 否                                       |
+| `renderDescriptionsLabel`<el-tag>v0.0.2</el-tag>                                             | 自定义[PlusDescriptions ](/components/descriptions.html) 单行 label 显示内容                                                                                                                                                                                                                          | `function` <docs-tip content='(data: { label: string; column: PlusColumn; row: RecordType }) =>  VNode \| string'></docs-tip>                                                                              |                                    | 否                                       |
+| `options`                                                                                    | `valueType` 为 `select`\|`radio`\|`checkbox`\|`plus-radio` 时的选项 ，支持数组，computed，函数，和 Promise                                                                                                                                                                                            | `array`\|`function`\|`promise`[OptionsType](/components/type.html#optionstype)                                                                                                                             |                                    | 否                                       |
+| `optionsMap`<el-tag>v0.1.15</el-tag>                                                         | 对 options 进行映射，仅对`valueType` 为 `select`\|`radio`\|`checkbox`\|`plus-radio` 时生效                                                                                                                                                                                                            | `object`<docs-tip content='{ label?: string; value?: string }'></docs-tip>                                                                                                                                 | `{ label: 'label',value: 'value'}` | 否                                       |
+| `customGetStatus`                                                                            | 自定义 options 的显示逻辑，需要返回一个[OptionsRow](/components/type.html#optionsrow)对象。                                                                                                                                                                                                           | `function` <docs-tip content=' (data: {options: OptionsRow[]; value: string / number;row: RecordType }) => OptionsRow'></docs-tip>                                                                         |                                    | 否                                       |
+| `tooltip`                                                                                    | 展示一个 icon，hover 时展示一些提示信息，<el-tag>v0.1.15</el-tag>新增了计算属性 ComputedRef 类型                                                                                                                                                                                                      | `string` \|`ComputedRef<string>`<el-tag>v0.1.15</el-tag> \| ( `object`\|`ComputedRef<object>`<el-tag>v0.1.15</el-tag> [ElTooltipProps](https://element-plus.org/zh-CN/component/tooltip.html#attributes) ) |                                    | 否                                       |
+| `render`                                                                                     | 自定义渲染表格/[PlusDescriptions ](/components/descriptions.html)单行显示内容，`render`的优先级最高，高于`renderHTML` 和 `valueType`                                                                                                                                                                  | `function` <docs-tip content='(value: any, data:{ row: object; index: number; column: PlusColumn}) =>   VNode \| string '></docs-tip>                                                                      |                                    | 否                                       |
+| `renderHTML`                                                                                 | 自定义渲染表格/[PlusDescriptions ](/components/descriptions.html)单行显示内容 需要返回一个 html 字符串，`renderHTML`的优先级低于`render`，高于 `valueType`。**谨慎使用，确保 HTML 字符串可信。**                                                                                                      | `function` <docs-tip content='(value: any, data:{ row: object; index: number; column: PlusColumn}) => string'></docs-tip>                                                                                  |                                    | 否                                       |
+| `renderHeader`                                                                               | 自定义渲染表格表头显示内容                                                                                                                                                                                                                                                                            | `function` <docs-tip content='(label: any, data:{ row: object; index: number; column: PlusColumn}) =>  VNode \| string '></docs-tip>                                                                       |                                    | 否                                       |
+| `formatter`<el-tag>v0.1.13</el-tag>                                                          | 格式化表格/PlusDescriptions 显示内容                                                                                                                                                                                                                                                                  | `function` <docs-tip content='(value: any, data:{ row: object; index: number; column: PlusColumn}) =>  string \| number '></docs-tip>                                                                      |                                    | 否                                       |
+| `formProps`                                                                                  | 表格中传递给 [PlusForm](/components/form.html) 的配置，支持所有 [PlusForm](/components/form.html) 的 props，表格编辑状态有效。[支持事件透传](/components/attrs.html)                                                                                                                                  | `object`[PlusFormProps](/components/form.html#form-attributes) ， <el-tag>v0.1.19</el-tag> 新增 computed，函数支持，不支持 Promise                                                                         |                                    | 否                                       |
+| [`formItemProps` ](https://element-plus.org/zh-CN/component/form.html#formitem-attributes)   | 传递给 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 的配置，支持所有 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 的 props。值支持对象 object，computed，函数和 Promise。[支持事件透传](/components/attrs.html) | `object`\|`function`\|`promise`[PropsItemType](/components/type.html#propsitemtype)                                                                                                                        |                                    | 否                                       |
+| `fieldProps`                                                                                 | 传递给具体表单项和表格显示的配置，如 el-input，el-select，el-tag，el-image 的 props。值支持对象 object，computed，函数和 Promise。[支持事件透传](/components/attrs.html)                                                                                                                              | `object`\|`function`\|`promise` [PropsItemType](/components/type.html#propsitemtype)                                                                                                                       |                                    | 否                                       |
+| `fieldSlots`                                                                                 | 表单（表格）单个项目的插槽，支持类似 el-input，el-select， el-image ，el-link 等所有表单（表格）单项的插槽                                                                                                                                                                                            | `object` <docs-tip content=' { [slotName: string]: (data?: any) =>  VNode \| string }'></docs-tip>                                                                                                         |                                    | 否                                       |
+| `fieldChildrenSlot`<el-tag>v0.0.7</el-tag>                                                   | 自定义表单每一项子项的插槽，例如自定义 el-checkbox-group 下 el-checkbox 的内容                                                                                                                                                                                                                        | `function` <docs-tip content='(option?: OptionsRow) => VNode \| string'></docs-tip>                                                                                                                        |                                    | 否                                       |
+| `renderField`                                                                                | 自定义渲染 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 下的 field-item 组件，自定义渲染表单数据双向绑定的核心方法是调用回调函数 `onChange` 把值传给表单                                                                                                   | `function` <docs-tip content='(value: any, onChange: (value: any) => void, props: PlusColumn) =>  VNode \| string'></docs-tip>                                                                             |                                    | 否                                       |
+| `renderLabel`                                                                                | 自定义渲染 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 的 label 显示内容                                                                                                                                                                                  | `function` <docs-tip content='(label: string, data:{ row: object; index: number; column: PlusColumn}) =>   VNode \| string'></docs-tip>                                                                    |                                    | 否                                       |
+| `hasLabel`                                                                                   | 表单中单个项目是否需要 label，默认 undefined，优先级高于表单的整体的 hasLabel                                                                                                                                                                                                                         | `boolean` <docs-tip content='boolean \|  Ref<boolean> \| ComputedRef<boolean>'></docs-tip>                                                                                                                 | `undefined`                        | 否                                       |
+| `renderExtra`                                                                                | 自定义渲染 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 下一行额外的内容                                                                                                                                                                                   | `function` <docs-tip content='( column: PlusColumn) =>   VNode \| string'></docs-tip>                                                                                                                      |                                    | 否                                       |
+| `renderPrevious`<el-tag>v0.1.25</el-tag>                                                     | 自定义渲染 [ el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-attributes) 上一行的内容                                                                                                                                                                                       | `function` <docs-tip content='( column: PlusColumn) =>   VNode \| string'></docs-tip>                                                                                                                      |                                    | 否                                       |
+| `renderErrorMessage` <el-tag>v0.1.23</el-tag>                                                | 自定义渲染 [ el-form-item ](https://element-plus.org/zh-CN/component/form.html#formitem-slots) `error`插槽的内容                                                                                                                                                                                      | `function` <docs-tip content='( column:  PlusColumn & { value?: FieldValueType, error?: string,  label?: string }) =>   VNode \| string'></docs-tip>                                                       |                                    | 否                                       |
+| `colProps`                                                                                   | [ el-col](https://element-plus.org/zh-CN/component/layout.html#col-attributes) 的 props。[支持事件透传](/components/attrs.html)                                                                                                                                                                       | `object` [ColProps](https://element-plus.org/zh-CN/component/layout.html#col-attributes)                                                                                                                   |                                    | 否                                       |
+| `order` <el-tag>v0.1.4</el-tag>                                                              | [PlusSearch](/components/search.html) 查询表单中的权重，权重大排序靠前，在 [PlusPage](/components/page.html) 组件中非常有用                                                                                                                                                                           | `number` <docs-tip content='number \|  ComputedRef<number>'></docs-tip>                                                                                                                                    | `0`                                | 否                                       |
+| `hideInDescriptions`                                                                         | 在 [PlusDescriptions](/components/descriptions.html) 组件中 隐藏                                                                                                                                                                                                                                      | `boolean` <docs-tip content='boolean \|  Ref<boolean> \| ComputedRef<boolean>'></docs-tip>                                                                                                                 | `false`                            | 否                                       |
+| `hideInForm`                                                                                 | 在 [PlusForm](/components/form.html) 组件中 隐藏                                                                                                                                                                                                                                                      | `boolean` <docs-tip content='boolean \|  Ref<boolean> \| ComputedRef<boolean>'></docs-tip>                                                                                                                 | `false`                            | 否                                       |
+| `hideInTable`                                                                                | 在 [PlusPage](/components/page.html) 组件中 隐藏                                                                                                                                                                                                                                                      | `boolean` <docs-tip content='boolean \|  Ref<boolean> \| ComputedRef<boolean>'></docs-tip>                                                                                                                 | `false`                            | 否                                       |
+| `hideInSearch`                                                                               | 在 [PlusSearch](/components/search.html) 组件中 隐藏                                                                                                                                                                                                                                                  | `boolean` <docs-tip content='boolean \|  Ref<boolean> \| ComputedRef<boolean>'></docs-tip>                                                                                                                 | `false`                            | 否                                       |
+
+## valueType 可选的表单值
+
+| valueType 表单值                      | 对应 element-plus 的表单组件                                                             | 对应 plus-pro-components 的组件                  | 对应的表格显示                                                                                                                                                          |
+| ------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autocomplete`                        | [el-autocomplete](https://element-plus.org/zh-CN/component/autocomplete.html)            |                                                  | 文本显示                                                                                                                                                                |
+| `cascader`                            | [el-cascader](https://element-plus.org/zh-CN/component/cascader.html)                    |                                                  | 文本显示                                                                                                                                                                |
+| `checkbox`                            | [el-checkbox-group,el-checkbox ](https://element-plus.org/zh-CN/component/checkbox.html) |                                                  | 显示值对应`options`的 `label`                                                                                                                                           |
+| `color-picker`                        | [el-color-picker](https://element-plus.org/zh-CN/component/color-picker.html)            |                                                  | 文本显示                                                                                                                                                                |
+| `date-picker`                         | [el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html)              |                                                  | 文本显示 默认格式化成` YYYY-MM-DD HH:mm:ss`； <el-tag>v0.1.6 新增</el-tag> 如果 fieldProps 中有`format`(优先)或`valueFormat`，则以`format`或`valueFormat`的格式显示时间 |
+| `input-number`                        | [el-input-number](https://element-plus.org/zh-CN/component/input-number.html)            |                                                  | 文本显示                                                                                                                                                                |
+| `radio`                               | [el-radio-radio,el-radio](https://element-plus.org/zh-CN/component/radio.html)           |                                                  | 显示值对应`options`的 `label`                                                                                                                                           |
+| `rate`                                | [el-rate](https://element-plus.org/zh-CN/component/rate.html)                            |                                                  | 文本显示                                                                                                                                                                |
+| `select`                              | [el-select](https://element-plus.org/zh-CN/component/select.html)                        |                                                  | 显示值对应`options`的 `label`                                                                                                                                           |
+| `slider`                              | [el-slider](https://element-plus.org/zh-CN/component/slider.html)                        |                                                  | 文本显示                                                                                                                                                                |
+| `switch`                              | [el-switch](https://element-plus.org/zh-CN/component/switch.html)                        |                                                  | 文本显示                                                                                                                                                                |
+| `time-picker`                         | [el-time-picker](https://element-plus.org/zh-CN/component/time-picker.html)              |                                                  | 文本显示                                                                                                                                                                |
+| `time-select`                         | [el-time-select](https://element-plus.org/zh-CN/component/time-select.html)              |                                                  | 文本显示                                                                                                                                                                |
+| `textarea`                            | [el-input ](https://element-plus.org/zh-CN/component/input.html#文本域) (type=textarea)  |                                                  | 文本显示                                                                                                                                                                |
+| `input`（默认值）                     | [el-input](https://element-plus.org/zh-CN/component/input.html) 表单默认值               |                                                  | 文本显示                                                                                                                                                                |
+| `text`                                | [el-text ](https://element-plus.org/zh-CN/component/text.html)                           |                                                  | 文本显示                                                                                                                                                                |
+| `transfer` <el-tag>v0.1.0</el-tag>    | [el-transfer](https://element-plus.org/zh-CN/component/transfer.html) 穿梭框             |                                                  | 文本显示                                                                                                                                                                |
+| `tree-select` <el-tag>v0.1.1</el-tag> | [el-tree-select](https://element-plus.org/zh-CN/component/tree-select.html) 树形选择     |                                                  | 文本显示                                                                                                                                                                |
+| `select-v2` <el-tag>v0.1.21</el-tag>  | [el-select-v2](https://element-plus.org/zh-CN/component/select-v2.html) 虚拟化选择器     |                                                  | 文本显示                                                                                                                                                                |
+| `plus-radio`                          |                                                                                          | [ plus-radio](/components/radio.html)            | 显示值对应`options`的 `label`                                                                                                                                           |
+| `plus-date-picker`                    |                                                                                          | [plus-date-picker](/components/date-picker.html) | 文本显示                                                                                                                                                                |
+| `plus-input-tag`                      |                                                                                          | [plus-input-tag](/components/input-tag.html)     | 文本显示                                                                                                                                                                |
+
+## valueType 可选的显示值
+
+| valueType 表格值                 | 对应 element-plus/原生的显示组件                                      | 说明                                                                                                         | 对应的编辑状态组件                                                  |
+| -------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
+| `undefined` （默认值）           | `span`                                                                | 显示默认值，显示文本                                                                                         | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `img`                            | [el-image](https://element-plus.org/zh-CN/component/image.html)       | 显示图片，自带预览，可使用配置项`preview`禁止                                                                | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `link`                           | [el-link](https://element-plus.org/zh-CN/component/link.html)         | 显示 [el-link](https://element-plus.org/zh-CN/component/link.html) ，配合配置项`fieldProps`和`linkText` 使用 | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `money`                          | `span`                                                                | 显示金钱                                                                                                     | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `tag`                            | [el-tag](https://element-plus.org/zh-CN/component/tag.html)           | 显示 [el-tag](https://element-plus.org/zh-CN/component/tag.html) ，配合配置项`fieldProps` 使用               | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `progress`                       | [el-progress](https://element-plus.org/zh-CN/component/progress.html) | 显示 [el-progress](https://element-plus.org/zh-CN/component/progress.html) ，配合配置项`fieldProps` 使用     | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `copy`                           | `span`                                                                | 文本后面有可以复制按钮                                                                                       | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `code`                           | `span`                                                                | 显示代码                                                                                                     | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `text`                           | `span`                                                                | 显示文本                                                                                                     | [el-text ](https://element-plus.org/zh-CN/component/text.html)      |
+| `avatar`<el-tag>v0.1.0</el-tag>  | [el-avatar](https://element-plus.org/zh-CN/component/avatar.html)     | 显示 头像                                                                                                    | [el-input ](https://element-plus.org/zh-CN/component/input.html)    |
+| `divider`<el-tag>v0.1.0</el-tag> | [el-divider](https://element-plus.org/zh-CN/component/divider.html)   | 显示 divider                                                                                                 | [el-divider](https://element-plus.org/zh-CN/component/divider.html) |

package/docs/components/date-picker.md

@@ -0,0 +1,81 @@
+# DatePicker
+
+## 简介
+
+PlusDatePicker 是由两个 el-date-picker （属性 type 不包含 range）组件组成，核心功能点是两个选择可以独立开来。
+
+## 基础用法
+
+:::demo
+
+date-picker/basic
+
+:::
+
+## DatePicker API
+
+## DatePicker Attributes
+
+| 名称                                                                                   | 说明                                                                                                    | 类型                                                                                                       | 默认值                                                              | 是否必须 |
+| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------- |
+| `model-value / v-model`                                                                | 绑定值                                                                                                  | `array` <docs-tip content='string[]'></docs-tip>                                                           |                                                                     | 否       |
+| `type`                                                                                 | [el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的类型                      | `string` <docs-tip content="'year' / 'month' / 'date' / 'dates' / 'datetime' / 'week'"></docs-tip>         | `datetime`                                                          | 否       |
+| <el-text tag="del">`format`</el-text> <el-tag type="danger">deprecated v0.1.0</el-tag> | 显示在输入框中的格式,已废弃                                                                             | `string`                                                                                                   | `YYYY-MM-DD HH:mm:ss`                                               | 否       |
+| `valueFormat`                                                                          | 绑定值的格式。 不指定则绑定值为 Date 对象                                                               | `string`                                                                                                   | `YYYY-MM-DD HH:mm:ss`                                               | 否       |
+| `rangeSeparator`                                                                       | 开始时间和结束时间中间的分隔符                                                                          | `string`                                                                                                   | `/`                                                                 | 否       |
+| `disabled` <el-tag>v0.1.14</el-tag>                                                    | 禁用                                                                                                    | `boolean`                                                                                                  | `false`                                                             | 否       |
+| `startProps`                                                                           | 开始的[el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的 props（支持所有）  | `object` [ElDatePickerProps](https://element-plus.org/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7) | `{}`                                                                | 否       |
+| `endProps`                                                                             | 结束的[el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的 props （支持所有） | `object`[ElDatePickerProps](https://element-plus.org/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7)  | `{}`                                                                | 否       |
+| `startDisabledDate`                                                                    | 开始的[el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的 disabledDate       | `function` <docs-tip content='(startTime: Date, endValue: string) => boolean'></docs-tip>                  | [startDisabledDate](/components/date-picker.html#startdisableddate) | 否       |
+| `endDisabledDate`                                                                      | 结束的[el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的 disabledDate       | `function` <docs-tip content='`(endTime: Date, startValue: string) => boolean`'></docs-tip>                | [endDisabledDate](/components/date-picker.html#enddisableddate)     | 否       |
+| ...                                                                                    | ...                                                                                                     | ...                                                                                                        | ...                                                                 | ...      |
+
+:::tip 提示
+<el-tag >v0.1.0</el-tag>
+**`...`表示同时支持所有 [el-date-picker](https://element-plus.org/en-US/component/date-picker.html#attributes) Attributes**，**startProps 和 endProps 里面配置的属性优先级更高**
+:::
+
+### startDisabledDate
+
+默认值
+
+```js
+const startDisabledDate = (startTime, endValue) => {
+  if (!endValue) return false
+  return startTime.getTime() > new Date(endValue).getTime()
+}
+```
+
+### endDisabledDate
+
+默认值
+
+```js
+const endDisabledDate = (endTime, startValue) => {
+  if (!startValue) return false
+  return endTime.getTime() < new Date(startValue).getTime()
+}
+```
+
+## DatePicker Events
+
+| 名称     | 说明           | 类型                                                                |
+| -------- | -------------- | ------------------------------------------------------------------- |
+| `change` | 用户选值时触发 | `function` <docs-tip content='(value:string[]) => void'></docs-tip> |
+
+::: tip 提示
+el-date-picker 的其他事件的支持写法 如 `blur`，如下示例
+:::
+
+示例：
+
+```html
+<PlusDatePicker :start-props="{onBlur: () => {} }" :end-props="{onBlur: () => {} }" />
+```
+
+## Exposes
+
+| 名称                  | 说明                   | 类型                                                                      |
+| --------------------- | ---------------------- | ------------------------------------------------------------------------- |
+| `startPickerInstance` | 开始的`el-date-picker` | `object`<docs-tip content='InstanceType<typeof ElDatePicker>'></docs-tip> |
+| `endPickerInstance`   | 结束的`el-date-picker` | `object`<docs-tip content='InstanceType<typeof ElDatePicker>'></docs-tip> |

package/docs/components/descriptions.md

@@ -0,0 +1,127 @@
+# Descriptions 描述列表
+
+[描述列表 ](/components/descriptions.html) 是在 [PlusDisplayItem ](/components/display-item.html) 组件上构建而来， 支持其属性、方法 、定义函数和插槽。
+
+## 基础用法
+
+:::demo
+
+descriptions/basic
+
+:::
+
+## 自定义内容 (插槽)
+
+<el-tag>v0.0.2</el-tag>
+
+PlusDescriptions 组件会自动根据配置项的 prop 生成对应的插槽， 插槽的生成规则就是 固定 key 值 **[ plus-desc- ]** 然后加上 配置项的 prop。
+
+:::warning 注意
+**插槽 的优先级低于 `renderDescriptionsItem`，高于`render`和`renderHTML`**。
+:::
+
+:::demo
+
+descriptions/slot
+
+:::
+
+## 自定义内容 (renderDescriptionsItem/jsx)
+
+<el-tag>v0.0.2</el-tag>
+
+自定义内容支持 `renderDescriptionsItem`，`render`和`renderHTML`，优先级从高到低。 参考配置[columns](/components/config.html)
+
+:::demo
+
+descriptions/render
+
+:::
+
+## 自定义 label (插槽)
+
+<el-tag>v0.0.2</el-tag>
+
+PlusDescriptions 组件会自动根据配置项的 prop 生成对应的插槽， 插槽的生成规则就是 固定 key 值 **[ plus-desc-label- ]** 然后加上 配置项的 prop。
+
+:::warning 注意
+**插槽 的优先级低于 renderDescriptionsLabel**。
+:::
+
+:::demo
+
+descriptions/slot-label
+
+:::
+
+## 自定义 label (renderDescriptionsLabel/jsx)
+
+<el-tag>v0.0.2</el-tag>
+
+:::warning 注意
+**renderDescriptionsLabel 的优先级高于插槽**。
+:::
+
+:::demo
+
+descriptions/render-label
+
+:::
+
+## 可编辑描述列表
+
+<el-tag>v0.1.17</el-tag>
+
+::: warning 注意
+描述列表中表单数据不会主动和描述列表数据同步，需要结合 [formChange](/components/table.html#table-events) 事件手动同步。
+:::
+
+:::demo
+
+descriptions/form
+
+:::
+
+## Descriptions API
+
+## Descriptions Attributes
+
+| 名称                                            | 说明                                                                                                                                                          | 类型                                                                                                                    | 默认值  | 是否必须 |
+| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------- | -------- |
+| `columns`                                       | 描述列表配置信息                                                                                                                                              | `array`[PlusColumn[]](/components/config.html)                                                                          | `[]`    | 是       |
+| `data`                                          | 描述列表数据                                                                                                                                                  | `object`                                                                                                                | `{}`    | 是       |
+| `border`<el-tag>v0.1.17</el-tag>                | 是否带有边框 ，不会作用于 el-descriptions 本身的 border 属性 。 <el-tag>v0.1.18</el-tag>支持作用于 el-descriptions，仅在不可编辑时（`editable` 为 `false`）生效。 | `boolean`                                                                                                               | `true`  | 否       |
+| `editable`<el-tag>v0.1.17</el-tag>              | 描述列表整体可编辑 ，优先级低于单个 [PlusColumn[editable]](/components/config.html) 的配置项                                                                  | `boolean`                                                                                                               | `false` | 否       |
+| `formProps`<el-tag>v0.1.17</el-tag>             | 描述列表表单的 props，优先级低于单个 [PlusColumn[formProps]](/components/config.html) 的配置项                                                                | `object`[PlusFormProps](/components/form.html#form-attributes)                                                          |         | 否       |
+| `descriptionsItemProps`<el-tag>v0.1.17</el-tag> | el-descriptions-item 整体的 props ，优先级低于单个 [PlusColumn[descriptionsItemProps] ](/components/config.html)的配置项                                      | `object`[DescriptionsItemProps](https://element-plus.org/zh-CN/component/descriptions.html#descriptionsitem-attributes) |         | 否       |
+| ...                                             | ...                                                                                                                                                           | ...                                                                                                                     | ...     | ...      |
+
+:::tip 提示
+**`...`表示同时支持所有 [el-descriptions](https://element-plus.org/zh-CN/component/descriptions.html#descriptions-attributes) Attributes ， border 属性除外。<el-tag>v0.1.18</el-tag> border 属性支持作用于 el-descriptions，仅在不可编辑时生效。**
+:::
+
+## Descriptions Events
+
+| 名称                                 | 说明                                     | 类型                                                                                                                                                          |
+| ------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `formChange`<el-tag>v0.1.17</el-tag> | 描述列表中有可以编辑的表单项目改变时触发 | `function` <docs-tip content='(data:FormChangeCallBackParams) => void'></docs-tip> [FormChangeCallBackParams](/components/type.html#formchangecallbackparams) |
+
+## Descriptions Slots
+
+| 插槽名                                      | 说明                                                         | 作用域插槽参数         |
+| ------------------------------------------- | ------------------------------------------------------------ | ---------------------- |
+| `plus-desc-*` <el-tag>v0.0.2</el-tag>       | 自定义描述，组件会自动根据配置项的 prop 生成对应的插槽       | `{value,data,column}`  |
+| `plus-desc-label-*` <el-tag>v0.0.2</el-tag> | 自定义描述 label，组件会自动根据配置项的 prop 生成对应的插槽 | `{label,data, column}` |
+| ...                                         | ...                                                          | ...                    |
+
+:::tip 提示
+**`...`表示同时支持所有 [el-descriptions](https://element-plus.org/zh-CN/component/descriptions.html#descriptions-slots) Slots**
+:::
+
+## Exposes
+
+| 名称                                    | 说明                         | 类型                                                           |
+| --------------------------------------- | ---------------------------- | -------------------------------------------------------------- |
+| `validate`<el-tag>v0.1.17</el-tag>      | 表单校验                     | `function` <docs-tip content="() => Promise<void>"></docs-tip> |
+| `clearValidate`<el-tag>v0.1.17</el-tag> | 清除所有表单校验             | `function` <docs-tip content=" () => void"></docs-tip>         |
+| `formRefs`<el-tag>v0.1.17</el-tag>      | 描述列表中所有 form 的实例。 | `array` <docs-tip content='TableFormRefRow[]'></docs-tip>      |

package/docs/components/dialog-form.md

@@ -0,0 +1,86 @@
+# DialogForm 表单
+
+DialogForm 组件是 [PlusDialog](/components/dialog.html)和 [PlusForm](/components/form.html) 组件的组合，是在 [PlusDialog](/components/dialog.html) 组件上自定义 `footer` 的基础上构建而来，除下文提到 [PlusDialogForm](/components/dialog-form.html) 特有的属性和方法外，同时支持 [PlusForm](/components/form.html) 组件的所有自定义函数和插槽。
+
+::: warning 注意
+表单`v-model`绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 <el-text  type="primary" tag="ins">[参考 reactive 的局限性](https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive)</el-text>
+:::
+
+## 基础用法
+
+:::demo
+
+dialog-form/basic
+
+:::
+
+## 自定义表单项
+
+支持 [PlusForm 自定义表单项](/components/form.html#自定义表单项-renderfield) 自定义表单项 的三种(`renderField`/`slot`/`jsx`)方式。
+
+:::demo
+
+dialog-form/slot
+
+:::
+
+## 自定义表单 label
+
+支持 [PlusForm 自定义表单 label](/components/form.html#自定义表单-label-插槽) 自定义表单项 的三种(`renderLabel`/`slot`/`jsx`)方式。
+:::demo
+
+dialog-form/slot-label
+
+:::
+
+## 自定义底部
+
+`DialogForm` 组件由 [PlusDialog](/components/dialog.html)和 [PlusForm](/components/form.html) 组成，它同时支持两个组件的底部插槽，`DialogForm`默认使用的[PlusDialog](/components/dialog.html)的底部按钮，所以[PlusForm](/components/form.html)组件的 `hasFooter`属性默认给了 `false`。要定义[PlusForm](/components/form.html)组件的底部，需要[PlusDialog](/components/dialog.html)组件的 `hasFooter`属性给 `false`，[PlusForm](/components/form.html)组件的 `hasFooter`属性给`true`。
+
+:::demo
+
+dialog-form/custom-footer
+
+:::
+
+## DialogForm API
+
+## DialogForm Attributes
+
+| 名称                                  | 说明                                                                                                             | 类型                                                               | 默认值                                         | 是否必须 |
+| ------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ---------------------------------------------- | -------- |
+| `model-value / v-model`               | 表单绑定值 <el-text type="warning">（尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题）</el-text> | `object`[FieldValues](/components/type.html#fieldvalues)           |                                                | 否       |
+| `visible / v-model:visible`           | 弹窗显示                                                                                                         | `boolean`                                                          | `false`                                        | 否       |
+| `form`                                | [PlusForm](/components/form.html) 的 props                                                                       | `object`[PlusFormProps](/components/form.html#form-attributes)     | `{hasFooter:false,footerAlign:'right'}`        | 否       |
+| `dialog`                              | [PlusDialog](/components/dialog.html) 的 props                                                                   | `object`[PlusDialogProps](/components/form.html#dialof-attributes) | `{width:"800px",top:"10vh", title:"弹窗表单"}` | 否       |
+| `hasErrorTip`<el-tag>v0.0.10</el-tag> | 是否需要校验 message 提示                                                                                        | `boolean`                                                          | `true`                                         | 否       |
+
+## DialogForm Events
+
+| 名称                                  | 说明                                                                                       | 类型                                                                                        |
+| ------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
+| `confirm`                             | 点击确定按钮触发的事件                                                                     | `function` <docs-tip content='(values: FieldValues) => void'></docs-tip>                    |
+| `change`                              | 表单变化触发的事件                                                                         | `function` <docs-tip content='(values: FieldValues,column: PlusColumn) => void'></docs-tip> |
+| `cancel`                              | 点击取消按钮触发的事件                                                                     | `function` <docs-tip content='() => void'></docs-tip>                                       |
+| `close` <el-tag>v0.1.25</el-tag>      | [el-dialog](https://element-plus.org/zh-CN/component/dialog.html#attributes) 的`close`事件 | `function` <docs-tip content='() => void'></docs-tip>                                       |
+| `submitError`<el-tag>v0.0.10</el-tag> | 点击提交按钮校验不通过触发的事件                                                           | `function` <docs-tip content='(error:any) => void'></docs-tip>                              |
+
+## DialogForm Slots
+
+| 插槽名                                     | 说明                                                                                                                                                     | 作用域插槽参数                                                     |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `dialog-header`                            | [PlusDialog](/components/dialog.html#dialog-slots) 的 header slot                                                                                        |                                                                    |
+| `dialog-footer`                            | [PlusDialog](/components/dialog.html#dialog-slots) 的 header slot                                                                                        | `{handleConfirm,handleCancel}` 弹窗表单默认的**确定**,**取消**方法 |
+| `form-footer`                              | [PlusForm](/components/form.html#form-slots) 的 footer slot， 配置属性 `:form="{hasFooter:true}"` 生效                                                   | `{handleSubmit,handleReset} ` 表单默认的**提交**，**重置**方法     |
+| `tooltip-icon`<el-tag>v0.0.3</el-tag>      | [PlusForm](/components/form.html#form-slots) 的 tooltip icon                                                                                             |                                                                    |
+| `form-group-header`                        | [PlusForm](/components/form.html#form-slots) 的 group-header slot                                                                                        | `{title,columns,icon}`                                             |
+| `plus-field-*`                             | [PlusForm](/components/form.html#form-slots) 的自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽                                                  | `{prop,label,fieldProps,valueType,column}`                         |
+| `plus-label-*`                             | [PlusForm](/components/form.html#form-slots) 的自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽                                            | `{prop,label,fieldProps,valueType,column}`                         |
+| `plus-extra-*`                             | [PlusForm](/components/form.html#form-slots)的自定义渲染 el-form-item 下一行额外的内容，组件会自动根据配置项的 prop 生成对应的插槽                       | `{column}`                                                         |
+| `plus-previous-*` <el-tag>v0.1.25</el-tag> | 自定义渲染[el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-api) 上一行额外的内容，组件会自动根据配置项的 `prop` 生成对应的插槽 | `{column}`                                                         |
+
+## Exposes
+
+| 名称           | 说明           | 类型                                                                 |
+| -------------- | -------------- | -------------------------------------------------------------------- |
+| `formInstance` | `el-form` 实例 | `object` <docs-tip content="InstanceType<typeof ElForm>"></docs-tip> |