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

* Input / Input Number: add chalk theme * Update Input Number doc
2017-09-22 17:46:34 +08:00 · 2017-09-22 17:46:34 +08:00 · dda21ce96e
parent 9bae0160f4
commit dda21ce96e
16 changed files with 314 additions and 104 deletions
--- a/examples/docs/en-US/input-number.md
+++ b/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
--- a/examples/docs/en-US/input.md
+++ b/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() {
--- a/examples/docs/zh-CN/input-number.md
+++ b/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
--- a/examples/docs/zh-CN/input.md
+++ b/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>
--- a/packages/autocomplete/src/autocomplete-suggestions.vue
+++ b/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 }"
    >
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/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"
--- a/packages/input-number/src/input-number.vue
+++ b/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: {
--- a/packages/select/src/select.vue
+++ b/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');
          }
--- a/packages/theme-chalk/src/autocomplete.scss
+++ b/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;
+    padding: 6px 0;
+    box-sizing: border-box;
    overflow: auto;
    background-color: $--color-white;
-    border: 1px solid $--color-black;
-    padding: 6px 0;
-    border-radius: 2px;
-    box-sizing: border-box;
+    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 {
+      color: $--color-primary;
+    }
+
+    &:active {
      background-color: $--color-primary;
      color: $--color-white;
    }
-    &:active {
-      background-color: darken($--color-primary, 0.2);
-    }
+
    &.divider {
      margin-top: 6px;
      border-top: 1px solid $--color-black;
    }
+
    &.divider:last-child {
      margin-bottom: -6px;
    }
--- a/packages/theme-chalk/src/cascader.scss
+++ b/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%);
  }
 }

--- a/packages/theme-chalk/src/common/var.scss
+++ b/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
 --------------------------*/
--- a/packages/theme-chalk/src/dropdown.scss
+++ b/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;
--- a/packages/theme-chalk/src/input-number.scss
+++ b/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;
-    width: $--input-height;
-    line-height: #{$--input-height - 2};
-    top: 1px;
-    text-align: center;
-    color: $--color-black;
-    cursor: pointer;
    position: absolute;
    z-index: 1;
+    top: 1px;
+    width: $--input-height;
+    height: auto;
+    line-height: #{$--input-height - 2};
+    text-align: center;
+    background: $--background-color-base;
+    color: $--color-text-regular;
+    cursor: pointer;
+    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-right: #{$--input-small-height * 2 + 10};
+
+    .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-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};
+      }
    }
  }
 }
--- a/packages/theme-chalk/src/input.scss
+++ b/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;
--- a/packages/theme-chalk/src/select-dropdown.scss
+++ b/packages/theme-chalk/src/select-dropdown.scss
@ -36,8 +36,8 @@
    padding: 0;
  }

-  & .popper__arrow {
-    left: 24px !important;
+  .popper__arrow {
+    transform: translateX(-400%);
  }
 }

--- a/packages/theme-chalk/src/select.scss
+++ b/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;