@vaadin/field-base - npm Package Compare versions

Comparing version 23.2.0-alpha2 to 23.2.0-alpha3

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-alpha2",
+  "version": "23.2.0-alpha3",
   "publishConfig": {
@@ -35,3 +35,3 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-alpha2",
+    "@vaadin/component-base": "23.2.0-alpha3",
     "lit": "^2.0.0"
@@ -44,3 +44,3 @@ },
   },
-  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
+  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
 }

src/checked-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
 
@@ -12,0 +12,0 @@ /**

src/delegate-focus-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
 
@@ -12,0 +12,0 @@ /**

src/delegate-state-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -9,0 +9,0 @@ /**

src/field-mixin.d.ts

@@ -6,6 +6,6 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -12,0 +12,0 @@ /**

src/input-constraints-mixin.d.ts

@@ -6,7 +6,7 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -13,0 +13,0 @@ /**

src/input-constraints-mixin.js

@@ -91,3 +91,3 @@ /**
         } else {
-          this.invalid = false;
+          this._setInvalid(false);
         }
@@ -94,0 +94,0 @@ }

src/input-control-mixin.d.ts

@@ -6,14 +6,14 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -20,0 +20,0 @@ /**

src/input-field-mixin.d.ts

@@ -6,15 +6,15 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { FieldMixinClass } from './field-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputControlMixinClass } from './input-control-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { LabelMixinClass } from './label-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { FieldMixinClass } from './field-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputControlMixinClass } from './input-control-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { LabelMixinClass } from './label-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -21,0 +21,0 @@ /**

src/input-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -9,0 +9,0 @@ /**

src/label-mixin.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { LabelController } from './label-controller.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { LabelController } from './label-controller.js';
 
@@ -10,0 +10,0 @@ /**

src/labelled-input-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ /**

src/pattern-mixin.d.ts

@@ -6,8 +6,8 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
-import { InputConstraintsMixinClass } from './input-constraints-mixin.js';
-import { InputMixinClass } from './input-mixin.js';
-import { ValidateMixinClass } from './validate-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import type { InputConstraintsMixinClass } from './input-constraints-mixin.js';
+import type { InputMixinClass } from './input-mixin.js';
+import type { ValidateMixinClass } from './validate-mixin.js';
 
@@ -14,0 +14,0 @@ /**

src/shadow-focus-mixin.d.ts

@@ -6,8 +6,8 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
-import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
-import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
-import { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
-import { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/component-base/src/tabindex-mixin.js';
+import type { DelegateFocusMixinClass } from './delegate-focus-mixin.js';
 
@@ -14,0 +14,0 @@ /**

src/slot-styles-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -9,0 +9,0 @@ /**

src/slot-target-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,0 @@ export class SlotTargetController implements ReactiveController {

src/styles/clear-button-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const clearButton: CSSResult;

src/styles/field-shared-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const fieldShared: CSSResult;

src/styles/input-field-container-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const inputFieldContainer: CSSResult;

src/styles/input-field-shared-styles.d.ts

@@ -6,4 +6,4 @@ /**
  */
-import { CSSResult } from 'lit';
+import type { CSSResult } from 'lit';
 
 export const inputFieldShared: CSSResult;

src/validate-mixin.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { Constructor } from '@open-wc/dedupe-mixin';
+import type { Constructor } from '@open-wc/dedupe-mixin';
 
@@ -34,2 +34,10 @@ /**
   checkValidity(): boolean;
+
+  /**
+   * Fired whenever the field is validated.
+   *
+   * @event validated
+   * @param {Object} detail
+   * @param {boolean} detail.valid the result of the validation.
+   */
 }

src/validate-mixin.js

@@ -39,8 +39,13 @@ /**
       /**
-       * Returns true if field is valid, and sets `invalid` based on the field validity.
+       * Validates the field and sets the `invalid` property based on the result.
        *
+       * The method fires a `validated` event with the result of the validation.
+       *
        * @return {boolean} True if the value is valid.
        */
       validate() {
-        return !(this.invalid = !this.checkValidity());
+        const isValid = this.checkValidity();
+        this._setInvalid(!isValid);
+        this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
+        return isValid;
       }
@@ -56,3 +61,32 @@
       }
+
+      /**
+       * @param {boolean} invalid
+       * @protected
+       */
+      _setInvalid(invalid) {
+        if (this._shouldSetInvalid(invalid)) {
+          this.invalid = invalid;
+        }
+      }
+
+      /**
+       * Override this method to define whether the given `invalid` state should be set.
+       *
+       * @param {boolean} _invalid
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetInvalid(_invalid) {
+        return true;
+      }
+
+      /**
+       * Fired whenever the field is validated.
+       *
+       * @event validated
+       * @param {Object} detail
+       * @param {boolean} detail.valid the result of the validation.
+       */
     },
 );

src/virtual-keyboard-controller.d.ts

@@ -6,3 +6,3 @@ /**
  */
-import { ReactiveController } from 'lit';
+import type { ReactiveController } from 'lit';
 
@@ -9,0 +9,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

116800

increased by1.22%

Lines of code

3249

increased by1.18%

Dependency changes

• + Added@vaadin/component-base@23.2.0-alpha3(transitive)

• - Removed@vaadin/component-base@23.2.0-alpha2(transitive)

• Updated@vaadin/component-base@23.2.0-alpha3