tieredmenu: стилизация, сторисы by khaliulin · Pull Request #159 · cdek-it/vue-ui-kit

khaliulin · 2026-03-20T11:40:23Z

No description provided.

…edMenu

Skosov · 2026-03-25T09:11:45Z

Сделай больше область, чтоб не скролилась при открытии подменю

khaliulin · 2026-04-03T14:28:10Z

@Skosov фикс высоты превью для Docs; удаление артефакта: 8d39f74

Skosov · 2026-04-06T05:53:28Z

Зачем это удалять? Это пример как можно работать через класс p-menuitem-checked, он сам по себе не может появиться, нужна какая-то логика, которая будет описана в сториках

Судя по твоим сторикам всё работает само, ничего делать не надо, что абсолютно неверно, ты везде используешь хук useMenu

@Skosov 77ad9aa:
что сделано:

TieredMenuSelected.vue (новый файл) — обёртка, которая инкапсулирует useMenu и управляет
динамическим выделением.

WithSelectedTemplate — теперь просто рендерит без лишнего setup-кода.

Source code сниппет в stories — показывает, как реализовать динамическое выделение в своём
приложении: clearSelectedClass + addCommandHandler с command handlers.

MDX — текст обновлён: описывает динамическое поведение вместо статичного

Skosov · 2026-04-06T05:54:59Z

+
+### With Selected Item
+
+Меню с выделенным активным пунктом через класс `p-menuitem-checked`.


Что такое p-menuitem-checked? Откуда оно берется? Как мне это прокинуть на сторону проекта? Непонятно

@Skosov предлагаю добавить блок с гайдом:

@Skosov добавил 03beab1 блок с комментарием по использованию

…стили меню

Skosov · 2026-04-07T04:40:49Z

У этого компонента всегда один и тот же список items, он не передается. Хук в целом был только для сториков

не проксируются пропсы из прайма

не экспортируется компонент

@Skosov фикс faf33cb

Skosov · 2026-04-07T04:41:25Z

Зачем в историях использовать компонент из прайма вообще, если была написана обертка?

@Skosov фикс faf33cb

Skosov · 2026-04-07T04:42:31Z

+
+export const Basic = {
+  render: BasicTemplate,
+  decorators: [


почему сразу в шаблоне нельзя высоту задать?

какой-то оверинжиниринг

@Skosov Storybook просит через декоратор.

Где просит?

@Skosov согласно https://storybook.js.org/docs/writing-stories/decorators

Я не нашел там такой рекомендации)

Это просто статья, описывающая их работу

@Skosov убрал декораторы, высоту задал в шаблоне напрямую
ca73efc

Skosov · 2026-04-09T05:31:24Z

+import { TieredMenu } from 'primevue';
+import type { MenuItem } from 'primevue/menuitem';
+
+defineProps<{


я не вижу, чтоб пропсы наследоваились от оригинального TieredMenu, не вижу эмитов, прокинутых из TieredMenu, не вижу прокидывания слотов, не вижу экспорта из библиотеки

@Skosov вынес обёртку в primeBlocks, экспортировал из либы dc2d18a

Skosov · 2026-04-09T05:31:37Z

    padding-bottom: 0.625rem;
  }
+
+  [class*="menu"][class*="item"].p-disabled, .p-panelmenu-panel > .p-disabled {


какова цель двух стилизаций? (в отдельном файле и глобально)

@Skosov перенёс стили disabled/checked из css.ts в обёртку 74c5bcb

Skosov · 2026-04-09T05:31:57Z

@@ -0,0 +1,43 @@
+const css = ({ dt }: { dt: (token: string) => string }) => `


если у нас обертка, то для чего стили в теме?

@Skosov удалил тему, перенёс стили в обёртку bef00b5

Skosov · 2026-04-09T05:32:26Z

-      <CodeSnippet :code="items"/>
+    <div class="card flex justify-center">
+      <TieredMenuSelected :model="items" v-bind="args">
+        <template #item="{ item, props, hasSubmenu }">


это точно будет работать? В шаблоне нет упоминаний слотов вообще

@Skosov добавил прокидывание слотов в обёртке 2e6d83b

Может просто описать их прямо в шаблоне для наглядности?

Пример из PBlockToggleButton

<template #icon> <slot name="icon" /> </template>

@Skosov прописал слоты явно по образцу PBlockToggleButton
ca73efc

Skosov · 2026-04-17T05:39:43Z

+  Record<string, unknown>
+>;
+
+defineProps<{


я так и не вижу поддержки всех пропсов TieredMenu. Импорт тоже странный

В готовом примере PBlockToggleButton.vue

import { ToggleButton, type ToggleButtonProps } from 'primevue'; interface IPBlockToggleButton extends ToggleButtonProps { baseIcon?: string; baseLabel?: string; modelValue?: boolean; } defineProps<IPBlockToggleButton>();

@Skosov добавил TieredMenuProps, импорт из primevue, все пропсы прокидываются через v-bind
ca73efc

…исправить fonts-font-size-xs

Skosov · 2026-05-08T06:49:48Z

Ждем MenuBar, потом тут напишу комменты

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

4f4b418

khaliulin requested a review from Skosov March 20, 2026 11:40

Danil Khaliulin and others added 2 commits March 20, 2026 23:01

TieredMenu: кастомный menu item

827ca23

Merge remote-tracking branch 'origin/storybook-update' into menu.Tier…

eeb8dc4

…edMenu

фикс высоты превью для Docs; удаление артефакта

8d39f74

Skosov reviewed Apr 6, 2026

View reviewed changes

Comment thread src/plugins/prime/stories/Menu/TieredMenu/TieredMenu.mdx Outdated

Skosov reviewed Apr 6, 2026

View reviewed changes

Danil Khaliulin added 6 commits April 6, 2026 14:40

фиксированная высота в docs через decorator

761f105

блок с комментарием по использованию

03beab1

создан TieredMenuSelected.vue для динамического выделения

77ad9aa

фикс type-check: добавлен lang="ts" в TieredMenuSelected.vue

3612e62

резолв конфликта css.ts: убраны ручные импорты, сохранены глобальные …

6bf5e2f

…стили меню

удалён CodeSnippet из WithSelectedTemplate

f7a148a

Skosov reviewed Apr 7, 2026

View reviewed changes

убран useMenu, добавлен пропс model: MenuItem[]

faf33cb

Skosov reviewed Apr 9, 2026

View reviewed changes

Danil Khaliulin added 6 commits April 14, 2026 16:01

вынес обёртку в primeBlocks, экспортировал из либы

dc2d18a

перенёс стили disabled/checked из css.ts в обёртку

74c5bcb

удалил тему, перенёс стили в обёртку

bef00b5

добавил прокидывание слотов в обёртке

2e6d83b

исправил имена CSS-переменных (убрал extend из пути)

ee15e11

убрал неиспользуемый параметр dt из css.ts

75e90c0

исправил ошибку type-check: каст для динамического прокидывания слотов

223be17

Skosov approved these changes Apr 17, 2026

View reviewed changes

Skosov self-requested a review April 29, 2026 05:11

khaliulin force-pushed the menu.TieredMenu branch from 4e63f0b to 2792b5b Compare May 4, 2026 07:29

Danil Khaliulin added 2 commits May 4, 2026 14:31

tieredmenu: пропсы через TieredMenuProps, явные слоты, высота в шаблоне

7bd01b1

PBlockTieredMenu: прокидывание всех эмитов TieredMenu

a135d4b

khaliulin force-pushed the menu.TieredMenu branch from 2792b5b to a135d4b Compare May 4, 2026 07:34

Danil Khaliulin added 2 commits May 4, 2026 14:35

modified: .gitignore

4ce9765

замена на токены стилизации

d92d0b9

esipenko reviewed May 4, 2026

View reviewed changes

Danil Khaliulin and others added 10 commits May 4, 2026 14:43

fix: условные слоты v-if, стиль сепаратора, сторис WithSeparator

8191cab

docs: добавить превью сториса с сепаратором в docs

dfcca9c

fix: заменить несуществующие button-extend токены на form-disabled

7536510

fix: заменить несуществующий токен border-radius на tieredmenu-item

f97f864

фикс стилизации disabled menu-item

ad63756

fix: удалить дублирующие стили с несуществующими menu-item токенами, …

0ef434f

…исправить fonts-font-size-xs

tieredmenu: Рефакторинг - компонент и сторисы.

ff5ef8b

tieredmenu: Рефакторинг - слоты и типизация.

d216b6a

tieredmenu: Рефакторинг - убрал у стилей scoped.

cfa6db8

tieredmenu: Рефакторинг - удалены лишние стили.

f0ef897

esipenko approved these changes May 5, 2026

View reviewed changes

Merge branch 'storybook-update' into menu.TieredMenu

ab54566


		### With Selected Item

		Меню с выделенным активным пунктом через класс `p-menuitem-checked`.

		@@ -0,0 +1,43 @@
		const css = ({ dt }: { dt: (token: string) => string }) => `

Conversation

khaliulin commented Mar 20, 2026

Uh oh!

Skosov commented Mar 25, 2026

Uh oh!

khaliulin commented Apr 3, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Skosov Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

khaliulin Apr 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

khaliulin Apr 6, 2026 •

edited

Loading

khaliulin Apr 18, 2026 •

edited

Loading

Skosov Apr 9, 2026 •

edited

Loading

khaliulin Apr 18, 2026 •

edited

Loading

khaliulin Apr 18, 2026 •

edited

Loading