vue-form-generator example

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

by dvdgdnjsph

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-form-generator/dist/vfg.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-form-generator/dist/vfg.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</div>
        <div class="panel-body">
            <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">Model</div>
        <div class="panel-body">
            <pre v-if="model" v-html="prettyJSON(model)"></pre>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">Schema</div>
        <div class="panel-body">
            <pre v-if="model" v-html="prettyJSON(schema)"></pre>
        </div>
    </div>
</div>

SCSS

$c-light:#879CB3;
$c-medium:#495C70;
$c-dark:#171D23;
$white:#eee;
* {
    box-sizing: border-box;
}
html {
    font-size: 14px;
}
body {
    line-height: 1.42857143;
    color: $white;
    background: $c-dark;
}
body,
input {
    font-family: Georgia, "Times New Roman", Times, serif;
}
pre {
    overflow: auto;
}
h1 {
    text-align: center;
    font-size: 36px;
    margin: 2rem 0;
    font-weight: 500;
    color: $c-light;
}
fieldset {
    border: 0;
    padding: 10px 8px;
}
.panel {
    background: $c-medium;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    border: 5px solid #53687E;
    max-width: 500px;
    margin: auto;
    margin-bottom: 3rem;
}
.panel-heading {
    font-size: 1.5rem;
    border-color: $white;
    padding: 10px 8px;
    margin: 0 15px;
    border-bottom: 1px solid $c-light;
}
.panel-body {
    padding: 15px;
}
/* custom */

.vue-form-generator {
    .error {
        color: $c-medium;
        background-color: rgb(238, 238, 238);
        .field-wrap .form-control {
            color: $c-dark;
        }
    }
    .form-group {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 1.6rem;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background-color 0.3s;
        label {
            padding: 5px 0;
            margin-right: 1rem;
        }
        &.featured label {
            font-weight: bold;
        }
        &.required label::after {
            content: "*";
            font-weight: normal;
            color: red;
            position: absolute;
            padding-left: 0.2em;
            font-size: 1em;
        }
        &.disabled label {
            color: $c-light;
        }
        &.disabled .form-control {
            border-bottom: 0;
        }
    }
    .field-wrap {
        display: flex;
        flex: 0 1 300px;
        .wrapper {
            width: 100%;
        }
       ...

JavaScript

var vm = new Vue({
    el: "#app",
    components: {
        "vue-form-generator": VueFormGenerator.component
    },

    methods: {
        prettyJSON: function(json) {
            if (json) {
                json = JSON.stringify(json, undefined, 4);
                json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
                    var cls = 'number';
                    if (/^"/.test(match)) {
                        if (/:$/.test(match)) {
                            cls = 'key';
                        } else {
                            cls = 'string';
                        }
                    } else if (/true|false/.test(match)) {
                        cls = 'boolean';
                    } else if (/null/.test(match)) {
                        cls = 'null';
                    }
                    return '<span class="' + cls + '">' + match + '</span>';
                });
            }
        }
    },

    data() {
    	return {
        model: {
            id: 1,
            name: "John Doe",
            password: "J0hnD03!x4",
            skills: ["Javascript", "VueJS"],
            email: "[email protected]",
            status: true
        },
        schema: {
            fields: [{
								type: "input",
                inputType: "text",
                label: "ID",
                model: "id",
                readonly: true,
                featured: false,
                disabled: true
            }, {
								type: "input",
                inputType: "text",
                label: "Name",
                model: "name",
                readonly: false,
                featured: true,
                required: true,
                disabled: false,
                placeholder: "User's name",
                validator: VueFormGenerator.validators.string
   ...