bootstrap-vue-next 0.44.0 → 0.44.2

package/dist/BFormFile-BEHeBj6q.js

@@ -0,0 +1,418 @@
+require("./chunk-CoQrYLCe.js");
+const require_dist = require("./dist-B_c893QG.js");
+const require_dom = require("./dom-Bs6DzM72.js");
+const require_useId = require("./useId-DTrBK9CE.js");
+const require_useDefaults = require("./useDefaults-DK6Y9lar.js");
+const require_useStateClass = require("./useStateClass-Cnvy2Hnm.js");
+let vue = require("vue");
+//#region src/components/BFormFile/BFormFile.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = ["aria-disabled"];
+var _hoisted_3 = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-labelledby"
+];
+var _hoisted_4 = { class: "b-form-file-text" };
+var _hoisted_5 = { key: 0 };
+var _hoisted_6 = {
+	key: 1,
+	class: "text-muted"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "b-form-file-drag-overlay"
+};
+var _hoisted_8 = { class: "b-form-file-drag-text" };
+var _hoisted_9 = [
+	"name",
+	"form",
+	"multiple",
+	"disabled",
+	"required",
+	"accept",
+	"capture",
+	"directory",
+	"webkitdirectory"
+];
+var _hoisted_10 = [
+	"id",
+	"form",
+	"name",
+	"multiple",
+	"disabled",
+	"capture",
+	"accept",
+	"required",
+	"aria-label",
+	"aria-labelledby",
+	"aria-required",
+	"directory",
+	"webkitdirectory"
+];
+var _hoisted_11 = {
+	key: 3,
+	class: "b-form-file-display mt-2"
+};
+var _hoisted_12 = {
+	key: 0,
+	class: "small text-muted"
+};
+var _hoisted_13 = {
+	key: 1,
+	class: "small text-muted"
+};
+var _hoisted_14 = {
+	key: 4,
+	class: "visually-hidden",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+};
+//#endregion
+//#region src/components/BFormFile/BFormFile.vue
+var BFormFile_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "BFormFile",
+	props: /* @__PURE__ */ (0, vue.mergeModels)({
+		ariaLabel: { default: void 0 },
+		ariaLabelledby: { default: void 0 },
+		accept: { default: "" },
+		autofocus: {
+			type: Boolean,
+			default: false
+		},
+		browseText: { default: void 0 },
+		capture: { default: void 0 },
+		directory: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dropPlaceholder: { default: void 0 },
+		fileNameFormatter: {
+			type: Function,
+			default: void 0
+		},
+		form: { default: void 0 },
+		id: { default: void 0 },
+		label: { default: "" },
+		labelClass: { default: void 0 },
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		name: { default: void 0 },
+		noButton: {
+			type: Boolean,
+			default: false
+		},
+		noDrop: {
+			type: Boolean,
+			default: false
+		},
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: { default: "No file chosen" },
+		required: {
+			type: Boolean,
+			default: false
+		},
+		showFileNames: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: void 0 },
+		state: {
+			type: [Boolean, null],
+			default: null
+		}
+	}, {
+		"modelValue": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ (0, vue.mergeModels)(["change"], ["update:modelValue"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = require_useDefaults.useDefaults(__props, "BFormFile");
+		const slots = (0, vue.useSlots)();
+		const emit = __emit;
+		const modelValue = (0, vue.useModel)(__props, "modelValue");
+		const attrs = (0, vue.useAttrs)();
+		const processedAttrs = (0, vue.computed)(() => {
+			if (props.plain) return {
+				rootAttrs: {},
+				dropZoneAttrs: {},
+				inputAttrs: attrs
+			};
+			const { class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs } = attrs;
+			const rootAttrs = {};
+			const dropZoneAttrs = {};
+			if (rootClass !== void 0) rootAttrs.class = rootClass;
+			if (rootStyle !== void 0) rootAttrs.style = rootStyle;
+			if (dropZoneTitle !== void 0) dropZoneAttrs.title = dropZoneTitle;
+			return {
+				rootAttrs,
+				dropZoneAttrs,
+				inputAttrs
+			};
+		});
+		const computedId = require_useId.useId(() => props.id);
+		const stateClass = require_useStateClass.useStateClass(() => props.state);
+		const rootRef = (0, vue.useTemplateRef)("rootRef");
+		const dropZoneRef = (0, vue.useTemplateRef)("dropZoneRef");
+		const browseButtonRef = (0, vue.useTemplateRef)("browseButtonRef");
+		const plainInputRef = (0, vue.useTemplateRef)("plainInputRef");
+		const customInputRef = (0, vue.useTemplateRef)("customInputRef");
+		const computedAccept = (0, vue.computed)(() => typeof props.accept === "string" ? props.accept : props.accept.join(","));
+		const { open, reset: resetDialog, onChange: onDialogChange } = require_dist.useFileDialog({
+			accept: computedAccept.value,
+			multiple: props.multiple || props.directory,
+			directory: props.directory,
+			input: customInputRef
+		});
+		const { isOverDropZone } = require_dist.useDropZone(dropZoneRef, {
+			onDrop: (files) => {
+				if (files && !props.noDrop) handleFiles(files);
+			},
+			multiple: props.multiple || props.directory
+		});
+		const hasLabelSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots.label));
+		const hasPlaceholderSlot = (0, vue.computed)(() => !require_dom.isEmptySlot(slots.placeholder));
+		const computedClasses = (0, vue.computed)(() => [stateClass.value, { [`form-control-${props.size}`]: props.size !== void 0 }]);
+		const computedPlainClasses = (0, vue.computed)(() => [
+			"form-control",
+			stateClass.value,
+			{ [`form-control-${props.size}`]: props.size !== void 0 }
+		]);
+		const internalFiles = (0, vue.ref)([]);
+		const selectedFiles = (0, vue.computed)(() => internalFiles.value);
+		const hasFiles = (0, vue.computed)(() => selectedFiles.value.length > 0);
+		const fileNames = (0, vue.computed)(() => selectedFiles.value.map((file) => file.name));
+		const formattedFileNames = (0, vue.computed)(() => {
+			if (!hasFiles.value) return "";
+			if (props.fileNameFormatter) return props.fileNameFormatter(selectedFiles.value);
+			const names = fileNames.value;
+			if (names.length === 1) return names[0];
+			return `${names.length} files selected`;
+		});
+		const showExternalDisplay = (0, vue.computed)(() => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder));
+		const ariaLiveMessage = (0, vue.computed)(() => {
+			if (!hasFiles.value) return "";
+			const count = selectedFiles.value.length;
+			if (count === 1) return `File selected: ${selectedFiles.value[0]?.name}`;
+			return `${count} files selected`;
+		});
+		const effectiveBrowseText = (0, vue.computed)(() => props.browseText ?? "Browse");
+		const effectiveDropPlaceholder = (0, vue.computed)(() => props.dropPlaceholder ?? "Drop files here...");
+		const isFileAccepted = (file) => {
+			if (!computedAccept.value) return true;
+			return computedAccept.value.split(",").map((type) => type.trim()).some((acceptType) => {
+				if (acceptType.startsWith(".")) return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+				if (!acceptType.includes("*")) return file.type === acceptType;
+				const slashIndex = acceptType.indexOf("/");
+				if (slashIndex === -1) return false;
+				const category = acceptType.slice(0, slashIndex);
+				if (category === "*") return true;
+				return file.type.startsWith(`${category}/`);
+			});
+		};
+		const handleFiles = (files, nativeEvent) => {
+			let fileArray = [];
+			if (nativeEvent) {
+				const input = nativeEvent.target;
+				fileArray = input.files ? Array.from(input.files) : [];
+			} else {
+				fileArray = Array.from(files).filter((file) => isFileAccepted(file));
+				if (customInputRef.value && typeof DataTransfer !== "undefined") try {
+					const dataTransfer = new DataTransfer();
+					fileArray.forEach((file) => dataTransfer.items.add(file));
+					customInputRef.value.files = dataTransfer.files;
+				} catch {}
+			}
+			internalFiles.value = fileArray;
+			if (fileArray.length === 0) modelValue.value = null;
+			else if (props.directory || props.multiple) modelValue.value = fileArray;
+			else {
+				const [firstFile] = fileArray;
+				if (firstFile) modelValue.value = firstFile;
+			}
+			(0, vue.nextTick)(() => {
+				if (nativeEvent) emit("change", nativeEvent);
+				else {
+					const changeEvent = new CustomEvent("change", {
+						bubbles: true,
+						cancelable: false,
+						detail: {
+							files: fileArray,
+							target: { files: fileArray }
+						}
+					});
+					Object.defineProperty(changeEvent, "files", {
+						value: fileArray,
+						enumerable: true
+					});
+					emit("change", changeEvent);
+				}
+			});
+		};
+		const openFileDialog = () => {
+			if (!props.disabled) open({
+				accept: computedAccept.value,
+				multiple: props.multiple || props.directory,
+				directory: props.directory
+			});
+		};
+		const handleControlClick = () => {
+			if (!props.disabled) openFileDialog();
+		};
+		const onPlainChange = (e) => {
+			const input = e.target;
+			if (input.files) handleFiles(input.files, e);
+		};
+		onDialogChange((files) => {
+			if (files) handleFiles(files);
+		});
+		const reset = () => {
+			internalFiles.value = [];
+			modelValue.value = null;
+			resetDialog();
+			if (plainInputRef.value) plainInputRef.value.value = "";
+		};
+		const focus = () => {
+			if (props.plain) plainInputRef.value?.focus();
+			else browseButtonRef.value?.focus();
+		};
+		const blur = () => {
+			if (props.plain) plainInputRef.value?.blur();
+			else browseButtonRef.value?.blur();
+		};
+		(0, vue.onMounted)(() => {
+			if (props.autofocus) (0, vue.nextTick)(() => {
+				focus();
+			});
+		});
+		(0, vue.watch)(() => props.autofocus, (autofocus) => {
+			if (autofocus) focus();
+		});
+		(0, vue.watch)(modelValue, (newValue) => {
+			if (newValue === null) {
+				internalFiles.value = [];
+				if (plainInputRef.value) plainInputRef.value.value = "";
+			} else if (Array.isArray(newValue)) internalFiles.value = newValue;
+			else internalFiles.value = [newValue];
+		});
+		__expose({
+			blur,
+			element: (0, vue.computed)(() => props.plain ? plainInputRef.value : browseButtonRef.value),
+			focus,
+			reset
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+				ref_key: "rootRef",
+				ref: rootRef
+			}, processedAttrs.value.rootAttrs, { class: "b-form-file-root" }), [
+				hasLabelSlot.value || (0, vue.unref)(props).label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", {
+					key: 0,
+					class: (0, vue.normalizeClass)(["form-label", (0, vue.unref)(props).labelClass]),
+					for: (0, vue.unref)(computedId)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "label", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).label), 1)])], 10, _hoisted_1)) : (0, vue.createCommentVNode)("", true),
+				!(0, vue.unref)(props).plain ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", (0, vue.mergeProps)({
+					key: 1,
+					ref_key: "dropZoneRef",
+					ref: dropZoneRef
+				}, processedAttrs.value.dropZoneAttrs, { class: ["b-form-file-wrapper", {
+					"b-form-file-dragging": (0, vue.unref)(isOverDropZone) && !(0, vue.unref)(props).noDrop,
+					"b-form-file-has-files": hasFiles.value
+				}] }), [
+					(0, vue.createElementVNode)("div", {
+						class: (0, vue.normalizeClass)(["b-form-file-control", computedClasses.value]),
+						"aria-disabled": (0, vue.unref)(props).disabled,
+						onClick: handleControlClick
+					}, [!(0, vue.unref)(props).noButton ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+						key: 0,
+						id: (0, vue.unref)(computedId),
+						ref_key: "browseButtonRef",
+						ref: browseButtonRef,
+						type: "button",
+						class: "b-form-file-button",
+						disabled: (0, vue.unref)(props).disabled,
+						"aria-label": (0, vue.unref)(props).ariaLabel,
+						"aria-labelledby": (0, vue.unref)(props).ariaLabelledby,
+						onClick: (0, vue.withModifiers)(openFileDialog, ["stop"])
+					}, (0, vue.toDisplayString)(effectiveBrowseText.value), 9, _hoisted_3)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_4, [(0, vue.renderSlot)(_ctx.$slots, "file-name", {
+						files: selectedFiles.value,
+						names: fileNames.value
+					}, () => [hasFiles.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, (0, vue.toDisplayString)(formattedFileNames.value), 1)) : hasPlaceholderSlot.value || (0, vue.unref)(props).placeholder ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "placeholder", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).placeholder), 1)])])) : (0, vue.createCommentVNode)("", true)])])], 10, _hoisted_2),
+					(0, vue.unref)(isOverDropZone) && !(0, vue.unref)(props).noDrop ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_7, [(0, vue.renderSlot)(_ctx.$slots, "drop-placeholder", {}, () => [(0, vue.createElementVNode)("div", _hoisted_8, (0, vue.toDisplayString)(effectiveDropPlaceholder.value), 1)])])) : (0, vue.createCommentVNode)("", true),
+					(0, vue.createElementVNode)("input", (0, vue.mergeProps)({
+						ref_key: "customInputRef",
+						ref: customInputRef
+					}, processedAttrs.value.inputAttrs, {
+						type: "file",
+						name: (0, vue.unref)(props).name,
+						form: (0, vue.unref)(props).form,
+						multiple: (0, vue.unref)(props).multiple || (0, vue.unref)(props).directory,
+						disabled: (0, vue.unref)(props).disabled,
+						required: (0, vue.unref)(props).required,
+						accept: computedAccept.value || void 0,
+						capture: (0, vue.unref)(props).capture,
+						directory: (0, vue.unref)(props).directory || void 0,
+						webkitdirectory: (0, vue.unref)(props).directory || void 0,
+						tabindex: "-1",
+						"aria-hidden": "true",
+						style: {
+							"position": "absolute",
+							"z-index": "-5",
+							"width": "0",
+							"height": "0",
+							"opacity": "0",
+							"overflow": "hidden",
+							"pointer-events": "none"
+						}
+					}), null, 16, _hoisted_9)
+				], 16)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("input", (0, vue.mergeProps)({
+					key: 2,
+					id: (0, vue.unref)(computedId),
+					ref_key: "plainInputRef",
+					ref: plainInputRef
+				}, processedAttrs.value.inputAttrs, {
+					type: "file",
+					class: computedPlainClasses.value,
+					form: (0, vue.unref)(props).form,
+					name: (0, vue.unref)(props).name,
+					multiple: (0, vue.unref)(props).multiple || (0, vue.unref)(props).directory,
+					disabled: (0, vue.unref)(props).disabled,
+					capture: (0, vue.unref)(props).capture,
+					accept: computedAccept.value || void 0,
+					required: (0, vue.unref)(props).required || void 0,
+					"aria-label": (0, vue.unref)(props).ariaLabel,
+					"aria-labelledby": (0, vue.unref)(props).ariaLabelledby,
+					"aria-required": (0, vue.unref)(props).required || void 0,
+					directory: (0, vue.unref)(props).directory || void 0,
+					webkitdirectory: (0, vue.unref)(props).directory || void 0,
+					onChange: onPlainChange
+				}), null, 16, _hoisted_10)),
+				showExternalDisplay.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_11, [(0, vue.renderSlot)(_ctx.$slots, "file-name", {
+					files: selectedFiles.value,
+					names: fileNames.value
+				}, () => [hasFiles.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_12, (0, vue.toDisplayString)(formattedFileNames.value), 1)) : hasPlaceholderSlot.value || (0, vue.unref)(props).placeholder ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_13, [(0, vue.renderSlot)(_ctx.$slots, "placeholder", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(props).placeholder), 1)])])) : (0, vue.createCommentVNode)("", true)])])) : (0, vue.createCommentVNode)("", true),
+				!(0, vue.unref)(props).plain ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_14, (0, vue.toDisplayString)(ariaLiveMessage.value), 1)) : (0, vue.createCommentVNode)("", true)
+			], 16);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "BFormFile_default", {
+	enumerable: true,
+	get: function() {
+		return BFormFile_default;
+	}
+});
+
+//# sourceMappingURL=BFormFile-BEHeBj6q.js.map

package/dist/BFormFile-BEHeBj6q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BFormFile-BEHeBj6q.js","names":[],"sources":["../src/components/BFormFile/BFormFile.vue","../src/components/BFormFile/BFormFile.vue"],"sourcesContent":["<template>\n  <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n    <!-- Optional label -->\n    <label\n      v-if=\"hasLabelSlot || props.label\"\n      class=\"form-label\"\n      :class=\"props.labelClass\"\n      :for=\"computedId\"\n    >\n      <slot name=\"label\">\n        {{ props.label }}\n      </slot>\n    </label>\n\n    <!-- Drop zone wrapper -->\n    <div\n      v-if=\"!props.plain\"\n      ref=\"dropZoneRef\"\n      v-bind=\"processedAttrs.dropZoneAttrs\"\n      class=\"b-form-file-wrapper\"\n      :class=\"{\n        'b-form-file-dragging': isOverDropZone && !props.noDrop,\n        'b-form-file-has-files': hasFiles,\n      }\"\n    >\n      <!-- Custom file control (mimics Bootstrap native input) -->\n      <div\n        class=\"b-form-file-control\"\n        :class=\"computedClasses\"\n        :aria-disabled=\"props.disabled\"\n        @click=\"handleControlClick\"\n      >\n        <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n        <button\n          v-if=\"!props.noButton\"\n          :id=\"computedId\"\n          ref=\"browseButtonRef\"\n          type=\"button\"\n          class=\"b-form-file-button\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"props.ariaLabel\"\n          :aria-labelledby=\"props.ariaLabelledby\"\n          @click.stop=\"openFileDialog\"\n        >\n          {{ effectiveBrowseText }}\n        </button>\n\n        <!-- File name display -->\n        <div class=\"b-form-file-text\">\n          <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n            <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n            <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n              <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n            </span>\n          </slot>\n        </div>\n      </div>\n\n      <!-- Drag overlay (only shown when dragging) -->\n      <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n        <slot name=\"drop-placeholder\">\n          <div class=\"b-form-file-drag-text\">\n            {{ effectiveDropPlaceholder }}\n          </div>\n        </slot>\n      </div>\n\n      <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n      <input\n        ref=\"customInputRef\"\n        v-bind=\"processedAttrs.inputAttrs\"\n        type=\"file\"\n        :name=\"props.name\"\n        :form=\"props.form\"\n        :multiple=\"props.multiple || props.directory\"\n        :disabled=\"props.disabled\"\n        :required=\"props.required\"\n        :accept=\"computedAccept || undefined\"\n        :capture=\"props.capture\"\n        :directory=\"props.directory || undefined\"\n        :webkitdirectory=\"props.directory || undefined\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        style=\"\n          position: absolute;\n          z-index: -5;\n          width: 0;\n          height: 0;\n          opacity: 0;\n          overflow: hidden;\n          pointer-events: none;\n        \"\n      />\n    </div>\n\n    <!-- Plain mode - simple native input -->\n    <input\n      v-else\n      :id=\"computedId\"\n      ref=\"plainInputRef\"\n      v-bind=\"processedAttrs.inputAttrs\"\n      type=\"file\"\n      :class=\"computedPlainClasses\"\n      :form=\"props.form\"\n      :name=\"props.name\"\n      :multiple=\"props.multiple || props.directory\"\n      :disabled=\"props.disabled\"\n      :capture=\"props.capture\"\n      :accept=\"computedAccept || undefined\"\n      :required=\"props.required || undefined\"\n      :aria-label=\"props.ariaLabel\"\n      :aria-labelledby=\"props.ariaLabelledby\"\n      :aria-required=\"props.required || undefined\"\n      :directory=\"props.directory || undefined\"\n      :webkitdirectory=\"props.directory || undefined\"\n      @change=\"onPlainChange\"\n    />\n\n    <!-- External file display (when showFileNames is true and not plain) -->\n    <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n      <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n        <div v-if=\"hasFiles\" class=\"small text-muted\">\n          {{ formattedFileNames }}\n        </div>\n        <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n          <slot name=\"placeholder\">\n            {{ props.placeholder }}\n          </slot>\n        </div>\n      </slot>\n    </div>\n\n    <!-- ARIA live region for screen reader announcements -->\n    <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n      {{ ariaLiveMessage }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n  ariaLabel: undefined,\n  ariaLabelledby: undefined,\n  accept: '',\n  autofocus: false,\n  browseText: undefined,\n  capture: undefined,\n  directory: false,\n  disabled: false,\n  dropPlaceholder: undefined,\n  fileNameFormatter: undefined,\n  form: undefined,\n  id: undefined,\n  label: '',\n  labelClass: undefined,\n  multiple: false,\n  name: undefined,\n  noButton: false,\n  noDrop: false,\n  plain: false,\n  placeholder: 'No file chosen',\n  required: false,\n  showFileNames: false,\n  size: undefined,\n  state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n  change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n  default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n  // In plain mode, pass all attributes to the input element\n  if (props.plain) {\n    return {\n      rootAttrs: {},\n      dropZoneAttrs: {},\n      inputAttrs: attrs,\n    }\n  }\n  // In custom mode, split attributes:\n  // - class/style go to root (for layout/positioning)\n  // - title goes to drop zone (for tooltip on interactive element)\n  // - everything else goes to hidden input (for form functionality)\n  const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n  const rootAttrs: Record<string, unknown> = {}\n  const dropZoneAttrs: Record<string, unknown> = {}\n  if (rootClass !== undefined) rootAttrs.class = rootClass\n  if (rootStyle !== undefined) rootAttrs.style = rootStyle\n  if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n  return {\n    rootAttrs,\n    dropZoneAttrs,\n    inputAttrs,\n  }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n  typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n  open,\n  reset: resetDialog,\n  onChange: onDialogChange,\n} = useFileDialog({\n  accept: computedAccept.value,\n  multiple: props.multiple || props.directory,\n  directory: props.directory,\n  input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n  onDrop: (files) => {\n    if (files && !props.noDrop) {\n      handleFiles(files)\n    }\n  },\n  multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n  stateClass.value,\n  {\n    [`form-control-${props.size}`]: props.size !== undefined,\n  },\n])\n\nconst computedPlainClasses = computed(() => [\n  'form-control',\n  stateClass.value,\n  {\n    [`form-control-${props.size}`]: props.size !== undefined,\n  },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n  if (!hasFiles.value) return ''\n  if (props.fileNameFormatter) {\n    return props.fileNameFormatter(selectedFiles.value)\n  }\n  const names = fileNames.value\n  if (names.length === 1) return names[0]\n  return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n  () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n  if (!hasFiles.value) return ''\n  const count = selectedFiles.value.length\n  if (count === 1) {\n    return `File selected: ${selectedFiles.value[0]?.name}`\n  }\n  return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n  if (!computedAccept.value) return true\n\n  const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n  return acceptTypes.some((acceptType) => {\n    // Extension match (e.g., .pdf)\n    if (acceptType.startsWith('.')) {\n      return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n    }\n    // Exact MIME type match (e.g., image/png)\n    if (!acceptType.includes('*')) {\n      return file.type === acceptType\n    }\n    // Wildcard MIME type match (e.g., image/* or */*)\n    const slashIndex = acceptType.indexOf('/')\n    if (slashIndex === -1) {\n      // Malformed wildcard pattern (no '/'): do not match anything\n      return false\n    }\n    const category = acceptType.slice(0, slashIndex)\n    // */* should match any MIME type\n    if (category === '*') {\n      return true\n    }\n    return file.type.startsWith(`${category}/`)\n  })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n  let fileArray: File[] = []\n\n  if (nativeEvent) {\n    // Plain mode: read from the event target (browser already filtered via accept)\n    const input = nativeEvent.target as HTMLInputElement\n    fileArray = input.files ? Array.from(input.files) : []\n  } else {\n    // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n    fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n    if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n      try {\n        const dataTransfer = new DataTransfer()\n        fileArray.forEach((file) => dataTransfer.items.add(file))\n        customInputRef.value.files = dataTransfer.files\n      } catch {\n        // In environments where DataTransfer is not fully supported, skip syncing files on the input\n      }\n    }\n  }\n\n  // Update internal state\n  internalFiles.value = fileArray\n\n  // Update model value\n  if (fileArray.length === 0) {\n    modelValue.value = null\n  } else if (props.directory || props.multiple) {\n    modelValue.value = fileArray\n  } else {\n    const [firstFile] = fileArray\n    if (firstFile) {\n      modelValue.value = firstFile\n    }\n  }\n\n  // Emit change event in nextTick to ensure DOM updates\n  // In plain mode: forward the native event (has target.files)\n  // In custom mode: create CustomEvent with files in detail\n  nextTick(() => {\n    if (nativeEvent) {\n      // Plain mode: forward native event\n      emit('change', nativeEvent)\n    } else {\n      // Custom mode: create CustomEvent with files\n      const changeEvent = new CustomEvent('change', {\n        bubbles: true,\n        cancelable: false,\n        detail: {\n          files: fileArray,\n          target: {files: fileArray},\n        },\n      })\n      // Also attach files directly for easier access\n      Object.defineProperty(changeEvent, 'files', {\n        value: fileArray,\n        enumerable: true,\n      })\n      emit('change', changeEvent)\n    }\n  })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n  if (!props.disabled) {\n    open({\n      accept: computedAccept.value,\n      multiple: props.multiple || props.directory,\n      directory: props.directory,\n    })\n  }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n  // Don't trigger if clicking the button itself (button has its own handler with .stop)\n  // Don't trigger if disabled\n  if (!props.disabled) {\n    openFileDialog()\n  }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n  const input = e.target as HTMLInputElement\n  if (input.files) {\n    handleFiles(input.files, e) // Pass native event\n  }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n  if (files) {\n    handleFiles(files)\n  }\n})\n\n// Reset method\nconst reset = () => {\n  internalFiles.value = []\n  modelValue.value = null\n  resetDialog() // This resets the hidden input in custom mode\n  if (plainInputRef.value) {\n    plainInputRef.value.value = ''\n  }\n}\n\n// Focus management\nconst focus = () => {\n  if (props.plain) {\n    plainInputRef.value?.focus()\n  } else {\n    browseButtonRef.value?.focus()\n  }\n}\n\nconst blur = () => {\n  if (props.plain) {\n    plainInputRef.value?.blur()\n  } else {\n    browseButtonRef.value?.blur()\n  }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n  if (props.autofocus) {\n    nextTick(() => {\n      focus()\n    })\n  }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n  () => props.autofocus,\n  (autofocus) => {\n    if (autofocus) {\n      focus()\n    }\n  }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n  if (newValue === null) {\n    internalFiles.value = []\n    if (plainInputRef.value) {\n      plainInputRef.value.value = ''\n    }\n  } else if (Array.isArray(newValue)) {\n    internalFiles.value = newValue as readonly File[]\n  } else {\n    internalFiles.value = [newValue] as readonly File[]\n  }\n})\n\ndefineExpose({\n  blur,\n  element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n  focus,\n  reset,\n})\n</script>\n","<template>\n  <div ref=\"rootRef\" v-bind=\"processedAttrs.rootAttrs\" class=\"b-form-file-root\">\n    <!-- Optional label -->\n    <label\n      v-if=\"hasLabelSlot || props.label\"\n      class=\"form-label\"\n      :class=\"props.labelClass\"\n      :for=\"computedId\"\n    >\n      <slot name=\"label\">\n        {{ props.label }}\n      </slot>\n    </label>\n\n    <!-- Drop zone wrapper -->\n    <div\n      v-if=\"!props.plain\"\n      ref=\"dropZoneRef\"\n      v-bind=\"processedAttrs.dropZoneAttrs\"\n      class=\"b-form-file-wrapper\"\n      :class=\"{\n        'b-form-file-dragging': isOverDropZone && !props.noDrop,\n        'b-form-file-has-files': hasFiles,\n      }\"\n    >\n      <!-- Custom file control (mimics Bootstrap native input) -->\n      <div\n        class=\"b-form-file-control\"\n        :class=\"computedClasses\"\n        :aria-disabled=\"props.disabled\"\n        @click=\"handleControlClick\"\n      >\n        <!-- Custom browse button (now on LEFT to match Bootstrap v5) -->\n        <button\n          v-if=\"!props.noButton\"\n          :id=\"computedId\"\n          ref=\"browseButtonRef\"\n          type=\"button\"\n          class=\"b-form-file-button\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"props.ariaLabel\"\n          :aria-labelledby=\"props.ariaLabelledby\"\n          @click.stop=\"openFileDialog\"\n        >\n          {{ effectiveBrowseText }}\n        </button>\n\n        <!-- File name display -->\n        <div class=\"b-form-file-text\">\n          <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n            <span v-if=\"hasFiles\">{{ formattedFileNames }}</span>\n            <span v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"text-muted\">\n              <slot name=\"placeholder\">{{ props.placeholder }}</slot>\n            </span>\n          </slot>\n        </div>\n      </div>\n\n      <!-- Drag overlay (only shown when dragging) -->\n      <div v-if=\"isOverDropZone && !props.noDrop\" class=\"b-form-file-drag-overlay\">\n        <slot name=\"drop-placeholder\">\n          <div class=\"b-form-file-drag-text\">\n            {{ effectiveDropPlaceholder }}\n          </div>\n        </slot>\n      </div>\n\n      <!-- Hidden input for form submission (positioned behind UI with z-index) -->\n      <input\n        ref=\"customInputRef\"\n        v-bind=\"processedAttrs.inputAttrs\"\n        type=\"file\"\n        :name=\"props.name\"\n        :form=\"props.form\"\n        :multiple=\"props.multiple || props.directory\"\n        :disabled=\"props.disabled\"\n        :required=\"props.required\"\n        :accept=\"computedAccept || undefined\"\n        :capture=\"props.capture\"\n        :directory=\"props.directory || undefined\"\n        :webkitdirectory=\"props.directory || undefined\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        style=\"\n          position: absolute;\n          z-index: -5;\n          width: 0;\n          height: 0;\n          opacity: 0;\n          overflow: hidden;\n          pointer-events: none;\n        \"\n      />\n    </div>\n\n    <!-- Plain mode - simple native input -->\n    <input\n      v-else\n      :id=\"computedId\"\n      ref=\"plainInputRef\"\n      v-bind=\"processedAttrs.inputAttrs\"\n      type=\"file\"\n      :class=\"computedPlainClasses\"\n      :form=\"props.form\"\n      :name=\"props.name\"\n      :multiple=\"props.multiple || props.directory\"\n      :disabled=\"props.disabled\"\n      :capture=\"props.capture\"\n      :accept=\"computedAccept || undefined\"\n      :required=\"props.required || undefined\"\n      :aria-label=\"props.ariaLabel\"\n      :aria-labelledby=\"props.ariaLabelledby\"\n      :aria-required=\"props.required || undefined\"\n      :directory=\"props.directory || undefined\"\n      :webkitdirectory=\"props.directory || undefined\"\n      @change=\"onPlainChange\"\n    />\n\n    <!-- External file display (when showFileNames is true and not plain) -->\n    <div v-if=\"showExternalDisplay\" class=\"b-form-file-display mt-2\">\n      <slot name=\"file-name\" :files=\"selectedFiles\" :names=\"fileNames\">\n        <div v-if=\"hasFiles\" class=\"small text-muted\">\n          {{ formattedFileNames }}\n        </div>\n        <div v-else-if=\"hasPlaceholderSlot || props.placeholder\" class=\"small text-muted\">\n          <slot name=\"placeholder\">\n            {{ props.placeholder }}\n          </slot>\n        </div>\n      </slot>\n    </div>\n\n    <!-- ARIA live region for screen reader announcements -->\n    <div v-if=\"!props.plain\" class=\"visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n      {{ ariaLiveMessage }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {useDropZone, useFileDialog} from '@vueuse/core'\nimport {computed, nextTick, onMounted, ref, type Ref, useAttrs, useTemplateRef, watch} from 'vue'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {useId} from '../../composables/useId'\nimport {useStateClass} from '../../composables/useStateClass'\nimport {isEmptySlot} from '../../utils/dom'\nimport type {BFormFileSlots, BFormFileProps} from '../../types'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst _props = withDefaults(defineProps<Omit<BFormFileProps, 'modelValue'>>(), {\n  ariaLabel: undefined,\n  ariaLabelledby: undefined,\n  accept: '',\n  autofocus: false,\n  browseText: undefined,\n  capture: undefined,\n  directory: false,\n  disabled: false,\n  dropPlaceholder: undefined,\n  fileNameFormatter: undefined,\n  form: undefined,\n  id: undefined,\n  label: '',\n  labelClass: undefined,\n  multiple: false,\n  name: undefined,\n  noButton: false,\n  noDrop: false,\n  plain: false,\n  placeholder: 'No file chosen',\n  required: false,\n  showFileNames: false,\n  size: undefined,\n  state: null,\n})\nconst props = useDefaults(_props, 'BFormFile')\nconst slots = defineSlots<BFormFileSlots>()\n\nconst emit = defineEmits<{\n  change: [value: Event]\n}>()\n\nconst modelValue = defineModel<Exclude<BFormFileProps['modelValue'], undefined>>({\n  default: null,\n})\n\nconst attrs = useAttrs()\n\nconst processedAttrs = computed(() => {\n  // In plain mode, pass all attributes to the input element\n  if (props.plain) {\n    return {\n      rootAttrs: {},\n      dropZoneAttrs: {},\n      inputAttrs: attrs,\n    }\n  }\n  // In custom mode, split attributes:\n  // - class/style go to root (for layout/positioning)\n  // - title goes to drop zone (for tooltip on interactive element)\n  // - everything else goes to hidden input (for form functionality)\n  const {class: rootClass, style: rootStyle, title: dropZoneTitle, ...inputAttrs} = attrs\n  const rootAttrs: Record<string, unknown> = {}\n  const dropZoneAttrs: Record<string, unknown> = {}\n  if (rootClass !== undefined) rootAttrs.class = rootClass\n  if (rootStyle !== undefined) rootAttrs.style = rootStyle\n  if (dropZoneTitle !== undefined) dropZoneAttrs.title = dropZoneTitle\n  return {\n    rootAttrs,\n    dropZoneAttrs,\n    inputAttrs,\n  }\n})\n\nconst computedId = useId(() => props.id)\nconst stateClass = useStateClass(() => props.state)\n\n// Refs\nconst rootRef = useTemplateRef('rootRef')\nconst dropZoneRef = useTemplateRef('dropZoneRef')\nconst browseButtonRef = useTemplateRef('browseButtonRef')\nconst plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')\nconst customInputRef = useTemplateRef<HTMLInputElement>('customInputRef')\n\n// Computed accept for file type validation\nconst computedAccept = computed(() =>\n  typeof props.accept === 'string' ? props.accept : props.accept.join(',')\n)\n\n// VueUse file dialog (uses our hidden input element)\nconst {\n  open,\n  reset: resetDialog,\n  onChange: onDialogChange,\n} = useFileDialog({\n  accept: computedAccept.value,\n  multiple: props.multiple || props.directory,\n  directory: props.directory,\n  input: customInputRef as unknown as Ref<HTMLInputElement>,\n})\n\n// VueUse drop zone (replaces manual drag/drop)\n// Note: We don't pass dataTypes because the accept attribute handles validation\n// and there is no reliable way to get MIME types from in all browsers\n// https://github.com/vueuse/vueuse/issues/4523\nconst {isOverDropZone} = useDropZone(dropZoneRef, {\n  onDrop: (files) => {\n    if (files && !props.noDrop) {\n      handleFiles(files)\n    }\n  },\n  multiple: props.multiple || props.directory,\n})\n\n// Computed properties\nconst hasLabelSlot = computed(() => !isEmptySlot(slots.label))\nconst hasPlaceholderSlot = computed(() => !isEmptySlot(slots.placeholder))\n\nconst computedClasses = computed(() => [\n  stateClass.value,\n  {\n    [`form-control-${props.size}`]: props.size !== undefined,\n  },\n])\n\nconst computedPlainClasses = computed(() => [\n  'form-control',\n  stateClass.value,\n  {\n    [`form-control-${props.size}`]: props.size !== undefined,\n  },\n])\n\n// Selected files (from dialog or managed state)\nconst internalFiles = ref<readonly File[]>([])\n\nconst selectedFiles = computed<readonly File[]>(() => internalFiles.value)\n\nconst hasFiles = computed(() => selectedFiles.value.length > 0)\n\nconst fileNames = computed(() => selectedFiles.value.map((file) => file.name))\n\nconst formattedFileNames = computed(() => {\n  if (!hasFiles.value) return ''\n  if (props.fileNameFormatter) {\n    return props.fileNameFormatter(selectedFiles.value)\n  }\n  const names = fileNames.value\n  if (names.length === 1) return names[0]\n  return `${names.length} files selected`\n})\n\nconst showExternalDisplay = computed(\n  () => !props.plain && props.showFileNames && (hasFiles.value || props.placeholder)\n)\n\n// ARIA live region message for accessibility\nconst ariaLiveMessage = computed(() => {\n  if (!hasFiles.value) return ''\n  const count = selectedFiles.value.length\n  if (count === 1) {\n    return `File selected: ${selectedFiles.value[0]?.name}`\n  }\n  return `${count} files selected`\n})\n\nconst effectiveBrowseText = computed(() => props.browseText ?? 'Browse')\nconst effectiveDropPlaceholder = computed(() => props.dropPlaceholder ?? 'Drop files here...')\n\n// Validate file against accept criteria\nconst isFileAccepted = (file: File): boolean => {\n  if (!computedAccept.value) return true\n\n  const acceptTypes = computedAccept.value.split(',').map((type) => type.trim())\n\n  return acceptTypes.some((acceptType) => {\n    // Extension match (e.g., .pdf)\n    if (acceptType.startsWith('.')) {\n      return file.name.toLowerCase().endsWith(acceptType.toLowerCase())\n    }\n    // Exact MIME type match (e.g., image/png)\n    if (!acceptType.includes('*')) {\n      return file.type === acceptType\n    }\n    // Wildcard MIME type match (e.g., image/* or */*)\n    const slashIndex = acceptType.indexOf('/')\n    if (slashIndex === -1) {\n      // Malformed wildcard pattern (no '/'): do not match anything\n      return false\n    }\n    const category = acceptType.slice(0, slashIndex)\n    // */* should match any MIME type\n    if (category === '*') {\n      return true\n    }\n    return file.type.startsWith(`${category}/`)\n  })\n}\n\n// File handling\nconst handleFiles = (files: File[] | FileList, nativeEvent?: Event) => {\n  let fileArray: File[] = []\n\n  if (nativeEvent) {\n    // Plain mode: read from the event target (browser already filtered via accept)\n    const input = nativeEvent.target as HTMLInputElement\n    fileArray = input.files ? Array.from(input.files) : []\n  } else {\n    // Custom mode (drag & drop or file dialog): manually filter and set on hidden input\n    fileArray = Array.from(files).filter((file) => isFileAccepted(file))\n    if (customInputRef.value && typeof DataTransfer !== 'undefined') {\n      try {\n        const dataTransfer = new DataTransfer()\n        fileArray.forEach((file) => dataTransfer.items.add(file))\n        customInputRef.value.files = dataTransfer.files\n      } catch {\n        // In environments where DataTransfer is not fully supported, skip syncing files on the input\n      }\n    }\n  }\n\n  // Update internal state\n  internalFiles.value = fileArray\n\n  // Update model value\n  if (fileArray.length === 0) {\n    modelValue.value = null\n  } else if (props.directory || props.multiple) {\n    modelValue.value = fileArray\n  } else {\n    const [firstFile] = fileArray\n    if (firstFile) {\n      modelValue.value = firstFile\n    }\n  }\n\n  // Emit change event in nextTick to ensure DOM updates\n  // In plain mode: forward the native event (has target.files)\n  // In custom mode: create CustomEvent with files in detail\n  nextTick(() => {\n    if (nativeEvent) {\n      // Plain mode: forward native event\n      emit('change', nativeEvent)\n    } else {\n      // Custom mode: create CustomEvent with files\n      const changeEvent = new CustomEvent('change', {\n        bubbles: true,\n        cancelable: false,\n        detail: {\n          files: fileArray,\n          target: {files: fileArray},\n        },\n      })\n      // Also attach files directly for easier access\n      Object.defineProperty(changeEvent, 'files', {\n        value: fileArray,\n        enumerable: true,\n      })\n      emit('change', changeEvent)\n    }\n  })\n}\n\n// Open file dialog\nconst openFileDialog = () => {\n  if (!props.disabled) {\n    open({\n      accept: computedAccept.value,\n      multiple: props.multiple || props.directory,\n      directory: props.directory,\n    })\n  }\n}\n\n// Handle click on control wrapper (make entire control clickable like Bootstrap v5)\nconst handleControlClick = () => {\n  // Don't trigger if clicking the button itself (button has its own handler with .stop)\n  // Don't trigger if disabled\n  if (!props.disabled) {\n    openFileDialog()\n  }\n}\n\n// Plain mode change handler\nconst onPlainChange = (e: Event) => {\n  const input = e.target as HTMLInputElement\n  if (input.files) {\n    handleFiles(input.files, e) // Pass native event\n  }\n}\n\n// Watch dialog files from useFileDialog\nonDialogChange((files) => {\n  if (files) {\n    handleFiles(files)\n  }\n})\n\n// Reset method\nconst reset = () => {\n  internalFiles.value = []\n  modelValue.value = null\n  resetDialog() // This resets the hidden input in custom mode\n  if (plainInputRef.value) {\n    plainInputRef.value.value = ''\n  }\n}\n\n// Focus management\nconst focus = () => {\n  if (props.plain) {\n    plainInputRef.value?.focus()\n  } else {\n    browseButtonRef.value?.focus()\n  }\n}\n\nconst blur = () => {\n  if (props.plain) {\n    plainInputRef.value?.blur()\n  } else {\n    browseButtonRef.value?.blur()\n  }\n}\n\n// Autofocus support - initial focus on mount\nonMounted(() => {\n  if (props.autofocus) {\n    nextTick(() => {\n      focus()\n    })\n  }\n})\n\n// Autofocus support - runtime prop changes\nwatch(\n  () => props.autofocus,\n  (autofocus) => {\n    if (autofocus) {\n      focus()\n    }\n  }\n)\n\n// Watch modelValue changes from parent\nwatch(modelValue, (newValue) => {\n  if (newValue === null) {\n    internalFiles.value = []\n    if (plainInputRef.value) {\n      plainInputRef.value.value = ''\n    }\n  } else if (Array.isArray(newValue)) {\n    internalFiles.value = newValue as readonly File[]\n  } else {\n    internalFiles.value = [newValue] as readonly File[]\n  }\n})\n\ndefineExpose({\n  blur,\n  element: computed(() => (props.plain ? plainInputRef.value : browseButtonRef.value)),\n  focus,\n  reset,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkLA,MAAM,QAAQ,oBAAA,YA1BC,SA0BmB,YAAW;EAC7C,MAAM,SAAA,GAAA,IAAA,WAAQ;EAEd,MAAM,OAAO;EAIb,MAAM,cAAA,GAAA,IAAA,UAA0E,SAAA,aAE/E;EAED,MAAM,SAAA,GAAA,IAAA,WAAiB;EAEvB,MAAM,kBAAA,GAAA,IAAA,gBAAgC;AAEpC,OAAI,MAAM,MACR,QAAO;IACL,WAAW,EAAE;IACb,eAAe,EAAE;IACjB,YAAY;IACd;GAMF,MAAM,EAAC,OAAO,WAAW,OAAO,WAAW,OAAO,eAAe,GAAG,eAAc;GAClF,MAAM,YAAqC,EAAC;GAC5C,MAAM,gBAAyC,EAAC;AAChD,OAAI,cAAc,KAAA,EAAW,WAAU,QAAQ;AAC/C,OAAI,cAAc,KAAA,EAAW,WAAU,QAAQ;AAC/C,OAAI,kBAAkB,KAAA,EAAW,eAAc,QAAQ;AACvD,UAAO;IACL;IACA;IACA;IACF;IACD;EAED,MAAM,aAAa,cAAA,YAAY,MAAM,GAAE;EACvC,MAAM,aAAa,sBAAA,oBAAoB,MAAM,MAAK;EAGlD,MAAM,WAAA,GAAA,IAAA,gBAAyB,UAAS;EACxC,MAAM,eAAA,GAAA,IAAA,gBAA6B,cAAa;EAChD,MAAM,mBAAA,GAAA,IAAA,gBAAiC,kBAAiB;EACxD,MAAM,iBAAA,GAAA,IAAA,gBAAiD,gBAAe;EACtE,MAAM,kBAAA,GAAA,IAAA,gBAAkD,iBAAgB;EAGxE,MAAM,kBAAA,GAAA,IAAA,gBACJ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS,MAAM,OAAO,KAAK,IAAG,CACzE;EAGA,MAAM,EACJ,MACA,OAAO,aACP,UAAU,mBACR,aAAA,cAAc;GAChB,QAAQ,eAAe;GACvB,UAAU,MAAM,YAAY,MAAM;GAClC,WAAW,MAAM;GACjB,OAAO;GACR,CAAA;EAMD,MAAM,EAAC,mBAAkB,aAAA,YAAY,aAAa;GAChD,SAAS,UAAU;AACjB,QAAI,SAAS,CAAC,MAAM,OAClB,aAAY,MAAK;;GAGrB,UAAU,MAAM,YAAY,MAAM;GACnC,CAAA;EAGD,MAAM,gBAAA,GAAA,IAAA,gBAA8B,CAAC,YAAA,YAAY,MAAM,MAAM,CAAA;EAC7D,MAAM,sBAAA,GAAA,IAAA,gBAAoC,CAAC,YAAA,YAAY,MAAM,YAAY,CAAA;EAEzE,MAAM,mBAAA,GAAA,IAAA,gBAAiC,CACrC,WAAW,OACX,GACG,gBAAgB,MAAM,SAAS,MAAM,SAAS,KAAA,GAChD,CACF,CAAA;EAED,MAAM,wBAAA,GAAA,IAAA,gBAAsC;GAC1C;GACA,WAAW;GACX,GACG,gBAAgB,MAAM,SAAS,MAAM,SAAS,KAAA,GAAA;GAElD,CAAA;EAGD,MAAM,iBAAA,GAAA,IAAA,KAAqC,EAAE,CAAA;EAE7C,MAAM,iBAAA,GAAA,IAAA,gBAAgD,cAAc,MAAK;EAEzE,MAAM,YAAA,GAAA,IAAA,gBAA0B,cAAc,MAAM,SAAS,EAAC;EAE9D,MAAM,aAAA,GAAA,IAAA,gBAA2B,cAAc,MAAM,KAAK,SAAS,KAAK,KAAK,CAAA;EAE7E,MAAM,sBAAA,GAAA,IAAA,gBAAoC;AACxC,OAAI,CAAC,SAAS,MAAO,QAAO;AAC5B,OAAI,MAAM,kBACR,QAAO,MAAM,kBAAkB,cAAc,MAAK;GAEpD,MAAM,QAAQ,UAAU;AACxB,OAAI,MAAM,WAAW,EAAG,QAAO,MAAM;AACrC,UAAO,GAAG,MAAM,OAAO;IACxB;EAED,MAAM,uBAAA,GAAA,IAAA,gBACE,CAAC,MAAM,SAAS,MAAM,kBAAkB,SAAS,SAAS,MAAM,aACxE;EAGA,MAAM,mBAAA,GAAA,IAAA,gBAAiC;AACrC,OAAI,CAAC,SAAS,MAAO,QAAO;GAC5B,MAAM,QAAQ,cAAc,MAAM;AAClC,OAAI,UAAU,EACZ,QAAO,kBAAkB,cAAc,MAAM,IAAI;AAEnD,UAAO,GAAG,MAAM;IACjB;EAED,MAAM,uBAAA,GAAA,IAAA,gBAAqC,MAAM,cAAc,SAAQ;EACvE,MAAM,4BAAA,GAAA,IAAA,gBAA0C,MAAM,mBAAmB,qBAAoB;EAG7F,MAAM,kBAAkB,SAAwB;AAC9C,OAAI,CAAC,eAAe,MAAO,QAAO;AAIlC,UAFoB,eAAe,MAAM,MAAM,IAAI,CAAC,KAAK,SAAS,KAAK,MAAM,CAAA,CAE1D,MAAM,eAAe;AAEtC,QAAI,WAAW,WAAW,IAAI,CAC5B,QAAO,KAAK,KAAK,aAAa,CAAC,SAAS,WAAW,aAAa,CAAA;AAGlE,QAAI,CAAC,WAAW,SAAS,IAAI,CAC3B,QAAO,KAAK,SAAS;IAGvB,MAAM,aAAa,WAAW,QAAQ,IAAG;AACzC,QAAI,eAAe,GAEjB,QAAO;IAET,MAAM,WAAW,WAAW,MAAM,GAAG,WAAU;AAE/C,QAAI,aAAa,IACf,QAAO;AAET,WAAO,KAAK,KAAK,WAAW,GAAG,SAAS,GAAE;KAC3C;;EAIH,MAAM,eAAe,OAA0B,gBAAwB;GACrE,IAAI,YAAoB,EAAC;AAEzB,OAAI,aAAa;IAEf,MAAM,QAAQ,YAAY;AAC1B,gBAAY,MAAM,QAAQ,MAAM,KAAK,MAAM,MAAM,GAAG,EAAC;UAChD;AAEL,gBAAY,MAAM,KAAK,MAAM,CAAC,QAAQ,SAAS,eAAe,KAAK,CAAA;AACnE,QAAI,eAAe,SAAS,OAAO,iBAAiB,YAClD,KAAI;KACF,MAAM,eAAe,IAAI,cAAa;AACtC,eAAU,SAAS,SAAS,aAAa,MAAM,IAAI,KAAK,CAAA;AACxD,oBAAe,MAAM,QAAQ,aAAa;YACpC;;AAOZ,iBAAc,QAAQ;AAGtB,OAAI,UAAU,WAAW,EACvB,YAAW,QAAQ;YACV,MAAM,aAAa,MAAM,SAClC,YAAW,QAAQ;QACd;IACL,MAAM,CAAC,aAAa;AACpB,QAAI,UACF,YAAW,QAAQ;;AAOvB,IAAA,GAAA,IAAA,gBAAe;AACb,QAAI,YAEF,MAAK,UAAU,YAAW;SACrB;KAEL,MAAM,cAAc,IAAI,YAAY,UAAU;MAC5C,SAAS;MACT,YAAY;MACZ,QAAQ;OACN,OAAO;OACP,QAAQ,EAAC,OAAO,WAAA;;MAEnB,CAAA;AAED,YAAO,eAAe,aAAa,SAAS;MAC1C,OAAO;MACP,YAAY;MACb,CAAA;AACD,UAAK,UAAU,YAAW;;KAE7B;;EAIH,MAAM,uBAAuB;AAC3B,OAAI,CAAC,MAAM,SACT,MAAK;IACH,QAAQ,eAAe;IACvB,UAAU,MAAM,YAAY,MAAM;IAClC,WAAW,MAAM;IAClB,CAAA;;EAKL,MAAM,2BAA2B;AAG/B,OAAI,CAAC,MAAM,SACT,iBAAe;;EAKnB,MAAM,iBAAiB,MAAa;GAClC,MAAM,QAAQ,EAAE;AAChB,OAAI,MAAM,MACR,aAAY,MAAM,OAAO,EAAE;;AAK/B,kBAAgB,UAAU;AACxB,OAAI,MACF,aAAY,MAAK;IAEpB;EAGD,MAAM,cAAc;AAClB,iBAAc,QAAQ,EAAC;AACvB,cAAW,QAAQ;AACnB,gBAAa;AACb,OAAI,cAAc,MAChB,eAAc,MAAM,QAAQ;;EAKhC,MAAM,cAAc;AAClB,OAAI,MAAM,MACR,eAAc,OAAO,OAAM;OAE3B,iBAAgB,OAAO,OAAM;;EAIjC,MAAM,aAAa;AACjB,OAAI,MAAM,MACR,eAAc,OAAO,MAAK;OAE1B,iBAAgB,OAAO,MAAK;;AAKhC,GAAA,GAAA,IAAA,iBAAgB;AACd,OAAI,MAAM,UACR,EAAA,GAAA,IAAA,gBAAe;AACb,WAAM;KACP;IAEJ;AAGD,GAAA,GAAA,IAAA,aACQ,MAAM,YACX,cAAc;AACb,OAAI,UACF,QAAM;IAGZ;AAGA,GAAA,GAAA,IAAA,OAAM,aAAa,aAAa;AAC9B,OAAI,aAAa,MAAM;AACrB,kBAAc,QAAQ,EAAC;AACvB,QAAI,cAAc,MAChB,eAAc,MAAM,QAAQ;cAErB,MAAM,QAAQ,SAAS,CAChC,eAAc,QAAQ;OAEtB,eAAc,QAAQ,CAAC,SAAS;IAEnC;AAED,WAAa;GACX;GACA,UAAA,GAAA,IAAA,gBAAyB,MAAM,QAAQ,cAAc,QAAQ,gBAAgB,MAAO;GACpF;GACA;GACD,CAAA;;4DAlXO,QAAA,GAAA,IAAA,YAAA;aAvIG;IAAJ,KAAI;MAAkB,eAAA,MAAe,WAAS,EAAE,OAAM,oBAAkB,CAAA,EAAA;IAGnE,aAAA,UAAA,GAAA,IAAA,OAAgB,MAAK,CAAC,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAQtB,SAAA;;KAPN,QAAA,GAAA,IAAA,gBAAK,CAAC,eAAA,GAAA,IAAA,OACE,MAAK,CAAC,WAAU,CAAA;KACvB,MAAA,GAAA,IAAA,OAAK,WAAA;4BAIC,KAAA,QAAA,SAAA,EAAA,QAAA,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,OADF,MAAK,CAAC,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA;oBAMT,MAAK,CAAC,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBA6ET,QAAA,GAAA,IAAA,YAAA;;cA5EA;KAAJ,KAAI;OACI,eAAA,MAAe,eAAa,EACpC,OAAK,CAAC,uBAAqB;4CACe,eAAc,IAAA,EAAA,GAAA,IAAA,OAAK,MAAK,CAAC;8BAAyC,SAAA;;iCAoCtG,OAAA;MA7BJ,QAAA,GAAA,IAAA,gBAAK,CAAC,uBACE,gBAAA,MAAe,CAAA;MACtB,kBAAA,GAAA,IAAA,OAAe,MAAK,CAAC;MACrB,SAAO;yBAIC,MAAK,CAAC,aAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAWN,UAAA;;MAVN,KAAA,GAAA,IAAA,OAAI,WAAU;eACX;MAAJ,KAAI;MACJ,MAAK;MACL,OAAM;MACL,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC;MAChB,eAAA,GAAA,IAAA,OAAY,MAAK,CAAC;MAClB,oBAAA,GAAA,IAAA,OAAiB,MAAK,CAAC;MACvB,UAAA,GAAA,IAAA,eAAY,gBAAc,CAAA,OAAA,CAAA;iCAExB,oBAAA,MAAmB,EAAA,GAAA,WAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA,GAAA,GAAA,IAAA,oBAWlB,OAPN,YAOM,EAAA,GAAA,IAAA,YADG,KAAA,QAAA,aAAA;MALiB,OAAO,cAAA;MAAgB,OAAO,UAAA;cAK/C,CAJO,SAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAAyC,QAAA,aAAA,GAAA,IAAA,iBAA5B,mBAAA,MAAkB,EAAA,EAAA,IAC1B,mBAAA,UAAA,GAAA,IAAA,OAAsB,MAAK,CAAC,gBAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEtC,QAFP,YAEO,EAAA,GAAA,IAAA,YADkD,KAAA,QAAA,eAAA,EAAA,QAAA,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,OAA3B,MAAK,CAAC,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,WAAA;oBAO1C,eAAc,IAAA,EAAA,GAAA,IAAA,OAAK,MAAK,CAAC,WAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAM9B,OANN,YAMM,EAAA,GAAA,IAAA,YADG,KAAA,QAAA,oBAAA,EAAA,QAAA,EAAA,GAAA,IAAA,oBADC,OAFN,aAAA,GAAA,IAAA,iBACK,yBAAA,MAAwB,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA;iCA8B/B,UAAA,GAAA,IAAA,YAAA;eAvBI;MAAJ,KAAI;QACI,eAAA,MAAe,YAAU;MACjC,MAAK;MACJ,OAAA,GAAA,IAAA,OAAM,MAAK,CAAC;MACZ,OAAA,GAAA,IAAA,OAAM,MAAK,CAAC;MACZ,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC,aAAA,GAAA,IAAA,OAAY,MAAK,CAAC;MAClC,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC;MAChB,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC;MAChB,QAAQ,eAAA,SAAkB,KAAA;MAC1B,UAAA,GAAA,IAAA,OAAS,MAAK,CAAC;MACf,YAAA,GAAA,IAAA,OAAW,MAAK,CAAC,aAAa,KAAA;MAC9B,kBAAA,GAAA,IAAA,OAAiB,MAAK,CAAC,aAAa,KAAA;MACrC,UAAS;MACT,eAAY;MACZ,OAAA;OAAA,YAAA;OAAA,WAAA;OAAA,SAAA;OAAA,UAAA;OAAA,WAAA;OAAA,YAAA;OAAA,kBAAA;;;iEAiCF,UAAA,GAAA,IAAA,YAAA;;KAlBC,KAAA,GAAA,IAAA,OAAI,WAAU;cACX;KAAJ,KAAI;OACI,eAAA,MAAe,YAAU;KACjC,MAAK;KACJ,OAAO,qBAAA;KACP,OAAA,GAAA,IAAA,OAAM,MAAK,CAAC;KACZ,OAAA,GAAA,IAAA,OAAM,MAAK,CAAC;KACZ,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC,aAAA,GAAA,IAAA,OAAY,MAAK,CAAC;KAClC,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC;KAChB,UAAA,GAAA,IAAA,OAAS,MAAK,CAAC;KACf,QAAQ,eAAA,SAAkB,KAAA;KAC1B,WAAA,GAAA,IAAA,OAAU,MAAK,CAAC,YAAY,KAAA;KAC5B,eAAA,GAAA,IAAA,OAAY,MAAK,CAAC;KAClB,oBAAA,GAAA,IAAA,OAAiB,MAAK,CAAC;KACvB,kBAAA,GAAA,IAAA,OAAe,MAAK,CAAC,YAAY,KAAA;KACjC,YAAA,GAAA,IAAA,OAAW,MAAK,CAAC,aAAa,KAAA;KAC9B,kBAAA,GAAA,IAAA,OAAiB,MAAK,CAAC,aAAa,KAAA;KACpC,UAAQ;;IAIA,oBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAWL,OAXN,aAWM,EAAA,GAAA,IAAA,YADG,KAAA,QAAA,aAAA;KATiB,OAAO,cAAA;KAAgB,OAAO,UAAA;aAS/C,CARM,SAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEL,OAFN,cAAA,GAAA,IAAA,iBACK,mBAAA,MAAkB,EAAA,EAAA,IAEP,mBAAA,UAAA,GAAA,IAAA,OAAsB,MAAK,CAAC,gBAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAItC,OAJN,aAIM,EAAA,GAAA,IAAA,YADG,KAAA,QAAA,eAAA,EAAA,QAAA,EAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,kBAAA,GAAA,IAAA,OADF,MAAK,CAAC,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA,CAAA,CAAA,CAAA,CAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA;oBAOhB,MAAK,CAAC,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEZ,OAFN,cAAA,GAAA,IAAA,iBACK,gBAAA,MAAe,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,IAAA,KAAA"}