WorkInProgress

Vuetify FormJSON

Demos:

• Example: Showcase
• Example: 2 way binding
• Example: FormSchema builder
• Example: Full features
• Example: Datatable remote # comming soon

Features

• Create forms from a json schema
• Grab the output as an object in your parent component (v-model)
• Nested, grouped inputs
• Lots of components and inputs

Dependencies

• Vue
• Vuetify
• jsoneditor if you use the 'json input'
• axios if you use the 'datatable input'
• vuetify-image-input if you use the 'image upload input'
• tree-model if you use 'treeview input'

Installation

• npm i @peynman/vuetify-formjson

Usage

Template:

// wrap component inside vuetify v-app (this is a vuetify requirement)
<v-app>
    // ...
    // somewhere inside your components
    <vuetify-formjson
        v-model="output"
        :options="options"
        :fields="fields"
    >
    </vuetify-formjson>
</v-app>

Script: component usage

import Vue from 'vue'
import VuetifyFormJSON from '@peynman/vuetify-formjson'

Vue.use(VuetifyFormJSON)

export default {
    data: () =>({
        output: {},
        options: {
            // options to pass to form, see Api
            class: 'ma-2'
        },
        fields: {
            // list of [fields objects] to render on the form
            //      see Api
            username: {
                type: 'input',
                input: 'text',
                label: 'Username',
            },
            password: {
                type: 'input',
                input: 'text',
                label: 'Password',
                props: {
                    // pass props directly to v-text-field tag
                    type: 'password',
                    hint: '8 characters min'
                }
            }
        }
    })
}

Script: vuetify setup

// YOU SHOULD DO THIS IF YOU ARE USING NPM VERSION OF VUETIFY, BROWSER VERSION DOES NOT NEED THIS
// since Vuetify only includes components that are used in the project directly in the npm build,
//   and components used in FormJSON are rendererd dynamically using their name, we need to pass vuetify setup the list of components that
//   we wish to be able to use in FormJSON
//   here is a complete list of all components used in FormJSON
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css'

import {
    VRow,
    VCol,
    VTextField,
    VSwitch,
    VSelect,
    VSlider,
    VRadioGroup,
    VRadio,
    VCheckbox,
    VTooltip,
    VIcon,
    VBtn,
    VDivider,
    VTabs,
    VTab,
    VTabItem,
    VExpansionPanels,
    VExpansionPanel,
    VExpansionPanelHeader,
    VExpansionPanelContent,
    VSimpleCheckbox,
    VDataTable,
    VToolbar,
    VSpacer,
    VAlert,
    VDialog,
    VCard,
    VCardTitle,
    VCardText,
    VCardActions,
    VContainer,
    VMenu,
    VColorPicker,
    VAutocomplete
} from 'vuetify/lib'

Vue.use(Vuetify, {
    components: {
        VRow,
        VCol,
        VTextField,
        VSwitch,
        VSelect,
        VSlider,
        VRadioGroup,
        VRadio,
        VCheckbox,
        VTooltip,
        VIcon,
        VBtn,
        VDivider,
        VTabs,
        VTab,
        VTabItem,
        VExpansionPanels,
        VExpansionPanel,
        VExpansionPanelHeader,
        VExpansionPanelContent,
        VMenu,
        VColorPicker,
        VAutocomplete,
        VDataTable,
        VToolbar,
        VSpacer,
        VAlert,
        VDialog,
        VCard,
        VCardTitle,
        VCardText,
        VCardActions,
        VContainer,
        VSimpleCheckbox
    }
});

export default new Vuetify({
    /// vuetify options like theme...
});

API

Components VuetifyFormJSON

• Display a form and grab the output with a json schema, the schema is defined based on the predefined structure of an input fields, and passed to this component by fields props.
• name: 'vuetify-formjson`
• props:
  1. v-model: the output object of the form, can also be used to set initial values in form inputs
  2. fields: an object ({key: value}) to descript the fields in the form.
     1. Each key corresponds to a definition of an input. the key is then used in output (v-model) to represent the value
     2. Each value object requires to have a type, you can set other properties of the input based on its type, currently these types are available: row, col, input, group, component
  3. options: some options to control vuetify-formjson and its components behaviour

Here is a list of all availabel components to render (inputs, groups or custom components): | Component | Type | Sample Object | | ---: | :---: | :--- | | Text field | input | { type: 'input', input: 'text', label: 'Label', class: 'extra classes', props: { ...pass to v-text-field }}| | Color | input | { type: 'input', input: 'color', label: 'Label', class: 'extra classes', props: { ...pass to v-text-field }, pickerProps: { ...pass to v-color-picker } } | | Select | input |{ type: 'input', input: 'select', label: 'Label', class: 'extra classes', objects: [ { id: 1, title: 'Option 1' }, { id: 2, title: 'Option 2' } ] props: { ...pass to v-select } } |

TODO: add all components

Developers

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build:prod

Lints and fixes files

npm run lint