diff --git a/dev/projects/basic/main.js b/dev/projects/basic/main.js
index 93c7785b..b8fa3f8f 100644
--- a/dev/projects/basic/main.js
+++ b/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);
diff --git a/dev/projects/checklist/app.vue b/dev/projects/checklist/app.vue
index 9db66144..c8bc522d 100644
--- a/dev/projects/checklist/app.vue
+++ b/dev/projects/checklist/app.vue
@@ -16,7 +16,8 @@
diff --git a/dev/projects/full/main.js b/dev/projects/full/main.js
index 93c7785b..a3167d5f 100644
--- a/dev/projects/full/main.js
+++ b/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);
diff --git a/dev/projects/full/schema.js b/dev/projects/full/schema.js
index b92db3bc..bfa4fb41 100644
--- a/dev/projects/full/schema.js
+++ b/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) => {
diff --git a/dev/projects/grouping/main.js b/dev/projects/grouping/main.js
index 93c7785b..d043bb06 100644
--- a/dev/projects/grouping/main.js
+++ b/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);
diff --git a/dev/projects/multi/main.js b/dev/projects/multi/main.js
index 93c7785b..b8fa3f8f 100644
--- a/dev/projects/multi/main.js
+++ b/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);
diff --git a/dev/projects/multiselect/main.js b/dev/projects/multiselect/main.js
index 93c7785b..6aef8a8e 100644
--- a/dev/projects/multiselect/main.js
+++ b/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);
diff --git a/dev/projects/picker/main.js b/dev/projects/picker/main.js
index 93c7785b..e6fd8adb 100644
--- a/dev/projects/picker/main.js
+++ b/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);
diff --git a/src/fields/core/fieldCheckbox.vue b/src/fields/core/fieldCheckbox.vue
index 6f7eef4c..308ffc5c 100644
--- a/src/fields/core/fieldCheckbox.vue
+++ b/src/fields/core/fieldCheckbox.vue
@@ -6,6 +6,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-checkbox",
mixins: [abstractField]
};
diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue
index 97ca2a8b..4e4f7ca5 100644
--- a/src/fields/core/fieldChecklist.vue
+++ b/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() {
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
index 2327783a..80c1cd8c 100644
--- a/src/fields/core/fieldInput.vue
+++ b/src/fields/core/fieldInput.vue
@@ -52,6 +52,7 @@ const DATETIME_FORMATS = {
};
export default {
+ name: "field-input",
mixins: [abstractField],
computed: {
inputType() {
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
index 901467e7..2da49ca6 100644
--- a/src/fields/core/fieldLabel.vue
+++ b/src/fields/core/fieldLabel.vue
@@ -6,6 +6,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-label",
mixins: [abstractField]
};
diff --git a/src/fields/core/fieldRadios.vue b/src/fields/core/fieldRadios.vue
index 23d417be..55784cac 100644
--- a/src/fields/core/fieldRadios.vue
+++ b/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: {
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
index f05f6e45..19cccca3 100644
--- a/src/fields/core/fieldSelect.vue
+++ b/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: {
diff --git a/src/fields/core/fieldSubmit.vue b/src/fields/core/fieldSubmit.vue
index c566eb36..e1235d16 100644
--- a/src/fields/core/fieldSubmit.vue
+++ b/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: {
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
index 86b80a3b..310e3a91 100644
--- a/src/fields/core/fieldTextArea.vue
+++ b/src/fields/core/fieldTextArea.vue
@@ -17,6 +17,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-textArea",
mixins: [abstractField]
};
diff --git a/src/fields/core/fieldUpload.vue b/src/fields/core/fieldUpload.vue
index 455a77d3..fd940250 100644
--- a/src/fields/core/fieldUpload.vue
+++ b/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) {
diff --git a/src/fields/optional/fieldCleave.vue b/src/fields/optional/fieldCleave.vue
index 64bc6d6a..49b6c9ca 100644
--- a/src/fields/optional/fieldCleave.vue
+++ b/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() {
diff --git a/src/fields/optional/fieldDateTimePicker.vue b/src/fields/optional/fieldDateTimePicker.vue
index 98afbc9d..01923257 100644
--- a/src/fields/optional/fieldDateTimePicker.vue
+++ b/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: {
diff --git a/src/fields/optional/fieldGoogleAddress.vue b/src/fields/optional/fieldGoogleAddress.vue
index 67e1d340..3b643a68 100644
--- a/src/fields/optional/fieldGoogleAddress.vue
+++ b/src/fields/optional/fieldGoogleAddress.vue
@@ -13,6 +13,7 @@ import { isFunction } from "lodash";
/* global google */
export default {
+ name: "field-googleAddress",
mixins: [abstractField],
data() {
diff --git a/src/fields/optional/fieldImage.vue b/src/fields/optional/fieldImage.vue
index fa9023ca..65a6f044 100644
--- a/src/fields/optional/fieldImage.vue
+++ b/src/fields/optional/fieldImage.vue
@@ -10,6 +10,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-image",
mixins: [abstractField],
computed: {
diff --git a/src/fields/optional/fieldMasked.vue b/src/fields/optional/fieldMasked.vue
index fddb9281..356fc6b7 100644
--- a/src/fields/optional/fieldMasked.vue
+++ b/src/fields/optional/fieldMasked.vue
@@ -7,6 +7,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-masked",
mixins: [abstractField],
mounted() {
diff --git a/src/fields/optional/fieldNoUiSlider.vue b/src/fields/optional/fieldNoUiSlider.vue
index 29ab3f4a..3dd5b868 100644
--- a/src/fields/optional/fieldNoUiSlider.vue
+++ b/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() {
diff --git a/src/fields/optional/fieldPikaday.vue b/src/fields/optional/fieldPikaday.vue
index 73c609f7..b844e7ab 100644
--- a/src/fields/optional/fieldPikaday.vue
+++ b/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 };
diff --git a/src/fields/optional/fieldRangeSlider.vue b/src/fields/optional/fieldRangeSlider.vue
index f936632a..25caaeb3 100644
--- a/src/fields/optional/fieldRangeSlider.vue
+++ b/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() {
diff --git a/src/fields/optional/fieldSelectEx.vue b/src/fields/optional/fieldSelectEx.vue
index 168bb30e..acddb84a 100644
--- a/src/fields/optional/fieldSelectEx.vue
+++ b/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: {
diff --git a/src/fields/optional/fieldSpectrum.vue b/src/fields/optional/fieldSpectrum.vue
index d5c81815..458df756 100644
--- a/src/fields/optional/fieldSpectrum.vue
+++ b/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() {
diff --git a/src/fields/optional/fieldStaticMap.vue b/src/fields/optional/fieldStaticMap.vue
index 89e5931b..7afc759d 100644
--- a/src/fields/optional/fieldStaticMap.vue
+++ b/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: {
diff --git a/src/fields/optional/fieldSwitch.vue b/src/fields/optional/fieldSwitch.vue
index 59d95342..85eae7b5 100644
--- a/src/fields/optional/fieldSwitch.vue
+++ b/src/fields/optional/fieldSwitch.vue
@@ -9,6 +9,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-switch",
mixins: [abstractField],
methods: {
diff --git a/src/fields/optional/fieldVueMultiSelect.vue b/src/fields/optional/fieldVueMultiSelect.vue
index dbaf63dc..5a2642e9 100644
--- a/src/fields/optional/fieldVueMultiSelect.vue
+++ b/src/fields/optional/fieldVueMultiSelect.vue
@@ -48,6 +48,7 @@
import abstractField from "../abstractField";
export default {
+ name: "field-vueMultiSelect",
mixins: [abstractField],
computed: {
options() {
diff --git a/src/formElement.vue b/src/formElement.vue
index 265a76e4..86ab3105 100644
--- a/src/formElement.vue
+++ b/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: {
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index 5b982edd..f060bf50 100644
--- a/src/formGenerator.vue
+++ b/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: {
diff --git a/src/index.js b/src/index.js
index 583a215b..d64374f2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,23 @@
-const component = require("./formGenerator.vue").default;
-const schema = require("./utils/schema.js");
-const validators = require("./utils/validators.js").default;
-const fieldComponents = require("./utils/fieldsLoader.js").default;
-const abstractField = require("./fields/abstractField.js").default;
-const install = (Vue) => {
- Vue.component("VueFormGenerator", module.exports.component);
+import component from "./formGenerator.vue";
+import * as schema from "./utils/schema.js";
+import validators from "./utils/validators.js";
+import abstractField from "./fields/abstractField.js";
+
+const install = (Vue, options = {}) => {
+ if (options.fields) {
+ options.fields.forEach((field) => {
+ if (typeof field.name !== "undefined") {
+ Vue.component(field.name, field);
+ }
+ });
+ }
+ Vue.component("VueFormGenerator", component);
};
-module.exports = {
+export default {
component,
schema,
validators,
abstractField,
- fieldComponents,
install
};
diff --git a/src/utils/fieldsLoader.js b/src/utils/fieldsLoader.js
index 77f9af0c..ea6553cd 100644
--- a/src/utils/fieldsLoader.js
+++ b/src/utils/fieldsLoader.js
@@ -1,21 +1,49 @@
-let fieldComponents = {};
+// core
+import fieldCheckbox from "../fields/core/fieldCheckbox.vue";
+import fieldChecklist from "../fields/core/fieldChecklist.vue";
+import fieldInput from "../fields/core/fieldInput.vue";
+import fieldLabel from "../fields/core/fieldLabel.vue";
+import fieldRadios from "../fields/core/fieldRadios.vue";
+import fieldSelect from "../fields/core/fieldSelect.vue";
+import fieldSubmit from "../fields/core/fieldSubmit.vue";
+import fieldTextArea from "../fields/core/fieldTextArea.vue";
+import fieldUpload from "../fields/core/fieldUpload.vue";
+// optional
+import fieldCleave from "../fields/optional/fieldCleave.vue";
+import fieldDateTimePicker from "../fields/optional/fieldDateTimePicker.vue";
+import fieldGoogleAddress from "../fields/optional/fieldGoogleAddress.vue";
+import fieldImage from "../fields/optional/fieldImage.vue";
+import fieldMasked from "../fields/optional/fieldMasked.vue";
+import fieldNoUiSlider from "../fields/optional/fieldNoUiSlider.vue";
+import fieldPikaday from "../fields/optional/fieldPikaday.vue";
+import fieldRangeSlider from "../fields/optional/fieldRangeSlider.vue";
+import fieldSelectEx from "../fields/optional/fieldSelectEx.vue";
+import fieldSpectrum from "../fields/optional/fieldSpectrum.vue";
+import fieldStaticMap from "../fields/optional/fieldStaticMap.vue";
+import fieldSwitch from "../fields/optional/fieldSwitch.vue";
+import fieldVueMultiSelect from "../fields/optional/fieldVueMultiSelect.vue";
-let coreFields = require.context("../fields/core", false, /^\.\/field([\w-_]+)\.vue$/);
-
-const getCompName = (key) => {
- return key.replace(/^\.\//, "").replace(/\.vue/, "");
+export {
+ fieldCheckbox,
+ fieldChecklist,
+ fieldInput,
+ fieldLabel,
+ fieldRadios,
+ fieldSelect,
+ fieldSubmit,
+ fieldTextArea,
+ fieldUpload,
+ fieldCleave,
+ fieldDateTimePicker,
+ fieldGoogleAddress,
+ fieldImage,
+ fieldMasked,
+ fieldNoUiSlider,
+ fieldPikaday,
+ fieldRangeSlider,
+ fieldSelectEx,
+ fieldSpectrum,
+ fieldStaticMap,
+ fieldSwitch,
+ fieldVueMultiSelect
};
-
-coreFields.keys().forEach((key) => {
- fieldComponents[getCompName(key)] = coreFields(key).default;
-});
-
-if (process.env.VUE_APP_FULL_BUNDLE === "true") {
- let optionalFields = require.context("../fields/optional", false, /^\.\/field([\w-_]+)\.vue$/);
-
- optionalFields.keys().forEach((key) => {
- fieldComponents[getCompName(key)] = optionalFields(key).default;
- });
-}
-
-export default fieldComponents;
diff --git a/tests/unit/specs/VueFormGenerator.spec.js b/tests/unit/specs/VueFormGenerator.spec.js
index 58dee415..b316838c 100644
--- a/tests/unit/specs/VueFormGenerator.spec.js
+++ b/tests/unit/specs/VueFormGenerator.spec.js
@@ -2,10 +2,59 @@
import { mount, createLocalVue } from "@vue/test-utils";
import Vue from "vue";
-import VueFormGenerator from "@/index.js";
+import VueFormGenerator from "@";
+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";
const localVue = createLocalVue();
-localVue.use(VueFormGenerator);
+localVue.use(VueFormGenerator, {
+ fields: [
+ fieldCheckbox,
+ fieldChecklist,
+ fieldInput,
+ fieldLabel,
+ fieldRadios,
+ fieldSelect,
+ fieldSubmit,
+ fieldTextArea,
+ fieldUpload,
+ fieldCleave,
+ fieldDateTimePicker,
+ fieldGoogleAddress,
+ fieldImage,
+ fieldMasked,
+ fieldNoUiSlider,
+ fieldPikaday,
+ fieldRangeSlider,
+ fieldSelectEx,
+ fieldSpectrum,
+ fieldStaticMap,
+ fieldSwitch,
+ fieldVueMultiSelect
+ ]
+});
let wrapper;
const defaultTemplate = ``;
diff --git a/tests/unit/specs/fields/fieldSelect.spec.js b/tests/unit/specs/fields/fieldSelect.spec.js
index fece37c4..fd768726 100644
--- a/tests/unit/specs/fields/fieldSelect.spec.js
+++ b/tests/unit/specs/fields/fieldSelect.spec.js
@@ -144,6 +144,9 @@ describe("fieldSelect.vue", () => {
type: "select",
label: "Cities",
model: "city",
+ fieldOptions: {
+ value: "id"
+ },
values: [
{ id: 1, name: "London" },
{ id: 2, name: "Paris" },