Merge pull request #415 from zoul0813/v3-features/dynamic-html-attributes

zoul0813 · web-flow · commit e21a0de94a44 · 2018-03-14T12:53:54.000-04:00
V3: dynamic html attributes
diff --git a/dev/projects/basic/app.vue b/dev/projects/basic/app.vue
@@ -38,22 +38,45 @@ export default {
 						type: "input",
 						inputType: "text",
 						label: "First Name",
-						model: "first_name"
+						model: "first_name",
+						attributes: {
+							input: {
+								"data-toggle": "tooltip"
+							},
+							wrapper: {
+								"data-target": "input"
+							}
+						}
 					},
 					{
 						type: "checkbox",
 						label: "Active",
-						model: "status"
+						model: "status",
+						attributes: {
+							input: {
+								"data-toggle": "tooltip"
+							}
+						}
 					},
 					{
 						type: "input",
 						inputType: "color",
 						label: "Color",
-						model: "color"
+						model: "color",
+						attributes: {
+							input: {
+								"data-target": "tooltip"
+							}
+						}
 					},
 					{
 						type: "submit",
 						buttonText: "Change Previous Type",
+						attributes: {
+							input: {
+								"data-target": "toggle"
+							}
+						},
 						onSubmit: () => {
 							// this.schema.fields[2].type = "input";
 							if (this.schema.fields[2].inputType === "color") {
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
@@ -13,6 +13,17 @@ function convertValidator(validator) {
 	return validator;
 }
 
+function attributesDirective(el, binding, vnode) {
+	let attrs = objGet(vnode.context, "schema.attributes", {});
+	let container = binding.value || "input";
+	if(isString(container)) {
+		attrs = objGet(attrs, container) || attrs;
+	}
+	forEach(attrs, (val, key) => {
+		el.setAttribute(key, val);
+	});
+}
+
 export default {
 	props: ["model", "schema", "formOptions", "disabled"],
 
@@ -24,6 +35,14 @@ export default {
 		};
 	},
 
+	directives: {
+		attributes: {
+			bind: attributesDirective,
+			updated: attributesDirective,
+			componentUpdated: attributesDirective,
+		}
+	},
+
 	computed: {
 		value: {
 			cache: false,
diff --git a/src/fields/core/fieldCheckbox.vue b/src/fields/core/fieldCheckbox.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses")
+	input(:id="getFieldID(schema)", type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses", v-attributes="'input'")
 </template>
 
 <script>
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-	.wrapper
+	.wrapper(v-attributes="'wrapper'")
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
 			.list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 				label
-					input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)")
+					input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
 					| {{ getItemName(item) }}
 
 		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
@@ -14,7 +14,7 @@
 			.dropList
 				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 					label
-						input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)")
+						input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)", v-attributes="'input'")
 						| {{ getItemName(item) }}
 </template>
 
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.wrapper
+.wrapper(v-attributes="'wrapper'")
 	input.form-control(
 		:id="getFieldID(schema)",
 		:type="schema.inputType.toLowerCase()",
@@ -9,33 +9,13 @@
 		:class="schema.fieldClasses",
 		@change="schema.onChange || null",
 		:disabled="disabled",
-		:accept="schema.accept",
-		:alt="schema.alt",
-		:autocomplete="schema.autocomplete",
-		:checked="schema.checked",
-		:dirname="schema.dirname",
-		:formaction="schema.formaction",
-		:formenctype="schema.formenctype",
-		:formmethod="schema.formmethod",
-		:formnovalidate="schema.formnovalidate",
-		:formtarget="schema.formtarget",
-		:height="schema.height",
-		:list="schema.list",
-		:max="schema.max",
-		:maxlength="schema.maxlength",
-		:min="schema.min",
-		:minlength="schema.minlength",
-		:multiple="schema.multiple",
 		:name="schema.inputName",
-		:pattern="schema.pattern",
-		:placeholder="schema.placeholder",
 		:readonly="schema.readonly",
 		:required="schema.required",
-		:size="schema.size",
 		:src="schema.src",
-		:step="schema.step",
-		:width="schema.width",
-		:files="schema.files")
+		:files="schema.files"
+		v-attributes="'input'")
+
 	span.helper(v-if="schema.inputType.toLowerCase() === 'color' || schema.inputType.toLowerCase() === 'range'") {{ value }}
 </template>
 
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	span(:id="getFieldID(schema)", :class="schema.fieldClasses") {{ value }}
+	span(:id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="'label'") {{ value }}
 </template>
 
 <script>
diff --git a/src/fields/core/fieldRadios.vue b/src/fields/core/fieldRadios.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-	.radio-list(:disabled="disabled")
-		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
-			input(:id="getFieldID(schema)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses")
+	.radio-list(:disabled="disabled", v-attributes="'wrapper'")
+		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}", v-attributes="'label'")
+			input(:id="getFieldID(schema)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", v-attributes="'input'")
 			| {{ getItemName(item) }}
 
 </template>
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses", v-attributes="'input'")
 		option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 
 		template(v-for="item in items")
diff --git a/src/fields/core/fieldSubmit.vue b/src/fields/core/fieldSubmit.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="onClick", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses")
+	input(:id="getFieldID(schema)", type="submit", :value="schema.buttonText", @click="onClick", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses", v-attributes="'input'")
 </template>
 
 <script>
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
@@ -9,7 +9,8 @@
 		:placeholder="schema.placeholder",
 		:readonly="schema.readonly",
 		:rows="schema.rows || 2",
-		:name="schema.inputName")
+		:name="schema.inputName",
+		v-attributes="'input'")
 </template>
 
 <script>
diff --git a/src/fields/core/fieldUpload.vue b/src/fields/core/fieldUpload.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-.wrapper
+.wrapper(v-attributes="'wrapper'")
 	input.form-control(
 		id="getFieldID(schema)",
 		type="file",
@@ -10,7 +10,8 @@
 		:placeholder="schema.placeholder",
 		:readonly="schema.readonly",
 		:required="schema.required",
-		:disabled="disabled",)
+		:disabled="disabled", 
+		v-attributes="'input'")
 </template>
 
 <script>
diff --git a/test/unit/specs/fields/fieldCheckbox.spec.js b/test/unit/specs/fields/fieldCheckbox.spec.js
@@ -76,4 +76,60 @@ describe("FieldCheckbox.vue", () => {
 			});
 		});
 	});
+
+	describe("check dynamic html attributes", () => {
+
+		describe("check input/wrapper attributes", () => {
+			let schema = {
+				type: "checkbox",
+				label: "First Name",
+				model: "user__model",
+				inputName: "input_name",
+				fieldClasses: ["applied-class", "another-class"],
+				attributes: {
+					wrapper: {
+						"data-wrapper": "collapse"
+					},
+					input: {
+						"data-input": "tooltip"
+					}
+				}
+			};
+			let model = {};
+			let input, wrap;
+
+			before(() => {
+				createField({ schema, model});
+				input = wrapper.find('input');
+			});
+
+			it("input should have data-* attribute", () => {
+				expect(input.attributes()["data-input"]).to.be.equal("tooltip");
+			});
+		});
+
+		describe("check non-specific attributes", () => {
+			let schema = {
+				type: "checkbox",
+				label: "First Name",
+				model: "user__model",
+				inputName: "input_name",
+				fieldClasses: ["applied-class", "another-class"],
+				attributes: {
+					"data-input": "tooltip"
+				}
+			};
+			let model = {};
+			let input, wrap;
+
+			before(() => {
+				createField({ schema, model});
+				input = wrapper.find('input');
+			});
+
+			it("input should have data-* attribute", () => {
+				expect(input.attributes()["data-input"]).to.be.equal("tooltip");
+			});
+		});
+	});
 });
diff --git a/test/unit/specs/fields/fieldChecklist.spec.js b/test/unit/specs/fields/fieldChecklist.spec.js
@@ -616,4 +616,111 @@ describe("fieldChecklist.vue", () => {
 			});
 		});
 	});
+
+	describe("check dynamic html attributes", () => {
+
+		describe("check listbox input/wrapper attributes", () => {
+			let schema = {
+				type: "checklist",
+				listBox: true,
+				label: "First Name",
+				model: "user__model",
+				inputName: "input_name",
+				fieldClasses: ["applied-class", "another-class"],
+				values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
+				attributes: {
+					wrapper: {
+						"data-wrapper": "collapse"
+					},
+					input: {
+						"data-input": "tooltip"
+					}
+				}
+			};
+			let model = {};
+			let input, wrap;
+
+			before(() => {
+				createField2({ schema, model});
+				input = wrapper.find('input');
+				wrap = wrapper.find('.wrapper');
+			});
+
+			it("wrapper should have data-* attribute", () => {
+				expect(wrap.attributes()["data-wrapper"]).to.be.equal("collapse");
+			});
+
+			it("input should have data-* attribute", () => {
+				expect(input.attributes()["data-input"]).to.be.equal("tooltip");
+			});
+		});
+
+		describe("check combobox input/wrapper attributes", () => {
+			let schema = {
+				type: "checklist",
+				listBox: false,
+				label: "First Name",
+				model: "user__model",
+				inputName: "input_name",
+				fieldClasses: ["applied-class", "another-class"],
+				values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
+				attributes: {
+					wrapper: {
+						"data-wrapper": "collapse"
+					},
+					input: {
+						"data-input": "tooltip"
+					}
+				}
+			};
+			let model = {};
+			let input, wrap;
+
+			before(() => {
+				createField2({ schema, model});
+				input = wrapper.find('input');
+				wrap = wrapper.find('.wrapper');
+			});
+
+			it("wrapper should have data-* attribute", () => {
+				expect(wrap.attributes()["data-wrapper"]).to.be.equal("collapse");
+			});
+
+			it.skip("input should have data-* attribute", (done) => {
+				// TODO: figure out how to get this test to work
+				wrapper.setData({ comboExpanded: true });
+				Vue.config.errorHandler = done;
+				Vue.nextTick(() => {
+					expect(input.attributes()["data-input"]).to.be.equal("tooltip");
+					done();
+				});				
+			});
+		});
+
+		describe("check non-specific attributes", () => {
+			let schema = {
+				type: "checklist",
+				listBox: true,
+				label: "First Name",
+				model: "user__model",
+				inputName: "input_name",
+				fieldClasses: ["applied-class", "another-class"],
+				values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
+				attributes: {
+					"data-input": "tooltip"
+				}
+			};
+			let model = {};
+			let input, wrap;
+
+			before(() => {
+				createField2({ schema, model});
+				input = wrapper.find('input');
+			});
+
+			it("input should have data-* attribute", () => {
+				expect(input.attributes()["data-input"]).to.be.equal("tooltip");
+			});
+		});
+	});
 });
diff --git a/test/unit/specs/fields/fieldInput.spec.js b/test/unit/specs/fields/fieldInput.spec.js
diff --git a/test/unit/specs/fields/fieldLabel.spec.js b/test/unit/specs/fields/fieldLabel.spec.js
diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js
