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" },