Quick start

WARNING

Make sure you already have a Vue project set up before starting this quick start.

Install dependencies

npm

npm install @duplojs/form@0 @duplojs/utils@1

yarn

yarn add @duplojs/form@0 @duplojs/utils@1

pnpm

pnpm add @duplojs/form@0 @duplojs/utils@1

Initialize with the default Grid templates

import "@duplojs/form/vueGrid.css";
import "@duplojs/form/vueDesignSystem.css";

import { createForm } from "@duplojs/form/vue";
import {
	templateFormAddButton,
	templateFormRemoveButton,
	templateFormResetButton,
	templateFormNextButton,
	templateFormPreviousButton,
	templateFormSelect,
} from "@duplojs/form/vueDesignSystem";
import { createGridTemplates } from "@duplojs/form/vueGrid";

export const templatesGrid = createGridTemplates({
	repeat: {
		addLabel: "Add another item",
		removeLabel: "Remove this item",
		addButton: templateFormAddButton,
		removeButton: templateFormRemoveButton,
		resetButton: templateFormResetButton,
	},
	step: {
		nextLabel: "Continue",
		previousLabel: "Back",
		resetButton: templateFormResetButton,
		nextButton: templateFormNextButton,
		previousButton: templateFormPreviousButton,
	},
	union: { selectInputKind: templateFormSelect },
});

export const useForm = createForm(templatesGrid.useTemplates());

INFO

Everything coming from @duplojs/form/vueGrid and @duplojs/form/vueDesignSystem is only a default implementation. Everything can be replaced or overridden. This lets you configure a working form environment quickly.

Do not forget to import @duplojs/form/vueGrid.css and @duplojs/form/vueDesignSystem.css if you use them.

Create an input

ts

import { createInput } from "@duplojs/form/vue";
import FirstInput from "./FirstInput.vue";

export const useMyTextInput = createInput(
	FirstInput,
	{ defaultValue: "" },
);

vue

<script setup lang="ts">
const model = defineModel({ required: true });
</script>

<template>
	<input
		type="text"
		v-model="model"
	/>
</template>

Declare a form

ts

import * as DP from "@duplojs/utils/dataParser";
import { useMultiLayout } from "@duplojs/form/vue";
import { useForm } from "./init";
import { useMyTextInput } from "./firstInput";
import { useNumberInput } from "@duplojs/form/vueDesignSystem";

export function useFirstForm() {
	const { component, check, reset, currentValue } = useForm(
		useMultiLayout({
			name: useMyTextInput({
				label: "superLabel",
			}),
			age: useNumberInput({
				label: "Age",
				dataParser: DP.number()
					.addChecker(
						DP.checkerNumberMin(
							18,
							{ errorMessage: "Too young !" },
						),
					),
			}),
		}),
	);

	return {
		TheForm: component,
		checkForm: check,
		currentFormValue: currentValue,
		resetForm: reset,
	};
}

Implement the form

vue

<script setup lang="ts">
import * as EE from "@duplojs/utils/either";
import { PrimaryButton } from "@duplojs/form/vueDesignSystem";
import { useFirstForm } from "./firstForm";

const {
	TheForm,
	checkForm,
} = useFirstForm();

function onSubmit() {
	void EE.whenIsRight(
		checkForm(),
		(result) => {
			alert(JSON.stringify(result));
		},
	);
}
</script>

<template>
	<TheForm @submit="onSubmit">
		<PrimaryButton
			type="submit"
			label="submit"
		/>
	</TheForm>
</template>

Result

superLabel

Age