Skip to content

Commit 11bd37e

Browse files
author
Lionel Bijaoui
committed
WIP
1 parent 7bdefd5 commit 11bd37e

File tree

6 files changed

+665
-0
lines changed

6 files changed

+665
-0
lines changed

‎projects/post-form/app.vue

Lines changed: 269 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
1+
<template>
2+
<!-- <h1 class="text-center"></h1>
3+
<div class="container" id="app">
4+
<div class="panel panel-default">
5+
<div class="panel-heading">Form</div>
6+
<div class="panel-body">
7+
<form action="https://httpbin.org/post" method="POST" enctype="application/x-www-form-urlencoded">
8+
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
9+
</form>
10+
</div>
11+
</div>
12+
13+
<div class="panel panel-default">
14+
<div class="panel-heading">Model</div>
15+
<div class="panel-body">
16+
<pre v-if="model" v-html="prettyJSON(model)"></pre>
17+
</div>
18+
</div>
19+
20+
</div> -->
21+
22+
23+
<div class="container">
24+
<h1>Submit the form</h1>
25+
<div class="row">
26+
<div class="col-sm-12">
27+
<form action="https://httpbin.org/post"
28+
method="POST"
29+
enctype="application/x-www-form-urlencoded">
30+
<vue-form-generator :schema="schema"
31+
:model="model"
32+
:options="formOptions"
33+
ref="form"
34+
:is-new-model="isNewModel"
35+
@model-updated="modelUpdated"
36+
@validated="onValidated"></vue-form-generator>
37+
</form>
38+
</div>
39+
</div>
40+
<div class="row">
41+
<div class="col-sm-12">
42+
<pre v-highlightjs="prettyModel"><code class="json"></code></pre>
43+
</div>
44+
</div>
45+
</div>
46+
</template>
47+
48+
<script>
49+
/* eslint no-console: 0 */
50+
import mixinUtils from "../../mixins/utils.js";
51+
let VueFormGenerator = require("vue-form-generator");
52+
// Fix between local and exported project
53+
if (VueFormGenerator.default) {
54+
VueFormGenerator = VueFormGenerator.default;
55+
}
56+
const validators = VueFormGenerator.validators;
57+
58+
export default {
59+
mixins: [mixinUtils],
60+
61+
data() {
62+
return {
63+
isNewModel: false,
64+
65+
selected: [],
66+
67+
model: {
68+
id: 1,
69+
name: "John Doe",
70+
password: "J0hnD03!x4",
71+
skills: "Javascript",
72+
email: "[email protected]",
73+
status: true
74+
},
75+
76+
schema: {
77+
fields: [
78+
{
79+
type: "input",
80+
inputType: "text",
81+
label: "ID",
82+
model: "id",
83+
inputName: "id",
84+
readonly: true,
85+
featured: false,
86+
disabled: true
87+
},
88+
{
89+
type: "input",
90+
inputType: "text",
91+
label: "Name",
92+
model: "name",
93+
inputName: "name",
94+
readonly: false,
95+
featured: true,
96+
required: true,
97+
disabled: false,
98+
placeholder: "User's name",
99+
validator: validators.string
100+
},
101+
{
102+
type: "input",
103+
inputType: "password",
104+
label: "Password",
105+
model: "password",
106+
inputName: "password",
107+
min: 6,
108+
required: true,
109+
hint: "Minimum 6 characters",
110+
validator: validators.string
111+
},
112+
{
113+
type: "input",
114+
inputType: "email",
115+
label: "E-mail",
116+
model: "email",
117+
inputName: "email",
118+
placeholder: "User's e-mail address",
119+
validator: validators.email
120+
},
121+
{
122+
type: "select",
123+
label: "Skills",
124+
model: "skills",
125+
inputName: "skills",
126+
required: true,
127+
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"],
128+
validator: validators.string
129+
},
130+
{
131+
type: "upload",
132+
label: "Photo",
133+
model: "photo",
134+
inputName: "photo",
135+
onChanged(model, schema, event) {
136+
console.log(model, schema, event);
137+
}
138+
},
139+
{
140+
type: "checkbox",
141+
label: "Status",
142+
model: "status",
143+
inputName: "status",
144+
readonly: false,
145+
featured: false,
146+
disabled: false,
147+
default: true
148+
},
149+
{
150+
type: "submit",
151+
label: "",
152+
buttonText: "Submit",
153+
validateBeforeSubmit: true
154+
}
155+
]
156+
},
157+
158+
formOptions: {
159+
validateAfterLoad: false,
160+
validateAfterChanged: false
161+
}
162+
};
163+
},
164+
165+
methods: {
166+
showWarning() {
167+
if (this.$refs.form && this.$refs.form.errors) {
168+
return this.$refs.form.errors.length > 0;
169+
}
170+
},
171+
172+
onValidated(res, errors) {
173+
console.log("VFG validated:", res, errors);
174+
},
175+
176+
modelUpdated(newVal, schema) {
177+
console.log("main model has updated", newVal, schema);
178+
}
179+
},
180+
181+
mounted() {
182+
this.$nextTick(function() {
183+
window.app = this;
184+
});
185+
}
186+
};
187+
</script>
188+
189+
<style lang="scss">
190+
@import "../../style.scss";
191+
</style>
192+
193+
<style>
194+
html {
195+
font-family: Tahoma;
196+
font-size: 14px;
197+
}
198+
199+
body {
200+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
201+
font-size: 14px;
202+
line-height: 1.42857143;
203+
color: #333;
204+
}
205+
206+
pre {
207+
overflow: auto;
208+
}
209+
pre .string {
210+
color: #885800;
211+
}
212+
pre .number {
213+
color: blue;
214+
}
215+
pre .boolean {
216+
color: magenta;
217+
}
218+
pre .null {
219+
color: red;
220+
}
221+
pre .key {
222+
color: green;
223+
}
224+
225+
.container {
226+
max-width: 970px;
227+
padding-right: 15px;
228+
padding-left: 15px;
229+
margin-right: auto;
230+
margin-left: auto;
231+
}
232+
233+
h1 {
234+
text-align: center;
235+
font-size: 36px;
236+
margin-top: 20px;
237+
margin-bottom: 10px;
238+
font-weight: 500;
239+
}
240+
241+
fieldset {
242+
border: 0;
243+
}
244+
245+
.panel {
246+
margin-bottom: 20px;
247+
background-color: #fff;
248+
border: 1px solid transparent;
249+
border-radius: 4px;
250+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
251+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
252+
border-color: #ddd;
253+
}
254+
255+
.panel-heading {
256+
color: #333;
257+
background-color: #f5f5f5;
258+
border-color: #ddd;
259+
260+
padding: 10px 15px;
261+
border-bottom: 1px solid transparent;
262+
border-top-left-radius: 3px;
263+
border-top-right-radius: 3px;
264+
}
265+
266+
.panel-body {
267+
padding: 15px;
268+
}
269+
</style>

‎projects/post-form/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta charset="utf-8">
7+
<title>
8+
<%= htmlWebpackPlugin.options.title %>
9+
</title>
10+
<link rel="stylesheet" type="text/css" href="../../dist/vfg-core.css">
11+
</head>
12+
13+
<body>
14+
<div class="container-fluid"></div>
15+
<div id="app"></div>
16+
17+
</body>
18+
19+
</html>

‎projects/post-form/main.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Vue from "vue";
2+
3+
let VueFormGenerator = require("vue-form-generator");
4+
// Fix between local and exported project
5+
if (VueFormGenerator.default) {
6+
VueFormGenerator = VueFormGenerator.default;
7+
}
8+
9+
const { fieldCheckbox, fieldInput, fieldSubmit } = VueFormGenerator.fieldsLoader;
10+
11+
Vue.use(VueFormGenerator, {
12+
fields: [fieldCheckbox, fieldInput, fieldSubmit]
13+
});
14+
15+
import VueHighlightJS from "vue-highlightjs";
16+
Vue.use(VueHighlightJS);
17+
18+
import App from "./app.vue";
19+
20+
new Vue({
21+
render: (h) => h(App)
22+
}).$mount("#app");

0 commit comments

Comments
 (0)