@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
237 lines (236 loc) • 6.66 kB
JavaScript
import { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from "./callbar_button_constants.js";
import utils, { extractVueListeners, removeClassStyleAttrs, addClassStyleAttrs } from "../../../common/utils.js";
import { resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, createVNode, toHandlers, renderSlot, createTextVNode, toDisplayString } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../../../components/button/button.vue.js";
import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeCallbarButton",
components: { DtButton, DtTooltip },
inheritAttrs: false,
props: {
/**
* Id for the item.
*/
id: {
type: String,
default() {
return utils.getUniqueString();
}
},
/**
* Determines whether the button should have active styling
* default is false.
* @values true, false
* @see https://dialtone.dialpad.com/components/button/
*/
active: {
type: Boolean,
default: false
},
/**
* Determines whether the button should have danger styling
* default is false.
* @values true, false
* @see https://dialtone.dialpad.com/components/button/
*/
danger: {
type: Boolean,
default: false
},
/**
* Determines whether the button should be disabled
* default is false.
* @values true, false
*/
disabled: {
type: Boolean,
default: false
},
/**
* Whether the button is a circle or not.
* @values true, false
* @see https://dialtone.dialpad.com/components/button/
*/
circle: {
type: Boolean,
default: false
},
/**
* Aria label for the button. If empty, it takes its value from the default slot.
*/
ariaLabel: {
type: String,
default: null,
validator: (label) => {
return label || (void 0).$slots.default;
}
},
/**
* Additional class name for the button wrapper element.
*/
buttonClass: {
type: [String, Array, Object],
default: ""
},
/**
* Additional class name for the button text.
*/
textClass: {
type: [String, Array, Object],
default: ""
},
/*
* Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
*/
buttonWidthSize: {
type: String,
default: "xl",
validator: (size) => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size)
},
/**
* The fill and outline of the button associated with its visual importance.
* @values clear, outlined, primary
*/
importance: {
type: String,
default: ""
},
/**
* Whether the tooltip has an inverted background color.
* @values true, false
*/
invertedTooltip: {
type: Boolean,
default: false
},
/**
* Use this if you would like to manually override the logic for when the tooltip shows.
* Otherwise it will just show on hover/focus.
* @values null, true, false
*/
showTooltip: {
type: Boolean,
default: null
},
/**
* The message that displays in the tooltip. This will be overridden by the tooltip slot.
*/
tooltipText: {
type: String,
default: void 0
},
/**
* Whether there is a delay before the tooltip shows on hover/focus.
* @values true, false
*/
tooltipDelay: {
type: Boolean,
default: void 0
}
},
emits: [
/**
* Native click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"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() {
if (this.importance) {
return this.importance;
}
return this.circle ? "outlined" : "clear";
},
callbarButtonListeners() {
return {
...extractVueListeners(this.$attrs),
click: (event) => this.$emit("click", event)
};
}
},
methods: {
removeClassStyleAttrs,
addClassStyleAttrs
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_button = resolveComponent("dt-button");
const _component_dt_tooltip = resolveComponent("dt-tooltip");
return openBlock(), createBlock(_component_dt_tooltip, mergeProps({
id: $props.id,
inverted: $props.invertedTooltip
}, $options.addClassStyleAttrs(_ctx.$attrs), {
delay: $props.tooltipDelay,
show: $props.showTooltip,
offset: [0, 24]
}), {
anchor: withCtx(() => [
createElementVNode("span", {
class: normalizeClass({ "d-recipe-callbar-button--disabled": $props.disabled })
}, [
createVNode(_component_dt_button, mergeProps({
importance: $options.buttonImportance,
kind: "muted",
"icon-position": "top",
"aria-disabled": $props.disabled,
"aria-label": $props.ariaLabel,
"label-class": $options.callbarButtonTextClass,
width: $options.buttonWidth,
class: $options.callbarButtonClass
}, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.callbarButtonListeners)), {
icon: withCtx(() => [
renderSlot(_ctx.$slots, "icon")
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])
], 2)
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "tooltip", {}, () => [
createTextVNode(toDisplayString($props.tooltipText), 1)
])
]),
_: 3
}, 16, ["id", "inverted", "delay", "show"]);
}
const DtRecipeCallbarButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtRecipeCallbarButton as default
};
//# sourceMappingURL=callbar_button.vue.js.map