@creatiwity/formbuilder v1.1.4

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.
• Ignore layouts for now as this is not ready yet
• Use your factories to construct your form 'elements'
• Validation is based on Vuelidate
• Errors can be customized

export interface FieldInputData extends CommonFieldData {
  key: string;
  label: string;
  type: string;
  disabled?: boolean;
}

function useInputField(data: FieldInputData): FormElementItem {
  return {
    key: data.key,
    props: <FieldInputData>() =>
      ({
        key: data.key,
        name: data.key,
        label: data.label,
        type: data.type,
        isReadOnly: data.isReadOnly,
        isHidden: data.isHidden,
        mandatory: data.mandatory,
      } as FieldInputData),
    component: FormInput as DefineComponent<{}, {}, any>,
    validation: data.validation,
  };
}

const MyForm = (): FormElement => ({
  layouts: [],
  elements: [
    useInputField({
      key: "name",
      label: "Nom",
      type: "text",
      isReadOnly: (data) => data === "test",
      validation: () => {
        return { required, minLength: minLength(3) };
      },
    }),
  ],
});

const myForm: MyFormType = ref({
  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