From 672e5e04a2233533eb055129b666c0507df1344f Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Fri, 5 Oct 2018 14:49:23 +0200
Subject: [PATCH 1/2] Remove Pug from project - Convert Pug to HTML

---
 .eslintignore                               |  2 -
 dev/projects/full/dataTable.vue             | 77 ++++++++++++------
 dev/projects/full/fieldAwesome.vue          | 10 ++-
 package.json                                |  1 -
 src/fields/core/fieldCheckbox.vue           | 11 ++-
 src/fields/core/fieldChecklist.vue          | 69 +++++++++++-----
 src/fields/core/fieldInput.vue              | 84 ++++++++++---------
 src/fields/core/fieldLabel.vue              |  7 +-
 src/fields/core/fieldRadios.vue             | 24 ++++--
 src/fields/core/fieldSelect.vue             | 37 ++++++---
 src/fields/core/fieldSubmit.vue             | 11 ++-
 src/fields/core/fieldTextArea.vue           | 26 +++---
 src/fields/core/fieldUpload.vue             | 30 +++----
 src/fields/optional/fieldCleave.vue         | 12 ++-
 src/fields/optional/fieldDateTimePicker.vue | 21 +++--
 src/fields/optional/fieldGoogleAddress.vue  | 14 +++-
 src/fields/optional/fieldImage.vue          | 31 +++++--
 src/fields/optional/fieldMasked.vue         | 12 ++-
 src/fields/optional/fieldPikaday.vue        | 11 ++-
 src/fields/optional/fieldRangeSlider.vue    | 13 ++-
 src/fields/optional/fieldSelectEx.vue       | 20 ++++-
 src/fields/optional/fieldSpectrum.vue       | 10 ++-
 src/fields/optional/fieldStaticMap.vue      |  4 +-
 src/fields/optional/fieldSwitch.vue         | 19 +++--
 src/fields/optional/fieldVueMultiSelect.vue | 89 +++++++++++----------
 25 files changed, 434 insertions(+), 211 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index f4a64d40..73b26aa6 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,2 @@
 dist/*.js
-build/*.js
-config/*.js
 !.eslintrc.js
diff --git a/dev/projects/full/dataTable.vue b/dev/projects/full/dataTable.vue
index d44eb421..5b27f025 100644
--- a/dev/projects/full/dataTable.vue
+++ b/dev/projects/full/dataTable.vue
@@ -1,26 +1,38 @@
-<template lang="pug">
-	table.table.table-hover.table-bordered
-		thead
-			tr
-				th ID
-				th Name
-				th E-mail
-				th Country
-				th Role
-				th Status
+<template>
+	<table class="table table-hover table-bordered">
+		<thead>
+			<tr>
+				<th>ID</th>
+				<th>Name</th>
+				<th>Password </th>
+				<th>Language</th>
+				<th>Role</th>
+				<th>Status</th>
+			</tr>
+		</thead>
 
-		tbody
-			tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
-				td {{ row.id }}
-				td
-					img(:src="row.avatar")
-					| {{ row.firstName + " " + row.lastName }} ({{row.userName}})
-					.label.label-warning(v-if="!row.status") Inactive
-				td {{ row.email }}
-				td(v-if="row.address") {{ row.address.country }}
-				td {{ getRoleName(row) }}
-				td
-					i.fa(:class=" row.status? 'fa-check' : 'fa-ban' ")
+		<tbody>
+			<tr v-for="(row, index) in rows"
+				:key="index"
+				@click="select($event, row)"
+				:class="{ active: isSelected(row) }">
+				<td>{{ row.id }}</td>
+				<td>
+					<img :src="row.avatar">
+					{{ row.firstName + " " + row.lastName }} ({{ row.userName }})
+					<div class="label label-warning"
+						v-if="!row.status"> Inactive</div>
+				</td>
+				<td>{{ row.password }}</td>
+				<td>{{ row.language }}</td>
+				<td>{{ getRoleName(row) }}</td>
+				<td>
+					<i class="fa"
+						:class="row.status? 'fa-check' : 'fa-ban'"></i>
+				</td>
+			</tr>
+		</tbody>
+	</table>
 </template>
 
 <script>
@@ -28,7 +40,26 @@ import { find } from "lodash";
 import { roles } from "./data";
 
 export default {
-	props: ["rows", "selected", "select"],
+	props: {
+		rows: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		selected: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		select: {
+			type: Function,
+			default() {
+				return [];
+			}
+		}
+	},
 
 	methods: {
 		isSelected(row) {
diff --git a/dev/projects/full/fieldAwesome.vue b/dev/projects/full/fieldAwesome.vue
index 7e783321..5ba21a74 100644
--- a/dev/projects/full/fieldAwesome.vue
+++ b/dev/projects/full/fieldAwesome.vue
@@ -1,5 +1,11 @@
-<template lang="pug">
-	input.form-control(type="text", v-model="value", :maxlength="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+<template>
+	<input class="form-control"
+		type="text"
+		v-model="value"
+		:maxlength="schema.max"
+		:readonly="schema.readonly"
+		:disabled="disabled"
+		:placeholder="schema.placeholder">
 </template>
 
 <script>
diff --git a/package.json b/package.json
index 25ef0dd4..28161965 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,6 @@
 		"sass-loader": "7.1.0",
 		"sinon": "6.3.4",
 		"vue": "2.5.17",
-		"vue-cli-plugin-pug": "1.0.7",
 		"vue-highlightjs": "^1.3.3",
 		"vue-markdown": "2.2.4",
 		"vue-multiselect": "2.1.2",
diff --git a/src/fields/core/fieldCheckbox.vue b/src/fields/core/fieldCheckbox.vue
index 308ffc5c..8e3e6019 100644
--- a/src/fields/core/fieldCheckbox.vue
+++ b/src/fields/core/fieldCheckbox.vue
@@ -1,5 +1,12 @@
-<template lang="pug">
-	input(:id="fieldID", type="checkbox", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :name="inputName", :class="fieldClasses", v-attributes="'input'")
+<template>
+	<input :id="fieldID"
+		type="checkbox"
+		v-model="value"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:name="inputName"
+		:class="fieldClasses"
+		v-attributes="'input'" >
 </template>
 
 <script>
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
index 4e4f7ca5..88b921b1 100644
--- a/src/fields/core/fieldChecklist.vue
+++ b/src/fields/core/fieldChecklist.vue
@@ -1,21 +1,54 @@
-<template lang="pug">
-	.wrapper(v-attributes="'wrapper'")
-		.listbox.form-control(v-if="useListBox", :disabled="disabled")
-			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
-				label
-					input(:id="fieldID", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
-					| {{ getItemName(item) }}
-
-		.combobox.form-control(v-if="!useListBox", :disabled="disabled")
-			.mainRow(@click="onExpandCombo", :class="{ expanded: comboExpanded }")
-				.info {{ selectedCount }} selected
-				.arrow
-
-			.dropList
-				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
-					label
-						input(:id="fieldID", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
-						| {{ getItemName(item) }}
+<template>
+	<div class="wrapper"
+		v-attributes="'wrapper'">
+		<div class="listbox form-control"
+			v-if="useListBox"
+			:disabled="disabled">
+			<div class="list-row"
+				v-for="item in items"
+				:key="getItemValue(item)"
+				:class="{'is-checked': isItemChecked(item)}">
+				<label>
+					<input :id="fieldID"
+						type="checkbox"
+						:checked="isItemChecked(item)"
+						:disabled="disabled"
+						@change="onChanged($event, item)"
+						:name="getInputName(item)"
+						v-attributes="'input'">{{ getItemName(item) }}
+				</label>
+			</div>
+		</div>
+		<div class="combobox form-control"
+			v-if="!useListBox"
+			:disabled="disabled">
+			<div class="mainRow"
+				@click="onExpandCombo"
+				:class="{ expanded: comboExpanded }">
+				<div class="info"> {{ selectedCount }} selected</div>
+				<div class="arrow"></div>
+			</div>
+
+			<div class="dropList">
+				<div class="list-row"
+					v-if="comboExpanded"
+					v-for="item in items"
+					:key="getItemValue(item)"
+					:class="{'is-checked': isItemChecked(item)}">
+					<label>
+						<input :id="fieldID"
+							type="checkbox"
+							:checked="isItemChecked(item)"
+							:disabled="disabled"
+							@change="onChanged($event, item)"
+							:name="getInputName(item)"
+							v-attributes="'input'" >
+						{{ getItemName(item) }}
+					</label>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
index 80c1cd8c..514f5692 100644
--- a/src/fields/core/fieldInput.vue
+++ b/src/fields/core/fieldInput.vue
@@ -1,43 +1,47 @@
-<template lang="pug">
-.wrapper(v-attributes="'wrapper'")
-	input.form-control(
-		:id="fieldID",
-		:type="inputType",
-		:value="value",
-		@input="onInput",
-		@blur="onBlur",
-		:class="fieldClasses",
-		@change="schema.onChange || null",
-		:disabled="disabled",
-		:accept="fieldOptions.accept",
-		:alt="fieldOptions.alt",
-		:autocomplete="fieldOptions.autocomplete",
-		:checked="fieldOptions.checked",
-		:dirname="fieldOptions.dirname",
-		:formaction="fieldOptions.formaction",
-		:formenctype="fieldOptions.formenctype",
-		:formmethod="fieldOptions.formmethod",
-		:formnovalidate="fieldOptions.formnovalidate",
-		:formtarget="fieldOptions.formtarget",
-		:height="fieldOptions.height",
-		:list="fieldOptions.list",
-		:max="fieldOptions.max",
-		:maxlength="fieldOptions.maxlength",
-		:min="fieldOptions.min",
-		:minlength="fieldOptions.minlength",
-		:multiple="fieldOptions.multiple",
-		:name="inputName",
-		:pattern="fieldOptions.pattern",
-		:placeholder="placeholder",
-		:readonly="readonly",
-		:required="schema.required",
-		:size="fieldOptions.size",
-		:src="fieldOptions.src",
-		:step="fieldOptions.step",
-		:width="fieldOptions.width",
-		:files="fieldOptions.files"
-		v-attributes="'input'")
-	span.helper(v-if="inputType === 'color' || inputType === 'range'") {{ value }}
+<template>
+	<div class="wrapper"
+		v-attributes="'wrapper'">
+		<input class="form-control"
+			:id="fieldID"
+			:type="inputType"
+			:value="value"
+			@input="onInput"
+			@blur="onBlur"
+			:class="fieldClasses"
+			@change="schema.onChange || null"
+			:disabled="disabled"
+			:accept="fieldOptions.accept"
+			:alt="fieldOptions.alt"
+			:autocomplete="fieldOptions.autocomplete"
+			:checked="fieldOptions.checked"
+			:dirname="fieldOptions.dirname"
+			:formaction="fieldOptions.formaction"
+			:formenctype="fieldOptions.formenctype"
+			:formmethod="fieldOptions.formmethod"
+			:formnovalidate="fieldOptions.formnovalidate"
+			:formtarget="fieldOptions.formtarget"
+			:height="fieldOptions.height"
+			:list="fieldOptions.list"
+			:max="fieldOptions.max"
+			:maxlength="fieldOptions.maxlength"
+			:min="fieldOptions.min"
+			:minlength="fieldOptions.minlength"
+			:multiple="fieldOptions.multiple"
+			:name="inputName"
+			:pattern="fieldOptions.pattern"
+			:placeholder="placeholder"
+			:readonly="readonly"
+			:required="schema.required"
+			:size="fieldOptions.size"
+			:src="fieldOptions.src"
+			:step="fieldOptions.step"
+			:width="fieldOptions.width"
+			:files="fieldOptions.files"
+			v-attributes="'input'">
+		<span class="helper"
+			v-if="inputType === 'color' || inputType === 'range'"
+			v-text="value"></span>
+	</div>
 </template>
 
 <script>
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
index 2da49ca6..0050725d 100644
--- a/src/fields/core/fieldLabel.vue
+++ b/src/fields/core/fieldLabel.vue
@@ -1,5 +1,8 @@
-<template lang="pug">
-	span(:id="fieldID", :class="fieldClasses", v-attributes="'label'") {{ value }}
+<template>
+	<span :id="fieldID"
+		:class="fieldClasses"
+		v-attributes="'label'"
+		v-text="value"></span>
 </template>
 
 <script>
diff --git a/src/fields/core/fieldRadios.vue b/src/fields/core/fieldRadios.vue
index 55784cac..137e9da0 100644
--- a/src/fields/core/fieldRadios.vue
+++ b/src/fields/core/fieldRadios.vue
@@ -1,8 +1,22 @@
-<template lang="pug">
-	.radio-list(:disabled="disabled", v-attributes="'wrapper'")
-		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}", v-attributes="'label'")
-			input(:id="fieldID", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="fieldClasses", v-attributes="'input'")
-			| {{ getItemName(item) }}
+<template>
+	<div class="radio-list"
+		:disabled="disabled"
+		v-attributes="'wrapper'">
+		<label v-for="item in items"
+			:key="getItemValue(item)"
+			:class="{'is-checked': isItemChecked(item)}"
+			v-attributes="'label'">
+			<input :id="fieldID"
+				type="radio"
+				:disabled="disabled"
+				:name="id"
+				@click="onSelection(item)"
+				:value="getItemValue(item)"
+				:checked="isItemChecked(item)"
+				:class="fieldClasses"
+				v-attributes="'input'">{{ getItemName(item) }}
+		</label>
+	</div>
 
 </template>
 
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
index 19cccca3..cea90f57 100644
--- a/src/fields/core/fieldSelect.vue
+++ b/src/fields/core/fieldSelect.vue
@@ -1,12 +1,31 @@
-<template lang="pug">
-	select.form-control(v-model="value", :disabled="disabled", :name="inputName", :id="fieldID", :class="fieldClasses", v-attributes="'input'")
-		option(v-if="!fieldOptions.hideNoneSelectedText", :disabled="schema.required", :value="null") {{ fieldOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
-
-		template(v-for="item in items")
-			optgroup(v-if="item.group", :label="getGroupName(item)")
-				option(v-if="item.ops", v-for="i in item.ops", :value="getItemValue(i)") {{ getItemName(i) }}
-
-			option(v-if="!item.group", :value="getItemValue(item)") {{ getItemName(item) }}
+<template>
+	<select class="form-control"
+		v-model="value"
+		:disabled="disabled"
+		:name="inputName"
+		:id="fieldID"
+		:class="fieldClasses"
+		v-attributes="'input'">
+		<option v-if="!fieldOptions.hideNoneSelectedText"
+			:disabled="schema.required"
+			:value="null"> {{ fieldOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
+		</option>
+
+		<template v-for="item in items">
+			<optgroup v-if="item.group"
+				:label="getGroupName(item)"
+				:key="getItemValue(item)">
+				<option v-if="item.ops"
+					v-for="i in item.ops"
+					:value="getItemValue(i)"
+					:key="getItemValue(i)"> {{ getItemName(i) }}</option>
+			</optgroup>
+
+			<option v-if="!item.group"
+				:value="getItemValue(item)"
+				:key="getItemValue(item)"> {{ getItemName(item) }}</option>
+		</template>
+	</select>
 </template>
 
 <script>
diff --git a/src/fields/core/fieldSubmit.vue b/src/fields/core/fieldSubmit.vue
index e1235d16..d5a23ffd 100644
--- a/src/fields/core/fieldSubmit.vue
+++ b/src/fields/core/fieldSubmit.vue
@@ -1,5 +1,12 @@
-<template lang="pug">
-	input(:id="fieldID", type="submit", :value="fieldOptions.buttonText", @click="onClick", :name="inputName", :disabled="disabled", :class="fieldClasses", v-attributes="'input'")
+<template>
+	<input :id="fieldID"
+		type="submit"
+		:value="fieldOptions.buttonText"
+		@click="onClick"
+		:name="inputName"
+		:disabled="disabled"
+		:class="fieldClasses"
+		v-attributes="'input'">
 </template>
 
 <script>
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
index 310e3a91..b6ee65bb 100644
--- a/src/fields/core/fieldTextArea.vue
+++ b/src/fields/core/fieldTextArea.vue
@@ -1,16 +1,16 @@
-<template lang="pug">
-	textarea.form-control(
-		v-model="value",
-		:id="fieldID",
-		:class="fieldClasses",
-		:disabled="disabled",
-		:maxlength="fieldOptions.max",
-		:minlength="fieldOptions.min",
-		:placeholder="placeholder",
-		:readonly="readonly",
-		:rows="fieldOptions.rows || 2",
-		:name="inputName",
-		v-attributes="'input'")
+<template>
+	<textarea class="form-control"
+		v-model="value"
+		:id="fieldID"
+		:class="fieldClasses"
+		:disabled="disabled"
+		:maxlength="fieldOptions.max"
+		:minlength="fieldOptions.min"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:rows="fieldOptions.rows || 2"
+		:name="inputName"
+		v-attributes="'input'"></textarea>
 </template>
 
 <script>
diff --git a/src/fields/core/fieldUpload.vue b/src/fields/core/fieldUpload.vue
index fd940250..45c6c2a5 100644
--- a/src/fields/core/fieldUpload.vue
+++ b/src/fields/core/fieldUpload.vue
@@ -1,17 +1,19 @@
-<template lang="pug">
-.wrapper(v-attributes="'wrapper'")
-	input.form-control(
-		:id="fieldID",
-		type="file",
-		:name="inputName",
-		@change="onChange",
-		:accept="fieldOptions.accept",
-		:multiple="fieldOptions.multiple",
-		:placeholder="placeholder",
-		:readonly="readonly",
-		:required="schema.required",
-		:disabled="disabled",
-		v-attributes="'input'")
+<template >
+	<div class="wrapper"
+		v-attributes="'wrapper'">
+		<input class="form-control"
+			:id="fieldID"
+			type="file"
+			:name="inputName"
+			@change="onChange"
+			:accept="fieldOptions.accept"
+			:multiple="fieldOptions.multiple"
+			:placeholder="placeholder"
+			:readonly="readonly"
+			:required="schema.required"
+			:disabled="disabled"
+			v-attributes="'input'">
+	</div>
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldCleave.vue b/src/fields/optional/fieldCleave.vue
index 49b6c9ca..b4029f5f 100644
--- a/src/fields/optional/fieldCleave.vue
+++ b/src/fields/optional/fieldCleave.vue
@@ -1,5 +1,13 @@
-<template lang="pug">
-	input.form-control(type="text", :value="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName", :id="fieldID")
+<template>
+	<input class="form-control"
+		type="text"
+		:value="value"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:name="inputName"
+		:id="fieldID">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldDateTimePicker.vue b/src/fields/optional/fieldDateTimePicker.vue
index 01923257..95da3edd 100644
--- a/src/fields/optional/fieldDateTimePicker.vue
+++ b/src/fields/optional/fieldDateTimePicker.vue
@@ -1,8 +1,19 @@
-<template lang="pug">
-	.input-group.date
-		input.form-control(type="text", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName", :id="fieldID")
-		span.input-group-addon
-			span.glyphicon.glyphicon-calendar
+<template>
+	<div class="input-group date">
+		<input class="form-control"
+			type="text"
+			v-model="value"
+			:autocomplete="fieldOptions.autocomplete"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			:readonly="readonly"
+			:name="inputName"
+			:id="fieldID">
+
+		<span class="input-group-addon">
+			<span class="glyphicon glyphicon-calendar"></span>
+		</span>
+	</div>
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldGoogleAddress.vue b/src/fields/optional/fieldGoogleAddress.vue
index 3b643a68..420769e6 100644
--- a/src/fields/optional/fieldGoogleAddress.vue
+++ b/src/fields/optional/fieldGoogleAddress.vue
@@ -1,5 +1,15 @@
-<template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName",  debounce="500", @focus="geolocate()", :id="fieldID")
+<template>
+	<input class="form-control"
+		type="text"
+		v-model="value"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:name="inputName"
+		debounce="500"
+		@focus="geolocate()"
+		:id="fieldID">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldImage.vue b/src/fields/optional/fieldImage.vue
index 65a6f044..a50106a8 100644
--- a/src/fields/optional/fieldImage.vue
+++ b/src/fields/optional/fieldImage.vue
@@ -1,9 +1,28 @@
-<template lang="pug">
-	div.wrapper
-		input.form-control.link(type="text", v-show="fieldOptions.hideInput !== true", v-model="wrappedValue", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly")
-		input.form-control.file(type="file", v-if="fieldOptions.browse !== false", :disabled="disabled", @change="fileChanged", :name="inputName")
-		.preview(:style="previewStyle")
-			.remove(title="Remove image", @click="remove")
+<template>
+	<div class="wrapper">
+		<input class="form-control link"
+			type="text"
+			v-show="fieldOptions.hideInput !== true"
+			v-model="wrappedValue"
+			:autocomplete="fieldOptions.autocomplete"
+			:disabled="disabled"
+			:placeholder="placeholder"
+			:readonly="readonly">
+
+		<input class="form-control file"
+			type="file"
+			v-if="fieldOptions.browse !== false"
+			:disabled="disabled"
+			@change="fileChanged"
+			:name="inputName">
+
+		<div class="preview"
+			:style="previewStyle">
+			<div class="remove"
+				title="Remove image"
+				@click="remove"></div>
+		</div>
+	</div>
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldMasked.vue b/src/fields/optional/fieldMasked.vue
index 356fc6b7..e93adc74 100644
--- a/src/fields/optional/fieldMasked.vue
+++ b/src/fields/optional/fieldMasked.vue
@@ -1,5 +1,13 @@
-<template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName", :id="fieldID")
+<template>
+	<input class="form-control"
+		type="text"
+		v-model="value"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:name="inputName"
+		:id="fieldID">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldPikaday.vue b/src/fields/optional/fieldPikaday.vue
index b844e7ab..8968e030 100644
--- a/src/fields/optional/fieldPikaday.vue
+++ b/src/fields/optional/fieldPikaday.vue
@@ -1,5 +1,12 @@
-<template lang="pug">
-	input.form-control(type="text", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName")
+<template>
+	<input class="form-control"
+		type="text"
+		v-model="value"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:name="inputName">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldRangeSlider.vue b/src/fields/optional/fieldRangeSlider.vue
index 25caaeb3..2b9274a8 100644
--- a/src/fields/optional/fieldRangeSlider.vue
+++ b/src/fields/optional/fieldRangeSlider.vue
@@ -1,5 +1,14 @@
-<template lang="pug">
-	input(type="text", :autocomplete="fieldOptions.autocomplete", :data-disable="disabled", :data-max="fieldOptions.max", :data-min="fieldOptions.min", :data-step="fieldOptions.step", :placeholder="placeholder", :readonly="readonly", :name="inputName")
+<template>
+	<input type="text"
+		:autocomplete="fieldOptions.autocomplete"
+		:data-disable="disabled"
+		:data-max="fieldOptions.max"
+		:data-min="fieldOptions.min"
+		:data-step="fieldOptions.step"
+		:placeholder="placeholder"
+		:readonly="readonly"
+
+		:name="inputName">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldSelectEx.vue b/src/fields/optional/fieldSelectEx.vue
index acddb84a..235bac3c 100644
--- a/src/fields/optional/fieldSelectEx.vue
+++ b/src/fields/optional/fieldSelectEx.vue
@@ -1,7 +1,19 @@
-<template lang="pug">
-	select.selectpicker(v-model="value", :disabled="disabled", :multiple="fieldOptions.multiSelect", :title="placeholder", data-width="100%", :name="inputName")
-		option(:disabled="schema.required", v-if="fieldOptions.multiSelect !== true", :value="null", :selected="value == undefined")
-		option(v-for="item in items", :value="getItemValue(item)") {{ getItemName(item) }}
+<template>
+	<select class="selectpicker"
+		v-model="value"
+		:disabled="disabled"
+		:multiple="fieldOptions.multiSelect"
+		:title="placeholder"
+		data-width="100%"
+		:name="inputName">
+		<option :disabled="schema.required"
+			v-if="fieldOptions.multiSelect !== true"
+			:value="null"
+			:selected="value == undefined" ></option>
+		<option v-for="item in items"
+			:key="getItemValue(item)"
+			:value="getItemValue(item)"> {{ getItemName(item) }}</option>
+	</select>
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldSpectrum.vue b/src/fields/optional/fieldSpectrum.vue
index 458df756..713e998e 100644
--- a/src/fields/optional/fieldSpectrum.vue
+++ b/src/fields/optional/fieldSpectrum.vue
@@ -1,5 +1,11 @@
-<template lang="pug">
-	input(type="text", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :placeholder="placeholder", :readonly="readonly", :name="inputName", :id="fieldID")
+<template>
+	<input type="text"
+		:autocomplete="fieldOptions.autocomplete"
+		:disabled="disabled"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:name="inputName"
+		:id="fieldID" >
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldStaticMap.vue b/src/fields/optional/fieldStaticMap.vue
index 7afc759d..3a62893c 100644
--- a/src/fields/optional/fieldStaticMap.vue
+++ b/src/fields/optional/fieldStaticMap.vue
@@ -1,5 +1,5 @@
-<template lang="pug">
-	img(:src="mapLink")
+<template>
+	<img :src="mapLink">
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldSwitch.vue b/src/fields/optional/fieldSwitch.vue
index 85eae7b5..dcf53cdb 100644
--- a/src/fields/optional/fieldSwitch.vue
+++ b/src/fields/optional/fieldSwitch.vue
@@ -1,8 +1,17 @@
-<template lang="pug">
-	label
-		input(type="checkbox", v-model="value", :autocomplete="fieldOptions.autocomplete", :disabled="disabled", :name="inputName", :id="fieldID")
-		span.label(:data-on="fieldOptions.textOn || 'On'", :data-off="fieldOptions.textOff || 'Off'", :for="fieldID")
-		span.handle
+<template>
+	<label>
+		<input type="checkbox"
+			v-model="value"
+			:autocomplete="fieldOptions.autocomplete"
+			:disabled="disabled"
+			:name="inputName"
+			:id="fieldID">
+		<span class="label"
+			:data-on="fieldOptions.textOn || 'On'"
+			:data-off="fieldOptions.textOff || 'Off'"
+			:for="fieldID"></span>
+		<span class="handle"></span>
+	</label>
 </template>
 
 <script>
diff --git a/src/fields/optional/fieldVueMultiSelect.vue b/src/fields/optional/fieldVueMultiSelect.vue
index 5a2642e9..240a1971 100644
--- a/src/fields/optional/fieldVueMultiSelect.vue
+++ b/src/fields/optional/fieldVueMultiSelect.vue
@@ -1,48 +1,49 @@
-<template lang="pug">
-	multiselect(
-		:id="fieldOptions.id",
-		:options="options",
-		:value="value",
-		:multiple="fieldOptions.multiple",
-		:track-by="fieldOptions.trackBy || null",
-		:label="fieldOptions.label || null",
-		:searchable="fieldOptions.searchable",
-		:clear-on-select="fieldOptions.clearOnSelect",
-		:hide-selected="fieldOptions.hideSelected",
-		:placeholder="placeholder",
-		:allow-empty="fieldOptions.allowEmpty",
-		:reset-after="fieldOptions.resetAfter",
-		:close-on-select="fieldOptions.closeOnSelect",
-		:custom-label="customLabel",
-		:taggable="fieldOptions.taggable",
-		:tag-placeholder="fieldOptions.tagPlaceholder",
-		:max="fieldOptions.max || null",
-		:options-limit="fieldOptions.optionsLimit",
-		:group-values="fieldOptions.groupValues",
-		:group-label="fieldOptions.groupLabel",
-		:block-keys="fieldOptions.blockKeys",
-		:internal-search="fieldOptions.internalSearch",
-		:select-label="fieldOptions.selectLabel",
-		:selected-label="fieldOptions.selectedLabel",
-		:deselect-label="fieldOptions.deselectLabel",
-		:show-labels="fieldOptions.showLabels",
-		:limit="fieldOptions.limit",
-		:limit-text="fieldOptions.limitText",
-		:loading="fieldOptions.loading",
-		:disabled="disabled",
-		:max-height="fieldOptions.maxHeight",
-		:show-pointer="fieldOptions.showPointer",
-		@input="updateSelected",
-		@select="onSelect",
-		@remove="onRemove",
-		@search-change="onSearchChange",
-		@tag="addTag",
-		@open="onOpen",
-		@close="onClose",
-		:option-height="fieldOptions.optionHeight",
-	)
-		span(slot="noResult").
+<template>
+	<multiselect
+		:id="fieldOptions.id"
+		:options="options"
+		:value="value"
+		:multiple="fieldOptions.multiple"
+		:track-by="fieldOptions.trackBy || null"
+		:label="fieldOptions.label || null"
+		:searchable="fieldOptions.searchable"
+		:clear-on-select="fieldOptions.clearOnSelect"
+		:hide-selected="fieldOptions.hideSelected"
+		:placeholder="placeholder"
+		:allow-empty="fieldOptions.allowEmpty"
+		:reset-after="fieldOptions.resetAfter"
+		:close-on-select="fieldOptions.closeOnSelect"
+		:custom-label="customLabel"
+		:taggable="fieldOptions.taggable"
+		:tag-placeholder="fieldOptions.tagPlaceholder"
+		:max="fieldOptions.max || null"
+		:options-limit="fieldOptions.optionsLimit"
+		:group-values="fieldOptions.groupValues"
+		:group-label="fieldOptions.groupLabel"
+		:block-keys="fieldOptions.blockKeys"
+		:internal-search="fieldOptions.internalSearch"
+		:select-label="fieldOptions.selectLabel"
+		:selected-label="fieldOptions.selectedLabel"
+		:deselect-label="fieldOptions.deselectLabel"
+		:show-labels="fieldOptions.showLabels"
+		:limit="fieldOptions.limit"
+		:limit-text="fieldOptions.limitText"
+		:loading="fieldOptions.loading"
+		:disabled="disabled"
+		:max-height="fieldOptions.maxHeight"
+		:show-pointer="fieldOptions.showPointer"
+		@input="updateSelected"
+		@select="onSelect"
+		@remove="onRemove"
+		@search-change="onSearchChange"
+		@tag="addTag"
+		@open="onOpen"
+		@close="onClose"
+		:option-height="fieldOptions.optionHeight">
+		<span slot="noResult">
 			{{ fieldOptions.noResult }}
+		</span>
+	</multiselect>
 </template>
 <script>
 import abstractField from "../abstractField";

From 8d82279e15fb445c1d37ad913053d739a076ec3f Mon Sep 17 00:00:00 2001
From: Lionel Bijaoui <lionel.bijaoui@aviitam.com>
Date: Fri, 5 Oct 2018 14:56:20 +0200
Subject: [PATCH 2/2] Use stronger Eslint rules - Allow consistent formating of
 HTML - Almost all rules can be fixed automatically by `npm run lint` - Remove
 caret from vue-highlightjs - Update sinon and vue-multiselect

---
 dev/app.vue                               |   6 +-
 dev/projects/basic/app.vue                |   8 +-
 dev/projects/checklist/app.vue            |   4 +-
 dev/projects/custom/app.vue               |  32 +-
 dev/projects/full/app.vue                 |  38 +-
 dev/projects/grouping/app.vue             |   5 +-
 dev/projects/multi/app.vue                |  16 +-
 dev/projects/multiselect/app.vue          |   4 +-
 dev/projects/picker/app.vue               |   4 +-
 package-lock.json                         | 418 +---------------------
 package.json                              |  51 ++-
 src/fields/optional/fieldNoUiSlider.vue   |   4 +-
 src/formElement.vue                       |  72 +++-
 src/formGenerator.vue                     |  89 ++++-
 src/formGroup.vue                         |  65 +++-
 tests/unit/specs/VueFormGenerator.spec.js |  12 +-
 16 files changed, 336 insertions(+), 492 deletions(-)

diff --git a/dev/app.vue b/dev/app.vue
index db707222..8b94c775 100644
--- a/dev/app.vue
+++ b/dev/app.vue
@@ -2,8 +2,10 @@
 	<div class="container">
 		<h1>Dev Project</h1>
 		<ul>
-			<li v-for="link in devProject" :key="link" >
-				<a :href="'/' + link" v-text="link"></a>
+			<li v-for="link in devProject"
+				:key="link" >
+				<a :href="'/' + link"
+					v-text="link"></a>
 			</li>
 		</ul>
 	</div>
diff --git a/dev/projects/basic/app.vue b/dev/projects/basic/app.vue
index 8b5b0594..dbb3095d 100644
--- a/dev/projects/basic/app.vue
+++ b/dev/projects/basic/app.vue
@@ -3,7 +3,13 @@
 		<h1>Basic</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"
+					ref="form"
+					:is-new-model="isNewModel"
+					@model-updated="modelUpdated"
+					@validated="onValidated"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/dev/projects/checklist/app.vue b/dev/projects/checklist/app.vue
index c8bc522d..930db750 100644
--- a/dev/projects/checklist/app.vue
+++ b/dev/projects/checklist/app.vue
@@ -3,7 +3,9 @@
 		<h1>Checklist</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/dev/projects/custom/app.vue b/dev/projects/custom/app.vue
index 39cd1fa7..612bb0d1 100644
--- a/dev/projects/custom/app.vue
+++ b/dev/projects/custom/app.vue
@@ -3,40 +3,50 @@
 		<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">
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"
+					tag="section">
 
-					<template slot="label" slot-scope="{ field, getValueFromOption }">
+					<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">
+					<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>
+							<vue-markdown class="helpText"
+								:source="field.help"></vue-markdown>
 						</span>
 					</template>
 
-					<template slot="hint" slot-scope="{ field, getValueFromOption }">
+					<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 }">
+					<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>
+										<th scope="col">Index</th>
+										<th scope="col">Error</th>
 									</tr>
 								</thead>
 								<tbody>
-									<tr v-for="(error, index) in errors" :key="index">
-										<td>{{index}}</td>
+									<tr v-for="(error, index) in errors"
+										:key="index">
+										<td>{{ index }}</td>
 										<td v-html="error"></td>
 									</tr>
 								</tbody>
diff --git a/dev/projects/full/app.vue b/dev/projects/full/app.vue
index e3c4b3ad..d374e75a 100644
--- a/dev/projects/full/app.vue
+++ b/dev/projects/full/app.vue
@@ -2,27 +2,45 @@
 	<div class="container">
 		<div class="row">
 			<div class="col-md-10 col-md-offset-1">
-				<data-table :rows="rows" :selected="selected" :select="selectRow"></data-table>
+				<data-table :rows="rows"
+					:selected="selected"
+					:select="selectRow"></data-table>
 			</div>
 		</div>
-		<div v-show="model" class="row">
+		<div v-show="model"
+			class="row">
 			<div class="col-md-5 col-md-offset-1">
 				<div class="control-buttons text-center">
-					<button @click="newModel" class="btn btn-default new">
-						<i class="fa fa-plus"></i>New</button>
-					<button @click="saveModel" class="btn btn-primary save">
+					<button @click="newModel"
+						class="btn btn-default new">
+						<i class="fa fa-plus"></i>New
+					</button>
+					<button @click="saveModel"
+						class="btn btn-primary save">
 						<i class="fa fa-floppy-o"></i>Save
-						<i v-if="showWarning()" class="fa fa-warning"></i>
+						<i v-if="showWarning()"
+							class="fa fa-warning"></i>
+					</button>
+					<button @click="deleteModel"
+						class="btn btn-danger delete">
+						<i class="fa fa-trash"></i>Delete
 					</button>
-					<button @click="deleteModel" class="btn btn-danger delete">
-						<i class="fa fa-trash"></i>Delete</button>
 				</div>
 				<div class="errors text-center">
-					<div v-for="(item, index) in validationErrors" :key="index" class="alert alert-danger">{{ item.field.label}}:
+					<div v-for="(item, index) in validationErrors"
+						:key="index"
+						class="alert alert-danger">{{ item.field.label }}:
 						<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 :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>
diff --git a/dev/projects/grouping/app.vue b/dev/projects/grouping/app.vue
index 91b52ab7..67c09c65 100644
--- a/dev/projects/grouping/app.vue
+++ b/dev/projects/grouping/app.vue
@@ -3,7 +3,10 @@
 		<h1>Grouping</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"
+					tag="section"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/dev/projects/multi/app.vue b/dev/projects/multi/app.vue
index 3940d979..e462eab2 100644
--- a/dev/projects/multi/app.vue
+++ b/dev/projects/multi/app.vue
@@ -3,12 +3,24 @@
 		<h1>Multi</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions" ref="form1" :is-new-model="isNewModel" @model-updated="modelUpdated1" @validated="onValidated1"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"
+					ref="form1"
+					:is-new-model="isNewModel"
+					@model-updated="modelUpdated1"
+					@validated="onValidated1"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema2" :model="model" :options="formOptions" ref="form2" :is-new-model="isNewModel" @model-updated="modelUpdated2" @validated="onValidated2"></vue-form-generator>
+				<vue-form-generator :schema="schema2"
+					:model="model"
+					:options="formOptions"
+					ref="form2"
+					:is-new-model="isNewModel"
+					@model-updated="modelUpdated2"
+					@validated="onValidated2"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/dev/projects/multiselect/app.vue b/dev/projects/multiselect/app.vue
index 69600b21..67be1518 100644
--- a/dev/projects/multiselect/app.vue
+++ b/dev/projects/multiselect/app.vue
@@ -3,7 +3,9 @@
 		<h1>Multiselect</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/dev/projects/picker/app.vue b/dev/projects/picker/app.vue
index 3631f83b..510d2d0a 100644
--- a/dev/projects/picker/app.vue
+++ b/dev/projects/picker/app.vue
@@ -3,7 +3,9 @@
 		<h1>Picker</h1>
 		<div class="row">
 			<div class="col-sm-12">
-				<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
+				<vue-form-generator :schema="schema"
+					:model="model"
+					:options="formOptions"></vue-form-generator>
 			</div>
 		</div>
 		<div class="row">
diff --git a/package-lock.json b/package-lock.json
index 17bafdca..26ec4e9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -832,29 +832,11 @@
       }
     },
     "@sinonjs/samsam": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.1.tgz",
-      "integrity": "sha512-7oX6PXMulvdN37h88dvlvRyu61GYZau40fL4wEZvPEHvrjpJc3lDv6xDM5n4Z0StufUVB5nDvVZUM+jZHdMOOQ==",
-      "dev": true,
-      "requires": {
-        "array-from": "2.1.1"
-      }
-    },
-    "@types/babel-types": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.4.tgz",
-      "integrity": "sha512-WiZhq3SVJHFRgRYLXvpf65XnV6ipVHhnNaNvE8yCimejrGglkg38kEj0JcizqwSHxmPSjcTlig/6JouxLGEhGw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.2.tgz",
+      "integrity": "sha512-ZwTHAlC9akprWDinwEPD4kOuwaYZlyMwVJIANsKNC3QVp0AHB04m7RnB4eqeWfgmxw8MGTzS9uMaw93Z3QcZbw==",
       "dev": true
     },
-    "@types/babylon": {
-      "version": "6.16.3",
-      "resolved": "https://registry.npmjs.org/@types/babylon/-/babylon-6.16.3.tgz",
-      "integrity": "sha512-lyJ8sW1PbY3uwuvpOBZ9zMYKshMnQpXmeDHh8dj9j2nJm/xrW0FgB5gLSYOArj5X0IfaXnmhFoJnhS4KbqIMug==",
-      "dev": true,
-      "requires": {
-        "@types/babel-types": "7.0.4"
-      }
-    },
     "@vue/babel-preset-app": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-3.0.4.tgz",
@@ -1442,17 +1424,6 @@
       "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=",
       "dev": true
     },
-    "align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
-      "dev": true,
-      "requires": {
-        "kind-of": "3.2.2",
-        "longest": "1.0.1",
-        "repeat-string": "1.6.1"
-      }
-    },
     "alphanum-sort": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
@@ -1941,12 +1912,6 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
-    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -3290,16 +3255,6 @@
         }
       }
     },
-    "center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-      "dev": true,
-      "requires": {
-        "align-text": "0.1.4",
-        "lazy-cache": "1.0.4"
-      }
-    },
     "chai": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz",
@@ -3325,15 +3280,6 @@
         "supports-color": "5.5.0"
       }
     },
-    "character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
-      "dev": true,
-      "requires": {
-        "is-regex": "1.0.4"
-      }
-    },
     "chardet": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
@@ -3900,26 +3846,6 @@
         "bluebird": "3.5.2"
       }
     },
-    "constantinople": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz",
-      "integrity": "sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==",
-      "dev": true,
-      "requires": {
-        "@types/babel-types": "7.0.4",
-        "@types/babylon": "6.16.3",
-        "babel-types": "6.26.0",
-        "babylon": "6.18.0"
-      },
-      "dependencies": {
-        "babylon": {
-          "version": "6.18.0",
-          "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-          "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-          "dev": true
-        }
-      }
-    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -5322,12 +5248,6 @@
         "esutils": "2.0.2"
       }
     },
-    "doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=",
-      "dev": true
-    },
     "dom-converter": {
       "version": "0.1.4",
       "resolved": "http://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -9033,24 +8953,6 @@
         "is-primitive": "2.0.0"
       }
     },
-    "is-expression": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz",
-      "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=",
-      "dev": true,
-      "requires": {
-        "acorn": "4.0.13",
-        "object-assign": "4.1.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "4.0.13",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-          "dev": true
-        }
-      }
-    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -9541,12 +9443,6 @@
         "easy-stack": "1.0.0"
       }
     },
-    "js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
-      "dev": true
-    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -9737,16 +9633,6 @@
         "verror": "1.10.0"
       }
     },
-    "jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
-      "dev": true,
-      "requires": {
-        "is-promise": "2.1.0",
-        "promise": "7.3.1"
-      }
-    },
     "just-extend": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-3.0.0.tgz",
@@ -9805,12 +9691,6 @@
         "launch-editor": "2.2.1"
       }
     },
-    "lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-      "dev": true
-    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
@@ -13865,15 +13745,6 @@
       "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=",
       "dev": true
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "requires": {
-        "asap": "2.0.6"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -13921,189 +13792,6 @@
         "randombytes": "2.0.6"
       }
     },
-    "pug": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.3.tgz",
-      "integrity": "sha1-ccuoJTfJWl6rftBGluQiH1Oqh44=",
-      "dev": true,
-      "requires": {
-        "pug-code-gen": "2.0.1",
-        "pug-filters": "3.1.0",
-        "pug-lexer": "4.0.0",
-        "pug-linker": "3.0.5",
-        "pug-load": "2.0.11",
-        "pug-parser": "5.0.0",
-        "pug-runtime": "2.0.4",
-        "pug-strip-comments": "1.0.3"
-      }
-    },
-    "pug-attrs": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.3.tgz",
-      "integrity": "sha1-owlflw5kFR972tlX7vVftdeQXRU=",
-      "dev": true,
-      "requires": {
-        "constantinople": "3.1.2",
-        "js-stringify": "1.0.2",
-        "pug-runtime": "2.0.4"
-      }
-    },
-    "pug-code-gen": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.1.tgz",
-      "integrity": "sha1-CVHsgyJddNjPxHan+Zolm199BQw=",
-      "dev": true,
-      "requires": {
-        "constantinople": "3.1.2",
-        "doctypes": "1.1.0",
-        "js-stringify": "1.0.2",
-        "pug-attrs": "2.0.3",
-        "pug-error": "1.3.2",
-        "pug-runtime": "2.0.4",
-        "void-elements": "2.0.1",
-        "with": "5.1.1"
-      }
-    },
-    "pug-error": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.2.tgz",
-      "integrity": "sha1-U659nSm7A89WRJOgJhCfVMR/XyY=",
-      "dev": true
-    },
-    "pug-filters": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.0.tgz",
-      "integrity": "sha1-JxZVVbwEwjbkqisDZiRt+gIbYm4=",
-      "dev": true,
-      "requires": {
-        "clean-css": "4.2.1",
-        "constantinople": "3.1.2",
-        "jstransformer": "1.0.0",
-        "pug-error": "1.3.2",
-        "pug-walk": "1.1.7",
-        "resolve": "1.8.1",
-        "uglify-js": "2.8.29"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-          "dev": true
-        },
-        "cliui": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
-          "dev": true,
-          "requires": {
-            "center-align": "0.1.3",
-            "right-align": "0.1.3",
-            "wordwrap": "0.0.2"
-          }
-        },
-        "uglify-js": {
-          "version": "2.8.29",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
-          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
-          "dev": true,
-          "requires": {
-            "source-map": "0.5.7",
-            "uglify-to-browserify": "1.0.2",
-            "yargs": "3.10.0"
-          }
-        },
-        "wordwrap": {
-          "version": "0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "3.10.0",
-          "resolved": "http://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-          "dev": true,
-          "requires": {
-            "camelcase": "1.2.1",
-            "cliui": "2.1.0",
-            "decamelize": "1.2.0",
-            "window-size": "0.1.0"
-          }
-        }
-      }
-    },
-    "pug-lexer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.0.0.tgz",
-      "integrity": "sha1-IQwYRX7y4XYCQnQMXmR715TOwng=",
-      "dev": true,
-      "requires": {
-        "character-parser": "2.2.0",
-        "is-expression": "3.0.0",
-        "pug-error": "1.3.2"
-      }
-    },
-    "pug-linker": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.5.tgz",
-      "integrity": "sha1-npp65ABWgtAn3uuWsAD4juuDoC8=",
-      "dev": true,
-      "requires": {
-        "pug-error": "1.3.2",
-        "pug-walk": "1.1.7"
-      }
-    },
-    "pug-load": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.11.tgz",
-      "integrity": "sha1-5kjlftET/iwfRdV4WOorrWvAFSc=",
-      "dev": true,
-      "requires": {
-        "object-assign": "4.1.1",
-        "pug-walk": "1.1.7"
-      }
-    },
-    "pug-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.0.tgz",
-      "integrity": "sha1-45Stmz/KkxI5QK/4hcBuRKt+aOQ=",
-      "dev": true,
-      "requires": {
-        "pug-error": "1.3.2",
-        "token-stream": "0.0.1"
-      }
-    },
-    "pug-plain-loader": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pug-plain-loader/-/pug-plain-loader-1.0.0.tgz",
-      "integrity": "sha512-mDfq/qvJJ0xdug38mZ1ObW0BQTx9kAHnKqotXC+C00XQkKmsWaMe90JUg/kN4lS6MU7tpVsMZ+rmcnBSPfDtHA==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "1.1.0"
-      }
-    },
-    "pug-runtime": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.4.tgz",
-      "integrity": "sha1-4XjhvaaKsujArPybztLFT9iM61g=",
-      "dev": true
-    },
-    "pug-strip-comments": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.3.tgz",
-      "integrity": "sha1-8VWVkiBu3G+FMQ2s9K+0igJa9Z8=",
-      "dev": true,
-      "requires": {
-        "pug-error": "1.3.2"
-      }
-    },
-    "pug-walk": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.1.7.tgz",
-      "integrity": "sha1-wA1cUSi6xYBr7BXSt+fNq+QlMfM=",
-      "dev": true
-    },
     "pump": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
@@ -14261,12 +13949,6 @@
         }
       }
     },
-    "raw-loader": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
-      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
-      "dev": true
-    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -15136,15 +14818,6 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
-    "right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-      "dev": true,
-      "requires": {
-        "align-text": "0.1.4"
-      }
-    },
     "rimraf": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -15666,14 +15339,14 @@
       }
     },
     "sinon": {
-      "version": "6.3.4",
-      "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.3.4.tgz",
-      "integrity": "sha512-NIaR56Z1mefuRBXYrf4otqBxkWiKveX+fvqs3HzFq2b07HcgpkMgIwmQM/owNjNFAHkx0kJXW+Q0mDthiuslXw==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-6.3.5.tgz",
+      "integrity": "sha512-xgoZ2gKjyVRcF08RrIQc+srnSyY1JDJtxu3Nsz07j1ffjgXoY6uPLf/qja6nDBZgzYYEovVkFryw2+KiZz11xQ==",
       "dev": true,
       "requires": {
         "@sinonjs/commons": "1.0.2",
         "@sinonjs/formatio": "3.0.0",
-        "@sinonjs/samsam": "2.1.1",
+        "@sinonjs/samsam": "2.1.2",
         "diff": "3.5.0",
         "lodash.get": "4.4.2",
         "lolex": "2.7.5",
@@ -16667,12 +16340,6 @@
         }
       }
     },
-    "token-stream": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz",
-      "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=",
-      "dev": true
-    },
     "topo": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/topo/-/topo-3.0.0.tgz",
@@ -16843,13 +16510,6 @@
         }
       }
     },
-    "uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
-      "optional": true
-    },
     "uglifyjs-webpack-plugin": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz",
@@ -17304,29 +16964,12 @@
         "indexof": "0.0.1"
       }
     },
-    "void-elements": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
-      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
-      "dev": true
-    },
     "vue": {
       "version": "2.5.17",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==",
       "dev": true
     },
-    "vue-cli-plugin-pug": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/vue-cli-plugin-pug/-/vue-cli-plugin-pug-1.0.7.tgz",
-      "integrity": "sha512-xiu+6VxAvrA/6Aw2hnDTWCBkmL8lLerlNcwTSmjxr2rPTs+CLJj4h2xwzk+eClFUY6+JJRGlIixLPHzvqBSb6w==",
-      "dev": true,
-      "requires": {
-        "pug": "2.0.3",
-        "pug-plain-loader": "1.0.0",
-        "raw-loader": "0.5.1"
-      }
-    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -17391,9 +17034,9 @@
       }
     },
     "vue-multiselect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.2.tgz",
-      "integrity": "sha512-pTJ8s7DYhvvWxolexPfNBPjpF5x7rFa3mwhqgDFZrNxDkyQvY6g7FWuY+IsbqT4LBF4uL6p7q0nh3Q4vobWW0w==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.3.tgz",
+      "integrity": "sha512-ANLvoLEZv5uzissmh2WSHTn8DGhqsKi6zVtctpf1wnGK6vmZBktQZzeuHGxH7KpIb+4A6BlXmq0RR08jtQ67tg==",
       "dev": true
     },
     "vue-style-loader": {
@@ -18253,47 +17896,6 @@
         "string-width": "2.1.1"
       }
     },
-    "window-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true
-    },
-    "with": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz",
-      "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=",
-      "dev": true,
-      "requires": {
-        "acorn": "3.3.0",
-        "acorn-globals": "3.1.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
-          "dev": true
-        },
-        "acorn-globals": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
-          "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
-          "dev": true,
-          "requires": {
-            "acorn": "4.0.13"
-          },
-          "dependencies": {
-            "acorn": {
-              "version": "4.0.13",
-              "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-              "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/package.json b/package.json
index 28161965..a1a7a5ca 100644
--- a/package.json
+++ b/package.json
@@ -82,11 +82,11 @@
 		"nyc": "13.0.1",
 		"pikaday": "1.7.0",
 		"sass-loader": "7.1.0",
-		"sinon": "6.3.4",
+		"sinon": "6.3.5",
 		"vue": "2.5.17",
-		"vue-highlightjs": "^1.3.3",
+		"vue-highlightjs": "1.3.3",
 		"vue-markdown": "2.2.4",
-		"vue-multiselect": "2.1.2",
+		"vue-multiselect": "2.1.3",
 		"vue-template-compiler": "2.5.17"
 	},
 	"eslintConfig": {
@@ -97,7 +97,7 @@
 		},
 		"extends": [
 			"eslint:recommended",
-			"plugin:vue/essential",
+			"plugin:vue/strongly-recommended",
 			"@vue/prettier"
 		],
 		"rules": {
@@ -133,6 +133,49 @@
 			"eqeqeq": [
 				2,
 				"smart"
+			],
+			"vue/name-property-casing": [
+				0,
+				"kebab-case"
+			],
+			"vue/max-attributes-per-line": [
+				2,
+				{
+					"singleline": 1,
+					"multiline": {
+						"max": 1,
+						"allowFirstLine": true
+					}
+				}
+			],
+			"vue/html-closing-bracket-newline": [
+				2,
+				{
+					"singleline": "never",
+					"multiline": "never"
+				}
+			],
+			"vue/html-self-closing": [
+				2,
+				{
+					"html": {
+						"void": "never",
+						"normal": "never",
+						"component": "never"
+					},
+					"svg": "never",
+					"math": "never"
+				}
+			],
+			"vue/html-indent": [
+				2,
+				"tab",
+				{
+					"attribute": 1,
+					"closeBracket": 0,
+					"alignAttributesVertically": true,
+					"ignores": []
+				}
 			]
 		},
 		"parserOptions": {
diff --git a/src/fields/optional/fieldNoUiSlider.vue b/src/fields/optional/fieldNoUiSlider.vue
index 3dd5b868..1cd1fed3 100644
--- a/src/fields/optional/fieldNoUiSlider.vue
+++ b/src/fields/optional/fieldNoUiSlider.vue
@@ -1,5 +1,7 @@
 <template>
-	<div class="slider" :disabled="disabled" :class="{ 'contain-pips': containPips, 'contain-tooltip': containTooltip }"></div>
+	<div class="slider"
+		:disabled="disabled"
+		:class="{ 'contain-pips': containPips, 'contain-tooltip': containTooltip }"></div>
 </template>
 
 <script>
diff --git a/src/formElement.vue b/src/formElement.vue
index 86ab3105..2ad8cbbc 100644
--- a/src/formElement.vue
+++ b/src/formElement.vue
@@ -1,23 +1,57 @@
 <template>
-	<div class="form-element" :class="[fieldRowClasses]">
-		<label v-if="fieldTypeHasLabel" :for="fieldID" :class="field.labelClasses">
-			<slot name="label" :field="field" :getValueFromOption="getValueFromOption"></slot>
-			<slot name="help" :field="field" :getValueFromOption="getValueFromOption"></slot>
+	<div
+		class="form-element"
+		:class="[fieldRowClasses]">
+		<label
+			v-if="fieldTypeHasLabel"
+			:for="fieldID"
+			:class="field.labelClasses">
+			<slot
+				name="label"
+				:field="field"
+				:getValueFromOption="getValueFromOption"></slot>
+			<slot
+				name="help"
+				:field="field"
+				:getValueFromOption="getValueFromOption"></slot>
 		</label>
 
 		<div class="field-wrap">
-			<component ref="child" :is="fieldType" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" :fieldID="fieldID" @field-touched="onFieldTouched" @errors-updated="onChildValidated"></component>
-			<div v-if="buttonsAreVisible" class="buttons">
-				<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label"></button>
+			<component
+				ref="child"
+				:is="fieldType"
+				:model="model"
+				:schema="field"
+				:form-options="options"
+				:event-bus="eventBus"
+				:field-id="fieldID"
+				@field-touched="onFieldTouched"
+				@errors-updated="onChildValidated"></component>
+			<div
+				v-if="buttonsAreVisible"
+				class="buttons">
+				<button
+					v-for="(btn, index) in field.buttons"
+					@click="buttonClickHandler(btn, field, $event)"
+					:class="btn.classes"
+					:key="index"
+					v-text="btn.label"></button>
 			</div>
 		</div>
 
 		<template v-if="fieldHasHint">
-			<slot name="hint" :field="field" :getValueFromOption="getValueFromOption"></slot>
+			<slot
+				name="hint"
+				:field="field"
+				:getValueFromOption="getValueFromOption"></slot>
 		</template>
 
 		<template v-if="fieldHasErrors">
-			<slot name="errors" :childErrors="childErrors" :field="field" :getValueFromOption="getValueFromOption" ></slot>
+			<slot
+				name="errors"
+				:childErrors="childErrors"
+				:field="field"
+				:getValueFromOption="getValueFromOption" ></slot>
 		</template>
 	</div>
 </template>
@@ -31,20 +65,32 @@ export default {
 	mixins: [formMixin],
 	props: {
 		model: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 		options: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 		field: {
 			type: Object,
 			required: true
 		},
 		errors: {
-			type: Array
+			type: Array,
+			default() {
+				return [];
+			}
 		},
 		eventBus: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		}
 	},
 	data() {
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index f060bf50..e6bfee6e 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,34 +1,79 @@
 <template>
-	<div class="vue-form-generator" v-if='schema != null'>
-		<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus">
-			<template slot="element" slot-scope="slotProps">
-				<form-element :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="eventBus">
-
-					<template slot="label" slot-scope="{ field, getValueFromOption }">
-						<slot name="label" :field="field" :getValueFromOption="getValueFromOption">
+	<div
+		class="vue-form-generator"
+		v-if='schema != null'>
+		<form-group
+			:tag="tag"
+			:fields="fields"
+			:model="model"
+			:options="options"
+			:errors="errors"
+			:event-bus="eventBus">
+			<template
+				slot="element"
+				slot-scope="slotProps">
+				<form-element
+					:field="slotProps.field"
+					:model="slotProps.model"
+					:options="slotProps.options"
+					:errors="slotProps.errors"
+					:event-bus="eventBus">
+
+					<template
+						slot="label"
+						slot-scope="{ field, getValueFromOption }">
+						<slot
+							name="label"
+							:field="field"
+							:getValueFromOption="getValueFromOption">
 							<span v-html="field.label"></span>
 						</slot>
 					</template>
 
-					<template slot="help" slot-scope="{ field, getValueFromOption }">
-						<slot name="help" :field="field" :getValueFromOption="getValueFromOption">
-							<span v-if='field.help' class="help">
+					<template
+						slot="help"
+						slot-scope="{ field, getValueFromOption }">
+						<slot
+							name="help"
+							:field="field"
+							:getValueFromOption="getValueFromOption">
+							<span
+								v-if='field.help'
+								class="help">
 								<i class="icon"></i>
-								<div class="helpText" v-html='field.help'></div>
+								<div
+									class="helpText"
+									v-html='field.help'></div>
 							</span>
 						</slot>
 					</template>
 
-					<template slot="hint" slot-scope="{ field, getValueFromOption }">
-						<slot name="hint" :field="field" :getValueFromOption="getValueFromOption">
-							<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
+					<template
+						slot="hint"
+						slot-scope="{ field, getValueFromOption }">
+						<slot
+							name="hint"
+							:field="field"
+							:getValueFromOption="getValueFromOption">
+							<div
+								class="hint"
+								v-html="getValueFromOption(field, 'hint', undefined)"></div>
 						</slot>
 					</template>
 
-					<template slot="errors" slot-scope="{ childErrors, field, getValueFromOption }">
-						<slot name="errors" :errors="childErrors" :field="field" :getValueFromOption="getValueFromOption">
+					<template
+						slot="errors"
+						slot-scope="{ childErrors, field, getValueFromOption }">
+						<slot
+							name="errors"
+							:errors="childErrors"
+							:field="field"
+							:getValueFromOption="getValueFromOption">
 							<div class="errors help-block">
-								<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
+								<span
+									v-for="(error, index) in childErrors"
+									:key="index"
+									v-html="error"></span>
 							</div>
 						</slot>
 					</template>
@@ -50,11 +95,17 @@ export default {
 	components: { formGroup, formElement },
 	props: {
 		schema: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 
 		model: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 
 		options: {
diff --git a/src/formGroup.vue b/src/formGroup.vue
index ac0bb1c4..7b7592b4 100644
--- a/src/formGroup.vue
+++ b/src/formGroup.vue
@@ -1,18 +1,39 @@
 <template>
-	<fieldset v-if="fields" :is="tag" :class="[groupRowClasses, validationClass]" ref="group">
+	<fieldset v-if="fields"
+		:is="tag"
+		:class="[groupRowClasses, validationClass]"
+		ref="group">
 
 		<legend v-if="groupLegend">{{ groupLegend }}</legend>
 		<template v-for="(field, index) in fields">
 			<template v-if="fieldVisible(field)">
 				<template v-if="field.type === 'group'">
-					<form-group :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index">
-						<template slot="element" slot-scope="slotProps">
-							<slot name="element" :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="slotProps.eventBus"></slot>
+					<form-group :fields="field.fields"
+						:group="field"
+						:tag="getGroupTag(field)"
+						:model="model"
+						:options="options"
+						:errors="errors"
+						:event-bus="eventBus"
+						:key="index">
+						<template slot="element"
+							slot-scope="slotProps">
+							<slot name="element"
+								:field="slotProps.field"
+								:model="slotProps.model"
+								:options="slotProps.options"
+								:errors="slotProps.errors"
+								:eventBus="slotProps.eventBus"></slot>
 						</template>
 					</form-group>
 				</template>
 				<template v-else>
-					<slot name="element" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></slot>
+					<slot name="element"
+						:field="field"
+						:model="model"
+						:options="options"
+						:errors="errors"
+						:eventBus="eventBus"></slot>
 				</template>
 			</template>
 		</template>
@@ -26,8 +47,18 @@ export default {
 	name: "form-group",
 	mixins: [formMixin],
 	props: {
-		fields: { type: Array },
-		group: { type: Object },
+		fields: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		group: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
 		tag: {
 			type: String,
 			default: "fieldset",
@@ -37,16 +68,28 @@ export default {
 		},
 
 		model: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 		options: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		},
 		errors: {
-			type: Array
+			type: Array,
+			default() {
+				return [];
+			}
 		},
 		eventBus: {
-			type: Object
+			type: Object,
+			default() {
+				return {};
+			}
 		}
 	},
 	data() {
diff --git a/tests/unit/specs/VueFormGenerator.spec.js b/tests/unit/specs/VueFormGenerator.spec.js
index b316838c..bdbf68ad 100644
--- a/tests/unit/specs/VueFormGenerator.spec.js
+++ b/tests/unit/specs/VueFormGenerator.spec.js
@@ -148,7 +148,7 @@ describe("VueFormGenerator.vue", () => {
 				]
 			};
 			createFormGenerator({ schema });
-			formGenerator = wrapper.find({ name: "formGenerator" });
+			formGenerator = wrapper.find({ name: "form-generator" });
 			formElement = wrapper.find({ name: "form-element" });
 		});
 
@@ -197,7 +197,7 @@ describe("VueFormGenerator.vue", () => {
 					validationErrorClass: "has-error"
 				};
 				createFormGenerator({ schema, options });
-				formGenerator = wrapper.find({ name: "formGenerator" });
+				formGenerator = wrapper.find({ name: "form-generator" });
 				formElement = wrapper.find({ name: "form-element" });
 			});
 
@@ -908,7 +908,7 @@ describe("VueFormGenerator.vue", () => {
 
 		beforeEach(() => {
 			createFormGenerator({ schema, model });
-			formGenerator = wrapper.find({ name: "formGenerator" });
+			formGenerator = wrapper.find({ name: "form-generator" });
 			form = formGenerator.vm;
 		});
 
@@ -1015,7 +1015,7 @@ describe("VueFormGenerator.vue", () => {
 				{ onValidated },
 				`<vue-form-generator :schema="schema" :model="model" :options="options" :multiple="false" ref="form" @validated="onValidated"></vue-form-generator>`
 			);
-			formGenerator = wrapper.find({ name: "formGenerator" });
+			formGenerator = wrapper.find({ name: "form-generator" });
 			form = formGenerator.vm;
 			field = form.$children[0];
 		});
@@ -1099,7 +1099,7 @@ describe("VueFormGenerator.vue", () => {
 				{ onValidated: onValidated },
 				`<vue-form-generator :schema="schema" :model="model" :options="options" :multiple="false" ref="form" @validated="onValidated"></vue-form-generator>`
 			);
-			formGenerator = wrapper.find({ name: "formGenerator" });
+			formGenerator = wrapper.find({ name: "form-generator" });
 			form = formGenerator.vm;
 			field = formGenerator.find({ name: "form-element" }).vm.$children[0];
 		});
@@ -1185,7 +1185,7 @@ describe("VueFormGenerator.vue", () => {
 					</template>
 				</vue-form-generator>`
 			);
-			formGenerator = wrapper.find({ name: "formGenerator" });
+			formGenerator = wrapper.find({ name: "form-generator" });
 			form = formGenerator.vm;
 		});