feat(dynamic-input): item-style, update demo

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

@@ -4,14 +4,9 @@
 
 ```html
 <n-form :model="model" ref="form">
-  <!--
-    The key-field is set to make sure that each item can stay in the correct
-    place. If not set, it may cause the item verification information disappearance
-    or misplacement.
-  -->
   <n-dynamic-input
+    item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
-    key-field="key"
     :on-create="onCreate"
   >
     <template #="{ index, value }">
@@ -80,9 +75,7 @@ export default {
     onCreate () {
       return {
         name: '',
-        value: '',
-        /** Generate a key to make the verification information will not be misplaced */
-        key: Math.random().toString(16).slice(2, 10)
+        value: ''
       }
     }
   }

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

@@ -22,6 +22,7 @@ form
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | default-value | `Array<any>` | `[]` |  |
+| item-style | `string \| Object` | `undefined` |  |
 | key-field | `string` | `undefined` |  |
 | min | `number` | `0` | Min number of items. |
 | max | `number` | `undefined` | Max number of items. |

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

@@ -4,13 +4,9 @@
 
 ```html
 <n-form :model="model" ref="form">
-  <!--
-    设定 key-field 是为了每一项都能稳定的待在原地。如果不做设定可能会导致在增加删除项目时，表
-    项的验证信息消失或错位
-  -->
   <n-dynamic-input
+    item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
-    key-field="key"
     :on-create="onCreate"
   >
     <template #="{ index, value }">
@@ -77,9 +73,7 @@ export default {
     onCreate () {
       return {
         name: '',
-        value: '',
-        /** 生成 key ，目的是让这个值对应的表项的验证信息不错位 */
-        key: Math.random().toString(16).slice(2, 10)
+        value: ''
       }
     }
   }

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

@@ -22,6 +22,7 @@ form
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
 | default-value | `Array<any>` | `[]` |  |
+| item-style | `string \| Object` | `undefined` |  |
 | key-field | `string` | `undefined` |  |
 | min | `number` | `0` | 最少有几项内容 |
 | max | `number` | `undefined` | 最多有几项内容 |

src/dynamic-input/src/DynamicInput.tsx

@@ -55,6 +55,7 @@ export default defineComponent({
       default: 'input'
     },
     keyField: String,
+    itemStyle: [String, Object] as PropType<string | CSSProperties>,
     // for preset pair
     keyPlaceholder: {
       type: String,
@@ -246,6 +247,7 @@ export default defineComponent({
       keyField,
       $slots,
       preset,
+      itemStyle,
       NFormItem,
       ensureKey,
       handleValueChange,
@@ -276,6 +278,7 @@ export default defineComponent({
               key={keyField ? _[keyField] : ensureKey(_, index)}
               data-key={keyField ? _[keyField] : ensureKey(_, index)}
               class="n-dynamic-input-item"
+              style={itemStyle}
             >
               {$slots.default ? (
                 renderSlot($slots, 'default', {

src/form/src/FormItem.tsx

@@ -45,7 +45,7 @@ import {
 
 export const formItemProps = {
   ...(useTheme.props as ThemeProps<FormTheme>),
-  label: String as PropType<string | false>,
+  label: [String, Boolean] as PropType<string | false>,
   labelWidth: [Number, String] as PropType<string | number>,
   labelStyle: [String, Object] as PropType<CSSProperties | string>,
   labelAlign: String as PropType<LabelAlign>,

vue3.md

@@ -140,8 +140,9 @@
   - deprecate
     - `on-input` => `on-update:value`
   - new
-    - `min`
-    - `default-value`
+    - `item-style` prop
+    - `min` prop
+    - `default-value` prop
 - [x] dynamic-tags
   - break
     - `v-model` => `v-model:value`