form loader

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=bee21a10fd167b32eb7a",
+    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=68a619e5234e5c93b9e4",
-    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=80da521806225a08e287",
+    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=6b604267e1685646785e",
-    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=940910f07194a9ae3664",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=09650c69612f4aeb516c",
-    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=c19f65073768c1fe35cf",
+    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=5777ee403c10b3b77f7b",
-    "/js/vue/User/app.js": "/js/vue/User/app.js?id=085c0489c36adc5af7bf"
+    "/js/vue/User/app.js": "/js/vue/User/app.js?id=b07d43f829d994cb6f43"
 }

resources/js/Global/components/FormLoader/Elements/we-form.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="FormBlock" :class="element.width" style="position:relative">
         <h3 class="text-lg-right">{{element.label}}</h3>
-        <template v-if="element.children">
+        <div v-if="element.children" class="row">
-            <element-factory v-for="(elm, key) in element.children" :values="values[element.slug]" :element="elm" :key="key"></element-factory>
+            <element-factory @input="changeValue" :values="values[element.slug]" v-for="(elm, key) in element.children" :element="elm" :key="key"></element-factory>
-        </template>
+        </div>
     </div>
 </template>
 <script>
@@ -22,7 +22,12 @@ export default {
             required: false,
             default: {}
         }
-    }
+    },
+    methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
+	}
 };
 </script>
 <style lang="scss" scoped>

resources/js/Global/components/FormLoader/Elements/we-number_input.vue

@@ -8,8 +8,8 @@
 			:color="element.color"
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon || 'fas fa-sort-numeric-up' "
-			:class="element.width"
 			v-model="values[element.slug]"
+			@input="changeValue"
 		></v-text-field>
 	</v-card-text>
 </template>
@@ -23,6 +23,11 @@ export default {
 			default: () => ({}),
 			type: Object
 		}
+	},
+	methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
 	}
 };
 </script>

resources/js/Global/components/FormLoader/Elements/we-select.vue

@@ -7,8 +7,8 @@
 			:color="element.color"
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon"
-			:class="element.width"
 			:multiple="element.multiple"
+			@input="changeValue"
 		></v-autocomplete>
 	</v-card-text>
 </template>
@@ -18,6 +18,11 @@ export default {
 		element: {
 			type: Object
 		}
+	},
+	methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
 	}
 };
 </script>

resources/js/Global/components/FormLoader/Elements/we-switch.vue

@@ -1,13 +1,13 @@
 <template>
 	<v-card-text>
 		<v-switch
-			:class="element.width"
 			:label="element.label"
 			:hibt="element.hint"
 			:color="element.color"
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon"
 			v-model="values[element.slug]"
+			@input="changeValue"
 		></v-switch>
 	</v-card-text>
 </template>
@@ -21,6 +21,11 @@ export default {
 			type: Object,
 			default: () => ({})
 		}
+	},
+	 methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
 	}
 };
 </script>

resources/js/Global/components/FormLoader/Elements/we-text_input.vue

@@ -7,8 +7,8 @@
 			:color="element.color"
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
-			:class="element.width"
 			v-model="values[element.slug]"
+			@input="changeValue"
 		></v-text-field>
 	</v-card-text>
 </template>
@@ -22,6 +22,11 @@ export default {
 			default: () => ({}),
 			type: Object
 		}
+	},
+	methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
 	}
 };
 </script>

resources/js/Global/components/FormLoader/Elements/we-textarea.vue

@@ -8,6 +8,7 @@
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
 			v-model="values[element.slug]"
+			@input="changeValue"
 		></v-textarea>
 	</v-card-text>
 </template>
@@ -21,6 +22,11 @@ export default {
 			type: Object,
 			default: () => ({})
 		}
+	},
+	methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
 	}
 };
 </script>

resources/js/Global/components/FormLoader/FactoryPattern.vue

@@ -1,6 +1,6 @@
 <template>
     <v-flex :class="element.width">
-        <component v-bind:is="element.type" :values="values" :element="element" ></component>
+        <component v-bind:is="element.type" :values="values" :element="element" @input="changeValue" ></component>
     </v-flex>
 </template>
 <script>
@@ -26,5 +26,10 @@ export default {
             type: Object,
         }
     },
+    methods:{
+        changeValue() {
+            this.$emit('input', this.values)
+        }
+    }
 }
 </script>

resources/js/Global/components/FormLoader/Wrapper.vue

@@ -5,6 +5,7 @@
 			:element="element"
 			:values="formValues"
 			:key="element.id"
+			@input="changeValue"
 		></element-factory>
 	</div>
 </template>
@@ -14,14 +15,15 @@ export default {
 	components: {
 		"element-factory": Factory
 	},
-	data: () => ({
-	}),
 	props: {
 		elements: {
-		    required: true
+			required: true,
+			default: {},
 		},
-		values:{
+		value:{
-		    required: false,
+			required: false,
+			default:() => ({}),
+			type: Object
 		}
 	},
 	methods: {
@@ -38,20 +40,38 @@ export default {
 				}
 			}
 			return values;
+		},
+		changeValue() {
+			this.$emit('input', this.formValues);
 		}
 	},
 	computed: {
 		formValues:{
 			get() {
-				if (!this.values || Object.keys(this.values).length == 0) {
+				if (!this.value || Object.keys(this.value).length == 0) {
 	            	return this.setDefaultValue(this.elements);
 				}
-				return this.values;
+				return this.value;
 			},
-			set(values) {
+			set(value) {
-				this.$emit('values', values);
+				this.$emit('input', value);
 			}
 		}
 	},
+	// created() {
+	// 	var vm = this;
+	// 	setInterval(function() {
+	// 		console.log('setInterval-values', vm.values);
+	// 		console.log('setInterval-formValues', vm.formValues);
+	// 	},3000);
+	// },
+	// watch: {
+	// 	values(v) {
+	// 		console.log('v',v);
+	// 	},
+	// 	formValues(v) {
+	// 		console.log('fv',v);
+	// 	}
+	// },
 };
 </script>