@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
88 lines (87 loc) • 2.43 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "../button/button.js";
import n from "../popover/popover.js";
import { createBlock as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, resolveDirective as c, resolveDynamicComponent as l, withCtx as u, withDirectives as d, withKeys as f, withModifiers as p } from "vue";
//#region recipes/conversation_view/editor/EditorToolbarPopoverButton.vue
var m = {
name: "EditorToolbarPopoverButton",
components: {
DtButton: t,
DtPopover: n
},
props: {
isActive: {
type: Boolean,
default: !1
},
tooltipMessage: {
type: String,
required: !0
},
dataQa: {
type: String,
default: ""
},
popoverDataQa: {
type: String,
default: ""
},
tabindex: {
type: Number,
default: -1
},
icon: {
type: Object,
required: !0
}
},
emits: ["shift-focus-right", "shift-focus-left"],
data() {
return { pendingCallback: null };
},
methods: { onPopoverOpened(e) {
!e && typeof this.pendingCallback == "function" && (this.pendingCallback(), this.pendingCallback = null);
} }
};
function h(e, t, n, m, h, g) {
let _ = s("dt-button"), v = s("dt-popover"), y = c("dt-tooltip");
return a(), r(v, {
"data-qa": n.popoverDataQa || `${n.dataQa}-popover`,
padding: "small",
"navigation-type": "arrow-keys",
placement: "bottom-start",
"open-with-arrow-keys": !0,
onOpened: g.onPopoverOpened
}, {
anchor: u(({ attrs: o }) => [d((a(), r(_, i({ ref: "buttonRef" }, o, {
active: n.isActive,
"aria-label": n.tooltipMessage,
"data-qa": n.dataQa,
tabindex: n.tabindex,
importance: "clear",
kind: "muted",
size: "xs",
onKeydown: [t[0] || (t[0] = f(p((t) => e.$emit("shift-focus-right"), ["stop"]), ["right"])), t[1] || (t[1] = f(p((t) => e.$emit("shift-focus-left"), ["stop"]), ["left"]))]
}), {
icon: u(() => [(a(), r(l(n.icon), { size: "200" }))]),
_: 1
}, 16, [
"active",
"aria-label",
"data-qa",
"tabindex"
])), [[y, {
message: n.tooltipMessage,
placement: "top",
externalAnchorElement: e.$refs.buttonRef?.$el
}]])]),
content: u(({ close: t }) => [o(e.$slots, "content", { close: (e) => {
h.pendingCallback = e, t();
} })]),
_: 3
}, 8, ["data-qa", "onOpened"]);
}
var g = /* @__PURE__ */ e(m, [["render", h]]);
//#endregion
export { g as default };
//# sourceMappingURL=EditorToolbarPopoverButton.js.map