Input / Input Number: add chalk theme (#7178)

* Input / Input Number: add chalk theme

* Update Input Number doc

examples/docs/en-US/input-number.md

@@ -99,15 +99,16 @@ Allows you to define incremental steps.
 
 ### Size
 
-Additional `large` and `small` sizes of the input box are available
+Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 :::demo
 
 ```html
 <template>
-  <el-input-number size="large" v-model="num4"></el-input-number>
-  <el-input-number v-model="num5"></el-input-number>
-  <el-input-number size="small" v-model="num6"></el-input-number>
+  <el-input-number v-model="num4"></el-input-number>
+    <el-input-number size="medium" v-model="num5"></el-input-number>
+    <el-input-number size="small" v-model="num6"></el-input-number>
+    <el-input-number size="mini" v-model="num7"></el-input-number>
 </template>
 <script>
   export default {
@@ -115,7 +116,32 @@ Additional `large` and `small` sizes of the input box are available
       return {
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Controls Position
+
+:::demo Set `controls-position` to decide controls position
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
       }
     }
   };
@@ -135,6 +161,7 @@ Additional `large` and `small` sizes of the input box are available
 |disabled| whether the component is disabled | boolean | — | false |
 |controls| whether to enable the control buttons | boolean | — | true |
 |debounce| debounce delay when typing, in millisecond | number | — | 300 |
+|controls-position | position of the control buttons | string | right | - |
 |name | same as `name` in native input | string | — | — |
 
 ### Events

examples/docs/en-US/input.md

@@ -88,7 +88,7 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 110px;
+      width: 130px;
     }
     .el-input {
       width: 180px;
@@ -105,6 +105,16 @@
         margin: 0 10px 10px 0;
       }
     }
+    .demo-input-suffix {
+      padding: 10px;
+    }
+    .demo-input-suffix .el-input {
+      margin-right: 15px;
+    }
+    .demo-input-label {
+      display: inline-block;
+      width: 130px;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -196,7 +206,7 @@ Add an icon to indicate input type.
 ::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
 ```html
 <div class="demo-input-suffix">
-  Using attributes
+  <span class="demo-input-label">Using attributes</span>
   <el-input
     placeholder="Pick a date"
     suffix-icon="el-icon-date"
@@ -209,7 +219,7 @@ Add an icon to indicate input type.
   </el-input>
 </div>
 <div class="demo-input-suffix">
-  Using slots
+  <span class="demo-input-label">Using slots</span>
   <el-input
     placeholder="Pick a date"
     v-model="input22">
@@ -222,6 +232,13 @@ Add an icon to indicate input type.
   </el-input>
 </div>
 
+<style>
+  .demo-input-label {
+    display: inline-block;
+    width: 130px;
+  }
+</style>
+
 <script>
 export default {
   data() {

examples/docs/zh-CN/input-number.md

@@ -7,7 +7,9 @@
         num3: 5,
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1,
+        num8: 1
       }
     },
     methods: {
@@ -97,15 +99,16 @@
 
 ### 尺寸
 
-额外提供了 `large`、`small` 两种尺寸的数字输入框
+额外提供了 `medium`、`small`、`mini` 三种尺寸的数字输入框
 
 :::demo
 
 ```html
 <template>
-  <el-input-number size="large" v-model="num4"></el-input-number>
-  <el-input-number v-model="num5"></el-input-number>
+  <el-input-number v-model="num4"></el-input-number>
+  <el-input-number size="medium" v-model="num5"></el-input-number>
   <el-input-number size="small" v-model="num6"></el-input-number>
+  <el-input-number size="mini" v-model="num7"></el-input-number>
 </template>
 <script>
   export default {
@@ -113,7 +116,32 @@
       return {
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### 按钮位置
+
+:::demo 设置 `controls-position` 属性可以控制按钮位置。
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
       }
     }
   };
@@ -132,6 +160,7 @@
 | disabled | 是否禁用计数器        | boolean | — | false |
 | controls | 是否使用控制按钮        | boolean | — | true |
 | debounce | 输入时的去抖延迟，毫秒 | number | — | 300 |
+| controls-position | 控制按钮位置 | string | right | - |
 | name | 原生属性 | string | — | — |
 
 ### Events

examples/docs/zh-CN/input.md

@@ -129,7 +129,7 @@
 <style>
   .demo-input.demo-zh-CN {
     .el-select .el-input {
-      width: 110px;
+      width: 130px;
     }
     .el-input {
       width: 180px;
@@ -369,7 +369,7 @@ export default {
 </div>
 <style>
   .el-select .el-input {
-    width: 110px;
+    width: 130px;
   }
 </style>
 <script>

packages/autocomplete/src/autocomplete-suggestions.vue

@@ -2,7 +2,7 @@
   <transition name="el-zoom-in-top" @after-leave="doDestroy">
     <div
       v-show="showPopper"
-      class="el-autocomplete-suggestion"
+      class="el-autocomplete-suggestion el-popper"
       :class="{ 'is-loading': parent.loading }"
       :style="{ width: dropdownWidth }"
     >

packages/autocomplete/src/autocomplete.vue

@@ -23,6 +23,7 @@
     </el-input>
     <el-autocomplete-suggestions
       :props="props"
+      visible-arrow
       :class="[popperClass ? popperClass : '']"
       ref="suggestions"
       :suggestions="suggestions"

packages/input-number/src/input-number.vue

@@ -3,7 +3,8 @@
     :class="[
       size ? 'el-input-number--' + size : '',
       { 'is-disabled': disabled },
-      { 'is-without-controls': !controls}
+      { 'is-without-controls': !controls },
+      { 'is-controls-right': controlsAtRight }
     ]"
   >
     <span
@@ -12,7 +13,7 @@
       :class="{'is-disabled': minDisabled}"
       v-repeat-click="decrease"
     >
-      <i class="el-icon-minus"></i>
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
     </span>
     <span
       v-if="controls"
@@ -20,7 +21,7 @@
       :class="{'is-disabled': maxDisabled}"
       v-repeat-click="increase"
     >
-      <i class="el-icon-plus"></i>
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
     </span>
     <el-input
       :value="currentValue"
@@ -102,6 +103,10 @@
         type: Boolean,
         default: true
       },
+      controlsPosition: {
+        type: String,
+        default: ''
+      },
       debounce: {
         type: Number,
         default: 300
@@ -136,6 +141,9 @@
       precision() {
         const { value, step, getPrecision } = this;
         return Math.max(getPrecision(value), getPrecision(step));
+      },
+      controlsAtRight() {
+        return this.controlsPosition === 'right';
       }
     },
     methods: {

packages/select/src/select.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="el-select"
+    :class="[size ? 'el-select--' + size : '']"
     v-clickoutside="handleClose">
     <div
       class="el-select__tags"
@@ -114,9 +115,9 @@
   import NavigationMixin from './navigation-mixin';
 
   const sizeMap = {
-    'large': 42,
-    'small': 30,
-    'mini': 22
+    'medium': 36,
+    'small': 32,
+    'mini': 28
   };
 
   const valueEquals = (a, b) => {
@@ -521,7 +522,7 @@
           if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
-          input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
+          input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 40) + 'px';
           if (this.visible && this.emptyText !== false) {
             this.broadcast('ElSelectDropdown', 'updatePopper');
           }

packages/theme-chalk/src/autocomplete.scss

@@ -11,16 +11,20 @@
 
 @include b(autocomplete-suggestion) {
   margin: 5px 0;
-  box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
+  box-shadow: $--box-shadow-light;
+
+  &.el-popper .popper__arrow {
+    left: 24px !important;
+  }
 
   @include e(wrap) {
     max-height: 280px;
-    overflow: auto;
-    background-color: $--color-white;
-    border: 1px solid $--color-black;
     padding: 6px 0;
-    border-radius: 2px;
     box-sizing: border-box;
+    overflow: auto;
+    background-color: $--color-white;
+    border: 1px solid $--border-color-light;
+    border-radius: $--border-radius-base;
   }
 
   @include e(list) {
@@ -29,13 +33,13 @@
   }
 
   & li {
-    list-style: none;
-    line-height: 36px;
-    padding: 0 10px;
+    padding: 0 20px;
     margin: 0;
+    line-height: 33px;
     cursor: pointer;
-    color: $--color-black;
-    font-size: 14px;
+    color: $--color-text-regular;
+    font-size: $--font-size-base;
+    list-style: none;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -43,17 +47,21 @@
     &:hover {
       background-color: $--select-option-hover-background;
     }
+
     &.highlighted {
-      background-color: $--color-primary;
-      color: $--color-white;
+      color: $--color-primary;
     }
+
     &:active {
-      background-color: darken($--color-primary, 0.2);
+      background-color: $--color-primary;
+      color: $--color-white;
     }
+
     &.divider {
       margin-top: 6px;
       border-top: 1px solid $--color-black;
     }
+
     &.divider:last-child {
       margin-bottom: -6px;
     }

packages/theme-chalk/src/cascader.scss

@@ -5,7 +5,7 @@
 @include b(cascader) {
   display: inline-block;
   position: relative;
-  min-width: 224px;
+  font-size: $--font-size-base;
 
   .el-input,
   .el-input__inner {
@@ -43,8 +43,8 @@
     left: 0;
     top: 0;
     height: 100%;
-    line-height: 36px;
-    padding: 0 25px 0 10px;
+    line-height: 40px;
+    padding: 0 25px 0 15px;
     color: $--input-color;
     width: 100%;
     white-space: nowrap;
@@ -52,8 +52,8 @@
     overflow: hidden;
     box-sizing: border-box;
     cursor: pointer;
-    font-size: $--font-size-small;
     text-align: left;
+    font-size: inherit;
 
     span {
       color: $--color-black;
@@ -63,17 +63,27 @@
   @include m(medium) {
     font-size: $--input-medium-font-size;
 
-    .el-cascader__label {
-      line-height: #{$--input-medium-height - 2};
+    @include e(label) {
+      line-height: #{$--input-medium-height };
     }
   }
+
   @include m(small) {
     font-size: $--input-small-font-size;
 
-    .el-cascader__label {
-      line-height: #{$--input-small-height - 2};
+    @include e(label) {
+      line-height: #{$--input-small-height };
+    }
+  }
+
+  @include m(mini) {
+    font-size: $--input-mini-font-size;
+
+    @include e(label) {
+      line-height: #{$--input-mini-height};
     }
   }
+
   @include when(disabled) {
     .el-cascader__label {
       z-index: #{$--index-normal + 1};
@@ -92,8 +102,8 @@
   border-radius: $--border-radius-small;
   box-shadow: $--select-dropdown-shadow;
 
-  &.el-popper .popper__arrow {
-    left: 24px !important;
+  .popper__arrow {
+    transform: translateX(-400%);
   }
 }
 

packages/theme-chalk/src/common/var.scss

@@ -98,7 +98,7 @@ $--index-popper: 2000;
 
 /* Disable base
 -------------------------- */
-$--disabled-fill-base: $--border-color-extra-light;
+$--disabled-fill-base: $--background-color-base;
 $--disabled-color-base: $--color-text-placeholder;
 $--disabled-border-base: $--border-color-lighter;
 
@@ -612,6 +612,7 @@ $--datepicker-inrange-color: $--border-color-extra-light;
 $--datepicker-inrange-hover-color: $--border-color-extra-light;
 $--datepicker-active-color: $--color-primary;
 $--datepicker-text-hover-color: $--color-primary;
+$--datepicker-cell-hover-color: #fff;
 
 /* Loading
 --------------------------*/

packages/theme-chalk/src/dropdown.scss

@@ -18,6 +18,24 @@
   & .el-dropdown__caret-button {
     padding-left: 5px;
     padding-right: 5px;
+    position: relative;
+    border-left: none;
+
+    &::before {
+      $gap: 5px;
+
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      top: $gap;
+      bottom: $gap;
+      left: 0;
+      background: mix(white, transparent, 50%);
+    }
+
+    &:hover {
+    }
 
     & .el-dropdown__icon {
       padding-left: 0;

packages/theme-chalk/src/input-number.scss

@@ -3,28 +3,32 @@
 @import "input";
 
 @include b(input-number) {
+  position: relative;
   display: inline-block;
   width: 180px;
-  position: relative;
 
-  & .el-input {
+  .el-input {
     display: block;
+
+    &__inner {
+      -webkit-appearance: none;
+      padding-left: #{$--input-height + 10};
+      padding-right: #{$--input-height + 10};
+    }
   }
-  & .el-input__inner {
-    appearance: none;
-    padding-right: #{$--input-height * 2 + 10};
-  }
+
   @include e((increase, decrease)) {
-    height: auto;
-    border-left: $--border-base;
+    position: absolute;
+    z-index: 1;
+    top: 1px;
     width: $--input-height;
+    height: auto;
     line-height: #{$--input-height - 2};
-    top: 1px;
     text-align: center;
-    color: $--color-black;
+    background: $--background-color-base;
+    color: $--color-text-regular;
     cursor: pointer;
-    position: absolute;
-    z-index: 1;
+    font-size: 13px;
 
     &:hover {
       color: $--color-primary;
@@ -34,21 +38,26 @@
       }
     }
 
-    @include when(disabled) {
-      color: $--disabled-border-base;
+    &.is-disabled {
+      color: $--disabled-color-base;
       cursor: not-allowed;
     }
   }
 
   @include e(increase) {
-    right: 0;
+    right: 1px;
+    border-radius: 0 $--border-radius-base $--border-radius-base 0;
+    border-left: $--border-base;
   }
+
   @include e(decrease) {
-    right: #{$--input-height + 1};
+    left: 1px;
+    border-radius: $--border-radius-base 0 0 $--border-radius-base;
+    border-right: $--border-base;
   }
 
   @include when(disabled) {
-    & .el-input-number__increase, .el-input-number__decrease {
+    @include e((increase, decrease)) {
       border-color: $--disabled-border-base;
       color: $--disabled-border-base;
 
@@ -58,39 +67,112 @@
       }
     }
   }
+
   @include m(medium) {
     width: 200px;
 
-    & .el-input-number__increase, .el-input-number__decrease {
+    @include e((increase, decrease)) {
       line-height: #{$--input-medium-height - 2};
       width: $--input-medium-height;
       font-size: $--input-medium-font-size;
     }
-    & .el-input-number__decrease {
-      right: #{$--input-medium-height + 1};
-    }
-    & .el-input__inner {
-      padding-right: #{$--input-medium-height * 2 + 10};
+
+    .el-input__inner {
+      padding-left: #{$--input-medium-height + 7};
+      padding-right: #{$--input-medium-height + 7};
     }
   }
+
   @include m(small) {
     width: 130px;
 
-    & .el-input-number__increase, .el-input-number__decrease {
+    @include e((increase, decrease)) {
       line-height: #{$--input-small-height - 2};
       width: $--input-small-height;
       font-size: $--input-small-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.9);
+      }
     }
-    & .el-input-number__decrease {
-      right: #{$--input-small-height + 1};
+
+    .el-input__inner {
+      padding-left: #{$--input-small-height + 7};
+      padding-right: #{$--input-small-height + 7};
+    }
+  }
+
+  @include m(mini) {
+    width: 130px;
+
+    @include e((increase, decrease)) {
+      line-height: #{$--input-mini-height - 2};
+      width: $--input-mini-height;
+      font-size: $--input-mini-font-size;
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
     }
-    & .el-input__inner {
-      padding-right: #{$--input-small-height * 2 + 10};
+
+    .el-input__inner {
+      padding-left: #{$--input-mini-height + 7};
+      padding-right: #{$--input-mini-height + 7};
     }
   }
+
   @include when(without-controls) {
-    & .el-input__inner {
-      padding-right: 10px;
+    .el-input__inner {
+      padding-right: 15px;
+    }
+  }
+
+  @include when(controls-right) {
+    .el-input__inner {
+        padding-left: 15px;
+        padding-right: #{$--input-height + 10};
+    }
+
+    @include e((increase, decrease)) {
+      height: auto;
+      line-height: #{($--input-height - 2) / 2};
+
+      [class*=el-icon] {
+        transform: scale(.8);
+      }
+    }
+
+    @include e(increase) {
+      border-radius: 0 $--border-radius-base 0 0;
+      border-bottom: $--border-base;
+    }
+
+    @include e(decrease) {
+      right: 1px;
+      bottom: 1px;
+      top: auto;
+      left: auto;
+      border-right: none;
+      border-left: $--border-base;
+      border-radius: 0 0 $--border-radius-base 0;
+    }
+
+    &[class*=medium] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-medium-height - 2) / 2};
+      }
+    }
+
+    &[class*=small] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-small-height - 2) / 2};
+      }
+    }
+
+    &[class*=mini] {
+      [class*=increase], [class*=decrease] {
+        line-height: #{($--input-mini-height - 2) / 2};
+      }
     }
   }
 }

packages/theme-chalk/src/input.scss

@@ -20,7 +20,7 @@
     height: $--input-height;
     line-height: 1;
     outline: none;
-    padding: 3px 10px;
+    padding: 0 15px;
     transition: $--border-transition-base;
     width: 100%;
     text-align: inherit;
@@ -49,6 +49,7 @@
     transition: all .3s;
     pointer-events: none;
   }
+
   @include e(suffix-inner) {
     pointer-events: all;
   }
@@ -105,34 +106,37 @@
       cursor: not-allowed;
     }
   }
+
   @include m(suffix) {
     .el-input__inner {
       padding-right: 30px;
     }
   }
+
   @include m(prefix) {
     .el-input__inner {
       padding-left: 30px;
     }
   }
+
   @include m(medium) {
     font-size: $--input-medium-font-size;
 
-    & .el-input__inner {
+    @include e(inner) {
       height: $--input-medium-height;
     }
   }
   @include m(small) {
     font-size: $--input-small-font-size;
 
-    & .el-input__inner {
+    @include e(inner) {
       height: $--input-small-height;
     }
   }
   @include m(mini) {
     font-size: $--input-mini-font-size;
 
-    & .el-input__inner {
+    @include e(inner) {
       height: $--input-mini-height;
     }
   }
@@ -144,47 +148,51 @@
   width: 100%;
   border-collapse: separate;
 
-  & > .el-input__inner {
+  > .el-input__inner {
     vertical-align: middle;
     display: table-cell;
   }
+
   @include e((append, prepend)) {
-    background-color: $--color-black;
-    color: $--color-black;
+    background-color: $--background-color-base;
+    color: $--color-info;
     vertical-align: middle;
     display: table-cell;
     position: relative;
     border: $--border-base;
     border-radius: $--input-border-radius;
-    padding: 0 10px;
+    padding: 0 20px;
     width: 1px;
     white-space: nowrap;
 
-    & .el-select,
-    & .el-button {
+    .el-select,
+    .el-button {
       display: block;
-      margin: -10px;
+      margin: -20px;
     }
 
-    & button.el-button,
-    & div.el-select .el-input__inner,
-    & div.el-select:hover .el-input__inner {
+    button.el-button,
+    div.el-select .el-input__inner,
+    div.el-select:hover .el-input__inner {
       border-color: transparent;
       background-color: transparent;
       color: inherit;
       border-top: 0;
       border-bottom: 0;
     }
-    & .el-button,
-    & .el-input {
+
+    .el-button,
+    .el-input {
       font-size: inherit;
     }
   }
+
   @include e(prepend) {
     border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+
   @include e(append) {
     border-left: 0;
     border-top-left-radius: 0;
@@ -197,6 +205,7 @@
       border-bottom-left-radius: 0;
     }
   }
+
   @include m(append) {
     .el-input__inner {
       border-top-right-radius: 0;

packages/theme-chalk/src/select-dropdown.scss

@@ -36,8 +36,8 @@
     padding: 0;
   }
 
-  & .popper__arrow {
-    left: 24px !important;
+  .popper__arrow {
+    transform: translateX(-400%);
   }
 }
 

packages/theme-chalk/src/select.scss

@@ -10,7 +10,6 @@
 @include b(select) {
   display: inline-block;
   position: relative;
-  min-width: 224px;
 
   &:hover {
     .el-input__inner {
@@ -18,7 +17,7 @@
     }
   }
 
-  & .el-input__inner {
+  .el-input__inner {
     cursor: pointer;
     padding-right: 35px;
 
@@ -27,7 +26,7 @@
     }
   }
 
-  & .el-input {
+  .el-input {
     & .el-select__caret {
       color: $--select-input-color;
       font-size: $--select-input-font-size;
@@ -65,7 +64,7 @@
     }
   }
 
-  & > .el-input {
+  > .el-input {
     display: block;
   }
 
@@ -109,11 +108,11 @@
     transform: translateY(-50%);
   }
 
-  & .el-tag__close {
+  .el-tag__close {
     margin-top: -2px;
   }
 
-  & .el-tag {
+  .el-tag {
     height: $--select-tag-height;
     line-height: $--select-tag-height;
     box-sizing: border-box;