diff --git a/docs/components-api/message.md b/docs/components-api/message.md index 6bc3e1c9..e8d3ab06 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` | ширина сообщения; `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 be8cb1e4..67a8c9c3 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 = 'small' | 'base' | 'large' | 'xlarge' | '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; + /** Ширина сообщения; `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..86f7ccc0 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-small { + width: ${dt('message.extend.overlayWidth.small')}; + } + + .p-message.p-message-size-large { + width: ${dt('message.extend.overlayWidth.large')}; + } + + .p-message.p-message-size-xlarge { + width: ${dt('message.extend.overlayWidth.xlarge')}; + } + + /* 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..dda847ab 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": { + "small": "{dimension.size.1700}", + "base": "{dimension.size.1900}", + "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 def2a8a1..49ab5ebb 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: ['small', 'base', 'large', 'xlarge', 'fill'], + description: 'Ширина сообщения; fill растягивает на всю ширину контейнера', + table: { + category: 'Свойства', + defaultValue: { summary: "'base'" }, + type: { summary: "'small' | 'base' | 'large' | 'xlarge' | '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 ? ``