Form-schema-gt NPM

form-schema

Install:

yarn add form-schema-gt

npm install form-schema-gt

Usage:

1.a - Import globally

main.js

import FormSchema from 'form-schema-gt/dist/FormSchemaGt.common';
Vue.component('form-schema', FormSchema);

1.b - Import locally

yourPage.vue

import FormSchema from 'form-schema-gt/dist/FormSchemaGt.common';
...
export default {
  components: {
    FormSchema
  },
...

2 - Use in your page

yourPage.vue

...
<form-schema :schema="schema"></form-schema>
...

3 - Schema example

schema: {
    type: 'object',
    title: 'Cadastro de usuários',
    layout: 'grid',
    grid: [
        {
            spacing: 20,
            children: [
                {
                    size: 12,
                    field: {
                        name: 'nome',
                        label: 'Nome',
                        type: 'text',
                        placeholder: 'Your Full Name',
                        required: true
                    }
                },
            ]
        }
    ]
}

Requirements

It's required to import the following lines in your main.js

// ELEMENT - REQUIRED
import { Select } from 'element-ui'; // import all components you should use from [Element](https://element.eleme.io/#/en-US/component/quickstart)
Vue.use(Select); // Register this component
import 'element-ui/lib/theme-chalk/index.css'; // Element css (you can override this, just see the documentation of Element)

// VEE-VALIDATE - REQUIRED
import { ValidationProvider, ValidationObserver } from 'vee-validate';
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

// FONTAWESOME - REQUIRED
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons'; // This is required in the moment
library.add(faPlus); // This is required in the moment
Vue.component('font-awesome-icon', FontAwesomeIcon);

// VUE-TRUMBOWYG (Text editor, not necessary if you dont use this component) - OPTIONAL
import VueTrumbowyg from 'vue-trumbowyg';
import 'trumbowyg/dist/ui/trumbowyg.css';
Vue.component(VueTrumbowyg);

General properties

{
     type: 'object', /** the type of the schema. STRING **/
     
     title: 'Users', /** the title of the forms (used in Grid). STRING **/
     
     layout 'Grid', /** the layout of forms, options: 'Grid' and 'panelGrid' STRING **/
     
     /* Property below, used only if type is 'Grid' */
     grid / panel: [ /** array of objects, containing all rows/panels. ARRAY **/
        {
            title: 'First panel', /** IF IS A PANEL, set the title of the panel. STRING **/
            shadow: 'always', /** IF IS A PANEL, set the hover of card, options: 'always', 'hover', 'never', STRING **/
            spacing: 20, /** the gutter between inputs. NUMBER **/
            children: [  /** array of inputs. ARRAY **/
                {
                    size: 12, /** the number of cols occupied by the input, maximum is 24. NUMBER **/
                    field: { /** See the sections below **/},
                },
            ],
        },
    ], 
}

Input (text, inputList) properties

This section describes the properties of the prop field, the general properties, you can see above.

{
    ...
    field: { /** the field object. OBJECT **/
        name: 'address', /** the name of the input, this will be the name of the input in the generated object. STRING **/,
        label: 'Address', /** the label of input **/
        type: 'text', /** the type of input, options: 'upload', 'text', 'editor', 'date', 'number', 'radio', 'select', 'option', 'checkbox', 'textarea', 'radioGroup', 'checkboxGroup', 'switch', 'rate', 'timepicker', 'inputList', 'slider'. STRING **/
        required: true, /** if the input is required. BOOLEAN **/
        placeholder: 'Type your address', /** the common placeholder **/
        mask: '###-###,##/##/####', /** the mask of the input, to see more, visit the [https://github.com/vuejs-tips/vue-the-mask]. Here you can pass more than one mask, comma separated. STRING **/
        change: function () {}, /** a functions that deals with changes on the input, this method have access to the global model, with values of all inputs. FUNCTION **/
        change: function () {}, /** a functions that deals with the visibility on the input, this method have access to the global model, with values of all inputs, with this you can set the visibilty based on another input value. FUNCTION **/
        
        /* inputList specific properties */
        renderTable: true, /** if the component will render a table, below the inputs. BOOLEAN **/
        name: 'bank', /** the name here, is the name of the property, that will contain all input values, of the property input below. Example: { ..., bank: [{ account: '11111', person: 'Gandalf' }], ... }. STRING **/
        inputs: [ /** the array on inputs, that will be part of the list and can be added to it. ARRAY **/
            {
                /* the same as the field property **/
                name: 'account',
            },
            {
                /* the same as the field property **/
                name: 'person',
            }
        ],
        objectModel: { /** the object model, of the inputs that are inside the property inputs, must be the same name **/
            account: null,
            person: null
        },
        showSearchedProperty: true, /** shows a field, with a searched property [WIP] **/
        buttonInput: { /** IF INPUTS.LENGTH == 1, the button append to that input. OBJECT **/
            icon: 'search', 
            text: 'Search'
        }
        actionButton: { /** IF INPUTS.LENGTH > 1, the action button, to the inputs, it added the row to the list. OBJECT **/
            icon: 'plus', 
            text: 'Added'
        }
    }
    ...
}

Schema examples

There are several ways to use this library, there are 3 major types:

1 - Single row:

{
  type: 'object',
  title: 'Cadastro de usuários',
  layout: 'field',
  field: {
    nome: {
      label: 'Nome',
      type: 'text',
      placeholder: 'Your Full Name',
      required: true,
      remoteUrl: 'https://pokeapi.co/api/v2/pokemon/ditto/',
      dependencyName: 'idade',
      optionId: 'slot',
      optionLabel: 'slot',
    },
  },
};

2 - Grid:

{
  type: 'object',
  title: 'Cadastro de usuários',
  layout: 'grid',
  grid: [
    {
      spacing: 20,
      children: [
        {
          size: 12,
          field: {
            name: 'nome',
            label: 'Nome',
            type: 'text',
            placeholder: 'Your Full Name',
            mask: '###.###.###-##,##.###.###/####-##',
            required: true,
          },
        },
        {
          size: 12,
          field: {
            name: 'email',
            label: 'Email',
            type: 'text',
            placeholder: 'Your Full Name',
            required: false,
          },
        },
      ],
    },
    {
      spacing: 20,
      children: [
        {
          size: 6,
          field: {
            name: 'datanascimento',
            label: 'Data Nascimeno',
            type: 'date',
            placeholder: 'Your Full Name',
            required: true,
          },
        },
        {
          size: 18,
          field: {
            name: 'radioteste',
            label: 'Radio test',
            type: 'radioGroup',
            placeholder: 'radio teste',
            required: true,
            radioList: [{ label: 'label 1' }, { label: 'label 2' }],
          },
        },
      ],
    },
  ],
};

3 - Panels (cards):

{
  type: 'object',
  title: 'Cadastro de usuários',
  layout: 'panelGrid',
  panels: [
    {
      title: 'First panel',
      shadow: 'always',
      rows: [
        {
          spacing: 24,
          children: [
            {
              size: 12,
              field: {
                name: 'nome',
                label: 'Nome',
                type: 'text',
                placeholder: 'Your Full Name',
                mask: '###.###.###-##,##.###.###/####-##',
                required: true,
                change: function () {},
                visible: function (model) {
                  if(model.email) {
                    return true
                  }
                  return false
                },
              },
            },
            {
              size: 12,
              field: {
                renderTable: true,
                name: 'dadosBancarios',
                type: 'inputList',
                inputs: [
                  {
                    name: 'nome',
                    label: 'Nome',
                    type: 'text',
                    placeholder: 'Your Full Name',
                    mask: '###.###.###-##,##.###.###/####-##',
                    required: true,
                  },
                ],
                showSearchedProperty: true,
                objectModel: {
                  nome: null,
                },
                required: true,
                visible: true,
                buttonInput: {
                  icon: 'search',
                  text: 'Pesquisar',
                },
                actionButton: {
                  icon: 'plus',
                  text: 'Adicionar',
                },
              },
            },
          ],
        },
      ],
    },
    {
      title: 'Second panel',
      rows: [
        {
          spacing: 20,
          children: [
            {
              size: 12,
              field: {
                name: 'estado',
                label: 'Estado',
                type: 'select',
                placeholder: 'Your Full Name',
                required: true,
                populateSelect: async function () {
                  return await axios.get(
                    'https://pokeapi.co/api/v2/pokemon/ditto/'
                  );
                },
                dependencyName: 'idade',
                optionId: 'slot',
                optionLabel: 'slot',
              },
            },
            {
              size: 12,
              field: {
                name: 'estado2',
                label: 'Estado2',
                type: 'select',
                placeholder: 'Your Full Name',
                required: true,
                populateSelect: async function () {
                  if (this.data.estado) {
                    return await axios.get(
                      'https://pokeapi.co/api/v2/pokemon/ditto/'
                    );
                  }
                },
                pathToArray: 'data.abilities',
                optionId: 'slot',
                optionLabel: 'slot',
              },
            },
          ],
        },
      ],
    },
  ],
};