diff --git a/dev/grouping/app.vue b/dev/grouping/app.vue
new file mode 100644
index 00000000..a38201d1
--- /dev/null
+++ b/dev/grouping/app.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
diff --git a/dev/grouping/index.html b/dev/grouping/index.html
new file mode 100644
index 00000000..93ac08dc
--- /dev/null
+++ b/dev/grouping/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ vue-form-generator multiple forms demo
+
+
+
+
+
+
+
diff --git a/dev/grouping/main.js b/dev/grouping/main.js
new file mode 100644
index 00000000..88e4ffc5
--- /dev/null
+++ b/dev/grouping/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');
\ No newline at end of file
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
index 0600cd92..c1ff3129 100644
--- a/src/fields/abstractField.js
+++ b/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,6 +18,7 @@ export default {
props: [
"model",
"schema",
+ "formOptions",
"disabled"
],
@@ -163,29 +165,8 @@ export default {
},
getFieldID(schema) {
- // 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 schema.id;
- } else {
- // Return the slugified version of either:
- return (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);
}
}
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index cb111129..8fde82e2 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,6 +1,6 @@
-div
- fieldset.vue-form-generator(v-if='schema != null', :is='tag')
+div.vue-form-generator(v-if='schema != null')
+ fieldset(v-if="schema.fields", :is='tag')
template(v-for='field in fields')
.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
@@ -9,18 +9,36 @@ div
i.icon
.helpText(v-html='field.help')
.field-wrap
- component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema.sync='field', @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 }}
.errors.help-block(v-if='fieldErrors(field).length > 0')
span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
+
+ template(v-for='group in groups')
+ fieldset
+ legend(v-if='group.legend') {{ group.legend }}
+ template(v-for='field in group.fields')
+ .form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
+ label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
+ | {{ field.label }}
+ span.help(v-if='field.help')
+ i.icon
+ .helpText(v-html='field.help')
+ .field-wrap
+ 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 }}
+ .errors.help-block(v-if='fieldErrors(field).length > 0')
+ span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}