@gpustack/core-ui 1.0.2 → 1.0.3

package/dist/index.es.js

@@ -1528,20 +1528,20 @@ process.env.NODE_ENV !== "production" && (oi.displayName = "ResizeObserver"), oi
 //#endregion
 //#region src/lib/components/auto-image/single-image.tsx
 var si = (e) => {
-	let { editable: t, onDelete: n, onClick: r, autoSize: i, uid: a, loading: o, width: s, height: c, progress: l, maxHeight: u, maxWidth: d, dataUrl: f = "", label: p, style: m, autoBgColor: h, preview: g = !0, loadingSize: _ = "default" } = e, v = E.useRef(null), [y, b] = E.useState({
+	let { editable: t, onDelete: n, onClick: r, autoSize: i, uid: a, loading: o, width: s, height: c, progress: l, maxHeight: u, maxWidth: d, dataUrl: f = "", label: p, style: m, styles: h, autoBgColor: g, preview: _ = !0, loadingSize: v = "default" } = e, y = E.useRef(null), [b, x] = E.useState({
 		width: s,
 		height: c
-	}), x = E.useMemo(() => o ? {
+	}), S = E.useMemo(() => o ? {
 		width: "100%",
 		height: "100%"
-	} : {}, [o, y]), S = N(() => {
+	} : {}, [o, b]), C = N(() => {
 		r?.(e);
-	}, [r, e]), C = N((t) => {
+	}, [r, e]), w = N((t) => {
 		if (!i || !t.width || !t.height) return;
 		let { width: n, height: r } = t, { width: a, height: o } = e;
 		if (!a || !o) return;
 		let s = n / a, c = r / o, l = Math.min(s, c, 1), u = a * l, d = o * l;
-		u === y.width && d === y.height || b({
+		u === b.width && d === b.height || x({
 			width: u,
 			height: d
 		});
@@ -1549,25 +1549,25 @@ var si = (e) => {
 		i,
 		e.width,
 		e.height
-	]), w = E.useCallback(async () => {}, []), T = (e, t) => {
+	]), T = E.useCallback(async () => {}, []), D = (e, t) => {
 		t.stopPropagation(), n(e);
 	};
 	return /* @__PURE__ */ H(oi, {
-		onResize: C,
+		onResize: w,
 		children: /* @__PURE__ */ U("div", {
 			style: { ...m },
 			className: (0, Y.default)("single-image", {
-				"auto-bg-color": h,
+				"auto-bg-color": g,
 				"auto-size": i,
 				loading: o
 			}),
-			children: [h && /* @__PURE__ */ H("div", {
+			children: [g && /* @__PURE__ */ H("div", {
 				className: "mask",
 				style: { background: `url(${f}) center center / cover no-repeat` }
 			}), /* @__PURE__ */ U("span", {
 				className: "thumb-img",
-				style: { ...x },
-				ref: v,
+				style: { ...S },
+				ref: y,
 				children: [/* @__PURE__ */ U(V, { children: [p && /* @__PURE__ */ H("div", {
 					className: "label",
 					children: p
@@ -1592,20 +1592,23 @@ var si = (e) => {
 						})
 					})
 				}) : /* @__PURE__ */ U("span", {
-					onClick: S,
+					onClick: C,
 					className: "img",
 					style: {
 						maxHeight: `min(${u}, 100%)`,
 						maxWidth: `min(${d}, 100%)`
 					},
 					children: [/* @__PURE__ */ H(En, {
-						style: { objectFit: "cover" },
-						preview: g,
+						style: {
+							objectFit: "cover",
+							...h?.image
+						},
+						preview: _,
 						autoSize: i,
 						src: f,
-						width: y.width || "100%",
-						height: y.height || 100,
-						onLoad: w
+						width: b.width || "100%",
+						height: b.height || 100,
+						onLoad: T
 					}), l && l < 100 && /* @__PURE__ */ H("span", {
 						className: "small-progress-wrap",
 						children: /* @__PURE__ */ H(xt, {
@@ -1626,7 +1629,7 @@ var si = (e) => {
 					})]
 				})] }), t && /* @__PURE__ */ H("span", {
 					className: "del",
-					onClick: (e) => T(a, e),
+					onClick: (e) => D(a, e),
 					children: /* @__PURE__ */ H(ce, {})
 				})]
 			})]
@@ -2149,8 +2152,11 @@ var wi = (e) => {
 	"image/png",
 	"image/jpg",
 	"image/jpeg"
-], Ei = ({ handleUpdateImgList: e, multiple: t = !0, drag: n = !1, disabled: r = !1, children: i, icon: a, title: s, accept: c = Ti.join(","), size: l = "small" }) => {
-	let u = o(), d = z(null), f = N((e) => new Promise((t) => {
+], Ei = ({ handleUpdateImgList: e, multiple: t = !0, drag: n = !1, disabled: r = !1, children: i, icon: a, title: s, accept: c = Ti.join(","), size: l = "small", maxSize: u, width: d, height: f, verifySize: p = !1 }) => {
+	let m = o(), h = z(null), g = N((e) => {
+		let t = c.split(",").map((e) => e.trim());
+		return t.includes(e.type) ? u !== void 0 && e.size > u * 1024 ? (It.error(m.formatMessage({ id: "common.file.size.limit" }, { size: `${u}KB` })), !1) : !0 : (It.error(m.formatMessage({ id: "common.file.format.limit" }, { formats: t.join(", ") })), !1);
+	}, [c, u]), _ = N((e) => new Promise((t) => {
 		let n = new Image();
 		n.onload = () => {
 			t({
@@ -2163,36 +2169,43 @@ var wi = (e) => {
 				rawHeight: 0
 			});
 		}, n.src = e;
-	}), []), p = N((e) => new Promise((t, n) => {
+	}), []), v = N((e) => new Promise((t, n) => {
 		let r = new FileReader();
 		r.readAsDataURL(e), r.onload = () => t(r.result), r.onerror = (e) => n(e);
-	}), []), m = R(() => (0, Z.debounce)((t) => {
+	}), []), y = (0, Z.debounce)((t) => {
 		e(t);
-	}, 300), [e, u]), h = N(async (e) => {
+	}, 300), b = N(async (e) => {
 		let { fileList: t } = e, n = await Promise.all(t.map(async (e) => {
 			if (e.originFileObj && !e.url) {
-				let t = await p(e.originFileObj), { rawWidth: n, rawHeight: r } = await f(t);
+				let t = await v(e.originFileObj), { rawWidth: n, rawHeight: r } = await _(t);
+				if (d !== void 0 && n !== d && p) return It.error(m.formatMessage({ id: "common.image.limit.width" }, { width: `${d}px` })), null;
+				if (f !== void 0 && r !== f && p) return It.error(m.formatMessage({ id: "common.image.limit.height" }, { height: `${f}px` })), null;
 				e.url = t, e.rawWidth = n, e.rawHeight = r;
 			}
 			return e;
 		}));
-		n.length > 0 && m(n.filter((e) => e.url).map((e) => ({
+		n.length > 0 && y(n.filter((e) => e?.url).map((e) => ({
 			dataUrl: e.url,
 			uid: e.uid,
 			rawWidth: e.rawWidth,
 			rawHeight: e.rawHeight
 		})));
-	}, [m, p]);
+	}, [
+		y,
+		v,
+		d,
+		f
+	]);
 	return /* @__PURE__ */ H(V, { children: H(n ? Ft.Dragger : Ft, {
-		ref: d,
+		ref: h,
 		accept: c,
 		multiple: t,
 		action: "/",
 		fileList: [],
-		beforeUpload: (e) => !1,
-		onChange: h,
+		beforeUpload: (e) => g(e) ? !1 : Ft.LIST_IGNORE,
+		onChange: b,
 		children: i ?? /* @__PURE__ */ H(q, {
-			title: s ?? u.formatMessage({ id: "playground.img.upload" }),
+			title: s ?? m.formatMessage({ id: "playground.img.upload" }),
 			children: /* @__PURE__ */ H(W, {
 				disabled: r,
 				size: l,

package/dist/src/lib/components/auto-image/single-image.d.ts

@@ -17,6 +17,9 @@ interface SingleImageProps {
     autoBgColor?: boolean;
     editable?: boolean;
     style?: React.CSSProperties;
+    styles?: {
+        image?: React.CSSProperties;
+    };
     loadingSize?: ProgressProps['size'];
     progressType?: 'line' | 'circle' | 'dashboard';
     progressColor?: string;

package/dist/src/lib/components/upload-image/index.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 interface UploadImgProps {
     size?: 'small' | 'middle' | 'large';
     height?: number;
+    width?: number;
+    verifySize?: boolean;
     multiple?: boolean;
     drag?: boolean;
     disabled?: boolean;
@@ -9,6 +11,8 @@ interface UploadImgProps {
     accept?: string;
     icon?: React.ReactNode;
     title?: React.ReactNode;
+    /** Max file size in KB */
+    maxSize?: number;
     handleUpdateImgList: (imgList: {
         dataUrl: string;
         uid: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpustack/core-ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "sideEffects": [
     "**/*.css",