import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { n as Button_default } from "./button-B9CnnuTu.js";
import { o as CardContent_default, s as Card_default } from "./card-X74FuL7B.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx } from "vue";
import { Upload, X } from "@lucide/vue";
//#region src/components/compositions/elements/file/UploadFile.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-element-name"];
var _hoisted_2 = [
	"accept",
	"multiple",
	"disabled",
	"required",
	"name"
];
var _hoisted_3 = {
	key: 0,
	class: "flex flex-col gap-2"
};
var _hoisted_4 = { class: "flex flex-col" };
var _hoisted_5 = { class: "text-sm font-medium" };
var _hoisted_6 = { class: "text-xs text-muted-foreground" };
var UploadFile_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "UploadFile",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		placeholder: {},
		accept: {},
		acceptedFileTypes: { default: () => [] },
		multiple: { type: Boolean },
		maxFileSize: {},
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven file-upload composition.
		*
		* Visible Button triggers a hidden `<input type="file">`. Selected files
		* render as info chips with name, formatted size and a Remove control.
		* Emits a `File` (single) or `File[]` (multiple).
		*
		*   <UploadFile v-model="avatar" label="Avatar" accept="image/*" />
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		const fileInput = ref(null);
		const files = ref([]);
		watch(() => model.value, (next) => {
			if (next instanceof File) files.value = [next];
			else if (Array.isArray(next) && next.every((f) => f instanceof File)) files.value = next;
			else files.value = [];
		}, { immediate: true });
		const accept = computed(() => {
			if (props.accept) return props.accept;
			const list = props.acceptedFileTypes;
			return Array.isArray(list) && list.length ? list.join(",") : "";
		});
		const maxBytes = computed(() => props.maxFileSize);
		function openPicker() {
			fileInput.value?.click();
		}
		function emitFiles() {
			if (props.multiple) model.value = files.value.slice();
			else model.value = files.value[0] ?? null;
		}
		function onChange(event) {
			const target = event.target;
			const incoming = target.files ? Array.from(target.files) : [];
			if (!incoming.length) return;
			if (maxBytes.value ? incoming.find((f) => f.size > maxBytes.value) : void 0) {
				emitFiles();
				return;
			}
			if (props.multiple) files.value = [...files.value, ...incoming];
			else files.value = [incoming[0]];
			emitFiles();
			target.value = "";
		}
		function removeFile(index) {
			files.value.splice(index, 1);
			emitFiles();
		}
		function formatBytes(bytes) {
			if (bytes < 1024) return `${bytes} B`;
			if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
			return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
		}
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				"help-text": __props.helpText,
				errors: __props.errors
			}, {
				default: withCtx(() => [createElementVNode("div", { "data-element-name": __props.name ?? void 0 }, [createVNode(unref(Button_default), {
					type: "button",
					variant: "outline",
					disabled: __props.disabled || __props.readonly,
					"data-testid": "upload-trigger",
					onClick: openPicker
				}, {
					default: withCtx(() => [createVNode(unref(Upload), { class: "mr-2 size-4" }), createElementVNode("span", null, toDisplayString(__props.placeholder ?? (__props.multiple ? "Add files" : "Choose file")), 1)]),
					_: 1
				}, 8, ["disabled"]), createElementVNode("input", {
					ref_key: "fileInput",
					ref: fileInput,
					type: "file",
					class: "sr-only",
					accept: accept.value || void 0,
					multiple: __props.multiple,
					disabled: __props.disabled || __props.readonly,
					required: __props.required,
					name: __props.name ?? void 0,
					"data-testid": "upload-input",
					onChange
				}, null, 40, _hoisted_2)], 8, _hoisted_1), files.value.length ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(files.value, (file, i) => {
					return openBlock(), createBlock(unref(Card_default), {
						key: `${file.name}-${i}`,
						class: "border"
					}, {
						default: withCtx(() => [createVNode(unref(CardContent_default), { class: "flex items-center justify-between gap-3 py-3" }, {
							default: withCtx(() => [createElementVNode("div", _hoisted_4, [createElementVNode("span", _hoisted_5, toDisplayString(file.name), 1), createElementVNode("span", _hoisted_6, toDisplayString(formatBytes(file.size)), 1)]), createVNode(unref(Button_default), {
								type: "button",
								variant: "ghost",
								size: "icon-sm",
								"aria-label": "Remove file",
								disabled: __props.disabled || __props.readonly,
								"data-testid": "upload-remove",
								onClick: ($event) => removeFile(i)
							}, {
								default: withCtx(() => [createVNode(unref(X), { class: "size-4" })]),
								_: 1
							}, 8, ["disabled", "onClick"])]),
							_: 2
						}, 1024)]),
						_: 2
					}, 1024);
				}), 128))])) : createCommentVNode("", true)]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/file/UploadFile.vue
var UploadFile_exports = /* @__PURE__ */ __exportAll({ default: () => UploadFile_default });
var UploadFile_default = UploadFile_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { UploadFile_exports as n, UploadFile_default as t };

//# sourceMappingURL=UploadFile-C1ku0FPT.js.map