@vaadin/custom-field - npm Package Compare versions

Comparing version 23.2.0-dev.8a7678b70 to 23.2.0-rc1

package.json

 {
   "name": "@vaadin/custom-field",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.2.0-rc1",
   "publishConfig": {
@@ -26,3 +26,5 @@ "access": "public"
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
@@ -37,26 +39,30 @@ "keywords": [
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/field-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.2.0-rc1",
+    "@vaadin/field-base": "23.2.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-material-styles": "23.2.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/combo-box": "23.2.0-dev.8a7678b70",
-    "@vaadin/date-picker": "23.2.0-dev.8a7678b70",
-    "@vaadin/email-field": "23.2.0-dev.8a7678b70",
-    "@vaadin/form-layout": "23.2.0-dev.8a7678b70",
-    "@vaadin/list-box": "23.2.0-dev.8a7678b70",
-    "@vaadin/number-field": "23.2.0-dev.8a7678b70",
-    "@vaadin/password-field": "23.2.0-dev.8a7678b70",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-dev.8a7678b70",
-    "@vaadin/select": "23.2.0-dev.8a7678b70",
+    "@vaadin/combo-box": "23.2.0-rc1",
+    "@vaadin/date-picker": "23.2.0-rc1",
+    "@vaadin/email-field": "23.2.0-rc1",
+    "@vaadin/form-layout": "23.2.0-rc1",
+    "@vaadin/list-box": "23.2.0-rc1",
+    "@vaadin/number-field": "23.2.0-rc1",
+    "@vaadin/password-field": "23.2.0-rc1",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-rc1",
+    "@vaadin/select": "23.2.0-rc1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "23.2.0-dev.8a7678b70",
-    "@vaadin/text-field": "23.2.0-dev.8a7678b70",
-    "@vaadin/time-picker": "23.2.0-dev.8a7678b70",
+    "@vaadin/text-area": "23.2.0-rc1",
+    "@vaadin/text-field": "23.2.0-rc1",
+    "@vaadin/time-picker": "23.2.0-rc1",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
 }

src/vaadin-custom-field.d.ts

@@ -8,2 +8,3 @@ /**
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -39,2 +40,14 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type CustomFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
+
+/**
+ * Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
+ */
+export type CustomFieldInternalTabEvent = Event & {
+  target: CustomField;
+};
+
 export interface CustomFieldCustomEventMap {
@@ -44,2 +57,6 @@ 'invalid-changed': CustomFieldInvalidChangedEvent;
   'value-changed': CustomFieldValueChangedEvent;
+
+  'internal-tab': CustomFieldInternalTabEvent;
+
+  validated: CustomFieldValidatedEvent;
 }
@@ -90,4 +107,5 @@
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
-declare class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
+declare class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
   /**
@@ -151,3 +169,3 @@ * Array of available input nodes
     listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
@@ -158,3 +176,3 @@
     listener: (this: CustomField, ev: CustomFieldEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
@@ -161,0 +179,0 @@ }

src/vaadin-custom-field.js

@@ -8,5 +8,5 @@ /**
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isChrome } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -54,2 +54,3 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
@@ -60,5 +61,6 @@ * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes KeyboardMixin
  * @mixes ThemableMixin
  */
-class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
+class CustomField extends FieldMixin(FocusMixin(KeyboardMixin(ThemableMixin(ElementMixin(PolymerElement))))) {
   static get is() {
@@ -226,4 +228,2 @@ return 'vaadin-custom-field';
     });
-
-    this.__fixChromeFocus();
   }
@@ -279,24 +279,19 @@
 
-  /** @private */
-  __fixChromeFocus() {
-    this.addEventListener('keydown', (e) => {
-      if (e.keyCode === 9) {
-        // FIXME(yuriy): remove this workaround once this issue is fixed:
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=1014868&can=2&num=100&q=slot%20shift%20tab
-        if (e.target.parentElement.localName === 'slot' && !e.defaultPrevented && isChrome) {
-          const slot = e.target.parentElement;
-          slot.setAttribute('tabindex', -1);
-          setTimeout(() => slot.removeAttribute('tabindex'));
-        }
-        if (
-          (this.inputs.indexOf(e.target) < this.inputs.length - 1 && !e.shiftKey) ||
-          (this.inputs.indexOf(e.target) > 0 && e.shiftKey)
-        ) {
-          this.dispatchEvent(new CustomEvent('internal-tab'));
-        } else {
-          // FIXME(yuriy): remove this workaround when value should not be updated before focusout
-          this.__setValue();
-        }
+  /**
+   * @param {KeyboardEvent} e
+   * @protected
+   * @override
+   */
+  _onKeyDown(e) {
+    if (e.key === 'Tab') {
+      if (
+        (this.inputs.indexOf(e.target) < this.inputs.length - 1 && !e.shiftKey) ||
+        (this.inputs.indexOf(e.target) > 0 && e.shiftKey)
+      ) {
+        this.dispatchEvent(new CustomEvent('internal-tab'));
+      } else {
+        // FIXME(yuriy): remove this workaround when value should not be updated before focusout
+        this.__setValue();
       }
-    });
+    }
   }
@@ -382,3 +377,5 @@
 
-    this.inputs.forEach((input, id) => (input.value = valuesArray[id]));
+    this.inputs.forEach((input, id) => {
+      input.value = valuesArray[id];
+    });
     if (oldValue !== undefined) {
@@ -385,0 +382,0 @@ this.validate();

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

52661

increased by39.64%

Number of package files

13

increased by18.18%

Lines of code

975

increased by53.79%

Dependency changes

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

• + Added@vaadin/field-base@23.2.0-rc1(transitive)

• + Added@vaadin/icon@23.2.0-rc1(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.2.0-rc1(transitive)

• + Added@vaadin/vaadin-material-styles@23.2.0-rc1(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.2.0-rc1(transitive)

• - Removed@vaadin/component-base@23.2.0-dev.8a7678b70(transitive)

• - Removed@vaadin/field-base@23.2.0-dev.8a7678b70(transitive)

• - Removed@vaadin/icon@23.2.0-dev.8a7678b70(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.2.0-dev.8a7678b70(transitive)

• - Removed@vaadin/vaadin-material-styles@23.2.0-dev.8a7678b70(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.2.0-dev.8a7678b70(transitive)

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

• Updated@vaadin/field-base@23.2.0-rc1

• Updated@vaadin/vaadin-lumo-styles@23.2.0-rc1

• Updated@vaadin/vaadin-material-styles@23.2.0-rc1

• Updated@vaadin/vaadin-themable-mixin@23.2.0-rc1