feat(form): add status and tips rendering in form-item component (

#3490)

* feat(form):  add `status` function

* feat(form): add tips rendering in form-item component

src/form/form-item.tsx

@@ -131,6 +131,7 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
           ? [this.commonStatusClassName.success, `${this.componentName}--success-border`].join(' ')
           : this.commonStatusClassName.success;
       }
+      if (this.status) return this.statusClass;
       const list = this.errorList;
       if (!list.length) return;
       const type = list[0].type || 'error';
@@ -184,6 +185,11 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
     errorMessages(): FormErrorMessage {
       return this.form.errorMessage ?? this.global.errorMessage;
     },
+    statusClass(): string {
+      return `${this.classPrefix}-is-${this.$props.status || 'default'} ${
+        this.$props.status === 'success' ? `${this.componentName}--success-border` : ''
+      }`;
+    },
   },
 
   created() {
@@ -476,6 +482,8 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
 
   render(): VNode {
     const helpNode = renderTNodeJSX(this, 'help');
+    const tipsNode = renderTNodeJSX(this, 'tips');
+
     return (
       <div class={this.classes}>
         {this.getLabel()}
@@ -485,6 +493,9 @@ export default mixins(getConfigReceiverMixins<FormItemConstructor, FormConfig>('
             {this.getSuffixIcon()}
           </div>
           {helpNode && <div class={`${this.classPrefix}-input__help`}>{helpNode}</div>}
+          {tipsNode && (
+            <div class={[`${this.componentName}-tips`, `${this.classPrefix}-tips`, this.statusClass]}>{tipsNode}</div>
+          )}
           {this.extraNode}
         </div>
       </div>

src/form/form.en-US.md

@@ -60,7 +60,7 @@ name | String | - | \- | N
 requiredMark | Boolean | undefined | \- | N
 rules | Array | - | Typescript：`Array<FormRule>` | N
 showErrorMessage | Boolean | undefined | \- | N
-status | String | - | Typescript：`'error' \| 'warning' \| 'success' \| 'validating'` | N
+status | String | - | Typescript：`'error' \| 'warning' \| 'success' | N
 statusIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 successBorder | Boolean | false | \- | N
 tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

src/form/form.md

@@ -62,7 +62,7 @@ name | String | - | 表单字段名称 | N
 requiredMark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
 rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule>` | N
 showErrorMessage | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
-status | String | - | 校验状态，可在需要完全自主控制校验状态时使用。TS 类型：`'error' \| 'warning' \| 'success' \| 'validating'` | N
+status | String | - | 校验状态，可在需要完全自主控制校验状态时使用。TS 类型：`'error' \| 'warning' \| 'success' | N
 statusIcon | Boolean / Slot / Function | undefined | 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 successBorder | Boolean | false | 是否显示校验成功的边框，默认不显示 | N
 tips | String / Slot / Function | - | 自定义提示内容，样式跟随 `status` 变动，可在需要完全自主控制校验规则时使用。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

src/form/type.ts

@@ -172,7 +172,7 @@ export interface TdFormItemProps {
    * 校验状态，可在需要完全自主控制校验状态时使用
    * @default ''
    */
-  status?: 'error' | 'warning' | 'success' | 'validating';
+  status?: 'error' | 'warning' | 'success';
   /**
    * 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon
    */