@feugene/granularity 0.28.4 → 0.29.1
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.
- package/dist/chunks/{config-_jO3q1Le.js → config-3bQeQvqd.js} +1 -1
- package/dist/chunks/{config-_jO3q1Le.js.map → config-3bQeQvqd.js.map} +1 -1
- package/dist/chunks/{grIconStyles-B6BRqUld.js → grIconStyles-BwBrJY1E.js} +8 -5
- package/dist/chunks/grIconStyles-BwBrJY1E.js.map +1 -0
- package/dist/chunks/{granular-provider-Dds_519x.js → granular-provider-NtErwzYB.js} +1 -1
- package/dist/chunks/{granular-provider-Dds_519x.js.map → granular-provider-NtErwzYB.js.map} +1 -1
- package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-BwhUTqmG.js → GrAutocomplete-CaHys_A_.js} +2 -2
- package/dist/components/GrAutocomplete/chunks/GrAutocomplete-CaHys_A_.js.map +1 -0
- package/dist/components/GrAutocomplete/index.js +1 -1
- package/dist/components/GrAutocomplete/styles.css +1 -1
- package/dist/components/GrBreadcrumbs/chunks/{GrBreadcrumbs-BKOvl8W1.js → GrBreadcrumbs-DRDNan_n.js} +1 -1
- package/dist/components/GrBreadcrumbs/chunks/{GrBreadcrumbs-BKOvl8W1.js.map → GrBreadcrumbs-DRDNan_n.js.map} +1 -1
- package/dist/components/GrBreadcrumbs/index.js +1 -1
- package/dist/components/GrCollapse/chunks/{GrCollapse-CytiA2Sx.js → GrCollapse-Bw9_JatF.js} +1 -1
- package/dist/components/GrCollapse/chunks/{GrCollapse-CytiA2Sx.js.map → GrCollapse-Bw9_JatF.js.map} +1 -1
- package/dist/components/GrCollapse/index.js +1 -1
- package/dist/components/GrDataTable/chunks/{GrDataTable-DU00V44y.js → GrDataTable-C8a9_nCg.js} +1 -1
- package/dist/components/GrDataTable/chunks/{GrDataTable-DU00V44y.js.map → GrDataTable-C8a9_nCg.js.map} +1 -1
- package/dist/components/GrDataTable/index.js +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-BCreL-eq.js → GrDrawer-B7PiAcbU.js} +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-BCreL-eq.js.map → GrDrawer-B7PiAcbU.js.map} +1 -1
- package/dist/components/GrDrawer/index.js +1 -1
- package/dist/components/GrEmptyState/chunks/{GrEmptyState-D4T5pzXA.js → GrEmptyState-RqsWvgI9.js} +1 -1
- package/dist/components/GrEmptyState/chunks/{GrEmptyState-D4T5pzXA.js.map → GrEmptyState-RqsWvgI9.js.map} +1 -1
- package/dist/components/GrEmptyState/index.js +1 -1
- package/dist/components/GrFileUpload/chunks/{GrFileUpload-FjbaYGjL.js → GrFileUpload-NsHkRRIa.js} +1 -1
- package/dist/components/GrFileUpload/chunks/{GrFileUpload-FjbaYGjL.js.map → GrFileUpload-NsHkRRIa.js.map} +1 -1
- package/dist/components/GrFileUpload/index.js +1 -1
- package/dist/components/GrFormFile/chunks/{GrFormFile-ChdKlN83.js → GrFormFile-CYtXU9HV.js} +1 -1
- package/dist/components/GrFormFile/chunks/{GrFormFile-ChdKlN83.js.map → GrFormFile-CYtXU9HV.js.map} +1 -1
- package/dist/components/GrFormFile/index.js +1 -1
- package/dist/components/GrIcon/chunks/{GrIcon-Bn1XEriL.js → GrIcon-Dmf0c9ba.js} +1 -1
- package/dist/components/GrIcon/chunks/{GrIcon-Bn1XEriL.js.map → GrIcon-Dmf0c9ba.js.map} +1 -1
- package/dist/components/GrIcon/index.js +2 -2
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-COUcpOgR.js → GrImageViewer-CyVN6Zpc.js} +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-COUcpOgR.js.map → GrImageViewer-CyVN6Zpc.js.map} +1 -1
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrInputTag/chunks/{GrInputTag-LP3smqOv.js → GrInputTag-5wVcB0zG.js} +1 -1
- package/dist/components/GrInputTag/chunks/{GrInputTag-LP3smqOv.js.map → GrInputTag-5wVcB0zG.js.map} +1 -1
- package/dist/components/GrInputTag/index.js +1 -1
- package/dist/components/GrJsonViewer/chunks/{GrJsonViewer-DMGuWrYD.js → GrJsonViewer-CgwjoUJt.js} +1 -1
- package/dist/components/GrJsonViewer/chunks/{GrJsonViewer-DMGuWrYD.js.map → GrJsonViewer-CgwjoUJt.js.map} +1 -1
- package/dist/components/GrJsonViewer/index.js +1 -1
- package/dist/components/GrLink/chunks/{GrLink-DAGCFYO7.js → GrLink-DYXw3W9w.js} +1 -1
- package/dist/components/GrLink/chunks/{GrLink-DAGCFYO7.js.map → GrLink-DYXw3W9w.js.map} +1 -1
- package/dist/components/GrLink/index.js +1 -1
- package/dist/components/GrLoading/chunks/{GrLoading-DDD8WAIH.js → GrLoading-CMD3Ri9P.js} +1 -1
- package/dist/components/GrLoading/chunks/{GrLoading-DDD8WAIH.js.map → GrLoading-CMD3Ri9P.js.map} +1 -1
- package/dist/components/GrLoading/index.js +1 -1
- package/dist/components/GrNavbar/chunks/{GrNavbar-DhswlYyh.js → GrNavbar-C5EjMKaC.js} +1 -1
- package/dist/components/GrNavbar/chunks/{GrNavbar-DhswlYyh.js.map → GrNavbar-C5EjMKaC.js.map} +1 -1
- package/dist/components/GrNavbar/index.js +1 -1
- package/dist/components/GrNumberInput/chunks/{GrNumberInput-Daud9Jdm.js → GrNumberInput-DQ59YICu.js} +1 -1
- package/dist/components/GrNumberInput/chunks/{GrNumberInput-Daud9Jdm.js.map → GrNumberInput-DQ59YICu.js.map} +1 -1
- package/dist/components/GrNumberInput/index.js +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-kQhWlfs-.js → GrPagination-CX9ZV8mR.js} +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-kQhWlfs-.js.map → GrPagination-CX9ZV8mR.js.map} +1 -1
- package/dist/components/GrPagination/index.js +1 -1
- package/dist/components/GrSelect/chunks/{GrSelect-D-KU9Lx_.js → GrSelect-DKoQu3w9.js} +3 -3
- package/dist/components/GrSelect/chunks/{GrSelect-D-KU9Lx_.js.map → GrSelect-DKoQu3w9.js.map} +1 -1
- package/dist/components/GrSelect/index.js +1 -1
- package/dist/components/GrSelect/styles.css +1 -1
- package/dist/components/GrSidebar/chunks/{GrSidebar-DxPhIiWs.js → GrSidebar-B8EQIlfW.js} +1 -1
- package/dist/components/GrSidebar/chunks/{GrSidebar-DxPhIiWs.js.map → GrSidebar-B8EQIlfW.js.map} +1 -1
- package/dist/components/GrSidebar/index.js +1 -1
- package/dist/components/GrToaster/chunks/{GrToaster-CUi3ldJ0.js → GrToaster-Dp7-4B8k.js} +1 -1
- package/dist/components/GrToaster/chunks/{GrToaster-CUi3ldJ0.js.map → GrToaster-Dp7-4B8k.js.map} +1 -1
- package/dist/components/GrToaster/index.js +1 -1
- package/dist/components/GrTooltip/chunks/{GrTooltip-BKFjqu0E.js → GrTooltip-uYETdbCD.js} +1 -1
- package/dist/components/GrTooltip/chunks/{GrTooltip-BKFjqu0E.js.map → GrTooltip-uYETdbCD.js.map} +1 -1
- package/dist/components/GrTooltip/index.js +1 -1
- package/dist/components/GrTree/chunks/{GrTree-C06N9mPK.js → GrTree-DC89I4AP.js} +57 -6
- package/dist/components/GrTree/chunks/GrTree-DC89I4AP.js.map +1 -0
- package/dist/components/GrTree/index.js +1 -1
- package/dist/components/GrTree/styles.css +1 -1
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-BZfnt0bk.js → GrTreeSelect-CymO68Cv.js} +2 -2
- package/dist/components/GrTreeSelect/chunks/GrTreeSelect-CymO68Cv.js.map +1 -0
- package/dist/components/GrTreeSelect/index.js +1 -1
- package/dist/directives/loading.js +1 -1
- package/dist/granular-provider-node.js +1 -1
- package/dist/granular-provider.js +1 -1
- package/dist/index.js +24 -24
- package/dist/types/components/GrIcon/grIconStyles.d.ts +7 -4
- package/dist/types/components/GrTree/GrTree.vue.d.ts +17 -0
- package/dist/types/components/GrTree/grTreeProps.d.ts +27 -0
- package/dist/web-types.json +35 -1
- package/package.json +2 -2
- package/dist/chunks/grIconStyles-B6BRqUld.js.map +0 -1
- package/dist/components/GrAutocomplete/chunks/GrAutocomplete-BwhUTqmG.js.map +0 -1
- package/dist/components/GrTree/chunks/GrTree-C06N9mPK.js.map +0 -1
- package/dist/components/GrTreeSelect/chunks/GrTreeSelect-BZfnt0bk.js.map +0 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrSelect_default } from "./chunks/GrSelect-
|
|
1
|
+
import { t as GrSelect_default } from "./chunks/GrSelect-DKoQu3w9.js";
|
|
2
2
|
import { n as grSelectSafelist, t as grSelectConfig } from "../../chunks/config-DnF472Ox.js";
|
|
3
3
|
export { GrSelect_default as GrSelect, GrSelect_default as default, grSelectConfig, grSelectSafelist };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-gr-virtual][data-v-
|
|
1
|
+
[data-gr-virtual][data-v-ac4e768b]:before,[data-gr-virtual][data-v-ac4e768b]:after{content:"";flex:none;display:block}[data-gr-virtual][data-v-ac4e768b]:before{height:var(--gr-virtual-before,0px)}[data-gr-virtual][data-v-ac4e768b]:after{height:var(--gr-virtual-after,0px)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
2
|
-
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-
|
|
2
|
+
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-Dmf0c9ba.js";
|
|
3
3
|
import { t as GrButton_default } from "../../GrButton/chunks/GrButton-Bw2AH4uX.js";
|
|
4
4
|
import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
|
|
5
5
|
import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
|
package/dist/components/GrSidebar/chunks/{GrSidebar-DxPhIiWs.js.map → GrSidebar-B8EQIlfW.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrSidebar-DxPhIiWs.js","names":["$slots"],"sources":["../../../../src/components/GrSidebar/sidebarContext.ts","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\n/**\n * Контекст `GrSidebar`, который потребляют `GrSidebarItem`'ы: свёрнута ли панель.\n * В свёрнутом состоянии пункты показывают только иконку (или первую букву метки).\n */\nexport interface GrSidebarContext {\n collapsed: Ref<boolean>\n}\n\nexport const GR_SIDEBAR_KEY: InjectionKey<GrSidebarContext> = Symbol.for('@feugene/granularity/sidebar')\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n contentBase,\n grSidebarCollapseDirection,\n grSidebarRootClass,\n headerBase,\n subtitleClass,\n titleClass,\n type GrSidebarLandmark,\n type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n toggleLabel?: string\n /** Сторона экрана: граница и направление шеврона зеркалятся. */\n position?: GrSidebarPosition\n /**\n * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n * `<nav>` для панели, которая действительно является навигацией. Вложенный\n * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n * обзор, а панель фильтров навигацией не является вовсе.\n */\n landmark?: GrSidebarLandmark\n /** Имя лендмарка: без него две панели на странице неразличимы. */\n ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n position: 'left',\n landmark: 'complementary',\n ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n ? t('gr.sidebar.expand', 'Expand sidebar')\n : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n\ndefineSlots<{\n /** Содержимое панели: навигация, группы, произвольная разметка. */\n default?: () => any\n /** Заголовок шапки вместо пропа `title`. */\n title?: () => any\n /** Подзаголовок под заголовком. */\n subtitle?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n :data-position=\"position\"\n :aria-label=\"ariaLabel\"\n :class=\"rootClass\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n :class=\"subtitleClass\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n :class=\"titleClass\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n :data-direction=\"collapseDirection\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\">\n <component :is=\"collapseIcon\" />\n </GrIcon>\n </GrButton>\n </div>\n\n <div\n data-gr-sidebar-content\n tabindex=\"0\"\n :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n >\n <slot />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n contentBase,\n grSidebarCollapseDirection,\n grSidebarRootClass,\n headerBase,\n subtitleClass,\n titleClass,\n type GrSidebarLandmark,\n type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n toggleLabel?: string\n /** Сторона экрана: граница и направление шеврона зеркалятся. */\n position?: GrSidebarPosition\n /**\n * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n * `<nav>` для панели, которая действительно является навигацией. Вложенный\n * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n * обзор, а панель фильтров навигацией не является вовсе.\n */\n landmark?: GrSidebarLandmark\n /** Имя лендмарка: без него две панели на странице неразличимы. */\n ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n position: 'left',\n landmark: 'complementary',\n ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n ? t('gr.sidebar.expand', 'Expand sidebar')\n : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n\ndefineSlots<{\n /** Содержимое панели: навигация, группы, произвольная разметка. */\n default?: () => any\n /** Заголовок шапки вместо пропа `title`. */\n title?: () => any\n /** Подзаголовок под заголовком. */\n subtitle?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n :data-position=\"position\"\n :aria-label=\"ariaLabel\"\n :class=\"rootClass\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n :class=\"subtitleClass\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n :class=\"titleClass\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n :data-direction=\"collapseDirection\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\">\n <component :is=\"collapseIcon\" />\n </GrIcon>\n </GrButton>\n </div>\n\n <div\n data-gr-sidebar-content\n tabindex=\"0\"\n :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n >\n <slot />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => grSidebarItemClass({\n collapsed: collapsed.value,\n disabled: props.disabled,\n active: props.active,\n}))\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n </template>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => grSidebarItemClass({\n collapsed: collapsed.value,\n disabled: props.disabled,\n active: props.active,\n}))\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n </template>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n /** Заголовок секции. Слот `#label` сильнее. */\n label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n label: undefined,\n})\n\nconst slots = defineSlots<{\n /** Пункты секции. */\n default?: () => unknown\n /** Заголовок целиком — вместо строки `label`. */\n label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n <div\n data-gr-sidebar-group\n role=\"group\"\n :aria-labelledby=\"showLabel ? labelId : undefined\"\n :class=\"collapsed ? groupCollapsedClass : undefined\"\n >\n <div\n v-if=\"showLabel\"\n :id=\"labelId\"\n data-gr-sidebar-group-label\n :class=\"groupLabelClass\"\n >\n <slot name=\"label\">\n {{ label }}\n </slot>\n </div>\n\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n /** Заголовок секции. Слот `#label` сильнее. */\n label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n label: undefined,\n})\n\nconst slots = defineSlots<{\n /** Пункты секции. */\n default?: () => unknown\n /** Заголовок целиком — вместо строки `label`. */\n label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n <div\n data-gr-sidebar-group\n role=\"group\"\n :aria-labelledby=\"showLabel ? labelId : undefined\"\n :class=\"collapsed ? groupCollapsedClass : undefined\"\n >\n <div\n v-if=\"showLabel\"\n :id=\"labelId\"\n data-gr-sidebar-group-label\n :class=\"groupLabelClass\"\n >\n <slot name=\"label\">\n {{ label }}\n </slot>\n </div>\n\n <slot />\n </div>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrSidebar-B8EQIlfW.js","names":["$slots"],"sources":["../../../../src/components/GrSidebar/sidebarContext.ts","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue","../../../../src/components/GrSidebar/GrSidebarGroup.vue"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\n/**\n * Контекст `GrSidebar`, который потребляют `GrSidebarItem`'ы: свёрнута ли панель.\n * В свёрнутом состоянии пункты показывают только иконку (или первую букву метки).\n */\nexport interface GrSidebarContext {\n collapsed: Ref<boolean>\n}\n\nexport const GR_SIDEBAR_KEY: InjectionKey<GrSidebarContext> = Symbol.for('@feugene/granularity/sidebar')\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n contentBase,\n grSidebarCollapseDirection,\n grSidebarRootClass,\n headerBase,\n subtitleClass,\n titleClass,\n type GrSidebarLandmark,\n type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n toggleLabel?: string\n /** Сторона экрана: граница и направление шеврона зеркалятся. */\n position?: GrSidebarPosition\n /**\n * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n * `<nav>` для панели, которая действительно является навигацией. Вложенный\n * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n * обзор, а панель фильтров навигацией не является вовсе.\n */\n landmark?: GrSidebarLandmark\n /** Имя лендмарка: без него две панели на странице неразличимы. */\n ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n position: 'left',\n landmark: 'complementary',\n ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n ? t('gr.sidebar.expand', 'Expand sidebar')\n : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n\ndefineSlots<{\n /** Содержимое панели: навигация, группы, произвольная разметка. */\n default?: () => any\n /** Заголовок шапки вместо пропа `title`. */\n title?: () => any\n /** Подзаголовок под заголовком. */\n subtitle?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n :data-position=\"position\"\n :aria-label=\"ariaLabel\"\n :class=\"rootClass\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n :class=\"subtitleClass\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n :class=\"titleClass\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n :data-direction=\"collapseDirection\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\">\n <component :is=\"collapseIcon\" />\n </GrIcon>\n </GrButton>\n </div>\n\n <div\n data-gr-sidebar-content\n tabindex=\"0\"\n :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n >\n <slot />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n contentBase,\n grSidebarCollapseDirection,\n grSidebarRootClass,\n headerBase,\n subtitleClass,\n titleClass,\n type GrSidebarLandmark,\n type GrSidebarPosition,\n} from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport type { GrSidebarLandmark, GrSidebarPosition } from './grSidebarStyles'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. Не задан — берётся из локали (`gr.sidebar.*`). */\n toggleLabel?: string\n /** Сторона экрана: граница и направление шеврона зеркалятся. */\n position?: GrSidebarPosition\n /**\n * Лендмарк корня. `complementary` (по умолчанию) — `<aside>`; `navigation` —\n * `<nav>` для панели, которая действительно является навигацией. Вложенный\n * `<nav>` внутрь `<aside>` не заводим: два лендмарка на одну панель засоряют\n * обзор, а панель фильтров навигацией не является вовсе.\n */\n landmark?: GrSidebarLandmark\n /** Имя лендмарка: без него две панели на странице неразличимы. */\n ariaLabel?: string\n}\n\nexport interface GrSidebarEmits {\n (e: 'update:collapsed', value: boolean): void\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n position: 'left',\n landmark: 'complementary',\n ariaLabel: undefined,\n})\n\nconst { t } = useGranularityTranslations()\n\nconst emit = defineEmits<GrSidebarEmits>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() => props.toggleLabel ?? (collapsedState.value\n ? t('gr.sidebar.expand', 'Expand sidebar')\n : t('gr.sidebar.collapse', 'Collapse sidebar')))\n\nconst rootTag = computed(() => (props.landmark === 'navigation' ? 'nav' : 'aside'))\nconst rootClass = computed(() => grSidebarRootClass(props.position))\n\nconst collapseDirection = computed(() => grSidebarCollapseDirection(props.position, collapsedState.value))\nconst collapseIcon = computed(() => (collapseDirection.value === 'right' ? IconChevronRight : IconChevronLeft))\n\ndefineSlots<{\n /** Содержимое панели: навигация, группы, произвольная разметка. */\n default?: () => any\n /** Заголовок шапки вместо пропа `title`. */\n title?: () => any\n /** Подзаголовок под заголовком. */\n subtitle?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n :data-position=\"position\"\n :aria-label=\"ariaLabel\"\n :class=\"rootClass\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n :class=\"[headerBase, collapsedState ? 'justify-center' : 'justify-between']\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n :class=\"subtitleClass\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n :class=\"titleClass\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n :data-direction=\"collapseDirection\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\">\n <component :is=\"collapseIcon\" />\n </GrIcon>\n </GrButton>\n </div>\n\n <div\n data-gr-sidebar-content\n tabindex=\"0\"\n :class=\"[contentBase, collapsedState ? 'p-2' : 'p-3']\"\n >\n <slot />\n </div>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => grSidebarItemClass({\n collapsed: collapsed.value,\n disabled: props.disabled,\n active: props.active,\n}))\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n </template>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { grSidebarItemClass, itemBadgeClass, itemLetterClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarItemProps {\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}\n\nconst props = withDefaults(defineProps<GrSidebarItemProps>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => grSidebarItemClass({\n collapsed: collapsed.value,\n disabled: props.disabled,\n active: props.active,\n}))\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" :class=\"itemLetterClass\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span v-if=\"badge != null\" :class=\"itemBadgeClass\">{{ badge }}</span>\n </template>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n /** Заголовок секции. Слот `#label` сильнее. */\n label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n label: undefined,\n})\n\nconst slots = defineSlots<{\n /** Пункты секции. */\n default?: () => unknown\n /** Заголовок целиком — вместо строки `label`. */\n label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n <div\n data-gr-sidebar-group\n role=\"group\"\n :aria-labelledby=\"showLabel ? labelId : undefined\"\n :class=\"collapsed ? groupCollapsedClass : undefined\"\n >\n <div\n v-if=\"showLabel\"\n :id=\"labelId\"\n data-gr-sidebar-group-label\n :class=\"groupLabelClass\"\n >\n <slot name=\"label\">\n {{ label }}\n </slot>\n </div>\n\n <slot />\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarGroup — секция пунктов `GrSidebar` с заголовком.\n *\n * В свёрнутой панели заголовку негде поместиться: он скрывается, а секции\n * разделяет линия — без неё иконки соседних секций сливаются в один столбец.\n */\nimport { computed, inject, useId } from 'vue'\n\nimport { groupCollapsedClass, groupLabelClass } from './grSidebarStyles'\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarGroupProps {\n /** Заголовок секции. Слот `#label` сильнее. */\n label?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarGroupProps>(), {\n label: undefined,\n})\n\nconst slots = defineSlots<{\n /** Пункты секции. */\n default?: () => unknown\n /** Заголовок целиком — вместо строки `label`. */\n label?: () => unknown\n}>()\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst labelId = useId()\nconst hasLabel = computed(() => Boolean(props.label || slots.label))\n\n// Имя группе даёт только видимый заголовок: в свёрнутом виде его нет, и\n// `aria-labelledby` указывал бы в пустоту.\nconst showLabel = computed(() => hasLabel.value && !collapsed.value)\n</script>\n\n<template>\n <div\n data-gr-sidebar-group\n role=\"group\"\n :aria-labelledby=\"showLabel ? labelId : undefined\"\n :class=\"collapsed ? groupCollapsedClass : undefined\"\n >\n <div\n v-if=\"showLabel\"\n :id=\"labelId\"\n data-gr-sidebar-group-label\n :class=\"groupLabelClass\"\n >\n <slot name=\"label\">\n {{ label }}\n </slot>\n </div>\n\n <slot />\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as grSidebarSafelist, t as grSidebarConfig } from "../../chunks/config-DNDgp9bB.js";
|
|
2
|
-
import { n as GrSidebarItem_default, r as GrSidebar_default, t as GrSidebarGroup_default } from "./chunks/GrSidebar-
|
|
2
|
+
import { n as GrSidebarItem_default, r as GrSidebar_default, t as GrSidebarGroup_default } from "./chunks/GrSidebar-B8EQIlfW.js";
|
|
3
3
|
export { GrSidebar_default as GrSidebar, GrSidebar_default as default, GrSidebarGroup_default as GrSidebarGroup, GrSidebarItem_default as GrSidebarItem, grSidebarConfig, grSidebarSafelist };
|
|
@@ -5,7 +5,7 @@ import { s as useGrThemeAttrs } from "../../../chunks/context-CTbuwcYs.js";
|
|
|
5
5
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
6
6
|
import { t as usePortalTarget } from "../../../chunks/usePortalTarget-C0p-mhaM.js";
|
|
7
7
|
import { vHotkey } from "../../../directives/hotkey.js";
|
|
8
|
-
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-
|
|
8
|
+
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-Dmf0c9ba.js";
|
|
9
9
|
import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
|
|
10
10
|
import { t as GrButton_default } from "../../GrButton/chunks/GrButton-Bw2AH4uX.js";
|
|
11
11
|
import { useDragGesture } from "../../../composables/useDragGesture.js";
|
package/dist/components/GrToaster/chunks/{GrToaster-CUi3ldJ0.js.map → GrToaster-Dp7-4B8k.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrToaster-CUi3ldJ0.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, 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 PLACEMENT_CLASS,\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\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})\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\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]')) return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id) 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) void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\nfunction swipeStyle(toast: Toast): Record<string, string> | undefined {\n if (swipingId.value !== toast.id) return undefined\n\n return {\n transform: `translateX(${swipeOffset.value}px)`,\n opacity: String(swipeOpacity(swipeOffset.value, swipeThreshold)),\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n ...(swipeReleased.value ? {} : { transition: 'none' }),\n }\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace') 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) 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 containerStyle = computed(() => {\n if (props.width === undefined) return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\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) 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()) 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=\"grid gap-3\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n enter-from-class=\"opacity-0 translate-y-2\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-2\"\n move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n >\n <div\n v-for=\"toast 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=\"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)]\"\n :class=\"swipeDismiss ? '[touch-action:pan-y]' : ''\"\n :style=\"swipeStyle(toast)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div class=\"flex items-start gap-3\">\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 <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n задать массивом (`actions`) или переопределить слотом. -->\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 }\"\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, 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 PLACEMENT_CLASS,\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\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})\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\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]')) return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id) 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) void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\nfunction swipeStyle(toast: Toast): Record<string, string> | undefined {\n if (swipingId.value !== toast.id) return undefined\n\n return {\n transform: `translateX(${swipeOffset.value}px)`,\n opacity: String(swipeOpacity(swipeOffset.value, swipeThreshold)),\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n ...(swipeReleased.value ? {} : { transition: 'none' }),\n }\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace') 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) 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 containerStyle = computed(() => {\n if (props.width === undefined) return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\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) 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()) 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=\"grid gap-3\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n enter-from-class=\"opacity-0 translate-y-2\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-2\"\n move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n >\n <div\n v-for=\"toast 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=\"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)]\"\n :class=\"swipeDismiss ? '[touch-action:pan-y]' : ''\"\n :style=\"swipeStyle(toast)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div class=\"flex items-start gap-3\">\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 <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n задать массивом (`actions`) или переопределить слотом. -->\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 }\"\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":"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"}
|
|
1
|
+
{"version":3,"file":"GrToaster-Dp7-4B8k.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, 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 PLACEMENT_CLASS,\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\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})\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\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]')) return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id) 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) void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\nfunction swipeStyle(toast: Toast): Record<string, string> | undefined {\n if (swipingId.value !== toast.id) return undefined\n\n return {\n transform: `translateX(${swipeOffset.value}px)`,\n opacity: String(swipeOpacity(swipeOffset.value, swipeThreshold)),\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n ...(swipeReleased.value ? {} : { transition: 'none' }),\n }\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace') 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) 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 containerStyle = computed(() => {\n if (props.width === undefined) return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\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) 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()) 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=\"grid gap-3\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n enter-from-class=\"opacity-0 translate-y-2\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-2\"\n move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n >\n <div\n v-for=\"toast 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=\"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)]\"\n :class=\"swipeDismiss ? '[touch-action:pan-y]' : ''\"\n :style=\"swipeStyle(toast)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div class=\"flex items-start gap-3\">\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 <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n задать массивом (`actions`) или переопределить слотом. -->\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 }\"\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, 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 PLACEMENT_CLASS,\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\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})\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\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]')) return false\n\n const host = target?.closest<HTMLElement>('[data-gr-toast]')\n const id = host?.dataset.toastId\n if (!host || !id) 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) void releaseSwiped(id)\n else resetSwipe()\n },\n // Обрыв возвращает тост на место, а не дожимает смахивание: указатель забрал\n // браузер, а не пользователь довёл жест.\n onCancel: resetSwipe,\n})\n\nfunction swipeStyle(toast: Toast): Record<string, string> | undefined {\n if (swipingId.value !== toast.id) return undefined\n\n return {\n transform: `translateX(${swipeOffset.value}px)`,\n opacity: String(swipeOpacity(swipeOffset.value, swipeThreshold)),\n // Переходы группы во время жеста борются с пальцем: тост едет с задержкой\n // и «догоняет» курсор после отпускания. После отпускания запрет снимается —\n // уходящему тосту переход нужен, иначе он не уедет вовсе.\n ...(swipeReleased.value ? {} : { transition: 'none' }),\n }\n}\n\n/**\n * Клавиатурный эквивалент смахивания. `Escape` намеренно не берём: тостер не\n * модальный слой, и перехват закрывал бы уведомление вместо диалога под ним.\n */\nfunction onToastKeydown(event: KeyboardEvent, toast: Toast): void {\n if (event.key !== 'Delete' && event.key !== 'Backspace') 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) 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 containerStyle = computed(() => {\n if (props.width === undefined) return undefined\n\n return { '--gr-toaster-width': typeof props.width === 'number' ? `${props.width}px` : props.width }\n})\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) 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()) 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=\"grid gap-3\"\n enter-active-class=\"transition duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n enter-from-class=\"opacity-0 translate-y-2\"\n enter-to-class=\"opacity-100 translate-y-0\"\n leave-active-class=\"transition duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-in)] absolute\"\n leave-from-class=\"opacity-100 translate-y-0\"\n leave-to-class=\"opacity-0 translate-y-2\"\n move-class=\"transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]\"\n >\n <div\n v-for=\"toast 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=\"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)]\"\n :class=\"swipeDismiss ? '[touch-action:pan-y]' : ''\"\n :style=\"swipeStyle(toast)\"\n @pointerdown=\"swipe.start\"\n @keydown=\"onToastKeydown($event, toast)\"\n >\n <div class=\"flex items-start gap-3\">\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 <!-- Action-кнопки тоста: например «Отменить»/«Повторить». Можно\n задать массивом (`actions`) или переопределить слотом. -->\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 }\"\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":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as grToasterSafelist, t as grToasterConfig } from "../../chunks/config-B5SBUa6u.js";
|
|
2
|
-
import { t as GrToaster_default } from "./chunks/GrToaster-
|
|
2
|
+
import { t as GrToaster_default } from "./chunks/GrToaster-Dp7-4B8k.js";
|
|
3
3
|
export { GrToaster_default as GrToaster, GrToaster_default as default, grToasterConfig, grToasterSafelist };
|
|
@@ -2,7 +2,7 @@ import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
|
|
|
2
2
|
import { a as useGrComponentSize, s as useGrThemeAttrs } from "../../../chunks/context-CTbuwcYs.js";
|
|
3
3
|
import { t as usePortalTarget } from "../../../chunks/usePortalTarget-C0p-mhaM.js";
|
|
4
4
|
import { vClickOutside } from "../../../directives/clickOutside.js";
|
|
5
|
-
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-
|
|
5
|
+
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-Dmf0c9ba.js";
|
|
6
6
|
import { useFloating } from "../../../composables/useFloating.js";
|
|
7
7
|
import { useDismissible } from "../../../composables/useDismissible.js";
|
|
8
8
|
import { a as triggerIconSizes, i as panelWidths, r as panelSizes } from "../../../chunks/config-BTmfQFwi.js";
|