@creatiwity/formbuilder

Creat formbuilder

: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

# 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

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