support custom fields & example #62

Author: icebob

dev/app.vue

@@ -39,6 +39,10 @@
 	import { users } from "./data";
 	import { filters } from "./utils";
 
+	// Test custom field
+	import FieldAwesome from "./fieldAwesome.vue";
+	Vue.component("fieldAwesome", FieldAwesome);
+
 	import {each, isFunction, cloneDeep, merge} from 'lodash';	
 
 	Vue.use(VueFormGenerator);

dev/fieldAwesome.vue

@@ -0,0 +1,20 @@
+<template lang="jade">
+	input.form-control(type="text", v-model="value", :maxlength="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+</template>
+
+<script>
+	import VueFormGenerator from "../src";
+
+	console.log(VueFormGenerator);
+	export default {
+		mixins: [ VueFormGenerator.abstractField ]
+	};
+	
+</script>
+
+<style lang="sass" scoped>
+	input {
+		background-color: lighten(blue, 40%) !important;
+		font-weight: bold;
+	}
+</style>

dev/schema.js

@@ -179,6 +179,10 @@ module.exports = {
 			label: "E-mail (email field)",
 			model: "email",
 			placeholder: "User's e-mail address"
+		}, {
+			type: "awesome",
+			label: "Awesome (custom field)",
+			model: "userName"
 		}, {
 			type: "googleAddress",
 			label: "Location (googleAddress)",

src/index.js

@@ -2,6 +2,7 @@ module.exports = {
 	component: require("./formGenerator.vue"),
 	schema: require("./utils/schema.js"),
 	validators: require("./utils/validators.js"),
+	abstractField: require("./fields/abstractField").default,
 
 	install(Vue) {
 		Vue.component("VueFormGenerator", module.exports.component);