uview-pro 0.2.4 → 0.3.1

package/components/u-table/types.ts

@@ -1,25 +1,27 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { TextAlign } from '../../types/global';
-
-/**
- * TableProps 表格 props 类型定义
- * @description 表格组件，支持自定义边框、背景、对齐方式等
- */
-export const TableProps = {
-    /** 表格边框的颜色 */
-    borderColor: { type: String, default: '#e4e7ed' },
-    /** 单元格的内容对齐方式，作用类似css的text-align */
-    align: { type: String as PropType<TextAlign>, default: 'center' },
-    /** 单元格的内边距，同css的padding写法 */
-    padding: { type: String, default: '10rpx 6rpx' },
-    /** 单元格字体大小，单位rpx */
-    fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
-    /** 单元格字体颜色 */
-    color: { type: String, default: '#606266' },
-    /** th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） */
-    thStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 表格的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' }
-};
-
-export type TableProps = ExtractPropTypes<typeof TableProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TextAlign } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * TableProps 表格 props 类型定义
+ * @description 表格组件，支持自定义边框、背景、对齐方式等
+ */
+export const TableProps = {
+    ...baseProps,
+    /** 表格边框的颜色 */
+    borderColor: { type: String, default: '#e4e7ed' },
+    /** 单元格的内容对齐方式，作用类似css的text-align */
+    align: { type: String as PropType<TextAlign>, default: 'center' },
+    /** 单元格的内边距，同css的padding写法 */
+    padding: { type: String, default: '10rpx 6rpx' },
+    /** 单元格字体大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 28 },
+    /** 单元格字体颜色 */
+    color: { type: String, default: '#606266' },
+    /** th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍） */
+    thStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 表格的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' }
+};
+
+export type TableProps = ExtractPropTypes<typeof TableProps>;

package/components/u-table/u-table.vue

@@ -1,55 +1,67 @@
-<template>
-    <view class="u-table" :style="tableStyle">
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { TableProps } from './types';
-
-defineOptions({ name: 'u-table' });
-
-/**
- * table 表格
- * @description 表格组件一般用于展示大量结构化数据的场景
- * @tutorial https://uviewpro.cn/zh/components/table.html
- * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
- * @property {String} bg-color 表格的背景颜色（默认#ffffff）
- * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
- * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
- * @property {String | Number} font-size 单元格字体大小，单位rpx（默认28）
- * @property {String} color 单元格字体颜色（默认#606266）
- * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
- * @event {Function} click 点击组件时触发
- * @event {Function} close 点击关闭按钮时触发
- * @example <u-table></u-table>
- */
-
-const props = defineProps(TableProps);
-
-/**
- * 计算表格样式
- */
-const tableStyle = computed(() => {
-    const style: Record<string, any> = {};
-    style.borderLeft = `solid 1px ${props.borderColor}`;
-    style.borderTop = `solid 1px ${props.borderColor}`;
-    style.backgroundColor = props.bgColor;
-    return style;
-});
-
-defineExpose({
-    props,
-    tableStyle
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-table {
-    width: 100%;
-    box-sizing: border-box;
-}
-</style>
+<template>
+    <view class="u-table" :style="$u.toStyle(tableStyle, customStyle)" :class="customClass">
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-table',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { TableProps } from './types';
+import { $u } from '../..';
+
+/**
+ * table 表格
+ * @description 表格组件一般用于展示大量结构化数据的场景
+ * @tutorial https://uviewpro.cn/zh/components/table.html
+ * @property {String} border-color 表格边框的颜色（默认#e4e7ed）
+ * @property {String} bg-color 表格的背景颜色（默认#ffffff）
+ * @property {String} align 单元格的内容对齐方式，作用类似css的text-align（默认center）
+ * @property {String} padding 单元格的内边距，同css的padding写法（默认10rpx 0）
+ * @property {String | Number} font-size 单元格字体大小，单位rpx（默认28）
+ * @property {String} color 单元格字体颜色（默认#606266）
+ * @property {Object} th-style th单元格的样式，对象形式(将th所需参数放在table组件，是为了避免每一个th组件要写一遍）
+ * @event {Function} click 点击组件时触发
+ * @event {Function} close 点击关闭按钮时触发
+ * @example <u-table></u-table>
+ */
+
+const props = defineProps(TableProps);
+
+/**
+ * 计算表格样式
+ */
+const tableStyle = computed(() => {
+    const style: Record<string, any> = {};
+    style.borderLeft = `solid 1px ${props.borderColor}`;
+    style.borderTop = `solid 1px ${props.borderColor}`;
+    style.backgroundColor = props.bgColor;
+    return style;
+});
+
+defineExpose({
+    props,
+    tableStyle
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-table {
+    width: 100%;
+    box-sizing: border-box;
+}
+</style>

package/components/u-tabs/types.ts

@@ -1,51 +1,53 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { TabsItem } from '../../types/global';
-
-/**
- * TabsProps tabs标签 props 类型定义
- * @description 标签组件，支持横向滚动、滑块、徽标等
- */
-export const TabsProps = {
-    /** tabs是否可以左右拖动 */
-    isScroll: { type: Boolean, default: true },
-    /** 标签数组 */
-    list: { type: Array as PropType<Array<TabsItem>>, default: () => [] },
-    /** 当前活动tab的索引 */
-    current: { type: [Number, String] as PropType<number | string>, default: 0 },
-    /** 导航栏的高度和行高 */
-    height: { type: [String, Number] as PropType<number | string>, default: 80 },
-    /** 字体大小 */
-    fontSize: { type: [String, Number] as PropType<number | string>, default: 30 },
-    /** 过渡动画时长, 单位s */
-    duration: { type: [String, Number] as PropType<number | string>, default: 0.5 },
-    /** 选中项的主题颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 未选中项的颜色 */
-    inactiveColor: { type: String, default: '#303133' },
-    /** 菜单底部移动的bar的宽度，单位rpx */
-    barWidth: { type: [String, Number] as PropType<number | string>, default: 40 },
-    /** 移动bar的高度 */
-    barHeight: { type: [String, Number] as PropType<number | string>, default: 6 },
-    /** 单个tab的左右内边距之和，单位rpx */
-    gutter: { type: [String, Number] as PropType<number | string>, default: 30 },
-    /** 导航栏的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 读取传入的数组对象的属性(tab名称) */
-    name: { type: String, default: 'name' },
-    /** 读取传入的数组对象的属性(徽标数) */
-    count: { type: String, default: 'count' },
-    /** 徽标数位置偏移 */
-    offset: { type: Array as unknown as PropType<[number, number]>, default: () => [5, 20] },
-    /** 活动tab字体是否加粗 */
-    bold: { type: Boolean, default: true },
-    /** 当前活动tab item的样式 */
-    activeItemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 是否显示底部的滑块 */
-    showBar: { type: Boolean, default: true },
-    /** 底部滑块的自定义样式 */
-    barStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
-    /** 标签的宽度 */
-    itemWidth: { type: [String, Number] as PropType<number | string>, default: 'auto' }
-};
-
-export type TabsProps = ExtractPropTypes<typeof TabsProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { TabsItem } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * TabsProps tabs标签 props 类型定义
+ * @description 标签组件，支持横向滚动、滑块、徽标等
+ */
+export const TabsProps = {
+    ...baseProps,
+    /** tabs是否可以左右拖动 */
+    isScroll: { type: Boolean, default: true },
+    /** 标签数组 */
+    list: { type: Array as PropType<Array<TabsItem>>, default: () => [] },
+    /** 当前活动tab的索引 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 导航栏的高度和行高 */
+    height: { type: [String, Number] as PropType<number | string>, default: 80 },
+    /** 字体大小 */
+    fontSize: { type: [String, Number] as PropType<number | string>, default: 30 },
+    /** 过渡动画时长, 单位s */
+    duration: { type: [String, Number] as PropType<number | string>, default: 0.5 },
+    /** 选中项的主题颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 未选中项的颜色 */
+    inactiveColor: { type: String, default: '#303133' },
+    /** 菜单底部移动的bar的宽度，单位rpx */
+    barWidth: { type: [String, Number] as PropType<number | string>, default: 40 },
+    /** 移动bar的高度 */
+    barHeight: { type: [String, Number] as PropType<number | string>, default: 6 },
+    /** 单个tab的左右内边距之和，单位rpx */
+    gutter: { type: [String, Number] as PropType<number | string>, default: 30 },
+    /** 导航栏的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 读取传入的数组对象的属性(tab名称) */
+    name: { type: String, default: 'name' },
+    /** 读取传入的数组对象的属性(徽标数) */
+    count: { type: String, default: 'count' },
+    /** 徽标数位置偏移 */
+    offset: { type: Array as unknown as PropType<[number, number]>, default: () => [5, 20] },
+    /** 活动tab字体是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** 当前活动tab item的样式 */
+    activeItemStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示底部的滑块 */
+    showBar: { type: Boolean, default: true },
+    /** 底部滑块的自定义样式 */
+    barStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 标签的宽度 */
+    itemWidth: { type: [String, Number] as PropType<number | string>, default: 'auto' }
+};
+
+export type TabsProps = ExtractPropTypes<typeof TabsProps>;