uview-pro 0.0.7 → 0.0.8

package/components/u-field/u-field.vue

@@ -79,6 +79,7 @@
 </template>
 
 <script setup lang="ts">
+import { FieldProps } from './types';
 import { ref, computed } from 'vue';
 import { $u } from '../..';
 
@@ -156,123 +157,7 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm', 'righ
  * @property {string|number} value 输入框绑定值
  * @property {string} type 输入框类型（text/textarea/password等，默认text）
  */
-const props = defineProps({
-    /** 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],
-        default: 130
-    },
-    /** label的文字对齐方式（默认left） */
-    labelAlign: {
-        type: String,
-        default: 'left'
-    },
-    /** 输入框内容对齐方式（默认left） */
-    inputAlign: {
-        type: String,
-        default: 'left'
-    },
-    /** 左边通过icon配置的图标的颜色（默认#606266） */
-    iconColor: {
-        type: String,
-        default: '#606266'
-    },
-    /** 是否自动增高输入区域，type为textarea时有效（默认true） */
-    autoHeight: {
-        type: Boolean,
-        default: true
-    },
-    /** 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息 */
-    errorMessage: {
-        type: [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,
-        default: 'text'
-    },
-    /** 是否不可输入（默认false） */
-    disabled: {
-        type: Boolean,
-        default: false
-    },
-    /** 最大输入长度，设置为 -1 的时候不限制最大长度（默认140） */
-    maxlength: {
-        type: [Number, String],
-        default: 140
-    },
-    /** 设置键盘右下角按钮的文字，仅在type="text"时生效（默认done） */
-    confirmType: {
-        type: String,
-        default: 'done'
-    },
-    /** label位置（默认left）left-左边，top-上边 */
-    labelPosition: {
-        type: String,
-        default: 'left'
-    },
-    /** 自定义输入框的样式，对象形式 */
-    fieldStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({})
-    },
-    /** 清除图标的大小，单位rpx（默认30） */
-    clearSize: {
-        type: [Number, String],
-        default: 30
-    },
-    /** 左侧图标样式 */
-    iconStyle: {
-        type: Object as () => Record<string, any>,
-        default: () => ({})
-    },
-    /** 是否显示field的上边框（默认false） */
-    borderTop: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否显示field的下边框（默认true） */
-    borderBottom: {
-        type: Boolean,
-        default: true
-    },
-    /** 是否自动去除输入内容首尾空格（默认true） */
-    trim: {
-        type: Boolean,
-        default: true
-    }
-});
+const props = defineProps(FieldProps);
 
 const focused = ref(false);
 const itemIndex = ref(0);

package/components/u-form/types.ts

@@ -0,0 +1,25 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign, InputErrorType, InputLabelPosition } from '../../types/global';
+
+/**
+ * u-form 组件 Props 类型定义
+ * @description 表单组件属性
+ */
+export const FormProps = {
+    /** 当前form的需要验证字段的集合 */
+    model: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，border-bottom-下边框呈现红色，none-无提示 */
+    errorType: { type: Array as PropType<InputErrorType[]>, default: () => ['message', 'toast'] },
+    /** 是否显示表单域的下划线边框 */
+    borderBottom: { type: Boolean, default: true },
+    /** label的位置，left-左边，top-上边 */
+    labelPosition: { type: String as PropType<InputLabelPosition>, default: 'left' },
+    /** label的宽度，单位rpx */
+    labelWidth: { type: [String, Number] as PropType<string | number>, default: 90 },
+    /** lable字体的对齐方式 */
+    labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
+    /** lable的样式，对象形式 */
+    labelStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
+};
+
+export type FormProps = ExtractPropTypes<typeof FormProps>;

package/components/u-form/u-form.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { FormProps } from './types';
 import { ref, provide } from 'vue';
 import { $u } from '../..';
 
@@ -25,52 +26,7 @@ defineOptions({
  * @example <u-form :model="form" ref="uForm"></u-form>
  */
 
-const props = defineProps({
-    /** 当前form的需要验证字段的集合 */
-    model: {
-        type: Object,
-        default: () => ({})
-    },
-    // 验证规则
-    // rules: {
-    // 	type: [Object, Function, Array],
-    // 	default() {
-    // 		return {};
-    // 	}
-    // },
-    /**
-     * 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，border-bottom-下边框呈现红色，none-无提示
-     */
-    errorType: {
-        type: Array,
-        default: () => ['message', 'toast']
-    },
-    /** 是否显示表单域的下划线边框 */
-    borderBottom: {
-        type: Boolean,
-        default: true
-    },
-    /** label的位置，left-左边，top-上边 */
-    labelPosition: {
-        type: String,
-        default: 'left'
-    },
-    /** label的宽度，单位rpx */
-    labelWidth: {
-        type: [String, Number],
-        default: 90
-    },
-    /** lable字体的对齐方式 */
-    labelAlign: {
-        type: String,
-        default: 'left'
-    },
-    /** lable的样式，对象形式 */
-    labelStyle: {
-        type: Object,
-        default: () => ({})
-    }
-});
+const props = defineProps(FormProps);
 
 // 存储当前form下的所有u-form-item的实例
 const fields = ref<any[]>([]);

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

@@ -0,0 +1,70 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { InputAlign, InputLabelPosition } from '../../types/global';
+
+/**
+ * form-item 表单item Props
+ */
+export const FormItemProps = {
+    /** input的label提示语 */
+    label: {
+        type: String,
+        default: ''
+    },
+    /** 绑定的值 */
+    prop: {
+        type: String,
+        default: ''
+    },
+    /** 是否显示表单域的下划线边框 */
+    borderBottom: {
+        type: [String, Boolean] as PropType<string | boolean>,
+        default: ''
+    },
+    /** label的位置，left-左边，top-上边 */
+    labelPosition: {
+        type: String as PropType<InputLabelPosition>,
+        default: ''
+    },
+    /** label的宽度，单位rpx */
+    labelWidth: {
+        type: [String, Number] as PropType<string | number>,
+        default: ''
+    },
+    /** lable的样式，对象形式 */
+    labelStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** lable字体的对齐方式 */
+    labelAlign: {
+        type: String as PropType<InputAlign>,
+        default: ''
+    },
+    /** 右侧图标 */
+    rightIcon: {
+        type: String,
+        default: ''
+    },
+    /** 左侧图标 */
+    leftIcon: {
+        type: String,
+        default: ''
+    },
+    /** 左侧图标的样式 */
+    leftIconStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 右侧图标的样式 */
+    rightIconStyle: {
+        type: Object as PropType<Record<string, any>>,
+        default: () => ({})
+    },
+    /** 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 */
+    required: {
+        type: Boolean,
+        default: false
+    }
+};
+
+export type FormItemProps = ExtractPropTypes<typeof FormItemProps>;

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

@@ -70,6 +70,7 @@ import { $u } from '../..';
 import { broadcast } from '../../libs/util/emitter';
 // @ts-ignore
 import schema from '../../libs/util/async-validator';
+import { FormItemProps } from './types';
 // 去除警告信息
 schema.warning = function () {};
 
@@ -96,68 +97,7 @@ defineOptions({
  * @example <u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
  */
 
-const props = defineProps({
-    /** input的label提示语 */
-    label: {
-        type: String,
-        default: ''
-    },
-    /** 绑定的值 */
-    prop: {
-        type: String,
-        default: ''
-    },
-    /** 是否显示表单域的下划线边框 */
-    borderBottom: {
-        type: [String, Boolean],
-        default: ''
-    },
-    /** label的位置，left-左边，top-上边 */
-    labelPosition: {
-        type: String,
-        default: ''
-    },
-    /** label的宽度，单位rpx */
-    labelWidth: {
-        type: [String, Number],
-        default: ''
-    },
-    /** lable的样式，对象形式 */
-    labelStyle: {
-        type: Object,
-        default: () => ({})
-    },
-    /** lable字体的对齐方式 */
-    labelAlign: {
-        type: String,
-        default: ''
-    },
-    /** 右侧图标 */
-    rightIcon: {
-        type: String,
-        default: ''
-    },
-    /** 左侧图标 */
-    leftIcon: {
-        type: String,
-        default: ''
-    },
-    /** 左侧图标的样式 */
-    leftIconStyle: {
-        type: Object,
-        default: () => ({})
-    },
-    /** 右侧图标的样式 */
-    rightIconStyle: {
-        type: Object,
-        default: () => ({})
-    },
-    /** 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 */
-    required: {
-        type: Boolean,
-        default: false
-    }
-});
+const props = defineProps(FormItemProps);
 
 // inject 父表单实例
 const parent = inject<any>('u-form', null);

package/components/u-full-screen/types.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-full-screen 组件 Props 类型定义
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ */
+export const FullScreenProps = {
+    /** 是否显示弹窗 */
+    show: { type: Boolean, default: false },
+    /** 升级内容，支持富文本 */
+    content: { type: String, default: '' }
+};
+
+export type FullScreenProps = ExtractPropTypes<typeof FullScreenProps>;

package/components/u-full-screen/u-full-screen.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup lang="ts">
+import { FullScreenProps } from './types';
 import { ref, onMounted } from 'vue';
 
 defineOptions({ name: 'u-full-screen' });
@@ -17,6 +18,7 @@ defineOptions({ name: 'u-full-screen' });
  * @property {boolean} show 是否显示弹窗
  * @property {string} content 升级内容，支持富文本
  */
+defineProps(FullScreenProps);
 
 /**
  * 是否显示弹窗

package/components/u-gap/types.ts

@@ -0,0 +1,18 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-gap 组件 Props 类型定义
+ * @description 间隔槽组件属性
+ */
+export const GapProps = {
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 高度 */
+    height: { type: [String, Number] as PropType<string | number>, default: 30 },
+    /** 与上一个组件的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 与下一个组件的距离 */
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: 0 }
+};
+
+export type GapProps = ExtractPropTypes<typeof GapProps>;

package/components/u-gap/u-gap.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script setup lang="ts">
+import { GapProps } from './types';
 import { computed } from 'vue';
 
 defineOptions({
@@ -19,16 +20,7 @@ defineOptions({
  * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
  * @example <u-gap height="80" bg-color="#bbb"></u-gap>
  */
-const props = defineProps({
-    /** 背景颜色 */
-    bgColor: { type: String, default: 'transparent' },
-    /** 高度 */
-    height: { type: [String, Number], default: 30 },
-    /** 与上一个组件的距离 */
-    marginTop: { type: [String, Number], default: 0 },
-    /** 与下一个组件的距离 */
-    marginBottom: { type: [String, Number], default: 0 }
-});
+const props = defineProps(GapProps);
 
 /**
  * 间隔槽样式

package/components/u-grid/types.ts

@@ -0,0 +1,19 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { InputAlign } from '../../types/global';
+
+/**
+ * u-grid 组件 Props 类型定义
+ * @description 宫格组件属性
+ */
+export const GridProps = {
+    /** 分成几列 */
+    col: { type: [Number, String] as PropType<string | number>, default: 3 },
+    /** 是否显示边框 */
+    border: { type: Boolean, default: true },
+    /** 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 */
+    align: { type: String as PropType<InputAlign>, default: 'left' },
+    /** 宫格按压时的样式类，"none"为无效果 */
+    hoverClass: { type: String, default: 'u-hover-class' }
+};
+
+export type GridProps = ExtractPropTypes<typeof GridProps>;

package/components/u-grid/u-grid.vue

@@ -5,7 +5,9 @@
 </template>
 
 <script setup lang="ts">
+import { GridProps } from './types';
 import { ref, computed, watch } from 'vue';
+
 defineOptions({ name: 'u-grid' });
 
 /**
@@ -18,17 +20,7 @@ defineOptions({ name: 'u-grid' });
  * @event {Function} click 点击宫格触发
  * @example <u-grid :col="3" @click="click"></u-grid>
  */
-
-const props = defineProps({
-    /** 分成几列 */
-    col: { type: [Number, String], default: 3 },
-    /** 是否显示边框 */
-    border: { type: Boolean, default: true },
-    /** 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 */
-    align: { type: String, default: 'left' },
-    /** 宫格按压时的样式类，"none"为无效果 */
-    hoverClass: { type: String, default: 'u-hover-class' }
-});
+const props = defineProps(GridProps);
 
 // emits 定义
 const emit = defineEmits(['click']);

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

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+
+/**
+ * u-grid-item 组件 Props 类型定义
+ * @description 宫格项组件属性
+ */
+export const GridItemProps = {
+    /** 背景颜色 */
+    bgColor: { type: String, default: '#ffffff' },
+    /** 点击时返回的index */
+    index: { type: [Number, String] as PropType<string | number>, default: '' },
+    /** 自定义样式，对象形式 */
+    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({ padding: '30rpx 0' }) }
+};
+
+export type GridItemProps = ExtractPropTypes<typeof GridItemProps>;

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

@@ -16,6 +16,7 @@
 </template>
 
 <script setup lang="ts">
+import { GridItemProps } from './types';
 import { ref, computed, getCurrentInstance, onMounted } from 'vue';
 import { $u } from '../..';
 
@@ -33,14 +34,7 @@ defineOptions({ name: 'u-grid-item' });
  */
 
 // props 定义，保留参数注释
-const props = defineProps({
-    /** 背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
-    /** 点击时返回的index */
-    index: { type: [Number, String], default: '' },
-    /** 自定义样式，对象形式 */
-    customStyle: { type: Object, default: () => ({ padding: '30rpx 0' }) }
-});
+const props = defineProps(GridItemProps);
 
 // emits 定义
 const emit = defineEmits(['click']);

package/components/u-icon/types.ts

@@ -0,0 +1,62 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { IconLabelPosition, ImgMode } from '../../types/global';
+
+/**
+ * u-icon 组件 Props 类型定义
+ * 所有属性均带详细注释，类型安全，便于 IDE 智能提示
+ */
+export const IconProps = {
+    /** 图标名称，见示例图标集 */
+    name: { type: String, default: '' },
+    /** 图标颜色，可接受主题色 */
+    color: { type: String, default: '' },
+    /** 字体大小，单位rpx（默认32） */
+    size: { type: [Number, String] as PropType<string | number>, default: 'inherit' },
+    /** 是否显示粗体 */
+    bold: { type: Boolean, default: false },
+    /** 点击图标的时候传递事件出去的index（用于区分点击了哪一个） */
+    index: { type: [Number, String] as PropType<string | number>, default: '' },
+    /** 触摸图标时的类名 */
+    hoverClass: { type: String, default: '' },
+    /** 自定义扩展前缀，方便用户扩展自己的图标库 */
+    customPrefix: { type: String, default: 'uicon' },
+    /** 图标右边或者下面的文字 */
+    label: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** label的位置，只能右边或者下边 */
+    labelPos: { type: String as PropType<IconLabelPosition>, default: 'right' },
+    /** label的大小，单位rpx（默认28） */
+    labelSize: { type: [String, Number] as PropType<string | number>, default: '28' },
+    /** label的颜色 */
+    labelColor: { type: String, default: '#606266' },
+    /** label与图标的距离(横向排列)，单位rpx（默认6） */
+    marginLeft: { type: [String, Number] as PropType<string | number>, default: '6' },
+    /** label与图标的距离(竖向排列)，单位rpx（默认6） */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: '6' },
+    /** label与图标的距离(竖向排列)，单位rpx（默认6） */
+    marginRight: { type: [String, Number] as PropType<string | number>, default: '6' },
+    /** label与图标的距离(竖向排列)，单位rpx（默认6） */
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: '6' },
+    /** label与图标的距离，单位rpx，权重高于 margin */
+    space: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 图片的mode，参考uni-app image组件 */
+    imgMode: { type: String as PropType<ImgMode>, default: 'widthFix' },
+    /** 自定义样式，对象形式 */
+    customStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 用于显示图片小图标时，图片的宽度，单位rpx */
+    width: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 用于显示图片小图标时，图片的高度，单位rpx */
+    height: { type: [String, Number] as PropType<string | number>, default: '' },
+    /** 用于解决某些情况下，让图标垂直居中的用途，单位rpx */
+    top: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 是否为DecimalIcon */
+    showDecimalIcon: { type: Boolean, default: false },
+    /** 背景颜色，可接受主题色，仅Decimal时有效 */
+    inactiveColor: { type: String, default: '#ececec' },
+    /** 显示的百分比，仅Decimal时有效 */
+    percent: { type: [Number, String] as PropType<string | number>, default: '50' }
+};
+
+/**
+ * u-icon 组件 Props 类型
+ */
+export type IconProps = ExtractPropTypes<typeof IconProps>;