@feugene/granularity 0.49.0 → 0.50.0

package/dist/components/GrTabs/chunks/{GrTabs-s9RzC1WX.js.map → GrTabs-DVC6nfWB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrTabs-s9RzC1WX.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect, 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 { resolveScrollOverflow, type GrScrollOverflow } from '../shared/scrollOverflow'\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\n/**\n * Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n * и текст внутри неё был бы нарушением, а не пустым состоянием. Поэтому\n * пустое состояние рисуется отдельной веткой, а не содержимым `tablist`.\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\n/**\n * Признак того, что ряд продолжается за краем.\n *\n * Полоса прокрутки у ряда скрыта намеренно, и без этого признака продолжение\n * не выдаёт себя ничем: вкладки за краем достижимы стрелками, но о том, что они\n * там есть, догадаться нечем. Затухание рисует CSS по `data-overflow`.\n *\n * Вертикальный ряд не скроллится вовсе — он растёт вниз, — поэтому состояние\n * считается только для горизонтального.\n */\nconst tablistEl = ref<HTMLElement | null>(null)\nconst scrollOverflow = ref<GrScrollOverflow>('none')\n\nlet resizeObserver: ResizeObserver | null = null\nlet scheduled = false\n\nfunction measureOverflow(): void {\n  const el = tablistEl.value\n\n  if (!el || props.orientation === 'vertical') {\n    scrollOverflow.value = 'none'\n    return\n  }\n\n  scrollOverflow.value = resolveScrollOverflow(el.scrollLeft, el.scrollWidth, el.clientWidth)\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled)\n    return\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureOverflow()\n  })\n}\n\nonMounted(() => {\n  scheduleMeasure()\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  resizeObserver = new ResizeObserver(scheduleMeasure)\n  if (tablistEl.value)\n    resizeObserver.observe(tablistEl.value)\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  resizeObserver = null\n})\n\n// Состав ряда меняет его ширину, ориентация — само наличие прокрутки.\nwatch(() => [props.tabs.length, props.orientation], scheduleMeasure)\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\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (props.modelValue === undefined) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`modelValue\\` не передан — получено ${String(props.modelValue)}.`,\n      )\n    }\n\n    if (!Array.isArray(props.tabs)) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`tabs\\` должен быть массивом — получено ${String(props.tabs)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\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    ref=\"tablistEl\"\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :data-overflow=\"orientation === 'vertical' ? undefined : scrollOverflow\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n    @scroll.passive=\"scheduleMeasure\"\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\n<style>\n/*\n * Затухание у края, за которым ряд продолжается.\n *\n * Здесь, а не утилитами, по двум причинам сразу. `mask-image` в `presetMini` не\n * выражается — это уже зафиксировано отказом в `GrImageCrop`. И маской, а не\n * градиентом-подложкой, потому что фон полосы у вариантов разный: `pills` несёт\n * свой непрозрачный `--gr-muted`, а `line` прозрачен и лежит на фоне родителя,\n * которого компонент не знает. Градиенту пришлось бы красить в цвет подложки —\n * для `line` его неоткуда взять. Маска гасит содержимое независимо от того, что\n * под ним.\n *\n * Состояние считается логически (начало/конец ряда), а направление градиента в\n * CSS выражается только физически — отсюда зеркальные правила для RTL.\n */\n\n[data-gr-tabs] {\n  /*\n   * `scrollIntoView({ inline: 'nearest' })` из кольца фокуса прижимает вкладку\n   * вплотную к краю. Без отступа прокрутки кольцо фокуса у клавиатурного\n   * пользователя оказалось бы ровно под затуханием.\n   */\n  scroll-padding-inline: var(--gr-tabs-scroll-fade, 1.5rem);\n}\n\n[data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to right, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to right, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs][data-overflow='both'] {\n  --gr-tabs-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--gr-tabs-scroll-fade, 1.5rem),\n    #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)),\n    transparent 100%\n  );\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to left, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to left, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs]:is([data-overflow='start'], [data-overflow='end'], [data-overflow='both']) {\n  -webkit-mask-image: var(--gr-tabs-mask);\n  mask-image: var(--gr-tabs-mask);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect, 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 { resolveScrollOverflow, type GrScrollOverflow } from '../shared/scrollOverflow'\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\n/**\n * Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n * и текст внутри неё был бы нарушением, а не пустым состоянием. Поэтому\n * пустое состояние рисуется отдельной веткой, а не содержимым `tablist`.\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\n/**\n * Признак того, что ряд продолжается за краем.\n *\n * Полоса прокрутки у ряда скрыта намеренно, и без этого признака продолжение\n * не выдаёт себя ничем: вкладки за краем достижимы стрелками, но о том, что они\n * там есть, догадаться нечем. Затухание рисует CSS по `data-overflow`.\n *\n * Вертикальный ряд не скроллится вовсе — он растёт вниз, — поэтому состояние\n * считается только для горизонтального.\n */\nconst tablistEl = ref<HTMLElement | null>(null)\nconst scrollOverflow = ref<GrScrollOverflow>('none')\n\nlet resizeObserver: ResizeObserver | null = null\nlet scheduled = false\n\nfunction measureOverflow(): void {\n  const el = tablistEl.value\n\n  if (!el || props.orientation === 'vertical') {\n    scrollOverflow.value = 'none'\n    return\n  }\n\n  scrollOverflow.value = resolveScrollOverflow(el.scrollLeft, el.scrollWidth, el.clientWidth)\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled)\n    return\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureOverflow()\n  })\n}\n\nonMounted(() => {\n  scheduleMeasure()\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  resizeObserver = new ResizeObserver(scheduleMeasure)\n  if (tablistEl.value)\n    resizeObserver.observe(tablistEl.value)\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  resizeObserver = null\n})\n\n// Состав ряда меняет его ширину, ориентация — само наличие прокрутки.\nwatch(() => [props.tabs.length, props.orientation], scheduleMeasure)\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\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (props.modelValue === undefined) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`modelValue\\` не передан — получено ${String(props.modelValue)}.`,\n      )\n    }\n\n    if (!Array.isArray(props.tabs)) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`tabs\\` должен быть массивом — получено ${String(props.tabs)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\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    ref=\"tablistEl\"\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :data-overflow=\"orientation === 'vertical' ? undefined : scrollOverflow\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n    @scroll.passive=\"scheduleMeasure\"\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\n<style>\n/*\n * Затухание у края, за которым ряд продолжается.\n *\n * Здесь, а не утилитами, по двум причинам сразу. `mask-image` в `presetMini` не\n * выражается — это уже зафиксировано отказом в `GrImageCrop`. И маской, а не\n * градиентом-подложкой, потому что фон полосы у вариантов разный: `pills` несёт\n * свой непрозрачный `--gr-muted`, а `line` прозрачен и лежит на фоне родителя,\n * которого компонент не знает. Градиенту пришлось бы красить в цвет подложки —\n * для `line` его неоткуда взять. Маска гасит содержимое независимо от того, что\n * под ним.\n *\n * Состояние считается логически (начало/конец ряда), а направление градиента в\n * CSS выражается только физически — отсюда зеркальные правила для RTL.\n */\n\n[data-gr-tabs] {\n  /*\n   * `scrollIntoView({ inline: 'nearest' })` из кольца фокуса прижимает вкладку\n   * вплотную к краю. Без отступа прокрутки кольцо фокуса у клавиатурного\n   * пользователя оказалось бы ровно под затуханием.\n   */\n  scroll-padding-inline: var(--gr-tabs-scroll-fade, 1.5rem);\n}\n\n[data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to right, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to right, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs][data-overflow='both'] {\n  --gr-tabs-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--gr-tabs-scroll-fade, 1.5rem),\n    #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)),\n    transparent 100%\n  );\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to left, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to left, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs]:is([data-overflow='start'], [data-overflow='end'], [data-overflow='both']) {\n  -webkit-mask-image: var(--gr-tabs-mask);\n  mask-image: var(--gr-tabs-mask);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"GrTabs-DVC6nfWB.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect, 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 { resolveScrollOverflow, type GrScrollOverflow } from '../shared/scrollOverflow'\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\n/**\n * Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n * и текст внутри неё был бы нарушением, а не пустым состоянием. Поэтому\n * пустое состояние рисуется отдельной веткой, а не содержимым `tablist`.\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\n/**\n * Признак того, что ряд продолжается за краем.\n *\n * Полоса прокрутки у ряда скрыта намеренно, и без этого признака продолжение\n * не выдаёт себя ничем: вкладки за краем достижимы стрелками, но о том, что они\n * там есть, догадаться нечем. Затухание рисует CSS по `data-overflow`.\n *\n * Вертикальный ряд не скроллится вовсе — он растёт вниз, — поэтому состояние\n * считается только для горизонтального.\n */\nconst tablistEl = ref<HTMLElement | null>(null)\nconst scrollOverflow = ref<GrScrollOverflow>('none')\n\nlet resizeObserver: ResizeObserver | null = null\nlet scheduled = false\n\nfunction measureOverflow(): void {\n  const el = tablistEl.value\n\n  if (!el || props.orientation === 'vertical') {\n    scrollOverflow.value = 'none'\n    return\n  }\n\n  scrollOverflow.value = resolveScrollOverflow(el.scrollLeft, el.scrollWidth, el.clientWidth)\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled)\n    return\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureOverflow()\n  })\n}\n\nonMounted(() => {\n  scheduleMeasure()\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  resizeObserver = new ResizeObserver(scheduleMeasure)\n  if (tablistEl.value)\n    resizeObserver.observe(tablistEl.value)\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  resizeObserver = null\n})\n\n// Состав ряда меняет его ширину, ориентация — само наличие прокрутки.\nwatch(() => [props.tabs.length, props.orientation], scheduleMeasure)\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\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (props.modelValue === undefined) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`modelValue\\` не передан — получено ${String(props.modelValue)}.`,\n      )\n    }\n\n    if (!Array.isArray(props.tabs)) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`tabs\\` должен быть массивом — получено ${String(props.tabs)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\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    ref=\"tablistEl\"\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :data-overflow=\"orientation === 'vertical' ? undefined : scrollOverflow\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n    @scroll.passive=\"scheduleMeasure\"\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\n<style>\n/*\n * Затухание у края, за которым ряд продолжается.\n *\n * Здесь, а не утилитами, по двум причинам сразу. `mask-image` в `presetMini` не\n * выражается — это уже зафиксировано отказом в `GrImageCrop`. И маской, а не\n * градиентом-подложкой, потому что фон полосы у вариантов разный: `pills` несёт\n * свой непрозрачный `--gr-muted`, а `line` прозрачен и лежит на фоне родителя,\n * которого компонент не знает. Градиенту пришлось бы красить в цвет подложки —\n * для `line` его неоткуда взять. Маска гасит содержимое независимо от того, что\n * под ним.\n *\n * Состояние считается логически (начало/конец ряда), а направление градиента в\n * CSS выражается только физически — отсюда зеркальные правила для RTL.\n */\n\n[data-gr-tabs] {\n  /*\n   * `scrollIntoView({ inline: 'nearest' })` из кольца фокуса прижимает вкладку\n   * вплотную к краю. Без отступа прокрутки кольцо фокуса у клавиатурного\n   * пользователя оказалось бы ровно под затуханием.\n   */\n  scroll-padding-inline: var(--gr-tabs-scroll-fade, 1.5rem);\n}\n\n[data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to right, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to right, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs][data-overflow='both'] {\n  --gr-tabs-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--gr-tabs-scroll-fade, 1.5rem),\n    #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)),\n    transparent 100%\n  );\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to left, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to left, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs]:is([data-overflow='start'], [data-overflow='end'], [data-overflow='both']) {\n  -webkit-mask-image: var(--gr-tabs-mask);\n  mask-image: var(--gr-tabs-mask);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect, 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 { resolveScrollOverflow, type GrScrollOverflow } from '../shared/scrollOverflow'\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\n/**\n * Пустой ряд — не пустой `tablist`: роль обязана владеть потомками `tab`,\n * и текст внутри неё был бы нарушением, а не пустым состоянием. Поэтому\n * пустое состояние рисуется отдельной веткой, а не содержимым `tablist`.\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\n/**\n * Признак того, что ряд продолжается за краем.\n *\n * Полоса прокрутки у ряда скрыта намеренно, и без этого признака продолжение\n * не выдаёт себя ничем: вкладки за краем достижимы стрелками, но о том, что они\n * там есть, догадаться нечем. Затухание рисует CSS по `data-overflow`.\n *\n * Вертикальный ряд не скроллится вовсе — он растёт вниз, — поэтому состояние\n * считается только для горизонтального.\n */\nconst tablistEl = ref<HTMLElement | null>(null)\nconst scrollOverflow = ref<GrScrollOverflow>('none')\n\nlet resizeObserver: ResizeObserver | null = null\nlet scheduled = false\n\nfunction measureOverflow(): void {\n  const el = tablistEl.value\n\n  if (!el || props.orientation === 'vertical') {\n    scrollOverflow.value = 'none'\n    return\n  }\n\n  scrollOverflow.value = resolveScrollOverflow(el.scrollLeft, el.scrollWidth, el.clientWidth)\n}\n\nfunction scheduleMeasure(): void {\n  if (scheduled)\n    return\n\n  scheduled = true\n  void nextTick(() => {\n    scheduled = false\n    measureOverflow()\n  })\n}\n\nonMounted(() => {\n  scheduleMeasure()\n\n  // На сервере и в jsdom `ResizeObserver` отсутствует — измерять там нечего.\n  if (typeof ResizeObserver === 'undefined')\n    return\n\n  resizeObserver = new ResizeObserver(scheduleMeasure)\n  if (tablistEl.value)\n    resizeObserver.observe(tablistEl.value)\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n  resizeObserver = null\n})\n\n// Состав ряда меняет его ширину, ориентация — само наличие прокрутки.\nwatch(() => [props.tabs.length, props.orientation], scheduleMeasure)\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\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (props.modelValue === undefined) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`modelValue\\` не передан — получено ${String(props.modelValue)}.`,\n      )\n    }\n\n    if (!Array.isArray(props.tabs)) {\n      console.warn(\n        `[granularity] GrTabs: обязательный проп \\`tabs\\` должен быть массивом — получено ${String(props.tabs)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\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    ref=\"tablistEl\"\n    role=\"tablist\"\n    data-gr-tabs\n    :aria-orientation=\"orientation\"\n    :data-overflow=\"orientation === 'vertical' ? undefined : scrollOverflow\"\n    :class=\"tablistClass\"\n    @keydown=\"onKeydown\"\n    @scroll.passive=\"scheduleMeasure\"\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\n<style>\n/*\n * Затухание у края, за которым ряд продолжается.\n *\n * Здесь, а не утилитами, по двум причинам сразу. `mask-image` в `presetMini` не\n * выражается — это уже зафиксировано отказом в `GrImageCrop`. И маской, а не\n * градиентом-подложкой, потому что фон полосы у вариантов разный: `pills` несёт\n * свой непрозрачный `--gr-muted`, а `line` прозрачен и лежит на фоне родителя,\n * которого компонент не знает. Градиенту пришлось бы красить в цвет подложки —\n * для `line` его неоткуда взять. Маска гасит содержимое независимо от того, что\n * под ним.\n *\n * Состояние считается логически (начало/конец ряда), а направление градиента в\n * CSS выражается только физически — отсюда зеркальные правила для RTL.\n */\n\n[data-gr-tabs] {\n  /*\n   * `scrollIntoView({ inline: 'nearest' })` из кольца фокуса прижимает вкладку\n   * вплотную к краю. Без отступа прокрутки кольцо фокуса у клавиатурного\n   * пользователя оказалось бы ровно под затуханием.\n   */\n  scroll-padding-inline: var(--gr-tabs-scroll-fade, 1.5rem);\n}\n\n[data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to right, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to right, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs][data-overflow='both'] {\n  --gr-tabs-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--gr-tabs-scroll-fade, 1.5rem),\n    #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)),\n    transparent 100%\n  );\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='start'] {\n  --gr-tabs-mask: linear-gradient(to left, transparent 0, #000 var(--gr-tabs-scroll-fade, 1.5rem));\n}\n\n[dir='rtl'] [data-gr-tabs][data-overflow='end'] {\n  --gr-tabs-mask: linear-gradient(to left, #000 calc(100% - var(--gr-tabs-scroll-fade, 1.5rem)), transparent 100%);\n}\n\n[data-gr-tabs]:is([data-overflow='start'], [data-overflow='end'], [data-overflow='both']) {\n  -webkit-mask-image: var(--gr-tabs-mask);\n  mask-image: var(--gr-tabs-mask);\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrTabs/index.js

@@ -1,3 +1,3 @@
-import { n as grTabsSafelist, t as grTabsConfig } from "../../chunks/config-CMNfZO7S.js";
-import { t as GrTabs_default } from "./chunks/GrTabs-s9RzC1WX.js";
+import { t as GrTabs_default } from "./chunks/GrTabs-DVC6nfWB.js";
+import { n as grTabsSafelist, t as grTabsConfig } from "../../chunks/config-SPugeaHT.js";
 export { GrTabs_default as GrTabs, GrTabs_default as default, grTabsConfig, grTabsSafelist };

package/dist/components/GrTabsWithPanels/chunks/GrTabsWithPanels-BYtuzouj.js

@@ -0,0 +1,98 @@
+import { t as GrTabPanels_default } from "../../GrTabPanels/chunks/GrTabPanels-BDt5oVdd.js";
+import { t as GrTabs_default } from "../../GrTabs/chunks/GrTabs-DVC6nfWB.js";
+import { computed, createElementBlock, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, openBlock, renderSlot, useId, withCtx } from "vue";
+//#region src/components/GrTabsWithPanels/GrTabsWithPanels.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-orientation"];
+//#endregion
+//#region src/components/GrTabsWithPanels/GrTabsWithPanels.vue
+var GrTabsWithPanels_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTabsWithPanels",
+	props: {
+		modelValue: {},
+		tabs: {},
+		idBase: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: void 0 },
+		activationMode: { default: void 0 },
+		orientation: { default: void 0 },
+		closable: {
+			type: Boolean,
+			default: void 0
+		},
+		emptyText: { default: void 0 }
+	},
+	emits: ["update:modelValue", "close"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrTabsWithPanels — ряд вкладок вместе с их панелями.
+		*
+		* Пара `GrTabs` + `GrTabPanels` требует двух одинаковых значений в двух местах:
+		* активная вкладка и `idBase`, из которого строится связка `tab` ↔ `tabpanel`.
+		* Дублирование расходилось молча — `GrTabs` проставляет вкладкам `id` только при
+		* явном `idBase`, поэтому при обычном использовании панель ссылалась в пустоту.
+		*
+		* Здесь оба значения принадлежат одному компоненту: `v-model` один, `idBase`
+		* генерируется внутри и раздаётся обеим половинам.
+		*/
+		const props = __props;
+		const emit = __emit;
+		/**
+		* Связка держится на совпадении вычисленных id, и генерировать базу обязан один
+		* владелец. Явный `idBase` уважается: на эти id ссылаются и снаружи.
+		*/
+		const generatedIdBase = useId();
+		const resolvedIdBase = computed(() => props.idBase ?? generatedIdBase);
+		/** Вертикальный ряд вкладок стоит сбоку от панелей, а не над ними. */
+		const isVertical = computed(() => props.orientation === "vertical");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-tabs-with-panels": "",
+				"data-orientation": isVertical.value ? "vertical" : "horizontal",
+				class: normalizeClass(isVertical.value ? "flex items-start gap-4" : "flex flex-col gap-3")
+			}, [createVNode(GrTabs_default, {
+				"model-value": __props.modelValue,
+				tabs: __props.tabs,
+				"id-base": resolvedIdBase.value,
+				size: __props.size,
+				variant: __props.variant,
+				"activation-mode": __props.activationMode,
+				orientation: __props.orientation,
+				closable: __props.closable,
+				"empty-text": __props.emptyText,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => emit("update:modelValue", value)),
+				onClose: _cache[1] || (_cache[1] = (value) => emit("close", value))
+			}, createSlots({ _: 2 }, [_ctx.$slots.tab ? {
+				name: "tab",
+				fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "tab", normalizeProps(guardReactiveProps(slotProps)))]),
+				key: "0"
+			} : void 0, _ctx.$slots.empty ? {
+				name: "empty",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
+				key: "1"
+			} : void 0]), 1032, [
+				"model-value",
+				"tabs",
+				"id-base",
+				"size",
+				"variant",
+				"activation-mode",
+				"orientation",
+				"closable",
+				"empty-text"
+			]), createVNode(GrTabPanels_default, {
+				"model-value": __props.modelValue,
+				"id-base": resolvedIdBase.value,
+				class: normalizeClass(isVertical.value ? "min-w-0 flex-1" : "")
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"model-value",
+				"id-base",
+				"class"
+			])], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrTabsWithPanels_default as t };

package/dist/components/GrTabsWithPanels/chunks/GrTabsWithPanels-BYtuzouj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTabsWithPanels-BYtuzouj.js","names":["$slots"],"sources":["../../../../src/components/GrTabsWithPanels/GrTabsWithPanels.vue","../../../../src/components/GrTabsWithPanels/GrTabsWithPanels.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTabsWithPanels — ряд вкладок вместе с их панелями.\n *\n * Пара `GrTabs` + `GrTabPanels` требует двух одинаковых значений в двух местах:\n * активная вкладка и `idBase`, из которого строится связка `tab` ↔ `tabpanel`.\n * Дублирование расходилось молча — `GrTabs` проставляет вкладкам `id` только при\n * явном `idBase`, поэтому при обычном использовании панель ссылалась в пустоту.\n *\n * Здесь оба значения принадлежат одному компоненту: `v-model` один, `idBase`\n * генерируется внутри и раздаётся обеим половинам.\n */\nimport { computed, useId } from 'vue'\n\nimport GrTabPanels from '../GrTabPanels/GrTabPanels.vue'\nimport GrTabs from '../GrTabs/GrTabs.vue'\nimport type { GrTab, GrTabsProps } from '../GrTabs/GrTabs.vue'\n\nexport interface GrTabsWithPanelsProps extends GrTabsProps {}\n\nexport interface GrTabsWithPanelsEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Просьба закрыть вкладку — всплывает из `GrTabs` как есть. */\n  (e: 'close', value: string): void\n}\n\n/*\n * Дефолт у каждого проброшенного пропа — `undefined`, включая булев `closable`.\n * Иначе Vue привёл бы его к `false`, и в `GrTabs` он приехал бы как явно\n * переданный, а не как отсутствующий. У `variant` и `size` это принципиально:\n * их дефолт живёт в резолвере `GrConfigProvider`, и подставленное здесь значение\n * перекрыло бы провайдера.\n */\nconst props = withDefaults(defineProps<GrTabsWithPanelsProps>(), {\n  idBase: undefined,\n  size: undefined,\n  variant: undefined,\n  activationMode: undefined,\n  orientation: undefined,\n  closable: undefined,\n  emptyText: undefined,\n})\n\nconst emit = defineEmits<GrTabsWithPanelsEmits>()\n\ndefineSlots<{\n  /** Панели (`GrTabPanel`). */\n  default?: () => any\n  /** Содержимое вкладки целиком — уходит в `GrTabs`. */\n  tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => any\n  /** Пустой ряд вкладок — уходит в `GrTabs`. */\n  empty?: () => any\n}>()\n\n/**\n * Связка держится на совпадении вычисленных id, и генерировать базу обязан один\n * владелец. Явный `idBase` уважается: на эти id ссылаются и снаружи.\n */\nconst generatedIdBase = useId()\nconst resolvedIdBase = computed(() => props.idBase ?? generatedIdBase)\n\n/** Вертикальный ряд вкладок стоит сбоку от панелей, а не над ними. */\nconst isVertical = computed(() => props.orientation === 'vertical')\n</script>\n\n<template>\n  <div\n    data-gr-tabs-with-panels\n    :data-orientation=\"isVertical ? 'vertical' : 'horizontal'\"\n    :class=\"isVertical ? 'flex items-start gap-4' : 'flex flex-col gap-3'\"\n  >\n    <GrTabs\n      :model-value=\"modelValue\"\n      :tabs=\"tabs\"\n      :id-base=\"resolvedIdBase\"\n      :size=\"size\"\n      :variant=\"variant\"\n      :activation-mode=\"activationMode\"\n      :orientation=\"orientation\"\n      :closable=\"closable\"\n      :empty-text=\"emptyText\"\n      @update:model-value=\"value => emit('update:modelValue', value)\"\n      @close=\"value => emit('close', value)\"\n    >\n      <template v-if=\"$slots.tab\" #tab=\"slotProps\">\n        <slot name=\"tab\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"$slots.empty\" #empty>\n        <slot name=\"empty\" />\n      </template>\n    </GrTabs>\n\n    <GrTabPanels\n      :model-value=\"modelValue\"\n      :id-base=\"resolvedIdBase\"\n      :class=\"isVertical ? 'min-w-0 flex-1' : ''\"\n    >\n      <slot />\n    </GrTabPanels>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTabsWithPanels — ряд вкладок вместе с их панелями.\n *\n * Пара `GrTabs` + `GrTabPanels` требует двух одинаковых значений в двух местах:\n * активная вкладка и `idBase`, из которого строится связка `tab` ↔ `tabpanel`.\n * Дублирование расходилось молча — `GrTabs` проставляет вкладкам `id` только при\n * явном `idBase`, поэтому при обычном использовании панель ссылалась в пустоту.\n *\n * Здесь оба значения принадлежат одному компоненту: `v-model` один, `idBase`\n * генерируется внутри и раздаётся обеим половинам.\n */\nimport { computed, useId } from 'vue'\n\nimport GrTabPanels from '../GrTabPanels/GrTabPanels.vue'\nimport GrTabs from '../GrTabs/GrTabs.vue'\nimport type { GrTab, GrTabsProps } from '../GrTabs/GrTabs.vue'\n\nexport interface GrTabsWithPanelsProps extends GrTabsProps {}\n\nexport interface GrTabsWithPanelsEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Просьба закрыть вкладку — всплывает из `GrTabs` как есть. */\n  (e: 'close', value: string): void\n}\n\n/*\n * Дефолт у каждого проброшенного пропа — `undefined`, включая булев `closable`.\n * Иначе Vue привёл бы его к `false`, и в `GrTabs` он приехал бы как явно\n * переданный, а не как отсутствующий. У `variant` и `size` это принципиально:\n * их дефолт живёт в резолвере `GrConfigProvider`, и подставленное здесь значение\n * перекрыло бы провайдера.\n */\nconst props = withDefaults(defineProps<GrTabsWithPanelsProps>(), {\n  idBase: undefined,\n  size: undefined,\n  variant: undefined,\n  activationMode: undefined,\n  orientation: undefined,\n  closable: undefined,\n  emptyText: undefined,\n})\n\nconst emit = defineEmits<GrTabsWithPanelsEmits>()\n\ndefineSlots<{\n  /** Панели (`GrTabPanel`). */\n  default?: () => any\n  /** Содержимое вкладки целиком — уходит в `GrTabs`. */\n  tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => any\n  /** Пустой ряд вкладок — уходит в `GrTabs`. */\n  empty?: () => any\n}>()\n\n/**\n * Связка держится на совпадении вычисленных id, и генерировать базу обязан один\n * владелец. Явный `idBase` уважается: на эти id ссылаются и снаружи.\n */\nconst generatedIdBase = useId()\nconst resolvedIdBase = computed(() => props.idBase ?? generatedIdBase)\n\n/** Вертикальный ряд вкладок стоит сбоку от панелей, а не над ними. */\nconst isVertical = computed(() => props.orientation === 'vertical')\n</script>\n\n<template>\n  <div\n    data-gr-tabs-with-panels\n    :data-orientation=\"isVertical ? 'vertical' : 'horizontal'\"\n    :class=\"isVertical ? 'flex items-start gap-4' : 'flex flex-col gap-3'\"\n  >\n    <GrTabs\n      :model-value=\"modelValue\"\n      :tabs=\"tabs\"\n      :id-base=\"resolvedIdBase\"\n      :size=\"size\"\n      :variant=\"variant\"\n      :activation-mode=\"activationMode\"\n      :orientation=\"orientation\"\n      :closable=\"closable\"\n      :empty-text=\"emptyText\"\n      @update:model-value=\"value => emit('update:modelValue', value)\"\n      @close=\"value => emit('close', value)\"\n    >\n      <template v-if=\"$slots.tab\" #tab=\"slotProps\">\n        <slot name=\"tab\" v-bind=\"slotProps\" />\n      </template>\n      <template v-if=\"$slots.empty\" #empty>\n        <slot name=\"empty\" />\n      </template>\n    </GrTabs>\n\n    <GrTabPanels\n      :model-value=\"modelValue\"\n      :id-base=\"resolvedIdBase\"\n      :class=\"isVertical ? 'min-w-0 flex-1' : ''\"\n    >\n      <slot />\n    </GrTabPanels>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCA,MAAM,QAAQ;EAUd,MAAM,OAAO;;;;;EAeb,MAAM,kBAAkB,MAAM;EAC9B,MAAM,iBAAiB,eAAe,MAAM,UAAU,eAAe;;EAGrE,MAAM,aAAa,eAAe,MAAM,gBAAgB,UAAU;;GAIhE,OAAA,UAAA,GAAA,mBAiCM,OAAA;IAhCJ,4BAAA;IACC,oBAAkB,WAAA,QAAU,aAAA;IAC5B,OAAK,eAAE,WAAA,QAAU,2BAAA,qBAAA;GAElB,GAAA,CAAA,YAmBS,gBAAA;IAlBN,eAAa,QAAA;IACb,MAAM,QAAA;IACN,WAAS,eAAA;IACT,MAAM,QAAA;IACN,SAAS,QAAA;IACT,mBAAiB,QAAA;IACjB,aAAa,QAAA;IACb,UAAU,QAAA;IACV,cAAY,QAAA;IACZ,uBAAkB,OAAA,OAAA,OAAA,MAAE,UAAS,KAAI,qBAAsB,KAAK;IAC5D,SAAK,OAAA,OAAA,OAAA,MAAE,UAAS,KAAI,SAAU,KAAK;GAEpBA,GAAAA,YAAAA,EAAAA,GAAAA,EAAAA,GAAAA,CAAAA,KAAAA,OAAO,MAAA;IAAM,MAAA;IAC3B,IAAA,SADgC,cAAS,CACzC,WAAsC,KAAA,QAAA,OAAA,eAAA,mBAAb,SAAS,CAAA,CAAA,CAAA,CAAA;;GAEpBA,IAAAA,KAAAA,GAAAA,KAAAA,OAAO,QAAA;IAAQ,MAAA;IAC7B,IAAA,cAAqB,CAArB,WAAqB,KAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;GAIzB,CAAA,GAAA,YAMc,qBAAA;IALX,eAAa,QAAA;IACb,WAAS,eAAA;IACT,OAAK,eAAE,WAAA,QAAU,mBAAA,EAAA;;IAElB,SAAA,cAAQ,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/GrTabsWithPanels/index.js

@@ -0,0 +1,3 @@
+import { t as GrTabsWithPanels_default } from "./chunks/GrTabsWithPanels-BYtuzouj.js";
+import { t as grTabsWithPanelsConfig } from "../../chunks/config-BBrPUEye.js";
+export { GrTabsWithPanels_default as GrTabsWithPanels, GrTabsWithPanels_default as default, grTabsWithPanelsConfig };

package/dist/components/GrTextarea/chunks/{GrTextarea-Bfgc0DD2.js → GrTextarea-BFwyqcHB.js}

@@ -7,7 +7,7 @@ import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js"
 import { useGrFormControl } from "../../../composables/useGrFormControl.js";
 import { a as controlStateTextKey, i as controlStateIconColors, n as controlStateFallbackText, r as controlStateIconClass, t as controlSignalState } from "../../../chunks/controlState-DoImKciE.js";
 import { a as enabledSurfaceClass, c as lineCountClass, i as disabledSurfaceClass, l as resizeClass, n as countClass, o as grTextareaClass, r as countRowClass, u as sizes } from "../../../chunks/grTextareaStyles-Bp35BGna.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, useId, withDirectives } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, withDirectives } from "vue";
 //#region src/components/GrTextarea/GrTextarea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -90,16 +90,33 @@ var GrTextarea_default = /* @__PURE__ */ defineComponent({
 		* - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid="true"`.
 		*/
 		const props = __props;
+		const slots = useSlots();
 		const emit = __emit;
 		const field = useGrFormFieldContext();
 		const resolvedId = computed(() => props.id ?? field?.id.value);
 		const countId = useId();
 		const lineCountId = useId();
 		const stateTextId = useId();
+		/**
+		* Слот считается за просьбу показать счётчик: заданный `#count` без
+		* `show-count` не рисовал бы ничего, и потребитель искал бы опечатку в имени
+		* слота, а не забытый проп.
+		*/
+		const hasCharCount = computed(() => props.showCount || Boolean(slots.count));
 		/** Обёртка нужна любому из счётчиков — и кнопке очистки. */
-		const hasCounters = computed(() => props.showCount || props.showLineCount);
+		const hasCounters = computed(() => hasCharCount.value || props.showLineCount);
 		const lineCount = computed(() => props.modelValue.split("\n").length);
 		const countText = computed(() => props.maxlength !== void 0 ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length));
+		/**
+		* `remaining` не зажимается в ноль: `maxlength` держит ввод с клавиатуры, но
+		* значение, пришедшее в `v-model` из кода, ограничение перешагивает — и «-3»
+		* там честнее нуля.
+		*/
+		const countSlotProps = computed(() => ({
+			length: props.modelValue.length,
+			maxlength: props.maxlength,
+			remaining: props.maxlength === void 0 ? void 0 : props.maxlength - props.modelValue.length
+		}));
 		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
 		/**
 		* Небуквенный признак состояния: иконка для глаз, скрытая подпись для
@@ -110,7 +127,7 @@ var GrTextarea_default = /* @__PURE__ */ defineComponent({
 		const stateIconClass = computed(() => signalState.value ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}` : "");
 		const describedBy = computed(() => [
 			field?.describedById.value,
-			props.showCount ? countId : void 0,
+			hasCharCount.value ? countId : void 0,
 			props.showLineCount ? lineCountId : void 0,
 			signalState.value ? stateTextId : void 0
 		].filter(Boolean).join(" ") || void 0);
@@ -220,12 +237,12 @@ var GrTextarea_default = /* @__PURE__ */ defineComponent({
 					id: unref(lineCountId),
 					"data-gr-textarea-line-count": "",
 					class: normalizeClass(unref(lineCountClass))
-				}, toDisplayString(lineCountText.value), 11, _hoisted_4)) : createCommentVNode("", true), __props.showCount ? (openBlock(), createElementBlock("div", {
+				}, toDisplayString(lineCountText.value), 11, _hoisted_4)) : createCommentVNode("", true), hasCharCount.value ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					id: unref(countId),
 					"data-gr-textarea-count": "",
 					class: normalizeClass(["ml-auto", unref(countClass)])
-				}, toDisplayString(countText.value), 11, _hoisted_5)) : createCommentVNode("", true)], 2)
+				}, [renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(countSlotProps.value)), () => [createTextVNode(toDisplayString(countText.value), 1)])], 10, _hoisted_5)) : createCommentVNode("", true)], 2)
 			])) : unref(resolvedClearable) || signalState.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
 				withDirectives(createElementVNode("textarea", mergeProps({
 					ref_key: "textareaEl",

package/dist/components/GrTextarea/chunks/GrTextarea-BFwyqcHB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTextarea-BFwyqcHB.js","names":["$attrs"],"sources":["../../../../src/components/GrTextarea/GrTextarea.vue","../../../../src/components/GrTextarea/GrTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed, ref, useId } from 'vue'\nimport {\n  countClass,\n  countRowClass,\n  lineCountClass,\n  disabledSurfaceClass,\n  enabledSurfaceClass,\n  grTextareaClass,\n  resizeClass,\n  sizes,\n  type GrTextareaResize,\n  type GrTextareaSize,\n  type GrTextareaState,\n} from './grTextareaStyles'\nimport IconX from '~icons/lucide/x'\nimport IconCheckCircle from '~icons/lucide/check-circle'\nimport IconAlertTriangle from '~icons/lucide/alert-triangle'\nimport { vAutosize } from '../../directives'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  controlSignalState,\n  controlStateFallbackText,\n  controlStateIconClass,\n  controlStateIconColors,\n  controlStateTextKey,\n} from '../shared/controlState'\n\nexport interface GrTextareaProps {\n  modelValue: string\n  placeholder?: string\n  autocomplete?: string\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: GrTextareaState\n  name?: string\n  id?: string\n  rows?: number\n  size?: GrTextareaSize\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Показывать счётчик строк. Считаются **логические** строки (переводы строки), а\n   * не визуальные переносы: при `autosize` число не меняется от ширины поля.\n   */\n  showLineCount?: boolean\n  /**\n   * Ориентир по числу строк для счётчика (`3 / 10`). Ввод не ограничивает: обрезать\n   * набранный текст за пользователя компонент не вправе.\n   */\n  maxLines?: number\n  /** Подгонять высоту под содержимое (директива `v-autosize`). */\n  autosize?: boolean\n  /** Кнопка очистки значения. Настраивается через `GrConfigProvider`. */\n  clearable?: boolean\n  /** A11y-подпись кнопки очистки. */\n  clearLabel?: string\n  /** Ручное изменение размера пользователем. */\n  resize?: GrTextareaResize\n}\n\nexport interface GrTextareaEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur`. */\n  (e: 'change', value: string): void\n  /** Значение стёрто кнопкой очистки. */\n  (e: 'clear'): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrTextareaProps>(), {\n  placeholder: undefined,\n  autocomplete: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n  state: 'default',\n  name: undefined,\n  id: undefined,\n  rows: 4,\n  size: undefined,\n  maxlength: undefined,\n  showCount: false,\n  autosize: false,\n  clearable: undefined,\n  clearLabel: undefined,\n  resize: 'vertical',\n})\n\ndefineOptions({\n  // Иначе атрибуты потребителя (`data-*`, `aria-*`, `name`) садятся на корень,\n  // а корень со `showCount` — обёртка счётчика, а не само поле.\n  inheritAttrs: false,\n})\n\nconst slots = defineSlots<{\n  /**\n   * Своя формулировка счётчика символов вместо `12 / 60` — «осталось 48»,\n   * «почти предел» и что угодно ещё. Встроенных счётчиков два, но оба\n   * фиксированы по форме, и вторая готовая формулировка первой не заменяет.\n   */\n  count?: (props: { length: number, maxlength?: number, remaining?: number }) => any\n}>()\n\nconst emit = defineEmits<GrTextareaEmits>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required).\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том что ограничение длины и есть его смысл.\nconst countId = useId()\nconst lineCountId = useId()\nconst stateTextId = useId()\n\n/**\n * Слот считается за просьбу показать счётчик: заданный `#count` без\n * `show-count` не рисовал бы ничего, и потребитель искал бы опечатку в имени\n * слота, а не забытый проп.\n */\nconst hasCharCount = computed(() => props.showCount || Boolean(slots.count))\n\n/** Обёртка нужна любому из счётчиков — и кнопке очистки. */\nconst hasCounters = computed(() => hasCharCount.value || props.showLineCount)\n\nconst lineCount = computed(() => props.modelValue.split('\\n').length)\n\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * `remaining` не зажимается в ноль: `maxlength` держит ввод с клавиатуры, но\n * значение, пришедшее в `v-model` из кода, ограничение перешагивает — и «-3»\n * там честнее нуля.\n */\nconst countSlotProps = computed(() => ({\n  length: props.modelValue.length,\n  maxlength: props.maxlength,\n  remaining: props.maxlength === undefined ? undefined : props.maxlength - props.modelValue.length,\n}))\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\n/**\n * Небуквенный признак состояния: иконка для глаз, скрытая подпись для\n * скринридера. Разбор — `shared/controlState`.\n */\nconst signalState = computed(() => controlSignalState(props.state, isInvalid.value))\nconst stateIcon = computed(() => (signalState.value === 'success' ? IconCheckCircle : IconAlertTriangle))\nconst stateIconClass = computed(() => (signalState.value\n  ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}`\n  : ''))\n\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    hasCharCount.value ? countId : undefined,\n    props.showLineCount ? lineCountId : undefined,\n    signalState.value ? stateTextId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\nconst textareaEl = ref<HTMLTextAreaElement | null>(null)\n\nfunction focus(): void {\n  textareaEl.value?.focus()\n}\n\nfunction blur(): void {\n  textareaEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTextarea' })\nconst resolvedClearable = useGrComponentProp('GrTextarea', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\n\nconst stateText = computed(() => (signalState.value\n  ? t(controlStateTextKey[signalState.value], controlStateFallbackText[signalState.value])\n  : ''))\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\n\n/** С `maxLines` — «3 / 10», без него — локализованная подпись с формой числа. */\nconst lineCountText = computed(() => (\n  props.maxLines !== undefined\n    ? `${lineCount.value} / ${props.maxLines}`\n    : t('gr.textarea.lines', '{n} lines', { n: lineCount.value })\n))\n\nconst showClear = computed(() =>\n  resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('change', '')\n  emit('clear')\n  focus()\n}\n\nconst baseClass = 'w-full rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed'\n\nconst className = computed(() => [\n  sizes[resolvedSize.value],\n  resizeClass[props.resize],\n  isDisabled.value ? disabledSurfaceClass : enabledSurfaceClass,\n  grTextareaClass({\n    state: props.state,\n    invalid: isInvalid.value,\n  }),\n].join(' '))\n\n// Обе ветки шаблона (со счётчиком и без) рендерят одно и то же поле, поэтому\n// атрибуты живут одним объектом: двадцать строк копипасты расходятся молча.\nconst textareaAttrs = computed(() => ({\n  'id': resolvedId.value,\n  'data-gr-textarea': '',\n  'name': props.name,\n  'rows': props.rows,\n  'maxlength': props.maxlength,\n  'autocomplete': props.autocomplete,\n  'placeholder': props.placeholder,\n  'disabled': isDisabled.value,\n  'value': props.modelValue,\n  'aria-invalid': isInvalid.value ? ('true' as const) : undefined,\n  'aria-describedby': describedBy.value,\n  'aria-required': isRequired.value ? ('true' as const) : undefined,\n  'aria-readonly': isReadonly.value ? ('true' as const) : undefined,\n  'aria-label': props.ariaLabel,\n  'readonly': isReadonly.value,\n  'class': [baseClass, className.value],\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLTextAreaElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n</script>\n\n<template>\n  <div v-if=\"hasCounters\" data-gr-textarea-wrap class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <span\n      v-if=\"signalState\"\n      data-gr-textarea-state\n      class=\"absolute top-2\" :class=\"[stateIconClass, showClear ? 'right-10' : 'right-2']\"\n      aria-hidden=\"true\"\n    >\n      <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n    </span>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-textarea-state-text class=\"sr-only\">{{ stateText }}</span>\n\n    <div :class=\"countRowClass\">\n      <div\n        v-if=\"showLineCount\"\n        :id=\"lineCountId\"\n        data-gr-textarea-line-count\n        :class=\"lineCountClass\"\n      >\n        {{ lineCountText }}\n      </div>\n\n      <!-- Символьный счётчик всегда прижат вправо: без счётчика строк он остаётся\n           единственным в ряду, и `justify-between` его туда и отправляет. -->\n      <div\n        v-if=\"hasCharCount\"\n        :id=\"countId\"\n        data-gr-textarea-count\n        class=\"ml-auto\"\n        :class=\"countClass\"\n      >\n        <slot name=\"count\" v-bind=\"countSlotProps\">\n          {{ countText }}\n        </slot>\n      </div>\n    </div>\n  </div>\n\n  <!-- Обёртка появляется под кнопку очистки и под признак состояния: без них\n       поле остаётся корневым элементом — на этом стоит контракт\n       fallthrough-атрибутов. -->\n  <div v-else-if=\"resolvedClearable || signalState\" class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <span\n      v-if=\"signalState\"\n      data-gr-textarea-state\n      class=\"absolute top-2\" :class=\"[stateIconClass, showClear ? 'right-10' : 'right-2']\"\n      aria-hidden=\"true\"\n    >\n      <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n    </span>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-textarea-state-text class=\"sr-only\">{{ stateText }}</span>\n  </div>\n\n  <textarea\n    v-else\n    ref=\"textareaEl\"\n    v-autosize=\"autosize\"\n    v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n    @input=\"onInput\"\n    @change=\"onChange\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed, ref, useId } from 'vue'\nimport {\n  countClass,\n  countRowClass,\n  lineCountClass,\n  disabledSurfaceClass,\n  enabledSurfaceClass,\n  grTextareaClass,\n  resizeClass,\n  sizes,\n  type GrTextareaResize,\n  type GrTextareaSize,\n  type GrTextareaState,\n} from './grTextareaStyles'\nimport IconX from '~icons/lucide/x'\nimport IconCheckCircle from '~icons/lucide/check-circle'\nimport IconAlertTriangle from '~icons/lucide/alert-triangle'\nimport { vAutosize } from '../../directives'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport {\n  controlSignalState,\n  controlStateFallbackText,\n  controlStateIconClass,\n  controlStateIconColors,\n  controlStateTextKey,\n} from '../shared/controlState'\n\nexport interface GrTextareaProps {\n  modelValue: string\n  placeholder?: string\n  autocomplete?: string\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: GrTextareaState\n  name?: string\n  id?: string\n  rows?: number\n  size?: GrTextareaSize\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Показывать счётчик строк. Считаются **логические** строки (переводы строки), а\n   * не визуальные переносы: при `autosize` число не меняется от ширины поля.\n   */\n  showLineCount?: boolean\n  /**\n   * Ориентир по числу строк для счётчика (`3 / 10`). Ввод не ограничивает: обрезать\n   * набранный текст за пользователя компонент не вправе.\n   */\n  maxLines?: number\n  /** Подгонять высоту под содержимое (директива `v-autosize`). */\n  autosize?: boolean\n  /** Кнопка очистки значения. Настраивается через `GrConfigProvider`. */\n  clearable?: boolean\n  /** A11y-подпись кнопки очистки. */\n  clearLabel?: string\n  /** Ручное изменение размера пользователем. */\n  resize?: GrTextareaResize\n}\n\nexport interface GrTextareaEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur`. */\n  (e: 'change', value: string): void\n  /** Значение стёрто кнопкой очистки. */\n  (e: 'clear'): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrTextareaProps>(), {\n  placeholder: undefined,\n  autocomplete: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n  state: 'default',\n  name: undefined,\n  id: undefined,\n  rows: 4,\n  size: undefined,\n  maxlength: undefined,\n  showCount: false,\n  autosize: false,\n  clearable: undefined,\n  clearLabel: undefined,\n  resize: 'vertical',\n})\n\ndefineOptions({\n  // Иначе атрибуты потребителя (`data-*`, `aria-*`, `name`) садятся на корень,\n  // а корень со `showCount` — обёртка счётчика, а не само поле.\n  inheritAttrs: false,\n})\n\nconst slots = defineSlots<{\n  /**\n   * Своя формулировка счётчика символов вместо `12 / 60` — «осталось 48»,\n   * «почти предел» и что угодно ещё. Встроенных счётчиков два, но оба\n   * фиксированы по форме, и вторая готовая формулировка первой не заменяет.\n   */\n  count?: (props: { length: number, maxlength?: number, remaining?: number }) => any\n}>()\n\nconst emit = defineEmits<GrTextareaEmits>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required).\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том что ограничение длины и есть его смысл.\nconst countId = useId()\nconst lineCountId = useId()\nconst stateTextId = useId()\n\n/**\n * Слот считается за просьбу показать счётчик: заданный `#count` без\n * `show-count` не рисовал бы ничего, и потребитель искал бы опечатку в имени\n * слота, а не забытый проп.\n */\nconst hasCharCount = computed(() => props.showCount || Boolean(slots.count))\n\n/** Обёртка нужна любому из счётчиков — и кнопке очистки. */\nconst hasCounters = computed(() => hasCharCount.value || props.showLineCount)\n\nconst lineCount = computed(() => props.modelValue.split('\\n').length)\n\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * `remaining` не зажимается в ноль: `maxlength` держит ввод с клавиатуры, но\n * значение, пришедшее в `v-model` из кода, ограничение перешагивает — и «-3»\n * там честнее нуля.\n */\nconst countSlotProps = computed(() => ({\n  length: props.modelValue.length,\n  maxlength: props.maxlength,\n  remaining: props.maxlength === undefined ? undefined : props.maxlength - props.modelValue.length,\n}))\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\n/**\n * Небуквенный признак состояния: иконка для глаз, скрытая подпись для\n * скринридера. Разбор — `shared/controlState`.\n */\nconst signalState = computed(() => controlSignalState(props.state, isInvalid.value))\nconst stateIcon = computed(() => (signalState.value === 'success' ? IconCheckCircle : IconAlertTriangle))\nconst stateIconClass = computed(() => (signalState.value\n  ? `${controlStateIconClass} ${controlStateIconColors[signalState.value]}`\n  : ''))\n\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    hasCharCount.value ? countId : undefined,\n    props.showLineCount ? lineCountId : undefined,\n    signalState.value ? stateTextId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\nconst textareaEl = ref<HTMLTextAreaElement | null>(null)\n\nfunction focus(): void {\n  textareaEl.value?.focus()\n}\n\nfunction blur(): void {\n  textareaEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTextarea' })\nconst resolvedClearable = useGrComponentProp('GrTextarea', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\n\nconst stateText = computed(() => (signalState.value\n  ? t(controlStateTextKey[signalState.value], controlStateFallbackText[signalState.value])\n  : ''))\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\n\n/** С `maxLines` — «3 / 10», без него — локализованная подпись с формой числа. */\nconst lineCountText = computed(() => (\n  props.maxLines !== undefined\n    ? `${lineCount.value} / ${props.maxLines}`\n    : t('gr.textarea.lines', '{n} lines', { n: lineCount.value })\n))\n\nconst showClear = computed(() =>\n  resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('change', '')\n  emit('clear')\n  focus()\n}\n\nconst baseClass = 'w-full rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed'\n\nconst className = computed(() => [\n  sizes[resolvedSize.value],\n  resizeClass[props.resize],\n  isDisabled.value ? disabledSurfaceClass : enabledSurfaceClass,\n  grTextareaClass({\n    state: props.state,\n    invalid: isInvalid.value,\n  }),\n].join(' '))\n\n// Обе ветки шаблона (со счётчиком и без) рендерят одно и то же поле, поэтому\n// атрибуты живут одним объектом: двадцать строк копипасты расходятся молча.\nconst textareaAttrs = computed(() => ({\n  'id': resolvedId.value,\n  'data-gr-textarea': '',\n  'name': props.name,\n  'rows': props.rows,\n  'maxlength': props.maxlength,\n  'autocomplete': props.autocomplete,\n  'placeholder': props.placeholder,\n  'disabled': isDisabled.value,\n  'value': props.modelValue,\n  'aria-invalid': isInvalid.value ? ('true' as const) : undefined,\n  'aria-describedby': describedBy.value,\n  'aria-required': isRequired.value ? ('true' as const) : undefined,\n  'aria-readonly': isReadonly.value ? ('true' as const) : undefined,\n  'aria-label': props.ariaLabel,\n  'readonly': isReadonly.value,\n  'class': [baseClass, className.value],\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLTextAreaElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n</script>\n\n<template>\n  <div v-if=\"hasCounters\" data-gr-textarea-wrap class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <span\n      v-if=\"signalState\"\n      data-gr-textarea-state\n      class=\"absolute top-2\" :class=\"[stateIconClass, showClear ? 'right-10' : 'right-2']\"\n      aria-hidden=\"true\"\n    >\n      <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n    </span>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-textarea-state-text class=\"sr-only\">{{ stateText }}</span>\n\n    <div :class=\"countRowClass\">\n      <div\n        v-if=\"showLineCount\"\n        :id=\"lineCountId\"\n        data-gr-textarea-line-count\n        :class=\"lineCountClass\"\n      >\n        {{ lineCountText }}\n      </div>\n\n      <!-- Символьный счётчик всегда прижат вправо: без счётчика строк он остаётся\n           единственным в ряду, и `justify-between` его туда и отправляет. -->\n      <div\n        v-if=\"hasCharCount\"\n        :id=\"countId\"\n        data-gr-textarea-count\n        class=\"ml-auto\"\n        :class=\"countClass\"\n      >\n        <slot name=\"count\" v-bind=\"countSlotProps\">\n          {{ countText }}\n        </slot>\n      </div>\n    </div>\n  </div>\n\n  <!-- Обёртка появляется под кнопку очистки и под признак состояния: без них\n       поле остаётся корневым элементом — на этом стоит контракт\n       fallthrough-атрибутов. -->\n  <div v-else-if=\"resolvedClearable || signalState\" class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <span\n      v-if=\"signalState\"\n      data-gr-textarea-state\n      class=\"absolute top-2\" :class=\"[stateIconClass, showClear ? 'right-10' : 'right-2']\"\n      aria-hidden=\"true\"\n    >\n      <component :is=\"stateIcon\" class=\"h-4 w-4\" />\n    </span>\n\n    <span v-if=\"signalState\" :id=\"stateTextId\" data-gr-textarea-state-text class=\"sr-only\">{{ stateText }}</span>\n  </div>\n\n  <textarea\n    v-else\n    ref=\"textareaEl\"\n    v-autosize=\"autosize\"\n    v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n    @input=\"onInput\"\n    @change=\"onChange\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/components/GrTextarea/index.js

@@ -1,3 +1,3 @@
-import { t as GrTextarea_default } from "./chunks/GrTextarea-Bfgc0DD2.js";
+import { t as GrTextarea_default } from "./chunks/GrTextarea-BFwyqcHB.js";
 import { n as grTextareaSafelist, t as grTextareaConfig } from "../../chunks/config-DENqOoh0.js";
 export { GrTextarea_default as GrTextarea, GrTextarea_default as default, grTextareaConfig, grTextareaSafelist };