mali-applet-ui 0.0.100 → 0.1.0

package/components/ml-form/ml-form.vue

@@ -26,7 +26,6 @@ export default {
   name: 'MlForm',
   props: {
     value: Object,
-    data: Object,
     items: Array,
     rules: Object,
 		align: String,
@@ -49,14 +48,58 @@ export default {
   },
   methods: {
     validate () {
-      return new  Promise(resolve => {
-        resolve()
-      })
+      let errMaps = null
+      for (let i = 0; i < this.itemList.length; i++) {
+        const item = this.itemList[i]
+        const errRule = this.validRule(item)
+        if (errRule) {
+          if (!errMaps) {
+            errMaps = {}
+          }
+          errMaps[item.field] = errRule
+          item.errRule = { field: item.field, message: errRule.message }
+        } else {
+          item.errRule = null
+        }
+      }
+      return errMaps ? Promise.resolve(errMaps) : Promise.resolve()
     },
-    validateField (fields) {
-      return new  Promise(resolve => {
-        resolve()
-      })
+    validateField (field) {
+      let errMaps = null
+      if (field) {
+        const item = this.itemList.find(item => item.field === field)
+        if (item) {
+          const errRule = this.validRule(item)
+          if (errRule) {
+            errMaps = { [field]: errRule }
+            item.errRule = { field, message: errRule.message }
+          } else {
+            item.errRule = null
+          }
+        }
+      }
+      return errMaps ? Promise.resolve(errMaps) : Promise.resolve()
+    },
+    validRule (item) {
+      const rules = item && this.rules ? this.rules[item.field] : null
+      const itemValue = item && this.value ? this.value[item.field] : null
+      let errRule = null
+      if (rules) {
+        for (let i = 0; i < rules.length; i++) {
+          const rule = rules[i]
+          if (rule.required) {
+            if (!itemValue) {
+              errRule = rule
+              break
+            }
+            if (rule.type === 'array' && !itemValue.length) {
+              errRule = rule
+              break
+            }
+          }
+        }
+      }
+      return errRule
     },
     updateModel ({ field, value }) {
       this.$emit('input', { ...this.value, [field]: value })

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-form-item" :class="[className, '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired}]">
+  <view class="ml-form-item" :class="[className || '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired, 'is-error': itemErrRule}]">
     <view class="ml-form-item-header" :style="titleStyle">
       <view v-if="isRequired" class="ml-form-item-header-asterisk">*</view>
       <view class="ml-form-item-header-title">
@@ -19,6 +19,7 @@
           <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
         </slot>
       </view>
+      <view class="ml-form-item-content-error">{{ itemErrRule.message }}</view>
     </view>
   </view>
 </template>
@@ -47,18 +48,31 @@ export default {
       default: null
     }
   },
+  provide() {
+    return {
+      mlFormItem: this
+    }
+  },
   data () {
     return {
       mId: XEUtils.uniqueId('mlFItem')
     }
   },
+  watch: {
+    itemValue () {
+      if (this.form) {
+        this.form.validateField(this.field)
+      }
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       if (this.form) {
         this.form.itemList.push({
           mId: this.mId,
           title: this.title,
-          field: this.field
+          field: this.field,
+          errRule: null
         })
       }
     })
@@ -84,6 +98,13 @@ export default {
       }
       return false
     },
+    itemErrRule () {
+      if (this.form) {
+        const item = this.form.itemList.find(item => item.mId === this.mId)
+        return item ? item.errRule : null
+      }
+      return null
+    },
     itemValue () {
       const value = this.formData[this.field]
       return XEUtils.eqNull(value) ? '' : value
@@ -147,6 +168,12 @@ export default {
       border: 0;
     }
   }
+  &.is-error {
+    .ml-form-item-content-error {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
   .ml-form-item-header {
     min-height: 70rpx;
     color: rgba(0, 0, 0, 0.65);
@@ -204,8 +231,10 @@ export default {
   }
 }
 .ml-form-item-content {
+  position: relative;
   display: flex;
   align-items: center;
+  flex-direction: column;
   flex-grow: 1;
 }
 .ml-form-item-content-warpper {
@@ -213,4 +242,17 @@ export default {
   width: 100%;
   padding: 10rpx 0;
 }
+.ml-form-item-content-error {
+  position: absolute;
+  left: 0;
+  bottom: -20rpx;
+  width: 100%;
+  color: $uni-color-error;
+  font-size: 24rpx;
+  text-align: left;
+  opacity: 0;
+  transform-origin: center top;
+  transform: scaleY(0);
+  transition: all 0.3s;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.0.100",
+  "version": "0.1.0",
   "description": "码里云小程序组件库",
   "files": [
     "components",