@dialpad/dialtone-vue/dist/lib/hovercard/hovercard.js

Vue component library for Dialpad's design system Dialtone

import { HTML_ELEMENT_TYPE as e } from "../../common/constants/index.js";
import { getUniqueString as t } from "../../common/utils/index.js";
import { TOOLTIP_DIRECTIONS as n } from "../tooltip/tooltip-constants.js";
import { POPOVER_APPEND_TO_VALUES as r, POPOVER_PADDING_CLASSES as i } from "../popover/popover-constants.js";
import a from "../popover/popover.js";
import { createBlock as o, createElementVNode as s, guardReactiveProps as c, nextTick as l, normalizeProps as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, unref as g, watch as _, withCtx as v } from "vue";
//#region components/hovercard/hovercard.vue
var y = {
	__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 n.includes(e);
			}
		},
		padding: {
			type: String,
			default: "large",
			validator: (e) => Object.keys(i).some((t) => t === e)
		},
		offset: {
			type: Array,
			default: () => [0, 16]
		},
		id: {
			type: String,
			default() {
				return t();
			}
		},
		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: [e, String],
			default: "body",
			validator: (e) => r.includes(e) || e instanceof HTMLElement
		},
		enterDelay: {
			type: Number,
			default: 300
		},
		leaveDelay: {
			type: Number,
			default: 300
		},
		externalAnchorElement: {
			type: e,
			default: null
		}
	},
	emits: ["opened"],
	setup(e, { expose: t }) {
		let n = e, r = m(n.open), i = m(!1), y = m(!1), b = m(null), x = m(null), S = m(null), C = m(null), w = m(null);
		f(() => {
			l(() => {
				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
				});
			});
		}), d(() => {
			C.value && C.value.disconnect(), clearTimeout(b), clearTimeout(x);
		}), _(() => 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, !i.value && E();
		}
		function k() {
			i.value = !0, T();
		}
		function A() {
			i.value = !1, y.value || E();
		}
		return (t, n) => (p(), o(g(a), {
			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: v(({ attrs: e }) => [h(t.$slots, "anchor", u(c(e)))]),
			content: v(() => [s("div", {
				onFocusin: k,
				onFocusout: A
			}, [h(t.$slots, "content")], 32)]),
			headerContent: v(() => [h(t.$slots, "headerContent")]),
			footerContent: v(() => [h(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 { y as default };

//# sourceMappingURL=hovercard.js.map