@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system278.js

@@ -0,0 +1,377 @@
+import { useComponentId as e } from "./design-system10.js";
+import { BUploadFileStatus as t, BUploadListType as n } from "./design-system277.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, useAttrs as b, useModel as x, watch as ee, withModifiers as S } from "vue";
+//#region src/components/BUpload/BUpload.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"tabindex",
+	"aria-disabled",
+	"aria-label"
+], w = {
+	key: 0,
+	class: "b-upload__card-trigger"
+}, T = {
+	key: 1,
+	class: "b-upload__default-text"
+}, E = [
+	"accept",
+	"multiple",
+	"disabled",
+	"webkitdirectory"
+], te = {
+	key: 0,
+	class: "b-upload__item-thumbnail",
+	"aria-hidden": "true"
+}, ne = ["src", "alt"], re = {
+	key: 1,
+	class: "b-upload__item-file-icon"
+}, D = { class: "b-upload__item-info" }, O = ["title"], k = { class: "b-upload__item-actions" }, A = ["onClick"], j = ["onClick"], M = ["disabled", "onClick"], N = ["aria-valuenow", "aria-label"], P = {
+	key: 2,
+	class: "b-upload__hint"
+}, F = /* @__PURE__ */ l({
+	inheritAttrs: !1,
+	__name: "BUpload",
+	props: /* @__PURE__ */ u({
+		accept: { default: "" },
+		action: {
+			type: [String, Function],
+			default: ""
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		directory: {
+			type: Boolean,
+			default: !1
+		},
+		maxCount: {},
+		listType: { default: () => n.Text },
+		method: { default: "POST" },
+		name: { default: "file" },
+		headers: {},
+		data: { type: [Object, Function] },
+		withCredentials: {
+			type: Boolean,
+			default: !1
+		},
+		openFileDialogOnClick: {
+			type: Boolean,
+			default: !0
+		},
+		showUploadList: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		defaultFileList: { default: () => [] },
+		beforeUpload: { type: Function },
+		customRequest: { type: Function }
+	}, {
+		fileList: { default: void 0 },
+		fileListModifiers: {}
+	}),
+	emits: /* @__PURE__ */ u([
+		"change",
+		"remove",
+		"preview",
+		"download",
+		"drop"
+	], ["update:fileList"]),
+	setup(l, { expose: u, emit: F }) {
+		let I = b(), L = x(l, "fileList"), R = F, { componentUID: z } = e(), B = h(null), V = h(!1), H = h(Array.isArray(l.defaultFileList) ? [...l.defaultFileList] : []), U = i({
+			get: () => L.value === void 0 ? H.value : L.value,
+			set: (e) => {
+				H.value = e, L.value !== void 0 && (L.value = e);
+			}
+		});
+		p(() => {
+			L.value === void 0 && l.defaultFileList.length > 0 && (H.value = [...l.defaultFileList]);
+		}), ee(() => L.value, (e) => {
+			e !== void 0 && (H.value = e);
+		});
+		let W = i(() => l.listType === n.PictureCard || l.listType === n.PictureCircle), G = i(() => l.showUploadList === !1 ? !1 : l.showUploadList === !0 ? {
+			showPreviewIcon: !0,
+			showRemoveIcon: !0,
+			showDownloadIcon: !1
+		} : l.showUploadList), K = i(() => l.maxCount !== void 0 && l.maxCount !== 1 && U.value.length >= l.maxCount), q = 0;
+		function J() {
+			return q += 1, `b-upload-${z.value}-${q}-${Date.now()}`;
+		}
+		function Y(e) {
+			return {
+				uid: J(),
+				name: e.name,
+				size: e.size,
+				type: e.type,
+				status: t.Uploading,
+				percent: 0,
+				originFileObj: e
+			};
+		}
+		function X(e, t, n) {
+			U.value = t, R("change", {
+				file: e,
+				fileList: t,
+				event: n
+			});
+		}
+		function ie(e) {
+			let t = new XMLHttpRequest();
+			t.upload.addEventListener("progress", (t) => {
+				t.lengthComputable && e.onProgress && e.onProgress({ percent: Math.round(t.loaded / t.total * 100) });
+			}), t.addEventListener("load", () => {
+				t.status >= 200 && t.status < 300 ? e.onSuccess?.(t.response) : e.onError?.(/* @__PURE__ */ Error(`Upload failed with status ${t.status}`));
+			}), t.addEventListener("error", () => {
+				e.onError?.(/* @__PURE__ */ Error("Upload network error"));
+			}), t.open(e.method || "POST", e.action, !0), e.withCredentials && (t.withCredentials = !0), e.headers && Object.entries(e.headers).forEach(([e, n]) => {
+				t.setRequestHeader(e, n);
+			});
+			let n = new FormData();
+			e.data && Object.entries(e.data).forEach(([e, t]) => {
+				n.append(e, t);
+			}), n.append(e.filename, e.file), t.send(n);
+		}
+		async function ae(e, t) {
+			if (l.beforeUpload) try {
+				let n = await l.beforeUpload(e, t);
+				if (n === !1) return;
+				if (n instanceof Blob) {
+					Z(n instanceof File ? n : new File([n], e.name, { type: n.type }));
+					return;
+				}
+			} catch {
+				return;
+			}
+			Z(e);
+		}
+		function Z(e) {
+			let n = Y(e), r;
+			r = l.maxCount === 1 ? [n] : l.maxCount === void 0 ? [...U.value, n] : [...U.value, n].slice(-l.maxCount), X(n, r), (typeof l.action == "function" ? l.action(e) : Promise.resolve(l.action)).then((r) => {
+				let i = l.customRequest || ie, a = typeof l.data == "function" ? l.data(n) : l.data || {};
+				i({
+					action: r,
+					file: e,
+					filename: l.name,
+					headers: l.headers,
+					data: a,
+					withCredentials: l.withCredentials,
+					method: l.method,
+					onProgress: (e) => {
+						let t = {
+							...n,
+							percent: e.percent
+						};
+						X(t, U.value.map((e) => e.uid === n.uid ? t : e));
+					},
+					onSuccess: (e) => {
+						let r = {
+							...n,
+							status: t.Done,
+							percent: 100,
+							response: e
+						};
+						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
+					},
+					onError: (e) => {
+						let r = {
+							...n,
+							status: t.Error,
+							error: e
+						};
+						X(r, U.value.map((e) => e.uid === n.uid ? r : e));
+					}
+				});
+			});
+		}
+		function Q(e) {
+			if (!e || e.length === 0) return;
+			let t = Array.from(e), n;
+			if (l.maxCount === 1) n = t.slice(0, 1);
+			else if (l.maxCount !== void 0) {
+				let e = l.maxCount - U.value.length;
+				n = e > 0 ? t.slice(0, e) : [];
+			} else n = t;
+			n.forEach((e) => ae(e, t));
+		}
+		function oe() {
+			l.disabled || !l.openFileDialogOnClick || K.value || B.value?.click();
+		}
+		function $(e) {
+			l.disabled || K.value || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), B.value?.click());
+		}
+		function se(e) {
+			let t = e.target;
+			Q(t.files), t.value = "";
+		}
+		function ce(e) {
+			e.preventDefault(), !l.disabled && (V.value = !0);
+		}
+		function le(e) {
+			e.preventDefault(), V.value = !1;
+		}
+		function ue(e) {
+			e.preventDefault(), V.value = !1, !l.disabled && (R("drop", e), Q(e.dataTransfer?.files ?? null));
+		}
+		function de(e) {
+			R("remove", e);
+			let n = U.value.filter((t) => t.uid !== e.uid);
+			X({
+				...e,
+				status: t.Removed
+			}, n);
+		}
+		function fe(e) {
+			R("preview", e);
+		}
+		function pe(e) {
+			R("download", e);
+		}
+		return u({ openFileDialog: () => B.value?.click() }), (e, i) => (m(), o("div", { class: d(["b-upload", {
+			"b-upload--disabled": l.disabled,
+			"b-upload--drag-over": V.value,
+			[`b-upload--${l.listType}`]: !0
+		}]) }, [
+			!W.value || !K.value ? (m(), o("div", {
+				key: 0,
+				class: "b-upload__trigger",
+				role: "button",
+				tabindex: l.disabled ? -1 : 0,
+				"aria-disabled": l.disabled || void 0,
+				"aria-label": y(I)["aria-label"] || "Upload file",
+				onClick: oe,
+				onKeydown: $,
+				onDragover: ce,
+				onDragleave: le,
+				onDrop: ue
+			}, [_(e.$slots, "default", {}, () => [W.value ? (m(), o("div", w, [...i[0] ||= [c("<span class=\"b-upload__plus-icon\" aria-hidden=\"true\" data-v-36315fd9><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" data-v-36315fd9><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" data-v-36315fd9></line><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" data-v-36315fd9></line></svg></span><span class=\"b-upload__card-text\" data-v-36315fd9>Upload</span>", 2)]])) : (m(), o("span", T, "Click to Upload"))], !0)], 40, C)) : a("", !0),
+			s("input", {
+				ref_key: "inputRef",
+				ref: B,
+				class: "b-upload__input",
+				type: "file",
+				accept: l.accept || void 0,
+				multiple: l.multiple,
+				disabled: l.disabled,
+				webkitdirectory: l.directory || void 0,
+				"aria-hidden": "true",
+				tabindex: "-1",
+				onChange: se
+			}, null, 40, E),
+			G.value !== !1 && U.value.length > 0 ? (m(), o("div", {
+				key: 1,
+				class: d(["b-upload__list", `b-upload__list--${l.listType}`]),
+				role: "list",
+				"aria-label": "Uploaded files"
+			}, [(m(!0), o(r, null, g(U.value, (e) => (m(), o("div", {
+				key: e.uid,
+				class: d(["b-upload__item", {
+					"b-upload__item--error": e.status === y(t).Error,
+					"b-upload__item--done": e.status === y(t).Done,
+					"b-upload__item--uploading": e.status === y(t).Uploading
+				}]),
+				role: "listitem"
+			}, [
+				l.listType === y(n).Text ? a("", !0) : (m(), o("span", te, [e.thumbUrl || e.url ? (m(), o("img", {
+					key: 0,
+					src: e.thumbUrl || e.url,
+					alt: e.name,
+					class: "b-upload__item-image"
+				}, null, 8, ne)) : (m(), o("span", re, [...i[1] ||= [s("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.5"
+				}, [s("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" }), s("polyline", { points: "14,2 14,8 20,8" })], -1)]]))])),
+				s("span", D, [s("span", {
+					class: "b-upload__item-name",
+					title: e.name
+				}, v(e.name), 9, O)]),
+				s("span", k, [
+					G.value && G.value.showPreviewIcon && (e.url || e.thumbUrl) ? (m(), o("button", {
+						key: 0,
+						class: "b-upload__action-btn",
+						type: "button",
+						"aria-label": "Preview file",
+						onClick: S((t) => fe(e), ["stop"])
+					}, [...i[2] ||= [s("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"aria-hidden": "true"
+					}, [s("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), s("circle", {
+						cx: "12",
+						cy: "12",
+						r: "3"
+					})], -1)]], 8, A)) : a("", !0),
+					G.value && G.value.showDownloadIcon && e.status === y(t).Done ? (m(), o("button", {
+						key: 1,
+						class: "b-upload__action-btn",
+						type: "button",
+						"aria-label": "Download file",
+						onClick: S((t) => pe(e), ["stop"])
+					}, [...i[3] ||= [s("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"aria-hidden": "true"
+					}, [
+						s("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }),
+						s("polyline", { points: "7,10 12,15 17,10" }),
+						s("line", {
+							x1: "12",
+							y1: "15",
+							x2: "12",
+							y2: "3"
+						})
+					], -1)]], 8, j)) : a("", !0),
+					G.value && G.value.showRemoveIcon ? (m(), o("button", {
+						key: 2,
+						class: "b-upload__action-btn b-upload__action-btn--remove",
+						type: "button",
+						"aria-label": "Remove file",
+						disabled: l.disabled,
+						onClick: S((t) => de(e), ["stop"])
+					}, [...i[4] ||= [s("svg", {
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"aria-hidden": "true"
+					}, [s("line", {
+						x1: "18",
+						y1: "6",
+						x2: "6",
+						y2: "18"
+					}), s("line", {
+						x1: "6",
+						y1: "6",
+						x2: "18",
+						y2: "18"
+					})], -1)]], 8, M)) : a("", !0)
+				]),
+				e.status === y(t).Uploading ? (m(), o("div", {
+					key: 1,
+					class: "b-upload__progress",
+					role: "progressbar",
+					"aria-valuenow": e.percent ?? 0,
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					"aria-label": `Uploading ${e.name}`
+				}, [s("div", {
+					class: "b-upload__progress-bar",
+					style: f({ width: `${e.percent ?? 0}%` })
+				}, null, 4)], 8, N)) : a("", !0)
+			], 2))), 128))], 2)) : a("", !0),
+			e.$slots.hint ? (m(), o("div", P, [_(e.$slots, "hint", {}, void 0, !0)])) : a("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=design-system278.js.map

package/dist/design-system278.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system278.js","names":["$slots"],"sources":["../src/components/BUpload/BUpload.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted, useAttrs } from 'vue';\nimport { useComponentId } from '@/composables/useComponentId';\nimport {\n  BUploadListType,\n  BUploadFileStatus,\n  type BUploadFile,\n  type BUploadChangeInfo,\n  type BUploadRequestOption,\n  type BUploadShowUploadList,\n} from './types';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  accept = '',\n  action = '',\n  multiple = false,\n  disabled = false,\n  directory = false,\n  maxCount,\n  listType = BUploadListType.Text,\n  method = 'POST',\n  name: fieldName = 'file',\n  headers,\n  data,\n  withCredentials = false,\n  openFileDialogOnClick = true,\n  showUploadList = true,\n  defaultFileList = [],\n  beforeUpload,\n  customRequest,\n} = defineProps<{\n  /** File types that can be accepted (MIME types or extensions). */\n  accept?: string;\n  /** Uploading URL. */\n  action?: string | ((file: File) => Promise<string>);\n  /** Whether to support multiple file selection. */\n  multiple?: boolean;\n  /** Whether to disable the upload button. */\n  disabled?: boolean;\n  /** Support uploading directories. */\n  directory?: boolean;\n  /** Limit the number of uploaded files. */\n  maxCount?: number;\n  /** Built-in style of the upload list. */\n  listType?: BUploadListType | `${BUploadListType}`;\n  /** HTTP method for upload request. */\n  method?: string;\n  /** The name of the file field in the upload request. */\n  name?: string;\n  /** Custom request headers for upload. */\n  headers?: Record<string, string>;\n  /** Extra data to include with the upload request. */\n  data?: Record<string, unknown> | ((file: BUploadFile) => Record<string, unknown>);\n  /** Whether to send cookies with the request. */\n  withCredentials?: boolean;\n  /** Whether clicking the component opens the file dialog. */\n  openFileDialogOnClick?: boolean;\n  /** Whether to show the upload list. */\n  showUploadList?: boolean | BUploadShowUploadList;\n  /** Initial file list for uncontrolled usage. */\n  defaultFileList?: BUploadFile[];\n  /** Hook before uploading. Return false or a rejected Promise to stop. */\n  beforeUpload?: (file: File, fileList: File[]) => boolean | Promise<File | Blob | boolean | void>;\n  /** Override the default upload behavior. */\n  customRequest?: (options: BUploadRequestOption) => void;\n}>();\n//#endregion\n\n//#region Model & Events\nconst model = defineModel<BUploadFile[]>('fileList', { default: undefined });\n\nconst emit = defineEmits<{\n  change: [info: BUploadChangeInfo];\n  remove: [file: BUploadFile];\n  preview: [file: BUploadFile];\n  download: [file: BUploadFile];\n  drop: [event: DragEvent];\n}>();\n//#endregion\n\n//#region Internal State\nconst { componentUID } = useComponentId();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst dragOver = ref(false);\nconst internalFileList = ref<BUploadFile[]>(Array.isArray(defaultFileList) ? [...defaultFileList] : []);\n\nconst fileList = computed<BUploadFile[]>({\n  get: () => (model.value !== undefined ? model.value : internalFileList.value),\n  set: (val) => {\n    internalFileList.value = val;\n    if (model.value !== undefined) {\n      model.value = val;\n    }\n  },\n});\n\nonMounted(() => {\n  if (model.value === undefined && defaultFileList.length > 0) {\n    internalFileList.value = [...defaultFileList];\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalFileList.value = val;\n    }\n  },\n);\n\nconst isPictureCard = computed(\n  () =>\n    listType === BUploadListType.PictureCard ||\n    listType === BUploadListType.PictureCircle,\n);\n\nconst showListConfig = computed<BUploadShowUploadList | false>(() => {\n  if (showUploadList === false) return false;\n  if (showUploadList === true) {\n    return { showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: false };\n  }\n  return showUploadList;\n});\n\nconst atMaxCount = computed(() => maxCount !== undefined && maxCount !== 1 && fileList.value.length >= maxCount);\n//#endregion\n\n//#region Upload Logic\nlet fileUidCounter = 0;\n\nfunction genUid(): string {\n  fileUidCounter += 1;\n  return `b-upload-${componentUID.value}-${fileUidCounter}-${Date.now()}`;\n}\n\nfunction fileToUploadFile(file: File): BUploadFile {\n  return {\n    uid: genUid(),\n    name: file.name,\n    size: file.size,\n    type: file.type,\n    status: BUploadFileStatus.Uploading,\n    percent: 0,\n    originFileObj: file,\n  };\n}\n\nfunction triggerChange(file: BUploadFile, newFileList: BUploadFile[], event?: ProgressEvent) {\n  fileList.value = newFileList;\n  emit('change', { file, fileList: newFileList, event });\n}\n\nfunction defaultUpload(options: BUploadRequestOption) {\n  const xhr = new XMLHttpRequest();\n\n  xhr.upload.addEventListener('progress', (e) => {\n    if (e.lengthComputable && options.onProgress) {\n      options.onProgress({ percent: Math.round((e.loaded / e.total) * 100) });\n    }\n  });\n\n  xhr.addEventListener('load', () => {\n    if (xhr.status >= 200 && xhr.status < 300) {\n      options.onSuccess?.(xhr.response);\n    } else {\n      options.onError?.(new Error(`Upload failed with status ${xhr.status}`));\n    }\n  });\n\n  xhr.addEventListener('error', () => {\n    options.onError?.(new Error('Upload network error'));\n  });\n\n  xhr.open(options.method || 'POST', options.action, true);\n\n  if (options.withCredentials) {\n    xhr.withCredentials = true;\n  }\n\n  if (options.headers) {\n    Object.entries(options.headers).forEach(([key, val]) => {\n      xhr.setRequestHeader(key, val);\n    });\n  }\n\n  const formData = new FormData();\n  if (options.data) {\n    Object.entries(options.data).forEach(([key, val]) => {\n      formData.append(key, val as string);\n    });\n  }\n  formData.append(options.filename, options.file);\n\n  xhr.send(formData);\n}\n\nasync function uploadFile(file: File, rawFiles: File[]) {\n  if (beforeUpload) {\n    try {\n      const result = await beforeUpload(file, rawFiles);\n      if (result === false) return;\n      if (result instanceof Blob) {\n        const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });\n        processUpload(transformed);\n        return;\n      }\n    } catch {\n      return;\n    }\n  }\n  processUpload(file);\n}\n\nfunction processUpload(file: File) {\n  const uploadFile = fileToUploadFile(file);\n  let newList: BUploadFile[];\n\n  if (maxCount === 1) {\n    newList = [uploadFile];\n  } else if (maxCount !== undefined) {\n    newList = [...fileList.value, uploadFile].slice(-maxCount);\n  } else {\n    newList = [...fileList.value, uploadFile];\n  }\n\n  triggerChange(uploadFile, newList);\n\n  const resolvedAction = typeof action === 'function' ? action(file) : Promise.resolve(action);\n\n  resolvedAction.then((url: string) => {\n    const requestFn = customRequest || defaultUpload;\n    const extraData = typeof data === 'function' ? data(uploadFile) : (data || {});\n\n    requestFn({\n      action: url,\n      file,\n      filename: fieldName,\n      headers,\n      data: extraData,\n      withCredentials,\n      method,\n      onProgress: (e) => {\n        const updatedFile = { ...uploadFile, percent: e.percent };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onSuccess: (response) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Done,\n          percent: 100,\n          response,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onError: (error) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Error,\n          error,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n    });\n  });\n}\n\nfunction handleFiles(files: FileList | null) {\n  if (!files || files.length === 0) return;\n\n  const rawFiles = Array.from(files);\n  let filesToUpload: File[];\n\n  if (maxCount === 1) {\n    filesToUpload = rawFiles.slice(0, 1);\n  } else if (maxCount !== undefined) {\n    const remaining = maxCount - fileList.value.length;\n    filesToUpload = remaining > 0 ? rawFiles.slice(0, remaining) : [];\n  } else {\n    filesToUpload = rawFiles;\n  }\n\n  filesToUpload.forEach((file) => uploadFile(file, rawFiles));\n}\n//#endregion\n\n//#region Event Handlers\nfunction handleClick() {\n  if (disabled || !openFileDialogOnClick || atMaxCount.value) return;\n  inputRef.value?.click();\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || atMaxCount.value) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    inputRef.value?.click();\n  }\n}\n\nfunction handleInputChange(event: Event) {\n  const input = event.target as HTMLInputElement;\n  handleFiles(input.files);\n  input.value = '';\n}\n\nfunction handleDragOver(event: DragEvent) {\n  event.preventDefault();\n  if (disabled) return;\n  dragOver.value = true;\n}\n\nfunction handleDragLeave(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n  if (disabled) return;\n  emit('drop', event);\n  handleFiles(event.dataTransfer?.files ?? null);\n}\n\nfunction handleRemove(file: BUploadFile) {\n  emit('remove', file);\n  const newList = fileList.value.filter((f) => f.uid !== file.uid);\n  triggerChange({ ...file, status: BUploadFileStatus.Removed }, newList);\n}\n\nfunction handlePreview(file: BUploadFile) {\n  emit('preview', file);\n}\n\nfunction handleDownload(file: BUploadFile) {\n  emit('download', file);\n}\n//#endregion\n\n//#region Expose\ndefineExpose({\n  /** Open the native file dialog programmatically. */\n  openFileDialog: () => inputRef.value?.click(),\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    class=\"b-upload\"\n    :class=\"{\n      'b-upload--disabled': disabled,\n      'b-upload--drag-over': dragOver,\n      [`b-upload--${listType}`]: true,\n    }\"\n  >\n    <!-- Upload trigger area -->\n    <div\n      v-if=\"!isPictureCard || !atMaxCount\"\n      class=\"b-upload__trigger\"\n      role=\"button\"\n      :tabindex=\"disabled ? -1 : 0\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-label=\"(attrs['aria-label'] as string) || 'Upload file'\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeyDown\"\n      @dragover=\"handleDragOver\"\n      @dragleave=\"handleDragLeave\"\n      @drop=\"handleDrop\"\n    >\n      <slot>\n        <div v-if=\"isPictureCard\" class=\"b-upload__card-trigger\">\n          <span class=\"b-upload__plus-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </span>\n          <span class=\"b-upload__card-text\">Upload</span>\n        </div>\n        <span v-else class=\"b-upload__default-text\">Click to Upload</span>\n      </slot>\n    </div>\n\n    <!-- Hidden file input -->\n    <input\n      ref=\"inputRef\"\n      class=\"b-upload__input\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"disabled\"\n      :webkitdirectory=\"directory || undefined\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      @change=\"handleInputChange\"\n    />\n\n    <!-- File list -->\n    <div\n      v-if=\"showListConfig !== false && fileList.length > 0\"\n      class=\"b-upload__list\"\n      :class=\"`b-upload__list--${listType}`\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      <div\n        v-for=\"file in fileList\"\n        :key=\"file.uid\"\n        class=\"b-upload__item\"\n        :class=\"{\n          'b-upload__item--error': file.status === BUploadFileStatus.Error,\n          'b-upload__item--done': file.status === BUploadFileStatus.Done,\n          'b-upload__item--uploading': file.status === BUploadFileStatus.Uploading,\n        }\"\n        role=\"listitem\"\n      >\n        <!-- Thumbnail for picture types -->\n        <span\n          v-if=\"listType !== BUploadListType.Text\"\n          class=\"b-upload__item-thumbnail\"\n          aria-hidden=\"true\"\n        >\n          <img\n            v-if=\"file.thumbUrl || file.url\"\n            :src=\"file.thumbUrl || file.url\"\n            :alt=\"file.name\"\n            class=\"b-upload__item-image\"\n          />\n          <span v-else class=\"b-upload__item-file-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z\" />\n              <polyline points=\"14,2 14,8 20,8\" />\n            </svg>\n          </span>\n        </span>\n\n        <!-- File info -->\n        <span class=\"b-upload__item-info\">\n          <span class=\"b-upload__item-name\" :title=\"file.name\">\n            {{ file.name }}\n          </span>\n        </span>\n\n        <!-- Actions -->\n        <span class=\"b-upload__item-actions\">\n          <button\n            v-if=\"showListConfig && showListConfig.showPreviewIcon && (file.url || file.thumbUrl)\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Preview file\"\n            @click.stop=\"handlePreview(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showDownloadIcon && file.status === BUploadFileStatus.Done\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Download file\"\n            @click.stop=\"handleDownload(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\" />\n              <polyline points=\"7,10 12,15 17,10\" />\n              <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showRemoveIcon\"\n            class=\"b-upload__action-btn b-upload__action-btn--remove\"\n            type=\"button\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled\"\n            @click.stop=\"handleRemove(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n            </svg>\n          </button>\n        </span>\n\n        <!-- Progress bar -->\n        <div\n          v-if=\"file.status === BUploadFileStatus.Uploading\"\n          class=\"b-upload__progress\"\n          role=\"progressbar\"\n          :aria-valuenow=\"file.percent ?? 0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-label=\"`Uploading ${file.name}`\"\n        >\n          <div\n            class=\"b-upload__progress-bar\"\n            :style=\"{ width: `${file.percent ?? 0}%` }\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Hint slot -->\n    <div v-if=\"$slots.hint\" class=\"b-upload__hint\">\n      <slot name=\"hint\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-upload {\n  --b-upload-actions-color: rgba(0, 0, 0, 0.45);\n  --b-upload-card-size: 102px;\n  --b-upload-color-primary: #1677ff;\n  --b-upload-color-error: #d32f2f;\n  --b-upload-color-success: #52c41a;\n  --b-upload-color-border: #d9d9d9;\n  --b-upload-color-bg: #fafafa;\n  --b-upload-color-bg-hover: #f0f0f0;\n  --b-upload-color-text: rgba(0, 0, 0, 0.88);\n  --b-upload-color-text-secondary: rgba(0, 0, 0, 0.6);\n  --b-upload-border-radius: 8px;\n  --b-upload-line-height: 1.5715;\n  --b-upload-font-size: 14px;\n  --b-upload-progress-stroke-width: 2px;\n\n  position: relative;\n  font-size: var(--b-upload-font-size);\n  line-height: var(--b-upload-line-height);\n  color: var(--b-upload-color-text);\n}\n\n/* Picture-card/circle layout: root becomes flex container */\n.b-upload--picture-card,\n.b-upload--picture-circle {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Hidden file input */\n.b-upload__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Trigger */\n.b-upload__trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: var(--b-upload-border-radius);\n}\n\n.b-upload__trigger:focus-visible {\n  outline: 2px solid var(--b-upload-color-primary);\n  outline-offset: 2px;\n}\n\n.b-upload--disabled .b-upload__trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Default text trigger */\n.b-upload__default-text {\n  padding: 4px 15px;\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: #fff;\n  color: var(--b-upload-color-text);\n  transition: border-color 0.2s, color 0.2s;\n}\n\n.b-upload__trigger:hover .b-upload__default-text {\n  color: var(--b-upload-color-primary);\n  border-color: var(--b-upload-color-primary);\n}\n\n/* Picture card trigger */\n.b-upload--picture-card .b-upload__trigger,\n.b-upload--picture-circle .b-upload__trigger {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px dashed var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: var(--b-upload-color-bg);\n  transition: border-color 0.2s;\n}\n\n.b-upload--picture-circle .b-upload__trigger {\n  border-radius: 50%;\n}\n\n.b-upload--picture-card .b-upload__trigger:hover,\n.b-upload--picture-circle .b-upload__trigger:hover {\n  border-color: var(--b-upload-color-primary);\n}\n\n.b-upload__card-trigger {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__plus-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__plus-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.b-upload__card-text {\n  font-size: var(--b-upload-font-size);\n}\n\n/* Drag states */\n.b-upload--drag-over .b-upload__trigger {\n  border-color: var(--b-upload-color-primary);\n  background: color-mix(in srgb, var(--b-upload-color-primary) 5%, transparent);\n}\n\n/* File list - text type */\n.b-upload__list {\n  margin-top: 8px;\n}\n\n.b-upload__list--text .b-upload__item,\n.b-upload__list--picture .b-upload__item {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: var(--b-upload-border-radius);\n  transition: background-color 0.2s;\n  position: relative;\n}\n\n.b-upload__list--text .b-upload__item:hover,\n.b-upload__list--picture .b-upload__item:hover {\n  background: var(--b-upload-color-bg);\n}\n\n/* File list - picture-card type */\n.b-upload__list--picture-card,\n.b-upload__list--picture-circle {\n  display: contents;\n}\n\n.b-upload__list--picture-card .b-upload__item,\n.b-upload__list--picture-circle .b-upload__item {\n  position: relative;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__list--picture-circle .b-upload__item {\n  border-radius: 50%;\n}\n\n/* Thumbnails */\n.b-upload__item-thumbnail {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n  margin-right: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-thumbnail,\n.b-upload__list--picture-circle .b-upload__item-thumbnail {\n  width: 100%;\n  height: 100%;\n  margin-right: 0;\n}\n\n.b-upload__item-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n}\n\n.b-upload__item-file-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__item-file-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* File info */\n.b-upload__item-info {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.b-upload__item-name {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-upload-color-text);\n  transition: color 0.2s;\n}\n\n.b-upload__item--error .b-upload__item-name {\n  color: var(--b-upload-color-error);\n}\n\n/* For card mode, hide file info text */\n.b-upload__list--picture-card .b-upload__item-info,\n.b-upload__list--picture-circle .b-upload__item-info {\n  display: none;\n}\n\n/* Actions */\n.b-upload__item-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item-actions {\n  position: absolute;\n  inset: 0;\n  margin-left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-upload__list--picture-card .b-upload__item:hover .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item:hover .b-upload__item-actions {\n  opacity: 1;\n}\n\n.b-upload__action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--b-upload-actions-color);\n  transition: color 0.2s;\n}\n\n.b-upload__action-btn:hover {\n  color: var(--b-upload-color-primary);\n}\n\n.b-upload__action-btn--remove:hover {\n  color: var(--b-upload-color-error);\n}\n\n.b-upload__action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.b-upload__action-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn,\n.b-upload__list--picture-circle .b-upload__action-btn {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.b-upload__list--picture-card .b-upload__action-btn svg,\n.b-upload__list--picture-circle .b-upload__action-btn svg {\n  width: 24px;\n  height: 24px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn:hover,\n.b-upload__list--picture-circle .b-upload__action-btn:hover {\n  color: #fff;\n}\n\n/* Progress bar */\n.b-upload__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--b-upload-progress-stroke-width);\n  background: var(--b-upload-color-bg-hover);\n  overflow: hidden;\n}\n\n.b-upload__progress-bar {\n  height: 100%;\n  background: var(--b-upload-color-primary);\n  transition: width 0.2s;\n}\n\n/* Hint */\n.b-upload__hint {\n  margin-top: 8px;\n  color: var(--b-upload-color-text-secondary);\n  font-size: 12px;\n}\n\n/* Dark mode - explicit */\n[data-prefers-color='dark'] .b-upload {\n  --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n  --b-upload-color-border: #424242;\n  --b-upload-color-bg: #1f1f1f;\n  --b-upload-color-bg-hover: #2f2f2f;\n  --b-upload-color-text: rgba(255, 255, 255, 0.85);\n  --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Dark mode - follow system (only when no explicit preference is set) */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-prefers-color]) .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-upload__trigger,\n  .b-upload__default-text,\n  .b-upload__item-name,\n  .b-upload__action-btn,\n  .b-upload__progress-bar,\n  .b-upload__item-actions,\n  .b-upload__list--text .b-upload__item,\n  .b-upload__list--picture .b-upload__item {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcA,IAAM,IAAQ,GAAU,EA4DlB,IAAQ,EAA0B,GAAC,WAAmC,EAEtE,IAAO,GAUP,EAAE,oBAAiB,GAAgB,EACnC,IAAW,EAA6B,KAAK,EAC7C,IAAW,EAAI,GAAM,EACrB,IAAmB,EAAmB,MAAM,QAAQ,EAAA,gBAAgB,GAAG,CAAC,GAAG,EAAA,gBAAgB,GAAG,EAAE,CAAC,EAEjG,IAAW,EAAwB;GACvC,WAAY,EAAM,UAAU,KAAA,IAA0B,EAAiB,QAA/B,EAAM;GAC9C,MAAM,MAAQ;AAEZ,IADA,EAAiB,QAAQ,GACrB,EAAM,UAAU,KAAA,MAClB,EAAM,QAAQ;;GAGnB,CAAC;AAQF,EANA,QAAgB;AACd,GAAI,EAAM,UAAU,KAAA,KAAa,EAAA,gBAAgB,SAAS,MACxD,EAAiB,QAAQ,CAAC,GAAG,EAAA,gBAAgB;IAE/C,EAEF,SACQ,EAAM,QACX,MAAQ;AACP,GAAI,MAAQ,KAAA,MACV,EAAiB,QAAQ;IAG9B;EAED,IAAM,IAAgB,QAElB,EAAA,aAAa,EAAgB,eAC7B,EAAA,aAAa,EAAgB,cAChC,EAEK,IAAiB,QACjB,EAAA,mBAAmB,KAAc,KACjC,EAAA,mBAAmB,KACd;GAAE,iBAAiB;GAAM,gBAAgB;GAAM,kBAAkB;GAAO,GAE1E,EAAA,eACP,EAEI,IAAa,QAAe,EAAA,aAAa,KAAA,KAAa,EAAA,aAAa,KAAK,EAAS,MAAM,UAAU,EAAA,SAAS,EAI5G,IAAiB;EAErB,SAAS,IAAiB;AAExB,UADA,KAAkB,GACX,YAAY,EAAa,MAAM,GAAG,EAAe,GAAG,KAAK,KAAK;;EAGvE,SAAS,EAAiB,GAAyB;AACjD,UAAO;IACL,KAAK,GAAQ;IACb,MAAM,EAAK;IACX,MAAM,EAAK;IACX,MAAM,EAAK;IACX,QAAQ,EAAkB;IAC1B,SAAS;IACT,eAAe;IAChB;;EAGH,SAAS,EAAc,GAAmB,GAA4B,GAAuB;AAE3F,GADA,EAAS,QAAQ,GACjB,EAAK,UAAU;IAAE;IAAM,UAAU;IAAa;IAAO,CAAC;;EAGxD,SAAS,GAAc,GAA+B;GACpD,IAAM,IAAM,IAAI,gBAAgB;AA0BhC,GAxBA,EAAI,OAAO,iBAAiB,aAAa,MAAM;AAC7C,IAAI,EAAE,oBAAoB,EAAQ,cAChC,EAAQ,WAAW,EAAE,SAAS,KAAK,MAAO,EAAE,SAAS,EAAE,QAAS,IAAI,EAAE,CAAC;KAEzE,EAEF,EAAI,iBAAiB,cAAc;AACjC,IAAI,EAAI,UAAU,OAAO,EAAI,SAAS,MACpC,EAAQ,YAAY,EAAI,SAAS,GAEjC,EAAQ,UAAU,gBAAI,MAAM,6BAA6B,EAAI,SAAS,CAAC;KAEzE,EAEF,EAAI,iBAAiB,eAAe;AAClC,MAAQ,UAAU,gBAAI,MAAM,uBAAuB,CAAC;KACpD,EAEF,EAAI,KAAK,EAAQ,UAAU,QAAQ,EAAQ,QAAQ,GAAK,EAEpD,EAAQ,oBACV,EAAI,kBAAkB,KAGpB,EAAQ,WACV,OAAO,QAAQ,EAAQ,QAAQ,CAAC,SAAS,CAAC,GAAK,OAAS;AACtD,MAAI,iBAAiB,GAAK,EAAI;KAC9B;GAGJ,IAAM,IAAW,IAAI,UAAU;AAQ/B,GAPI,EAAQ,QACV,OAAO,QAAQ,EAAQ,KAAK,CAAC,SAAS,CAAC,GAAK,OAAS;AACnD,MAAS,OAAO,GAAK,EAAc;KACnC,EAEJ,EAAS,OAAO,EAAQ,UAAU,EAAQ,KAAK,EAE/C,EAAI,KAAK,EAAS;;EAGpB,eAAe,GAAW,GAAY,GAAkB;AACtD,OAAI,EAAA,aACF,KAAI;IACF,IAAM,IAAS,MAAM,EAAA,aAAa,GAAM,EAAS;AACjD,QAAI,MAAW,GAAO;AACtB,QAAI,aAAkB,MAAM;AAE1B,OADoB,aAAkB,OAAO,IAAS,IAAI,KAAK,CAAC,EAAO,EAAE,EAAK,MAAM,EAAE,MAAM,EAAO,MAAM,CAAC,CAChF;AAC1B;;WAEI;AACN;;AAGJ,KAAc,EAAK;;EAGrB,SAAS,EAAc,GAAY;GACjC,IAAM,IAAa,EAAiB,EAAK,EACrC;AAcJ,GAZA,AAGE,IAHE,EAAA,aAAa,IACL,CAAC,EAAW,GACb,EAAA,aAAa,KAAA,IAGZ,CAAC,GAAG,EAAS,OAAO,EAAW,GAF/B,CAAC,GAAG,EAAS,OAAO,EAAW,CAAC,MAAM,CAAC,EAAA,SAAS,EAK5D,EAAc,GAAY,EAAQ,GAEX,OAAO,EAAA,UAAW,aAAa,EAAA,OAAO,EAAK,GAAG,QAAQ,QAAQ,EAAA,OAAO,EAE7E,MAAM,MAAgB;IACnC,IAAM,IAAY,EAAA,iBAAiB,IAC7B,IAAY,OAAO,EAAA,QAAS,aAAa,EAAA,KAAK,EAAW,GAAI,EAAA,QAAQ,EAAE;AAE7E,MAAU;KACR,QAAQ;KACR;KACA,UAAU,EAAA;KACV,SAAM,EAAA;KACN,MAAM;KACN,iBAAc,EAAA;KACd,QAAK,EAAA;KACL,aAAa,MAAM;MACjB,IAAM,IAAc;OAAE,GAAG;OAAY,SAAS,EAAE;OAAS;AAIzD,QAAc,GAHM,EAAS,MAAM,KAAK,MACtC,EAAE,QAAQ,EAAW,MAAM,IAAc,EAC1C,CACsC;;KAEzC,YAAY,MAAa;MACvB,IAAM,IAAc;OAClB,GAAG;OACH,QAAQ,EAAkB;OAC1B,SAAS;OACT;OACD;AAID,QAAc,GAHM,EAAS,MAAM,KAAK,MACtC,EAAE,QAAQ,EAAW,MAAM,IAAc,EAC1C,CACsC;;KAEzC,UAAU,MAAU;MAClB,IAAM,IAAc;OAClB,GAAG;OACH,QAAQ,EAAkB;OAC1B;OACD;AAID,QAAc,GAHM,EAAS,MAAM,KAAK,MACtC,EAAE,QAAQ,EAAW,MAAM,IAAc,EAC1C,CACsC;;KAE1C,CAAC;KACF;;EAGJ,SAAS,EAAY,GAAwB;AAC3C,OAAI,CAAC,KAAS,EAAM,WAAW,EAAG;GAElC,IAAM,IAAW,MAAM,KAAK,EAAM,EAC9B;AAEJ,OAAI,EAAA,aAAa,EACf,KAAgB,EAAS,MAAM,GAAG,EAAE;YAC3B,EAAA,aAAa,KAAA,GAAW;IACjC,IAAM,IAAY,EAAA,WAAW,EAAS,MAAM;AAC5C,QAAgB,IAAY,IAAI,EAAS,MAAM,GAAG,EAAU,GAAG,EAAE;SAEjE,KAAgB;AAGlB,KAAc,SAAS,MAAS,GAAW,GAAM,EAAS,CAAC;;EAK7D,SAAS,KAAc;AACjB,KAAA,YAAY,CAAC,EAAA,yBAAyB,EAAW,SACrD,EAAS,OAAO,OAAO;;EAGzB,SAAS,EAAc,GAAsB;AACvC,KAAA,YAAY,EAAW,UACvB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,gBAAgB,EACtB,EAAS,OAAO,OAAO;;EAI3B,SAAS,GAAkB,GAAc;GACvC,IAAM,IAAQ,EAAM;AAEpB,GADA,EAAY,EAAM,MAAM,EACxB,EAAM,QAAQ;;EAGhB,SAAS,GAAe,GAAkB;AACxC,KAAM,gBAAgB,EAClB,GAAA,aACJ,EAAS,QAAQ;;EAGnB,SAAS,GAAgB,GAAkB;AAEzC,GADA,EAAM,gBAAgB,EACtB,EAAS,QAAQ;;EAGnB,SAAS,GAAW,GAAkB;AACpC,KAAM,gBAAgB,EACtB,EAAS,QAAQ,IACb,GAAA,aACJ,EAAK,QAAQ,EAAM,EACnB,EAAY,EAAM,cAAc,SAAS,KAAK;;EAGhD,SAAS,GAAa,GAAmB;AACvC,KAAK,UAAU,EAAK;GACpB,IAAM,IAAU,EAAS,MAAM,QAAQ,MAAM,EAAE,QAAQ,EAAK,IAAI;AAChE,KAAc;IAAE,GAAG;IAAM,QAAQ,EAAkB;IAAS,EAAE,EAAQ;;EAGxE,SAAS,GAAc,GAAmB;AACxC,KAAK,WAAW,EAAK;;EAGvB,SAAS,GAAe,GAAmB;AACzC,KAAK,YAAY,EAAK;;SAKxB,EAAa,EAEX,sBAAsB,EAAS,OAAO,OAAO,EAC9C,CAAC,kBAKA,EAgKM,OAAA,EA/JJ,OAAK,EAAA,CAAC,YAAU;yBACsB,EAAA;0BAAuC,EAAA;iBAA8B,EAAA,aAAQ;;IAQ1G,EAAA,SAAa,CAAK,EAAA,SAAA,GAAA,EAD3B,EAyBM,OAAA;;IAvBJ,OAAM;IACN,MAAK;IACJ,UAAU,EAAA,WAAQ,KAAA;IAClB,iBAAe,EAAA,YAAY,KAAA;IAC3B,cAAa,EAAA,EAAK,CAAA,iBAAA;IAClB,SAAO;IACP,WAAS;IACT,YAAU;IACV,aAAW;IACX,QAAM;OAEP,EAWO,EAAA,QAAA,WAAA,EAAA,QAAA,CAVM,EAAA,SAAA,GAAA,EAAX,EAQM,OARN,GAQM,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAA,uYAAA,EAAA,CAAA,CAAA,CAAA,KAAA,GAAA,EACN,EAAkE,QAAlE,GAA4C,kBAAe,EAAA,EAAA,GAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAK/D,EAWE,SAAA;aAVI;IAAJ,KAAI;IACJ,OAAM;IACN,MAAK;IACJ,QAAQ,EAAA,UAAU,KAAA;IAClB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,iBAAiB,EAAA,aAAa,KAAA;IAC/B,eAAY;IACZ,UAAS;IACR,UAAQ;;GAKH,EAAA,UAAc,MAAc,EAAA,MAAS,SAAM,KAAA,GAAA,EADnD,EAuGM,OAAA;;IArGJ,OAAK,EAAA,CAAC,kBAAgB,mBACK,EAAA,WAAQ,CAAA;IACnC,MAAK;IACL,cAAW;eAEX,EA+FM,GAAA,MAAA,EA9FW,EAAA,QAAR,YADT,EA+FM,OAAA;IA7FH,KAAK,EAAK;IACX,OAAK,EAAA,CAAC,kBAAgB;8BACuB,EAAK,WAAW,EAAA,EAAiB,CAAC;6BAAyC,EAAK,WAAW,EAAA,EAAiB,CAAC;kCAA6C,EAAK,WAAW,EAAA,EAAiB,CAAC;;IAKzO,MAAK;;IAIG,EAAA,aAAa,EAAA,EAAe,CAAC,OAaE,EAAA,IAAA,GAAA,IAbF,GAAA,EADrC,EAiBO,QAjBP,IAiBO,CAXG,EAAK,YAAY,EAAK,OAAA,GAAA,EAD9B,EAKE,OAAA;;KAHC,KAAK,EAAK,YAAY,EAAK;KAC3B,KAAK,EAAK;KACX,OAAM;6BAER,EAKO,QALP,IAKO,CAAA,GAAA,AAAA,EAAA,OAAA,CAJL,EAGM,OAAA;KAHD,SAAQ;KAAY,MAAK;KAAO,QAAO;KAAe,gBAAa;QACtE,EAAuE,QAAA,EAAjE,GAAE,8DAA4D,CAAA,EACpE,EAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA;IAMvC,EAIO,QAJP,GAIO,CAHL,EAEO,QAAA;KAFD,OAAM;KAAuB,OAAO,EAAK;SAC1C,EAAK,KAAI,EAAA,GAAA,EAAA,CAAA,CAAA;IAKhB,EAuCO,QAvCP,GAuCO;KArCG,EAAA,SAAkB,EAAA,MAAe,oBAAoB,EAAK,OAAO,EAAK,aAAA,GAAA,EAD9E,EAWS,UAAA;;MATP,OAAM;MACN,MAAK;MACL,cAAW;MACV,SAAK,GAAA,MAAO,GAAc,EAAI,EAAA,CAAA,OAAA,CAAA;sBAE/B,EAGM,OAAA;MAHD,SAAQ;MAAY,MAAK;MAAO,QAAO;MAAe,gBAAa;MAAI,eAAY;SACtF,EAAyD,QAAA,EAAnD,GAAE,gDAA8C,CAAA,EACtD,EAAgC,UAAA;MAAxB,IAAG;MAAK,IAAG;MAAK,GAAE;;KAItB,EAAA,SAAkB,EAAA,MAAe,oBAAoB,EAAK,WAAW,EAAA,EAAiB,CAAC,QAAA,GAAA,EAD/F,EAYS,UAAA;;MAVP,OAAM;MACN,MAAK;MACL,cAAW;MACV,SAAK,GAAA,MAAO,GAAe,EAAI,EAAA,CAAA,OAAA,CAAA;sBAEhC,EAIM,OAAA;MAJD,SAAQ;MAAY,MAAK;MAAO,QAAO;MAAe,gBAAa;MAAI,eAAY;;MACtF,EAAoD,QAAA,EAA9C,GAAE,2CAAyC,CAAA;MACjD,EAAsC,YAAA,EAA5B,QAAO,oBAAkB,CAAA;MACnC,EAAuC,QAAA;OAAjC,IAAG;OAAK,IAAG;OAAK,IAAG;OAAK,IAAG;;;KAI7B,EAAA,SAAkB,EAAA,MAAe,kBAAA,GAAA,EADzC,EAYS,UAAA;;MAVP,OAAM;MACN,MAAK;MACL,cAAW;MACV,UAAU,EAAA;MACV,SAAK,GAAA,MAAO,GAAa,EAAI,EAAA,CAAA,OAAA,CAAA;sBAE9B,EAGM,OAAA;MAHD,SAAQ;MAAY,MAAK;MAAO,QAAO;MAAe,gBAAa;MAAI,eAAY;SACtF,EAAsC,QAAA;MAAhC,IAAG;MAAK,IAAG;MAAI,IAAG;MAAI,IAAG;SAC/B,EAAsC,QAAA;MAAhC,IAAG;MAAI,IAAG;MAAI,IAAG;MAAK,IAAG;;;IAO7B,EAAK,WAAW,EAAA,EAAiB,CAAC,aAAA,GAAA,EAD1C,EAaM,OAAA;;KAXJ,OAAM;KACN,MAAK;KACJ,iBAAe,EAAK,WAAO;KAC5B,iBAAc;KACd,iBAAc;KACb,cAAU,aAAe,EAAK;QAE/B,EAGE,OAAA;KAFA,OAAM;KACL,OAAK,EAAA,EAAA,OAAA,GAAc,EAAK,WAAO,EAAA,IAAA,CAAA;;;GAO7BA,EAAAA,OAAO,QAAA,GAAA,EAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,QAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system280.js

@@ -0,0 +1,9 @@
+import e from "./design-system14.js";
+import t from "./design-system278.js";
+/* empty css                 */
+//#region src/components/BUpload/BUpload.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-36315fd9"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system280.js.map

package/dist/design-system280.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system280.js","names":[],"sources":["../src/components/BUpload/BUpload.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, watch, onMounted, useAttrs } from 'vue';\nimport { useComponentId } from '@/composables/useComponentId';\nimport {\n  BUploadListType,\n  BUploadFileStatus,\n  type BUploadFile,\n  type BUploadChangeInfo,\n  type BUploadRequestOption,\n  type BUploadShowUploadList,\n} from './types';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\n//#region Props\nconst {\n  accept = '',\n  action = '',\n  multiple = false,\n  disabled = false,\n  directory = false,\n  maxCount,\n  listType = BUploadListType.Text,\n  method = 'POST',\n  name: fieldName = 'file',\n  headers,\n  data,\n  withCredentials = false,\n  openFileDialogOnClick = true,\n  showUploadList = true,\n  defaultFileList = [],\n  beforeUpload,\n  customRequest,\n} = defineProps<{\n  /** File types that can be accepted (MIME types or extensions). */\n  accept?: string;\n  /** Uploading URL. */\n  action?: string | ((file: File) => Promise<string>);\n  /** Whether to support multiple file selection. */\n  multiple?: boolean;\n  /** Whether to disable the upload button. */\n  disabled?: boolean;\n  /** Support uploading directories. */\n  directory?: boolean;\n  /** Limit the number of uploaded files. */\n  maxCount?: number;\n  /** Built-in style of the upload list. */\n  listType?: BUploadListType | `${BUploadListType}`;\n  /** HTTP method for upload request. */\n  method?: string;\n  /** The name of the file field in the upload request. */\n  name?: string;\n  /** Custom request headers for upload. */\n  headers?: Record<string, string>;\n  /** Extra data to include with the upload request. */\n  data?: Record<string, unknown> | ((file: BUploadFile) => Record<string, unknown>);\n  /** Whether to send cookies with the request. */\n  withCredentials?: boolean;\n  /** Whether clicking the component opens the file dialog. */\n  openFileDialogOnClick?: boolean;\n  /** Whether to show the upload list. */\n  showUploadList?: boolean | BUploadShowUploadList;\n  /** Initial file list for uncontrolled usage. */\n  defaultFileList?: BUploadFile[];\n  /** Hook before uploading. Return false or a rejected Promise to stop. */\n  beforeUpload?: (file: File, fileList: File[]) => boolean | Promise<File | Blob | boolean | void>;\n  /** Override the default upload behavior. */\n  customRequest?: (options: BUploadRequestOption) => void;\n}>();\n//#endregion\n\n//#region Model & Events\nconst model = defineModel<BUploadFile[]>('fileList', { default: undefined });\n\nconst emit = defineEmits<{\n  change: [info: BUploadChangeInfo];\n  remove: [file: BUploadFile];\n  preview: [file: BUploadFile];\n  download: [file: BUploadFile];\n  drop: [event: DragEvent];\n}>();\n//#endregion\n\n//#region Internal State\nconst { componentUID } = useComponentId();\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst dragOver = ref(false);\nconst internalFileList = ref<BUploadFile[]>(Array.isArray(defaultFileList) ? [...defaultFileList] : []);\n\nconst fileList = computed<BUploadFile[]>({\n  get: () => (model.value !== undefined ? model.value : internalFileList.value),\n  set: (val) => {\n    internalFileList.value = val;\n    if (model.value !== undefined) {\n      model.value = val;\n    }\n  },\n});\n\nonMounted(() => {\n  if (model.value === undefined && defaultFileList.length > 0) {\n    internalFileList.value = [...defaultFileList];\n  }\n});\n\nwatch(\n  () => model.value,\n  (val) => {\n    if (val !== undefined) {\n      internalFileList.value = val;\n    }\n  },\n);\n\nconst isPictureCard = computed(\n  () =>\n    listType === BUploadListType.PictureCard ||\n    listType === BUploadListType.PictureCircle,\n);\n\nconst showListConfig = computed<BUploadShowUploadList | false>(() => {\n  if (showUploadList === false) return false;\n  if (showUploadList === true) {\n    return { showPreviewIcon: true, showRemoveIcon: true, showDownloadIcon: false };\n  }\n  return showUploadList;\n});\n\nconst atMaxCount = computed(() => maxCount !== undefined && maxCount !== 1 && fileList.value.length >= maxCount);\n//#endregion\n\n//#region Upload Logic\nlet fileUidCounter = 0;\n\nfunction genUid(): string {\n  fileUidCounter += 1;\n  return `b-upload-${componentUID.value}-${fileUidCounter}-${Date.now()}`;\n}\n\nfunction fileToUploadFile(file: File): BUploadFile {\n  return {\n    uid: genUid(),\n    name: file.name,\n    size: file.size,\n    type: file.type,\n    status: BUploadFileStatus.Uploading,\n    percent: 0,\n    originFileObj: file,\n  };\n}\n\nfunction triggerChange(file: BUploadFile, newFileList: BUploadFile[], event?: ProgressEvent) {\n  fileList.value = newFileList;\n  emit('change', { file, fileList: newFileList, event });\n}\n\nfunction defaultUpload(options: BUploadRequestOption) {\n  const xhr = new XMLHttpRequest();\n\n  xhr.upload.addEventListener('progress', (e) => {\n    if (e.lengthComputable && options.onProgress) {\n      options.onProgress({ percent: Math.round((e.loaded / e.total) * 100) });\n    }\n  });\n\n  xhr.addEventListener('load', () => {\n    if (xhr.status >= 200 && xhr.status < 300) {\n      options.onSuccess?.(xhr.response);\n    } else {\n      options.onError?.(new Error(`Upload failed with status ${xhr.status}`));\n    }\n  });\n\n  xhr.addEventListener('error', () => {\n    options.onError?.(new Error('Upload network error'));\n  });\n\n  xhr.open(options.method || 'POST', options.action, true);\n\n  if (options.withCredentials) {\n    xhr.withCredentials = true;\n  }\n\n  if (options.headers) {\n    Object.entries(options.headers).forEach(([key, val]) => {\n      xhr.setRequestHeader(key, val);\n    });\n  }\n\n  const formData = new FormData();\n  if (options.data) {\n    Object.entries(options.data).forEach(([key, val]) => {\n      formData.append(key, val as string);\n    });\n  }\n  formData.append(options.filename, options.file);\n\n  xhr.send(formData);\n}\n\nasync function uploadFile(file: File, rawFiles: File[]) {\n  if (beforeUpload) {\n    try {\n      const result = await beforeUpload(file, rawFiles);\n      if (result === false) return;\n      if (result instanceof Blob) {\n        const transformed = result instanceof File ? result : new File([result], file.name, { type: result.type });\n        processUpload(transformed);\n        return;\n      }\n    } catch {\n      return;\n    }\n  }\n  processUpload(file);\n}\n\nfunction processUpload(file: File) {\n  const uploadFile = fileToUploadFile(file);\n  let newList: BUploadFile[];\n\n  if (maxCount === 1) {\n    newList = [uploadFile];\n  } else if (maxCount !== undefined) {\n    newList = [...fileList.value, uploadFile].slice(-maxCount);\n  } else {\n    newList = [...fileList.value, uploadFile];\n  }\n\n  triggerChange(uploadFile, newList);\n\n  const resolvedAction = typeof action === 'function' ? action(file) : Promise.resolve(action);\n\n  resolvedAction.then((url: string) => {\n    const requestFn = customRequest || defaultUpload;\n    const extraData = typeof data === 'function' ? data(uploadFile) : (data || {});\n\n    requestFn({\n      action: url,\n      file,\n      filename: fieldName,\n      headers,\n      data: extraData,\n      withCredentials,\n      method,\n      onProgress: (e) => {\n        const updatedFile = { ...uploadFile, percent: e.percent };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onSuccess: (response) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Done,\n          percent: 100,\n          response,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n      onError: (error) => {\n        const updatedFile = {\n          ...uploadFile,\n          status: BUploadFileStatus.Error,\n          error,\n        };\n        const updatedList = fileList.value.map((f) =>\n          f.uid === uploadFile.uid ? updatedFile : f,\n        );\n        triggerChange(updatedFile, updatedList);\n      },\n    });\n  });\n}\n\nfunction handleFiles(files: FileList | null) {\n  if (!files || files.length === 0) return;\n\n  const rawFiles = Array.from(files);\n  let filesToUpload: File[];\n\n  if (maxCount === 1) {\n    filesToUpload = rawFiles.slice(0, 1);\n  } else if (maxCount !== undefined) {\n    const remaining = maxCount - fileList.value.length;\n    filesToUpload = remaining > 0 ? rawFiles.slice(0, remaining) : [];\n  } else {\n    filesToUpload = rawFiles;\n  }\n\n  filesToUpload.forEach((file) => uploadFile(file, rawFiles));\n}\n//#endregion\n\n//#region Event Handlers\nfunction handleClick() {\n  if (disabled || !openFileDialogOnClick || atMaxCount.value) return;\n  inputRef.value?.click();\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  if (disabled || atMaxCount.value) return;\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    inputRef.value?.click();\n  }\n}\n\nfunction handleInputChange(event: Event) {\n  const input = event.target as HTMLInputElement;\n  handleFiles(input.files);\n  input.value = '';\n}\n\nfunction handleDragOver(event: DragEvent) {\n  event.preventDefault();\n  if (disabled) return;\n  dragOver.value = true;\n}\n\nfunction handleDragLeave(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n}\n\nfunction handleDrop(event: DragEvent) {\n  event.preventDefault();\n  dragOver.value = false;\n  if (disabled) return;\n  emit('drop', event);\n  handleFiles(event.dataTransfer?.files ?? null);\n}\n\nfunction handleRemove(file: BUploadFile) {\n  emit('remove', file);\n  const newList = fileList.value.filter((f) => f.uid !== file.uid);\n  triggerChange({ ...file, status: BUploadFileStatus.Removed }, newList);\n}\n\nfunction handlePreview(file: BUploadFile) {\n  emit('preview', file);\n}\n\nfunction handleDownload(file: BUploadFile) {\n  emit('download', file);\n}\n//#endregion\n\n//#region Expose\ndefineExpose({\n  /** Open the native file dialog programmatically. */\n  openFileDialog: () => inputRef.value?.click(),\n});\n//#endregion\n</script>\n\n<template>\n  <div\n    class=\"b-upload\"\n    :class=\"{\n      'b-upload--disabled': disabled,\n      'b-upload--drag-over': dragOver,\n      [`b-upload--${listType}`]: true,\n    }\"\n  >\n    <!-- Upload trigger area -->\n    <div\n      v-if=\"!isPictureCard || !atMaxCount\"\n      class=\"b-upload__trigger\"\n      role=\"button\"\n      :tabindex=\"disabled ? -1 : 0\"\n      :aria-disabled=\"disabled || undefined\"\n      :aria-label=\"(attrs['aria-label'] as string) || 'Upload file'\"\n      @click=\"handleClick\"\n      @keydown=\"handleKeyDown\"\n      @dragover=\"handleDragOver\"\n      @dragleave=\"handleDragLeave\"\n      @drop=\"handleDrop\"\n    >\n      <slot>\n        <div v-if=\"isPictureCard\" class=\"b-upload__card-trigger\">\n          <span class=\"b-upload__plus-icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n              <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n              <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n            </svg>\n          </span>\n          <span class=\"b-upload__card-text\">Upload</span>\n        </div>\n        <span v-else class=\"b-upload__default-text\">Click to Upload</span>\n      </slot>\n    </div>\n\n    <!-- Hidden file input -->\n    <input\n      ref=\"inputRef\"\n      class=\"b-upload__input\"\n      type=\"file\"\n      :accept=\"accept || undefined\"\n      :multiple=\"multiple\"\n      :disabled=\"disabled\"\n      :webkitdirectory=\"directory || undefined\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      @change=\"handleInputChange\"\n    />\n\n    <!-- File list -->\n    <div\n      v-if=\"showListConfig !== false && fileList.length > 0\"\n      class=\"b-upload__list\"\n      :class=\"`b-upload__list--${listType}`\"\n      role=\"list\"\n      aria-label=\"Uploaded files\"\n    >\n      <div\n        v-for=\"file in fileList\"\n        :key=\"file.uid\"\n        class=\"b-upload__item\"\n        :class=\"{\n          'b-upload__item--error': file.status === BUploadFileStatus.Error,\n          'b-upload__item--done': file.status === BUploadFileStatus.Done,\n          'b-upload__item--uploading': file.status === BUploadFileStatus.Uploading,\n        }\"\n        role=\"listitem\"\n      >\n        <!-- Thumbnail for picture types -->\n        <span\n          v-if=\"listType !== BUploadListType.Text\"\n          class=\"b-upload__item-thumbnail\"\n          aria-hidden=\"true\"\n        >\n          <img\n            v-if=\"file.thumbUrl || file.url\"\n            :src=\"file.thumbUrl || file.url\"\n            :alt=\"file.name\"\n            class=\"b-upload__item-image\"\n          />\n          <span v-else class=\"b-upload__item-file-icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n              <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z\" />\n              <polyline points=\"14,2 14,8 20,8\" />\n            </svg>\n          </span>\n        </span>\n\n        <!-- File info -->\n        <span class=\"b-upload__item-info\">\n          <span class=\"b-upload__item-name\" :title=\"file.name\">\n            {{ file.name }}\n          </span>\n        </span>\n\n        <!-- Actions -->\n        <span class=\"b-upload__item-actions\">\n          <button\n            v-if=\"showListConfig && showListConfig.showPreviewIcon && (file.url || file.thumbUrl)\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Preview file\"\n            @click.stop=\"handlePreview(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n              <circle cx=\"12\" cy=\"12\" r=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showDownloadIcon && file.status === BUploadFileStatus.Done\"\n            class=\"b-upload__action-btn\"\n            type=\"button\"\n            aria-label=\"Download file\"\n            @click.stop=\"handleDownload(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\" />\n              <polyline points=\"7,10 12,15 17,10\" />\n              <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" />\n            </svg>\n          </button>\n          <button\n            v-if=\"showListConfig && showListConfig.showRemoveIcon\"\n            class=\"b-upload__action-btn b-upload__action-btn--remove\"\n            type=\"button\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled\"\n            @click.stop=\"handleRemove(file)\"\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n            </svg>\n          </button>\n        </span>\n\n        <!-- Progress bar -->\n        <div\n          v-if=\"file.status === BUploadFileStatus.Uploading\"\n          class=\"b-upload__progress\"\n          role=\"progressbar\"\n          :aria-valuenow=\"file.percent ?? 0\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-label=\"`Uploading ${file.name}`\"\n        >\n          <div\n            class=\"b-upload__progress-bar\"\n            :style=\"{ width: `${file.percent ?? 0}%` }\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <!-- Hint slot -->\n    <div v-if=\"$slots.hint\" class=\"b-upload__hint\">\n      <slot name=\"hint\" />\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-upload {\n  --b-upload-actions-color: rgba(0, 0, 0, 0.45);\n  --b-upload-card-size: 102px;\n  --b-upload-color-primary: #1677ff;\n  --b-upload-color-error: #d32f2f;\n  --b-upload-color-success: #52c41a;\n  --b-upload-color-border: #d9d9d9;\n  --b-upload-color-bg: #fafafa;\n  --b-upload-color-bg-hover: #f0f0f0;\n  --b-upload-color-text: rgba(0, 0, 0, 0.88);\n  --b-upload-color-text-secondary: rgba(0, 0, 0, 0.6);\n  --b-upload-border-radius: 8px;\n  --b-upload-line-height: 1.5715;\n  --b-upload-font-size: 14px;\n  --b-upload-progress-stroke-width: 2px;\n\n  position: relative;\n  font-size: var(--b-upload-font-size);\n  line-height: var(--b-upload-line-height);\n  color: var(--b-upload-color-text);\n}\n\n/* Picture-card/circle layout: root becomes flex container */\n.b-upload--picture-card,\n.b-upload--picture-circle {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Hidden file input */\n.b-upload__input {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Trigger */\n.b-upload__trigger {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: var(--b-upload-border-radius);\n}\n\n.b-upload__trigger:focus-visible {\n  outline: 2px solid var(--b-upload-color-primary);\n  outline-offset: 2px;\n}\n\n.b-upload--disabled .b-upload__trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Default text trigger */\n.b-upload__default-text {\n  padding: 4px 15px;\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: #fff;\n  color: var(--b-upload-color-text);\n  transition: border-color 0.2s, color 0.2s;\n}\n\n.b-upload__trigger:hover .b-upload__default-text {\n  color: var(--b-upload-color-primary);\n  border-color: var(--b-upload-color-primary);\n}\n\n/* Picture card trigger */\n.b-upload--picture-card .b-upload__trigger,\n.b-upload--picture-circle .b-upload__trigger {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px dashed var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  background: var(--b-upload-color-bg);\n  transition: border-color 0.2s;\n}\n\n.b-upload--picture-circle .b-upload__trigger {\n  border-radius: 50%;\n}\n\n.b-upload--picture-card .b-upload__trigger:hover,\n.b-upload--picture-circle .b-upload__trigger:hover {\n  border-color: var(--b-upload-color-primary);\n}\n\n.b-upload__card-trigger {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__plus-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__plus-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.b-upload__card-text {\n  font-size: var(--b-upload-font-size);\n}\n\n/* Drag states */\n.b-upload--drag-over .b-upload__trigger {\n  border-color: var(--b-upload-color-primary);\n  background: color-mix(in srgb, var(--b-upload-color-primary) 5%, transparent);\n}\n\n/* File list - text type */\n.b-upload__list {\n  margin-top: 8px;\n}\n\n.b-upload__list--text .b-upload__item,\n.b-upload__list--picture .b-upload__item {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: var(--b-upload-border-radius);\n  transition: background-color 0.2s;\n  position: relative;\n}\n\n.b-upload__list--text .b-upload__item:hover,\n.b-upload__list--picture .b-upload__item:hover {\n  background: var(--b-upload-color-bg);\n}\n\n/* File list - picture-card type */\n.b-upload__list--picture-card,\n.b-upload__list--picture-circle {\n  display: contents;\n}\n\n.b-upload__list--picture-card .b-upload__item,\n.b-upload__list--picture-circle .b-upload__item {\n  position: relative;\n  width: var(--b-upload-card-size);\n  height: var(--b-upload-card-size);\n  border: 1px solid var(--b-upload-color-border);\n  border-radius: var(--b-upload-border-radius);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.b-upload__list--picture-circle .b-upload__item {\n  border-radius: 50%;\n}\n\n/* Thumbnails */\n.b-upload__item-thumbnail {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 48px;\n  height: 48px;\n  margin-right: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-thumbnail,\n.b-upload__list--picture-circle .b-upload__item-thumbnail {\n  width: 100%;\n  height: 100%;\n  margin-right: 0;\n}\n\n.b-upload__item-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: cover;\n}\n\n.b-upload__item-file-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--b-upload-color-text-secondary);\n}\n\n.b-upload__item-file-icon svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* File info */\n.b-upload__item-info {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.b-upload__item-name {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--b-upload-color-text);\n  transition: color 0.2s;\n}\n\n.b-upload__item--error .b-upload__item-name {\n  color: var(--b-upload-color-error);\n}\n\n/* For card mode, hide file info text */\n.b-upload__list--picture-card .b-upload__item-info,\n.b-upload__list--picture-circle .b-upload__item-info {\n  display: none;\n}\n\n/* Actions */\n.b-upload__item-actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: 8px;\n}\n\n.b-upload__list--picture-card .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item-actions {\n  position: absolute;\n  inset: 0;\n  margin-left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-upload__list--picture-card .b-upload__item:hover .b-upload__item-actions,\n.b-upload__list--picture-circle .b-upload__item:hover .b-upload__item-actions {\n  opacity: 1;\n}\n\n.b-upload__action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--b-upload-actions-color);\n  transition: color 0.2s;\n}\n\n.b-upload__action-btn:hover {\n  color: var(--b-upload-color-primary);\n}\n\n.b-upload__action-btn--remove:hover {\n  color: var(--b-upload-color-error);\n}\n\n.b-upload__action-btn:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.b-upload__action-btn svg {\n  width: 16px;\n  height: 16px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn,\n.b-upload__list--picture-circle .b-upload__action-btn {\n  color: rgba(255, 255, 255, 0.85);\n}\n\n.b-upload__list--picture-card .b-upload__action-btn svg,\n.b-upload__list--picture-circle .b-upload__action-btn svg {\n  width: 24px;\n  height: 24px;\n}\n\n.b-upload__list--picture-card .b-upload__action-btn:hover,\n.b-upload__list--picture-circle .b-upload__action-btn:hover {\n  color: #fff;\n}\n\n/* Progress bar */\n.b-upload__progress {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--b-upload-progress-stroke-width);\n  background: var(--b-upload-color-bg-hover);\n  overflow: hidden;\n}\n\n.b-upload__progress-bar {\n  height: 100%;\n  background: var(--b-upload-color-primary);\n  transition: width 0.2s;\n}\n\n/* Hint */\n.b-upload__hint {\n  margin-top: 8px;\n  color: var(--b-upload-color-text-secondary);\n  font-size: 12px;\n}\n\n/* Dark mode - explicit */\n[data-prefers-color='dark'] .b-upload {\n  --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n  --b-upload-color-border: #424242;\n  --b-upload-color-bg: #1f1f1f;\n  --b-upload-color-bg-hover: #2f2f2f;\n  --b-upload-color-text: rgba(255, 255, 255, 0.85);\n  --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Dark mode - follow system (only when no explicit preference is set) */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-prefers-color]) .b-upload {\n    --b-upload-actions-color: rgba(255, 255, 255, 0.45);\n    --b-upload-color-border: #424242;\n    --b-upload-color-bg: #1f1f1f;\n    --b-upload-color-bg-hover: #2f2f2f;\n    --b-upload-color-text: rgba(255, 255, 255, 0.85);\n    --b-upload-color-text-secondary: rgba(255, 255, 255, 0.6);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-upload__trigger,\n  .b-upload__default-text,\n  .b-upload__item-name,\n  .b-upload__action-btn,\n  .b-upload__progress-bar,\n  .b-upload__item-actions,\n  .b-upload__list--text .b-upload__item,\n  .b-upload__list--picture .b-upload__item {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}