From b8424849f03d07684a5484890395a69d24a8d2c7 Mon Sep 17 00:00:00 2001 From: ShuGang Zhou Date: Sat, 3 Jun 2023 09:26:42 +0800 Subject: [PATCH] feat(FloatingPanel): add new FloatingPanel component (#11832) * fix(Swipe): props changed but component didn't * fix(Swipe): target watch windowWidth * Update packages/vant/src/swipe/Swipe.tsx * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * fix(Sticky): resize or orientationchange wrapper no reset width and height * chore: sync * feat(FloatingPanel): add new FloatingPanel component * feat(FloatingPanel): add new FloatingPanel component * feat(FloatingPanel): optimized code * feat(FloatingPanel): optimized code --------- Co-authored-by: zhousg <345313727@qq.com> Co-authored-by: neverland --- .../vant/src/floating-panel/FloatingPanel.tsx | 139 +++++++++ packages/vant/src/floating-panel/README.md | 109 +++++++ .../vant/src/floating-panel/README.zh-CN.md | 109 +++++++ .../vant/src/floating-panel/demo/index.vue | 69 +++++ packages/vant/src/floating-panel/index.less | 52 ++++ packages/vant/src/floating-panel/index.ts | 14 + .../test/__snapshots__/demo-ssr.spec.ts.snap | 44 +++ .../test/__snapshots__/demo.spec.ts.snap | 270 ++++++++++++++++++ .../test/__snapshots__/index.spec.tsx.snap | 29 ++ .../src/floating-panel/test/demo-ssr.spec.ts | 7 + .../vant/src/floating-panel/test/demo.spec.ts | 5 + .../src/floating-panel/test/index.spec.tsx | 118 ++++++++ packages/vant/vant.config.mjs | 8 + 13 files changed, 973 insertions(+) create mode 100644 packages/vant/src/floating-panel/FloatingPanel.tsx create mode 100644 packages/vant/src/floating-panel/README.md create mode 100644 packages/vant/src/floating-panel/README.zh-CN.md create mode 100644 packages/vant/src/floating-panel/demo/index.vue create mode 100644 packages/vant/src/floating-panel/index.less create mode 100644 packages/vant/src/floating-panel/index.ts create mode 100644 packages/vant/src/floating-panel/test/__snapshots__/demo-ssr.spec.ts.snap create mode 100644 packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap create mode 100644 packages/vant/src/floating-panel/test/demo-ssr.spec.ts create mode 100644 packages/vant/src/floating-panel/test/demo.spec.ts create mode 100644 packages/vant/src/floating-panel/test/index.spec.tsx diff --git a/packages/vant/src/floating-panel/FloatingPanel.tsx b/packages/vant/src/floating-panel/FloatingPanel.tsx new file mode 100644 index 000000000..da7089878 --- /dev/null +++ b/packages/vant/src/floating-panel/FloatingPanel.tsx @@ -0,0 +1,139 @@ +import { computed, defineComponent, ref, type ExtractPropTypes } from 'vue'; +import { useLockScroll } from '../composables/use-lock-scroll'; +import { useTouch } from '../composables/use-touch'; +import { addUnit, createNamespace, makeArrayProp, truthProp } from '../utils'; +import { useWindowSize } from '@vant/use'; + +const { height: windowHeight } = useWindowSize(); + +export const floatingPanelProps = { + anchors: makeArrayProp(), + contentDraggable: truthProp, + safeAreaInsetBottom: truthProp, +}; + +export type FloatingPanelProps = ExtractPropTypes; + +const [name, bem] = createNamespace('floating-panel'); + +const DAMP = 0.2; + +export default defineComponent({ + name, + + props: floatingPanelProps, + + emits: ['heightChange'], + + setup(props, { emit, slots }) { + const rootRef = ref(); + const contentRef = ref(); + + const boundary = computed(() => ({ + min: props.anchors[0] ?? 100, + max: + props.anchors[props.anchors.length - 1] ?? + Math.round(windowHeight.value * 0.6), + })); + + const anchors = computed(() => + props.anchors.length >= 2 + ? props.anchors + : [boundary.value.min, boundary.value.max] + ); + + const dragging = ref(false); + const currentY = ref(-boundary.value.min); + + const rootStyle = computed(() => ({ + height: addUnit(boundary.value.max), + transform: `translateY(calc(100% + ${addUnit(currentY.value)}))`, + transition: !dragging.value ? 'transform .3s' : 'none', + })); + + const ease = (moveY: number): number => { + const absDistance = Math.abs(moveY); + const { min, max } = boundary.value; + + if (absDistance > max) { + return -(max + (absDistance - max) * DAMP); + } + + if (absDistance < min) { + return -(min - (min - absDistance) * DAMP); + } + + return moveY; + }; + + const closest = (arr: number[], target: number) => + arr.reduce((pre, cur) => + Math.abs(pre - target) < Math.abs(cur - target) ? pre : cur + ); + + let startY = currentY.value; + const touch = useTouch(); + + const onTouchstart = (e: TouchEvent) => { + touch.start(e); + dragging.value = true; + }; + + const onTouchmove = (e: TouchEvent) => { + touch.move(e); + + const target = e.target as Element; + if (contentRef.value === target || contentRef.value?.contains(target)) { + if (!props.contentDraggable) return; + + if (-startY < boundary.value.max) { + if (e.cancelable) e.preventDefault(); + e.stopPropagation(); + } else if ( + !(contentRef.value.scrollTop <= 0 && touch.deltaY.value > 0) + ) { + return; + } + } + + const moveY = touch.deltaY.value + startY; + + currentY.value = ease(moveY); + }; + + const onTouchend = () => { + dragging.value = false; + + const height = Math.abs(currentY.value); + const closestHeight = closest(anchors.value, height); + currentY.value = -closestHeight; + + if (currentY.value !== startY) { + emit('heightChange', closestHeight); + } + + startY = currentY.value; + }; + + useLockScroll(rootRef, () => true); + + return () => ( +
+
+
+
+
+ {slots.default?.()} +
+
+ ); + }, +}); diff --git a/packages/vant/src/floating-panel/README.md b/packages/vant/src/floating-panel/README.md new file mode 100644 index 000000000..3d9ddb43b --- /dev/null +++ b/packages/vant/src/floating-panel/README.md @@ -0,0 +1,109 @@ +# FloatingPanel + +### Intro + +A panel that floats at the bottom of a page, which can be dragged up and down to browse content, often used to provide additional functionality or information. + +### Install + +Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways. + +```js +import { createApp } from 'vue'; +import { FloatingPanel } from 'vant'; + +const app = createApp(); +app.use(FloatingPanel); +``` + +## Usage + +### Basic Usage + +```html + + + + + +``` + +### Custom Anchors + +```html + +
+

Panel Show Height {{ height }} px

+
+ +``` + +```ts +const anchors = [ + 100, + Math.round(0.4 * window.innerHeight), + Math.round(0.7 * window.innerHeight), +]; +const height = ref(anchors[0]); +const onHeightChange = (h: number) => { + height.value = h; +}; +``` + +### Head Drag Only + +```html + +
+

Content cannot be dragged

+
+ +``` + +## API + +### Props + +| Attribute | Description | Type | Default | +| --- | --- | --- | --- | +| anchors | Setting custom anchors, unit `px` | _number[]_ | `[100, window.innerWidth * 0.6]` | +| content-draggable | Allow dragging content | _boolean_ | `true` | +| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | + +### Events + +| Event | Description | Arguments | +| ------------- | ------------------------------------ | ---------------- | +| height-change | Emitted when panel height is changed | _height: number_ | + +### Slots + +| Name | Description | +| ------- | -------------------- | +| default | Custom panel content | + +### Types + +The component exports the following type definitions: + +```ts +import type { FloatingPanelProps } from 'vant'; +``` + +## Theming + +### CSS Variables + +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-panel-border-radius | _16px_ | - | +| --van-floating-panel-header-height | _30px_ | - | +| --van-floating-panel-z-index | _999_ | - | +| --van-floating-panel-background | _var(--van-background-2)_ | - | diff --git a/packages/vant/src/floating-panel/README.zh-CN.md b/packages/vant/src/floating-panel/README.zh-CN.md new file mode 100644 index 000000000..5c7669c5a --- /dev/null +++ b/packages/vant/src/floating-panel/README.zh-CN.md @@ -0,0 +1,109 @@ +# FloatingPanel 浮动面板 + +### 介绍 + +浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。 + +### 引入 + +通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。 + +```js +import { createApp } from 'vue'; +import { FloatingPanel } from 'vant'; + +const app = createApp(); +app.use(FloatingPanel); +``` + +## 代码演示 + +### 基础用法 + +```html + + + + + +``` + +### 自定义锚点 + +```html + +
+

面板显示高度 {{ height }} px

+
+ +``` + +```ts +const anchors = [ + 100, + Math.round(0.4 * window.innerHeight), + Math.round(0.7 * window.innerHeight), +]; +const height = ref(anchors[0]); +const onHeightChange = (h: number) => { + height.value = h; +}; +``` + +### 仅头部拖拽 + +```html + +
+

内容不可拖拽

+
+ +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| anchors | 设置自定义锚点, 单位 `px` | _number[]_ | `[100, window.innerWidth * 0.6]` | +| content-draggable | 允许拖拽内容容器 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------------- | ---------------------- | ---------------- | +| height-change | 面板显示高度改变时触发 | _height: number_ | + +### Slots + +| Name | Description | +| ------- | -------------- | +| default | 自定义面板内容 | + +### 类型定义 + +组件导出以下类型定义： + +```ts +import type { FloatingPanelProps } from 'vant'; +``` + +## 主题定制 + +### 样式变量 + +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 + +| Name | Default Value | Description | +| ---------------------------------- | ------------------------- | ----------- | +| --van-floating-panel-border-radius | _16px_ | - | +| --van-floating-panel-header-height | _30px_ | - | +| --van-floating-panel-z-index | _999_ | - | +| --van-floating-panel-background | _var(--van-background-2)_ | - | diff --git a/packages/vant/src/floating-panel/demo/index.vue b/packages/vant/src/floating-panel/demo/index.vue new file mode 100644 index 000000000..bd0aad7e9 --- /dev/null +++ b/packages/vant/src/floating-panel/demo/index.vue @@ -0,0 +1,69 @@ + + + diff --git a/packages/vant/src/floating-panel/index.less b/packages/vant/src/floating-panel/index.less new file mode 100644 index 000000000..5b45b77dc --- /dev/null +++ b/packages/vant/src/floating-panel/index.less @@ -0,0 +1,52 @@ +:root { + --van-floating-panel-border-radius: 16px; + --van-floating-panel-header-height: 30px; + --van-floating-panel-z-index: 999; + --van-floating-panel-background: var(--van-background-2); +} + +.van-floating-panel { + position: fixed; + left: 0; + bottom: 0; + width: 100vw; + z-index: var(--van-floating-panel-z-index); + display: flex; + flex-direction: column; + touch-action: none; + border-top-left-radius: var(--van-floating-panel-border-radius); + border-top-right-radius: var(--van-floating-panel-border-radius); + background: var(--van-floating-panel-background); + + &::after { + content: ''; + display: block; + position: absolute; + bottom: -100vh; + height: 100vh; + width: 100vw; + background-color: inherit; + } + + &__header { + height: var(--van-floating-panel-header-height); + display: flex; + justify-content: center; + align-items: center; + cursor: grab; + user-select: none; + + &-bar { + height: 3px; + width: 20px; + border-radius: 4px; + background: var(--van-gray-5); + } + } + + &__content { + flex: 1; + overflow-y: auto; + background-color: var(--van-floating-panel-background); + } +} diff --git a/packages/vant/src/floating-panel/index.ts b/packages/vant/src/floating-panel/index.ts new file mode 100644 index 000000000..1010ff7ff --- /dev/null +++ b/packages/vant/src/floating-panel/index.ts @@ -0,0 +1,14 @@ +import { withInstall } from '../utils'; +import _FloatingPanel, { FloatingPanelProps } from './FloatingPanel'; + +export const FloatingPanel = withInstall(_FloatingPanel); + +export default FloatingPanel; + +export type { FloatingPanelProps }; + +declare module 'vue' { + export interface GlobalComponents { + VanFloatingPanel: typeof FloatingPanel; + } +} diff --git a/packages/vant/src/floating-panel/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/floating-panel/test/__snapshots__/demo-ssr.spec.ts.snap new file mode 100644 index 000000000..3fec5c42c --- /dev/null +++ b/packages/vant/src/floating-panel/test/__snapshots__/demo-ssr.spec.ts.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+ +
+
+ +
+
+
+ + + + + +
+
+`; diff --git a/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 000000000..d773145fa --- /dev/null +++ b/packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,270 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + A + +
+
+
+
+ + B + +
+
+
+
+ + C + +
+
+
+
+ + D + +
+
+
+
+ + E + +
+
+
+
+ + F + +
+
+
+
+ + G + +
+
+
+
+ + H + +
+
+
+
+ + I + +
+
+
+
+ + J + +
+
+
+
+ + K + +
+
+
+
+ + L + +
+
+
+
+ + M + +
+
+
+
+ + N + +
+
+
+
+ + O + +
+
+
+
+ + P + +
+
+
+
+ + Q + +
+
+
+
+ + R + +
+
+
+
+ + S + +
+
+
+
+ + T + +
+
+
+
+ + U + +
+
+
+
+ + V + +
+
+
+
+ + W + +
+
+
+
+ + X + +
+
+
+
+ + Y + +
+
+
+
+ + Z + +
+
+
+
+
+
+ + +
+
+`; diff --git a/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap new file mode 100644 index 000000000..6737725fb --- /dev/null +++ b/packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = ` +
+
+
+
+
+
+ 内容 +
+
+`; + +exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not 1`] = ` +
+
+
+
+
+
+ Content +
+
+`; diff --git a/packages/vant/src/floating-panel/test/demo-ssr.spec.ts b/packages/vant/src/floating-panel/test/demo-ssr.spec.ts new file mode 100644 index 000000000..8f1ec23a3 --- /dev/null +++ b/packages/vant/src/floating-panel/test/demo-ssr.spec.ts @@ -0,0 +1,7 @@ +/** + * @jest-environment node + */ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo, { ssr: true }); diff --git a/packages/vant/src/floating-panel/test/demo.spec.ts b/packages/vant/src/floating-panel/test/demo.spec.ts new file mode 100644 index 000000000..cfa1246bd --- /dev/null +++ b/packages/vant/src/floating-panel/test/demo.spec.ts @@ -0,0 +1,5 @@ +import Demo from '../demo/index.vue'; + +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/packages/vant/src/floating-panel/test/index.spec.tsx b/packages/vant/src/floating-panel/test/index.spec.tsx new file mode 100644 index 000000000..1215770c6 --- /dev/null +++ b/packages/vant/src/floating-panel/test/index.spec.tsx @@ -0,0 +1,118 @@ +import { later, mount, triggerDrag } from '../../../test'; +import FloatingPanel from '..'; + +test('should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not', async () => { + const wrapper = mount({ + render() { + return Content; + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); + + expect((wrapper.element as HTMLDivElement).style.height).toBe( + `${Math.round(window.innerHeight * 0.6)}px` + ); + + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-100px' + ); +}); + +test('should drag adsorption effect when anchors props is [100, 200, 400]', async () => { + const wrapper = mount({ + render() { + return 内容; + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); + + expect((wrapper.element as HTMLDivElement).style.height).toBe('400px'); + + // drag 10 + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, 10); + await later(); + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-100px' + ); + + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-100px' + ); + + // drag -49 + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -49); + await later(); + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-100px' + ); + + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199); + await later(); + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-200px' + ); + + // drag -300 + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -200); + await later(); + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-400px' + ); + + // drag -500 + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -500); + await later(); + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-400px' + ); +}); + +test('should emit height-change when height change in anchors', async () => { + const wrapper = mount({ + render() { + return ( + this.$emit('change', h)} + > + Content + + ); + }, + }); + + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199); + await later(); + + expect((wrapper.element as HTMLDivElement).style.transform).toContain( + '-200px' + ); + + expect(wrapper.emitted('change')?.[0][0]).toEqual(200); +}); + +test('should only drag header when allowDraggingContent is false', async () => { + const wrapper = mount({ + render() { + return ( + this.$emit('change', h)} + contentDraggable={false} + > + Content + + ); + }, + }); + + await triggerDrag(wrapper.find('.van-floating-panel__content'), 0, -199); + await later(); + expect(wrapper.emitted('change')).toBeFalsy(); + + await triggerDrag(wrapper.find('.van-floating-panel__header'), 0, -199); + await later(); + expect(wrapper.emitted('change')).toBeTruthy(); +}); diff --git a/packages/vant/vant.config.mjs b/packages/vant/vant.config.mjs index 89447bafa..be1609708 100644 --- a/packages/vant/vant.config.mjs +++ b/packages/vant/vant.config.mjs @@ -251,6 +251,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'dropdown-menu', title: 'DropdownMenu 下拉菜单', }, + { + path: 'floating-panel', + title: 'FloatingPanel 浮动面板', + }, { path: 'loading', title: 'Loading 加载', @@ -703,6 +707,10 @@ location.href = location.href.replace('youzan.github.io', 'vant-ui.github.io'); path: 'dropdown-menu', title: 'DropdownMenu', }, + { + path: 'floating-panel', + title: 'FloatingPanel', + }, { path: 'loading', title: 'Loading',