uview-pro 0.0.14 → 0.0.16

package/readme.md

@@ -1,237 +1,231 @@
-<p align="center">
-    <img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
-</p>
-<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
-<h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
-
-<div align="center">
-
-[![star](https://gitee.com/anyup/uView-Pro/badge/star.svg)](https://gitee.com/anyup/uView-Pro)
-[![fork](https://gitee.com/anyup/uView-Pro/badge/fork.svg)](https://gitee.com/anyup/uView-Pro)
-[![stars](https://img.shields.io/github/stars/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
-[![forks](https://img.shields.io/github/forks/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
-[![issues](https://img.shields.io/github/issues/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro/issues)
-[![npm version](https://img.shields.io/npm/v/uview-pro)](https://www.npmjs.com/package/uview-pro)
-[![Website](https://img.shields.io/badge/uView%20Pro-docs-blue?style=flat-square)](https://uview-pro.anyup.cn/)
-[![node version](https://img.shields.io/badge/node-%3E%3D18-green)](https://nodejs.org/)
-[![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D7.30-green)](https://pnpm.io/)
-[![license](https://img.shields.io/github/license/anyup/uView-Pro?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
-
-</div>
-
-## 说明
-
-uView UI，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
-
-uView Pro，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，目前已全面支持 uni-app Vue3.0。
-
-## [官方文档：https://uview-pro.netlify.app/](https://uview-pro.netlify.app/)
-
-## 特性
-
--   兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
--   70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
--   众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
--   众多的常用页面和布局，让您专注逻辑，事半功倍
--   详尽的文档支持，现代化的演示效果
--   按需引入，精简打包体积
-
-## 手机预览
-
-您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
-
-<table class="table">
-    <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="200" height="200" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="200" height="200" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="200" height="200" ></td>
-    </tr>
-    <tr>
-        <td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
-        <td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
-        <td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
-    </tr>
-</table>
-
-运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
-
-```bash
-pnpm install
-pnpm dev
-```
-
-## 链接
-
--   [Github](https://github.com/anyup/uview-pro)
--   [Gitee](https://gitee.com/anyup/uview-pro)
--   [官方文档](https://uview-pro.netlify.app/)
--   [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
-
-## 交流反馈
-
-uView Pro QQ 交流群： [点击进入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=98nSVDldWEbDdq4lxiP4aL7uATfMSlI6&authKey=G2yQJ5MQiKzMldaxBsIfKt17NuJuUw8Fr6zdKLggc6NZXgw4BVbqkU2U3EE994yd&noverify=0&group_code=811732166)
-
-<table class="table">
-    <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-2.png?updatedAt=1756355426929" width="250" height="345" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
-    </tr>
-    <tr>
-        <td align="center"><strong>微信群</strong><br></td>
-        <td align="center"><strong>QQ群</strong><br></td>
-    </tr>
-</table>
-
-## 关于 PR
-
-我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 uView Pro 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
-
-所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
-
-## 安装配置
-
-uView Pro 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 easycom 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
-
-### 1. 安装 uView Pro
-
--   npm 安装：
-
-```bash
-npm install uview-pro
-# 或
-yarn add uview-pro
-# 或
-pnpm add uview-pro
-```
-
--   uni_modules 安装：
-
-通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
-
-[插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
-
-### 2. 引入 uView Pro 主库
-
-在 `main.ts` 中引入并注册 uView Pro：
-
-```js
-// main.ts
-import { createSSRApp } from 'vue';
-// npm 方式
-import uViewPro from 'uview-pro';
-// uni_modules 方式
-// import uViewPro from "@/uni_modules/uview-pro";
-
-export function createApp() {
-    const app = createSSRApp(App);
-    app.use(uViewPro);
-    return {
-        app
-    };
-}
-```
-
-### 3. 引入全局样式
-
-在 `uni.scss` 中引入主题样式：
-
-```scss
-/* npm 方式 */
-@import 'uview-pro/theme.scss';
-/* uni_modules 方式 */
-/* @import "@/uni_modules/uview-pro/theme.scss"; */
-```
-
-在 `App.vue` 首行引入基础样式：
-
-```scss
-<style lang="scss">
-  /* npm 方式 */
-  @import "uview-pro/index.scss";
-  /* uni_modules 方式 */
-  /* @import "@/uni_modules/uview-pro/index.scss"; */
-</style>
-```
-
-### 4. 配置 easycom 自动引入组件
-
-在 `pages.json` 中配置 easycom 规则，实现组件自动引入：
-
-```json
-/* pages.json */
-{
-    "easycom": {
-        "autoscan": true,
-        "custom": {
-            /* npm 方式 */
-            "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
-            /*  uni_modules 方式 */
-            /*  "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue" */
-        }
-    },
-    "pages": []
-}
-```
-
-**温馨提示**
-
--   1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
--   2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
--   3.一定要放在 `custom` 内，否则无效。
-
-### 5. Volar 类型提示支持
-
-如需在 CLI 项目中获得 Volar 的全局类型提示，请在 `tsconfig.json` 中添加：
-
-```json
-{
-    "compilerOptions": {
-        /* npm 方式 */
-        "types": ["uview-pro/types"]
-        /* uni_modules 方式 */
-        /* "types": ["@/uni_modules/uview-pro/types"] */
-    }
-}
-```
-
-> HBuilderX 项目暂不支持 tsconfig.json 的 types 配置，CLI 项目推荐配置以获得最佳 TS 体验。
-
-### 6. 组件使用
-
-配置完成后，无需 import 和 components 注册，可直接在 SFC 中使用 uView Pro 组件：
-
-```vue
-<template>
-    <u-button type="primary">按钮</u-button>
-</template>
-```
-
-请通过[快速上手](https://uview-pro.netlify.app/components/quickstart.html)了解更详细的内容
-
-## 捐赠 uView Pro
-
-uView Pro 文档内容和框架源码基于 uView UI 二次开发，因此全部开源免费，如果您认为 uView Pro 帮到了您的开发工作，您可以捐赠 uView Pro 的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
-
-<table class="table">
-    <tr>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-pay.png" width="250" height="345" ></td>
-        <td><img src="https://ik.imagekit.io/anyup/images/social/ali-pay.png" width="250" height="345" ></td>
-    </tr>
-    <tr>
-        <td align="center"><strong>微信</strong><br></td>
-        <td align="center"><strong>支付宝</strong><br></td>
-    </tr>
-</table>
-
-## 版权信息
-
-uView Pro 遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将 uView Pro 应用到您的产品中。
-
-## 鸣谢
-
-再次感谢 uView UI 开发团队，以及所有为 uView UI 的贡献者，以及所有为 uView Pro 的贡献者。
-
--   [Github](https://github.com/anyup/uview-pro)
--   [Gitee](https://gitee.com/anyup/uview-pro)
--   [uView UI 1.0](https://github.com/umicro/uView)
--   [uView UI 2.0](https://github.com/umicro/uView2.0)
+<p align="center">
+    <img alt="logo" src="https://ik.imagekit.io/anyup/uview-pro/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView Pro</h3>
+<h3 align="center">uni-app Vue3 多平台快速开发的 UI 框架</h3>
+
+[![star](https://gitee.com/anyup/uView-Pro/badge/star.svg)](https://gitee.com/anyup/uView-Pro)
+[![fork](https://gitee.com/anyup/uView-Pro/badge/fork.svg)](https://gitee.com/anyup/uView-Pro)
+[![stars](https://img.shields.io/github/stars/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
+[![forks](https://img.shields.io/github/forks/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro)
+[![issues](https://img.shields.io/github/issues/anyup/uView-Pro?style=flat-square&logo=GitHub)](https://github.com/anyup/uView-Pro/issues)
+[![npm version](https://img.shields.io/npm/v/uview-pro)](https://www.npmjs.com/package/uview-pro)
+[![Website](https://img.shields.io/badge/uView%20Pro-docs-blue?style=flat-square)](https://uview-pro.anyup.cn/)
+[![node version](https://img.shields.io/badge/node-%3E%3D18-green)](https://nodejs.org/)
+[![pnpm version](https://img.shields.io/badge/pnpm-%3E%3D7.30-green)](https://pnpm.io/)
+[![license](https://img.shields.io/github/license/anyup/uView-Pro?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
+
+## 说明
+
+`uView UI`，是 [uni-app](https://uniapp.dcloud.io/) 生态优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
+
+`uView Pro`，是全面支持 Vue3.0、TypeScript 的 uni-app 生态框架，uView Pro 的基线版本是基于 uView 1.8.8 修改，使用 TypeScript 完全重构，目前已全面支持 uni-app Vue3.0。
+
+## [官方文档：https://uview-pro.netlify.app/](https://uview-pro.netlify.app/)
+
+## 特性
+
+-   兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
+-   70+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+-   众多贴心的 JS 利器，让您飞镖在手，召之即来，百步穿杨
+-   众多的常用页面和布局，让您专注逻辑，事半功倍
+-   详尽的文档支持，现代化的演示效果
+-   按需引入，精简打包体积
+
+## 手机预览
+
+您可以通过**微信**或**手机浏览器**扫描以下二维码，查看最佳的演示效果。
+
+<table class="table">
+    <tr>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_wx.jpg" width="200" height="200" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_h5.png" width="200" height="200" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_uview_pro_android.png" width="200" height="200" ></td>
+    </tr>
+    <tr>
+        <td align="center"><strong>微信小程序</strong><br>（微信扫码）</td>
+        <td align="center"><strong>H5</strong><br>（浏览器扫码）</td>
+        <td align="center"><strong>Android</strong><br>（浏览器扫码）</td>
+    </tr>
+</table>
+
+运行示例工程，请[下载源码](https://github.com/anyup/uview-pro)后，在项目根目录执行以下命令：
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## 链接
+
+-   [Github](https://github.com/anyup/uview-pro)
+-   [Gitee](https://gitee.com/anyup/uview-pro)
+-   [官方文档](https://uview-pro.netlify.app/)
+-   [更新日志](https://github.com/anyup/uView-Pro/blob/master/src/uni_modules/uview-pro/changelog.md)
+
+## 交流反馈
+
+`uView Pro` QQ 交流群： [点击进入](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=98nSVDldWEbDdq4lxiP4aL7uATfMSlI6&authKey=G2yQJ5MQiKzMldaxBsIfKt17NuJuUw8Fr6zdKLggc6NZXgw4BVbqkU2U3EE994yd&noverify=0&group_code=811732166)
+
+<table class="table">
+    <tr>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-chat-2.png?updatedAt=1756355426929" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/qq-chat.png" width="250" height="345" ></td>
+    </tr>
+    <tr>
+        <td align="center"><strong>微信群</strong><br></td>
+        <td align="center"><strong>QQ群</strong><br></td>
+    </tr>
+</table>
+
+## 关于 PR
+
+我们非常乐意接受各位的优质 PR，但在此之前我希望您了解 `uView Pro` 是一个需要兼容多个平台的（小程序、h5、iOS App、Android App）包括 nvue 页面、vue 页面。
+
+所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
+
+## 安装配置
+
+`uView Pro` 支持 `npm` 和 `uni_modules` 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 `easycom` 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：
+
+### 1. 安装 uView Pro
+
+-   npm 安装：
+
+```bash
+npm install uview-pro
+# 或
+yarn add uview-pro
+# 或
+pnpm add uview-pro
+```
+
+-   uni_modules 安装：
+
+通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 `uni_modules` 目录。
+
+[插件市场：https://ext.dcloud.net.cn/plugin?id=24633](https://ext.dcloud.net.cn/plugin?id=24633)
+
+### 2. 引入 uView Pro 主库
+
+在 `main.ts` 中引入并注册 uView Pro：
+
+```js
+import { createSSRApp } from 'vue';
+// npm 方式
+import uViewPro from 'uview-pro';
+// uni_modules 方式
+// import uViewPro from "@/uni_modules/uview-pro";
+
+export function createApp() {
+    const app = createSSRApp(App);
+    app.use(uViewPro);
+    return {
+        app
+    };
+}
+```
+
+### 3. 引入全局样式
+
+在 `uni.scss` 中引入主题样式：
+
+```scss
+/* npm 方式 */
+@import 'uview-pro/theme.scss';
+/* uni_modules 方式 */
+/* @import "@/uni_modules/uview-pro/theme.scss"; */
+```
+
+在 `App.vue` 首行引入基础样式：
+
+```scss
+<style lang="scss">
+  /* npm 方式 */
+  @import "uview-pro/index.scss";
+  /* uni_modules 方式 */
+  /* @import "@/uni_modules/uview-pro/index.scss"; */
+</style>
+```
+
+### 4. 配置 easycom 自动引入组件
+
+在 `pages.json` 中配置 `easycom` 规则，实现组件自动引入：
+
+```json
+{
+    "easycom": {
+        "autoscan": true,
+        "custom": {
+            // npm 方式
+            "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
+            // uni_modules 方式
+            // "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
+        }
+    },
+    "pages": []
+}
+```
+
+**温馨提示**
+
+-   1.修改 `easycom` 规则后需重启 HX 或重新编译项目。
+-   2.请确保 `pages.json` 中只有一个 easycom 字段，否则请自行合并多个规则。
+-   3.一定要放在 `custom` 内，否则无效。
+
+### 5. Volar 类型提示支持
+
+如需在 `CLI` 项目中获得 `Volar` 的全局类型提示，请在 `tsconfig.json` 中添加：
+
+```json
+{
+    "compilerOptions": {
+        // npm 方式
+        "types": ["uview-pro/types"]
+        // uni_modules 方式
+        // "types": ["@/uni_modules/uview-pro/types"]
+    }
+}
+```
+
+> HBuilderX 项目暂不支持 `tsconfig.json` 的 `types` 配置，`CLI` 项目推荐配置以获得最佳 `TS` 体验。
+
+### 6. 组件使用
+
+配置完成后，无需 `import` 和 `components` 注册，可直接在 `SFC` 中使用 `uView Pro` 组件：
+
+```vue
+<template>
+    <u-button type="primary">按钮</u-button>
+</template>
+```
+
+请通过[快速上手](https://uview-pro.netlify.app/components/quickstart.html)了解更详细的内容
+
+## 捐赠 uView Pro
+
+`uView Pro` 文档内容和框架源码基于 `uView UI` 二次开发，因此全部开源免费，如果您认为 `uView Pro` 帮到了您的开发工作，您可以捐赠 `uView Pro` 的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
+
+<table class="table">
+    <tr>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/weixin-pay.png" width="250" height="345" ></td>
+        <td><img src="https://ik.imagekit.io/anyup/images/social/ali-pay.png" width="250" height="345" ></td>
+    </tr>
+    <tr>
+        <td align="center"><strong>微信</strong><br></td>
+        <td align="center"><strong>支付宝</strong><br></td>
+    </tr>
+</table>
+
+## 版权信息
+
+`uView Pro` 遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将 `uView Pro` 应用到您的产品中。
+
+## 鸣谢
+
+再次感谢 `uView UI` 开发团队，以及所有为 `uView UI` 的贡献者，以及所有为 `uView Pro` 的贡献者。
+
+-   [Github](https://github.com/anyup/uview-pro)
+-   [Gitee](https://gitee.com/anyup/uview-pro)
+-   [uView UI 1.0](https://github.com/umicro/uView)
+-   [uView UI 2.0](https://github.com/umicro/uView2.0)

package/theme.scss

@@ -1,38 +1,38 @@
-// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
-// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
-// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
-
-$u-main-color: #303133;
-$u-content-color: #606266;
-$u-tips-color: #909399;
-$u-light-color: #c0c4cc;
-$u-border-color: #e4e7ed;
-$u-bg-color: #f3f4f6;
-
-$u-type-primary: #2979ff;
-$u-type-primary-light: #ecf5ff;
-$u-type-primary-disabled: #a0cfff;
-$u-type-primary-dark: #2b85e4;
-
-$u-type-warning: #ff9900;
-$u-type-warning-disabled: #fcbd71;
-$u-type-warning-dark: #f29100;
-$u-type-warning-light: #fdf6ec;
-
-$u-type-success: #19be6b;
-$u-type-success-disabled: #71d5a1;
-$u-type-success-dark: #18b566;
-$u-type-success-light: #dbf1e1;
-
-$u-type-error: #fa3534;
-$u-type-error-disabled: #fab6b6;
-$u-type-error-dark: #dd6161;
-$u-type-error-light: #fef0f0;
-
-$u-type-info: #909399;
-$u-type-info-disabled: #c8c9cc;
-$u-type-info-dark: #82848a;
-$u-type-info-light: #f4f4f5;
-
-$u-form-item-height: 70rpx;
-$u-form-item-border-color: #dcdfe6;
+// 此文件为uView的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
+// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
+// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
+
+$u-main-color: #303133;
+$u-content-color: #606266;
+$u-tips-color: #909399;
+$u-light-color: #c0c4cc;
+$u-border-color: #e4e7ed;
+$u-bg-color: #f3f4f6;
+
+$u-type-primary: #2979ff;
+$u-type-primary-light: #ecf5ff;
+$u-type-primary-disabled: #a0cfff;
+$u-type-primary-dark: #2b85e4;
+
+$u-type-warning: #ff9900;
+$u-type-warning-disabled: #fcbd71;
+$u-type-warning-dark: #f29100;
+$u-type-warning-light: #fdf6ec;
+
+$u-type-success: #19be6b;
+$u-type-success-disabled: #71d5a1;
+$u-type-success-dark: #18b566;
+$u-type-success-light: #dbf1e1;
+
+$u-type-error: #fa3534;
+$u-type-error-disabled: #fab6b6;
+$u-type-error-dark: #dd6161;
+$u-type-error-light: #fef0f0;
+
+$u-type-info: #909399;
+$u-type-info-disabled: #c8c9cc;
+$u-type-info-dark: #82848a;
+$u-type-info-light: #f4f4f5;
+
+$u-form-item-height: 70rpx;
+$u-form-item-border-color: #dcdfe6;