uview-pro 0.2.3 → 0.3.0

package/components/u-checkbox/types.ts

@@ -1,5 +1,6 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { Shape } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * checkbox 复选框类型定义
@@ -8,6 +9,7 @@ import type { Shape } from '../../types/global';
 export type CheckboxValue = string | number | boolean;
 
 export const CheckboxProps = {
+    ...baseProps,
     /** checkbox的名称 */
     name: { type: [String, Number], default: '' },
     /** 形状，square为方形，circle为原型 */

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

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-checkbox" :style="[checkboxStyle]">
+    <view class="u-checkbox" :style="$u.toStyle(checkboxStyle, customStyle)" :class="customClass">
         <view class="u-checkbox__icon-wrap" @tap="toggle" :class="iconClass" :style="$u.toStyle(iconStyle)">
             <u-icon
                 class="u-checkbox__icon-wrap__icon"
@@ -34,8 +34,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, onUnmounted } from 'vue';
-import { $u, useChildren, onParentEvent } from '../..';
+import { computed } from 'vue';
+import { $u, useChildren } from '../..';
 import { CheckboxProps } from './types';
 
 /**
@@ -57,7 +57,7 @@ const props = defineProps(CheckboxProps);
 const emit = defineEmits(['change', 'update:modelValue']);
 
 // 使用子组件Hook
-const { childId, parentExposed } = useChildren('u-checkbox', 'u-checkbox-group');
+const { parentExposed } = useChildren('u-checkbox', 'u-checkbox-group');
 
 // 是否禁用，如果父组件u-checkbox-group禁用的话，将会忽略子组件的配置
 const isDisabled = computed(() => {
@@ -188,27 +188,23 @@ function setValue() {
     }
 }
 
-// 监听父组件事件
-const unsubscribeSetChecked = onParentEvent(childId, 'setChecked', data => {
+// 设置组件的modelValue值
+function setChecked(data: any) {
     if (!isDisabled.value) {
         emit('update:modelValue', data.checked);
         if (data.checked !== props.modelValue) {
             emitEvent();
         }
     }
-});
-
-// 在适当的时候取消监听
-onUnmounted(() => {
-    unsubscribeSetChecked();
-});
+}
 
 defineExpose({
     isChecked: computed(() => props.modelValue),
     name: props.name,
     setValue,
     emitEvent,
-    props
+    props,
+    setChecked
 });
 </script>
 

package/components/u-checkbox-group/types.ts

@@ -1,5 +1,6 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { Shape } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * checkbox-group 复选框组类型定义
@@ -7,6 +8,7 @@ import type { Shape } from '../../types/global';
  */
 
 export const CheckboxGroupProps = {
+    ...baseProps,
     /** 最多能选中多少个checkbox */
     max: { type: Number, default: 999 },
     /** 是否禁用所有复选框 */

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

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-checkbox-group u-clearfix">
+    <view class="u-checkbox-group u-clearfix" :class="customClass" :style="$u.toStyle(customStyle)">
         <slot></slot>
     </view>
 </template>

package/components/u-circle-progress/types.ts

@@ -1,11 +1,13 @@
 import { type ExtractPropTypes, type PropType } from 'vue';
 import type { ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * circleProgress 环形进度条 Props
  * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
  */
 export const CircleProgressProps = {
+    ...baseProps,
     /** 圆环进度百分比值 */
     percent: {
         type: Number,

package/components/u-circle-progress/u-circle-progress.vue

@@ -1,11 +1,17 @@
 <template>
     <view
         class="u-circle-progress"
-        :style="{
-            width: widthPx + 'px',
-            height: widthPx + 'px',
-            backgroundColor: bgColor
-        }"
+        :class="customClass"
+        :style="
+            $u.toStyle(
+                {
+                    width: widthPx + 'px',
+                    height: widthPx + 'px',
+                    backgroundColor: bgColor
+                },
+                customStyle
+            )
+        "
     >
         <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
         <canvas
@@ -30,15 +36,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-circle-progress',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
 import { CircleProgressProps } from './types';
 
-defineOptions({
-    name: 'u-circle-progress'
-});
-
 /**
  * circleProgress 环形进度条
  * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
@@ -63,8 +78,12 @@ elId = 'uCircleProgressElId';
 // #endif
 const instance = getCurrentInstance();
 
-const widthPx = computed(() => (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.width)) : Number(props.width)));
-const borderWidthPx = computed(() => (typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.borderWidth)) : Number(props.borderWidth)));
+const widthPx = computed(() =>
+    typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.width)) : Number(props.width)
+);
+const borderWidthPx = computed(() =>
+    typeof uni !== 'undefined' && uni.upx2px ? uni.upx2px(Number(props.borderWidth)) : Number(props.borderWidth)
+);
 const startAngle = -Math.PI / 2; // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
 const progressContext = ref<any>(null); // 活动圆的canvas上下文
 const newPercent = ref(props.percent); // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用

package/components/u-city-select/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-city-select 城市选择器 Props
  * @description 用于选择省、市、区三级行政区域，支持回显和自定义初始值。
  */
 export const CitySelectProps = {
+    ...baseProps,
     /** 控制弹窗显示与隐藏（v-model） */
     modelValue: { type: Boolean, default: false },
     /** 默认选中的省市区名称数组 */

package/components/u-city-select/u-city-select.vue

@@ -1,6 +1,8 @@
 <template>
     <u-popup
         v-model="popupValue"
+        :class="customClass"
+        :style="$u.toStyle(customStyle)"
         mode="bottom"
         :popup="false"
         :mask="true"
@@ -11,7 +13,14 @@
         :maskCloseAble="props.maskCloseAble"
         @close="close"
     >
-        <u-tabs v-if="popupValue" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
+        <u-tabs
+            v-if="popupValue"
+            :list="genTabsList"
+            :is-scroll="true"
+            :current="tabsIndex"
+            @change="tabsChange"
+            ref="tabs"
+        ></u-tabs>
         <view class="area-box">
             <view class="u-flex" :class="{ change: isChange }">
                 <!-- 省 -->
@@ -19,7 +28,14 @@
                     <view class="u-padding-10 u-bg-gray" style="height: 100%">
                         <scroll-view :scroll-y="true" style="height: 100%">
                             <u-cell-group>
-                                <u-cell-item v-for="(item, index) in provincesList" :title="item.label" :arrow="false" :index="index" :key="index" @click="provinceChange(index)">
+                                <u-cell-item
+                                    v-for="(item, index) in provincesList"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="provinceChange(index)"
+                                >
                                     <template v-if="isChooseP && province === index" #right-icon>
                                         <u-icon size="34" name="checkbox-mark"></u-icon>
                                     </template>
@@ -33,7 +49,14 @@
                     <view class="u-padding-10 u-bg-gray" style="height: 100%">
                         <scroll-view :scroll-y="true" style="height: 100%">
                             <u-cell-group v-if="isChooseP">
-                                <u-cell-item v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index" :key="index" @click="cityChange(index)">
+                                <u-cell-item
+                                    v-for="(item, index) in citys"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="cityChange(index)"
+                                >
                                     <template v-if="isChooseC && city === index" #right-icon>
                                         <u-icon size="34" name="checkbox-mark"></u-icon>
                                     </template>
@@ -47,7 +70,14 @@
                     <view class="u-padding-10 u-bg-gray" style="height: 100%">
                         <scroll-view :scroll-y="true" style="height: 100%">
                             <u-cell-group v-if="isChooseC">
-                                <u-cell-item v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index" :key="index" @click="areaChange(index)">
+                                <u-cell-item
+                                    v-for="(item, index) in areas"
+                                    :title="item.label"
+                                    :arrow="false"
+                                    :index="index"
+                                    :key="index"
+                                    @click="areaChange(index)"
+                                >
                                     <template v-if="isChooseA && area === index" #right-icon>
                                         <u-icon size="34" name="checkbox-mark"></u-icon>
                                     </template>
@@ -61,16 +91,26 @@
     </u-popup>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-city-select',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import provinces from '../../libs/util/province';
 import citysData from '../../libs/util/city';
 import areasData from '../../libs/util/area';
 import { CitySelectProps } from './types';
-
-defineOptions({
-    name: 'u-city-select'
-});
+import { $u } from '../..';
 
 /**
  * u-city-select 城市选择器

package/components/u-col/types.ts

@@ -1,5 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { AlignType, JustifyType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-col 布局单元格 Props
@@ -13,6 +14,7 @@ import type { AlignType, JustifyType } from '../../types/global';
  */
 
 export const ColProps = {
+    ...baseProps,
     /** 占父容器宽度的多少等分，总分为12份 */
     span: { type: [Number, String] as PropType<number | string>, default: 12 },
     /** 指定栅格左侧的间隔数(总12栏) */

package/components/u-col/u-col.vue

@@ -1,16 +1,31 @@
 <template>
-    <view class="u-col" :class="['u-col-' + span]" :style="colStyle" @tap="onClick">
+    <view
+        class="u-col"
+        :class="['u-col-' + span, customClass]"
+        :style="$u.toStyle(colStyle, customStyle)"
+        @tap="onClick"
+    >
         <slot></slot>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-col',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { ColProps } from './types';
-
-defineOptions({
-    name: 'u-col'
-});
+import { $u, useChildren } from '../../';
 
 /**
  * col 布局单元格
@@ -26,10 +41,14 @@ const emit = defineEmits<{ (e: 'click'): void }>();
 
 const props = defineProps(ColProps);
 
+const { parentExposed } = useChildren('u-col', 'u-row');
+
 /**
  * gutter 给col添加间距，左右边距各占一半，从父组件u-row获取
  */
-const gutter = inject('u-row-gutter', 20);
+const gutter = computed(() => {
+    return parentExposed?.value?.props?.gutter ?? 20;
+});
 
 /**
  * 计算水平排列方式
@@ -55,7 +74,7 @@ const uAlignItem = computed(() => {
  * 计算样式对象
  */
 const colStyle = computed<any>(() => ({
-    padding: `0 ${Number(gutter) / 2}rpx`,
+    padding: `0 ${Number(gutter.value) / 2}px`,
     marginLeft: `${(100 / 12) * Number(props.offset)}%`,
     flex: `0 0 ${(100 / 12) * Number(props.span)}%`,
     alignItems: uAlignItem.value,

package/components/u-collapse/u-collapse.vue

@@ -92,13 +92,17 @@ function onChange(name: string | number) {
     // 收集当前所有展开的项
     let currentActiveNames: (string | number)[] = [];
     if (props.accordion) {
-        currentActiveNames = activeName.value ? [activeName.value] : [];
+        currentActiveNames = activeName.value === 0 || activeName.value ? [activeName.value] : [];
     } else {
-        // 对于非手风琴模式，我们不知道所有项的状态，所以这里不处理
+        // 对于非手风琴模式，我们不知道所有项的状态
         currentActiveNames = [];
+        children.forEach(child => {
+            if (child.getExposed().isShow.value) {
+                currentActiveNames.push(child.getExposed().itemName);
+            }
+        });
     }
-
-    emit('change', props.accordion ? activeName.value || '' : currentActiveNames);
+    currentActiveNames.length > 0 && emit('change', props.accordion ? activeName.value || '' : currentActiveNames);
 }
 
 /**
@@ -161,15 +165,6 @@ function init() {
     }, 150);
 }
 
-// 热更新处理 - 重新连接所有子组件
-if (import.meta.hot) {
-    import.meta.hot.accept(() => {
-        setTimeout(() => {
-            broadcast('reconnect', {});
-        }, 100);
-    });
-}
-
 // 使用defineExpose暴露给外部
 defineExpose({
     // props

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

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-collapse-item" :style="`${$u.toStyle(itemStyle)}${$u.toStyle(customStyle)}`" :class="customClass">
+    <view class="u-collapse-item" :style="$u.toStyle(itemStyle, customStyle)" :class="customClass">
         <view
             :hover-stay-time="200"
             class="u-collapse-head"
@@ -41,8 +41,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed, onUnmounted } from 'vue';
-import { $u, useChildren, onParentEvent } from '../..';
+import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed } from 'vue';
+import { $u, useChildren } from '../..';
 import { CollapseItemProps } from './types';
 
 /**
@@ -148,11 +148,8 @@ function init() {
  */
 function headClick() {
     if (props.disabled) return;
-
     // 通知父组件状态变化
-    if (parentExposed.value?.onChange) {
-        parentExposed.value.onChange(itemName.value);
-    }
+    parentExposed?.value?.onChange(itemName.value);
 }
 
 /**
@@ -176,38 +173,35 @@ function queryRect() {
         });
 }
 
-// 监听父组件的事件
-const unsubscribeOpenSingle = onParentEvent(childId, 'openSingle', (data: any) => {
+// 单选
+function openSingle(data: any) {
     // 只有目标项展开，其他都关闭
     const shouldShow = data.targetName === itemName.value;
     setShowState(shouldShow);
-});
+}
 
-const unsubscribeCloseAll = onParentEvent(childId, 'closeAll', () => {
+// 关闭所有
+function closeAll() {
     setShowState(false);
-});
+}
 
-const unsubscribeSetMultiple = onParentEvent(childId, 'setMultiple', (data: any) => {
+// 多选
+function setMultiple(data: any) {
     const shouldShow = data.targetNames.includes(itemName.value);
     setShowState(shouldShow);
-});
+}
 
-const unsubscribeToggleSingle = onParentEvent(childId, 'toggleSingle', (data: any) => {
+// 切换单个
+function toggleSingle(data: any) {
     // 只有目标项才切换状态
     if (data.targetName === itemName.value) {
         setShowState(!isShow.value);
     }
-});
-
-// 监听父组件的重连事件（热更新后）
-const unsubscribeReconnect = onParentEvent(childId, 'reconnect', () => {
-    console.log('Collapse item reconnected to parent after hot update');
-});
+}
 
 onMounted(() => {
     // 关键修复：根据 open 属性设置初始状态
     setShowState(props.open);
-
     // 初始化
     init();
 });
@@ -231,25 +225,6 @@ watch(
     { deep: true, immediate: true }
 );
 
-// 组件卸载时清理事件监听
-onUnmounted(() => {
-    unsubscribeOpenSingle();
-    unsubscribeCloseAll();
-    unsubscribeSetMultiple();
-    unsubscribeToggleSingle();
-    unsubscribeReconnect();
-});
-
-// 热更新处理
-if (import.meta.hot) {
-    import.meta.hot.accept(() => {
-        setTimeout(() => {
-            console.log('Collapse item hot updated, reinitializing...');
-            init();
-        }, 150);
-    });
-}
-
 defineExpose({
     init,
     isShow,
@@ -262,7 +237,11 @@ defineExpose({
     hoverClass,
     itemName: itemName.value,
     queryRect,
-    setShowState
+    setShowState,
+    openSingle,
+    closeAll,
+    setMultiple,
+    toggleSingle
 });
 </script>
 

package/components/u-column-notice/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { Direction, PlayState, ScrollDirection, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * u-column-notice 通告栏 Props
  */
 export const ColumnNoticeProps = {
+    ...baseProps,
     /** 显示的内容，数组 */
     list: { type: Array as PropType<string[]>, default: () => [] },
     /** 显示的主题，success|error|primary|info|warning */

package/components/u-column-notice/u-column-notice.vue

@@ -1,7 +1,17 @@
 <template>
-    <view class="u-notice-bar" :style="{ background: computeBgColor, padding: props.padding }" :class="[props.type ? `u-type-${props.type}-light-bg` : '']">
+    <view
+        class="u-notice-bar"
+        :style="$u.toStyle({ background: computeBgColor, padding: props.padding }, customStyle)"
+        :class="[props.type ? `u-type-${props.type}-light-bg` : '', customClass]"
+    >
         <view class="u-icon-wrap">
-            <u-icon class="u-left-icon" v-if="props.volumeIcon" name="volume-fill" :size="props.volumeSize" :color="computeColor"></u-icon>
+            <u-icon
+                class="u-left-icon"
+                v-if="props.volumeIcon"
+                name="volume-fill"
+                :size="props.volumeSize"
+                :color="computeColor"
+            ></u-icon>
         </view>
         <swiper
             :disable-touch="props.disableTouch"
@@ -13,23 +23,54 @@
             class="u-swiper"
         >
             <swiper-item v-for="(item, index) in props.list" :key="index" class="u-swiper-item">
-                <view class="u-news-item u-line-1" :style="textStyle" @tap="click(index)" :class="['u-type-' + props.type]">
+                <view
+                    class="u-news-item u-line-1"
+                    :style="textStyle"
+                    @tap="click(index)"
+                    :class="['u-type-' + props.type]"
+                >
                     {{ item }}
                 </view>
             </swiper-item>
         </swiper>
         <view class="u-icon-wrap">
-            <u-icon @click="getMore" class="u-right-icon" v-if="props.moreIcon" name="arrow-right" :size="26" :color="computeColor"></u-icon>
-            <u-icon @click="close" class="u-right-icon" v-if="props.closeIcon" name="close" :size="24" :color="computeColor"></u-icon>
+            <u-icon
+                @click="getMore"
+                class="u-right-icon"
+                v-if="props.moreIcon"
+                name="arrow-right"
+                :size="26"
+                :color="computeColor"
+            ></u-icon>
+            <u-icon
+                @click="close"
+                class="u-right-icon"
+                v-if="props.closeIcon"
+                name="close"
+                :size="24"
+                :color="computeColor"
+            ></u-icon>
         </view>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-column-notice',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { ColumnNoticeProps } from './types';
-
-defineOptions({ name: 'u-column-notice' });
+import { $u } from '../../';
 
 /**
  * u-column-notice 通告栏
@@ -56,7 +97,12 @@ defineOptions({ name: 'u-column-notice' });
 
 const props = defineProps(ColumnNoticeProps);
 
-const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();
+const emit = defineEmits<{
+    (e: 'click', index: number): void;
+    (e: 'close'): void;
+    (e: 'getMore'): void;
+    (e: 'end'): void;
+}>();
 
 /**
  * 计算字体颜色，如果没有自定义的，就用uview主题颜色

package/components/u-count-down/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-count-down 倒计时 Props
  * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
  */
 export const CountDownProps = {
+    ...baseProps,
     /** 倒计时的时间，秒为单位 */
     timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 是否自动开始倒计时 */