feat(toogle): add sizes

docs/en-us/components/toggle.md

@@ -8,9 +8,11 @@ Displays a boolean value.
 
 <ex-footer edit-link="https://github.com/geist-org/vue/edit/master/docs/en-us/components/toogle.md">
 
-| Attribute    | Description            | Type                        | Accepted values  | Default |
-| ------------ | ---------------------- | --------------------------- | ---------------- | ------- |
-| **v-model**  | binding value[v-model] | `string | number | boolean` | -                | -       |
-| **disabled** | disable toggle         | `boolean`                   | `true` / `false` | `false` |
+| Attribute    | Description            | Type                        | Accepted values     | Default  |
+| ------------ | ---------------------- | --------------------------- | ------------------- | -------- |
+| **v-model**  | binding value[v-model] | `string | number | boolean` | -                   | -        |
+| **disabled** | disable toggle         | `boolean`                   | `true` / `false`    | `false`  |
+| **size**     | component size         | `string`                    | `mini/medium/large` | `medium` |
 
 </ex-footer>
+

docs/examples/toggle/basic.vue

@@ -1,5 +1,8 @@
 <template lang="pug">
-zi-toggle(v-model="value")
+div
+  zi-toggle(v-model="value" size='mini' style="margin-right: 10px;")
+  zi-toggle(v-model="value" size='medium' style="margin-right: 10px;")
+  zi-toggle(v-model="value" size='large')
 </template>
 
 <script>

docs/zh-cn/components/toggle.md

@@ -8,9 +8,10 @@
 
 <ex-footer edit-link="https://github.com/geist-org/vue/edit/master/docs/en-us/components/toogle.md">
 
-| 属性         | 描述             | 类型                        | 推荐值 | 默认    |
-| ------------ | ---------------- | --------------------------- | ------ | ------- |
-| **v-model**  | `v-model` 绑定值 | `string | number | boolean` | -      | -       |
-| **disabled** | 是否禁用         | `boolean`                   | -      | `false` |
+| 属性         | 描述             | 类型                        | 推荐值              | 默认     |
+| ------------ | ---------------- | --------------------------- | ------------------- | -------- |
+| **v-model**  | `v-model` 绑定值 | `string | number | boolean` | -                   | -        |
+| **disabled** | 是否禁用         | `boolean`                   | -                   | `false`  |
+| **size**     | 组件尺寸         | `string`                    | `mini/medium/large` | `medium` |
 
-</ex-footer>
+</ex-footer>

packages/more/more.vue

@@ -1,8 +1,9 @@
 <template lang="pug">
-.zi-more(@click="toggleHandler")
+.zi-more
   zi-button.zi-more-slot(
     circular size="small"
     :loading="loading"
+    @click="toggleHandler"
   ) {{ statusText }}
 </template>
 

packages/toggle/toggle.styl

@@ -10,31 +10,47 @@
   width rem(28)
   cursor pointer
 
+  &.mini
+    height rem(13.36)
+    width rem(26.72)
+    border-radius rem(13.36)
+    line-height rem(13.36)
+
+  &.medium
+    height rem(14)
+    width rem(28)
+    border-radius rem(14)
+    line-height rem(14)
+
+  &.large
+    height rem(16)
+    width rem(32)
+    border-radius rem(16)
+    line-height rem(16)
+
   &.checked
+
     background-color var(--geist-success)
     border 1px solid var(--geist-success)
 
     &.disabled
       background-color var(--accents-4)
       border-color var(--accents-4)
 
-    &:before
+    .inner
       right 0
       transform translate(0, -50%)
 
   &.disabled
     background-color var(--accents-1)
     cursor not-allowed
 
-    &:before
+    .inner
       background-color var(--accents-2)
       border-color var(--accents-2)
 
-  &:before
-    content ''
+  .inner
     position absolute
-    width rem(12)
-    height rem(12)
     top 50%
     transition-property right, transform
     transition-duration .28s
@@ -45,3 +61,4 @@
     transition-timing-function cubic-bezier(0, 0, 0.2, 1)
     background-color var(--geist-background)
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1)
+

packages/toggle/toggle.vue

@@ -1,18 +1,32 @@
 <template lang="pug">
-.zi-toggle(@click="clickHandler" :class="{ checked: !!model, disabled }")
+.zi-toggle(@click='clickHandler', :class='[{ checked: !!model, disabled }, size]', ref='ziToggle')
+  .inner(:style='{ width: innerSwitchRect, height: innerSwitchRect }')
 </template>
 
 <script>
 export default {
   name: 'zi-toggle',
+  mounted() {
+    const width = this.$refs.ziToggle.getBoundingClientRect().height + 'px'
+    const basic = '2px'
+    this.innerSwitchRect = `calc(${width} - ${basic})`
+  },
 
   data: () => ({
     privateModel: undefined,
+    innerSwitchRect: '',
   }),
 
   props: {
     value: [String, Number, Boolean],
     disabled: Boolean,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['mini', 'medium', 'large'].indexOf(value) !== -1
+      },
+    },
   },
 
   computed: {