uview-pro 0.2.4 → 0.3.1

package/components/u-cell-group/u-cell-group.vue

@@ -1,50 +1,60 @@
-<template>
-    <view class="u-cell-box">
-        <view class="u-cell-title" v-if="title" :style="[titleStyle]">
-            {{ title }}
-        </view>
-        <view class="u-cell-item-box" :class="{ 'u-border-bottom u-border-top': border }">
-            <slot />
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { CellGroupProps } from './types';
-
-defineOptions({
-    name: 'u-cell-group'
-});
-
-/**
- * cellGroup 单元格父组件Group
- * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
- * @tutorial https://uviewpro.cn/zh/components/cell.html
- * @property {String} title 分组标题
- * @property {Boolean} border 是否显示外边框（默认true）
- * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
- * @example <u-cell-group title="设置喜好">
- */
-
-defineProps(CellGroupProps);
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-cell-box {
-    width: 100%;
-}
-
-.u-cell-title {
-    padding: 30rpx 32rpx 10rpx 32rpx;
-    font-size: 30rpx;
-    text-align: left;
-    color: $u-tips-color;
-}
-
-.u-cell-item-box {
-    background-color: #ffffff;
-    flex-direction: row;
-}
-</style>
+<template>
+    <view class="u-cell-box" :class="customClass" :style="$u.toStyle(customStyle)">
+        <view class="u-cell-title" v-if="title" :style="[titleStyle]">
+            {{ title }}
+        </view>
+        <view class="u-cell-item-box" :class="{ 'u-border-bottom u-border-top': border }">
+            <slot />
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-cell-group',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { CellGroupProps } from './types';
+import { $u } from '../..';
+
+/**
+ * cellGroup 单元格父组件Group
+ * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
+ * @tutorial https://uviewpro.cn/zh/components/cell.html
+ * @property {String} title 分组标题
+ * @property {Boolean} border 是否显示外边框（默认true）
+ * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
+ * @example <u-cell-group title="设置喜好">
+ */
+
+defineProps(CellGroupProps);
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-cell-box {
+    width: 100%;
+}
+
+.u-cell-title {
+    padding: 30rpx 32rpx 10rpx 32rpx;
+    font-size: 30rpx;
+    text-align: left;
+    color: $u-tips-color;
+}
+
+.u-cell-item-box {
+    background-color: #ffffff;
+    flex-direction: row;
+}
+</style>

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

@@ -1,54 +1,56 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-import type { CellItemArrowDirection } from '../../types/global';
-
-/**
- * cell-item 组件 props 类型定义
- * @description 供 u-cell-item 组件 props 使用
- */
-export type CellItemIndex = string | number;
-export type CellItemStyle = Record<string, any>;
-
-export const CellItemProps = {
-    /** 左侧图标名称(只能uView内置图标)，或者图标src */
-    icon: { type: String, default: '' },
-    /** 左侧标题 */
-    title: { type: [String, Number], default: '' },
-    /** 右侧内容 */
-    value: { type: [String, Number], default: '' },
-    /** 标题下方的描述信息 */
-    label: { type: [String, Number], default: '' },
-    /** 是否显示下边框 */
-    borderBottom: { type: Boolean, default: true },
-    /** 是否显示上边框 */
-    borderTop: { type: Boolean, default: false },
-    /** 是否开启点击反馈，即点击时cell背景为灰色，none为无效果 */
-    hoverClass: { type: String, default: 'u-cell-hover' },
-    /** 是否显示右侧箭头 */
-    arrow: { type: Boolean, default: true },
-    /** 内容是否垂直居中 */
-    center: { type: Boolean, default: false },
-    /** 是否显示左边表示必填的星号 */
-    required: { type: Boolean, default: false },
-    /** 标题的宽度，单位rpx */
-    titleWidth: { type: [Number, String], default: '' },
-    /** 右侧箭头方向，可选值：right|up|down，默认为right */
-    arrowDirection: { type: String as PropType<CellItemArrowDirection>, default: 'right' },
-    /** 控制标题的样式 */
-    titleStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
-    /** 右侧显示内容的样式 */
-    valueStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
-    /** 描述信息的样式 */
-    labelStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
-    /** 背景颜色 */
-    bgColor: { type: String, default: 'transparent' },
-    /** 用于识别被点击的是第几个cell */
-    index: { type: [String, Number] as PropType<CellItemIndex>, default: '' },
-    /** 是否使用label插槽 */
-    useLabelSlot: { type: Boolean, default: false },
-    /** 左边图标的大小，单位rpx，只对传入icon字段时有效 */
-    iconSize: { type: [Number, String], default: 34 },
-    /** 左边图标的样式，对象形式 */
-    iconStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) }
-};
-
-export type CellItemProps = ExtractPropTypes<typeof CellItemProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type { CellItemArrowDirection } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * cell-item 组件 props 类型定义
+ * @description 供 u-cell-item 组件 props 使用
+ */
+export type CellItemIndex = string | number;
+export type CellItemStyle = Record<string, any>;
+
+export const CellItemProps = {
+    ...baseProps,
+    /** 左侧图标名称(只能uView内置图标)，或者图标src */
+    icon: { type: String, default: '' },
+    /** 左侧标题 */
+    title: { type: [String, Number], default: '' },
+    /** 右侧内容 */
+    value: { type: [String, Number], default: '' },
+    /** 标题下方的描述信息 */
+    label: { type: [String, Number], default: '' },
+    /** 是否显示下边框 */
+    borderBottom: { type: Boolean, default: true },
+    /** 是否显示上边框 */
+    borderTop: { type: Boolean, default: false },
+    /** 是否开启点击反馈，即点击时cell背景为灰色，none为无效果 */
+    hoverClass: { type: String, default: 'u-cell-hover' },
+    /** 是否显示右侧箭头 */
+    arrow: { type: Boolean, default: true },
+    /** 内容是否垂直居中 */
+    center: { type: Boolean, default: false },
+    /** 是否显示左边表示必填的星号 */
+    required: { type: Boolean, default: false },
+    /** 标题的宽度，单位rpx */
+    titleWidth: { type: [Number, String], default: '' },
+    /** 右侧箭头方向，可选值：right|up|down，默认为right */
+    arrowDirection: { type: String as PropType<CellItemArrowDirection>, default: 'right' },
+    /** 控制标题的样式 */
+    titleStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
+    /** 右侧显示内容的样式 */
+    valueStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
+    /** 描述信息的样式 */
+    labelStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) },
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 用于识别被点击的是第几个cell */
+    index: { type: [String, Number] as PropType<CellItemIndex>, default: '' },
+    /** 是否使用label插槽 */
+    useLabelSlot: { type: Boolean, default: false },
+    /** 左边图标的大小，单位rpx，只对传入icon字段时有效 */
+    iconSize: { type: [Number, String], default: 34 },
+    /** 左边图标的样式，对象形式 */
+    iconStyle: { type: Object as PropType<CellItemStyle>, default: () => ({}) }
+};
+
+export type CellItemProps = ExtractPropTypes<typeof CellItemProps>;