@10yun/cv-mobile-ui 0.5.53 → 0.5.55

package/uni-ui/lib/uni-forms/changelog.md

@@ -0,0 +1,100 @@
+## 1.4.13（2024-10-08）
+- 修复 校验规则在抖音开发者工具上不生效的bug，详见：[https://ask.dcloud.net.cn/question/191933](https://ask.dcloud.net.cn/question/191933)
+## 1.4.12 (2024-9-21)
+- 修复 form上次修改的问题
+## 1.4.11 (2024-9-14)
+- 修复 binddata的兼容性问题
+## 1.4.10（2023-11-03）
+- 优化 labelWidth 描述错误
+## 1.4.9（2023-02-10）
+- 修复 required 参数无法动态绑定
+## 1.4.8（2022-08-23）
+- 优化 根据 rules 自动添加 required 的问题
+## 1.4.7（2022-08-22）
+- 修复 item 未设置 require 属性，rules 设置 require 后，星号也显示的 bug，详见：[https://ask.dcloud.net.cn/question/151540](https://ask.dcloud.net.cn/question/151540)
+## 1.4.6（2022-07-13）
+- 修复 model 需要校验的值没有声明对应字段时，导致第一次不触发校验的bug
+## 1.4.5（2022-07-05）
+- 新增 更多表单示例
+- 优化 子表单组件过期提示的问题
+- 优化 子表单组件uni-datetime-picker、uni-data-select、uni-data-picker的显示样式
+## 1.4.4（2022-07-04）
+- 更新 删除组件日志
+## 1.4.3（2022-07-04）
+- 修复 由 1.4.0 引发的 label 插槽不生效的bug
+## 1.4.2（2022-07-04）
+- 修复 子组件找不到 setValue 报错的bug
+## 1.4.1（2022-07-04）
+- 修复 uni-data-picker 在 uni-forms-item 中报错的bug
+- 修复 uni-data-picker 在 uni-forms-item 中宽度不正确的bug
+## 1.4.0（2022-06-30）
+- 【重要】组件逻辑重构，部分用法用旧版本不兼容，请注意兼容问题
+- 【重要】组件使用 Provide/Inject 方式注入依赖，提供了自定义表单组件调用 uni-forms 校验表单的能力
+- 新增 model 属性，等同于原 value/modelValue 属性，旧属性即将废弃
+- 新增 validateTrigger 属性的 blur 值，仅 uni-easyinput 生效
+- 新增 onFieldChange 方法，可以对子表单进行校验，可替代binddata方法
+- 新增 子表单的 setRules 方法，配合自定义校验函数使用
+- 新增 uni-forms-item 的 setRules 方法，配置动态表单使用可动态更新校验规则
+- 优化 动态表单校验方式，废弃拼接name的方式
+## 1.3.3（2022-06-22）
+- 修复 表单校验顺序无序问题
+## 1.3.2（2021-12-09）
+-
+## 1.3.1（2021-11-19）
+- 修复 label 插槽不生效的bug
+## 1.3.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-forms](https://uniapp.dcloud.io/component/uniui/uni-forms)
+## 1.2.7（2021-08-13）
+- 修复 没有添加校验规则的字段依然报错的Bug
+## 1.2.6（2021-08-11）
+- 修复 重置表单错误信息无法清除的问题
+## 1.2.5（2021-08-11）
+- 优化 组件文档
+## 1.2.4（2021-08-11）
+- 修复 表单验证只生效一次的问题
+## 1.2.3（2021-07-30）
+- 优化 vue3下事件警告的问题
+## 1.2.2（2021-07-26）
+- 修复 vue2 下条件编译导致destroyed生命周期失效的Bug
+- 修复 1.2.1 引起的示例在小程序平台报错的Bug
+## 1.2.1（2021-07-22）
+- 修复 动态校验表单，默认值为空的情况下校验失效的Bug
+- 修复 不指定name属性时，运行报错的Bug
+- 优化 label默认宽度从65调整至70，使required为true且四字时不换行
+- 优化 组件示例，新增动态校验示例代码
+- 优化 组件文档，使用方式更清晰
+## 1.2.0（2021-07-13）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.1.2（2021-06-25）
+- 修复 pattern 属性在微信小程序平台无效的问题
+## 1.1.1（2021-06-22）
+- 修复 validate-trigger属性为submit且err-show-type属性为toast时不能弹出的Bug
+## 1.1.0（2021-06-22）
+- 修复 只写setRules方法而导致校验不生效的Bug
+- 修复 由上个办法引发的错误提示文字错位的Bug
+## 1.0.48（2021-06-21）
+- 修复 不设置 label 属性 ，无法设置label插槽的问题
+## 1.0.47（2021-06-21）
+- 修复 不设置label属性，label-width属性不生效的bug
+- 修复 setRules 方法与rules属性冲突的问题
+## 1.0.46（2021-06-04）
+- 修复 动态删减数据导致报错的问题
+## 1.0.45（2021-06-04）
+- 新增 modelValue 属性 ，value 即将废弃
+## 1.0.44（2021-06-02）
+- 新增 uni-forms-item 可以设置单独的 rules
+- 新增 validate 事件增加 keepitem 参数，可以选择那些字段不过滤
+- 优化 submit 事件重命名为 validate
+## 1.0.43（2021-05-12）
+- 新增 组件示例地址
+## 1.0.42（2021-04-30）
+- 修复 自定义检验器失效的问题
+## 1.0.41（2021-03-05）
+- 更新 校验器
+- 修复 表单规则设置类型为 number 的情况下，值为0校验失败的Bug
+## 1.0.40（2021-03-04）
+- 修复 动态显示uni-forms-item的情况下，submit 方法获取值错误的Bug
+## 1.0.39（2021-02-05）
+- 调整为uni_modules目录规范
+- 修复 校验器传入 int 等类型 ，返回String类型的Bug

package/uni-ui/lib/uni-forms/package.json

@@ -0,0 +1,107 @@
+{
+  "id": "uni-forms",
+  "displayName": "uni-forms 表单",
+  "version": "1.4.13",
+  "description": "由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据",
+  "keywords": [
+    "uni-ui",
+    "表单",
+    "校验",
+    "表单校验",
+    "表单验证"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "",
+    "uni-app": "^4.05",
+    "uni-app-x": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss",
+      "uni-icons"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "x",
+        "aliyun": "x",
+        "alipay": "x"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": "√",
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "-",
+            "jd": "-",
+            "harmony": "-",
+            "qq": "√",
+            "lark": "-"
+          },
+          "quickapp": {
+            "huawei": "√",
+            "union": "√"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "-",
+            "chrome": "-"
+          },
+          "app": {
+            "android": "-",
+            "ios": "-",
+            "harmony": "-"
+          },
+          "mp": {
+            "weixin": "-"
+          }
+        }
+      }
+    }
+  }
+}

package/uni-ui/lib/uni-forms/readme.md

@@ -0,0 +1,22 @@
+
+
+## Forms 表单
+
+> **组件名：uni-forms**
+> 代码块： `uForms`、`uni-forms-item`
+> 关联组件：`uni-forms-item`、`uni-easyinput`、`uni-data-checkbox`、`uni-group`。
+
+
+uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
+
+然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，`uni ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件，内置了表单验证功能。
+
+`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `binddata()` 来设置表单值。
+
+每个要校验的表单项，不管input还是checkbox，都必须放在`<uni-forms-item>`组件中，且一个`<uni-forms-item>`组件只能放置一个表单项。
+
+`<uni-forms-item>`组件内部预留了显示error message的区域，默认是在表单项的底部。
+
+另外，`<uni-forms>`组件下面的各个表单项，可以通过`<uni-group>`包裹为不同的分组。同一`<uni-group>`下的不同表单项目将聚拢在一起，同其他group保持垂直间距。`<uni-group>`仅影响视觉效果。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-forms)

package/uni-ui/lib/uni-forms/uni-forms.vue

@@ -5,6 +5,7 @@
     </form>
   </view>
 </template>
+
 <script>
 import Validator from './validate.js';
 import {
@@ -18,6 +19,7 @@ import {
   rawData,
   isEqual
 } from './utils.js';
+
 // #ifndef VUE3
 // 后续会慢慢废弃这个方法
 import Vue from 'vue';
@@ -50,7 +52,7 @@ Vue.prototype.binddata = function (name, value, formName) {
  * @property {String} labelPosition = [top|left]	label 位置 默认 left
  * @value top		顶部显示 label
  * @value left	左侧显示 label
- * @property {String} labelWidth	label 宽度，默认 65px
+ * @property {String} labelWidth	label 宽度，默认 70px
  * @property {String} labelAlign = [left|center|right]	label 居中方式  默认 left
  * @value left		label 左侧显示
  * @value center	label 居中
@@ -66,7 +68,12 @@ export default {
   name: 'uniForms',
   emits: ['validate', 'submit'],
   options: {
+    // #ifdef MP-TOUTIAO
+    virtualHost: false,
+    // #endif
+    // #ifndef MP-TOUTIAO
     virtualHost: true
+    // #endif
   },
   props: {
     // 即将弃用
@@ -178,11 +185,14 @@ export default {
             }
           }
           if (!formVm) return console.error('当前 uni-froms 组件缺少 ref 属性');
-          formVm.setValue(name, value);
+          if (formVm.model) formVm.model[name] = value;
+          if (formVm.modelValue) formVm.modelValue[name] = value;
+          if (formVm.value) formVm.value[name] = value;
         }
       };
     }
     // #endif
+
     // 子组件实例数组
     this.childrens = [];
     // TODO 兼容旧版 uni-data-picker ,新版本中无效，只是避免报错
@@ -201,6 +211,7 @@ export default {
       // 初始化校验函数
       this.validator = new Validator(rules);
     },
+
     /**
      * 外部调用方法
      * 设置数据，用于设置表单数据，公开给用户使用 ， 不支持在动态表单中使用
@@ -213,6 +224,7 @@ export default {
       this.formData[key] = getValue(key, value, (this.formRules[key] && this.formRules[key].rules) || []);
       return example.onFieldChange(this.formData[key]);
     },
+
     /**
      * 外部调用方法
      * 手动提交校验表单
@@ -223,6 +235,7 @@ export default {
     validate(keepitem, callback) {
       return this.checkAll(this.formData, keepitem, callback);
     },
+
     /**
      * 外部调用方法
      * 部分表单校验
@@ -242,6 +255,7 @@ export default {
       });
       return this.checkAll(invalidFields, [], callback);
     },
+
     /**
      * 外部调用方法
      * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
@@ -260,6 +274,7 @@ export default {
         }
       });
     },
+
     /**
      * 外部调用方法 ，即将废弃
      * 手动提交校验表单
@@ -276,11 +291,14 @@ export default {
           }
         }
       }
+
       if (!type) {
         console.warn('submit 方法即将废弃，请使用validate方法代替！');
       }
+
       return this.checkAll(this.formData, keepitem, callback, 'submit');
     },
+
     // 校验所有
     async checkAll(invalidFields, keepitem, callback, type) {
       // 不存在校验规则 ，则停止校验流程
@@ -293,10 +311,12 @@ export default {
           childrens.push(item);
         }
       }
+
       // 如果validate第一个参数是funciont ,那就走回调
       if (!callback && typeof keepitem === 'function') {
         callback = keepitem;
       }
+
       let promise;
       // 如果不存在回调，那么使用 Promise 方式返回
       if (!callback && typeof callback !== 'function' && Promise) {
@@ -306,6 +326,7 @@ export default {
           };
         });
       }
+
       let results = [];
       // 避免引用错乱 ，建议拷贝对象处理
       let tempFormData = JSON.parse(JSON.stringify(invalidFields));
@@ -320,6 +341,7 @@ export default {
           if (this.errShowType === 'toast' || this.errShowType === 'modal') break;
         }
       }
+
       if (Array.isArray(results)) {
         if (results.length === 0) results = null;
       }
@@ -332,6 +354,7 @@ export default {
           }
         });
       }
+
       // TODO submit 即将废弃
       if (type === 'submit') {
         this.$emit('submit', {
@@ -343,16 +366,19 @@ export default {
       } else {
         this.$emit('validate', results);
       }
+
       // const resetFormData = rawData(tempFormData, this.localData, this.name)
       let resetFormData = {};
       resetFormData = rawData(tempFormData, this.name);
       callback && typeof callback === 'function' && callback(results, resetFormData);
+
       if (promise && callback) {
         return promise;
       } else {
         return null;
       }
     },
+
     /**
      * 返回validate事件
      * @param {Object} result
@@ -371,5 +397,6 @@ export default {
 };
 </script>
 <style>
-@import 'style.css';
+.uni-forms {
+}
 </style>

package/uni-ui/lib/uni-forms-item/uni-forms-item.vue

@@ -37,6 +37,7 @@
     <!-- #endif -->
   </view>
 </template>
+
 <script>
 /**
  * uni-fomrs-item 表单子组件
@@ -44,7 +45,7 @@
  * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
  * @property {Boolean} required 是否必填，左边显示红色"*"号
  * @property {String } 	label 				输入框左边的文字提示
- * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
+ * @property {Number } 	labelWidth 			label的宽度，单位px（默认70）
  * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
  * 	@value left		label 左侧显示
  * 	@value center	label 居中
@@ -61,10 +62,16 @@
  * 	@value top	顶部显示 label
  * 	@value left	左侧显示 label
  */
+
 export default {
   name: 'uniFormsItem',
   options: {
+    // #ifdef MP-TOUTIAO
+    virtualHost: false,
+    // #endif
+    // #ifndef MP-TOUTIAO
     virtualHost: true
+    // #endif
   },
   provide() {
     return {
@@ -98,7 +105,7 @@ export default {
       type: String,
       default: ''
     },
-    // label的宽度 ，默认 80
+    // label的宽度
     labelWidth: {
       type: [String, Number],
       default: ''
@@ -135,7 +142,7 @@ export default {
       errMsg: '',
       userRules: null,
       localLabelAlign: 'left',
-      localLabelWidth: '65px',
+      localLabelWidth: '70px',
       localLabelPos: 'left',
       border: false,
       isFirstBorder: false
@@ -174,6 +181,7 @@ export default {
         this.init();
       });
       // #endif
+
       // 监听变化
       this.$watch(
         () => {
@@ -237,9 +245,11 @@ export default {
       }
       // fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
       // this.errMsg = '';
+
       // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
       const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
       if (!this.validator || !ruleLen || ruleLen === 0) return;
+
       // 检验时机
       // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
       const isRequiredField = _isRequiredField(this.itemRules.rules || []);
@@ -253,10 +263,12 @@ export default {
           },
           formData
         );
+
         // 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
         if (!isRequiredField && (value === undefined || value === '')) {
           result = null;
         }
+
         // 判断错误信息显示类型
         if (result && result.errorMessage) {
           if (errShowType === 'undertext') {
@@ -299,12 +311,14 @@ export default {
       this.localLabelPos = this._labelPosition();
       // 将需要校验的子组件加入form 队列
       this.form && type && childrens.push(this);
+
       if (!validator || !formRules) return;
       // 判断第一个 item
       if (!this.form.isFirstBorder) {
         this.form.isFirstBorder = true;
         this.isFirstBorder = true;
       }
+
       // 判断 group 里的第一个 item
       if (this.group) {
         if (!this.group.isFirstBorder) {
@@ -350,12 +364,14 @@ export default {
       this.form._setDataValue(name, this.form.formData, val);
       return val;
     },
+
     /**
      * 移除该表单项的校验结果
      */
     clearValidate() {
       this.errMsg = '';
     },
+
     // 是否显示星号
     _isRequired() {
       // TODO 不根据规则显示 星号，考虑后续兼容
@@ -367,6 +383,7 @@ export default {
       // }
       return this.required;
     },
+
     // 处理对齐方式
     _justifyContent() {
       if (this.form) {
@@ -384,15 +401,16 @@ export default {
       // 	const {
       // 		labelWidth
       // 	} = this.form
-      return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 65 : 'auto'));
+      return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 70 : 'auto'));
       // }
-      // return '65px'
+      // return '70px'
     },
     // 处理 label 位置
     _labelPosition() {
       if (this.form) return this.form.labelPosition || 'left';
       return 'left';
     },
+
     /**
      * 触发时机
      * @param {Object} rule 当前规则内时机
@@ -425,5 +443,162 @@ export default {
 };
 </script>
 <style>
-@import 'style.css';
+.uni-forms-item {
+  position: relative;
+  display: flex;
+  /* #ifdef APP-NVUE */
+  /* // 在 nvue 中，使用 margin-bottom error 信息会被隐藏 */
+  padding-bottom: 22px;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  margin-bottom: 22px;
+  /* #endif */
+  flex-direction: row;
+}
+.uni-forms-item__label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-align: left;
+  font-size: 14px;
+  color: #606266;
+  height: 36px;
+  padding: 0 12px 0 0;
+  /* #ifndef APP-NVUE */
+  vertical-align: middle;
+  flex-shrink: 0;
+  /* #endif */
+
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+}
+.uni-forms-item__label.no-label {
+  padding: 0;
+}
+.uni-forms-item__content {
+  /* #ifndef MP-TOUTIAO */
+  /*// display: flex; */
+  /*// align-items: center; */
+  /* #endif */
+  position: relative;
+  font-size: 14px;
+  flex: 1;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+}
+
+/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
+/* // TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式 */
+.uni-forms-item__content > uni-easyinput,
+.uni-forms-item__content > uni-data-picker {
+  width: 100%;
+}
+
+/* #endif */
+
+.uni-forms-item .uni-forms-item__nuve-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.uni-forms-item__error {
+  color: #f56c6c;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  /* #ifndef APP-NVUE */
+  top: 100%;
+  left: 0;
+  transition: transform 0.3s;
+  transform: translateY(-100%);
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  bottom: 5px;
+  /* #endif */
+  opacity: 0;
+}
+
+.uni-forms-item__error .error-text {
+  /* // 只有 nvue 下这个样式才生效 */
+  color: #f56c6c;
+  font-size: 12px;
+}
+
+.uni-forms-item__error.msg--active {
+  opacity: 1;
+  transform: translateY(0%);
+}
+/* // 位置修饰样式 */
+.uni-forms-item.is-direction-left {
+  flex-direction: row;
+}
+
+.uni-forms-item.is-direction-top {
+  flex-direction: column;
+}
+.uni-forms-item.is-direction-top .uni-forms-item__label {
+  padding: 0 0 8px;
+  line-height: 1.5715;
+  text-align: left;
+  /* #ifndef APP-NVUE */
+  white-space: initial;
+  /* #endif */
+}
+
+.uni-forms-item .is-required {
+  /* // color: $uni-color-error; */
+  color: #dd524d;
+  font-weight: bold;
+}
+.uni-forms-item--border {
+  margin-bottom: 0;
+  padding: 10px 0;
+  /* // padding-bottom: 0; */
+  border-top: 1px #eee solid;
+
+  /* #ifdef APP-NVUE */
+  display: flex;
+  flex-direction: column;
+  /* #endif */
+}
+
+/* #ifndef APP-NVUE */
+.uni-forms-item--border .uni-forms-item__content {
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.uni-forms-item--border .uni-forms-item__content .uni-forms-item__error {
+  position: relative;
+  top: 5px;
+  left: 0;
+  padding-top: 0;
+}
+
+/* #endif */
+/* #ifdef APP-NVUE */
+
+.uni-forms-item--border .uni-forms-item__error {
+  position: relative;
+  top: 0px;
+  left: 0;
+  padding-top: 0;
+  margin-top: 5px;
+}
+
+/* #endif */
+
+.is-first-border {
+  /* #ifndef APP-NVUE */
+  border: none;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  border-width: 0;
+  /* #endif */
+}
 </style>