uview-pro 0.2.4 → 0.3.1

package/components/u-tag/types.ts

@@ -1,37 +1,39 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { TagShape, TagMode, TagSize, ThemeType } from '../../types/global';
-
-/**
- * TagProps tag props 类型定义
- * @description 标签组件，支持多种类型、尺寸、形状、可关闭等
- */
-export const TagProps = {
-    /** 类型，primary、success、info、warning、error */
-    type: { type: String as PropType<ThemeType>, default: 'primary' },
-    /** 是否禁用 */
-    disabled: { type: [Boolean, String] as PropType<boolean | string>, default: false },
-    /** 尺寸，default/mini/medium */
-    size: { type: String as PropType<TagSize>, default: 'default' },
-    /** 形状，square为方形，circle为圆形 */
-    shape: { type: String as PropType<TagShape>, default: 'square' },
-    /** 显示的文本内容 */
-    text: { type: [String, Number] as PropType<string | number>, default: '' },
-    /** 文字颜色 */
-    color: { type: String, default: '' },
-    /** 背景颜色 */
-    bgColor: { type: String, default: '' },
-    /** 边框颜色 */
-    borderColor: { type: String, default: '' },
-    /** 关闭按钮颜色 */
-    closeColor: { type: String, default: '' },
-    /** 索引值 */
-    index: { type: [String, Number] as PropType<string | number>, default: '' },
-    /** 模式，light/dark/plain等 */
-    mode: { type: String as PropType<TagMode>, default: 'light' },
-    /** 是否可关闭 */
-    closeable: { type: Boolean, default: false },
-    /** 是否显示 */
-    show: { type: Boolean, default: true }
-};
-
-export type TagProps = ExtractPropTypes<typeof TagProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TagShape, TagMode, TagSize, ThemeType } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * TagProps tag props 类型定义
+ * @description 标签组件，支持多种类型、尺寸、形状、可关闭等
+ */
+export const TagProps = {
+    ...baseProps,
+    /** 类型，primary、success、info、warning、error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 是否禁用 */
+    disabled: { type: [Boolean, String] as PropType<boolean | string>, default: false },
+    /** 尺寸，default/mini/medium */
+    size: { type: String as PropType<TagSize>, default: 'default' },
+    /** 形状，square为方形，circle为圆形 */
+    shape: { type: String as PropType<TagShape>, default: 'square' },
+    /** 显示的文本内容 */
+    text: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 文字颜色 */
+    color: { type: String, default: '' },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '' },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '' },
+    /** 关闭按钮颜色 */
+    closeColor: { type: String, default: '' },
+    /** 索引值 */
+    index: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 模式，light/dark/plain等 */
+    mode: { type: String as PropType<TagMode>, default: 'light' },
+    /** 是否可关闭 */
+    closeable: { type: Boolean, default: false },
+    /** 是否显示 */
+    show: { type: Boolean, default: true }
+};
+
+export type TagProps = ExtractPropTypes<typeof TagProps>;

package/components/u-tag/u-tag.vue

@@ -1,252 +1,268 @@
-<template>
-    <view
-        v-if="show"
-        :class="[disabled ? 'u-disabled' : '', 'u-size-' + size, 'u-shape-' + shape, 'u-mode-' + mode + '-' + type]"
-        class="u-tag"
-        :style="[customStyle]"
-        @tap="clickTag"
-    >
-        {{ text }}
-        <view class="u-icon-wrap" @tap.stop>
-            <u-icon
-                @click="close"
-                size="22"
-                v-if="closeable"
-                :color="closeIconColor"
-                name="close"
-                class="u-close-icon"
-                :style="[iconStyle]"
-            ></u-icon>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { TagProps } from './types';
-
-defineOptions({
-    name: 'u-tag'
-});
-
-/**
- * tag 提示
- * @description 该组件一般用于标记和选择
- * @tutorial https://uviewpro.cn/zh/components/tag.html
- * @property {String} type 主题类型（默认primary）
- * @property {String} size 标签大小（默认default）
- * @property {String} shape 标签形状（默认square）
- * @property {String} text 标签的文字内容
- * @property {String} bg-color 自定义标签的背景颜色
- * @property {String} border-color 标签的边框颜色
- * @property {String} close-color 关闭按钮的颜色
- * @property {String|Number} index 点击标签时，会通过click事件返回该值
- * @property {String} mode 模式选择，见官网说明（默认light）
- * @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false）
- * @property {Boolean} show 标签显示与否（默认true）
- * @event {Function} click 点击标签触发
- * @event {Function} close closeable为true时，点击标签关闭按钮触发
- * @example <u-tag text="雪月夜" type="success" />
- */
-
-const emit = defineEmits<{
-    (e: 'click', index: string | number): void;
-    (e: 'close', index: string | number): void;
-}>();
-
-const props = defineProps(TagProps);
-
-/**
- * 计算 tag 的自定义样式
- */
-const customStyle = computed(() => {
-    let style: Record<string, any> = {};
-    // 文字颜色（如果有此值，会覆盖type值的颜色）
-    if (props.color) style.color = props.color;
-    // tag的背景颜色（如果有此值，会覆盖type值的颜色）
-    if (props.bgColor) style.backgroundColor = props.bgColor;
-    // 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性）
-    if (props.mode === 'plain' && props.color && !props.borderColor) style.borderColor = props.color;
-    else style.borderColor = props.borderColor;
-    return style;
-});
-
-/**
- * 计算关闭图标的样式
- */
-const iconStyle = computed(() => {
-    if (!props.closeable) return undefined;
-    let style: Record<string, any> = {};
-    if (props.size === 'mini') style.fontSize = '20rpx';
-    else style.fontSize = '22rpx';
-    if (props.mode === 'plain' || props.mode === 'light') style.color = props.type;
-    else if (props.mode === 'dark') style.color = '#ffffff';
-    if (props.closeColor) style.color = props.closeColor;
-    return style;
-});
-
-/**
- * 关闭图标的颜色
- */
-const closeIconColor = computed(() => {
-    // 如果定义了关闭图标的颜色，就用此值，否则用字体颜色的值
-    // 如果上面的二者都没有，如果是dark深色模式，图标就为白色
-    // 最后如果上面的三者都不合适，就返回type值给图标获取颜色
-    if (props.closeColor) return props.closeColor;
-    else if (props.color) return props.color;
-    else if (props.mode === 'dark') return '#ffffff';
-    else return props.type;
-});
-
-/**
- * 标签被点击
- */
-function clickTag() {
-    // 如果是disabled状态，不发送点击事件
-    if (props.disabled) return;
-    emit('click', props.index);
-}
-
-/**
- * 点击标签关闭按钮
- */
-function close() {
-    emit('close', props.index);
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-tag {
-    box-sizing: border-box;
-    align-items: center;
-    border-radius: 6rpx;
-    /* #ifndef APP-NVUE */
-    display: inline-block;
-    /* #endif */
-    line-height: 1;
-}
-
-.u-size-default {
-    font-size: 22rpx;
-    padding: 12rpx 22rpx;
-}
-
-.u-size-mini {
-    font-size: 20rpx;
-    padding: 6rpx 12rpx;
-}
-
-.u-mode-light-primary {
-    background-color: $u-type-primary-light;
-    color: $u-type-primary;
-    border: 1px solid $u-type-primary-disabled;
-}
-
-.u-mode-light-success {
-    background-color: $u-type-success-light;
-    color: $u-type-success;
-    border: 1px solid $u-type-success-disabled;
-}
-
-.u-mode-light-error {
-    background-color: $u-type-error-light;
-    color: $u-type-error;
-    border: 1px solid $u-type-error-disabled;
-}
-
-.u-mode-light-warning {
-    background-color: $u-type-warning-light;
-    color: $u-type-warning;
-    border: 1px solid $u-type-warning-disabled;
-}
-
-.u-mode-light-info {
-    background-color: $u-type-info-light;
-    color: $u-type-info;
-    border: 1px solid $u-type-info-disabled;
-}
-
-.u-mode-dark-primary {
-    background-color: $u-type-primary;
-    color: #ffffff;
-}
-
-.u-mode-dark-success {
-    background-color: $u-type-success;
-    color: #ffffff;
-}
-
-.u-mode-dark-error {
-    background-color: $u-type-error;
-    color: #ffffff;
-}
-
-.u-mode-dark-warning {
-    background-color: $u-type-warning;
-    color: #ffffff;
-}
-
-.u-mode-dark-info {
-    background-color: $u-type-info;
-    color: #ffffff;
-}
-
-.u-mode-plain-primary {
-    background-color: #ffffff;
-    color: $u-type-primary;
-    border: 1px solid $u-type-primary;
-}
-
-.u-mode-plain-success {
-    background-color: #ffffff;
-    color: $u-type-success;
-    border: 1px solid $u-type-success;
-}
-
-.u-mode-plain-error {
-    background-color: #ffffff;
-    color: $u-type-error;
-    border: 1px solid $u-type-error;
-}
-
-.u-mode-plain-warning {
-    background-color: #ffffff;
-    color: $u-type-warning;
-    border: 1px solid $u-type-warning;
-}
-
-.u-mode-plain-info {
-    background-color: #ffffff;
-    color: $u-type-info;
-    border: 1px solid $u-type-info;
-}
-
-.u-disabled {
-    opacity: 0.55;
-}
-
-.u-shape-circle {
-    border-radius: 100rpx;
-}
-
-.u-shape-circleRight {
-    border-radius: 0 100rpx 100rpx 0;
-}
-
-.u-shape-circleLeft {
-    border-radius: 100rpx 0 0 100rpx;
-}
-
-.u-close-icon {
-    margin-left: 14rpx;
-    font-size: 22rpx;
-    color: $u-type-success;
-}
-
-.u-icon-wrap {
-    display: inline-flex;
-    transform: scale(0.86);
-}
-</style>
+<template>
+    <view
+        v-if="show"
+        :class="[
+            disabled ? 'u-disabled' : '',
+            'u-size-' + size,
+            'u-shape-' + shape,
+            'u-mode-' + mode + '-' + type,
+            customClass
+        ]"
+        class="u-tag"
+        :style="$u.toStyle(customStyle)"
+        @tap="clickTag"
+    >
+        {{ text }}
+        <view class="u-icon-wrap" @tap.stop>
+            <u-icon
+                @click="close"
+                size="22"
+                v-if="closeable"
+                :color="closeIconColor"
+                name="close"
+                class="u-close-icon"
+                :style="[iconStyle]"
+            ></u-icon>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-tag',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TagProps } from './types';
+import { $u } from '../../';
+
+/**
+ * tag 提示
+ * @description 该组件一般用于标记和选择
+ * @tutorial https://uviewpro.cn/zh/components/tag.html
+ * @property {String} type 主题类型（默认primary）
+ * @property {String} size 标签大小（默认default）
+ * @property {String} shape 标签形状（默认square）
+ * @property {String} text 标签的文字内容
+ * @property {String} bg-color 自定义标签的背景颜色
+ * @property {String} border-color 标签的边框颜色
+ * @property {String} close-color 关闭按钮的颜色
+ * @property {String|Number} index 点击标签时，会通过click事件返回该值
+ * @property {String} mode 模式选择，见官网说明（默认light）
+ * @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false）
+ * @property {Boolean} show 标签显示与否（默认true）
+ * @event {Function} click 点击标签触发
+ * @event {Function} close closeable为true时，点击标签关闭按钮触发
+ * @example <u-tag text="雪月夜" type="success" />
+ */
+
+const emit = defineEmits<{
+    (e: 'click', index: string | number): void;
+    (e: 'close', index: string | number): void;
+}>();
+
+const props = defineProps(TagProps);
+
+/**
+ * 计算 tag 的自定义样式
+ */
+const customStyle = computed(() => {
+    let style: Record<string, any> = {};
+    // 文字颜色（如果有此值，会覆盖type值的颜色）
+    if (props.color) style.color = props.color;
+    // tag的背景颜色（如果有此值，会覆盖type值的颜色）
+    if (props.bgColor) style.backgroundColor = props.bgColor;
+    // 如果是镂空型tag，没有传递边框颜色（borderColor）的话，使用文字的颜色（color属性）
+    if (props.mode === 'plain' && props.color && !props.borderColor) style.borderColor = props.color;
+    else style.borderColor = props.borderColor;
+    return style;
+});
+
+/**
+ * 计算关闭图标的样式
+ */
+const iconStyle = computed(() => {
+    if (!props.closeable) return undefined;
+    let style: Record<string, any> = {};
+    if (props.size === 'mini') style.fontSize = '20rpx';
+    else style.fontSize = '22rpx';
+    if (props.mode === 'plain' || props.mode === 'light') style.color = props.type;
+    else if (props.mode === 'dark') style.color = '#ffffff';
+    if (props.closeColor) style.color = props.closeColor;
+    return style;
+});
+
+/**
+ * 关闭图标的颜色
+ */
+const closeIconColor = computed(() => {
+    // 如果定义了关闭图标的颜色，就用此值，否则用字体颜色的值
+    // 如果上面的二者都没有，如果是dark深色模式，图标就为白色
+    // 最后如果上面的三者都不合适，就返回type值给图标获取颜色
+    if (props.closeColor) return props.closeColor;
+    else if (props.color) return props.color;
+    else if (props.mode === 'dark') return '#ffffff';
+    else return props.type;
+});
+
+/**
+ * 标签被点击
+ */
+function clickTag() {
+    // 如果是disabled状态，不发送点击事件
+    if (props.disabled) return;
+    emit('click', props.index);
+}
+
+/**
+ * 点击标签关闭按钮
+ */
+function close() {
+    emit('close', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-tag {
+    box-sizing: border-box;
+    align-items: center;
+    border-radius: 6rpx;
+    /* #ifndef APP-NVUE */
+    display: inline-block;
+    /* #endif */
+    line-height: 1;
+}
+
+.u-size-default {
+    font-size: 22rpx;
+    padding: 12rpx 22rpx;
+}
+
+.u-size-mini {
+    font-size: 20rpx;
+    padding: 6rpx 12rpx;
+}
+
+.u-mode-light-primary {
+    background-color: $u-type-primary-light;
+    color: $u-type-primary;
+    border: 1px solid $u-type-primary-disabled;
+}
+
+.u-mode-light-success {
+    background-color: $u-type-success-light;
+    color: $u-type-success;
+    border: 1px solid $u-type-success-disabled;
+}
+
+.u-mode-light-error {
+    background-color: $u-type-error-light;
+    color: $u-type-error;
+    border: 1px solid $u-type-error-disabled;
+}
+
+.u-mode-light-warning {
+    background-color: $u-type-warning-light;
+    color: $u-type-warning;
+    border: 1px solid $u-type-warning-disabled;
+}
+
+.u-mode-light-info {
+    background-color: $u-type-info-light;
+    color: $u-type-info;
+    border: 1px solid $u-type-info-disabled;
+}
+
+.u-mode-dark-primary {
+    background-color: $u-type-primary;
+    color: #ffffff;
+}
+
+.u-mode-dark-success {
+    background-color: $u-type-success;
+    color: #ffffff;
+}
+
+.u-mode-dark-error {
+    background-color: $u-type-error;
+    color: #ffffff;
+}
+
+.u-mode-dark-warning {
+    background-color: $u-type-warning;
+    color: #ffffff;
+}
+
+.u-mode-dark-info {
+    background-color: $u-type-info;
+    color: #ffffff;
+}
+
+.u-mode-plain-primary {
+    background-color: #ffffff;
+    color: $u-type-primary;
+    border: 1px solid $u-type-primary;
+}
+
+.u-mode-plain-success {
+    background-color: #ffffff;
+    color: $u-type-success;
+    border: 1px solid $u-type-success;
+}
+
+.u-mode-plain-error {
+    background-color: #ffffff;
+    color: $u-type-error;
+    border: 1px solid $u-type-error;
+}
+
+.u-mode-plain-warning {
+    background-color: #ffffff;
+    color: $u-type-warning;
+    border: 1px solid $u-type-warning;
+}
+
+.u-mode-plain-info {
+    background-color: #ffffff;
+    color: $u-type-info;
+    border: 1px solid $u-type-info;
+}
+
+.u-disabled {
+    opacity: 0.55;
+}
+
+.u-shape-circle {
+    border-radius: 100rpx;
+}
+
+.u-shape-circleRight {
+    border-radius: 0 100rpx 100rpx 0;
+}
+
+.u-shape-circleLeft {
+    border-radius: 100rpx 0 0 100rpx;
+}
+
+.u-close-icon {
+    margin-left: 14rpx;
+    font-size: 22rpx;
+    color: $u-type-success;
+}
+
+.u-icon-wrap {
+    display: inline-flex;
+    transform: scale(0.86);
+}
+</style>

package/components/u-td/types.ts

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