@vaadin/field-base - npm Package Compare versions

Comparing version 22.0.0-alpha2 to 22.0.0-alpha3

index.d.ts

@@ -19,1 +19,3 @@ export { AriaLabelMixin } from './src/aria-label-mixin.js';
 export { ValidateMixin } from './src/validate-mixin.js';
+export { TabindexMixin } from './src/tabindex-mixin.js';
+export { ActiveMixin } from './src/active-mixin.js';

index.js

@@ -19,1 +19,3 @@ export { AriaLabelMixin } from './src/aria-label-mixin.js';
 export { ValidateMixin } from './src/validate-mixin.js';
+export { TabindexMixin } from './src/tabindex-mixin.js';
+export { ActiveMixin } from './src/active-mixin.js';

package.json

 {
   "name": "@vaadin/field-base",
-  "version": "22.0.0-alpha2",
+  "version": "22.0.0-alpha3",
   "description": "Vaadin field base mixins",
@@ -35,3 +35,3 @@ "main": "index.js",
   },
-  "gitHead": "179d38f5146be752853ea4b7997b1446a2ab1fd4"
+  "gitHead": "efd855b1c0a7c4998f43670a17b0c7fdfe14ff9d"
 }

src/delegate-focus-mixin.d.ts

@@ -25,4 +25,7 @@ /**
   /**
-   * Any element extending this mixin is required to implement this getter.
-   * It returns the actual focusable element in the component.
+   * A reference to the focusable element controlled by the mixin.
+   * It can be an input, textarea, button or any element with tabindex > -1.
+   *
+   * Any component implementing this mixin is expected to provide it
+   * by using `this._setFocusElement(input)` Polymer API.
    */
@@ -29,0 +32,0 @@ readonly focusElement: Element | null | undefined;

src/delegate-focus-mixin.js

@@ -19,2 +19,18 @@ /**
           type: Boolean
+        },
+
+        /**
+         * A reference to the focusable element controlled by the mixin.
+         * It can be an input, textarea, button or any element with tabindex > -1.
+         *
+         * Any component implementing this mixin is expected to provide it
+         * by using `this._setFocusElement(input)` Polymer API.
+         *
+         * @protected
+         * @type {!HTMLElement}
+         */
+        focusElement: {
+          type: Object,
+          readOnly: true,
+          observer: '_focusElementChanged'
         }
@@ -24,10 +40,7 @@ };
 
-    /**
-     * Any element extending this mixin is required to implement this getter.
-     * It returns the actual focusable element in the component.
-     * @return {Element | null | undefined}
-     */
-    get focusElement() {
-      console.warn(`Please implement the 'focusElement' property in <${this.localName}>`);
-      return null;
+    constructor() {
+      super();
+
+      this._boundOnBlur = this._onBlur.bind(this);
+      this._boundOnFocus = this._onFocus.bind(this);
     }
@@ -70,6 +83,58 @@
 
+    /** @protected */
+    _focusElementChanged(element, oldElement) {
+      if (element) {
+        this._addFocusListeners(element);
+      } else if (oldElement) {
+        this._removeFocusListeners(oldElement);
+      }
+    }
+
     /**
+     * @param {HTMLElement} element
+     * @protected
+     */
+    _addFocusListeners(element) {
+      element.addEventListener('blur', this._boundOnBlur);
+      element.addEventListener('focus', this._boundOnFocus);
+    }
+
+    /**
+     * @param {HTMLElement} element
+     * @protected
+     */
+    _removeFocusListeners(element) {
+      element.removeEventListener('blur', this._boundOnBlur);
+      element.removeEventListener('focus', this._boundOnFocus);
+    }
+
+    /**
+     * Focus event does not bubble, so we dispatch it manually
+     * on the host element to support adding focus listeners
+     * when the focusable element is placed in light DOM.
+     * @param {FocusEvent} event
+     * @protected
+     */
+    _onFocus(event) {
+      event.stopPropagation();
+      this.dispatchEvent(new Event('focus'));
+    }
+
+    /**
+     * Blur event does not bubble, so we dispatch it manually
+     * on the host element to support adding blur listeners
+     * when the focusable element is placed in light DOM.
+     * @param {FocusEvent} event
+     * @protected
+     */
+    _onBlur(event) {
+      event.stopPropagation();
+      this.dispatchEvent(new Event('blur'));
+    }
+
+    /**
      * @param {Event} event
      * @return {boolean}
      * @protected
+     * @override
      */
@@ -76,0 +141,0 @@ _shouldSetFocus(event) {

src/input-field-mixin.js

@@ -80,17 +80,2 @@ /**
 
-    /**
-     * Element used by `DelegatesFocusMixin` to handle focus.
-     * @return {!HTMLInputElement}
-     */
-    get focusElement() {
-      return this.inputElement;
-    }
-
-    constructor() {
-      super();
-
-      this._boundOnBlur = this._onBlur.bind(this);
-      this._boundOnFocus = this._onFocus.bind(this);
-    }
-
     /** @protected */
@@ -137,32 +122,24 @@ connectedCallback() {
     /**
-     * @param {HTMLInputElement} input
+     * Override an event listener from `DelegatesFocusMixin`.
+     * @param {FocusEvent} event
      * @protected
+     * @override
      */
-    _addInputListeners(input) {
-      super._addInputListeners(input);
+    _onFocus(event) {
+      super._onFocus(event);
 
-      input.addEventListener('blur', this._boundOnBlur);
-      input.addEventListener('focus', this._boundOnFocus);
+      if (this.autoselect && this.inputElement) {
+        this.inputElement.select();
+      }
     }
 
     /**
-     * @param {HTMLInputElement} input
+     * Override an event listener from `DelegatesFocusMixin`.
+     * @param {FocusEvent} event
      * @protected
+     * @override
      */
-    _removeInputListeners(input) {
-      super._addInputListeners(input);
+    _onBlur(event) {
+      super._onBlur(event);
 
-      input.removeEventListener('blur', this._boundOnBlur);
-      input.removeEventListener('focus', this._boundOnFocus);
-    }
-
-    /** @private */
-    _onFocus() {
-      if (this.autoselect && this.inputElement) {
-        this.inputElement.select();
-      }
-    }
-
-    /** @private */
-    _onBlur() {
       this.validate();
@@ -169,0 +146,0 @@ }

src/input-slot-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { DelegatesFocusMixin } from './delegate-focus-mixin.js';
 import { SlotMixin } from './slot-mixin.js';
@@ -19,3 +20,3 @@ import { InputMixin } from './input-mixin.js';
 
-interface InputSlotMixin extends InputMixin, SlotMixin {
+interface InputSlotMixin extends DelegatesFocusMixin, InputMixin, SlotMixin {
   /**
@@ -22,0 +23,0 @@ * String used to define input type.

src/input-slot-mixin.js

@@ -7,2 +7,3 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 import { InputMixin } from './input-mixin.js';
@@ -12,3 +13,3 @@ import { SlotMixin } from './slot-mixin.js';
 const InputSlotMixinImplementation = (superclass) =>
-  class InputSlotMixinClass extends InputMixin(SlotMixin(superclass)) {
+  class InputSlotMixinClass extends DelegateFocusMixin(InputMixin(SlotMixin(superclass))) {
     static get properties() {
@@ -64,2 +65,3 @@ /**
         this._setInputElement(inputNode);
+        this._setFocusElement(inputNode);
       }
@@ -66,0 +68,0 @@ }

src/text-area-slot-mixin.d.ts

@@ -6,2 +6,3 @@ /**
  */
+import { DelegatesFocusMixin } from './delegate-focus-mixin.js';
 import { SlotMixin } from './slot-mixin.js';
@@ -19,4 +20,4 @@ import { InputMixin } from './input-mixin.js';
 
-interface TextAreaSlotMixin extends InputMixin, SlotMixin {}
+interface TextAreaSlotMixin extends DelegatesFocusMixin, InputMixin, SlotMixin {}
 
 export { TextAreaSlotMixinConstructor, TextAreaSlotMixin };

src/text-area-slot-mixin.js

@@ -7,2 +7,3 @@ /**
 import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { DelegateFocusMixin } from './delegate-focus-mixin.js';
 import { InputMixin } from './input-mixin.js';
@@ -12,3 +13,3 @@ import { SlotMixin } from './slot-mixin.js';
 const TextAreaSlotMixinImplementation = (superclass) =>
-  class TextAreaSlotMixinClass extends InputMixin(SlotMixin(superclass)) {
+  class TextAreaSlotMixinClass extends DelegateFocusMixin(InputMixin(SlotMixin(superclass))) {
     get slots() {
@@ -49,2 +50,3 @@ return {
         this._setInputElement(textArea);
+        this._setFocusElement(textArea);
       }
@@ -51,0 +53,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

85278

increased by6.61%

Number of package files

47

increased by4.44%

Lines of code

2193

increased by7.34%

No dependency changes