@dialpad/dialtone/dist/vue3/lib/split-button/split-button.js

Dialpad's Dialtone design system monorepo

import { hasSlotContent as e, returnFirstEl as t, warnIfUnmounted as n } from "../../common/utils/index.js";
import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { BUTTON_IMPORTANCE_MODIFIERS as i, BUTTON_KIND_MODIFIERS as a, BUTTON_SIZE_MODIFIERS as o, ICON_POSITION_MODIFIERS as s } from "../button/button-constants.js";
import c from "../dropdown/dropdown.js";
import l from "./split-button-alpha.js";
import u from "./split-button-omega.js";
import { createBlock as d, createElementBlock as f, createVNode as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderSlot as v, resolveComponent as y, withCtx as b } from "vue";
//#region components/split_button/split_button.vue
var x = {
	compatConfig: { MODE: 3 },
	name: "DtSplitButton",
	components: {
		SplitButtonOmega: u,
		DtDropdown: c,
		SplitButtonAlpha: l
	},
	inheritAttrs: !1,
	props: {
		alphaActive: {
			type: Boolean,
			default: !1
		},
		alphaAriaLabel: {
			type: String,
			default: null
		},
		alphaIconPosition: {
			type: String,
			default: "left",
			validator: (e) => Object.keys(s).includes(e)
		},
		alphaLabelClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		alphaDisabled: {
			type: Boolean,
			default: !1
		},
		alphaLoading: {
			type: Boolean,
			default: !1
		},
		alphaTooltipText: {
			type: String,
			default: void 0
		},
		assertiveOnFocus: {
			type: Boolean,
			default: !1
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		dropdownPlacement: {
			type: String,
			default: "bottom-end"
		},
		importance: {
			type: String,
			default: "primary",
			validator: (e) => Object.keys(i).includes(e)
		},
		kind: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(a).includes(e)
		},
		omegaActive: {
			type: Boolean,
			default: !1
		},
		omegaAriaLabel: {
			type: String,
			default: null
		},
		omegaDisabled: {
			type: Boolean,
			default: !1
		},
		omegaId: {
			type: String,
			default: void 0
		},
		omegaTooltipText: {
			type: String,
			default: void 0
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.keys(o).includes(e)
		},
		width: {
			type: String,
			default: null
		},
		rootClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		}
	},
	emits: ["alpha-clicked", "omega-clicked"],
	data() {
		return { isDropdownOpen: !1 };
	},
	computed: {
		alphaButtonProps() {
			return {
				active: this.alphaActive,
				ariaLabel: this.alphaAriaLabel,
				assertiveOnFocus: this.assertiveOnFocus,
				disabled: this.disabled || this.alphaDisabled,
				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 || this.omegaDisabled,
				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() {
		n(t(this.$el), this.$options.name);
	},
	methods: {
		validateProps() {
			this.validateAlphaButtonProps(), this.validateOmegaButtonProps();
		},
		validateAlphaButtonProps() {
			e(this.$slots.default) || e(this.$slots.alphaIcon) && !this.alphaTooltipText && console.warn("alpha-tooltip-text prop must be set if alpha button has an icon only");
		},
		validateOmegaButtonProps() {
			e(this.$slots.omega) || this.omegaTooltipText || console.warn("omega-tooltip-text prop is required as it is an icon-only button");
		}
	}
};
function S(e, t, n, r, i, a) {
	let o = y("split-button-alpha"), s = y("split-button-omega"), c = y("dt-dropdown");
	return _(), f("span", {
		"data-qa": "dt-split-button",
		class: h([n.rootClass, "d-split-btn"]),
		style: g({ width: n.width })
	}, [p(o, m(a.alphaButtonProps, {
		ref: "alphaButton",
		onClick: t[0] || (t[0] = (t) => e.$emit("alpha-clicked"))
	}), {
		icon: b(({ size: t }) => [v(e.$slots, "alphaIcon", { size: t })]),
		default: b(() => [v(e.$slots, "default")]),
		_: 3
	}, 16), v(e.$slots, "omega", {}, () => [e.$slots.dropdownList ? (_(), d(c, {
		key: 0,
		placement: n.dropdownPlacement,
		onClick: t[2] || (t[2] = (e) => i.isDropdownOpen = !0),
		onOpened: t[3] || (t[3] = (e) => i.isDropdownOpen = e)
	}, {
		anchor: b((n) => [p(s, m({
			...n,
			...a.omegaButtonProps
		}, {
			active: i.isDropdownOpen,
			onClick: t[1] || (t[1] = (t) => e.$emit("omega-clicked"))
		}), {
			icon: b(({ size: t }) => [v(e.$slots, "omegaIcon", { size: t })]),
			_: 3
		}, 16, ["active"])]),
		list: b(({ close: t }) => [v(e.$slots, "dropdownList", { close: t })]),
		_: 3
	}, 8, ["placement"])) : (_(), d(s, m({ key: 1 }, a.omegaButtonProps, { onClick: t[4] || (t[4] = (t) => e.$emit("omega-clicked")) }), {
		icon: b(({ size: t }) => [v(e.$slots, "omegaIcon", { size: t })]),
		_: 3
	}, 16))])], 6);
}
var C = /* @__PURE__ */ r(x, [["render", S]]);
//#endregion
export { C as default };

//# sourceMappingURL=split-button.js.map