@dialpad/dialtone/dist/vue3/lib/select-menu/select-menu.js

Dialpad's Dialtone design system monorepo

import { DESCRIPTION_SIZE_MODIFIERS as e, LABEL_SIZE_MODIFIERS as t } from "../../common/constants/index.js";
import { addClassStyleAttrs as n, getUniqueString as r, getValidationState as i, hasSlotContent as a, removeClassStyleAttrs as o } from "../../common/utils/index.js";
import { MessagesMixin as s } from "../../common/mixins/input.js";
import { t as c } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import l from "../validation-messages/validation-messages.js";
import { SELECT_SIZE_MODIFIERS as u, SELECT_STATE_MODIFIERS as d } from "./select-menu-constants.js";
import { optionsValidator as f } from "./select-menu-validators.js";
import { Fragment as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, mergeProps as y, normalizeClass as b, openBlock as x, renderList as S, renderSlot as C, resolveComponent as w, toDisplayString as T, toHandlers as E, warn as D } from "vue";
//#region components/select_menu/select_menu.vue
var O = {
	compatConfig: { MODE: 3 },
	name: "DtSelectMenu",
	components: { DtValidationMessages: l },
	mixins: [s],
	inheritAttrs: !1,
	props: {
		label: {
			type: String,
			default: ""
		},
		description: {
			type: String,
			default: ""
		},
		options: {
			type: Array,
			default: () => [],
			validator: (e) => f(e)
		},
		size: {
			type: String,
			default: "md",
			validator: (e) => Object.keys(u).includes(e)
		},
		labelClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		descriptionClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		selectClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		optionClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		labelChildProps: {
			type: Object,
			default: () => ({})
		},
		descriptionChildProps: {
			type: Object,
			default: () => ({})
		},
		optionChildProps: {
			type: Object,
			default: () => ({})
		},
		disabled: {
			type: Boolean,
			default: !1
		},
		rootClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		modelValue: {
			type: [String, Number],
			default: ""
		}
	},
	emits: [
		"input",
		"update:modelValue",
		"change"
	],
	data() {
		return {
			LABEL_SIZE_MODIFIERS: t,
			DESCRIPTION_SIZE_MODIFIERS: e,
			SELECT_SIZE_MODIFIERS: u,
			SELECT_STATE_MODIFIERS: d,
			hasSlotContent: a
		};
	},
	computed: {
		selectListeners() {
			return {
				input: () => {},
				change: (e) => this.emitValue(e.target.value, e)
			};
		},
		state() {
			return i(this.formattedMessages);
		},
		selectKey() {
			return r();
		},
		descriptionKey() {
			return `select-${this.selectKey}-description`;
		},
		labelAriaDetails() {
			return this.$slots.description || this.description ? this.descriptionKey : this.$attrs["aria-details"];
		}
	},
	mounted() {
		this.validateOptionsPresence();
	},
	beforeUpdate() {
		this.validateOptionsPresence();
	},
	methods: {
		removeClassStyleAttrs: o,
		addClassStyleAttrs: n,
		emitValue(e, t) {
			this.$emit("update:modelValue", e, t), this.$emit("input", e, t), this.$emit("change", e, t);
		},
		getOptionKey(e) {
			return `select-${this.selectKey}-option-${e}`;
		},
		validateOptionsPresence() {
			this.options?.length < 1 && !this.$slots.default && D("Options are expected to be provided via prop or slot", this);
		}
	}
}, k = ["aria-details"], A = ["id"], j = ["disabled", "value"], M = ["value"];
function N(e, t, n, r, i, a) {
	let o = w("dt-validation-messages");
	return x(), h("div", y({ class: n.rootClass }, a.addClassStyleAttrs(e.$attrs)), [g("label", null, [
		i.hasSlotContent(e.$slots.label) || n.label ? (x(), h("div", y({
			key: 0,
			"aria-details": a.labelAriaDetails,
			class: [
				"d-label",
				i.LABEL_SIZE_MODIFIERS[n.size],
				n.labelClass
			]
		}, n.labelChildProps, { "data-qa": "dt-select-label" }), [C(e.$slots, "label", {}, () => [_(T(n.label), 1)])], 16, k)) : m("", !0),
		i.hasSlotContent(e.$slots.description) || n.description ? (x(), h("div", y({
			key: 1,
			id: a.descriptionKey,
			class: [
				"d-description",
				i.DESCRIPTION_SIZE_MODIFIERS[n.size],
				n.descriptionClass
			]
		}, n.descriptionChildProps, { "data-qa": "dt-select-description" }), [C(e.$slots, "description", {}, () => [_(T(n.description), 1)])], 16, A)) : m("", !0),
		g("div", {
			class: b([
				"d-select",
				i.SELECT_SIZE_MODIFIERS[n.size],
				n.selectClass,
				{ "d-select--disabled": n.disabled }
			]),
			"data-qa": "dt-select-wrapper"
		}, [g("select", y({
			ref: "selectElement",
			class: ["d-select__input", i.SELECT_STATE_MODIFIERS[a.state]]
		}, a.removeClassStyleAttrs(e.$attrs), {
			"data-qa": "dt-select",
			disabled: n.disabled,
			value: n.modelValue
		}, E(a.selectListeners, !0)), [C(e.$slots, "default", {}, () => [(x(!0), h(p, null, S(n.options, (e) => (x(), h("option", y({
			key: a.getOptionKey(e.value),
			value: e.value,
			class: n.optionClass
		}, { ref_for: !0 }, n.optionChildProps), T(e.label), 17, M))), 128))])], 16, j)], 2)
	]), v(o, y({
		"validation-messages": e.formattedMessages,
		"show-messages": e.showMessages,
		class: e.messagesClass
	}, e.messagesChildProps, { "data-qa": "dt-select-messages" }), null, 16, [
		"validation-messages",
		"show-messages",
		"class"
	])], 16);
}
var P = /* @__PURE__ */ c(O, [["render", N]]);
//#endregion
export { P as default };

//# sourceMappingURL=select-menu.js.map