From 57f690b55d7cb8a62e7f3b364fbe8c44da461289 Mon Sep 17 00:00:00 2001
From: Icebob <mereg.norbert@gmail.com>
Date: Wed, 1 Jun 2016 15:06:48 +0200
Subject: [PATCH] :rocket: breaking: change form layout

change table, tr, td -> fieldset .form-group label, input
---
 dev/app.vue                              |   2 +-
 src/formGenerator.vue                    | 292 +++++++++++------------
 test/unit/specs/VueFormGenerator.spec.js |  61 +++--
 3 files changed, 164 insertions(+), 191 deletions(-)

diff --git a/dev/app.vue b/dev/app.vue
index afc90333..21aa857d 100644
--- a/dev/app.vue
+++ b/dev/app.vue
@@ -4,7 +4,7 @@
 				data-table(:rows="rows", :selected="selected", :select="selectRow")
 
 		.row(v-show="model")
-			.col-md-6
+			.col-md-5.col-md-offset-1
 				.buttons.text-center
 					button.btn.btn-default.new(@click="newModel") 
 						i.fa.fa-plus
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index ad2cfd83..f4e7ebb9 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,21 +1,17 @@
 <template lang="jade">
-	table(v-if="schema != null")
-		thead
-		tbody
-			tr(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
-				td
-					span.help(v-if="field.help")
-						i.fa.fa-question-circle
-						.helpText {{{field.help}}}
-					| {{ field.label }}
-				td
-					.field-wrap
-						component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
-						.buttons(v-if="field.buttons && field.buttons.length > 0")
-							button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
-					.hint(v-if="field.hint") {{ field.hint }}
-					.errors(v-if="field.errors && field.errors.length > 0")
-						span(v-for="error in field.errors", track-by="$index") {{ error }}
+	fieldset(v-if="schema != null")
+		.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
+			label {{ field.label }}
+				span.help(v-if="field.help")
+					i.fa.fa-question-circle
+					.helpText {{{field.help}}}
+			.field-wrap
+				component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
+				.buttons(v-if="field.buttons && field.buttons.length > 0")
+					button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
+			.hint(v-if="field.hint") {{ field.hint }}
+			.errors(v-if="field.errors && field.errors.length > 0")
+				span(v-for="error in field.errors", track-by="$index") {{ error }}
 </template>
 
 <script>
@@ -102,6 +98,8 @@
 					baseClasses[field.styleClasses] = true;
 				}
 
+				baseClasses["field-" + field.type] = true;
+
 				return baseClasses;
 			},
 
@@ -164,10 +162,7 @@
 	
 	$errorColor: lighten(#F00, 0%);
 
-	table {
-		width: 70%;
-		min-width: 350px;
-		margin: auto;
+	fieldset {
 		
 		input, select, textarea {
 			border-radius: 4px;
@@ -175,164 +170,143 @@
 			padding: 2px 5px;
 		}
 		
-		td {
-			padding: 0.3em 0.4em;
-			
-			&:nth-child(1) {
-				text-align: right;
-				vertical-align: top;
-				padding: 0.8em 0.5em;
-
-				span.help {
-					margin-right: 0.3em;
-					position: relative;
-
-					.helpText {
-						background-color: #444;
-						bottom: 30px;
-						color: #fff;
-						display: block;
-						left: 0px;
-						//margin-bottom: 15px;
-						opacity: 0;
-						padding: 20px;
-						pointer-events: none;
-						position: absolute;
-						text-align: justify;
-						width: 300px;
-						//transform: translateY(10%);
-						transition: all .25s ease-out;
-						box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
-						border-radius: 6px;
-
-						a {
-							font-weight: bold;
-							text-decoration: underline;
-						}
-					}
-
-					/* This bridges the gap so you can mouse into the tooltip without it disappearing */
-					.helpText:before {
-						bottom: -20px;
-						content: " ";
-						display: block;
-						height: 20px;
-						left: 0;
-						position: absolute;
-						width: 100%;
-					}  
-
-					/* CSS Triangles - see Trevor's post */
-					/*.helpText:after {
-						border-left: solid transparent 10px;
-						border-right: solid transparent 10px;
-						border-top: solid #1496bb 10px;
-						bottom: -10px;
-						content: " ";
-						height: 0;
-						left: 50%;
-						margin-left: -13px;
-						position: absolute;
-						width: 0;
-					}*/
-						
-					&:hover .helpText {
-						opacity: 1;
-						pointer-events: auto;
-						transform: translateY(0px);
-					}					
-				}
-			} // nth-child(1)
-
-			&:nth-child(2) {	
-
-				> .field-wrap {
-					display: flex;
-
-					.buttons {
-						white-space: nowrap;
-						button {
-							display: inline-block;
-							margin: 0 2px;
-						}
-					}
-				}		
-
-				.hint {
-					font-style: italic;
-					font-size: 0.8em;
+		span.help {
+			margin-left: 0.3em;
+			position: relative;
+
+			.helpText {
+				background-color: #444;
+				bottom: 30px;
+				color: #fff;
+				display: block;
+				left: 0px;
+				//margin-bottom: 15px;
+				opacity: 0;
+				padding: 20px;
+				pointer-events: none;
+				position: absolute;
+				text-align: justify;
+				width: 300px;
+				//transform: translateY(10%);
+				transition: all .25s ease-out;
+				box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
+				border-radius: 6px;
+
+				a {
+					font-weight: bold;
+					text-decoration: underline;
 				}
+			}
 
-				.errors {
-
+			/* This bridges the gap so you can mouse into the tooltip without it disappearing */
+			.helpText:before {
+				bottom: -20px;
+				content: " ";
+				display: block;
+				height: 20px;
+				left: 0;
+				position: absolute;
+				width: 100%;
+			}  
+
+			/* CSS Triangles - see Trevor's post */
+			/*.helpText:after {
+				border-left: solid transparent 10px;
+				border-right: solid transparent 10px;
+				border-top: solid #1496bb 10px;
+				bottom: -10px;
+				content: " ";
+				height: 0;
+				left: 50%;
+				margin-left: -13px;
+				position: absolute;
+				width: 0;
+			}*/
+				
+			&:hover .helpText {
+				opacity: 1;
+				pointer-events: auto;
+				transform: translateY(0px);
+			}					
+		} // span.help
+
+		> .field-wrap {
+			display: flex;
+
+			.buttons {
+				white-space: nowrap;
+				button {
+					display: inline-block;
+					margin: 0 2px;
 				}
+			}
+		}		
 
-			} // nth-child(2)
-
-		} // td
-
-		tr.featured {
-			td:nth-child(1) {
-				font-weight: bold;
-			}			
+		.hint {
+			font-style: italic;
+			font-size: 0.8em;
 		}
 
-		tr.required {
-			td:nth-child(1):after {
-				content: "*";
-				font-weight: normal;
-				color: Red;
-				padding-left: 0.1em;
-				font-size: 0.8em;
-				position: absolute;
-				margin-top: -0.4em;
-			}	
-		}
 
+		.form-group {
 
-		tr.disabled {
-			td:nth-child(1) {
-				color: #666;
-				font-style: italic;
-			}			
-		}
+			label {
+				font-weight: 400;
+			}
 
-		tr.company {
-			/* csak teszt */
-			background-color: #EEE;
+			&.featured {
+				label {
+					font-weight: bold;
+				}			
+			}
 
-		}
+			&.required {
+				label:after {
+					content: "*";
+					font-weight: normal;
+					color: Red;
+					position: absolute;
+					padding-left: 0.2em;
+					font-size: 1em;
+				}	
+			}
 
-		tr.error {
+			&.disabled {
+				label {
+					color: #666;
+					font-style: italic;
+				}			
+			}
 
-			td:nth-child(1) {
-				//color: $errorColor;
-			}			
+			&.error {
+
+				label {
+					//color: $errorColor;
+				}			
 
-			td:nth-child(2) {
 				input:not([type="checkbox"]), textarea, select {
 					border: 1px solid $errorColor;
 					background-color: rgba($errorColor, 0.15);
 				}
-			}
 
-			.errors {
-				color: $errorColor;
-				font-size: 0.80em;
-				span {
-					display: block;
-					background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
-					background-repeat: no-repeat;
-					padding-left: 17px;
-						padding-top: 0px;
-						margin-top: 0.2em;
-						font-weight: 600;
-				}
+				.errors {
+					color: $errorColor;
+					font-size: 0.80em;
+					span {
+						display: block;
+						background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC');
+						background-repeat: no-repeat;
+						padding-left: 17px;
+							padding-top: 0px;
+							margin-top: 0.2em;
+							font-weight: 600;
+					}
 
-			} // .errors				
+				} // .errors	
 
+			} // .error
 
-		} // tr.error
+		} // .form-group
 
-	} // table
+	} // fieldset
 </style>
\ No newline at end of file
diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
index ee860dab..0c71fcc5 100644
--- a/test/unit/specs/VueFormGenerator.spec.js
+++ b/test/unit/specs/VueFormGenerator.spec.js
@@ -34,18 +34,15 @@ describe("VueFormGenerator.vue", () => {
 			createFormGenerator(schema);
 		});
 
-		it("should be create HTML table", () => {
+		it("should be create fieldset", () => {
 			expect(vm.$el).to.be.exist;
-			expect(el.getElementsByTagName("table")).to.be.length(1);
-
-			let table = el.getElementsByTagName("table")[0];
-			expect(table.getElementsByTagName("tbody")).to.be.length(1);
+			expect(el.getElementsByTagName("fieldset")).to.be.length(1);
 		});
 
 	});
 
-	describe("check form row classes", () => {
-		let tr;
+	describe("check form-group classes", () => {
+		let group;
 		let schema = {
 			fields: [
 				{
@@ -62,17 +59,19 @@ describe("VueFormGenerator.vue", () => {
 
 		before( () => {
 			createFormGenerator(schema);
-			tr = el.getElementsByTagName("tr")[0];
+			group = el.querySelector(".form-group");
 		});
 
-		it("should be empty classList", () => {
-			expect(tr.classList.length).to.be.equal(0);
+		it("should be minimal classes", () => {
+			expect(group.classList.length).to.be.equal(2);
+			expect(group.classList.contains("form-group")).to.be.true;
+			expect(group.classList.contains("field-text")).to.be.true;
 		});
 
 		it("should be featured class", (done) => {
 			vm.schema.fields[0].featured = true;
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("featured")).to.be.true;
+				expect(group.classList.contains("featured")).to.be.true;
 				done();
 			});
 		});
@@ -80,7 +79,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be readonly class", (done) => {
 			vm.schema.fields[0].readonly = true;
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("readonly")).to.be.true;
+				expect(group.classList.contains("readonly")).to.be.true;
 				done();
 			});
 		});		
@@ -88,7 +87,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be disabled class", (done) => {
 			vm.schema.fields[0].disabled = true;
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("disabled")).to.be.true;
+				expect(group.classList.contains("disabled")).to.be.true;
 				done();
 			});
 		});		
@@ -96,7 +95,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be required class", (done) => {
 			vm.schema.fields[0].required = true;
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("required")).to.be.true;
+				expect(group.classList.contains("required")).to.be.true;
 				done();
 			});
 		});		
@@ -104,7 +103,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be error class", (done) => {
 			vm.$set("schema.fields[0].errors", [ "!!!" ]);
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("error")).to.be.true;
+				expect(group.classList.contains("error")).to.be.true;
 				done();
 			});
 		});		
@@ -112,7 +111,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be add a custom classes", (done) => {
 			vm.$set("schema.fields[0].styleClasses", "classA");
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("classA")).to.be.true;
+				expect(group.classList.contains("classA")).to.be.true;
 				done();
 			});
 		});		
@@ -120,8 +119,8 @@ describe("VueFormGenerator.vue", () => {
 		it("should be add more custom classes", (done) => {
 			vm.$set("schema.fields[0].styleClasses", [ "classB", "classC" ]);
 			vm.$nextTick(() => {
-				expect(tr.classList.contains("classB")).to.be.true;
-				expect(tr.classList.contains("classC")).to.be.true;
+				expect(group.classList.contains("classB")).to.be.true;
+				expect(group.classList.contains("classC")).to.be.true;
 				done();
 			});
 		});		
@@ -129,7 +128,7 @@ describe("VueFormGenerator.vue", () => {
 	});	
 
 	describe("check form row caption cell", () => {
-		let tr, tdCaption;
+		let group, label;
 		let schema = {
 			fields: [
 				{
@@ -143,19 +142,19 @@ describe("VueFormGenerator.vue", () => {
 
 		before( () => {
 			createFormGenerator(schema);
-			tr = el.getElementsByTagName("tr")[0];
-			tdCaption = tr.getElementsByTagName("td")[0];
+			group = el.querySelector(".form-group");
+			label = group.querySelector("label");
 		});
 
 		it("should be text of cell is the name of field", () => {
-			expect(tdCaption).to.be.exist;
-			expect(tdCaption.textContent).to.be.equal("Name");
+			expect(label).to.be.exist;
+			expect(label.textContent).to.be.equal("Name");
 		});
 
 		it("should be a question icon if has helpText", (done) => {
 			vm.schema.fields[0].help = "Sample help";
 			vm.$nextTick(() => {
-				let span = tr.querySelector(".help");
+				let span = group.querySelector(".help");
 				expect(span).to.be.exist;
 				expect(span.querySelector("i")).to.be.exist;
 				expect(span.querySelector(".helpText")).to.be.exist;
@@ -167,7 +166,7 @@ describe("VueFormGenerator.vue", () => {
 	});
 
 	describe("check form row field cell", () => {
-		let tr, tdField;
+		let group, label;
 		let schema = {
 			fields: [
 				{
@@ -183,16 +182,16 @@ describe("VueFormGenerator.vue", () => {
 
 		before( () => {
 			createFormGenerator(schema);
-			tr = el.getElementsByTagName("tr")[0];
-			tdField = tr.getElementsByTagName("td")[1];
+			group = el.querySelector(".form-group");
+			label = group.querySelector("label");
 		});
 
 		it("should be a .field-wrap div", () => {
-			expect(tdField.querySelector(".field-wrap")).to.be.exist;
+			expect(group.querySelector(".field-wrap")).to.be.exist;
 		});
 
 		it("should be a hint div if hint is not null", () => {
-			let hint = tdField.querySelector(".hint");
+			let hint = group.querySelector(".hint");
 			expect(hint).to.be.exist;
 			expect(hint.textContent).to.be.equal("Hint text");
 		});
@@ -200,7 +199,7 @@ describe("VueFormGenerator.vue", () => {
 		it("should be .errors div if there are errors in fields", (done) => {
 			vm.schema.fields[0].errors.push("Some error!", "Another error!");
 			vm.$nextTick(() => {
-				let div = tdField.querySelector(".errors");
+				let div = group.querySelector(".errors");
 				expect(div).to.be.exist;
 				let errors = div.querySelectorAll("span");
 				expect(errors.length).to.be.equal(2);
@@ -229,7 +228,7 @@ describe("VueFormGenerator.vue", () => {
 
 		it("should render only phone field", () => {
 			expect(form.fields.length).to.be.equal(1);
-			expect(el.getElementsByTagName("tr")[0].getElementsByTagName("td")[0].textContent).to.be.equal("phone");
+			expect(el.querySelector(".form-group label").textContent).to.be.equal("phone");
 		});
 	});