| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427 |
- 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
- };
|