@dialpad/dialtone/dist/vue3/lib/callbar-button/callbar-button.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"callbar-button.cjs","names":[],"sources":["../../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip\n    :id=\"id\"\n    :inverted=\"invertedTooltip\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n    :delay=\"tooltipDelay\"\n    :show=\"showTooltip\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'd-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\">\n      {{ tooltipText }}\n    </slot>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Whether there is a delay before the tooltip shows on hover/focus.\n     * @values true, false\n     */\n    tooltipDelay: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'd-recipe-callbar-button',\n        {\n          'd-recipe-callbar-button--circle': this.circle,\n          'd-recipe-callbar-button--active': this.active,\n          'd-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled': this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-recipe-callbar-button__text',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":"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"}