import { ref, reactive, withKeys, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue"; import { noop, pick, extend, addUnit, truthProp, isFunction, BORDER_TOP, BORDER_LEFT, unknownProp, numericProp, makeStringProp, callInterceptor, createNamespace } from "../utils/index.mjs"; import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs"; import { Popup } from "../popup/index.mjs"; import { Button } from "../button/index.mjs"; import { ActionBar } from "../action-bar/index.mjs"; import { ActionBarButton } from "../action-bar-button/index.mjs"; const [name, bem, t] = createNamespace("dialog"); const dialogProps = extend({}, popupSharedProps, { title: String, theme: String, width: numericProp, message: [String, Function], callback: Function, allowHtml: Boolean, className: unknownProp, transition: makeStringProp("van-dialog-bounce"), messageAlign: String, closeOnPopstate: truthProp, showCancelButton: Boolean, cancelButtonText: String, cancelButtonColor: String, cancelButtonDisabled: Boolean, confirmButtonText: String, confirmButtonColor: String, confirmButtonDisabled: Boolean, showConfirmButton: truthProp, closeOnClickOverlay: Boolean, keyboardEnabled: truthProp }); const popupInheritKeys = [...popupSharedPropKeys, "transition", "closeOnPopstate"]; var stdin_default = defineComponent({ name, props: dialogProps, emits: ["confirm", "cancel", "keydown", "update:show"], setup(props, { emit, slots }) { const root = ref(); const loading = reactive({ confirm: false, cancel: false }); const updateShow = (value) => emit("update:show", value); const close = (action) => { var _a; updateShow(false); (_a = props.callback) == null ? void 0 : _a.call(props, action); }; const getActionHandler = (action) => () => { if (!props.show) { return; } emit(action); if (props.beforeClose) { loading[action] = true; callInterceptor(props.beforeClose, { args: [action], done() { close(action); loading[action] = false; }, canceled() { loading[action] = false; } }); } else { close(action); } }; const onCancel = getActionHandler("cancel"); const onConfirm = getActionHandler("confirm"); const onKeydown = withKeys((event) => { var _a, _b; if (!props.keyboardEnabled) { return; } if (event.target !== ((_b = (_a = root.value) == null ? void 0 : _a.popupRef) == null ? void 0 : _b.value)) { return; } const onEventType = { Enter: props.showConfirmButton ? onConfirm : noop, Escape: props.showCancelButton ? onCancel : noop }; onEventType[event.key](); emit("keydown", event); }, ["enter", "esc"]); const renderTitle = () => { const title = slots.title ? slots.title() : props.title; if (title) { return _createVNode("div", { "class": bem("header", { isolated: !props.message && !slots.default }) }, [title]); } }; const renderMessage = (hasTitle) => { const { message, allowHtml, messageAlign } = props; const classNames = bem("message", { "has-title": hasTitle, [messageAlign]: messageAlign }); const content = isFunction(message) ? message() : message; if (allowHtml && typeof content === "string") { return _createVNode("div", { "class": classNames, "innerHTML": content }, null); } return _createVNode("div", { "class": classNames }, [content]); }; const renderContent = () => { if (slots.default) { return _createVNode("div", { "class": bem("content") }, [slots.default()]); } const { title, message, allowHtml } = props; if (message) { const hasTitle = !!(title || slots.title); return _createVNode("div", { "key": allowHtml ? 1 : 0, "class": bem("content", { isolated: !hasTitle }) }, [renderMessage(hasTitle)]); } }; const renderButtons = () => _createVNode("div", { "class": [BORDER_TOP, bem("footer")] }, [props.showCancelButton && _createVNode(Button, { "size": "large", "text": props.cancelButtonText || t("cancel"), "class": bem("cancel"), "style": { color: props.cancelButtonColor }, "loading": loading.cancel, "disabled": props.cancelButtonDisabled, "onClick": onCancel }, null), props.showConfirmButton && _createVNode(Button, { "size": "large", "text": props.confirmButtonText || t("confirm"), "class": [bem("confirm"), { [BORDER_LEFT]: props.showCancelButton }], "style": { color: props.confirmButtonColor }, "loading": loading.confirm, "disabled": props.confirmButtonDisabled, "onClick": onConfirm }, null)]); const renderRoundButtons = () => _createVNode(ActionBar, { "class": bem("footer") }, { default: () => [props.showCancelButton && _createVNode(ActionBarButton, { "type": "warning", "text": props.cancelButtonText || t("cancel"), "class": bem("cancel"), "color": props.cancelButtonColor, "loading": loading.cancel, "disabled": props.cancelButtonDisabled, "onClick": onCancel }, null), props.showConfirmButton && _createVNode(ActionBarButton, { "type": "danger", "text": props.confirmButtonText || t("confirm"), "class": bem("confirm"), "color": props.confirmButtonColor, "loading": loading.confirm, "disabled": props.confirmButtonDisabled, "onClick": onConfirm }, null)] }); const renderFooter = () => { if (slots.footer) { return slots.footer(); } return props.theme === "round-button" ? renderRoundButtons() : renderButtons(); }; return () => { const { width, title, theme, message, className } = props; return _createVNode(Popup, _mergeProps({ "ref": root, "role": "dialog", "class": [bem([theme]), className], "style": { width: addUnit(width) }, "tabindex": 0, "aria-labelledby": title || message, "onKeydown": onKeydown, "onUpdate:show": updateShow }, pick(props, popupInheritKeys)), { default: () => [renderTitle(), renderContent(), renderFooter()] }); }; } }); export { stdin_default as default, dialogProps };