docs(dynamic-input): add dynamic-input docs (#469)

src/dynamic-input/demos/enUS/basic.demo.md

@@ -15,11 +15,13 @@ By default, the preset of `n-dynamic-input` is `input`.
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: ['', '', '']
+      value: ref(['', '', ''])
     }
   }
-}
+})
 ```

src/dynamic-input/demos/enUS/custom.demo.md

@@ -23,33 +23,26 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      customValue: [
+      customValue: ref([
         {
           isCheck: true,
           num: 1,
           string: 'A String'
         }
-      ]
-    }
-  },
-  methods: {
-    onCreate () {
-      return {
-        isCheck: false,
-        num: 1,
-        string: 'A String'
-      }
-    },
-    onClear () {
-      return {
-        isCheck: false,
-        num: 0,
-        string: ''
+      ]),
+      onCreate () {
+        return {
+          isCheck: false,
+          num: 1,
+          string: 'A String'
+        }
       }
     }
   }
-}
+})
 ```

src/dynamic-input/demos/enUS/form.demo.md

@@ -3,7 +3,7 @@
 `n-dynamic-input` itself cannot be verified. If you need to verify the input of `n-dynamic-input`, you can pass `n-form-item` in the custom content to complete the verification. Here is a complete example.
 
 ```html
-<n-form :model="model" ref="form">
+<n-form :model="model">
   <n-dynamic-input
     item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
@@ -55,8 +55,10 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
       dynamicInputRule: {
         trigger: 'input',
@@ -65,18 +67,16 @@ export default {
           return true
         }
       },
-      model: {
+      model: ref({
         dynamicInputValue: [{ value: '', name: '' }]
-      }
-    }
-  },
-  methods: {
-    onCreate () {
-      return {
-        name: '',
-        value: ''
+      }),
+      onCreate () {
+        return {
+          name: '',
+          value: ''
+        }
       }
     }
   }
-}
+})
 ```

src/dynamic-input/demos/enUS/index.demo-entry.md

@@ -21,30 +21,31 @@ form
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| default-value | `Array<any>` | `[]` |  |
-| item-style | `string \| Object` | `undefined` |  |
-| key-field | `string` | `undefined` |  |
+| default-value | `Array<any>` | `[]` | Default value in uncontrolled mode. |
+| item-style | `string \| Object` | `undefined` | The style of each item in dynamic input. |
+| key-field | `string` | `undefined` | The key of each item will be used in the rendering of the list. |
 | min | `number` | `0` | Min number of items. |
 | max | `number` | `undefined` | Max number of items. |
 | preset | `'input' \| 'preset'` | `'input'` | The preset of `n-dynamic-input`, it work when `$slots.default` is not set. |
-| value | `Array<any>` | `undefined` |  |
+| value | `Array<any>` | `undefined` | Value in controlled mode. |
 | on-create | `(index: number) => void` | `undefined` | The callback when click at the add button. If set, the return value will be used as the initial value of the new item. `index` is the the new item's corresponding index in the value array, which starts from 1 (the second item). |
-| on-remove | `(index: number) => void` | `undefined` |  |
+| on-remove | `(index: number) => void` | `undefined` | Click the index item button of remove triggered callback. |
+| on-update:value | `(value: any) => void` | `undefined` | Callback when the component's value changes. |
 
 ### Dynamic Input Props (Input Preset)
 
-| Name        | Type            | Default  | Description |
-| ----------- | --------------- | -------- | ----------- |
-| value       | `Array<string>` | required |             |
-| placeholder | `string`        | `''`     |             |
+| Name        | Type            | Default  | Description                 |
+| ----------- | --------------- | -------- | --------------------------- |
+| value       | `Array<string>` | required | Value in Input preset mode. |
+| placeholder | `string`        | `''`     | Placeholder for each item.  |
 
 ### Dynamic Input Props (Pair Preset)
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| value | `Array<{ key: string, value: string }>` | required |  |
-| key-placeholder | `string` | `''` |  |
-| value-placeholder | `string` | `''` |  |
+| value | `Array<{ key: string, value: string }>` | required | Value in Input pair mode. |
+| key-placeholder | `string` | `''` | The placeholder of each item's key. |
+| value-placeholder | `string` | `''` | The placeholder of each item's value. |
 
 ## Slots
 

src/dynamic-input/demos/enUS/pair.demo.md

@@ -13,16 +13,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: [
+      value: ref([
         {
           key: '',
           value: ''
         }
-      ]
+      ])
     }
   }
-}
+})
 ```

src/dynamic-input/demos/zhCN/basic.demo.md

@@ -10,11 +10,13 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: ['', '', '']
+      value: ref(['', '', ''])
     }
   }
-}
+})
 ```

src/dynamic-input/demos/zhCN/custom.demo.md

@@ -23,26 +23,26 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      customValue: [
+      customValue: ref([
         {
           isCheck: true,
           num: 1,
           string: '一个字符串'
         }
-      ]
-    }
-  },
-  methods: {
-    onCreate () {
-      return {
-        isCheck: false,
-        num: 1,
-        string: '一个字符串'
+      ]),
+      onCreate () {
+        return {
+          isCheck: false,
+          num: 1,
+          string: '一个字符串'
+        }
       }
     }
   }
-}
+})
 ```

src/dynamic-input/demos/zhCN/form.demo.md

@@ -3,7 +3,7 @@
 `n-dynamic-input` 并不能作为一个单独的表项检验，如果你需要检验 `n-dynamic-input` 里面的内容，可以在自定义内容中传入 `n-form-item` 来完成数据的检验。下面是一个完整的例子。
 
 ```html
-<n-form :model="model" ref="form">
+<n-form :model="model">
   <n-dynamic-input
     item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
@@ -53,8 +53,10 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
       dynamicInputRule: {
         trigger: 'input',
@@ -63,18 +65,16 @@ export default {
           return true
         }
       },
-      model: {
+      model: ref({
         dynamicInputValue: [{ value: '', name: '' }]
-      }
-    }
-  },
-  methods: {
-    onCreate () {
-      return {
-        name: '',
-        value: ''
+      }),
+      onCreate () {
+        return {
+          name: '',
+          value: ''
+        }
       }
     }
   }
-}
+})
 ```

src/dynamic-input/demos/zhCN/index.demo-entry.md

@@ -21,31 +21,31 @@ form
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| default-value | `Array<any>` | `[]` |  |
-| item-style | `string \| Object` | `undefined` |  |
-| key-field | `string` | `undefined` |  |
+| default-value | `Array<any>` | `[]` | 非受控模式下的默认值 |
+| item-style | `string \| Object` | `undefined` | 动态录入中每项的样式 |
+| key-field | `string` | `undefined` | 每一项的 key 值，会被用于列表渲染中 |
 | min | `number` | `0` | 最少有几项内容 |
 | max | `number` | `undefined` | 最多有几项内容 |
 | preset | `'input' \| 'preset'` | `'input'` | 动态录入使用的预设，在不设定 `$slots.default` 的时候生效。 |
-| value | `Array<any>` | `undefined` |  |
-| on-create | `(index: number) => void` | `undefined` | 点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算。 |
-| on-remove | `(index: number) => void` | `undefined` |  |
-| on-update:value | `(value: any) => void` | `undefined` |  |
+| value | `Array<any>` | `undefined` | 受控模式下的值 |
+| on-create | `(index: number) => void` | `undefined` | 点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算 |
+| on-remove | `(index: number) => void` | `undefined` | 点击第 index 项删除按钮的回调 |
+| on-update:value | `(value: any) => void` | `undefined` | 组件值发生变化的回调 |
 
 ### Dynamic Input Props(Input Preset)
 
-| 名称        | 类型            | 默认值   | 说明 |
-| ----------- | --------------- | -------- | ---- |
-| value       | `Array<string>` | required |      |
-| placeholder | `string`        | `''`     |      |
+| 名称        | 类型            | 默认值   | 说明                 |
+| ----------- | --------------- | -------- | -------------------- |
+| value       | `Array<string>` | required | Input 预设模式下的值 |
+| placeholder | `string`        | `''`     | 每项的提示信息       |
 
 ### Dynamic Input Props(Pair Preset)
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| value | `Array<{ key: string, value: string }>` | required |  |
-| key-placeholder | `string` | `''` |  |
-| value-placeholder | `string` | `''` |  |
+| value | `Array<{ key: string, value: string }>` | required | Pair 预设模式下的值 |
+| key-placeholder | `string` | `''` | 每项的 `key` 的提示信息 |
+| value-placeholder | `string` | `''` | 每项的 `value` 的提示信息 |
 
 ## Slots
 

src/dynamic-input/demos/zhCN/pair.demo.md

@@ -13,16 +13,18 @@
 ```
 
 ```js
-export default {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
     return {
-      value: [
+      value: ref([
         {
           key: '',
           value: ''
         }
-      ]
+      ])
     }
   }
-}
+})
 ```