RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-21 21:06:04 +03:00
Code Issues Projects Releases Wiki Activity

fix: build

Browse Source
This commit is contained in:
Kirill Zaytsev 2023-12-28 13:11:07 +04:00
parent 497b2a1967
commit 92a3f8cc60
4 changed files with 166 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
dist/formulario.esm.js vendored
View File

@ -1,49 +1,7 @@
import isPlainObject from 'is-plain-object';
import isUrl from 'is-url'; import isUrl from 'is-url';
import Vue from 'vue'; import Vue from 'vue';
import { Inject, Model, Prop, Watch, Component, Provide } from 'vue-property-decorator'; import { Inject, Model, Prop, Watch, Component, Provide } from 'vue-property-decorator';
/**
* Shorthand for Object.prototype.hasOwnProperty.call (space saving)
*/
function has(ctx, prop) {
return Object.prototype.hasOwnProperty.call(ctx, prop);
}
/**
* Create a new object by copying properties of base and mergeWith.
* Note: arrays don't overwrite - they push
*
* @param {Object} a
* @param {Object} b
* @param {boolean} concatArrays
*/
function merge(a, b, concatArrays = true) {
const merged = {};
for (const key in a) {
if (has(b, key)) {
if (isPlainObject(b[key]) && isPlainObject(a[key])) {
merged[key] = merge(a[key], b[key], concatArrays);
}
else if (concatArrays && Array.isArray(a[key]) && Array.isArray(b[key])) {
merged[key] = a[key].concat(b[key]);
}
else {
merged[key] = b[key];
}
}
else {
merged[key] = a[key];
}
}
for (const prop in b) {
if (!has(merged, prop)) {
merged[prop] = b[prop];
}
}
return merged;
}
const registry = new Map(); const registry = new Map();
var id = (prefix) => { var id = (prefix) => {
const current = registry.get(prefix) || 0; const current = registry.get(prefix) || 0;
@ -106,7 +64,7 @@ function typeOf(value) {
} }
return 'InstanceOf<' + constructorOf(value).name + '>'; return 'InstanceOf<' + constructorOf(value).name + '>';
} }
throw new Error(); throw new Error('[Formulario] typeOf - unknown type detected');
} }
function isScalar(value) { function isScalar(value) {
switch (typeof value) { switch (typeof value) {
@ -147,6 +105,13 @@ function clone(value) {
return Object.keys(source).reduce((copy, key) => (Object.assign(Object.assign({}, copy), { [key]: clone(source[key]) })), {}); return Object.keys(source).reduce((copy, key) => (Object.assign(Object.assign({}, copy), { [key]: clone(source[key]) })), {});
} }
/**
* Shorthand for Object.prototype.hasOwnProperty.call (space saving)
*/
function has(ctx, prop) {
return Object.prototype.hasOwnProperty.call(ctx, prop);
}
/*! ***************************************************************************** /*! *****************************************************************************
Copyright (c) Microsoft Corporation. Copyright (c) Microsoft Corporation.
@ -663,14 +628,11 @@ const messages = {
} }
}; };
/**
* The base formulario library.
*/
class Formulario { class Formulario {
constructor(options) { constructor(options) {
this.validationRules = {}; this.validationRules = {};
this.validationMessages = {}; this.validationMessages = {};
this.registry = new Map(); this._registry = new Map();
this.validationRules = rules; this.validationRules = rules;
this.validationMessages = messages; this.validationMessages = messages;
this.extend(options || {}); this.extend(options || {});
@ -680,24 +642,24 @@ class Formulario {
*/ */
extend(extendWith) { extend(extendWith) {
if (typeof extendWith === 'object') { if (typeof extendWith === 'object') {
this.validationRules = merge(this.validationRules, extendWith.validationRules || {}); this.validationRules = Object.assign(Object.assign({}, this.validationRules), (extendWith.validationRules || {}));
this.validationMessages = merge(this.validationMessages, extendWith.validationMessages || {}); this.validationMessages = Object.assign(Object.assign({}, this.validationMessages), (extendWith.validationMessages || {}));
return this; return this;
} }
throw new Error(`[Formulario]: Formulario.extend(): should be passed an object (was ${typeof extendWith})`); throw new Error(`[Formulario]: Formulario.extend(): should be passed an object (was ${typeof extendWith})`);
} }
runValidation(id) { runValidation(id) {
if (!this.registry.has(id)) { if (!this._registry.has(id)) {
throw new Error(`[Formulario]: Formulario.runValidation(): no forms with id "${id}"`); throw new Error(`[Formulario]: Formulario.runValidation(): no forms with id "${id}"`);
} }
const form = this.registry.get(id); const form = this._registry.get(id);
return form.runValidation(); return form.runValidation();
} }
resetValidation(id) { resetValidation(id) {
if (!this.registry.has(id)) { if (!this._registry.has(id)) {
return; return;
} }
const form = this.registry.get(id); const form = this._registry.get(id);
form.resetValidation(); form.resetValidation();
} }
/** /**
@ -705,18 +667,18 @@ class Formulario {
* @internal * @internal
*/ */
register(id, form) { register(id, form) {
if (this.registry.has(id)) { if (this._registry.has(id)) {
throw new Error(`[Formulario]: Formulario.register(): id "${id}" is already in use`); throw new Error(`[Formulario]: Formulario.register(): id "${id}" is already in use`);
} }
this.registry.set(id, form); this._registry.set(id, form);
} }
/** /**
* Used by forms instances to remove themselves from a registry * Used by forms instances to remove themselves from a registry
* @internal * @internal
*/ */
unregister(id) { unregister(id) {
if (this.registry.has(id)) { if (this._registry.has(id)) {
this.registry.delete(id); this._registry.delete(id);
} }
} }
/** /**
@ -724,18 +686,19 @@ class Formulario {
* @internal * @internal
*/ */
getRules(extendWith = {}) { getRules(extendWith = {}) {
return merge(this.validationRules, extendWith); return Object.assign(Object.assign({}, this.validationRules), extendWith);
} }
/** /**
* Get validation messages by merging any passed in with global messages. * Get validation messages by merging any passed in with global messages.
* @internal * @internal
*/ */
getMessages(vm, extendWith) { getMessages(vm, extendWith) {
const raw = merge(this.validationMessages || {}, extendWith); const raw = Object.assign(Object.assign({}, this.validationMessages), extendWith);
const messages = {}; const messages = {};
for (const name in raw) { for (const name in raw) {
messages[name] = (context, ...args) => { messages[name] = (context, ...args) => {
return typeof raw[name] === 'string' ? raw[name] : raw[name](vm, context, ...args); const fn = raw[name];
return typeof fn === 'string' ? fn : fn(vm, context, ...args);
}; };
} }
return messages; return messages;
@ -886,16 +849,6 @@ function validate(validators, context) {
}); });
} }
const UNREGISTER_BEHAVIOR = {
NONE: 'none',
UNSET: 'unset',
};
const VALIDATION_BEHAVIOR = {
DEMAND: 'demand',
LIVE: 'live',
SUBMIT: 'submit',
};
let FormularioField = class FormularioField extends Vue { let FormularioField = class FormularioField extends Vue {
constructor() { constructor() {
super(...arguments); super(...arguments);
@ -907,9 +860,7 @@ let FormularioField = class FormularioField extends Vue {
get fullPath() { get fullPath() {
return this.__Formulario_path !== '' ? `${this.__Formulario_path}.${this.name}` : this.name; return this.__Formulario_path !== '' ? `${this.__Formulario_path}.${this.name}` : this.name;
} }
/** /** Determines if this formulario element is v-modeled or not. */
* Determines if this formulario element is v-modeled or not.
*/
get hasModel() { get hasModel() {
return has(this.$options.propsData || {}, 'value'); return has(this.$options.propsData || {}, 'value');
} }
@ -924,55 +875,77 @@ let FormularioField = class FormularioField extends Vue {
}, 'model', { }, 'model', {
get: () => this.modelGetConverter(this.proxy), get: () => this.modelGetConverter(this.proxy),
set: (value) => { set: (value) => {
this.syncProxy(this.modelSetConverter(value, this.proxy)); this._syncProxy(this.modelSetConverter(value, this.proxy));
}, },
}); });
} }
get normalizedValidationRules() { get _normalizedValidationRules() {
const rules = {}; const rules = {};
Object.keys(this.validationRules).forEach(key => { Object.keys(this.validationRules).forEach(key => {
rules[snakeToCamel(key)] = this.validationRules[key]; rules[snakeToCamel(key)] = this.validationRules[key];
}); });
return rules; return rules;
} }
get normalizedValidationMessages() { get _normalizedValidationMessages() {
const messages = {}; const messages = {};
Object.keys(this.validationMessages).forEach(key => { Object.keys(this.validationMessages).forEach(key => {
messages[snakeToCamel(key)] = this.validationMessages[key]; messages[snakeToCamel(key)] = this.validationMessages[key];
}); });
return messages; return messages;
} }
onValueChange() { _onValueChange() {
this.syncProxy(this.value); this._syncProxy(this.value);
} }
onProxyChange() { _onProxyChange() {
if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === 'live') {
this.runValidation(); this.runValidation();
} }
else { else {
this.resetValidation(); this.resetValidation();
} }
} }
/** /** @internal */
* @internal
*/
created() { created() {
if (typeof this.__FormularioForm_register === 'function') { if (typeof this.__FormularioForm_register === 'function') {
this.__FormularioForm_register(this.fullPath, this); this.__FormularioForm_register(this.fullPath, this);
} }
if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === 'live') {
this.runValidation(); this.runValidation();
} }
} }
/** /** @internal */
* @internal
*/
beforeDestroy() { beforeDestroy() {
if (typeof this.__FormularioForm_unregister === 'function') { if (typeof this.__FormularioForm_unregister === 'function') {
this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior); this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior);
} }
} }
syncProxy(value) { runValidation() {
this.validationRun = this._validate().then(violations => {
this.violations = violations;
this._emitValidation(this.fullPath, violations);
return this.violations;
});
return this.validationRun;
}
hasValidationErrors() {
return new Promise(resolve => {
this.$nextTick(() => {
this.validationRun.then(() => resolve(this.violations.length > 0));
});
});
}
/** @internal */
setErrors(errors) {
if (!this.errorsDisabled) {
this.localErrors = errors;
}
}
/** @internal */
resetValidation() {
this.localErrors = [];
this.violations = [];
}
_syncProxy(value) {
if (!deepEquals(value, this.proxy)) { if (!deepEquals(value, this.proxy)) {
this.proxy = value; this.proxy = value;
this.$emit('input', value); this.$emit('input', value);
@ -982,49 +955,19 @@ let FormularioField = class FormularioField extends Vue {
} }
} }
} }
runValidation() { _validate() {
this.validationRun = this.validate().then(violations => { return validate(processConstraints(this.validation, this.$formulario.getRules(this._normalizedValidationRules), this.$formulario.getMessages(this, this._normalizedValidationMessages)), {
this.violations = violations;
this.emitValidation(this.fullPath, violations);
return this.violations;
});
return this.validationRun;
}
validate() {
return validate(processConstraints(this.validation, this.$formulario.getRules(this.normalizedValidationRules), this.$formulario.getMessages(this, this.normalizedValidationMessages)), {
value: this.proxy, value: this.proxy,
name: this.fullPath, name: this.fullPath,
formValues: this.__FormularioForm_getState(), formValues: this.__FormularioForm_getState(),
}); });
} }
emitValidation(path, violations) { _emitValidation(path, violations) {
this.$emit('validation', { path, violations }); this.$emit('validation', { path, violations });
if (typeof this.__FormularioForm_emitValidation === 'function') { if (typeof this.__FormularioForm_emitValidation === 'function') {
this.__FormularioForm_emitValidation(path, violations); this.__FormularioForm_emitValidation(path, violations);
} }
} }
hasValidationErrors() {
return new Promise(resolve => {
this.$nextTick(() => {
this.validationRun.then(() => resolve(this.violations.length > 0));
});
});
}
/**
* @internal
*/
setErrors(errors) {
if (!this.errorsDisabled) {
this.localErrors = errors;
}
}
/**
* @internal
*/
resetValidation() {
this.localErrors = [];
this.violations = [];
}
}; };
__decorate([ __decorate([
Inject({ default: '' }) Inject({ default: '' })
@ -1067,8 +1010,8 @@ __decorate([
], FormularioField.prototype, "validationMessages", void 0); ], FormularioField.prototype, "validationMessages", void 0);
__decorate([ __decorate([
Prop({ Prop({
default: VALIDATION_BEHAVIOR.DEMAND, default: 'demand',
validator: behavior => Object.values(VALIDATION_BEHAVIOR).includes(behavior) validator: (behavior) => ['demand', 'live', 'submit'].includes(behavior)
}) })
], FormularioField.prototype, "validationBehavior", void 0); ], FormularioField.prototype, "validationBehavior", void 0);
__decorate([ __decorate([
@ -1084,14 +1027,14 @@ __decorate([
Prop({ default: 'div' }) Prop({ default: 'div' })
], FormularioField.prototype, "tag", void 0); ], FormularioField.prototype, "tag", void 0);
__decorate([ __decorate([
Prop({ default: UNREGISTER_BEHAVIOR.NONE }) Prop({ default: 'none' })
], FormularioField.prototype, "unregisterBehavior", void 0); ], FormularioField.prototype, "unregisterBehavior", void 0);
__decorate([ __decorate([
Watch('value') Watch('value')
], FormularioField.prototype, "onValueChange", null); ], FormularioField.prototype, "_onValueChange", null);
__decorate([ __decorate([
Watch('proxy') Watch('proxy')
], FormularioField.prototype, "onProxyChange", null); ], FormularioField.prototype, "_onProxyChange", null);
FormularioField = __decorate([ FormularioField = __decorate([
Component({ name: 'FormularioField', inheritAttrs: false }) Component({ name: 'FormularioField', inheritAttrs: false })
], FormularioField); ], FormularioField);
@ -1303,7 +1246,7 @@ let FormularioForm = class FormularioForm extends Vue {
this.localFormErrors = []; this.localFormErrors = [];
} }
get fieldsErrorsComputed() { get fieldsErrorsComputed() {
return merge(this.fieldsErrors || {}, this.localFieldsErrors); return Object.assign(Object.assign({}, this.fieldsErrors), this.localFieldsErrors);
} }
get formErrorsComputed() { get formErrorsComputed() {
return [...this.formErrors, ...this.localFormErrors]; return [...this.formErrors, ...this.localFormErrors];
@ -1333,7 +1276,7 @@ let FormularioForm = class FormularioForm extends Vue {
unregister(path, behavior) { unregister(path, behavior) {
if (this.registry.has(path)) { if (this.registry.has(path)) {
this.registry.delete(path); this.registry.delete(path);
if (behavior === UNREGISTER_BEHAVIOR.UNSET) { if (behavior === 'unset') {
this.proxy = unset(this.proxy, path); this.proxy = unset(this.proxy, path);
this.emitInput(); this.emitInput();
} }
@ -1397,13 +1340,13 @@ let FormularioForm = class FormularioForm extends Vue {
return Object.keys(violations).some(path => violations[path].length > 0); return Object.keys(violations).some(path => violations[path].length > 0);
}); });
} }
setErrors({ fieldsErrors, formErrors }) { setErrors({ formErrors, fieldsErrors }) {
this.localFieldsErrors = fieldsErrors || {};
this.localFormErrors = formErrors || []; this.localFormErrors = formErrors || [];
this.localFieldsErrors = fieldsErrors || {};
} }
resetValidation() { resetValidation() {
this.localFieldsErrors = {};
this.localFormErrors = []; this.localFormErrors = [];
this.localFieldsErrors = {};
this.registry.forEach((field) => { this.registry.forEach((field) => {
field.resetValidation(); field.resetValidation();
}); });
@ -1521,10 +1464,6 @@ var index = {
Vue.component('FormularioField', __vue_component__); Vue.component('FormularioField', __vue_component__);
Vue.component('FormularioFieldGroup', __vue_component__$1); Vue.component('FormularioFieldGroup', __vue_component__$1);
Vue.component('FormularioForm', __vue_component__$2); Vue.component('FormularioForm', __vue_component__$2);
// @deprecated Use FormularioField instead
Vue.component('FormularioInput', __vue_component__);
// @deprecated Use FormularioFieldGroup instead
Vue.component('FormularioGrouping', __vue_component__$1);
Vue.mixin({ Vue.mixin({
beforeCreate() { beforeCreate() {
const o = this.$options; const o = this.$options;
@ -1543,3 +1482,4 @@ var index = {
}; };
export default index; export default index;
export { Formulario, __vue_component__ as FormularioField, __vue_component__$1 as FormularioFieldGroup, __vue_component__$2 as FormularioForm };

20
dist/formulario.min.js vendored
View File

File diff suppressed because one or more lines are too long

225
dist/formulario.umd.js vendored
View File

@ -1,54 +1,12 @@
(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('is-plain-object'), require('is-url'), require('vue'), require('vue-property-decorator')) : typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('is-url'), require('vue'), require('vue-property-decorator')) :
typeof define === 'function' && define.amd ? define(['is-plain-object', 'is-url', 'vue', 'vue-property-decorator'], factory) : typeof define === 'function' && define.amd ? define(['exports', 'is-url', 'vue', 'vue-property-decorator'], factory) :
(global = global || self, global.Formulario = factory(global.isPlainObject, global.isUrl, global.Vue, global.vuePropertyDecorator)); (global = global || self, factory(global.Formulario = {}, global.isUrl, global.Vue, global.vuePropertyDecorator));
}(this, (function (isPlainObject, isUrl, Vue, vuePropertyDecorator) { 'use strict'; }(this, (function (exports, isUrl, Vue, vuePropertyDecorator) { 'use strict';
isPlainObject = isPlainObject && Object.prototype.hasOwnProperty.call(isPlainObject, 'default') ? isPlainObject['default'] : isPlainObject;
isUrl = isUrl && Object.prototype.hasOwnProperty.call(isUrl, 'default') ? isUrl['default'] : isUrl; isUrl = isUrl && Object.prototype.hasOwnProperty.call(isUrl, 'default') ? isUrl['default'] : isUrl;
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue; Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
/**
* Shorthand for Object.prototype.hasOwnProperty.call (space saving)
*/
function has(ctx, prop) {
return Object.prototype.hasOwnProperty.call(ctx, prop);
}
/**
* Create a new object by copying properties of base and mergeWith.
* Note: arrays don't overwrite - they push
*
* @param {Object} a
* @param {Object} b
* @param {boolean} concatArrays
*/
function merge(a, b, concatArrays = true) {
const merged = {};
for (const key in a) {
if (has(b, key)) {
if (isPlainObject(b[key]) && isPlainObject(a[key])) {
merged[key] = merge(a[key], b[key], concatArrays);
}
else if (concatArrays && Array.isArray(a[key]) && Array.isArray(b[key])) {
merged[key] = a[key].concat(b[key]);
}
else {
merged[key] = b[key];
}
}
else {
merged[key] = a[key];
}
}
for (const prop in b) {
if (!has(merged, prop)) {
merged[prop] = b[prop];
}
}
return merged;
}
const registry = new Map(); const registry = new Map();
var id = (prefix) => { var id = (prefix) => {
const current = registry.get(prefix) || 0; const current = registry.get(prefix) || 0;
@ -111,7 +69,7 @@
} }
return 'InstanceOf<' + constructorOf(value).name + '>'; return 'InstanceOf<' + constructorOf(value).name + '>';
} }
throw new Error(); throw new Error('[Formulario] typeOf - unknown type detected');
} }
function isScalar(value) { function isScalar(value) {
switch (typeof value) { switch (typeof value) {
@ -152,6 +110,13 @@
return Object.keys(source).reduce((copy, key) => (Object.assign(Object.assign({}, copy), { [key]: clone(source[key]) })), {}); return Object.keys(source).reduce((copy, key) => (Object.assign(Object.assign({}, copy), { [key]: clone(source[key]) })), {});
} }
/**
* Shorthand for Object.prototype.hasOwnProperty.call (space saving)
*/
function has(ctx, prop) {
return Object.prototype.hasOwnProperty.call(ctx, prop);
}
/*! ***************************************************************************** /*! *****************************************************************************
Copyright (c) Microsoft Corporation. Copyright (c) Microsoft Corporation.
@ -668,14 +633,11 @@
} }
}; };
/**
* The base formulario library.
*/
class Formulario { class Formulario {
constructor(options) { constructor(options) {
this.validationRules = {}; this.validationRules = {};
this.validationMessages = {}; this.validationMessages = {};
this.registry = new Map(); this._registry = new Map();
this.validationRules = rules; this.validationRules = rules;
this.validationMessages = messages; this.validationMessages = messages;
this.extend(options || {}); this.extend(options || {});
@ -685,24 +647,24 @@
*/ */
extend(extendWith) { extend(extendWith) {
if (typeof extendWith === 'object') { if (typeof extendWith === 'object') {
this.validationRules = merge(this.validationRules, extendWith.validationRules || {}); this.validationRules = Object.assign(Object.assign({}, this.validationRules), (extendWith.validationRules || {}));
this.validationMessages = merge(this.validationMessages, extendWith.validationMessages || {}); this.validationMessages = Object.assign(Object.assign({}, this.validationMessages), (extendWith.validationMessages || {}));
return this; return this;
} }
throw new Error(`[Formulario]: Formulario.extend(): should be passed an object (was ${typeof extendWith})`); throw new Error(`[Formulario]: Formulario.extend(): should be passed an object (was ${typeof extendWith})`);
} }
runValidation(id) { runValidation(id) {
if (!this.registry.has(id)) { if (!this._registry.has(id)) {
throw new Error(`[Formulario]: Formulario.runValidation(): no forms with id "${id}"`); throw new Error(`[Formulario]: Formulario.runValidation(): no forms with id "${id}"`);
} }
const form = this.registry.get(id); const form = this._registry.get(id);
return form.runValidation(); return form.runValidation();
} }
resetValidation(id) { resetValidation(id) {
if (!this.registry.has(id)) { if (!this._registry.has(id)) {
return; return;
} }
const form = this.registry.get(id); const form = this._registry.get(id);
form.resetValidation(); form.resetValidation();
} }
/** /**
@ -710,18 +672,18 @@
* @internal * @internal
*/ */
register(id, form) { register(id, form) {
if (this.registry.has(id)) { if (this._registry.has(id)) {
throw new Error(`[Formulario]: Formulario.register(): id "${id}" is already in use`); throw new Error(`[Formulario]: Formulario.register(): id "${id}" is already in use`);
} }
this.registry.set(id, form); this._registry.set(id, form);
} }
/** /**
* Used by forms instances to remove themselves from a registry * Used by forms instances to remove themselves from a registry
* @internal * @internal
*/ */
unregister(id) { unregister(id) {
if (this.registry.has(id)) { if (this._registry.has(id)) {
this.registry.delete(id); this._registry.delete(id);
} }
} }
/** /**
@ -729,18 +691,19 @@
* @internal * @internal
*/ */
getRules(extendWith = {}) { getRules(extendWith = {}) {
return merge(this.validationRules, extendWith); return Object.assign(Object.assign({}, this.validationRules), extendWith);
} }
/** /**
* Get validation messages by merging any passed in with global messages. * Get validation messages by merging any passed in with global messages.
* @internal * @internal
*/ */
getMessages(vm, extendWith) { getMessages(vm, extendWith) {
const raw = merge(this.validationMessages || {}, extendWith); const raw = Object.assign(Object.assign({}, this.validationMessages), extendWith);
const messages = {}; const messages = {};
for (const name in raw) { for (const name in raw) {
messages[name] = (context, ...args) => { messages[name] = (context, ...args) => {
return typeof raw[name] === 'string' ? raw[name] : raw[name](vm, context, ...args); const fn = raw[name];
return typeof fn === 'string' ? fn : fn(vm, context, ...args);
}; };
} }
return messages; return messages;
@ -891,16 +854,6 @@
}); });
} }
const UNREGISTER_BEHAVIOR = {
NONE: 'none',
UNSET: 'unset',
};
const VALIDATION_BEHAVIOR = {
DEMAND: 'demand',
LIVE: 'live',
SUBMIT: 'submit',
};
let FormularioField = class FormularioField extends Vue { let FormularioField = class FormularioField extends Vue {
constructor() { constructor() {
super(...arguments); super(...arguments);
@ -912,9 +865,7 @@
get fullPath() { get fullPath() {
return this.__Formulario_path !== '' ? `${this.__Formulario_path}.${this.name}` : this.name; return this.__Formulario_path !== '' ? `${this.__Formulario_path}.${this.name}` : this.name;
} }
/** /** Determines if this formulario element is v-modeled or not. */
* Determines if this formulario element is v-modeled or not.
*/
get hasModel() { get hasModel() {
return has(this.$options.propsData || {}, 'value'); return has(this.$options.propsData || {}, 'value');
} }
@ -929,55 +880,77 @@
}, 'model', { }, 'model', {
get: () => this.modelGetConverter(this.proxy), get: () => this.modelGetConverter(this.proxy),
set: (value) => { set: (value) => {
this.syncProxy(this.modelSetConverter(value, this.proxy)); this._syncProxy(this.modelSetConverter(value, this.proxy));
}, },
}); });
} }
get normalizedValidationRules() { get _normalizedValidationRules() {
const rules = {}; const rules = {};
Object.keys(this.validationRules).forEach(key => { Object.keys(this.validationRules).forEach(key => {
rules[snakeToCamel(key)] = this.validationRules[key]; rules[snakeToCamel(key)] = this.validationRules[key];
}); });
return rules; return rules;
} }
get normalizedValidationMessages() { get _normalizedValidationMessages() {
const messages = {}; const messages = {};
Object.keys(this.validationMessages).forEach(key => { Object.keys(this.validationMessages).forEach(key => {
messages[snakeToCamel(key)] = this.validationMessages[key]; messages[snakeToCamel(key)] = this.validationMessages[key];
}); });
return messages; return messages;
} }
onValueChange() { _onValueChange() {
this.syncProxy(this.value); this._syncProxy(this.value);
} }
onProxyChange() { _onProxyChange() {
if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === 'live') {
this.runValidation(); this.runValidation();
} }
else { else {
this.resetValidation(); this.resetValidation();
} }
} }
/** /** @internal */
* @internal
*/
created() { created() {
if (typeof this.__FormularioForm_register === 'function') { if (typeof this.__FormularioForm_register === 'function') {
this.__FormularioForm_register(this.fullPath, this); this.__FormularioForm_register(this.fullPath, this);
} }
if (this.validationBehavior === VALIDATION_BEHAVIOR.LIVE) { if (this.validationBehavior === 'live') {
this.runValidation(); this.runValidation();
} }
} }
/** /** @internal */
* @internal
*/
beforeDestroy() { beforeDestroy() {
if (typeof this.__FormularioForm_unregister === 'function') { if (typeof this.__FormularioForm_unregister === 'function') {
this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior); this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior);
} }
} }
syncProxy(value) { runValidation() {
this.validationRun = this._validate().then(violations => {
this.violations = violations;
this._emitValidation(this.fullPath, violations);
return this.violations;
});
return this.validationRun;
}
hasValidationErrors() {
return new Promise(resolve => {
this.$nextTick(() => {
this.validationRun.then(() => resolve(this.violations.length > 0));
});
});
}
/** @internal */
setErrors(errors) {
if (!this.errorsDisabled) {
this.localErrors = errors;
}
}
/** @internal */
resetValidation() {
this.localErrors = [];
this.violations = [];
}
_syncProxy(value) {
if (!deepEquals(value, this.proxy)) { if (!deepEquals(value, this.proxy)) {
this.proxy = value; this.proxy = value;
this.$emit('input', value); this.$emit('input', value);
@ -987,49 +960,19 @@
} }
} }
} }
runValidation() { _validate() {
this.validationRun = this.validate().then(violations => { return validate(processConstraints(this.validation, this.$formulario.getRules(this._normalizedValidationRules), this.$formulario.getMessages(this, this._normalizedValidationMessages)), {
this.violations = violations;
this.emitValidation(this.fullPath, violations);
return this.violations;
});
return this.validationRun;
}
validate() {
return validate(processConstraints(this.validation, this.$formulario.getRules(this.normalizedValidationRules), this.$formulario.getMessages(this, this.normalizedValidationMessages)), {
value: this.proxy, value: this.proxy,
name: this.fullPath, name: this.fullPath,
formValues: this.__FormularioForm_getState(), formValues: this.__FormularioForm_getState(),
}); });
} }
emitValidation(path, violations) { _emitValidation(path, violations) {
this.$emit('validation', { path, violations }); this.$emit('validation', { path, violations });
if (typeof this.__FormularioForm_emitValidation === 'function') { if (typeof this.__FormularioForm_emitValidation === 'function') {
this.__FormularioForm_emitValidation(path, violations); this.__FormularioForm_emitValidation(path, violations);
} }
} }
hasValidationErrors() {
return new Promise(resolve => {
this.$nextTick(() => {
this.validationRun.then(() => resolve(this.violations.length > 0));
});
});
}
/**
* @internal
*/
setErrors(errors) {
if (!this.errorsDisabled) {
this.localErrors = errors;
}
}
/**
* @internal
*/
resetValidation() {
this.localErrors = [];
this.violations = [];
}
}; };
__decorate([ __decorate([
vuePropertyDecorator.Inject({ default: '' }) vuePropertyDecorator.Inject({ default: '' })
@ -1072,8 +1015,8 @@
], FormularioField.prototype, "validationMessages", void 0); ], FormularioField.prototype, "validationMessages", void 0);
__decorate([ __decorate([
vuePropertyDecorator.Prop({ vuePropertyDecorator.Prop({
default: VALIDATION_BEHAVIOR.DEMAND, default: 'demand',
validator: behavior => Object.values(VALIDATION_BEHAVIOR).includes(behavior) validator: (behavior) => ['demand', 'live', 'submit'].includes(behavior)
}) })
], FormularioField.prototype, "validationBehavior", void 0); ], FormularioField.prototype, "validationBehavior", void 0);
__decorate([ __decorate([
@ -1089,14 +1032,14 @@
vuePropertyDecorator.Prop({ default: 'div' }) vuePropertyDecorator.Prop({ default: 'div' })
], FormularioField.prototype, "tag", void 0); ], FormularioField.prototype, "tag", void 0);
__decorate([ __decorate([
vuePropertyDecorator.Prop({ default: UNREGISTER_BEHAVIOR.NONE }) vuePropertyDecorator.Prop({ default: 'none' })
], FormularioField.prototype, "unregisterBehavior", void 0); ], FormularioField.prototype, "unregisterBehavior", void 0);
__decorate([ __decorate([
vuePropertyDecorator.Watch('value') vuePropertyDecorator.Watch('value')
], FormularioField.prototype, "onValueChange", null); ], FormularioField.prototype, "_onValueChange", null);
__decorate([ __decorate([
vuePropertyDecorator.Watch('proxy') vuePropertyDecorator.Watch('proxy')
], FormularioField.prototype, "onProxyChange", null); ], FormularioField.prototype, "_onProxyChange", null);
FormularioField = __decorate([ FormularioField = __decorate([
vuePropertyDecorator.Component({ name: 'FormularioField', inheritAttrs: false }) vuePropertyDecorator.Component({ name: 'FormularioField', inheritAttrs: false })
], FormularioField); ], FormularioField);
@ -1308,7 +1251,7 @@
this.localFormErrors = []; this.localFormErrors = [];
} }
get fieldsErrorsComputed() { get fieldsErrorsComputed() {
return merge(this.fieldsErrors || {}, this.localFieldsErrors); return Object.assign(Object.assign({}, this.fieldsErrors), this.localFieldsErrors);
} }
get formErrorsComputed() { get formErrorsComputed() {
return [...this.formErrors, ...this.localFormErrors]; return [...this.formErrors, ...this.localFormErrors];
@ -1338,7 +1281,7 @@
unregister(path, behavior) { unregister(path, behavior) {
if (this.registry.has(path)) { if (this.registry.has(path)) {
this.registry.delete(path); this.registry.delete(path);
if (behavior === UNREGISTER_BEHAVIOR.UNSET) { if (behavior === 'unset') {
this.proxy = unset(this.proxy, path); this.proxy = unset(this.proxy, path);
this.emitInput(); this.emitInput();
} }
@ -1402,13 +1345,13 @@
return Object.keys(violations).some(path => violations[path].length > 0); return Object.keys(violations).some(path => violations[path].length > 0);
}); });
} }
setErrors({ fieldsErrors, formErrors }) { setErrors({ formErrors, fieldsErrors }) {
this.localFieldsErrors = fieldsErrors || {};
this.localFormErrors = formErrors || []; this.localFormErrors = formErrors || [];
this.localFieldsErrors = fieldsErrors || {};
} }
resetValidation() { resetValidation() {
this.localFieldsErrors = {};
this.localFormErrors = []; this.localFormErrors = [];
this.localFieldsErrors = {};
this.registry.forEach((field) => { this.registry.forEach((field) => {
field.resetValidation(); field.resetValidation();
}); });
@ -1526,10 +1469,6 @@
Vue.component('FormularioField', __vue_component__); Vue.component('FormularioField', __vue_component__);
Vue.component('FormularioFieldGroup', __vue_component__$1); Vue.component('FormularioFieldGroup', __vue_component__$1);
Vue.component('FormularioForm', __vue_component__$2); Vue.component('FormularioForm', __vue_component__$2);
// @deprecated Use FormularioField instead
Vue.component('FormularioInput', __vue_component__);
// @deprecated Use FormularioFieldGroup instead
Vue.component('FormularioGrouping', __vue_component__$1);
Vue.mixin({ Vue.mixin({
beforeCreate() { beforeCreate() {
const o = this.$options; const o = this.$options;
@ -1547,6 +1486,12 @@
}, },
}; };
return index; exports.Formulario = Formulario;
exports.FormularioField = __vue_component__;
exports.FormularioFieldGroup = __vue_component__$1;
exports.FormularioForm = __vue_component__$2;
exports.default = index;
Object.defineProperty(exports, '__esModule', { value: true });
}))); })));

3
package.json
View File

@ -14,6 +14,9 @@
"vue-class-component": "^7.2.3", "vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2" "vue-property-decorator": "^8.4.2"
}, },
"peerDependencies": {
"vue": "^2.6"
},
"bugs": { "bugs": {
"url": "https://github.com/retailcrm/vue-formulario/issues" "url": "https://github.com/retailcrm/vue-formulario/issues"
}, },