@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
86 lines (85 loc) • 2.9 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_utils = require("../../common/utils.cjs");
const tooltip = require("../../components/tooltip/tooltip.vue.cjs");
const DtTooltipDirective = {
name: "dt-tooltip-directive",
install(Vue) {
const mountPoint = document.createElement("div");
document.body.appendChild(mountPoint);
const DEFAULT_PLACEMENT = "top";
const DtTooltipDirectiveApp = new Vue({
name: "DtTooltipDirectiveApp",
components: { DtTooltip: tooltip.default },
data() {
return {
tooltips: []
};
},
methods: {
addOrUpdateTooltip(id, message, placement) {
const index = this.tooltips.findIndex((tooltip2) => tooltip2.id === id);
if (index !== -1) {
this.tooltips[index].message = message;
this.tooltips[index].placement = placement;
} else {
this.tooltips.push({ id, message, placement });
}
},
removeTooltip(id) {
this.tooltips = this.tooltips.filter((tooltip2) => tooltip2.id !== id);
}
},
render(h) {
return h(
"div",
{
domProps: { id: "dt-tooltip-directive-app" }
},
[
this.tooltips.map(({ id, message, placement }) => {
return h(tooltip.default, {
key: id,
props: {
message,
placement,
sticky: true,
/**
* Set the delay to false when running tests only.
*/
delay: process.env.NODE_ENV !== "test",
externalAnchor: `[data-dt-tooltip-id="${id}"]`
}
});
})
]
);
}
});
DtTooltipDirectiveApp.$mount(mountPoint);
Vue.directive("dt-tooltip", {
bind(anchor, binding) {
setupTooltip(anchor, binding);
},
update(anchor, binding) {
if (binding.value !== binding.oldValue) {
setupTooltip(anchor, binding);
}
},
unbind(anchor) {
DtTooltipDirectiveApp.removeTooltip(anchor.getAttribute("data-dt-tooltip-id"));
}
});
function setupTooltip(anchor, binding) {
const tooltipId = anchor.getAttribute("data-dt-tooltip-id") || common_utils.getUniqueString();
const message = binding.value;
const placement = binding.arg || DEFAULT_PLACEMENT;
anchor.setAttribute("data-dt-tooltip-id", tooltipId);
DtTooltipDirectiveApp.addOrUpdateTooltip(tooltipId, message, placement);
}
}
};
const DtTooltipDirective$1 = DtTooltipDirective;
exports.DtTooltipDirective = DtTooltipDirective;
exports.default = DtTooltipDirective$1;
//# sourceMappingURL=tooltip.cjs.map