@feugene/granularity 0.18.0 → 0.19.0

package/dist/testing.js

@@ -0,0 +1,199 @@
+import { n as GR_CONFIG_KEY } from "./chunks/context-BSYR7RZs.js";
+import { t as GRANULARITY_I18N_KEY } from "./chunks/adapter-CAOxmn2G.js";
+import { n as resetPortalRoot } from "./chunks/portalRoot-CVhCgdG6.js";
+import { resetAnnouncer } from "./composables/useAnnouncer.js";
+import { useToast } from "./composables/useToast.js";
+import { computed, ref } from "vue";
+//#region src/testing/pointer.ts
+/**
+* Указательные жесты в тестах.
+*
+* Две вещи, которые ломают наивную запись жеста, и обе неочевидны:
+*
+* 1. **`pointerdown` идёт в элемент, а `pointermove`/`pointerup`/`pointercancel` — в `window`.**
+*    Так слушает `useDragGesture` (и всё, что на нём стоит: слайдер, сплиттер,
+*    перестановка, смахивание тоста): нажатие приходит от разметки, а движение
+*    ловится глобально, иначе жест обрывался бы на выходе курсора за элемент.
+*    Тест, отправивший движение в тот же элемент, ничего не проверяет — и молча.
+* 2. **`PointerEvent` в jsdom нет**, а `wrapper.trigger('pointerdown', { clientY })`
+*    падает на попытке записать `clientY`. Поэтому события собираются
+*    `MouseEvent`-ом и отправляются через `dispatchEvent`.
+*
+* Плюс `button: 0` по умолчанию: жест игнорирует неосновную кнопку, и без этого
+* «перетаскивание» в тесте не начинается вовсе.
+*/
+/** Событие указателя: `MouseEvent`, потому что `PointerEvent` в jsdom не реализован. */
+function pointer(type, init = {}) {
+	return new MouseEvent(type, {
+		bubbles: true,
+		...init
+	});
+}
+/** Нажатие: единственное событие жеста, которое адресуется элементу. */
+function press(target, init = {}) {
+	target.dispatchEvent(pointer("pointerdown", {
+		button: 0,
+		...init
+	}));
+}
+function move(init = {}) {
+	window.dispatchEvent(pointer("pointermove", init));
+}
+function release(init = {}) {
+	window.dispatchEvent(pointer("pointerup", init));
+}
+/**
+* Обрыв жеста: система забрала указатель (системный жест, звонок, потеря окна).
+* Отдельная ветка поведения у всех потребителей — смахивание возвращает тост,
+* перестановка откатывает порядок, — поэтому проверяется отдельно от `release`.
+*/
+function cancelPointer(init = {}) {
+	window.dispatchEvent(pointer("pointercancel", init));
+}
+/** Жест целиком: нажали на элементе, провели, отпустили. */
+function drag(target, from, to) {
+	press(target, from);
+	move(to);
+	release(to);
+}
+//#endregion
+//#region src/testing/geometry.ts
+/** Прямоугольник элемента. Незаданные стороны выводятся из заданных. */
+function mockRect(target, rect) {
+	const left = rect.left ?? rect.x ?? 0;
+	const top = rect.top ?? rect.y ?? 0;
+	const width = rect.width ?? (rect.right ?? 0) - left;
+	const height = rect.height ?? (rect.bottom ?? 0) - top;
+	const value = {
+		x: left,
+		y: top,
+		left,
+		top,
+		width,
+		height,
+		right: rect.right ?? left + width,
+		bottom: rect.bottom ?? top + height,
+		toJSON: () => ({})
+	};
+	target.getBoundingClientRect = () => value;
+}
+/** Элементы подряд, встык, без зазоров: строки списка, ячейки шапки, деления шкалы. */
+function stackRects(targets, options) {
+	const { size, axis = "vertical", start = 0, cross = 100 } = options;
+	let offset = start;
+	for (const target of targets) {
+		mockRect(target, axis === "vertical" ? {
+			top: offset,
+			height: size,
+			left: 0,
+			width: cross
+		} : {
+			left: offset,
+			width: size,
+			top: 0,
+			height: cross
+		});
+		offset += size;
+	}
+}
+//#endregion
+//#region src/testing/env.ts
+/**
+* Уборка между тестами.
+*
+* `document.body.innerHTML = ''` сам по себе оставляет пакет в разобранном
+* состоянии: корень портала и хост живого региона закэшированы модулями, и
+* после очистки `body` они указывают на узлы **вне документа**. Следующий
+* монтаж телепортирует туда оверлеи, тест ищет их в документе и не находит —
+* без единой ошибки в консоли. Очередь тостов переживает размонтирование по
+* замыслу, поэтому её тоже гасим.
+*/
+function resetGranularityDom() {
+	useToast().clear();
+	resetAnnouncer();
+	resetPortalRoot();
+	if (typeof document !== "undefined") document.body.innerHTML = "";
+}
+/**
+* Ответ `matchMedia` — например «пользователь просил меньше движения».
+*
+* Не для того, чтобы «не падало»: сам пакет зовёт `matchMedia` опционально и без
+* него живёт. Нужно, когда проверяется поведение **под** медиазапросом.
+* Возвращает функцию отката: глобальное состояние обязано уйти вместе с тестом.
+*/
+function stubMatchMedia(options = {}) {
+	const { reducedMotion = false, matches = false } = options;
+	const original = window.matchMedia;
+	window.matchMedia = ((query) => ({
+		media: query,
+		matches: query.includes("prefers-reduced-motion") ? reducedMotion : matches,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false
+	}));
+	return () => {
+		window.matchMedia = original;
+	};
+}
+//#endregion
+//#region src/testing/context.ts
+/** Адаптер перевода для теста: словарь или своя функция. */
+function i18nAdapter(options = {}) {
+	if (typeof options.t !== "function" && !("locale" in options) && !("te" in options)) {
+		const dictionary = options;
+		return {
+			t: (key) => dictionary[key] ?? key,
+			te: (key) => key in dictionary
+		};
+	}
+	const { t, te, locale } = options;
+	return {
+		t: t ?? ((key) => key),
+		te,
+		locale: typeof locale === "string" ? ref(locale) : locale
+	};
+}
+/**
+* Окружение пакета для монтирования — то, что `<GrConfigProvider>` раздаёт
+* через `provide`.
+*
+* Отдаётся объектом, а не компонентом-обёрткой, намеренно: провайдер тянет за
+* собой лишний корневой элемент, а искать компонент внутри чужой разметки в
+* каждом тесте дороже, чем передать `global`. Проверять **сам** провайдер
+* (`data-gr-config-provider`, тема на корне) этим нельзя и не нужно — для этого
+* его и монтируют.
+*
+* ```ts
+* mount(GrSelect, { props, global: granularityGlobal({ size: 'sm' }) })
+* ```
+*/
+function granularityGlobal(options = {}) {
+	const config = {
+		size: computed(() => options.size),
+		componentDefaults: computed(() => options.componentDefaults ?? {}),
+		theme: computed(() => options.theme),
+		portalTarget: computed(() => options.portalTarget)
+	};
+	const provide = { [GR_CONFIG_KEY]: config };
+	if (options.i18n) provide[GRANULARITY_I18N_KEY] = "t" in options.i18n && typeof options.i18n.t === "function" ? options.i18n : i18nAdapter(options.i18n);
+	return { provide };
+}
+//#endregion
+//#region src/testing/announcer.ts
+/**
+* Текст живого региона.
+*
+* Ждать здесь обязательно: `announce` пишет в регион **отложенным** макротаском,
+* и это не деталь реализации, а условие работы. Регион, в котором текст
+* появился в том же кадре, что и сам регион, часть AT не объявляет вовсе;
+* поэтому синхронное чтение сразу после действия покажет пустую строку.
+*/
+async function announced(politeness = "polite") {
+	await new Promise((resolve) => setTimeout(resolve, 2));
+	return document.querySelector(`[data-gr-announcer-region="${politeness}"]`)?.textContent ?? "";
+}
+//#endregion
+export { announced, cancelPointer, drag, granularityGlobal, i18nAdapter, mockRect, move, pointer, press, release, resetGranularityDom, stackRects, stubMatchMedia };

package/dist/testing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.js","names":[],"sources":["../src/testing/pointer.ts","../src/testing/geometry.ts","../src/testing/env.ts","../src/testing/context.ts","../src/testing/announcer.ts"],"sourcesContent":["/**\n * Указательные жесты в тестах.\n *\n * Две вещи, которые ломают наивную запись жеста, и обе неочевидны:\n *\n * 1. **`pointerdown` идёт в элемент, а `pointermove`/`pointerup`/`pointercancel` — в `window`.**\n *    Так слушает `useDragGesture` (и всё, что на нём стоит: слайдер, сплиттер,\n *    перестановка, смахивание тоста): нажатие приходит от разметки, а движение\n *    ловится глобально, иначе жест обрывался бы на выходе курсора за элемент.\n *    Тест, отправивший движение в тот же элемент, ничего не проверяет — и молча.\n * 2. **`PointerEvent` в jsdom нет**, а `wrapper.trigger('pointerdown', { clientY })`\n *    падает на попытке записать `clientY`. Поэтому события собираются\n *    `MouseEvent`-ом и отправляются через `dispatchEvent`.\n *\n * Плюс `button: 0` по умолчанию: жест игнорирует неосновную кнопку, и без этого\n * «перетаскивание» в тесте не начинается вовсе.\n */\n\n/** Событие указателя: `MouseEvent`, потому что `PointerEvent` в jsdom не реализован. */\nexport function pointer(type: string, init: MouseEventInit = {}): MouseEvent {\n  return new MouseEvent(type, { bubbles: true, ...init })\n}\n\n/** Нажатие: единственное событие жеста, которое адресуется элементу. */\nexport function press(target: Element, init: MouseEventInit = {}): void {\n  target.dispatchEvent(pointer('pointerdown', { button: 0, ...init }))\n}\n\nexport function move(init: MouseEventInit = {}): void {\n  window.dispatchEvent(pointer('pointermove', init))\n}\n\nexport function release(init: MouseEventInit = {}): void {\n  window.dispatchEvent(pointer('pointerup', init))\n}\n\n/**\n * Обрыв жеста: система забрала указатель (системный жест, звонок, потеря окна).\n * Отдельная ветка поведения у всех потребителей — смахивание возвращает тост,\n * перестановка откатывает порядок, — поэтому проверяется отдельно от `release`.\n */\nexport function cancelPointer(init: MouseEventInit = {}): void {\n  window.dispatchEvent(pointer('pointercancel', init))\n}\n\n/** Жест целиком: нажали на элементе, провели, отпустили. */\nexport function drag(target: Element, from: MouseEventInit, to: MouseEventInit): void {\n  press(target, from)\n  move(to)\n  release(to)\n}\n","/**\n * Геометрия в jsdom.\n *\n * Раскладки в jsdom нет: `getBoundingClientRect` у любого элемента возвращает\n * нули. Всё, что считает попадание указателя — слайдер, сплиттер, перестановка,\n * ширины колонок таблицы, — на нулевом прямоугольнике проверять не на чем,\n * поэтому геометрия задаётся руками.\n */\n\nexport type MockRect = Partial<Omit<DOMRect, 'toJSON'>>\n\n/** Прямоугольник элемента. Незаданные стороны выводятся из заданных. */\nexport function mockRect(target: Element, rect: MockRect): void {\n  const left = rect.left ?? rect.x ?? 0\n  const top = rect.top ?? rect.y ?? 0\n  const width = rect.width ?? (rect.right ?? 0) - left\n  const height = rect.height ?? (rect.bottom ?? 0) - top\n\n  const value: DOMRect = {\n    x: left,\n    y: top,\n    left,\n    top,\n    width,\n    height,\n    right: rect.right ?? left + width,\n    bottom: rect.bottom ?? top + height,\n    toJSON: () => ({}),\n  }\n\n  target.getBoundingClientRect = () => value\n}\n\nexport interface StackRectsOptions {\n  /** Размер элемента вдоль оси. */\n  size: number\n  /** Ось раскладки. По умолчанию вертикальная — так лежат списки и строки. */\n  axis?: 'vertical' | 'horizontal'\n  /** Смещение первого элемента. */\n  start?: number\n  /** Размер поперёк оси. */\n  cross?: number\n}\n\n/** Элементы подряд, встык, без зазоров: строки списка, ячейки шапки, деления шкалы. */\nexport function stackRects(targets: Iterable<Element>, options: StackRectsOptions): void {\n  const { size, axis = 'vertical', start = 0, cross = 100 } = options\n\n  let offset = start\n\n  for (const target of targets) {\n    mockRect(target, axis === 'vertical'\n      ? { top: offset, height: size, left: 0, width: cross }\n      : { left: offset, width: size, top: 0, height: cross })\n\n    offset += size\n  }\n}\n","import { resetAnnouncer } from '../composables/useAnnouncer'\nimport { resetPortalRoot } from '../composables/internal/portalRoot'\nimport { useToast } from '../composables/useToast'\n\n/**\n * Уборка между тестами.\n *\n * `document.body.innerHTML = ''` сам по себе оставляет пакет в разобранном\n * состоянии: корень портала и хост живого региона закэшированы модулями, и\n * после очистки `body` они указывают на узлы **вне документа**. Следующий\n * монтаж телепортирует туда оверлеи, тест ищет их в документе и не находит —\n * без единой ошибки в консоли. Очередь тостов переживает размонтирование по\n * замыслу, поэтому её тоже гасим.\n */\nexport function resetGranularityDom(): void {\n  useToast().clear()\n  resetAnnouncer()\n  resetPortalRoot()\n\n  if (typeof document !== 'undefined')\n    document.body.innerHTML = ''\n}\n\nexport interface StubMatchMediaOptions {\n  /** Ответ на `(prefers-reduced-motion: reduce)`. */\n  reducedMotion?: boolean\n  /** Ответ на остальные запросы. */\n  matches?: boolean\n}\n\n/**\n * Ответ `matchMedia` — например «пользователь просил меньше движения».\n *\n * Не для того, чтобы «не падало»: сам пакет зовёт `matchMedia` опционально и без\n * него живёт. Нужно, когда проверяется поведение **под** медиазапросом.\n * Возвращает функцию отката: глобальное состояние обязано уйти вместе с тестом.\n */\nexport function stubMatchMedia(options: StubMatchMediaOptions = {}): () => void {\n  const { reducedMotion = false, matches = false } = options\n  const original = window.matchMedia\n\n  window.matchMedia = ((query: string) => ({\n    media: query,\n    matches: query.includes('prefers-reduced-motion') ? reducedMotion : matches,\n    onchange: null,\n    addEventListener: () => {},\n    removeEventListener: () => {},\n    addListener: () => {},\n    removeListener: () => {},\n    dispatchEvent: () => false,\n  }))\n\n  return () => {\n    window.matchMedia = original\n  }\n}\n","import { computed, ref, type Ref } from 'vue'\n\nimport { GR_CONFIG_KEY, type GrComponentDefaults, type GrComponentSize, type GrConfigContext } from '../components/GrConfigProvider/context'\nimport { GRANULARITY_I18N_KEY, type GranularityI18nAdapter, type GranularityI18nParams } from '../i18n/adapter'\n\nexport interface I18nAdapterOptions {\n  /** Перевод по ключу. По умолчанию — сам ключ: видно, что спросили. */\n  t?: (key: string, params?: GranularityI18nParams) => string\n  te?: (key: string) => boolean\n  locale?: string | Ref<string>\n}\n\n/** Адаптер перевода для теста: словарь или своя функция. */\nexport function i18nAdapter(options: I18nAdapterOptions | Record<string, string> = {}): GranularityI18nAdapter {\n  const isDictionary = typeof (options as I18nAdapterOptions).t !== 'function'\n    && !('locale' in options)\n    && !('te' in options)\n\n  if (isDictionary) {\n    const dictionary = options as Record<string, string>\n\n    return {\n      t: key => dictionary[key] ?? key,\n      te: key => key in dictionary,\n    }\n  }\n\n  const { t, te, locale } = options as I18nAdapterOptions\n\n  return {\n    t: t ?? (key => key),\n    te,\n    locale: typeof locale === 'string' ? ref(locale) : locale,\n  }\n}\n\nexport interface GranularityGlobalOptions {\n  size?: GrComponentSize\n  componentDefaults?: GrComponentDefaults\n  theme?: string\n  portalTarget?: string | HTMLElement\n  /** Адаптер перевода: готовый, словарь `{ ключ: перевод }` или опции `i18nAdapter`. */\n  i18n?: GranularityI18nAdapter | I18nAdapterOptions | Record<string, string>\n}\n\n/**\n * Окружение пакета для монтирования — то, что `<GrConfigProvider>` раздаёт\n * через `provide`.\n *\n * Отдаётся объектом, а не компонентом-обёрткой, намеренно: провайдер тянет за\n * собой лишний корневой элемент, а искать компонент внутри чужой разметки в\n * каждом тесте дороже, чем передать `global`. Проверять **сам** провайдер\n * (`data-gr-config-provider`, тема на корне) этим нельзя и не нужно — для этого\n * его и монтируют.\n *\n * ```ts\n * mount(GrSelect, { props, global: granularityGlobal({ size: 'sm' }) })\n * ```\n */\nexport function granularityGlobal(options: GranularityGlobalOptions = {}): { provide: Record<symbol, unknown> } {\n  const config: GrConfigContext = {\n    size: computed(() => options.size),\n    componentDefaults: computed(() => options.componentDefaults ?? {}),\n    theme: computed(() => options.theme),\n    portalTarget: computed(() => options.portalTarget),\n  }\n\n  const provide: Record<symbol, unknown> = { [GR_CONFIG_KEY]: config }\n\n  if (options.i18n)\n    provide[GRANULARITY_I18N_KEY] = 't' in options.i18n && typeof options.i18n.t === 'function'\n      ? options.i18n\n      : i18nAdapter(options.i18n)\n\n  return { provide }\n}\n","import type { GrAnnouncerPoliteness } from '../composables/useAnnouncer'\n\n/**\n * Текст живого региона.\n *\n * Ждать здесь обязательно: `announce` пишет в регион **отложенным** макротаском,\n * и это не деталь реализации, а условие работы. Регион, в котором текст\n * появился в том же кадре, что и сам регион, часть AT не объявляет вовсе;\n * поэтому синхронное чтение сразу после действия покажет пустую строку.\n */\nexport async function announced(politeness: GrAnnouncerPoliteness = 'polite'): Promise<string> {\n  await new Promise(resolve => setTimeout(resolve, 2))\n\n  return document.querySelector(`[data-gr-announcer-region=\"${politeness}\"]`)?.textContent ?? ''\n}\n"],"mappings":"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"}

package/dist/theme-apply.js

@@ -0,0 +1,33 @@
+//#region src/theme/apply.ts
+/**
+* Подключение темы в рантайме — `@feugene/granularity/theme/apply`.
+*
+* Отдельный подпуть от `@feugene/granularity/theme` не по вкусу, а по весу:
+* там справочник токенов (сотня килобайт данных), нужный, чтобы тему
+* **собрать**. Чтобы её **подключить**, не нужно ничего, кроме готовой строки,
+* — и приложению незачем платить за первое, если оно делает второе.
+*
+* Штатный путь всё же другой: собрать тему на сборке и отдать браузеру обычный
+* CSS-файл. Этот модуль — для случаев, когда тема появляется только в браузере:
+* редактор тем, превью, тема из пользовательских настроек.
+*/
+var ATTRIBUTE = "data-gr-theme";
+/** Подключает CSS темы и возвращает функцию, которая его снимает. */
+function applyTheme(css, options = {}) {
+	const { name = "custom", target } = options;
+	if (typeof document === "undefined") return () => {};
+	const host = target ?? document.head;
+	const existing = host.querySelector(`style[${ATTRIBUTE}="${name}"]`);
+	const style = existing ?? document.createElement("style");
+	style.setAttribute(ATTRIBUTE, name);
+	style.textContent = css;
+	if (!existing) host.append(style);
+	return () => style.remove();
+}
+/** Снимает тему, подключённую `applyTheme`. */
+function removeTheme(name = "custom", target) {
+	if (typeof document === "undefined") return;
+	(target ?? document.head).querySelector(`style[${ATTRIBUTE}="${name}"]`)?.remove();
+}
+//#endregion
+export { applyTheme, removeTheme };

package/dist/theme-apply.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-apply.js","names":[],"sources":["../src/theme/apply.ts"],"sourcesContent":["/**\n * Подключение темы в рантайме — `@feugene/granularity/theme/apply`.\n *\n * Отдельный подпуть от `@feugene/granularity/theme` не по вкусу, а по весу:\n * там справочник токенов (сотня килобайт данных), нужный, чтобы тему\n * **собрать**. Чтобы её **подключить**, не нужно ничего, кроме готовой строки,\n * — и приложению незачем платить за первое, если оно делает второе.\n *\n * Штатный путь всё же другой: собрать тему на сборке и отдать браузеру обычный\n * CSS-файл. Этот модуль — для случаев, когда тема появляется только в браузере:\n * редактор тем, превью, тема из пользовательских настроек.\n */\n\nconst ATTRIBUTE = 'data-gr-theme'\n\nexport interface ApplyThemeOptions {\n  /**\n   * Имя, под которым тема живёт в документе. Повторный вызов с тем же именем\n   * заменяет её содержимое, а не добавляет второй `<style>`: иначе редактор\n   * темы за минуту работы оставил бы в `<head>` сотню слоёв, и побеждал бы\n   * последний — то есть результат зависел бы от истории правок.\n   */\n  name?: string\n  /** Куда вставлять. По умолчанию `document.head`. */\n  target?: HTMLElement | null\n}\n\n/** Подключает CSS темы и возвращает функцию, которая его снимает. */\nexport function applyTheme(css: string, options: ApplyThemeOptions = {}): () => void {\n  const { name = 'custom', target } = options\n\n  if (typeof document === 'undefined')\n    return () => {}\n\n  const host = target ?? document.head\n  const existing = host.querySelector<HTMLStyleElement>(`style[${ATTRIBUTE}=\"${name}\"]`)\n  const style = existing ?? document.createElement('style')\n\n  style.setAttribute(ATTRIBUTE, name)\n  style.textContent = css\n\n  if (!existing) host.append(style)\n\n  return () => style.remove()\n}\n\n/** Снимает тему, подключённую `applyTheme`. */\nexport function removeTheme(name = 'custom', target?: HTMLElement | null): void {\n  if (typeof document === 'undefined') return\n\n  const host = target ?? document.head\n  host.querySelector(`style[${ATTRIBUTE}=\"${name}\"]`)?.remove()\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAM,YAAY;;AAelB,SAAgB,WAAW,KAAa,UAA6B,CAAC,GAAe;CACnF,MAAM,EAAE,OAAO,UAAU,WAAW;CAEpC,IAAI,OAAO,aAAa,aACtB,aAAa,CAAC;CAEhB,MAAM,OAAO,UAAU,SAAS;CAChC,MAAM,WAAW,KAAK,cAAgC,SAAS,UAAU,IAAI,KAAK,GAAG;CACrF,MAAM,QAAQ,YAAY,SAAS,cAAc,OAAO;CAExD,MAAM,aAAa,WAAW,IAAI;CAClC,MAAM,cAAc;CAEpB,IAAI,CAAC,UAAU,KAAK,OAAO,KAAK;CAEhC,aAAa,MAAM,OAAO;AAC5B;;AAGA,SAAgB,YAAY,OAAO,UAAU,QAAmC;CAC9E,IAAI,OAAO,aAAa,aAAa;CAGrC,CADa,UAAU,SAAS,KAAA,CAC3B,cAAc,SAAS,UAAU,IAAI,KAAK,GAAG,CAAC,EAAE,OAAO;AAC9D"}