@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrFileUpload/chunks/GrFileUpload-D3-vC-ap.js

@@ -0,0 +1,1080 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { f as runFileValidators, o as acceptValidator, p as FileValidationError } from "../../../chunks/fileValidation-D5TFBhbv.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-bQwtZtYT.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { r as meaningfulSlotNodes, t as flattenSlotNodes } from "../../../chunks/slotNodes-DxNXpC7v.js";
+import { t as arrow_up_default } from "../../../chunks/arrow-up-C_G4jg8M.js";
+import { t as GrProgressBar_default } from "../../GrProgressBar/chunks/GrProgressBar-hszUOC8f.js";
+import { t as useFilePreviews } from "../../../chunks/useFilePreviews-DnwgdyBs.js";
+import { a as iconGlyphSizes, c as progressBarSizes, i as hintSizes, l as progressTextSizes, o as iconTileSizes, r as grFileUploadZoneClass, s as labelSizes, u as zoneGaps } from "../../../chunks/config-CN970ZcJ.js";
+import { Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, onBeforeUnmount, onMounted, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx, withModifiers } from "vue";
+//#region src/components/GrFileUpload/fileEntry.ts
+function createFileEntry(file) {
+	return {
+		file,
+		status: "pending",
+		percent: 0
+	};
+}
+/**
+* Сводное состояние набора: грузимся, пока грузится хоть один; ошибка, если
+* после завершения есть хоть одна; успех — когда успешны все.
+*
+* Процент — среднее по файлам, а не по байтам: у пофайловых запросов размеры
+* разные, и «взвешенная» полоса дёргалась бы назад, когда большой файл
+* стартует после маленького.
+*/
+function summarizeFileEntries(entries) {
+	if (!entries.length) return {
+		phase: "idle",
+		percent: 0,
+		indeterminate: false,
+		loaded: 0,
+		total: 0
+	};
+	const total = entries.length;
+	const percent = Math.round(entries.reduce((sum, entry) => sum + entry.percent, 0) / total);
+	const failed = entries.filter((entry) => entry.status === "error");
+	if (entries.some((entry) => entry.status === "uploading" || entry.status === "pending")) return {
+		phase: "uploading",
+		percent,
+		indeterminate: percent === 0,
+		loaded: 0,
+		total: 0
+	};
+	if (failed.length) return {
+		phase: "error",
+		percent,
+		indeterminate: false,
+		loaded: 0,
+		total: 0,
+		error: failed[0].error
+	};
+	return {
+		phase: "success",
+		percent: 100,
+		indeterminate: false,
+		loaded: 0,
+		total: 0
+	};
+}
+//#endregion
+//#region src/components/GrFileUpload/useDropZone.ts
+/**
+* Drag&drop поверх зоны.
+*
+* Счётчик входов, а не флаг: `dragenter`/`dragleave` приходят и от вложенных
+* элементов, и без счётчика подсветка гасла, стоило курсору пересечь границу
+* подписи внутри зоны.
+*/
+function useDropZone(options) {
+	const isOver = ref(false);
+	let overCounter = 0;
+	function setOver(next) {
+		if (isOver.value === next) return;
+		isOver.value = next;
+	}
+	function ignored() {
+		return options.inactive() || options.locked();
+	}
+	function onDragEnter(event) {
+		if (ignored()) return;
+		event.preventDefault();
+		overCounter += 1;
+		setOver(true);
+	}
+	function onDragOver(event) {
+		if (ignored()) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+	}
+	function onDragLeave(event) {
+		if (ignored()) return;
+		event.preventDefault();
+		overCounter = Math.max(0, overCounter - 1);
+		if (overCounter === 0) setOver(false);
+	}
+	function onDropFiles(event) {
+		if (ignored()) return;
+		event.preventDefault();
+		overCounter = 0;
+		setOver(false);
+		const files = event.dataTransfer?.files ? Array.prototype.slice.call(event.dataTransfer.files) : [];
+		options.onDrop(files);
+	}
+	return {
+		isOver,
+		onDragEnter,
+		onDragOver,
+		onDragLeave,
+		onDropFiles
+	};
+}
+//#endregion
+//#region src/components/GrFileUpload/uploadViaXhr.ts
+var GrUploadAbortError = class extends Error {
+	constructor(message = "Upload aborted") {
+		super(message);
+		this.name = "GrUploadAbortError";
+	}
+};
+var GrUploadHttpError = class extends Error {
+	status;
+	payload;
+	constructor(status, payload) {
+		super(`Upload failed with status ${status}`);
+		this.name = "GrUploadHttpError";
+		this.status = status;
+		this.payload = payload;
+	}
+};
+function appendExtraFormData(body, extraData) {
+	if (!extraData) return;
+	for (const [key, value] of Object.entries(extraData)) {
+		if (Array.isArray(value)) {
+			for (const entry of value) body.append(key, entry);
+			continue;
+		}
+		body.append(key, value);
+	}
+}
+function parseResponse(xhr) {
+	const contentType = xhr.getResponseHeader("content-type") ?? "";
+	const raw = xhr.responseText;
+	if (contentType.includes("application/json")) try {
+		return JSON.parse(raw);
+	} catch {
+		return raw;
+	}
+	return raw;
+}
+function uploadViaXhr(options) {
+	const { url, files, name, headers, withCredentials, extraData, signal, onProgress } = options;
+	return new Promise((resolve, reject) => {
+		if (signal.aborted) {
+			reject(new GrUploadAbortError());
+			return;
+		}
+		const body = new FormData();
+		for (const file of files) body.append(name, file);
+		appendExtraFormData(body, extraData);
+		const xhr = new XMLHttpRequest();
+		xhr.open("POST", url, true);
+		xhr.withCredentials = !!withCredentials;
+		if (headers) for (const [key, value] of Object.entries(headers)) xhr.setRequestHeader(key, value);
+		const onAbort = () => {
+			try {
+				xhr.abort();
+			} catch {}
+		};
+		signal.addEventListener("abort", onAbort);
+		const cleanup = () => {
+			signal.removeEventListener("abort", onAbort);
+		};
+		if (onProgress) xhr.upload.addEventListener("progress", (event) => {
+			const indeterminate = !event.lengthComputable;
+			const total = indeterminate ? 0 : event.total;
+			const loaded = indeterminate ? 0 : event.loaded;
+			const percent = indeterminate || total === 0 ? 0 : Math.min(100, loaded / total * 100);
+			onProgress({
+				percent,
+				loaded,
+				total,
+				indeterminate
+			});
+		});
+		xhr.addEventListener("load", () => {
+			cleanup();
+			const payload = parseResponse(xhr);
+			const status = xhr.status;
+			if (status >= 200 && status < 300) {
+				if (onProgress) onProgress({
+					percent: 100,
+					loaded: 1,
+					total: 1,
+					indeterminate: false
+				});
+				resolve(payload);
+				return;
+			}
+			reject(new GrUploadHttpError(status, payload));
+		});
+		xhr.addEventListener("error", () => {
+			cleanup();
+			reject(/* @__PURE__ */ new Error("Network error during upload"));
+		});
+		xhr.addEventListener("abort", () => {
+			cleanup();
+			reject(new GrUploadAbortError());
+		});
+		xhr.send(body);
+	});
+}
+//#endregion
+//#region src/components/GrFileUpload/usePerFileUpload.ts
+/**
+* Пофайловый режим: у каждого файла свой запрос, свой контроллер и свой статус,
+* а сводное состояние выводится из них.
+*/
+function usePerFileUpload(options) {
+	const entries = ref([]);
+	/** Контроллер на файл: `abortFile` обязан обрывать свой запрос, а не соседний. */
+	const controllers = /* @__PURE__ */ new Map();
+	function syncSummary() {
+		options.onSummary(summarizeFileEntries(entries.value));
+	}
+	function entryOf(file) {
+		return entries.value.find((entry) => entry.file === file);
+	}
+	function patch(file, next) {
+		const entry = entryOf(file);
+		if (!entry) return;
+		Object.assign(entry, next);
+		syncSummary();
+	}
+	async function uploadOne(file) {
+		const controller = new AbortController();
+		controllers.set(file, controller);
+		patch(file, {
+			status: "uploading",
+			percent: 0,
+			error: void 0
+		});
+		const onProgress = (info) => {
+			patch(file, { percent: info.indeterminate ? 0 : info.percent });
+			options.onProgress(info, file);
+		};
+		try {
+			const payload = await options.send([file], {
+				signal: controller.signal,
+				onProgress
+			});
+			patch(file, {
+				status: "success",
+				percent: 100,
+				error: void 0
+			});
+			options.onSuccess(payload, file);
+			options.onProgress({
+				percent: 100,
+				loaded: 0,
+				total: 0,
+				indeterminate: false
+			}, file);
+		} catch (error) {
+			if (error instanceof GrUploadAbortError || error?.name === "AbortError") patch(file, {
+				status: "pending",
+				percent: 0,
+				error: void 0
+			});
+			else patch(file, {
+				status: "error",
+				error
+			});
+			options.onError(error, file);
+		} finally {
+			controllers.delete(file);
+		}
+	}
+	/**
+	* Очередь с ограничением параллелизма. Без неё «пофайлово» означало бы «все
+	* сразу»: сотня файлов открыла бы сотню соединений.
+	*/
+	async function runWithConcurrency(files) {
+		const limit = Math.max(1, Math.floor(options.concurrency()));
+		const queue = [...files];
+		const workers = Array.from({ length: Math.min(limit, queue.length) }, async () => {
+			while (queue.length) {
+				const next = queue.shift();
+				if (!next) return;
+				await uploadOne(next);
+			}
+		});
+		await Promise.all(workers);
+	}
+	async function run(files) {
+		entries.value = files.map(createFileEntry);
+		syncSummary();
+		await runWithConcurrency(files);
+		options.onSetChange(files);
+	}
+	async function retryFile(file) {
+		if (!entryOf(file)) return;
+		await uploadOne(file);
+	}
+	function abortFile(file) {
+		controllers.get(file)?.abort();
+		controllers.delete(file);
+	}
+	function abortAll() {
+		for (const controller of controllers.values()) controller.abort();
+		controllers.clear();
+	}
+	function dropEntry(file) {
+		entries.value = entries.value.filter((entry) => entry.file !== file);
+	}
+	function reset() {
+		entries.value = [];
+	}
+	return {
+		entries,
+		entryOf,
+		run,
+		retryFile,
+		abortFile,
+		abortAll,
+		dropEntry,
+		reset
+	};
+}
+//#endregion
+//#region src/components/GrFileUpload/uploadState.ts
+var GR_UPLOAD_STATE_IDLE = Object.freeze({
+	phase: "idle",
+	percent: 0,
+	indeterminate: false,
+	loaded: 0,
+	total: 0
+});
+//#endregion
+//#region src/components/GrFileUpload/useUploadState.ts
+/**
+* Сводное состояние загрузки: фаза, проценты и таймер скрытия успеха.
+*
+* Состояние — `reactive`-объект с меняющейся формой (у `error` есть поле
+* `error`, у `idle` его нет), поэтому при смене фазы старые ключи удаляются:
+* иначе `phase: 'idle'` тащил бы за собой `error` от прошлой попытки.
+*/
+function useUploadState(options) {
+	const state = reactive({ ...GR_UPLOAD_STATE_IDLE });
+	let idleTimer = null;
+	function clearScheduledIdle() {
+		if (idleTimer === null) return;
+		clearTimeout(idleTimer);
+		idleTimer = null;
+	}
+	function assign(next) {
+		for (const key of Object.keys(state)) delete state[key];
+		Object.assign(state, next);
+		options.onChange(state);
+	}
+	function setIdle() {
+		assign({ ...GR_UPLOAD_STATE_IDLE });
+	}
+	function setUploading(info) {
+		assign({
+			phase: "uploading",
+			percent: info?.percent ?? 0,
+			indeterminate: info?.indeterminate ?? true,
+			loaded: info?.loaded ?? 0,
+			total: info?.total ?? 0
+		});
+	}
+	function setSuccess(info) {
+		assign({
+			phase: "success",
+			percent: 100,
+			indeterminate: false,
+			loaded: info.loaded,
+			total: info.total
+		});
+	}
+	function setError(error) {
+		const prev = state;
+		assign({
+			phase: "error",
+			percent: prev.phase === "uploading" ? prev.percent : 0,
+			indeterminate: false,
+			loaded: prev.phase === "uploading" ? prev.loaded : 0,
+			total: prev.phase === "uploading" ? prev.total : 0,
+			error
+		});
+	}
+	function applyProgress(info) {
+		if (state.phase !== "uploading") return;
+		assign({
+			phase: "uploading",
+			percent: info.percent,
+			indeterminate: info.indeterminate,
+			loaded: info.loaded,
+			total: info.total
+		});
+	}
+	function scheduleIdle(delayMs) {
+		clearScheduledIdle();
+		idleTimer = setTimeout(() => {
+			if (state.phase === "success") setIdle();
+			idleTimer = null;
+		}, delayMs);
+	}
+	return {
+		state,
+		setIdle,
+		setUploading,
+		setSuccess,
+		setError,
+		applyProgress,
+		assign,
+		scheduleIdle,
+		clearScheduledIdle
+	};
+}
+//#endregion
+//#region src/components/GrFileUpload/GrFileUpload.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"id",
+	"tabindex",
+	"aria-hidden",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-readonly",
+	"name",
+	"accept",
+	"capture",
+	"webkitdirectory",
+	"multiple",
+	"disabled"
+];
+var _hoisted_2 = {
+	"data-gr-file-upload-live": "",
+	class: "sr-only",
+	role: "status",
+	"aria-live": "polite"
+};
+var _hoisted_3 = { class: "min-w-0" };
+var _hoisted_4 = {
+	key: 2,
+	"data-gr-file-upload-list": "",
+	class: "mt-3 space-y-1"
+};
+var _hoisted_5 = ["src"];
+var _hoisted_6 = { class: "font-600" };
+var _hoisted_7 = { class: "text-[var(--gr-muted-fg)]" };
+var _hoisted_8 = ["data-status"];
+var _hoisted_9 = ["aria-label", "onClick"];
+var _hoisted_10 = ["aria-label", "onClick"];
+var _hoisted_11 = ["aria-label", "onClick"];
+var _hoisted_12 = ["aria-hidden"];
+var _hoisted_13 = { class: "flex items-center gap-2" };
+//#endregion
+//#region src/components/GrFileUpload/GrFileUpload.vue
+var GrFileUpload_default = /* @__PURE__ */ defineComponent({
+	__name: "GrFileUpload",
+	props: {
+		modelValue: { default: void 0 },
+		action: { default: void 0 },
+		request: {
+			type: Function,
+			default: void 0
+		},
+		name: { default: "file" },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		limit: { default: void 0 },
+		beforeUpload: {
+			type: Function,
+			default: void 0
+		},
+		validators: { default: void 0 },
+		accept: { default: void 0 },
+		capture: { default: void 0 },
+		directory: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		headers: { default: void 0 },
+		withCredentials: {
+			type: Boolean,
+			default: false
+		},
+		showFileList: {
+			type: Boolean,
+			default: false
+		},
+		uploadExtraData: {
+			type: Function,
+			default: void 0
+		},
+		placeholder: { default: void 0 },
+		showProgress: {
+			type: Boolean,
+			default: true
+		},
+		progressTone: { default: "primary" },
+		progressLabel: { default: void 0 },
+		hideProgressOnSuccess: { default: 800 },
+		size: { default: void 0 },
+		uploadMode: { default: "batch" },
+		concurrency: { default: 3 },
+		preview: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"exceed",
+		"success",
+		"error",
+		"progress",
+		"change",
+		"stateChange",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrFileUpload" });
+		const zoneGapClass = computed(() => zoneGaps[resolvedSize.value]);
+		const iconTileClass = computed(() => iconTileSizes[resolvedSize.value]);
+		const iconGlyphSize = computed(() => iconGlyphSizes[resolvedSize.value]);
+		const labelClass = computed(() => labelSizes[resolvedSize.value]);
+		const hintClass = computed(() => hintSizes[resolvedSize.value]);
+		const progressTextClass = computed(() => progressTextSizes[resolvedSize.value]);
+		const progressBarSize = computed(() => progressBarSizes[resolvedSize.value]);
+		const emit = __emit;
+		const slots = useSlots();
+		const { t } = useGranularityTranslations();
+		const field = useGrFormFieldContext();
+		const fieldId = computed(() => field?.id.value);
+		const describedBy = computed(() => field?.describedById.value);
+		const { disabled: isDisabled, readonly: isReadonly, invalid: isInvalid, required: isRequired, locked: isLocked } = useGrFormControl(() => props);
+		const resolvedPlaceholder = computed(() => props.placeholder ?? t("gr.fileUpload.placeholder", "Drag files here or click to select"));
+		const resolvedProgressLabel = computed(() => props.progressLabel ?? t("gr.fileUpload.progress", "Upload progress"));
+		function slotIsTextOnly(nodes) {
+			const meaningful = meaningfulSlotNodes(nodes);
+			if (meaningful.length === 0) return true;
+			for (const node of meaningful) if (node.type !== Text) return false;
+			return true;
+		}
+		const defaultSlotNodes = computed(() => {
+			return slots.default ? flattenSlotNodes(slots.default({})) : [];
+		});
+		const hasCustomUi = computed(() => {
+			return !!slots.default && !slotIsTextOnly(defaultSlotNodes.value);
+		});
+		const inputRef = ref(null);
+		const rootEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		const lastFiles = ref(props.modelValue ? [...props.modelValue] : []);
+		/**
+		* Набор меняется только здесь: иначе `update:modelValue` рано или поздно
+		* разошёлся бы с тем, что показано в списке.
+		*/
+		function setFiles(next) {
+			lastFiles.value = next;
+			emit("update:modelValue", next);
+		}
+		watch(() => props.modelValue, (next) => {
+			if (next === void 0) return;
+			if (next === lastFiles.value) return;
+			lastFiles.value = [...next];
+		}, { deep: false });
+		const { state, setIdle: setStateIdle, setUploading: setStateUploading, setSuccess: setStateSuccess, setError: setStateError, applyProgress, assign: assignState, scheduleIdle, clearScheduledIdle } = useUploadState({ onChange: (next) => emit("stateChange", next) });
+		let activeController = null;
+		function handleProgress(info) {
+			applyProgress(info);
+			emit("progress", info.percent, info);
+		}
+		const { fileKey, previewUrl, revokePreview, revokeAllPreviews } = useFilePreviews({ enabled: () => props.preview });
+		/**
+		* `extraData` считается один раз на набор и не меняется между файлами, поэтому
+		* живёт рядом с очередью, а не путешествует через её контракт.
+		*/
+		let perFileExtraData;
+		const perFile = usePerFileUpload({
+			concurrency: () => props.concurrency,
+			send: (files, ctx) => props.request ? props.request(files, {
+				signal: ctx.signal,
+				extraData: perFileExtraData,
+				onProgress: ctx.onProgress
+			}) : uploadViaXhr({
+				url: props.action ?? "",
+				files,
+				name: props.name,
+				headers: props.headers,
+				withCredentials: props.withCredentials,
+				extraData: perFileExtraData,
+				signal: ctx.signal,
+				onProgress: ctx.onProgress
+			}),
+			onSummary: assignState,
+			onProgress: (info, file) => emit("progress", info.percent, info, file),
+			onSuccess: (payload, file) => emit("success", payload, file),
+			onError: (error, file) => emit("error", error, file),
+			onSetChange: (files) => emit("change", files)
+		});
+		const fileEntries = perFile.entries;
+		const { retryFile, abortFile } = perFile;
+		const dropZone = useDropZone({
+			locked: () => isLocked.value,
+			inactive: () => hasCustomUi.value,
+			onDrop: (files) => void handleFiles(files, "drop")
+		});
+		const isOver = dropZone.isOver;
+		/**
+		* Дефолтный слот вызывается из двух мест — как своя зона целиком и как подпись
+		* внутри стандартной. Набор пропов у него один: две копии разъехались бы.
+		*/
+		const defaultSlotProps = computed(() => ({
+			openDialog,
+			abort,
+			disabled: isDisabled.value,
+			files: lastFiles.value,
+			isOver: isOver.value,
+			state,
+			retry,
+			removeFile,
+			fileEntries: fileEntries.value,
+			retryFile,
+			abortFile
+		}));
+		const zoneClass = computed(() => grFileUploadZoneClass({
+			size: resolvedSize.value,
+			disabled: isDisabled.value,
+			readonly: isReadonly.value,
+			over: isOver.value
+		}));
+		const hiddenInputStyle = {
+			position: "fixed",
+			top: "-9999px",
+			left: "-9999px",
+			width: "1px",
+			height: "1px",
+			opacity: "0",
+			overflow: "hidden",
+			pointerEvents: "none"
+		};
+		function openDialog() {
+			if (isLocked.value) return;
+			inputRef.value?.click();
+		}
+		function abort() {
+			activeController?.abort();
+			activeController = null;
+		}
+		function totalSizeOf(files) {
+			return files.reduce((sum, file) => sum + file.size, 0);
+		}
+		function normalizeLimit(limit) {
+			if (typeof limit !== "number") return void 0;
+			if (!Number.isFinite(limit)) return void 0;
+			if (limit <= 0) return void 0;
+			return Math.floor(limit);
+		}
+		async function uploadViaAction(files, signal, extraData) {
+			if (!props.action) throw new Error("GrFileUpload: either `action` or `request` must be provided");
+			return uploadViaXhr({
+				url: props.action,
+				files,
+				name: props.name,
+				headers: props.headers,
+				withCredentials: props.withCredentials,
+				extraData,
+				signal,
+				onProgress: handleProgress
+			});
+		}
+		async function runBeforeUpload(files) {
+			if (!props.beforeUpload) return "ok";
+			for (const file of files) try {
+				const result = props.beforeUpload(file);
+				if (result === false) return {
+					aborted: true,
+					reason: /* @__PURE__ */ new Error("Upload aborted by beforeUpload")
+				};
+				if (result && typeof result.then === "function") await result;
+			} catch (error) {
+				return {
+					aborted: true,
+					reason: error
+				};
+			}
+			return "ok";
+		}
+		/**
+		* `accept` идёт первым валидатором: атрибут на input фильтрует только диалог,
+		* а drop мимо него проходит.
+		*/
+		function effectiveValidators() {
+			return [acceptValidator(props.accept), ...props.validators ?? []];
+		}
+		/**
+		* Номер запуска. Валидация и `beforeUpload` асинхронны, поэтому два быстрых
+		* выбора подряд идут внахлёст: без номера «побеждал» тот, чьи валидаторы
+		* отработали позже, — он же обрывал уже стартовавшую загрузку соседа.
+		* Актуален всегда последний выбор, остальные тихо сходят с дистанции.
+		*/
+		let runCounter = 0;
+		async function handleFiles(files, source = "input") {
+			if (isLocked.value) return;
+			if (!files.length) return;
+			runCounter += 1;
+			const runId = runCounter;
+			const isStale = () => runId !== runCounter;
+			const normalizedLimit = normalizeLimit(props.limit);
+			if (props.multiple && normalizedLimit && files.length > normalizedLimit) {
+				emit("exceed", files, normalizedLimit);
+				emit("error", /* @__PURE__ */ new Error(`Too many files selected, limit=${normalizedLimit}`));
+				return;
+			}
+			const { files: valid, issues } = await runFileValidators(files, effectiveValidators(), {
+				source,
+				multiple: props.multiple
+			});
+			if (isStale()) return;
+			if (issues.length > 0) {
+				emit("error", new FileValidationError(issues, valid));
+				return;
+			}
+			if (!valid.length) return;
+			revokeAllPreviews();
+			setFiles(valid);
+			const before = await runBeforeUpload(valid);
+			if (isStale()) return;
+			if (before !== "ok") {
+				emit("error", before.reason);
+				return;
+			}
+			let extraData;
+			try {
+				extraData = props.uploadExtraData?.(valid);
+			} catch (error) {
+				emit("error", error);
+				return;
+			}
+			abort();
+			clearScheduledIdle();
+			if (props.uploadMode === "per-file") {
+				perFileExtraData = extraData;
+				await perFile.run(valid);
+				return;
+			}
+			const controller = new AbortController();
+			activeController = controller;
+			perFile.reset();
+			setStateUploading();
+			emit("progress", 0, {
+				percent: 0,
+				loaded: 0,
+				total: 0,
+				indeterminate: true
+			});
+			try {
+				const payload = props.request ? await props.request(valid, {
+					signal: controller.signal,
+					extraData,
+					onProgress: handleProgress
+				}) : await uploadViaAction(valid, controller.signal, extraData);
+				const finalLoaded = (state.phase === "uploading" ? state.total || state.loaded : 0) || totalSizeOf(valid);
+				setStateSuccess({
+					loaded: finalLoaded,
+					total: finalLoaded
+				});
+				emit("success", payload);
+				emit("change", valid);
+				emit("progress", 100, {
+					percent: 100,
+					loaded: finalLoaded,
+					total: finalLoaded,
+					indeterminate: false
+				});
+				if (props.hideProgressOnSuccess && props.hideProgressOnSuccess > 0) scheduleIdle(props.hideProgressOnSuccess);
+			} catch (error) {
+				if (error instanceof GrUploadAbortError) setStateIdle();
+				else setStateError(error);
+				emit("error", error);
+			} finally {
+				if (activeController === controller) activeController = null;
+			}
+		}
+		/**
+		* `<input type="file">` не понимает `readonly` — атрибута для него в HTML нет.
+		* Поэтому системный диалог гасим отменой действия по умолчанию: input остаётся
+		* в порядке `Tab` и объявляется как «только чтение», но нового файла не примет.
+		*/
+		function onInputClick(event) {
+			if (isReadonly.value && !isDisabled.value) event.preventDefault();
+		}
+		async function onInputChange(event) {
+			if (isLocked.value) return;
+			const target = event.target;
+			const files = target?.files ? Array.prototype.slice.call(target.files) : [];
+			if (target) target.value = "";
+			await nextTick();
+			await handleFiles(files, "input");
+		}
+		function onRootClick(event) {
+			if (hasCustomUi.value) return;
+			if (event.target === inputRef.value) return;
+			openDialog();
+		}
+		const effectiveProgressTone = computed(() => {
+			if (state.phase === "error") return "danger";
+			if (state.phase === "success") return "success";
+			return props.progressTone;
+		});
+		/**
+		* Живой регион существует с первого рендера и пуст, пока объявлять нечего:
+		* регион, появляющийся сразу с текстом, часть AT не объявляет вовсе. Прогресс
+		* в процентах сюда не идёт — диктор захлебнётся; объявляются только фазы.
+		*/
+		const liveMessage = computed(() => {
+			if (state.phase === "uploading") return t("gr.fileUpload.uploading", "Uploading…");
+			if (state.phase === "success") return t("gr.fileUpload.success", "Upload complete");
+			if (state.phase === "error") return t("gr.fileUpload.error", "Upload failed");
+			return "";
+		});
+		const progressVisible = computed(() => state.phase !== "idle");
+		const progressIndeterminate = computed(() => state.phase === "uploading" && state.indeterminate);
+		const progressPercent = computed(() => progressIndeterminate.value ? 0 : state.percent);
+		const progressText = computed(() => {
+			if (progressIndeterminate.value) return "";
+			return `${Math.round(progressPercent.value)}%`;
+		});
+		const isPerFile = computed(() => props.uploadMode === "per-file");
+		const statusTextByStatus = computed(() => ({
+			pending: t("gr.fileUpload.statusPending", "Pending"),
+			uploading: t("gr.fileUpload.statusUploading", "Uploading"),
+			success: t("gr.fileUpload.statusSuccess", "Uploaded"),
+			error: t("gr.fileUpload.statusError", "Failed")
+		}));
+		/** Запись файла для разметки: в батчевом режиме её нет — и статуса тоже. */
+		function entryFor(file) {
+			return isPerFile.value ? perFile.entryOf(file) : void 0;
+		}
+		/** Повторить загрузку текущего набора — после ошибки выбирать файлы заново незачем. */
+		async function retry() {
+			if (!lastFiles.value.length) return;
+			await handleFiles([...lastFiles.value], "input");
+		}
+		/**
+		* Убрать файл из набора. Идущая загрузка при этом обрывается: она была про
+		* прежний набор, и её результат к новому отношения не имеет.
+		*/
+		function removeFile(file) {
+			const next = lastFiles.value.filter((item) => item !== file);
+			if (next.length === lastFiles.value.length) return;
+			abortFile(file);
+			abort();
+			clearScheduledIdle();
+			revokePreview(file);
+			setFiles(next);
+			perFile.dropEntry(file);
+			if (props.uploadMode === "per-file" && fileEntries.value.length) assignState(summarizeFileEntries(fileEntries.value));
+			else if (state.phase !== "idle") setStateIdle();
+		}
+		function focus() {
+			inputRef.value?.focus();
+		}
+		function blur() {
+			inputRef.value?.blur();
+		}
+		onMounted(() => {
+			if (process.env.NODE_ENV === "production") return;
+			if (props.action || props.request) return;
+			console.warn("[GrFileUpload] не задан ни `action`, ни `request`: отправлять файлы некуда.");
+		});
+		onBeforeUnmount(() => {
+			clearScheduledIdle();
+			abort();
+			perFile.abortAll();
+			revokeAllPreviews();
+		});
+		__expose({
+			focus,
+			blur,
+			uploadFiles: handleFiles,
+			abort,
+			openDialog,
+			state,
+			/** Текущий набор файлов — тот, что показан в списке и уйдёт в `retry`. */
+			files: lastFiles,
+			retry,
+			removeFile,
+			/** Записи по файлам — пусты в батчевом режиме. */
+			fileEntries,
+			retryFile,
+			abortFile
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-file-upload": "",
+				class: normalizeClass(hasCustomUi.value ? "inline-block" : zoneClass.value),
+				onClick: onRootClick,
+				onFocusin: _cache[0] || (_cache[0] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[1] || (_cache[1] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args)),
+				onDragenter: _cache[2] || (_cache[2] = (...args) => unref(dropZone).onDragEnter && unref(dropZone).onDragEnter(...args)),
+				onDragover: _cache[3] || (_cache[3] = (...args) => unref(dropZone).onDragOver && unref(dropZone).onDragOver(...args)),
+				onDragleave: _cache[4] || (_cache[4] = (...args) => unref(dropZone).onDragLeave && unref(dropZone).onDragLeave(...args)),
+				onDrop: _cache[5] || (_cache[5] = (...args) => unref(dropZone).onDropFiles && unref(dropZone).onDropFiles(...args))
+			}, [
+				createElementVNode("input", {
+					id: fieldId.value,
+					ref_key: "inputRef",
+					ref: inputRef,
+					"data-gr-file-upload-input": "",
+					style: hiddenInputStyle,
+					type: "file",
+					tabindex: hasCustomUi.value || unref(isDisabled) ? -1 : 0,
+					"aria-hidden": hasCustomUi.value ? "true" : void 0,
+					"aria-label": __props.ariaLabel ?? (hasCustomUi.value ? void 0 : resolvedPlaceholder.value),
+					"aria-describedby": describedBy.value,
+					"aria-invalid": unref(isInvalid) ? "true" : void 0,
+					"aria-required": unref(isRequired) ? "true" : void 0,
+					"aria-readonly": unref(isReadonly) ? "true" : void 0,
+					name: __props.name,
+					accept: __props.accept,
+					capture: __props.capture,
+					webkitdirectory: __props.directory || void 0,
+					multiple: __props.multiple,
+					disabled: unref(isDisabled),
+					onClick: onInputClick,
+					onChange: onInputChange
+				}, null, 40, _hoisted_1),
+				createElementVNode("span", _hoisted_2, toDisplayString(liveMessage.value), 1),
+				hasCustomUi.value ? renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(defaultSlotProps.value)), void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["flex items-start", zoneGapClass.value])
+				}, [createElementVNode("div", {
+					"data-gr-file-upload-icon": "",
+					class: normalizeClass(["shrink-0 bg-[var(--gr-muted)] border border-[var(--gr-brd)] flex items-center justify-center", iconTileClass.value]),
+					"aria-hidden": "true"
+				}, [createVNode(GrIcon_default, {
+					class: "text-[var(--gr-muted-fg)]",
+					size: iconGlyphSize.value
+				}, {
+					default: withCtx(() => [createVNode(unref(arrow_up_default))]),
+					_: 1
+				}, 8, ["size"])], 2), createElementVNode("div", _hoisted_3, [
+					createElementVNode("div", {
+						"data-gr-file-upload-label": "",
+						class: normalizeClass(["font-700", labelClass.value])
+					}, [renderSlot(_ctx.$slots, "label", {}, () => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(defaultSlotProps.value)), () => [createTextVNode(toDisplayString(resolvedPlaceholder.value), 1)])])], 2),
+					_ctx.$slots.tip ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-file-upload-tip": "",
+						class: normalizeClass(["mt-1 text-[var(--gr-muted-fg)]", hintClass.value])
+					}, [renderSlot(_ctx.$slots, "tip")], 2)) : (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(["mt-1 text-[var(--gr-muted-fg)]", hintClass.value])
+					}, null, 2)),
+					__props.showFileList && lastFiles.value.length ? (openBlock(), createElementBlock("ul", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(lastFiles.value, (file) => {
+						return openBlock(), createElementBlock("li", {
+							key: unref(fileKey)(file),
+							"data-gr-file-upload-item": "",
+							class: normalizeClass(["flex items-center gap-2", hintClass.value])
+						}, [
+							unref(previewUrl)(file) ? (openBlock(), createElementBlock("img", {
+								key: 0,
+								"data-gr-file-upload-preview": "",
+								src: unref(previewUrl)(file),
+								alt: "",
+								class: "h-8 w-8 shrink-0 rounded-[var(--gr-radius-sm)] object-cover border border-[var(--gr-brd)]"
+							}, null, 8, _hoisted_5)) : createCommentVNode("", true),
+							createElementVNode("span", _hoisted_6, toDisplayString(file.name), 1),
+							createElementVNode("span", _hoisted_7, " · " + toDisplayString(Math.ceil(file.size / 1024)) + " KB", 1),
+							entryFor(file) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", {
+								"data-gr-file-upload-status": "",
+								"data-status": entryFor(file).status,
+								class: "text-[var(--gr-muted-fg)]"
+							}, [createTextVNode("· " + toDisplayString(statusTextByStatus.value[entryFor(file).status]), 1), entryFor(file).status === "uploading" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode("\xA0" + toDisplayString(Math.round(entryFor(file).percent)) + "%", 1)], 64)) : createCommentVNode("", true)], 8, _hoisted_8), entryFor(file).status === "uploading" ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								"data-gr-file-upload-abort-file": "",
+								type: "button",
+								class: "ml-auto text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)]",
+								"aria-label": unref(t)("gr.fileUpload.abortFile", "Cancel upload of {fileName}", { fileName: file.name }),
+								onClick: withModifiers(($event) => unref(abortFile)(file), ["stop"])
+							}, [createVNode(GrIcon_default, { size: iconGlyphSize.value }, {
+								default: withCtx(() => [createVNode(unref(x_default))]),
+								_: 1
+							}, 8, ["size"])], 8, _hoisted_9)) : entryFor(file).status === "error" && !unref(isDisabled) && !unref(isReadonly) ? (openBlock(), createElementBlock("button", {
+								key: 1,
+								"data-gr-file-upload-retry-file": "",
+								type: "button",
+								class: "ml-auto text-[var(--gr-danger-text)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)] underline",
+								"aria-label": unref(t)("gr.fileUpload.retryFile", "Retry {fileName}", { fileName: file.name }),
+								onClick: withModifiers(($event) => unref(retryFile)(file), ["stop"])
+							}, toDisplayString(unref(t)("gr.fileUpload.retry", "Retry upload")), 9, _hoisted_10)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true),
+							!unref(isDisabled) && !unref(isReadonly) ? (openBlock(), createElementBlock("button", {
+								key: 2,
+								"data-gr-file-upload-remove": "",
+								type: "button",
+								class: "ml-auto text-[var(--gr-muted-fg)] hover:text-[var(--gr-danger-text)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] rounded-[var(--gr-radius-sm)]",
+								"aria-label": unref(t)("gr.fileUpload.remove", "Remove {fileName}", { fileName: file.name }),
+								onClick: withModifiers(($event) => removeFile(file), ["stop"])
+							}, [createVNode(GrIcon_default, { size: iconGlyphSize.value }, {
+								default: withCtx(() => [createVNode(unref(x_default))]),
+								_: 1
+							}, 8, ["size"])], 8, _hoisted_11)) : createCommentVNode("", true)
+						], 2);
+					}), 128))])) : createCommentVNode("", true),
+					__props.showProgress || _ctx.$slots.progress ? renderSlot(_ctx.$slots, "progress", {
+						state: unref(state),
+						percent: unref(state).percent,
+						indeterminate: unref(state).phase === "uploading" && unref(state).indeterminate,
+						phase: unref(state).phase,
+						files: lastFiles.value,
+						abort,
+						retry,
+						fileEntries: unref(fileEntries),
+						retryFile: unref(retryFile),
+						abortFile: unref(abortFile)
+					}, () => [__props.showProgress ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-gr-file-upload-progress": "",
+						class: normalizeClass(["mt-3 transition-opacity duration-[var(--gr-duration-fast)]", progressVisible.value ? "opacity-100" : "opacity-0 pointer-events-none"]),
+						"aria-hidden": !progressVisible.value
+					}, [createElementVNode("div", _hoisted_13, [createVNode(GrProgressBar_default, {
+						value: progressPercent.value,
+						indeterminate: progressIndeterminate.value,
+						tone: effectiveProgressTone.value,
+						size: progressBarSize.value,
+						"aria-label": resolvedProgressLabel.value
+					}, null, 8, [
+						"value",
+						"indeterminate",
+						"tone",
+						"size",
+						"aria-label"
+					]), createElementVNode("span", {
+						"data-gr-file-upload-progress-text": "",
+						class: normalizeClass(["text-[var(--gr-muted-fg)] tabular-nums min-w-[3ch] text-right", progressTextClass.value])
+					}, toDisplayString(progressText.value), 3)])], 10, _hoisted_12)) : createCommentVNode("", true)], void 0, 3) : createCommentVNode("", true)
+				])], 2))
+			], 34);
+		};
+	}
+});
+//#endregion
+export { GrUploadAbortError as n, GrUploadHttpError as r, GrFileUpload_default as t };