rename options to formOptions because conflicted with vueMultiSelect property

Move core of `getFieldID` to utils

Author: icebob

src/fields/abstractField.js

@@ -1,5 +1,6 @@
 import { get as objGet, each, isFunction, isString, isArray } from "lodash";
 import validators from "../utils/validators";
+import { slugifyFormID } from "../utils/schema";
 
 function convertValidator(validator) {
 	if (isString(validator)) {
@@ -17,7 +18,7 @@ export default {
 	props: [
 		"model",
 		"schema",
-		"options",
+		"formOptions",
 		"disabled"
 	],
 
@@ -164,30 +165,8 @@ export default {
 		},
 
 		getFieldID(schema) {
-			const idPrefix = this.options && this.options.fieldIdPrefix ? this.options.fieldIdPrefix : "";
-			// Try to get a reasonable default id from the schema,
-			// then slugify it.
-			if (typeof schema.id !== "undefined") {
-				// If an ID's been explicitly set, use it unchanged
-				return idPrefix + schema.id;
-			} else {
-				// Return the slugified version of either:
-				return idPrefix + (schema.inputName || schema.label || schema.model)
-				// NB: This is a very simple, conservative, slugify function,
-				// avoiding extra dependencies.
-				.toString()
-				.trim()
-				.toLowerCase()
-				// Spaces & underscores to dashes
-				.replace(/ |_/g, "-")
-				// Multiple dashes to one
-				.replace(/-{2,}/g, "-")
-				// Remove leading & trailing dashes
-				.replace(/^-+|-+$/g, "")
-				// Remove anything that isn't a (English/ASCII) letter, number or dash.
-				.replace(/([^a-zA-Z0-9-]+)/g, "")
-				;
-			}
+			const idPrefix = this.formOptions && this.formOptions.fieldIdPrefix ? this.formOptions.fieldIdPrefix : "";
+			return slugifyFormID(schema, idPrefix);
 		}
 
 	}

src/formGenerator.vue

@@ -9,7 +9,7 @@ div.vue-form-generator(v-if='schema != null')
 						i.icon
 						.helpText(v-html='field.help')
 				.field-wrap
-					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :options='options', @model-updated='modelUpdated', @validated="onFieldValidated")
+					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")
 					.buttons(v-if='buttonVisibility(field)')
 						button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
 				.hint(v-if='field.hint') {{ field.hint }}
@@ -27,7 +27,7 @@ div.vue-form-generator(v-if='schema != null')
 							i.icon
 							.helpText(v-html='field.help')
 					.field-wrap
-						component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :options='options',@model-updated='modelUpdated', @validated="onFieldValidated")
+						component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options',@model-updated='modelUpdated', @validated="onFieldValidated")
 						.buttons(v-if='buttonVisibility(field)')
 							button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field)', :class='btn.classes') {{ btn.label }}
 					.hint(v-if='field.hint') {{ field.hint }}
@@ -38,7 +38,7 @@ div.vue-form-generator(v-if='schema != null')
 <script>
 	// import Vue from "vue";
 	import {each, isFunction, isNil, isArray, isString} from "lodash";
-	import getFieldID from "./fields/abstractField";
+	import { slugifyFormID } from "./utils/schema";
 
 	// Load all fields from '../fields' folder
 	let fieldComponents = {};
@@ -64,8 +64,6 @@ div.vue-form-generator(v-if='schema != null')
 	export default {
 		components: fieldComponents,
 
-		mixins: [ getFieldID ],
-
 		props: {
 			schema: Object,
 
@@ -343,7 +341,12 @@ div.vue-form-generator(v-if='schema != null')
 			fieldErrors(field) {
 				let res = this.errors.filter(e => e.field == field);
 				return res.map(item => item.error);
-			}
+			},
+
+			getFieldID(schema) {
+				const idPrefix = this.options && this.options.fieldIdPrefix ? this.options.fieldIdPrefix : "";
+				return slugifyFormID(schema, idPrefix);
+			}			
 		}
 	};
 

src/utils/schema.js

@@ -52,4 +52,30 @@ module.exports.mergeMultiObjectFields = function(schema, objs) {
 	});
 
 	return model;
+};
+
+module.exports.slugifyFormID = function(schema, prefix = "") {
+	// Try to get a reasonable default id from the schema,
+	// then slugify it.
+	if (typeof schema.id !== "undefined") {
+		// If an ID's been explicitly set, use it unchanged
+		return prefix + schema.id;
+	} else {
+		// Return the slugified version of either:
+		return prefix + (schema.inputName || schema.label || schema.model)
+		// NB: This is a very simple, conservative, slugify function,
+		// avoiding extra dependencies.
+		.toString()
+		.trim()
+		.toLowerCase()
+		// Spaces & underscores to dashes
+		.replace(/ |_/g, "-")
+		// Multiple dashes to one
+		.replace(/-{2,}/g, "-")
+		// Remove leading & trailing dashes
+		.replace(/^-+|-+$/g, "")
+		// Remove anything that isn't a (English/ASCII) letter, number or dash.
+		.replace(/([^a-zA-Z0-9-]+)/g, "")
+		;
+	}
 };