@feugene/granularity 0.40.0 → 0.42.0

package/dist/components/GrDescriptionList/index.js

@@ -1,3 +1,3 @@
 import { n as grDescriptionListSafelist, t as grDescriptionListConfig } from "../../chunks/config-CnYdE3HZ.js";
-import { t as GrDescriptionList_default } from "./chunks/GrDescriptionList-D8ANFpn_.js";
+import { t as GrDescriptionList_default } from "./chunks/GrDescriptionList-Dz2Jj1if.js";
 export { GrDescriptionList_default as GrDescriptionList, GrDescriptionList_default as default, grDescriptionListConfig, grDescriptionListSafelist };

package/dist/components/GrFilePreview/chunks/{GrFilePreview-PabkLgYX.js → GrFilePreview-2kVOg1C7.js}

@@ -1,7 +1,8 @@
 import { i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as GrSkeleton_default } from "../../GrSkeleton/chunks/GrSkeleton-CgfXxPQ2.js";
 import { a as filePreviewInteractiveClass, c as filePreviewMediaLoadingClass, d as filePreviewTileWidths, i as filePreviewIconClass, l as filePreviewRatioClass, o as filePreviewLabelClass, r as filePreviewFallbackClass, s as filePreviewMediaClass, u as filePreviewRootClass } from "../../../chunks/config-BaWANzzB.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, markRaw, normalizeClass, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, markRaw, normalizeClass, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
 //#region ~icons/lucide/file
 var _hoisted_1$6 = {
 	viewBox: "0 0 24 24",
@@ -192,6 +193,8 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 		tileSize: { default: void 0 },
 		ratio: { default: void 0 },
 		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
 		as: { default: void 0 },
 		clickable: {
 			type: Boolean,
@@ -204,6 +207,7 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const { t } = useGranularityTranslations();
 		const resolvedTileSize = useGrComponentProp("GrFilePreview", "tileSize", () => props.tileSize, "md");
 		const resolvedRatio = useGrComponentProp("GrFilePreview", "ratio", () => props.ratio, "1:1");
 		const resolvedLoading = useGrComponentProp("GrFilePreview", "loading", () => props.loading, "lazy");
@@ -241,11 +245,21 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 			return props.clickable ? "button" : "div";
 		});
 		/**
+		* Ссылка, открывающаяся в новой вкладке, получает защиту без спроса — по факту
+		* `_blank`, а не по отдельному пропу: то же правило, что у `GrLink` и
+		* `GrButton`. Без `rel` открытая страница получает `window.opener` и может
+		* переписать вкладку-источник.
+		*/
+		const resolvedRel = computed(() => props.rel ?? (props.target === "_blank" ? "noopener noreferrer" : void 0));
+		/**
 		* Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без
-		* `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —
-		* там он и гасится.
+		* `href` он ведёт в никуда. Строковый тег, кроме `a`, ссылочных атрибутов не
+		* понимает — там они и гасятся.
 		*/
-		const rootHref = computed(() => typeof rootTag.value === "string" && rootTag.value !== "a" ? void 0 : props.href);
+		const isAnchorLike = computed(() => typeof rootTag.value !== "string" || rootTag.value === "a");
+		const rootHref = computed(() => isAnchorLike.value ? props.href : void 0);
+		const rootTarget = computed(() => isAnchorLike.value ? props.target : void 0);
+		const rootRel = computed(() => isAnchorLike.value ? resolvedRel.value : void 0);
 		const rootClass = computed(() => [
 			filePreviewRootClass,
 			filePreviewRatioClass[resolvedRatio.value],
@@ -258,6 +272,23 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 		* декоративна, и придуманное компонентом описание было бы хуже пустого.
 		*/
 		const alt = computed(() => props.name ?? "");
+		/**
+		* Интерактивная плитка без имени не отгружается.
+		*
+		* Имя ей даёт содержимое: `alt` картинки или подпись заглушки — и то и другое
+		* приходит из `name`. Без `name` содержимого нет вовсе: кнопка выходит с пустым
+		* `alt`, ссылка — пустой, и axe справедливо зовёт это `button-name` и
+		* `link-name`. Родовое имя из локали хуже осмысленного, но лучше пустого —
+		* потребителю о промахе говорит гард ниже.
+		*/
+		const resolvedAriaLabel = computed(() => {
+			if (props.ariaLabel) return props.ariaLabel;
+			if (!isInteractive.value || props.name) return void 0;
+			return t("gr.filePreview.label", "File");
+		});
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (isInteractive.value && !props.ariaLabel && !props.name) console.warn("[granularity] GrFilePreview: интерактивная плитка без `name` и без `ariaLabel` остаётся без осмысленного имени — скринридер объявит её родовым словом. Передайте имя файла.");
+		});
 		function onClick(event) {
 			emit("click", event);
 		}
@@ -267,9 +298,11 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 				"data-kind": kind.value,
 				type: rootTag.value === "button" ? "button" : void 0,
 				href: rootHref.value,
+				target: rootTarget.value,
+				rel: rootRel.value,
 				class: normalizeClass(rootClass.value),
 				style: normalizeStyle(rootStyle.value),
-				"aria-label": __props.ariaLabel,
+				"aria-label": resolvedAriaLabel.value,
 				onClick
 			}, {
 				default: withCtx(() => [showSkeleton.value ? (openBlock(), createBlock(GrSkeleton_default, {
@@ -304,6 +337,8 @@ var GrFilePreview_default = /* @__PURE__ */ defineComponent({
 				"data-kind",
 				"type",
 				"href",
+				"target",
+				"rel",
 				"class",
 				"style",
 				"aria-label"

package/dist/components/GrFilePreview/chunks/GrFilePreview-2kVOg1C7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrFilePreview-2kVOg1C7.js","names":[],"sources":["../../../../src/components/GrFilePreview/fileKindOf.ts","../../../../src/components/GrFilePreview/GrFilePreview.vue","../../../../src/components/GrFilePreview/GrFilePreview.vue"],"sourcesContent":["/**\n * Вид файла по MIME-типу.\n *\n * Тип решает **`mime`, а не расширение**: расширение врёт (`.dat` у выгрузки,\n * `.pdf` у переименованного архива), а бэкенд отдаёт настоящий тип — брать надо\n * его. От вида зависит единственное решение компонента: рисовать `<img>` или\n * иконку.\n */\n\nexport type GrFileKind\n  = | 'image'\n    | 'pdf'\n    | 'document'\n    | 'spreadsheet'\n    | 'archive'\n  /** Тип не опознан, пуст или это `application/octet-stream`. */\n    | 'unknown'\n\n/** Точные типы. Порядок не важен — совпадение полное. */\nconst EXACT: Record<string, GrFileKind> = {\n  'application/pdf': 'pdf',\n  'application/x-pdf': 'pdf',\n\n  'application/msword': 'document',\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'document',\n  'application/vnd.oasis.opendocument.text': 'document',\n  'application/rtf': 'document',\n\n  'application/vnd.ms-excel': 'spreadsheet',\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'spreadsheet',\n  'application/vnd.oasis.opendocument.spreadsheet': 'spreadsheet',\n  'text/csv': 'spreadsheet',\n  'text/tab-separated-values': 'spreadsheet',\n\n  'application/zip': 'archive',\n  'application/x-zip-compressed': 'archive',\n  'application/x-rar-compressed': 'archive',\n  'application/vnd.rar': 'archive',\n  'application/x-7z-compressed': 'archive',\n  'application/x-tar': 'archive',\n  'application/gzip': 'archive',\n  'application/x-gzip': 'archive',\n}\n\n/**\n * Приведение к сравнимому виду: тип приходит из БД и бывает с параметрами\n * (`text/plain; charset=utf-8`) и в любом регистре.\n */\nfunction normalize(mime: string): string {\n  return mime.split(';')[0].trim().toLowerCase()\n}\n\nexport function fileKindOf(mime: string | null | undefined): GrFileKind {\n  if (!mime)\n    return 'unknown'\n\n  const type = normalize(mime)\n  if (!type)\n    return 'unknown'\n\n  // Картинка — единственный вид, который компонент рисует, а не подписывает.\n  if (type.startsWith('image/'))\n    return 'image'\n\n  const exact = EXACT[type]\n  if (exact)\n    return exact\n\n  // `text/csv` уже разобран выше: таблица важнее общего правила для текста.\n  if (type.startsWith('text/'))\n    return 'document'\n\n  return 'unknown'\n}\n\n/** Картинку показываем, остальное — подписываем иконкой. */\nexport function isPreviewableKind(kind: GrFileKind): boolean {\n  return kind === 'image'\n}\n","<script setup lang=\"ts\">\nimport { computed, markRaw, ref, watch, watchEffect, type Component } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\n\nimport IconFile from '~icons/lucide/file'\nimport IconFileArchive from '~icons/lucide/file-archive'\nimport IconFileSpreadsheet from '~icons/lucide/file-spreadsheet'\nimport IconFileText from '~icons/lucide/file-text'\nimport IconFileType from '~icons/lucide/file-type'\nimport IconImageOff from '~icons/lucide/image-off'\n\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { fileKindOf, isPreviewableKind, type GrFileKind } from './fileKindOf'\nimport {\n  filePreviewFallbackClass,\n  filePreviewIconClass,\n  filePreviewInteractiveClass,\n  filePreviewLabelClass,\n  filePreviewMediaClass,\n  filePreviewMediaLoadingClass,\n  filePreviewRatioClass,\n  filePreviewRootClass,\n  filePreviewTileWidths,\n  type GrFilePreviewRatio,\n} from './grFilePreviewStyles'\n\nexport type { GrFileKind } from './fileKindOf'\nexport type { GrFilePreviewRatio } from './grFilePreviewStyles'\n\n/**\n * Плитка превью файла с фолбэком по типу.\n *\n * Показывает **сохранённый** файл, а не отправляет новый: отправка — это\n * `GrFormFile` и `GrFileUpload`. Просмотрщик во весь экран открывает\n * потребитель по событию `click`.\n */\nexport interface GrFilePreviewProps {\n  /** Адрес превью. Пусто — сразу заглушка по типу. */\n  src?: string | null\n  /** MIME-тип. Он решает, картинка это или файл. */\n  mime?: string | null\n  /** Имя файла: доступное имя картинки и подпись заглушки. */\n  name?: string | null\n  /**\n   * Ступень канонической шкалы либо произвольная ширина в пикселях. Число —\n   * escape-hatch, как диаметр у GrAvatar: плитка 96px в ленте вложений в\n   * четыре ступени не укладывается.\n   */\n  tileSize?: GrSizeWithPx\n  ratio?: GrFilePreviewRatio\n  /** Ссылка на оригинал — для не-картинок и для перехода мимо просмотрщика. */\n  href?: string\n  /**\n   * Куда открывать ссылку. Объявлен пропом, а не оставлен на fallthrough:\n   * иначе `_blank` уезжал бы на `<a>` мимо компонента, и защитный `rel`\n   * подставить было бы негде.\n   */\n  target?: string\n  /** Своё значение `rel`. Задано — отменяет автоподстановку. */\n  rel?: string\n  /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Плитка кликабельна и эмитит `click` — обычно чтобы открыть просмотрщик. */\n  clickable?: boolean\n  loading?: 'lazy' | 'eager'\n  /**\n   * Доступное имя интерактивной плитки. Не задано — имя приходит из содержимого:\n   * `alt` картинки или подписи заглушки.\n   */\n  ariaLabel?: string\n}\n\nexport interface GrFilePreviewEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrFilePreviewProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  src: undefined,\n  mime: undefined,\n  name: undefined,\n  tileSize: undefined,\n  ratio: undefined,\n  href: undefined,\n  target: undefined,\n  rel: undefined,\n  as: undefined,\n  clickable: false,\n  loading: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrFilePreviewEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedTileSize = useGrComponentProp('GrFilePreview', 'tileSize', () => props.tileSize, 'md')\nconst resolvedRatio = useGrComponentProp('GrFilePreview', 'ratio', () => props.ratio, '1:1')\nconst resolvedLoading = useGrComponentProp('GrFilePreview', 'loading', () => props.loading, 'lazy')\n\nconst kind = computed<GrFileKind>(() => fileKindOf(props.mime))\n\n/**\n * Состояний три, а не два. Сорвавшаяся загрузка деградирует в заглушку: превью\n * может исчезнуть с диска, и «сломанная картинка» здесь не информативнее\n * иконки. Отдельное `loading` нужно ленте вложений: два десятка плиток\n * приезжают вразнобой, и без него сетка стоит дырами непонятной природы —\n * «ещё едет» и «файл без превью» выглядят одинаково.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst imageState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ни ошибку прошлой, ни её готовность.\nwatch(() => props.src, () => {\n  imageState.value = 'loading'\n})\n\nconst showImage = computed(() => (\n  isPreviewableKind(kind.value) && Boolean(props.src) && imageState.value !== 'error'\n))\n\nconst showSkeleton = computed(() => showImage.value && imageState.value === 'loading')\n\n/**\n * Иконка вида. Картинка попадает сюда только сорвавшейся загрузкой — тогда и\n * значок другой: «изображение не открылось», а не «это файл».\n */\nconst iconByKind: Record<GrFileKind, Component> = {\n  image: markRaw(IconImageOff),\n  pdf: markRaw(IconFileText),\n  document: markRaw(IconFileType),\n  spreadsheet: markRaw(IconFileSpreadsheet),\n  archive: markRaw(IconFileArchive),\n  unknown: markRaw(IconFile),\n}\n\nconst fallbackIcon = computed(() => iconByKind[kind.value])\n\nconst isInteractive = computed(() => Boolean(props.as) || Boolean(props.href) || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  if (props.href)\n    return 'a'\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Ссылка, открывающаяся в новой вкладке, получает защиту без спроса — по факту\n * `_blank`, а не по отдельному пропу: то же правило, что у `GrLink` и\n * `GrButton`. Без `rel` открытая страница получает `window.opener` и может\n * переписать вкладку-источник.\n */\nconst resolvedRel = computed(() => props.rel ?? (props.target === '_blank' ? 'noopener noreferrer' : undefined))\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, ссылочных атрибутов не\n * понимает — там они и гасятся.\n */\nconst isAnchorLike = computed(() => typeof rootTag.value !== 'string' || rootTag.value === 'a')\n\nconst rootHref = computed(() => (isAnchorLike.value ? props.href : undefined))\nconst rootTarget = computed(() => (isAnchorLike.value ? props.target : undefined))\nconst rootRel = computed(() => (isAnchorLike.value ? resolvedRel.value : undefined))\n\nconst rootClass = computed(() => [\n  filePreviewRootClass,\n  filePreviewRatioClass[resolvedRatio.value],\n  typeof resolvedTileSize.value === 'number' ? '' : filePreviewTileWidths[resolvedTileSize.value],\n  isInteractive.value ? filePreviewInteractiveClass : '',\n].filter(Boolean).join(' '))\n\nconst rootStyle = computed(() => (\n  typeof resolvedTileSize.value === 'number' ? { width: `${resolvedTileSize.value}px` } : undefined\n))\n\n/**\n * `alt` не выдумывается. Есть имя — оно и есть `alt`; нет — картинка\n * декоративна, и придуманное компонентом описание было бы хуже пустого.\n */\nconst alt = computed(() => props.name ?? '')\n\n/**\n * Интерактивная плитка без имени не отгружается.\n *\n * Имя ей даёт содержимое: `alt` картинки или подпись заглушки — и то и другое\n * приходит из `name`. Без `name` содержимого нет вовсе: кнопка выходит с пустым\n * `alt`, ссылка — пустой, и axe справедливо зовёт это `button-name` и\n * `link-name`. Родовое имя из локали хуже осмысленного, но лучше пустого —\n * потребителю о промахе говорит гард ниже.\n */\nconst resolvedAriaLabel = computed(() => {\n  if (props.ariaLabel)\n    return props.ariaLabel\n\n  if (!isInteractive.value || props.name)\n    return undefined\n\n  return t('gr.filePreview.label', 'File')\n})\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (isInteractive.value && !props.ariaLabel && !props.name) {\n      console.warn(\n        '[granularity] GrFilePreview: интерактивная плитка без `name` и без `ariaLabel` остаётся '\n        + 'без осмысленного имени — скринридер объявит её родовым словом. Передайте имя файла.',\n      )\n    }\n  })\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-file-preview\n    :data-kind=\"kind\"\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootHref\"\n    :target=\"rootTarget\"\n    :rel=\"rootRel\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :aria-label=\"resolvedAriaLabel\"\n    @click=\"onClick\"\n  >\n    <GrSkeleton\n      v-if=\"showSkeleton\"\n      data-gr-file-preview-skeleton\n      width=\"100%\"\n      height=\"100%\"\n      rounded=\"var(--gr-file-preview-radius, var(--gr-radius-md))\"\n    />\n\n    <!--\n      Условие — `showImage`, а не «картинка готова»: убери её из дерева на\n      время загрузки, и браузер не начнёт качать, а `load` не придёт никогда.\n      Поэтому она ждёт невидимой и вне потока — иначе поделила бы плитку со\n      скелетом как второй flex-элемент.\n    -->\n    <img\n      v-if=\"showImage\"\n      :key=\"src ?? ''\"\n      data-gr-file-preview-image\n      :src=\"src ?? undefined\"\n      :alt=\"alt\"\n      :loading=\"resolvedLoading\"\n      :class=\"[filePreviewMediaClass, showSkeleton ? filePreviewMediaLoadingClass : '']\"\n      @load=\"imageState = 'loaded'\"\n      @error=\"imageState = 'error'\"\n    >\n\n    <span v-else data-gr-file-preview-fallback :class=\"filePreviewFallbackClass\">\n      <component :is=\"fallbackIcon\" :class=\"filePreviewIconClass\" aria-hidden=\"true\" />\n      <span v-if=\"name\" data-gr-file-preview-label :class=\"filePreviewLabelClass\">{{ name }}</span>\n    </span>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, ref, watch, watchEffect, type Component } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\n\nimport IconFile from '~icons/lucide/file'\nimport IconFileArchive from '~icons/lucide/file-archive'\nimport IconFileSpreadsheet from '~icons/lucide/file-spreadsheet'\nimport IconFileText from '~icons/lucide/file-text'\nimport IconFileType from '~icons/lucide/file-type'\nimport IconImageOff from '~icons/lucide/image-off'\n\nimport type { GrSizeWithPx } from '../shared/sizes'\n\nimport { fileKindOf, isPreviewableKind, type GrFileKind } from './fileKindOf'\nimport {\n  filePreviewFallbackClass,\n  filePreviewIconClass,\n  filePreviewInteractiveClass,\n  filePreviewLabelClass,\n  filePreviewMediaClass,\n  filePreviewMediaLoadingClass,\n  filePreviewRatioClass,\n  filePreviewRootClass,\n  filePreviewTileWidths,\n  type GrFilePreviewRatio,\n} from './grFilePreviewStyles'\n\nexport type { GrFileKind } from './fileKindOf'\nexport type { GrFilePreviewRatio } from './grFilePreviewStyles'\n\n/**\n * Плитка превью файла с фолбэком по типу.\n *\n * Показывает **сохранённый** файл, а не отправляет новый: отправка — это\n * `GrFormFile` и `GrFileUpload`. Просмотрщик во весь экран открывает\n * потребитель по событию `click`.\n */\nexport interface GrFilePreviewProps {\n  /** Адрес превью. Пусто — сразу заглушка по типу. */\n  src?: string | null\n  /** MIME-тип. Он решает, картинка это или файл. */\n  mime?: string | null\n  /** Имя файла: доступное имя картинки и подпись заглушки. */\n  name?: string | null\n  /**\n   * Ступень канонической шкалы либо произвольная ширина в пикселях. Число —\n   * escape-hatch, как диаметр у GrAvatar: плитка 96px в ленте вложений в\n   * четыре ступени не укладывается.\n   */\n  tileSize?: GrSizeWithPx\n  ratio?: GrFilePreviewRatio\n  /** Ссылка на оригинал — для не-картинок и для перехода мимо просмотрщика. */\n  href?: string\n  /**\n   * Куда открывать ссылку. Объявлен пропом, а не оставлен на fallthrough:\n   * иначе `_blank` уезжал бы на `<a>` мимо компонента, и защитный `rel`\n   * подставить было бы негде.\n   */\n  target?: string\n  /** Своё значение `rel`. Задано — отменяет автоподстановку. */\n  rel?: string\n  /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n  as?: string | Component\n  /** Плитка кликабельна и эмитит `click` — обычно чтобы открыть просмотрщик. */\n  clickable?: boolean\n  loading?: 'lazy' | 'eager'\n  /**\n   * Доступное имя интерактивной плитки. Не задано — имя приходит из содержимого:\n   * `alt` картинки или подписи заглушки.\n   */\n  ariaLabel?: string\n}\n\nexport interface GrFilePreviewEmits {\n  (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrFilePreviewProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  src: undefined,\n  mime: undefined,\n  name: undefined,\n  tileSize: undefined,\n  ratio: undefined,\n  href: undefined,\n  target: undefined,\n  rel: undefined,\n  as: undefined,\n  clickable: false,\n  loading: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrFilePreviewEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedTileSize = useGrComponentProp('GrFilePreview', 'tileSize', () => props.tileSize, 'md')\nconst resolvedRatio = useGrComponentProp('GrFilePreview', 'ratio', () => props.ratio, '1:1')\nconst resolvedLoading = useGrComponentProp('GrFilePreview', 'loading', () => props.loading, 'lazy')\n\nconst kind = computed<GrFileKind>(() => fileKindOf(props.mime))\n\n/**\n * Состояний три, а не два. Сорвавшаяся загрузка деградирует в заглушку: превью\n * может исчезнуть с диска, и «сломанная картинка» здесь не информативнее\n * иконки. Отдельное `loading` нужно ленте вложений: два десятка плиток\n * приезжают вразнобой, и без него сетка стоит дырами непонятной природы —\n * «ещё едет» и «файл без превью» выглядят одинаково.\n */\ntype ImageState = 'loading' | 'loaded' | 'error'\n\nconst imageState = ref<ImageState>('loading')\n\n// Новая ссылка не должна наследовать ни ошибку прошлой, ни её готовность.\nwatch(() => props.src, () => {\n  imageState.value = 'loading'\n})\n\nconst showImage = computed(() => (\n  isPreviewableKind(kind.value) && Boolean(props.src) && imageState.value !== 'error'\n))\n\nconst showSkeleton = computed(() => showImage.value && imageState.value === 'loading')\n\n/**\n * Иконка вида. Картинка попадает сюда только сорвавшейся загрузкой — тогда и\n * значок другой: «изображение не открылось», а не «это файл».\n */\nconst iconByKind: Record<GrFileKind, Component> = {\n  image: markRaw(IconImageOff),\n  pdf: markRaw(IconFileText),\n  document: markRaw(IconFileType),\n  spreadsheet: markRaw(IconFileSpreadsheet),\n  archive: markRaw(IconFileArchive),\n  unknown: markRaw(IconFile),\n}\n\nconst fallbackIcon = computed(() => iconByKind[kind.value])\n\nconst isInteractive = computed(() => Boolean(props.as) || Boolean(props.href) || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n  if (props.as)\n    return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  if (props.href)\n    return 'a'\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Ссылка, открывающаяся в новой вкладке, получает защиту без спроса — по факту\n * `_blank`, а не по отдельному пропу: то же правило, что у `GrLink` и\n * `GrButton`. Без `rel` открытая страница получает `window.opener` и может\n * переписать вкладку-источник.\n */\nconst resolvedRel = computed(() => props.rel ?? (props.target === '_blank' ? 'noopener noreferrer' : undefined))\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, ссылочных атрибутов не\n * понимает — там они и гасятся.\n */\nconst isAnchorLike = computed(() => typeof rootTag.value !== 'string' || rootTag.value === 'a')\n\nconst rootHref = computed(() => (isAnchorLike.value ? props.href : undefined))\nconst rootTarget = computed(() => (isAnchorLike.value ? props.target : undefined))\nconst rootRel = computed(() => (isAnchorLike.value ? resolvedRel.value : undefined))\n\nconst rootClass = computed(() => [\n  filePreviewRootClass,\n  filePreviewRatioClass[resolvedRatio.value],\n  typeof resolvedTileSize.value === 'number' ? '' : filePreviewTileWidths[resolvedTileSize.value],\n  isInteractive.value ? filePreviewInteractiveClass : '',\n].filter(Boolean).join(' '))\n\nconst rootStyle = computed(() => (\n  typeof resolvedTileSize.value === 'number' ? { width: `${resolvedTileSize.value}px` } : undefined\n))\n\n/**\n * `alt` не выдумывается. Есть имя — оно и есть `alt`; нет — картинка\n * декоративна, и придуманное компонентом описание было бы хуже пустого.\n */\nconst alt = computed(() => props.name ?? '')\n\n/**\n * Интерактивная плитка без имени не отгружается.\n *\n * Имя ей даёт содержимое: `alt` картинки или подпись заглушки — и то и другое\n * приходит из `name`. Без `name` содержимого нет вовсе: кнопка выходит с пустым\n * `alt`, ссылка — пустой, и axe справедливо зовёт это `button-name` и\n * `link-name`. Родовое имя из локали хуже осмысленного, но лучше пустого —\n * потребителю о промахе говорит гард ниже.\n */\nconst resolvedAriaLabel = computed(() => {\n  if (props.ariaLabel)\n    return props.ariaLabel\n\n  if (!isInteractive.value || props.name)\n    return undefined\n\n  return t('gr.filePreview.label', 'File')\n})\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (isInteractive.value && !props.ariaLabel && !props.name) {\n      console.warn(\n        '[granularity] GrFilePreview: интерактивная плитка без `name` и без `ariaLabel` остаётся '\n        + 'без осмысленного имени — скринридер объявит её родовым словом. Передайте имя файла.',\n      )\n    }\n  })\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit('click', event)\n}\n</script>\n\n<template>\n  <component\n    :is=\"rootTag\"\n    data-gr-file-preview\n    :data-kind=\"kind\"\n    :type=\"rootTag === 'button' ? 'button' : undefined\"\n    :href=\"rootHref\"\n    :target=\"rootTarget\"\n    :rel=\"rootRel\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :aria-label=\"resolvedAriaLabel\"\n    @click=\"onClick\"\n  >\n    <GrSkeleton\n      v-if=\"showSkeleton\"\n      data-gr-file-preview-skeleton\n      width=\"100%\"\n      height=\"100%\"\n      rounded=\"var(--gr-file-preview-radius, var(--gr-radius-md))\"\n    />\n\n    <!--\n      Условие — `showImage`, а не «картинка готова»: убери её из дерева на\n      время загрузки, и браузер не начнёт качать, а `load` не придёт никогда.\n      Поэтому она ждёт невидимой и вне потока — иначе поделила бы плитку со\n      скелетом как второй flex-элемент.\n    -->\n    <img\n      v-if=\"showImage\"\n      :key=\"src ?? ''\"\n      data-gr-file-preview-image\n      :src=\"src ?? undefined\"\n      :alt=\"alt\"\n      :loading=\"resolvedLoading\"\n      :class=\"[filePreviewMediaClass, showSkeleton ? filePreviewMediaLoadingClass : '']\"\n      @load=\"imageState = 'loaded'\"\n      @error=\"imageState = 'error'\"\n    >\n\n    <span v-else data-gr-file-preview-fallback :class=\"filePreviewFallbackClass\">\n      <component :is=\"fallbackIcon\" :class=\"filePreviewIconClass\" aria-hidden=\"true\" />\n      <span v-if=\"name\" data-gr-file-preview-label :class=\"filePreviewLabelClass\">{{ name }}</span>\n    </span>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/GrFilePreview/index.js

@@ -1,3 +1,3 @@
-import { n as fileKindOf, r as isPreviewableKind, t as GrFilePreview_default } from "./chunks/GrFilePreview-PabkLgYX.js";
+import { n as fileKindOf, r as isPreviewableKind, t as GrFilePreview_default } from "./chunks/GrFilePreview-2kVOg1C7.js";
 import { n as grFilePreviewSafelist, t as grFilePreviewConfig } from "../../chunks/config-BaWANzzB.js";
 export { GrFilePreview_default as GrFilePreview, GrFilePreview_default as default, fileKindOf, grFilePreviewConfig, grFilePreviewSafelist, isPreviewableKind };