@feugene/granularity 0.49.0 → 0.50.0

package/dist/components/GrTooltip/chunks/GrTooltip-BDcFycvW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTooltip-BDcFycvW.js","names":[],"sources":["../../../../src/components/GrTooltip/GrTooltip.vue","../../../../src/components/GrTooltip/GrTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTooltip — GR-примитив инлайн-подсказки на hover/focus.\n *\n * По умолчанию триггер — иконка info; можно заменить через слот.\n * A11y:\n * - `role=\"tooltip\"` связывается с триггером через уникальный `aria-describedby`;\n * - подсказка закрывается по `Escape` (WCAG 1.4.13 «Content on Hover or Focus» —\n *   dismissible без необходимости двигать курсор/фокус);\n * - панель не интерактивна (`pointer-events-none`), поэтому «hoverable»-требование\n *   того же критерия неприменимо — навести курсор на саму подсказку невозможно.\n *\n * Позиционирование — через общий `useFloating` (см. `composables/internal`):\n * `placement` задаёт предпочтительную сторону, `flip` переворачивает подсказку,\n * если места не хватает, а `shift` не даёт ей вылезти за края viewport.\n */\nimport { computed, onMounted, onUnmounted, onUpdated, ref, useId, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport GrIcon from '../GrIcon'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useDismissible } from '../../composables/useDismissible'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { type GrTooltipSize, panelSizes, panelWidths, triggerIconSizes } from './grTooltipStyles'\n\nimport IconInfo from '~icons/lucide/info'\n\nexport type GrTooltipPlacement = UseFloatingPlacement\n\nexport interface GrTooltipProps {\n  /** Текст подсказки. Разметка вместо текста — слот `#content`. */\n  text?: string\n  /** Цвет триггер-иконки (CSS color). По умолчанию — `var(--gr-muted-fg)`. */\n  iconColor?: string\n  /** Размер панели и дефолтной триггер-иконки. */\n  size?: GrTooltipSize\n  /** Предпочтительная сторона панели; `flip` может её изменить. */\n  placement?: GrTooltipPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  /** Задержка перед показом, мс. Спасает от мигания при проведении курсором по панели кнопок. */\n  openDelay?: number\n  /** Задержка перед скрытием, мс. */\n  closeDelay?: number\n  /** Подсказка не показывается ничем — ни курсором, ни фокусом, ни `v-model:open`. */\n  disabled?: boolean\n  /** Управляемая видимость. Без неё компонент ведёт видимость сам. */\n  open?: boolean\n  /**\n   * Обёртка занимает ширину родителя вместо ширины содержимого.\n   *\n   * Нужно там, где триггер обязан тянуться: пункт списка, строка меню, ячейка.\n   * `inline-flex` по умолчанию схлопнул бы такой триггер по содержимому, и\n   * подсветка с кольцом фокуса сжались бы вместе с ним.\n   */\n  block?: boolean\n  /**\n   * Вешать ли `aria-describedby` на триггер. По умолчанию да.\n   *\n   * `false` — когда подсказка **дословно повторяет** доступное имя триггера:\n   * тогда это не описание, а шум, и диктор произносит подпись дважды. Так\n   * устроен свёрнутый `GrSidebarItem`: имя у него уже в `aria-label`.\n   */\n  describeTrigger?: boolean\n}\n\nexport interface GrTooltipEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrTooltipProps>(), {\n  text: undefined,\n  iconColor: 'var(--gr-muted-fg)',\n  size: undefined,\n  placement: 'top',\n  offsetPx: undefined,\n  openDelay: 0,\n  closeDelay: 0,\n  disabled: false,\n  open: undefined,\n  block: false,\n  describeTrigger: true,\n})\n\nconst emit = defineEmits<GrTooltipEmits>()\n\ndefineSlots<{\n  /** Триггер. По умолчанию — иконка info. */\n  default?: () => unknown\n  /** Содержимое подсказки; заменяет проп `text`. */\n  content?: () => unknown\n}>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTooltip' })\n\nconst panelClass = computed(() => [\n  panelSizes[resolvedSize.value],\n  panelWidths[resolvedSize.value],\n].join(' '))\nconst triggerIconSize = computed(() => triggerIconSizes[resolvedSize.value])\n\nconst tooltipId = `gr-tooltip-${useId()}`\n\nconst triggerStyle = computed(() => ({ color: props.iconColor }))\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\nconst uncontrolledOpen = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Показывать нечего — пустая панель хуже отсутствующей. */\nconst hasContent = computed(() => Boolean(slots.content) || Boolean(props.text))\n\nconst open = computed<boolean>({\n  get: () => {\n    if (props.disabled || !hasContent.value)\n      return false\n    return props.open ?? uncontrolledOpen.value\n  },\n  set: (next) => {\n    uncontrolledOpen.value = next\n    emit('update:open', next)\n  },\n})\n\nconst { floatingStyle } = useFloating(triggerEl, panelEl, open, {\n  placement: () => props.placement,\n  // Геттер, а не значение: `useFloating` читает опцию на каждом пересчёте, и\n  // так проп остаётся живым, а не замирает на моменте setup.\n  get offsetPx() { return props.offsetPx },\n  zIndexVar: '--gr-z-tooltip',\n})\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction schedule(next: boolean, delayMs: number): void {\n  clearTimeout(delayTimer)\n\n  if (delayMs <= 0) {\n    open.value = next\n    return\n  }\n\n  delayTimer = setTimeout(() => {\n    open.value = next\n  }, delayMs)\n}\n\nfunction show(): void {\n  if (props.disabled)\n    return\n  schedule(true, props.openDelay)\n}\n\nfunction hide(): void {\n  schedule(false, props.closeDelay)\n}\n\n/** Escape и клик вне закрывают мгновенно: задержка тут читалась бы как залипание. */\nfunction dismiss(): void {\n  clearTimeout(delayTimer)\n  if (open.value)\n    open.value = false\n}\n\n// Нужен только тач-режиму: курсор и фокус закрывают подсказку сами.\nconst dismissOnOutside = computed(() => ({ handler: dismiss, enabled: open.value }))\n\n/**\n * На тач-устройствах hover не существует, а фокус по тапу не гарантирован —\n * без этого подсказка там недоступна вовсе. Тап по триггеру переключает\n * панель, тап вне — закрывает (`vClickOutside`).\n */\nfunction onTouch(): void {\n  if (open.value)\n    dismiss()\n  else show()\n}\n\nonUnmounted(() => clearTimeout(delayTimer))\n\nuseDismissible(open, dismiss)\n\nconst FOCUSABLE_SELECTOR = 'a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])'\n\n/**\n * Типовое употребление — подсказка у кнопки. Фокусируемая обёртка вокруг\n * фокусируемого контрола дала бы два таб-стопа на один визуальный элемент,\n * поэтому обёртка забирает `tabindex` только когда в слоте фокусироваться\n * нечему (текст, иконка). Разметку слота пишет потребитель, привязать к ней\n * `aria-describedby` из шаблона нельзя — отсюда единственная точка, где атрибут\n * ставится вручную.\n */\nconst slotFocusableEl = ref<HTMLElement | null>(null)\n\nfunction syncSlotFocusable(): void {\n  slotFocusableEl.value = slots.default\n    ? triggerEl.value?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null\n    : null\n}\n\nonMounted(syncSlotFocusable)\nonUpdated(syncSlotFocusable)\n\nwatchEffect((onCleanup) => {\n  const el = slotFocusableEl.value\n  if (!el || !props.describeTrigger)\n    return\n\n  el.setAttribute('aria-describedby', tooltipId)\n  onCleanup(() => el.removeAttribute('aria-describedby'))\n})\n\nconst wrapperTabindex = computed(() => (slotFocusableEl.value ? undefined : 0))\nconst wrapperDescribedBy = computed(() => (\n  slotFocusableEl.value || !props.describeTrigger ? undefined : tooltipId\n))\n\n/**\n * Обе обёртки, а не только внешняя: внутренний триггер тоже `inline-flex`, и\n * снаружи до него не дотянуться — оставь его как есть, и содержимое всё равно\n * схлопнется по себе.\n */\nconst layoutClass = computed(() => (props.block ? 'flex w-full' : 'inline-flex'))\n</script>\n\n<template>\n  <span\n    v-click-outside=\"dismissOnOutside\"\n    data-gr-tooltip\n    class=\"relative\"\n    :class=\"layoutClass\"\n  >\n    <span\n      ref=\"triggerEl\"\n      data-gr-tooltip-trigger\n      data-testid=\"gr-tooltip-trigger\"\n      :tabindex=\"wrapperTabindex\"\n      :aria-describedby=\"wrapperDescribedBy\"\n      class=\"items-center justify-center focus:outline-none\"\n      :class=\"layoutClass\"\n      :style=\"triggerStyle\"\n      @mouseenter=\"show\"\n      @mouseleave=\"hide\"\n      @focusin=\"show\"\n      @focusout=\"hide\"\n      @touchstart.passive=\"onTouch\"\n    >\n      <slot>\n        <GrIcon :size=\"triggerIconSize\">\n          <IconInfo />\n        </GrIcon>\n      </slot>\n    </span>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <!--\n        Свой набор, а не общий `panelPopTransition`: подсказка появляется фейдом\n        без масштабирования — она догоняет курсор, и рост от 95% читался бы как\n        второй, лишний жест. В общей карте живут наборы с двумя и более\n        потребителями, у этого он один.\n      -->\n      <transition\n        enter-active-class=\"transition-opacity ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"opacity-0\"\n        enter-to-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"opacity-100\"\n        leave-to-class=\"opacity-0\"\n      >\n        <span\n          v-show=\"open\"\n          :id=\"tooltipId\"\n          ref=\"panelEl\"\n          role=\"tooltip\"\n          v-bind=\"themeAttrs\"\n          data-gr-tooltip-panel\n          data-gr-overlay-root\n          class=\"pointer-events-none rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-1)]\"\n          :class=\"panelClass\"\n          :style=\"floatingStyle\"\n        >\n          <slot name=\"content\">{{ text }}</slot>\n        </span>\n      </transition>\n    </teleport>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTooltip — GR-примитив инлайн-подсказки на hover/focus.\n *\n * По умолчанию триггер — иконка info; можно заменить через слот.\n * A11y:\n * - `role=\"tooltip\"` связывается с триггером через уникальный `aria-describedby`;\n * - подсказка закрывается по `Escape` (WCAG 1.4.13 «Content on Hover or Focus» —\n *   dismissible без необходимости двигать курсор/фокус);\n * - панель не интерактивна (`pointer-events-none`), поэтому «hoverable»-требование\n *   того же критерия неприменимо — навести курсор на саму подсказку невозможно.\n *\n * Позиционирование — через общий `useFloating` (см. `composables/internal`):\n * `placement` задаёт предпочтительную сторону, `flip` переворачивает подсказку,\n * если места не хватает, а `shift` не даёт ей вылезти за края viewport.\n */\nimport { computed, onMounted, onUnmounted, onUpdated, ref, useId, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\n\nimport { vClickOutside } from '../../directives'\nimport GrIcon from '../GrIcon'\nimport { useFloating, type UseFloatingPlacement } from '../../composables/useFloating'\nimport { useDismissible } from '../../composables/useDismissible'\nimport { useGrComponentSize, useGrThemeAttrs } from '../GrConfigProvider/context'\nimport { type GrTooltipSize, panelSizes, panelWidths, triggerIconSizes } from './grTooltipStyles'\n\nimport IconInfo from '~icons/lucide/info'\n\nexport type GrTooltipPlacement = UseFloatingPlacement\n\nexport interface GrTooltipProps {\n  /** Текст подсказки. Разметка вместо текста — слот `#content`. */\n  text?: string\n  /** Цвет триггер-иконки (CSS color). По умолчанию — `var(--gr-muted-fg)`. */\n  iconColor?: string\n  /** Размер панели и дефолтной триггер-иконки. */\n  size?: GrTooltipSize\n  /** Предпочтительная сторона панели; `flip` может её изменить. */\n  placement?: GrTooltipPlacement\n  /** Зазор между триггером и панелью, px. */\n  offsetPx?: number\n  /** Задержка перед показом, мс. Спасает от мигания при проведении курсором по панели кнопок. */\n  openDelay?: number\n  /** Задержка перед скрытием, мс. */\n  closeDelay?: number\n  /** Подсказка не показывается ничем — ни курсором, ни фокусом, ни `v-model:open`. */\n  disabled?: boolean\n  /** Управляемая видимость. Без неё компонент ведёт видимость сам. */\n  open?: boolean\n  /**\n   * Обёртка занимает ширину родителя вместо ширины содержимого.\n   *\n   * Нужно там, где триггер обязан тянуться: пункт списка, строка меню, ячейка.\n   * `inline-flex` по умолчанию схлопнул бы такой триггер по содержимому, и\n   * подсветка с кольцом фокуса сжались бы вместе с ним.\n   */\n  block?: boolean\n  /**\n   * Вешать ли `aria-describedby` на триггер. По умолчанию да.\n   *\n   * `false` — когда подсказка **дословно повторяет** доступное имя триггера:\n   * тогда это не описание, а шум, и диктор произносит подпись дважды. Так\n   * устроен свёрнутый `GrSidebarItem`: имя у него уже в `aria-label`.\n   */\n  describeTrigger?: boolean\n}\n\nexport interface GrTooltipEmits {\n  (e: 'update:open', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrTooltipProps>(), {\n  text: undefined,\n  iconColor: 'var(--gr-muted-fg)',\n  size: undefined,\n  placement: 'top',\n  offsetPx: undefined,\n  openDelay: 0,\n  closeDelay: 0,\n  disabled: false,\n  open: undefined,\n  block: false,\n  describeTrigger: true,\n})\n\nconst emit = defineEmits<GrTooltipEmits>()\n\ndefineSlots<{\n  /** Триггер. По умолчанию — иконка info. */\n  default?: () => unknown\n  /** Содержимое подсказки; заменяет проп `text`. */\n  content?: () => unknown\n}>()\n\nconst slots = useSlots()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTooltip' })\n\nconst panelClass = computed(() => [\n  panelSizes[resolvedSize.value],\n  panelWidths[resolvedSize.value],\n].join(' '))\nconst triggerIconSize = computed(() => triggerIconSizes[resolvedSize.value])\n\nconst tooltipId = `gr-tooltip-${useId()}`\n\nconst triggerStyle = computed(() => ({ color: props.iconColor }))\n\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\nconst uncontrolledOpen = ref(false)\nconst triggerEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Показывать нечего — пустая панель хуже отсутствующей. */\nconst hasContent = computed(() => Boolean(slots.content) || Boolean(props.text))\n\nconst open = computed<boolean>({\n  get: () => {\n    if (props.disabled || !hasContent.value)\n      return false\n    return props.open ?? uncontrolledOpen.value\n  },\n  set: (next) => {\n    uncontrolledOpen.value = next\n    emit('update:open', next)\n  },\n})\n\nconst { floatingStyle } = useFloating(triggerEl, panelEl, open, {\n  placement: () => props.placement,\n  // Геттер, а не значение: `useFloating` читает опцию на каждом пересчёте, и\n  // так проп остаётся живым, а не замирает на моменте setup.\n  get offsetPx() { return props.offsetPx },\n  zIndexVar: '--gr-z-tooltip',\n})\n\nlet delayTimer: ReturnType<typeof setTimeout> | undefined\n\nfunction schedule(next: boolean, delayMs: number): void {\n  clearTimeout(delayTimer)\n\n  if (delayMs <= 0) {\n    open.value = next\n    return\n  }\n\n  delayTimer = setTimeout(() => {\n    open.value = next\n  }, delayMs)\n}\n\nfunction show(): void {\n  if (props.disabled)\n    return\n  schedule(true, props.openDelay)\n}\n\nfunction hide(): void {\n  schedule(false, props.closeDelay)\n}\n\n/** Escape и клик вне закрывают мгновенно: задержка тут читалась бы как залипание. */\nfunction dismiss(): void {\n  clearTimeout(delayTimer)\n  if (open.value)\n    open.value = false\n}\n\n// Нужен только тач-режиму: курсор и фокус закрывают подсказку сами.\nconst dismissOnOutside = computed(() => ({ handler: dismiss, enabled: open.value }))\n\n/**\n * На тач-устройствах hover не существует, а фокус по тапу не гарантирован —\n * без этого подсказка там недоступна вовсе. Тап по триггеру переключает\n * панель, тап вне — закрывает (`vClickOutside`).\n */\nfunction onTouch(): void {\n  if (open.value)\n    dismiss()\n  else show()\n}\n\nonUnmounted(() => clearTimeout(delayTimer))\n\nuseDismissible(open, dismiss)\n\nconst FOCUSABLE_SELECTOR = 'a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])'\n\n/**\n * Типовое употребление — подсказка у кнопки. Фокусируемая обёртка вокруг\n * фокусируемого контрола дала бы два таб-стопа на один визуальный элемент,\n * поэтому обёртка забирает `tabindex` только когда в слоте фокусироваться\n * нечему (текст, иконка). Разметку слота пишет потребитель, привязать к ней\n * `aria-describedby` из шаблона нельзя — отсюда единственная точка, где атрибут\n * ставится вручную.\n */\nconst slotFocusableEl = ref<HTMLElement | null>(null)\n\nfunction syncSlotFocusable(): void {\n  slotFocusableEl.value = slots.default\n    ? triggerEl.value?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? null\n    : null\n}\n\nonMounted(syncSlotFocusable)\nonUpdated(syncSlotFocusable)\n\nwatchEffect((onCleanup) => {\n  const el = slotFocusableEl.value\n  if (!el || !props.describeTrigger)\n    return\n\n  el.setAttribute('aria-describedby', tooltipId)\n  onCleanup(() => el.removeAttribute('aria-describedby'))\n})\n\nconst wrapperTabindex = computed(() => (slotFocusableEl.value ? undefined : 0))\nconst wrapperDescribedBy = computed(() => (\n  slotFocusableEl.value || !props.describeTrigger ? undefined : tooltipId\n))\n\n/**\n * Обе обёртки, а не только внешняя: внутренний триггер тоже `inline-flex`, и\n * снаружи до него не дотянуться — оставь его как есть, и содержимое всё равно\n * схлопнется по себе.\n */\nconst layoutClass = computed(() => (props.block ? 'flex w-full' : 'inline-flex'))\n</script>\n\n<template>\n  <span\n    v-click-outside=\"dismissOnOutside\"\n    data-gr-tooltip\n    class=\"relative\"\n    :class=\"layoutClass\"\n  >\n    <span\n      ref=\"triggerEl\"\n      data-gr-tooltip-trigger\n      data-testid=\"gr-tooltip-trigger\"\n      :tabindex=\"wrapperTabindex\"\n      :aria-describedby=\"wrapperDescribedBy\"\n      class=\"items-center justify-center focus:outline-none\"\n      :class=\"layoutClass\"\n      :style=\"triggerStyle\"\n      @mouseenter=\"show\"\n      @mouseleave=\"hide\"\n      @focusin=\"show\"\n      @focusout=\"hide\"\n      @touchstart.passive=\"onTouch\"\n    >\n      <slot>\n        <GrIcon :size=\"triggerIconSize\">\n          <IconInfo />\n        </GrIcon>\n      </slot>\n    </span>\n\n    <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n      <!--\n        Свой набор, а не общий `panelPopTransition`: подсказка появляется фейдом\n        без масштабирования — она догоняет курсор, и рост от 95% читался бы как\n        второй, лишний жест. В общей карте живут наборы с двумя и более\n        потребителями, у этого он один.\n      -->\n      <transition\n        enter-active-class=\"transition-opacity ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]\"\n        enter-from-class=\"opacity-0\"\n        enter-to-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]\"\n        leave-from-class=\"opacity-100\"\n        leave-to-class=\"opacity-0\"\n      >\n        <span\n          v-show=\"open\"\n          :id=\"tooltipId\"\n          ref=\"panelEl\"\n          role=\"tooltip\"\n          v-bind=\"themeAttrs\"\n          data-gr-tooltip-panel\n          data-gr-overlay-root\n          class=\"pointer-events-none rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-1)]\"\n          :class=\"panelClass\"\n          :style=\"floatingStyle\"\n        >\n          <slot name=\"content\">{{ text }}</slot>\n        </span>\n      </transition>\n    </teleport>\n  </span>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTooltip/index.js

@@ -1,3 +1,3 @@
-import { n as grTooltipSafelist, t as grTooltipConfig } from "../../chunks/config-iemgzS4x.js";
-import { t as GrTooltip_default } from "./chunks/GrTooltip-DkMMM0uq.js";
+import { t as GrTooltip_default } from "./chunks/GrTooltip-BDcFycvW.js";
+import { n as grTooltipSafelist, t as grTooltipConfig } from "../../chunks/config-BP1ktzwh.js";
 export { GrTooltip_default as GrTooltip, GrTooltip_default as default, grTooltipConfig, grTooltipSafelist };

package/dist/components/GrTransfer/chunks/{GrTransfer-DdfBUf35.js → GrTransfer-CV7BL5UK.js}

@@ -2,6 +2,7 @@ import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunk
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as usePortalTarget } from "../../../chunks/usePortalTarget-BhrRgdqW.js";
 import { i as normalizeOptionQuery, r as matchesQueryParts } from "../../../chunks/optionFilter-DYw9XPPx.js";
+import { useVirtualList } from "../../../composables/useVirtualList.js";
 import { useGrFormControl } from "../../../composables/useGrFormControl.js";
 import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
 import { useRovingFocus } from "../../../composables/useRovingFocus.js";
@@ -13,8 +14,8 @@ import { t as resolveScrollOverflow } from "../../../chunks/scrollOverflow-B_kEd
 import { useDragGesture } from "../../../composables/useDragGesture.js";
 import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
 import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
-import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-Dp201frb.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-DV4gMWPR.js";
+import { t as GrCheckbox_default } from "../../GrCheckbox/chunks/GrCheckbox-B4NJc7Ur.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-CoaFLpaU.js";
 import { n as hitTest, t as autoScrollDelta } from "../../../chunks/dragSortGeometry-CY-llfrQ.js";
 import { C as transferTitleClass, S as transferStatusClass, _ as transferLabelClass, a as grTransferHeaderClass, b as transferReorderIconClass, c as grTransferPanelClass, d as transferActionIconClass, f as transferActionInertClass, g as transferGhostLabelClass, h as transferGhostCountClass, i as grTransferEmptyClass, l as grTransferReorderClass, m as transferGhostClass, o as grTransferMarkClass, p as transferCounterClass, r as grTransferActionsClass, s as grTransferOptionClass, u as grTransferSearchClass, v as transferListBase, x as transferRootBase, y as transferMarkIconClass } from "../../../chunks/config-DmED6aJV.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useSlots, watch, withCtx } from "vue";
@@ -547,6 +548,7 @@ var _hoisted_6 = [
 	"id",
 	"data-gr-transfer-list",
 	"data-overflow",
+	"data-gr-virtual",
 	"aria-label",
 	"aria-labelledby",
 	"aria-describedby",
@@ -559,12 +561,15 @@ var _hoisted_6 = [
 var _hoisted_7 = [
 	"aria-selected",
 	"aria-disabled",
+	"aria-setsize",
+	"aria-posinset",
 	"tabindex",
 	"onPointerdown",
 	"onClick",
 	"onFocus",
 	"onDblclick"
 ];
+var ROW_ESTIMATE_PX = 36;
 //#endregion
 //#region src/components/GrTransfer/GrTransfer.vue
 var GrTransfer_default = /* @__PURE__ */ defineComponent({
@@ -594,6 +599,11 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingText: { default: void 0 },
 		sortable: {
 			type: Boolean,
 			default: true
@@ -603,6 +613,10 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 			default: void 0
 		},
 		maxHeight: { default: void 0 },
+		virtual: {
+			type: Boolean,
+			default: false
+		},
 		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -691,7 +705,7 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 		const split = computed(() => splitByModel(props.items ?? [], keyOf, props.modelValue ?? []));
 		if (process.env.NODE_ENV !== "production") watch(split, (value) => {
 			if (value.duplicated.length > 0) console.warn(`[granularity] GrTransfer: ключи повторяются в \`items\` (${value.duplicated.join(", ")}) — рисуется первый элемент с таким ключом.`);
-			if (value.unresolved.length > 0 && (props.items?.length ?? 0) > 0) console.warn(`[granularity] GrTransfer: ключи из \`modelValue\` не найдены в \`items\` (${value.unresolved.join(", ")}). Они сохранены в значении, но не показаны: каталог мог ещё не приехать.`);
+			if (!props.loading && value.unresolved.length > 0 && (props.items?.length ?? 0) > 0) console.warn(`[granularity] GrTransfer: ключи из \`modelValue\` не найдены в \`items\` (${value.unresolved.join(", ")}). Они сохранены в значении, но не показаны: каталог мог ещё не приехать.`);
 		}, { immediate: true });
 		const queries = ref({
 			source: "",
@@ -843,15 +857,81 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 		function rowsOf(side) {
 			return side === "source" ? sourceRows.value : targetRows.value;
 		}
+		let isUnmounting = false;
+		onBeforeUnmount(() => {
+			isUnmounting = true;
+		});
+		/**
+		* Строка размонтируется — снимаем регистрацию, а если фокус был на ней, уводим
+		* его на сам список.
+		*
+		* При виртуализации это не редкость: колесо мыши уносит сфокусированную строку
+		* из окна, и без перевода фокус упал бы на `body`. Обработчик клавиш висит на
+		* списке, до `body` он не достаёт, и клавиатура панели умерла бы до клика мышью.
+		*
+		* Элемент берётся из карты, а не из аргумента: Vue обнуляет function ref ДО
+		* удаления узла, то есть в момент вызова фокус ещё на строке.
+		*/
 		function registerRow(side, key, el) {
 			const map = rowsOf(side);
-			if (el instanceof HTMLElement) map.set(key, el);
-			else map.delete(key);
+			if (el instanceof HTMLElement) {
+				map.set(key, el);
+				return;
+			}
+			const previous = map.get(key);
+			const active = typeof document === "undefined" ? null : document.activeElement;
+			const heldFocus = Boolean(previous && active && (previous === active || previous.contains(active)));
+			map.delete(key);
+			if (heldFocus && !isUnmounting) listEls.value[side]?.focus({ preventScroll: true });
+		}
+		/**
+		* Виртуализатор просит `Ref` на контейнер, а панели хранятся одной картой на обе
+		* стороны. Отдельная ссылка на сторону — дешевле, чем разводить карту на два рефа
+		* и синхронизировать их вручную.
+		*/
+		const sourceListEl = computed(() => listEls.value.source);
+		const targetListEl = computed(() => listEls.value.target);
+		/** Оценка высоты строки до первого замера: считает сам виртуализатор по образцам. */
+		function makeVirtualizer(side) {
+			return useVirtualList({
+				container: side === "source" ? sourceListEl : targetListEl,
+				count: () => props.virtual ? visible.value[side].length : 0,
+				source: () => visible.value[side],
+				itemSize: () => ROW_ESTIMATE_PX,
+				viewportSize: () => typeof props.maxHeight === "number" ? props.maxHeight : void 0
+			});
+		}
+		const sourceVirtualizer = makeVirtualizer("source");
+		const targetVirtualizer = makeVirtualizer("target");
+		function virtualizerOf(side) {
+			return side === "source" ? sourceVirtualizer : targetVirtualizer;
+		}
+		/** Строки к отрисовке: при выключенной виртуализации — все. */
+		function renderedOf(side) {
+			if (!props.virtual) return visible.value[side];
+			const { start, end } = virtualizerOf(side).range.value;
+			return visible.value[side].slice(start, end);
+		}
+		/** Абсолютный индекс строки: `aria-posinset` обязан считать от всего списка. */
+		function absoluteIndex(side, offsetInWindow) {
+			return props.virtual ? virtualizerOf(side).range.value.start + offsetInWindow : offsetInWindow;
+		}
+		/**
+		* Строки вне окна в DOM нет: `elementFor` вернул бы `null`, и фокус остался бы
+		* на месте. Поэтому сперва прокрутка, и только следующим тиком — фокус.
+		*/
+		function scrollRowIntoView(side, key) {
+			if (props.virtual) {
+				const index = visibleKeys.value[side].indexOf(key);
+				if (index >= 0) virtualizerOf(side).scrollToIndex(index);
+			}
+			return nextTick();
 		}
 		function makeRoving(side) {
 			return useRovingFocus({
 				items: () => visibleKeys.value[side],
 				elementFor: (key) => rowsOf(side).get(key) ?? null,
+				beforeFocus: (key) => scrollRowIntoView(side, key),
 				orientation: () => "vertical",
 				wrap: () => false,
 				skipDisabled: () => false,
@@ -1078,6 +1158,14 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 			enter: (event) => emit("focus", event),
 			leave: (event) => emit("blur", event)
 		});
+		/**
+		* Скролл-протяжённость виртуализованного списка держат псевдоэлементы
+		* контейнера: распорка приезжает переменными в том же патче, что и сами строки,
+		* и схлопнуться между кадрами ей нечем.
+		*/
+		function listStyle(side) {
+			return props.virtual ? virtualizerOf(side).spacerStyle.value : void 0;
+		}
 		const panelStyle = computed(() => ({ maxHeight: props.maxHeight === void 0 ? "var(--gr-transfer-panel-max-h, 18rem)" : typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight }));
 		function counterText(side) {
 			return t("gr.transfer.selected", "{count} of {total}", {
@@ -1094,6 +1182,7 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 		function emptyText(side) {
 			return normalizeOptionQuery(queries.value[side]) === "" ? t("gr.transfer.empty", "Nothing here yet") : t("gr.transfer.emptyFiltered", "Nothing matches the search");
 		}
+		const resolvedLoadingText = computed(() => props.loadingText ?? t("gr.transfer.loading", "Loading…"));
 		function isFiltered(side) {
 			return normalizeOptionQuery(queries.value[side]) !== "";
 		}
@@ -1216,6 +1305,7 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							clearable: "",
 							size: unref(resolvedSize),
 							disabled: unref(isDisabled),
+							loading: __props.loading,
 							placeholder: unref(t)("gr.transfer.search", "Search"),
 							"aria-label": `${titles.value[side]} — ${unref(t)("gr.transfer.search", "Search")}`,
 							"onUpdate:modelValue": (value) => onSearch(side, value),
@@ -1224,6 +1314,7 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							"model-value",
 							"size",
 							"disabled",
+							"loading",
 							"placeholder",
 							"aria-label",
 							"onUpdate:modelValue",
@@ -1233,7 +1324,7 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							class: normalizeClass(unref(transferStatusClass)),
 							role: "status",
 							"aria-live": "polite"
-						}, toDisplayString(isFiltered(side) ? shownText(side) : ""), 3),
+						}, toDisplayString(__props.loading ? resolvedLoadingText.value : isFiltered(side) ? shownText(side) : ""), 3),
 						createElementVNode("div", {
 							id: side === "source" ? sourceListId : unref(fieldId) ?? targetListId,
 							ref_for: true,
@@ -1244,7 +1335,10 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							"data-overflow": listOverflow.value[side],
 							role: "listbox",
 							"aria-multiselectable": "true",
+							tabindex: "-1",
+							"data-gr-virtual": __props.virtual ? "" : void 0,
 							class: normalizeClass(unref(transferListBase)),
+							style: normalizeStyle(listStyle(side)),
 							"aria-label": hasHeaderSlot.value ? titles.value[side] : void 0,
 							"aria-labelledby": hasHeaderSlot.value ? side === "target" ? unref(fieldLabelId) : void 0 : side === "target" && unref(fieldLabelId) ? `${unref(fieldLabelId)} ${targetTitleId}` : side === "source" ? sourceTitleId : targetTitleId,
 							"aria-describedby": side === "target" ? unref(describedBy) : void 0,
@@ -1254,15 +1348,20 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							"aria-disabled": unref(isDisabled) ? "true" : void 0,
 							onKeydown: (event) => onListKeydown(side, event),
 							onScrollPassive: scheduleOverflow
-						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visible.value[side], (item, index) => {
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(renderedOf(side), (item, index) => {
 							return openBlock(), createElementBlock("div", {
 								key: keyOf(item),
 								ref_for: true,
-								ref: (el) => registerRow(side, keyOf(item), el),
+								ref: (el) => {
+									registerRow(side, keyOf(item), el);
+									if (__props.virtual) virtualizerOf(side).measure(absoluteIndex(side, index), el);
+								},
 								"data-gr-transfer-option": "",
 								role: "option",
 								"aria-selected": selections.value[side].keys.has(keyOf(item)) ? "true" : "false",
 								"aria-disabled": disabledOf(item) ? "true" : void 0,
+								"aria-setsize": visible.value[side].length,
+								"aria-posinset": absoluteIndex(side, index) + 1,
 								tabindex: rovingOf(side).tabindexFor(keyOf(item)),
 								class: normalizeClass(unref(grTransferOptionClass)({
 									size: unref(resolvedSize),
@@ -1286,15 +1385,18 @@ var GrTransfer_default = /* @__PURE__ */ defineComponent({
 							}, null, 8, ["class"])) : createCommentVNode("", true)], 2), renderSlot(_ctx.$slots, "item", {
 								item,
 								side,
-								index,
+								index: absoluteIndex(side, index),
 								selected: selections.value[side].keys.has(keyOf(item)),
 								disabled: disabledOf(item)
 							}, () => [createElementVNode("span", { class: normalizeClass(unref(transferLabelClass)) }, toDisplayString(labelOf(item)), 3)])], 42, _hoisted_7);
-						}), 128))], 42, _hoisted_6),
-						visible.value[side].length === 0 ? renderSlot(_ctx.$slots, "empty", {
+						}), 128))], 46, _hoisted_6),
+						__props.loading && visible.value[side].length === 0 ? renderSlot(_ctx.$slots, "loading", { side }, () => [createElementVNode("p", {
+							"data-gr-transfer-loading": "",
+							class: normalizeClass(unref(grTransferEmptyClass)(unref(resolvedSize)))
+						}, toDisplayString(resolvedLoadingText.value), 3)], void 0, 1) : visible.value[side].length === 0 ? renderSlot(_ctx.$slots, "empty", {
 							side,
 							filtered: isFiltered(side)
-						}, () => [createElementVNode("p", { class: normalizeClass(unref(grTransferEmptyClass)(unref(resolvedSize))) }, toDisplayString(emptyText(side)), 3)], void 0, 1) : createCommentVNode("", true)
+						}, () => [createElementVNode("p", { class: normalizeClass(unref(grTransferEmptyClass)(unref(resolvedSize))) }, toDisplayString(emptyText(side)), 3)], void 0, 2) : createCommentVNode("", true)
 					], 14, _hoisted_2);
 				}), 64)),
 				(openBlock(), createBlock(Teleport, {