@vaadin/vaadin-tabs - npm Package Compare versions

Comparing version 4.0.0-alpha2 to 4.0.0-alpha3

package.json

 {
   "name": "@vaadin/vaadin-tabs",
-  "version": "4.0.0-alpha2",
+  "version": "4.0.0-alpha3",
   "description": "vaadin-tabs",
@@ -38,4 +38,3 @@ "main": "vaadin-tabs.js",
       "eslint --fix",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
@@ -64,19 +63,21 @@ },
   "dependencies": {
-    "@vaadin/element-base": "^0.2.0",
-    "@vaadin/active-state-mixin": "^0.1.2",
-    "@vaadin/disabled-state-mixin": "^0.1.0",
-    "@vaadin/focus-visible-mixin": "^0.1.2",
-    "@vaadin/keyboard-direction-mixin": "^0.1.4",
-    "@vaadin/orientation-mixin": "^0.1.1",
-    "@vaadin/resizable-mixin": "^0.1.0",
-    "@vaadin/roving-tabindex-mixin": "^0.1.5",
-    "@vaadin/selected-state-mixin": "^0.1.1",
-    "@vaadin/selection-in-view-mixin": "^0.1.7",
-    "@vaadin/single-selection-mixin": "^0.1.4",
-    "@vaadin/slotted-items-mixin": "^0.1.3",
-    "@vaadin/themable-element": "^0.1.2",
+    "@vaadin/element-base": "^0.3.0",
+    "@vaadin/active-state-mixin": "^0.1.6",
+    "@vaadin/direction-mixin": "0.1.1",
+    "@vaadin/disabled-state-mixin": "^0.1.1",
+    "@vaadin/focus-visible-mixin": "^0.1.4",
+    "@vaadin/keyboard-direction-mixin": "^0.1.6",
+    "@vaadin/mixin-utils": "^0.1.0",
+    "@vaadin/orientation-mixin": "^0.1.2",
+    "@vaadin/resizable-mixin": "^0.1.1",
+    "@vaadin/roving-tabindex-mixin": "^0.1.7",
+    "@vaadin/selected-state-mixin": "^0.1.2",
+    "@vaadin/selection-in-view-mixin": "^0.1.9",
+    "@vaadin/single-selection-mixin": "^0.1.6",
+    "@vaadin/slotted-items-mixin": "^0.1.5",
+    "@vaadin/themable-element": "^0.2.0",
     "@vaadin/vaadin-lumo-styles": "^1.6.0",
     "@vaadin/vaadin-material-styles": "^1.3.2",
     "@vaadin/vaadin-themable-mixin": "^1.5.2",
-    "lit-element": "^2.0.0",
+    "lit-element": "^2.3.0",
     "lit-html": "^1.0.0",
@@ -86,4 +87,4 @@ "tslib": "^1.10.0"
   "devDependencies": {
-    "@vaadin/vaadin-component-dev-dependencies": "^4.7.0"
+    "@vaadin/vaadin-component-dev-dependencies": "^4.9.0"
   }
 }

src/vaadin-tab-mixin.d.ts

 import { LitElement } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
 import { ActiveStateClass } from '@vaadin/active-state-mixin/active-state-class.js';
@@ -6,6 +7,4 @@ import { DisabledStateInterface } from '@vaadin/disabled-state-mixin/disabled-state-mixin.js';
 import { SelectedStateInterface } from '@vaadin/selected-state-mixin/selected-state-mixin.js';
-declare type TabBase = new () => LitElement;
-declare type Tab = new () => LitElement & DisabledStateInterface & FocusVisibleInterface & ActiveStateClass & SelectedStateInterface;
-export declare const TabMixin: <T extends TabBase>(base: T) => Tab;
-export {};
+export declare type Tab = DisabledStateInterface & FocusVisibleInterface & ActiveStateClass & SelectedStateInterface;
+export declare const TabMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<Tab>;
 //# sourceMappingURL=vaadin-tab-mixin.d.ts.map

src/vaadin-tab-mixin.ts

 import { LitElement, PropertyValues } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
 import { ActiveStateMixin } from '@vaadin/active-state-mixin/active-state-mixin.js';
@@ -8,11 +9,5 @@ import { ActiveStateClass } from '@vaadin/active-state-mixin/active-state-class.js';
 
-type TabBase = new () => LitElement;
+export type Tab = DisabledStateInterface & FocusVisibleInterface & ActiveStateClass & SelectedStateInterface;
 
-type Tab = new () => LitElement &
-  DisabledStateInterface &
-  FocusVisibleInterface &
-  ActiveStateClass &
-  SelectedStateInterface;
-
-export const TabMixin = <T extends TabBase>(base: T): Tab => {
+export const TabMixin = <T extends Constructor<LitElement>>(base: T): T & Constructor<Tab> => {
   class Tab extends SelectedStateMixin(FocusVisibleMixin(ActiveStateMixin(DisabledStateMixin(base)))) {
@@ -19,0 +14,0 @@ protected firstUpdated(props: PropertyValues) {

src/vaadin-tab.d.ts

@@ -1,2 +0,3 @@
-declare const VaadinTab_base: new () => import("lit-element").LitElement & import("@vaadin/disabled-state-mixin").DisabledStateInterface & import("@vaadin/focus-visible-mixin").FocusVisibleInterface & import("@vaadin/active-state-mixin/active-state-class").ActiveStateClass & import("@vaadin/selected-state-mixin").SelectedStateInterface;
+import { TabBase } from './vaadin-tab-base.js';
+declare const VaadinTab_base: typeof TabBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-tab-mixin").Tab>;
 /**
@@ -3,0 +4,0 @@ * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab.

src/vaadin-tab.js

@@ -10,3 +10,3 @@ import { __decorate } from "tslib";
     static get version() {
-        return '4.0.0-alpha2';
+        return '4.0.0-alpha3';
     }
@@ -13,0 +13,0 @@ };

src/vaadin-tab.ts

@@ -13,3 +13,3 @@ import { customElement } from 'lit-element';
   static get version() {
-    return '4.0.0-alpha2';
+    return '4.0.0-alpha3';
   }
@@ -16,0 +16,0 @@ }

src/vaadin-tabs-mixin.d.ts

 import { LitElement } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
+import { DirectionClass } from '@vaadin/direction-mixin/direction-class.js';
 import { KeyboardDirectionInterface } from '@vaadin/keyboard-direction-mixin/keyboard-direction-mixin.js';
@@ -8,6 +10,4 @@ import { OrientationInterface } from '@vaadin/orientation-mixin/orientation-mixin.js';
 import { ResizableClass } from '@vaadin/resizable-mixin/resizable-class.js';
-declare type TabsBase = new () => LitElement;
-declare type Tab = new () => LitElement & SlottedItemsInterface & KeyboardDirectionInterface & OrientationInterface & ResizableClass & SingleSelectionInterface & SelectionInViewClass;
-export declare const TabsMixin: <T extends TabsBase>(base: T) => Tab;
-export {};
+export declare type Tabs = DirectionClass & SlottedItemsInterface & KeyboardDirectionInterface & OrientationInterface & ResizableClass & SingleSelectionInterface & SelectionInViewClass;
+export declare const TabsMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<Tabs>;
 //# sourceMappingURL=vaadin-tabs-mixin.d.ts.map

src/vaadin-tabs-mixin.js

 import { html } from 'lit-element';
+import { DirectionMixin } from '@vaadin/direction-mixin/direction-mixin.js';
 import { KeyboardDirectionMixin } from '@vaadin/keyboard-direction-mixin/keyboard-direction-mixin.js';
@@ -9,5 +10,4 @@ import { OrientationMixin } from '@vaadin/orientation-mixin/orientation-mixin.js';
 import { ResizableMixin } from '@vaadin/resizable-mixin/resizable-mixin.js';
-import { tabsStyles } from './vaadin-tabs-css.js';
 export const TabsMixin = (base) => {
-    class Tabs extends ResizableMixin(SelectionInViewMixin(SingleSelectionMixin(OrientationMixin(RovingTabIndexMixin(KeyboardDirectionMixin(SlottedItemsMixin(base))))))) {
+    class Tabs extends ResizableMixin(SelectionInViewMixin(SingleSelectionMixin(OrientationMixin(RovingTabIndexMixin(KeyboardDirectionMixin(DirectionMixin(SlottedItemsMixin(base)))))))) {
         constructor() {
@@ -17,5 +17,2 @@ super();
         }
-        static get styles() {
-            return tabsStyles;
-        }
         render() {
@@ -43,3 +40,3 @@ return html `
         updated(props) {
-            if (props.has('orientation') || props.has('_items')) {
+            if (props.has('orientation') || props.has('items')) {
                 // NOTE: we need "orientation" on individual tabs for styling selected state,
@@ -46,0 +43,0 @@ // because Safari does not support `::before` and `::after` with `::slotted`

src/vaadin-tabs-mixin.ts

 import { LitElement, html, PropertyValues } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
+import { DirectionMixin } from '@vaadin/direction-mixin/direction-mixin.js';
+import { DirectionClass } from '@vaadin/direction-mixin/direction-class.js';
 import {
@@ -17,7 +20,4 @@ KeyboardDirectionMixin,
 import { ResizableClass } from '@vaadin/resizable-mixin/resizable-class.js';
-import { tabsStyles } from './vaadin-tabs-css';
 
-type TabsBase = new () => LitElement;
-
-type Tab = new () => LitElement &
+export type Tabs = DirectionClass &
   SlottedItemsInterface &
@@ -30,6 +30,8 @@ KeyboardDirectionInterface &
 
-export const TabsMixin = <T extends TabsBase>(base: T): Tab => {
+export const TabsMixin = <T extends Constructor<LitElement>>(base: T): T & Constructor<Tabs> => {
   class Tabs extends ResizableMixin(
     SelectionInViewMixin(
-      SingleSelectionMixin(OrientationMixin(RovingTabIndexMixin(KeyboardDirectionMixin(SlottedItemsMixin(base)))))
+      SingleSelectionMixin(
+        OrientationMixin(RovingTabIndexMixin(KeyboardDirectionMixin(DirectionMixin(SlottedItemsMixin(base)))))
+      )
     )
@@ -45,6 +47,2 @@ ) {
 
-    static get styles() {
-      return tabsStyles;
-    }
-
     protected render() {
@@ -76,3 +74,3 @@ return html`
     protected updated(props: PropertyValues) {
-      if (props.has('orientation') || props.has('_items')) {
+      if (props.has('orientation') || props.has('items')) {
         // NOTE: we need "orientation" on individual tabs for styling selected state,
@@ -79,0 +77,0 @@ // because Safari does not support `::before` and `::after` with `::slotted`

src/vaadin-tabs.d.ts

@@ -1,2 +0,3 @@
-declare const VaadinTabs_base: new () => import("lit-element").LitElement & import("@vaadin/slotted-items-mixin").SlottedItemsInterface & import("@vaadin/keyboard-direction-mixin").KeyboardDirectionInterface & import("@vaadin/orientation-mixin").OrientationInterface & import("@vaadin/resizable-mixin/resizable-class").ResizableClass & import("@vaadin/single-selection-mixin").SingleSelectionInterface & import("@vaadin/selection-in-view-mixin/selection-in-view-class").SelectionInViewClass;
+import { TabsBase } from './vaadin-tabs-base.js';
+declare const VaadinTabs_base: typeof TabsBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-tabs-mixin").Tabs>;
 /**
@@ -3,0 +4,0 @@ * `<vaadin-tabs>` is a Web Component for easy switching between different views.

src/vaadin-tabs.js

@@ -20,3 +20,3 @@ import { __decorate } from "tslib";
     static get version() {
-        return '4.0.0-alpha2';
+        return '4.0.0-alpha3';
     }
@@ -23,0 +23,0 @@ _filterItems() {

src/vaadin-tabs.ts

@@ -23,3 +23,3 @@ import { customElement } from 'lit-element';
   static get version() {
-    return '4.0.0-alpha2';
+    return '4.0.0-alpha3';
   }
@@ -26,0 +26,0 @@

theme/lumo/vaadin-tab-styles.js

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabStyles } from './vaadin-tab-css.js';
-registerStyles('vaadin-tab', tabStyles);
+registerStyles('vaadin-tab', tabStyles, { moduleId: 'lumo-tab' });
 //# sourceMappingURL=vaadin-tab-styles.js.map

theme/lumo/vaadin-tab-styles.ts

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabStyles } from './vaadin-tab-css';
 
-registerStyles('vaadin-tab', tabStyles);
+registerStyles('vaadin-tab', tabStyles, { moduleId: 'lumo-tab' });

theme/lumo/vaadin-tabs-styles.js

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabsStyles } from './vaadin-tabs-css.js';
-registerStyles('vaadin-tabs', tabsStyles);
+registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'lumo-tabs' });
 //# sourceMappingURL=vaadin-tabs-styles.js.map

theme/lumo/vaadin-tabs-styles.ts

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabsStyles } from './vaadin-tabs-css';
 
-registerStyles('vaadin-tabs', tabsStyles);
+registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'lumo-tabs' });

theme/material/vaadin-tab-styles.js

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabStyles } from './vaadin-tab-css.js';
-registerStyles('vaadin-tab', tabStyles);
+registerStyles('vaadin-tab', tabStyles, { moduleId: 'material-tab' });
 //# sourceMappingURL=vaadin-tab-styles.js.map

theme/material/vaadin-tab-styles.ts

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabStyles } from './vaadin-tab-css';
 
-registerStyles('vaadin-tab', tabStyles);
+registerStyles('vaadin-tab', tabStyles, { moduleId: 'material-tab' });

theme/material/vaadin-tabs-styles.js

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabsStyles } from './vaadin-tabs-css.js';
-registerStyles('vaadin-tabs', tabsStyles);
+registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'material-tabs' });
 //# sourceMappingURL=vaadin-tabs-styles.js.map

theme/material/vaadin-tabs-styles.ts

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import { tabsStyles } from './vaadin-tabs-css';
 
-registerStyles('vaadin-tabs', tabsStyles);
+registerStyles('vaadin-tabs', tabsStyles, { moduleId: 'material-tabs' });

No alert changes

Improved metrics

Total package byte prevSize

116743

increased by0.44%

Worsened metrics

Dependency count

21

increased by10.53%

Lines of code

1661

decreased by-0.48%

Dependency changes

• + Added@vaadin/direction-mixin@0.1.1

• + Added@vaadin/mixin-utils@^0.1.0

• + Added@vaadin/element-base@0.3.0(transitive)

• + Added@vaadin/themable-element@0.2.0(transitive)

• - Removed@vaadin/element-base@0.2.0(transitive)

• - Removed@vaadin/themable-element@0.1.2(transitive)

• Updated@vaadin/active-state-mixin@^0.1.6

• Updated@vaadin/disabled-state-mixin@^0.1.1

• Updated@vaadin/element-base@^0.3.0

• Updated@vaadin/focus-visible-mixin@^0.1.4

• Updated@vaadin/keyboard-direction-mixin@^0.1.6

• Updated@vaadin/orientation-mixin@^0.1.2

• Updated@vaadin/resizable-mixin@^0.1.1

• Updated@vaadin/roving-tabindex-mixin@^0.1.7

• Updated@vaadin/selected-state-mixin@^0.1.2

• Updated@vaadin/selection-in-view-mixin@^0.1.9

• Updated@vaadin/single-selection-mixin@^0.1.6

• Updated@vaadin/slotted-items-mixin@^0.1.5

• Updated@vaadin/themable-element@^0.2.0

• Updatedlit-element@^2.3.0