Add subgroups + custom group tags

dev/projects/grouping/app.vue

@@ -25,6 +25,9 @@ export default {
 			model: {
 				name: "Brian Blessed",
 				email: "[email protected]",
+				city: "Springfield",
+				state: "IL",
+				age: 25,
 				others: {
 					more: "More",
 					things: "Things"
@@ -51,6 +54,41 @@ export default {
 							}
 						]
 					},
+					{
+						groups: [
+							{
+								legend: "Location",
+								fields: [
+									{
+										type: "input",
+										inputType: "text",
+										label: "City",
+										model: "city",
+										styleClasses: "half-width"
+									},
+									{
+										type: "input",
+										inputType: "text",
+										label: "State",
+										model: "state",
+										styleClasses: "half-width"
+									}
+								]
+							},
+							{
+								legend: "Demographics",
+								fields: [
+									{
+										type: "input",
+										inputType: "number",
+										label: "Age",
+										model: "age",
+										styleClasses: "half-width"
+									}
+								]
+							}
+						]
+					},
 					{
 						legend: "Other Details",
 						fields: [
@@ -91,6 +129,16 @@ export default {
 };
 </script>
 
+<style>
+/* To demonstrate subgroups */
+section section legend {
+	color: #777;
+	border: 0;
+	margin-bottom: 10px;
+	font-size: 18px;
+}
+</style>
+
 <style lang="scss">
 @import "../../style.scss";
 </style>

dev/style.scss

@@ -57,7 +57,7 @@ pre {
 	}
 }
 
-fieldset.vue-form-generator {
+.vue-form-generator {
 	.form-group.half-width {
 		width: 50%;
 	}

src/formGenerator.vue

@@ -5,10 +5,15 @@ div.vue-form-generator(v-if='schema != null')
 			form-group(v-if='fieldVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
 
 	template(v-for='group in groups')
-		fieldset(:is='tag', :class='getFieldRowClasses(group)')
+		fieldset(:is='group.tag || tag', :class='getFieldRowClasses(group)', v-bind="{ [group.legendAttr]: group.legend }")
 			legend(v-if='group.legend') {{ group.legend }}
 			template(v-for='field in group.fields')
 				form-group(v-if='fieldVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
+			template(v-for='subGroup in group.groups')
+				fieldset(:is='subGroup.tag || tag', :class='getFieldRowClasses(subGroup)', v-bind="{ [subGroup.legendAttr]: subGroup.legend }")
+					legend(v-if='subGroup.legend') {{ subGroup.legend }}
+					template(v-for='nestedField in subGroup.fields')
+						form-group(v-if='fieldVisible(nestedField)', :vfg="vfg", :field="nestedField", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
 </template>
 
 <script>
@@ -201,7 +206,9 @@ export default {
 			this.errors.splice(0);
 
 			forEach(this.$children, child => {
-				child.clearValidationErrors();
+				if (child.clearValidationErrors) {
+					child.clearValidationErrors();
+				}
 			});
 		},
 	}

test/unit/specs/VueFormGenerator.spec.js

@@ -171,6 +171,88 @@ describe("VueFormGenerator.vue", () => {
 		});
 	});
 
+	describe("check subgroups", () => {
+		let schema = {
+			groups: [
+				{
+					legend: "Test Legend",
+					groups: [
+						{
+							legend: "Nested Legend",
+							legendAttr: "title",
+							fields: [
+								{
+									type: "input",
+									inputType: "text",
+									label: "Name",
+									model: "name",
+								}
+							]
+						}
+					]
+				},
+			]
+		};
+		let label;
+		let fieldset;
+
+		before(() => {
+			createFormGenerator({ schema });
+			label = wrapper.find("fieldset fieldset legend");
+			fieldset = wrapper.find("fieldset fieldset");
+		});
+
+		it("should render nested legend", () => {
+			expect(label.exists()).to.be.true;
+			expect(label.text()).to.be.equal("Nested Legend");
+		});
+
+		it("should render nested legend in specified attribute", () => {
+			expect(fieldset.attributes().title).to.be.equal("Nested Legend");
+		});
+	});
+
+	describe("check group tag definition", () => {
+		let schema = {
+			groups: [
+				{
+					tag: "section",
+					legend: "Test Legend",
+					groups: [
+						{
+							tag: "aside",
+							legend: "Nested Legend",
+							fields: [
+								{
+									type: "input",
+									inputType: "text",
+									label: "Name",
+									model: "name",
+								}
+							]
+						}
+					]
+				},
+			]
+		};
+
+		before(() => {
+			createFormGenerator({ schema });
+		});
+
+		it("should create custom tag", () => {
+			const section = wrapper.find("section");
+			expect(section.exists()).to.be.true;
+			expect(section.is("section")).to.be.true;
+		});
+
+		it("should create custom tag (nested)", () => {
+			const aside = wrapper.find("section aside");
+			expect(aside.exists()).to.be.true;
+			expect(aside.is("aside")).to.be.true;
+		});
+	});
+
 	describe("check label classes", () => {
 		let schema = {
 			fields: [