@formisch/qwik 0.7.4 → 0.9.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as v from "valibot";
 import { JSXOutput, NoSerialize, PropsOf, QRL, ReadonlySignal } from "@qwik.dev/core";
-import * as _qwik_dev_core_internal1 from "@qwik.dev/core/internal";
+import * as _qwik_dev_core_internal3 from "@qwik.dev/core/internal";
 
 //#region ../../packages/core/dist/index.qwik.d.ts
 
@@ -227,7 +227,11 @@ type ValidationMode = "initial" | "touch" | "input" | "change" | "blur" | "submi
 /**
 * Submit handler type.
 */
-type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
+type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>) => MaybePromise<unknown>;
+/**
+* Submit event handler type.
+*/
+type SubmitEventHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
 //#endregion
 //#region src/types/form.qwik.d.ts
 /**
@@ -483,6 +487,17 @@ declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPat
 //#endregion
 //#region src/handleSubmit/handleSubmit.d.ts
 /**
+* Creates a submit event handler for the form that validates the form input,
+* and calls the provided handler if validation succeeds. This is designed to
+* be used with the form's onsubmit event.
+*
+* @param form The form store to handle submission for.
+* @param handler The submit handler function called with validated output if validation succeeds.
+*
+* @returns A submit event handler function to attach to the form element.
+*/
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): () => Promise<void>;
+/**
 * Creates a submit event handler for the form that prevents default browser
 * submission, validates the form input, and calls the provided handler if
 * validation succeeds. This is designed to be used with the form's onsubmit event.
@@ -492,7 +507,7 @@ declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPat
 *
 * @returns A submit event handler function to attach to the form element.
 */
-declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): (event: SubmitEvent) => Promise<void>;
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitEventHandler<TSchema>): (event: SubmitEvent) => Promise<void>;
 //#endregion
 //#region src/insert/insert.d.ts
 /**
@@ -868,6 +883,10 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
    * Whether the field is valid according to the schema.
    */
   readonly isValid: ReadonlySignal<boolean>;
+  /**
+   * Sets the field input value programmatically.
+   */
+  readonly onInput: QRL<(value: PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>) => void>;
   /**
    * The props to spread onto the field element for integration.
    */
@@ -966,7 +985,7 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
  *
  * @returns The UI of the field to be rendered.
  */
-declare const Field: <TSchema extends Schema, TFieldPath extends RequiredPath>(props: _qwik_dev_core_internal1.PublicProps<FieldProps<TSchema, TFieldPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
+declare const Field: <TSchema extends Schema, TFieldPath extends RequiredPath>(props: _qwik_dev_core_internal3.PublicProps<FieldProps<TSchema, TFieldPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/FieldArray/FieldArray.d.ts
 /**
@@ -994,7 +1013,7 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
  *
  * @returns The UI of the field array to be rendered.
  */
-declare const FieldArray: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(props: _qwik_dev_core_internal1.PublicProps<FieldArrayProps<TSchema, TFieldArrayPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
+declare const FieldArray: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(props: _qwik_dev_core_internal3.PublicProps<FieldArrayProps<TSchema, TFieldArrayPath>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
 //#endregion
 //#region src/components/Form/Form.d.ts
 /**
@@ -1008,7 +1027,7 @@ type FormProps<TSchema extends Schema = Schema> = Omit<PropsOf<'form'>, 'onSubmi
   /**
    * The submit handler called when the form is submitted and validation succeeds.
    */
-  readonly onSubmit$: QRL<SubmitHandler<TSchema>>;
+  readonly onSubmit$: QRL<SubmitHandler<TSchema> | SubmitEventHandler<TSchema>>;
 };
 /**
  * Form component that manages form submission and applies internal state.
@@ -1016,7 +1035,7 @@ type FormProps<TSchema extends Schema = Schema> = Omit<PropsOf<'form'>, 'onSubmi
  *
  * @returns The a native form element.
  */
-declare const Form: <TSchema extends Schema>(props: _qwik_dev_core_internal1.PublicProps<FormProps<TSchema>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal1.DevJSX) => JSXOutput;
+declare const Form: <TSchema extends Schema>(props: _qwik_dev_core_internal3.PublicProps<FormProps<TSchema>>, key: string | null, flags: number, dev?: _qwik_dev_core_internal3.DevJSX) => JSXOutput;
 //#endregion
 //#region src/hooks/useField/useField.d.ts
 /**
@@ -1031,6 +1050,9 @@ interface UseFieldConfig<TSchema extends Schema = Schema, TFieldPath extends Req
 /**
  * Creates a reactive field store of a specific field within a form store.
  *
+ * @param form The form store instance.
+ * @param config The field configuration.
+ *
  * @returns The field store with reactive properties and element props.
  */
 declare function useField<TSchema extends Schema, TFieldPath extends RequiredPath>(form: FormStore<TSchema>, config: UseFieldConfig<TSchema, TFieldPath>): FieldStore<TSchema, TFieldPath>;
@@ -1048,6 +1070,9 @@ interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath e
 /**
  * Creates a reactive field array store of a specific field array within a form store.
  *
+ * @param form The form store instance.
+ * @param config The field array configuration.
+ *
  * @returns The field array store with reactive properties for array management.
  */
 declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: FormStore<TSchema>, config: UseFieldArrayConfig<TSchema, TFieldArrayPath>): FieldArrayStore<TSchema, TFieldArrayPath>;
@@ -1057,6 +1082,8 @@ declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends R
  * Creates a reactive form store from a form configuration. The form store
  * manages form state and provides reactive properties.
  *
+ * @param configQrl The QRL containing the form configuration.
+ *
  * @returns The form store with reactive properties.
  */
 declare function useFormQrl<TSchema extends Schema>(configQrl: QRL<FormConfig<TSchema>>): FormStore<TSchema>;
@@ -1068,4 +1095,4 @@ declare function useFormQrl<TSchema extends Schema>(configQrl: QRL<FormConfig<TS
  */
 declare const useForm$: <TSchema extends Schema>(qrl: FormConfig<TSchema>) => FormStore<TSchema>;
 //#endregion
-export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };
+export { type DeepPartial, Field, FieldArray, FieldArrayProps, FieldArrayStore, type FieldElement, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, type FormConfig, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MoveConfig, type PartialValues, type PathValue, RemoveConfig, ReplaceConfig, type RequiredPath, ResetFieldConfig, ResetFormConfig, type Schema, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitEventHandler, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, type ValidArrayPath, type ValidPath, ValidateFormConfig, type ValidationMode, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, useForm$, useFormQrl, validate };

package/dist/index.qwik.js

@@ -65,7 +65,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path, nu
 						initializeFieldStore(internalFieldStore.children[index], schema.item, initialInput[index], path);
 						path.pop();
 					}
-				} else for (let index = 0; index < schema.items; index++) {
+				} else for (let index = 0; index < schema.items.length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
 					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
@@ -378,7 +378,7 @@ function setNestedInput(internalFieldStore, input) {
 		}
 		for (let index = 0; index < arrayInput.length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
 		internalFieldStore.input.value = input == null ? input : true;
-		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== items.length;
+		internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== internalFieldStore.items.value.length;
 	} else if (internalFieldStore.kind === "object") {
 		for (const key in internalFieldStore.children) setNestedInput(internalFieldStore.children[key], input?.[key]);
 		internalFieldStore.input.value = input == null ? input : true;
@@ -585,7 +585,7 @@ function getInput(form, config) {
 /* @__NO_SIDE_EFFECTS__ */
 function handleSubmit(form, handler) {
 	return async (event) => {
-		event.preventDefault();
+		event?.preventDefault();
 		const internalFormStore = form[INTERNAL];
 		internalFormStore.isSubmitted.value = true;
 		internalFormStore.isSubmitting.value = true;
@@ -829,6 +829,10 @@ function useField(form, config) {
 		isTouched: createComputed$(() => getFieldBool(internalFieldStore.value, "isTouched")),
 		isDirty: createComputed$(() => getFieldBool(internalFieldStore.value, "isDirty")),
 		isValid: createComputed$(() => !getFieldBool(internalFieldStore.value, "errors")),
+		onInput: $((value) => {
+			setFieldInput(internalFormStore, pathSignal.value, value);
+			validateIfRequired(internalFormStore, internalFieldStore.value, "input");
+		}),
 		props: {
 			get name() {
 				return internalFieldStore.value.name;
@@ -973,7 +977,7 @@ const Form = component$(({ of, onSubmit$,...other }) => {
 		ref: (element) => {
 			of[INTERNAL].element = element;
 		},
-		onSubmit$: (event) => handleSubmit(of, onSubmit$)(event),
+		onSubmit$: handleSubmit(of, onSubmit$),
 		children: /* @__PURE__ */ jsx(Slot, {})
 	});
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/qwik",
   "description": "The modular and type-safe form library for Qwik",
-  "version": "0.7.4",
+  "version": "0.9.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -36,7 +36,6 @@
     "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.31.0",
     "@qwik.dev/core": "2.0.0-beta.5",
     "@types/node": "24.0.13",
     "eslint": "9.31.0",
@@ -45,12 +44,12 @@
     "prettier": "3.6.2",
     "tsdown": "0.12.9",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.36.0",
     "valibot": "^1.2.0",
     "vite": "7.0.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "@formisch/core": "0.4.5",
-    "@formisch/methods": "0.5.2"
+    "@formisch/core": "0.6.0",
+    "@formisch/methods": "0.7.0",
+    "@formisch/eslint-config": "0.1.0"
   },
   "peerDependencies": {
     "@qwik.dev/core": ">=2",