aurelia-validation - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0-rc1

dist/aurelia-validation.d.ts

@@ -77,3 +77,13 @@ import { AccessKeyed, AccessMember, AccessScope, Binary, Binding, BindingBehavior, CallMember, Conditional, Expression, LiteralPrimitive, LiteralString, Parser, Scope, ValueConverter } from 'aurelia-binding';
 	 */
-	changeOrBlur = 3
+	changeOrBlur = 3,
+	/**
+	 * Validate the binding when the binding's target element fires a DOM "focusout" event.
+	 * Unlike "blur", this event bubbles.
+	 */
+	focusout = 4,
+	/**
+	 * Validate the binding when the binding's target element fires a DOM "focusout" event or
+	 * when it updates the model due to a change in the view.
+	 */
+	changeOrFocusout = 6
 }
@@ -430,2 +440,10 @@ export declare type ValidatorCtor = new (...args: any[]) => Validator;
 }
+export declare class ValidateOnFocusoutBindingBehavior extends ValidateBindingBehaviorBase {
+	static inject: (typeof TaskQueue)[];
+	getValidateTrigger(): validateTrigger;
+}
+export declare class ValidateOnChangeOrFocusoutBindingBehavior extends ValidateBindingBehaviorBase {
+	static inject: (typeof TaskQueue)[];
+	getValidateTrigger(): validateTrigger;
+}
 /**
@@ -432,0 +450,0 @@ * Creates ValidationController instances.

doc/CHANGELOG.md

@@ -1,5 +0,22 @@
-# Change Log
+# [2.0.0-rc1](https://github.com/aurelia/validation/compare/1.6.0...2.0.0-rc1) (2020-03-26)
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### Features
+
+* focusout trigger + changeOrX behavior change ([62f0579](https://github.com/aurelia/validation/commit/62f05791327716399644bceb410372f53d2da6dc)), closes [#509](https://github.com/aurelia/validation/issues/509) [#543](https://github.com/aurelia/validation/issues/543)
+
+
+### BREAKING CHANGES
+
+* This commit changes the default behavior for the
+changeOrBlur trigger.
+- The change trigger is ineffective till the
+  associated property is validated once, either by manual validation or
+  by blur-triggered validation. This prevents showing validation failure
+  immediately in case of an incomplete input. Note the distinction made
+  between *incomplete* and *invalid* input.
+- The blur trigger is ineffective until the property is dirty; i.e. any
+  changes were made to the property. This prevents showing a failure
+  message when there is a blur event w/o changing the property.
+
 # [1.6.0](https://github.com/aurelia/validation/compare/1.5.0...1.6.0) (2019-12-18)
@@ -6,0 +23,0 @@

package.json

 {
   "name": "aurelia-validation",
-  "version": "1.6.0",
+  "version": "2.0.0-rc1",
   "description": "Validation for Aurelia applications",
@@ -46,2 +46,3 @@ "keywords": [
     "precut-release": "cross-env npm run test",
+    "changelog": "conventional-changelog -p angular -i doc/CHANGELOG.md -s",
     "cut-release": "standard-version -t \"\" -i doc/CHANGELOG.md && npm run build && npm run doc"
@@ -111,5 +112,5 @@ },
     "tslint": "^5.11.0",
-    "typedoc": "^0.12.0",
-    "typescript": "^3.1.1"
+    "typedoc": "^0.17.1",
+    "typescript": "^3.8.3"
   }
 }

src/aurelia-validation.ts

@@ -39,3 +39,5 @@ // Exports
   ValidateOnChangeBindingBehavior,
-  ValidateOnChangeOrBlurBindingBehavior
+  ValidateOnChangeOrBlurBindingBehavior,
+  ValidateOnFocusoutBindingBehavior,
+  ValidateOnChangeOrFocusoutBindingBehavior
 } from './validate-binding-behavior';
@@ -72,4 +74,6 @@ import { ValidationErrorsCustomAttribute } from './validation-errors-custom-attribute';
       ValidateOnBlurBindingBehavior,
+      ValidateOnFocusoutBindingBehavior,
       ValidateOnChangeBindingBehavior,
       ValidateOnChangeOrBlurBindingBehavior,
+      ValidateOnChangeOrFocusoutBindingBehavior,
       ValidationErrorsCustomAttribute,
@@ -76,0 +80,0 @@ ValidationRendererCustomAttribute);

src/validate-binding-behavior-base.ts

@@ -0,1 +1,2 @@
+// tslint:disable:no-bitwise
 import { Optional } from 'aurelia-dependency-injection';
@@ -6,2 +7,4 @@ import { TaskQueue } from 'aurelia-task-queue';
 import { getTargetDOMElement } from './get-target-dom-element';
+import { getPropertyInfo } from './property-info';
+import { Expression } from 'aurelia-binding';
 
@@ -35,4 +38,14 @@ /**
     const trigger = this.getValidateTrigger(controller);
-    // tslint:disable-next-line:no-bitwise
-    if (trigger & validateTrigger.change) {
+    const event =
+      (trigger & validateTrigger.blur) === validateTrigger.blur ? 'blur'
+        : (trigger & validateTrigger.focusout) === validateTrigger.focusout ? 'focusout'
+          : null;
+    const hasChangeTrigger = (trigger & validateTrigger.change) === validateTrigger.change;
+    binding.isDirty = !hasChangeTrigger;
+    // validatedOnce is used to control whether controller should validate upon user input
+    //
+    // always true when validation trigger doesn't include "blur" event (blur/focusout)
+    // else it will be set to true after (a) the first user input & loss of focus or (b) validation
+    binding.validatedOnce = hasChangeTrigger && event === null;
+    if (hasChangeTrigger) {
       binding.vbbUpdateSource = binding.updateSource;
@@ -43,13 +56,29 @@ // tslint:disable-next-line:only-arrow-functions
         this.vbbUpdateSource(value);
-        this.validationController.validateBinding(this);
+        this.isDirty = true;
+        if (this.validatedOnce) {
+          this.validationController.validateBinding(this);
+        }
       };
     }
 
-    // tslint:disable-next-line:no-bitwise
-    if (trigger & validateTrigger.blur) {
-      binding.validateBlurHandler = () => {
-        this.taskQueue.queueMicroTask(() => controller.validateBinding(binding));
+    if (event !== null) {
+      binding.focusLossHandler = () => {
+        this.taskQueue.queueMicroTask(() => {
+          if (binding.isDirty) {
+            controller.validateBinding(binding);
+            binding.validatedOnce = true;
+          }
+        });
       };
+      binding.validationTriggerEvent = event;
       binding.validateTarget = target;
-      target.addEventListener('blur', binding.validateBlurHandler);
+      target.addEventListener(event, binding.focusLossHandler);
+      if (hasChangeTrigger) {
+        const { propertyName } = getPropertyInfo(binding.sourceExpression as Expression, binding.source)!;
+        binding.validationSubscription = controller.subscribe((event) => {
+          if (!binding.validatedOnce && event.type === 'validate') {
+            binding.validatedOnce = event.errors.findIndex((e) => e.propertyName === propertyName) > -1;
+          }
+        });
+      }
     }
@@ -78,10 +107,16 @@
     }
-    if (binding.validateBlurHandler) {
-      binding.validateTarget.removeEventListener('blur', binding.validateBlurHandler);
-      binding.validateBlurHandler = null;
+    if (binding.focusLossHandler) {
+      binding.validateTarget.removeEventListener(binding.validationTriggerEvent, binding.focusLossHandler);
+      binding.focusLossHandler = null;
       binding.validateTarget = null;
     }
+    if (binding.validationSubscription) {
+      binding.validationSubscription.dispose();
+      binding.validationSubscription = null;
+    }
     binding.validationController.unregisterBinding(binding);
     binding.validationController = null;
+    binding.isDirty = null;
+    binding.validatedOnce = null;
   }
 }

src/validate-binding-behavior.ts

@@ -75,1 +75,19 @@ import { TaskQueue } from 'aurelia-task-queue';
 }
+
+@bindingBehavior('validateOnFocusout')
+export class ValidateOnFocusoutBindingBehavior extends ValidateBindingBehaviorBase {
+  public static inject = [TaskQueue];
+
+  public getValidateTrigger() {
+    return validateTrigger.focusout;
+  }
+}
+
+@bindingBehavior('validateOnChangeOrFocusout')
+export class ValidateOnChangeOrFocusoutBindingBehavior extends ValidateBindingBehaviorBase {
+  public static inject = [TaskQueue];
+
+  public getValidateTrigger() {
+    return validateTrigger.changeOrFocusout;
+  }
+}

src/validate-trigger.ts

@@ -9,3 +9,3 @@ /**
    */
-  manual = 0,
+  manual = 0,           // 0x000
 
@@ -15,3 +15,3 @@ /**
    */
-  blur = 1,
+  blur = 1,             // 0x001
 
@@ -21,3 +21,3 @@ /**
    */
-  change = 2,
+  change = 2,           // 0x010
 
@@ -28,3 +28,15 @@ /**
    */
-  changeOrBlur = 3
+  changeOrBlur = 3,     // 0x011
+
+  /**
+   * Validate the binding when the binding's target element fires a DOM "focusout" event.
+   * Unlike "blur", this event bubbles.
+   */
+  focusout = 4,         // 0x100
+
+  /**
+   * Validate the binding when the binding's target element fires a DOM "focusout" event or
+   * when it updates the model due to a change in the view.
+   */
+  changeOrFocusout = 6, // 0x110
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1227186

increased by28.65%

Number of package files

135

increased by213.95%

Lines of code

23634

increased by29.21%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes