const require_rolldown_runtime = require('../rolldown-runtime.cjs');
const require_shared_createContext = require('../shared/createContext.cjs');
const require_shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
const require_shared_useId = require('../shared/useId.cjs');
const require_Primitive_Primitive = require('../Primitive/Primitive.cjs');
const require_Form_FormRoot = require('../Form/FormRoot.cjs');
const require_Field_useFieldValidation = require('./useFieldValidation.cjs');
const vue = require_rolldown_runtime.__toESM(require("vue"));
const ohash = require_rolldown_runtime.__toESM(require("ohash"));

//#region src/Field/FieldRoot.vue?vue&type=script&setup=true&lang.ts
const [injectFieldRootContext, provideFieldRootContext] = require_shared_createContext.createContext("FieldRoot");
var FieldRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
	__name: "FieldRoot",
	props: {
		name: {
			type: String,
			required: false
		},
		disabled: {
			type: Boolean,
			required: false
		},
		required: {
			type: Boolean,
			required: false
		},
		invalid: {
			type: Boolean,
			required: false,
			default: void 0
		},
		dirty: {
			type: Boolean,
			required: false,
			default: void 0
		},
		touched: {
			type: Boolean,
			required: false,
			default: void 0
		},
		validate: {
			type: Function,
			required: false
		},
		validationMode: {
			type: String,
			required: false,
			default: void 0
		},
		validationDebounceTime: {
			type: Number,
			required: false
		},
		asChild: {
			type: Boolean,
			required: false
		},
		as: {
			type: null,
			required: false
		}
	},
	setup(__props, { expose: __expose }) {
		const props = __props;
		const { disabled, required, name } = (0, vue.toRefs)(props);
		const fieldId = (0, vue.ref)(require_shared_useId.useId(void 0, "reka-field"));
		const labelIdBase = require_shared_useId.useId(void 0, "reka-field-label");
		const labelMounted = (0, vue.ref)(false);
		const labelId = (0, vue.computed)(() => labelMounted.value ? labelIdBase : void 0);
		const touchedState = (0, vue.ref)(false);
		const dirtyState = (0, vue.ref)(false);
		const filled = (0, vue.ref)(false);
		const focused = (0, vue.ref)(false);
		const touched = (0, vue.computed)(() => props.touched ?? touchedState.value);
		const dirty = (0, vue.computed)(() => props.dirty ?? dirtyState.value);
		const markedDirty = (0, vue.ref)(false);
		(0, vue.watch)(() => props.dirty, (value$1) => {
			if (value$1 !== void 0) markedDirty.value = value$1;
		}, { immediate: true });
		const formContext = require_Form_FormRoot.injectFormRootContext(null);
		const validationMode = (0, vue.computed)(() => props.validationMode ?? formContext?.validationMode.value ?? "onSubmit");
		function shouldValidateOnChange() {
			return validationMode.value === "onChange" || validationMode.value === "onSubmit" && (formContext?.submitCount.value ?? 0) > 0;
		}
		const control = (0, vue.shallowRef)();
		const initialValue = (0, vue.ref)(null);
		let initialValueCaptured = false;
		const { validity: validationValidity, errors: validationErrors, value, commit, change, reset: resetValidation } = require_Field_useFieldValidation.useFieldValidation({
			validate: (0, vue.computed)(() => props.validate),
			validationMode,
			validationDebounceTime: (0, vue.computed)(() => props.validationDebounceTime),
			getFormValues: () => formContext?.getValues() ?? {},
			shouldValidateOnChange,
			markedDirty
		});
		const clearedServerError = (0, vue.ref)(false);
		const serverError = (0, vue.computed)(() => {
			if (!formContext || !name.value) return void 0;
			return formContext.serverErrors.value[name.value];
		});
		(0, vue.watch)([serverError, () => formContext?.serverErrors.value], () => {
			clearedServerError.value = false;
		});
		const serverErrors = (0, vue.computed)(() => {
			if (clearedServerError.value || !serverError.value) return [];
			return (Array.isArray(serverError.value) ? serverError.value : [serverError.value]).filter(Boolean);
		});
		const errors = (0, vue.computed)(() => [...validationErrors.value, ...serverErrors.value]);
		const externalInvalid = (0, vue.computed)(() => props.invalid === true || serverErrors.value.length > 0);
		const valid = (0, vue.computed)(() => {
			if (externalInvalid.value) return false;
			return disabled.value ? null : validationValidity.value.valid;
		});
		const invalid = (0, vue.computed)(() => valid.value === false);
		const validity = (0, vue.computed)(() => ({
			...validationValidity.value,
			valid: valid.value
		}));
		const dataAttributes = (0, vue.computed)(() => ({
			"data-disabled": disabled.value ? "" : void 0,
			"data-valid": valid.value === true ? "" : void 0,
			"data-invalid": valid.value === false ? "" : void 0,
			"data-dirty": dirty.value ? "" : void 0,
			"data-touched": touched.value ? "" : void 0,
			"data-filled": filled.value ? "" : void 0,
			"data-focused": focused.value ? "" : void 0
		}));
		const describedByIds = (0, vue.ref)([]);
		const describedBy = (0, vue.computed)(() => describedByIds.value.length ? describedByIds.value.join(" ") : void 0);
		function registerDescription(id) {
			describedByIds.value.push(id);
			return () => {
				const index = describedByIds.value.indexOf(id);
				if (index !== -1) describedByIds.value.splice(index, 1);
			};
		}
		function registerLabel() {
			labelMounted.value = true;
			return () => {
				labelMounted.value = false;
			};
		}
		function setDirty(next) {
			if (props.dirty !== void 0) return;
			if (next) markedDirty.value = true;
			dirtyState.value = next;
		}
		function setTouched(next) {
			if (props.touched !== void 0) return;
			touchedState.value = next;
		}
		function reportControlState(state) {
			if (state.focused !== void 0) focused.value = state.focused;
			if (state.filled !== void 0) filled.value = state.filled;
			if (state.dirty !== void 0) setDirty(state.dirty);
			if (state.touched !== void 0) setTouched(state.touched);
		}
		function isFilledValue(value$1) {
			if (Array.isArray(value$1)) return value$1.length > 0;
			return value$1 !== void 0 && value$1 !== null && value$1 !== "";
		}
		function isFilled(value$1) {
			return (control.value?.isFilled ?? isFilledValue)(value$1);
		}
		const lastReportedValue = (0, vue.ref)(void 0);
		function resolveValue(detail) {
			if (detail) return detail.value;
			return control.value ? control.value.getValue() : lastReportedValue.value;
		}
		function getValiditySource() {
			const current = control.value;
			if (!current) return {};
			if (current.validityElement) return { element: current.validityElement() ?? void 0 };
			return { getValidity: (value$1) => require_Field_useFieldValidation.createValidityState({ valueMissing: (required.value || Boolean(current.required?.())) && !isFilled(value$1) }) };
		}
		function handleControlFocus() {
			focused.value = true;
		}
		function handleControlBlur(detail) {
			if (detail) lastReportedValue.value = detail.value;
			const current = resolveValue(detail);
			focused.value = false;
			setTouched(true);
			filled.value = isFilled(current);
			if (validationMode.value === "onBlur" && !disabled.value) commit(current, getValiditySource());
		}
		function handleControlInput(detail) {
			if (detail) lastReportedValue.value = detail.value;
			const current = resolveValue(detail);
			setDirty(!(0, ohash.isEqual)(current ?? "", initialValue.value ?? ""));
			filled.value = isFilled(current);
			clearedServerError.value = true;
			if (!disabled.value) change(current, getValiditySource());
		}
		function registerControl(registration) {
			control.value = registration;
			const current = registration.getValue();
			if (!initialValueCaptured) {
				initialValueCaptured = true;
				initialValue.value = current;
			}
			filled.value = isFilled(current);
			return () => {
				if (control.value === registration) control.value = void 0;
			};
		}
		function getControlId() {
			return control.value?.id?.() ?? fieldId.value;
		}
		function focusControl() {
			control.value?.element()?.focus();
		}
		function validate() {
			if (!disabled.value) {
				markedDirty.value = true;
				commit(resolveValue(), getValiditySource());
			}
			return valid.value !== false;
		}
		__expose({ validate });
		require_shared_useForwardExpose.useForwardExpose();
		function resetField() {
			touchedState.value = false;
			dirtyState.value = false;
			markedDirty.value = props.dirty ?? false;
			filled.value = false;
			focused.value = false;
			clearedServerError.value = true;
			lastReportedValue.value = void 0;
			resetValidation();
			setTimeout(() => {
				if (control.value) filled.value = isFilled(control.value.getValue());
			});
		}
		let unregisterFromForm;
		(0, vue.onMounted)(() => {
			unregisterFromForm = formContext?.registerField({
				name,
				validate,
				invalid,
				getValue: () => resolveValue(),
				getControlElement: () => control.value?.element() ?? void 0,
				resetField
			});
		});
		(0, vue.onBeforeUnmount)(() => unregisterFromForm?.());
		provideFieldRootContext({
			fieldId,
			getControlId,
			labelId,
			name,
			disabled,
			required,
			valid,
			invalid,
			validity,
			errors,
			validationErrors,
			serverErrors,
			value,
			initialValue,
			touched,
			dirty,
			filled,
			focused,
			dataAttributes,
			describedBy,
			registerDescription,
			registerLabel,
			registerControl,
			focusControl,
			reportControlState,
			handleControlFocus,
			handleControlBlur,
			handleControlInput,
			validate,
			resetField
		});
		return (_ctx, _cache) => {
			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_Primitive_Primitive.Primitive), (0, vue.mergeProps)({
				as: __props.as,
				"as-child": __props.asChild
			}, dataAttributes.value), {
				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", {
					invalid: invalid.value,
					errors: errors.value
				})]),
				_: 3
			}, 16, ["as", "as-child"]);
		};
	}
});

//#endregion
//#region src/Field/FieldRoot.vue
var FieldRoot_default = FieldRoot_vue_vue_type_script_setup_true_lang_default;

//#endregion
Object.defineProperty(exports, 'FieldRoot_default', {
  enumerable: true,
  get: function () {
    return FieldRoot_default;
  }
});
Object.defineProperty(exports, 'injectFieldRootContext', {
  enumerable: true,
  get: function () {
    return injectFieldRootContext;
  }
});
//# sourceMappingURL=FieldRoot.cjs.map