@astrolimit/vue3-web-hooks 2025.10.1

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+//#region src/hooks/useWatermark.d.ts
+interface IAppStore {
+  readonly getIsDark?: boolean;
+}
+declare function useWatermark(opts?: {
+  element?: HTMLElement;
+  appStore: IAppStore;
+}): {
+  setWatermark: (str: string) => void;
+  clear: () => void;
+};
+//#endregion
+export { useWatermark };

package/dist/index.js

@@ -0,0 +1,64 @@
+import { watch } from "vue";
+
+//#region src/hooks/useWatermark.ts
+const domSymbol = Symbol("watermark-dom");
+function useWatermark(opts) {
+	const { element: appendEl = document.body, appStore = {} } = opts || {};
+	let func = () => {};
+	const id = domSymbol.toString();
+	let watermarkStr = "";
+	const clear = () => {
+		const domId = document.getElementById(id);
+		if (domId) {
+			const el = appendEl;
+			el && el.removeChild(domId);
+		}
+		window.removeEventListener("resize", func);
+	};
+	const createWatermark = (str) => {
+		clear();
+		const can = document.createElement("canvas");
+		can.width = 300;
+		can.height = 240;
+		const cans = can.getContext("2d");
+		if (cans) {
+			cans.rotate(-20 * Math.PI / 120);
+			cans.font = "15px Vedana";
+			cans.fillStyle = appStore.getIsDark ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
+			cans.textAlign = "left";
+			cans.textBaseline = "middle";
+			cans.fillText(str, can.width / 20, can.height);
+		}
+		const div = document.createElement("div");
+		div.id = id;
+		div.style.pointerEvents = "none";
+		div.style.top = "0px";
+		div.style.left = "0px";
+		div.style.position = "absolute";
+		div.style.zIndex = "100000000";
+		div.style.width = document.documentElement.clientWidth + "px";
+		div.style.height = document.documentElement.clientHeight + "px";
+		div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
+		const el = appendEl;
+		el && el.appendChild(div);
+		return id;
+	};
+	function setWatermark(str) {
+		watermarkStr = str;
+		createWatermark(str);
+		func = () => {
+			createWatermark(str);
+		};
+		window.addEventListener("resize", func);
+	}
+	watch(() => appStore.getIsDark, () => {
+		if (watermarkStr) createWatermark(watermarkStr);
+	});
+	return {
+		setWatermark,
+		clear
+	};
+}
+
+//#endregion
+export { useWatermark };

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@astrolimit/vue3-web-hooks",
+    "version": "2025.10.001",
+    "description": "A starter for creating a Vue component library.",
+    "type": "module",
+    "license": "SFR",
+    "author": "Jack Lee",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./*": "./*"
+    },
+    "publishConfig": {
+      "access": "public",
+      "registry": "https://registry.npmjs.org"
+    },
+    "peerDependencies": {
+      "axios": "^1.10.0",
+      "dayjs": "^1.11.0",
+      "lodash": "^4.17.21",
+      "vue": "^3.5.0"
+    }
+  }
+