Newer
Older
vmk-ui-kit / src / vue / components / GnConfirmDialog.js
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 1 KB Add GnConfirmDialog and confirmPopup helper
/**
 * GnConfirmDialog — confirmation dialog.
 *
 * API-compatible with gnexus-ui-kit GnConfirmDialog.
 *
 * @typedef {Object} GnConfirmDialogProps
 * @property {boolean} [open=false]
 * @property {string} [title='Requires confirmation']
 * @property {string} [message='']
 * @property {string} [confirmText='YES']
 * @property {string} [cancelText='NO']
 * @property {string} [confirmVariant='warning']
 *
 * @slots default - Custom body content (overrides message)
 * @emits update:open
 * @emits confirm
 * @emits cancel
 */

import { defineComponent, h } from "vue";
import GnButton from "./GnButton.js";
import GnModal from "./GnModal.js";

export default defineComponent({
	name: "GnConfirmDialog",
	props: {
		open: { type: Boolean, default: false },
		title: { type: String, default: "Requires confirmation" },
		message: { type: String, default: "" },
		confirmText: { type: String, default: "YES" },
		cancelText: { type: String, default: "NO" },
		confirmVariant: { type: String, default: "warning" }
	},
	emits: ["update:open", "confirm", "cancel"],
	setup(props, { emit, slots }) {
		const close = () => emit("update:open", false);
		const cancel = () => {
			emit("cancel");
			close();
		};
		const confirm = () => {
			emit("confirm");
			close();
		};

		return () => h(GnModal, {
			open: props.open,
			title: props.title,
			"onUpdate:open": value => emit("update:open", value)
		}, {
			default: () => slots.default?.() || (props.message ? h("p", {}, props.message) : null),
			actions: () => [
				h(GnButton, { variant: "primary", onClick: cancel }, () => props.cancelText),
				h(GnButton, { variant: props.confirmVariant, onClick: confirm }, () => props.confirmText)
			]
		});
	}
});