@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/components/dialog.md

@@ -0,0 +1,60 @@
+# Dialog 弹窗
+
+## 基础用法
+
+:::demo
+
+dialog/basic
+
+:::
+
+## 自定义
+
+:::demo
+
+dialog/slot
+
+:::
+
+## Dialog API
+
+## Dialog Attributes
+
+| 名称                    | 说明                                                                                                 | 类型                                                                  | 默认值  | 是否必须 |
+| ----------------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- | -------- |
+| `model-value / v-model` | 弹窗是否显示绑定值                                                                                   | `boolean`                                                             | `false` | 否       |
+| `confirmText`           | 确认按钮文字                                                                                         | `string`                                                              | `确认`  | 否       |
+| `cancelText`            | 取消按钮文字                                                                                         | `string`                                                              | `取消`  | 否       |
+| `confirmLoading`        | 确认按钮 loading                                                                                     | `boolean`                                                             | `false` | 否       |
+| `hasFooter`             | 是否需要底部按钮                                                                                     | `boolean`                                                             | `true`  | 否       |
+| `top`                   | 弹窗距离顶部的距离                                                                                   | `string`                                                              | `15vh`  | 否       |
+| `width`                 | 弹窗宽                                                                                               | `string`                                                              | `460px` | 否       |
+| `title`                 | 弹窗标题                                                                                             | `string`                                                              | `弹窗`  | 否       |
+| `footerAlign`           | 弹窗底部对齐方式                                                                                     | `string` <docs-tip content="'left' / 'right' / 'center' "></docs-tip> | `right` | 否       |
+| `closeOnClickModal`     | [el-dialog](https://element-plus.org/zh-CN/component/dialog.html#attributes) 的 `closeOnClickModal`  | `boolean`                                                             | `false` | 否       |
+| `closeOnPressEscape`    | [el-dialog](https://element-plus.org/zh-CN/component/dialog.html#attributes) 的 `closeOnPressEscape` | `boolean`                                                             | `false` | 否       |
+| ...                     | ...                                                                                                  | ...                                                                   | ...     | ...      |
+
+:::tip 提示
+**`...`表示同时支持所有 [el-dialog](https://element-plus.org/zh-CN/component/dialog.html#attributes) Attributes**
+:::
+
+## Dialog Events
+
+| 名称      | 说明             | 类型                                                  |
+| --------- | ---------------- | ----------------------------------------------------- |
+| `confirm` | 点击确认按钮触发 | `function` <docs-tip content='() => void'></docs-tip> |
+| `cancel`  | 点击取消按钮触发 | `function` <docs-tip content='() => void'></docs-tip> |
+| ...       | ...              | ...                                                   |
+
+:::tip 提示
+**`...`表示同时支持所有 [el-dialog](https://element-plus.org/zh-CN/component/dialog.html#%E4%BA%8B%E4%BB%B6) Events**
+:::
+
+## Dialog Slots
+
+| 插槽名    | 说明     |
+| --------- | -------- |
+| `default` | 弹窗内容 |
+| `header`  | 弹窗头部 |
+| `footer`  | 弹窗底部 |

package/docs/components/display-item.md

@@ -0,0 +1,42 @@
+# DisplayItem 显示单项组件
+
+[PlusTable](/components/table.html) 组件单元格显示的每一项。
+
+## 基础用法
+
+:::demo
+
+display-item/basic
+
+:::
+
+## 单项插槽配置
+
+:::demo
+
+display-item/field-slots
+
+:::
+
+## DisplayItem API
+
+## DisplayItem Attributes
+
+| 名称     | 说明           | 类型                                          | 默认值 | 是否必须 |
+| -------- | -------------- | --------------------------------------------- | ------ | -------- |
+| `column` | 需要显示的配置 | `object`[PlusColumn](/components/config.html) |        | 是       |
+| `row`    | 数据           | `object`                                      |        | 是       |
+| `index`  | 索引           | `number`                                      |        |
+
+## DisplayItem Slots
+
+| 插槽名        | 说明                                                     | 作用域插槽参数                                       |
+| ------------- | -------------------------------------------------------- | ---------------------------------------------------- |
+| `plus-cell-*` | 自定义显示项，组件会自动根据配置项的 prop 生成对应的插槽 | `{row,prop,label,fieldProps,value,valueType,column}` |
+
+## Exposes
+
+| 名称            | 说明     | 类型                                                  |
+| --------------- | -------- | ----------------------------------------------------- |
+| `startCellEdit` | 开起编辑 | `function` <docs-tip content='() => void'></docs-tip> |
+| `stopCellEdit`  | 停止编辑 | `function` <docs-tip content='() => void'></docs-tip> |

package/docs/components/drawer-form.md

@@ -0,0 +1,89 @@
+# DrawerForm 表单
+
+DrawerForm 组件是 [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html)和 [PlusForm](/components/form.html) 组件的组合，是在 [PlusForm](/components/form.html) 组件上自定义 `footer` 的基础上构建而来，除下文提到 [PlusDrawerForm](/components/drawer-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
+
+drawer-form/basic
+
+:::
+
+## 自定义表单项
+
+支持 [PlusForm 自定义表单项](/components/form.html#自定义表单项-renderfield) 自定义表单项 的三种(`renderField`/`slot`/`jsx`)方式。
+
+:::demo
+
+drawer-form/slot
+
+:::
+
+## 自定义表单 label
+
+支持 [PlusForm 自定义表单 label](/components/form.html#自定义表单-label-插槽) 自定义表单项 的三种(`renderLabel`/`slot`/`jsx`)`方式。
+
+:::demo
+
+drawer-form/slot-label
+
+:::
+
+## DrawerForm API
+
+## DrawerForm 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`                                                                | 否       |
+| `closeOnClickModal`                                                                    | [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html) 的 `closeOnClickModal`                              | `boolean`                                                                                       | `false`                                                                | 否       |
+| `closeOnPressEscape`                                                                   | [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html) 的 `closeOnPressEscape`                             | `boolean`                                                                                       | `false`                                                                | 否       |
+| `title`                                                                                | title                                                                                                                | `string`                                                                                        | `抽屉表单`                                                             | 否       |
+| `size`                                                                                 | Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释 | `string`/`number`                                                                               | `540px`                                                                | 否       |
+| `hasFooter`                                                                            | 是否需要底部按钮                                                                                                     | `boolean`                                                                                       | `true`                                                                 | 否       |
+| `cancelText`                                                                           | `取消`按钮文本                                                                                                       | `string`                                                                                        | `取消`                                                                 | 否       |
+| `confirmText`                                                                          | `确认`按钮文本                                                                                                       | `string`                                                                                        | `确认`                                                                 | 否       |
+| `confirmLoading`                                                                       | `确认`按钮 loading                                                                                                   | `boolean`                                                                                       | `false`                                                                | 否       |
+| `form`                                                                                 | [PlusForm](/components/form.html) 的 props                                                                           | `object`[PlusFormProps](/components/form.html#form-attributes)                                  | `{hasFooter:false}`                                                    | 否       |
+| <el-text tag="del">`drawer`</el-text> <el-tag type="danger">deprecated v0.1.6</el-tag> | [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html) 的 props                                            | `object`[ElDrawerProps](https://element-plus.org/zh-CN/component/drawer.html#drawer-attributes) | `{closeOnClickModal:false,closeOnPressEscape:false, title:"抽屉表单"}` | 否       |
+| `hasErrorTip`<el-tag>v0.0.10</el-tag>                                                  | 是否需要校验 message 提示                                                                                            | `boolean`                                                                                       | `true`                                                                 | 否       |
+| ... <el-tag>v0.1.6</el-tag>                                                            | ...                                                                                                                  | ...                                                                                             | ...                                                                    | ...      |
+
+**`...`表示同时支持所有[ElDrawer Attributes](https://element-plus.org/zh-CN/component/drawer.html#drawer-attributes)**
+
+## DrawerForm Events
+
+| 名称                                                                                    | 说明                                                        | 类型                                                                                        |
+| --------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| <el-text tag="del">`submit`</el-text> <el-tag type="danger">deprecated v0.0.10</el-tag> | 点击确定按钮校验通过触发的事件，已废弃，请使用`confirm`代替 | `function` <docs-tip content='(values: FieldValues) => void'></docs-tip>                    |
+| `confirm`<el-tag>v0.0.10</el-tag>                                                       | 点击确定按钮校验通过触发的事件                              | `function` <docs-tip content='(values: FieldValues) => void'></docs-tip>                    |
+| `cancel`                                                                                | 点击取消按钮触发的事件                                      | `function`<docs-tip content='() => void'></docs-tip>                                        |
+| `change`                                                                                | 表单变化触发的事件                                          | `function` <docs-tip content='(values: FieldValues,column: PlusColumn) => void'></docs-tip> |
+| `submitError`<el-tag>v0.0.10</el-tag>                                                   | 点击提交按钮校验不通过触发的事件                            | `function` <docs-tip content='(error:any) => void'></docs-tip>                              |
+
+## DrawerForm Slots
+
+| 插槽名                                     | 说明                                                                                                                                                     | 作用域插槽参数                             |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
+| `drawer-header`                            | [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html#插槽) 的 header slot                                                                     |                                            |
+| `drawer-footer`                            | [ElDrawer](https://element-plus.org/zh-CN/component/drawer.html#插槽) 的 footer slot                                                                     |                                            |
+| `form-footer`                              | [PlusForm](/components/form.html#form-slots) 的 footer slot                                                                                              | `{handleReset,handleSubmit}`               |
+| `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>   |
+| `drawerInstance` | `el-drawer` 实例 | `object` <docs-tip content="InstanceType<typeof ElDrawer>"></docs-tip> |

package/docs/components/form-item.md

@@ -0,0 +1,199 @@
+# FormItem 表单单项组件
+
+[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>
+:::
+
+## 基础用法
+
+设置 `valueType` 控制表单的类型。
+
+:::demo
+
+form-item/basic
+
+:::
+
+## 异步（动态）数据用法
+
+[PlusColumn](/components/config.html) 配置中的 `options` 支持数组， computed，函数和 Promise。
+
+:::demo
+
+form-item/async
+
+:::
+
+## 自定义表单项 (插槽)
+
+:::warning 注意
+**插槽 的优先级低于 renderField，高于 valueType**。
+:::
+
+`PlusFormItem` 组件会自动根据配置项的 `prop` 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ **plus-field-`name`** ]和 [ **plus-field-`status`**] 的两个插槽，插槽的生成规则就是 固定 key 值 [ **plus-field-** ] 然后加上 配置项的 `prop`。
+
+```html
+<!--   自动生成对应的插槽 'plus-field-name' -->
+<PlusFormItem label="自定义" prop="name">
+  <template #plus-field-name>
+    <el-input placeholder="自定义输入框插槽" />
+  </template>
+</PlusFormItem>
+
+<!-- 自动生成对应的插槽 'plus-field-status' -->
+<PlusFormItem label="自定义" prop="name">
+  <template #plus-field-status>
+    <el-input placeholder="自定义输入框插槽" />
+  </template>
+</PlusFormItem>
+```
+
+:::demo
+
+form-item/custom-slot
+
+:::
+
+## 自定义表单项 (renderField)
+
+:::warning 注意
+**renderField 的优先级高于插槽**。
+:::
+
+自定义表单项的核心方法是定义 `renderField`方法， `renderField` 方法需要调用 vue 的[渲染函数 h](https://cn.vuejs.org/guide/extras/render-function.html) 返回一个 `VNode`
+
+::: tip 提示
+`renderField 返回的值`的`props` 和配置项的`fieldProps`会同时生效，`renderField 返回的值`的`props`优先级高于 `fieldProps`.
+
+:::
+
+:::demo
+
+form-item/custom
+
+:::
+
+## 自定义表单项 (jsx/tsx)
+
+:::warning 注意
+
+jsx/tsx 的使用需要将 vue 单文件组件的`script`的属性 `lang`设置为`jsx`或者`tsx`，`jsx` 中值使用单花括号`{}`绑定。
+
+```html
+<script lang="tsx" setup></script>
+```
+
+:::
+
+`jsx/tsx` 的支持本质是`jsx/tsx`解析出来是`VNode`, 使用 renderField 函数自定义表单项。
+
+:::demo
+
+form-item/custom-tsx
+
+:::
+
+## 自定义表单 label (插槽)
+
+:::warning 注意
+**插槽 的优先级低于 renderLabel，高于 label**。
+:::
+
+`PlusFormItem` 组件会自动根据配置项的 `prop` 生成对应的插槽，例如下面的配置项，则会自动生成两个名称叫做 [ **plus-label-`name`** ]和 [ **plus-label-`status`**] 的两个插槽，插槽的生成规则就是 固定 key 值 [ **plus-label-** ] 然后加上 配置项的 `prop`。
+
+```html
+<!--   自动生成对应的插槽 'plus-label-name' -->
+<PlusFormItem label="自定义" prop="name">
+  <template #plus-label-name>
+    <el-input placeholder="自定义输入框插槽" />
+  </template>
+</PlusFormItem>
+
+<!-- 自动生成对应的插槽 'plus-label-status' -->
+<PlusFormItem label="自定义" prop="name">
+  <template #plus-label-status>
+    <el-input placeholder="自定义输入框插槽" />
+  </template>
+</PlusFormItem>
+```
+
+:::demo
+
+form-item/custom-label-slot
+
+:::
+
+## 自定义表单 label (renderLabel)
+
+:::warning 注意
+**renderLabel 的优先级高于插槽**。
+:::
+
+自定义表单项的核心方法是定义 `renderLabel`方法， `renderLabel` 方法需要调用 vue 的[渲染函数 h](https://cn.vuejs.org/guide/extras/render-function.html) 返回一个 `VNode`
+
+:::demo
+
+form-item/custom-label
+
+:::
+
+## 自定义表单 label (jsx/tsx)
+
+:::warning 注意
+
+jsx/tsx 的使用需要将 vue 单文件组件的`script`的属性 `lang`设置为`jsx`或者`tsx`，`jsx` 中值使用单花括号`{}`绑定。
+
+```html
+<script lang="tsx" setup></script>
+```
+
+:::
+
+`jsx/tsx` 的支持本质是`jsx/tsx`解析出来是`VNode`, 使用 renderField 函数自定义表单项。
+
+:::demo
+
+form-item/custom-label-tsx
+
+:::
+
+## 所有支持的类型
+
+:::demo
+
+form-item/all
+
+:::
+
+## FormItem API
+
+## FormItem Attributes
+
+| 名称                    | 说明                                                                                                              | 类型                                                                                                                       | 默认值 | 是否必须 |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
+| `model-value / v-model` | 表单绑定值 <el-text type="warning">（尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题）</el-text>  | `object`[FieldValues](/components/type.html#fieldvalues)                                                                   |        | 否       |
+| `label`                 | el-form-item 的 label                                                                                             | `string`                                                                                                                   |        | 是       |
+| `prop`                  | el-input 等所有表单项的双向绑定的值；                                                                             | `string`                                                                                                                   |        | 是       |
+| `valueType`             | 值的类型                                                                                                          | `string`[FormItemValueType](/components/type.html#formitemvaluetype)                                                       |        | 否       |
+| `options`               | el-select，el-radio-group，el-checkbox-group 选项 ，支持数组，函数，和 Promise                                    | `array/function/promise`[OptionsType](/components/type.html#optionstype)                                                   |        | 否       |
+| `tooltip`               | 展示一个 icon，hover 时展示一些提示信息                                                                           | `string` / (`object`[ElTooltipProps](https://element-plus.org/zh-CN/component/tooltip.html#attributes) )                   |        | 否       |
+| `renderField`           | 自定义渲染 el-form-item 下的 field-item 组件，自定义渲染同步表单的值的核心方法是调用 onChange 回调把值传给表单    | `function` <docs-tip content='(value:any,onChange: (value: any) => void, props: any ) => VNode '></docs-tip>               |        | 否       |
+| `formItemProps`         | 传递给 el-form-item 的配置，支持所有 el-form-item 的 props。值支持对象 object，computed，函数和 Promise。         | `object/function/promise`[PropsItemType](/components/type.html#propsitemtype)                                              |        | 否       |
+| `fieldProps`            | 传递给具体表单项和表格显示的配置，如 el-input，el-select 的 props。 值支持对象 object，computed，函数和 Promise。 | `object/function/promise`[PropsItemType](/components/type.html#propsitemtype)                                              |        | 否       |
+| `renderLabel`           | 自定义渲染 el-form-item 下 label 行显示内容                                                                       | `function` <docs-tip content='(label: any, data:{ row: object; index: number; column: PlusColumn}) =>  VNode '></docs-tip> |        | 否       |
+
+## FormItem Slots
+
+| 插槽名         | 说明                                                           | 作用域插槽参数                             |
+| -------------- | -------------------------------------------------------------- | ------------------------------------------ |
+| `plus-field-*` | 自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽       | `{prop,label,fieldProps,valueType,column}` |
+| `plus-label-*` | 自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽 | `{prop,label,fieldProps,valueType,column}` |
+
+## Exposes
+
+| 名称               | 说明                           | 类型                                                                     |
+| ------------------ | ------------------------------ | ------------------------------------------------------------------------ |
+| `formItemInstance` | el-form-tem 实例               | `object` <docs-tip content='InstanceType<typeof ElFormItem>'></docs-tip> |
+| `fieldInstance`    | 具体的表单单项实例 如 el-input | `object`                                                                 |