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 adea60c

Browse files
author
Lionel Bijaoui
committed
Enhance "custom" dev project with better examples
- Label with icon depending on field input type - Help with support for Markdown - Errors displayed in a table - Hint with icon and color
1 parent c4153eb commit adea60c

File tree

2 files changed

+93
-18
lines changed

2 files changed

+93
-18
lines changed

‎projects/custom/app.vue

Lines changed: 91 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,41 @@
55
<div class="col-sm-12">
66
<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">
77

8-
<template slot="label" slot-scope="{ field }">
9-
<h1>Custom label : {{ field.label }}</h1>
8+
<template slot="label" slot-scope="{ field, getValueFromOption }">
9+
<h3><i:class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
1010
</template>
1111

1212
<template slot="help" slot-scope="{ field }">
1313
<span v-if='field.help' class="help">
14-
<span @click.prevent="testClick(field.help, $event)">Custom help</span>
15-
<i class="icon"></i>
14+
<span @click.prevent="testClick(field.help, $event)">Need help</span>
15+
<i class="fa fa-question"></i>
16+
<vue-markdown class="helpText" :source="field.help"></vue-markdown>
1617
</span>
1718
</template>
1819

1920
<template slot="hint" slot-scope="{ field, getValueFromOption }">
20-
<span>Custom hint</span>
21-
<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
21+
<div class="hint hint--info">
22+
<i class="fa fa-info-circle"></i>
23+
<span v-html="getValueFromOption(field, 'hint', undefined)"></span>
24+
</div>
2225
</template>
2326

2427
<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
2528
<span>Custom errors</span>
2629
<table class="errors help-block">
2730
<tbody>
28-
<tr>
29-
<td v-for="(error, index) in errors" :key="index" v-html="error"></td>
30-
</tr>
31+
<thead>
32+
<tr>
33+
<th scope="col" id="">Index</th>
34+
<th scope="col" id="">Error</th>
35+
</tr>
36+
</thead>
37+
<tbody>
38+
<tr v-for="(error, index) in errors" :key="index">
39+
<td>{{index}}</td>
40+
<td v-html="error"></td>
41+
</tr>
42+
</tbody>
3143
</tbody>
3244
</table>
3345
</template>
@@ -45,21 +57,24 @@
4557

4658
<script>
4759
import mixinUtils from "../../mixins/utils.js";
60+
import VueMarkdown from "vue-markdown";
4861
4962
export default {
5063
mixins: [mixinUtils],
51-
64+
components: {
65+
VueMarkdown
66+
},
5267
data() {
5368
return {
5469
model: {
5570
name: "Brian Blessed",
5671
email: "brian@hawkman.mongo",
5772
others: {
58-
more: "More",
59-
things: "Things"
73+
more: "",
74+
things: 2
6075
},
6176
single: "blah",
62-
subname: ""
77+
color: ""
6378
},
6479
6580
schema: {
@@ -87,10 +102,10 @@ export default {
87102
fields: [
88103
{
89104
type: "input",
90-
model: "subname",
91-
label: "Name",
105+
model: "color",
106+
label: "Some color",
92107
fieldOptions: {
93-
inputType: "text"
108+
inputType: "color"
94109
},
95110
required: true,
96111
validator: ["required"]
@@ -101,6 +116,7 @@ export default {
101116
type: "input",
102117
model: "email",
103118
label: "Email",
119+
hint: "We will not share your email with third-party",
104120
fieldOptions: {
105121
inputType: "email"
106122
}
@@ -125,16 +141,30 @@ export default {
125141
type: "input",
126142
model: "others.more",
127143
label: "More",
144+
help: `
145+
Welcome to this *custom help*
146+
147+
some code example
148+
149+
150+
You need a modern browser to fill this field in the best condition.
151+
* test1
152+
* test2
153+
154+
https://google.com/
155+
156+
# Markdown !
157+
`,
128158
fieldOptions: {
129-
inputType: "text"
159+
inputType: "date"
130160
}
131161
},
132162
{
133163
type: "input",
134164
model: "others.things",
135165
label: "Things",
136166
fieldOptions: {
137-
inputType: "text"
167+
inputType: "number"
138168
}
139169
}
140170
]
@@ -153,6 +183,25 @@ export default {
153183
methods: {
154184
testClick(helpText, event) {
155185
console.log(helpText, event);
186+
},
187+
getIcon(field, getValueFromOption) {
188+
let fieldType = getValueFromOption(field, "type");
189+
let fieldOptions = getValueFromOption(field, "fieldOptions");
190+
191+
if (fieldType === "input") {
192+
switch (fieldOptions.inputType) {
193+
case "email":
194+
return "at";
195+
case "number":
196+
return "calculator";
197+
case "date":
198+
return "calendar-alt";
199+
case "color":
200+
return "palette";
201+
default:
202+
return "file-alt";
203+
}
204+
}
156205
}
157206
},
158207
@@ -175,4 +224,28 @@ export default {
175224
color: #00268d;
176225
}
177226
}
227+
.hint {
228+
&--info {
229+
color: #339af0;
230+
}
231+
}
232+
233+
table {
234+
border-collapse: collapse;
235+
border-spacing: 0;
236+
}
237+
thead th {
238+
background-color: #efdddd;
239+
border: solid 1px #eedddd;
240+
color: #6b3333;
241+
padding: 10px;
242+
text-align: left;
243+
text-shadow: 1px 1px 1px #fff;
244+
}
245+
tbody td {
246+
border: solid 1px #eedddd;
247+
color: #333;
248+
padding: 10px;
249+
text-shadow: 1px 1px 1px #fff;
250+
}
178251
</style>

‎projects/custom/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<head>
55
<meta charset="utf-8">
66
<title>vue-form-generator multiple forms demo</title>
7+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
8+
crossorigin="anonymous">
79
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
810
</head>
911

0 commit comments

Comments
(0)

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