update form docs

packages/date-picker/src/picker.vue

@@ -34,6 +34,7 @@ import Vue from 'vue';
 import Clickoutside from 'main/utils/clickoutside';
 import { merge, formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'main/utils/popper';
+import emitter from 'main/mixins/emitter';
 
 const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
 const RANGE_SEPARATOR = ' - ';
@@ -178,6 +179,8 @@ const TYPE_VALUE_RESOLVER_MAP = {
 };
 
 export default {
+  mixins: [emitter],
+
   props: {
     format: String,
     readonly: Boolean,
@@ -200,6 +203,9 @@ export default {
   watch: {
     pickerVisible(val) {
       val === true ? this.showPicker() : this.hidePicker();
+    },
+    value(val) {
+      this.dispatch('form-item', 'el.form.change');
     }
   },
 
@@ -284,6 +290,7 @@ export default {
 
     handleBlur() {
       this.$emit('blur', this);
+      this.dispatch('form-item', 'el.form.blur');
     },
 
     handleKeydown(event) {

packages/form/package.json

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

packages/form/src/form.vue

@@ -1,7 +1,7 @@
 <template>
-  <form :class="[
-    type ? 'el-form-' + type : 'el-form',
-    { 'is-label-left': labelAlign === 'left' }
+  <form class="el-form" :class="[
+    labelPosition ? 'el-form--label-' + labelPosition : '',
+    { 'el-form--inline': inline }
   ]">
     <slot></slot>
   </form>
@@ -16,12 +16,13 @@
       model: Object,
       rules: Object,
       type: String,
-      labelAlign: String,
+      labelPosition: String,
       labelWidth: String,
       labelSuffix: {
         type: String,
         default: ''
-      }
+      },
+      inline: Boolean
     },
     data() {
       return {

packages/theme-default/src/form.css

@@ -3,11 +3,28 @@
 
 @component-namespace el {
   @b form {
-    @when label-left {
+    @m label-left {
       & .el-form-item__label {
         text-align: left;
       }
     }
+    @m label-top {
+      & .el-form-item__label {
+        float: none;
+        display: inline-block;
+        padding: 0 0 10px 0;
+      }
+    }
+    @m inline {
+      & .el-form-item {
+        display: inline-block;
+        margin-right: 10px;
+
+        > * {
+          vertical-align: top;
+        }
+      }
+    }
   }
   @b form-item {
     margin-bottom: 22px;
@@ -67,22 +84,4 @@
       }
     }
   }
-
-  @b form-inline {
-    & .el-form-item {
-      display: inline-block;
-      margin-right: 10px;
-
-      > * {
-        vertical-align: top;
-      }
-    }
-  }
-  @b form-stacked {
-    & .el-form-item__label {
-      float: none;
-      display: inline-block;
-      padding: 0 0 10px 0;
-    }
-  }
 }

packages/theme-default/src/switch.css

@@ -72,7 +72,7 @@
         border-radius: 15px;
         transition: transform .3s;
         size: 16px;
-        z-index: 100;
+        z-index: 20;
         background-color: var(--color-white);
       }
     }