gwell-dialog 0.1.8 → 3.0.0

package/.eslintrc.js

@@ -3,9 +3,11 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/essential','eslint:recommended', '@vue/prettier', 'plugin:prettier/recommended'],
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier', 'plugin:prettier/recommended'],
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false
   },
   // 0是off关闭，1是warning警告，2是error报错
   rules: {

package/README.md

@@ -1,233 +1,313 @@
-<!--
- * @Author: lengyihan
- * @Date: 2023-11-17 18:05:01
- * @LastEditors: lengyihan
- * @LastEditTime: 2023-12-13 15:51:04
- * @Description:
- * @FilePath: \gwell-dialog\README.md
--->
-
-# gwell-dialog
-
-## Project setup
-
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-
-```
-yarn build
-```
-
-### Lints and fixes files
-
-```
-yarn lint
-```
-
-### Customize configuration
-
-See [Configuration Reference](https://cli.vuejs.org/config/).
-
-### 使用场景
-
-弹窗组件的封装可以提高代码的复用性和可维护性，使开发者能够更加方便地在不同的场景中使用和管理弹窗，根据弹窗组件规范设计图，通过封装，可以统一弹窗的样式和行为，并提供简洁的接口供其他组件或页面调用，这样，开发者可以更加专注于业务逻辑的实现，而无需重复编写弹窗的代码。弹窗组件中设有默认的头部、内容区和尾部，这三部分分别可使用插槽自定义内容，弹窗内设有默认头部关闭按钮、取消和确定按钮，底部关闭按钮等。
-
-### 目录结构
-
-```
-├─.env.development
-├─.env.production
-├─.eslintignore
-├─.eslintrc.js
-├─.gitignore
-├─.npmignore
-├─.prettierignore
-├─.prettierrc
-├─.yarnignore
-├─babel.config.js
-├─examples ------------------------- // 示例
-│ ├─App.vue ------------------------ // 入口文件
-│ ├─assets
-│ │ ├─css
-│ │ │ └─style.scss
-│ │ └─images
-│ │   ├─icon_bottomClose.png
-│ │   └─icon_close.png
-│ ├─main.js ------------------------ // 全局注册文件
-│ └─views
-│   └─HomeView.vue ----------------- // 组件引用示例
-├─jsconfig.json
-├─lib
-│ ├─demo.html
-│ ├─gwell-dialog.common.js
-│ ├─gwell-dialog.common.js.map
-│ ├─gwell-dialog.css
-│ ├─gwell-dialog.umd.js
-│ ├─gwell-dialog.umd.js.map
-│ ├─gwell-dialog.umd.min.js
-│ └─gwell-dialog.umd.min.js.map
-├─package.json
-├─packages
-│ ├─dialog
-│ │ ├─index.js --------------------- // 导出弹窗组件
-│ │ └─main.vue --------------------- // 弹窗组件开发
-│ └─index.js ----------------------- // 整合并导出所有组件，实现组件的全局注册
-├─postcss.config.js ---------------- // 屏幕适配
-├─public
-│ ├─favicon.ico
-│ └─index.html
-├─README.md
-├─vue.config.js -------------------- // 配置入口文件
-└─yarn.lock
-```
-
-### 可传参数
-
-```json
-{
-    showDialog: Boolean, //是否显示弹窗
-    title: String, //弹窗标题
-    closeOnClickOverlay: {
-      //点击弹窗外部可以关闭弹窗
-      type: Boolean,
-      default: true
-    },
-    className: {
-      //自定义内容区域类名
-      type: String,
-      default: '' // centered:居中, veryBottom:最底部弹窗,bottomed:底部, special:特殊类型
-    },
-    buttons: {
-      //自定义按钮
-      type: Array,
-      default: () => [
-        //如果不传按钮则默认显示确定和关闭按钮
-        // {
-        //   label: '', //标题,可以是html类型
-        //   action: Function, //方法
-        //   className: '', //自定义样式 cancelBottom:最底部取消按钮，red:红色按钮，custom:自定义按钮
-        //   style: {}
-        // }
-      ]
-    },
-    removeDefaultBtn: {
-      type: Array, //传入默认按钮defaultBtn的type值就会删除对应的默认按钮，例如：['confirm']
-      default: () => []
-    },
-    isShowDefaultBtn: {
-      //是否显示默认按钮
-      type: Boolean,
-      default: true
-    },
-    cancelButtonText: String, //取消按钮文案
-    confirmButtonText: String, //确认按钮文案
-    cancelButtonColor: String, //取消按钮颜色
-    confirmButtonColor: String, //确认按钮颜色
-    isShowCloseBtn: {
-      //是否显示顶部关闭按钮
-      type: Boolean,
-      default: false
-    },
-    isShowCloseBottomBtn: {
-      //是否显示底部关闭按钮
-      type: Boolean,
-      default: false
-    },
-    overlay: {
-      //是否展示遮罩层
-      type: Boolean,
-      default: true
-    },
-    overlayClass: String, //自定义遮罩层类名
-    overlayStyle: {
-      //自定义遮罩层样式
-      type: Object,
-      default: () => {}
-    },
-    lockScroll: {
-      //锁定背景滚动
-      type: Boolean,
-      default: true
-    },
-    beforeClose: {
-      //关闭前的回调函数
-      type: Function,
-      default: null
-    },
-    transition: {
-      //动画类名
-      type: String,
-      default: 'fade'
-    }
-  }
-```
-
-### 使用教程
-
-1、第一步安装：
-
-```shell
-npm install gwell-dialog
-```
-
-或
-
-```shell
-yarn add gwell-dialog
-```
-
-2、第二步注册组件
-`import GwellDialog from 'gwell-dialog';`
-`import 'gwell-dialog/lib/gwell-dialog.css';`
-`Vue.use(GwellDialog);`
-3、第三步使用
-`<GwellDialog :showDialog.sync="showDialog"></GwellDialog>`
-
-### 配置发布
-
-1、在 package.json 文件的 scripts 中配置 lib 编译 组件库命令
-主要需要四个参数：
-
-1. target: 默认为构建应用，改为 lib 即可启用构建库模式
-2. name: 输出文件名
-3. dest: 输出目录，默认为 dist，这里我们改为** lib**
-4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js
-   例如："lib": "vue-cli-service build --target lib --name gwell-dialog --dest lib packages/index.js"
-   2、然后 执行编译命令
-
-```shell
-npm run lib
-```
-
-3、在 npm 官网注册后登录 npm
-
-```shell
-npm login
-```
-
-4、如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
-
-```shell
-npm config set registry http://registry.npmjs.org
-```
-
-5、发布
-
-```shell
-npm publish
-```
-
-6、修改 npm 包
-
-```shell
-npm version patch
-```
+<!--
+ * @Author: lengyihan
+ * @Date: 2023-11-17 18:05:01
+ * @LastEditors: lengyihan
+ * @LastEditTime: 2026-09-07 17:12:48
+ * @Description:
+ * @FilePath: \gwell-dialog\README.md
+-->
+
+# gwell-dialog
+
+## Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### Lints and fixes files
+
+```
+yarn lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+### 使用场景
+
+弹窗组件的封装可以提高代码的复用性和可维护性，使开发者能够更加方便地在不同的场景中使用和管理弹窗，根据弹窗组件规范设计图，通过封装，可以统一弹窗的样式和行为，并提供简洁的接口供其他组件或页面调用，这样，开发者可以更加专注于业务逻辑的实现，而无需重复编写弹窗的代码。弹窗组件中设有默认的头部、内容区和尾部，这三部分分别可使用插槽自定义内容，弹窗内设有默认头部关闭按钮、取消和确定按钮，底部关闭按钮等。
+
+### 目录结构
+
+```
+├─.env.development
+├─.env.production
+├─.eslintignore
+├─.eslintrc.js
+├─.gitignore
+├─.npmignore
+├─.prettierignore
+├─.prettierrc
+├─.yarnignore
+├─babel.config.js
+├─examples ------------------------- // 示例
+│ ├─App.vue ------------------------ // 入口文件
+│ ├─assets
+│ │ ├─css
+│ │ │ └─style.scss
+│ │ └─images
+│ │   ├─icon_bottomClose.png
+│ │   └─icon_close.png
+│ ├─main.js ------------------------ // 全局注册文件
+│ └─views
+│   └─HomeView.vue ----------------- // 组件引用示例
+├─jsconfig.json
+├─lib
+│ ├─demo.html
+│ ├─gwell-dialog.common.js
+│ ├─gwell-dialog.common.js.map
+│ ├─gwell-dialog.css
+│ ├─gwell-dialog.umd.js
+│ ├─gwell-dialog.umd.js.map
+│ ├─gwell-dialog.umd.min.js
+│ └─gwell-dialog.umd.min.js.map
+├─package.json
+├─packages
+│ ├─dialog
+│ │ ├─index.js --------------------- // 导出弹窗组件
+│ │ └─main.vue --------------------- // 弹窗组件开发
+│ └─index.js ----------------------- // 整合并导出所有组件，实现组件的全局注册
+├─postcss.config.js ---------------- // 屏幕适配
+├─public
+│ ├─favicon.ico
+│ └─index.html
+├─README.md
+├─vue.config.js -------------------- // 配置入口文件
+└─yarn.lock
+```
+
+### 可传参数
+
+```json
+{
+    showDialog: Boolean, //是否显示弹窗
+    title: String, //弹窗标题
+    closeOnClickOverlay: {
+      //点击弹窗外部可以关闭弹窗
+      type: Boolean,
+      default: true
+    },
+    className: {
+      //自定义内容区域类名
+      type: String,
+      default: '' // centered:居中, veryBottom:最底部弹窗,bottomed:底部, special:特殊类型
+    },
+    buttons: {
+      //自定义按钮
+      type: Array,
+      default: () => [
+        //如果不传按钮则默认显示确定和关闭按钮
+        // {
+        //   label: '', //标题,可以是html类型
+        //   action: Function, //方法
+        //   className: '', //自定义样式 cancelBottom:最底部取消按钮，red:红色按钮，custom:自定义按钮
+        //   style: {}
+        // }
+      ]
+    },
+    removeDefaultBtn: {
+      type: Array, //传入默认按钮defaultBtn的type值就会删除对应的默认按钮，例如：['confirm']
+      default: () => []
+    },
+    isShowDefaultBtn: {
+      //是否显示默认按钮
+      type: Boolean,
+      default: true
+    },
+    cancelButtonText: String, //取消按钮文案
+    confirmButtonText: String, //确认按钮文案
+    cancelButtonColor: String, //取消按钮颜色
+    confirmButtonColor: String, //确认按钮颜色
+    isShowCloseBtn: {
+      //是否显示顶部关闭按钮
+      type: Boolean,
+      default: false
+    },
+    isShowCloseBottomBtn: {
+      //是否显示底部关闭按钮
+      type: Boolean,
+      default: false
+    },
+    overlay: {
+      //是否展示遮罩层
+      type: Boolean,
+      default: true
+    },
+    overlayClass: String, //自定义遮罩层类名
+    overlayStyle: {
+      //自定义遮罩层样式
+      type: Object,
+      default: () => {}
+    },
+    lockScroll: {
+      //锁定背景滚动
+      type: Boolean,
+      default: true
+    },
+    beforeClose: {
+      //关闭前的回调函数
+      type: Function,
+      default: null
+    },
+    transition: {
+      //动画类名
+      type: String,
+      default: 'fade'
+    }
+  }
+```
+
+### 使用教程
+
+当前包使用主版本号区分 Vue 版本：
+
+- `1.x`、`2.x`：Vue2 版本，由 `vue2` 分支维护；
+- `3.x`：Vue3 版本，由 `vue3` 分支维护。
+
+1、第一步安装：
+
+Vue3 项目安装当前版本：
+
+```shell
+npm install gwell-dialog@^3.0.0
+```
+
+或
+
+```shell
+yarn add gwell-dialog@^3.0.0
+```
+
+Vue2 项目请安装 `1.x` 或 `2.x` 版本：
+
+```shell
+npm install gwell-dialog@^2.0.0
+```
+
+2、第二步注册组件
+
+```js
+import { createApp } from 'vue';
+import GwellDialog from 'gwell-dialog';
+import 'gwell-dialog/lib/gwell-dialog.css';
+
+const app = createApp(App);
+app.use(GwellDialog);
+app.mount('#app');
+```
+
+3、第三步使用
+
+```vue
+<GwellDialog v-model:showDialog="showDialog" />
+```
+
+### 分支与版本发布
+
+Git 分支约定：
+
+- `vue2`：只维护 Vue2 代码，发布 `1.x`、`2.x`；
+- `vue3`：只维护 Vue3 代码，发布 `3.x`。
+
+npm 不根据 Git 分支区分代码，必须在对应分支确认代码和版本后再发布：
+
+```shell
+git checkout vue2
+npm version 2.0.0
+npm publish --tag vue2
+```
+
+```shell
+git checkout vue3
+npm version 3.0.0
+npm publish --tag vue3
+```
+
+发布脚本会校验当前 Git 分支、版本号和 Vue peerDependencies，防止把 Vue2 代码发布到 Vue3 标签，或反向发布。脚本只会在校验和构建通过后执行 `npm publish`，不会自动切换分支：
+
+```shell
+# Vue2 分支：版本必须是 1.x 或 2.x，发布到 vue2 标签
+npm run release:vue2
+
+# Vue3 分支：版本必须是 3.x，发布到 vue3 标签
+npm run release:vue3
+```
+
+如果只想检查，不发布：
+
+```shell
+npm run release:check:vue2
+npm run release:check:vue3
+```
+
+发布前检查：
+
+```shell
+git branch --show-current
+npm pkg get version
+npm pkg get peerDependencies
+npm run lint
+npm run build
+npm run lib
+```
+
+Vue2 版本的 `peerDependencies.vue` 应为 `^2.6.0`，Vue3 版本应为 `^3.2.0`。同一个 npm 包的版本不能覆盖，发布后只能递增版本号。
+
+过渡期建议将 `latest` 保持在 Vue2 最新稳定版本，Vue3 使用 `vue3` 标签；Vue3 验证稳定后，再将 `latest` 切换到 `3.x`：
+
+```shell
+npm dist-tag add gwell-dialog@3.0.0 latest
+npm dist-tag add gwell-dialog@2.0.0 legacy
+```
+
+1、在 package.json 文件的 scripts 中配置 lib 编译 组件库命令
+主要需要四个参数：
+
+1. target: 默认为构建应用，改为 lib 即可启用构建库模式
+2. name: 输出文件名
+3. dest: 输出目录，默认为 dist，这里我们改为** lib**
+4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js
+   例如："lib": "vue-cli-service build --target lib --name gwell-dialog --dest lib packages/index.js"
+   2、然后 执行编译命令
+
+```shell
+npm run lib
+```
+
+3、在 npm 官网注册后登录 npm
+
+```shell
+npm login
+```
+
+4、如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
+
+```shell
+npm config set registry https://registry.npmjs.org
+```
+
+5、发布
+
+```shell
+npm publish
+```
+
+6、修改 npm 包
+
+```shell
+npm version patch
+```