From 3a45704f89258b0e5c7e23662e6c00f0c739f24f Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Fri, 28 Aug 2026 19:58:17 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D1=8B=20=D1=88?= =?UTF-8?q?=D0=B8=D1=80=D0=B8=D0=BD=D1=8B=20message=20=D0=B8=20=D0=B2?= =?UTF-8?q?=D0=B0=D1=80=D0=B8=D0=B0=D0=BD=D1=82=20fill?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/message/message.component.ts | 10 ++++++++- .../prime-preset/tokens/components/message.ts | 21 +++++++++++++++++-- .../providers/prime-preset/tokens/tokens.json | 7 +++++++ .../components/message/message.stories.ts | 14 ++++++++++++- 4 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/lib/components/message/message.component.ts b/src/lib/components/message/message.component.ts index be8cb1e4..f43d9c00 100644 --- a/src/lib/components/message/message.component.ts +++ b/src/lib/components/message/message.component.ts @@ -20,6 +20,8 @@ import { ExtraMessageTemplateDirective } from './message-template.directive'; export type ExtraMessageSeverity = 'info' | 'success' | 'warning' | 'danger'; +export type ExtraMessageSize = 'sm' | 'base' | 'lg' | 'xlg' | 'fill'; + type PrimeMessageSeverity = 'success' | 'info' | 'warn' | 'error'; const SEVERITY_ICONS: Record = { @@ -38,7 +40,7 @@ const TIMER_LIFE = 3000; changeDetection: ChangeDetectionStrategy.OnPush, imports: [Message, ButtonDirective, SharedModule, NgTemplateOutlet], template: ` - +
@if (resolvedIcon) { @@ -81,6 +83,8 @@ export class ExtraMessageComponent implements AfterContentInit, OnDestroy { /** Класс иконки tabler icon; null скрывает иконку; undefined (не задан) — стандартная по severity. */ @Input() icon: string | null | undefined = undefined; @Input() showClose = false; + /** Ширина сообщения: sm 272 / base 336 / lg 400 / xlg 630 / fill — на всю ширину контейнера. */ + @Input() size: ExtraMessageSize = 'base'; @Output() onClose = new EventEmitter(); @@ -100,6 +104,10 @@ export class ExtraMessageComponent implements AfterContentInit, OnDestroy { return this.icon ?? SEVERITY_ICONS[this.severity]; } + get sizeClass(): string { + return this.size === 'base' ? '' : `p-message-size-${this.size}`; + } + get primeSeverity(): PrimeMessageSeverity { if (this.severity === 'warning') return 'warn'; if (this.severity === 'danger') return 'error'; diff --git a/src/lib/providers/prime-preset/tokens/components/message.ts b/src/lib/providers/prime-preset/tokens/components/message.ts index bfb4aeba..74c74dbb 100644 --- a/src/lib/providers/prime-preset/tokens/components/message.ts +++ b/src/lib/providers/prime-preset/tokens/components/message.ts @@ -3,13 +3,30 @@ * Подключается в map-tokens.ts: `import { messageCss } from './tokens/components/message'` */ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => ` - /* Основной контейнер message */ + /* Основной контейнер message: ширина по размеру (base по умолчанию) */ .p-message { - width: ${dt('message.extend.width')}; + width: ${dt('message.extend.overlayWidth.base')}; overflow: hidden; position: relative; } + .p-message.p-message-size-sm { + width: ${dt('message.extend.overlayWidth.sm')}; + } + + .p-message.p-message-size-lg { + width: ${dt('message.extend.overlayWidth.lg')}; + } + + .p-message.p-message-size-xlg { + width: ${dt('message.extend.overlayWidth.xlg')}; + } + + /* fill — сообщение занимает всю ширину контейнера */ + .p-message.p-message-size-fill { + width: 100%; + } + /* Контент message с приоритизацией align-items */ .p-message .p-message-content { display: flex; diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 363335f8..327ef888 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -1054,6 +1054,7 @@ "1800": "{sizing.152x}", "1900": "{sizing.168x}", "2000": "{sizing.200x}", + "2200": "{sizing.315x}", "max": "{sizing.max}" }, "borderRadius": { @@ -3677,6 +3678,12 @@ "message": { "extend": { "width": "{dimension.size.2000}", + "overlayWidth": { + "sm": "{dimension.size.1700}", + "base": "{dimension.size.1900}", + "lg": "{dimension.size.2000}", + "xlg": "{dimension.size.2200}" + }, "extText": { "gap": "{dimension.space.100}" }, diff --git a/src/stories/components/message/message.stories.ts b/src/stories/components/message/message.stories.ts index def2a8a1..47283f29 100644 --- a/src/stories/components/message/message.stories.ts +++ b/src/stories/components/message/message.stories.ts @@ -96,6 +96,16 @@ import { ExtraMessageComponent } from '@cdek-it/angular-ui-kit'; type: { summary: 'boolean' } } }, + size: { + control: 'select', + options: ['sm', 'base', 'lg', 'xlg', 'fill'], + description: 'Ширина сообщения; fill растягивает на всю ширину контейнера', + table: { + category: 'Свойства', + defaultValue: { summary: "'base'" }, + type: { summary: "'sm' | 'base' | 'lg' | 'xlg' | 'fill'" } + } + }, // ── События ───────────────────────────────────────────────── onClose: { control: false, @@ -113,7 +123,8 @@ import { ExtraMessageComponent } from '@cdek-it/angular-ui-kit'; message: 'Message', caption: 'caption', icon: undefined, - showClose: false + showClose: false, + size: 'base' } }; @@ -132,6 +143,7 @@ export const Default: Story = { if (args.icon) parts.push(`icon="${args.icon}"`); if (args.showClose) parts.push(`[showClose]="true"`); if (args.timer) parts.push(`[timer]="true"`); + if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`); const template = parts.length ? `` From 4ad1e26b15bc1e4debe3f2d58ca9f406bc1985e5 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Fri, 28 Aug 2026 21:15:14 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B8=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=B0=D1=82=D1=8C=20=D1=80=D0=B0=D0=B7=D0=BC?= =?UTF-8?q?=D0=B5=D1=80=D1=8B=20message=20=D0=B2=20small,=20base,=20large?= =?UTF-8?q?=20=D0=B8=20xlarge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/message/message.component.ts | 4 ++-- .../prime-preset/tokens/components/message.ts | 12 ++++++------ src/lib/providers/prime-preset/tokens/tokens.json | 6 +++--- src/stories/components/message/message.stories.ts | 4 ++-- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/lib/components/message/message.component.ts b/src/lib/components/message/message.component.ts index f43d9c00..e92ffc37 100644 --- a/src/lib/components/message/message.component.ts +++ b/src/lib/components/message/message.component.ts @@ -20,7 +20,7 @@ import { ExtraMessageTemplateDirective } from './message-template.directive'; export type ExtraMessageSeverity = 'info' | 'success' | 'warning' | 'danger'; -export type ExtraMessageSize = 'sm' | 'base' | 'lg' | 'xlg' | 'fill'; +export type ExtraMessageSize = 'small' | 'base' | 'large' | 'xlarge' | 'fill'; type PrimeMessageSeverity = 'success' | 'info' | 'warn' | 'error'; @@ -83,7 +83,7 @@ export class ExtraMessageComponent implements AfterContentInit, OnDestroy { /** Класс иконки tabler icon; null скрывает иконку; undefined (не задан) — стандартная по severity. */ @Input() icon: string | null | undefined = undefined; @Input() showClose = false; - /** Ширина сообщения: sm 272 / base 336 / lg 400 / xlg 630 / fill — на всю ширину контейнера. */ + /** Ширина сообщения: small 272 / base 336 / large 400 / xlarge 630 / fill — на всю ширину контейнера. */ @Input() size: ExtraMessageSize = 'base'; @Output() onClose = new EventEmitter(); diff --git a/src/lib/providers/prime-preset/tokens/components/message.ts b/src/lib/providers/prime-preset/tokens/components/message.ts index 74c74dbb..86f7ccc0 100644 --- a/src/lib/providers/prime-preset/tokens/components/message.ts +++ b/src/lib/providers/prime-preset/tokens/components/message.ts @@ -10,16 +10,16 @@ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => position: relative; } - .p-message.p-message-size-sm { - width: ${dt('message.extend.overlayWidth.sm')}; + .p-message.p-message-size-small { + width: ${dt('message.extend.overlayWidth.small')}; } - .p-message.p-message-size-lg { - width: ${dt('message.extend.overlayWidth.lg')}; + .p-message.p-message-size-large { + width: ${dt('message.extend.overlayWidth.large')}; } - .p-message.p-message-size-xlg { - width: ${dt('message.extend.overlayWidth.xlg')}; + .p-message.p-message-size-xlarge { + width: ${dt('message.extend.overlayWidth.xlarge')}; } /* fill — сообщение занимает всю ширину контейнера */ diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 327ef888..dda847ab 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -3679,10 +3679,10 @@ "extend": { "width": "{dimension.size.2000}", "overlayWidth": { - "sm": "{dimension.size.1700}", + "small": "{dimension.size.1700}", "base": "{dimension.size.1900}", - "lg": "{dimension.size.2000}", - "xlg": "{dimension.size.2200}" + "large": "{dimension.size.2000}", + "xlarge": "{dimension.size.2200}" }, "extText": { "gap": "{dimension.space.100}" diff --git a/src/stories/components/message/message.stories.ts b/src/stories/components/message/message.stories.ts index 47283f29..49ab5ebb 100644 --- a/src/stories/components/message/message.stories.ts +++ b/src/stories/components/message/message.stories.ts @@ -98,12 +98,12 @@ import { ExtraMessageComponent } from '@cdek-it/angular-ui-kit'; }, size: { control: 'select', - options: ['sm', 'base', 'lg', 'xlg', 'fill'], + options: ['small', 'base', 'large', 'xlarge', 'fill'], description: 'Ширина сообщения; fill растягивает на всю ширину контейнера', table: { category: 'Свойства', defaultValue: { summary: "'base'" }, - type: { summary: "'sm' | 'base' | 'lg' | 'xlg' | 'fill'" } + type: { summary: "'small' | 'base' | 'large' | 'xlarge' | 'fill'" } } }, // ── События ───────────────────────────────────────────────── From 9126effedd72a0c7f4a8d95c327b6f58934523b1 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Fri, 28 Aug 2026 21:22:09 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D1=82=D1=8C?= =?UTF-8?q?=20=D0=BF=D1=80=D0=BE=D0=BF=20size=20=D0=B2=20=D1=81=D0=BF?= =?UTF-8?q?=D0=B5=D1=86=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D0=B8=20?= =?UTF-8?q?message?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components-api/message.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/components-api/message.md b/docs/components-api/message.md index 6bc3e1c9..8ace75ef 100644 --- a/docs/components-api/message.md +++ b/docs/components-api/message.md @@ -6,14 +6,15 @@ Сообщение-уведомление. -| Свойство | Описание | Типизация | -| ------------ | --------------------------------------------------------------------------------------------- | -------------------------------------- | -| `severity` | тип сообщения | `info \| success \| warning \| danger` | -| `timer` | таймер автоскрытия | `boolean` | -| `message` | заголовок сообщения | `string` | -| `caption` | пояснение сообщения | `string` | -| `icon` | класс иконки tabler icon (вместо стандартной для `severity`). значение `null` скрывает иконку | `string \| null` | -| `show-close` | кнопка закрытия | `boolean` | +| Свойство | Описание | Типизация | +| ------------ | --------------------------------------------------------------------------------------------- | ------------------------------------------ | +| `severity` | тип сообщения | `info \| success \| warning \| danger` | +| `timer` | таймер автоскрытия | `boolean` | +| `message` | заголовок сообщения | `string` | +| `caption` | пояснение сообщения | `string` | +| `icon` | класс иконки tabler icon (вместо стандартной для `severity`). значение `null` скрывает иконку | `string \| null` | +| `show-close` | кнопка закрытия | `boolean` | +| `size` | ширина сообщения: 272 / 336 / 400 / 630 px; `fill` — на всю ширину контейнера | `small \| base \| large \| xlarge \| fill` | # Слоты (content projection) From 3306bf89e4231c39ea1018c6d1919477479642a1 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 7 Sep 2026 14:22:23 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=D1=83=D0=B1=D1=80=D0=B0=D1=82=D1=8C=20?= =?UTF-8?q?=D0=BF=D0=B8=D0=BA=D1=81=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20?= =?UTF-8?q?=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B8=D0=B7?= =?UTF-8?q?=20=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=D0=BF=D0=B0=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components-api/message.md | 2 +- src/lib/components/message/message.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/components-api/message.md b/docs/components-api/message.md index 8ace75ef..e8d3ab06 100644 --- a/docs/components-api/message.md +++ b/docs/components-api/message.md @@ -14,7 +14,7 @@ | `caption` | пояснение сообщения | `string` | | `icon` | класс иконки tabler icon (вместо стандартной для `severity`). значение `null` скрывает иконку | `string \| null` | | `show-close` | кнопка закрытия | `boolean` | -| `size` | ширина сообщения: 272 / 336 / 400 / 630 px; `fill` — на всю ширину контейнера | `small \| base \| large \| xlarge \| fill` | +| `size` | ширина сообщения; `fill` — на всю ширину контейнера | `small \| base \| large \| xlarge \| fill` | # Слоты (content projection) diff --git a/src/lib/components/message/message.component.ts b/src/lib/components/message/message.component.ts index e92ffc37..67a8c9c3 100644 --- a/src/lib/components/message/message.component.ts +++ b/src/lib/components/message/message.component.ts @@ -83,7 +83,7 @@ export class ExtraMessageComponent implements AfterContentInit, OnDestroy { /** Класс иконки tabler icon; null скрывает иконку; undefined (не задан) — стандартная по severity. */ @Input() icon: string | null | undefined = undefined; @Input() showClose = false; - /** Ширина сообщения: small 272 / base 336 / large 400 / xlarge 630 / fill — на всю ширину контейнера. */ + /** Ширина сообщения; `fill` — на всю ширину контейнера. */ @Input() size: ExtraMessageSize = 'base'; @Output() onClose = new EventEmitter();