@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
260 lines (259 loc) • 6.06 kB
JavaScript
import e, { addClassStyleAttrs as t, removeClassStyleAttrs as n, returnFirstEl as r, warnIfUnmounted as i } from "../../common/utils/index.js";
import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as o } from "../../localization/index.js";
import s from "../button/button.js";
import c from "../popover/popover.js";
import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as l } from "../callbar-button/callbar-button-constants.js";
import u from "../callbar-button/callbar-button.js";
import { createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveComponent as y, withCtx as b } from "vue";
import { DtIconChevronUp as x } from "@dialpad/dialtone-icons/vue3";
//#region recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
var S = {
compatConfig: { MODE: 3 },
name: "DtRecipeCallbarButtonWithPopover",
components: {
DtRecipeCallbarButton: u,
DtPopover: c,
DtButton: s,
DtIconChevronUp: x
},
inheritAttrs: !1,
props: {
id: {
type: String,
default() {
return e.getUniqueString();
}
},
ariaLabel: {
type: String,
default: null,
validator: (e) => e || (void 0).$slots.default
},
placement: {
type: String,
default: "top"
},
offset: {
type: Array,
default: () => [0, 16]
},
initialFocusElement: {
type: String,
default: "first"
},
showCloseButton: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
},
forceShowArrow: {
type: Boolean,
default: !1
},
active: {
type: Boolean,
default: !1
},
danger: {
type: Boolean,
default: !1
},
onClick: {
type: Function,
default: null
},
buttonClass: {
type: [
String,
Array,
Object
],
default: ""
},
textClass: {
type: [
String,
Array,
Object
],
default: ""
},
buttonWidthSize: {
type: String,
default: "xl",
validator: (e) => l.includes(e)
},
contentClass: {
type: [
String,
Array,
Object
],
default: ""
},
openPopover: {
type: Boolean,
default: !1
},
invertedTooltip: {
type: Boolean,
default: !1
},
showTooltip: {
type: Boolean,
default: null
},
tooltipText: {
type: String,
default: void 0
},
tooltipDelay: {
type: Boolean,
default: void 0
}
},
emits: [
"arrow-click",
"click",
"opened"
],
data() {
return {
open: !1,
i18n: new o()
};
},
computed: {
showArrowButton() {
return this.forceShowArrow || !this.disabled;
},
isCompactMode() {
return this.buttonWidthSize === "sm" || this.buttonWidthSize === "md";
},
showPopover() {
return !this.openPopover || this.open ? (this.syncOpenState(), !1) : this.toggleOpen();
},
arrowButtonLabel() {
return this.i18n.$t("DIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL");
}
},
mounted() {
i(r(this.$el), this.$options.name);
},
methods: {
removeClassStyleAttrs: n,
addClassStyleAttrs: t,
arrowClick(e) {
return this.$emit("arrow-click", e), this.toggleOpen();
},
toggleOpen() {
return this.open = !this.open;
},
syncOpenState() {
this.open = this.openPopover;
},
buttonClick(e) {
this.$props.onClick ? this.$emit("click", e) : this.arrowClick(e);
},
onModalIsOpened(e) {
this.open = e, this.$emit("opened", e);
}
}
};
function C(e, t, n, r, i, a) {
let o = y("dt-recipe-callbar-button"), s = y("dt-icon-chevron-up"), c = y("dt-button"), l = y("dt-popover");
return _(), p("div", h({ class: "d-recipe-callbar-button-with-popover" }, a.addClassStyleAttrs(e.$attrs)), [m(o, {
"aria-label": n.ariaLabel,
disabled: n.disabled,
active: n.active,
danger: n.danger,
"button-class": n.buttonClass,
"button-width-size": n.buttonWidthSize,
"text-class": n.textClass,
"inverted-tooltip": n.invertedTooltip,
"show-tooltip": n.showTooltip,
"tooltip-text": n.tooltipText,
"tooltip-delay": n.tooltipDelay,
class: "d-recipe-callbar-button-with-popover--main-button",
onClick: a.buttonClick
}, {
icon: b(() => [v(e.$slots, "icon")]),
tooltip: b(() => [v(e.$slots, "tooltip")]),
default: b(() => [v(e.$slots, "default")]),
_: 3
}, 8, [
"aria-label",
"disabled",
"active",
"danger",
"button-class",
"button-width-size",
"text-class",
"inverted-tooltip",
"show-tooltip",
"tooltip-text",
"tooltip-delay",
"onClick"
]), a.showArrowButton ? (_(), d(l, h({
key: 0,
id: n.id,
modal: !1,
open: i.open,
placement: n.placement,
"initial-focus-element": n.initialFocusElement,
"show-close-button": n.showCloseButton,
offset: n.offset,
padding: "none",
class: "d-recipe-callbar-button-with-popover__popover-wrapper",
"dialog-class": ["d-recipe-callbar-button-with-popover__popover", n.contentClass]
}, a.removeClassStyleAttrs(e.$attrs), {
"open-popover": a.showPopover,
onOpened: a.onModalIsOpened
}), {
anchor: b(() => [m(c, {
active: i.open,
class: g(["d-recipe-callbar-button-with-popover__arrow", { "d-recipe-callbar-button-with-popover__arrow--large": !a.isCompactMode }]),
circle: !0,
importance: "clear",
size: "lg",
"aria-label": a.arrowButtonLabel,
title: a.arrowButtonLabel,
width: "2rem",
onClick: a.arrowClick
}, {
icon: b(() => [m(s, {
class: "d-recipe-callbar-button-with-popover__arrow-icon",
size: "200"
})]),
_: 1
}, 8, [
"active",
"class",
"aria-label",
"title",
"onClick"
])]),
content: b(() => [v(e.$slots, "content")]),
headerContent: b(() => [v(e.$slots, "headerContent")]),
footerContent: b(() => [v(e.$slots, "footerContent")]),
_: 3
}, 16, [
"id",
"open",
"placement",
"initial-focus-element",
"show-close-button",
"offset",
"dialog-class",
"open-popover",
"onOpened"
])) : f("", !0)], 16);
}
var w = /* @__PURE__ */ a(S, [["render", C]]);
//#endregion
export { w as default };
//# sourceMappingURL=callbar-button-with-popover.js.map