created a new "attributes" directive that binds input/wrapper (with support for other named sets) attributes to elements to support dynamic attributes (such as title="Tooltip Text" data-toggle="tooltip", etc)

* added directive to abstractField
* implemented directive in various core fields as an example of usage
* updated basic/app.vue with samples

Author: zoul0813

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") {

src/fields/abstractField.js

@@ -24,6 +24,22 @@ export default {
 		};
 	},
 
+	directives: {
+		attributes: {
+			bind: function(el, binding, vnode) {
+				let attrs = objGet(vnode.context, "schema.attributes", {});
+				let container = binding.value || "input";
+				if(isString(container)) {
+					attrs = objGet(attrs, container, {});
+				}
+				forEach(attrs, (val, key) => {
+					console.log("v-attributes", key, val);
+					el.setAttribute(key, val);
+				});
+			}
+		}
+	},
+
 	computed: {
 		value: {
 			cache: false,

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="")
 </template>
 
 <script>

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>
 

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>
 

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) {{ value }}
 </template>
 
 <script>

src/fields/core/fieldRadios.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-	.radio-list(:disabled="disabled")
+	.radio-list(:disabled="disabled", v-attributes="wrapper")
 		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")
+			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>

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")

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="")
 </template>
 
 <script>

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>

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>