uview-pro 0.3.0 → 0.3.1

package/components/u-section/types.ts

@@ -1,34 +1,34 @@
-import { type ExtractPropTypes, type PropType } from 'vue';
-import { baseProps } from '../common/props';
-
-/**
- * section 组件 props 类型定义
- * @description 供 u-section 组件 props 使用
- */
-export type FontSize = string | number;
-
-export const SectionProps = {
-    ...baseProps,
-    /** 标题信息 */
-    title: { type: String, default: '' },
-    /** 右边副标题内容 */
-    subTitle: { type: String, default: '更多' },
-    /** 是否显示右边的内容 */
-    right: { type: Boolean, default: true },
-    /** 主标题的字体大小 */
-    fontSize: { type: [Number, String] as PropType<FontSize>, default: 28 },
-    /** 主标题是否加粗 */
-    bold: { type: Boolean, default: true },
-    /** 主标题的颜色 */
-    color: { type: String, default: '#303133' },
-    /** 右边副标题的颜色 */
-    subColor: { type: String, default: '#909399' },
-    /** 是否显示左边的竖条 */
-    showLine: { type: Boolean, default: true },
-    /** 左边竖线的颜色 */
-    lineColor: { type: String, default: '' },
-    /** 是否显示右边箭头 */
-    arrow: { type: Boolean, default: true }
-};
-
-export type SectionProps = ExtractPropTypes<typeof SectionProps>;
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * section 组件 props 类型定义
+ * @description 供 u-section 组件 props 使用
+ */
+export type FontSize = string | number;
+
+export const SectionProps = {
+    ...baseProps,
+    /** 标题信息 */
+    title: { type: String, default: '' },
+    /** 右边副标题内容 */
+    subTitle: { type: String, default: '更多' },
+    /** 是否显示右边的内容 */
+    right: { type: Boolean, default: true },
+    /** 主标题的字体大小 */
+    fontSize: { type: [Number, String] as PropType<FontSize>, default: 28 },
+    /** 主标题是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** 主标题的颜色 */
+    color: { type: String, default: '#303133' },
+    /** 右边副标题的颜色 */
+    subColor: { type: String, default: '#909399' },
+    /** 是否显示左边的竖条 */
+    showLine: { type: Boolean, default: true },
+    /** 左边竖线的颜色 */
+    lineColor: { type: String, default: '' },
+    /** 是否显示右边箭头 */
+    arrow: { type: Boolean, default: true }
+};
+
+export type SectionProps = ExtractPropTypes<typeof SectionProps>;

package/components/u-section/u-section.vue

@@ -1,150 +1,150 @@
-<template>
-    <view class="u-section">
-        <view
-            class="u-section__title"
-            :style="
-                $u.toStyle(
-                    {
-                        fontWeight: bold ? 'bold' : 'normal',
-                        color: color,
-                        fontSize: fontSize + 'rpx',
-                        paddingLeft: showLine ? Number(fontSize) * 0.7 + 'rpx' : 0
-                    },
-                    customStyle
-                )
-            "
-            :class="[
-                {
-                    'u-section--line': showLine
-                },
-                customClass
-            ]"
-        >
-            <view class="u-section__title__icon-wrap u-flex" :style="$u.toStyle(lineStyle)" v-if="showLine">
-                <u-icon
-                    top="0"
-                    name="column-line"
-                    :size="Number(fontSize) * 1.25"
-                    bold
-                    :color="lineColor ? lineColor : color"
-                ></u-icon>
-            </view>
-            <text class="u-flex u-section__title__text">{{ title }}</text>
-        </view>
-        <view
-            class="u-section__right-info"
-            v-if="right || $slots.right"
-            :style="{
-                color: subColor
-            }"
-            @tap="rightClick"
-        >
-            <slot name="right" v-if="$slots.right" />
-            <template v-else>
-                {{ subTitle }}
-                <view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
-                    <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
-                </view>
-            </template>
-        </view>
-    </view>
-</template>
-
-<script lang="ts">
-export default {
-    name: 'u-section',
-    options: {
-        addGlobalClass: true,
-        // #ifndef MP-TOUTIAO
-        virtualHost: true,
-        // #endif
-        styleIsolation: 'shared'
-    }
-};
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { SectionProps } from './types';
-import { $u } from '../..';
-
-/**
- * section 查看更多
- * @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
- * @tutorial https://uviewpro.cn/zh/components/section.html
- * @property {String} title 左边主标题
- * @property {String} subTitle 右边副标题（默认更多）
- * @property {Boolean} right 是否显示右边的内容（默认true）
- * @property {Boolean} showLine 是否显示左边的竖条（默认true）
- * @property {Boolean} arrow 是否显示右边箭头（默认true）
- * @property {String|Number} fontSize 主标题的字体大小（默认28）
- * @property {Boolean} bold 主标题是否加粗（默认true）
- * @property {String} color 主标题颜色（默认#303133）
- * @property {String} subColor 右边副标题颜色（默认#909399）
- * @property {String} lineColor 左边竖线的颜色
- * @event click 组件右侧的内容被点击时触发，用于跳转"更多"
- * @example <u-section title="今日热门" :right="false"></u-section>
- */
-
-const props = defineProps(SectionProps);
-
-const emit = defineEmits(['click']);
-
-/**
- * 左边竖条的样式
- * @description 由于安卓和iOS的，需要稍微调整绝对定位的top值，才能让左边的竖线和右边的文字垂直居中
- */
-const lineStyle = computed(() => {
-    let isIOS = $u.os && $u.os() === 'ios';
-    return {
-        // 由于竖线为字体图标，具有比实际线宽更宽的宽度，所以也需要根据字体打下动态调整
-        left: -(Number(props.fontSize) * 0.9) + 'rpx',
-        top: -(Number(props.fontSize) * (isIOS ? 0.14 : 0.15)) + 'rpx'
-    };
-});
-
-/**
- * 组件右侧的内容被点击时触发，用于跳转"更多"
- */
-function rightClick() {
-    emit('click');
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-
-.u-section {
-    @include vue-flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-
-    &__title {
-        position: relative;
-        font-size: 28rpx;
-        padding-left: 20rpx;
-        @include vue-flex;
-        align-items: center;
-
-        &__icon-wrap {
-            position: absolute;
-        }
-
-        &__text {
-            line-height: 1;
-        }
-    }
-
-    &__right-info {
-        color: $u-tips-color;
-        font-size: 26rpx;
-        @include vue-flex;
-        align-items: center;
-
-        &__icon-arrow {
-            margin-left: 6rpx;
-        }
-    }
-}
-</style>
+<template>
+    <view class="u-section">
+        <view
+            class="u-section__title"
+            :style="
+                $u.toStyle(
+                    {
+                        fontWeight: bold ? 'bold' : 'normal',
+                        color: color,
+                        fontSize: fontSize + 'rpx',
+                        paddingLeft: showLine ? Number(fontSize) * 0.7 + 'rpx' : 0
+                    },
+                    customStyle
+                )
+            "
+            :class="[
+                {
+                    'u-section--line': showLine
+                },
+                customClass
+            ]"
+        >
+            <view class="u-section__title__icon-wrap u-flex" :style="$u.toStyle(lineStyle)" v-if="showLine">
+                <u-icon
+                    top="0"
+                    name="column-line"
+                    :size="Number(fontSize) * 1.25"
+                    bold
+                    :color="lineColor ? lineColor : color"
+                ></u-icon>
+            </view>
+            <text class="u-flex u-section__title__text">{{ title }}</text>
+        </view>
+        <view
+            class="u-section__right-info"
+            v-if="right || $slots.right"
+            :style="{
+                color: subColor
+            }"
+            @tap="rightClick"
+        >
+            <slot name="right" v-if="$slots.right" />
+            <template v-else>
+                {{ subTitle }}
+                <view class="u-section__right-info__icon-arrow u-flex" v-if="arrow">
+                    <u-icon name="arrow-right" size="24" :color="subColor"></u-icon>
+                </view>
+            </template>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-section',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SectionProps } from './types';
+import { $u } from '../..';
+
+/**
+ * section 查看更多
+ * @description 该组件一般用于分类信息有很多，但是限于篇幅只能列出一部分，让用户通过"查看更多"获得更多信息的场景，实际效果见演示。
+ * @tutorial https://uviewpro.cn/zh/components/section.html
+ * @property {String} title 左边主标题
+ * @property {String} subTitle 右边副标题（默认更多）
+ * @property {Boolean} right 是否显示右边的内容（默认true）
+ * @property {Boolean} showLine 是否显示左边的竖条（默认true）
+ * @property {Boolean} arrow 是否显示右边箭头（默认true）
+ * @property {String|Number} fontSize 主标题的字体大小（默认28）
+ * @property {Boolean} bold 主标题是否加粗（默认true）
+ * @property {String} color 主标题颜色（默认#303133）
+ * @property {String} subColor 右边副标题颜色（默认#909399）
+ * @property {String} lineColor 左边竖线的颜色
+ * @event click 组件右侧的内容被点击时触发，用于跳转"更多"
+ * @example <u-section title="今日热门" :right="false"></u-section>
+ */
+
+const props = defineProps(SectionProps);
+
+const emit = defineEmits(['click']);
+
+/**
+ * 左边竖条的样式
+ * @description 由于安卓和iOS的，需要稍微调整绝对定位的top值，才能让左边的竖线和右边的文字垂直居中
+ */
+const lineStyle = computed(() => {
+    let isIOS = $u.os && $u.os() === 'ios';
+    return {
+        // 由于竖线为字体图标，具有比实际线宽更宽的宽度，所以也需要根据字体打下动态调整
+        left: -(Number(props.fontSize) * 0.9) + 'rpx',
+        top: -(Number(props.fontSize) * (isIOS ? 0.14 : 0.15)) + 'rpx'
+    };
+});
+
+/**
+ * 组件右侧的内容被点击时触发，用于跳转"更多"
+ */
+function rightClick() {
+    emit('click');
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+
+.u-section {
+    @include vue-flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    &__title {
+        position: relative;
+        font-size: 28rpx;
+        padding-left: 20rpx;
+        @include vue-flex;
+        align-items: center;
+
+        &__icon-wrap {
+            position: absolute;
+        }
+
+        &__text {
+            line-height: 1;
+        }
+    }
+
+    &__right-info {
+        color: $u-tips-color;
+        font-size: 26rpx;
+        @include vue-flex;
+        align-items: center;
+
+        &__icon-arrow {
+            margin-left: 6rpx;
+        }
+    }
+}
+</style>

package/components/u-select/types.ts

@@ -1,45 +1,45 @@
-import type { ExtractPropTypes, PropType } from 'vue';
-import type { SelectListItem, SelectMode } from '../../types/global';
-import { baseProps } from '../common/props';
-
-/**
- * SelectProps 列选择器 props 类型定义
- * @description 用于单列、多列、多列联动的选择场景
- */
-export const SelectProps = {
-    ...baseProps,
-    /** 列数据 */
-    list: { type: Array as PropType<SelectListItem[] | SelectListItem[][]>, default: () => [] },
-    /** 是否显示边框 */
-    border: { type: Boolean, default: true },
-    /** 通过双向绑定控制组件的弹出与收起 */
-    modelValue: { type: Boolean, default: false },
-    /** "取消"按钮的颜色 */
-    cancelColor: { type: String, default: '#606266' },
-    /** "确定"按钮的颜色 */
-    confirmColor: { type: String, default: '#2979ff' },
-    /** 弹出的z-index值 */
-    zIndex: { type: [String, Number] as PropType<string | number>, default: 0 },
-    /** 是否开启底部安全区适配 */
-    safeAreaInsetBottom: { type: Boolean, default: false },
-    /** 是否允许通过点击遮罩关闭Picker */
-    maskCloseAble: { type: Boolean, default: true },
-    /** 提供的默认选中的下标 */
-    defaultValue: { type: Array as PropType<number[]>, default: () => [0] },
-    /** 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 */
-    mode: { type: String as PropType<SelectMode>, default: 'single-column' },
-    /** 自定义value属性名 */
-    valueName: { type: String, default: 'value' },
-    /** 自定义label属性名 */
-    labelName: { type: String, default: 'label' },
-    /** 自定义多列联动模式的children属性名 */
-    childName: { type: String, default: 'children' },
-    /** 顶部标题 */
-    title: { type: String, default: '' },
-    /** 取消按钮的文字 */
-    cancelText: { type: String, default: '取消' },
-    /** 确认按钮的文字 */
-    confirmText: { type: String, default: '确认' }
-};
-
-export type SelectProps = ExtractPropTypes<typeof SelectProps>;
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SelectListItem, SelectMode } from '../../types/global';
+import { baseProps } from '../common/props';
+
+/**
+ * SelectProps 列选择器 props 类型定义
+ * @description 用于单列、多列、多列联动的选择场景
+ */
+export const SelectProps = {
+    ...baseProps,
+    /** 列数据 */
+    list: { type: Array as PropType<SelectListItem[] | SelectListItem[][]>, default: () => [] },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: { type: Boolean, default: false },
+    /** "取消"按钮的颜色 */
+    cancelColor: { type: String, default: '#606266' },
+    /** "确定"按钮的颜色 */
+    confirmColor: { type: String, default: '#2979ff' },
+    /** 弹出的z-index值 */
+    zIndex: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否允许通过点击遮罩关闭Picker */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 提供的默认选中的下标 */
+    defaultValue: { type: Array as PropType<number[]>, default: () => [0] },
+    /** 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 */
+    mode: { type: String as PropType<SelectMode>, default: 'single-column' },
+    /** 自定义value属性名 */
+    valueName: { type: String, default: 'value' },
+    /** 自定义label属性名 */
+    labelName: { type: String, default: 'label' },
+    /** 自定义多列联动模式的children属性名 */
+    childName: { type: String, default: 'children' },
+    /** 顶部标题 */
+    title: { type: String, default: '' },
+    /** 取消按钮的文字 */
+    cancelText: { type: String, default: '取消' },
+    /** 确认按钮的文字 */
+    confirmText: { type: String, default: '确认' }
+};
+
+export type SelectProps = ExtractPropTypes<typeof SelectProps>;