@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
204 lines (203 loc) • 5.98 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const callbar_button_constants = require("./callbar_button_constants.cjs");
const common_utils = require("../../../common/utils.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const button = require("../../../components/button/button.vue.cjs");
const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
const _sfc_main = {
name: "DtRecipeCallbarButton",
components: { DtButton: button.default, DtTooltip: tooltip.default },
inheritAttrs: false,
props: {
/**
* Id for the item.
*/
id: {
type: String,
default() {
return common_utils.default.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_constants.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 {
...this.$listeners,
click: (event) => this.$emit("click", event)
};
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dt-tooltip", { attrs: { "id": _vm.id, "inverted": _vm.invertedTooltip, "delay": _vm.tooltipDelay, "show": _vm.showTooltip, "offset": [0, 24] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("span", { class: { "d-recipe-callbar-button--disabled": _vm.disabled } }, [_c("dt-button", _vm._g(_vm._b({ class: _vm.callbarButtonClass, attrs: { "importance": _vm.buttonImportance, "kind": "muted", "icon-position": "top", "aria-disabled": _vm.disabled, "aria-label": _vm.ariaLabel, "label-class": _vm.callbarButtonTextClass, "width": _vm.buttonWidth }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm._t("icon")];
}, proxy: true }], null, true) }, "dt-button", _vm.$attrs, false), _vm.callbarButtonListeners), [_vm._t("default")], 2)], 1)];
}, proxy: true }], null, true) }, [_vm._t("tooltip", function() {
return [_vm._v(" " + _vm._s(_vm.tooltipText) + " ")];
})], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtRecipeCallbarButton = __component__.exports;
exports.default = DtRecipeCallbarButton;
//# sourceMappingURL=callbar_button.vue.cjs.map