From bbedcb49fce06d6517c70dd849d0b3122b2424ae Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Jul 2023 20:27:16 +0800 Subject: [PATCH] feat(FloatingBubble): add CSS vars to override border radius (#12070) * feat(FloatingBubble): add CSS vars to override border radius * chore: update snapshot --- .../src/floating-bubble/FloatingBubble.tsx | 39 ++++++++----------- packages/vant/src/floating-bubble/README.md | 27 +++++++------ .../vant/src/floating-bubble/README.zh-CN.md | 29 +++++++------- .../vant/src/floating-bubble/demo/index.vue | 4 +- packages/vant/src/floating-bubble/index.less | 7 ++-- packages/vant/src/floating-bubble/index.ts | 6 +-- .../test/__snapshots__/demo.spec.ts.snap | 2 +- packages/vant/src/floating-bubble/types.ts | 16 ++++++++ 8 files changed, 74 insertions(+), 56 deletions(-) diff --git a/packages/vant/src/floating-bubble/FloatingBubble.tsx b/packages/vant/src/floating-bubble/FloatingBubble.tsx index 66592e01e..c3ead307a 100644 --- a/packages/vant/src/floating-bubble/FloatingBubble.tsx +++ b/packages/vant/src/floating-bubble/FloatingBubble.tsx @@ -14,42 +14,38 @@ import { type ExtractPropTypes, } from 'vue'; -import { useRect, useEventListener } from '@vant/use'; -import { useTouch } from '../composables/use-touch'; +// Utils 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'; - -export type FloatingBubbleMagnetic = 'x' | 'y'; - -export type FloatingBubbleOffset = { - x: number; - y: number; -}; - -type FloatingBubbleBoundary = { - top: number; - right: number; - bottom: number; - left: number; -}; +// Types +import { + FloatingBubbleAxis, + FloatingBubbleMagnetic, + FloatingBubbleOffset, + FloatingBubbleBoundary, +} from './types'; export const floatingBubbleProps = { + gap: makeNumberProp(24), + icon: String, axis: makeStringProp('y'), magnetic: String as PropType, - icon: String, - gap: makeNumberProp(24), offset: { type: Object as unknown as PropType, default: () => ({ x: -1, y: -1 }), @@ -202,8 +198,7 @@ export default defineComponent({ watch( [windowWidth, windowHeight, () => props.gap, () => props.offset], - () => updateState(), - { deep: true } + updateState ); const show = ref(true); diff --git a/packages/vant/src/floating-bubble/README.md b/packages/vant/src/floating-bubble/README.md index a8316c54a..2b4fa65c1 100644 --- a/packages/vant/src/floating-bubble/README.md +++ b/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) => { - showToast(offset.x + '__' + offset.y); + const onOffsetChange = (offset) => { + 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 | -| --------------------------------- | -------------------------- | ----------- | -| --van-floating-bubble-size | _48px_ | - | -| --van-floating-bubble-initial-gap | _24px_ | - | -| --van-floating-bubble-icon-size | _28px_ | - | -| --van-floating-bubble-background | _var(--van-primary-color)_ | - | -| --van-floating-bubble-color | _var(--van-background-2)_ | - | -| --van-floating-bubble-z-index | _999_ | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-floating-bubble-size | _48px_ | - | +| --van-floating-bubble-initial-gap | _24px_ | - | +| --van-floating-bubble-icon-size | _28px_ | - | +| --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 | _--van-floating-bubble-border-radius_ | - | diff --git a/packages/vant/src/floating-bubble/README.zh-CN.md b/packages/vant/src/floating-bubble/README.zh-CN.md index 37df455ed..18f6d0bb0 100644 --- a/packages/vant/src/floating-bubble/README.zh-CN.md +++ b/packages/vant/src/floating-bubble/README.zh-CN.md @@ -57,26 +57,28 @@ import { showToast } from 'vant'; export default { setup() { - const onOffsetChange = (offset: OffsetType) => { - showToast(offset.x + '__' + offset.y); + const onOffsetChange = (offset) => { + showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`); }; return { onOffsetChange }; }, }; ``` -### 使用 v-model +### 双向绑定 -使用 `v-model:offset` 控制位置。 +使用 `v-model:offset` 控制 FloatingBubble 的位置。 ```html ``` ```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-initial-gap | _24px_ | - | -| --van-floating-bubble-icon-size | _28px_ | - | -| --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-size | _48px_ | - | +| --van-floating-bubble-initial-gap | _24px_ | - | +| --van-floating-bubble-icon-size | _28px_ | - | +| --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 | _--van-floating-bubble-border-radius_ | - | diff --git a/packages/vant/src/floating-bubble/demo/index.vue b/packages/vant/src/floating-bubble/demo/index.vue index c824a9b24..d25d5da77 100644 --- a/packages/vant/src/floating-bubble/demo/index.vue +++ b/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 = () => { diff --git a/packages/vant/src/floating-bubble/index.less b/packages/vant/src/floating-bubble/index.less index 7c5f1ae78..8efd9ba12 100644 --- a/packages/vant/src/floating-bubble/index.less +++ b/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 { diff --git a/packages/vant/src/floating-bubble/index.ts b/packages/vant/src/floating-bubble/index.ts index e93f2d691..6ce77ad7a 100644 --- a/packages/vant/src/floating-bubble/index.ts +++ b/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'; -export type { FloatingBubbleThemeVars } from './types'; +} from './types'; declare module 'vue' { export interface GlobalComponents { diff --git a/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap index 14f36feee..335d5562b 100644 --- a/packages/vant/src/floating-bubble/test/__snapshots__/demo.spec.ts.snap +++ b/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" > - Free magnetic + Free Magnetic