Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c4153eb

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 b3b4e2b commit c4153eb

File tree

4 files changed

+203
-30
lines changed

4 files changed

+203
-30
lines changed

‎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>

‎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>

‎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");

‎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;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /