FormGenerator

FormGenerator is a versatile Vue 3 component that dynamically generates complex, responsive forms based on a configuration object. Create sophisticated forms without writing tedious markup.

Features

• Responsive Grid System: Built-in 12-column grid system with configurable breakpoints
• Multiple Input Types: Supports text, email, password, textarea, select, checkbox, and radio inputs
• Validation: Built-in validation for required fields, email format, and password confirmation
• Custom Styling: Configurable button colors and styling options
• Form Actions: Configurable submit and auxiliary buttons
• Exposed Methods: Validate, get/set data, and reset the form programmatically

Installation

npm i jdynamicform# 

Basic Usage

<template>
  <FormGenerator
    ref="formRef"
    :config="formConfig"
    @submit="handleSubmit"
    @action="handleAction"
    @validate="handleValidate"
  />
</template>

<script setup>
import { reactive, ref } from 'vue';
import FormGenerator from 'jdynamicform';

const formRef = ref(null);
const formConfig = reactive({
  rows: [
    {
      cols: [
        {
          name: "email",
          type: "email",
          label: "Email",
          placeholder: "Enter your email",
          rules: ["required", "isValidEmail"],
          md: 6
        },
        {
          name: "name",
          type: "text",
          label: "Full Name",
          placeholder: "Enter your full name",
          rules: ["required"],
          md: 6
        }
      ]
    },
    // More rows...
  ],
  actions: {
    cols: [
      {
        type: "button",
        buttonType: "submit",
        label: "Submit",
        emitName: "submit-form",
        validateOnClick: true,
        color: "#1a73e8",
        size: 6,
        offset: 3
      }
    ]
  }
});

const handleSubmit = (formData) => {
  console.log('Form submitted:', formData);
};

const handleAction = (event) => {
  console.log('Action triggered:', event.name, event.data);
};

const handleValidate = (isValid) => {
  console.log('Form validation result:', isValid);
};
</script>

Configuration Structure

The form configuration is based on a rows and columns structure:

{
  rows: [
    {
      cols: [
        {
          name: "fieldName",
          type: "text", // text, email, password, confirm_pass, textarea, select, checkbox, radio
          label: "Field Label",
          // Other field properties...
        }
      ]
    }
  ],
  actions: {
    cols: [
      {
        type: "button",
        buttonType: "submit",
        label: "Submit",
        // Other button properties...
      }
    ]
  }
}

Component Methods

Access these methods using a ref to the FormGenerator:

// Validate the form
const isValid = formRef.value.validate();

// Get form data
const formData = formRef.value.getData();

// Set form data
formRef.value.setData({
  email: '[email protected]',
  name: 'John Doe'
});

// Reset the form
formRef.value.reset();

Grid System

The component includes a responsive grid system with breakpoints:

• Default: Base layout
• Small (sm): ≥576px
• Medium (md): ≥768px
• Large (lg): ≥992px
• Extra Large (xl): ≥1200px

For More Documentation

For complete documentation, advanced usage examples, and API reference, visit https://quanduck/projects/jdyanmicform