uview-pro 0.0.1

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

@@ -0,0 +1,76 @@
+<template>
+    <view class="u-td" :style="tdStyle">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-td' });
+
+/**
+ * td td单元格
+ * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
+ * @tutorial https://www.uviewui.com/components/table.html#td-props
+ * @property {String | Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
+ * @example <u-td>二年级</u-td>
+ */
+
+const props = defineProps({
+    /**
+     * 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+     */
+    width: {
+        type: [Number, String],
+        default: 'auto'
+    }
+});
+
+/**
+ * 组合式API变量声明
+ * 保留所有说明注释
+ */
+const tdStyle = ref<Record<string, any>>({}); // 单元格样式
+let parent: any = null; // 父组件实例
+
+/**
+ * 组件挂载时查找父组件u-table并合并样式
+ */
+onMounted(() => {
+    // 查找父组件u-table
+    const instance = getCurrentInstance();
+    if (instance) {
+        parent = $u.$parent('u-table');
+        if (parent) {
+            // 将父组件的相关参数，合并到本组件
+            const style: Record<string, any> = {};
+            if (props.width !== 'auto') style.flex = `0 0 ${props.width}`;
+            style.textAlign = parent.props.align;
+            style.fontSize = parent.props.fontSize + 'rpx';
+            style.padding = parent.props.padding;
+            style.borderBottom = `solid 1px ${parent.props.borderColor}`;
+            style.borderRight = `solid 1px ${parent.props.borderColor}`;
+            style.color = parent.props.color;
+            tdStyle.value = style;
+        }
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-td {
+    @include vue-flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+    font-size: 28rpx;
+    color: $u-content-color;
+    align-self: stretch;
+    box-sizing: border-box;
+    height: 100%;
+}
+</style>

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

@@ -0,0 +1,70 @@
+<template>
+    <view class="u-th" :style="thStyle">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, getCurrentInstance } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-th' });
+
+/**
+ * th th单元格
+ * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
+ * @tutorial https://www.uviewui.com/components/table.html#td-props
+ * @property {String | Number} width 标题单元格宽度百分比或者具体带单位的值，如30%，200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度
+ * @example 暂无示例
+ */
+
+const props = defineProps({
+    /**
+     * 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
+     */
+    width: {
+        type: [Number, String],
+        default: ''
+    }
+});
+
+const thStyle = ref<Record<string, any>>({}); // 标题单元格样式
+let parent: any = null; // 父组件实例
+
+/**
+ * 组件挂载时查找父组件u-table并合并样式
+ */
+onMounted(() => {
+    // 查找父组件u-table
+    const instance = getCurrentInstance();
+    if (instance) {
+        parent = $u.$parent('u-table');
+        if (parent) {
+            // 将父组件的相关参数，合并到本组件
+            const style: Record<string, any> = {};
+            if (props.width) style.flex = `0 0 ${props.width}`;
+            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;
+        }
+    }
+});
+</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

@@ -0,0 +1,39 @@
+<template>
+    <view class="u-time-axis">
+        <slot />
+    </view>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'u-time-line' });
+
+/**
+ * timeLine 时间轴
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。
+ * @tutorial https://www.uviewui.com/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>

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

@@ -0,0 +1,88 @@
+<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';
+
+defineOptions({ name: 'u-time-line-item' });
+
+/**
+ * timeLineItem 时间轴Item
+ * @description 时间轴组件一般用于物流信息展示，各种跟时间相关的记录等场景。(搭配u-time-line使用)
+ * @tutorial https://www.uviewui.com/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({
+    /** 节点的背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 节点左边图标绝对定位的top值，单位rpx */
+    nodeTop: {
+        type: [String, Number],
+        default: ''
+    }
+});
+
+/**
+ * 计算节点样式
+ * @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

@@ -0,0 +1,4 @@
+export type ToastExpose = {
+  show: (options: Record<string, any>) => void
+  hide: () => void
+}

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

@@ -0,0 +1,238 @@
+<template>
+    <view
+        class="u-toast"
+        :class="[isShow ? 'u-show' : '', 'u-type-' + tmpConfig.type, 'u-position-' + tmpConfig.position]"
+        :style="{
+            zIndex: uZIndex
+        }"
+    >
+        <view class="u-icon-wrap">
+            <u-icon v-if="tmpConfig.icon" class="u-icon" :name="iconName" :size="30" :color="tmpConfig.type"></u-icon>
+        </view>
+        <text class="u-text">{{ tmpConfig.title }}</text>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { $u } from '../..';
+import type { ToastExpose } from './types';
+
+defineOptions({
+    name: 'u-toast'
+});
+
+/**
+ * toast 消息提示
+ * @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
+ * @tutorial https://www.uviewui.com/components/toast.html
+ * @property {String|Number} z-index toast展示时的z-index值
+ * @event {Function} show 显示toast，如需一进入页面就显示toast，请在onReady生命周期调用
+ * @example <u-toast ref="uToast" />
+ */
+const props = defineProps({
+    /** z-index值 */
+    zIndex: {
+        type: [Number, String],
+        default: ''
+    }
+});
+
+// 是否显示toast
+const isShow = ref(false);
+// 定时器
+let timer: ReturnType<typeof setTimeout> | null = null;
+// 内置配置
+const config = ref({
+    params: {}, // URL跳转的参数，对象
+    title: '', // 显示文本
+    type: '', // 主题类型，primary，success，error，warning，black
+    duration: 2000, // 显示的时间，毫秒
+    isTab: false, // 是否跳转tab页面
+    url: '', // toast消失后是否跳转页面，有则跳转，优先级高于back参数
+    icon: true, // 显示的图标
+    position: 'center', // toast出现的位置
+    callback: null as null | (() => void), // 执行完后的回调函数
+    back: false // 结束toast是否自动返回上一页
+});
+// 合并后的临时配置变量
+const tmpConfig = ref<any>({ ...config.value });
+
+/**
+ * 只有不为none，并且type为error|warning|success|info时候，才显示图标
+ */
+const iconName = computed(() => {
+    if (['error', 'warning', 'success', 'info'].indexOf(tmpConfig.value.type) >= 0 && tmpConfig.value.icon) {
+        let icon = $u.type2icon(tmpConfig.value.type);
+        return icon;
+    }
+    return '';
+});
+/**
+ * 显示toast时候，如果用户有传递z-index值，优先使用
+ */
+const uZIndex = computed(() => {
+    return isShow.value ? (props.zIndex ? props.zIndex : $u.zIndex.toast) : '999999';
+});
+
+/**
+ * 显示toast组件，由父组件通过ref.show(options)形式调用
+ */
+function show(options: any) {
+    // 不将结果合并到config变量，避免多次调用u-toast，前后的配置造成混乱
+    tmpConfig.value = $u.deepMerge(config.value, options);
+    if (timer) {
+        // 清除定时器
+        clearTimeout(timer);
+        timer = null;
+    }
+    isShow.value = true;
+    timer = setTimeout(() => {
+        // 倒计时结束，清除定时器，隐藏toast组件
+        isShow.value = false;
+        clearTimeout(timer!);
+        timer = null;
+        // 判断是否存在callback方法，如果存在就执行
+        typeof tmpConfig.value.callback === 'function' && tmpConfig.value.callback();
+        timeEnd();
+    }, tmpConfig.value.duration);
+}
+/**
+ * 隐藏toast组件，由父组件通过ref.hide()形式调用
+ */
+function hide() {
+    isShow.value = false;
+    if (timer) {
+        // 清除定时器
+        clearTimeout(timer);
+        timer = null;
+    }
+}
+/**
+ * 倒计时结束之后，进行的一些操作
+ */
+function timeEnd() {
+    // 如果带有url值，根据isTab为true或者false进行跳转
+    if (tmpConfig.value.url) {
+        // 如果url没有"/"开头，添加上，因为uni的路由跳转需要"/"开头
+        if (tmpConfig.value.url[0] != '/') tmpConfig.value.url = '/' + tmpConfig.value.url;
+        // 判断是否有传递显式的参数
+        if (Object.keys(tmpConfig.value.params).length) {
+            // 判断用户传递的url中，是否带有参数
+            // 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary"
+            // 如果有params参数，转换后无需带上"?"
+            let query = '';
+            if (/.*\/.*\?.*=.*/.test(tmpConfig.value.url)) {
+                // object对象转为get类型的参数
+                query = $u.queryParams(tmpConfig.value.params, false);
+                tmpConfig.value.url = tmpConfig.value.url + '&' + query;
+            } else {
+                query = $u.queryParams(tmpConfig.value.params);
+                tmpConfig.value.url += query;
+            }
+        }
+        // 如果是跳转tab页面，就使用uni.switchTab
+        if (tmpConfig.value.isTab) {
+            uni.switchTab({ url: tmpConfig.value.url });
+        } else {
+            uni.navigateTo({ url: tmpConfig.value.url });
+        }
+    } else if (tmpConfig.value.back) {
+        // 回退到上一页
+        $u.route({ type: 'back' });
+    }
+}
+
+defineExpose<ToastExpose>({
+    show,
+    hide
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-toast {
+    position: fixed;
+    z-index: -1;
+    transition: opacity 0.3s;
+    text-align: center;
+    color: #fff;
+    border-radius: 8rpx;
+    background: #585858;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    opacity: 0;
+    pointer-events: none;
+    padding: 18rpx 40rpx;
+}
+
+.u-toast.u-show {
+    opacity: 1;
+}
+
+.u-icon {
+    margin-right: 10rpx;
+    @include vue-flex;
+    align-items: center;
+    line-height: normal;
+}
+
+.u-position-center {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    /* #ifndef APP-NVUE */
+    max-width: 70%;
+    /* #endif */
+}
+
+.u-position-top {
+    left: 50%;
+    top: 20%;
+    transform: translate(-50%, -50%);
+}
+
+.u-position-bottom {
+    left: 50%;
+    bottom: 20%;
+    transform: translate(-50%, -50%);
+}
+
+.u-type-primary {
+    color: $u-type-primary;
+    background-color: $u-type-primary-light;
+    border: 1px solid rgb(215, 234, 254);
+}
+
+.u-type-success {
+    color: $u-type-success;
+    background-color: $u-type-success-light;
+    border: 1px solid #bef5c8;
+}
+
+.u-type-error {
+    color: $u-type-error;
+    background-color: $u-type-error-light;
+    border: 1px solid #fde2e2;
+}
+
+.u-type-warning {
+    color: $u-type-warning;
+    background-color: $u-type-warning-light;
+    border: 1px solid #faecd8;
+}
+
+.u-type-info {
+    color: $u-type-info;
+    background-color: $u-type-info-light;
+    border: 1px solid #ebeef5;
+}
+
+.u-type-default {
+    color: #fff;
+    background-color: #585858;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+    <view class="u-tips" :class="['u-' + type, isShow ? 'u-tip-show' : '']" :style="tipStyle">{{ title }}</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { $u } from '../..';
+
+defineOptions({ name: 'u-top-tips' });
+
+/**
+ * topTips 顶部提示
+ * @description 该组件一般用于页面顶部向下滑出一个提示，尔后自动收起的场景。
+ * @tutorial https://www.uviewui.com/components/topTips.html
+ * @property {String|Number} navbarHeight 导航栏高度(包含状态栏高度在内)，单位PX
+ * @property {String|Number} zIndex z-index值（默认975）
+ * @example <u-top-tips ref="uTips"></u-top-tips>
+ */
+
+const props = defineProps({
+    /** 导航栏高度，用于提示的初始化 */
+    navbarHeight: {
+        type: [Number, String],
+        default() {
+            let result = 0;
+            // #ifndef H5
+            result = 0;
+            // #endif
+            // #ifdef H5
+            result = 44;
+            // #endif
+            return result;
+        }
+    },
+    /** z-index值 */
+    zIndex: {
+        type: [Number, String],
+        default: ''
+    }
+});
+
+let timer: number | null = null; // 定时器
+const isShow = ref(false); // 是否显示消息组件
+const title = ref(''); // 组件中显示的消息内容
+const type = ref<'primary' | 'success' | 'error' | 'warning' | 'info'>('primary'); // 消息的类型（颜色不同），primary，success，error，warning，info
+const duration = ref(2000); // 组件显示的时间，单位为毫秒
+
+const uZIndex = computed(() => (props.zIndex ? props.zIndex : $u.zIndex.topTips));
+
+const tipStyle = computed(() => ({
+    top: Number(props.navbarHeight) + 'px',
+    zIndex: uZIndex.value
+}));
+
+/**
+ * 显示顶部提示
+ * @param config 配置项 { title, type, duration }
+ */
+function show(config: { title: string; type?: string; duration?: number } = { title: '' }) {
+    // 先清除定时器（可能是上一次定义的，需要清除了再开始新的）
+    if (timer) clearTimeout(timer);
+    // 时间，内容，类型主题(type)等参数
+    if (config.duration) duration.value = config.duration;
+    if (config.type) type.value = config.type as any;
+    title.value = config.title;
+    isShow.value = true;
+    // 倒计时
+    timer = setTimeout(() => {
+        isShow.value = false;
+        if (timer) clearTimeout(timer);
+        timer = null;
+    }, duration.value);
+}
+defineExpose({ show });
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+view {
+    box-sizing: border-box;
+}
+.u-tips {
+    width: 100%;
+    position: fixed;
+    z-index: 1;
+    padding: 20rpx 30rpx;
+    color: #ffffff;
+    font-size: 28rpx;
+    left: 0;
+    right: 0;
+    @include vue-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(-100%);
+    transition: all 0.35s linear;
+}
+.u-tip-show {
+    transform: translateY(0);
+    opacity: 1;
+    z-index: 99;
+}
+.u-primary {
+    background: $u-type-primary;
+}
+.u-success {
+    background: $u-type-success;
+}
+.u-warning {
+    background: $u-type-warning;
+}
+.u-error {
+    background: $u-type-error;
+}
+.u-info {
+    background: $u-type-info;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+    <view class="u-tr">
+        <slot></slot>
+    </view>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'u-tr' });
+
+/**
+ * tr 表格行标签
+ * @description 表格组件一般用于展示大量结构化数据的场景（搭配<u-table>使用）
+ * @tutorial https://www.uviewui.com/components/table.html
+ * @example <u-tr></u-tr>
+ */
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-tr {
+    @include vue-flex;
+}
+</style>