@dialpad/dialtone/dist/vue3/lib/tooltip-directive/tooltip.js

Dialpad's Dialtone design system monorepo

import { getUniqueString as e } from "../../common/utils/index.js";
import { TOOLTIP_DIRECTIONS as t } from "../tooltip/tooltip-constants.js";
import n from "../tooltip/tooltip.js";
import { createApp as r, h as i } from "vue";
import a from "deep-equal";
//#region directives/tooltip_directive/tooltip.js
var o = {
	name: "dt-tooltip-directive",
	install(o) {
		if (!globalThis.__DtTooltipDirectiveApp) {
			let e = r({
				name: "DtTooltipDirectiveApp",
				components: { DtTooltip: n },
				data() {
					return { tooltips: [] };
				},
				mounted() {
					globalThis.__DtTooltipDirectiveApp = this;
				},
				methods: {
					addOrUpdateTooltip(e, t) {
						let n = this.tooltips.findIndex((t) => t.id === e);
						n === -1 ? this.tooltips.push({
							id: e,
							...t
						}) : this.tooltips.splice(n, 1, {
							id: e,
							...t
						});
					},
					removeTooltip(e) {
						this.tooltips = this.tooltips.filter((t) => t.id !== e);
					}
				},
				render() {
					return i("div", this.tooltips.map(({ id: e, anchorElement: t, ...r }) => i(n, {
						key: e,
						...r,
						sticky: r.sticky === void 0 ? !0 : r.sticky,
						delay: r.delay === void 0 ? process.env.NODE_ENV !== "test" : r.delay,
						externalAnchorElement: t
					})));
				}
			}), t = document.createElement("div");
			document.body.appendChild(t), e.mount(t);
		}
		let s = globalThis.__DtTooltipDirectiveApp;
		o.directive("dt-tooltip", {
			beforeMount(e, t) {
				c(e, t);
			},
			updated(e, t) {
				a(t.value, t.oldValue) || c(e, t);
			},
			unmounted(e) {
				s.removeTooltip(e.getAttribute("data-dt-tooltip-id"));
			}
		});
		function c(n, r) {
			if (r.value === null || r.value === void 0) {
				let e = n.getAttribute("data-dt-tooltip-id");
				e && s.removeTooltip(e);
				return;
			}
			let i = n.getAttribute("data-dt-tooltip-id") || e(), a;
			if (typeof r.value == "string") a = {
				message: r.value,
				placement: r.arg || "top"
			};
			else if (typeof r.value == "object" && r.value !== null) a = {
				placement: r.arg || r.value.placement || "top",
				...r.value
			};
			else {
				console.error("DtTooltipDirective: binding value must be string, object, null or undefined");
				return;
			}
			Object.keys(r.modifiers).forEach((e) => {
				switch (e) {
					case "inverted":
						a.inverted = !0;
						break;
					case "no-delay":
						a.delay = !1;
						break;
					case "no-transition":
						a.transition = !1;
						break;
					default:
						t.includes(e) && (a.placement = e);
						break;
				}
			}), a.anchorElement = n, n.setAttribute("data-dt-tooltip-id", i), s.addOrUpdateTooltip(i, a);
		}
	}
};
//#endregion
export { o as DtTooltipDirective, o as default };

//# sourceMappingURL=tooltip.js.map