Skip to content

Commit c70a2b7

Browse files
author
Lionel Bijaoui
committed
Creation of dev entry to test multiple instances of vue-form-generator
1 parent 5594b32 commit c70a2b7

File tree

4 files changed

+187
-0
lines changed

4 files changed

+187
-0
lines changed

‎build/webpack.dev.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ module.exports = {
4848
basic: path.resolve("dev", "projects", "basic", "main.js"),
4949
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
5050
grouping: path.resolve("dev", "projects", "grouping", "main.js"),
51+
multi: path.resolve("dev", "projects", "multi", "main.js"),
5152
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
5253
picker: path.resolve("dev", "projects", "picker", "main.js")
5354
},

‎dev/projects/multi/app.vue

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<div class="container">
3+
<h1>Multi</h1>
4+
<div class="row">
5+
<div class="col-sm-12">
6+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" ref="form1" :is-new-model="isNewModel" @model-updated="modelUpdated1" @validated="onValidated1"></vue-form-generator>
7+
</div>
8+
</div>
9+
<div class="row">
10+
<div class="col-sm-12">
11+
<vue-form-generator :schema="schema2" :model="model" :options="formOptions" ref="form2" :is-new-model="isNewModel" @model-updated="modelUpdated2" @validated="onValidated2"></vue-form-generator>
12+
</div>
13+
</div>
14+
<div class="row">
15+
<div class="col-sm-12">
16+
<pre v-if="model" v-html="prettyModel"></pre>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import mixinUtils from "../../mixins/utils.js";
24+
25+
export default {
26+
mixins: [mixinUtils],
27+
28+
data() {
29+
return {
30+
isNewModel: false,
31+
32+
selected: [],
33+
34+
model: {
35+
first_name: "David",
36+
last_name: "Higgins",
37+
status: true
38+
},
39+
40+
schema: {
41+
fields: [
42+
{
43+
type: "input",
44+
model: "first_name",
45+
label: "First Name",
46+
fieldOptions: {
47+
inputType: "text"
48+
},
49+
required: true,
50+
validator: ["string"],
51+
attributes: {
52+
input: {
53+
"data-toggle": "tooltip"
54+
},
55+
wrapper: {
56+
"data-target": "input"
57+
}
58+
}
59+
},
60+
{
61+
type: "input",
62+
label: "Color",
63+
model: "color",
64+
fieldOptions: {
65+
inputType: "color"
66+
},
67+
attributes: {
68+
input: {
69+
"data-target": "tooltip"
70+
}
71+
}
72+
}
73+
]
74+
},
75+
76+
schema2: {
77+
fields: [
78+
{
79+
type: "checkbox",
80+
label: "Active",
81+
model: "status",
82+
required: true,
83+
validator: ["required"],
84+
attributes: {
85+
input: {
86+
"data-toggle": "tooltip"
87+
}
88+
}
89+
},
90+
{
91+
type: "input",
92+
model: "last_name",
93+
label: "Last Name",
94+
fieldOptions: {
95+
inputType: "text"
96+
},
97+
required: true,
98+
validator: ["string"]
99+
},
100+
{
101+
type: "submit",
102+
attributes: {
103+
input: {
104+
"data-target": "toggle"
105+
}
106+
},
107+
fieldOptions: {
108+
buttonText: "Change Previous Type",
109+
onSubmit: () => {
110+
// this.schema.fields[1].type = "input";
111+
if (this.schema.fields[1].fieldOptions.inputType === "color") {
112+
this.schema.fields[1].fieldOptions.inputType = "text";
113+
} else {
114+
this.schema.fields[1].fieldOptions.inputType = "color";
115+
}
116+
}
117+
}
118+
}
119+
]
120+
},
121+
122+
formOptions: {
123+
validateAfterLoad: true,
124+
validateAfterChanged: true
125+
}
126+
};
127+
},
128+
129+
methods: {
130+
onValidated1(res, errors) {
131+
console.log("VFG 1 validated:", res, errors);
132+
},
133+
onValidated2(res, errors) {
134+
console.log("VFG 2 validated:", res, errors);
135+
},
136+
137+
modelUpdated1(newVal, schema) {
138+
console.log("main model has updated (from 1)", newVal, schema);
139+
},
140+
modelUpdated2(newVal, schema) {
141+
console.log("main model has updated (from 2)", newVal, schema);
142+
}
143+
},
144+
145+
mounted() {
146+
this.$nextTick(function() {
147+
window.app = this;
148+
});
149+
}
150+
};
151+
</script>
152+
153+
<style lang="scss">
154+
@import "../../style.scss";
155+
</style>

‎dev/projects/multi/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>vue-form-generator development</title>
7+
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8+
9+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
10+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
11+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js"></script>
12+
<!-- jQuery dependent -->
13+
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
14+
</head>
15+
16+
<body>
17+
<div class="container-fluid"></div>
18+
<div id="app"></div>
19+
<script src="/multi.js"></script>
20+
</body>
21+
22+
</html>

‎dev/projects/multi/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Vue from "vue";
2+
import VueFormGenerator from "../../../src";
3+
Vue.use(VueFormGenerator);
4+
5+
import App from "./app.vue";
6+
7+
new Vue({
8+
...App
9+
}).$mount("#app");

0 commit comments

Comments
 (0)