commit
67ac56eeb5
@ -1,7 +1,7 @@
|
||||
{
|
||||
"/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=f3046ccee6deb672cb42",
|
||||
"/js/vue/Home/app.js": "/js/vue/Home/app.js?id=60c658b3e0d3bf77cf19",
|
||||
"/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=d7b53e717be729233749",
|
||||
"/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=03c06477f0ef6f223599",
|
||||
"/js/vue/User/app.js": "/js/vue/User/app.js?id=a0f854cd48d4c6d1e185"
|
||||
"/js/vue/Authentication/app.js": "/js/vue/Authentication/app.js?id=a9b91ee3057962cbaa3b",
|
||||
"/js/vue/Home/app.js": "/js/vue/Home/app.js?id=5fc35fa922f55540736b",
|
||||
"/js/vue/Modules/CRM/app.js": "/js/vue/Modules/CRM/app.js?id=636ba5f2c7316a1d9f37",
|
||||
"/js/vue/Modules/Reservation/app.js": "/js/vue/Modules/Reservation/app.js?id=e1f69f3ef11f9a3008b2",
|
||||
"/js/vue/User/app.js": "/js/vue/User/app.js?id=425bb0a5b3b37feaf6a7"
|
||||
}
|
||||
|
@ -1,34 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<element-factory v-for="(element, key) in elements" :element="element" :key="key"></element-factory>
|
||||
<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'
|
||||
import Factory from "./FactoryPattern";
|
||||
export default {
|
||||
components: {
|
||||
'element-factory' : Factory
|
||||
"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" },
|
||||
{
|
||||
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>
|
Loading…
Reference in new issue