uview-pro 0.2.4 → 0.3.1

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

@@ -1,87 +1,98 @@
-<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="$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';
+
+/**
+ * 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

@@ -1,72 +1,72 @@
-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>;
+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>;