Skip to content

Commit 28af147

Browse files
jarvelovjarvelov
committed
Add an example using Vue Composition API
1 parent b33530c commit 28af147

File tree

4 files changed

+504
-0
lines changed

4 files changed

+504
-0
lines changed

‎examples/example-8/example-eight.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
const template = `
2+
<div id="example-eight" class="container mb-3 mt-3">
3+
<h1>vue-form-json-schema</h1>
4+
<h3>
5+
Example #8
6+
<small class="text-muted">Registration form example using <a href="https://composition-api.vuejs.org/">Vue's composition API</a></small>
7+
</h3>
8+
9+
<form @submit="onSubmit" novalidate>
10+
<vue-form-json-schema
11+
v-model="mixinState.model"
12+
:schema="mixinState.schema"
13+
:ui-schema="mixinState.uiSchema"
14+
:options="mixinState.options"
15+
v-on:state-change="onChangeState"
16+
v-on:validated="onValidated"
17+
ref="form"
18+
></vue-form-json-schema>
19+
20+
<div class="form-group">
21+
<button type="submit" class="btn btn-primary">Submit form</button>
22+
</div>
23+
24+
<transition name="fade" mode="out-in">
25+
<div
26+
v-if="mixinState.submitted && mixinState.success"
27+
class="alert alert-success"
28+
key="success"
29+
>Form submitted successfully!</div>
30+
<div
31+
v-if="
32+
mixinState.submitted &&
33+
!mixinState.success &&
34+
mixinState.state.vfjsErrors &&
35+
mixinState.state.vfjsErrors.length > 0
36+
"
37+
class="alert alert-danger"
38+
key="has-errors"
39+
>Form has errors, please fix and resubmit!</div>
40+
<div
41+
v-if="
42+
mixinState.submitted &&
43+
!mixinState.success &&
44+
mixinState.state.vfjsErrors &&
45+
mixinState.state.vfjsErrors.length === 0
46+
"
47+
class="alert alert-success"
48+
key="has-no-errors"
49+
>Form errors have been corrected. You can now resubmit the form.</div>
50+
</transition>
51+
</form>
52+
53+
<hr>
54+
55+
<h4>Valid</h4>
56+
<div>{{mixinState.valid}}</div>
57+
58+
<h4>Model</h4>
59+
<pretty-print :value="mixinState.model"></pretty-print>
60+
61+
<h4>Options</h4>
62+
<pretty-print :value="mixinState.options"></pretty-print>
63+
64+
<h4>Schema</h4>
65+
<pretty-print :value="mixinState.schema"></pretty-print>
66+
67+
<h4>UI Schema</h4>
68+
<pretty-print :value="mixinState.uiSchema"></pretty-print>
69+
70+
<h4>State</h4>
71+
<pretty-print :value="mixinState.state"></pretty-print>
72+
</div>
73+
`;
74+
75+
window.Vue.use(window.vueCompositionApi.default);
76+
77+
window.Vue.component('example-eight', {
78+
name: 'example-eight',
79+
template,
80+
setup() {
81+
const { mixinState } = window.useFormFields();
82+
83+
function onChangeState(value) {
84+
mixinState.state = value;
85+
}
86+
87+
function getDataFromAPI() {
88+
return new Promise((resolve, reject) => {
89+
setTimeout(() => {
90+
resolve({
91+
firstName: 'Firstname',
92+
lastName: 'Lastname',
93+
age: 18,
94+
});
95+
}, 1000);
96+
});
97+
}
98+
99+
function onValidated(value) {
100+
mixinState.valid = value;
101+
}
102+
103+
function onSubmit(e) {
104+
e.preventDefault();
105+
106+
mixinState.submitted = true;
107+
mixinState.options = {
108+
...mixinState.options,
109+
showValidationErrors: true,
110+
};
111+
112+
if (mixinState.valid) {
113+
mixinState.success = true;
114+
}
115+
}
116+
117+
window.vueCompositionApi.onMounted(() => {
118+
getDataFromAPI().then((response) => {
119+
mixinState.model = { ...response };
120+
});
121+
});
122+
123+
return {
124+
mixinState,
125+
onChangeState,
126+
onValidated,
127+
onSubmit,
128+
};
129+
},
130+
});
131+
132+
window.Vue.config.productionTip = false;
133+
134+
/* eslint-disable no-new */
135+
new window.Vue({
136+
el: '#app',
137+
template: '<example-eight />',
138+
});

‎examples/example-8/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<title>Example Eight</title>
8+
<!-- Styles -->
9+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous" />
10+
<link rel="stylesheet" href="../helpers/pretty-print.css">
11+
<link rel="stylesheet" href="./style.css">
12+
</head>
13+
14+
<body>
15+
<div id="app"></div>
16+
<!-- Scripts -->
17+
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
18+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
19+
<script src="../../dist/vue-form-json-schema.umd.js"></script>
20+
<script src="../helpers/pretty-print.js"></script>
21+
<script src="./use-form-fields.js"></script>
22+
<script src="./example-eight.js"></script>
23+
</body>
24+
25+
</html>

‎examples/example-8/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.fade-enter-active, .fade-leave-active {
2+
transition: opacity .5s;
3+
}
4+
.fade-enter, .fade-leave-to {
5+
opacity: 0;
6+
}

0 commit comments

Comments
 (0)