refactor:input (#6237)

* refactor:input

* fix inheritAttrs:false

* fix attrs.class

Author: shifeng1993

components/input/ClearableLabeledInput.tsx

@@ -39,6 +39,7 @@ export default defineComponent({
     triggerFocus: { type: Function as PropType<() => void> },
     hidden: Boolean,
     status: String as PropType<InputStatus>,
+    hashId: String,
   },
   setup(props, { slots, attrs }) {
     const statusContext = FormItemInputContext.useInject();
@@ -73,6 +74,7 @@ export default defineComponent({
         status: customStatus,
         addonAfter = slots.addonAfter,
         addonBefore = slots.addonBefore,
+        hashId,
       } = props;
 
       const { status: contextStatus, hasFeedback } = statusContext;
@@ -96,6 +98,7 @@ export default defineComponent({
           // className will go to addon wrapper
           [`${attrs.class}`]: !hasAddon({ addonAfter, addonBefore }) && attrs.class,
         },
+        hashId,
       );
       return (
         <span class={affixWrapperCls} style={attrs.style as CSSProperties} hidden={hidden}>

components/input/Group.tsx

@@ -4,10 +4,15 @@ import type { SizeType } from '../config-provider';
 import { FormItemInputContext } from '../form/FormItemContext';
 import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import classNames from '../_util/classNames';
+
+// CSSINJS
+import useStyle from './style';
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AInputGroup',
+  inheritAttrs: false,
   props: {
     prefixCls: String,
     size: { type: String as PropType<SizeType> },
@@ -17,33 +22,40 @@ export default defineComponent({
     onFocus: { type: Function as PropType<FocusEventHandler> },
     onBlur: { type: Function as PropType<FocusEventHandler> },
   },
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('input-group', props);
     const formItemInputContext = FormItemInputContext.useInject();
     FormItemInputContext.useProvide(formItemInputContext, {
       isFormItemInput: false,
     });
+
+    // style
+    const { prefixCls: inputPrefixCls } = useConfigInject('input', props);
+    const [wrapSSR, hashId] = useStyle(inputPrefixCls);
+
     const cls = computed(() => {
       const pre = prefixCls.value;
       return {
         [`${pre}`]: true,
+        [hashId.value]: true,
         [`${pre}-lg`]: props.size === 'large',
         [`${pre}-sm`]: props.size === 'small',
         [`${pre}-compact`]: props.compact,
         [`${pre}-rtl`]: direction.value === 'rtl',
       };
     });
     return () => {
-      return (
+      return wrapSSR(
         <span
-          class={cls.value}
+          {...attrs}
+          class={classNames(cls.value, attrs.class)}
           onMouseenter={props.onMouseenter}
           onMouseleave={props.onMouseleave}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
         >
           {slots.default?.()}
-        </span>
+        </span>,
       );
     };
   },

components/input/Input.tsx

@@ -14,6 +14,9 @@ import inputProps from './inputProps';
 import omit from '../_util/omit';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 
+// CSSINJS
+import useStyle from './style';
+
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AInput',
@@ -26,6 +29,9 @@ export default defineComponent({
     const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
     const { direction, prefixCls, size, autocomplete } = useConfigInject('input', props);
 
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const focus = (option?: InputFocusOptions) => {
       inputRef.value?.focus(option);
     };
@@ -117,7 +123,7 @@ export default defineComponent({
       const prefixClsValue = prefixCls.value;
       const inputHasPrefixSuffix = hasPrefixSuffix({ prefix, suffix }) || !!hasFeedback;
       const clearIcon = slots.clearIcon || (() => <CloseCircleFilled />);
-      return (
+      return wrapSSR(
         <VcInput
           {...attrs}
           {...omit(rest, ['onUpdate:value', 'onChange', 'onInput'])}
@@ -140,6 +146,7 @@ export default defineComponent({
               [`${prefixClsValue}-borderless`]: !bordered,
             },
             !inputHasPrefixSuffix && getStatusClassNames(prefixClsValue, mergedStatus.value),
+            hashId.value,
           )}
           affixWrapperClassName={classNames(
             {
@@ -149,20 +156,25 @@ export default defineComponent({
               [`${prefixClsValue}-affix-wrapper-borderless`]: !bordered,
             },
             getStatusClassNames(`${prefixClsValue}-affix-wrapper`, mergedStatus.value, hasFeedback),
+            hashId.value,
+          )}
+          wrapperClassName={classNames(
+            {
+              [`${prefixClsValue}-group-rtl`]: direction.value === 'rtl',
+            },
+            hashId.value,
           )}
-          wrapperClassName={classNames({
-            [`${prefixClsValue}-group-rtl`]: direction.value === 'rtl',
-          })}
           groupClassName={classNames(
             {
               [`${prefixClsValue}-group-wrapper-sm`]: size.value === 'small',
               [`${prefixClsValue}-group-wrapper-lg`]: size.value === 'large',
               [`${prefixClsValue}-group-wrapper-rtl`]: direction.value === 'rtl',
             },
             getStatusClassNames(`${prefixClsValue}-group-wrapper`, mergedStatus.value, hasFeedback),
+            hashId.value,
           )}
           v-slots={{ ...slots, clearIcon }}
-        ></VcInput>
+        ></VcInput>,
       );
     };
   },

components/input/TextArea.tsx

@@ -21,6 +21,9 @@ import omit from '../_util/omit';
 import type { VueNode } from '../_util/type';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 
+// CSSINJS
+import useStyle from './style';
+
 function fixEmojiLength(value: string, maxLength: number) {
   return [...(value || '')].slice(0, maxLength).join('');
 }
@@ -58,6 +61,10 @@ export default defineComponent({
     const resizableTextArea = ref();
     const mergedValue = ref('');
     const { prefixCls, size, direction } = useConfigInject('input', props);
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const showCount = computed(() => {
       return (props.showCount as any) === '' || props.showCount || false;
     });
@@ -198,6 +205,7 @@ export default defineComponent({
             [`${prefixCls.value}-lg`]: size.value === 'large',
           },
           getStatusClassNames(prefixCls.value, mergedStatus.value),
+          hashId.value,
         ],
         showCount: null,
         prefixCls: prefixCls.value,
@@ -252,6 +260,7 @@ export default defineComponent({
         direction: direction.value,
         bordered,
         style: showCount.value ? undefined : style,
+        hashId: hashId.value,
       };
 
       let textareaNode = (
@@ -283,6 +292,7 @@ export default defineComponent({
               },
               `${prefixCls.value}-textarea-show-count`,
               customClass,
+              hashId.value,
             )}
             style={style as CSSProperties}
             data-count={typeof dataCount !== 'object' ? dataCount : undefined}
@@ -296,7 +306,7 @@ export default defineComponent({
           </div>
         );
       }
-      return textareaNode;
+      return wrapSSR(textareaNode);
     };
   },
 });