support success validate status

packages/date-picker/src/picker.vue

@@ -15,7 +15,7 @@
     @change.native="displayValue = $event.target.value"
     :validateEvent="false"
     ref="reference">
-    <i slot="icon"
+    <i slot="suffix"
       class="el-input__icon"
       @click="handleClickIcon"
       :class="[showClose ? 'el-icon-close' : triggerClass]"

packages/form/src/form-item.vue

@@ -52,6 +52,12 @@
 
     mixins: [emitter],
 
+    provide() {
+      return {
+        formItem: this
+      };
+    },
+
     props: {
       label: String,
       labelWidth: String,

packages/input/src/input.vue

@@ -36,11 +36,17 @@
         @blur="handleBlur"
       >
       <!-- 后置内容 -->
-      <span class="el-input__suffix" v-if="$slots.suffix || suffixIcon">
+      <span class="el-input__suffix" v-if="$slots.suffix || suffixIcon || validateState">
-        <slot name="suffix"></slot>
+        <span class="el-input__suffix-inner">
+          <slot name="suffix"></slot>
+          <i class="el-input__icon"
+            v-if="suffixIcon"
+            :class="['el-icon-' + suffixIcon]">
+          </i>
+        </span>
         <i class="el-input__icon"
-          v-if="suffixIcon"
+          v-if="validateState"
-          :class="['el-icon-' + suffixIcon]">
+          :class="['el-input__validateIcon', validateIcon]">
         </i>
       </span>
       <!-- 后置元素 -->
@@ -74,6 +80,8 @@
 
     mixins: [emitter, Focus('input')],
 
+    inject: ['formItem'],
+
     data() {
       return {
         currentValue: this.value,
@@ -123,8 +131,15 @@
     },
 
     computed: {
-      validating() {
+      validateState() {
-        return this.$parent.validateState === 'validating';
+        return this.formItem ? this.formItem.validateState : '';
+      },
+      validateIcon() {
+        return {
+          validating: 'el-icon-loading',
+          success: 'el-icon-circle-check',
+          error: 'el-icon-circle-cross'
+        }[this.validateState];
       },
       textareaStyle() {
         return merge({}, this.textareaCalcStyle, { resize: this.resize });

packages/select/src/select.vue

@@ -65,7 +65,7 @@
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false">
       <i slot="suffix"
-       :class="['el-input__icon', 'el-icon-' + iconClass]"
+       :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
        @click="handleIconClick"
       ></i>
     </el-input>

packages/theme-chalk/src/form.scss

@@ -80,7 +80,9 @@
   @include when(error) {
     & .el-input__inner,
     & .el-textarea__inner {
-      border-color: $--color-danger;
+      &:focus {
+        border-color: $--color-danger;
+      }
     }
     & .el-input-group__append,
     & .el-input-group__prepend {
@@ -88,5 +90,25 @@
         border-color: transparent;
       }
     }
+    .el-input__validateIcon {
+      color: $--color-danger;
+    }
+  }
+  @include when(success) {
+    & .el-input__inner,
+    & .el-textarea__inner {
+      &, &:focus {
+        border-color: $--color-success;
+      }
+    }
+    & .el-input-group__append,
+    & .el-input-group__prepend {
+      & .el-input__inner {
+        border-color: transparent;
+      }
+    }
+    .el-input__validateIcon {
+      color: $--color-success;
+    }
   }
 }

packages/theme-chalk/src/input.scss

@@ -41,48 +41,30 @@
   @include e(suffix) {
     position: absolute;
     height: 100%;
-    right: 0;
+    right: 5px;
     top: 0;
     text-align: center;
     color: $--input-icon-color;
     transition: all .3s;
-
+    pointer-events: none;
-    // @include when(clickable) {
+  }
-    //   &:hover {
+  @include e(suffix-inner) {
-    //     cursor: pointer;
+    pointer-events: all;
-    //     color: $--input-hover-border;
-
-    //     & + .el-input__inner {
-    //       border-color: $--input-hover-border;
-    //     }
-    //   }
-    // }
   }
 
   @include e(prefix) {
     position: absolute;
     height: 100%;
-    left: 0;
+    left: 5px;
     top: 0;
     text-align: center;
     color: $--input-icon-color;
     transition: all .3s;
-
-    // @include when(clickable) {
-    //   &:hover {
-    //     cursor: pointer;
-    //     color: $--input-hover-border;
-
-    //     & + .el-input__inner {
-    //       border-color: $--input-hover-border;
-    //     }
-    //   }
-    // }
   }
 
   @include e(icon) {
     height: 100%;
-    width: 30px;
+    width: 25px;
     text-align: center;
     // color: $--input-icon-color;
     transition: all .3s;
@@ -96,6 +78,10 @@
     }
   }
 
+  @include e(validateIcon) {
+    pointer-events: none;
+  }
+
   @include when(active) {
     .el-input__inner {
       outline: none;
@@ -121,12 +107,12 @@
   }
   @include m(suffix) {
     .el-input__inner {
-      padding-right: 30px;
+      padding-right: 25px;
     }
   }
   @include m(prefix) {
     .el-input__inner {
-      padding-left: 30px;
+      padding-left: 25px;
     }
   }
   @include m(large) {

packages/theme-chalk/src/select.scss

@@ -27,13 +27,12 @@
   }
 
   & .el-input {
-    & .el-input__icon {
+    & .el-select__caret {
       color: $--select-input-color;
       font-size: $--select-input-font-size;
       transition: transform .3s;
       transform: rotateZ(180deg);
       line-height: 16px;
-      top: 50%;
       cursor: pointer;
 
       @include when(reverse) {
@@ -42,10 +41,10 @@
 
       @include when(show-close) {
         transition: 0s;
-        height: 16px;
+        // height: 16px;
-        width: 16px;
+        // width: 16px;
         font-size: $--select-font-size;
-        right: 8px;
+        // right: 8px;
         text-align: center;
         transform: rotateZ(180deg);
         border-radius: $--border-radius-circle;