uview-pro 0.2.4 → 0.3.0

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

@@ -2,15 +2,18 @@
     <view
         @tap="onClick"
         class="u-cell"
-        :class="{
-            'u-border-bottom': borderBottom,
-            'u-border-top': borderTop,
-            'u-col-center': center,
-            'u-cell--required': required
-        }"
+        :class="[
+            {
+                'u-border-bottom': borderBottom,
+                'u-border-top': borderTop,
+                'u-col-center': center,
+                'u-cell--required': required
+            },
+            customClass
+        ]"
         hover-stay-time="150"
         :hover-class="hoverClass"
-        :style="{ backgroundColor: bgColor }"
+        :style="$u.toStyle({ backgroundColor: bgColor }, customStyle)"
     >
         <u-icon
             :size="iconSize"
@@ -46,13 +49,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-cell-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 import { CellItemProps } from './types';
-
-defineOptions({
-    name: 'u-cell-item'
-});
+import { $u } from '../..';
 
 /**
  * cellItem 单元格Item

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"
@@ -35,7 +35,7 @@ export default {
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { $u, useChildren, useParentEvents } from '../..';
+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,24 +188,23 @@ function setValue() {
     }
 }
 
-// 使用自动取消监听注册父组件事件
-useParentEvents(childId, {
-    setChecked: data => {
-        if (!isDisabled.value) {
-            emit('update:modelValue', data.checked);
-            if (data.checked !== props.modelValue) {
-                emitEvent();
-            }
+// 设置组件的modelValue值
+function setChecked(data: any) {
+    if (!isDisabled.value) {
+        emit('update:modelValue', data.checked);
+        if (data.checked !== props.modelValue) {
+            emitEvent();
         }
     }
-});
+}
 
 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值只能动态增加，不能动态减少。

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"
@@ -89,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);
 }
 
 /**

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"
@@ -42,7 +42,7 @@ export default {
 
 <script setup lang="ts">
 import { ref, watch, onMounted, useSlots, getCurrentInstance, nextTick, computed } from 'vue';
-import { $u, useChildren, useParentEvents } from '../..';
+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,27 +173,31 @@ function queryRect() {
         });
 }
 
-// 使用自动取消监听注册父组件事件
-useParentEvents(childId, {
-    openSingle: (data: any) => {
-        // 只有目标项展开，其他都关闭
-        const shouldShow = data.targetName === itemName.value;
-        setShowState(shouldShow);
-    },
-    closeAll: () => {
-        setShowState(false);
-    },
-    setMultiple: (data: any) => {
-        const shouldShow = data.targetNames.includes(itemName.value);
-        setShowState(shouldShow);
-    },
-    toggleSingle: (data: any) => {
-        // 只有目标项才切换状态
-        if (data.targetName === itemName.value) {
-            setShowState(!isShow.value);
-        }
+// 单选
+function openSingle(data: any) {
+    // 只有目标项展开，其他都关闭
+    const shouldShow = data.targetName === itemName.value;
+    setShowState(shouldShow);
+}
+
+// 关闭所有
+function closeAll() {
+    setShowState(false);
+}
+
+// 多选
+function setMultiple(data: any) {
+    const shouldShow = data.targetNames.includes(itemName.value);
+    setShowState(shouldShow);
+}
+
+// 切换单个
+function toggleSingle(data: any) {
+    // 只有目标项才切换状态
+    if (data.targetName === itemName.value) {
+        setShowState(!isShow.value);
     }
-});
+}
 
 onMounted(() => {
     // 关键修复：根据 open 属性设置初始状态
@@ -236,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,8 +1,8 @@
 <template>
     <view
         class="u-notice-bar"
-        :style="{ background: computeBgColor, padding: props.padding }"
-        :class="[props.type ? `u-type-${props.type}-light-bg` : '']"
+        :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
@@ -54,11 +54,23 @@
     </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 通告栏

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 },
     /** 是否自动开始倒计时 */

package/components/u-count-down/u-count-down.vue

@@ -1,11 +1,11 @@
 <template>
-    <view class="u-countdown">
+    <view class="u-countdown" :class="customClass" :style="$u.toStyle(customStyle)">
         <view
             class="u-countdown-item"
-            :style="[itemStyle]"
+            :style="$u.toStyle(itemStyle)"
             v-if="props.showDays && (props.hideZeroDay || (!props.hideZeroDay && d != '00'))"
         >
-            <view class="u-countdown-time" :style="[letterStyle]">
+            <view class="u-countdown-time" :style="$u.toStyle(letterStyle)">
                 {{ d }}
             </view>
         </view>
@@ -20,7 +20,7 @@
         >
             {{ props.separator == 'colon' && props.showHours ? ':' : '天' }}
         </view>
-        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showHours">
+        <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showHours">
             <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
                 {{ h }}
             </view>
@@ -36,7 +36,7 @@
         >
             {{ props.separator == 'colon' && props.showMinutes ? ':' : '时' }}
         </view>
-        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showMinutes">
+        <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showMinutes">
             <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
                 {{ i }}
             </view>
@@ -52,7 +52,7 @@
         >
             {{ props.separator == 'colon' && props.showSeconds ? ':' : '分' }}
         </view>
-        <view class="u-countdown-item" :style="[itemStyle]" v-if="props.showSeconds">
+        <view class="u-countdown-item" :style="$u.toStyle(itemStyle)" v-if="props.showSeconds">
             <view class="u-countdown-time" :style="{ fontSize: props.fontSize + 'rpx', color: props.color }">
                 {{ s }}
             </view>
@@ -67,11 +67,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-count-down',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { CountDownProps } from './types';
-
-defineOptions({ name: 'u-count-down' });
+import { $u } from '../../';
 
 /**
  * countDown 倒计时

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

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * u-count-to 数字滚动 Props
  * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
  */
 export const CountToProps = {
+    ...baseProps,
     /** 开始的数值，默认从0增长到某一个数 */
     startVal: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 要滚动的目标数值，必须 */

package/components/u-count-to/u-count-to.vue

@@ -1,21 +1,39 @@
 <template>
     <view
         class="u-count-num"
-        :style="{
-            fontSize: props.fontSize + 'rpx',
-            fontWeight: props.bold ? 'bold' : 'normal',
-            color: props.color
-        }"
+        :class="customClass"
+        :style="
+            $u.toStyle(
+                {
+                    fontSize: props.fontSize + 'rpx',
+                    fontWeight: props.bold ? 'bold' : 'normal',
+                    color: props.color
+                },
+                customStyle
+            )
+        "
     >
         {{ displayValue }}
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-count-to',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { CountToProps } from './types';
-
-defineOptions({ name: 'u-count-to' });
+import { $u } from '../../';
 
 /**
  * countTo 数字滚动