@dialpad/dialtone/dist/vue3/lib/radio/radio.js

Dialpad's Dialtone design system monorepo

import { addClassStyleAttrs as e, hasSlotContent as t, removeClassStyleAttrs as n } from "../../common/utils/index.js";
import { CheckableMixin as r, GroupableMixin as i, InputMixin as a, MessagesMixin as o } from "../../common/mixins/input.js";
import { t as s } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import c from "../validation-messages/validation-messages.js";
import { RADIO_INPUT_VALIDATION_CLASSES as l } from "./radio-constants.js";
import { createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveComponent as y, toDisplayString as b, toHandlers as x } from "vue";
//#region components/radio/radio.vue
var S = {
	compatConfig: { MODE: 3 },
	name: "DtRadio",
	components: { DtValidationMessages: c },
	mixins: [
		a,
		r,
		i,
		o
	],
	inheritAttrs: !1,
	props: { value: {
		type: [String, Number],
		default: ""
	} },
	emits: [
		"input",
		"update:modelValue",
		"focus",
		"focusin",
		"focusout"
	],
	data() {
		return { hasSlotContent: t };
	},
	computed: {
		inputValidationClass() {
			return l[this.internalValidationState];
		},
		radioGroupValue() {
			return this.groupContext?.selectedValue;
		},
		inputListeners() {
			return {
				input: () => {},
				focusin: (e) => this.$emit("focusin", e),
				focusout: (e) => this.$emit("focusout", e),
				change: (e) => this.emitValue(e.target.value)
			};
		},
		hasMessages() {
			return this.formattedMessages.length && this.showMessages;
		}
	},
	watch: { radioGroupValue: {
		immediate: !0,
		handler(e) {
			this.hasGroup && (this.internalChecked = e === this.value);
		}
	} },
	methods: {
		removeClassStyleAttrs: n,
		addClassStyleAttrs: e,
		emitValue(e) {
			e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e), this.$emit("update:modelValue", e));
		}
	}
}, C = { class: "d-radio__input" }, w = [
	"checked",
	"name",
	"value",
	"disabled"
], T = {
	key: 0,
	class: "d-radio__messages",
	"data-qa": "radio-description-messages"
};
function E(e, t, n, r, i, a) {
	let o = y("dt-validation-messages");
	return _(), d("div", h({ class: e.rootClass }, a.addClassStyleAttrs(e.$attrs)), [f("label", { class: g(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }]) }, [f("div", C, [f("input", h({
		checked: e.internalChecked,
		name: e.internalName,
		value: n.value,
		disabled: e.internalDisabled,
		type: "radio",
		class: [
			"d-radio",
			a.inputValidationClass,
			e.inputClass
		]
	}, a.removeClassStyleAttrs(e.$attrs), x(a.inputListeners, !0)), null, 16, w)]), f("div", h({ class: [e.labelClass, "d-radio__copy d-radio__label"] }, e.labelChildProps, { "data-qa": "radio-label" }), [v(e.$slots, "default", {}, () => [p(b(e.label), 1)])], 16)], 2), e.$slots.description || e.description || a.hasMessages ? (_(), d("div", T, [e.$slots.description || e.description ? (_(), d("div", h({
		key: 0,
		class: ["d-description", e.descriptionClass]
	}, e.descriptionChildProps, { "data-qa": "radio-description" }), [v(e.$slots, "description", {}, () => [p(b(e.description), 1)])], 16)) : u("", !0), m(o, h({
		"validation-messages": e.formattedMessages,
		"show-messages": e.showMessages,
		class: e.messagesClass
	}, e.messagesChildProps, { "data-qa": "dt-radio-validation-messages" }), null, 16, [
		"validation-messages",
		"show-messages",
		"class"
	])])) : u("", !0)], 16);
}
var D = /* @__PURE__ */ s(S, [["render", E]]);
//#endregion
export { D as default };

//# sourceMappingURL=radio.js.map