Skip to content

Commit a7a1bd3

Browse files
author
Lionel Bijaoui
committed
Custom label, help and hint
- Possibility to use scoped-slot to customise fully how label, help or hint are build - Little change to the structure to make it easy to do this - Heavy use of scoped-slot - Expose `field` object and `getValueFromOption` function
1 parent 02055ec commit a7a1bd3

File tree

4 files changed

+58
-16
lines changed

4 files changed

+58
-16
lines changed

‎dev/projects/full/app.vue

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,22 @@
2222
<strong>{{ item.error }}</strong>
2323
</div>
2424
</div>
25-
<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>
25+
<vue-form-generator :schema="schema" :model="model" :options="formOptions" :multiple="selected.length > 1" ref="form" :is-new-model="isNewModel" @model-updated="modelUpdated" @validated="onValidated">
26+
<template slot="label" slot-scope="{ field }">
27+
<h1>Custom label : {{ field.label }}</h1>
28+
</template>
29+
<template slot="help" slot-scope="{ field }">
30+
<span v-if='field.help' class="help">
31+
<span @click.prevent="testClick(field.help, $event)">Custom help</span>
32+
<i class="icon"></i>
33+
<!-- <div class="helpText-" v-html='field.help'></div> -->
34+
</span>
35+
</template>
36+
<template slot="hint" slot-scope="{ field, getValueFromOption }">
37+
<span>Custom hint</span>
38+
<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
39+
</template>
40+
</vue-form-generator>
2641
</div>
2742
<div class="col-md-6">
2843
<pre v-if="model" v-html="prettyModel"></pre>
@@ -89,6 +104,9 @@ export default {
89104
},
90105
91106
methods: {
107+
testClick(helpText, event) {
108+
console.log(helpText, event);
109+
},
92110
showWarning() {
93111
if (this.$refs.form && this.$refs.form.errors) {
94112
return this.$refs.form.errors.length > 0;

‎src/formElement.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<template>
22
<div class="form-element" :class="[fieldRowClasses]">
33
<label v-if="fieldTypeHasLabel" :for="fieldID" :class="field.labelClasses">
4-
<span v-html="field.label"></span>
5-
<span v-if='field.help' class="help">
6-
<i class="icon"></i>
7-
<div class="helpText" v-html='field.help'></div>
8-
</span>
4+
<slot name="label" :field="field" :getValueFromOption="getValueFromOption"></slot>
5+
<slot name="help" :field="field" :getValueFromOption="getValueFromOption"></slot>
96
</label>
107

118
<div class="field-wrap">
@@ -15,7 +12,9 @@
1512
</div>
1613
</div>
1714

18-
<div v-if="fieldHasHint" class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
15+
<template v-if="fieldHasHint">
16+
<slot name="hint" :field="field" :getValueFromOption="getValueFromOption"></slot>
17+
</template>
1918

2019
<div v-if="childErrors.length > 0" class="errors help-block">
2120
<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>

‎src/formGenerator.vue

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,42 @@
22
<div class="vue-form-generator" v-if='schema != null'>
33
<div v-text="totalNumberOfFields"></div>
44
<div v-html="errors"></div>
5-
<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></form-group>
5+
<form-group :tag="tag" :fields="fields" :model="model" :options="options" :errors="errors" :eventBus="eventBus">
6+
<template slot="element" slot-scope="slotProps">
7+
<form-element :field="slotProps.field" :model="slotProps.model" :options="slotProps.options" :errors="slotProps.errors" :eventBus="eventBus">
8+
<template slot="label" slot-scope="{ field, getValueFromOption }">
9+
<slot name="label" :field="field" :getValueFromOption="getValueFromOption">
10+
<span v-html="field.label"></span>
11+
</slot>
12+
</template>
13+
<template slot="help" slot-scope="{ field, getValueFromOption }">
14+
<slot name="help" :field="field" :getValueFromOption="getValueFromOption">
15+
<span v-if='field.help' class="help">
16+
<i class="icon"></i>
17+
<div class="helpText" v-html='field.help'></div>
18+
</span>
19+
</slot>
20+
</template>
21+
<template slot="hint" slot-scope="{ field, getValueFromOption }">
22+
<slot name="hint" :field="field" :getValueFromOption="getValueFromOption">
23+
<div class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
24+
</slot>
25+
</template>
26+
</form-element>
27+
</template>
28+
</form-group>
629
</div>
730
</template>
831

932
<script>
1033
import Vue from "vue";
1134
import { get as objGet, isArray } from "lodash";
1235
import formGroup from "./formGroup.vue";
36+
import formElement from "./formElement.vue";
1337
1438
export default {
1539
name: "formGenerator",
16-
components: { formGroup },
40+
components: { formGroup, formElement },
1741
props: {
1842
schema: {
1943
type: Object

‎src/formGroup.vue

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
11
<template>
22
<fieldset v-if="fields" :is="tag" :class="[groupRowClasses, validationClass]" ref="group">
3+
34
<legend v-if="groupLegend">{{ groupLegend }}</legend>
45
<template v-for="(field, index) in fields">
5-
<template v-if="field.type === 'group'">
6-
<form-group v-if="fieldVisible(field)" :fields="field.fields" :group="field" :tag="getGroupTag(field)" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index"></form-group>
7-
</template>
8-
<template v-else>
9-
<form-element v-if="fieldVisible(field)" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus" :key="index"></form-element>
6+
<template v-if="fieldVisible(field)">
7+
<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>
9+
</template>
10+
<template v-else>
11+
<slot name="element" :field="field" :model="model" :options="options" :errors="errors" :eventBus="eventBus"></slot>
12+
</template>
1013
</template>
1114
</template>
1215
</fieldset>
1316
</template>
1417
<script>
15-
import formElement from "./formElement.vue";
1618
import formMixin from "./formMixin.js";
1719
import { get as objGet, isFunction, isNil } from "lodash";
1820
1921
export default {
2022
name: "form-group",
21-
components: { formElement },
2223
mixins: [formMixin],
2324
props: {
2425
fields: { type: Array },

0 commit comments

Comments
 (0)