Creat 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

- ✨  Release Notes

Features

Quick Setup

1. Add @creatiwity/formbuilder dependency to your project

``bash


Using pnpm

pnpm add @creatiwity/formbuilder

Using yarn

yarn add @creatiwity/formbuilder

Using npm

npm install @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



``

Options

| 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