uview-pro 0.0.7 → 0.0.8

package/components/u-number-keyboard/types.ts

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { NumberKeyboardMode } from '../../types/global';
+
+/**
+ * NumberKeyboardProps 数字/身份证键盘 props 类型定义
+ * @description 支持数字、身份证、带小数点等多种模式，支持乱序，支持长按退格。
+ */
+export const NumberKeyboardProps = {
+    /** 键盘的类型，number-数字键盘，card-身份证键盘 */
+    mode: {
+        type: String as PropType<NumberKeyboardMode>,
+        default: 'number'
+    },
+    /** 是否显示键盘的"."符号 */
+    dotEnabled: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否打乱键盘按键的顺序 */
+    random: {
+        type: Boolean,
+        default: false
+    }
+};
+
+export type NumberKeyboardProps = ExtractPropTypes<typeof NumberKeyboardProps>;

package/components/u-number-keyboard/u-number-keyboard.vue

@@ -25,6 +25,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { $u } from '../..';
+import { NumberKeyboardProps } from './types';
 
 defineOptions({
     name: 'u-number-keyboard'
@@ -39,15 +40,8 @@ defineOptions({
  * @event {Function} change 按键被点击
  * @event {Function} backspace 退格键被点击
  */
+const props = defineProps(NumberKeyboardProps);
 
-const props = defineProps({
-    /** 键盘的类型，number-数字键盘，card-身份证键盘 */
-    mode: { type: String, default: 'number' },
-    /** 是否显示键盘的"."符号 */
-    dotEnabled: { type: Boolean, default: true },
-    /** 是否打乱键盘按键的顺序 */
-    random: { type: Boolean, default: false }
-});
 const emit = defineEmits(['change', 'backspace']);
 
 const backspace = 'backspace'; // 退格键内容

package/components/u-picker/types.ts

@@ -0,0 +1,111 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { PickerMode, PickerParams } from '../../types/global';
+
+/**
+ * PickerProps 选择器 props 类型定义
+ * @description 支持时间、地区、单列、多列等多种模式
+ */
+export const PickerProps = {
+    /** picker中需要显示的参数 */
+    params: {
+        type: Object as PropType<PickerParams>,
+        default: () => ({ timestamp: true })
+    },
+    /** 当mode=selector或者mode=multiSelector时，提供的数组 */
+    range: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    /** 当mode=selector或者mode=multiSelector时，提供的默认选中的下标 */
+    defaultSelector: {
+        type: Array as PropType<any[]>,
+        default: () => [0]
+    },
+    /** 当 range 是一个 Array<Object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 */
+    rangeKey: {
+        type: String,
+        default: ''
+    },
+    /** 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式 */
+    mode: {
+        type: String as PropType<PickerMode>,
+        default: 'time'
+    },
+    /** 年份开始时间 */
+    startYear: {
+        type: [String, Number] as PropType<number | string>,
+        default: 1950
+    },
+    /** 年份结束时间 */
+    endYear: {
+        type: [String, Number] as PropType<number | string>,
+        default: 2050
+    },
+    /** "取消"按钮的颜色 */
+    cancelColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** "确定"按钮的颜色 */
+    confirmColor: {
+        type: String,
+        default: '#2979ff'
+    },
+    /** 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02 */
+    defaultTime: {
+        type: String,
+        default: ''
+    },
+    /** 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"] */
+    defaultRegion: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    /** 时间模式时，是否显示后面的年月日中文提示 */
+    showTimeTag: {
+        type: Boolean,
+        default: true
+    },
+    /** 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"] */
+    areaCode: {
+        type: Array as PropType<any[]>,
+        default: () => []
+    },
+    /** 是否开启底部安全区适配 */
+    safeAreaInsetBottom: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否允许通过点击遮罩关闭Picker */
+    maskCloseAble: {
+        type: Boolean,
+        default: true
+    },
+    /** 通过双向绑定控制组件的弹出与收起 */
+    modelValue: {
+        type: [Boolean, String, Number, Array, Object] as PropType<any>,
+        default: false
+    },
+    /** 弹出的z-index值 */
+    zIndex: {
+        type: [String, Number] as PropType<number | string>,
+        default: 0
+    },
+    /** 顶部标题 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /** 取消按钮的文字 */
+    cancelText: {
+        type: String,
+        default: '取消'
+    },
+    /** 确认按钮的文字 */
+    confirmText: {
+        type: String,
+        default: '确认'
+    }
+};
+
+export type PickerProps = ExtractPropTypes<typeof PickerProps>;

package/components/u-picker/u-picker.vue

@@ -106,6 +106,7 @@ import { ref, computed, watch, onMounted, nextTick } from 'vue';
 import provinces from '../../libs/util/province';
 import citys from '../../libs/util/city';
 import areas from '../../libs/util/area';
+import { PickerProps } from './types';
 
 defineOptions({
     name: 'u-picker'
@@ -137,179 +138,7 @@ defineOptions({
  * @event {Function} cancel 点击取消按钮，返回当前选择的值
  * @example <u-picker v-model="show" mode="time"></u-picker>
  */
-const props = defineProps({
-    /**
-     * picker中需要显示的参数
-     * @default { year: true, month: true, day: true, hour: false, minute: false, second: false, province: true, city: true, area: true, timestamp: true }
-     */
-    params: {
-        type: Object,
-        default: () => ({
-            year: true,
-            month: true,
-            day: true,
-            hour: false,
-            minute: false,
-            second: false,
-            province: true,
-            city: true,
-            area: true,
-            timestamp: true
-        })
-    },
-    /**
-     * 当mode=selector或者mode=multiSelector时，提供的数组
-     * @default []
-     */
-    range: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 当mode=selector或者mode=multiSelector时，提供的默认选中的下标
-     * @default [0]
-     */
-    defaultSelector: {
-        type: Array,
-        default: () => [0]
-    },
-    /**
-     * 当 range 是一个 Array<Object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
-     * @default ''
-     */
-    rangeKey: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 模式选择，region-地区类型，time-时间类型，selector-单列模式，multiSelector-多列模式
-     * @default 'time'
-     */
-    mode: {
-        type: String,
-        default: 'time'
-    },
-    /**
-     * 年份开始时间
-     * @default 1950
-     */
-    startYear: {
-        type: [String, Number],
-        default: 1950
-    },
-    /**
-     * 年份结束时间
-     * @default 2050
-     */
-    endYear: {
-        type: [String, Number],
-        default: 2050
-    },
-    /**
-     * "取消"按钮的颜色
-     * @default '#606266'
-     */
-    cancelColor: {
-        type: String,
-        default: '#606266'
-    },
-    /**
-     * "确定"按钮的颜色
-     * @default '#2979ff'
-     */
-    confirmColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    /**
-     * 默认显示的时间，2025-07-02 || 2025-07-02 13:01:00 || 2025/07/02
-     * @default ''
-     */
-    defaultTime: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
-     * @default []
-     */
-    defaultRegion: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 时间模式时，是否显示后面的年月日中文提示
-     * @default true
-     */
-    showTimeTag: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
-     * @default []
-     */
-    areaCode: {
-        type: Array,
-        default: () => []
-    },
-    /**
-     * 是否开启底部安全区适配
-     * @default false
-     */
-    safeAreaInsetBottom: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 是否允许通过点击遮罩关闭Picker
-     * @default true
-     */
-    maskCloseAble: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * 通过双向绑定控制组件的弹出与收起
-     * @default false
-     */
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * 弹出的z-index值
-     * @default 0
-     */
-    zIndex: {
-        type: [String, Number],
-        default: 0
-    },
-    /**
-     * 顶部标题
-     * @default ''
-     */
-    title: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 取消按钮的文字
-     * @default '取消'
-     */
-    cancelText: {
-        type: String,
-        default: '取消'
-    },
-    /**
-     * 确认按钮的文字
-     * @default '确认'
-     */
-    confirmText: {
-        type: String,
-        default: '确认'
-    }
-});
+const props = defineProps(PickerProps);
 
 const popupValue = computed({
     get: () => props.modelValue,
@@ -530,7 +359,7 @@ function setDays() {
     let totalDays = new Date(year.value, month.value, 0).getDate();
     days.value = generateArray(1, totalDays);
     let index = 0;
-    // 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, xxx)做法
+    // 这里不能使用类似setMonths()中的this.valueArr.splice(this.valueArr.length - 1, 1, xxx)做法
     // 因为this.month和this.year变化时，会触发watch中的this.setDays()，导致this.valueArr.length计算有误
     if (props.params.year && props.params.month) index = 2;
     else if (props.params.month) index = 1;

package/components/u-popup/types.ts

@@ -0,0 +1,59 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { PopupCloseIconPos, PopupMode } from '../../types/global';
+
+/**
+ * PopupMode 弹窗弹出方向类型
+ */
+
+/**
+ * PopupProps 弹窗 props 类型定义
+ * @description 弹出层容器，支持多种弹出方向和自定义内容
+ */
+export const PopupProps = {
+    /** 显示状态 */
+    show: { type: Boolean, default: false },
+    /** 弹出方向，left|right|top|bottom|center */
+    mode: { type: String as PropType<PopupMode>, default: 'left' },
+    /** 是否显示遮罩 */
+    mask: { type: Boolean, default: true },
+    /** 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"，或者百分比"50%"，表示由内容撑开高度或者宽度 */
+    length: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    /** 是否开启缩放动画，只在mode=center时有效 */
+    zoom: { type: Boolean, default: true },
+    /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
+    safeAreaInsetBottom: { type: Boolean, default: false },
+    /** 是否可以通过点击遮罩进行关闭 */
+    maskCloseAble: { type: Boolean, default: true },
+    /** 用户自定义样式 */
+    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** v-model 控制弹窗显示 */
+    modelValue: { type: Boolean, default: false },
+    /** 内部参数，解决多层调用报错不能修改props值的问题 */
+    popup: { type: Boolean, default: true },
+    /** 圆角 */
+    borderRadius: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 弹窗z-index */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 是否显示关闭图标 */
+    closeable: { type: Boolean, default: false },
+    /** 关闭图标的名称，只能uView的内置图标 */
+    closeIcon: { type: String, default: 'close' },
+    /** 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 */
+    closeIconPos: { type: String as PropType<PopupCloseIconPos>, default: 'top-right' },
+    /** 关闭图标的颜色 */
+    closeIconColor: { type: String, default: '#909399' },
+    /** 关闭图标的大小，单位rpx */
+    closeIconSize: { type: [String, Number] as PropType<number | string>, default: '30' },
+    /** 弹窗宽度 */
+    width: { type: String, default: '' },
+    /** 弹窗高度 */
+    height: { type: String, default: '' },
+    /** 负top定位，支持rpx/px/百分比 */
+    negativeTop: { type: [String, Number] as PropType<number | string>, default: 0 },
+    /** 遮罩自定义样式 */
+    maskCustomStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 动画时长，单位ms */
+    duration: { type: [String, Number] as PropType<number | string>, default: 250 }
+};
+
+export type PopupProps = ExtractPropTypes<typeof PopupProps>;

package/components/u-popup/u-popup.vue

@@ -48,6 +48,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, nextTick } from 'vue';
 import { $u } from '../..';
+import { PopupProps } from './types';
 
 defineOptions({
     name: 'u-popup'
@@ -77,53 +78,7 @@ defineOptions({
  * @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup>
  */
 
-const props = defineProps({
-    // 显示状态
-    show: { type: Boolean, default: false },
-    // 弹出方向，left|right|top|bottom|center
-    mode: { type: String, default: 'left' },
-    // 是否显示遮罩
-    mask: { type: Boolean, default: true },
-    // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
-    // 或者百分比"50%"，表示由内容撑开高度或者宽度
-    length: { type: [Number, String], default: 'auto' },
-    // 是否开启缩放动画，只在mode=center时有效
-    zoom: { type: Boolean, default: true },
-    // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
-    safeAreaInsetBottom: { type: Boolean, default: false },
-    // 是否可以通过点击遮罩进行关闭
-    maskCloseAble: { type: Boolean, default: true },
-    // 用户自定义样式
-    customStyle: { type: Object, default: () => ({}) },
-    modelValue: { type: Boolean, default: false },
-    // 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
-    // 对v-model双向绑定多层调用造成报错不能修改props值的问题
-    popup: { type: Boolean, default: true },
-    borderRadius: { type: [Number, String], default: 0 },
-    zIndex: { type: [Number, String], default: '' },
-    // 是否显示关闭图标
-    closeable: { type: Boolean, default: false },
-    // 关闭图标的名称，只能uView的内置图标
-    closeIcon: { type: String, default: 'close' },
-    // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
-    closeIconPos: { type: String, default: 'top-right' },
-    // 关闭图标的颜色
-    closeIconColor: { type: String, default: '#909399' },
-    // 关闭图标的大小，单位rpx
-    closeIconSize: { type: [String, Number], default: '30' },
-    // 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto"
-    // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
-    width: { type: String, default: '' },
-    // 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto"
-    // 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数
-    height: { type: String, default: '' },
-    // 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效
-    negativeTop: { type: [String, Number], default: 0 },
-    // 遮罩的样式，一般用于修改遮罩的透明度
-    maskCustomStyle: { type: Object, default: () => ({}) },
-    // 遮罩打开或收起的动画过渡时间，单位ms
-    duration: { type: [String, Number], default: 250 }
-});
+const props = defineProps(PopupProps);
 const emit = defineEmits(['update:modelValue', 'open', 'close']);
 
 // 组件内部状态

package/components/u-radio/types.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Shape } from '../../types/global';
+
+/**
+ * RadioProps 单选框 props 类型定义
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio-group使用
+ */
+export const RadioProps = {
+    /** radio的名称 */
+    name: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 形状，square为方形，circle为圆形 */
+    shape: { type: String as PropType<Shape>, default: '' },
+    /** 是否禁用 */
+    disabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 */
+    activeColor: { type: String, default: '' },
+    /** 图标的大小，单位rpx */
+    iconSize: { type: [String, Number] as PropType<number | string>, default: '' },
+    /** label的字体大小，rpx单位 */
+    labelSize: { type: [String, Number] as PropType<number | string>, default: '' }
+};
+
+export type RadioProps = ExtractPropTypes<typeof RadioProps>;

package/components/u-radio/u-radio.vue

@@ -18,6 +18,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 import { $u } from '../..';
+import { RadioProps } from './types';
 
 defineOptions({
     name: 'u-radio'
@@ -38,22 +39,7 @@ defineOptions({
  * @example <u-radio :label-disabled="false">门掩黄昏，无计留春住</u-radio>
  */
 
-const props = defineProps({
-    /** radio的名称 */
-    name: { type: [String, Number], default: '' },
-    /** 形状，square为方形，circle为原型 */
-    shape: { type: String, default: '' },
-    /** 是否禁用 */
-    disabled: { type: [String, Boolean], default: '' },
-    /** 是否禁止点击提示语选中复选框 */
-    labelDisabled: { type: [String, Boolean], default: '' },
-    /** 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 */
-    activeColor: { type: String, default: '' },
-    /** 图标的大小，单位rpx */
-    iconSize: { type: [String, Number], default: '' },
-    /** label的字体大小，rpx单位 */
-    labelSize: { type: [String, Number], default: '' }
-});
+const props = defineProps(RadioProps);
 
 const emit = defineEmits(['change']);
 

package/components/u-radio-group/types.ts

@@ -0,0 +1,29 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Shape } from '../../types/global';
+
+/**
+ * RadioGroupProps 单选框组 props 类型定义
+ * @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配u-radio使用
+ */
+export const RadioGroupProps = {
+    /** 是否禁用所有单选框 */
+    disabled: { type: Boolean, default: false },
+    /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
+    modelValue: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 选中状态下的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 组件的整体大小 */
+    size: { type: [String, Number] as PropType<number | string>, default: 34 },
+    /** 是否禁止点击提示语选中复选框 */
+    labelDisabled: { type: Boolean, default: false },
+    /** 形状，square为方形，circle为原型 */
+    shape: { type: String as PropType<Shape>, default: 'circle' },
+    /** 图标的大小，单位rpx */
+    iconSize: { type: [String, Number] as PropType<number | string>, default: 20 },
+    /** 每个checkbox占u-checkbox-group的宽度 */
+    width: { type: [String, Number] as PropType<number | string>, default: 'auto' },
+    /** 是否每个checkbox都换行 */
+    wrap: { type: Boolean, default: false }
+};
+
+export type RadioGroupProps = ExtractPropTypes<typeof RadioGroupProps>;

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

@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { ref, provide, watch, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { RadioGroupProps } from './types';
 
 defineOptions({
     name: 'u-radio-group'
@@ -28,26 +29,7 @@ defineOptions({
  * @example <u-radio-group v-model="value"></u-radio-group>
  */
 
-const props = defineProps({
-    /** 是否禁用所有单选框 */
-    disabled: { type: Boolean, default: false },
-    /** 匹配某一个radio组件，如果某个radio的name值等于此值，那么这个radio就被会选中 */
-    modelValue: { type: [String, Number], default: '' },
-    /** 选中状态下的颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 组件的整体大小 */
-    size: { type: [String, Number], default: 34 },
-    /** 是否禁止点击提示语选中复选框 */
-    labelDisabled: { type: Boolean, default: false },
-    /** 形状，square为方形，circle为原型 */
-    shape: { type: String, default: 'circle' },
-    /** 图标的大小，单位rpx */
-    iconSize: { type: [String, Number], default: 20 },
-    /** 每个checkbox占u-checkbox-group的宽度 */
-    width: { type: [String, Number], default: 'auto' },
-    /** 是否每个checkbox都换行 */
-    wrap: { type: Boolean, default: false }
-});
+const props = defineProps(RadioGroupProps);
 
 const emit = defineEmits(['update:modelValue', 'change']);
 

package/components/u-rate/types.ts

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * RateProps 评分组件 props 类型定义
+ * @description 满意度调查、星型评分场景
+ */
+export const RateProps = {
+    /** v-model双向绑定选中的星星数量 */
+    modelValue: { type: [Number, String] as PropType<number | string>, default: -1 },
+    /** 要显示的星星数量 */
+    count: { type: [Number, String] as PropType<number | string>, default: 5 },
+    /** 当前需要默认选中的星星(选中的个数) */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否不可选中 */
+    disabled: { type: Boolean, default: false },
+    /** 星星的大小，单位rpx */
+    size: { type: [Number, String] as PropType<number | string>, default: 32 },
+    /** 未选中时的颜色 */
+    inactiveColor: { type: String, default: '#b2b2b2' },
+    /** 选中的颜色 */
+    activeColor: { type: String, default: '#FA3534' },
+    /** 星星之间的间距，单位rpx */
+    gutter: { type: [Number, String] as PropType<number | string>, default: 10 },
+    /** 最少能选择的星星个数 */
+    minCount: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否允许半星 */
+    allowHalf: { type: Boolean, default: false },
+    /** 选中时的图标(星星) */
+    activeIcon: { type: String, default: 'star-fill' },
+    /** 未选中时的图标(星星) */
+    inactiveIcon: { type: String, default: 'star' },
+    /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+    customPrefix: { type: String, default: 'uicon' },
+    /** 分段颜色 */
+    colors: { type: Array as PropType<string[]>, default: () => [] },
+    /** 分段图标 */
+    icons: { type: Array as PropType<string[]>, default: () => [] }
+};
+
+export type RateProps = ExtractPropTypes<typeof RateProps>;