Implement 486

build/webpack.dev.config.js

@@ -44,12 +44,13 @@ module.exports = {
 		contentBase: [path.resolve("dev/projects")]
 	},
 	entry: {
-		full: path.resolve("dev", "projects", "full", "main.js"),
 		basic: path.resolve("dev", "projects", "basic", "main.js"),
-		mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
+		checklist: path.resolve("dev", "projects", "checklist", "main.js"),
+		custom: path.resolve("dev", "projects", "custom", "main.js"),
+		full: path.resolve("dev", "projects", "full", "main.js"),
 		grouping: path.resolve("dev", "projects", "grouping", "main.js"),
+		mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
 		multi: path.resolve("dev", "projects", "multi", "main.js"),
-		checklist: path.resolve("dev", "projects", "checklist", "main.js"),
 		picker: path.resolve("dev", "projects", "picker", "main.js")
 	},
 

dev/projects/custom/app.vue

@@ -0,0 +1,251 @@
+<template>
+	<div class="container">
+		<h1>Custom label, help, hint and errors (with grouping)</h1>
+		<div class="row">
+			<div class="col-sm-12">
+				<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">
+
+					<template slot="label" slot-scope="{ field, getValueFromOption }">
+						<h3><i :class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
+					</template>
+
+					<template slot="help" slot-scope="{ field }">
+						<span v-if='field.help' class="help">
+							<span @click.prevent="testClick(field.help, $event)">Need help</span>
+							<i class="fa fa-question"></i>
+							<vue-markdown class="helpText" :source="field.help"></vue-markdown>
+						</span>
+					</template>
+
+					<template slot="hint" slot-scope="{ field, getValueFromOption }">
+						<div class="hint hint--info">
+							<i class="fa fa-info-circle"></i>
+							<span v-html="getValueFromOption(field, 'hint', undefined)"></span>
+						</div>
+					</template>
+
+					<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
+						<span>Custom errors</span>
+						<table class="errors help-block">
+							<tbody>
+								<thead>
+									<tr>
+										<th scope="col" id="">Index</th>
+										<th scope="col" id="">Error</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr v-for="(error, index) in errors" :key="index">
+										<td>{{index}}</td>
+										<td v-html="error"></td>
+									</tr>
+								</tbody>
+							</tbody>
+						</table>
+					</template>
+
+				</vue-form-generator>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-sm-12">
+				<pre v-if="model" v-html="prettyModel"></pre>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import mixinUtils from "../../mixins/utils.js";
+import VueMarkdown from "vue-markdown";
+
+export default {
+	mixins: [mixinUtils],
+	components: {
+		VueMarkdown
+	},
+	data() {
+		return {
+			model: {
+				name: "Brian Blessed",
+				email: "[email protected]",
+				others: {
+					more: "",
+					things: 2
+				},
+				single: "blah",
+				color: ""
+			},
+
+			schema: {
+				fields: [
+					{
+						type: "group",
+						legend: "Contact Details",
+						tag: "div",
+						fields: [
+							{
+								type: "input",
+								model: "name",
+								label: "Name",
+								fieldOptions: {
+									inputType: "text"
+								},
+								required: true,
+								validator: ["required"]
+							},
+							{
+								type: "group",
+								legend: "Subgroup",
+								styleClasses: "subgroup",
+								tag: "fieldset",
+								fields: [
+									{
+										type: "input",
+										model: "color",
+										label: "Some color",
+										fieldOptions: {
+											inputType: "color"
+										},
+										required: true,
+										validator: ["required"]
+									}
+								]
+							},
+							{
+								type: "input",
+								model: "email",
+								label: "Email",
+								hint: "We will not share your email with third-party",
+								fieldOptions: {
+									inputType: "email"
+								}
+							}
+						]
+					},
+					{
+						type: "input",
+						model: "single",
+						label: "Single field (without group)",
+						fieldOptions: {
+							inputType: "text"
+						},
+						required: true,
+						validator: ["string"]
+					},
+					{
+						type: "group",
+						legend: "Other Details",
+						fields: [
+							{
+								type: "input",
+								model: "others.more",
+								label: "More",
+								help: `
+Welcome to this *custom help*
+
+	some code example
+
+
+You need a modern browser to fill this field in the best condition.
+* test1
+* test2
+
+https://google.com/
+
+# Markdown !
+								`,
+								fieldOptions: {
+									inputType: "date"
+								}
+							},
+							{
+								type: "input",
+								model: "others.things",
+								label: "Things",
+								fieldOptions: {
+									inputType: "number"
+								}
+							}
+						]
+					}
+				]
+			},
+
+			formOptions: {
+				validateAfterLoad: true,
+				validateAfterChanged: true,
+				fieldIdPrefix: "frm1-"
+			}
+		};
+	},
+
+	methods: {
+		testClick(helpText, event) {
+			console.log(helpText, event);
+		},
+		getIcon(field, getValueFromOption) {
+			let fieldType = getValueFromOption(field, "type");
+			let fieldOptions = getValueFromOption(field, "fieldOptions");
+
+			if (fieldType === "input") {
+				switch (fieldOptions.inputType) {
+					case "email":
+						return "at";
+					case "number":
+						return "calculator";
+					case "date":
+						return "calendar-alt";
+					case "color":
+						return "palette";
+					default:
+						return "file-alt";
+				}
+			}
+		}
+	},
+
+	created() {
+		window.app = this;
+	}
+};
+</script>
+
+<style lang="scss">
+@import "../../style.scss";
+.field-group {
+	border: 2px solid #bbb;
+	padding: 8px;
+	border-radius: 4px;
+}
+.subgroup {
+	border-color: goldenrod;
+	legend {
+		color: #00268d;
+	}
+}
+.hint {
+	&--info {
+		color: #339af0;
+	}
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+thead th {
+	background-color: #efdddd;
+	border: solid 1px #eedddd;
+	color: #6b3333;
+	padding: 10px;
+	text-align: left;
+	text-shadow: 1px 1px 1px #fff;
+}
+tbody td {
+	border: solid 1px #eedddd;
+	color: #333;
+	padding: 10px;
+	text-shadow: 1px 1px 1px #fff;
+}
+</style>

dev/projects/custom/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<title>vue-form-generator multiple forms demo</title>
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+	      crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+</head>
+
+<body>
+	<div class="container-fluid"></div>
+	<div id="app"></div>
+	<script src="/custom.js"></script>
+</body>
+
+</html>

dev/projects/custom/main.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import VueFormGenerator from "../../../src";
+Vue.use(VueFormGenerator);
+
+import App from "./app.vue";
+
+new Vue({
+	...App
+}).$mount("#app");

dev/projects/full/app.vue

@@ -22,7 +22,9 @@
 						<strong>{{ item.error }}</strong>
 					</div>
 				</div>
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated"></vue-form-generator>
+				<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">
+
+				</vue-form-generator>
 			</div>
 			<div class="col-md-6">
 				<pre v-if="model" v-html="prettyModel"></pre>

dev/projects/full/schema.js

@@ -43,7 +43,7 @@ export default {
 			required: true,
 			help: "First name of user",
 			validator: validators.string,
-			fieldClasses: "half-width",
+			styleClasses: "half-width col-xs-12 col-sm-6",
 			fieldOptions: {
 				inputType: "text"
 			},
@@ -61,7 +61,7 @@ export default {
 			placeholder: "User's last name",
 			featured: true,
 			required: true,
-			fieldClasses: "half-width",
+			styleClasses: "half-width col-xs-12 col-sm-6",
 			fieldOptions: {
 				inputType: "text"
 			},