Feat v4 floatbutton

components/components.ts

@@ -77,7 +77,7 @@ export type { EmptyProps } from './empty';
 export { default as Empty } from './empty';
 
 export type { FloatButtonProps, FloatButtonGroupProps } from './float-button/interface';
-export { default as FloatButton } from './float-button';
+export { default as FloatButton, FloatButtonGroup } from './float-button';
 
 export type { FormProps, FormItemProps, FormInstance, FormItemInstance } from './form';
 export { default as Form, FormItem, FormItemRest } from './form';

components/float-button/BackTop.tsx

@@ -140,8 +140,4 @@ const BackTop = defineComponent({
   },
 });
 
-if (process.env.NODE_ENV !== 'production') {
-  BackTop.displayName = 'BackTop';
-}
-
 export default BackTop;

components/float-button/FloatButton.tsx

@@ -31,19 +31,6 @@ const FloatButton = defineComponent({
       return groupShape || props.shape;
     });
 
-    const classString = computed(() => {
-      return classNames(
-        hashId.value,
-        prefixCls.value,
-        attrs.class,
-        `${prefixCls.value}-${props.type}`,
-        `${prefixCls.value}-${mergeShape.value}`,
-        {
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-      );
-    });
-
     expose({
       floatButtonEl: floatButtonRef,
     });
@@ -63,6 +50,17 @@ const FloatButton = defineComponent({
         description,
       };
 
+      const classString = classNames(
+        prefixCls.value,
+        `${prefixCls.value}-${props.type}`,
+        `${prefixCls.value}-${mergeShape.value}`,
+        {
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+        hashId.value,
+      );
+
       const buttonNode = (
         <Tooltip placement="left">
           {{
@@ -98,7 +96,7 @@ const FloatButton = defineComponent({
             ref={floatButtonRef}
             {...attrs}
             {...(restProps as any)}
-            class={classString.value}
+            class={classString}
             style={attrs.style as CSSProperties}
           >
             {buttonNode}
@@ -108,7 +106,7 @@ const FloatButton = defineComponent({
             ref={floatButtonRef}
             {...attrs}
             {...restProps}
-            class={classString.value}
+            class={classString}
             style={attrs.style as CSSProperties}
             type="button"
           >
@@ -120,8 +118,4 @@ const FloatButton = defineComponent({
   },
 });
 
-if (process.env.NODE_ENV !== 'production') {
-  FloatButton.displayName = 'FloatButton';
-}
-
 export default FloatButton;

components/float-button/FloatButtonContent.tsx

@@ -1,14 +1,13 @@
 import { defineComponent } from 'vue';
 import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined';
 import classNames from '../_util/classNames';
-import { initDefaultProps } from '../_util/props-util';
 import { floatButtonContentProps } from './interface';
 
 const FloatButtonContent = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AFloatButtonContent',
   inheritAttrs: false,
-  props: initDefaultProps(floatButtonContentProps(), {}),
+  props: floatButtonContentProps(),
   setup(props, { attrs, slots }) {
     return () => {
       const { description, prefixCls } = props;

components/float-button/FloatButtonGroup.tsx

@@ -33,7 +33,7 @@ const FloatButtonGroup = defineComponent({
     const floatButtonRef = ref<HTMLButtonElement | HTMLAnchorElement>(null);
 
     FloatButtonGroupContext.useProvide({
-      shape: computed(() => props.shape),
+      shape: props.shape,
     });
 
     const hoverAction = computed(() => {

components/float-button/context.ts

@@ -1,10 +1,7 @@
-import type { Ref } from 'vue';
 import createContext from '../_util/createContext';
 
 import type { FloatButtonShape } from './interface';
 
-const FloatButtonGroupContext = createContext<{ shape: Ref<FloatButtonShape> } | undefined>(
-  undefined,
-);
+const FloatButtonGroupContext = createContext<{ shape: FloatButtonShape } | undefined>(undefined);
 
 export default FloatButtonGroupContext;

components/float-button/style/index.ts

@@ -2,9 +2,9 @@ import type { CSSObject } from '../../_util/cssinjs';
 import { Keyframes } from '../../_util/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { initFadeMotion } from '../../_style/motion/fade';
-import { resetComponent } from '../../_style';
-import { initMotion } from '../../_style/motion/motion';
+import { initFadeMotion } from '../../style/motion/fade';
+import { resetComponent } from '../../style';
+import { initMotion } from '../../style/motion/motion';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {