@gkucmierz/nano-ui 1.0.2 → 1.2.0

package/dist/nano-ui.css

@@ -1,2 +1,2 @@
-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-e8c73fc7]{--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-e8c73fc7]: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-e8c73fc7]: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-e8c73fc7]{opacity:1;visibility:visible}:root[data-theme=light] .global-tooltip[data-v-e8c73fc7]{--nu-tooltip-bg:#fffffff2;--nu-tooltip-color:#0f172a;--nu-tooltip-border:1px solid #0f172a1a;--nu-tooltip-arrow-border:#0f172a1a;--nu-tooltip-shadow:0 4px 12px #0f172a1a}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,13 +1,115 @@
+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";
 //#region src/directives/ripple.js
-var e = { mounted(e, t) {
+var u = { 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);
 	});
-} }, t = { install(t) {
-	t.directive("ripple", e);
+} }, d = a({
+	isVisible: !1,
+	text: "",
+	customClass: "",
+	targetRect: null
+});
+function f(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 = {
+		top: i.top,
+		left: i.left,
+		width: i.width,
+		bottom: i.bottom,
+		right: i.right
+	}, d.text = n, d.customClass = r, d.isVisible = !0;
+}
+typeof window < "u" && window.addEventListener("scroll", p, {
+	passive: !0,
+	capture: !0
+});
+function p() {
+	d.isVisible = !1;
+}
+//#endregion
+//#region src/directives/tooltip.js
+var m = {
+	mounted(e, t) {
+		e._tooltipOptions = t.value;
+		let n = null, r = !1;
+		e._handleMouseEnter = () => {
+			r || f(e, e._tooltipOptions);
+		}, e._handleMouseLeave = () => {
+			r || p();
+		}, e._handleFocus = () => {
+			r || f(e, e._tooltipOptions);
+		}, e._handleBlur = () => {
+			r || p();
+		}, e._handleTouchStart = () => {
+			r = !0, n && clearTimeout(n), n = setTimeout(() => {
+				f(e, e._tooltipOptions);
+			}, 400);
+		}, e._handleTouchEnd = () => {
+			n && clearTimeout(n), p(), setTimeout(() => {
+				r = !1;
+			}, 500);
+		}, e._handleTouchCancel = () => {
+			n && clearTimeout(n), p(), 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();
+		}, 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);
+	},
+	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();
+	}
+}, h = /* @__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) => {
+			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;
+			}
+		}), (t, a) => (i(), e("div", {
+			ref_key: "tooltipRef",
+			ref: u,
+			class: n([
+				"global-tooltip",
+				{
+					visible: c(d).isVisible,
+					"tooltip-bottom": h.value
+				},
+				c(d).customClass
+			]),
+			style: r({
+				transform: `translate(${f.value}px, ${p.value}px)`,
+				"--arrow-offset": `${m.value}px`
+			})
+		}, s(c(d).text), 7));
+	}
+}, [["__scopeId", "data-v-e8c73fc7"]]), g = { install(e) {
+	e.directive("ripple", u), e.directive("tooltip", m), e.component("GlobalTooltip", h);
 } };
 //#endregion
-export { e as Ripple, t as default };
+export { h as GlobalTooltip, u as Ripple, g as default, p as hideTooltip, f as showTooltip, m as tooltipDirective, d as tooltipState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gkucmierz/nano-ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "High-performance, minimal footprint Vue 3 UI library and directives.",
   "type": "module",
   "main": "./dist/nano-ui.js",
@@ -40,5 +40,8 @@
     "ripple",
     "nano",
     "glassmorphism"
-  ]
+  ],
+  "dependencies": {
+    "vue-router": "^5.0.6"
+  }
 }