@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrFileUpload/chunks/GrFileUpload-CnLgUGDF.js

@@ -1,592 +0,0 @@
-import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-SH0I--GW.js";
-import { l as runFileValidators, u as FileValidationError } from "../../../chunks/fileValidation-C3WFaWU2.js";
-import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-D9AWQLk2.js";
-import { t as arrow_up_default } from "../../../chunks/arrow-up-C_G4jg8M.js";
-import { t as GrProgressBar_default } from "../../GrProgressBar/chunks/GrProgressBar-Dqg4Fj9S.js";
-import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, reactive, ref, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
-//#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/uploadState.ts
-var GR_UPLOAD_STATE_IDLE = Object.freeze({
-	phase: "idle",
-	percent: 0,
-	indeterminate: false,
-	loaded: 0,
-	total: 0
-});
-//#endregion
-//#region src/components/GrFileUpload/GrFileUpload.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"role",
-	"tabindex",
-	"aria-disabled"
-];
-var _hoisted_2 = [
-	"name",
-	"multiple",
-	"disabled"
-];
-var _hoisted_3 = {
-	key: 1,
-	class: "flex items-start gap-4"
-};
-var _hoisted_4 = {
-	"data-gr-file-upload-icon": "",
-	class: "h-12 w-12 shrink-0 rounded-[12px] bg-[var(--gr-muted)] border border-[var(--gr-brd)] flex items-center justify-center",
-	"aria-hidden": "true"
-};
-var _hoisted_5 = { class: "min-w-0" };
-var _hoisted_6 = {
-	"data-gr-file-upload-label": "",
-	class: "text-[14px] font-700"
-};
-var _hoisted_7 = {
-	key: 0,
-	"data-gr-file-upload-tip": "",
-	class: "mt-1 text-[13px] text-[var(--gr-muted-fg)]"
-};
-var _hoisted_8 = {
-	key: 1,
-	class: "mt-1 text-[13px] text-[var(--gr-muted-fg)]"
-};
-var _hoisted_9 = {
-	key: 2,
-	"data-gr-file-upload-list": "",
-	class: "mt-3 space-y-1"
-};
-var _hoisted_10 = { class: "font-600" };
-var _hoisted_11 = { class: "text-[var(--gr-muted-fg)]" };
-var _hoisted_12 = ["aria-hidden"];
-var _hoisted_13 = { class: "flex items-center gap-2" };
-var _hoisted_14 = {
-	"data-gr-file-upload-progress-text": "",
-	class: "text-[12px] text-[var(--gr-muted-fg)] tabular-nums min-w-[3ch] text-right"
-};
-//#endregion
-//#region src/components/GrFileUpload/GrFileUpload.vue
-var GrFileUpload_default = /* @__PURE__ */ defineComponent({
-	__name: "GrFileUpload",
-	props: {
-		action: { default: void 0 },
-		request: {
-			type: Function,
-			default: void 0
-		},
-		name: { default: "file" },
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		limit: { default: void 0 },
-		onExceed: {
-			type: Function,
-			default: void 0
-		},
-		beforeUpload: {
-			type: Function,
-			default: void 0
-		},
-		validators: { default: void 0 },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		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 }
-	},
-	emits: [
-		"success",
-		"error",
-		"progress",
-		"change",
-		"stateChange"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const slots = useSlots();
-		const { t } = useGranularityTranslations();
-		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 flattenSlotNodes(nodes) {
-			const out = [];
-			for (const node of nodes) {
-				if (node.type === Fragment && Array.isArray(node.children)) {
-					out.push(...flattenSlotNodes(node.children));
-					continue;
-				}
-				out.push(node);
-			}
-			return out;
-		}
-		function isWhitespaceTextNode(node) {
-			if (node.type !== Text) return false;
-			return typeof node.children === "string" && node.children.trim().length === 0;
-		}
-		function slotIsTextOnly(nodes) {
-			const meaningful = flattenSlotNodes(nodes).filter((node) => node.type !== Comment && !isWhitespaceTextNode(node));
-			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 isOver = ref(false);
-		let overCounter = 0;
-		const lastFiles = ref([]);
-		const state = reactive({ ...GR_UPLOAD_STATE_IDLE });
-		let activeController = null;
-		let hideSuccessTimer = null;
-		function clearHideSuccessTimer() {
-			if (hideSuccessTimer !== null) {
-				clearTimeout(hideSuccessTimer);
-				hideSuccessTimer = null;
-			}
-		}
-		function assignState(next) {
-			for (const key of Object.keys(state)) delete state[key];
-			Object.assign(state, next);
-			emit("stateChange", state);
-		}
-		function setStateIdle() {
-			assignState({ ...GR_UPLOAD_STATE_IDLE });
-		}
-		function setStateUploading(info) {
-			assignState({
-				phase: "uploading",
-				percent: info?.percent ?? 0,
-				indeterminate: info?.indeterminate ?? true,
-				loaded: info?.loaded ?? 0,
-				total: info?.total ?? 0
-			});
-		}
-		function setStateSuccess(info) {
-			assignState({
-				phase: "success",
-				percent: 100,
-				indeterminate: false,
-				loaded: info.loaded,
-				total: info.total
-			});
-		}
-		function setStateError(error) {
-			const prev = state;
-			assignState({
-				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 handleProgress(info) {
-			if (state.phase !== "uploading") return;
-			assignState({
-				phase: "uploading",
-				percent: info.percent,
-				indeterminate: info.indeterminate,
-				loaded: info.loaded,
-				total: info.total
-			});
-			emit("progress", info.percent, info);
-		}
-		const tabIndex = computed(() => props.disabled ? -1 : 0);
-		const hiddenInputStyle = {
-			position: "fixed",
-			top: "-9999px",
-			left: "-9999px",
-			width: "1px",
-			height: "1px",
-			opacity: "0",
-			overflow: "hidden",
-			pointerEvents: "none"
-		};
-		function setOver(next) {
-			if (isOver.value === next) return;
-			isOver.value = next;
-		}
-		function openDialog() {
-			if (props.disabled) return;
-			inputRef.value?.click();
-		}
-		function abort() {
-			activeController?.abort();
-			activeController = null;
-		}
-		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";
-		}
-		async function handleFiles(files, source = "input") {
-			if (props.disabled) return;
-			if (!files.length) return;
-			const normalizedLimit = normalizeLimit(props.limit);
-			if (props.multiple && normalizedLimit && files.length > normalizedLimit) {
-				props.onExceed?.(files, normalizedLimit);
-				emit("error", /* @__PURE__ */ new Error(`Too many files selected, limit=${normalizedLimit}`));
-				return;
-			}
-			const { files: valid, issues } = await runFileValidators(files, props.validators ?? [], {
-				source,
-				multiple: props.multiple
-			});
-			if (issues.length > 0) {
-				emit("error", new FileValidationError(issues, valid));
-				return;
-			}
-			if (!valid.length) return;
-			lastFiles.value = valid;
-			const before = await runBeforeUpload(valid);
-			if (before !== "ok") {
-				emit("error", before.reason);
-				return;
-			}
-			let extraData;
-			try {
-				extraData = props.uploadExtraData?.(valid);
-			} catch (error) {
-				emit("error", error);
-				return;
-			}
-			abort();
-			clearHideSuccessTimer();
-			const controller = new AbortController();
-			activeController = controller;
-			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;
-				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) hideSuccessTimer = setTimeout(() => {
-					if (state.phase === "success") setStateIdle();
-					hideSuccessTimer = null;
-				}, props.hideProgressOnSuccess);
-			} catch (error) {
-				if (error instanceof GrUploadAbortError) setStateIdle();
-				else setStateError(error);
-				emit("error", error);
-			} finally {
-				if (activeController === controller) activeController = null;
-			}
-		}
-		function onDragEnter(event) {
-			if (hasCustomUi.value) return;
-			if (props.disabled) return;
-			event.preventDefault();
-			overCounter += 1;
-			setOver(true);
-		}
-		function onDragOver(event) {
-			if (hasCustomUi.value) return;
-			if (props.disabled) return;
-			event.preventDefault();
-			if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
-		}
-		function onDragLeave(event) {
-			if (hasCustomUi.value) return;
-			if (props.disabled) return;
-			event.preventDefault();
-			overCounter = Math.max(0, overCounter - 1);
-			if (overCounter === 0) setOver(false);
-		}
-		function onDrop(event) {
-			if (hasCustomUi.value) return;
-			if (props.disabled) return;
-			event.preventDefault();
-			overCounter = 0;
-			setOver(false);
-			handleFiles(event.dataTransfer?.files ? Array.prototype.slice.call(event.dataTransfer.files) : [], "drop");
-		}
-		async function onInputChange(event) {
-			if (props.disabled) 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 onKeydown(event) {
-			if (hasCustomUi.value) return;
-			if (props.disabled) return;
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				openDialog();
-			}
-		}
-		function onRootClick() {
-			if (hasCustomUi.value) return;
-			openDialog();
-		}
-		function onRootKeydown(event) {
-			if (hasCustomUi.value) return;
-			onKeydown(event);
-		}
-		const effectiveProgressTone = computed(() => {
-			if (state.phase === "error") return "danger";
-			if (state.phase === "success") return "success";
-			return props.progressTone;
-		});
-		const progressVisible = computed(() => state.phase !== "idle");
-		const progressPercent = computed(() => state.phase === "uploading" && state.indeterminate ? 0 : state.percent);
-		const progressText = computed(() => {
-			if (state.phase === "uploading" && state.indeterminate) return "";
-			return `${Math.round(progressPercent.value)}%`;
-		});
-		__expose({
-			uploadFiles: handleFiles,
-			abort,
-			openDialog,
-			state
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				"data-gr-file-upload": "",
-				role: hasCustomUi.value ? void 0 : "button",
-				tabindex: hasCustomUi.value ? void 0 : tabIndex.value,
-				"aria-disabled": hasCustomUi.value ? void 0 : __props.disabled ? "true" : "false",
-				class: normalizeClass(hasCustomUi.value ? "inline-block" : [
-					"relative w-full rounded-[var(--gr-radius-lg)] border border-dashed border-[var(--gr-brd)] bg-[var(--gr-card)] px-5 py-6 outline-none transition",
-					__props.disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:bg-[var(--gr-muted)] focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--gr-bg)]",
-					isOver.value && !__props.disabled ? "border-[var(--gr-ring)] bg-[var(--gr-muted)]" : ""
-				]),
-				onClick: onRootClick,
-				onKeydown: onRootKeydown,
-				onDragenter: onDragEnter,
-				onDragover: onDragOver,
-				onDragleave: onDragLeave,
-				onDrop
-			}, [createElementVNode("input", {
-				ref_key: "inputRef",
-				ref: inputRef,
-				"data-gr-file-upload-input": "",
-				style: hiddenInputStyle,
-				type: "file",
-				tabindex: "-1",
-				"aria-hidden": "true",
-				name: __props.name,
-				multiple: __props.multiple,
-				disabled: __props.disabled,
-				onChange: onInputChange
-			}, null, 40, _hoisted_2), hasCustomUi.value ? renderSlot(_ctx.$slots, "default", {
-				openDialog,
-				abort,
-				disabled: __props.disabled,
-				files: lastFiles.value,
-				isOver: isOver.value,
-				state
-			}, void 0, void 0, 0) : (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createVNode(GrIcon_default, { class: "h-6 w-6 text-[var(--gr-muted-fg)]" }, {
-				default: withCtx(() => [createVNode(unref(arrow_up_default))]),
-				_: 1
-			})]), createElementVNode("div", _hoisted_5, [
-				createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "label", {}, () => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(resolvedPlaceholder.value), 1)])])]),
-				_ctx.$slots.tip ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "tip")])) : (openBlock(), createElementBlock("div", _hoisted_8)),
-				__props.showFileList && lastFiles.value.length ? (openBlock(), createElementBlock("ul", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(lastFiles.value, (file) => {
-					return openBlock(), createElementBlock("li", {
-						key: file.name,
-						"data-gr-file-upload-item": "",
-						class: "text-[13px]"
-					}, [createElementVNode("span", _hoisted_10, toDisplayString(file.name), 1), createElementVNode("span", _hoisted_11, " · " + toDisplayString(Math.ceil(file.size / 1024)) + " KB", 1)]);
-				}), 128))])) : createCommentVNode("", true),
-				__props.showProgress || _ctx.$slots.progress ? renderSlot(_ctx.$slots, "progress", {
-					state,
-					percent: state.percent,
-					indeterminate: state.phase === "uploading" && state.indeterminate,
-					phase: state.phase,
-					files: lastFiles.value,
-					abort
-				}, () => [__props.showProgress ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					"data-gr-file-upload-progress": "",
-					class: normalizeClass(["mt-3 transition-opacity duration-150", progressVisible.value ? "opacity-100" : "opacity-0 pointer-events-none"]),
-					"aria-hidden": !progressVisible.value
-				}, [createElementVNode("div", _hoisted_13, [createVNode(GrProgressBar_default, {
-					value: progressPercent.value,
-					tone: effectiveProgressTone.value,
-					"aria-label": resolvedProgressLabel.value
-				}, null, 8, [
-					"value",
-					"tone",
-					"aria-label"
-				]), createElementVNode("span", _hoisted_14, toDisplayString(progressText.value), 1)])], 10, _hoisted_12)) : createCommentVNode("", true)], void 0, 3) : createCommentVNode("", true)
-			])]))], 42, _hoisted_1);
-		};
-	}
-});
-//#endregion
-export { GrUploadHttpError as i, GR_UPLOAD_STATE_IDLE as n, GrUploadAbortError as r, GrFileUpload_default as t };