npm - @feugene/granularity - Versions diffs - 0.16.0 → 0.19.0 - Mend

@feugene/granularity 0.16.0 → 0.19.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 (425) hide show

package/dist/components/GrTimeline/chunks/{GrTimeline-CE9b3s18.js.map → GrTimeline-B-h2Yanw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GrTimeline-CE9b3s18.js","names":["$slots"],"sources":["../../../../src/components/GrTimeline/grTimelineContext.ts","../../../../src/components/GrTimeline/timelineGroups.ts","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrTimelineDensity, GrTimelineLayout, GrTimelineOrientation } from './grTimelineStyles'\n\n/*\n Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе\n * `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.\n /\nexport const GR_TIMELINE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrTimelineHeadingLevel = typeof GR_TIMELINE_HEADING_LEVELS[number]\n\n/\n Пункт читает раскладку из контейнера, а не получает её пропом: иначе\n * `layout` пришлось бы дублировать на каждом `GrTimelineItem`.\n /\nexport interface GrTimelineContext {\n layout: ComputedRef<GrTimelineLayout>\n orientation: ComputedRef<GrTimelineOrientation>\n density: ComputedRef<GrTimelineDensity>\n}\n\nexport const GR_TIMELINE_CONTEXT: InjectionKey<GrTimelineContext> = Symbol('GR_TIMELINE_CONTEXT')\n","/\n Группировка ленты событий. Без Vue — чтобы проверялась без монтирования.\n /\n\nexport type GrTimelineGroupBy<T> = string \| ((item: T, index: number) => string)\n\n/* Пункт вместе с его позицией в исходном наборе: ключи `v-for` считаются от неё. /\nexport interface GrTimelineEntry<T> {\n item: T\n index: number\n}\n\nexport interface GrTimelineGroup<T> {\n /* Ключ группы. Пустая строка — заголовка у группы нет. /\n key: string\n entries: GrTimelineEntry<T>[]\n}\n\nfunction keyOf<T>(item: T, index: number, groupBy: GrTimelineGroupBy<T>): string {\n if (typeof groupBy === 'function')\n return String(groupBy(item, index) ?? '')\n\n const value = (item as Record<string, unknown> \| null \| undefined)?.[groupBy]\n\n // `undefined` в поле — это «группы нет», а не группа с надписью «undefined».\n return value == null ? '' : String(value)\n}\n\n/\n Режет набор на группы, не меняя порядок: лента хронологична, и\n * пересортировать её компонент не вправе. Порядок групп — порядок первого\n * вхождения ключа; разорванная группа (`A B A`) собирается в одну.\n \n Без `groupBy` — одна безымянная группа: плоская лента остаётся частным\n * случаем, и второй ветки рендера у компонента не появляется.\n /\nexport function groupTimelineItems<T>(\n items: readonly T[],\n groupBy?: GrTimelineGroupBy<T>,\n): GrTimelineGroup<T>[] {\n const entries = items.map((item, index) => ({ item, index }))\n\n if (groupBy === undefined)\n return entries.length === 0 ? [] : [{ key: '', entries }]\n\n const byKey = new Map<string, GrTimelineGroup<T>>()\n\n for (const entry of entries) {\n const key = keyOf(entry.item, entry.index, groupBy)\n const group = byKey.get(key)\n\n if (group)\n group.entries.push(entry)\n else\n byKey.set(key, { key, entries: [entry] })\n }\n\n return [...byKey.values()]\n}\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n emptyClass,\n groupTitleClass,\n loadingRowClass,\n type GrTimelineDensity,\n type GrTimelineLayout,\n type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n GrTimelineDensity,\n GrTimelineLayout,\n GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n /\n Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n * состав набора, то есть может его группировать.\n /\n items?: TItem[]\n /* Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. /\n itemKey?: string \| ((item: TItem, index: number) => string \| number)\n /* Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. /\n groupBy?: GrTimelineGroupBy<TItem>\n /* Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. /\n groupHeadingLevel?: GrTimelineHeadingLevel\n /* Раскладка: одна ось, колонка времени слева или чередование сторон. /\n layout?: GrTimelineLayout\n /* Направление оси. Горизонтальная лента — скроллер. /\n orientation?: GrTimelineOrientation\n /* Плотность вертикальных отступов пункта. /\n density?: GrTimelineDensity\n /* Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. /\n loading?: boolean\n /* Сколько строк-заглушек показать при `loading`. /\n loadingRows?: number\n /\n Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n * нужен там, где потребитель знает лучше.\n /\n empty?: boolean\n /* Текст пустого состояния. Слот `#empty` сильнее. /\n emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n items: undefined,\n itemKey: undefined,\n groupBy: undefined,\n // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n groupHeadingLevel: undefined,\n layout: undefined,\n orientation: undefined,\n density: undefined,\n loading: false,\n loadingRows: 3,\n empty: undefined,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /* Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. /\n default?: () => any\n /* Пункт в data-режиме. /\n item?: (props: { item: T, index: number }) => any\n /* Заголовок группы. По умолчанию — сам ключ. /\n group?: (props: { group: string, items: T[] }) => any\n /* Содержимое пустого состояния вместо текста по умолчанию. /\n empty?: () => any\n /* Заглушки загрузки вместо строк по умолчанию. /\n loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/\n Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n /\nconst layout = computed<GrTimelineLayout>(() => (\n orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/* Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. /\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n if (dataMode.value) return props.items!.length === 0\n\n // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n // и ни то ни другое пунктом ленты не является.\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\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\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n watch(\n () => [dataMode.value, Boolean(slots.item)] as const,\n ([hasItems, hasSlot]) => {\n if (hasItems && !hasSlot) {\n console.warn(\n '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [dataMode.value, props.groupBy !== undefined] as const,\n ([hasItems, hasGroupBy]) => {\n if (hasGroupBy && !hasItems) {\n console.warn(\n '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [orientation.value, requestedLayout.value] as const,\n ([axis, requested]) => {\n if (axis === 'horizontal' && requested !== 'stacked') {\n console.warn(\n `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n + 'в горизонтальной ленте она игнорируется.',\n )\n }\n },\n { immediate: true },\n )\n}\n</script>\n\n<template>\n <div\n data-gr-timeline\n :data-layout=\"layout\"\n :data-orientation=\"orientation\"\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-timeline-loading-row\n :class=\"loadingRowClass\"\n >\n <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n <GrSkeleton />\n </div>\n </slot>\n </template>\n\n <div\n v-else-if=\"isEmpty\"\n data-gr-timeline-empty\n :class=\"emptyClass\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <template v-else-if=\"grouped\">\n <!--\n Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n -->\n <section\n v-for=\"group in groups\"\n :key=\"group.key\"\n data-gr-timeline-group\n >\n <div\n v-if=\"group.key\"\n data-gr-timeline-group-header\n >\n <div data-gr-timeline-rail aria-hidden=\"true\">\n <span data-gr-timeline-line />\n </div>\n\n <component\n :is=\"headingTag\"\n data-gr-timeline-group-title\n :class=\"groupTitleClass\"\n >\n <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n {{ group.key }}\n </slot>\n </component>\n </div>\n\n <ol\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template\n v-for=\"entry in group.entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </ol>\n </section>\n </template>\n\n <ol\n v-else\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template v-if=\"dataMode\">\n <template\n v-for=\"entry in entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </template>\n\n <slot v-else />\n </ol>\n </div>\n</template>\n\n<style>\n/\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n /\n\n[data-gr-timeline] {\n --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n display: grid;\n grid-template-columns: var(--gr-timeline-columns);\n column-gap: var(--gr-timeline-gap, 0.75rem);\n align-items: start;\n}\n\n[data-gr-timeline-aside] {\n text-align: end;\n}\n\n/\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n /\n[data-gr-timeline-rail] {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n flex: none;\n}\n\n[data-gr-timeline-marker] {\n box-sizing: border-box;\n width: var(--gr-timeline-marker-size, 10px);\n height: var(--gr-timeline-marker-size, 10px);\n border-width: var(--gr-timeline-marker-ring, 2px);\n border-style: solid;\n border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n flex: 1 1 auto;\n width: var(--gr-timeline-axis-width, 2px);\n min-height: var(--gr-timeline-line-min, 0.75rem);\n margin-top: 0.25rem;\n / Ровно на столько следующая точка отступает от верха своей строки: без этого\n отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. /\n margin-bottom: calc(-1 var(--gr-timeline-marker-top, 0.35rem));\n background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/\n Пунктиром идёт участок, ведущий к незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n /\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to bottom,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n\n/* Хвост после последнего события — линия в никуда. /\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n/ Между группами ось не рвётся: разрыв читался бы как две разные ленты. /\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n padding-top: 0;\n}\n\n/ Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. /\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n margin-top: 0;\n}\n\n/ Над первым заголовком оси ещё нет — линия висела бы в воздухе. /\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n grid-column: 1;\n grid-row: 1;\n text-align: end;\n}\n\n/ Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. /\n@media (max-width: 640px) {\n [data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: auto 1fr;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 1;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 2;\n text-align: start;\n }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n grid-template-columns: 1fr;\n min-width: var(--gr-timeline-item-min-width, 12rem);\n padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n flex-direction: row;\n align-items: center;\n align-self: auto;\n padding-top: 0;\n padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n width: auto;\n height: var(--gr-timeline-axis-width, 2px);\n min-width: var(--gr-timeline-line-min, 0.75rem);\n min-height: 0;\n margin-top: 0;\n margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-image: repeating-linear-gradient(\n to right,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n emptyClass,\n groupTitleClass,\n loadingRowClass,\n type GrTimelineDensity,\n type GrTimelineLayout,\n type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n GrTimelineDensity,\n GrTimelineLayout,\n GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n /*\n Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n * состав набора, то есть может его группировать.\n /\n items?: TItem[]\n /* Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. /\n itemKey?: string \| ((item: TItem, index: number) => string \| number)\n /* Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. /\n groupBy?: GrTimelineGroupBy<TItem>\n /* Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. /\n groupHeadingLevel?: GrTimelineHeadingLevel\n /* Раскладка: одна ось, колонка времени слева или чередование сторон. /\n layout?: GrTimelineLayout\n /* Направление оси. Горизонтальная лента — скроллер. /\n orientation?: GrTimelineOrientation\n /* Плотность вертикальных отступов пункта. /\n density?: GrTimelineDensity\n /* Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. /\n loading?: boolean\n /* Сколько строк-заглушек показать при `loading`. /\n loadingRows?: number\n /\n Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n * нужен там, где потребитель знает лучше.\n /\n empty?: boolean\n /* Текст пустого состояния. Слот `#empty` сильнее. /\n emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n items: undefined,\n itemKey: undefined,\n groupBy: undefined,\n // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n groupHeadingLevel: undefined,\n layout: undefined,\n orientation: undefined,\n density: undefined,\n loading: false,\n loadingRows: 3,\n empty: undefined,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /* Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. /\n default?: () => any\n /* Пункт в data-режиме. /\n item?: (props: { item: T, index: number }) => any\n /* Заголовок группы. По умолчанию — сам ключ. /\n group?: (props: { group: string, items: T[] }) => any\n /* Содержимое пустого состояния вместо текста по умолчанию. /\n empty?: () => any\n /* Заглушки загрузки вместо строк по умолчанию. /\n loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/\n Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n /\nconst layout = computed<GrTimelineLayout>(() => (\n orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/* Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. /\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n if (dataMode.value) return props.items!.length === 0\n\n // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n // и ни то ни другое пунктом ленты не является.\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\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\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n watch(\n () => [dataMode.value, Boolean(slots.item)] as const,\n ([hasItems, hasSlot]) => {\n if (hasItems && !hasSlot) {\n console.warn(\n '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [dataMode.value, props.groupBy !== undefined] as const,\n ([hasItems, hasGroupBy]) => {\n if (hasGroupBy && !hasItems) {\n console.warn(\n '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [orientation.value, requestedLayout.value] as const,\n ([axis, requested]) => {\n if (axis === 'horizontal' && requested !== 'stacked') {\n console.warn(\n `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n + 'в горизонтальной ленте она игнорируется.',\n )\n }\n },\n { immediate: true },\n )\n}\n</script>\n\n<template>\n <div\n data-gr-timeline\n :data-layout=\"layout\"\n :data-orientation=\"orientation\"\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-timeline-loading-row\n :class=\"loadingRowClass\"\n >\n <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n <GrSkeleton />\n </div>\n </slot>\n </template>\n\n <div\n v-else-if=\"isEmpty\"\n data-gr-timeline-empty\n :class=\"emptyClass\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <template v-else-if=\"grouped\">\n <!--\n Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n -->\n <section\n v-for=\"group in groups\"\n :key=\"group.key\"\n data-gr-timeline-group\n >\n <div\n v-if=\"group.key\"\n data-gr-timeline-group-header\n >\n <div data-gr-timeline-rail aria-hidden=\"true\">\n <span data-gr-timeline-line />\n </div>\n\n <component\n :is=\"headingTag\"\n data-gr-timeline-group-title\n :class=\"groupTitleClass\"\n >\n <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n {{ group.key }}\n </slot>\n </component>\n </div>\n\n <ol\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template\n v-for=\"entry in group.entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </ol>\n </section>\n </template>\n\n <ol\n v-else\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template v-if=\"dataMode\">\n <template\n v-for=\"entry in entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </template>\n\n <slot v-else />\n </ol>\n </div>\n</template>\n\n<style>\n/\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n /\n\n[data-gr-timeline] {\n --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n display: grid;\n grid-template-columns: var(--gr-timeline-columns);\n column-gap: var(--gr-timeline-gap, 0.75rem);\n align-items: start;\n}\n\n[data-gr-timeline-aside] {\n text-align: end;\n}\n\n/\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n /\n[data-gr-timeline-rail] {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n flex: none;\n}\n\n[data-gr-timeline-marker] {\n box-sizing: border-box;\n width: var(--gr-timeline-marker-size, 10px);\n height: var(--gr-timeline-marker-size, 10px);\n border-width: var(--gr-timeline-marker-ring, 2px);\n border-style: solid;\n border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n flex: 1 1 auto;\n width: var(--gr-timeline-axis-width, 2px);\n min-height: var(--gr-timeline-line-min, 0.75rem);\n margin-top: 0.25rem;\n / Ровно на столько следующая точка отступает от верха своей строки: без этого\n отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. /\n margin-bottom: calc(-1 var(--gr-timeline-marker-top, 0.35rem));\n background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/\n Пунктиром идёт участок, ведущий к незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n /\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to bottom,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n\n/* Хвост после последнего события — линия в никуда. /\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n/ Между группами ось не рвётся: разрыв читался бы как две разные ленты. /\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n padding-top: 0;\n}\n\n/ Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. /\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n margin-top: 0;\n}\n\n/ Над первым заголовком оси ещё нет — линия висела бы в воздухе. /\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n grid-column: 1;\n grid-row: 1;\n text-align: end;\n}\n\n/ Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. /\n@media (max-width: 640px) {\n [data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: auto 1fr;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 1;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 2;\n text-align: start;\n }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n grid-template-columns: 1fr;\n min-width: var(--gr-timeline-item-min-width, 12rem);\n padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n flex-direction: row;\n align-items: center;\n align-self: auto;\n padding-top: 0;\n padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n width: auto;\n height: var(--gr-timeline-axis-width, 2px);\n min-width: var(--gr-timeline-line-min, 0.75rem);\n min-height: 0;\n margin-top: 0;\n margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-image: repeating-linear-gradient(\n to right,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n descriptionClass,\n grTimelineDensityClass,\n grTimelineMarkerClass,\n timeClass,\n titleClass,\n type GrTimelineMarkerVariant,\n type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n /** Метка времени. Слот `#time` сильнее. /\n time?: string\n /* Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. /\n datetime?: string\n /* Заголовок события. Слот `#title` сильнее. /\n title?: string\n /* Пояснение под заголовком. Слот `#description` сильнее. /\n description?: string\n /* Цвет маркера из палитры пакета. /\n tone?: GrTimelineTone\n /* Заполненная точка — событие случилось, полая — запланировано. /\n variant?: GrTimelineMarkerVariant\n /\n Событие ещё не произошло: точка полая, а отрезок оси после неё —\n * пунктирный. Перебивает `variant`.\n /\n pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n time: undefined,\n datetime: undefined,\n title: undefined,\n description: undefined,\n tone: 'neutral',\n variant: 'filled',\n pending: false,\n})\n\ndefineSlots<{\n /* Содержимое события под заголовком и описанием. /\n default?: () => any\n /* Маркер вместо точки: иконка статуса, аватар автора, номер шага. /\n marker?: () => any\n /* Метка времени. /\n time?: () => any\n /* Заголовок события. /\n title?: () => any\n /* Пояснение под заголовком. /\n description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/\n Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n /\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n props.tone,\n props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time \|\| !!props.time)\nconst hasTitle = computed(() => !!slots.title \|\| !!props.title)\nconst hasDescription = computed(() => !!slots.description \|\| !!props.description)\n\n/* В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. /\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n <li\n data-gr-timeline-item\n :data-tone=\"tone\"\n :data-pending=\"pending ? '' : undefined\"\n >\n <div\n v-if=\"timeInAside\"\n data-gr-timeline-aside\n >\n <time\n v-if=\"hasTime\"\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n </div>\n\n <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n <div\n data-gr-timeline-rail\n aria-hidden=\"true\"\n >\n <slot name=\"marker\">\n <span data-gr-timeline-marker :class=\"markerClass\" />\n </slot>\n <span data-gr-timeline-line />\n </div>\n\n <!--\n Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n бы, не доходя до следующей точки.\n -->\n <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n <time\n v-if=\"hasTime && !timeInAside\"\n data-gr-timeline-time\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n\n <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n <slot name=\"title\">\n{{ title }}\n</slot>\n </div>\n\n <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n <slot name=\"description\">\n{{ description }}\n</slot>\n </div>\n\n <div v-if=\"$slots.default\" data-gr-timeline-body>\n <slot />\n </div>\n </div>\n </li>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n descriptionClass,\n grTimelineDensityClass,\n grTimelineMarkerClass,\n timeClass,\n titleClass,\n type GrTimelineMarkerVariant,\n type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n /* Метка времени. Слот `#time` сильнее. /\n time?: string\n /* Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. /\n datetime?: string\n /* Заголовок события. Слот `#title` сильнее. /\n title?: string\n /* Пояснение под заголовком. Слот `#description` сильнее. /\n description?: string\n /* Цвет маркера из палитры пакета. /\n tone?: GrTimelineTone\n /* Заполненная точка — событие случилось, полая — запланировано. /\n variant?: GrTimelineMarkerVariant\n /\n Событие ещё не произошло: точка полая, а отрезок оси после неё —\n * пунктирный. Перебивает `variant`.\n /\n pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n time: undefined,\n datetime: undefined,\n title: undefined,\n description: undefined,\n tone: 'neutral',\n variant: 'filled',\n pending: false,\n})\n\ndefineSlots<{\n /* Содержимое события под заголовком и описанием. /\n default?: () => any\n /* Маркер вместо точки: иконка статуса, аватар автора, номер шага. /\n marker?: () => any\n /* Метка времени. /\n time?: () => any\n /* Заголовок события. /\n title?: () => any\n /* Пояснение под заголовком. /\n description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/\n Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n /\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n props.tone,\n props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time \|\| !!props.time)\nconst hasTitle = computed(() => !!slots.title \|\| !!props.title)\nconst hasDescription = computed(() => !!slots.description \|\| !!props.description)\n\n/* В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n <li\n data-gr-timeline-item\n :data-tone=\"tone\"\n :data-pending=\"pending ? '' : undefined\"\n >\n <div\n v-if=\"timeInAside\"\n data-gr-timeline-aside\n >\n <time\n v-if=\"hasTime\"\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n </div>\n\n <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n <div\n data-gr-timeline-rail\n aria-hidden=\"true\"\n >\n <slot name=\"marker\">\n <span data-gr-timeline-marker :class=\"markerClass\" />\n </slot>\n <span data-gr-timeline-line />\n </div>\n\n <!--\n Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n бы, не доходя до следующей точки.\n -->\n <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n <time\n v-if=\"hasTime && !timeInAside\"\n data-gr-timeline-time\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n\n <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n <slot name=\"title\">\n{{ title }}\n</slot>\n </div>\n\n <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n <slot name=\"description\">\n{{ description }}\n</slot>\n </div>\n\n <div v-if=\"$slots.default\" data-gr-timeline-body>\n <slot />\n </div>\n </div>\n </li>\n</template>\n"],"mappings":"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"}
1	+ {"version":3,"file":"GrTimeline-B-h2Yanw.js","names":["$slots"],"sources":["../../../../src/components/GrTimeline/grTimelineContext.ts","../../../../src/components/GrTimeline/timelineGroups.ts","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrTimelineDensity, GrTimelineLayout, GrTimelineOrientation } from './grTimelineStyles'\n\n/*\n Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе\n * `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.\n /\nexport const GR_TIMELINE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrTimelineHeadingLevel = typeof GR_TIMELINE_HEADING_LEVELS[number]\n\n/\n Пункт читает раскладку из контейнера, а не получает её пропом: иначе\n * `layout` пришлось бы дублировать на каждом `GrTimelineItem`.\n /\nexport interface GrTimelineContext {\n layout: ComputedRef<GrTimelineLayout>\n orientation: ComputedRef<GrTimelineOrientation>\n density: ComputedRef<GrTimelineDensity>\n}\n\nexport const GR_TIMELINE_CONTEXT: InjectionKey<GrTimelineContext> = Symbol('GR_TIMELINE_CONTEXT')\n","/\n Группировка ленты событий. Без Vue — чтобы проверялась без монтирования.\n /\n\nexport type GrTimelineGroupBy<T> = string \| ((item: T, index: number) => string)\n\n/* Пункт вместе с его позицией в исходном наборе: ключи `v-for` считаются от неё. /\nexport interface GrTimelineEntry<T> {\n item: T\n index: number\n}\n\nexport interface GrTimelineGroup<T> {\n /* Ключ группы. Пустая строка — заголовка у группы нет. /\n key: string\n entries: GrTimelineEntry<T>[]\n}\n\nfunction keyOf<T>(item: T, index: number, groupBy: GrTimelineGroupBy<T>): string {\n if (typeof groupBy === 'function')\n return String(groupBy(item, index) ?? '')\n\n const value = (item as Record<string, unknown> \| null \| undefined)?.[groupBy]\n\n // `undefined` в поле — это «группы нет», а не группа с надписью «undefined».\n return value == null ? '' : String(value)\n}\n\n/\n Режет набор на группы, не меняя порядок: лента хронологична, и\n * пересортировать её компонент не вправе. Порядок групп — порядок первого\n * вхождения ключа; разорванная группа (`A B A`) собирается в одну.\n \n Без `groupBy` — одна безымянная группа: плоская лента остаётся частным\n * случаем, и второй ветки рендера у компонента не появляется.\n /\nexport function groupTimelineItems<T>(\n items: readonly T[],\n groupBy?: GrTimelineGroupBy<T>,\n): GrTimelineGroup<T>[] {\n const entries = items.map((item, index) => ({ item, index }))\n\n if (groupBy === undefined)\n return entries.length === 0 ? [] : [{ key: '', entries }]\n\n const byKey = new Map<string, GrTimelineGroup<T>>()\n\n for (const entry of entries) {\n const key = keyOf(entry.item, entry.index, groupBy)\n const group = byKey.get(key)\n\n if (group)\n group.entries.push(entry)\n else\n byKey.set(key, { key, entries: [entry] })\n }\n\n return [...byKey.values()]\n}\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n emptyClass,\n groupTitleClass,\n loadingRowClass,\n type GrTimelineDensity,\n type GrTimelineLayout,\n type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n GrTimelineDensity,\n GrTimelineLayout,\n GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n /\n Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n * состав набора, то есть может его группировать.\n /\n items?: TItem[]\n /* Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. /\n itemKey?: string \| ((item: TItem, index: number) => string \| number)\n /* Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. /\n groupBy?: GrTimelineGroupBy<TItem>\n /* Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. /\n groupHeadingLevel?: GrTimelineHeadingLevel\n /* Раскладка: одна ось, колонка времени слева или чередование сторон. /\n layout?: GrTimelineLayout\n /* Направление оси. Горизонтальная лента — скроллер. /\n orientation?: GrTimelineOrientation\n /* Плотность вертикальных отступов пункта. /\n density?: GrTimelineDensity\n /* Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. /\n loading?: boolean\n /* Сколько строк-заглушек показать при `loading`. /\n loadingRows?: number\n /\n Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n * нужен там, где потребитель знает лучше.\n /\n empty?: boolean\n /* Текст пустого состояния. Слот `#empty` сильнее. /\n emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n items: undefined,\n itemKey: undefined,\n groupBy: undefined,\n // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n groupHeadingLevel: undefined,\n layout: undefined,\n orientation: undefined,\n density: undefined,\n loading: false,\n loadingRows: 3,\n empty: undefined,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /* Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. /\n default?: () => any\n /* Пункт в data-режиме. /\n item?: (props: { item: T, index: number }) => any\n /* Заголовок группы. По умолчанию — сам ключ. /\n group?: (props: { group: string, items: T[] }) => any\n /* Содержимое пустого состояния вместо текста по умолчанию. /\n empty?: () => any\n /* Заглушки загрузки вместо строк по умолчанию. /\n loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/\n Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n /\nconst layout = computed<GrTimelineLayout>(() => (\n orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/* Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. /\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n if (dataMode.value) return props.items!.length === 0\n\n // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n // и ни то ни другое пунктом ленты не является.\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\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\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n watch(\n () => [dataMode.value, Boolean(slots.item)] as const,\n ([hasItems, hasSlot]) => {\n if (hasItems && !hasSlot) {\n console.warn(\n '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [dataMode.value, props.groupBy !== undefined] as const,\n ([hasItems, hasGroupBy]) => {\n if (hasGroupBy && !hasItems) {\n console.warn(\n '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [orientation.value, requestedLayout.value] as const,\n ([axis, requested]) => {\n if (axis === 'horizontal' && requested !== 'stacked') {\n console.warn(\n `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n + 'в горизонтальной ленте она игнорируется.',\n )\n }\n },\n { immediate: true },\n )\n}\n</script>\n\n<template>\n <div\n data-gr-timeline\n :data-layout=\"layout\"\n :data-orientation=\"orientation\"\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-timeline-loading-row\n :class=\"loadingRowClass\"\n >\n <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n <GrSkeleton />\n </div>\n </slot>\n </template>\n\n <div\n v-else-if=\"isEmpty\"\n data-gr-timeline-empty\n :class=\"emptyClass\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <template v-else-if=\"grouped\">\n <!--\n Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n -->\n <section\n v-for=\"group in groups\"\n :key=\"group.key\"\n data-gr-timeline-group\n >\n <div\n v-if=\"group.key\"\n data-gr-timeline-group-header\n >\n <div data-gr-timeline-rail aria-hidden=\"true\">\n <span data-gr-timeline-line />\n </div>\n\n <component\n :is=\"headingTag\"\n data-gr-timeline-group-title\n :class=\"groupTitleClass\"\n >\n <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n {{ group.key }}\n </slot>\n </component>\n </div>\n\n <ol\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template\n v-for=\"entry in group.entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </ol>\n </section>\n </template>\n\n <ol\n v-else\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template v-if=\"dataMode\">\n <template\n v-for=\"entry in entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </template>\n\n <slot v-else />\n </ol>\n </div>\n</template>\n\n<style>\n/\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n /\n\n[data-gr-timeline] {\n --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n display: grid;\n grid-template-columns: var(--gr-timeline-columns);\n column-gap: var(--gr-timeline-gap, 0.75rem);\n align-items: start;\n}\n\n[data-gr-timeline-aside] {\n text-align: end;\n}\n\n/\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n /\n[data-gr-timeline-rail] {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n flex: none;\n}\n\n[data-gr-timeline-marker] {\n box-sizing: border-box;\n width: var(--gr-timeline-marker-size, 10px);\n height: var(--gr-timeline-marker-size, 10px);\n border-width: var(--gr-timeline-marker-ring, 2px);\n border-style: solid;\n border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n flex: 1 1 auto;\n width: var(--gr-timeline-axis-width, 2px);\n min-height: var(--gr-timeline-line-min, 0.75rem);\n margin-top: 0.25rem;\n / Ровно на столько следующая точка отступает от верха своей строки: без этого\n отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. /\n margin-bottom: calc(-1 var(--gr-timeline-marker-top, 0.35rem));\n background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/\n Пунктиром идёт участок, ведущий к незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n /\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to bottom,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n\n/* Хвост после последнего события — линия в никуда. /\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n/ Между группами ось не рвётся: разрыв читался бы как две разные ленты. /\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n padding-top: 0;\n}\n\n/ Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. /\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n margin-top: 0;\n}\n\n/ Над первым заголовком оси ещё нет — линия висела бы в воздухе. /\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n grid-column: 1;\n grid-row: 1;\n text-align: end;\n}\n\n/ Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. /\n@media (max-width: 640px) {\n [data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: auto 1fr;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 1;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 2;\n text-align: start;\n }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n grid-template-columns: 1fr;\n min-width: var(--gr-timeline-item-min-width, 12rem);\n padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n flex-direction: row;\n align-items: center;\n align-self: auto;\n padding-top: 0;\n padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n width: auto;\n height: var(--gr-timeline-axis-width, 2px);\n min-width: var(--gr-timeline-line-min, 0.75rem);\n min-height: 0;\n margin-top: 0;\n margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-image: repeating-linear-gradient(\n to right,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n emptyClass,\n groupTitleClass,\n loadingRowClass,\n type GrTimelineDensity,\n type GrTimelineLayout,\n type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n GrTimelineDensity,\n GrTimelineLayout,\n GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n /*\n Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n * состав набора, то есть может его группировать.\n /\n items?: TItem[]\n /* Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. /\n itemKey?: string \| ((item: TItem, index: number) => string \| number)\n /* Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. /\n groupBy?: GrTimelineGroupBy<TItem>\n /* Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. /\n groupHeadingLevel?: GrTimelineHeadingLevel\n /* Раскладка: одна ось, колонка времени слева или чередование сторон. /\n layout?: GrTimelineLayout\n /* Направление оси. Горизонтальная лента — скроллер. /\n orientation?: GrTimelineOrientation\n /* Плотность вертикальных отступов пункта. /\n density?: GrTimelineDensity\n /* Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. /\n loading?: boolean\n /* Сколько строк-заглушек показать при `loading`. /\n loadingRows?: number\n /\n Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n * нужен там, где потребитель знает лучше.\n /\n empty?: boolean\n /* Текст пустого состояния. Слот `#empty` сильнее. /\n emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n items: undefined,\n itemKey: undefined,\n groupBy: undefined,\n // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n groupHeadingLevel: undefined,\n layout: undefined,\n orientation: undefined,\n density: undefined,\n loading: false,\n loadingRows: 3,\n empty: undefined,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /* Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. /\n default?: () => any\n /* Пункт в data-режиме. /\n item?: (props: { item: T, index: number }) => any\n /* Заголовок группы. По умолчанию — сам ключ. /\n group?: (props: { group: string, items: T[] }) => any\n /* Содержимое пустого состояния вместо текста по умолчанию. /\n empty?: () => any\n /* Заглушки загрузки вместо строк по умолчанию. /\n loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/\n Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n /\nconst layout = computed<GrTimelineLayout>(() => (\n orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/* Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. /\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n if (dataMode.value) return props.items!.length === 0\n\n // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n // и ни то ни другое пунктом ленты не является.\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\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\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n watch(\n () => [dataMode.value, Boolean(slots.item)] as const,\n ([hasItems, hasSlot]) => {\n if (hasItems && !hasSlot) {\n console.warn(\n '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [dataMode.value, props.groupBy !== undefined] as const,\n ([hasItems, hasGroupBy]) => {\n if (hasGroupBy && !hasItems) {\n console.warn(\n '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n )\n }\n },\n { immediate: true },\n )\n\n watch(\n () => [orientation.value, requestedLayout.value] as const,\n ([axis, requested]) => {\n if (axis === 'horizontal' && requested !== 'stacked') {\n console.warn(\n `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n + 'в горизонтальной ленте она игнорируется.',\n )\n }\n },\n { immediate: true },\n )\n}\n</script>\n\n<template>\n <div\n data-gr-timeline\n :data-layout=\"layout\"\n :data-orientation=\"orientation\"\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-timeline-loading-row\n :class=\"loadingRowClass\"\n >\n <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n <GrSkeleton />\n </div>\n </slot>\n </template>\n\n <div\n v-else-if=\"isEmpty\"\n data-gr-timeline-empty\n :class=\"emptyClass\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <template v-else-if=\"grouped\">\n <!--\n Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n -->\n <section\n v-for=\"group in groups\"\n :key=\"group.key\"\n data-gr-timeline-group\n >\n <div\n v-if=\"group.key\"\n data-gr-timeline-group-header\n >\n <div data-gr-timeline-rail aria-hidden=\"true\">\n <span data-gr-timeline-line />\n </div>\n\n <component\n :is=\"headingTag\"\n data-gr-timeline-group-title\n :class=\"groupTitleClass\"\n >\n <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n {{ group.key }}\n </slot>\n </component>\n </div>\n\n <ol\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template\n v-for=\"entry in group.entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </ol>\n </section>\n </template>\n\n <ol\n v-else\n data-gr-timeline-list\n :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n >\n <template v-if=\"dataMode\">\n <template\n v-for=\"entry in entries\"\n :key=\"keyOf(entry.item, entry.index)\"\n >\n <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n </template>\n </template>\n\n <slot v-else />\n </ol>\n </div>\n</template>\n\n<style>\n/\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n /\n\n[data-gr-timeline] {\n --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n display: grid;\n grid-template-columns: var(--gr-timeline-columns);\n column-gap: var(--gr-timeline-gap, 0.75rem);\n align-items: start;\n}\n\n[data-gr-timeline-aside] {\n text-align: end;\n}\n\n/\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n /\n[data-gr-timeline-rail] {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n flex: none;\n}\n\n[data-gr-timeline-marker] {\n box-sizing: border-box;\n width: var(--gr-timeline-marker-size, 10px);\n height: var(--gr-timeline-marker-size, 10px);\n border-width: var(--gr-timeline-marker-ring, 2px);\n border-style: solid;\n border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n flex: 1 1 auto;\n width: var(--gr-timeline-axis-width, 2px);\n min-height: var(--gr-timeline-line-min, 0.75rem);\n margin-top: 0.25rem;\n / Ровно на столько следующая точка отступает от верха своей строки: без этого\n отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. /\n margin-bottom: calc(-1 var(--gr-timeline-marker-top, 0.35rem));\n background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/\n Пунктиром идёт участок, ведущий к незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n /\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-color: transparent;\n background-image: repeating-linear-gradient(\n to bottom,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n\n/* Хвост после последнего события — линия в никуда. /\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n/ Между группами ось не рвётся: разрыв читался бы как две разные ленты. /\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n padding-top: 0;\n}\n\n/ Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. /\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n margin-top: 0;\n}\n\n/ Над первым заголовком оси ещё нет — линия висела бы в воздухе. /\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n grid-column: 1;\n grid-row: 1;\n text-align: end;\n}\n\n/ Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. /\n@media (max-width: 640px) {\n [data-gr-timeline][data-layout='alternate'] {\n --gr-timeline-columns: auto 1fr;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n grid-column: 1;\n }\n\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n grid-column: 2;\n text-align: start;\n }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n display: flex;\n flex-direction: row;\n overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n grid-template-columns: 1fr;\n min-width: var(--gr-timeline-item-min-width, 12rem);\n padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n flex-direction: row;\n align-items: center;\n align-self: auto;\n padding-top: 0;\n padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n width: auto;\n height: var(--gr-timeline-axis-width, 2px);\n min-width: var(--gr-timeline-line-min, 0.75rem);\n min-height: 0;\n margin-top: 0;\n margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n background-image: repeating-linear-gradient(\n to right,\n var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) 2)\n );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n descriptionClass,\n grTimelineDensityClass,\n grTimelineMarkerClass,\n timeClass,\n titleClass,\n type GrTimelineMarkerVariant,\n type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n /** Метка времени. Слот `#time` сильнее. /\n time?: string\n /* Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. /\n datetime?: string\n /* Заголовок события. Слот `#title` сильнее. /\n title?: string\n /* Пояснение под заголовком. Слот `#description` сильнее. /\n description?: string\n /* Цвет маркера из палитры пакета. /\n tone?: GrTimelineTone\n /* Заполненная точка — событие случилось, полая — запланировано. /\n variant?: GrTimelineMarkerVariant\n /\n Событие ещё не произошло: точка полая, а отрезок оси после неё —\n * пунктирный. Перебивает `variant`.\n /\n pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n time: undefined,\n datetime: undefined,\n title: undefined,\n description: undefined,\n tone: 'neutral',\n variant: 'filled',\n pending: false,\n})\n\ndefineSlots<{\n /* Содержимое события под заголовком и описанием. /\n default?: () => any\n /* Маркер вместо точки: иконка статуса, аватар автора, номер шага. /\n marker?: () => any\n /* Метка времени. /\n time?: () => any\n /* Заголовок события. /\n title?: () => any\n /* Пояснение под заголовком. /\n description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/\n Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n /\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n props.tone,\n props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time \|\| !!props.time)\nconst hasTitle = computed(() => !!slots.title \|\| !!props.title)\nconst hasDescription = computed(() => !!slots.description \|\| !!props.description)\n\n/* В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. /\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n <li\n data-gr-timeline-item\n :data-tone=\"tone\"\n :data-pending=\"pending ? '' : undefined\"\n >\n <div\n v-if=\"timeInAside\"\n data-gr-timeline-aside\n >\n <time\n v-if=\"hasTime\"\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n </div>\n\n <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n <div\n data-gr-timeline-rail\n aria-hidden=\"true\"\n >\n <slot name=\"marker\">\n <span data-gr-timeline-marker :class=\"markerClass\" />\n </slot>\n <span data-gr-timeline-line />\n </div>\n\n <!--\n Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n бы, не доходя до следующей точки.\n -->\n <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n <time\n v-if=\"hasTime && !timeInAside\"\n data-gr-timeline-time\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n\n <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n <slot name=\"title\">\n{{ title }}\n</slot>\n </div>\n\n <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n <slot name=\"description\">\n{{ description }}\n</slot>\n </div>\n\n <div v-if=\"$slots.default\" data-gr-timeline-body>\n <slot />\n </div>\n </div>\n </li>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n descriptionClass,\n grTimelineDensityClass,\n grTimelineMarkerClass,\n timeClass,\n titleClass,\n type GrTimelineMarkerVariant,\n type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n /* Метка времени. Слот `#time` сильнее. /\n time?: string\n /* Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. /\n datetime?: string\n /* Заголовок события. Слот `#title` сильнее. /\n title?: string\n /* Пояснение под заголовком. Слот `#description` сильнее. /\n description?: string\n /* Цвет маркера из палитры пакета. /\n tone?: GrTimelineTone\n /* Заполненная точка — событие случилось, полая — запланировано. /\n variant?: GrTimelineMarkerVariant\n /\n Событие ещё не произошло: точка полая, а отрезок оси после неё —\n * пунктирный. Перебивает `variant`.\n /\n pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n time: undefined,\n datetime: undefined,\n title: undefined,\n description: undefined,\n tone: 'neutral',\n variant: 'filled',\n pending: false,\n})\n\ndefineSlots<{\n /* Содержимое события под заголовком и описанием. /\n default?: () => any\n /* Маркер вместо точки: иконка статуса, аватар автора, номер шага. /\n marker?: () => any\n /* Метка времени. /\n time?: () => any\n /* Заголовок события. /\n title?: () => any\n /* Пояснение под заголовком. /\n description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/\n Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n /\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n props.tone,\n props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time \|\| !!props.time)\nconst hasTitle = computed(() => !!slots.title \|\| !!props.title)\nconst hasDescription = computed(() => !!slots.description \|\| !!props.description)\n\n/* В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n <li\n data-gr-timeline-item\n :data-tone=\"tone\"\n :data-pending=\"pending ? '' : undefined\"\n >\n <div\n v-if=\"timeInAside\"\n data-gr-timeline-aside\n >\n <time\n v-if=\"hasTime\"\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n </div>\n\n <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n <div\n data-gr-timeline-rail\n aria-hidden=\"true\"\n >\n <slot name=\"marker\">\n <span data-gr-timeline-marker :class=\"markerClass\" />\n </slot>\n <span data-gr-timeline-line />\n </div>\n\n <!--\n Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n бы, не доходя до следующей точки.\n -->\n <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n <time\n v-if=\"hasTime && !timeInAside\"\n data-gr-timeline-time\n :datetime=\"datetime\"\n :class=\"timeClass\"\n >\n <slot name=\"time\">{{ time }}</slot>\n </time>\n\n <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n <slot name=\"title\">\n{{ title }}\n</slot>\n </div>\n\n <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n <slot name=\"description\">\n{{ description }}\n</slot>\n </div>\n\n <div v-if=\"$slots.default\" data-gr-timeline-body>\n <slot />\n </div>\n </div>\n </li>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTimeline/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { i as GR_TIMELINE_HEADING_LEVELS, n as GrTimeline_default, r as groupTimelineItems, t as GrTimelineItem_default } from "./chunks/GrTimeline-CE9b3s18.js";
-import { n as grTimelineSafelist, t as grTimelineConfig } from "../../chunks/config-Cw6TDzWv2.js";
+import { i as GR_TIMELINE_HEADING_LEVELS, n as GrTimeline_default, r as groupTimelineItems, t as GrTimelineItem_default } from "./chunks/GrTimeline-B-h2Yanw.js";
+import { n as grTimelineSafelist, t as grTimelineConfig } from "../../chunks/config-COpuWGr_.js";
 export { GR_TIMELINE_HEADING_LEVELS, GrTimeline_default as GrTimeline, GrTimeline_default as default, GrTimelineItem_default as GrTimelineItem, grTimelineConfig, grTimelineSafelist, groupTimelineItems };

package/dist/components/GrToaster/chunks/{GrToaster-BKQy3Srm.js → GrToaster-Dqja0Lf9.js} RENAMED Viewed

@@ -3,17 +3,23 @@ import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
 import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
 import { c as useGrThemeAttrs } from "../../../chunks/context-BSYR7RZs.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
-import { t as usePortalTarget } from "../../../chunks/usePortalTarget-RyzEgNTb.js";
+import { t as usePortalTarget } from "../../../chunks/usePortalTarget-Cn-Wiz5d.js";
 import { vHotkey } from "../../../directives/hotkey.js";
 import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BvA2ZGXP.js";
 import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as GrButton_default } from "../../GrButton/chunks/GrButton-D0m_z0XW.js";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
 import { useToast } from "../../../composables/useToast.js";
-import { r as PLACEMENT_CLASS } from "../../../chunks/config-LGrZIdaZ.js";
-import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, watchEffect, withCtx, withDirectives } from "vue";
+import { a as SWIPE_THRESHOLD_RATIO, i as SWIPE_DIRECTION, o as swipeOpacity, r as PLACEMENT_CLASS } from "../../../chunks/config-ScuvHw6k2.js";
+import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, watchEffect, withCtx, withDirectives } from "vue";
 import '../styles.css';//#region src/components/GrToaster/GrToaster.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
-var _hoisted_2 = ["data-tone", "role"];
+var _hoisted_2 = [
+	"data-tone",
+	"data-toast-id",
+	"role",
+	"onKeydown"
+];
 var _hoisted_3 = { class: "flex items-start gap-3" };
 var _hoisted_4 = { class: "min-w-0 flex-1" };
 var _hoisted_5 = { class: "text-[length:var(--gr-text-sm)] font-700" };
@@ -38,6 +44,10 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		focusHotkey: {
 			type: [String, Boolean],
 			default: "F6"
+		},
+		swipeDismiss: {
+			type: Boolean,
+			default: true
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -132,7 +142,95 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const visibleIds = computed(() => new Set(visibleToasts.value.map((toast) => toast.id)));
 		const hovered = ref(false);
 		const focusWithin = ref(false);
-		const paused = computed(() => hovered.value || focusWithin.value);
+		const containerEl = ref(null);
+		const swipingId = ref(null);
+		const swipeOffset = ref(0);
+		let swipeStartX = 0;
+		let swipeThreshold = 56;
+		const paused = computed(() => hovered.value || focusWithin.value || swipingId.value !== null);
+		function toastElement(id) {
+			return containerEl.value?.querySelector(`[data-gr-toast][data-toast-id="${id}"]`) ?? null;
+		}
+		/** Жест отпущен и тост закрывается: переход снова разрешён (см. `releaseSwiped`). */
+		const swipeReleased = ref(false);
+		function resetSwipe() {
+			swipingId.value = null;
+			swipeOffset.value = 0;
+			swipeReleased.value = false;
+		}
+		/**
+		* Отпущенный тост уезжает за свой край и только потом закрывается.
+		*
+		* Два кадра здесь обязательны, и оба по одной причине: уходящий элемент Vue
+		* больше не перерисовывает — он уезжает с тем стилем, что был на последнем
+		* рендере. Значит и разрешение перехода, и конечную точку нужно успеть отдать
+		* до закрытия: первый кадр снимает инлайновый `transition: none` (во время
+		* жеста он нужен, иначе переходы группы борются с пальцем), второй задаёт точку
+		* отлёта — с этого момента анимация уже идёт, и `leave` подхватывает её на ходу.
+		*
+		* Закрыв тост сразу, получили бы не отлёт, а мгновенное исчезновение: элемент
+		* ушёл бы в `leave` с запрещённым переходом.
+		*/
+		async function releaseSwiped(id) {
+			swipeReleased.value = true;
+			await nextTick();
+			swipeOffset.value = SWIPE_DIRECTION[props.placement] * 600;
+			await nextTick();
+			dismiss(id);
+			resetSwipe();
+		}
+		/**
+		* Движение к своему краю идёт один к одному, в обратную сторону — с
+		* сопротивлением: тост едет за пальцем, но закрыть его «наоборот» нельзя.
+		*/
+		function resistOffset(delta) {
+			const toEdge = SWIPE_DIRECTION[props.placement];
+			return Math.sign(delta) === toEdge ? delta : delta / 4;
+		}
+		const swipe = useDragGesture({
+			disabled: () => !props.swipeDismiss,
+			onStart: (event) => {
+				const target = event.target;
+				if (target?.closest("button, a[href]")) return false;
+				const host = target?.closest("[data-gr-toast]");
+				const id = host?.dataset.toastId;
+				if (!host || !id) return false;
+				swipingId.value = id;
+				swipeOffset.value = 0;
+				swipeStartX = event.clientX;
+				swipeThreshold = Math.max(56, host.getBoundingClientRect().width * SWIPE_THRESHOLD_RATIO);
+			},
+			onMove: (event) => {
+				event.preventDefault();
+				swipeOffset.value = resistOffset(event.clientX - swipeStartX);
+			},
+			onEnd: () => {
+				const id = swipingId.value;
+				if (id !== null && Math.sign(swipeOffset.value) === SWIPE_DIRECTION[props.placement] && Math.abs(swipeOffset.value) >= swipeThreshold) releaseSwiped(id);
+				else resetSwipe();
+			},
+			onCancel: resetSwipe
+		});
+		function swipeStyle(toast) {
+			if (swipingId.value !== toast.id) return void 0;
+			return {
+				transform: `translateX(${swipeOffset.value}px)`,
+				opacity: String(swipeOpacity(swipeOffset.value, swipeThreshold)),
+				...swipeReleased.value ? {} : { transition: "none" }
+			};
+		}
+		/**
+		* Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не
+		* модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.
+		*/
+		function onToastKeydown(event, toast) {
+			if (event.key !== "Delete" && event.key !== "Backspace") return;
+			event.preventDefault();
+			const index = visibleToasts.value.findIndex((item) => item.id === toast.id);
+			const next = visibleToasts.value[index + 1] ?? visibleToasts.value[index - 1];
+			dismiss(toast.id);
+			if (next) nextTick(() => toastElement(next.id)?.focus());
+		}
 		watchEffect(() => {
 			for (const toast of list.value) if (toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value) resume(toast.id);
 			else pause(toast.id);
@@ -145,7 +243,6 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			if (props.width === void 0) return void 0;
 			return { "--gr-toaster-width": typeof props.width === "number" ? `${props.width}px` : props.width };
 		});
-		const containerEl = ref(null);
 		/**
 		* Переводит фокус на верхний тост. Тост фокусируем только программно
 		* (`tabindex="-1"`): собственной остановкой `Tab` стек быть не должен, иначе
@@ -182,10 +279,10 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"aria-label": resolvedRegionLabel.value,
 				class: ["fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]", containerClass.value],
 				style: containerStyle.value,
-				onMouseenter: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
-				onMouseleave: _cache[1] || (_cache[1] = ($event) => hovered.value = false),
-				onFocusin: _cache[2] || (_cache[2] = ($event) => focusWithin.value = true),
-				onFocusout: _cache[3] || (_cache[3] = ($event) => focusWithin.value = false)
+				onMouseenter: _cache[1] || (_cache[1] = ($event) => hovered.value = true),
+				onMouseleave: _cache[2] || (_cache[2] = ($event) => hovered.value = false),
+				onFocusin: _cache[3] || (_cache[3] = ($event) => focusWithin.value = true),
+				onFocusout: _cache[4] || (_cache[4] = ($event) => focusWithin.value = false)
 			}), [createVNode(TransitionGroup, {
 				tag: "div",
 				class: "grid gap-3",
@@ -202,10 +299,14 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 						key: toast.id,
 						"data-gr-toast": "",
 						"data-tone": toast.tone,
+						"data-toast-id": toast.id,
 						role: metaFor(toast.tone).role,
 						"aria-atomic": "true",
 						tabindex: "-1",
-						class: "relative overflow-hidden rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] px-4 py-3 shadow-[var(--gr-shadow-2)] focus-visible:outline-none focus-visible:shadow-[var(--gr-shadow-2),0_0_0_2px_var(--gr-ring)]"
+						class: normalizeClass(["relative overflow-hidden rounded-[var(--gr-radius-lg)] border border-[var(--gr-brd)] bg-[var(--gr-card)] px-4 py-3 shadow-[var(--gr-shadow-2)] focus-visible:outline-none focus-visible:shadow-[var(--gr-shadow-2),0_0_0_2px_var(--gr-ring)]", __props.swipeDismiss ? "[touch-action:pan-y]" : ""]),
+						style: normalizeStyle(swipeStyle(toast)),
+						onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(swipe).start && unref(swipe).start(...args)),
+						onKeydown: ($event) => onToastKeydown($event, toast)
 					}, [createElementVNode("div", _hoisted_3, [
 						createVNode(unref(GrIcon_default), {
 							size: "md",
@@ -261,12 +362,12 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 							animationDuration: `${toast.timeoutMs}ms`,
 							animationPlayState: paused.value ? "paused" : "running"
 						})
-					}, null, 4)) : createCommentVNode("", true)], 8, _hoisted_2);
+					}, null, 4)) : createCommentVNode("", true)], 46, _hoisted_2);
 				}), 128))]),
 				_: 3
 			})], 16, _hoisted_1)), [[unref(vHotkey), hotkeyBinding.value]])], 8, ["to", "disabled"]);
 		};
 	}
-}), [["__scopeId", "data-v-0cce147a"]]);
+}), [["__scopeId", "data-v-3ad9ca7d"]]);
 //#endregion
 export { GrToaster_default as t };