@dialpad/dialtone-vue/dist/lib/button/button.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"$slots.default\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport Vue from 'vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\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: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      if (!this.assertiveOnFocus) {\n        return this.$listeners;\n      }\n      return {\n        ...this.$listeners,\n        focusin: () => {\n          this.isInFocus = true;\n        },\n\n        focusout: () => {\n          this.isInFocus = false;\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          Vue.util.warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$scopedSlots.icon && this.$scopedSlots.icon() && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","DialtoneLocalization","BUTTON_ICON_SIZES","Vue","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION"],"mappings":"iTAsEAA,EAAA,CACA,KAAA,WAEA,MAAA,CAKA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,aAAA,CACA,KAAA,OACA,QAAA,OACA,UAAAC,GAAA,OAAA,KAAAC,yBAAA,EAAA,SAAAD,CAAA,CACA,EAMA,WAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAE,GAAA,OAAA,KAAAC,6BAAA,EAAA,SAAAD,CAAA,CACA,EAOA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAE,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAAD,CAAA,CACA,EAOA,aAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAaA,KAAA,CACA,KAAA,OACA,QAAA,SACA,UAAAE,GAAAC,eAAA,SAAAD,CAAA,CACA,EASA,MAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAE,GAAA,OAAA,KAAAC,uBAAA,EAAA,SAAAD,CAAA,CACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAMA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAE,GAAA,OAAA,KAAAC,uBAAA,EAAA,SAAAD,CAAA,CACA,EAQA,iBAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,OAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,UACA,EAEA,MAAA,CACA,MAAA,CACA,wBAAAT,EAAAA,wBAEA,UAAA,GACA,KAAA,IAAAW,EAAAA,oBACA,CACA,EAEA,SAAA,CAEA,iBAAA,CACA,OAAA,KAAA,iBAGA,CACA,GAAA,KAAA,WACA,QAAA,IAAA,CACA,KAAA,UAAA,EACA,EAEA,SAAA,IAAA,CACA,KAAA,UAAA,EACA,CACA,EAXA,KAAA,UAYA,EAEA,kBAAA,CACA,OAAA,KAAA,kBAAA,KAAA,UAAA,YAAA,KAAA,OAAA,QACA,EAEA,UAAA,CACA,OAAAC,EAAAA,kBAAA,KAAA,IAAA,CACA,CACA,EAEA,MAAA,CACA,OAAA,CACA,KAAA,GACA,UAAA,GACA,SAAA,CACA,QAAA,IAAA,WAAA,eAEA,KAAA,QAAA,KAAA,MACAC,EAAA,KAAA,KAAA,qDAAA,IAAA,EAGA,KAAA,yBAAA,KAAA,OAAA,KAAA,KAAA,KAAA,UAAA,EACA,CACA,CACA,EAEA,QAAA,CACA,eAAA,CACA,OAAA,KAAA,KACA,CACA,SACAC,EAAAA,oBAAA,KAAA,SAAA,KAAA,YAAA,EACAN,EAAAA,sBAAA,KAAA,IAAA,CACA,EAEA,KAAA,OAAA,WACA,CAAA,iBAAA,EAEA,CACA,QACAN,EAAAA,4BAAA,KAAA,UAAA,EACAQ,EAAAA,sBAAA,KAAA,IAAA,EACAF,EAAAA,sBAAA,KAAA,IAAA,EACA,CACA,gBAAA,KAAA,OACA,iBAAA,KAAA,QACA,mBAAA,KAAA,WAAA,EACA,kBAAA,KAAA,qBAAA,EACA,gBAAA,KAAA,MACA,CACA,CACA,EAEA,yBAAAO,EAAAC,EAAAC,EAAA,CAEA,GAAA,KAAA,OAAA,WACA,MAAA,GAGA,UAAAC,KAAAC,sBACA,GAAAJ,IAAAG,EAAA,QAAAF,IAAAE,EAAA,MAAAD,IAAAC,EAAA,WACA,eAAA,KAAAA,EAAA,OAAA,EACA,GAGA,MAAA,EACA,EAEA,kBAAA,CACA,OAAA,KAAA,aAAA,MAAA,KAAA,aAAA,KAAA,GAAA,CAAA,KAAA,IACA,EAEA,YAAA,CACA,OAAA,KAAA,iBAAA,GAAA,CAAA,KAAA,OAAA,OACA,EAEA,sBAAA,CACA,MAAA,CAAA,KAAA,WAAA,GAAA,CAAA,MAAA,QAAA,EAAA,SAAA,KAAA,YAAA,CACA,CACA,CACA"}