uview-pro 0.6.18 → 0.6.19

package/components/u-th/types.ts

@@ -1,22 +1,22 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * ThProps th props 类型定义
- * @description 表格表头单元格组件，支持宽度自定义
- */
-export const ThProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比 */
-    width: { type: [Number, String] as PropType<number | string>, default: 'auto' }
-};
-
-export type ThProps = ExtractPropTypes<typeof ThProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * ThProps th props 类型定义
+ * @description 表格表头单元格组件，支持宽度自定义
+ */
+export const ThProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 宽度，百分比或者具体带单位的值，如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,63 +1,63 @@
-<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 { computed } from 'vue';
-import { $u, useChildren } 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 { parentExposed } = useChildren('u-th', 'u-table');
-
-const thStyle = computed(() => {
-    const style: Record<string, any> = {};
-    if (props.width && props.width !== 'auto') style.width = props.width;
-    else style.flex = '1';
-    style.textAlign = parentExposed.value?.props?.align;
-    style.padding = parentExposed.value?.props?.padding;
-    style.borderBottom = `solid 1px ${parentExposed.value?.props?.borderColor}`;
-    style.borderRight = `solid 1px ${parentExposed.value?.props?.borderColor}`;
-    Object.assign(style, parentExposed.value?.props?.thStyle);
-    return style;
-});
-</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: $u-bg-color;
-}
-</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 { computed } from 'vue';
+import { $u, useChildren } 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 { parentExposed } = useChildren('u-th', 'u-table');
+
+const thStyle = computed(() => {
+    const style: Record<string, any> = {};
+    if (props.width && props.width !== 'auto') style.width = props.width;
+    else style.flex = '1';
+    style.textAlign = parentExposed.value?.props?.align;
+    style.padding = parentExposed.value?.props?.padding;
+    style.borderBottom = `solid 1px ${parentExposed.value?.props?.borderColor}`;
+    style.borderRight = `solid 1px ${parentExposed.value?.props?.borderColor}`;
+    Object.assign(style, parentExposed.value?.props?.thStyle);
+    return style;
+});
+</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: $u-bg-color;
+}
+</style>

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

@@ -1,64 +1,64 @@
-<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 type { PropType } from 'vue';
-import { $u } from '../../';
-
-/**
- * timeLine 时间轴
- * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
- * @tutorial https://uviewpro.cn/zh/components/timeLine.html
- * @example <u-time-line></u-time-line>
- */
-
-const props = defineProps({
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    }
-});
-</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 var(--u-divider-color);
-    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 type { PropType } from 'vue';
+import { $u } from '../../';
+
+/**
+ * timeLine 时间轴
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
+ * @tutorial https://uviewpro.cn/zh/components/timeLine.html
+ * @example <u-time-line></u-time-line>
+ */
+
+const props = defineProps({
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    }
+});
+</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 var(--u-divider-color);
+    transform-origin: 0 0;
+    transform: scaleX(0.5);
+}
+</style>

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

@@ -1,24 +1,24 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * TimeLineItemProps 时间轴节点 props 类型定义
- * @description 时间轴节点组件，支持自定义节点颜色、位置
- */
-export const TimeLineItemProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 节点的背景颜色 */
-    bgColor: { type: String, default: 'var(--u-bg-white)' },
-    /** 节点左边图标绝对定位的top值，单位rpx */
-    nodeTop: { type: [String, Number] as PropType<string | number>, default: '' }
-};
-
-export type TimeLineItemProps = ExtractPropTypes<typeof TimeLineItemProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * TimeLineItemProps 时间轴节点 props 类型定义
+ * @description 时间轴节点组件，支持自定义节点颜色、位置
+ */
+export const TimeLineItemProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 节点的背景颜色 */
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
+    /** 节点左边图标绝对定位的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,89 +1,89 @@
-<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内容自定义背景颜色即可（默认var(--u-bg-white)）
- * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
- * @example <u-time-line-item node-top="2">...</u-time-line-item>
- */
-
-/**
- * 节点的背景颜色
- */
-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: var(--u-divider-color);
-}
-</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内容自定义背景颜色即可（默认var(--u-bg-white)）
+ * @property {String | Number} node-top 节点左边图标绝对定位的top值，单位rpx
+ * @example <u-time-line-item node-top="2">...</u-time-line-item>
+ */
+
+/**
+ * 节点的背景颜色
+ */
+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: var(--u-divider-color);
+}
+</style>

package/components/u-toast/service.ts

@@ -1,40 +1,40 @@
-/**
- * u-toast 函数式调用事件名（全平台）
- * @description
- * - useToast() 通过 uni.$emit 派发事件
- * - <u-toast /> 通过 uni.$on 监听事件并转调自身 show/hide
- */
-
-import type { ToastProps } from './types';
-
-// 普通（页面级）toast 事件
-export const U_TOAST_EVENT_SHOW = 'uview-pro:u-toast:show:';
-export const U_TOAST_EVENT_HIDE = 'uview-pro:u-toast:hide:';
-
-// 全局（App 根部）toast 事件，供 useToast() 使用
-export const U_TOAST_GLOBAL_EVENT_SHOW = 'uview-pro:u-toast:global:show';
-export const U_TOAST_GLOBAL_EVENT_HIDE = 'uview-pro:u-toast:global:hide';
-
-// 根据当前页面获取事件名
-export function getEventWithCurrentPage(event: string, page?: string | boolean) {
-    if (page && typeof page === 'string' && page !== '') {
-        return event + page;
-    }
-    return event + getCurrentPage();
-}
-
-// 获取当前页面路由
-function getCurrentPage() {
-    try {
-        const pages = getCurrentPages();
-        const currentPage = pages[pages.length - 1].route as string;
-        return currentPage || '';
-    } catch (error) {
-        return '';
-    }
-}
-
-export type ToastPayload = Partial<ToastProps> & {
-    /** 文案（兼容 toast.show('xxx')） */
-    title?: string;
-};
+/**
+ * u-toast 函数式调用事件名（全平台）
+ * @description
+ * - useToast() 通过 uni.$emit 派发事件
+ * - <u-toast /> 通过 uni.$on 监听事件并转调自身 show/hide
+ */
+
+import type { ToastProps } from './types';
+
+// 普通（页面级）toast 事件
+export const U_TOAST_EVENT_SHOW = 'uview-pro:u-toast:show:';
+export const U_TOAST_EVENT_HIDE = 'uview-pro:u-toast:hide:';
+
+// 全局（App 根部）toast 事件，供 useToast() 使用
+export const U_TOAST_GLOBAL_EVENT_SHOW = 'uview-pro:u-toast:global:show';
+export const U_TOAST_GLOBAL_EVENT_HIDE = 'uview-pro:u-toast:global:hide';
+
+// 根据当前页面获取事件名
+export function getEventWithCurrentPage(event: string, page?: string | boolean) {
+    if (page && typeof page === 'string' && page !== '') {
+        return event + page;
+    }
+    return event + getCurrentPage();
+}
+
+// 获取当前页面路由
+function getCurrentPage() {
+    try {
+        const pages = getCurrentPages();
+        const currentPage = pages[pages.length - 1].route as string;
+        return currentPage || '';
+    } catch (error) {
+        return '';
+    }
+}
+
+export type ToastPayload = Partial<ToastProps> & {
+    /** 文案（兼容 toast.show('xxx')） */
+    title?: string;
+};