@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
227 lines (226 loc) • 7.05 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common_utils = require("../../common/utils.cjs");
const tooltip_constants = require("../tooltip/tooltip_constants.cjs");
const popover_constants = require("../popover/popover_constants.cjs");
const popover = require("../popover/popover.vue.cjs");
const _sfc_main = {
__name: "hovercard",
props: {
/**
* Fade transition when the content display is toggled.
* @type boolean
* @values true, false
*/
transition: {
type: Boolean,
default: false
},
/**
* 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
},
/**
* 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_constants.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_constants.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 common_utils.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_constants.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_constants.TOOLTIP_DELAY_MS
},
/**
* The leave delay in milliseconds before the hovercard is hidden.
* @type number
*/
leaveDelay: {
type: Number,
default: tooltip_constants.TOOLTIP_DELAY_MS
}
},
emits: [
/**
* Emitted when hovercard is shown or hidden
*
* @event opened
* @type {Boolean | Array}
*/
"opened"
],
setup(__props) {
const props = __props;
const hovercardOpen = vue.ref(props.open);
const inTimer = vue.ref(null);
const outTimer = vue.ref(null);
vue.watch(() => props.open, (open) => {
hovercardOpen.value = open;
}, { immediate: true });
function setInTimer() {
inTimer.value = setTimeout(() => {
hovercardOpen.value = true;
}, props.enterDelay);
}
function setOutTimer() {
outTimer.value = setTimeout(() => {
hovercardOpen.value = false;
}, props.leaveDelay);
}
function onMouseEnter() {
if (props.open === null) {
clearTimeout(outTimer.value);
setInTimer();
}
}
function onMouseLeave() {
if (props.open === null) {
clearTimeout(inTimer.value);
setOutTimer();
}
}
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(popover.default), {
id: __props.id,
open: hovercardOpen.value,
placement: __props.placement,
"content-class": __props.contentClass,
"dialog-class": __props.dialogClass,
"fallback-placements": __props.fallbackPlacements,
padding: __props.padding,
transition: __props.transition ? "fade" : null,
offset: __props.offset,
modal: false,
"initial-focus-element": "none",
"header-class": __props.headerClass,
"footer-class": __props.footerClass,
"append-to": __props.appendTo,
"data-qa": "dt-hovercard",
"enter-delay": __props.enterDelay,
"leave-delay": __props.leaveDelay,
onOpened: _cache[0] || (_cache[0] = (e) => _ctx.$emit("opened", e)),
onMouseenterPopover: onMouseEnter,
onMouseleavePopover: onMouseLeave,
onMouseenterPopoverAnchor: onMouseEnter,
onMouseleavePopoverAnchor: onMouseLeave
}, {
anchor: vue.withCtx(({ attrs }) => [
vue.renderSlot(_ctx.$slots, "anchor", vue.normalizeProps(vue.guardReactiveProps(attrs)))
]),
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "content")
]),
headerContent: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "headerContent")
]),
footerContent: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "footerContent")
]),
_: 3
}, 8, ["id", "open", "placement", "content-class", "dialog-class", "fallback-placements", "padding", "transition", "offset", "header-class", "footer-class", "append-to", "enter-delay", "leave-delay"]);
};
}
};
const _sfc_main$1 = _sfc_main;
exports.default = _sfc_main$1;
//# sourceMappingURL=hovercard.vue.cjs.map