Creat FormBuilder
npm install @creatiwity/formbuilder[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
:warning: This package is under development stay tuned. :warning:
Nuxt3 Typescript Simple formbuilder
1. Add @creatiwity/formbuilder dependency to your project
``bashUsing pnpm
pnpm add @creatiwity/formbuilder
2. Add
@creatiwity/formbuilder to the modules section of nuxt.config.ts`js
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
`ts
export interface FieldInputProps {
key: string;
name: string;
type: string;
state?: "error" | "disabled";
}export function useInputField(
data: FieldInputProps,
options: FormOptions
): FormElementItem {
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 => ({
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({
name: "aaaa",
});
const myFormElement = MyForm();
const errors: FormElementError = {
name: {
required: "Le nom est requis",
},
};
``html
id="myForm"
v-model="myForm"
:form-element="myFormElement"
:errors="errors"
/>
``| props | type | optional | usage |
| ------------- | ---------------- | -------- | ------------------ |
| form-elements | FormElement | no | Your form schema |
| errors | FormElementError | yes | Your custom errors |
[npm-version-src]: https://img.shields.io/npm/v/@creatiwity/formbuilder/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@creatiwity/formbuilder
[npm-downloads-src]: https://img.shields.io/npm/dm/@creatiwity/formbuilder.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@creatiwity/formbuilder
[license-src]: https://img.shields.io/npm/l/@creatiwity/formbuilder.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@creatiwity/formbuilder
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com