@gpustack/core-ui 1.0.2 → 1.0.4

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,
@@ -5390,36 +5403,39 @@ var jo = ({ height: e, title: t }) => /* @__PURE__ */ U("div", {
 		children: /* @__PURE__ */ H(pt, { image: pt.PRESENTED_IMAGE_SIMPLE })
 	})]
 }), Mo = M((e) => {
-	let { seriesData: t, xAxisData: n, height: r, width: i, labelFormatter: a, legendData: o, title: s } = e, { barItemConfig: c, grid: l, legend: u, title: d, tooltip: f, xAxis: p, yAxis: m } = Ao(), h = R(() => {
+	let { seriesData: t, xAxisData: n, height: r, width: i, labelFormatter: a, legendData: o, title: s, stack: c = "total" } = e, { barItemConfig: l, grid: u, legend: d, title: f, tooltip: p, xAxis: m, yAxis: h } = Ao(), g = R(() => {
 		let e = {
 			title: { text: "" },
-			grid: l,
-			tooltip: { ...f },
+			grid: u,
+			tooltip: { ...p },
 			xAxis: {
-				...p,
+				...m,
 				axisLabel: {
-					...p.axisLabel,
+					...m.axisLabel,
 					formatter: a
 				},
 				data: []
 			},
-			yAxis: m,
+			yAxis: h,
 			legend: {
-				...u,
+				...d,
 				data: []
 			},
 			series: []
-		}, r = Z.default.map(t, (e) => ({
-			...e,
-			...c,
-			stack: "total",
-			itemStyle: { color: e.color }
-		}));
+		}, r = Z.default.map(t, (e) => {
+			let { stack: t, ...n } = e, r = t ?? c;
+			return {
+				...n,
+				...l,
+				...r === !1 ? {} : { stack: r },
+				itemStyle: { color: e.color }
+			};
+		});
 		return {
 			...e,
 			animation: !1,
 			title: {
-				...d,
+				...f,
 				text: s
 			},
 			yAxis: { ...e.yAxis },
@@ -5434,16 +5450,17 @@ var jo = ({ height: e, title: t }) => /* @__PURE__ */ U("div", {
 		n,
 		s,
 		a,
-		f,
-		l,
 		p,
-		m,
 		u,
+		m,
+		h,
+		d,
+		l,
 		c
 	]);
 	return /* @__PURE__ */ H(V, { children: t.length ? /* @__PURE__ */ H(Oo, {
 		height: r,
-		options: h,
+		options: g,
 		width: i || "100%"
 	}) : /* @__PURE__ */ H(jo, {
 		height: r,

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/echarts/types.d.ts

@@ -26,6 +26,7 @@ export interface ChartProps {
     smooth?: boolean;
     color?: string;
     yAxisName?: string;
+    stack?: string | false;
     gaugeConfig?: {
         radius?: string;
         center?: 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.4",
   "private": false,
   "sideEffects": [
     "**/*.css",