import { watch, onMounted, onUnmounted, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue"; import { pick, isDef, unknownProp, numericProp, makeStringProp, makeNumberProp, createNamespace } from "../utils/index.mjs"; import { lockClick } from "./lock-click.mjs"; import { Icon } from "../icon/index.mjs"; import { Popup } from "../popup/index.mjs"; import { Loading } from "../loading/index.mjs"; const [name, bem] = createNamespace("toast"); const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay", "zIndex"]; const toastProps = { icon: String, show: Boolean, type: makeStringProp("text"), overlay: Boolean, message: numericProp, iconSize: numericProp, duration: makeNumberProp(2e3), position: makeStringProp("middle"), teleport: [String, Object], wordBreak: String, className: unknownProp, iconPrefix: String, transition: makeStringProp("van-fade"), loadingType: String, forbidClick: Boolean, overlayClass: unknownProp, overlayStyle: Object, closeOnClick: Boolean, closeOnClickOverlay: Boolean, zIndex: numericProp }; var stdin_default = defineComponent({ name, props: toastProps, emits: ["update:show"], setup(props, { emit, slots }) { let timer; let clickable = false; const toggleClickable = () => { const newValue = props.show && props.forbidClick; if (clickable !== newValue) { clickable = newValue; lockClick(clickable); } }; const updateShow = (show) => emit("update:show", show); const onClick = () => { if (props.closeOnClick) { updateShow(false); } }; const clearTimer = () => clearTimeout(timer); const renderIcon = () => { const { icon, type, iconSize, iconPrefix, loadingType } = props; const hasIcon = icon || type === "success" || type === "fail"; if (hasIcon) { return _createVNode(Icon, { "name": icon || type, "size": iconSize, "class": bem("icon"), "classPrefix": iconPrefix }, null); } if (type === "loading") { return _createVNode(Loading, { "class": bem("loading"), "size": iconSize, "type": loadingType }, null); } }; const renderMessage = () => { const { type, message } = props; if (slots.message) { return _createVNode("div", { "class": bem("text") }, [slots.message()]); } if (isDef(message) && message !== "") { return type === "html" ? _createVNode("div", { "key": 0, "class": bem("text"), "innerHTML": String(message) }, null) : _createVNode("div", { "class": bem("text") }, [message]); } }; watch(() => [props.show, props.forbidClick], toggleClickable); watch(() => [props.show, props.type, props.message, props.duration], () => { clearTimer(); if (props.show && props.duration > 0) { timer = setTimeout(() => { updateShow(false); }, props.duration); } }); onMounted(toggleClickable); onUnmounted(toggleClickable); return () => _createVNode(Popup, _mergeProps({ "class": [bem([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, { [props.type]: !props.icon }]), props.className], "lockScroll": false, "onClick": onClick, "onClosed": clearTimer, "onUpdate:show": updateShow }, pick(props, popupInheritProps)), { default: () => [renderIcon(), renderMessage()] }); } }); export { stdin_default as default, toastProps };