uview-pro 0.0.7 → 0.0.8

package/components/u-select/u-select.vue

@@ -60,6 +60,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
+import { SelectProps } from './types';
 
 defineOptions({
     name: 'u-select'
@@ -87,40 +88,7 @@ defineOptions({
  * @example <u-select v-model="show" :list="list"></u-select>
  */
 
-const props = defineProps({
-    /** 列数据 */
-    list: { type: Array, 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], default: 0 },
-    /** 是否开启底部安全区适配 */
-    safeAreaInsetBottom: { type: Boolean, default: false },
-    /** 是否允许通过点击遮罩关闭Picker */
-    maskCloseAble: { type: Boolean, default: true },
-    /** 提供的默认选中的下标 */
-    defaultValue: { type: Array, default: () => [0] },
-    /** 模式选择，single-column-单列，mutil-column-多列，mutil-column-auto-多列联动 */
-    mode: { type: String, 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: '确认' }
-});
+const props = defineProps(SelectProps);
 const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'click']);
 // 用于列改变时，保存当前的索引，下一次变化时比较得出是哪一列发生了变化
 

package/components/u-skeleton/types.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * SkeletonProps 骨架屏 props 类型定义
+ * @description 骨架屏用于页面数据加载时的占位
+ */
+export const SkeletonProps = {
+    /** 骨架块状元素的背景颜色 */
+    elColor: { type: String, default: '#e5e5e5' },
+    /** 整个骨架屏页面的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 是否显示加载动画 */
+    animation: { type: Boolean, default: false },
+    /** 圆角值，只对类名为u-skeleton-fillet的元素生效 */
+    borderRadius: { type: [String, Number] as PropType<string | number>, default: 10 },
+    /** 是否显示骨架，true-显示，false-隐藏 */
+    loading: { type: Boolean, default: true }
+};
+
+export type SkeletonProps = ExtractPropTypes<typeof SkeletonProps>;

package/components/u-skeleton/u-skeleton.vue

@@ -9,6 +9,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { SkeletonProps } from './types';
 
 defineOptions({ name: 'u-skeleton' });
 
@@ -24,33 +25,7 @@ defineOptions({ name: 'u-skeleton' });
  * @example <u-skeleton :loading="true" :animation="true"></u-skeleton>
  */
 
-const props = defineProps({
-    /** 骨架块状元素的背景颜色 */
-    elColor: {
-        type: String,
-        default: '#e5e5e5'
-    },
-    /** 整个骨架屏页面的背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 是否显示加载动画 */
-    animation: {
-        type: Boolean,
-        default: false
-    },
-    /** 圆角值，只对类名为u-skeleton-fillet的元素生效，为数值，不带单位 */
-    borderRadius: {
-        type: [String, Number],
-        default: 10
-    },
-    /** 是否显示骨架，true-显示，false-隐藏 */
-    loading: {
-        type: Boolean,
-        default: true
-    }
-});
+const props = defineProps(SkeletonProps);
 
 const instance = getCurrentInstance();
 const windowWinth = ref(750); // 骨架屏宽度

package/components/u-slider/types.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * SliderProps 滑块选择器 props 类型定义
+ * @description 滑块选择器，支持自定义样式、步长、禁用等
+ */
+export const SliderProps = {
+    /** 当前进度百分比值，范围0-100 */
+    modelValue: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否禁用滑块 */
+    disabled: { type: Boolean, default: false },
+    /** 滑块宽度，高等于宽，单位rpx */
+    blockWidth: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 最小值 */
+    min: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 最大值 */
+    max: { type: [Number, String] as PropType<number | string>, default: 100 },
+    /** 步进值 */
+    step: { type: [Number, String] as PropType<number | string>, default: 1 },
+    /** 滑块条高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 6 },
+    /** 进度条的激活部分颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 进度条的背景颜色 */
+    inactiveColor: { type: String, default: '#c0c4cc' },
+    /** 滑块的背景颜色 */
+    blockColor: { type: String, default: '#ffffff' },
+    /** 用户对滑块的自定义颜色 */
+    blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type SliderProps = ExtractPropTypes<typeof SliderProps>;

package/components/u-slider/u-slider.vue

@@ -58,68 +58,13 @@
  */
 import { ref, watch, onMounted, useSlots, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { SliderProps } from './types';
 
 defineOptions({ name: 'u-slider' });
 
 const emit = defineEmits(['update:modelValue', 'start', 'moving', 'end']);
 
-const props = defineProps({
-    /** 当前进度百分比值，范围0-100 */
-    modelValue: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 是否禁用滑块 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 滑块宽度，高等于宽，单位rpx */
-    blockWidth: {
-        type: [Number, String],
-        default: 30
-    },
-    /** 最小值 */
-    min: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 最大值 */
-    max: {
-        type: [Number, String],
-        default: 100
-    },
-    /** 步进值 */
-    step: {
-        type: [Number, String],
-        default: 1
-    },
-    /** 滑块条高度，单位rpx */
-    height: {
-        type: [Number, String],
-        default: 6
-    },
-    /** 进度条的激活部分颜色 */
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 进度条的背景颜色 */
-    inactiveColor: {
-        type: String,
-        default: '#c0c4cc'
-    },
-    /** 滑块的背景颜色 */
-    blockColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 用户对滑块的自定义颜色 */
-    blockStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({})
-    }
-});
+const props = defineProps(SliderProps);
 
 const slots = useSlots();
 const instance = getCurrentInstance();

package/components/u-steps/types.ts

@@ -0,0 +1,28 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { StepDirection, StepMode, StepsListItem, ThemeType } from '../../types/global';
+
+/**
+ * StepsProps 步骤条 props 类型定义
+ * @description 步骤条，支持横向/竖向、主题色、激活色等
+ */
+
+export const StepsProps = {
+    /** 步骤条的类型，dot|number */
+    mode: { type: String as PropType<StepMode>, default: 'dot' },
+    /** 步骤条的数据 */
+    list: { type: Array as PropType<StepsListItem[]>, default: () => [] },
+    /** 主题类型, primary|success|info|warning|error */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 当前哪一步是激活的 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 激活步骤的颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 未激活的颜色 */
+    unActiveColor: { type: String, default: '#909399' },
+    /** 自定义图标 */
+    icon: { type: String, default: 'checkmark' },
+    /** step的排列方向，row-横向，column-竖向 */
+    direction: { type: String as PropType<StepDirection>, default: 'row' }
+};
+
+export type StepsProps = ExtractPropTypes<typeof StepsProps>;

package/components/u-steps/u-steps.vue

@@ -22,6 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { StepsProps } from './types';
 
 defineOptions({ name: 'u-steps' });
 
@@ -40,48 +41,7 @@ defineOptions({ name: 'u-steps' });
  * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
  */
 
-const props = defineProps({
-    /** 步骤条的类型，dot|number */
-    mode: {
-        type: String,
-        default: 'dot'
-    },
-    /** 步骤条的数据 */
-    list: {
-        type: Array as () => { name: string }[],
-        default: (): { name: string }[] => []
-    },
-    /** 主题类型, primary|success|info|warning|error */
-    type: {
-        type: String,
-        default: 'primary'
-    },
-    /** 当前哪一步是激活的 */
-    current: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 激活步骤的颜色 */
-    activeColor: {
-        type: String,
-        default: '#2979ff'
-    },
-    /** 未激活的颜色 */
-    unActiveColor: {
-        type: String,
-        default: '#909399'
-    },
-    /** 自定义图标 */
-    icon: {
-        type: String,
-        default: 'checkmark'
-    },
-    /** step的排列方向，row-横向，column-竖向 */
-    direction: {
-        type: String,
-        default: 'row'
-    }
-});
+const props = defineProps(StepsProps);
 
 // 计算属性，计算当前步骤的索引值
 // 如果 current 是字符串，则转换为数字，否则直接使用数字

package/components/u-sticky/types.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * StickyProps 吸顶组件 props 类型定义
+ * @description 吸顶组件，支持自定义吸顶距离、z-index、背景色等
+ */
+export const StickyProps = {
+    /** 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px */
+    offsetTop: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 列表中的索引值 */
+    index: { type: [Number, String] as PropType<number | string>, default: '' },
+    /** 是否开启吸顶功能 */
+    enable: { type: Boolean, default: true },
+    /** h5顶部导航栏的高度 */
+    h5NavHeight: { type: [Number, String] as PropType<number | string>, default: 44 },
+    /** 吸顶区域的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** z-index值 */
+    zIndex: { type: [Number, String] as PropType<number | string>, default: '' }
+};
+
+export type StickyProps = ExtractPropTypes<typeof StickyProps>;

package/components/u-sticky/u-sticky.vue

@@ -27,6 +27,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { StickyProps } from './types';
 
 defineOptions({ name: 'u-sticky' });
 
@@ -44,41 +45,10 @@ defineOptions({ name: 'u-sticky' });
  * @event unfixed 组件取消吸顶时触发
  * @example <u-sticky offset-top="200"><view>塞下秋来风景异，衡阳雁去无留意</view></u-sticky>
  */
+const props = defineProps(StickyProps);
 
 const emit = defineEmits(['fixed', 'unfixed']);
 
-const props = defineProps({
-    /** 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px */
-    offsetTop: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 列表中的索引值 */
-    index: {
-        type: [Number, String],
-        default: ''
-    },
-    /** 是否开启吸顶功能 */
-    enable: {
-        type: Boolean,
-        default: true
-    },
-    /** h5顶部导航栏的高度 */
-    h5NavHeight: {
-        type: [Number, String],
-        default: 44
-    },
-    /** 吸顶区域的背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** z-index值 */
-    zIndex: {
-        type: [Number, String],
-        default: ''
-    }
-});
 const instance = getCurrentInstance();
 const fixed = ref(false);
 const height = ref<'auto' | number>('auto');

package/components/u-subsection/types.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SubsectionListItem, SubsectionMode } from '../../types/global';
+
+/**
+ * SubsectionProps 分段器 props 类型定义
+ * @description 分段器，支持按钮/分段模式、动画、颜色等
+ */
+
+export const SubsectionProps = {
+    /** tab的数据 */
+    list: { type: Array as PropType<Array<string | SubsectionListItem>>, default: () => [] },
+    /** 当前活动的tab的index */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 激活的颜色 */
+    activeColor: { type: String, default: '#303133' },
+    /** 未激活的颜色 */
+    inactiveColor: { type: String, default: '#606266' },
+    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
+    mode: { type: String as PropType<SubsectionMode>, default: 'button' },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 是否开启动画效果 */
+    animation: { type: Boolean, default: true },
+    /** 组件的高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 70 },
+    /** 激活tab的字体是否加粗 */
+    bold: { type: Boolean, default: true },
+    /** mode=button时，组件背景颜色 */
+    bgColor: { type: String, default: '#eeeeef' },
+    /** mode = button时，滑块背景颜色 */
+    buttonColor: { type: String, default: '#ffffff' },
+    /** 在切换分段器的时候，是否让设备震一下 */
+    vibrateShort: { type: Boolean, default: false }
+};
+
+export type SubsectionProps = ExtractPropTypes<typeof SubsectionProps>;

package/components/u-subsection/u-subsection.vue

@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { SubsectionProps } from './types';
 
 defineOptions({ name: 'u-subsection' });
 
@@ -46,68 +47,7 @@ interface ListItem {
     [key: string]: any;
 }
 
-const props = defineProps({
-    /** tab的数据 */
-    list: {
-        type: Array as () => Array<string | ListItem>,
-        default: () => []
-    },
-    /** 当前活动的tab的index */
-    current: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 激活的颜色 */
-    activeColor: {
-        type: String,
-        default: '#303133'
-    },
-    /** 未激活的颜色 */
-    inactiveColor: {
-        type: String,
-        default: '#606266'
-    },
-    /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
-    mode: {
-        type: String,
-        default: 'button'
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [Number, String],
-        default: 28
-    },
-    /** 是否开启动画效果 */
-    animation: {
-        type: Boolean,
-        default: true
-    },
-    /** 组件的高度，单位rpx */
-    height: {
-        type: [Number, String],
-        default: 70
-    },
-    /** 激活tab的字体是否加粗 */
-    bold: {
-        type: Boolean,
-        default: true
-    },
-    /** mode=button时，组件背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#eeeeef'
-    },
-    /** mode = button时，滑块背景颜色 */
-    buttonColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 在切换分段器的时候，是否让设备震一下 */
-    vibrateShort: {
-        type: Boolean,
-        default: false
-    }
-});
+const props = defineProps(SubsectionProps);
 
 const emit = defineEmits<{ (e: 'change', index: number): void }>();
 

package/components/u-swipe-action/types.ts

@@ -0,0 +1,50 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SwipeActionOption } from '../../types/global';
+
+/**
+ * swipeAction 左滑单元格 props 类型定义
+ * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+ */
+
+export const SwipeActionProps = {
+    /** index值，用于得知点击删除的是哪个按钮 */
+    index: {
+        type: [Number, String] as PropType<string | number>,
+        default: ''
+    },
+    /** 滑动按钮的宽度，单位为rpx */
+    btnWidth: {
+        type: [String, Number] as PropType<string | number>,
+        default: 180
+    },
+    /** 是否禁止某个action滑动 */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /** 打开或者关闭组件 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 组件背景颜色 */
+    bgColor: {
+        type: String,
+        default: '#ffffff'
+    },
+    /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
+    vibrateShort: {
+        type: Boolean,
+        default: false
+    },
+    /** 按钮操作参数 */
+    options: {
+        type: Array as PropType<SwipeActionOption[]>,
+        default: () => []
+    }
+};
+
+/**
+ * swipeAction 组件 props 类型
+ */
+export type SwipeActionProps = ExtractPropTypes<typeof SwipeActionProps>;

package/components/u-swipe-action/u-swipe-action.vue

@@ -26,6 +26,7 @@
 <script lang="ts" setup>
 import { ref, computed, watch, nextTick, onMounted } from 'vue';
 import { $u } from '../..';
+import { SwipeActionProps } from './types';
 
 defineOptions({ name: 'u-swipe-action' });
 
@@ -45,45 +46,7 @@ defineOptions({ name: 'u-swipe-action' });
  * @event {Function} open 组件触发打开状态时
  * @example <u-swipe-action btn-text="收藏">...</u-swipe-action>
  */
-
-const props = defineProps({
-    /** index值，用于得知点击删除的是哪个按钮 */
-    index: {
-        type: [Number, String],
-        default: ''
-    },
-    /** 滑动按钮的宽度，单位为rpx */
-    btnWidth: {
-        type: [String, Number],
-        default: 180
-    },
-    /** 是否禁止某个action滑动 */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 打开或者关闭组件 */
-    show: {
-        type: Boolean,
-        default: false
-    },
-    /** 组件背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#ffffff'
-    },
-    /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
-    vibrateShort: {
-        type: Boolean,
-        default: false
-    },
-    /** 按钮操作参数 */
-    options: {
-        type: Array as () => Array<{ text: string; style?: Record<string, any> }>,
-        default: () => []
-    }
-});
-
+const props = defineProps(SwipeActionProps);
 const emit = defineEmits(['click', 'close', 'content-click', 'open']);
 
 // 组件内部状态

package/components/u-swiper/types.ts

@@ -0,0 +1,47 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ImgMode, SwiperIndicatorPosition, SwiperMode } from '../../types/global';
+
+/**
+ * SwiperProps 轮播图 props 类型定义
+ * @description 轮播图，支持多种指示器、3D、自动播放等
+ */
+export const SwiperProps = {
+    /** 轮播数据列表，数组对象 */
+    list: { type: Array as PropType<Array<Record<string, any>>>, default: () => [] },
+    /** 是否显示标题 */
+    title: { type: Boolean, default: false },
+    /** 指示器配置对象 */
+    indicator: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 圆角，单位rpx */
+    borderRadius: { type: [Number, String] as PropType<number | string>, default: 8 },
+    /** 自动切换时间间隔，单位ms */
+    interval: { type: [String, Number] as PropType<number | string>, default: 3000 },
+    /** 指示器类型，round/dot/line等 */
+    mode: { type: String as PropType<SwiperMode>, default: 'round' },
+    /** 轮播高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 250 },
+    /** 指示器位置 */
+    indicatorPos: { type: String as PropType<SwiperIndicatorPosition>, default: 'bottomCenter' },
+    /** 是否开启3D效果 */
+    effect3d: { type: Boolean, default: false },
+    /** 3D模式下前一项的边距，单位rpx */
+    effect3dPreviousMargin: { type: [Number, String] as PropType<number | string>, default: 50 },
+    /** 是否自动播放 */
+    autoplay: { type: Boolean, default: true },
+    /** 切换动画时长，单位ms */
+    duration: { type: [Number, String] as PropType<number | string>, default: 500 },
+    /** 是否循环播放 */
+    circular: { type: Boolean, default: true },
+    /** 图片裁剪模式 */
+    imgMode: { type: String as PropType<ImgMode>, default: 'aspectFill' },
+    /** 轮播项对象的图片字段名 */
+    name: { type: String, default: 'image' },
+    /** 轮播背景色 */
+    bgColor: { type: String, default: '#f3f4f6' },
+    /** 当前激活项索引 */
+    current: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 标题样式对象 */
+    titleStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type SwiperProps = ExtractPropTypes<typeof SwiperProps>;