From 4032f6f1b0bd2971b65f125d6ae3b3ab3fae00bc Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 9 Apr 2026 17:04:32 +0700 Subject: [PATCH 1/5] =?UTF-8?q?confirm-dialog:=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F,=20=D1=81=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D1=81=D1=8B,=20=D0=BE=D0=B1=D1=91=D1=80=D1=82?= =?UTF-8?q?=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-dialog.component.ts | 73 +++++ src/prime-preset/map-tokens.ts | 5 + .../tokens/components/confirm-dialog.ts | 59 ++++ src/prime-preset/tokens/components/dialog.ts | 8 +- .../confirm-dialog/confirm-dialog.stories.ts | 262 ++++++++++++++++++ .../confirm-dialog-default.component.ts | 40 +++ .../confirm-dialog-severities.component.ts | 114 ++++++++ .../confirm-dialog-sizes.component.ts | 68 +++++ 8 files changed, 625 insertions(+), 4 deletions(-) create mode 100644 src/lib/components/confirm-dialog/confirm-dialog.component.ts create mode 100644 src/prime-preset/tokens/components/confirm-dialog.ts create mode 100644 src/stories/components/confirm-dialog/confirm-dialog.stories.ts create mode 100644 src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts create mode 100644 src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts create mode 100644 src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts diff --git a/src/lib/components/confirm-dialog/confirm-dialog.component.ts b/src/lib/components/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..f0cca13 --- /dev/null +++ b/src/lib/components/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,73 @@ +import { Component, Input } from '@angular/core'; +import { ConfirmDialog } from 'primeng/confirmdialog'; +import { Button } from 'primeng/button'; +import { PrimeTemplate } from 'primeng/api'; + +export type ConfirmDialogSize = 'sm' | 'default' | 'lg' | 'xlg'; +export type ConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'danger' | 'default'; + +@Component({ + selector: 'confirm-dialog', + host: { style: 'display: contents' }, + standalone: true, + imports: [ConfirmDialog, Button, PrimeTemplate], + template: ` + + +
+
+ + {{ message.header }} +
+ +
+
+

{{ message.message }}

+
+
+ + +
+ + + `, +}) +export class ConfirmDialogComponent { + @Input() key = ''; + @Input() size: ConfirmDialogSize = 'default'; + @Input() severity: ConfirmDialogSeverity = 'default'; + + get computedClass(): string { + const classes: string[] = []; + if (this.size === 'sm') classes.push('p-confirmdialog-sm'); + else if (this.size === 'lg') classes.push('p-confirmdialog-lg'); + else if (this.size === 'xlg') classes.push('p-confirmdialog-xlg'); + + const severityMap: Record = { + success: 'p-confirm-dialog-accept', + info: 'p-confirm-dialog-info', + warn: 'p-confirm-dialog-warn', + help: 'p-confirm-dialog-help', + danger: 'p-confirm-dialog-error', + default: '', + }; + if (severityMap[this.severity]) classes.push(severityMap[this.severity]); + + return classes.join(' '); + } +} diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts index 6f2975f..2b695ba 100644 --- a/src/prime-preset/map-tokens.ts +++ b/src/prime-preset/map-tokens.ts @@ -4,6 +4,7 @@ import type { AuraBaseDesignTokens } from '@primeuix/themes/aura/base'; import tokens from './tokens/tokens.json'; import { buttonCss } from './tokens/components/button'; +import { confirmDialogCss } from './tokens/components/confirm-dialog'; import { dialogCss } from './tokens/components/dialog'; const presetTokens: Preset = { @@ -15,6 +16,10 @@ const presetTokens: Preset = { ...(tokens.components.button as unknown as ComponentsDesignTokens['button']), css: buttonCss, }, + confirmdialog: { + ...(tokens.components.confirmdialog as unknown as ComponentsDesignTokens['confirmdialog']), + css: confirmDialogCss, + }, dialog: { ...(tokens.components.dialog as unknown as ComponentsDesignTokens['dialog']), css: dialogCss, diff --git a/src/prime-preset/tokens/components/confirm-dialog.ts b/src/prime-preset/tokens/components/confirm-dialog.ts new file mode 100644 index 0000000..f0aacab --- /dev/null +++ b/src/prime-preset/tokens/components/confirm-dialog.ts @@ -0,0 +1,59 @@ +export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): string => ` + /* Иконка в заголовке */ + .p-confirmdialog .p-dialog-title { + display: flex; + align-items: center; + gap: ${dt('dialog.header.gap')}; + } + + .p-confirmdialog .p-dialog-title .p-icon { + width: ${dt('confirmdialog.icon.size')}; + height: ${dt('confirmdialog.icon.size')}; + font-size: ${dt('confirmdialog.icon.size')}; + flex-shrink: 0; + } + + /* Размеры */ + .p-confirmdialog.p-dialog { + width: ${dt('overlay.width')}; + } + + .p-confirmdialog-sm.p-dialog { + width: ${dt('sizing.80x')}; + } + + .p-confirmdialog-lg.p-dialog { + width: ${dt('sizing.120x')}; + } + + .p-confirmdialog-xlg.p-dialog { + width: ${dt('sizing.128x')}; + } + + /* Цвета иконок по severity */ + .p-confirmdialog[data-pc-severity="success"] .p-dialog-title .p-icon, + .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title .p-icon { + color: ${dt('confirmdialog.extend.extIcon.success')}; + } + + .p-confirmdialog[data-pc-severity="info"] .p-dialog-title .p-icon, + .p-confirmdialog.p-confirm-dialog-info .p-dialog-title .p-icon { + color: ${dt('confirmdialog.extend.extIcon.info')}; + } + + .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title .p-icon, + .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title .p-icon { + color: ${dt('confirmdialog.extend.extIcon.warn')}; + } + + .p-confirmdialog[data-pc-severity="help"] .p-dialog-title .p-icon, + .p-confirmdialog.p-confirm-dialog-help .p-dialog-title .p-icon { + color: ${dt('confirmdialog.extend.extIcon.help')}; + } + + .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title .p-icon, + .p-confirmdialog[data-pc-severity="error"] .p-dialog-title .p-icon, + .p-confirmdialog.p-confirm-dialog-error .p-dialog-title .p-icon { + color: ${dt('confirmdialog.extend.extIcon.danger')}; + } +`; diff --git a/src/prime-preset/tokens/components/dialog.ts b/src/prime-preset/tokens/components/dialog.ts index c157e61..7426012 100644 --- a/src/prime-preset/tokens/components/dialog.ts +++ b/src/prime-preset/tokens/components/dialog.ts @@ -36,18 +36,18 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog { - width: ${dt('sizing.80x')}; + width: ${dt('overlay.width')}; } .p-dialog.p-component.p-dialog-sm { - width: ${dt('overlay.sm.width')}; + width: ${dt('sizing.80x')}; } .p-dialog.p-component.p-dialog-lg { - width: ${dt('overlay.lg.width')}; + width: ${dt('sizing.120x')}; } .p-dialog.p-component.p-dialog-xlg { - width: ${dt('overlay.xlg.width')}; + width: ${dt('sizing.128x')}; } `; diff --git a/src/stories/components/confirm-dialog/confirm-dialog.stories.ts b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts new file mode 100644 index 0000000..399c763 --- /dev/null +++ b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts @@ -0,0 +1,262 @@ +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; +import { ConfirmDialogComponent } from '../../../lib/components/confirm-dialog/confirm-dialog.component'; +import { ConfirmDialogDefaultComponent } from './examples/confirm-dialog-default.component'; +import { ConfirmDialogSeveritiesComponent } from './examples/confirm-dialog-severities.component'; +import { ConfirmDialogSizesComponent } from './examples/confirm-dialog-sizes.component'; + +const meta: Meta = { + title: 'Components/Overlay/ConfirmDialog', + component: ConfirmDialogComponent, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: `Компонент для подтверждения действий пользователя. Требует подключения \`ConfirmationService\`. + +\`\`\`typescript +import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; +import { ConfirmationService } from 'primeng/api'; +\`\`\``, + }, + }, + designTokens: { prefix: '--p-confirmdialog' }, + }, + argTypes: { + key: { + control: 'text', + description: 'Идентификатор группы для адресной отправки сообщений.', + table: { + category: 'Props', + type: { summary: 'string' }, + }, + }, + size: { + control: 'select', + options: ['sm', 'default', 'lg', 'xlg'], + description: 'Размер диалога', + table: { + category: 'Props', + defaultValue: { summary: 'default' }, + type: { summary: "'sm' | 'default' | 'lg' | 'xlg'" }, + }, + }, + severity: { + control: 'select', + options: ['default', 'success', 'info', 'warn', 'help', 'danger'], + description: 'Цветовая схема иконки в заголовке', + table: { + category: 'Props', + defaultValue: { summary: 'default' }, + type: { summary: "'default' | 'success' | 'info' | 'warn' | 'help' | 'danger'" }, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +// ── Default ─────────────────────────────────────────────────────────────────── + +export const Default: Story = { + name: 'ConfirmDialog', + decorators: [moduleMetadata({ imports: [ConfirmDialogDefaultComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Базовый пример диалога подтверждения.', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; + +@Component({ + selector: 'app-confirm-dialog-default', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template: \` + + + \`, +}) +export class ConfirmDialogDefaultComponent { + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(): void { + this.confirmationService.confirm({ + key: 'cd-default', + message: 'Вы уверены, что хотите продолжить?', + header: 'Подтверждение', + icon: 'ti ti-alert-triangle', + acceptLabel: 'Да', + rejectLabel: 'Нет', + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} + `, + }, + }, + }, +}; + +// ── Severities ──────────────────────────────────────────────────────────────── + +export const Severities: Story = { + name: 'Severities', + decorators: [moduleMetadata({ imports: [ConfirmDialogSeveritiesComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Варианты диалога с различными уровнями важности: success, info, warn, help, danger.', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; + +const SEVERITIES = [ + { type: 'success', buttonSeverity: 'success', icon: 'ti ti-circle-check', label: 'Успех', header: 'Успех', message: 'Операция выполнена успешно.', acceptLabel: 'OK' }, + { type: 'info', buttonSeverity: 'info', icon: 'ti ti-info-circle', label: 'Информация', header: 'Информация', message: 'Это информационное сообщение.', acceptLabel: 'Понятно' }, + { type: 'warn', buttonSeverity: 'warn', icon: 'ti ti-alert-triangle', label: 'Предупреждение', header: 'Предупреждение', message: 'Внимание! Это действие может иметь последствия.', acceptLabel: 'Продолжить' }, + { type: 'help', buttonSeverity: 'help', icon: 'ti ti-help-circle', label: 'Справка', header: 'Справка', message: 'Нужна помощь с этим действием?', acceptLabel: 'Да' }, + { type: 'danger', buttonSeverity: 'danger', icon: 'ti ti-circle-x', label: 'Удаление', header: 'Подтверждение', message: 'Это действие нельзя отменить. Продолжить?', acceptLabel: 'Удалить' }, +]; + +@Component({ + selector: 'app-confirm-dialog-severities', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template: \` + + + + + + +
+ @for (severity of severities; track severity.type) { + + } +
+ \`, +}) +export class ConfirmDialogSeveritiesComponent { + severities = SEVERITIES; + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(severity: any): void { + this.confirmationService.confirm({ + key: 'cd-severity-' + severity.type, + message: severity.message, + header: severity.header, + icon: severity.icon, + acceptLabel: severity.acceptLabel, + rejectLabel: 'Нет', + acceptButtonProps: { severity: severity.buttonSeverity }, + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} + `, + }, + }, + }, +}; + +// ── Sizes ───────────────────────────────────────────────────────────────────── + +export const Sizes: Story = { + name: 'Sizes', + decorators: [moduleMetadata({ imports: [ConfirmDialogSizesComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Доступные размеры диалога: sm, base, lg, xlg.', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; + +const SIZES = [ + { key: 'sm', label: 'Small' }, + { key: 'default', label: 'Base' }, + { key: 'lg', label: 'Large' }, + { key: 'xlg', label: 'Extra Large' }, +]; + +@Component({ + selector: 'app-confirm-dialog-sizes', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template: \` + + + + + +
+ @for (size of sizes; track size.key) { + + } +
+ \`, +}) +export class ConfirmDialogSizesComponent { + sizes = SIZES; + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(size: any): void { + this.confirmationService.confirm({ + key: 'cd-size-' + size.key, + message: 'Это диалог размера ' + size.label, + header: 'Подтверждение', + icon: 'ti ti-alert-triangle', + acceptLabel: 'Да', + rejectLabel: 'Нет', + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} + `, + }, + }, + }, +}; diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts new file mode 100644 index 0000000..5c812da --- /dev/null +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; + +const template = ` +
+ + + +
+`; + +@Component({ + selector: 'app-confirm-dialog-default', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template, +}) +export class ConfirmDialogDefaultComponent { + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(): void { + this.confirmationService.confirm({ + key: 'cd-default', + message: 'Вы уверены, что хотите продолжить?', + header: 'Подтверждение', + icon: 'ti ti-alert-triangle', + acceptLabel: 'Да', + rejectLabel: 'Нет', + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts new file mode 100644 index 0000000..c3cd854 --- /dev/null +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts @@ -0,0 +1,114 @@ +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; + +interface SeverityItem { + type: 'success' | 'info' | 'warn' | 'help' | 'danger'; + buttonSeverity: 'success' | 'info' | 'warn' | 'help' | 'danger'; + icon: string; + label: string; + header: string; + message: string; + acceptLabel: string; +} + +const SEVERITIES: SeverityItem[] = [ + { + type: 'success', + buttonSeverity: 'success', + icon: 'ti ti-circle-check', + label: 'Успех', + header: 'Успех', + message: 'Операция выполнена успешно.', + acceptLabel: 'OK', + }, + { + type: 'info', + buttonSeverity: 'info', + icon: 'ti ti-info-circle', + label: 'Информация', + header: 'Информация', + message: 'Это информационное сообщение.', + acceptLabel: 'Понятно', + }, + { + type: 'warn', + buttonSeverity: 'warn', + icon: 'ti ti-alert-triangle', + label: 'Предупреждение', + header: 'Предупреждение', + message: 'Внимание! Это действие может иметь последствия.', + acceptLabel: 'Продолжить', + }, + { + type: 'help', + buttonSeverity: 'help', + icon: 'ti ti-help-circle', + label: 'Справка', + header: 'Справка', + message: 'Нужна помощь с этим действием?', + acceptLabel: 'Да', + }, + { + type: 'danger', + buttonSeverity: 'danger', + icon: 'ti ti-circle-x', + label: 'Удаление', + header: 'Подтверждение', + message: 'Это действие нельзя отменить. Продолжить?', + acceptLabel: 'Удалить', + }, +]; + +const template = ` +
+ + + + + + +
+ @for (severity of severities; track severity.type) { + + } +
+
+`; + +@Component({ + selector: 'app-confirm-dialog-severities', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template, +}) +export class ConfirmDialogSeveritiesComponent { + severities = SEVERITIES; + + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(severity: SeverityItem): void { + this.confirmationService.confirm({ + key: 'cd-severity-' + severity.type, + message: severity.message, + header: severity.header, + icon: severity.icon, + acceptLabel: severity.acceptLabel, + rejectLabel: 'Нет', + acceptButtonProps: { severity: severity.buttonSeverity }, + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts new file mode 100644 index 0000000..a2dcfad --- /dev/null +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts @@ -0,0 +1,68 @@ +import { Component } from '@angular/core'; +import { Button } from 'primeng/button'; +import { ConfirmationService } from 'primeng/api'; +import { + ConfirmDialogComponent, + ConfirmDialogSize, +} from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; + +interface SizeItem { + key: ConfirmDialogSize; + label: string; +} + +const SIZES: SizeItem[] = [ + { key: 'sm', label: 'Small' }, + { key: 'default', label: 'Base' }, + { key: 'lg', label: 'Large' }, + { key: 'xlg', label: 'Extra Large' }, +]; + +const template = ` +
+ + + + + +
+ @for (size of sizes; track size.key) { + + } +
+
+`; + +@Component({ + selector: 'app-confirm-dialog-sizes', + standalone: true, + imports: [ConfirmDialogComponent, Button], + providers: [ConfirmationService], + template, +}) +export class ConfirmDialogSizesComponent { + sizes = SIZES; + + constructor(private confirmationService: ConfirmationService) {} + + showConfirm(size: SizeItem): void { + this.confirmationService.confirm({ + key: 'cd-size-' + size.key, + message: 'Это диалог размера ' + size.label, + header: 'Подтверждение', + icon: 'ti ti-alert-triangle', + acceptLabel: 'Да', + rejectLabel: 'Нет', + rejectButtonProps: { + severity: 'secondary', + text: true, + }, + accept: () => {}, + reject: () => {}, + }); + } +} From 8020a49381e00613c5b11fd3709eea83be52a111 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 13 Apr 2026 18:28:15 +0700 Subject: [PATCH 2/5] =?UTF-8?q?confirm-dialog:=20=D1=83=D0=B1=D1=80=D0=B0?= =?UTF-8?q?=D0=BD=20=D0=BA=D0=BB=D0=B0=D1=81=D1=81=20p-icon=20=D1=81=20?= =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20=D1=81=D0=BE=D0=BE=D0=B1?= =?UTF-8?q?=D1=89=D0=B5=D0=BD=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/confirm-dialog/confirm-dialog.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/confirm-dialog/confirm-dialog.component.ts b/src/lib/components/confirm-dialog/confirm-dialog.component.ts index f0cca13..4462b86 100644 --- a/src/lib/components/confirm-dialog/confirm-dialog.component.ts +++ b/src/lib/components/confirm-dialog/confirm-dialog.component.ts @@ -16,7 +16,7 @@ export type ConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'dang
- + {{ message.header }}
- - + }

{{ message.message }}

-
- - -
+ @if (footerTemplate) { + + + } @else { +
+ + +
+ } `, @@ -51,6 +64,8 @@ export class ConfirmDialogComponent { @Input() key = ''; @Input() size: ConfirmDialogSize = 'default'; @Input() severity: ConfirmDialogSeverity = 'default'; + @Input() headerTemplate: TemplateRef | null = null; + @Input() footerTemplate: TemplateRef | null = null; get computedClass(): string { const classes: string[] = []; From 0480f7ae4a973039a405432c4a729957987da80d Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 13 Apr 2026 18:32:34 +0700 Subject: [PATCH 4/5] =?UTF-8?q?confirm-dialog:=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20ConfirmDialogService,=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=91=D0=BD=20ConfirmationService=20=D0=B2?= =?UTF-8?q?=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D0=B0=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-dialog/confirm-dialog.service.ts | 16 ++++++++ .../confirm-dialog/confirm-dialog.stories.ts | 40 +++++++------------ .../confirm-dialog-default.component.ts | 11 ++--- .../confirm-dialog-severities.component.ts | 11 ++--- .../confirm-dialog-sizes.component.ts | 11 ++--- 5 files changed, 42 insertions(+), 47 deletions(-) create mode 100644 src/lib/components/confirm-dialog/confirm-dialog.service.ts diff --git a/src/lib/components/confirm-dialog/confirm-dialog.service.ts b/src/lib/components/confirm-dialog/confirm-dialog.service.ts new file mode 100644 index 0000000..1031258 --- /dev/null +++ b/src/lib/components/confirm-dialog/confirm-dialog.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { Confirmation, ConfirmationService } from 'primeng/api'; + +export type ConfirmDialogOptions = Pick< + Confirmation, + 'key' | 'message' | 'header' | 'icon' | 'acceptLabel' | 'rejectLabel' | 'accept' | 'reject' | 'acceptButtonProps' +>; + +@Injectable() +export class ConfirmDialogService { + constructor(private readonly confirmationService: ConfirmationService) {} + + confirm(options: ConfirmDialogOptions): void { + this.confirmationService.confirm(options); + } +} diff --git a/src/stories/components/confirm-dialog/confirm-dialog.stories.ts b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts index 399c763..91f44e0 100644 --- a/src/stories/components/confirm-dialog/confirm-dialog.stories.ts +++ b/src/stories/components/confirm-dialog/confirm-dialog.stories.ts @@ -11,10 +11,10 @@ const meta: Meta = { parameters: { docs: { description: { - component: `Компонент для подтверждения действий пользователя. Требует подключения \`ConfirmationService\`. + component: `Компонент для подтверждения действий пользователя. Требует подключения \`ConfirmationService\` и \`ConfirmDialogService\`. \`\`\`typescript -import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; +import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit'; import { ConfirmationService } from 'primeng/api'; \`\`\``, }, @@ -73,33 +73,29 @@ export const Default: Story = { import { Component } from '@angular/core'; import { Button } from 'primeng/button'; import { ConfirmationService } from 'primeng/api'; -import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; +import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit'; @Component({ selector: 'app-confirm-dialog-default', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template: \` \`, }) export class ConfirmDialogDefaultComponent { - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-default', message: 'Вы уверены, что хотите продолжить?', header: 'Подтверждение', icon: 'ti ti-alert-triangle', acceptLabel: 'Да', rejectLabel: 'Нет', - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); @@ -128,7 +124,7 @@ export const Severities: Story = { import { Component } from '@angular/core'; import { Button } from 'primeng/button'; import { ConfirmationService } from 'primeng/api'; -import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; +import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit'; const SEVERITIES = [ { type: 'success', buttonSeverity: 'success', icon: 'ti ti-circle-check', label: 'Успех', header: 'Успех', message: 'Операция выполнена успешно.', acceptLabel: 'OK' }, @@ -142,7 +138,7 @@ const SEVERITIES = [ selector: 'app-confirm-dialog-severities', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template: \` @@ -164,10 +160,10 @@ const SEVERITIES = [ }) export class ConfirmDialogSeveritiesComponent { severities = SEVERITIES; - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(severity: any): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-severity-' + severity.type, message: severity.message, header: severity.header, @@ -175,10 +171,6 @@ export class ConfirmDialogSeveritiesComponent { acceptLabel: severity.acceptLabel, rejectLabel: 'Нет', acceptButtonProps: { severity: severity.buttonSeverity }, - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); @@ -207,7 +199,7 @@ export const Sizes: Story = { import { Component } from '@angular/core'; import { Button } from 'primeng/button'; import { ConfirmationService } from 'primeng/api'; -import { ConfirmDialogComponent } from '@cdek-it/angular-ui-kit'; +import { ConfirmDialogComponent, ConfirmDialogService } from '@cdek-it/angular-ui-kit'; const SIZES = [ { key: 'sm', label: 'Small' }, @@ -220,7 +212,7 @@ const SIZES = [ selector: 'app-confirm-dialog-sizes', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template: \` @@ -236,20 +228,16 @@ const SIZES = [ }) export class ConfirmDialogSizesComponent { sizes = SIZES; - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(size: any): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-size-' + size.key, message: 'Это диалог размера ' + size.label, header: 'Подтверждение', icon: 'ti ti-alert-triangle', acceptLabel: 'Да', rejectLabel: 'Нет', - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts index 5c812da..8b7118c 100644 --- a/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-default.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { Button } from 'primeng/button'; import { ConfirmationService } from 'primeng/api'; import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; +import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service'; const template = `
@@ -15,24 +16,20 @@ const template = ` selector: 'app-confirm-dialog-default', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template, }) export class ConfirmDialogDefaultComponent { - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-default', message: 'Вы уверены, что хотите продолжить?', header: 'Подтверждение', icon: 'ti ti-alert-triangle', acceptLabel: 'Да', rejectLabel: 'Нет', - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts index c3cd854..41cdadc 100644 --- a/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-severities.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { Button } from 'primeng/button'; import { ConfirmationService } from 'primeng/api'; import { ConfirmDialogComponent } from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; +import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service'; interface SeverityItem { type: 'success' | 'info' | 'warn' | 'help' | 'danger'; @@ -86,16 +87,16 @@ const template = ` selector: 'app-confirm-dialog-severities', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template, }) export class ConfirmDialogSeveritiesComponent { severities = SEVERITIES; - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(severity: SeverityItem): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-severity-' + severity.type, message: severity.message, header: severity.header, @@ -103,10 +104,6 @@ export class ConfirmDialogSeveritiesComponent { acceptLabel: severity.acceptLabel, rejectLabel: 'Нет', acceptButtonProps: { severity: severity.buttonSeverity }, - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); diff --git a/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts index a2dcfad..fbfb90d 100644 --- a/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts +++ b/src/stories/components/confirm-dialog/examples/confirm-dialog-sizes.component.ts @@ -5,6 +5,7 @@ import { ConfirmDialogComponent, ConfirmDialogSize, } from '../../../../lib/components/confirm-dialog/confirm-dialog.component'; +import { ConfirmDialogService } from '../../../../lib/components/confirm-dialog/confirm-dialog.service'; interface SizeItem { key: ConfirmDialogSize; @@ -41,26 +42,22 @@ const template = ` selector: 'app-confirm-dialog-sizes', standalone: true, imports: [ConfirmDialogComponent, Button], - providers: [ConfirmationService], + providers: [ConfirmationService, ConfirmDialogService], template, }) export class ConfirmDialogSizesComponent { sizes = SIZES; - constructor(private confirmationService: ConfirmationService) {} + constructor(private confirmDialogService: ConfirmDialogService) {} showConfirm(size: SizeItem): void { - this.confirmationService.confirm({ + this.confirmDialogService.confirm({ key: 'cd-size-' + size.key, message: 'Это диалог размера ' + size.label, header: 'Подтверждение', icon: 'ti ti-alert-triangle', acceptLabel: 'Да', rejectLabel: 'Нет', - rejectButtonProps: { - severity: 'secondary', - text: true, - }, accept: () => {}, reject: () => {}, }); From b6684fd9548606493f433d0dccc8e6391294daac Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 13 Apr 2026 18:39:28 +0700 Subject: [PATCH 5/5] =?UTF-8?q?confirm-dialog:=20=D1=84=D0=B8=D0=BA=D1=81?= =?UTF-8?q?=20=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=20=D0=B8=D0=BA=D0=BE?= =?UTF-8?q?=D0=BD=D0=BE=D0=BA=20severity,=20=D1=83=D0=B1=D1=80=D0=B0=D0=BD?= =?UTF-8?q?=20severity=20secondary=20=D1=83=20=D0=BA=D0=BD=D0=BE=D0=BF?= =?UTF-8?q?=D0=BA=D0=B8=20=D0=BE=D1=82=D0=BA=D0=BB=D0=BE=D0=BD=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../confirm-dialog.component.ts | 1 - .../tokens/components/confirm-dialog.ts | 24 +++++++++---------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/lib/components/confirm-dialog/confirm-dialog.component.ts b/src/lib/components/confirm-dialog/confirm-dialog.component.ts index e595837..cdb4993 100644 --- a/src/lib/components/confirm-dialog/confirm-dialog.component.ts +++ b/src/lib/components/confirm-dialog/confirm-dialog.component.ts @@ -45,7 +45,6 @@ export type ConfirmDialogSeverity = 'success' | 'info' | 'warn' | 'help' | 'dang
diff --git a/src/prime-preset/tokens/components/confirm-dialog.ts b/src/prime-preset/tokens/components/confirm-dialog.ts index f0aacab..bc9e3ff 100644 --- a/src/prime-preset/tokens/components/confirm-dialog.ts +++ b/src/prime-preset/tokens/components/confirm-dialog.ts @@ -6,7 +6,7 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str gap: ${dt('dialog.header.gap')}; } - .p-confirmdialog .p-dialog-title .p-icon { + .p-confirmdialog .p-dialog-title i { width: ${dt('confirmdialog.icon.size')}; height: ${dt('confirmdialog.icon.size')}; font-size: ${dt('confirmdialog.icon.size')}; @@ -31,29 +31,29 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str } /* Цвета иконок по severity */ - .p-confirmdialog[data-pc-severity="success"] .p-dialog-title .p-icon, - .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title .p-icon { + .p-confirmdialog[data-pc-severity="success"] .p-dialog-title i, + .p-confirmdialog.p-confirm-dialog-accept .p-dialog-title i { color: ${dt('confirmdialog.extend.extIcon.success')}; } - .p-confirmdialog[data-pc-severity="info"] .p-dialog-title .p-icon, - .p-confirmdialog.p-confirm-dialog-info .p-dialog-title .p-icon { + .p-confirmdialog[data-pc-severity="info"] .p-dialog-title i, + .p-confirmdialog.p-confirm-dialog-info .p-dialog-title i { color: ${dt('confirmdialog.extend.extIcon.info')}; } - .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title .p-icon, - .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title .p-icon { + .p-confirmdialog[data-pc-severity="warn"] .p-dialog-title i, + .p-confirmdialog.p-confirm-dialog-warn .p-dialog-title i { color: ${dt('confirmdialog.extend.extIcon.warn')}; } - .p-confirmdialog[data-pc-severity="help"] .p-dialog-title .p-icon, - .p-confirmdialog.p-confirm-dialog-help .p-dialog-title .p-icon { + .p-confirmdialog[data-pc-severity="help"] .p-dialog-title i, + .p-confirmdialog.p-confirm-dialog-help .p-dialog-title i { color: ${dt('confirmdialog.extend.extIcon.help')}; } - .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title .p-icon, - .p-confirmdialog[data-pc-severity="error"] .p-dialog-title .p-icon, - .p-confirmdialog.p-confirm-dialog-error .p-dialog-title .p-icon { + .p-confirmdialog[data-pc-severity="danger"] .p-dialog-title i, + .p-confirmdialog[data-pc-severity="error"] .p-dialog-title i, + .p-confirmdialog.p-confirm-dialog-error .p-dialog-title i { color: ${dt('confirmdialog.extend.extIcon.danger')}; } `;