UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

1 lines 8.39 kB
{"version":3,"file":"callbar-button.cjs","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"],"names":["_sfc_main","DtButton","DtTooltip","utils","label","this","size","CALLBAR_BUTTON_VALID_WIDTH_SIZE","extractVueListeners","event","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createBlock","_component_dt_tooltip","_mergeProps","$props","$options","_ctx","_createElementVNode","_normalizeClass","_createVNode","_component_dt_button","_toHandlers","_renderSlot","_withCtx","_createTextVNode","_toDisplayString"],"mappings":"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"}