@v1nt1248/3nclient-lib 0.4.0 → 0.4.1

package/README.md

@@ -56,12 +56,14 @@ You can run the project as `pnpm dev` or `npm run dev`.
   - notifications
   - vue-bus
   - theme
+  - tooltips
 
 ### Store plugins [`@v1nt1248/3nclient-lib/plugins`]
   - store-dialogs
   - store-notifications
   - store-vue-bus
   - store-theme
+  - store-tooltips
 
 ### Constants
   - emoticons

package/dist/chunks/{plugins-keys-DdadrIAg.js → plugins-keys-CjKqZeyH.js}

@@ -4468,6 +4468,6 @@ function Q(e) {
 }
 //#endregion
 //#region src/constants/plugins-keys.ts
-var Ot = Symbol.for("ui3n-dialogs-plugin"), kt = Symbol.for("ui3n-notifications-plugin"), At = Symbol.for("ui3n-vuebus-plugin"), jt = Symbol.for("ui3n-theme-plugin");
+var Ot = Symbol.for("ui3n-dialogs-plugin"), kt = Symbol.for("ui3n-notifications-plugin"), At = Symbol.for("ui3n-vuebus-plugin"), jt = Symbol.for("ui3n-theme-plugin"), Mt = Symbol.for("ui3n-tooltips-plugin");
 //#endregion
-export { L as $, Pe as A, Te as B, Be as C, Ie as D, Le as E, G as F, ge as G, ye as H, Oe as I, fe as J, H as K, K as L, je as M, Ae as N, Ne as O, ke as P, de as Q, De as R, He as S, Re as T, ve as U, U as V, _e as W, B as X, pe as Y, z as Z, Ze as _, m as _t, St as a, re as at, We as b, ut as c, M as ct, st as d, O as dt, I as et, ot as f, x as ft, et as g, f as gt, rt as h, g as ht, At as i, ie as it, Me as j, Fe as k, lt as l, A as lt, it as m, _ as mt, kt as n, oe as nt, dt as o, te as ot, at as p, b as pt, me as q, jt as r, ae as rt, X as s, N as st, Ot as t, F as tt, ct as u, k as ut, Je as v, ze as w, Ue as x, Ge as y, W as z };
+export { de as $, Fe as A, W as B, He as C, Le as D, Re as E, ke as F, _e as G, U as H, G as I, me as J, ge as K, Oe as L, Me as M, je as N, Ie as O, Ae as P, z as Q, K as R, Ue as S, ze as T, ye as U, Te as V, ve as W, pe as X, fe as Y, B as Z, et as _, f as _t, At as a, ie as at, Ge as b, X as c, N as ct, ct as d, k as dt, L as et, st as f, O as ft, rt as g, g as gt, it as h, _ as ht, Mt as i, ae as it, Pe as j, Ne as k, ut as l, M as lt, at as m, b as mt, kt as n, F as nt, St as o, re as ot, ot as p, x as pt, H as q, jt as r, oe as rt, dt as s, te as st, Ot as t, I as tt, lt as u, A as ut, Ze as v, m as vt, Be as w, We as x, Je as y, De as z };

package/dist/chunks/ui3n-tooltip-BbbM2459.js

@@ -0,0 +1,409 @@
+import { D as e, x as t } from "./plugins-keys-CjKqZeyH.js";
+import { Fragment as n, Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, useCssModule as x, useSlots as S, watch as C, withDirectives as w, withKeys as T } from "vue";
+import { arrow as E, autoUpdate as D, offset as O, useFloating as k } from "@floating-ui/vue";
+//#region src/directives/ui3n-ripple.ts
+var A = /* @__PURE__ */ new WeakMap();
+function j(e, t, n) {
+	let r = document.createElement("div"), i = Math.max(e.clientWidth, e.clientHeight), a = i / 2;
+	r.style.width = r.style.height = `${i}px`, r.style.left = `${Math.round(e.clientWidth / 2 - a)}px`, r.style.top = `${Math.round(e.clientHeight / 2 - a)}px`, r.classList.add("ui3n-ripple"), t && r.style.setProperty("--ui3n-ripple-bg-color", t), n && r.style.setProperty("--ui3n-ripple-duration", `${n}ms`);
+	let o = e.getElementsByClassName("ui3n-ripple")[0];
+	o && o.remove(), e.appendChild(r);
+}
+function M(e, t) {
+	A.get(e)?.controller.abort();
+	let { color: n, duration: r, eventsTriggers: i = [], disabled: a = !1 } = t.value || {};
+	if (a) {
+		A.delete(e);
+		return;
+	}
+	let o = new AbortController(), s = { signal: o.signal };
+	(!i.length || i.includes("click")) && e.addEventListener("click", () => j(e, n, r), s), i.length && i.includes("enter") && e.addEventListener("keydown", (t) => {
+		t.key === "Enter" && j(e, n, r);
+	}, s), A.set(e, { controller: o });
+}
+var N = {
+	mounted(e, t) {
+		M(e, t);
+	},
+	updated(e, t) {
+		M(e, t);
+	},
+	beforeUnmount(e) {
+		A.get(e)?.controller.abort(), A.delete(e);
+	}
+}, P = ["id", "title"], F = /* @__PURE__ */ u({
+	__name: "ui3n-icon",
+	props: {
+		id: {},
+		icon: {},
+		title: { default: "" },
+		size: {},
+		width: {},
+		height: {},
+		color: {},
+		horizontalFlip: { type: Boolean },
+		verticalFlip: { type: Boolean },
+		rotate: { default: 0 }
+	},
+	emits: ["click"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = i(() => n.size || n.width), o = i(() => n.size || n.height), c = i(() => {
+			let e = {};
+			a.value !== void 0 && (e["--ui3n-icon-width"] = l(a.value)), o.value !== void 0 && (e["--ui3n-icon-height"] = l(o.value)), n.color && (e["--ui3n-icon-color"] = n.color);
+			let t = [];
+			return n.horizontalFlip && t.push("rotateY(180deg)"), n.verticalFlip && t.push("rotateX(180deg)"), n.rotate && t.push(`rotate(${n.rotate}deg)`), t.length && (e.transform = t.join(" ")), e;
+		});
+		function l(e) {
+			return isNaN(Number(e)) ? String(e) : `${e}px`;
+		}
+		return (t, n) => (g(), s("div", d({
+			id: e.id,
+			"data-ui3n": "icon",
+			class: t.$style.ui3nIcon,
+			title: e.title,
+			style: c.value
+		}, { "data-icon": e.icon }, { onClick: n[0] ||= (e) => r("click", e) }), null, 16, P));
+	}
+}), I = { ui3nIcon: "_ui3nIcon_pfn1q_1" }, L = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, R = /* @__PURE__ */ L(F, [["__cssModules", { $style: I }]]), z = {
+	small: 12,
+	regular: 16,
+	large: 24
+}, B = ["id", "disabled"], V = /* @__PURE__ */ L(/* @__PURE__ */ u({
+	__name: "ui3n-button",
+	props: {
+		id: {},
+		type: { default: "primary" },
+		size: { default: "regular" },
+		square: { type: Boolean },
+		block: { type: Boolean },
+		textColor: {},
+		color: {},
+		elevation: { type: Boolean },
+		icon: {},
+		iconSize: {},
+		iconColor: {},
+		iconPosition: { default: "right" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"init",
+		"click",
+		"enter",
+		"focus",
+		"blur"
+	],
+	setup(e, { emit: t }) {
+		let n = N, r = e, c = t, l = x(), u = _(null), d = i(() => {
+			let e = [
+				l.ui3nButton,
+				l[r.size],
+				l[r.type]
+			];
+			return r.block && r.type !== "icon" && e.push(l.block), r.square && e.push(l.square), r.icon && e.push(l[`withIcon-${r.iconPosition}`]), r.elevation && e.push(l.elevation), e;
+		}), p = i(() => r.iconSize ? r.iconSize : z[r.size]), m = i(() => r.iconColor ? r.iconColor : "inherit");
+		async function y(e, t) {
+			["init", "enter"].includes(e) ? c(e, u.value) : c(e, t);
+		}
+		return C([() => r.color, () => r.textColor], (e, t) => {
+			if (!u.value) return;
+			let [n, i] = t, [a, o] = e;
+			(r.type === "custom" || r.type === "icon") && a !== n && u.value.style.setProperty("--ui3n-button-bg-color", a ?? "var(--color-bg-button-primary-default)"), (r.type === "custom" || r.type === "icon") && o !== i && u.value.style.setProperty("--ui3n-button-text-color", o ?? "var(--color-text-button-primary-default)");
+		}), h(() => {
+			u.value && ((r.type === "custom" || r.type === "icon") && r.color && u.value.style.setProperty("--ui3n-button-bg-color", r.color), r.type === "custom" && r.textColor && u.value.style.setProperty("--ui3n-button-text-color", r.textColor), y("init"));
+		}), (t, r) => w((g(), s("button", {
+			ref_key: "buttonEl",
+			ref: u,
+			id: e.id,
+			"data-ui3n": "button",
+			class: f(d.value),
+			type: "button",
+			disabled: e.disabled,
+			onClick: r[0] ||= (e) => y("click", e),
+			onFocusin: r[1] ||= (e) => y("focus", e),
+			onFocusout: r[2] ||= (e) => y("blur", e),
+			onKeydown: r[3] ||= T((e) => y("enter"), ["enter"])
+		}, [e.icon ? (g(), a(R, {
+			key: 0,
+			class: f(t.$style.buttonIcon),
+			icon: e.icon,
+			size: p.value,
+			color: m.value
+		}, null, 8, [
+			"class",
+			"icon",
+			"size",
+			"color"
+		])) : o("", !0), e.type === "icon" ? o("", !0) : (g(), s("span", {
+			key: 1,
+			class: f(t.$style.text)
+		}, [v(t.$slots, "default")], 2))], 42, B)), [[b(n)]]);
+	}
+}), [["__cssModules", { $style: {
+	ui3nButton: "_ui3nButton_1y5ej_3",
+	"withIcon-left": "_withIcon-left_1y5ej_43",
+	"withIcon-right": "_withIcon-right_1y5ej_46",
+	square: "_square_1y5ej_49",
+	regular: "_regular_1y5ej_57",
+	small: "_small_1y5ej_67",
+	large: "_large_1y5ej_77",
+	block: "_block_1y5ej_87",
+	primary: "_primary_1y5ej_91",
+	elevation: "_elevation_1y5ej_117",
+	text: "_text_1y5ej_122",
+	secondary: "_secondary_1y5ej_160",
+	tertiary: "_tertiary_1y5ej_232",
+	outline: "_outline_1y5ej_302",
+	icon: "_icon_1y5ej_340",
+	custom: "_custom_1y5ej_360",
+	buttonIcon: "_buttonIcon_1y5ej_392"
+} }]]), H = ["id"], U = /* @__PURE__ */ L(/* @__PURE__ */ u({
+	__name: "ui3n-notification",
+	props: {
+		id: {},
+		type: { default: "info" },
+		content: {},
+		position: { default: "center" },
+		duration: { default: 0 },
+		withIcon: {
+			type: Boolean,
+			default: !0
+		},
+		borderRadius: { default: 8 },
+		onOpen: {
+			type: Function,
+			default: () => {}
+		},
+		onClose: {
+			type: Function,
+			default: () => {}
+		}
+	},
+	setup(e) {
+		let n = e, r = null, u = x(), d = i(() => ({
+			success: {
+				icon: "round-check-circle",
+				iconColor: "var(--success-fill-default)",
+				iconRotate: 0
+			},
+			warning: {
+				icon: "round-warning",
+				iconColor: "var(--warning-fill-default)",
+				iconRotate: 0
+			},
+			info: {
+				icon: "round-info",
+				iconColor: "var(--info-fill-default)",
+				iconRotate: 180
+			},
+			error: {
+				icon: "round-info",
+				iconColor: "var(--error-fill-default)",
+				iconRotate: 180
+			}
+		})[n.type || "info"]), _ = i(() => {
+			let e = [
+				u.ui3nNotification,
+				u[`${n.type}Type`],
+				u[`${n.position}Position`]
+			];
+			return n.withIcon && e.push(u.withIcon), e;
+		}), v = i(() => ({ "--ui3n-notification-border-radius": t(n.borderRadius, "8px") }));
+		function S() {
+			n.onClose && n.onClose();
+		}
+		return h(() => {
+			n.onOpen && n.onOpen(), n.duration > 0 && (r = setTimeout(() => {
+				S();
+			}, n.duration));
+		}), m(() => {
+			r && clearTimeout(r);
+		}), (t, n) => (g(), s("div", {
+			id: e.id,
+			"data-ui3n": "notification",
+			class: f(_.value),
+			style: p(v.value)
+		}, [
+			e.withIcon ? (g(), s("div", {
+				key: 0,
+				class: f(b(u).ui3nNotificationIcon)
+			}, [l(R, {
+				icon: d.value.icon,
+				size: "16",
+				rotate: d.value.iconRotate,
+				color: d.value.iconColor
+			}, null, 8, [
+				"icon",
+				"rotate",
+				"color"
+			])], 2)) : o("", !0),
+			c("div", { class: f(b(u).ui3nNotificationContent) }, y(e.content), 3),
+			e.duration ? o("", !0) : (g(), a(V, {
+				key: 1,
+				type: "icon",
+				size: "small",
+				color: "transparent",
+				icon: "round-close",
+				"icon-size": "16",
+				class: f(b(u).closeBtn),
+				onClick: S
+			}, null, 8, ["class"]))
+		], 14, H));
+	}
+}), [["__cssModules", { $style: {
+	ui3nNotification: "_ui3nNotification_152ae_1",
+	withIcon: "_withIcon_152ae_24",
+	ui3nNotificationIcon: "_ui3nNotificationIcon_152ae_28",
+	ui3nNotificationContent: "_ui3nNotificationContent_152ae_41",
+	closeBtn: "_closeBtn_152ae_51",
+	infoType: "_infoType_152ae_59",
+	successType: "_successType_152ae_70",
+	warningType: "_warningType_152ae_81",
+	errorType: "_errorType_152ae_92",
+	leftPosition: "_leftPosition_152ae_103",
+	centerPosition: "_centerPosition_152ae_108",
+	rightPosition: "_rightPosition_152ae_113"
+} }]]), W = 8, G = /* @__PURE__ */ L(/* @__PURE__ */ u({
+	__name: "ui3n-tooltip",
+	props: {
+		id: {},
+		modelValue: { type: Boolean },
+		content: {},
+		maxContentWidth: {},
+		color: {},
+		textColor: {},
+		placement: { default: "top" },
+		triggerElement: {},
+		positionStrategy: {},
+		offsetX: { default: 0 },
+		offsetY: { default: 0 },
+		trigger: { default: "hover" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"open",
+		"opened",
+		"close",
+		"closed",
+		"update:modelValue"
+	],
+	setup(l, { emit: u }) {
+		let d = Math.round(W / 2 * Math.SQRT2), x = l, w = u, T = S(), A = _(!1), j = _(null), M = _(null), N = _(null), P = _(!1), F = null, I = i(() => !x.triggerElement || e(T.default)), L = i(() => x.positionStrategy ? x.positionStrategy : x.triggerElement ? "fixed" : "absolute"), R = i(() => !!x.triggerElement || L.value === "fixed"), z = i(() => x.triggerElement || j.value), B = i(() => {
+			let e = z.value;
+			return e ? e instanceof HTMLElement ? e : "contextElement" in e && e.contextElement instanceof HTMLElement ? e.contextElement : null : null;
+		}), V = i(() => {
+			let [e] = x.placement.split("-");
+			return e;
+		}), H = i(() => {
+			let e = {
+				mainAxis: 0,
+				crossAxis: 0
+			};
+			switch (V.value) {
+				case "top":
+					e.mainAxis = -1 * Number(x.offsetY) + d, e.crossAxis = Number(x.offsetX);
+					break;
+				case "bottom":
+					e.mainAxis = Number(x.offsetY) + d, e.crossAxis = Number(x.offsetX);
+					break;
+				case "left":
+					e.mainAxis = -1 * Number(x.offsetX) + d, e.crossAxis = Number(x.offsetY);
+					break;
+				case "right":
+					e.mainAxis = Number(x.offsetX) + d, e.crossAxis = Number(x.offsetY);
+					break;
+			}
+			return e;
+		}), { floatingStyles: U, isPositioned: G, middlewareData: K, update: q } = k(z, M, {
+			open: A,
+			placement: () => x.placement,
+			strategy: L,
+			middleware: i(() => [O(H.value), E({
+				element: N,
+				padding: 8
+			})]),
+			whileElementsMounted: (e, t, n) => L.value === "fixed" || x.triggerElement ? D(e, t, n) : (n(), () => void 0)
+		}), J = i(() => {
+			let e = {
+				...U.value,
+				"--ui3n-tooltip-arrow-size": `${W}px`
+			};
+			return x.color && (e["--ui3n-tooltip-bg-color"] = x.color), x.textColor && (e["--ui3n-tooltip-text-color"] = x.textColor), x.maxContentWidth !== void 0 && (e["--ui3n-tooltip-max-width"] = t(x.maxContentWidth)), e;
+		});
+		function Y() {
+			x.disabled || (A.value = !0, w("open"), w("update:modelValue", !0));
+		}
+		function X() {
+			x.disabled && !A.value || (A.value = !1, w("close"), w("update:modelValue", !1));
+		}
+		function Z() {
+			x.disabled && !A.value || (A.value ? X() : Y());
+		}
+		function Q() {
+			F &&= (F.removeEventListener("mouseenter", Y), F.removeEventListener("mouseleave", X), F.removeEventListener("click", Z), null);
+		}
+		function $() {
+			Q(), !(!B.value || x.disabled) && (F = B.value, x.trigger === "hover" ? (F.addEventListener("mouseenter", Y), F.addEventListener("mouseleave", X)) : x.trigger === "click" && F.addEventListener("click", Z));
+		}
+		return h(() => {
+			P.value = !0, $();
+		}), m(() => {
+			Q();
+		}), C([
+			() => x.trigger,
+			() => x.disabled,
+			B
+		], () => {
+			P.value && $();
+		}), C(() => x.triggerElement, () => {
+			q();
+		}), C(() => x.modelValue, (e) => x.trigger === "manual" && (A.value = e), { immediate: !0 }), C(G, (e) => {
+			w(e ? "opened" : "closed");
+		}), (e, t) => (g(), s(n, null, [I.value ? (g(), s("div", {
+			key: 0,
+			ref_key: "referenceContainer",
+			ref: j,
+			"data-ui3n": "tooltip",
+			class: f(e.$style.container)
+		}, [v(e.$slots, "default")], 2)) : o("", !0), (g(), a(r, {
+			to: "body",
+			disabled: !P.value || !R.value
+		}, [A.value ? (g(), s("div", {
+			key: 0,
+			ref_key: "floatingEl",
+			ref: M,
+			"data-ui3n": "tooltip-content",
+			class: f([e.$style.floating, R.value && e.$style.floatingTeleported]),
+			style: p(J.value)
+		}, [v(e.$slots, "content", {}, () => [c("div", {
+			ref_key: "floatingArrowEl",
+			ref: N,
+			class: f([e.$style.arrow, e.$style[`arrow-${V.value}`]]),
+			style: p({
+				left: b(K).arrow?.x == null ? "" : `${b(K).arrow.x}px`,
+				top: b(K).arrow?.y == null ? "" : `${b(K).arrow.y}px`
+			})
+		}, null, 6), c("div", { class: f(e.$style.content) }, y(l.content), 3)])], 6)) : o("", !0)], 8, ["disabled"]))], 64));
+	}
+}), [["__cssModules", { $style: {
+	container: "_container_1xxjj_1",
+	floating: "_floating_1xxjj_7",
+	floatingTeleported: "_floatingTeleported_1xxjj_16",
+	arrow: "_arrow_1xxjj_20",
+	"arrow-top": "_arrow-top_1xxjj_29",
+	"arrow-bottom": "_arrow-bottom_1xxjj_32",
+	"arrow-left": "_arrow-left_1xxjj_35",
+	"arrow-right": "_arrow-right_1xxjj_38",
+	content: "_content_1xxjj_42"
+} }]]);
+//#endregion
+export { L as a, R as i, U as n, N as o, V as r, G as t };

package/dist/src/components/ui3n-tooltip/types.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from 'vue';
+import { Ui3nVirtualElement } from '../ui3n-menu/types';
 /**
  * Tooltip placement types
  */
@@ -35,9 +36,14 @@ export interface Ui3nTooltipProps {
      * Tooltip placement
      */
     placement?: Ui3nTooltipPlacement;
+    /**
+     * External element the tooltip is positioned against.
+     * When set, this node is the floating-ui reference and receives hover/click listeners.
+     */
+    triggerElement?: HTMLElement | Ui3nVirtualElement;
     /**
      * Position strategy
-     * @default 'absolute'
+     * @default 'absolute' (or 'fixed' when triggerElement is set)
      */
     positionStrategy?: 'absolute' | 'fixed';
     /**
@@ -91,7 +97,7 @@ export interface Ui3nTooltipSlots {
     /**
      * Default slot
      */
-    default: () => VNode;
+    default?: () => VNode;
     /**
      * Content slot
      */

package/dist/src/components/ui3n-tooltip/ui3n-tooltip-container.d.ts

@@ -0,0 +1,16 @@
+import { TooltipInstance, Ui3nTooltipShowOptions } from '../../plugins/tooltips/types';
+declare function add(item: TooltipInstance): void;
+declare function remove(id: string): void;
+declare function removeByKind(kind: 'show' | 'attach'): void;
+declare function removeByTarget(target: HTMLElement): void;
+declare function update(id: string, patch: Partial<Ui3nTooltipShowOptions>): void;
+declare function clearAll(): void;
+declare const _default: import('vue').DefineComponent<{}, {
+    add: typeof add;
+    remove: typeof remove;
+    removeByKind: typeof removeByKind;
+    removeByTarget: typeof removeByTarget;
+    update: typeof update;
+    clearAll: typeof clearAll;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/src/components/ui3n-tooltip/ui3n-tooltip.d.ts

@@ -26,9 +26,8 @@ declare const __VLS_component: import('vue').DefineComponent<Ui3nTooltipProps, {
     disabled: boolean;
     offsetX: string | number;
     offsetY: string | number;
-    positionStrategy: "absolute" | "fixed";
-    placement: import('./types').Ui3nTooltipPlacement;
     trigger: "click" | "hover" | "manual";
+    placement: import('./types').Ui3nTooltipPlacement;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     referenceContainer: HTMLDivElement;
     floatingEl: HTMLDivElement;

package/dist/src/constants/plugins-keys.d.ts

@@ -3,7 +3,9 @@ import { DialogsPlugin } from '../plugins/dialogs/types';
 import { NotificationsPlugin } from '../plugins/notifications/types';
 import { VueBusPlugin } from '../plugins/vue-bus/types';
 import { ThemePlugin } from '../plugins/theme/types';
+import { TooltipsPlugin } from '../plugins/tooltips/types';
 export declare const DIALOGS_KEY: InjectionKey<DialogsPlugin>;
 export declare const NOTIFICATIONS_KEY: InjectionKey<NotificationsPlugin>;
 export declare const VUEBUS_KEY: InjectionKey<VueBusPlugin<any>>;
 export declare const THEME_KEY: InjectionKey<ThemePlugin>;
+export declare const TOOLTIPS_KEY: InjectionKey<TooltipsPlugin>;

package/dist/src/index.d.ts

@@ -45,6 +45,7 @@ import { default as Ui3nLongPress } from './directives/ui3n-long-press';
 import { VueEventBus } from './plugins/vue-bus/types';
 import { ExtractComponentProps } from './types/components.types';
 import { DialogOptions } from './plugins/dialogs/types';
+import { TooltipsPlugin } from './plugins/tooltips/types';
 export * from './constants';
 export * from './utils';
 export * from './plugins';
@@ -65,6 +66,7 @@ declare module 'vue' {
         dialogStack: Ref<DialogOptions<any>[]>;
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
+        $tooltip: TooltipsPlugin;
     }
     interface GlobalComponents {
         Ui3nAutocomplete: typeof Ui3nAutocomplete;
@@ -128,5 +130,6 @@ declare module 'pinia' {
         };
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
+        $tooltip: TooltipsPlugin;
     }
 }

package/dist/src/plugins/index.d.ts

@@ -10,4 +10,7 @@ import { storeDialogs } from './dialogs/store-dialog';
 import { theme } from './theme/theme';
 import { storeTheme } from './theme/store-theme';
 import { ThemePlugin, ThemePluginOptions, ThemeId } from './theme/types';
-export { notifications, NotificationsPlugin, vueBus, VueBusPlugin, dialogs, DialogsPlugin, DialogOptions, theme, ThemePlugin, ThemePluginOptions, ThemeId, storeNotifications, storeVueBus, storeDialogs, storeTheme, };
+import { tooltips } from './tooltips/tooltips';
+import { storeTooltips } from './tooltips/store-tooltips';
+import { TooltipsPlugin, TooltipHandle, TooltipTarget, Ui3nTooltipShowOptions, Ui3nTooltipAttachOptions } from './tooltips/types';
+export { notifications, NotificationsPlugin, vueBus, VueBusPlugin, dialogs, DialogsPlugin, DialogOptions, theme, ThemePlugin, ThemePluginOptions, ThemeId, tooltips, TooltipsPlugin, TooltipHandle, TooltipTarget, Ui3nTooltipShowOptions, Ui3nTooltipAttachOptions, storeNotifications, storeVueBus, storeDialogs, storeTheme, storeTooltips, };

package/dist/src/plugins/tooltips/store-tooltips.d.ts

@@ -0,0 +1,4 @@
+import { TooltipsPlugin } from './types';
+export declare function storeTooltips(context: any): {
+    $tooltip: TooltipsPlugin;
+};

package/dist/src/plugins/tooltips/tooltips.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vue';
+import { TooltipsPlugin } from './types';
+export declare const tooltips: Plugin;
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $tooltip: TooltipsPlugin;
+    }
+}

package/dist/src/plugins/tooltips/types.d.ts

@@ -0,0 +1,34 @@
+import { Ui3nTooltipProps } from '../../components/ui3n-tooltip/types';
+import { Ui3nVirtualElement } from '../../components/ui3n-menu/types';
+export type TooltipTarget = HTMLElement | Ui3nVirtualElement;
+export type Ui3nTooltipShowOptions = Omit<Ui3nTooltipProps, 'modelValue' | 'trigger' | 'id' | 'triggerElement'>;
+export interface Ui3nTooltipAttachOptions extends Omit<Ui3nTooltipProps, 'modelValue' | 'id' | 'triggerElement'> {
+    trigger?: 'hover' | 'click';
+}
+export interface TooltipHandle {
+    id: string;
+    close: () => void;
+    update: (patch: Partial<Ui3nTooltipShowOptions>) => void;
+}
+export interface TooltipsPlugin {
+    show: (target: TooltipTarget, options: Ui3nTooltipShowOptions) => TooltipHandle;
+    attach: (target: TooltipTarget, options: Ui3nTooltipAttachOptions) => TooltipHandle;
+    hide: () => void;
+    detach: (targetOrId: HTMLElement | string) => void;
+    detachAll: () => void;
+}
+export interface TooltipInstance extends Ui3nTooltipShowOptions {
+    id: string;
+    kind: 'show' | 'attach';
+    target: TooltipTarget;
+    trigger: 'hover' | 'click' | 'manual';
+    modelValue?: boolean;
+}
+export interface TooltipContainerExpose {
+    add: (item: TooltipInstance) => void;
+    remove: (id: string) => void;
+    removeByKind: (kind: 'show' | 'attach') => void;
+    removeByTarget: (target: HTMLElement) => void;
+    update: (id: string, patch: Partial<Ui3nTooltipShowOptions>) => void;
+    clearAll: () => void;
+}

package/dist/src/ui3n-plugins.d.ts

@@ -2,9 +2,9 @@ import { Component, Ref } from 'vue';
 import { ExtractComponentProps } from './types';
 import { Ui3nNotificationProps } from './components/ui3n-notification/types';
 import { Ui3nDialogEvent } from './components/ui3n-dialog/types';
-import { notifications, storeNotifications, NotificationsPlugin, dialogs, storeDialogs, DialogOptions, DialogsPlugin, vueBus, storeVueBus, VueBusPlugin, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId } from './plugins';
+import { notifications, storeNotifications, NotificationsPlugin, dialogs, storeDialogs, DialogOptions, DialogsPlugin, vueBus, storeVueBus, VueBusPlugin, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId, tooltips, storeTooltips, TooltipsPlugin, TooltipHandle, TooltipTarget, Ui3nTooltipShowOptions, Ui3nTooltipAttachOptions } from './plugins';
 import { CbFunction, VueEventBus } from './plugins/vue-bus/types';
-import { NOTIFICATIONS_KEY, DIALOGS_KEY, VUEBUS_KEY, THEME_KEY } from './constants';
+import { NOTIFICATIONS_KEY, DIALOGS_KEY, VUEBUS_KEY, THEME_KEY, TOOLTIPS_KEY } from './constants';
 declare module 'vue' {
     interface ComponentCustomProperties {
         $openDialog: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
@@ -20,6 +20,7 @@ declare module 'vue' {
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
         $theme: ThemePlugin;
+        $tooltip: TooltipsPlugin;
     }
 }
 declare module 'pinia' {
@@ -27,6 +28,7 @@ declare module 'pinia' {
         $createNotice: (params: Ui3nNotificationProps) => void;
         $emitter: VueEventBus<any>;
         $theme: ThemePlugin;
+        $tooltip: TooltipsPlugin;
         $dialogs: {
             open: <V>(component: Component, props: ExtractComponentProps<Component>) => Promise<{
                 event: Ui3nDialogEvent;
@@ -41,4 +43,4 @@ declare module 'pinia' {
         };
     }
 }
-export { notifications, storeNotifications, NOTIFICATIONS_KEY, NotificationsPlugin, dialogs, storeDialogs, DIALOGS_KEY, DialogsPlugin, DialogOptions, vueBus, storeVueBus, VUEBUS_KEY, CbFunction, VueBusPlugin, VueEventBus, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId, THEME_KEY, };
+export { notifications, storeNotifications, NOTIFICATIONS_KEY, NotificationsPlugin, dialogs, storeDialogs, DIALOGS_KEY, DialogsPlugin, DialogOptions, vueBus, storeVueBus, VUEBUS_KEY, CbFunction, VueBusPlugin, VueEventBus, theme, storeTheme, ThemePlugin, ThemePluginOptions, ThemeId, THEME_KEY, tooltips, storeTooltips, TOOLTIPS_KEY, TooltipsPlugin, TooltipHandle, TooltipTarget, Ui3nTooltipShowOptions, Ui3nTooltipAttachOptions, };