@modelforms/fontawesome-vuetify

@modelforms/fontawesome-vuetify

#Install

pnpm add @modelforms/fontawesome-vuetify

#Quick start

1. Create GridModel and DataModel

import { GridModel } from '@modelforms/fontawesome-vuetify';

class UserModel {
    name: string;
    phone: any[] = []
}

export const testForm: GridModel<UserModel> = {
  model: new UserModel(),
  rows: [
  {
    colSize: 12,
    cols: [
      {
        name: "name",
        type: "text",
        rules: {
          rules: [(v) => v?.length <= 3 || "Not longer than 3!"]
        },
        label: "Name",
        size: 12,
      }
    ]
  },
  {
    colSize: 12,
    cols: [
      {
        name: "Description",
        type: "area",
        label: "Description",
        size: 6,
      },
      {
        name: "phone",
        type: "complete",
        label: "Phone",
        size: 6,
        complete: {
            items : [],
            itemValue: [],
            title: "title"
        }
      }
    ]
  }]
}

2. Import FormPlate

<template>
    <FormPlate 
        :form="form" 
        @submit="submit($event)"/>

</template>

<script lang="ts">
    import { FormPlate } from '@modelforms/fontawesome-vuetify';

    export default {

        components: {
            FormPlate: FormPlate
        },
        data() {
            return {
                form: testForm
            }
        },
        methods:{
            submit(event){
                console.log(event);
            }
        }
    }
</script>

#Documentation

The basic control types are text, number, date, complete, area, file and password.

The FormPlate component is designed with a built-in GridModelHandler that manages GridModel data steps, populates GridModel data, clears values on data changes and populates complete control items.

Grid model value fields have a rules with corresponding client validation messages.

The main event is submit with data model as argument.

Licence

MIT