|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<element-factory
|
|
|
|
v-for="(element, key) in elements"
|
|
|
|
:element="element"
|
|
|
|
:values="values"
|
|
|
|
:key="element.id"
|
|
|
|
></element-factory>
|
|
|
|
<button @click="register">click me</button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Factory from "./FactoryPattern";
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
"element-factory": Factory
|
|
|
|
},
|
|
|
|
data: () => ({
|
|
|
|
elements: [
|
|
|
|
{
|
|
|
|
id: 1,
|
|
|
|
type: "wm-text_input",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "Hi",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "Hello",
|
|
|
|
color: "red"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 2,
|
|
|
|
type: "wm-form",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red",
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
id: 3,
|
|
|
|
type: "wm-number_input",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 4,
|
|
|
|
type: "wm-form",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "Form",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red",
|
|
|
|
children: [
|
|
|
|
{
|
|
|
|
id: 5,
|
|
|
|
type: "wm-switch",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "switch",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 6,
|
|
|
|
type: "wm-text_input",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 7,
|
|
|
|
type: "wm-text_input",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 8,
|
|
|
|
type: "wm-textarea",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 9,
|
|
|
|
type: "wm-text_input",
|
|
|
|
width: "pa-2",
|
|
|
|
label: "salam",
|
|
|
|
placeholder: "placeholder",
|
|
|
|
hint: "hint",
|
|
|
|
color: "red"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
// values: {},
|
|
|
|
values:{
|
|
|
|
'input_1': 'saeid',
|
|
|
|
'input_2': {
|
|
|
|
'input_3' : 5,
|
|
|
|
'input_4' : {
|
|
|
|
'input_5': 'true',
|
|
|
|
'input_6': 'khobi'
|
|
|
|
},
|
|
|
|
'input_7': 'na',
|
|
|
|
},
|
|
|
|
'input_8': 'shoma khobi \n man khobam',
|
|
|
|
'input_9': 'hossein',
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
props: {
|
|
|
|
// elements: {
|
|
|
|
// type: Array,
|
|
|
|
// required: true
|
|
|
|
// },
|
|
|
|
// values:{
|
|
|
|
// required: false
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setDefaultValue(elements, values = {}) {
|
|
|
|
for (const key in elements) {
|
|
|
|
if (elements.hasOwnProperty(key)) {
|
|
|
|
if (elements[key].type == "wm-form") {
|
|
|
|
values["input_" + elements[key].id] = this.setDefaultValue(elements[key].children);
|
|
|
|
} else {
|
|
|
|
values["input_" + elements[key].id] = "";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return values;
|
|
|
|
},
|
|
|
|
register(){
|
|
|
|
console.log(this.values);
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
// this.values = this.setDefaultValue(this.elements);
|
|
|
|
},
|
|
|
|
// watch: {
|
|
|
|
// values() {
|
|
|
|
// if (!this.values || this.values.length == 0) {
|
|
|
|
// this.values = this.setDefaultValue(this.elements);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
};
|
|
|
|
</script>
|