@vaadin/component-base - npm Package Compare versions

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

index.d.ts

 export { ActiveMixin } from './src/active-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
+export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
@@ -4,0 +5,0 @@ export { KeyboardMixin } from './src/keyboard-mixin.js';

index.js

 export { ActiveMixin } from './src/active-mixin.js';
 export { DisabledMixin } from './src/disabled-mixin.js';
+export { ElementMixin } from './src/element-mixin.js';
 export { FocusMixin } from './src/focus-mixin.js';
@@ -4,0 +5,0 @@ export { KeyboardMixin } from './src/keyboard-mixin.js';

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Vaadin component base mixins",
-  "main": "index.js",
-  "module": "index.js",
-  "repository": "vaadin/web-components",
-  "keywords": [
-    "Vaadin",
-    "web-components",
-    "web-component"
-  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/component-base"
+  },
   "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
+  "homepage": "https://vaadin.com/components",
   "bugs": {
     "url": "https://github.com/vaadin/web-components"
   },
-  "homepage": "https://vaadin.com/components",
+  "main": "index.js",
+  "module": "index.js",
   "files": [
+    "custom_typings",
+    "index.d.ts",
     "index.js",
-    "index.d.ts",
     "src"
   ],
+  "keywords": [
+    "Vaadin",
+    "web-components",
+    "web-component"
+  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0"
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/vaadin-development-mode-detector": "^2.0.0",
+    "@vaadin/vaadin-usage-statistics": "^2.1.0",
+    "lit": "^2.0.0"
   },
@@ -30,8 +41,5 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.0",
-    "sinon": "^9.2.1"
+    "sinon": "^9.2.4"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

README.md

@@ -8,1 +8,3 @@ # @vaadin/component-base
 Apache License 2.0
+
+Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

src/active-mixin.js

@@ -6,3 +6,2 @@ /**
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
@@ -12,3 +11,14 @@ import { DisabledMixin } from './disabled-mixin.js';
 
-const ActiveMixinImplementation = (superclass) =>
+/**
+ * A mixin to toggle the `active` attribute.
+ *
+ * The attribute is set whenever the user activates the element by a pointer
+ * or presses an activation key on the element from the keyboard.
+ *
+ * The attribute is removed as soon as the element is deactivated
+ * by the pointer or by releasing the activation key.
+ *
+ * @polymerMixin
+ */
+export const ActiveMixin = (superclass) =>
   class ActiveMixinClass extends DisabledMixin(GestureEventListeners(KeyboardMixin(superclass))) {
@@ -32,6 +42,6 @@ /**
 
-      this._addEventListenerToNode(this, 'down', () => {
-        if (this.disabled) return;
-
-        this._setActive(true);
+      this._addEventListenerToNode(this, 'down', (event) => {
+        if (this._shouldSetActive(event)) {
+          this._setActive(true);
+        }
       });
@@ -42,6 +52,2 @@
       });
-
-      this.addEventListener('blur', () => {
-        this._setActive(false);
-      });
     }
@@ -61,2 +67,10 @@
     /**
+     * @param {KeyboardEvent | MouseEvent} _event
+     * @protected
+     */
+    _shouldSetActive(_event) {
+      return !this.disabled;
+    }
+
+    /**
      * Sets the `active` attribute on the element if an activation key is pressed.
@@ -71,3 +85,3 @@ *
 
-      if (!this.disabled && this._activeKeys.includes(event.key)) {
+      if (this._shouldSetActive(event) && this._activeKeys.includes(event.key)) {
         this._setActive(true);
@@ -102,12 +116,1 @@ }
   };
-
-/**
- * A mixin to toggle the `active` attribute.
- *
- * The attribute is set whenever the user activates the element by a pointer
- * or presses an activation key on the element from the keyboard.
- *
- * The attribute is removed as soon as the element is deactivated
- * by the pointer or by releasing the activation key.
- */
-export const ActiveMixin = dedupingMixin(ActiveMixinImplementation);

src/disabled-mixin.js

@@ -8,54 +8,56 @@ /**
 
-const DisabledMixinImplementation = (superclass) =>
-  class DisabledMixinClass extends superclass {
-    static get properties() {
-      return {
-        /**
-         * If true, the user cannot interact with this element.
-         */
-        disabled: {
-          type: Boolean,
-          value: false,
-          observer: '_disabledChanged',
-          reflectToAttribute: true
-        }
-      };
-    }
+/**
+ * A mixin to provide disabled property for field components.
+ *
+ * @polymerMixin
+ */
+export const DisabledMixin = dedupingMixin(
+  (superclass) =>
+    class DisabledMixinClass extends superclass {
+      static get properties() {
+        return {
+          /**
+           * If true, the user cannot interact with this element.
+           */
+          disabled: {
+            type: Boolean,
+            value: false,
+            observer: '_disabledChanged',
+            reflectToAttribute: true
+          }
+        };
+      }
 
-    /**
-     * @param {boolean} disabled
-     * @protected
-     */
-    _disabledChanged(disabled) {
-      this._setAriaDisabled(disabled);
-    }
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _disabledChanged(disabled) {
+        this._setAriaDisabled(disabled);
+      }
 
-    /**
-     * @param {boolean} disabled
-     * @protected
-     */
-    _setAriaDisabled(disabled) {
-      if (disabled) {
-        this.setAttribute('aria-disabled', 'true');
-      } else {
-        this.removeAttribute('aria-disabled');
+      /**
+       * @param {boolean} disabled
+       * @protected
+       */
+      _setAriaDisabled(disabled) {
+        if (disabled) {
+          this.setAttribute('aria-disabled', 'true');
+        } else {
+          this.removeAttribute('aria-disabled');
+        }
       }
-    }
 
-    /**
-     * Overrides the default element `click` method in order to prevent
-     * firing the `click` event when the element is disabled.
-     *
-     * @override
-     */
-    click() {
-      if (!this.disabled) {
-        super.click();
+      /**
+       * Overrides the default element `click` method in order to prevent
+       * firing the `click` event when the element is disabled.
+       * @protected
+       * @override
+       */
+      click() {
+        if (!this.disabled) {
+          super.click();
+        }
       }
     }
-  };
-
-/**
- * A mixin to provide disabled property for field components.
- */
-export const DisabledMixin = dedupingMixin(DisabledMixinImplementation);
+);

src/focus-mixin.js

@@ -30,76 +30,78 @@ /**
 
-const FocusMixinImplementation = (superclass) =>
-  class FocusMixinClass extends superclass {
-    /** @protected */
-    ready() {
-      this.addEventListener('focusin', (e) => {
-        if (this._shouldSetFocus(e)) {
-          this._setFocused(true);
-        }
-      });
+/**
+ * A mixin to handle `focused` and `focus-ring` attributes based on focus.
+ *
+ * @polymerMixin
+ */
+export const FocusMixin = dedupingMixin(
+  (superclass) =>
+    class FocusMixinClass extends superclass {
+      /** @protected */
+      ready() {
+        this.addEventListener('focusin', (e) => {
+          if (this._shouldSetFocus(e)) {
+            this._setFocused(true);
+          }
+        });
 
-      this.addEventListener('focusout', (e) => {
-        if (this._shouldRemoveFocus(e)) {
-          this._setFocused(false);
-        }
-      });
+        this.addEventListener('focusout', (e) => {
+          if (this._shouldRemoveFocus(e)) {
+            this._setFocused(false);
+          }
+        });
 
-      // In super.ready() other 'focusin' and 'focusout' listeners might be
-      // added, so we call it after our own ones to ensure they execute first.
-      // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
-      // input field on iOS after “Done” is pressed.
-      super.ready();
-    }
+        // In super.ready() other 'focusin' and 'focusout' listeners might be
+        // added, so we call it after our own ones to ensure they execute first.
+        // Issue to watch out: when incorrect, <vaadin-combo-box> refocuses the
+        // input field on iOS after “Done” is pressed.
+        super.ready();
+      }
 
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
+      /** @protected */
+      disconnectedCallback() {
+        super.disconnectedCallback();
 
-      // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
-      // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
-      if (this.hasAttribute('focused')) {
-        this._setFocused(false);
+        // in non-Chrome browsers, blur does not fire on the element when it is disconnected.
+        // reproducible in `<vaadin-date-picker>` when closing on `Cancel` or `Today` click.
+        if (this.hasAttribute('focused')) {
+          this._setFocused(false);
+        }
       }
-    }
 
-    /**
-     * Override to change how focused and focus-ring attributes are set.
-     *
-     * @param {boolean} focused
-     * @protected
-     */
-    _setFocused(focused) {
-      this.toggleAttribute('focused', focused);
+      /**
+       * Override to change how focused and focus-ring attributes are set.
+       *
+       * @param {boolean} focused
+       * @protected
+       */
+      _setFocused(focused) {
+        this.toggleAttribute('focused', focused);
 
-      // focus-ring is true when the element was focused from the keyboard.
-      // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
-      this.toggleAttribute('focus-ring', focused && keyboardActive);
-    }
+        // focus-ring is true when the element was focused from the keyboard.
+        // Focus Ring [A11ycasts]: https://youtu.be/ilj2P5-5CjI
+        this.toggleAttribute('focus-ring', focused && keyboardActive);
+      }
 
-    /**
-     * Override to define if the field receives focus based on the event.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldSetFocus(_event) {
-      return true;
-    }
+      /**
+       * Override to define if the field receives focus based on the event.
+       *
+       * @param {FocusEvent} event
+       * @return {boolean}
+       * @protected
+       */
+      _shouldSetFocus(_event) {
+        return true;
+      }
 
-    /**
-     * Override to define if the field loses focus based on the event.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldRemoveFocus(_event) {
-      return true;
+      /**
+       * Override to define if the field loses focus based on the event.
+       *
+       * @param {FocusEvent} event
+       * @return {boolean}
+       * @protected
+       */
+      _shouldRemoveFocus(_event) {
+        return true;
+      }
     }
-  };
-
-/**
- * A mixin to handle `focused` and `focus-ring` attributes based on focus.
- */
-export const FocusMixin = dedupingMixin(FocusMixinImplementation);
+);

src/keyboard-mixin.js

@@ -8,45 +8,47 @@ /**
 
-const KeyboardMixinImplementation = (superclass) =>
-  class KeyboardMixinClass extends superclass {
-    /** @protected */
-    ready() {
-      super.ready();
+/**
+ * A mixin that manages keyboard handling.
+ * The mixin subscribes to the keyboard events while an actual implementation
+ * for the event handlers is left to the client (a component or another mixin).
+ *
+ * @polymerMixin
+ */
+export const KeyboardMixin = dedupingMixin(
+  (superclass) =>
+    class KeyboardMixinClass extends superclass {
+      /** @protected */
+      ready() {
+        super.ready();
 
-      this.addEventListener('keydown', (event) => {
-        this._onKeyDown(event);
-      });
+        this.addEventListener('keydown', (event) => {
+          this._onKeyDown(event);
+        });
 
-      this.addEventListener('keyup', (event) => {
-        this._onKeyUp(event);
-      });
-    }
+        this.addEventListener('keyup', (event) => {
+          this._onKeyUp(event);
+        });
+      }
 
-    /**
-     * A handler for the `keydown` event. By default, it does nothing.
-     * Override the method to implement your own behavior.
-     *
-     * @param {KeyboardEvent} _event
-     * @protected
-     */
-    _onKeyDown(_event) {
-      // To be implemented.
-    }
+      /**
+       * A handler for the `keydown` event. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onKeyDown(_event) {
+        // To be implemented.
+      }
 
-    /**
-     * A handler for the `keyup` event. By default, it does nothing.
-     * Override the method to implement your own behavior.
-     *
-     * @param {KeyboardEvent} _event
-     * @protected
-     */
-    _onKeyUp(_event) {
-      // To be implemented.
+      /**
+       * A handler for the `keyup` event. By default, it does nothing.
+       * Override the method to implement your own behavior.
+       *
+       * @param {KeyboardEvent} _event
+       * @protected
+       */
+      _onKeyUp(_event) {
+        // To be implemented.
+      }
     }
-  };
-
-/**
- * A mixin that manages keyboard handling.
- * The mixin subscribes to the keyboard events while an actual implementation
- * for the event handlers is left to the client (a component or another mixin).
- */
-export const KeyboardMixin = dedupingMixin(KeyboardMixinImplementation);
+);

src/slot-mixin.js

@@ -8,43 +8,46 @@ /**
 
-const SlotMixinImplementation = (superclass) =>
-  class SlotMixinClass extends superclass {
-    /**
-     * List of named slots to initialize.
-     */
-    get slots() {
-      return {};
-    }
+/**
+ * A mixin to provide content for named slots defined by component.
+ *
+ * @polymerMixin
+ */
+export const SlotMixin = dedupingMixin(
+  (superclass) =>
+    class SlotMixinClass extends superclass {
+      /**
+       * List of named slots to initialize.
+       * @protected
+       */
+      get slots() {
+        return {};
+      }
 
-    /** @protected */
-    ready() {
-      super.ready();
-      this._connectSlotMixin();
-    }
+      /** @protected */
+      ready() {
+        super.ready();
+        this._connectSlotMixin();
+      }
 
-    /** @private */
-    _connectSlotMixin() {
-      Object.keys(this.slots).forEach((slotName) => {
-        // Ignore labels of nested components, if any
-        const hasContent = this._getDirectSlotChild(slotName) !== undefined;
+      /** @private */
+      _connectSlotMixin() {
+        Object.keys(this.slots).forEach((slotName) => {
+          // Ignore labels of nested components, if any
+          const hasContent = this._getDirectSlotChild(slotName) !== undefined;
 
-        if (!hasContent) {
-          const slotFactory = this.slots[slotName];
-          const slotContent = slotFactory();
-          if (slotContent instanceof Element) {
-            slotContent.setAttribute('slot', slotName);
-            this.appendChild(slotContent);
+          if (!hasContent) {
+            const slotFactory = this.slots[slotName];
+            const slotContent = slotFactory();
+            if (slotContent instanceof Element) {
+              slotContent.setAttribute('slot', slotName);
+              this.appendChild(slotContent);
+            }
           }
-        }
-      });
-    }
+        });
+      }
 
-    /** @protected */
-    _getDirectSlotChild(slotName) {
-      return Array.from(this.children).find((el) => el.slot === slotName);
+      /** @protected */
+      _getDirectSlotChild(slotName) {
+        return Array.from(this.children).find((el) => el.slot === slotName);
+      }
     }
-  };
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export const SlotMixin = dedupingMixin(SlotMixinImplementation);
+);

src/tabindex-mixin.js

@@ -6,6 +6,16 @@ /**
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
 import { DisabledMixin } from './disabled-mixin.js';
 
-const TabindexMixinImplementation = (superclass) =>
+/**
+ * A mixin to provide the `tabindex` attribute.
+ *
+ * By default, the attribute is set to 0 that makes the element focusable.
+ *
+ * The attribute is set to -1 whenever the user disables the element
+ * and restored with the last known value once the element is enabled.
+ *
+ * @polymerMixin
+ * @mixes DisabledMixin
+ */
+export const TabindexMixin = (superclass) =>
   class TabindexMixinClass extends DisabledMixin(superclass) {
@@ -16,2 +26,3 @@ static get properties() {
          * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
+         * @protected
          */
@@ -71,11 +82,1 @@ tabindex: {
   };
-
-/**
- * A mixin to provide the `tabindex` attribute.
- *
- * By default, the attribute is set to 0 that makes the element focusable.
- *
- * The attribute is set to -1 whenever the user disables the element
- * and restored with the last known value once the element is enabled.
- */
-export const TabindexMixin = dedupingMixin(TabindexMixinImplementation);

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54938

increased by85.49%

Number of package files

28

increased by64.71%

Lines of code

1338

increased by143.72%

Number of lines in readme file

10

increased by25%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by300%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-development-mode-detector@^2.0.0

• + Added@vaadin/vaadin-usage-statistics@^2.1.0

• + Addedlit@^2.0.0

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Added@vaadin/vaadin-development-mode-detector@2.0.7(transitive)

• + Added@vaadin/vaadin-usage-statistics@2.1.3(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)