@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
69 lines (68 loc) • 2.28 kB
JavaScript
import { defineComponent as c, ref as e } from "vue";
import { NeonPosition as u } from "../../../model/common/position/NeonPosition.es.js";
import { NeonTooltipStyle as m } from "../../../model/feedback/tooltip/NeonTooltipStyle.es.js";
import { NeonTooltipPlacementUtils as f } from "../../../utils/feedback/tooltip/NeonTooltipPlacementUtils.es.js";
import { NeonOutlineStyle as s } from "../../../model/common/accessibility/NeonOutlineStyle.es.js";
import { NeonFunctionalColor as y } from "../../../model/common/color/NeonFunctionalColor.es.js";
const C = c({
name: "NeonTooltip",
props: {
/**
* Id of the tooltip.
*/
id: { type: String, default: null },
/**
* Placement of the tooltip contents.
*/
placement: { type: String, default: u.Top },
/**
* Style of the tooltip, use <em>Tooltip</em> for a simple tooltip, use <em>Popover</em> for larger more complex
* content.
*/
tooltipStyle: { type: String, default: m.Tooltip },
/**
* Style of the outline to use when the tooltip target has focus, use <em>text</em> for tooltips wrapping text and
* <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
*/
outlineStyle: { type: String, default: s.Text },
/**
* Color of the tooltip target when it is focussed.
*/
outlineColor: { type: String, default: y.Primary },
/**
* Restrict placement to within this container.
*/
placementContainer: { type: Object, default: null }
},
setup(o) {
const l = e(null), n = e(null), i = e(o.placement), t = e(!1), r = () => {
i.value = f.calculatePlacement(
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
l.value,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
n.value,
o.placement,
o.placementContainer
);
}, a = () => {
t.value = !0, setTimeout(r);
}, p = () => {
t.value = !1;
};
return {
tooltip: l,
tooltipPlacement: i,
content: n,
open: t,
toggleTooltip: () => {
t.value ? p() : a();
},
closeTooltip: p,
openTooltip: a
};
}
});
export {
C as default
};
//# sourceMappingURL=NeonTooltip.es.js.map