import code from https://github.com/demsking/vue-json-schema

Author: yourtion

build/webpack.base.conf.js

@@ -24,7 +24,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
+      '@': resolve('example'),
     }
   },
   module: {

example/App.vue

@@ -1,17 +1,17 @@
+
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <HelloWorld/>
+    <Subscription/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
+import Subscription from './components/Subscription'
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    Subscription
   }
 }
 </script>
@@ -25,4 +25,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-</style>
+</style>

example/components/HelloWorld.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-card class="form">
+    <json-editor ref="JsonEditor" :schema="schema" v-model="model">
+      <el-button type="primary" @click="submit">Subscribe</el-button>
+      <el-button type="reset">Reset</el-button>
+    </json-editor>
+  </el-card>
+</template>
+
+<script>
+  import JsonEditor from '../../src/JsonEditor'
+  import { Option } from 'element-ui'
+  JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
+    // vm is the JsonEditor VM
+    const labelWidth = '120px'
+    const model = vm.data
+    const rules = {}
+    vm.fields.forEach((field) => {
+      const type = field.schemaType === 'array' && field.type === 'radio'
+        ? 'string'
+        : field.schemaType
+      const required = field.required
+      const message = field.title
+      const trigger = ['radio', 'checkbox', 'select'].includes(field.type)
+        ? 'change' : 'blur'
+      // http://element.eleme.io/#/en-US/component/form#validation
+      rules[field.name] = { type, required, message, trigger }
+    })
+    // returning the form props
+    return { labelWidth, rules, model }
+  })
+  // http://element.eleme.io/#/en-US/component/form#validation
+  JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
+    prop: field.name
+  }))
+  JsonEditor.setComponent('email', 'el-input')
+  JsonEditor.setComponent('text', 'el-input')
+  JsonEditor.setComponent('textarea', 'el-input')
+  JsonEditor.setComponent('checkbox', 'el-checkbox')
+  JsonEditor.setComponent('switch', 'el-switch')
+  JsonEditor.setComponent('radio', 'el-radio')
+  JsonEditor.setComponent('select', 'el-select')
+  // You can also use the component object
+  JsonEditor.setComponent('option', Option)
+  // By default `<h1/>` is used to render the form title.
+  // To override this, use the `title` type:
+  JsonEditor.setComponent('title', 'h2')
+  // By default `<p/>` is used to render the form title.
+  // To override this, use the `description` type:
+  JsonEditor.setComponent('description', 'small')
+  // By default `<div/>` is used to render the message error.
+  // To override this, use the `error` type:
+  JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
+    type: 'error',
+    title: vm.error
+  }))
+  export default {
+    data: () => ({
+      schema: require('@/schema/newsletter'),
+      model: {}
+    }),
+    methods: {
+      submit (e) {
+        // this.$refs.JsonEditor.form() returns the ElementUI's form instance
+        this.$refs.JsonEditor.form().validate((valid) => {
+          if (valid) {
+            // this.model contains the valid data according your JSON Schema.
+            // You can submit your model to the server here
+            console.log(JSON.stringify(this.model))
+            this.$refs.JsonEditor.clearErrorMessage()
+          } else {
+            this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields')
+            return false
+          }
+        })
+      }
+    },
+    components: { JsonEditor }
+  }
+</script>
+
+<style>
+  .form {
+    text-align: left;
+    width: 600px;
+    margin: auto;
+  }
+  h2 {
+    font-size: 1.7em;
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: .2em
+  }
+  h2 + small {
+    display: block;
+    text-align: center;
+    margin-bottom: 1.2em
+  }
+  small {
+    line-height: 20px;
+    display: block;
+  }
+  .el-alert {
+    margin-bottom: 15px
+  }
+</style>

example/components/Subscription.vue

@@ -3,6 +3,12 @@
 import Vue from 'vue'
 import App from './App'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

example/main.js

@@ -0,0 +1,58 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "type": "object",
+  "title": "Newsletter Subscription",
+  "description": "Sign up for free newsletters and get more delivered to your inbox",
+  "properties": {
+    "name": {
+      "type": "string",
+      "minLength": 8,
+      "maxLength": 80,
+      "title": "Full Name",
+      "attrs": {
+        "placeholder": "Your Full Name",
+        "title": "Please enter your full name"
+      }
+    },
+    "email": {
+      "type": "string",
+      "maxLength": 120,
+      "title": "Email",
+      "attrs": {
+        "type": "email",
+        "placeholder": "Your Email",
+        "title": "Please enter your email"
+      }
+    },
+    "lists": {
+      "type": "string",
+      "title": "List",
+      "enum": ["Daily New", "Promotion"],
+      "attrs": {
+        "placeholder": "Select your list subscription",
+        "title": "Please select your list subscription"
+      }
+    },
+    "source": {
+      "type": "string",
+      "maxLength": 120,
+      "title": "Source",
+      "description": "Ex. Using the NPM Search Engine",
+      "attrs": {
+        "type": "textarea",
+        "placeholder": "How did you hear about us?"
+      }
+    },
+    "agree": {
+      "type": "boolean",
+      "title": "Agree",
+      "description": "You agree to receive occasional updates and special offers for vue-json-schema updates.",
+      "default": false,
+      "attrs": {
+        "type": "checkbox"
+      }
+    }
+  },
+  "additionalProperties": false,
+  "required": ["name", "email", "lists"]
+}

example/schema/newsletter.json

@@ -25,6 +25,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
+    "element-ui": "^2.0.5",
     "eslint": "^3.19.0",
     "eslint-friendly-formatter": "^3.0.0",
     "eslint-loader": "^1.7.1",
@@ -34,21 +35,21 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "webpack-bundle-analyzer": "^2.9.0",
     "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
+    "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "rimraf": "^2.6.0",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "portfinder": "^1.0.13",
     "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"
   },