Merge pull request #71 from eleme/feat/form

update form

package.json

@@ -43,7 +43,6 @@
     "oui-dom-events": "^0.2.1",
     "postcss": "^5.0.21",
     "purecss": "^0.6.0",
-    "q": "^1.4.1",
     "uppercamelcase": "^1.1.0",
     "vue-loader": "^9.3.2",
     "vue": "^2.0.0-rc.2",

packages/checkbox/src/checkbox-group.vue

@@ -7,16 +7,13 @@
     mixins: [emitter],
 
     props: {
-      value: {
-        default: '',
-        required: true
-      }
+      value: {}
     },
 
     watch: {
       value(value) {
         this.$emit('change', value);
-        this.dispatch('form-item', 'el.form.change', value);
+        this.dispatch('form-item', 'el.form.change', [value]);
       }
     }
   };

packages/form/package.json

@@ -12,6 +12,6 @@
   "author": "haiping.zeng<haiping.zeng@ele.me>",
   "license": "MIT",
   "dependencies": {
-    "async-validator": "^1.6.3"
+    "async-validator": "^1.6.5"
   }
 }

packages/form/src/form-item.vue

@@ -2,14 +2,16 @@
   <div class="el-form-item" :class="{
     'is-error': error !== '',
     'is-validating': validating,
-    'is-required': required
+    'is-required': isRequired || required
   }">
     <label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
       {{label + form.labelSuffix}}
     </label>
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
-      <div class="el-form-item__error" v-if="error !== ''" transition="md-fade-bottom">{{error}}</div>
+      <transition name="md-fade-bottom">
+        <div class="el-form-item__error" v-if="error !== ''">{{error}}</div>
+      </transition>
     </div>
   </div>
 </template>
@@ -50,24 +52,23 @@
       },
       form() {
         var parent = this.$parent;
-        while (parent.$el.tagName !== 'FORM') {
+        while (parent.$options.componentName !== 'form') {
           parent = parent.$parent;
         }
         return parent;
       },
-      fieldValue() {
-        var model = this.form.model;
-        if (!model) { return; }
-
-        if (!model[this.prop]) {
-          let temp = this.prop.split(':');
-          return model[temp[0]][temp[1]];
-        } else {
-          return model[this.prop];
+      fieldValue: {
+        cache: false,
+        get() {
+          var model = this.form.model;
+          if (!model || !this.prop) { return; }
+
+          var temp = this.prop.split(':');
+
+          return temp.length > 1
+            ? model[temp[0]][temp[1]]
+            : model[this.prop];
         }
-      },
-      fieldRule() {
-        return this.rules || (this.form.rules ? this.form.rules[this.prop] : null);
       }
     },
     data() {
@@ -76,7 +77,8 @@
         error: '',
         validateDisabled: false,
         validating: false,
-        validator: {}
+        validator: {},
+        isRequired: false
       };
     },
     methods: {
@@ -98,7 +100,7 @@
 
         model[this.prop] = this.fieldValue;
 
-        validator.validate(model, { first: true, firstFields: true }, (errors, fields) => {
+        validator.validate(model, { firstFields: true }, (errors, fields) => {
           this.valid = !errors;
           this.error = errors ? errors[0].message : '';
 
@@ -111,7 +113,7 @@
         this.error = '';
 
         let model = this.form.model;
-        let value = model[this.prop];
+        let value = this.fieldValue;
 
         if (Array.isArray(value) && value.length > 0) {
           this.validateDisabled = true;
@@ -124,60 +126,49 @@
           model[this.prop] = 0;
         }
       },
+      getRules() {
+        if (!this.prop) { return []; }
+        var rules = this.rules || (this.form.rules ? this.form.rules[this.prop] : []);
+        return Array.isArray(rules) ? rules : [rules];
+      },
       getFilteredRule(trigger) {
-        var rules = this.fieldRule;
-
-        if (!rules) { return null; }
-        if (!trigger) { return rules; }
-
-        if (Array.isArray(rules)) {
-          return rules.filter(rule => {
-            return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
-          });
-        }
+        var rules = this.getRules();
 
-        if (rules.trigger && rules.trigger.indexOf(trigger) === -1) {
-          return null;
-        } else {
-          return rules;
-        }
-      }
-    },
-    ready() {
-      var rules = this.fieldRule;
-
-      if (rules) {
-        if (Array.isArray(rules)) {
-          rules.every(rule => {
-            if (rule.required) {
-              this.required = true;
-              return false;
-            }
-          });
-        } else {
-          this.required = !!this.rules.required;
-        }
-      }
-      if (this.prop) {
-        this.dispatch('form', 'el.form.addField', this);
-      }
-    },
-    events: {
-      'el.form.blur'(value) {
+        return rules.filter(rule => {
+          return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
+        });
+      },
+      onFieldBlur() {
         this.validate('blur');
       },
-      'el.form.change'(value, useTrigger = true) {
+      onFieldChange() {
         if (this.validateDisabled) {
           this.validateDisabled = false;
           return;
         }
 
-        var trigger = useTrigger ? 'change' : '';
-        this.validate(trigger);
+        this.validate('change');
+      }
+    },
+    mounted() {
+      var rules = this.getRules();
+
+      rules.every(rule => {
+        if (rule.required) {
+          this.isRequired = true;
+          return false;
+        }
+      });
+
+      if (this.prop) {
+        this.dispatch('form', 'el.form.addField', [this]);
       }
+
+      this.$on('el.form.blur', this.onFieldBlur);
+      this.$on('el.form.change', this.onFieldChange);
     },
     beforeDestroy() {
-      this.dispatch('form', 'el.form.removeField', this);
+      this.dispatch('form', 'el.form.removeField', [this]);
     }
   };
 </script>

packages/form/src/form.vue

@@ -7,8 +7,6 @@
   </form>
 </template>
 <script>
-  import AsyncValidator from 'async-validator';
-
   export default {
     name: 'ElForm',
 
@@ -28,27 +26,21 @@
     data() {
       return {
         fields: {},
-        fieldLength: 0,
-        validator: {}
+        fieldLength: 0
       };
     },
-    ready() {
-      if (this.rules) {
-        this.validator = new AsyncValidator(this.rules);
-      }
-    },
-    events: {
-      'el.form.addField'(field) {
+    created() {
+      this.$on('el.form.addField', (field) => {
         this.fields[field.prop] = field;
         this.fieldLength++;
-      },
-      'el.form.removeField'(field) {
+      });
+      this.$on('el.form.removeField', (field) => {
         delete this.fields[field.prop];
         this.fieldLength--;
-      }
+      });
     },
     methods: {
-      resetForm() {
+      resetFields() {
         for (let prop in this.fields) {
           let field = this.fields[prop];
           field.resetField();

packages/input/src/input.vue

@@ -37,7 +37,7 @@
       </div>
     </template>
     <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
-    <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>
+    <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', currentValue)" @blur="handleBlur"></textarea>
   </div>
 </template>
 <script>
@@ -49,7 +49,7 @@
     mixins: [emitter],
 
     props: {
-      value: {},
+      value: [String, Number],
       placeholder: {
         type: String,
         default: ''
@@ -128,7 +128,7 @@
       'currentValue'(val) {
         this.$emit('input', val);
         this.$emit('onchange', val);
-        this.dispatch('form-item', 'el.form.change', val);
+        this.dispatch('form-item', 'el.form.change', [val]);
       }
     }
   };