uview-pro 0.1.0 → 0.2.0

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

@@ -1,87 +1,87 @@
-<template>
-    <view class="u-td" :style="tdStyle">
-        <slot></slot>
-    </view>
-</template>
-
-<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使用）
- * @tutorial https://uviewpro.cn/zh/components/table.html#td-props
- * @property {String | Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
- * @example <u-td>二年级</u-td>
- */
-
-const props = defineProps(TdProps);
-
-/**
- * 组合式API变量声明
- * 保留所有说明注释
- */
-const tdStyle = 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.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;
-}
-
-/**
- * 组件挂载时查找父组件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-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>
+<template>
+    <view class="u-td" :style="tdStyle">
+        <slot></slot>
+    </view>
+</template>
+
+<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使用）
+ * @tutorial https://uviewpro.cn/zh/components/table.html#td-props
+ * @property {String | Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
+ * @example <u-td>二年级</u-td>
+ */
+
+const props = defineProps(TdProps);
+
+/**
+ * 组合式API变量声明
+ * 保留所有说明注释
+ */
+const tdStyle = 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.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;
+}
+
+/**
+ * 组件挂载时查找父组件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-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-text/types.ts

@@ -0,0 +1,69 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+export const TextProps = {
+    ...baseProps,
+    // 主题颜色
+    type: { type: String as PropType<ThemeType>, default: '' },
+    /** 是否显示文本 */
+    show: { type: Boolean, default: true },
+    /** 显示的值 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 前置图标 */
+    prefixIcon: { type: String, default: '' },
+    /** 后置图标 */
+    suffixIcon: { type: String, default: '' },
+    /** 文本处理模式 */
+    mode: { type: String as PropType<'text' | 'price' | 'phone' | 'name' | 'date' | 'link'>, default: 'text' },
+    /** 链接地址 */
+    href: { type: String, default: '' },
+    /** 格式化规则 */
+    format: { type: [String, Function] as PropType<string | ((val: any) => any)>, default: '' },
+    /** 是否拨打电话 */
+    call: { type: Boolean, default: false },
+    /** 小程序打开方式 */
+    openType: { type: String, default: '' },
+    /** 是否粗体 */
+    bold: { type: Boolean, default: false },
+    /** 是否块状 */
+    block: { type: Boolean, default: false },
+    /** 显示行数，超出省略号 */
+    lines: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文本颜色 */
+    color: { type: String, default: '#303133' },
+    /** 字体大小 */
+    size: { type: [String, Number] as PropType<string | number>, default: 28 },
+    /** 图标样式 */
+    iconStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({ fontSize: '15px' }) },
+    /** 文字样式 */
+    textStyle: { type: [Object, String] as PropType<Record<string, any> | string>, default: () => ({}) },
+    /** 文字装饰 */
+    decoration: { type: String as PropType<'none' | 'underline' | 'line-through'>, default: 'none' },
+    /** 外边距 */
+    margin: { type: [Object, String, Number] as PropType<Record<string, any> | string | number>, default: 0 },
+    /** 行高 */
+    lineHeight: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 对齐方式 */
+    align: { type: String as PropType<'left' | 'center' | 'right'>, default: 'left' },
+    /** 换行方式 */
+    wordWrap: { type: String as PropType<'break-word' | 'normal' | 'anywhere'>, default: 'normal' },
+    /** 语言 */
+    lang: { type: String, default: '' },
+    /** 会话来源 */
+    sessionFrom: { type: String, default: '' },
+    /** 消息标题 */
+    sendMessageTitle: { type: String, default: '' },
+    /** 消息路径 */
+    sendMessagePath: { type: String, default: '' },
+    /** 消息图片 */
+    sendMessageImg: { type: String, default: '' },
+    /** 是否显示消息卡片 */
+    showMessageCard: { type: Boolean, default: false },
+    /** app参数 */
+    appParameter: { type: String, default: '' },
+    /** 表单类型 */
+    formType: { type: String, default: '' }
+};
+
+export type TextProps = ExtractPropTypes<typeof TextProps>;

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

@@ -0,0 +1,326 @@
+<template>
+    <view
+        v-if="props.show"
+        class="u-text"
+        :class="[
+            props.bold ? 'u-text--bold' : '',
+            props.block ? 'u-text--block' : 'u-text--inline',
+            props.lines ? 'u-text--ellipsis' : '',
+            `u-text--align-${props.align}`,
+            customClass
+        ]"
+        :style="textStyle"
+        @click="onClick"
+    >
+        <!-- prefixIcon -->
+        <view class="u-text__icon u-text__prefix-icon" v-if="props.prefixIcon">
+            <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>
+        <!-- link 模式 -->
+        <u-link v-else-if="props.mode === 'link'" :href="props.href" underLine>{{ displayValue }}</u-link>
+        <template v-else-if="props.openType && isMp">
+            <button
+                class="u-reset-button u-text__value"
+                :class="props.type && `u-text__value--${props.type}`"
+                :style="textValueStyle"
+                :openType="props.openType"
+                @getuserinfo="onGetUserInfo"
+                @contact="onContact"
+                @getphonenumber="onGetPhoneNumber"
+                @error="onError"
+                @launchapp="onLaunchApp"
+                @opensetting="onOpenSetting"
+                :lang="props.lang"
+                :session-from="props.sessionFrom"
+                :send-message-title="props.sendMessageTitle"
+                :send-message-path="props.sendMessagePath"
+                :send-message-img="props.sendMessageImg"
+                :show-message-card="props.showMessageCard"
+                :app-parameter="props.appParameter"
+            >
+                {{ displayValue }}
+            </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}` : '']">
+            {{ displayValue }}
+        </text>
+        <!-- 后缀图标 -->
+        <view class="u-text__icon u-text__suffix-icon" v-if="props.suffixIcon">
+            <u-icon :name="props.suffixIcon" :custom-style="$u.toStyle(props.iconStyle)"></u-icon>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-text',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TextProps } from './types';
+import { $u } from '../../';
+
+/**
+ * Text 文本
+ * @description 此组件集成了文本类在项目中的常用功能，包括状态，拨打电话，格式化日期，*替换，超链接...等功能。 您大可不必在使用特殊文本时自己定义，text组件几乎涵盖您能使用的大部分场景。
+ * @tutorial https://uviewpro.cn/zh/components/text.html
+ * @property {String} 					type		主题颜色
+ * @property {Boolean} 					show		是否显示（默认 true ）
+ * @property {String | Number}			text		显示的值
+ * @property {String}					prefixIcon	前置图标
+ * @property {String} 					suffixIcon	后置图标
+ * @property {String} 					mode		文本处理的匹配模式 text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+ * @property {String} 					href		mode=link下，配置的链接
+ * @property {String | Function} 		format		格式化规则
+ * @property {Boolean} 					call		mode=phone时，点击文本是否拨打电话（默认 false ）
+ * @property {String} 					openType	小程序的打开方式
+ * @property {Boolean} 					bold		是否粗体，默认normal（默认 false ）
+ * @property {Boolean} 					block		是否块状（默认 false ）
+ * @property {String | Number} 			lines		文本显示的行数，如果设置，超出此行数，将会显示省略号
+ * @property {String} 					color		文本颜色（默认 '#303133' ）
+ * @property {String | Number} 			size		字体大小（默认 15 ）
+ * @property {Object | String} 			iconStyle	图标的样式 （默认 {fontSize: '15px'} ）
+ * @property {String} 					decoration	文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+ * @property {Object | String | Number}	margin		外边距，对象、字符串，数值形式均可（默认 0 ）
+ * @property {String | Number} 			lineHeight	文本行高
+ * @property {String} 					align		文本对齐方式，可选值left|center|right（默认 'left' ）
+ * @property {String} 					wordWrap	文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+ * @event {Function} click  点击触发事件
+ * @example <u-text text="我用十年青春,赴你最后之约"></u-text>
+ */
+
+const props = defineProps(TextProps);
+const emit = defineEmits(['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'launchapp', 'opensetting']);
+
+// 是否小程序环境
+const isMp = computed(() => {
+    let mp = false;
+    // #ifdef MP
+    mp = true;
+    // #endif
+    return mp;
+});
+
+const isNvue = computed(() => {
+    let nvue = false;
+    // #ifdef APP-NVUE
+    nvue = true;
+    // #endif
+    return nvue;
+});
+
+// 处理显示的值（参考原value.js逻辑，简化实现）
+const displayValue = computed(() => {
+    const { format, text, href, mode } = props;
+    let val = text;
+    if (typeof format === 'function') {
+        val = format(val);
+    } else if (typeof format === 'string' && format) {
+        // 可扩展字符串格式化
+    }
+    switch (mode) {
+        case 'price':
+            if (!/^\d+(\.\d+)?$/.test(String(val))) return val;
+            // 如果format非正则，非函数，则使用默认的金额格式化方法进行操作
+            val = $u.formatPrice(val, 2);
+            break;
+        case 'phone':
+            // 判断是否合法的手机号
+            if (format === 'encrypt') {
+                // 如果format为encrypt，则将手机号进行星号加密处理
+                val = String(val).replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+            }
+            break;
+        case 'name':
+            // 判断是否合法的字符串
+            if (!$u.test.string(val)) return val;
+            if (format === 'encrypt') {
+                // 如果format为encrypt，则将姓名进行星号加密处理
+                return $u.formatName(val);
+            }
+            break;
+        case 'date':
+            // 进行格式化，判断用户传入的format参数为正则，或者函数，如果没有传入format，则使用默认的格式化处理
+            if ($u.test.string(format) && !$u.test.empty(format)) {
+                // 如果format非正则，非函数，则使用默认的时间格式化方法进行操作
+                return $u.timeFormat(val, format);
+            }
+            // 如果没有设置format，则设置为默认的时间格式化形式
+            return $u.timeFormat(val, 'yyyy-mm-dd');
+        case 'link':
+            if (!$u.test.url(href)) return val;
+            break;
+    }
+    return val;
+});
+
+/**
+ * 获取文本样式
+ */
+const textStyle = computed(() => {
+    const style: Record<string, any> = {
+        margin: typeof props.margin === 'number' ? `${props.margin}px` : props.margin,
+        justifyContent: props.align === 'left' ? 'flex-start' : props.align === 'center' ? 'center' : 'flex-end'
+    };
+    return $u.toStyle(style);
+});
+
+/**
+ * 获取文本值样式
+ */
+const textValueStyle = computed(() => {
+    const style: Record<string, any> = {
+        textDecoration: props.decoration,
+        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
+    };
+    if (props.lines) {
+        style['display'] = '-webkit-box';
+        style['-webkit-box-orient'] = 'vertical';
+    }
+    if (!props.type) style.color = props.color;
+    if (isNvue.value && props.lines) style.lines = props.lines;
+    if (props.lineHeight) style.lineHeight = $u.addUnit(props.lineHeight);
+
+    // 合并 textStyle，优先对象，其次字符串
+    if ($u.test.object(props.textStyle)) {
+        // 只合并对象类型，防止类型错误
+        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);
+});
+
+/**
+ * 点击事件
+ */
+function onClick() {
+    // 如果为手机号模式，拨打电话
+    if (props.call && props.mode === 'phone') {
+        uni.makePhoneCall({
+            phoneNumber: String(props.text)
+        });
+    }
+    emit('click');
+}
+function onGetUserInfo(event) {
+    emit('getuserinfo', event.detail);
+}
+function onContact(event) {
+    emit('contact', event.detail);
+}
+function onGetPhoneNumber(event) {
+    emit('getphonenumber', event.detail);
+}
+function onError(event) {
+    emit('error', event.detail);
+}
+function onLaunchApp(event) {
+    emit('launchapp', event.detail);
+}
+function onOpenSetting(event) {
+    emit('opensetting', event.detail);
+}
+</script>
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-text {
+    @include vue-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex: 1;
+    word-break: break-all;
+
+    &--bold {
+        font-weight: bold;
+    }
+
+    &--inline {
+        display: inline-flex;
+    }
+
+    &--inline &__value {
+        display: inline-flex;
+    }
+
+    &--inline &__icon {
+        display: inline-flex;
+    }
+
+    &--block {
+        display: flex;
+        /* #ifndef APP-NVUE */
+        width: 100%;
+        /* #endif */
+    }
+
+    &--block &__value {
+        display: flex;
+    }
+
+    &__price {
+        font-size: 14px;
+        color: $u-content-color;
+    }
+
+    &__value {
+        font-size: 14px;
+        @include vue-flex;
+        color: $u-content-color;
+        flex-wrap: wrap;
+        text-overflow: ellipsis;
+        align-items: center;
+
+        &--primary {
+            color: $u-type-primary;
+        }
+
+        &--warning {
+            color: $u-type-warning;
+        }
+
+        &--success {
+            color: $u-type-success;
+        }
+
+        &--info {
+            color: $u-type-info;
+        }
+
+        &--error {
+            color: $u-type-error;
+        }
+
+        &--main {
+            color: $u-main-color;
+        }
+
+        &--content {
+            color: $u-content-color;
+        }
+
+        &--tips {
+            color: $u-tips-color;
+        }
+
+        &--light {
+            color: $u-light-color;
+        }
+    }
+}
+</style>

package/components/u-th/types.ts

@@ -1,12 +1,12 @@
-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';
+
+/**
+ * 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>;