antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/upload/style/dragger.js

@@ -0,0 +1,58 @@
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/upload/style/dragger.ts
+const genDraggerStyle = (token) => {
+	const { componentCls, iconCls } = token;
+	return { [`${componentCls}-wrapper`]: { [`${componentCls}-drag`]: {
+		position: "relative",
+		width: "100%",
+		height: "100%",
+		textAlign: "center",
+		background: token.colorFillAlter,
+		border: `${unit(token.lineWidth)} dashed ${token.colorBorder}`,
+		borderRadius: token.borderRadiusLG,
+		cursor: "pointer",
+		transition: `border-color ${token.motionDurationSlow}`,
+		[componentCls]: { padding: token.padding },
+		[`${componentCls}-btn`]: {
+			"display": "table",
+			"width": "100%",
+			"height": "100%",
+			"outline": "none",
+			"borderRadius": token.borderRadiusLG,
+			"&:focus-visible": { outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}` }
+		},
+		[`${componentCls}-drag-container`]: {
+			display: "table-cell",
+			verticalAlign: "middle"
+		},
+		[`
+          &:not(${componentCls}-disabled):hover,
+          &-hover:not(${componentCls}-disabled)
+        `]: { borderColor: token.colorPrimaryHover },
+		[`p${componentCls}-drag-icon`]: {
+			marginBottom: token.margin,
+			[iconCls]: {
+				color: token.colorPrimary,
+				fontSize: token.uploadThumbnailSize
+			}
+		},
+		[`p${componentCls}-text`]: {
+			margin: `0 0 ${unit(token.marginXXS)}`,
+			color: token.colorTextHeading,
+			fontSize: token.fontSizeLG
+		},
+		[`p${componentCls}-hint`]: {
+			color: token.colorTextDescription,
+			fontSize: token.fontSize
+		},
+		[`&${componentCls}-disabled`]: { [`p${componentCls}-drag-icon ${iconCls},
+            p${componentCls}-text,
+            p${componentCls}-hint
+          `]: { color: token.colorTextDisabled } }
+	} } };
+};
+var dragger_default = genDraggerStyle;
+
+//#endregion
+export { dragger_default as default };

package/dist/upload/style/index.d.ts

@@ -0,0 +1,18 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/upload/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 操作按扭颜色
+   * @descEN Action button color
+   */
+  actionsColor: string;
+  /**
+   * @desc 卡片类型文件列表项的尺寸（对 picture-card 和 picture-circle 生效）
+   * @descEN Size of list items in card type (affects both picture-card and picture-circle)
+   */
+  pictureCardSize: number;
+}
+//#endregion
+export { ComponentToken };

package/dist/upload/style/index.js

@@ -0,0 +1,53 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import collapse_default from "../../style/motion/collapse.js";
+import "../../style/motion/index.js";
+import dragger_default from "./dragger.js";
+import list_default from "./list.js";
+import motion_default from "./motion.js";
+import { genPictureCardStyle, genPictureStyle } from "./picture.js";
+import rtl_default from "./rtl.js";
+
+//#region src/upload/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, colorTextDisabled } = token;
+	return { [`${componentCls}-wrapper`]: {
+		...resetComponent(token),
+		[componentCls]: {
+			"outline": 0,
+			"input[type='file']": { cursor: "pointer" }
+		},
+		[`${componentCls}-select`]: { display: "inline-block" },
+		[`${componentCls}-hidden`]: { display: "none" },
+		[`${componentCls}-disabled`]: {
+			color: colorTextDisabled,
+			cursor: "not-allowed"
+		}
+	} };
+};
+const prepareComponentToken = (token) => ({
+	actionsColor: token.colorIcon,
+	pictureCardSize: token.controlHeightLG * 2.55
+});
+var style_default = genStyleHooks("Upload", (token) => {
+	const { fontSizeHeading3, marginXS, lineWidth, pictureCardSize, calc } = token;
+	const uploadToken = mergeToken(token, {
+		uploadThumbnailSize: calc(fontSizeHeading3).mul(2).equal(),
+		uploadProgressOffset: calc(calc(marginXS).div(2)).add(lineWidth).equal(),
+		uploadPicCardSize: pictureCardSize
+	});
+	return [
+		genBaseStyle(uploadToken),
+		dragger_default(uploadToken),
+		genPictureStyle(uploadToken),
+		genPictureCardStyle(uploadToken),
+		list_default(uploadToken),
+		motion_default(uploadToken),
+		rtl_default(uploadToken),
+		collapse_default(uploadToken)
+	];
+}, prepareComponentToken);
+
+//#endregion
+export { style_default as default };

package/dist/upload/style/list.js

@@ -0,0 +1,80 @@
+import { clearFix, textEllipsis } from "../../style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/upload/style/list.ts
+const genListStyle = (token) => {
+	const { componentCls, iconCls, fontSize, lineHeight, calc } = token;
+	const itemCls = `${componentCls}-list-item`;
+	const actionsCls = `${itemCls}-actions`;
+	const actionCls = `${itemCls}-action`;
+	return { [`${componentCls}-wrapper`]: { [`${componentCls}-list`]: {
+		...clearFix(),
+		lineHeight: token.lineHeight,
+		[itemCls]: {
+			"position": "relative",
+			"height": calc(token.lineHeight).mul(fontSize).equal(),
+			"marginTop": token.marginXS,
+			fontSize,
+			"display": "flex",
+			"alignItems": "center",
+			"transition": `background-color ${token.motionDurationSlow}`,
+			"borderRadius": token.borderRadiusSM,
+			"&:hover": { backgroundColor: token.controlItemBgHover },
+			[`${itemCls}-name`]: {
+				...textEllipsis,
+				padding: `0 ${unit(token.paddingXS)}`,
+				lineHeight,
+				flex: "auto",
+				transition: `all ${token.motionDurationSlow}`
+			},
+			[actionsCls]: {
+				whiteSpace: "nowrap",
+				[actionCls]: { opacity: 0 },
+				[iconCls]: {
+					color: token.actionsColor,
+					transition: `all ${token.motionDurationSlow}`
+				},
+				[`
+              ${actionCls}:focus-visible,
+              &.picture ${actionCls}
+            `]: { opacity: 1 }
+			},
+			[`${componentCls}-icon ${iconCls}`]: {
+				color: token.colorIcon,
+				fontSize
+			},
+			[`${itemCls}-progress`]: {
+				"position": "absolute",
+				"bottom": token.calc(token.uploadProgressOffset).mul(-1).equal(),
+				"width": "100%",
+				"paddingInlineStart": calc(fontSize).add(token.paddingXS).equal(),
+				fontSize,
+				"lineHeight": 0,
+				"pointerEvents": "none",
+				"> div": { margin: 0 }
+			}
+		},
+		[`${itemCls}:hover ${actionCls}`]: { opacity: 1 },
+		[`${itemCls}-error`]: {
+			color: token.colorError,
+			[`${itemCls}-name, ${componentCls}-icon ${iconCls}`]: { color: token.colorError },
+			[actionsCls]: {
+				[`${iconCls}, ${iconCls}:hover`]: { color: token.colorError },
+				[actionCls]: { opacity: 1 }
+			}
+		},
+		[`${componentCls}-list-item-container`]: {
+			"transition": `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
+			"&::before": {
+				display: "table",
+				width: 0,
+				height: 0,
+				content: "\"\""
+			}
+		}
+	} } };
+};
+var list_default = genListStyle;
+
+//#endregion
+export { list_default as default };

package/dist/upload/style/motion.js

@@ -0,0 +1,41 @@
+import { initFadeMotion } from "../../style/motion/fade.js";
+import "../../style/motion/index.js";
+import { Keyframes } from "@antdv-next/cssinjs";
+
+//#region src/upload/style/motion.ts
+const genMotionStyle = (token) => {
+	const { componentCls } = token;
+	const uploadAnimateInlineIn = new Keyframes("uploadAnimateInlineIn", { from: {
+		width: 0,
+		height: 0,
+		padding: 0,
+		opacity: 0,
+		margin: token.calc(token.marginXS).div(-2).equal()
+	} });
+	const uploadAnimateInlineOut = new Keyframes("uploadAnimateInlineOut", { to: {
+		width: 0,
+		height: 0,
+		padding: 0,
+		opacity: 0,
+		margin: token.calc(token.marginXS).div(-2).equal()
+	} });
+	const inlineCls = `${componentCls}-animate-inline`;
+	return [
+		{ [`${componentCls}-wrapper`]: {
+			[`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: token.motionEaseInOutCirc,
+				animationFillMode: "forwards"
+			},
+			[`${inlineCls}-appear, ${inlineCls}-enter`]: { animationName: uploadAnimateInlineIn },
+			[`${inlineCls}-leave`]: { animationName: uploadAnimateInlineOut }
+		} },
+		{ [`${componentCls}-wrapper`]: initFadeMotion(token) },
+		uploadAnimateInlineIn,
+		uploadAnimateInlineOut
+	];
+};
+var motion_default = genMotionStyle;
+
+//#endregion
+export { motion_default as default };

package/dist/upload/style/picture.js

@@ -0,0 +1,183 @@
+import { clearFix, textEllipsis } from "../../style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+import { blue } from "@ant-design/colors";
+
+//#region src/upload/style/picture.ts
+const genPictureStyle = (token) => {
+	const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset, calc } = token;
+	const listCls = `${componentCls}-list`;
+	const itemCls = `${listCls}-item`;
+	return { [`${componentCls}-wrapper`]: {
+		[`
+        ${listCls}${listCls}-picture,
+        ${listCls}${listCls}-picture-card,
+        ${listCls}${listCls}-picture-circle
+      `]: {
+			[itemCls]: {
+				"position": "relative",
+				"height": calc(uploadThumbnailSize).add(calc(token.lineWidth).mul(2)).add(calc(token.paddingXS).mul(2)).equal(),
+				"padding": token.paddingXS,
+				"border": `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+				"borderRadius": token.borderRadiusLG,
+				"&:hover": { background: "transparent" },
+				[`${itemCls}-thumbnail`]: {
+					...textEllipsis,
+					width: uploadThumbnailSize,
+					height: uploadThumbnailSize,
+					lineHeight: unit(calc(uploadThumbnailSize).add(token.paddingSM).equal()),
+					textAlign: "center",
+					flex: "none",
+					[iconCls]: {
+						fontSize: token.fontSizeHeading2,
+						color: token.colorPrimary
+					},
+					img: {
+						display: "block",
+						width: "100%",
+						height: "100%",
+						overflow: "hidden"
+					}
+				},
+				[`${itemCls}-progress`]: {
+					bottom: calc(token.fontSize).mul(token.lineHeight).div(2).add(uploadProgressOffset).equal(),
+					width: `calc(100% - ${unit(calc(token.paddingSM).mul(2).equal())})`,
+					marginTop: 0,
+					paddingInlineStart: calc(uploadThumbnailSize).add(token.paddingXS).equal()
+				}
+			},
+			[`${itemCls}-error`]: {
+				borderColor: token.colorError,
+				[`${itemCls}-thumbnail ${iconCls}`]: {
+					[`svg path[fill='${blue[0]}']`]: { fill: token.colorErrorBg },
+					[`svg path[fill='${blue.primary}']`]: { fill: token.colorError }
+				}
+			},
+			[`${itemCls}-uploading`]: {
+				borderStyle: "dashed",
+				[`${itemCls}-name`]: { marginBottom: uploadProgressOffset }
+			}
+		},
+		[`${listCls}${listCls}-picture-circle ${itemCls}`]: { [`&, &::before, ${itemCls}-thumbnail`]: { borderRadius: "50%" } }
+	} };
+};
+const genPictureCardStyle = (token) => {
+	const { componentCls, iconCls, fontSizeLG, colorTextLightSolid, calc } = token;
+	const listCls = `${componentCls}-list`;
+	const itemCls = `${listCls}-item`;
+	const uploadPictureCardSize = token.uploadPicCardSize;
+	return {
+		[`
+      ${componentCls}-wrapper${componentCls}-picture-card-wrapper,
+      ${componentCls}-wrapper${componentCls}-picture-circle-wrapper
+    `]: {
+			...clearFix(),
+			display: "block",
+			[`${componentCls}${componentCls}-select`]: {
+				width: uploadPictureCardSize,
+				height: uploadPictureCardSize,
+				textAlign: "center",
+				verticalAlign: "top",
+				backgroundColor: token.colorFillAlter,
+				border: `${unit(token.lineWidth)} dashed ${token.colorBorder}`,
+				borderRadius: token.borderRadiusLG,
+				cursor: "pointer",
+				transition: `border-color ${token.motionDurationSlow}`,
+				[`> ${componentCls}`]: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					height: "100%",
+					textAlign: "center"
+				},
+				[`&:not(${componentCls}-disabled):hover`]: { borderColor: token.colorPrimary }
+			},
+			[`${listCls}${listCls}-picture-card, ${listCls}${listCls}-picture-circle`]: {
+				"display": "flex",
+				"flexWrap": "wrap",
+				"@supports not (gap: 1px)": { "& > *": {
+					marginBlockEnd: token.marginXS,
+					marginInlineEnd: token.marginXS
+				} },
+				"@supports (gap: 1px)": { gap: token.marginXS },
+				[`${listCls}-item-container`]: {
+					display: "inline-block",
+					width: uploadPictureCardSize,
+					height: uploadPictureCardSize,
+					verticalAlign: "top"
+				},
+				"&::after": { display: "none" },
+				"&::before": { display: "none" },
+				[itemCls]: {
+					"height": "100%",
+					"margin": 0,
+					"&::before": {
+						position: "absolute",
+						zIndex: 1,
+						width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
+						height: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
+						backgroundColor: token.colorBgMask,
+						opacity: 0,
+						transition: `all ${token.motionDurationSlow}`,
+						content: "\" \""
+					}
+				},
+				[`${itemCls}:hover`]: { [`&::before, ${itemCls}-actions`]: { opacity: 1 } },
+				[`${itemCls}-actions`]: {
+					position: "absolute",
+					insetInlineStart: 0,
+					zIndex: 10,
+					width: "100%",
+					whiteSpace: "nowrap",
+					textAlign: "center",
+					opacity: 0,
+					transition: `all ${token.motionDurationSlow}`,
+					[`
+            ${iconCls}-eye,
+            ${iconCls}-download,
+            ${iconCls}-delete
+          `]: {
+						"zIndex": 10,
+						"width": fontSizeLG,
+						"margin": `0 ${unit(token.marginXXS)}`,
+						"fontSize": fontSizeLG,
+						"cursor": "pointer",
+						"transition": `all ${token.motionDurationSlow}`,
+						"color": colorTextLightSolid,
+						"&:hover": { color: colorTextLightSolid },
+						"svg": { verticalAlign: "baseline" }
+					}
+				},
+				[`${itemCls}-thumbnail, ${itemCls}-thumbnail img`]: {
+					position: "static",
+					display: "block",
+					width: "100%",
+					height: "100%",
+					objectFit: "contain"
+				},
+				[`${itemCls}-name`]: {
+					display: "none",
+					textAlign: "center"
+				},
+				[`${itemCls}-file + ${itemCls}-name`]: {
+					position: "absolute",
+					bottom: token.margin,
+					display: "block",
+					width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`
+				},
+				[`${itemCls}-uploading`]: {
+					[`&${itemCls}`]: { backgroundColor: token.colorFillAlter },
+					[`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: { display: "none" }
+				},
+				[`${itemCls}-progress`]: {
+					bottom: token.marginXL,
+					width: `calc(100% - ${unit(calc(token.paddingXS).mul(2).equal())})`,
+					paddingInlineStart: 0
+				}
+			}
+		},
+		[`${componentCls}-wrapper${componentCls}-picture-circle-wrapper`]: { [`${componentCls}${componentCls}-select`]: { borderRadius: "50%" } }
+	};
+};
+
+//#endregion
+export { genPictureCardStyle, genPictureStyle };

package/dist/upload/style/rtl.js

@@ -0,0 +1,9 @@
+//#region src/upload/style/rtl.ts
+const genRtlStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}-rtl`]: { direction: "rtl" } };
+};
+var rtl_default = genRtlStyle;
+
+//#endregion
+export { rtl_default as default };

package/dist/upload/utils.js

@@ -0,0 +1,99 @@
+//#region src/upload/utils.ts
+function file2Obj(file) {
+	return {
+		...file,
+		lastModified: file.lastModified,
+		lastModifiedDate: file.lastModifiedDate,
+		name: file.name,
+		size: file.size,
+		type: file.type,
+		uid: file.uid,
+		percent: 0,
+		originFileObj: file
+	};
+}
+/** Upload fileList. Replace file if exist or just push into it. */
+function updateFileList(file, fileList) {
+	const nextFileList = [...fileList];
+	const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid);
+	if (fileIndex === -1) nextFileList.push(file);
+	else nextFileList[fileIndex] = file;
+	return nextFileList;
+}
+function getFileItem(file, fileList) {
+	const matchKey = file.uid !== void 0 ? "uid" : "name";
+	return fileList.filter((item) => item[matchKey] === file[matchKey])[0];
+}
+function removeFileItem(file, fileList) {
+	const matchKey = file.uid !== void 0 ? "uid" : "name";
+	const removed = fileList.filter((item) => item[matchKey] !== file[matchKey]);
+	if (removed.length === fileList.length) return null;
+	return removed;
+}
+function extname(url = "") {
+	const temp = url.split("/");
+	const filenameWithoutSuffix = temp[temp.length - 1].split(/#|\?/)[0];
+	return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [""])[0];
+}
+const isImageFileType = (type) => type.indexOf("image/") === 0;
+function isImageUrl(file) {
+	if (file.type && !file.thumbUrl) return isImageFileType(file.type);
+	const url = file.thumbUrl || file.url || "";
+	const extension = extname(url);
+	if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico|heic|heif)$/i.test(extension)) return true;
+	if (url.startsWith("data:")) return false;
+	if (extension) return false;
+	return true;
+}
+const MEASURE_SIZE = 200;
+function previewImage(file) {
+	return new Promise((resolve) => {
+		if (!file.type || !isImageFileType(file.type)) {
+			resolve("");
+			return;
+		}
+		const canvas = document.createElement("canvas");
+		canvas.width = MEASURE_SIZE;
+		canvas.height = MEASURE_SIZE;
+		canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`;
+		document.body.appendChild(canvas);
+		const ctx = canvas.getContext("2d");
+		const img = new Image();
+		img.onload = () => {
+			const { width, height } = img;
+			let drawWidth = MEASURE_SIZE;
+			let drawHeight = MEASURE_SIZE;
+			let offsetX = 0;
+			let offsetY = 0;
+			if (width > height) {
+				drawHeight = height * (MEASURE_SIZE / width);
+				offsetY = -(drawHeight - drawWidth) / 2;
+			} else {
+				drawWidth = width * (MEASURE_SIZE / height);
+				offsetX = -(drawWidth - drawHeight) / 2;
+			}
+			ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+			const dataURL = canvas.toDataURL();
+			document.body.removeChild(canvas);
+			window.URL.revokeObjectURL(img.src);
+			resolve(dataURL);
+		};
+		img.crossOrigin = "anonymous";
+		if (file.type.startsWith("image/svg+xml")) {
+			const reader = new FileReader();
+			reader.onload = () => {
+				if (reader.result && typeof reader.result === "string") img.src = reader.result;
+			};
+			reader.readAsDataURL(file);
+		} else if (file.type.startsWith("image/gif")) {
+			const reader = new FileReader();
+			reader.onload = () => {
+				if (reader.result) resolve(reader.result);
+			};
+			reader.readAsDataURL(file);
+		} else img.src = window.URL.createObjectURL(file);
+	});
+}
+
+//#endregion
+export { file2Obj, getFileItem, isImageUrl, previewImage, removeFileItem, updateFileList };

package/dist/version/index.js

@@ -0,0 +1,7 @@
+import { version } from "../package.js";
+
+//#region src/version/index.ts
+var version_default = version;
+
+//#endregion
+export { version_default as default };

package/dist/watermark/context.js

@@ -0,0 +1,37 @@
+import { defineComponent, inject, provide, ref } from "vue";
+
+//#region src/watermark/context.ts
+function voidFunc() {}
+const WatermarkContextKey = Symbol("WatermarkContext");
+function useWatermarkProvider(props) {
+	provide(WatermarkContextKey, props);
+}
+function useWatermarkContext() {
+	return inject(WatermarkContextKey, {
+		add: voidFunc,
+		remove: voidFunc
+	});
+}
+const WatermarkContextProvider = defineComponent((props, { slots }) => {
+	useWatermarkProvider(props);
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: ["add", "remove"] });
+function usePanelRef(panelSelector) {
+	const watermark = useWatermarkContext();
+	const panelEleRef = ref(null);
+	return (_ele) => {
+		if (_ele) {
+			const ele = _ele;
+			const innerContentEle = panelSelector?.value ? ele.querySelector(panelSelector.value) : ele;
+			if (innerContentEle) {
+				watermark.add(innerContentEle);
+				panelEleRef.value = innerContentEle;
+			}
+		} else watermark.remove(panelEleRef.value);
+	};
+}
+
+//#endregion
+export { WatermarkContextProvider, usePanelRef };

package/dist/watermark/index.d.ts

@@ -0,0 +1,26 @@
+import * as vue179 from "vue";
+
+//#region src/watermark/index.d.ts
+interface WatermarkProps {
+  zIndex?: number;
+  rotate?: number;
+  width?: number;
+  height?: number;
+  image?: string;
+  content?: string | string[];
+  font?: {
+    color?: CanvasFillStrokeStyles['fillStyle'];
+    fontSize?: number | string;
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    fontFamily?: string;
+    textAlign?: CanvasTextAlign;
+  };
+  rootClass?: string;
+  gap?: [number, number];
+  offset?: [number, number];
+  inherit?: boolean;
+}
+declare const Watermark: vue179.DefineSetupFnComponent<WatermarkProps, {}, {}, WatermarkProps & {}, vue179.PublicProps>;
+//#endregion
+export { Watermark, WatermarkProps };