@dialpad/dialtone/dist/vue2/recipes/buttons/callbar_button/callbar_button.vue.js

Dialpad's Dialtone design system monorepo

import { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from "./callbar_button_constants.js";
import utils from "../../../common/utils.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtButton from "../../../components/button/button.vue.js";
import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
const _sfc_main = {
  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 {
        ...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__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const DtRecipeCallbarButton = __component__.exports;
export {
  DtRecipeCallbarButton as default
};
//# sourceMappingURL=callbar_button.vue.js.map