ckgl/node_modules/vant/es/dialog/Dialog.mjs
2024-12-21 13:52:42 +08:00

222 lines
6.7 KiB
JavaScript

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