@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
169 lines (168 loc) • 3.82 kB
JavaScript
import e, { addClassStyleAttrs as t, extractVueListeners as n, removeClassStyleAttrs as r } from "../../common/utils/index.js";
import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import a from "../button/button.js";
import o from "../tooltip/tooltip.js";
import { CALLBAR_BUTTON_VALID_WIDTH_SIZE as s } from "./callbar-button-constants.js";
import { createBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveComponent as g, toDisplayString as _, toHandlers as v, withCtx as y } from "vue";
//#region recipes/buttons/callbar_button/callbar_button.vue
var b = {
compatConfig: { MODE: 3 },
name: "DtRecipeCallbarButton",
components: {
DtButton: a,
DtTooltip: o
},
inheritAttrs: !1,
props: {
id: {
type: String,
default() {
return e.getUniqueString();
}
},
active: {
type: Boolean,
default: !1
},
danger: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
circle: {
type: Boolean,
default: !1
},
ariaLabel: {
type: String,
default: null,
validator: (e) => e || (void 0).$slots.default
},
buttonClass: {
type: [
String,
Array,
Object
],
default: ""
},
textClass: {
type: [
String,
Array,
Object
],
default: ""
},
buttonWidthSize: {
type: String,
default: "xl",
validator: (e) => s.includes(e)
},
importance: {
type: String,
default: ""
},
invertedTooltip: {
type: Boolean,
default: !1
},
showTooltip: {
type: Boolean,
default: null
},
tooltipText: {
type: String,
default: void 0
},
tooltipDelay: {
type: Boolean,
default: void 0
}
},
emits: ["click"],
computed: {
callbarButtonClass() {
return [
this.buttonClass,
"d-recipe-callbar-button",
{
"d-recipe-callbar-button--circle": this.circle,
"d-recipe-callbar-button--active": this.active,
"d-recipe-callbar-button--danger": this.danger,
"d-btn--disabled": this.disabled
}
];
},
callbarButtonTextClass() {
return ["d-recipe-callbar-button__text", this.textClass];
},
buttonWidth() {
switch (this.buttonWidthSize) {
case "sm": return "4.5rem";
case "md": return "6rem";
default: return "8.4rem";
}
},
buttonImportance() {
return this.importance ? this.importance : this.circle ? "outlined" : "clear";
},
callbarButtonListeners() {
return {
...n(this.$attrs),
click: (e) => this.$emit("click", e)
};
}
},
methods: {
removeClassStyleAttrs: r,
addClassStyleAttrs: t
}
};
function x(e, t, n, r, i, a) {
let o = g("dt-button"), s = g("dt-tooltip");
return m(), c(s, f({
id: n.id,
inverted: n.invertedTooltip
}, a.addClassStyleAttrs(e.$attrs), {
delay: n.tooltipDelay,
show: n.showTooltip,
offset: [0, 24]
}), {
anchor: y(() => [l("span", { class: p({ "d-recipe-callbar-button--disabled": n.disabled }) }, [d(o, f({
importance: a.buttonImportance,
kind: "muted",
"icon-position": "top",
"aria-disabled": n.disabled,
"aria-label": n.ariaLabel,
"label-class": a.callbarButtonTextClass,
width: a.buttonWidth,
class: a.callbarButtonClass
}, a.removeClassStyleAttrs(e.$attrs), v(a.callbarButtonListeners)), {
icon: y(() => [h(e.$slots, "icon")]),
default: y(() => [h(e.$slots, "default")]),
_: 3
}, 16, [
"importance",
"aria-disabled",
"aria-label",
"label-class",
"width",
"class"
])], 2)]),
default: y(() => [h(e.$slots, "tooltip", {}, () => [u(_(n.tooltipText), 1)])]),
_: 3
}, 16, [
"id",
"inverted",
"delay",
"show"
]);
}
var S = /* @__PURE__ */ i(b, [["render", x]]);
//#endregion
export { S as default };
//# sourceMappingURL=callbar-button.js.map