vant 4.0.0-beta.0 → 4.0.0-rc.1

package/es/picker/PickerToolbar.mjs

@@ -0,0 +1,59 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { bem, t } from "./utils.mjs";
+import { createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+const [name] = createNamespace("picker-toolbar");
+const pickerToolbarProps = {
+  title: String,
+  cancelButtonText: String,
+  confirmButtonText: String
+};
+const pickerToolbarSlots = ["cancel", "confirm", "title", "toolbar"];
+const pickerToolbarPropKeys = Object.keys(pickerToolbarProps);
+var stdin_default = defineComponent({
+  name,
+  props: pickerToolbarProps,
+  emits: ["confirm", "cancel"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return _createVNode("div", {
+          "class": [bem("title"), "van-ellipsis"]
+        }, [props.title]);
+      }
+    };
+    const onCancel = () => emit("cancel");
+    const onConfirm = () => emit("confirm");
+    const renderCancel = () => {
+      const text = props.cancelButtonText || t("cancel");
+      return _createVNode("button", {
+        "type": "button",
+        "class": [bem("cancel"), HAPTICS_FEEDBACK],
+        "onClick": onCancel
+      }, [slots.cancel ? slots.cancel() : text]);
+    };
+    const renderConfirm = () => {
+      const text = props.confirmButtonText || t("confirm");
+      return _createVNode("button", {
+        "type": "button",
+        "class": [bem("confirm"), HAPTICS_FEEDBACK],
+        "onClick": onConfirm
+      }, [slots.confirm ? slots.confirm() : text]);
+    };
+    return () => _createVNode("div", {
+      "class": bem("toolbar")
+    }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
+  }
+});
+export {
+  stdin_default as default,
+  pickerToolbarPropKeys,
+  pickerToolbarProps,
+  pickerToolbarSlots
+};

package/es/picker/index.d.ts

@@ -1,6 +1,5 @@
 import { PickerProps } from './Picker';
 export declare const Picker: import("../utils").WithInstall<import("vue").DefineComponent<{
-    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -20,6 +19,8 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -36,8 +37,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "clickOption" | "confirm")[], "update:modelValue" | "change" | "cancel" | "clickOption" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -57,6 +57,8 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -77,6 +79,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: import("../utils").Numeric[];
@@ -91,6 +94,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     toolbarPosition: import("./types").PickerToolbarPosition;
 }>>;
 export default Picker;
+export { pickerProps } from './Picker';
 export type { PickerProps };
 export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerToolbarPosition, PickerCancelEventParams, PickerChangeEventParams, PickerConfirmEventParams, } from './types';
 declare module 'vue' {

package/es/picker/index.mjs

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

package/es/picker/style/index.mjs

@@ -1,3 +1,10 @@
 import "../../style/base.css";
+import "../../badge/index.css";
 import "../../loading/index.css";
+import "../../sticky/index.css";
+import "../../swipe/index.css";
+import "../../swipe-item/index.css";
+import "../../tabs/index.css";
+import "../../tab/index.css";
+import "../../picker-group/index.css";
 import "../index.css";

package/es/picker/utils.d.ts

@@ -1,6 +1,8 @@
 import { type Numeric } from '../utils';
 import type { Ref } from 'vue';
 import type { PickerOption, PickerColumn, PickerFieldNames } from './types';
+declare const name: string, bem: (el?: import("../utils").Mods | undefined, mods?: import("../utils").Mods | undefined) => import("../utils").Mods, t: (path: string, ...args: unknown[]) => any;
+export { name, bem, t };
 export declare const getFirstEnabledOption: (options: PickerOption[]) => PickerOption | undefined;
 export declare function getColumnsType(columns: PickerColumn | PickerColumn[], fields: Required<PickerFieldNames>): "default" | "multiple" | "cascade";
 export declare function findIndexOfEnabledOption(options: PickerOption[], index: number): number;

package/es/picker/utils.mjs

@@ -1,4 +1,5 @@
-import { isDef, clamp, extend } from "../utils/index.mjs";
+import { isDef, clamp, extend, createNamespace } from "../utils/index.mjs";
+const [name, bem, t] = createNamespace("picker");
 const getFirstEnabledOption = (options) => options.find((option) => !option.disabled) || options[0];
 function getColumnsType(columns, fields) {
   const firstColumn = columns[0];
@@ -55,19 +56,25 @@ function getElementTranslateY(element) {
   return Number(translateY);
 }
 function assignDefaultFields(fields) {
-  return extend({
-    text: "text",
-    value: "value",
-    children: "children"
-  }, fields);
+  return extend(
+    {
+      text: "text",
+      value: "value",
+      children: "children"
+    },
+    fields
+  );
 }
 export {
   assignDefaultFields,
+  bem,
   findIndexOfEnabledOption,
   findOptionByValue,
   formatCascadeColumns,
   getColumnsType,
   getElementTranslateY,
   getFirstEnabledOption,
-  isOptionExist
+  isOptionExist,
+  name,
+  t
 };

package/es/picker-group/PickerGroup.d.ts

@@ -0,0 +1,39 @@
+import { type InjectionKey, type ExtractPropTypes } from 'vue';
+export declare type PickerGroupProvide = Record<string, string>;
+export declare const PICKER_GROUP_KEY: InjectionKey<PickerGroupProvide>;
+export declare const pickerGroupProps: {
+    tabs: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+} & {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+};
+export declare type PickerGroupProps = ExtractPropTypes<typeof pickerGroupProps>;
+declare const _default: import("vue").DefineComponent<{
+    tabs: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+} & {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    tabs: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+} & {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    tabs: string[];
+}>;
+export default _default;

package/es/picker-group/PickerGroup.mjs

@@ -0,0 +1,57 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent } from "vue";
+import { extend, makeArrayProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+import { Tab } from "../tab/index.mjs";
+import { Tabs } from "../tabs/index.mjs";
+import Toolbar, { pickerToolbarProps } from "../picker/PickerToolbar.mjs";
+const [name, bem] = createNamespace("picker-group");
+const PICKER_GROUP_KEY = Symbol(name);
+const pickerGroupProps = extend({
+  tabs: makeArrayProp()
+}, pickerToolbarProps);
+var stdin_default = defineComponent({
+  name,
+  props: pickerGroupProps,
+  emits: ["confirm", "cancel"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      children,
+      linkChildren
+    } = useChildren(PICKER_GROUP_KEY);
+    linkChildren();
+    const onConfirm = () => {
+      emit("confirm", children.map((item) => item.confirm()));
+    };
+    const onCancel = () => emit("cancel");
+    return () => {
+      var _a;
+      const childNodes = (_a = slots.default) == null ? void 0 : _a.call(slots);
+      return _createVNode("div", {
+        "class": bem()
+      }, [_createVNode(Toolbar, _mergeProps(props, {
+        "onConfirm": onConfirm,
+        "onCancel": onCancel
+      }), null), _createVNode(Tabs, {
+        "shrink": true,
+        "class": bem("tabs"),
+        "animated": true
+      }, {
+        default: () => [props.tabs.map((title, index) => _createVNode(Tab, {
+          "title": title,
+          "titleClass": bem("tab-title")
+        }, {
+          default: () => [childNodes == null ? void 0 : childNodes[index]]
+        }))]
+      })]);
+    };
+  }
+});
+export {
+  PICKER_GROUP_KEY,
+  stdin_default as default,
+  pickerGroupProps
+};

package/es/picker-group/index.css

@@ -0,0 +1 @@
+body{--van-picker-group-background: var(--van-background-2)}.van-picker-group{background:var(--van-picker-group-background)}.van-picker-group__tabs{margin-top:var(--van-padding-base)}.van-picker-group__tab-title{margin-right:16px}

package/es/picker-group/index.d.ts

@@ -0,0 +1,33 @@
+import { PickerGroupProps } from './PickerGroup';
+export declare const PickerGroup: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tabs: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+} & {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tabs: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+} & {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {
+    tabs: string[];
+}>>;
+export default PickerGroup;
+export { pickerGroupProps } from './PickerGroup';
+export type { PickerGroupProps };
+declare module 'vue' {
+    interface GlobalComponents {
+        VanPickerGroup: typeof PickerGroup;
+    }
+}

package/es/picker-group/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from "../utils/index.mjs";
+import _PickerGroup from "./PickerGroup.mjs";
+const PickerGroup = withInstall(_PickerGroup);
+var stdin_default = PickerGroup;
+import { pickerGroupProps } from "./PickerGroup.mjs";
+export {
+  PickerGroup,
+  stdin_default as default,
+  pickerGroupProps
+};

package/es/picker-group/style/index.d.ts

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

package/es/picker-group/style/index.mjs

@@ -0,0 +1,9 @@
+import "../../style/base.css";
+import "../../badge/index.css";
+import "../../sticky/index.css";
+import "../../swipe/index.css";
+import "../../swipe-item/index.css";
+import "../../tabs/index.css";
+import "../../tab/index.css";
+import "../../picker/index.css";
+import "../index.css";

package/es/popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import { type PropType, type CSSProperties, type ExtractPropTypes } from 'vue';
 import { PopoverTheme, PopoverAction, PopoverTrigger, PopoverPlacement } from './types';
-declare const popoverProps: {
+export declare const popoverProps: {
     show: BooleanConstructor;
     theme: {
         type: PropType<PopoverTheme>;

package/es/popover/Popover.mjs

@@ -1,5 +1,5 @@
 import { mergeProps as _mergeProps, Fragment as _Fragment, createVNode as _createVNode } from "vue";
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineComponent } from "vue";
+import { ref, watch, nextTick, onMounted, watchEffect, onBeforeUnmount, defineComponent } from "vue";
 import { createPopper, offsetModifier } from "@vant/popperjs";
 import { pick, extend, truthProp, numericProp, unknownProp, BORDER_BOTTOM, makeArrayProp, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { useClickAway } from "@vant/use";
@@ -41,24 +41,26 @@ var stdin_default = defineComponent({
     attrs
   }) {
     let popper;
+    const popupRef = ref();
     const wrapperRef = ref();
     const popoverRef = ref();
+    const getPopoverOptions = () => ({
+      placement: props.placement,
+      modifiers: [{
+        name: "computeStyles",
+        options: {
+          adaptive: false,
+          gpuAcceleration: false
+        }
+      }, extend({}, offsetModifier, {
+        options: {
+          offset: props.offset
+        }
+      })]
+    });
     const createPopperInstance = () => {
       if (wrapperRef.value && popoverRef.value) {
-        return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
-          placement: props.placement,
-          modifiers: [{
-            name: "computeStyles",
-            options: {
-              adaptive: false,
-              gpuAcceleration: false
-            }
-          }, extend({}, offsetModifier, {
-            options: {
-              offset: props.offset
-            }
-          })]
-        });
+        return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, getPopoverOptions());
       }
       return null;
     };
@@ -70,9 +72,7 @@ var stdin_default = defineComponent({
         if (!popper) {
           popper = createPopperInstance();
         } else {
-          popper.setOptions({
-            placement: props.placement
-          });
+          popper.setOptions(getPopoverOptions());
         }
       });
     };
@@ -82,10 +82,6 @@ var stdin_default = defineComponent({
         updateShow(!props.show);
       }
     };
-    const onTouchstart = (event) => {
-      event.stopPropagation();
-      emit("touchstart", event);
-    };
     const onClickAction = (action, index) => {
       if (action.disabled) {
         return;
@@ -96,7 +92,7 @@ var stdin_default = defineComponent({
       }
     };
     const onClickAway = () => {
-      if (props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
+      if (props.show && props.closeOnClickOutside && (!props.overlay || props.closeOnClickOverlay)) {
         updateShow(false);
       }
     };
@@ -136,15 +132,21 @@ var stdin_default = defineComponent({
         "onClick": () => onClickAction(action, index)
       }, [renderActionContent(action, index)]);
     };
-    onMounted(updateLocation);
+    onMounted(() => {
+      updateLocation();
+      watchEffect(() => {
+        var _a;
+        popupRef.value = (_a = popoverRef.value) == null ? void 0 : _a.popupRef.value;
+      });
+    });
     onBeforeUnmount(() => {
       if (popper) {
         popper.destroy();
         popper = null;
       }
     });
-    watch(() => [props.show, props.placement], updateLocation);
-    useClickAway(wrapperRef, onClickAway, {
+    watch(() => [props.show, props.offset, props.placement], updateLocation);
+    useClickAway([wrapperRef, popupRef], onClickAway, {
       eventName: "touchstart"
     });
     return () => {
@@ -159,7 +161,6 @@ var stdin_default = defineComponent({
         "position": "",
         "transition": "van-popover-zoom",
         "lockScroll": false,
-        "onTouchstart": onTouchstart,
         "onUpdate:show": updateShow
       }, attrs, pick(props, popupProps)), {
         default: () => [props.showArrow && _createVNode("div", {
@@ -173,5 +174,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  popoverProps
 };

package/es/popover/index.d.ts

@@ -111,6 +111,7 @@ export declare const Popover: import("../utils").WithInstall<import("vue").Defin
     placement: import("./types").PopoverPlacement;
 }>>;
 export default Popover;
+export { popoverProps } from './Popover';
 export type { PopoverProps } from './Popover';
 export type { PopoverTheme, PopoverAction, PopoverTrigger, PopoverPlacement, } from './types';
 declare module 'vue' {

package/es/popover/index.mjs

@@ -2,7 +2,9 @@ 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
+  stdin_default as default,
+  popoverProps
 };

package/es/popup/Popup.d.ts

@@ -1,6 +1,6 @@
 import { type CSSProperties, type ExtractPropTypes } from 'vue';
 import type { PopupPosition, PopupCloseIconPosition } from './types';
-declare const popupProps: {
+export declare const popupProps: {
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -92,7 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, 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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -139,8 +139,8 @@ declare const _default: import("vue").DefineComponent<{
     safeAreaInsetBottom: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...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;

package/es/popup/Popup.mjs

@@ -7,6 +7,7 @@ import { useExpose } from "../composables/use-expose.mjs";
 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 { Icon } from "../icon/index.mjs";
 import { Overlay } from "../overlay/index.mjs";
 const popupProps = extend({}, popupSharedProps, {
@@ -22,7 +23,6 @@ const popupProps = extend({}, popupSharedProps, {
   safeAreaInsetBottom: Boolean
 });
 const [name, bem] = createNamespace("popup");
-let globalZIndex = 2e3;
 var stdin_default = defineComponent({
   name,
   inheritAttrs: false,
@@ -50,11 +50,8 @@ var stdin_default = defineComponent({
     });
     const open = () => {
       if (!opened) {
-        if (props.zIndex !== void 0) {
-          globalZIndex = +props.zIndex;
-        }
         opened = true;
-        zIndex.value = ++globalZIndex;
+        zIndex.value = props.zIndex !== void 0 ? +props.zIndex : useGlobalZIndex();
         emit("open");
       }
     };
@@ -83,6 +80,8 @@ var stdin_default = defineComponent({
           "zIndex": zIndex.value,
           "duration": props.duration,
           "customStyle": props.overlayStyle,
+          "role": props.closeOnClickOverlay ? "button" : void 0,
+          "tabindex": props.closeOnClickOverlay ? 0 : void 0,
           "onClick": onClickOverlay
         }, {
           default: slots["overlay-content"]
@@ -119,6 +118,8 @@ var stdin_default = defineComponent({
       return _withDirectives(_createVNode("div", _mergeProps({
         "ref": popupRef,
         "style": style.value,
+        "role": "dialog",
+        "tabindex": 0,
         "class": [bem({
           round,
           [position]: position
@@ -201,5 +202,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  popupProps
 };

package/es/popup/index.css

@@ -1 +1 @@
-body{--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;background:var(--van-popup-background);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-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)}
+body{--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)}

package/es/popup/index.d.ts

@@ -43,7 +43,7 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     };
     safeAreaInsetTop: BooleanConstructor;
     safeAreaInsetBottom: BooleanConstructor;
-}, () => JSX.Element, unknown, {}, {}, 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").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     overlay: {
@@ -90,8 +90,8 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     safeAreaInsetBottom: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
-    onOpen?: ((...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;
@@ -114,6 +114,7 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     safeAreaInsetTop: boolean;
 }>>;
 export default Popup;
+export { popupProps } from './Popup';
 export type { PopupProps } from './Popup';
 export type { PopupPosition, PopupInstance, PopupCloseIconPosition, } from './types';
 declare module 'vue' {

package/es/popup/index.mjs

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

package/es/popup/shared.mjs

@@ -13,7 +13,9 @@ const popupSharedProps = {
   transitionAppear: Boolean,
   closeOnClickOverlay: truthProp
 };
-const popupSharedPropKeys = Object.keys(popupSharedProps);
+const popupSharedPropKeys = Object.keys(
+  popupSharedProps
+);
 export {
   popupSharedPropKeys,
   popupSharedProps