uview-pro 0.3.3 → 0.3.5

package/components/u-search/u-search.vue

@@ -28,7 +28,6 @@
                 :value="modelValue"
                 @confirm="search"
                 @input="inputChange"
-                :disabled="disabled"
                 @focus="getFocus"
                 :focus="focus"
                 :maxlength="maxlength"
@@ -41,7 +40,8 @@
                     {
                         textAlign: inputAlign,
                         color: color,
-                        backgroundColor: bgColor
+                        backgroundColor: bgColor,
+                        pointerEvents: disabled ? 'none' : 'auto'
                     },
                     inputStyle
                 ]"
@@ -114,7 +114,17 @@ import { $u } from '../..';
 
 const props = defineProps(SearchProps);
 
-const emit = defineEmits(['update:modelValue', 'change', 'search', 'custom', 'clear', 'focus', 'blur', 'click']);
+const emit = defineEmits([
+    'update:modelValue',
+    'input',
+    'change',
+    'search',
+    'custom',
+    'clear',
+    'focus',
+    'blur',
+    'click'
+]);
 
 // 绑定输入框的值
 const keyword = ref(props.modelValue);
@@ -134,6 +144,7 @@ watch(
 );
 watch(keyword, nVal => {
     emit('update:modelValue', nVal);
+    emit('input', nVal);
     emit('change', nVal);
 });
 

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/function/addUnit.ts

@@ -1,13 +1,50 @@
 import validation from './test';
 
 /**
- * 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
- * @param value 输入值，可以为字符串或数字，默认'auto'
+ * 添加单位，支持以下场景：
+ * 1. 单值：如果有rpx、%、px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾
+ * 2. 多值（空格分隔）：分别处理每个值，如 "10 20" => "10rpx 20rpx"
+ *
+ * @example
+ * ```ts
+ * addUnit(10) => "10rpx"
+ * addUnit('10px') => "10px"
+ * addUnit('auto') => "auto"
+ * addUnit('10 20') => "10rpx 20rpx"
+ * addUnit('10rpx 20') => "10rpx 20rpx"
+ * ```
+ *
+ * @param value 输入值，可以为字符串或数字，默认'auto'。支持空格分隔的多值（用于 padding、margin 等）
  * @param unit 单位，默认'rpx'
  * @returns 添加单位后的字符串
  */
 export default function addUnit(value: string | number = 'auto', unit: string = 'rpx'): string {
+    // 若传入 number 类型，转为 string
     const strValue = String(value);
-    // 用uView内置验证规则中的number判断是否为数值
+
+    // 如果是空值，直接返回
+    if (!strValue) return '';
+
+    // auto 直接返回
+    if (strValue === 'auto') return strValue;
+
+    // 检查是否包含空格（多值场景）
+    if (strValue.includes(' ')) {
+        // 分割每个值并单独处理
+        return strValue
+            .split(' ')
+            .map(s => {
+                // 如果当前值已有单位或为 auto，直接返回
+                if (s === 'auto' || /^-?\d*\.?\d+(%|px|rpx|em|rem|vh|vw)$/.test(s)) return s;
+                // 数字类型的值添加单位
+                return validation.number(s) ? `${s}${unit}` : s;
+            })
+            .join(' ');
+    }
+
+    // 单值场景：如果已有单位或为 auto，直接返回
+    if (/^-?\d*\.?\d+(%|px|rpx|em|rem|vh|vw)$/.test(strValue)) return strValue;
+
+    // 用 uView 内置验证规则判断是否为数值，是则加上单位
     return validation.number(strValue) ? `${strValue}${unit}` : strValue;
 }

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,
@@ -28,6 +27,7 @@ interface ParentContext {
 interface ChildContext {
     id: string;
     name: string;
+    getChildIndex: () => number;
     emitToParent: (event: string, data?: any) => void;
     getParentExposed: () => Record<string, any>;
     getInstance: () => any;
@@ -320,9 +320,20 @@ export function useChildren(componentName?: string, parentName?: string) {
         }
     };
 
+    const getChildIndex = () => {
+        if (!parentRef.value) return -1;
+        try {
+            const children = parentRef.value.getChildren();
+            return children.findIndex((child: ChildContext) => child.id === instanceId);
+        } catch (error) {
+            return -1;
+        }
+    };
+
     const childContext: ChildContext = {
         id: instanceId,
         name: name || 'anonymous',
+        getChildIndex,
         emitToParent,
         getParentExposed,
         getInstance: () => instance,
@@ -351,6 +362,7 @@ export function useChildren(componentName?: string, parentName?: string) {
     return {
         childId: instanceId,
         childName: name || 'anonymous',
+        childIndex: computed(getChildIndex),
         parent: parentRef,
         emitToParent,
         getParentExposed,

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.5",
     "description": "uView Pro，是全面支持Vue3的uni-app生态框架，70+精选组件已使用TypeScript重构，已全面支持uni-app Vue3.0",
     "main": "index.ts",
     "module": "index.ts",

package/types/components.d.ts

@@ -1,7 +1,7 @@
 declare module 'vue' {
     export interface GlobalComponents {
-        // 基础组件
         uActionSheet: (typeof import('../components/u-action-sheet/u-action-sheet.vue'))['default'];
+        uActionSheetItem: (typeof import('../components/u-action-sheet-item/u-action-sheet-item.vue'))['default'];
         uAlertTips: (typeof import('../components/u-alert-tips/u-alert-tips.vue'))['default'];
         uAvatar: (typeof import('../components/u-avatar/u-avatar.vue'))['default'];
         uAvatarCropper: (typeof import('../components/u-avatar-cropper/u-avatar-cropper.vue'))['default'];
@@ -96,4 +96,4 @@ declare module 'vue' {
     }
 }
 
-export { };
+export {};