[FEATURE] Groups

* Add support for schema.groups, schema.groups legend & field id prefixes * Add support for grouping fields. You still can to put fields as always in combination with groups. * Add support for an optional legend for each group/fieldset. Expects the schema to look something like this: ``` section1: { groups:[{ legend: "Contact Details", fields: [ { type: "input", inputType: "text", label: "Name", model: "name" }, { type: "input", inputType: "email", label: "Email", model: "email" } ] },{ legend: "Other Details", fields: [ { type: "input", inputType: "text", label: "More", model: "more" }, { type: "input", inputType: "text", label: "Things", model: "things" } ] }] }, ``` * Add support for field id prefixes, at the form level. So you can add a `fieldIdPrefix: 'prefix_here_'` to your `formOptions` and this will be prepended to _all_ field id's. Based on phemisystems@a6165c8 @dflock @phemisystems
vue-generators · May 25, 2017 · 613e831 · 613e831
1 parent a6165c8
commit 613e831
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 28 deletions.
diff --git a/dev/multipleforms/app.vue b/dev/multipleforms/app.vue
@@ -18,21 +18,40 @@ export default {
 			},
 
 			section1: {
-				legend: "Contact Details",
-				fields: [
-					{
-						type: "input",
-						inputType: "text",
-						label: "Name",
-						model: "name"
-					},
-					{
-						type: "input",
-						inputType: "email",
-						label: "Email",
-						model: "email"
-					}
-				]
+			    groups:[{
+                    legend: "Contact Details",
+                    fields: [
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "Name",
+                            model: "name"
+                        },
+                        {
+                            type: "input",
+                            inputType: "email",
+                            label: "Email",
+                            model: "email"
+                        }
+                    ]
+				},{
+                    legend: "Other Details",
+                    fields: [
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "More",
+                            model: "more"
+                        },
+                        {
+                            type: "input",
+                            inputType: "text",
+                            label: "Things",
+                            model: "things"
+                        }
+                    ]
+                }]
+
 			},
 
 			section2: {

diff --git a/src/formGenerator.vue b/src/formGenerator.vue
@@ -1,8 +1,7 @@
 <template lang="pug">
 div
 	fieldset.vue-form-generator(v-if='schema != null', :is='tag')
-		legend(v-if='schema.legend') {{ schema.legend }}
-		template(v-for='field in fields')
+		template(v-for='field in fields' v-if='fields')
 			.form-group(v-if='fieldVisible(field)', :class='getFieldRowClasses(field)')
 				label(v-if="fieldTypeHasLabel(field)", :for="getFieldID(field)")
 					| {{ field.label }}
@@ -16,6 +15,22 @@ div
 				.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' v-if='groups')
+			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.sync='field', @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>
 
 <script>
@@ -92,17 +107,27 @@ div
 		},
 
 		computed: {
-			fields() {
-				let res = [];
-				if (this.schema) {
-					each(this.schema.fields, (field) => {
-						if (!this.multiple || field.multi === true)
-							res.push(field);
-					});
-				}
-
-				return res;
-			}
+            fields() {
+                let res = [];
+                if (this.schema && this.schema.fields) {
+                    each(this.schema.fields, (field) => {
+                        if (!this.multiple || field.multi === true)
+                            res.push(field);
+                    });
+                }
+
+                return res;
+            },
+            groups() {
+                let res = [];
+                if (this.schema && this.schema.groups) {
+                    each(this.schema.groups, (group) => {
+                            res.push(group);
+                    });
+                }
+
+                return res;
+            }
 		},
 
 		watch: {