@feugene/granularity 0.33.0 → 0.34.0

package/dist/components/GrPopover/chunks/GrPopover-faJanmGs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrPopover-faJanmGs.js","names":[],"sources":["../../../../src/components/GrPopover/GrPopover.vue","../../../../src/components/GrPopover/GrPopover.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPopover — якорный немодальный оверлей с произвольным содержимым.\n *\n * Роль «универсального поповера» до сих пор насильно исполнял `GrDropdown`, но\n * он про меню: жёстко объявляет `role=\"menu\"`, `aria-haspopup=\"menu\"` и водит\n * фокус по пунктам. Для формы, подтверждения или палитры это неверная семантика.\n *\n * Здесь наоборот: позиционирование, слой и закрытие берёт на себя примитив, а\n * клавиатурный паттерн внутри панели остаётся за потребителем — поэтому `role`\n * задаётся пропом. На этом собираются `GrMenu` / `GrContextMenu` /\n * `GrColorPicker` / Popconfirm.\n *\n * A11y:\n * - триггер получает `aria-haspopup`/`aria-expanded`/`aria-controls` через\n *   `triggerProps` (биндится на реальный фокусируемый элемент в слоте);\n * - панель — `role=\"dialog\"` по умолчанию и обязательное доступное имя\n *   (`ariaLabel` либо `aria-labelledby` через `labelledBy`);\n * - Esc закрывает верхний слой стека, клик вне — закрывает по точке попадания;\n * - **по умолчанию фокус-ловушки нет намеренно**: Tab обязан уводить фокус\n *   наружу, иначе немодальный слой запирает пользователя на странице, которая\n *   не заблокирована. Проп `modal` включает второй режим — см. ниже.\n */\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport { createFloatingAnchor, type GrFloatingAnchorRect, useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { vClickOutside } from '../../directives'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport {\n  type GrPopoverPadding,\n  type GrPopoverRole,\n  type GrPopoverSize,\n  grPopoverPanelClass,\n} from './grPopoverStyles'\n\nexport interface GrPopoverProps {\n  /**\n   * Открыт ли поповер. Без этого пропа компонент ведёт состояние сам\n   * (uncontrolled), с ним — слушайте `update:open`.\n   */\n  open?: boolean\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  size?: GrPopoverSize\n  /** Роль панели. Меняется теми, кто строит поверх примитива своё меню/список. */\n  role?: GrPopoverRole\n  /**\n   * Модальный режим: фон уходит в `inert`, Tab ходит по кругу внутри панели,\n   * скролл страницы блокируется, а слой встаёт в стек модальным — как окно.\n   * Нужен поповеру с формой или подтверждением внутри: без изоляции фона\n   * пользователь уводит фокус на страницу, к которой поповер и относится.\n   *\n   * В этом режиме фокус переносится в панель независимо от `autoFocus`: фон\n   * недоступен, и слой без фокуса внутри стал бы клавиатурной ловушкой.\n   */\n  modal?: boolean\n  /** Доступное имя панели. Обязательно для `role=\"dialog\"` без видимого заголовка. */\n  ariaLabel?: string\n  /** `id` видимого заголовка внутри панели — альтернатива `ariaLabel`. */\n  labelledBy?: string\n  /**\n   * `manual` — открывать только программно (через `v-model:open`). Нужно для\n   * контекстного меню и подтверждений, где момент открытия решает потребитель.\n   */\n  trigger?: 'click' | 'manual'\n  closeOnEsc?: boolean\n  closeOnClickOutside?: boolean\n  /** Закрывать по клику внутри панели — удобно для меню, вредно для формы. */\n  closeOnContentClick?: boolean\n  /**\n   * Переносить фокус на панель при открытии. Именно на панель, а не на первый\n   * контрол внутри: сфокусировать поле ввода за пользователя — решение\n   * содержимого, а не оболочки.\n   */\n  autoFocus?: boolean\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  contentClass?: string\n  disabled?: boolean\n  /**\n   * Якорь-прямоугольник в координатах вьюпорта вместо обёртки слота `#trigger`:\n   * панель встаёт у точки курсора или у строки списка. Нужен контекстному меню,\n   * у которого триггера-элемента нет вовсе.\n   *\n   * `triggerProps` в этом режиме некому потребить, и своих ARIA-атрибутов\n   * поповер никуда не вешает: `aria-haspopup` невалиден вне интерактивного\n   * элемента, а `aria-expanded` без хозяина — шум. Связь с содержимым страницы\n   * объявляет тот, кто открывает.\n   */\n  anchor?: GrFloatingAnchorRect | null\n  /** Поле панели. `none` — содержимое рисует своё (меню, список опций). */\n  padding?: GrPopoverPadding\n}\n\nexport interface GrPopoverEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrPopoverProps>(), {\n  open: undefined,\n  placement: 'bottom-start',\n  offsetPx: 8,\n  size: undefined,\n  role: 'dialog',\n  modal: false,\n  ariaLabel: undefined,\n  labelledBy: undefined,\n  trigger: 'click',\n  closeOnEsc: true,\n  closeOnClickOutside: true,\n  closeOnContentClick: false,\n  autoFocus: true,\n  teleportTo: undefined,\n  contentClass: undefined,\n  disabled: false,\n  anchor: undefined,\n  padding: 'default',\n})\n\nconst emit = defineEmits<GrPopoverEmits>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrPopover' })\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst panelId = useId()\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nfunction open(): void {\n  if (props.disabled)\n    return\n  setOpen(true)\n}\n\nfunction close(): void {\n  setOpen(false)\n}\n\nfunction toggle(): void {\n  isOpen.value ? close() : open()\n}\n\n/**\n * Якорь создаётся один раз и читает координаты геттером: `useFloating`\n * пересоздаёт подписку при смене самой ссылки, а точка меняется на каждый\n * вызов — новый объект рвал бы `autoUpdate` без нужды.\n */\nconst anchorEl = createFloatingAnchor(() => props.anchor)\n\n/** Обёртка триггера существует только вместе со слотом — см. проп `anchor`. */\nconst hasTrigger = computed(() => Boolean(slots.trigger))\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  () => (props.anchor ? anchorEl : rootEl.value),\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    offsetPx: props.offsetPx,\n    // Своего слоя у поповера нет намеренно: он и дропдаун — один класс якорных\n    // немодальных оверлеев и обязаны лежать на одной высоте, иначе начнут\n    // перекрывать друг друга в зависимости от порядка открытия.\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\nwatch(() => props.placement, () => {\n  if (isOpen.value)\n    updateFloatingPosition()\n})\n\n// Объект якоря стабилен, поэтому смену координат `useFloating` сам не заметит:\n// повторный вызов у другой точки — это пересчёт позиции, а не переоткрытие.\nwatch(() => props.anchor, () => {\n  if (isOpen.value)\n    updateFloatingPosition()\n}, { deep: true })\n\n/**\n * Слой стека оверлеев: очередь Esc общая с модалками, поэтому поповер, открытый\n * внутри модалки, по Esc закрывает себя, а не её. Возврат фокуса на триггер\n * тоже отсюда — по правилу «только если на момент закрытия фокус ещё внутри».\n *\n * Модальность включается пропом и приходит той же сборкой, что у окна и drawer'а\n * (`useModalOverlay`): ловушка фокуса, `inert` фона, блокировка скролла. При\n * `modal: false` не включается ничего из этого — дефолтный поповер немодален.\n *\n * Корень слоя и панель здесь один элемент: якорный оверлей уезжает в портал сам,\n * без обёртки.\n */\nconst { inertAttr, portalTarget, teleportEnabled, themeAttrs } = useModalOverlay(isOpen, close, {\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc,\n  panel: panelEl,\n  root: panelEl,\n  teleportTo: () => props.teleportTo,\n  initialFocus: () => panelEl.value,\n})\n\n// Фокус переносим после отрисовки панели: до `nextTick` её ещё нет в DOM.\n// В модальном режиме перенос обязателен: фон в `inert`, и фокус, оставленный\n// снаружи, попал бы в недоступное поддерево.\nwatch(isOpen, async (next) => {\n  if (!next || !(props.autoFocus || props.modal))\n    return\n\n  await nextTick()\n  panelEl.value?.focus()\n})\n\n/** Роли, которые `aria-haspopup` действительно понимает. */\nconst HASPOPUP_ROLES = ['dialog', 'menu', 'listbox', 'grid'] as const\n\n/**\n * Пропсы для реального фокусируемого триггера: `<button v-bind=\"triggerProps\">`.\n * Клик вешается на обёртку, а ARIA — сюда, потому что `aria-expanded` обязан\n * жить на самом интерактивном элементе, а не на `div` вокруг него.\n */\nconst triggerProps = computed(() => ({\n  // `aria-haspopup` принимает не любую роль: `group` в его списке нет, и\n  // объявленный им триггер отдавал бы невалидный атрибут, который AT просто\n  // отбрасывает. Роли вне списка сообщают о панели только через `aria-expanded`.\n  'aria-haspopup': HASPOPUP_ROLES.includes(props.role as (typeof HASPOPUP_ROLES)[number])\n    ? (props.role as (typeof HASPOPUP_ROLES)[number])\n    : undefined,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'disabled': props.disabled || undefined,\n}))\n\nfunction onTriggerClick(): void {\n  if (props.trigger === 'click')\n    toggle()\n}\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick)\n    close()\n}\n\nconst panelClasses = computed(() =>\n  grPopoverPanelClass(resolvedSize.value, resolvedPlacement.value, props.contentClass, props.padding),\n)\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-popover>\n    <div\n      v-if=\"hasTrigger\"\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside, exclude: clickOutsideExclude }\"\n      data-gr-popover-trigger\n      class=\"inline-block max-w-full\"\n      @click=\"onTriggerClick\"\n    >\n      <slot\n        name=\"trigger\"\n        :open=\"isOpen\"\n        :toggle=\"toggle\"\n        :close=\"close\"\n        :trigger-props=\"triggerProps\"\n      />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside && !hasTrigger }\"\n          v-bind=\"themeAttrs\"\n          data-gr-popover-panel\n          data-gr-overlay-root\n          :role=\"role === 'none' ? undefined : role\"\n          :aria-modal=\"modal ? 'true' : undefined\"\n          :inert=\"inertAttr\"\n          :aria-label=\"labelledBy ? undefined : ariaLabel\"\n          :aria-labelledby=\"labelledBy\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"floatingStyle\"\n          @click=\"onContentClick\"\n        >\n          <slot name=\"content\" :close=\"close\" />\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPopover — якорный немодальный оверлей с произвольным содержимым.\n *\n * Роль «универсального поповера» до сих пор насильно исполнял `GrDropdown`, но\n * он про меню: жёстко объявляет `role=\"menu\"`, `aria-haspopup=\"menu\"` и водит\n * фокус по пунктам. Для формы, подтверждения или палитры это неверная семантика.\n *\n * Здесь наоборот: позиционирование, слой и закрытие берёт на себя примитив, а\n * клавиатурный паттерн внутри панели остаётся за потребителем — поэтому `role`\n * задаётся пропом. На этом собираются `GrMenu` / `GrContextMenu` /\n * `GrColorPicker` / Popconfirm.\n *\n * A11y:\n * - триггер получает `aria-haspopup`/`aria-expanded`/`aria-controls` через\n *   `triggerProps` (биндится на реальный фокусируемый элемент в слоте);\n * - панель — `role=\"dialog\"` по умолчанию и обязательное доступное имя\n *   (`ariaLabel` либо `aria-labelledby` через `labelledBy`);\n * - Esc закрывает верхний слой стека, клик вне — закрывает по точке попадания;\n * - **по умолчанию фокус-ловушки нет намеренно**: Tab обязан уводить фокус\n *   наружу, иначе немодальный слой запирает пользователя на странице, которая\n *   не заблокирована. Проп `modal` включает второй режим — см. ниже.\n */\nimport { computed, nextTick, ref, useId, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport { createFloatingAnchor, type GrFloatingAnchorRect, useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { vClickOutside } from '../../directives'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport {\n  type GrPopoverPadding,\n  type GrPopoverRole,\n  type GrPopoverSize,\n  grPopoverPanelClass,\n} from './grPopoverStyles'\n\nexport interface GrPopoverProps {\n  /**\n   * Открыт ли поповер. Без этого пропа компонент ведёт состояние сам\n   * (uncontrolled), с ним — слушайте `update:open`.\n   */\n  open?: boolean\n  placement?: UseFloatingPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  size?: GrPopoverSize\n  /** Роль панели. Меняется теми, кто строит поверх примитива своё меню/список. */\n  role?: GrPopoverRole\n  /**\n   * Модальный режим: фон уходит в `inert`, Tab ходит по кругу внутри панели,\n   * скролл страницы блокируется, а слой встаёт в стек модальным — как окно.\n   * Нужен поповеру с формой или подтверждением внутри: без изоляции фона\n   * пользователь уводит фокус на страницу, к которой поповер и относится.\n   *\n   * В этом режиме фокус переносится в панель независимо от `autoFocus`: фон\n   * недоступен, и слой без фокуса внутри стал бы клавиатурной ловушкой.\n   */\n  modal?: boolean\n  /** Доступное имя панели. Обязательно для `role=\"dialog\"` без видимого заголовка. */\n  ariaLabel?: string\n  /** `id` видимого заголовка внутри панели — альтернатива `ariaLabel`. */\n  labelledBy?: string\n  /**\n   * `manual` — открывать только программно (через `v-model:open`). Нужно для\n   * контекстного меню и подтверждений, где момент открытия решает потребитель.\n   */\n  trigger?: 'click' | 'manual'\n  closeOnEsc?: boolean\n  closeOnClickOutside?: boolean\n  /** Закрывать по клику внутри панели — удобно для меню, вредно для формы. */\n  closeOnContentClick?: boolean\n  /**\n   * Переносить фокус на панель при открытии. Именно на панель, а не на первый\n   * контрол внутри: сфокусировать поле ввода за пользователя — решение\n   * содержимого, а не оболочки.\n   */\n  autoFocus?: boolean\n  /**\n   * Точечное переопределение точки монтирования. По умолчанию — общий портал\n   * оверлеев (`#gr-portal` либо `portalTarget` из `GrConfigProvider`).\n   */\n  teleportTo?: string | HTMLElement\n  contentClass?: string\n  disabled?: boolean\n  /**\n   * Якорь-прямоугольник в координатах вьюпорта вместо обёртки слота `#trigger`:\n   * панель встаёт у точки курсора или у строки списка. Нужен контекстному меню,\n   * у которого триггера-элемента нет вовсе.\n   *\n   * `triggerProps` в этом режиме некому потребить, и своих ARIA-атрибутов\n   * поповер никуда не вешает: `aria-haspopup` невалиден вне интерактивного\n   * элемента, а `aria-expanded` без хозяина — шум. Связь с содержимым страницы\n   * объявляет тот, кто открывает.\n   */\n  anchor?: GrFloatingAnchorRect | null\n  /** Поле панели. `none` — содержимое рисует своё (меню, список опций). */\n  padding?: GrPopoverPadding\n}\n\nexport interface GrPopoverEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrPopoverProps>(), {\n  open: undefined,\n  placement: 'bottom-start',\n  offsetPx: 8,\n  size: undefined,\n  role: 'dialog',\n  modal: false,\n  ariaLabel: undefined,\n  labelledBy: undefined,\n  trigger: 'click',\n  closeOnEsc: true,\n  closeOnClickOutside: true,\n  closeOnContentClick: false,\n  autoFocus: true,\n  teleportTo: undefined,\n  contentClass: undefined,\n  disabled: false,\n  anchor: undefined,\n  padding: 'default',\n})\n\nconst emit = defineEmits<GrPopoverEmits>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrPopover' })\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n  () => props.open,\n  next => emit('update:open', next),\n)\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst panelId = useId()\n\nconst clickOutsideExclude = [() => panelEl.value]\n\nfunction open(): void {\n  if (props.disabled)\n    return\n  setOpen(true)\n}\n\nfunction close(): void {\n  setOpen(false)\n}\n\nfunction toggle(): void {\n  isOpen.value ? close() : open()\n}\n\n/**\n * Якорь создаётся один раз и читает координаты геттером: `useFloating`\n * пересоздаёт подписку при смене самой ссылки, а точка меняется на каждый\n * вызов — новый объект рвал бы `autoUpdate` без нужды.\n */\nconst anchorEl = createFloatingAnchor(() => props.anchor)\n\n/** Обёртка триггера существует только вместе со слотом — см. проп `anchor`. */\nconst hasTrigger = computed(() => Boolean(slots.trigger))\n\nconst { floatingStyle, resolvedPlacement, update: updateFloatingPosition } = useFloating(\n  () => (props.anchor ? anchorEl : rootEl.value),\n  panelEl,\n  isOpen,\n  {\n    placement: () => props.placement,\n    offsetPx: props.offsetPx,\n    // Своего слоя у поповера нет намеренно: он и дропдаун — один класс якорных\n    // немодальных оверлеев и обязаны лежать на одной высоте, иначе начнут\n    // перекрывать друг друга в зависимости от порядка открытия.\n    zIndexVar: '--gr-z-dropdown',\n  },\n)\n\nwatch(() => props.placement, () => {\n  if (isOpen.value)\n    updateFloatingPosition()\n})\n\n// Объект якоря стабилен, поэтому смену координат `useFloating` сам не заметит:\n// повторный вызов у другой точки — это пересчёт позиции, а не переоткрытие.\nwatch(() => props.anchor, () => {\n  if (isOpen.value)\n    updateFloatingPosition()\n}, { deep: true })\n\n/**\n * Слой стека оверлеев: очередь Esc общая с модалками, поэтому поповер, открытый\n * внутри модалки, по Esc закрывает себя, а не её. Возврат фокуса на триггер\n * тоже отсюда — по правилу «только если на момент закрытия фокус ещё внутри».\n *\n * Модальность включается пропом и приходит той же сборкой, что у окна и drawer'а\n * (`useModalOverlay`): ловушка фокуса, `inert` фона, блокировка скролла. При\n * `modal: false` не включается ничего из этого — дефолтный поповер немодален.\n *\n * Корень слоя и панель здесь один элемент: якорный оверлей уезжает в портал сам,\n * без обёртки.\n */\nconst { inertAttr, portalTarget, teleportEnabled, themeAttrs } = useModalOverlay(isOpen, close, {\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc,\n  panel: panelEl,\n  root: panelEl,\n  teleportTo: () => props.teleportTo,\n  initialFocus: () => panelEl.value,\n})\n\n// Фокус переносим после отрисовки панели: до `nextTick` её ещё нет в DOM.\n// В модальном режиме перенос обязателен: фон в `inert`, и фокус, оставленный\n// снаружи, попал бы в недоступное поддерево.\nwatch(isOpen, async (next) => {\n  if (!next || !(props.autoFocus || props.modal))\n    return\n\n  await nextTick()\n  panelEl.value?.focus()\n})\n\n/** Роли, которые `aria-haspopup` действительно понимает. */\nconst HASPOPUP_ROLES = ['dialog', 'menu', 'listbox', 'grid'] as const\n\n/**\n * Пропсы для реального фокусируемого триггера: `<button v-bind=\"triggerProps\">`.\n * Клик вешается на обёртку, а ARIA — сюда, потому что `aria-expanded` обязан\n * жить на самом интерактивном элементе, а не на `div` вокруг него.\n */\nconst triggerProps = computed(() => ({\n  // `aria-haspopup` принимает не любую роль: `group` в его списке нет, и\n  // объявленный им триггер отдавал бы невалидный атрибут, который AT просто\n  // отбрасывает. Роли вне списка сообщают о панели только через `aria-expanded`.\n  'aria-haspopup': HASPOPUP_ROLES.includes(props.role as (typeof HASPOPUP_ROLES)[number])\n    ? (props.role as (typeof HASPOPUP_ROLES)[number])\n    : undefined,\n  'aria-expanded': isOpen.value,\n  'aria-controls': isOpen.value ? panelId : undefined,\n  'disabled': props.disabled || undefined,\n}))\n\nfunction onTriggerClick(): void {\n  if (props.trigger === 'click')\n    toggle()\n}\n\nfunction onContentClick(): void {\n  if (props.closeOnContentClick)\n    close()\n}\n\nconst panelClasses = computed(() =>\n  grPopoverPanelClass(resolvedSize.value, resolvedPlacement.value, props.contentClass, props.padding),\n)\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-popover>\n    <div\n      v-if=\"hasTrigger\"\n      ref=\"rootEl\"\n      v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside, exclude: clickOutsideExclude }\"\n      data-gr-popover-trigger\n      class=\"inline-block max-w-full\"\n      @click=\"onTriggerClick\"\n    >\n      <slot\n        name=\"trigger\"\n        :open=\"isOpen\"\n        :toggle=\"toggle\"\n        :close=\"close\"\n        :trigger-props=\"triggerProps\"\n      />\n    </div>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <transition\n        :enter-active-class=\"panelPopTransition.enter\"\n        :enter-from-class=\"panelPopTransition.enterFrom\"\n        :enter-to-class=\"panelPopTransition.enterTo\"\n        :leave-active-class=\"panelPopTransition.leave\"\n        :leave-from-class=\"panelPopTransition.leaveFrom\"\n        :leave-to-class=\"panelPopTransition.leaveTo\"\n      >\n        <div\n          v-show=\"isOpen\"\n          :id=\"panelId\"\n          ref=\"panelEl\"\n          v-click-outside=\"{ handler: close, enabled: isOpen && closeOnClickOutside && !hasTrigger }\"\n          v-bind=\"themeAttrs\"\n          data-gr-popover-panel\n          data-gr-overlay-root\n          :role=\"role === 'none' ? undefined : role\"\n          :aria-modal=\"modal ? 'true' : undefined\"\n          :inert=\"inertAttr\"\n          :aria-label=\"labelledBy ? undefined : ariaLabel\"\n          :aria-labelledby=\"labelledBy\"\n          tabindex=\"-1\"\n          :class=\"panelClasses\"\n          :style=\"floatingStyle\"\n          @click=\"onContentClick\"\n        >\n          <slot name=\"content\" :close=\"close\" />\n        </div>\n      </transition>\n    </teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTabs/chunks/GrTabs-ugDnkk-2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrTabs-ugDnkk-2.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type Component } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { iconClass, iconTag } from '../shared/icon'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  grTabsBadgeClass,\n  grTabsCloseClass,\n  grTabsEmptyClass,\n  grTabsListClass,\n  grTabsTabClass,\n  tabCloseIconSizes,\n  tabContentClass,\n  tabIconClass,\n  type GrTabsOrientation,\n  type GrTabsSize,\n  type GrTabsVariant,\n} from './grTabsStyles'\n\nexport interface GrTab {\n  value: string\n  label: string\n  badge?: string\n  /**\n   * Иконка слева от подписи: Vue-компонент либо класс иконки вашей UnoCSS-сборки\n   * (`'i-lucide-user'` — тогда нужен ваш `presetIcons`, см. `docs/installation.md`).\n   */\n  icon?: string | Component\n  disabled?: boolean\n  /** Перекрывает `closable` ряда в обе стороны: закрепить вкладку или закрыть одну её. */\n  closable?: boolean\n}\n\nexport interface GrTabsProps {\n  modelValue: string\n  tabs: GrTab[]\n  /**\n   * База id для ARIA-связки с `GrTabPanels`. Если задана, каждая вкладка\n   * получает `id=\"<idBase>-tab-<value>\"` и `aria-controls=\"<idBase>-panel-<value>\"`.\n   * Передайте тот же `idBase` в `GrTabPanels`, чтобы связать `tab`↔`tabpanel`.\n   */\n  idBase?: string\n  size?: GrTabsSize\n  /** Вид ряда: обойма с таблетками или ряд с подчёркиванием. */\n  variant?: GrTabsVariant\n  /**\n   * `automatic` (по умолчанию) — стрелка сразу переключает вкладку;\n   * `manual` — стрелка двигает только фокус, выбор подтверждается\n   * `Enter`/`Space`. Второй режим для вкладок с тяжёлой загрузкой: перебор\n   * стрелками иначе тянет каждую панель.\n   */\n  activationMode?: GrTabsActivationMode\n  /** Горизонтальный (по умолчанию) или вертикальный список вкладок. */\n  orientation?: GrTabsOrientation\n  /**\n   * Крестик на вкладках и закрытие по `Delete`/`Backspace`. Точечно снимается\n   * `closable: false` у самой вкладки.\n   */\n  closable?: boolean\n  /** Текст, когда список вкладок пуст. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nexport interface GrTabsEmits {\n  (e: 'update:modelValue', value: string): void\n  /**\n   * Просьба закрыть вкладку. Компонент список не трогает: `tabs` — проп, и\n   * закрытие может не состояться («сохранить изменения?»).\n   */\n  (e: 'close', value: string): void\n}\n\nexport type GrTabsActivationMode = 'automatic' | 'manual'\n\nexport type { GrTabsOrientation, GrTabsVariant } from './grTabsStyles'\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = withDefaults(defineProps<GrTabsProps>(), {\n  idBase: undefined,\n  size: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  variant: undefined,\n  activationMode: 'automatic',\n  orientation: 'horizontal',\n  closable: false,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Содержимое вкладки целиком — вместо подписи, иконки и счётчика. Крестик остаётся. */\n  tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => unknown\n  /** Пустой ряд — вместо текста из локали. */\n  empty?: () => unknown\n}>()\n\nconst emit = defineEmits<GrTabsEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTabs' })\nconst resolvedVariant = useGrComponentProp('GrTabs', 'variant', () => props.variant, 'pills')\n\nconst tablistClass = computed(() => grTabsListClass({\n  variant: resolvedVariant.value,\n  size: resolvedSize.value,\n  orientation: props.orientation,\n}))\n\nfunction tabClass(tab: GrTab): string {\n  return grTabsTabClass({\n    variant: resolvedVariant.value,\n    size: resolvedSize.value,\n    active: tab.value === props.modelValue,\n    disabled: Boolean(tab.disabled),\n  })\n}\n\nconst badgeClass = computed(() => grTabsBadgeClass(resolvedSize.value))\nconst closeClass = computed(() => grTabsCloseClass(resolvedSize.value))\nconst closeIconClass = computed(() => tabCloseIconSizes[resolvedSize.value])\nconst emptyClass = computed(() => grTabsEmptyClass(resolvedSize.value))\n\nconst isEmpty = computed(() => props.tabs.length === 0)\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.tabs.empty', 'Nothing here yet'))\nconst closeTitle = computed(() => t('gr.tabs.close', 'Close tab'))\n\n/** Отключённая вкладка не принимает взаимодействия, а закрытие — тоже взаимодействие. */\nfunction isClosable(tab: GrTab): boolean {\n  return !tab.disabled && (tab.closable ?? props.closable)\n}\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\n/**\n * Vue зовёт ref-функцию с `null`, когда узел исчез. Игнорировать такой вызов\n * нельзя: в массиве оставались отсоединённые от DOM кнопки, и `focus()` по\n * сократившемуся списку молча проваливался в `<body>`.\n */\nfunction setButtonRef(el: unknown, index: number): void {\n  if (el instanceof HTMLButtonElement)\n    buttonRefs.value[index] = el\n  else\n    delete buttonRefs.value[index]\n\n  if (buttonRefs.value.length > props.tabs.length)\n    buttonRefs.value.length = props.tabs.length\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n  return !tab.disabled\n}\n\nconst tabIndexes = computed(() => props.tabs.map((_, index) => index))\n\n/**\n * Кольцо roving-фокуса. При `activationMode: 'manual'` фокус уезжает вперёд\n * выбора — это и есть разница между `activeKey` примитива и `initialKey`:\n * первый ведёт фокус, второй подставляет выбранную вкладку, пока фокус не\n * трогали.\n *\n * Выбор стрелка **не** переносит: этим заведует `onKeydown` по\n * `activationMode`. Через `onMove` это выразить нельзя — клик тоже зовёт\n * `focusKey`, и выбор эмитился бы дважды.\n */\nconst roving = useRovingFocus<number>({\n  items: () => tabIndexes.value,\n  elementFor: index => buttonRefs.value[index],\n  isDisabled: index => Boolean(props.tabs[index]?.disabled),\n  orientation: () => (props.orientation === 'vertical' ? 'vertical' : 'horizontal'),\n  skipDisabled: () => true,\n  /**\n   * Пока фокус не трогали, остановку `Tab` держит выбранная вкладка. Если\n   * `modelValue` не совпал ни с одной (пустое начальное значение, асинхронный\n   * список, удалённая активная вкладка), примитив ставит её на первую\n   * доступную — иначе tablist выпал бы из обхода целиком и молча.\n   *\n   * Выключенность здесь не проверяется намеренно: на кнопке `aria-disabled`, а\n   * не нативный `disabled`, поэтому выключенная вкладка фокусируется и держать\n   * остановку вправе.\n   */\n  initialKey: () => (activeIndex.value >= 0 ? activeIndex.value : undefined),\n  /**\n   * Прокрутка до фокуса, а не после: иначе браузер доскроллит сам по-своему, и\n   * ряд дёрнется дважды. Синхронно — фокус обязан остаться в том же такте, что\n   * и раньше: тик, где он нужен, добавляет `focusIndex`.\n   */\n  beforeFocus: index => scrollIntoView(index),\n})\n\n/**\n * Фокус после перерисовки — для путей, где список только что изменился\n * (закрытие вкладки). Клавиатура идёт через примитив напрямую: там ряд уже\n * отрисован, и лишний тик только отложил бы фокус.\n */\nasync function focusIndex(index: number): Promise<void> {\n  await nextTick()\n  await roving.focusKey(index)\n}\n\n/**\n * Ряд прокручивается, а не переносится, поэтому активная вкладка может уехать\n * за край — например, когда её выбрали снаружи. `scrollIntoView` нет в jsdom и\n * в старых движках, поэтому вызов необязательный.\n */\nfunction scrollIntoView(index: number): void {\n  buttonRefs.value[index]?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n}\n\nwatch(() => props.modelValue, async () => {\n  await nextTick()\n  if (activeIndex.value >= 0)\n    scrollIntoView(activeIndex.value)\n})\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n  const tab = props.tabs[index]\n  if (!tab || !isEnabled(tab))\n    return\n  if (tab.value !== props.modelValue)\n    emit('update:modelValue', tab.value)\n  if (focus)\n    await focusIndex(index)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (props.tabs.length === 0)\n    return\n\n  const currentIndex = roving.rovingKey.value ?? 0\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n      // В ручном режиме выбор подтверждается явно — на той вкладке, где фокус.\n      if (props.activationMode === 'manual') {\n        event.preventDefault()\n        void selectByIndex(currentIndex, false)\n      }\n      return\n    case 'Delete':\n    case 'Backspace': {\n      // Единственный клавиатурный путь к закрытию: крестик в таб-порядке не стоит.\n      const tab = props.tabs[currentIndex]\n      if (tab && isClosable(tab)) {\n        event.preventDefault()\n        requestClose(currentIndex)\n      }\n      return\n    }\n  }\n\n  // Стрелки, `Home`, `End` — фокус ведёт примитив по объявленной ориентации.\n  if (!roving.handleNavigationKeys(event))\n    return\n\n  // `automatic`: выбор едет за фокусом. `manual`: ждёт `Enter`/`Space`.\n  if (props.activationMode !== 'manual')\n    void selectByIndex(roving.rovingKey.value ?? currentIndex, false)\n}\n\n/**\n * Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —\n * это делает потребитель, — поэтому фокус возвращается только после того, как\n * `tabs` действительно стал короче.\n */\nlet pendingClose: { index: number, value: string } | null = null\n\nfunction requestClose(index: number): void {\n  const tab = props.tabs[index]\n  if (!tab || !isClosable(tab))\n    return\n\n  const held = buttonRefs.value[index] === document.activeElement\n  pendingClose = held ? { index, value: tab.value } : null\n\n  emit('close', tab.value)\n}\n\n// Без этого клавиатурное закрытие роняет фокус в `<body>`: кнопка, на которой\n// он стоял, исчезает из DOM вместе со вкладкой.\nwatch(() => props.tabs.length, async (next, prev) => {\n  const pending = pendingClose\n  pendingClose = null\n\n  if (!pending || next >= prev)\n    return\n  // Ушла не та вкладка — потребитель поменял список по своей причине.\n  if (props.tabs.some(tab => tab.value === pending.value))\n    return\n\n  await nextTick()\n\n  const target = Math.min(pending.index, next - 1)\n  if (target >= 0)\n    void focusIndex(target)\n  else\n    roving.reset()\n})\n\nfunction onClick(event: MouseEvent, tab: GrTab, index: number): void {\n  if (!isEnabled(tab))\n    return\n\n  // Крестик — не кнопка, поэтому его клик приходит сюда же и разбирается по цели.\n  if (event.target instanceof Element && event.target.closest('[data-gr-tab-close]')) {\n    requestClose(index)\n    return\n  }\n\n  roving.setActive(index)\n\n  if (tab.value !== props.modelValue)\n    emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n  <!--\n    Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n    и текст внутри неё был бы нарушением, а не пустым состоянием.\n  -->\n  <div v-if=\"isEmpty\" data-gr-tabs-empty :class=\"emptyClass\">\n    <slot name=\"empty\">\n      {{ resolvedEmptyText }}\n    </slot>\n  </div>\n\n  <div\n    v-else\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n  >\n    <button\n      v-for=\"(tab, index) in tabs\"\n      :id=\"idBase ? `${idBase}-tab-${tab.value}` : undefined\"\n      :key=\"tab.value\"\n      :ref=\"el => setButtonRef(el, index)\"\n      type=\"button\"\n      role=\"tab\"\n      data-gr-tab\n      :aria-controls=\"idBase ? `${idBase}-panel-${tab.value}` : undefined\"\n      :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n      :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n      :aria-keyshortcuts=\"isClosable(tab) ? 'Delete' : undefined\"\n      :tabindex=\"roving.tabindexFor(index)\"\n      :class=\"tabClass(tab)\"\n      @click=\"onClick($event, tab, index)\"\n    >\n      <span :class=\"tabContentClass\">\n        <slot\n          name=\"tab\"\n          :tab=\"tab\"\n          :active=\"tab.value === modelValue\"\n          :disabled=\"Boolean(tab.disabled)\"\n        >\n          <component\n            :is=\"iconTag(tab.icon)\"\n            v-if=\"tab.icon\"\n            :class=\"[tabIconClass, iconClass(tab.icon)]\"\n            aria-hidden=\"true\"\n          />\n          <span>{{ tab.label }}</span>\n          <span v-if=\"tab.badge\" :class=\"badgeClass\">\n            {{ tab.badge }}\n          </span>\n        </slot>\n\n        <!-- Снаружи слота: своя разметка вкладки не должна отнимать закрытие. -->\n        <span\n          v-if=\"isClosable(tab)\"\n          data-gr-tab-close\n          :class=\"closeClass\"\n          :title=\"closeTitle\"\n          aria-hidden=\"true\"\n        >\n          <IconX :class=\"closeIconClass\" />\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type Component } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { iconClass, iconTag } from '../shared/icon'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  grTabsBadgeClass,\n  grTabsCloseClass,\n  grTabsEmptyClass,\n  grTabsListClass,\n  grTabsTabClass,\n  tabCloseIconSizes,\n  tabContentClass,\n  tabIconClass,\n  type GrTabsOrientation,\n  type GrTabsSize,\n  type GrTabsVariant,\n} from './grTabsStyles'\n\nexport interface GrTab {\n  value: string\n  label: string\n  badge?: string\n  /**\n   * Иконка слева от подписи: Vue-компонент либо класс иконки вашей UnoCSS-сборки\n   * (`'i-lucide-user'` — тогда нужен ваш `presetIcons`, см. `docs/installation.md`).\n   */\n  icon?: string | Component\n  disabled?: boolean\n  /** Перекрывает `closable` ряда в обе стороны: закрепить вкладку или закрыть одну её. */\n  closable?: boolean\n}\n\nexport interface GrTabsProps {\n  modelValue: string\n  tabs: GrTab[]\n  /**\n   * База id для ARIA-связки с `GrTabPanels`. Если задана, каждая вкладка\n   * получает `id=\"<idBase>-tab-<value>\"` и `aria-controls=\"<idBase>-panel-<value>\"`.\n   * Передайте тот же `idBase` в `GrTabPanels`, чтобы связать `tab`↔`tabpanel`.\n   */\n  idBase?: string\n  size?: GrTabsSize\n  /** Вид ряда: обойма с таблетками или ряд с подчёркиванием. */\n  variant?: GrTabsVariant\n  /**\n   * `automatic` (по умолчанию) — стрелка сразу переключает вкладку;\n   * `manual` — стрелка двигает только фокус, выбор подтверждается\n   * `Enter`/`Space`. Второй режим для вкладок с тяжёлой загрузкой: перебор\n   * стрелками иначе тянет каждую панель.\n   */\n  activationMode?: GrTabsActivationMode\n  /** Горизонтальный (по умолчанию) или вертикальный список вкладок. */\n  orientation?: GrTabsOrientation\n  /**\n   * Крестик на вкладках и закрытие по `Delete`/`Backspace`. Точечно снимается\n   * `closable: false` у самой вкладки.\n   */\n  closable?: boolean\n  /** Текст, когда список вкладок пуст. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nexport interface GrTabsEmits {\n  (e: 'update:modelValue', value: string): void\n  /**\n   * Просьба закрыть вкладку. Компонент список не трогает: `tabs` — проп, и\n   * закрытие может не состояться («сохранить изменения?»).\n   */\n  (e: 'close', value: string): void\n}\n\nexport type GrTabsActivationMode = 'automatic' | 'manual'\n\nexport type { GrTabsOrientation, GrTabsVariant } from './grTabsStyles'\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = withDefaults(defineProps<GrTabsProps>(), {\n  idBase: undefined,\n  size: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  variant: undefined,\n  activationMode: 'automatic',\n  orientation: 'horizontal',\n  closable: false,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Содержимое вкладки целиком — вместо подписи, иконки и счётчика. Крестик остаётся. */\n  tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => unknown\n  /** Пустой ряд — вместо текста из локали. */\n  empty?: () => unknown\n}>()\n\nconst emit = defineEmits<GrTabsEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTabs' })\nconst resolvedVariant = useGrComponentProp('GrTabs', 'variant', () => props.variant, 'pills')\n\nconst tablistClass = computed(() => grTabsListClass({\n  variant: resolvedVariant.value,\n  size: resolvedSize.value,\n  orientation: props.orientation,\n}))\n\nfunction tabClass(tab: GrTab): string {\n  return grTabsTabClass({\n    variant: resolvedVariant.value,\n    size: resolvedSize.value,\n    active: tab.value === props.modelValue,\n    disabled: Boolean(tab.disabled),\n  })\n}\n\nconst badgeClass = computed(() => grTabsBadgeClass(resolvedSize.value))\nconst closeClass = computed(() => grTabsCloseClass(resolvedSize.value))\nconst closeIconClass = computed(() => tabCloseIconSizes[resolvedSize.value])\nconst emptyClass = computed(() => grTabsEmptyClass(resolvedSize.value))\n\nconst isEmpty = computed(() => props.tabs.length === 0)\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.tabs.empty', 'Nothing here yet'))\nconst closeTitle = computed(() => t('gr.tabs.close', 'Close tab'))\n\n/** Отключённая вкладка не принимает взаимодействия, а закрытие — тоже взаимодействие. */\nfunction isClosable(tab: GrTab): boolean {\n  return !tab.disabled && (tab.closable ?? props.closable)\n}\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\n/**\n * Vue зовёт ref-функцию с `null`, когда узел исчез. Игнорировать такой вызов\n * нельзя: в массиве оставались отсоединённые от DOM кнопки, и `focus()` по\n * сократившемуся списку молча проваливался в `<body>`.\n */\nfunction setButtonRef(el: unknown, index: number): void {\n  if (el instanceof HTMLButtonElement)\n    buttonRefs.value[index] = el\n  else\n    delete buttonRefs.value[index]\n\n  if (buttonRefs.value.length > props.tabs.length)\n    buttonRefs.value.length = props.tabs.length\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n  return !tab.disabled\n}\n\nconst tabIndexes = computed(() => props.tabs.map((_, index) => index))\n\n/**\n * Кольцо roving-фокуса. При `activationMode: 'manual'` фокус уезжает вперёд\n * выбора — это и есть разница между `activeKey` примитива и `initialKey`:\n * первый ведёт фокус, второй подставляет выбранную вкладку, пока фокус не\n * трогали.\n *\n * Выбор стрелка **не** переносит: этим заведует `onKeydown` по\n * `activationMode`. Через `onMove` это выразить нельзя — клик тоже зовёт\n * `focusKey`, и выбор эмитился бы дважды.\n */\nconst roving = useRovingFocus<number>({\n  items: () => tabIndexes.value,\n  elementFor: index => buttonRefs.value[index],\n  isDisabled: index => Boolean(props.tabs[index]?.disabled),\n  orientation: () => (props.orientation === 'vertical' ? 'vertical' : 'horizontal'),\n  skipDisabled: () => true,\n  /**\n   * Пока фокус не трогали, остановку `Tab` держит выбранная вкладка. Если\n   * `modelValue` не совпал ни с одной (пустое начальное значение, асинхронный\n   * список, удалённая активная вкладка), примитив ставит её на первую\n   * доступную — иначе tablist выпал бы из обхода целиком и молча.\n   *\n   * Выключенность здесь не проверяется намеренно: на кнопке `aria-disabled`, а\n   * не нативный `disabled`, поэтому выключенная вкладка фокусируется и держать\n   * остановку вправе.\n   */\n  initialKey: () => (activeIndex.value >= 0 ? activeIndex.value : undefined),\n  /**\n   * Прокрутка до фокуса, а не после: иначе браузер доскроллит сам по-своему, и\n   * ряд дёрнется дважды. Синхронно — фокус обязан остаться в том же такте, что\n   * и раньше: тик, где он нужен, добавляет `focusIndex`.\n   */\n  beforeFocus: index => scrollIntoView(index),\n})\n\n/**\n * Фокус после перерисовки — для путей, где список только что изменился\n * (закрытие вкладки). Клавиатура идёт через примитив напрямую: там ряд уже\n * отрисован, и лишний тик только отложил бы фокус.\n */\nasync function focusIndex(index: number): Promise<void> {\n  await nextTick()\n  await roving.focusKey(index)\n}\n\n/**\n * Ряд прокручивается, а не переносится, поэтому активная вкладка может уехать\n * за край — например, когда её выбрали снаружи. `scrollIntoView` нет в jsdom и\n * в старых движках, поэтому вызов необязательный.\n */\nfunction scrollIntoView(index: number): void {\n  buttonRefs.value[index]?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n}\n\nwatch(() => props.modelValue, async () => {\n  await nextTick()\n  if (activeIndex.value >= 0)\n    scrollIntoView(activeIndex.value)\n})\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n  const tab = props.tabs[index]\n  if (!tab || !isEnabled(tab))\n    return\n  if (tab.value !== props.modelValue)\n    emit('update:modelValue', tab.value)\n  if (focus)\n    await focusIndex(index)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (props.tabs.length === 0)\n    return\n\n  const currentIndex = roving.rovingKey.value ?? 0\n\n  switch (event.key) {\n    case 'Enter':\n    case ' ':\n      // В ручном режиме выбор подтверждается явно — на той вкладке, где фокус.\n      if (props.activationMode === 'manual') {\n        event.preventDefault()\n        void selectByIndex(currentIndex, false)\n      }\n      return\n    case 'Delete':\n    case 'Backspace': {\n      // Единственный клавиатурный путь к закрытию: крестик в таб-порядке не стоит.\n      const tab = props.tabs[currentIndex]\n      if (tab && isClosable(tab)) {\n        event.preventDefault()\n        requestClose(currentIndex)\n      }\n      return\n    }\n  }\n\n  // Стрелки, `Home`, `End` — фокус ведёт примитив по объявленной ориентации.\n  if (!roving.handleNavigationKeys(event))\n    return\n\n  // `automatic`: выбор едет за фокусом. `manual`: ждёт `Enter`/`Space`.\n  if (props.activationMode !== 'manual')\n    void selectByIndex(roving.rovingKey.value ?? currentIndex, false)\n}\n\n/**\n * Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —\n * это делает потребитель, — поэтому фокус возвращается только после того, как\n * `tabs` действительно стал короче.\n */\nlet pendingClose: { index: number, value: string } | null = null\n\nfunction requestClose(index: number): void {\n  const tab = props.tabs[index]\n  if (!tab || !isClosable(tab))\n    return\n\n  const held = buttonRefs.value[index] === document.activeElement\n  pendingClose = held ? { index, value: tab.value } : null\n\n  emit('close', tab.value)\n}\n\n// Без этого клавиатурное закрытие роняет фокус в `<body>`: кнопка, на которой\n// он стоял, исчезает из DOM вместе со вкладкой.\nwatch(() => props.tabs.length, async (next, prev) => {\n  const pending = pendingClose\n  pendingClose = null\n\n  if (!pending || next >= prev)\n    return\n  // Ушла не та вкладка — потребитель поменял список по своей причине.\n  if (props.tabs.some(tab => tab.value === pending.value))\n    return\n\n  await nextTick()\n\n  const target = Math.min(pending.index, next - 1)\n  if (target >= 0)\n    void focusIndex(target)\n  else\n    roving.reset()\n})\n\nfunction onClick(event: MouseEvent, tab: GrTab, index: number): void {\n  if (!isEnabled(tab))\n    return\n\n  // Крестик — не кнопка, поэтому его клик приходит сюда же и разбирается по цели.\n  if (event.target instanceof Element && event.target.closest('[data-gr-tab-close]')) {\n    requestClose(index)\n    return\n  }\n\n  roving.setActive(index)\n\n  if (tab.value !== props.modelValue)\n    emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n  <!--\n    Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n    и текст внутри неё был бы нарушением, а не пустым состоянием.\n  -->\n  <div v-if=\"isEmpty\" data-gr-tabs-empty :class=\"emptyClass\">\n    <slot name=\"empty\">\n      {{ resolvedEmptyText }}\n    </slot>\n  </div>\n\n  <div\n    v-else\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n  >\n    <button\n      v-for=\"(tab, index) in tabs\"\n      :id=\"idBase ? `${idBase}-tab-${tab.value}` : undefined\"\n      :key=\"tab.value\"\n      :ref=\"el => setButtonRef(el, index)\"\n      type=\"button\"\n      role=\"tab\"\n      data-gr-tab\n      :aria-controls=\"idBase ? `${idBase}-panel-${tab.value}` : undefined\"\n      :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n      :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n      :aria-keyshortcuts=\"isClosable(tab) ? 'Delete' : undefined\"\n      :tabindex=\"roving.tabindexFor(index)\"\n      :class=\"tabClass(tab)\"\n      @click=\"onClick($event, tab, index)\"\n    >\n      <span :class=\"tabContentClass\">\n        <slot\n          name=\"tab\"\n          :tab=\"tab\"\n          :active=\"tab.value === modelValue\"\n          :disabled=\"Boolean(tab.disabled)\"\n        >\n          <component\n            :is=\"iconTag(tab.icon)\"\n            v-if=\"tab.icon\"\n            :class=\"[tabIconClass, iconClass(tab.icon)]\"\n            aria-hidden=\"true\"\n          />\n          <span>{{ tab.label }}</span>\n          <span v-if=\"tab.badge\" :class=\"badgeClass\">\n            {{ tab.badge }}\n          </span>\n        </slot>\n\n        <!-- Снаружи слота: своя разметка вкладки не должна отнимать закрытие. -->\n        <span\n          v-if=\"isClosable(tab)\"\n          data-gr-tab-close\n          :class=\"closeClass\"\n          :title=\"closeTitle\"\n          aria-hidden=\"true\"\n        >\n          <IconX :class=\"closeIconClass\" />\n        </span>\n      </span>\n    </button>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/composables/useFocusTrap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFocusTrap.js","names":[],"sources":["../../src/composables/useFocusTrap.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { nextTick, onScopeDispose, watch } from 'vue'\n\nimport { getFocusableElementsIn, isFocusable } from './internal/focusables'\n\nexport interface UseFocusTrapOptions {\n  /**\n   * Работает ли ловушка сейчас. Геттер, а не значение: модальное окно держит\n   * фокус, только пока оно верхнее в стеке слоёв, — иначе нижнее окно отбирало\n   * бы фокус у открытого поверх него.\n   */\n  active?: () => boolean\n  /** Кому отдать фокус при активации. Не задан или не фокусируем — первый в контейнере. */\n  initialFocus?: () => HTMLElement | null | undefined\n  /**\n   * Запасной приёмник фокуса, когда фокусировать внутри нечего: обычно сама\n   * панель с `tabindex=\"-1\"`. Без него фокус остался бы снаружи, и Tab увёл бы\n   * пользователя на страницу под окном.\n   */\n  fallbackFocus?: () => HTMLElement | null | undefined\n  /**\n   * Дополнительные корни, которые считаются частью слоя. Панель селекта,\n   * открытого внутри окна, телепортирована в `body` и лежит вне поддерева\n   * контейнера — без этого списка ловушка отбирала бы у неё фокус.\n   */\n  containers?: () => (HTMLElement | null | undefined)[]\n  /**\n   * Возвращать фокус туда, где он был до активации. По умолчанию — да.\n   * Оверлеи пакета выключают: возврат делает стек слоёв по более строгому\n   * правилу (только если фокус на момент закрытия ещё внутри слоя).\n   */\n  restoreFocus?: boolean\n}\n\n/**\n * Ловушка фокуса: пока активна, Tab ходит по кругу внутри слоя, а фокус,\n * утёкший наружу, возвращается обратно.\n *\n * Реализована на `keydown` и `focusin`, **без sentinel-узлов**: распространённый\n * подход с двумя focus-guard кнопками по краям кладёт в разметку интерактивные\n * элементы, а внутрь контейнера с ARIA-ролью их класть нельзя — роль объявляет\n * потомков презентационными (axe: `nested-interactive`).\n *\n * Слой из ловушки не выводится: порядок окон, Esc и `inert` — забота\n * `useOverlayLayer`. Композиция такая:\n *\n * ```ts\n * const layer = useOverlayLayer(open, close, { modal: true, root: panelRef })\n * useFocusTrap(panelRef, {\n *   active: () => open.value && isTopmost.value,\n *   containers: layer.rootsAbove,\n * })\n * ```\n */\nexport function useFocusTrap(\n  container: Ref<HTMLElement | null>,\n  options: UseFocusTrapOptions = {},\n): void {\n  let previouslyFocused: HTMLElement | null = null\n  let listening = false\n  // Последний законный держатель фокуса: с него начинается возврат, когда\n  // фокус ушёл в никуда (например, кликом по неинтерактивному фону).\n  let lastFocusedInside: HTMLElement | null = null\n\n  function roots(): HTMLElement[] {\n    const extra = options.containers?.() ?? []\n    return [container.value, ...extra].filter((root): root is HTMLElement => Boolean(root))\n  }\n\n  function contains(target: Node | null): boolean {\n    if (!target)\n      return false\n    return roots().some(root => root === target || root.contains(target))\n  }\n\n  function focusables(): HTMLElement[] {\n    return getFocusableElementsIn(roots())\n  }\n\n  function focusInitial(): void {\n    // Фокус уже внутри слоя — его поставили осознанно: диалог наводит на свою\n    // кнопку, окно ввода — на поле, и делают это в тот же такт, когда панель\n    // появилась. `initialFocus` — дефолт слоя, а не приказ, поэтому такую\n    // установку он не перебивает.\n    if (contains(document.activeElement))\n      return\n\n    const requested = options.initialFocus?.()\n    if (requested && isFocusable(requested)) {\n      requested.focus()\n      return\n    }\n\n    const [first] = focusables()\n    if (first) {\n      first.focus()\n      return\n    }\n\n    // Фокусировать нечего — забираем фокус на сам слой, иначе он останется\n    // снаружи и Tab уведёт пользователя под окно.\n    const fallback = options.fallbackFocus?.() ?? container.value\n    fallback?.focus()\n  }\n\n  function onKeydown(event: KeyboardEvent): void {\n    if (event.key !== 'Tab')\n      return\n    if (!contains(document.activeElement))\n      return\n\n    const items = focusables()\n    if (items.length === 0) {\n      // Внутри некуда идти — держим фокус на слое, а не отпускаем на страницу.\n      event.preventDefault()\n      ;(options.fallbackFocus?.() ?? container.value)?.focus()\n      return\n    }\n\n    const first = items[0]\n    const last = items[items.length - 1]\n    const active = document.activeElement as HTMLElement | null\n    const index = active ? items.indexOf(active) : -1\n\n    // Фокус на самой панели (`tabindex=\"-1\"`, в списке её нет): Tab обязан\n    // войти внутрь, а не выпрыгнуть за слой.\n    if (index === -1) {\n      event.preventDefault()\n      ;(event.shiftKey ? last : first).focus()\n      return\n    }\n\n    if (event.shiftKey && active === first) {\n      event.preventDefault()\n      last.focus()\n      return\n    }\n\n    if (!event.shiftKey && active === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  function onFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement | null\n\n    if (contains(target)) {\n      lastFocusedInside = target\n      return\n    }\n\n    // Фокус утёк наружу — программным `focus()`, кликом по фону или обходом\n    // через адресную строку. Возвращаем его на последнее законное место.\n    if (lastFocusedInside && contains(lastFocusedInside) && isFocusable(lastFocusedInside)) {\n      lastFocusedInside.focus()\n      return\n    }\n\n    focusInitial()\n  }\n\n  function activate(): void {\n    if (listening)\n      return\n    if (typeof document === 'undefined')\n      return\n    listening = true\n\n    previouslyFocused = (document.activeElement as HTMLElement) ?? null\n    lastFocusedInside = null\n\n    document.addEventListener('keydown', onKeydown, true)\n    document.addEventListener('focusin', onFocusIn, true)\n\n    // Ждём, пока Vue домонтирует содержимое слоя: до этого фокусировать нечего.\n    void nextTick(() => {\n      if (!listening)\n        return\n      focusInitial()\n    })\n  }\n\n  function deactivate(): void {\n    if (!listening)\n      return\n    listening = false\n\n    document.removeEventListener('keydown', onKeydown, true)\n    document.removeEventListener('focusin', onFocusIn, true)\n\n    const target = previouslyFocused\n    previouslyFocused = null\n    lastFocusedInside = null\n\n    if (options.restoreFocus === false || !target)\n      return\n    if (!target.isConnected)\n      return\n    target.focus?.()\n  }\n\n  watch(\n    () => Boolean(options.active?.() ?? true) && Boolean(container.value),\n    (isActive) => {\n      if (isActive)\n        activate()\n      else deactivate()\n    },\n    { immediate: true },\n  )\n\n  onScopeDispose(deactivate)\n}\n"],"mappings":"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"}