[Document] add form components english document (#199)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

docs/examples-docs/en-US/changelog.md

@@ -1,13 +1,13 @@
 ## Changelog
 
-## [v0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
+### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
 `2017-10-11`
 
 **Bug Fixes**
 
 - fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
 
-## [v0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
+### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
 `2017-10-11`
 
 **Improvements**
@@ -18,7 +18,7 @@
 - fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
 - fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
 
-## [v0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
+### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
 `2017-10-09`
 
 **Improvements**

docs/examples-docs/en-US/checkbox.md

@@ -0,0 +1,139 @@
+<script>
+export default {
+  data() {
+    return {
+      checkbox1: true,
+      checkbox2: true,
+      list: [
+        'a',
+        'b',
+        'c'
+      ],
+      result: ['a', 'b']
+    };
+  }
+};
+</script>
+
+## Checkbox
+
+### Install
+``` javascript
+import { Checkbox, CheckboxGroup } from 'vant';
+
+Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checkbox1: true
+    };
+  }
+};
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
+```
+:::
+
+#### CheckboxGroup
+When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
+
+:::demo CheckboxGroup
+```html
+<van-checkbox-group v-model="result">
+  <van-checkbox
+    v-for="(item, index) in list"
+    :key="index"
+    :name="item"
+  >
+    Checkbox {{ item }}
+  </van-checkbox>
+</van-checkbox-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    };
+  },
+
+  watch: {
+    result(val) {
+      console.log(val);
+    }
+  }
+};
+```
+:::
+
+#### Inside a Cell
+
+:::demo Inside a Cell
+```html
+<van-checkbox-group v-model="result">
+  <van-cell-group>
+    <van-cell v-for="(item, index) in list" :key="index">
+      <van-checkbox :name="item">Checkbox{{ item }}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    };
+  }
+};
+```
+:::
+
+### Checkbox API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Checkbox name | `Boolean`  | `false` | - |
+| disabled | Diable checkbox | `Boolean`  | `false` | - |
+| shape | Checkbox shape | `String`  | `round` | `square` |
+
+### CheckboxGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Disable all checkboxes | `Boolean` | `false` | - |
+
+### Checkbox Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
+
+### CheckboxGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |

docs/examples-docs/en-US/field.md

@@ -0,0 +1,126 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      password: '',
+      username: '',
+      message: ''
+    };
+  }
+};
+</script>
+
+## Field
+
+### Install
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
+### Usage
+
+#### Basic Usage
+The value of filed is bound with v-model.
+
+:::demo Basic Usage
+```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="Username"></van-field>
+</van-cell-group>
+```
+:::
+
+#### Custom Type
+Use `type` prop to custom diffrent type fileds.
+
+:::demo Custom Type
+```html
+<van-cell-group>
+  <van-field
+    v-model="username"
+    label="Username"
+    icon="clear"
+    placeholder="Username"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
+  <van-field
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Password"
+    required>
+  </van-field>
+</van-cell-group>
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-cell-group>
+  <van-field value="Disabled" label="Username" disabled></van-field>
+</van-cell-group>
+```
+:::
+
+#### Error Info
+
+:::demo Error Info
+```html
+<van-cell-group>
+  <van-field label="Username" placeholder="Username" error></van-field>
+</van-cell-group>
+```
+:::
+
+#### Auto resize
+Textarea Filed can be auto resize when has `autosize` prop
+
+:::demo Auto resize
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    label="Message"
+    type="textarea"
+    placeholder="Message"
+    rows="1"
+    autosize
+  >
+  </van-field>
+</van-cell-group>
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Filed type | `String`  | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | Filed value | `String`  | - | - |
+| label | Filed label | `String`  | - | - |
+| disabled | Disable field  | `Boolean`  | `false` | - |
+| error | Whether to show error info | `Boolean`  | `false` | - |
+| autosize | Textarea auto resize | `Boolean`  | `false` | - |
+| icon | Right side Icon name | `String`  | - | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| focus | Triggered when filed get focused | - |
+| blur | Triggered when blur filed | - |
+| click-icon | Triggered when click the icon of filed | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| icon | Custom icon |

docs/examples-docs/en-US/layout.md

@@ -1,27 +1,3 @@
-<style>
-.demo-layout {
-  .van-row {
-    padding: 0 15px;
-  }
-  .van-col {
-    color: #fff;
-    font-size: 13px;
-    line-height: 30px;
-    text-align: center;
-    margin-bottom: 10px;
-    background-clip: content-box;
-
-    &:nth-child(odd) {
-      background-color: #39a9ed;
-    }
-
-    &:nth-child(even) {
-      background-color: #66c6f2;
-    }
-  }
-}
-</style>
-
 ## Layout
 
 Quickly and easily create layouts with `van-row` and `van-col`
@@ -36,7 +12,7 @@ Vue.component(Col.name, Col);
 
 ### Usage
 
-#### Basic
+#### Basic Usage
 
 Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
 
@@ -77,14 +53,14 @@ Set grid spacing using `gutter` attribute. The default value is 0
 ### API
 
 #### Row
-| Attribute       | Description      | Type       | Default       | Accepted Values       |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | gutter | grid spacing（px） | `String | Number` | - | - |
 | prefix | className prefix | `String` | `van` | - |
 
 #### Column
-| Attribute       | Description      | Type       | Default       | Accepted Values       |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| span | number of column the grid spans | `String | Number`  | - | - |
+| span | number of column the grid spans | `String | Number` | - | - |
 | offset | number of spacing on the left side of the grid | `String | Number` | -  | - |
 | prefix | className prefix | `String`  | `van` | - |

docs/examples-docs/en-US/number-keyboard.md

@@ -0,0 +1,93 @@
+<script>
+import { Toast } from 'packages';
+
+export default {
+  data() {
+    return {
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast('Input: ' + value);
+    },
+    onDelete() {
+      Toast('Delete');
+    }
+  }
+}
+</script>
+
+## NumberKeyboard
+
+### Install
+``` javascript
+import { NumberKeyboard } from 'vant';
+
+Vue.component(NumberKeyboard.name, NumberKeyboard);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-button @touchstart.native.stop="showKeyboard = true">
+  ShowKeyboard
+</van-button>
+
+<van-button @touchstart.native.stop="showKeyboard = false">
+  HideKeyboard
+</van-button>
+
+<van-number-keyboard
+  :show="showKeyboard"
+  @blur="showKeyboard = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('delete');
+    }
+  }
+}
+```
+:::
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| show | Whether to show keyboard | `Boolean`  | - | - |
+| title | Keyboard title | `String` | - | - |
+| extraKey | Content of bottom left key | `String`  | `''` | - |
+| zIndex | Keyboard z-index | `Number`  | `100` | - |
+| transition | Whether to show transition animation | `Boolean`  | `true` | - |
+| showDeleteKey | Whether to show delete button | `Boolean`  | `true` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| input | Triggered when keydown | key: Content of the key |
+| delete | Triggered when press delete key | - |
+| blur | Triggered when blur keyboard | - |
+| show | Triggered when keyboard is fully displayed. | - |
+| hide | Triggered when keyboard is fully hidden. | - |

docs/examples-docs/en-US/password-input.md

@@ -0,0 +1,88 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+</script>
+
+## PasswordInput
+The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
+
+### Install
+``` javascript
+import { PasswordInput, NumberKeyBoard } from 'vant';
+
+Vue.component(PasswordInput.name, PasswordInput);
+Vue.component(NumberKeyBoard.name, NumberKeyBoard);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<!-- PasswordInput -->
+<van-password-input
+  :value="value"
+  info="Some tips"
+  @focus="showKeyboard = true"
+></van-password-input>
+
+<!-- NumberKeyboard -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+></van-number-keyboard>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| value | Password value | `String`  | `''` | - |
+| length | Maxlength of password | `Number` | `6` | - |
+| info | Bottom info | `String` | - | - |
+| errorInfo | Bottom error info | `String` | - | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| focus | Triggered when input get focused | - |

docs/examples-docs/en-US/quickstart.md

@@ -10,7 +10,7 @@ npm i vant -S
 
 ### Usage
 
-#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
 ```bash
 # Install babel-plugin-import
 npm i babel-plugin-import -D

docs/examples-docs/en-US/radio.md

@@ -0,0 +1,131 @@
+<script>
+export default {
+  data() {
+    return {
+      radio1: '1',
+      radio2: '2',
+      radio3: '1',
+      radio4: '1'
+    };
+  }
+};
+</script>
+
+## Radio
+
+### Install
+``` javascript
+import { Radio } from 'vant';
+
+Vue.component(Radio.name, Radio);
+```
+
+### Usage
+
+#### Basic Usage
+Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
+
+:::demo Basic Usage
+```html
+<div class="van-radios">
+  <van-radio name="1" v-model="radio1">Radio 1</van-radio>
+  <van-radio name="2" v-model="radio1">Radio 2</van-radio>
+</div>
+```
+```javascript
+export default {
+  data() {
+    return {
+      radio1: '1'
+    }
+  }
+};
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<div class="van-radios">
+  <van-radio name="1" v-model="radio2" disabled>Disabled</van-radio>
+  <van-radio name="2" v-model="radio2" disabled>Disabled and checked</van-radio>
+</div>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio2: '2'
+    }
+  }
+};
+```
+:::
+
+#### RadioGroup
+When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
+
+:::demo RadioGroup
+```html
+<div class="van-radios">
+  <van-radio-group v-model="radio3">
+    <van-radio name="1">Radio 1</van-radio>
+    <van-radio name="2">Radio 2</van-radio>
+  </van-radio-group>
+</div>
+```
+  
+```javascript
+export default {
+  data() {
+    return {
+      radio3: '1'
+    }
+  }
+};
+```
+:::
+
+#### With Cell
+
+:::demo With Cell
+```html
+<van-radio-group v-model="radio4">
+  <van-cell-group>
+    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
+    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio4: '1'
+    }
+  }
+};
+```
+:::
+
+### Radio API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable radio | `Boolean` | `false` | - |
+| name | Radio name | `Boolean` | `false` | - |
+
+### RadioGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable all radios | `Boolean` | `false` | - |
+
+### RadioGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |

docs/examples-docs/en-US/switch.md

@@ -0,0 +1,112 @@
+<script>
+import Dialog from 'packages/dialog';
+
+export default {
+  data() {
+    return {
+      checked: true,
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: 'Confirm',
+        confirmButtonText: 'ok',
+        cancelButtonText: 'cancel',
+        message: 'Are you sure to toggle switch?'
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};
+</script>
+
+## Switch
+
+### Install
+``` javascript
+import { Switch } from 'vant';
+
+Vue.component(Switch.name, Switch);
+```
+
+### Usage
+
+#### Basic Usage
+
+:::demo Basic Usage
+```html
+<van-switch v-model="checked" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    };
+  }
+};  
+```
+:::
+
+#### Disabled
+
+:::demo Disabled
+```html
+<van-switch v-model="checked" disabled />
+```
+:::
+
+#### Loading
+
+
+:::demo Loading
+```html
+<van-switch v-model="checked" loading />
+```
+:::
+
+#### Advanced usage
+:::demo Advanced usage
+```html
+<van-switch :value="checked2" @input="onInput" />
+```
+```js
+export default {
+  data() {
+    return {
+      checked2: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: 'Confirm',
+        message: 'Are you sure to toggle switch?'
+      }).then(() => {
+        this.checked2 = checked;
+      });
+    }
+  }
+};  
+```
+:::
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Check status of Switch | `Boolean` | `false` | - |
+| loading | Whether to show loading icon | `Boolean`  | `false` | - |
+| disabled | Disable switch | `Boolean`  | `false` | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when check status changed | checked: is switch checked |