form-schema-gt4w v1.1.1

form-schema

Install:

yarn add form-schema-gt

or

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);