uview-pro 0.0.14 → 0.0.16

package/components/u-form/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import type { InputAlign, InputErrorType, InputLabelPosition } from '../../types/global';
+import type { FormRules, InputAlign, FormErrorType, InputLabelPosition } from '../../types/global';
 
 /**
  * u-form 组件 Props 类型定义
@@ -8,17 +8,19 @@ import type { InputAlign, InputErrorType, InputLabelPosition } from '../../types
 export const FormProps = {
     /** 当前form的需要验证字段的集合 */
     model: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+    /** 表单验证规则 */
+    rules: { type: Object as PropType<FormRules>, default: () => ({}) },
     /** 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，border-bottom-下边框呈现红色，none-无提示 */
-    errorType: { type: Array as PropType<InputErrorType[]>, default: () => ['message', 'toast'] },
+    errorType: { type: Array as PropType<FormErrorType[]>, 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字体的对齐方式 */
+    /** label字体的对齐方式 */
     labelAlign: { type: String as PropType<InputAlign>, default: 'left' },
-    /** lable的样式，对象形式 */
+    /** label的样式，对象形式 */
     labelStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
 };
 

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

@@ -14,13 +14,13 @@ defineOptions({
 /**
  * form 表单
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
- * @tutorial http://uviewui.com/components/form.html
+ * @tutorial https://uview-pro.netlify.app/components/form.html
  * @property {Object} model 表单数据对象
  * @property {Boolean} border-bottom 是否显示表单域的下划线边框
  * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
  * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
- * @property {Object} label-style lable的样式，对象形式
- * @property {String} label-align lable的对齐方式
+ * @property {Object} label-style label的样式，对象形式
+ * @property {String} label-align label的对齐方式
  * @property {Object} rules 通过ref设置，见官网说明
  * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
  * @example <u-form :model="form" ref="uForm"></u-form>
@@ -32,7 +32,7 @@ const props = defineProps(FormProps);
 const fields = ref<any[]>([]);
 
 // 校验规则
-const rules = ref<Record<string, any>>({});
+const rules = ref<Record<string, any>>(props.rules);
 
 // 提供 uForm 实例给子组件（注册方法供 u-form-item 调用）
 const uForm = {
@@ -110,7 +110,21 @@ function validate(callback?: (valid: boolean) => void): Promise<boolean> {
     });
 }
 
-defineExpose({ setRules, resetFields, validate });
+defineExpose({
+    setRules,
+    resetFields,
+    validate,
+    addField(field: any) {
+        if (!fields.value.includes(field)) fields.value.push(field);
+    },
+    removeField(field: any) {
+        fields.value = fields.value.filter(f => f !== field);
+    },
+    fields,
+    rules,
+    props,
+    model: props.model
+});
 </script>
 
 <style scoped lang="scss">

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

@@ -30,12 +30,12 @@ export const FormItemProps = {
         type: [String, Number] as PropType<string | number>,
         default: ''
     },
-    /** lable的样式，对象形式 */
+    /** label的样式，对象形式 */
     labelStyle: {
         type: Object as PropType<Record<string, any>>,
         default: () => ({})
     },
-    /** lable字体的对齐方式 */
+    /** label字体的对齐方式 */
     labelAlign: {
         type: String as PropType<InputAlign>,
         default: ''

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

@@ -81,14 +81,14 @@ defineOptions({
 /**
  * form-item 表单item
  * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
- * @tutorial http://uviewui.com/components/form.html
+ * @tutorial https://uview-pro.netlify.app/components/form.html
  * @property {String} label 左侧提示文字
  * @property {Object} prop 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
  * @property {Boolean} border-bottom 是否显示表单域的下划线边框
  * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
  * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
- * @property {Object} label-style lable的样式，对象形式
- * @property {String} label-align lable的对齐方式
+ * @property {Object} label-style label的样式，对象形式
+ * @property {String} label-align label的对齐方式
  * @property {String} right-icon 右侧自定义字体图标(限uView内置图标)或图片地址
  * @property {String} left-icon 左侧自定义字体图标(限uView内置图标)或图片地址
  * @property {Object} left-icon-style 左侧图标的样式，对象形式
@@ -100,7 +100,7 @@ defineOptions({
 const props = defineProps(FormItemProps);
 
 // inject 父表单实例
-const parent = inject<any>('u-form', null);
+let parent = inject<any>('u-form', null);
 const instance = getCurrentInstance();
 
 // 组件状态
@@ -289,13 +289,14 @@ function resetField() {
 
 // 组件挂载时注册到父表单
 onMounted(() => {
+    // 支付宝、头条小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环应用
     // 兼容 provide/inject 及 $u.$parent
+    parent = $u.parentData('u-form', instance);
     if (parent) {
         // 继承父表单配置
         // 历遍parentData中的属性，将parent中的同名属性赋值给parentData
         Object.keys(parentData.value).forEach(key => {
-            // @ts-ignore
-            if (parent.props[key] !== undefined) parentData.value[key] = parent.props[key];
+            parentData.value[key] = parent.props[key];
         });
         // 如果没有传入prop，或者uForm为空(如果u-form-input单独使用，就不会有uForm注入)，就不进行校验
         if (props.prop) {

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

@@ -1,14 +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>;
+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

@@ -1,82 +1,82 @@
-<template>
-    <u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
-        <view class="u-update-content">
-            <rich-text :nodes="content"></rich-text>
-        </view>
-    </u-modal>
-</template>
-
-<script setup lang="ts">
-import { FullScreenProps } from './types';
-import { ref, onMounted } from 'vue';
-
-defineOptions({ name: 'u-full-screen' });
-
-/**
- * 压窗屏升级弹窗组件
- * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
- * @property {boolean} show 是否显示弹窗
- * @property {string} content 升级内容，支持富文本
- */
-defineProps(FullScreenProps);
-
-/**
- * 是否显示弹窗
- */
-const show = ref(false);
-/**
- * 升级内容，支持富文本
- */
-const content = ref<string>(`
-  1. 修复badge组件的size参数无效问题<br>
-  2. 新增Modal模态框组件<br>
-  3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
-  4. 修复键盘组件在微信小程序上遮罩无效的问题
-`);
-
-/**
- * 页面加载完成后自动显示弹窗
- */
-onMounted(() => {
-    show.value = true;
-});
-
-/**
- * 取消按钮点击事件
- * @description 关闭弹窗并返回上一页
- */
-function cancel() {
-    closeModal();
-}
-
-/**
- * 升级按钮点击事件
- * @description 关闭弹窗并返回上一页
- */
-function confirm() {
-    closeModal();
-}
-
-/**
- * 关闭弹窗方法
- * @description 返回上一页
- */
-function closeModal() {
-    uni.navigateBack();
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../libs/css/style.components.scss';
-
-.u-full-content {
-    background-color: #00c777;
-}
-
-.u-update-content {
-    font-size: 26rpx;
-    color: $u-content-color;
-    line-height: 1.7;
-    padding: 30rpx;
-}
-</style>
+<template>
+    <u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel" @confirm="confirm">
+        <view class="u-update-content">
+            <rich-text :nodes="content"></rich-text>
+        </view>
+    </u-modal>
+</template>
+
+<script setup lang="ts">
+import { FullScreenProps } from './types';
+import { ref, onMounted } from 'vue';
+
+defineOptions({ name: 'u-full-screen' });
+
+/**
+ * 压窗屏升级弹窗组件
+ * @description 用于APP弹窗遮盖导航栏和底部tabbar，提示新版本升级内容
+ * @property {boolean} show 是否显示弹窗
+ * @property {string} content 升级内容，支持富文本
+ */
+defineProps(FullScreenProps);
+
+/**
+ * 是否显示弹窗
+ */
+const show = ref(false);
+/**
+ * 升级内容，支持富文本
+ */
+const content = ref<string>(`
+  1. 修复badge组件的size参数无效问题<br>
+  2. 新增Modal模态框组件<br>
+  3. 新增压窗屏组件，可以在APP上以弹窗的形式遮盖导航栏和底部tabbar<br>
+  4. 修复键盘组件在微信小程序上遮罩无效的问题
+`);
+
+/**
+ * 页面加载完成后自动显示弹窗
+ */
+onMounted(() => {
+    show.value = true;
+});
+
+/**
+ * 取消按钮点击事件
+ * @description 关闭弹窗并返回上一页
+ */
+function cancel() {
+    closeModal();
+}
+
+/**
+ * 升级按钮点击事件
+ * @description 关闭弹窗并返回上一页
+ */
+function confirm() {
+    closeModal();
+}
+
+/**
+ * 关闭弹窗方法
+ * @description 返回上一页
+ */
+function closeModal() {
+    uni.navigateBack();
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.u-full-content {
+    background-color: #00c777;
+}
+
+.u-update-content {
+    font-size: 26rpx;
+    color: $u-content-color;
+    line-height: 1.7;
+    padding: 30rpx;
+}
+</style>

package/components/u-gap/types.ts

@@ -1,18 +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>;
+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

@@ -1,40 +1,40 @@
-<template>
-    <view class="u-gap" :style="gapStyle"></view>
-</template>
-
-<script setup lang="ts">
-import { GapProps } from './types';
-import { computed } from 'vue';
-
-defineOptions({
-    name: 'u-gap'
-});
-
-/**
- * gap 间隔槽
- * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
- * @tutorial https://uview-pro.netlify.app/components/gap.html
- * @property {String} bg-color 背景颜色（默认#f3f4f6）
- * @property {String Number} height 分割槽高度，单位rpx（默认30）
- * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
- * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
- * @example <u-gap height="80" bg-color="#bbb"></u-gap>
- */
-const props = defineProps(GapProps);
-
-/**
- * 间隔槽样式
- */
-const gapStyle = computed(() => {
-    return {
-        backgroundColor: props.bgColor,
-        height: props.height + 'rpx',
-        marginTop: props.marginTop + 'rpx',
-        marginBottom: props.marginBottom + 'rpx'
-    };
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../libs/css/style.components.scss';
-</style>
+<template>
+    <view class="u-gap" :style="gapStyle"></view>
+</template>
+
+<script setup lang="ts">
+import { GapProps } from './types';
+import { computed } from 'vue';
+
+defineOptions({
+    name: 'u-gap'
+});
+
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://uview-pro.netlify.app/components/gap.html
+ * @property {String} bg-color 背景颜色（默认#f3f4f6）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ */
+const props = defineProps(GapProps);
+
+/**
+ * 间隔槽样式
+ */
+const gapStyle = computed(() => {
+    return {
+        backgroundColor: props.bgColor,
+        height: props.height + 'rpx',
+        marginTop: props.marginTop + 'rpx',
+        marginBottom: props.marginBottom + 'rpx'
+    };
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>

package/components/u-grid/types.ts

@@ -1,19 +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>;
+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>;