feat(FloatingBubble): add CSS vars to override border radius (#12070)

* feat(FloatingBubble): add CSS vars to override border radius

* chore: update snapshot

packages/vant/src/floating-bubble/FloatingBubble.tsx

@@ -14,42 +14,38 @@ import {
   type ExtractPropTypes,
 } from 'vue';
 
-import { useRect, useEventListener } from '@vant/use';
+// Utils
-import { useTouch } from '../composables/use-touch';
 import {
+  pick,
   addUnit,
   closest,
   createNamespace,
   makeNumberProp,
   makeStringProp,
-  pick,
   windowWidth,
   windowHeight,
 } from '../utils';
 
+// Composables
+import { useRect, useEventListener } from '@vant/use';
+import { useTouch } from '../composables/use-touch';
+
+// Components
 import Icon from '../icon';
 
-export type FloatingBubbleAxis = 'x' | 'y' | 'xy' | 'lock';
+// Types
-
+import {
-export type FloatingBubbleMagnetic = 'x' | 'y';
+  FloatingBubbleAxis,
-
+  FloatingBubbleMagnetic,
-export type FloatingBubbleOffset = {
+  FloatingBubbleOffset,
-  x: number;
+  FloatingBubbleBoundary,
-  y: number;
+} from './types';
-};
-
-type FloatingBubbleBoundary = {
-  top: number;
-  right: number;
-  bottom: number;
-  left: number;
-};
 
 export const floatingBubbleProps = {
+  gap: makeNumberProp(24),
+  icon: String,
   axis: makeStringProp<FloatingBubbleAxis>('y'),
   magnetic: String as PropType<FloatingBubbleMagnetic>,
-  icon: String,
-  gap: makeNumberProp(24),
   offset: {
     type: Object as unknown as PropType<FloatingBubbleOffset>,
     default: () => ({ x: -1, y: -1 }),
@@ -202,8 +198,7 @@ export default defineComponent({
 
     watch(
       [windowWidth, windowHeight, () => props.gap, () => props.offset],
-      () => updateState(),
+      updateState
-      { deep: true }
     );
 
     const show = ref(true);

packages/vant/src/floating-bubble/README.md

@@ -39,7 +39,7 @@ export default {
 };
 ```
 
-### Free drag and magnetic
+### Free Magnetic
 
 Allow x and y drags to attach to the nearest side of the x axis.
 
@@ -57,8 +57,8 @@ import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onOffsetChange = (offset: OffsetType) => {
+    const onOffsetChange = (offset) => {
-      showToast(offset.x + '__' + offset.y);
+      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
     };
     return { onOffsetChange };
   },
@@ -74,9 +74,11 @@ Use `v-model:offset` control the position.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   setup() {
-    const offset = ref < OffsetType > { x: 200, y: 400 };
+    const offset = ref({ x: 200, y: 400 });
     return { offset };
   },
 };
@@ -127,11 +129,12 @@ export type {
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
 
-| Name                              | Default Value              | Description |
+| Name | Default Value | Description |
-| --------------------------------- | -------------------------- | ----------- |
+| --- | --- | --- |
-| --van-floating-bubble-size        | _48px_                     | -           |
+| --van-floating-bubble-size | _48px_ | - |
-| --van-floating-bubble-initial-gap | _24px_                     | -           |
+| --van-floating-bubble-initial-gap | _24px_ | - |
-| --van-floating-bubble-icon-size   | _28px_                     | -           |
+| --van-floating-bubble-icon-size | _28px_ | - |
-| --van-floating-bubble-background  | _var(--van-primary-color)_ | -           |
+| --van-floating-bubble-background | _var(--van-primary-color)_ | - |
-| --van-floating-bubble-color       | _var(--van-background-2)_  | -           |
+| --van-floating-bubble-color | _var(--van-background-2)_ | - |
-| --van-floating-bubble-z-index     | _999_                      | -           |
+| --van-floating-bubble-z-index | _999_ | - |
+| --van-floating-bubble-border-radius | _--van-floating-bubble-border-radius_ | - |

packages/vant/src/floating-bubble/README.zh-CN.md

@@ -57,26 +57,28 @@ import { showToast } from 'vant';
 
 export default {
   setup() {
-    const onOffsetChange = (offset: OffsetType) => {
+    const onOffsetChange = (offset) => {
-      showToast(offset.x + '__' + offset.y);
+      showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
     };
     return { onOffsetChange };
   },
 };
 ```
 
-### 使用 v-model
+### 双向绑定
 
-使用 `v-model:offset` 控制位置。
+使用 `v-model:offset` 控制 FloatingBubble 的位置。
 
 ```html
 <van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   setup() {
-    const offset = ref < OffsetType > { x: 200, y: 400 };
+    const offset = ref({ x: 200, y: 400 });
     return { offset };
   },
 };
@@ -127,11 +129,12 @@ export type {
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称                              | 默认值                     | 描述 |
+| 名称 | 默认值 | 描述 |
-| --------------------------------- | -------------------------- | ---- |
+| --- | --- | --- |
-| --van-floating-bubble-size        | _48px_                     | -    |
+| --van-floating-bubble-size | _48px_ | - |
-| --van-floating-bubble-initial-gap | _24px_                     | -    |
+| --van-floating-bubble-initial-gap | _24px_ | - |
-| --van-floating-bubble-icon-size   | _28px_                     | -    |
+| --van-floating-bubble-icon-size | _28px_ | - |
-| --van-floating-bubble-background  | _var(--van-primary-color)_ | -    |
+| --van-floating-bubble-background | _var(--van-primary-color)_ | - |
-| --van-floating-bubble-color       | _var(--van-background-2)_  | -    |
+| --van-floating-bubble-color | _var(--van-background-2)_ | - |
-| --van-floating-bubble-z-index     | _999_                      | -    |
+| --van-floating-bubble-z-index | _999_ | - |
+| --van-floating-bubble-border-radius | _--van-floating-bubble-border-radius_ | - |

packages/vant/src/floating-bubble/demo/index.vue

@@ -17,7 +17,7 @@ const t = useTranslate({
   },
   'en-US': {
     clickBubble: 'Click bubble',
-    freeMagnetic: 'Free magnetic',
+    freeMagnetic: 'Free Magnetic',
     vModel: 'vModel',
     basicUsageText:
       'In the default x position, drag in the y direction is allowed',
@@ -28,7 +28,7 @@ const t = useTranslate({
 });
 
 const onOffsetChange = (offset: FloatingBubbleOffset) => {
-  showToast(offset.x.toFixed(0) + '__' + offset.y.toFixed(0));
+  showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
 };
 
 const onClick = () => {

packages/vant/src/floating-bubble/index.less

@@ -5,6 +5,7 @@
   --van-floating-bubble-background: var(--van-primary-color);
   --van-floating-bubble-color: var(--van-background-2);
   --van-floating-bubble-z-index: 999;
+  --van-floating-bubble-border-radius: var(--van-radius-max);
 }
 
 .van-floating-bubble {
@@ -25,12 +26,12 @@
   touch-action: none;
   background: var(--van-floating-bubble-background);
   color: var(--van-floating-bubble-color);
-  border-radius: var(--van-radius-max);
+  border-radius: var(--van-floating-bubble-border-radius);
   z-index: var(--van-floating-bubble-z-index);
-  transition: transform 0.3s;
+  transition: transform var(--van-duration-base);
 
   &:active {
-    opacity: 0.9;
+    opacity: 0.8;
   }
 
   &__icon {

packages/vant/src/floating-bubble/index.ts

@@ -5,13 +5,13 @@ export const FloatingBubble = withInstall(_FloatingBubble);
 export default FloatingBubble;
 
 export { floatingBubbleProps } from './FloatingBubble';
+export type { FloatingBubbleProps } from './FloatingBubble';
 export type {
-  FloatingBubbleProps,
+  FloatingBubbleThemeVars,
   FloatingBubbleAxis,
   FloatingBubbleMagnetic,
   FloatingBubbleOffset,
-} from './FloatingBubble';
+} from './types';
-export type { FloatingBubbleThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap

@@ -26,7 +26,7 @@ exports[`should render demo and match snapshot 1`] = `
            aria-controls="van-tab"
       >
         <span class="van-tab__text van-tab__text--ellipsis">
-          Free magnetic
+          Free Magnetic
         </span>
       </div>
       <div id="van-tabs-2"

packages/vant/src/floating-bubble/types.ts

@@ -6,3 +6,19 @@ export type FloatingBubbleThemeVars = {
   floatingBubbleColor?: string;
   floatingBubbleZIndex?: number | string;
 };
+
+export type FloatingBubbleAxis = 'x' | 'y' | 'xy' | 'lock';
+
+export type FloatingBubbleMagnetic = 'x' | 'y';
+
+export type FloatingBubbleOffset = {
+  x: number;
+  y: number;
+};
+
+export type FloatingBubbleBoundary = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};