first commit
This commit is contained in:
221
node_modules/vant/es/popup/Popup.mjs
generated
vendored
Normal file
221
node_modules/vant/es/popup/Popup.mjs
generated
vendored
Normal file
@@ -0,0 +1,221 @@
|
||||
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 { popupSharedProps } from "./shared.mjs";
|
||||
import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
|
||||
import { useEventListener } from "@vant/use";
|
||||
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 { useScopeId } from "../composables/use-scope-id.mjs";
|
||||
import { Icon } from "../icon/index.mjs";
|
||||
import { Overlay } from "../overlay/index.mjs";
|
||||
const popupProps = extend({}, popupSharedProps, {
|
||||
round: Boolean,
|
||||
position: makeStringProp("center"),
|
||||
closeIcon: makeStringProp("cross"),
|
||||
closeable: Boolean,
|
||||
transition: String,
|
||||
iconPrefix: String,
|
||||
closeOnPopstate: Boolean,
|
||||
closeIconPosition: makeStringProp("top-right"),
|
||||
destroyOnClose: Boolean,
|
||||
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) {
|
||||
const overlayProps = extend({
|
||||
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
|
||||
}, props.overlayProps);
|
||||
return _createVNode(Overlay, _mergeProps(overlayProps, 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 {
|
||||
destroyOnClose,
|
||||
round,
|
||||
position,
|
||||
safeAreaInsetTop,
|
||||
safeAreaInsetBottom,
|
||||
show
|
||||
} = props;
|
||||
if (!show && destroyOnClose) {
|
||||
return;
|
||||
}
|
||||
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, 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()]);
|
||||
};
|
||||
}
|
||||
});
|
||||
export {
|
||||
stdin_default as default,
|
||||
popupProps
|
||||
};
|
||||
Reference in New Issue
Block a user