From fc043803b6ae5e4aac9fa6d87f48f0f80cbf279d Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Fri, 20 Mar 2026 19:08:42 +0700 Subject: [PATCH 1/9] =?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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prime/stories/Menu/MegaMenu/MegaMenu.mdx | 25 +++++ .../stories/Menu/MegaMenu/MegaMenu.stories.js | 92 +++++++++++++++++++ .../Menu/MegaMenu/MegaMenu.template.js | 57 ++++++++++++ .../prime/theme3.0/components/css/megamenu.ts | 29 ++++++ src/plugins/prime/theme3.0/css.ts | 2 + 5 files changed, 205 insertions(+) create mode 100644 src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx create mode 100644 src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js create mode 100644 src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js create mode 100644 src/plugins/prime/theme3.0/components/css/megamenu.ts diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx new file mode 100644 index 00000000..c624210a --- /dev/null +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx @@ -0,0 +1,25 @@ +import { Meta, Canvas, Title, Description } from '@storybook/addon-docs/blocks'; +import * as MegaMenuStories from './MegaMenu.stories'; + + + + +<Description /> + +```javascript +import { MegaMenu } from 'primevue'; +``` + +## Варианты использования + +### Horizontal + +Горизонтальная ориентация MegaMenu с выпадающими многоколоночными подменю. + +<Canvas of={MegaMenuStories.Horizontal} /> + +### Vertical + +Вертикальная ориентация MegaMenu. + +<Canvas of={MegaMenuStories.Vertical} /> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js new file mode 100644 index 00000000..8c8faa50 --- /dev/null +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -0,0 +1,92 @@ +import { HorizontalTemplate, VerticalTemplate } from './MegaMenu.template'; + +export default { + title: 'Prime/Menu/MegaMenu', + parameters: { + docs: { + description: { + component: + 'Компонент для создания многоколоночного меню с группировкой пунктов в подменю, поддерживает горизонтальную и вертикальную ориентацию.', + }, + }, + designTokens: { prefix: '--p-megamenu' }, + }, +}; + +const sourceItems = `[ + { + label: 'MenuItem', + icon: 'ti ti-user', + items: [ + [ + { + label: 'Submenu 1', + items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + }, + ], + [ + { + label: 'Submenu 2', + items: [ + { label: 'Item 2.1', icon: 'ti ti-file' }, + { label: 'Item 2.2', icon: 'ti ti-file' }, + ], + }, + ], + ], + }, + { + label: 'MenuItem', + icon: 'ti ti-user', + items: [ + [ + { + label: 'Submenu 1', + items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + }, + ], + ], + }, +]`; + +export const Horizontal = { + render: HorizontalTemplate, + parameters: { + docs: { + source: { + code: ` +<template> + <MegaMenu :model="items" /> +</template> + +<script setup> +import { ref } from 'vue'; + +const items = ref(${sourceItems}); +</script> + `.trim(), + }, + }, + }, +}; + +export const Vertical = { + render: VerticalTemplate, + parameters: { + docs: { + source: { + code: ` +<template> + <MegaMenu :model="items" orientation="vertical" /> +</template> + +<script setup> +import { ref } from 'vue'; + +const items = ref(${sourceItems}); +</script> + `.trim(), + }, + }, + }, +}; diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js new file mode 100644 index 00000000..3bb2a6e8 --- /dev/null +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js @@ -0,0 +1,57 @@ +import { MegaMenu } from 'primevue'; + +const items = [ + { + label: 'MenuItem', + icon: 'ti ti-user', + items: [ + [ + { + label: 'Submenu 1', + items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + }, + ], + [ + { + label: 'Submenu 2', + items: [ + { label: 'Item 2.1', icon: 'ti ti-file' }, + { label: 'Item 2.2', icon: 'ti ti-file' }, + ], + }, + ], + ], + }, + { + label: 'MenuItem', + icon: 'ti ti-user', + items: [ + [ + { + label: 'Submenu 1', + items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + }, + ], + ], + }, +]; + +export const HorizontalTemplate = () => ({ + components: { MegaMenu }, + setup() { + return { items }; + }, + template: ` + <MegaMenu :model="items" /> + `, +}); + +export const VerticalTemplate = () => ({ + components: { MegaMenu }, + setup() { + return { items }; + }, + template: ` + <MegaMenu :model="items" orientation="vertical" /> + `, +}); diff --git a/src/plugins/prime/theme3.0/components/css/megamenu.ts b/src/plugins/prime/theme3.0/components/css/megamenu.ts new file mode 100644 index 00000000..d068895f --- /dev/null +++ b/src/plugins/prime/theme3.0/components/css/megamenu.ts @@ -0,0 +1,29 @@ +const css = ({ dt }: { dt: (token: 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.base')}; + font-weight: ${dt('fonts.fontWeight.regular')}; +} + +.p-megamenu-submenu-label { + display: flex; + flex-direction: column; + gap: ${dt('megamenu.extend.extItem.caption.gap')}; +} + +.p-megamenu-item-caption { + font-size: ${dt('fonts.fontSize.sm')}; + color: ${dt('megamenu.extend.extItem.caption.color')}; +} + +.p-megamenu-mobile-button-icon { + font-size: ${dt('megamenu.extend.iconSize')}; +} +`; + +export default css; diff --git a/src/plugins/prime/theme3.0/css.ts b/src/plugins/prime/theme3.0/css.ts index f540e358..be3a5d5a 100644 --- a/src/plugins/prime/theme3.0/css.ts +++ b/src/plugins/prime/theme3.0/css.ts @@ -4,6 +4,7 @@ import breadcrumbCss from './components/css/breadcrumb'; import buttonCss from './components/css/button'; import checkboxCss from './components/css/checkbox'; import dialogCss from './components/css/dialog'; +import megamenuCss from './components/css/megamenu'; import dividerCss from './components/css/divider'; import drawerCss from './components/css/drawer'; import progressbarCss from './components/css/progressbar'; @@ -18,6 +19,7 @@ const css = ({ dt }: { dt: (token: string) => string }) => ` ${buttonCss({ dt })} ${checkboxCss({ dt })} ${dialogCss({ dt })} + ${megamenuCss({ dt })} ${dividerCss({ dt })} ${drawerCss({ dt })} ${progressbarCss({ dt })} From f04d31389e8fb184aeac56f01a219ff3cb29fedc Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Fri, 20 Mar 2026 22:47:13 +0700 Subject: [PATCH 2/9] =?UTF-8?q?megamenu:=20=D0=BA=D0=B0=D1=81=D1=82=D0=BE?= =?UTF-8?q?=D0=BC=D0=BD=D1=8B=D0=B9=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=20?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prime/stories/Menu/MegaMenu/MegaMenu.mdx | 9 +- .../stories/Menu/MegaMenu/MegaMenu.stories.js | 144 +++++++++++------ .../Menu/MegaMenu/MegaMenu.template.js | 151 +++++++++++++++--- .../prime/theme3.0/components/css/megamenu.ts | 4 +- 4 files changed, 236 insertions(+), 72 deletions(-) diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx index c624210a..d9d7d2e7 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx @@ -4,6 +4,7 @@ import * as MegaMenuStories from './MegaMenu.stories'; <Meta of={MegaMenuStories} /> <Title /> + <Description /> ```javascript @@ -14,12 +15,12 @@ import { MegaMenu } from 'primevue'; ### Horizontal -Горизонтальная ориентация MegaMenu с выпадающими многоколоночными подменю. - <Canvas of={MegaMenuStories.Horizontal} /> ### Vertical -Вертикальная ориентация MegaMenu. - <Canvas of={MegaMenuStories.Vertical} /> + +### Кастомный шаблон + +<Canvas of={MegaMenuStories.Custom} /> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js index 8c8faa50..17d7455b 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -1,4 +1,8 @@ -import { HorizontalTemplate, VerticalTemplate } from './MegaMenu.template'; +import { + HorizontalTemplate, + VerticalTemplate, + CustomTemplate, +} from './MegaMenu.template'; export default { title: 'Prime/Menu/MegaMenu', @@ -6,86 +10,136 @@ export default { docs: { description: { component: - 'Компонент для создания многоколоночного меню с группировкой пунктов в подменю, поддерживает горизонтальную и вертикальную ориентацию.', + 'Расширенное меню с поддержкой многоколоночных подменю. Поддерживает горизонтальную и вертикальную ориентацию.', }, }, - designTokens: { prefix: '--p-megamenu' }, + designTokens: { + prefix: '--p-megamenu', + }, }, }; -const sourceItems = `[ +export const Horizontal = { + render: HorizontalTemplate.bind({}), + parameters: { + docs: { + source: { + code: `<script setup> +import { ref } from 'vue'; + +const items = ref([ { - label: 'MenuItem', - icon: 'ti ti-user', + label: 'Products', + icon: 'ti ti-box', items: [ [ { - label: 'Submenu 1', - items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], - }, - ], - [ - { - label: 'Submenu 2', + label: 'UI Components', items: [ - { label: 'Item 2.1', icon: 'ti ti-file' }, - { label: 'Item 2.2', icon: 'ti ti-file' }, + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, ], }, ], ], }, + { label: 'Contact', icon: 'ti ti-mail', disabled: true }, +]); +</script> + +<template> + <MegaMenu :model="items" /> +</template>`, + }, + }, + }, +}; + +export const Vertical = { + render: VerticalTemplate.bind({}), + parameters: { + docs: { + source: { + code: `<script setup> +import { ref } from 'vue'; + +const items = ref([ { - label: 'MenuItem', - icon: 'ti ti-user', + label: 'Products', + icon: 'ti ti-box', items: [ [ { - label: 'Submenu 1', - items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + ], }, ], ], }, -]`; +]); +</script> -export const Horizontal = { - render: HorizontalTemplate, - parameters: { - docs: { - source: { - code: ` <template> - <MegaMenu :model="items" /> -</template> - -<script setup> -import { ref } from 'vue'; - -const items = ref(${sourceItems}); -</script> - `.trim(), + <MegaMenu :model="items" orientation="vertical" /> +</template>`, }, }, }, }; -export const Vertical = { - render: VerticalTemplate, +export const Custom = { + render: CustomTemplate.bind({}), parameters: { docs: { source: { - code: ` -<template> - <MegaMenu :model="items" orientation="vertical" /> -</template> - -<script setup> + code: `<script setup> import { ref } from 'vue'; -const items = ref(${sourceItems}); +const items = ref([ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'Components', + items: [ + { + label: 'Form', + description: 'Input, Select, Checkbox', + icon: 'ti ti-forms', + badge: 'New', + }, + { + label: 'Button', + description: 'Actions and triggers', + icon: 'ti ti-hand-click', + }, + ], + }, + ], + ], + }, +]); </script> - `.trim(), + +<template> + <MegaMenu :model="items"> + <template #item="{ item, props }"> + <a v-bind="props.action" class="p-megamenu-item-link"> + <span v-if="item.icon" :class="['p-megamenu-item-icon', item.icon]" /> + <div class="megamenu-item-label"> + <span class="p-megamenu-item-label">{{ item.label }}</span> + <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> + </div> + <Badge v-if="item.badge" :value="item.badge" /> + </a> + </template> + </MegaMenu> +</template>`, }, }, }, diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js index 3bb2a6e8..249f5c4c 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js @@ -1,57 +1,166 @@ -import { MegaMenu } from 'primevue'; +import { MegaMenu, Badge } from 'primevue'; +import { ref } from 'vue'; -const items = [ +const baseItems = [ { - label: 'MenuItem', - icon: 'ti ti-user', + label: 'Products', + icon: 'ti ti-box', items: [ [ { - label: 'Submenu 1', - items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + label: 'UI Components', + items: [ + { label: 'Form', icon: 'ti ti-forms' }, + { label: 'Button', icon: 'ti ti-hand-click' }, + { label: 'Table', icon: 'ti ti-table' }, + ], }, ], [ { - label: 'Submenu 2', + label: 'Charts', items: [ - { label: 'Item 2.1', icon: 'ti ti-file' }, - { label: 'Item 2.2', icon: 'ti ti-file' }, + { label: 'Bar Chart', icon: 'ti ti-chart-bar' }, + { label: 'Line Chart', icon: 'ti ti-chart-line' }, ], }, ], ], }, { - label: 'MenuItem', - icon: 'ti ti-user', + label: 'Solutions', + icon: 'ti ti-bulb', items: [ [ { - label: 'Submenu 1', - items: [{ label: 'Item 1.1' }, { label: 'Item 1.2' }], + label: 'Business', + items: [ + { label: 'Analytics', icon: 'ti ti-chart-dots' }, + { label: 'CRM', icon: 'ti ti-users' }, + ], }, ], ], }, + { + label: 'Contact', + icon: 'ti ti-mail', + disabled: true, + }, ]; -export const HorizontalTemplate = () => ({ +export const HorizontalTemplate = (args) => ({ components: { MegaMenu }, setup() { - return { items }; + const items = ref(baseItems); + + return { args, items }; }, - template: ` - <MegaMenu :model="items" /> - `, + template: `<MegaMenu :model="items" v-bind="args" />`, }); -export const VerticalTemplate = () => ({ +export const VerticalTemplate = (args) => ({ components: { MegaMenu }, setup() { - return { items }; + const items = ref(baseItems); + + return { args, items }; + }, + template: `<MegaMenu :model="items" orientation="vertical" v-bind="args" />`, +}); + +export const CustomTemplate = (args) => ({ + components: { MegaMenu, Badge }, + setup() { + const items = ref([ + { + label: 'Products', + icon: 'ti ti-box', + items: [ + [ + { + label: 'Components', + items: [ + { + label: 'Form', + description: 'Input, Select, Checkbox', + icon: 'ti ti-forms', + badge: 'New', + }, + { + label: 'Button', + description: 'Actions and triggers', + icon: 'ti ti-hand-click', + }, + { + label: 'Table', + description: 'Data grid and sorting', + icon: 'ti ti-table', + badge: '12', + }, + ], + }, + ], + [ + { + label: 'Charts', + items: [ + { + label: 'Bar Chart', + description: 'Categorical comparison', + icon: 'ti ti-chart-bar', + }, + { + label: 'Line Chart', + description: 'Trends over time', + icon: 'ti ti-chart-line', + badge: 'Beta', + }, + ], + }, + ], + ], + }, + { + label: 'Solutions', + icon: 'ti ti-bulb', + items: [ + [ + { + label: 'Business', + items: [ + { + label: 'Analytics', + description: 'Reports and dashboards', + icon: 'ti ti-chart-dots', + }, + { + label: 'CRM', + description: 'Customer management', + icon: 'ti ti-users', + badge: 'Pro', + }, + ], + }, + ], + ], + }, + ]); + + return { args, items }; }, template: ` - <MegaMenu :model="items" orientation="vertical" /> + <MegaMenu :model="items" v-bind="args"> + <template #item="{ item, props }"> + <a v-bind="props.action" class="p-megamenu-item-link"> + <span v-if="item.icon" :class="['p-megamenu-item-icon', item.icon]" /> + <div class="megamenu-item-label"> + <span class="p-megamenu-item-label">{{ item.label }}</span> + <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> + </div> + <Badge v-if="item.badge" :value="item.badge" /> + </a> + </template> + </MegaMenu> `, }); diff --git a/src/plugins/prime/theme3.0/components/css/megamenu.ts b/src/plugins/prime/theme3.0/components/css/megamenu.ts index d068895f..1610c14b 100644 --- a/src/plugins/prime/theme3.0/components/css/megamenu.ts +++ b/src/plugins/prime/theme3.0/components/css/megamenu.ts @@ -10,13 +10,13 @@ const css = ({ dt }: { dt: (token: string) => string }) => ` font-weight: ${dt('fonts.fontWeight.regular')}; } -.p-megamenu-submenu-label { +.p-megamenu .megamenu-item-label { display: flex; flex-direction: column; gap: ${dt('megamenu.extend.extItem.caption.gap')}; } -.p-megamenu-item-caption { +.p-megamenu .megamenu-item-caption { font-size: ${dt('fonts.fontSize.sm')}; color: ${dt('megamenu.extend.extItem.caption.color')}; } From 0f03b5640e33619e039860d4c054a31a69541240 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Thu, 26 Mar 2026 22:20:15 +0700 Subject: [PATCH 3/9] =?UTF-8?q?MegaMenu:=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5?= =?UTF-8?q?=D1=80=20=D0=BF=D1=80=D0=B5=D0=B2=D1=8C=D1=8E=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20Docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-head.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index d1ea29f5..6afb5505 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -41,6 +41,13 @@ html { font-size: 87.5%; } + /* Specific height for Menu components previews in Docs */ + .docs-story.css-kdwx3d:has(.p-menubar), + .css-1cvjpgl:has(.p-menubar), + .docs-story.css-kdwx3d:has(.p-megamenu), + .css-1cvjpgl:has(.p-megamenu) { + min-height: 300px; + } </style> <script> From fd3f059646d5f58469e8c0b3360d662ebcf316b2 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Fri, 3 Apr 2026 22:27:51 +0700 Subject: [PATCH 4/9] =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=20?= =?UTF-8?q?=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D1=8B=20=D0=BF=D0=B0=D0=BD=D0=B5?= =?UTF-8?q?=D0=BB=D0=B8=20=D0=BF=D0=BE=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5?= =?UTF-8?q?=D0=BD=D1=82=D1=83;=20=D0=BF=D0=BE=D0=B7=D0=B8=D1=86=D0=B8?= =?UTF-8?q?=D0=BE=D0=BD=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B0=D0=BA=D1=82=D0=B8=D0=B2=D0=BD=D1=8B?= =?UTF-8?q?=D1=85=20=D0=BF=D1=83=D0=BD=D0=BA=D1=82=D0=BE=D0=B2=20=D0=B3?= =?UTF-8?q?=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD=D1=82=D0=B0=D0=BB=D1=8C?= =?UTF-8?q?=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=B2=D0=B8=D0=B4=D0=B0=20=D0=BE?= =?UTF-8?q?=D1=82=20=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D0=B0=20=D0=BF=D1=83?= =?UTF-8?q?=D0=BD=D0=BA=D1=82=D0=B0=20=D0=BC=D0=B5=D0=BD=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prime/stories/Menu/MegaMenu/MegaMenu.stories.js | 1 + .../prime/stories/Menu/MegaMenu/MegaMenu.template.js | 7 +------ src/plugins/prime/theme3.0/components/css/megamenu.ts | 8 ++++++++ 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js index 17d7455b..6f14da7d 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -136,6 +136,7 @@ const items = ref([ <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> </div> <Badge v-if="item.badge" :value="item.badge" /> + <svg v-if="item.items" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-megamenu-submenu-icon" aria-hidden="true" data-pc-section="submenuicon"><path d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z" fill="currentColor"></path></svg> </a> </template> </MegaMenu> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js index 249f5c4c..c5a2f1e2 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js @@ -92,12 +92,6 @@ export const CustomTemplate = (args) => ({ description: 'Actions and triggers', icon: 'ti ti-hand-click', }, - { - label: 'Table', - description: 'Data grid and sorting', - icon: 'ti ti-table', - badge: '12', - }, ], }, ], @@ -159,6 +153,7 @@ export const CustomTemplate = (args) => ({ <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> </div> <Badge v-if="item.badge" :value="item.badge" /> + <svg v-if="item.items" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-megamenu-submenu-icon" aria-hidden="true" data-pc-section="submenuicon"><path d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z" fill="currentColor"></path></svg> </a> </template> </MegaMenu> diff --git a/src/plugins/prime/theme3.0/components/css/megamenu.ts b/src/plugins/prime/theme3.0/components/css/megamenu.ts index 1610c14b..de856443 100644 --- a/src/plugins/prime/theme3.0/components/css/megamenu.ts +++ b/src/plugins/prime/theme3.0/components/css/megamenu.ts @@ -24,6 +24,14 @@ const css = ({ dt }: { dt: (token: string) => string }) => ` .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; +} `; export default css; From 13794e1105858b4aad33b8dd7d98c4bc9821e0cb Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Mon, 6 Apr 2026 16:48:05 +0700 Subject: [PATCH 5/9] =?UTF-8?q?=D0=B2=D1=8B=D1=81=D0=BE=D1=82=D0=B0=20?= =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80=D0=B5=D0=B2=D1=8C=D1=8E=20?= =?UTF-8?q?=D1=87=D0=B5=D1=80=D0=B5=D0=B7=20decorators?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-head.html | 4 +--- .../prime/stories/Menu/MegaMenu/MegaMenu.stories.js | 7 +++++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 6afb5505..30f1cc64 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -43,9 +43,7 @@ } /* Specific height for Menu components previews in Docs */ .docs-story.css-kdwx3d:has(.p-menubar), - .css-1cvjpgl:has(.p-menubar), - .docs-story.css-kdwx3d:has(.p-megamenu), - .css-1cvjpgl:has(.p-megamenu) { + .css-1cvjpgl:has(.p-menubar) { min-height: 300px; } </style> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js index 6f14da7d..69f8eb45 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -19,8 +19,13 @@ export default { }, }; +const heightDecorator = () => ({ + template: '<div style="min-height: 300px;"><story /></div>', +}); + export const Horizontal = { render: HorizontalTemplate.bind({}), + decorators: [heightDecorator], parameters: { docs: { source: { @@ -57,6 +62,7 @@ const items = ref([ export const Vertical = { render: VerticalTemplate.bind({}), + decorators: [heightDecorator], parameters: { docs: { source: { @@ -92,6 +98,7 @@ const items = ref([ export const Custom = { render: CustomTemplate.bind({}), + decorators: [heightDecorator], parameters: { docs: { source: { From e74dc00cd9c5ef1a3a61d1eb44a88954ad324299 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Mon, 6 Apr 2026 16:51:30 +0700 Subject: [PATCH 6/9] =?UTF-8?q?=D0=B8=D0=BD=D0=BB=D0=B0=D0=B9=D0=BD=20SVG?= =?UTF-8?q?=20=D0=B7=D0=B0=D0=BC=D0=B5=D0=BD=D1=91=D0=BD=20=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B8=D0=BC=D0=BF=D0=BE=D1=80=D1=82=20=D0=B8=D0=B7=20tabler?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js | 2 +- src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js index 69f8eb45..74c6be2b 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -143,7 +143,7 @@ const items = ref([ <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> </div> <Badge v-if="item.badge" :value="item.badge" /> - <svg v-if="item.items" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-megamenu-submenu-icon" aria-hidden="true" data-pc-section="submenuicon"><path d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z" fill="currentColor"></path></svg> + <span v-if="item.items" class="p-megamenu-submenu-icon ti ti-chevron-down" /> </a> </template> </MegaMenu> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js index c5a2f1e2..987eb1d3 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js @@ -153,7 +153,7 @@ export const CustomTemplate = (args) => ({ <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> </div> <Badge v-if="item.badge" :value="item.badge" /> - <svg v-if="item.items" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="p-icon p-megamenu-submenu-icon" aria-hidden="true" data-pc-section="submenuicon"><path d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z" fill="currentColor"></path></svg> + <span v-if="item.items" class="p-megamenu-submenu-icon ti ti-chevron-down" /> </a> </template> </MegaMenu> From f10e1a4d3d3d767a122c64b4a6a80f383cb631cd Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Mon, 6 Apr 2026 17:00:38 +0700 Subject: [PATCH 7/9] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=B7=D0=B8=D1=86=D0=B8=D0=BE=D0=BD=D0=B8=D1=80=D0=BE=D0=B2?= =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D0=B5?= =?UTF-8?q?=D1=80=D1=82=D0=B8=D0=BA=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3?= =?UTF-8?q?=D0=BE=20=D0=B2=D0=B8=D0=B4=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plugins/prime/theme3.0/components/css/megamenu.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/plugins/prime/theme3.0/components/css/megamenu.ts b/src/plugins/prime/theme3.0/components/css/megamenu.ts index de856443..3a2ed2c5 100644 --- a/src/plugins/prime/theme3.0/components/css/megamenu.ts +++ b/src/plugins/prime/theme3.0/components/css/megamenu.ts @@ -32,6 +32,11 @@ const css = ({ dt }: { dt: (token: string) => string }) => ` min-width: fit-content; left: unset; } + +/* Позиционирование оверлея от пункта для вертикального вида */ +.p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay { + left: 100%; +} `; export default css; From 361142c0324cefe689c2a3e4da5253a80b9e2e26 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Tue, 21 Apr 2026 23:01:22 +0700 Subject: [PATCH 8/9] =?UTF-8?q?megamenu:=20MegaMenuItem.vue,=20=D1=83?= =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=BD=D1=8B=20emotion-=D1=81=D0=B5=D0=BB?= =?UTF-8?q?=D0=B5=D0=BA=D1=82=D0=BE=D1=80=D1=8B,=20=D0=BA=D0=B0=D1=81?= =?UTF-8?q?=D1=82=D0=BE=D0=BC=D0=BD=D1=8B=D0=B5=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=20=D0=B8=D0=B7=20megamenu.ts,=20decorators=20=E2=86=92?= =?UTF-8?q?=20story.height?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview-head.html | 33 ++++---------- .../stories/Menu/MegaMenu/MegaMenu.stories.js | 19 ++------ .../Menu/MegaMenu/MegaMenu.template.js | 15 ++----- .../stories/Menu/MegaMenu/MegaMenuItem.vue | 44 +++++++++++++++++++ .../prime/theme3.0/components/css/megamenu.ts | 11 ----- 5 files changed, 59 insertions(+), 63 deletions(-) create mode 100644 src/plugins/prime/stories/Menu/MegaMenu/MegaMenuItem.vue diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 30f1cc64..5ac53501 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,35 +1,23 @@ -<!-- Недостающие шрифты для старого дизайна --> -<link rel="preconnect" href="https://fonts.googleapis.com" /> -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link - href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" + href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" /> - -<!-- Шрифт для блоков кода --> <link - href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" - rel="stylesheet" + rel="preconnect" + href="https://fonts.googleapis.com" /> - -<link rel="preconnect" href="https://public-static.cdek.ru" crossorigin /> <link - rel="stylesheet" - href="https://public-static.cdek.ru/common/icons/v3.30.0/tabler-icons.min.css" + rel="preconnect" + href="https://fonts.gstatic.com" + crossorigin /> <link rel="stylesheet" - href="https://public-static.cdek.ru/common/typography/v3.0.1/typography.min.css" + href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" /> <link rel="stylesheet" - href="https://public-static.cdek.ru/common/fonts/roboto/v48/fonts.css" -/> - -<!-- Шрифты для DS 3.0 --> -<link - rel="stylesheet" - href="https://public-static.cdek.ru/common/fonts/base/v1/styles.min.css" + href="https://public-static.cdek.ru/common/fonts/sf-pro-text/v1/styles.min.css" /> <link rel="stylesheet" @@ -41,11 +29,6 @@ html { font-size: 87.5%; } - /* Specific height for Menu components previews in Docs */ - .docs-story.css-kdwx3d:has(.p-menubar), - .css-1cvjpgl:has(.p-menubar) { - min-height: 300px; - } </style> <script> diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js index 74c6be2b..d7b79963 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js @@ -12,6 +12,7 @@ export default { component: 'Расширенное меню с поддержкой многоколоночных подменю. Поддерживает горизонтальную и вертикальную ориентацию.', }, + story: { height: '300px' }, }, designTokens: { prefix: '--p-megamenu', @@ -19,13 +20,8 @@ export default { }, }; -const heightDecorator = () => ({ - template: '<div style="min-height: 300px;"><story /></div>', -}); - export const Horizontal = { render: HorizontalTemplate.bind({}), - decorators: [heightDecorator], parameters: { docs: { source: { @@ -62,7 +58,6 @@ const items = ref([ export const Vertical = { render: VerticalTemplate.bind({}), - decorators: [heightDecorator], parameters: { docs: { source: { @@ -98,12 +93,12 @@ const items = ref([ export const Custom = { render: CustomTemplate.bind({}), - decorators: [heightDecorator], parameters: { docs: { source: { code: `<script setup> import { ref } from 'vue'; +import MegaMenuItem from './MegaMenuItem.vue'; const items = ref([ { @@ -136,15 +131,7 @@ const items = ref([ <template> <MegaMenu :model="items"> <template #item="{ item, props }"> - <a v-bind="props.action" class="p-megamenu-item-link"> - <span v-if="item.icon" :class="['p-megamenu-item-icon', item.icon]" /> - <div class="megamenu-item-label"> - <span class="p-megamenu-item-label">{{ item.label }}</span> - <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> - </div> - <Badge v-if="item.badge" :value="item.badge" /> - <span v-if="item.items" class="p-megamenu-submenu-icon ti ti-chevron-down" /> - </a> + <MegaMenuItem :item="item" :action-props="props.action" /> </template> </MegaMenu> </template>`, diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js index 987eb1d3..16572862 100644 --- a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js @@ -1,5 +1,6 @@ -import { MegaMenu, Badge } from 'primevue'; +import { MegaMenu } from 'primevue'; import { ref } from 'vue'; +import MegaMenuItem from './MegaMenuItem.vue'; const baseItems = [ { @@ -70,7 +71,7 @@ export const VerticalTemplate = (args) => ({ }); export const CustomTemplate = (args) => ({ - components: { MegaMenu, Badge }, + components: { MegaMenu, MegaMenuItem }, setup() { const items = ref([ { @@ -146,15 +147,7 @@ export const CustomTemplate = (args) => ({ template: ` <MegaMenu :model="items" v-bind="args"> <template #item="{ item, props }"> - <a v-bind="props.action" class="p-megamenu-item-link"> - <span v-if="item.icon" :class="['p-megamenu-item-icon', item.icon]" /> - <div class="megamenu-item-label"> - <span class="p-megamenu-item-label">{{ item.label }}</span> - <small v-if="item.description" class="megamenu-item-caption">{{ item.description }}</small> - </div> - <Badge v-if="item.badge" :value="item.badge" /> - <span v-if="item.items" class="p-megamenu-submenu-icon ti ti-chevron-down" /> - </a> + <MegaMenuItem :item="item" :action-props="props.action" /> </template> </MegaMenu> `, diff --git a/src/plugins/prime/stories/Menu/MegaMenu/MegaMenuItem.vue b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenuItem.vue new file mode 100644 index 00000000..d4bfeb37 --- /dev/null +++ b/src/plugins/prime/stories/Menu/MegaMenu/MegaMenuItem.vue @@ -0,0 +1,44 @@ +<script setup lang="ts"> +import { Badge } from 'primevue'; + +defineProps({ + item: { + type: Object, + required: true, + }, + actionProps: { + type: Object, + default: () => ({}), + }, +}); +</script> + +<template> + <a v-bind="actionProps" class="p-megamenu-item-link"> + <span v-if="item.icon" :class="['p-megamenu-item-icon', item.icon]" /> + <div class="megamenu-item-label"> + <span class="p-megamenu-item-label">{{ item.label }}</span> + <small v-if="item.description" class="megamenu-item-caption">{{ + item.description + }}</small> + </div> + <Badge v-if="item.badge" :value="item.badge" /> + <span + v-if="item.items" + class="p-megamenu-submenu-icon ti ti-chevron-down" + /> + </a> +</template> + +<style scoped> +.megamenu-item-label { + display: flex; + flex-direction: column; + gap: var(--p-megamenu-extend-ext-item-caption-gap); +} + +.megamenu-item-caption { + font-size: var(--p-fonts-font-size-sm); + color: var(--p-megamenu-extend-ext-item-caption-color); +} +</style> diff --git a/src/plugins/prime/theme3.0/components/css/megamenu.ts b/src/plugins/prime/theme3.0/components/css/megamenu.ts index 3a2ed2c5..06e5adc4 100644 --- a/src/plugins/prime/theme3.0/components/css/megamenu.ts +++ b/src/plugins/prime/theme3.0/components/css/megamenu.ts @@ -10,17 +10,6 @@ const css = ({ dt }: { dt: (token: string) => string }) => ` font-weight: ${dt('fonts.fontWeight.regular')}; } -.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.sm')}; - color: ${dt('megamenu.extend.extItem.caption.color')}; -} - .p-megamenu-mobile-button-icon { font-size: ${dt('megamenu.extend.iconSize')}; } From 5b1e996dd8385874f4c829d9faa0947715aa7dc1 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin <danielooneilie@gmail.com> Date: Tue, 21 Apr 2026 23:04:55 +0700 Subject: [PATCH 9/9] =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=91?= =?UTF-8?q?=D0=BD=20.gitignore?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 31fe48f6..45f18911 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,7 @@ coverage .npmrc storybook-static + +.claude/* + +tsconfig.app.tsbuildinfo \ No newline at end of file