antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/modal/shared.js

@@ -0,0 +1,117 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { DisabledContextProvider } from "../config-provider/DisabledContext.js";
+import useLocale_default from "../locale/useLocale.js";
+import { useModalProvider } from "./context.js";
+import { getConfirmLocale } from "./locale.js";
+import NormalCancelBtn_default from "./components/NormalCancelBtn.js";
+import NormalOkBtn_default from "./components/NormalOkBtn.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode } from "vue";
+import { CloseOutlined } from "@antdv-next/icons";
+
+//#region src/modal/shared.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function renderCloseIcon(prefixCls, closeIcon) {
+	closeIcon = getSlotPropsFnRun({}, { closeIcon }, "closeIcon");
+	return createVNode("span", { "class": `${prefixCls}-close-x` }, [closeIcon || createVNode(CloseOutlined, { "class": `${prefixCls}-close-icon` }, null)]);
+}
+const Footer = /* @__PURE__ */ defineComponent((props) => {
+	const [locale] = useLocale_default("Modal", getConfirmLocale());
+	const okTextLocale = computed(() => {
+		return props.okText ?? locale?.value?.okText;
+	});
+	const cancelTextLocale = computed(() => {
+		return props.cancelText ?? locale?.value?.cancelText;
+	});
+	useModalProvider(computed(() => ({
+		confirmLoading: props.confirmLoading,
+		okButtonProps: props.okButtonProps,
+		cancelButtonProps: props.cancelButtonProps,
+		okTextLocale: okTextLocale.value,
+		cancelTextLocale: cancelTextLocale.value,
+		okType: props.okType ?? "primary",
+		onOk: props.onOk,
+		onCancel: props.onCancel
+	})));
+	return () => {
+		const { footer } = props;
+		const defaultFooter = createVNode(Fragment, null, [createVNode(NormalCancelBtn_default, null, null), createVNode(NormalOkBtn_default, null, null)]);
+		let footerNode;
+		if (typeof footer === "function") footerNode = footer({
+			originNode: defaultFooter,
+			extra: {
+				OkBtn: NormalOkBtn_default,
+				CancelBtn: NormalCancelBtn_default
+			}
+		});
+		else footerNode = footer;
+		if (footerNode === void 0) footerNode = defaultFooter;
+		return createVNode(DisabledContextProvider, { "disabled": false }, _isSlot(footerNode) ? footerNode : { default: () => [footerNode] });
+	};
+}, {
+	props: {
+		onOk: {
+			type: Function,
+			required: false
+		},
+		onCancel: {
+			type: Function,
+			required: false
+		},
+		footer: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		okText: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		okType: {
+			type: String,
+			required: false
+		},
+		cancelText: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		confirmLoading: {
+			type: Boolean,
+			required: false
+		},
+		okButtonProps: {
+			type: Object,
+			required: false
+		},
+		cancelButtonProps: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ModalFooter",
+	inheritAttrs: false
+});
+
+//#endregion
+export { Footer, renderCloseIcon };

package/dist/modal/style/confirm.js

@@ -0,0 +1,69 @@
+import { clearFix } from "../../style/index.js";
+import { genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { prepareComponentToken, prepareToken } from "./index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/modal/style/confirm.ts
+const genModalConfirmStyle = (token) => {
+	const { componentCls, titleFontSize, titleLineHeight, modalConfirmIconSize, fontSize, lineHeight, modalTitleHeight, fontHeight, confirmBodyPadding } = token;
+	const confirmComponentCls = `${componentCls}-confirm`;
+	return {
+		[confirmComponentCls]: {
+			"&-rtl": { direction: "rtl" },
+			[`${token.antCls}-modal-header`]: { display: "none" },
+			[`${confirmComponentCls}-body-wrapper`]: { ...clearFix() },
+			[`&${componentCls} ${componentCls}-body`]: { padding: confirmBodyPadding },
+			[`${confirmComponentCls}-body`]: {
+				display: "flex",
+				flexWrap: "nowrap",
+				alignItems: "start",
+				[`> ${token.iconCls}`]: {
+					flex: "none",
+					fontSize: modalConfirmIconSize,
+					marginInlineEnd: token.confirmIconMarginInlineEnd,
+					marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
+				},
+				[`&-has-title > ${token.iconCls}`]: { marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal() }
+			},
+			[`${confirmComponentCls}-paragraph`]: {
+				display: "flex",
+				flexDirection: "column",
+				flex: "auto",
+				rowGap: token.marginXS,
+				maxWidth: `calc(100% - ${unit(token.marginSM)})`
+			},
+			[`${token.iconCls} + ${confirmComponentCls}-paragraph`]: { maxWidth: `calc(100% - ${unit(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})` },
+			[`${confirmComponentCls}-title`]: {
+				color: token.colorTextHeading,
+				fontWeight: token.fontWeightStrong,
+				fontSize: titleFontSize,
+				lineHeight: titleLineHeight
+			},
+			[`${confirmComponentCls}-container`]: {
+				color: token.colorText,
+				fontSize,
+				lineHeight
+			},
+			[`${confirmComponentCls}-btns`]: {
+				textAlign: "end",
+				marginTop: token.confirmBtnsMarginTop,
+				[`${token.antCls}-btn + ${token.antCls}-btn`]: {
+					marginBottom: 0,
+					marginInlineStart: token.marginXS
+				}
+			}
+		},
+		[`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: { color: token.colorError },
+		[`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
+        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: { color: token.colorWarning },
+		[`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: { color: token.colorInfo },
+		[`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: { color: token.colorSuccess }
+	};
+};
+var confirm_default = genSubStyleComponent(["Modal", "confirm"], (token) => {
+	return genModalConfirmStyle(prepareToken(token));
+}, prepareComponentToken, { order: -1e3 });
+
+//#endregion
+export { confirm_default as default };

package/dist/modal/style/index.d.ts

@@ -0,0 +1,63 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/modal/style/index.d.ts
+/** Component only token. Which will handle additional calculation of alias token */
+interface ComponentToken {
+  /**
+   * @desc 顶部背景色
+   * @descEN Background color of header
+   */
+  headerBg: string;
+  /**
+   * @desc 标题行高
+   * @descEN Line height of title
+   */
+  titleLineHeight: number | string;
+  /**
+   * @desc 标题字体大小
+   * @descEN Font size of title
+   */
+  titleFontSize: number;
+  /**
+   * @desc 标题字体颜色
+   * @descEN Font color of title
+   */
+  titleColor: string;
+  /**
+   * @desc 内容区域背景色
+   * @descEN Background color of content
+   */
+  contentBg: string;
+  /**
+   * @desc 底部区域背景色
+   * @descEN Background color of footer
+   */
+  footerBg: string;
+  /** @internal */
+  contentPadding: number | string;
+  /** @internal */
+  headerPadding: string | number;
+  /** @internal */
+  headerBorderBottom: string;
+  /** @internal */
+  headerMarginBottom: number;
+  /** @internal */
+  bodyPadding: number;
+  /** @internal */
+  footerPadding: string | number;
+  /** @internal */
+  footerBorderTop: string;
+  /** @internal */
+  footerBorderRadius: string | number;
+  /** @internal */
+  footerMarginTop: string | number;
+  /** @internal */
+  confirmBodyPadding: string | number;
+  /** @internal */
+  confirmIconMarginInlineEnd: string | number;
+  /** @internal */
+  confirmBtnsMarginTop: string | number;
+}
+//#endregion
+export { ComponentToken };

package/dist/modal/style/index.js

@@ -0,0 +1,261 @@
+import { genFocusStyle, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { initFadeMotion } from "../../style/motion/fade.js";
+import { initZoomMotion } from "../../style/motion/zoom.js";
+import "../../style/motion/index.js";
+import { getMediaSize } from "../../grid/style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/modal/style/index.ts
+function box(position) {
+	return {
+		position,
+		inset: 0
+	};
+}
+const genModalMaskStyle = (token) => {
+	const { componentCls, antCls } = token;
+	return [{ [`${componentCls}-root`]: {
+		[`${componentCls}${antCls}-zoom-enter, ${componentCls}${antCls}-zoom-appear`]: {
+			transform: "none",
+			opacity: 0,
+			animationDuration: token.motionDurationSlow,
+			userSelect: "none"
+		},
+		[`${componentCls}${antCls}-zoom-leave ${componentCls}-container`]: { pointerEvents: "none" },
+		[`${componentCls}-mask`]: {
+			...box("fixed"),
+			zIndex: token.zIndexPopupBase,
+			height: "100%",
+			backgroundColor: token.colorBgMask,
+			pointerEvents: "none",
+			[`&${componentCls}-mask-blur`]: { backdropFilter: "blur(4px)" },
+			[`${componentCls}-hidden`]: { display: "none" }
+		},
+		[`${componentCls}-wrap`]: {
+			...box("fixed"),
+			zIndex: token.zIndexPopupBase,
+			overflow: "auto",
+			outline: 0,
+			WebkitOverflowScrolling: "touch"
+		}
+	} }, { [`${componentCls}-root`]: initFadeMotion(token) }];
+};
+const genModalStyle = (token) => {
+	const { componentCls } = token;
+	return [
+		{ [`${componentCls}-root`]: {
+			[`${componentCls}-wrap-rtl`]: { direction: "rtl" },
+			[`${componentCls}-centered`]: {
+				"textAlign": "center",
+				"&::before": {
+					display: "inline-block",
+					width: 0,
+					height: "100%",
+					verticalAlign: "middle",
+					content: "\"\""
+				},
+				[componentCls]: {
+					top: 0,
+					display: "inline-block",
+					paddingBottom: 0,
+					textAlign: "start",
+					verticalAlign: "middle"
+				}
+			},
+			[`@media (max-width: ${token.screenSMMax}px)`]: {
+				[componentCls]: {
+					maxWidth: "calc(100vw - 16px)",
+					margin: `${unit(token.marginXS)} auto`
+				},
+				[`${componentCls}-centered`]: { [componentCls]: { flex: 1 } }
+			}
+		} },
+		{ [componentCls]: {
+			...resetComponent(token),
+			pointerEvents: "none",
+			position: "relative",
+			top: 100,
+			width: "auto",
+			maxWidth: `calc(100vw - ${unit(token.calc(token.margin).mul(2).equal())})`,
+			margin: "0 auto",
+			paddingBottom: token.paddingLG,
+			[`${componentCls}-title`]: {
+				margin: 0,
+				color: token.titleColor,
+				fontWeight: token.fontWeightStrong,
+				fontSize: token.titleFontSize,
+				lineHeight: token.titleLineHeight,
+				wordWrap: "break-word"
+			},
+			[`${componentCls}-container`]: {
+				position: "relative",
+				backgroundColor: token.contentBg,
+				backgroundClip: "padding-box",
+				border: 0,
+				borderRadius: token.borderRadiusLG,
+				boxShadow: token.boxShadow,
+				pointerEvents: "auto",
+				padding: token.contentPadding
+			},
+			[`${componentCls}-close`]: {
+				"position": "absolute",
+				"top": token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+				"insetInlineEnd": token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
+				"zIndex": token.calc(token.zIndexPopupBase).add(10).equal(),
+				"padding": 0,
+				"color": token.modalCloseIconColor,
+				"fontWeight": token.fontWeightStrong,
+				"lineHeight": 1,
+				"textDecoration": "none",
+				"background": "transparent",
+				"borderRadius": token.borderRadiusSM,
+				"width": token.modalCloseBtnSize,
+				"height": token.modalCloseBtnSize,
+				"border": 0,
+				"outline": 0,
+				"cursor": "pointer",
+				"transition": `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+				"&-x": {
+					display: "flex",
+					fontSize: token.fontSizeLG,
+					fontStyle: "normal",
+					lineHeight: unit(token.modalCloseBtnSize),
+					justifyContent: "center",
+					textTransform: "none",
+					textRendering: "auto"
+				},
+				"&:disabled": { pointerEvents: "none" },
+				"&:hover": {
+					color: token.modalCloseIconHoverColor,
+					backgroundColor: token.colorBgTextHover,
+					textDecoration: "none"
+				},
+				"&:active": { backgroundColor: token.colorBgTextActive },
+				...genFocusStyle(token)
+			},
+			[`${componentCls}-header`]: {
+				color: token.colorText,
+				background: token.headerBg,
+				borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
+				marginBottom: token.headerMarginBottom,
+				padding: token.headerPadding,
+				borderBottom: token.headerBorderBottom
+			},
+			[`${componentCls}-body`]: {
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				wordWrap: "break-word",
+				padding: token.bodyPadding,
+				[`${componentCls}-body-skeleton`]: {
+					width: "100%",
+					height: "100%",
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					margin: `${unit(token.margin)} auto`
+				}
+			},
+			[`${componentCls}-footer`]: {
+				textAlign: "end",
+				background: token.footerBg,
+				marginTop: token.footerMarginTop,
+				padding: token.footerPadding,
+				borderTop: token.footerBorderTop,
+				borderRadius: token.footerBorderRadius,
+				[`> ${token.antCls}-btn + ${token.antCls}-btn`]: { marginInlineStart: token.marginXS }
+			},
+			[`${componentCls}-open`]: { overflow: "hidden" }
+		} },
+		{ [`${componentCls}-pure-panel`]: {
+			top: "auto",
+			padding: 0,
+			display: "flex",
+			flexDirection: "column",
+			[`${componentCls}-container,
+          ${componentCls}-body,
+          ${componentCls}-confirm-body-wrapper`]: {
+				display: "flex",
+				flexDirection: "column",
+				flex: "auto"
+			},
+			[`${componentCls}-confirm-body`]: { marginBottom: "auto" }
+		} }
+	];
+};
+const genRTLStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}-root`]: { [`${componentCls}-wrap-rtl`]: {
+		direction: "rtl",
+		[`${componentCls}-confirm-body`]: { direction: "rtl" }
+	} } };
+};
+const genResponsiveWidthStyle = (token) => {
+	const { componentCls } = token;
+	const oriGridMediaSizesMap = getMediaSize(token);
+	const gridMediaSizesMap = { ...oriGridMediaSizesMap };
+	delete gridMediaSizesMap.xs;
+	const cssVarPrefix = `--${componentCls.replace(".", "")}-`;
+	const responsiveStyles = Object.keys(gridMediaSizesMap).map((key) => ({ [`@media (min-width: ${unit(gridMediaSizesMap[key])})`]: { width: `var(${cssVarPrefix}${key}-width)` } }));
+	return { [`${componentCls}-root`]: { [componentCls]: [
+		...Object.keys(oriGridMediaSizesMap).map((currentKey, index) => {
+			const previousKey = Object.keys(oriGridMediaSizesMap)[index - 1];
+			return previousKey ? { [`${cssVarPrefix}${currentKey}-width`]: `var(${cssVarPrefix}${previousKey}-width)` } : null;
+		}),
+		{ width: `var(${cssVarPrefix}xs-width)` },
+		...responsiveStyles
+	] } };
+};
+const prepareToken = (token) => {
+	const headerPaddingVertical = token.padding;
+	const headerFontSize = token.fontSizeHeading5;
+	const headerLineHeight = token.lineHeightHeading5;
+	return mergeToken(token, {
+		modalHeaderHeight: token.calc(token.calc(headerLineHeight).mul(headerFontSize).equal()).add(token.calc(headerPaddingVertical).mul(2).equal()).equal(),
+		modalFooterBorderColorSplit: token.colorSplit,
+		modalFooterBorderStyle: token.lineType,
+		modalFooterBorderWidth: token.lineWidth,
+		modalCloseIconColor: token.colorIcon,
+		modalCloseIconHoverColor: token.colorIconHover,
+		modalCloseBtnSize: token.controlHeight,
+		modalConfirmIconSize: token.fontHeight,
+		modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal()
+	});
+};
+function prepareComponentToken(token) {
+	return {
+		footerBg: "transparent",
+		headerBg: "transparent",
+		titleLineHeight: token.lineHeightHeading5,
+		titleFontSize: token.fontSizeHeading5,
+		contentBg: token.colorBgElevated,
+		titleColor: token.colorTextHeading,
+		contentPadding: token.wireframe ? 0 : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
+		headerPadding: token.wireframe ? `${unit(token.padding)} ${unit(token.paddingLG)}` : 0,
+		headerBorderBottom: token.wireframe ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : "none",
+		headerMarginBottom: token.wireframe ? 0 : token.marginXS,
+		bodyPadding: token.wireframe ? token.paddingLG : 0,
+		footerPadding: token.wireframe ? `${unit(token.paddingXS)} ${unit(token.padding)}` : 0,
+		footerBorderTop: token.wireframe ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : "none",
+		footerBorderRadius: token.wireframe ? `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` : 0,
+		footerMarginTop: token.wireframe ? 0 : token.marginSM,
+		confirmBodyPadding: token.wireframe ? `${unit(token.padding * 2)} ${unit(token.padding * 2)} ${unit(token.paddingLG)}` : 0,
+		confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM,
+		confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM,
+		mask: true
+	};
+}
+var style_default = genStyleHooks("Modal", (token) => {
+	const modalToken = prepareToken(token);
+	return [
+		genModalStyle(modalToken),
+		genRTLStyle(modalToken),
+		genModalMaskStyle(modalToken),
+		initZoomMotion(modalToken, "zoom"),
+		genResponsiveWidthStyle(modalToken)
+	];
+}, prepareComponentToken, { unitless: { titleLineHeight: true } });
+
+//#endregion
+export { style_default as default, prepareComponentToken, prepareToken };

package/dist/modal/useModal/HookModal.js

@@ -0,0 +1,72 @@
+import { useBaseConfig } from "../../config-provider/context.js";
+import en_US_default from "../../locale/en_US.js";
+import useLocale_default from "../../locale/useLocale.js";
+import ConfirmDialog_default from "../ConfirmDialog.js";
+import { computed, createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+
+//#region src/modal/useModal/HookModal.tsx
+const HookModal = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const open = shallowRef(true);
+	const innerConfig = shallowRef(props.config);
+	const { direction, getPrefixCls } = useBaseConfig("modal");
+	const prefixCls = computed(() => innerConfig.value.prefixCls ?? getPrefixCls("modal", innerConfig.value.prefixCls));
+	const rootPrefixCls = computed(() => getPrefixCls());
+	const afterClose = () => {
+		props.afterClose?.();
+		innerConfig.value.afterClose?.();
+	};
+	const close = (...args) => {
+		open.value = false;
+		if (args.some((param) => param?.triggerCancel)) innerConfig.value.onCancel?.(() => {}, ...args.slice(1));
+	};
+	expose({
+		destroy: close,
+		update: (configUpdate) => {
+			innerConfig.value = typeof configUpdate === "function" ? configUpdate(innerConfig.value) : {
+				...innerConfig.value,
+				...configUpdate
+			};
+		}
+	});
+	const mergedOkCancel = computed(() => innerConfig.value.okCancel ?? innerConfig.value.type === "confirm");
+	const [contextLocale] = useLocale_default("Modal", en_US_default.Modal);
+	return () => {
+		return createVNode(ConfirmDialog_default, mergeProps(innerConfig.value, {
+			"close": close,
+			"open": open.value,
+			"afterClose": afterClose,
+			"okText": innerConfig.value.okText ?? (mergedOkCancel.value ? contextLocale?.value?.okText : contextLocale?.value?.justOkText),
+			"direction": innerConfig.value.direction ?? direction.value,
+			"cancelText": innerConfig.value.cancelText ?? contextLocale?.value?.cancelText,
+			"prefixCls": prefixCls.value,
+			"rootPrefixCls": rootPrefixCls.value,
+			"onConfirm": props.onConfirm,
+			"isSilent": props.isSilent
+		}), null);
+	};
+}, {
+	props: {
+		afterClose: {
+			type: Function,
+			required: true
+		},
+		config: {
+			type: Object,
+			required: true
+		},
+		onConfirm: {
+			type: Function,
+			required: false
+		},
+		isSilent: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "HookModal",
+	inheritAttrs: false
+});
+var HookModal_default = HookModal;
+
+//#endregion
+export { HookModal_default as default };

package/dist/modal/useModal/index.d.ts

@@ -0,0 +1,7 @@
+import { HookAPI, ModalFuncWithPromise } from "./types.js";
+import { DefineComponent } from "vue";
+
+//#region src/modal/useModal/index.d.ts
+declare function useModal(): readonly [instance: HookAPI, contextHolder: DefineComponent];
+//#endregion
+export { useModal };

package/dist/modal/useModal/index.js

@@ -0,0 +1,97 @@
+import destroyFns_default from "../destroyFns.js";
+import { withConfirm, withError, withInfo, withSuccess, withWarn } from "../confirm.js";
+import { usePatchElement } from "../../_util/hooks/usePatchElement.js";
+import HookModal_default from "./HookModal.js";
+import { Fragment, createVNode, defineComponent, shallowRef, watch } from "vue";
+
+//#region src/modal/useModal/index.tsx
+let uuid = 0;
+const ElementsHolder = /* @__PURE__ */ defineComponent((_, { expose }) => {
+	const [elements, patchElement] = usePatchElement();
+	expose({ patchElement });
+	return () => {
+		return createVNode(Fragment, null, [elements.value]);
+	};
+}, {
+	name: "ElementsHolder",
+	inheritAttrs: false
+});
+function useModal() {
+	const holderRef = shallowRef();
+	const actionQueue = shallowRef([]);
+	watch(actionQueue, () => {
+		if (actionQueue.value.length) {
+			[...actionQueue.value].forEach((action) => action());
+			actionQueue.value = [];
+		}
+	}, { immediate: true });
+	const getConfirmFunc = (withFunc) => function hookConfirm(config) {
+		uuid += 1;
+		const modalRef = shallowRef();
+		let resolvePromise;
+		const promise = new Promise((resolve) => {
+			resolvePromise = resolve;
+		});
+		let silent = false;
+		let closePatch;
+		function closeFunc() {
+			closePatch?.();
+			const index = destroyFns_default.indexOf(closeFunc);
+			if (index !== -1) destroyFns_default.splice(index, 1);
+		}
+		const modal = createVNode(/* @__PURE__ */ defineComponent({
+			name: "ModalWrapper",
+			setup() {
+				return () => createVNode(HookModal_default, {
+					"config": withFunc(config),
+					"ref": modalRef,
+					"afterClose": () => {
+						closeFunc();
+					},
+					"isSilent": () => silent,
+					"onConfirm": (confirmed) => {
+						resolvePromise(confirmed);
+					}
+				}, null);
+			}
+		}), { "key": `modal-${uuid}` }, null);
+		closePatch = holderRef.value?.patchElement(modal);
+		if (closePatch) destroyFns_default.push(closeFunc);
+		return {
+			destroy: () => {
+				const destroyAction = () => modalRef.value?.destroy();
+				if (modalRef.value) destroyAction();
+				else actionQueue.value = [...actionQueue.value, destroyAction];
+			},
+			update: (newConfig) => {
+				const updateAction = () => modalRef.value?.update(newConfig);
+				if (modalRef.value) updateAction();
+				else actionQueue.value = [...actionQueue.value, updateAction];
+			},
+			then: (resolve) => {
+				silent = true;
+				return promise.then(resolve);
+			}
+		};
+	};
+	return [{
+		info: getConfirmFunc(withInfo),
+		success: getConfirmFunc(withSuccess),
+		error: getConfirmFunc(withError),
+		warning: getConfirmFunc(withWarn),
+		confirm: getConfirmFunc(withConfirm)
+	}, /* @__PURE__ */ defineComponent(() => {
+		return () => {
+			return createVNode(ElementsHolder, {
+				"key": "modal-holder",
+				"ref": holderRef
+			}, null);
+		};
+	}, {
+		name: "ContextHolder",
+		inheritAttrs: false
+	})];
+}
+
+//#endregion
+export { useModal as default };

package/dist/modal/useModal/types.d.ts

@@ -0,0 +1,9 @@
+import { ModalFunc, ModalStaticFunctions } from "../confirm.js";
+
+//#region src/modal/useModal/types.d.ts
+type ModalFuncWithPromise = (...args: Parameters<ModalFunc>) => ReturnType<ModalFunc> & {
+  then: <T>(resolve: (confirmed: boolean) => T, reject: VoidFunction) => Promise<T>;
+};
+type HookAPI = Omit<Record<keyof ModalStaticFunctions, ModalFuncWithPromise>, 'warn'>;
+//#endregion
+export { HookAPI, ModalFuncWithPromise };