update form-element and add slots to fields

Author: gwenaelp

package-lock.json

@@ -73,7 +73,7 @@
     "nyc": "13.1.0",
     "pikaday": "1.8.0",
     "sinon": "7.0.0",
-    "vue": "2.5.17",
+    "vue": "^3.2.36",
     "vue-highlightjs": "1.3.3",
     "vue-markdown": "2.2.4",
     "vue-multiselect": "2.1.3",
@@ -86,5 +86,8 @@
   ],
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "tiny-emitter": "^2.1.0"
   }
 }

package.json

@@ -0,0 +1,25 @@
+import Emitter from 'tiny-emitter';
+
+class CustomEmitter {
+  constructor() {
+    this.emitter = new Emitter();
+  }
+
+  $on(...args) {
+    this.emitter.on(...args);
+  }
+
+  $once(...args) {
+    this.emitter.once(...args);
+  }
+
+  $off(...args) {
+    this.emitter.off(...args);
+  }
+
+  $emit(...args) {
+    this.emitter.emit(...args);
+  }
+}
+
+export default CustomEmitter;

src/EventBus.js

@@ -1,6 +1,7 @@
 import { get as objGet, forEach, isFunction, isString, isArray, debounce, isNil, uniqueId } from "lodash";
 import validators from "../utils/validators";
 import { slugifyFormID } from "../utils/schema";
+//import { reactive } from 'vue';
 
 const convertValidator = (validator) => {
 	if (isString(validator)) {
@@ -14,7 +15,8 @@ const convertValidator = (validator) => {
 };
 
 function attributesDirective(el, binding, vnode) {
-	let attrs = vnode.context.schema && vnode.context.schema.attributes ? vnode.context.schema.attributes : {};
+	let attrs = vnode.context && vnode.context.schema && vnode.context.schema.attributes ? vnode.context.schema.attributes : {};
+
 	let container = binding.value || "input";
 	if (isString(container)) {
 		attrs = objGet(attrs, container) || attrs;
@@ -251,6 +253,10 @@ export default {
 		},
 
 		clearValidationErrors() {
+			if (this.errors === undefined || this.errors.splice === undefined) {
+				console.warn('no this.errors in AbstractField');
+				return;
+			}
 			this.errors.splice(0);
 		},
 
@@ -273,12 +279,16 @@ export default {
 						o = o[k];
 					} else {
 						// Create missing property (new level)
-						this.$root.$set(o, k, {});
+						//TODO disabled for vue 3 migration
+						//this.$root.$set(o, k, {});
+						o[k] = {};
 						o = o[k];
 					}
 				else {
 					// Set final property value
-					this.$root.$set(o, k, value);
+					o[k] = value;
+					//TODO disabled for vue 3 migration
+					//this.$root.$set(o, k, value);
 					return;
 				}
 
@@ -354,7 +364,7 @@ export default {
 			}*/
 		}
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.eventBus.$off("clear-validation-errors", this.clearValidationErrors);
 		this.eventBus.$off("validate-fields", this.validate);
 		this.eventBus.$emit("field-deregistering", this);

src/fields/abstractField.js

@@ -18,7 +18,7 @@ export default {
 	mixins: [abstractField],
 	computed: {
 		randomId() {
-			return this.fieldId + '-' + Math.trunc(Math.random()*100000);
+			return this.fieldID + '-' + Math.trunc(Math.random()*100000);
 		}
 	}
 };

src/fields/core/fieldCheckbox.vue

@@ -2,24 +2,30 @@
 	<div class="form-element" 
 		:class="[fieldRowClasses]"
 		:style="field.wrapperStyle">
+		<slot name="wrapper-hook"
+			:field="field"
+			:getValueFromOption="getValueFromOption"
+		/>
 		<label
 			v-if="fieldTypeHasLabel"
 			:for="fieldID"
 			:style="field.labelStyle"
 			:class="field.labelClasses">
 			<slot name="label" 
-				:field="field" 
+				:field="field"
+				:fieldID="fieldID"
+				:fieldComponent="fieldComponent"
 				:getValueFromOption="getValueFromOption"
 			/>
 			<slot name="help" 
 				:field="field" 
 				:getValueFromOption="getValueFromOption"
 			/>
 		</label>
-
 		<div class="field-wrap" :style="field.fieldStyle">
 			<component
 				ref="child"
+				v-if="fieldFound"
 				:is="fieldType"
 				:model="model"
 				:schema="field"
@@ -29,6 +35,14 @@
 				@field-touched="onFieldTouched"
 				@errors-updated="onChildValidated"
 			/>
+			<div v-else class="field-not-found">
+				<slot name="field-not-found"
+					:field="field"
+					:getValueFromOption="getValueFromOption"
+				>
+					Field not found
+				</slot>
+			</div>
 			<div
 				v-if="buttonsAreVisible"
 				class="buttons">
@@ -63,6 +77,7 @@
 import { isNil } from "lodash";
 import { slugifyFormID } from "./utils/schema";
 import formMixin from "./formMixin.js";
+import { resolveComponent } from 'vue';
 
 export default {
 	name: "form-element",
@@ -102,6 +117,9 @@ export default {
 		};
 	},
 	computed: {
+		fieldComponent() {
+			return this;
+		},
 		fieldID() {
 			const idPrefix = this.options.fieldIdPrefix || "";
 			return slugifyFormID(this.field, idPrefix);
@@ -110,6 +128,12 @@ export default {
 		fieldType() {
 			return "field-" + this.field.type;
 		},
+		fieldFound() {
+			if(this.field && this.field.type) {
+				const capitalized = this.field.type.charAt(0).toUpperCase() + this.field.type.slice(1)
+				return !!resolveComponent('Field' + capitalized);
+			}
+		},
 		// Should field type have a label?
 		fieldTypeHasLabel() {
 			if (isNil(this.field.label)) {

src/formElement.vue

@@ -1,15 +1,19 @@
 <template>
 	<div class="vue-form-generator" 
 		v-if='schema != null'>
-		<form-group
+		<vfg-form-group
 			:tag="tag"
 			:fields="fields"
 			:model="model"
 			:options="options"
 			:errors="errors"
 			:event-bus="eventBus">
-			<template slot="group-legend" 
-				slot-scope="{ group, groupLegend }" >
+			<template #field-invisible="{ field }">
+				<slot name="field-invisible"
+					:field="field"
+				/>
+			</template>
+			<template #group-legend="{ group, groupLegend }">
 				<slot name="group-legend" 
 					:group="group" 
 					:group-legend="groupLegend" >
@@ -18,8 +22,7 @@
 					</legend>
 				</slot>
 			</template>
-			<template slot="group-help" 
-				slot-scope="{ group }">
+			<template #group-help="{ group }">
 				<slot
 					name="group-help"
 					:group="group">
@@ -31,27 +34,30 @@
 					</span>
 				</slot>
 			</template>
-			<template slot="element" 
-				slot-scope="slotProps">
-				<form-element
+			<template #element="slotProps">
+				<vfg-form-element
 					:field="slotProps.field"
 					:model="slotProps.model"
 					:options="slotProps.options"
 					:errors="slotProps.errors"
 					:event-bus="eventBus">
-
-					<template slot="label" 
-						slot-scope="{ field, getValueFromOption }">
+					<template #label="{ field, getValueFromOption }">
 						<slot
 							name="label"
 							:field="field"
 							:getValueFromOption="getValueFromOption">
 							<span v-html="field.label" ></span>
 						</slot>
 					</template>
+					<template #wrapper-hook="{ field, getValueFromOption }">
+						<slot
+							name="wrapper-hook"
+							:field="field"
+							:getValueFromOption="getValueFromOption">
+						</slot>
+					</template>
 
-					<template slot="help" 
-						slot-scope="{ field, getValueFromOption }">
+					<template #help="{ field, getValueFromOption }">
 						<slot
 							name="help"
 							:field="field"
@@ -64,8 +70,14 @@
 							</span>
 						</slot>
 					</template>
-					<template slot="hint" 
-						slot-scope="{ field, getValueFromOption }">
+					<template #field-not-found="{ field, getValueFromOption }">
+						<slot
+							name="field-not-found"
+							:field="field"
+							:getValueFromOption="getValueFromOption"
+						/>
+					</template>
+					<template #hint="{ field, getValueFromOption }">
 						<slot
 							name="hint"
 							:field="field"
@@ -75,8 +87,7 @@
 						</slot>
 					</template>
 
-					<template slot="errors" 
-						slot-scope="{ childErrors, field, getValueFromOption }">
+					<template #errors="{ childErrors, field, getValueFromOption }">
 						<slot
 							name="errors"
 							:errors="childErrors"
@@ -90,20 +101,20 @@
 							</div>
 						</slot>
 					</template>
-				</form-element>
+				</vfg-form-element>
 			</template>
-		</form-group>
+		</vfg-form-group>
 	</div>
 </template>
 
 <script>
-import Vue from "vue";
 import formGroup from "./formGroup.vue";
 import formElement from "./formElement.vue";
+import EventBus from './EventBus';
 
 export default {
 	name: "form-generator",
-	components: { formGroup, formElement },
+	components: { 'vfg-form-group': formGroup, 'vfg-form-element': formElement },
 	props: {
 		schema: {
 			type: Object,
@@ -147,9 +158,8 @@ export default {
 	},
 
 	data() {
-		const eventBus = new Vue();
 		return {
-			eventBus,
+			eventBus: new EventBus(),
 			totalNumberOfFields: 0,
 			errors: [] // Validation errors
 		};
@@ -231,7 +241,7 @@ export default {
 
 				let formErrors = [];
 
-				this.eventBus.$on("field-deregistering", () => {
+				this.eventBus.$on("field-deregistering", (...args) => {
 					// console.warn("Fields were deleted during validation process");
 					this.eventBus.$emit("fields-validation-terminated", formErrors);
 					reject(formErrors);
@@ -269,7 +279,11 @@ export default {
 
 		// Clear validation errors
 		clearValidationErrors() {
-			this.errors.splice(0);
+			if (this.errors === undefined) {
+				console.warn('no this.errors in AbstractField');
+			} else {
+				this.errors.splice(0);
+			}
 			this.eventBus.$emit("clear-validation-errors", this.clearValidationErrors);
 		}
 	},
@@ -283,7 +297,7 @@ export default {
 		this.eventBus.$on("field-registering", () => {
 			this.totalNumberOfFields = this.totalNumberOfFields + 1;
 		});
-		this.eventBus.$on("field-deregistering", () => {
+		this.eventBus.$on("field-deregistering", (f) => {
 			this.totalNumberOfFields = this.totalNumberOfFields - 1;
 		});
 	},