haze-ui 1.28.0 → 1.30.0

package/dist/components/Upload/UploadList.js

@@ -4,27 +4,38 @@ import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
 import n from "../Progress/Progress.js";
 /* empty css                     */
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useState as s } from "react";
+import { useEffect as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/Upload/UploadList.tsx
-var c = "haze-UploadList__listBase", l = "haze-UploadList__itemBase", u = "haze-UploadList__rowBase", d = "haze-UploadList__nameClass", f = "haze-UploadList__statusIcon", p = "haze-UploadList__successIcon", m = "haze-UploadList__errorIcon", h = "haze-UploadList__percentClass", g = "haze-UploadList__actionButton", _ = "haze-UploadList__cardGrid", v = "haze-UploadList__cardRemove", y = "haze-UploadList__cardBase", b = "haze-UploadList__cardImage", x = "haze-UploadList__cardFallback", S = "haze-UploadList__cardFallbackName", C = "haze-UploadList__cardMask", w = "haze-UploadList__cardMaskPercent", T = "haze-UploadList__cardErrorOverlay";
-function E(e, t, n, r) {
+var c = "haze-UploadList__listBase", l = "haze-UploadList__itemBase", u = "haze-UploadList__rowBase", d = "haze-UploadList__nameClass", f = "haze-UploadList__statusIcon", p = "haze-UploadList__successIcon", m = "haze-UploadList__errorIcon", h = "haze-UploadList__percentClass", g = "haze-UploadList__actionButton", _ = "haze-UploadList__cardGrid", v = "haze-UploadList__cardRemove", y = "haze-UploadList__cardBase", b = "haze-UploadList__cardImage", x = "haze-UploadList__cardFallback", S = "haze-UploadList__cardFallbackName", C = "haze-UploadList__cardMask", w = "haze-UploadList__cardMaskPercent", T = "haze-UploadList__cardErrorOverlay", E = "haze-UploadList__picThumb", D = "haze-UploadList__picThumbImg", O = "haze-UploadList__previewHit";
+function k(e, t, n, r) {
 	return {
 		remove: () => t(e.file),
 		retry: () => n(e.file),
 		cancel: () => r(e.file)
 	};
 }
-function D({ entry: o, actions: s, removeLabel: c }) {
-	let l = t("upload"), { file: _, status: v, percent: y } = o;
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("div", {
+function A(e) {
+	let t = e instanceof File && e.type.startsWith("image/"), [n, a] = i(null);
+	return r(() => {
+		if (!t) return;
+		let n = URL.createObjectURL(e);
+		return a(n), () => URL.revokeObjectURL(n);
+	}, [e, t]), e instanceof File ? n : e.url ?? null;
+}
+function j({ entry: r, actions: i, removeLabel: c, thumb: l }) {
+	let _ = t("upload"), { file: v, status: y, percent: b } = r, x = v instanceof File;
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("div", {
+		"data-slot": "row",
 		className: e([u]),
 		children: [
-			v === "success" && /* @__PURE__ */ i("span", {
+			l,
+			y === "success" && /* @__PURE__ */ o("span", {
+				"data-slot": "icon",
 				role: "img",
-				"aria-label": l.success,
+				"aria-label": _.success,
 				className: e([f, p]),
-				children: /* @__PURE__ */ i("svg", {
+				children: /* @__PURE__ */ o("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -33,14 +44,15 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					children: /* @__PURE__ */ i("polyline", { points: "20 6 9 17 4 12" })
+					children: /* @__PURE__ */ o("polyline", { points: "20 6 9 17 4 12" })
 				})
 			}),
-			v === "error" && /* @__PURE__ */ i("span", {
+			y === "error" && /* @__PURE__ */ o("span", {
+				"data-slot": "icon",
 				role: "img",
-				"aria-label": l.error,
+				"aria-label": _.error,
 				className: e([f, m]),
-				children: /* @__PURE__ */ a("svg", {
+				children: /* @__PURE__ */ s("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -50,18 +62,18 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					children: [
-						/* @__PURE__ */ i("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "12",
 							cy: "12",
 							r: "10"
 						}),
-						/* @__PURE__ */ i("line", {
+						/* @__PURE__ */ o("line", {
 							x1: "12",
 							y1: "8",
 							x2: "12",
 							y2: "12"
 						}),
-						/* @__PURE__ */ i("line", {
+						/* @__PURE__ */ o("line", {
 							x1: "12",
 							y1: "16",
 							x2: "12.01",
@@ -70,27 +82,30 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					]
 				})
 			}),
-			/* @__PURE__ */ i("span", {
-				title: _.name,
+			/* @__PURE__ */ o("span", {
+				"data-slot": "name",
+				title: v.name,
 				className: e([d]),
-				children: _.name
+				children: v.name
 			}),
-			v === "uploading" && /* @__PURE__ */ a("span", {
+			y === "uploading" && /* @__PURE__ */ s("span", {
+				"data-slot": "status",
 				className: e([h]),
 				children: [
-					l.uploading,
+					_.uploading,
 					" ",
-					y,
+					b,
 					"%"
 				]
 			}),
-			v === "uploading" ? /* @__PURE__ */ i("button", {
+			y === "uploading" ? /* @__PURE__ */ o("button", {
 				type: "button",
-				"aria-label": l.cancel,
+				"data-slot": "cancel-button",
+				"aria-label": _.cancel,
 				"data-action": "cancel",
-				onClick: s.cancel,
+				onClick: i.cancel,
 				className: e([g]),
-				children: /* @__PURE__ */ a("svg", {
+				children: /* @__PURE__ */ s("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -99,25 +114,26 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					children: [/* @__PURE__ */ i("line", {
+					children: [/* @__PURE__ */ o("line", {
 						x1: "18",
 						y1: "6",
 						x2: "6",
 						y2: "18"
-					}), /* @__PURE__ */ i("line", {
+					}), /* @__PURE__ */ o("line", {
 						x1: "6",
 						y1: "6",
 						x2: "18",
 						y2: "18"
 					})]
 				})
-			}) : /* @__PURE__ */ a(r, { children: [v === "error" && /* @__PURE__ */ i("button", {
+			}) : /* @__PURE__ */ s(a, { children: [y === "error" && x && /* @__PURE__ */ o("button", {
 				type: "button",
-				"aria-label": l.retry,
+				"data-slot": "retry-button",
+				"aria-label": _.retry,
 				"data-action": "retry",
-				onClick: s.retry,
+				onClick: i.retry,
 				className: e([g]),
-				children: /* @__PURE__ */ a("svg", {
+				children: /* @__PURE__ */ s("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -126,15 +142,16 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					children: [/* @__PURE__ */ i("polyline", { points: "23 4 23 10 17 10" }), /* @__PURE__ */ i("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })]
+					children: [/* @__PURE__ */ o("polyline", { points: "23 4 23 10 17 10" }), /* @__PURE__ */ o("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })]
 				})
-			}), /* @__PURE__ */ i("button", {
+			}), /* @__PURE__ */ o("button", {
 				type: "button",
-				"aria-label": c ?? l.remove,
+				"data-slot": "remove-button",
+				"aria-label": c ?? _.remove,
 				"data-action": "remove",
-				onClick: s.remove,
+				onClick: i.remove,
 				className: e([g]),
-				children: /* @__PURE__ */ a("svg", {
+				children: /* @__PURE__ */ s("svg", {
 					width: "16",
 					height: "16",
 					viewBox: "0 0 24 24",
@@ -143,61 +160,103 @@ function D({ entry: o, actions: s, removeLabel: c }) {
 					strokeWidth: "2",
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
-					children: [/* @__PURE__ */ i("polyline", { points: "3 6 5 6 21 6" }), /* @__PURE__ */ i("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })]
+					children: [/* @__PURE__ */ o("polyline", { points: "3 6 5 6 21 6" }), /* @__PURE__ */ o("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })]
 				})
 			})] })
 		]
-	}), (v === "uploading" || v === "error") && /* @__PURE__ */ i(n, {
-		value: y,
+	}), (y === "uploading" || y === "error" && x) && /* @__PURE__ */ o(n, {
+		value: b,
 		size: "sm",
-		color: v === "error" ? "danger" : "primary"
+		color: y === "error" ? "danger" : "primary"
 	})] });
 }
-function O({ entry: c, actions: l, removeLabel: u }) {
-	let d = t("upload"), { file: f, status: p, percent: m } = c, h = f.type.startsWith("image/"), [_, y] = s(null);
-	return o(() => {
-		if (!h) return;
-		let e = URL.createObjectURL(f);
-		return y(e), () => URL.revokeObjectURL(e);
-	}, [f, h]), /* @__PURE__ */ a(r, { children: [
-		_ ? /* @__PURE__ */ i("img", {
-			src: _,
-			alt: f.name,
-			className: e([b])
-		}) : /* @__PURE__ */ a("span", {
-			role: "img",
-			"aria-label": f.name,
-			className: e([x]),
-			children: [/* @__PURE__ */ a("svg", {
-				width: "24",
-				height: "24",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				children: [/* @__PURE__ */ i("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ i("polyline", { points: "14 2 14 8 20 8" })]
-			}), /* @__PURE__ */ i("span", {
-				title: f.name,
-				className: e([S]),
-				children: f.name
-			})]
-		}),
-		p === "uploading" && /* @__PURE__ */ a("div", {
+function M({ file: t, onPreview: n }) {
+	let r = A(t), i = r ? /* @__PURE__ */ o("img", {
+		src: r,
+		alt: n ? "" : t.name,
+		className: e([D])
+	}) : /* @__PURE__ */ s("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ o("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ o("polyline", { points: "14 2 14 8 20 8" })]
+	});
+	return /* @__PURE__ */ o("span", {
+		"data-slot": "thumbnail",
+		"data-thumb": !0,
+		className: e([E]),
+		children: n ? /* @__PURE__ */ o("button", {
+			type: "button",
+			"data-slot": "preview",
+			"aria-label": t.name,
+			"data-action": "preview",
+			onClick: () => n(t),
+			className: e([O]),
+			children: i
+		}) : i
+	});
+}
+function N({ entry: r, actions: i, removeLabel: c, onPreview: l }) {
+	let u = t("upload"), { file: d, status: f, percent: p } = r, m = d instanceof File, h = A(d), _ = h ? /* @__PURE__ */ o("img", {
+		"data-slot": "thumbnail",
+		src: h,
+		alt: l ? "" : d.name,
+		className: e([b])
+	}) : /* @__PURE__ */ s("span", {
+		"data-slot": "thumbnail",
+		role: l ? void 0 : "img",
+		"aria-label": l ? void 0 : d.name,
+		className: e([x]),
+		children: [/* @__PURE__ */ s("svg", {
+			width: "24",
+			height: "24",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: [/* @__PURE__ */ o("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ o("polyline", { points: "14 2 14 8 20 8" })]
+		}), /* @__PURE__ */ o("span", {
+			"data-slot": "name",
+			title: d.name,
+			className: e([S]),
+			children: d.name
+		})]
+	});
+	return /* @__PURE__ */ s(a, { children: [
+		l ? /* @__PURE__ */ o("button", {
+			type: "button",
+			"data-slot": "preview",
+			"aria-label": d.name,
+			"data-action": "preview",
+			onClick: () => l(d),
+			className: e([O]),
+			children: _
+		}) : _,
+		f === "uploading" && /* @__PURE__ */ s("div", {
+			"data-slot": "mask",
 			className: e([C]),
-			children: [/* @__PURE__ */ i(n, {
-				value: m,
+			children: [/* @__PURE__ */ o(n, {
+				value: p,
 				size: "sm"
-			}), /* @__PURE__ */ a("span", {
+			}), /* @__PURE__ */ s("span", {
+				"data-slot": "status",
 				className: e([w]),
-				children: [m, "%"]
+				children: [p, "%"]
 			})]
 		}),
-		p === "error" && /* @__PURE__ */ a("div", {
+		f === "error" && /* @__PURE__ */ s("div", {
+			"data-slot": "error-overlay",
 			className: e([T]),
 			children: [
-				/* @__PURE__ */ a("svg", {
+				/* @__PURE__ */ s("svg", {
 					width: "20",
 					height: "20",
 					viewBox: "0 0 24 24",
@@ -207,18 +266,18 @@ function O({ entry: c, actions: l, removeLabel: u }) {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					children: [
-						/* @__PURE__ */ i("circle", {
+						/* @__PURE__ */ o("circle", {
 							cx: "12",
 							cy: "12",
 							r: "10"
 						}),
-						/* @__PURE__ */ i("line", {
+						/* @__PURE__ */ o("line", {
 							x1: "12",
 							y1: "8",
 							x2: "12",
 							y2: "12"
 						}),
-						/* @__PURE__ */ i("line", {
+						/* @__PURE__ */ o("line", {
 							x1: "12",
 							y1: "16",
 							x2: "12.01",
@@ -226,14 +285,15 @@ function O({ entry: c, actions: l, removeLabel: u }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ i("span", { children: d.error }),
-				/* @__PURE__ */ i("button", {
+				/* @__PURE__ */ o("span", { children: u.error }),
+				m && /* @__PURE__ */ o("button", {
 					type: "button",
-					"aria-label": d.retry,
+					"data-slot": "retry-button",
+					"aria-label": u.retry,
 					"data-action": "retry",
-					onClick: l.retry,
+					onClick: i.retry,
 					className: e([g]),
-					children: /* @__PURE__ */ a("svg", {
+					children: /* @__PURE__ */ s("svg", {
 						width: "16",
 						height: "16",
 						viewBox: "0 0 24 24",
@@ -242,19 +302,20 @@ function O({ entry: c, actions: l, removeLabel: u }) {
 						strokeWidth: "2",
 						strokeLinecap: "round",
 						strokeLinejoin: "round",
-						children: [/* @__PURE__ */ i("polyline", { points: "23 4 23 10 17 10" }), /* @__PURE__ */ i("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })]
+						children: [/* @__PURE__ */ o("polyline", { points: "23 4 23 10 17 10" }), /* @__PURE__ */ o("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })]
 					})
 				})
 			]
 		}),
-		/* @__PURE__ */ i("button", {
+		/* @__PURE__ */ o("button", {
 			type: "button",
+			"data-slot": "remove-button",
 			"data-card-remove": !0,
-			"aria-label": u ?? d.remove,
+			"aria-label": c ?? u.remove,
 			"data-action": "remove",
-			onClick: l.remove,
+			onClick: i.remove,
 			className: e([v]),
-			children: /* @__PURE__ */ a("svg", {
+			children: /* @__PURE__ */ s("svg", {
 				width: "14",
 				height: "14",
 				viewBox: "0 0 24 24",
@@ -263,12 +324,12 @@ function O({ entry: c, actions: l, removeLabel: u }) {
 				strokeWidth: "2",
 				strokeLinecap: "round",
 				strokeLinejoin: "round",
-				children: [/* @__PURE__ */ i("line", {
+				children: [/* @__PURE__ */ o("line", {
 					x1: "18",
 					y1: "6",
 					x2: "6",
 					y2: "18"
-				}), /* @__PURE__ */ i("line", {
+				}), /* @__PURE__ */ o("line", {
 					x1: "6",
 					y1: "6",
 					x2: "18",
@@ -278,23 +339,34 @@ function O({ entry: c, actions: l, removeLabel: u }) {
 		})
 	] });
 }
-function k({ entries: t, listType: n = "text", removeLabel: r, itemRender: a, onRemove: o, onRetry: s, onCancel: u }) {
-	let d = n === "picture-card";
-	return /* @__PURE__ */ i("ul", {
-		className: e([d ? _ : c]),
+function P({ entries: t, listType: n = "text", removeLabel: r, itemRender: i, onPreview: a, onRemove: s, onRetry: u, onCancel: d }) {
+	let f = n === "picture-card", p = n === "picture";
+	return /* @__PURE__ */ o("ul", {
+		"data-slot": "list",
+		className: e([f ? _ : c]),
 		children: t.map((t) => {
-			let n = E(t, o, s, u);
-			return /* @__PURE__ */ i("li", {
+			let n = k(t, s, u, d);
+			return /* @__PURE__ */ o("li", {
+				"data-slot": "item",
 				"data-status": t.status,
-				className: e([d ? y : l]),
-				children: a ? a(t.file, t.status, t.percent, n) : i(d ? O : D, {
+				className: e([f ? y : l]),
+				children: i ? i(t.file, t.status, t.percent, n) : f ? /* @__PURE__ */ o(N, {
+					entry: t,
+					actions: n,
+					removeLabel: r,
+					onPreview: a
+				}) : /* @__PURE__ */ o(j, {
 					entry: t,
 					actions: n,
-					removeLabel: r
+					removeLabel: r,
+					thumb: p ? /* @__PURE__ */ o(M, {
+						file: t.file,
+						onPreview: a
+					}) : void 0
 				})
 			}, t.uid);
 		})
 	});
 }
 //#endregion
-export { k as default };
+export { P as default };