ropav 0.0.9 → 0.0.11

package/dist/radio.js

@@ -1,11 +1,18 @@
 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 { 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, provide, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, 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,32 +25,47 @@ 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 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);
 	}
 	return {
-		group,
+		inputRef,
+		control,
+		name,
 		isChecked,
 		isDisabled,
+		isRequired,
+		isInvalid,
 		rootClass,
 		rootStyle,
-		onSelect
+		onSelect,
+		focus
 	};
 }
 function useRadioGroup(props, emitUpdate) {
@@ -67,6 +89,9 @@ function useRadioGroup(props, emitUpdate) {
 		get required() {
 			return control.required;
 		},
+		get invalid() {
+			return control.invalid;
+		},
 		get variant() {
 			return props.variant;
 		},
@@ -90,15 +115,22 @@ function useRadioGroup(props, emitUpdate) {
 }
 //#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-d9c68210>");
+var t1 = template("<label data-v-d9c68210><input data-v-d9c68210><span data-v-d9c68210></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: {},
 		value: {},
+		checked: {
+			type: Boolean,
+			default: void 0
+		},
 		variant: { default: void 0 },
 		color: { default: void 0 },
 		autoContrast: {
@@ -108,44 +140,104 @@ 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: {},
+		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, 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: compatibilityClass, style: compatibilityStyle, onChange: compatibilityOnChange, ...attrs } = props.inputAttrs ?? {};
+			return {
+				...attrs,
+				...getPartAttrs("input", {
+					class: "rp-radio__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				onChange(event) {
+					onSelect(event);
+					compatibilityOnChange?.(event);
+				}
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			focus
+		});
+		const n6 = t1();
+		const n0 = child(n6);
+		const n1 = next(n0, 1);
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			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.value, {
+				id: _control.id,
+				type: "radio",
+				name: unref(name),
+				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-d9c68210"]]);
 //#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-a0fcf376>", 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: {},
@@ -158,6 +250,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 +265,9 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
@@ -181,24 +276,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-a0fcf376"]]);
 //#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 };