diff --git a/.eslintrc.js b/.eslintrc.js index 17ea4db..228e2a2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,30 +1,27 @@ module.exports = { root: true, - parserOptions: { - parser: '@typescript-eslint/parser', - sourceType: 'module', - }, - - plugins: ['@typescript-eslint'], - - // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style - extends: [ - 'standard', - '@vue/standard', - '@vue/typescript', - 'plugin:@typescript-eslint/recommended', - 'plugin:vue/recommended', - ], - env: { browser: true, }, + parserOptions: { + parser: '@typescript-eslint/parser', + }, + + plugins: [ + '@typescript-eslint', + 'vue', + ], + + // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style + extends: [ + 'plugin:@typescript-eslint/eslint-recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:vue/recommended', + ], + rules: { - '@typescript-eslint/camelcase': ['error', { - allow: ['^__Formulario'], - }], '@typescript-eslint/no-empty-function': 'off', '@typescript-eslint/no-explicit-any': 'off', // @TODO '@typescript-eslint/no-unused-vars': ['error'], // @TODO diff --git a/build/rollup.config.js b/build/rollup.config.js index c9f7f52..384e2fc 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -9,7 +9,6 @@ export default { input: 'src/index.ts', output: [{ name: 'Formulario', - exports: 'default', globals: { 'is-plain-object': 'isPlainObject', 'is-url': 'isUrl', diff --git a/build/rollup.iife.config.js b/build/rollup.iife.config.js index e817a01..662e639 100644 --- a/build/rollup.iife.config.js +++ b/build/rollup.iife.config.js @@ -11,7 +11,6 @@ export default { input: 'src/index.ts', output: { name: 'VueFormulario', - exports: 'default', format: 'iife', globals: { 'is-plain-object': 'isPlainObject', diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..01e6583 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,94 @@ +// noinspection JSUnusedGlobalSymbols + +import type { Vue } from 'vue/types/vue' +import type { PluginObject } from 'vue/types/plugin' + +import type { DefineComponent } from './types/vue' + +import type { FormularioFormConstructor } from './types/form' + +import type { + ModelGetConverter, + ModelSetConverter, + ValidationBehaviour, + UnregisterBehaviour, +} from './types/field' + +import type { + ValidationMessageFn, + ValidationMessageI18NFn, + ValidationRuleFn, + Violation, +} from './types/validation' + +import type { Options } from './types/plugin' + +declare const FormularioForm: FormularioFormConstructor + +export { FormularioForm } + +declare const FormularioField: DefineComponent<{ + name: string; + value?: unknown; + validation?: string|any[]; + /** Defaults to 'demand' */ + validationBehavior?: ValidationBehaviour; + validationRules?: Record; + validationMessages?: Record; + errorsDisabled?: boolean; + modelGetConverter?: ModelGetConverter; + modelSetConverter?: ModelSetConverter; + /** Defaults to 'none' */ + unregisterBehavior?: UnregisterBehaviour; + tag?: string; +}, { + runValidation(): Promise; + hasValidationErrors (): Promise; + /** @internal */ + resetValidation(): void; +}> + +export { FormularioField } + +declare class Formulario { + public validationRules: Record; + public validationMessages: Record; + + constructor (options?: Options); + + /** Given a set of options, apply them to the pre-existing options. */ + public extend (extendWith: Options): Formulario; + + public runValidation (id: string): Promise>; + + public resetValidation (id: string): void; + + /** Used by forms instances to add themselves into a registry */ + public register (id: string, form: InstanceType): void; + + /** Used by forms instances to remove themselves from a registry */ + public unregister (id: string): void; + + /** Get validation rules by merging any passed in with global rules. */ + public getRules (extendWith: Record = {}): Record; + + /** Get validation messages by merging any passed in with global messages. */ + public getMessages ( + vm: Vue, + extendWith: Record + ): Record; +} + +export { Formulario } + +declare module 'vue/types/vue' { + interface Vue { + readonly $formulario: Formulario; + } +} + +declare const VueFormulario: PluginObject & { + Formulario: Formulario, +} + +export default VueFormulario diff --git a/package.json b/package.json index 0519525..c4693b5 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "build:iife": "rollup --config build/rollup.iife.config.js --format iife --file dist/formulario.min.js", "build:size": "gzip -c dist/formulario.esm.js | wc -c", "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/formulario.umd.js", - "lint": "vue-cli-service lint", + "lint": "eslint --ext .js,.mjs,.ts,.vue", "release": "standard-version", "release:minor": "standard-version --release-as minor", "release:patch": "standard-version --release-as patch", @@ -52,28 +52,24 @@ "@storybook/vue": "^6.0.26", "@types/is-url": "^1.2.28", "@types/jest": "^26.0.14", - "@typescript-eslint/eslint-plugin": "^2.26.0", - "@typescript-eslint/parser": "^2.26.0", + "@typescript-eslint/eslint-plugin": "^6.16.0", + "@typescript-eslint/parser": "^6.16.0", "@vue/cli-plugin-babel": "^4.3.1", - "@vue/cli-plugin-eslint": "^4.3.1", "@vue/cli-plugin-typescript": "^4.5.7", "@vue/cli-service": "^4.5.4", "@vue/component-compiler-utils": "^3.1.2", - "@vue/eslint-config-standard": "^5.1.2", - "@vue/eslint-config-typescript": "^5.0.2", "@vue/test-utils": "^1.0.2", "autoprefixer": "^9.7.6", "babel-core": "^7.0.0-bridge.0", - "babel-eslint": "^10.1.0", "babel-jest": "^25.5.1", "bootstrap-scss": "^4.5.2", - "eslint": "^5.16.0", - "eslint-config-standard": "^12.0.0", - "eslint-plugin-import": "^2.20.1", - "eslint-plugin-node": "^8.0.1", - "eslint-plugin-promise": "^4.1.1", - "eslint-plugin-standard": "^4.0.0", - "eslint-plugin-vue": "^5.2.3", + "eslint": "^8.56.0", + "eslint-config-standard": "^17.1.0", + "eslint-friendly-formatter": "^4.0.1", + "eslint-plugin-import": "^2.29.1", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^6.1.1", + "eslint-plugin-vue": "^9.19.2", "flush-promises": "^1.0.2", "jest": "^26.5.2", "jest-vue-preprocessor": "^1.7.1", @@ -88,7 +84,7 @@ "sass-loader": "^10.0.3", "standard-version": "^9.3.0", "ts-jest": "^26.4.1", - "typescript": "~3.9.3", + "typescript": "^4.9.5", "vue": "^2.6.11", "vue-cli-plugin-storybook": "^1.3.0", "vue-jest": "^3.0.5", diff --git a/src/Formulario.ts b/src/Formulario.ts index 8aa49f0..42003a8 100644 --- a/src/Formulario.ts +++ b/src/Formulario.ts @@ -1,33 +1,28 @@ -import merge from '@/utils/merge' -import validationRules from '@/validation/rules' -import validationMessages from '@/validation/messages' +import type { FormularioFormConstructor } from '../types/form' -import { +import type { ValidationContext, ValidationRuleFn, ValidationMessageFn, ValidationMessageI18NFn, Violation, -} from '@/validation/validator' +} from '../types/validation' -import { FormularioForm } from '@/types' +import type { Options } from '../types/plugin' -export interface FormularioOptions { - validationRules?: Record; - validationMessages?: Record; -} +import merge from '@/utils/merge' + +import validationRules from '@/validation/rules' +import validationMessages from '@/validation/messages' -/** - * The base formulario library. - */ export default class Formulario { public validationRules: Record = {} public validationMessages: Record = {} - private readonly registry: Map + private readonly _registry: Map> - public constructor (options?: FormularioOptions) { - this.registry = new Map() + public constructor (options?: Options) { + this._registry = new Map() this.validationRules = validationRules this.validationMessages = validationMessages @@ -38,7 +33,7 @@ export default class Formulario { /** * Given a set of options, apply them to the pre-existing options. */ - public extend (extendWith: FormularioOptions): Formulario { + public extend (extendWith: Options): Formulario { if (typeof extendWith === 'object') { this.validationRules = merge(this.validationRules, extendWith.validationRules || {}) this.validationMessages = merge(this.validationMessages, extendWith.validationMessages || {}) @@ -48,21 +43,21 @@ export default class Formulario { } public runValidation (id: string): Promise> { - if (!this.registry.has(id)) { + if (!this._registry.has(id)) { throw new Error(`[Formulario]: Formulario.runValidation(): no forms with id "${id}"`) } - const form = this.registry.get(id) as FormularioForm + const form = this._registry.get(id) as InstanceType return form.runValidation() } public resetValidation (id: string): void { - if (!this.registry.has(id)) { + if (!this._registry.has(id)) { return } - const form = this.registry.get(id) as FormularioForm + const form = this._registry.get(id) as InstanceType form.resetValidation() } @@ -71,12 +66,12 @@ export default class Formulario { * Used by forms instances to add themselves into a registry * @internal */ - public register (id: string, form: FormularioForm): void { - if (this.registry.has(id)) { + public register (id: string, form: InstanceType): void { + if (this._registry.has(id)) { throw new Error(`[Formulario]: Formulario.register(): id "${id}" is already in use`) } - this.registry.set(id, form) + this._registry.set(id, form) } /** @@ -84,8 +79,8 @@ export default class Formulario { * @internal */ public unregister (id: string): void { - if (this.registry.has(id)) { - this.registry.delete(id) + if (this._registry.has(id)) { + this._registry.delete(id) } } diff --git a/src/FormularioField.vue b/src/FormularioField.vue index 86f15f2..000e596 100644 --- a/src/FormularioField.vue +++ b/src/FormularioField.vue @@ -8,6 +8,21 @@ diff --git a/src/FormularioForm.vue b/src/FormularioForm.vue index 63db09a..44e9f0e 100644 --- a/src/FormularioForm.vue +++ b/src/FormularioForm.vue @@ -5,7 +5,11 @@