@falcon-ui/falcon-ui 1.0.0

package/esm/dialog-Cm3Px-Bu.js

@@ -0,0 +1,537 @@
+import { Fragment, cloneVNode, computed, createBlock, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, h, isVNode, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, render, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useSlots, watch, withCtx, withKeys, withModifiers } from "vue";
+import { ElButton, ElDialog, ElIcon } from "element-plus";
+import { Close, FullScreen } from "@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: 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 = 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());
+	};
+	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 = import("./dialog-CzZm50XM.js").then((module) => module.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 (!isVNode(value)) return false;
+	return (value.shapeFlag & componentVNodeShapeFlag) !== 0;
+};
+var injectPayloadTargetRef = (messageContent, payloadTargetRef) => {
+	if (!isComponentVNode(messageContent)) return messageContent;
+	return 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 = ref(null);
+		const cleanup = () => {
+			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;
+			render(createVNode(defineComponent({
+				name: "FlDialogServiceWrapper",
+				setup() {
+					const safeDialogProps = sanitizeDialogProps(options.dialogProps);
+					return () => {
+						const injectedMessageContent = injectPayloadTargetRef(resolveMessageContent(options.message), payloadTargetRef);
+						return 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 FlButton = withInstall(/* @__PURE__ */ defineComponent({
+	name: "FlButton",
+	inheritAttrs: false,
+	__name: "button",
+	props: {
+		debugLabel: {
+			type: String,
+			default: ""
+		},
+		debugMode: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: { "debug-click": (payload) => typeof payload.label === "string" },
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = 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 openBlock(), createBlock(resolveDynamicComponent(h(unref(ElButton), {
+				...unref(mergedAttrs),
+				ref: unref(changeRef)
+			}, unref(slots))));
+		};
+	}
+}));
+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_default = /* @__PURE__ */ 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 = useAttrs();
+		const slots = useSlots();
+		const ns = useNamespace("dialog");
+		const isFullscreen = 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 = computed(() => mergeClassName(ns.b(), attrs.class));
+		const mergedHeaderClass = computed(() => mergeClassName(ns.e("header"), getAttrValue("header-class", "headerClass")));
+		const mergedBodyClass = computed(() => mergeClassName(ns.e("body"), getAttrValue("body-class", "bodyClass")));
+		const mergedFooterClass = computed(() => mergeClassName(ns.e("footer"), getAttrValue("footer-class", "footerClass")));
+		const bodyStyle = 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 = computed(() => {
+			const title = attrs.title;
+			return typeof title === "string" ? title : "";
+		});
+		const resolvedAlignCenter = computed(() => resolveBooleanAttr(getAttrValue("align-center", "alignCenter"), true));
+		const resolvedDestroyOnClose = computed(() => resolveBooleanAttr(getAttrValue("destroy-on-close", "destroyOnClose"), true));
+		const resolvedDraggable = computed(() => resolveBooleanAttr(getAttrValue("draggable"), true));
+		const resolvedShowClose = computed(() => resolveBooleanAttr(getAttrValue("show-close", "showClose"), false));
+		const resolvedTransition = computed(() => {
+			const transition = getAttrValue("transition");
+			return typeof transition === "string" && transition ? transition : "fl-dialog-bounce";
+		});
+		const forwardedAttrs = computed(() => {
+			const next = {};
+			for (const [key, value] of Object.entries(attrs)) if (!omitAttrKeys.has(key)) next[key] = value;
+			return next;
+		});
+		const mergedAttrs = 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 openBlock(), createBlock(resolveDynamicComponent(unref(ElDialog)), mergeProps(mergedAttrs.value, { ref: unref(changeRef) }), createSlots({
+				header: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(headerContentClass)) }, [createElementVNode("div", { class: normalizeClass(unref(headerTitleClass)) }, [unref(slots).header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : unref(slots).title ? renderSlot(_ctx.$slots, "title", { key: 1 }) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(resolvedTitle.value), 1)], 64))], 2), createElementVNode("div", { class: normalizeClass(unref(headerActionsClass)) }, [createElementVNode("span", {
+					class: normalizeClass(unref(headerActionIconClass)),
+					"aria-label": "FullScreen",
+					role: "button",
+					tabindex: "0",
+					title: "FullScreen",
+					onClick: toggleFullscreen,
+					onKeydown: [withKeys(withModifiers(toggleFullscreen, ["prevent"]), ["enter"]), withKeys(withModifiers(toggleFullscreen, ["prevent"]), ["space"])]
+				}, [createVNode(unref(ElIcon), null, {
+					default: withCtx(() => [createVNode(unref(FullScreen))]),
+					_: 1
+				})], 42, _hoisted_1), createVNode(unref(FlButton), {
+					icon: unref(Close),
+					class: normalizeClass(unref(headerActionIconClass)),
+					"aria-label": "Close",
+					link: "",
+					title: "Close",
+					type: "primary",
+					onClick: closeDialog
+				}, null, 8, ["icon", "class"])], 2)], 2)]),
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(unref(bodyInnerClass)),
+					style: normalizeStyle(bodyStyle.value)
+				}, [renderSlot(_ctx.$slots, "default")], 6)]),
+				_: 2
+			}, [unref(slots).footer || props.showFooter ? {
+				name: "footer",
+				fn: withCtx(() => [unref(slots).footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(footerActionsClass))
+				}, [createVNode(unref(FlButton), {
+					disabled: props.cancelDisabled,
+					onClick: handleCancel
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(props.cancelText), 1)]),
+					_: 1
+				}, 8, ["disabled"]), createVNode(unref(FlButton), {
+					disabled: props.confirmDisabled,
+					type: "primary",
+					onClick: handleConfirm
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(props.confirmText), 1)]),
+					_: 1
+				}, 8, ["disabled"])], 2))]),
+				key: "0"
+			} : void 0]), 1040);
+		};
+	}
+});
+export { useDialog as a, useMergedExpose as c, mergeComponentExpose as d, useNamespace as f, open as i, withInstall as l, FlButton as n, useClearableState as o, closeAll as r, useMergedAttrs as s, dialog_default as t, invokeListener as u };
+
+//# sourceMappingURL=dialog-Cm3Px-Bu.js.map