fix(Popover): failed to inherit scopedId (#12329)

* feat(VantUse): add useSpring composables

* feat(VantUse): add useSpring composables

* feat(FloatingPanel): optimize bounce animate

packages/vant/src/cell-group/CellGroup.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, type ExtractPropTypes } from 'vue';
 import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
+import { useScopeId } from '../composables/use-scope-id';
 
 const [name, bem] = createNamespace('cell-group');
 
@@ -26,6 +27,7 @@ export default defineComponent({
           { [BORDER_TOP_BOTTOM]: props.border && !props.inset },
         ]}
         {...attrs}
+        {...useScopeId()}
       >
         {slots.default?.()}
       </div>

packages/vant/src/composables/use-scope-id.ts

@@ -0,0 +1,8 @@
+import { getCurrentInstance } from 'vue';
+
+// Fix failed to get scopeId when using teleport & fragment
+// https://github.com/vuejs/core/issues/2669
+export const useScopeId = () => {
+  const { scopeId } = getCurrentInstance()?.vnode || {};
+  return scopeId ? { [scopeId]: '' } : null;
+};

packages/vant/src/floating-panel/FloatingPanel.tsx

@@ -27,7 +27,7 @@ import { useSyncPropRef } from '../composables/use-sync-prop-ref';
 export const floatingPanelProps = {
   height: makeNumericProp(0),
   anchors: makeArrayProp<number>(),
-  duration: makeNumericProp(0.2),
+  duration: makeNumericProp(0.3),
   contentDraggable: truthProp,
   lockScroll: Boolean,
   safeAreaInsetBottom: truthProp,
@@ -71,7 +71,9 @@ export default defineComponent({
     const rootStyle = computed(() => ({
       height: addUnit(boundary.value.max),
       transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
-      transition: !dragging.value ? `transform ${props.duration}s` : 'none',
+      transition: !dragging.value
+        ? `transform ${props.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)`
+        : 'none',
     }));
 
     const ease = (moveY: number): number => {

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

@@ -20,6 +20,7 @@
   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);
+  will-change: transform;
 
   &::after {
     content: '';

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

@@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
     >
       <div
         class="van-floating-panel van-safe-area-bottom"
-        style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
+        style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
       >
         <div class="van-floating-panel__header">
           <div class="van-floating-panel__header-bar">

packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = `
 <div
   class="van-floating-panel van-safe-area-bottom"
-  style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
+  style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">
@@ -18,7 +18,7 @@ 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`] = `
 <div
   class="van-floating-panel van-safe-area-bottom"
-  style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;"
+  style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
 >
   <div class="van-floating-panel__header">
     <div class="van-floating-panel__header-bar">

packages/vant/src/popover/Popover.tsx

@@ -31,6 +31,7 @@ import {
 
 // Composables
 import { useClickAway } from '@vant/use';
+import { useScopeId } from '../composables/use-scope-id';
 import { useSyncPropRef } from '../composables/use-sync-prop-ref';
 
 // Components
@@ -265,6 +266,7 @@ export default defineComponent({
           lockScroll={false}
           onUpdate:show={updateShow}
           {...attrs}
+          {...useScopeId()}
           {...pick(props, popupProps)}
         >
           {props.showArrow && <div class={bem('arrow')} />}

packages/vant/src/popup/Popup.tsx

@@ -32,6 +32,7 @@ import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 import { POPUP_TOGGLE_KEY } from '../composables/on-popup-reopen';
 import { useGlobalZIndex } from '../composables/use-global-z-index';
+import { useScopeId } from '../composables/use-scope-id';
 
 // Components
 import { Icon } from '../icon';
@@ -143,6 +144,7 @@ export default defineComponent({
             customStyle={props.overlayStyle}
             role={props.closeOnClickOverlay ? 'button' : undefined}
             tabindex={props.closeOnClickOverlay ? 0 : undefined}
+            {...useScopeId()}
             onClick={onClickOverlay}
           />
         );
@@ -205,6 +207,7 @@ export default defineComponent({
           ]}
           onKeydown={onKeydown}
           {...attrs}
+          {...useScopeId()}
         >
           {slots.default?.()}
           {renderCloseIcon()}