perf: space compact

components/input/Input.tsx

@@ -13,6 +13,7 @@ import VcInput from '../vc-input/Input';
 import inputProps from './inputProps';
 import omit from '../_util/omit';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
+import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 
 // CSSINJS
 import useStyle from './style';
@@ -30,6 +31,11 @@ export default defineComponent({
     const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
     const { direction, prefixCls, size, autocomplete } = useConfigInject('input', props);
 
+    // ===================== Compact Item =====================
+    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+    const mergedSize = computed(() => {
+      return compactSize.value || size.value;
+    });
     // Style
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -140,12 +146,25 @@ export default defineComponent({
           onFocus={handleFocus}
           suffix={suffixNode}
           allowClear={allowClear}
-          addonAfter={addonAfter && <NoFormStatus>{addonAfter}</NoFormStatus>}
+          addonAfter={
-          addonBefore={addonBefore && <NoFormStatus>{addonBefore}</NoFormStatus>}
+            addonAfter && (
+              <NoCompactStyle>
+                <NoFormStatus>{addonAfter}</NoFormStatus>
+              </NoCompactStyle>
+            )
+          }
+          addonBefore={
+            addonBefore && (
+              <NoCompactStyle>
+                <NoFormStatus>{addonBefore}</NoFormStatus>
+              </NoCompactStyle>
+            )
+          }
+          class={[attrs.class, compactItemClassnames.value]}
           inputClassName={classNames(
             {
-              [`${prefixClsValue}-sm`]: size.value === 'small',
+              [`${prefixClsValue}-sm`]: mergedSize.value === 'small',
-              [`${prefixClsValue}-lg`]: size.value === 'large',
+              [`${prefixClsValue}-lg`]: mergedSize.value === 'large',
               [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
               [`${prefixClsValue}-borderless`]: !bordered,
             },
@@ -154,8 +173,8 @@ export default defineComponent({
           )}
           affixWrapperClassName={classNames(
             {
-              [`${prefixClsValue}-affix-wrapper-sm`]: size.value === 'small',
+              [`${prefixClsValue}-affix-wrapper-sm`]: mergedSize.value === 'small',
-              [`${prefixClsValue}-affix-wrapper-lg`]: size.value === 'large',
+              [`${prefixClsValue}-affix-wrapper-lg`]: mergedSize.value === 'large',
               [`${prefixClsValue}-affix-wrapper-rtl`]: direction.value === 'rtl',
               [`${prefixClsValue}-affix-wrapper-borderless`]: !bordered,
             },
@@ -170,8 +189,8 @@ export default defineComponent({
           )}
           groupClassName={classNames(
             {
-              [`${prefixClsValue}-group-wrapper-sm`]: size.value === 'small',
+              [`${prefixClsValue}-group-wrapper-sm`]: mergedSize.value === 'small',
-              [`${prefixClsValue}-group-wrapper-lg`]: size.value === 'large',
+              [`${prefixClsValue}-group-wrapper-lg`]: mergedSize.value === 'large',
               [`${prefixClsValue}-group-wrapper-rtl`]: direction.value === 'rtl',
             },
             getStatusClassNames(`${prefixClsValue}-group-wrapper`, mergedStatus.value, hasFeedback),

components/space/Compact.tsx

@@ -9,6 +9,7 @@ import type { PropType, ExtractPropTypes, Ref } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { booleanType, tuple } from '../_util/type';
 import { isEmpty } from 'lodash-es';
+import { flattenChildren } from '../_util/props-util';
 
 export const spaceCompactItemProps = () => ({
   compactSize: String as PropType<SizeType>,
@@ -60,7 +61,7 @@ export const NoCompactStyle = defineComponent({
 export const spaceCompactProps = () => ({
   prefixCls: String,
   size: {
-    type: [String, Number, Array] as PropType<SizeType>,
+    type: String as PropType<SizeType>,
   },
   direction: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
   align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
@@ -98,15 +99,14 @@ const Compact = defineComponent({
     });
 
     return () => {
+      const childNodes = flattenChildren(slots.default?.() || []);
       // =========================== Render ===========================
-      if (slots.default?.()?.length === 0) {
+      if (childNodes.length === 0) {
         return null;
       }
 
-      const childNodes = slots.default?.() || [];
-
       return wrapSSR(
-        <div class={clx.value} {...attrs}>
+        <div {...attrs} class={[clx.value, attrs.class]}>
           {childNodes.map((child, i) => {
             const key = (child && child.key) || `${prefixCls.value}-item-${i}`;
             const noCompactItemContext = !compactItemContext || isEmpty(compactItemContext);
@@ -114,7 +114,7 @@ const Compact = defineComponent({
             return (
               <CompactItem
                 key={key}
-                compactSize={props.size}
+                compactSize={props.size ?? 'middle'}
                 compactDirection={props.direction}
                 isFirstItem={i === 0 && (noCompactItemContext || compactItemContext?.isFirstItem)}
                 isLastItem={

components/space/demo/compact.vue

@@ -194,21 +194,8 @@ Compact Mode for form component.
         placeholder="Please select"
         allow-clear
         tree-default-expand-all
-      >
+        :tree-data="treeData"
-        <a-tree-select-node value="parent 1" title="parent 1">
+      ></a-tree-select>
-          <a-tree-select-node value="parent 1-0" title="parent 1-0">
-            <a-tree-select-node value="leaf1" title="leaf1" />
-            <a-tree-select-node value="leaf2" title="leaf2" />
-          </a-tree-select-node>
-          <a-tree-select-node value="parent 1-1" title="parent 1-1">
-            <a-tree-select-node value="leaf3">
-              <template #title>
-                <b :style="{ color: '#08c' }">leaf3</b>
-              </template>
-            </a-tree-select-node>
-          </a-tree-select-node>
-        </a-tree-select-node>
-      </a-tree-select>
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
     <br />
@@ -217,11 +204,41 @@ Compact Mode for form component.
 
 <script lang="ts">
 import { CopyOutlined } from '@ant-design/icons-vue';
-import { defineComponent } from 'vue';
+import { TreeSelectProps } from 'ant-design-vue';
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   components: {
     CopyOutlined,
   },
+  setup() {
+    const treeData = ref<TreeSelectProps['treeData']>([
+      {
+        title: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            title: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                title: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                title: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
+          },
+          {
+            title: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+    ]);
+    return { treeData };
+  },
 });
 </script>