@lion/validate - npm Package Compare versions

Comparing version 0.2.38 to 0.2.39

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.2.39](https://github.com/ing-bank/lion/compare/@lion/validate@0.2.38...@lion/validate@0.2.39) (2019-11-01)
+
+
+### Bug Fixes
+
+* **fieldset:** manage when to show error messages ([c984a66](https://github.com/ing-bank/lion/commit/c984a66))
+
+
+
+
+
 ## [0.2.38](https://github.com/ing-bank/lion/compare/@lion/validate@0.2.37...@lion/validate@0.2.38) (2019-10-23)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/validate",
-  "version": "0.2.38",
+  "version": "0.2.39",
   "description": "Validate your form elements",
@@ -44,3 +44,3 @@ "author": "ing-bank",
   },
-  "gitHead": "8223b4ad3d35e9afa71ff549ea6987b832763251"
+  "gitHead": "ad5b7d0bcf3115f38033cea5ec5f2c07fd61227a"
 }

src/ValidateMixin.js

 /* eslint-disable class-methods-use-this, camelcase, no-param-reassign */
 
 import { dedupeMixin, SlotMixin } from '@lion/core';
-import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { localize, LocalizeMixin } from '@lion/localize';
@@ -17,6 +16,11 @@ import { Unparseable } from './Unparseable.js';
     // eslint-disable-next-line no-unused-vars, no-shadow, max-len
-    class ValidateMixin extends ObserverMixin(LocalizeMixin(SlotMixin(superclass))) {
+    class ValidateMixin extends LocalizeMixin(SlotMixin(superclass)) {
       /* * * * * * * * * *
     Configuration  */
 
+      constructor() {
+        super();
+        this.__oldValues = {};
+      }
+
       get slots() {
@@ -200,8 +204,7 @@ return {
 
-      static get asyncObservers() {
-        return {
-          ...super.asyncObservers,
-          // TODO: consider adding 'touched', 'dirty', 'submitted', 'prefilled' on LionFieldFundament
-          // level, since ValidateMixin doesn't have a direct dependency on interactionState
-          _createMessageAndRenderFeedback: [
+      updated(changedProperties) {
+        super.updated(changedProperties);
+
+        if (
+          [
             'error',
@@ -216,11 +219,21 @@ 'warning',
             'label',
-          ],
-          _onErrorShowChangedAsync: ['errorShow'],
-        };
+          ].some(key => changedProperties.has(key))
+        ) {
+          this._createMessageAndRenderFeedback();
+        }
+
+        if (changedProperties.has('errorShow')) {
+          this._onErrorShowChangedAsync();
+        }
       }
 
-      static get syncObservers() {
-        return {
-          ...super.syncObservers,
-          validate: [
+      _requestUpdate(name, oldVal) {
+        super._requestUpdate(name, oldVal);
+
+        /**
+         * Validation needs to happen before other updates
+         * E.g. formatting should not happen before we know the updated errorState
+         */
+        if (
+          [
             'errorValidators',
@@ -231,12 +244,51 @@ 'warningValidators',
             'modelValue',
-          ],
-          _onErrorChanged: ['error'],
-          _onWarningChanged: ['warning'],
-          _onInfoChanged: ['info'],
-          _onSuccessChanged: ['success'],
-          _onErrorStateChanged: ['errorState'],
-          _onWarningStateChanged: ['warningState'],
-          _onInfoStateChanged: ['infoState'],
-          _onSuccessStateChanged: ['successState'],
-        };
+          ].some(key => name === key)
+        ) {
+          this.validate();
+        }
+
+        // @deprecated adding css classes for backwards compatibility
+        this.constructor.validationTypes.forEach(type => {
+          if (name === `${type}State`) {
+            this.classList[this[`${type}State`] ? 'add' : 'remove'](`state-${type}`);
+          }
+          if (name === `${type}Show`) {
+            this.classList[this[`${type}Show`] ? 'add' : 'remove'](`state-${type}-show`);
+          }
+        });
+        if (name === 'invalid') {
+          this.classList[this.invalid ? 'add' : 'remove'](`state-invalid`);
+        }
+
+        if (name === 'error' && this.error !== oldVal) {
+          this._onErrorChanged();
+        }
+
+        if (name === 'warning' && this.warning !== oldVal) {
+          this._onWarningChanged();
+        }
+
+        if (name === 'info' && this.info !== oldVal) {
+          this._onInfoChanged();
+        }
+
+        if (name === 'success' && this.success !== oldVal) {
+          this._onSuccessChanged();
+        }
+
+        if (name === 'errorState' && this.errorState !== oldVal) {
+          this._onErrorStateChanged();
+        }
+
+        if (name === 'warningState' && this.warningState !== oldVal) {
+          this._onWarningStateChanged();
+        }
+
+        if (name === 'infoState' && this.infoState !== oldVal) {
+          this._onInfoStateChanged();
+        }
+
+        if (name === 'successState' && this.successState !== oldVal) {
+          this._onSuccessStateChanged();
+        }
       }
@@ -252,19 +304,2 @@
 
-      updated(changedProperties) {
-        super.updated(changedProperties);
-
-        // @deprecated adding css classes for backwards compatibility
-        this.constructor.validationTypes.forEach(name => {
-          if (changedProperties.has(`${name}State`)) {
-            this.classList[this[`${name}State`] ? 'add' : 'remove'](`state-${name}`);
-          }
-          if (changedProperties.has(`${name}Show`)) {
-            this.classList[this[`${name}Show`] ? 'add' : 'remove'](`state-${name}-show`);
-          }
-        });
-        if (changedProperties.has('invalid')) {
-          this.classList[this.invalid ? 'add' : 'remove'](`state-invalid`);
-        }
-      }
-
       getFieldName(validatorParams) {
@@ -335,4 +370,4 @@ const label =
 
-      _onErrorChanged(newValues, oldValues) {
-        if (!this.constructor._objectEquals(newValues.error, oldValues.error)) {
+      _onErrorChanged() {
+        if (!this.constructor._objectEquals(this.error, this.__oldValues.error)) {
           this.dispatchEvent(new CustomEvent('error-changed', { bubbles: true, composed: true }));
@@ -342,4 +377,4 @@ }
 
-      _onWarningChanged(newValues, oldValues) {
-        if (!this.constructor._objectEquals(newValues.warning, oldValues.warning)) {
+      _onWarningChanged() {
+        if (!this.constructor._objectEquals(this.warning, this.__oldValues.warning)) {
           this.dispatchEvent(new CustomEvent('warning-changed', { bubbles: true, composed: true }));
@@ -349,4 +384,4 @@ }
 
-      _onInfoChanged(newValues, oldValues) {
-        if (!this.constructor._objectEquals(newValues.info, oldValues.info)) {
+      _onInfoChanged() {
+        if (!this.constructor._objectEquals(this.info, this.__oldValues.info)) {
           this.dispatchEvent(new CustomEvent('info-changed', { bubbles: true, composed: true }));
@@ -356,4 +391,4 @@ }
 
-      _onSuccessChanged(newValues, oldValues) {
-        if (!this.constructor._objectEquals(newValues.success, oldValues.success)) {
+      _onSuccessChanged() {
+        if (!this.constructor._objectEquals(this.success, this.__oldValues.success)) {
           this.dispatchEvent(new CustomEvent('success-changed', { bubbles: true, composed: true }));
@@ -397,6 +432,6 @@ }
 
-      _onErrorShowChangedAsync({ errorShow }) {
+      _onErrorShowChangedAsync() {
         // Screen reader output should be in sync with visibility of error messages
         if (this.inputElement) {
-          this.inputElement.setAttribute('aria-invalid', errorShow);
+          this.inputElement.setAttribute('aria-invalid', this.errorShow);
           // TODO: test and see if needed for a11y
@@ -615,2 +650,3 @@ // this.inputElement.setCustomValidity(this._validationMessage || '');
         this[`${type}State`] = resultList.length > 0;
+        this.__oldValues[type] = this[type];
         this[type] = result;
@@ -617,0 +653,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166473

increased by0.47%

Lines of code

3007

increased by0.84%

No dependency changes