From 5c17f5799533b1f938e51960cb8e47246c03bc7c Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Wed, 13 Sep 2017 11:40:36 +0800
Subject: [PATCH] upgrade input

---
 examples/docs/en-US/input.md             | 48 ++++++++++++-----
 examples/docs/zh-CN/input.md             | 53 +++++++++++++-----
 packages/form/src/form-item.vue          |  1 +
 packages/input/src/input.vue             | 38 ++++++-------
 packages/select/src/select.vue           |  8 +--
 packages/theme-chalk/src/input.scss      | 68 ++++++++++++++++++------
 packages/theme-chalk/src/select.scss     |  6 +--
 packages/theme-chalk/src/transfer.scss   | 10 ++--
 packages/transfer/src/transfer-panel.vue |  9 ++--
 9 files changed, 164 insertions(+), 77 deletions(-)

diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index 89c6d76fd..98a7dc27c 100644
--- a/examples/docs/en-US/input.md
+++ b/examples/docs/en-US/input.md
@@ -20,6 +20,9 @@
         input: '',
         input1: '',
         input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
         input3: '',
         input4: '',
         input5: '',
@@ -190,26 +193,43 @@ export default {
 
 Add an icon to indicate input type.
 
-::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
-
+::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
 ```html
-<el-input
-  placeholder="Pick a date"
-  icon="search"
-  v-model="input2"
-  :on-icon-click="handleIconClick">
-</el-input>
+<div class="demo-input-suffix">
+  属性方式：
+  <el-input
+    placeholder="请选择日期"
+    suffix-icon="date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    prefix-icon="search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  slot 方式：
+  <el-input
+    placeholder="请选择日期"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
 
 <script>
 export default {
   data() {
     return {
-      input2: ''
-    }
-  },
-  methods: {
-    handleIconClick(ev) {
-      console.log(ev);
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
     }
   }
 }
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index a449dca4b..722bc1c2e 100644
--- a/examples/docs/zh-CN/input.md
+++ b/examples/docs/zh-CN/input.md
@@ -20,6 +20,9 @@
         input: '',
         input1: '',
         input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
         input3: '',
         input4: '',
         input5: '',
@@ -179,6 +182,12 @@
       }
     }
   }
+  .demo-input-suffix {
+    margin-bottom: 15px;
+    .el-input {
+      margin-right: 15px;
+    }
+  }
 </style>
 
 ## Input 输入框
@@ -230,25 +239,43 @@ export default {
 
 带有图标标记输入类型
 
-::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。
+::: demo 可以通过 `suffix-icon` 和 `prefix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
 ```html
-<el-input
-  placeholder="请选择日期"
-  icon="search"
-  v-model="input2"
-  :on-icon-click="handleIconClick">
-</el-input>
+<div class="demo-input-suffix">
+  属性方式：
+  <el-input
+    placeholder="请选择日期"
+    suffix-icon="date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    prefix-icon="search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  slot 方式：
+  <el-input
+    placeholder="请选择日期"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="请输入内容"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
 
 <script>
 export default {
   data() {
     return {
-      input2: ''
-    }
-  },
-  methods: {
-    handleIconClick(ev) {
-      console.log(ev);
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
     }
   }
 }
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index 5923765dc..ace920f79 100644
--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
@@ -2,6 +2,7 @@
   <div class="el-form-item" :class="{
     'is-error': validateState === 'error',
     'is-validating': validateState === 'validating',
+    'is-success': validateState === 'success',
     'is-required': isRequired || required
   }">
     <label :for="prop" class="el-form-item__label" v-bind:style="labelStyle" v-if="label || $slots.label">
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index f06a6bf7b..1276f2ce5 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -6,7 +6,9 @@
       'is-disabled': disabled,
       'el-input-group': $slots.prepend || $slots.append,
       'el-input-group--append': $slots.append,
-      'el-input-group--prepend': $slots.prepend
+      'el-input-group--prepend': $slots.prepend,
+      'el-input--prefix': $slots.prefix || prefixIcon,
+      'el-input--suffix': $slots.suffix || suffixIcon
     }
   ]">
     <template v-if="type !== 'textarea'">
@@ -14,17 +16,14 @@
       <div class="el-input-group__prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </div>
-      <!-- input 图标 -->
-      <slot name="icon">
+      <!-- 前置内容 -->
+      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+        <slot name="prefix"></slot>
         <i class="el-input__icon"
-          :class="[
-            'el-icon-' + icon,
-            onIconClick ? 'is-clickable' : ''
-          ]"
-          v-if="icon"
-          @click="handleIconClick">
+          v-if="prefixIcon"
+          :class="['el-icon-' + prefixIcon]">
         </i>
-      </slot>
+      </span>
       <input
         v-if="type !== 'textarea'"
         class="el-input__inner"
@@ -36,7 +35,14 @@
         @focus="handleFocus"
         @blur="handleBlur"
       >
-      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 后置内容 -->
+      <span class="el-input__suffix" v-if="$slots.suffix || suffixIcon">
+        <slot name="suffix"></slot>
+        <i class="el-input__icon"
+          v-if="suffixIcon"
+          :class="['el-icon-' + suffixIcon]">
+        </i>
+      </span>
       <!-- 后置元素 -->
       <div class="el-input-group__append" v-if="$slots.append">
         <slot name="append"></slot>
@@ -111,7 +117,9 @@
         type: Boolean,
         default: true
       },
-      onIconClick: Function
+      onIconClick: Function,
+      suffixIcon: String,
+      prefixIcon: String
     },
 
     computed: {
@@ -157,12 +165,6 @@
         this.setCurrentValue(value);
         this.$emit('change', value);
       },
-      handleIconClick(event) {
-        if (this.onIconClick) {
-          this.onIconClick(event);
-        }
-        this.$emit('click', event);
-      },
       setCurrentValue(value) {
         if (value === this.currentValue) return;
         this.$nextTick(_ => {
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 703e99196..62ce8b321 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -54,7 +54,6 @@
       :class="{ 'is-focus': visible }"
       @focus="handleFocus"
       @blur="handleBlur"
-      @click="handleIconClick"
       @mousedown.native="handleMouseDown"
       @keyup.native="debouncedOnInputChange"
       @keydown.native.down.prevent="navigateOptions('next')"
@@ -64,8 +63,11 @@
       @keydown.native.tab="visible = false"
       @paste.native="debouncedOnInputChange"
       @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
-      :icon="iconClass">
+      @mouseleave.native="inputHovering = false">
+      <i slot="suffix"
+       :class="['el-input__icon', 'el-icon-' + iconClass]"
+       @click="handleIconClick"
+      ></i>
     </el-input>
     <transition
       name="el-zoom-in-top"
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index f42215f8b..d7053c57a 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -38,9 +38,8 @@
     }
   }
 
-  @include e(icon) {
+  @include e(suffix) {
     position: absolute;
-    width: 35px;
     height: 100%;
     right: 0;
     top: 0;
@@ -48,6 +47,46 @@
     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(prefix) {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    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;
+    text-align: center;
+    // color: $--input-icon-color;
+    transition: all .3s;
+
     &:after {
       content: '';
       height: 100%;
@@ -55,21 +94,6 @@
       display: inline-block;
       vertical-align: middle;
     }
-
-    & + .el-input__inner {
-      padding-right: 35px;
-    }
-
-    @include when(clickable) {
-      &:hover {
-        cursor: pointer;
-        color: $--input-hover-border;
-
-        & + .el-input__inner {
-          border-color: $--input-hover-border;
-        }
-      }
-    }
   }
 
   @include when(active) {
@@ -95,6 +119,16 @@
       cursor: not-allowed;
     }
   }
+  @include m(suffix) {
+    .el-input__inner {
+      padding-right: 30px;
+    }
+  }
+  @include m(prefix) {
+    .el-input__inner {
+      padding-left: 30px;
+    }
+  }
   @include m(large) {
     font-size: $--input-large-font-size;
 
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index af4a7f725..fb7421bdf 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -31,13 +31,13 @@
       color: $--select-input-color;
       font-size: $--select-input-font-size;
       transition: transform .3s;
-      transform: translateY(-50%) rotateZ(180deg);
+      transform: rotateZ(180deg);
       line-height: 16px;
       top: 50%;
       cursor: pointer;
 
       @include when(reverse) {
-        transform: translateY(-50%);
+        transform: rotateZ(0deg);
       }
 
       @include when(show-close) {
@@ -47,7 +47,7 @@
         font-size: $--select-font-size;
         right: 8px;
         text-align: center;
-        transform: translateY(-50%) rotateZ(180deg);
+        transform: rotateZ(180deg);
         border-radius: $--border-radius-circle;
         color: $--select-input-color;
 
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index e494a1013..1cad5e2c8 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -124,12 +124,11 @@
   }
 
   @include e(filter) {
-    margin-top: 15px;
-    margin-bottom: 5px;
     text-align: center;
-    padding: 0 15px;
-    width: 100%;
+    margin: 15px;
     box-sizing: border-box;
+    display: block;
+    width: auto;
 
     .el-input__inner {
       height: $--transfer-filter-height;
@@ -142,8 +141,7 @@
     }
 
     .el-input__icon {
-      right: auto;
-      left: 15px;
+      margin-left: 5px;
     }
 
     .el-icon-circle-close {
diff --git a/packages/transfer/src/transfer-panel.vue b/packages/transfer/src/transfer-panel.vue
index e54075eb0..22bd5f4b8 100644
--- a/packages/transfer/src/transfer-panel.vue
+++ b/packages/transfer/src/transfer-panel.vue
@@ -16,11 +16,14 @@
         v-model="query"
         size="small"
         :placeholder="placeholder"
-        :icon="inputIcon"
         @mouseenter.native="inputHover = true"
         @mouseleave.native="inputHover = false"
-        @click="clearQuery"
-        v-if="filterable"></el-input>
+        v-if="filterable">
+        <i slot="prefix"
+          :class="['el-input__icon', 'el-icon-' + inputIcon]"
+          @click="clearQuery"
+        ></i>
+      </el-input>
       <el-checkbox-group
         v-model="checked"
         v-show="!hasNoMatch && data.length > 0"