uview-pro 0.0.7 → 0.0.8

package/components/u-modal/u-modal.vue

@@ -48,6 +48,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, useSlots } from 'vue';
+import { ModalProps } from './types';
 
 defineOptions({
     name: 'u-modal'
@@ -83,92 +84,7 @@ defineOptions({
  * @example <u-modal :src="title" :content="content"></u-modal>
  */
 
-const props = defineProps({
-    /**
-     * 是否显示模态框
-     */
-    modelValue: { type: Boolean, default: false },
-    /**
-     * 层级z-index
-     */
-    zIndex: { type: [Number, String], default: '' },
-    /**
-     * 标题
-     */
-    title: { type: String, default: '提示' },
-    /**
-     * 弹窗宽度，可以是数值(rpx)，百分比，auto等
-     */
-    width: { type: [Number, String], default: 600 },
-    /**
-     * 弹窗内容
-     */
-    content: { type: String, default: '内容' },
-    /**
-     * 是否显示标题
-     */
-    showTitle: { type: Boolean, default: true },
-    /**
-     * 是否显示确认按钮
-     */
-    showConfirmButton: { type: Boolean, default: true },
-    /**
-     * 是否显示取消按钮
-     */
-    showCancelButton: { type: Boolean, default: false },
-    /**
-     * 确认文案
-     */
-    confirmText: { type: String, default: '确认' },
-    /**
-     * 取消文案
-     */
-    cancelText: { type: String, default: '取消' },
-    /**
-     * 确认按钮颜色
-     */
-    confirmColor: { type: String, default: '#2979ff' },
-    /**
-     * 取消文字颜色
-     */
-    cancelColor: { type: String, default: '#606266' },
-    /**
-     * 圆角值
-     */
-    borderRadius: { type: [Number, String], default: 16 },
-    /**
-     * 标题的样式
-     */
-    titleStyle: { type: Object, default: () => ({}) },
-    /**
-     * 内容的样式
-     */
-    contentStyle: { type: Object, default: () => ({}) },
-    /**
-     * 取消按钮的样式
-     */
-    cancelStyle: { type: Object, default: () => ({}) },
-    /**
-     * 确定按钮的样式
-     */
-    confirmStyle: { type: Object, default: () => ({}) },
-    /**
-     * 是否开启缩放效果
-     */
-    zoom: { type: Boolean, default: true },
-    /**
-     * 是否异步关闭，只对确定按钮有效
-     */
-    asyncClose: { type: Boolean, default: false },
-    /**
-     * 是否允许点击遮罩关闭modal
-     */
-    maskCloseAble: { type: Boolean, default: false },
-    /**
-     * 给一个负的margin-top，往上偏移，避免和键盘重合的情况
-     */
-    negativeTop: { type: [String, Number], default: 0 }
-});
+const props = defineProps(ModalProps);
 const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);
 const slots = useSlots();
 

package/components/u-navbar/types.ts

@@ -0,0 +1,103 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-navbar 组件 props 类型定义
+ * @description 自定义导航栏，支持多种样式
+ */
+export const NavbarProps = {
+    /** 导航栏高度，单位px，非rpx */
+    height: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** 返回箭头的颜色 */
+    backIconColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 左边返回的图标 */
+    backIconName: {
+        type: String,
+        default: 'nav-back'
+    },
+    /** 左边返回图标的大小，rpx */
+    backIconSize: {
+        type: [String, Number] as PropType<string | number>,
+        default: '44'
+    },
+    /** 返回的文字提示 */
+    backText: {
+        type: String,
+        default: ''
+    },
+    /** 返回的文字的 样式 */
+    backTextStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({ color: '#606266' })
+    },
+    /** 导航栏标题 */
+    title: {
+        type: String,
+        default: ''
+    },
+    /** 标题的宽度，单位rpx */
+    titleWidth: {
+        type: [String, Number] as PropType<string | number>,
+        default: '250'
+    },
+    /** 标题的颜色 */
+    titleColor: {
+        type: String,
+        default: '#606266'
+    },
+    /** 标题字体是否加粗 */
+    titleBold: {
+        type: Boolean,
+        default: false
+    },
+    /** 标题的字体大小 */
+    titleSize: {
+        type: [String, Number] as PropType<string | number>,
+        default: 32
+    },
+    /** 是否显示导航栏左边返回图标和辅助文字 */
+    isBack: {
+        type: [Boolean, String] as PropType<boolean | string>,
+        default: true
+    },
+    /** 导航栏背景设置 */
+    background: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({ background: '#ffffff' })
+    },
+    /** 导航栏是否固定在顶部 */
+    isFixed: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效 */
+    immersive: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示导航栏的下边框 */
+    borderBottom: {
+        type: Boolean,
+        default: true
+    },
+    /** 固定在顶部时的z-index值 */
+    zIndex: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** 自定义返回逻辑方法 */
+    customBack: {
+        type: Function as PropType<() => void>,
+        default: null
+    }
+};
+
+/**
+ * u-navbar 组件 props 类型
+ */
+export type NavbarProps = ExtractPropTypes<typeof NavbarProps>;

package/components/u-navbar/u-navbar.vue

@@ -41,6 +41,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import { $u } from '../..';
+import { NavbarProps } from './types';
 
 defineOptions({ name: 'u-navbar' });
 
@@ -67,96 +68,7 @@ defineOptions({ name: 'u-navbar' });
  * @property {Boolean} border-bottom 导航栏底部是否显示下边框，如定义了较深的背景颜色，可取消此值（默认true）
  * @example <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar>
  */
-const props = defineProps({
-    // 导航栏高度，单位px，非rpx
-    height: {
-        type: [String, Number],
-        default: ''
-    },
-    // 返回箭头的颜色
-    backIconColor: {
-        type: String,
-        default: '#606266'
-    },
-    // 左边返回的图标
-    backIconName: {
-        type: String,
-        default: 'nav-back'
-    },
-    // 左边返回图标的大小，rpx
-    backIconSize: {
-        type: [String, Number],
-        default: '44'
-    },
-    // 返回的文字提示
-    backText: {
-        type: String,
-        default: ''
-    },
-    // 返回的文字的 样式
-    backTextStyle: {
-        type: Object,
-        default: () => ({ color: '#606266' })
-    },
-    // 导航栏标题
-    title: {
-        type: String,
-        default: ''
-    },
-    // 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
-    titleWidth: {
-        type: [String, Number],
-        default: '250'
-    },
-    // 标题的颜色
-    titleColor: {
-        type: String,
-        default: '#606266'
-    },
-    // 标题字体是否加粗
-    titleBold: {
-        type: Boolean,
-        default: false
-    },
-    // 标题的字体大小
-    titleSize: {
-        type: [String, Number],
-        default: 32
-    },
-    isBack: {
-        type: [Boolean, String],
-        default: true
-    },
-    // 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
-    background: {
-        type: Object,
-        default: () => ({ background: '#ffffff' })
-    },
-    // 导航栏是否固定在顶部
-    isFixed: {
-        type: Boolean,
-        default: true
-    },
-    // 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
-    immersive: {
-        type: Boolean,
-        default: false
-    },
-    // 是否显示导航栏的下边框
-    borderBottom: {
-        type: Boolean,
-        default: true
-    },
-    zIndex: {
-        type: [String, Number],
-        default: ''
-    },
-    // 自定义返回逻辑
-    customBack: {
-        type: Function,
-        default: null
-    }
-});
+const props = defineProps(NavbarProps);
 // 获取系统状态栏的高度
 const systemInfo = uni.getSystemInfoSync();
 let menuButtonInfo: any = {};

package/components/u-no-network/types.ts

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-no-network 组件 props 类型定义
+ * @description 无网络提示，支持自定义图片、提示语、z-index
+ */
+export const NoNetworkProps = {
+    /** 页面文字提示 */
+    tips: {
+        type: String,
+        default: '哎呀，网络信号丢失'
+    },
+    /** 一个z-index值，用于设置没有网络这个组件的层次 */
+    zIndex: {
+        type: [Number, String] as PropType<number | string>,
+        default: ''
+    },
+    /** 没有网络的图片提示 */
+    image: {
+        type: String,
+        default: ''
+    }
+};
+
+/**
+ * u-no-network 组件 props 类型
+ */
+export type NoNetworkProps = ExtractPropTypes<typeof NoNetworkProps>;

package/components/u-no-network/u-no-network.vue

@@ -18,6 +18,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { imageSrc } from './image';
 import { $u } from '../..';
+import { NoNetworkProps } from './types';
 
 defineOptions({ name: 'u-no-network' });
 
@@ -32,29 +33,7 @@ defineOptions({ name: 'u-no-network' });
  * @example <u-no-network></u-no-network>
  */
 
-const props = defineProps({
-    /**
-     * 页面文字提示
-     */
-    tips: {
-        type: String,
-        default: '哎呀，网络信号丢失'
-    },
-    /**
-     * 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖
-     */
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    },
-    /**
-     * image 没有网络的图片提示
-     */
-    image: {
-        type: String,
-        default: imageSrc
-    }
-});
+const props = defineProps(NoNetworkProps);
 
 const isConnected = ref(true); // 是否有网络连接
 const networkType = ref<string>('none'); // 网络类型

package/components/u-notice-bar/types.ts

@@ -0,0 +1,111 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { Direction, PlayState, ThemeType } from '../../types/global';
+
+/**
+ * NoticeBarProps 滚动通知 props 类型定义
+ * @description 滚动通告场景，有多种模式可供选择
+ */
+export const NoticeBarProps = {
+    /** 滚动内容，数组形式 */
+    list: {
+        type: Array as PropType<string[]>,
+        default: () => []
+    },
+    /** 显示的主题，success|error|primary|info|warning */
+    type: {
+        type: String as PropType<ThemeType>,
+        default: 'warning'
+    },
+    /** 是否显示左侧的音量图标 */
+    volumeIcon: {
+        type: Boolean,
+        default: true
+    },
+    /** 音量喇叭的大小 */
+    volumeSize: {
+        type: [Number, String] as PropType<number | string>,
+        default: 34
+    },
+    /** 是否显示右侧的右箭头图标 */
+    moreIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否显示右侧的关闭图标 */
+    closeIcon: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否自动播放 */
+    autoplay: {
+        type: Boolean,
+        default: true
+    },
+    /** 文字颜色，各图标也会使用文字颜色 */
+    color: {
+        type: String,
+        default: ''
+    },
+    /** 背景颜色 */
+    bgColor: {
+        type: String,
+        default: ''
+    },
+    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
+    mode: {
+        type: String as PropType<Direction>,
+        default: 'horizontal'
+    },
+    /** 是否显示 */
+    show: {
+        type: Boolean,
+        default: true
+    },
+    /** 字体大小，单位rpx */
+    fontSize: {
+        type: [Number, String] as PropType<number | string>,
+        default: 28
+    },
+    /** 滚动一个周期的时间长，单位ms */
+    duration: {
+        type: [Number, String] as PropType<number | string>,
+        default: 2000
+    },
+    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
+    speed: {
+        type: [Number, String] as PropType<number | string>,
+        default: 160
+    },
+    /** 水平滚动时，是否采用衔接形式滚动 */
+    isCircular: {
+        type: Boolean,
+        default: true
+    },
+    /** 播放状态，play-播放，paused-暂停 */
+    playState: {
+        type: String as PropType<PlayState>,
+        default: 'play'
+    },
+    /** 是否禁止用手滑动切换 */
+    disableTouch: {
+        type: Boolean,
+        default: true
+    },
+    /** 滚动通知设置圆角 */
+    borderRadius: {
+        type: [Number, String] as PropType<number | string>,
+        default: 0
+    },
+    /** 通知的边距 */
+    padding: {
+        type: [Number, String] as PropType<number | string>,
+        default: '18rpx 24rpx'
+    },
+    /** list列表为空时，是否显示组件 */
+    noListHidden: {
+        type: Boolean,
+        default: true
+    }
+};
+
+export type NoticeBarProps = ExtractPropTypes<typeof NoticeBarProps>;

package/components/u-notice-bar/u-notice-bar.vue

@@ -47,6 +47,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { NoticeBarProps } from './types';
 
 // 组件名称声明
 defineOptions({ name: 'u-notice-bar' });
@@ -82,108 +83,7 @@ defineOptions({ name: 'u-notice-bar' });
  * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
  */
 
-const props = defineProps({
-    /** 滚动内容，数组形式 */
-    list: {
-        type: Array as () => string[],
-        default: () => []
-    },
-    /** 显示的主题，success|error|primary|info|warning */
-    type: {
-        type: String,
-        default: 'warning'
-    },
-    /** 是否显示左侧的音量图标 */
-    volumeIcon: {
-        type: Boolean,
-        default: true
-    },
-    /** 音量喇叭的大小 */
-    volumeSize: {
-        type: [Number, String],
-        default: 34
-    },
-    /** 是否显示右侧的右箭头图标 */
-    moreIcon: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否显示右侧的关闭图标 */
-    closeIcon: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否自动播放 */
-    autoplay: {
-        type: Boolean,
-        default: true
-    },
-    /** 文字颜色，各图标也会使用文字颜色 */
-    color: {
-        type: String,
-        default: ''
-    },
-    /** 背景颜色 */
-    bgColor: {
-        type: String,
-        default: ''
-    },
-    /** 滚动方向，horizontal-水平滚动，vertical-垂直滚动 */
-    mode: {
-        type: String,
-        default: 'horizontal'
-    },
-    /** 是否显示 */
-    show: {
-        type: Boolean,
-        default: true
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [Number, String],
-        default: 28
-    },
-    /** 滚动一个周期的时间长，单位ms */
-    duration: {
-        type: [Number, String],
-        default: 2000
-    },
-    /** 水平滚动时的滚动速度，即每秒滚动多少rpx */
-    speed: {
-        type: [Number, String],
-        default: 160
-    },
-    /** 水平滚动时，是否采用衔接形式滚动 */
-    isCircular: {
-        type: Boolean,
-        default: true
-    },
-    /** 播放状态，play-播放，paused-暂停 */
-    playState: {
-        type: String,
-        default: 'play'
-    },
-    /** 是否禁止用手滑动切换 */
-    disableTouch: {
-        type: Boolean,
-        default: true
-    },
-    /** 滚动通知设置圆角 */
-    borderRadius: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 通知的边距 */
-    padding: {
-        type: [Number, String],
-        default: '18rpx 24rpx'
-    },
-    /** list列表为空时，是否显示组件 */
-    noListHidden: {
-        type: Boolean,
-        default: true
-    }
-});
+const props = defineProps(NoticeBarProps);
 
 const emit = defineEmits<{ (e: 'click', index: number): void; (e: 'close'): void; (e: 'getMore'): void; (e: 'end'): void }>();
 

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

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * NumberBoxProps 步进器 props 类型定义
+ * @description 商城购物选择物品数量，支持正整数、禁用、长按等
+ */
+export const NumberBoxProps = {
+    /** 输入框初始值（默认1） */
+    modelValue: { type: Number, default: 1 },
+    /** 输入框和按钮的背景颜色（默认#F2F3F5） */
+    bgColor: { type: String, default: '#F2F3F5' },
+    /** 用户可输入的最小值（默认0） */
+    min: { type: Number, default: 0 },
+    /** 用户可输入的最大值（默认99999） */
+    max: { type: Number, default: 99999 },
+    /** 步长，每次加或减的值（默认1） */
+    step: { type: Number, default: 1 },
+    /** 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false） */
+    disabled: { type: Boolean, default: false },
+    /** 输入框文字和按钮字体大小，单位rpx（默认26） */
+    size: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 输入框文字和加减按钮图标的颜色（默认#323233） */
+    color: { type: String, default: '#323233' },
+    /** 输入框宽度，单位rpx（默认80） */
+    inputWidth: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** 输入框和按钮的高度，单位rpx（默认50） */
+    inputHeight: { type: [Number, String] as PropType<number | string>, default: 50 },
+    /** 事件回调时用以区分当前发生变化的是哪个输入框 */
+    index: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 是否禁止输入框手动输入值（默认false） */
+    disabledInput: { type: Boolean, default: false },
+    /** 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认100） */
+    cursorSpacing: { type: [Number, String] as PropType<number | string>, default: 100 },
+    /** 是否开启长按连续递增或递减(默认true) */
+    longPress: { type: Boolean, default: true },
+    /** 开启长按触发后，每触发一次需要多久，单位ms(默认250) */
+    pressTime: { type: [Number, String] as PropType<number | string>, default: 250 },
+    /** 是否只能输入大于或等于0的整数(正整数)（默认true） */
+    positiveInteger: { type: Boolean, default: true }
+};
+
+export type NumberBoxProps = ExtractPropTypes<typeof NumberBoxProps>;

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

@@ -48,6 +48,7 @@
 
 <script setup lang="ts">
 import { ref, watch, computed, nextTick } from 'vue';
+import { NumberBoxProps } from './types';
 
 defineOptions({
     name: 'u-number-box'
@@ -79,40 +80,7 @@ defineOptions({
  * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)，对象形式
  * @example <u-number-box :min="1" :max="100"></u-number-box>
  */
-const props = defineProps({
-    /** 输入框初始值（默认1） */
-    modelValue: { type: Number, default: 1 },
-    /** 输入框和按钮的背景颜色（默认#F2F3F5） */
-    bgColor: { type: String, default: '#F2F3F5' },
-    /** 用户可输入的最小值（默认0） */
-    min: { type: Number, default: 0 },
-    /** 用户可输入的最大值（默认99999） */
-    max: { type: Number, default: 99999 },
-    /** 步长，每次加或减的值（默认1） */
-    step: { type: Number, default: 1 },
-    /** 是否禁用操作，禁用后无法加减或手动修改输入框的值（默认false） */
-    disabled: { type: Boolean, default: false },
-    /** 输入框文字和按钮字体大小，单位rpx（默认26） */
-    size: { type: [Number, String], default: 26 },
-    /** 输入框文字和加减按钮图标的颜色（默认#323233） */
-    color: { type: String, default: '#323233' },
-    /** 输入框宽度，单位rpx（默认80） */
-    inputWidth: { type: [Number, String], default: 80 },
-    /** 输入框和按钮的高度，单位rpx（默认50） */
-    inputHeight: { type: [Number, String], default: 50 },
-    /** 事件回调时用以区分当前发生变化的是哪个输入框 */
-    index: { type: [Number, String], default: '' },
-    /** 是否禁止输入框手动输入值（默认false） */
-    disabledInput: { type: Boolean, default: false },
-    /** 指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx（默认100） */
-    cursorSpacing: { type: [Number, String], default: 100 },
-    /** 是否开启长按连续递增或递减(默认true) */
-    longPress: { type: Boolean, default: true },
-    /** 开启长按触发后，每触发一次需要多久，单位ms(默认250) */
-    pressTime: { type: [Number, String], default: 250 },
-    /** 是否只能输入大于或等于0的整数(正整数)（默认true） */
-    positiveInteger: { type: Boolean, default: true }
-});
+const props = defineProps(NumberBoxProps);
 const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus', 'minus', 'plus']);
 
 // 响应式变量