diff --git a/dev/projects/grouping/app.vue b/dev/projects/grouping/app.vue
index 60966dae..6431fefa 100644
--- a/dev/projects/grouping/app.vue
+++ b/dev/projects/grouping/app.vue
@@ -25,6 +25,9 @@ export default {
model: {
name: "Brian Blessed",
email: "brian@hawkman.mongo",
+ 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 {
};
+
+
diff --git a/dev/style.scss b/dev/style.scss
index 0dc91ccf..dc3ccb75 100644
--- a/dev/style.scss
+++ b/dev/style.scss
@@ -57,7 +57,7 @@ pre {
}
}
-fieldset.vue-form-generator {
+.vue-form-generator {
.form-group.half-width {
width: 50%;
}
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index b58b35f3..47f5ade1 100644
--- a/src/formGenerator.vue
+++ b/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")