@sdata/web-vue 3.30.0 → 4.1.0

package/es/watermark/watermark.js

@@ -1,294 +1,5 @@
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
-import { getPrefixCls } from "../_utils/global-config.js";
-import { isArray } from "../_utils/is.js";
-import { useMutationObserver } from "./hooks/use-mutation-observer.js";
-import { useTheme } from "./hooks/use-theme.js";
-import { canvasToGray, styleToString } from "./utils/index.js";
-import { computed, createVNode, defineComponent, mergeProps, onMounted, ref, shallowRef, toRefs, watch } from "vue";
-//#region components/watermark/watermark.tsx
-var watermark_default = /* @__PURE__ */ defineComponent({
-	name: "Watermark",
-	props: {
-		/**
-		* @zh 水印文字内容
-		* @en Watermark text content
-		*/
-		content: { type: [String, Array] },
-		/**
-		* @zh 图片源，建议使用 2 倍或 3 倍图
-		* @en Image watermark address
-		*/
-		image: { type: String },
-		/**
-		* @zh 水印宽度（默认为内容宽度）
-		* @en Watermark width
-		*/
-		width: { type: Number },
-		/**
-		* @zh 水印高度（默认为内容高度）
-		* @en Watermark height
-		*/
-		height: { type: Number },
-		/**
-		* @zh 水印间的间距
-		* @en Watermark spacing
-		*/
-		gap: {
-			type: Array,
-			default: () => [90, 90]
-		},
-		/**
-		* @zh 距离容器左上角的偏移量，默认为水印间距的一半
-		* @en The offset from the upper left corner of the container, the default is half the watermark spacing
-		* @defaultValue [gap[0]/2, gap[1]/2]
-		*/
-		offset: { type: Array },
-		/**
-		* @zh 旋转角度
-		* @en Watermark rotation angle
-		*/
-		rotate: {
-			type: Number,
-			default: -22
-		},
-		/**
-		* @zh 水印字体样式，具体参数配置看 [WatermarkFont](#WatermarkFont)
-		* @en Watermark font style, specific parameter configuration see [WatermarkFont](#WatermarkFont)
-		*/
-		font: { type: Object },
-		/**
-		* @zh 水印层级
-		* @en Watermark z-index
-		*/
-		zIndex: {
-			type: Number,
-			default: 6
-		},
-		/**
-		* @zh 透明度
-		* @en Watermark opacity
-		*/
-		alpha: {
-			type: Number,
-			default: 1
-		},
-		/**
-		* @zh 水印防篡改
-		* @en Watermark anti-tampering
-		*/
-		antiTamper: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 灰阶水印
-		* @en Grayscale watermark
-		*/
-		grayscale: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		* @zh 是否重复水印
-		* @en Whether to repeat the watermark
-		*/
-		repeat: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		* @zh 是否错开排列
-		* @en Whether to stagger the arrangement layout
-		*/
-		staggered: {
-			type: Boolean,
-			default: true
-		}
-	},
-	setup(props, { slots, attrs }) {
-		const { width, height, image, rotate, alpha, grayscale } = toRefs(props);
-		const prefixCls = getPrefixCls("watermark");
-		const ratio = window.devicePixelRatio || 1;
-		const containerRef = shallowRef();
-		const watermarkMap = ref(/* @__PURE__ */ new Map());
-		const fontSize = computed(() => {
-			var _props$font$fontSize, _props$font;
-			return (_props$font$fontSize = (_props$font = props.font) === null || _props$font === void 0 ? void 0 : _props$font.fontSize) !== null && _props$font$fontSize !== void 0 ? _props$font$fontSize : 16;
-		});
-		const fontWeight = computed(() => {
-			var _props$font$fontWeigh, _props$font2;
-			return (_props$font$fontWeigh = (_props$font2 = props.font) === null || _props$font2 === void 0 ? void 0 : _props$font2.fontWeight) !== null && _props$font$fontWeigh !== void 0 ? _props$font$fontWeigh : "normal";
-		});
-		const fontStyle = computed(() => {
-			var _props$font$fontStyle, _props$font3;
-			return (_props$font$fontStyle = (_props$font3 = props.font) === null || _props$font3 === void 0 ? void 0 : _props$font3.fontStyle) !== null && _props$font$fontStyle !== void 0 ? _props$font$fontStyle : "normal";
-		});
-		const fontFamily = computed(() => {
-			var _props$font$fontFamil, _props$font4;
-			return (_props$font$fontFamil = (_props$font4 = props.font) === null || _props$font4 === void 0 ? void 0 : _props$font4.fontFamily) !== null && _props$font$fontFamil !== void 0 ? _props$font$fontFamil : "sans-serif";
-		});
-		const textAlign = computed(() => {
-			var _props$font$textAlign, _props$font5;
-			return (_props$font$textAlign = (_props$font5 = props.font) === null || _props$font5 === void 0 ? void 0 : _props$font5.textAlign) !== null && _props$font$textAlign !== void 0 ? _props$font$textAlign : "center";
-		});
-		const contents = computed(() => isArray(props.content) ? props.content : [props.content]);
-		const color = computed(() => {
-			var _props$font$color, _props$font6;
-			return (_props$font$color = (_props$font6 = props.font) === null || _props$font6 === void 0 ? void 0 : _props$font6.color) !== null && _props$font$color !== void 0 ? _props$font$color : theme.value === "dark" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
-		});
-		const gapX = computed(() => {
-			var _props$gap$, _props$gap;
-			return (_props$gap$ = (_props$gap = props.gap) === null || _props$gap === void 0 ? void 0 : _props$gap[0]) !== null && _props$gap$ !== void 0 ? _props$gap$ : 90;
-		});
-		const gapY = computed(() => {
-			var _props$gap$2, _props$gap2;
-			return (_props$gap$2 = (_props$gap2 = props.gap) === null || _props$gap2 === void 0 ? void 0 : _props$gap2[1]) !== null && _props$gap$2 !== void 0 ? _props$gap$2 : 90;
-		});
-		const gapXCenter = computed(() => gapX.value / 2);
-		const gapYCenter = computed(() => gapY.value / 2);
-		const offsetLeft = computed(() => {
-			var _props$offset$, _props$offset;
-			return (_props$offset$ = (_props$offset = props.offset) === null || _props$offset === void 0 ? void 0 : _props$offset[0]) !== null && _props$offset$ !== void 0 ? _props$offset$ : gapXCenter.value;
-		});
-		const offsetTop = computed(() => {
-			var _props$offset$2, _props$offset2;
-			return (_props$offset$2 = (_props$offset2 = props.offset) === null || _props$offset2 === void 0 ? void 0 : _props$offset2[1]) !== null && _props$offset$2 !== void 0 ? _props$offset$2 : gapYCenter.value;
-		});
-		const markStyle = computed(() => {
-			var _props$zIndex;
-			const left = offsetLeft.value - gapXCenter.value;
-			const top = offsetTop.value - gapYCenter.value;
-			return {
-				position: "absolute",
-				left: left > 0 ? `${left}px` : 0,
-				top: top > 0 ? `${top}px` : 0,
-				width: left > 0 ? `calc(100% - ${left}px)` : "100%",
-				height: top > 0 ? `calc(100% - ${top}px)` : "100%",
-				pointerEvents: "none",
-				backgroundRepeat: props.repeat ? "repeat" : "no-repeat",
-				backgroundPosition: `${left > 0 ? 0 : left}px ${top > 0 ? 0 : top}px`,
-				zIndex: (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 6
-			};
-		});
-		const isStaggered = computed(() => props.repeat && props.staggered);
-		const appendWatermark = (base64, width) => {
-			if (containerRef.value) {
-				var _containerRef$value;
-				const watermarkEle = watermarkMap.value.get(containerRef.value);
-				if (watermarkEle) {
-					if (containerRef.value.contains(watermarkEle)) containerRef.value.removeChild(watermarkEle);
-					watermarkMap.value.delete(containerRef.value);
-				}
-				const newWatermarkEle = document.createElement("div");
-				newWatermarkEle.setAttribute("style", styleToString(_objectSpread2(_objectSpread2({}, markStyle.value), {}, {
-					backgroundImage: `url('${base64}')`,
-					backgroundSize: `${width}px`
-				})));
-				(_containerRef$value = containerRef.value) === null || _containerRef$value === void 0 || _containerRef$value.append(newWatermarkEle);
-				watermarkMap.value.set(containerRef.value, newWatermarkEle);
-			}
-		};
-		const getMarkSize = (ctx) => {
-			var _width$value, _height$value;
-			let defaultWidth = 120;
-			let defaultHeight = 28;
-			if (!image.value && ctx.measureText) {
-				ctx.font = `${fontSize.value}px ${fontFamily.value}`;
-				const widths = contents.value.map((item) => ctx.measureText(item).width);
-				defaultWidth = Math.ceil(Math.max(...widths));
-				defaultHeight = fontSize.value * contents.value.length + (contents.value.length - 1) * 3;
-			}
-			return [(_width$value = width.value) !== null && _width$value !== void 0 ? _width$value : defaultWidth, (_height$value = height.value) !== null && _height$value !== void 0 ? _height$value : defaultHeight];
-		};
-		const renderWatermark = () => {
-			const canvas = document.createElement("canvas");
-			const ctx = canvas.getContext("2d");
-			if (!ctx) return;
-			const [markWidth, markheight] = getMarkSize(ctx);
-			const realMarkWidth = markWidth * ratio;
-			const realMarkHeight = markheight * ratio;
-			const canvasWidth = (gapX.value + markWidth) * ratio;
-			const canvasHeight = (gapY.value + markheight) * ratio;
-			const drawX = gapX.value / 2 * ratio;
-			const drawY = gapY.value / 2 * ratio;
-			const rotateX = canvasWidth / 2;
-			const rotateY = canvasHeight / 2;
-			const baseSize = isStaggered.value ? 2 : 1;
-			const fillWidth = (gapX.value + markWidth) * baseSize;
-			canvas.width = canvasWidth * baseSize;
-			canvas.height = canvasHeight * baseSize;
-			ctx.globalAlpha = alpha.value;
-			ctx.save();
-			ctx.translate(rotateX, rotateY);
-			ctx.rotate(Math.PI / 180 * rotate.value);
-			ctx.translate(-rotateX, -rotateY);
-			const drawImage = () => {
-				ctx.restore();
-				if (isStaggered.value) ctx.drawImage(canvas, 0, 0, canvasWidth, canvasHeight, canvasWidth, canvasHeight, canvasWidth, canvasHeight);
-				grayscale.value && canvasToGray(canvas);
-				appendWatermark(canvas.toDataURL(), fillWidth);
-			};
-			if (image.value) {
-				const img = new Image();
-				img.onload = () => {
-					ctx.drawImage(img, drawX, drawY, realMarkWidth, realMarkHeight);
-					drawImage();
-				};
-				img.crossOrigin = "anonymous";
-				img.referrerPolicy = "no-referrer";
-				img.src = image.value;
-			} else {
-				var _contents$value;
-				const mergedFontSize = Number(fontSize.value) * ratio;
-				ctx.font = `${fontStyle.value} normal ${fontWeight.value} ${mergedFontSize}px/${markheight}px ${fontFamily.value}`;
-				ctx.fillStyle = color.value;
-				ctx.textAlign = textAlign.value;
-				ctx.textBaseline = "top";
-				ctx.translate(realMarkWidth / 2, 0);
-				(_contents$value = contents.value) === null || _contents$value === void 0 || _contents$value.forEach((item, index) => {
-					ctx.fillText(item !== null && item !== void 0 ? item : "", drawX, drawY + index * (mergedFontSize + 3 * ratio));
-				});
-				drawImage();
-			}
-		};
-		const isWatermarkEle = (ele) => Array.from(watermarkMap.value.values()).includes(ele);
-		const handleMutations = (mutations) => {
-			if (!props.antiTamper) return;
-			for (const mutation of mutations) {
-				const isRemoved = Array.from(mutation.removedNodes).some((node) => isWatermarkEle(node));
-				const isModified = mutation.type === "attributes" && isWatermarkEle(mutation.target);
-				if (isRemoved || isModified) {
-					renderWatermark();
-					break;
-				}
-			}
-		};
-		const { theme } = useTheme(renderWatermark);
-		onMounted(() => {
-			renderWatermark();
-			useMutationObserver(containerRef.value, handleMutations, {
-				attributes: true,
-				childList: true,
-				characterData: true,
-				subtree: true
-			});
-		});
-		watch(props, renderWatermark, {
-			deep: true,
-			flush: "post"
-		});
-		return () => {
-			var _slots$default;
-			return createVNode("div", mergeProps({
-				"ref": containerRef,
-				"class": prefixCls,
-				"style": {
-					position: "relative",
-					overflow: "hidden"
-				}
-			}, attrs), [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
-		};
-	}
-});
+import watermark_vue_vue_type_script_setup_true_lang_default from "./watermark.vue_vue_type_script_setup_true_lang.js";
+//#region components/watermark/watermark.vue
+var watermark_default = watermark_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 export { watermark_default as default };

package/es/watermark/{watermark.d.ts → watermark.vue.d.ts}

@@ -1,6 +1,10 @@
 import { PropType } from 'vue';
 import { WatermarkFont } from './interface';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     content: {
         type: PropType<string | string[]>;
     };
@@ -51,7 +55,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     content: {
         type: PropType<string | string[]>;
     };
@@ -112,4 +116,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     grayscale: boolean;
     staggered: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/watermark/watermark.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,303 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isArray } from "../_utils/is.js";
+import { useMutationObserver } from "./hooks/use-mutation-observer.js";
+import { useTheme } from "./hooks/use-theme.js";
+import { canvasToGray, styleToString } from "./utils/index.js";
+import { computed, createElementBlock, defineComponent, mergeProps, onMounted, openBlock, ref, renderSlot, shallowRef, toRef, unref, watch } from "vue";
+//#region components/watermark/watermark.vue?vue&type=script&setup=true&lang.ts
+var watermark_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Watermark",
+	inheritAttrs: false
+}), {}, {
+	__name: "watermark",
+	props: {
+		/**
+		* @zh 水印文字内容
+		* @en Watermark text content
+		*/
+		content: { type: [String, Array] },
+		/**
+		* @zh 图片源，建议使用 2 倍或 3 倍图
+		* @en Image watermark address
+		*/
+		image: { type: String },
+		/**
+		* @zh 水印宽度（默认为内容宽度）
+		* @en Watermark width
+		*/
+		width: { type: Number },
+		/**
+		* @zh 水印高度（默认为内容高度）
+		* @en Watermark height
+		*/
+		height: { type: Number },
+		/**
+		* @zh 水印间的间距
+		* @en Watermark spacing
+		*/
+		gap: {
+			type: Array,
+			default: () => [90, 90]
+		},
+		/**
+		* @zh 距离容器左上角的偏移量，默认为水印间距的一半
+		* @en The offset from the upper left corner of the container, the default is half the watermark spacing
+		* @defaultValue [gap[0]/2, gap[1]/2]
+		*/
+		offset: { type: Array },
+		/**
+		* @zh 旋转角度
+		* @en Watermark rotation angle
+		*/
+		rotate: {
+			type: Number,
+			default: -22
+		},
+		/**
+		* @zh 水印字体样式，具体参数配置看 [WatermarkFont](#WatermarkFont)
+		* @en Watermark font style, specific parameter configuration see [WatermarkFont](#WatermarkFont)
+		*/
+		font: { type: Object },
+		/**
+		* @zh 水印层级
+		* @en Watermark z-index
+		*/
+		zIndex: {
+			type: Number,
+			default: 6
+		},
+		/**
+		* @zh 透明度
+		* @en Watermark opacity
+		*/
+		alpha: {
+			type: Number,
+			default: 1
+		},
+		/**
+		* @zh 水印防篡改
+		* @en Watermark anti-tampering
+		*/
+		antiTamper: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 灰阶水印
+		* @en Grayscale watermark
+		*/
+		grayscale: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 是否重复水印
+		* @en Whether to repeat the watermark
+		*/
+		repeat: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 是否错开排列
+		* @en Whether to stagger the arrangement layout
+		*/
+		staggered: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const width = toRef(props, "width");
+		const height = toRef(props, "height");
+		const image = toRef(props, "image");
+		const rotate = toRef(props, "rotate");
+		const alpha = toRef(props, "alpha");
+		const grayscale = toRef(props, "grayscale");
+		const prefixCls = getPrefixCls("watermark");
+		const ratio = window.devicePixelRatio || 1;
+		const containerRef = shallowRef();
+		const watermarkMap = ref(/* @__PURE__ */ new Map());
+		const fontSize = computed(() => {
+			var _props$font$fontSize, _props$font;
+			return (_props$font$fontSize = (_props$font = props.font) === null || _props$font === void 0 ? void 0 : _props$font.fontSize) !== null && _props$font$fontSize !== void 0 ? _props$font$fontSize : 16;
+		});
+		const fontWeight = computed(() => {
+			var _props$font$fontWeigh, _props$font2;
+			return (_props$font$fontWeigh = (_props$font2 = props.font) === null || _props$font2 === void 0 ? void 0 : _props$font2.fontWeight) !== null && _props$font$fontWeigh !== void 0 ? _props$font$fontWeigh : "normal";
+		});
+		const fontStyle = computed(() => {
+			var _props$font$fontStyle, _props$font3;
+			return (_props$font$fontStyle = (_props$font3 = props.font) === null || _props$font3 === void 0 ? void 0 : _props$font3.fontStyle) !== null && _props$font$fontStyle !== void 0 ? _props$font$fontStyle : "normal";
+		});
+		const fontFamily = computed(() => {
+			var _props$font$fontFamil, _props$font4;
+			return (_props$font$fontFamil = (_props$font4 = props.font) === null || _props$font4 === void 0 ? void 0 : _props$font4.fontFamily) !== null && _props$font$fontFamil !== void 0 ? _props$font$fontFamil : "sans-serif";
+		});
+		const textAlign = computed(() => {
+			var _props$font$textAlign, _props$font5;
+			return (_props$font$textAlign = (_props$font5 = props.font) === null || _props$font5 === void 0 ? void 0 : _props$font5.textAlign) !== null && _props$font$textAlign !== void 0 ? _props$font$textAlign : "center";
+		});
+		const contents = computed(() => isArray(props.content) ? props.content : [props.content]);
+		const color = computed(() => {
+			var _props$font$color, _props$font6;
+			return (_props$font$color = (_props$font6 = props.font) === null || _props$font6 === void 0 ? void 0 : _props$font6.color) !== null && _props$font$color !== void 0 ? _props$font$color : theme.value === "dark" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
+		});
+		const gapX = computed(() => {
+			var _props$gap$, _props$gap;
+			return (_props$gap$ = (_props$gap = props.gap) === null || _props$gap === void 0 ? void 0 : _props$gap[0]) !== null && _props$gap$ !== void 0 ? _props$gap$ : 90;
+		});
+		const gapY = computed(() => {
+			var _props$gap$2, _props$gap2;
+			return (_props$gap$2 = (_props$gap2 = props.gap) === null || _props$gap2 === void 0 ? void 0 : _props$gap2[1]) !== null && _props$gap$2 !== void 0 ? _props$gap$2 : 90;
+		});
+		const gapXCenter = computed(() => gapX.value / 2);
+		const gapYCenter = computed(() => gapY.value / 2);
+		const offsetLeft = computed(() => {
+			var _props$offset$, _props$offset;
+			return (_props$offset$ = (_props$offset = props.offset) === null || _props$offset === void 0 ? void 0 : _props$offset[0]) !== null && _props$offset$ !== void 0 ? _props$offset$ : gapXCenter.value;
+		});
+		const offsetTop = computed(() => {
+			var _props$offset$2, _props$offset2;
+			return (_props$offset$2 = (_props$offset2 = props.offset) === null || _props$offset2 === void 0 ? void 0 : _props$offset2[1]) !== null && _props$offset$2 !== void 0 ? _props$offset$2 : gapYCenter.value;
+		});
+		const markStyle = computed(() => {
+			var _props$zIndex;
+			const left = offsetLeft.value - gapXCenter.value;
+			const top = offsetTop.value - gapYCenter.value;
+			return {
+				position: "absolute",
+				left: left > 0 ? `${left}px` : 0,
+				top: top > 0 ? `${top}px` : 0,
+				width: left > 0 ? `calc(100% - ${left}px)` : "100%",
+				height: top > 0 ? `calc(100% - ${top}px)` : "100%",
+				pointerEvents: "none",
+				backgroundRepeat: props.repeat ? "repeat" : "no-repeat",
+				backgroundPosition: `${left > 0 ? 0 : left}px ${top > 0 ? 0 : top}px`,
+				zIndex: (_props$zIndex = props.zIndex) !== null && _props$zIndex !== void 0 ? _props$zIndex : 6
+			};
+		});
+		const isStaggered = computed(() => props.repeat && props.staggered);
+		const appendWatermark = (base64, width) => {
+			if (containerRef.value) {
+				var _containerRef$value;
+				const watermarkEle = watermarkMap.value.get(containerRef.value);
+				if (watermarkEle) {
+					if (containerRef.value.contains(watermarkEle)) containerRef.value.removeChild(watermarkEle);
+					watermarkMap.value.delete(containerRef.value);
+				}
+				const newWatermarkEle = document.createElement("div");
+				newWatermarkEle.setAttribute("style", styleToString(_objectSpread2(_objectSpread2({}, markStyle.value), {}, {
+					backgroundImage: `url('${base64}')`,
+					backgroundSize: `${width}px`
+				})));
+				(_containerRef$value = containerRef.value) === null || _containerRef$value === void 0 || _containerRef$value.append(newWatermarkEle);
+				watermarkMap.value.set(containerRef.value, newWatermarkEle);
+			}
+		};
+		const getMarkSize = (ctx) => {
+			var _width$value, _height$value;
+			let defaultWidth = 120;
+			let defaultHeight = 28;
+			if (!image.value && ctx.measureText) {
+				ctx.font = `${fontSize.value}px ${fontFamily.value}`;
+				const widths = contents.value.map((item) => ctx.measureText(item).width);
+				defaultWidth = Math.ceil(Math.max(...widths));
+				defaultHeight = fontSize.value * contents.value.length + (contents.value.length - 1) * 3;
+			}
+			return [(_width$value = width.value) !== null && _width$value !== void 0 ? _width$value : defaultWidth, (_height$value = height.value) !== null && _height$value !== void 0 ? _height$value : defaultHeight];
+		};
+		const renderWatermark = () => {
+			const canvas = document.createElement("canvas");
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return;
+			const [markWidth, markheight] = getMarkSize(ctx);
+			const realMarkWidth = markWidth * ratio;
+			const realMarkHeight = markheight * ratio;
+			const canvasWidth = (gapX.value + markWidth) * ratio;
+			const canvasHeight = (gapY.value + markheight) * ratio;
+			const drawX = gapX.value / 2 * ratio;
+			const drawY = gapY.value / 2 * ratio;
+			const rotateX = canvasWidth / 2;
+			const rotateY = canvasHeight / 2;
+			const baseSize = isStaggered.value ? 2 : 1;
+			const fillWidth = (gapX.value + markWidth) * baseSize;
+			canvas.width = canvasWidth * baseSize;
+			canvas.height = canvasHeight * baseSize;
+			ctx.globalAlpha = alpha.value;
+			ctx.save();
+			ctx.translate(rotateX, rotateY);
+			ctx.rotate(Math.PI / 180 * rotate.value);
+			ctx.translate(-rotateX, -rotateY);
+			const drawImage = () => {
+				ctx.restore();
+				if (isStaggered.value) ctx.drawImage(canvas, 0, 0, canvasWidth, canvasHeight, canvasWidth, canvasHeight, canvasWidth, canvasHeight);
+				grayscale.value && canvasToGray(canvas);
+				appendWatermark(canvas.toDataURL(), fillWidth);
+			};
+			if (image.value) {
+				const img = new Image();
+				img.onload = () => {
+					ctx.drawImage(img, drawX, drawY, realMarkWidth, realMarkHeight);
+					drawImage();
+				};
+				img.crossOrigin = "anonymous";
+				img.referrerPolicy = "no-referrer";
+				img.src = image.value;
+			} else {
+				var _contents$value;
+				const mergedFontSize = Number(fontSize.value) * ratio;
+				ctx.font = `${fontStyle.value} normal ${fontWeight.value} ${mergedFontSize}px/${markheight}px ${fontFamily.value}`;
+				ctx.fillStyle = color.value;
+				ctx.textAlign = textAlign.value;
+				ctx.textBaseline = "top";
+				ctx.translate(realMarkWidth / 2, 0);
+				(_contents$value = contents.value) === null || _contents$value === void 0 || _contents$value.forEach((item, index) => {
+					ctx.fillText(item !== null && item !== void 0 ? item : "", drawX, drawY + index * (mergedFontSize + 3 * ratio));
+				});
+				drawImage();
+			}
+		};
+		const isWatermarkEle = (ele) => Array.from(watermarkMap.value.values()).includes(ele);
+		const handleMutations = (mutations) => {
+			if (!props.antiTamper) return;
+			for (const mutation of mutations) {
+				const isRemoved = Array.from(mutation.removedNodes).some((node) => isWatermarkEle(node));
+				const isModified = mutation.type === "attributes" && isWatermarkEle(mutation.target);
+				if (isRemoved || isModified) {
+					renderWatermark();
+					break;
+				}
+			}
+		};
+		const { theme } = useTheme(renderWatermark);
+		onMounted(() => {
+			renderWatermark();
+			useMutationObserver(containerRef.value, handleMutations, {
+				attributes: true,
+				childList: true,
+				characterData: true,
+				subtree: true
+			});
+		});
+		watch(props, renderWatermark, {
+			deep: true,
+			flush: "post"
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: unref(prefixCls),
+				style: {
+					"position": "relative",
+					"overflow": "hidden"
+				}
+			}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+}));
+//#endregion
+export { watermark_vue_vue_type_script_setup_true_lang_default as default };