Improve field loading method

dev/projects/basic/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldCheckbox, fieldInput, fieldSubmit } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldCheckbox, fieldInput, fieldSubmit]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/checklist/app.vue

@@ -16,7 +16,8 @@
 
 <script>
 /* eslint no-console: 0 */
-import { validators } from "../../../src";
+import VueFormGenerator from "../../../src/index.js";
+const validators = VueFormGenerator.validators;
 import mixinUtils from "../../mixins/utils.js";
 
 export default {

dev/projects/checklist/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldChecklist } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldChecklist]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/custom/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldInput } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldInput]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/full/app.vue

@@ -36,7 +36,7 @@
 <script>
 /* eslint no-console: 0 */
 import Vue from "vue";
-import VueFormGenerator from "../../../src";
+import VueFormGenerator from "@";
 import DataTable from "./dataTable.vue";
 import Fakerator from "fakerator";
 
@@ -47,14 +47,8 @@ import mixinUtils from "../../mixins/utils.js";
 import Multiselect from "vue-multiselect";
 Vue.component("multiselect", Multiselect);
 
-// Test custom field
-import FieldAwesome from "./fieldAwesome.vue";
-Vue.component("fieldAwesome", FieldAwesome);
-
 import { each, cloneDeep, merge } from "lodash";
 
-Vue.use(VueFormGenerator);
-
 let fakerator = new Fakerator();
 
 export default {

dev/projects/full/fieldAwesome.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script>
-import VueFormGenerator from "../../../src";
+import VueFormGenerator from "@";
 
 export default {
+	name: "field-awesome",
 	mixins: [VueFormGenerator.abstractField]
 };
 </script>

dev/projects/full/main.js

@@ -1,7 +1,60 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import {
+	fieldCheckbox,
+	fieldChecklist,
+	fieldInput,
+	fieldLabel,
+	fieldRadios,
+	fieldSelect,
+	fieldSubmit,
+	fieldTextArea,
+	fieldUpload,
+	fieldCleave,
+	fieldDateTimePicker,
+	fieldGoogleAddress,
+	fieldImage,
+	fieldMasked,
+	fieldNoUiSlider,
+	fieldPikaday,
+	fieldRangeSlider,
+	fieldSelectEx,
+	fieldSpectrum,
+	fieldStaticMap,
+	fieldSwitch,
+	fieldVueMultiSelect
+} from "@/utils/fieldsLoader.js";
+// Test custom field
+import fieldAwesome from "./fieldAwesome.vue";
+
+Vue.use(VueFormGenerator, {
+	fields: [
+		fieldAwesome,
+		fieldCheckbox,
+		fieldChecklist,
+		fieldInput,
+		fieldLabel,
+		fieldRadios,
+		fieldSelect,
+		fieldSubmit,
+		fieldTextArea,
+		fieldUpload,
+		fieldCleave,
+		fieldDateTimePicker,
+		fieldGoogleAddress,
+		fieldImage,
+		fieldMasked,
+		fieldNoUiSlider,
+		fieldPikaday,
+		fieldRangeSlider,
+		fieldSelectEx,
+		fieldSpectrum,
+		fieldStaticMap,
+		fieldSwitch,
+		fieldVueMultiSelect
+	]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/full/schema.js

@@ -1,7 +1,8 @@
 /* eslint no-console: 0 */
 import fecha from "fecha";
 
-import { validators } from "../../../src";
+import VueFormGenerator from "@";
+const validators = VueFormGenerator.validators;
 
 let customAsyncValidator = function(value) {
 	return new Promise((resolve, reject) => {

dev/projects/grouping/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldInput } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldInput]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/multi/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldCheckbox, fieldInput, fieldSubmit } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldCheckbox, fieldInput, fieldSubmit]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/multiselect/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldVueMultiSelect } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldVueMultiSelect]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

dev/projects/picker/main.js

@@ -1,7 +1,10 @@
 import Vue from "vue";
 
 import VueFormGenerator from "@";
-Vue.use(VueFormGenerator);
+import { fieldDateTimePicker } from "@/utils/fieldsLoader.js";
+Vue.use(VueFormGenerator, {
+	fields: [fieldDateTimePicker]
+});
 
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);

src/fields/core/fieldCheckbox.vue

@@ -6,6 +6,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-checkbox",
 	mixins: [abstractField]
 };
 </script>

src/fields/core/fieldChecklist.vue

@@ -24,6 +24,7 @@ import abstractField from "../abstractField";
 import { slugify } from "../../utils/schema";
 
 export default {
+	name: "field-checklist",
 	mixins: [abstractField],
 
 	data() {

src/fields/core/fieldInput.vue

@@ -52,6 +52,7 @@ const DATETIME_FORMATS = {
 };
 
 export default {
+	name: "field-input",
 	mixins: [abstractField],
 	computed: {
 		inputType() {

src/fields/core/fieldLabel.vue

@@ -6,6 +6,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-label",
 	mixins: [abstractField]
 };
 </script>

src/fields/core/fieldRadios.vue

@@ -11,6 +11,7 @@ import { isObject } from "lodash";
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-radios",
 	mixins: [abstractField],
 
 	computed: {

src/fields/core/fieldSelect.vue

@@ -14,6 +14,7 @@ import { isObject, isNil, find } from "lodash";
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-select",
 	mixins: [abstractField],
 
 	computed: {

src/fields/core/fieldSubmit.vue

@@ -7,6 +7,7 @@ import abstractField from "../abstractField";
 import { isFunction, isEmpty } from "lodash";
 
 export default {
+	name: "field-submit",
 	mixins: [abstractField],
 
 	methods: {

src/fields/core/fieldTextArea.vue

@@ -17,6 +17,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-textArea",
 	mixins: [abstractField]
 };
 </script>

src/fields/core/fieldUpload.vue

@@ -19,6 +19,7 @@ import abstractField from "../abstractField";
 import { isFunction } from "lodash";
 
 export default {
+	name: "field-upload",
 	mixins: [abstractField],
 	methods: {
 		onChange($event) {

src/fields/optional/fieldCleave.vue

@@ -7,6 +7,7 @@ import abstractField from "../abstractField";
 import { defaults } from "lodash";
 
 export default {
+	name: "field-cleave",
 	mixins: [abstractField],
 
 	data() {

src/fields/optional/fieldDateTimePicker.vue

@@ -12,6 +12,7 @@ import { defaults } from "lodash";
 import dateFieldHelper from "../../utils/dateFieldHelper";
 
 export default {
+	name: "field-dateTimePicker",
 	mixins: [abstractField],
 
 	methods: {

src/fields/optional/fieldGoogleAddress.vue

@@ -13,6 +13,7 @@ import { isFunction } from "lodash";
 
 /* global google */
 export default {
+	name: "field-googleAddress",
 	mixins: [abstractField],
 
 	data() {

src/fields/optional/fieldImage.vue

@@ -10,6 +10,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-image",
 	mixins: [abstractField],
 
 	computed: {

src/fields/optional/fieldMasked.vue

@@ -7,6 +7,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-masked",
 	mixins: [abstractField],
 
 	mounted() {

src/fields/optional/fieldNoUiSlider.vue

@@ -7,6 +7,7 @@ import abstractField from "../abstractField";
 import { isArray, defaults } from "lodash";
 
 export default {
+	name: "field-noUiSlider",
 	mixins: [abstractField],
 
 	data() {

src/fields/optional/fieldPikaday.vue

@@ -8,6 +8,7 @@ import { defaults } from "lodash";
 import dateFieldHelper from "../../utils/dateFieldHelper";
 
 export default {
+	name: "field-pikaday",
 	mixins: [abstractField],
 	data() {
 		return { picker: null };

src/fields/optional/fieldRangeSlider.vue

@@ -8,6 +8,7 @@ import abstractField from "../abstractField";
 import { defaults, isArray } from "lodash";
 
 export default {
+	name: "field-rangeSlider",
 	mixins: [abstractField],
 
 	data() {

src/fields/optional/fieldSelectEx.vue

@@ -10,6 +10,7 @@ import { isObject } from "lodash";
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-selectex",
 	mixins: [abstractField],
 
 	computed: {

src/fields/optional/fieldSpectrum.vue

@@ -7,6 +7,7 @@
 import abstractField from "../abstractField";
 import { defaults } from "lodash";
 export default {
+	name: "field-spectrum",
 	mixins: [abstractField],
 
 	data() {

src/fields/optional/fieldStaticMap.vue

@@ -7,6 +7,7 @@ import abstractField from "../abstractField";
 import { defaults } from "lodash";
 
 export default {
+	name: "field-staticmap",
 	mixins: [abstractField],
 
 	computed: {

src/fields/optional/fieldSwitch.vue

@@ -9,6 +9,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-switch",
 	mixins: [abstractField],
 
 	methods: {

src/fields/optional/fieldVueMultiSelect.vue

@@ -48,6 +48,7 @@
 import abstractField from "../abstractField";
 
 export default {
+	name: "field-vueMultiSelect",
 	mixins: [abstractField],
 	computed: {
 		options() {

src/formElement.vue

@@ -25,11 +25,9 @@
 import { get as objGet, isArray, isFunction, isNil } from "lodash";
 import { slugifyFormID } from "./utils/schema";
 import formMixin from "./formMixin.js";
-import fieldComponents from "./utils/fieldsLoader.js";
 
 export default {
 	name: "form-element",
-	components: fieldComponents,
 	mixins: [formMixin],
 	props: {
 		model: {

src/formGenerator.vue

@@ -46,7 +46,7 @@ import formGroup from "./formGroup.vue";
 import formElement from "./formElement.vue";
 
 export default {
-	name: "formGenerator",
+	name: "form-generator",
 	components: { formGroup, formElement },
 	props: {
 		schema: {