antdv-next 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/watermark/index.mjs

@@ -0,0 +1,282 @@
+import useToken from "../theme/useToken.mjs";
+import "../theme/internal.mjs";
+import { WatermarkContextProvider } from "./context.mjs";
+import toList_default from "../_util/toList.mjs";
+import useClips_default, { FontGap } from "./useClips.mjs";
+import useRafDebounce from "./useRafDebounce.mjs";
+import useSingletonCache from "./useSingletonCache.mjs";
+import { getPixelRatio, reRendering } from "./utils.mjs";
+import useWatermark from "./useWatermark.mjs";
+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);
+}
+/**
+* Only return `next` when size changed.
+* This is only used for elements compare, not a shallow equal!
+*/
+function getSizeDiff(prev, next) {
+	return prev.size === next.size ? prev : next;
+}
+const DEFAULT_GAP_X = 100;
+const DEFAULT_GAP_Y = 100;
+const fixedStyle = {
+	position: "relative",
+	overflow: "hidden"
+};
+const defaults = {
+	zIndex: 9,
+	rotate: -22,
+	inherit: true,
+	gap: [DEFAULT_GAP_X, DEFAULT_GAP_Y],
+	font: {}
+};
+const Watermark = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const [, token] = useToken();
+	const color = computed(() => props.font?.color ?? token.value.colorFill);
+	const fontSize = computed(() => props?.font?.fontSize ?? token.value?.fontSizeLG);
+	const fontWeight = computed(() => props?.font?.fontWeight ?? "normal");
+	const fontStyle = computed(() => props?.font?.fontStyle ?? "normal");
+	const fontFamily = computed(() => props?.font?.fontFamily ?? "sans-serif");
+	const textAlign = computed(() => props?.font?.textAlign ?? "center");
+	const gap = computed(() => props.gap);
+	const gapXCenter = computed(() => gap.value[0] / 2);
+	const gapYCenter = computed(() => gap.value[1] / 2);
+	const offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value);
+	const offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value);
+	const mergedStyle = computed(() => {
+		return {
+			...fixedStyle,
+			...attrs.style
+		};
+	});
+	const markStyle = computed(() => {
+		const mergedMarkStyle = {
+			zIndex: props.zIndex,
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: "100%",
+			height: "100%",
+			pointerEvents: "none",
+			backgroundRepeat: "repeat"
+		};
+		/** Calculate the style of the offset */
+		let positionLeft = offsetLeft.value - gapXCenter.value;
+		let positionTop = offsetTop.value - gapYCenter.value;
+		if (positionLeft > 0) {
+			mergedMarkStyle.left = `${positionLeft}px`;
+			mergedMarkStyle.width = `calc(100% - ${positionLeft}px)`;
+			positionLeft = 0;
+		}
+		if (positionTop > 0) {
+			mergedMarkStyle.top = `${positionTop}px`;
+			mergedMarkStyle.height = `calc(100% - ${positionTop}px)`;
+			positionTop = 0;
+		}
+		mergedMarkStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
+		return mergedMarkStyle;
+	});
+	const container = shallowRef(null);
+	const subElements = ref(/* @__PURE__ */ new Set());
+	const targetElements = computed(() => {
+		return [...container.value ? [container.value] : [], ...Array.from(subElements.value)];
+	});
+	/**
+	* Get the width and height of the watermark. The default values are as follows
+	* Image: [120, 64]; Content: It's calculated by content;
+	*/
+	const getMarkSize = (ctx) => {
+		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;
+		}
+		const width = props.width;
+		const height = props.height;
+		return [width ?? defaultWidth, height ?? defaultHeight];
+	};
+	const getClips = useClips_default();
+	const getClipsCache = useSingletonCache();
+	const watermarkInfo = ref(null);
+	const renderWatermark = () => {
+		if (!canUseDom()) return;
+		const ctx = document.createElement("canvas").getContext("2d");
+		if (ctx) {
+			const ratio = getPixelRatio();
+			const [markWidth, markHeight] = getMarkSize(ctx);
+			const drawCanvas = (drawContent) => {
+				const params = [
+					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]
+				];
+				const [nextClips, clipWidth] = getClipsCache(params, () => getClips(...params));
+				watermarkInfo.value = [nextClips, clipWidth];
+			};
+			if (props.image) {
+				const img = new Image();
+				img.onload = () => {
+					drawCanvas(img);
+				};
+				img.onerror = () => {
+					drawCanvas(props.content);
+				};
+				img.crossOrigin = "anonymous";
+				img.referrerPolicy = "no-referrer";
+				img.src = props.image;
+			} else drawCanvas(props.content);
+		}
+	};
+	const syncWatermark = useRafDebounce(renderWatermark);
+	const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle);
+	watch([watermarkInfo, targetElements], ([watermarkInfo$1, targetElements$1]) => {
+		if (watermarkInfo$1) targetElements$1.forEach((holder) => {
+			appendWatermark(watermarkInfo$1[0], watermarkInfo$1[1], holder);
+		});
+	});
+	const onMutate = (mutations) => {
+		mutations.forEach((mutation) => {
+			if (reRendering(mutation, isWatermarkEle)) syncWatermark();
+			else if (mutation.target === container.value && mutation.attributeName === "style") {
+				const keyStyles = Object.keys(fixedStyle);
+				for (let i = 0; i < keyStyles.length; i += 1) {
+					const key = keyStyles[i];
+					const oriValue = mergedStyle.value[key];
+					const currentValue = container.value.style[key];
+					if (oriValue && oriValue !== currentValue) container.value.style[key] = oriValue;
+				}
+			}
+		});
+	};
+	useMutateObserver(targetElements, onMutate);
+	watch([
+		() => props.offset,
+		() => props.zIndex,
+		() => props.width,
+		() => props.height,
+		() => props.rotate,
+		() => props.image,
+		() => props.content,
+		fontSize,
+		fontWeight,
+		fontStyle,
+		fontFamily,
+		textAlign,
+		gap,
+		offsetLeft,
+		offsetTop
+	], syncWatermark, { immediate: true });
+	const watermarkContext = {
+		add: (ele) => {
+			const clone = new Set(subElements.value);
+			clone.add(ele);
+			subElements.value = getSizeDiff(subElements.value, clone);
+		},
+		remove: (ele) => {
+			removeWatermark(ele);
+			const clone = new Set(subElements.value);
+			clone.delete(ele);
+			subElements.value = getSizeDiff(subElements.value, clone);
+		}
+	};
+	return () => {
+		const children = slots?.default?.();
+		const childNode = props.inherit ? createVNode(WatermarkContextProvider, watermarkContext, _isSlot(children) ? children : { default: () => [children] }) : children;
+		return createVNode("div", mergeProps({
+			"ref": container,
+			"class": [props.rootClass, attrs.class]
+		}, omit(attrs, ["style", "class"]), { "style": mergedStyle.value }), [childNode]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		zIndex: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		rotate: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		height: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		image: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		content: {
+			type: [String, Array],
+			required: false,
+			default: void 0
+		},
+		font: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		rootClass: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		gap: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		offset: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		inherit: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "AWatermark",
+	inheritAttrs: false
+});
+Watermark.install = (app) => {
+	app.component(Watermark.name, Watermark);
+};
+var watermark_default = Watermark;
+
+//#endregion
+export { watermark_default as default };

package/dist/watermark/useClips.mjs

@@ -0,0 +1,92 @@
+import toList_default from "../_util/toList.mjs";
+
+//#region src/watermark/useClips.ts
+const FontGap = 3;
+function prepareCanvas(width, height, ratio = 1) {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	const realWidth = width * ratio;
+	const realHeight = height * ratio;
+	canvas.setAttribute("width", `${realWidth}px`);
+	canvas.setAttribute("height", `${realHeight}px`);
+	ctx.save();
+	return [
+		ctx,
+		canvas,
+		realWidth,
+		realHeight
+	];
+}
+function getRotatePos(x, y, angle) {
+	return [x * Math.cos(angle) - y * Math.sin(angle), x * Math.sin(angle) + y * Math.cos(angle)];
+}
+/**
+* Get the clips of text content.
+* This is a lazy hook function since SSR no need this
+*/
+function useClips() {
+	const getClips = (content, rotate, ratio, width, height, font, 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));
+			});
+		}
+		const angle = Math.PI / 180 * Number(rotate);
+		const maxSize = Math.max(width, height);
+		const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio);
+		rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+		rCtx.rotate(angle);
+		if (contentWidth > 0 && contentHeight > 0) rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+		let left = 0;
+		let right = 0;
+		let top = 0;
+		let bottom = 0;
+		const halfWidth = contentWidth / 2;
+		const halfHeight = contentHeight / 2;
+		[
+			[0 - halfWidth, 0 - halfHeight],
+			[0 + halfWidth, 0 - halfHeight],
+			[0 + halfWidth, 0 + halfHeight],
+			[0 - halfWidth, 0 + halfHeight]
+		].forEach(([x, y]) => {
+			const [targetX, targetY] = getRotatePos(x, y, angle);
+			left = Math.min(left, targetX);
+			right = Math.max(right, targetX);
+			top = Math.min(top, targetY);
+			bottom = Math.max(bottom, targetY);
+		});
+		const cutLeft = left + realMaxSize / 2;
+		const cutTop = top + realMaxSize / 2;
+		const cutWidth = right - left;
+		const cutHeight = bottom - top;
+		const realGapX = gapX * ratio;
+		const realGapY = gapY * ratio;
+		const filledWidth = (cutWidth + realGapX) * 2;
+		const filledHeight = cutHeight + realGapY;
+		const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight);
+		const drawImg = (targetX = 0, targetY = 0) => {
+			fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY, cutWidth, cutHeight);
+		};
+		drawImg();
+		drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+		drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+		return [
+			fCanvas.toDataURL(),
+			filledWidth / ratio,
+			filledHeight / ratio
+		];
+	};
+	return getClips;
+}
+var useClips_default = useClips;
+
+//#endregion
+export { FontGap, useClips_default as default };

package/dist/watermark/useRafDebounce.mjs

@@ -0,0 +1,23 @@
+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
+*/
+function useRafDebounce(callback) {
+	const executeRef = shallowRef(false);
+	const rafRef = shallowRef(null);
+	const wrapperCallback = callback;
+	return () => {
+		if (executeRef.value) return;
+		executeRef.value = true;
+		wrapperCallback();
+		rafRef.value = raf(() => {
+			executeRef.value = false;
+		});
+	};
+}
+
+//#endregion
+export { useRafDebounce as default };

package/dist/watermark/useWatermark.mjs

@@ -0,0 +1,41 @@
+import { getStyleStr } from "./utils.mjs";
+import { reactive } from "vue";
+
+//#region src/watermark/useWatermark.ts
+const emphasizedStyle = { visibility: "visible !important" };
+function useWatermark(markStyle) {
+	const watermarkMap = reactive(/* @__PURE__ */ new Map());
+	const appendWatermark = (base64Url, markWidth, container) => {
+		if (container) {
+			if (!watermarkMap.get(container)) {
+				const newWatermarkEle = document.createElement("div");
+				watermarkMap.set(container, newWatermarkEle);
+			}
+			const watermarkEle = watermarkMap.get(container);
+			watermarkEle.setAttribute("style", getStyleStr({
+				...markStyle.value,
+				backgroundImage: `url('${base64Url}')`,
+				backgroundSize: `${Math.floor(markWidth)}px`,
+				...emphasizedStyle
+			}));
+			watermarkEle.removeAttribute("class");
+			watermarkEle.removeAttribute("hidden");
+			if (watermarkEle.parentElement !== container) container.append(watermarkEle);
+		}
+		return watermarkMap.get(container);
+	};
+	const removeWatermark = (container) => {
+		const watermarkEle = watermarkMap.get(container);
+		if (watermarkEle && container) container.removeChild(watermarkEle);
+		watermarkMap.delete(container);
+	};
+	const isWatermarkEle = (ele) => Array.from(watermarkMap.values()).includes(ele);
+	return [
+		appendWatermark,
+		removeWatermark,
+		isWatermarkEle
+	];
+}
+
+//#endregion
+export { useWatermark as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "antdv-next",
   "type": "module",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "Ant Design Vue3 Component Library",
   "author": {
     "email": "aibayanyu@gamil.com",
@@ -10,54 +10,54 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./dist/*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*.js",
-      "default": "./dist/*.js"
+      "types": "./dist/*.d.mts",
+      "import": "./dist/*.mjs",
+      "default": "./dist/*.mjs"
     },
     "./dist/locale/*": {
-      "types": "./dist/locale/*.d.ts",
-      "import": "./dist/locale/*.js",
-      "default": "./dist/locale/*.js"
+      "types": "./dist/locale/*.d.mts",
+      "import": "./dist/locale/*.mjs",
+      "default": "./dist/locale/*.mjs"
     },
     "./locale/*": {
-      "types": "./dist/locale/*.d.ts",
-      "import": "./dist/locale/*.js",
-      "default": "./dist/locale/*.js"
+      "types": "./dist/locale/*.d.mts",
+      "import": "./dist/locale/*.mjs",
+      "default": "./dist/locale/*.mjs"
     },
     "./date-picker/*": {
-      "types": "./dist/date-picker/*.d.ts",
-      "import": "./dist/date-picker/*.js",
-      "default": "./dist/date-picker/*.js"
+      "types": "./dist/date-picker/*.d.mts",
+      "import": "./dist/date-picker/*.mjs",
+      "default": "./dist/date-picker/*.mjs"
     },
     "./date-picker/locale/*": {
-      "types": "./dist/date-picker/locale/*.d.ts",
-      "import": "./dist/date-picker/locale/*.js",
-      "default": "./dist/date-picker/locale/*.js"
+      "types": "./dist/date-picker/locale/*.d.mts",
+      "import": "./dist/date-picker/locale/*.mjs",
+      "default": "./dist/date-picker/locale/*.mjs"
     },
     "./time-picker/*": {
-      "types": "./dist/time-picker/*.d.ts",
-      "import": "./dist/time-picker/*.js",
-      "default": "./dist/time-picker/*.js"
+      "types": "./dist/time-picker/*.d.mts",
+      "import": "./dist/time-picker/*.mjs",
+      "default": "./dist/time-picker/*.mjs"
     },
     "./time-picker/locale/*": {
-      "types": "./dist/date-picker/locale/*.d.ts",
-      "import": "./dist/date-picker/locale/*.js",
-      "default": "./dist/date-picker/locale/*.js"
+      "types": "./dist/date-picker/locale/*.d.mts",
+      "import": "./dist/date-picker/locale/*.mjs",
+      "default": "./dist/date-picker/locale/*.mjs"
     },
     "./date-picker/generate": {
-      "types": "./dist/date-picker/generate/index.d.ts",
-      "import": "./dist/date-picker/generate/index.js",
-      "default": "./dist/date-picker/generate/index.js"
+      "types": "./dist/date-picker/generate/index.d.mts",
+      "import": "./dist/date-picker/generate/index.mjs",
+      "default": "./dist/date-picker/generate/index.mjs"
     },
     "./date-picker/generate/*": {
-      "types": "./dist/date-picker/generate/*.d.ts",
-      "import": "./dist/date-picker/generate/*.js",
-      "default": "./dist/date-picker/generate/*.js"
+      "types": "./dist/date-picker/generate/*.d.mts",
+      "import": "./dist/date-picker/generate/*.mjs",
+      "default": "./dist/date-picker/generate/*.mjs"
     },
     "./global.d.ts": "./global.d.ts",
     "./global": "./global.d.ts",
@@ -93,12 +93,12 @@
     "@v-c/dialog": "^0.0.4",
     "@v-c/drawer": "^0.0.4",
     "@v-c/dropdown": "^1.0.1",
-    "@v-c/image": "^0.0.3",
+    "@v-c/image": "^1.0.0",
     "@v-c/input": "^1.0.1",
     "@v-c/input-number": "^1.0.0",
     "@v-c/mentions": "^0.0.1",
     "@v-c/menu": "^1.0.6",
-    "@v-c/mutate-observer": "^0.0.2",
+    "@v-c/mutate-observer": "^1.0.0",
     "@v-c/notification": "^0.0.3",
     "@v-c/pagination": "^0.0.1",
     "@v-c/picker": "^0.0.7",
@@ -112,25 +112,25 @@
     "@v-c/slider": "^1.0.9",
     "@v-c/steps": "^0.0.1",
     "@v-c/switch": "^0.0.1",
-    "@v-c/table": "^0.0.3",
+    "@v-c/table": "^0.0.4",
     "@v-c/tabs": "^0.0.3",
     "@v-c/textarea": "^1.0.1",
     "@v-c/tooltip": "^1.0.1",
-    "@v-c/tour": "^1.0.1",
+    "@v-c/tour": "^1.0.2",
     "@v-c/tree": "^0.0.2",
     "@v-c/tree-select": "^0.0.1",
     "@v-c/trigger": "^1.0.5",
     "@v-c/upload": "^0.0.1",
     "@v-c/util": "^1.0.8",
     "@v-c/virtual-list": "^1.0.5",
-    "@vueuse/core": "13.9.0",
+    "@vueuse/core": "14.1.0",
     "dayjs": "^1.11.19",
     "defu": "^6.1.4",
     "es-toolkit": "1.43.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "throttle-debounce": "^5.0.2",
-    "@antdv-next/cssinjs": "^1.0.0-beta.1",
-    "@antdv-next/icons": "^1.0.0-beta.1"
+    "@antdv-next/cssinjs": "^1.0.0-beta.2",
+    "@antdv-next/icons": "^1.0.0-beta.2"
   },
   "web-types": "web-types.json",
   "browserslist": [
@@ -143,10 +143,14 @@
   },
   "scripts": {
     "test": "vitest run",
-    "build": "run-s build:esm build:umd build:web-types",
+    "build": "run-s build:esm build:umd build:p",
+    "build:p": "run-p build:web-types build:style",
     "build:esm": "tsdown",
     "build:umd": "vite build",
     "build:web-types": "esno ./scripts/web-types/index.ts",
+    "build:llm": "esno ./scripts/llm/generate-llms.ts",
+    "build:llm-semantic": "esno ./scripts/llm/generate-llms-semantic.ts",
+    "build:style": "cross-env NODE_ENV=production  esno ./scripts/style/build-style.ts",
     "prepublish": "pnpm build",
     "bump": "bumpp --commit \"chore(release): antdv-next %s\" --push --tag \"antdv-next@%s\""
   }