megamenu: стилизация, сторисы

.gitignore

@@ -31,3 +31,7 @@ coverage
 .npmrc
 
 storybook-static
+
+.claude/*
+
+tsconfig.app.tsbuildinfo

.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"
-/>
-
-<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.googleapis.com"
 />
 <link
-  rel="stylesheet"
-  href="https://public-static.cdek.ru/common/typography/v3.0.1/typography.min.css"
+  rel="preconnect"
+  href="https://fonts.gstatic.com"
+  crossorigin
 />
 <link
   rel="stylesheet"
-  href="https://public-static.cdek.ru/common/fonts/roboto/v48/fonts.css"
+  href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
 />
-
-<!-- Шрифты для 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"

src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas, Title, Description } from '@storybook/addon-docs/blocks';
+import * as MegaMenuStories from './MegaMenu.stories';
+
+<Meta of={MegaMenuStories} />
+
+<Title />
+
+<Description />
+
+```javascript
+import { MegaMenu } from 'primevue';
+```
+
+## Варианты использования
+
+### Horizontal
+
+<Canvas of={MegaMenuStories.Horizontal} />
+
+### Vertical
+
+<Canvas of={MegaMenuStories.Vertical} />
+
+### Кастомный шаблон
+
+<Canvas of={MegaMenuStories.Custom} />

src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.stories.js

@@ -0,0 +1,141 @@
+import {
+  HorizontalTemplate,
+  VerticalTemplate,
+  CustomTemplate,
+} from './MegaMenu.template';
+
+export default {
+  title: 'Prime/Menu/MegaMenu',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Расширенное меню с поддержкой многоколоночных подменю. Поддерживает горизонтальную и вертикальную ориентацию.',
+      },
+      story: { height: '300px' },
+    },
+    designTokens: {
+      prefix: '--p-megamenu',
+    },
+  },
+};
+
+export const Horizontal = {
+  render: HorizontalTemplate.bind({}),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+  {
+    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 },
+]);
+</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: 'Products',
+    icon: 'ti ti-box',
+    items: [
+      [
+        {
+          label: 'UI Components',
+          items: [
+            { label: 'Form', icon: 'ti ti-forms' },
+            { label: 'Button', icon: 'ti ti-hand-click' },
+          ],
+        },
+      ],
+    ],
+  },
+]);
+</script>
+
+<template>
+  <MegaMenu :model="items" orientation="vertical" />
+</template>`,
+      },
+    },
+  },
+};
+
+export const Custom = {
+  render: CustomTemplate.bind({}),
+  parameters: {
+    docs: {
+      source: {
+        code: `<script setup>
+import { ref } from 'vue';
+import MegaMenuItem from './MegaMenuItem.vue';
+
+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>
+
+<template>
+  <MegaMenu :model="items">
+    <template #item="{ item, props }">
+      <MegaMenuItem :item="item" :action-props="props.action" />
+    </template>
+  </MegaMenu>
+</template>`,
+      },
+    },
+  },
+};

src/plugins/prime/stories/Menu/MegaMenu/MegaMenu.template.js

@@ -0,0 +1,154 @@
+import { MegaMenu } from 'primevue';
+import { ref } from 'vue';
+import MegaMenuItem from './MegaMenuItem.vue';
+
+const baseItems = [
+  {
+    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,
+  },
+];
+
+export const HorizontalTemplate = (args) => ({
+  components: { MegaMenu },
+  setup() {
+    const items = ref(baseItems);
+
+    return { args, items };
+  },
+  template: `<MegaMenu :model="items" v-bind="args" />`,
+});
+
+export const VerticalTemplate = (args) => ({
+  components: { MegaMenu },
+  setup() {
+    const items = ref(baseItems);
+
+    return { args, items };
+  },
+  template: `<MegaMenu :model="items" orientation="vertical" v-bind="args" />`,
+});
+
+export const CustomTemplate = (args) => ({
+  components: { MegaMenu, MegaMenuItem },
+  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: '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" v-bind="args">
+      <template #item="{ item, props }">
+        <MegaMenuItem :item="item" :action-props="props.action" />
+      </template>
+    </MegaMenu>
+  `,
+});