@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
84 lines (83 loc) • 2.86 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const tooltip = require("../../components/tooltip/tooltip.vue.cjs");
const DtTooltipDirective = {
name: "dt-tooltip-directive",
install(app) {
let tooltipInstance;
const mountPoint = document.createElement("div");
document.body.appendChild(mountPoint);
const DEFAULT_PLACEMENT = "top";
const DtTooltipDirectiveApp = vue.createApp({
name: "DtTooltipDirectiveApp",
components: { DtTooltip: tooltip.default },
data() {
return {
tooltips: []
};
},
mounted() {
tooltipInstance = vue.getCurrentInstance();
},
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() {
return vue.h(
"div",
this.tooltips.map(({ id, message, placement }) => {
return vue.h(tooltip.default, {
key: id,
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);
app.directive("dt-tooltip", {
beforeMount(anchor, binding) {
setupTooltip(anchor, binding);
},
updated(anchor, binding) {
if (binding.value !== binding.oldValue) {
setupTooltip(anchor, binding);
}
},
unmounted(anchor) {
tooltipInstance.ctx.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);
tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);
}
}
};
const DtTooltipDirective$1 = DtTooltipDirective;
exports.DtTooltipDirective = DtTooltipDirective;
exports.default = DtTooltipDirective$1;
//# sourceMappingURL=tooltip.cjs.map