<template>
    <div>
        <element-factory v-for="(element, key) in elements" :element="element" :key="key"></element-factory>
    </div>
</template>
<script>
import Factory from './FactoryPattern'
export default {
    components:{
        'element-factory' : Factory
    },
    data: () => ({
        elements:[
            {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", 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", width: "pa-2", label:"salam", placeholder: "placeholder", hint:"hint", color:"red" },
        ]
    }),
    props:{
        // elements: {
        //     type: Array,
        //     required: true
        // }
    }
}
</script>