antdv-next 1.3.7 → 1.4.0

package/dist/watermark/index.js

@@ -1,16 +1,14 @@
 import useToken from "../theme/useToken.js";
 import { WatermarkContextProvider } from "./context.js";
-import toList_default from "../_util/toList.js";
-import useClips_default, { FontGap } from "./useClips.js";
+import { getCanvasFont, getContentLines, getPixelRatio, reRendering } from "./utils.js";
+import useClips from "./useClips.js";
 import useRafDebounce from "./useRafDebounce.js";
 import useSingletonCache from "./useSingletonCache.js";
-import { getPixelRatio, reRendering } from "./utils.js";
 import useWatermark from "./useWatermark.js";
 import { computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, ref, shallowRef, watch } from "vue";
 import { omit } from "es-toolkit";
 import canUseDom from "@v-c/util/dist/Dom/canUseDom";
 import { useMutateObserver } from "@v-c/mutate-observer";
-
 //#region src/watermark/index.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -29,12 +27,6 @@ const fixedStyle = {
 	position: "relative",
 	overflow: "hidden"
 };
-const defaults = {
-	rotate: -22,
-	inherit: true,
-	gap: [DEFAULT_GAP_X, DEFAULT_GAP_Y],
-	font: {}
-};
 const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const [, token] = useToken();
 	const mergedZIndex = computed(() => props.zIndex ?? token.value.zIndexPopupBase - WATERMARK_Z_INDEX_OFFSET);
@@ -45,6 +37,15 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 	const fontStyle = computed(() => props?.font?.fontStyle ?? "normal");
 	const fontFamily = computed(() => props?.font?.fontFamily ?? "sans-serif");
 	const textAlign = computed(() => props?.font?.textAlign ?? "center");
+	const mergedFont = computed(() => ({
+		color: color.value,
+		fontSize: fontSize.value,
+		fontWeight: fontWeight.value,
+		fontStyle: fontStyle.value,
+		fontFamily: fontFamily.value,
+		textAlign: textAlign.value
+	}));
+	const contentLines = computed(() => getContentLines(props.content, mergedFont.value));
 	const gap = computed(() => props.gap);
 	const gapXCenter = computed(() => gap.value[0] / 2);
 	const gapYCenter = computed(() => gap.value[1] / 2);
@@ -96,20 +97,21 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 		let defaultWidth = 120;
 		let defaultHeight = 64;
 		if (!props.image && ctx.measureText) {
-			ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
-			const contents = toList_default(props.content);
-			const sizes = contents.map((item) => {
-				const metrics = ctx.measureText(item);
-				return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent];
-			});
-			defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
-			defaultHeight = Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + (contents.length - 1) * FontGap;
+			if (contentLines.value.length) {
+				const sizes = contentLines.value.map(({ text, font: lineFont }) => {
+					ctx.font = getCanvasFont(lineFont);
+					const metrics = ctx.measureText(text);
+					return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent];
+				});
+				defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
+				defaultHeight = Math.ceil(sizes.reduce((total, size) => total + size[1], 0)) + (contentLines.value.length - 1) * 3;
+			}
 		}
 		const width = props.width;
 		const height = props.height;
 		return [width ?? defaultWidth, height ?? defaultHeight];
 	};
-	const getClips = useClips_default();
+	const getClips = useClips();
 	const getClipsCache = useSingletonCache();
 	const watermarkInfo = ref(null);
 	const renderWatermark = () => {
@@ -120,19 +122,11 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			const [markWidth, markHeight] = getMarkSize(ctx);
 			const drawCanvas = (drawContent) => {
 				const params = [
-					drawContent || "",
+					drawContent || [],
 					props.rotate,
 					ratio,
 					markWidth,
 					markHeight,
-					{
-						color: color.value,
-						fontSize: fontSize.value,
-						fontStyle: fontStyle.value,
-						fontWeight: fontWeight.value,
-						fontFamily: fontFamily.value,
-						textAlign: textAlign.value
-					},
 					gap.value[0],
 					gap.value[1]
 				];
@@ -145,12 +139,12 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 					drawCanvas(img);
 				};
 				img.onerror = () => {
-					drawCanvas(props.content);
+					drawCanvas(contentLines.value);
 				};
 				img.crossOrigin = "anonymous";
 				img.referrerPolicy = "no-referrer";
 				img.src = props.image;
-			} else drawCanvas(props.content);
+			} else drawCanvas(contentLines.value);
 		}
 	};
 	const syncWatermark = useRafDebounce(renderWatermark);
@@ -182,12 +176,7 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 		() => props.height,
 		() => props.rotate,
 		() => props.image,
-		() => props.content,
-		fontSize,
-		fontWeight,
-		fontStyle,
-		fontFamily,
-		textAlign,
+		contentLines,
 		gap,
 		offsetLeft,
 		offsetTop
@@ -214,7 +203,7 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 		}, omit(attrs, ["style", "class"]), { "style": mergedStyle.value }), [childNode]);
 	};
 }, {
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
 		zIndex: {
 			type: Number,
 			required: false
@@ -236,7 +225,11 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			required: false
 		},
 		content: {
-			type: [String, Array],
+			type: [
+				String,
+				Object,
+				Array
+			],
 			required: false
 		},
 		font: {
@@ -264,14 +257,17 @@ const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
 			type: [Function, null],
 			required: false
 		}
-	}, defaults),
+	}, {
+		rotate: -22,
+		inherit: true,
+		gap: [DEFAULT_GAP_X, DEFAULT_GAP_Y],
+		font: {}
+	}),
 	name: "AWatermark",
 	inheritAttrs: false
 });
 Watermark.install = (app) => {
 	app.component(Watermark.name, Watermark);
 };
-var watermark_default = Watermark;
-
 //#endregion
-export { watermark_default as default };
+export { Watermark as default };

package/dist/watermark/useClips.d.ts

@@ -1,4 +1,4 @@
-import { WatermarkProps } from "./index.js";
+import { WatermarkContentLine } from "./utils.js";
 
 //#region src/watermark/useClips.d.ts
 declare const FontGap = 3;
@@ -6,6 +6,6 @@ declare const FontGap = 3;
  * Get the clips of text content.
  * This is a lazy hook function since SSR no need this
  */
-declare function useClips(): (content: NonNullable<WatermarkProps["content"]> | HTMLImageElement, rotate: number, ratio: number, width: number, height: number, font: Required<NonNullable<WatermarkProps["font"]>>, gapX: number, gapY: number) => [dataURL: string, finalWidth: number, finalHeight: number];
+declare function useClips(): (content: WatermarkContentLine[] | HTMLImageElement, rotate: number, ratio: number, width: number, height: number, gapX: number, gapY: number) => [dataURL: string, finalWidth: number, finalHeight: number];
 //#endregion
 export { FontGap, useClips as default };

package/dist/watermark/useClips.js

@@ -1,5 +1,4 @@
-import toList_default from "../_util/toList.js";
-
+import { getCanvasFont, getFontSize } from "./utils.js";
 //#region src/watermark/useClips.ts
 const FontGap = 3;
 function prepareCanvas(width, height, ratio = 1) {
@@ -25,18 +24,18 @@ function getRotatePos(x, y, angle) {
 * This is a lazy hook function since SSR no need this
 */
 function useClips() {
-	const getClips = (content, rotate, ratio, width, height, font, gapX, gapY) => {
+	const getClips = (content, rotate, ratio, width, height, gapX, gapY) => {
 		const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
 		if (content instanceof HTMLImageElement) ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
 		else {
-			const { color, fontSize, fontStyle, fontWeight, fontFamily, textAlign } = font;
-			const mergedFontSize = Number(fontSize) * ratio;
-			ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
-			ctx.fillStyle = color;
-			ctx.textAlign = textAlign;
 			ctx.textBaseline = "top";
-			toList_default(content)?.forEach((item, index) => {
-				ctx.fillText(item ?? "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+			let top = 0;
+			content.forEach(({ text, font }) => {
+				ctx.font = getCanvasFont(font, ratio, height);
+				ctx.fillStyle = font.color;
+				ctx.textAlign = font.textAlign;
+				ctx.fillText(text, contentWidth / 2, top);
+				top += getFontSize(font, ratio) + 3 * ratio;
 			});
 		}
 		const angle = Math.PI / 180 * Number(rotate);
@@ -86,7 +85,5 @@ function useClips() {
 	};
 	return getClips;
 }
-var useClips_default = useClips;
-
 //#endregion
-export { FontGap, useClips_default as default };
+export { FontGap, useClips as default };

package/dist/watermark/useRafDebounce.js

@@ -1,6 +1,5 @@
 import { shallowRef } from "vue";
 import raf from "@v-c/util/dist/raf";
-
 //#region src/watermark/useRafDebounce.ts
 /**
 * Callback will only execute last one for each raf
@@ -18,6 +17,5 @@ function useRafDebounce(callback) {
 		});
 	};
 }
-
 //#endregion
-export { useRafDebounce as default };
+export { useRafDebounce as default };

package/dist/watermark/useSingletonCache.js

@@ -1,6 +1,5 @@
 import { ref } from "vue";
 import isEqual from "@v-c/util/dist/isEqual";
-
 //#region src/watermark/useSingletonCache.ts
 /**
 * Singleton cache will only take latest `cacheParams` as key
@@ -17,6 +16,5 @@ function useSingletonCache() {
 	};
 	return getCache;
 }
-
 //#endregion
-export { useSingletonCache as default };
+export { useSingletonCache as default };

package/dist/watermark/useWatermark.js

@@ -1,6 +1,5 @@
 import { getStyleStr } from "./utils.js";
 import { reactive } from "vue";
-
 //#region src/watermark/useWatermark.ts
 /**
 * Base size of the canvas, 1 for parallel layout and 2 for alternate layout
@@ -46,6 +45,5 @@ function useWatermark(markStyle, onRemove) {
 		isWatermarkEle
 	];
 }
-
 //#endregion
-export { BaseSize, FontGap, useWatermark as default };
+export { BaseSize, FontGap, useWatermark as default };

package/dist/watermark/utils.d.ts

@@ -1,3 +1,4 @@
+import { WatermarkContent, WatermarkFont } from "./index.js";
 import { CSSProperties } from "vue";
 
 //#region src/watermark/utils.d.ts
@@ -6,7 +7,14 @@ declare function toLowercaseSeparator(key: string): string;
 declare function getStyleStr(style: CSSProperties): string;
 /** Returns the ratio of the device's physical pixel resolution to the css pixel resolution */
 declare function getPixelRatio(): number;
+interface WatermarkContentLine {
+  text: string;
+  font: Required<WatermarkFont>;
+}
+declare function getFontSize(font: Required<WatermarkFont>, ratio?: number): number;
+declare function getCanvasFont(font: Required<WatermarkFont>, ratio?: number, lineHeight?: number): string;
+declare function getContentLines(content: WatermarkContent | WatermarkContent[] | undefined, font: Required<WatermarkFont>): WatermarkContentLine[];
 /** Whether to re-render the watermark */
 declare function reRendering(mutation: MutationRecord, isWatermarkEle: (ele: Node, index?: number) => boolean): boolean;
 //#endregion
-export { getPixelRatio, getStyleStr, reRendering, toLowercaseSeparator };
+export { WatermarkContentLine, getCanvasFont, getContentLines, getFontSize, getPixelRatio, getStyleStr, reRendering, toLowercaseSeparator };

package/dist/watermark/utils.js

@@ -1,3 +1,4 @@
+import toList from "../_util/toList.js";
 //#region src/watermark/utils.ts
 /** converting camel-cased strings to be lowercase and link it with Separator */
 function toLowercaseSeparator(key) {
@@ -10,6 +11,37 @@ function getStyleStr(style) {
 function getPixelRatio() {
 	return window.devicePixelRatio || 1;
 }
+function isWatermarkText(content) {
+	return typeof content === "object" && content !== null && !Array.isArray(content);
+}
+function getFontSize(font, ratio = 1) {
+	return Number(font.fontSize) * ratio;
+}
+function getCanvasFont(font, ratio = 1, lineHeight) {
+	const mergedLineHeight = lineHeight === void 0 ? "" : `/${lineHeight}px`;
+	return `${font.fontStyle} normal ${font.fontWeight} ${getFontSize(font, ratio)}px${mergedLineHeight} ${font.fontFamily}`;
+}
+/** Merge per-line font over the base font, ignoring `undefined` overrides. */
+function mergeFont(base, override) {
+	const merged = { ...base };
+	for (const key of Object.keys(override)) {
+		const value = override[key];
+		if (value !== void 0) merged[key] = value;
+	}
+	return merged;
+}
+function getContentLines(content, font) {
+	return toList(content, true).map((item) => {
+		if (isWatermarkText(item)) return {
+			text: item.text ?? "",
+			font: mergeFont(font, item.font ?? {})
+		};
+		return {
+			text: item ?? "",
+			font
+		};
+	});
+}
 /** Whether to re-render the watermark */
 function reRendering(mutation, isWatermarkEle) {
 	let flag = false;
@@ -17,6 +49,5 @@ function reRendering(mutation, isWatermarkEle) {
 	if (mutation.type === "attributes" && isWatermarkEle(mutation.target)) flag = true;
 	return flag;
 }
-
 //#endregion
-export { getPixelRatio, getStyleStr, reRendering, toLowercaseSeparator };
+export { getCanvasFont, getContentLines, getFontSize, getPixelRatio, getStyleStr, reRendering, toLowercaseSeparator };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "antdv-next",
   "type": "module",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "Ant Design Vue3 Component Library",
   "author": {
     "email": "aibayanyu@gamil.com",
@@ -178,7 +178,7 @@
   "dependencies": {
     "@ant-design/colors": "^8.0.1",
     "@ant-design/fast-color": "^3.0.1",
-    "@antdv-next/icons": "^1.0.6",
+    "@antdv-next/icons": "^1.1.1",
     "@v-c/async-validator": "^1.0.1",
     "@v-c/cascader": "^1.1.1",
     "@v-c/checkbox": "^1.0.1",
@@ -191,23 +191,23 @@
     "@v-c/input": "^1.1.0",
     "@v-c/input-number": "^1.0.5",
     "@v-c/mentions": "^1.1.0",
-    "@v-c/menu": "^1.2.0",
+    "@v-c/menu": "^1.2.1",
     "@v-c/mutate-observer": "^1.0.2",
     "@v-c/notification": "^2.0.1",
     "@v-c/pagination": "^1.0.1",
-    "@v-c/picker": "^1.1.3",
+    "@v-c/picker": "^1.2.0",
     "@v-c/progress": "^1.0.1",
     "@v-c/qrcode": "^1.0.1",
     "@v-c/rate": "^1.0.1",
     "@v-c/resize-observer": "^1.1.2",
-    "@v-c/segmented": "^1.0.2",
-    "@v-c/select": "^1.1.2",
+    "@v-c/segmented": "^1.0.3",
+    "@v-c/select": "^1.1.3",
     "@v-c/slick": "^1.0.2",
     "@v-c/slider": "^1.1.0",
     "@v-c/steps": "^1.0.0",
     "@v-c/switch": "^1.0.1",
     "@v-c/table": "^1.1.6",
-    "@v-c/tabs": "^1.1.1",
+    "@v-c/tabs": "^1.2.1",
     "@v-c/textarea": "^1.1.0",
     "@v-c/tooltip": "^1.0.3",
     "@v-c/tour": "^1.1.0",
@@ -217,9 +217,9 @@
     "@v-c/upload": "^1.0.0",
     "@v-c/util": "^1.0.19",
     "@v-c/virtual-list": "^1.0.9",
-    "@vueuse/core": "^14.2.1",
-    "dayjs": "^1.11.20",
-    "es-toolkit": "1.45.1",
+    "@vueuse/core": "^14.3.0",
+    "dayjs": "^1.11.21",
+    "es-toolkit": "1.48.1",
     "scroll-into-view-if-needed": "^3.1.0",
     "throttle-debounce": "^5.0.2",
     "@antdv-next/cssinjs": "^1.0.6"