npm - @feugene/granularity - Versions diffs - 0.36.0 → 0.38.0 - Mend

@feugene/granularity 0.36.0 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (367) hide show

package/dist/composables/useTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTheme.js","names":[],"sources":["../../src/composables/useTheme.ts"],"sourcesContent":["import { computed, hasInjectionContext, inject, ref } from 'vue'\nimport type { App, InjectionKey, Ref } from 'vue'\n\nexport type ThemeName = 'light' \| 'dark'\n\nexport type UseThemeOptions = {\n /*\n Ключ для хранения выбранной темы в localStorage.\n * По умолчанию: `gr-theme`.\n /\n storageKey?: string\n\n /\n Если `false` — не читать/не писать localStorage (полезно для SSR/embedded сценариев).\n * По умолчанию: `true`.\n /\n persist?: boolean\n\n /\n Куда писать `data-theme`. По умолчанию — `<html>` (канон одного приложения).\n \n Геттер, а не элемент: на момент `app.use(...)` корень приложения ещё не\n * смонтирован. Обязателен нескольким приложениям с независимыми темами:\n * селектор тем атрибутный (`[data-theme='dark']`), поэтому тема работает от\n * любого контейнера, а без `target` все приложения писали бы в один `<html>`\n * и побеждал бы последний.\n /\n target?: () => HTMLElement \| null\n}\n\nconst DEFAULT_STORAGE_KEY = 'gr-theme'\nconst IS_SERVER = typeof window === 'undefined'\n\nfunction readStoredTheme(storageKey: string, persist: boolean): ThemeName \| null {\n if (typeof window === 'undefined' \|\| !persist)\n return null\n\n // Доступ к `localStorage` может бросать `SecurityError` в Safari private mode\n // и при отключённых cookies/storage — поэтому оборачиваем в try/catch.\n try {\n const storage = window.localStorage\n if (typeof storage?.getItem !== 'function')\n return null\n\n const stored = storage.getItem(storageKey)\n if (stored === 'light' \|\| stored === 'dark')\n return stored\n }\n catch {\n // ignore\n }\n\n return null\n}\n\nfunction getSystemTheme(): ThemeName {\n if (typeof window === 'undefined')\n return 'light'\n return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n}\n\nfunction getPreferredTheme(storageKey = DEFAULT_STORAGE_KEY, persist = true): ThemeName {\n return readStoredTheme(storageKey, persist) ?? getSystemTheme()\n}\n\nfunction applyTheme(theme: ThemeName, target?: () => HTMLElement \| null) {\n if (typeof document === 'undefined')\n return\n\n // Канон GR — атрибут `[data-theme]`: на `<html>` (см. docs/styling.md →\n // «Темизация») либо на корне приложения, когда состояние задало `target`.\n // `useTheme`/`initThemeEarly` — единственный рантайм-API переключения темы.\n const root = target?.() ?? document.documentElement\n root.dataset.theme = theme\n}\n\n/\n Состояние темы одного приложения.\n \n `theme` общий для всех вызовов `useTheme()` внутри приложения: свой `ref` на\n * вызов означал бы, что переключение темы в одном компоненте не трогает\n * `theme`/`isDark` в другом — менялся бы только DOM-атрибут, а реактивные\n * потребители разъехались бы.\n /\ntype ThemeState = {\n theme: Ref<ThemeName>\n storageKey: string\n persist: boolean\n /* Корень, получающий `data-theme`; не задан — `<html>`. /\n target?: () => HTMLElement \| null\n listenersBound: boolean\n /\n Снимает window-слушатели состояния. Появляется после `bindListeners`;\n * зовёт `app.onUnmount` у app-scoped состояний — модульный синглтон живёт со\n * страницей, и снимать его незачем.\n /\n teardownListeners?: () => void\n /* Разрешена ли мутация — см. `resolveThemeState`. /\n writable: boolean\n}\n\nfunction createThemeState(options: UseThemeOptions = {}, writable = true): ThemeState {\n const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY\n const persist = options.persist ?? true\n\n return {\n theme: ref<ThemeName>(getPreferredTheme(storageKey, persist)),\n storageKey,\n persist,\n target: options.target,\n listenersBound: false,\n writable,\n }\n}\n\n/* Ключ provide/inject для app-scoped состояния темы (устанавливает плагин ниже). /\nexport const GRANULARITY_THEME_STATE: InjectionKey<ThemeState> = Symbol.for('@feugene/granularity/theme-state')\n\n/\n Vue-плагин: даёт каждому приложению собственное состояние темы через\n * `app.provide`. Обязателен для (а) SSR, если приложение переключает тему на\n * сервере — иначе тема одного запроса уедет в ответ следующему, — и (б)\n * нескольких Vue-приложений на одной странице, которым нужны независимые темы.\n \n Для (б) обязателен и `target` — корень, получающий `data-theme`: без него\n * изолировано только состояние, а атрибут все приложения пишут в один `<html>`,\n * и побеждает последний.\n \n ```ts\n * app.use(granularityThemePlugin)\n * app.use(granularityThemePlugin, {\n * storageKey: 'admin-theme',\n * persist: false,\n * target: () => document.getElementById('admin-app'),\n * })\n * ```\n /\n// Где-то на странице установлен плагин: фолбэк в синглтон для такого приложения —\n// почти наверняка ошибка вызова, а не осознанный выбор.\nlet appScopedThemeProvided = false\nlet contextFallbackWarned = false\n\nexport const granularityThemePlugin = {\n install(app: App, options: UseThemeOptions = {}) {\n appScopedThemeProvided = true\n const state = createThemeState(options)\n app.provide(GRANULARITY_THEME_STATE, state)\n // Слушатели `storage`/`prefers-color-scheme` держат состояние; без снятия\n // каждый цикл mount/unmount микрофронтенда копил бы их на window навсегда.\n app.onUnmount(() => state.teardownListeners?.())\n },\n}\n\n// Ленивый модульный синглтон — канонический фолбэк для простых SPA без плагина.\nlet moduleThemeState: ThemeState \| null = null\n\n/* Сброс dev-предупреждения о фолбэке. Внутреннее API — нужно тестам. /\nexport function resetThemeContextWarning(): void {\n contextFallbackWarned = false\n}\n\nfunction resolveThemeState(options: UseThemeOptions): ThemeState {\n // App-scoped состояние (provide через плагин): setup-контекст ИЛИ\n // `app.runWithContext(() => useTheme())` — `hasInjectionContext` покрывает оба.\n if (hasInjectionContext()) {\n const provided = inject(GRANULARITY_THEME_STATE, null)\n if (provided)\n return provided\n }\n\n // На сервере без плагина модульное состояние текло бы между запросами. Но\n // читать тему на сервере — нормальный сценарий (шаблон смотрит `isDark`), и\n // ронять на нём весь рендер нельзя: отдаём состояние на один вызов и запрещаем\n // мутацию — течёт именно она.\n if (IS_SERVER)\n return createThemeState(options, false)\n\n // Дедуп и текст — прямо под гардом: `__GR_DEV__` разворачивается в условие\n // на сборке, и у потребителя вся ветка выкидывается вместе с сообщением.\n if (\n appScopedThemeProvided && !contextFallbackWarned\n && __GR_DEV__\n ) {\n contextFallbackWarned = true\n console.warn(\n '[granularity] useTheme() вызван вне setup/inject-контекста: app-scoped состояние '\n + 'granularityThemePlugin недоступно, использован модульный синглтон. '\n + 'Оберните вызов: app.runWithContext(() => useTheme()).',\n )\n }\n\n if (!moduleThemeState)\n moduleThemeState = createThemeState(options)\n\n return moduleThemeState\n}\n\n// Подписки на системную тему и синхронизацию между вкладками. Привязаны к\n// состоянию, а не к модулю: у каждого приложения своё. Одна подписка на\n// состояние, а не на потребителя, — `onScopeDispose` здесь был бы вреден, он\n// порвал бы общую подписку при размонтировании одного из них.\nfunction bindListeners(state: ThemeState) {\n if (state.listenersBound \|\| typeof window === 'undefined')\n return\n state.listenersBound = true\n\n // Cross-tab: другая вкладка записала тему в localStorage.\n const onStorage = (event: StorageEvent): void => {\n if (!state.persist \|\| event.key !== state.storageKey)\n return\n if (event.newValue === 'light' \|\| event.newValue === 'dark') {\n state.theme.value = event.newValue\n applyTheme(event.newValue, state.target)\n }\n }\n window.addEventListener?.('storage', onStorage)\n\n // Системная смена `prefers-color-scheme` — следуем ей только если пользователь\n // НЕ выбрал тему явно (в storage ничего не сохранено).\n const mql = window.matchMedia?.('(prefers-color-scheme: dark)')\n const onSchemeChange = (event: MediaQueryListEvent): void => {\n if (readStoredTheme(state.storageKey, state.persist) !== null)\n return\n const next: ThemeName = event.matches ? 'dark' : 'light'\n state.theme.value = next\n applyTheme(next, state.target)\n }\n mql?.addEventListener?.('change', onSchemeChange)\n\n state.teardownListeners = () => {\n window.removeEventListener?.('storage', onStorage)\n mql?.removeEventListener?.('change', onSchemeChange)\n state.listenersBound = false\n state.teardownListeners = undefined\n }\n}\n\n/\n Для применения темы максимально рано (до монтирования Vue), чтобы избежать \"мигания\".\n * Также сидирует модульное состояние, чтобы значение в `useTheme()` совпадало с уже\n * применённым к документу.\n \n Функция клиентская: её зовут из браузерной точки входа до создания приложения,\n * то есть app-scoped состояние инжектить там ещё неоткуда. Расхождения с плагином\n * это не даёт — оба сидируются из одного `localStorage`.\n */\nexport function initThemeEarly(options: UseThemeOptions = {}) {\n const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY\n const persist = options.persist ?? true\n const preferred = getPreferredTheme(storageKey, persist)\n\n moduleThemeState ??= createThemeState(options)\n moduleThemeState.storageKey = storageKey\n moduleThemeState.persist = persist\n moduleThemeState.theme.value = preferred\n\n applyTheme(preferred)\n}\n\nexport function useTheme(options: UseThemeOptions = {}) {\n const state = resolveThemeState(options)\n\n // Опции вызова уточняют состояние — тот же приём, что был у модульного\n // синглтона: слушателям нужно знать, какой ключ отслеживать.\n if (options.storageKey !== undefined)\n state.storageKey = options.storageKey\n if (options.persist !== undefined)\n state.persist = options.persist\n if (options.target !== undefined)\n state.target = options.target\n\n bindListeners(state)\n\n const theme = state.theme\n const isDark = computed(() => theme.value === 'dark')\n\n function setTheme(next: ThemeName) {\n if (!state.writable) {\n throw new Error(\n '[granularity] useTheme: setTheme/toggleTheme require `app.use(granularityThemePlugin)` during SSR — '\n + 'the module-singleton fallback is disabled server-side, so a theme set by one request would leak into '\n + 'the next response. Reading `theme`/`isDark` on the server works without the plugin.',\n )\n }\n\n theme.value = next\n applyTheme(next, state.target)\n\n if (state.persist && typeof window !== 'undefined') {\n // См. комментарий в `readStoredTheme`: запись тоже может бросать.\n try {\n const storage = window.localStorage\n if (typeof storage?.setItem === 'function')\n storage.setItem(state.storageKey, next)\n }\n catch {\n // ignore\n }\n }\n }\n\n function toggleTheme() {\n setTheme(theme.value === 'dark' ? 'light' : 'dark')\n }\n\n function initTheme() {\n applyTheme(theme.value, state.target)\n }\n\n return {\n theme,\n isDark,\n setTheme,\n toggleTheme,\n initTheme,\n }\n}\n"],"mappings":";;AA8BA,IAAM,sBAAsB;AAC5B,IAAM,YAAY,OAAO,WAAW;AAEpC,SAAS,gBAAgB,YAAoB,SAAoC;CAC/E,IAAI,OAAO,WAAW,eAAe,CAAC,SACpC,OAAO;CAIT,IAAI;EACF,MAAM,UAAU,OAAO;EACvB,IAAI,OAAO,SAAS,YAAY,YAC9B,OAAO;EAET,MAAM,SAAS,QAAQ,QAAQ,UAAU;EACzC,IAAI,WAAW,WAAW,WAAW,QACnC,OAAO;CACX,QACM,CAEN;CAEA,OAAO;AACT;AAEA,SAAS,iBAA4B;CACnC,IAAI,OAAO,WAAW,aACpB,OAAO;CACT,OAAO,OAAO,aAAa,8BAA8B,CAAC,EAAE,UAAU,SAAS;AACjF;AAEA,SAAS,kBAAkB,aAAa,qBAAqB,UAAU,MAAiB;CACtF,OAAO,gBAAgB,YAAY,OAAO,KAAK,eAAe;AAChE;AAEA,SAAS,WAAW,OAAkB,QAAmC;CACvE,IAAI,OAAO,aAAa,aACtB;CAKF,MAAM,OAAO,SAAS,KAAK,SAAS;CACpC,KAAK,QAAQ,QAAQ;AACvB;AA2BA,SAAS,iBAAiB,UAA2B,CAAC,GAAG,WAAW,MAAkB;CACpF,MAAM,aAAa,QAAQ,cAAc;CACzC,MAAM,UAAU,QAAQ,WAAW;CAEnC,OAAO;EACL,OAAO,IAAe,kBAAkB,YAAY,OAAO,CAAC;EAC5D;EACA;EACA,QAAQ,QAAQ;EAChB,gBAAgB;EAChB;CACF;AACF;;AAGA,IAAa,0BAAoD,OAAO,IAAI,kCAAkC;;;;;;;;;;;;;;;;;;;;AAuB9G,IAAI,yBAAyB;AAC7B,IAAI,wBAAwB;AAE5B,IAAa,yBAAyB,EACpC,QAAQ,KAAU,UAA2B,CAAC,GAAG;CAC/C,yBAAyB;CACzB,MAAM,QAAQ,iBAAiB,OAAO;CACtC,IAAI,QAAQ,yBAAyB,KAAK;CAG1C,IAAI,gBAAgB,MAAM,oBAAoB,CAAC;AACjD,EACF;AAGA,IAAI,mBAAsC;;AAG1C,SAAgB,2BAAiC;CAC/C,wBAAwB;AAC1B;AAEA,SAAS,kBAAkB,SAAsC;CAG/D,IAAI,oBAAoB,GAAG;EACzB,MAAM,WAAW,OAAO,yBAAyB,IAAI;EACrD,IAAI,UACF,OAAO;CACX;CAMA,IAAI,WACF,OAAO,iBAAiB,SAAS,KAAK;CAIxC,IACE,0BAA0B,CAAC,yBAAA,OAAA,YAAA,eAAA,QAAA,IAAA,aAAA,cAE3B;EACA,wBAAwB;EACxB,QAAQ,KACN,2MAGF;CACF;CAEA,IAAI,CAAC,kBACH,mBAAmB,iBAAiB,OAAO;CAE7C,OAAO;AACT;AAMA,SAAS,cAAc,OAAmB;CACxC,IAAI,MAAM,kBAAkB,OAAO,WAAW,aAC5C;CACF,MAAM,iBAAiB;CAGvB,MAAM,aAAa,UAA8B;EAC/C,IAAI,CAAC,MAAM,WAAW,MAAM,QAAQ,MAAM,YACxC;EACF,IAAI,MAAM,aAAa,WAAW,MAAM,aAAa,QAAQ;GAC3D,MAAM,MAAM,QAAQ,MAAM;GAC1B,WAAW,MAAM,UAAU,MAAM,MAAM;EACzC;CACF;CACA,OAAO,mBAAmB,WAAW,SAAS;CAI9C,MAAM,MAAM,OAAO,aAAa,8BAA8B;CAC9D,MAAM,kBAAkB,UAAqC;EAC3D,IAAI,gBAAgB,MAAM,YAAY,MAAM,OAAO,MAAM,MACvD;EACF,MAAM,OAAkB,MAAM,UAAU,SAAS;EACjD,MAAM,MAAM,QAAQ;EACpB,WAAW,MAAM,MAAM,MAAM;CAC/B;CACA,KAAK,mBAAmB,UAAU,cAAc;CAEhD,MAAM,0BAA0B;EAC9B,OAAO,sBAAsB,WAAW,SAAS;EACjD,KAAK,sBAAsB,UAAU,cAAc;EACnD,MAAM,iBAAiB;EACvB,MAAM,oBAAoB,KAAA;CAC5B;AACF;;;;;;;;;;AAWA,SAAgB,eAAe,UAA2B,CAAC,GAAG;CAC5D,MAAM,aAAa,QAAQ,cAAc;CACzC,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,YAAY,kBAAkB,YAAY,OAAO;CAEvD,qBAAqB,iBAAiB,OAAO;CAC7C,iBAAiB,aAAa;CAC9B,iBAAiB,UAAU;CAC3B,iBAAiB,MAAM,QAAQ;CAE/B,WAAW,SAAS;AACtB;AAEA,SAAgB,SAAS,UAA2B,CAAC,GAAG;CACtD,MAAM,QAAQ,kBAAkB,OAAO;CAIvC,IAAI,QAAQ,eAAe,KAAA,GACzB,MAAM,aAAa,QAAQ;CAC7B,IAAI,QAAQ,YAAY,KAAA,GACtB,MAAM,UAAU,QAAQ;CAC1B,IAAI,QAAQ,WAAW,KAAA,GACrB,MAAM,SAAS,QAAQ;CAEzB,cAAc,KAAK;CAEnB,MAAM,QAAQ,MAAM;CACpB,MAAM,SAAS,eAAe,MAAM,UAAU,MAAM;CAEpD,SAAS,SAAS,MAAiB;EACjC,IAAI,CAAC,MAAM,UACT,MAAM,IAAI,MACR,8RAGF;EAGF,MAAM,QAAQ;EACd,WAAW,MAAM,MAAM,MAAM;EAE7B,IAAI,MAAM,WAAW,OAAO,WAAW,aAErC,IAAI;GACF,MAAM,UAAU,OAAO;GACvB,IAAI,OAAO,SAAS,YAAY,YAC9B,QAAQ,QAAQ,MAAM,YAAY,IAAI;EAC1C,QACM,CAEN;CAEJ;CAEA,SAAS,cAAc;EACrB,SAAS,MAAM,UAAU,SAAS,UAAU,MAAM;CACpD;CAEA,SAAS,YAAY;EACnB,WAAW,MAAM,OAAO,MAAM,MAAM;CACtC;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"useTheme.js","names":[],"sources":["../../src/composables/useTheme.ts"],"sourcesContent":["import { computed, hasInjectionContext, inject, ref } from 'vue'\nimport type { App, InjectionKey, Ref } from 'vue'\n\nexport type ThemeName = 'light' \| 'dark'\n\nexport type UseThemeOptions = {\n /*\n Ключ для хранения выбранной темы в localStorage.\n * По умолчанию: `gr-theme`.\n /\n storageKey?: string\n\n /\n Если `false` — не читать/не писать localStorage (полезно для SSR/embedded сценариев).\n * По умолчанию: `true`.\n /\n persist?: boolean\n\n /\n Куда писать `data-theme`. По умолчанию — `<html>` (канон одного приложения).\n \n Геттер, а не элемент: на момент `app.use(...)` корень приложения ещё не\n * смонтирован. Обязателен нескольким приложениям с независимыми темами:\n * селектор тем атрибутный (`[data-theme='dark']`), поэтому тема работает от\n * любого контейнера, а без `target` все приложения писали бы в один `<html>`\n * и побеждал бы последний.\n /\n target?: () => HTMLElement \| null\n}\n\nconst DEFAULT_STORAGE_KEY = 'gr-theme'\nconst IS_SERVER = typeof window === 'undefined'\n\nfunction readStoredTheme(storageKey: string, persist: boolean): ThemeName \| null {\n if (typeof window === 'undefined' \|\| !persist)\n return null\n\n // Доступ к `localStorage` может бросать `SecurityError` в Safari private mode\n // и при отключённых cookies/storage — поэтому оборачиваем в try/catch.\n try {\n const storage = window.localStorage\n if (typeof storage?.getItem !== 'function')\n return null\n\n const stored = storage.getItem(storageKey)\n if (stored === 'light' \|\| stored === 'dark')\n return stored\n }\n catch {\n // ignore\n }\n\n return null\n}\n\nfunction getSystemTheme(): ThemeName {\n if (typeof window === 'undefined')\n return 'light'\n return window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'\n}\n\nfunction getPreferredTheme(storageKey = DEFAULT_STORAGE_KEY, persist = true): ThemeName {\n return readStoredTheme(storageKey, persist) ?? getSystemTheme()\n}\n\nfunction applyTheme(theme: ThemeName, target?: () => HTMLElement \| null) {\n if (typeof document === 'undefined')\n return\n\n // Канон GR — атрибут `[data-theme]`: на `<html>` (см. docs/styling.md →\n // «Темизация») либо на корне приложения, когда состояние задало `target`.\n // `useTheme`/`initThemeEarly` — единственный рантайм-API переключения темы.\n const root = target?.() ?? document.documentElement\n root.dataset.theme = theme\n}\n\n/\n Состояние темы одного приложения.\n \n `theme` общий для всех вызовов `useTheme()` внутри приложения: свой `ref` на\n * вызов означал бы, что переключение темы в одном компоненте не трогает\n * `theme`/`isDark` в другом — менялся бы только DOM-атрибут, а реактивные\n * потребители разъехались бы.\n /\ntype ThemeState = {\n theme: Ref<ThemeName>\n storageKey: string\n persist: boolean\n /* Корень, получающий `data-theme`; не задан — `<html>`. /\n target?: () => HTMLElement \| null\n listenersBound: boolean\n /\n Снимает window-слушатели состояния. Появляется после `bindListeners`;\n * зовёт `app.onUnmount` у app-scoped состояний — модульный синглтон живёт со\n * страницей, и снимать его незачем.\n /\n teardownListeners?: () => void\n /* Разрешена ли мутация — см. `resolveThemeState`. /\n writable: boolean\n}\n\nfunction createThemeState(options: UseThemeOptions = {}, writable = true): ThemeState {\n const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY\n const persist = options.persist ?? true\n\n return {\n theme: ref<ThemeName>(getPreferredTheme(storageKey, persist)),\n storageKey,\n persist,\n target: options.target,\n listenersBound: false,\n writable,\n }\n}\n\n/* Ключ provide/inject для app-scoped состояния темы (устанавливает плагин ниже). /\nexport const GRANULARITY_THEME_STATE: InjectionKey<ThemeState> = Symbol.for('@feugene/granularity/theme-state')\n\n/\n Vue-плагин: даёт каждому приложению собственное состояние темы через\n * `app.provide`. Обязателен для (а) SSR, если приложение переключает тему на\n * сервере — иначе тема одного запроса уедет в ответ следующему, — и (б)\n * нескольких Vue-приложений на одной странице, которым нужны независимые темы.\n \n Для (б) обязателен и `target` — корень, получающий `data-theme`: без него\n * изолировано только состояние, а атрибут все приложения пишут в один `<html>`,\n * и побеждает последний.\n \n ```ts\n * app.use(granularityThemePlugin)\n * app.use(granularityThemePlugin, {\n * storageKey: 'admin-theme',\n * persist: false,\n * target: () => document.getElementById('admin-app'),\n * })\n * ```\n /\n// Где-то на странице установлен плагин: фолбэк в синглтон для такого приложения —\n// почти наверняка ошибка вызова, а не осознанный выбор.\nlet appScopedThemeProvided = false\nlet contextFallbackWarned = false\n\nexport const granularityThemePlugin = {\n install(app: App, options: UseThemeOptions = {}) {\n appScopedThemeProvided = true\n const state = createThemeState(options)\n app.provide(GRANULARITY_THEME_STATE, state)\n // Слушатели `storage`/`prefers-color-scheme` держат состояние; без снятия\n // каждый цикл mount/unmount микрофронтенда копил бы их на window навсегда.\n app.onUnmount(() => state.teardownListeners?.())\n },\n}\n\n// Ленивый модульный синглтон — канонический фолбэк для простых SPA без плагина.\nlet moduleThemeState: ThemeState \| null = null\n\n/* Сброс dev-предупреждения о фолбэке. Внутреннее API — нужно тестам. /\nexport function resetThemeContextWarning(): void {\n contextFallbackWarned = false\n}\n\nfunction resolveThemeState(options: UseThemeOptions): ThemeState {\n // App-scoped состояние (provide через плагин): setup-контекст ИЛИ\n // `app.runWithContext(() => useTheme())` — `hasInjectionContext` покрывает оба.\n if (hasInjectionContext()) {\n const provided = inject(GRANULARITY_THEME_STATE, null)\n if (provided)\n return provided\n }\n\n // На сервере без плагина модульное состояние текло бы между запросами. Но\n // читать тему на сервере — нормальный сценарий (шаблон смотрит `isDark`), и\n // ронять на нём весь рендер нельзя: отдаём состояние на один вызов и запрещаем\n // мутацию — течёт именно она.\n if (IS_SERVER)\n return createThemeState(options, false)\n\n // Дедуп и текст — прямо под гардом: `__GR_DEV__` разворачивается в условие\n // на сборке, и у потребителя вся ветка выкидывается вместе с сообщением.\n if (\n appScopedThemeProvided && !contextFallbackWarned\n && __GR_DEV__\n ) {\n contextFallbackWarned = true\n console.warn(\n '[granularity] useTheme() вызван вне setup/inject-контекста: app-scoped состояние '\n + 'granularityThemePlugin недоступно, использован модульный синглтон. '\n + 'Оберните вызов: app.runWithContext(() => useTheme()).',\n )\n }\n\n if (!moduleThemeState)\n moduleThemeState = createThemeState(options)\n\n return moduleThemeState\n}\n\n// Подписки на системную тему и синхронизацию между вкладками. Привязаны к\n// состоянию, а не к модулю: у каждого приложения своё. Одна подписка на\n// состояние, а не на потребителя, — `onScopeDispose` здесь был бы вреден, он\n// порвал бы общую подписку при размонтировании одного из них.\nfunction bindListeners(state: ThemeState) {\n if (state.listenersBound \|\| typeof window === 'undefined')\n return\n state.listenersBound = true\n\n // Cross-tab: другая вкладка записала тему в localStorage.\n const onStorage = (event: StorageEvent): void => {\n if (!state.persist \|\| event.key !== state.storageKey)\n return\n if (event.newValue === 'light' \|\| event.newValue === 'dark') {\n state.theme.value = event.newValue\n applyTheme(event.newValue, state.target)\n }\n }\n window.addEventListener?.('storage', onStorage)\n\n // Системная смена `prefers-color-scheme` — следуем ей только если пользователь\n // НЕ выбрал тему явно (в storage ничего не сохранено).\n const mql = window.matchMedia?.('(prefers-color-scheme: dark)')\n const onSchemeChange = (event: MediaQueryListEvent): void => {\n if (readStoredTheme(state.storageKey, state.persist) !== null)\n return\n const next: ThemeName = event.matches ? 'dark' : 'light'\n state.theme.value = next\n applyTheme(next, state.target)\n }\n mql?.addEventListener?.('change', onSchemeChange)\n\n state.teardownListeners = () => {\n window.removeEventListener?.('storage', onStorage)\n mql?.removeEventListener?.('change', onSchemeChange)\n state.listenersBound = false\n state.teardownListeners = undefined\n }\n}\n\n/\n Для применения темы максимально рано (до монтирования Vue), чтобы избежать \"мигания\".\n * Также сидирует модульное состояние, чтобы значение в `useTheme()` совпадало с уже\n * применённым к документу.\n \n Функция клиентская: её зовут из браузерной точки входа до создания приложения,\n * то есть app-scoped состояние инжектить там ещё неоткуда. Расхождения с плагином\n * это не даёт — оба сидируются из одного `localStorage`.\n */\nexport function initThemeEarly(options: UseThemeOptions = {}) {\n const storageKey = options.storageKey ?? DEFAULT_STORAGE_KEY\n const persist = options.persist ?? true\n const preferred = getPreferredTheme(storageKey, persist)\n\n moduleThemeState ??= createThemeState(options)\n moduleThemeState.storageKey = storageKey\n moduleThemeState.persist = persist\n moduleThemeState.theme.value = preferred\n\n applyTheme(preferred)\n}\n\nexport function useTheme(options: UseThemeOptions = {}) {\n const state = resolveThemeState(options)\n\n // Опции вызова уточняют состояние — тот же приём, что был у модульного\n // синглтона: слушателям нужно знать, какой ключ отслеживать.\n if (options.storageKey !== undefined)\n state.storageKey = options.storageKey\n if (options.persist !== undefined)\n state.persist = options.persist\n if (options.target !== undefined)\n state.target = options.target\n\n bindListeners(state)\n\n const theme = state.theme\n const isDark = computed(() => theme.value === 'dark')\n\n function setTheme(next: ThemeName) {\n if (!state.writable) {\n throw new Error(\n '[granularity] useTheme: setTheme/toggleTheme require `app.use(granularityThemePlugin)` during SSR — '\n + 'the module-singleton fallback is disabled server-side, so a theme set by one request would leak into '\n + 'the next response. Reading `theme`/`isDark` on the server works without the plugin.',\n )\n }\n\n theme.value = next\n applyTheme(next, state.target)\n\n if (state.persist && typeof window !== 'undefined') {\n // См. комментарий в `readStoredTheme`: запись тоже может бросать.\n try {\n const storage = window.localStorage\n if (typeof storage?.setItem === 'function')\n storage.setItem(state.storageKey, next)\n }\n catch {\n // ignore\n }\n }\n }\n\n function toggleTheme() {\n setTheme(theme.value === 'dark' ? 'light' : 'dark')\n }\n\n function initTheme() {\n applyTheme(theme.value, state.target)\n }\n\n return {\n theme,\n isDark,\n setTheme,\n toggleTheme,\n initTheme,\n }\n}\n"],"mappings":";;AA8BA,IAAM,sBAAsB;AAC5B,IAAM,YAAY,OAAO,WAAW;AAEpC,SAAS,gBAAgB,YAAoB,SAAoC;CAC/E,IAAI,OAAO,WAAW,eAAe,CAAC,SACpC,OAAO;CAIT,IAAI;EACF,MAAM,UAAU,OAAO;EACvB,IAAI,OAAO,SAAS,YAAY,YAC9B,OAAO;EAET,MAAM,SAAS,QAAQ,QAAQ,UAAU;EACzC,IAAI,WAAW,WAAW,WAAW,QACnC,OAAO;CACX,QACM,CAEN;CAEA,OAAO;AACT;AAEA,SAAS,iBAA4B;CACnC,IAAI,OAAO,WAAW,aACpB,OAAO;CACT,OAAO,OAAO,aAAa,8BAA8B,CAAC,EAAE,UAAU,SAAS;AACjF;AAEA,SAAS,kBAAkB,aAAa,qBAAqB,UAAU,MAAiB;CACtF,OAAO,gBAAgB,YAAY,OAAO,KAAK,eAAe;AAChE;AAEA,SAAS,WAAW,OAAkB,QAAmC;CACvE,IAAI,OAAO,aAAa,aACtB;CAKF,MAAM,OAAO,SAAS,KAAK,SAAS;CACpC,KAAK,QAAQ,QAAQ;AACvB;AA2BA,SAAS,iBAAiB,UAA2B,CAAC,GAAG,WAAW,MAAkB;CACpF,MAAM,aAAa,QAAQ,cAAc;CACzC,MAAM,UAAU,QAAQ,WAAW;CAEnC,OAAO;EACL,OAAO,IAAe,kBAAkB,YAAY,OAAO,CAAC;EAC5D;EACA;EACA,QAAQ,QAAQ;EAChB,gBAAgB;EAChB;CACF;AACF;;AAGA,IAAa,0BAAoD,OAAO,IAAI,kCAAkC;;;;;;;;;;;;;;;;;;;;AAuB9G,IAAI,yBAAyB;AAC7B,IAAI,wBAAwB;AAE5B,IAAa,yBAAyB,EACpC,QAAQ,KAAU,UAA2B,CAAC,GAAG;CAC/C,yBAAyB;CACzB,MAAM,QAAQ,iBAAiB,OAAO;CACtC,IAAI,QAAQ,yBAAyB,KAAK;CAG1C,IAAI,gBAAgB,MAAM,oBAAoB,CAAC;AACjD,EACF;AAGA,IAAI,mBAAsC;;AAG1C,SAAgB,2BAAiC;CAC/C,wBAAwB;AAC1B;AAEA,SAAS,kBAAkB,SAAsC;CAG/D,IAAI,oBAAoB,GAAG;EACzB,MAAM,WAAW,OAAO,yBAAyB,IAAI;EACrD,IAAI,UACF,OAAO;CACX;CAMA,IAAI,WACF,OAAO,iBAAiB,SAAS,KAAK;CAIxC,IACE,0BAA0B,CAAC,yBAAA,QAAA,IAAA,aAAA,cAE3B;EACA,wBAAwB;EACxB,QAAQ,KACN,2MAGF;CACF;CAEA,IAAI,CAAC,kBACH,mBAAmB,iBAAiB,OAAO;CAE7C,OAAO;AACT;AAMA,SAAS,cAAc,OAAmB;CACxC,IAAI,MAAM,kBAAkB,OAAO,WAAW,aAC5C;CACF,MAAM,iBAAiB;CAGvB,MAAM,aAAa,UAA8B;EAC/C,IAAI,CAAC,MAAM,WAAW,MAAM,QAAQ,MAAM,YACxC;EACF,IAAI,MAAM,aAAa,WAAW,MAAM,aAAa,QAAQ;GAC3D,MAAM,MAAM,QAAQ,MAAM;GAC1B,WAAW,MAAM,UAAU,MAAM,MAAM;EACzC;CACF;CACA,OAAO,mBAAmB,WAAW,SAAS;CAI9C,MAAM,MAAM,OAAO,aAAa,8BAA8B;CAC9D,MAAM,kBAAkB,UAAqC;EAC3D,IAAI,gBAAgB,MAAM,YAAY,MAAM,OAAO,MAAM,MACvD;EACF,MAAM,OAAkB,MAAM,UAAU,SAAS;EACjD,MAAM,MAAM,QAAQ;EACpB,WAAW,MAAM,MAAM,MAAM;CAC/B;CACA,KAAK,mBAAmB,UAAU,cAAc;CAEhD,MAAM,0BAA0B;EAC9B,OAAO,sBAAsB,WAAW,SAAS;EACjD,KAAK,sBAAsB,UAAU,cAAc;EACnD,MAAM,iBAAiB;EACvB,MAAM,oBAAoB,KAAA;CAC5B;AACF;;;;;;;;;;AAWA,SAAgB,eAAe,UAA2B,CAAC,GAAG;CAC5D,MAAM,aAAa,QAAQ,cAAc;CACzC,MAAM,UAAU,QAAQ,WAAW;CACnC,MAAM,YAAY,kBAAkB,YAAY,OAAO;CAEvD,qBAAqB,iBAAiB,OAAO;CAC7C,iBAAiB,aAAa;CAC9B,iBAAiB,UAAU;CAC3B,iBAAiB,MAAM,QAAQ;CAE/B,WAAW,SAAS;AACtB;AAEA,SAAgB,SAAS,UAA2B,CAAC,GAAG;CACtD,MAAM,QAAQ,kBAAkB,OAAO;CAIvC,IAAI,QAAQ,eAAe,KAAA,GACzB,MAAM,aAAa,QAAQ;CAC7B,IAAI,QAAQ,YAAY,KAAA,GACtB,MAAM,UAAU,QAAQ;CAC1B,IAAI,QAAQ,WAAW,KAAA,GACrB,MAAM,SAAS,QAAQ;CAEzB,cAAc,KAAK;CAEnB,MAAM,QAAQ,MAAM;CACpB,MAAM,SAAS,eAAe,MAAM,UAAU,MAAM;CAEpD,SAAS,SAAS,MAAiB;EACjC,IAAI,CAAC,MAAM,UACT,MAAM,IAAI,MACR,8RAGF;EAGF,MAAM,QAAQ;EACd,WAAW,MAAM,MAAM,MAAM;EAE7B,IAAI,MAAM,WAAW,OAAO,WAAW,aAErC,IAAI;GACF,MAAM,UAAU,OAAO;GACvB,IAAI,OAAO,SAAS,YAAY,YAC9B,QAAQ,QAAQ,MAAM,YAAY,IAAI;EAC1C,QACM,CAEN;CAEJ;CAEA,SAAS,cAAc;EACrB,SAAS,MAAM,UAAU,SAAS,UAAU,MAAM;CACpD;CAEA,SAAS,YAAY;EACnB,WAAW,MAAM,OAAO,MAAM,MAAM;CACtC;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useToast.js CHANGED Viewed

@@ -45,7 +45,7 @@ function resolveToastState() {
 		if (provided) return provided;
 	}
 	if (IS_SERVER) throw new Error("[granularity] useToast requires `app.use(granularityToastPlugin)` during SSR — the module-singleton fallback is disabled server-side to avoid state leaking between requests.");
-	if (appScopedToastProvided && !contextFallbackWarned && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+	if (appScopedToastProvided && !contextFallbackWarned && process.env.NODE_ENV !== "production") {
 		contextFallbackWarned = true;
 		console.warn("[granularity] useToast() вызван вне setup/inject-контекста: app-scoped состояние granularityToastPlugin недоступно, использован модульный синглтон — эти тосты не попадут в GrToaster приложения. Оберните вызов: app.runWithContext(() => useToast()).");
 	}

package/dist/composables/useToast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useToast.js","names":[],"sources":["../../src/composables/useToast.ts"],"sourcesContent":["import { computed, hasInjectionContext, inject, reactive } from 'vue'\nimport type { App, InjectionKey } from 'vue'\n\nimport type { GrButtonSize, GrButtonVariant } from '../components/GrButton/grButtonStyles'\nimport type { GrTone } from '../components/shared/tones'\n\nexport type GrToastTone = GrTone\n\n/*\n Опциональная action-кнопка тоста: `label` — текст, `onClick` — обработчик.\n * По клику вызывается `onClick`, затем тост закрывается (если `dismissOnClick`\n * не установлен в `false`). `size`/`variant` настраивают вид кнопки.\n /\nexport type ToastAction = {\n label: string\n onClick: () => void\n /* Закрывать ли тост после клика по действию. По умолчанию `true`. /\n dismissOnClick?: boolean\n /* Размер кнопки действия. По умолчанию `sm`. /\n size?: GrButtonSize\n /* Вариант кнопки действия. По умолчанию `outline`. /\n variant?: GrButtonVariant\n}\n\nexport type ToastInput = {\n title: string\n message?: string\n tone?: GrToastTone\n /\n Автозакрытие через N мс. `0` или отрицательное значение — «навсегда»\n * (до явного вызова `dismiss(id)` / `clear()`). По умолчанию: `3500`.\n /\n timeoutMs?: number\n /* Одна action-кнопка в теле тоста (шорткат для `actions: [action]`). /\n action?: ToastAction\n /* Несколько action-кнопок в теле тоста. Рендерятся после `action`. /\n actions?: ToastAction[]\n /\n Схлопывать повтор: `push` с уже занятым ключом обновляет живой тост\n * и перезапускает его автозакрытие вместо того, чтобы завести второй.\n \n Ключ действует только пока тост на экране. Это не то же самое, что помнить\n * последнее показанное: повтор действия с тем же текстом обязан показаться\n * снова, иначе второе «Сохранено» пропадёт молча.\n /\n dedupeKey?: string\n}\n\n/\n Сообщения для `promise`. Строка — шорткат для `{ title }`; функция получает\n * результат промиса (или причину отказа), чтобы подставить его в текст.\n /\nexport type ToastPromiseMessages<T> = {\n loading: string \| ToastInput\n success: string \| ToastInput \| ((value: T) => string \| ToastInput)\n error: string \| ToastInput \| ((reason: unknown) => string \| ToastInput)\n}\n\nexport type Toast = {\n id: string\n title: string\n message?: string\n tone: GrToastTone\n /* Исходный таймаут автозакрытия, мс (`0` — без автозакрытия). Нужен для progress-бара. /\n timeoutMs: number\n /* Одна action-кнопка в теле тоста. /\n action?: ToastAction\n /* Несколько action-кнопок в теле тоста. /\n actions?: ToastAction[]\n /* Ключ схлопывания повторов, если тост создан с ним. /\n dedupeKey?: string\n}\n\nconst DEFAULT_TIMEOUT_MS = 3500\nconst IS_SERVER = typeof window === 'undefined'\n\n// Метаданные таймера автозакрытия с поддержкой pause/resume (WCAG 2.2.1: под\n// курсором/фокусом отсчёт должен останавливаться).\ntype ToastTimer = {\n handle: number \| null\n /* Сколько мс осталось до автозакрытия на момент последней паузы/старта. /\n remaining: number\n /* `performance.now()` момента запуска текущего отрезка (для вычисления остатка). /\n startedAt: number\n}\n\nexport type ToastState = {\n toasts: Toast[]\n timers: Map<string, ToastTimer>\n /* Потолок очереди: сверх него самые старые тосты вытесняются. /\n maxToasts: number\n}\n\n/\n Потолок очереди по умолчанию. `maxVisible` у `GrToaster` режет только видимые,\n * поэтому без него поток событий (переподключение сокета, цикл ошибок) копил бы\n * очередь и вываливал её на пользователя, когда стек освободится.\n /\nconst DEFAULT_MAX_TOASTS = 20\n\nexport type GranularityToastPluginOptions = {\n /* Потолок очереди. По умолчанию `20`. /\n maxToasts?: number\n}\n\nfunction createToastState(maxToasts = DEFAULT_MAX_TOASTS): ToastState {\n return {\n toasts: reactive<Toast[]>([]),\n timers: new Map<string, ToastTimer>(),\n maxToasts: Math.max(1, Math.trunc(maxToasts)),\n }\n}\n\n/* Ключ provide/inject для app-scoped состояния тостов (устанавливает плагин ниже). /\nexport const GRANULARITY_TOAST_STATE: InjectionKey<ToastState> = Symbol.for('@feugene/granularity/toast-state')\n\n/\n Vue-плагин: даёт каждому приложению собственное изолированное состояние тостов\n * через `app.provide`. Обязателен для (а) нескольких Vue-приложений на одной\n * странице (микрофронтенды — иначе делят один стек тостов) и (б) SSR (иначе\n * модульное состояние течёт между запросами).\n \n ```ts\n * app.use(granularityToastPlugin)\n * app.use(granularityToastPlugin, { maxToasts: 50 })\n * ```\n /\n// Где-то на странице установлен плагин: фолбэк в синглтон для такого приложения —\n// почти наверняка ошибка вызова, а не осознанный выбор.\nlet appScopedToastProvided = false\nlet contextFallbackWarned = false\n\nexport const granularityToastPlugin = {\n install(app: App, options: GranularityToastPluginOptions = {}) {\n appScopedToastProvided = true\n app.provide(GRANULARITY_TOAST_STATE, createToastState(options.maxToasts))\n },\n}\n\n// Ленивый модульный синглтон — канонический фолбэк для простых SPA без плагина.\nlet moduleToastState: ToastState \| null = null\n\n/* Сброс dev-предупреждения о фолбэке. Внутреннее API — нужно тестам. /\nexport function resetToastContextWarning(): void {\n contextFallbackWarned = false\n}\n\nfunction resolveToastState(): ToastState {\n // App-scoped состояние (provide через плагин): setup-контекст ИЛИ\n // `app.runWithContext(() => useToast())` — `hasInjectionContext` покрывает оба,\n // поэтому вызов из router guard / интерцептора достаёт состояние приложения.\n if (hasInjectionContext()) {\n const provided = inject(GRANULARITY_TOAST_STATE, null)\n if (provided)\n return provided\n }\n\n // В SSR модульный фолбэк запрещён: одно mutable-состояние на модуль утекало бы\n // между запросами. Требуем установленный плагин (app.provide).\n if (IS_SERVER) {\n throw new Error(\n '[granularity] useToast requires `app.use(granularityToastPlugin)` during SSR — '\n + 'the module-singleton fallback is disabled server-side to avoid state leaking between requests.',\n )\n }\n\n // Дедуп и текст — прямо под гардом: `__GR_DEV__` разворачивается в условие\n // на сборке, и у потребителя вся ветка выкидывается вместе с сообщением.\n if (\n appScopedToastProvided && !contextFallbackWarned\n && __GR_DEV__\n ) {\n contextFallbackWarned = true\n console.warn(\n '[granularity] useToast() вызван вне setup/inject-контекста: app-scoped состояние '\n + 'granularityToastPlugin недоступно, использован модульный синглтон — эти тосты не попадут '\n + 'в GrToaster приложения. Оберните вызов: app.runWithContext(() => useToast()).',\n )\n }\n\n if (!moduleToastState)\n moduleToastState = createToastState()\n\n return moduleToastState\n}\n\nfunction now(): number {\n return typeof performance !== 'undefined' ? performance.now() : Date.now()\n}\n\nfunction makeId(): string {\n return `${Date.now()}-${Math.random().toString(16).slice(2)}`\n}\n\nexport function useToast() {\n const state = resolveToastState()\n const list = computed(() => state.toasts)\n\n function armTimer(id: string, timer: ToastTimer): void {\n if (timer.remaining <= 0 \|\| typeof window === 'undefined')\n return\n timer.startedAt = now()\n timer.handle = window.setTimeout(() => {\n state.timers.delete(id)\n dismiss(id)\n }, timer.remaining)\n }\n\n function clearTimer(id: string): void {\n const timer = state.timers.get(id)\n if (timer?.handle != null) {\n clearTimeout(timer.handle)\n timer.handle = null\n }\n state.timers.delete(id)\n }\n\n function push(input: ToastInput): string {\n const timeout = input.timeoutMs ?? DEFAULT_TIMEOUT_MS\n\n // Схлопывание ищет тост только среди живых. Помнить последний показанный\n // ключ нельзя: тогда повтор того же действия («Сохранено» второй раз)\n // не показался бы вообще — тост уже ушёл, а ключ ещё занят.\n if (input.dedupeKey !== undefined) {\n const existing = state.toasts.find(item => item.dedupeKey === input.dedupeKey)\n if (existing) {\n // Замена целиком, а не патч: повторный `push` — это законченное\n // высказывание, и `message` от прошлого раза донашивать он не должен.\n applyStage(existing.id, { ...input, tone: input.tone ?? 'info', timeoutMs: timeout })\n return existing.id\n }\n }\n\n const id = makeId()\n const toast: Toast = {\n id,\n title: input.title,\n message: input.message,\n tone: input.tone ?? 'info',\n timeoutMs: timeout > 0 ? timeout : 0,\n action: input.action,\n actions: input.actions,\n dedupeKey: input.dedupeKey,\n }\n\n state.toasts.unshift(toast)\n trimQueue()\n\n if (toast.timeoutMs > 0) {\n const timer: ToastTimer = { handle: null, remaining: toast.timeoutMs, startedAt: now() }\n state.timers.set(id, timer)\n armTimer(id, timer)\n }\n\n return id\n }\n\n // Вытесняем с хвоста — там самые старые: при потоке событий устаревшее\n // уведомление менее ценно, чем свежее. Таймеры снимаем, иначе остались бы\n // висящие `setTimeout` на тосты, которых больше нет.\n //\n // Это флуд-защита уровня состояния, а не очередь показа (`GrToaster` держит\n // видимыми старейших): при переполнении потолка вытеснен может быть и тост,\n // который сейчас на экране, — осознанный компромисс.\n function trimQueue(): void {\n while (state.toasts.length > state.maxToasts) {\n const dropped = state.toasts.pop()\n if (dropped)\n clearTimer(dropped.id)\n }\n }\n\n /\n Меняет показанный тост на месте. `timeoutMs` в патче перезапускает таймер\n * (`0` — снова «навсегда»), поэтому «вечный» loading может стать\n * самозакрывающимся success.\n \n Возвращает `false`, если тоста уже нет: пользователь мог закрыть его руками,\n * и воскрешать его нельзя.\n /\n function update(id: string, patch: Partial<ToastInput>): boolean {\n const toast = state.toasts.find(item => item.id === id)\n if (!toast)\n return false\n\n if (patch.title !== undefined)\n toast.title = patch.title\n if (patch.message !== undefined)\n toast.message = patch.message\n if (patch.tone !== undefined)\n toast.tone = patch.tone\n if (patch.action !== undefined)\n toast.action = patch.action\n if (patch.actions !== undefined)\n toast.actions = patch.actions\n\n if (patch.timeoutMs !== undefined)\n toast.timeoutMs = rearmTimer(id, patch.timeoutMs)\n\n return true\n }\n\n /* Перезапускает автозакрытие с нового таймаута; `0` и меньше — «навсегда». /\n function rearmTimer(id: string, timeoutMs: number): number {\n clearTimer(id)\n const next = timeoutMs > 0 ? timeoutMs : 0\n\n if (next > 0) {\n const timer: ToastTimer = { handle: null, remaining: next, startedAt: now() }\n state.timers.set(id, timer)\n armTimer(id, timer)\n }\n\n return next\n }\n\n /\n Полная замена стадии для `promise()`. В отличие от `update`, поле без\n * значения очищается: успех не должен донашивать `message` и action-кнопки\n * загрузки — патч-семантика оставляла бы их в тосте навсегда.\n /\n function applyStage(id: string, stage: ToastInput & { tone: GrToastTone, timeoutMs: number }): void {\n const toast = state.toasts.find(item => item.id === id)\n if (!toast)\n return\n\n toast.title = stage.title\n toast.message = stage.message\n toast.tone = stage.tone\n toast.action = stage.action\n toast.actions = stage.actions\n toast.timeoutMs = rearmTimer(id, stage.timeoutMs)\n }\n\n /\n Один тост на весь жизненный цикл промиса: «загружаем» переписывается в\n * успех или ошибку, а не закрывается ради нового — стек не дёргается.\n \n Каждая стадия заменяет предыдущую целиком: поле, не заданное в\n * success/error, очищается, а не наследуется от loading.\n \n Возвращает исходный промис и не глотает отказ: тост не заменяет\n * обработку ошибки, вызывающий по-прежнему обязан её обработать.\n /\n function promise<T>(input: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T> {\n const id = push({ tone: 'info', ...toToastInput(messages.loading), timeoutMs: 0 })\n\n input.then(\n (value) => {\n const stage = resolveMessage(messages.success, value)\n applyStage(id, { ...stage, tone: stage.tone ?? 'success', timeoutMs: stage.timeoutMs ?? DEFAULT_TIMEOUT_MS })\n },\n (reason: unknown) => {\n const stage = resolveMessage(messages.error, reason)\n applyStage(id, { ...stage, tone: stage.tone ?? 'danger', timeoutMs: stage.timeoutMs ?? DEFAULT_TIMEOUT_MS })\n },\n )\n\n return input\n }\n\n /* Останавливает отсчёт автозакрытия, сохраняя остаток (идемпотентно). /\n function pause(id: string): void {\n const timer = state.timers.get(id)\n if (!timer \|\| timer.handle == null)\n return\n\n clearTimeout(timer.handle)\n timer.handle = null\n timer.remaining = Math.max(0, timer.remaining - (now() - timer.startedAt))\n }\n\n /* Возобновляет отсчёт с сохранённого остатка (идемпотентно). */\n function resume(id: string): void {\n const timer = state.timers.get(id)\n if (!timer \|\| timer.handle != null)\n return\n\n armTimer(id, timer)\n }\n\n function dismiss(id: string): void {\n clearTimer(id)\n const index = state.toasts.findIndex(toast => toast.id === id)\n if (index >= 0)\n state.toasts.splice(index, 1)\n }\n\n function clear(): void {\n for (const id of [...state.timers.keys()]) clearTimer(id)\n state.toasts.splice(0, state.toasts.length)\n }\n\n return {\n list,\n push,\n update,\n promise,\n dismiss,\n clear,\n pause,\n resume,\n }\n}\n\nfunction toToastInput(message: string \| ToastInput): ToastInput {\n return typeof message === 'string' ? { title: message } : message\n}\n\nfunction resolveMessage<T>(\n message: string \| ToastInput \| ((value: T) => string \| ToastInput),\n value: T,\n): ToastInput {\n return toToastInput(typeof message === 'function' ? message(value) : message)\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useToast.js","names":[],"sources":["../../src/composables/useToast.ts"],"sourcesContent":["import { computed, hasInjectionContext, inject, reactive } from 'vue'\nimport type { App, InjectionKey } from 'vue'\n\nimport type { GrButtonSize, GrButtonVariant } from '../components/GrButton/grButtonStyles'\nimport type { GrTone } from '../components/shared/tones'\n\nexport type GrToastTone = GrTone\n\n/*\n Опциональная action-кнопка тоста: `label` — текст, `onClick` — обработчик.\n * По клику вызывается `onClick`, затем тост закрывается (если `dismissOnClick`\n * не установлен в `false`). `size`/`variant` настраивают вид кнопки.\n /\nexport type ToastAction = {\n label: string\n onClick: () => void\n /* Закрывать ли тост после клика по действию. По умолчанию `true`. /\n dismissOnClick?: boolean\n /* Размер кнопки действия. По умолчанию `sm`. /\n size?: GrButtonSize\n /* Вариант кнопки действия. По умолчанию `outline`. /\n variant?: GrButtonVariant\n}\n\nexport type ToastInput = {\n title: string\n message?: string\n tone?: GrToastTone\n /\n Автозакрытие через N мс. `0` или отрицательное значение — «навсегда»\n * (до явного вызова `dismiss(id)` / `clear()`). По умолчанию: `3500`.\n /\n timeoutMs?: number\n /* Одна action-кнопка в теле тоста (шорткат для `actions: [action]`). /\n action?: ToastAction\n /* Несколько action-кнопок в теле тоста. Рендерятся после `action`. /\n actions?: ToastAction[]\n /\n Схлопывать повтор: `push` с уже занятым ключом обновляет живой тост\n * и перезапускает его автозакрытие вместо того, чтобы завести второй.\n \n Ключ действует только пока тост на экране. Это не то же самое, что помнить\n * последнее показанное: повтор действия с тем же текстом обязан показаться\n * снова, иначе второе «Сохранено» пропадёт молча.\n /\n dedupeKey?: string\n}\n\n/\n Сообщения для `promise`. Строка — шорткат для `{ title }`; функция получает\n * результат промиса (или причину отказа), чтобы подставить его в текст.\n /\nexport type ToastPromiseMessages<T> = {\n loading: string \| ToastInput\n success: string \| ToastInput \| ((value: T) => string \| ToastInput)\n error: string \| ToastInput \| ((reason: unknown) => string \| ToastInput)\n}\n\nexport type Toast = {\n id: string\n title: string\n message?: string\n tone: GrToastTone\n /* Исходный таймаут автозакрытия, мс (`0` — без автозакрытия). Нужен для progress-бара. /\n timeoutMs: number\n /* Одна action-кнопка в теле тоста. /\n action?: ToastAction\n /* Несколько action-кнопок в теле тоста. /\n actions?: ToastAction[]\n /* Ключ схлопывания повторов, если тост создан с ним. /\n dedupeKey?: string\n}\n\nconst DEFAULT_TIMEOUT_MS = 3500\nconst IS_SERVER = typeof window === 'undefined'\n\n// Метаданные таймера автозакрытия с поддержкой pause/resume (WCAG 2.2.1: под\n// курсором/фокусом отсчёт должен останавливаться).\ntype ToastTimer = {\n handle: number \| null\n /* Сколько мс осталось до автозакрытия на момент последней паузы/старта. /\n remaining: number\n /* `performance.now()` момента запуска текущего отрезка (для вычисления остатка). /\n startedAt: number\n}\n\nexport type ToastState = {\n toasts: Toast[]\n timers: Map<string, ToastTimer>\n /* Потолок очереди: сверх него самые старые тосты вытесняются. /\n maxToasts: number\n}\n\n/\n Потолок очереди по умолчанию. `maxVisible` у `GrToaster` режет только видимые,\n * поэтому без него поток событий (переподключение сокета, цикл ошибок) копил бы\n * очередь и вываливал её на пользователя, когда стек освободится.\n /\nconst DEFAULT_MAX_TOASTS = 20\n\nexport type GranularityToastPluginOptions = {\n /* Потолок очереди. По умолчанию `20`. /\n maxToasts?: number\n}\n\nfunction createToastState(maxToasts = DEFAULT_MAX_TOASTS): ToastState {\n return {\n toasts: reactive<Toast[]>([]),\n timers: new Map<string, ToastTimer>(),\n maxToasts: Math.max(1, Math.trunc(maxToasts)),\n }\n}\n\n/* Ключ provide/inject для app-scoped состояния тостов (устанавливает плагин ниже). /\nexport const GRANULARITY_TOAST_STATE: InjectionKey<ToastState> = Symbol.for('@feugene/granularity/toast-state')\n\n/\n Vue-плагин: даёт каждому приложению собственное изолированное состояние тостов\n * через `app.provide`. Обязателен для (а) нескольких Vue-приложений на одной\n * странице (микрофронтенды — иначе делят один стек тостов) и (б) SSR (иначе\n * модульное состояние течёт между запросами).\n \n ```ts\n * app.use(granularityToastPlugin)\n * app.use(granularityToastPlugin, { maxToasts: 50 })\n * ```\n /\n// Где-то на странице установлен плагин: фолбэк в синглтон для такого приложения —\n// почти наверняка ошибка вызова, а не осознанный выбор.\nlet appScopedToastProvided = false\nlet contextFallbackWarned = false\n\nexport const granularityToastPlugin = {\n install(app: App, options: GranularityToastPluginOptions = {}) {\n appScopedToastProvided = true\n app.provide(GRANULARITY_TOAST_STATE, createToastState(options.maxToasts))\n },\n}\n\n// Ленивый модульный синглтон — канонический фолбэк для простых SPA без плагина.\nlet moduleToastState: ToastState \| null = null\n\n/* Сброс dev-предупреждения о фолбэке. Внутреннее API — нужно тестам. /\nexport function resetToastContextWarning(): void {\n contextFallbackWarned = false\n}\n\nfunction resolveToastState(): ToastState {\n // App-scoped состояние (provide через плагин): setup-контекст ИЛИ\n // `app.runWithContext(() => useToast())` — `hasInjectionContext` покрывает оба,\n // поэтому вызов из router guard / интерцептора достаёт состояние приложения.\n if (hasInjectionContext()) {\n const provided = inject(GRANULARITY_TOAST_STATE, null)\n if (provided)\n return provided\n }\n\n // В SSR модульный фолбэк запрещён: одно mutable-состояние на модуль утекало бы\n // между запросами. Требуем установленный плагин (app.provide).\n if (IS_SERVER) {\n throw new Error(\n '[granularity] useToast requires `app.use(granularityToastPlugin)` during SSR — '\n + 'the module-singleton fallback is disabled server-side to avoid state leaking between requests.',\n )\n }\n\n // Дедуп и текст — прямо под гардом: `__GR_DEV__` разворачивается в условие\n // на сборке, и у потребителя вся ветка выкидывается вместе с сообщением.\n if (\n appScopedToastProvided && !contextFallbackWarned\n && __GR_DEV__\n ) {\n contextFallbackWarned = true\n console.warn(\n '[granularity] useToast() вызван вне setup/inject-контекста: app-scoped состояние '\n + 'granularityToastPlugin недоступно, использован модульный синглтон — эти тосты не попадут '\n + 'в GrToaster приложения. Оберните вызов: app.runWithContext(() => useToast()).',\n )\n }\n\n if (!moduleToastState)\n moduleToastState = createToastState()\n\n return moduleToastState\n}\n\nfunction now(): number {\n return typeof performance !== 'undefined' ? performance.now() : Date.now()\n}\n\nfunction makeId(): string {\n return `${Date.now()}-${Math.random().toString(16).slice(2)}`\n}\n\nexport function useToast() {\n const state = resolveToastState()\n const list = computed(() => state.toasts)\n\n function armTimer(id: string, timer: ToastTimer): void {\n if (timer.remaining <= 0 \|\| typeof window === 'undefined')\n return\n timer.startedAt = now()\n timer.handle = window.setTimeout(() => {\n state.timers.delete(id)\n dismiss(id)\n }, timer.remaining)\n }\n\n function clearTimer(id: string): void {\n const timer = state.timers.get(id)\n if (timer?.handle != null) {\n clearTimeout(timer.handle)\n timer.handle = null\n }\n state.timers.delete(id)\n }\n\n function push(input: ToastInput): string {\n const timeout = input.timeoutMs ?? DEFAULT_TIMEOUT_MS\n\n // Схлопывание ищет тост только среди живых. Помнить последний показанный\n // ключ нельзя: тогда повтор того же действия («Сохранено» второй раз)\n // не показался бы вообще — тост уже ушёл, а ключ ещё занят.\n if (input.dedupeKey !== undefined) {\n const existing = state.toasts.find(item => item.dedupeKey === input.dedupeKey)\n if (existing) {\n // Замена целиком, а не патч: повторный `push` — это законченное\n // высказывание, и `message` от прошлого раза донашивать он не должен.\n applyStage(existing.id, { ...input, tone: input.tone ?? 'info', timeoutMs: timeout })\n return existing.id\n }\n }\n\n const id = makeId()\n const toast: Toast = {\n id,\n title: input.title,\n message: input.message,\n tone: input.tone ?? 'info',\n timeoutMs: timeout > 0 ? timeout : 0,\n action: input.action,\n actions: input.actions,\n dedupeKey: input.dedupeKey,\n }\n\n state.toasts.unshift(toast)\n trimQueue()\n\n if (toast.timeoutMs > 0) {\n const timer: ToastTimer = { handle: null, remaining: toast.timeoutMs, startedAt: now() }\n state.timers.set(id, timer)\n armTimer(id, timer)\n }\n\n return id\n }\n\n // Вытесняем с хвоста — там самые старые: при потоке событий устаревшее\n // уведомление менее ценно, чем свежее. Таймеры снимаем, иначе остались бы\n // висящие `setTimeout` на тосты, которых больше нет.\n //\n // Это флуд-защита уровня состояния, а не очередь показа (`GrToaster` держит\n // видимыми старейших): при переполнении потолка вытеснен может быть и тост,\n // который сейчас на экране, — осознанный компромисс.\n function trimQueue(): void {\n while (state.toasts.length > state.maxToasts) {\n const dropped = state.toasts.pop()\n if (dropped)\n clearTimer(dropped.id)\n }\n }\n\n /\n Меняет показанный тост на месте. `timeoutMs` в патче перезапускает таймер\n * (`0` — снова «навсегда»), поэтому «вечный» loading может стать\n * самозакрывающимся success.\n \n Возвращает `false`, если тоста уже нет: пользователь мог закрыть его руками,\n * и воскрешать его нельзя.\n /\n function update(id: string, patch: Partial<ToastInput>): boolean {\n const toast = state.toasts.find(item => item.id === id)\n if (!toast)\n return false\n\n if (patch.title !== undefined)\n toast.title = patch.title\n if (patch.message !== undefined)\n toast.message = patch.message\n if (patch.tone !== undefined)\n toast.tone = patch.tone\n if (patch.action !== undefined)\n toast.action = patch.action\n if (patch.actions !== undefined)\n toast.actions = patch.actions\n\n if (patch.timeoutMs !== undefined)\n toast.timeoutMs = rearmTimer(id, patch.timeoutMs)\n\n return true\n }\n\n /* Перезапускает автозакрытие с нового таймаута; `0` и меньше — «навсегда». /\n function rearmTimer(id: string, timeoutMs: number): number {\n clearTimer(id)\n const next = timeoutMs > 0 ? timeoutMs : 0\n\n if (next > 0) {\n const timer: ToastTimer = { handle: null, remaining: next, startedAt: now() }\n state.timers.set(id, timer)\n armTimer(id, timer)\n }\n\n return next\n }\n\n /\n Полная замена стадии для `promise()`. В отличие от `update`, поле без\n * значения очищается: успех не должен донашивать `message` и action-кнопки\n * загрузки — патч-семантика оставляла бы их в тосте навсегда.\n /\n function applyStage(id: string, stage: ToastInput & { tone: GrToastTone, timeoutMs: number }): void {\n const toast = state.toasts.find(item => item.id === id)\n if (!toast)\n return\n\n toast.title = stage.title\n toast.message = stage.message\n toast.tone = stage.tone\n toast.action = stage.action\n toast.actions = stage.actions\n toast.timeoutMs = rearmTimer(id, stage.timeoutMs)\n }\n\n /\n Один тост на весь жизненный цикл промиса: «загружаем» переписывается в\n * успех или ошибку, а не закрывается ради нового — стек не дёргается.\n \n Каждая стадия заменяет предыдущую целиком: поле, не заданное в\n * success/error, очищается, а не наследуется от loading.\n \n Возвращает исходный промис и не глотает отказ: тост не заменяет\n * обработку ошибки, вызывающий по-прежнему обязан её обработать.\n /\n function promise<T>(input: Promise<T>, messages: ToastPromiseMessages<T>): Promise<T> {\n const id = push({ tone: 'info', ...toToastInput(messages.loading), timeoutMs: 0 })\n\n input.then(\n (value) => {\n const stage = resolveMessage(messages.success, value)\n applyStage(id, { ...stage, tone: stage.tone ?? 'success', timeoutMs: stage.timeoutMs ?? DEFAULT_TIMEOUT_MS })\n },\n (reason: unknown) => {\n const stage = resolveMessage(messages.error, reason)\n applyStage(id, { ...stage, tone: stage.tone ?? 'danger', timeoutMs: stage.timeoutMs ?? DEFAULT_TIMEOUT_MS })\n },\n )\n\n return input\n }\n\n /* Останавливает отсчёт автозакрытия, сохраняя остаток (идемпотентно). /\n function pause(id: string): void {\n const timer = state.timers.get(id)\n if (!timer \|\| timer.handle == null)\n return\n\n clearTimeout(timer.handle)\n timer.handle = null\n timer.remaining = Math.max(0, timer.remaining - (now() - timer.startedAt))\n }\n\n /* Возобновляет отсчёт с сохранённого остатка (идемпотентно). */\n function resume(id: string): void {\n const timer = state.timers.get(id)\n if (!timer \|\| timer.handle != null)\n return\n\n armTimer(id, timer)\n }\n\n function dismiss(id: string): void {\n clearTimer(id)\n const index = state.toasts.findIndex(toast => toast.id === id)\n if (index >= 0)\n state.toasts.splice(index, 1)\n }\n\n function clear(): void {\n for (const id of [...state.timers.keys()]) clearTimer(id)\n state.toasts.splice(0, state.toasts.length)\n }\n\n return {\n list,\n push,\n update,\n promise,\n dismiss,\n clear,\n pause,\n resume,\n }\n}\n\nfunction toToastInput(message: string \| ToastInput): ToastInput {\n return typeof message === 'string' ? { title: message } : message\n}\n\nfunction resolveMessage<T>(\n message: string \| ToastInput \| ((value: T) => string \| ToastInput),\n value: T,\n): ToastInput {\n return toToastInput(typeof message === 'function' ? message(value) : message)\n}\n"],"mappings":"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"}

package/dist/composables/useVirtualList.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { computed, onScopeDispose, ref, watch } from "vue";
+import { r as registerGrVirtualList } from "../chunks/devHook-CiqijpNM.js";
+import { computed, getCurrentInstance, onScopeDispose, ref, watch } from "vue";
 //#region src/composables/useVirtualList.ts
 var DEFAULT_OVERSCAN = 4;
 /** Порог, ниже которого разницу замеров считаем шумом округления. */
@@ -183,11 +184,9 @@ function useVirtualList(options) {
 			case "center":
 				next = start + size / 2 - height / 2;
 				break;
-			case "auto":
-				if (start < el.scrollTop) next = start;
-				else if (end > el.scrollTop + height) next = end - height;
-				else return;
-				break;
+			case "auto": if (start < el.scrollTop) next = start;
+			else if (end > el.scrollTop + height) next = end - height;
+			else return;
 		}
 		el.scrollTop = Math.max(0, Math.min(next, offsetAt(count) - height));
 		scrollTop.value = el.scrollTop;
@@ -224,10 +223,31 @@ function useVirtualList(options) {
 		offsets = offsets.slice(0, count + 1);
 		for (const index of [...measured.keys()]) if (index >= count) measured.delete(index);
 	}
+	const unregisterFromDevtools = process.env.NODE_ENV !== "production" ? (() => {
+		const instance = getCurrentInstance();
+		const owner = (instance?.type)?.__name ?? null;
+		return registerGrVirtualList(() => {
+			const sizes = [...measured.values()];
+			const window = range.value;
+			return {
+				owner,
+				uid: instance?.uid ?? null,
+				total: options.count(),
+				rendered: Math.max(0, window.end - window.start),
+				range: {
+					start: window.start,
+					end: window.end
+				},
+				estimated: estimateOf(window.start),
+				measured: sizes.length > 0 ? sizes.reduce((sum, size) => sum + size, 0) / sizes.length : null
+			};
+		});
+	})() : null;
 	onScopeDispose(() => {
 		detach();
 		sizeObserver?.disconnect();
 		viewportObserver?.disconnect();
+		unregisterFromDevtools?.();
 	});
 	return {
 		range,

package/dist/composables/useVirtualList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useVirtualList.js","names":[],"sources":["../../src/composables/useVirtualList.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\n\n/*\n Виртуализация длинного списка: в DOM живёт только окно вокруг вьюпорта.\n \n Композабл считает геометрию и отдаёт три числа — какой срез рисовать\n * (`range`), какой высоты держать распорку (`totalSize`) и на сколько сдвинуть\n * отрисованное (`offset`). Разметку строит потребитель: примитив ничего не\n * рендерит и ничего не знает про роли и клавиатуру своего списка.\n \n Скролл-протяжённость держат псевдоэлементы контейнера: `spacerStyle` отдаёт\n * их высоты переменными, а правило живёт в `<style>` компонента. Так\n * отрисованные строки остаются прямыми детьми контейнера, и роль вроде\n * `tree` или `listbox` не теряет обязательных потомков.\n \n ```vue\n * const container = useTemplateRef('scroller')\n * const { range, spacerStyle, measure } = useVirtualList({\n * container,\n * count: () => rows.value.length,\n * itemSize: 28,\n * viewportSize: () => props.maxHeight,\n * })\n \n <div\n * ref=\"scroller\"\n * role=\"tree\"\n * data-gr-virtual\n * :style=\"{ overflow: 'auto', maxHeight: '280px', ...spacerStyle }\"\n * >\n * <Row v-for=\"i in window\" :key=\"…\" :ref=\"el => measure(i, el)\" />\n * </div>\n \n <style scoped>\n * [data-gr-virtual]::before,\n * [data-gr-virtual]::after { content: ''; display: block; flex: none; }\n * [data-gr-virtual]::before { height: var(--gr-virtual-before, 0px); }\n * [data-gr-virtual]::after { height: var(--gr-virtual-after, 0px); }\n * </style>\n * ```\n \n Почему правило повторяется в каждом компоненте, а не лежит в одном файле:\n * единственный глобальный стиль пакета (`styles/base.css`) потребитель вправе\n * не подключать, и уехавшее туда правило молча ломало бы прокрутку. Сверяет\n * копии гейт `src/__tests__/virtualSpacer.test.ts`.\n /\n\n/* Куда поставить элемент относительно вьюпорта при прокрутке к нему. /\nexport type GrVirtualAlign = 'auto' \| 'start' \| 'center' \| 'end'\n\nexport interface UseVirtualListOptions {\n /* Скроллящийся контейнер. До монтирования — `null`. /\n container: Ref<HTMLElement \| null>\n /* Сколько элементов в списке. /\n count: () => number\n /\n Оценка высоты элемента. Фактическая берётся из замера, как только элемент\n * отрисован, — строки пакета заданы через `min-height`, и точного числа тут\n * знать неоткуда.\n /\n itemSize: number \| ((index: number) => number)\n /\n Высота вьюпорта до первого замера контейнера. Нужна, чтобы *первый рендер\n был детерминированным*: на сервере контейнера нет вовсе, а на клиенте он\n ещё не измерен. Без неё сервер и клиент нарисовали бы разные окна и\n * гидрация разъехалась бы; с ней оба считают окно от одного числа.\n /\n viewportSize?: () => number \| undefined\n /\n Идентити-токен данных списка — обычно сам массив. Смена идентичности\n * сбрасывает все замеры (`invalidate()`): они привязаны к индексам, и после\n * сортировки или замены массива хранили бы высоты чужих строк.\n \n Правило потребителя: *мутация массива на месте сохраняет замеры, замена\n массива сбрасывает*. Append в тот же реактивный массив (инфинити-скролл)\n идентичность не меняет — префикс замеров остаётся валидным.\n /\n source?: () => unknown\n /\n Зазор между элементами в пикселях (`gap` у flex/grid-контейнера).\n \n Замер элемента его не видит — `getBoundingClientRect` меряет коробку, а не\n * шаг раскладки. Без этого числа список считался бы короче, чем он есть,\n * и окно уползало бы тем сильнее, чем дальше прокрутка.\n /\n gap?: number\n /* Сколько элементов рисовать за пределами вьюпорта. По умолчанию `4`. /\n overscan?: number\n}\n\nexport interface UseVirtualListReturn {\n /* Полуинтервал индексов к отрисовке: `[start, end)`. /\n range: ComputedRef<{ start: number, end: number }>\n /* Полная высота содержимого: распорка, которая держит скроллбар. /\n totalSize: ComputedRef<number>\n /* Отступ сверху: высота срезанного до окна. /\n offset: ComputedRef<number>\n /* Отступ снизу: высота срезанного после окна. /\n offsetEnd: ComputedRef<number>\n /\n Стиль контейнера: высоты распорок и выключенный scroll anchoring.\n \n Имена переменных приезжают готовыми, поэтому написать их руками — и\n * разойтись с правилом в `<style>` — нельзя. Опечатка в имени давала бы\n * список без прокрутки, и увидеть это можно было бы только глазами.\n /\n spacerStyle: ComputedRef<Record<string, string>>\n /* Регистрация отрисованного элемента: замер и подписка на изменение высоты. /\n measure: (index: number, el: Element \| null) => void\n /* Прокрутка к элементу. Без выравнивания — минимальным движением. /\n scrollToIndex: (index: number, align?: GrVirtualAlign) => void\n /\n Сбрасывает замеры с индекса `from` (по умолчанию — все) к оценкам.\n * Видимые строки перемеряются первым же рендером; для смены данных обычно\n * достаточно опции `source` — ручной вызов нужен, когда высоты строк\n * изменились без замены массива (смена плотности, ресайз колонок).\n /\n invalidate: (from?: number) => void\n}\n\nconst DEFAULT_OVERSCAN = 4\n\n/* Порог, ниже которого разницу замеров считаем шумом округления. /\nconst SIZE_EPSILON = 0.5\n\nfunction readSize(el: Element): number {\n const box = el.getBoundingClientRect().height\n if (box > 0)\n return box\n\n // jsdom не считает layout: `getBoundingClientRect` там всегда нулевой, а\n // `offsetHeight` тест может задать сам.\n return (el as HTMLElement).offsetHeight ?? 0\n}\n\nexport function useVirtualList(options: UseVirtualListOptions): UseVirtualListReturn {\n const overscan = Math.max(0, Math.trunc(options.overscan ?? DEFAULT_OVERSCAN))\n const gap = Math.max(0, options.gap ?? 0)\n const estimateOf = typeof options.itemSize === 'function'\n ? options.itemSize\n : () => options.itemSize as number\n\n const scrollTop = ref(0)\n const measuredViewport = ref(0)\n\n const measured = new Map<number, number>()\n const observedIndex = new WeakMap<Element, number>()\n\n // `ResizeObserver` нет ни на сервере, ни в jsdom. Без него композабл работает\n // на оценках и явных замерах из `measure()` — это рабочий режим, а не отказ.\n const hasResizeObserver = typeof ResizeObserver !== 'undefined'\n const sizeObserver = hasResizeObserver\n ? new ResizeObserver((entries) => {\n for (const entry of entries) {\n const index = observedIndex.get(entry.target)\n if (index !== undefined)\n applySize(index, readSize(entry.target))\n }\n })\n : null\n const viewportObserver = hasResizeObserver ? new ResizeObserver(() => syncViewport()) : null\n let attachedTo: HTMLElement \| null = null\n let offsets: number[] = [0]\n /* До какого индекса префикс-суммы актуальны. /\n let builtTo = 0\n\n /* Шаг раскладки: коробка элемента плюс зазор до следующего. /\n function sizeAt(index: number): number {\n return (measured.get(index) ?? estimateOf(index)) + gap\n }\n\n /\n Достраивает префикс-суммы до нужного индекса.\n \n Замер инвалидирует хвост от своего индекса, а не весь массив: иначе каждая\n * отрисованная строка стоила бы полного пересчёта по всему списку.\n /\n function buildTo(index: number): void {\n const limit = Math.min(index, options.count())\n while (builtTo < limit) {\n offsets[builtTo + 1] = offsets[builtTo] + sizeAt(builtTo)\n builtTo += 1\n }\n }\n\n function offsetAt(index: number): number {\n buildTo(index)\n return offsets[Math.min(Math.max(index, 0), builtTo)] ?? 0\n }\n\n function invalidateFrom(index: number): void {\n if (index < builtTo)\n builtTo = Math.max(0, index)\n }\n\n /* Последний индекс, чьё начало не ниже `px`. /\n function indexAt(px: number): number {\n const count = options.count()\n if (count === 0)\n return 0\n\n buildTo(count)\n\n let low = 0\n let high = builtTo\n while (low < high) {\n const mid = (low + high + 1) >> 1\n if ((offsets[mid] ?? 0) <= px)\n low = mid\n else high = mid - 1\n }\n\n return Math.min(low, count - 1)\n }\n\n function viewportSize(): number {\n return measuredViewport.value \|\| options.viewportSize?.() \|\| 0\n }\n\n /\n Геометрия окна одним снимком.\n \n Считается явно, а не `computed`'ом поверх смещений: массив префикс-сумм\n * мутируется на месте (иначе каждый замер пересоздавал бы десять тысяч чисел),\n * и вывести из него реактивную зависимость нечем — трекер увидел бы только те\n * индексы, которые пересчитывались в последний проход.\n */\n const geometry = ref({ start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 })\n\n function recompute(): void {\n const count = options.count()\n if (count === 0) {\n geometry.value = { start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 }\n return\n }\n\n const totalSize = offsetAt(count)\n const height = viewportSize()\n\n // Высота неизвестна (контейнера нет и оценки не дали) — рисуем всё: меньше\n // «списка целиком» отрисовать нечего без риска, что до замера так и не\n // дойдёт ни одна строка.\n if (height <= 0) {\n geometry.value = { start: 0, end: count, offset: 0, offsetEnd: 0, total: totalSize }\n return\n }\n\n const start = Math.max(0, indexAt(scrollTop.value) - overscan)\n const end = Math.min(count, indexAt(scrollTop.value + height) + 1 + overscan)\n\n geometry.value = {\n start,\n end,\n offset: offsetAt(start),\n offsetEnd: Math.max(0, totalSize - offsetAt(end)),\n total: totalSize,\n }\n }\n\n const range = computed(() => ({ start: geometry.value.start, end: geometry.value.end }))\n const total = computed(() => geometry.value.total)\n const offset = computed(() => geometry.value.offset)\n const offsetEnd = computed(() => geometry.value.offsetEnd)\n\n const spacerStyle = computed(() => ({\n // Браузерный scroll anchoring обязан быть выключен. Он удерживает видимый\n // узел на месте, подправляя `scrollTop`, когда меняется высота содержимого\n // выше него, — а окно меняет её на каждом кадре прокрутки. Дальше пересчёт\n // окна и якорь начинают двигать список навстречу друг другу, и прокрутка\n // уезжает тем сильнее, чем дальше оценка строки от фактической высоты.\n 'overflow-anchor': 'none',\n '--gr-virtual-before': `${geometry.value.offset}px`,\n '--gr-virtual-after': `${geometry.value.offsetEnd}px`,\n }))\n\n function syncScrollTop(): void {\n const el = options.container.value\n if (!el)\n return\n\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function syncViewport(): void {\n const el = options.container.value\n if (!el)\n return\n\n measuredViewport.value = el.clientHeight\n recompute()\n }\n\n function measure(index: number, el: Element \| null): void {\n if (!el)\n return\n\n observedIndex.set(el, index)\n sizeObserver?.observe(el)\n\n applySize(index, readSize(el))\n }\n\n function applySize(index: number, size: number): void {\n if (size <= 0)\n return\n\n const previous = measured.get(index)\n if (previous !== undefined && Math.abs(previous - size) < SIZE_EPSILON)\n return\n\n // Считаем смещение ДО правки: строка ниже вьюпорта позицию не двигает, а\n // строка выше — двигает всё содержимое под курсором.\n const start = offsetAt(index)\n const delta = size - (previous ?? estimateOf(index))\n\n measured.set(index, size)\n invalidateFrom(index)\n\n const el = options.container.value\n // Компенсация: без неё уточнение высоты уже прокрученных строк выглядит как\n // рывок списка вверх или вниз ровно в момент замера.\n if (delta !== 0 && start < scrollTop.value && el) {\n el.scrollTop += delta\n scrollTop.value = el.scrollTop\n }\n\n recompute()\n }\n\n function scrollToIndex(index: number, align: GrVirtualAlign = 'auto'): void {\n const el = options.container.value\n const count = options.count()\n if (!el \|\| count === 0)\n return\n\n const clamped = Math.min(Math.max(index, 0), count - 1)\n const start = offsetAt(clamped)\n const size = sizeAt(clamped)\n const height = el.clientHeight \|\| viewportSize()\n const end = start + size\n\n let next: number\n switch (align) {\n case 'start':\n next = start\n break\n case 'end':\n next = end - height\n break\n case 'center':\n next = start + size / 2 - height / 2\n break\n case 'auto':\n if (start < el.scrollTop)\n next = start\n else if (end > el.scrollTop + height)\n next = end - height\n else return\n break\n }\n\n el.scrollTop = Math.max(0, Math.min(next, offsetAt(count) - height))\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function detach(): void {\n if (!attachedTo)\n return\n attachedTo.removeEventListener('scroll', syncScrollTop)\n viewportObserver?.unobserve(attachedTo)\n attachedTo = null\n }\n\n // Первый снимок до всякого монтирования: на сервере и на первом клиентском\n // рендере контейнера ещё нет, а окно уже должно быть посчитано — и одинаково.\n recompute()\n\n watch(options.container, (el) => {\n detach()\n if (!el)\n return\n\n attachedTo = el\n el.addEventListener('scroll', syncScrollTop, { passive: true })\n viewportObserver?.observe(el)\n syncViewport()\n syncScrollTop()\n }, { immediate: true })\n\n // Длина списка изменилась. Сокращение дополнительно чистит хвост смещений и\n // замеров: он относится к строкам, которых больше нет.\n watch(() => options.count(), (count) => {\n if (count < builtTo)\n truncate(count)\n recompute()\n })\n\n function invalidate(from = 0): void {\n for (const index of [...measured.keys()]) {\n if (index >= from)\n measured.delete(index)\n }\n invalidateFrom(from)\n recompute()\n }\n\n if (options.source) {\n // Идентичность данных сменилась — замеры принадлежат прошлому набору.\n watch(options.source, () => invalidate())\n }\n\n function truncate(count: number): void {\n builtTo = count\n offsets = offsets.slice(0, count + 1)\n for (const index of [...measured.keys()]) {\n if (index >= count)\n measured.delete(index)\n }\n }\n\n onScopeDispose(() => {\n detach()\n sizeObserver?.disconnect()\n viewportObserver?.disconnect()\n })\n\n return { range, totalSize: total, offset, offsetEnd, spacerStyle, measure, scrollToIndex, invalidate }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useVirtualList.js","names":[],"sources":["../../src/composables/useVirtualList.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue'\nimport { computed, getCurrentInstance, onScopeDispose, ref, watch } from 'vue'\n\nimport { registerGrVirtualList } from '../internal/devHook'\n\n/*\n Виртуализация длинного списка: в DOM живёт только окно вокруг вьюпорта.\n \n Композабл считает геометрию и отдаёт три числа — какой срез рисовать\n * (`range`), какой высоты держать распорку (`totalSize`) и на сколько сдвинуть\n * отрисованное (`offset`). Разметку строит потребитель: примитив ничего не\n * рендерит и ничего не знает про роли и клавиатуру своего списка.\n \n Скролл-протяжённость держат псевдоэлементы контейнера: `spacerStyle` отдаёт\n * их высоты переменными, а правило живёт в `<style>` компонента. Так\n * отрисованные строки остаются прямыми детьми контейнера, и роль вроде\n * `tree` или `listbox` не теряет обязательных потомков.\n \n ```vue\n * const container = useTemplateRef('scroller')\n * const { range, spacerStyle, measure } = useVirtualList({\n * container,\n * count: () => rows.value.length,\n * itemSize: 28,\n * viewportSize: () => props.maxHeight,\n * })\n \n <div\n * ref=\"scroller\"\n * role=\"tree\"\n * data-gr-virtual\n * :style=\"{ overflow: 'auto', maxHeight: '280px', ...spacerStyle }\"\n * >\n * <Row v-for=\"i in window\" :key=\"…\" :ref=\"el => measure(i, el)\" />\n * </div>\n \n <style scoped>\n * [data-gr-virtual]::before,\n * [data-gr-virtual]::after { content: ''; display: block; flex: none; }\n * [data-gr-virtual]::before { height: var(--gr-virtual-before, 0px); }\n * [data-gr-virtual]::after { height: var(--gr-virtual-after, 0px); }\n * </style>\n * ```\n \n Почему правило повторяется в каждом компоненте, а не лежит в одном файле:\n * единственный глобальный стиль пакета (`styles/base.css`) потребитель вправе\n * не подключать, и уехавшее туда правило молча ломало бы прокрутку. Сверяет\n * копии гейт `src/__tests__/virtualSpacer.test.ts`.\n /\n\n/* Куда поставить элемент относительно вьюпорта при прокрутке к нему. /\nexport type GrVirtualAlign = 'auto' \| 'start' \| 'center' \| 'end'\n\nexport interface UseVirtualListOptions {\n /* Скроллящийся контейнер. До монтирования — `null`. /\n container: Ref<HTMLElement \| null>\n /* Сколько элементов в списке. /\n count: () => number\n /\n Оценка высоты элемента. Фактическая берётся из замера, как только элемент\n * отрисован, — строки пакета заданы через `min-height`, и точного числа тут\n * знать неоткуда.\n /\n itemSize: number \| ((index: number) => number)\n /\n Высота вьюпорта до первого замера контейнера. Нужна, чтобы *первый рендер\n был детерминированным*: на сервере контейнера нет вовсе, а на клиенте он\n ещё не измерен. Без неё сервер и клиент нарисовали бы разные окна и\n * гидрация разъехалась бы; с ней оба считают окно от одного числа.\n /\n viewportSize?: () => number \| undefined\n /\n Идентити-токен данных списка — обычно сам массив. Смена идентичности\n * сбрасывает все замеры (`invalidate()`): они привязаны к индексам, и после\n * сортировки или замены массива хранили бы высоты чужих строк.\n \n Правило потребителя: *мутация массива на месте сохраняет замеры, замена\n массива сбрасывает*. Append в тот же реактивный массив (инфинити-скролл)\n идентичность не меняет — префикс замеров остаётся валидным.\n /\n source?: () => unknown\n /\n Зазор между элементами в пикселях (`gap` у flex/grid-контейнера).\n \n Замер элемента его не видит — `getBoundingClientRect` меряет коробку, а не\n * шаг раскладки. Без этого числа список считался бы короче, чем он есть,\n * и окно уползало бы тем сильнее, чем дальше прокрутка.\n /\n gap?: number\n /* Сколько элементов рисовать за пределами вьюпорта. По умолчанию `4`. /\n overscan?: number\n}\n\nexport interface UseVirtualListReturn {\n /* Полуинтервал индексов к отрисовке: `[start, end)`. /\n range: ComputedRef<{ start: number, end: number }>\n /* Полная высота содержимого: распорка, которая держит скроллбар. /\n totalSize: ComputedRef<number>\n /* Отступ сверху: высота срезанного до окна. /\n offset: ComputedRef<number>\n /* Отступ снизу: высота срезанного после окна. /\n offsetEnd: ComputedRef<number>\n /\n Стиль контейнера: высоты распорок и выключенный scroll anchoring.\n \n Имена переменных приезжают готовыми, поэтому написать их руками — и\n * разойтись с правилом в `<style>` — нельзя. Опечатка в имени давала бы\n * список без прокрутки, и увидеть это можно было бы только глазами.\n /\n spacerStyle: ComputedRef<Record<string, string>>\n /* Регистрация отрисованного элемента: замер и подписка на изменение высоты. /\n measure: (index: number, el: Element \| null) => void\n /* Прокрутка к элементу. Без выравнивания — минимальным движением. /\n scrollToIndex: (index: number, align?: GrVirtualAlign) => void\n /\n Сбрасывает замеры с индекса `from` (по умолчанию — все) к оценкам.\n * Видимые строки перемеряются первым же рендером; для смены данных обычно\n * достаточно опции `source` — ручной вызов нужен, когда высоты строк\n * изменились без замены массива (смена плотности, ресайз колонок).\n /\n invalidate: (from?: number) => void\n}\n\nconst DEFAULT_OVERSCAN = 4\n\n/* Порог, ниже которого разницу замеров считаем шумом округления. /\nconst SIZE_EPSILON = 0.5\n\nfunction readSize(el: Element): number {\n const box = el.getBoundingClientRect().height\n if (box > 0)\n return box\n\n // jsdom не считает layout: `getBoundingClientRect` там всегда нулевой, а\n // `offsetHeight` тест может задать сам.\n return (el as HTMLElement).offsetHeight ?? 0\n}\n\nexport function useVirtualList(options: UseVirtualListOptions): UseVirtualListReturn {\n const overscan = Math.max(0, Math.trunc(options.overscan ?? DEFAULT_OVERSCAN))\n const gap = Math.max(0, options.gap ?? 0)\n const estimateOf = typeof options.itemSize === 'function'\n ? options.itemSize\n : () => options.itemSize as number\n\n const scrollTop = ref(0)\n const measuredViewport = ref(0)\n\n const measured = new Map<number, number>()\n const observedIndex = new WeakMap<Element, number>()\n\n // `ResizeObserver` нет ни на сервере, ни в jsdom. Без него композабл работает\n // на оценках и явных замерах из `measure()` — это рабочий режим, а не отказ.\n const hasResizeObserver = typeof ResizeObserver !== 'undefined'\n const sizeObserver = hasResizeObserver\n ? new ResizeObserver((entries) => {\n for (const entry of entries) {\n const index = observedIndex.get(entry.target)\n if (index !== undefined)\n applySize(index, readSize(entry.target))\n }\n })\n : null\n const viewportObserver = hasResizeObserver ? new ResizeObserver(() => syncViewport()) : null\n let attachedTo: HTMLElement \| null = null\n let offsets: number[] = [0]\n /* До какого индекса префикс-суммы актуальны. /\n let builtTo = 0\n\n /* Шаг раскладки: коробка элемента плюс зазор до следующего. /\n function sizeAt(index: number): number {\n return (measured.get(index) ?? estimateOf(index)) + gap\n }\n\n /\n Достраивает префикс-суммы до нужного индекса.\n \n Замер инвалидирует хвост от своего индекса, а не весь массив: иначе каждая\n * отрисованная строка стоила бы полного пересчёта по всему списку.\n /\n function buildTo(index: number): void {\n const limit = Math.min(index, options.count())\n while (builtTo < limit) {\n offsets[builtTo + 1] = offsets[builtTo] + sizeAt(builtTo)\n builtTo += 1\n }\n }\n\n function offsetAt(index: number): number {\n buildTo(index)\n return offsets[Math.min(Math.max(index, 0), builtTo)] ?? 0\n }\n\n function invalidateFrom(index: number): void {\n if (index < builtTo)\n builtTo = Math.max(0, index)\n }\n\n /* Последний индекс, чьё начало не ниже `px`. /\n function indexAt(px: number): number {\n const count = options.count()\n if (count === 0)\n return 0\n\n buildTo(count)\n\n let low = 0\n let high = builtTo\n while (low < high) {\n const mid = (low + high + 1) >> 1\n if ((offsets[mid] ?? 0) <= px)\n low = mid\n else high = mid - 1\n }\n\n return Math.min(low, count - 1)\n }\n\n function viewportSize(): number {\n return measuredViewport.value \|\| options.viewportSize?.() \|\| 0\n }\n\n /\n Геометрия окна одним снимком.\n \n Считается явно, а не `computed`'ом поверх смещений: массив префикс-сумм\n * мутируется на месте (иначе каждый замер пересоздавал бы десять тысяч чисел),\n * и вывести из него реактивную зависимость нечем — трекер увидел бы только те\n * индексы, которые пересчитывались в последний проход.\n */\n const geometry = ref({ start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 })\n\n function recompute(): void {\n const count = options.count()\n if (count === 0) {\n geometry.value = { start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 }\n return\n }\n\n const totalSize = offsetAt(count)\n const height = viewportSize()\n\n // Высота неизвестна (контейнера нет и оценки не дали) — рисуем всё: меньше\n // «списка целиком» отрисовать нечего без риска, что до замера так и не\n // дойдёт ни одна строка.\n if (height <= 0) {\n geometry.value = { start: 0, end: count, offset: 0, offsetEnd: 0, total: totalSize }\n return\n }\n\n const start = Math.max(0, indexAt(scrollTop.value) - overscan)\n const end = Math.min(count, indexAt(scrollTop.value + height) + 1 + overscan)\n\n geometry.value = {\n start,\n end,\n offset: offsetAt(start),\n offsetEnd: Math.max(0, totalSize - offsetAt(end)),\n total: totalSize,\n }\n }\n\n const range = computed(() => ({ start: geometry.value.start, end: geometry.value.end }))\n const total = computed(() => geometry.value.total)\n const offset = computed(() => geometry.value.offset)\n const offsetEnd = computed(() => geometry.value.offsetEnd)\n\n const spacerStyle = computed(() => ({\n // Браузерный scroll anchoring обязан быть выключен. Он удерживает видимый\n // узел на месте, подправляя `scrollTop`, когда меняется высота содержимого\n // выше него, — а окно меняет её на каждом кадре прокрутки. Дальше пересчёт\n // окна и якорь начинают двигать список навстречу друг другу, и прокрутка\n // уезжает тем сильнее, чем дальше оценка строки от фактической высоты.\n 'overflow-anchor': 'none',\n '--gr-virtual-before': `${geometry.value.offset}px`,\n '--gr-virtual-after': `${geometry.value.offsetEnd}px`,\n }))\n\n function syncScrollTop(): void {\n const el = options.container.value\n if (!el)\n return\n\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function syncViewport(): void {\n const el = options.container.value\n if (!el)\n return\n\n measuredViewport.value = el.clientHeight\n recompute()\n }\n\n function measure(index: number, el: Element \| null): void {\n if (!el)\n return\n\n observedIndex.set(el, index)\n sizeObserver?.observe(el)\n\n applySize(index, readSize(el))\n }\n\n function applySize(index: number, size: number): void {\n if (size <= 0)\n return\n\n const previous = measured.get(index)\n if (previous !== undefined && Math.abs(previous - size) < SIZE_EPSILON)\n return\n\n // Считаем смещение ДО правки: строка ниже вьюпорта позицию не двигает, а\n // строка выше — двигает всё содержимое под курсором.\n const start = offsetAt(index)\n const delta = size - (previous ?? estimateOf(index))\n\n measured.set(index, size)\n invalidateFrom(index)\n\n const el = options.container.value\n // Компенсация: без неё уточнение высоты уже прокрученных строк выглядит как\n // рывок списка вверх или вниз ровно в момент замера.\n if (delta !== 0 && start < scrollTop.value && el) {\n el.scrollTop += delta\n scrollTop.value = el.scrollTop\n }\n\n recompute()\n }\n\n function scrollToIndex(index: number, align: GrVirtualAlign = 'auto'): void {\n const el = options.container.value\n const count = options.count()\n if (!el \|\| count === 0)\n return\n\n const clamped = Math.min(Math.max(index, 0), count - 1)\n const start = offsetAt(clamped)\n const size = sizeAt(clamped)\n const height = el.clientHeight \|\| viewportSize()\n const end = start + size\n\n let next: number\n switch (align) {\n case 'start':\n next = start\n break\n case 'end':\n next = end - height\n break\n case 'center':\n next = start + size / 2 - height / 2\n break\n case 'auto':\n if (start < el.scrollTop)\n next = start\n else if (end > el.scrollTop + height)\n next = end - height\n else return\n break\n }\n\n el.scrollTop = Math.max(0, Math.min(next, offsetAt(count) - height))\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function detach(): void {\n if (!attachedTo)\n return\n attachedTo.removeEventListener('scroll', syncScrollTop)\n viewportObserver?.unobserve(attachedTo)\n attachedTo = null\n }\n\n // Первый снимок до всякого монтирования: на сервере и на первом клиентском\n // рендере контейнера ещё нет, а окно уже должно быть посчитано — и одинаково.\n recompute()\n\n watch(options.container, (el) => {\n detach()\n if (!el)\n return\n\n attachedTo = el\n el.addEventListener('scroll', syncScrollTop, { passive: true })\n viewportObserver?.observe(el)\n syncViewport()\n syncScrollTop()\n }, { immediate: true })\n\n // Длина списка изменилась. Сокращение дополнительно чистит хвост смещений и\n // замеров: он относится к строкам, которых больше нет.\n watch(() => options.count(), (count) => {\n if (count < builtTo)\n truncate(count)\n recompute()\n })\n\n function invalidate(from = 0): void {\n for (const index of [...measured.keys()]) {\n if (index >= from)\n measured.delete(index)\n }\n invalidateFrom(from)\n recompute()\n }\n\n if (options.source) {\n // Идентичность данных сменилась — замеры принадлежат прошлому набору.\n watch(options.source, () => invalidate())\n }\n\n function truncate(count: number): void {\n builtTo = count\n offsets = offsets.slice(0, count + 1)\n for (const index of [...measured.keys()]) {\n if (index >= count)\n measured.delete(index)\n }\n }\n\n // Наблюдателю окно отдаётся реестром, а не событием: оно меняется на каждом\n // кадре прокрутки, и лента событий тут была бы бессмысленным потоком.\n const unregisterFromDevtools = __GR_DEV__\n ? (() => {\n const instance = getCurrentInstance()\n const owner = (instance?.type as { __name?: string, name?: string } \| undefined)?.__name ?? null\n\n return registerGrVirtualList(() => {\n const sizes = [...measured.values()]\n const window = range.value\n\n return {\n owner,\n uid: instance?.uid ?? null,\n total: options.count(),\n rendered: Math.max(0, window.end - window.start),\n range: { start: window.start, end: window.end },\n estimated: estimateOf(window.start),\n measured: sizes.length > 0 ? sizes.reduce((sum, size) => sum + size, 0) / sizes.length : null,\n }\n })\n })()\n : null\n\n onScopeDispose(() => {\n detach()\n sizeObserver?.disconnect()\n viewportObserver?.disconnect()\n unregisterFromDevtools?.()\n })\n\n return { range, totalSize: total, offset, offsetEnd, spacerStyle, measure, scrollToIndex, invalidate }\n}\n"],"mappings":"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"}

package/dist/directives/loading.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { t as ensurePortalRoot } from "../chunks/portalRoot-CVhCgdG6.js";
 import { n as markInert, t as inertableOutside } from "../chunks/inert-DIHCCn_1.js";
-import { t as GrLoading_default } from "../components/GrLoading/chunks/GrLoading-CMD3Ri9P.js";
+import { t as GrLoading_default } from "../components/GrLoading/chunks/GrLoading-BDrlrup_.js";
 import { createVNode, render } from "vue";
 //#region src/directives/loading.ts
 function isHTMLElement(value) {

package/dist/granular-provider-node.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-Bp_BCBnr.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-DP2gk0oa.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };

package/dist/granular-provider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-Bp_BCBnr.js";
+import { a as granularityDefaultThemes, i as granularityComponentConfigs, n as GRANULARITY_PROVIDER_ID, o as granularityThemeNames, r as createGranularityProvider, t as granularityProvider } from "./chunks/granular-provider-DP2gk0oa.js";
 export { GRANULARITY_PROVIDER_ID, createGranularityProvider, granularityProvider as default, granularityProvider, granularityComponentConfigs, granularityDefaultThemes, granularityThemeNames };