vant 3.6.15 → 3.6.16

package/es/popover/index.less

@@ -0,0 +1,290 @@
+@import './var.less';
+
+:root {
+  --van-popover-arrow-size: @popover-arrow-size;
+  --van-popover-border-radius: @popover-border-radius;
+  --van-popover-action-width: @popover-action-width;
+  --van-popover-action-height: @popover-action-height;
+  --van-popover-action-font-size: @popover-action-font-size;
+  --van-popover-action-line-height: @popover-action-line-height;
+  --van-popover-action-icon-size: @popover-action-icon-size;
+  --van-popover-light-text-color: @popover-light-text-color;
+  --van-popover-light-background-color: @popover-light-background-color;
+  --van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color;
+  --van-popover-dark-text-color: @popover-dark-text-color;
+  --van-popover-dark-background-color: @popover-dark-background-color;
+  --van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color;
+}
+
+.van-popover {
+  position: absolute;
+  overflow: visible;
+  background-color: transparent;
+  transition: opacity 0.15s, transform 0.15s;
+
+  &__wrapper {
+    display: inline-block;
+  }
+
+  &__arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: var(--van-popover-arrow-size);
+  }
+
+  &__content {
+    overflow: hidden;
+    border-radius: var(--van-popover-border-radius);
+  }
+
+  &__action {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: var(--van-popover-action-width);
+    height: var(--van-popover-action-height);
+    padding: 0 var(--van-padding-md);
+    font-size: var(--van-popover-action-font-size);
+    line-height: var(--van-line-height-md);
+    cursor: pointer;
+
+    &:last-child {
+      .van-popover__action-text::after {
+        display: none;
+      }
+    }
+
+    &-text {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    &-icon {
+      margin-right: var(--van-padding-xs);
+      font-size: var(--van-popover-action-icon-size);
+    }
+
+    &--with-icon {
+      .van-popover__action-text {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  &[data-popper-placement^='top'] {
+    .van-popover__arrow {
+      bottom: 0;
+      border-top-color: currentColor;
+      border-bottom-width: 0;
+      transform: translate(-50%, 0%);
+      margin-bottom: calc(var(--van-popover-arrow-size) * -1);
+    }
+  }
+
+  &[data-popper-placement='top'] {
+    transform-origin: 50% 100%;
+
+    .van-popover__arrow {
+      left: 50%;
+    }
+  }
+
+  &[data-popper-placement='top-start'] {
+    transform-origin: 0 100%;
+
+    .van-popover__arrow {
+      left: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement='top-end'] {
+    transform-origin: 100% 100%;
+
+    .van-popover__arrow {
+      right: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement^='left'] {
+    .van-popover__arrow {
+      right: 0;
+      border-right-width: 0;
+      border-left-color: currentColor;
+      transform: translate(0%, -50%);
+      margin-right: calc(var(--van-popover-arrow-size) * -1);
+    }
+  }
+
+  &[data-popper-placement='left'] {
+    transform-origin: 100% 50%;
+
+    .van-popover__arrow {
+      top: 50%;
+    }
+  }
+
+  &[data-popper-placement='left-start'] {
+    transform-origin: 100% 0;
+
+    .van-popover__arrow {
+      top: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement='left-end'] {
+    transform-origin: 100% 100%;
+
+    .van-popover__arrow {
+      bottom: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement^='right'] {
+    .van-popover__arrow {
+      left: 0;
+      border-right-color: currentColor;
+      border-left-width: 0;
+      transform: translate(0%, -50%);
+      margin-left: calc(var(--van-popover-arrow-size) * -1);
+    }
+  }
+
+  &[data-popper-placement='right'] {
+    transform-origin: 0 50%;
+
+    .van-popover__arrow {
+      top: 50%;
+    }
+  }
+
+  &[data-popper-placement='right-start'] {
+    transform-origin: 0 0;
+
+    .van-popover__arrow {
+      top: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement='right-end'] {
+    transform-origin: 0 100%;
+
+    .van-popover__arrow {
+      bottom: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement^='bottom'] {
+    .van-popover__arrow {
+      top: 0;
+      border-top-width: 0;
+      border-bottom-color: currentColor;
+      transform: translate(-50%, 0%);
+      margin-top: calc(var(--van-popover-arrow-size) * -1);
+    }
+  }
+
+  &[data-popper-placement='bottom'] {
+    transform-origin: 50% 0;
+
+    .van-popover__arrow {
+      left: 50%;
+    }
+  }
+
+  &[data-popper-placement='bottom-start'] {
+    transform-origin: 0 0;
+
+    .van-popover__arrow {
+      left: var(--van-padding-md);
+    }
+  }
+
+  &[data-popper-placement='bottom-end'] {
+    transform-origin: 100% 0;
+
+    .van-popover__arrow {
+      right: var(--van-padding-md);
+    }
+  }
+
+  &--light {
+    color: var(--van-popover-light-text-color);
+
+    .van-popover__content {
+      background: var(--van-popover-light-background-color);
+      box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
+    }
+
+    .van-popover__arrow {
+      color: var(--van-popover-light-background-color);
+    }
+
+    .van-popover__action {
+      &:active {
+        background-color: var(--van-active-color);
+      }
+
+      &--disabled {
+        color: var(--van-popover-light-action-disabled-text-color);
+        cursor: not-allowed;
+
+        &:active {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  &--dark {
+    color: var(--van-popover-dark-text-color);
+
+    .van-popover__content {
+      background: var(--van-popover-dark-background-color);
+    }
+
+    .van-popover__arrow {
+      color: var(--van-popover-dark-background-color);
+    }
+
+    .van-popover__action {
+      &:active {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      &--disabled {
+        color: var(--van-popover-dark-action-disabled-text-color);
+
+        &:active {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .van-popover__action-text {
+      &::after {
+        border-color: var(--van-gray-7);
+      }
+    }
+  }
+
+  &-zoom-enter-from,
+  &-zoom-leave-active {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+
+  &-zoom-enter-active {
+    transition-timing-function: var(--van-animation-timing-function-enter);
+  }
+
+  &-zoom-leave-active {
+    transition-timing-function: var(--van-animation-timing-function-leave);
+  }
+}

package/es/popover/index.mjs

@@ -2,9 +2,7 @@ import { withInstall } from "../utils/index.mjs";
 import _Popover from "./Popover.mjs";
 const Popover = withInstall(_Popover);
 var stdin_default = Popover;
-import { popoverProps } from "./Popover.mjs";
 export {
   Popover,
-  stdin_default as default,
-  popoverProps
+  stdin_default as default
 };

package/es/popover/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/es/popover/style/less.mjs

@@ -0,0 +1,6 @@
+import "../../style/base.less";
+import "../../badge/index.less";
+import "../../icon/index.less";
+import "../../overlay/index.less";
+import "../../popup/index.less";
+import "../index.less";

package/es/popover/types.d.ts

@@ -1,8 +1,7 @@
-export type PopoverTheme = 'light' | 'dark';
-export type PopoverActionsDirection = 'horizontal' | 'vertical';
-export type PopoverTrigger = 'manual' | 'click';
-export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-export type PopoverAction = {
+export declare type PopoverTheme = 'light' | 'dark';
+export declare type PopoverTrigger = 'manual' | 'click';
+export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+export declare type PopoverAction = {
     text: string;
     icon?: string;
     color?: string;
@@ -10,18 +9,3 @@ export type PopoverAction = {
     className?: string;
     [key: PropertyKey]: any;
 };
-export type PopoverThemeVars = {
-    popoverArrowSize?: string;
-    popoverRadius?: string;
-    popoverActionWidth?: string;
-    popoverActionHeight?: string;
-    popoverActionFontSize?: string;
-    popoverActionLineHeight?: number | string;
-    popoverActionIconSize?: string;
-    popoverLightTextColor?: string;
-    popoverLightBackground?: string;
-    popoverLightActionDisabledTextColor?: string;
-    popoverDarkTextColor?: string;
-    popoverDarkBackground?: string;
-    popoverDarkActionDisabledTextColor?: string;
-};

package/es/popover/var.less

@@ -0,0 +1,15 @@
+@import '../style/var.less';
+
+@popover-arrow-size: 6px;
+@popover-border-radius: var(--van-border-radius-lg);
+@popover-action-width: 128px;
+@popover-action-height: 44px;
+@popover-action-font-size: var(--van-font-size-md);
+@popover-action-line-height: var(--van-line-height-md);
+@popover-action-icon-size: 20px;
+@popover-light-text-color: var(--van-text-color);
+@popover-light-background-color: var(--van-background-color-light);
+@popover-light-action-disabled-text-color: var(--van-text-color-3);
+@popover-dark-text-color: var(--van-white);
+@popover-dark-background-color: #4a4a4a;
+@popover-dark-action-disabled-text-color: var(--van-text-color-2);

package/es/popup/Popup.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ExtractPropTypes } from 'vue';
 import type { PopupPosition, PopupCloseIconPosition } from './types';
-export declare const popupProps: {
+declare const popupProps: {
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -8,7 +8,7 @@ export declare const popupProps: {
         default: true;
     };
     duration: (NumberConstructor | StringConstructor)[];
-    teleport: import("vue").PropType<import("vue").TeleportProps["to"]>;
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
     lockScroll: {
         type: BooleanConstructor;
         default: true;
@@ -28,11 +28,11 @@ export declare const popupProps: {
 } & {
     round: BooleanConstructor;
     position: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupPosition>;
         default: PopupPosition;
     };
     closeIcon: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     closeable: BooleanConstructor;
@@ -40,15 +40,14 @@ export declare const popupProps: {
     iconPrefix: StringConstructor;
     closeOnPopstate: BooleanConstructor;
     closeIconPosition: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
-    destroyOnClose: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
 };
-export type PopupProps = ExtractPropTypes<typeof popupProps>;
-declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+export declare type PopupProps = ExtractPropTypes<typeof popupProps>;
+declare const _default: import("vue").DefineComponent<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -56,7 +55,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     duration: (NumberConstructor | StringConstructor)[];
-    teleport: import("vue").PropType<import("vue").TeleportProps["to"]>;
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
     lockScroll: {
         type: BooleanConstructor;
         default: true;
@@ -76,11 +75,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
 } & {
     round: BooleanConstructor;
     position: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupPosition>;
         default: PopupPosition;
     };
     closeIcon: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     closeable: BooleanConstructor;
@@ -88,13 +87,12 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     iconPrefix: StringConstructor;
     closeOnPopstate: BooleanConstructor;
     closeIconPosition: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
-    destroyOnClose: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").PublicProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "click-overlay" | "click-close-icon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -102,7 +100,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: true;
     };
     duration: (NumberConstructor | StringConstructor)[];
-    teleport: import("vue").PropType<import("vue").TeleportProps["to"]>;
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
     lockScroll: {
         type: BooleanConstructor;
         default: true;
@@ -122,11 +120,11 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
 } & {
     round: BooleanConstructor;
     position: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupPosition>;
         default: PopupPosition;
     };
     closeIcon: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<string>;
         default: string;
     };
     closeable: BooleanConstructor;
@@ -134,27 +132,26 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     iconPrefix: StringConstructor;
     closeOnPopstate: BooleanConstructor;
     closeIconPosition: {
-        type: import("vue").PropType<T>;
+        type: import("vue").PropType<PopupCloseIconPosition>;
         default: PopupCloseIconPosition;
     };
-    destroyOnClose: BooleanConstructor;
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}>> & Readonly<{
+}>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     onOpened?: ((...args: any[]) => any) | undefined;
     onClosed?: ((...args: any[]) => any) | undefined;
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
-    onClickOverlay?: ((...args: any[]) => any) | undefined;
-    onClickCloseIcon?: ((...args: any[]) => any) | undefined;
-}>, {
+    "onClick-overlay"?: ((...args: any[]) => any) | undefined;
+    "onClick-close-icon"?: ((...args: any[]) => any) | undefined;
+}, {
     position: PopupPosition;
     round: boolean;
+    safeAreaInsetBottom: boolean;
     overlay: boolean;
     show: boolean;
-    safeAreaInsetBottom: boolean;
     lockScroll: boolean;
     lazyRender: boolean;
     transitionAppear: boolean;
@@ -163,7 +160,6 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     closeable: boolean;
     closeOnPopstate: boolean;
     closeIconPosition: PopupCloseIconPosition;
-    destroyOnClose: boolean;
     safeAreaInsetTop: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>;
 export default _default;

package/es/popup/Popup.mjs

@@ -1,4 +1,5 @@
-import { ref, watch, provide, Teleport, nextTick, computed, onMounted, Transition, onActivated, onDeactivated, defineComponent, mergeProps as _mergeProps, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives, Fragment as _Fragment } from "vue";
+import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, provide, Teleport, nextTick, computed, onMounted, Transition, onActivated, onDeactivated, defineComponent } from "vue";
 import { popupSharedProps } from "./shared.mjs";
 import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
 import { useEventListener } from "@vant/use";
@@ -7,7 +8,6 @@ import { useLockScroll } from "../composables/use-lock-scroll.mjs";
 import { useLazyRender } from "../composables/use-lazy-render.mjs";
 import { POPUP_TOGGLE_KEY } from "../composables/on-popup-reopen.mjs";
 import { useGlobalZIndex } from "../composables/use-global-z-index.mjs";
-import { useScopeId } from "../composables/use-scope-id.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Overlay } from "../overlay/index.mjs";
 const popupProps = extend({}, popupSharedProps, {
@@ -19,7 +19,6 @@ const popupProps = extend({}, popupSharedProps, {
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: makeStringProp("top-right"),
-  destroyOnClose: Boolean,
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean
 });
@@ -28,7 +27,7 @@ var stdin_default = defineComponent({
   name,
   inheritAttrs: false,
   props: popupProps,
-  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
+  emits: ["open", "close", "opened", "closed", "keydown", "update:show", "click-overlay", "click-close-icon"],
   setup(props, {
     emit,
     attrs,
@@ -68,30 +67,29 @@ var stdin_default = defineComponent({
       }
     };
     const onClickOverlay = (event) => {
-      emit("clickOverlay", event);
+      emit("click-overlay", event);
       if (props.closeOnClickOverlay) {
         close();
       }
     };
     const renderOverlay = () => {
       if (props.overlay) {
-        return _createVNode(Overlay, _mergeProps({
+        return _createVNode(Overlay, {
           "show": props.show,
           "class": props.overlayClass,
           "zIndex": zIndex.value,
           "duration": props.duration,
           "customStyle": props.overlayStyle,
           "role": props.closeOnClickOverlay ? "button" : void 0,
-          "tabindex": props.closeOnClickOverlay ? 0 : void 0
-        }, useScopeId(), {
+          "tabindex": props.closeOnClickOverlay ? 0 : void 0,
           "onClick": onClickOverlay
-        }), {
+        }, {
           default: slots["overlay-content"]
         });
       }
     };
     const onClickCloseIcon = (event) => {
-      emit("clickCloseIcon", event);
+      emit("click-close-icon", event);
       close();
     };
     const renderCloseIcon = () => {
@@ -106,28 +104,17 @@ var stdin_default = defineComponent({
         }, null);
       }
     };
-    let timer;
-    const onOpened = () => {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
-        emit("opened");
-      });
-    };
+    const onOpened = () => emit("opened");
     const onClosed = () => emit("closed");
     const onKeydown = (event) => emit("keydown", event);
     const renderPopup = lazyRender(() => {
       var _a;
       const {
-        destroyOnClose,
         round,
         position,
         safeAreaInsetTop,
-        safeAreaInsetBottom,
-        show
+        safeAreaInsetBottom
       } = props;
-      if (!show && destroyOnClose) {
-        return;
-      }
       return _withDirectives(_createVNode("div", _mergeProps({
         "ref": popupRef,
         "style": style.value,
@@ -141,7 +128,7 @@ var stdin_default = defineComponent({
           "van-safe-area-bottom": safeAreaInsetBottom
         }],
         "onKeydown": onKeydown
-      }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[_vShow, show]]);
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[_vShow, props.show]]);
     });
     const renderTransition = () => {
       const {
@@ -215,6 +202,5 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default,
-  popupProps
+  stdin_default as default
 };

package/es/popup/index.css

@@ -1 +1 @@
-:root,:host{--van-popup-background: var(--van-background-2);--van-popup-transition: transform var(--van-duration-base);--van-popup-round-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;box-sizing:border-box;background:var(--van-popup-background);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:0;right:0;width:-webkit-fit-content;width:fit-content;max-width:calc(100vw - var(--van-padding-md) * 2);margin:0 auto;transform:translateY(-50%)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-radius) var(--van-popup-round-radius)}.van-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-radius) 0 0 var(--van-popup-round-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-radius) var(--van-popup-round-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-radius) var(--van-popup-round-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-ease-out)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-ease-in)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}
+:root{--van-popup-background-color: var(--van-background-color-light);--van-popup-transition: transform var(--van-animation-duration-base);--van-popup-round-border-radius: 16px;--van-popup-close-icon-size: 22px;--van-popup-close-icon-color: var(--van-gray-5);--van-popup-close-icon-margin: 16px;--van-popup-close-icon-z-index: 1}.van-overflow-hidden{overflow:hidden!important}.van-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--van-popup-background-color);transition:var(--van-popup-transition);-webkit-overflow-scrolling:touch}.van-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.van-popup--center.van-popup--round{border-radius:var(--van-popup-round-border-radius)}.van-popup--top{top:0;left:0;width:100%}.van-popup--top.van-popup--round{border-radius:0 0 var(--van-popup-round-border-radius) var(--van-popup-round-border-radius)}.van-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.van-popup--right.van-popup--round{border-radius:var(--van-popup-round-border-radius) 0 0 var(--van-popup-round-border-radius)}.van-popup--bottom{bottom:0;left:0;width:100%}.van-popup--bottom.van-popup--round{border-radius:var(--van-popup-round-border-radius) var(--van-popup-round-border-radius) 0 0}.van-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.van-popup--left.van-popup--round{border-radius:0 var(--van-popup-round-border-radius) var(--van-popup-round-border-radius) 0}.van-popup-slide-top-enter-active,.van-popup-slide-left-enter-active,.van-popup-slide-right-enter-active,.van-popup-slide-bottom-enter-active{transition-timing-function:var(--van-animation-timing-function-enter)}.van-popup-slide-top-leave-active,.van-popup-slide-left-leave-active,.van-popup-slide-right-leave-active,.van-popup-slide-bottom-leave-active{transition-timing-function:var(--van-animation-timing-function-leave)}.van-popup-slide-top-enter-from,.van-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.van-popup-slide-bottom-enter-from,.van-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.van-popup-slide-left-enter-from,.van-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.van-popup__close-icon{position:absolute;z-index:var(--van-popup-close-icon-z-index);color:var(--van-popup-close-icon-color);font-size:var(--van-popup-close-icon-size)}.van-popup__close-icon--top-left{top:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--top-right{top:var(--van-popup-close-icon-margin);right:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-left{bottom:var(--van-popup-close-icon-margin);left:var(--van-popup-close-icon-margin)}.van-popup__close-icon--bottom-right{right:var(--van-popup-close-icon-margin);bottom:var(--van-popup-close-icon-margin)}