@vaadin/app-layout - npm Package Compare versions

Comparing version 24.7.0-alpha8 to 24.7.0-alpha9

package.json

 {
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-alpha9",
   "publishConfig": {
@@ -40,13 +40,13 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha8",
-    "@vaadin/button": "24.7.0-alpha8",
-    "@vaadin/component-base": "24.7.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha8",
+    "@vaadin/a11y-base": "24.7.0-alpha9",
+    "@vaadin/button": "24.7.0-alpha9",
+    "@vaadin/component-base": "24.7.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha9",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha9",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha8",
-    "@vaadin/test-runner-commands": "24.7.0-alpha8",
+    "@vaadin/chai-plugins": "24.7.0-alpha9",
+    "@vaadin/test-runner-commands": "24.7.0-alpha9",
     "@vaadin/testing-helpers": "^1.1.0",
@@ -59,3 +59,3 @@ "sinon": "^18.0.0"
   ],
-  "gitHead": "d015035192480fcc8cc9df5d00a950f177b83c32"
+  "gitHead": "b0a16c6ed7fc50a22a42dcab0649d74f4c300485"
 }

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

@@ -7,25 +7,18 @@ /**
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface AppLayoutI18n {
+export type AppLayoutI18n = PartialI18n<{
   drawer: string;
-}
+}>;
 
 export declare function AppLayoutMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<AppLayoutMixinClass> & T;
+): Constructor<AppLayoutMixinClass> & Constructor<I18nMixinClass<AppLayoutI18n>> & T;
 
 export declare class AppLayoutMixinClass {
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
-   * To update individual properties, extend the existing i18n object as follows:
-   * ```js
-   * appLayout.i18n = {
-   *   ...appLayout.i18n,
-   *   drawer: 'Drawer'
-   * }
-   * ```
-   *
    * The object has the following structure and default values:
@@ -32,0 +25,0 @@ * ```

src/vaadin-app-layout-mixin.js

@@ -9,2 +9,3 @@ /**
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
@@ -15,44 +16,15 @@ /**
 
+const DEFAULT_I18N = {
+  drawer: 'Drawer',
+};
+
 /**
  * @polymerMixin
+ * @mixes I18nMixin
  */
 export const AppLayoutMixin = (superclass) =>
-  class AppLayoutMixinClass extends superclass {
+  class AppLayoutMixinClass extends I18nMixin(DEFAULT_I18N, superclass) {
     static get properties() {
       return {
         /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * `i18n` object with a custom one.
-         *
-         * To update individual properties, extend the existing i18n object as follows:
-         * ```js
-         * appLayout.i18n = {
-         *   ...appLayout.i18n,
-         *   drawer: 'Drawer'
-         * }
-         * ```
-         *
-         * The object has the following structure and default values:
-         * ```
-         * {
-         *   drawer: 'Drawer'
-         * }
-         * ```
-         *
-         * @type {AppLayoutI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          observer: '__i18nChanged',
-          sync: true,
-          value: () => {
-            return {
-              drawer: 'Drawer',
-            };
-          },
-        },
-
-        /**
          * Defines whether navbar or drawer will come first visually.
@@ -119,2 +91,6 @@ * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
 
+    static get observers() {
+      return ['__i18nChanged(__effectiveI18n)'];
+    }
+
     /**
@@ -127,2 +103,23 @@ * Helper static method that dispatches a `close-overlay-drawer` event
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following structure and default values:
+     * ```
+     * {
+     *   drawer: 'Drawer'
+     * }
+     * ```
+     * @return {!AppLayoutI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     constructor() {
@@ -364,3 +361,3 @@ super();
         drawer.setAttribute('aria-modal', 'true');
-        drawer.setAttribute('aria-label', this.i18n.drawer);
+        drawer.setAttribute('aria-label', this.__effectiveI18n.drawer);
       } else {
@@ -367,0 +364,0 @@ drawer.removeAttribute('role');

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-alpha9",
   "description-markup": "markdown",
@@ -56,3 +56,3 @@ "contributions": {
                 "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
                 "value": {
@@ -59,0 +59,0 @@ "type": [

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-alpha9",
   "description-markup": "markdown",
@@ -31,3 +31,3 @@ "framework": "lit",
               "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
               "value": {
@@ -34,0 +34,0 @@ "kind": "expression"

No alert changes

Worsened metrics

Total package byte prevSize

86022

decreased by-0.34%

Lines of code

1765

decreased by-0.73%

Dependency changes

• + Added@vaadin/a11y-base@24.7.0-alpha9(transitive)

• + Added@vaadin/button@24.7.0-alpha9(transitive)

• + Added@vaadin/component-base@24.7.0-alpha9(transitive)

• + Added@vaadin/icon@24.7.0-alpha9(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.7.0-alpha9(transitive)

• + Added@vaadin/vaadin-material-styles@24.7.0-alpha9(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.7.0-alpha9(transitive)

• - Removed@vaadin/a11y-base@24.7.0-alpha8(transitive)

• - Removed@vaadin/button@24.7.0-alpha8(transitive)

• - Removed@vaadin/component-base@24.7.0-alpha8(transitive)

• - Removed@vaadin/icon@24.7.0-alpha8(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha8(transitive)

• - Removed@vaadin/vaadin-material-styles@24.7.0-alpha8(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha8(transitive)

• Updated@vaadin/a11y-base@24.7.0-alpha9

• Updated@vaadin/button@24.7.0-alpha9

• Updated@vaadin/component-base@24.7.0-alpha9

• Updated@vaadin/vaadin-lumo-styles@24.7.0-alpha9

• Updated@vaadin/vaadin-material-styles@24.7.0-alpha9

• Updated@vaadin/vaadin-themable-mixin@24.7.0-alpha9