diff --git a/src/stories/components/divider/divider.stories.ts b/src/stories/components/divider/divider.stories.ts index 8f7c5f87..f575aee2 100644 --- a/src/stories/components/divider/divider.stories.ts +++ b/src/stories/components/divider/divider.stories.ts @@ -6,9 +6,14 @@ import { } from './examples/divider-with-content.component'; import { DividerWithIconComponent, WithIcon as WithIconStory } from './examples/divider-with-icon.component'; import { AlignLeft as AlignLeftStory, DividerAlignLeftComponent } from './examples/divider-align-left.component'; -import { AlignBottom as AlignBottomStory, DividerAlignBottomComponent } from './examples/divider-align-bottom.component'; +import { + AlignBottom as AlignBottomStory, + DividerAlignBottomComponent +} from './examples/divider-align-bottom.component'; + +type DividerArgs = DividerComponent & { horizontalAlign: string; verticalAlign: string; content: string }; -const meta: Meta = { +const meta: Meta = { title: 'Components/Panel/Divider', component: DividerComponent, tags: ['autodocs'], @@ -56,14 +61,37 @@ import { DividerModule } from 'primeng/divider'; type: { summary: "'solid' | 'dash'" } } }, - align: { + align: { table: { disable: true } }, + horizontalAlign: { + name: 'align', control: 'select', - options: ['left', 'center', 'right', 'top', 'bottom'], + options: ['left', 'center', 'right'], description: 'Выравнивание контента внутри разделителя', table: { category: 'Props', defaultValue: { summary: 'center' }, - type: { summary: "'left' | 'center' | 'right' | 'top' | 'bottom'" } + type: { summary: "'left' | 'center' | 'right'" } + }, + if: { arg: 'layout', eq: 'horizontal' } + }, + verticalAlign: { + name: 'align', + control: 'select', + options: ['top', 'center', 'bottom'], + description: 'Выравнивание контента внутри разделителя', + table: { + category: 'Props', + defaultValue: { summary: 'center' }, + type: { summary: "'top' | 'center' | 'bottom'" } + }, + if: { arg: 'layout', eq: 'vertical' } + }, + content: { + control: 'text', + description: 'Контент разделителя (content projection); выравнивать без него нечего', + table: { + category: 'Слоты', + type: { summary: 'ng-content' } } } } @@ -78,29 +106,38 @@ const commonTemplate = ` `; export default meta; -type Story = StoryObj; +type Story = StoryObj; // ── Default ─────────────────────────────────────────────────────────────────── export const Default: Story = { name: 'Default', render: (args) => { + const layout = args.layout ?? 'horizontal'; + const align = layout === 'vertical' ? (args.verticalAlign ?? 'center') : (args.horizontalAlign ?? 'center'); + const parts: string[] = []; - if (args.layout && args.layout !== 'horizontal') parts.push(`layout="${args.layout}"`); + if (layout !== 'horizontal') parts.push(`layout="${layout}"`); if (args.type && args.type !== 'solid') parts.push(`type="${args.type}"`); - if (args.align && args.align !== 'center') parts.push(`align="${args.align}"`); + if (align !== 'center') parts.push(`align="${align}"`); + + const attrs = parts.length ? `\n ${parts.join('\n ')}\n` : ''; + const content = args.content ? `\n ${args.content}\n` : ''; + const divider = `${content}`; - const template = parts.length - ? `` - : ``; + /* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту, + и выравнивать внутри нечего — top, center и bottom дают одно и то же. */ + const template = layout === 'vertical' ? `
\n ${divider}\n
` : divider; return { props: args, template }; }, args: { layout: 'horizontal', type: 'solid', - align: 'center' + horizontalAlign: 'center', + verticalAlign: 'center', + content: 'Отправитель' }, parameters: { docs: { diff --git a/src/stories/components/divider/examples/divider-align-bottom.component.ts b/src/stories/components/divider/examples/divider-align-bottom.component.ts index 0e7a2336..504c6714 100644 --- a/src/stories/components/divider/examples/divider-align-bottom.component.ts +++ b/src/stories/components/divider/examples/divider-align-bottom.component.ts @@ -1,10 +1,17 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ExtraDividerAlign, + ExtraDividerComponent, + ExtraDividerLayout, + ExtraDividerType +} from '../../../../lib/components/divider/divider.component'; +/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту, + и выравнивать внутри нечего — top, center и bottom дают одно и то же. */ const template = ` -
- - Отправитель +
+ + {{ content }}
`; @@ -18,12 +25,35 @@ const styles = ''; template, styles }) -export class DividerAlignBottomComponent {} +export class DividerAlignBottomComponent { + @Input() layout: ExtraDividerLayout = 'vertical'; + @Input() type: ExtraDividerType = 'solid'; + @Input() align: ExtraDividerAlign = 'bottom'; + @Input() content = 'Отправитель'; +} export const AlignBottom = { - render: () => ({ - template: `` - }), + render: (args: Record) => { + const layout = (args['layout'] as ExtraDividerLayout) ?? 'vertical'; + const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign; + + return { + props: { ...args, layout, align }, + template: `` + }; + }, + args: { + layout: 'vertical' as const, + type: 'solid' as const, + horizontalAlign: 'center', + verticalAlign: 'bottom', + content: 'Отправитель' + }, parameters: { docs: { description: { story: 'Контент вертикального разделителя выровнен по нижнему краю.' }, diff --git a/src/stories/components/divider/examples/divider-align-left.component.ts b/src/stories/components/divider/examples/divider-align-left.component.ts index 21e85145..5e1e5f2c 100644 --- a/src/stories/components/divider/examples/divider-align-left.component.ts +++ b/src/stories/components/divider/examples/divider-align-left.component.ts @@ -1,10 +1,17 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ExtraDividerAlign, + ExtraDividerComponent, + ExtraDividerLayout, + ExtraDividerType +} from '../../../../lib/components/divider/divider.component'; +/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту, + и выравнивать внутри нечего — top, center и bottom дают одно и то же. */ const template = ` -
- - Отправитель +
+ + {{ content }}
`; @@ -18,12 +25,35 @@ const styles = ''; template, styles }) -export class DividerAlignLeftComponent {} +export class DividerAlignLeftComponent { + @Input() layout: ExtraDividerLayout = 'horizontal'; + @Input() type: ExtraDividerType = 'solid'; + @Input() align: ExtraDividerAlign = 'left'; + @Input() content = 'Отправитель'; +} export const AlignLeft = { - render: () => ({ - template: `` - }), + render: (args: Record) => { + const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal'; + const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign; + + return { + props: { ...args, layout, align }, + template: `` + }; + }, + args: { + layout: 'horizontal' as const, + type: 'solid' as const, + horizontalAlign: 'left', + verticalAlign: 'top', + content: 'Отправитель' + }, parameters: { docs: { description: { story: 'Контент разделителя выровнен по левому краю.' }, diff --git a/src/stories/components/divider/examples/divider-with-content.component.ts b/src/stories/components/divider/examples/divider-with-content.component.ts index 166aa1c1..7fd19c0c 100644 --- a/src/stories/components/divider/examples/divider-with-content.component.ts +++ b/src/stories/components/divider/examples/divider-with-content.component.ts @@ -1,10 +1,17 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ExtraDividerAlign, + ExtraDividerComponent, + ExtraDividerLayout, + ExtraDividerType +} from '../../../../lib/components/divider/divider.component'; +/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту, + и выравнивать внутри нечего — top, center и bottom дают одно и то же. */ const template = ` -
- - Москва → Новосибирск +
+ + {{ content }}
`; @@ -18,12 +25,35 @@ const styles = ''; template, styles }) -export class DividerWithContentComponent {} +export class DividerWithContentComponent { + @Input() layout: ExtraDividerLayout = 'horizontal'; + @Input() type: ExtraDividerType = 'solid'; + @Input() align: ExtraDividerAlign = 'center'; + @Input() content = 'Москва → Новосибирск'; +} export const WithContent = { - render: () => ({ - template: `` - }), + render: (args: Record) => { + const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal'; + const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign; + + return { + props: { ...args, layout, align }, + template: `` + }; + }, + args: { + layout: 'horizontal' as const, + type: 'solid' as const, + horizontalAlign: 'center', + verticalAlign: 'center', + content: 'Москва → Новосибирск' + }, parameters: { docs: { description: { story: 'Разделитель с текстовым контентом по центру.' }, diff --git a/src/stories/components/divider/examples/divider-with-icon.component.ts b/src/stories/components/divider/examples/divider-with-icon.component.ts index 1c8f8a77..ea704a1e 100644 --- a/src/stories/components/divider/examples/divider-with-icon.component.ts +++ b/src/stories/components/divider/examples/divider-with-icon.component.ts @@ -1,10 +1,17 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { ExtraDividerComponent } from '../../../../lib/components/divider/divider.component'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ExtraDividerAlign, + ExtraDividerComponent, + ExtraDividerLayout, + ExtraDividerType +} from '../../../../lib/components/divider/divider.component'; +/* Вертикальному разделителю нужна высота от родителя: без неё он ровно по контенту, + и выравнивать внутри нечего — top, center и bottom дают одно и то же. */ const template = ` -
- - +
+ +
`; @@ -18,12 +25,46 @@ const styles = ''; template, styles }) -export class DividerWithIconComponent {} +export class DividerWithIconComponent { + @Input() layout: ExtraDividerLayout = 'horizontal'; + @Input() type: ExtraDividerType = 'solid'; + @Input() align: ExtraDividerAlign = 'center'; + @Input() icon = 'ti ti-map-pin'; +} export const WithIcon = { - render: () => ({ - template: `` - }), + render: (args: Record) => { + const layout = (args['layout'] as ExtraDividerLayout) ?? 'horizontal'; + const align = (layout === 'vertical' ? args['verticalAlign'] : args['horizontalAlign']) as ExtraDividerAlign; + + return { + props: { ...args, layout, align }, + template: `` + }; + }, + args: { + layout: 'horizontal' as const, + type: 'solid' as const, + horizontalAlign: 'center', + verticalAlign: 'center', + icon: 'ti ti-map-pin' + }, + argTypes: { + content: { table: { disable: true } }, + icon: { + control: 'text', + description: 'Класс иконки tabler icon', + table: { + category: 'Слоты', + type: { summary: 'string' } + } + } + }, parameters: { docs: { description: { story: 'Разделитель с иконкой.' },