@feugene/granularity 0.34.0 → 0.34.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/chunks/{config-DGGaKf4R.js → config-CT4lP6S4.js} +1 -1
  2. package/dist/chunks/{config-DGGaKf4R.js.map → config-CT4lP6S4.js.map} +1 -1
  3. package/dist/chunks/{config-DBXCIb6r2.js → config-DVCNvhIG2.js} +1 -1
  4. package/dist/chunks/{config-DBXCIb6r2.js.map → config-DVCNvhIG2.js.map} +1 -1
  5. package/dist/chunks/{generated-Buw6W7Te.js → generated-Bk-f6NsN.js} +14 -0
  6. package/dist/chunks/{generated-Buw6W7Te.js.map → generated-Bk-f6NsN.js.map} +1 -1
  7. package/dist/chunks/{grPopoverStyles-DKwigt7b.js → grPopoverStyles-CYAeO3Ov.js} +20 -1
  8. package/dist/chunks/{grPopoverStyles-DKwigt7b.js.map → grPopoverStyles-CYAeO3Ov.js.map} +1 -1
  9. package/dist/chunks/{granular-provider-3LUawDPh.js → granular-provider-BAy4APOX.js} +2 -2
  10. package/dist/chunks/{granular-provider-3LUawDPh.js.map → granular-provider-BAy4APOX.js.map} +1 -1
  11. package/dist/components/GrColorPicker/chunks/{GrColorPicker-D1Iis7jf.js → GrColorPicker-CIgdPXHn.js} +1 -1
  12. package/dist/components/GrColorPicker/chunks/{GrColorPicker-D1Iis7jf.js.map → GrColorPicker-CIgdPXHn.js.map} +1 -1
  13. package/dist/components/GrColorPicker/index.js +1 -1
  14. package/dist/components/GrContextMenu/chunks/{GrContextMenu-CWmgrzpi.js → GrContextMenu-DlFWm0eW.js} +1 -1
  15. package/dist/components/GrContextMenu/chunks/{GrContextMenu-CWmgrzpi.js.map → GrContextMenu-DlFWm0eW.js.map} +1 -1
  16. package/dist/components/GrContextMenu/index.js +1 -1
  17. package/dist/components/GrDropdown/chunks/{GrDropdown-CDkPkvIJ.js → GrDropdown-7r772-Cq.js} +1 -1
  18. package/dist/components/GrDropdown/chunks/{GrDropdown-CDkPkvIJ.js.map → GrDropdown-7r772-Cq.js.map} +1 -1
  19. package/dist/components/GrDropdown/index.js +2 -2
  20. package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-DQrZ_yPV.js → GrDropdownMenu-DNurbsWc.js} +1 -1
  21. package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-DQrZ_yPV.js.map → GrDropdownMenu-DNurbsWc.js.map} +1 -1
  22. package/dist/components/GrDropdownMenu/index.js +1 -1
  23. package/dist/components/GrPopover/chunks/{GrPopover-CzeXMcvh.js → GrPopover-DEFxDffj.js} +1 -1
  24. package/dist/components/GrPopover/chunks/{GrPopover-CzeXMcvh.js.map → GrPopover-DEFxDffj.js.map} +1 -1
  25. package/dist/components/GrPopover/index.js +2 -2
  26. package/dist/composables/useFloating.js +31 -11
  27. package/dist/composables/useFloating.js.map +1 -1
  28. package/dist/granular-provider-node.js +1 -1
  29. package/dist/granular-provider.js +1 -1
  30. package/dist/index.js +7 -7
  31. package/dist/theme.js +1 -1
  32. package/dist/tokens.js +1 -1
  33. package/dist/types/components/GrPopover/grPopoverStyles.d.ts +20 -1
  34. package/dist/types/composables/useFloating.d.ts +15 -0
  35. package/dist/web-types.json +1 -1
  36. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"GrContextMenu-CWmgrzpi.js","names":[],"sources":["../../../../src/components/GrContextMenu/contextMenuAnchor.ts","../../../../src/components/GrContextMenu/GrContextMenu.vue","../../../../src/components/GrContextMenu/GrContextMenu.vue"],"sourcesContent":["import type { GrFloatingAnchorRect } from '../../composables/useFloating'\n\n/** Точка курсора — якорь нулевого размера. */\nexport function anchorFromPointer(event: MouseEvent): GrFloatingAnchorRect {\n return { x: event.clientX, y: event.clientY }\n}\n\n/**\n * Прямоугольник элемента — якорь клавиатурного вызова.\n *\n * Не угол и не точка: меню, вызванное с клавиатуры, принадлежит **строке**, и\n * при нехватке места снизу обязано перевернуться относительно неё целиком.\n */\nexport function anchorFromElement(element: Element): GrFloatingAnchorRect {\n const rect = element.getBoundingClientRect()\n\n return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }\n}\n\n/**\n * `contextmenu` пришёл с клавиатуры, а не от мыши.\n *\n * Браузеры порождают это событие и для `Shift+F10`, но координаты в нём\n * бесполезны: то угол элемента, то нули. Признаков два сразу, потому что по\n * отдельности каждый ошибается — правый клик всегда `button === 2`, а\n * клавиатурный вызов всегда без «числа кликов».\n */\nexport function isKeyboardContextMenu(event: MouseEvent): boolean {\n return event.button !== 2 && event.detail === 0\n}\n\n/**\n * Пользователь просит нативное меню браузера.\n *\n * `Shift`+правый клик — де-факто escape-hatch, в Firefox задокументированный.\n * `ctrlKey` сюда не входит намеренно: на macOS Ctrl+клик **и есть** правый\n * клик, и меню перестало бы открываться у части пользователей.\n */\nexport function wantsNativeMenu(event: MouseEvent): boolean {\n return event.shiftKey\n}\n\n/** Клавиатурный запрос контекстного меню: `Shift+F10` или клавиша `ContextMenu`. */\nexport function isContextMenuKey(event: KeyboardEvent): boolean {\n return event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)\n}\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Потолок ширины панели снят: ширину меню определяет его собственный `minWidth`.\n *\n * По умолчанию `GrPopover` держит `22rem` — читаемую ширину колонки текста. Но\n * `minWidth` этого меню лежит на списке **внутри** панели, а список не сжимается:\n * `minWidth` крупнее потолка вылезал бы за скруглённый край панели наружу, потому\n * что у неё `overflow: visible`. Замер: `min-width: 500px` при потолке 352px даёт\n * вылет в 161px.\n *\n * Два предела на одну ширину — один снаружи, другой изнутри — противоречат друг\n * другу по построению, поэтому внешний снимается. «Не шире вьюпорта» остаётся: он\n * второй операнд `min()` и хуком не снимается.\n */\nconst panelClass = computed(() => ['[--gr-popover-max-width:100vw]', props.contentClass].filter(Boolean).join(' '))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"panelClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Потолок ширины панели снят: ширину меню определяет его собственный `minWidth`.\n *\n * По умолчанию `GrPopover` держит `22rem` — читаемую ширину колонки текста. Но\n * `minWidth` этого меню лежит на списке **внутри** панели, а список не сжимается:\n * `minWidth` крупнее потолка вылезал бы за скруглённый край панели наружу, потому\n * что у неё `overflow: visible`. Замер: `min-width: 500px` при потолке 352px даёт\n * вылет в 161px.\n *\n * Два предела на одну ширину — один снаружи, другой изнутри — противоречат друг\n * другу по построению, поэтому внешний снимается. «Не шире вьюпорта» остаётся: он\n * второй операнд `min()` и хуком не снимается.\n */\nconst panelClass = computed(() => ['[--gr-popover-max-width:100vw]', props.contentClass].filter(Boolean).join(' '))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"panelClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n"],"mappings":";;;;;;;;;AAGA,SAAgB,kBAAkB,OAAyC;CACzE,OAAO;EAAE,GAAG,MAAM;EAAS,GAAG,MAAM;CAAQ;AAC9C;;;;;;;AAQA,SAAgB,kBAAkB,SAAwC;CACxE,MAAM,OAAO,QAAQ,sBAAsB;CAE3C,OAAO;EAAE,GAAG,KAAK;EAAM,GAAG,KAAK;EAAK,OAAO,KAAK;EAAO,QAAQ,KAAK;CAAO;AAC7E;;;;;;;;;AAUA,SAAgB,sBAAsB,OAA4B;CAChE,OAAO,MAAM,WAAW,KAAK,MAAM,WAAW;AAChD;;;;;;;;AASA,SAAgB,gBAAgB,OAA4B;CAC1D,OAAO,MAAM;AACf;;AAGA,SAAgB,iBAAiB,OAA+B;CAC9D,OAAO,MAAM,QAAQ,iBAAkB,MAAM,QAAQ,SAAS,MAAM;AACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC2CA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAEb,MAAM,QAAQ,SAAS;EACvB,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,EAAE,MAAM,QAAQ,YAAY,wBAC1B,MAAM,OACZ,SAAQ,KAAK,eAAe,IAAI,CAClC;EAEA,MAAM,SAAS,IAAwB,IAAI;EAC3C,MAAM,UAAU,IAAkC,IAAI;EACtD,MAAM,SAAS,IAAiC,IAAI;EAEpD,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,wBAAwB,cAAc,CAAC;EAErG,MAAM,YAAY,gBAAgB,EAChC,UAAU,OAAO,MAAM,aAAa,WAAW,GAAG,MAAM,SAAS,MAAM,MAAM,SAC/E,EAAE;;;;;;;;;;;;;;EAeF,MAAM,aAAa,eAAe,CAAC,kCAAkC,MAAM,YAAY,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC;;;;;EAMlH,MAAM,UAAU,eAAe;GAC7B,IAAI,MAAM,SACR,OAAO;GAET,QAAQ,MAAM,SAAS,CAAC,EAAA,CAAG,OAAM,UAAS,CAAC,aAAa,KAAK,MACvD,CAAC,cAAc,KAAK,KAAK,MAAM,MAAM,WAAW,EAAE;EAC1D,CAAC;EAED,MAAM,OAAO,kBAAkB;GAC7B,iBAAiB,QAAQ,OAAO,OAAO;GACvC,aAAa,MAAM;EACrB,CAAC;EAED,SAAS,UAA8B;GACrC,OAAO,QAAQ,OAAO,KAAK,QAAQ,yBAAyB,KAAK;EACnE;EAEA,SAAS,cAAc,QAAqC;GAC1D,OAAO,kBAAkB,SAAS,QAAQ,CAAC,EAAE,SAAS,MAAM,KAAK;EACnE;EAEA,eAAe,SAAS,SAAkD;GACxE,IAAI,MAAM,UACR;GAEF,OAAO,QAAQ,QAAQ;GACvB,KAAK,cAAc,OAAO;GAK1B,MAAM,SAAS;GAEf,IAAI,QAAQ,OACV;GAEF,QAAQ,IAAI;GAEZ,MAAM,SAAS;GACf,KAAK,QAAQ,CAAC;EAChB;;EAGA,SAAS,OAAO,IAA6C;GAC3D,MAAM,cAAc,cAAc;GAElC,SAAc;IACZ,QAAQ,cAAc,YAAY;IAClC,QAAQ,cAAe,GAAG,SAAgC;IAC1D,QAAQ,cAAc,kBAAkB,EAAE,IAAI;IAC9C,OAAO,cAAc,KAAK;GAC5B,CAAC;EACH;;EAGA,SAAS,cAAc,SAAwB;GAC7C,SAAc;IACZ,QAAQ;IACR,QAAQ,mBAAmB,cAAc,UAAU;IACnD,QAAQ,kBAAkB,OAAO;IACjC,OAAO;GACT,CAAC;EACH;EAEA,SAAS,OAAa;GACpB,IAAI,OAAO,OACT,SAAc;IAAE,QAAQ;IAAO,QAAQ;IAAM,QAAQ,OAAO;IAAO,OAAO;GAAK,CAAC;QAC7E,IAAI,OAAO,OACd,cAAc,OAAO,KAAK;EAC9B;EAEA,SAAS,QAAc;GACrB,QAAQ,KAAK;GACb,KAAK,MAAM;EACb;EAEA,SAAS,SAAe;GACtB,OAAO,QAAQ,MAAM,IAAI,KAAK;EAChC;EAEA,SAAS,SAAS,MAAkC;GAClD,KAAK,UAAU,IAAI;EACrB;EAEA,SAAS,kBAAkB,OAAyB;GAClD,IAAI,MAAM,YAAY,iBAAiB,MAAM,UAC3C;GAEF,IAAI,MAAM,mBAAmB,gBAAgB,KAAK,GAChD;GAEF,MAAM,eAAe;GAErB,MAAM,gBAAgB;GAEtB,IAAI,sBAAsB,KAAK,GAAG;IAChC,MAAM,SAAU,SAAS,iBAAwC,OAAO;IACxE,IAAI,QACF,cAAc,MAAM;IACtB;GACF;GAEA,OAAO,KAAK;EACd;;;;;;;EAQA,SAAS,cAAc,OAA4B;GACjD,IAAI,MAAM,UACR;GAEF,IAAI,CAAC,iBAAiB,KAAK,GACzB;GAGF,IAAI,iBAAiB,MAAM,MAAM,GAC/B;GAKF,MAAM,eAAe;GAErB,MAAM,SAAU,SAAS,iBAAwC,OAAO;GACxE,IAAI,CAAC,QACH;GAEF,SAAc;IACZ,QAAQ;IACR;IACA,QAAQ,kBAAkB,MAAM;IAChC;GACF,CAAC;EACH;;;;;;EAOA,SAAS,sBAAsB,OAAyB;GACtD,IAAI,cAAc,MAAM,MAAM,GAAG;IAC/B,MAAM,eAAe;IACrB;GACF;GAIA,IAAI,MAAM,kBAAkB,QAAQ,OAAO,OAAO,SAAS,MAAM,MAAM,GACrE;GAEF,MAAM;EACR;EAEA,SAAS,iBAAiB,OAAoB;GAC5C,IAAI,cAAc,MAAM,MAAM,GAC5B;GAEF,MAAM;EACR;EAEA,IAAI;EAEJ,SAAS,gBAAsB;GAC7B,IAAI,gBAAgB,KAAA,GAAW;IAC7B,qBAAqB,WAAW;IAChC,cAAc,KAAA;GAChB;GAEA,OAAO,oBAAoB,eAAe,uBAAuB,IAAI;GACrE,OAAO,oBAAoB,UAAU,kBAAkB,IAAI;EAC7D;EAEA,MAAM,SAAS,SAAS;GACtB,IAAI,OAAO,WAAW,aACpB;GAEF,IAAI,CAAC,MAAM;IACT,cAAc;IACd;GACF;GAEA,OAAO,iBAAiB,eAAe,uBAAuB,IAAI;GAKlE,IAAI,MAAM,eACR,cAAc,4BAA4B;IACxC,cAAc,KAAA;IACd,OAAO,iBAAiB,UAAU,kBAAkB;KAAE,SAAS;KAAM,SAAS;IAAK,CAAC;GACtF,CAAC;EAEL,CAAC;EAED,sBAAsB;GACpB,IAAI,OAAO,WAAW,aACpB;GAEF,cAAc;EAChB,CAAC;EAED,SAAa;GAAE;GAAQ;GAAe;GAAM;GAAO;EAAO,CAAC;;uBAWzD,mBA0CM,OA1CN,YA0CM,CAxCI,MAAA,KAAA,CAAK,CAAC,WAAA,UAAA,GADd,mBAQM,OAAA;;aANA;IAAJ,KAAI;IACJ,6BAAA;IACC,eAAa;IACb,WAAS;OAEV,WAAuB,KAAA,QAAA,WAAA,EAAhB,MAAM,MAAA,MAAA,EAAM,CAAA,CAAA,GAAA,GAAA,KAAA,mBAAA,IAAA,IAAA,GAGrB,YA8BY,mBAAA;IA7BT,MAAM,MAAA,MAAA;IACN,QAAQ,OAAA;IACR,WAAW,QAAA;IACX,aAAW,QAAA;IACX,eAAa,QAAA;IACb,iBAAe,WAAA;IACf,cAAY,QAAA,aAAa,KAAA,IAAY,kBAAA;IACrC,eAAa,QAAA;IACd,MAAK;IACL,SAAQ;IACR,SAAQ;IACR,0BAAA;IACC,cAAY;IACZ,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAA,CAAO,CAAC,MAAM;;IAEjB,SAAO,SAYK,EAAA,OAZM,iBAAU,CACrC,YAWqB,4BAAA;cAVf;KAAJ,KAAI;KACJ,OAAK,eAAA,CAAC,OAGE,QAAA,SAAS,CAAA;KAFhB,OAAK,eAAE,UAAA,KAAS;KAChB,UAAU,QAAA;KAEV,WAAS,MAAA,IAAA,CAAI,CAAC;;4BAIR,CAFP,WAEO,KAAA,QAAA,WAAA,EAFe,OAAO,WAAU,SAEhC,CADL,YAA2D,+BAAA;MAAnC,OAAO,QAAA;MAAgB"}
1
+ {"version":3,"file":"GrContextMenu-DlFWm0eW.js","names":[],"sources":["../../../../src/components/GrContextMenu/contextMenuAnchor.ts","../../../../src/components/GrContextMenu/GrContextMenu.vue","../../../../src/components/GrContextMenu/GrContextMenu.vue"],"sourcesContent":["import type { GrFloatingAnchorRect } from '../../composables/useFloating'\n\n/** Точка курсора — якорь нулевого размера. */\nexport function anchorFromPointer(event: MouseEvent): GrFloatingAnchorRect {\n return { x: event.clientX, y: event.clientY }\n}\n\n/**\n * Прямоугольник элемента — якорь клавиатурного вызова.\n *\n * Не угол и не точка: меню, вызванное с клавиатуры, принадлежит **строке**, и\n * при нехватке места снизу обязано перевернуться относительно неё целиком.\n */\nexport function anchorFromElement(element: Element): GrFloatingAnchorRect {\n const rect = element.getBoundingClientRect()\n\n return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }\n}\n\n/**\n * `contextmenu` пришёл с клавиатуры, а не от мыши.\n *\n * Браузеры порождают это событие и для `Shift+F10`, но координаты в нём\n * бесполезны: то угол элемента, то нули. Признаков два сразу, потому что по\n * отдельности каждый ошибается — правый клик всегда `button === 2`, а\n * клавиатурный вызов всегда без «числа кликов».\n */\nexport function isKeyboardContextMenu(event: MouseEvent): boolean {\n return event.button !== 2 && event.detail === 0\n}\n\n/**\n * Пользователь просит нативное меню браузера.\n *\n * `Shift`+правый клик — де-факто escape-hatch, в Firefox задокументированный.\n * `ctrlKey` сюда не входит намеренно: на macOS Ctrl+клик **и есть** правый\n * клик, и меню перестало бы открываться у части пользователей.\n */\nexport function wantsNativeMenu(event: MouseEvent): boolean {\n return event.shiftKey\n}\n\n/** Клавиатурный запрос контекстного меню: `Shift+F10` или клавиша `ContextMenu`. */\nexport function isContextMenuKey(event: KeyboardEvent): boolean {\n return event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)\n}\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Потолок ширины панели снят: ширину меню определяет его собственный `minWidth`.\n *\n * По умолчанию `GrPopover` держит `22rem` — читаемую ширину колонки текста. Но\n * `minWidth` этого меню лежит на списке **внутри** панели, а список не сжимается:\n * `minWidth` крупнее потолка вылезал бы за скруглённый край панели наружу, потому\n * что у неё `overflow: visible`. Замер: `min-width: 500px` при потолке 352px даёт\n * вылет в 161px.\n *\n * Два предела на одну ширину — один снаружи, другой изнутри — противоречат друг\n * другу по построению, поэтому внешний снимается. «Не шире вьюпорта» остаётся: он\n * второй операнд `min()` и хуком не снимается.\n */\nconst panelClass = computed(() => ['[--gr-popover-max-width:100vw]', props.contentClass].filter(Boolean).join(' '))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"panelClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Потолок ширины панели снят: ширину меню определяет его собственный `minWidth`.\n *\n * По умолчанию `GrPopover` держит `22rem` — читаемую ширину колонки текста. Но\n * `minWidth` этого меню лежит на списке **внутри** панели, а список не сжимается:\n * `minWidth` крупнее потолка вылезал бы за скруглённый край панели наружу, потому\n * что у неё `overflow: visible`. Замер: `min-width: 500px` при потолке 352px даёт\n * вылет в 161px.\n *\n * Два предела на одну ширину — один снаружи, другой изнутри — противоречат друг\n * другу по построению, поэтому внешний снимается. «Не шире вьюпорта» остаётся: он\n * второй операнд `min()` и хуком не снимается.\n */\nconst panelClass = computed(() => ['[--gr-popover-max-width:100vw]', props.contentClass].filter(Boolean).join(' '))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"panelClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- import { t as GrContextMenu_default } from "./chunks/GrContextMenu-CWmgrzpi.js";
1
+ import { t as GrContextMenu_default } from "./chunks/GrContextMenu-DlFWm0eW.js";
2
2
  import { t as grContextMenuConfig } from "../../chunks/config-CsCUuukB.js";
3
3
  export { GrContextMenu_default as GrContextMenu, GrContextMenu_default as default, grContextMenuConfig };
@@ -1,5 +1,5 @@
1
1
  import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
2
- import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-CzeXMcvh.js";
2
+ import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-DEFxDffj.js";
3
3
  import { t as useMenuItemsFocus } from "../../../chunks/useMenuItemsFocus-B7Bl_aFA.js";
4
4
  import { t as grDropdownContentClass } from "../../../chunks/grDropdownStyles-DLToHWMX.js";
5
5
  import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
@@ -1 +1 @@
1
- {"version":3,"file":"GrDropdown-CDkPkvIJ.js","names":[],"sources":["../../../../src/components/GrDropdown/GrDropdown.vue","../../../../src/components/GrDropdown/GrDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport {\n grDropdownContentClass,\n type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Закрывать панель по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы контейнера content. */\n contentClass?: string\n /**\n * Точечное переопределение точки монтирования. По умолчанию — общий портал\n * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n */\n teleportTo?: string | HTMLElement\n /**\n * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n */\n open?: boolean\n}\n\nexport interface GrDropdownEmits {\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\n/**\n * Меню поверх `GrPopover`.\n *\n * Панель, слой, портал, позиционирование, наведение с задержками и возврат\n * фокуса принадлежат примитиву. До этого здесь жила вторая их реализация:\n * карта `transform-origin` совпадала с поповерской дословно все двенадцать\n * записей, поверхность панели — шесть утилит — была скопирована, а сборка слоя\n * и портала повторяла его же. Расходились бы молча.\n *\n * Меню оставляет себе то, что меню и есть: кольцо фокуса по пунктам, поиск по\n * буквам, клавиатуру открытия и ширину панели. Тот же приём, что у\n * `GrContextMenu`, который так устроен с самого начала.\n */\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n closeOnContentClick: true,\n contentClass: '',\n teleportTo: undefined,\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\n/**\n * Контейнер пунктов — он же контейнер кольца фокуса.\n *\n * Панель `GrPopover` рисует `v-show`, поэтому содержимое слота существует в DOM\n * с монтирования: ссылка готова до первого открытия, и `focusAt` не приходится\n * ждать отрисовки панели.\n */\nconst menuEl = ref<HTMLElement | null>(null)\n\n// Кольцо фокуса и поиск по буквам — общие с `GrContextMenu`: паттерн `menu`\n// один, и вторая его реализация разошлась бы с первой незаметно для тестов.\nconst menu = useMenuItemsFocus({\n container: () => menuEl.value,\n close: () => close(),\n})\n\nfunction open(): void {\n if (props.disabled)\n return\n\n setOpen(true)\n}\n\nfunction close(): void {\n setOpen(false)\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n if (props.disabled)\n return\n\n setOpen(true)\n await nextTick()\n menu.focusAt(first ? 0 : -1)\n}\n\n/**\n * Что меню добавляет к `triggerProps` примитива.\n *\n * Примитив отдаёт ARIA и клик; стрелки, открывающие меню с первого или\n * последнего пункта, принадлежат паттерну `menu` и живут здесь.\n *\n * И `aria-disabled` вместо нативного `disabled`. Расхождение намеренное:\n * нативный атрибут убирает кнопку из таб-порядка, а у меню триггер обязан\n * оставаться фокусируемым — иначе пользователь клавиатуры не найдёт его вовсе и\n * не узнает, почему меню недоступно. Форм-контролу (`GrColorPicker`) верно\n * обратное, поэтому примитив оставляет нативный, а меню его перекрывает.\n */\nfunction menuTriggerProps(popoverProps: Record<string, unknown>): Record<string, unknown> {\n return {\n ...popoverProps,\n 'disabled': undefined,\n 'aria-disabled': props.disabled || undefined,\n 'onKeydown': onTriggerKeydown,\n }\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault()\n void openWithFocus(true)\n break\n case 'ArrowUp':\n event.preventDefault()\n void openWithFocus(false)\n break\n case 'Escape':\n if (isOpen.value) {\n event.preventDefault()\n close()\n }\n break\n }\n}\n\nwatch(\n () => props.disabled,\n (value) => {\n if (value)\n close()\n },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n if (value === 'auto')\n return undefined\n if (typeof value === 'number')\n return `${value}px`\n\n // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n const bare = value.trim()\n if (/^\\d+$/.test(bare)) {\n if (__GR_DEV__) {\n console.warn(\n `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n + `width=\"${bare}px\" или :width=\"${bare}\".`,\n )\n }\n return `${bare}px`\n }\n\n return value\n}\n\nconst panelStyle = computed(() => {\n const width = toCssLength(props.width)\n\n return width ? { width } : undefined\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус, а клик приезжает вместе с ними.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-dropdown>\n <GrPopover\n role=\"menu\"\n padding=\"none\"\n :open=\"isOpen\"\n :placement=\"placement\"\n :offset-px=\"offset\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :close-on-content-click=\"closeOnContentClick\"\n :teleport-to=\"teleportTo\"\n :auto-focus=\"false\"\n @update:open=\"setOpen\"\n >\n <template #trigger=\"{ triggerProps: popoverTriggerProps }\">\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n :toggle=\"toggle\"\n :close=\"close\"\n :trigger-props=\"menuTriggerProps(popoverTriggerProps)\"\n />\n </template>\n\n <template #content=\"{ close: closePanel }\">\n <div\n ref=\"menuEl\"\n data-gr-dropdown-panel\n :style=\"panelStyle\"\n @keydown=\"menu.onKeydown\"\n >\n <div data-gr-dropdown-content :class=\"contentClasses\">\n <slot name=\"content\" :close=\"closePanel\" />\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport {\n grDropdownContentClass,\n type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Закрывать панель по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы контейнера content. */\n contentClass?: string\n /**\n * Точечное переопределение точки монтирования. По умолчанию — общий портал\n * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n */\n teleportTo?: string | HTMLElement\n /**\n * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n */\n open?: boolean\n}\n\nexport interface GrDropdownEmits {\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\n/**\n * Меню поверх `GrPopover`.\n *\n * Панель, слой, портал, позиционирование, наведение с задержками и возврат\n * фокуса принадлежат примитиву. До этого здесь жила вторая их реализация:\n * карта `transform-origin` совпадала с поповерской дословно все двенадцать\n * записей, поверхность панели — шесть утилит — была скопирована, а сборка слоя\n * и портала повторяла его же. Расходились бы молча.\n *\n * Меню оставляет себе то, что меню и есть: кольцо фокуса по пунктам, поиск по\n * буквам, клавиатуру открытия и ширину панели. Тот же приём, что у\n * `GrContextMenu`, который так устроен с самого начала.\n */\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n closeOnContentClick: true,\n contentClass: '',\n teleportTo: undefined,\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\n/**\n * Контейнер пунктов — он же контейнер кольца фокуса.\n *\n * Панель `GrPopover` рисует `v-show`, поэтому содержимое слота существует в DOM\n * с монтирования: ссылка готова до первого открытия, и `focusAt` не приходится\n * ждать отрисовки панели.\n */\nconst menuEl = ref<HTMLElement | null>(null)\n\n// Кольцо фокуса и поиск по буквам — общие с `GrContextMenu`: паттерн `menu`\n// один, и вторая его реализация разошлась бы с первой незаметно для тестов.\nconst menu = useMenuItemsFocus({\n container: () => menuEl.value,\n close: () => close(),\n})\n\nfunction open(): void {\n if (props.disabled)\n return\n\n setOpen(true)\n}\n\nfunction close(): void {\n setOpen(false)\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n if (props.disabled)\n return\n\n setOpen(true)\n await nextTick()\n menu.focusAt(first ? 0 : -1)\n}\n\n/**\n * Что меню добавляет к `triggerProps` примитива.\n *\n * Примитив отдаёт ARIA и клик; стрелки, открывающие меню с первого или\n * последнего пункта, принадлежат паттерну `menu` и живут здесь.\n *\n * И `aria-disabled` вместо нативного `disabled`. Расхождение намеренное:\n * нативный атрибут убирает кнопку из таб-порядка, а у меню триггер обязан\n * оставаться фокусируемым — иначе пользователь клавиатуры не найдёт его вовсе и\n * не узнает, почему меню недоступно. Форм-контролу (`GrColorPicker`) верно\n * обратное, поэтому примитив оставляет нативный, а меню его перекрывает.\n */\nfunction menuTriggerProps(popoverProps: Record<string, unknown>): Record<string, unknown> {\n return {\n ...popoverProps,\n 'disabled': undefined,\n 'aria-disabled': props.disabled || undefined,\n 'onKeydown': onTriggerKeydown,\n }\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault()\n void openWithFocus(true)\n break\n case 'ArrowUp':\n event.preventDefault()\n void openWithFocus(false)\n break\n case 'Escape':\n if (isOpen.value) {\n event.preventDefault()\n close()\n }\n break\n }\n}\n\nwatch(\n () => props.disabled,\n (value) => {\n if (value)\n close()\n },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n if (value === 'auto')\n return undefined\n if (typeof value === 'number')\n return `${value}px`\n\n // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n const bare = value.trim()\n if (/^\\d+$/.test(bare)) {\n if (__GR_DEV__) {\n console.warn(\n `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n + `width=\"${bare}px\" или :width=\"${bare}\".`,\n )\n }\n return `${bare}px`\n }\n\n return value\n}\n\nconst panelStyle = computed(() => {\n const width = toCssLength(props.width)\n\n return width ? { width } : undefined\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус, а клик приезжает вместе с ними.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-dropdown>\n <GrPopover\n role=\"menu\"\n padding=\"none\"\n :open=\"isOpen\"\n :placement=\"placement\"\n :offset-px=\"offset\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :close-on-content-click=\"closeOnContentClick\"\n :teleport-to=\"teleportTo\"\n :auto-focus=\"false\"\n @update:open=\"setOpen\"\n >\n <template #trigger=\"{ triggerProps: popoverTriggerProps }\">\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n :toggle=\"toggle\"\n :close=\"close\"\n :trigger-props=\"menuTriggerProps(popoverTriggerProps)\"\n />\n </template>\n\n <template #content=\"{ close: closePanel }\">\n <div\n ref=\"menuEl\"\n data-gr-dropdown-panel\n :style=\"panelStyle\"\n @keydown=\"menu.onKeydown\"\n >\n <div data-gr-dropdown-content :class=\"contentClasses\">\n <slot name=\"content\" :close=\"closePanel\" />\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"GrDropdown-7r772-Cq.js","names":[],"sources":["../../../../src/components/GrDropdown/GrDropdown.vue","../../../../src/components/GrDropdown/GrDropdown.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport {\n grDropdownContentClass,\n type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Закрывать панель по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы контейнера content. */\n contentClass?: string\n /**\n * Точечное переопределение точки монтирования. По умолчанию — общий портал\n * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n */\n teleportTo?: string | HTMLElement\n /**\n * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n */\n open?: boolean\n}\n\nexport interface GrDropdownEmits {\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\n/**\n * Меню поверх `GrPopover`.\n *\n * Панель, слой, портал, позиционирование, наведение с задержками и возврат\n * фокуса принадлежат примитиву. До этого здесь жила вторая их реализация:\n * карта `transform-origin` совпадала с поповерской дословно все двенадцать\n * записей, поверхность панели — шесть утилит — была скопирована, а сборка слоя\n * и портала повторяла его же. Расходились бы молча.\n *\n * Меню оставляет себе то, что меню и есть: кольцо фокуса по пунктам, поиск по\n * буквам, клавиатуру открытия и ширину панели. Тот же приём, что у\n * `GrContextMenu`, который так устроен с самого начала.\n */\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n closeOnContentClick: true,\n contentClass: '',\n teleportTo: undefined,\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\n/**\n * Контейнер пунктов — он же контейнер кольца фокуса.\n *\n * Панель `GrPopover` рисует `v-show`, поэтому содержимое слота существует в DOM\n * с монтирования: ссылка готова до первого открытия, и `focusAt` не приходится\n * ждать отрисовки панели.\n */\nconst menuEl = ref<HTMLElement | null>(null)\n\n// Кольцо фокуса и поиск по буквам — общие с `GrContextMenu`: паттерн `menu`\n// один, и вторая его реализация разошлась бы с первой незаметно для тестов.\nconst menu = useMenuItemsFocus({\n container: () => menuEl.value,\n close: () => close(),\n})\n\nfunction open(): void {\n if (props.disabled)\n return\n\n setOpen(true)\n}\n\nfunction close(): void {\n setOpen(false)\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n if (props.disabled)\n return\n\n setOpen(true)\n await nextTick()\n menu.focusAt(first ? 0 : -1)\n}\n\n/**\n * Что меню добавляет к `triggerProps` примитива.\n *\n * Примитив отдаёт ARIA и клик; стрелки, открывающие меню с первого или\n * последнего пункта, принадлежат паттерну `menu` и живут здесь.\n *\n * И `aria-disabled` вместо нативного `disabled`. Расхождение намеренное:\n * нативный атрибут убирает кнопку из таб-порядка, а у меню триггер обязан\n * оставаться фокусируемым — иначе пользователь клавиатуры не найдёт его вовсе и\n * не узнает, почему меню недоступно. Форм-контролу (`GrColorPicker`) верно\n * обратное, поэтому примитив оставляет нативный, а меню его перекрывает.\n */\nfunction menuTriggerProps(popoverProps: Record<string, unknown>): Record<string, unknown> {\n return {\n ...popoverProps,\n 'disabled': undefined,\n 'aria-disabled': props.disabled || undefined,\n 'onKeydown': onTriggerKeydown,\n }\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault()\n void openWithFocus(true)\n break\n case 'ArrowUp':\n event.preventDefault()\n void openWithFocus(false)\n break\n case 'Escape':\n if (isOpen.value) {\n event.preventDefault()\n close()\n }\n break\n }\n}\n\nwatch(\n () => props.disabled,\n (value) => {\n if (value)\n close()\n },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n if (value === 'auto')\n return undefined\n if (typeof value === 'number')\n return `${value}px`\n\n // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n const bare = value.trim()\n if (/^\\d+$/.test(bare)) {\n if (__GR_DEV__) {\n console.warn(\n `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n + `width=\"${bare}px\" или :width=\"${bare}\".`,\n )\n }\n return `${bare}px`\n }\n\n return value\n}\n\nconst panelStyle = computed(() => {\n const width = toCssLength(props.width)\n\n return width ? { width } : undefined\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус, а клик приезжает вместе с ними.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-dropdown>\n <GrPopover\n role=\"menu\"\n padding=\"none\"\n :open=\"isOpen\"\n :placement=\"placement\"\n :offset-px=\"offset\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :close-on-content-click=\"closeOnContentClick\"\n :teleport-to=\"teleportTo\"\n :auto-focus=\"false\"\n @update:open=\"setOpen\"\n >\n <template #trigger=\"{ triggerProps: popoverTriggerProps }\">\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n :toggle=\"toggle\"\n :close=\"close\"\n :trigger-props=\"menuTriggerProps(popoverTriggerProps)\"\n />\n </template>\n\n <template #content=\"{ close: closePanel }\">\n <div\n ref=\"menuEl\"\n data-gr-dropdown-panel\n :style=\"panelStyle\"\n @keydown=\"menu.onKeydown\"\n >\n <div data-gr-dropdown-content :class=\"contentClasses\">\n <slot name=\"content\" :close=\"closePanel\" />\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport {\n grDropdownContentClass,\n type GrDropdownWidth,\n} from './grDropdownStyles'\n\nexport type GrDropdownTrigger = 'click' | 'hover'\n\nexport interface GrDropdownProps {\n /** Размещение панели относительно триггера; `flip` при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Панель не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Закрывать панель по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы контейнера content. */\n contentClass?: string\n /**\n * Точечное переопределение точки монтирования. По умолчанию — общий портал\n * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n */\n teleportTo?: string | HTMLElement\n /**\n * Контролируемое состояние панели (`v-model:open`). Без пропа панель ведёт\n * себя сама (uncontrolled), с ним — слушайте `update:open` и меняйте проп.\n */\n open?: boolean\n}\n\nexport interface GrDropdownEmits {\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\n/**\n * Меню поверх `GrPopover`.\n *\n * Панель, слой, портал, позиционирование, наведение с задержками и возврат\n * фокуса принадлежат примитиву. До этого здесь жила вторая их реализация:\n * карта `transform-origin` совпадала с поповерской дословно все двенадцать\n * записей, поверхность панели — шесть утилит — была скопирована, а сборка слоя\n * и портала повторяла его же. Расходились бы молча.\n *\n * Меню оставляет себе то, что меню и есть: кольцо фокуса по пунктам, поиск по\n * буквам, клавиатуру открытия и ширину панели. Тот же приём, что у\n * `GrContextMenu`, который так устроен с самого начала.\n */\nconst props = withDefaults(defineProps<GrDropdownProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n closeOnContentClick: true,\n contentClass: '',\n teleportTo: undefined,\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownEmits>()\n\n// Имя `isOpen` сохранено: читатели работают с computed-Ref.\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\n/**\n * Контейнер пунктов — он же контейнер кольца фокуса.\n *\n * Панель `GrPopover` рисует `v-show`, поэтому содержимое слота существует в DOM\n * с монтирования: ссылка готова до первого открытия, и `focusAt` не приходится\n * ждать отрисовки панели.\n */\nconst menuEl = ref<HTMLElement | null>(null)\n\n// Кольцо фокуса и поиск по буквам — общие с `GrContextMenu`: паттерн `menu`\n// один, и вторая его реализация разошлась бы с первой незаметно для тестов.\nconst menu = useMenuItemsFocus({\n container: () => menuEl.value,\n close: () => close(),\n})\n\nfunction open(): void {\n if (props.disabled)\n return\n\n setOpen(true)\n}\n\nfunction close(): void {\n setOpen(false)\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nasync function openWithFocus(first: boolean): Promise<void> {\n if (props.disabled)\n return\n\n setOpen(true)\n await nextTick()\n menu.focusAt(first ? 0 : -1)\n}\n\n/**\n * Что меню добавляет к `triggerProps` примитива.\n *\n * Примитив отдаёт ARIA и клик; стрелки, открывающие меню с первого или\n * последнего пункта, принадлежат паттерну `menu` и живут здесь.\n *\n * И `aria-disabled` вместо нативного `disabled`. Расхождение намеренное:\n * нативный атрибут убирает кнопку из таб-порядка, а у меню триггер обязан\n * оставаться фокусируемым — иначе пользователь клавиатуры не найдёт его вовсе и\n * не узнает, почему меню недоступно. Форм-контролу (`GrColorPicker`) верно\n * обратное, поэтому примитив оставляет нативный, а меню его перекрывает.\n */\nfunction menuTriggerProps(popoverProps: Record<string, unknown>): Record<string, unknown> {\n return {\n ...popoverProps,\n 'disabled': undefined,\n 'aria-disabled': props.disabled || undefined,\n 'onKeydown': onTriggerKeydown,\n }\n}\n\nfunction onTriggerKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault()\n void openWithFocus(true)\n break\n case 'ArrowUp':\n event.preventDefault()\n void openWithFocus(false)\n break\n case 'Escape':\n if (isOpen.value) {\n event.preventDefault()\n close()\n }\n break\n }\n}\n\nwatch(\n () => props.disabled,\n (value) => {\n if (value)\n close()\n },\n)\n\nfunction toCssLength(value: GrDropdownWidth): string | undefined {\n if (value === 'auto')\n return undefined\n if (typeof value === 'number')\n return `${value}px`\n\n // Строка без единиц браузер просто отбросит, поэтому трактуем её как пиксели\n // — и предупреждаем: `width=\"48\"` легко прочесть как токен шкалы `w-48`.\n const bare = value.trim()\n if (/^\\d+$/.test(bare)) {\n if (__GR_DEV__) {\n console.warn(\n `[GrDropdown] width=\"${value}\" трактуется как ${bare}px. `\n + 'Шкалы tailwind-токенов (w-48) у пропа больше нет — укажите единицы: '\n + `width=\"${bare}px\" или :width=\"${bare}\".`,\n )\n }\n return `${bare}px`\n }\n\n return value\n}\n\nconst panelStyle = computed(() => {\n const width = toCssLength(props.width)\n\n return width ? { width } : undefined\n})\n\nconst contentClasses = computed(() => grDropdownContentClass(props.contentClass))\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус, а клик приезжает вместе с ними.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-dropdown>\n <GrPopover\n role=\"menu\"\n padding=\"none\"\n :open=\"isOpen\"\n :placement=\"placement\"\n :offset-px=\"offset\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :close-on-content-click=\"closeOnContentClick\"\n :teleport-to=\"teleportTo\"\n :auto-focus=\"false\"\n @update:open=\"setOpen\"\n >\n <template #trigger=\"{ triggerProps: popoverTriggerProps }\">\n <slot\n name=\"trigger\"\n :open=\"isOpen\"\n :toggle=\"toggle\"\n :close=\"close\"\n :trigger-props=\"menuTriggerProps(popoverTriggerProps)\"\n />\n </template>\n\n <template #content=\"{ close: closePanel }\">\n <div\n ref=\"menuEl\"\n data-gr-dropdown-panel\n :style=\"panelStyle\"\n @keydown=\"menu.onKeydown\"\n >\n <div data-gr-dropdown-content :class=\"contentClasses\">\n <slot name=\"content\" :close=\"closePanel\" />\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- import { t as GrDropdown_default } from "./chunks/GrDropdown-CDkPkvIJ.js";
2
- import { n as grDropdownSafelist, t as grDropdownConfig } from "../../chunks/config-DGGaKf4R.js";
1
+ import { t as GrDropdown_default } from "./chunks/GrDropdown-7r772-Cq.js";
2
+ import { n as grDropdownSafelist, t as grDropdownConfig } from "../../chunks/config-CT4lP6S4.js";
3
3
  export { GrDropdown_default as GrDropdown, GrDropdown_default as default, grDropdownConfig, grDropdownSafelist };
@@ -1,6 +1,6 @@
1
1
  import { a as colsClass, o as columnBaseClass, s as columnsBaseClass, t as alignClass } from "../../../chunks/grDropdownMenuStyles-Cf8OdR8S.js";
2
2
  import { n as GrDropdownMenuEntries_default, t as GrDropdownMenuList_default } from "./GrDropdownMenuList-B33ZzwfB.js";
3
- import { t as GrDropdown_default } from "../../GrDropdown/chunks/GrDropdown-CDkPkvIJ.js";
3
+ import { t as GrDropdown_default } from "../../GrDropdown/chunks/GrDropdown-7r772-Cq.js";
4
4
  import { createBlock, createElementBlock, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
5
5
  //#endregion
6
6
  //#region src/components/GrDropdownMenu/GrDropdownMenu.vue
@@ -1 +1 @@
1
- {"version":3,"file":"GrDropdownMenu-DQrZ_yPV.js","names":[],"sources":["../../../../src/components/GrDropdownMenu/GrDropdownMenu.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenu.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumn.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumn.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumns.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumns.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport GrDropdown from '../GrDropdown/GrDropdown.vue'\n// Типы размещения и ширины — из владельца API, а не переобъявлением: расхождение\n// обнаружилось бы только рантаймом.\nimport type { GrDropdownTrigger } from '../GrDropdown/GrDropdown.vue'\nimport type { GrDropdownWidth } from '../GrDropdown/grDropdownStyles'\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\n\nimport GrDropdownMenuEntries from './GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from './GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from './menuModel'\n\nexport interface GrDropdownMenuProps {\n /** Размещение панели относительно триггера; переворот при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Меню не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Куда телепортировать панель (`body` по умолчанию). */\n /** Точечное переопределение точки монтирования; по умолчанию — общий портал. */\n teleportTo?: string | HTMLElement\n /** Закрывать по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы content-контейнера. */\n contentClass?: string\n /**\n * Декларативное меню: пункты, группы и разделители массивом. Слот по\n * умолчанию сильнее — он для меню, которое из модели не собирается.\n */\n items?: GrDropdownMenuEntry[]\n\n // list wrapper\n /** Разделители между пунктами. */\n dividers?: boolean\n /** Верхний бордер контейнера списка. */\n borderTop?: boolean\n /** Нижний бордер контейнера списка. */\n borderBottom?: boolean\n /** Дополнительные классы для wrapper'а списка. */\n listClass?: string\n /**\n * Контролируемое состояние панели (`v-model:open`) — прокидывается в\n * `GrDropdown`. Без пропа меню ведёт себя само (uncontrolled).\n */\n open?: boolean\n}\n\nexport interface GrDropdownMenuEmits {\n /** Выбран пункт декларативного меню. */\n (e: 'select', item: GrDropdownMenuAction): void\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\nwithDefaults(defineProps<GrDropdownMenuProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n teleportTo: undefined,\n closeOnContentClick: true,\n // Поле панели принадлежит панели. Гасить его отсюда своим `p-0` нельзя: оба\n // класса попадают в один атрибут с равной специфичностью, и победителя\n // выбирает порядок правил в сгенерированном CSS, а не разметка. Пункт вписан\n // в это поле собственным радиусом — см. `itemBaseClass`.\n contentClass: '',\n items: undefined,\n dividers: false,\n borderTop: false,\n borderBottom: false,\n listClass: '',\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownMenuEmits>()\n\ndefineSlots<{\n /** Пункты меню. Слот-пропы прокидываются от `GrDropdown` как есть. */\n default?: (props: { close: () => void }) => any\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n}>()\n</script>\n\n<template>\n <GrDropdown\n data-gr-dropdown-menu\n :placement=\"placement\"\n :offset=\"offset\"\n :width=\"width\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :teleport-to=\"teleportTo\"\n :close-on-content-click=\"closeOnContentClick\"\n :content-class=\"contentClass\"\n :open=\"open\"\n @update:open=\"emit('update:open', $event)\"\n >\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #content=\"slotProps\">\n <GrDropdownMenuList\n :dividers=\"dividers\"\n :border-top=\"borderTop\"\n :border-bottom=\"borderBottom\"\n :class=\"listClass\"\n >\n <slot v-bind=\"slotProps\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"emit('select', $event)\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrDropdown>\n</template>\n","<script setup lang=\"ts\">\nimport GrDropdown from '../GrDropdown/GrDropdown.vue'\n// Типы размещения и ширины — из владельца API, а не переобъявлением: расхождение\n// обнаружилось бы только рантаймом.\nimport type { GrDropdownTrigger } from '../GrDropdown/GrDropdown.vue'\nimport type { GrDropdownWidth } from '../GrDropdown/grDropdownStyles'\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\n\nimport GrDropdownMenuEntries from './GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from './GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from './menuModel'\n\nexport interface GrDropdownMenuProps {\n /** Размещение панели относительно триггера; переворот при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Меню не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Куда телепортировать панель (`body` по умолчанию). */\n /** Точечное переопределение точки монтирования; по умолчанию — общий портал. */\n teleportTo?: string | HTMLElement\n /** Закрывать по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы content-контейнера. */\n contentClass?: string\n /**\n * Декларативное меню: пункты, группы и разделители массивом. Слот по\n * умолчанию сильнее — он для меню, которое из модели не собирается.\n */\n items?: GrDropdownMenuEntry[]\n\n // list wrapper\n /** Разделители между пунктами. */\n dividers?: boolean\n /** Верхний бордер контейнера списка. */\n borderTop?: boolean\n /** Нижний бордер контейнера списка. */\n borderBottom?: boolean\n /** Дополнительные классы для wrapper'а списка. */\n listClass?: string\n /**\n * Контролируемое состояние панели (`v-model:open`) — прокидывается в\n * `GrDropdown`. Без пропа меню ведёт себя само (uncontrolled).\n */\n open?: boolean\n}\n\nexport interface GrDropdownMenuEmits {\n /** Выбран пункт декларативного меню. */\n (e: 'select', item: GrDropdownMenuAction): void\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\nwithDefaults(defineProps<GrDropdownMenuProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n teleportTo: undefined,\n closeOnContentClick: true,\n // Поле панели принадлежит панели. Гасить его отсюда своим `p-0` нельзя: оба\n // класса попадают в один атрибут с равной специфичностью, и победителя\n // выбирает порядок правил в сгенерированном CSS, а не разметка. Пункт вписан\n // в это поле собственным радиусом — см. `itemBaseClass`.\n contentClass: '',\n items: undefined,\n dividers: false,\n borderTop: false,\n borderBottom: false,\n listClass: '',\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownMenuEmits>()\n\ndefineSlots<{\n /** Пункты меню. Слот-пропы прокидываются от `GrDropdown` как есть. */\n default?: (props: { close: () => void }) => any\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n}>()\n</script>\n\n<template>\n <GrDropdown\n data-gr-dropdown-menu\n :placement=\"placement\"\n :offset=\"offset\"\n :width=\"width\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :teleport-to=\"teleportTo\"\n :close-on-content-click=\"closeOnContentClick\"\n :content-class=\"contentClass\"\n :open=\"open\"\n @update:open=\"emit('update:open', $event)\"\n >\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #content=\"slotProps\">\n <GrDropdownMenuList\n :dividers=\"dividers\"\n :border-top=\"borderTop\"\n :border-bottom=\"borderBottom\"\n :class=\"listClass\"\n >\n <slot v-bind=\"slotProps\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"emit('select', $event)\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrDropdown>\n</template>\n","<script setup lang=\"ts\">\nimport { alignClass, columnBaseClass, type GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport type { GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnProps {\n align?: GrDropdownMenuColumnAlign\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnProps>(), {\n align: 'center',\n})\n\ndefineSlots<{\n /** Содержимое колонки меню. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-column\n role=\"none\"\n :class=\"[columnBaseClass, alignClass[align]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { alignClass, columnBaseClass, type GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport type { GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnProps {\n align?: GrDropdownMenuColumnAlign\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnProps>(), {\n align: 'center',\n})\n\ndefineSlots<{\n /** Содержимое колонки меню. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-column\n role=\"none\"\n :class=\"[columnBaseClass, alignClass[align]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { colsClass, columnsBaseClass, type GrDropdownMenuColumnsCount } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnsProps {\n cols?: GrDropdownMenuColumnsCount\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnsProps>(), {\n cols: 2,\n})\n\ndefineSlots<{\n /** Колонки меню (`GrDropdownMenuColumn`). */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-columns\n role=\"none\"\n :class=\"[columnsBaseClass, colsClass[cols]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { colsClass, columnsBaseClass, type GrDropdownMenuColumnsCount } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnsProps {\n cols?: GrDropdownMenuColumnsCount\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnsProps>(), {\n cols: 2,\n})\n\ndefineSlots<{\n /** Колонки меню (`GrDropdownMenuColumn`). */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-columns\n role=\"none\"\n :class=\"[columnsBaseClass, colsClass[cols]]\"\n >\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFA,MAAM,OAAO;;uBAoBX,YA+Ba,oBAAA;IA9BX,yBAAA;IACC,WAAW,QAAA;IACX,QAAQ,QAAA;IACR,OAAO,QAAA;IACP,SAAS,QAAA;IACT,cAAY,QAAA;IACZ,eAAa,QAAA;IACb,UAAU,QAAA;IACV,eAAa,QAAA;IACb,0BAAwB,QAAA;IACxB,iBAAe,QAAA;IACf,MAAM,QAAA;IACN,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,MAAM;;IAE7B,SAAO,SAAE,cAAS,CAC3B,WAA0C,KAAA,QAAA,WAAA,eAAA,mBAAb,SAAS,CAAA,CAAA,CAAA,CAAA;IAG7B,SAAO,SAAE,cAAS,CAC3B,YASqB,4BAAA;KARlB,UAAU,QAAA;KACV,cAAY,QAAA;KACZ,iBAAe,QAAA;KACf,OAAK,eAAE,QAAA,SAAS;;4BAIV,CAFP,WAEO,KAAA,QAAA,WAAA,eAAA,mBAFO,SAAS,CAAA,SAEhB,CADL,YAAyE,+BAAA;MAAjD,OAAO,QAAA;MAAQ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBEjH5E,mBAMM,OAAA;IALJ,gCAAA;IACA,MAAK;IACJ,OAAK,eAAA,CAAG,MAAA,eAAA,GAAiB,MAAA,UAAA,CAAU,CAAC,QAAA,MAAK,CAAA;OAE1C,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;;;;;;;;;;;uBEPV,mBAMM,OAAA;IALJ,iCAAA;IACA,MAAK;IACJ,OAAK,eAAA,CAAG,MAAA,gBAAA,GAAkB,MAAA,SAAA,CAAS,CAAC,QAAA,KAAI,CAAA;OAEzC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"GrDropdownMenu-DNurbsWc.js","names":[],"sources":["../../../../src/components/GrDropdownMenu/GrDropdownMenu.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenu.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumn.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumn.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumns.vue","../../../../src/components/GrDropdownMenu/GrDropdownMenuColumns.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport GrDropdown from '../GrDropdown/GrDropdown.vue'\n// Типы размещения и ширины — из владельца API, а не переобъявлением: расхождение\n// обнаружилось бы только рантаймом.\nimport type { GrDropdownTrigger } from '../GrDropdown/GrDropdown.vue'\nimport type { GrDropdownWidth } from '../GrDropdown/grDropdownStyles'\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\n\nimport GrDropdownMenuEntries from './GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from './GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from './menuModel'\n\nexport interface GrDropdownMenuProps {\n /** Размещение панели относительно триггера; переворот при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Меню не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Куда телепортировать панель (`body` по умолчанию). */\n /** Точечное переопределение точки монтирования; по умолчанию — общий портал. */\n teleportTo?: string | HTMLElement\n /** Закрывать по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы content-контейнера. */\n contentClass?: string\n /**\n * Декларативное меню: пункты, группы и разделители массивом. Слот по\n * умолчанию сильнее — он для меню, которое из модели не собирается.\n */\n items?: GrDropdownMenuEntry[]\n\n // list wrapper\n /** Разделители между пунктами. */\n dividers?: boolean\n /** Верхний бордер контейнера списка. */\n borderTop?: boolean\n /** Нижний бордер контейнера списка. */\n borderBottom?: boolean\n /** Дополнительные классы для wrapper'а списка. */\n listClass?: string\n /**\n * Контролируемое состояние панели (`v-model:open`) — прокидывается в\n * `GrDropdown`. Без пропа меню ведёт себя само (uncontrolled).\n */\n open?: boolean\n}\n\nexport interface GrDropdownMenuEmits {\n /** Выбран пункт декларативного меню. */\n (e: 'select', item: GrDropdownMenuAction): void\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\nwithDefaults(defineProps<GrDropdownMenuProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n teleportTo: undefined,\n closeOnContentClick: true,\n // Поле панели принадлежит панели. Гасить его отсюда своим `p-0` нельзя: оба\n // класса попадают в один атрибут с равной специфичностью, и победителя\n // выбирает порядок правил в сгенерированном CSS, а не разметка. Пункт вписан\n // в это поле собственным радиусом — см. `itemBaseClass`.\n contentClass: '',\n items: undefined,\n dividers: false,\n borderTop: false,\n borderBottom: false,\n listClass: '',\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownMenuEmits>()\n\ndefineSlots<{\n /** Пункты меню. Слот-пропы прокидываются от `GrDropdown` как есть. */\n default?: (props: { close: () => void }) => any\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n}>()\n</script>\n\n<template>\n <GrDropdown\n data-gr-dropdown-menu\n :placement=\"placement\"\n :offset=\"offset\"\n :width=\"width\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :teleport-to=\"teleportTo\"\n :close-on-content-click=\"closeOnContentClick\"\n :content-class=\"contentClass\"\n :open=\"open\"\n @update:open=\"emit('update:open', $event)\"\n >\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #content=\"slotProps\">\n <GrDropdownMenuList\n :dividers=\"dividers\"\n :border-top=\"borderTop\"\n :border-bottom=\"borderBottom\"\n :class=\"listClass\"\n >\n <slot v-bind=\"slotProps\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"emit('select', $event)\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrDropdown>\n</template>\n","<script setup lang=\"ts\">\nimport GrDropdown from '../GrDropdown/GrDropdown.vue'\n// Типы размещения и ширины — из владельца API, а не переобъявлением: расхождение\n// обнаружилось бы только рантаймом.\nimport type { GrDropdownTrigger } from '../GrDropdown/GrDropdown.vue'\nimport type { GrDropdownWidth } from '../GrDropdown/grDropdownStyles'\nimport type { UseFloatingPlacement } from '../../composables/useFloating'\n\nimport GrDropdownMenuEntries from './GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from './GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from './menuModel'\n\nexport interface GrDropdownMenuProps {\n /** Размещение панели относительно триггера; переворот при нехватке места остаётся. */\n placement?: UseFloatingPlacement\n /** Зазор между триггером и панелью, px. */\n offset?: number\n /** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\n width?: GrDropdownWidth\n /** Чем открывается панель. В любом режиме работают клик и клавиатура. */\n trigger?: GrDropdownTrigger\n /** Задержка открытия по наведению, мс. */\n openDelay?: number\n /** Задержка закрытия после ухода курсора, мс. */\n closeDelay?: number\n /** Меню не открывается ничем; триггер остаётся фокусируемым. */\n disabled?: boolean\n /** Куда телепортировать панель (`body` по умолчанию). */\n /** Точечное переопределение точки монтирования; по умолчанию — общий портал. */\n teleportTo?: string | HTMLElement\n /** Закрывать по клику внутри content. */\n closeOnContentClick?: boolean\n /** Дополнительные классы content-контейнера. */\n contentClass?: string\n /**\n * Декларативное меню: пункты, группы и разделители массивом. Слот по\n * умолчанию сильнее — он для меню, которое из модели не собирается.\n */\n items?: GrDropdownMenuEntry[]\n\n // list wrapper\n /** Разделители между пунктами. */\n dividers?: boolean\n /** Верхний бордер контейнера списка. */\n borderTop?: boolean\n /** Нижний бордер контейнера списка. */\n borderBottom?: boolean\n /** Дополнительные классы для wrapper'а списка. */\n listClass?: string\n /**\n * Контролируемое состояние панели (`v-model:open`) — прокидывается в\n * `GrDropdown`. Без пропа меню ведёт себя само (uncontrolled).\n */\n open?: boolean\n}\n\nexport interface GrDropdownMenuEmits {\n /** Выбран пункт декларативного меню. */\n (e: 'select', item: GrDropdownMenuAction): void\n /** Панель открылась/закрылась (`v-model:open`). */\n (e: 'update:open', value: boolean): void\n}\n\nwithDefaults(defineProps<GrDropdownMenuProps>(), {\n placement: 'bottom-end',\n offset: 8,\n width: '12rem',\n trigger: 'click',\n openDelay: 120,\n closeDelay: 160,\n disabled: false,\n teleportTo: undefined,\n closeOnContentClick: true,\n // Поле панели принадлежит панели. Гасить его отсюда своим `p-0` нельзя: оба\n // класса попадают в один атрибут с равной специфичностью, и победителя\n // выбирает порядок правил в сгенерированном CSS, а не разметка. Пункт вписан\n // в это поле собственным радиусом — см. `itemBaseClass`.\n contentClass: '',\n items: undefined,\n dividers: false,\n borderTop: false,\n borderBottom: false,\n listClass: '',\n open: undefined,\n})\n\nconst emit = defineEmits<GrDropdownMenuEmits>()\n\ndefineSlots<{\n /** Пункты меню. Слот-пропы прокидываются от `GrDropdown` как есть. */\n default?: (props: { close: () => void }) => any\n /**\n * Триггер панели. `triggerProps` обязаны попасть на сам интерактивный\n * элемент, а не на обёртку вокруг него: `aria-expanded` и `aria-controls`\n * читаются с того узла, который получает фокус.\n */\n trigger?: (props: {\n open: boolean\n toggle: () => void\n close: () => void\n triggerProps: Record<string, unknown>\n }) => any\n}>()\n</script>\n\n<template>\n <GrDropdown\n data-gr-dropdown-menu\n :placement=\"placement\"\n :offset=\"offset\"\n :width=\"width\"\n :trigger=\"trigger\"\n :open-delay=\"openDelay\"\n :close-delay=\"closeDelay\"\n :disabled=\"disabled\"\n :teleport-to=\"teleportTo\"\n :close-on-content-click=\"closeOnContentClick\"\n :content-class=\"contentClass\"\n :open=\"open\"\n @update:open=\"emit('update:open', $event)\"\n >\n <template #trigger=\"slotProps\">\n <slot name=\"trigger\" v-bind=\"slotProps\" />\n </template>\n\n <template #content=\"slotProps\">\n <GrDropdownMenuList\n :dividers=\"dividers\"\n :border-top=\"borderTop\"\n :border-bottom=\"borderBottom\"\n :class=\"listClass\"\n >\n <slot v-bind=\"slotProps\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"emit('select', $event)\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrDropdown>\n</template>\n","<script setup lang=\"ts\">\nimport { alignClass, columnBaseClass, type GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport type { GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnProps {\n align?: GrDropdownMenuColumnAlign\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnProps>(), {\n align: 'center',\n})\n\ndefineSlots<{\n /** Содержимое колонки меню. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-column\n role=\"none\"\n :class=\"[columnBaseClass, alignClass[align]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { alignClass, columnBaseClass, type GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport type { GrDropdownMenuColumnAlign } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnProps {\n align?: GrDropdownMenuColumnAlign\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnProps>(), {\n align: 'center',\n})\n\ndefineSlots<{\n /** Содержимое колонки меню. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-column\n role=\"none\"\n :class=\"[columnBaseClass, alignClass[align]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { colsClass, columnsBaseClass, type GrDropdownMenuColumnsCount } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnsProps {\n cols?: GrDropdownMenuColumnsCount\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnsProps>(), {\n cols: 2,\n})\n\ndefineSlots<{\n /** Колонки меню (`GrDropdownMenuColumn`). */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-columns\n role=\"none\"\n :class=\"[columnsBaseClass, colsClass[cols]]\"\n >\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { colsClass, columnsBaseClass, type GrDropdownMenuColumnsCount } from './grDropdownMenuStyles'\n\nexport interface GrDropdownMenuColumnsProps {\n cols?: GrDropdownMenuColumnsCount\n}\n\nwithDefaults(defineProps<GrDropdownMenuColumnsProps>(), {\n cols: 2,\n})\n\ndefineSlots<{\n /** Колонки меню (`GrDropdownMenuColumn`). */\n default?: () => any\n}>()\n</script>\n\n<template>\n <div\n data-gr-dropdown-menu-columns\n role=\"none\"\n :class=\"[columnsBaseClass, colsClass[cols]]\"\n >\n <slot />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsFA,MAAM,OAAO;;uBAoBX,YA+Ba,oBAAA;IA9BX,yBAAA;IACC,WAAW,QAAA;IACX,QAAQ,QAAA;IACR,OAAO,QAAA;IACP,SAAS,QAAA;IACT,cAAY,QAAA;IACZ,eAAa,QAAA;IACb,UAAU,QAAA;IACV,eAAa,QAAA;IACb,0BAAwB,QAAA;IACxB,iBAAe,QAAA;IACf,MAAM,QAAA;IACN,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,eAAgB,MAAM;;IAE7B,SAAO,SAAE,cAAS,CAC3B,WAA0C,KAAA,QAAA,WAAA,eAAA,mBAAb,SAAS,CAAA,CAAA,CAAA,CAAA;IAG7B,SAAO,SAAE,cAAS,CAC3B,YASqB,4BAAA;KARlB,UAAU,QAAA;KACV,cAAY,QAAA;KACZ,iBAAe,QAAA;KACf,OAAK,eAAE,QAAA,SAAS;;4BAIV,CAFP,WAEO,KAAA,QAAA,WAAA,eAAA,mBAFO,SAAS,CAAA,SAEhB,CADL,YAAyE,+BAAA;MAAjD,OAAO,QAAA;MAAQ,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBEjH5E,mBAMM,OAAA;IALJ,gCAAA;IACA,MAAK;IACJ,OAAK,eAAA,CAAG,MAAA,eAAA,GAAiB,MAAA,UAAA,CAAU,CAAC,QAAA,MAAK,CAAA;OAE1C,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;;;;;;;;;;;uBEPV,mBAMM,OAAA;IALJ,iCAAA;IACA,MAAK;IACJ,OAAK,eAAA,CAAG,MAAA,gBAAA,GAAkB,MAAA,SAAA,CAAS,CAAC,QAAA,KAAI,CAAA;OAEzC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}
@@ -1,4 +1,4 @@
1
1
  import { a as GrDropdownMenuItem_default, c as GrDropdownMenuDivider_default, o as GrDropdownMenuGroup_default, s as GrDropdownMenuHeader_default, t as GrDropdownMenuList_default } from "./chunks/GrDropdownMenuList-B33ZzwfB.js";
2
- import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./chunks/GrDropdownMenu-DQrZ_yPV.js";
2
+ import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./chunks/GrDropdownMenu-DNurbsWc.js";
3
3
  import { n as grDropdownMenuSafelist, t as grDropdownMenuConfig } from "../../chunks/config-_jbgsFpw.js";
4
4
  export { GrDropdownMenu_default as GrDropdownMenu, GrDropdownMenu_default as default, GrDropdownMenuColumn_default as GrDropdownMenuColumn, GrDropdownMenuColumns_default as GrDropdownMenuColumns, GrDropdownMenuDivider_default as GrDropdownMenuDivider, GrDropdownMenuGroup_default as GrDropdownMenuGroup, GrDropdownMenuHeader_default as GrDropdownMenuHeader, GrDropdownMenuItem_default as GrDropdownMenuItem, GrDropdownMenuList_default as GrDropdownMenuList, grDropdownMenuConfig, grDropdownMenuSafelist };
@@ -4,7 +4,7 @@ import { createFloatingAnchor, useFloating } from "../../../composables/useFloat
4
4
  import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
5
5
  import { n as panelPopTransition } from "../../../chunks/overlayPanelSurface-BKeMhRx4.js";
6
6
  import { t as useModalOverlay } from "../../../chunks/useModalOverlay-BnAGZpcI.js";
7
- import { t as grPopoverPanelClass } from "../../../chunks/grPopoverStyles-DKwigt7b.js";
7
+ import { t as grPopoverPanelClass } from "../../../chunks/grPopoverStyles-CYAeO3Ov.js";
8
8
  import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useId, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
9
9
  //#region src/components/GrPopover/GrPopover.vue?vue&type=script&setup=true&lang.ts
10
10
  var _hoisted_1 = { "data-gr-popover": "" };