Cnc-vue-dynform NPM

vue-form-generator

A schema-based form generator component for Vue.js.

##Acknowledgement

This project is based on fantastic work from Icebob. you can check out Original documentation on Icebob Gitbook

Features

reactive forms based on schemas
multiple object editing
21 field types
built-in validators
core & full bundles (11kb and 19kb gzipped)
UiKit friendly templates
customizable styles
can be extended easily with custom fields
...etc

Documentation

Dependencies

vue-form-generator uses fecha and lodash internally.

While built-in fields don't need external dependencies, optional fields may need other libraries such as UiKit. Original project was based on Bootstrap and for animation is was relaying on jQuery library. This project is favoring UiKit styles which can be replaced by providing custom styles as a schema parameters.

Installation

NPM

You can install it via NPM

Latest version for Vue 2.x

$ npm install cnc-vue-dynform

Legacy version for Vue 1.0.x

$ npm install vue-form-generator@0.6.1

Manual

Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.

https://github.com/icebob/vue-form-generator/archive/master.zip

Core vs Full version

VueFormGenerator come in two version : core and full. Core is a more minimal version with only half the fields. Full is core + other fields.

Full bundle: 75 kB (gzipped: 19 kB)
Core bundle: 39 kB (gzipped: 11 kB)

If you don't know what to choose, don't worry, the full is the default version.
If you want the slim down version, here is the changes:

// the "full" way
<script>
  import cncVueDynform from "cnc-vue-dynform";
  import "vue-form-generator/dist/vfg.css";  // optional full css additions
</script>

// the "core" way
<script>
  import cncVueDynform from "cnc-vue-dynform/dist/vfg-core.js";
  import "cnc-vue-dynform/dist/vfg-core.css";  // optional core css additions
</script>

Usage

<template>
  <div class="panel-body">
    <cnc-vue-dynform :schema="schema" :model="model" :options="formOptions"></cnc-vue-dynform>
  </div>
</template>

<script>
import cncVueDynform from "cnc-vue-dynform";

Vue.use(cncVueDynform);

export default {
  data: {
  
    model: {             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "john.doe@gmail.com",
      status: true
    },
  
    schema: {
      fields: [{
        type: "input",
        inputType: "text",
        label: "ID (disabled text field)",
        model: "id",
        readonly: true,         
        disabled: true
      },{
        type: "input",
        inputType: "text",
        label: "Name",
        model: "name",
        placeholder: "Your name",
        featured: true,
        required: true
      },{
        type: "input",
        inputType: "password",
        label: "Password",
        model: "password",
        min: 6,
        required: true,
        hint: "Minimum 6 characters",
        validator: VueFormGenerator.validators.string
      },{
        type: "select",
        label: "Skills",
        model: "skills",      
        values: ["Javascript", "VueJS", "CSS3", "HTML5"]
      },{
        type: "input",
        inputType: "email",
        label: "E-mail",
        model: "email",
        placeholder: "User's e-mail address"
      },{
        type: "checkbox",
        label: "Status",
        model: "status",
        default: true
      }]
    },

    formOptions: {
      validateAfterLoad: true,
      validateAfterChanged: true
    }
  }
}
</script>

Usage in local components

import cncVueDynform from "cnc-vue-dynform";

//component javascript
export default{
  components:{
    "cnc-vue-dynform": cncVueDynform.component
  }
}

Development

This command will start a webpack-dev-server with content of dev folder.

npm run dev

Build

This command will build a distributable version in the dist directory.

npm run build

Test

npm test

npm run ci

More fields new

VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :

vfg-field-myfield
vfg-field-calendar
vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !

Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.