feature inline message

examples/docs/en-US/cascader.md

@@ -302,7 +302,6 @@ There are two ways to expand child option items.
     expand-trigger="hover"
     :options="options"
     v-model="selectedOptions2"
-    clearable
     @change="handleChange">
   </el-cascader>
 </div>

examples/docs/en-US/form.md

@@ -770,6 +770,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
+| inline-message  | inline style validate message | boolean | — | false |
 
 
 ### Form-Item Slot

examples/docs/zh-CN/form.md

@@ -393,7 +393,7 @@
 
 ::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
 ```html
-<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" message-position="right">
   <el-form-item label="活动名称" prop="name">
     <el-input v-model="ruleForm.name"></el-input>
   </el-form-item>
@@ -759,6 +759,7 @@
 | rules    | 表单验证规则 | object | — | — |
 | error    | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — |
 | show-message  | 是否显示校验错误信息 | boolean | — | true |
+| inline-message  | 以行内形式展示校验信息 | boolean | — | false |
 
 ### Form-Item Slot
 | name | 说明 |

packages/form/src/form-item.vue

@@ -12,7 +12,13 @@
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
       <transition name="el-zoom-in-top">
-        <div class="el-form-item__error" v-if="validateState === 'error' && showMessage && form.showMessage">{{validateMessage}}</div>
+        <div
+          v-if="validateState === 'error' && showMessage && form.showMessage"
+          class="el-form-item__error"
+          :class="{'el-form-item__error--inline': inlineMessage}"
+        >
+          {{validateMessage}}
+        </div>
       </transition>
     </div>
   </div>
@@ -55,10 +61,12 @@
 
     provide() {
       return {
-        formItem: this
+        elFormItem: this
       };
     },
 
+    inject: ['elForm'],
+
     props: {
       label: String,
       labelWidth: String,
@@ -68,6 +76,7 @@
       rules: [Object, Array],
       error: String,
       validateStatus: String,
+      inlineMessage: Boolean,
       showMessage: {
         type: Boolean,
         default: true

packages/form/src/form.vue

@@ -12,6 +12,12 @@
 
     componentName: 'ElForm',
 
+    provide() {
+      return {
+        elForm: this
+      };
+    },
+
     props: {
       model: Object,
       rules: Object,

packages/input/src/input.vue

@@ -80,7 +80,7 @@
 
     mixins: [emitter, Focus('input')],
 
-    inject: ['formItem'],
+    inject: ['elFormItem'],
 
     data() {
       return {

packages/theme-chalk/src/form.scss

@@ -71,6 +71,14 @@
     position: absolute;
     top: 100%;
     left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
   }
 
   @include when(required) {

packages/theme-chalk/src/input.scss

@@ -66,7 +66,6 @@
     height: 100%;
     width: 25px;
     text-align: center;
-    // color: $--input-icon-color;
     transition: all .3s;
 
     &:after {

packages/theme-chalk/src/select.scss

@@ -41,10 +41,7 @@
 
       @include when(show-close) {
         transition: 0s;
-        // height: 16px;
-        // width: 16px;
         font-size: $--select-font-size;
-        // right: 8px;
         text-align: center;
         transform: rotateZ(180deg);
         border-radius: $--border-radius-circle;

packages/theme-default/src/cascader.css

@@ -34,11 +34,6 @@
       z-index: 2;
     }
 
-    @e clearIcon {
-      z-index: 2;
-      position: relative;
-    }
-
     @e label {
       position: absolute;
       left: 0;

test/unit/index.js

@@ -4,7 +4,7 @@ Function.prototype.bind = require('function-bind');
 require('packages/theme-default/src/index.css');
 
 // require all test files (files that ends with .spec.js)
-const testsContext = require.context('./specs', true, /cascader\.spec$/);
+const testsContext = require.context('./specs', true, /\.spec$/);
 testsContext.keys().forEach(testsContext);
 
 // require all src files except main.js for coverage.