uview-pro 0.2.4 → 0.3.1

package/components/u-full-screen/types.ts

@@ -1,14 +1,16 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-full-screen 组件 Props 类型定义
- * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
- */
-export const FullScreenProps = {
-    /** 是否显示弹窗 */
-    show: { type: Boolean, default: false },
-    /** 升级内容，支持富文本 */
-    content: { type: String, default: '' }
-};
-
-export type FullScreenProps = ExtractPropTypes<typeof FullScreenProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-full-screen 组件 Props 类型定义
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ */
+export const FullScreenProps = {
+    ...baseProps,
+    /** 是否显示弹窗 */
+    show: { type: Boolean, default: false },
+    /** 升级内容，支持富文本 */
+    content: { type: String, default: '' }
+};
+
+export type FullScreenProps = ExtractPropTypes<typeof FullScreenProps>;

package/components/u-full-screen/u-full-screen.vue

@@ -1,89 +1,103 @@
-<template>
-    <u-modal
-        v-model="show"
-        :show-cancel-button="true"
-        confirm-text="升级"
-        title="发现新版本"
-        @cancel="cancel"
-        @confirm="confirm"
-    >
-        <view class="u-update-content">
-            <rich-text :nodes="content"></rich-text>
-        </view>
-    </u-modal>
-</template>
-
-<script setup lang="ts">
-import { FullScreenProps } from './types';
-import { ref, onMounted } from 'vue';
-
-defineOptions({ name: 'u-full-screen' });
-
-/**
- * 压窗屏升级弹窗组件
- * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
- * @property {boolean} show 是否显示弹窗
- * @property {string} content 升级内容，支持富文本
- */
-defineProps(FullScreenProps);
-
-/**
- * 是否显示弹窗
- */
-const show = ref(false);
-/**
- * 升级内容，支持富文本
- */
-const content = ref<string>(`
-  1. 修复badge组件的size参数无效问题<br>
-  2. 新增Modal模态框组件<br>
-  3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
-  4. 修复键盘组件在微信小程序上遮罩无效的问题
-`);
-
-/**
- * 页面加载完成后自动显示弹窗
- */
-onMounted(() => {
-    show.value = true;
-});
-
-/**
- * 取消按钮点击事件
- * @description 关闭弹窗并返回上一页
- */
-function cancel() {
-    closeModal();
-}
-
-/**
- * 升级按钮点击事件
- * @description 关闭弹窗并返回上一页
- */
-function confirm() {
-    closeModal();
-}
-
-/**
- * 关闭弹窗方法
- * @description 返回上一页
- */
-function closeModal() {
-    uni.navigateBack();
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-full-content {
-    background-color: #00c777;
-}
-
-.u-update-content {
-    font-size: 26rpx;
-    color: $u-content-color;
-    line-height: 1.7;
-    padding: 30rpx;
-}
-</style>
+<template>
+    <u-modal
+        v-model="show"
+        :class="customClass"
+        :style="$u.toStyle(customStyle)"
+        :show-cancel-button="true"
+        confirm-text="升级"
+        title="发现新版本"
+        @cancel="cancel"
+        @confirm="confirm"
+    >
+        <view class="u-update-content">
+            <rich-text :nodes="content"></rich-text>
+        </view>
+    </u-modal>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-full-screen',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { FullScreenProps } from './types';
+import { ref, onMounted } from 'vue';
+import { $u } from '../../';
+
+/**
+ * 压窗屏升级弹窗组件
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ * @property {boolean} show 是否显示弹窗
+ * @property {string} content 升级内容，支持富文本
+ */
+defineProps(FullScreenProps);
+
+/**
+ * 是否显示弹窗
+ */
+const show = ref(false);
+/**
+ * 升级内容，支持富文本
+ */
+const content = ref<string>(`
+  1. 修复badge组件的size参数无效问题<br>
+  2. 新增Modal模态框组件<br>
+  3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
+  4. 修复键盘组件在微信小程序上遮罩无效的问题
+`);
+
+/**
+ * 页面加载完成后自动显示弹窗
+ */
+onMounted(() => {
+    show.value = true;
+});
+
+/**
+ * 取消按钮点击事件
+ * @description 关闭弹窗并返回上一页
+ */
+function cancel() {
+    closeModal();
+}
+
+/**
+ * 升级按钮点击事件
+ * @description 关闭弹窗并返回上一页
+ */
+function confirm() {
+    closeModal();
+}
+
+/**
+ * 关闭弹窗方法
+ * @description 返回上一页
+ */
+function closeModal() {
+    uni.navigateBack();
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-full-content {
+    background-color: #00c777;
+}
+
+.u-update-content {
+    font-size: 26rpx;
+    color: $u-content-color;
+    line-height: 1.7;
+    padding: 30rpx;
+}
+</style>

package/components/u-gap/types.ts

@@ -1,18 +1,20 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-gap 组件 Props 类型定义
- * @description 间隔槽组件属性
- */
-export const GapProps = {
-    /** 背景颜色 */
-    bgColor: { type: String, default: 'transparent' },
-    /** 高度 */
-    height: { type: [String, Number] as PropType<string | number>, default: 30 },
-    /** 与上一个组件的距离 */
-    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
-    /** 与下一个组件的距离 */
-    marginBottom: { type: [String, Number] as PropType<string | number>, default: 0 }
-};
-
-export type GapProps = ExtractPropTypes<typeof GapProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-gap 组件 Props 类型定义
+ * @description 间隔槽组件属性
+ */
+export const GapProps = {
+    ...baseProps,
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 高度 */
+    height: { type: [String, Number] as PropType<string | number>, default: 30 },
+    /** 与上一个组件的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 与下一个组件的距离 */
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: 0 }
+};
+
+export type GapProps = ExtractPropTypes<typeof GapProps>;

package/components/u-gap/u-gap.vue

@@ -1,40 +1,50 @@
-<template>
-    <view class="u-gap" :style="gapStyle"></view>
-</template>
-
-<script setup lang="ts">
-import { GapProps } from './types';
-import { computed } from 'vue';
-
-defineOptions({
-    name: 'u-gap'
-});
-
-/**
- * gap 间隔槽
- * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
- * @tutorial https://uviewpro.cn/zh/components/gap.html
- * @property {String} bg-color 背景颜色（默认#f3f4f6）
- * @property {String Number} height 分割槽高度，单位rpx（默认30）
- * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
- * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
- * @example <u-gap height="80" bg-color="#bbb"></u-gap>
- */
-const props = defineProps(GapProps);
-
-/**
- * 间隔槽样式
- */
-const gapStyle = computed(() => {
-    return {
-        backgroundColor: props.bgColor,
-        height: props.height + 'rpx',
-        marginTop: props.marginTop + 'rpx',
-        marginBottom: props.marginBottom + 'rpx'
-    };
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-</style>
+<template>
+    <view class="u-gap" :style="$u.toStyle(gapStyle, customStyle)"></view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-gap',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { GapProps } from './types';
+import { computed } from 'vue';
+import { $u } from '../../';
+
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://uviewpro.cn/zh/components/gap.html
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ */
+const props = defineProps(GapProps);
+
+/**
+ * 间隔槽样式
+ */
+const gapStyle = computed(() => {
+    return {
+        backgroundColor: props.bgColor,
+        height: props.height + 'rpx',
+        marginTop: props.marginTop + 'rpx',
+        marginBottom: props.marginBottom + 'rpx'
+    };
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>

package/components/u-grid/types.ts

@@ -1,19 +1,21 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign } from '../../types/global';
-
-/**
- * u-grid 组件 Props 类型定义
- * @description 宫格组件属性
- */
-export const GridProps = {
-    /** 分成几列 */
-    col: { type: [Number, String] as PropType<string | number>, default: 3 },
-    /** 是否显示边框 */
-    border: { type: Boolean, default: true },
-    /** 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 */
-    align: { type: String as PropType<InputAlign>, default: 'left' },
-    /** 宫格按压时的样式类，"none"为无效果 */
-    hoverClass: { type: String, default: 'u-hover-class' }
-};
-
-export type GridProps = ExtractPropTypes<typeof GridProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * u-grid 组件 Props 类型定义
+ * @description 宫格组件属性
+ */
+export const GridProps = {
+    ...baseProps,
+    /** 分成几列 */
+    col: { type: [Number, String] as PropType<string | number>, default: 3 },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 */
+    align: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 宫格按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+};
+
+export type GridProps = ExtractPropTypes<typeof GridProps>;

package/components/u-grid/u-grid.vue

@@ -1,93 +1,91 @@
-<template>
-    <view class="u-grid" :class="{ 'u-border-top u-border-left': border }" :style="[gridStyle]">
-        <slot />
-    </view>
-</template>
-
-<script setup lang="ts">
-import { GridProps } from './types';
-import { ref, computed, watch } from 'vue';
-
-defineOptions({ name: 'u-grid' });
-
-/**
- * grid 宫格布局
- * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
- * @tutorial https://uviewpro.cn/zh/components/grid.html
- * @property {String|Number} col 宫格的列数（默认3）
- * @property {Boolean} border 是否显示宫格的边框（默认true）
- * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
- * @event {Function} click 点击宫格触发
- * @example <u-grid :col="3" @click="click"></u-grid>
- */
-const props = defineProps(GridProps);
-
-// emits 定义
-const emit = defineEmits(['click']);
-
-// 当前 grid 的子项集合
-const children = ref<any[]>([]);
-
-// 计算父组件的值是否发生变化
-const parentData = computed(() => [props.hoverClass, props.col, props.border, props.align]);
-
-// 宫格对齐方式
-const gridStyle = computed(() => {
-    const style: Record<string, string> = {};
-    switch (props.align) {
-        case 'left':
-            style.justifyContent = 'flex-start';
-            break;
-        case 'center':
-            style.justifyContent = 'center';
-            break;
-        case 'right':
-            style.justifyContent = 'flex-end';
-            break;
-        default:
-            style.justifyContent = 'flex-start';
-    }
-    return style;
-});
-
-// 监听父参数变化，通知子组件
-watch(parentData, () => {
-    if (children.value.length) {
-        children.value.forEach(child => {
-            child.exposed.updateParentData();
-        });
-    }
-});
-
-// 兼容原 created 钩子
-children.value = [];
-
-/**
- * 点击宫格
- * @param index 子项索引
- */
-function click(index: number) {
-    emit('click', index);
-}
-
-defineExpose({ click, children, props });
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-grid {
-    width: 100%;
-    /* #ifdef MP */
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    /* #endif */
-
-    /* #ifndef MP */
-    @include vue-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    /* #endif */
-}
-</style>
+<template>
+    <view
+        class="u-grid"
+        :class="{ 'u-border-top u-border-left': border, customClass }"
+        :style="$u.toStyle(gridStyle, customStyle)"
+    >
+        <slot />
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-grid',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { useParent, $u } from '../../';
+import { GridProps } from './types';
+import { computed } from 'vue';
+
+/**
+ * grid 宫格布局
+ * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+ * @tutorial https://uviewpro.cn/zh/components/grid.html
+ * @property {String|Number} col 宫格的列数（默认3）
+ * @property {Boolean} border 是否显示宫格的边框（默认true）
+ * @property {Boolean} hover-class 点击宫格的时候，是否显示按下的灰色背景（默认false）
+ * @event {Function} click 点击宫格触发
+ * @example <u-grid :col="3" @click="click"></u-grid>
+ */
+
+const props = defineProps(GridProps);
+const emit = defineEmits(['click']);
+useParent('u-grid');
+
+// 宫格对齐方式
+const gridStyle = computed(() => {
+    const style: Record<string, string> = {};
+    switch (props.align) {
+        case 'left':
+            style.justifyContent = 'flex-start';
+            break;
+        case 'center':
+            style.justifyContent = 'center';
+            break;
+        case 'right':
+            style.justifyContent = 'flex-end';
+            break;
+        default:
+            style.justifyContent = 'flex-start';
+    }
+    return style;
+});
+
+/**
+ * 点击宫格
+ * @param index 子项索引
+ */
+function click(index: number) {
+    emit('click', index);
+}
+
+defineExpose({ click, props });
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-grid {
+    width: 100%;
+    /* #ifdef MP */
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* #endif */
+
+    /* #ifndef MP */
+    @include vue-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    /* #endif */
+}
+</style>

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

@@ -1,16 +1,16 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-grid-item 组件 Props 类型定义
- * @description 宫格项组件属性
- */
-export const GridItemProps = {
-    /** 背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 点击时返回的index */
-    index: { type: [Number, String] as PropType<string | number>, default: '' },
-    /** 自定义样式，对象形式 */
-    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({ padding: '30rpx 0' }) }
-};
-
-export type GridItemProps = ExtractPropTypes<typeof GridItemProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-grid-item 组件 Props 类型定义
+ * @description 宫格项组件属性
+ */
+export const GridItemProps = {
+    ...baseProps,
+    /** 背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 点击时返回的index */
+    index: { type: [Number, String] as PropType<string | number>, default: '' }
+};
+
+export type GridItemProps = ExtractPropTypes<typeof GridItemProps>;