@vaadin/board - npm Package Compare versions

Comparing version 23.0.0-alpha2 to 23.0.0-alpha3

package.json

 {
   "name": "@vaadin/board",
-  "version": "23.0.0-alpha2",
+  "version": "23.0.0-alpha3",
   "publishConfig": {
@@ -38,5 +38,4 @@ "access": "public"
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-alpha3",
     "@vaadin/vaadin-license-checker": "^2.1.0"
@@ -49,3 +48,3 @@ },
   },
-  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
+  "gitHead": "490037919a9e054cc002c1b3be0c94a1603e1a44"
 }

src/vaadin-board-row.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
@@ -42,3 +43,3 @@ /**
  */
-declare class BoardRow extends ElementMixin(HTMLElement) {
+declare class BoardRow extends ResizeMixin(ElementMixin(HTMLElement)) {
   /**
@@ -48,3 +49,5 @@ * Redraws the row, if necessary.
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
@@ -51,0 +54,0 @@ redraw(): void;

src/vaadin-board-row.js

 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
 import { DomIf } from '@polymer/polymer/lib/elements/dom-if.js';
 import { DomRepeat } from '@polymer/polymer/lib/elements/dom-repeat.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
@@ -56,4 +54,5 @@ const CLASSES = {
  * @mixes ElementMixin
+ * @mixes ResizeMixin
  */
-class BoardRow extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class BoardRow extends ResizeMixin(ElementMixin(PolymerElement)) {
   static get template() {
@@ -86,3 +85,2 @@ return html`
     super();
-    this._onIronResize = this._onIronResize.bind(this);
     this._oldWidth = 0;
@@ -96,16 +94,4 @@ this._oldBreakpoints = { smallSize: 600, mediumSize: 960 };
     super.ready();
-    this.addEventListener('iron-resize', this._onIronResize, true);
-    this.$.insertionPoint.addEventListener('slotchange', this.redraw.bind(this));
-    afterNextRender(this, function () {
-      // force this as an interested resizable of parent
-      this.dispatchEvent(
-        new CustomEvent('iron-request-resize-notifications', {
-          node: this,
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {}
-        })
-      );
-    });
+
+    this.$.insertionPoint.addEventListener('slotchange', () => this.redraw());
   }
@@ -116,3 +102,3 @@
     super.connectedCallback();
-    afterNextRender(this, this._onIronResize);
+    this._onResize();
   }
@@ -184,3 +170,3 @@
     nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
+      spaceLeft -= boardCols[i];
     });
@@ -213,3 +199,3 @@
     nodes.forEach((node, i) => {
-      spaceLeft = spaceLeft - boardCols[i];
+      spaceLeft -= boardCols[i];
       if (spaceLeft < 0) {
@@ -232,3 +218,5 @@ if (!isErrorReported) {
    * In most cases, a board row will redraw itself if your reconfigure it.
-   * If you dynamically change CSS which affects the row, then you need to call this method.
+   * If you dynamically change breakpoints
+   * --vaadin-board-width-small or --vaadin-board-width-medium,
+   * then you need to call this method.
    */
@@ -239,4 +227,7 @@ redraw() {
 
-  /** @private */
-  _onIronResize() {
+  /**
+   * @protected
+   * @override
+   */
+  _onResize() {
     this._recalculateFlexBasis(false);
@@ -243,0 +234,0 @@ }

src/vaadin-board.d.ts

 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
@@ -31,4 +31,5 @@ */
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
@@ -35,0 +36,0 @@ redraw(): void;

src/vaadin-board.js

 /**
  * @license
- * Copyright (c) 2017 - 2021 Vaadin Ltd
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
@@ -8,6 +8,5 @@ */
 import './vaadin-board-row.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { BoardRow } from './vaadin-board-row.js';
 
@@ -36,3 +35,3 @@ /**
  */
-class Board extends ElementMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)) {
+class Board extends ElementMixin(PolymerElement) {
   static get template() {
@@ -70,7 +69,8 @@ return html`
    *
-   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change CSS
-   * which affects this element, then you need to call this method.
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
    */
   redraw() {
-    this.notifyResize();
+    [...this.querySelectorAll('*')].filter((node) => node instanceof BoardRow).forEach((row) => row.redraw());
   }
@@ -77,0 +77,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

Dependency count

3

decreased by-25%

Worsened metrics

Total package byte prevSize

33060

decreased by-1.49%

Lines of code

445

decreased by-1.33%

Dependency changes

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

• - Removed@polymer/iron-resizable-behavior@^3.0.0

• - Removed@polymer/iron-resizable-behavior@3.0.1(transitive)

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

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