createGridTemplates(...)

createGridTemplates(...) builds a consistent set of grid template factories.

Signature

ts

createGridTemplates(params)

Parameters

The params object can contain:

• form?
• input?
• multi?
• check?
• section?
• repeat
• step
• union

The repeat, step, and union keys are required because their grid templates depend on concrete components such as buttons and the kind selector.

Example

ts

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

export const templatesGrid = createGridTemplates({
	form: {
		maxColumns: 12,
		gap: 12,
	},
	input: {
		columns: 6,
	},
	multi: {
		columns: 12,
		maxColumns: 12,
		gap: 12,
	},
	check: {
		columns: 12,
		maxColumns: 12,
		gap: 12,
		hideEmptyMessageError: true,
	},
	section: {
		columns: 12,
		maxColumns: 12,
		gap: 12,
	},
	repeat: {
		addLabel: "Add item",
		removeLabel: "Remove item",
		resetLabel: "Reset item",
		addButton: templateFormAddButton,
		removeButton: templateFormRemoveButton,
		resetButton: templateFormResetButton,
	},
	step: {
		nextLabel: "Continue",
		previousLabel: "Back",
		resetLabel: "Reset step",
		nextButton: templateFormNextButton,
		previousButton: templateFormPreviousButton,
		resetButton: templateFormResetButton,
	},
	union: {
		selectInputKind: templateFormSelect,
		labels: {
			email: "Email",
			phone: "Phone",
		},
	},
});

Returned value

The function returns:

• useFormTemplate
• useInputTemplate
• useMultiTemplate
• useCheckTemplate
• useRepeatTemplate
• useUnionTemplate
• useStepByStepTemplate
• useSectionTemplate
• useTemplates()

useTemplates() directly returns a Templates object compatible with createForm(...).

Use cases

• quickly initialize a form environment;
• define a shared grid across the application;
• override one or several templates while keeping the others by default.