-
-
-
+
+
-{{ JSON.stringify(test,0,2) }}
+{{ JSON.stringify(customValue, 0, 2) }}
```
```js
export default {
data () {
return {
- test: [
- {
- isCheck: true,
- num: 1,
- string: 'Test string'
- }
+ customValue: [
+ {
+ isCheck: true,
+ num: 1,
+ string: 'A String'
+ }
]
}
},
methods: {
- add (resolve) {
- resolve({
+ onAdd () {
+ return {
isCheck: false,
num: 1,
- string: 'Test string'
- })
+ string: 'A String'
+ }
}
}
}
diff --git a/demo/documentation/components/dynamicInput/enUS/form.md b/demo/documentation/components/dynamicInput/enUS/form.md
new file mode 100644
index 000000000..0364a5f83
--- /dev/null
+++ b/demo/documentation/components/dynamicInput/enUS/form.md
@@ -0,0 +1,96 @@
+# Use it in Form
+`n-dynamic-input` 并不能作为一个单独的表项检验，如果你需要检验 `n-dynamic-input` 里面的内容，可以在自定义内容中传入 `n-form-item` 来完成数据的检验。下面是一个完整的例子。
+```html
+
+
+
+
+
+
+
+
+
+{{ JSON.stringify(model.dynamicInputValue, 0, 2) }}
+
+```
+```js
+export default {
+ data () {
+ return {
+ dynamicInputRule: {
+ trigger: 'input',
+ validator (rule, value) {
+ if (value.length >= 5) return new Error('最多输入四个字符')
+ return true
+ }
+ },
+ model: {
+ dynamicInputValue: [
+ { key: 0, value: '' }
+ ]
+ }
+ }
+ },
+ methods: {
+ onCreate () {
+ return {
+ name: '',
+ value: '',
+ /** 生成 key ，目的是让这个值对应的表项的验证信息不错位 */
+ key: Math.random().toString(16).slice(2, 10)
+ }
+ },
+ /**
+ * 由于清除 input 的内容是个外部行为，input 不会发出事件，所以 form-item 无法得到从
+ * input 发出的事件。于是为了验证结果和显示的值同步，需要手动验证。使用 $nextTick 是因
+ * 为在接受这个事件时，input 的值刚放在事件中发出，还没有落实到实际的值上，需要等下个
+ * tick 才能验证新的结果
+ */
+ handleClear () {
+ this.$nextTick().then(
+ () => this.$refs.form.validate()
+ )
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dynamicInput/enUS/index.md b/demo/documentation/components/dynamicInput/enUS/index.md
index 0552ba9e1..b71881a82 100644
--- a/demo/documentation/components/dynamicInput/enUS/index.md
+++ b/demo/documentation/components/dynamicInput/enUS/index.md
@@ -1,36 +1,45 @@
# Dynamic Input
+
+这个组件的名字改过很多次。
-## Demos
+一开始它被造出来是为了输入环境变量。
+## 演示
```demo
basic
pair
custom
+form
```
## Props
-### Input Props
-|Name|Type|Default|Description|
+### Dynamic Input Props
+|名称|类型|默认值|说明|
|-|-|-|-|
-|value|`Array`||**required**|
+|preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设，在不设定 `$scopedSlots.default` 的时候生效|
+|value|`Array`|-|**必需**|
+|max|`number`|`null`|最多有几项内容|
+|key-field|`string`|`null`||
+|on-create|`(index: number) => any`|`null`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值以及清空内容时的初始值。其中 `index` 是创建内容将要被放置到的位置，从 0 开始计算|
+
+### Dynamic Input Props(Input Preset)
+|名称|类型|默认值|说明|
+|-|-|-|-|
+|value|`Array
`|-|**必需**|
|placeholder|`string`|`''`||
-|onAdd|`(resolve: (item) => void) => any`|`null`| Callback when click at '+'. Pass resolved item to resolve function to set a new node.|
-### Pair Props
-|Name|Type|Default|Description|
+### Dynamic Input Props(Pair Preset)
+|名称|类型|默认值|说明|
|-|-|-|-|
-|value|`Array`||**required**|
-|placeholderKey|`string`|`key`||
-|placeholderValue|`string`|`value`||
-|onAdd|`(resolve: (item) => void) => any`|`null`| Callback when click at '+'. Pass resolved item to resolve function to set a new node.|
-
-
-### Custom Props
-|Name|Type|Default|Description|
-|-|-|-|-|
-|value|`Array`||**required**|
-|onAdd|`(resolve: (item) => void) => any`|`null`| Callback when click at '+'. Pass resolved item to resolve function to set a new node.|
+|value|`Array<{ key: string, value: string }>`|-|**必需**|
+|key-placeholder|`string`|`''`||
+|value-placeholder|`string`|`''`||
+## Slots
+|名称|参数|说明|
+|-|-|-|
+|default|`({ value: any, index: number })`|每一项的渲染方式，其中 `value` 为该项对应的数组值，`index` 为该项对应的数组索引|
## Events
-|Name|Parameters|Description|
+|名称|参数|说明|
|-|-|-|
-|remove|`(index: Number)`| Index is the item which you removed|
\ No newline at end of file
+|clear|`()`||
+|remove|`(index: Number)`|`index` 是要移除的数据的索引|
\ No newline at end of file
diff --git a/demo/documentation/components/dynamicInput/enUS/pair.md b/demo/documentation/components/dynamicInput/enUS/pair.md
index a904a92b6..ab0b7d2e8 100644
--- a/demo/documentation/components/dynamicInput/enUS/pair.md
+++ b/demo/documentation/components/dynamicInput/enUS/pair.md
@@ -1,23 +1,23 @@
-# Pair
+# Use Preset Pair
```html
-{{ JSON.stringify(test,0,2) }}
+{{ JSON.stringify(value, 0, 2) }}
```
```js
export default {
data () {
return {
- test: [
+ value: [
{
- key: 'key1',
- value: 'value1'
+ key: '',
+ value: ''
}
]
}
diff --git a/demo/documentation/components/dynamicInput/zhCN/basic.md b/demo/documentation/components/dynamicInput/zhCN/basic.md
index d7f835bbf..dfa554ca3 100644
--- a/demo/documentation/components/dynamicInput/zhCN/basic.md
+++ b/demo/documentation/components/dynamicInput/zhCN/basic.md
@@ -1,28 +1,26 @@
-# 基础用法
+# 使用输入预设
+默认状况下，`n-dynamic-input` 的预设是 `input`。
```html
-{{ JSON.stringify(test,0,2) }}
+{{ JSON.stringify(value, 0, 2) }}
```
```js
export default {
data () {
return {
- test: [
+ value: [
+ '',
+ '',
''
]
}
- },
- methods: {
- add (resolve) {
- resolve('')
- }
}
}
```
\ No newline at end of file
diff --git a/demo/documentation/components/dynamicInput/zhCN/custom.md b/demo/documentation/components/dynamicInput/zhCN/custom.md
index b2195ad17..1ba7d00b1 100644
--- a/demo/documentation/components/dynamicInput/zhCN/custom.md
+++ b/demo/documentation/components/dynamicInput/zhCN/custom.md
@@ -1,52 +1,52 @@
-# 自定义
+# 自定义内容
```html
-
-
-
-
-
+
+
-{{ JSON.stringify(test,0,2) }}
+{{ JSON.stringify(customValue, 0, 2) }}
```
```js
export default {
data () {
return {
- test: [
+ customValue: [
{
isCheck: true,
num: 1,
- string: 'Test string'
+ string: 'A String'
}
]
}
},
methods: {
- add (resolve) {
- resolve({
+ onAdd () {
+ return {
isCheck: false,
num: 1,
- string: 'Test string'
- })
+ string: 'A String'
+ }
}
}
}
diff --git a/demo/documentation/components/dynamicInput/zhCN/form.md b/demo/documentation/components/dynamicInput/zhCN/form.md
new file mode 100644
index 000000000..dfa5e2b56
--- /dev/null
+++ b/demo/documentation/components/dynamicInput/zhCN/form.md
@@ -0,0 +1,96 @@
+# 在表单中使用
+`n-dynamic-input` 并不能作为一个单独的表项检验，如果你需要检验 `n-dynamic-input` 里面的内容，可以在自定义内容中传入 `n-form-item` 来完成数据的检验。下面是一个完整的例子。
+```html
+
+
+
+
+
+
+
+
+
+{{ JSON.stringify(model.dynamicInputValue, 0, 2) }}
+
+```
+```js
+export default {
+ data () {
+ return {
+ dynamicInputRule: {
+ trigger: 'input',
+ validator (rule, value) {
+ if (value.length >= 5) return new Error('最多输入四个字符')
+ return true
+ }
+ },
+ model: {
+ dynamicInputValue: [
+ { key: 0, value: '' }
+ ]
+ }
+ }
+ },
+ methods: {
+ onCreate () {
+ return {
+ name: '',
+ value: '',
+ /** 生成 key ，目的是让这个值对应的表项的验证信息不错位 */
+ key: Math.random().toString(16).slice(2, 10)
+ }
+ },
+ /**
+ * 由于清除 input 的内容是个外部行为，input 不会发出事件，所以 form-item 无法得到从
+ * input 发出的事件。于是为了验证结果和显示的值同步，需要手动验证。使用 $nextTick 是因
+ * 为在接受这个事件时，input 的值刚放在事件中发出，还没有落实到实际的值上，需要等下个
+ * tick 才能验证新的结果
+ */
+ handleClear () {
+ this.$nextTick().then(
+ () => this.$refs.form.validate()
+ )
+ }
+ }
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/dynamicInput/zhCN/index.md b/demo/documentation/components/dynamicInput/zhCN/index.md
index 16e2121af..e8f41a17c 100644
--- a/demo/documentation/components/dynamicInput/zhCN/index.md
+++ b/demo/documentation/components/dynamicInput/zhCN/index.md
@@ -1,36 +1,45 @@
-# 自定义增加
+# 动态录入 Dynamic Input
+
+这个组件的名字改过很多次。
+一开始它被造出来是为了输入环境变量。
## 演示
```demo
basic
pair
custom
+form
```
## Props
-### Input Props
+### Dynamic Input Props
|名称|类型|默认值|说明|
|-|-|-|-|
-|value|`Array`||**必需**|
+|preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设，在不设定 `$scopedSlots.default` 的时候生效|
+|value|`Array`|-|**必需**|
+|max|`number`|`null`|最多有几项内容|
+|key-field|`string`|`null`||
+|on-create|`(index: number) => any`|`null`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值以及清空内容时的初始值。其中 `index` 是创建内容将要被放置到的位置，从 0 开始计算|
+
+### Dynamic Input Props(Input Preset)
+|名称|类型|默认值|说明|
+|-|-|-|-|
+|value|`Array
`|-|**必需**|
|placeholder|`string`|`''`||
-|onAdd|`(resolve: (item) => void) => any`|`null`| 点击 '+' 时的回调.将要增加的一条数据传入resolve方法，用来新增一个节点.|
-### Pair Props
+### Dynamic Input Props(Pair Preset)
|名称|类型|默认值|说明|
|-|-|-|-|
-|value|`Array`||**必需**|
-|placeholderKey|`string`|`key`||
-|placeholderValue|`string`|`value`||
-|onAdd|`(resolve: (item) => void) => any`|`null`| 点击 '+' 时的回调.将要增加的一条数据传入resolve方法，用来新增一个节点.|
-
-
-### Custom Props
-|名称|类型|默认值|说明|
-|-|-|-|-|
-|value|`Array`||**必需**|
-|onAdd|`(resolve: (item) => void) => any`|`null`| 点击 '+' 时的回调.将要增加的一条数据传入resolve方法，用来新增一个节点.|
+|value|`Array<{ key: string, value: string }>`|-|**必需**|
+|key-placeholder|`string`|`''`||
+|value-placeholder|`string`|`''`||
+## Slots
+|名称|参数|说明|
+|-|-|-|
+|default|`({ value: any, index: number })`|每一项的渲染方式，其中 `value` 为该项对应的数组值，`index` 为该项对应的数组索引|
## Events
|名称|参数|说明|
|-|-|-|
-|remove|`(index: Number)`| Index 是要移除的数据的索引|
\ No newline at end of file
+|clear|`()`||
+|remove|`(index: Number)`|`index` 是要移除的数据的索引|
\ No newline at end of file
diff --git a/demo/documentation/components/dynamicInput/zhCN/pair.md b/demo/documentation/components/dynamicInput/zhCN/pair.md
index 0b897a136..c0bc7db8c 100644
--- a/demo/documentation/components/dynamicInput/zhCN/pair.md
+++ b/demo/documentation/components/dynamicInput/zhCN/pair.md
@@ -1,23 +1,23 @@
-# 键值对
+# 使用键值对预设
```html
-{{ JSON.stringify(test,0,2) }}
+{{ JSON.stringify(value, 0, 2) }}
```
```js
export default {
data () {
return {
- test: [
+ value: [
{
- key: 'key1',
- value: 'value1'
+ key: '',
+ value: ''
}
]
}
diff --git a/demo/documentation/components/form/enUS/customRule.md b/demo/documentation/components/form/enUS/customRule.md
index c4658f4b8..5c1a1e4b8 100644
--- a/demo/documentation/components/form/enUS/customRule.md
+++ b/demo/documentation/components/form/enUS/customRule.md
@@ -1,12 +1,30 @@
# Custom Rules
-You can custom you valiation by setting custom trigger in rules.
+Sometimes builtin triggers don't meet you demand. You can custom you valiation by setting custom trigger in rules and manually trigger the validation.
```html
-
-
-
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Validate
+
+ Validate
+
@@ -65,19 +66,7 @@ export default {
model: {
age: null,
password: null,
- reenteredPassword: null,
- env: [
- {
- key:'',
- value:''
- }
- ],
- group: [
- {
- inputNumberValue: 1,
- input: null
- }
- ]
+ reenteredPassword: null
},
rules: {
age: [
@@ -96,6 +85,12 @@ export default {
trigger: ['input', 'blur']
}
],
+ password: [
+ {
+ required: true,
+ message: 'Password is required'
+ }
+ ],
reenteredPassword: [
{
required: true,
@@ -112,38 +107,14 @@ export default {
message: 'Password is not same as re-entered password!',
trigger: ['blur', 'password-input']
}
- ],
- env: {
- key: {
- required: true,
- message: 'Please input your key',
- trigger: ['input', 'blur']
- },
- value: {
- required: true,
- message: 'Please input your value',
- trigger: ['input', 'blur']
- }
- },
- group: {
- inputNumberValue: {
- validator: this.validateGroupNumber,
- trigger: ['blur', 'change'],
- message: 'Please input a number which is not zero'
- },
- input: {
- required: true,
- message: 'Please input your key',
- trigger: ['input', 'blur']
- },
- }
+ ]
}
}
},
methods: {
handlePasswordInput () {
if (this.model.reenteredPassword) {
- this.$refs.reenteredPassword.validate('password-input')
+ this.$refs.reenteredPassword.validate({ trigger: 'password-input' })
}
},
handleValidateButtonClick (e) {
@@ -162,9 +133,6 @@ export default {
},
validatePasswordSame (rule, value) {
return value === this.model.password
- },
- validateGroupNumber (rule, value) {
- return value !== 0
}
}
}
diff --git a/demo/documentation/components/form/enUS/index.md b/demo/documentation/components/form/enUS/index.md
index e74e73b7f..98179e27e 100644
--- a/demo/documentation/components/form/enUS/index.md
+++ b/demo/documentation/components/form/enUS/index.md
@@ -36,17 +36,18 @@ async
|Name|Type|Default|Description|
|-|-|-|-|
|label|`string`|`null`||
-|label-width|`number \| string`|`null`|If not set, use label-align from wrapper form.|
+|label-width|`number \| string`|`null`|If not set, use `label-width` from the wrapper form.|
|label-style|`object`|`{}`||
-|label-align|`'left' \| 'right'`|`null`|Text align in label. If not set, use label-align from wrapper form.|
-|label-placement|`'left' \| 'top'`|`null`|If not set, use label-placement from wrapper form.|
+|label-align|`'left' \| 'right'`|`null`|Text align in label. If not set, use `label-align` from wrapper form.|
+|label-placement|`'left' \| 'top'`|`null`|If not set, use `label-placement` from wrapper form.|
|path|`string`|`null`|The path to collect item value to wrapper form's model object.|
|rule-path|`string`|`null`|The path to get rule from wrapper form's rule object. If not set, use path of the form item instead.|
-|required|`boolean`|`false`|Whether to show required mark. Note: a required rule has higher priority than this props & this prop **won't** change the validation process. The validation still depends on the rules.|
-|show-require-mark|`boolean`|`true`|Whether to show require mark when form item is required. If not set, use show-require-mark from wrapper form.|
-|rule|`FormItemRule \| Array`|`null`|The rule to validate the form item. It will be merged with the rules acquired by rule-path from wrapper form's rules. It's recommend to set all rules on wrapper form.|
+|required|`boolean`|`false`|Whether to show required mark. Note: a required rule has higher priority than this prop & this prop **won't** have any effect on validation. The validation still depends on the rules.|
+|show-require-mark|`boolean`|`true`|Whether to show require mark when form item is required. If not set, use `show-require-mark` from wrapper form.|
+|rule|`FormItemRule \| Array`|`null`|The rule to validate the form item. It will be merged with the rules acquired by `rule-path` from wrapper form's rules. It's recommend to set all rules on wrapper form.|
|first|`boolean`|`false`|Whether only to show the first validation error message.|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|ingore-path-change|`boolean`|`false`|Usually, the change of `path` will cause the data source's variation. So naive-ui will clear the validation result. If it is not expected, you can set it to `true`|
### Form Item Row Props
@@ -59,20 +60,19 @@ Accept all props from form-item & [Col](n-row#Col-Props)
Validation will only be executed on form items which have a path
- Validation will use the path to get collected value from form model, then use path or rule-path(if specified) to get validation rules
- Validation will use all rules regardless of the triggers of form items.
+ By default, validation will use all rules regardless of the triggers of the rules.
|Name|Type|Description|
|-|-|-|
-|validate|`(validateCallback?: (errors?: Array) => any) => Promise`|Validate the form.The rejection value type of returned promise is `Array`.|
+|validate|`(validateCallback?: (errors?: Array) => any, shouldRuleBeApplied?: FormItemRule => boolean) => Promise`|Validate the form. The rejection value type of returned promise is `Array`.|
|clearValidationEffect|`() => void`||
### Form Item, Form Item Row, Form Item Col Methods
|Name|Type|Description|
|-|-|-|
-|validate|`(trigger?: string, validateCallback?: (errors?: Array) => any, options?: AsyncValidatorOptions) => Promise`|Validate the form item. The rejection value type of returned promise is `Array`. If trigger is not passed, all rules of the item will be applied.|
+|validate|`({ trigger?: string, callback?: (errors?: Array) => any, shouldRuleBeApplied?: FormItemRule => boolean, options?: AsyncValidatorOptions }) => Promise`|Validate the form item. The rejection value type of returned promise is `Array`. If trigger is not set, all rules of the item will be applied. `shouldRuleBeApplied` can filter rules after they are filtered by the trigger.|
|clearValidationEffect|`() => void`||
About AsyncValidatorOptions, see async-validator.
diff --git a/demo/documentation/components/form/zhCN/customRule.md b/demo/documentation/components/form/zhCN/customRule.md
index 24bd6306c..d07243bbc 100644
--- a/demo/documentation/components/form/zhCN/customRule.md
+++ b/demo/documentation/components/form/zhCN/customRule.md
@@ -1,12 +1,30 @@
# 自定义规则
-你可以通过设定自定的 trigger 来控制验证。
+有时候内置的 trigger 无法满足验证的需要。你可以通过设定自定的 trigger 然后手动触发它来控制验证。
```html
-
-
-
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 验证
+
+ 验证
+
@@ -63,19 +66,7 @@ export default {
model: {
age: null,
password: null,
- reenteredPassword: null,
- env: [
- {
- key:'',
- value:''
- }
- ],
- group: [
- {
- inputNumberValue: 1,
- input: null
- }
- ]
+ reenteredPassword: null
},
rules: {
age: [
@@ -85,7 +76,7 @@ export default {
if (!value) {
return new Error('需要年龄')
} else if (!/^\d*$/.test(value)) {
- return new Error('年龄应该是个整数')
+ return new Error('年龄应该为整数')
} else if (Number(value) < 18) {
return new Error('年龄应该超过十八岁')
}
@@ -94,10 +85,16 @@ export default {
trigger: ['input', 'blur']
}
],
+ password: [
+ {
+ required: true,
+ message: '请输入密码'
+ }
+ ],
reenteredPassword: [
{
required: true,
- message: '需要重复输入密码',
+ message: '请再次输入密码',
trigger: ['input', 'blur']
},
{
@@ -110,26 +107,14 @@ export default {
message: '两次密码输入不一致',
trigger: ['blur', 'password-input']
}
- ],
- group: {
- inputNumberValue: {
- validator: this.validateGroupNumber,
- trigger: ['blur', 'change'],
- message: '请输入不为0的数字'
- },
- input: {
- required: true,
- message: '请输入你的key',
- trigger: ['input', 'blur']
- },
- }
+ ]
}
}
},
methods: {
handlePasswordInput () {
if (this.model.reenteredPassword) {
- this.$refs.reenteredPassword.validate('password-input')
+ this.$refs.reenteredPassword.validate({ trigger: 'password-input' })
}
},
handleValidateButtonClick (e) {
@@ -148,9 +133,6 @@ export default {
},
validatePasswordSame (rule, value) {
return value === this.model.password
- },
- validateGroupNumber (rule, value) {
- return value !== 0
}
}
}
diff --git a/demo/documentation/components/form/zhCN/index.md b/demo/documentation/components/form/zhCN/index.md
index db3e50559..1e7498751 100644
--- a/demo/documentation/components/form/zhCN/index.md
+++ b/demo/documentation/components/form/zhCN/index.md
@@ -37,17 +37,18 @@ validator-debug
|名称|类型|默认值|说明|
|-|-|-|-|
|label|`string`|`null`||
-|label-width|`number \| string`|`null`|如果没有被设定，使用外层表单的 label-align|
+|label-width|`number \| string`|`null`|如果没有被设定，使用外层表单的 `label-width`|
|label-style|`object`|`{}`||
-|label-align|`'left' \| 'right'`|`null`|标签的文本对齐方式。如果没有被设定，使用外层表单的 label-align|
-|label-placement|`'left' \| 'top'`|`null`|如果没有被设定，使用外层表单的 label-placement|
+|label-align|`'left' \| 'right'`|`null`|标签的文本对齐方式。如果没有被设定，使用外层表单的 `label-align`|
+|label-placement|`'left' \| 'top'`|`null`|如果没有被设定，使用外层表单的 `label-placement`|
|path|`string`|`null`|将值收集到外层表单 `model` 对象的路径|
-|rule-path|`string`|`null`|从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替。|
-|required|`boolean`|`false`|是否展示必填的星号。注意：一个 required 的规则比这个属性有更高的优先级 & 这个属性不会影响表单的验证。验证完全依赖于规则。|
-|show-require-mark|`boolean`|`true`|在表项是必填的时候是不是展示星号。如果没有被设定，使用外层表单的 show-require-mark|
+|rule-path|`string`|`null`|从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替|
+|required|`boolean`|`false`|是否展示必填的星号。注意：一个 `required: true` 的规则比这个属性有更高的优先级 & 这个属性不会影响表单的验证。验证完全依赖于规则|
+|show-require-mark|`boolean`|`true`|在表项是必填的时候是不是展示星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark`|
|rule|`FormItemRule \| Array`|`null`|验证表项的规则，它会被通过 `rule-path` 从外层表单获取的规则合并来作为表项的验证规则。推荐还是在外层表单设置所有规则。|
|first|`boolean`|`false`|是否只展示首个出错信息。|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
+|ingore-path-change|`boolean`|`false`|通常 `path` 的改变会导致数据来源的变化，所以 naive-ui 会清空验证信息。如果不期望这个行为，可以将其置为 `true`|
### Form Item Row Props
接受 Form Item & [Row](n-row#Row-Props) 所有的 Props。
@@ -59,20 +60,19 @@ validator-debug
验证只会在有 path 属性的表项上执行
- 验证会使用 path 从 model 获取收集到的值，使用 path 或者 rule-path（如果声明了）去获取验证规则
- 验证将会在合法表项的所有规则上进行，不管规则的 trigger 是什么
+ 默认情况下，验证将会在合法表项的所有规则上进行，不管规则的 trigger 是什么
|名称|类型|说明|
|-|-|-|
-|validate|`(validateCallback?: (errors?: Array) => any) => Promise`|验证表单。Promise rejection 的返回值类型是 `Array`。|
+|validate|`(validateCallback?: (errors?: Array) => any, shouldRuleBeApplied?: FormItemRule => boolean) => Promise`|验证表单。Promise rejection 的返回值类型是 `Array`。|
|clearValidationEffect|`() => void`||
### Form Item, Form Item Row, Form Item Col Methods
|名称|类型|说明|
|-|-|-|
-|validate|`(trigger?: string, validateCallback?: (errors?: Array) => any, options?: AsyncValidatorOptions) => Promise`|验证表项，Promise rejection 的返回值类型是 `Array`。如果不传 trigger，这一个表项全部的 Rules 都会被使用。|
+|validate|`({ trigger?: string, callback?: (errors?: Array) => any, shouldRuleBeApplied?: FormItemRule => boolean, options?: AsyncValidatorOptions }) => Promise`|验证表项，Promise rejection 的返回值类型是 `Array`。如果设定 `trigger`，这一个表项全部的规则都会被使用。`shouldRuleBeApplied` 可以用来进一步过滤已经经过 `trigger` 筛选的规则|
|clearValidationEffect|`() => void`||
关于 AsyncValidatorOptions，参考 async-validator。
diff --git a/demo/documentation/components/gradientText/enUS/index.md b/demo/documentation/components/gradientText/enUS/index.md
index 2024848bf..1f440a7ef 100644
--- a/demo/documentation/components/gradientText/enUS/index.md
+++ b/demo/documentation/components/gradientText/enUS/index.md
@@ -13,6 +13,7 @@ custom
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
+|themed-style|`{ [themeName: string]: object }`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
diff --git a/demo/documentation/components/gradientText/zhCN/index.md b/demo/documentation/components/gradientText/zhCN/index.md
index d0fdfa366..65bae057c 100644
--- a/demo/documentation/components/gradientText/zhCN/index.md
+++ b/demo/documentation/components/gradientText/zhCN/index.md
@@ -12,6 +12,7 @@ custom
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
+|themed-style|`{ [themeName: string]: object }`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
diff --git a/demo/documentation/components/icon/enUS/index.md b/demo/documentation/components/icon/enUS/index.md
index 2f50cd124..39e616f84 100644
--- a/demo/documentation/components/icon/enUS/index.md
+++ b/demo/documentation/components/icon/enUS/index.md
@@ -2,7 +2,7 @@
Naive-UI use Ionicons as its builtin icon library.
-Many thanks to [Ionicons](https://github.com/ionic-team/ionicons) for creating those high quality icons!
+Many thanks to [Ionicons](https://github.com/ionic-team/ionicons) for creating those high quality icons.
## Demos
To view all available icons, see Ionicons V5 & Ionicons V4. Icons' name are the same as Ionicons in naive-ui. See demos to know the way to import icons.
diff --git a/demo/documentation/components/icon/zhCN/index.md b/demo/documentation/components/icon/zhCN/index.md
index 2a7085df9..5ab1c2f08 100644
--- a/demo/documentation/components/icon/zhCN/index.md
+++ b/demo/documentation/components/icon/zhCN/index.md
@@ -1,7 +1,7 @@
# 图标 Icon
Naive-UI 使用 Ionicons 作为内置的 Icon 库。
-感谢 [Ionicons](https://github.com/ionic-team/ionicons) 创造了这么多好看的图标!
+感谢 [Ionicons](https://github.com/ionic-team/ionicons) 创造了这么多好看的图标。
## 演示
全部图标请参考 Ionicons V5 及 Ionicons V4。在 Naive UI 中，图标名称和 Ionicons 维持一致。导入方式请参考演示。
diff --git a/demo/documentation/components/input/enUS/index.md b/demo/documentation/components/input/enUS/index.md
index 41dde8f26..e32a319a7 100644
--- a/demo/documentation/components/input/enUS/index.md
+++ b/demo/documentation/components/input/enUS/index.md
@@ -1,5 +1,7 @@
# Input
Many years ago, people used punched card to input.
+
+`n-input` is a controlled component. If you don't handle with its `input` event, its value will never be changed. (v-model doesn't matter, since it is an abbreviation for controlled data-bindings)
## Demos
```demo
basic
@@ -23,6 +25,7 @@ passively-activated
### Input Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|type|`'text' \| 'password' \| 'textarea'`|`'text'`||
|pair|`boolean`|`false`|Whether to input pairwise value.|
|value|`string \| [string, string]`|`null`|Value of input. When `pair` is `true`, `value` is an array.|
diff --git a/demo/documentation/components/input/zhCN/index.md b/demo/documentation/components/input/zhCN/index.md
index d054dba57..3aa01acd4 100644
--- a/demo/documentation/components/input/zhCN/index.md
+++ b/demo/documentation/components/input/zhCN/index.md
@@ -1,5 +1,7 @@
# 文本输入 Input
很多年前，人们还在用打孔纸卡输入。
+
+`n-input` 是严格受控的组件，如果你不对 `input` 事件做任何响应，那么它的值永远不会改变。（v-model 并不会出问题，因为 v-model 只是受控用法的简写）
## 演示
```demo
basic
@@ -23,6 +25,7 @@ passively-activated
### Input Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|type|`'text' \| 'password' \| 'textarea'`|`'text'`||
|pair|`boolean`|`false`|是否输入成对的值|
|value|`string \| [string, string]`|`null`|文本输入的值。如果是 `pair` 是 `true`，`value` 是一个数组|
diff --git a/demo/documentation/components/inputNumber/enUS/index.md b/demo/documentation/components/inputNumber/enUS/index.md
index 23cf7316e..7bc5e3707 100644
--- a/demo/documentation/components/inputNumber/enUS/index.md
+++ b/demo/documentation/components/inputNumber/enUS/index.md
@@ -18,6 +18,7 @@ validator
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`number`|`null`||
|step|`number`|`1`||
|min|`number`|`null`||
diff --git a/demo/documentation/components/inputNumber/zhCN/index.md b/demo/documentation/components/inputNumber/zhCN/index.md
index ed88c91b4..c8a2fd13d 100644
--- a/demo/documentation/components/inputNumber/zhCN/index.md
+++ b/demo/documentation/components/inputNumber/zhCN/index.md
@@ -18,6 +18,7 @@ validator
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`number`|`null`||
|step|`number`|`1`||
|min|`number`|`null`||
diff --git a/demo/documentation/components/menu/enUS/index.md b/demo/documentation/components/menu/enUS/index.md
index e2c2e73d5..28c3a1089 100644
--- a/demo/documentation/components/menu/enUS/index.md
+++ b/demo/documentation/components/menu/enUS/index.md
@@ -18,6 +18,7 @@ collapse
### Menu Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|collapsed|`boolean`|`false`|The collapsed status of menu, only works when menu is vertical.|
|collapsed-width|`number`|`null`|The menu width after collapsed.|
|icon-size|`number`|`20`|The icon size when menu is not collapsed.|
diff --git a/demo/documentation/components/menu/zhCN/index.md b/demo/documentation/components/menu/zhCN/index.md
index 110b3389a..e153749e0 100644
--- a/demo/documentation/components/menu/zhCN/index.md
+++ b/demo/documentation/components/menu/zhCN/index.md
@@ -18,6 +18,7 @@ collapse
### Menu Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|collapsed|`boolean`|`false`|菜单是否折叠，值在菜单为垂直时有用|
|collapsed-width|`number`|`null`|折叠后菜单的宽度|
|icon-size|`number`|`20`|菜单未折叠时图标的大小|
diff --git a/demo/documentation/components/pagination/enUS/index.md b/demo/documentation/components/pagination/enUS/index.md
index b977da2ac..d1c2d2af6 100644
--- a/demo/documentation/components/pagination/enUS/index.md
+++ b/demo/documentation/components/pagination/enUS/index.md
@@ -17,6 +17,7 @@ disabled
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|page|`number`|`null`||
|page-count|`number`|`null`||
|page-size|`number`|`null`||
diff --git a/demo/documentation/components/pagination/zhCN/index.md b/demo/documentation/components/pagination/zhCN/index.md
index dcaeb5dd0..5ff2e5523 100644
--- a/demo/documentation/components/pagination/zhCN/index.md
+++ b/demo/documentation/components/pagination/zhCN/index.md
@@ -17,6 +17,7 @@ disabled
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|page|`number`|`null`||
|page-count|`number`|`null`||
|page-size|`number`|`null`||
diff --git a/demo/documentation/components/progress/enUS/index.md b/demo/documentation/components/progress/enUS/index.md
index 7c06e9358..ae889d3a1 100644
--- a/demo/documentation/components/progress/enUS/index.md
+++ b/demo/documentation/components/progress/enUS/index.md
@@ -14,6 +14,7 @@ processing
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
diff --git a/demo/documentation/components/progress/zhCN/index.md b/demo/documentation/components/progress/zhCN/index.md
index 8feb77c9a..d27c37d61 100644
--- a/demo/documentation/components/progress/zhCN/index.md
+++ b/demo/documentation/components/progress/zhCN/index.md
@@ -14,6 +14,7 @@ processing
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
diff --git a/demo/documentation/components/result/enUS/index.md b/demo/documentation/components/result/enUS/index.md
index dd65bfa73..42f85134a 100644
--- a/demo/documentation/components/result/enUS/index.md
+++ b/demo/documentation/components/result/enUS/index.md
@@ -1,7 +1,7 @@
# Result
Result is for showing result.
-Many thanks to [twemoji](https://github.com/twitter/twemoji) for creating those high quality icons!
+Many thanks to [twemoji](https://github.com/twitter/twemoji) for creating those high quality icons.
## Demos
```demo
s404
@@ -17,6 +17,7 @@ error
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|status|`'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'`|`'info'`||
|title|`string`|`null`||
|description|`string`|`null`||
diff --git a/demo/documentation/components/result/zhCN/index.md b/demo/documentation/components/result/zhCN/index.md
index f5759b4e2..22e61c5da 100644
--- a/demo/documentation/components/result/zhCN/index.md
+++ b/demo/documentation/components/result/zhCN/index.md
@@ -1,7 +1,7 @@
# 结果页 Result
结果页是展示结果的。
-感谢 [twemoji](https://github.com/twitter/twemoji) 创造了这么多好看的图标!
+感谢 [twemoji](https://github.com/twitter/twemoji) 创造了这么多好看的图标。
## 演示
```demo
s404
@@ -17,6 +17,7 @@ error
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|status|`'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'`|`'info'`||
|title|`string`|`null`||
|description|`string`|`null`||
diff --git a/demo/documentation/components/select/enUS/index.md b/demo/documentation/components/select/enUS/index.md
index dd156b954..bce5ff502 100644
--- a/demo/documentation/components/select/enUS/index.md
+++ b/demo/documentation/components/select/enUS/index.md
@@ -7,6 +7,7 @@ size
multiple
events
filterable
+tag
remote
remote-multiple
clearable
@@ -24,6 +25,7 @@ action
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|loading|`boolean`|`false`||
|clearable|`boolean`|`false`||
|value|`Array \| string \| number`|`false`||
@@ -32,8 +34,11 @@ action
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|options|`Array`|`[]`||
-|remote|`boolean`|`false`|If you want to async get options|
-|filter|`(pattern: string, option: Object) => boolean`|`null`||
+|remote|`boolean`|`false`|If you want to async get options. Note that if remote is set, `filter` & `tag` won't work on `options`. At that time, you are taking all control of `options`.|
+|filterable|`boolean`|`false`|Whether it can filter options.|
+|filter|`(pattern: string, option: Object) => boolean`|A basic string based search method.||
+|tag|`boolean`|`false`|Whether it can create new option, should be used with `filterable`.|
+|create-option|`(label: string) => SelectOption`|`label => ({ label, value: label })`|How to create a option when you input a string to create a option. Note that `filter` will be applied to the option too. And make sure the value of the created option is not the same as any other option.|
## API
### SelectOption Type
diff --git a/demo/documentation/components/select/enUS/tag.md b/demo/documentation/components/select/enUS/tag.md
new file mode 100644
index 000000000..dec01aafa
--- /dev/null
+++ b/demo/documentation/components/select/enUS/tag.md
@@ -0,0 +1,90 @@
+# Create Option Dynamically
+Use `tag` & `filterable` to create option dynamically.
+```html
+
+
+```
+```js
+export default {
+ data () {
+ return {
+ multipleSelectValue: null,
+ selectValue: null,
+ options: [
+ {
+ label: "Everybody's Got Something to Hide Except Me and My Monkey",
+ value: 'song0',
+ disabled: true
+ },
+ {
+ label: 'Drive My Car',
+ value: 'song1'
+ },
+ {
+ label: 'Norwegian Wood',
+ value: 'song2'
+ },
+ {
+ label: 'You Won\'t See',
+ value: 'song3',
+ disabled: true
+ },
+ {
+ label: 'Nowhere Man',
+ value: 'song4'
+ },
+ {
+ label: 'Think For Yourself',
+ value: 'song5'
+ },
+ {
+ label: 'The Word',
+ value: 'song6'
+ },
+ {
+ label: 'Michelle',
+ value: 'song7',
+ disabled: true
+ },
+ {
+ label: 'What goes on',
+ value: 'song8'
+ },
+ {
+ label: 'Girl',
+ value: 'song9'
+ },
+ {
+ label: 'I\'m looking through you',
+ value: 'song10'
+ },
+ {
+ label: 'In My Life',
+ value: 'song11'
+ },
+ {
+ label: 'Wait',
+ value: 'song12'
+ }
+ ]
+ }
+ }
+}
+```
+```css
+.n-select {
+ width: 180px;
+ margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/select/zhCN/index.md b/demo/documentation/components/select/zhCN/index.md
index 14da10de0..e634cfdca 100644
--- a/demo/documentation/components/select/zhCN/index.md
+++ b/demo/documentation/components/select/zhCN/index.md
@@ -7,6 +7,7 @@ size
multiple
events
filterable
+tag
remote
remote-multiple
clearable
@@ -32,8 +33,12 @@ action
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|options|`Array`|`[]`||
-|remote|`boolean`|`false`|是否要异步获取选项|
-|filter|`(pattern: string, option: Object) => boolean`|`null`||
+|remote|`boolean`|`false`|是否要异步获取选项。注意如果设定了，那么 `fitler` 和 `tag` 都不会对 `options` 生效。这个时候你在全权控制 `options`|
+|filterable|`boolean`|`false`|是否可以过滤|
+|filter|`(pattern: string, option: Object) => boolean`|一个简单的字符串搜索算法||
+|tag|`boolean`|`false`|是否可以创建新的选项，需要和 `filterable` 一起使用|
+|create-option|`(label: string) => SelectOption`|`label => ({ label, value: label })`|在输入内容时如何创建一个选项。注意 `filter` 对这个选项同样会生效。同时确保这个选项和其他选项的 `value` 不要有重复|
+
## API
### SelectOption Type
diff --git a/demo/documentation/components/select/zhCN/tag.md b/demo/documentation/components/select/zhCN/tag.md
new file mode 100644
index 000000000..2830b5107
--- /dev/null
+++ b/demo/documentation/components/select/zhCN/tag.md
@@ -0,0 +1,90 @@
+# 动态创建选项
+使用 `tag` & `filterable` 来允许动态创建选项。
+```html
+
+
+```
+```js
+export default {
+ data () {
+ return {
+ multipleSelectValue: null,
+ selectValue: null,
+ options: [
+ {
+ label: "Everybody's Got Something to Hide Except Me and My Monkey",
+ value: 'song0',
+ disabled: true
+ },
+ {
+ label: 'Drive My Car',
+ value: 'song1'
+ },
+ {
+ label: 'Norwegian Wood',
+ value: 'song2'
+ },
+ {
+ label: 'You Won\'t See',
+ value: 'song3',
+ disabled: true
+ },
+ {
+ label: 'Nowhere Man',
+ value: 'song4'
+ },
+ {
+ label: 'Think For Yourself',
+ value: 'song5'
+ },
+ {
+ label: 'The Word',
+ value: 'song6'
+ },
+ {
+ label: 'Michelle',
+ value: 'song7',
+ disabled: true
+ },
+ {
+ label: 'What goes on',
+ value: 'song8'
+ },
+ {
+ label: 'Girl',
+ value: 'song9'
+ },
+ {
+ label: 'I\'m looking through you',
+ value: 'song10'
+ },
+ {
+ label: 'In My Life',
+ value: 'song11'
+ },
+ {
+ label: 'Wait',
+ value: 'song12'
+ }
+ ]
+ }
+ }
+}
+```
+```css
+.n-select {
+ width: 180px;
+ margin: 0 12px 8px 0;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/slider/enUS/index.md b/demo/documentation/components/slider/enUS/index.md
index 63101e601..1e1192e45 100644
--- a/demo/documentation/components/slider/enUS/index.md
+++ b/demo/documentation/components/slider/enUS/index.md
@@ -14,6 +14,7 @@ mark
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|marks|`{ [markValue: number]: string }`|||
|disabled|`boolean`|`false`||
|min|`number`|`0`||
diff --git a/demo/documentation/components/slider/zhCN/index.md b/demo/documentation/components/slider/zhCN/index.md
index 7dc315749..18e1a443e 100644
--- a/demo/documentation/components/slider/zhCN/index.md
+++ b/demo/documentation/components/slider/zhCN/index.md
@@ -15,6 +15,7 @@ mark
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|marks|`{ [markValue: number]: string }`|||
|disabled|`boolean`|`false`||
|min|`number`|`0`||
diff --git a/demo/documentation/components/spin/enUS/index.md b/demo/documentation/components/spin/enUS/index.md
index 6baaf64bb..e5ebc4321 100644
--- a/demo/documentation/components/spin/enUS/index.md
+++ b/demo/documentation/components/spin/enUS/index.md
@@ -8,6 +8,7 @@ wrap
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|spinning|`boolean`|`false`|It spin is active|
|size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
|stroke|`string`|`null`|Color of spin|
diff --git a/demo/documentation/components/spin/zhCN/index.md b/demo/documentation/components/spin/zhCN/index.md
index cdd61fd2b..74aaf9e17 100644
--- a/demo/documentation/components/spin/zhCN/index.md
+++ b/demo/documentation/components/spin/zhCN/index.md
@@ -8,6 +8,7 @@ wrap
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|spinning|`boolean`|`false`|Spin 在填入内容的状态是否激活|
|size|`'small' \| 'in-small' \| 'medium' \| 'in-medium' \| 'large' \| 'in-large'`|`medium`||
|stroke|`string`|`null`|Spin 的颜色|
diff --git a/demo/documentation/components/steps/enUS/index.md b/demo/documentation/components/steps/enUS/index.md
index 25510462a..f94a94f04 100644
--- a/demo/documentation/components/steps/enUS/index.md
+++ b/demo/documentation/components/steps/enUS/index.md
@@ -12,6 +12,7 @@ vertical
### Steps Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|current|`number`|`null`||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|size|`'small' \| 'medium'`|`'medium'`||
diff --git a/demo/documentation/components/steps/zhCN/index.md b/demo/documentation/components/steps/zhCN/index.md
index 4bffb4b24..3568c0733 100644
--- a/demo/documentation/components/steps/zhCN/index.md
+++ b/demo/documentation/components/steps/zhCN/index.md
@@ -12,6 +12,7 @@ vertical
### Steps Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|current|`number`|`null`||
|status|`'process' \| 'finish' \| 'error' \| 'wait'`|`'process'`||
|size|`'small' \| 'medium'`|`'medium'`||
diff --git a/demo/documentation/components/switch/enUS/index.md b/demo/documentation/components/switch/enUS/index.md
index 5ae0bd5c9..49b39c004 100644
--- a/demo/documentation/components/switch/enUS/index.md
+++ b/demo/documentation/components/switch/enUS/index.md
@@ -13,6 +13,7 @@ event
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`boolean`|`false`||
|disabled|`boolean`|`false`||
diff --git a/demo/documentation/components/switch/zhCN/index.md b/demo/documentation/components/switch/zhCN/index.md
index 097876375..52d66d255 100644
--- a/demo/documentation/components/switch/zhCN/index.md
+++ b/demo/documentation/components/switch/zhCN/index.md
@@ -13,6 +13,7 @@ event
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`boolean`|`false`||
|disabled|`boolean`|`false`||
diff --git a/demo/documentation/components/tabs/enUS/index.md b/demo/documentation/components/tabs/enUS/index.md
index 8a605683f..a5a98ce0d 100644
--- a/demo/documentation/components/tabs/enUS/index.md
+++ b/demo/documentation/components/tabs/enUS/index.md
@@ -16,6 +16,7 @@ display-directive
### Tabs Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|active-name|`string \| number`|`null`||
|type|`'line' \| 'card'`|`'line'`||
|closable|`boolean`|`false`||
diff --git a/demo/documentation/components/tabs/zhCN/index.md b/demo/documentation/components/tabs/zhCN/index.md
index daac83d66..ac09b314d 100644
--- a/demo/documentation/components/tabs/zhCN/index.md
+++ b/demo/documentation/components/tabs/zhCN/index.md
@@ -16,6 +16,7 @@ display-directive
### Tabs Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|active-name|`string \| number`|`null`||
|type|`'line' \| 'card'`|`'line'`||
|closable|`boolean`|`false`||
diff --git a/demo/documentation/components/timePicker/enUS/basic.md b/demo/documentation/components/timePicker/enUS/basic.md
index 9d9a97982..cec5fa2d1 100644
--- a/demo/documentation/components/timePicker/enUS/basic.md
+++ b/demo/documentation/components/timePicker/enUS/basic.md
@@ -18,7 +18,7 @@ export default {
},
methods: {
disabledHours (hour) {
- return hour>13 && hour<16
+ return hour > 13 && hour < 16
},
disabledMinutes (minute, selectedHour) {
if(Number(selectedHour) === 17) {
diff --git a/demo/documentation/components/timePicker/enUS/index.md b/demo/documentation/components/timePicker/enUS/index.md
index 79c8d0bdf..ae680c1b7 100644
--- a/demo/documentation/components/timePicker/enUS/index.md
+++ b/demo/documentation/components/timePicker/enUS/index.md
@@ -15,6 +15,7 @@ format
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|placeholder|`string`|`'Select Time'`||
|value|`number`|`null`||
|format|`string`|`'HH:mm:ss'`||
diff --git a/demo/documentation/components/timePicker/zhCN/basic.md b/demo/documentation/components/timePicker/zhCN/basic.md
index 0670a6240..62af0231d 100644
--- a/demo/documentation/components/timePicker/zhCN/basic.md
+++ b/demo/documentation/components/timePicker/zhCN/basic.md
@@ -18,7 +18,7 @@ export default {
},
methods: {
disabledHours (hour) {
- return hour>13 && hour<16
+ return hour > 13 && hour < 16
},
disabledMinutes (minute, selectedHour) {
if(Number(selectedHour) === 17) {
diff --git a/demo/documentation/components/timePicker/zhCN/index.md b/demo/documentation/components/timePicker/zhCN/index.md
index 4e632aa40..f33aaa8ce 100644
--- a/demo/documentation/components/timePicker/zhCN/index.md
+++ b/demo/documentation/components/timePicker/zhCN/index.md
@@ -16,6 +16,7 @@ format
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|placeholder|`string`|`'请选择时间'`||
|value|`number`|`null`||
|format|`string`|`'HH:mm:ss'`||
diff --git a/demo/documentation/components/transfer/enUS/index.md b/demo/documentation/components/transfer/enUS/index.md
index 38f79ba69..132399ef0 100644
--- a/demo/documentation/components/transfer/enUS/index.md
+++ b/demo/documentation/components/transfer/enUS/index.md
@@ -16,6 +16,7 @@ filterable
## Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`Array`|`null`||
|options|`Array`|`[]`||
|disabled|`boolean`|`true`||
@@ -42,10 +43,10 @@ filterable
|change|`(Array)`||
## Notes
-When I heared from my FE fellow he's going to put more than a thousand of items inside the transfer, I was astonished. My poor mind can't come up with a scene that must use a transfer with thousands of items. But I must admit, it's my mind that always not considerate enough.
+When I heared from my colleague he's going to put more than a thousand items into the transfer, I was astonished. My poor imagination can't come up with a scene that must use a transfer with thousands of items. But I must admit, it's my mind that always not considerate enough.
-Months earlier, I have built a interisting animation in transfer but it will cause reflow on many DOM elements. At that time, I hadn't think of people would insert too many data in it. Although I never compromise on style, it's hard to surpass the limit of browser and hardware. It sounds like a kind of philosophy problem to build a car as comfort as a Rolls Royce and as fast as a Ferrari (or Porsche, etc) which is nearly impossible.
+Months earlier, I have built a interesting animation in transfer but it will cause reflow on many DOM elements. At that time, I hadn't think of people would insert so much data in it. Although I never compromise on styles, it's hard to surpass the limit of browser and hardware. It sounds like a kind of philosophy problem to build a car as comfort as a Rolls Royce and as fast as a Ferrari (or Porsche, etc) which is nearly impossible.
-(Don't tell me the Bentley Continental GT, I don't like the car looks.)
+(Don't tell me the Bentley Continental GT, I don't like the car's appearance.)
Style can't be compromised on. However, the problem need to be solved. So finally I add a boost trigger on transfer to deal with large data (by the way turn off the animation).
\ No newline at end of file
diff --git a/demo/documentation/components/transfer/zhCN/index.md b/demo/documentation/components/transfer/zhCN/index.md
index 6e08698c7..7db66cd69 100644
--- a/demo/documentation/components/transfer/zhCN/index.md
+++ b/demo/documentation/components/transfer/zhCN/index.md
@@ -16,6 +16,7 @@ filterable
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|value|`Array`|`null`||
|options|`Array`|`[]`||
|disabled|`boolean`|`true`||
diff --git a/demo/documentation/components/upload/enUS/index.md b/demo/documentation/components/upload/enUS/index.md
index 025290776..652434a17 100644
--- a/demo/documentation/components/upload/enUS/index.md
+++ b/demo/documentation/components/upload/enUS/index.md
@@ -14,6 +14,7 @@ default-files
### Upload Props
|Name|Type|Default|Description|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|name|`string`|`'file'`|The field name of file in form data.|
|accept|`string`|`null`|The accept type of upload. See accept.|
|action|`string`|`null`|The URL to submit data to.|
@@ -30,8 +31,8 @@ default-files
|file-list|`Array`|`undefined`|The file list of component. If set, the component will work in controlled manner.|
|file-list-style|`Object`|`null`|The style of file list area|
|default-file-list|`Array`|`[]`|The default file list in uncontrolled manner.|
-|show-cancel-button|`boolean`|`true`|Whether to show remove button (at file pending, uploadin, error status). Click on cancel button will fire onRemove callback.|
-|show-remove-button|`boolean`|`true`|Whether to show remove button (at file finished status). Click on remove button will fire onRemove callback.|
+|show-cancel-button|`boolean`|`true`|Whether to show remove button (at file pending, uploadin, error status). Click on cancel button will fire `on-remove` callback.|
+|show-remove-button|`boolean`|`true`|Whether to show remove button (at file finished status). Click on remove button will fire `on-remove` callback.|
|disabled|`boolean`|`false`||
### UploadFile Type
diff --git a/demo/documentation/components/upload/zhCN/index.md b/demo/documentation/components/upload/zhCN/index.md
index 108124da3..d37058d52 100644
--- a/demo/documentation/components/upload/zhCN/index.md
+++ b/demo/documentation/components/upload/zhCN/index.md
@@ -13,6 +13,7 @@ default-files
### Upload Props
|名称|类型|默认值|说明|
|-|-|-|-|
+|theme|`'light' \| 'dark'`|`null`||
|name|`string`|`'file'`|文件在提交表单中的字段名|
|accept|`string`|`null`|接受的文件类型，参考 accept|
|action|`string`|`null`|请求提交的地址|
@@ -29,11 +30,10 @@ default-files
|file-list|`Array`|`undefined`|文件列表，如果传入组件会处于受控状态|
|file-list-style|`Object`|`null`|文件列表区域的样式|
|default-file-list|`Array`|`[]`|非受控状态下默认的文件列表|
-|show-cancel-button|`boolean`|`true`|是否显示取消按钮（在 pending、uploading、error 的时候展示），点击取消按钮会触发 onRemove 回调|
-|show-remove-button|`boolean`|`true`|是否显示删除按钮（在 finished 的时候展示），点击删除按钮会触发 onRemove 回调|
+|show-cancel-button|`boolean`|`true`|是否显示取消按钮（在 pending、uploading、error 的时候展示），点击取消按钮会触发 `on-remove` 回调|
+|show-remove-button|`boolean`|`true`|是否显示删除按钮（在 finished 的时候展示），点击删除按钮会触发 `on-remove` 回调|
|disabled|`boolean`|`false`||
-
### UploadFile Type
|属性|类型|说明|
|-|-|-|
diff --git a/demo/entry.vue b/demo/entry.vue
index 8cca2b02c..cc2b6e94c 100644
--- a/demo/entry.vue
+++ b/demo/entry.vue
@@ -107,6 +107,7 @@ function changeThemeInPath (path, theme) {