uview-pro 0.6.18 → 0.6.19

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

@@ -1,26 +1,26 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-full-screen 组件 Props 类型定义
- * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
- */
-export const FullScreenProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 是否显示弹窗 */
-    show: { type: Boolean, default: false },
-    /** 弹窗标题 */
-    title: { type: String, default: '' },
-    /** 升级内容，支持富文本 */
-    content: { type: String, default: '' }
-};
-
-export type FullScreenProps = ExtractPropTypes<typeof FullScreenProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-full-screen 组件 Props 类型定义
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ */
+export const FullScreenProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 是否显示弹窗 */
+    show: { type: Boolean, default: false },
+    /** 弹窗标题 */
+    title: { type: String, default: '' },
+    /** 升级内容，支持富文本 */
+    content: { type: String, default: '' }
+};
+
+export type FullScreenProps = ExtractPropTypes<typeof FullScreenProps>;

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

@@ -1,100 +1,100 @@
-<template>
-    <u-modal
-        v-model="show"
-        :class="customClass"
-        :style="$u.toStyle(customStyle)"
-        :show-cancel-button="true"
-        :confirm-text="t('uFullScreen.upgrade')"
-        :title="title || t('uFullScreen.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, useLocale } from '../../';
-import uModal from '../u-modal/u-modal.vue';
-
-/**
- * 压窗屏升级弹窗组件
- * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
- * @property {boolean} show 是否显示弹窗
- * @property {string} content 升级内容，支持富文本
- */
-defineProps(FullScreenProps);
-
-/**
- * 是否显示弹窗
- */
-const show = ref(false);
-/**
- * 升级内容，支持富文本
- */
-
-const { t } = useLocale();
-
-/**
- * 页面加载完成后自动显示弹窗
- */
-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: var(--u-type-success);
-}
-
-.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="t('uFullScreen.upgrade')"
+        :title="title || t('uFullScreen.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, useLocale } from '../../';
+import uModal from '../u-modal/u-modal.vue';
+
+/**
+ * 压窗屏升级弹窗组件
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ * @property {boolean} show 是否显示弹窗
+ * @property {string} content 升级内容，支持富文本
+ */
+defineProps(FullScreenProps);
+
+/**
+ * 是否显示弹窗
+ */
+const show = ref(false);
+/**
+ * 升级内容，支持富文本
+ */
+
+const { t } = useLocale();
+
+/**
+ * 页面加载完成后自动显示弹窗
+ */
+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: var(--u-type-success);
+}
+
+.u-update-content {
+    font-size: 26rpx;
+    color: $u-content-color;
+    line-height: 1.7;
+    padding: 30rpx;
+}
+</style>

package/components/u-gap/types.ts

@@ -1,28 +1,28 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-
-/**
- * u-gap 组件 Props 类型定义
- * @description 间隔槽组件属性
- */
-export const GapProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 背景颜色 */
-    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';
+
+/**
+ * u-gap 组件 Props 类型定义
+ * @description 间隔槽组件属性
+ */
+export const GapProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 背景颜色 */
+    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,50 +1,50 @@
-<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 背景颜色（默认var(--u-bg-color)）
- * @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="var(--u-light-color)"></u-gap>
- */
-const props = defineProps(GapProps);
-
-/**
- * 间隔槽样式
- */
-const gapStyle = computed(() => {
-    return {
-        backgroundColor: props.bgColor,
-        height: $u.addUnit(props.height),
-        marginTop: $u.addUnit(props.marginTop),
-        marginBottom: $u.addUnit(props.marginBottom)
-    };
-});
-</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 背景颜色（默认var(--u-bg-color)）
+ * @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="var(--u-light-color)"></u-gap>
+ */
+const props = defineProps(GapProps);
+
+/**
+ * 间隔槽样式
+ */
+const gapStyle = computed(() => {
+    return {
+        backgroundColor: props.bgColor,
+        height: $u.addUnit(props.height),
+        marginTop: $u.addUnit(props.marginTop),
+        marginBottom: $u.addUnit(props.marginBottom)
+    };
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>

package/components/u-grid/types.ts

@@ -1,29 +1,29 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign } from '../../types/global';
-
-/**
- * u-grid 组件 Props 类型定义
- * @description 宫格组件属性
- */
-export const GridProps = {
-    /** 自定义根节点样式 */
-    customStyle: {
-        type: [String, Object] as PropType<string | Record<string, any>>,
-        default: () => ({})
-    },
-    /** 自定义根节点样式类 */
-    customClass: {
-        type: String as unknown as PropType<string>,
-        default: ''
-    },
-    /** 分成几列 */
-    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';
+
+/**
+ * u-grid 组件 Props 类型定义
+ * @description 宫格组件属性
+ */
+export const GridProps = {
+    /** 自定义根节点样式 */
+    customStyle: {
+        type: [String, Object] as PropType<string | Record<string, any>>,
+        default: () => ({})
+    },
+    /** 自定义根节点样式类 */
+    customClass: {
+        type: String as unknown as PropType<string>,
+        default: ''
+    },
+    /** 分成几列 */
+    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,91 +1,91 @@
-<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>
+<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>