@vaebe/ccui 2.0.0-beta.0

package/watermark/ccui-cli.css

@@ -0,0 +1,2 @@
+:root{--ccui-global-bg:#f5f5f5;--ccui-global-bg-normal:#fff;--ccui-base-bg:#fff;--ccui-base-bg-dark:#000000d9;--ccui-brand:#1677ff;--ccui-brand-foil:#e6f4ff;--ccui-brand-hover:#4096ff;--ccui-brand-active:#0958d9;--ccui-brand-active-focus:#003eb3;--ccui-contrast:#ff4d4f;--ccui-text:#000000e0;--ccui-text-weak:#000000a6;--ccui-aide-text:#00000073;--ccui-aide-text-stress:#000000a6;--ccui-placeholder:#00000040;--ccui-light-text:#fff;--ccui-dark-text:#000000e0;--ccui-link:#1677ff;--ccui-link-active:#0958d9;--ccui-link-light:#4096ff;--ccui-link-light-active:#69b1ff;--ccui-line:#d9d9d9;--ccui-dividing-line:#f0f0f0;--ccui-block:#fff;--ccui-area:#fafafa;--ccui-danger:#ff4d4f;--ccui-warning:#faad14;--ccui-waiting:#00000073;--ccui-success:#52c41a;--ccui-info:#1677ff;--ccui-initial:#e6f4ff;--ccui-unavailable:#f5f5f5;--ccui-shadow:#00000026;--ccui-light-shadow:#0000000f;--ccui-icon-text:#000000e0;--ccui-icon-bg:#fff;--ccui-icon-fill:#00000073;--ccui-icon-fill-hover:#000000a6;--ccui-icon-fill-active:#1677ff;--ccui-icon-fill-active-hover:#4096ff;--ccui-form-control-line:#d9d9d9;--ccui-form-control-line-hover:#4096ff;--ccui-form-control-line-active:#1677ff;--ccui-form-control-line-active-hover:#0958d9;--ccui-list-item-active-bg:#1677ff;--ccui-list-item-active-text:#fff;--ccui-list-item-active-hover-bg:#4096ff;--ccui-list-item-hover-bg:#0000000a;--ccui-list-item-hover-text:#1677ff;--ccui-list-item-selected-bg:#e6f4ff;--ccui-list-item-strip-bg:#fafafa;--ccui-disabled-bg:#0000000a;--ccui-disabled-line:#d9d9d9;--ccui-disabled-text:#00000040;--ccui-primary-disabled:#91caff;--ccui-icon-fill-active-disabled:#91caff;--ccui-label-bg:#fafafa;--ccui-connected-overlay-bg:#fff;--ccui-connected-overlay-line:#1677ff;--ccui-fullscreen-overlay-bg:#fff;--ccui-feedback-overlay-bg:#000000d9;--ccui-feedback-overlay-text:#fff;--ccui-embed-search-bg:#fafafa;--ccui-embed-search-bg-hover:#f0f0f0;--ccui-float-block-shadow:#1677ff29;--ccui-highlight-overlay:#fffc;--ccui-range-item-hover-bg:#e6f4ff;--ccui-primary:#1677ff;--ccui-primary-hover:#4096ff;--ccui-primary-active:#0958d9;--ccui-contrast-hover:#ff7875;--ccui-contrast-active:#d9363e;--ccui-secondary:#000000a6;--ccui-danger-line:#ffccc7;--ccui-danger-bg:#fff2f0;--ccui-warning-line:#ffe58f;--ccui-warning-bg:#fffbe6;--ccui-info-line:#91caff;--ccui-info-bg:#e6f4ff;--ccui-success-line:#b7eb8f;--ccui-success-bg:#f6ffed;--ccui-primary-line:#91caff;--ccui-primary-bg:#e6f4ff;--ccui-default-line:#d9d9d9;--ccui-default-bg:#fff;--ccui-font-size:14px;--ccui-font-size-card-title:16px;--ccui-font-size-page-title:20px;--ccui-font-size-modal-title:16px;--ccui-font-size-price:24px;--ccui-font-size-data-overview:30px;--ccui-font-size-icon:16px;--ccui-font-size-sm:12px;--ccui-font-size-md:14px;--ccui-font-size-lg:16px;--ccui-font-title-weight:600;--ccui-font-content-weight:400;--ccui-line-height-base:1.57143;--ccui-border-radius:6px;--ccui-border-radius-feedback:8px;--ccui-border-radius-card:8px;--ccui-shadow-length-base:0 1px 2px 0;--ccui-shadow-length-slide-left:-6px 0 16px 0;--ccui-shadow-length-slide-right:6px 0 16px 0;--ccui-shadow-length-connected-overlay:0 6px 16px 0;--ccui-shadow-length-hover:0 6px 16px 0;--ccui-shadow-length-feedback-overlay:0 6px 16px 0;--ccui-shadow-fullscreen-overlay:0 6px 16px 0;--ccui-animation-duration-slow:.3s;--ccui-animation-duration-base:.2s;--ccui-animation-duration-fast:.1s;--ccui-animation-ease-in:cubic-bezier(.7, 0, .84, 0);--ccui-animation-ease-out:cubic-bezier(.215, .61, .355, 1);--ccui-animation-ease-in-out:cubic-bezier(.78, .14, .15, .86);--ccui-animation-ease-in-smooth:cubic-bezier(.645, .045, .355, 1);--ccui-animation-linear:cubic-bezier(0, 0, 1, 1);--ccui-z-index-full-page-overlay:1080;--ccui-z-index-pop-up:1060;--ccui-z-index-dropdown:1052;--ccui-z-index-modal:1050;--ccui-z-index-drawer:1040;--ccui-z-index-framework:1000;--ccui-size-sm:24px;--ccui-size-md:32px;--ccui-size-lg:40px;--ccui-color-primary:#1677ff;--ccui-color-primary-hover:#4096ff;--ccui-color-primary-active:#0958d9;--ccui-color-primary-bg:#e6f4ff;--ccui-color-primary-bg-hover:#bae0ff;--ccui-color-primary-border:#91caff;--ccui-color-primary-border-hover:#69b1ff;--ccui-color-success:#52c41a;--ccui-color-success-hover:#73d13d;--ccui-color-success-active:#389e0d;--ccui-color-success-bg:#f6ffed;--ccui-color-success-border:#b7eb8f;--ccui-color-warning:#faad14;--ccui-color-warning-hover:#ffc53d;--ccui-color-warning-active:#d48806;--ccui-color-warning-bg:#fffbe6;--ccui-color-warning-border:#ffe58f;--ccui-color-error:#ff4d4f;--ccui-color-error-hover:#ff7875;--ccui-color-error-active:#d9363e;--ccui-color-error-bg:#fff2f0;--ccui-color-error-border:#ffccc7;--ccui-color-info:#1677ff;--ccui-color-info-hover:#4096ff;--ccui-color-info-bg:#e6f4ff;--ccui-color-info-border:#91caff;--ccui-color-text:#000000e0;--ccui-color-text-secondary:#000000a6;--ccui-color-text-tertiary:#00000073;--ccui-color-text-quaternary:#00000040;--ccui-color-text-disabled:#00000040;--ccui-color-text-placeholder:#00000040;--ccui-color-text-heading:#000000e0;--ccui-color-text-light-solid:#fff;--ccui-color-bg-base:#fff;--ccui-color-bg-container:#fff;--ccui-color-bg-elevated:#fff;--ccui-color-bg-layout:#f5f5f5;--ccui-color-bg-spotlight:#000000d9;--ccui-color-bg-mask:#00000073;--ccui-color-bg-text-hover:#0000000f;--ccui-color-bg-text-active:#00000026;--ccui-color-border:#d9d9d9;--ccui-color-border-secondary:#f0f0f0;--ccui-color-border-disabled:#0000000a;--ccui-color-split:#0505050f;--ccui-color-fill:#00000026;--ccui-color-fill-secondary:#0000000f;--ccui-color-fill-tertiary:#0000000a;--ccui-color-fill-quaternary:#00000005;--ccui-control-outline:#0591ff1a;--ccui-control-outline-error:#ff26050f;--ccui-control-outline-warning:#ffd7051a;--ccui-red-1:#fff1f0;--ccui-red-2:#ffccc7;--ccui-red-3:#ffa39e;--ccui-red-4:#ff7875;--ccui-red-5:#ff4d4f;--ccui-red-6:#f5222d;--ccui-red-7:#cf1322;--ccui-red-8:#a8071a;--ccui-red-9:#820014;--ccui-red-10:#5c0011;--ccui-volcano-1:#fff2e8;--ccui-volcano-2:#ffd8bf;--ccui-volcano-3:#ffbb96;--ccui-volcano-4:#ff9c6e;--ccui-volcano-5:#ff7a45;--ccui-volcano-6:#fa541c;--ccui-volcano-7:#d4380d;--ccui-volcano-8:#ad2102;--ccui-volcano-9:#871400;--ccui-volcano-10:#610b00;--ccui-orange-1:#fff7e6;--ccui-orange-2:#ffe7ba;--ccui-orange-3:#ffd591;--ccui-orange-4:#ffc069;--ccui-orange-5:#ffa940;--ccui-orange-6:#fa8c16;--ccui-orange-7:#d46b08;--ccui-orange-8:#ad4e00;--ccui-orange-9:#873800;--ccui-orange-10:#612500;--ccui-gold-1:#fffbe6;--ccui-gold-2:#fff1b8;--ccui-gold-3:#ffe58f;--ccui-gold-4:#ffd666;--ccui-gold-5:#ffc53d;--ccui-gold-6:#faad14;--ccui-gold-7:#d48806;--ccui-gold-8:#ad6800;--ccui-gold-9:#874d00;--ccui-gold-10:#613400;--ccui-yellow-1:#feffe6;--ccui-yellow-2:#ffffb8;--ccui-yellow-3:#fffb8f;--ccui-yellow-4:#fff566;--ccui-yellow-5:#ffec3d;--ccui-yellow-6:#fadb14;--ccui-yellow-7:#d4b106;--ccui-yellow-8:#ad8b00;--ccui-yellow-9:#876800;--ccui-yellow-10:#614700;--ccui-lime-1:#fcffe6;--ccui-lime-2:#f4ffb8;--ccui-lime-3:#eaff8f;--ccui-lime-4:#d3f261;--ccui-lime-5:#bae637;--ccui-lime-6:#a0d911;--ccui-lime-7:#7cb305;--ccui-lime-8:#5b8c00;--ccui-lime-9:#3f6600;--ccui-lime-10:#254000;--ccui-green-1:#f6ffed;--ccui-green-2:#d9f7be;--ccui-green-3:#b7eb8f;--ccui-green-4:#95de64;--ccui-green-5:#73d13d;--ccui-green-6:#52c41a;--ccui-green-7:#389e0d;--ccui-green-8:#237804;--ccui-green-9:#135200;--ccui-green-10:#092b00;--ccui-cyan-1:#e6fffb;--ccui-cyan-2:#b5f5ec;--ccui-cyan-3:#87e8de;--ccui-cyan-4:#5cdbd3;--ccui-cyan-5:#36cfc9;--ccui-cyan-6:#13c2c2;--ccui-cyan-7:#08979c;--ccui-cyan-8:#006d75;--ccui-cyan-9:#00474f;--ccui-cyan-10:#002329;--ccui-blue-1:#e6f4ff;--ccui-blue-2:#bae0ff;--ccui-blue-3:#91caff;--ccui-blue-4:#69b1ff;--ccui-blue-5:#4096ff;--ccui-blue-6:#1677ff;--ccui-blue-7:#0958d9;--ccui-blue-8:#003eb3;--ccui-blue-9:#002c8c;--ccui-blue-10:#001d66;--ccui-geekblue-1:#f0f5ff;--ccui-geekblue-2:#d6e4ff;--ccui-geekblue-3:#adc6ff;--ccui-geekblue-4:#85a5ff;--ccui-geekblue-5:#597ef7;--ccui-geekblue-6:#2f54eb;--ccui-geekblue-7:#1d39c4;--ccui-geekblue-8:#10239e;--ccui-geekblue-9:#061178;--ccui-geekblue-10:#030852;--ccui-purple-1:#f9f0ff;--ccui-purple-2:#efdbff;--ccui-purple-3:#d3adf7;--ccui-purple-4:#b37feb;--ccui-purple-5:#9254de;--ccui-purple-6:#722ed1;--ccui-purple-7:#531dab;--ccui-purple-8:#391085;--ccui-purple-9:#22075e;--ccui-purple-10:#120338;--ccui-magenta-1:#fff0f6;--ccui-magenta-2:#ffd6e7;--ccui-magenta-3:#ffadd2;--ccui-magenta-4:#ff85c0;--ccui-magenta-5:#f759ab;--ccui-magenta-6:#eb2f96;--ccui-magenta-7:#c41d7f;--ccui-magenta-8:#9e1068;--ccui-magenta-9:#780650;--ccui-magenta-10:#520339;--ccui-pink-1:#fff0f6;--ccui-pink-6:#eb2f96;--ccui-border-radius-lg:8px;--ccui-border-radius-sm:4px;--ccui-border-radius-xs:2px;--ccui-border-radius-outer:4px;--ccui-font-size-xl:20px;--ccui-font-size-heading-1:38px;--ccui-font-size-heading-2:30px;--ccui-font-size-heading-3:24px;--ccui-font-size-heading-4:20px;--ccui-font-size-heading-5:16px;--ccui-line-height-lg:1.5;--ccui-line-height-sm:1.66;--ccui-line-height-heading-1:1.21052;--ccui-line-height-heading-2:1.26666;--ccui-line-height-heading-3:1.33333;--ccui-line-height-heading-4:1.4;--ccui-line-height-heading-5:1.5;--ccui-font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--ccui-font-family-code:SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;--ccui-control-height:32px;--ccui-control-height-sm:24px;--ccui-control-height-lg:40px;--ccui-control-height-xs:16px;--ccui-box-shadow:0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;--ccui-box-shadow-secondary:0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;--ccui-box-shadow-tertiary:0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005;--ccui-motion-duration-slow:.3s;--ccui-motion-duration-mid:.2s;--ccui-motion-duration-fast:.1s;--ccui-motion-ease-in-out:cubic-bezier(.645, .045, .355, 1);--ccui-motion-ease-out:cubic-bezier(.215, .61, .355, 1);--ccui-motion-ease-in:cubic-bezier(.55, .055, .675, .19);--ccui-motion-ease-out-back:cubic-bezier(.12, .4, .29, 1.46);--ccui-motion-ease-in-back:cubic-bezier(.71, -.46, .88, .6);--ccui-motion-ease-out-circ:cubic-bezier(.08, .82, .17, 1);--ccui-motion-ease-in-out-circ:cubic-bezier(.78, .14, .15, .86);--ccui-padding-xxs:4px;--ccui-padding-xs:8px;--ccui-padding-sm:12px;--ccui-padding:16px;--ccui-padding-md:20px;--ccui-padding-lg:24px;--ccui-padding-xl:32px;--ccui-margin-xxs:4px;--ccui-margin-xs:8px;--ccui-margin-sm:12px;--ccui-margin:16px;--ccui-margin-md:20px;--ccui-margin-lg:24px;--ccui-margin-xl:32px}.ccui-watermark{position:relative}
+/*$vite$:1*/

package/watermark/index.es.js

@@ -0,0 +1,179 @@
+import { createVNode as e, defineComponent as t, onBeforeUnmount as n, onMounted as r, ref as i, watch as a } from "vue";
+//#region ../ccui/ui/shared/hooks/use-namespace.ts
+function o(e, t, n) {
+	let r = e;
+	return t && (r += `__${t}`), n && (r += `--${n}`), r;
+}
+function s(e, t = !1) {
+	let n = t ? `.ccui-${e}` : `ccui-${e}`;
+	return {
+		b: () => o(n),
+		e: (e) => e ? o(n, e) : "",
+		m: (e) => e ? o(n, "", e) : "",
+		em: (e, t) => e && t ? o(n, e, t) : "",
+		is: (e) => `is-${e}`
+	};
+}
+//#endregion
+//#region ../ccui/ui/watermark/src/watermark-types.ts
+var c = {
+	content: {
+		type: [String, Array],
+		default: ""
+	},
+	width: {
+		type: Number,
+		default: 120
+	},
+	height: {
+		type: Number,
+		default: 64
+	},
+	rotate: {
+		type: Number,
+		default: -22
+	},
+	zIndex: {
+		type: Number,
+		default: 9
+	},
+	gap: {
+		type: Array,
+		default: () => [100, 100]
+	},
+	offset: {
+		type: Array,
+		default: void 0
+	},
+	font: {
+		type: Object,
+		default: () => ({})
+	},
+	image: {
+		type: String,
+		default: ""
+	}
+}, l = {
+	color: "rgba(0, 0, 0, 0.15)",
+	fontSize: 16,
+	fontWeight: "normal",
+	fontStyle: "normal",
+	fontFamily: "sans-serif"
+}, u = "data-ccui-watermark";
+function d() {
+	return typeof window > "u" ? 1 : window.devicePixelRatio || 1;
+}
+function f(e, t, n, r, i) {
+	let [a, o] = t, s = n?.[0] ?? a / 2, c = n?.[1] ?? o / 2, l = i.width + a, u = i.height + o;
+	return [
+		"position: absolute",
+		"inset: 0",
+		"pointer-events: none",
+		`z-index: ${e}`,
+		`background-image: url('${r}')`,
+		`background-size: ${l}px ${u}px`,
+		`background-position: ${s}px ${c}px`,
+		"background-repeat: repeat"
+	].join(";");
+}
+function p(e, t, n, r, i) {
+	let a = i.fontSize;
+	e.font = `${i.fontStyle} ${i.fontWeight} ${a}px ${i.fontFamily}`, e.fillStyle = i.color, e.textBaseline = "middle", e.textAlign = "center";
+	let o = a + 4, s = r / 2 - (t.length - 1) * o / 2;
+	t.forEach((t, r) => {
+		e.fillText(t, n / 2, s + r * o);
+	});
+}
+var m = /* @__PURE__ */ t({
+	name: "CWatermark",
+	props: c,
+	setup(t, { slots: o }) {
+		let c = s("watermark"), m = i(), h = i(null), g = null, _ = async () => {
+			let e = d(), n = document.createElement("canvas"), r = null;
+			try {
+				r = n.getContext("2d");
+			} catch {
+				r = null;
+			}
+			if (!r) return null;
+			let i = t.width * e, a = t.height * e;
+			n.width = i, n.height = a, r.translate(i / 2, a / 2), r.rotate(Math.PI / 180 * t.rotate), r.translate(-i / 2, -a / 2), r.scale(e, e);
+			let o = {
+				...l,
+				...t.font
+			};
+			if (t.image) try {
+				let e = new Image();
+				e.crossOrigin = "anonymous", await new Promise((n, r) => {
+					e.onload = () => n(), e.onerror = r, e.src = t.image;
+				}), r.drawImage(e, 0, 0, t.width, t.height);
+			} catch {
+				let e = Array.isArray(t.content) ? t.content : [t.content];
+				p(r, e.filter(Boolean), t.width, t.height, o);
+			}
+			else {
+				let e = Array.isArray(t.content) ? t.content : [t.content];
+				p(r, e.filter(Boolean), t.width, t.height, o);
+			}
+			return {
+				url: n.toDataURL(),
+				size: {
+					width: t.width,
+					height: t.height
+				}
+			};
+		}, v = async () => {
+			if (!m.value) return;
+			let e = await _();
+			h.value || (h.value = document.createElement("div"), h.value.setAttribute(u, "1"), m.value.appendChild(h.value));
+			let n = e ? f(t.zIndex, t.gap, t.offset, e.url, e.size) : `position: absolute; inset: 0; pointer-events: none; z-index: ${t.zIndex};`;
+			h.value.setAttribute("style", n), b();
+		}, y = !1, b = () => {
+			!m.value || g || typeof MutationObserver > "u" || (g = new MutationObserver((e) => {
+				if (y) return;
+				let t = !1;
+				for (let n of e) n.removedNodes.forEach((e) => {
+					e === h.value && (t = !0);
+				});
+				t && (y = !0, h.value?.remove(), h.value = null, v().finally(() => {
+					y = !1;
+				}));
+			}), g.observe(m.value, { childList: !0 }));
+		};
+		return r(() => {
+			v();
+		}), n(() => {
+			g?.disconnect(), g = null, h.value?.remove(), h.value = null;
+		}), a(() => [
+			t.content,
+			t.image,
+			t.width,
+			t.height,
+			t.rotate,
+			t.gap,
+			t.offset,
+			t.zIndex,
+			t.font
+		], () => {
+			v();
+		}, { deep: !0 }), () => e("div", {
+			ref: m,
+			class: c.b()
+		}, [o.default?.()]);
+	}
+});
+//#endregion
+//#region ../ccui/ui/watermark/index.ts
+m.install = function(e) {
+	e.component(m.name, m);
+};
+var h = {
+	title: "Watermark 水印",
+	category: "数据展示",
+	status: "100%",
+	install(e) {
+		e.component(m.name, m);
+	}
+};
+//#endregion
+export { m as Watermark, h as default };

package/watermark/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function n(e,t,n){let r=e;return t&&(r+=`__${t}`),n&&(r+=`--${n}`),r}function r(e,t=!1){let r=t?`.ccui-${e}`:`ccui-${e}`;return{b:()=>n(r),e:e=>e?n(r,e):``,m:e=>e?n(r,``,e):``,em:(e,t)=>e&&t?n(r,e,t):``,is:e=>`is-${e}`}}var i={content:{type:[String,Array],default:``},width:{type:Number,default:120},height:{type:Number,default:64},rotate:{type:Number,default:-22},zIndex:{type:Number,default:9},gap:{type:Array,default:()=>[100,100]},offset:{type:Array,default:void 0},font:{type:Object,default:()=>({})},image:{type:String,default:``}},a={color:`rgba(0, 0, 0, 0.15)`,fontSize:16,fontWeight:`normal`,fontStyle:`normal`,fontFamily:`sans-serif`},o=`data-ccui-watermark`;function s(){return typeof window>`u`?1:window.devicePixelRatio||1}function c(e,t,n,r,i){let[a,o]=t,s=n?.[0]??a/2,c=n?.[1]??o/2,l=i.width+a,u=i.height+o;return[`position: absolute`,`inset: 0`,`pointer-events: none`,`z-index: ${e}`,`background-image: url('${r}')`,`background-size: ${l}px ${u}px`,`background-position: ${s}px ${c}px`,`background-repeat: repeat`].join(`;`)}function l(e,t,n,r,i){let a=i.fontSize;e.font=`${i.fontStyle} ${i.fontWeight} ${a}px ${i.fontFamily}`,e.fillStyle=i.color,e.textBaseline=`middle`,e.textAlign=`center`;let o=a+4,s=r/2-(t.length-1)*o/2;t.forEach((t,r)=>{e.fillText(t,n/2,s+r*o)})}var u=(0,t.defineComponent)({name:`CWatermark`,props:i,setup(e,{slots:n}){let i=r(`watermark`),u=(0,t.ref)(),d=(0,t.ref)(null),f=null,p=async()=>{let t=s(),n=document.createElement(`canvas`),r=null;try{r=n.getContext(`2d`)}catch{r=null}if(!r)return null;let i=e.width*t,o=e.height*t;n.width=i,n.height=o,r.translate(i/2,o/2),r.rotate(Math.PI/180*e.rotate),r.translate(-i/2,-o/2),r.scale(t,t);let c={...a,...e.font};if(e.image)try{let t=new Image;t.crossOrigin=`anonymous`,await new Promise((n,r)=>{t.onload=()=>n(),t.onerror=r,t.src=e.image}),r.drawImage(t,0,0,e.width,e.height)}catch{let t=Array.isArray(e.content)?e.content:[e.content];l(r,t.filter(Boolean),e.width,e.height,c)}else{let t=Array.isArray(e.content)?e.content:[e.content];l(r,t.filter(Boolean),e.width,e.height,c)}return{url:n.toDataURL(),size:{width:e.width,height:e.height}}},m=async()=>{if(!u.value)return;let t=await p();d.value||(d.value=document.createElement(`div`),d.value.setAttribute(o,`1`),u.value.appendChild(d.value));let n=t?c(e.zIndex,e.gap,e.offset,t.url,t.size):`position: absolute; inset: 0; pointer-events: none; z-index: ${e.zIndex};`;d.value.setAttribute(`style`,n),g()},h=!1,g=()=>{!u.value||f||typeof MutationObserver>`u`||(f=new MutationObserver(e=>{if(h)return;let t=!1;for(let n of e)n.removedNodes.forEach(e=>{e===d.value&&(t=!0)});t&&(h=!0,d.value?.remove(),d.value=null,m().finally(()=>{h=!1}))}),f.observe(u.value,{childList:!0}))};return(0,t.onMounted)(()=>{m()}),(0,t.onBeforeUnmount)(()=>{f?.disconnect(),f=null,d.value?.remove(),d.value=null}),(0,t.watch)(()=>[e.content,e.image,e.width,e.height,e.rotate,e.gap,e.offset,e.zIndex,e.font],()=>{m()},{deep:!0}),()=>(0,t.createVNode)(`div`,{ref:u,class:i.b()},[n.default?.()])}});u.install=function(e){e.component(u.name,u)},e.Watermark=u,e.default={title:`Watermark 水印`,category:`数据展示`,status:`100%`,install(e){e.component(u.name,u)}}});