uview-pro 0.2.3 → 0.3.0

package/components/u-tabs-swiper/u-tabs-swiper.vue

@@ -1,8 +1,21 @@
 <template>
-    <view class="u-tabs" :style="{ zIndex: zIndex, background: bgColor }">
-        <scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation :style="{ zIndex: Number(zIndex) + 1 }">
+    <view class="u-tabs" :style="$u.toStyle({ zIndex: zIndex, background: bgColor }, customStyle)" :class="customClass">
+        <scroll-view
+            scroll-x
+            class="u-scroll-view"
+            :scroll-left="scrollLeft"
+            scroll-with-animation
+            :style="{ zIndex: Number(zIndex) + 1 }"
+        >
             <view class="u-tabs-scroll-box" :class="{ 'u-tabs-scroll-flex': !isScroll }">
-                <view class="u-tabs-item" :style="tabItemStyle(index)" v-for="(item, index) in getTabs" :key="index" :class="[preId + index]" @tap="emitTabChange(index)">
+                <view
+                    class="u-tabs-item"
+                    :style="tabItemStyle(index)"
+                    v-for="(item, index) in getTabs"
+                    :key="index"
+                    :class="[preId + index]"
+                    @tap="emitTabChange(index)"
+                >
                     <u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
                     {{ item[name] || item['name'] }}
                 </view>
@@ -12,12 +25,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-tabs-swiper',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, getCurrentInstance } from 'vue';
 import colorGradient from '../../libs/function/colorGradient';
 import { TabsSwiperProps } from './types';
-
-defineOptions({ name: 'u-tabs-swiper' });
+import { $u } from '../..';
 
 /**
  * tabsSwiper 全屏选项卡
@@ -96,7 +121,12 @@ function tabItemStyle(index: number) {
         height: props.height + 'rpx',
         lineHeight: props.height + 'rpx',
         padding: `0 ${Number(props.gutter) / 2}rpx`,
-        color: tabsInfo.value.length > 0 ? (tabsInfo.value[index] ? tabsInfo.value[index].color : props.activeColor) : props.inactiveColor,
+        color:
+            tabsInfo.value.length > 0
+                ? tabsInfo.value[index]
+                    ? tabsInfo.value[index].color
+                    : props.activeColor
+                : props.inactiveColor,
         fontSize: props.fontSize + 'rpx',
         zIndex: Number(props.zIndex) + 2,
         fontWeight: index == getCurrent.value && props.bold ? 'bold' : 'normal'

package/components/u-tag/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { TagShape, TagMode, TagSize, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * TagProps tag props 类型定义
  * @description 标签组件，支持多种类型、尺寸、形状、可关闭等
  */
 export const TagProps = {
+    ...baseProps,
     /** 类型，primary、success、info、warning、error */
     type: { type: String as PropType<ThemeType>, default: 'primary' },
     /** 是否禁用 */

package/components/u-tag/u-tag.vue

@@ -1,25 +1,49 @@
 <template>
     <view
         v-if="show"
-        :class="[disabled ? 'u-disabled' : '', 'u-size-' + size, 'u-shape-' + shape, 'u-mode-' + mode + '-' + type]"
+        :class="[
+            disabled ? 'u-disabled' : '',
+            'u-size-' + size,
+            'u-shape-' + shape,
+            'u-mode-' + mode + '-' + type,
+            customClass
+        ]"
         class="u-tag"
-        :style="[customStyle]"
+        :style="$u.toStyle(customStyle)"
         @tap="clickTag"
     >
         {{ text }}
         <view class="u-icon-wrap" @tap.stop>
-            <u-icon @click="close" size="22" v-if="closeable" :color="closeIconColor" name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
+            <u-icon
+                @click="close"
+                size="22"
+                v-if="closeable"
+                :color="closeIconColor"
+                name="close"
+                class="u-close-icon"
+                :style="[iconStyle]"
+            ></u-icon>
         </view>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-tag',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { TagProps } from './types';
-
-defineOptions({
-    name: 'u-tag'
-});
+import { $u } from '../../';
 
 /**
  * tag 提示

package/components/u-td/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * TdProps td props 类型定义
  * @description 表格单元格组件，支持宽度自定义
  */
 export const TdProps = {
+    ...baseProps,
     /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
     width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
 };

package/components/u-td/u-td.vue

@@ -1,16 +1,27 @@
 <template>
-    <view class="u-td" :style="tdStyle">
+    <view class="u-td" :style="$u.toStyle(tdStyle, customStyle)" :class="customClass">
         <slot></slot>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-td',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, onMounted, getCurrentInstance, watch } from 'vue';
 import { $u } from '../..';
 import { TdProps } from './types';
 
-defineOptions({ name: 'u-td' });
-
 /**
  * td td单元格
  * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）

package/components/u-text/types.ts

@@ -35,7 +35,10 @@ export const TextProps = {
     /** 字体大小 */
     size: { type: [String, Number] as PropType<string | number>, default: 28 },
     /** 图标样式 */
-    iconStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({ fontSize: '15px' }) },
+    iconStyle: {
+        type: [Object, String] as PropType<Record<string, any> | string>,
+        default: () => ({ fontSize: '15px' })
+    },
     /** 文字样式 */
     textStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({}) },
     /** 文字装饰 */

package/components/u-text/u-text.vue

@@ -9,7 +9,7 @@
             `u-text--align-${props.align}`,
             customClass
         ]"
-        :style="textStyle"
+        :style="$u.toStyle(textStyle, customStyle)"
         @click="onClick"
     >
         <!-- prefixIcon -->
@@ -17,7 +17,13 @@
             <u-icon :name="props.prefixIcon" :custom-style="$u.toStyle(props.iconStyle)"></u-icon>
         </view>
         <!-- 价格模式 -->
-        <text v-if="props.mode === 'price'" :class="['u-text__price', props.type && `u-text__value--${props.type}`]" :style="textValueStyle"> ￥{{ displayValue }} </text>
+        <text
+            v-if="props.mode === 'price'"
+            :class="['u-text__price', props.type && `u-text__value--${props.type}`]"
+            :style="textValueStyle"
+        >
+            ￥{{ displayValue }}
+        </text>
         <!-- link 模式 -->
         <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>{{ displayValue }}</u-link>
         <template v-else-if="props.openType && isMp">
@@ -44,7 +50,12 @@
             </button>
         </template>
         <!-- 默认模式 -->
-        <text v-else class="u-text__value" :style="textValueStyle" :class="[props.type && `u-text__value--${props.type}`, props.lines ? `u-line-${props.lines}` : '']">
+        <text
+            v-else
+            class="u-text__value"
+            :style="textValueStyle"
+            :class="[props.type && `u-text__value--${props.type}`, props.lines ? `u-line-${props.lines}` : '']"
+        >
             {{ displayValue }}
         </text>
         <!-- 后缀图标 -->
@@ -59,7 +70,9 @@ export default {
     name: 'u-text',
     options: {
         addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
         virtualHost: true,
+        // #endif
         styleIsolation: 'shared'
     }
 };
@@ -184,7 +197,11 @@ const textValueStyle = computed(() => {
         fontWeight: props.bold ? 'bold' : 'normal',
         wordWrap: props.wordWrap,
         fontSize: $u.addUnit(props.size),
-        lineHeight: props.lineHeight ? (typeof props.lineHeight === 'number' ? `${props.lineHeight}px` : props.lineHeight) : undefined
+        lineHeight: props.lineHeight
+            ? typeof props.lineHeight === 'number'
+                ? `${props.lineHeight}px`
+                : props.lineHeight
+            : undefined
     };
     if (props.lines) {
         style['display'] = '-webkit-box';
@@ -200,7 +217,7 @@ const textValueStyle = computed(() => {
         return $u.toStyle($u.deepMerge(style, props.textStyle as Record<string, any>));
     }
     if ($u.test.string(props.textStyle)) {
-        return `${$u.toStyle(style)}${props.textStyle}`;
+        return $u.toStyle(style, props.textStyle);
     }
     return $u.toStyle(style);
 });

package/components/u-th/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * ThProps th props 类型定义
  * @description 表格表头单元格组件，支持宽度自定义
  */
 export const ThProps = {
+    ...baseProps,
     /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
     width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
 };

package/components/u-th/u-th.vue

@@ -1,16 +1,27 @@
 <template>
-    <view class="u-th" :style="thStyle">
+    <view class="u-th" :style="$u.toStyle(thStyle, customStyle)" :class="customClass">
         <slot></slot>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-th',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, onMounted, getCurrentInstance, watch } from 'vue';
 import { $u } from '../..';
 import { ThProps } from './types';
 
-defineOptions({ name: 'u-th' });
-
 /**
  * th th单元格
  * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）

package/components/u-time-line/u-time-line.vue

@@ -1,11 +1,25 @@
 <template>
-    <view class="u-time-axis">
+    <view class="u-time-axis" :class="customClass" :style="$u.toStyle(customStyle)">
         <slot />
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-time-line',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-defineOptions({ name: 'u-time-line' });
+import { baseProps } from '../common/props';
+import { $u } from '../../';
 
 /**
  * timeLine 时间轴
@@ -14,7 +28,7 @@ defineOptions({ name: 'u-time-line' });
  * @example <u-time-line></u-time-line>
  */
 
-// 当前组件无 props 和方法，仅作为时间轴容器使用
+const props = defineProps({ ...baseProps });
 </script>
 
 <style lang="scss" scoped>

package/components/u-time-line-item/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * TimeLineItemProps 时间轴节点 props 类型定义
  * @description 时间轴节点组件，支持自定义节点颜色、位置
  */
 export const TimeLineItemProps = {
+    ...baseProps,
     /** 节点的背景颜色 */
     bgColor: { type: String, default: '#ffffff' },
     /** 节点左边图标绝对定位的top值，单位rpx */

package/components/u-time-line-item/u-time-line-item.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-time-axis-item">
+    <view class="u-time-axis-item" :class="customClass" :style="$u.toStyle(customStyle)">
         <slot name="content" />
         <view class="u-time-axis-node" :style="[nodeStyle]">
             <slot name="node">
@@ -9,11 +9,23 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-time-line-item',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue';
 import { TimeLineItemProps } from './types';
-
-defineOptions({ name: 'u-time-line-item' });
+import { $u } from '../../';
 
 /**
  * timeLineItem 时间轴Item

package/components/u-toast/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ThemeType, ToastPosition } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * ToastProps toast props 类型定义
  * @description 消息提示组件，支持 z-index 及多种配置项
  */
 export const ToastProps = {
+    ...baseProps,
     /** 层级 z-index */
     zIndex: { type: [Number, String] as PropType<number | string>, default: '' },
     /** 提示类型，success/warning/error/loading 等 */

package/components/u-toast/u-toast.vue

@@ -1,10 +1,8 @@
 <template>
     <view
         class="u-toast"
-        :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]"
-        :style="{
-            zIndex: uZIndex
-        }"
+        :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position, customClass]"
+        :style="$u.toStyle({ zIndex: uZIndex }, customStyle)"
     >
         <view class="u-icon-wrap">
             <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon>
@@ -13,16 +11,25 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-toast',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 import type { ToastExpose } from './types';
 import { ToastProps } from './types';
 
-defineOptions({
-    name: 'u-toast'
-});
-
 /**
  * toast 消息提示
  * @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。

package/components/u-top-tips/types.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * TopTipsProps top-tips props 类型定义
  * @description 顶部提示组件，支持导航栏高度、z-index
  */
 export const TopTipsProps = {
+    ...baseProps,
     /** 导航栏高度，用于提示的初始化 */
     navbarHeight: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** z-index值 */

package/components/u-top-tips/u-top-tips.vue

@@ -1,14 +1,31 @@
 <template>
-    <view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="tipStyle">{{ title }}</view>
+    <view
+        class="u-tips"
+        :class="['u-' + type, isShow ? 'u-tip-show' : '', customClass]"
+        :style="$u.toStyle(tipStyle, customStyle)"
+    >
+        {{ title }}
+    </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-top-tips',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 import { TopTipsProps } from './types';
 
-defineOptions({ name: 'u-top-tips' });
-
 /**
  * topTips 顶部提示
  * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。

package/components/u-tr/types.ts

@@ -1,8 +1,11 @@
 import type { ExtractPropTypes } from 'vue';
+import { baseProps } from '../common/props';
 
 /**
  * TrProps tr props 类型定义
  * @description 表格行组件，无特殊 props
  */
-export const TrProps = {};
+export const TrProps = {
+    ...baseProps
+};
 export type TrProps = ExtractPropTypes<typeof TrProps>;

package/components/u-tr/u-tr.vue

@@ -1,11 +1,25 @@
 <template>
-    <view class="u-tr">
+    <view class="u-tr" :class="customClass" :style="$u.toStyle(customStyle)">
         <slot></slot>
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-tr',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
-defineOptions({ name: 'u-tr' });
+import { TrProps } from './types';
+import { $u } from '../../';
 
 /**
  * tr 表格行标签
@@ -13,6 +27,7 @@ defineOptions({ name: 'u-tr' });
  * @tutorial https://uviewpro.cn/zh/components/table.html
  * @example <u-tr></u-tr>
  */
+const props = defineProps(TrProps);
 </script>
 
 <style lang="scss" scoped>

package/components/u-upload/types.ts

@@ -1,11 +1,13 @@
 import type { ExtractPropTypes, PropType } from 'vue';
 import type { ImgMode, UploadSizeType, UploadSourceType } from '../../types/global';
+import { baseProps } from '../common/props';
 
 /**
  * UploadProps upload props 类型定义
  * @description 文件上传组件，支持多种自定义参数
  */
 export const UploadProps = {
+    ...baseProps,
     /** 选择器宽度，单位rpx */
     width: { type: [Number, String] as PropType<number | string>, default: 200 },
     /** 选择器高度，单位rpx */
@@ -64,9 +66,15 @@ export const UploadProps = {
     /** 是否显示提示 */
     showTips: { type: Boolean, default: true },
     /** 上传前钩子，返回true或Promise */
-    beforeUpload: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
+    beforeUpload: {
+        type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>,
+        default: null
+    },
     /** 删除前钩子，返回true或Promise */
-    beforeRemove: { type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>, default: null },
+    beforeRemove: {
+        type: Function as PropType<((index: number, files: any[]) => boolean | Promise<any>) | null>,
+        default: null
+    },
     /** 如果上传后的返回值为json字符串，是否转为json格式 */
     toJson: { type: Boolean, default: true }
 };

package/components/u-upload/u-upload.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="u-upload" v-if="!disabled">
+    <view class="u-upload" v-if="!disabled" :class="customClass" :style="$u.toStyle(customStyle)">
         <view
             v-if="showUploadList"
             class="u-list-item u-preview-wrap"
@@ -28,7 +28,13 @@
                 :percent="item.progress"
             ></u-line-progress>
             <view @tap.stop="retry(index)" v-if="item.error" class="u-error-btn">点击重试</view>
-            <image @tap.stop="doPreviewImage(item.url || item.path, index)" class="u-preview-image" v-if="!item.isImage" :src="item.url || item.path" :mode="imageMode"></image>
+            <image
+                @tap.stop="doPreviewImage(item.url || item.path, index)"
+                class="u-preview-image"
+                v-if="!item.isImage"
+                :src="item.url || item.path"
+                :mode="imageMode"
+            ></image>
         </view>
         <slot name="file" :file="lists"></slot>
         <view style="display: inline-block" @tap="selectFile" v-if="Number(maxCount) > lists.length">
@@ -50,15 +56,24 @@
     </view>
 </template>
 
+<script lang="ts">
+export default {
+    name: 'u-upload',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { $u } from '../..';
 import { UploadProps } from './types';
 
-defineOptions({
-    name: 'u-upload'
-});
-
 /**
  * upload 图片上传
  * @description 该组件用于上传图片场景
@@ -259,7 +274,11 @@ async function uploadFile(index = 0) {
         // 明白意思即可，无需纠结this.$u.$parent.call(this)的细节
         let beforeResponse = props.beforeUpload(index, lists.value);
         // 判断是否返回了promise
-        if (typeof beforeResponse === 'object' && beforeResponse !== null && typeof (beforeResponse as Promise<any>).then === 'function') {
+        if (
+            typeof beforeResponse === 'object' &&
+            beforeResponse !== null &&
+            typeof (beforeResponse as Promise<any>).then === 'function'
+        ) {
             await (beforeResponse as Promise<any>)
                 .then(() => {
                     // promise返回成功，不进行动作，继续上传
@@ -349,7 +368,11 @@ function deleteItem(index: number) {
                     // 此处钩子执行 原理同before-remove参数，见上方注释
                     let beforeResponse = props.beforeRemove(index, lists.value);
                     // 判断是否返回了promise
-                    if (typeof beforeResponse === 'object' && beforeResponse !== null && typeof (beforeResponse as Promise<any>).then === 'function') {
+                    if (
+                        typeof beforeResponse === 'object' &&
+                        beforeResponse !== null &&
+                        typeof (beforeResponse as Promise<any>).then === 'function'
+                    ) {
                         await (beforeResponse as Promise<any>)
                             .then(() => {
                                 // promise返回成功，不进行动作，继续上传