Skip to content

Custom label, help, hint and errors block #493

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions build/webpack.dev.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,13 @@ module.exports = {
contentBase: [path.resolve("dev/projects")]
},
entry: {
full: path.resolve("dev", "projects", "full", "main.js"),
basic: path.resolve("dev", "projects", "basic", "main.js"),
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
custom: path.resolve("dev", "projects", "custom", "main.js"),
full: path.resolve("dev", "projects", "full", "main.js"),
grouping: path.resolve("dev", "projects", "grouping", "main.js"),
mselect: path.resolve("dev", "projects", "multiselect", "main.js"),
multi: path.resolve("dev", "projects", "multi", "main.js"),
checklist: path.resolve("dev", "projects", "checklist", "main.js"),
picker: path.resolve("dev", "projects", "picker", "main.js")
},

Expand Down
1 change: 1 addition & 0 deletions dev/projects/basic/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
</template>

<script>
/* eslint no-console: 0 */
import mixinUtils from "../../mixins/utils.js";

export default {
Expand Down
1 change: 1 addition & 0 deletions dev/projects/checklist/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
</template>

<script>
/* eslint no-console: 0 */
import { validators } from "../../../src";
import mixinUtils from "../../mixins/utils.js";

Expand Down
248 changes: 248 additions & 0 deletions dev/projects/custom/app.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@
<template>
<div class="container">
<h1>Custom label, help, hint and errors (with grouping)</h1>
<div class="row">
<div class="col-sm-12">
<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="section">

<template slot="label" slot-scope="{ field, getValueFromOption }">
<h3><i :class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
</template>

<template slot="help" slot-scope="{ field }">
<span v-if='field.help' class="help">
<span @click.prevent="testClick(field.help, $event)">Need help</span>
<i class="fa fa-question"></i>
<vue-markdown class="helpText" :source="field.help"></vue-markdown>
</span>
</template>

<template slot="hint" slot-scope="{ field, getValueFromOption }">
<div class="hint hint--info">
<i class="fa fa-info-circle"></i>
<span v-html="getValueFromOption(field, 'hint', undefined)"></span>
</div>
</template>

<template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
<span>Custom errors</span>
<table class="errors help-block">
<tbody>
<thead>
<tr>
<th scope="col" id="">Index</th>
<th scope="col" id="">Error</th>
</tr>
</thead>
<tbody>
<tr v-for="(error, index) in errors" :key="index">
<td>{{index}}</td>
<td v-html="error"></td>
</tr>
</tbody>
</tbody>
</table>
</template>

</vue-form-generator>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<pre v-if="model" v-html="prettyModel"></pre>
</div>
</div>
</div>
</template>

<script>
/* eslint no-console: 0 */
import mixinUtils from "../../mixins/utils.js";
import VueMarkdown from "vue-markdown";

export default {
mixins: [mixinUtils],
components: {
VueMarkdown
},
data() {
return {
model: {
name: "Brian Blessed",
email: "[email protected]",
others: {
more: "",
things: 2
},
single: "blah",
color: ""
},

schema: {
fields: [
{
type: "group",
legend: "Contact Details",
tag: "div",
fields: [
{
type: "input",
model: "name",
label: "Name",
fieldOptions: {
inputType: "text"
},
required: true,
validator: ["required"]
},
{
type: "group",
legend: "Subgroup",
styleClasses: "subgroup",
tag: "fieldset",
fields: [
{
type: "input",
model: "color",
label: "Some color",
fieldOptions: {
inputType: "color"
},
required: true,
validator: ["required"]
}
]
},
{
type: "input",
model: "email",
label: "Email",
hint: "We will not share your email with third-party",
fieldOptions: {
inputType: "email"
}
}
]
},
{
type: "input",
model: "single",
label: "Single field (without group)",
fieldOptions: {
inputType: "text"
},
required: true,
validator: ["string"]
},
{
type: "group",
legend: "Other Details",
fields: [
{
type: "input",
model: "others.more",
label: "More",
help: `
Welcome to this *custom help*

some code example


You need a modern browser to fill this field in the best condition.
* test1
* test2

https://google.com/

# Markdown !
`,
fieldOptions: {
inputType: "date"
}
},
{
type: "input",
model: "others.things",
label: "Things",
fieldOptions: {
inputType: "number"
}
}
]
}
]
},

formOptions: {
validateAfterLoad: true,
validateAfterChanged: true,
fieldIdPrefix: "frm1-"
}
};
},

methods: {
testClick(helpText, event) {
console.log(helpText, event);
},
getIcon(field, getValueFromOption) {
let fieldType = getValueFromOption(field, "type");
let fieldOptions = getValueFromOption(field, "fieldOptions");
let icons = {
email: "at",
number: "calculator",
date: "calendar-alt",
color: "palette"
};
if (fieldType === "input" && typeof icons[fieldOptions.inputType] !== "undefined") {
return icons[fieldOptions.inputType];
} else {
return "file-alt";
}
}
},

created() {
window.app = this;
}
};
</script>

<style lang="scss">
@import "../../style.scss";
.field-group {
border: 2px solid #bbb;
padding: 8px;
border-radius: 4px;
}
.subgroup {
border-color: goldenrod;
legend {
color: #00268d;
}
}
.hint {
&--info {
color: #339af0;
}
}

table {
border-collapse: collapse;
border-spacing: 0;
}
thead th {
background-color: #efdddd;
border: solid 1px #eedddd;
color: #6b3333;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
tbody td {
border: solid 1px #eedddd;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
</style>
18 changes: 18 additions & 0 deletions dev/projects/custom/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>vue-form-generator multiple forms demo</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>

<body>
<div class="container-fluid"></div>
<div id="app"></div>
<script src="/custom.js"></script>
</body>

</html>
9 changes: 9 additions & 0 deletions dev/projects/custom/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Vue from "vue";
import VueFormGenerator from "../../../src";
Vue.use(VueFormGenerator);

import App from "./app.vue";

new Vue({
...App
}).$mount("#app");
21 changes: 16 additions & 5 deletions dev/projects/full/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
<strong>{{ item.error }}</strong>
</div>
</div>
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated"></vue-form-generator>
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">

</vue-form-generator>
</div>
<div class="col-md-6">
<pre v-if="model" v-html="prettyModel"></pre>
Expand All @@ -32,6 +34,7 @@
</template>

<script>
/* eslint no-console: 0 */
import Vue from "vue";
import VueFormGenerator from "../../../src";
import DataTable from "./dataTable.vue";
Expand Down Expand Up @@ -82,7 +85,9 @@ export default {

computed: {
validationErrors() {
if (this.$refs.form && this.$refs.form.errors) return this.$refs.form.errors;
if (this.$refs.form && this.$refs.form.errors) {
return this.$refs.form.errors;
}

return [];
}
Expand Down Expand Up @@ -185,7 +190,9 @@ export default {
let id = 0;

each(this.rows, (row) => {
if (row.id > id) id = row.id;
if (row.id > id) {
id = row.id;
}
});

return ++id;
Expand All @@ -204,8 +211,12 @@ export default {
getLocation(model) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((pos) => {
if (!model.address) model.address = {};
if (!model.address.geo) model.address.geo = {};
if (!model.address) {
model.address = {};
}
if (!model.address.geo) {
model.address.geo = {};
}
model.address.geo.latitude = pos.coords.latitude.toFixed(5);
model.address.geo.longitude = pos.coords.longitude.toFixed(5);
});
Expand Down
11 changes: 9 additions & 2 deletions dev/projects/full/data.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ import fecha from "fecha";

let fakerator = new Fakerator();

let roles = [{ id: "admin", name: "Administrator" }, { id: "moderator", name: "Moderator" }, { id: "user", name: "Registered User" }, { id: "visitor", name: "Visitor" }];
let roles = [
{ id: "admin", name: "Administrator" },
{ id: "moderator", name: "Moderator" },
{ id: "user", name: "Registered User" },
{ id: "visitor", name: "Visitor" }
];

let skills = ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"];

Expand Down Expand Up @@ -34,7 +39,9 @@ let users = (function() {
user.favoriteColor = "#" + fakerator.internet.color();
user.color = "#" + fakerator.internet.color();

if (user.type === "business") user.company = fakerator.entity.company();
if (user.type === "business") {
user.company = fakerator.entity.company();
}

user.income = [fakerator.random.number(50000), fakerator.random.number(50000, 100000)];

Expand Down
Loading