form loader validation

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
     "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=68a619e5234e5c93b9e4",
     "/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=09650c69612f4aeb516c",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=fd304e007bfa2a19b4bc",
-    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=5777ee403c10b3b77f7b",
+    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=a1c77fe3a85aaf675d66",
     "/js/vue/User/app.js": "/js/vue/User/app.js?id=b07d43f829d994cb6f43"
 }

resources/js/Global/components/FormLoader/Elements/bb_we-checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <v-card-text>
         <v-checkbox
 			:class="element.width" 
 			:label="element.label" 
@@ -8,15 +8,25 @@
 			:append-icon="element.append_icon" 
 			:prepend-icon="element.prepend_icon" 
 			multiple="true"
+            @input="changeValue"
 		></v-checkbox>
-    </div>
+    </v-card-text>
 </template>
 <script>
 export default {
-    props:{
+	props: {
-        element:{
+		element: {
-            type: Object
+			type: Object
-        }
+		},
-    }
+		values: {
-}
+			default: () => ({}),
+			type: Object
+		}
+	},
+	methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
+	}
+};
 </script>

resources/js/Global/components/FormLoader/Elements/bb_we-radioButton.vue

@@ -1,8 +1,7 @@
 <template>
-    <div>
+    <v-card-text>
         <v-radio-group>
             <v-radio
-                :class="element.width" 
                 :label="element.label" 
                 :hibt="element.hint" 
                 :color="element.color" 
@@ -10,14 +9,18 @@
                 :prepend-icon="element.prepend_icon" 
             ></v-radio>
         </v-radio-group>
-    </div>
+    </v-card-text>
 </template>
 <script>
 export default {
     props:{
         element:{
             type: Object
-        }
+        },
+		values: {
+			default: () => ({}),
+			type: Object
+		}
     }
 }
 </script>

resources/js/Global/components/FormLoader/Elements/bb_we-range.vue

@@ -0,0 +1,38 @@
+<template>
+    <v-card-text>
+        <v-slider 
+			:label="element.label" 
+			:hint="element.hint" 
+			:color="element.color" 
+			:append-icon="element.append_icon" 
+			:prepend-icon="element.prepend_icon"
+            :min="element.min"
+            :max="element.max"
+            :data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
+            v-model="values[element.slug]"
+			@input="changeValue"
+		></v-slider>
+    </v-card-text>
+</template>
+<script>
+export default {
+    props:{
+        element: {
+			type: Object
+		},
+		values: {
+			default: () => ({}),
+			type: Object
+		}
+    },
+    methods: {
+		changeValue() {
+			this.$emit('input', this.values);
+		}
+	}
+
+}
+</script>

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

@@ -10,6 +10,10 @@
 			:prepend-icon="element.prepend_icon || 'fas fa-sort-numeric-up' "
 			v-model="values[element.slug]"
 			@input="changeValue"
+			:data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
 		></v-text-field>
 	</v-card-text>
 </template>

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

@@ -1,30 +0,0 @@
-<template>
-    <div>
-        <v-slider 
-			:label="element.label" 
-			:hint="element.hint" 
-			:color="element.color" 
-			:append-icon="element.append_icon" 
-			:prepend-icon="element.prepend_icon" 
-			:class="element.width"
-            :min="element.min"
-            :max="element.max"
-		></v-slider>
-    </div>
-</template>
-<script>
-export default {
-    props:{
-        element:{
-            type: Object
-        }
-    },
-    watch:{
-        element(){
-            console.log(this.element);
-            
-        }
-    }
-
-}
-</script>

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

@@ -7,8 +7,16 @@
 			:color="element.color"
 			:append-icon="element.append_icon"
 			:prepend-icon="element.prepend_icon"
+			:items="element.options"
 			:multiple="element.multiple"
+			v-model="values[element.slug]"
 			@input="changeValue"
+			item-text="value"
+            item-value="id"
+			:data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
 		></v-autocomplete>
 	</v-card-text>
 </template>
@@ -17,6 +25,10 @@ export default {
 	props: {
 		element: {
 			type: Object
+		},
+		values: {
+			default: () => ({}),
+			type: Object
 		}
 	},
 	methods: {

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

@@ -8,6 +8,10 @@
 			:prepend-icon="element.prepend_icon"
 			v-model="values[element.slug]"
 			@input="changeValue"
+			:data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
 		></v-switch>
 	</v-card-text>
 </template>

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

@@ -9,6 +9,10 @@
 			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
 			v-model="values[element.slug]"
 			@input="changeValue"
+			:data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
 		></v-text-field>
 	</v-card-text>
 </template>

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

@@ -9,6 +9,10 @@
 			:prepend-icon="element.prepend_icon || 'fas fa-align-right' "
 			v-model="values[element.slug]"
 			@input="changeValue"
+			:data-vv-name="element.slug"
+			:data-vv-as="element.label"
+			v-validate="element.validations"
+			:error-messages="errors.collect(element.slug)"
 		></v-textarea>
 	</v-card-text>
 </template>