@feugene/granularity 0.21.0 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/chunks/config-BTCOJO5z2.js.map +1 -0
  2. package/dist/chunks/config-B_qi4Fma.js.map +1 -0
  3. package/dist/chunks/config-Baj7Wvx-.js.map +1 -0
  4. package/dist/chunks/{config-BKvX0q10.js → config-C5mO5DYZ.js} +10 -1
  5. package/dist/chunks/config-C5mO5DYZ.js.map +1 -0
  6. package/dist/chunks/config-CIcynHGr.js +96 -0
  7. package/dist/chunks/config-CIcynHGr.js.map +1 -0
  8. package/dist/chunks/{config-BsuDM3Hb.js → config-CKULiuvc.js} +15 -1
  9. package/dist/chunks/config-CKULiuvc.js.map +1 -0
  10. package/dist/chunks/config-QaIc_gRa.js.map +1 -0
  11. package/dist/chunks/config-eXB87DOi.js.map +1 -0
  12. package/dist/chunks/copy-DChChcq-.js +29 -0
  13. package/dist/chunks/copy-DChChcq-.js.map +1 -0
  14. package/dist/chunks/{en-CwAr3C_x.js → en-DCCFP4qu.js} +12 -2
  15. package/dist/chunks/{en-CwAr3C_x.js.map → en-DCCFP4qu.js.map} +1 -1
  16. package/dist/chunks/{es-TR4g2I4A.js → es-CT34HBVM.js} +12 -2
  17. package/dist/chunks/{es-TR4g2I4A.js.map → es-CT34HBVM.js.map} +1 -1
  18. package/dist/chunks/{es-Do1q9_SF.js → es-DdJsxlUr.js} +3 -3
  19. package/dist/chunks/{es-Do1q9_SF.js.map → es-DdJsxlUr.js.map} +1 -1
  20. package/dist/chunks/{generated-Do60Aq2I.js → generated-CiCrGDQO.js} +49 -0
  21. package/dist/chunks/{generated-Do60Aq2I.js.map → generated-CiCrGDQO.js.map} +1 -1
  22. package/dist/chunks/{granular-provider-BW2uopTG.js → granular-provider-CYroWMjO.js} +9 -7
  23. package/dist/chunks/granular-provider-CYroWMjO.js.map +1 -0
  24. package/dist/chunks/{ru-Bm-zWJ3F.js → ru-CLiAMwrx.js} +12 -2
  25. package/dist/chunks/{ru-Bm-zWJ3F.js.map → ru-CLiAMwrx.js.map} +1 -1
  26. package/dist/components/GrCodeBlock/chunks/{GrCodeBlock-CW3zY1ee.js → GrCodeBlock-BmXCLgLS.js} +4 -30
  27. package/dist/components/GrCodeBlock/chunks/{GrCodeBlock-CW3zY1ee.js.map → GrCodeBlock-BmXCLgLS.js.map} +1 -1
  28. package/dist/components/GrCodeBlock/index.js +2 -2
  29. package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-LOaFSCyd.js → GrDropdownMenu-DyS6dWDp.js} +2 -2
  30. package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-LOaFSCyd.js.map → GrDropdownMenu-DyS6dWDp.js.map} +1 -1
  31. package/dist/components/GrDropdownMenu/index.js +2 -2
  32. package/dist/components/GrJsonViewer/chunks/GrJsonViewer-DFUppRNb.js +389 -0
  33. package/dist/components/GrJsonViewer/chunks/GrJsonViewer-DFUppRNb.js.map +1 -0
  34. package/dist/components/GrJsonViewer/index.js +3 -0
  35. package/dist/components/GrList/chunks/{GrList-BUzFRa8-.js → GrList-BRYhpqIe.js} +3 -3
  36. package/dist/components/GrList/chunks/GrList-BRYhpqIe.js.map +1 -0
  37. package/dist/components/GrList/index.js +2 -2
  38. package/dist/components/GrList/styles.css +1 -1
  39. package/dist/components/GrRadio/index.js +1 -1
  40. package/dist/components/GrRadioGroup/index.js +1 -1
  41. package/dist/components/GrRating/chunks/{GrRating-BiAVT9H7.js → GrRating-BSEtaibx.js} +1 -1
  42. package/dist/components/GrRating/chunks/{GrRating-BiAVT9H7.js.map → GrRating-BSEtaibx.js.map} +1 -1
  43. package/dist/components/GrRating/index.js +2 -2
  44. package/dist/components/GrTabPanels/index.js +1 -1
  45. package/dist/granular-provider-node.js +1 -1
  46. package/dist/granular-provider.js +1 -1
  47. package/dist/i18n/all.js +1 -1
  48. package/dist/i18n/index.js +1 -1
  49. package/dist/index.js +15 -13
  50. package/dist/theme.js +1 -1
  51. package/dist/tokens.js +1 -1
  52. package/dist/types/components/GrDropdownMenu/GrDropdownMenu.vue.d.ts +1 -1
  53. package/dist/types/components/GrDropdownMenu/grDropdownMenuStyles.d.ts +10 -1
  54. package/dist/types/components/GrJsonViewer/GrJsonViewer.vue.d.ts +129 -0
  55. package/dist/types/components/GrJsonViewer/config.d.ts +1 -0
  56. package/dist/types/components/GrJsonViewer/defaults.d.ts +23 -0
  57. package/dist/types/components/GrJsonViewer/grJsonViewerStyles.d.ts +57 -0
  58. package/dist/types/components/GrJsonViewer/index.d.ts +9 -0
  59. package/dist/types/components/GrJsonViewer/jsonToNodes.d.ts +47 -0
  60. package/dist/types/components/GrJsonViewer/safelist.d.ts +1 -0
  61. package/dist/types/components/GrList/grListStyles.d.ts +13 -0
  62. package/dist/types/granular-provider/shared.d.ts +1 -0
  63. package/dist/types/i18n/messages/en.d.ts +18 -0
  64. package/dist/types/i18n/messages/es.d.ts +18 -0
  65. package/dist/types/i18n/messages/ru.d.ts +18 -0
  66. package/dist/types/index.d.ts +1 -0
  67. package/dist/web-types.json +123 -3
  68. package/package.json +5 -1
  69. package/dist/chunks/config-BKvX0q10.js.map +0 -1
  70. package/dist/chunks/config-BTCOJO5z.js.map +0 -1
  71. package/dist/chunks/config-B_qi4Fma2.js.map +0 -1
  72. package/dist/chunks/config-Baj7Wvx-2.js.map +0 -1
  73. package/dist/chunks/config-BsuDM3Hb.js.map +0 -1
  74. package/dist/chunks/config-QaIc_gRa2.js.map +0 -1
  75. package/dist/chunks/config-eXB87DOi2.js.map +0 -1
  76. package/dist/chunks/granular-provider-BW2uopTG.js.map +0 -1
  77. package/dist/components/GrList/chunks/GrList-BUzFRa8-.js.map +0 -1
  78. /package/dist/chunks/{config-BTCOJO5z.js → config-BTCOJO5z2.js} +0 -0
  79. /package/dist/chunks/{config-B_qi4Fma2.js → config-B_qi4Fma.js} +0 -0
  80. /package/dist/chunks/{config-Baj7Wvx-2.js → config-Baj7Wvx-.js} +0 -0
  81. /package/dist/chunks/{config-QaIc_gRa2.js → config-QaIc_gRa.js} +0 -0
  82. /package/dist/chunks/{config-eXB87DOi2.js → config-eXB87DOi.js} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GrJsonViewer-DFUppRNb.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 && typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\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 && typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\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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"}
@@ -0,0 +1,3 @@
1
+ import { t as GrJsonViewer_default } from "./chunks/GrJsonViewer-DFUppRNb.js";
2
+ import { n as grJsonViewerSafelist, t as grJsonViewerConfig } from "../../chunks/config-CIcynHGr.js";
3
+ export { GrJsonViewer_default as GrJsonViewer, GrJsonViewer_default as default, grJsonViewerConfig, grJsonViewerSafelist };
@@ -4,7 +4,7 @@ import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-
4
4
  import { t as GrSkeleton_default } from "../../GrSkeleton/chunks/GrSkeleton-CgfXxPQ2.js";
5
5
  import { t as GrCard_default } from "../../GrCard/chunks/GrCard-Bc7nRfbe.js";
6
6
  import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
7
- import { a as grListItemPaddingClass, c as itemHoverClass, d as itemTitleClass, f as loadingRowClass, i as emptyClass, l as itemInteractiveClass, o as itemDescriptionClass, r as dividedClass, s as itemDisabledClass, u as itemLayoutClass } from "../../../chunks/config-BsuDM3Hb.js";
7
+ import { a as grListItemPaddingClass, c as itemHoverClass, d as itemTitleClass, f as listSurfaceClass, i as emptyClass, l as itemInteractiveClass, o as itemDescriptionClass, p as loadingRowClass, r as dividedClass, s as itemDisabledClass, u as itemLayoutClass } from "../../../chunks/config-CKULiuvc.js";
8
8
  import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, normalizeClass, normalizeStyle, onMounted, onUpdated, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, withCtx } from "vue";
9
9
  import '../styles.css';//#region src/components/GrList/GrList.vue?vue&type=script&setup=true&lang.ts
10
10
  var _hoisted_1$1 = [
@@ -57,7 +57,7 @@ var GrList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
57
57
  return !hasMeaningfulSlotContent(slots.default?.() ?? []);
58
58
  });
59
59
  const showItems = computed(() => !props.loading && !isEmpty.value);
60
- const listClass = computed(() => props.divided && showItems.value ? dividedClass : void 0);
60
+ const listClass = computed(() => [listSurfaceClass, props.divided && showItems.value ? dividedClass : ""].filter(Boolean).join(" "));
61
61
  const loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)));
62
62
  const virtualEnabled = computed(() => props.virtual && dataMode.value && props.maxHeight !== void 0);
63
63
  const virtualizer = useVirtualList({
@@ -174,7 +174,7 @@ var GrList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
174
174
  }, 8, ["variant"]);
175
175
  };
176
176
  }
177
- }), [["__scopeId", "data-v-0bdb3b8b"]]);
177
+ }), [["__scopeId", "data-v-caa56c46"]]);
178
178
  //#endregion
179
179
  //#region src/components/GrList/GrListItem.vue?vue&type=script&setup=true&lang.ts
180
180
  var _hoisted_1 = ["aria-disabled"];
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GrList-BRYhpqIe.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 (import.meta.env?.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</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 (import.meta.env?.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</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 (import.meta.env?.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</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 (import.meta.env?.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</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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"}
@@ -1,3 +1,3 @@
1
- import { n as grListSafelist, t as grListConfig } from "../../chunks/config-BsuDM3Hb.js";
2
- import { n as GrList_default, t as GrListItem_default } from "./chunks/GrList-BUzFRa8-.js";
1
+ import { n as grListSafelist, t as grListConfig } from "../../chunks/config-CKULiuvc.js";
2
+ import { n as GrList_default, t as GrListItem_default } from "./chunks/GrList-BRYhpqIe.js";
3
3
  export { GrList_default as GrList, GrList_default as default, GrListItem_default as GrListItem, grListConfig, grListSafelist };
@@ -1 +1 @@
1
- [data-gr-virtual][data-v-0bdb3b8b]:before,[data-gr-virtual][data-v-0bdb3b8b]:after{content:"";flex:none;display:block}[data-gr-virtual][data-v-0bdb3b8b]:before{height:var(--gr-virtual-before,0px)}[data-gr-virtual][data-v-0bdb3b8b]:after{height:var(--gr-virtual-after,0px)}
1
+ [data-gr-virtual][data-v-caa56c46]:before,[data-gr-virtual][data-v-caa56c46]:after{content:"";flex:none;display:block}[data-gr-virtual][data-v-caa56c46]:before{height:var(--gr-virtual-before,0px)}[data-gr-virtual][data-v-caa56c46]:after{height:var(--gr-virtual-after,0px)}
@@ -1,3 +1,3 @@
1
1
  import { t as GrRadio_default } from "./chunks/GrRadio-BdhknbO8.js";
2
- import { n as grRadioSafelist, t as grRadioConfig } from "../../chunks/config-BTCOJO5z.js";
2
+ import { n as grRadioSafelist, t as grRadioConfig } from "../../chunks/config-BTCOJO5z2.js";
3
3
  export { GrRadio_default as GrRadio, GrRadio_default as default, grRadioConfig, grRadioSafelist };
@@ -1,3 +1,3 @@
1
1
  import { t as GrRadioGroup_default } from "./chunks/GrRadioGroup-BVmjKXcv.js";
2
- import { t as grRadioGroupConfig } from "../../chunks/config-QaIc_gRa2.js";
2
+ import { t as grRadioGroupConfig } from "../../chunks/config-QaIc_gRa.js";
3
3
  export { GrRadioGroup_default as GrRadioGroup, GrRadioGroup_default as default, grRadioGroupConfig };
@@ -3,7 +3,7 @@ import { n as useGranularityTranslations } from "../../../chunks/granularityI18n
3
3
  import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
4
4
  import { useGrFormControl } from "../../../composables/useGrFormControl.js";
5
5
  import { n as iconTag, t as iconClass } from "../../../chunks/icon-Dag2tIMs.js";
6
- import { a as ratingSymbolClass, i as ratingRootClass, o as ratingTextSizeBySize, r as ratingFillClassByTone, s as ratingVoidClass } from "../../../chunks/config-Baj7Wvx-2.js";
6
+ import { a as ratingSymbolClass, i as ratingRootClass, o as ratingTextSizeBySize, r as ratingFillClassByTone, s as ratingVoidClass } from "../../../chunks/config-Baj7Wvx-.js";
7
7
  import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
8
8
  //#region src/components/GrRating/GrRating.vue?vue&type=script&setup=true&lang.ts
9
9
  var _hoisted_1 = ["name", "value"];
@@ -1 +1 @@
1
- {"version":3,"file":"GrRating-BiAVT9H7.js","names":["$slots"],"sources":["../../../../src/components/GrRating/GrRating.vue","../../../../src/components/GrRating/GrRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n ratingFillClassByTone,\n ratingRootClass,\n ratingSymbolClass,\n ratingTextSizeBySize,\n ratingVoidClass,\n type GrRatingSize,\n type GrRatingTone,\n} from './grRatingStyles'\n\nexport type {\n GrRatingSize,\n GrRatingTone,\n} from './grRatingStyles'\n\n/**\n * Публичный GR-примитив «Rating» — шкала оценки символами (по умолчанию звёзды).\n *\n * Интерактивный режим реализует WAI-ARIA slider pattern (`role=\"slider\"`,\n * `aria-valuemin/max/now/valuetext`, стрелки / Home / End), режим только для\n * чтения — `role=\"img\"` с текстовой подписью, чтобы скринридер озвучил оценку\n * одной фразой, а не набором элементов.\n *\n * Символ по умолчанию рисуется инлайновым SVG (звезда с `fill=\"currentColor\"`) —\n * иконочные шрифты-маски `i-lucide-star` дают только контур. Свой символ\n * задаётся пропом `icon` (Vue-компонент или класс иконки) либо слотом `#symbol`.\n */\nexport interface GrRatingProps {\n /** Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. */\n modelValue: number\n /** Количество символов шкалы. */\n max?: number\n size?: GrRatingSize\n /** Тон заливки; точечно перекрывается переменной `--gr-rating-color`. */\n tone?: GrRatingTone\n /** Половинчатые оценки: клик по левой половине символа даёт `.5`. */\n allowHalf?: boolean\n /** Только показ: без ввода и фокуса. */\n readonly?: boolean\n disabled?: boolean\n /** Визуальное и ARIA-состояние ошибки. */\n invalid?: boolean\n /** Обязательное поле (`aria-required`). */\n required?: boolean\n /** Повторный клик по текущей оценке сбрасывает её в `0`. */\n clearable?: boolean\n /**\n * Символ вместо встроенной звезды: Vue-компонент либо класс иконки вашей\n * UnoCSS-сборки (`'i-lucide-heart'` — тогда нужен ваш `presetIcons`,\n * см. `docs/installation.md`).\n */\n icon?: string | Component\n /** Показывать числовую подпись справа от шкалы. */\n showText?: boolean\n /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */\n formatText?: (value: number) => string\n /**\n * Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в\n * видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует.\n * Массив короче `max` оставляет верхние деления без подписи.\n */\n texts?: string[]\n /**\n * Компактный вид: рисуются только заполненные символы. Осмысленно вместе с\n * `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.\n */\n compact?: boolean\n ariaLabel?: string\n /** Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. */\n name?: string\n}\n\nexport interface GrRatingEmits {\n (e: 'update:modelValue', value: number): void\n /** Оценка зафиксирована (клик / клавиша). */\n (e: 'change', value: number): void\n /** Значение под курсором; `null` — курсор ушёл со шкалы. */\n (e: 'hoverChange', value: number | null): void\n /** Оценка снята повторным кликом; только при `clearable`. */\n (e: 'clear'): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrRatingProps>(),\n {\n max: 5,\n size: undefined,\n tone: 'warning',\n allowHalf: false,\n readonly: false,\n disabled: false,\n invalid: false,\n required: false,\n clearable: false,\n icon: undefined,\n showText: false,\n formatText: undefined,\n texts: undefined,\n compact: false,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n component: 'GrRating',\n supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrRatingEmits>()\ndefineSlots<{\n /** Свой символ вместо звезды. `filled` — закрашенная половина символа. */\n symbol?: (props: { index: number, filled: boolean }) => any\n /** Подпись рядом с оценкой. */\n text?: (props: { value: number }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.focus()\n}\n\nfunction blur(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n/** Ввод возможен: не readonly и не disabled. */\nconst interactive = computed(() => !isReadonly.value && !isDisabled.value)\n\n/**\n * `aria-readonly`, `aria-invalid` и `aria-required` вешаются только в\n * slider-режиме: на `role=\"img\"` они не разрешены и дают critical в axe.\n *\n * Роль контрола (`slider`) сохраняется и в `disabled` — отключённый слайдер это\n * штатный ARIA-паттерн. А вот `readonly` — это уже не контрол, а картинка с\n * подписью: на `role=\"img\"` атрибуты `aria-value*`/`aria-disabled` запрещены\n * (axe: `aria-allowed-attr`), поэтому там их не выводим вовсе.\n */\nconst asSlider = computed(() => !props.readonly)\nconst step = computed(() => (props.allowHalf ? 0.5 : 1))\n\n// Значение под курсором имеет приоритет над моделью — это «предпросмотр» оценки.\nconst hoverValue = ref<number | null>(null)\nconst displayValue = computed(() => hoverValue.value ?? clamp(props.modelValue))\n\nfunction clamp(value: number): number {\n if (!Number.isFinite(value)) return 0\n return Math.min(props.max, Math.max(0, value))\n}\n\n/** Доля заливки символа с индексом `index` (0..1). */\nfunction fillRatio(index: number): number {\n return Math.min(1, Math.max(0, displayValue.value - index))\n}\n\nconst symbols = computed(() => {\n // Компактный вид показывает только заполненную часть шкалы; половинка\n // считается символом — иначе «2.5» потеряло бы половину звезды.\n const length = props.compact ? Math.ceil(clamp(props.modelValue)) : props.max\n return Array.from({ length }, (_, index) => index)\n})\n\n/** Подпись деления под текущим значением: половинки округляются вверх. */\nconst currentLabel = computed(() => {\n if (!props.texts?.length || displayValue.value <= 0) return undefined\n return props.texts[Math.ceil(displayValue.value) - 1]\n})\n\nconst valueText = computed(() => {\n const params = { value: displayValue.value, max: props.max }\n\n // Порядок слов задаёт локаль, а не конкатенация в коде.\n return currentLabel.value\n ? t('gr.rating.valueTextWithLabel', '{value} of {max}, {label}', { ...params, label: currentLabel.value })\n : t('gr.rating.valueText', '{value} of {max}', params)\n})\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.rating.label', 'Rating'))\n\nconst text = computed(() => {\n if (props.formatText) return props.formatText(displayValue.value)\n return currentLabel.value ?? String(displayValue.value)\n})\n\n/** Значение, соответствующее позиции курсора внутри символа `index`. */\nfunction valueAt(index: number, event: MouseEvent): number {\n if (!props.allowHalf) return index + 1\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n return rect.width > 0 && event.clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1\n}\n\nfunction onScaleBlur(event: FocusEvent): void {\n resetHover()\n emit('blur', event)\n}\n\nfunction commit(value: number): void {\n const next = clamp(value)\n if (next !== props.modelValue) emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction onSymbolClick(index: number, event: MouseEvent): void {\n if (!interactive.value) return\n const next = valueAt(index, event)\n const cleared = props.clearable && next === props.modelValue\n\n commit(cleared ? 0 : next)\n if (cleared) emit('clear')\n}\n\nfunction onSymbolMouseMove(index: number, event: MouseEvent): void {\n if (!interactive.value) {\n // Режим сменился под курсором — оставлять подсветку от прошлого состояния нельзя.\n resetHover()\n return\n }\n const next = valueAt(index, event)\n if (next === hoverValue.value) return\n hoverValue.value = next\n emit('hoverChange', next)\n}\n\nfunction resetHover(): void {\n if (hoverValue.value === null) return\n hoverValue.value = null\n emit('hoverChange', null)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (!interactive.value) return\n const current = clamp(props.modelValue)\n let next: number | null = null\n\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = current + step.value\n break\n case 'ArrowLeft':\n case 'ArrowDown':\n next = current - step.value\n break\n case 'Home':\n next = 0\n break\n case 'End':\n next = props.max\n break\n default:\n return\n }\n\n event.preventDefault()\n commit(next)\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-rating\n class=\"inline-flex items-center gap-2\"\n >\n <!-- Нативная форма: роль-виджет не labelable и в submit не попадает. -->\n <input\n v-if=\"name && modelValue > 0\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"String(modelValue)\"\n >\n <div\n :id=\"resolvedId\"\n data-gr-rating-scale\n data-testid=\"gr-rating-scale\"\n :class=\"ratingRootClass({ size: resolvedSize, disabled, interactive })\"\n :role=\"asSlider ? 'slider' : 'img'\"\n :tabindex=\"asSlider ? (disabled ? -1 : 0) : undefined\"\n :aria-label=\"asSlider ? resolvedAriaLabel : `${resolvedAriaLabel}: ${valueText}`\"\n :aria-valuemin=\"asSlider ? 0 : undefined\"\n :aria-valuemax=\"asSlider ? max : undefined\"\n :aria-valuenow=\"asSlider ? displayValue : undefined\"\n :aria-valuetext=\"asSlider ? valueText : undefined\"\n :aria-orientation=\"asSlider ? 'horizontal' : undefined\"\n :aria-disabled=\"asSlider && disabled ? 'true' : undefined\"\n :aria-invalid=\"asSlider && isInvalid ? 'true' : undefined\"\n :aria-describedby=\"asSlider ? describedBy : undefined\"\n :aria-required=\"asSlider && isRequired ? 'true' : undefined\"\n :aria-readonly=\"asSlider && isReadonly ? 'true' : undefined\"\n @keydown=\"onKeydown\"\n @mouseleave=\"resetHover\"\n @focus=\"emit('focus', $event)\"\n @blur=\"onScaleBlur\"\n >\n <span\n v-for=\"index in symbols\"\n :key=\"index\"\n data-gr-rating-symbol\n :data-testid=\"`gr-rating-symbol-${index}`\"\n :class=\"ratingSymbolClass(resolvedSize)\"\n @click=\"onSymbolClick(index, $event)\"\n @mousemove=\"onSymbolMouseMove(index, $event)\"\n >\n <!-- Нижний слой — «пустой» символ, поверх него обрезанный по ширине «залитый». -->\n <span class=\"block h-full w-full\" :class=\"ratingVoidClass\" aria-hidden=\"true\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"false\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n\n <span\n data-gr-rating-fill\n class=\"pointer-events-none absolute inset-y-0 left-0 overflow-hidden\"\n :class=\"ratingFillClassByTone[tone]\"\n :style=\"{ width: `${fillRatio(index) * 100}%` }\"\n aria-hidden=\"true\"\n >\n <span :class=\"ratingSymbolClass(resolvedSize)\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"true\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n </span>\n </span>\n </div>\n\n <span\n v-if=\"showText || $slots.text\"\n data-gr-rating-text\n class=\"text-[var(--gr-muted-fg)] tabular-nums\"\n :class=\"ratingTextSizeBySize[resolvedSize]\"\n >\n <slot name=\"text\" :value=\"displayValue\">{{ text }}</slot>\n </span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, type Component } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n ratingFillClassByTone,\n ratingRootClass,\n ratingSymbolClass,\n ratingTextSizeBySize,\n ratingVoidClass,\n type GrRatingSize,\n type GrRatingTone,\n} from './grRatingStyles'\n\nexport type {\n GrRatingSize,\n GrRatingTone,\n} from './grRatingStyles'\n\n/**\n * Публичный GR-примитив «Rating» — шкала оценки символами (по умолчанию звёзды).\n *\n * Интерактивный режим реализует WAI-ARIA slider pattern (`role=\"slider\"`,\n * `aria-valuemin/max/now/valuetext`, стрелки / Home / End), режим только для\n * чтения — `role=\"img\"` с текстовой подписью, чтобы скринридер озвучил оценку\n * одной фразой, а не набором элементов.\n *\n * Символ по умолчанию рисуется инлайновым SVG (звезда с `fill=\"currentColor\"`) —\n * иконочные шрифты-маски `i-lucide-star` дают только контур. Свой символ\n * задаётся пропом `icon` (Vue-компонент или класс иконки) либо слотом `#symbol`.\n */\nexport interface GrRatingProps {\n /** Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. */\n modelValue: number\n /** Количество символов шкалы. */\n max?: number\n size?: GrRatingSize\n /** Тон заливки; точечно перекрывается переменной `--gr-rating-color`. */\n tone?: GrRatingTone\n /** Половинчатые оценки: клик по левой половине символа даёт `.5`. */\n allowHalf?: boolean\n /** Только показ: без ввода и фокуса. */\n readonly?: boolean\n disabled?: boolean\n /** Визуальное и ARIA-состояние ошибки. */\n invalid?: boolean\n /** Обязательное поле (`aria-required`). */\n required?: boolean\n /** Повторный клик по текущей оценке сбрасывает её в `0`. */\n clearable?: boolean\n /**\n * Символ вместо встроенной звезды: Vue-компонент либо класс иконки вашей\n * UnoCSS-сборки (`'i-lucide-heart'` — тогда нужен ваш `presetIcons`,\n * см. `docs/installation.md`).\n */\n icon?: string | Component\n /** Показывать числовую подпись справа от шкалы. */\n showText?: boolean\n /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */\n formatText?: (value: number) => string\n /**\n * Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в\n * видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует.\n * Массив короче `max` оставляет верхние деления без подписи.\n */\n texts?: string[]\n /**\n * Компактный вид: рисуются только заполненные символы. Осмысленно вместе с\n * `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.\n */\n compact?: boolean\n ariaLabel?: string\n /** Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. */\n name?: string\n}\n\nexport interface GrRatingEmits {\n (e: 'update:modelValue', value: number): void\n /** Оценка зафиксирована (клик / клавиша). */\n (e: 'change', value: number): void\n /** Значение под курсором; `null` — курсор ушёл со шкалы. */\n (e: 'hoverChange', value: number | null): void\n /** Оценка снята повторным кликом; только при `clearable`. */\n (e: 'clear'): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrRatingProps>(),\n {\n max: 5,\n size: undefined,\n tone: 'warning',\n allowHalf: false,\n readonly: false,\n disabled: false,\n invalid: false,\n required: false,\n clearable: false,\n icon: undefined,\n showText: false,\n formatText: undefined,\n texts: undefined,\n compact: false,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n component: 'GrRating',\n supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrRatingEmits>()\ndefineSlots<{\n /** Свой символ вместо звезды. `filled` — закрашенная половина символа. */\n symbol?: (props: { index: number, filled: boolean }) => any\n /** Подпись рядом с оценкой. */\n text?: (props: { value: number }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.focus()\n}\n\nfunction blur(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n/** Ввод возможен: не readonly и не disabled. */\nconst interactive = computed(() => !isReadonly.value && !isDisabled.value)\n\n/**\n * `aria-readonly`, `aria-invalid` и `aria-required` вешаются только в\n * slider-режиме: на `role=\"img\"` они не разрешены и дают critical в axe.\n *\n * Роль контрола (`slider`) сохраняется и в `disabled` — отключённый слайдер это\n * штатный ARIA-паттерн. А вот `readonly` — это уже не контрол, а картинка с\n * подписью: на `role=\"img\"` атрибуты `aria-value*`/`aria-disabled` запрещены\n * (axe: `aria-allowed-attr`), поэтому там их не выводим вовсе.\n */\nconst asSlider = computed(() => !props.readonly)\nconst step = computed(() => (props.allowHalf ? 0.5 : 1))\n\n// Значение под курсором имеет приоритет над моделью — это «предпросмотр» оценки.\nconst hoverValue = ref<number | null>(null)\nconst displayValue = computed(() => hoverValue.value ?? clamp(props.modelValue))\n\nfunction clamp(value: number): number {\n if (!Number.isFinite(value)) return 0\n return Math.min(props.max, Math.max(0, value))\n}\n\n/** Доля заливки символа с индексом `index` (0..1). */\nfunction fillRatio(index: number): number {\n return Math.min(1, Math.max(0, displayValue.value - index))\n}\n\nconst symbols = computed(() => {\n // Компактный вид показывает только заполненную часть шкалы; половинка\n // считается символом — иначе «2.5» потеряло бы половину звезды.\n const length = props.compact ? Math.ceil(clamp(props.modelValue)) : props.max\n return Array.from({ length }, (_, index) => index)\n})\n\n/** Подпись деления под текущим значением: половинки округляются вверх. */\nconst currentLabel = computed(() => {\n if (!props.texts?.length || displayValue.value <= 0) return undefined\n return props.texts[Math.ceil(displayValue.value) - 1]\n})\n\nconst valueText = computed(() => {\n const params = { value: displayValue.value, max: props.max }\n\n // Порядок слов задаёт локаль, а не конкатенация в коде.\n return currentLabel.value\n ? t('gr.rating.valueTextWithLabel', '{value} of {max}, {label}', { ...params, label: currentLabel.value })\n : t('gr.rating.valueText', '{value} of {max}', params)\n})\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.rating.label', 'Rating'))\n\nconst text = computed(() => {\n if (props.formatText) return props.formatText(displayValue.value)\n return currentLabel.value ?? String(displayValue.value)\n})\n\n/** Значение, соответствующее позиции курсора внутри символа `index`. */\nfunction valueAt(index: number, event: MouseEvent): number {\n if (!props.allowHalf) return index + 1\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n return rect.width > 0 && event.clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1\n}\n\nfunction onScaleBlur(event: FocusEvent): void {\n resetHover()\n emit('blur', event)\n}\n\nfunction commit(value: number): void {\n const next = clamp(value)\n if (next !== props.modelValue) emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction onSymbolClick(index: number, event: MouseEvent): void {\n if (!interactive.value) return\n const next = valueAt(index, event)\n const cleared = props.clearable && next === props.modelValue\n\n commit(cleared ? 0 : next)\n if (cleared) emit('clear')\n}\n\nfunction onSymbolMouseMove(index: number, event: MouseEvent): void {\n if (!interactive.value) {\n // Режим сменился под курсором — оставлять подсветку от прошлого состояния нельзя.\n resetHover()\n return\n }\n const next = valueAt(index, event)\n if (next === hoverValue.value) return\n hoverValue.value = next\n emit('hoverChange', next)\n}\n\nfunction resetHover(): void {\n if (hoverValue.value === null) return\n hoverValue.value = null\n emit('hoverChange', null)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (!interactive.value) return\n const current = clamp(props.modelValue)\n let next: number | null = null\n\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = current + step.value\n break\n case 'ArrowLeft':\n case 'ArrowDown':\n next = current - step.value\n break\n case 'Home':\n next = 0\n break\n case 'End':\n next = props.max\n break\n default:\n return\n }\n\n event.preventDefault()\n commit(next)\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-rating\n class=\"inline-flex items-center gap-2\"\n >\n <!-- Нативная форма: роль-виджет не labelable и в submit не попадает. -->\n <input\n v-if=\"name && modelValue > 0\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"String(modelValue)\"\n >\n <div\n :id=\"resolvedId\"\n data-gr-rating-scale\n data-testid=\"gr-rating-scale\"\n :class=\"ratingRootClass({ size: resolvedSize, disabled, interactive })\"\n :role=\"asSlider ? 'slider' : 'img'\"\n :tabindex=\"asSlider ? (disabled ? -1 : 0) : undefined\"\n :aria-label=\"asSlider ? resolvedAriaLabel : `${resolvedAriaLabel}: ${valueText}`\"\n :aria-valuemin=\"asSlider ? 0 : undefined\"\n :aria-valuemax=\"asSlider ? max : undefined\"\n :aria-valuenow=\"asSlider ? displayValue : undefined\"\n :aria-valuetext=\"asSlider ? valueText : undefined\"\n :aria-orientation=\"asSlider ? 'horizontal' : undefined\"\n :aria-disabled=\"asSlider && disabled ? 'true' : undefined\"\n :aria-invalid=\"asSlider && isInvalid ? 'true' : undefined\"\n :aria-describedby=\"asSlider ? describedBy : undefined\"\n :aria-required=\"asSlider && isRequired ? 'true' : undefined\"\n :aria-readonly=\"asSlider && isReadonly ? 'true' : undefined\"\n @keydown=\"onKeydown\"\n @mouseleave=\"resetHover\"\n @focus=\"emit('focus', $event)\"\n @blur=\"onScaleBlur\"\n >\n <span\n v-for=\"index in symbols\"\n :key=\"index\"\n data-gr-rating-symbol\n :data-testid=\"`gr-rating-symbol-${index}`\"\n :class=\"ratingSymbolClass(resolvedSize)\"\n @click=\"onSymbolClick(index, $event)\"\n @mousemove=\"onSymbolMouseMove(index, $event)\"\n >\n <!-- Нижний слой — «пустой» символ, поверх него обрезанный по ширине «залитый». -->\n <span class=\"block h-full w-full\" :class=\"ratingVoidClass\" aria-hidden=\"true\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"false\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n\n <span\n data-gr-rating-fill\n class=\"pointer-events-none absolute inset-y-0 left-0 overflow-hidden\"\n :class=\"ratingFillClassByTone[tone]\"\n :style=\"{ width: `${fillRatio(index) * 100}%` }\"\n aria-hidden=\"true\"\n >\n <span :class=\"ratingSymbolClass(resolvedSize)\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"true\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n </span>\n </span>\n </div>\n\n <span\n v-if=\"showText || $slots.text\"\n data-gr-rating-text\n class=\"text-[var(--gr-muted-fg)] tabular-nums\"\n :class=\"ratingTextSizeBySize[resolvedSize]\"\n >\n <slot name=\"text\" :value=\"displayValue\">{{ text }}</slot>\n </span>\n </div>\n</template>\n"],"mappings":"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"}
1
+ {"version":3,"file":"GrRating-BSEtaibx.js","names":["$slots"],"sources":["../../../../src/components/GrRating/GrRating.vue","../../../../src/components/GrRating/GrRating.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, type Component } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n ratingFillClassByTone,\n ratingRootClass,\n ratingSymbolClass,\n ratingTextSizeBySize,\n ratingVoidClass,\n type GrRatingSize,\n type GrRatingTone,\n} from './grRatingStyles'\n\nexport type {\n GrRatingSize,\n GrRatingTone,\n} from './grRatingStyles'\n\n/**\n * Публичный GR-примитив «Rating» — шкала оценки символами (по умолчанию звёзды).\n *\n * Интерактивный режим реализует WAI-ARIA slider pattern (`role=\"slider\"`,\n * `aria-valuemin/max/now/valuetext`, стрелки / Home / End), режим только для\n * чтения — `role=\"img\"` с текстовой подписью, чтобы скринридер озвучил оценку\n * одной фразой, а не набором элементов.\n *\n * Символ по умолчанию рисуется инлайновым SVG (звезда с `fill=\"currentColor\"`) —\n * иконочные шрифты-маски `i-lucide-star` дают только контур. Свой символ\n * задаётся пропом `icon` (Vue-компонент или класс иконки) либо слотом `#symbol`.\n */\nexport interface GrRatingProps {\n /** Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. */\n modelValue: number\n /** Количество символов шкалы. */\n max?: number\n size?: GrRatingSize\n /** Тон заливки; точечно перекрывается переменной `--gr-rating-color`. */\n tone?: GrRatingTone\n /** Половинчатые оценки: клик по левой половине символа даёт `.5`. */\n allowHalf?: boolean\n /** Только показ: без ввода и фокуса. */\n readonly?: boolean\n disabled?: boolean\n /** Визуальное и ARIA-состояние ошибки. */\n invalid?: boolean\n /** Обязательное поле (`aria-required`). */\n required?: boolean\n /** Повторный клик по текущей оценке сбрасывает её в `0`. */\n clearable?: boolean\n /**\n * Символ вместо встроенной звезды: Vue-компонент либо класс иконки вашей\n * UnoCSS-сборки (`'i-lucide-heart'` — тогда нужен ваш `presetIcons`,\n * см. `docs/installation.md`).\n */\n icon?: string | Component\n /** Показывать числовую подпись справа от шкалы. */\n showText?: boolean\n /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */\n formatText?: (value: number) => string\n /**\n * Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в\n * видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует.\n * Массив короче `max` оставляет верхние деления без подписи.\n */\n texts?: string[]\n /**\n * Компактный вид: рисуются только заполненные символы. Осмысленно вместе с\n * `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.\n */\n compact?: boolean\n ariaLabel?: string\n /** Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. */\n name?: string\n}\n\nexport interface GrRatingEmits {\n (e: 'update:modelValue', value: number): void\n /** Оценка зафиксирована (клик / клавиша). */\n (e: 'change', value: number): void\n /** Значение под курсором; `null` — курсор ушёл со шкалы. */\n (e: 'hoverChange', value: number | null): void\n /** Оценка снята повторным кликом; только при `clearable`. */\n (e: 'clear'): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrRatingProps>(),\n {\n max: 5,\n size: undefined,\n tone: 'warning',\n allowHalf: false,\n readonly: false,\n disabled: false,\n invalid: false,\n required: false,\n clearable: false,\n icon: undefined,\n showText: false,\n formatText: undefined,\n texts: undefined,\n compact: false,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n component: 'GrRating',\n supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrRatingEmits>()\ndefineSlots<{\n /** Свой символ вместо звезды. `filled` — закрашенная половина символа. */\n symbol?: (props: { index: number, filled: boolean }) => any\n /** Подпись рядом с оценкой. */\n text?: (props: { value: number }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.focus()\n}\n\nfunction blur(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n/** Ввод возможен: не readonly и не disabled. */\nconst interactive = computed(() => !isReadonly.value && !isDisabled.value)\n\n/**\n * `aria-readonly`, `aria-invalid` и `aria-required` вешаются только в\n * slider-режиме: на `role=\"img\"` они не разрешены и дают critical в axe.\n *\n * Роль контрола (`slider`) сохраняется и в `disabled` — отключённый слайдер это\n * штатный ARIA-паттерн. А вот `readonly` — это уже не контрол, а картинка с\n * подписью: на `role=\"img\"` атрибуты `aria-value*`/`aria-disabled` запрещены\n * (axe: `aria-allowed-attr`), поэтому там их не выводим вовсе.\n */\nconst asSlider = computed(() => !props.readonly)\nconst step = computed(() => (props.allowHalf ? 0.5 : 1))\n\n// Значение под курсором имеет приоритет над моделью — это «предпросмотр» оценки.\nconst hoverValue = ref<number | null>(null)\nconst displayValue = computed(() => hoverValue.value ?? clamp(props.modelValue))\n\nfunction clamp(value: number): number {\n if (!Number.isFinite(value)) return 0\n return Math.min(props.max, Math.max(0, value))\n}\n\n/** Доля заливки символа с индексом `index` (0..1). */\nfunction fillRatio(index: number): number {\n return Math.min(1, Math.max(0, displayValue.value - index))\n}\n\nconst symbols = computed(() => {\n // Компактный вид показывает только заполненную часть шкалы; половинка\n // считается символом — иначе «2.5» потеряло бы половину звезды.\n const length = props.compact ? Math.ceil(clamp(props.modelValue)) : props.max\n return Array.from({ length }, (_, index) => index)\n})\n\n/** Подпись деления под текущим значением: половинки округляются вверх. */\nconst currentLabel = computed(() => {\n if (!props.texts?.length || displayValue.value <= 0) return undefined\n return props.texts[Math.ceil(displayValue.value) - 1]\n})\n\nconst valueText = computed(() => {\n const params = { value: displayValue.value, max: props.max }\n\n // Порядок слов задаёт локаль, а не конкатенация в коде.\n return currentLabel.value\n ? t('gr.rating.valueTextWithLabel', '{value} of {max}, {label}', { ...params, label: currentLabel.value })\n : t('gr.rating.valueText', '{value} of {max}', params)\n})\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.rating.label', 'Rating'))\n\nconst text = computed(() => {\n if (props.formatText) return props.formatText(displayValue.value)\n return currentLabel.value ?? String(displayValue.value)\n})\n\n/** Значение, соответствующее позиции курсора внутри символа `index`. */\nfunction valueAt(index: number, event: MouseEvent): number {\n if (!props.allowHalf) return index + 1\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n return rect.width > 0 && event.clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1\n}\n\nfunction onScaleBlur(event: FocusEvent): void {\n resetHover()\n emit('blur', event)\n}\n\nfunction commit(value: number): void {\n const next = clamp(value)\n if (next !== props.modelValue) emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction onSymbolClick(index: number, event: MouseEvent): void {\n if (!interactive.value) return\n const next = valueAt(index, event)\n const cleared = props.clearable && next === props.modelValue\n\n commit(cleared ? 0 : next)\n if (cleared) emit('clear')\n}\n\nfunction onSymbolMouseMove(index: number, event: MouseEvent): void {\n if (!interactive.value) {\n // Режим сменился под курсором — оставлять подсветку от прошлого состояния нельзя.\n resetHover()\n return\n }\n const next = valueAt(index, event)\n if (next === hoverValue.value) return\n hoverValue.value = next\n emit('hoverChange', next)\n}\n\nfunction resetHover(): void {\n if (hoverValue.value === null) return\n hoverValue.value = null\n emit('hoverChange', null)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (!interactive.value) return\n const current = clamp(props.modelValue)\n let next: number | null = null\n\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = current + step.value\n break\n case 'ArrowLeft':\n case 'ArrowDown':\n next = current - step.value\n break\n case 'Home':\n next = 0\n break\n case 'End':\n next = props.max\n break\n default:\n return\n }\n\n event.preventDefault()\n commit(next)\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-rating\n class=\"inline-flex items-center gap-2\"\n >\n <!-- Нативная форма: роль-виджет не labelable и в submit не попадает. -->\n <input\n v-if=\"name && modelValue > 0\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"String(modelValue)\"\n >\n <div\n :id=\"resolvedId\"\n data-gr-rating-scale\n data-testid=\"gr-rating-scale\"\n :class=\"ratingRootClass({ size: resolvedSize, disabled, interactive })\"\n :role=\"asSlider ? 'slider' : 'img'\"\n :tabindex=\"asSlider ? (disabled ? -1 : 0) : undefined\"\n :aria-label=\"asSlider ? resolvedAriaLabel : `${resolvedAriaLabel}: ${valueText}`\"\n :aria-valuemin=\"asSlider ? 0 : undefined\"\n :aria-valuemax=\"asSlider ? max : undefined\"\n :aria-valuenow=\"asSlider ? displayValue : undefined\"\n :aria-valuetext=\"asSlider ? valueText : undefined\"\n :aria-orientation=\"asSlider ? 'horizontal' : undefined\"\n :aria-disabled=\"asSlider && disabled ? 'true' : undefined\"\n :aria-invalid=\"asSlider && isInvalid ? 'true' : undefined\"\n :aria-describedby=\"asSlider ? describedBy : undefined\"\n :aria-required=\"asSlider && isRequired ? 'true' : undefined\"\n :aria-readonly=\"asSlider && isReadonly ? 'true' : undefined\"\n @keydown=\"onKeydown\"\n @mouseleave=\"resetHover\"\n @focus=\"emit('focus', $event)\"\n @blur=\"onScaleBlur\"\n >\n <span\n v-for=\"index in symbols\"\n :key=\"index\"\n data-gr-rating-symbol\n :data-testid=\"`gr-rating-symbol-${index}`\"\n :class=\"ratingSymbolClass(resolvedSize)\"\n @click=\"onSymbolClick(index, $event)\"\n @mousemove=\"onSymbolMouseMove(index, $event)\"\n >\n <!-- Нижний слой — «пустой» символ, поверх него обрезанный по ширине «залитый». -->\n <span class=\"block h-full w-full\" :class=\"ratingVoidClass\" aria-hidden=\"true\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"false\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n\n <span\n data-gr-rating-fill\n class=\"pointer-events-none absolute inset-y-0 left-0 overflow-hidden\"\n :class=\"ratingFillClassByTone[tone]\"\n :style=\"{ width: `${fillRatio(index) * 100}%` }\"\n aria-hidden=\"true\"\n >\n <span :class=\"ratingSymbolClass(resolvedSize)\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"true\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n </span>\n </span>\n </div>\n\n <span\n v-if=\"showText || $slots.text\"\n data-gr-rating-text\n class=\"text-[var(--gr-muted-fg)] tabular-nums\"\n :class=\"ratingTextSizeBySize[resolvedSize]\"\n >\n <slot name=\"text\" :value=\"displayValue\">{{ text }}</slot>\n </span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, type Component } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { iconClass, iconTag } from '../shared/icon'\n\nimport {\n ratingFillClassByTone,\n ratingRootClass,\n ratingSymbolClass,\n ratingTextSizeBySize,\n ratingVoidClass,\n type GrRatingSize,\n type GrRatingTone,\n} from './grRatingStyles'\n\nexport type {\n GrRatingSize,\n GrRatingTone,\n} from './grRatingStyles'\n\n/**\n * Публичный GR-примитив «Rating» — шкала оценки символами (по умолчанию звёзды).\n *\n * Интерактивный режим реализует WAI-ARIA slider pattern (`role=\"slider\"`,\n * `aria-valuemin/max/now/valuetext`, стрелки / Home / End), режим только для\n * чтения — `role=\"img\"` с текстовой подписью, чтобы скринридер озвучил оценку\n * одной фразой, а не набором элементов.\n *\n * Символ по умолчанию рисуется инлайновым SVG (звезда с `fill=\"currentColor\"`) —\n * иконочные шрифты-маски `i-lucide-star` дают только контур. Свой символ\n * задаётся пропом `icon` (Vue-компонент или класс иконки) либо слотом `#symbol`.\n */\nexport interface GrRatingProps {\n /** Текущая оценка. Дробная (`3.5`) поддерживается при `allowHalf`. */\n modelValue: number\n /** Количество символов шкалы. */\n max?: number\n size?: GrRatingSize\n /** Тон заливки; точечно перекрывается переменной `--gr-rating-color`. */\n tone?: GrRatingTone\n /** Половинчатые оценки: клик по левой половине символа даёт `.5`. */\n allowHalf?: boolean\n /** Только показ: без ввода и фокуса. */\n readonly?: boolean\n disabled?: boolean\n /** Визуальное и ARIA-состояние ошибки. */\n invalid?: boolean\n /** Обязательное поле (`aria-required`). */\n required?: boolean\n /** Повторный клик по текущей оценке сбрасывает её в `0`. */\n clearable?: boolean\n /**\n * Символ вместо встроенной звезды: Vue-компонент либо класс иконки вашей\n * UnoCSS-сборки (`'i-lucide-heart'` — тогда нужен ваш `presetIcons`,\n * см. `docs/installation.md`).\n */\n icon?: string | Component\n /** Показывать числовую подпись справа от шкалы. */\n showText?: boolean\n /** Формат подписи. По умолчанию — само значение. Сильнее `texts`. */\n formatText?: (value: number) => string\n /**\n * Подписи по делениям: «3 из 5, нормально» вместо «3 из 5». Уходят и в\n * видимый текст, и в `aria-valuetext` — ради этого рейтинг и существует.\n * Массив короче `max` оставляет верхние деления без подписи.\n */\n texts?: string[]\n /**\n * Компактный вид: рисуются только заполненные символы. Осмысленно вместе с\n * `readonly` — в списках и таблицах пять звёзд в каждой строке съедают ширину.\n */\n compact?: boolean\n ariaLabel?: string\n /** Имя для нативной формы: hidden input со значением; `0` — «не выбрано», input не рендерится. */\n name?: string\n}\n\nexport interface GrRatingEmits {\n (e: 'update:modelValue', value: number): void\n /** Оценка зафиксирована (клик / клавиша). */\n (e: 'change', value: number): void\n /** Значение под курсором; `null` — курсор ушёл со шкалы. */\n (e: 'hoverChange', value: number | null): void\n /** Оценка снята повторным кликом; только при `clearable`. */\n (e: 'clear'): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrRatingProps>(),\n {\n max: 5,\n size: undefined,\n tone: 'warning',\n allowHalf: false,\n readonly: false,\n disabled: false,\n invalid: false,\n required: false,\n clearable: false,\n icon: undefined,\n showText: false,\n formatText: undefined,\n texts: undefined,\n compact: false,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n component: 'GrRating',\n supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrRatingEmits>()\ndefineSlots<{\n /** Свой символ вместо звезды. `filled` — закрашенная половина символа. */\n symbol?: (props: { index: number, filled: boolean }) => any\n /** Подпись рядом с оценкой. */\n text?: (props: { value: number }) => any\n}>()\n\n\nconst { t } = useGranularityTranslations()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.focus()\n}\n\nfunction blur(): void {\n rootEl.value?.querySelector<HTMLElement>('[data-gr-rating-scale]')?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n/** Ввод возможен: не readonly и не disabled. */\nconst interactive = computed(() => !isReadonly.value && !isDisabled.value)\n\n/**\n * `aria-readonly`, `aria-invalid` и `aria-required` вешаются только в\n * slider-режиме: на `role=\"img\"` они не разрешены и дают critical в axe.\n *\n * Роль контрола (`slider`) сохраняется и в `disabled` — отключённый слайдер это\n * штатный ARIA-паттерн. А вот `readonly` — это уже не контрол, а картинка с\n * подписью: на `role=\"img\"` атрибуты `aria-value*`/`aria-disabled` запрещены\n * (axe: `aria-allowed-attr`), поэтому там их не выводим вовсе.\n */\nconst asSlider = computed(() => !props.readonly)\nconst step = computed(() => (props.allowHalf ? 0.5 : 1))\n\n// Значение под курсором имеет приоритет над моделью — это «предпросмотр» оценки.\nconst hoverValue = ref<number | null>(null)\nconst displayValue = computed(() => hoverValue.value ?? clamp(props.modelValue))\n\nfunction clamp(value: number): number {\n if (!Number.isFinite(value)) return 0\n return Math.min(props.max, Math.max(0, value))\n}\n\n/** Доля заливки символа с индексом `index` (0..1). */\nfunction fillRatio(index: number): number {\n return Math.min(1, Math.max(0, displayValue.value - index))\n}\n\nconst symbols = computed(() => {\n // Компактный вид показывает только заполненную часть шкалы; половинка\n // считается символом — иначе «2.5» потеряло бы половину звезды.\n const length = props.compact ? Math.ceil(clamp(props.modelValue)) : props.max\n return Array.from({ length }, (_, index) => index)\n})\n\n/** Подпись деления под текущим значением: половинки округляются вверх. */\nconst currentLabel = computed(() => {\n if (!props.texts?.length || displayValue.value <= 0) return undefined\n return props.texts[Math.ceil(displayValue.value) - 1]\n})\n\nconst valueText = computed(() => {\n const params = { value: displayValue.value, max: props.max }\n\n // Порядок слов задаёт локаль, а не конкатенация в коде.\n return currentLabel.value\n ? t('gr.rating.valueTextWithLabel', '{value} of {max}, {label}', { ...params, label: currentLabel.value })\n : t('gr.rating.valueText', '{value} of {max}', params)\n})\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.rating.label', 'Rating'))\n\nconst text = computed(() => {\n if (props.formatText) return props.formatText(displayValue.value)\n return currentLabel.value ?? String(displayValue.value)\n})\n\n/** Значение, соответствующее позиции курсора внутри символа `index`. */\nfunction valueAt(index: number, event: MouseEvent): number {\n if (!props.allowHalf) return index + 1\n const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n return rect.width > 0 && event.clientX - rect.left < rect.width / 2 ? index + 0.5 : index + 1\n}\n\nfunction onScaleBlur(event: FocusEvent): void {\n resetHover()\n emit('blur', event)\n}\n\nfunction commit(value: number): void {\n const next = clamp(value)\n if (next !== props.modelValue) emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction onSymbolClick(index: number, event: MouseEvent): void {\n if (!interactive.value) return\n const next = valueAt(index, event)\n const cleared = props.clearable && next === props.modelValue\n\n commit(cleared ? 0 : next)\n if (cleared) emit('clear')\n}\n\nfunction onSymbolMouseMove(index: number, event: MouseEvent): void {\n if (!interactive.value) {\n // Режим сменился под курсором — оставлять подсветку от прошлого состояния нельзя.\n resetHover()\n return\n }\n const next = valueAt(index, event)\n if (next === hoverValue.value) return\n hoverValue.value = next\n emit('hoverChange', next)\n}\n\nfunction resetHover(): void {\n if (hoverValue.value === null) return\n hoverValue.value = null\n emit('hoverChange', null)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (!interactive.value) return\n const current = clamp(props.modelValue)\n let next: number | null = null\n\n switch (event.key) {\n case 'ArrowRight':\n case 'ArrowUp':\n next = current + step.value\n break\n case 'ArrowLeft':\n case 'ArrowDown':\n next = current - step.value\n break\n case 'Home':\n next = 0\n break\n case 'End':\n next = props.max\n break\n default:\n return\n }\n\n event.preventDefault()\n commit(next)\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-rating\n class=\"inline-flex items-center gap-2\"\n >\n <!-- Нативная форма: роль-виджет не labelable и в submit не попадает. -->\n <input\n v-if=\"name && modelValue > 0\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"String(modelValue)\"\n >\n <div\n :id=\"resolvedId\"\n data-gr-rating-scale\n data-testid=\"gr-rating-scale\"\n :class=\"ratingRootClass({ size: resolvedSize, disabled, interactive })\"\n :role=\"asSlider ? 'slider' : 'img'\"\n :tabindex=\"asSlider ? (disabled ? -1 : 0) : undefined\"\n :aria-label=\"asSlider ? resolvedAriaLabel : `${resolvedAriaLabel}: ${valueText}`\"\n :aria-valuemin=\"asSlider ? 0 : undefined\"\n :aria-valuemax=\"asSlider ? max : undefined\"\n :aria-valuenow=\"asSlider ? displayValue : undefined\"\n :aria-valuetext=\"asSlider ? valueText : undefined\"\n :aria-orientation=\"asSlider ? 'horizontal' : undefined\"\n :aria-disabled=\"asSlider && disabled ? 'true' : undefined\"\n :aria-invalid=\"asSlider && isInvalid ? 'true' : undefined\"\n :aria-describedby=\"asSlider ? describedBy : undefined\"\n :aria-required=\"asSlider && isRequired ? 'true' : undefined\"\n :aria-readonly=\"asSlider && isReadonly ? 'true' : undefined\"\n @keydown=\"onKeydown\"\n @mouseleave=\"resetHover\"\n @focus=\"emit('focus', $event)\"\n @blur=\"onScaleBlur\"\n >\n <span\n v-for=\"index in symbols\"\n :key=\"index\"\n data-gr-rating-symbol\n :data-testid=\"`gr-rating-symbol-${index}`\"\n :class=\"ratingSymbolClass(resolvedSize)\"\n @click=\"onSymbolClick(index, $event)\"\n @mousemove=\"onSymbolMouseMove(index, $event)\"\n >\n <!-- Нижний слой — «пустой» символ, поверх него обрезанный по ширине «залитый». -->\n <span class=\"block h-full w-full\" :class=\"ratingVoidClass\" aria-hidden=\"true\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"false\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n\n <span\n data-gr-rating-fill\n class=\"pointer-events-none absolute inset-y-0 left-0 overflow-hidden\"\n :class=\"ratingFillClassByTone[tone]\"\n :style=\"{ width: `${fillRatio(index) * 100}%` }\"\n aria-hidden=\"true\"\n >\n <span :class=\"ratingSymbolClass(resolvedSize)\">\n <slot name=\"symbol\" :index=\"index\" :filled=\"true\">\n <component :is=\"iconTag(icon)\" v-if=\"icon\" class=\"block h-full w-full\" :class=\"iconClass(icon)\" />\n <svg v-else viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"block h-full w-full\">\n <path d=\"M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z\" />\n </svg>\n </slot>\n </span>\n </span>\n </span>\n </div>\n\n <span\n v-if=\"showText || $slots.text\"\n data-gr-rating-text\n class=\"text-[var(--gr-muted-fg)] tabular-nums\"\n :class=\"ratingTextSizeBySize[resolvedSize]\"\n >\n <slot name=\"text\" :value=\"displayValue\">{{ text }}</slot>\n </span>\n </div>\n</template>\n"],"mappings":"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"}
@@ -1,3 +1,3 @@
1
- import { n as grRatingSafelist, t as grRatingConfig } from "../../chunks/config-Baj7Wvx-2.js";
2
- import { t as GrRating_default } from "./chunks/GrRating-BiAVT9H7.js";
1
+ import { n as grRatingSafelist, t as grRatingConfig } from "../../chunks/config-Baj7Wvx-.js";
2
+ import { t as GrRating_default } from "./chunks/GrRating-BSEtaibx.js";
3
3
  export { GrRating_default as GrRating, GrRating_default as default, grRatingConfig, grRatingSafelist };
@@ -1,3 +1,3 @@
1
1
  import { n as GrTabPanels_default, t as GrTabPanel_default } from "./chunks/GrTabPanels-AJt1w1XC.js";
2
- import { t as grTabPanelsConfig } from "../../chunks/config-eXB87DOi2.js";
2
+ import { t as grTabPanelsConfig } from "../../chunks/config-eXB87DOi.js";
3
3
  export { GrTabPanel_default as GrTabPanel, GrTabPanels_default as GrTabPanels, GrTabPanels_default as default, grTabPanelsConfig };
@@ -1,2 +1,2 @@
1
- import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BW2uopTG.js";
1
+ import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-CYroWMjO.js";
2
2
  export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };
@@ -1,2 +1,2 @@
1
- import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-BW2uopTG.js";
1
+ import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-CYroWMjO.js";
2
2
  export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };
package/dist/i18n/all.js CHANGED
@@ -1,4 +1,4 @@
1
- import { n as ru, r as en, t as es } from "../chunks/es-Do1q9_SF.js";
1
+ import { n as ru, r as en, t as es } from "../chunks/es-DdJsxlUr.js";
2
2
  //#region src/i18n/all.ts
3
3
  var all = [
4
4
  en,
@@ -1,3 +1,3 @@
1
1
  import { t as GRANULARITY_I18N_KEY } from "../chunks/adapter-CAOxmn2G.js";
2
- import { i as GRANULARITY_I18N_BLOCK, n as ru, r as en, t as es } from "../chunks/es-Do1q9_SF.js";
2
+ import { i as GRANULARITY_I18N_BLOCK, n as ru, r as en, t as es } from "../chunks/es-DdJsxlUr.js";
3
3
  export { GRANULARITY_I18N_BLOCK, GRANULARITY_I18N_KEY, en, es, ru };