uview-pro 0.0.7 → 0.0.8

package/components/u-count-down/types.ts

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-count-down 倒计时 Props
+ * @description 该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。
+ */
+export const CountDownProps = {
+    /** 倒计时的时间，秒为单位 */
+    timestamp: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否自动开始倒计时 */
+    autoplay: { type: Boolean, default: true },
+    /** 分隔符 */
+    separator: { type: String, default: 'colon' },
+    /** 分隔符的大小，单位rpx */
+    separatorSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 分隔符颜色 */
+    separatorColor: { type: String, default: '#303133' },
+    /** 字体颜色 */
+    color: { type: String, default: '#303133' },
+    /** 字体大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 30 },
+    /** 背景颜色 */
+    bgColor: { type: String, default: '#fff' },
+    /** 数字框高度，单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    /** 是否显示数字框 */
+    showBorder: { type: Boolean, default: false },
+    /** 边框颜色 */
+    borderColor: { type: String, default: '#303133' },
+    /** 是否显示秒 */
+    showSeconds: { type: Boolean, default: true },
+    /** 是否显示分钟 */
+    showMinutes: { type: Boolean, default: true },
+    /** 是否显示小时 */
+    showHours: { type: Boolean, default: true },
+    /** 是否显示“天” */
+    showDays: { type: Boolean, default: true },
+    /** 当"天"的部分为0时，不显示 */
+    hideZeroDay: { type: Boolean, default: false }
+};
+
+export type CountDownProps = ExtractPropTypes<typeof CountDownProps>;

package/components/u-count-down/u-count-down.vue

@@ -53,6 +53,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import { CountDownProps } from './types';
 
 defineOptions({ name: 'u-count-down' });
 
@@ -83,88 +84,7 @@ defineOptions({ name: 'u-count-down' });
 
 const emit = defineEmits(['end', 'change']);
 
-const props = defineProps({
-    /** 倒计时的时间，秒为单位 */
-    timestamp: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 是否自动开始倒计时 */
-    autoplay: {
-        type: Boolean,
-        default: true
-    },
-    /** 分隔符 */
-    separator: {
-        type: String,
-        default: 'colon'
-    },
-    /** 分隔符的大小，单位rpx */
-    separatorSize: {
-        type: [Number, String],
-        default: 30
-    },
-    /** 分隔符颜色 */
-    separatorColor: {
-        type: String,
-        default: '#303133'
-    },
-    /** 字体颜色 */
-    color: {
-        type: String,
-        default: '#303133'
-    },
-    /** 字体大小，单位rpx */
-    fontSize: {
-        type: [Number, String],
-        default: 30
-    },
-    /** 背景颜色 */
-    bgColor: {
-        type: String,
-        default: '#fff'
-    },
-    /** 数字框高度，单位rpx */
-    height: {
-        type: [Number, String],
-        default: 'auto'
-    },
-    /** 是否显示数字框 */
-    showBorder: {
-        type: Boolean,
-        default: false
-    },
-    /** 边框颜色 */
-    borderColor: {
-        type: String,
-        default: '#303133'
-    },
-    /** 是否显示秒 */
-    showSeconds: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否显示分钟 */
-    showMinutes: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否显示小时 */
-    showHours: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否显示“天” */
-    showDays: {
-        type: Boolean,
-        default: true
-    },
-    /** 当"天"的部分为0时，不显示 */
-    hideZeroDay: {
-        type: Boolean,
-        default: false
-    }
-});
+const props = defineProps(CountDownProps);
 
 const d = ref('00'); // 天
 const h = ref('00'); // 小时

package/components/u-count-to/types.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-count-to 数字滚动 Props
+ * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
+ */
+export const CountToProps = {
+    /** 开始的数值，默认从0增长到某一个数 */
+    startVal: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 要滚动的目标数值，必须 */
+    endVal: { type: [Number, String] as PropType<number | string>, default: 0, required: true },
+    /** 滚动到目标数值的动画持续时间，单位为毫秒（ms） */
+    duration: { type: [Number, String] as PropType<number | string>, default: 2000 },
+    /** 设置数值后是否自动开始滚动 */
+    autoplay: { type: Boolean, default: true },
+    /** 要显示的小数位数 */
+    decimals: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 是否在即将到达目标数值的时候，使用缓慢滚动的效果 */
+    useEasing: { type: Boolean, default: true },
+    /** 十进制分割符号 */
+    decimal: { type: [Number, String] as PropType<number | string>, default: '.' },
+    /** 字体颜色 */
+    color: { type: String, default: '#303133' },
+    /** 字体大小 */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 50 },
+    /** 是否加粗字体 */
+    bold: { type: Boolean, default: false },
+    /** 千位分隔符，类似金额的分割(￥23,321.05中的",") */
+    separator: { type: String, default: '' }
+};
+
+export type CountToProps = ExtractPropTypes<typeof CountToProps>;

package/components/u-count-to/u-count-to.vue

@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { CountToProps } from './types';
 
 defineOptions({ name: 'u-count-to' });
 
@@ -36,64 +37,7 @@ defineOptions({ name: 'u-count-to' });
 
 const emit = defineEmits(['end']);
 
-const props = defineProps({
-    /** 开始的数值，默认从0增长到某一个数 */
-    startVal: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 要滚动的目标数值，必须 */
-    endVal: {
-        type: [Number, String],
-        default: 0,
-        required: true
-    },
-    /** 滚动到目标数值的动画持续时间，单位为毫秒（ms） */
-    duration: {
-        type: [Number, String],
-        default: 2000
-    },
-    /** 设置数值后是否自动开始滚动 */
-    autoplay: {
-        type: Boolean,
-        default: true
-    },
-    /** 要显示的小数位数 */
-    decimals: {
-        type: [Number, String],
-        default: 0
-    },
-    /** 是否在即将到达目标数值的时候，使用缓慢滚动的效果 */
-    useEasing: {
-        type: Boolean,
-        default: true
-    },
-    /** 十进制分割符号 */
-    decimal: {
-        type: [Number, String],
-        default: '.'
-    },
-    /** 字体颜色 */
-    color: {
-        type: String,
-        default: '#303133'
-    },
-    /** 字体大小 */
-    fontSize: {
-        type: [Number, String],
-        default: 50
-    },
-    /** 是否加粗字体 */
-    bold: {
-        type: Boolean,
-        default: false
-    },
-    /** 千位分隔符，类似金额的分割(￥23,321.05中的",") */
-    separator: {
-        type: String,
-        default: ''
-    }
-});
+const props = defineProps(CountToProps);
 
 const localStartVal = ref(Number(props.startVal));
 const displayValue = ref(formatNumber(props.startVal));

package/components/u-divider/types.ts

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { ThemeType } from '../../types/global';
+
+/**
+ * u-divider 分割线 Props
+ * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+ */
+export const DividerProps = {
+    /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
+    halfWidth: { type: [Number, String] as PropType<number | string>, default: 150 },
+    /** divider横线的颜色，如设置 */
+    borderColor: { type: String, default: '#dcdfe6' },
+    /** 主题色，可以是primary|info|success|warning|error之一值 */
+    type: { type: String as PropType<ThemeType>, default: 'primary' },
+    /** 文字颜色 */
+    color: { type: String, default: '#909399' },
+    /** 文字大小，单位rpx */
+    fontSize: { type: [Number, String] as PropType<number | string>, default: 26 },
+    /** 整个divider的背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 整个divider的高度单位rpx */
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' },
+    /** 上边距 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 下边距 */
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙 */
+    useSlot: { type: Boolean, default: true }
+};
+
+export type DividerProps = ExtractPropTypes<typeof DividerProps>;

package/components/u-divider/u-divider.vue

@@ -25,6 +25,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { DividerProps } from './types';
 
 defineOptions({
     name: 'u-divider'
@@ -47,28 +48,7 @@ defineOptions({
  * @event {Function} click divider组件被点击时触发
  * @example <u-divider color="#fa3534">长河落日圆</u-divider>
  */
-const props = defineProps({
-    /** 单一边divider横线的宽度(数值)，单位rpx。或者百分比 */
-    halfWidth: { type: [Number, String], default: 150 },
-    /** divider横线的颜色，如设置 */
-    borderColor: { type: String, default: '#dcdfe6' },
-    /** 主题色，可以是primary|info|success|warning|error之一值 */
-    type: { type: String, default: 'primary' },
-    /** 文字颜色 */
-    color: { type: String, default: '#909399' },
-    /** 文字大小，单位rpx */
-    fontSize: { type: [Number, String], default: 26 },
-    /** 整个divider的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 整个divider的高度单位rpx */
-    height: { type: [Number, String], default: 'auto' },
-    /** 上边距 */
-    marginTop: { type: [String, Number], default: 0 },
-    /** 下边距 */
-    marginBottom: { type: [String, Number], default: 0 },
-    /** 是否使用slot传入内容，如果不用slot传入内容，先的中间就不会有空隙 */
-    useSlot: { type: Boolean, default: true }
-});
+const props = defineProps(DividerProps);
 
 const emit = defineEmits(['click']);
 

package/components/u-dropdown/types.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-dropdown 下拉菜单 Props
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ */
+export const DropdownProps = {
+    /** 菜单标题和选项的激活态颜色 */
+    activeColor: { type: String, default: '#2979ff' },
+    /** 菜单标题和选项的未激活态颜色 */
+    inactiveColor: { type: String, default: '#606266' },
+    /** 点击遮罩是否关闭菜单 */
+    closeOnClickMask: { type: Boolean, default: true },
+    /** 点击当前激活项标题是否关闭菜单 */
+    closeOnClickSelf: { type: Boolean, default: true },
+    /** 过渡时间 */
+    duration: { type: [Number, String] as PropType<number | string>, default: 300 },
+    /** 标题菜单的高度，单位任意，数值默认为rpx单位 */
+    height: { type: [Number, String] as PropType<number | string>, default: 80 },
+    /** 是否显示下边框 */
+    borderBottom: { type: Boolean, default: false },
+    /** 标题的字体大小 */
+    titleSize: { type: [Number, String] as PropType<number | string>, default: 28 },
+    /** 下拉出来的内容部分的圆角值 */
+    borderRadius: { type: [Number, String] as PropType<number | string>, default: 0 },
+    /** 菜单右侧的icon图标 */
+    menuIcon: { type: String, default: 'arrow-down' },
+    /** 菜单右侧图标的大小 */
+    menuIconSize: { type: [Number, String] as PropType<number | string>, default: 26 }
+};
+
+export type DropdownProps = ExtractPropTypes<typeof DropdownProps>;

package/components/u-dropdown/u-dropdown.vue

@@ -51,6 +51,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, getCurrentInstance } from 'vue';
 import { $u } from '../..';
+import { DropdownProps } from './types';
 
 defineOptions({ name: 'u-dropdown' });
 
@@ -72,30 +73,7 @@ defineOptions({ name: 'u-dropdown' });
  * @example <u-dropdown></u-dropdown>
  */
 
-const props = defineProps({
-    /** 菜单标题和选项的激活态颜色 */
-    activeColor: { type: String, default: '#2979ff' },
-    /** 菜单标题和选项的未激活态颜色 */
-    inactiveColor: { type: String, default: '#606266' },
-    /** 点击遮罩是否关闭菜单 */
-    closeOnClickMask: { type: Boolean, default: true },
-    /** 点击当前激活项标题是否关闭菜单 */
-    closeOnClickSelf: { type: Boolean, default: true },
-    /** 过渡时间 */
-    duration: { type: [Number, String], default: 300 },
-    /** 标题菜单的高度，单位任意，数值默认为rpx单位 */
-    height: { type: [Number, String], default: 80 },
-    /** 是否显示下边框 */
-    borderBottom: { type: Boolean, default: false },
-    /** 标题的字体大小 */
-    titleSize: { type: [Number, String], default: 28 },
-    /** 下拉出来的内容部分的圆角值 */
-    borderRadius: { type: [Number, String], default: 0 },
-    /** 菜单右侧的icon图标 */
-    menuIcon: { type: String, default: 'arrow-down' },
-    /** 菜单右侧图标的大小 */
-    menuIconSize: { type: [Number, String], default: 26 }
-});
+const props = defineProps(DropdownProps);
 
 // emits 定义
 const emit = defineEmits(['open', 'close']);

package/components/u-dropdown-item/types.ts

@@ -0,0 +1,27 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { OptionType } from '../../types/global';
+
+/**
+ * u-dropdown-item 下拉菜单项 Props
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @property {String|Number|Array} modelValue 双向绑定选项卡选择值
+ * @property {String|Number} title 菜单项标题
+ * @property {OptionType[]} options 选项数据，如果传入了默认slot，此参数无效
+ * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+ * @property {String|Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+ */
+
+export const DropdownItemProps = {
+    /** 当前选中项的value值 */
+    modelValue: { type: [Number, String, Array] as PropType<number | string | any[]>, default: '' },
+    /** 菜单项标题 */
+    title: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 选项数据，如果传入了默认slot，此参数无效 */
+    options: { type: Array as PropType<OptionType[]>, default: () => [] },
+    /** 是否禁用此菜单项 */
+    disabled: { type: Boolean, default: false },
+    /** 下拉弹窗的高度 */
+    height: { type: [Number, String] as PropType<number | string>, default: 'auto' }
+};
+
+export type DropdownItemProps = ExtractPropTypes<typeof DropdownItemProps>;

package/components/u-dropdown-item/u-dropdown-item.vue

@@ -24,7 +24,8 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, getCurrentInstance, useSlots, watch } from 'vue';
-import { $u } from '../..'; // 工具函数路径
+import { $u } from '../..';
+import { DropdownItemProps } from './types';
 
 defineOptions({ name: 'u-dropdown-item' });
 
@@ -41,21 +42,8 @@ defineOptions({ name: 'u-dropdown-item' });
  * @example <u-dropdown-item title="标题"></u-dropdown-item>
  */
 
-type OptionType = { label: string; value: any };
-
-// props 定义，保留参数注释
-const props = defineProps({
-    /** 当前选中项的value值 */
-    modelValue: { type: [Number, String, Array], default: '' },
-    /** 菜单项标题 */
-    title: { type: [String, Number], default: '' },
-    /** 选项数据，如果传入了默认slot，此参数无效 */
-    options: { type: Array as () => OptionType[], default: () => [] },
-    /** 是否禁用此菜单项 */
-    disabled: { type: Boolean, default: false },
-    /** 下拉弹窗的高度 */
-    height: { type: [Number, String], default: 'auto' }
-});
+// props 定义
+const props = defineProps(DropdownItemProps);
 
 // emits 定义
 const emit = defineEmits(['update:modelValue', 'change']);

package/components/u-empty/types.ts

@@ -0,0 +1,36 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-empty 组件 Props 类型定义
+ */
+export const EmptyProps = {
+    /** 图标路径 */
+    src: { type: String, default: '' },
+    /** 提示文字 */
+    text: { type: String, default: '' },
+    /** 文字颜色 */
+    color: { type: String, default: '#c0c4cc' },
+    /** 图标的颜色 */
+    iconColor: { type: String, default: '#c0c4cc' },
+    /** 图标的大小 */
+    iconSize: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 文字大小，单位rpx */
+    fontSize: { type: [String, Number] as PropType<string | number>, default: 26 },
+    /** 选择预置的图标类型 */
+    mode: { type: String, default: 'data' },
+    /** 图标宽度，单位rpx */
+    imgWidth: { type: [String, Number] as PropType<string | number>, default: 120 },
+    /** 图标高度，单位rpx */
+    imgHeight: { type: [String, Number] as PropType<string | number>, default: 'auto' },
+    /** 是否显示组件 */
+    show: { type: Boolean, default: true },
+    /** 组件距离上一个元素之间的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 图标自定义样式 */
+    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+/**
+ * u-empty 组件 Props 类型
+ */
+export type EmptyProps = ExtractPropTypes<typeof EmptyProps>;

package/components/u-empty/u-empty.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script setup lang="ts">
+import { EmptyProps } from './types';
+
 defineOptions({
     name: 'u-empty'
 });
@@ -39,32 +41,7 @@ defineOptions({
  * @event {Function} close 点击关闭按钮时触发
  * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
  */
-const props = defineProps({
-    /** 图标路径 */
-    src: { type: String, default: '' },
-    /** 提示文字 */
-    text: { type: String, default: '' },
-    /** 文字颜色 */
-    color: { type: String, default: '#c0c4cc' },
-    /** 图标的颜色 */
-    iconColor: { type: String, default: '#c0c4cc' },
-    /** 图标的大小 */
-    iconSize: { type: [String, Number], default: 120 },
-    /** 文字大小，单位rpx */
-    fontSize: { type: [String, Number], default: 26 },
-    /** 选择预置的图标类型 */
-    mode: { type: String, default: 'data' },
-    /** 图标宽度，单位rpx */
-    imgWidth: { type: [String, Number], default: 120 },
-    /** 图标高度，单位rpx */
-    imgHeight: { type: [String, Number], default: 'auto' },
-    /** 是否显示组件 */
-    show: { type: Boolean, default: true },
-    /** 组件距离上一个元素之间的距离 */
-    marginTop: { type: [String, Number], default: 0 },
-    /** 图标自定义样式 */
-    iconStyle: { type: Object, default: () => ({}) }
-});
+const props = defineProps(EmptyProps);
 
 /**
  * 预置图标对应的提示文字

package/components/u-field/types.ts

@@ -0,0 +1,69 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign, InputConfirmType, InputLabelPosition, InputType } from '../../types/global';
+
+/**
+ * u-field 组件 Props 类型定义
+ * @description 表单输入框属性
+ */
+export const FieldProps = {
+    /** label左边的图标，限uView的图标名称 */
+    icon: String,
+    /** 输入框右边的图标名称，限uView的图标名称（默认false） */
+    rightIcon: String,
+    /** 方向属性 */
+    arrowDirection: { type: String, default: 'right' },
+    /** 是否必填，左边显示红色"*"号（默认false） */
+    required: Boolean,
+    /** 输入框左边的文字提示 */
+    label: String,
+    /** 是否密码输入方式(用点替换文字)，type为text时有效（默认false） */
+    password: Boolean,
+    /** 是否显示右侧清空内容的图标控件（默认true） */
+    clearable: { type: Boolean, default: true },
+    /** label的宽度，单位rpx（默认130） */
+    labelWidth: { type: [Number, String] as PropType<string | number>, default: 130 },
+    /** label的文字对齐方式（默认left） */
+    labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 输入框内容对齐方式（默认left） */
+    inputAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 左边通过icon配置的图标的颜色（默认#606266） */
+    iconColor: { type: String, default: '#606266' },
+    /** 是否自动增高输入区域，type为textarea时有效（默认true） */
+    autoHeight: { type: Boolean, default: true },
+    /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
+    errorMessage: { type: [String, Boolean] as PropType<string | boolean>, default: '' },
+    /** 输入框的提示文字 */
+    placeholder: String,
+    /** placeholder的样式(内联样式，字符串)，如"color: #ddd" */
+    placeholderStyle: String,
+    /** 是否自动获得焦点（默认false） */
+    focus: Boolean,
+    /** 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true（默认false） */
+    fixed: Boolean,
+    /** 输入框绑定值 */
+    modelValue: [Number, String],
+    /** 输入框类型（text/textarea/password等，默认text） */
+    type: { type: String as PropType<InputType>, default: 'text' },
+    /** 是否不可输入（默认false） */
+    disabled: { type: Boolean, default: false },
+    /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
+    maxlength: { type: [Number, String] as PropType<string | number>, default: 140 },
+    /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */
+    confirmType: { type: String as PropType<InputConfirmType>, default: 'done' },
+    /** label位置（默认left）left-左边，top-上边 */
+    labelPosition: { type: String as PropType<InputLabelPosition>, default: 'left' },
+    /** 自定义输入框的样式，对象形式 */
+    fieldStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 清除图标的大小，单位rpx（默认30） */
+    clearSize: { type: [Number, String] as PropType<string | number>, default: 30 },
+    /** 左侧图标样式 */
+    iconStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 是否显示field的上边框（默认false） */
+    borderTop: { type: Boolean, default: false },
+    /** 是否显示field的下边框（默认true） */
+    borderBottom: { type: Boolean, default: true },
+    /** 是否自动去除输入内容首尾空格（默认true） */
+    trim: { type: Boolean, default: true }
+};
+
+export type FieldProps = ExtractPropTypes<typeof FieldProps>;