feat(form-item): add content-class、content-style props (#7199)

Co-authored-by: 07akioni <[email protected]>

Author: Zheng-Changfu

CHANGELOG.en-US.md

@@ -36,6 +36,7 @@
 - Add `n-image-preview` component.
 - `n-image-group` can be used without `n-image`.
 - `n-input-otp` adds `focusOnChar` util method, closes [#7073](https://github.com/tusen-ai/naive-ui/issues/7073).
+- `n-form-item` adds `content-class`、`content-style` props.
 - `n-message` adds `border` theme variable, closes [#7105](https://github.com/tusen-ai/naive-ui/issues/7105).
 - `n-modal` adds `mask-visible` prop.
 - `useModal` add `render` function, closes [#5857](https://github.com/tusen-ai/naive-ui/issues/5857).

CHANGELOG.zh-CN.md

@@ -37,6 +37,7 @@
 - 新增 `n-image-preview` 组件
 - `n-image-group` 可以脱离 `n-image` 使用
 - `n-input-otp` 增加 `focusOnChar` 方法，关闭 [#7073](https://github.com/tusen-ai/naive-ui/issues/7073)
+- `n-form-item` 新增 `content-class`、`content-style` 属性
 - `n-message` 增加 `border` 主题变量，关闭 [#7105](https://github.com/tusen-ai/naive-ui/issues/7105)
 - `n-modal` 增加 `mask-visible` 属性
 - `useModal` 新增 `render` 函数，关闭 [#5857](https://github.com/tusen-ai/naive-ui/issues/5857)

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

@@ -78,6 +78,8 @@ feedback-style.vue
 | feedback | `string` | `undefined` | The feedback message of the form item. If set, it will replace any result of rule-based validation. |  |
 | feedback-class | `string` | `undefined` | Feedback check vertical display positioning | 2.38.2 |
 | feedback-style | `string \| object` | `undefined` | Feedback check horizontal display positioning | 2.38.2 |
+| content-class | `string` | `undefined` | The class name of the content | NEXT_VERSION |
+| content-style | `string \| object` | `undefined` | The style of the content | NEXT_VERSION |
 | first | `boolean` | `false` | Whether to only show the first validation error message. |  |
 | ignore-path-change | `boolean` | `false` | Usually, changing `path` will cause a re-render and naive-ui will clear the validation result. Setting `ignore-path-change` to `true` will disable that behavior. |  |
 | label | `string` | `undefined` | Label. |  |

src/form/demos/zhCN/index.demo-entry.md

@@ -72,6 +72,8 @@ feedback-style.vue
 | feedback | `string` | `undefined` | 表项的反馈信息。不设为 `undefined` 时，会覆盖规则验证的结果 |  |
 | feedback-class | `string` | `undefined` | 反馈校验竖向展示定位 | 2.38.2 |
 | feedback-style | `string \| object` | `undefined` | 反馈校验横向展示定位 | 2.38.2 |
+| content-class | `string` | `undefined` | 内容的类名 | NEXT_VERSION |
+| content-style | `string \| object` | `undefined` | 内容的样式 | NEXT_VERSION |
 | first | `boolean` | `false` | 是否只展示首个出错信息 |  |
 | ignore-path-change | `boolean` | `false` | 通常 `path` 的改变会导致数据来源的变化，所以 naive-ui 会清空验证信息。如果不期望这个行为，可以将其置为 `true` |  |
 | label | `string` | `undefined` | 标签信息 |  |

src/form/src/FormItem.tsx

@@ -85,7 +85,9 @@ export const formItemProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  labelProps: Object as PropType<LabelHTMLAttributes>
+  labelProps: Object as PropType<LabelHTMLAttributes>,
+  contentClass: String,
+  contentStyle: [String, Object] as PropType<string | CSSProperties>
 } as const
 
 export type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>
@@ -610,9 +612,11 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-form-item-blank`,
+            this.contentClass,
             this.mergedValidationStatus
             && `${mergedClsPrefix}-form-item-blank--${this.mergedValidationStatus}`
           ]}
+          style={this.contentStyle}
         >
           {$slots}
         </div>