@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
286 lines (285 loc) • 9.1 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const split_buttonAlpha = require("./split_button-alpha.vue.cjs");
const split_buttonOmega = require("./split_button-omega.vue.cjs");
const common_utils = require("../../common/utils.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const dropdown = require("../dropdown/dropdown.vue.cjs");
const button_constants = require("../button/button_constants.cjs");
const _sfc_main = {
name: "DtSplitButton",
components: {
SplitButtonOmega: split_buttonOmega.default,
DtDropdown: dropdown.default,
SplitButtonAlpha: split_buttonAlpha.default
},
inheritAttrs: false,
props: {
/**
* Determines whether the alpha button should have active styling
* @values true, false
*/
alphaActive: {
type: Boolean,
default: false
},
/**
* Descriptive label for the alpha button
*/
alphaAriaLabel: {
type: String,
default: null
},
/**
* The position of the icon slot within the alpha button.
* @values left, right, top, bottom
*/
alphaIconPosition: {
type: String,
default: "left",
validator: (position) => Object.keys(button_constants.ICON_POSITION_MODIFIERS).includes(position)
},
/**
* Used to customize the alpha label container
*/
alphaLabelClass: {
type: [String, Array, Object],
default: ""
},
/**
* Whether the alpha button should display a loading animation or not.
* @values true, false
*/
alphaLoading: {
type: Boolean,
default: false
},
/**
* Text shown in tooltip when you hover the alpha button,
* required if no content is passed to default slot
*/
alphaTooltipText: {
type: String,
default: void 0
},
/**
* Determines whether a screenreader reads live updates of
* the button content to the user while the button
* is in focus.
* @values true, false
*/
assertiveOnFocus: {
type: Boolean,
default: false
},
/**
* HTML button disabled attribute
* <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled" target="_blank">
* (Reference)
* </a>
* @values true, false
*/
disabled: {
type: Boolean,
default: false
},
/**
* The direction the dropdown displays relative to the anchor.
* @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
*/
dropdownPlacement: {
type: String,
default: "bottom-end"
},
/**
* The fill and outline of the button associated with its visual importance.
* @values clear, outlined, primary
*/
importance: {
type: String,
default: "primary",
validator: (i) => Object.keys(button_constants.BUTTON_IMPORTANCE_MODIFIERS).includes(i)
},
/**
* The color of the button.
* @values default, muted, danger, inverted
*/
kind: {
type: String,
default: "default",
validator: (k) => Object.keys(button_constants.BUTTON_KIND_MODIFIERS).includes(k)
},
/**
* Determines whether the omega button should have active styling
* @values true, false
*/
omegaActive: {
type: Boolean,
default: false
},
/**
* Descriptive label for the omega button
*/
omegaAriaLabel: {
type: String,
default: null
},
/**
* Element ID, useful in case you need to reference the button
* as an external anchor for popover
*/
omegaId: {
type: String,
default: void 0
},
/**
* Text shown in tooltip when you hover the omega button,
* required as it is an icon only button
*/
omegaTooltipText: {
type: String,
default: void 0
},
/**
* The size of the button.
* @values xs, sm, md, lg, xl
*/
size: {
type: String,
default: "md",
validator: (s) => Object.keys(button_constants.BUTTON_SIZE_MODIFIERS).includes(s)
},
/**
* Button width, accepts
* <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
* CSS width attribute
* </a>
* values
*/
width: {
type: String,
default: null
}
},
emits: [
/**
* Native alpha button click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"alpha-clicked",
/**
* Native omega button click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"omega-clicked"
],
data() {
return {
isDropdownOpen: false
};
},
computed: {
alphaButtonProps() {
return {
active: this.alphaActive,
ariaLabel: this.alphaAriaLabel,
assertiveOnFocus: this.assertiveOnFocus,
disabled: this.disabled,
iconPosition: this.alphaIconPosition,
labelClass: this.alphaLabelClass,
loading: this.alphaLoading,
importance: this.importance,
kind: this.kind,
size: this.size,
tooltipText: this.alphaTooltipText,
class: this.$attrs.class
};
},
omegaButtonProps() {
return {
id: this.omegaId,
active: this.omegaActive,
ariaLabel: this.omegaAriaLabel,
disabled: this.disabled,
importance: this.importance,
kind: this.kind,
size: this.size,
tooltipText: this.omegaTooltipText,
class: this.$attrs.class
};
},
defaultSlotHasContent() {
var _a, _b;
return this.$scopedSlots.default && this.$scopedSlots.default() && ((_b = (_a = this.$scopedSlots.default()[0]) == null ? void 0 : _a.text) == null ? void 0 : _b.trim());
},
omegaSlotIsSet() {
return this.$scopedSlots.omega && this.$scopedSlots.omega();
}
},
created() {
this.validateProps();
},
updated() {
this.validateProps();
},
mounted() {
common_utils.warnIfUnmounted(this.$el, this.$options.name);
},
methods: {
validateProps() {
this.validateAlphaButtonProps();
this.validateOmegaButtonProps();
},
validateAlphaButtonProps() {
var _a;
if (this.defaultSlotHasContent) return;
const isAlphaIconSet = ((_a = this.$refs.alphaButton) == null ? void 0 : _a.$scopedSlots.icon) && this.$refs.alphaButton.$scopedSlots.icon();
if (isAlphaIconSet && !this.alphaTooltipText) {
console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
}
},
validateOmegaButtonProps() {
if (this.omegaSlotIsSet) return;
if (!this.omegaTooltipText) {
console.warn("omega-tooltip-text prop is required as it is an icon-only button");
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("span", { staticClass: "d-split-btn", style: { width: _vm.width }, attrs: { "data-qa": "dt-split-button" } }, [_c("split-button-alpha", _vm._b({ ref: "alphaButton", nativeOn: { "click": function($event) {
return _vm.$emit("alpha-clicked");
} }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
return [_vm._t("alphaIcon", null, { "size": iconSize })];
} }], null, true) }, "split-button-alpha", _vm.alphaButtonProps, false), [_vm._t("default")], 2), _vm._t("omega", function() {
return [_vm.$slots.dropdownList ? _c("dt-dropdown", { attrs: { "placement": _vm.dropdownPlacement }, on: { "click": function($event) {
_vm.isDropdownOpen = true;
}, "opened": (open) => _vm.isDropdownOpen = open }, scopedSlots: _vm._u([{ key: "anchor", fn: function(attrs) {
return [_c("split-button-omega", _vm._b({ attrs: { "active": _vm.isDropdownOpen }, nativeOn: { "click": function($event) {
return _vm.$emit("omega-clicked");
} }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
return [_vm._t("omegaIcon", null, { "size": iconSize })];
} }], null, true) }, "split-button-omega", { ...attrs, ..._vm.omegaButtonProps }, false))];
} }, { key: "list", fn: function({ close }) {
return [_vm._t("dropdownList", null, { "close": close })];
} }], null, true) }) : _c("split-button-omega", _vm._b({ nativeOn: { "click": function($event) {
return _vm.$emit("omega-clicked");
} }, scopedSlots: _vm._u([{ key: "icon", fn: function({ size: iconSize }) {
return [_vm._t("omegaIcon", null, { "size": iconSize })];
} }], null, true) }, "split-button-omega", _vm.omegaButtonProps, false))];
})], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const split_button = __component__.exports;
exports.default = split_button;
//# sourceMappingURL=split_button.vue.cjs.map