vue-form-generator example

https://github.com/icebob/vue-form-generator

by WILLIAM CORREA

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<script src="https://rawgit.com/icebob/vue-form-generator/master/dist/vue-form-generator.js"></script>
<link rel="stylesheet" href="https://rawgit.com/icebob/vue-form-generator/master/dist/vue-form-generator.css">
<h1 class="text-center">Demo of vue-form-generator</h1>
  <div class="container" id="app">

    <div class="panel panel-default">
      <div class="panel-heading">
      Form     
      <button v-on:click="add">Add</button>
      {{ items }}
      </div>
      <div class="panel-body">
        <div v-for="item in items">
        {{ item }}
        <vue-form-generator :schema="schema", :model="model", :options="formOptions"></vue-form-generator>
        
        </div>
        
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">Model</div>
      <div class="panel-body">
        <pre v-if="model">{{{ model | prettyJSON }}}</pre>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">Schema</div>
      <div class="panel-body">
        <pre v-if="model">{{{ schema | prettyJSON }}}</pre>
      </div>
    </div>
  </div>

CSS

html {
	font-family: Tahoma;
	font-size: 14px;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
}

pre {
	overflow: auto;
}
	pre .string { color: #885800; }
	pre .number { color: blue; }
	pre .boolean { color: magenta; }
	pre .null { color: red; }
	pre .key { color: green; }    

h1 {
	text-align: center;
	font-size: 36px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 500;
}

fieldset {
	border: 0;
}

.panel {
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	border-color: #ddd;
}

.panel-heading {
	color: #333;
	background-color: #f5f5f5;
	border-color: #ddd;

	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;        
}

.panel-body {
	padding: 15px;
}

[is="field-checklist"] {
    min-width: 120px;
}

JavaScript

var vm = new Vue({
    el: "#app",
    components: {
        "vue-form-generator": VueFormGenerator.component
    },
  methods: {
    add: function () {
      this.items.push(this.items.length + 1);
    }
  },
		
    data: {
    		items: [
          '1'
        ],
        model: {
            id: 1,
            name: "John Doe",
            password: "J0hnD03!x4",
            skills: ["Javascript", "VueJS"],
            email: "[email protected]",
            status: true
        },
        schema: {
            fields: [{
                type: "text",
                label: "ID",
                model: "id",
                readonly: true,
                featured: false,
                disabled: true
            }, {
                type: "text",
                label: "Name",
                model: "name",
                readonly: false,
                featured: true,
                required: true,
                disabled: false,
                placeholder: "User's name",
                validator: VueFormGenerator.validators.string
            }, {
                type: "password",
                label: "Password",
                model: "password",
                min: 6,
                required: true,
                hint: "Minimum 6 characters",
                validator: VueFormGenerator.validators.string
            }, {
                type: "email",
                label: "E-mail",
                model: "email",
                placeholder: "User's e-mail address",
                validator: VueFormGenerator.validators.email
            }, {
                type: "checklist",
                label: "Skills",
                model: "skills",
                multi: true,
                required: true,
                multiSelect: true,
                values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
            }, {
                type: "checklist",
                label: "Formats",
               ...