Switch: add chalk theme

examples/docs/en-US/switch.md

@@ -12,8 +12,11 @@
       return {
         value1: true,
         value2: true,
-        value3: '100',
-        value4: true
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
       }
     }
   };
@@ -24,14 +27,10 @@
 Switch is used for switching between two opposing states.
 
 ### Basic usage
-
-:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
+:::demo Bind `v-model` to a `Boolean` typed variable. The `on-color` and `off-color` attribute decides the background color in two states.
 
 ```html
-<el-switch
-  v-model="value1"
-  on-text=""
-  off-text="">
+<el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
@@ -52,14 +51,45 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
+### Text description
+:::demo You can add `on-text` and `off-text` attribute to show texts.
+
+```html
+<el-switch
+  v-model="value3"
+  on-text="Pay by month"
+  off-text="Pay by year">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  on-color="#13ce66"
+  off-color="#ff4949"
+  on-text="Pay by month"
+  off-text="Pay by year">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Extended value types
 
 :::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value3" placement="top">
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
-    v-model="value3"
+    v-model="value5"
     on-color="#13ce66"
     off-color="#ff4949"
     on-value="100"
@@ -71,7 +101,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: '100'
+        value5: '100'
       }
     }
   };
@@ -86,13 +116,11 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value4"
-  on-text=""
-  off-text=""
+  v-model="value6"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value4"
+  v-model="value7"
   disabled>
 </el-switch>
 
@@ -100,7 +128,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value4: true
+        value6: true,
+        value7: false
       }
     }
   };
@@ -113,11 +142,11 @@ Switch is used for switching between two opposing states.
  Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 58 (with text) / 46 (no text)
+width | width of Switch | number | — | 40
 on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
 off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
-on-text | text displayed when in `on` state | string | — | ON
-off-text | text displayed when in `off` state | string | — | OFF
+on-text | text displayed when in `on` state | string | — | —
+off-text | text displayed when in `off` state | string | — | —
 on-value  | switch value when in `on` state | boolean / string / number | — | true
 off-value  | switch value when in `off` state | boolean / string / number | — | false
 on-color | background color when in `on` state | string | — | #20A0FF

examples/docs/zh-CN/switch.md

@@ -12,8 +12,11 @@
       return {
         value1: true,
         value2: true,
-        value3: '100',
-        value4: true
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
       }
     }
   };
@@ -25,13 +28,10 @@
 
 ### 基本用法
 
-:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-text`属性与`off-text`属性来设置开关的文字描述，使用`on-color`属性与`off-color`属性来设置开关的背景色。
+:::demo 绑定`v-model`到一个`Boolean`类型的变量。可以使用`on-color`属性与`off-color`属性来设置开关的背景色。
 
 ```html
-<el-switch
-  v-model="value1"
-  on-text=""
-  off-text="">
+<el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
@@ -52,14 +52,46 @@
 ```
 :::
 
+### 文字描述
+
+:::demo 使用`on-text`属性与`off-text`属性来设置开关的文字描述。
+
+```html
+<el-switch
+  v-model="value3"
+  on-text="按月付费"
+  off-text="按年付费">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  on-color="#13ce66"
+  off-color="#ff4949"
+  on-text="按月付费"
+  off-text="按年付费">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### 扩展的 value 类型
 
 :::demo 设置`on-value`和`off-value`属性，接受`Boolean`, `String`或`Number`类型的值。
 
 ```html
-<el-tooltip :content="'Switch value: ' + value3" placement="top">
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
-    v-model="value3"
+    v-model="value5"
     on-color="#13ce66"
     off-color="#ff4949"
     on-value="100"
@@ -71,7 +103,7 @@
   export default {
     data() {
       return {
-        value3: '100'
+        value5: '100'
       }
     }
   };
@@ -87,20 +119,19 @@
 
 ```html
 <el-switch
-  v-model="value4"
-  on-text=""
-  off-text=""
+  v-model="value6"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value4"
+  v-model="value7"
   disabled>
 </el-switch>
 <script>
   export default {
     data() {
       return {
-        value4: true
+        value6: true,
+        value7: false
       }
     }
   };
@@ -114,11 +145,11 @@
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | disabled  | 是否禁用    | boolean   | — | false   |
-| width  | switch 的宽度（像素）    | number   | — | 58（有文字）/ 46（无文字） |
+| width  | switch 的宽度（像素）    | number   | — | 40 |
 | on-icon-class  | switch 打开时所显示图标的类名，设置此项会忽略 `on-text`    | string   | — | — |
 | off-icon-class  | switch 关闭时所显示图标的类名，设置此项会忽略 `off-text`    | string   | — | — |
-| on-text  | switch 打开时的文字    | string   | — | ON |
-| off-text  | switch 关闭时的文字    | string   | — | OFF |
+| on-text  | switch 打开时的文字描述    | string   | — | — |
+| off-text  | switch 关闭时的文字描述    | string   | — | — |
 | on-value  | switch 打开时的值    | boolean / string / number | — | true |
 | off-value  | switch 关闭时的值    | boolean / string / number | — | false |
 | on-color  | switch 打开时的背景色    | string   | — | #20A0FF |

packages/switch/src/component.vue

 <template>
-  <label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText, 'is-checked': checked }">
-    <div class="el-switch__mask" v-show="disabled"></div>
+  <label class="el-switch" :class="{ 'is-disabled': disabled, 'is-checked': checked }">
     <input
       class="el-switch__input"
       type="checkbox"
@@ -10,27 +9,21 @@
       :true-value="onValue"
       :false-value="offValue"
       :disabled="disabled">
+    <span
+      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
+      v-if="offIconClass || offText">
+      <i :class="[offIconClass]" v-if="offIconClass"></i>
+      <span v-if="!offIconClass && offText">{{ offText }}</span>
+    </span>
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
       <span class="el-switch__button" :style="{ transform }"></span>
     </span>
-    <transition name="label-fade">
-      <div
-        class="el-switch__label el-switch__label--left"
-        v-show="checked"
-        :style="{ 'width': coreWidth + 'px' }">
-        <i :class="[onIconClass]" v-if="onIconClass"></i>
-        <span v-if="!onIconClass && onText">{{ onText }}</span>
-      </div>
-    </transition>
-    <transition name="label-fade">
-      <div
-        class="el-switch__label el-switch__label--right"
-        v-show="!checked"
-        :style="{ 'width': coreWidth + 'px' }">
-        <i :class="[offIconClass]" v-if="offIconClass"></i>
-        <span v-if="!offIconClass && offText">{{ offText }}</span>
-      </div>
-    </transition>
+    <span
+      :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
+      v-if="onIconClass || onText">
+      <i :class="[onIconClass]" v-if="onIconClass"></i>
+      <span v-if="!onIconClass && onText">{{ onText }}</span>
+    </span>
   </label>
 </template>
 
@@ -58,14 +51,8 @@
         type: String,
         default: ''
       },
-      onText: {
-        type: String,
-        default: 'ON'
-      },
-      offText: {
-        type: String,
-        default: 'OFF'
-      },
+      onText: String,
+      offText: String,
       onColor: {
         type: String,
         default: ''
@@ -101,12 +88,8 @@
       checked() {
         return this.value === this.onValue;
       },
-      hasText() {
-        /* istanbul ignore next */
-        return this.onText || this.offText;
-      },
       transform() {
-        return this.checked ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
+        return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
       }
     },
     watch: {
@@ -135,9 +118,7 @@
     },
     mounted() {
       /* istanbul ignore if */
-      if (this.width === 0) {
-        this.coreWidth = this.hasText ? 58 : 46;
-      }
+      this.coreWidth = this.width || 40;
       if (this.onColor || this.offColor) {
         this.setBackgroundColor();
       }

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

@@ -435,14 +435,14 @@ $--cascader-height: 200px;
 /* Switch
 -------------------------- */
 $--switch-on-color: $--color-primary;
-$--switch-off-color: $--color-text-placeholder;
-$--switch-disabled-color: $--color-text-secondary;
+$--switch-off-color: $--border-color-base;
+$--switch-disabled-color: $--border-color-lighter;
 $--switch-disabled-text-color: $--color-text-placeholder;
 
 $--switch-font-size: $--font-size-base;
-$--switch-core-border-radius: 12px;
-$--switch-width: 46px;
-$--switch-height: 22px;
+$--switch-core-border-radius: 10px;
+$--switch-width: 40px;
+$--switch-height: 20px;
 $--switch-button-size: 16px;
 
 /* Dialog

packages/theme-chalk/src/switch.scss

@@ -17,31 +17,28 @@
 
   @include e(label) {
     transition: .2s;
-    position: absolute;
-    width: $--switch-width;
     height: $--switch-height;
-    left: 0;
-    top: 0;
     display: inline-block;
     font-size: $--switch-font-size;
+    font-weight: 500;
     cursor: pointer;
+    vertical-align: middle;
+    color: $--color-text-primary;
+
+    @include when(active) {
+      color: $--color-primary;
+    }
+
     @include m(left) {
-      i {
-        left: 6px;
-      }
+      margin-right: 10px;
     }
     @include m(right) {
-      i {
-        right: 6px;
-      }
+      margin-left: 10px;
     }
     & * {
       line-height: 1;
-      top: 4px;
-      position: absolute;
       font-size: $--switch-font-size;
       display: inline-block;
-      color: $--color-white;
     }
   }
 
@@ -62,11 +59,12 @@
     background: $--switch-off-color;
     cursor: pointer;
     transition: border-color .3s, background-color .3s;
+    vertical-align: middle;
 
     & .el-switch__button {
       position: absolute;
-      top: 0;
-      left: 0;
+      top: 1px;
+      left: 1px;
       border-radius: $--border-radius-circle;
       transition: transform .3s;
       width: $--switch-button-size;
@@ -86,14 +84,10 @@
     .el-switch__core {
       border-color: $--switch-disabled-color !important;
       background: $--switch-disabled-color !important;
+    }
 
-      & span {
-        background-color: $--switch-disabled-text-color !important;
-      }
-
-      & ~ .el-switch__label * {
-        color: $--switch-disabled-text-color !important;
-      }
+    .el-switch__label * {
+      color: $--switch-disabled-text-color !important;
     }
   }
 

test/unit/specs/switch.spec.js

@@ -20,7 +20,7 @@ describe('Switch', () => {
     const core = vm.$el.querySelector('.el-switch__core');
     expect(core.style.backgroundColor).to.equal('rgb(255, 0, 0)');
     expect(core.style.width).to.equal('100px');
-    expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('on');
+    expect(vm.$el.querySelector('.el-switch__label--left').querySelector('span').textContent).to.equal('off');
   });
 
   it('switch with icons', () => {
@@ -30,7 +30,7 @@ describe('Switch', () => {
     });
 
     const icon = vm.$el.querySelector('.el-switch__label--left').querySelector('i');
-    expect(icon.classList.contains('el-icon-check')).to.true;
+    expect(icon.classList.contains('el-icon-close')).to.true;
   });
 
   it('value correctly update', done => {