From a8b73fbecb4ed8337ef0eceec4321fb4c274904b Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 24 Aug 2026 17:28:25 +0800 Subject: [PATCH] size.dialog --- .../select-button/select-button.component.ts | 71 ++++++++----------- .../select-button/select-button.figma.md | 2 +- .../prime-preset/tokens/components/dialog.ts | 53 ++++++++++++-- .../dialog/examples/dialog-slots.component.ts | 4 +- .../select-button-disabled.component.ts | 20 +++--- .../examples/select-button-icons.component.ts | 20 +++--- .../select-button-selected.component.ts | 20 +++--- .../select-button-semi-disabled.component.ts | 20 +++--- .../select-button/select-button.stories.ts | 14 ++-- 9 files changed, 127 insertions(+), 97 deletions(-) diff --git a/src/lib/components/select-button/select-button.component.ts b/src/lib/components/select-button/select-button.component.ts index 052d366d..b23a66b1 100644 --- a/src/lib/components/select-button/select-button.component.ts +++ b/src/lib/components/select-button/select-button.component.ts @@ -1,23 +1,16 @@ import { Component, EventEmitter, Input, Optional, Output, Self } from '@angular/core'; import { NgClass } from '@angular/common'; import { ControlValueAccessor, FormsModule, NgControl } from '@angular/forms'; -import { SelectButton, SelectButtonChangeEvent } from 'primeng/selectbutton'; +import { SelectButton } from 'primeng/selectbutton'; import { SharedModule } from 'primeng/api'; -export interface ExtraSelectButtonOption { - name: string; - code: string | number; +export interface ExtraSelectButtonItem { + label: string; + value: string; icon?: string; disabled?: boolean; } -export interface ExtraSelectButtonChangeEvent { - value: any; - originalEvent?: Event; -} - -export type ExtraSelectButtonSize = 'small' | 'base' | 'large' | 'xlarge'; - @Component({ selector: 'extra-select-button', standalone: true, @@ -27,15 +20,13 @@ export type ExtraSelectButtonSize = 'small' | 'base' | 'large' | 'xlarge'; [options]="options" [ngModel]="value" (ngModelChange)="onValueChange($event)" - (onChange)="onChangeHandler($event)" [optionLabel]="optionLabel" [optionValue]="optionValue" [optionDisabled]="optionDisabled" [multiple]="multiple" [allowEmpty]="allowEmpty" [disabled]="isDisabled" - [size]="primeSize" - [styleClass]="primeStyleClass" + [ngClass]="sizeClass" > @if ($any(item)['icon']) { @@ -47,21 +38,21 @@ export type ExtraSelectButtonSize = 'small' | 'base' | 'large' | 'xlarge'; `, }) export class ExtraSelectButtonComponent implements ControlValueAccessor { - @Input() options: ExtraSelectButtonOption[] | any[] = []; - @Input() optionLabel = 'name'; - @Input() optionValue = 'code'; + @Input() options: unknown[] = []; + @Input() optionLabel = 'label'; + @Input() optionValue = 'value'; @Input() optionDisabled = 'disabled'; - @Input() size: ExtraSelectButtonSize = 'base'; + @Input() size: 'base' | 'small' | 'large' | 'xlarge' = 'base'; @Input() multiple = false; @Input() allowEmpty = true; - @Output() onChange = new EventEmitter(); + @Output() valueChange = new EventEmitter(); - value: any = null; + value: string | string[] = ''; private _disabled = false; - private _onChange = (_: any) => {}; - private _onTouched = () => {}; + private onChange = (_: string | string[]) => {}; + private onTouched = () => {}; constructor(@Optional() @Self() private ngControl: NgControl) { if (ngControl) ngControl.valueAccessor = this; @@ -71,39 +62,35 @@ export class ExtraSelectButtonComponent implements ControlValueAccessor { return this._disabled; } - get primeSize(): 'small' | 'large' | undefined { - if (this.size === 'small') return 'small'; - if (this.size === 'large') return 'large'; - return undefined; + get sizeClass(): string { + const sizeMap: Record = { + small: 'p-selectbutton-small', + large: 'p-selectbutton-large', + xlarge: 'p-selectbutton-xlarge', + }; + return sizeMap[this.size] ?? ''; } - get primeStyleClass(): string { - return this.size === 'xlarge' ? 'p-selectbutton-xlarge' : ''; + writeValue(value: string | string[]): void { + this.value = value ?? ''; } - writeValue(value: any): void { - this.value = value ?? null; - } - - registerOnChange(fn: (value: any) => void): void { - this._onChange = fn; + registerOnChange(fn: (value: string | string[]) => void): void { + this.onChange = fn; } registerOnTouched(fn: () => void): void { - this._onTouched = fn; + this.onTouched = fn; } setDisabledState(isDisabled: boolean): void { this._disabled = isDisabled; } - onValueChange(newValue: any): void { + onValueChange(newValue: string | string[]): void { this.value = newValue; - this._onChange(newValue); - this._onTouched(); - } - - onChangeHandler(event: SelectButtonChangeEvent): void { - this.onChange.emit({ value: event.value, originalEvent: event.originalEvent }); + this.onChange(newValue); + this.onTouched(); + this.valueChange.emit(newValue); } } diff --git a/src/lib/components/select-button/select-button.figma.md b/src/lib/components/select-button/select-button.figma.md index eeabe652..a08e8cc7 100644 --- a/src/lib/components/select-button/select-button.figma.md +++ b/src/lib/components/select-button/select-button.figma.md @@ -27,7 +27,7 @@ updated: '2026-06-22' | `optionLabel` | `string` | `'label'` | Имя поля объекта опции, из которого берётся подпись сегмента | | `optionValue` | `string` | `'value'` | Имя поля объекта опции, из которого берётся значение модели | | `optionDisabled` | `string` | `'disabled'` | Имя поля объекта опции, отключающего отдельный сегмент | -| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер контрола | +| `size` | `'small' \| 'base' \| 'large' \| 'xLarge'` | `'base'` | Размер контрола | | `multiple` | `boolean` | `false` | Множественный выбор: модель — массив значений вместо одиночного значения | | `allowEmpty` | `boolean` | `true` | Разрешает снять выбор (пустое значение) повторным нажатием на активный сегмент | | `disabled` | `boolean` | `false` | Отключённое состояние всего контрола — соответствует Figma-свойству `state=disabled`; задаётся через `[disabled]` или `setDisabledState` формы | diff --git a/src/lib/providers/prime-preset/tokens/components/dialog.ts b/src/lib/providers/prime-preset/tokens/components/dialog.ts index ad7f447e..f3c10b37 100644 --- a/src/lib/providers/prime-preset/tokens/components/dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/dialog.ts @@ -1,3 +1,10 @@ +/** + * Кастомная CSS-стилизация для компонента p-dialog. + * Подключается в map-tokens.ts: `import { dialogCss } from './tokens/components/dialog'` + * + * Радиусы, отступы, фон и тень приходят токенами пресета (dialog.root.*, dialog.header.* и т.д.). + * Здесь — типографика и то, что Aura зашила сырыми значениями: рамка окна и фон подложки. + */ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-dialog .p-dialog-title { font-family: ${dt('fonts.fontFamily.heading')}; @@ -14,7 +21,7 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog .p-dialog-header { - border-bottom: ${dt('dimension.borderWidth.100')} solid ${dt('dialog.root.borderColor')}; + border-bottom: ${dt('dialog.extend.borderWidth')} solid ${dt('dialog.root.borderColor')}; display: flex; align-items: center; justify-content: space-between; @@ -35,19 +42,55 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => box-shadow: none; } + /* Рамка окна: Aura зашивает её сырым 1px, дизайн задаёт токеном. + Ширина по умолчанию — base; в экспорте нет ветки overlayWidth, поэтому значения + берём с той же ступени примитивов, что рисует Figma (overlay/width: 280 / 350 / 420 / 630) */ .p-dialog { - width: ${dt('dialog.extend.dimension_overlayWidth_base')}; + border: ${dt('dialog.extend.borderWidth')} solid ${dt('dialog.root.borderColor')}; + width: ${dt('sizing.175x')}; + } + + /* Подложка: Aura держит свой цвет анимацией появления (fill-mode: forwards), + поэтому одного правила background мало — переопределяем саму анимацию маски диалога */ + .p-dialog-mask.p-overlay-mask { + background: ${dt('dialog.extend.backdrop')}; + } + + .p-dialog-mask.p-overlay-mask-enter { + animation-name: p-dialog-mask-enter; + } + + .p-dialog-mask.p-overlay-mask-leave { + animation-name: p-dialog-mask-leave; + } + + @keyframes p-dialog-mask-enter { + from { + background: transparent; + } + to { + background: ${dt('dialog.extend.backdrop')}; + } + } + + @keyframes p-dialog-mask-leave { + from { + background: ${dt('dialog.extend.backdrop')}; + } + to { + background: transparent; + } } .p-dialog.p-component.p-dialog-sm { - width: ${dt('dialog.extend.dimension_overlayWidth_sm')}; + width: ${dt('sizing.140x')}; } .p-dialog.p-component.p-dialog-lg { - width: ${dt('dialog.extend.dimension_overlayWidth_lg')}; + width: ${dt('sizing.210x')}; } .p-dialog.p-component.p-dialog-xlg { - width: ${dt('dialog.extend.dimension_overlayWidth_xlg')}; + width: ${dt('sizing.315x')}; } `; diff --git a/src/stories/components/dialog/examples/dialog-slots.component.ts b/src/stories/components/dialog/examples/dialog-slots.component.ts index ed7d5d76..4af23397 100644 --- a/src/stories/components/dialog/examples/dialog-slots.component.ts +++ b/src/stories/components/dialog/examples/dialog-slots.component.ts @@ -17,8 +17,8 @@ const template = `
- Инвойс №CDEK-7842 - + Инвойс №7842 +
diff --git a/src/stories/components/select-button/examples/select-button-disabled.component.ts b/src/stories/components/select-button/examples/select-button-disabled.component.ts index 5f8375f9..d50cc6b2 100644 --- a/src/stories/components/select-button/examples/select-button-disabled.component.ts +++ b/src/stories/components/select-button/examples/select-button-disabled.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { StoryObj } from '@storybook/angular'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '../../../../lib/components/select-button/select-button.component'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '../../../../lib/components/select-button/select-button.component'; const template = `
@@ -19,10 +19,10 @@ const styles = ''; }) export class SelectButtonDisabledComponent { control = new FormControl({ value: '1', disabled: true }); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2' }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, ]; } @@ -40,7 +40,7 @@ export const Disabled: StoryObj = { code: ` import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/angular-ui-kit'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-select-button-disabled', @@ -52,10 +52,10 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an }) export class SelectButtonDisabledComponent { control = new FormControl({ value: '1', disabled: true }); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2' }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, ]; } `, diff --git a/src/stories/components/select-button/examples/select-button-icons.component.ts b/src/stories/components/select-button/examples/select-button-icons.component.ts index bcf4c0de..1d045f87 100644 --- a/src/stories/components/select-button/examples/select-button-icons.component.ts +++ b/src/stories/components/select-button/examples/select-button-icons.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { StoryObj } from '@storybook/angular'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '../../../../lib/components/select-button/select-button.component'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '../../../../lib/components/select-button/select-button.component'; const template = `
@@ -19,10 +19,10 @@ const styles = ''; }) export class SelectButtonIconsComponent { control = new FormControl('left'); - options: ExtraSelectButtonOption[] = [ - { name: 'Left', code: 'left', icon: 'ti ti-align-left' }, - { name: 'Center', code: 'center', icon: 'ti ti-align-center' }, - { name: 'Right', code: 'right', icon: 'ti ti-align-right' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Left', value: 'left', icon: 'ti ti-align-left' }, + { label: 'Center', value: 'center', icon: 'ti ti-align-center' }, + { label: 'Right', value: 'right', icon: 'ti ti-align-right' }, ]; } @@ -40,7 +40,7 @@ export const WithIcons: StoryObj = { code: ` import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/angular-ui-kit'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-select-button-icons', @@ -52,10 +52,10 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an }) export class SelectButtonIconsComponent { control = new FormControl('left'); - options: ExtraSelectButtonOption[] = [ - { name: 'Left', code: 'left', icon: 'ti ti-align-left' }, - { name: 'Center', code: 'center', icon: 'ti ti-align-center' }, - { name: 'Right', code: 'right', icon: 'ti ti-align-right' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Left', value: 'left', icon: 'ti ti-align-left' }, + { label: 'Center', value: 'center', icon: 'ti ti-align-center' }, + { label: 'Right', value: 'right', icon: 'ti ti-align-right' }, ]; } `, diff --git a/src/stories/components/select-button/examples/select-button-selected.component.ts b/src/stories/components/select-button/examples/select-button-selected.component.ts index 5f463398..7a9f329f 100644 --- a/src/stories/components/select-button/examples/select-button-selected.component.ts +++ b/src/stories/components/select-button/examples/select-button-selected.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { StoryObj } from '@storybook/angular'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '../../../../lib/components/select-button/select-button.component'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '../../../../lib/components/select-button/select-button.component'; const template = `
@@ -19,10 +19,10 @@ const styles = ''; }) export class SelectButtonSelectedComponent { control = new FormControl('2'); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2' }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, ]; } @@ -40,7 +40,7 @@ export const Selected: StoryObj = { code: ` import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/angular-ui-kit'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-select-button-selected', @@ -52,10 +52,10 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an }) export class SelectButtonSelectedComponent { control = new FormControl('2'); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2' }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, ]; } `, diff --git a/src/stories/components/select-button/examples/select-button-semi-disabled.component.ts b/src/stories/components/select-button/examples/select-button-semi-disabled.component.ts index 37aba1e7..d26f6865 100644 --- a/src/stories/components/select-button/examples/select-button-semi-disabled.component.ts +++ b/src/stories/components/select-button/examples/select-button-semi-disabled.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { StoryObj } from '@storybook/angular'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '../../../../lib/components/select-button/select-button.component'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '../../../../lib/components/select-button/select-button.component'; const template = `
@@ -19,10 +19,10 @@ const styles = ''; }) export class SelectButtonSemiDisabledComponent { control = new FormControl('1'); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2', disabled: true }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2', disabled: true }, + { label: 'Option 3', value: '3' }, ]; } @@ -40,7 +40,7 @@ export const SemiDisabled: StoryObj = { code: ` import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/angular-ui-kit'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-select-button-semi-disabled', @@ -52,10 +52,10 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an }) export class SelectButtonSemiDisabledComponent { control = new FormControl('1'); - options: ExtraSelectButtonOption[] = [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2', disabled: true }, - { name: 'Option 3', code: '3' }, + options: ExtraSelectButtonItem[] = [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2', disabled: true }, + { label: 'Option 3', value: '3' }, ]; } `, diff --git a/src/stories/components/select-button/select-button.stories.ts b/src/stories/components/select-button/select-button.stories.ts index 4a933d81..a16bf479 100644 --- a/src/stories/components/select-button/select-button.stories.ts +++ b/src/stories/components/select-button/select-button.stories.ts @@ -28,7 +28,7 @@ const meta: Meta = { component: `Группа кнопок-переключателей с поддержкой одиночного и множественного выбора. \`\`\`typescript -import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/angular-ui-kit'; +import { ExtraSelectButtonComponent, ExtraSelectButtonItem } from '@cdek-it/angular-ui-kit'; \`\`\``, }, }, @@ -45,12 +45,12 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an }, size: { control: 'radio', - options: ['small', 'base', 'large', 'xlarge'], + options: ['base', 'small', 'large', 'xlarge'], description: 'Размер компонента', table: { category: 'Props', defaultValue: { summary: 'base' }, - type: { summary: "'small' | 'base' | 'large' | 'xlarge'" }, + type: { summary: "'base' | 'small' | 'large' | 'xlarge'" }, }, }, multiple: { @@ -76,7 +76,7 @@ import { ExtraSelectButtonComponent, ExtraSelectButtonOption } from '@cdek-it/an description: 'Массив опций', table: { category: 'Props', - type: { summary: 'ExtraSelectButtonOption[]' }, + type: { summary: 'ExtraSelectButtonItem[]' }, }, }, }, @@ -105,9 +105,9 @@ export const Default: Story = { args: { value: '1', options: [ - { name: 'Option 1', code: '1' }, - { name: 'Option 2', code: '2' }, - { name: 'Option 3', code: '3' }, + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, ], size: 'base', multiple: false,