ropav 0.0.10 → 0.0.12

package/dist/radio.js

@@ -1,11 +1,19 @@
 import './radio.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue, r as getComponentContrastColor } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as useRequiredInject } from "./useRequiredInject.js";
+import { i as useFormControl, o as useControllableValue } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setValue, template, unref, useId } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, inject, next, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, useId } from "vue";
 //#region src/components/radio/types.ts
+var radioParts = [
+	"root",
+	"input",
+	"indicator",
+	"label"
+];
+var radioGroupParts = ["root"];
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
@@ -18,55 +26,134 @@ function getRadioColorStyle(color, autoContrast) {
 	if (autoContrast) style["--_rp-radio-on-color"] = getComponentContrastColor(color ?? "primary", { autoContrast });
 	return style;
 }
-function useRadio(props) {
-	const group = useRequiredInject(radioGroupKey, "RpRadio");
-	const isChecked = computed(() => group.modelValue === props.value);
-	const isDisabled = computed(() => props.disabled || group.disabled);
-	const variant = computed(() => props.variant ?? group.variant);
-	const color = computed(() => props.color ?? group.color);
-	const autoContrast = computed(() => props.autoContrast ?? group.autoContrast);
-	const size = computed(() => props.size ?? group.size);
+function useRadio(props, emitChange) {
+	const inputRef = ref(null);
+	const control = useControlState(props);
+	const group = inject(radioGroupKey, null);
+	const isChecked = computed(() => props.checked ?? (group ? group.modelValue === props.value : false));
+	const isDisabled = computed(() => Boolean(props.disabled || group?.disabled));
+	const isRequired = computed(() => props.required ?? group?.required ?? false);
+	const isInvalid = computed(() => props.invalid ?? group?.invalid ?? false);
+	const name = computed(() => props.name ?? group?.name);
+	const form = computed(() => props.form ?? group?.form);
+	const variant = computed(() => props.variant ?? group?.variant);
+	const color = computed(() => props.color ?? group?.color);
+	const autoContrast = computed(() => props.autoContrast ?? group?.autoContrast);
+	const size = computed(() => props.size ?? group?.size);
 	const rootClass = computed(() => bem("rp-radio", {
 		checked: isChecked.value,
 		disabled: isDisabled.value,
+		invalid: isInvalid.value,
 		[variant.value ?? ""]: Boolean(variant.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
 	const rootStyle = computed(() => getRadioColorStyle(color.value, autoContrast.value));
-	function onSelect() {
+	function onSelect(event) {
 		if (isDisabled.value) return;
-		group.select(props.value);
+		group?.select(props.value);
+		emitChange(event);
+	}
+	function focus(options) {
+		inputRef.value?.focus(options);
 	}
+	let unregister;
+	onMounted(() => {
+		if (group && inputRef.value) unregister = group.register({
+			input: inputRef.value,
+			value: () => props.value,
+			disabled: () => isDisabled.value,
+			checked: () => isChecked.value,
+			validationMessage: () => props.validationMessage
+		});
+	});
+	onBeforeUnmount(() => unregister?.());
+	useFormControl({
+		elements: () => group ? [] : [inputRef.value],
+		isControlled: () => true,
+		initializeDefault(element) {
+			element.defaultChecked = isChecked.value;
+		},
+		validationMessage: () => props.validationMessage,
+		readResetValue() {},
+		syncControlledValue(elements) {
+			elements[0].checked = isChecked.value;
+		}
+	});
 	return {
-		group,
+		inputRef,
+		control,
+		name,
+		form,
+		groupInputAttrs: computed(() => group?.inputAttrs),
 		isChecked,
 		isDisabled,
+		isRequired,
+		isInvalid,
 		rootClass,
 		rootStyle,
-		onSelect
+		onSelect,
+		focus
 	};
 }
 function useRadioGroup(props, emitUpdate) {
 	const control = useControlState(props);
+	const registrations = shallowRef([]);
+	const controllable = useControllableValue({
+		modelValue: () => props.modelValue,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: emitUpdate
+	});
 	const rootClass = computed(() => bem("rp-radio-group", {
 		disabled: control.disabled,
 		invalid: control.invalid
 	}));
 	const generatedName = useId();
 	const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);
+	function register(registration) {
+		registrations.value = [...registrations.value, registration];
+		return () => {
+			registrations.value = registrations.value.filter((item) => item !== registration);
+		};
+	}
+	useFormControl({
+		elements: () => registrations.value.map((registration) => registration.input),
+		isControlled: () => controllable.isControlled.value,
+		initializeDefault(element) {
+			element.defaultChecked = registrations.value.find((item) => item.input === element)?.value() === controllable.initialValue;
+		},
+		validationMessage(element) {
+			const enabled = registrations.value.filter((registration) => !registration.disabled());
+			const anchor = enabled.find((registration) => registration.checked()) ?? enabled[0];
+			const registration = registrations.value.find((item) => item.input === element);
+			return registration?.validationMessage() ?? (registration === anchor ? props.validationMessage : void 0);
+		},
+		readResetValue(elements) {
+			const checked = registrations.value.find((registration) => elements.includes(registration.input) && registration.input.checked);
+			controllable.resetValue(checked?.value() ?? null);
+		},
+		syncControlledValue() {
+			for (const registration of registrations.value) registration.input.checked = registration.value() === controllable.value.value;
+		}
+	});
 	provide(radioGroupKey, {
 		get modelValue() {
-			return props.modelValue;
+			return controllable.value.value;
 		},
 		get name() {
 			return groupName.value;
 		},
+		get form() {
+			return control.form;
+		},
 		get disabled() {
 			return control.disabled;
 		},
 		get required() {
 			return control.required;
 		},
+		get invalid() {
+			return control.invalid;
+		},
 		get variant() {
 			return props.variant;
 		},
@@ -79,26 +166,39 @@ function useRadioGroup(props, emitUpdate) {
 		get size() {
 			return props.size;
 		},
+		get inputAttrs() {
+			return props.inputAttrs;
+		},
 		select(value) {
-			emitUpdate(value);
-		}
+			controllable.setValue(value);
+		},
+		register
 	});
 	return {
 		control,
-		rootClass
+		rootClass,
+		value: controllable.value
 	};
 }
 //#endregion
 //#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<span data-v-c9fb5041 class=rp-radio__label>");
-var t1 = template("<label data-v-c9fb5041><input data-v-c9fb5041 type=radio class=rp-radio__native><span data-v-c9fb5041 class=rp-radio__dot></span>", 1);
+var t0$1 = template("<span data-v-0cdcdcfa>");
+var t1 = template("<label data-v-0cdcdcfa><input data-v-0cdcdcfa><span data-v-0cdcdcfa></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpRadio",
+	inheritAttrs: false,
 	__name: "radio",
 	props: {
+		id: {},
+		name: {},
+		form: {},
 		value: {},
+		checked: {
+			type: Boolean,
+			default: void 0
+		},
 		variant: { default: void 0 },
 		color: { default: void 0 },
 		autoContrast: {
@@ -108,49 +208,117 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
-			default: false
-		}
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
-	setup(__props, { slots: $slots }) {
-		const { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(__props);
-		const n5 = t1();
-		const n0 = child(n5);
-		on(n0, "change", (e) => unref(onSelect)(e));
+	emits: ["change"],
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const { inputRef, control, name, form, groupInputAttrs, isChecked, isDisabled, isRequired, isInvalid, rootClass, rootStyle, onSelect, focus } = useRadio(props, (event) => emit("change", event));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"data-disabled": presence(isDisabled.value),
+			"data-invalid": presence(isInvalid.value),
+			"data-state": isChecked.value ? "checked" : "unchecked"
+		}));
+		const nativeInputAttrs = computed(() => {
+			const { class: groupClass, style: groupStyle, onChange: groupOnChange, ...groupForwardedAttrs } = groupInputAttrs.value ?? {};
+			const { class: itemClass, style: itemStyle, onChange: itemOnChange, ...itemForwardedAttrs } = props.inputAttrs ?? {};
+			return {
+				...groupForwardedAttrs,
+				...itemForwardedAttrs,
+				...getPartAttrs("input", {
+					class: "rp-radio__native",
+					compatibilityClass: [groupClass, itemClass],
+					compatibilityStyle: [groupStyle, itemStyle]
+				}),
+				onChange(event) {
+					onSelect(event);
+					groupOnChange?.(event);
+					itemOnChange?.(event);
+				}
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			focus
+		});
+		const n6 = t1();
+		const n0 = child(n6);
+		const n1 = next(n0, 1);
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
+			const _control = unref(control);
 			const _isChecked = unref(isChecked);
-			const _group = unref(group);
-			setClass(n5, unref(rootClass));
-			setStyle(n5, unref(rootStyle));
-			setAttr(n5, "data-disabled", unref(isDisabled) || void 0);
-			setAttr(n5, "data-state", _isChecked ? "checked" : "unchecked");
-			setProp(n0, "name", _group.name);
-			setValue(n0, __props.value);
-			setProp(n0, "checked", _isChecked);
-			setProp(n0, "disabled", unref(isDisabled) || void 0);
-			setProp(n0, "required", _group.required || void 0);
+			const _isDisabled = unref(isDisabled);
+			const _isInvalid = unref(isInvalid);
+			const _presence = unref(presence);
+			setDynamicProps(n6, [rootAttrs.value]);
+			setDynamicProps(n0, [_nativeInputAttrs, {
+				id: _control.id,
+				type: "radio",
+				name: unref(name),
+				form: unref(form) ?? _nativeInputAttrs.form,
+				value: __props.value,
+				checked: _isChecked,
+				disabled: _isDisabled || void 0,
+				required: unref(isRequired) || void 0,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-invalid": _isInvalid || void 0,
+				"aria-required": unref(isRequired) || void 0,
+				"data-disabled": _presence(_isDisabled),
+				"data-invalid": _presence(_isInvalid),
+				"data-state": _isChecked ? "checked" : "unchecked"
+			}]);
+			setDynamicProps(n1, [unref(getPartAttrs)("indicator", { class: "rp-radio__dot" })]);
 		});
-		setInsertionState(n5, null, 2);
+		setInsertionState(n6, null, 2);
 		createIf(() => $slots.default, () => {
-			const n4 = t0$1();
-			setInsertionState(n4, null, 0);
+			const n5 = t0$1();
+			renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("label", { class: "rp-radio__label" })]));
+			setInsertionState(n5, null, 0);
 			createSlot("default", null, null, 1);
-			return n4;
+			return n5;
 		});
-		return n5;
+		return n6;
 	}
-}), [["__scopeId", "data-v-c9fb5041"]]);
+}), [["__scopeId", "data-v-0cdcdcfa"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-4ef9fed2 role=radiogroup>", 1);
+var t0 = template("<div data-v-fc40a22d>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpRadioGroup",
+	inheritAttrs: false,
 	__name: "radio-group",
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: null },
 		variant: { default: void 0 },
 		color: { default: void 0 },
 		autoContrast: {
@@ -158,6 +326,7 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			default: void 0
 		},
 		size: { default: void 0 },
+		orientation: { default: "vertical" },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -172,7 +341,11 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -181,24 +354,27 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		const { control, rootClass } = useRadioGroup(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const { getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			id: control.id,
+			class: rootClass.value,
+			role: "radiogroup",
+			"data-orientation": props.orientation,
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
+			"aria-label": props.ariaLabel || void 0,
+			"aria-labelledby": control.ariaLabelledby,
+			"aria-describedby": control.ariaDescribedby,
+			"aria-invalid": control.invalid || void 0,
+			"aria-required": control.required || void 0,
+			"aria-orientation": props.orientation
+		}));
 		const n1 = t0();
-		renderEffect(() => {
-			const _control = unref(control);
-			const _control_invalid = _control.invalid;
-			setProp(n1, "id", _control.id);
-			setClass(n1, unref(rootClass));
-			setAttr(n1, "data-disabled", _control.disabled || void 0);
-			setAttr(n1, "data-invalid", _control_invalid || void 0);
-			setAttr(n1, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n1, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n1, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n1, "aria-invalid", _control_invalid || void 0);
-			setAttr(n1, "aria-required", _control.required || void 0);
-		});
+		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
 		setInsertionState(n1, null, 0);
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-4ef9fed2"]]);
+}), [["__scopeId", "data-v-fc40a22d"]]);
 //#endregion
-export { radio_default as n, radio_group_default as t };
+export { radioParts as i, radio_default as n, radioGroupParts as r, radio_group_default as t };