SmartSchema-Vue

SmartSchema-Vue is a VueJS package to help generate forms

Installation

Use the package manager npm or yarn to install smart schema.

npm i @appoly/smartschema-vue --save

yarn add @appoly/smartschema-vue

Usage

import '@appoly/smartschema-vue';

<smart-schema :schema="smartschema" action="/test" method="post" validateOnBlur="false"></smart-schema>

For Laravel projects take a look at our composer package https://github.com/appoly/smart-schema-2

var schema = smartschema: {
    items: [
        {
            items: [
                {
                    name: 'first_name',
                    type: 'text',
                    label: 'First Name',
                    placeholder: 'First name',
                    validationRules: 'required|min:5'
                },
                {
                    name: 'last_name',
                    type: 'text',
                    label: 'Last Name',
                    placeholder: 'What is your last name?',
                    validationRules: 'required|min:5|max:6'
                }
            ]
        },
        {
            type: 'textarea',
            name: 'address',
            label: 'Address',
            placeholder: 'What is your address?'
        }
    ]
}

Inputs

• Text
• Number
• Date
• Textarea
• Email
• File
• Hidden
• Url
• Select

All inputs have the following properties

• name
• label
• placeholder
• validationRules
• value

Select allows the Option property, which can be a Key Value Object or just an Array

Validation

Currently only validation strings are accepted ie. required|min:5|max:20

• required - True or False
• min:{length} - The minimum length the form input can be
• max:{length} - The maximum length the form input can be