@feugene/granularity 0.30.0 → 0.31.1

package/dist/components/GrDrawer/chunks/GrDrawer-B7PiAcbU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrDrawer-B7PiAcbU.js","names":["$slots"],"sources":["../../../../src/components/GrDrawer/GrDrawer.vue","../../../../src/components/GrDrawer/GrDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Модальный слой целиком: стек (Esc верхнему, `inert` нижним модалкам), ловушка\n// фокуса, скролл-лок, портал. Немодальная панель регистрируется в стеке как\n// обычный dismissible-слой и страницу под собой не трогает.\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport {\n  DEFAULT_GR_DRAWER_BODY_CONFIG,\n  DEFAULT_GR_DRAWER_FOOTER_CONFIG,\n  DEFAULT_GR_DRAWER_HEADER_CONFIG,\n  footerBorderClass,\n  grDrawerAxis,\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  headerBorderClass,\n  overlayClass,\n  resolveGrDrawerSectionConfig,\n  rootClass,\n  rootPassThroughClass,\n  srOnlyTitleClass,\n  titleClass,\n  type GrDrawerSectionConfig,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nimport './defaults'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /**\n   * Модальная панель: подложка, блокировка скролла, `inert` остальной странице\n   * и ловушка фокуса. `false` — панель живёт рядом со страницей: с ней работают,\n   * не закрывая, а Tab уходит наружу.\n   */\n  modal?: boolean\n  /** Закрывать при клике по бэкдропу. В немодальном режиме подложки нет. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /**\n   * Запрет закрытия «мягкими» способами (бэкдроп, Esc) — на время операции,\n   * которую нельзя бросить на полпути. Кнопка закрытия при этом остаётся:\n   * панель без единого выхода — ловушка.\n   */\n  persistent?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели по её оси: ширина у боковых, высота у верхней и нижней. */\n  size?: GrDrawerSize\n  /** Произвольная ширина боковой панели. Число трактуется как пиксели; сильнее `size`. */\n  width?: string | number\n  /** Произвольная высота верхней или нижней панели. Число трактуется как пиксели. */\n  height?: string | number\n  /** Рендерить ли хедер (заголовок + кнопка закрытия). */\n  showHeader?: boolean\n  /** Рендерить ли кнопку закрытия в хедере. */\n  showCloseButton?: boolean\n  /** Паддинги и рамка секций — как у `GrDialog`. */\n  headerConfig?: GrDrawerSectionConfig\n  bodyConfig?: GrDrawerSectionConfig\n  footerConfig?: GrDrawerSectionConfig\n  /** Элемент, получающий фокус при открытии. По умолчанию — сама панель. */\n  initialFocus?: HTMLElement | null\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nexport interface GrDrawerEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Панель выехала и анимация закончилась. */\n  (e: 'opened'): void\n  /** Панель уехала и анимация закончилась. */\n  (e: 'closed'): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный\n// пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  modal: true,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  persistent: false,\n  side: undefined,\n  size: undefined,\n  width: undefined,\n  height: undefined,\n  showHeader: true,\n  showCloseButton: true,\n  headerConfig: undefined,\n  bodyConfig: undefined,\n  footerConfig: undefined,\n  initialFocus: null,\n  closeLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\n\nconst emit = defineEmits<GrDrawerEmits>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  title?: () => any\n  /** Своя шапка целиком: заголовок, кнопка закрытия и всё, что нужно рядом. */\n  header?: (props: { title?: string, close: () => void }) => any\n  footer?: () => any\n}>()\n\nconst titleId = useId()\n\nconst size = useGrComponentProp('GrDrawer', 'size', () => props.size, 'md')\nconst side = useGrComponentProp('GrDrawer', 'side', () => props.side, 'right')\n\nconst axis = computed(() => grDrawerAxis(side.value))\n\n// Пустой/пробельный заголовок считается отсутствующим — иначе хедер занимал бы\n// место ради строки-заглушки.\nconst resolvedTitle = computed(() => props.title?.trim() || undefined)\nconst hasTitle = computed(() => Boolean(resolvedTitle.value) || Boolean(slots.title))\nconst hasCustomHeader = computed(() => Boolean(slots.header))\nconst hasHeader = computed(() =>\n  props.showHeader && (hasCustomHeader.value || hasTitle.value || props.showCloseButton),\n)\n\n/**\n * Видимый заголовок рисуется только в стандартной шапке. Со своей шапкой и без\n * шапки вовсе заголовок всё равно нужен — но скрытым: имя слоя обязано остаться\n * осмысленным, а не свалиться на обобщённое «Drawer» из локали.\n */\nconst showVisibleTitle = computed(() =>\n  props.showHeader && !hasCustomHeader.value && hasTitle.value,\n)\nconst showSrOnlyTitle = computed(() => hasTitle.value && !showVisibleTitle.value)\n\n// Имя модального слоя обязательно: без него axe роняет `aria-dialog-name`.\n// Есть заголовок — связываем `aria-labelledby`, иначе даём `aria-label` из i18n.\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst ariaLabel = computed(() => (labelledBy.value ? undefined : t('gr.drawer.title', 'Drawer')))\n\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Произвольный размер — только по оси панели: у боковой ширина, у нижней высота. */\nconst customLength = computed(() => (axis.value === 'horizontal' ? props.width : props.height))\n\nconst panelClass = computed(() => grDrawerPanelClass({\n  side: side.value,\n  size: size.value,\n  hasCustomLength: customLength.value !== undefined,\n}))\n\nconst panelStyle = computed(() => {\n  const length = customLength.value\n  if (length === undefined) return undefined\n\n  const value = typeof length === 'number' ? `${length}px` : length\n  return axis.value === 'horizontal' ? { width: value } : { height: value }\n})\n\n// Проп не своей оси молча не работал бы — а выглядит это как баг компонента.\nif (__GR_DEV__) {\n  watch(\n    [axis, () => props.width, () => props.height],\n    ([currentAxis, width, height]) => {\n      const ignored = currentAxis === 'horizontal' ? 'height' : 'width'\n      const value = currentAxis === 'horizontal' ? height : width\n      if (value === undefined) return\n\n      console.warn(\n        `[GrDrawer] Проп \\`${ignored}\\` не применяется к стороне \"${side.value}\": `\n        + `панель по этой оси растянута. Задайте \\`${ignored === 'height' ? 'width' : 'height'}\\`.`,\n      )\n    },\n    { immediate: true },\n  )\n}\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(side.value))\n\nconst headerSection = computed(() => resolveGrDrawerSectionConfig(props.headerConfig, DEFAULT_GR_DRAWER_HEADER_CONFIG))\nconst bodySection = computed(() => resolveGrDrawerSectionConfig(props.bodyConfig, DEFAULT_GR_DRAWER_BODY_CONFIG))\nconst footerSection = computed(() => resolveGrDrawerSectionConfig(props.footerConfig, DEFAULT_GR_DRAWER_FOOTER_CONFIG))\n\nfunction sectionClass(\n  section: { paddingX: string, paddingY: string, bordered: boolean },\n  borderClass: string,\n): string[] {\n  return [section.paddingX, section.paddingY, section.bordered ? borderClass : '']\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\n/** Закрытие «мягким» способом: бэкдроп или Esc. `persistent` их и запрещает. */\nfunction closeSoftly(): void {\n  if (props.persistent)\n    return\n\n  close()\n}\n\nconst rootClasses = computed(() => [rootClass, props.modal ? '' : rootPassThroughClass].filter(Boolean))\n\n// Немодальная панель остаётся в очереди Esc, но модалки под собой в `inert` не\n// отправляет и скролл не блокирует: она существует ровно ради работы со\n// страницей под ней, и Tab обязан уводить фокус туда.\nconst {\n  rootEl,\n  isMounted,\n  isVisible,\n  inertAttr,\n  portalTarget,\n  teleportEnabled,\n  themeAttrs,\n  onPanelAfterLeave: releasePresence,\n  backdrop,\n} = useModalOverlay(computed(() => props.modelValue), closeSoftly, {\n  panel: panelEl,\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc && !props.persistent,\n  closeOnBackdrop: () => props.closeOnBackdrop,\n  initialFocus: () => props.initialFocus ?? panelEl.value,\n})\n\nfunction onPanelAfterLeave(): void {\n  releasePresence()\n  emit('closed')\n}\n\ndefineExpose({\n  /** Закрыть панель (эквивалент `v-model = false`), минуя `persistent`. */\n  close,\n  /** Вернуть фокус на панель — например после операции, уведшей его наружу. */\n  focus: () => panelEl.value?.focus(),\n})\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n      v-if=\"teleportEnabled && isMounted\"\n      ref=\"rootEl\"\n      data-gr-drawer\n      data-gr-overlay-root\n      role=\"dialog\"\n      :aria-modal=\"modal ? 'true' : undefined\"\n      :class=\"rootClasses\"\n      :inert=\"inertAttr\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n    >\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isVisible && modal\"\n          data-gr-drawer-overlay\n          :class=\"overlayClass\"\n          aria-hidden=\"true\"\n          v-on=\"backdrop\"\n        />\n      </Transition>\n\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        :enter-from-class=\"panelEnterFrom\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        :leave-to-class=\"panelEnterFrom\"\n        @after-enter=\"emit('opened')\"\n        @after-leave=\"onPanelAfterLeave\"\n      >\n        <div\n          v-if=\"isVisible\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-drawer-panel\n          tabindex=\"-1\"\n          :class=\"panelClass\"\n          :style=\"panelStyle\"\n        >\n          <!-- Заголовок без видимой шапки: имя слоя обязано остаться своим. -->\n          <div\n            v-if=\"showSrOnlyTitle\"\n            :id=\"titleId\"\n            data-gr-drawer-title\n            :class=\"srOnlyTitleClass\"\n          >\n            <slot name=\"title\">\n              {{ resolvedTitle }}\n            </slot>\n          </div>\n\n          <div\n            v-if=\"hasHeader\"\n            data-gr-drawer-header\n            :class=\"[hasCustomHeader ? '' : 'flex items-center justify-between gap-4', sectionClass(headerSection, headerBorderClass)]\"\n          >\n            <slot name=\"header\" :title=\"resolvedTitle\" :close=\"close\">\n              <div\n                v-if=\"showVisibleTitle\"\n                :id=\"titleId\"\n                data-gr-drawer-title\n                :class=\"titleClass\"\n              >\n                <slot name=\"title\">\n                  {{ resolvedTitle }}\n                </slot>\n              </div>\n              <div v-else class=\"min-w-0 flex-1\" />\n\n              <GrButton\n                v-if=\"showCloseButton\"\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                data-gr-drawer-close\n                :aria-label=\"resolvedCloseLabel\"\n                @click=\"close\"\n              >\n                <GrIcon size=\"sm\">\n                  <IconClose />\n                </GrIcon>\n              </GrButton>\n            </slot>\n          </div>\n\n          <!-- Тело скроллится, поэтому обязано попадать в таб-порядок: длинный\n               текст без единого фокусируемого элемента иначе не прокрутить с\n               клавиатуры (axe: `scrollable-region-focusable`). -->\n          <div\n            data-gr-drawer-body\n            tabindex=\"0\"\n            class=\"min-h-0 flex-1 overflow-y-auto\"\n          >\n            <div :class=\"sectionClass(bodySection, '')\">\n              <slot />\n            </div>\n          </div>\n\n          <div\n            v-if=\"$slots.footer\"\n            data-gr-drawer-footer\n            :class=\"sectionClass(footerSection, footerBorderClass)\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Модальный слой целиком: стек (Esc верхнему, `inert` нижним модалкам), ловушка\n// фокуса, скролл-лок, портал. Немодальная панель регистрируется в стеке как\n// обычный dismissible-слой и страницу под собой не трогает.\nimport { useModalOverlay } from '../../composables/internal/useModalOverlay'\nimport {\n  DEFAULT_GR_DRAWER_BODY_CONFIG,\n  DEFAULT_GR_DRAWER_FOOTER_CONFIG,\n  DEFAULT_GR_DRAWER_HEADER_CONFIG,\n  footerBorderClass,\n  grDrawerAxis,\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  headerBorderClass,\n  overlayClass,\n  resolveGrDrawerSectionConfig,\n  rootClass,\n  rootPassThroughClass,\n  srOnlyTitleClass,\n  titleClass,\n  type GrDrawerSectionConfig,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nimport './defaults'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /**\n   * Модальная панель: подложка, блокировка скролла, `inert` остальной странице\n   * и ловушка фокуса. `false` — панель живёт рядом со страницей: с ней работают,\n   * не закрывая, а Tab уходит наружу.\n   */\n  modal?: boolean\n  /** Закрывать при клике по бэкдропу. В немодальном режиме подложки нет. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /**\n   * Запрет закрытия «мягкими» способами (бэкдроп, Esc) — на время операции,\n   * которую нельзя бросить на полпути. Кнопка закрытия при этом остаётся:\n   * панель без единого выхода — ловушка.\n   */\n  persistent?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели по её оси: ширина у боковых, высота у верхней и нижней. */\n  size?: GrDrawerSize\n  /** Произвольная ширина боковой панели. Число трактуется как пиксели; сильнее `size`. */\n  width?: string | number\n  /** Произвольная высота верхней или нижней панели. Число трактуется как пиксели. */\n  height?: string | number\n  /** Рендерить ли хедер (заголовок + кнопка закрытия). */\n  showHeader?: boolean\n  /** Рендерить ли кнопку закрытия в хедере. */\n  showCloseButton?: boolean\n  /** Паддинги и рамка секций — как у `GrDialog`. */\n  headerConfig?: GrDrawerSectionConfig\n  bodyConfig?: GrDrawerSectionConfig\n  footerConfig?: GrDrawerSectionConfig\n  /** Элемент, получающий фокус при открытии. По умолчанию — сама панель. */\n  initialFocus?: HTMLElement | null\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nexport interface GrDrawerEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Панель выехала и анимация закончилась. */\n  (e: 'opened'): void\n  /** Панель уехала и анимация закончилась. */\n  (e: 'closed'): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный\n// пользователем проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  modal: true,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  persistent: false,\n  side: undefined,\n  size: undefined,\n  width: undefined,\n  height: undefined,\n  showHeader: true,\n  showCloseButton: true,\n  headerConfig: undefined,\n  bodyConfig: undefined,\n  footerConfig: undefined,\n  initialFocus: null,\n  closeLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\n\nconst emit = defineEmits<GrDrawerEmits>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  title?: () => any\n  /** Своя шапка целиком: заголовок, кнопка закрытия и всё, что нужно рядом. */\n  header?: (props: { title?: string, close: () => void }) => any\n  footer?: () => any\n}>()\n\nconst titleId = useId()\n\nconst size = useGrComponentProp('GrDrawer', 'size', () => props.size, 'md')\nconst side = useGrComponentProp('GrDrawer', 'side', () => props.side, 'right')\n\nconst axis = computed(() => grDrawerAxis(side.value))\n\n// Пустой/пробельный заголовок считается отсутствующим — иначе хедер занимал бы\n// место ради строки-заглушки.\nconst resolvedTitle = computed(() => props.title?.trim() || undefined)\nconst hasTitle = computed(() => Boolean(resolvedTitle.value) || Boolean(slots.title))\nconst hasCustomHeader = computed(() => Boolean(slots.header))\nconst hasHeader = computed(() =>\n  props.showHeader && (hasCustomHeader.value || hasTitle.value || props.showCloseButton),\n)\n\n/**\n * Видимый заголовок рисуется только в стандартной шапке. Со своей шапкой и без\n * шапки вовсе заголовок всё равно нужен — но скрытым: имя слоя обязано остаться\n * осмысленным, а не свалиться на обобщённое «Drawer» из локали.\n */\nconst showVisibleTitle = computed(() =>\n  props.showHeader && !hasCustomHeader.value && hasTitle.value,\n)\nconst showSrOnlyTitle = computed(() => hasTitle.value && !showVisibleTitle.value)\n\n// Имя модального слоя обязательно: без него axe роняет `aria-dialog-name`.\n// Есть заголовок — связываем `aria-labelledby`, иначе даём `aria-label` из i18n.\nconst labelledBy = computed(() => (hasTitle.value ? titleId : undefined))\nconst ariaLabel = computed(() => (labelledBy.value ? undefined : t('gr.drawer.title', 'Drawer')))\n\nconst panelEl = ref<HTMLElement | null>(null)\n\n/** Произвольный размер — только по оси панели: у боковой ширина, у нижней высота. */\nconst customLength = computed(() => (axis.value === 'horizontal' ? props.width : props.height))\n\nconst panelClass = computed(() => grDrawerPanelClass({\n  side: side.value,\n  size: size.value,\n  hasCustomLength: customLength.value !== undefined,\n}))\n\nconst panelStyle = computed(() => {\n  const length = customLength.value\n  if (length === undefined) return undefined\n\n  const value = typeof length === 'number' ? `${length}px` : length\n  return axis.value === 'horizontal' ? { width: value } : { height: value }\n})\n\n// Проп не своей оси молча не работал бы — а выглядит это как баг компонента.\nif (__GR_DEV__) {\n  watch(\n    [axis, () => props.width, () => props.height],\n    ([currentAxis, width, height]) => {\n      const ignored = currentAxis === 'horizontal' ? 'height' : 'width'\n      const value = currentAxis === 'horizontal' ? height : width\n      if (value === undefined) return\n\n      console.warn(\n        `[GrDrawer] Проп \\`${ignored}\\` не применяется к стороне \"${side.value}\": `\n        + `панель по этой оси растянута. Задайте \\`${ignored === 'height' ? 'width' : 'height'}\\`.`,\n      )\n    },\n    { immediate: true },\n  )\n}\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(side.value))\n\nconst headerSection = computed(() => resolveGrDrawerSectionConfig(props.headerConfig, DEFAULT_GR_DRAWER_HEADER_CONFIG))\nconst bodySection = computed(() => resolveGrDrawerSectionConfig(props.bodyConfig, DEFAULT_GR_DRAWER_BODY_CONFIG))\nconst footerSection = computed(() => resolveGrDrawerSectionConfig(props.footerConfig, DEFAULT_GR_DRAWER_FOOTER_CONFIG))\n\nfunction sectionClass(\n  section: { paddingX: string, paddingY: string, bordered: boolean },\n  borderClass: string,\n): string[] {\n  return [section.paddingX, section.paddingY, section.bordered ? borderClass : '']\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\n/** Закрытие «мягким» способом: бэкдроп или Esc. `persistent` их и запрещает. */\nfunction closeSoftly(): void {\n  if (props.persistent)\n    return\n\n  close()\n}\n\nconst rootClasses = computed(() => [rootClass, props.modal ? '' : rootPassThroughClass].filter(Boolean))\n\n// Немодальная панель остаётся в очереди Esc, но модалки под собой в `inert` не\n// отправляет и скролл не блокирует: она существует ровно ради работы со\n// страницей под ней, и Tab обязан уводить фокус туда.\nconst {\n  rootEl,\n  isMounted,\n  isVisible,\n  inertAttr,\n  portalTarget,\n  teleportEnabled,\n  themeAttrs,\n  onPanelAfterLeave: releasePresence,\n  backdrop,\n} = useModalOverlay(computed(() => props.modelValue), closeSoftly, {\n  panel: panelEl,\n  modal: () => props.modal,\n  closeOnEscape: () => props.closeOnEsc && !props.persistent,\n  closeOnBackdrop: () => props.closeOnBackdrop,\n  initialFocus: () => props.initialFocus ?? panelEl.value,\n})\n\nfunction onPanelAfterLeave(): void {\n  releasePresence()\n  emit('closed')\n}\n\ndefineExpose({\n  /** Закрыть панель (эквивалент `v-model = false`), минуя `persistent`. */\n  close,\n  /** Вернуть фокус на панель — например после операции, уведшей его наружу. */\n  focus: () => panelEl.value?.focus(),\n})\n</script>\n\n<template>\n  <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n    <div\n      v-if=\"teleportEnabled && isMounted\"\n      ref=\"rootEl\"\n      data-gr-drawer\n      data-gr-overlay-root\n      role=\"dialog\"\n      :aria-modal=\"modal ? 'true' : undefined\"\n      :class=\"rootClasses\"\n      :inert=\"inertAttr\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n    >\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        enter-from-class=\"opacity-0\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"isVisible && modal\"\n          data-gr-drawer-overlay\n          :class=\"overlayClass\"\n          aria-hidden=\"true\"\n          v-on=\"backdrop\"\n        />\n      </Transition>\n\n      <Transition\n        appear\n        enter-active-class=\"duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n        :enter-from-class=\"panelEnterFrom\"\n        leave-active-class=\"duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)]\"\n        :leave-to-class=\"panelEnterFrom\"\n        @after-enter=\"emit('opened')\"\n        @after-leave=\"onPanelAfterLeave\"\n      >\n        <div\n          v-if=\"isVisible\"\n          ref=\"panelEl\"\n          v-bind=\"themeAttrs\"\n          data-gr-drawer-panel\n          tabindex=\"-1\"\n          :class=\"panelClass\"\n          :style=\"panelStyle\"\n        >\n          <!-- Заголовок без видимой шапки: имя слоя обязано остаться своим. -->\n          <div\n            v-if=\"showSrOnlyTitle\"\n            :id=\"titleId\"\n            data-gr-drawer-title\n            :class=\"srOnlyTitleClass\"\n          >\n            <slot name=\"title\">\n              {{ resolvedTitle }}\n            </slot>\n          </div>\n\n          <div\n            v-if=\"hasHeader\"\n            data-gr-drawer-header\n            :class=\"[hasCustomHeader ? '' : 'flex items-center justify-between gap-4', sectionClass(headerSection, headerBorderClass)]\"\n          >\n            <slot name=\"header\" :title=\"resolvedTitle\" :close=\"close\">\n              <div\n                v-if=\"showVisibleTitle\"\n                :id=\"titleId\"\n                data-gr-drawer-title\n                :class=\"titleClass\"\n              >\n                <slot name=\"title\">\n                  {{ resolvedTitle }}\n                </slot>\n              </div>\n              <div v-else class=\"min-w-0 flex-1\" />\n\n              <GrButton\n                v-if=\"showCloseButton\"\n                variant=\"ghost\"\n                size=\"sm\"\n                square\n                data-gr-drawer-close\n                :aria-label=\"resolvedCloseLabel\"\n                @click=\"close\"\n              >\n                <GrIcon size=\"sm\">\n                  <IconClose />\n                </GrIcon>\n              </GrButton>\n            </slot>\n          </div>\n\n          <!-- Тело скроллится, поэтому обязано попадать в таб-порядок: длинный\n               текст без единого фокусируемого элемента иначе не прокрутить с\n               клавиатуры (axe: `scrollable-region-focusable`). -->\n          <div\n            data-gr-drawer-body\n            tabindex=\"0\"\n            class=\"min-h-0 flex-1 overflow-y-auto\"\n          >\n            <div :class=\"sectionClass(bodySection, '')\">\n              <slot />\n            </div>\n          </div>\n\n          <div\n            v-if=\"$slots.footer\"\n            data-gr-drawer-footer\n            :class=\"sectionClass(footerSection, footerBorderClass)\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </teleport>\n</template>\n"],"mappings":"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"}

package/dist/components/GrFormFile/chunks/GrFormFile-CYtXU9HV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrFormFile-CYtXU9HV.js","names":[],"sources":["../../../../src/components/GrFormFile/GrFormFile.vue","../../../../src/components/GrFormFile/GrFormFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  type GrFormFileSize,\n  buttonSizes,\n  iconOffsets,\n  iconSizes,\n  previewBaseClass,\n  previewSizes,\n  removeTextSizes,\n  rowGaps,\n  stackGaps,\n  textSizes,\n} from './grFormFileStyles'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useFilePreviews } from '../../composables/internal/useFilePreviews'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, maxCountValidator, resolveFileValidationMessage, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  /** Максимум файлов в наборе. Лишние не обрезаются молча — набор отбивается ошибкой. */\n  limit?: number\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Размер кнопок, иконок и подписей. */\n  size?: GrFormFileSize\n  /** Миниатюры для картинок в наборе. Файлы других типов остаются строкой. */\n  preview?: boolean\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n  /**\n   * Контролируемый список ошибок: `v-model:errors`. Задан — показывается он, и\n   * внутренняя валидация его не перетирает. Сюда же кладутся ошибки, пришедшие\n   * с сервера. Не задан — компонент держит свои ошибки сам.\n   */\n  errors?: GrFormFileError[]\n}\n\nexport interface GrFormFileEmits {\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  /** Результат валидации. Канал один: `validation` дублировал эту же нагрузку. */\n  (e: 'update:errors', errors: GrFormFileError[]): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    preview: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    accept: undefined,\n    limit: undefined,\n    uploadText: undefined,\n    changeText: undefined,\n    removeText: undefined,\n    clearAllText: undefined,\n    placeholder: undefined,\n    size: undefined,\n    validators: undefined,\n    validate: undefined,\n    errors: undefined,\n  },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrFormFile' })\n\nconst rowClass = computed(() => rowGaps[resolvedSize.value])\nconst stackClass = computed(() => stackGaps[resolvedSize.value])\nconst textClass = computed(() => textSizes[resolvedSize.value])\nconst removeTextClass = computed(() => removeTextSizes[resolvedSize.value])\nconst iconOffsetClass = computed(() => iconOffsets[resolvedSize.value])\nconst buttonSize = computed(() => buttonSizes[resolvedSize.value])\nconst iconSize = computed(() => iconSizes[resolvedSize.value])\nconst previewClass = computed(() => [previewSizes[resolvedSize.value], previewBaseClass])\n\nconst emit = defineEmits<GrFormFileEmits>()\ndefineSlots<{\n  /** Собственный вывод ошибок вместо списка по умолчанию. */\n  error?: (props: { errors: GrFormFileError[] }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`. Виджет здесь — кнопка выбора файла, а не нативный\n// `<input type=\"file\">`: он `aria-hidden` и вне таб-порядка, id на нём увёл бы\n// `<label for>` в невидимый элемент.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // `locked` — «ввод не принимается»: `disabled` или `readonly`. Набор в\n  // `readonly` виден и уходит в форму, но поменять его нельзя ни диалогом, ни\n  // перетаскиванием, ни удалением.\n  locked: isLocked,\n} = useGrFormControl(() => props)\nconst resolvedUploadText = computed(() => props.uploadText ?? t('gr.formFile.upload', 'Upload file'))\nconst resolvedChangeText = computed(() => props.changeText ?? t('gr.formFile.change', 'Change file'))\nconst resolvedRemoveText = computed(() => props.removeText ?? t('gr.formFile.remove', 'Remove'))\nconst resolvedClearAllText = computed(() => props.clearAllText ?? t('gr.formFile.clearAll', 'Clear all'))\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('gr.formFile.placeholder', 'No files selected'))\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Внутри зоны фокус ходит между нативным input'ом и кнопками: без границы\n// каждое перемещение давало бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\nconst localErrors = ref<GrFormFileError[]>([])\nconst uploadBtnEl = ref<HTMLElement | null>(null)\n\n// Собственные ошибки компонент обязан и объявить (`role=\"alert\"`), и связать с\n// контролом: до этого «уронил файл не того типа» для скринридера выглядело как\n// «ничего не произошло». Ошибка поля из `GrFormField` при этом остаётся —\n// `aria-describedby` держит оба id.\nconst errorsId = useId()\n// Контролируемый список сильнее внутреннего — как `sortKey` у `GrDataTable`.\nconst displayedErrors = computed(() => props.errors ?? localErrors.value)\nconst hasLocalErrors = computed(() => displayedErrors.value.length > 0)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание кнопки:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedByIds = computed(() => {\n  return [\n    field?.describedById.value,\n    hasLocalErrors.value ? errorsId : undefined,\n    stateHint.value ? stateHintId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined\n})\n\nconst showsInvalid = computed(() => isInvalid.value || hasLocalErrors.value)\n\nfunction focus(): void {\n  uploadBtnEl.value?.focus()\n}\n\nfunction blur(): void {\n  uploadBtnEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nconst { fileKey, previewUrl, revokePreview, revokeAllPreviews } = useFilePreviews({\n  enabled: () => props.preview,\n})\n\n/**\n * Отзыв `object URL` привязан к самому набору, а не к местам, где его меняют.\n * Файл уходит из набора десятком путей — кнопка строки, «очистить всё», новый\n * выбор, внешний сброс `v-model`, — и точечные вызовы разъехались бы с первой\n * же новой веткой; blob при этом висел бы в памяти вкладки до перезагрузки.\n */\nwatch(files, (next, prev) => {\n  for (const file of prev ?? []) {\n    if (!next.includes(file)) revokePreview(file)\n  }\n})\n\nonBeforeUnmount(revokeAllPreviews)\n\n/**\n * Один набор валидаторов на оба пути ввода. Собери его отдельно в `applyFiles`\n * и в `dropzone` — копии разъедутся при первой же правке, и выбор через диалог\n * начнёт вести себя иначе, чем перетаскивание.\n */\nconst effectiveValidators = computed<FileValidator[]>(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  return [\n    acceptValidator(props.accept),\n    maxCountValidator(props.limit),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n})\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (displayedErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (isLocked.value) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const res = runFileValidators(nextFiles, effectiveValidators.value, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (isLocked.value) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (isLocked.value) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (isLocked.value) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\n/** Размер файла в строке списка — как в `GrFileUpload`: без него список не отвечает «сколько». */\nfunction formatFileSize(file: File): string {\n  return `${Math.ceil(file.size / 1024)} KB`\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  const text = resolveFileValidationMessage(issue, t)\n\n  // Префикс с именем файла нужен только тем сообщениям, которые сами его не\n  // называют, — то есть валидаторам потребителя. Встроенные передают `fileName`\n  // параметром и подставляют его в текст, и приписка давала бы «photo.png:\n  // Файл «photo.png» …». Признак — наличие параметра, а не поиск подстроки.\n  if (issue.fileName && issue.i18nParams?.fileName === undefined)\n    return `${issue.fileName}: ${text}`\n\n  return text\n}\n\nconst dropzone = computed(() => {\n  return {\n    enabled: !isLocked.value,\n    multiple: props.multiple,\n    validators: effectiveValidators.value,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: t('gr.formFile.validateError', 'Failed to validate dropped files'),\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-dropzone=\"dropzone\"\n    data-gr-form-file\n    class=\"rounded-[var(--gr-radius-md)]\"\n    :class=\"isDisabled ? 'cursor-not-allowed' : ''\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <input\n      ref=\"inputRef\"\n      data-gr-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"isDisabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col\" :class=\"stackClass\">\n      <div class=\"flex flex-wrap items-center\" :class=\"rowClass\">\n        <GrButton\n          :id=\"fieldId\"\n          ref=\"uploadBtnEl\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-upload-btn\n          :aria-describedby=\"describedByIds\"\n          :aria-invalid=\"showsInvalid ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :disabled=\"isDisabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconUpload />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ hasFiles ? resolvedChangeText : resolvedUploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple && !isReadonly\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-clear-btn\n          :disabled=\"isDisabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconX />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ resolvedRemoveText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles && !isReadonly\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-clear-all-btn\n          :disabled=\"isDisabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconX />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ resolvedClearAllText }}</span>\n        </GrButton>\n\n        <img\n          v-if=\"!multiple && hasFiles && previewUrl(files[0]!)\"\n          data-gr-form-file-preview\n          :src=\"previewUrl(files[0]!)\"\n          alt=\"\"\n          :class=\"previewClass\"\n        >\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-[var(--gr-muted-fg)] truncate max-w-[240px]\"\n          :class=\"textClass\"\n          data-gr-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-[var(--gr-muted-fg)]\"\n          :class=\"textClass\"\n          data-gr-form-file-placeholder\n        >\n          {{ resolvedPlaceholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col\" :class=\"stackClass\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"fileKey(file)\"\n          class=\"flex items-center gap-2\"\n          data-gr-form-file-item\n        >\n          <img\n            v-if=\"previewUrl(file)\"\n            data-gr-form-file-preview\n            :src=\"previewUrl(file)\"\n            alt=\"\"\n            :class=\"previewClass\"\n          >\n\n          <span\n            class=\"text-[var(--gr-muted-fg)] truncate max-w-[240px]\"\n            :class=\"textClass\"\n            :title=\"file.name\"\n            data-gr-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <span\n            class=\"text-[var(--gr-muted-fg)] shrink-0\"\n            :class=\"removeTextClass\"\n            data-gr-form-file-item-size\n          >{{ formatFileSize(file) }}</span>\n\n          <button\n            v-if=\"!isReadonly\"\n            type=\"button\"\n            class=\"text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]\"\n            :class=\"removeTextClass\"\n            data-gr-form-file-item-remove\n            :disabled=\"isDisabled\"\n            :aria-label=\"t('gr.formFile.removeFile', 'Remove {fileName}', { fileName: file.name })\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ resolvedRemoveText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"error\" :errors=\"displayedErrors\">\n        <div\n          v-if=\"hasLocalErrors\"\n          :id=\"errorsId\"\n          class=\"text-[var(--gr-danger-text)]\"\n          :class=\"textClass\"\n          data-gr-form-file-errors\n          role=\"alert\"\n        >\n          <div v-for=\"(e, i) in displayedErrors\" :key=\"i\" data-gr-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-gr-form-file].gr-dropzone--over {\n  outline: 2px solid var(--gr-ring);\n  outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, useId, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  type GrFormFileSize,\n  buttonSizes,\n  iconOffsets,\n  iconSizes,\n  previewBaseClass,\n  previewSizes,\n  removeTextSizes,\n  rowGaps,\n  stackGaps,\n  textSizes,\n} from './grFormFileStyles'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useFilePreviews } from '../../composables/internal/useFilePreviews'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, maxCountValidator, resolveFileValidationMessage, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  /** Максимум файлов в наборе. Лишние не обрезаются молча — набор отбивается ошибкой. */\n  limit?: number\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Размер кнопок, иконок и подписей. */\n  size?: GrFormFileSize\n  /** Миниатюры для картинок в наборе. Файлы других типов остаются строкой. */\n  preview?: boolean\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n  /**\n   * Контролируемый список ошибок: `v-model:errors`. Задан — показывается он, и\n   * внутренняя валидация его не перетирает. Сюда же кладутся ошибки, пришедшие\n   * с сервера. Не задан — компонент держит свои ошибки сам.\n   */\n  errors?: GrFormFileError[]\n}\n\nexport interface GrFormFileEmits {\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  /** Результат валидации. Канал один: `validation` дублировал эту же нагрузку. */\n  (e: 'update:errors', errors: GrFormFileError[]): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    preview: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    ariaLabel: undefined,\n    accept: undefined,\n    limit: undefined,\n    uploadText: undefined,\n    changeText: undefined,\n    removeText: undefined,\n    clearAllText: undefined,\n    placeholder: undefined,\n    size: undefined,\n    validators: undefined,\n    validate: undefined,\n    errors: undefined,\n  },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrFormFile' })\n\nconst rowClass = computed(() => rowGaps[resolvedSize.value])\nconst stackClass = computed(() => stackGaps[resolvedSize.value])\nconst textClass = computed(() => textSizes[resolvedSize.value])\nconst removeTextClass = computed(() => removeTextSizes[resolvedSize.value])\nconst iconOffsetClass = computed(() => iconOffsets[resolvedSize.value])\nconst buttonSize = computed(() => buttonSizes[resolvedSize.value])\nconst iconSize = computed(() => iconSizes[resolvedSize.value])\nconst previewClass = computed(() => [previewSizes[resolvedSize.value], previewBaseClass])\n\nconst emit = defineEmits<GrFormFileEmits>()\ndefineSlots<{\n  /** Собственный вывод ошибок вместо списка по умолчанию. */\n  error?: (props: { errors: GrFormFileError[] }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`. Виджет здесь — кнопка выбора файла, а не нативный\n// `<input type=\"file\">`: он `aria-hidden` и вне таб-порядка, id на нём увёл бы\n// `<label for>` в невидимый элемент.\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // `locked` — «ввод не принимается»: `disabled` или `readonly`. Набор в\n  // `readonly` виден и уходит в форму, но поменять его нельзя ни диалогом, ни\n  // перетаскиванием, ни удалением.\n  locked: isLocked,\n} = useGrFormControl(() => props)\nconst resolvedUploadText = computed(() => props.uploadText ?? t('gr.formFile.upload', 'Upload file'))\nconst resolvedChangeText = computed(() => props.changeText ?? t('gr.formFile.change', 'Change file'))\nconst resolvedRemoveText = computed(() => props.removeText ?? t('gr.formFile.remove', 'Remove'))\nconst resolvedClearAllText = computed(() => props.clearAllText ?? t('gr.formFile.clearAll', 'Clear all'))\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('gr.formFile.placeholder', 'No files selected'))\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Внутри зоны фокус ходит между нативным input'ом и кнопками: без границы\n// каждое перемещение давало бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\nconst localErrors = ref<GrFormFileError[]>([])\nconst uploadBtnEl = ref<HTMLElement | null>(null)\n\n// Собственные ошибки компонент обязан и объявить (`role=\"alert\"`), и связать с\n// контролом: до этого «уронил файл не того типа» для скринридера выглядело как\n// «ничего не произошло». Ошибка поля из `GrFormField` при этом остаётся —\n// `aria-describedby` держит оба id.\nconst errorsId = useId()\n// Контролируемый список сильнее внутреннего — как `sortKey` у `GrDataTable`.\nconst displayedErrors = computed(() => props.errors ?? localErrors.value)\nconst hasLocalErrors = computed(() => displayedErrors.value.length > 0)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание кнопки:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedByIds = computed(() => {\n  return [\n    field?.describedById.value,\n    hasLocalErrors.value ? errorsId : undefined,\n    stateHint.value ? stateHintId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined\n})\n\nconst showsInvalid = computed(() => isInvalid.value || hasLocalErrors.value)\n\nfunction focus(): void {\n  uploadBtnEl.value?.focus()\n}\n\nfunction blur(): void {\n  uploadBtnEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nconst { fileKey, previewUrl, revokePreview, revokeAllPreviews } = useFilePreviews({\n  enabled: () => props.preview,\n})\n\n/**\n * Отзыв `object URL` привязан к самому набору, а не к местам, где его меняют.\n * Файл уходит из набора десятком путей — кнопка строки, «очистить всё», новый\n * выбор, внешний сброс `v-model`, — и точечные вызовы разъехались бы с первой\n * же новой веткой; blob при этом висел бы в памяти вкладки до перезагрузки.\n */\nwatch(files, (next, prev) => {\n  for (const file of prev ?? []) {\n    if (!next.includes(file)) revokePreview(file)\n  }\n})\n\nonBeforeUnmount(revokeAllPreviews)\n\n/**\n * Один набор валидаторов на оба пути ввода. Собери его отдельно в `applyFiles`\n * и в `dropzone` — копии разъедутся при первой же правке, и выбор через диалог\n * начнёт вести себя иначе, чем перетаскивание.\n */\nconst effectiveValidators = computed<FileValidator[]>(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  return [\n    acceptValidator(props.accept),\n    maxCountValidator(props.limit),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n})\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (displayedErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (isLocked.value) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const res = runFileValidators(nextFiles, effectiveValidators.value, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (isLocked.value) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (isLocked.value) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (isLocked.value) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\n/** Размер файла в строке списка — как в `GrFileUpload`: без него список не отвечает «сколько». */\nfunction formatFileSize(file: File): string {\n  return `${Math.ceil(file.size / 1024)} KB`\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  const text = resolveFileValidationMessage(issue, t)\n\n  // Префикс с именем файла нужен только тем сообщениям, которые сами его не\n  // называют, — то есть валидаторам потребителя. Встроенные передают `fileName`\n  // параметром и подставляют его в текст, и приписка давала бы «photo.png:\n  // Файл «photo.png» …». Признак — наличие параметра, а не поиск подстроки.\n  if (issue.fileName && issue.i18nParams?.fileName === undefined)\n    return `${issue.fileName}: ${text}`\n\n  return text\n}\n\nconst dropzone = computed(() => {\n  return {\n    enabled: !isLocked.value,\n    multiple: props.multiple,\n    validators: effectiveValidators.value,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: t('gr.formFile.validateError', 'Failed to validate dropped files'),\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    v-dropzone=\"dropzone\"\n    data-gr-form-file\n    class=\"rounded-[var(--gr-radius-md)]\"\n    :class=\"isDisabled ? 'cursor-not-allowed' : ''\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <input\n      ref=\"inputRef\"\n      data-gr-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"isDisabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col\" :class=\"stackClass\">\n      <div class=\"flex flex-wrap items-center\" :class=\"rowClass\">\n        <GrButton\n          :id=\"fieldId\"\n          ref=\"uploadBtnEl\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-upload-btn\n          :aria-describedby=\"describedByIds\"\n          :aria-invalid=\"showsInvalid ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :disabled=\"isDisabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconUpload />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ hasFiles ? resolvedChangeText : resolvedUploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple && !isReadonly\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-clear-btn\n          :disabled=\"isDisabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconX />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ resolvedRemoveText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles && !isReadonly\"\n          variant=\"secondary\"\n          :size=\"buttonSize\"\n          data-gr-form-file-clear-all-btn\n          :disabled=\"isDisabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon :size=\"iconSize\">\n            <IconX />\n          </GrIcon>\n          <span :class=\"iconOffsetClass\">{{ resolvedClearAllText }}</span>\n        </GrButton>\n\n        <img\n          v-if=\"!multiple && hasFiles && previewUrl(files[0]!)\"\n          data-gr-form-file-preview\n          :src=\"previewUrl(files[0]!)\"\n          alt=\"\"\n          :class=\"previewClass\"\n        >\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-[var(--gr-muted-fg)] truncate max-w-[240px]\"\n          :class=\"textClass\"\n          data-gr-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-[var(--gr-muted-fg)]\"\n          :class=\"textClass\"\n          data-gr-form-file-placeholder\n        >\n          {{ resolvedPlaceholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col\" :class=\"stackClass\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"fileKey(file)\"\n          class=\"flex items-center gap-2\"\n          data-gr-form-file-item\n        >\n          <img\n            v-if=\"previewUrl(file)\"\n            data-gr-form-file-preview\n            :src=\"previewUrl(file)\"\n            alt=\"\"\n            :class=\"previewClass\"\n          >\n\n          <span\n            class=\"text-[var(--gr-muted-fg)] truncate max-w-[240px]\"\n            :class=\"textClass\"\n            :title=\"file.name\"\n            data-gr-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <span\n            class=\"text-[var(--gr-muted-fg)] shrink-0\"\n            :class=\"removeTextClass\"\n            data-gr-form-file-item-size\n          >{{ formatFileSize(file) }}</span>\n\n          <button\n            v-if=\"!isReadonly\"\n            type=\"button\"\n            class=\"text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)]\"\n            :class=\"removeTextClass\"\n            data-gr-form-file-item-remove\n            :disabled=\"isDisabled\"\n            :aria-label=\"t('gr.formFile.removeFile', 'Remove {fileName}', { fileName: file.name })\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ resolvedRemoveText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"error\" :errors=\"displayedErrors\">\n        <div\n          v-if=\"hasLocalErrors\"\n          :id=\"errorsId\"\n          class=\"text-[var(--gr-danger-text)]\"\n          :class=\"textClass\"\n          data-gr-form-file-errors\n          role=\"alert\"\n        >\n          <div v-for=\"(e, i) in displayedErrors\" :key=\"i\" data-gr-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-gr-form-file].gr-dropzone--over {\n  outline: 2px solid var(--gr-ring);\n  outline-offset: 2px;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrInput/chunks/GrInput-BqqoEl1b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrInput-BqqoEl1b.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrInput/GrInput.vue","../../../../src/components/GrInput/GrInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { GrComponentSize } from '../shared/sizes'\nimport { computed, ref, useId } from 'vue'\n\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { InputHTMLAttributes } from 'vue'\n\nimport { grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\n    /**\n     * Значение поля. Необязательное: без `v-model` поле рисуется пустым.\n     * Дефолт — пустая строка, а не `undefined`: длина значения читается\n     * напрямую (`showClear`), и `undefined` уронил бы рендер.\n     */\n    modelValue?: string\n    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'\n    placeholder?: string\n    autocomplete?: string\n    inputmode?: InputHTMLAttributes['inputmode']\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?: 'default' | 'success' | 'warning' | 'danger'\n    name?: string\n    id?: string\n    size?: GrInputSize\n\n    /** Показывать кнопку очистки, когда есть значение (и не disabled/readonly). */\n    clearable?: boolean\n    /** i18n aria-label кнопки очистки. */\n    clearLabel?: string\n    /** Ограничение длины + основа для счётчика символов. */\n    maxlength?: number\n    /** Показывать счётчик символов (`len` или `len/maxlength`). */\n    showCount?: boolean\n    /**\n     * Фоновая работа по полю (проверка занятости логина, автосохранение):\n     * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —\n     * для этого есть `disabled`/`readonly`.\n     */\n    loading?: boolean\n    /** Кнопка показать/скрыть пароль (только при `type=\"password\"`). */\n    passwordToggle?: boolean\n    /** i18n aria-label кнопки показать/скрыть пароль. */\n    passwordShowLabel?: string\n    passwordHideLabel?: string\n\n    textAlign?: GrInputTextAlign\n\n    prefixMinWidth?: string\n    prefixMaxWidth?: string\n    suffixMinWidth?: string\n    suffixMaxWidth?: string\n    /**\n     * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n     * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n     * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n     * под контент (в пределах min/max), а излишек клипается оболочкой.\n     */\n    prefixFixed?: boolean\n    suffixFixed?: boolean\n}\n\nexport interface GrInputEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur` или `Enter`. */\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /**\n   * Значение стёрто кнопкой очистки. Отдельное событие потому, что по\n   * `update:modelValue` программную очистку от ручного стирания не отличить.\n   */\n  (e: 'clear'): void\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = GrComponentSize\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n    defineProps<GrInputProps>(),\n    {\n      modelValue: '',\n      type: 'text',\n      placeholder: undefined,\n      autocomplete: undefined,\n      inputmode: 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      size: undefined,\n\n      // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n      clearable: undefined,\n      clearLabel: undefined,\n      maxlength: undefined,\n      showCount: false,\n      loading: false,\n      passwordToggle: false,\n      passwordShowLabel: undefined,\n      passwordHideLabel: undefined,\n\n      textAlign: 'left',\n\n      prefixMinWidth: undefined,\n      prefixMaxWidth: undefined,\n      suffixMinWidth: undefined,\n      suffixMaxWidth: undefined,\n      prefixFixed: false,\n      suffixFixed: false,\n    },\n)\n\nconst emit = defineEmits<GrInputEmits>()\ndefineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\n\n\n// Контекст `GrFormField` (если инпут внутри него): даёт id/aria-describedby/\n// invalid/required как fallback, чтобы не прокидывать `forId` вручную.\nconst field = useGrFormFieldContext()\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInput' })\nconst resolvedClearable = useGrComponentProp('GrInput', 'clearable', () => props.clearable, false)\n\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том, что ограничение длины и есть смысл счётчика.\nconst countId = useId()\nconst describedBy = computed(() =>\n  [field?.describedById.value, props.showCount ? countId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\nfunction blur(): void {\n  inputEl.value?.blur()\n}\n\n/** Выделить содержимое — спутник `focus()` для «подставили значение, перезапишите». */\nfunction select(): void {\n  inputEl.value?.select()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  select,\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem', // w-8\n  sm: '2.25rem', // w-9\n  md: '2.5rem', // w-10\n  lg: '3rem', // w-12\n}\n\nconst passwordVisible = ref(false)\n// Тип поля с учётом переключателя пароля.\nconst resolvedType = computed(() => (props.type === 'password' && passwordVisible.value ? 'text' : props.type))\n\nconst showPasswordToggle = computed(() => props.passwordToggle && props.type === 'password' && !isDisabled.value)\nconst showClear = computed(() => resolvedClearable.value && props.modelValue.length > 0 && !isDisabled.value && !isReadonly.value)\n\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  trailingReserve: () => trailingReserve.value,\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => grInputShellClass({\n  state: props.state,\n  invalid: isInvalid.value,\n  disabled: isDisabled.value,\n}))\n\nconst className = computed(() => grInputFieldClass({\n  size: resolvedSize.value,\n  align: props.textAlign,\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLInputElement).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\n// ————— Trailing-контролы: очистка, переключатель пароля, счётчик символов.\nconst { t } = useGranularityTranslations()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\nconst resolvedPasswordShowLabel = computed(() => props.passwordShowLabel ?? t('gr.input.showPassword', 'Show password'))\nconst resolvedPasswordHideLabel = computed(() => props.passwordHideLabel ?? t('gr.input.hidePassword', 'Hide password'))\n\n// Счётчик символов: `len` или `len / maxlength`.\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * Живой регион объявляет только исчерпание лимита. Читать вслух каждый символ\n * нельзя — диктор захлебнётся, а сам счётчик и так связан с полем через\n * `aria-describedby` и читается при фокусе.\n */\nconst limitReached = computed(() =>\n  props.maxlength !== undefined && props.modelValue.length >= props.maxlength,\n)\nconst liveMessage = computed(() =>\n  limitReached.value ? t('gr.input.limitReached', 'Character limit reached') : '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('clear')\n  inputEl.value?.focus()\n}\n\nfunction togglePassword(): void {\n  passwordVisible.value = !passwordVisible.value\n  inputEl.value?.focus()\n}\n</script>\n\n<template>\n  <div data-gr-input class=\"w-full\">\n    <div :class=\"shellClass\">\n      <div\n          v-if=\"$slots.prefix\"\n          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :style=\"prefixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n          :id=\"resolvedId\"\n          ref=\"inputEl\"\n          v-bind=\"$attrs\"\n          :name=\"props.name\"\n          :type=\"resolvedType\"\n          :inputmode=\"props.inputmode\"\n          :autocomplete=\"props.autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :disabled=\"isDisabled\"\n          :readonly=\"isReadonly\"\n          :maxlength=\"props.maxlength\"\n          :value=\"props.modelValue\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          :aria-describedby=\"describedBy\"\n          :aria-required=\"isRequired ? 'true' : undefined\"\n          :aria-readonly=\"isReadonly ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :aria-busy=\"props.loading ? 'true' : undefined\"\n          class=\"w-full bg-transparent text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)]\"\n          :class=\"className\"\n          :style=\"inputStyle\"\n          @input=\"onInput\"\n          @change=\"onChange\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n      >\n\n      <div\n          v-if=\"trailingCount > 0\"\n          data-gr-input-trailing\n          class=\"absolute inset-y-0 right-1 flex items-center gap-0.5\"\n      >\n        <span\n            v-if=\"loading\"\n            data-gr-input-spinner\n            class=\"flex h-6 w-6 items-center justify-center text-[var(--gr-muted-fg)]\"\n            aria-hidden=\"true\"\n        >\n          <IconLoader class=\"h-4 w-4 animate-spin\" />\n        </span>\n\n        <button\n            v-if=\"showClear\"\n            type=\"button\"\n            data-gr-input-clear\n            :aria-label=\"resolvedClearLabel\"\n            class=\"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        <button\n            v-if=\"showPasswordToggle\"\n            type=\"button\"\n            data-gr-input-password-toggle\n            :aria-label=\"passwordVisible ? resolvedPasswordHideLabel : resolvedPasswordShowLabel\"\n            :aria-pressed=\"passwordVisible ? 'true' : 'false'\"\n            class=\"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=\"togglePassword\"\n        >\n          <IconEyeOff v-if=\"passwordVisible\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n          <IconEye v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      <div\n          v-if=\"$slots.suffix\"\n          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n          :style=\"suffixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\n\n    <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-input-count\n        class=\"mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] tabular-nums\"\n    >\n      {{ countText }}\n    </div>\n\n    <span\n        v-if=\"showCount\"\n        data-gr-input-live\n        class=\"sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n    >{{ liveMessage }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { GrComponentSize } from '../shared/sizes'\nimport { computed, ref, useId } from 'vue'\n\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { InputHTMLAttributes } from 'vue'\n\nimport { grInputFieldClass, grInputShellClass, paddingX } from './grInputStyles'\n\nimport IconLoader from '~icons/lucide/loader-2'\nimport IconX from '~icons/lucide/x'\nimport IconEye from '~icons/lucide/eye'\nimport IconEyeOff from '~icons/lucide/eye-off'\n\nexport interface GrInputProps {\n    /**\n     * Значение поля. Необязательное: без `v-model` поле рисуется пустым.\n     * Дефолт — пустая строка, а не `undefined`: длина значения читается\n     * напрямую (`showClear`), и `undefined` уронил бы рендер.\n     */\n    modelValue?: string\n    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'\n    placeholder?: string\n    autocomplete?: string\n    inputmode?: InputHTMLAttributes['inputmode']\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?: 'default' | 'success' | 'warning' | 'danger'\n    name?: string\n    id?: string\n    size?: GrInputSize\n\n    /** Показывать кнопку очистки, когда есть значение (и не disabled/readonly). */\n    clearable?: boolean\n    /** i18n aria-label кнопки очистки. */\n    clearLabel?: string\n    /** Ограничение длины + основа для счётчика символов. */\n    maxlength?: number\n    /** Показывать счётчик символов (`len` или `len/maxlength`). */\n    showCount?: boolean\n    /**\n     * Фоновая работа по полю (проверка занятости логина, автосохранение):\n     * спиннер в trailing-области + `aria-busy`. Ввод не блокируется —\n     * для этого есть `disabled`/`readonly`.\n     */\n    loading?: boolean\n    /** Кнопка показать/скрыть пароль (только при `type=\"password\"`). */\n    passwordToggle?: boolean\n    /** i18n aria-label кнопки показать/скрыть пароль. */\n    passwordShowLabel?: string\n    passwordHideLabel?: string\n\n    textAlign?: GrInputTextAlign\n\n    prefixMinWidth?: string\n    prefixMaxWidth?: string\n    suffixMinWidth?: string\n    suffixMaxWidth?: string\n    /**\n     * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n     * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n     * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n     * под контент (в пределах min/max), а излишек клипается оболочкой.\n     */\n    prefixFixed?: boolean\n    suffixFixed?: boolean\n}\n\nexport interface GrInputEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur` или `Enter`. */\n  (e: 'change', value: string): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n  /**\n   * Значение стёрто кнопкой очистки. Отдельное событие потому, что по\n   * `update:modelValue` программную очистку от ручного стирания не отличить.\n   */\n  (e: 'clear'): void\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = GrComponentSize\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n    defineProps<GrInputProps>(),\n    {\n      modelValue: '',\n      type: 'text',\n      placeholder: undefined,\n      autocomplete: undefined,\n      inputmode: 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      size: undefined,\n\n      // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n      clearable: undefined,\n      clearLabel: undefined,\n      maxlength: undefined,\n      showCount: false,\n      loading: false,\n      passwordToggle: false,\n      passwordShowLabel: undefined,\n      passwordHideLabel: undefined,\n\n      textAlign: 'left',\n\n      prefixMinWidth: undefined,\n      prefixMaxWidth: undefined,\n      suffixMinWidth: undefined,\n      suffixMaxWidth: undefined,\n      prefixFixed: false,\n      suffixFixed: false,\n    },\n)\n\nconst emit = defineEmits<GrInputEmits>()\ndefineSlots<{\n  /** Аддон слева от поля: иконка, код валюты, метка. */\n  prefix?: () => any\n  /** Аддон справа от поля: единица измерения, подсказка. */\n  suffix?: () => any\n}>()\n\n\n// Контекст `GrFormField` (если инпут внутри него): даёт id/aria-describedby/\n// invalid/required как fallback, чтобы не прокидывать `forId` вручную.\nconst field = useGrFormFieldContext()\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInput' })\nconst resolvedClearable = useGrComponentProp('GrInput', 'clearable', () => props.clearable, false)\n\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том, что ограничение длины и есть смысл счётчика.\nconst countId = useId()\nconst describedBy = computed(() =>\n  [field?.describedById.value, props.showCount ? countId : undefined]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\nfunction blur(): void {\n  inputEl.value?.blur()\n}\n\n/** Выделить содержимое — спутник `focus()` для «подставили значение, перезапишите». */\nfunction select(): void {\n  inputEl.value?.select()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  select,\n})\n\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputSize, string> = {\n  xs: '2rem', // w-8\n  sm: '2.25rem', // w-9\n  md: '2.5rem', // w-10\n  lg: '3rem', // w-12\n}\n\nconst passwordVisible = ref(false)\n// Тип поля с учётом переключателя пароля.\nconst resolvedType = computed(() => (props.type === 'password' && passwordVisible.value ? 'text' : props.type))\n\nconst showPasswordToggle = computed(() => props.passwordToggle && props.type === 'password' && !isDisabled.value)\nconst showClear = computed(() => resolvedClearable.value && props.modelValue.length > 0 && !isDisabled.value && !isReadonly.value)\n\nconst trailingCount = computed(() => (showClear.value ? 1 : 0) + (showPasswordToggle.value ? 1 : 0) + (props.loading ? 1 : 0))\nconst trailingReserve = computed(() => (trailingCount.value > 0 ? `${trailingCount.value * 28}px` : '0px'))\n\nconst {\n  prefixEl,\n  suffixEl,\n  prefixStyle,\n  suffixStyle,\n  fieldPadding: inputStyle,\n} = useControlAddons(() => props, {\n  defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n  paddingX: () => paddingX[resolvedSize.value],\n  trailingReserve: () => trailingReserve.value,\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => grInputShellClass({\n  state: props.state,\n  invalid: isInvalid.value,\n  disabled: isDisabled.value,\n}))\n\nconst className = computed(() => grInputFieldClass({\n  size: resolvedSize.value,\n  align: props.textAlign,\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLInputElement).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\n// ————— Trailing-контролы: очистка, переключатель пароля, счётчик символов.\nconst { t } = useGranularityTranslations()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\nconst resolvedPasswordShowLabel = computed(() => props.passwordShowLabel ?? t('gr.input.showPassword', 'Show password'))\nconst resolvedPasswordHideLabel = computed(() => props.passwordHideLabel ?? t('gr.input.hidePassword', 'Hide password'))\n\n// Счётчик символов: `len` или `len / maxlength`.\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\n\n/**\n * Живой регион объявляет только исчерпание лимита. Читать вслух каждый символ\n * нельзя — диктор захлебнётся, а сам счётчик и так связан с полем через\n * `aria-describedby` и читается при фокусе.\n */\nconst limitReached = computed(() =>\n  props.maxlength !== undefined && props.modelValue.length >= props.maxlength,\n)\nconst liveMessage = computed(() =>\n  limitReached.value ? t('gr.input.limitReached', 'Character limit reached') : '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('clear')\n  inputEl.value?.focus()\n}\n\nfunction togglePassword(): void {\n  passwordVisible.value = !passwordVisible.value\n  inputEl.value?.focus()\n}\n</script>\n\n<template>\n  <div data-gr-input class=\"w-full\">\n    <div :class=\"shellClass\">\n      <div\n          v-if=\"$slots.prefix\"\n          ref=\"prefixEl\"\n          data-testid=\"gr-input-prefix\"\n          class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :style=\"prefixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"prefix\" />\n      </div>\n\n      <input\n          :id=\"resolvedId\"\n          ref=\"inputEl\"\n          v-bind=\"$attrs\"\n          :name=\"props.name\"\n          :type=\"resolvedType\"\n          :inputmode=\"props.inputmode\"\n          :autocomplete=\"props.autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :disabled=\"isDisabled\"\n          :readonly=\"isReadonly\"\n          :maxlength=\"props.maxlength\"\n          :value=\"props.modelValue\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          :aria-describedby=\"describedBy\"\n          :aria-required=\"isRequired ? 'true' : undefined\"\n          :aria-readonly=\"isReadonly ? 'true' : undefined\"\n          :aria-label=\"ariaLabel\"\n          :aria-busy=\"props.loading ? 'true' : undefined\"\n          class=\"w-full bg-transparent text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)]\"\n          :class=\"className\"\n          :style=\"inputStyle\"\n          @input=\"onInput\"\n          @change=\"onChange\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n      >\n\n      <div\n          v-if=\"trailingCount > 0\"\n          data-gr-input-trailing\n          class=\"absolute inset-y-0 right-1 flex items-center gap-0.5\"\n      >\n        <span\n            v-if=\"loading\"\n            data-gr-input-spinner\n            class=\"flex h-6 w-6 items-center justify-center text-[var(--gr-muted-fg)]\"\n            aria-hidden=\"true\"\n        >\n          <IconLoader class=\"h-4 w-4 animate-spin\" />\n        </span>\n\n        <button\n            v-if=\"showClear\"\n            type=\"button\"\n            data-gr-input-clear\n            :aria-label=\"resolvedClearLabel\"\n            class=\"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        <button\n            v-if=\"showPasswordToggle\"\n            type=\"button\"\n            data-gr-input-password-toggle\n            :aria-label=\"passwordVisible ? resolvedPasswordHideLabel : resolvedPasswordShowLabel\"\n            :aria-pressed=\"passwordVisible ? 'true' : 'false'\"\n            class=\"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=\"togglePassword\"\n        >\n          <IconEyeOff v-if=\"passwordVisible\" class=\"h-4 w-4\" aria-hidden=\"true\" />\n          <IconEye v-else class=\"h-4 w-4\" aria-hidden=\"true\" />\n        </button>\n      </div>\n\n      <div\n          v-if=\"$slots.suffix\"\n          ref=\"suffixEl\"\n          data-testid=\"gr-input-suffix\"\n          class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--gr-brd)] px-2 text-[var(--gr-muted-fg)] pointer-events-none select-none truncate\"\n          :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n          :style=\"suffixStyle\"\n          aria-hidden=\"true\"\n      >\n        <slot name=\"suffix\" />\n      </div>\n    </div>\n\n    <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-input-count\n        class=\"mt-1 text-right text-[length:var(--gr-control-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-muted-fg)] tabular-nums\"\n    >\n      {{ countText }}\n    </div>\n\n    <span\n        v-if=\"showCount\"\n        data-gr-input-live\n        class=\"sr-only\"\n        role=\"status\"\n        aria-live=\"polite\"\n    >{{ liveMessage }}</span>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGA,MAAM,QAAQ;EAuCd,MAAM,OAAO;EAWb,MAAM,QAAQ,sBAAsB;EAGpC,MAAM,eAAe,yBAAyB,MAAM,MAAM,EAAE,WAAW,UAAU,CAAC;EAClF,MAAM,oBAAoB,mBAAmB,WAAW,mBAAmB,MAAM,WAAW,KAAK;EAEjG,MAAM,aAAa,eAAe,MAAM,MAAM,OAAO,GAAG,KAAK;EAI7D,MAAM,UAAU,MAAM;EACtB,MAAM,cAAc,eAClB,CAAC,OAAO,cAAc,OAAO,MAAM,YAAY,UAAU,KAAA,CAAS,CAAA,CAC/D,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,KAAK,KAAA,CAClB;EACA,MAAM,EACJ,UAAU,YACV,SAAS,WACT,UAAU,YACV,UAAU,eACR,uBAAuB,KAAK;EAEhC,MAAM,UAAU,IAA6B,IAAI;EAEjD,SAAS,QAAc;GACrB,QAAQ,OAAO,MAAM;EACvB;EAEA,SAAS,OAAa;GACpB,QAAQ,OAAO,KAAK;EACtB;;EAGA,SAAS,SAAe;GACtB,QAAQ,OAAO,OAAO;EACxB;EAEA,SAAa;GACX;GACA;GACA;EACF,CAAC;EAED,MAAM,0BAAuD;GAC3D,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAEA,MAAM,kBAAkB,IAAI,KAAK;EAEjC,MAAM,eAAe,eAAgB,MAAM,SAAS,cAAc,gBAAgB,QAAQ,SAAS,MAAM,IAAK;EAE9G,MAAM,qBAAqB,eAAe,MAAM,kBAAkB,MAAM,SAAS,cAAc,CAAC,WAAW,KAAK;EAChH,MAAM,YAAY,eAAe,kBAAkB,SAAS,MAAM,WAAW,SAAS,KAAK,CAAC,WAAW,SAAS,CAAC,WAAW,KAAK;EAEjI,MAAM,gBAAgB,gBAAgB,UAAU,QAAQ,IAAI,MAAM,mBAAmB,QAAQ,IAAI,MAAM,MAAM,UAAU,IAAI,EAAE;EAC7H,MAAM,kBAAkB,eAAgB,cAAc,QAAQ,IAAI,GAAG,cAAc,QAAQ,GAAG,MAAM,KAAM;EAE1G,MAAM,EACJ,UACA,UACA,aACA,aACA,cAAc,eACZ,uBAAuB,OAAO;GAChC,uBAAuB,wBAAwB,aAAa;GAC5D,gBAAgB,SAAS,aAAa;GACtC,uBAAuB,gBAAgB;EACzC,CAAC;EAGD,MAAM,aAAa,eAAe,kBAAkB;GAClD,OAAO,MAAM;GACb,SAAS,UAAU;GACnB,UAAU,WAAW;EACvB,CAAC,CAAC;EAEF,MAAM,YAAY,eAAe,kBAAkB;GACjD,MAAM,aAAa;GACnB,OAAO,MAAM;EACf,CAAC,CAAC;EAEF,SAAS,QAAQ,GAAgB;GAC/B,KAAK,qBAAsB,EAAE,OAA4B,KAAK;EAChE;EAIA,SAAS,SAAS,GAAgB;GAChC,KAAK,UAAW,EAAE,OAA4B,KAAK;EACrD;EAEA,SAAS,QAAQ,GAAqB;GACpC,KAAK,SAAS,CAAC;EACjB;EAEA,SAAS,OAAO,GAAqB;GACnC,KAAK,QAAQ,CAAC;EAChB;EAGA,MAAM,EAAE,MAAM,2BAA2B;EACzC,MAAM,qBAAqB,eAAe,MAAM,cAAc,EAAE,kBAAkB,OAAO,CAAC;EAC1F,MAAM,4BAA4B,eAAe,MAAM,qBAAqB,EAAE,yBAAyB,eAAe,CAAC;EACvH,MAAM,4BAA4B,eAAe,MAAM,qBAAqB,EAAE,yBAAyB,eAAe,CAAC;EAGvH,MAAM,YAAY,eAChB,MAAM,cAAc,KAAA,IAAY,GAAG,MAAM,WAAW,OAAO,KAAK,MAAM,cAAc,OAAO,MAAM,WAAW,MAAM,CACpH;;;;;;EAOA,MAAM,eAAe,eACnB,MAAM,cAAc,KAAA,KAAa,MAAM,WAAW,UAAU,MAAM,SACpE;EACA,MAAM,cAAc,eAClB,aAAa,QAAQ,EAAE,yBAAyB,yBAAyB,IAAI,EAC/E;EAEA,SAAS,QAAc;GACrB,KAAK,qBAAqB,EAAE;GAC5B,KAAK,OAAO;GACZ,QAAQ,OAAO,MAAM;EACvB;EAEA,SAAS,iBAAuB;GAC9B,gBAAgB,QAAQ,CAAC,gBAAgB;GACzC,QAAQ,OAAO,MAAM;EACvB;;uBAIE,mBA6GM,OA7GN,YA6GM;IA5GJ,mBA0FM,OAAA,EA1FA,OAAK,eAAE,WAAA,KAAU,EAAA,GAAA;KAEXA,KAAAA,OAAO,UAAA,UAAA,GADjB,mBASM,OAAA;;eAPE;MAAJ,KAAI;MACJ,eAAY;MACZ,OAAM;MACL,OAAK,eAAE,MAAA,WAAA,CAAW;MACnB,eAAY;SAEd,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAGxB,mBA0BC,SA1BD,WA0BC;MAzBI,IAAI,WAAA;eACD;MAAJ,KAAI;QACIC,KAAAA,QAAM;MACb,MAAM,MAAM;MACZ,MAAM,aAAA;MACN,WAAW,MAAM;MACjB,cAAc,MAAM;MACpB,aAAa,MAAM;MACnB,UAAU,MAAA,UAAA;MACV,UAAU,MAAA,UAAA;MACV,WAAW,MAAM;MACjB,OAAO,MAAM;MACb,gBAAc,MAAA,SAAA,IAAS,SAAY,KAAA;MACnC,oBAAkB,YAAA;MAClB,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;MACrC,iBAAe,MAAA,UAAA,IAAU,SAAY,KAAA;MACrC,cAAY,QAAA;MACZ,aAAW,MAAM,UAAO,SAAY,KAAA;MACrC,OAAK,CAAC,wMACE,UAAA,KAAS;MAChB,OAAO,MAAA,UAAA;MACA;MACC;MACD;MACD;;KAID,cAAA,QAAa,KAAA,UAAA,GADvB,mBAqCM,OArCN,YAqCM;MA/BM,QAAA,WAAA,UAAA,GADV,mBAOO,QAPP,YAOO,CADL,YAA2C,MAAA,gBAAA,GAAA,EAA/B,OAAM,uBAAsB,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;MAIhC,UAAA,SAAA,UAAA,GADV,mBASS,UAAA;;OAPL,MAAK;OACL,uBAAA;OACC,cAAY,mBAAA;OACb,OAAM;OACL,SAAO;UAEV,YAA4C,MAAA,SAAA,GAAA;OAArC,OAAM;OAAU,eAAY;;MAI3B,mBAAA,SAAA,UAAA,GADV,mBAWS,UAAA;;OATL,MAAK;OACL,iCAAA;OACC,cAAY,gBAAA,QAAkB,0BAAA,QAA4B,0BAAA;OAC1D,gBAAc,gBAAA,QAAe,SAAA;OAC9B,OAAM;OACL,SAAO;UAEQ,gBAAA,SAAA,UAAA,GAAlB,YAAwE,MAAA,eAAA,GAAA;;OAArC,OAAM;OAAU,eAAY;0BAC/D,YAAqD,MAAA,WAAA,GAAA;;OAArC,OAAM;OAAU,eAAY;;;KAKtCD,KAAAA,OAAO,UAAA,UAAA,GADjB,mBAUM,OAAA;;eARE;MAAJ,KAAI;MACJ,eAAY;MACZ,OAAK,eAAA,CAAC,uKACE,QAAA,cAAW,oBAAA,EAAA,CAAA;MAClB,OAAK,eAAE,MAAA,WAAA,CAAW;MACnB,eAAY;SAEd,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;IAKhB,QAAA,aAAA,UAAA,GADV,mBAOM,OAAA;;KALD,IAAI,MAAA,OAAA;KACL,uBAAA;KACA,OAAM;uBAEL,UAAA,KAAS,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAIJ,QAAA,aAAA,UAAA,GADV,mBAMyB,QANzB,YAMyB,gBAArB,YAAA,KAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/GrJsonViewer/chunks/GrJsonViewer-CgwjoUJt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrJsonViewer-CgwjoUJt.js","names":[],"sources":["../../../../src/components/GrJsonViewer/jsonToNodes.ts","../../../../src/components/GrJsonViewer/GrJsonViewer.vue","../../../../src/components/GrJsonViewer/GrJsonViewer.vue"],"sourcesContent":["/**\n * Разбор произвольного значения в узлы дерева.\n *\n * Компонент показывает данные из БД и от чужих сервисов, поэтому обход обязан\n * пережить всё: цикл, `BigInt`, функцию в поле, массив на десять тысяч записей,\n * строку в миллион символов. Уронить страницу он права не имеет.\n */\n\n/** Что за значение в узле. Решает и цвет, и то, раскрывается ли узел. */\nexport type GrJsonNodeKind =\n  | 'object'\n  | 'array'\n  | 'string'\n  | 'number'\n  | 'boolean'\n  | 'null'\n  /** Значения, которых в JSON не бывает: функция, символ, `undefined`. */\n  | 'unsupported'\n  /** Хвост обрезанного массива — «ещё N элементов». Своего значения не имеет. */\n  | 'truncation'\n\nexport type GrJsonNode = {\n  /** Читаемый адрес узла (`$.items[3].name`). Он же ключ для `GrTree`. */\n  path: string\n  /** Имя ключа или индекс. Показывается слева от двоеточия. */\n  label: string\n  kind: GrJsonNodeKind\n  /** Что видно в строке. У ветки — счётчик, у листа — значение, возможно обрезанное. */\n  preview: string\n  /** Полное значение. Копирование берёт его, а не `preview`. */\n  value: unknown\n  /** Показ обрезан: копирование всё равно отдаёт целое. */\n  truncated: boolean\n  isLeaf: boolean\n  children?: GrJsonNode[]\n}\n\nexport type GrJsonToNodesOptions = {\n  /** Подпись корня. */\n  rootLabel?: string\n  /** Длина строки, после которой значение обрезается в показе. */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n}\n\n/** Маркер ветки, которая уже встречалась выше по этой же цепочке предков. */\nexport const CIRCULAR_MARKER = '[Circular]'\n\nconst DEFAULT_ROOT_LABEL = '$'\nconst DEFAULT_MAX_STRING_LENGTH = 200\nconst DEFAULT_MAX_ARRAY_ITEMS = 100\n\n/** Ключ, который можно дописать через точку, не сломав адрес. */\nconst PLAIN_KEY = /^[A-Za-z_$][\\w$]*$/\n\nfunction appendKey(parentPath: string, key: string): string {\n  return PLAIN_KEY.test(key) ? `${parentPath}.${key}` : `${parentPath}[${JSON.stringify(key)}]`\n}\n\n/**\n * Счётчик у ветки вместо её содержимого: свёрнутый узел обязан сказать, стоит\n * ли его раскрывать. Слово не склоняется — компонент не знает языка потребителя,\n * а число само по себе читается в любом.\n */\nfunction branchPreview(kind: 'object' | 'array', count: number): string {\n  return kind === 'array' ? `[${count}]` : `{${count}}`\n}\n\nfunction scalarPreview(value: unknown, maxStringLength: number): { preview: string, truncated: boolean } {\n  if (typeof value === 'string') {\n    if (value.length <= maxStringLength) return { preview: JSON.stringify(value), truncated: false }\n\n    // Кавычка открывается и не закрывается намеренно: закрытая читалась бы как\n    // конец строки, а строка продолжается — её просто не показывают целиком.\n    return { preview: `${JSON.stringify(value.slice(0, maxStringLength))}…`, truncated: true }\n  }\n\n  // `BigInt` представления в JSON не имеет, и `JSON.stringify` на нём бросает.\n  if (typeof value === 'bigint') return { preview: `${value}n`, truncated: false }\n\n  if (typeof value === 'function' || typeof value === 'symbol' || value === undefined)\n    return { preview: String(value), truncated: false }\n\n  return { preview: JSON.stringify(value) ?? String(value), truncated: false }\n}\n\nfunction kindOf(value: unknown): GrJsonNodeKind {\n  if (value === null) return 'null'\n  if (Array.isArray(value)) return 'array'\n\n  switch (typeof value) {\n    case 'string': return 'string'\n    case 'number': return 'number'\n    case 'bigint': return 'number'\n    case 'boolean': return 'boolean'\n    case 'object': return 'object'\n    // `undefined`, функция и символ представления в JSON не имеют — узел\n    // остаётся, чтобы ключ не исчез из показа молча.\n    case 'undefined':\n    case 'function':\n    case 'symbol': return 'unsupported'\n  }\n\n  // Недостижимо: ветки выше покрывают `typeof` целиком. Оставлено ради вывода\n  // типов — без него TS не считает функцию всегда возвращающей.\n  return 'unsupported'\n}\n\ntype BuildContext = {\n  maxStringLength: number\n  maxArrayItems: number\n  /**\n   * Цепочка предков текущего узла, а не все встреченные объекты.\n   *\n   * Разница принципиальна и отличает обход дерева от `replacer` у\n   * `JSON.stringify`: тому стек недоступен, поэтому он метит `[Circular]` любую\n   * повторную ссылку — в том числе объект, честно положенный в данные дважды.\n   * Здесь стек есть, и маркер достаётся только настоящему циклу.\n   */\n  ancestors: Set<object>\n}\n\nfunction buildNode(label: string, path: string, value: unknown, context: BuildContext): GrJsonNode {\n  const kind = kindOf(value)\n\n  if (kind !== 'object' && kind !== 'array') {\n    const { preview, truncated } = scalarPreview(value, context.maxStringLength)\n\n    return { path, label, kind, preview, value, truncated, isLeaf: true }\n  }\n\n  const container = value as object\n\n  if (context.ancestors.has(container)) {\n    return { path, label, kind, preview: CIRCULAR_MARKER, value, truncated: false, isLeaf: true }\n  }\n\n  const entries = Array.isArray(value)\n    ? value.map((item, index) => [String(index), item] as const)\n    : Object.entries(container)\n\n  // Пустой объект и пустой массив — листья: раскрывать нечего, а ветка без\n  // детей рисует стрелку, которая ничего не делает.\n  if (entries.length === 0) {\n    return {\n      path,\n      label,\n      kind,\n      preview: Array.isArray(value) ? '[]' : '{}',\n      value,\n      truncated: false,\n      isLeaf: true,\n    }\n  }\n\n  context.ancestors.add(container)\n\n  const limit = Math.max(0, context.maxArrayItems)\n  const isOverLimit = Array.isArray(value) && entries.length > limit\n  const visible = isOverLimit ? entries.slice(0, limit) : entries\n\n  const children: GrJsonNode[] = visible.map(([key, item]) => buildNode(\n    key,\n    Array.isArray(value) ? `${path}[${key}]` : appendKey(path, key),\n    item,\n    context,\n  ))\n\n  if (isOverLimit) {\n    const rest = entries.length - limit\n\n    children.push({\n      path: `${path}[…]`,\n      label: '…',\n      kind: 'truncation',\n      preview: String(rest),\n      value: (value as unknown[]).slice(limit),\n      truncated: true,\n      isLeaf: true,\n    })\n  }\n\n  context.ancestors.delete(container)\n\n  return {\n    path,\n    label,\n    kind,\n    preview: branchPreview(kind, entries.length),\n    value,\n    truncated: isOverLimit,\n    isLeaf: false,\n    children,\n  }\n}\n\n/**\n * Значение → узлы дерева. Корень всегда один: даже скаляр на входе — это узел,\n * иначе дерево пришлось бы то показывать, то нет.\n */\nexport function jsonToNodes(value: unknown, options: GrJsonToNodesOptions = {}): GrJsonNode[] {\n  const context: BuildContext = {\n    maxStringLength: options.maxStringLength ?? DEFAULT_MAX_STRING_LENGTH,\n    maxArrayItems: options.maxArrayItems ?? DEFAULT_MAX_ARRAY_ITEMS,\n    ancestors: new Set(),\n  }\n\n  return [buildNode(options.rootLabel ?? DEFAULT_ROOT_LABEL, DEFAULT_ROOT_LABEL, value, context)]\n}\n\n/** Пути всех узлов до заданной глубины — ими задаётся начальная свёртка. */\nexport function pathsToDepth(nodes: GrJsonNode[], depth: number, level = 0): string[] {\n  if (level >= depth) return []\n\n  return nodes.flatMap(node => (\n    node.children ? [node.path, ...pathsToDepth(node.children, depth, level + 1)] : []\n  ))\n}\n\n/** Пути всех веток — для «раскрыть всё». */\nexport function branchPaths(nodes: GrJsonNode[]): string[] {\n  return nodes.flatMap(node => (node.children ? [node.path, ...branchPaths(node.children)] : []))\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Этого хватает и глубине по умолчанию, и кнопкам «раскрыть/свернуть всё»;\n * ручное раскрытие пользователя при этом сбрасывается — от этих кнопок ровно\n * того и ждут.\n */\nconst expandedPaths = ref<string[]>([])\n\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth]) => { expandedPaths.value = pathsToDepth(list, depth) },\n  { immediate: true },\n)\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => { treeRef.value?.filter(value) })\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value) return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n  canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n\n  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n  if (copiedTimer !== null) {\n    clearTimeout(copiedTimer)\n    copiedTimer = null\n  }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Этого хватает и глубине по умолчанию, и кнопкам «раскрыть/свернуть всё»;\n * ручное раскрытие пользователя при этом сбрасывается — от этих кнопок ровно\n * того и ждут.\n */\nconst expandedPaths = ref<string[]>([])\n\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth]) => { expandedPaths.value = pathsToDepth(list, depth) },\n  { immediate: true },\n)\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => { treeRef.value?.filter(value) })\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value) return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n  canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n\n  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n  if (copiedTimer !== null) {\n    clearTimeout(copiedTimer)\n    copiedTimer = null\n  }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrList/chunks/GrList-DmT4qzLO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrList-DmT4qzLO.js","names":["$slots"],"sources":["../../../../src/components/GrList/GrList.vue","../../../../src/components/GrList/GrList.vue","../../../../src/components/GrList/GrListItem.vue","../../../../src/components/GrList/GrListItem.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue'\n\nimport GrCard from '../GrCard'\nimport type { GrCardVariant } from '../GrCard/grCardStyles'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useVirtualList, type GrVirtualAlign } from '../../composables/useVirtualList'\n\nimport { dividedClass, emptyClass, listSurfaceClass, loadingRowClass } from './grListStyles'\n\nexport interface GrListProps<TItem = unknown> {\n  /**\n   * Поверхность списка — вариант карточки под ним. `ghost` убирает рамку и\n   * тень: список внутри уже существующей карточки не должен давать вторую.\n   */\n  variant?: GrCardVariant\n  /** Показывать ли горизонтальные разделители между элементами (по умолчанию — да). */\n  divided?: boolean\n  /** Идёт загрузка: вместо пунктов — строки-скелетоны, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Список пуст. По умолчанию определяется сам — по содержимому слота; проп\n   * нужен там, где потребитель знает лучше (например, слот заполнен\n   * заголовками групп, а данных в них нет).\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /**\n   * Данные списка. С ними пункты рисует слот `#item`, а не слот по умолчанию, —\n   * и только так список знает размер набора, то есть может его виртуализировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Высота видимой части: контейнер становится скроллером. Число — пиксели. */\n  maxHeight?: number | string\n  /** Держать в DOM только окно вокруг вьюпорта. Требует `items` и `maxHeight`. */\n  virtual?: boolean\n  /** Оценка высоты пункта до замера. Уточняется по факту при первом рендере. */\n  estimatedItemSize?: number\n}\n\nconst props = withDefaults(defineProps<GrListProps<T>>(), {\n  // Дефолт живёт в `GrCard` (и его резолвере `GrConfigProvider`), поэтому здесь\n  // остаётся `undefined` — иначе список перебивал бы настройку карточки.\n  variant: undefined,\n  divided: true,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n  items: undefined,\n  itemKey: undefined,\n  maxHeight: undefined,\n  virtual: false,\n  // Строка обычной плотности с заголовком и описанием.\n  estimatedItemSize: 56,\n})\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst listEl = ref<HTMLElement | null>(null)\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.list.empty', 'Nothing here yet'))\n\nconst dataMode = computed(() => props.items !== undefined)\n\n// Пустоту видно по слоту: `v-for` по пустому массиву оставляет фрагмент без\n// узлов, `v-if` — комментарий, и ни то ни другое пунктом списка не является.\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst showItems = computed(() => !props.loading && !isEmpty.value)\n\n// Разделители нужны только между пунктами: в пустой и загрузочной ветках они\n// оставили бы висящую линию. Клип по радиусу карточки — безусловный.\nconst listClass = computed(() => [\n  listSurfaceClass,\n  props.divided && showItems.value ? dividedClass : '',\n].filter(Boolean).join(' '))\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nconst virtualEnabled = computed(() => props.virtual && dataMode.value && props.maxHeight !== undefined)\n\nconst virtualizer = useVirtualList({\n  container: listEl,\n  count: () => (virtualEnabled.value && showItems.value ? props.items!.length : 0),\n  // Замена массива сбрасывает замеры; append в тот же массив их сохраняет.\n  source: () => props.items,\n  itemSize: () => props.estimatedItemSize,\n  // Первый рендер обязан совпасть с серверным: контейнера ещё нет, и окно\n  // считается от объявленной высоты, а не от измеренной.\n  viewportSize: () => (typeof props.maxHeight === 'number' ? props.maxHeight : undefined),\n})\n\n/** Окно к отрисовке: при выключенной виртуализации — весь набор. */\nconst renderedItems = computed(() => {\n  const items = props.items ?? []\n  if (!virtualEnabled.value) return items.map((item, index) => ({ item, index }))\n\n  const { start, end } = virtualizer.range.value\n  return items.slice(start, end).map((item, offset) => ({ item, index: start + offset }))\n})\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function') return key(item, index)\n  if (typeof key === 'string') return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\n/**\n * ARIA-набор для пункта.\n *\n * Только в виртуальном режиме: в DOM тогда неполный набор, и без этих атрибутов\n * диктор объявил бы «7 из 20» на списке в пять тысяч. Когда набор в DOM целиком,\n * его размер и позицию браузер считает сам, а руками проставленные атрибуты\n * начинают расходиться с разметкой при любой фильтрации.\n */\nfunction ariaOf(index: number): Record<string, number> {\n  if (!virtualEnabled.value) return {}\n\n  return { 'aria-setsize': props.items!.length, 'aria-posinset': index + 1 }\n}\n\nconst maxHeightStyle = computed(() => {\n  const value = props.maxHeight\n  if (value == null) return undefined\n  return typeof value === 'number' ? `${value}px` : value\n})\n\nconst listStyle = computed(() => {\n  if (props.maxHeight === undefined) return undefined\n\n  const scroller = { overflowY: 'auto' as const, maxHeight: maxHeightStyle.value }\n  if (!virtualEnabled.value) return scroller\n\n  return { ...scroller, ...virtualizer.spacerStyle.value }\n})\n\n/**\n * Замер отрисованных пунктов.\n *\n * Идёт по детям контейнера, а не по `ref` на элементе: пункт рисует слот\n * потребителя, привязать к нему `ref` неоткуда. В виртуальном режиме прямые\n * дети контейнера — ровно окно (распорки живут псевдоэлементами и детьми не\n * считаются), поэтому сопоставление по позиции однозначно.\n */\nfunction measureRendered(): void {\n  if (!virtualEnabled.value) return\n  // В состояниях loading/empty дети контейнера — скелетоны и заглушки: их\n  // высоты записались бы в замеры под индексами будущих строк данных.\n  if (!showItems.value) return\n\n  const container = listEl.value\n  if (!container) return\n\n  const { start } = virtualizer.range.value\n  const children = container.children\n  for (let offset = 0; offset < children.length; offset++) {\n    virtualizer.measure(start + offset, children[offset])\n  }\n}\n\nonMounted(measureRendered)\nonUpdated(measureRendered)\n\nfunction scrollToIndex(index: number, align?: GrVirtualAlign): void {\n  virtualizer.scrollToIndex(index, align)\n}\n\ndefineExpose({ scrollToIndex })\n\nif (__GR_DEV__) {\n  watch(\n    () => [props.virtual, dataMode.value, props.maxHeight] as const,\n    ([virtual, hasItems, maxHeight]) => {\n      if (!virtual) return\n\n      if (!hasItems) {\n        console.warn(\n          '[granularity] GrList: `virtual` требует `items` — пункты из слота по умолчанию '\n          + 'список не считает и резать окно ему не из чего.',\n        )\n      }\n      else if (maxHeight === undefined) {\n        console.warn(\n          '[granularity] GrList: `virtual` требует `maxHeight` — без ограничения высоты '\n          + 'вьюпорта нет, и в окно попадает весь набор.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrList: с `items` пункты рисует слот `#item` — без него список пуст.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  onMounted(() => {\n    if (!virtualEnabled.value) return\n\n    const first = listEl.value?.firstElementChild\n    if (first && !first.hasAttribute('aria-posinset')) {\n      console.warn(\n        '[granularity] GrList: при `virtual` пункты обязаны нести `aria-setsize`/`aria-posinset` — '\n        + 'пробросьте `aria` из слота `#item`: <GrListItem v-bind=\"aria\" … />. Иначе диктор '\n        + 'посчитает набор по отрисованному окну.',\n      )\n    }\n  })\n}\n\ndefineSlots<{\n  /** Пункты списка, когда разметка пишется руками вместо `items`. */\n  default?: () => any\n  /**\n   * Пункт в data-режиме.\n   *\n   * `aria` проставляется только в виртуальном режиме — когда набор в DOM\n   * неполный и размер списка браузеру взять неоткуда.\n   */\n  item?: (props: { item: T, index: number, aria: Record<string, number> }) => any\n  /** Содержимое, пока едут данные. */\n  loading?: () => any\n  /** Пустое состояние вместо текста по умолчанию. */\n  empty?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      data-gr-list\n      role=\"list\"\n      :class=\"listClass\"\n      :style=\"listStyle\"\n      :tabindex=\"maxHeight === undefined ? undefined : 0\"\n      :data-gr-virtual=\"virtualEnabled ? '' : undefined\"\n      :aria-busy=\"loading ? 'true' : undefined\"\n    >\n      <template v-if=\"loading\">\n        <slot name=\"loading\">\n          <div\n            v-for=\"row in loadingRowCount\"\n            :key=\"row\"\n            data-gr-list-loading-row\n            :class=\"loadingRowClass\"\n          >\n            <GrSkeleton />\n          </div>\n        </slot>\n      </template>\n\n      <div\n        v-else-if=\"isEmpty\"\n        data-gr-list-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <template v-else-if=\"dataMode\">\n        <template\n          v-for=\"entry in renderedItems\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"entry.item\"\n            :index=\"entry.index\"\n            :aria=\"ariaOf(entry.index)\"\n          />\n        </template>\n      </template>\n\n      <slot v-else />\n    </div>\n  </GrCard>\n</template>\n\n<style scoped>\n/* Срезанное сверху и снизу держат псевдоэлементы контейнера: их не за что\n   размонтировать, в дереве доступности их нет, а высота приезжает переменными\n   в том же патче, что и пункты. Почему не отступы контейнера и не поля крайних\n   пунктов — `docs/virtual-list.md`. */\n[data-gr-virtual]::before,\n[data-gr-virtual]::after {\n    content: '';\n    display: block;\n    flex: none;\n}\n\n[data-gr-virtual]::before {\n    height: var(--gr-virtual-before, 0px);\n}\n\n[data-gr-virtual]::after {\n    height: var(--gr-virtual-after, 0px);\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, onMounted, onUpdated, ref, useSlots, watch } from 'vue'\n\nimport GrCard from '../GrCard'\nimport type { GrCardVariant } from '../GrCard/grCardStyles'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useVirtualList, type GrVirtualAlign } from '../../composables/useVirtualList'\n\nimport { dividedClass, emptyClass, listSurfaceClass, loadingRowClass } from './grListStyles'\n\nexport interface GrListProps<TItem = unknown> {\n  /**\n   * Поверхность списка — вариант карточки под ним. `ghost` убирает рамку и\n   * тень: список внутри уже существующей карточки не должен давать вторую.\n   */\n  variant?: GrCardVariant\n  /** Показывать ли горизонтальные разделители между элементами (по умолчанию — да). */\n  divided?: boolean\n  /** Идёт загрузка: вместо пунктов — строки-скелетоны, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Список пуст. По умолчанию определяется сам — по содержимому слота; проп\n   * нужен там, где потребитель знает лучше (например, слот заполнен\n   * заголовками групп, а данных в них нет).\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /**\n   * Данные списка. С ними пункты рисует слот `#item`, а не слот по умолчанию, —\n   * и только так список знает размер набора, то есть может его виртуализировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Высота видимой части: контейнер становится скроллером. Число — пиксели. */\n  maxHeight?: number | string\n  /** Держать в DOM только окно вокруг вьюпорта. Требует `items` и `maxHeight`. */\n  virtual?: boolean\n  /** Оценка высоты пункта до замера. Уточняется по факту при первом рендере. */\n  estimatedItemSize?: number\n}\n\nconst props = withDefaults(defineProps<GrListProps<T>>(), {\n  // Дефолт живёт в `GrCard` (и его резолвере `GrConfigProvider`), поэтому здесь\n  // остаётся `undefined` — иначе список перебивал бы настройку карточки.\n  variant: undefined,\n  divided: true,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n  items: undefined,\n  itemKey: undefined,\n  maxHeight: undefined,\n  virtual: false,\n  // Строка обычной плотности с заголовком и описанием.\n  estimatedItemSize: 56,\n})\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst listEl = ref<HTMLElement | null>(null)\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.list.empty', 'Nothing here yet'))\n\nconst dataMode = computed(() => props.items !== undefined)\n\n// Пустоту видно по слоту: `v-for` по пустому массиву оставляет фрагмент без\n// узлов, `v-if` — комментарий, и ни то ни другое пунктом списка не является.\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined)\n    return props.empty\n\n  if (dataMode.value)\n    return props.items!.length === 0\n\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst showItems = computed(() => !props.loading && !isEmpty.value)\n\n// Разделители нужны только между пунктами: в пустой и загрузочной ветках они\n// оставили бы висящую линию. Клип по радиусу карточки — безусловный.\nconst listClass = computed(() => [\n  listSurfaceClass,\n  props.divided && showItems.value ? dividedClass : '',\n].filter(Boolean).join(' '))\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nconst virtualEnabled = computed(() => props.virtual && dataMode.value && props.maxHeight !== undefined)\n\nconst virtualizer = useVirtualList({\n  container: listEl,\n  count: () => (virtualEnabled.value && showItems.value ? props.items!.length : 0),\n  // Замена массива сбрасывает замеры; append в тот же массив их сохраняет.\n  source: () => props.items,\n  itemSize: () => props.estimatedItemSize,\n  // Первый рендер обязан совпасть с серверным: контейнера ещё нет, и окно\n  // считается от объявленной высоты, а не от измеренной.\n  viewportSize: () => (typeof props.maxHeight === 'number' ? props.maxHeight : undefined),\n})\n\n/** Окно к отрисовке: при выключенной виртуализации — весь набор. */\nconst renderedItems = computed(() => {\n  const items = props.items ?? []\n  if (!virtualEnabled.value) return items.map((item, index) => ({ item, index }))\n\n  const { start, end } = virtualizer.range.value\n  return items.slice(start, end).map((item, offset) => ({ item, index: start + offset }))\n})\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function') return key(item, index)\n  if (typeof key === 'string') return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\n/**\n * ARIA-набор для пункта.\n *\n * Только в виртуальном режиме: в DOM тогда неполный набор, и без этих атрибутов\n * диктор объявил бы «7 из 20» на списке в пять тысяч. Когда набор в DOM целиком,\n * его размер и позицию браузер считает сам, а руками проставленные атрибуты\n * начинают расходиться с разметкой при любой фильтрации.\n */\nfunction ariaOf(index: number): Record<string, number> {\n  if (!virtualEnabled.value) return {}\n\n  return { 'aria-setsize': props.items!.length, 'aria-posinset': index + 1 }\n}\n\nconst maxHeightStyle = computed(() => {\n  const value = props.maxHeight\n  if (value == null) return undefined\n  return typeof value === 'number' ? `${value}px` : value\n})\n\nconst listStyle = computed(() => {\n  if (props.maxHeight === undefined) return undefined\n\n  const scroller = { overflowY: 'auto' as const, maxHeight: maxHeightStyle.value }\n  if (!virtualEnabled.value) return scroller\n\n  return { ...scroller, ...virtualizer.spacerStyle.value }\n})\n\n/**\n * Замер отрисованных пунктов.\n *\n * Идёт по детям контейнера, а не по `ref` на элементе: пункт рисует слот\n * потребителя, привязать к нему `ref` неоткуда. В виртуальном режиме прямые\n * дети контейнера — ровно окно (распорки живут псевдоэлементами и детьми не\n * считаются), поэтому сопоставление по позиции однозначно.\n */\nfunction measureRendered(): void {\n  if (!virtualEnabled.value) return\n  // В состояниях loading/empty дети контейнера — скелетоны и заглушки: их\n  // высоты записались бы в замеры под индексами будущих строк данных.\n  if (!showItems.value) return\n\n  const container = listEl.value\n  if (!container) return\n\n  const { start } = virtualizer.range.value\n  const children = container.children\n  for (let offset = 0; offset < children.length; offset++) {\n    virtualizer.measure(start + offset, children[offset])\n  }\n}\n\nonMounted(measureRendered)\nonUpdated(measureRendered)\n\nfunction scrollToIndex(index: number, align?: GrVirtualAlign): void {\n  virtualizer.scrollToIndex(index, align)\n}\n\ndefineExpose({ scrollToIndex })\n\nif (__GR_DEV__) {\n  watch(\n    () => [props.virtual, dataMode.value, props.maxHeight] as const,\n    ([virtual, hasItems, maxHeight]) => {\n      if (!virtual) return\n\n      if (!hasItems) {\n        console.warn(\n          '[granularity] GrList: `virtual` требует `items` — пункты из слота по умолчанию '\n          + 'список не считает и резать окно ему не из чего.',\n        )\n      }\n      else if (maxHeight === undefined) {\n        console.warn(\n          '[granularity] GrList: `virtual` требует `maxHeight` — без ограничения высоты '\n          + 'вьюпорта нет, и в окно попадает весь набор.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrList: с `items` пункты рисует слот `#item` — без него список пуст.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  onMounted(() => {\n    if (!virtualEnabled.value) return\n\n    const first = listEl.value?.firstElementChild\n    if (first && !first.hasAttribute('aria-posinset')) {\n      console.warn(\n        '[granularity] GrList: при `virtual` пункты обязаны нести `aria-setsize`/`aria-posinset` — '\n        + 'пробросьте `aria` из слота `#item`: <GrListItem v-bind=\"aria\" … />. Иначе диктор '\n        + 'посчитает набор по отрисованному окну.',\n      )\n    }\n  })\n}\n\ndefineSlots<{\n  /** Пункты списка, когда разметка пишется руками вместо `items`. */\n  default?: () => any\n  /**\n   * Пункт в data-режиме.\n   *\n   * `aria` проставляется только в виртуальном режиме — когда набор в DOM\n   * неполный и размер списка браузеру взять неоткуда.\n   */\n  item?: (props: { item: T, index: number, aria: Record<string, number> }) => any\n  /** Содержимое, пока едут данные. */\n  loading?: () => any\n  /** Пустое состояние вместо текста по умолчанию. */\n  empty?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      data-gr-list\n      role=\"list\"\n      :class=\"listClass\"\n      :style=\"listStyle\"\n      :tabindex=\"maxHeight === undefined ? undefined : 0\"\n      :data-gr-virtual=\"virtualEnabled ? '' : undefined\"\n      :aria-busy=\"loading ? 'true' : undefined\"\n    >\n      <template v-if=\"loading\">\n        <slot name=\"loading\">\n          <div\n            v-for=\"row in loadingRowCount\"\n            :key=\"row\"\n            data-gr-list-loading-row\n            :class=\"loadingRowClass\"\n          >\n            <GrSkeleton />\n          </div>\n        </slot>\n      </template>\n\n      <div\n        v-else-if=\"isEmpty\"\n        data-gr-list-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <template v-else-if=\"dataMode\">\n        <template\n          v-for=\"entry in renderedItems\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot\n            name=\"item\"\n            :item=\"entry.item\"\n            :index=\"entry.index\"\n            :aria=\"ariaOf(entry.index)\"\n          />\n        </template>\n      </template>\n\n      <slot v-else />\n    </div>\n  </GrCard>\n</template>\n\n<style scoped>\n/* Срезанное сверху и снизу держат псевдоэлементы контейнера: их не за что\n   размонтировать, в дереве доступности их нет, а высота приезжает переменными\n   в том же патче, что и пункты. Почему не отступы контейнера и не поля крайних\n   пунктов — `docs/virtual-list.md`. */\n[data-gr-virtual]::before,\n[data-gr-virtual]::after {\n    content: '';\n    display: block;\n    flex: none;\n}\n\n[data-gr-virtual]::before {\n    height: var(--gr-virtual-before, 0px);\n}\n\n[data-gr-virtual]::after {\n    height: var(--gr-virtual-after, 0px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, useSlots, watch, type Component } from 'vue'\n\nimport {\n  grListItemPaddingClass,\n  itemDescriptionClass,\n  itemDisabledClass,\n  itemHoverClass,\n  itemInteractiveClass,\n  itemLayoutClass,\n  itemTitleClass,\n  type GrListItemDensity,\n} from './grListStyles'\n\nexport type { GrListItemDensity } from './grListStyles'\n\nexport interface GrListItemProps {\n  /** Заголовок строки. Если передан слот `#title`, проп игнорируется. */\n  title?: string\n  /** Описание под заголовком. Если передан слот `#description`, проп игнорируется. */\n  description?: string\n  /** Плотность вертикальных отступов: `regular` — 12px, `compact` — 8px. */\n  density?: GrListItemDensity\n  /** Ссылка: строка становится `<a>`. */\n  href?: string\n  /** Свой корневой тег строки (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Кликабельная строка без ссылки — `<button>` с событием `click`. */\n  clickable?: boolean\n  /** Подсветка при наведении без интерактивности. */\n  hoverable?: boolean\n  disabled?: boolean\n}\n\nexport interface GrListItemEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrListItemProps>(), {\n  title: undefined,\n  description: undefined,\n  density: 'regular',\n  href: undefined,\n  as: undefined,\n  clickable: false,\n  hoverable: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrListItemEmits>()\n\nconst slots = useSlots()\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\nconst isInteractive = computed(() => !props.disabled && (!!props.as || !!props.href || props.clickable))\n\n/**\n * `role=\"listitem\"` остаётся на обёртке, а строка целиком — вложенный элемент:\n * `<a role=\"listitem\">` потерял бы роль ссылки, а интерактив снаружи разорвал бы\n * связку `list` → `listitem`. Обычная строка идёт по той же схеме, чтобы\n * разметка содержимого была написана один раз, а не по копии на ветку.\n */\nconst rowTag = computed<string | Component>(() => {\n  if (!isInteractive.value)\n    return 'div'\n\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n  return props.href ? 'a' : 'button'\n})\n\nconst rowClass = computed(() => [\n  itemLayoutClass,\n  grListItemPaddingClass(props.density),\n  isInteractive.value ? `${itemInteractiveClass} ${itemHoverClass}` : '',\n  !isInteractive.value && props.hoverable && !props.disabled ? itemHoverClass : '',\n  props.disabled ? itemDisabledClass : '',\n].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n  // `disabled` сюда попадает вместе с обычной строкой: и то и другое —\n  // не-интерактив, а кликов не эмитит ни один.\n  if (!isInteractive.value)\n    return\n\n  emit('click', event)\n}\n\n/** Теги, попадающие в таб-порядок сами. `<a>` — только со ссылкой. */\nfunction isFocusableTag(tag: string): boolean {\n  return tag === 'button' || (tag === 'a' && !!props.href)\n}\n\nif (__GR_DEV__) {\n  watch(\n    () => [isInteractive.value, props.as] as const,\n    ([interactive, as]) => {\n      // Компонент из `as` (`RouterLink`, Inertia `Link`) рендерит `<a>`, но узнать\n      // это до рендера нельзя — предупреждаем только по явно названному тегу.\n      if (!interactive || typeof as !== 'string' || isFocusableTag(as)) return\n\n      console.warn(\n        `[granularity] GrListItem: as=\"${as}\" не попадает в таб-порядок — строка кликается `\n        + 'мышью, но не с клавиатуры. Возьмите тег, умеющий фокус (`button`, `a` со ссылкой), '\n        + 'или компонент роутера.',\n      )\n    },\n    { immediate: true },\n  )\n}\n\ndefineSlots<{\n  /** Содержимое пункта вместо пары «заголовок и описание». */\n  default?: () => any\n  /** Аддон слева: иконка, аватар, чекбокс. */\n  prefix?: () => any\n  /** Заголовок пункта вместо пропа `title`. */\n  title?: () => any\n  /** Описание под заголовком вместо пропа `description`. */\n  description?: () => any\n}>()\n\n</script>\n\n<template>\n  <div\n    data-gr-list-item\n    role=\"listitem\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <component\n      :is=\"rowTag\"\n      :data-gr-list-item-action=\"isInteractive ? '' : undefined\"\n      :type=\"rowTag === 'button' ? 'button' : undefined\"\n      :href=\"isInteractive ? href : undefined\"\n      :class=\"rowClass\"\n      @click=\"onClick\"\n    >\n      <div v-if=\"$slots.prefix\" class=\"shrink-0\">\n        <slot name=\"prefix\" />\n      </div>\n      <div class=\"min-w-0 flex-1\">\n        <div v-if=\"hasTitle\" :class=\"itemTitleClass\">\n          <slot name=\"title\">\n{{ title }}\n</slot>\n        </div>\n        <div\n          v-if=\"hasDescription\"\n          :class=\"itemDescriptionClass\"\n        >\n          <slot name=\"description\">\n{{ description }}\n</slot>\n        </div>\n      </div>\n      <div v-if=\"$slots.default\" class=\"shrink-0\">\n        <slot />\n      </div>\n    </component>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, useSlots, watch, type Component } from 'vue'\n\nimport {\n  grListItemPaddingClass,\n  itemDescriptionClass,\n  itemDisabledClass,\n  itemHoverClass,\n  itemInteractiveClass,\n  itemLayoutClass,\n  itemTitleClass,\n  type GrListItemDensity,\n} from './grListStyles'\n\nexport type { GrListItemDensity } from './grListStyles'\n\nexport interface GrListItemProps {\n  /** Заголовок строки. Если передан слот `#title`, проп игнорируется. */\n  title?: string\n  /** Описание под заголовком. Если передан слот `#description`, проп игнорируется. */\n  description?: string\n  /** Плотность вертикальных отступов: `regular` — 12px, `compact` — 8px. */\n  density?: GrListItemDensity\n  /** Ссылка: строка становится `<a>`. */\n  href?: string\n  /** Свой корневой тег строки (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Кликабельная строка без ссылки — `<button>` с событием `click`. */\n  clickable?: boolean\n  /** Подсветка при наведении без интерактивности. */\n  hoverable?: boolean\n  disabled?: boolean\n}\n\nexport interface GrListItemEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrListItemProps>(), {\n  title: undefined,\n  description: undefined,\n  density: 'regular',\n  href: undefined,\n  as: undefined,\n  clickable: false,\n  hoverable: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrListItemEmits>()\n\nconst slots = useSlots()\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\nconst isInteractive = computed(() => !props.disabled && (!!props.as || !!props.href || props.clickable))\n\n/**\n * `role=\"listitem\"` остаётся на обёртке, а строка целиком — вложенный элемент:\n * `<a role=\"listitem\">` потерял бы роль ссылки, а интерактив снаружи разорвал бы\n * связку `list` → `listitem`. Обычная строка идёт по той же схеме, чтобы\n * разметка содержимого была написана один раз, а не по копии на ветку.\n */\nconst rowTag = computed<string | Component>(() => {\n  if (!isInteractive.value)\n    return 'div'\n\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n  return props.href ? 'a' : 'button'\n})\n\nconst rowClass = computed(() => [\n  itemLayoutClass,\n  grListItemPaddingClass(props.density),\n  isInteractive.value ? `${itemInteractiveClass} ${itemHoverClass}` : '',\n  !isInteractive.value && props.hoverable && !props.disabled ? itemHoverClass : '',\n  props.disabled ? itemDisabledClass : '',\n].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n  // `disabled` сюда попадает вместе с обычной строкой: и то и другое —\n  // не-интерактив, а кликов не эмитит ни один.\n  if (!isInteractive.value)\n    return\n\n  emit('click', event)\n}\n\n/** Теги, попадающие в таб-порядок сами. `<a>` — только со ссылкой. */\nfunction isFocusableTag(tag: string): boolean {\n  return tag === 'button' || (tag === 'a' && !!props.href)\n}\n\nif (__GR_DEV__) {\n  watch(\n    () => [isInteractive.value, props.as] as const,\n    ([interactive, as]) => {\n      // Компонент из `as` (`RouterLink`, Inertia `Link`) рендерит `<a>`, но узнать\n      // это до рендера нельзя — предупреждаем только по явно названному тегу.\n      if (!interactive || typeof as !== 'string' || isFocusableTag(as)) return\n\n      console.warn(\n        `[granularity] GrListItem: as=\"${as}\" не попадает в таб-порядок — строка кликается `\n        + 'мышью, но не с клавиатуры. Возьмите тег, умеющий фокус (`button`, `a` со ссылкой), '\n        + 'или компонент роутера.',\n      )\n    },\n    { immediate: true },\n  )\n}\n\ndefineSlots<{\n  /** Содержимое пункта вместо пары «заголовок и описание». */\n  default?: () => any\n  /** Аддон слева: иконка, аватар, чекбокс. */\n  prefix?: () => any\n  /** Заголовок пункта вместо пропа `title`. */\n  title?: () => any\n  /** Описание под заголовком вместо пропа `description`. */\n  description?: () => any\n}>()\n\n</script>\n\n<template>\n  <div\n    data-gr-list-item\n    role=\"listitem\"\n    :aria-disabled=\"disabled ? 'true' : undefined\"\n  >\n    <component\n      :is=\"rowTag\"\n      :data-gr-list-item-action=\"isInteractive ? '' : undefined\"\n      :type=\"rowTag === 'button' ? 'button' : undefined\"\n      :href=\"isInteractive ? href : undefined\"\n      :class=\"rowClass\"\n      @click=\"onClick\"\n    >\n      <div v-if=\"$slots.prefix\" class=\"shrink-0\">\n        <slot name=\"prefix\" />\n      </div>\n      <div class=\"min-w-0 flex-1\">\n        <div v-if=\"hasTitle\" :class=\"itemTitleClass\">\n          <slot name=\"title\">\n{{ title }}\n</slot>\n        </div>\n        <div\n          v-if=\"hasDescription\"\n          :class=\"itemDescriptionClass\"\n        >\n          <slot name=\"description\">\n{{ description }}\n</slot>\n        </div>\n      </div>\n      <div v-if=\"$slots.default\" class=\"shrink-0\">\n        <slot />\n      </div>\n    </component>\n  </div>\n</template>\n"],"mappings":"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"}