@feugene/granularity 0.19.0 → 0.21.0

package/dist/components/GrEmptyState/index.js

@@ -1,3 +1,3 @@
-import { t as GrEmptyState_default } from "./chunks/GrEmptyState-W7Irx3vc.js";
-import { i as GR_EMPTY_STATE_VARIANTS, n as grEmptyStateSafelist, r as GR_EMPTY_STATE_HEADING_LEVELS, t as grEmptyStateConfig } from "../../chunks/config-DvQIb4kb.js";
-export { GR_EMPTY_STATE_HEADING_LEVELS, GR_EMPTY_STATE_VARIANTS, GrEmptyState_default as GrEmptyState, GrEmptyState_default as default, grEmptyStateConfig, grEmptyStateSafelist };
+import { t as GrEmptyState_default } from "./chunks/GrEmptyState-CS9do8eM.js";
+import { n as grEmptyStateSafelist, t as grEmptyStateConfig } from "../../chunks/config-vSji8w90.js";
+export { GrEmptyState_default as GrEmptyState, GrEmptyState_default as default, grEmptyStateConfig, grEmptyStateSafelist };

package/dist/components/GrFilePreview/chunks/GrFilePreview-rbE3zL9w.js

@@ -0,0 +1,315 @@
+import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.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-QJ54_fcM.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, markRaw, normalizeClass, normalizeStyle, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, watch, withCtx } from "vue";
+//#region ~icons/lucide/file
+var _hoisted_1$6 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$6(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), createElementVNode("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" })], -1)])]);
+}
+var file_default = markRaw({
+	name: "lucide-file",
+	render: render$6
+});
+//#endregion
+//#region ~icons/lucide/file-archive
+var _hoisted_1$5 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$5(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [
+		createElementVNode("path", { d: "M13.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v11.5" }),
+		createElementVNode("path", { d: "M14 2v5a1 1 0 0 0 1 1h5M8 12v-1m0 7v-2m0-9V6" }),
+		createElementVNode("circle", {
+			cx: "8",
+			cy: "20",
+			r: "2"
+		})
+	], -1)])]);
+}
+var file_archive_default = markRaw({
+	name: "lucide-file-archive",
+	render: render$5
+});
+//#endregion
+//#region ~icons/lucide/file-spreadsheet
+var _hoisted_1$4 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$4(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), createElementVNode("path", { d: "M14 2v5a1 1 0 0 0 1 1h5M8 13h2m4 0h2m-8 4h2m4 0h2" })], -1)])]);
+}
+var file_spreadsheet_default = markRaw({
+	name: "lucide-file-spreadsheet",
+	render: render$4
+});
+//#endregion
+//#region ~icons/lucide/file-text
+var _hoisted_1$3 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$3(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), createElementVNode("path", { d: "M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8" })], -1)])]);
+}
+var file_text_default = markRaw({
+	name: "lucide-file-text",
+	render: render$3
+});
+//#endregion
+//#region ~icons/lucide/file-type
+var _hoisted_1$2 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }), createElementVNode("path", { d: "M14 2v5a1 1 0 0 0 1 1h5m-9 10h2m-1-6v6m-3-5v-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5" })], -1)])]);
+}
+var file_type_default = markRaw({
+	name: "lucide-file-type",
+	render: render$2
+});
+//#endregion
+//#region ~icons/lucide/image-off
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("g", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2"
+	}, [createElementVNode("path", { d: "m2 2l20 20M10.41 10.41a2 2 0 1 1-2.83-2.83m5.92 5.92L6 21m12-9l3 3" }), createElementVNode("path", { d: "M3.59 3.59A2 2 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59M21 15V5a2 2 0 0 0-2-2H9" })], -1)])]);
+}
+var image_off_default = markRaw({
+	name: "lucide-image-off",
+	render: render$1
+});
+//#endregion
+//#region src/components/GrFilePreview/fileKindOf.ts
+/** Точные типы. Порядок не важен — совпадение полное. */
+var EXACT = {
+	"application/pdf": "pdf",
+	"application/x-pdf": "pdf",
+	"application/msword": "document",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": "document",
+	"application/vnd.oasis.opendocument.text": "document",
+	"application/rtf": "document",
+	"application/vnd.ms-excel": "spreadsheet",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "spreadsheet",
+	"application/vnd.oasis.opendocument.spreadsheet": "spreadsheet",
+	"text/csv": "spreadsheet",
+	"text/tab-separated-values": "spreadsheet",
+	"application/zip": "archive",
+	"application/x-zip-compressed": "archive",
+	"application/x-rar-compressed": "archive",
+	"application/vnd.rar": "archive",
+	"application/x-7z-compressed": "archive",
+	"application/x-tar": "archive",
+	"application/gzip": "archive",
+	"application/x-gzip": "archive"
+};
+/**
+* Приведение к сравнимому виду: тип приходит из БД и бывает с параметрами
+* (`text/plain; charset=utf-8`) и в любом регистре.
+*/
+function normalize(mime) {
+	return mime.split(";")[0].trim().toLowerCase();
+}
+function fileKindOf(mime) {
+	if (!mime) return "unknown";
+	const type = normalize(mime);
+	if (!type) return "unknown";
+	if (type.startsWith("image/")) return "image";
+	const exact = EXACT[type];
+	if (exact) return exact;
+	if (type.startsWith("text/")) return "document";
+	return "unknown";
+}
+/** Картинку показываем, остальное — подписываем иконкой. */
+function isPreviewableKind(kind) {
+	return kind === "image";
+}
+//#endregion
+//#region src/components/GrFilePreview/GrFilePreview.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"src",
+	"alt",
+	"loading"
+];
+//#endregion
+//#region src/components/GrFilePreview/GrFilePreview.vue
+var GrFilePreview_default = /* @__PURE__ */ defineComponent({
+	__name: "GrFilePreview",
+	props: {
+		src: { default: void 0 },
+		mime: { default: void 0 },
+		name: { default: void 0 },
+		tileSize: { default: void 0 },
+		ratio: { default: void 0 },
+		href: { default: void 0 },
+		as: { default: void 0 },
+		clickable: {
+			type: Boolean,
+			default: false
+		},
+		loading: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		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");
+		const kind = computed(() => fileKindOf(props.mime));
+		/**
+		* Состояний три, а не два. Сорвавшаяся загрузка деградирует в заглушку: превью
+		* может исчезнуть с диска, и «сломанная картинка» здесь не информативнее
+		* иконки. Отдельное `loading` нужно ленте вложений: два десятка плиток
+		* приезжают вразнобой, и без него сетка стоит дырами непонятной природы —
+		* «ещё едет» и «файл без превью» выглядят одинаково.
+		*/
+		const imageState = ref("loading");
+		watch(() => props.src, () => {
+			imageState.value = "loading";
+		});
+		const showImage = computed(() => isPreviewableKind(kind.value) && Boolean(props.src) && imageState.value !== "error");
+		const showSkeleton = computed(() => showImage.value && imageState.value === "loading");
+		/**
+		* Иконка вида. Картинка попадает сюда только сорвавшейся загрузкой — тогда и
+		* значок другой: «изображение не открылось», а не «это файл».
+		*/
+		const iconByKind = {
+			image: markRaw(image_off_default),
+			pdf: markRaw(file_text_default),
+			document: markRaw(file_type_default),
+			spreadsheet: markRaw(file_spreadsheet_default),
+			archive: markRaw(file_archive_default),
+			unknown: markRaw(file_default)
+		};
+		const fallbackIcon = computed(() => iconByKind[kind.value]);
+		const isInteractive = computed(() => Boolean(props.as) || Boolean(props.href) || props.clickable);
+		const rootTag = computed(() => {
+			if (props.as) return typeof props.as === "string" ? props.as : markRaw(props.as);
+			if (props.href) return "a";
+			return props.clickable ? "button" : "div";
+		});
+		/**
+		* Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без
+		* `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —
+		* там он и гасится.
+		*/
+		const rootHref = computed(() => typeof rootTag.value === "string" && rootTag.value !== "a" ? void 0 : props.href);
+		const rootClass = computed(() => [
+			filePreviewRootClass,
+			filePreviewRatioClass[resolvedRatio.value],
+			typeof resolvedTileSize.value === "number" ? "" : filePreviewTileWidths[resolvedTileSize.value],
+			isInteractive.value ? filePreviewInteractiveClass : ""
+		].filter(Boolean).join(" "));
+		const rootStyle = computed(() => typeof resolvedTileSize.value === "number" ? { width: `${resolvedTileSize.value}px` } : void 0);
+		/**
+		* `alt` не выдумывается. Есть имя — оно и есть `alt`; нет — картинка
+		* декоративна, и придуманное компонентом описание было бы хуже пустого.
+		*/
+		const alt = computed(() => props.name ?? "");
+		function onClick(event) {
+			emit("click", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(rootTag.value), {
+				"data-gr-file-preview": "",
+				"data-kind": kind.value,
+				type: rootTag.value === "button" ? "button" : void 0,
+				href: rootHref.value,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value),
+				"aria-label": __props.ariaLabel,
+				onClick
+			}, {
+				default: withCtx(() => [showSkeleton.value ? (openBlock(), createBlock(GrSkeleton_default, {
+					key: 0,
+					"data-gr-file-preview-skeleton": "",
+					width: "100%",
+					height: "100%",
+					rounded: "var(--gr-file-preview-radius, var(--gr-radius-md))"
+				})) : createCommentVNode("", true), showImage.value ? (openBlock(), createElementBlock("img", {
+					key: __props.src ?? "",
+					"data-gr-file-preview-image": "",
+					src: __props.src ?? void 0,
+					alt: alt.value,
+					loading: unref(resolvedLoading),
+					class: normalizeClass([unref(filePreviewMediaClass), showSkeleton.value ? unref(filePreviewMediaLoadingClass) : ""]),
+					onLoad: _cache[0] || (_cache[0] = ($event) => imageState.value = "loaded"),
+					onError: _cache[1] || (_cache[1] = ($event) => imageState.value = "error")
+				}, null, 42, _hoisted_1)) : (openBlock(), createElementBlock("span", {
+					key: 2,
+					"data-gr-file-preview-fallback": "",
+					class: normalizeClass(unref(filePreviewFallbackClass))
+				}, [(openBlock(), createBlock(resolveDynamicComponent(fallbackIcon.value), {
+					class: normalizeClass(unref(filePreviewIconClass)),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])), __props.name ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-file-preview-label": "",
+					class: normalizeClass(unref(filePreviewLabelClass))
+				}, toDisplayString(__props.name), 3)) : createCommentVNode("", true)], 2))]),
+				_: 1
+			}, 8, [
+				"data-kind",
+				"type",
+				"href",
+				"class",
+				"style",
+				"aria-label"
+			]);
+		};
+	}
+});
+//#endregion
+export { GrFilePreview_default as t };

package/dist/components/GrFilePreview/chunks/GrFilePreview-rbE3zL9w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrFilePreview-rbE3zL9w.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) return 'unknown'\n\n  const type = normalize(mime)\n  if (!type) return 'unknown'\n\n  // Картинка — единственный вид, который компонент рисует, а не подписывает.\n  if (type.startsWith('image/')) return 'image'\n\n  const exact = EXACT[type]\n  if (exact) return exact\n\n  // `text/csv` уже разобран выше: таблица важнее общего правила для текста.\n  if (type.startsWith('text/')) 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, type Component } from 'vue'\n\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  /** Свой корневой тег (`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  as: undefined,\n  clickable: false,\n  loading: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrFilePreviewEmits>()\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, () => { imageState.value = 'loading' })\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) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  if (props.href) return 'a'\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n  typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => [\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\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    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :aria-label=\"ariaLabel\"\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, type Component } from 'vue'\n\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  /** Свой корневой тег (`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  as: undefined,\n  clickable: false,\n  loading: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrFilePreviewEmits>()\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, () => { imageState.value = 'loading' })\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) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  if (props.href) return 'a'\n  return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n  typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst rootClass = computed(() => [\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\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    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    :aria-label=\"ariaLabel\"\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

@@ -0,0 +1,3 @@
+import { t as GrFilePreview_default } from "./chunks/GrFilePreview-rbE3zL9w.js";
+import { n as grFilePreviewSafelist, t as grFilePreviewConfig } from "../../chunks/config-QJ54_fcM.js";
+export { GrFilePreview_default as GrFilePreview, GrFilePreview_default as default, grFilePreviewConfig, grFilePreviewSafelist };