@vaadin/vaadin-app-layout - npm Package Compare versions

Comparing version 3.0.0-alpha1 to 3.0.0-alpha2

package.json

 {
   "name": "@vaadin/vaadin-app-layout",
-  "version": "3.0.0-alpha1",
+  "version": "3.0.0-alpha2",
   "description": "vaadin-app-layout",
@@ -38,4 +38,3 @@ "main": "vaadin-app-layout.js",
       "eslint --fix",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
@@ -64,14 +63,16 @@ },
   "dependencies": {
-    "@vaadin/active-state-mixin": "^0.1.2",
-    "@vaadin/control-state-mixin": "^0.1.4",
-    "@vaadin/disabled-state-mixin": "^0.1.0",
-    "@vaadin/focus-visible-mixin": "^0.1.2",
-    "@vaadin/element-base": "^0.2.0",
-    "@vaadin/media-query-mixin": "^0.1.1",
-    "@vaadin/resizable-mixin": "0.1.0",
-    "@vaadin/themable-element": "^0.1.2",
+    "@vaadin/active-state-mixin": "^0.1.6",
+    "@vaadin/browser-utils": "^0.1.0",
+    "@vaadin/control-state-mixin": "^0.1.6",
+    "@vaadin/disabled-state-mixin": "^0.1.1",
+    "@vaadin/focus-visible-mixin": "^0.1.4",
+    "@vaadin/element-base": "^0.3.0",
+    "@vaadin/media-query-mixin": "^0.1.3",
+    "@vaadin/mixin-utils": "^0.1.0",
+    "@vaadin/resizable-mixin": "^0.1.1",
+    "@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",
@@ -81,5 +82,5 @@ "tslib": "^1.10.0"
   "devDependencies": {
-    "@vaadin/vaadin-tabs": "4.0.0-alpha2",
-    "@vaadin/vaadin-component-dev-dependencies": "^4.8.0"
+    "@vaadin/vaadin-tabs": "^4.0.0-alpha3",
+    "@vaadin/vaadin-component-dev-dependencies": "^4.9.0"
   }
 }

src/vaadin-app-layout-mixin.d.ts

 import { LitElement } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
 import { ResizableClass } from '@vaadin/resizable-mixin/resizable-class.js';
-declare type Constructor<T = object> = new (...args: any[]) => T;
 export interface AppLayoutInterface {
@@ -10,4 +10,3 @@ drawerOpened: boolean | null | undefined;
 }
-export declare const AppLayoutMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<LitElement & AppLayoutInterface & ResizableClass>;
-export {};
+export declare const AppLayoutMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<AppLayoutInterface & ResizableClass>;
 //# sourceMappingURL=vaadin-app-layout-mixin.d.ts.map

src/vaadin-app-layout-mixin.js

@@ -39,2 +39,3 @@ import { __decorate } from "tslib";
             this._forceTouch = false;
+            this._moveChildren = false;
         }
@@ -44,3 +45,3 @@ render() {
         <div part="navbar">
-          <slot name="navbar"></slot>
+          <slot name="navbar" @slotchange="${this._onNavbarSlotChange}"></slot>
         </div>
@@ -63,2 +64,5 @@ <div part="backdrop" @click="${this._close}" @touchstart="${this._close}"></div>
         </div>
+        <div hidden>
+          <slot name="navbar touch-optimized" @slotchange="${this._onTouchSlotChange}"></slot>
+        </div>
       `;
@@ -183,2 +187,16 @@ }
         }
+        _onNavbarSlotChange() {
+            if (!this._moveChildren) {
+                this._updateTouchOptimizedMode();
+            }
+        }
+        _onTouchSlotChange() {
+            // Handle "navbar touch-optimized" slotchange event (move children)
+            // and set a flag to avoid doing that again for "navbar" slotchange
+            this._moveChildren = true;
+            this._updateTouchOptimizedMode();
+            window.requestAnimationFrame(() => {
+                this._moveChildren = false;
+            });
+        }
         _setOffsetSize(part, value) {
@@ -185,0 +203,0 @@ this.style.setProperty(`${CSS_PREFIX}-${part}-offset-size`, `${value}px`);

src/vaadin-app-layout-mixin.ts

 import { LitElement, html, property, query, PropertyValues } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -7,5 +8,2 @@ import { MediaQueryMixin, mediaProperty } from '@vaadin/media-query-mixin';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Constructor<T = object> = new (...args: any[]) => T;
-
 export interface AppLayoutInterface {
@@ -27,3 +25,3 @@ drawerOpened: boolean | null | undefined;
   base: T
-): T & Constructor<LitElement & AppLayoutInterface & ResizableClass> => {
+): T & Constructor<AppLayoutInterface & ResizableClass> => {
   class AppLayout extends MediaQueryMixin(ResizableMixin(base)) {
@@ -86,6 +84,8 @@ /**
 
+    private _moveChildren = false;
+
     protected render() {
       return html`
         <div part="navbar">
-          <slot name="navbar"></slot>
+          <slot name="navbar" @slotchange="${this._onNavbarSlotChange}"></slot>
         </div>
@@ -108,2 +108,5 @@ <div part="backdrop" @click="${this._close}" @touchstart="${this._close}"></div>
         </div>
+        <div hidden>
+          <slot name="navbar touch-optimized" @slotchange="${this._onTouchSlotChange}"></slot>
+        </div>
       `;
@@ -268,2 +271,19 @@ }
 
+    private _onNavbarSlotChange() {
+      if (!this._moveChildren) {
+        this._updateTouchOptimizedMode();
+      }
+    }
+
+    private _onTouchSlotChange() {
+      // Handle "navbar touch-optimized" slotchange event (move children)
+      // and set a flag to avoid doing that again for "navbar" slotchange
+      this._moveChildren = true;
+      this._updateTouchOptimizedMode();
+
+      window.requestAnimationFrame(() => {
+        this._moveChildren = false;
+      });
+    }
+
     private _setOffsetSize(part: string, value: number) {
@@ -270,0 +290,0 @@ this.style.setProperty(`${CSS_PREFIX}-${part}-offset-size`, `${value}px`);

src/vaadin-app-layout.d.ts

 import { AppLayoutBase } from './vaadin-app-layout-base.js';
-import './detect-ios-navbar.js';
 import './safe-area-inset.js';
-declare const VaadinAppLayout_base: typeof AppLayoutBase & (new (...args: any[]) => import("lit-element").LitElement & import("./vaadin-app-layout-mixin").AppLayoutInterface & import("@vaadin/resizable-mixin/resizable-class").ResizableClass);
+declare const VaadinAppLayout_base: typeof AppLayoutBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-app-layout-mixin").AppLayoutInterface & import("@vaadin/resizable-mixin/resizable-class").ResizableClass>;
 /**
@@ -6,0 +5,0 @@ * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common

src/vaadin-app-layout.js

 import { __decorate } from "tslib";
 import { customElement } from 'lit-element';
+import { observeIosNavbar } from '@vaadin/browser-utils';
 import { AppLayoutBase } from './vaadin-app-layout-base.js';
 import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
-import './detect-ios-navbar.js';
 import './safe-area-inset.js';
+observeIosNavbar();
 /**
@@ -50,3 +51,3 @@ * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common
     static get version() {
-        return '3.0.0-alpha1';
+        return '3.0.0-alpha2';
     }
@@ -53,0 +54,0 @@ /**

src/vaadin-app-layout.ts

 import { customElement } from 'lit-element';
+import { observeIosNavbar } from '@vaadin/browser-utils';
 import { AppLayoutBase } from './vaadin-app-layout-base';
 import { AppLayoutMixin } from './vaadin-app-layout-mixin';
-import './detect-ios-navbar';
 import './safe-area-inset';
 
+observeIosNavbar();
+
 /**
@@ -53,3 +55,3 @@ * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common
   static get version() {
-    return '3.0.0-alpha1';
+    return '3.0.0-alpha2';
   }
@@ -56,0 +58,0 @@

src/vaadin-drawer-toggle-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,9 +7,7 @@ import { ControlStateInterface } from '@vaadin/control-state-mixin/control-state-mixin.js';
 import { FocusVisibleInterface } from '@vaadin/focus-visible-mixin/focus-visible-mixin.js';
-declare type DrawerToggleBase = new () => LitElement;
-declare type DrawerToggle = new () => LitElement & DisabledStateInterface & FocusVisibleInterface & ActiveStateClass & ControlStateInterface & DrawerToggleInterface;
+export declare type DrawerToggle = DisabledStateInterface & FocusVisibleInterface & ActiveStateClass & ControlStateInterface & DrawerToggleInterface;
 export interface DrawerToggleInterface {
     ariaLabel: string;
 }
-export declare const DrawerToggleMixin: <T extends DrawerToggleBase>(base: T) => DrawerToggle;
-export {};
+export declare const DrawerToggleMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<DrawerToggle>;
 //# sourceMappingURL=vaadin-drawer-toggle-mixin.d.ts.map

src/vaadin-drawer-toggle-mixin.ts

 import { LitElement, html, property, PropertyValues } from 'lit-element';
+import { Constructor } from '@vaadin/mixin-utils';
 import { ActiveStateMixin } from '@vaadin/active-state-mixin/active-state-mixin.js';
@@ -8,6 +9,3 @@ import { ActiveStateClass } from '@vaadin/active-state-mixin/active-state-class.js';
 
-type DrawerToggleBase = new () => LitElement;
-
-type DrawerToggle = new () => LitElement &
-  DisabledStateInterface &
+export type DrawerToggle = DisabledStateInterface &
   FocusVisibleInterface &
@@ -22,3 +20,3 @@ ActiveStateClass &
 
-export const DrawerToggleMixin = <T extends DrawerToggleBase>(base: T): DrawerToggle => {
+export const DrawerToggleMixin = <T extends Constructor<LitElement>>(base: T): T & Constructor<DrawerToggle> => {
   class DrawerToggle extends ControlStateMixin(FocusVisibleMixin(ActiveStateMixin(DisabledStateMixin(base)))) {
@@ -25,0 +23,0 @@ @property({ type: String, attribute: 'aria-label' }) ariaLabel = 'Toggle';

src/vaadin-drawer-toggle.d.ts

@@ -1,2 +0,3 @@
-declare const VaadinDrawerToggle_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/control-state-mixin").ControlStateInterface & import("./vaadin-drawer-toggle-mixin").DrawerToggleInterface;
+import { DrawerToggleBase } from './vaadin-drawer-toggle-base.js';
+declare const VaadinDrawerToggle_base: typeof DrawerToggleBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-drawer-toggle-mixin").DrawerToggle>;
 /**
@@ -3,0 +4,0 @@ * `<vaadin-drawer-toggle>` is a Web Component that toggles the layout drawer.

theme/lumo/vaadin-app-layout-styles.js

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

theme/lumo/vaadin-app-layout-styles.ts

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

theme/lumo/vaadin-drawer-toggle-styles.js

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

theme/lumo/vaadin-drawer-toggle-styles.ts

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

theme/material/vaadin-app-layout-styles.js

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

theme/material/vaadin-app-layout-styles.ts

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

theme/material/vaadin-drawer-toggle-styles.js

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

theme/material/vaadin-drawer-toggle-styles.ts

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

Fixed alerts

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

Improved metrics

Total package byte prevSize

141933

0.04%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dependency count

16

14.29%

Number of package files

118

-4.07%

Lines of code

1945

-0.15%

Dependency changes

• + Added

  @vaadin/browser-utils@^0.1.0

• + Added

  @vaadin/mixin-utils@^0.1.0

• + Added

  @vaadin/browser-utils@0.1.1
  (transitive)

• + Added

  @vaadin/element-base@0.3.0
  (transitive)

• + Added

  @vaadin/resizable-mixin@0.1.2
  (transitive)

• + Added

  @vaadin/themable-element@0.2.0
  (transitive)

• - Removed

  @vaadin/element-base@0.2.0
  (transitive)

• - Removed

  @vaadin/resizable-mixin@0.1.0
  (transitive)

• - Removed

  @vaadin/themable-element@0.1.2
  (transitive)

• Updated

  @vaadin/active-state-mixin@^0.1.6

• Updated

  @vaadin/control-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/media-query-mixin@^0.1.3

• Updated

  @vaadin/resizable-mixin@^0.1.1

• Updated

  @vaadin/themable-element@^0.2.0

• Updated

  lit-element@^2.3.0