uview-pro 0.0.16 → 0.0.18

package/changelog.md

@@ -1,12 +1,43 @@
-## 0.0.15（2025-08-30）
-###  Features | 新功能
+## 0.0.18（2025-09-03）
 
--   优化 u-image 组件 slot 使用体验，兼容头条小程序 ([a6ca54f](https://github.com/anyup/uView-Pro/commit/a6ca54fce06b20b7a6938d0bef9342954b787641))
+### 🚀 Chore | 构建/工程依赖/工具
 
-### Bug Fixes | Bug 修复
+- update release script for better version management ([b64f38f](https://github.com/anyup/uView-Pro/commit/b64f38fea28de39c99cdf84f7e767aa7ceac1344))
 
--   优化 label 的声明错误问题 ([314c394](https://github.com/anyup/uView-Pro/commit/314c3940145c657b12f16d005af7d271f4ae74e3))
--   优化头条小程序 form 表单校验的兼容性问题 ([3912fd6](https://github.com/anyup/uView-Pro/commit/3912fd6ade3a1d612f6f5e86ddc0336376ee5618))
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-checkbox:** 兼容头条小程序获取父组件数据不支持provide/inject的写法 ([498e12e](https://github.com/anyup/uView-Pro/commit/498e12e2f3aa52021d1be282426536b45f39ca6a))
+
+### 👷 Continuous Integration | CI 配置
+
+- optimize changelog generation and spacing ([3103e7b](https://github.com/anyup/uView-Pro/commit/3103e7b56a0e2dd0392efdb6a85824b11ef6800c))
+
+## 0.0.17（2025-09-02）
+
+### ♻️ Code Refactoring | 代码重构
+
+-   瀑布流组件示例代码重构为 Vue3 ([93949ad](https://github.com/anyup/uView-Pro/commit/93949ad8ae2a36c6130f87340c222ab9ec69d21f))
+
+### ✨ Features | 新功能
+
+-   新增组件 u-loading-popup，一个可以配置的加载提示弹窗 ([6245df9](https://github.com/anyup/uView-Pro/commit/6245df951034b06225ab36d3f18cae8e7ab4b329))
+-   新增 Loading 加载弹窗组件的示例页面 ([1bce868](https://github.com/anyup/uView-Pro/commit/1bce86810863012c5a73104ca0a85ebacb4aa92a))
+
+### 🐛 Bug Fixes | Bug 修复
+
+-   修复瀑布流组件 u-waterfll，暴露 celar/remove/modify 方法 ([240e023](https://github.com/anyup/uView-Pro/commit/240e0238af092d4c6bde86d0db9e49636b806d6f))
+
+## 0.0.15（2025-08-30）
+
+### ✨ Features | 新功能
+
+-   优化 u-image 组件 slot 使用体验，兼容头条小程序 ([a6ca54f](https://github.com/anyup/uView-Pro/commit/a6ca54fce06b20b7a6938d0bef9342954b787641))
+
+### ♻️ Bug Fixes | Bug 修复
+
+-   优化 label 的声明错误问题 ([314c394](https://github.com/anyup/uView-Pro/commit/314c3940145c657b12f16d005af7d271f4ae74e3))
+-   优化头条小程序 form 表单校验的兼容性问题 ([3912fd6](https://github.com/anyup/uView-Pro/commit/3912fd6ade3a1d612f6f5e86ddc0336376ee5618))
+
 ## 0.0.14（2025-08-28）
 
 ### 🐛 Bug Fixes | Bug 修复

package/components/u-checkbox/u-checkbox.vue

@@ -43,21 +43,23 @@ const props = defineProps(CheckboxProps);
 
 const emit = defineEmits(['change', 'update:modelValue']);
 
+const instance = getCurrentInstance();
+const instanceProxy = instance?.proxy;
 // 父组件 group 注入
-// 支付宝小程序不支持provide/inject？
-const parent = inject<any>('u-checkbox-group', null);
+let parent = inject<any>('u-checkbox-group', null);
 
 // 组件注册到 group
 onMounted(() => {
+    // 兼容头条小程序不支持provide/inject
+    // #ifdef MP-TOUTIAO
+    parent = $u.parentData('u-checkbox-group', instance);
+    // #endif
     // 如果存在u-checkbox-group，将本组件的实例塞进父组件的children中
     if (parent && parent.children && !parent.children.value.includes(instanceProxy)) {
         parent.children.value.push(instanceProxy);
     }
 });
 
-const instance = getCurrentInstance();
-const instanceProxy = instance?.proxy;
-
 // 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
 const isDisabled = computed(() => {
     return props.disabled !== '' ? props.disabled : parent ? parent.props.disabled : false;

package/components/u-loading-popup/types.ts

@@ -1,19 +1,26 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+type LoadingMode = 'circle' | 'flower';
 
 /**
  * u-loading-popup 组件 props 类型定义
  */
 export const LoadingPopupProps = {
-  /** 是否显示加载弹窗 */
-  modelValue: { type: Boolean, default: false },
-  /** 加载提示文本 */
-  text: { type: String, default: '' },
-  /** 方向，可选 'vertical' | 'horizontal' */
-  direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
-  /** 自动关闭的持续时间(ms)，0为不自动关闭 */
-  duration: { type: Number, default: 0 },
-  /** 允许点击遮罩关闭的最短时间(ms) */
-  cancelTime: { type: Number, default: 10000 }
+    /** 是否显示加载弹窗 */
+    modelValue: { type: Boolean, default: false },
+    /** 加载提示文本 */
+    text: { type: String, default: '' },
+    /** 方向，可选 'vertical' | 'horizontal' */
+    direction: { type: String as PropType<'vertical' | 'horizontal'>, default: 'vertical' },
+    /** 自动关闭的持续时间(ms)，0为不自动关闭 */
+    duration: { type: Number, default: 0 },
+    /** 允许点击遮罩关闭的最短时间(ms) */
+    cancelTime: { type: Number, default: 10000 },
+    /** 动画的类型 */
+    mode: { type: String as PropType<LoadingMode>, default: 'circle' },
+    /** 动画的颜色 */
+    color: { type: String, default: '#c7c7c7' },
+    /** 加载图标的大小，单位rpx */
+    size: { type: [String, Number] as PropType<string | number>, default: '48' }
 };
 
 export type LoadingPopupProps = ExtractPropTypes<typeof LoadingPopupProps>;

package/components/u-loading-popup/u-loading-popup.vue

@@ -1,27 +1,30 @@
 <template>
     <view @touchmove.stop.prevent>
         <view v-if="popupValue" class="u-loading-init" :class="[direction]">
-            <view class="u-loading-center"></view>
-            <view v-if="currentText" class="u-loading-tips">{{ currentText }}</view>
+            <u-loading :mode="mode" :color="color" :size="size" />
+            <view v-if="currentText" class="u-loading-tips">
+                {{ currentText }}
+            </view>
         </view>
-        <view class="u-loading-mask" :class="[popupValue ? 'u-mask-show' : '']" @click="onMaskClick"></view>
+        <view class="u-loading-mask" :class="[popupValue ? 'u-mask-show' : '']" @click="onMaskClick" />
     </view>
 </template>
-
 <script lang="ts" setup>
-import { ref, watch, onUnmounted, computed } from 'vue';
+import { computed, onUnmounted, ref, watch } from 'vue';
 import { LoadingPopupProps } from './types';
 
 // 组件props类型
 const props = defineProps(LoadingPopupProps);
 const emit = defineEmits(['update:modelValue', 'cancel']);
 
-// 定时器
-let timer: ReturnType<typeof setTimeout> | null = null;
+// 自动关闭的持续时间定时器
+let durationTimer: ReturnType<typeof setTimeout> | null = null;
+// 关闭按钮倒计时定时器
+let cancelTimer: ReturnType<typeof setTimeout> | null = null;
 // 记录弹窗显示的时间戳
 const now = ref(0);
-// 是否显示关闭按钮（超时后）
-const closeShow = ref(false);
+// 点击遮罩层是否可关闭（超时后）
+const canClose = ref(false);
 // 当前显示的text，优先级：loading参数 > props.text
 const currentText = ref(props.text);
 
@@ -30,75 +33,136 @@ const popupValue = computed({
     set: (val: boolean) => emit('update:modelValue', val)
 });
 
-// 监听props.text变化，自动同步到currentText（仅在未手动传入text时）
+watch(
+    () => popupValue.value,
+    val => {
+        if (val) {
+            doOpen(currentText.value);
+        } else {
+            doClose();
+        }
+    }
+);
+
+// 响应 props 变更，自动刷新当前 text
 watch(
     () => props.text,
     val => {
-        if (!currentText.value || currentText.value === '' || currentText.value === undefined) {
-            currentText.value = val;
+        currentText.value = val;
+    }
+);
+
+// 响应 cancelTime/duration 变化，重启定时器
+watch(
+    () => [props.cancelTime, props.duration],
+    () => {
+        if (popupValue.value) {
+            clearDurationTimer();
+            startCancelTime();
+            startDurationTime();
         }
     }
 );
 
-// 启动超时关闭按钮计时
-function startTime() {
-    setTimeout(() => {
-        closeShow.value = true;
-    }, props.cancelTime);
+/**
+ * 启动超时关闭按钮计时
+ */
+function startCancelTime() {
+    clearCancelTimer();
+    canClose.value = false;
+    if (props.cancelTime > 0) {
+        cancelTimer = setTimeout(() => {
+            canClose.value = true;
+        }, props.cancelTime);
+    }
+}
+
+/**
+ * 启动持续时间计时
+ */
+function startDurationTime() {
+    clearDurationTimer();
+    if (props.duration) {
+        durationTimer = setTimeout(() => {
+            close();
+        }, props.duration);
+    }
 }
 
-// loading主逻辑，支持传入text，优先显示传入的text
-function show(text?: string) {
-    console.log('show');
+/**
+ * 内部显示逻辑，初始化所有状态
+ */
+function doOpen(text?: string) {
+    canClose.value = false;
+    clearDurationTimer();
+    clearCancelTimer();
+    now.value = Date.now();
     if (typeof text === 'string' && text !== '') {
         currentText.value = text;
     } else {
         currentText.value = props.text;
     }
-    startTime();
-    clearTimer();
-    now.value = Date.now();
-    if (props.duration) {
-        timer = setTimeout(() => {
-            hide();
-        }, props.duration);
-    }
-    emit('update:modelValue', true);
+    startCancelTime();
+    startDurationTime();
+}
+
+/**
+ * 内部关闭逻辑，重置所有状态
+ */
+function doClose() {
+    canClose.value = false;
+    currentText.value = props.text;
+    clearDurationTimer();
+    clearCancelTimer();
+}
+
+/**
+ * 显示弹窗
+ * @param text 可选，优先显示的文案
+ */
+function open(text?: string) {
+    currentText.value = text || props.text;
+    popupValue.value = true;
+}
+
+/**
+ * 隐藏弹窗
+ */
+function close() {
+    popupValue.value = false;
 }
 
 // 清理定时器
-function clearTimer() {
-    if (timer) {
-        clearTimeout(timer);
-        timer = null;
+function clearDurationTimer() {
+    if (durationTimer) {
+        clearTimeout(durationTimer);
+        durationTimer = null;
     }
 }
-
-// 完成加载，关闭弹窗
-function hide() {
-    console.log('hide');
-    closeShow.value = false;
-    clearTimer();
-    // 关闭时重置currentText为props.text，避免下次未传text时显示旧内容
-    currentText.value = props.text;
-    emit('update:modelValue', false);
+function clearCancelTimer() {
+    if (cancelTimer) {
+        clearTimeout(cancelTimer);
+        cancelTimer = null;
+    }
 }
 
 // 遮罩点击事件
 function onMaskClick() {
-    if (Date.now() - now.value > props.cancelTime) {
+    // 只有显示关闭按钮时才允许关闭
+    if (canClose.value) {
         emit('cancel');
-        hide();
+        close();
     }
 }
 
 onUnmounted(() => {
-    clearTimer();
+    clearDurationTimer();
+    clearCancelTimer();
 });
 
 defineExpose({
-    show,
-    hide
+    open,
+    close
 });
 </script>
 
@@ -126,6 +190,7 @@ defineExpose({
     min-width: 200rpx;
     min-height: 200rpx;
     max-width: 500rpx;
+    padding: 15rpx 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -139,6 +204,7 @@ defineExpose({
     color: #fff;
     background: rgba(0, 0, 0, 0.7);
     border-radius: 7px;
+
     .u-icon-close {
         position: absolute;
         top: 4rpx;
@@ -146,6 +212,7 @@ defineExpose({
         color: #ffffff;
         opacity: 0.8;
     }
+
     &.horizontal {
         flex-direction: row;
         align-items: center;
@@ -154,10 +221,7 @@ defineExpose({
         max-width: 600rpx;
         min-height: 150rpx;
         padding-left: 40rpx;
-        .u-loading-center {
-            width: 70rpx;
-            height: 70rpx;
-        }
+
         .u-loading-tips {
             margin-top: 0;
             margin-left: 20rpx;
@@ -166,43 +230,10 @@ defineExpose({
     }
 }
 
-.u-loading-center {
-    width: 60rpx;
-    height: 60rpx;
-    border: 3px solid #fff;
-    border-color: #8f8d8e #8f8d8e #8f8d8e #ffffff;
-    border-radius: 50%;
-    margin: 0 6px;
-    display: inline-block;
-    vertical-align: middle;
-    /* clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 60%); */
-    animation: rotate 1s linear infinite;
-}
-
 .u-loading-tips {
     text-align: center;
     padding: 0 20rpx;
     box-sizing: border-box;
     margin-top: 36rpx;
 }
-
-@-webkit-keyframes rotate {
-    from {
-        transform: rotatez(0deg);
-    }
-
-    to {
-        transform: rotatez(360deg);
-    }
-}
-
-@keyframes rotate {
-    from {
-        transform: rotatez(0deg);
-    }
-
-    to {
-        transform: rotatez(360deg);
-    }
-}
 </style>

package/components/u-waterfall/u-waterfall.vue

@@ -146,6 +146,11 @@ function modify(id: string | number, key: string, value: any) {
         emit('update:modelValue', data);
     }
 }
+defineExpose({
+    clear,
+    remove,
+    modify
+});
 </script>
 
 <style lang="scss" scoped>

package/package.json

@@ -1,107 +1,107 @@
-{
-    "id": "uview-pro",
-    "name": "uview-pro",
-    "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.0.16",
-    "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
-    "main": "index.ts",
-    "module": "index.ts",
-    "browser": "index.ts",
-    "keywords": [
-        "uni-app",
-        "library",
-        "component",
-        "uView",
-        "Vue3"
-    ],
-    "author": "anyup",
-    "license": "MIT",
-    "repository": "https://github.com/anyup/uview-pro",
-    "engines": {
-        "HBuilderX": "^4.07",
-        "uni-app": "^4.07",
-        "uni-app-x": ""
-    },
-    "dcloudext": {
-        "type": "component-vue",
-        "sale": {
-            "regular": {
-                "price": "0.00"
-            },
-            "sourcecode": {
-                "price": "0.00"
-            }
-        },
-        "contact": {
-            "qq": "491302297"
-        },
-        "declaration": {
-            "ads": "无",
-            "data": "无",
-            "permissions": "无"
-        },
-        "npmurl": "https://www.npmjs.com/package/uview-pro",
-        "darkmode": "x",
-        "i18n": "x",
-        "widescreen": "x"
-    },
-    "uni_modules": {
-        "dependencies": [],
-        "encrypt": [],
-        "platforms": {
-            "cloud": {
-                "tcb": "√",
-                "aliyun": "√",
-                "alipay": "√"
-            },
-            "client": {
-                "uni-app": {
-                    "vue": {
-                        "vue2": "x",
-                        "vue3": "√"
-                    },
-                    "web": {
-                        "safari": "√",
-                        "chrome": "√"
-                    },
-                    "app": {
-                        "vue": "√",
-                        "nvue": "-",
-                        "android": "√",
-                        "ios": "√",
-                        "harmony": "-"
-                    },
-                    "mp": {
-                        "weixin": "√",
-                        "alipay": "-",
-                        "toutiao": "-",
-                        "baidu": "-",
-                        "kuaishou": "-",
-                        "jd": "-",
-                        "harmony": "-",
-                        "qq": "-",
-                        "lark": "-"
-                    },
-                    "quickapp": {
-                        "huawei": "-",
-                        "union": "-"
-                    }
-                },
-                "uni-app-x": {
-                    "web": {
-                        "safari": "-",
-                        "chrome": "-"
-                    },
-                    "app": {
-                        "android": "-",
-                        "ios": "-",
-                        "harmony": "-"
-                    },
-                    "mp": {
-                        "weixin": "-"
-                    }
-                }
-            }
-        }
-    }
-}
+{
+    "id": "uview-pro",
+    "name": "uview-pro",
+    "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
+    "version": "0.0.18",
+    "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
+    "main": "index.ts",
+    "module": "index.ts",
+    "browser": "index.ts",
+    "keywords": [
+        "uni-app",
+        "library",
+        "component",
+        "uView",
+        "Vue3"
+    ],
+    "author": "anyup",
+    "license": "MIT",
+    "repository": "https://github.com/anyup/uview-pro",
+    "engines": {
+        "HBuilderX": "^4.07",
+        "uni-app": "^4.07",
+        "uni-app-x": ""
+    },
+    "dcloudext": {
+        "type": "component-vue",
+        "sale": {
+            "regular": {
+                "price": "0.00"
+            },
+            "sourcecode": {
+                "price": "0.00"
+            }
+        },
+        "contact": {
+            "qq": "491302297"
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "无",
+            "permissions": "无"
+        },
+        "npmurl": "https://www.npmjs.com/package/uview-pro",
+        "darkmode": "x",
+        "i18n": "x",
+        "widescreen": "x"
+    },
+    "uni_modules": {
+        "dependencies": [],
+        "encrypt": [],
+        "platforms": {
+            "cloud": {
+                "tcb": "√",
+                "aliyun": "√",
+                "alipay": "√"
+            },
+            "client": {
+                "uni-app": {
+                    "vue": {
+                        "vue2": "x",
+                        "vue3": "√"
+                    },
+                    "web": {
+                        "safari": "√",
+                        "chrome": "√"
+                    },
+                    "app": {
+                        "vue": "√",
+                        "nvue": "-",
+                        "android": "√",
+                        "ios": "√",
+                        "harmony": "-"
+                    },
+                    "mp": {
+                        "weixin": "√",
+                        "alipay": "-",
+                        "toutiao": "-",
+                        "baidu": "-",
+                        "kuaishou": "-",
+                        "jd": "-",
+                        "harmony": "-",
+                        "qq": "-",
+                        "lark": "-"
+                    },
+                    "quickapp": {
+                        "huawei": "-",
+                        "union": "-"
+                    }
+                },
+                "uni-app-x": {
+                    "web": {
+                        "safari": "-",
+                        "chrome": "-"
+                    },
+                    "app": {
+                        "android": "-",
+                        "ios": "-",
+                        "harmony": "-"
+                    },
+                    "mp": {
+                        "weixin": "-"
+                    }
+                }
+            }
+        }
+    }
+}