Skip to content

Commit 2f1e6b7

Browse files
author
Lionel Bijaoui
committed
Better isolation of the event bus
1 parent c70a2b7 commit 2f1e6b7

File tree

6 files changed

+60
-50
lines changed

6 files changed

+60
-50
lines changed

‎src/event-bus.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/fields/abstractField.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { get as objGet, forEach, isFunction, isString, isArray, debounce, isNil } from "lodash";
22
import validators from "../utils/validators";
33
import { slugifyFormID } from "../utils/schema";
4-
import { eventBus } from "../event-bus.js";
54

65
const convertValidator = (validator) => {
76
if (isString(validator)) {
@@ -35,6 +34,9 @@ export default {
3534
},
3635
formOptions: {
3736
type: Object
37+
},
38+
eventBus: {
39+
type: Object
3840
}
3941
},
4042

@@ -105,6 +107,14 @@ export default {
105107
}
106108
},
107109

110+
watch: {
111+
errors: {
112+
handler: function(errors) {
113+
this.$emit("errors-updated", errors);
114+
}
115+
}
116+
},
117+
108118
methods: {
109119
getValueFromOption(field, option, defaultValue) {
110120
if (typeof this.$parent.getValueFromOption === "function") {
@@ -147,9 +157,6 @@ export default {
147157
if (err) {
148158
this.errors = this.errors.concat(err);
149159
}
150-
// let isValid = this.errors.length === 0;
151-
// this.$emit("validated", isValid, this.errors, this);
152-
// eventBus.$emit("validated", isValid, this.errors, this);
153160
});
154161
} else if (result) {
155162
results = results.concat(result);
@@ -174,7 +181,8 @@ export default {
174181
let isValid = fieldErrors.length === 0;
175182

176183
this.errors = fieldErrors;
177-
eventBus.$emit("field-validated", isValid, fieldErrors, this._uid);
184+
185+
this.eventBus.$emit("field-validated", isValid, fieldErrors, this._uid);
178186
return fieldErrors;
179187
};
180188

@@ -206,7 +214,7 @@ export default {
206214
}
207215

208216
if (changed) {
209-
eventBus.$emit("model-updated", newValue, this.schema.model);
217+
this.eventBus.$emit("model-updated", newValue, this.schema.model);
210218

211219
if (isFunction(this.schema.onChanged)) {
212220
this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
@@ -271,9 +279,9 @@ export default {
271279
}
272280
},
273281
created() {
274-
eventBus.$on("clear-validation-errors", this.clearValidationErrors);
275-
eventBus.$on("validate-fields", this.validate);
276-
eventBus.$emit("field-registering");
282+
this.eventBus.$on("clear-validation-errors", this.clearValidationErrors);
283+
this.eventBus.$on("validate-fields", this.validate);
284+
this.eventBus.$emit("field-registering");
277285
},
278286
mounted() {
279287
const diff = function(a, b) {
@@ -324,8 +332,8 @@ export default {
324332
}
325333
},
326334
beforeDestroy() {
327-
eventBus.$off("clear-validation-errors");
328-
eventBus.$off("validate-fields");
329-
eventBus.$emit("field-deregistering", this);
335+
this.eventBus.$off("clear-validation-errors");
336+
this.eventBus.$off("validate-fields");
337+
this.eventBus.$emit("field-deregistering", this);
330338
}
331339
};

‎src/fields/core/fieldSubmit.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
<script>
66
import abstractField from "../abstractField";
7-
import { eventBus } from "../../event-bus.js";
87
import { isFunction, isEmpty } from "lodash";
98
109
export default {
@@ -17,8 +16,8 @@ export default {
1716
// when we have to validate data first
1817
$event.preventDefault();
1918
20-
eventBus.$emit("fields-validation-trigger");
21-
eventBus.$on("fields-validation-terminated", (formErrors) => {
19+
this.eventBus.$emit("fields-validation-trigger");
20+
this.eventBus.$on("fields-validation-terminated", (formErrors) => {
2221
if (!isEmpty(formErrors) && isFunction(this.fieldOptions.onValidationError)) {
2322
this.fieldOptions.onValidationError(this.model, this.schema, formErrors, $event);
2423
} else if (isFunction(this.fieldOptions.onSubmit)) {

‎src/formGenerator.vue‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ div.vue-form-generator(v-if='schema != null')
44
div(v-html="errors")
55
fieldset(v-if="schema.fields", :is='tag')
66
template(v-for='field in fields')
7-
form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options")
7+
form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options", :eventBus="eventBus")
88

99
template(v-for='group in groups')
1010
fieldset(:is='tag', :class='getFieldRowClasses(group)')
1111
legend(v-if='group.legend') {{ group.legend }}
1212
template(v-for='field in group.fields')
13-
form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options")
13+
form-group(v-if='fieldVisible(field)', :field="field", :errors="errors", :model="model", :options="options", :eventBus="eventBus")
1414
</template>
1515

1616
<script>
17+
import Vue from "vue";
1718
import { get as objGet, forEach, isFunction, isNil, isArray } from "lodash";
1819
import formMixin from "./formMixin.js";
1920
import formGroup from "./formGroup.vue";
20-
import { eventBus } from "./event-bus.js";
2121
2222
export default {
2323
name: "formGenerator",
@@ -61,7 +61,9 @@ export default {
6161
},
6262
6363
data() {
64+
const eventBus = new Vue();
6465
return {
66+
eventBus: eventBus,
6567
totalNumberOfFields: 0,
6668
errors: [] // Validation errors
6769
};
@@ -157,9 +159,9 @@ export default {
157159
158160
let formErrors = [];
159161
160-
eventBus.$on("field-deregistering", () => {
162+
this.eventBus.$on("field-deregistering", () => {
161163
console.warn("Fields were deleted during validation process");
162-
eventBus.$emit("fields-validation-terminated", formErrors);
164+
this.eventBus.$emit("fields-validation-terminated", formErrors);
163165
reject(formErrors);
164166
});
165167
@@ -175,14 +177,14 @@ export default {
175177
}
176178
177179
if (fieldsValidated === this.totalNumberOfFields) {
178-
eventBus.$off("field-validated", counter);
180+
this.eventBus.$off("field-validated", counter);
179181
if (objGet(this.options, "validateAfterChanged", false)) {
180-
eventBus.$on("field-validated", this.onFieldValidated);
182+
this.eventBus.$on("field-validated", this.onFieldValidated);
181183
}
182184
this.errors = formErrors;
183185
let isValid = formErrors.length === 0;
184186
this.$emit("validated", isValid, formErrors, this);
185-
eventBus.$emit("fields-validation-terminated", formErrors);
187+
this.eventBus.$emit("fields-validation-terminated", formErrors);
186188
187189
if (isValid) {
188190
resolve();
@@ -192,39 +194,39 @@ export default {
192194
}
193195
};
194196
if (objGet(this.options, "validateAfterChanged", false)) {
195-
eventBus.$off("field-validated", this.onFieldValidated);
197+
this.eventBus.$off("field-validated", this.onFieldValidated);
196198
}
197-
eventBus.$on("field-validated", counter);
198-
eventBus.$emit("validate-fields", this);
199+
this.eventBus.$on("field-validated", counter);
200+
this.eventBus.$emit("validate-fields", this);
199201
});
200202
},
201203
202204
// Clear validation errors
203205
clearValidationErrors() {
204206
this.errors.splice(0);
205-
eventBus.$emit("clear-validation-errors", this.clearValidationErrors);
207+
this.eventBus.$emit("clear-validation-errors", this.clearValidationErrors);
206208
}
207209
},
208210
209211
created() {
210212
if (objGet(this.options, "validateAfterChanged", false)) {
211-
eventBus.$on("field-validated", this.onFieldValidated);
213+
this.eventBus.$on("field-validated", this.onFieldValidated);
212214
}
213-
eventBus.$on("model-updated", this.onModelUpdated);
214-
eventBus.$on("fields-validation-trigger", this.validate);
215-
eventBus.$on("field-registering", () => {
215+
this.eventBus.$on("model-updated", this.onModelUpdated);
216+
this.eventBus.$on("fields-validation-trigger", this.validate);
217+
this.eventBus.$on("field-registering", () => {
216218
this.totalNumberOfFields = this.totalNumberOfFields + 1;
217219
});
218-
eventBus.$on("field-deregistering", () => {
220+
this.eventBus.$on("field-deregistering", () => {
219221
this.totalNumberOfFields = this.totalNumberOfFields - 1;
220222
});
221223
},
222224
beforeDestroy() {
223-
eventBus.$off("field-validated");
224-
eventBus.$off("model-updated");
225-
eventBus.$off("fields-validation-trigger");
226-
eventBus.$off("field-registering");
227-
eventBus.$off("field-deregistering");
225+
this.eventBus.$off("field-validated");
226+
this.eventBus.$off("model-updated");
227+
this.eventBus.$off("fields-validation-trigger");
228+
this.eventBus.$off("field-registering");
229+
this.eventBus.$off("field-deregistering");
228230
}
229231
};
230232
</script>

‎src/formGroup.vue‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
</label>
1010

1111
<div class="field-wrap">
12-
<component ref="child" :is="getFieldType(field)" :model="model" :schema="field" :formOptions="options"></component>
12+
<component ref="child" :is="getFieldType(field)" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" @errors-updated="childValidated"></component>
1313
<div v-if="buttonVisibility(field)" class="buttons">
1414
<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label"></button>
1515
</div>
1616
</div>
1717

1818
<div v-if="field.hint" class="hint" v-html="getValueFromOption(field, 'hint', undefined)"></div>
1919

20-
<div v-if="fieldErrors().length > 0" class="errors help-block">
21-
<span v-for="(error, index) in fieldErrors()" :key="index" v-html="error"></span>
20+
<div v-if="childErrors.length > 0" class="errors help-block">
21+
<span v-for="(error, index) in childErrors" :key="index" v-html="error"></span>
2222
</div>
2323
</div>
2424
</template>
@@ -27,7 +27,6 @@ import { get as objGet, isNil } from "lodash";
2727
import { slugifyFormID } from "./utils/schema";
2828
import formMixin from "./formMixin.js";
2929
import fieldComponents from "./utils/fieldsLoader.js";
30-
// import { eventBus } from "./event-bus.js";
3130
3231
export default {
3332
name: "form-group",
@@ -47,8 +46,16 @@ export default {
4746
default() {
4847
return [];
4948
}
49+
},
50+
eventBus: {
51+
type: Object
5052
}
5153
},
54+
data() {
55+
return {
56+
childErrors: []
57+
};
58+
},
5259
methods: {
5360
// Should field type have a label?
5461
fieldTypeHasLabel(field) {
@@ -78,16 +85,14 @@ export default {
7885
getFieldType(fieldSchema) {
7986
return "field-" + fieldSchema.type;
8087
},
81-
// Child field executed validation
82-
// onFieldValidated(res, errors, field) {
83-
// this.$emit("validated", res, errors, field);
84-
// // eventBus.$emit("validated", res, errors, field);
85-
// },
8688
buttonVisibility(field) {
8789
return field.buttons && field.buttons.length > 0;
8890
},
8991
buttonClickHandler(btn, field, event) {
9092
return btn.onclick.call(this, this.model, field, event, this);
93+
},
94+
childValidated(errors) {
95+
this.childErrors = errors;
9196
}
9297
}
9398
};

‎src/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const schema = require("./utils/schema.js");
33
const validators = require("./utils/validators.js").default;
44
const fieldComponents = require("./utils/fieldsLoader").default;
55
const abstractField = require("./fields/abstractField").default;
6-
const eventBus = require("./event-bus.js").eventBus;
76
const install = (Vue) => {
87
Vue.component("VueFormGenerator", module.exports.component);
98
};
@@ -14,6 +13,5 @@ module.exports = {
1413
validators,
1514
abstractField,
1615
fieldComponents,
17-
eventBus,
1816
install
1917
};

0 commit comments

Comments
 (0)