Skip to content

Commit 94be402

Browse files
author
Lionel Bijaoui
committed
Make custom label, help, hint and errors work with groups
- Create a new dev project to test custom and project - Remove custom code from "full" dev project
1 parent 12434e3 commit 94be402

File tree

6 files changed

+212
-34
lines changed

6 files changed

+212
-34
lines changed

‎build/webpack.dev.config.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,13 @@ module.exports = {
4444
contentBase: [path.resolve("dev/projects")]
4545
},
4646
entry: {
47-
full: path.resolve("dev", "projects", "full", "main.js"),
4847
basic: path.resolve("dev", "projects", "basic", "main.js"),
49-
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
48+
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
49+
custom: path.resolve("dev", "projects", "custom", "main.js"),
50+
full: path.resolve("dev", "projects", "full", "main.js"),
5051
grouping: path.resolve("dev", "projects", "grouping", "main.js"),
52+
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
5153
multi: path.resolve("dev", "projects", "multi", "main.js"),
52-
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
5354
picker: path.resolve("dev", "projects", "picker", "main.js")
5455
},
5556

‎dev/projects/custom/app.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<div class="container">
3+
<h1>Custom label, help, hint and errors (with grouping)</h1>
4+
<div class="row">
5+
<div class="col-sm-12">
6+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">
7+
8+
<template slot="label" slot-scope="{ field }">
9+
<h1>Custom label : {{ field.label }}</h1>
10+
</template>
11+
12+
<template slot="help" slot-scope="{ field }">
13+
<span v-if='field.help' class="help">
14+
<span @click.prevent="testClick(field.help, $event)">Custom help</span>
15+
<i class="icon"></i>
16+
</span>
17+
</template>
18+
19+
<template slot="hint" slot-scope="{ field, getValueFromOption }">
20+
<span>Custom hint</span>
21+
<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
22+
</template>
23+
24+
<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
25+
<span>Custom errors</span>
26+
<table class="errors help-block">
27+
<tbody>
28+
<tr>
29+
<td v-for="(error, index) in errors" :key="index" v-html="error"></td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
</template>
34+
35+
</vue-form-generator>
36+
</div>
37+
</div>
38+
<div class="row">
39+
<div class="col-sm-12">
40+
<pre v-if="model" v-html="prettyModel"></pre>
41+
</div>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script>
47+
import mixinUtils from "../../mixins/utils.js";
48+
49+
export default {
50+
mixins: [mixinUtils],
51+
52+
data() {
53+
return {
54+
model: {
55+
name: "Brian Blessed",
56+
email: "brian@hawkman.mongo",
57+
others: {
58+
more: "More",
59+
things: "Things"
60+
},
61+
single: "blah",
62+
subname: ""
63+
},
64+
65+
schema: {
66+
fields: [
67+
{
68+
type: "group",
69+
legend: "Contact Details",
70+
tag: "div",
71+
fields: [
72+
{
73+
type: "input",
74+
model: "name",
75+
label: "Name",
76+
fieldOptions: {
77+
inputType: "text"
78+
},
79+
required: true,
80+
validator: ["required"]
81+
},
82+
{
83+
type: "group",
84+
legend: "Subgroup",
85+
styleClasses: "subgroup",
86+
tag: "fieldset",
87+
fields: [
88+
{
89+
type: "input",
90+
model: "subname",
91+
label: "Name",
92+
fieldOptions: {
93+
inputType: "text"
94+
},
95+
required: true,
96+
validator: ["required"]
97+
}
98+
]
99+
},
100+
{
101+
type: "input",
102+
model: "email",
103+
label: "Email",
104+
fieldOptions: {
105+
inputType: "email"
106+
}
107+
}
108+
]
109+
},
110+
{
111+
type: "input",
112+
model: "single",
113+
label: "Single field (without group)",
114+
fieldOptions: {
115+
inputType: "text"
116+
},
117+
required: true,
118+
validator: ["string"]
119+
},
120+
{
121+
type: "group",
122+
legend: "Other Details",
123+
fields: [
124+
{
125+
type: "input",
126+
model: "others.more",
127+
label: "More",
128+
fieldOptions: {
129+
inputType: "text"
130+
}
131+
},
132+
{
133+
type: "input",
134+
model: "others.things",
135+
label: "Things",
136+
fieldOptions: {
137+
inputType: "text"
138+
}
139+
}
140+
]
141+
}
142+
]
143+
},
144+
145+
formOptions: {
146+
validateAfterLoad: true,
147+
validateAfterChanged: true,
148+
fieldIdPrefix: "frm1-"
149+
}
150+
};
151+
},
152+
153+
methods: {
154+
testClick(helpText, event) {
155+
console.log(helpText, event);
156+
}
157+
},
158+
159+
created() {
160+
window.app = this;
161+
}
162+
};
163+
</script>
164+
165+
<style lang="scss">
166+
@import "../../style.scss";
167+
.field-group {
168+
border: 2px solid #bbb;
169+
padding: 8px;
170+
border-radius: 4px;
171+
}
172+
.subgroup {
173+
border-color: goldenrod;
174+
legend {
175+
color: #00268d;
176+
}
177+
}
178+
</style>

‎dev/projects/custom/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>vue-form-generator multiple forms demo</title>
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
8+
</head>
9+
10+
<body>
11+
<div class="container-fluid"></div>
12+
<div id="app"></div>
13+
<script src="/custom.js"></script>
14+
</body>
15+
16+
</html>

‎dev/projects/custom/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");

‎dev/projects/full/app.vue‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,6 @@
2424
</div>
2525
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">
2626

27-
<template slot="label" slot-scope="{ field }">
28-
<h1>Custom label : {{ field.label }}</h1>
29-
</template>
30-
31-
<template slot="help" slot-scope="{ field }">
32-
<span v-if='field.help' class="help">
33-
<span @click.prevent="testClick(field.help, $event)">Custom help</span>
34-
<i class="icon"></i>
35-
<!-- <div class="helpText-" v-html='field.help'></div> -->
36-
</span>
37-
</template>
38-
39-
<template slot="hint" slot-scope="{ field, getValueFromOption }">
40-
<span>Custom hint</span>
41-
<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
42-
</template>
43-
44-
<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
45-
<table class="errors help-block">
46-
<tbody>
47-
<tr>
48-
<td v-for="(error, index) in errors" :key="index" v-html="error"></td>
49-
</tr>
50-
</tbody>
51-
</table>
52-
</template>
53-
5427
</vue-form-generator>
5528
</div>
5629
<div class="col-md-6">
@@ -118,9 +91,6 @@ export default {
11891
},
11992
12093
methods: {
121-
testClick(helpText, event) {
122-
console.log(helpText, event);
123-
},
12494
showWarning() {
12595
if (this.$refs.form && this.$refs.form.errors) {
12696
return this.$refs.form.errors.length > 0;

‎src/formGroup.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
<template v-for="(field, index) in fields">
66
<template v-if="fieldVisible(field)">
77
<template v-if="field.type === 'group'">
8-
<form-group :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index"></form-group>
8+
<form-group :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index">
9+
<template slot="element" slot-scope="slotProps">
10+
<slot name="element" :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="slotProps.eventBus"></slot>
11+
</template>
12+
</form-group>
913
</template>
1014
<template v-else>
1115
<slot name="element" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></slot>

0 commit comments

Comments
 (0)