@element-plus/nightly 0.0.20251227 → 0.0.20251228

package/es/components/tour/src/tour2.mjs

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, toRef, watch, useSlots, provide, openBl
 import { useVModel } from '@vueuse/core';
 import { ElTeleport } from '../../teleport/index.mjs';
 import ElTourMask from './mask2.mjs';
-import ElTourContent from './content.mjs';
+import ElTourContent from './content2.mjs';
 import ElTourSteps from './steps.mjs';
 import { tourProps, tourEmits } from './tour.mjs';
 import { useTarget, tourKey } from './helper.mjs';

package/es/components/tree-select/src/tree-select.mjs

@@ -6,7 +6,7 @@ import { useSelect } from './select.mjs';
 import { useTree } from './tree.mjs';
 import CacheOptions from './cache-options.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { selectProps } from '../../select/src/select.mjs';
+import { selectProps } from '../../select/src/select2.mjs';
 import { treeProps } from '../../tree/src/tree.mjs';
 
 const _sfc_main = defineComponent({

package/es/components/virtual-list/src/hooks/use-wheel.mjs

@@ -1,11 +1,7 @@
-import { HORIZONTAL, VERTICAL } from '../defaults.mjs';
+import { HORIZONTAL } from '../defaults.mjs';
 import { cAF, rAF } from '../../../../utils/raf.mjs';
 import { isFirefox } from '../../../../utils/browser.mjs';
 
-const LayoutKeys = {
-  [HORIZONTAL]: "deltaX",
-  [VERTICAL]: "deltaY"
-};
 const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
   let frameHandle;
   let offset = 0;
@@ -15,7 +11,12 @@ const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
   };
   const onWheel = (e) => {
     cAF(frameHandle);
-    const newOffset = e[LayoutKeys[layout.value]];
+    let { deltaX, deltaY } = e;
+    if (e.shiftKey && deltaY !== 0) {
+      deltaX = deltaY;
+      deltaY = 0;
+    }
+    const newOffset = layout.value === HORIZONTAL ? deltaX : deltaY;
     if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset))
       return;
     offset += newOffset;

package/es/components/virtual-list/src/hooks/use-wheel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-wheel.mjs","sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-wheel.ts"],"sourcesContent":["import { cAF, isFirefox, rAF } from '@element-plus/utils'\nimport { HORIZONTAL, VERTICAL } from '../defaults'\n\nimport type { ComputedRef } from 'vue'\nimport type { LayoutDirection } from '../types'\n\nconst LayoutKeys = {\n  [HORIZONTAL]: 'deltaX',\n  [VERTICAL]: 'deltaY',\n} as const\n\ninterface ListWheelState {\n  atStartEdge: ComputedRef<boolean> // exclusive to reachEnd\n  atEndEdge: ComputedRef<boolean>\n  layout: ComputedRef<LayoutDirection>\n}\n\ntype ListWheelHandler = (offset: number) => void\n\nconst useWheel = (\n  { atEndEdge, atStartEdge, layout }: ListWheelState,\n  onWheelDelta: ListWheelHandler\n) => {\n  let frameHandle: number\n  let offset = 0\n\n  const hasReachedEdge = (offset: number) => {\n    const edgeReached =\n      (offset < 0 && atStartEdge.value) || (offset > 0 && atEndEdge.value)\n\n    return edgeReached\n  }\n\n  const onWheel = (e: WheelEvent) => {\n    cAF(frameHandle)\n\n    const newOffset = e[LayoutKeys[layout.value]]\n\n    if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return\n\n    offset += newOffset\n\n    if (!isFirefox()) {\n      e.preventDefault()\n    }\n\n    frameHandle = rAF(() => {\n      onWheelDelta(offset)\n      offset = 0\n    })\n  }\n\n  return {\n    hasReachedEdge,\n    onWheel,\n  }\n}\n\nexport default useWheel\n"],"names":["offset"],"mappings":";;;;AAMA,MAAM,UAAa,GAAA;AAAA,EACjB,CAAC,UAAa,GAAA,QAAA;AAAA,EACd,CAAC,QAAW,GAAA,QAAA;AACd,CAAA,CAAA;AAUA,MAAM,WAAW,CACf,EAAE,WAAW,WAAa,EAAA,MAAA,IAC1B,YACG,KAAA;AACH,EAAI,IAAA,WAAA,CAAA;AACJ,EAAA,IAAI,MAAS,GAAA,CAAA,CAAA;AAEb,EAAM,MAAA,cAAA,GAAiB,CAACA,OAAmB,KAAA;AACzC,IAAA,MAAM,cACHA,OAAS,GAAA,CAAA,IAAK,YAAY,KAAWA,IAAAA,OAAAA,GAAS,KAAK,SAAU,CAAA,KAAA,CAAA;AAEhE,IAAO,OAAA,WAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,CAAkB,KAAA;AACjC,IAAA,GAAA,CAAI,WAAW,CAAA,CAAA;AAEf,IAAM,MAAA,SAAA,GAAY,CAAE,CAAA,UAAA,CAAW,MAAO,CAAA,KAAA,CAAA,CAAA,CAAA;AAEtC,IAAA,IAAI,cAAe,CAAA,MAAM,CAAK,IAAA,cAAA,CAAe,SAAS,SAAS,CAAA;AAAG,MAAA,OAAA;AAElE,IAAU,MAAA,IAAA,SAAA,CAAA;AAEV,IAAI,IAAA,CAAC,WAAa,EAAA;AAChB,MAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,KACnB;AAEA,IAAA,WAAA,GAAc,IAAI,MAAM;AACtB,MAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AACnB,MAAS,MAAA,GAAA,CAAA,CAAA;AAAA,KACV,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,cAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"use-wheel.mjs","sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-wheel.ts"],"sourcesContent":["import { cAF, isFirefox, rAF } from '@element-plus/utils'\nimport { HORIZONTAL } from '../defaults'\n\nimport type { ComputedRef } from 'vue'\nimport type { LayoutDirection } from '../types'\n\ninterface ListWheelState {\n  atStartEdge: ComputedRef<boolean> // exclusive to reachEnd\n  atEndEdge: ComputedRef<boolean>\n  layout: ComputedRef<LayoutDirection>\n}\n\ntype ListWheelHandler = (offset: number) => void\n\nconst useWheel = (\n  { atEndEdge, atStartEdge, layout }: ListWheelState,\n  onWheelDelta: ListWheelHandler\n) => {\n  let frameHandle: number\n  let offset = 0\n\n  const hasReachedEdge = (offset: number) => {\n    const edgeReached =\n      (offset < 0 && atStartEdge.value) || (offset > 0 && atEndEdge.value)\n\n    return edgeReached\n  }\n\n  const onWheel = (e: WheelEvent) => {\n    cAF(frameHandle)\n\n    let { deltaX, deltaY } = e\n    // Special case for windows machine with shift key + wheel scrolling\n    if (e.shiftKey && deltaY !== 0) {\n      deltaX = deltaY\n      deltaY = 0\n    }\n\n    const newOffset = layout.value === HORIZONTAL ? deltaX : deltaY\n\n    if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return\n\n    offset += newOffset\n\n    if (!isFirefox()) {\n      e.preventDefault()\n    }\n\n    frameHandle = rAF(() => {\n      onWheelDelta(offset)\n      offset = 0\n    })\n  }\n\n  return {\n    hasReachedEdge,\n    onWheel,\n  }\n}\n\nexport default useWheel\n"],"names":["offset"],"mappings":";;;;AAcA,MAAM,WAAW,CACf,EAAE,WAAW,WAAa,EAAA,MAAA,IAC1B,YACG,KAAA;AACH,EAAI,IAAA,WAAA,CAAA;AACJ,EAAA,IAAI,MAAS,GAAA,CAAA,CAAA;AAEb,EAAM,MAAA,cAAA,GAAiB,CAACA,OAAmB,KAAA;AACzC,IAAA,MAAM,cACHA,OAAS,GAAA,CAAA,IAAK,YAAY,KAAWA,IAAAA,OAAAA,GAAS,KAAK,SAAU,CAAA,KAAA,CAAA;AAEhE,IAAO,OAAA,WAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,CAAkB,KAAA;AACjC,IAAA,GAAA,CAAI,WAAW,CAAA,CAAA;AAEf,IAAI,IAAA,EAAE,MAAQ,EAAA,MAAA,EAAW,GAAA,CAAA,CAAA;AAEzB,IAAI,IAAA,CAAA,CAAE,QAAY,IAAA,MAAA,KAAW,CAAG,EAAA;AAC9B,MAAS,MAAA,GAAA,MAAA,CAAA;AACT,MAAS,MAAA,GAAA,CAAA,CAAA;AAAA,KACX;AAEA,IAAA,MAAM,SAAY,GAAA,MAAA,CAAO,KAAU,KAAA,UAAA,GAAa,MAAS,GAAA,MAAA,CAAA;AAEzD,IAAA,IAAI,cAAe,CAAA,MAAM,CAAK,IAAA,cAAA,CAAe,SAAS,SAAS,CAAA;AAAG,MAAA,OAAA;AAElE,IAAU,MAAA,IAAA,SAAA,CAAA;AAEV,IAAI,IAAA,CAAC,WAAa,EAAA;AAChB,MAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AAAA,KACnB;AAEA,IAAA,WAAA,GAAc,IAAI,MAAM;AACtB,MAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AACnB,MAAS,MAAA,GAAA,CAAA,CAAA;AAAA,KACV,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,cAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/es/components/watermark/index.mjs

@@ -1,5 +1,5 @@
-import Watermark from './src/watermark.mjs';
-export { watermarkProps } from './src/watermark2.mjs';
+import Watermark from './src/watermark2.mjs';
+export { watermarkProps } from './src/watermark.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElWatermark = withInstall(Watermark);

package/es/components/watermark/src/watermark.mjs

@@ -1,253 +1,32 @@
-import { defineComponent, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, renderSlot } from 'vue';
-import { useMutationObserver } from '@vueuse/core';
-import { watermarkProps } from './watermark2.mjs';
-import { reRendering, getStyleStr, getPixelRatio } from './utils.mjs';
-import useClips from './useClips.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { isArray } from '@vue/shared';
-import { isUndefined } from '../../../utils/types.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 
-const _sfc_main = defineComponent({
-  ...{
-    name: "ElWatermark"
+const watermarkProps = buildProps({
+  zIndex: {
+    type: Number,
+    default: 9
   },
-  __name: "watermark",
-  props: watermarkProps,
-  setup(__props) {
-    const style = {
-      position: "relative"
-    };
-    const props = __props;
-    const fontGap = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontGap) != null ? _b : 3;
-    });
-    const color = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
-    });
-    const fontSize = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
-    });
-    const fontWeight = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
-    });
-    const fontStyle = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
-    });
-    const fontFamily = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
-    });
-    const textAlign = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
-    });
-    const textBaseline = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
-    });
-    const gapX = computed(() => props.gap[0]);
-    const gapY = computed(() => props.gap[1]);
-    const gapXCenter = computed(() => gapX.value / 2);
-    const gapYCenter = computed(() => gapY.value / 2);
-    const offsetLeft = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
-    });
-    const offsetTop = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
-    });
-    const getMarkStyle = () => {
-      const markStyle = {
-        zIndex: props.zIndex,
-        position: "absolute",
-        left: 0,
-        top: 0,
-        width: "100%",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundRepeat: "repeat"
-      };
-      let positionLeft = offsetLeft.value - gapXCenter.value;
-      let positionTop = offsetTop.value - gapYCenter.value;
-      if (positionLeft > 0) {
-        markStyle.left = `${positionLeft}px`;
-        markStyle.width = `calc(100% - ${positionLeft}px)`;
-        positionLeft = 0;
-      }
-      if (positionTop > 0) {
-        markStyle.top = `${positionTop}px`;
-        markStyle.height = `calc(100% - ${positionTop}px)`;
-        positionTop = 0;
-      }
-      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
-      return markStyle;
-    };
-    const containerRef = shallowRef(null);
-    const watermarkRef = shallowRef();
-    const stopObservation = ref(false);
-    const destroyWatermark = () => {
-      if (watermarkRef.value) {
-        watermarkRef.value.remove();
-        watermarkRef.value = void 0;
-      }
-    };
-    const appendWatermark = (base64Url, markWidth) => {
-      var _a;
-      if (containerRef.value && watermarkRef.value) {
-        stopObservation.value = true;
-        watermarkRef.value.setAttribute(
-          "style",
-          getStyleStr({
-            ...getMarkStyle(),
-            backgroundImage: `url('${base64Url}')`,
-            backgroundSize: `${Math.floor(markWidth)}px`
-          })
-        );
-        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
-        setTimeout(() => {
-          stopObservation.value = false;
-        });
-      }
-    };
-    const getMarkSize = (ctx) => {
-      let defaultWidth = 120;
-      let defaultHeight = 64;
-      let space = 0;
-      const { image, content, width, height, rotate } = props;
-      if (!image && ctx.measureText) {
-        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
-        const contents = isArray(content) ? content : [content];
-        let maxWidth = 0;
-        let maxHeight = 0;
-        contents.forEach((item) => {
-          const {
-            width: width2,
-            fontBoundingBoxAscent,
-            fontBoundingBoxDescent,
-            actualBoundingBoxAscent,
-            actualBoundingBoxDescent
-          } = ctx.measureText(item);
-          const height2 = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
-          if (width2 > maxWidth)
-            maxWidth = Math.ceil(width2);
-          if (height2 > maxHeight)
-            maxHeight = Math.ceil(height2);
-        });
-        defaultWidth = maxWidth;
-        defaultHeight = maxHeight * contents.length + (contents.length - 1) * fontGap.value;
-        const angle = Math.PI / 180 * Number(rotate);
-        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
-        defaultWidth += space;
-      }
-      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight, space];
-    };
-    const getClips = useClips();
-    const renderWatermark = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      const image = props.image;
-      const content = props.content;
-      const rotate = props.rotate;
-      if (ctx) {
-        if (!watermarkRef.value) {
-          watermarkRef.value = document.createElement("div");
-        }
-        const ratio = getPixelRatio();
-        const [markWidth, markHeight, space] = getMarkSize(ctx);
-        const drawCanvas = (drawContent) => {
-          const [textClips, clipWidth] = getClips(
-            drawContent || "",
-            rotate,
-            ratio,
-            markWidth,
-            markHeight,
-            {
-              color: color.value,
-              fontSize: fontSize.value,
-              fontStyle: fontStyle.value,
-              fontWeight: fontWeight.value,
-              fontFamily: fontFamily.value,
-              fontGap: fontGap.value,
-              textAlign: textAlign.value,
-              textBaseline: textBaseline.value
-            },
-            gapX.value,
-            gapY.value,
-            space
-          );
-          appendWatermark(textClips, clipWidth);
-        };
-        if (image) {
-          const img = new Image();
-          img.onload = () => {
-            drawCanvas(img);
-          };
-          img.onerror = () => {
-            drawCanvas(content);
-          };
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = image;
-        } else {
-          drawCanvas(content);
-        }
-      }
-    };
-    onMounted(() => {
-      renderWatermark();
-    });
-    watch(
-      () => props,
-      () => {
-        renderWatermark();
-      },
-      {
-        deep: true,
-        flush: "post"
-      }
-    );
-    onBeforeUnmount(() => {
-      destroyWatermark();
-    });
-    const onMutate = (mutations) => {
-      if (stopObservation.value) {
-        return;
-      }
-      mutations.forEach((mutation) => {
-        if (reRendering(mutation, watermarkRef.value)) {
-          destroyWatermark();
-          renderWatermark();
-        }
-      });
-    };
-    useMutationObserver(containerRef, onMutate, {
-      attributes: true,
-      subtree: true,
-      childList: true
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          ref_key: "containerRef",
-          ref: containerRef,
-          style: normalizeStyle([style])
-        },
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        4
-      );
-    };
+  rotate: {
+    type: Number,
+    default: -22
+  },
+  width: Number,
+  height: Number,
+  image: String,
+  content: {
+    type: definePropType([String, Array]),
+    default: "Element Plus"
+  },
+  font: {
+    type: definePropType(Object)
+  },
+  gap: {
+    type: definePropType(Array),
+    default: () => [100, 100]
+  },
+  offset: {
+    type: definePropType(Array)
   }
 });
-var Watermark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/watermark/src/watermark.vue"]]);
 
-export { Watermark as default };
+export { watermarkProps };
 //# sourceMappingURL=watermark.mjs.map

package/es/components/watermark/src/watermark.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.vue"],"sourcesContent":["<template>\n  <div ref=\"containerRef\" :style=\"[style]\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { useMutationObserver } from '@vueuse/core'\nimport { isArray, isUndefined } from '@element-plus/utils'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips from './useClips'\n\nimport type { WatermarkProps } from './watermark'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElWatermark',\n})\n\nconst style: CSSProperties = {\n  position: 'relative',\n}\n\nconst props = defineProps(watermarkProps)\nconst fontGap = computed(() => props.font?.fontGap ?? 3)\nconst color = computed(() => props.font?.color ?? 'rgba(0,0,0,.15)')\nconst fontSize = computed(() => props.font?.fontSize ?? 16)\nconst fontWeight = computed(() => props.font?.fontWeight ?? 'normal')\nconst fontStyle = computed(() => props.font?.fontStyle ?? 'normal')\nconst fontFamily = computed(() => props.font?.fontFamily ?? 'sans-serif')\nconst textAlign = computed(() => props.font?.textAlign ?? 'center')\nconst textBaseline = computed(() => props.font?.textBaseline ?? 'hanging')\n\nconst gapX = computed(() => props.gap[0])\nconst gapY = computed(() => props.gap[1])\nconst gapXCenter = computed(() => gapX.value / 2)\nconst gapYCenter = computed(() => gapY.value / 2)\nconst offsetLeft = computed(() => props.offset?.[0] ?? gapXCenter.value)\nconst offsetTop = computed(() => props.offset?.[1] ?? gapYCenter.value)\n\nconst getMarkStyle = () => {\n  const markStyle: CSSProperties = {\n    zIndex: props.zIndex,\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    width: '100%',\n    height: '100%',\n    pointerEvents: 'none',\n    backgroundRepeat: 'repeat',\n  }\n\n  /** Calculate the style of the offset */\n  let positionLeft = offsetLeft.value - gapXCenter.value\n  let positionTop = offsetTop.value - gapYCenter.value\n  if (positionLeft > 0) {\n    markStyle.left = `${positionLeft}px`\n    markStyle.width = `calc(100% - ${positionLeft}px)`\n    positionLeft = 0\n  }\n  if (positionTop > 0) {\n    markStyle.top = `${positionTop}px`\n    markStyle.height = `calc(100% - ${positionTop}px)`\n    positionTop = 0\n  }\n  markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`\n\n  return markStyle\n}\n\nconst containerRef = shallowRef<HTMLDivElement | null>(null)\nconst watermarkRef = shallowRef<HTMLDivElement>()\nconst stopObservation = ref(false)\n\nconst destroyWatermark = () => {\n  if (watermarkRef.value) {\n    watermarkRef.value.remove()\n    watermarkRef.value = undefined\n  }\n}\nconst appendWatermark = (base64Url: string, markWidth: number) => {\n  if (containerRef.value && watermarkRef.value) {\n    stopObservation.value = true\n    watermarkRef.value.setAttribute(\n      'style',\n      getStyleStr({\n        ...getMarkStyle(),\n        backgroundImage: `url('${base64Url}')`,\n        backgroundSize: `${Math.floor(markWidth)}px`,\n      })\n    )\n    containerRef.value?.append(watermarkRef.value)\n    // Delayed execution\n    setTimeout(() => {\n      stopObservation.value = false\n    })\n  }\n}\n\n/**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\nconst getMarkSize = (ctx: CanvasRenderingContext2D) => {\n  let defaultWidth = 120\n  let defaultHeight = 64\n  let space = 0\n\n  const { image, content, width, height, rotate } = props\n\n  if (!image && ctx.measureText) {\n    ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n\n    const contents = isArray(content) ? content : [content]\n    let maxWidth = 0\n    let maxHeight = 0\n\n    contents.forEach((item) => {\n      const {\n        width,\n        fontBoundingBoxAscent,\n        fontBoundingBoxDescent,\n        actualBoundingBoxAscent,\n        actualBoundingBoxDescent,\n      } = ctx.measureText(item!)\n      // Using `actualBoundingBoxAscent` to be compatible with lower version browsers (eg: Firefox < 116)\n      const height = isUndefined(fontBoundingBoxAscent)\n        ? actualBoundingBoxAscent + actualBoundingBoxDescent\n        : fontBoundingBoxAscent + fontBoundingBoxDescent\n\n      if (width > maxWidth) maxWidth = Math.ceil(width)\n      if (height > maxHeight) maxHeight = Math.ceil(height)\n    })\n\n    defaultWidth = maxWidth\n    defaultHeight =\n      maxHeight * contents.length + (contents.length - 1) * fontGap.value\n\n    const angle = (Math.PI / 180) * Number(rotate)\n    space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2)\n\n    defaultWidth += space\n  }\n\n  return [width ?? defaultWidth, height ?? defaultHeight, space] as const\n}\n\nconst getClips = useClips()\n\nconst renderWatermark = () => {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  const image = props.image\n  const content = props.content\n  const rotate = props.rotate\n\n  if (ctx) {\n    if (!watermarkRef.value) {\n      watermarkRef.value = document.createElement('div')\n    }\n\n    const ratio = getPixelRatio()\n    const [markWidth, markHeight, space] = getMarkSize(ctx)\n\n    const drawCanvas = (\n      drawContent?: NonNullable<WatermarkProps['content']> | HTMLImageElement\n    ) => {\n      const [textClips, clipWidth] = getClips(\n        drawContent || '',\n        rotate,\n        ratio,\n        markWidth,\n        markHeight,\n        {\n          color: color.value,\n          fontSize: fontSize.value,\n          fontStyle: fontStyle.value,\n          fontWeight: fontWeight.value,\n          fontFamily: fontFamily.value,\n          fontGap: fontGap.value,\n          textAlign: textAlign.value,\n          textBaseline: textBaseline.value,\n        },\n        gapX.value,\n        gapY.value,\n        space\n      )\n\n      appendWatermark(textClips, clipWidth)\n    }\n\n    if (image) {\n      const img = new Image()\n      img.onload = () => {\n        drawCanvas(img)\n      }\n      img.onerror = () => {\n        drawCanvas(content)\n      }\n      img.crossOrigin = 'anonymous'\n      img.referrerPolicy = 'no-referrer'\n      img.src = image\n    } else {\n      drawCanvas(content)\n    }\n  }\n}\n\nonMounted(() => {\n  renderWatermark()\n})\n\nwatch(\n  () => props,\n  () => {\n    renderWatermark()\n  },\n  {\n    deep: true,\n    flush: 'post',\n  }\n)\n\nonBeforeUnmount(() => {\n  destroyWatermark()\n})\n\nconst onMutate = (mutations: MutationRecord[]) => {\n  if (stopObservation.value) {\n    return\n  }\n  mutations.forEach((mutation) => {\n    if (reRendering(mutation, watermarkRef.value)) {\n      destroyWatermark()\n      renderWatermark()\n    }\n  })\n}\n\nuseMutationObserver(containerRef, onMutate, {\n  attributes: true,\n  subtree: true,\n  childList: true,\n})\n</script>\n"],"names":["width","height","_openBlock","_createElementBlock","_normalizeStyle","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"watermark.mjs","sources":["../../../../../../packages/components/watermark/src/watermark.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes } 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  fontGap?: number\n  textAlign?: 'start' | 'end' | 'left' | 'right' | 'center'\n  textBaseline?:\n    | 'top'\n    | 'hanging'\n    | 'middle'\n    | 'alphabetic'\n    | 'ideographic'\n    | 'bottom'\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 WatermarkPropsPublic = ExtractPublicPropTypes<typeof watermarkProps>\nexport type WatermarkInstance = InstanceType<typeof Watermark> & unknown\n"],"names":[],"mappings":";;AAsBO,MAAM,iBAAiB,UAAW,CAAA;AAAA,EAIvC,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,CAAA;AAAA,GACX;AAAA,EAIA,MAAQ,EAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,CAAA,EAAA;AAAA,GACX;AAAA,EAIA,KAAO,EAAA,MAAA;AAAA,EAIP,MAAQ,EAAA,MAAA;AAAA,EAIR,KAAO,EAAA,MAAA;AAAA,EAIP,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,cAAA,CAAkC,CAAC,MAAA,EAAQ,KAAK,CAAC,CAAA;AAAA,IACvD,OAAS,EAAA,cAAA;AAAA,GACX;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAA,EAAM,eAAkC,MAAM,CAAA;AAAA,GAChD;AAAA,EAIA,GAAK,EAAA;AAAA,IACH,IAAA,EAAM,eAAiC,KAAK,CAAA;AAAA,IAC5C,OAAS,EAAA,MAAM,CAAC,GAAA,EAAK,GAAG,CAAA;AAAA,GAC1B;AAAA,EAIA,MAAQ,EAAA;AAAA,IACN,IAAA,EAAM,eAAiC,KAAK,CAAA;AAAA,GAC9C;AACF,CAAU;;;;"}

package/es/components/watermark/src/watermark2.mjs

@@ -1,32 +1,253 @@
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { defineComponent, computed, shallowRef, ref, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, renderSlot } from 'vue';
+import { useMutationObserver } from '@vueuse/core';
+import { watermarkProps } from './watermark.mjs';
+import { reRendering, getStyleStr, getPixelRatio } from './utils.mjs';
+import useClips from './useClips.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { isArray } from '@vue/shared';
+import { isUndefined } from '../../../utils/types.mjs';
 
-const watermarkProps = buildProps({
-  zIndex: {
-    type: Number,
-    default: 9
+const _sfc_main = defineComponent({
+  ...{
+    name: "ElWatermark"
   },
-  rotate: {
-    type: Number,
-    default: -22
-  },
-  width: Number,
-  height: Number,
-  image: String,
-  content: {
-    type: definePropType([String, Array]),
-    default: "Element Plus"
-  },
-  font: {
-    type: definePropType(Object)
-  },
-  gap: {
-    type: definePropType(Array),
-    default: () => [100, 100]
-  },
-  offset: {
-    type: definePropType(Array)
+  __name: "watermark",
+  props: watermarkProps,
+  setup(__props) {
+    const style = {
+      position: "relative"
+    };
+    const props = __props;
+    const fontGap = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontGap) != null ? _b : 3;
+    });
+    const color = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.color) != null ? _b : "rgba(0,0,0,.15)";
+    });
+    const fontSize = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontSize) != null ? _b : 16;
+    });
+    const fontWeight = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontWeight) != null ? _b : "normal";
+    });
+    const fontStyle = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontStyle) != null ? _b : "normal";
+    });
+    const fontFamily = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.fontFamily) != null ? _b : "sans-serif";
+    });
+    const textAlign = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textAlign) != null ? _b : "center";
+    });
+    const textBaseline = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.font) == null ? void 0 : _a.textBaseline) != null ? _b : "hanging";
+    });
+    const gapX = computed(() => props.gap[0]);
+    const gapY = computed(() => props.gap[1]);
+    const gapXCenter = computed(() => gapX.value / 2);
+    const gapYCenter = computed(() => gapY.value / 2);
+    const offsetLeft = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : gapXCenter.value;
+    });
+    const offsetTop = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.offset) == null ? void 0 : _a[1]) != null ? _b : gapYCenter.value;
+    });
+    const getMarkStyle = () => {
+      const markStyle = {
+        zIndex: props.zIndex,
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundRepeat: "repeat"
+      };
+      let positionLeft = offsetLeft.value - gapXCenter.value;
+      let positionTop = offsetTop.value - gapYCenter.value;
+      if (positionLeft > 0) {
+        markStyle.left = `${positionLeft}px`;
+        markStyle.width = `calc(100% - ${positionLeft}px)`;
+        positionLeft = 0;
+      }
+      if (positionTop > 0) {
+        markStyle.top = `${positionTop}px`;
+        markStyle.height = `calc(100% - ${positionTop}px)`;
+        positionTop = 0;
+      }
+      markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;
+      return markStyle;
+    };
+    const containerRef = shallowRef(null);
+    const watermarkRef = shallowRef();
+    const stopObservation = ref(false);
+    const destroyWatermark = () => {
+      if (watermarkRef.value) {
+        watermarkRef.value.remove();
+        watermarkRef.value = void 0;
+      }
+    };
+    const appendWatermark = (base64Url, markWidth) => {
+      var _a;
+      if (containerRef.value && watermarkRef.value) {
+        stopObservation.value = true;
+        watermarkRef.value.setAttribute(
+          "style",
+          getStyleStr({
+            ...getMarkStyle(),
+            backgroundImage: `url('${base64Url}')`,
+            backgroundSize: `${Math.floor(markWidth)}px`
+          })
+        );
+        (_a = containerRef.value) == null ? void 0 : _a.append(watermarkRef.value);
+        setTimeout(() => {
+          stopObservation.value = false;
+        });
+      }
+    };
+    const getMarkSize = (ctx) => {
+      let defaultWidth = 120;
+      let defaultHeight = 64;
+      let space = 0;
+      const { image, content, width, height, rotate } = props;
+      if (!image && ctx.measureText) {
+        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
+        const contents = isArray(content) ? content : [content];
+        let maxWidth = 0;
+        let maxHeight = 0;
+        contents.forEach((item) => {
+          const {
+            width: width2,
+            fontBoundingBoxAscent,
+            fontBoundingBoxDescent,
+            actualBoundingBoxAscent,
+            actualBoundingBoxDescent
+          } = ctx.measureText(item);
+          const height2 = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
+          if (width2 > maxWidth)
+            maxWidth = Math.ceil(width2);
+          if (height2 > maxHeight)
+            maxHeight = Math.ceil(height2);
+        });
+        defaultWidth = maxWidth;
+        defaultHeight = maxHeight * contents.length + (contents.length - 1) * fontGap.value;
+        const angle = Math.PI / 180 * Number(rotate);
+        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+        defaultWidth += space;
+      }
+      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight, space];
+    };
+    const getClips = useClips();
+    const renderWatermark = () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const image = props.image;
+      const content = props.content;
+      const rotate = props.rotate;
+      if (ctx) {
+        if (!watermarkRef.value) {
+          watermarkRef.value = document.createElement("div");
+        }
+        const ratio = getPixelRatio();
+        const [markWidth, markHeight, space] = getMarkSize(ctx);
+        const drawCanvas = (drawContent) => {
+          const [textClips, clipWidth] = getClips(
+            drawContent || "",
+            rotate,
+            ratio,
+            markWidth,
+            markHeight,
+            {
+              color: color.value,
+              fontSize: fontSize.value,
+              fontStyle: fontStyle.value,
+              fontWeight: fontWeight.value,
+              fontFamily: fontFamily.value,
+              fontGap: fontGap.value,
+              textAlign: textAlign.value,
+              textBaseline: textBaseline.value
+            },
+            gapX.value,
+            gapY.value,
+            space
+          );
+          appendWatermark(textClips, clipWidth);
+        };
+        if (image) {
+          const img = new Image();
+          img.onload = () => {
+            drawCanvas(img);
+          };
+          img.onerror = () => {
+            drawCanvas(content);
+          };
+          img.crossOrigin = "anonymous";
+          img.referrerPolicy = "no-referrer";
+          img.src = image;
+        } else {
+          drawCanvas(content);
+        }
+      }
+    };
+    onMounted(() => {
+      renderWatermark();
+    });
+    watch(
+      () => props,
+      () => {
+        renderWatermark();
+      },
+      {
+        deep: true,
+        flush: "post"
+      }
+    );
+    onBeforeUnmount(() => {
+      destroyWatermark();
+    });
+    const onMutate = (mutations) => {
+      if (stopObservation.value) {
+        return;
+      }
+      mutations.forEach((mutation) => {
+        if (reRendering(mutation, watermarkRef.value)) {
+          destroyWatermark();
+          renderWatermark();
+        }
+      });
+    };
+    useMutationObserver(containerRef, onMutate, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "containerRef",
+          ref: containerRef,
+          style: normalizeStyle([style])
+        },
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        4
+      );
+    };
   }
 });
+var Watermark = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/watermark/src/watermark.vue"]]);
 
-export { watermarkProps };
+export { Watermark as default };
 //# sourceMappingURL=watermark2.mjs.map