@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
226 lines (225 loc) • 7.05 kB
JavaScript
import { getUniqueString as s } from "../../common/utils/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import { TOOLTIP_DELAY_MS as o, TOOLTIP_DIRECTIONS as i } from "../tooltip/tooltip-constants.js";
import l from "../popover/popover.js";
import { POPOVER_APPEND_TO_VALUES as u, POPOVER_PADDING_CLASSES as c } from "../popover/popover-constants.js";
const d = {
name: "DtHovercard",
components: {
DtPopover: l
},
props: {
/**
* Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.
* If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
* Supports .sync modifier
* @values null, true, false
*/
open: {
type: Boolean,
default: null
},
/**
* Fade transition when the content display is toggled.
* @type boolean
* @values true, false
*/
transition: {
type: Boolean,
default: !1
},
/**
* If the popover does not fit in the direction described by "placement",
* it will attempt to change its direction to the "fallbackPlacements".
* @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
*/
fallbackPlacements: {
type: Array,
default: () => ["auto"]
},
/**
* The direction the popover displays relative to the anchor.
* @see https://atomiks.github.io/tippyjs/v6/all-props/#placement"
* @values top, top-start, top-end,
* right, right-start, right-end,
* left, left-start, left-end,
* bottom, bottom-start, bottom-end,
* auto, auto-start, auto-end
*/
placement: {
type: String,
default: "top-start",
validator(t) {
return i.includes(t);
}
},
/**
* Padding size class for the popover content.
* @values none, small, medium, large
*/
padding: {
type: String,
default: "large",
validator: (t) => Object.keys(c).some((e) => e === t)
},
/**
* Displaces the content box from its anchor element
* by the specified number of pixels.
* @see https://atomiks.github.io/tippyjs/v6/all-props/#offset"
*/
offset: {
type: Array,
default: () => [0, 16]
},
/**
* The id of the tooltip
*/
id: {
type: String,
default() {
return s();
}
},
/**
* Additional class name for the header content wrapper element.
*/
headerClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional class name for the footer content wrapper element.
*/
footerClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional class name for the dialog element.
*/
dialogClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional class name for the content wrapper element.
*/
contentClass: {
type: [String, Array, Object],
default: ""
},
/**
* Sets the element to which the popover is going to append to.
* 'body' will append to the nearest body (supports shadow DOM).
* @values 'body', 'parent', HTMLElement,
*/
appendTo: {
type: [HTMLElement, String],
default: "body",
validator: (t) => u.includes(t) || t instanceof HTMLElement
},
/**
* The enter delay in milliseconds before the hovercard is shown.
* @type number
*/
enterDelay: {
type: Number,
default: o
},
/**
* The leave delay in milliseconds before the hovercard is hidden.
* @type number
*/
leaveDelay: {
type: Number,
default: o
}
},
emits: [
/**
* Emitted when popover is shown or hidden
*
* @event opened
* @type {Boolean | Array}
*/
"opened"
],
data() {
return {
hovercardOpen: this.open,
anchorEl: null,
observer: null,
inTimer: null,
outTimer: null,
contentFocused: !1,
mouseOverHovercard: !1
};
},
watch: {
open: {
handler: function(t) {
this.hovercardOpen = t;
},
immediate: !0
}
},
mounted() {
this.$nextTick(() => {
var t, e, r;
this.anchorEl = (r = (e = (t = this.$refs.popover) == null ? void 0 : t.$refs) == null ? void 0 : e.anchor) == null ? void 0 : r.firstElementChild, this.observer = new MutationObserver(() => {
this.anchorEl && !this.anchorEl.isConnected && (this.hovercardOpen = !1);
}), this.observer.observe(document.body, {
childList: !0,
subtree: !0
});
});
},
beforeDestroy() {
this.observer && this.observer.disconnect(), clearTimeout(this.inTimer), clearTimeout(this.outTimer);
},
methods: {
setInTimer() {
this.open === null && (clearTimeout(this.outTimer), this.inTimer = setTimeout(() => {
this.hovercardOpen = !0;
}, this.enterDelay));
},
setOutTimer() {
this.open === null && (clearTimeout(this.inTimer), this.outTimer = setTimeout(() => {
this.hovercardOpen = !1;
}, this.leaveDelay));
},
onMouseEnter() {
this.mouseOverHovercard = !0, this.setInTimer();
},
onMouseLeave() {
this.mouseOverHovercard = !1, !this.contentFocused && this.open === null && (clearTimeout(this.inTimer), this.setOutTimer());
},
onContentFocusIn() {
this.contentFocused = !0, this.setInTimer();
},
onContentFocusOut() {
this.contentFocused = !1, this.mouseOverHovercard || this.setOutTimer();
}
}
};
var f = function() {
var e = this, r = e._self._c;
return r("dt-popover", { ref: "popover", attrs: { id: e.id, open: e.hovercardOpen, 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, "data-qa": "dt-hovercard", "enter-delay": e.enterDelay, "leave-delay": e.leaveDelay }, on: { opened: (n) => e.$emit("opened", n), "mouseenter-popover": e.onMouseEnter, "mouseleave-popover": e.onMouseLeave, "mouseenter-popover-anchor": e.onMouseEnter, "mouseleave-popover-anchor": e.onMouseLeave }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: n }) {
return [e._t("anchor", null, null, n)];
} }, { key: "content", fn: function() {
return [r("div", { on: { focusin: e.onContentFocusIn, focusout: e.onContentFocusOut } }, [e._t("content")], 2)];
}, proxy: !0 }, { key: "headerContent", fn: function() {
return [e._t("headerContent")];
}, proxy: !0 }, { key: "footerContent", fn: function() {
return [e._t("footerContent")];
}, proxy: !0 }], null, !0) });
}, p = [], m = /* @__PURE__ */ a(
d,
f,
p
);
const _ = m.exports;
export {
_ as default
};
//# sourceMappingURL=hovercard.js.map