From 840f3c5e57fbdd25797bd47de2d440e1f982ea22 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Apr 2026 22:50:06 +0700 Subject: [PATCH 1/4] =?UTF-8?q?megamenu:=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?= =?UTF-8?q?=D0=B7=D0=B0=D1=86=D0=B8=D1=8F,=20=D1=81=D1=82=D0=BE=D1=80?= =?UTF-8?q?=D0=B8=D1=81=D1=8B,=20=D0=BE=D0=B1=D1=91=D1=80=D1=82=D0=BA?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/megamenu/megamenu.component.ts | 77 +++++++ src/prime-preset/map-tokens.ts | 5 + .../tokens/components/megamenu.ts | 42 ++++ src/prime-preset/tokens/tokens.json | 3 +- .../examples/megamenu-custom.component.ts | 81 +++++++ .../examples/megamenu-horizontal.component.ts | 60 ++++++ .../examples/megamenu-vertical.component.ts | 60 ++++++ .../components/megamenu/megamenu.stories.ts | 201 ++++++++++++++++++ 8 files changed, 528 insertions(+), 1 deletion(-) create mode 100644 src/lib/components/megamenu/megamenu.component.ts create mode 100644 src/prime-preset/tokens/components/megamenu.ts create mode 100644 src/stories/components/megamenu/examples/megamenu-custom.component.ts create mode 100644 src/stories/components/megamenu/examples/megamenu-horizontal.component.ts create mode 100644 src/stories/components/megamenu/examples/megamenu-vertical.component.ts create mode 100644 src/stories/components/megamenu/megamenu.stories.ts diff --git a/src/lib/components/megamenu/megamenu.component.ts b/src/lib/components/megamenu/megamenu.component.ts new file mode 100644 index 0000000..9da0845 --- /dev/null +++ b/src/lib/components/megamenu/megamenu.component.ts @@ -0,0 +1,77 @@ +import { Component, Input, TemplateRef } from '@angular/core'; +import { NgTemplateOutlet } from '@angular/common'; +import { MegaMenu } from 'primeng/megamenu'; +import { MegaMenuItem, PrimeTemplate } from 'primeng/api'; +import { Badge } from 'primeng/badge'; + +export type MegaMenuOrientation = 'horizontal' | 'vertical'; + +export interface MegaMenuModel extends MegaMenuItem { + description?: string; + badge?: string; +} + +@Component({ + selector: 'megamenu', + host: { style: 'display: contents' }, + standalone: true, + imports: [MegaMenu, PrimeTemplate, NgTemplateOutlet, Badge], + template: ` + + + @if (itemTemplate) { + + + } @else { + + @if (item.icon) { + + } + @if ($any(item).description) { +
+ {{ item.label }} + {{ $any(item).description }} +
+ } @else { + {{ item.label }} + } + @if ($any(item).badge) { + + } + @if (hasSubmenu) { + + } + + } + + + `, +}) +export class MegaMenuComponent { + @Input() model: MegaMenuModel[] = []; + @Input() orientation: MegaMenuOrientation = 'horizontal'; + @Input() breakpoint: string = '960px'; + @Input() scrollHeight: string = ''; + @Input() disabled: boolean = false; + @Input() ariaLabel: string | undefined = undefined; + @Input() ariaLabelledBy: string | undefined = undefined; + @Input() tabindex: number = 0; + @Input() itemTemplate: TemplateRef | null = null; +} diff --git a/src/prime-preset/map-tokens.ts b/src/prime-preset/map-tokens.ts index a5dd634..bbad52d 100644 --- a/src/prime-preset/map-tokens.ts +++ b/src/prime-preset/map-tokens.ts @@ -6,6 +6,7 @@ import tokens from './tokens/tokens.json'; import { avatarCss } from './tokens/components/avatar'; import { buttonCss } from './tokens/components/button'; import { tooltipCss } from './tokens/components/tooltip'; +import { megamenuCss } from './tokens/components/megamenu'; const presetTokens: Preset = { primitive: tokens.primitive as unknown as AuraBaseDesignTokens['primitive'], @@ -24,6 +25,10 @@ const presetTokens: Preset = { ...(tokens.components.tooltip as unknown as ComponentsDesignTokens['tooltip']), css: tooltipCss, }, + megamenu: { + ...(tokens.components.megamenu as unknown as ComponentsDesignTokens['megamenu']), + css: megamenuCss, + }, } as ComponentsDesignTokens, }; diff --git a/src/prime-preset/tokens/components/megamenu.ts b/src/prime-preset/tokens/components/megamenu.ts new file mode 100644 index 0000000..542864b --- /dev/null +++ b/src/prime-preset/tokens/components/megamenu.ts @@ -0,0 +1,42 @@ +export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string => ` +/* ─── Размер иконок ─── */ +.p-megamenu-submenu-icon, +.p-megamenu-item-icon { + font-size: ${dt('megamenu.extend.iconSize')}; +} + +/* ─── Типографика пунктов меню ─── */ +.p-megamenu-item-label { + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; +} + +/* ─── Caption (описание) для кастомных пунктов ─── */ +.p-megamenu .megamenu-item-label { + display: flex; + flex-direction: column; + gap: ${dt('megamenu.extend.extItem.caption.gap')}; +} + +.p-megamenu .megamenu-item-caption { + font-size: ${dt('fonts.fontSize.200')}; + color: ${dt('megamenu.extend.extItem.caption.color')}; +} + +/* ─── Иконка мобильной кнопки ─── */ +.p-megamenu-mobile-button-icon { + font-size: ${dt('megamenu.extend.iconSize')}; +} + +/* ─── Размер ширины панели по контенту и позиционирование для активных пунктов горизонтального вида от начала пункта меню ─── */ +.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay, +.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + min-width: fit-content; + left: unset; +} + +/* ─── Позиционирование оверлея от пункта для вертикального вида ─── */ +.p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + left: 100%; +} +`; diff --git a/src/prime-preset/tokens/tokens.json b/src/prime-preset/tokens/tokens.json index 19d1ea5..c7c7178 100644 --- a/src/prime-preset/tokens/tokens.json +++ b/src/prime-preset/tokens/tokens.json @@ -630,7 +630,7 @@ }, "submenuLabel": { "padding": "{spacing.2x} {spacing.3x}", - "fontWeight": "{fonts.fontWeight.demibold}" + "fontWeight": "{fonts.fontWeight.regular}" }, "submenuIcon": { "size": "{fonts.fontSize.500}" @@ -3292,6 +3292,7 @@ "gap": "{navigation.list.gap}" }, "submenuLabel": { + "fontWeight": "{navigation.submenuLabel.fontWeight}", "padding": "{navigation.submenuLabel.padding}", "background": "{navigation.submenuLabel.background}", "color": "{navigation.submenuLabel.color}" diff --git a/src/stories/components/megamenu/examples/megamenu-custom.component.ts b/src/stories/components/megamenu/examples/megamenu-custom.component.ts new file mode 100644 index 0000000..7568a9f --- /dev/null +++ b/src/stories/components/megamenu/examples/megamenu-custom.component.ts @@ -0,0 +1,81 @@ +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component'; + +const template = ``; + +@Component({ + selector: 'app-megamenu-custom', + standalone: true, + imports: [MegaMenuComponent], + template, +}) +export class MegaMenuCustomComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'Components', + items: [ + { + label: 'Form', + description: 'Input, Select, Checkbox', + icon: 'ti ti-forms', + badge: 'New', + } as any, + { + label: 'Button', + description: 'Actions and triggers', + icon: 'ti ti-hand-click', + } as any, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { + label: 'Bar Chart', + description: 'Categorical comparison', + icon: 'ti ti-chart-bar', + } as any, + { + label: 'Line Chart', + description: 'Trends over time', + icon: 'ti ti-chart-line', + badge: 'Beta', + } as any, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { + label: 'Analytics', + description: 'Reports and dashboards', + icon: 'ti ti-chart-dots', + } as any, + { + label: 'CRM', + description: 'Customer management', + icon: 'ti ti-users', + badge: 'Pro', + } as any, + ], + }, + ], + ], + }, + ]; +} diff --git a/src/stories/components/megamenu/examples/megamenu-horizontal.component.ts b/src/stories/components/megamenu/examples/megamenu-horizontal.component.ts new file mode 100644 index 0000000..ce40470 --- /dev/null +++ b/src/stories/components/megamenu/examples/megamenu-horizontal.component.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component'; + +const template = ``; + +@Component({ + selector: 'app-megamenu-horizontal', + standalone: true, + imports: [MegaMenuComponent], + template, +}) +export class MegaMenuHorizontalComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + { label: 'Table', icon: 'ti ti-table' }, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { label: 'Bar Chart', icon: 'ti ti-chart-bar' }, + { label: 'Line Chart', icon: 'ti ti-chart-line' }, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { label: 'Analytics', icon: 'ti ti-chart-dots' }, + { label: 'CRM', icon: 'ti ti-users' }, + ], + }, + ], + ], + }, + { + label: 'Contact', + icon: 'ti ti-mail', + disabled: true, + }, + ]; +} diff --git a/src/stories/components/megamenu/examples/megamenu-vertical.component.ts b/src/stories/components/megamenu/examples/megamenu-vertical.component.ts new file mode 100644 index 0000000..6797839 --- /dev/null +++ b/src/stories/components/megamenu/examples/megamenu-vertical.component.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '../../../../lib/components/megamenu/megamenu.component'; + +const template = ``; + +@Component({ + selector: 'app-megamenu-vertical', + standalone: true, + imports: [MegaMenuComponent], + template, +}) +export class MegaMenuVerticalComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + { label: 'Table', icon: 'ti ti-table' }, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { label: 'Bar Chart', icon: 'ti ti-chart-bar' }, + { label: 'Line Chart', icon: 'ti ti-chart-line' }, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { label: 'Analytics', icon: 'ti ti-chart-dots' }, + { label: 'CRM', icon: 'ti ti-users' }, + ], + }, + ], + ], + }, + { + label: 'Contact', + icon: 'ti ti-mail', + disabled: true, + }, + ]; +} diff --git a/src/stories/components/megamenu/megamenu.stories.ts b/src/stories/components/megamenu/megamenu.stories.ts new file mode 100644 index 0000000..28a6014 --- /dev/null +++ b/src/stories/components/megamenu/megamenu.stories.ts @@ -0,0 +1,201 @@ +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; +import { MegaMenuComponent } from '../../../lib/components/megamenu/megamenu.component'; +import { MegaMenuHorizontalComponent } from './examples/megamenu-horizontal.component'; +import { MegaMenuVerticalComponent } from './examples/megamenu-vertical.component'; +import { MegaMenuCustomComponent } from './examples/megamenu-custom.component'; + +const meta: Meta = { + title: 'Components/Menu/MegaMenu', + component: MegaMenuComponent, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: `Расширенное меню с поддержкой многоколоночных подменю. Поддерживает горизонтальную и вертикальную ориентацию. + +\`\`\`typescript +import { MegaMenuComponent } from '@cdek-it/angular-ui-kit'; +\`\`\``, + }, + story: { + height: '300px', + }, + }, + designTokens: { prefix: '--p-megamenu' }, + }, + argTypes: { + model: { + control: false, + description: 'Массив пунктов меню.', + table: { + category: 'Props', + type: { summary: 'MegaMenuModel[]' }, + }, + }, + orientation: { + control: 'select', + options: ['horizontal', 'vertical'], + description: 'Ориентация меню.', + table: { + category: 'Props', + defaultValue: { summary: 'horizontal' }, + type: { summary: "'horizontal' | 'vertical'" }, + }, + }, + disabled: { + control: 'boolean', + description: 'Отключает взаимодействие с меню.', + table: { + category: 'Props', + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +// ── Horizontal ────────────────────────────────────────────────────────────── +export const Horizontal: Story = { + name: 'Horizontal', + decorators: [moduleMetadata({ imports: [MegaMenuHorizontalComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Горизонтальная ориентация (по умолчанию).', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; + +@Component({ + selector: 'app-example', + standalone: true, + imports: [MegaMenuComponent], + template: \`\`, +}) +export class ExampleComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + ], + }, + ], + ], + }, + { label: 'Contact', icon: 'ti ti-mail', disabled: true }, + ]; +}`, + }, + }, + }, +}; + +// ── Vertical ──────────────────────────────────────────────────────────────── +export const Vertical: Story = { + name: 'Vertical', + decorators: [moduleMetadata({ imports: [MegaMenuVerticalComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Вертикальная ориентация.', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; + +@Component({ + selector: 'app-example', + standalone: true, + imports: [MegaMenuComponent], + template: \`\`, +}) +export class ExampleComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + ], + }, + ], + ], + }, + ]; +}`, + }, + }, + }, +}; + +// ── Custom ────────────────────────────────────────────────────────────────── +export const Custom: Story = { + name: 'Custom', + decorators: [moduleMetadata({ imports: [MegaMenuCustomComponent] })], + render: () => ({ template: `` }), + parameters: { + docs: { + description: { + story: 'Пункты меню с описанием (description) и бейджами.', + }, + source: { + language: 'ts', + code: ` +import { Component } from '@angular/core'; +import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; + +@Component({ + selector: 'app-example', + standalone: true, + imports: [MegaMenuComponent], + template: \`\`, +}) +export class ExampleComponent { + items: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'Components', + items: [ + { + label: 'Form', + description: 'Input, Select, Checkbox', + icon: 'ti ti-forms', + badge: 'New', + }, + ], + }, + ], + ], + }, + ]; +}`, + }, + }, + }, +}; From a4de271dbc44499969b6260f6e9d9304545465a6 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Apr 2026 22:52:17 +0700 Subject: [PATCH 2/4] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=80=D0=B0?= =?UTF-8?q?=D0=B1=D0=BE=D1=82=D0=BE=D1=81=D0=BF=D0=BE=D1=81=D0=BE=D0=B1?= =?UTF-8?q?=D0=BD=D0=BE=D1=81=D1=82=D0=B8=20=D0=BF=D1=80=D0=BE=D0=BF=D1=81?= =?UTF-8?q?=D0=BE=D0=B2=20=D0=B2=20=D1=81=D1=82=D0=BE=D1=80=D0=B8=D1=81?= =?UTF-8?q?=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/megamenu/megamenu.stories.ts | 175 ++++++++++-------- 1 file changed, 99 insertions(+), 76 deletions(-) diff --git a/src/stories/components/megamenu/megamenu.stories.ts b/src/stories/components/megamenu/megamenu.stories.ts index 28a6014..531df82 100644 --- a/src/stories/components/megamenu/megamenu.stories.ts +++ b/src/stories/components/megamenu/megamenu.stories.ts @@ -1,13 +1,16 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; -import { MegaMenuComponent } from '../../../lib/components/megamenu/megamenu.component'; -import { MegaMenuHorizontalComponent } from './examples/megamenu-horizontal.component'; -import { MegaMenuVerticalComponent } from './examples/megamenu-vertical.component'; +import { MegaMenuComponent, MegaMenuModel } from '../../../lib/components/megamenu/megamenu.component'; import { MegaMenuCustomComponent } from './examples/megamenu-custom.component'; const meta: Meta = { title: 'Components/Menu/MegaMenu', component: MegaMenuComponent, tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [MegaMenuComponent], + }), + ], parameters: { docs: { description: { @@ -52,53 +55,102 @@ import { MegaMenuComponent } from '@cdek-it/angular-ui-kit'; }, }, }, + args: { + orientation: 'horizontal', + disabled: false, + }, }; export default meta; type Story = StoryObj; -// ── Horizontal ────────────────────────────────────────────────────────────── -export const Horizontal: Story = { - name: 'Horizontal', - decorators: [moduleMetadata({ imports: [MegaMenuHorizontalComponent] })], - render: () => ({ template: `` }), +const baseItems: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + { label: 'Table', icon: 'ti ti-table' }, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { label: 'Bar Chart', icon: 'ti ti-chart-bar' }, + { label: 'Line Chart', icon: 'ti ti-chart-line' }, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { label: 'Analytics', icon: 'ti ti-chart-dots' }, + { label: 'CRM', icon: 'ti ti-users' }, + ], + }, + ], + ], + }, + { + label: 'Contact', + icon: 'ti ti-mail', + disabled: true, + }, +]; + +const commonTemplate = ` + +`; + +// ── Default ────────────────────────────────────────────────────────────────── +export const Default: Story = { + name: 'Default', + render: (args) => ({ + props: { ...args, model: baseItems }, + template: commonTemplate, + }), parameters: { docs: { description: { - story: 'Горизонтальная ориентация (по умолчанию).', + story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.', }, source: { - language: 'ts', - code: ` -import { Component } from '@angular/core'; -import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; - -@Component({ - selector: 'app-example', - standalone: true, - imports: [MegaMenuComponent], - template: \`\`, -}) -export class ExampleComponent { - items: MegaMenuModel[] = [ - { - label: 'Products', - icon: 'ti ti-box', - items: [ - [ - { - label: 'UI Components', - items: [ - { label: 'Form', icon: 'ti ti-forms' }, - { label: 'Button', icon: 'ti ti-hand-click' }, - ], - }, - ], - ], + code: ``, + }, }, - { label: 'Contact', icon: 'ti ti-mail', disabled: true }, - ]; -}`, + }, +}; + +// ── Horizontal ────────────────────────────────────────────────────────────── +export const Horizontal: Story = { + render: (args) => ({ + props: { ...args, model: baseItems }, + template: commonTemplate, + }), + args: { orientation: 'horizontal' }, + parameters: { + docs: { + description: { story: 'Горизонтальная ориентация (по умолчанию).' }, + source: { + code: ``, }, }, }, @@ -106,45 +158,16 @@ export class ExampleComponent { // ── Vertical ──────────────────────────────────────────────────────────────── export const Vertical: Story = { - name: 'Vertical', - decorators: [moduleMetadata({ imports: [MegaMenuVerticalComponent] })], - render: () => ({ template: `` }), + render: (args) => ({ + props: { ...args, model: baseItems }, + template: commonTemplate, + }), + args: { orientation: 'vertical' }, parameters: { docs: { - description: { - story: 'Вертикальная ориентация.', - }, + description: { story: 'Вертикальная ориентация.' }, source: { - language: 'ts', - code: ` -import { Component } from '@angular/core'; -import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; - -@Component({ - selector: 'app-example', - standalone: true, - imports: [MegaMenuComponent], - template: \`\`, -}) -export class ExampleComponent { - items: MegaMenuModel[] = [ - { - label: 'Products', - icon: 'ti ti-box', - items: [ - [ - { - label: 'UI Components', - items: [ - { label: 'Form', icon: 'ti ti-forms' }, - { label: 'Button', icon: 'ti ti-hand-click' }, - ], - }, - ], - ], - }, - ]; -}`, + code: ``, }, }, }, @@ -152,10 +175,10 @@ export class ExampleComponent { // ── Custom ────────────────────────────────────────────────────────────────── export const Custom: Story = { - name: 'Custom', decorators: [moduleMetadata({ imports: [MegaMenuCustomComponent] })], render: () => ({ template: `` }), parameters: { + controls: { disable: true }, docs: { description: { story: 'Пункты меню с описанием (description) и бейджами.', From f9d2a928cd0574e0b5119bfa902de3e78f69b83d Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Apr 2026 22:54:28 +0700 Subject: [PATCH 3/4] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B8=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=BF=D1=81=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D1=81=D1=82?= =?UTF-8?q?=D0=BE=D1=80=D0=B8=D1=81=20Custom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/megamenu/megamenu.stories.ts | 112 ++++++++++++------ 1 file changed, 74 insertions(+), 38 deletions(-) diff --git a/src/stories/components/megamenu/megamenu.stories.ts b/src/stories/components/megamenu/megamenu.stories.ts index 531df82..b4bb833 100644 --- a/src/stories/components/megamenu/megamenu.stories.ts +++ b/src/stories/components/megamenu/megamenu.stories.ts @@ -1,6 +1,5 @@ import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { MegaMenuComponent, MegaMenuModel } from '../../../lib/components/megamenu/megamenu.component'; -import { MegaMenuCustomComponent } from './examples/megamenu-custom.component'; const meta: Meta = { title: 'Components/Menu/MegaMenu', @@ -174,50 +173,87 @@ export const Vertical: Story = { }; // ── Custom ────────────────────────────────────────────────────────────────── +const customItems: MegaMenuModel[] = [ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'Components', + items: [ + { + label: 'Form', + description: 'Input, Select, Checkbox', + icon: 'ti ti-forms', + badge: 'New', + } as any, + { + label: 'Button', + description: 'Actions and triggers', + icon: 'ti ti-hand-click', + } as any, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { + label: 'Bar Chart', + description: 'Categorical comparison', + icon: 'ti ti-chart-bar', + } as any, + { + label: 'Line Chart', + description: 'Trends over time', + icon: 'ti ti-chart-line', + badge: 'Beta', + } as any, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { + label: 'Analytics', + description: 'Reports and dashboards', + icon: 'ti ti-chart-dots', + } as any, + { + label: 'CRM', + description: 'Customer management', + icon: 'ti ti-users', + badge: 'Pro', + } as any, + ], + }, + ], + ], + }, +]; + export const Custom: Story = { - decorators: [moduleMetadata({ imports: [MegaMenuCustomComponent] })], - render: () => ({ template: `` }), + render: (args) => ({ + props: { ...args, model: customItems }, + template: commonTemplate, + }), parameters: { - controls: { disable: true }, docs: { description: { story: 'Пункты меню с описанием (description) и бейджами.', }, source: { - language: 'ts', - code: ` -import { Component } from '@angular/core'; -import { MegaMenuComponent, MegaMenuModel } from '@cdek-it/angular-ui-kit'; - -@Component({ - selector: 'app-example', - standalone: true, - imports: [MegaMenuComponent], - template: \`\`, -}) -export class ExampleComponent { - items: MegaMenuModel[] = [ - { - label: 'Products', - icon: 'ti ti-box', - items: [ - [ - { - label: 'Components', - items: [ - { - label: 'Form', - description: 'Input, Select, Checkbox', - icon: 'ti ti-forms', - badge: 'New', - }, - ], - }, - ], - ], - }, - ]; -}`, + code: ``, }, }, }, From 0bc043dcf54dc5c5c6e35abc9695bcb5d8b25b46 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Tue, 14 Apr 2026 23:00:21 +0700 Subject: [PATCH 4/4] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81:=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=B4-=D1=81=D0=BD=D0=B8=D0=BF=D0=BF=D0=B5=D1=82=D0=B0=20?= =?UTF-8?q?=D1=81=D0=BE=D0=B3=D0=BB=D0=B0=D1=81=D0=BD=D0=BE=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B8=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=BF=D1=81=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/megamenu/megamenu.stories.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/stories/components/megamenu/megamenu.stories.ts b/src/stories/components/megamenu/megamenu.stories.ts index b4bb833..b2a0123 100644 --- a/src/stories/components/megamenu/megamenu.stories.ts +++ b/src/stories/components/megamenu/megamenu.stories.ts @@ -122,18 +122,20 @@ const commonTemplate = ` // ── Default ────────────────────────────────────────────────────────────────── export const Default: Story = { name: 'Default', - render: (args) => ({ - props: { ...args, model: baseItems }, - template: commonTemplate, - }), + render: (args) => { + const parts: string[] = ['[model]="model"']; + + if (args.orientation && args.orientation !== 'horizontal') parts.push(`orientation="${args.orientation}"`); + if (args.disabled) parts.push(`[disabled]="true"`); + + const template = ``; + return { props: { ...args, model: baseItems }, template }; + }, parameters: { docs: { description: { story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.', }, - source: { - code: ``, - }, }, }, };