notform 1.0.0-alpha.3

package/README.md

@@ -0,0 +1,29 @@
+# vue-components-starter
+
+A starter for creating a Vue component library.
+
+## Development
+
+- Install dependencies:
+
+```bash
+npm install
+```
+
+- Run the playground:
+
+```bash
+npm run playground
+```
+
+- Run the unit tests:
+
+```bash
+npm run test
+```
+
+- Build the library:
+
+```bash
+npm run build
+```

package/dist/index.d.ts

@@ -0,0 +1,412 @@
+import * as vue0 from "vue";
+import { ComputedRef, FormHTMLAttributes, MaybeRefOrGetter, Ref, VNodeChild } from "vue";
+import { StandardSchemaV1, StandardSchemaV1 as StandardSchemaV1$1 } from "@standard-schema/spec";
+import { PartialDeep, Paths as Paths$1 } from "type-fest";
+
+//#region src/types/shared.d.ts
+/**
+ * Defines the strategy for when validation checks are executed.
+ * - 'lazy': Validation occurs only on blur or form submission.
+ * - 'eager': Validation occurs immediately on every value change.
+ */
+type ValidationMode = 'lazy' | 'eager';
+/**
+ * Interaction events that can trigger a validation check for a field.
+ */
+type ValidationTriggers = 'blur' | 'change' | 'input' | 'mount' | 'focus';
+/**
+ * Represents a validation schema for object-based data structures.
+ * Complies with the Standard Schema specification.
+ */
+type ObjectSchema = StandardSchemaV1$1 & {
+  '~standard': StandardSchemaV1$1['~standard'] & {
+    types?: {
+      input: object;
+    };
+  };
+};
+/**
+ * Represents a validation schema for array-based data structures.
+ * Complies with the Standard Schema specification.
+ */
+type ArraySchema = StandardSchemaV1$1 & {
+  '~standard': StandardSchemaV1$1['~standard'] & {
+    types?: {
+      input: Array<any>;
+    };
+  };
+};
+//#endregion
+//#region src/types/utils.d.ts
+/**
+ * Constructs a type where all properties of the input type are optional recursively.
+ * @template TData The base data structure to transform.
+ */
+type DeepPartial<TData> = PartialDeep<TData, {
+  recurseIntoArrays: true;
+  allowUndefinedInNonTupleArrays: true;
+}>;
+/**
+ * Constructs a type representing all possible dot-separated paths within an object.
+ * @template TReference The object type for which to generate paths.
+ */
+type Paths<TReference> = Paths$1<TReference, {
+  maxRecursionDepth: 10;
+  bracketNotation: true;
+  leavesOnly: false;
+}> | (string & {});
+//#endregion
+//#region src/types/form.d.ts
+/**
+ * Configuration options for initializing a new form instance.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type UseFormOptions<TSchema extends ObjectSchema> = {
+  /** Unique form identifier (autogenerated if omitted) */
+  id?: string;
+  /** The validation schema used to parse and validate form data */
+  schema: MaybeRefOrGetter<TSchema>;
+  /** Initial form data values */
+  initialState?: DeepPartial<StandardSchemaV1$1.InferInput<TSchema>>;
+  /** List of validation issues to display initially */
+  initialErrors?: StandardSchemaV1$1.Issue[];
+  /** Validation behavioral strategy (lazy or eager) */
+  mode?: ValidationMode;
+  /** Events that trigger individual field validation */
+  validateOn?: ValidationTriggers[];
+  /**
+   * Custom validation logic that runs after schema validation.
+   * @param data The validated data from the schema.
+   * @returns Success boolean, issues array, or void.
+   */
+  onValidate?: (data: StandardSchemaV1$1.InferOutput<TSchema>) => boolean | void | StandardSchemaV1$1.Issue[] | Promise<boolean | void | StandardSchemaV1$1.Issue[]>;
+  /** Callback triggered when the form is reset */
+  onReset?: () => void;
+  /**
+   * Callback triggered when form validation fails.
+   * @param errors The list of identified issues.
+   */
+  onError?: (errors: StandardSchemaV1$1.Issue[]) => void;
+};
+/**
+ * The core state and methods provided by a form instance.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type FormContext<TSchema extends ObjectSchema> = {
+  /** Unique form identifier */
+  id: string;
+  /** Deeply reactive object of field values */
+  state: Ref<StandardSchemaV1$1.InferInput<TSchema>>;
+  /**
+   * Updates the form state.
+   * @param _state The new state to apply.
+   * @param _validate Re-validate after update (default: true).
+   */
+  setState: (_state: DeepPartial<StandardSchemaV1$1.InferInput<TSchema>>, _validate?: boolean) => void;
+  /** Baseline form data at moment of initialization */
+  initialState: StandardSchemaV1$1.InferInput<TSchema>;
+  /** Reactive array of active validation issues */
+  errors: Ref<StandardSchemaV1$1.Issue[]>;
+  /**
+   * Directly sets the form errors.
+   * @param _errors The issues to apply.
+   */
+  setErrors: (_errors: StandardSchemaV1$1.Issue[]) => void;
+  /** Removes all active validation issues */
+  clearErrors: () => void;
+  /**
+   * Retrieves validation issues for a specific field.
+   * @param field The path to the field.
+   * @returns Array of issues for that field.
+   */
+  getFieldErrors: (field: Paths<StandardSchemaV1$1.InferInput<TSchema>>) => StandardSchemaV1$1.Issue[];
+  /** List of issues provided during initialization */
+  initialErrors: StandardSchemaV1$1.Issue[];
+  /** Computed reference to the active validation schema */
+  schema: ComputedRef<TSchema>;
+  /** Strategy for how/when validation occurs */
+  mode: ValidationMode;
+  /** Interaction events configured to trigger validation */
+  validateOn: ValidationTriggers[];
+  /**
+   * Validates entire form.
+   * @returns Promise resolving to validation results.
+   */
+  validate: () => Promise<StandardSchemaV1$1.Result<StandardSchemaV1$1.InferOutput<TSchema>>>;
+  /**
+   * Validates a single specified field.
+   * @param field The path to the field.
+   * @returns Promise resolving to validation results.
+   */
+  validateField: (field: Paths<StandardSchemaV1$1.InferInput<TSchema>>) => Promise<StandardSchemaV1$1.Result<StandardSchemaV1$1.InferOutput<TSchema>>>;
+  /**
+   * Reverts state and errors to initial or custom baseline.
+   * @param _state Optional partial state baseline.
+   * @param _errors Optional issues list baseline.
+   * @param _validate Re-validate after resetting (default: false).
+   */
+  reset: (_state?: DeepPartial<StandardSchemaV1$1.InferInput<TSchema>>, _errors?: StandardSchemaV1$1.Issue[], _validate?: boolean) => void;
+  /** Reactive status of async validation process */
+  isValidating: Ref<boolean>;
+  /** Computed status of form validity */
+  isValid: ComputedRef<boolean>;
+  /** Computed status of field interactions */
+  isTouched: ComputedRef<boolean>;
+  /**
+   * Marks a field as interacted with.
+   * @param field The path to the field.
+   */
+  touchField: (field: Paths<StandardSchemaV1$1.InferInput<TSchema>>) => void;
+  /** Marks all fields in the form as touched */
+  touchAllFields: () => void;
+  /** Reactive set of touched field paths */
+  touchedFields: Ref<Set<Paths<StandardSchemaV1$1.InferInput<TSchema>>>>;
+  /** Computed status of form modifications */
+  isDirty: ComputedRef<boolean>;
+  /** Reactive set of dirty field paths */
+  dirtyFields: Ref<Set<Paths<StandardSchemaV1$1.InferInput<TSchema>>>>;
+  /**
+   * Programmatically marks a field as dirty.
+   * @param field The path to the field.
+   */
+  dirtyField: (field: Paths<StandardSchemaV1$1.InferInput<TSchema>>) => void;
+  /** Marks all fields in the form as dirty */
+  dirtyAllFields: () => void;
+  /**
+   * Validates and then triggers form submission.
+   * @param event The original form submission event.
+   * @param callback Callback executed only if validation passes.
+   */
+  submit: (event?: Event, callback?: (data: StandardSchemaV1$1.InferOutput<TSchema>) => void | Promise<void>) => Promise<void>;
+};
+/**
+ * Properties accepted by the Form component.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type FormProps<TSchema extends ObjectSchema> = Pick<FormContext<TSchema>, 'id'> & /* @vue-ignore */Omit<FormHTMLAttributes, 'id'>;
+/**
+ * Slots provided by the Form component.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type FormSlots<TSchema extends ObjectSchema> = {
+  /** The default slot receives the form context as its scope */
+  default: (props: FormContext<TSchema>) => VNodeChild;
+};
+/**
+ * Expected return type for the useForm composable.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type UseFormReturn<TSchema extends ObjectSchema> = FormContext<TSchema>;
+//#endregion
+//#region src/types/field.d.ts
+/** Configuration properties for the Field component */
+type FieldProps = {
+  /** The unique name/path identifying the field within the form state */
+  name: string;
+};
+/**
+ * State and methods provided to the Field component's scope.
+ */
+type FieldContext = {
+  /** The name/path of the field */
+  name: string;
+  /** Array of validation error messages currently active for this field */
+  errors: string[];
+  /** Indicates if the field has been interacted with (focus lost) */
+  isTouched: boolean;
+  /** Indicates if the field's current value differs from its initial value */
+  isDirty: boolean;
+  /** Indicates if the field currently passes all validation rules */
+  isValid: boolean;
+  /**
+   * Triggers a manual validation check for only this field.
+   * @returns Resolve with the validation result object.
+   */
+  validate: () => Promise<StandardSchemaV1$1.Result<ObjectSchema>>;
+  methods: {
+    /** Logic to execute when the field loses focus */
+    onBlur: () => void;
+    /** Logic to execute when the field's value is committed */
+    onChange: () => void;
+    /** Logic to execute when the field receives user input */
+    onInput: () => void;
+    /** Logic to execute when the field gains focus */
+    onFocus: () => void;
+  };
+};
+/**
+ * Slots provided by the Field component.
+ */
+type FieldSlots = {
+  /** The default slot receives the field context for use within templates */
+  default: (props: FieldContext) => VNodeChild;
+};
+//#endregion
+//#region src/types/message.d.ts
+/**
+ * Configuration properties for the Message component.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ */
+type MessageProps<TSchema extends ObjectSchema> = {
+  /** The name/path of the field whose error message should be displayed */
+  name: Paths$1<StandardSchemaV1$1.InferInput<TSchema>>;
+};
+/**
+ * State provided to the Message component's scope.
+ */
+type MessageContext = {
+  /** The first active validation error message for the specified field */
+  message: FieldContext['errors'][number];
+};
+/**
+ * Slots provided by the Message component.
+ */
+type MessageSlots = {
+  /** The default slot receives the error message context for custom rendering */
+  default: (props: MessageContext) => VNodeChild;
+};
+//#endregion
+//#region src/components/Form.vue.d.ts
+declare const __VLS_export$3: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue0.PublicProps & __VLS_PrettifyLocal$2<FormProps<TSchema>> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: FormSlots<TSchema>;
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default$2: typeof __VLS_export$3;
+type __VLS_PrettifyLocal$2<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+//#region src/components/Field.vue.d.ts
+/**
+ * Slots provided by the Field component.
+ */
+type __VLS_Slots = FieldSlots;
+declare const __VLS_base: vue0.DefineComponent<FieldProps, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<FieldProps> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default$1: typeof __VLS_export$2;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+//#region src/components/Message.vue.d.ts
+declare const __VLS_export$1: <TSchema extends ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue0.PublicProps & __VLS_PrettifyLocal$1<MessageProps<TSchema>> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: MessageSlots;
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default$3: typeof __VLS_export$1;
+type __VLS_PrettifyLocal$1<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+//#region src/types/array-field.d.ts
+/**
+ * Properties accepted by the ArrayField component.
+ * @template TSchema The schema of the array field.
+ */
+type ArrayFieldProps<TSchema extends ArraySchema> = {
+  /** The unique name/path identifying the array field in the form state */
+  name: string;
+  /** The specific schema instance used to validate the array items */
+  schema: TSchema;
+};
+/**
+ * The core state and methods provided by an ArrayField instance.
+ * @template TSchema The schema of the array field.
+ */
+type ArrayFieldContext<TSchema extends ArraySchema> = {
+  /**
+   * Array of individual field contexts for each item in the collection.
+   * Useful for mapping components to array elements.
+   */
+  fields: Array<{
+    /** A unique identifier for the field (defaults to index) */
+    key: string | number;
+    /** The 0-based position of the field within the array */
+    index: number;
+    /** The current value of the field at this index */
+    value: StandardSchemaV1$1.InferInput<TSchema>[number];
+    /** True if this is first item in the collection */
+    first: boolean;
+    /** True if this is the last item in the collection */
+    last: boolean;
+  }>;
+  /** Adds a new item to the end of the collection */
+  append: (data: StandardSchemaV1$1.InferInput<TSchema>[number]) => void;
+  /** Adds a new item to the end of the collection (alias for append) */
+  push: (data: StandardSchemaV1$1.InferInput<TSchema>[number]) => void;
+  /** Adds a new item to the beginning of the collection */
+  prepend: (data: StandardSchemaV1$1.InferInput<TSchema>[number]) => void;
+  /**
+   * Removes the item at the specified index.
+   * @param index The index to remove.
+   */
+  remove: (index: number) => void;
+  /**
+   * Inserts a new item at a specific position.
+   * @param index The insertion index.
+   * @param data Initial data for the new item.
+   */
+  insert: (index: number, data: StandardSchemaV1$1.InferInput<TSchema>[number]) => void;
+  /**
+   * Replaces data at a specific index.
+   * @param index The target index.
+   * @param data New data to apply.
+   */
+  update: (index: number, data: StandardSchemaV1$1.InferInput<TSchema>[number]) => void;
+};
+/**
+ * Slots provided by the ArrayField component.
+ * @template TSchema The schema of the array field.
+ */
+type ArrayFieldSlots<TSchema extends ArraySchema> = {
+  /** The default slot receives the array field context as its scope */
+  default: (props: ArrayFieldContext<TSchema>) => VNodeChild;
+};
+//#endregion
+//#region src/components/ArrayField.vue.d.ts
+declare const __VLS_export: <TArraySchema extends ArraySchema, TObjectSchema extends ObjectSchema = ObjectSchema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue0.PublicProps & __VLS_PrettifyLocal<ArrayFieldProps<TArraySchema>> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: ArrayFieldSlots<TArraySchema>;
+  emit: {};
+}>) => vue0.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+//#region src/composables/use-form.d.ts
+/**
+ * Initializes a form instance with validation logic, reactive state, and lifecycle methods.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ * @param options Configuration object for the form behavior and initial state.
+ * @returns The gathered form context object.
+ */
+declare function useForm<TSchema extends ObjectSchema>(options: UseFormOptions<TSchema>): UseFormReturn<TSchema>;
+//#endregion
+//#region src/utils/form-context.d.ts
+/**
+ * Locates and returns the active form context associated with a given ID.
+ * @template TSchema The validation schema type derived from ObjectSchema.
+ * @param id The unique identifier of the form to access.
+ * @returns The resolved form context object.
+ * @throws Error if the context cannot be found in the current component tree.
+ */
+declare function withContext<TSchema extends ObjectSchema>(id: string): FormContext<TSchema>;
+//#endregion
+export { _default as ArrayField, ArraySchema, DeepPartial, _default$1 as Field, FieldContext, FieldProps, FieldSlots, _default$2 as Form, FormContext, FormProps, FormSlots, _default$3 as Message, MessageContext, MessageProps, MessageSlots, ObjectSchema, Paths, type StandardSchemaV1, UseFormOptions, UseFormReturn, ValidationMode, ValidationTriggers, useForm, withContext };

package/dist/index.js

@@ -0,0 +1,504 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, nextTick, normalizeProps, onMounted, openBlock, provide, reactive, ref, renderSlot, toDisplayString, toValue, unref, useId, vShow, withDirectives } from "vue";
+import { getProperty, parsePath, setProperty } from "dot-prop";
+
+//#region src/utils/form-context.ts
+/** Internal registry mapping form IDs to their injection keys */
+const formContextKeys = /* @__PURE__ */ new Map();
+/** Injection key for the unique identifier of the current active form */
+const CURRENT_FORM_ID_KEY = Symbol("valid:form:id");
+/**
+* Retrieves an existing injection key or creates a new one for a form ID.
+* @template TSchema The validation schema type derived from ObjectSchema.
+* @param id The unique string identifier for the form.
+* @returns A strictly typed InjectionKey for the form context.
+*/
+function getFormContextKey(id) {
+	if (!formContextKeys.has(id)) {
+		const key = Symbol(`valid:form:${id}:context`);
+		formContextKeys.set(id, key);
+	}
+	return formContextKeys.get(id);
+}
+/**
+* Locates and returns the active form context associated with a given ID.
+* @template TSchema The validation schema type derived from ObjectSchema.
+* @param id The unique identifier of the form to access.
+* @returns The resolved form context object.
+* @throws Error if the context cannot be found in the current component tree.
+*/
+function withContext(id) {
+	const context = inject(getFormContextKey(id));
+	if (!context) throw new Error(`No form context found for form with id "${id}"`);
+	return context;
+}
+
+//#endregion
+//#region src/components/Form.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+/**
+* Provides form context and a structural wrapper for form fields.
+* @template TSchema The validation schema type derived from ObjectSchema.
+*/
+var Form_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Form",
+	props: { id: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		/**
+		* Slots provided by the Form component.
+		*/
+		const form = withContext(props.id);
+		provide(CURRENT_FORM_ID_KEY, props.id);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", mergeProps(_ctx.$attrs, { id: props.id }), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(form))))], 16, _hoisted_1);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Form.vue
+var Form_default = Form_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/Field.vue?vue&type=script&setup=true&lang.ts
+/**
+* Component for individual form fields.
+* Manages field-level state, validation triggers, and events.
+*/
+var Field_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Field",
+	props: { name: {
+		type: String,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		/**
+		* Slots provided by the Field component.
+		*/
+		const formID = inject(CURRENT_FORM_ID_KEY);
+		if (!formID) throw new Error("Field must be used inside a Form component");
+		const { mode, validateOn, touchedFields, dirtyFields, validateField, getFieldErrors, touchField, dirtyField } = withContext(formID);
+		/**
+		* Triggers validation for this specific field.
+		* @returns Promise resolving to the validation result.
+		*/
+		async function validate() {
+			return await validateField(props.name);
+		}
+		/**
+		* The consolidated reactive state exposed to the component's template.
+		*/
+		const context = reactive({
+			name: computed(() => props.name),
+			errors: computed(() => getFieldErrors(props.name).map((error) => error.message)),
+			isTouched: computed(() => touchedFields.value.has(props.name)),
+			isDirty: computed(() => dirtyFields.value.has(props.name)),
+			isValid: computed(() => getFieldErrors(props.name).length === 0),
+			validate,
+			methods: {
+				onBlur: function() {
+					touchField(props.name);
+					if (mode === "eager" || validateOn.includes("blur")) validate();
+				},
+				onChange: function() {
+					dirtyField(props.name);
+					if (mode === "eager" || validateOn.includes("change")) validate();
+				},
+				onInput: function() {
+					dirtyField(props.name);
+					if (mode === "eager" || validateOn.includes("input")) validate();
+				},
+				onFocus: function() {
+					dirtyField(props.name);
+					if (mode === "eager" || validateOn.includes("focus")) validate();
+				}
+			}
+		});
+		onMounted(async () => {
+			await nextTick();
+			if (validateOn.includes("mount")) await validate();
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context)));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Field.vue
+var Field_default = Field_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/Message.vue?vue&type=script&setup=true&lang.ts
+/**
+* Displays validation error messages for a specific form field.
+* @template TSchema The validation schema type derived from ObjectSchema.
+*/
+var Message_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Message",
+	props: { name: {
+		type: null,
+		required: true
+	} },
+	setup(__props) {
+		const props = __props;
+		/**
+		* Slots provided by the Message component.
+		*/
+		const formID = inject(CURRENT_FORM_ID_KEY);
+		if (!formID) throw new Error("Message must be used inside a Form component");
+		const { getFieldErrors } = withContext(formID);
+		/**
+		* The reactive state provided to the component's slot.
+		*/
+		const context = reactive({ message: computed(() => getFieldErrors(props.name).map((error) => error.message)[0]) });
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context)), () => [withDirectives(createElementVNode("span", null, toDisplayString(context.message), 513), [[vShow, context.message]])]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Message.vue
+var Message_default = Message_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/ArrayField.vue?vue&type=script&setup=true&lang.ts
+/**
+* Component for managing array-based form fields.
+* Provides methods for adding, removing, and updating array items.
+* @template TArraySchema Schema for the array field.
+* @template TObjectSchema Parent form object schema.
+*/
+var ArrayField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "ArrayField",
+	props: {
+		name: {
+			type: String,
+			required: true
+		},
+		schema: {
+			type: null,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		/**
+		* Slots provided by the ArrayField component.
+		*/
+		const formID = inject(CURRENT_FORM_ID_KEY);
+		if (!formID) throw new Error("ArrayField must be used inside a Form component");
+		const { state, validateField } = withContext(formID);
+		/**
+		* Reactive bridge between the form state and the specific array field.
+		*/
+		const arrayState = computed({
+			get() {
+				const fieldValue = getProperty(state.value, props.name);
+				return Array.isArray(fieldValue) ? fieldValue : [];
+			},
+			set(value) {
+				setProperty(state.value, props.name, value);
+				validateField(props.name);
+			}
+		});
+		/**
+		* Computes individual field contexts for each item in the array.
+		*/
+		const fields = computed(() => {
+			return arrayState.value.map((value, index) => {
+				return {
+					key: index,
+					index,
+					value,
+					first: index === 0,
+					last: index === arrayState.value.length - 1
+				};
+			});
+		});
+		/**
+		* Adds a new item to the end of the array.
+		* @param data The initial data for the new item.
+		*/
+		function append(data) {
+			arrayState.value = [...arrayState.value, data];
+		}
+		/**
+		* Adds a new item to the beginning of the array.
+		* @param data The initial data for the new item.
+		*/
+		function prepend(data) {
+			arrayState.value = [data, ...arrayState.value];
+		}
+		/**
+		* Removes the item at the specified index.
+		* @param index The index of the item to remove.
+		*/
+		function remove(index) {
+			const newArray = [...arrayState.value];
+			newArray.splice(index, 1);
+			arrayState.value = newArray;
+		}
+		/**
+		* Inserts a new item at a specific index.
+		* @param index The insertion index.
+		* @param data The initial data for the new item.
+		*/
+		function insert(index, data) {
+			const newArray = [...arrayState.value];
+			newArray.splice(index, 0, data);
+			arrayState.value = newArray;
+		}
+		/**
+		* Replaces the data at a specific index.
+		* @param index The target index.
+		* @param data The new data to apply.
+		*/
+		function update(index, data) {
+			const newArray = [...arrayState.value];
+			newArray[index] = data;
+			arrayState.value = newArray;
+		}
+		/**
+		* Reactive context object exposed to the ArrayField slot.
+		*/
+		const context = reactive({
+			fields,
+			append,
+			push: append,
+			prepend,
+			remove,
+			insert,
+			update
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context)));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/ArrayField.vue
+var ArrayField_default = ArrayField_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/utils/helpers.ts
+/**
+* Normalizes a validation path segment into a standard property key.
+* @param segment The path segment to normalize.
+* @returns The normalized key.
+*/
+function normalizeSegment(segment) {
+	if (typeof segment === "object" && segment !== null && "key" in segment) return segment.key;
+	return segment;
+}
+/**
+* Checks if a validation issue path matches a target field path.
+* @param issuePath The path array from the validation issue.
+* @param targetPath The normalized path to compare against.
+* @returns True if the paths are equivalent.
+*/
+function isIssuePathEqual(issuePath, targetPath) {
+	if (!issuePath) return false;
+	if (issuePath.length !== targetPath.length) return false;
+	return issuePath.every((segment, i) => {
+		const normalizedSegment = normalizeSegment(segment);
+		const targetSegment = targetPath[i];
+		if (typeof normalizedSegment === "number" || typeof targetSegment === "number") return Number(normalizedSegment) === Number(targetSegment);
+		return normalizedSegment === targetSegment;
+	});
+}
+/**
+* Recursively retrieves all reachable paths of an object as dot-separated strings.
+* @param object The object to traverse.
+* @param prefix An optional prefix to prepended to each generated path.
+* @returns An array of string paths representing the object's structure.
+*/
+function getObjectPaths(object, prefix = "") {
+	let paths = [];
+	if (typeof object !== "object" || object === null) return paths;
+	for (const key in object) if (Object.prototype.hasOwnProperty.call(object, key)) {
+		const value = object[key];
+		const isArray = Array.isArray(object);
+		const isInt = /^\d+$/.test(key);
+		let currentKey = key;
+		if (isArray && isInt) currentKey = `[${key}]`;
+		const path = prefix ? prefix.endsWith("]") || currentKey.startsWith("[") ? `${prefix}${currentKey}` : `${prefix}.${currentKey}` : currentKey;
+		paths.push(path);
+		if (typeof value === "object" && value !== null) paths = paths.concat(getObjectPaths(value, path));
+	}
+	return paths;
+}
+
+//#endregion
+//#region src/composables/use-form.ts
+/**
+* Initializes a form instance with validation logic, reactive state, and lifecycle methods.
+* @template TSchema The validation schema type derived from ObjectSchema.
+* @param options Configuration object for the form behavior and initial state.
+* @returns The gathered form context object.
+*/
+function useForm(options) {
+	const { id = useId(), schema: _schema, initialErrors: _initialErrors = [], initialState: _initialState = {}, mode = "eager", validateOn = [
+		"blur",
+		"input",
+		"change"
+	], onValidate, onReset, onError } = options;
+	/** Active validation schema reference */
+	const schema = computed(() => toValue(_schema));
+	/** Baseline reactive state at creation */
+	const initialState = structuredClone(_initialState);
+	/** Baseline validation issues at creation */
+	const initialErrors = structuredClone(_initialErrors);
+	/** Internal state set by last custom reset */
+	const onResetState = ref(null);
+	/** Internal errors set by last custom reset */
+	const onResetErrors = ref(null);
+	/** The unified reactive context for the form instance */
+	const context = {
+		id,
+		schema,
+		initialState,
+		initialErrors,
+		mode,
+		validateOn,
+		state: ref(structuredClone(initialState)),
+		errors: ref([...initialErrors]),
+		isValidating: ref(false),
+		touchedFields: ref(/* @__PURE__ */ new Set()),
+		dirtyFields: ref(/* @__PURE__ */ new Set()),
+		isValid: computed(() => context.errors.value.length === 0),
+		isTouched: computed(() => context.touchedFields.value.size > 0),
+		isDirty: computed(() => context.dirtyFields.value.size > 0),
+		async validate() {
+			context.isValidating.value = true;
+			try {
+				const result = await context.schema.value["~standard"].validate(context.state.value);
+				if (result.issues) {
+					context.errors.value = [...result.issues];
+					onError?.([...result.issues]);
+					return { issues: result.issues };
+				}
+				if (onValidate) {
+					const customResult = await onValidate(result.value);
+					if (customResult === false) {
+						const formLevelError = {
+							message: "Validation failed",
+							path: []
+						};
+						context.errors.value = [formLevelError];
+						onError?.([formLevelError]);
+						return { issues: [formLevelError] };
+					}
+					if (Array.isArray(customResult) && customResult.length > 0) {
+						context.errors.value = customResult;
+						onError?.(customResult);
+						return { issues: customResult };
+					}
+				}
+				context.errors.value = [];
+				return { value: result.value };
+			} finally {
+				context.isValidating.value = false;
+			}
+		},
+		async validateField(path) {
+			context.isValidating.value = true;
+			try {
+				const result = await context.schema.value["~standard"].validate(context.state.value);
+				const pathArray = parsePath(path);
+				context.errors.value = context.errors.value.filter((error) => !isIssuePathEqual(error.path, pathArray));
+				if (result.issues) {
+					const errorsForPath = result.issues.filter((error) => isIssuePathEqual(error.path, pathArray));
+					if (errorsForPath.length > 0) {
+						context.errors.value = [...context.errors.value, ...errorsForPath];
+						return { issues: errorsForPath };
+					}
+					return { value: getProperty(context.state.value, path) };
+				}
+				return { value: getProperty(result.value, path) };
+			} finally {
+				context.isValidating.value = false;
+			}
+		},
+		reset(_state, _errors, _validate = false) {
+			if (_state) {
+				onResetState.value = structuredClone(_state);
+				context.state.value = structuredClone(_state);
+			} else {
+				onResetState.value = null;
+				context.state.value = structuredClone(initialState);
+			}
+			if (_errors) {
+				onResetErrors.value = structuredClone(_errors);
+				context.errors.value = [..._errors];
+			} else {
+				onResetErrors.value = null;
+				context.errors.value = [...initialErrors];
+			}
+			context.touchedFields.value.clear();
+			context.dirtyFields.value.clear();
+			onReset?.();
+			if (_validate) context.validate();
+		},
+		setState(_state, _validate = true) {
+			context.state.value = {
+				...context.state.value,
+				..._state
+			};
+			getObjectPaths(_state).forEach((path) => {
+				context.dirtyFields.value.add(path);
+				context.touchedFields.value.add(path);
+				context.validateField(path);
+			});
+			if (_validate) context.validate();
+		},
+		setErrors(_errors) {
+			context.errors.value = [...context.errors.value, ..._errors];
+		},
+		clearErrors() {
+			context.errors.value = [];
+		},
+		getFieldErrors(field) {
+			const pathArray = parsePath(field);
+			return context.errors.value.filter((error) => isIssuePathEqual(error.path, pathArray));
+		},
+		touchField(field) {
+			context.touchedFields.value.add(field);
+		},
+		touchAllFields() {
+			const paths = getObjectPaths(context.state.value);
+			context.touchedFields.value = new Set(paths);
+		},
+		dirtyField(field) {
+			context.dirtyFields.value.add(field);
+		},
+		dirtyAllFields() {
+			const paths = getObjectPaths(context.state.value);
+			context.dirtyFields.value = new Set(paths);
+		},
+		async submit(event, callback) {
+			event?.preventDefault();
+			event?.stopPropagation();
+			const result = await context.validate();
+			if (result.issues) {
+				context.errors.value = [...result.issues];
+				return;
+			}
+			context.touchAllFields();
+			context.dirtyAllFields();
+			if (callback) await callback(result.value);
+		}
+	};
+	provide(getFormContextKey(id), context);
+	return context;
+}
+var use_form_default = useForm;
+
+//#endregion
+export { ArrayField_default as ArrayField, Field_default as Field, Form_default as Form, Message_default as Message, use_form_default as useForm, withContext };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "notform",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "1.0.0-alpha.3",
+  "description": "Smooth Vue Forms Validation",
+  "author": "Favour Emeka <favorodera@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/favorodera/notform#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/favorodera/notform.git"
+  },
+  "bugs": {
+    "url": "https://github.com/favorodera/notform/issues"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "valibot": "^1.2.0",
+    "vue": "^3.0.0",
+    "yup": "^1.6.0",
+    "zod": "^4.3.5"
+  },
+  "peerDependenciesMeta": {
+    "valibot": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    },
+    "yup": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin": "^5.7.0",
+    "@types/node": "^25.0.3",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/eslint-plugin": "^1.6.6",
+    "@vitest/ui": "^4.0.17",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.7.0",
+    "playwright": "^1.57.0",
+    "tsdown": "^0.18.1",
+    "type-fest": "^5.4.1",
+    "typescript": "^5.9.3",
+    "unplugin-vue": "^7.1.0",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
+    "vitest-browser-vue": "^2.0.1",
+    "vue": "^3.5.25",
+    "vue-tsc": "^3.2.2"
+  },
+  "dependencies": {
+    "@standard-schema/spec": "^1.1.0",
+    "dot-prop": "^10.1.0"
+  },
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "keywords": [
+    "notform",
+    "vue",
+    "form",
+    "vue form",
+    "validator",
+    "vue form validator"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "test:watch": "vitest watch --ui",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --fix"
+  }
+}