@gkucmierz/nano-ui 1.2.1 → 1.2.2

package/dist/nano-ui.css

@@ -1,2 +1,2 @@
-.global-tooltip[data-v-37c91a21]{--nu-tooltip-bg:#0f172af2;--nu-tooltip-color:#f8fafc;--nu-tooltip-radius:8px;--nu-tooltip-padding:8px 14px;--nu-tooltip-shadow:0 8px 24px #0000004d;--nu-tooltip-border:1px solid #ffffff1a;--nu-tooltip-arrow-border:#ffffff1a;z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;width:max-content;max-width:min(350px,100vw - 32px);box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0;transform:translateY(4px)scale(.95)}.global-tooltip[data-v-37c91a21]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);border-right:1px solid var(--nu-tooltip-arrow-border);border-bottom:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 2px;width:10px;height:10px;margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-37c91a21]:after{border-bottom:none;border-right:none;border-left:1px solid var(--nu-tooltip-arrow-border);border-top:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(0 0,100% 0,0 100%);border-radius:2px 0 0;top:-5px;bottom:auto}.global-tooltip.visible[data-v-37c91a21]{opacity:1;visibility:visible}span.ripple{background-color:var(--nano-ripple-color,#fff6);pointer-events:none;border-radius:50%;animation:.6s linear nano-ripple-anim;position:absolute;transform:scale(0)}@keyframes nano-ripple-anim{to{opacity:0;transform:scale(4)}}
+.global-tooltip[data-v-37c91a21]{--nu-tooltip-bg:#0f172af2;--nu-tooltip-color:#f8fafc;--nu-tooltip-radius:8px;--nu-tooltip-padding:8px 14px;--nu-tooltip-shadow:0 8px 24px #0000004d;--nu-tooltip-border:1px solid #ffffff1a;--nu-tooltip-arrow-border:#ffffff1a;z-index:99999;background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);color:var(--nu-tooltip-color);padding:var(--nu-tooltip-padding);border-radius:var(--nu-tooltip-radius);text-align:center;white-space:normal;word-wrap:break-word;pointer-events:none;width:max-content;max-width:min(350px,100vw - 32px);box-shadow:var(--nu-tooltip-shadow);border:var(--nu-tooltip-border);opacity:0;visibility:hidden;font-size:.85rem;font-weight:500;line-height:1.4;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0;transform:translateY(4px)scale(.95)}.global-tooltip[data-v-37c91a21]:after{content:"";left:calc(50% + var(--arrow-offset,0px));background:var(--nu-tooltip-bg);-webkit-backdrop-filter:blur(8px);border-right:1px solid var(--nu-tooltip-arrow-border);border-bottom:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(100% 0,100% 100%,0 100%);border-radius:0 0 2px;width:10px;height:10px;margin-left:-5px;position:absolute;bottom:-5px;transform:rotate(45deg)}.global-tooltip.tooltip-bottom[data-v-37c91a21]:after{border-bottom:none;border-right:none;border-left:1px solid var(--nu-tooltip-arrow-border);border-top:1px solid var(--nu-tooltip-arrow-border);clip-path:polygon(0 0,100% 0,0 100%);border-radius:2px 0 0;top:-5px;bottom:auto}.global-tooltip.visible[data-v-37c91a21]{opacity:1;visibility:visible}:root{--nano-modal-bg:#1e1e24;--nano-modal-glass-bg:#1e1e24d9;--nano-modal-border:#ffffff1a;--nano-modal-text:#fff;--nano-modal-text-muted:#a0a0a0;--nano-modal-backdrop:#0009;--nano-modal-radius:12px;--nano-btn-primary:#3498db;--nano-btn-primary-hover:#2980b9;--nano-btn-secondary:#34495e;--nano-btn-secondary-hover:#2c3e50}.nano-modal-overlay{z-index:99999;background:var(--nano-modal-backdrop);box-sizing:border-box;outline:none;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.nano-modal-overlay.nano-glass{-webkit-backdrop-filter:blur(8px)}.nano-modal-window{background:var(--nano-modal-bg);border:1px solid var(--nano-modal-border);border-radius:var(--nano-modal-radius);max-height:90vh;color:var(--nano-modal-text);flex-direction:column;display:flex;position:relative;box-shadow:0 24px 48px #00000080}.nano-modal-window:not([style*="position: absolute"]){margin:auto}.nano-glass .nano-modal-window{background:var(--nano-modal-glass-bg);-webkit-backdrop-filter:blur(16px)}.nano-modal-header{border-bottom:1px solid var(--nano-modal-border);-webkit-user-select:none;user-select:none;background:#0003;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.nano-modal-header.is-draggable{cursor:grab}.nano-modal-header.is-draggable:active{cursor:grabbing}.nano-modal-title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.4}.nano-modal-close-btn{color:var(--nano-modal-text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.nano-modal-close-btn:hover{color:var(--nano-modal-text);background:#ffffff1a}.nano-modal-body{flex:1;padding:24px;overflow-y:auto}.nano-modal-footer{border-top:1px solid var(--nano-modal-border);background:#00000026;justify-content:flex-end;padding:16px 24px;display:flex}.nano-modal-actions{gap:12px;display:flex}.nano-btn{cursor:pointer;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:.95rem;font-weight:600;transition:all .2s}.nano-btn-primary{background:var(--nano-btn-primary)}.nano-btn-primary:hover{background:var(--nano-btn-primary-hover)}.nano-btn-secondary{background:var(--nano-btn-secondary)}.nano-btn-secondary:hover{background:var(--nano-btn-secondary-hover)}.nano-modal-resizer{cursor:se-resize;width:16px;height:16px;color:var(--nano-modal-text-muted);z-index:10;justify-content:center;align-items:center;transition:color .2s;display:flex;position:absolute;bottom:4px;right:4px}.nano-modal-resizer:hover{color:var(--nano-modal-text)}.nano-modal-fade-enter-active,.nano-modal-fade-leave-active{transition:opacity .25s}.nano-modal-fade-enter-active .nano-modal-window{transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.nano-modal-fade-leave-active .nano-modal-window{transition:transform .2s ease-in}.nano-modal-fade-enter-from,.nano-modal-fade-leave-to{opacity:0}.nano-modal-fade-enter-from .nano-modal-window{transform:scale(.9)translateY(10px)}.nano-modal-fade-leave-to .nano-modal-window{transform:scale(.95)translateY(-10px)}span.ripple{background-color:var(--nano-ripple-color,#fff6);pointer-events:none;border-radius:50%;animation:.6s linear nano-ripple-anim;position:absolute;transform:scale(0)}@keyframes nano-ripple-anim{to{opacity:0;transform:scale(4)}}
 /*$vite$:1*/

package/dist/nano-ui.js

@@ -1,115 +1,328 @@
-import { createElementBlock as e, nextTick as t, normalizeClass as n, normalizeStyle as r, openBlock as i, reactive as a, ref as o, toDisplayString as s, unref as c, watch as l } from "vue";
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onUnmounted as f, openBlock as p, reactive as m, ref as h, renderSlot as g, resolveDirective as _, toDisplayString as v, unref as y, watch as b, withCtx as x, withDirectives as S, withKeys as C, withModifiers as w } from "vue";
 //#region src/directives/ripple.js
-var u = { mounted(e, t) {
+var T = { mounted(e, t) {
 	e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", function(n) {
 		let r = e.getBoundingClientRect(), i = n.clientX - r.left, a = n.clientY - r.top, o = document.createElement("span"), s = Math.max(r.width, r.height), c = s / 2;
 		o.style.width = o.style.height = `${s}px`, o.style.left = `${i - c}px`, o.style.top = `${a - c}px`, o.classList.add("ripple"), t.value && typeof t.value == "string" && (o.style.backgroundColor = t.value), e.appendChild(o), setTimeout(() => {
 			o.remove();
 		}, 600);
 	});
-} }, d = a({
+} }, E = m({
 	isVisible: !1,
 	text: "",
 	customClass: "",
 	targetRect: null
 });
-function f(e, t) {
+function D(e, t) {
 	if (!t) return;
 	let n = typeof t == "object" ? t.text : t, r = typeof t == "object" && t.class || "";
 	if (!n) return;
 	e.hasAttribute("aria-label") || e.setAttribute("aria-label", n);
 	let i = e.getBoundingClientRect();
-	d.targetRect = {
+	E.targetRect = {
 		top: i.top,
 		left: i.left,
 		width: i.width,
 		bottom: i.bottom,
 		right: i.right
-	}, d.text = n, d.customClass = r, d.isVisible = !0;
+	}, E.text = n, E.customClass = r, E.isVisible = !0;
 }
-typeof window < "u" && window.addEventListener("scroll", p, {
+typeof window < "u" && window.addEventListener("scroll", O, {
 	passive: !0,
 	capture: !0
 });
-function p() {
-	d.isVisible = !1;
+function O() {
+	E.isVisible = !1;
 }
 //#endregion
 //#region src/directives/tooltip.js
-var m = {
+var k = {
 	mounted(e, t) {
 		e._tooltipOptions = t.value;
 		let n = null, r = !1;
 		e._handleMouseEnter = () => {
-			r || f(e, e._tooltipOptions);
+			r || D(e, e._tooltipOptions);
 		}, e._handleMouseLeave = () => {
-			r || p();
+			r || O();
 		}, e._handleFocus = () => {
-			r || f(e, e._tooltipOptions);
+			r || D(e, e._tooltipOptions);
 		}, e._handleBlur = () => {
-			r || p();
+			r || O();
 		}, e._handleTouchStart = () => {
 			r = !0, n && clearTimeout(n), n = setTimeout(() => {
-				f(e, e._tooltipOptions);
+				D(e, e._tooltipOptions);
 			}, 400);
 		}, e._handleTouchEnd = () => {
-			n && clearTimeout(n), p(), setTimeout(() => {
+			n && clearTimeout(n), O(), setTimeout(() => {
 				r = !1;
 			}, 500);
 		}, e._handleTouchCancel = () => {
-			n && clearTimeout(n), p(), setTimeout(() => {
+			n && clearTimeout(n), O(), setTimeout(() => {
 				r = !1;
 			}, 500);
 		}, e._handleContextMenu = (t) => {
 			let n = typeof e._tooltipOptions == "object" ? e._tooltipOptions.text : e._tooltipOptions;
-			r && d.isVisible && d.text === n && t.preventDefault();
+			r && E.isVisible && E.text === n && t.preventDefault();
 		}, e.addEventListener("mouseenter", e._handleMouseEnter), e.addEventListener("mouseleave", e._handleMouseLeave), e.addEventListener("focus", e._handleFocus), e.addEventListener("blur", e._handleBlur), e.addEventListener("touchstart", e._handleTouchStart, { passive: !0 }), e.addEventListener("touchend", e._handleTouchEnd), e.addEventListener("touchmove", e._handleTouchCancel, { passive: !0 }), e.addEventListener("touchcancel", e._handleTouchCancel), e.addEventListener("contextmenu", e._handleContextMenu);
 	},
 	updated(e, t) {
 		e._tooltipOptions = t.value;
 		let n = typeof t.value == "object" ? t.value.text : t.value;
-		d.isVisible && d.text !== n && (e.matches(":hover") || document.activeElement === e) && f(e, t.value);
+		E.isVisible && E.text !== n && (e.matches(":hover") || document.activeElement === e) && D(e, t.value);
 	},
 	unmounted(e) {
-		e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)), p();
+		e._handleMouseEnter && (e.removeEventListener("mouseenter", e._handleMouseEnter), e.removeEventListener("mouseleave", e._handleMouseLeave), e.removeEventListener("focus", e._handleFocus), e.removeEventListener("blur", e._handleBlur), e.removeEventListener("touchstart", e._handleTouchStart), e.removeEventListener("touchend", e._handleTouchEnd), e.removeEventListener("touchmove", e._handleTouchCancel), e.removeEventListener("touchcancel", e._handleTouchCancel), e.removeEventListener("contextmenu", e._handleContextMenu)), O();
 	}
-}, h = /* @__PURE__ */ ((e, t) => {
+}, A = /* @__PURE__ */ ((e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
 })({
 	__name: "GlobalTooltip",
-	setup(a) {
-		let u = o(null), f = o(0), p = o(0), m = o(0), h = o(!1);
-		return l(() => d.isVisible, async (e) => {
+	setup(e) {
+		let t = h(null), n = h(0), r = h(0), i = h(0), o = h(!1);
+		return b(() => E.isVisible, async (e) => {
 			if (e) {
-				if (await t(), !u.value || !d.targetRect) return;
-				let e = d.targetRect, n = u.value.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = e.top, o = i - e.bottom, s = e.top - n.height - 8;
-				h.value = !1, (s < 8 || a < n.height + 8 && o > a) && (s = e.bottom + 8, h.value = !0), s + n.height > i - 8 && (s = i - n.height - 8), s < 8 && (s = 8);
-				let c = e.left + e.width / 2, l = c - n.width / 2;
-				l < 8 ? l = 8 : l + n.width > r - 8 && (l = r - n.width - 8);
-				let g = c - (l + n.width / 2), _ = n.width / 2 - 12;
-				g > _ && (g = _), g < -_ && (g = -_), m.value = g, f.value = l, p.value = s;
+				if (await l(), !t.value || !E.targetRect) return;
+				let e = E.targetRect, a = t.value.getBoundingClientRect(), s = window.innerWidth, c = window.innerHeight, u = e.top, d = c - e.bottom, f = e.top - a.height - 8;
+				o.value = !1, (f < 8 || u < a.height + 8 && d > u) && (f = e.bottom + 8, o.value = !0), f + a.height > c - 8 && (f = c - a.height - 8), f < 8 && (f = 8);
+				let p = e.left + e.width / 2, m = p - a.width / 2;
+				m < 8 ? m = 8 : m + a.width > s - 8 && (m = s - a.width - 8);
+				let h = p - (m + a.width / 2), g = a.width / 2 - 12;
+				h > g && (h = g), h < -g && (h = -g), i.value = h, n.value = m, r.value = f;
 			}
-		}), (t, a) => (i(), e("div", {
+		}), (e, s) => (p(), a("div", {
 			ref_key: "tooltipRef",
-			ref: u,
-			class: n([
+			ref: t,
+			class: u([
 				"global-tooltip",
 				{
-					visible: c(d).isVisible,
-					"tooltip-bottom": h.value
+					visible: y(E).isVisible,
+					"tooltip-bottom": o.value
 				},
-				c(d).customClass
+				y(E).customClass
 			]),
-			style: r({
-				transform: `translate(${f.value}px, ${p.value}px)`,
-				"--arrow-offset": `${m.value}px`
+			style: d({
+				transform: `translate(${n.value}px, ${r.value}px)`,
+				"--arrow-offset": `${i.value}px`
 			})
-		}, s(c(d).text), 7));
+		}, v(y(E).text), 7));
 	}
-}, [["__scopeId", "data-v-37c91a21"]]), g = { install(e) {
-	e.directive("ripple", u), e.directive("tooltip", m), e.component("GlobalTooltip", h);
+}, [["__scopeId", "data-v-37c91a21"]]), ee = { class: "nano-modal-title" }, te = {
+	key: 1,
+	class: "nano-modal-body"
+}, j = {
+	key: 2,
+	class: "nano-modal-footer"
+}, M = { class: "nano-modal-actions" }, N = {
+	__name: "NanoModal",
+	props: {
+		visible: {
+			type: Boolean,
+			default: !0
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		width: {
+			type: [String, Number],
+			default: 600
+		},
+		height: {
+			type: [String, Number],
+			default: "auto"
+		},
+		showHeader: {
+			type: Boolean,
+			default: !0
+		},
+		showBody: {
+			type: Boolean,
+			default: !0
+		},
+		showFooter: {
+			type: Boolean,
+			default: !0
+		},
+		showOk: {
+			type: Boolean,
+			default: !0
+		},
+		showCancel: {
+			type: Boolean,
+			default: !0
+		},
+		okText: {
+			type: String,
+			default: "OK"
+		},
+		cancelText: {
+			type: String,
+			default: "Cancel"
+		},
+		okVariant: {
+			type: String,
+			default: "primary"
+		},
+		closeOnBackdrop: {
+			type: Boolean,
+			default: !0
+		},
+		glassmorphism: {
+			type: Boolean,
+			default: !0
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		resizable: {
+			type: Boolean,
+			default: !1
+		},
+		minWidth: {
+			type: Number,
+			default: 300
+		},
+		minHeight: {
+			type: Number,
+			default: 200
+		}
+	},
+	emits: [
+		"close",
+		"ok",
+		"cancel"
+	],
+	setup(m, { emit: y }) {
+		let T = m, E = y, D = h(null), O = h(null), k = h(null), A = h(null), N = h(null), P = h(null), F = h(!1), I = h(!1), L = 0, R = 0, z = 0, B = 0, V = 0, H = 0, U = 0, W = 0, G = n(() => {
+			let e = {};
+			return N.value === null ? (e.maxWidth = typeof T.width == "number" ? `${T.width}px` : T.width, e.width = "100%") : (e.width = `${N.value}px`, e.maxWidth = "none"), P.value === null ? T.height !== "auto" && (e.height = typeof T.height == "number" ? `${T.height}px` : T.height) : (e.height = `${P.value}px`, e.maxHeight = "none"), k.value !== null && A.value !== null && (e.position = "absolute", e.left = `${k.value}px`, e.top = `${A.value}px`, e.transform = "none", e.margin = "0"), e;
+		}), K = (e) => {
+			if (T.draggable && !(e.target.tagName === "BUTTON" || e.target.closest("button"))) {
+				if (F.value = !0, L = e.clientX, R = e.clientY, k.value === null) {
+					let e = O.value.getBoundingClientRect();
+					k.value = e.left, A.value = e.top, N.value === null && (N.value = e.width), P.value === null && (P.value = e.height);
+				}
+				z = k.value, B = A.value, window.addEventListener("mousemove", q), window.addEventListener("mouseup", J);
+			}
+		}, q = (e) => {
+			if (!F.value) return;
+			let t = z + (e.clientX - L), n = B + (e.clientY - R), r = window.innerWidth, i = window.innerHeight, a = O.value.getBoundingClientRect();
+			t < 0 && (t = 0), n < 0 && (n = 0), t + a.width > r && (t = r - a.width), n + a.height > i && (n = i - a.height), k.value = t, A.value = n;
+		}, J = () => {
+			F.value = !1, window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", J);
+		}, Y = (e) => {
+			if (!T.resizable) return;
+			e.preventDefault(), e.stopPropagation(), I.value = !0, V = e.clientX, H = e.clientY;
+			let t = O.value.getBoundingClientRect();
+			k.value === null && (k.value = t.left, A.value = t.top), U = t.width, W = t.height, window.addEventListener("mousemove", X), window.addEventListener("mouseup", Z);
+		}, X = (e) => {
+			if (!I.value) return;
+			let t = U + (e.clientX - V), n = W + (e.clientY - H);
+			t < T.minWidth && (t = T.minWidth), n < T.minHeight && (n = T.minHeight);
+			let r = window.innerWidth - k.value, i = window.innerHeight - A.value;
+			t > r && (t = r), n > i && (n = i), N.value = t, P.value = n;
+		}, Z = () => {
+			I.value = !1, window.removeEventListener("mousemove", X), window.removeEventListener("mouseup", Z);
+		}, Q = (e) => {
+			T.visible && e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), $());
+		};
+		b(() => T.visible, async (e) => {
+			e ? (k.value = null, A.value = null, N.value = null, P.value = null, document.body.style.overflow = "hidden", window.addEventListener("keydown", Q, { capture: !0 }), await l(), D.value && D.value.focus()) : (document.body.style.overflow = "", window.removeEventListener("keydown", Q, { capture: !0 }), J(), Z());
+		}), f(() => {
+			document.body.style.overflow = "", window.removeEventListener("keydown", Q, { capture: !0 }), J(), Z();
+		});
+		let $ = () => E("close"), ne = () => {
+			T.closeOnBackdrop && $();
+		}, re = () => E("ok"), ie = () => {
+			E("cancel"), $();
+		};
+		return (n, l) => {
+			let f = _("ripple");
+			return p(), r(e, { to: "body" }, [c(t, { name: "nano-modal-fade" }, {
+				default: x(() => [m.visible ? (p(), a("div", {
+					key: 0,
+					class: u(["nano-modal-overlay", { "nano-glass": m.glassmorphism }]),
+					onClick: w(ne, ["self"]),
+					onKeydown: l[1] ||= C(w((...e) => n.handleEsc && n.handleEsc(...e), ["stop"]), ["esc"]),
+					tabindex: "-1",
+					ref_key: "modalOverlay",
+					ref: D
+				}, [o("div", {
+					class: u(["nano-modal-window", {
+						"is-dragging": F.value,
+						"is-resizing": I.value
+					}]),
+					style: d(G.value),
+					ref_key: "modalWindow",
+					ref: O
+				}, [
+					m.showHeader ? (p(), a("div", {
+						key: 0,
+						class: u(["nano-modal-header", { "is-draggable": m.draggable }]),
+						onMousedown: K
+					}, [g(n.$slots, "header", {}, () => [o("h2", ee, v(m.title), 1)]), o("button", {
+						class: "nano-modal-close-btn",
+						onClick: w($, ["stop"]),
+						"aria-label": "Close",
+						onMousedown: l[0] ||= w(() => {}, ["stop"])
+					}, [...l[2] ||= [o("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "24",
+						height: "24",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, [o("line", {
+						x1: "18",
+						y1: "6",
+						x2: "6",
+						y2: "18"
+					}), o("line", {
+						x1: "6",
+						y1: "6",
+						x2: "18",
+						y2: "18"
+					})], -1)]], 32)], 34)) : i("", !0),
+					m.showBody ? (p(), a("div", te, [g(n.$slots, "body")])) : i("", !0),
+					m.showFooter ? (p(), a("div", j, [g(n.$slots, "footer", {}, () => [o("div", M, [m.showCancel ? S((p(), a("button", {
+						key: 0,
+						class: "nano-btn nano-btn-secondary",
+						onClick: ie
+					}, [s(v(m.cancelText), 1)])), [[f]]) : i("", !0), m.showOk ? S((p(), a("button", {
+						key: 1,
+						class: u(["nano-btn", "nano-btn-" + m.okVariant]),
+						onClick: re
+					}, [s(v(m.okText), 1)], 2)), [[f]]) : i("", !0)])])])) : i("", !0),
+					m.resizable ? (p(), a("div", {
+						key: 3,
+						class: "nano-modal-resizer",
+						onMousedown: Y
+					}, [...l[3] ||= [o("svg", {
+						width: "10",
+						height: "10",
+						viewBox: "0 0 10 10",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg"
+					}, [o("path", {
+						d: "M9 1V9H1",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					})], -1)]], 32)) : i("", !0)
+				], 6)], 34)) : i("", !0)]),
+				_: 3
+			})]);
+		};
+	}
+}, P = { install(e) {
+	e.directive("ripple", T), e.directive("tooltip", k), e.component("GlobalTooltip", A), e.component("NanoModal", N);
 } };
 //#endregion
-export { h as GlobalTooltip, u as Ripple, g as default, p as hideTooltip, f as showTooltip, m as tooltipDirective, d as tooltipState };
+export { A as GlobalTooltip, N as NanoModal, T as Ripple, P as default, O as hideTooltip, D as showTooltip, k as tooltipDirective, E as tooltipState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gkucmierz/nano-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "license": "ISC",
   "description": "High-performance, minimal footprint Vue 3 UI library and directives.",
   "type": "module",