@vizejs/ui 0.387.0 → 0.388.0

package/dist/radio-group-DbTmWcxl.mjs

@@ -0,0 +1,317 @@
+import { a as useDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createElementBlock, defineComponent, guardReactiveProps, nextTick, normalizeProps, openBlock, renderSlot, unref, useTemplateRef, watch, watchEffect } from "vue";
+//#region src/families/selection/radio-group/radio-group-context.ts
+const radioGroupContext = createContext("RadioGroup");
+//#endregion
+//#region src/families/selection/radio-group/radio-group.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-orientation",
+	"aria-errormessage",
+	"aria-invalid",
+	"aria-disabled",
+	"aria-required",
+	"data-state",
+	"data-disabled",
+	"data-required",
+	"data-invalid",
+	"data-orientation",
+	"data-value"
+];
+//#endregion
+//#region src/families/selection/radio-group/radio-group.vue
+var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "radio-group",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [String, null],
+			required: false,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const groupId = useDeterministicId({
+			id: () => __props.id,
+			hint: "radio-group"
+		});
+		const valueState = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const selectedValue = valueState.value;
+		const disabledState = computed(() => __props.disabled);
+		const requiredState = computed(() => __props.required);
+		const orientationState = computed(() => __props.orientation);
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const invalid = computed(() => ariaInvalidValue.value !== void 0);
+		const state = computed(() => {
+			if (disabledState.value) return "disabled";
+			return selectedValue.value === null ? "empty" : "selected";
+		});
+		const slotState = computed(() => ({
+			disabled: disabledState.value,
+			invalid: invalid.value,
+			orientation: orientationState.value,
+			required: requiredState.value,
+			state: state.value,
+			value: selectedValue.value
+		}));
+		watch(element, (root, _previous, onCleanup) => {
+			const form = root?.closest("form");
+			if (form === void 0 || form === null) return;
+			const onReset = () => {
+				if (!valueState.controlled.value) valueState.reset();
+			};
+			form.addEventListener("reset", onReset);
+			onCleanup(() => form.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		function selectValue(next, nativeEvent) {
+			const previous = selectedValue.value;
+			const changed = valueState.set(next);
+			if (changed) emit("change", next, previous, nativeEvent);
+			return changed;
+		}
+		function setValue(next) {
+			return valueState.set(next);
+		}
+		function focus(options) {
+			const checked = element.value?.querySelector("input[data-vize-ui=\"radio-group-item\"]:checked:not(:disabled)");
+			const first = element.value?.querySelector("input[data-vize-ui=\"radio-group-item\"]:not(:disabled)");
+			(checked ?? first)?.focus(options);
+		}
+		const context = radioGroupContext.provide({
+			disabled: disabledState,
+			id: groupId,
+			invalid,
+			name: computed(() => __props.name),
+			orientation: orientationState,
+			required: requiredState,
+			selectValue,
+			state,
+			value: selectedValue
+		});
+		__expose({
+			disabled: disabledState,
+			element,
+			focus,
+			id: groupId,
+			invalid,
+			orientation: orientationState,
+			required: requiredState,
+			reset: valueState.reset,
+			setValue,
+			state,
+			value: selectedValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(context).id.value,
+				ref_key: "element",
+				ref: element,
+				role: "radiogroup",
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": orientationState.value,
+				"aria-errormessage": ariaInvalidValue.value === void 0 ? void 0 : __props.ariaErrormessage,
+				"aria-invalid": ariaInvalidValue.value,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				"aria-required": requiredState.value ? "true" : void 0,
+				"data-vize-ui": "radio-group",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-required": requiredState.value ? "true" : void 0,
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-value": unref(selectedValue) ?? void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-4e820043"]]);
+//#endregion
+//#region src/families/selection/radio-group/radio-group-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"required",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-checked",
+	"data-disabled",
+	"data-required",
+	"data-invalid"
+];
+//#endregion
+//#region src/families/selection/radio-group/radio-group-item.vue
+var radio_group_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "radio-group-item",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: String,
+			required: false,
+			default: "on"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = radioGroupContext.use();
+		const element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "radio"
+		});
+		const checked = computed(() => context.value.value === __props.value);
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const itemState = computed(() => {
+			if (itemDisabled.value) return "disabled";
+			return checked.value ? "checked" : "unchecked";
+		});
+		function syncNativeState() {
+			if (element.value === null) return;
+			element.value.checked = checked.value;
+		}
+		watchEffect(syncNativeState);
+		function onChange(event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return;
+			if (event.currentTarget.checked) context.selectValue(__props.value, event);
+			nextTick(syncNativeState);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		__expose({
+			checked,
+			disabled: itemDisabled,
+			element,
+			focus,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				type: "radio",
+				name: unref(context).name.value,
+				value: __props.value,
+				checked: checked.value,
+				disabled: itemDisabled.value,
+				required: unref(context).required.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "radio-group-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-checked": checked.value ? "true" : "false",
+				"data-disabled": itemDisabled.value ? "true" : void 0,
+				"data-required": unref(context).required.value ? "true" : void 0,
+				"data-invalid": unref(context).invalid.value ? "true" : void 0,
+				onChange
+			}, null, 40, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-8ccf89f8"]]);
+//#endregion
+export { radio_group_default as n, radio_group_item_default as t };

package/dist/radio-group.d.mts

@@ -0,0 +1,2 @@
+import { $r as RadioGroupAriaInvalid, Qr as _default, Zr as _default$1, ai as RadioGroupState, ei as RadioGroupExpose, ii as RadioGroupSlotState, ni as RadioGroupItemState, oi as RadioGroupValue, ri as RadioGroupOrientation, ti as RadioGroupItemExpose } from "./announcer-DGr2Iz0i.mjs";
+export { _default as RadioGroup, type RadioGroupAriaInvalid, type RadioGroupExpose, _default$1 as RadioGroupItem, type RadioGroupItemExpose, type RadioGroupItemState, type RadioGroupOrientation, type RadioGroupSlotState, type RadioGroupState, type RadioGroupValue };

package/dist/radio-group.mjs

@@ -0,0 +1,2 @@
+import { n as radio_group_default, t as radio_group_item_default } from "./radio-group-DbTmWcxl.mjs";
+export { radio_group_default as RadioGroup, radio_group_item_default as RadioGroupItem };