@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
297 lines (296 loc) • 8.17 kB
JavaScript
import b from "./split-button-alpha.js";
import O from "./split-button-omega.js";
import { hasSlotContent as n, warnIfUnmounted as v, returnFirstEl as B } from "../../common/utils/index.js";
import { resolveComponent as p, createElementBlock as S, openBlock as r, normalizeStyle as k, createVNode as c, renderSlot as a, mergeProps as d, withCtx as i, createBlock as f } from "vue";
import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import T from "../dropdown/dropdown.js";
import { BUTTON_SIZE_MODIFIERS as P, BUTTON_KIND_MODIFIERS as $, BUTTON_IMPORTANCE_MODIFIERS as w, ICON_POSITION_MODIFIERS as A } from "../button/button-constants.js";
import "./split-button-constants.js";
const C = {
compatConfig: { MODE: 3 },
name: "DtSplitButton",
components: {
SplitButtonOmega: O,
DtDropdown: T,
SplitButtonAlpha: b
},
inheritAttrs: !1,
props: {
/**
* Determines whether the alpha button should have active styling
* @values true, false
*/
alphaActive: {
type: Boolean,
default: !1
},
/**
* 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: (t) => Object.keys(A).includes(t)
},
/**
* 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: !1
},
/**
* 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: !1
},
/**
* 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: !1
},
/**
* 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: (t) => Object.keys(w).includes(t)
},
/**
* The color of the button.
* @values default, muted, danger, inverted
*/
kind: {
type: String,
default: "default",
validator: (t) => Object.keys($).includes(t)
},
/**
* Determines whether the omega button should have active styling
* @values true, false
*/
omegaActive: {
type: Boolean,
default: !1
},
/**
* 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: (t) => Object.keys(P).includes(t)
},
/**
* 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: !1
};
},
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,
style: this.$attrs.style
};
},
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,
style: this.$attrs.style
};
}
},
created() {
this.validateProps();
},
updated() {
this.validateProps();
},
mounted() {
v(B(this.$el), this.$options.name);
},
methods: {
validateProps() {
this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
},
validateAlphaButtonProps() {
n(this.$slots.default) || n(this.$slots.alphaIcon) && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
},
validateOmegaButtonProps() {
n(this.$slots.omega) || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
}
}
};
function D(t, o, m, _, s, l) {
const g = p("split-button-alpha"), u = p("split-button-omega"), y = p("dt-dropdown");
return r(), S("span", {
"data-qa": "dt-split-button",
class: "d-split-btn",
style: k({ width: m.width })
}, [
c(g, d(l.alphaButtonProps, {
ref: "alphaButton",
onClick: o[0] || (o[0] = (e) => t.$emit("alpha-clicked"))
}), {
icon: i(({ size: e }) => [
a(t.$slots, "alphaIcon", { size: e })
]),
default: i(() => [
a(t.$slots, "default")
]),
_: 3
}, 16),
a(t.$slots, "omega", {}, () => [
t.$slots.dropdownList ? (r(), f(y, {
key: 0,
placement: m.dropdownPlacement,
onClick: o[2] || (o[2] = (e) => s.isDropdownOpen = !0),
onOpened: o[3] || (o[3] = (e) => s.isDropdownOpen = e)
}, {
anchor: i((e) => [
c(u, d({ ...e, ...l.omegaButtonProps }, {
active: s.isDropdownOpen,
onClick: o[1] || (o[1] = (h) => t.$emit("omega-clicked"))
}), {
icon: i(({ size: h }) => [
a(t.$slots, "omegaIcon", { size: h })
]),
_: 2
}, 1040, ["active"])
]),
list: i(({ close: e }) => [
a(t.$slots, "dropdownList", { close: e })
]),
_: 3
}, 8, ["placement"])) : (r(), f(u, d({ key: 1 }, l.omegaButtonProps, {
onClick: o[4] || (o[4] = (e) => t.$emit("omega-clicked"))
}), {
icon: i(({ size: e }) => [
a(t.$slots, "omegaIcon", { size: e })
]),
_: 3
}, 16))
])
], 4);
}
const x = /* @__PURE__ */ I(C, [["render", D]]);
export {
x as default
};
//# sourceMappingURL=split-button.js.map