uview-pro 0.3.3 → 0.3.4

package/changelog.md

@@ -1,21 +1,37 @@
-## 0.3.3（2025-10-16）
+## 0.3.4（2025-10-20）
 
-### 🐛 Bug Fixes | Bug 修复
+### ♻️ Code Refactoring | 代码重构
 
-- **u-read-more:** 修复 init 方法无法在外部调用的问题 ([415d401](https://github.com/anyup/uView-Pro/commit/415d401883a3567653ab1f311b28b075b7bb5603))
-- **u-button:** 修复 hover-class 属性被忽略的问题 ([b919c58](https://github.com/anyup/uView-Pro/commit/b919c58cea048f9e559a6448cebe5abbf1490acf))
+- **components:** 移除不必要的父组件和事件总线相关代码，优化组件间通信 ([280c2f8](https://github.com/anyup/uView-Pro/commit/280c2f8acc75764a7706ec38c742cc16703c941a))
+- **u-safe-bottom:** 优化底部安全区组件 ([161f2d3](https://github.com/anyup/uView-Pro/commit/161f2d32ff6b9abbb6f8221a4dd99c438a606e94))
+- **u-status-bar:** 优化状态栏组件 ([53c50ab](https://github.com/anyup/uView-Pro/commit/53c50ab8b6314a7d702b90e6b48b79301a334090))
 
-### ♻️ Code Refactoring | 代码重构
+### 🐛 Bug Fixes | Bug 修复
 
-- **component-relation:** 重构组件关系逻辑并添加新功能 ([85d0cd2](https://github.com/anyup/uView-Pro/commit/85d0cd20db839a61733887f82825d47de0a1b1a6))
-- **u-talbe:** 重构u-td和u-th组件，增强u-table的兼容性 ([3fbbc52](https://github.com/anyup/uView-Pro/commit/3fbbc5233bd41b91ca829f9a65cf95ee3b599e36))
-- 修改 uView Pro 日志配置 ([6b9bb68](https://github.com/anyup/uView-Pro/commit/6b9bb6852af3eb24f109207f864145771c3e9c79))
-- **clipboard:** add clipboard function ([efdaa58](https://github.com/anyup/uView-Pro/commit/efdaa58dda923b281d9b764a82a7492f36717ac4))
+- **u-subsection:** 优化列表和模式变化的监听逻辑，移除不必要的初始化调用 ([f77ee7c](https://github.com/anyup/uView-Pro/commit/f77ee7ccc7521ec2472f72dcf2fb47362ca0abd9))
 
 ### 👥 Contributors
 
-<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a> 
+<a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> 
 
+## 0.3.3（2025-10-16）
+
+### 🐛 Bug Fixes | Bug 修复
+
+- **u-read-more:** 修复 init 方法无法在外部调用的问题 ([415d401](https://github.com/anyup/uView-Pro/commit/415d401883a3567653ab1f311b28b075b7bb5603))
+- **u-button:** 修复 hover-class 属性被忽略的问题 ([b919c58](https://github.com/anyup/uView-Pro/commit/b919c58cea048f9e559a6448cebe5abbf1490acf))
+
+### ♻️ Code Refactoring | 代码重构
+
+- **component-relation:** 重构组件关系逻辑并添加新功能 ([85d0cd2](https://github.com/anyup/uView-Pro/commit/85d0cd20db839a61733887f82825d47de0a1b1a6))
+- **u-talbe:** 重构u-td和u-th组件，增强u-table的兼容性 ([3fbbc52](https://github.com/anyup/uView-Pro/commit/3fbbc5233bd41b91ca829f9a65cf95ee3b599e36))
+- 修改 uView Pro 日志配置 ([6b9bb68](https://github.com/anyup/uView-Pro/commit/6b9bb6852af3eb24f109207f864145771c3e9c79))
+- **clipboard:** add clipboard function ([efdaa58](https://github.com/anyup/uView-Pro/commit/efdaa58dda923b281d9b764a82a7492f36717ac4))
+
+### 👥 Contributors
+
+<a href="https://github.com/koboshi"><img src="https://github.com/koboshi.png?size=40" width="40" height="40" alt="koboshi" title="koboshi"/></a> <a href="https://github.com/anyup"><img src="https://github.com/anyup.png?size=40" width="40" height="40" alt="anyup" title="anyup"/></a> <a href="https://github.com/lonelyflyer"><img src="https://github.com/lonelyflyer.png?size=40" width="40" height="40" alt="Lonelyflyer" title="Lonelyflyer"/></a> 
+
 ## 0.3.2（2025-10-15）
 
 ### 📝 Documentation | 文档

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

@@ -19,7 +19,7 @@ export default {
 
 <script setup lang="ts">
 import { getCurrentInstance, computed } from 'vue';
-import { $u, useParent } from '../..';
+import { $u, useParent, useChildren } from '../..';
 import { CheckboxGroupProps } from './types';
 
 /**
@@ -44,6 +44,7 @@ const emit = defineEmits(['update:modelValue', 'change']);
 
 // 使用父组件Hook
 const { children, broadcast } = useParent('u-checkbox-group');
+const { emitToParent } = useChildren('u-checkbox-group', 'u-form-item');
 
 /**
  * 派发 change 事件和表单校验
@@ -58,7 +59,7 @@ function emitEvent() {
     });
     emit('change', values);
     setTimeout(() => {
-        $u.dispatch(instance, 'u-form-item', 'on-form-change', values);
+        emitToParent('onFormChange', values);
     }, 60);
 }
 

package/components/u-form-item/u-form-item.vue

@@ -88,15 +88,16 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, watch, getCurrentInstance, nextTick } from 'vue';
-import { $u, useChildren } from '../..';
-import { broadcast } from '../../libs/util/emitter';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { $u, useChildren, useParent } from '../..';
 // @ts-ignore
 import schema from '../../libs/util/async-validator';
 import { FormItemProps } from './types';
 // 去除警告信息
 schema.warning = function () {};
 
+const { broadcast } = useParent('u-form-item');
+
 /**
  * form-item 表单item
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
@@ -120,8 +121,6 @@ const props = defineProps(FormItemProps);
 
 const { parentExposed } = useChildren('u-form-item', 'u-form');
 
-const instance = getCurrentInstance();
-
 // 组件状态
 const initialValue = ref(''); // 存储初始值，用于重置
 const validateState = ref(''); // 校验状态 success/error/validating
@@ -136,6 +135,15 @@ const parentData = ref({
     labelAlign: 'left' // 父表单 label 对齐
 });
 
+// 显示错误提示
+// errorType: ['message', 'toast', 'border-bottom', 'none']
+const showError = computed(() => (type: string) => {
+    // 如果errorType数组中含有none，或者toast提示类型
+    if (errorType.value.indexOf('none') >= 0) return false;
+    else if (errorType.value.indexOf(type) >= 0) return true;
+    else return false;
+});
+
 // 监听校验状态和父表单 errorType 变化
 watch(validateState, () => {
     broadcastInputError();
@@ -161,15 +169,6 @@ const uLabelWidth = computed(() => {
         : '100%';
 });
 
-// 显示错误提示
-// errorType: ['message', 'toast', 'border-bottom', 'none']
-const showError = computed(() => (type: string) => {
-    // 如果errorType数组中含有none，或者toast提示类型
-    if (errorType.value.indexOf('none') >= 0) return false;
-    else if (errorType.value.indexOf(type) >= 0) return true;
-    else return false;
-});
-
 // label的宽度
 const elLabelWidth = computed(() => {
     // label默认宽度为90，优先使用本组件的值，如果没有(如果设置为0，也算是配置了值，依然起效)，则用u-form的值
@@ -215,17 +214,8 @@ const elBorderBottom = computed(() => {
 
 // 事件派发/广播工具
 function broadcastInputError() {
-    // 子组件发出事件，第三个参数为true或者false，true代表有错误
-    if (instance) {
-        // 这里可用 emitter 工具库的 broadcast 方法
-        // 子组件发出事件，第三个参数为true或者false，true代表有错误
-        broadcast(
-            instance,
-            'u-input',
-            'on-form-item-error',
-            validateState.value === 'error' && showError.value('border')
-        );
-    }
+    // 子组件发出事件，参数为true或者false，true代表有错误
+    broadcast('onFormItemError', validateState.value === 'error' && showError.value('border'));
 }
 
 /**

package/components/u-input/u-input.vue

@@ -105,14 +105,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, getCurrentInstance } from 'vue';
-import { $u } from '../..';
-import { dispatch } from '../../libs/util/emitter';
+import { ref, computed, watch } from 'vue';
+import { $u, useChildren } from '../..';
 import { InputProps } from './types';
 
 const props = defineProps(InputProps);
 const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'confirm', 'click']);
 
+const { emitToParent } = useChildren('u-input', 'u-form-item');
+
 const defaultValue = ref(props.modelValue);
 const inputHeight = 70; // input的高度
 const textareaHeight = 100; // textarea的高度
@@ -158,10 +159,6 @@ const uSelectionStart = computed(() => String(props.selectionStart));
 // 光标结束位置
 const uSelectionEnd = computed(() => String(props.selectionEnd));
 
-const instance = getCurrentInstance();
-
-// 监听u-form-item发出的错误事件，将输入框边框变红色，失效了
-// uni.$on('on-form-item-error', onFormItemError);
 /**
  * change 事件
  * @param event
@@ -183,7 +180,7 @@ function handleInput(event: any) {
         lastValue.value = value;
         // #endif
         // 通过 emitter 派发事件
-        dispatch(instance, 'u-form-item', 'on-form-change', value);
+        emitToParent('onFormChange', value);
     }, 40);
 }
 
@@ -205,12 +202,11 @@ function handleBlur(event: any) {
         if ($u.trim(value) == lastValue.value) return;
         lastValue.value = value;
         // #endif
-        dispatch(instance, 'u-form-item', 'on-form-blur', value);
+        emitToParent('onFormBlur', value);
     }, 40);
 }
 
 function onFormItemError(status: boolean) {
-    console.log('onFormItemError', status);
     validateState.value = status;
 }
 
@@ -235,6 +231,10 @@ function onClear(event: any) {
 function inputClick() {
     emit('click');
 }
+
+defineExpose({
+    onFormItemError
+});
 </script>
 
 <style lang="scss" scoped>

package/components/u-radio-group/u-radio-group.vue

@@ -18,8 +18,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { getCurrentInstance } from 'vue';
-import { $u, useParent } from '../..';
+import { $u, useParent, useChildren } from '../..';
 import { RadioGroupProps } from './types';
 
 /**
@@ -42,6 +41,7 @@ const props = defineProps(RadioGroupProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
+const { emitToParent } = useChildren('u-radio-group', 'u-form-item');
 useParent('u-radio-group');
 
 /**
@@ -73,7 +73,7 @@ function setValue(val: string | number) {
     // 由于头条小程序执行迟钝，故需要用几十毫秒的延时
     setTimeout(() => {
         // 将当前的值发送到 u-form-item 进行校验
-        $u.dispatch(getCurrentInstance(), 'u-form-item', 'on-form-change', val);
+        emitToParent('onFormChange', val);
     }, 60);
 }
 

package/components/u-safe-bottom/props.ts

@@ -0,0 +1,11 @@
+import type { ExtractPropTypes } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * SafeBottomProps SafeBottom 底部安全区
+ */
+export const SafeBottomProps = {
+    ...baseProps,
+};
+
+export type SafeBottomProps = ExtractPropTypes<typeof SafeBottomProps>;

package/components/u-safe-bottom/u-safe-bottom.vue

@@ -1,5 +1,9 @@
 <template>
-    <view class="u-safe-bottom" :style="style" :class="[!isNVue && 'safe-area-inset-bottom']"></view>
+    <view
+        class="u-safe-bottom"
+        :style="$u.toStyle(style, customStyle)"
+        :class="[!isNVue && 'safe-area-inset-bottom', customClass]"
+    ></view>
 </template>
 
 <script lang="ts">
@@ -16,11 +20,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
-import { sys } from '../../libs/function/sys';
-import addUnit from '../../libs/function/addUnit';
-import deepMerge from '../../libs/function/deepMerge';
-import { mergeStyles } from '../../libs/function/styleUtils';
+import { ref, computed, onMounted, type CSSProperties } from 'vue';
+import { SafeBottomProps } from './props';
+import { $u } from '../../';
 
 /**
  * SafeBottom 底部安全区
@@ -28,24 +30,17 @@ import { mergeStyles } from '../../libs/function/styleUtils';
  * @property {String | Object} customStyle 自定义样式
  * @example <u-safe-bottom></u-safe-bottom>
  */
-const props = withDefaults(
-    defineProps<{
-        customStyle?: string | CSSProperties;
-    }>(),
-    {
-        customStyle: () => ({})
-    }
-);
+const props = defineProps(SafeBottomProps);
 
 const isNVue = ref(false);
 
 const style = computed(() => {
-    let r: CSSProperties = {};
+    let result: CSSProperties = {};
     // #ifdef APP-NVUE || MP-TOUTIAO
     // nvue下，高度使用js计算填充
-    r.height = addUnit(sys().safeAreaInsets.bottom, 'px');
+    result.height = $u.addUnit($u.sys().safeAreaInsets.bottom, 'px');
     // #endif
-    return deepMerge(r, mergeStyles(props.customStyle));
+    return result;
 });
 
 onMounted(() => {

package/components/u-status-bar/props.ts

@@ -0,0 +1,13 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+export const StatusBarProps = {
+    ...baseProps,
+    /** 背景设置 */
+    background: {
+        type: String,
+        default: 'transparent'
+    },
+};
+
+export type StatusBarProps = ExtractPropTypes<typeof StatusBarProps>;

package/components/u-status-bar/u-status-bar.vue

@@ -1,5 +1,8 @@
 <template>
-    <view :style="style" :class="['u-status-bar', { 'safe-area-inset-top': noBar }]">
+    <view
+        :style="$u.toStyle(style, customStyle)"
+        :class="['u-status-bar', { 'safe-area-inset-top': noBar }, customClass]"
+    >
         <slot />
     </view>
 </template>
@@ -18,11 +21,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, withDefaults, type CSSProperties } from 'vue';
-import { sys } from '../../libs/function/sys';
-import addUnit from '../../libs/function/addUnit';
-import deepMerge from '../../libs/function/deepMerge';
-import { mergeStyles } from '../../libs/function/styleUtils';
+import { ref, computed, onMounted, type CSSProperties } from 'vue';
+import { StatusBarProps } from './props';
+import { $u } from '../../';
 
 /**
  * StatusBar 状态栏
@@ -30,31 +31,20 @@ import { mergeStyles } from '../../libs/function/styleUtils';
  * @property {String} background 背景颜色
  * @example <u-status-bar></u-status-bar>
  */
-const props = withDefaults(
-    defineProps<{
-        background?: string;
-        customStyle?: string | CSSProperties;
-    }>(),
-    {
-        // 背景颜色
-        background: 'transparent',
-        customStyle: () => ({})
-    }
-);
-
+const props = defineProps(StatusBarProps);
 const noBar = ref(false);
 
 const style = computed(() => {
-    let r: CSSProperties = {
+    let result: CSSProperties = {
         background: props.background
     };
-    const sh = sys().statusBarHeight;
-    if (sh === 0) {
+    const statusBarHeight = $u.sys().statusBarHeight;
+    if (statusBarHeight === 0) {
         noBar.value = true;
     } else {
-        r.height = addUnit(sh, 'px');
+        result.height = $u.addUnit(statusBarHeight, 'px');
     }
-    return deepMerge(r, mergeStyles(props.customStyle));
+    return result;
 });
 
 onMounted(() => {

package/components/u-subsection/u-subsection.vue

@@ -28,7 +28,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
+import { ref, computed, watch, getCurrentInstance, nextTick } from 'vue';
 import { $u } from '../..';
 import { SubsectionProps } from './types';
 
@@ -88,6 +88,33 @@ watch(
     { immediate: true }
 );
 
+watch(
+    () => props.list,
+    () => {
+        if (!props.list || !props.list.length) return;
+        initListInfo();
+        // 重新获取各个tab的宽度信息
+        nextTick(() => {
+            setTimeout(() => {
+                getTabsInfo();
+            }, 10);
+        });
+    },
+    { deep: true, immediate: true }
+);
+
+watch(
+    () => props.mode,
+    () => {
+        // 重新获取各个tab的宽度信息
+        nextTick(() => {
+            setTimeout(() => {
+                getTabsInfo();
+            }, 10);
+        });
+    }
+);
+
 // 初始化 listInfo
 function initListInfo() {
     // 将list的数据，传入listInfo数组，因为不能修改props传递的list值
@@ -101,14 +128,6 @@ function initListInfo() {
     });
 }
 
-initListInfo();
-
-onMounted(() => {
-    setTimeout(() => {
-        getTabsInfo();
-    }, 10);
-});
-
 /**
  * 设置mode=subsection时，滑块特有的样式
  */

package/libs/hooks/index.ts

@@ -1,4 +1,3 @@
-// export * from './useComponent';
 export * from './useEmitter';
 export * from './useRect';
 export * from './useCompRelation';

package/libs/hooks/useCompRelation.ts

@@ -1,4 +1,3 @@
-// utils/useComponent.ts
 import {
     ref,
     reactive,
@@ -118,8 +117,8 @@ export function useParent(componentName?: string) {
     const broadcast = (event: string, data?: any, childIds?: string | string[]) => {
         const targetChildren = childIds
             ? ((Array.isArray(childIds) ? childIds : [childIds])
-                  .map(id => childrenMap.get(id))
-                  .filter(Boolean) as ChildContext[])
+                .map(id => childrenMap.get(id))
+                .filter(Boolean) as ChildContext[])
             : Array.from(childrenMap.values());
 
         logger.log(`Parent ${name} broadcasting event: ${event} to ${targetChildren.length} children`);

package/libs/index.ts

@@ -44,15 +44,12 @@ import debounce from './function/debounce';
 import throttle from './function/throttle';
 // 获取元素的位置信息
 import getRect from './function/getRect';
-// 获取父组件
-import { parentData, parent } from './function/parent';
 // 剪贴板
 import { clipboard } from './function/clipboard';
 // 配置信息
 import config from './config/config';
 // 各个需要fixed的地方的z-index配置文件
 import zIndex from './config/zIndex';
-import { dispatch, broadcast } from './util/emitter';
 import { mitt } from './util/mitt';
 // http相关
 import httpPlugin, {
@@ -268,11 +265,7 @@ export {
     getRect,
     getParent,
     $parent,
-    parent,
-    parentData,
     clipboard,
-    dispatch,
-    broadcast,
     config,
     zIndex,
     mitt
@@ -292,8 +285,6 @@ export const $u = {
     os,
     type2icon,
     randomArray,
-    dispatch,
-    broadcast,
     hexToRgb: colorGradients.hexToRgb,
     rgbToHex: colorGradients.rgbToHex,
     test,
@@ -302,8 +293,6 @@ export const $u = {
     deepMerge,
     getParent,
     $parent,
-    parent,
-    parentData,
     clipboard,
     addUnit,
     trim,

package/package.json

@@ -2,7 +2,7 @@
     "id": "uview-pro",
     "name": "uview-pro",
     "displayName": "【Vue3重构版】uView Pro｜基于Vue3+TS全面重构的70+精选UI组件库",
-    "version": "0.3.3",
+    "version": "0.3.4",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",