docs(auto-complete, cascader, color-picker, checkbox): en (#915)

* NAutocomplete

* NCascader

* NCheckbox

* NColorPicker

* Update index.demo-entry.md

* Update index.demo-entry.md

* Update index.demo-entry.md

* Update virtual.demo.md

* Update index.demo-entry.md

* Update basic.demo.md

src/auto-complete/demos/enUS/after-select.demo.md

@@ -1,6 +1,6 @@
 # Actions After Select
 
-Blur after selection or clear after selection.
+Choose whether the element blurs after a selection is made with `blur-after-select`.
 
 ```html
 <n-space vertical>

src/auto-complete/demos/enUS/custom-input.demo.md

@@ -1,6 +1,6 @@
 # Custom Input Element
 
-You can replace auto-complete's input element.
+You can also replace the input element of the auto-complete component.
 
 ```html
 <n-auto-complete

src/auto-complete/demos/enUS/index.demo-entry.md

@@ -1,6 +1,6 @@
 # Auto Complete
 
-Use as search hint or something similar.
+Use as a search hint or something similar.
 
 ## Demos
 
@@ -18,26 +18,26 @@ after-select
 | --- | --- | --- | --- |
 | blur-after-select | `boolean` | `false` | Whether to blur after selection. |
 | clear-after-select | `boolean` | `false` | Whether to clear after selection. |
-| clearable | `boolean` | `false` | Whether autocomplete is clearable. |
+| clearable | `boolean` | `false` | Whether auto complete is clearable. |
 | default-value | `string` | `null` | Default value of auto complete. |
 | disabled | `boolean` | `false` | Whether the auto complete is disabled. |
-| loading | `boolean` | `false` | Whether to show loading status. |
+| loading | `boolean` | `false` | Whether to show a loading status. |
-| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Options of the auto complete. |
+| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Auto complete options. |
-| placeholder | `string` | `'Please Input'` | Auto complete's prompt information. |
+| placeholder | `string` | `'Please Input'` | Auto complete's placeholder. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Auto complete size. |
-| value | `string` | `undefined` | Value of auto complete in controlled mode. |
+| value | `string` | `undefined` | Value of auto complete if being manually set. |
-| on-blur | `(event: FocusEvent) => void` | `undefined` | Callback function triggered on blur. |
+| on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. |
-| on-focus | `(event: FocusEvent) => void` | `undefined` | Callback function triggered on focus. |
+| on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. |
-| on-select | `(value: string) => void` | `undefined` | Callback function triggered when an option is selected. |
+| on-select | `(value: string) => void` | `undefined` | On select callback function. |
-| on-update:value | `(value: string \| null) => void` | `undefined` | Callback function triggered when controllable data is updated. |
+| on-update:value | `(value: string \| null) => void` | `undefined` | On update callback function. |
 
 ### AutoCompleteOption Properties
 
 | Name     | Type      | Description                    |
 | -------- | --------- | ------------------------------ |
-| disabled | `boolean` | Whether to disable the option. |
+| disabled | `boolean` | Whether the option is disabled. |
-| label    | `string`  | Displayed label value.         |
+| label    | `string`  | Option label value.         |
-| value    | `string`  | Should be unique in options.   |
+| value    | `string`  | Option ID (should be unique).   |
 
 ### AutoCompleteGroupOption Properties
 

src/cascader/demos/enUS/action.demo.md

@@ -1,6 +1,6 @@
 # Action Slot
 
-Is there anybody needs action slot on cascader menu?
+Is there anybody who needs an action slot on a cascader menu?
 
 ```html
 <n-cascader

src/cascader/demos/enUS/index.demo-entry.md

@@ -1,6 +1,6 @@
 # Cascader
 
-Cascader can be used to select some tree structured data.
+Cascader can be used to display and select tree structured data.
 
 ## Demos
 
@@ -18,29 +18,29 @@ virtual
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| cascade | `boolean` | `true` | Whether to cascade checkbox when multiple. |
+| cascade | `boolean` | `true` | Whether to cascade the checkbox selection onto children. |
 | clearable | `boolean` | `false` | Whether the cascader is clearable. |
-| default-value | `string \| number \| Array<number \| string> \| null` | `null` | Data selected by default in uncontrolled mode. |
+| default-value | `string \| number \| Array<number \| string> \| null` | `null` | Data selected by default if no value is set. |
 | disabled | `boolean` | `false` | Whether to disable the cascader. |
 | expand-trigger | `'click' \| 'hover'` | `'click'` | If `remote` is set, `'hover'` won't work. |
-| filterable | `boolean` | `false` | If `remote` is set, it won't work. |
+| filterable | `boolean` | `false` | Note: If `remote` is set, this won't have any effect. |
 | filter | `(pattern: string, option: CascaderOption, path: Array<CascaderOption>) => boolean` | A string based filter algorithm. | Filter function of the cascader. |
-| leaf-only | `boolean` | `false` | If only allow value of leaf node to be in `value`. |
+| leaf-only | `boolean` | `false` | If only a leaf node can be selected `value`. |
-| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple mode. `responsive` will keep all the tags in single line. |
+| max-tag-count | `number \| 'responsive'` | `undefined` | Max tag count in multiple select mode. `responsive` will keep all the tags in single line. |
-| multiple | `boolean` | `false` | Whether to support multiple selection. |
+| multiple | `boolean` | `false` | Whether to allow multiple options being selected. |
 | options | `Array<CascaderOption>` | required | Options of the cascader. |
-| placeholder | `string` | `'Please Select'` | Prompt information. |
+| placeholder | `string` | `'Please Select'` | Placeholder text. |
 | remote | `boolean` | `false` | Whether to obtain data remotely. |
-| separator | `string` | `' / '` | Option value separator. |
+| separator | `string` | `' / '` | Selected option path value separator (used with `show-path`). |
-| show | `boolean` | `undefined` | Whether to show menu. |
+| show | `boolean` | `undefined` | Whether to show the menu. |
-| show-path | `boolean` | `true` | Whether to show path in selector. |
+| show-path | `boolean` | `true` | Whether to show the selected options as a path. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Cascader size. |
-| value | `string \| number \| Array<number \| string> \| null` | `undefined` | Value of the cascader in controlled mode. |
+| value | `string \| number \| Array<number \| string> \| null` | `undefined` | Value of the cascader (if being set manually). |
 | virtual-scroll | `boolean` | `true` | Whether to enable virtual scrolling. |
 | on-blur | `() => void` | `undefined` | Callback on blurred. |
 | on-focus | `() => void` | `undefined` | Callback on focused. |
-| on-load | `(option: CascaderOption) => Promise<void>` | `undefined` | Callback when click unloaded node. Set `option.children` in the returned promise. Loading is end after the promise is resolved or rejected. |
+| on-load | `(option: CascaderOption) => Promise<void>` | `undefined` | Callback when a node is loaded. Set `option.children` in the returned promise. Loading will stop after the promise is resolved or rejected. |
-| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | Callback executed when value changes. |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | Callback executed when the value changes. |
 
 ## API
 
@@ -50,11 +50,11 @@ virtual
 | --------- | ------------------ | ------------------------------- |
 | label     | `string`           | Label of the option.            |
 | value     | `string \| number` | Value of the option.            |
-| disabled? | `boolean`          | Whether this item is disabled.  |
+| disabled? | `boolean`          | Whether this option is disabled.  |
-| children? | `CascaderOption`   | The children data of this item. |
+| children? | `CascaderOption`   | The children options of this option. |
 
 ## Slots
 
 | Name   | Parameters | Description                                          |
 | ------ | ---------- | ---------------------------------------------------- |
-| action | `()`       | Action fill content displayed in the cascading menu. |
+| action | `()`       | Action content displayed in the cascading menu. |

src/cascader/demos/enUS/size.demo.md

@@ -1,6 +1,6 @@
 # Size
 
-Cascader has `small`, `medium` and `large` size.
+Cascader has `small`, `medium` and `large` sizes.
 
 ```html
 <n-space vertical>

src/cascader/demos/enUS/virtual.demo.md

@@ -1,8 +1,8 @@
 # Large Data
 
-Large data is ok. By default `virtual-scroll` is true, so the demo only wants to show you cascader work with large data.
+Large datasets are ok. By default `virtual-scroll` is true, which is how cascader works with large sets of data.
 
-In the example there are 5000 \* 2 \* 2 = 20000 entries.
+In this example there are 5000 \* 2 \* 2 = 20000 entries.
 
 ```html
 <n-space vertical>

src/checkbox/demos/enUS/grid.demo.md

@@ -1,6 +1,6 @@
 # Grid
 
-Use checkbox with grid.
+Use checkboxes with a grid.
 
 ```html
 <n-checkbox-group>

src/checkbox/demos/enUS/index.demo-entry.md

@@ -19,14 +19,14 @@ event
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| checked | `boolean` | `false` | Whether it is selected in the controlled mode. |
+| checked | `boolean` | `false` | Whether the checkbox is being checked manually. |
-| default-checked | `boolean` | `false` | Whether selected by default in uncontrolled mode. |
+| default-checked | `boolean` | `false` | Whether the checkbox is checked by default. |
-| disabled | `boolean` | `false` | Whether to disable. |
+| disabled | `boolean` | `false` | Whether the checkbox is disabled. |
-| focusable | `boolean` | `true` | Whether to focus on selection. |
+| focusable | `boolean` | `true` | Whether the checkbox gains focus after being checked. |
-| indeterminate | `boolean` | `false` | Whether partly selected. |
+| indeterminate | `boolean` | `false` | Whether the checkbox can have a third indeterminate state. |
 | label | `string` | `undefined` | Checkbox label. |
-| value | `string \| number` | `undefined` | The value of the checkbox to be used in checkbox group. |
+| value | `string \| number` | `undefined` | The value of the checkbox to be used in a checkbox group. |
-| on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on checked status changes. |
+| on-update:checked | `(checked: boolean) => void` | `undefined` | Callback function triggered on a checked status change. |
 
 ### Checkbox Group Props
 
@@ -36,8 +36,8 @@ event
 | default-value | `Array<string \| number>` | `null` | Checkbox group's default selected value. |
 | max | `number` | `undefined` | The maximum number of checkboxes that can be checked. |
 | min | `number` | `undefined` | The minimum number of checkboxes that can be checked. |
-| value | `Array<string \| number> \| null` | `undefined` | Controlled value of checkbox group. |
+| value | `Array<string \| number> \| null` | `undefined` | Manually set values of a checkbox group. |
-| on-update:value | `(value: string \| number)` | `undefined` | Callback when checkbox group's value changes. |
+| on-update:value | `(value: string \| number)` | `undefined` | Callback when the checkbox group's value changes. |
 
 ## Slots
 

src/color-picker/demos/enUS/alpha.demo.md

@@ -1,6 +1,6 @@
 # Alpha
 
-Use `show-alpha` to control whether alpha channel can be adjusted.
+Use `show-alpha` to control whether the alpha channel can be adjusted.
 
 ```html
 <n-color-picker :show-alpha="false" />

src/color-picker/demos/enUS/basic.demo.md

@@ -1,6 +1,6 @@
 # Basic
 
-A basic color picker. Notice that if you choose a color from a mode, the new value will follow the mode.
+A basic color picker. Note: when choosing a color in a particular mode, that's the mode that will be used.
 
 ```html
 <n-color-picker />

src/color-picker/demos/enUS/form.demo.md

@@ -1,6 +1,6 @@
 # Use with Form
 
-It seems the example is useless. However since it's a data input component. I just put it here.
+It seems this example is useless, but it's a data input component so I just left it here.
 
 ```html
 <n-form :model="model">

src/color-picker/demos/enUS/index.demo-entry.md

@@ -1,6 +1,6 @@
 # Color Picker
 
-Compared with real world, its space is discrete.
+Unlike the real world, these color values are discrete.
 
 ## Demos
 
@@ -16,15 +16,15 @@ form
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| default-show | `boolean` | `undefined` | Whether to show panel by default. |
+| default-show | `boolean` | `undefined` | Whether to show the color panel by default. |
 | default-value | `string` | Black color value of 1st mode's corresponding value. | Default value of the picker. |
 | modes | `Array<'rgb' \| 'hex' \| 'hsl' \| 'hsv'>` | `['rgb', 'hex', 'hsl']` | The value format of the picker. Notice that value will follow the mode once you select a new value from the picker. |
-| to | `string \| HTMLElement` | `'body'` | Where to detach the panel. |
+| to | `string \| HTMLElement` | `'body'` | Where to attach the panel to. |
-| show | `boolean` | `undefined` | Whether to show the panel. |
+| show | `boolean` | `undefined` | Whether the color panel is shown. |
-| show-alpha | `boolean` | `true` | Whether alpha can be adjusted. |
+| show-alpha | `boolean` | `true` | Whether the alpha channel can be adjusted. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the picker. |
 | value | `string \| null` | `undefined` | Value of the picker. |
 | on-complete | `(value: string) => void` | `undefined` | Callback once the value is changed completely (not called during mousemove). |
-| on-update:show | `(value: boolean) => void` | `undefined` | Callback once panel show status is changed. |
+| on-update:show | `(value: boolean) => void` | `undefined` | Callback once panel the show status is changed. |
 | on-update:value | `(value: string) => void` | `undefined` | Callback once the value is changed. |
-| actions | `Array<'confirm'> \| null` | `null` | Show the type of button |
+| actions | `Array<'confirm'> \| null` | `null` | The types of buttons to be shown in the panel. |

src/color-picker/demos/enUS/modes.demo.md

@@ -1,6 +1,6 @@
 # Set Mode
 
-Use `modes` to set available modes.
+Use `modes` to set restrict the available modes.
 
 ```html
 <n-color-picker :modes="['hex']" />