import { r as ref, V as onDeactivated, M as onBeforeUnmount, w as watch, d as defineComponent, c as createVNode, L as Transition, T as Teleport, h as withDirectives, v as vShow, a as computed, z as nextTick, o as onMounted, p as onActivated, U as provide, F as Fragment, m as mergeProps } from "./index-5e4623ce.js"; import { n as numericProp, t as truthProp, G as unknownProp, a3 as TAP_OFFSET, a4 as onMountedOrActivated, a0 as getScrollParent, p as preventDefault, c as createNamespace, D as useEventListener, e as extend, g as getZIndexStyle, k as isDef, w as withInstall, z as makeStringProp, H as HAPTICS_FEEDBACK, I as Icon } from "./index-487cde8c.js"; import { u as useExpose, a as useScopeId } from "./use-scope-id-0b5b8615.js"; import { P as POPUP_TOGGLE_KEY, c as callInterceptor } from "./on-popup-reopen-c5ca1603.js"; let globalZIndex = 2e3; const useGlobalZIndex = () => ++globalZIndex; const popupSharedProps = { // whether to show popup show: Boolean, // z-index zIndex: numericProp, // whether to show overlay overlay: truthProp, // transition duration duration: numericProp, // teleport teleport: [String, Object], // prevent body scroll lockScroll: truthProp, // whether to lazy render lazyRender: truthProp, // callback function before close beforeClose: Function, // overlay custom style overlayStyle: Object, // overlay custom class name overlayClass: unknownProp, // Initial rendering animation transitionAppear: Boolean, // whether to close popup when overlay is clicked closeOnClickOverlay: truthProp }; const popupSharedPropKeys = Object.keys( popupSharedProps ); function getDirection(x, y) { if (x > y) { return "horizontal"; } if (y > x) { return "vertical"; } return ""; } function useTouch() { const startX = ref(0); const startY = ref(0); const deltaX = ref(0); const deltaY = ref(0); const offsetX = ref(0); const offsetY = ref(0); const direction = ref(""); const isTap = ref(true); const isVertical = () => direction.value === "vertical"; const isHorizontal = () => direction.value === "horizontal"; const reset = () => { deltaX.value = 0; deltaY.value = 0; offsetX.value = 0; offsetY.value = 0; direction.value = ""; isTap.value = true; }; const start = (event) => { reset(); startX.value = event.touches[0].clientX; startY.value = event.touches[0].clientY; }; const move = (event) => { const touch = event.touches[0]; deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value; deltaY.value = touch.clientY - startY.value; offsetX.value = Math.abs(deltaX.value); offsetY.value = Math.abs(deltaY.value); const LOCK_DIRECTION_DISTANCE = 10; if (!direction.value || offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE) { direction.value = getDirection(offsetX.value, offsetY.value); } if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) { isTap.value = false; } }; return { move, start, reset, startX, startY, deltaX, deltaY, offsetX, offsetY, direction, isVertical, isHorizontal, isTap }; } let totalLockCount = 0; const BODY_LOCK_CLASS = "van-overflow-hidden"; function useLockScroll(rootRef, shouldLock) { const touch = useTouch(); const DIRECTION_UP = "01"; const DIRECTION_DOWN = "10"; const onTouchMove = (event) => { touch.move(event); const direction = touch.deltaY.value > 0 ? DIRECTION_DOWN : DIRECTION_UP; const el = getScrollParent( event.target, rootRef.value ); const { scrollHeight, offsetHeight, scrollTop } = el; let status = "11"; if (scrollTop === 0) { status = offsetHeight >= scrollHeight ? "00" : "01"; } else if (scrollTop + offsetHeight >= scrollHeight) { status = "10"; } if (status !== "11" && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) { preventDefault(event, true); } }; const lock = () => { document.addEventListener("touchstart", touch.start); document.addEventListener("touchmove", onTouchMove, { passive: false }); if (!totalLockCount) { document.body.classList.add(BODY_LOCK_CLASS); } totalLockCount++; }; const unlock = () => { if (totalLockCount) { document.removeEventListener("touchstart", touch.start); document.removeEventListener("touchmove", onTouchMove); totalLockCount--; if (!totalLockCount) { document.body.classList.remove(BODY_LOCK_CLASS); } } }; const init = () => shouldLock() && lock(); const destroy = () => shouldLock() && unlock(); onMountedOrActivated(init); onDeactivated(destroy); onBeforeUnmount(destroy); watch(shouldLock, (value) => { value ? lock() : unlock(); }); } function useLazyRender(show) { const inited = ref(false); watch( show, (value) => { if (value) { inited.value = value; } }, { immediate: true } ); return (render) => () => inited.value ? render() : null; } const [name$1, bem$1] = createNamespace("overlay"); const overlayProps = { show: Boolean, zIndex: numericProp, duration: numericProp, className: unknownProp, lockScroll: truthProp, lazyRender: truthProp, customStyle: Object, teleport: [String, Object] }; var stdin_default$1 = defineComponent({ name: name$1, props: overlayProps, setup(props, { slots }) { const root = ref(); const lazyRender = useLazyRender(() => props.show || !props.lazyRender); const onTouchMove = (event) => { if (props.lockScroll) { preventDefault(event, true); } }; const renderOverlay = lazyRender(() => { var _a; const style = extend(getZIndexStyle(props.zIndex), props.customStyle); if (isDef(props.duration)) { style.animationDuration = `${props.duration}s`; } return withDirectives(createVNode("div", { "ref": root, "style": style, "class": [bem$1(), props.className] }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[vShow, props.show]]); }); useEventListener("touchmove", onTouchMove, { target: root }); return () => { const Content = createVNode(Transition, { "name": "van-fade", "appear": true }, { default: renderOverlay }); if (props.teleport) { return createVNode(Teleport, { "to": props.teleport }, { default: () => [Content] }); } return Content; }; } }); const Overlay = withInstall(stdin_default$1); const popupProps = extend({}, popupSharedProps, { round: Boolean, position: makeStringProp("center"), closeIcon: makeStringProp("cross"), closeable: Boolean, transition: String, iconPrefix: String, closeOnPopstate: Boolean, closeIconPosition: makeStringProp("top-right"), safeAreaInsetTop: Boolean, safeAreaInsetBottom: Boolean }); const [name, bem] = createNamespace("popup"); var stdin_default = defineComponent({ name, inheritAttrs: false, props: popupProps, emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"], setup(props, { emit, attrs, slots }) { let opened; let shouldReopen; const zIndex = ref(); const popupRef = ref(); const lazyRender = useLazyRender(() => props.show || !props.lazyRender); const style = computed(() => { const style2 = { zIndex: zIndex.value }; if (isDef(props.duration)) { const key = props.position === "center" ? "animationDuration" : "transitionDuration"; style2[key] = `${props.duration}s`; } return style2; }); const open = () => { if (!opened) { opened = true; zIndex.value = props.zIndex !== void 0 ? +props.zIndex : useGlobalZIndex(); emit("open"); } }; const close = () => { if (opened) { callInterceptor(props.beforeClose, { done() { opened = false; emit("close"); emit("update:show", false); } }); } }; const onClickOverlay = (event) => { emit("clickOverlay", event); if (props.closeOnClickOverlay) { close(); } }; const renderOverlay = () => { if (props.overlay) { return createVNode(Overlay, mergeProps({ "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(), { "onClick": onClickOverlay }), { default: slots["overlay-content"] }); } }; const onClickCloseIcon = (event) => { emit("clickCloseIcon", event); close(); }; const renderCloseIcon = () => { if (props.closeable) { return createVNode(Icon, { "role": "button", "tabindex": 0, "name": props.closeIcon, "class": [bem("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK], "classPrefix": props.iconPrefix, "onClick": onClickCloseIcon }, null); } }; let timer; const onOpened = () => { if (timer) clearTimeout(timer); timer = setTimeout(() => { emit("opened"); }); }; const onClosed = () => emit("closed"); const onKeydown = (event) => emit("keydown", event); const renderPopup = lazyRender(() => { var _a; const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props; return withDirectives(createVNode("div", mergeProps({ "ref": popupRef, "style": style.value, "role": "dialog", "tabindex": 0, "class": [bem({ round, [position]: position }), { "van-safe-area-top": safeAreaInsetTop, "van-safe-area-bottom": safeAreaInsetBottom }], "onKeydown": onKeydown }, attrs, useScopeId()), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon()]), [[vShow, props.show]]); }); const renderTransition = () => { const { position, transition, transitionAppear } = props; const name2 = position === "center" ? "van-fade" : `van-popup-slide-${position}`; return createVNode(Transition, { "name": transition || name2, "appear": transitionAppear, "onAfterEnter": onOpened, "onAfterLeave": onClosed }, { default: renderPopup }); }; watch(() => props.show, (show) => { if (show && !opened) { open(); if (attrs.tabindex === 0) { nextTick(() => { var _a; (_a = popupRef.value) == null ? void 0 : _a.focus(); }); } } if (!show && opened) { opened = false; emit("close"); } }); useExpose({ popupRef }); useLockScroll(popupRef, () => props.show && props.lockScroll); useEventListener("popstate", () => { if (props.closeOnPopstate) { close(); shouldReopen = false; } }); onMounted(() => { if (props.show) { open(); } }); onActivated(() => { if (shouldReopen) { emit("update:show", true); shouldReopen = false; } }); onDeactivated(() => { if (props.show && props.teleport) { close(); shouldReopen = true; } }); provide(POPUP_TOGGLE_KEY, () => props.show); return () => { if (props.teleport) { return createVNode(Teleport, { "to": props.teleport }, { default: () => [renderOverlay(), renderTransition()] }); } return createVNode(Fragment, null, [renderOverlay(), renderTransition()]); }; } }); const Popup = withInstall(stdin_default); export { Overlay as O, Popup as P, popupSharedPropKeys as a, popupSharedProps as p, useTouch as u };