@vaadin/tabs - npm Package Compare versions

package.json

		{
		"name": "@vaadin/tabs",
		"version": "23.0.0-alpha1",
		"version": "23.0.0-alpha2",
		"publishConfig": {
		@@ -35,10 +35,9 @@ "access": "public"
		"dependencies": {
		"@polymer/iron-resizable-behavior": "^3.0.0",
		"@polymer/polymer": "^3.0.0",
		"@vaadin/component-base": "23.0.0-alpha1",
		"@vaadin/item": "23.0.0-alpha1",
		"@vaadin/vaadin-list-mixin": "23.0.0-alpha1",
		"@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
		"@vaadin/vaadin-material-styles": "23.0.0-alpha1",
		"@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
		"@vaadin/component-base": "23.0.0-alpha2",
		"@vaadin/item": "23.0.0-alpha2",
		"@vaadin/vaadin-list-mixin": "23.0.0-alpha2",
		"@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
		"@vaadin/vaadin-material-styles": "23.0.0-alpha2",
		"@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
		},
		@@ -50,3 +49,3 @@ "devDependencies": {
		},
		"gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
		"gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
		}

src/vaadin-tabs.js

		@@ -7,4 +7,2 @@ /**
		import './vaadin-tab.js';
		import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
		import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
		import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
		@@ -55,3 +53,3 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
		*/
		class Tabs extends ElementMixin(ListMixin(ThemableMixin(mixinBehaviors([IronResizableBehavior], PolymerElement)))) {
		class Tabs extends ElementMixin(ListMixin(ThemableMixin(PolymerElement))) {
		static get template() {
		@@ -172,8 +170,15 @@ return html`
		static get observers() {
		return ['_updateOverflow(items.*)'];
		return ['__tabsItemsChanged(items, items.*)'];
		}

		constructor() {
		super();

		this.__resizeObserver = new ResizeObserver(() => {
		requestAnimationFrame(() => this._updateOverflow());
		});
		}

		ready() {
		super.ready();
		this.addEventListener('iron-resize', () => this._updateOverflow());
		this._scrollerElement.addEventListener('scroll', () => this._updateOverflow());
		@@ -189,2 +194,16 @@ this.setAttribute('role', 'tablist');
		/** @private */
		__tabsItemsChanged(items) {
		// Disconnected to unobserve any removed items
		this.__resizeObserver.disconnect();
		this.__resizeObserver.observe(this);

		// Observe current items
		(items \|\| []).forEach((item) => {
		this.__resizeObserver.observe(item);
		});

		this._updateOverflow();
		}

		/** @private */
		_scrollForward() {
		@@ -191,0 +210,0 @@ this._scroll(-this.__direction * this._scrollOffset);

Improved metrics