@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
216 lines (215 loc) • 6.46 kB
JavaScript
import { getUniqueString } from "../../common/utils.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
import DtPopover from "../popover/popover.vue.js";
import { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from "../tooltip/tooltip_constants.js";
import { POPOVER_PADDING_CLASSES, POPOVER_APPEND_TO_VALUES } from "../popover/popover_constants.js";
const _sfc_main = {
name: "DtHovercard",
components: {
DtPopover
},
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: false
},
/**
* 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: () => {
return ["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(placement) {
return TOOLTIP_DIRECTIONS.includes(placement);
}
},
/**
* Padding size class for the popover content.
* @values none, small, medium, large
*/
padding: {
type: String,
default: "large",
validator: (padding) => {
return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);
}
},
/**
* 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 getUniqueString();
}
},
/**
* 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: (appendTo) => {
return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
}
},
/**
* The enter delay in milliseconds before the hovercard is shown.
* @type number
*/
enterDelay: {
type: Number,
default: TOOLTIP_DELAY_MS
},
/**
* The leave delay in milliseconds before the hovercard is hidden.
* @type number
*/
leaveDelay: {
type: Number,
default: TOOLTIP_DELAY_MS
}
},
emits: [
/**
* Emitted when popover is shown or hidden
*
* @event opened
* @type {Boolean | Array}
*/
"opened"
],
data() {
return {
hovercardOpen: this.open,
inTimer: null,
outTimer: null
};
},
watch: {
open: {
handler: function(open) {
this.hovercardOpen = open;
},
immediate: true
}
},
methods: {
setInTimer() {
this.inTimer = setTimeout(() => {
this.hovercardOpen = true;
}, this.enterDelay);
},
setOutTimer() {
this.outTimer = setTimeout(() => {
this.hovercardOpen = false;
}, this.leaveDelay);
},
onMouseEnter() {
if (this.open === null) {
clearTimeout(this.outTimer);
this.setInTimer();
}
},
onMouseLeave() {
if (this.open === null) {
clearTimeout(this.inTimer);
this.setOutTimer();
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-popover", { attrs: { "id": _vm.id, "open": _vm.hovercardOpen, "placement": _vm.placement, "content-class": _vm.contentClass, "dialog-class": _vm.dialogClass, "fallback-placements": _vm.fallbackPlacements, "padding": _vm.padding, "transition": _vm.transition ? "fade" : null, "offset": _vm.offset, "modal": false, "initial-focus-element": "none", "header-class": _vm.headerClass, "footer-class": _vm.footerClass, "append-to": _vm.appendTo, "data-qa": "dt-hovercard", "enter-delay": _vm.enterDelay, "leave-delay": _vm.leaveDelay }, on: { "opened": (e) => _vm.$emit("opened", e), "mouseenter-popover": _vm.onMouseEnter, "mouseleave-popover": _vm.onMouseLeave, "mouseenter-popover-anchor": _vm.onMouseEnter, "mouseleave-popover-anchor": _vm.onMouseLeave }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
return [_vm._t("anchor", null, null, attrs)];
} }, { key: "content", fn: function() {
return [_vm._t("content")];
}, proxy: true }, { key: "headerContent", fn: function() {
return [_vm._t("headerContent")];
}, proxy: true }, { key: "footerContent", fn: function() {
return [_vm._t("footerContent")];
}, proxy: true }], null, true) });
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const hovercard = __component__.exports;
export {
hovercard as default
};
//# sourceMappingURL=hovercard.vue.js.map