element-plus 2.3.14 → 2.4.1

package/lib/components/watermark/index.d.ts

@@ -0,0 +1,94 @@
+export declare const ElWatermark: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    readonly zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+    readonly rotate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+    readonly width: NumberConstructor;
+    readonly height: NumberConstructor;
+    readonly image: StringConstructor;
+    readonly content: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+    readonly font: {
+        readonly type: import("vue").PropType<import("./src/watermark").WatermarkFontType>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}, {
+    style: import("vue").CSSProperties;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+        readonly rotate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+        readonly width: NumberConstructor;
+        readonly height: NumberConstructor;
+        readonly image: StringConstructor;
+        readonly content: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+        readonly font: {
+            readonly type: import("vue").PropType<import("./src/watermark").WatermarkFontType>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+        readonly offset: {
+            readonly type: import("vue").PropType<[number, number]>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    color: import("vue").ComputedRef<string>;
+    fontSize: import("vue").ComputedRef<string | number>;
+    fontWeight: import("vue").ComputedRef<number | "light" | "normal" | "weight">;
+    fontStyle: import("vue").ComputedRef<"none" | "normal" | "italic" | "oblique">;
+    fontFamily: import("vue").ComputedRef<string>;
+    gapX: import("vue").ComputedRef<number>;
+    gapY: import("vue").ComputedRef<number>;
+    gapXCenter: import("vue").ComputedRef<number>;
+    gapYCenter: import("vue").ComputedRef<number>;
+    offsetLeft: import("vue").ComputedRef<number>;
+    offsetTop: import("vue").ComputedRef<number>;
+    getMarkStyle: () => import("vue").CSSProperties;
+    containerRef: import("vue").ShallowRef<HTMLDivElement | null>;
+    watermarkRef: import("vue").ShallowRef<HTMLDivElement | undefined>;
+    stopObservation: import("vue").Ref<boolean>;
+    destroyWatermark: () => void;
+    appendWatermark: (base64Url: string, markWidth: number) => void;
+    getMarkSize: (ctx: CanvasRenderingContext2D) => readonly [number, number];
+    getClips: (content: HTMLImageElement | import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown>, rotate: number, ratio: number, width: number, height: number, font: Required<import("./src/watermark").WatermarkFontType>, gapX: number, gapY: number) => [dataURL: string, finalWidth: number, finalHeight: number];
+    renderWatermark: () => void;
+    onMutate: (mutations: MutationRecord[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+    readonly rotate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+    readonly width: NumberConstructor;
+    readonly height: NumberConstructor;
+    readonly image: StringConstructor;
+    readonly content: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+    readonly font: {
+        readonly type: import("vue").PropType<import("./src/watermark").WatermarkFontType>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>>, {
+    readonly zIndex: number;
+    readonly content: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown>;
+    readonly rotate: number;
+    readonly gap: [number, number];
+}>> & Record<string, any>;
+export default ElWatermark;
+export * from './src/watermark';

package/lib/components/watermark/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../utils/index.js');
+var watermark$1 = require('./src/watermark2.js');
+var watermark = require('./src/watermark.js');
+var install = require('../../utils/vue/install.js');
+
+const ElWatermark = install.withInstall(watermark$1["default"]);
+
+exports.watermarkProps = watermark.watermarkProps;
+exports.ElWatermark = ElWatermark;
+exports["default"] = ElWatermark;
+//# sourceMappingURL=index.js.map

package/lib/components/watermark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/watermark/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Watermark from './src/watermark.vue'\n\nexport const ElWatermark = withInstall(Watermark)\nexport default ElWatermark\n\nexport * from './src/watermark'\n"],"names":["withInstall","Watermark"],"mappings":";;;;;;;;;AAEY,MAAC,WAAW,GAAGA,mBAAW,CAACC,sBAAS;;;;;;"}

package/lib/components/watermark/src/useClips.d.ts

@@ -0,0 +1,7 @@
+import type { WatermarkProps } from './watermark';
+export declare const FontGap = 3;
+/**
+ * Get the clips of text content.
+ * This is a lazy hook function since SSR no need this
+ */
+export default 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];

package/lib/components/watermark/src/useClips.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 useClips() {
+  function 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 } = font;
+      const mergedFontSize = Number(fontSize) * ratio;
+      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`;
+      ctx.fillStyle = color;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "top";
+      const contents = Array.isArray(content) ? content : [content];
+      contents == null ? void 0 : contents.forEach((item, index) => {
+        ctx.fillText(item != null ? 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);
+    }
+    function getRotatePos(x, y) {
+      const targetX = x * Math.cos(angle) - y * Math.sin(angle);
+      const targetY = x * Math.sin(angle) + y * Math.cos(angle);
+      return [targetX, targetY];
+    }
+    let left = 0;
+    let right = 0;
+    let top = 0;
+    let bottom = 0;
+    const halfWidth = contentWidth / 2;
+    const halfHeight = contentHeight / 2;
+    const points = [
+      [0 - halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 - halfHeight],
+      [0 + halfWidth, 0 + halfHeight],
+      [0 - halfWidth, 0 + halfHeight]
+    ];
+    points.forEach(([x, y]) => {
+      const [targetX, targetY] = getRotatePos(x, y);
+      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);
+    function 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;
+}
+
+exports.FontGap = FontGap;
+exports["default"] = useClips;
+//# sourceMappingURL=useClips.js.map

package/lib/components/watermark/src/useClips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClips.js","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\nfunction prepareCanvas(\n  width: number,\n  height: number,\n  ratio = 1\n): [\n  ctx: CanvasRenderingContext2D,\n  canvas: HTMLCanvasElement,\n  realWidth: number,\n  realHeight: number\n] {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')!\n  const realWidth = width * ratio\n  const realHeight = height * ratio\n  canvas.setAttribute('width', `${realWidth}px`)\n  canvas.setAttribute('height', `${realHeight}px`)\n  ctx.save()\n\n  return [ctx, canvas, realWidth, realHeight]\n}\n\n/**\n * Get the clips of text content.\n * This is a lazy hook function since SSR no need this\n */\nexport default function useClips() {\n  // Get single clips\n  function getClips(\n    content: NonNullable<WatermarkProps['content']> | HTMLImageElement,\n    rotate: number,\n    ratio: number,\n    width: number,\n    height: number,\n    font: Required<NonNullable<WatermarkProps['font']>>,\n    gapX: number,\n    gapY: number\n  ): [dataURL: string, finalWidth: number, finalHeight: number] {\n    // ================= Text / Image =================\n    const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(\n      width,\n      height,\n      ratio\n    )\n\n    if (content instanceof HTMLImageElement) {\n      // Image\n      ctx.drawImage(content, 0, 0, contentWidth, contentHeight)\n    } else {\n      // Text\n      const { color, fontSize, fontStyle, fontWeight, fontFamily } = font\n      const mergedFontSize = Number(fontSize) * ratio\n\n      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`\n      ctx.fillStyle = color\n      ctx.textAlign = 'center'\n      ctx.textBaseline = 'top'\n      const contents = Array.isArray(content) ? content : [content]\n      contents?.forEach((item, index) => {\n        ctx.fillText(\n          item ?? '',\n          contentWidth / 2,\n          index * (mergedFontSize + FontGap * ratio)\n        )\n      })\n    }\n\n    // ==================== Rotate ====================\n    const angle = (Math.PI / 180) * Number(rotate)\n    const maxSize = Math.max(width, height)\n    const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio)\n\n    // Copy from `ctx` and rotate\n    rCtx.translate(realMaxSize / 2, realMaxSize / 2)\n    rCtx.rotate(angle)\n    if (contentWidth > 0 && contentHeight > 0) {\n      rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2)\n    }\n\n    // Get boundary of rotated text\n    function getRotatePos(x: number, y: number) {\n      const targetX = x * Math.cos(angle) - y * Math.sin(angle)\n      const targetY = x * Math.sin(angle) + y * Math.cos(angle)\n      return [targetX, targetY]\n    }\n\n    let left = 0\n    let right = 0\n    let top = 0\n    let bottom = 0\n\n    const halfWidth = contentWidth / 2\n    const halfHeight = contentHeight / 2\n    const points = [\n      [0 - halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 - halfHeight],\n      [0 + halfWidth, 0 + halfHeight],\n      [0 - halfWidth, 0 + halfHeight],\n    ]\n    points.forEach(([x, y]) => {\n      const [targetX, targetY] = getRotatePos(x, y)\n      left = Math.min(left, targetX)\n      right = Math.max(right, targetX)\n      top = Math.min(top, targetY)\n      bottom = Math.max(bottom, targetY)\n    })\n\n    const cutLeft = left + realMaxSize / 2\n    const cutTop = top + realMaxSize / 2\n    const cutWidth = right - left\n    const cutHeight = bottom - top\n\n    // ================ Fill Alternate ================\n    const realGapX = gapX * ratio\n    const realGapY = gapY * ratio\n    const filledWidth = (cutWidth + realGapX) * 2\n    const filledHeight = cutHeight + realGapY\n\n    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)\n\n    function drawImg(targetX = 0, targetY = 0) {\n      fCtx.drawImage(\n        rCanvas,\n        cutLeft,\n        cutTop,\n        cutWidth,\n        cutHeight,\n        targetX,\n        targetY,\n        cutWidth,\n        cutHeight\n      )\n    }\n    drawImg()\n    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)\n    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)\n\n    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]\n  }\n\n  return getClips\n}\n"],"names":[],"mappings":"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"}

package/lib/components/watermark/src/utils.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'vue';
+/** converting camel-cased strings to be lowercase and link it with Separato */
+export declare function toLowercaseSeparator(key: string): string;
+export declare function getStyleStr(style: CSSProperties): string;
+/** Returns the ratio of the device's physical pixel resolution to the css pixel resolution */
+export declare function getPixelRatio(): number;
+/** Whether to re-render the watermark */
+export declare const reRendering: (mutation: MutationRecord, watermarkElement?: HTMLElement | undefined) => boolean;

package/lib/components/watermark/src/utils.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function toLowercaseSeparator(key) {
+  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function getStyleStr(style) {
+  return Object.keys(style).map((key) => `${toLowercaseSeparator(key)}: ${style[key]};`).join(" ");
+}
+function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+const reRendering = (mutation, watermarkElement) => {
+  let flag = false;
+  if (mutation.removedNodes.length && watermarkElement) {
+    flag = Array.from(mutation.removedNodes).includes(watermarkElement);
+  }
+  if (mutation.type === "attributes" && mutation.target === watermarkElement) {
+    flag = true;
+  }
+  return flag;
+};
+
+exports.getPixelRatio = getPixelRatio;
+exports.getStyleStr = getStyleStr;
+exports.reRendering = reRendering;
+exports.toLowercaseSeparator = toLowercaseSeparator;
+//# sourceMappingURL=utils.js.map

package/lib/components/watermark/src/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../packages/components/watermark/src/utils.ts"],"sourcesContent":["import type { CSSProperties } from 'vue'\n\n/** converting camel-cased strings to be lowercase and link it with Separato */\nexport function toLowercaseSeparator(key: string) {\n  return key.replace(/([A-Z])/g, '-$1').toLowerCase()\n}\n\nexport function getStyleStr(style: CSSProperties): string {\n  return Object.keys(style)\n    .map(\n      (key) =>\n        `${toLowercaseSeparator(key)}: ${style[key as keyof CSSProperties]};`\n    )\n    .join(' ')\n}\n\n/** Returns the ratio of the device's physical pixel resolution to the css pixel resolution */\nexport function getPixelRatio() {\n  return window.devicePixelRatio || 1\n}\n\n/** Whether to re-render the watermark */\nexport const reRendering = (\n  mutation: MutationRecord,\n  watermarkElement?: HTMLElement\n) => {\n  let flag = false\n  // Whether to delete the watermark node\n  if (mutation.removedNodes.length && watermarkElement) {\n    flag = Array.from(mutation.removedNodes).includes(watermarkElement)\n  }\n  // Whether the watermark dom property value has been modified\n  if (mutation.type === 'attributes' && mutation.target === watermarkElement) {\n    flag = true\n  }\n  return flag\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,oBAAoB,CAAC,GAAG,EAAE;AAC1C,EAAE,OAAO,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;AACtD,CAAC;AACM,SAAS,WAAW,CAAC,KAAK,EAAE;AACnC,EAAE,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,oBAAoB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACnG,CAAC;AACM,SAAS,aAAa,GAAG;AAChC,EAAE,OAAO,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC;AACtC,CAAC;AACW,MAAC,WAAW,GAAG,CAAC,QAAQ,EAAE,gBAAgB,KAAK;AAC3D,EAAE,IAAI,IAAI,GAAG,KAAK,CAAC;AACnB,EAAE,IAAI,QAAQ,CAAC,YAAY,CAAC,MAAM,IAAI,gBAAgB,EAAE;AACxD,IAAI,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AACxE,GAAG;AACH,EAAE,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,IAAI,QAAQ,CAAC,MAAM,KAAK,gBAAgB,EAAE;AAC9E,IAAI,IAAI,GAAG,IAAI,CAAC;AAChB,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd;;;;;;;"}

package/lib/components/watermark/src/watermark.d.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue';
+import type Watermark from './watermark.vue';
+export interface WatermarkFontType {
+    color?: string;
+    fontSize?: number | string;
+    fontWeight?: 'normal' | 'light' | 'weight' | number;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    fontFamily?: string;
+}
+export declare const watermarkProps: {
+    readonly zIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+    readonly rotate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+    readonly width: NumberConstructor;
+    readonly height: NumberConstructor;
+    readonly image: StringConstructor;
+    readonly content: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+    readonly font: {
+        readonly type: import("vue").PropType<WatermarkFontType>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly gap: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+};
+export declare type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;
+export declare type WatermarkInstance = InstanceType<typeof Watermark>;

package/lib/components/watermark/src/watermark.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+
+const watermarkProps = runtime.buildProps({
+  zIndex: {
+    type: Number,
+    default: 9
+  },
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  width: Number,
+  height: Number,
+  image: String,
+  content: {
+    type: runtime.definePropType([String, Array]),
+    default: "Element Plus"
+  },
+  font: {
+    type: runtime.definePropType(Object)
+  },
+  gap: {
+    type: runtime.definePropType(Array),
+    default: () => [100, 100]
+  },
+  offset: {
+    type: runtime.definePropType(Array)
+  }
+});
+
+exports.watermarkProps = watermarkProps;
+//# sourceMappingURL=watermark.js.map

package/lib/components/watermark/src/watermark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watermark.js","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Watermark from './watermark.vue'\n\nexport interface WatermarkFontType {\n  color?: string\n  fontSize?: number | string\n  fontWeight?: 'normal' | 'light' | 'weight' | number\n  fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'\n  fontFamily?: string\n}\n\nexport const watermarkProps = buildProps({\n  /**\n   * @description The z-index of the appended watermark element\n   */\n  zIndex: {\n    type: Number,\n    default: 9,\n  },\n  /**\n   * @description The rotation angle of the watermark\n   */\n  rotate: {\n    type: Number,\n    default: -22,\n  },\n  /**\n   * @description The width of the watermark\n   */\n  width: Number,\n  /**\n   * @description The height of the watermark\n   */\n  height: Number,\n  /**\n   * @description Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)\n   */\n  image: String,\n  /**\n   * @description Watermark text content\n   */\n  content: {\n    type: definePropType<string | string[]>([String, Array]),\n    default: 'Element Plus',\n  },\n  /**\n   * @description Text style\n   */\n  font: {\n    type: definePropType<WatermarkFontType>(Object),\n  },\n  /**\n   * @description The spacing between watermarks\n   */\n  gap: {\n    type: definePropType<[number, number]>(Array),\n    default: () => [100, 100],\n  },\n  /**\n   * @description The offset of the watermark from the upper left corner of the container. The default is gap/2\n   */\n  offset: {\n    type: definePropType<[number, number]>(Array),\n  },\n} as const)\n\nexport type WatermarkProps = ExtractPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;;AACY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC,EAAE;AAChB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEA,sBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEA,sBAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}

package/lib/components/watermark/src/watermark.vue.d.ts

@@ -0,0 +1,94 @@
+import type { CSSProperties } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    readonly zIndex: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+    readonly rotate: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+    readonly width: NumberConstructor;
+    readonly height: NumberConstructor;
+    readonly image: StringConstructor;
+    readonly content: import("../../../utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+    readonly font: {
+        readonly type: import("vue").PropType<import("./watermark").WatermarkFontType>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly gap: import("../../../utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}, {
+    style: CSSProperties;
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly zIndex: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+        readonly rotate: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+        readonly width: NumberConstructor;
+        readonly height: NumberConstructor;
+        readonly image: StringConstructor;
+        readonly content: import("../../../utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+        readonly font: {
+            readonly type: import("vue").PropType<import("./watermark").WatermarkFontType>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly gap: import("../../../utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+        readonly offset: {
+            readonly type: import("vue").PropType<[number, number]>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
+    color: import("vue").ComputedRef<string>;
+    fontSize: import("vue").ComputedRef<string | number>;
+    fontWeight: import("vue").ComputedRef<number | "light" | "normal" | "weight">;
+    fontStyle: import("vue").ComputedRef<"none" | "normal" | "italic" | "oblique">;
+    fontFamily: import("vue").ComputedRef<string>;
+    gapX: import("vue").ComputedRef<number>;
+    gapY: import("vue").ComputedRef<number>;
+    gapXCenter: import("vue").ComputedRef<number>;
+    gapYCenter: import("vue").ComputedRef<number>;
+    offsetLeft: import("vue").ComputedRef<number>;
+    offsetTop: import("vue").ComputedRef<number>;
+    getMarkStyle: () => CSSProperties;
+    containerRef: import("vue").ShallowRef<HTMLDivElement | null>;
+    watermarkRef: import("vue").ShallowRef<HTMLDivElement | undefined>;
+    stopObservation: import("vue").Ref<boolean>;
+    destroyWatermark: () => void;
+    appendWatermark: (base64Url: string, markWidth: number) => void;
+    getMarkSize: (ctx: CanvasRenderingContext2D) => readonly [number, number];
+    getClips: (content: HTMLImageElement | import("../../../utils").EpPropMergeType<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown>, rotate: number, ratio: number, width: number, height: number, font: Required<import("./watermark").WatermarkFontType>, gapX: number, gapY: number) => [dataURL: string, finalWidth: number, finalHeight: number];
+    renderWatermark: () => void;
+    onMutate: (mutations: MutationRecord[]) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly zIndex: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 9, boolean>;
+    readonly rotate: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, -22, boolean>;
+    readonly width: NumberConstructor;
+    readonly height: NumberConstructor;
+    readonly image: StringConstructor;
+    readonly content: import("../../../utils").EpPropFinalized<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown, "Element Plus", boolean>;
+    readonly font: {
+        readonly type: import("vue").PropType<import("./watermark").WatermarkFontType>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly gap: import("../../../utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, () => number[], boolean>;
+    readonly offset: {
+        readonly type: import("vue").PropType<[number, number]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>>, {
+    readonly zIndex: number;
+    readonly content: import("../../../utils").EpPropMergeType<(new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]) | ((new (...args: any[]) => (string | string[]) & {}) | (() => string | string[]))[], unknown, unknown>;
+    readonly rotate: number;
+    readonly gap: [number, number];
+}>;
+export default _default;