@creatiwity/formbuilder
v1.5.1
Published
Creat FormBuilder
Downloads
272
Readme
Creat formbuilder
:warning: This package is under development stay tuned. :warning:
Nuxt3 Typescript Simple formbuilder
Features
Quick Setup
- Add
@creatiwity/formbuilder
dependency to your project
# Using pnpm
pnpm add @creatiwity/formbuilder
# Using yarn
yarn add @creatiwity/formbuilder
# Using npm
npm install @creatiwity/formbuilder
- Add
@creatiwity/formbuilder
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: ["@creatiwity/formbuilder"],
});
That's it! You can now use Creat formbuilder in your Nuxt app ✨
Recommended Usage
- First define one or multiple factories in which you'll specify a component of your own to be instantiate in the formbuilder.
- Use your factories to construct your form 'elements'
- Validation is based on Vuelidate
- Errors can be customized
export interface FieldInputProps {
key: string;
name: string;
type: string;
state?: "error" | "disabled";
}
export function useInputField(
data: FieldInputProps,
options: FormOptions<FormModel>
): FormElementItem<FormModel> {
return {
key: data.key,
props: (): FieldInputProps => ({
key: data.key,
name: data.name,
type: data.type,
}),
component: FormInput,
validation: options.validation,
isReadOnly: options.isReadOnly,
isHidden: options.isHidden,
mandatory: options.mandatory ?? false,
};
}
const MyForm = (): FormElement<FormModel> => ({
sets: [
{
title: "First Section",
description: "Section description",
elements: [
useInputField(
{
key: "name",
name: "Nom",
type: "text",
},
{
validation: () => {
return { required, minLength: minLength(3) };
},
isReadOnly: (data) => data.name === "test",
}
),
],
},
],
});
const myForm = ref<FormModel>({
name: "aaaa",
});
const myFormElement = MyForm();
const errors: FormElementError = {
name: {
required: "Le nom est requis",
},
};
<div>
<CreatFormBuilder
id="myForm"
v-model="myForm"
:form-element="myFormElement"
:errors="errors"
/>
</div>
Options
| props | type | optional | usage | | ------------- | ---------------- | -------- | ------------------ | | form-elements | FormElement | no | Your form schema | | errors | FormElementError | yes | Your custom errors |