From ebc506d9fd1e2cec2a463bfc14cf3140dac8fa1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Mon, 10 Feb 2025 13:11:23 +0100 Subject: [PATCH] feat: support partial i18n in avatar (#8648) --- .../src/vaadin-avatar-group-mixin.d.ts | 6 +- packages/avatar/src/vaadin-avatar-mixin.d.ts | 14 ++-- packages/avatar/src/vaadin-avatar-mixin.js | 65 ++++++++++--------- 3 files changed, 43 insertions(+), 42 deletions(-) diff --git a/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts b/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts index 5de185d90aa..6abe19522e9 100644 --- a/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts +++ b/packages/avatar-group/src/vaadin-avatar-group-mixin.d.ts @@ -76,9 +76,9 @@ export declare class AvatarGroupMixinClass { maxItemsVisible: number | null | undefined; /** - * The object used to localize this component. - * To change the default localization, replace the entire - * _i18n_ object or just the property you want to modify. + * 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 JSON structure and default values: * ``` diff --git a/packages/avatar/src/vaadin-avatar-mixin.d.ts b/packages/avatar/src/vaadin-avatar-mixin.d.ts index 6e5ab176619..e6b4b3bb575 100644 --- a/packages/avatar/src/vaadin-avatar-mixin.d.ts +++ b/packages/avatar/src/vaadin-avatar-mixin.d.ts @@ -5,17 +5,18 @@ */ import type { Constructor } from '@open-wc/dedupe-mixin'; import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js'; +import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js'; -export interface AvatarI18n { +export type AvatarI18n = PartialI18n<{ anonymous: string; -} +}>; /** * A mixin providing common avatar functionality. */ export declare function AvatarMixin>( base: T, -): Constructor & Constructor & T; +): Constructor & Constructor> & Constructor & T; export declare class AvatarMixinClass { /** @@ -42,12 +43,11 @@ export declare class AvatarMixinClass { colorIndex: number | null | undefined; /** - * The object used to localize this component. - * To change the default localization, replace the entire - * _i18n_ object or just the property you want to modify. + * 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 JSON structure and default values: - * * ``` * { * // Translation of the anonymous user avatar tooltip. diff --git a/packages/avatar/src/vaadin-avatar-mixin.js b/packages/avatar/src/vaadin-avatar-mixin.js index c3b868b8665..309247295fc 100644 --- a/packages/avatar/src/vaadin-avatar-mixin.js +++ b/packages/avatar/src/vaadin-avatar-mixin.js @@ -4,6 +4,11 @@ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ */ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js'; +import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js'; + +const DEFAULT_I18N = { + anonymous: 'anonymous', +}; /** * A mixin providing common avatar functionality. @@ -12,7 +17,7 @@ import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js'; * @mixes FocusMixin */ export const AvatarMixin = (superClass) => - class AvatarMixinClass extends FocusMixin(superClass) { + class AvatarMixinClass extends I18nMixin(DEFAULT_I18N, FocusMixin(superClass)) { static get properties() { return { /** @@ -51,32 +56,6 @@ export const AvatarMixin = (superClass) => observer: '__colorIndexChanged', }, - /** - * The object used to localize this component. - * To change the default localization, replace the entire - * _i18n_ object or just the property you want to modify. - * - * The object has the following JSON structure and default values: - * - * ``` - * { - * // Translation of the anonymous user avatar tooltip. - * anonymous: 'anonymous' - * } - * ``` - * - * @type {!AvatarI18n} - * @default {English/US} - */ - i18n: { - type: Object, - value: () => { - return { - anonymous: 'anonymous', - }; - }, - }, - /** * When true, the avatar has tooltip shown on hover and focus. * The tooltip text is based on the `name` and `abbr` properties. @@ -106,11 +85,33 @@ export const AvatarMixin = (superClass) => static get observers() { return [ '__imgOrAbbrOrNameChanged(img, abbr, name)', - '__i18nChanged(i18n)', + '__i18nChanged(__effectiveI18n)', '__tooltipChanged(__tooltipNode, name, abbr)', ]; } + /** + * 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 JSON structure and default values: + * ``` + * { + * // Translation of the anonymous user avatar tooltip. + * anonymous: 'anonymous' + * } + * ``` + * @return {!AvatarI18n} + */ + get i18n() { + return super.i18n; + } + + set i18n(value) { + super.i18n = value; + } + /** @protected */ ready() { super.ready(); @@ -212,13 +213,13 @@ export const AvatarMixin = (superClass) => } /** @private */ - __i18nChanged(i18n) { - if (i18n && i18n.anonymous) { + __i18nChanged(effectiveI18n) { + if (effectiveI18n && effectiveI18n.anonymous) { if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) { this.__setTooltip(); } - this.__oldAnonymous = i18n.anonymous; + this.__oldAnonymous = effectiveI18n.anonymous; } } @@ -233,7 +234,7 @@ export const AvatarMixin = (superClass) => __setTooltip(tooltip) { const tooltipNode = this.__tooltipNode; if (tooltipNode) { - tooltipNode.text = tooltip || this.i18n.anonymous; + tooltipNode.text = tooltip || this.__effectiveI18n.anonymous; } }