feat(form-item): add feedback slot, closes #1142

tusen-ai · Jan 8, 2022 · 6874497 · 6874497
1 parent 3b894a3
commit 6874497
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 12 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -39,6 +39,7 @@
 - `n-image` adds more theme variables, closes [#1531](https://github.com/TuSimple/naive-ui/issues/1531).
 - `n-upload` adds `image-group-props` prop.
 - `n-progress` adds `offset-degree` prop, closes [#2010](https://github.com/TuSimple/naive-ui/issues/2010).
+- `n-form-item` adds `feedback` slot, closes [#1142](https://github.com/TuSimple/naive-ui/issues/1142).
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -39,6 +39,7 @@
 - `n-image` 新增更多主题变量，关闭 [#1531](https://github.com/TuSimple/naive-ui/issues/1531)
 - `n-upload` 新增 `image-group-props` 属性
 - `n-progress` 新增 `offset-degree` 属性，关闭 [#2010](https://github.com/TuSimple/naive-ui/issues/2010)
+- `n-form-item` 新增 `feedback` slot，关闭 [#1142](https://github.com/TuSimple/naive-ui/issues/1142)
 
 ## 2.23.2 (2021-12-29)
 

diff --git a/src/form/demos/enUS/custom-validation.demo.md b/src/form/demos/enUS/custom-validation.demo.md
@@ -14,9 +14,9 @@ If you need to customize the timing and effect of a validation, use `validation-
   <n-form-item
     label="Airports"
     :validation-status="inputNumberValidationStatus"
-    :feedback="inputNumberFeedback"
   >
     <n-input-number v-model:value="inputNumberValue" />
+    <template #feedback>{{ inputNumberFeedback }}</template>
   </n-form-item>
   <n-form-item
     label="Airports"

diff --git a/src/form/demos/enUS/index.demo-entry.md b/src/form/demos/enUS/index.demo-entry.md
@@ -103,10 +103,11 @@ To find out more about AsyncValidatorOptions, see <n-a href="https://github.com/
 
 | Name    | Parameters | Description |
 | ------- | ---------- | ----------- |
-| default | `()`       | Content     |
+| default | `()`       | Content.    |
 
 ### FormItem, FormItemGi Slots
 
-| Name  | Parameters | Description   |
-| ----- | ---------- | ------------- |
-| label | `()`       | Label content |
+| Name     | Parameters | Description    | Version      |
+| -------- | ---------- | -------------- | ------------ |
+| feedback | `()`       | Feedback.      | NEXT_VERSION |
+| label    | `()`       | Label content. |              |
diff --git a/src/form/demos/zhCN/custom-validation.demo.md b/src/form/demos/zhCN/custom-validation.demo.md
@@ -14,9 +14,9 @@
   <n-form-item
     label="飞机场的"
     :validation-status="inputNumberValidationStatus"
-    :feedback="inputNumberFeedback"
   >
     <n-input-number v-model:value="inputNumberValue" />
+    <template #feedback>{{ inputNumberFeedback }}</template>
   </n-form-item>
   <n-form-item
     label="飞机场的"

diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md
@@ -108,6 +108,7 @@ partially-apply-rules
 
 ### FormItem, FormItemGi Slots
 
-| 名称  | 参数 | 说明     |
-| ----- | ---- | -------- |
-| label | `()` | 标签内容 |
+| 名称     | 参数 | 说明           | 版本         |
+| -------- | ---- | -------------- | ------------ |
+| feedback | `()` | 表项的反馈信息 | NEXT_VERSION |
+| label    | `()` | 标签内容       |              |
diff --git a/src/form/src/Feedbacks.tsx b/src/form/src/Feedbacks.tsx
@@ -11,7 +11,10 @@ export default defineComponent({
     feedback: String
   },
   render () {
-    const { feedback, clsPrefix } = this
+    const { $slots, feedback, clsPrefix } = this
+    if ($slots.default) {
+      return $slots.default()
+    }
     return feedback ? (
       <div key={feedback} class={`${clsPrefix}-form-item-feedback__line`}>
         {feedback}

diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
@@ -472,10 +472,12 @@ export default defineComponent({
                       clsPrefix={mergedClsPrefix}
                       explains={this.explains}
                       feedback={this.feedback}
-                    />
+                    >
+                      {{ default: $slots.feedback }}
+                    </Feedbacks>
                   )
                   const { hasFeedback, mergedValidationStatus } = this
-                  return hasFeedback ? (
+                  return hasFeedback || $slots.feedback ? (
                     mergedValidationStatus === 'warning' ? (
                       <div
                         key="controlled-warning"