uview-pro 0.2.4 → 0.3.1

package/components/u-th/types.ts

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

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

@@ -1,81 +1,92 @@
-<template>
-    <view class="u-th" :style="thStyle">
-        <slot></slot>
-    </view>
-</template>
-
-<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使用）
- * @tutorial https://uviewpro.cn/zh/components/table.html#td-props
- * @property {String | Number} width 标题单元格宽度百分比或者具体带单位的值，如30%，200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度
- * @example 暂无示例
- */
-
-const props = defineProps(ThProps);
-
-const thStyle = ref<Record<string, any>>({}); // 标题单元格样式
-let parent: any = null; // 父组件实例
-
-/**
- * 更新标题单元格样式
- */
-function updateStyle() {
-    if (!parent) return;
-
-    const style: Record<string, any> = {};
-    if (props.width && props.width !== 'auto') style.width = props.width;
-    else style.flex = '1';
-    style.textAlign = parent.props.align;
-    style.padding = parent.props.padding;
-    style.borderBottom = `solid 1px ${parent.props.borderColor}`;
-    style.borderRight = `solid 1px ${parent.props.borderColor}`;
-    Object.assign(style, parent.props.thStyle);
-    thStyle.value = style;
-}
-
-/**
- * 组件挂载时查找父组件u-table并合并样式
- */
-onMounted(() => {
-    // 查找父组件u-table
-    const instance = getCurrentInstance();
-    if (instance) {
-        parent = $u.$parent('u-table');
-        if (parent) {
-            updateStyle();
-
-            // 监听父组件属性变化
-            watch(
-                () => parent.props,
-                () => {
-                    updateStyle();
-                },
-                { deep: true }
-            );
-        }
-    }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-th {
-    @include vue-flex;
-    flex-direction: column;
-    // flex: 1;
-    justify-content: center;
-    font-size: 28rpx;
-    color: $u-main-color;
-    font-weight: bold;
-    background-color: rgb(245, 246, 248);
-}
-</style>
+<template>
+    <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';
+
+/**
+ * th th单元格
+ * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
+ * @tutorial https://uviewpro.cn/zh/components/table.html#td-props
+ * @property {String | Number} width 标题单元格宽度百分比或者具体带单位的值，如30%，200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度
+ * @example 暂无示例
+ */
+
+const props = defineProps(ThProps);
+
+const thStyle = ref<Record<string, any>>({}); // 标题单元格样式
+let parent: any = null; // 父组件实例
+
+/**
+ * 更新标题单元格样式
+ */
+function updateStyle() {
+    if (!parent) return;
+
+    const style: Record<string, any> = {};
+    if (props.width && props.width !== 'auto') style.width = props.width;
+    else style.flex = '1';
+    style.textAlign = parent.props.align;
+    style.padding = parent.props.padding;
+    style.borderBottom = `solid 1px ${parent.props.borderColor}`;
+    style.borderRight = `solid 1px ${parent.props.borderColor}`;
+    Object.assign(style, parent.props.thStyle);
+    thStyle.value = style;
+}
+
+/**
+ * 组件挂载时查找父组件u-table并合并样式
+ */
+onMounted(() => {
+    // 查找父组件u-table
+    const instance = getCurrentInstance();
+    if (instance) {
+        parent = $u.$parent('u-table');
+        if (parent) {
+            updateStyle();
+
+            // 监听父组件属性变化
+            watch(
+                () => parent.props,
+                () => {
+                    updateStyle();
+                },
+                { deep: true }
+            );
+        }
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-th {
+    @include vue-flex;
+    flex-direction: column;
+    // flex: 1;
+    justify-content: center;
+    font-size: 28rpx;
+    color: $u-main-color;
+    font-weight: bold;
+    background-color: rgb(245, 246, 248);
+}
+</style>

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

@@ -1,39 +1,53 @@
-<template>
-    <view class="u-time-axis">
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'u-time-line' });
-
-/**
- * timeLine 时间轴
- * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
- * @tutorial https://uviewpro.cn/zh/components/timeLine.html
- * @example <u-time-line></u-time-line>
- */
-
-// 当前组件无 props 和方法，仅作为时间轴容器使用
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-time-axis {
-    padding-left: 40rpx;
-    position: relative;
-}
-
-.u-time-axis::before {
-    content: ' ';
-    position: absolute;
-    left: 0;
-    top: 12rpx;
-    width: 1px;
-    bottom: 0;
-    border-left: 1px solid #ddd;
-    transform-origin: 0 0;
-    transform: scaleX(0.5);
-}
-</style>
+<template>
+    <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">
+import { baseProps } from '../common/props';
+import { $u } from '../../';
+
+/**
+ * timeLine 时间轴
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
+ * @tutorial https://uviewpro.cn/zh/components/timeLine.html
+ * @example <u-time-line></u-time-line>
+ */
+
+const props = defineProps({ ...baseProps });
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-time-axis {
+    padding-left: 40rpx;
+    position: relative;
+}
+
+.u-time-axis::before {
+    content: ' ';
+    position: absolute;
+    left: 0;
+    top: 12rpx;
+    width: 1px;
+    bottom: 0;
+    border-left: 1px solid #ddd;
+    transform-origin: 0 0;
+    transform: scaleX(0.5);
+}
+</style>

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

@@ -1,14 +1,16 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * TimeLineItemProps 时间轴节点 props 类型定义
- * @description 时间轴节点组件，支持自定义节点颜色、位置
- */
-export const TimeLineItemProps = {
-    /** 节点的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 节点左边图标绝对定位的top值，单位rpx */
-    nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
-};
-
-export type TimeLineItemProps = ExtractPropTypes<typeof TimeLineItemProps>;
+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 */
+    nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
+};
+
+export type TimeLineItemProps = ExtractPropTypes<typeof TimeLineItemProps>;

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

@@ -1,78 +1,90 @@
-<template>
-    <view class="u-time-axis-item">
-        <slot name="content" />
-        <view class="u-time-axis-node" :style="[nodeStyle]">
-            <slot name="node">
-                <view class="u-dot"> </view>
-            </slot>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { TimeLineItemProps } from './types';
-
-defineOptions({ name: 'u-time-line-item' });
-
-/**
- * timeLineItem 时间轴Item
- * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
- * @tutorial https://uviewpro.cn/zh/components/timeLine.html
- * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
- * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
- * @example <u-time-line-item node-top="2">...</u-time-line-item>
- */
-
-/**
- * 节点的背景颜色
- * @default "#ffffff"
- */
-const props = defineProps(TimeLineItemProps);
-
-/**
- * 计算节点样式
- * @returns 节点样式对象
- */
-const nodeStyle = computed(() => {
-    // 生成节点样式对象
-    const style: Record<string, string> = {
-        backgroundColor: props.bgColor
-    };
-    // 如果设置了 nodeTop，则添加 top 属性
-    if (props.nodeTop !== '') style.top = String(props.nodeTop) + 'rpx';
-    return style;
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-time-axis-item {
-    @include vue-flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-    margin-bottom: 32rpx;
-}
-
-.u-time-axis-node {
-    position: absolute;
-    top: 12rpx;
-    left: -40rpx;
-    transform-origin: 0;
-    transform: translateX(-50%);
-    @include vue-flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1;
-    font-size: 24rpx;
-}
-
-.u-dot {
-    height: 16rpx;
-    width: 16rpx;
-    border-radius: 100rpx;
-    background: #ddd;
-}
-</style>
+<template>
+    <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">
+                <view class="u-dot"> </view>
+            </slot>
+        </view>
+    </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';
+import { $u } from '../../';
+
+/**
+ * timeLineItem 时间轴Item
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
+ * @tutorial https://uviewpro.cn/zh/components/timeLine.html
+ * @property {String} bg-color 左边节点的背景颜色，一般通过slot内容自定义背景颜色即可（默认#ffffff）
+ * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
+ * @example <u-time-line-item node-top="2">...</u-time-line-item>
+ */
+
+/**
+ * 节点的背景颜色
+ * @default "#ffffff"
+ */
+const props = defineProps(TimeLineItemProps);
+
+/**
+ * 计算节点样式
+ * @returns 节点样式对象
+ */
+const nodeStyle = computed(() => {
+    // 生成节点样式对象
+    const style: Record<string, string> = {
+        backgroundColor: props.bgColor
+    };
+    // 如果设置了 nodeTop，则添加 top 属性
+    if (props.nodeTop !== '') style.top = String(props.nodeTop) + 'rpx';
+    return style;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-time-axis-item {
+    @include vue-flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    margin-bottom: 32rpx;
+}
+
+.u-time-axis-node {
+    position: absolute;
+    top: 12rpx;
+    left: -40rpx;
+    transform-origin: 0;
+    transform: translateX(-50%);
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    font-size: 24rpx;
+}
+
+.u-dot {
+    height: 16rpx;
+    width: 16rpx;
+    border-radius: 100rpx;
+    background: #ddd;
+}
+</style>

package/components/u-toast/types.ts

@@ -1,36 +1,38 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { ThemeType, ToastPosition } from '../../types/global';
-
-/**
- * ToastProps toast props 类型定义
- * @description 消息提示组件，支持 z-index 及多种配置项
- */
-export const ToastProps = {
-    /** 层级 z-index */
-    zIndex: { type: [Number, String] as PropType<number | string>, default: '' },
-    /** 提示类型，success/warning/error/loading 等 */
-    type: { type: String as PropType<ThemeType | 'default'>, default: '' },
-    /** 显示时长，单位ms */
-    duration: { type: Number, default: 2000 },
-    /** 是否显示图标 */
-    icon: { type: Boolean, default: true },
-    /** 显示位置，center/top/bottom */
-    position: { type: String as PropType<ToastPosition>, default: 'center' },
-    /** 关闭时的回调函数 */
-    callback: { type: Function as PropType<(() => void) | null>, default: null },
-    /** 是否返回上一页 */
-    back: { type: Boolean, default: false },
-    /** 是否为tab页面跳转 */
-    isTab: { type: Boolean, default: false },
-    /** 跳转的url */
-    url: { type: String, default: '' },
-    /** 跳转参数对象 */
-    params: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
-};
-
-export type ToastProps = ExtractPropTypes<typeof ToastProps>;
-
-export type ToastExpose = {
-    show: (options: Record<string, any>) => void;
-    hide: () => void;
-};
+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 等 */
+    type: { type: String as PropType<ThemeType | 'default'>, default: '' },
+    /** 显示时长，单位ms */
+    duration: { type: Number, default: 2000 },
+    /** 是否显示图标 */
+    icon: { type: Boolean, default: true },
+    /** 显示位置，center/top/bottom */
+    position: { type: String as PropType<ToastPosition>, default: 'center' },
+    /** 关闭时的回调函数 */
+    callback: { type: Function as PropType<(() => void) | null>, default: null },
+    /** 是否返回上一页 */
+    back: { type: Boolean, default: false },
+    /** 是否为tab页面跳转 */
+    isTab: { type: Boolean, default: false },
+    /** 跳转的url */
+    url: { type: String, default: '' },
+    /** 跳转参数对象 */
+    params: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type ToastProps = ExtractPropTypes<typeof ToastProps>;
+
+export type ToastExpose = {
+    show: (options: Record<string, any>) => void;
+    hide: () => void;
+};