[new feature] add SwitchCell component (#455)

dist/switch-cell/index.js

@@ -0,0 +1,23 @@
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  properties: {
+    title: String,
+    checked: Boolean,
+    border: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    size: {
+      type: String,
+      value: '26px'
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      this.triggerEvent('change', event.detail);
+    }
+  }
+});

dist/switch-cell/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../cell/index",
+    "van-switch": "../switch/index"
+  }
+}

dist/switch-cell/index.wxml

@@ -0,0 +1,15 @@
+<van-cell
+  center
+  title="{{ title }}"
+  border="{{ border }}"
+  custom-class="van-switch-cell"
+>
+  <van-switch
+    size="{{ size }}"
+    checked="{{ checked }}"
+    loading="{{ loading }}"
+    disabled="{{ disabled }}"
+    custom-class="van-switch-cell__switch"
+    bind:change="onChange"
+  />
+</van-cell>

dist/switch-cell/index.wxss

@@ -0,0 +1 @@
+.van-switch-cell{padding-top:8px;padding-bottom:8px}.van-switch-cell__switch{vertical-align:middle}

docs/src/Preview.vue

@@ -33,6 +33,7 @@ const MAP = {
   search: 'search-201808092138.png',
   steps: 'steps-201808092138.png',
   switch: 'switch-201808092138.png',
+  'switch-cell': 'switch-cell-201808221124.png',
   tag: 'tag-201808092138.png',
   tabbar: 'tabbar-201808160922.png',
   toast: 'toast-201808191046.png',

example/app.json

@@ -18,6 +18,7 @@
     "pages/stepper/index",
     "pages/steps/index",
     "pages/switch/index",
+    "pages/switch-cell/index",
     "pages/search/index",
     "pages/slider/index",
     "pages/tag/index",

example/config.js

@@ -105,6 +105,10 @@ export default [
   {
     groupName: '高阶组件',
     list: [
+      {
+        path: '/switch-cell',
+        title: 'SwitchCell 开关单元格'
+      },
       {
         path: '/tree-select',
         title: 'TreeSelect 分类选择'

example/pages/switch-cell/index.js

@@ -0,0 +1,11 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    checked: true
+  },
+
+  onChange(event) {
+    this.setData({ checked: event.detail });
+  }
+});

example/pages/switch-cell/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "SwitchCell 开关单元格",
+  "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
+    "van-switch-cell": "../../dist/switch-cell/index"
+  }
+}

example/pages/switch-cell/index.wxml

@@ -0,0 +1,31 @@
+<demo-block title="基础用法">
+  <van-cell-group>
+    <van-switch-cell
+      title="标题"
+      checked="{{ checked }}"
+      bind:change="onChange"
+    />
+  </van-cell-group>
+</demo-block>
+
+<demo-block title="禁用状态">
+  <van-cell-group>
+    <van-switch-cell
+      disabled
+      title="标题"
+      checked="{{ checked }}"
+      bind:change="onChange"
+    />
+  </van-cell-group>
+</demo-block>
+
+<demo-block title="加载状态">
+  <van-cell-group>
+    <van-switch-cell
+      loading
+      title="标题"
+      checked="{{ checked }}"
+      bind:change="onChange"
+    />
+  </van-cell-group>
+</demo-block>

example/pages/switch/index.wxss

@@ -1,5 +0,0 @@
-
-.switch-theme {
-  background: #f44 !important;
-  border-color: #f44 !important;
-}

packages/switch-cell/README.md

@@ -0,0 +1,74 @@
+## SwitchCell 开关单元格
+
+### 使用指南
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-switch-cell": "path/to/vant-weapp/dist/switch-cell/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-switch-cell
+  title="标题"
+  checked="{{ checked }}"
+  bind:change="onChange"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    checked: true
+  },
+
+  onChange(event) {
+    // 需要手动对 checked 状态进行更新
+    this.setData({ checked: event.detail });
+  }
+});
+```
+
+#### 禁用状态
+通过`disabled`属性可以将组件设置为禁用状态
+
+```html
+<van-switch-cell
+  disabled
+  title="标题"
+  checked="{{ checked }}"
+  bind:change="onChange"
+/>
+```
+
+#### 加载状态
+通过`loading`属性可以将组件设置为加载状态
+
+```html
+<van-switch-cell
+  loading
+  title="标题"
+  checked="{{ checked }}"
+  bind:change="onChange"
+/>
+```
+
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| checked | 开关状态 | `Boolean` | - |
+| title | 左侧标题 |  `String` | `''` |
+| loading | 是否为加载状态 |  `Boolean` | `false` |
+| disabled | 是否为禁用状态 |  `Boolean` | `false` |
+| size | 开关尺寸 | `String` | `26px` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| bind:change | 开关状态切换回调 | event.detail: 是否选中开关 |

packages/switch-cell/index.js

@@ -0,0 +1,23 @@
+Component({
+  options: {
+    addGlobalClass: true
+  },
+
+  properties: {
+    title: String,
+    checked: Boolean,
+    border: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    size: {
+      type: String,
+      value: '26px'
+    }
+  },
+
+  methods: {
+    onChange(event) {
+      this.triggerEvent('change', event.detail);
+    }
+  }
+});

packages/switch-cell/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../cell/index",
+    "van-switch": "../switch/index"
+  }
+}

packages/switch-cell/index.pcss

@@ -0,0 +1,10 @@
+@import '../common/style/var.pcss';
+
+.van-switch-cell {
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  &__switch {
+    vertical-align: middle;
+  }
+}

packages/switch-cell/index.wxml

@@ -0,0 +1,15 @@
+<van-cell
+  center
+  title="{{ title }}"
+  border="{{ border }}"
+  custom-class="van-switch-cell"
+>
+  <van-switch
+    size="{{ size }}"
+    checked="{{ checked }}"
+    loading="{{ loading }}"
+    disabled="{{ disabled }}"
+    custom-class="van-switch-cell__switch"
+    bind:change="onChange"
+  />
+</van-cell>