@wlydfe/pro-ui 0.2.19 → 0.2.21

package/docs/components/layout.md

@@ -0,0 +1,77 @@
+# Layout
+
+## 简介
+
+PlusLayout 是由 [PlusBreadcrumb ](/components/breadcrumb.html)， [PlusHeader ](/components/header.html)， [PlusSidebar ](/components/sidebar.html)三个组件组合而成，它解决了布局的问题，提供开箱即用的菜单（多级）和面包屑功能。
+
+## 基础用法
+
+:::demo
+
+layout/basic
+
+:::
+
+## Layout API
+
+## Layout Attributes
+
+| 名称                                    | 说明                    | 类型                                                                                                     | 默认值          | 是否必须 |
+| --------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------- | --------------- | -------- |
+| `breadcrumbProps`                       | PlusBreadcrumb 的 props | `object` [PlusBreadcrumb ](/components/breadcrumb.html#breadcrumb-attributes)                            |                 | 否       |
+| `headerProps`                           | PlusHeader 的 props     | `object`[PlusHeader ](/components/header.html#header-attributes)                                         |                 | 否       |
+| `sidebarProps`                          | PlusSidebar 的 props    | `object`[PlusSidebar ](/components/sidebar.html#sidebar-attributes)                                      |                 | 否       |
+| `scrollbarProps`                        | scrollbar 的 props      | `false` \/ `object`[ScrollbarProps ](https://element-plus.org/zh-CN/component/scrollbar.html#attributes) | `{always:true}` | 否       |
+| `backtop`                               | backtop 的 props        | `false` \/ `object`[BacktopProps ](https://element-plus.org/zh-CN/component/backtop.html#attributes)     | `true`          | 否       |
+| `hasSidebar`<el-tag>v0.1.15</el-tag>    | 是否需要侧边栏          | `boolean`                                                                                                | `true`          | 否       |
+| `hasHeader`<el-tag>v0.1.15</el-tag>     | 是否需要页头            | `boolean`                                                                                                | `true`          | 否       |
+| `hasBreadcrumb`<el-tag>v0.1.15</el-tag> | 是否需要面包屑          | `boolean`                                                                                                | `true`          | 否       |
+
+::: tip 提示
+子组件事件写法示例
+
+如 [PlusSidebar ](/components/sidebar.html) 的事件 `toggleCollapse`和 [PlusHeader ](/components/header.html)的事件`clickDropdownItem`。 参考 vue 官方文档 **[透传 Attributes](https://cn.vuejs.org/guide/components/attrs.html)**，如下示例
+:::
+
+示例：
+
+> 模板中
+
+```html
+<PlusLayout
+  :sidebarProps="{ onToggleCollapse: handleToggleCollapse }"
+  :headerProps="{ onClickDropdownItem: handleClickDropdownItem}"
+/>
+```
+
+> setup 中
+
+```ts
+const handleClickDropdownItem = (dropdownItem: { label: string; value: string }) => {
+  console.log(dropdownItem)
+}
+
+const handleToggleCollapse = (collapse: boolean) => {
+  console.log(collapse)
+}
+```
+
+## Exposes
+
+| 名称                  | 说明               | 类型     |
+| --------------------- | ------------------ | -------- |
+| `plusSidebarInstance` | PlusSidebar 的实例 | `object` |
+
+## Slots
+
+| 插槽名                  | 说明                                                                                                                         | 作用域插槽参数                                                       |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `default`               | 内容，一般需要给 [RouterView](https://router.vuejs.org/zh/guide/#RouterView-%E5%92%8C-RouterLink) 组件，配合路由信息展示页面 |                                                                      |
+| `layout-extra`          | 定义面包屑上方，header 下方的一块区域                                                                                        |                                                                      |
+| `breadcrumb-item-title` | 自定义[PlusBreadcrumb ](/components/breadcrumb.html)面包屑显示                                                               | route [PlusRouteRecordRaw](/components/type.html#plusrouterecordraw) |
+| `header-left`           | 自定义[PlusHeader ](/components/header.html)头部左侧                                                                         | `{logo,title}`                                                       |
+| `header-right`          | 自定义[PlusHeader ](/components/header.html)头部右侧                                                                         | `{userInfo,title}`                                                   |
+| `sidebar-item`          | 自定义 [PlusSidebar ](/components/sidebar.html)菜单的 menuItem                                                               | route [PlusRouteRecordRaw](/components/type.html#plusrouterecordraw) |
+| `sidebar-sub`           | 自定义 [PlusSidebar ](/components/sidebar.html)菜单的 subMenu                                                                | route [PlusRouteRecordRaw](/components/type.html#plusrouterecordraw) |
+| `sidebar-item-title`    | 自定义 [PlusSidebar ](/components/sidebar.html)菜单每项标题显示                                                              | route [PlusRouteRecordRaw](/components/type.html#plusrouterecordraw) |
+| `sidebar-extra`         | 自定义 [PlusSidebar ](/components/sidebar.html)在菜单头和菜单之间                                                            | route [PlusRouteRecordRaw](/components/type.html#plusrouterecordraw) |

package/docs/components/page.md

@@ -0,0 +1,187 @@
+# Page 页面
+
+Page 组件是 [PlusSearch](/components/search.html)和 [PlusTable](/components/table.html) 组件的组合。
+
+## 基础用法
+
+:::demo
+
+page/basic
+
+:::
+
+## 手动控制搜索值
+
+<el-tag>v0.1.17</el-tag>
+
+可使用实例中提供的方法`setSearchFieldsValue` `getSearchFieldsValue` `clearSearchFieldsValue`手动控制搜索值。
+
+:::demo
+
+page/setValue
+
+:::
+
+## 搜索参数处理
+
+配置`before-search-submit`方法，可在请求前替换参数名。
+
+:::demo
+
+page/replace-search-key
+
+:::
+
+## 默认搜索参数
+
+配置 `search.defaultValues`属性，设置默认搜索参数，当页面**初始化**和**点击搜索重置按钮**时 [PlusSearch](/components/search.html) 组件的`model-value / v-model` 会被设置为 defaultValues。
+
+:::demo
+
+page/default-search-values
+
+:::
+
+## 默认分页参数
+
+配置 `defaultPageInfo`属性，可以修改默认的分页参数，`defaultPageInfo`的`TS`类型为[PageInfo](/components/type.html#pageinfo)。配置`defaultPageSizeList`属性可以修改分页列表，其他分页属性配置可以使用`pagination`属性。
+
+:::demo
+
+page/default-page
+
+:::
+
+## 自定义搜索按钮
+
+使用`search-footer` 自定义搜索按钮.
+
+:::demo
+
+page/search-footer
+
+:::
+
+## 自定义搜索表单插槽的使用
+
+<el-tag>v0.1.25</el-tag>
+当 [PlusPage](/components/page.html) 组件的`search-slot`属性为`true`时，表单相关的
+`plus-field-*`、
+`plus-label-*`（只对搜索表单生效）、
+`plus-extra-*`、
+`plus-previous-*`、
+插槽会作用于 到 [PlusSearch](/components/search.html) 组件，默认插槽都是作用于 [PlusTable](/components/table.html) 组件的（表格开启编辑时）。
+
+:::demo
+
+page/search-slot
+
+:::
+
+## 搜索和表格展示顺序控制
+
+<el-tag>v0.1.4</el-tag>
+
+默认情况下搜索和表格会按`columns`的顺序展示，搜索可以使用[order](/components/config.html) 参数控制展示顺序(默认值为`0`)，[order](/components/config.html) 越大越靠前。
+
+:::demo
+
+page/order
+
+:::
+
+## 增删改查 (CRUD)
+
+典型的增删改查。
+
+:::demo
+
+page/crud
+
+:::
+
+## Page API
+
+## Page Attributes
+
+| 名称                                  | 说明                                                                                                                                                                                                                                       | 类型                                                                                                                           | 默认值                                          | 是否必须 |
+| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- | -------- |
+| `columns`                             | 配置信息                                                                                                                                                                                                                                   | `array`[PlusColumn[]](/components/config.html)                                                                                 | `[]`                                            | 是       |
+| `request`                             | request 是 Page 最重要的 API，request 会接收一个对象。对象中必须要有 data，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。 | `function`<docs-tip content="(params:PageInfo & { [index: string]: any }) => Promise<{ data: any;total?: number}>"></docs-tip> |                                                 | 是       |
+| `search`                              | [PlusSearch](/components/search.html) 的 props，不包含`model-value / v-model`,`columns`，`searchLoading`属性。                                                                                                                             | `false` / (`object`[PlusSearchProps](/components/search.html#search-attributes) )                                              | `{}`                                            | 否       |
+| `table`                               | [PlusTable](/components/table.html) 的 props，不包含`tableData`,`columns`，`loadingStatus`,`pagination`属性。                                                                                                                              | `object`[PlusTableProps](/components/table.html#table-attributes)                                                              | `{}`                                            | 否       |
+| `params`                              | request 的 params 其他参数，默认会带 pageSize，page 和 [PlusSearch](/components/search.html)组件中的值，它的优先级高于其他配置。                                                                                                           | `object`                                                                                                                       | `{}`                                            | 否       |
+| `postData`                            | 对通过 request 获取的数据进行处理                                                                                                                                                                                                          | `function`<docs-tip content="<T = any>(data: T[]) => T[]"></docs-tip>                                                          |                                                 | 否       |
+| `beforeSearchSubmit`                  | 搜索之前进行一些修改                                                                                                                                                                                                                       | `function` <docs-tip content="<T = any>(params: T) => T"></docs-tip>                                                           |                                                 | 否       |
+| `defaultPageInfo`                     | 默认分页参数                                                                                                                                                                                                                               | `object` [PageInfo](/components/type.html#pageinfo)                                                                            | `{page:1, pageSize:10}`                         | 否       |
+| `defaultPageSizeList`                 | 默认分页列表                                                                                                                                                                                                                               | `array` <docs-tip content="number[]"></docs-tip>                                                                               | `[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]` | 否       |
+| `pagination`                          | 分页组件[PlusPagination](/components/pagination.html) 的 props，不包含`total`，`modelValue`，`pageSizeList`。不需要分页可以给`false`(<el-tag>v0.1.0</el-tag> 新增)。                                                                       | `object`[PlusPagination Props](/components/pagination.html#pagination-attributes) \| `false`( <el-tag>v0.1.0</el-tag> 新增)    |                                                 | 否       |
+| `isCard`                              | 表格和搜索是否需要 el-card 包裹                                                                                                                                                                                                            | `boolean`                                                                                                                      | `true`                                          |
+| `dividerProps`<el-tag>v0.1.0</el-tag> | [el-divider](https://element-plus.org/zh-CN/component/divider.html#attributes) 的 props                                                                                                                                                    | `object`[ElDividerProps ](https://element-plus.org/zh-CN/component/divider.html#attributes) \| `false`                         | `false`                                         | 否       |
+| `searchCardProps`                     | 搜索外层的 [el-card](https://element-plus.org/zh-CN/component/card.html#attributes) 的 props ，当 isCard 为 true 时生效                                                                                                                    | `object`[ElCardProps](https://element-plus.org/zh-CN/component/card.html#attributes)                                           | `{}`                                            | 否       |
+| `tableCardProps`                      | 表格外层的 [el-card](https://element-plus.org/zh-CN/component/card.html#attributes) 的 props ，当 isCard 为 true 时生效                                                                                                                    | `object`[ElCardProps](https://element-plus.org/zh-CN/component/card.html#attributes)                                           | `{}`                                            | 否       |
+| `immediate`<el-tag>v0.0.9</el-tag>    | 是否立即执行`request`获取表格数据,如为`false`,组件渲染完成后将不会主动调用`request`                                                                                                                                                        | `boolean`                                                                                                                      | `true`                                          | 否       |
+| `pageInfoMap`<el-tag>v0.1.0</el-tag>  | request 默认分页参数字段是 `page`, `pageSize`,可以使用此参数自定义分页参数                                                                                                                                                                 | `object` <docs-tip content="{ page?: string; pageSize?: string }"></docs-tip>                                                  | `{page:'page',pageSize:'pageSize'}`             | 否       |
+| `searchSlot`<el-tag>v0.1.25</el-tag>  | 自定义的表单插槽默认作用于 [PlusTable](/components/table.html)， 当`searchSlot`位`true`时， 自定义的表单插槽作用于 [PlusSearch](/components/search.html) 组件 。                                                                           | `boo `                                                                                                                         | `false`                                         | 否       |
+
+## Page Events
+
+| 名称                                     | 说明                                                                            | 类型                                                                    |
+| ---------------------------------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `requestError`                           | 数据加载失败时触发                                                              | `function` <docs-tip content='(error: any) => void'></docs-tip>         |
+| `requestComplete`<el-tag>v0.1.5</el-tag> | 数据加载完成时触发                                                              | `function` <docs-tip content='(tableData: any[]) => void'></docs-tip>   |
+| `search`                                 | 点击搜索按钮时触发，（并将 page 置为 1 ，然后重新加载<el-tag>v0.1.8</el-tag> ） | `function` <docs-tip content='(data: FieldValues) => void'></docs-tip>  |
+| `reset`                                  | 点击重置按钮时触发，并将 page 置为 1 ，然后重新加载                             | `function` <docs-tip content='(data: FieldValues) => void'></docs-tip>  |
+| `paginationChange`                       | 分页改变时触发                                                                  | `function` <docs-tip content='(pageInfo: PageInfo) => void'></docs-tip> |
+
+::: tip 提示
+支持 [PlusSearch](/components/search.html) 和
+[PlusTable](/components/table.html) 的所有事件，如 [PlusSearch](/components/search.html) 的`search`, [PlusTable](/components/table.html) 的`row-click`等，如下示例
+:::
+
+示例：
+
+```html
+<PlusPage :search="{ onSearch:() => {} }" :table="{ onRowClick: () => {} }" />
+```
+
+## Page Slots
+
+| 插槽名                                        | 说明                                                                                                                                                                                                                                                        | 作用域插槽参数                                                                              |
+| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `table-title`                                 | [PlusTable](/components/table.html) 表格标题                                                                                                                                                                                                                |                                                                                             |
+| `table-toolbar`                               | [PlusTable](/components/table.html) 工具栏左侧                                                                                                                                                                                                              |                                                                                             |
+| `table-expand`                                | [PlusTable](/components/table.html) 展开行                                                                                                                                                                                                                  |                                                                                             |
+| `table-append`                                | [PlusTable](/components/table.html)（el-table） 最后一行                                                                                                                                                                                                    |                                                                                             |
+| `table-empty`                                 | [PlusTable](/components/table.html) （el-table）空状态                                                                                                                                                                                                      |                                                                                             |
+| `search-footer`                               | [PlusSearch](/components/search.html) 的 footer                                                                                                                                                                                                             |                                                                                             |
+| `pagination-left`<el-tag>v0.0.3</el-tag>      | [PlusTable](/components/table.html)分页器左侧内容 （默认生效，`align` 属性默认是 `right`）                                                                                                                                                                  |                                                                                             |
+| `pagination-right`<el-tag>v0.0.3</el-tag>     | [PlusTable](/components/table.html) 分页器右侧内容 （`align` 属性是 `left`时生效）                                                                                                                                                                          |                                                                                             |
+| `action-bar-more-icon`<el-tag>v0.0.3</el-tag> | [PlusTable](/components/table.html)操作栏更多傍边的 icon                                                                                                                                                                                                    |                                                                                             |
+| `tooltip-icon`<el-tag>v0.0.3</el-tag>         | [PlusTable](/components/table.html) 表格表头 tooltip icon                                                                                                                                                                                                   |                                                                                             |
+| `drag-sort-icon`<el-tag>v0.0.3</el-tag>       | [PlusTable](/components/table.html)表格拖拽行 和 列设置里拖拽 icon                                                                                                                                                                                          |                                                                                             |
+| `column-settings-icon`<el-tag>v0.0.3</el-tag> | [PlusTable](/components/table.html)表格表头 列设置 icon                                                                                                                                                                                                     |                                                                                             |
+| `density-icon`<el-tag>v0.0.3</el-tag>         | [PlusTable](/components/table.html)表格表头 密度 icon                                                                                                                                                                                                       |                                                                                             |
+| `edit-icon`<el-tag>v0.1.4</el-tag>            | [PlusTable](/components/table.html) 表格处于编辑状态时的 icon                                                                                                                                                                                               |                                                                                             |
+| `extra`<el-tag>v0.1.5</el-tag>                | 表格和搜索中间位置的插槽                                                                                                                                                                                                                                    |                                                                                             |
+| `plus-cell-*`                                 | 自定义表格项，组件会自动根据配置项的 prop 生成对应的插槽                                                                                                                                                                                                    | `object` <docs-tip content='{row,prop,label,fieldProps,valueType,value,column}'></docs-tip> |
+| `plus-header-*`                               | 自定义表格项 header，组件会自动根据配置项的 prop 生成对应的插槽                                                                                                                                                                                             | `object` <docs-tip content='{prop,label,fieldProps,valueType,column}'></docs-tip>           |
+| `plus-field-*`                                | [PlusForm](/components/form.html#form-slots) 的自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽 ，表格需要开启属性 [PlusColumn['editable']](/components/config.html)，搜索需要开启`searchSlot`                                                      | `object` <docs-tip content='{prop,label,fieldProps,valueType,column,row}'></docs-tip>       |
+|                                               |
+| `plus-label-*` <el-tag>v0.1.25</el-tag>       | 自定义**搜索**表单项 `label`，组件会自动根据配置项的 `prop` 生成对应的插槽 ，**此插槽只对搜索表单生效，搜索需要开启`searchSlot`**                                                                                                                           | `{prop,label,fieldProps,valueType,column}`                                                  |
+| `plus-extra-*` <el-tag>v0.1.25</el-tag>       | 自定义表单渲染[el-form-item](https://element-plus.org/zh-CN/component/form.html#formitem-api) 下一行额外的内容，组件会自动根据配置项的 `prop` 生成对应的插槽 ，表格需要开启属性 [PlusColumn['editable']](/components/config.html)，搜索需要开启`searchSlot` | `{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` 生成对应的插槽 ，表格需要开启属性 [PlusColumn['editable']](/components/config.html)，搜索需要开启`searchSlot` | `{column}`                                                                                  |
+
+## Page Exposes
+
+| 名称                                                                                          | 说明                                                                            | 类型                                                                                         |
+| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `plusSearchInstance`                                                                          | [PlusSearch](/components/table.html)的实例                                      | `object` <docs-tip content="import('plus-pro-components')['PlusSearchInstance']"></docs-tip> |
+| `plusTableInstance`                                                                           | [PlusTable](/components/table.html)的实例                                       | `object`<docs-tip content="import('plus-pro-components')['PlusTableInstance']"></docs-tip>   |
+| `getList`                                                                                     | 获取数据方法，可以用来重新加载数据                                              | `function` <docs-tip content='() => void'></docs-tip>                                        |
+| <el-text tag="del"> `handleRest` </el-text> <el-tag type="danger">deprecated v0.1.14</el-tag> | 重置搜索数据，并将 page 置为 1 ，然后重新加载 getList                           | `function` <docs-tip content='() => void'></docs-tip>                                        |
+| `handleReset`<el-tag>v0.1.14</el-tag>                                                         | 重置搜索数据，并将 page 置为 1 ，然后重新加载 getList                           | `function` <docs-tip content='() => void'></docs-tip>                                        |
+| `setSearchFieldsValue`<el-tag>v0.1.17</el-tag>                                                | 手动设置搜索值 ，传入一个对象参数，只会修改对象参数中对应值。                   | `function` <docs-tip content=' (val: RecordType) => void'></docs-tip>                        |
+| `getSearchFieldsValue`<el-tag>v0.1.17</el-tag>                                                | 手动获取搜索值 ，传入一个字段`key`则获取的是字段`key`对应的值，默认返回所有值。 | `function` <docs-tip content='(key?: keyof any) => FieldValueType\| FieldValues'></docs-tip> |
+| `clearSearchFieldsValue`<el-tag>v0.1.17</el-tag>                                              | 手动清空搜索值                                                                  | `function` <docs-tip content='() => void'></docs-tip>                                        |
+| `setTableData`<el-tag>v0.1.23</el-tag>                                                        | 手动设置表格数据和分页总数。不给参数会清空表格数据。                            | `function` <docs-tip content='(data?: RecordType[], total?: number) => void'></docs-tip>     |

package/docs/components/pagination.md

@@ -0,0 +1,58 @@
+# Pagination 分页
+
+## 基础用法
+
+:::demo
+
+pagination/basic
+
+:::
+
+## 左右侧内容 自定义
+
+<el-tag>v0.0.2</el-tag>
+
+`align` 属性默认是 `right`，插槽 `pagination-left` 默认生效。要使用`pagination-right` 插槽，需要设置`align` 属性为 `left`。
+:::demo
+
+pagination/slot
+
+:::
+
+## Pagination API
+
+## Pagination Attributes
+
+| 名称                    | 说明     | 类型                                                      | 默认值                                          | 是否必须 |
+| ----------------------- | -------- | --------------------------------------------------------- | ----------------------------------------------- | -------- |
+| `align`                 | 对齐方式 | `string` <docs-tip content="'left' / 'right'"></docs-tip> | `right`                                         | 否       |
+| `model-value / v-model` | 分页值   | `object` [PageInfo](/components/type.html#pageinfo)       | `{  page: 1,pageSize: 10}`                      | 否       |
+| `total`                 | 总数     | `number`                                                  | `0`                                             | 否       |
+| `pageSizeList`          | 分页列表 | `array` <docs-tip content="number[]"></docs-tip>          | `[10, 20, 30, 40, 50, 100, 200, 300, 400, 500]` | 否       |
+| ...                     | ...      | ...                                                       | ...                                             | ...      |
+
+:::tip 提示
+**`...`表示同时支持所有 [el-pagination](https://element-plus.org/zh-CN/component/pagination.html#%E5%B1%9E%E6%80%A7) Attributes**
+:::
+
+## Pagination Events
+
+| 名称     | 说明                                 | 类型                                                                   |
+| -------- | ------------------------------------ | ---------------------------------------------------------------------- |
+| `change` | 分页组件 page 或者 pageSize 改变触发 | `function` <docs-tip content='(pageInfo:PageInfo) => void'></docs-tip> |
+
+::: tip 提示
+el-pagination 的其他事件的支持写法 如 prev-click，如下示例
+:::
+示例：
+
+```html
+<PlusPagination @prev-click="handlePrevClick" />
+```
+
+## Pagination Slots
+
+| 插槽名                                    | 说明                                                    |
+| ----------------------------------------- | ------------------------------------------------------- |
+| `pagination-left`<el-tag>v0.0.2</el-tag>  | 分页器左侧内容 （默认生效，`align` 属性默认是 `right`） |
+| `pagination-right`<el-tag>v0.0.2</el-tag> | 分页器右侧内容 （`align` 属性是 `left`时生效）          |

package/docs/components/popover.md

@@ -0,0 +1,64 @@
+# Popover 弹出框
+
+## 基础用法
+
+:::demo
+
+popover/basic
+
+:::
+
+## 内容可扩展
+
+:::demo
+
+popover/expand
+
+:::
+
+## 虚拟触发
+
+:::demo
+
+popover/virtual
+
+:::
+
+## 嵌套操作
+
+:::demo
+
+popover/nest
+
+:::
+
+## Popover API
+
+## Popover Attributes
+
+| 名称                  | 说明               | 类型      | 默认值  | 是否必须 |
+| --------------------- | ------------------ | --------- | ------- | -------- |
+| `visible`             | `Popover` 是否显示 | `boolean` | `false` | 否       |
+| `hasShowBottomButton` | 是否显示底部按钮   | `boolean` | `false` | 否       |
+| ...                   | ...                | ...       | ...     | ...      |
+
+`...`表示同时支持所有 [ElPopover Attributes](https://element-plus.org/zh-CN/component/popover.html#attributes)
+
+## Popover Events
+
+| 名称      | 说明             | 类型                                                  |
+| --------- | ---------------- | ----------------------------------------------------- |
+| `show`    | 显示时触发       | `function` <docs-tip content='() => void'></docs-tip> |
+| `confirm` | 点击确定按钮触发 | `function` <docs-tip content='() => void'></docs-tip> |
+| `cancel`  | 点击取消按钮触发 | `function` <docs-tip content='() => void'></docs-tip> |
+| ...       | ...              | ...                                                   |
+
+`...`表示同时支持所有 [ElPopover Attributes](https://element-plus.org/zh-CN/component/popover.html#events)
+
+## Popover Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| ...    | ...  |
+
+`...`表示同时支持所有 [ElPopover Attributes](https://element-plus.org/zh-CN/component/popover.html#slots)

package/docs/components/radio.md

@@ -0,0 +1,57 @@
+# Radio 单选
+
+## 简介
+
+PlusRadio 是在 el-radio-group 和 el-radio 上做的封装，核心功能点是 radio 再次点击可以取消，一般的使用场景是表单默认值是空的情况且非必填，ElementPlus 的组件不支持单选可以取消。
+
+:::tip 提示
+
+要使用 el-radio-button 请直接使用 ElementPlus 官方组件。
+:::
+
+## 基础用法
+
+:::demo
+
+radio/basic
+
+:::
+
+## 定义属性
+
+:::demo
+
+radio/custom
+
+:::
+
+## Radio API
+
+## Radio Attributes
+
+| 名称                    | 说明                 | 类型                                                     | 默认值 | 是否必须 |
+| ----------------------- | -------------------- | -------------------------------------------------------- | ------ | -------- |
+| `model-value / v-model` | 选中项绑定值         | `string/ number/ boolean`                                |        | 否       |
+| `options`               | radio 的数据源       | `array` [OptionsRow[]](/components/type.html#optionsrow) | `[]`   | 是       |
+| `isCancel`              | 是否可以取消选中状态 | `boolean`                                                | `true` | 否       |
+| ...                     | ...                  | ...                                                      | ...    | ...      |
+
+**`...`表示同时支持所有[ElRadioGroup Attributes](https://element-plus.org/zh-CN/component/radio.html#radiogroup-attributes)，不包含 RadioButton 的属性**
+
+:::tip 提示
+
+el-radio 的 props 使用 `options` 中的 `fieldItemProps` 。
+:::
+
+## Radio Events
+
+| 名称     | 说明                      | 类型                                                                             |
+| -------- | ------------------------- | -------------------------------------------------------------------------------- |
+| `change` | 单个 value 变化触发的事件 | `function` <docs-tip content='(value:string/number/boolean) => void'></docs-tip> |
+
+## Exposes
+
+| 名称                 | 说明                  | 类型                                                                      |
+| -------------------- | --------------------- | ------------------------------------------------------------------------- |
+| `radioGroupInstance` | `el-radio-group` 实例 | `object`<docs-tip content='InstanceType<typeof ElRadioGroup>'></docs-tip> |
+| `radioInstance`      | `el-radio`实例        | `object`<docs-tip content='InstanceType<typeof ElRadio>'></docs-tip>      |

package/docs/components/rule.md

@@ -0,0 +1,72 @@
+# 组件自定义总则
+
+- 组件都可以自定义。
+
+- 组件自定义方式都有三种方式，优先级`render*`最高，插槽次之。
+
+  - 渲染函数（`render*` ）
+  - `j(t)sx`
+  - 插槽
+
+- 组件同时包含`整体插槽`和`单项插槽`的，`单项插槽`的优先级更高。 （`单项插槽`也叫`个性化插槽`）
+
+- 组件同时包含`整体渲染函数`和`单项渲染函数`的，`单项渲染函数`的优先级更高。
+
+## 概念详解
+
+`整体插槽/整体渲染函数`和`单项插槽/单项渲染函数`的概念是对于循环产生组件(元素)，需要自定义循环每一项的时候。
+
+| 概念                   | 含义                             | 优先级(同时存在时) |
+| ---------------------- | -------------------------------- | ------------------ |
+| 单项渲染函数           | 循环每一项的渲染函数都可以自定义 | 最高               |
+| 整体渲染函数           | 循环每一项的渲染函数都相同       | 高                 |
+| 单项插槽（个性化插槽） | 循环每一项的插槽都可以自定义     | 低                 |
+| 整体插槽               | 循环每一项的插槽都相同           | 最低               |
+
+参考以下伪代码示例：
+
+> 整体渲染函数
+
+```html
+<template>
+  <div v-for="item in list" :key="item.value">
+    <!--渲染出来的每一项都是 a 标签  -->
+    <component :is="allRender(item)"></component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { h } from 'vue'
+
+  type Item = {
+    value: number
+  }
+  const list = [{ value: 1 }, { value: 2 }]
+  const allRender = (item: Item) => h('a', null, String(item.value))
+</script>
+```
+
+> 单项渲染函数
+
+```html
+<template>
+  <div v-for="item in list" :key="item.value">
+    <!--渲染出来的第一项是 a 标签，渲染出来的第二项是 p 标签  -->
+    <component :is="item.render(item)"></component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { VNode } from 'vue'
+  import { h } from 'vue'
+
+  type Item = {
+    value: number
+    render: (item: Item) => VNode
+  }
+  const list = [
+    { value: 1, render: (item: Item) => h('a', null, String(item.value)) },
+    { value: 2, render: (item: Item) => h('p', null, String(item.value)) }
+  ]
+</script>
+```