diff --git a/.eslintrc.js b/.eslintrc.js index 6b62dfa..cf23a56 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,22 +1,42 @@ module.exports = { - root: true, - parserOptions: { - parser: 'babel-eslint', - sourceType: 'module' - }, - // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style - extends: [ - 'standard', - 'plugin:vue/recommended' - ], - env: { - browser: true, - }, - // add your custom rules here - 'rules': { - // allow paren-less arrow functions - 'arrow-parens': 0, - // allow debugger during development - 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 - } + root: true, + + parserOptions: { + parser: 'babel-eslint', + sourceType: 'module', + }, + + // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style + extends: [ + 'standard', + '@vue/standard', + 'plugin:vue/recommended', + ], + + env: { + browser: true, + }, + + rules: { + // allow paren-less arrow functions + 'arrow-parens': 0, + 'comma-dangle': ['error', 'only-multiline'], + 'indent': ['error', 4], + 'max-depth': ['error', 3], + 'max-lines-per-function': ['error', 40], + 'no-console': ['warn', {allow: ['warn', 'error']}], + // allow debugger during development + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'vue/html-closing-bracket-spacing': ['error', { + startTag: 'never', + endTag: 'never', + selfClosingTag: 'always', + }], + 'vue/html-indent': ['error', 4, { + attribute: 1, + closeBracket: 0, + alignAttributesVertically: true, + ignores: [], + }], + }, } diff --git a/build/rollup.config.js b/build/rollup.config.js index 40a816c..904f255 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -5,30 +5,30 @@ import vue from 'rollup-plugin-vue' // Handle .vue SFC files import { terser } from 'rollup-plugin-terser' export default { - input: 'src/Formulario.js', // Path relative to package.json - output: [ - { - name: 'Formulario', - exports: 'default', - globals: { - 'is-plain-object': 'isPlainObject', - 'nanoid/non-secure': 'nanoid', - 'is-url': 'isUrl', - }, - sourcemap: false - } - ], - external: ['nanoid/non-secure'], - plugins: [ - commonjs(), - autoExternal(), - vue({ - css: true, // Dynamically inject css as a diff --git a/examples/main.js b/examples/main.js index b04ace5..4697616 100644 --- a/examples/main.js +++ b/examples/main.js @@ -1,11 +1,10 @@ import Vue from 'vue' -import VueFormulate from '../src/Formulate' +import VueFormulario from '../src/Formulario' import FormulateSpecimens from './FormulateSpecimens.vue' Vue.config.productionTip = false - -Vue.use(VueFormulate) +Vue.use(VueFormulario) new Vue({ - render: h => h(FormulateSpecimens) + render: h => h(FormulateSpecimens) }).$mount('#app') diff --git a/examples/specimens/SpecimenBox.vue b/examples/specimens/SpecimenBox.vue index a848931..a58552f 100644 --- a/examples/specimens/SpecimenBox.vue +++ b/examples/specimens/SpecimenBox.vue @@ -1,30 +1,30 @@ diff --git a/examples/specimens/SpecimenButton.vue b/examples/specimens/SpecimenButton.vue index e4c3a79..576e1ee 100644 --- a/examples/specimens/SpecimenButton.vue +++ b/examples/specimens/SpecimenButton.vue @@ -1,19 +1,19 @@ diff --git a/examples/specimens/SpecimenFile.vue b/examples/specimens/SpecimenFile.vue index 05e8344..37a7955 100644 --- a/examples/specimens/SpecimenFile.vue +++ b/examples/specimens/SpecimenFile.vue @@ -1,21 +1,21 @@ diff --git a/examples/specimens/SpecimenGroup.vue b/examples/specimens/SpecimenGroup.vue index 15ad949..8d42c04 100644 --- a/examples/specimens/SpecimenGroup.vue +++ b/examples/specimens/SpecimenGroup.vue @@ -1,55 +1,49 @@ - - diff --git a/examples/specimens/SpecimenSelect.vue b/examples/specimens/SpecimenSelect.vue index d3f44bf..f291e4c 100644 --- a/examples/specimens/SpecimenSelect.vue +++ b/examples/specimens/SpecimenSelect.vue @@ -1,14 +1,14 @@ diff --git a/examples/specimens/SpecimenSlider.vue b/examples/specimens/SpecimenSlider.vue index 83af46b..0955b11 100644 --- a/examples/specimens/SpecimenSlider.vue +++ b/examples/specimens/SpecimenSlider.vue @@ -1,16 +1,16 @@ diff --git a/examples/specimens/SpecimenText.vue b/examples/specimens/SpecimenText.vue index fec6f5a..3b65271 100644 --- a/examples/specimens/SpecimenText.vue +++ b/examples/specimens/SpecimenText.vue @@ -1,117 +1,117 @@ diff --git a/examples/specimens/SpecimenTextarea.vue b/examples/specimens/SpecimenTextarea.vue index f3d52b0..2aa0eff 100644 --- a/examples/specimens/SpecimenTextarea.vue +++ b/examples/specimens/SpecimenTextarea.vue @@ -1,13 +1,13 @@ diff --git a/package.json b/package.json index f965c79..81e28df 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "@vue/cli-plugin-eslint": "^4.3.1", "@vue/cli-service": "^4.5.4", "@vue/component-compiler-utils": "^3.1.2", + "@vue/eslint-config-standard": "^5.1.2", "@vue/test-utils": "^1.0.2", "autoprefixer": "^9.7.6", "babel-core": "^7.0.0-bridge.0", diff --git a/src/FileUpload.js b/src/FileUpload.js index 02420ea..cf2226a 100644 --- a/src/FileUpload.js +++ b/src/FileUpload.js @@ -1,5 +1,6 @@ import nanoid from 'nanoid/non-secure' +// noinspection JSUnusedGlobalSymbols /** * The file upload class holds and represents a file’s upload state durring * the upload flow. @@ -7,8 +8,9 @@ import nanoid from 'nanoid/non-secure' class FileUpload { /** * Create a file upload object. - * @param {FileList} fileList + * @param {FileList} input * @param {object} context + * @param {object} options */ constructor (input, context, options = {}) { this.input = input @@ -27,7 +29,6 @@ class FileUpload { /** * Given a pre-existing array of files, create a faux FileList. * @param {array} items expects an array of objects [{ url: '/uploads/file.pdf' }] - * @param {string} pathKey the object-key to access the url (defaults to "url") */ rehydrateFileList (items) { const fauxFileList = items.reduce((fileList, item) => { @@ -48,15 +49,12 @@ class FileUpload { /** * Produce an array of files and alert the callback. - * @param {FileList} + * @param {FileList} fileList */ addFileList (fileList) { for (let i = 0; i < fileList.length; i++) { const file = fileList[i] const uuid = nanoid() - const removeFile = function () { - this.removeFile(uuid) - } this.files.push({ progress: false, error: false, @@ -66,7 +64,7 @@ class FileUpload { file, uuid, path: false, - removeFile: removeFile.bind(this), + removeFile: () => this.removeFile(uuid), previewData: file.previewData || false }) } @@ -86,16 +84,11 @@ class FileUpload { * https://github.com/axios/axios/issues/737 */ uploaderIsAxios () { - if ( - this.hasUploader && + return this.hasUploader && typeof this.context.uploader.request === 'function' && typeof this.context.uploader.get === 'function' && typeof this.context.uploader.delete === 'function' && typeof this.context.uploader.post === 'function' - ) { - return true - } - return false } /** diff --git a/src/Formulario.js b/src/Formulario.js index 58b6780..1a9ff33 100644 --- a/src/Formulario.js +++ b/src/Formulario.js @@ -3,13 +3,15 @@ import rules from './libs/rules' import mimes from './libs/mimes' import FileUpload from './FileUpload' import RuleValidationMessages from './RuleValidationMessages' -import { arrayify, parseLocale, has } from './libs/utils' +import { arrayify } from './libs/utils' import isPlainObject from 'is-plain-object' import fauxUploader from './libs/faux-uploader' + import FormularioForm from './FormularioForm.vue' import FormularioInput from './FormularioInput.vue' import FormularioGrouping from './FormularioGrouping.vue' +// noinspection JSUnusedGlobalSymbols /** * The base formulario library. */ @@ -23,7 +25,7 @@ class Formulario { components: { FormularioForm, FormularioInput, - FormularioGrouping, + FormularioGrouping }, library, rules, @@ -34,7 +36,7 @@ class Formulario { fileUrlKey: 'url', uploadJustCompleteDuration: 1000, errorHandler: (err) => err, - plugins: [ RuleValidationMessages ], + plugins: [RuleValidationMessages], validationMessages: {}, idPrefix: 'formulario-' } @@ -48,14 +50,16 @@ class Formulario { install (Vue, options) { Vue.prototype.$formulario = this this.options = this.defaults - var plugins = this.defaults.plugins + let plugins = this.defaults.plugins if (options && Array.isArray(options.plugins) && options.plugins.length) { - plugins = plugins.concat(options.plugins) + plugins = plugins.concat(options.plugins) } plugins.forEach(plugin => (typeof plugin === 'function') ? plugin(this) : null) this.extend(options || {}) - for (var componentName in this.options.components) { - Vue.component(componentName, this.options.components[componentName]) + for (const componentName in this.options.components) { + if (Object.prototype.hasOwnProperty.call(this.options.components, componentName)) { + Vue.component(componentName, this.options.components[componentName]) + } } } @@ -95,9 +99,10 @@ class Formulario { * @param {boolean} concatArrays */ merge (base, mergeWith, concatArrays = true) { - var merged = {} - for (var key in base) { - if (mergeWith.hasOwnProperty(key)) { + const merged = {} + + for (const key in base) { + if (Object.prototype.hasOwnProperty.call(mergeWith, key)) { if (isPlainObject(mergeWith[key]) && isPlainObject(base[key])) { merged[key] = this.merge(base[key], mergeWith[key], concatArrays) } else if (concatArrays && Array.isArray(base[key]) && Array.isArray(mergeWith[key])) { @@ -109,11 +114,13 @@ class Formulario { merged[key] = base[key] } } - for (var prop in mergeWith) { - if (!merged.hasOwnProperty(prop)) { + + for (const prop in mergeWith) { + if (!Object.prototype.hasOwnProperty.call(merged, prop)) { merged[prop] = mergeWith[prop] } } + return merged } @@ -122,9 +129,10 @@ class Formulario { * @param {string} type */ classify (type) { - if (this.options.library.hasOwnProperty(type)) { + if (Object.prototype.hasOwnProperty.call(this.options.library, type)) { return this.options.library[type].classification } + return 'unknown' } @@ -133,9 +141,10 @@ class Formulario { * @param {string} type */ component (type) { - if (this.options.library.hasOwnProperty(type)) { + if (Object.prototype.hasOwnProperty.call(this.options.library, type)) { return this.options.library[type].component } + return false } @@ -151,16 +160,16 @@ class Formulario { * Get the validation message for a particular error. */ validationMessage (rule, validationContext, vm) { - if (this.options.validationMessages.hasOwnProperty(rule)) { + if (Object.prototype.hasOwnProperty.call(this.options.validationMessages, rule)) { return this.options.validationMessages[rule](vm, validationContext) } else { - return this.options.validationMessages['default'](vm, validationContext) + return this.options.validationMessages.default(vm, validationContext) } } /** * Given an instance of a FormularioForm register it. - * @param {vm} form + * @param {Vue} form */ register (form) { if (form.$options.name === 'FormularioForm' && form.name) { @@ -170,7 +179,7 @@ class Formulario { /** * Given an instance of a form, remove it from the registry. - * @param {vm} form + * @param {Vue} form */ deregister (form) { if ( @@ -188,7 +197,7 @@ class Formulario { * * @param {error} err * @param {string} formName - * @param {error} + * @param {boolean} skip */ handle (err, formName, skip = false) { const e = skip ? err : this.options.errorHandler(err, formName) diff --git a/src/FormularioFiles.vue b/src/FormularioFiles.vue index fd0b03d..83230df 100644 --- a/src/FormularioFiles.vue +++ b/src/FormularioFiles.vue @@ -16,13 +16,16 @@ > +
+
+
+
({}) }, + values: { type: [Object, Boolean], default: false }, + errors: { type: [Object, Boolean], default: false }, + formErrors: { type: Array, default: () => ([]) } }, + data () { return { ...useRegistry(this), @@ -58,51 +66,58 @@ export default { namedFieldErrors: {} } }, + computed: { ...useRegistryComputed(), + classes () { - const classes = { 'formulario-form': true } - if (this.name) { - classes[`formulario-form--${this.name}`] = true + return { + 'formulario-form': true, + [`formulario-form--${this.name}`]: !!this.name } - return classes }, + mergedFormErrors () { return this.formErrors.concat(this.namedErrors) }, + mergedFieldErrors () { const errors = {} + if (this.errors) { for (const fieldName in this.errors) { errors[fieldName] = arrayify(this.errors[fieldName]) } } + for (const fieldName in this.namedFieldErrors) { errors[fieldName] = arrayify(this.namedFieldErrors[fieldName]) } + return errors }, + hasFormErrorObservers () { return !!this.errorObservers.filter(o => o.type === 'form').length } }, + watch: { formularioValue: { handler (values) { - if (this.isVmodeled && - values && - typeof values === 'object' - ) { + if (this.isVmodeled && values && typeof values === 'object') { this.setValues(values) } }, deep: true }, + mergedFormErrors (errors) { this.errorObservers .filter(o => o.type === 'form') .forEach(o => o.callback(errors)) }, + mergedFieldErrors: { handler (errors) { this.errorObservers @@ -112,20 +127,25 @@ export default { immediate: true } }, + created () { this.$formulario.register(this) this.applyInitialValues() }, + destroyed () { this.$formulario.deregister(this) }, + methods: { ...useRegistryMethods(), + applyErrors ({ formErrors, inputErrors }) { // given an object of errors, apply them to this form this.namedErrors = formErrors this.namedFieldErrors = inputErrors }, + addErrorObserver (observer) { if (!this.errorObservers.find(obs => observer.callback === obs.callback)) { this.errorObservers.push(observer) @@ -136,14 +156,17 @@ export default { } } }, + removeErrorObserver (observer) { this.errorObservers = this.errorObservers.filter(obs => obs.callback !== observer) }, + registerErrorComponent (component) { if (!this.errorComponents.includes(component)) { this.errorComponents.push(component) } }, + formSubmitted () { // perform validation here this.showErrors() @@ -159,6 +182,7 @@ export default { return undefined }) }, + formularioFieldValidation (errorObject) { this.$emit('validation', errorObject) } diff --git a/src/FormularioGrouping.vue b/src/FormularioGrouping.vue index c950fb2..32b2629 100644 --- a/src/FormularioGrouping.vue +++ b/src/FormularioGrouping.vue @@ -10,33 +10,38 @@