@dialpad/dialtone/dist/vue3/lib/hovercard/hovercard.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 { POPOVER_APPEND_TO_VALUES as n, POPOVER_PADDING_CLASSES as r } from "../popover/popover-constants.js";
import i from "../popover/popover.js";
import { createBlock as a, createElementVNode as o, guardReactiveProps as s, nextTick as c, normalizeProps as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, unref as h, watch as g, withCtx as _ } from "vue";
//#region components/hovercard/hovercard.vue
var v = {
	__name: "hovercard",
	props: {
		transition: {
			type: Boolean,
			default: !1
		},
		open: {
			type: Boolean,
			default: null
		},
		fallbackPlacements: {
			type: Array,
			default: () => ["auto"]
		},
		placement: {
			type: String,
			default: "top-start",
			validator(e) {
				return t.includes(e);
			}
		},
		padding: {
			type: String,
			default: "large",
			validator: (e) => Object.keys(r).some((t) => t === e)
		},
		offset: {
			type: Array,
			default: () => [0, 16]
		},
		id: {
			type: String,
			default() {
				return e();
			}
		},
		headerClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		footerClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		dialogClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		contentClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		appendTo: {
			type: [HTMLElement, String],
			default: "body",
			validator: (e) => n.includes(e) || e instanceof HTMLElement
		},
		enterDelay: {
			type: Number,
			default: 300
		},
		leaveDelay: {
			type: Number,
			default: 300
		},
		externalAnchorElement: {
			type: HTMLElement,
			default: null
		}
	},
	emits: ["opened"],
	setup(e, { expose: t }) {
		let n = e, r = p(n.open), v = p(!1), y = p(!1), b = p(null), x = p(null), S = p(null), C = p(null), w = p(null);
		d(() => {
			c(() => {
				S.value = w.value?.$refs?.anchor?.firstElementChild, C.value = new MutationObserver(() => {
					S.value && !S.value.isConnected && (r.value = !1);
				}), C.value.observe(document.body, {
					childList: !0,
					subtree: !0
				});
			});
		}), u(() => {
			C.value && C.value.disconnect(), clearTimeout(b), clearTimeout(x);
		}), g(() => n.open, (e) => {
			r.value = e;
		}, { immediate: !0 }), t({
			show: D,
			hide: O
		});
		function T() {
			n.open === null && (clearTimeout(x.value), b.value = setTimeout(() => {
				r.value = !0;
			}, n.enterDelay));
		}
		function E() {
			n.open === null && (clearTimeout(b.value), x.value = setTimeout(() => {
				r.value = !1;
			}, n.leaveDelay));
		}
		function D() {
			y.value = !0, T();
		}
		function O() {
			y.value = !1, !v.value && E();
		}
		function k() {
			v.value = !0, T();
		}
		function A() {
			v.value = !1, y.value || E();
		}
		return (t, n) => (f(), a(h(i), {
			id: e.id,
			ref_key: "popover",
			ref: w,
			open: r.value,
			placement: e.placement,
			"content-class": e.contentClass,
			"dialog-class": e.dialogClass,
			"fallback-placements": e.fallbackPlacements,
			padding: e.padding,
			transition: e.transition ? "fade" : null,
			offset: e.offset,
			modal: !1,
			"initial-focus-element": "none",
			"header-class": e.headerClass,
			"footer-class": e.footerClass,
			"append-to": e.appendTo,
			"external-anchor-element": e.externalAnchorElement,
			"data-qa": "dt-hovercard",
			"enter-delay": e.enterDelay,
			"leave-delay": e.leaveDelay,
			onOpened: n[0] || (n[0] = (e) => t.$emit("opened", e)),
			onMouseenterPopover: D,
			onMouseleavePopover: O,
			onMouseenterPopoverAnchor: D,
			onMouseleavePopoverAnchor: O
		}, {
			anchor: _(({ attrs: e }) => [m(t.$slots, "anchor", l(s(e)))]),
			content: _(() => [o("div", {
				onFocusin: k,
				onFocusout: A
			}, [m(t.$slots, "content")], 32)]),
			headerContent: _(() => [m(t.$slots, "headerContent")]),
			footerContent: _(() => [m(t.$slots, "footerContent")]),
			_: 3
		}, 8, [
			"id",
			"open",
			"placement",
			"content-class",
			"dialog-class",
			"fallback-placements",
			"padding",
			"transition",
			"offset",
			"header-class",
			"footer-class",
			"append-to",
			"external-anchor-element",
			"enter-delay",
			"leave-delay"
		]));
	}
};
//#endregion
export { v as default };

//# sourceMappingURL=hovercard.js.map