1.5.1 • Published 10 months ago
@creatiwity/formbuilder v1.5.1
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 |
1.5.1
10 months ago
1.5.0
10 months ago
1.3.3
11 months ago
1.4.0
11 months ago
1.3.2
12 months ago
1.3.1
12 months ago
1.3.0
12 months ago
1.2.0
12 months ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.11
1 year ago
1.1.10
1 year ago
1.1.1
2 years ago
1.0.19
2 years ago
1.1.0
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago