npm - @feugene/granularity - Versions diffs - 0.48.0 → 0.50.0 - Mend

@feugene/granularity 0.48.0 → 0.50.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 (418) hide show

package/dist/components/GrToaster/chunks/{GrToaster-CZixNk0l.js → GrToaster-OzT1VKcp.js} RENAMED Viewed

@@ -11,8 +11,8 @@ import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-
 import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
 import { useDragGesture } from "../../../composables/useDragGesture.js";
 import { useToast } from "../../../composables/useToast.js";
-import { a as SWIPE_THRESHOLD_RATIO, i as SWIPE_DIRECTION, o as swipeOpacity, r as PLACEMENT_CLASS } from "../../../chunks/config-B5SBUa6u.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 { a as SWIPE_THRESHOLD_RATIO, c as swipeOpacity, i as SWIPE_DIRECTION, o as collapsedTransform, r as PLACEMENT_CLASS, s as stackDepth } from "../../../chunks/config-B7qZqiUB.js";
+import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, 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 = [
@@ -21,14 +21,13 @@ var _hoisted_2 = [
 	"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)] leading-[var(--gr-leading-sm)] font-700" };
-var _hoisted_6 = {
+var _hoisted_3 = { class: "min-w-0 flex-1" };
+var _hoisted_4 = { class: "text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] font-700" };
+var _hoisted_5 = {
 	key: 0,
 	class: "mt-0.5 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]"
 };
-var _hoisted_7 = {
+var _hoisted_6 = {
 	key: 1,
 	class: "mt-2 flex flex-wrap gap-2"
 };
@@ -49,6 +48,10 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		swipeDismiss: {
 			type: Boolean,
 			default: true
+		},
+		collapse: {
+			type: [Number, Boolean],
+			default: 3
 		}
 	},
 	setup(__props, { expose: __expose }) {
@@ -144,6 +147,79 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const hovered = ref(false);
 		const focusWithin = ref(false);
 		const containerEl = ref(null);
+		/**
+		* Развёрнуто — по тем же двум флагам, что держат `paused`: рука на стеке или
+		* фокус внутри. Отдельного сигнала не заводим — читать стопку и не остановить
+		* при этом таймеры было бы ловушкой.
+		*/
+		const expanded = computed(() => hovered.value || focusWithin.value);
+		const stacked = computed(() => props.collapse !== false && visibleToasts.value.length > Math.max(1, props.collapse));
+		const collapsed = computed(() => stacked.value && !expanded.value);
+		/**
+		* Высоты тостов: они разные (заголовок, заголовок с текстом, плюс кнопки), а
+		* развёрнутая раскладка складывает их накопительно.
+		*
+		* `offsetHeight`, а не `getBoundingClientRect().height`: свёрнутая карточка
+		* уменьшена `scale()`, и рект вернул бы её экранный размер — стопка мерила бы
+		* саму себя и с каждым замером сжималась.
+		*/
+		const toastHeights = ref({});
+		let heightObserver = null;
+		function measureToasts() {
+			const root = containerEl.value;
+			if (!root) return;
+			const next = {};
+			for (const node of root.querySelectorAll("[data-gr-toast]")) {
+				const id = node.dataset.toastId;
+				if (id && node.offsetHeight > 0) next[id] = node.offsetHeight;
+				heightObserver?.observe(node);
+			}
+			toastHeights.value = next;
+		}
+		onMounted(() => {
+			if (typeof ResizeObserver !== "undefined") heightObserver = new ResizeObserver(() => measureToasts());
+			measureToasts();
+		});
+		onUpdated(measureToasts);
+		onBeforeUnmount(() => {
+			heightObserver?.disconnect();
+			heightObserver = null;
+		});
+		/** Все ли видимые тосты измерены. Пока нет — раскладка остаётся потоком. */
+		const measured = computed(() => visibleToasts.value.every((toast) => toastHeights.value[toast.id] > 0));
+		/** Абсолютная раскладка включается только когда есть чем считать смещения. */
+		const positioned = computed(() => stacked.value && measured.value);
+		function expandedOffset(index) {
+			let offset = 0;
+			for (let i = 0; i < index; i++) offset += (toastHeights.value[visibleToasts.value[i].id] ?? 0) + 12;
+			return offset;
+		}
+		function depthOf(index) {
+			return stackDepth(index, visibleToasts.value.length, props.placement);
+		}
+		/** Высота передней карточки — по ней живёт вся свёрнутая стопка. */
+		const frontHeight = computed(() => {
+			const heights = visibleToasts.value.map((toast) => toastHeights.value[toast.id] ?? 0);
+			return props.placement.startsWith("top") ? heights[0] : heights[heights.length - 1];
+		});
+		const stackHeight = computed(() => {
+			if (!positioned.value) return void 0;
+			if (collapsed.value) return `${frontHeight.value}px`;
+			const heights = visibleToasts.value.map((toast) => toastHeights.value[toast.id] ?? 0);
+			return `${heights.reduce((sum, h) => sum + h, 0) + 12 * (heights.length - 1)}px`;
+		});
+		/** Карточка лежит за передней: в свёрнутой стопке от неё виден только край. */
+		function isBehind(index) {
+			return collapsed.value && positioned.value && depthOf(index) > 0;
+		}
+		/**
+		* Содержимое карточек за передней гасится: из-под неё видно 12 пикселей, и в
+		* эту полоску попадали обрывок строки и хвост полосы прогресса. Колода должна
+		* читаться краями карточек, а не мусором в щели.
+		*/
+		function toastContentStyle(index) {
+			return isBehind(index) ? { opacity: "0" } : void 0;
+		}
 		const swipingId = ref(null);
 		const swipeOffset = ref(0);
 		let swipeStartX = 0;
@@ -212,13 +288,31 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			},
 			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" }
-			};
+		/**
+		* Стиль тоста: смахивание и стопка пишут в один `transform`. Двух инлайновых
+		* трансформов не бывает — второй затирает первый, и жест отменял бы раскладку.
+		*/
+		function toastStyle(toast, index) {
+			const style = {};
+			const transforms = [];
+			if (swipingId.value === toast.id) {
+				transforms.push(`translateX(${swipeOffset.value}px)`);
+				style.opacity = String(swipeOpacity(swipeOffset.value, swipeThreshold));
+				if (!swipeReleased.value) style.transition = "none";
+			}
+			if (positioned.value) {
+				const depth = depthOf(index);
+				transforms.push(collapsed.value ? collapsedTransform(depth, props.placement) : `translateY(${expandedOffset(index)}px)`);
+				style.zIndex = String(visibleToasts.value.length - depth);
+				style.transformOrigin = props.placement.startsWith("top") ? "top center" : "bottom center";
+				if (collapsed.value && depth > 0 && frontHeight.value > 0) style.height = `${frontHeight.value}px`;
+				if (collapsed.value && depth > 2) {
+					style.opacity = "0";
+					style.pointerEvents = "none";
+				}
+			}
+			if (transforms.length > 0) style.transform = transforms.join(" ");
+			return Object.keys(style).length > 0 ? style : void 0;
 		}
 		/**
 		* Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не
@@ -240,6 +334,30 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return TONE_META[tone] ?? TONE_META.info;
 		}
 		const containerClass = computed(() => PLACEMENT_CLASS[props.placement]);
+		const listClass = computed(() => positioned.value ? "relative transition-[height] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]" : "grid gap-3");
+		const listStyle = computed(() => stackHeight.value ? { height: stackHeight.value } : void 0);
+		/**
+		* В стопке карточка вынута из потока, а её место задаёт трансформ — он и
+		* обязан ехать плавно. В обычной колонке переход не нужен: там позицию держит
+		* сама раскладка, а сдвиги отрабатывает `move-class` группы.
+		*/
+		const toastLayoutClass = computed(() => positioned.value ? "absolute inset-x-0 top-0 transition-[transform,opacity] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]" : "relative");
+		/**
+		* В стопке перемещение группы выключается. `TransitionGroup` двигает детей
+		* приёмом FLIP: сам пишет в инлайновый `transform` и по концу перехода
+		* **очищает** его — то есть стирает раскладку стопки. Класс без перехода
+		* трансформа отключает проверку `hasCSSTransform`, и до записи дело не доходит.
+		*/
+		const moveClass = computed(() => positioned.value ? "transition-none" : "transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]");
+		/**
+		* В стопке появление и уход красятся только прозрачностью: `translate-y-*` из
+		* классов группы спорил бы с инлайновым трансформом раскладки, а инлайновый
+		* сильнее — сдвиг всё равно не сыграл бы.
+		*/
+		const enterFromClass = computed(() => positioned.value ? "opacity-0" : "opacity-0 translate-y-2");
+		const enterToClass = computed(() => positioned.value ? "opacity-100" : "opacity-100 translate-y-0");
+		const leaveFromClass = computed(() => positioned.value ? "opacity-100" : "opacity-100 translate-y-0");
+		const leaveToClass = computed(() => positioned.value ? "opacity-0" : "opacity-0 translate-y-2");
 		const containerStyle = computed(() => {
 			if (props.width === void 0) return void 0;
 			return { "--gr-toaster-width": typeof props.width === "number" ? `${props.width}px` : props.width };
@@ -286,16 +404,17 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				onFocusout: _cache[4] || (_cache[4] = ($event) => focusWithin.value = false)
 			}), [createVNode(TransitionGroup, {
 				tag: "div",
-				class: "grid gap-3",
+				class: normalizeClass(listClass.value),
+				style: normalizeStyle(listStyle.value),
 				"enter-active-class": "transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
-				"enter-from-class": "opacity-0 translate-y-2",
-				"enter-to-class": "opacity-100 translate-y-0",
+				"enter-from-class": enterFromClass.value,
+				"enter-to-class": enterToClass.value,
 				"leave-active-class": "transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute",
-				"leave-from-class": "opacity-100 translate-y-0",
-				"leave-to-class": "opacity-0 translate-y-2",
-				"move-class": "transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]"
+				"leave-from-class": leaveFromClass.value,
+				"leave-to-class": leaveToClass.value,
+				"move-class": moveClass.value
 			}, {
-				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast) => {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleToasts.value, (toast, index) => {
 					return openBlock(), createElementBlock("div", {
 						key: toast.id,
 						"data-gr-toast": "",
@@ -304,11 +423,14 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 						role: metaFor(toast.tone).role,
 						"aria-atomic": "true",
 						tabindex: "-1",
-						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)),
+						class: normalizeClass(["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]" : "", toastLayoutClass.value]]),
+						style: normalizeStyle(toastStyle(toast, index)),
 						onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(swipe).start && unref(swipe).start(...args)),
 						onKeydown: ($event) => onToastKeydown($event, toast)
-					}, [createElementVNode("div", _hoisted_3, [
+					}, [createElementVNode("div", {
+						class: "flex items-start gap-3 transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]",
+						style: normalizeStyle(toastContentStyle(index))
+					}, [
 						createVNode(unref(GrIcon_default), {
 							size: "md",
 							class: "mt-0.5",
@@ -317,10 +439,10 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(metaFor(toast.tone).icon)))]),
 							_: 2
 						}, 1032, ["style"]),
-						createElementVNode("div", _hoisted_4, [
-							createElementVNode("div", _hoisted_5, toDisplayString(toast.title), 1),
-							toast.message ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(toast.message), 1)) : createCommentVNode("", true),
-							hasActions(toast) ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "actions", {
+						createElementVNode("div", _hoisted_3, [
+							createElementVNode("div", _hoisted_4, toDisplayString(toast.title), 1),
+							toast.message ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(toast.message), 1)) : createCommentVNode("", true),
+							hasActions(toast) ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {
 								toast,
 								dismiss: () => unref(dismiss)(toast.id)
 							}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(toastActions(toast), (action, index) => {
@@ -353,7 +475,7 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 							})]),
 							_: 1
 						}, 8, ["aria-label", "onClick"])
-					]), toast.timeoutMs > 0 ? (openBlock(), createElementBlock("div", {
+					], 4), toast.timeoutMs > 0 ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						"data-gr-toast-progress": "",
 						"aria-hidden": "true",
@@ -361,14 +483,23 @@ var GrToaster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 						style: normalizeStyle({
 							backgroundColor: metaFor(toast.tone).color,
 							animationDuration: `${toast.timeoutMs}ms`,
-							animationPlayState: paused.value ? "paused" : "running"
+							animationPlayState: paused.value ? "paused" : "running",
+							...toastContentStyle(index)
 						})
 					}, null, 4)) : createCommentVNode("", true)], 46, _hoisted_2);
 				}), 128))]),
 				_: 3
-			})], 16, _hoisted_1)), [[unref(vHotkey), hotkeyBinding.value]])], 8, ["to", "disabled"]);
+			}, 8, [
+				"class",
+				"style",
+				"enter-from-class",
+				"enter-to-class",
+				"leave-from-class",
+				"leave-to-class",
+				"move-class"
+			])], 16, _hoisted_1)), [[unref(vHotkey), hotkeyBinding.value]])], 8, ["to", "disabled"]);
 		};
 	}
-}), [["__scopeId", "data-v-a9c5da3d"]]);
+}), [["__scopeId", "data-v-185f56c0"]]);
 //#endregion
 export { GrToaster_default as t };

package/dist/components/GrToaster/chunks/GrToaster-OzT1VKcp.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GrToaster-OzT1VKcp.js","names":[],"sources":["../../../../src/components/GrToaster/GrToaster.vue","../../../../src/components/GrToaster/GrToaster.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrToaster — GR-примитив области уведомлений (toast).\n *\n * Модель состояния берётся из `useToast`, поэтому в приложении предполагается\n * **один активный `GrToaster`** на корень (или app-scoped через плагин).\n *\n * A11y:\n * - контейнер — `role=\"region\"` с `aria-label` (i18n-проп `regionLabel`);\n * - объявляет каждый тост сам собой: `role=\"status\"`, а критичные\n * (`warning`/`danger`) — ассертивный `role=\"alert\"`. Обёртки-live-region над\n * ними нет намеренно: вложение регионов с разной ассертивностью\n * спецификацией не определено, браузеры и SR расходятся вплоть до потери\n * объявления;\n * - стек достижим с клавиатуры по `focusHotkey` (по умолчанию `F6`) — тосты\n * телепортированы в конец `body`, и без хоткея кнопка «Отменить» лежала бы\n * за пределами разумного числа нажатий `Tab`.\n *\n * UX:\n * - `maxVisible` ограничивает стек; лишние ждут в очереди (их таймеры на паузе);\n * - автозакрытие **останавливается под курсором/фокусом** (WCAG 2.2.1) и\n * визуализируется прогресс-баром до закрытия;\n * - `placement` настраивает угол экрана; слой — `--gr-z-toast`.\n */\nimport { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\nimport type { Component } from 'vue'\n\nimport { useDragGesture } from '../../composables/useDragGesture'\nimport { useToast } from '../../composables/useToast'\nimport { vHotkey } from '../../directives'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrToastTone, Toast, ToastAction } from '../../composables/useToast'\nimport GrButton from '../GrButton'\nimport GrIcon from '../GrIcon'\nimport {\n collapsedTransform,\n PLACEMENT_CLASS,\n STACK_GAP_PX,\n STACK_PEEK_DEPTH,\n stackDepth,\n SWIPE_DIRECTION,\n SWIPE_FLY_OUT_PX,\n SWIPE_RESISTANCE,\n SWIPE_THRESHOLD_MIN_PX,\n SWIPE_THRESHOLD_RATIO,\n swipeOpacity,\n type GrToasterPlacement,\n} from './grToasterStyles'\n\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconError from '~icons/lucide/x-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\n\nexport type { GrToasterPlacement }\n\ninterface ToneMeta {\n icon: Component\n color: string\n role: 'status' | 'alert'\n}\n\n// Единый маппинг по tone'у: иконка, цвет, a11y-роль. На уровне модуля —\n// чтобы не пересоздавать объект на каждый рендер.\nconst TONE_META: Record<GrToastTone, ToneMeta> = {\n primary: { icon: IconInfo, color: 'var(--gr-primary)', role: 'status' },\n neutral: { icon: IconInfo, color: 'var(--gr-muted-fg)', role: 'status' },\n info: { icon: IconInfo, color: 'var(--gr-info)', role: 'status' },\n success: { icon: IconCheck, color: 'var(--gr-success)', role: 'status' },\n warning: { icon: IconWarning, color: 'var(--gr-warning)', role: 'alert' },\n danger: { icon: IconError, color: 'var(--gr-danger)', role: 'alert' },\n slate: { icon: IconInfo, color: 'var(--gr-slate)', role: 'status' },\n azure: { icon: IconInfo, color: 'var(--gr-azure)', role: 'status' },\n}\n\nexport interface GrToasterProps {\n /** Угол экрана для стека уведомлений. */\n placement?: GrToasterPlacement\n /** Максимум одновременно видимых тостов; остальные ждут в очереди. По умолчанию `4`. */\n maxVisible?: number\n /** A11y-лейбл кнопки закрытия (i18n). */\n dismissLabel?: string\n /** A11y-лейбл контейнера-региона (i18n). */\n regionLabel?: string\n /**\n * Ширина стека. Число — пиксели, строка — любая CSS-длина. Уезжает в\n * `--gr-toaster-width`, поэтому то же самое можно задать и темой.\n */\n width?: string | number\n /**\n * Клавиша перевода фокуса в стек уведомлений; `false` отключает хоткей.\n * `F6` — рекомендация APG для перехода между «регионами» страницы.\n */\n focusHotkey?: string | false\n /**\n * Смахивание тоста к своему краю экрана. Клавиатурный эквивалент — `Delete`\n * и `Backspace` на сфокусированном тосте — остаётся и при выключенном жесте.\n */\n swipeDismiss?: boolean\n /**\n * Со скольких видимых тостов стек схлопывается в стопку: колонка занимает\n * место одного тоста, а остальные выглядывают из-под передней. Разворачивается\n * по наведению и по фокусу. `false` — не схлопывать никогда.\n *\n * Порог, а не переключатель: пока тостов мало, колонка читается лучше стопки,\n * и менять её незачем.\n */\n collapse?: number | false\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrToasterProps>(), {\n placement: 'top-right',\n maxVisible: 4,\n dismissLabel: undefined,\n regionLabel: undefined,\n width: undefined,\n focusHotkey: 'F6',\n swipeDismiss: true,\n collapse: 3,\n})\n\n/**\n * Слот `actions` полностью заменяет дефолтные action-кнопки тоста. Получает сам\n * `toast` и `dismiss` — функцию, закрывающую именно этот тост.\n */\ndefineSlots<{\n actions?: (props: { toast: Toast, dismiss: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst slots = useSlots()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? t('gr.toaster.dismiss', 'Dismiss'))\nconst resolvedRegionLabel = computed(() => props.regionLabel ?? t('gr.toaster.region', 'Notifications'))\n\nconst { list, dismiss, pause, resume } = useToast()\n\n// Единый список кнопок тоста: `action` (шорткат) + массив `actions`.\nfunction toastActions(toast: Toast): ToastAction[] {\n return [...(toast.action ? [toast.action] : []), ...(toast.actions ?? [])]\n}\n\n// Показываем блок действий, если есть кнопки или задан слот `actions`.\nfunction hasActions(toast: Toast): boolean {\n return Boolean(slots.actions) || toastActions(toast).length > 0\n}\n\n// Клик по action-кнопке тоста: вызываем обработчик и (по умолчанию) закрываем тост.\nfunction onAction(toast: Toast, action: ToastAction): void {\n action.onClick()\n if (action.dismissOnClick !== false)\n dismiss(toast.id)\n}\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем `teleport`.\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\n// Видимые тосты (не больше `maxVisible`); остальные ждут в очереди. Список\n// хранится новейшими вперёд, поэтому «видимые дожинают, новые ждут» — это\n// хвост: старейшие N. Взяв голову, стек показывал бы новейшие, и каждый пуш\n// вытеснял бы с экрана тост, который пользователь ещё читает.\nconst visibleToasts = computed(() => list.value.slice(-Math.max(1, props.maxVisible)))\nconst visibleIds = computed(() => new Set(visibleToasts.value.map(toast => toast.id)))\n\n// Пауза под курсором/фокусом (WCAG 2.2.1). Флага два и они независимы: один\n// `paused` терялся на «фокус внутри + мышь прошла насквозь» — `mouseleave`\n// возобновлял отсчёт под клавиатурным фокусом.\nconst hovered = ref(false)\nconst focusWithin = ref(false)\n\n// Контейнер стека: по нему ищутся тосты — и для фокуса, и для жеста.\nconst containerEl = ref<HTMLElement | null>(null)\n\n// ————— Стопка.\n\n/**\n * Развёрнуто — по тем же двум флагам, что держат `paused`: рука на стеке или\n * фокус внутри. Отдельного сигнала не заводим — читать стопку и не остановить\n * при этом таймеры было бы ловушкой.\n */\nconst expanded = computed(() => hovered.value || focusWithin.value)\nconst stacked = computed(() => props.collapse !== false && visibleToasts.value.length > Math.max(1, props.collapse))\nconst collapsed = computed(() => stacked.value && !expanded.value)\n\n/**\n * Высоты тостов: они разные (заголовок, заголовок с текстом, плюс кнопки), а\n * развёрнутая раскладка складывает их накопительно.\n *\n * `offsetHeight`, а не `getBoundingClientRect().height`: свёрнутая карточка\n * уменьшена `scale()`, и рект вернул бы её экранный размер — стопка мерила бы\n * саму себя и с каждым замером сжималась.\n */\nconst toastHeights = ref<Record<string, number>>({})\n\nlet heightObserver: ResizeObserver | null = null\n\nfunction measureToasts(): void {\n const root = containerEl.value\n if (!root)\n return\n\n const next: Record<string, number> = {}\n for (const node of root.querySelectorAll<HTMLElement>('[data-gr-toast]')) {\n const id = node.dataset.toastId\n // В jsdom высота нулевая: раскладка обязана это пережить, поэтому нули не\n // запоминаются, а потребитель значения падает на запасной путь.\n if (id && node.offsetHeight > 0)\n next[id] = node.offsetHeight\n\n heightObserver?.observe(node)\n }\n\n toastHeights.value = next\n}\n\nonMounted(() => {\n if (typeof ResizeObserver !== 'undefined')\n heightObserver = new ResizeObserver(() => measureToasts())\n\n measureToasts()\n})\n\n// Замер до отрисовки кадра: содержимое тоста меняется на месте (`update`,\n// `toast.promise`), и без этого стопка кадр стояла бы по старым высотам.\nonUpdated(measureToasts)\n\nonBeforeUnmount(() => {\n heightObserver?.disconnect()\n heightObserver = null\n})\n\n/** Все ли видимые тосты измерены. Пока нет — раскладка остаётся потоком. */\nconst measured = computed(() => visibleToasts.value.every(toast => toastHeights.value[toast.id] > 0))\n\n/** Абсолютная раскладка включается только когда есть чем считать смещения. */\nconst positioned = computed(() => stacked.value && measured.value)\n\nfunction expandedOffset(index: number): number {\n let offset = 0\n for (let i = 0; i < index; i++)\n offset += (toastHeights.value[visibleToasts.value[i].id] ?? 0) + STACK_GAP_PX\n\n return offset\n}\n\nfunction depthOf(index: number): number {\n return stackDepth(index, visibleToasts.value.length, props.placement)\n}\n\n/** Высота передней карточки — по ней живёт вся свёрнутая стопка. */\nconst frontHeight = computed(() => {\n const heights = visibleToasts.value.map(toast => toastHeights.value[toast.id] ?? 0)\n return props.placement.startsWith('top') ? heights[0] : heights[heights.length - 1]\n})\n\nconst stackHeight = computed(() => {\n if (!positioned.value)\n return undefined\n\n if (collapsed.value)\n return `${frontHeight.value}px`\n\n const heights = visibleToasts.value.map(toast => toastHeights.value[toast.id] ?? 0)\n return `${heights.reduce((sum, h) => sum + h, 0) + STACK_GAP_PX * (heights.length - 1)}px`\n})\n\n/** Карточка лежит за передней: в свёрнутой стопке от неё виден только край. */\nfunction isBehind(index: number): boolean {\n return collapsed.value && positioned.value && depthOf(index) > 0\n}\n\n/**\n * Содержимое карточек за передней гасится: из-под неё видно 12 пикселей, и в\n * эту полоску попадали обрывок строки и хвост полосы прогресса. Колода должна\n * читаться краями карточек, а не мусором в щели.\n */\nfunction toastContentStyle(index: number): Record<string, string> | undefined {\n return isBehind(index) ? { opacity: '0' } : undefined\n}\n\n// ————— Смахивание.\n\nconst swipingId = ref<string | null>(null)\nconst swipeOffset = ref(0)\nlet swipeStartX = 0\nlet swipeThreshold = SWIPE_THRESHOLD_MIN_PX\n\n// Тост, который тянут, тоже держит таймеры: иначе уведомление сгорало бы прямо\n// под пальцем, посреди жеста.\nconst paused = computed(() => hovered.value || focusWithin.value || swipingId.value !== null)\n\nfunction toastElement(id: string): HTMLElement | null {\n return containerEl.value?.querySelector<HTMLElement>(`[data-gr-toast][data-toast-id=\"${id}\"]`) ?? null\n}\n\n/** Жест отпущен и тост закрывается: переход снова разрешён (см. `releaseSwiped`). */\nconst swipeReleased = ref(false)\n\nfunction resetSwipe(): void {\n swipingId.value = null\n swipeOffset.value = 0\n swipeReleased.value = false\n}\n\n/**\n * Отпущенный тост уезжает за свой край и только потом закрывается.\n *\n * Два кадра здесь обязательны, и оба по одной причине: уходящий элемент Vue\n * больше не перерисовывает — он уезжает с тем стилем, что был на последнем\n * рендере. Значит и разрешение перехода, и конечную точку нужно успеть отдать\n * до закрытия: первый кадр снимает инлайновый `transition: none` (во время\n * жеста он нужен, иначе переходы группы борются с пальцем), второй задаёт точку\n * отлёта — с этого момента анимация уже идёт, и `leave` подхватывает её на ходу.\n *\n * Закрыв тост сразу, получили бы не отлёт, а мгновенное исчезновение: элемент\n * ушёл бы в `leave` с запрещённым переходом.\n */\nasync function releaseSwiped(id: string): Promise<void> {\n swipeReleased.value = true\n await nextTick()\n\n swipeOffset.value = SWIPE_DIRECTION[props.placement] * SWIPE_FLY_OUT_PX\n await nextTick()\n\n dismiss(id)\n resetSwipe()\n}\n\n/**\n * Движение к своему краю идёт один к одному, в обратную сторону — с\n * сопротивлением: тост едет за пальцем, но закрыть его «наоборот» нельзя.\n */\nfunction resistOffset(delta: number): number {\n const toEdge = SWIPE_DIRECTION[props.placement]\n\n return Math.sign(delta) === toEdge ? delta : delta / SWIPE_RESISTANCE\n}\n\nconst swipe = useDragGesture({\n disabled: () => !props.swipeDismiss,\n onStart: (event) => {\n const target = event.target as HTMLElement | null\n // Нажатие на кнопке — это нажатие на кнопке: закрытие и действия тоста не\n // должны превращаться в протяжку.\n if (target?.closest('button, a[href]'))\n return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id)\n return false\n\n swipingId.value = id\n swipeOffset.value = 0\n swipeStartX = event.clientX\n swipeThreshold = Math.max(SWIPE_THRESHOLD_MIN_PX, host.getBoundingClientRect().width * SWIPE_THRESHOLD_RATIO)\n },\n onMove: (event) => {\n // Против выделения текста тоста во время протяжки.\n event.preventDefault()\n swipeOffset.value = resistOffset(event.clientX - swipeStartX)\n },\n onEnd: () => {\n const id = swipingId.value\n const passed = id !== null\n && Math.sign(swipeOffset.value) === SWIPE_DIRECTION[props.placement]\n && Math.abs(swipeOffset.value) >= swipeThreshold\n\n if (passed)\n void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\n/**\n * Стиль тоста: смахивание и стопка пишут в один `transform`. Двух инлайновых\n * трансформов не бывает — второй затирает первый, и жест отменял бы раскладку.\n */\nfunction toastStyle(toast: Toast, index: number): Record<string, string> | undefined {\n const style: Record<string, string> = {}\n const transforms: string[] = []\n\n if (swipingId.value === toast.id) {\n // Смахивание идёт первым: трансформы применяются справа налево, и после\n // `scale()` жест ехал бы в масштабе карточки, а не в пикселях экрана.\n transforms.push(`translateX(${swipeOffset.value}px)`)\n style.opacity = String(swipeOpacity(swipeOffset.value, swipeThreshold))\n\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n if (!swipeReleased.value)\n style.transition = 'none'\n }\n\n if (positioned.value) {\n const depth = depthOf(index)\n\n transforms.push(collapsed.value\n ? collapsedTransform(depth, props.placement)\n : `translateY(${expandedOffset(index)}px)`)\n\n style.zIndex = String(visibleToasts.value.length - depth)\n\n /*\n * Уменьшение идёт от того края, которым стопка прижата к углу. По центру\n * (умолчание) карточка теряет высоту с обеих сторон, и соседи разной высоты\n * выглядывают на разное расстояние — колода получается рваной.\n */\n style.transformOrigin = props.placement.startsWith('top') ? 'top center' : 'bottom center'\n\n /*\n * Высота карточек за передней приравнивается к её собственной: иначе более\n * высокий тост выглядывал бы дальше соседа, и шаг колоды плясал бы вместе с\n * длиной сообщения.\n */\n if (collapsed.value && depth > 0 && frontHeight.value > 0)\n style.height = `${frontHeight.value}px`\n\n if (collapsed.value && depth > STACK_PEEK_DEPTH) {\n style.opacity = '0'\n // Почти невидимый край иначе ловил бы клики мимо передней карточки.\n style.pointerEvents = 'none'\n }\n }\n\n if (transforms.length > 0)\n style.transform = transforms.join(' ')\n\n return Object.keys(style).length > 0 ? style : undefined\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace')\n return\n\n event.preventDefault()\n\n const index = visibleToasts.value.findIndex(item => item.id === toast.id)\n const next = visibleToasts.value[index + 1] ?? visibleToasts.value[index - 1]\n\n dismiss(toast.id)\n\n // Фокус не должен упасть на `body`: дальше по стеку есть что читать.\n if (next)\n void nextTick(() => toastElement(next.id)?.focus())\n}\n\n// Единый источник правды по таймерам: тост тикает, только если он видим И стек не на\n// паузе. Очередь и hover — на паузе. Реагирует на изменения списка/hover.\n//\n// `timeoutMs` читается ради зависимости, а не ради значения: `toast.promise` и\n// `update` перезапускают таймер уже существующего тоста, не трогая ни список, ни\n// паузу. Без этой зависимости эффект не просыпался бы, и заново заведённый\n// таймер тикал бы под курсором или у тоста, который ещё ждёт в очереди, — тот\n// сгорал бы, ни разу не показавшись.\nwatchEffect(() => {\n for (const toast of list.value) {\n const shouldTick = toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value\n\n if (shouldTick)\n resume(toast.id)\n else\n pause(toast.id)\n }\n})\n\nfunction metaFor(tone: GrToastTone): ToneMeta {\n return TONE_META[tone] ?? TONE_META.info\n}\n\nconst containerClass = computed(() => PLACEMENT_CLASS[props.placement])\n\nconst listClass = computed(() => (positioned.value\n ? 'relative transition-[height] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'\n : 'grid gap-3'))\n\nconst listStyle = computed(() => (stackHeight.value ? { height: stackHeight.value } : undefined))\n\n/**\n * В стопке карточка вынута из потока, а её место задаёт трансформ — он и\n * обязан ехать плавно. В обычной колонке переход не нужен: там позицию держит\n * сама раскладка, а сдвиги отрабатывает `move-class` группы.\n */\nconst toastLayoutClass = computed(() => (positioned.value\n ? 'absolute inset-x-0 top-0 transition-[transform,opacity] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'\n : 'relative'))\n\n/**\n * В стопке перемещение группы выключается. `TransitionGroup` двигает детей\n * приёмом FLIP: сам пишет в инлайновый `transform` и по концу перехода\n * **очищает** его — то есть стирает раскладку стопки. Класс без перехода\n * трансформа отключает проверку `hasCSSTransform`, и до записи дело не доходит.\n */\nconst moveClass = computed(() => (positioned.value\n ? 'transition-none'\n : 'transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'))\n\n/**\n * В стопке появление и уход красятся только прозрачностью: `translate-y-*` из\n * классов группы спорил бы с инлайновым трансформом раскладки, а инлайновый\n * сильнее — сдвиг всё равно не сыграл бы.\n */\nconst enterFromClass = computed(() => (positioned.value ? 'opacity-0' : 'opacity-0 translate-y-2'))\nconst enterToClass = computed(() => (positioned.value ? 'opacity-100' : 'opacity-100 translate-y-0'))\nconst leaveFromClass = computed(() => (positioned.value ? 'opacity-100' : 'opacity-100 translate-y-0'))\nconst leaveToClass = computed(() => (positioned.value ? 'opacity-0' : 'opacity-0 translate-y-2'))\n\nconst containerStyle = computed(() => {\n if (props.width === undefined)\n return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\n\n/**\n * Переводит фокус на верхний тост. Тост фокусируем только программно\n * (`tabindex=\"-1\"`): собственной остановкой `Tab` стек быть не должен, иначе\n * всплывающее уведомление перехватывало бы обход страницы.\n */\nfunction focus(): boolean {\n const target = containerEl.value?.querySelector<HTMLElement>('[data-gr-toast]')\n if (!target)\n return false\n\n target.focus()\n return true\n}\n\nconst hotkeyBinding = computed(() => ({\n enabled: props.focusHotkey !== false && visibleToasts.value.length > 0,\n handlers: { [props.focusHotkey || 'F6']: { handler: onFocusHotkey, allowInEditable: true } },\n}))\n\nfunction onFocusHotkey(event: KeyboardEvent): void {\n if (focus())\n event.preventDefault()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n <div\n ref=\"containerEl\"\n v-hotkey=\"hotkeyBinding\"\n v-bind=\"themeAttrs\"\n data-gr-toaster\n data-gr-overlay-root\n role=\"region\"\n :aria-label=\"resolvedRegionLabel\"\n class=\"fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]\"\n :class=\"containerClass\"\n :style=\"containerStyle\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n @focusin=\"focusWithin = true\"\n @focusout=\"focusWithin = false\"\n >\n <TransitionGroup\n tag=\"div\"\n :class=\"listClass\"\n :style=\"listStyle\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n :enter-from-class=\"enterFromClass\"\n :enter-to-class=\"enterToClass\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n :leave-from-class=\"leaveFromClass\"\n :leave-to-class=\"leaveToClass\"\n :move-class=\"moveClass\"\n >\n <div\n v-for=\"(toast, index) in visibleToasts\"\n :key=\"toast.id\"\n data-gr-toast\n :data-tone=\"toast.tone\"\n :data-toast-id=\"toast.id\"\n :role=\"metaFor(toast.tone).role\"\n aria-atomic=\"true\"\n tabindex=\"-1\"\n class=\"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)]\"\n :class=\"[swipeDismiss ? '[touch-action:pan-y]' : '', toastLayoutClass]\"\n :style=\"toastStyle(toast, index)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div\n class=\"flex items-start gap-3 transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n :style=\"toastContentStyle(index)\"\n >\n <GrIcon size=\"md\" class=\"mt-0.5\" :style=\"{ color: metaFor(toast.tone).color }\">\n <component :is=\"metaFor(toast.tone).icon\" />\n </GrIcon>\n <div class=\"min-w-0 flex-1\">\n <div class=\"text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] font-700\">\n {{ toast.title }}\n </div>\n <div v-if=\"toast.message\" class=\"mt-0.5 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]\">\n {{ toast.message }}\n </div>\n\n \n <div v-if=\"hasActions(toast)\" class=\"mt-2 flex flex-wrap gap-2\">\n <slot name=\"actions\" :toast=\"toast\" :dismiss=\"() => dismiss(toast.id)\">\n <GrButton\n v-for=\"(action, index) in toastActions(toast)\"\n :key=\"index\"\n :variant=\"action.variant ?? 'outline'\"\n :size=\"action.size ?? 'sm'\"\n data-gr-toast-action\n @click=\"onAction(toast, action)\"\n >\n {{ action.label }}\n </GrButton>\n </slot>\n </div>\n </div>\n <GrButton\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedDismissLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <GrIcon size=\"sm\">\n <IconClose />\n </GrIcon>\n </GrButton>\n </div>\n\n \n <div\n v-if=\"toast.timeoutMs > 0\"\n data-gr-toast-progress\n aria-hidden=\"true\"\n class=\"gr-toast-progress absolute bottom-0 left-0 h-[2px] w-full origin-left\"\n :style=\"{\n backgroundColor: metaFor(toast.tone).color,\n animationDuration: `${toast.timeoutMs}ms`,\n animationPlayState: paused ? 'paused' : 'running',\n ...toastContentStyle(index),\n }\"\n />\n </div>\n </TransitionGroup>\n </div>\n </teleport>\n</template>\n\n<style scoped>\n.gr-toast-progress {\n animation-name: gr-toast-progress;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n}\n\n@keyframes gr-toast-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n}\n\n/*\n * Единственная анимация пакета, которую глобальный кламп чинит неверно.\n *\n * У полосы `animation-fill-mode: forwards`, поэтому сжатая до `0.01ms` она не\n * возвращается в исходное состояние, а фиксируется на `scaleX(0)`: таймер\n * выглядит истёкшим, пока тост ещё висит на экране. Полоса — единственный\n * носитель этого смысла, и статичной её оставить нельзя, поэтому под reduce она\n * убирается совсем. Автозакрытие ведёт JS-таймер, оно не страдает, а сам элемент\n * и так `aria-hidden`.\n */\n@media (prefers-reduced-motion: reduce) {\n .gr-toast-progress {\n display: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrToaster — GR-примитив области уведомлений (toast).\n *\n * Модель состояния берётся из `useToast`, поэтому в приложении предполагается\n * **один активный `GrToaster`** на корень (или app-scoped через плагин).\n *\n * A11y:\n * - контейнер — `role=\"region\"` с `aria-label` (i18n-проп `regionLabel`);\n * - объявляет каждый тост сам собой: `role=\"status\"`, а критичные\n * (`warning`/`danger`) — ассертивный `role=\"alert\"`. Обёртки-live-region над\n * ними нет намеренно: вложение регионов с разной ассертивностью\n * спецификацией не определено, браузеры и SR расходятся вплоть до потери\n * объявления;\n * - стек достижим с клавиатуры по `focusHotkey` (по умолчанию `F6`) — тосты\n * телепортированы в конец `body`, и без хоткея кнопка «Отменить» лежала бы\n * за пределами разумного числа нажатий `Tab`.\n *\n * UX:\n * - `maxVisible` ограничивает стек; лишние ждут в очереди (их таймеры на паузе);\n * - автозакрытие **останавливается под курсором/фокусом** (WCAG 2.2.1) и\n * визуализируется прогресс-баром до закрытия;\n * - `placement` настраивает угол экрана; слой — `--gr-z-toast`.\n */\nimport { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, useSlots, watchEffect } from 'vue'\n\nimport { usePortalTarget } from '../../composables/usePortalTarget'\nimport type { Component } from 'vue'\n\nimport { useDragGesture } from '../../composables/useDragGesture'\nimport { useToast } from '../../composables/useToast'\nimport { vHotkey } from '../../directives'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrToastTone, Toast, ToastAction } from '../../composables/useToast'\nimport GrButton from '../GrButton'\nimport GrIcon from '../GrIcon'\nimport {\n collapsedTransform,\n PLACEMENT_CLASS,\n STACK_GAP_PX,\n STACK_PEEK_DEPTH,\n stackDepth,\n SWIPE_DIRECTION,\n SWIPE_FLY_OUT_PX,\n SWIPE_RESISTANCE,\n SWIPE_THRESHOLD_MIN_PX,\n SWIPE_THRESHOLD_RATIO,\n swipeOpacity,\n type GrToasterPlacement,\n} from './grToasterStyles'\n\nimport IconCheck from '~icons/lucide/check-circle'\nimport IconWarning from '~icons/lucide/alert-triangle'\nimport IconError from '~icons/lucide/x-circle'\nimport IconInfo from '~icons/lucide/info'\nimport IconClose from '~icons/lucide/x'\n\nexport type { GrToasterPlacement }\n\ninterface ToneMeta {\n icon: Component\n color: string\n role: 'status' | 'alert'\n}\n\n// Единый маппинг по tone'у: иконка, цвет, a11y-роль. На уровне модуля —\n// чтобы не пересоздавать объект на каждый рендер.\nconst TONE_META: Record<GrToastTone, ToneMeta> = {\n primary: { icon: IconInfo, color: 'var(--gr-primary)', role: 'status' },\n neutral: { icon: IconInfo, color: 'var(--gr-muted-fg)', role: 'status' },\n info: { icon: IconInfo, color: 'var(--gr-info)', role: 'status' },\n success: { icon: IconCheck, color: 'var(--gr-success)', role: 'status' },\n warning: { icon: IconWarning, color: 'var(--gr-warning)', role: 'alert' },\n danger: { icon: IconError, color: 'var(--gr-danger)', role: 'alert' },\n slate: { icon: IconInfo, color: 'var(--gr-slate)', role: 'status' },\n azure: { icon: IconInfo, color: 'var(--gr-azure)', role: 'status' },\n}\n\nexport interface GrToasterProps {\n /** Угол экрана для стека уведомлений. */\n placement?: GrToasterPlacement\n /** Максимум одновременно видимых тостов; остальные ждут в очереди. По умолчанию `4`. */\n maxVisible?: number\n /** A11y-лейбл кнопки закрытия (i18n). */\n dismissLabel?: string\n /** A11y-лейбл контейнера-региона (i18n). */\n regionLabel?: string\n /**\n * Ширина стека. Число — пиксели, строка — любая CSS-длина. Уезжает в\n * `--gr-toaster-width`, поэтому то же самое можно задать и темой.\n */\n width?: string | number\n /**\n * Клавиша перевода фокуса в стек уведомлений; `false` отключает хоткей.\n * `F6` — рекомендация APG для перехода между «регионами» страницы.\n */\n focusHotkey?: string | false\n /**\n * Смахивание тоста к своему краю экрана. Клавиатурный эквивалент — `Delete`\n * и `Backspace` на сфокусированном тосте — остаётся и при выключенном жесте.\n */\n swipeDismiss?: boolean\n /**\n * Со скольких видимых тостов стек схлопывается в стопку: колонка занимает\n * место одного тоста, а остальные выглядывают из-под передней. Разворачивается\n * по наведению и по фокусу. `false` — не схлопывать никогда.\n *\n * Порог, а не переключатель: пока тостов мало, колонка читается лучше стопки,\n * и менять её незачем.\n */\n collapse?: number | false\n}\n\nimport { useGrThemeAttrs } from '../GrConfigProvider/context'\n\nconst props = withDefaults(defineProps<GrToasterProps>(), {\n placement: 'top-right',\n maxVisible: 4,\n dismissLabel: undefined,\n regionLabel: undefined,\n width: undefined,\n focusHotkey: 'F6',\n swipeDismiss: true,\n collapse: 3,\n})\n\n/**\n * Слот `actions` полностью заменяет дефолтные action-кнопки тоста. Получает сам\n * `toast` и `dismiss` — функцию, закрывающую именно этот тост.\n */\ndefineSlots<{\n actions?: (props: { toast: Toast, dismiss: () => void }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst slots = useSlots()\nconst resolvedDismissLabel = computed(() => props.dismissLabel ?? t('gr.toaster.dismiss', 'Dismiss'))\nconst resolvedRegionLabel = computed(() => props.regionLabel ?? t('gr.toaster.region', 'Notifications'))\n\nconst { list, dismiss, pause, resume } = useToast()\n\n// Единый список кнопок тоста: `action` (шорткат) + массив `actions`.\nfunction toastActions(toast: Toast): ToastAction[] {\n return [...(toast.action ? [toast.action] : []), ...(toast.actions ?? [])]\n}\n\n// Показываем блок действий, если есть кнопки или задан слот `actions`.\nfunction hasActions(toast: Toast): boolean {\n return Boolean(slots.actions) || toastActions(toast).length > 0\n}\n\n// Клик по action-кнопке тоста: вызываем обработчик и (по умолчанию) закрываем тост.\nfunction onAction(toast: Toast, action: ToastAction): void {\n action.onClick()\n if (action.dismissOnClick !== false)\n dismiss(toast.id)\n}\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем `teleport`.\n// Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n// рендер не совпадает с серверным и ломается гидрация (см. композабл).\nconst { target: portalTarget, enabled: teleportEnabled } = usePortalTarget()\n\n// Тема поддерева на телепортированную панель: в DOM она уезжает в `body`, то\n// есть вне обёртки провайдера, и `data-theme` с неё не наследуется. В дереве\n// компонентов панель остаётся внутри — `inject` доходит, и тему она ставит себе\n// сама.\nconst themeAttrs = useGrThemeAttrs()\n\n// Видимые тосты (не больше `maxVisible`); остальные ждут в очереди. Список\n// хранится новейшими вперёд, поэтому «видимые дожинают, новые ждут» — это\n// хвост: старейшие N. Взяв голову, стек показывал бы новейшие, и каждый пуш\n// вытеснял бы с экрана тост, который пользователь ещё читает.\nconst visibleToasts = computed(() => list.value.slice(-Math.max(1, props.maxVisible)))\nconst visibleIds = computed(() => new Set(visibleToasts.value.map(toast => toast.id)))\n\n// Пауза под курсором/фокусом (WCAG 2.2.1). Флага два и они независимы: один\n// `paused` терялся на «фокус внутри + мышь прошла насквозь» — `mouseleave`\n// возобновлял отсчёт под клавиатурным фокусом.\nconst hovered = ref(false)\nconst focusWithin = ref(false)\n\n// Контейнер стека: по нему ищутся тосты — и для фокуса, и для жеста.\nconst containerEl = ref<HTMLElement | null>(null)\n\n// ————— Стопка.\n\n/**\n * Развёрнуто — по тем же двум флагам, что держат `paused`: рука на стеке или\n * фокус внутри. Отдельного сигнала не заводим — читать стопку и не остановить\n * при этом таймеры было бы ловушкой.\n */\nconst expanded = computed(() => hovered.value || focusWithin.value)\nconst stacked = computed(() => props.collapse !== false && visibleToasts.value.length > Math.max(1, props.collapse))\nconst collapsed = computed(() => stacked.value && !expanded.value)\n\n/**\n * Высоты тостов: они разные (заголовок, заголовок с текстом, плюс кнопки), а\n * развёрнутая раскладка складывает их накопительно.\n *\n * `offsetHeight`, а не `getBoundingClientRect().height`: свёрнутая карточка\n * уменьшена `scale()`, и рект вернул бы её экранный размер — стопка мерила бы\n * саму себя и с каждым замером сжималась.\n */\nconst toastHeights = ref<Record<string, number>>({})\n\nlet heightObserver: ResizeObserver | null = null\n\nfunction measureToasts(): void {\n const root = containerEl.value\n if (!root)\n return\n\n const next: Record<string, number> = {}\n for (const node of root.querySelectorAll<HTMLElement>('[data-gr-toast]')) {\n const id = node.dataset.toastId\n // В jsdom высота нулевая: раскладка обязана это пережить, поэтому нули не\n // запоминаются, а потребитель значения падает на запасной путь.\n if (id && node.offsetHeight > 0)\n next[id] = node.offsetHeight\n\n heightObserver?.observe(node)\n }\n\n toastHeights.value = next\n}\n\nonMounted(() => {\n if (typeof ResizeObserver !== 'undefined')\n heightObserver = new ResizeObserver(() => measureToasts())\n\n measureToasts()\n})\n\n// Замер до отрисовки кадра: содержимое тоста меняется на месте (`update`,\n// `toast.promise`), и без этого стопка кадр стояла бы по старым высотам.\nonUpdated(measureToasts)\n\nonBeforeUnmount(() => {\n heightObserver?.disconnect()\n heightObserver = null\n})\n\n/** Все ли видимые тосты измерены. Пока нет — раскладка остаётся потоком. */\nconst measured = computed(() => visibleToasts.value.every(toast => toastHeights.value[toast.id] > 0))\n\n/** Абсолютная раскладка включается только когда есть чем считать смещения. */\nconst positioned = computed(() => stacked.value && measured.value)\n\nfunction expandedOffset(index: number): number {\n let offset = 0\n for (let i = 0; i < index; i++)\n offset += (toastHeights.value[visibleToasts.value[i].id] ?? 0) + STACK_GAP_PX\n\n return offset\n}\n\nfunction depthOf(index: number): number {\n return stackDepth(index, visibleToasts.value.length, props.placement)\n}\n\n/** Высота передней карточки — по ней живёт вся свёрнутая стопка. */\nconst frontHeight = computed(() => {\n const heights = visibleToasts.value.map(toast => toastHeights.value[toast.id] ?? 0)\n return props.placement.startsWith('top') ? heights[0] : heights[heights.length - 1]\n})\n\nconst stackHeight = computed(() => {\n if (!positioned.value)\n return undefined\n\n if (collapsed.value)\n return `${frontHeight.value}px`\n\n const heights = visibleToasts.value.map(toast => toastHeights.value[toast.id] ?? 0)\n return `${heights.reduce((sum, h) => sum + h, 0) + STACK_GAP_PX * (heights.length - 1)}px`\n})\n\n/** Карточка лежит за передней: в свёрнутой стопке от неё виден только край. */\nfunction isBehind(index: number): boolean {\n return collapsed.value && positioned.value && depthOf(index) > 0\n}\n\n/**\n * Содержимое карточек за передней гасится: из-под неё видно 12 пикселей, и в\n * эту полоску попадали обрывок строки и хвост полосы прогресса. Колода должна\n * читаться краями карточек, а не мусором в щели.\n */\nfunction toastContentStyle(index: number): Record<string, string> | undefined {\n return isBehind(index) ? { opacity: '0' } : undefined\n}\n\n// ————— Смахивание.\n\nconst swipingId = ref<string | null>(null)\nconst swipeOffset = ref(0)\nlet swipeStartX = 0\nlet swipeThreshold = SWIPE_THRESHOLD_MIN_PX\n\n// Тост, который тянут, тоже держит таймеры: иначе уведомление сгорало бы прямо\n// под пальцем, посреди жеста.\nconst paused = computed(() => hovered.value || focusWithin.value || swipingId.value !== null)\n\nfunction toastElement(id: string): HTMLElement | null {\n return containerEl.value?.querySelector<HTMLElement>(`[data-gr-toast][data-toast-id=\"${id}\"]`) ?? null\n}\n\n/** Жест отпущен и тост закрывается: переход снова разрешён (см. `releaseSwiped`). */\nconst swipeReleased = ref(false)\n\nfunction resetSwipe(): void {\n swipingId.value = null\n swipeOffset.value = 0\n swipeReleased.value = false\n}\n\n/**\n * Отпущенный тост уезжает за свой край и только потом закрывается.\n *\n * Два кадра здесь обязательны, и оба по одной причине: уходящий элемент Vue\n * больше не перерисовывает — он уезжает с тем стилем, что был на последнем\n * рендере. Значит и разрешение перехода, и конечную точку нужно успеть отдать\n * до закрытия: первый кадр снимает инлайновый `transition: none` (во время\n * жеста он нужен, иначе переходы группы борются с пальцем), второй задаёт точку\n * отлёта — с этого момента анимация уже идёт, и `leave` подхватывает её на ходу.\n *\n * Закрыв тост сразу, получили бы не отлёт, а мгновенное исчезновение: элемент\n * ушёл бы в `leave` с запрещённым переходом.\n */\nasync function releaseSwiped(id: string): Promise<void> {\n swipeReleased.value = true\n await nextTick()\n\n swipeOffset.value = SWIPE_DIRECTION[props.placement] * SWIPE_FLY_OUT_PX\n await nextTick()\n\n dismiss(id)\n resetSwipe()\n}\n\n/**\n * Движение к своему краю идёт один к одному, в обратную сторону — с\n * сопротивлением: тост едет за пальцем, но закрыть его «наоборот» нельзя.\n */\nfunction resistOffset(delta: number): number {\n const toEdge = SWIPE_DIRECTION[props.placement]\n\n return Math.sign(delta) === toEdge ? delta : delta / SWIPE_RESISTANCE\n}\n\nconst swipe = useDragGesture({\n disabled: () => !props.swipeDismiss,\n onStart: (event) => {\n const target = event.target as HTMLElement | null\n // Нажатие на кнопке — это нажатие на кнопке: закрытие и действия тоста не\n // должны превращаться в протяжку.\n if (target?.closest('button, a[href]'))\n return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id)\n return false\n\n swipingId.value = id\n swipeOffset.value = 0\n swipeStartX = event.clientX\n swipeThreshold = Math.max(SWIPE_THRESHOLD_MIN_PX, host.getBoundingClientRect().width * SWIPE_THRESHOLD_RATIO)\n },\n onMove: (event) => {\n // Против выделения текста тоста во время протяжки.\n event.preventDefault()\n swipeOffset.value = resistOffset(event.clientX - swipeStartX)\n },\n onEnd: () => {\n const id = swipingId.value\n const passed = id !== null\n && Math.sign(swipeOffset.value) === SWIPE_DIRECTION[props.placement]\n && Math.abs(swipeOffset.value) >= swipeThreshold\n\n if (passed)\n void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\n/**\n * Стиль тоста: смахивание и стопка пишут в один `transform`. Двух инлайновых\n * трансформов не бывает — второй затирает первый, и жест отменял бы раскладку.\n */\nfunction toastStyle(toast: Toast, index: number): Record<string, string> | undefined {\n const style: Record<string, string> = {}\n const transforms: string[] = []\n\n if (swipingId.value === toast.id) {\n // Смахивание идёт первым: трансформы применяются справа налево, и после\n // `scale()` жест ехал бы в масштабе карточки, а не в пикселях экрана.\n transforms.push(`translateX(${swipeOffset.value}px)`)\n style.opacity = String(swipeOpacity(swipeOffset.value, swipeThreshold))\n\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n if (!swipeReleased.value)\n style.transition = 'none'\n }\n\n if (positioned.value) {\n const depth = depthOf(index)\n\n transforms.push(collapsed.value\n ? collapsedTransform(depth, props.placement)\n : `translateY(${expandedOffset(index)}px)`)\n\n style.zIndex = String(visibleToasts.value.length - depth)\n\n /*\n * Уменьшение идёт от того края, которым стопка прижата к углу. По центру\n * (умолчание) карточка теряет высоту с обеих сторон, и соседи разной высоты\n * выглядывают на разное расстояние — колода получается рваной.\n */\n style.transformOrigin = props.placement.startsWith('top') ? 'top center' : 'bottom center'\n\n /*\n * Высота карточек за передней приравнивается к её собственной: иначе более\n * высокий тост выглядывал бы дальше соседа, и шаг колоды плясал бы вместе с\n * длиной сообщения.\n */\n if (collapsed.value && depth > 0 && frontHeight.value > 0)\n style.height = `${frontHeight.value}px`\n\n if (collapsed.value && depth > STACK_PEEK_DEPTH) {\n style.opacity = '0'\n // Почти невидимый край иначе ловил бы клики мимо передней карточки.\n style.pointerEvents = 'none'\n }\n }\n\n if (transforms.length > 0)\n style.transform = transforms.join(' ')\n\n return Object.keys(style).length > 0 ? style : undefined\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace')\n return\n\n event.preventDefault()\n\n const index = visibleToasts.value.findIndex(item => item.id === toast.id)\n const next = visibleToasts.value[index + 1] ?? visibleToasts.value[index - 1]\n\n dismiss(toast.id)\n\n // Фокус не должен упасть на `body`: дальше по стеку есть что читать.\n if (next)\n void nextTick(() => toastElement(next.id)?.focus())\n}\n\n// Единый источник правды по таймерам: тост тикает, только если он видим И стек не на\n// паузе. Очередь и hover — на паузе. Реагирует на изменения списка/hover.\n//\n// `timeoutMs` читается ради зависимости, а не ради значения: `toast.promise` и\n// `update` перезапускают таймер уже существующего тоста, не трогая ни список, ни\n// паузу. Без этой зависимости эффект не просыпался бы, и заново заведённый\n// таймер тикал бы под курсором или у тоста, который ещё ждёт в очереди, — тот\n// сгорал бы, ни разу не показавшись.\nwatchEffect(() => {\n for (const toast of list.value) {\n const shouldTick = toast.timeoutMs > 0 && visibleIds.value.has(toast.id) && !paused.value\n\n if (shouldTick)\n resume(toast.id)\n else\n pause(toast.id)\n }\n})\n\nfunction metaFor(tone: GrToastTone): ToneMeta {\n return TONE_META[tone] ?? TONE_META.info\n}\n\nconst containerClass = computed(() => PLACEMENT_CLASS[props.placement])\n\nconst listClass = computed(() => (positioned.value\n ? 'relative transition-[height] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'\n : 'grid gap-3'))\n\nconst listStyle = computed(() => (stackHeight.value ? { height: stackHeight.value } : undefined))\n\n/**\n * В стопке карточка вынута из потока, а её место задаёт трансформ — он и\n * обязан ехать плавно. В обычной колонке переход не нужен: там позицию держит\n * сама раскладка, а сдвиги отрабатывает `move-class` группы.\n */\nconst toastLayoutClass = computed(() => (positioned.value\n ? 'absolute inset-x-0 top-0 transition-[transform,opacity] duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'\n : 'relative'))\n\n/**\n * В стопке перемещение группы выключается. `TransitionGroup` двигает детей\n * приёмом FLIP: сам пишет в инлайновый `transform` и по концу перехода\n * **очищает** его — то есть стирает раскладку стопки. Класс без перехода\n * трансформа отключает проверку `hasCSSTransform`, и до записи дело не доходит.\n */\nconst moveClass = computed(() => (positioned.value\n ? 'transition-none'\n : 'transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]'))\n\n/**\n * В стопке появление и уход красятся только прозрачностью: `translate-y-*` из\n * классов группы спорил бы с инлайновым трансформом раскладки, а инлайновый\n * сильнее — сдвиг всё равно не сыграл бы.\n */\nconst enterFromClass = computed(() => (positioned.value ? 'opacity-0' : 'opacity-0 translate-y-2'))\nconst enterToClass = computed(() => (positioned.value ? 'opacity-100' : 'opacity-100 translate-y-0'))\nconst leaveFromClass = computed(() => (positioned.value ? 'opacity-100' : 'opacity-100 translate-y-0'))\nconst leaveToClass = computed(() => (positioned.value ? 'opacity-0' : 'opacity-0 translate-y-2'))\n\nconst containerStyle = computed(() => {\n if (props.width === undefined)\n return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\n\n/**\n * Переводит фокус на верхний тост. Тост фокусируем только программно\n * (`tabindex=\"-1\"`): собственной остановкой `Tab` стек быть не должен, иначе\n * всплывающее уведомление перехватывало бы обход страницы.\n */\nfunction focus(): boolean {\n const target = containerEl.value?.querySelector<HTMLElement>('[data-gr-toast]')\n if (!target)\n return false\n\n target.focus()\n return true\n}\n\nconst hotkeyBinding = computed(() => ({\n enabled: props.focusHotkey !== false && visibleToasts.value.length > 0,\n handlers: { [props.focusHotkey || 'F6']: { handler: onFocusHotkey, allowInEditable: true } },\n}))\n\nfunction onFocusHotkey(event: KeyboardEvent): void {\n if (focus())\n event.preventDefault()\n}\n\ndefineExpose({ focus })\n</script>\n\n<template>\n <teleport :to=\"portalTarget\" :disabled=\"!teleportEnabled\">\n <div\n ref=\"containerEl\"\n v-hotkey=\"hotkeyBinding\"\n v-bind=\"themeAttrs\"\n data-gr-toaster\n data-gr-overlay-root\n role=\"region\"\n :aria-label=\"resolvedRegionLabel\"\n class=\"fixed z-[var(--gr-z-toast)] w-[var(--gr-toaster-width,360px)] max-w-[calc(100vw-2rem)]\"\n :class=\"containerClass\"\n :style=\"containerStyle\"\n @mouseenter=\"hovered = true\"\n @mouseleave=\"hovered = false\"\n @focusin=\"focusWithin = true\"\n @focusout=\"focusWithin = false\"\n >\n <TransitionGroup\n tag=\"div\"\n :class=\"listClass\"\n :style=\"listStyle\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n :enter-from-class=\"enterFromClass\"\n :enter-to-class=\"enterToClass\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n :leave-from-class=\"leaveFromClass\"\n :leave-to-class=\"leaveToClass\"\n :move-class=\"moveClass\"\n >\n <div\n v-for=\"(toast, index) in visibleToasts\"\n :key=\"toast.id\"\n data-gr-toast\n :data-tone=\"toast.tone\"\n :data-toast-id=\"toast.id\"\n :role=\"metaFor(toast.tone).role\"\n aria-atomic=\"true\"\n tabindex=\"-1\"\n class=\"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)]\"\n :class=\"[swipeDismiss ? '[touch-action:pan-y]' : '', toastLayoutClass]\"\n :style=\"toastStyle(toast, index)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div\n class=\"flex items-start gap-3 transition-opacity duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n :style=\"toastContentStyle(index)\"\n >\n <GrIcon size=\"md\" class=\"mt-0.5\" :style=\"{ color: metaFor(toast.tone).color }\">\n <component :is=\"metaFor(toast.tone).icon\" />\n </GrIcon>\n <div class=\"min-w-0 flex-1\">\n <div class=\"text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] font-700\">\n {{ toast.title }}\n </div>\n <div v-if=\"toast.message\" class=\"mt-0.5 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]\">\n {{ toast.message }}\n </div>\n\n \n <div v-if=\"hasActions(toast)\" class=\"mt-2 flex flex-wrap gap-2\">\n <slot name=\"actions\" :toast=\"toast\" :dismiss=\"() => dismiss(toast.id)\">\n <GrButton\n v-for=\"(action, index) in toastActions(toast)\"\n :key=\"index\"\n :variant=\"action.variant ?? 'outline'\"\n :size=\"action.size ?? 'sm'\"\n data-gr-toast-action\n @click=\"onAction(toast, action)\"\n >\n {{ action.label }}\n </GrButton>\n </slot>\n </div>\n </div>\n <GrButton\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedDismissLabel\"\n @click=\"dismiss(toast.id)\"\n >\n <GrIcon size=\"sm\">\n <IconClose />\n </GrIcon>\n </GrButton>\n </div>\n\n \n <div\n v-if=\"toast.timeoutMs > 0\"\n data-gr-toast-progress\n aria-hidden=\"true\"\n class=\"gr-toast-progress absolute bottom-0 left-0 h-[2px] w-full origin-left\"\n :style=\"{\n backgroundColor: metaFor(toast.tone).color,\n animationDuration: `${toast.timeoutMs}ms`,\n animationPlayState: paused ? 'paused' : 'running',\n ...toastContentStyle(index),\n }\"\n />\n </div>\n </TransitionGroup>\n </div>\n </teleport>\n</template>\n\n<style scoped>\n.gr-toast-progress {\n animation-name: gr-toast-progress;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n}\n\n@keyframes gr-toast-progress {\n from {\n transform: scaleX(1);\n }\n to {\n transform: scaleX(0);\n }\n}\n\n/*\n * Единственная анимация пакета, которую глобальный кламп чинит неверно.\n *\n * У полосы `animation-fill-mode: forwards`, поэтому сжатая до `0.01ms` она не\n * возвращается в исходное состояние, а фиксируется на `scaleX(0)`: таймер\n * выглядит истёкшим, пока тост ещё висит на экране. Полоса — единственный\n * носитель этого смысла, и статичной её оставить нельзя, поэтому под reduce она\n * убирается совсем. Автозакрытие ведёт JS-таймер, оно не страдает, а сам элемент\n * и так `aria-hidden`.\n */\n@media (prefers-reduced-motion: reduce) {\n .gr-toast-progress {\n display: none;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,MAAM,YAA2C;GAC/C,SAAS;IAAE,MAAM;IAAU,OAAO;IAAqB,MAAM;GAAS;GACtE,SAAS;IAAE,MAAM;IAAU,OAAO;IAAsB,MAAM;GAAS;GACvE,MAAM;IAAE,MAAM;IAAU,OAAO;IAAkB,MAAM;GAAS;GAChE,SAAS;IAAE,MAAM;IAAW,OAAO;IAAqB,MAAM;GAAS;GACvE,SAAS;IAAE,MAAM;IAAa,OAAO;IAAqB,MAAM;GAAQ;GACxE,QAAQ;IAAE,MAAM;IAAW,OAAO;IAAoB,MAAM;GAAQ;GACpE,OAAO;IAAE,MAAM;IAAU,OAAO;IAAmB,MAAM;GAAS;GAClE,OAAO;IAAE,MAAM;IAAU,OAAO;IAAmB,MAAM;GAAS;EACpE;EAuCA,MAAM,QAAQ;;;;;EAmBd,MAAM,EAAE,MAAM,2BAA2B;EACzC,MAAM,QAAQ,SAAS;EACvB,MAAM,uBAAuB,eAAe,MAAM,gBAAgB,EAAE,sBAAsB,SAAS,CAAC;EACpG,MAAM,sBAAsB,eAAe,MAAM,eAAe,EAAE,qBAAqB,eAAe,CAAC;EAEvG,MAAM,EAAE,MAAM,SAAS,OAAO,WAAW,SAAS;EAGlD,SAAS,aAAa,OAA6B;GACjD,OAAO,CAAC,GAAI,MAAM,SAAS,CAAC,MAAM,MAAM,IAAI,CAAC,GAAI,GAAI,MAAM,WAAW,CAAC,CAAE;EAC3E;EAGA,SAAS,WAAW,OAAuB;GACzC,OAAO,QAAQ,MAAM,OAAO,KAAK,aAAa,KAAK,CAAC,CAAC,SAAS;EAChE;EAGA,SAAS,SAAS,OAAc,QAA2B;GACzD,OAAO,QAAQ;GACf,IAAI,OAAO,mBAAmB,OAC5B,QAAQ,MAAM,EAAE;EACpB;EAKA,MAAM,EAAE,QAAQ,cAAc,SAAS,oBAAoB,gBAAgB;EAM3E,MAAM,aAAa,gBAAgB;EAMnC,MAAM,gBAAgB,eAAe,KAAK,MAAM,MAAM,CAAC,KAAK,IAAI,GAAG,MAAM,UAAU,CAAC,CAAC;EACrF,MAAM,aAAa,eAAe,IAAI,IAAI,cAAc,MAAM,KAAI,UAAS,MAAM,EAAE,CAAC,CAAC;EAKrF,MAAM,UAAU,IAAI,KAAK;EACzB,MAAM,cAAc,IAAI,KAAK;EAG7B,MAAM,cAAc,IAAwB,IAAI;;;;;;EAShD,MAAM,WAAW,eAAe,QAAQ,SAAS,YAAY,KAAK;EAClE,MAAM,UAAU,eAAe,MAAM,aAAa,SAAS,cAAc,MAAM,SAAS,KAAK,IAAI,GAAG,MAAM,QAAQ,CAAC;EACnH,MAAM,YAAY,eAAe,QAAQ,SAAS,CAAC,SAAS,KAAK;;;;;;;;;EAUjE,MAAM,eAAe,IAA4B,CAAC,CAAC;EAEnD,IAAI,iBAAwC;EAE5C,SAAS,gBAAsB;GAC7B,MAAM,OAAO,YAAY;GACzB,IAAI,CAAC,MACH;GAEF,MAAM,OAA+B,CAAC;GACtC,KAAK,MAAM,QAAQ,KAAK,iBAA8B,iBAAiB,GAAG;IACxE,MAAM,KAAK,KAAK,QAAQ;IAGxB,IAAI,MAAM,KAAK,eAAe,GAC5B,KAAK,MAAM,KAAK;IAElB,gBAAgB,QAAQ,IAAI;GAC9B;GAEA,aAAa,QAAQ;EACvB;EAEA,gBAAgB;GACd,IAAI,OAAO,mBAAmB,aAC5B,iBAAiB,IAAI,qBAAqB,cAAc,CAAC;GAE3D,cAAc;EAChB,CAAC;EAID,UAAU,aAAa;EAEvB,sBAAsB;GACpB,gBAAgB,WAAW;GAC3B,iBAAiB;EACnB,CAAC;;EAGD,MAAM,WAAW,eAAe,cAAc,MAAM,OAAM,UAAS,aAAa,MAAM,MAAM,MAAM,CAAC,CAAC;;EAGpG,MAAM,aAAa,eAAe,QAAQ,SAAS,SAAS,KAAK;EAEjE,SAAS,eAAe,OAAuB;GAC7C,IAAI,SAAS;GACb,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KACzB,WAAW,aAAa,MAAM,cAAc,MAAM,EAAE,CAAC,OAAO,KAAA;GAE9D,OAAO;EACT;EAEA,SAAS,QAAQ,OAAuB;GACtC,OAAO,WAAW,OAAO,cAAc,MAAM,QAAQ,MAAM,SAAS;EACtE;;EAGA,MAAM,cAAc,eAAe;GACjC,MAAM,UAAU,cAAc,MAAM,KAAI,UAAS,aAAa,MAAM,MAAM,OAAO,CAAC;GAClF,OAAO,MAAM,UAAU,WAAW,KAAK,IAAI,QAAQ,KAAK,QAAQ,QAAQ,SAAS;EACnF,CAAC;EAED,MAAM,cAAc,eAAe;GACjC,IAAI,CAAC,WAAW,OACd,OAAO,KAAA;GAET,IAAI,UAAU,OACZ,OAAO,GAAG,YAAY,MAAM;GAE9B,MAAM,UAAU,cAAc,MAAM,KAAI,UAAS,aAAa,MAAM,MAAM,OAAO,CAAC;GAClF,OAAO,GAAG,QAAQ,QAAQ,KAAK,MAAM,MAAM,GAAG,CAAC,IAAA,MAAoB,QAAQ,SAAS,GAAG;EACzF,CAAC;;EAGD,SAAS,SAAS,OAAwB;GACxC,OAAO,UAAU,SAAS,WAAW,SAAS,QAAQ,KAAK,IAAI;EACjE;;;;;;EAOA,SAAS,kBAAkB,OAAmD;GAC5E,OAAO,SAAS,KAAK,IAAI,EAAE,SAAS,IAAI,IAAI,KAAA;EAC9C;EAIA,MAAM,YAAY,IAAmB,IAAI;EACzC,MAAM,cAAc,IAAI,CAAC;EACzB,IAAI,cAAc;EAClB,IAAI,iBAAA;EAIJ,MAAM,SAAS,eAAe,QAAQ,SAAS,YAAY,SAAS,UAAU,UAAU,IAAI;EAE5F,SAAS,aAAa,IAAgC;GACpD,OAAO,YAAY,OAAO,cAA2B,kCAAkC,GAAG,GAAG,KAAK;EACpG;;EAGA,MAAM,gBAAgB,IAAI,KAAK;EAE/B,SAAS,aAAmB;GAC1B,UAAU,QAAQ;GAClB,YAAY,QAAQ;GACpB,cAAc,QAAQ;EACxB;;;;;;;;;;;;;;EAeA,eAAe,cAAc,IAA2B;GACtD,cAAc,QAAQ;GACtB,MAAM,SAAS;GAEf,YAAY,QAAQ,gBAAgB,MAAM,aAAA;GAC1C,MAAM,SAAS;GAEf,QAAQ,EAAE;GACV,WAAW;EACb;;;;;EAMA,SAAS,aAAa,OAAuB;GAC3C,MAAM,SAAS,gBAAgB,MAAM;GAErC,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,QAAQ,QAAA;EAC/C;EAEA,MAAM,QAAQ,eAAe;GAC3B,gBAAgB,CAAC,MAAM;GACvB,UAAU,UAAU;IAClB,MAAM,SAAS,MAAM;IAGrB,IAAI,QAAQ,QAAQ,iBAAiB,GACnC,OAAO;IAET,MAAM,OAAO,QAAQ,QAAqB,iBAAiB;IAC3D,MAAM,KAAK,MAAM,QAAQ;IACzB,IAAI,CAAC,QAAQ,CAAC,IACZ,OAAO;IAET,UAAU,QAAQ;IAClB,YAAY,QAAQ;IACpB,cAAc,MAAM;IACpB,iBAAiB,KAAK,IAAA,IAA4B,KAAK,sBAAsB,CAAC,CAAC,QAAQ,qBAAqB;GAC9G;GACA,SAAS,UAAU;IAEjB,MAAM,eAAe;IACrB,YAAY,QAAQ,aAAa,MAAM,UAAU,WAAW;GAC9D;GACA,aAAa;IACX,MAAM,KAAK,UAAU;IAKrB,IAJe,OAAO,QACjB,KAAK,KAAK,YAAY,KAAK,MAAM,gBAAgB,MAAM,cACvD,KAAK,IAAI,YAAY,KAAK,KAAK,gBAGlC,cAAmB,EAAE;SAClB,WAAW;GAClB;GAGA,UAAU;EACZ,CAAC;;;;;EAMD,SAAS,WAAW,OAAc,OAAmD;GACnF,MAAM,QAAgC,CAAC;GACvC,MAAM,aAAuB,CAAC;GAE9B,IAAI,UAAU,UAAU,MAAM,IAAI;IAGhC,WAAW,KAAK,cAAc,YAAY,MAAM,IAAI;IACpD,MAAM,UAAU,OAAO,aAAa,YAAY,OAAO,cAAc,CAAC;IAKtE,IAAI,CAAC,cAAc,OACjB,MAAM,aAAa;GACvB;GAEA,IAAI,WAAW,OAAO;IACpB,MAAM,QAAQ,QAAQ,KAAK;IAE3B,WAAW,KAAK,UAAU,QACtB,mBAAmB,OAAO,MAAM,SAAS,IACzC,cAAc,eAAe,KAAK,EAAE,IAAI;IAE5C,MAAM,SAAS,OAAO,cAAc,MAAM,SAAS,KAAK;IAOxD,MAAM,kBAAkB,MAAM,UAAU,WAAW,KAAK,IAAI,eAAe;IAO3E,IAAI,UAAU,SAAS,QAAQ,KAAK,YAAY,QAAQ,GACtD,MAAM,SAAS,GAAG,YAAY,MAAM;IAEtC,IAAI,UAAU,SAAS,QAAA,GAA0B;KAC/C,MAAM,UAAU;KAEhB,MAAM,gBAAgB;IACxB;GACF;GAEA,IAAI,WAAW,SAAS,GACtB,MAAM,YAAY,WAAW,KAAK,GAAG;GAEvC,OAAO,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,IAAI,QAAQ,KAAA;EACjD;;;;;EAMA,SAAS,eAAe,OAAsB,OAAoB;GAChE,IAAI,MAAM,QAAQ,YAAY,MAAM,QAAQ,aAC1C;GAEF,MAAM,eAAe;GAErB,MAAM,QAAQ,cAAc,MAAM,WAAU,SAAQ,KAAK,OAAO,MAAM,EAAE;GACxE,MAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc,MAAM,QAAQ;GAE3E,QAAQ,MAAM,EAAE;GAGhB,IAAI,MACF,eAAoB,aAAa,KAAK,EAAE,CAAC,EAAE,MAAM,CAAC;EACtD;EAUA,kBAAkB;GAChB,KAAK,MAAM,SAAS,KAAK,OAGvB,IAFmB,MAAM,YAAY,KAAK,WAAW,MAAM,IAAI,MAAM,EAAE,KAAK,CAAC,OAAO,OAGlF,OAAO,MAAM,EAAE;QAEf,MAAM,MAAM,EAAE;EAEpB,CAAC;EAED,SAAS,QAAQ,MAA6B;GAC5C,OAAO,UAAU,SAAS,UAAU;EACtC;EAEA,MAAM,iBAAiB,eAAe,gBAAgB,MAAM,UAAU;EAEtE,MAAM,YAAY,eAAgB,WAAW,QACzC,8FACA,YAAa;EAEjB,MAAM,YAAY,eAAgB,YAAY,QAAQ,EAAE,QAAQ,YAAY,MAAM,IAAI,KAAA,CAAU;;;;;;EAOhG,MAAM,mBAAmB,eAAgB,WAAW,QAChD,yHACA,UAAW;;;;;;;EAQf,MAAM,YAAY,eAAgB,WAAW,QACzC,oBACA,mFAAoF;;;;;;EAOxF,MAAM,iBAAiB,eAAgB,WAAW,QAAQ,cAAc,yBAA0B;EAClG,MAAM,eAAe,eAAgB,WAAW,QAAQ,gBAAgB,2BAA4B;EACpG,MAAM,iBAAiB,eAAgB,WAAW,QAAQ,gBAAgB,2BAA4B;EACtG,MAAM,eAAe,eAAgB,WAAW,QAAQ,cAAc,yBAA0B;EAEhG,MAAM,iBAAiB,eAAe;GACpC,IAAI,MAAM,UAAU,KAAA,GAClB,OAAO,KAAA;GAET,OAAO,EAAE,sBAAsB,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,MAAM,MAAM,MAAM,MAAM;EACpG,CAAC;;;;;;EAOD,SAAS,QAAiB;GACxB,MAAM,SAAS,YAAY,OAAO,cAA2B,iBAAiB;GAC9E,IAAI,CAAC,QACH,OAAO;GAET,OAAO,MAAM;GACb,OAAO;EACT;EAEA,MAAM,gBAAgB,gBAAgB;GACpC,SAAS,MAAM,gBAAgB,SAAS,cAAc,MAAM,SAAS;GACrE,UAAU,GAAG,MAAM,eAAe,OAAO;IAAE,SAAS;IAAe,iBAAiB;GAAK,EAAE;EAC7F,EAAE;EAEF,SAAS,cAAc,OAA4B;GACjD,IAAI,MAAM,GACR,MAAM,eAAe;EACzB;EAEA,SAAa,EAAE,MAAM,CAAC;;GAIpB,OAAA,UAAA,GAAA,YAyGW,UAAA;IAzGA,IAAI,MAAA,YAAA;IAAe,UAAQ,CAAG,MAAA,eAAA;GACvC,GAAA,CAAA,gBAAA,UAAA,GAAA,mBAuGM,OAvGN,WAuGM;IAtGE,SAAA;IAAJ,KAAI;GAEI,GAAA,MAAA,UAAA,GAAU;IAClB,mBAAA;IACA,wBAAA;IACA,MAAK;IACJ,cAAY,oBAAA;IACb,OAAK,CAAC,0FACE,eAAA,KAAc;IACrB,OAAO,eAAA;IACP,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;IACnB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,QAAO;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;IACpB,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,YAAA,QAAW;GAExB,CAAA,GAAA,CAAA,YAsFkB,iBAAA;IArFd,KAAI;IACH,OAAK,eAAE,UAAA,KAAS;IAChB,OAAK,eAAE,UAAA,KAAS;IACjB,sBAAmB;IAClB,oBAAkB,eAAA;IAClB,kBAAgB,aAAA;IACjB,sBAAmB;IAClB,oBAAkB,eAAA;IAClB,kBAAgB,aAAA;IAChB,cAAY,UAAA;;IAGX,SAAA,cAAuC,EAD3C,UAAA,IAAA,GAAA,mBAyEM,UAAA,MAAA,WAxEuB,cAAA,QAAjB,OAAO,UAAK;KADxB,OAAA,UAAA,GAAA,mBAyEM,OAAA;MAvED,KAAK,MAAM;MACZ,iBAAA;MACC,aAAW,MAAM;MACjB,iBAAe,MAAM;MACrB,MAAM,QAAQ,MAAM,IAAI,CAAA,CAAE;MAC3B,eAAY;MACZ,UAAS;MACT,OAAK,eAAA,CAAC,uOAAqO,CAClO,QAAA,eAAY,yBAAA,IAAgC,iBAAA,KAAgB,CAAA,CAAA;MACpE,OAAK,eAAE,WAAW,OAAO,KAAK,CAAA;MAC9B,eAAW,OAAA,OAAA,OAAA,MAAE,GAAA,SAAA,MAAA,KAAA,CAAK,CAAC,SAAN,MAAA,KAAA,CAAK,CAAC,MAAK,GAAA,IAAA;MACxB,YAAO,WAAE,eAAe,QAAQ,KAAK;KAExC,GAAA,CAAA,mBA2CM,OAAA;MA1CF,OAAM;MACL,OAAK,eAAE,kBAAkB,KAAK,CAAA;;MAEjC,YAES,MAAA,cAAA,GAAA;OAFD,MAAK;OAAK,OAAM;OAAU,OAAK,eAAA,EAAA,OAAW,QAAQ,MAAM,IAAI,CAAA,CAAE,MAAK,CAAA;;OACzE,SAAA,cAA4C,EAA5C,UAAA,GAAA,YAA4C,wBAA5B,QAAQ,MAAM,IAAI,CAAA,CAAE,IAAI,CAAA,EAAA,CAAA;;;MAE1C,mBAwBM,OAxBN,YAwBM;OAvBJ,mBAEM,OAFN,YAEM,gBADD,MAAM,KAAK,GAAA,CAAA;OAEL,MAAM,WAAjB,UAAA,GAAA,mBAEM,OAFN,YAEM,gBADD,MAAM,OAAO,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;OAKP,WAAW,KAAK,KAA3B,UAAA,GAAA,mBAaM,OAbN,YAaM,CAZJ,WAWO,KAAA,QAAA,WAAA;QAXsB;QAAQ,eAAe,MAAA,OAAA,CAAO,CAAC,MAAM,EAAE;OAApE,SAWO,EAVL,UAAA,IAAA,GAAA,mBASW,UAAA,MAAA,WARmB,aAAa,KAAK,IAApC,QAAQ,UAAK;QADzB,OAAA,UAAA,GAAA,YASW,MAAA,gBAAA,GAAA;SAPN,KAAK;SACL,SAAS,OAAO,WAAO;SACvB,MAAM,OAAO,QAAI;SAClB,wBAAA;SACC,UAAK,WAAE,SAAS,OAAO,MAAM;;SAEhC,SAAA,cAAkB,CAAf,gBAAA,gBAAA,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;MAKvB,YAUW,MAAA,gBAAA,GAAA;OATP,SAAQ;OACR,MAAK;OACL,QAAA;OACC,cAAY,qBAAA;OACZ,UAAK,WAAE,MAAA,OAAA,CAAO,CAAC,MAAM,EAAE;;OAE1B,SAAA,cAES,CAFT,YAES,MAAA,cAAA,GAAA,EAFD,MAAK,KAAI,GAAA;QACf,SAAA,cAAa,CAAb,YAAa,MAAA,SAAA,CAAA,CAAA,CAAA;;;;;KAOT,GAAA,CAAA,GAAA,MAAM,YAAS,KADzB,UAAA,GAAA,mBAWE,OAAA;;MATE,0BAAA;MACA,eAAY;MACZ,OAAM;MACL,OAAK,eAAA;OAAqC,iBAAA,QAAQ,MAAM,IAAI,CAAA,CAAE;OAA6C,mBAAA,GAAA,MAAM,UAAS;OAA0C,oBAAA,OAAA,QAAM,WAAA;OAA4C,GAAA,kBAAkB,KAAK;;;;;;;;;;;;;GA5F1O,CAAA,CAAA,GAAA,IAAA,UAAA,IAAA,CAAA,CAAA,MAAA,OAAA,GAAA,cAAA,KAAa,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,MAAA,UAAA,CAAA"}

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

@@ -1,3 +1,3 @@
-import { n as grToasterSafelist, t as grToasterConfig } from "../../chunks/config-B5SBUa6u.js";
-import { t as GrToaster_default } from "./chunks/GrToaster-CZixNk0l.js";
+import { n as grToasterSafelist, t as grToasterConfig } from "../../chunks/config-B7qZqiUB.js";
+import { t as GrToaster_default } from "./chunks/GrToaster-OzT1VKcp.js";
 export { GrToaster_default as GrToaster, GrToaster_default as default, grToasterConfig, grToasterSafelist };

package/dist/components/GrToaster/styles.css CHANGED Viewed

	@@ -1 +1 @@
1	- .gr-toast-progress[data-v-~~a9c5da3d~~]{animation-name:gr-toast-progress-~~a9c5da3d~~;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes gr-toast-progress-~~a9c5da3d~~{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.gr-toast-progress[data-v-~~a9c5da3d~~]{display:none}}
1	+ .gr-toast-progress[data-v-185f56c0]{animation-name:gr-toast-progress-185f56c0;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes gr-toast-progress-185f56c0{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@media (prefers-reduced-motion:reduce){.gr-toast-progress[data-v-185f56c0]{display:none}}

package/dist/components/GrTooltip/chunks/{GrTooltip-DkMMM0uq.js → GrTooltip-BDcFycvW.js} RENAMED Viewed

@@ -5,14 +5,10 @@ import { vClickOutside } from "../../../directives/clickOutside.js";
 import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-DTZIgmje.js";
 import { useFloating } from "../../../composables/useFloating.js";
 import { useDismissible } from "../../../composables/useDismissible.js";
-import { a as triggerIconSizes, i as panelWidths, r as panelSizes } from "../../../chunks/config-iemgzS4x.js";
-import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeStyle, onMounted, onUnmounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watchEffect, withCtx, withDirectives } from "vue";
+import { n as panelWidths, r as triggerIconSizes, t as panelSizes } from "../../../chunks/grTooltipStyles-CtbGEEGV.js";
+import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onMounted, onUnmounted, onUpdated, openBlock, ref, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watchEffect, withCtx, withDirectives } from "vue";
 //#region src/components/GrTooltip/GrTooltip.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	"data-gr-tooltip": "",
-	class: "relative inline-flex"
-};
-var _hoisted_2 = ["tabindex", "aria-describedby"];
+var _hoisted_1 = ["tabindex", "aria-describedby"];
 var FOCUSABLE_SELECTOR = "a[href],button,input,select,textarea,[tabindex]:not([tabindex=\"-1\"])";
 //#endregion
 //#region src/components/GrTooltip/GrTooltip.vue
@@ -33,6 +29,14 @@ var GrTooltip_default = /* @__PURE__ */ defineComponent({
 		open: {
 			type: Boolean,
 			default: void 0
+		},
+		block: {
+			type: Boolean,
+			default: false
+		},
+		describeTrigger: {
+			type: Boolean,
+			default: true
 		}
 	},
 	emits: ["update:open"],
@@ -130,21 +134,30 @@ var GrTooltip_default = /* @__PURE__ */ defineComponent({
 		onUpdated(syncSlotFocusable);
 		watchEffect((onCleanup) => {
 			const el = slotFocusableEl.value;
-			if (!el) return;
+			if (!el || !props.describeTrigger) return;
 			el.setAttribute("aria-describedby", tooltipId);
 			onCleanup(() => el.removeAttribute("aria-describedby"));
 		});
 		const wrapperTabindex = computed(() => slotFocusableEl.value ? void 0 : 0);
-		const wrapperDescribedBy = computed(() => slotFocusableEl.value ? void 0 : tooltipId);
+		const wrapperDescribedBy = computed(() => slotFocusableEl.value || !props.describeTrigger ? void 0 : tooltipId);
+		/**
+		* Обе обёртки, а не только внешняя: внутренний триггер тоже `inline-flex`, и
+		* снаружи до него не дотянуться — оставь его как есть, и содержимое всё равно
+		* схлопнется по себе.
+		*/
+		const layoutClass = computed(() => props.block ? "flex w-full" : "inline-flex");
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("span", _hoisted_1, [createElementVNode("span", {
+			return withDirectives((openBlock(), createElementBlock("span", {
+				"data-gr-tooltip": "",
+				class: normalizeClass(["relative", layoutClass.value])
+			}, [createElementVNode("span", {
 				ref_key: "triggerEl",
 				ref: triggerEl,
 				"data-gr-tooltip-trigger": "",
 				"data-testid": "gr-tooltip-trigger",
 				tabindex: wrapperTabindex.value,
 				"aria-describedby": wrapperDescribedBy.value,
-				class: "inline-flex items-center justify-center focus:outline-none",
+				class: normalizeClass(["items-center justify-center focus:outline-none", layoutClass.value]),
 				style: normalizeStyle(triggerStyle.value),
 				onMouseenter: show,
 				onMouseleave: hide,
@@ -154,7 +167,7 @@ var GrTooltip_default = /* @__PURE__ */ defineComponent({
 			}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(GrIcon_default), { size: triggerIconSize.value }, {
 				default: withCtx(() => [createVNode(unref(info_default))]),
 				_: 1
-			}, 8, ["size"])])], 44, _hoisted_2), (openBlock(), createBlock(Teleport, {
+			}, 8, ["size"])])], 46, _hoisted_1), (openBlock(), createBlock(Teleport, {
 				to: unref(portalTarget),
 				disabled: !unref(teleportEnabled)
 			}, [createVNode(Transition, {
@@ -177,7 +190,7 @@ var GrTooltip_default = /* @__PURE__ */ defineComponent({
 					style: unref(floatingStyle)
 				}), [renderSlot(_ctx.$slots, "content", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 16), [[vShow, open.value]])]),
 				_: 3
-			})], 8, ["to", "disabled"]))])), [[unref(vClickOutside), dismissOnOutside.value]]);
+			})], 8, ["to", "disabled"]))], 2)), [[unref(vClickOutside), dismissOnOutside.value]]);
 		};
 	}
 });