@10yun/cv-mobile-ui 0.5.30 → 0.5.32

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

@@ -1,12 +1,12 @@
 <template>
   <view class="u-empty" :style="[emptyStyle]" v-if="show">
-    <u-icon
+    <up-icon
       v-if="!isSrc"
       :name="mode === 'message' ? 'chat' : `empty-${mode}`"
       :size="iconSize"
       :color="iconColor"
       margin-top="14"
-    ></u-icon>
+    ></up-icon>
     <image
       v-else
       :style="{
@@ -47,7 +47,7 @@ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
  *
  * @event {Function} click 点击组件时触发
  * @event {Function} close 点击关闭按钮时触发
- * @example <u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
+ * @example <up-empty text="所谓伊人，在水一方" mode="list"></up-empty>
  */
 export default {
   name: 'u-empty',

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

@@ -1 +1,243 @@
-<template>
  <view class="u-form">
    <slot />
  </view>
 * Form 表单
 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
 * @tutorial https://ijry.github.io/uview-plus/components/form.html
 * @property {Object}						model			当前form的需要验证字段的集合
 * @property {Object | Function | Array}	rules			验证规则
 * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
 * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
 * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
 * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
 * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 ‘left' ）
 * @property {Object}						labelStyle		lable的样式，对象形式
 * @example <up-formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></up-form>
 */
  name: 'u-form',
  mixins: [mpMixin, mixin, props],
  provide() {
    return {
      uForm: this
    };
  },
  data() {
    return {
      formRules: {},
      // 规则校验器
      validator: {},
      // 原始的model快照，用于resetFields方法重置表单时使用
      originalModel: null
    };
  },
  watch: {
    // 监听规则的变化
    rules: {
      immediate: true,
      handler(n) {
        this.setRules(n);
      }
    },
    // 监听属性的变化，通知子组件u-form-item重新获取信息
    propsChange(n) {
      if (this.children?.length) {
        this.children.map((child) => {
          // 判断子组件(u-form-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
          typeof child.updateParentData == 'function' && child.updateParentData();
        });
      }
    },
    // 监听model的初始值作为重置表单的快照
    model: {
      immediate: true,
      handler(n) {
        if (!this.originalModel) {
          this.originalModel = deepClone(n);
        }
      }
    }
  },
  computed: {
    propsChange() {
      return [this.errorType, this.borderBottom, this.labelPosition, this.labelWidth, this.labelAlign, this.labelStyle];
    }
  },
  created() {
    // 存储当前form下的所有u-form-item的实例
    // 不能定义在data中，否则微信小程序会造成循环引用而报错
    this.children = [];
  },
  methods: {
    // 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
    setRules(rules) {
      // 判断是否有规则
      if (Object.keys(rules).length === 0) return;
      if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) {
        error('设置rules，model必须设置！如果已经设置，请刷新页面。');
        return;
      }
      this.formRules = rules;
      // 重新将规则赋予Validator
      this.validator = new Schema(rules);
    },
    // 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
    resetFields() {
      this.resetModel();
    },
    // 重置model为初始值的快照
    resetModel(obj) {
      // 历遍所有u-form-item，根据其prop属性，还原model的原始快照
      this.children.map((child) => {
        const prop = child?.prop;
        const value = getProperty(this.originalModel, prop);
        setProperty(this.model, prop, value);
      });
    },
    // 清空校验结果
    clearValidate(props) {
      props = [].concat(props);
      this.children.map((child) => {
        // 如果u-form-item的prop在props数组中，则清除对应的校验结果信息
        if (props[0] === undefined || props.includes(child.prop)) {
          child.message = null;
        }
      });
    },
    // 对部分表单字段进行校验
    async validateField(value, callback, event = null, options) {
      // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
      this.$nextTick(() => {
        // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
        const errorsRes = [];
        // 如果为字符串，转为数组
        value = [].concat(value);
        // 历遍children所有子form-item
        let promises = this.children.map((child) => {
          return new Promise((resolve, reject) => {
            // 用于存放form-item的错误信息
            const childErrors = [];
            if (value.includes(child.prop)) {
              // 获取对应的属性，通过类似'a.b.c'的形式
              const propertyVal = getProperty(this.model, child.prop);
              // 属性链数组
              const propertyChain = child.prop.split('.');
              const propertyName = propertyChain[propertyChain.length - 1];
              let rule = [];
              if (child.itemRules && child.itemRules.length > 0) {
                rule = child.itemRules;
              } else {
                rule = this.formRules[child.prop];
              }
              // 如果不存在对应的规则，直接返回，否则校验器会报错
              if (!rule) {
                resolve();
                return;
              }
              // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
              const rules = [].concat(rule);
              // 对rules数组进行校验
              if (!rules.length) {
                resolve();
              }
              for (let i = 0; i < rules.length; i++) {
                const ruleItem = rules[i];
                // 将u-form-item的触发器转为数组形式
                const trigger = [].concat(ruleItem?.trigger);
                // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
                if (event && !trigger.includes(event)) {
                  resolve();
                  continue;
                }
                // 实例化校验对象，传入构造规则
                const validator = new Schema({
                  [propertyName]: ruleItem
                });
                validator.validate(
                  {
                    [propertyName]: propertyVal
                  },
                  (errors, fields) => {
                    if (test.array(errors)) {
                      errors.forEach((element) => {
                        element.prop = child.prop;
                      });
                      errorsRes.push(...errors);
                      childErrors.push(...errors);
                    }
                    //没有配置，或者配置了showErrorMsg为true时候，才修改子组件message，默认没有配置
                    if (!options || options?.showErrorMsg == true) {
                      child.message = childErrors[0]?.message ? childErrors[0].message : null;
                    }
                    if (i == rules.length - 1) {
                      resolve(errorsRes);
                    }
                  }
                );
              }
            } else {
              resolve({});
            }
          });
        });
        // 使用Promise.all来等待所有Promise完成
        Promise.all(promises)
          .then((results) => {
            // 执行回调函数
            typeof callback === 'function' && callback(errorsRes);
          })
          .catch((error) => {
            console.error('An error occurred:', error);
          });
      });
    },
    /**
     * 校验全部数据
     * @param {Object} options
     * @param {Boolean} options.showErrorMsg -是否显示校验信息，
     */
    validate(options) {
      // 开发环境才提示，生产环境不会提示
      if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
        error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
        return;
      }
      return new Promise((resolve, reject) => {
        // $nextTick是必须的，否则model的变更，可能会延后于validate方法
        this.$nextTick(() => {
          // 获取所有form-item的prop，交给validateField方法进行校验
          const formItemProps = this.children.map((item) => item.prop);
          // console.log(formItemProps)
          this.validateField(
            formItemProps,
            (errors) => {
              if (errors.length) {
                // 如果错误提示方式为toast，则进行提示
                this.errorType === 'toast' && toast(errors[0].message);
                reject(errors);
              } else {
                resolve(true);
              }
            },
            null,
            options
          );
        });
      });
    }
  }
+<template>
+  <view class="u-form">
+    <slot />
+  </view>
+</template>
+<script>
+import { props } from './props.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import Schema from '../../libs/util/async-validator';
+import { toast, getProperty, setProperty, deepClone, error } from '../../libs/function/index';
+import test from '../../libs/function/test';
+// 去除警告信息
+Schema.warning = function () {};
+/**
+ * Form 表单
+ * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+ * @tutorial https://ijry.github.io/uview-plus/components/form.html
+ * @property {Object}						model			当前form的需要验证字段的集合
+ * @property {Object | Function | Array}	rules			验证规则
+ * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
+ * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
+ * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
+ * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
+ * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 ‘left' ）
+ * @property {Object}						labelStyle		lable的样式，对象形式
+ * @example <up-formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></up-form>
+ */
+export default {
+  name: 'u-form',
+  mixins: [mpMixin, mixin, props],
+  provide() {
+    return {
+      uForm: this
+    };
+  },
+  data() {
+    return {
+      formRules: {},
+      // 规则校验器
+      validator: {},
+      // 原始的model快照，用于resetFields方法重置表单时使用
+      originalModel: null
+    };
+  },
+  watch: {
+    // 监听规则的变化
+    rules: {
+      immediate: true,
+      handler(n) {
+        this.setRules(n);
+      }
+    },
+    // 监听属性的变化，通知子组件u-form-item重新获取信息
+    propsChange(n) {
+      if (this.children?.length) {
+        this.children.map((child) => {
+          // 判断子组件(u-form-item)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+          typeof child.updateParentData == 'function' && child.updateParentData();
+        });
+      }
+    },
+    // 监听model的初始值作为重置表单的快照
+    model: {
+      immediate: true,
+      handler(n) {
+        if (!this.originalModel) {
+          this.originalModel = deepClone(n);
+        }
+      }
+    }
+  },
+  computed: {
+    propsChange() {
+      return [this.errorType, this.borderBottom, this.labelPosition, this.labelWidth, this.labelAlign, this.labelStyle];
+    }
+  },
+  created() {
+    // 存储当前form下的所有u-form-item的实例
+    // 不能定义在data中，否则微信小程序会造成循环引用而报错
+    this.children = [];
+  },
+  methods: {
+    // 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+    setRules(rules) {
+      // 判断是否有规则
+      if (Object.keys(rules).length === 0) return;
+      if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) {
+        error('设置rules，model必须设置！如果已经设置，请刷新页面。');
+        return;
+      }
+      this.formRules = rules;
+      // 重新将规则赋予Validator
+      this.validator = new Schema(rules);
+    },
+    // 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
+    resetFields() {
+      this.resetModel();
+    },
+    // 重置model为初始值的快照
+    resetModel(obj) {
+      // 历遍所有u-form-item，根据其prop属性，还原model的原始快照
+      this.children.map((child) => {
+        const prop = child?.prop;
+        const value = getProperty(this.originalModel, prop);
+        setProperty(this.model, prop, value);
+      });
+    },
+    // 清空校验结果
+    clearValidate(props) {
+      props = [].concat(props);
+      this.children.map((child) => {
+        // 如果u-form-item的prop在props数组中，则清除对应的校验结果信息
+        if (props[0] === undefined || props.includes(child.prop)) {
+          child.message = null;
+        }
+      });
+    },
+    // 对部分表单字段进行校验
+    async validateField(value, callback, event = null, options) {
+      // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
+      this.$nextTick(() => {
+        // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+        const errorsRes = [];
+        // 如果为字符串，转为数组
+        value = [].concat(value);
+        // 历遍children所有子form-item
+        let promises = this.children.map((child) => {
+          return new Promise((resolve, reject) => {
+            // 用于存放form-item的错误信息
+            const childErrors = [];
+            if (value.includes(child.prop)) {
+              // 获取对应的属性，通过类似'a.b.c'的形式
+              const propertyVal = getProperty(this.model, child.prop);
+              // 属性链数组
+              const propertyChain = child.prop.split('.');
+              const propertyName = propertyChain[propertyChain.length - 1];
+              let rule = [];
+              if (child.itemRules && child.itemRules.length > 0) {
+                rule = child.itemRules;
+              } else {
+                rule = this.formRules[child.prop];
+              }
+              // 如果不存在对应的规则，直接返回，否则校验器会报错
+              if (!rule) {
+                resolve();
+                return;
+              }
+              // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+              const rules = [].concat(rule);
+              // 对rules数组进行校验
+              if (!rules.length) {
+                resolve();
+              }
+              for (let i = 0; i < rules.length; i++) {
+                const ruleItem = rules[i];
+                // 将u-form-item的触发器转为数组形式
+                const trigger = [].concat(ruleItem?.trigger);
+                // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
+                if (event && !trigger.includes(event)) {
+                  resolve();
+                  continue;
+                }
+                // 实例化校验对象，传入构造规则
+                const validator = new Schema({
+                  [propertyName]: ruleItem
+                });
+                validator.validate(
+                  {
+                    [propertyName]: propertyVal
+                  },
+                  (errors, fields) => {
+                    if (test.array(errors)) {
+                      errors.forEach((element) => {
+                        element.prop = child.prop;
+                      });
+                      errorsRes.push(...errors);
+                      childErrors.push(...errors);
+                    }
+                    //没有配置，或者配置了showErrorMsg为true时候，才修改子组件message，默认没有配置
+                    if (!options || options?.showErrorMsg == true) {
+                      child.message = childErrors[0]?.message ? childErrors[0].message : null;
+                    }
+                    if (i == rules.length - 1) {
+                      resolve(errorsRes);
+                    }
+                  }
+                );
+              }
+            } else {
+              resolve({});
+            }
+          });
+        });
+        // 使用Promise.all来等待所有Promise完成
+        Promise.all(promises)
+          .then((results) => {
+            // 执行回调函数
+            typeof callback === 'function' && callback(errorsRes);
+          })
+          .catch((error) => {
+            console.error('An error occurred:', error);
+          });
+      });
+    },
+    /**
+     * 校验全部数据
+     * @param {Object} options
+     * @param {Boolean} options.showErrorMsg -是否显示校验信息，
+     */
+    validate(options) {
+      // 开发环境才提示，生产环境不会提示
+      if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
+        error('未设置rules，请看文档说明！如果已经设置，请刷新页面。');
+        return;
+      }
+      return new Promise((resolve, reject) => {
+        // $nextTick是必须的，否则model的变更，可能会延后于validate方法
+        this.$nextTick(() => {
+          // 获取所有form-item的prop，交给validateField方法进行校验
+          const formItemProps = this.children.map((item) => item.prop);
+          // console.log(formItemProps)
+          this.validateField(
+            formItemProps,
+            (errors) => {
+              if (errors.length) {
+                // 如果错误提示方式为toast，则进行提示
+                this.errorType === 'toast' && toast(errors[0].message);
+                reject(errors);
+              } else {
+                resolve(true);
+              }
+            },
+            null,
+            options
+          );
+        });
+      });
+    }
+  }
+};
+</script>
+<style scoped></style>

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

@@ -26,7 +26,7 @@
             <!-- nvue不支持伪元素before -->
             <text v-if="required" class="u-form-item__body__left__content__required">*</text>
             <view class="u-form-item__body__left__content__icon" v-if="leftIcon">
-              <u-icon :name="leftIcon" :custom-style="leftIconStyle"></u-icon>
+              <up-icon :name="leftIcon" :custom-style="leftIconStyle"></up-icon>
             </view>
             <text
               class="u-form-item__body__left__content__label"
@@ -65,11 +65,11 @@
         {{ message }}
       </text>
     </slot>
-    <u-line
+    <up-line
       v-if="borderBottom"
       :color="message && parentData.errorType === 'border-bottom' ? color.error : propsLine.color"
       :customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
-    ></u-line>
+    ></up-line>
   </view>
 </template>
 <script>
@@ -93,7 +93,7 @@ import { addStyle, addUnit, getProperty, setProperty, error } from '../../libs/f
  * @property {String | Object} leftIconStyle    左侧图标的样式
  * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
  *
- * @example <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></u-form-item>
+ * @example <up-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></up-form-item>
  */
 export default {
   name: 'u-form-item',

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

@@ -16,7 +16,7 @@ import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
  * @property {String | Number}	marginBottom	与后一个组件的距离，单位px （默认 0 ）
  * @property {Object}			customStyle		定义需要用到的外部样式
  *
- * @example <u-gap height="80" bg-color="#bbb"></u-gap>
+ * @example <up-gap height="80" bg-color="#bbb"></up-gap>
  */
 export default {
   name: 'u-gap',

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

@@ -17,7 +17,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
  * @property {String}			align		宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）
  * @property {Object}			customStyle	定义需要用到的外部样式
  * @event {Function} click 点击宫格触发
- * @example <u-grid :col="3" @click="click"></u-grid>
+ * @example <up-grid :col="3" @click="click"></up-grid>
  */
 export default {
   name: 'u-grid',

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

@@ -31,7 +31,7 @@ import { addStyle, deepMerge } from '../../libs/function/index';
  * @property {String}			bgColor		宫格的背景颜色 （默认 'transparent' ）
  * @property {Object}			customStyle	自定义样式，对象形式
  * @event {Function} click 点击宫格触发
- * @example <u-grid-item></u-grid-item>
+ * @example <up-grid-item></up-grid-item>
  */
 export default {
   name: 'u-grid-item',

package/uview-plus/components/u-icon/u-icon.vue

@@ -53,7 +53,7 @@ import { addUnit, addStyle } from '../../libs/function/index';
  * @property {Object}			customStyle		icon的样式，对象形式
  * @event {Function} click 点击图标时触发
  * @event {Function} touchstart 事件触摸时触发
- * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ * @example <up-icon name="photo" color="#2979ff" size="28"></up-icon>
  */
 export default {
   name: 'u-icon',

package/uview-plus/components/u-icon/u-icon2.vue

@@ -58,7 +58,7 @@ import props from './props.js';
  * @property {Object}			customStyle		icon的样式，对象形式
  * @event {Function} click 点击图标时触发
  * @event {Function} touchstart 事件触摸时触发
- * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
+ * @example <up-icon name="photo" color="#2979ff" size="28"></up-icon>
  */
 export default {
   name: 'wu-icon',

package/uview-plus/components/u-image/u-image.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-transition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
+  <up-transition mode="fade" :show="show" :style="transStyle" :duration="fade ? 1000 : 0">
     <view class="u-image box-border" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
       <image
         v-if="!isError"
@@ -27,7 +27,7 @@
         }"
       >
         <slot name="loading">
-          <u-icon :name="loadingIcon"></u-icon>
+          <up-icon :name="loadingIcon"></up-icon>
         </slot>
       </view>
       <view
@@ -38,11 +38,11 @@
         }"
       >
         <slot name="error">
-          <u-icon :name="errorIcon"></u-icon>
+          <up-icon :name="errorIcon"></up-icon>
         </slot>
       </view>
     </view>
-  </u-transition>
+  </up-transition>
 </template>
 <script>
 import { props } from './props';
@@ -73,7 +73,7 @@ import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
  * @event {Function}	click	点击图片时触发
  * @event {Function}	error	图片加载失败时触发
  * @event {Function} load 图片加载成功时触发
- * @example <u-image width="100%" height="300px" :src="src"></u-image>
+ * @example <up-image width="100%" height="300px" :src="src"></up-image>
  */
 export default {
   name: 'u-image',

package/uview-plus/components/u-image-wu/u-image-wu.vue

@@ -1,5 +1,5 @@
 <template>
-  <u-transition mode="fade" :custom-style="wrapStyle" :show="show" :duration="fade ? 1000 : 0">
+  <up-transition mode="fade" :custom-style="wrapStyle" :show="show" :duration="fade ? 1000 : 0">
     <view class="u-image" @tap="onClick" :style="[wrapStyle, backgroundStyle]">
       <image
         v-if="!isError && loadingImage"
@@ -26,7 +26,7 @@
         }"
       >
         <slot name="loading">
-          <u-icon :name="loadingIcon" :width="width" :height="height"></u-icon>
+          <up-icon :name="loadingIcon" :width="width" :height="height"></up-icon>
         </slot>
       </view>
       <view
@@ -39,11 +39,11 @@
         }"
       >
         <slot name="error">
-          <u-icon :name="errorIcon" :width="width" :height="height"></u-icon>
+          <up-icon :name="errorIcon" :width="width" :height="height"></up-icon>
         </slot>
       </view>
     </view>
-  </u-transition>
+  </up-transition>
 </template>
 
 <script>
@@ -76,7 +76,7 @@ import props from './props.js';
  * @event {Function}	click	点击图片时触发
  * @event {Function}	error	图片加载失败时触发
  * @event {Function} load 图片加载成功时触发
- * @example <u-image width="100%" height="300px" :src="src"></u-image>
+ * @example <up-image width="100%" height="300px" :src="src"></up-image>
  */
 export default {
   name: 'u-image',

package/uview-plus/components/u-index-anchor/u-index-anchor.vue

@@ -41,7 +41,7 @@ const dom = uni.requireNativePlugin('dom');
  * @property {String | Number}	size	列表锚点文字大小，单位默认px ( 默认 14 )
  * @property {String}			bgColor	列表锚点背景颜色 ( 默认 '#dedede' )
  * @property {String | Number}	height	列表锚点高度，单位默认px ( 默认 32 )
- * @example <u-index-anchor :text="indexList[index]"></u-index-anchor>
+ * @example <up-index-anchor :text="indexList[index]"></up-index-anchor>
  */
 export default {
   name: 'u-index-anchor',