[improvement] Switch: update style (#2242)

package.json

@@ -27,6 +27,7 @@
     "build:site": "rimraf docs/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js && gh-pages -d docs/dist",
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:clear-cache": "jest --clearCache",
     "test:coverage": "open test/coverage/index.html",
     "release": "sh build/release.sh"
   },
@@ -111,7 +112,7 @@
     "stylelint-config-standard": "^18.2.0",
     "uppercamelcase": "^3.0.0",
     "url-loader": "^1.1.2",
-    "vant-doc": "1.0.19",
+    "vant-doc": "1.0.20",
     "vue": "2.5.17",
     "vue-jest": "^3.0.1",
     "vue-loader": "^15.4.2",

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="设为默认收货地址" class="van-switch" style="font-size:26px;background-color:undefined;">
+          <div title="设为默认收货地址" class="van-switch" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -207,7 +207,7 @@ exports[`create a AddressEdit with props 1`] = `
       <!---->
     </div>
     <div class="van-cell__value">
-      <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
+      <div title="设为默认收货地址" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
         <div class="van-switch__node">
           <!---->
         </div>

packages/style/var.less

@@ -75,6 +75,23 @@
 // Swipe
 @swipe-indicator: 6px;
 
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: .3s;
+@switch-disabled-opacity: .4;
+@switch-border: 1px solid rgba(0, 0, 0, .1);
+
+// SwitchCell
+@switch-cell-padding-top: 9px;
+@switch-cell-padding-bottom: 9px;
+
 // Tab
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;

packages/switch-cell/en-US.md

@@ -56,7 +56,7 @@ use `loading` property to keep component in loading state
 | title | the leftside title |  `String` | `''` |
 | loading | whether switch is loading |  `Boolean` | `false` |
 | disabled | whether to disable switch |  `Boolean` | `false` |
-| size | Size of switch | `String` | `26px` |
+| size | Size of switch | `String` | `24px` |
 
 ### Event
 

packages/switch-cell/index.less

@@ -1,8 +1,8 @@
 @import '../style/var';
 
 .van-switch-cell {
-  padding-top: 8px;
+  padding-top: @switch-cell-padding-top;
-  padding-bottom: 8px;
+  padding-bottom: @switch-cell-padding-bottom;
 
   .van-switch {
     float: right;

packages/switch-cell/index.vue

@@ -31,7 +31,7 @@ export default create({
     disabled: Boolean,
     size: {
       type: String,
-      default: '26px'
+      default: '24px'
     }
   },
 

packages/switch-cell/test/__snapshots__/demo.spec.js.snap

@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
+          <div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:26px;background-color:undefined;">
+          <div title="标题" class="van-switch van-switch--on van-switch--disabled" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
               <!---->
             </div>
@@ -46,7 +46,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value">
-          <div title="标题" class="van-switch van-switch--on" style="font-size:26px;background-color:undefined;">
+          <div title="标题" class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
             <div class="van-switch__node">
               <div class="van-loading van-loading--circular van-loading van-switch__loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
             </div>

packages/switch-cell/zh-CN.md

@@ -56,7 +56,7 @@ export default {
 | title | 左侧标题 |  `String` | `''` | - |
 | loading | 是否为加载状态 |  `Boolean` | `false` | - |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` | - |
-| size | 开关尺寸 | `String` | `26px` | 1.1.11 |
+| size | 开关尺寸 | `String` | `24px` | 1.1.11 |
 
 ### Event
 

packages/switch/demo/index.vue

@@ -18,12 +18,24 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('advancedUsage')">
+    <demo-block :title="$t('customSize')">
       <van-switch
-        :value="checked2"
+        v-model="checked2"
-        size="36px"
+        size="24px"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-switch
+        v-model="checked3"
         active-color="#4b0"
         inactive-color="#f44"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('asyncControl')">
+      <van-switch
+        :value="checked4"
         @input="onInput"
       />
     </demo-block>
@@ -35,18 +47,26 @@ export default {
   i18n: {
     'zh-CN': {
       title: '提醒',
-      message: '是否切换开关？'
+      message: '是否切换开关？',
+      customSize: '自定义大小',
+      customColor: '自定义颜色',
+      asyncControl: '异步控制'
     },
     'en-US': {
       title: 'Confirm',
-      message: 'Are you sure to toggle switch?'
+      message: 'Are you sure to toggle switch?',
+      customSize: 'Custom Size',
+      customColor: 'Custom Color',
+      asyncControl: 'Async Control'
     }
   },
 
   data() {
     return {
       checked: true,
-      checked2: true
+      checked2: true,
+      checked3: true,
+      checked4: true
     };
   },
 
@@ -56,7 +76,7 @@ export default {
         title: this.$t('title'),
         message: this.$t('message')
       }).then(() => {
-        this.checked2 = checked;
+        this.checked4 = checked;
       });
     }
   }

packages/switch/en-US.md

@@ -28,24 +28,45 @@ export default {
 #### Disabled
 
 ```html
-<van-switch v-model="checked" disabled />
+<van-switch
+  v-model="checked"
+  disabled
+/>
 ```
 
 #### Loading
 
-
 ```html
-<van-switch v-model="checked" loading />
+<van-switch
+  v-model="checked"
+  loading
+/>
 ```
 
-#### Advanced usage
+#### Custom Size
+
+```html
+<van-switch
+  v-model="checked"
+  size="24px"
+/>
+```
+
+#### Custom Color
+
+```html
+<van-switch
+  v-model="checked"
+  active-color="#4b0"
+  inactive-color="#f44"
+/>
+```
+
+#### Async Control
 
 ```html
 <van-switch
   :value="checked"
-  size="36px"
-  active-color="#4b0"
-  inactive-color="#f44"
   @input="onInput"
 />
 ```

packages/switch/index.less

@@ -1,27 +1,27 @@
 @import '../style/var';
 
 .van-switch {
-  height: 1em;
-  width: 1.8em;
   display: inline-block;
   position: relative;
-  border-radius: 1em;
+  width: @switch-width;
+  height: @switch-height;
+  border: @switch-border;
+  border-radius: @switch-node-size;
   box-sizing: content-box;
-  border: 1px solid rgba(0, 0, 0, .1);
+  background-color: @switch-background-color;
-  background-color: @white;
+  transition: background-color @switch-transition-duration;
-  transition: background-color .3s;
 
   &__node {
     top: 0;
     left: 0;
-    z-index: 1;
-    width: 1em;
-    height: 1em;
-    transition: .3s;
     position: absolute;
     border-radius: 100%;
-    background-color: @white;
+    width: @switch-node-size;
-    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+    height: @switch-node-size;
+    z-index: @switch-node-z-index;
+    transition: @switch-transition-duration;
+    box-shadow: @switch-node-box-shadow;
+    background-color: @switch-node-background-color;
   }
 
   &__loading {
@@ -32,14 +32,14 @@
   }
 
   &--on {
-    background-color: @blue;
+    background-color: @switch-on-background-color;
 
     .van-switch__node {
-      transform: translateX(.8em);
+      transform: translateX(@switch-width - @switch-node-size);
     }
   }
 
   &--disabled {
-    opacity: .4;
+    opacity: @switch-disabled-opacity;
   }
 }

packages/switch/test/__snapshots__/demo.spec.js.snap

@@ -24,7 +24,21 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-switch van-switch--on" style="font-size:36px;background-color:#4b0;">
+    <div class="van-switch van-switch--on" style="font-size:24px;background-color:undefined;">
+      <div class="van-switch__node">
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:#4b0;">
+      <div class="van-switch__node">
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-switch van-switch--on" style="font-size:30px;background-color:undefined;">
       <div class="van-switch__node">
         <!---->
       </div>

packages/switch/zh-CN.md

@@ -10,6 +10,7 @@ Vue.use(Switch);
 ### 代码演示
 
 #### 基础用法
+
 ```html
 <van-switch v-model="checked" />
 ```
@@ -25,22 +26,47 @@ export default {
 ```
 
 #### 禁用状态
+
 ```html
-<van-switch v-model="checked" disabled />
+<van-switch
+  v-model="checked"
+  disabled
+/>
 ```
 
 #### 加载状态
+
 ```html
-<van-switch v-model="checked" loading />
+<van-switch
+  v-model="checked"
+  loading
+/>
 ```
 
-#### 高级用法
+#### 自定义大小
+
+```html
+<van-switch
+  v-model="checked"
+  size="24px"
+/>
+```
+
+#### 自定义颜色
+
+```html
+<van-switch
+  v-model="checked"
+  active-color="#4b0"
+  inactive-color="#f44"
+/>
+```
+
+#### 异步控制
+
 ```html
 <van-switch
   :value="checked"
-  size="36px"
-  active-color="#4b0"
-  inactive-color="#f44"
   @input="onInput"
 />
 ```
@@ -66,7 +92,6 @@ export default {
 }; 
 ```
 
-
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

yarn.lock

@@ -9598,9 +9598,9 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vant-doc@1.0.19:
+vant-doc@1.0.20:
-  version "1.0.19"
+  version "1.0.20"
-  resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.19.tgz#9e6ebef52c53fac698472099154df074400d3b56"
+  resolved "https://registry.yarnpkg.com/vant-doc/-/vant-doc-1.0.20.tgz#a497c7140c167f8d4013c0833dbccf3bd099f8e0"
   dependencies:
     cheerio "0.22.0"
     commander "^2.17.1"