1.5.1 • Published 10 months ago

@creatiwity/formbuilder v1.5.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Creat formbuilder

npm version npm downloads License Nuxt

:warning: This package is under development stay tuned. :warning:

Nuxt3 Typescript Simple formbuilder

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
  1. 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

propstypeoptionalusage
form-elementsFormElementnoYour form schema
errorsFormElementErroryesYour 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