@formisch/vue 0.2.0 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Fabian Hiller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -2,7 +2,7 @@
 
 Formisch is a schema-based, headless form library for Vue. It manages form state and validation. It is type-safe, fast by default and its bundle size is small due to its modular design. Try it out in our [playground](https://stackblitz.com/edit/formisch-playground-vue)!
 
-Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik], and [SolidJS][formisch-solid]. Svelte will follow soon.
+Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik], [SolidJS][formisch-solid] and [Svelte][formisch-svelte].
 
 ## Highlights
 
@@ -72,4 +72,4 @@ This project is available free of charge and licensed under the [MIT license](ht
 [formisch-preact]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/preact
 [formisch-qwik]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/qwik
 [formisch-solid]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/solid
-[formisch-vue]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/vue
+[formisch-svelte]: https://github.com/fabian-hiller/formisch/tree/main/frameworks/svelte

package/dist/index.d.ts

@@ -289,8 +289,8 @@ declare function validate<TSchema extends Schema>(form: BaseFormStore<TSchema>,
 //#endregion
 //#region src/types/field.d.ts
 /**
-* Value type of the field element props.
-*/
+ * Value type of the field element props.
+ */
 interface FieldElementProps {
   readonly name: string;
   readonly autofocus: boolean;
@@ -300,8 +300,8 @@ interface FieldElementProps {
   readonly onBlur: (event: FocusEvent) => void;
 }
 /**
-* Value type of the field store.
-*/
+ * Value type of the field store.
+ */
 interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
   get input(): PartialValues<PathValue<v.InferInput<TSchema>, TFieldPath>>;
@@ -313,8 +313,8 @@ interface FieldStore<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly props: FieldElementProps;
 }
 /**
-* Value type of the field array store.
-*/
+ * Value type of the field array store.
+ */
 interface FieldArrayStore<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
   readonly items: string[];
@@ -344,7 +344,7 @@ interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends Require
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
 }
 declare const _default: <TSchema extends Schema, TFieldPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$2<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & Partial<{}>> & vue5.PublicProps;
+  props: __VLS_PrettifyLocal$2<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldProps<TSchema, TFieldPath> & {}> & vue5.PublicProps;
   expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
@@ -365,7 +365,7 @@ interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath exten
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
 }
 declare const _default$1: <TSchema extends Schema, TFieldArrayPath extends RequiredPath>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal$1<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & Partial<{}>> & vue5.PublicProps;
+  props: __VLS_PrettifyLocal$1<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FieldArrayProps<TSchema, TFieldArrayPath> & {}> & vue5.PublicProps;
   expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {
@@ -378,12 +378,12 @@ declare const _default$1: <TSchema extends Schema, TFieldArrayPath extends Requi
 type __VLS_PrettifyLocal$1<T> = { [K in keyof T as K]: T[K] } & {};
 //#endregion
 //#region src/components/Form/Form.vue.d.ts
-type FormProps<TSchema extends Schema = Schema> = {
+interface FormProps<TSchema extends Schema = Schema> {
   of: FormStore<TSchema>;
   onSubmit: SubmitHandler<TSchema>;
-};
+}
 declare const _default$2: <TSchema extends Schema = Schema>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FormProps<TSchema> & Partial<{}>> & vue5.PublicProps;
+  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & vue5.VNodeProps & vue5.AllowedComponentProps & vue5.ComponentCustomProps, never>, never> & FormProps<TSchema> & {}> & vue5.PublicProps;
   expose(exposed: vue5.ShallowUnwrapRef<{}>): void;
   attrs: any;
   slots: {

package/dist/index.js

@@ -41,7 +41,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				} else for (let index = 0; index < schema.items; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput && initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
 					path.pop();
 				}
 				const initialItems = internalFieldStore.children.map(createId);
@@ -59,7 +59,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
 				for (const key in schema.entries) {
 					internalFieldStore.children[key] = {};
 					path.push(key);
-					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput && initialInput[key], path);
+					initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput?.[key], path);
 					path.pop();
 				}
 			}
@@ -253,23 +253,24 @@ function setFieldBool(internalFieldStore, type, bool) {
 function setFieldInput(internalFieldStore, input) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
+			const arrayInput = input ?? [];
 			const items = untrack(() => internalFieldStore.items.value);
-			if (input.length < items.length) internalFieldStore.items.value = items.slice(0, input.length);
-			else if (input.length > items.length) {
-				if (input.length > internalFieldStore.children.length) {
+			if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
+			else if (arrayInput.length > items.length) {
+				if (arrayInput.length > internalFieldStore.children.length) {
 					const path = JSON.parse(internalFieldStore.name);
-					for (let index = internalFieldStore.children.length; index < input.length; index++) {
+					for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
 						internalFieldStore.children[index] = {};
 						path.push(index);
-						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
+						initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
 						path.pop();
 					}
 				}
-				internalFieldStore.items.value = [...items, ...input.slice(items.length).map(createId)];
+				internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createId)];
 			}
-			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], input[index]);
+			for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], arrayInput[index]);
 			internalFieldStore.isDirty.value = untrack(() => internalFieldStore.startItems.value).length !== items.length;
-		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
+		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input?.[key]);
 		else {
 			internalFieldStore.input.value = input;
 			internalFieldStore.isTouched.value = true;
@@ -281,17 +282,18 @@ function setFieldInput(internalFieldStore, input) {
 function setInitialFieldInput(internalFieldStore, initialInput) {
 	batch(() => {
 		if (internalFieldStore.kind === "array") {
-			if (initialInput.length > internalFieldStore.children.length) {
+			const initialArrayInput = initialInput ?? [];
+			if (initialArrayInput.length > internalFieldStore.children.length) {
 				const path = JSON.parse(internalFieldStore.name);
-				for (let index = internalFieldStore.children.length; index < initialInput.length; index++) {
+				for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
 					internalFieldStore.children[index] = {};
 					path.push(index);
-					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialInput[index], path);
+					initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
 					path.pop();
 				}
 			}
-			internalFieldStore.initialItems.value = initialInput.map(createId);
-			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialInput?.[index]);
+			internalFieldStore.initialItems.value = initialArrayInput.map(createId);
+			for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
 		} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
 		else internalFieldStore.initialInput.value = initialInput;
 	});
@@ -613,7 +615,7 @@ function useFieldArray(form, config) {
 //#endregion
 //#region src/composables/useForm/useForm.ts
 function useForm(config) {
-	const internalFormStore = createFormStore(config, async (input) => v.safeParseAsync(config.schema, input));
+	const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
 	onBeforeMount(async () => {
 		if (config.validate === "initial") await validateFormInput(internalFormStore);
 	});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/vue",
   "description": "The modular and type-safe form library for Vue",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -32,17 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsdown",
-    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
-    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
-    "format": "prettier --write ./src",
-    "format.check": "prettier --check ./src",
-    "vite": "vite"
-  },
   "devDependencies": {
-    "@formisch/core": "workspace:*",
-    "@formisch/methods": "workspace:*",
     "@types/node": "^24.1.0",
     "@vue/eslint-config-typescript": "^14.6.0",
     "eslint": "^9.32.0",
@@ -52,7 +42,9 @@
     "unplugin-vue": "^7.0.0",
     "valibot": "^1.1.0",
     "vue": "^3.5.18",
-    "vue-tsc": "^3.0.4"
+    "vue-tsc": "^3.0.4",
+    "@formisch/core": "0.3.1",
+    "@formisch/methods": "0.2.0"
   },
   "peerDependencies": {
     "typescript": ">=5",
@@ -63,5 +55,13 @@
     "typescript": {
       "optional": true
     }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
+    "lint.fix": "eslint \"src/**/*.ts*\" --fix",
+    "format": "prettier --write ./src",
+    "format.check": "prettier --check ./src",
+    "vite": "vite"
   }
-}
+}