@falcon-ui/falcon-ui 1.0.0

package/cjs/dialog-CJU00aEV.cjs

@@ -0,0 +1,614 @@
+const require_chunk = require("./chunk-D4y6LrGi.cjs");
+let vue = require("vue");
+let element_plus = require("element-plus");
+let __element_plus_icons_vue = require("@element-plus/icons-vue");
+var defaultNamespace = "fl";
+var statePrefix = "is-";
+var buildBemName = (namespace, block, blockSuffix = "", element = "", modifier = "") => {
+	let className = `${namespace}-${block}`;
+	if (blockSuffix) className += `-${blockSuffix}`;
+	if (element) className += `__${element}`;
+	if (modifier) className += `--${modifier}`;
+	return className;
+};
+const useNamespace = (block, namespace = defaultNamespace) => {
+	const b = (blockSuffix = "") => buildBemName(namespace, block, blockSuffix);
+	const e = (element) => element ? buildBemName(namespace, block, "", element) : "";
+	const m = (modifier) => modifier ? buildBemName(namespace, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => {
+		if (!blockSuffix || !element) return "";
+		return buildBemName(namespace, block, blockSuffix, element);
+	};
+	const em = (element, modifier) => {
+		if (!element || !modifier) return "";
+		return buildBemName(namespace, block, "", element, modifier);
+	};
+	const bm = (blockSuffix, modifier) => {
+		if (!blockSuffix || !modifier) return "";
+		return buildBemName(namespace, block, blockSuffix, "", modifier);
+	};
+	const bem = (blockSuffix, element, modifier) => {
+		if (!blockSuffix && !element && !modifier) return b();
+		return buildBemName(namespace, block, blockSuffix, element, modifier);
+	};
+	const is = (name, state = true) => state ? `${statePrefix}${name}` : "";
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is
+	};
+};
+const mergeComponentExpose = (vm, exposed, extras = {}) => {
+	if (!vm?.exposed || !exposed || typeof exposed !== "object" && typeof exposed !== "function") return;
+	Object.assign(vm.exposed, extras, exposed);
+};
+const invokeListener = (listener, ...args) => {
+	if (typeof listener === "function") {
+		listener(...args);
+		return;
+	}
+	if (!Array.isArray(listener)) return;
+	for (const item of listener) if (typeof item === "function") item(...args);
+};
+const withInstall = (component) => {
+	const installable = component;
+	installable.install = (app) => {
+		if (!component.name) return;
+		app.component(component.name, component);
+	};
+	return installable;
+};
+const useMergedAttrs = ({ attrs, block, listenerName, onListener }) => {
+	const className = useNamespace(block).b();
+	return { mergedAttrs: (0, vue.computed)(() => {
+		const next = { ...attrs };
+		const originalListener = next[listenerName];
+		next.class = [className, next.class];
+		next[listenerName] = (...args) => {
+			onListener?.(...args);
+			invokeListener(originalListener, ...args);
+		};
+		return next;
+	}) };
+};
+const useMergedExpose = (extras) => {
+	const vm = (0, vue.getCurrentInstance)();
+	const changeRef = (exposed) => {
+		mergeComponentExpose(vm, exposed, extras);
+	};
+	return { changeRef };
+};
+const useClearableState = ({ attrs, isError, resolveClearValue = () => void 0 }) => {
+	const resolveClearable = () => {
+		const candidate = attrs.clearable;
+		if (typeof candidate === "boolean") return candidate;
+		return true;
+	};
+	const clearModelValue = () => {
+		invokeListener(attrs["onUpdate:modelValue"], resolveClearValue());
+	};
+	(0, vue.watch)(isError, (active, previousActive) => {
+		if (active && previousActive !== true) clearModelValue();
+	}, { immediate: true });
+	return {
+		clearModelValue,
+		resolveClearable
+	};
+};
+var componentVNodeShapeFlag = 6;
+var managedDialogPropKeys = new Set([
+	"modelValue",
+	"title",
+	"showClose",
+	"closeOnClickModal",
+	"closeOnPressEscape",
+	"onCancel",
+	"onConfirm",
+	"onUpdate:modelValue",
+	"onUpdateModelValue"
+]);
+var activeDialogInstance = null;
+var dialogSeed = 0;
+var dialogComponentLoader = null;
+var loadDialogComponent = async () => {
+	if (!dialogComponentLoader) dialogComponentLoader = Promise.resolve().then(() => require("./dialog-DcH26KbE.cjs")).then((module$1) => module$1.default);
+	return dialogComponentLoader;
+};
+var toDialogRejectAction = (action) => action === "confirm" ? "close" : action;
+var resolveAppendTarget = (appendTo) => {
+	if (typeof document === "undefined") throw new Error("[useDialog] document is not available in current runtime.");
+	if (appendTo instanceof HTMLElement) return appendTo;
+	if (typeof appendTo === "string") {
+		const node = document.querySelector(appendTo);
+		if (node instanceof HTMLElement) return node;
+	}
+	return document.body;
+};
+var sanitizeDialogProps = (dialogProps) => {
+	if (!dialogProps) return {};
+	const nextProps = {};
+	for (const [key, value] of Object.entries(dialogProps)) if (!managedDialogPropKeys.has(key)) nextProps[key] = value;
+	return nextProps;
+};
+var resolveMessageContent = (message) => {
+	if (typeof message === "function") return message();
+	return message;
+};
+var isComponentVNode = (value) => {
+	if (!(0, vue.isVNode)(value)) return false;
+	return (value.shapeFlag & componentVNodeShapeFlag) !== 0;
+};
+var injectPayloadTargetRef = (messageContent, payloadTargetRef) => {
+	if (!isComponentVNode(messageContent)) return messageContent;
+	return (0, vue.cloneVNode)(messageContent, { ref: payloadTargetRef }, true);
+};
+var resolvePayloadByMethod = async (options, payloadTargetRef) => {
+	const payloadMethod = options.payloadMethod;
+	if (!payloadMethod) return;
+	const targetInstance = payloadTargetRef.value;
+	if (!targetInstance) throw new Error(`[useDialog] payload target is not available for method "${payloadMethod}".`);
+	const method = targetInstance[payloadMethod];
+	if (typeof method !== "function") throw new Error(`[useDialog] payload method "${payloadMethod}" is not a function.`);
+	return await method(...options.payloadMethodArgs ?? []);
+};
+var resolveConfirmPayload = async (options, payloadTargetRef) => {
+	if (options.payloadResolver) return await options.payloadResolver();
+	if (options.payloadMethod) return await resolvePayloadByMethod(options, payloadTargetRef);
+};
+var resolveBeforeClose = async (beforeClose, action) => {
+	if (!beforeClose) return true;
+	try {
+		return await beforeClose(action) !== false;
+	} catch {
+		return false;
+	}
+};
+var open = (options = {}) => {
+	activeDialogInstance?.close("closeAll");
+	const appendTarget = resolveAppendTarget(options.appendTo);
+	const container = document.createElement("div");
+	appendTarget.appendChild(container);
+	const instanceId = ++dialogSeed;
+	return new Promise((resolve, reject) => {
+		let isSettled = false;
+		let isSettling = false;
+		let skipNextModelUpdate = false;
+		let pendingModelUpdateAction = null;
+		const payloadTargetRef = (0, vue.ref)(null);
+		const cleanup = () => {
+			(0, vue.render)(null, container);
+			container.remove();
+			if (activeDialogInstance?.id === instanceId) activeDialogInstance = null;
+		};
+		const settle = async (action) => {
+			if (isSettled || isSettling) return;
+			isSettling = true;
+			try {
+				if (action === "confirm") {
+					const payload = await resolveConfirmPayload(options, payloadTargetRef);
+					if (isSettled) return;
+					isSettled = true;
+					options.onAction?.(action);
+					if (payload === void 0) resolve({ action: "confirm" });
+					else resolve({
+						action: "confirm",
+						data: payload
+					});
+				} else {
+					isSettled = true;
+					options.onAction?.(action);
+					reject({ action: toDialogRejectAction(action) });
+				}
+				cleanup();
+			} catch (error) {
+				isSettled = true;
+				cleanup();
+				reject(error);
+			} finally {
+				isSettling = false;
+			}
+		};
+		const requestClose = async (action, force = false) => {
+			if (isSettled) return;
+			if (!force) {
+				if (!await resolveBeforeClose(options.beforeClose, action)) {
+					skipNextModelUpdate = action === "cancel" || action === "confirm";
+					return;
+				}
+			}
+			settle(action);
+		};
+		const handleCancel = () => {
+			pendingModelUpdateAction = "cancel";
+			requestClose("cancel");
+		};
+		const handleConfirm = () => {
+			pendingModelUpdateAction = "confirm";
+			requestClose("confirm");
+		};
+		const handleModelValueUpdate = (value) => {
+			if (value || isSettled) return;
+			if (skipNextModelUpdate) {
+				skipNextModelUpdate = false;
+				pendingModelUpdateAction = null;
+				return;
+			}
+			const action = pendingModelUpdateAction ?? "close";
+			pendingModelUpdateAction = null;
+			requestClose(action);
+		};
+		activeDialogInstance = {
+			id: instanceId,
+			close: (reason = "closeAll") => {
+				requestClose(reason, true);
+			}
+		};
+		loadDialogComponent().then((DialogComponent) => {
+			if (isSettled) return;
+			(0, vue.render)((0, vue.createVNode)((0, vue.defineComponent)({
+				name: "FlDialogServiceWrapper",
+				setup() {
+					const safeDialogProps = sanitizeDialogProps(options.dialogProps);
+					return () => {
+						const injectedMessageContent = injectPayloadTargetRef(resolveMessageContent(options.message), payloadTargetRef);
+						return (0, vue.h)(DialogComponent, {
+							...safeDialogProps,
+							modelValue: true,
+							title: options.title,
+							showClose: options.showClose ?? true,
+							closeOnClickModal: options.closeOnClickModal ?? true,
+							closeOnPressEscape: options.closeOnPressEscape ?? true,
+							teleported: safeDialogProps.teleported ?? false,
+							onCancel: handleCancel,
+							onConfirm: handleConfirm,
+							"onUpdate:modelValue": handleModelValueUpdate
+						}, injectedMessageContent === void 0 ? void 0 : { default: () => [injectedMessageContent] });
+					};
+				}
+			})), container);
+		}).catch((error) => {
+			if (isSettled) return;
+			isSettled = true;
+			cleanup();
+			reject(error);
+		});
+	});
+};
+var closeAll = (reason = "closeAll") => {
+	activeDialogInstance?.close(reason);
+};
+var useDialog = () => ({
+	open,
+	closeAll
+});
+const flButtonProps = {
+	debugLabel: {
+		type: String,
+		default: ""
+	},
+	debugMode: {
+		type: Boolean,
+		default: false
+	}
+};
+const flButtonEmits = { "debug-click": (payload) => typeof payload.label === "string" };
+var button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "FlButton",
+	inheritAttrs: false,
+	__name: "button",
+	props: flButtonProps,
+	emits: flButtonEmits,
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
+		const { changeRef } = useMergedExpose({ debugKind: "button" });
+		const { mergedAttrs } = useMergedAttrs({
+			attrs,
+			block: "button",
+			listenerName: "onClick",
+			onListener: () => {
+				if (props.debugMode) emit("debug-click", { label: props.debugLabel });
+			}
+		});
+		__expose({});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.h)((0, vue.unref)(element_plus.ElButton), {
+				...(0, vue.unref)(mergedAttrs),
+				ref: (0, vue.unref)(changeRef)
+			}, (0, vue.unref)(slots))));
+		};
+	}
+});
+var button_default = button_vue_vue_type_script_setup_true_lang_default;
+const FlButton = withInstall(button_default);
+const flDialogProps = {
+	bodyHeight: {
+		type: [Number, String],
+		default: void 0
+	},
+	cancelDisabled: {
+		type: Boolean,
+		default: false
+	},
+	cancelText: {
+		type: String,
+		default: "取消"
+	},
+	confirmDisabled: {
+		type: Boolean,
+		default: false
+	},
+	confirmText: {
+		type: String,
+		default: "确认"
+	},
+	modelValue: {
+		type: Boolean,
+		default: false
+	},
+	showFooter: {
+		type: Boolean,
+		default: true
+	}
+};
+const flDialogEmits = {
+	cancel: () => true,
+	confirm: () => true,
+	"update:modelValue": (value) => typeof value === "boolean"
+};
+var _hoisted_1 = ["onKeydown"];
+var dialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "FlDialog",
+	inheritAttrs: false,
+	__name: "dialog",
+	props: flDialogProps,
+	emits: flDialogEmits,
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const omitAttrKeys = new Set([
+			"align-center",
+			"alignCenter",
+			"body-class",
+			"bodyClass",
+			"class",
+			"destroy-on-close",
+			"destroyOnClose",
+			"draggable",
+			"footer-class",
+			"footerClass",
+			"fullscreen",
+			"header-class",
+			"headerClass",
+			"show-close",
+			"showClose",
+			"transition"
+		]);
+		const props = __props;
+		const emit = __emit;
+		const attrs = (0, vue.useAttrs)();
+		const slots = (0, vue.useSlots)();
+		const ns = useNamespace("dialog");
+		const isFullscreen = (0, vue.ref)(false);
+		const normalizeClassName = (value) => {
+			if (!value) return "";
+			if (typeof value === "string") return value.split(" ").map((item) => item.trim()).filter(Boolean).join(" ");
+			if (Array.isArray(value)) return value.map((item) => normalizeClassName(item)).filter(Boolean).join(" ").trim();
+			return Object.entries(value).filter(([, enabled]) => enabled).map(([className]) => className).join(" ");
+		};
+		const mergeClassName = (...values) => values.map((item) => normalizeClassName(item)).filter(Boolean).join(" ").trim();
+		const getAttrValue = (kebabCaseName, camelCaseName = kebabCaseName) => attrs[kebabCaseName] ?? attrs[camelCaseName];
+		const resolveBooleanAttr = (value, fallback) => {
+			if (value === void 0) return fallback;
+			if (typeof value === "boolean") return value;
+			if (typeof value === "string") {
+				if (!value) return true;
+				return value !== "false";
+			}
+			return Boolean(value);
+		};
+		const closeDialog = () => {
+			emit("update:modelValue", false);
+		};
+		const toggleFullscreen = () => {
+			isFullscreen.value = !isFullscreen.value;
+		};
+		const handleCancel = () => {
+			emit("cancel");
+			closeDialog();
+		};
+		const handleConfirm = () => {
+			emit("confirm");
+			closeDialog();
+		};
+		const handleModelValueUpdate = (value) => {
+			emit("update:modelValue", value);
+			invokeListener(attrs["onUpdate:modelValue"], value);
+		};
+		const mergedClass = (0, vue.computed)(() => mergeClassName(ns.b(), attrs.class));
+		const mergedHeaderClass = (0, vue.computed)(() => mergeClassName(ns.e("header"), getAttrValue("header-class", "headerClass")));
+		const mergedBodyClass = (0, vue.computed)(() => mergeClassName(ns.e("body"), getAttrValue("body-class", "bodyClass")));
+		const mergedFooterClass = (0, vue.computed)(() => mergeClassName(ns.e("footer"), getAttrValue("footer-class", "footerClass")));
+		const bodyStyle = (0, vue.computed)(() => {
+			if (isFullscreen.value) return;
+			if (props.bodyHeight === void 0 || props.bodyHeight === null || props.bodyHeight === "") return;
+			return {
+				height: typeof props.bodyHeight === "number" ? `${props.bodyHeight}px` : props.bodyHeight,
+				overflowY: "auto"
+			};
+		});
+		const resolvedTitle = (0, vue.computed)(() => {
+			const title = attrs.title;
+			return typeof title === "string" ? title : "";
+		});
+		const resolvedAlignCenter = (0, vue.computed)(() => resolveBooleanAttr(getAttrValue("align-center", "alignCenter"), true));
+		const resolvedDestroyOnClose = (0, vue.computed)(() => resolveBooleanAttr(getAttrValue("destroy-on-close", "destroyOnClose"), true));
+		const resolvedDraggable = (0, vue.computed)(() => resolveBooleanAttr(getAttrValue("draggable"), true));
+		const resolvedShowClose = (0, vue.computed)(() => resolveBooleanAttr(getAttrValue("show-close", "showClose"), false));
+		const resolvedTransition = (0, vue.computed)(() => {
+			const transition = getAttrValue("transition");
+			return typeof transition === "string" && transition ? transition : "fl-dialog-bounce";
+		});
+		const forwardedAttrs = (0, vue.computed)(() => {
+			const next = {};
+			for (const [key, value] of Object.entries(attrs)) if (!omitAttrKeys.has(key)) next[key] = value;
+			return next;
+		});
+		const mergedAttrs = (0, vue.computed)(() => ({
+			...forwardedAttrs.value,
+			alignCenter: resolvedAlignCenter.value,
+			bodyClass: mergedBodyClass.value,
+			class: mergedClass.value,
+			destroyOnClose: resolvedDestroyOnClose.value,
+			draggable: resolvedDraggable.value,
+			footerClass: mergedFooterClass.value,
+			fullscreen: isFullscreen.value,
+			headerClass: mergedHeaderClass.value,
+			modelValue: props.modelValue,
+			showClose: resolvedShowClose.value,
+			transition: resolvedTransition.value,
+			"onUpdate:modelValue": handleModelValueUpdate
+		}));
+		const headerContentClass = ns.e("header-content");
+		const headerTitleClass = ns.e("header-title");
+		const headerActionsClass = ns.e("header-actions");
+		const headerActionIconClass = ns.e("header-action-icon");
+		const bodyInnerClass = ns.e("body-inner");
+		const footerActionsClass = ns.e("footer-actions");
+		const { changeRef } = useMergedExpose({
+			closeDialog,
+			toggleFullscreen
+		});
+		__expose({});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(element_plus.ElDialog)), (0, vue.mergeProps)(mergedAttrs.value, { ref: (0, vue.unref)(changeRef) }), (0, vue.createSlots)({
+				header: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(headerContentClass)) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(headerTitleClass)) }, [(0, vue.unref)(slots).header ? (0, vue.renderSlot)(_ctx.$slots, "header", { key: 0 }) : (0, vue.unref)(slots).title ? (0, vue.renderSlot)(_ctx.$slots, "title", { key: 1 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [(0, vue.createTextVNode)((0, vue.toDisplayString)(resolvedTitle.value), 1)], 64))], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(headerActionsClass)) }, [(0, vue.createElementVNode)("span", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(headerActionIconClass)),
+					"aria-label": "FullScreen",
+					role: "button",
+					tabindex: "0",
+					title: "FullScreen",
+					onClick: toggleFullscreen,
+					onKeydown: [(0, vue.withKeys)((0, vue.withModifiers)(toggleFullscreen, ["prevent"]), ["enter"]), (0, vue.withKeys)((0, vue.withModifiers)(toggleFullscreen, ["prevent"]), ["space"])]
+				}, [(0, vue.createVNode)((0, vue.unref)(element_plus.ElIcon), null, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(__element_plus_icons_vue.FullScreen))]),
+					_: 1
+				})], 42, _hoisted_1), (0, vue.createVNode)((0, vue.unref)(FlButton), {
+					icon: (0, vue.unref)(__element_plus_icons_vue.Close),
+					class: (0, vue.normalizeClass)((0, vue.unref)(headerActionIconClass)),
+					"aria-label": "Close",
+					link: "",
+					title: "Close",
+					type: "primary",
+					onClick: closeDialog
+				}, null, 8, ["icon", "class"])], 2)], 2)]),
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
+					class: (0, vue.normalizeClass)((0, vue.unref)(bodyInnerClass)),
+					style: (0, vue.normalizeStyle)(bodyStyle.value)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 6)]),
+				_: 2
+			}, [(0, vue.unref)(slots).footer || props.showFooter ? {
+				name: "footer",
+				fn: (0, vue.withCtx)(() => [(0, vue.unref)(slots).footer ? (0, vue.renderSlot)(_ctx.$slots, "footer", { key: 0 }) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 1,
+					class: (0, vue.normalizeClass)((0, vue.unref)(footerActionsClass))
+				}, [(0, vue.createVNode)((0, vue.unref)(FlButton), {
+					disabled: props.cancelDisabled,
+					onClick: handleCancel
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.cancelText), 1)]),
+					_: 1
+				}, 8, ["disabled"]), (0, vue.createVNode)((0, vue.unref)(FlButton), {
+					disabled: props.confirmDisabled,
+					type: "primary",
+					onClick: handleConfirm
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.confirmText), 1)]),
+					_: 1
+				}, 8, ["disabled"])], 2))]),
+				key: "0"
+			} : void 0]), 1040);
+		};
+	}
+});
+var dialog_default = dialog_vue_vue_type_script_setup_true_lang_default;
+Object.defineProperty(exports, "FlButton", {
+	enumerable: true,
+	get: function() {
+		return FlButton;
+	}
+});
+Object.defineProperty(exports, "closeAll", {
+	enumerable: true,
+	get: function() {
+		return closeAll;
+	}
+});
+Object.defineProperty(exports, "dialog_default", {
+	enumerable: true,
+	get: function() {
+		return dialog_default;
+	}
+});
+Object.defineProperty(exports, "invokeListener", {
+	enumerable: true,
+	get: function() {
+		return invokeListener;
+	}
+});
+Object.defineProperty(exports, "mergeComponentExpose", {
+	enumerable: true,
+	get: function() {
+		return mergeComponentExpose;
+	}
+});
+Object.defineProperty(exports, "open", {
+	enumerable: true,
+	get: function() {
+		return open;
+	}
+});
+Object.defineProperty(exports, "useClearableState", {
+	enumerable: true,
+	get: function() {
+		return useClearableState;
+	}
+});
+Object.defineProperty(exports, "useDialog", {
+	enumerable: true,
+	get: function() {
+		return useDialog;
+	}
+});
+Object.defineProperty(exports, "useMergedAttrs", {
+	enumerable: true,
+	get: function() {
+		return useMergedAttrs;
+	}
+});
+Object.defineProperty(exports, "useMergedExpose", {
+	enumerable: true,
+	get: function() {
+		return useMergedExpose;
+	}
+});
+Object.defineProperty(exports, "useNamespace", {
+	enumerable: true,
+	get: function() {
+		return useNamespace;
+	}
+});
+Object.defineProperty(exports, "withInstall", {
+	enumerable: true,
+	get: function() {
+		return withInstall;
+	}
+});
+
+//# sourceMappingURL=dialog-CJU00aEV.cjs.map