@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/guide/i18n.md

@@ -0,0 +1,101 @@
+# 国际化
+
+PlusProComponents 组件的国际化完全兼容 Element Plus 的国际化，和 Element Plus 一样默认使用英语，如果需要配置国际化，只需要在 Element Plus 语言包的基础上合并 PlusProComponents 的语言包即可。
+
+## 示例
+
+:::demo
+
+locale/basic
+
+:::
+
+## 全局配置
+
+在 Element Plus 的配置上合并语言包。
+
+```typescript
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+// import en from 'element-plus/es/locale/lang/en'
+import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
+// import plusEn from 'plus-pro-components/es/locale/lang/en'
+
+app.use(ElementPlus, {
+  locale: { ...zhCn, ...plusZhCn }
+})
+```
+
+## ConfigProvider <el-tag  effect="dark">推荐</el-tag>
+
+在 Element Plus 的 ConfigProvider 合并语言包。
+
+```html
+<template>
+  <el-config-provider :locale="locale"> *** </el-config-provider>
+</template>
+
+<script setup>
+  import { ElConfigProvider } from 'element-plus'
+  import en from 'element-plus/es/locale/lang/en'
+  import zhCn from 'element-plus/es/locale/lang/zh-cn'
+  import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn'
+  import plusEn from 'plus-pro-components/es/locale/lang/en'
+
+  const zhCnLocales = {
+    ...zhCn,
+    ...plusZhCn
+  }
+  const enLocales = {
+    ...en,
+    ...plusEn
+  }
+
+  const language = ref('zh-cn')
+  const locale = computed(() => (language.value === 'zh-cn' ? zhCnLocales : enLocales))
+
+  const toggleLanguage = () => {
+    language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
+  }
+</script>
+```
+
+## CDN 用法
+
+::: tip 提示
+PlusProComponents 的所有语言包全局名称都是以`PlusProComponentsLocale` 开头 然后加上语言包文件名称的驼峰命名。
+
+Element Plus 的所有语言包全局名称都是以 `ElementPlusLocale` 开头 然后加上语言包文件名称的驼峰命名。
+:::
+
+在 CDN 上合并语言包
+
+```html
+<script src="//unpkg.com/element-plus/locale/zh-cn.js"></script>
+<script src="//unpkg.com/plus-pro-components/locale/zh-cn.js"></script>
+<script>
+  app.use(ElementPlus, {
+    locale: { ...ElementPlusLocaleZhCn, ...PlusProComponentsLocaleZhCn }
+  })
+</script>
+```
+
+[支持的语言列表](https://github.com/plus-pro-components/plus-pro-components/tree/dev/packages/locale/lang)
+
+- 简体中文(zh-cn)
+- American English (en)
+- 日语 (ja) <el-tag>v0.1.4</el-tag> 感谢 [@maojunkun](https://github.com/plus-pro-components/plus-pro-components/commit/8888ce5eb411ac47f2de796529181662022566c1) 贡献
+- 繁体中文 (zh-tw) <el-tag>v0.1.**14**</el-tag> 感谢 [@xiaoxian521](https://github.com/plus-pro-components/plus-pro-components/commit/213f67233b8bb51b00e9854f3ea74be95607eee1) 贡献
+- 韩语 (ko) <el-tag>v0.1.**14**</el-tag> 感谢 [@xiaoxian521](https://github.com/plus-pro-components/plus-pro-components/commit/25a0ddd7e2e687583c54ef1798e4156c0670fffa) 贡献
+
+如果你需要使用其他的语言，欢迎贡献 [PR](https://github.com/plus-pro-components/plus-pro-components/pulls)，只需在[这里](https://github.com/plus-pro-components/plus-pro-components/tree/dev/packages/locale/lang)添加一个语言配置文件即可。
+
+## 国际化不起效果？
+
+[issues/125](https://github.com/plus-pro-components/plus-pro-components/issues/125)
+
+`plus-pro-components` 小于 `0.0.11` 版本，使用 `npm` 安装依赖，导致`element-plus`版本不一致，进而导致国际化失效，解决方案：
+
+- 方案一：使用 `npm` 升级`element-plus`到最新版本即可。
+
+- 方案二： 移除`node_modules` 文件夹，移除`package-lock.json`，然后使用`pnpm i ` 重新安装依赖即可。

package/docs/guide/index.md

@@ -0,0 +1,54 @@
+# 简介
+
+**PlusProComponents 灵感来自于[AntDesign ProComponents](https://procomponents.ant.design/)。PlusProComponents 是基于 element-plus 而开发的模板组件，它提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。**
+
+## 组件列表
+
+- [PlusLayout](/components/layout.html) 页面布局组件，解决布局的问题，提供开箱即用的菜单和面包屑功能。
+
+- [PlusPage](/components/page.html) 页面模板组件，抽象网络请求和表格格式化。
+
+- [PlusTable](/components/table.html) 表格模板组件。
+
+- [PlusSearch](/components/search.html) 搜索模板组件。
+
+- [PlusForm](/components/form.html) 表单模板组件，预设常见布局和行为。
+
+- [PlusDialogForm ](/components/dialog-form.html) 弹窗表单模板组件，预设常见布局和行为。
+
+- [PlusDrawerForm ](/components/drawer-form.html) 抽屉表单模板组件，预设常见布局和行为。
+
+- [PlusDescriptions](/components/descriptions.html) 定义列表模板组件。
+
+## 组件特性
+
+- 🔥 功能强大：`PlusProComponents` 的组件不仅提供了基本的 UI 展示功能，还具备了复杂的数据操作和业务逻辑处理能力，能够快速构建出功能强大的企业应用。
+
+- 💡 易于使用：`PlusProComponents` 提供了简单易用的 API 和完善的文档，使得开发者能够快速上手并使用其中的组件。
+
+- 📦 高度可定制：`PlusProComponents` 的组件支持多种配置和样式自定义，能够满足不同项目的需求。
+
+- ✅ 兼容 element-plus：`PlusProComponents` 100%兼容和 element-plus 同名的组件，包括属性，事件，方法，插槽等。
+
+- 🛠️ 丰富的组件库：`PlusProComponents` 基于 element-plus 提供了大量的 UI 组件，包括表格、表单、布局等，能够满足大多数企业应用的需求。
+
+- ➕ 使用 TypeScript：`PlusProComponents` 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。
+
+- 🌐 国际化：`PlusProComponents`提供完备的国际化，与 element-plus 体系打通，无需多余配置。
+
+- 🐋 预设： PlusProComponents 预设基本的样式，与 element-plus 样式一脉相承。 PlusProComponents 预设基本的行为，更少的代码具备更多的功能。
+- 🎄 可摇树：开箱即用的 Tree Shaking，只对引入的代码进行打包。
+
+- 🍭 代码零侵入：保持 element-plus 组件兼容的同时，提供更灵活的配置和更强大的功能。
+
+- ✅ 测试：单元测试覆盖率超过 90%，提供稳定性保障。
+
+<!-- - 💻 SSR：支持服务器端渲染，支持 Nuxt 3。 -->
+
+## 组件缺点
+
+`PlusProComponents` 是一个基于` Vue` 和 `element-plus` 的组件库，它提供了很多常用的 UI 组件和业务组件，可以方便地帮助开发者快速搭建前端页面。虽然 `PlusProComponents` 具有很多优点，但是也有以下一些缺点：
+
+- 学习成本较高：`PlusProComponents` 的组件库比较复杂，学习所有组件可能需要花费较长时间。因此，对于新手开发者来说，学习成本可能会比较高。
+
+- 高度可定制有限：`PlusProComponents` 的组件支持高度可定制，但是仍然不可能保证组件 100%完全自定义，定制需求非常高的项目谨慎使用。

package/docs/guide/installation.md

@@ -0,0 +1,86 @@
+# 安装
+
+## 环境支持
+
+| [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) |
+| ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Edge                                                                                                                                              | last 2 versions                                                                                                                                         | last 2 versions                                                                                                                                         | last 2 versions                                                                                                                                         |
+
+### 版本
+
+`PlusProComponents` 目前处于功能稳定阶段。
+
+[![ElementPlus version badge](https://img.shields.io/npm/v/plus-pro-components.svg?style=flat-square)](https://www.npmjs.org/package/plus-pro-components)
+
+## 使用包管理器 <el-tag  effect="dark">推荐</el-tag>
+
+::: warning 注意
+`plus-pro-components`大于等于 `0.0.11` 版本，`element-plus`不再作为`plus-pro-components`的依赖，需要单独安装。
+
+:::
+
+**建议您使用包管理器 ([pnpm](https://pnpm.io/)<el-tag  effect="dark">推荐</el-tag> ， [yarn](https://classic.yarnpkg.com/lang/en/)，[npm](https://www.npmjs.com/)) 安装 plus-pro-components**。
+
+::: code-group
+
+```sh [pnpm]
+pnpm install plus-pro-components
+```
+
+```sh [yarn]
+yarn add plus-pro-components
+```
+
+```sh [npm]
+npm install plus-pro-components   --save
+```
+
+:::
+
+## 浏览器直接引入
+
+直接通过浏览器的 HTML 标签导入 plus-pro-components，然后就可以使用全局变量 `PlusProComponents` 了。
+
+根据不同的 CDN 提供商有不同的引入方式， 我们在这里以[unpkg](https://unpkg.com) 和 [jsDelivr](https://jsdelivr.com) 举例。 你也可以使用其它的 CDN 供应商。
+
+### unpkg
+
+```html{10,12}
+<head>
+  <!-- 导入element-plus样式 -->
+  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
+  <!-- 导入vue3 -->
+  <script src="//unpkg.com/vue@3"></script>
+  <!-- 导入element-plus -->
+  <script src="//unpkg.com/element-plus"></script>
+
+  <!-- 导入plus-pro-components样式 -->
+  <link rel="stylesheet" href="//unpkg.com/plus-pro-components/index.css" />
+  <!--导入plus-pro-components"  -->
+  <script src="//unpkg.com/plus-pro-components"></script>
+</head>
+```
+
+### jsDelivr
+
+```html{10,12}
+<head>
+  <!-- 导入element-plus样式 -->
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
+  <!-- 导入vue3 -->
+  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
+  <!-- 导入element-plus -->
+  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
+
+  <!-- 导入plus-pro-components样式 -->
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/plus-pro-components/index.css" />
+  <!--导入plus-pro-components"  -->
+  <script src="//cdn.jsdelivr.net/npm/plus-pro-components"></script>
+</head>
+```
+
+::: warning 注意
+默认使用最新版本，使用时建议加上版本号 如使用`0.0.1`版本，防止因版本导致应用出现问题。
+
+[https://cdn.jsdelivr.net/npm/plus-pro-components@0.0.1/index.min.js](https://cdn.jsdelivr.net/npm/plus-pro-components@0.0.1/index.min.js)
+:::

package/docs/guide/namespace.md

@@ -0,0 +1,56 @@
+# 自定义命名空间
+
+支持 element-plus 的命名空间
+
+Element Plus 提供的默认命名空间为 el。 在特殊情况下，我们需要自定义命名空间。
+
+由于我们使用 sass 书写样式，如果您需要自定义所有命名空间， 我们假定用户使用了 sass 书写样式。
+
+您必须同时设置 `ElConfigProvider` 和 `scss` `$namespace` 以及 `plus-pro-components` `scss`的 `$el-namespace`
+
+## 设置 ElConfigProvider
+
+使用 ElConfigProvider 包装您的根组件。
+
+```html
+<!-- App.vue -->
+<template>
+  <el-config-provider namespace="ep">
+    <!-- ... -->
+  </el-config-provider>
+</template>
+```
+
+## 设置 SCSS 和 CSS 变量
+
+创建 `styles/element/index.scss`:
+
+```scss {5,6,7}
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: 'ep'
+);
+
+@forward 'plus-pro-components/theme-chalk/src/mixins/config.scss' with (
+  $el-namespace: 'ep'
+);
+```
+
+在 `vite.config.ts` 中导入 `styles/element/index.scss`：
+
+> Webpack 也是如此，它需要在 preprocessorOptions 中设置
+
+```ts
+import { defineConfig } from 'vite'
+// https://vitejs.dev/config/
+export default defineConfig({
+  // ...
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "~/styles/element/index.scss" as *;`
+      }
+    }
+  }
+  // ...
+})
+```

package/docs/guide/quickstart.md

@@ -0,0 +1,227 @@
+# 快速开始
+
+本节将介绍如何在项目中使用 `PlusProComponents`。
+
+::: warning 注意
+
+以下使用步骤完成后，请配置[国际化](/guide/i18n.html)，否则可能导致文本显示异常。
+
+:::
+
+## 使用之前
+
+在开始使用` PlusProComponents` 之前，有必要先了解以下基础知识，我们假设您已经写过 `Vue 3`，并掌握了下面的内容。
+
+- [ES6+](https://es6.ruanyifeng.com/)
+
+- [Vue 组件](https://cn.vuejs.org/guide/essentials/component-basics.html)
+
+- [单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)
+
+- [渲染函数](https://cn.vuejs.org/guide/extras/render-function.html)
+
+- [透传 Attributes](https://cn.vuejs.org/guide/components/attrs.html)
+
+- [TypeScript](https://www.typescriptlang.org/) (非必须，但是有 TypeScript 基础，使用起来会更加方便。)
+
+<p style="margin-top:80px;"> </p>
+
+# 用法
+
+**`plus-pro-components` 和`element-plus` 导入方式需要保持一致。**
+
+## 完整引入
+
+如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
+
+> main.ts
+
+```typescript{8,9,16}
+import { createApp } from 'vue'
+
+// 导入element-plus 及其样式
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+// 导入plus-pro-components 及其样式
+import PlusProComponents from 'plus-pro-components'
+import 'plus-pro-components/index.css'
+
+import App from './App.vue'
+const app = createApp(App)
+app.use(ElementPlus)
+
+// 使用
+app.use(PlusProComponents)
+app.mount('#app')
+```
+
+### Vue - Official （Volar）支持
+
+如果您使用 Vue - Official （Volar），请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    // ...
+    "types": ["plus-pro-components/global"]
+  }
+}
+```
+
+## 自动按需导入 <el-tag  effect="dark">推荐</el-tag>
+
+`PlusProComponents` 提供了基于`ES Module` 的开箱即用的 [Tree Shaking](https://webpack.js.org/guides/tree-shaking/) 功能。
+
+- 1. 安装插件
+
+  ```sh
+  pnpm install -D unplugin-vue-components unplugin-auto-import @wlydfe/pro-ui-resolver
+  ```
+
+- 2.  配置 `vite.config.ts` 或者配置 `webpack(vue).config.js`
+
+  [@wlydfe/pro-ui-resolver 文档](/ecosystem/resolver.html)
+
+  ::: code-group
+
+  ```ts {6,16} [vite.config.ts]
+  // vite.config.ts
+  import { defineConfig } from 'vite'
+  import AutoImport from 'unplugin-auto-import/vite'
+  import Components from 'unplugin-vue-components/vite'
+  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+  import { PlusProComponentsResolver } from '@wlydfe/pro-ui-resolver'
+
+  export default defineConfig({
+    // ...
+    plugins: [
+      // ...
+      AutoImport({
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        resolvers: [ElementPlusResolver(), PlusProComponentsResolver()]
+      })
+    ]
+  })
+  ```
+
+  ```js {5,15} [webpack.config.js]
+  // webpack.config.js
+  const AutoImport = require('unplugin-auto-import/webpack')
+  const Components = require('unplugin-vue-components/webpack')
+  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+  const { PlusProComponentsResolver } = require('@wlydfe/pro-ui-resolver')
+
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      AutoImport({
+        resolvers: [ElementPlusResolver()]
+      }),
+      Components({
+        resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
+      })
+    ]
+  }
+  ```
+
+  ```js {6,17} [vue.config.js]
+  // vue.config.js
+  const { defineConfig } = require('@vue/cli-service')
+  const AutoImport = require('unplugin-auto-import/webpack')
+  const Components = require('unplugin-vue-components/webpack')
+  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
+  const { PlusProComponentsResolver } = require('@wlydfe/pro-ui-resolver')
+
+  module.exports = defineConfig({
+    // ...
+    configureWebpack: {
+      plugins: [
+        // ...
+        AutoImport({
+          resolvers: [ElementPlusResolver()]
+        }),
+        Components({
+          resolvers: [PlusProComponentsResolver(), ElementPlusResolver()]
+        })
+      ]
+    }
+  })
+  ```
+
+  :::
+
+- 3. 使用组件
+
+     > App.vue
+
+  ```html{3}
+  <template>
+    <!-- 自动导入 -->
+    <PlusPagination :total="total"  />
+  </template>
+
+  <script setup>
+    const total = 100
+  </script>
+  ```
+
+### 自动按需导入示例工程
+
+如果你需要新建一个项目，我们推荐使用 Vite。
+
+以下是 plus-pro-components 官方提供的一些示例项目，你可以克隆该项目，并直接拷贝代码来使用。
+
+- [vite-project](https://github.com/plus-pro-components/plus-pro-components-demos/tree/main/vite-project)：使用 Vue 3、Vite 、element-plus、plus-pro-components 搭建应用。
+
+- [vue-cli-project](https://github.com/plus-pro-components/plus-pro-components-demos/tree/main/vue-cli-project)：使用 Vue 3、vue-cli@5 、element-plus、plus-pro-components 搭建应用。
+
+## 手动导入
+
+手动导入需要导入组件和其对应的样式文件。如下示例：
+
+```html
+<template>
+  <PlusDatePicker></PlusDatePicker>
+</template>
+
+<script>
+  import { PlusDatePicker } from 'plus-pro-components'
+  import 'plus-pro-components/es/components/date-picker/style/css'
+
+  export default {
+    components: { PlusDatePicker }
+  }
+</script>
+```
+
+## CDN
+
+示例
+
+<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
+  <iframe src="https://codepen.io/l-x-f/embed/KKrbRxW?height=469&theme-id=light&default-tab=html%2Cresult"   style="height: 100%; width: 100%; border: 0;"></iframe>
+</div>
+
+::: warning 注意
+使用 CDN 时，在 HTML 中所有的组件都是小写中划线隔开的形式，不支持单标签。
+
+例如：
+
+```html
+<!-- 不支持 -->
+<PlusPagination :total="100" />
+```
+
+需要写成
+
+```html
+<!-- 支持 -->
+<plus-pagination :total="100"></plus-pagination>
+```
+
+:::

package/docs/guide/upgrade.md

@@ -0,0 +1,165 @@
+# 版本升级
+
+本记录只记录影响较大变更，对于一般[新功能、性能提升和问题修复](/guide/changelog.html)不在此记录。
+
+## 从 v0.1.18 升级到 v0.1.19
+
+- [PlusLayout](/components/layout.html) 布局样式发生变化，注意适配。
+
+<el-divider />
+
+## 从 v0.1.14 升级到 v0.1.15
+
+- [PlusSearch](/components/search.html#search-attributes) 新增了折叠动画
+
+  默认开启，不需要的话，设置 `collapseTransition` 为 `false`即可。
+
+  ```html
+  <PlusSearch :collapseTransition="false" />
+  ```
+
+- [PlusColumn](/components/config.html) 中对 `options` 新增了 `optionsMap`,可以对 `options` 中的字段显示进行自定义。 [参考](/components/config.html)
+
+- [PlusColumn](/components/config.html) 中 `tooltip` 新增了计算属性支持。 [参考](/components/config.html)
+
+<el-divider />
+
+## 从 v0.1.13 升级到 v0.1.14
+
+- [PlusPage](/components/page.html) Exposes 变更 [参考](/components/page.html#page-exposes)
+
+  `handleRest` 方法已废弃（未来会在 v0.2.0 版本中移除），请使用 `handleReset `代替。 [参考](/components/page.html#page-exposes)
+
+<el-divider />
+
+## 从 v0.1.8 升级到 v0.1.11
+
+- 提升了组件 TS 类型兼容性
+
+  在 v0.1.8 版本的基础上，提升了组件的 TS 类型兼容性，不存在的类型不再会提示类型错误。
+
+<el-divider />
+
+## 从 v0.1.7 升级到 v0.1.8
+
+- [PlusColumn](/components/config.html) 中的 `formItemProps` 中的 `labelWidth` 开始生效，原来[PlusColumn](/components/config.html) 中的配置 `labelWidth` 不再生效。
+
+```ts
+import type { PlusColumn } from 'plus-pro-components'
+
+const columns: PlusColumn[] = [
+  {
+    label: 'test',
+    prop: 'test',
+    labelWidth: '100px', // [!code --]
+    formItemProps: {
+      labelWidth: '100px' // [!code ++]
+    }
+  }
+]
+```
+
+- 组件 TS 类型更加严格
+
+  组件的 TS 类型更加严格了，提示性更好了，兼容性降低了，不影响功能，但是会提示类型错误。
+
+<el-divider />
+
+## 从 v0.1.4 升级到 v0.1.6
+
+### [PlusDrawerForm](/components/drawer-form.html)
+
+- 废弃了 `drawer` props，el-drawer 的 props 直接在 [PlusDrawerForm](/components/drawer-form.html) 上写。
+
+<el-divider />
+
+## v0.1.0
+
+### 更加友好
+
+- 重构了 [PlusFormItem](/components/form-item.html) 和重 [PlusDisplay](/components/display-item.html) 组件，对新功能扩展更加友好。
+- 重构了 d.ts 生成工具，ts 提示由原来的 `80%` 提升至 `100%`，对用户使用更加友好。
+
+### 体积更小
+
+- 整包体积由原来的 `39.5MB` 优化至 `9.5MB`，体积减少了 `76%`。
+- CSS 体积由原来的 `17.7kB` 优化至 `12.8KB`，体积减少了 `28%`。
+
+### 更高的单元测试覆盖率
+
+- 单元测试覆盖率由原来的 `90%` 提升至 `92.5%`。
+
+<el-divider />
+
+## 从 v0.0.9 升级到 v0.0.10
+
+### PlusDrawerForm 抽屉表单 事件修改
+
+- [PlusDrawerForm](/components/drawer-form.html#drawerform-events) 的事件`submit` 已废弃，请使用`confirm` 代替。[ 参考 DrawerForm-events](/components/drawer-form.html#drawerform-events)
+
+<el-divider />
+
+## 从 v0.0.7 升级到 v0.0.8
+
+### 国际化文件导入方式修改
+
+- 导入文件报错
+
+```sh
+ERROR  failed to resolve import "plus-pro-components/locale/zh-cn.mjs"
+ERROR  failed to resolve import "plus-pro-components/locale/en.mjs"
+```
+
+- 解决方案
+
+```js
+import plusZhCn from 'plus-pro-components/locale/zh-cn.mjs' // [!code --]
+import plusZhCn from 'plus-pro-components/locale/zh-cn' // [!code ++]
+
+import plusEn from 'plus-pro-components/locale/en.mjs' // [!code --]
+import plusEn from 'plus-pro-components/locale/en' // [!code ++]
+```
+
+或者
+
+```js
+import plusZhCn from 'plus-pro-components/locale/zh-cn.mjs' // [!code --]
+import plusZhCn from 'plus-pro-components/es/locale/lang/zh-cn' // [!code ++]
+
+import plusEn from 'plus-pro-components/locale/en.mjs' // [!code --]
+import plusEn from 'plus-pro-components/es/locale/lang/en' // [!code ++]
+```
+
+<el-divider />
+
+## 从 v0.0.4 升级到 v0.0.5
+
+### PlusSearch 搜索组件
+
+- 搜索按钮现在默认靠右，要恢复以前的顺序排布可使用以下代码
+
+  ```css
+  .plus-search .plus-search__button__wrapper.el-form-item {
+    flex: none;
+  }
+  ```
+
+<el-divider />
+
+## 从 v0.0.3 升级到 v0.0.4
+
+### PlusFormItem 表单单项组件
+
+- 表单单项组件 移除了 `valueType === 'date-picker'`时，`el-date-picker` 组件的默认属性 `format` 和`value-format`，原来的默认值都为 `YYYY-MM-DD HH:mm:ss`。
+
+- 受影响的组件 [PlusForm](/components/form.html)， [PlusDialogForm](/components/dialog-form.html)，[PlusDrawerForm ](/components/drawer-form.html)， [PlusStepsForm ](/components/steps-form.html)，[PlusSearch ](/components/search.html)，[PlusDisplayItem ](/components/display-item.html)，[PlusTable ](/components/table.html)，[PlusPage ](/components/page.html)
+
+<el-divider />
+
+## 从 v0.0.2 升级到 v0.0.3
+
+### 高级组件通用配置 columns
+
+- `headerFilter`参数已废弃，请使用 `disabledHeaderFilter`代替。[ 参考 columns](/components/config.html)
+
+<el-divider />