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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"split-button.cjs","sources":["../../../components/split_button/split_button.vue"],"sourcesContent":["<template>\n  <span\n    data-qa=\"dt-split-button\"\n    class=\"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     * 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\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     * 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  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,\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,\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"],"names":["_sfc_main","SplitButtonOmega","DtDropdown","SplitButtonAlpha","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","s","BUTTON_SIZE_MODIFIERS","warnIfUnmounted","returnFirstEl","hasSlotContent","_createElementBlock","_normalizeStyle","$props","_createVNode","_component_split_button_alpha","_mergeProps","$options","_ctx","_withCtx","iconSize","_renderSlot","_createBlock","_component_dt_dropdown","$data","_cache","open","attrs","_component_split_button_omega","close","_openBlock"],"mappings":"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"}