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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"split-button.cjs","names":[],"sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    :class=\"[rootClass, 'd-split-btn']\"\n    :style=\"{ width }\"\n  >\n    <split-button-alpha\n      v-bind=\"alphaButtonProps\"\n      ref=\"alphaButton\"\n      @click=\"$emit('alpha-clicked')\"\n    >\n      <template #icon=\"{ size: iconSize }\">\n        <!-- @slot Alpha (left) button icon slot -->\n        <slot\n          name=\"alphaIcon\"\n          :size=\"iconSize\"\n        />\n      </template>\n      <!-- @slot Default content slot -->\n      <slot name=\"default\" />\n    </split-button-alpha>\n    <!-- @slot Omega (right) content slot, overrides omega button styling and functionality completely -->\n    <slot name=\"omega\">\n      <dt-dropdown\n        v-if=\"$slots.dropdownList\"\n        :placement=\"dropdownPlacement\"\n        @click=\"isDropdownOpen = true\"\n        @opened=\"open => isDropdownOpen = open\"\n      >\n        <template #anchor=\"attrs\">\n          <split-button-omega\n            v-bind=\"{ ...attrs, ...omegaButtonProps }\"\n            :active=\"isDropdownOpen\"\n            @click=\"$emit('omega-clicked')\"\n          >\n            <template #icon=\"{ size: iconSize }\">\n              <!-- @slot Omega (right) button icon slot -->\n              <slot\n                name=\"omegaIcon\"\n                :size=\"iconSize\"\n              />\n            </template>\n          </split-button-omega>\n        </template>\n        <template #list=\"{ close }\">\n          <!-- @slot Built-in dropdown content slot, use of dt-list-item is highly recommended here. -->\n          <slot\n            name=\"dropdownList\"\n            :close=\"close\"\n          />\n        </template>\n      </dt-dropdown>\n\n      <split-button-omega\n        v-else\n        v-bind=\"omegaButtonProps\"\n        @click=\"$emit('omega-clicked')\"\n      >\n        <template #icon=\"{ size: iconSize }\">\n          <!-- @slot Omega (right) button icon slot -->\n          <slot\n            name=\"omegaIcon\"\n            :size=\"iconSize\"\n          />\n        </template>\n      </split-button-omega>\n    </slot>\n  </span>\n</template>\n\n<script>\nimport {\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_SIZE_MODIFIERS,\n  ICON_POSITION_MODIFIERS,\n} from '@/components/button';\nimport SplitButtonAlpha from './split_button-alpha.vue';\nimport SplitButtonOmega from './split_button-omega.vue';\nimport { DtDropdown } from '@/components/dropdown';\nimport { hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtSplitButton',\n\n  components: {\n    SplitButtonOmega,\n    DtDropdown,\n    SplitButtonAlpha,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the alpha button should have active styling\n     * @values true, false\n     */\n    alphaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the alpha button\n     */\n    alphaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The position of the icon slot within the alpha button.\n     * @values left, right, top, bottom\n     */\n    alphaIconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * Used to customize the alpha label container\n     */\n    alphaLabelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * HTML button disabled attribute for alpha button only\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    alphaDisabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the alpha button should display a loading animation or not.\n     * @values true, false\n     */\n    alphaLoading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: undefined,\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.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute for both buttons.\n     * Use alphaDisabled or omegaDisabled to disable buttons individually.\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    dropdownPlacement: {\n      type: String,\n      default: 'bottom-end',\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     * The color of the button.\n     * @values default, muted, danger, 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 the omega button should have active styling\n     * @values true, false\n     */\n    omegaActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the omega button\n     */\n    omegaAriaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute for omega button only\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\">\n     *  (Reference)\n     * </a>\n     * @values true, false\n     */\n    omegaDisabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element ID, useful in case you need to reference the button\n     * as an external anchor for popover.\n     */\n    omegaId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: undefined,\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     * 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     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native alpha button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'alpha-clicked',\n\n    /**\n     * Native omega button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'omega-clicked',\n  ],\n\n  data () {\n    return {\n      isDropdownOpen: false,\n    };\n  },\n\n  computed: {\n    alphaButtonProps () {\n      return {\n        active: this.alphaActive,\n        ariaLabel: this.alphaAriaLabel,\n        assertiveOnFocus: this.assertiveOnFocus,\n        disabled: this.disabled || this.alphaDisabled,\n        iconPosition: this.alphaIconPosition,\n        labelClass: this.alphaLabelClass,\n        loading: this.alphaLoading,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.alphaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n\n    omegaButtonProps () {\n      return {\n        id: this.omegaId,\n        active: this.omegaActive,\n        ariaLabel: this.omegaAriaLabel,\n        disabled: this.disabled || this.omegaDisabled,\n        importance: this.importance,\n        kind: this.kind,\n        size: this.size,\n        tooltipText: this.omegaTooltipText,\n        class: this.$attrs.class,\n        style: this.$attrs.style,\n      };\n    },\n  },\n\n  created () {\n    this.validateProps();\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  mounted () {\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  methods: {\n    validateProps () {\n      this.validateAlphaButtonProps();\n      this.validateOmegaButtonProps();\n    },\n\n    validateAlphaButtonProps () {\n      if (hasSlotContent(this.$slots.default)) return;\n\n      if (hasSlotContent(this.$slots.alphaIcon) && !this.alphaTooltipText) {\n        console.warn('alpha-tooltip-text prop must be set if alpha button has an icon only');\n      }\n    },\n\n    validateOmegaButtonProps () {\n      if (hasSlotContent(this.$slots.omega)) return;\n\n      if (!this.omegaTooltipText) {\n        console.warn('omega-tooltip-text prop is required as it is an icon-only button');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}