uview-pro 0.2.4 → 0.3.1

package/components/u-card/types.ts

@@ -1,59 +1,61 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-
-/**
- * card 卡片类型定义
- * @description 供 u-card 组件 props 使用
- */
-export type CardIndex = string | number | Record<string, any>;
-export type CardStyle = Record<string, any>;
-
-export const CardProps = {
-    /** 与屏幕两侧是否留空隙 */
-    full: { type: Boolean, default: false },
-    /** 标题 */
-    title: { type: String, default: '' },
-    /** 标题颜色 */
-    titleColor: { type: String, default: '#303133' },
-    /** 标题字体大小，单位rpx */
-    titleSize: { type: [Number, String], default: '30' },
-    /** 副标题 */
-    subTitle: { type: String, default: '' },
-    /** 副标题颜色 */
-    subTitleColor: { type: String, default: '#909399' },
-    /** 副标题字体大小，单位rpx */
-    subTitleSize: { type: [Number, String], default: '26' },
-    /** 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) */
-    border: { type: Boolean, default: true },
-    /** 用于标识点击了第几个 */
-    index: { type: [String, Number, Object] as PropType<CardIndex>, default: '' },
-    /** 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" */
-    margin: { type: String, default: '30rpx' },
-    /** card卡片的圆角 */
-    borderRadius: { type: [Number, String], default: '16' },
-    /** 头部自定义样式，对象形式 */
-    headStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
-    /** 主体自定义样式，对象形式 */
-    bodyStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
-    /** 底部自定义样式，对象形式 */
-    footStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
-    /** 头部是否下边框 */
-    headBorderBottom: { type: Boolean, default: true },
-    /** 底部是否有上边框 */
-    footBorderTop: { type: Boolean, default: true },
-    /** 标题左边的缩略图 */
-    thumb: { type: String, default: '' },
-    /** 缩略图宽高，单位rpx */
-    thumbWidth: { type: [String, Number], default: '60' },
-    /** 缩略图是否为圆形 */
-    thumbCircle: { type: Boolean, default: false },
-    /** 给head，body，foot的内边距 */
-    padding: { type: [String, Number], default: '30' },
-    /** 是否显示头部 */
-    showHead: { type: Boolean, default: true },
-    /** 是否显示尾部 */
-    showFoot: { type: Boolean, default: true },
-    /** 卡片外围阴影，字符串形式 */
-    boxShadow: { type: String, default: 'none' }
-};
-
-export type CardProps = ExtractPropTypes<typeof CardProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * card 卡片类型定义
+ * @description 供 u-card 组件 props 使用
+ */
+export type CardIndex = string | number | Record<string, any>;
+export type CardStyle = Record<string, any>;
+
+export const CardProps = {
+    ...baseProps,
+    /** 与屏幕两侧是否留空隙 */
+    full: { type: Boolean, default: false },
+    /** 标题 */
+    title: { type: String, default: '' },
+    /** 标题颜色 */
+    titleColor: { type: String, default: '#303133' },
+    /** 标题字体大小，单位rpx */
+    titleSize: { type: [Number, String], default: '30' },
+    /** 副标题 */
+    subTitle: { type: String, default: '' },
+    /** 副标题颜色 */
+    subTitleColor: { type: String, default: '#909399' },
+    /** 副标题字体大小，单位rpx */
+    subTitleSize: { type: [Number, String], default: '26' },
+    /** 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) */
+    border: { type: Boolean, default: true },
+    /** 用于标识点击了第几个 */
+    index: { type: [String, Number, Object] as PropType<CardIndex>, default: '' },
+    /** 用于隔开上下左右的边距，带单位的写法，如："30rpx 30rpx"，"20rpx 20rpx 30rpx 30rpx" */
+    margin: { type: String, default: '30rpx' },
+    /** card卡片的圆角 */
+    borderRadius: { type: [Number, String], default: '16' },
+    /** 头部自定义样式，对象形式 */
+    headStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
+    /** 主体自定义样式，对象形式 */
+    bodyStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
+    /** 底部自定义样式，对象形式 */
+    footStyle: { type: Object as PropType<CardStyle>, default: () => ({}) },
+    /** 头部是否下边框 */
+    headBorderBottom: { type: Boolean, default: true },
+    /** 底部是否有上边框 */
+    footBorderTop: { type: Boolean, default: true },
+    /** 标题左边的缩略图 */
+    thumb: { type: String, default: '' },
+    /** 缩略图宽高，单位rpx */
+    thumbWidth: { type: [String, Number], default: '60' },
+    /** 缩略图是否为圆形 */
+    thumbCircle: { type: Boolean, default: false },
+    /** 给head，body，foot的内边距 */
+    padding: { type: [String, Number], default: '30' },
+    /** 是否显示头部 */
+    showHead: { type: Boolean, default: true },
+    /** 是否显示尾部 */
+    showFoot: { type: Boolean, default: true },
+    /** 卡片外围阴影，字符串形式 */
+    boxShadow: { type: String, default: 'none' }
+};
+
+export type CardProps = ExtractPropTypes<typeof CardProps>;

package/components/u-card/u-card.vue

@@ -1,194 +1,209 @@
-<template>
-    <view
-        class="u-card"
-        @tap.stop="onClick"
-        :class="{ 'u-border': border, 'u-card-full': full, 'u-card--border': Number(borderRadius) > 0 }"
-        :style="{
-            borderRadius: borderRadius + 'rpx',
-            margin: margin,
-            boxShadow: boxShadow
-        }"
-    >
-        <view
-            v-if="showHead"
-            class="u-card__head"
-            :style="[{ padding: padding + 'rpx' }, headStyle]"
-            :class="{
-                'u-border-bottom': headBorderBottom
-            }"
-            @tap="onHeadClick"
-        >
-            <view v-if="!slots.head" class="u-flex u-row-between">
-                <view class="u-card__head--left u-flex u-line-1" v-if="title">
-                    <image
-                        :src="thumb"
-                        class="u-card__head--left__thumb"
-                        mode="aspectFill"
-                        v-if="thumb"
-                        :style="{
-                            height: thumbWidth + 'rpx',
-                            width: thumbWidth + 'rpx',
-                            borderRadius: thumbCircle ? '100rpx' : '6rpx'
-                        }"
-                    ></image>
-                    <text
-                        class="u-card__head--left__title u-line-1"
-                        :style="{
-                            fontSize: titleSize + 'rpx',
-                            color: titleColor
-                        }"
-                    >
-                        {{ title }}
-                    </text>
-                </view>
-                <view class="u-card__head--right u-line-1" v-if="subTitle">
-                    <text
-                        class="u-card__head__title__text"
-                        :style="{
-                            fontSize: subTitleSize + 'rpx',
-                            color: subTitleColor
-                        }"
-                    >
-                        {{ subTitle }}
-                    </text>
-                </view>
-            </view>
-            <slot name="head" v-else />
-        </view>
-        <view @tap="onBodyClick" class="u-card__body" :style="[{ padding: padding + 'rpx' }, bodyStyle]">
-            <slot name="body" />
-        </view>
-        <view
-            v-if="showFoot"
-            class="u-card__foot"
-            @tap="onFootClick"
-            :style="[{ padding: slots.foot ? padding + 'rpx' : 0 }, footStyle]"
-            :class="{
-                'u-border-top': footBorderTop
-            }"
-        >
-            <slot name="foot" />
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { useSlots } from 'vue';
-import { CardProps } from './types';
-
-defineOptions({
-    name: 'u-card'
-});
-
-/**
- * card 卡片
- * @description 卡片组件一般用于多个列表条目，且风格统一的场景
- * @tutorial https://uviewpro.cn/zh/components/card.html
- * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
- * @property {String} title 头部左边的标题
- * @property {String} title-color 标题颜色（默认#303133）
- * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
- * @property {String} sub-title 头部右边的副标题
- * @property {String} sub-title-color 副标题颜色（默认#909399）
- * @property {String | Number} sub-title-size 副标题字体大小（默认26）
- * @property {Boolean} border 是否显示边框（默认true）
- * @property {String | Number} index 用于标识点击了第几个卡片
- * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
- * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
- * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
- * @property {Object} head-style 头部自定义样式，对象形式
- * @property {Object} body-style 中部自定义样式，对象形式
- * @property {Object} foot-style 底部自定义样式，对象形式
- * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
- * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
- * @property {Boolean} show-head 是否显示头部（默认true）
- * @property {Boolean} show-foot 是否显示尾部（默认true）
- * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
- * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
- * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
- * @event {Function} click 整个卡片任意位置被点击时触发
- * @event {Function} head-click 卡片头部被点击时触发
- * @event {Function} body-click 卡片主体部分被点击时触发
- * @event {Function} foot-click 卡片底部部分被点击时触发
- * @example <u-card padding="30" title="card"></u-card>
- */
-const props = defineProps(CardProps);
-
-const emit = defineEmits(['click', 'head-click', 'body-click', 'foot-click']);
-const slots = useSlots();
-
-/**
- * 整个卡片任意位置被点击时触发
- */
-function onClick() {
-    emit('click', props.index);
-}
-/**
- * 卡片头部被点击时触发
- */
-function onHeadClick() {
-    emit('head-click', props.index);
-}
-/**
- * 卡片主体部分被点击时触发
- */
-function onBodyClick() {
-    emit('body-click', props.index);
-}
-/**
- * 卡片底部部分被点击时触发
- */
-function onFootClick() {
-    emit('foot-click', props.index);
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-card {
-    position: relative;
-    overflow: hidden;
-    font-size: 28rpx;
-    background-color: #ffffff;
-    box-sizing: border-box;
-
-    &-full {
-        // 如果是与屏幕之间不留空隙，应该设置左右边距为0
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        width: 100%;
-    }
-
-    &--border:after {
-        border-radius: 16rpx;
-    }
-
-    &__head {
-        &--left {
-            color: $u-main-color;
-
-            &__thumb {
-                margin-right: 16rpx;
-            }
-
-            &__title {
-                max-width: 400rpx;
-            }
-        }
-
-        &--right {
-            color: $u-tips-color;
-            margin-left: 6rpx;
-        }
-    }
-
-    &__body {
-        color: $u-content-color;
-    }
-
-    &__foot {
-        color: $u-tips-color;
-    }
-}
-</style>
+<template>
+    <view
+        class="u-card"
+        @tap.stop="onClick"
+        :class="[{ 'u-border': border, 'u-card-full': full, 'u-card--border': Number(borderRadius) > 0 }, customClass]"
+        :style="
+            $u.toStyle(
+                {
+                    borderRadius: borderRadius + 'rpx',
+                    margin: margin,
+                    boxShadow: boxShadow
+                },
+                customStyle
+            )
+        "
+    >
+        <view
+            v-if="showHead"
+            class="u-card__head"
+            :style="[{ padding: padding + 'rpx' }, headStyle]"
+            :class="{
+                'u-border-bottom': headBorderBottom
+            }"
+            @tap="onHeadClick"
+        >
+            <view v-if="!slots.head" class="u-flex u-row-between">
+                <view class="u-card__head--left u-flex u-line-1" v-if="title">
+                    <image
+                        :src="thumb"
+                        class="u-card__head--left__thumb"
+                        mode="aspectFill"
+                        v-if="thumb"
+                        :style="{
+                            height: thumbWidth + 'rpx',
+                            width: thumbWidth + 'rpx',
+                            borderRadius: thumbCircle ? '100rpx' : '6rpx'
+                        }"
+                    ></image>
+                    <text
+                        class="u-card__head--left__title u-line-1"
+                        :style="{
+                            fontSize: titleSize + 'rpx',
+                            color: titleColor
+                        }"
+                    >
+                        {{ title }}
+                    </text>
+                </view>
+                <view class="u-card__head--right u-line-1" v-if="subTitle">
+                    <text
+                        class="u-card__head__title__text"
+                        :style="{
+                            fontSize: subTitleSize + 'rpx',
+                            color: subTitleColor
+                        }"
+                    >
+                        {{ subTitle }}
+                    </text>
+                </view>
+            </view>
+            <slot name="head" v-else />
+        </view>
+        <view @tap="onBodyClick" class="u-card__body" :style="[{ padding: padding + 'rpx' }, bodyStyle]">
+            <slot name="body" />
+        </view>
+        <view
+            v-if="showFoot"
+            class="u-card__foot"
+            @tap="onFootClick"
+            :style="[{ padding: slots.foot ? padding + 'rpx' : 0 }, footStyle]"
+            :class="{
+                'u-border-top': footBorderTop
+            }"
+        >
+            <slot name="foot" />
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-card',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { useSlots } from 'vue';
+import { CardProps } from './types';
+import { $u } from '../..';
+
+/**
+ * card 卡片
+ * @description 卡片组件一般用于多个列表条目，且风格统一的场景
+ * @tutorial https://uviewpro.cn/zh/components/card.html
+ * @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
+ * @property {String} title 头部左边的标题
+ * @property {String} title-color 标题颜色（默认#303133）
+ * @property {String | Number} title-size 标题字体大小，单位rpx（默认30）
+ * @property {String} sub-title 头部右边的副标题
+ * @property {String} sub-title-color 副标题颜色（默认#909399）
+ * @property {String | Number} sub-title-size 副标题字体大小（默认26）
+ * @property {Boolean} border 是否显示边框（默认true）
+ * @property {String | Number} index 用于标识点击了第几个卡片
+ * @property {String} box-shadow 卡片外围阴影，字符串形式（默认none）
+ * @property {String} margin 卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"（默认30rpx）
+ * @property {String | Number} border-radius 卡片整体的圆角值，单位rpx（默认16）
+ * @property {Object} head-style 头部自定义样式，对象形式
+ * @property {Object} body-style 中部自定义样式，对象形式
+ * @property {Object} foot-style 底部自定义样式，对象形式
+ * @property {Boolean} head-border-bottom 是否显示头部的下边框（默认true）
+ * @property {Boolean} foot-border-top 是否显示底部的上边框（默认true）
+ * @property {Boolean} show-head 是否显示头部（默认true）
+ * @property {Boolean} show-foot 是否显示尾部（默认true）
+ * @property {String} thumb 缩略图路径，如设置将显示在标题的左边，不建议使用相对路径
+ * @property {String | Number} thumb-width 缩略图的宽度，高等于宽，单位rpx（默认60）
+ * @property {Boolean} thumb-circle 缩略图是否为圆形（默认false）
+ * @event {Function} click 整个卡片任意位置被点击时触发
+ * @event {Function} head-click 卡片头部被点击时触发
+ * @event {Function} body-click 卡片主体部分被点击时触发
+ * @event {Function} foot-click 卡片底部部分被点击时触发
+ * @example <u-card padding="30" title="card"></u-card>
+ */
+const props = defineProps(CardProps);
+
+const emit = defineEmits(['click', 'head-click', 'body-click', 'foot-click']);
+const slots = useSlots();
+
+/**
+ * 整个卡片任意位置被点击时触发
+ */
+function onClick() {
+    emit('click', props.index);
+}
+/**
+ * 卡片头部被点击时触发
+ */
+function onHeadClick() {
+    emit('head-click', props.index);
+}
+/**
+ * 卡片主体部分被点击时触发
+ */
+function onBodyClick() {
+    emit('body-click', props.index);
+}
+/**
+ * 卡片底部部分被点击时触发
+ */
+function onFootClick() {
+    emit('foot-click', props.index);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-card {
+    position: relative;
+    overflow: hidden;
+    font-size: 28rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    &-full {
+        // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        width: 100%;
+    }
+
+    &--border:after {
+        border-radius: 16rpx;
+    }
+
+    &__head {
+        &--left {
+            color: $u-main-color;
+
+            &__thumb {
+                margin-right: 16rpx;
+            }
+
+            &__title {
+                max-width: 400rpx;
+            }
+        }
+
+        &--right {
+            color: $u-tips-color;
+            margin-left: 6rpx;
+        }
+    }
+
+    &__body {
+        color: $u-content-color;
+    }
+
+    &__foot {
+        color: $u-tips-color;
+    }
+}
+</style>

package/components/u-cell-group/types.ts

@@ -1,17 +1,19 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-
-/**
- * cell-group 组件 props 类型定义
- * @description 供 u-cell-group 组件 props 使用
- */
-
-export const CellGroupProps = {
-    /** 分组标题 */
-    title: { type: String, default: '' },
-    /** 是否显示分组list上下边框 */
-    border: { type: Boolean, default: true },
-    /** 分组标题的样式，对象形式，注意驼峰属性写法 */
-    titleStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
-};
-
-export type CellGroupProps = ExtractPropTypes<typeof CellGroupProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * cell-group 组件 props 类型定义
+ * @description 供 u-cell-group 组件 props 使用
+ */
+
+export const CellGroupProps = {
+    ...baseProps,
+    /** 分组标题 */
+    title: { type: String, default: '' },
+    /** 是否显示分组list上下边框 */
+    border: { type: Boolean, default: true },
+    /** 分组标题的样式，对象形式，注意驼峰属性写法 */
+    titleStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type CellGroupProps = ExtractPropTypes<typeof CellGroupProps>;