elements in form loader

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js",
-    "/js/vue/Home/app.js": "/js/vue/Home/app.js",
-    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js",
-    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js",
-    "/js/vue/User/app.js": "/js/vue/User/app.js"
+    "/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=1e82449eeed5825a8ba1",
+    "/js/vue/Home/app.js": "/js/vue/Home/app.js?id=8eaf21984d417aafd698",
+    "/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=f30c2bd0c5cc464db69b",
+    "/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=b993b2ea20cfffd23264",
+    "/js/vue/User/app.js": "/js/vue/User/app.js?id=ed8c59c266ebb9751214"
 }

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

@@ -1,9 +1,24 @@
 <template>
-    <div>
-
+    <div :class="element.width" style="position:relative">
+        <div style="padding:150px;">
+        <h3>{{element.label}}</h3>
+        <template v-if="element.children">
+            <element-factory v-for="(elm, key) in element.children" :element="elm" :key="key"></element-factory>
+        </template>
+        </div>
     </div>
 </template>
 <script>
 import Factory from '../FactoryPattern'
-export default {};
+export default {
+    components:{
+        'element-factory' : Factory
+    },
+    props:{
+        element: {
+            type: Object,
+            required: true
+        }
+    }
+};
 </script>

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

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

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

@@ -0,0 +1,30 @@
+<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/wm-text_input.vue

@@ -17,6 +17,13 @@ export default {
         element:{
             type: Object
         }
+    },
+    watch:{
+        element(){
+            console.log(this.element);
+            
+        }
     }
+
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <component v-bind:is="element.type" :options="element" ></component>
+        <component v-bind:is="element.type" :element="element" ></component>
     </div>
 </template>
 <script>

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

@@ -11,17 +11,17 @@ export default {
     },
     data: () => ({
         elements:[
-            {type:"wm-input", },
-            {type: "wm-form", children: [
-                {type:"wm-select", },
-                {type:"wm-form", children: [
-                    {type: "wm-input"},
-                    {type: "wm-checkbox"},
+            {type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
+            {type: "wm-form", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red", children: [
+                {type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
+                {type:"wm-form", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red", children: [
+                    {type: "wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
+                    {type: "wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
                 ]},
-                {type:"wm-input", },
+                {type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
             ]},
-            {type:"wm-select", },
-            {type:"wm-checkbox", },
+            {type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red"},
+            {type:"wm-input", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
         ]
     }),
     props:{

resources/js/Home/views/Home.vue

@@ -23,7 +23,7 @@
                 <v-icon dark>fas fa-plus</v-icon>
             </v-btn>
         </router-link>
-        <wm-wrapper></wm-wrapper>
+        <!-- <wm-wrapper></wm-wrapper> -->
     </v-container>
 </template>
 
@@ -31,13 +31,13 @@
 
 <script>
 import Tile from "@Global/components/Tiles/Tile";
-import Wrapper from "@Global/components/FormLoader/Wrapper";
+// import Wrapper from "@Global/components/FormLoader/Wrapper";
 import { mapGetters, mapActions } from "vuex";
 export default {
     data: () => ({}),
     components: {
         "wm-tile": Tile,
-        "wm-wrapper": Wrapper,
+        // "wm-wrapper": Wrapper,
     },
     computed: {
         ...mapGetters("role_permission", ["getModules"])