@element-plus/nightly 0.0.20250804 → 0.0.20250806

package/es/components/tooltip-v2/src/content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.mjs","sources":["../../../../../../packages/components/tooltip-v2/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { PopperEffect } from '@element-plus/components/popper'\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type { Placement, Strategy, VirtualElement } from '@floating-ui/dom'\n\nconst tooltipV2Strategies = ['absolute', 'fixed'] as const\n\nconst tooltipV2Placements = [\n  'top-start',\n  'top-end',\n  'top',\n  'bottom-start',\n  'bottom-end',\n  'bottom',\n  'left-start',\n  'left-end',\n  'left',\n  'right-start',\n  'right-end',\n  'right',\n] as const\n\nexport const tooltipV2ContentProps = buildProps({\n  arrowPadding: {\n    type: definePropType<number>(Number),\n    default: 5,\n  },\n  effect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'light',\n  },\n  contentClass: String,\n  /**\n   * Placement of tooltip content relative to reference element (when absent it refers to trigger)\n   */\n  placement: {\n    type: definePropType<Placement>(String),\n    values: tooltipV2Placements,\n    default: 'bottom',\n  },\n  /**\n   * Reference element for tooltip content to set its position\n   */\n  reference: {\n    type: definePropType<HTMLElement | VirtualElement | null>(Object),\n    default: null,\n  },\n  offset: {\n    type: Number,\n    default: 8,\n  },\n  strategy: {\n    type: definePropType<Strategy>(String),\n    values: tooltipV2Strategies,\n    default: 'absolute',\n  },\n  showArrow: Boolean,\n  ...useAriaProps(['ariaLabel']),\n} as const)\n\nexport type TooltipV2ContentProps = ExtractPropTypes<\n  typeof tooltipV2ContentProps\n>\n\nexport type TooltipV2ContentPropsPublic = __ExtractPublicPropTypes<\n  typeof tooltipV2ContentProps\n>\n"],"names":[],"mappings":";;;AAEA,MAAM,mBAAmB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAClD,MAAM,mBAAmB,GAAG;AAC5B,EAAE,WAAW;AACb,EAAE,SAAS;AACX,EAAE,KAAK;AACP,EAAE,cAAc;AAChB,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,YAAY;AACd,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,aAAa;AACf,EAAE,WAAW;AACb,EAAE,OAAO;AACT,CAAC,CAAC;AACU,MAAC,qBAAqB,GAAG,UAAU,CAAC;AAChD,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,YAAY,EAAE,MAAM;AACtB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,mBAAmB;AAC/B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,mBAAmB;AAC/B,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,GAAG,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC;;;;"}
+{"version":3,"file":"content.mjs","sources":["../../../../../../packages/components/tooltip-v2/src/content.vue"],"sourcesContent":["<template>\n  <div ref=\"contentRef\" :style=\"contentStyle\" data-tooltip-v2-root>\n    <div v-if=\"!nowrap\" :data-side=\"side\" :class=\"contentClass\">\n      <slot :content-style=\"contentStyle\" :content-class=\"contentClass\" />\n      <el-visually-hidden :id=\"contentId\" role=\"tooltip\">\n        <template v-if=\"ariaLabel\">\n          {{ ariaLabel }}\n        </template>\n        <slot v-else />\n      </el-visually-hidden>\n      <slot name=\"arrow\" :style=\"arrowStyle\" :side=\"side\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, onMounted, provide, ref, unref, watch } from 'vue'\nimport { offset } from '@floating-ui/dom'\nimport {\n  arrowMiddleware,\n  useFloating,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport ElVisuallyHidden from '@element-plus/components/visual-hidden'\nimport { tooltipV2ContentKey, tooltipV2RootKey } from './constants'\nimport { tooltipV2ContentProps } from './content'\nimport { tooltipV2CommonProps } from './common'\n\nimport type { TooltipV2Sides } from './common'\nimport type { CSSProperties } from 'vue'\nimport type { Middleware } from '@floating-ui/dom'\n\ndefineOptions({\n  name: 'ElTooltipV2Content',\n})\n\nconst props = defineProps({ ...tooltipV2ContentProps, ...tooltipV2CommonProps })\n\nconst { triggerRef, contentId } = inject(tooltipV2RootKey)!\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nconst { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({\n  placement,\n  strategy,\n  middleware: computed(() => {\n    const middleware: Middleware[] = [offset(props.offset)]\n\n    if (props.showArrow) {\n      middleware.push(\n        arrowMiddleware({\n          arrowRef,\n        })\n      )\n    }\n\n    return middleware\n  }),\n})\n\nconst zIndex = useZIndex().nextZIndex()\n\nconst ns = useNamespace('tooltip-v2')\n\nconst side = computed(() => {\n  return placement.value.split('-')[0] as TooltipV2Sides\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  return {\n    position: unref(strategy),\n    top: `${unref(y) || 0}px`,\n    left: `${unref(x) || 0}px`,\n    zIndex,\n  }\n})\n\nconst arrowStyle = computed<CSSProperties>(() => {\n  if (!props.showArrow) return {}\n\n  const { arrow } = unref(middlewareData)\n\n  return {\n    [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow?.x}px` || '',\n    [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow?.y}px` || '',\n  }\n})\n\nconst contentClass = computed(() => [\n  ns.e('content'),\n  ns.is('dark', props.effect === 'dark'),\n  ns.is(unref(strategy)),\n  props.contentClass,\n])\n\nwatch(arrowRef, () => update())\n\nwatch(\n  () => props.placement,\n  (val) => (placement.value = val)\n)\n\nonMounted(() => {\n  watch(\n    () => props.reference || triggerRef.value,\n    (el) => {\n      referenceRef.value = el || undefined\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nprovide(tooltipV2ContentKey, { arrowRef })\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeStyle","_unref"],"mappings":"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"}

package/es/components/tooltip-v2/src/content2.mjs

@@ -1,114 +1,52 @@
-import { defineComponent, inject, ref, computed, unref, watch, onMounted, provide, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createVNode, withCtx, Fragment, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
-import { offset } from '@floating-ui/dom';
-import ElVisuallyHidden from '../../visual-hidden/src/visual-hidden2.mjs';
-import { tooltipV2RootKey, tooltipV2ContentKey } from './constants.mjs';
-import { tooltipV2ContentProps } from './content.mjs';
-import { tooltipV2CommonProps } from './common.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useFloating, arrowMiddleware } from '../../../hooks/use-floating/index.mjs';
-import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { useAriaProps } from '../../../hooks/use-aria/index.mjs';
 
-const __default__ = defineComponent({
-  name: "ElTooltipV2Content"
+const tooltipV2Strategies = ["absolute", "fixed"];
+const tooltipV2Placements = [
+  "top-start",
+  "top-end",
+  "top",
+  "bottom-start",
+  "bottom-end",
+  "bottom",
+  "left-start",
+  "left-end",
+  "left",
+  "right-start",
+  "right-end",
+  "right"
+];
+const tooltipV2ContentProps = buildProps({
+  arrowPadding: {
+    type: definePropType(Number),
+    default: 5
+  },
+  effect: {
+    type: definePropType(String),
+    default: "light"
+  },
+  contentClass: String,
+  placement: {
+    type: definePropType(String),
+    values: tooltipV2Placements,
+    default: "bottom"
+  },
+  reference: {
+    type: definePropType(Object),
+    default: null
+  },
+  offset: {
+    type: Number,
+    default: 8
+  },
+  strategy: {
+    type: definePropType(String),
+    values: tooltipV2Strategies,
+    default: "absolute"
+  },
+  showArrow: Boolean,
+  ...useAriaProps(["ariaLabel"])
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: { ...tooltipV2ContentProps, ...tooltipV2CommonProps },
-  setup(__props) {
-    const props = __props;
-    const { triggerRef, contentId } = inject(tooltipV2RootKey);
-    const placement = ref(props.placement);
-    const strategy = ref(props.strategy);
-    const arrowRef = ref(null);
-    const { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({
-      placement,
-      strategy,
-      middleware: computed(() => {
-        const middleware = [offset(props.offset)];
-        if (props.showArrow) {
-          middleware.push(arrowMiddleware({
-            arrowRef
-          }));
-        }
-        return middleware;
-      })
-    });
-    const zIndex = useZIndex().nextZIndex();
-    const ns = useNamespace("tooltip-v2");
-    const side = computed(() => {
-      return placement.value.split("-")[0];
-    });
-    const contentStyle = computed(() => {
-      return {
-        position: unref(strategy),
-        top: `${unref(y) || 0}px`,
-        left: `${unref(x) || 0}px`,
-        zIndex
-      };
-    });
-    const arrowStyle = computed(() => {
-      if (!props.showArrow)
-        return {};
-      const { arrow } = unref(middlewareData);
-      return {
-        [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow == null ? void 0 : arrow.x}px` || "",
-        [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || ""
-      };
-    });
-    const contentClass = computed(() => [
-      ns.e("content"),
-      ns.is("dark", props.effect === "dark"),
-      ns.is(unref(strategy)),
-      props.contentClass
-    ]);
-    watch(arrowRef, () => update());
-    watch(() => props.placement, (val) => placement.value = val);
-    onMounted(() => {
-      watch(() => props.reference || triggerRef.value, (el) => {
-        referenceRef.value = el || void 0;
-      }, {
-        immediate: true
-      });
-    });
-    provide(tooltipV2ContentKey, { arrowRef });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "contentRef",
-        ref: contentRef,
-        style: normalizeStyle(unref(contentStyle)),
-        "data-tooltip-v2-root": ""
-      }, [
-        !_ctx.nowrap ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          "data-side": unref(side),
-          class: normalizeClass(unref(contentClass))
-        }, [
-          renderSlot(_ctx.$slots, "default", {
-            contentStyle: unref(contentStyle),
-            contentClass: unref(contentClass)
-          }),
-          createVNode(unref(ElVisuallyHidden), {
-            id: unref(contentId),
-            role: "tooltip"
-          }, {
-            default: withCtx(() => [
-              _ctx.ariaLabel ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                createTextVNode(toDisplayString(_ctx.ariaLabel), 1)
-              ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 })
-            ]),
-            _: 3
-          }, 8, ["id"]),
-          renderSlot(_ctx.$slots, "arrow", {
-            style: normalizeStyle(unref(arrowStyle)),
-            side: unref(side)
-          })
-        ], 10, ["data-side"])) : createCommentVNode("v-if", true)
-      ], 4);
-    };
-  }
-});
-var TooltipV2Content = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
 
-export { TooltipV2Content as default };
+export { tooltipV2ContentProps };
 //# sourceMappingURL=content2.mjs.map

package/es/components/tooltip-v2/src/content2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"content2.mjs","sources":["../../../../../../packages/components/tooltip-v2/src/content.vue"],"sourcesContent":["<template>\n  <div ref=\"contentRef\" :style=\"contentStyle\" data-tooltip-v2-root>\n    <div v-if=\"!nowrap\" :data-side=\"side\" :class=\"contentClass\">\n      <slot :content-style=\"contentStyle\" :content-class=\"contentClass\" />\n      <el-visually-hidden :id=\"contentId\" role=\"tooltip\">\n        <template v-if=\"ariaLabel\">\n          {{ ariaLabel }}\n        </template>\n        <slot v-else />\n      </el-visually-hidden>\n      <slot name=\"arrow\" :style=\"arrowStyle\" :side=\"side\" />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, onMounted, provide, ref, unref, watch } from 'vue'\nimport { offset } from '@floating-ui/dom'\nimport {\n  arrowMiddleware,\n  useFloating,\n  useNamespace,\n  useZIndex,\n} from '@element-plus/hooks'\nimport ElVisuallyHidden from '@element-plus/components/visual-hidden'\nimport { tooltipV2ContentKey, tooltipV2RootKey } from './constants'\nimport { tooltipV2ContentProps } from './content'\nimport { tooltipV2CommonProps } from './common'\n\nimport type { TooltipV2Sides } from './common'\nimport type { CSSProperties } from 'vue'\nimport type { Middleware } from '@floating-ui/dom'\n\ndefineOptions({\n  name: 'ElTooltipV2Content',\n})\n\nconst props = defineProps({ ...tooltipV2ContentProps, ...tooltipV2CommonProps })\n\nconst { triggerRef, contentId } = inject(tooltipV2RootKey)!\n\nconst placement = ref(props.placement)\nconst strategy = ref(props.strategy)\nconst arrowRef = ref<HTMLElement | null>(null)\n\nconst { referenceRef, contentRef, middlewareData, x, y, update } = useFloating({\n  placement,\n  strategy,\n  middleware: computed(() => {\n    const middleware: Middleware[] = [offset(props.offset)]\n\n    if (props.showArrow) {\n      middleware.push(\n        arrowMiddleware({\n          arrowRef,\n        })\n      )\n    }\n\n    return middleware\n  }),\n})\n\nconst zIndex = useZIndex().nextZIndex()\n\nconst ns = useNamespace('tooltip-v2')\n\nconst side = computed(() => {\n  return placement.value.split('-')[0] as TooltipV2Sides\n})\n\nconst contentStyle = computed<CSSProperties>(() => {\n  return {\n    position: unref(strategy),\n    top: `${unref(y) || 0}px`,\n    left: `${unref(x) || 0}px`,\n    zIndex,\n  }\n})\n\nconst arrowStyle = computed<CSSProperties>(() => {\n  if (!props.showArrow) return {}\n\n  const { arrow } = unref(middlewareData)\n\n  return {\n    [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow?.x}px` || '',\n    [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow?.y}px` || '',\n  }\n})\n\nconst contentClass = computed(() => [\n  ns.e('content'),\n  ns.is('dark', props.effect === 'dark'),\n  ns.is(unref(strategy)),\n  props.contentClass,\n])\n\nwatch(arrowRef, () => update())\n\nwatch(\n  () => props.placement,\n  (val) => (placement.value = val)\n)\n\nonMounted(() => {\n  watch(\n    () => props.reference || triggerRef.value,\n    (el) => {\n      referenceRef.value = el || undefined\n    },\n    {\n      immediate: true,\n    }\n  )\n})\n\nprovide(tooltipV2ContentKey, { arrowRef })\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeStyle","_unref"],"mappings":"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"}
+{"version":3,"file":"content2.mjs","sources":["../../../../../../packages/components/tooltip-v2/src/content.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\n\nimport type { PopperEffect } from '@element-plus/components/popper'\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type { Placement, Strategy, VirtualElement } from '@floating-ui/dom'\n\nconst tooltipV2Strategies = ['absolute', 'fixed'] as const\n\nconst tooltipV2Placements = [\n  'top-start',\n  'top-end',\n  'top',\n  'bottom-start',\n  'bottom-end',\n  'bottom',\n  'left-start',\n  'left-end',\n  'left',\n  'right-start',\n  'right-end',\n  'right',\n] as const\n\nexport const tooltipV2ContentProps = buildProps({\n  arrowPadding: {\n    type: definePropType<number>(Number),\n    default: 5,\n  },\n  effect: {\n    type: definePropType<PopperEffect>(String),\n    default: 'light',\n  },\n  contentClass: String,\n  /**\n   * Placement of tooltip content relative to reference element (when absent it refers to trigger)\n   */\n  placement: {\n    type: definePropType<Placement>(String),\n    values: tooltipV2Placements,\n    default: 'bottom',\n  },\n  /**\n   * Reference element for tooltip content to set its position\n   */\n  reference: {\n    type: definePropType<HTMLElement | VirtualElement | null>(Object),\n    default: null,\n  },\n  offset: {\n    type: Number,\n    default: 8,\n  },\n  strategy: {\n    type: definePropType<Strategy>(String),\n    values: tooltipV2Strategies,\n    default: 'absolute',\n  },\n  showArrow: Boolean,\n  ...useAriaProps(['ariaLabel']),\n} as const)\n\nexport type TooltipV2ContentProps = ExtractPropTypes<\n  typeof tooltipV2ContentProps\n>\n\nexport type TooltipV2ContentPropsPublic = __ExtractPublicPropTypes<\n  typeof tooltipV2ContentProps\n>\n"],"names":[],"mappings":";;;AAEA,MAAM,mBAAmB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAClD,MAAM,mBAAmB,GAAG;AAC5B,EAAE,WAAW;AACb,EAAE,SAAS;AACX,EAAE,KAAK;AACP,EAAE,cAAc;AAChB,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,YAAY;AACd,EAAE,UAAU;AACZ,EAAE,MAAM;AACR,EAAE,aAAa;AACf,EAAE,WAAW;AACb,EAAE,OAAO;AACT,CAAC,CAAC;AACU,MAAC,qBAAqB,GAAG,UAAU,CAAC;AAChD,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,YAAY,EAAE,MAAM;AACtB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,mBAAmB;AAC/B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,MAAM,EAAE,mBAAmB;AAC/B,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,GAAG,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC;AAChC,CAAC;;;;"}

package/es/components/tooltip-v2/src/tooltip.mjs

@@ -1,7 +1,7 @@
 import { tooltipV2RootProps } from './root.mjs';
 import { tooltipV2TriggerProps } from './trigger.mjs';
 import { tooltipV2ArrowProps } from './arrow.mjs';
-import { tooltipV2ContentProps } from './content.mjs';
+import { tooltipV2ContentProps } from './content2.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 
 const tooltipV2Props = buildProps({

package/es/components/tooltip-v2/src/tooltip2.mjs

@@ -2,13 +2,13 @@ import { defineComponent, toRefs, reactive, openBlock, createBlock, normalizePro
 import { pick } from 'lodash-unified';
 import { ElTeleport } from '../../teleport/index.mjs';
 import { tooltipV2ArrowProps } from './arrow.mjs';
-import { tooltipV2ContentProps } from './content.mjs';
+import { tooltipV2ContentProps } from './content2.mjs';
 import { tooltipV2RootProps } from './root.mjs';
 import { tooltipV2Props } from './tooltip.mjs';
 import { tooltipV2TriggerProps } from './trigger.mjs';
 import TooltipV2Root from './root2.mjs';
 import TooltipV2Arrow from './arrow2.mjs';
-import TooltipV2Content from './content2.mjs';
+import TooltipV2Content from './content.mjs';
 import TooltipV2Trigger from './trigger2.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 

package/es/components/upload/index.mjs

@@ -2,7 +2,7 @@ import Upload from './src/upload2.mjs';
 export { genFileId, uploadBaseProps, uploadListTypes, uploadProps } from './src/upload.mjs';
 export { uploadContentProps } from './src/upload-content.mjs';
 export { uploadListEmits, uploadListProps } from './src/upload-list.mjs';
-export { uploadDraggerEmits, uploadDraggerProps } from './src/upload-dragger2.mjs';
+export { uploadDraggerEmits, uploadDraggerProps } from './src/upload-dragger.mjs';
 export { uploadContextKey } from './src/constants.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 

package/es/components/upload/src/upload-content2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, shallowRef, openBlock, createElementBlock, normalizeClass, unref, withKeys, withModifiers, createBlock, withCtx, renderSlot, createElementVNode } from 'vue';
 import { cloneDeep, isEqual } from 'lodash-unified';
-import UploadDragger from './upload-dragger.mjs';
+import UploadDragger from './upload-dragger2.mjs';
 import { uploadContentProps } from './upload-content.mjs';
 import { genFileId } from './upload.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

package/es/components/upload/src/upload-dragger.mjs

@@ -1,65 +1,12 @@
-import { defineComponent, inject, ref, openBlock, createElementBlock, normalizeClass, unref, withModifiers, renderSlot } from 'vue';
-import { throwError } from '../../../utils/error.mjs';
-import { uploadContextKey } from './constants.mjs';
-import { uploadDraggerProps, uploadDraggerEmits } from './upload-dragger2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { isArray } from '@vue/shared';
 
-const COMPONENT_NAME = "ElUploadDrag";
-const __default__ = defineComponent({
-  name: COMPONENT_NAME
+const uploadDraggerProps = buildProps({
+  disabled: Boolean
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: uploadDraggerProps,
-  emits: uploadDraggerEmits,
-  setup(__props, { emit }) {
-    const uploaderContext = inject(uploadContextKey);
-    if (!uploaderContext) {
-      throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>");
-    }
-    const ns = useNamespace("upload");
-    const dragover = ref(false);
-    const disabled = useFormDisabled();
-    const onDrop = (e) => {
-      if (disabled.value)
-        return;
-      dragover.value = false;
-      e.stopPropagation();
-      const files = Array.from(e.dataTransfer.files);
-      const items = e.dataTransfer.items || [];
-      files.forEach((file, index) => {
-        var _a;
-        const item = items[index];
-        const entry = (_a = item == null ? void 0 : item.webkitGetAsEntry) == null ? void 0 : _a.call(item);
-        if (entry) {
-          file.isDirectory = entry.isDirectory;
-        }
-      });
-      emit("file", files);
-    };
-    const onDragover = () => {
-      if (!disabled.value)
-        dragover.value = true;
-    };
-    const onDragleave = (e) => {
-      if (!e.currentTarget.contains(e.relatedTarget))
-        dragover.value = false;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
-        onDrop: withModifiers(onDrop, ["prevent"]),
-        onDragover: withModifiers(onDragover, ["prevent"]),
-        onDragleave: withModifiers(onDragleave, ["prevent"])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 42, ["onDrop", "onDragover", "onDragleave"]);
-    };
-  }
-});
-var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "upload-dragger.vue"]]);
+const uploadDraggerEmits = {
+  file: (file) => isArray(file)
+};
 
-export { UploadDragger as default };
+export { uploadDraggerEmits, uploadDraggerProps };
 //# sourceMappingURL=upload-dragger.mjs.map

package/es/components/upload/src/upload-dragger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-dragger.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dragger'), ns.is('dragover', dragover)]\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"onDragleave\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { throwError } from '@element-plus/utils/error'\nimport { uploadContextKey } from './constants'\nimport { uploadDraggerEmits, uploadDraggerProps } from './upload-dragger'\n\nimport type { UploadRawFile } from './upload'\n\nconst COMPONENT_NAME = 'ElUploadDrag'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\ndefineProps(uploadDraggerProps)\nconst emit = defineEmits(uploadDraggerEmits)\n\nconst uploaderContext = inject(uploadContextKey)\nif (!uploaderContext) {\n  throwError(\n    COMPONENT_NAME,\n    'usage: <el-upload><el-upload-dragger /></el-upload>'\n  )\n}\n\nconst ns = useNamespace('upload')\nconst dragover = ref(false)\nconst disabled = useFormDisabled()\n\nconst onDrop = (e: DragEvent) => {\n  if (disabled.value) return\n  dragover.value = false\n\n  e.stopPropagation()\n\n  const files = Array.from(e.dataTransfer!.files) as UploadRawFile[]\n  const items = e.dataTransfer!.items || []\n  files.forEach((file, index) => {\n    const item = items[index]\n    const entry = item?.webkitGetAsEntry?.()\n    if (entry) {\n      file.isDirectory = entry.isDirectory\n    }\n  })\n  emit('file', files)\n}\n\nconst onDragover = () => {\n  if (!disabled.value) dragover.value = true\n}\n\nconst onDragleave = (e: DragEvent) => {\n  if (!(e.currentTarget as Element).contains(e.relatedTarget as Element))\n    dragover.value = false\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAuBc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;AAKA,IAAM,MAAA,eAAA,GAAkB,OAAO,gBAAgB,CAAA,CAAA;AAC/C,IAAA,IAAI,CAAC,eAAiB,EAAA;AACpB,MAAA,UAAA,CAAA,cAAA,EAAA,qDAAA,CAAA,CAAA;AAAA,KACE;AAAA,IACA,MAAA,EAAA,GAAA,YAAA,CAAA,QAAA,CAAA,CAAA;AAAA,IACF,MAAA,QAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AAAA,IACF,MAAA,QAAA,GAAA,eAAA,EAAA,CAAA;AAEA,IAAM,MAAA;AACN,MAAM,IAAA,QAAA,CAAA;AACN,QAAA;AAEA,MAAM,QAAA,CAAA,KAAU,GAAiB,KAAA,CAAA;AAC/B,MAAA,CAAA,CAAA,eAAoB,EAAA,CAAA;AACpB,MAAA,MAAA,KAAiB,GAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAEjB,MAAA,MAAkB,KAAA,GAAA,CAAA,CAAA,YAAA,CAAA,KAAA,IAAA,EAAA,CAAA;AAElB,MAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,EAAW,KAAA;AACzB,QAAA,IAAM,EAAQ,CAAA;AACd,QAAM,MAAA,IAAA,GAAS,KAAA,CAAM,KAAU,CAAA,CAAA;AAC7B,QAAM,MAAA,KAAA,SAAkB,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,gBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;AACxB,QAAM,IAAA,KAAA,EAAA;AACN,UAAA,IAAW,CAAA,WAAA,GAAA,KAAA,CAAA,WAAA,CAAA;AACT,SAAA;AAAyB,OAC3B,CAAA,CAAA;AAAA,MACF,IAAC,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AACD,KAAA,CAAA;AAAkB,IACpB,MAAA,UAAA,GAAA,MAAA;AAEA,MAAA,IAAM,eAAmB;AACvB,QAAA,QAAK,CAAA,KAAgB,GAAA,IAAA,CAAA;AAAiB,KACxC,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,CAAiB,KAAA;AACpC,MAAA,IAAI,CAAE,CAAA,CAAE,aAA0B,CAAA,QAAA,CAAS,EAAE,aAAwB,CAAA;AACnE,QAAA,QAAA,CAAS,KAAQ,GAAA,KAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"upload-dragger.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.ts"],"sourcesContent":["import { buildProps, isArray } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type UploadDragger from './upload-dragger.vue'\n\nexport const uploadDraggerProps = buildProps({\n  disabled: Boolean,\n} as const)\nexport type UploadDraggerProps = ExtractPropTypes<typeof uploadDraggerProps>\nexport type UploadDraggerPropsPublic = __ExtractPublicPropTypes<\n  typeof uploadDraggerProps\n>\n\nexport const uploadDraggerEmits = {\n  file: (file: File[]) => isArray(file),\n}\nexport type UploadDraggerEmits = typeof uploadDraggerEmits\n\nexport type UploadDraggerInstance = InstanceType<typeof UploadDragger> & unknown\n"],"names":[],"mappings":";;;AACY,MAAC,kBAAkB,GAAG,UAAU,CAAC;AAC7C,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,IAAI,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;AAC/B;;;;"}

package/es/components/upload/src/upload-dragger2.mjs

@@ -1,12 +1,65 @@
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
-import { isArray } from '@vue/shared';
+import { defineComponent, inject, ref, openBlock, createElementBlock, normalizeClass, unref, withModifiers, renderSlot } from 'vue';
+import { throwError } from '../../../utils/error.mjs';
+import { uploadContextKey } from './constants.mjs';
+import { uploadDraggerProps, uploadDraggerEmits } from './upload-dragger.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
 
-const uploadDraggerProps = buildProps({
-  disabled: Boolean
+const COMPONENT_NAME = "ElUploadDrag";
+const __default__ = defineComponent({
+  name: COMPONENT_NAME
 });
-const uploadDraggerEmits = {
-  file: (file) => isArray(file)
-};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: uploadDraggerProps,
+  emits: uploadDraggerEmits,
+  setup(__props, { emit }) {
+    const uploaderContext = inject(uploadContextKey);
+    if (!uploaderContext) {
+      throwError(COMPONENT_NAME, "usage: <el-upload><el-upload-dragger /></el-upload>");
+    }
+    const ns = useNamespace("upload");
+    const dragover = ref(false);
+    const disabled = useFormDisabled();
+    const onDrop = (e) => {
+      if (disabled.value)
+        return;
+      dragover.value = false;
+      e.stopPropagation();
+      const files = Array.from(e.dataTransfer.files);
+      const items = e.dataTransfer.items || [];
+      files.forEach((file, index) => {
+        var _a;
+        const item = items[index];
+        const entry = (_a = item == null ? void 0 : item.webkitGetAsEntry) == null ? void 0 : _a.call(item);
+        if (entry) {
+          file.isDirectory = entry.isDirectory;
+        }
+      });
+      emit("file", files);
+    };
+    const onDragover = () => {
+      if (!disabled.value)
+        dragover.value = true;
+    };
+    const onDragleave = (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget))
+        dragover.value = false;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(ns).b("dragger"), unref(ns).is("dragover", dragover.value)]),
+        onDrop: withModifiers(onDrop, ["prevent"]),
+        onDragover: withModifiers(onDragover, ["prevent"]),
+        onDragleave: withModifiers(onDragleave, ["prevent"])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 42, ["onDrop", "onDragover", "onDragleave"]);
+    };
+  }
+});
+var UploadDragger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "upload-dragger.vue"]]);
 
-export { uploadDraggerEmits, uploadDraggerProps };
+export { UploadDragger as default };
 //# sourceMappingURL=upload-dragger2.mjs.map

package/es/components/upload/src/upload-dragger2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"upload-dragger2.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.ts"],"sourcesContent":["import { buildProps, isArray } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type UploadDragger from './upload-dragger.vue'\n\nexport const uploadDraggerProps = buildProps({\n  disabled: Boolean,\n} as const)\nexport type UploadDraggerProps = ExtractPropTypes<typeof uploadDraggerProps>\nexport type UploadDraggerPropsPublic = __ExtractPublicPropTypes<\n  typeof uploadDraggerProps\n>\n\nexport const uploadDraggerEmits = {\n  file: (file: File[]) => isArray(file),\n}\nexport type UploadDraggerEmits = typeof uploadDraggerEmits\n\nexport type UploadDraggerInstance = InstanceType<typeof UploadDragger> & unknown\n"],"names":[],"mappings":";;;AACY,MAAC,kBAAkB,GAAG,UAAU,CAAC;AAC7C,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,IAAI,EAAE,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;AAC/B;;;;"}
+{"version":3,"file":"upload-dragger2.mjs","sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dragger'), ns.is('dragover', dragover)]\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"onDragleave\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { throwError } from '@element-plus/utils/error'\nimport { uploadContextKey } from './constants'\nimport { uploadDraggerEmits, uploadDraggerProps } from './upload-dragger'\n\nimport type { UploadRawFile } from './upload'\n\nconst COMPONENT_NAME = 'ElUploadDrag'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\ndefineProps(uploadDraggerProps)\nconst emit = defineEmits(uploadDraggerEmits)\n\nconst uploaderContext = inject(uploadContextKey)\nif (!uploaderContext) {\n  throwError(\n    COMPONENT_NAME,\n    'usage: <el-upload><el-upload-dragger /></el-upload>'\n  )\n}\n\nconst ns = useNamespace('upload')\nconst dragover = ref(false)\nconst disabled = useFormDisabled()\n\nconst onDrop = (e: DragEvent) => {\n  if (disabled.value) return\n  dragover.value = false\n\n  e.stopPropagation()\n\n  const files = Array.from(e.dataTransfer!.files) as UploadRawFile[]\n  const items = e.dataTransfer!.items || []\n  files.forEach((file, index) => {\n    const item = items[index]\n    const entry = item?.webkitGetAsEntry?.()\n    if (entry) {\n      file.isDirectory = entry.isDirectory\n    }\n  })\n  emit('file', files)\n}\n\nconst onDragover = () => {\n  if (!disabled.value) dragover.value = true\n}\n\nconst onDragleave = (e: DragEvent) => {\n  if (!(e.currentTarget as Element).contains(e.relatedTarget as Element))\n    dragover.value = false\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAuBc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;AAKA,IAAM,MAAA,eAAA,GAAkB,OAAO,gBAAgB,CAAA,CAAA;AAC/C,IAAA,IAAI,CAAC,eAAiB,EAAA;AACpB,MAAA,UAAA,CAAA,cAAA,EAAA,qDAAA,CAAA,CAAA;AAAA,KACE;AAAA,IACA,MAAA,EAAA,GAAA,YAAA,CAAA,QAAA,CAAA,CAAA;AAAA,IACF,MAAA,QAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AAAA,IACF,MAAA,QAAA,GAAA,eAAA,EAAA,CAAA;AAEA,IAAM,MAAA;AACN,MAAM,IAAA,QAAA,CAAA;AACN,QAAA;AAEA,MAAM,QAAA,CAAA,KAAU,GAAiB,KAAA,CAAA;AAC/B,MAAA,CAAA,CAAA,eAAoB,EAAA,CAAA;AACpB,MAAA,MAAA,KAAiB,GAAA,KAAA,CAAA,IAAA,CAAA,CAAA,CAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAEjB,MAAA,MAAkB,KAAA,GAAA,CAAA,CAAA,YAAA,CAAA,KAAA,IAAA,EAAA,CAAA;AAElB,MAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,EAAW,KAAA;AACzB,QAAA,IAAM,EAAQ,CAAA;AACd,QAAM,MAAA,IAAA,GAAS,KAAA,CAAM,KAAU,CAAA,CAAA;AAC7B,QAAM,MAAA,KAAA,SAAkB,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,gBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA;AACxB,QAAM,IAAA,KAAA,EAAA;AACN,UAAA,IAAW,CAAA,WAAA,GAAA,KAAA,CAAA,WAAA,CAAA;AACT,SAAA;AAAyB,OAC3B,CAAA,CAAA;AAAA,MACF,IAAC,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AACD,KAAA,CAAA;AAAkB,IACpB,MAAA,UAAA,GAAA,MAAA;AAEA,MAAA,IAAM,eAAmB;AACvB,QAAA,QAAK,CAAA,KAAgB,GAAA,IAAA,CAAA;AAAiB,KACxC,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,CAAiB,KAAA;AACpC,MAAA,IAAI,CAAE,CAAA,CAAE,aAA0B,CAAA,QAAA,CAAS,EAAE,aAAwB,CAAA;AACnE,QAAA,QAAA,CAAS,KAAQ,GAAA,KAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;"}

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

@@ -4,4 +4,4 @@ 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];
+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, space: number) => [dataURL: string, finalWidth: number, finalHeight: number];

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

@@ -1,6 +1,13 @@
 import { isArray } from '@vue/shared';
 
 const FontGap = 3;
+const TEXT_ALIGN_RATIO_MAP = {
+  left: [0, 0.5],
+  start: [0, 0.5],
+  center: [0.5, 0],
+  right: [1, -0.5],
+  end: [1, -0.5]
+};
 function prepareCanvas(width, height, ratio = 1) {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -12,7 +19,7 @@ function prepareCanvas(width, height, ratio = 1) {
   return [ctx, canvas, realWidth, realHeight];
 }
 function useClips() {
-  function getClips(content, rotate, ratio, width, height, font, gapX, gapY) {
+  function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
     const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio);
     if (content instanceof HTMLImageElement) {
       ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
@@ -33,7 +40,8 @@ function useClips() {
       ctx.textBaseline = textBaseline;
       const contents = isArray(content) ? content : [content];
       contents == null ? void 0 : contents.forEach((item, index) => {
-        ctx.fillText(item != null ? item : "", contentWidth / 2, index * (mergedFontSize + FontGap * ratio));
+        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign];
+        ctx.fillText(item != null ? item : "", contentWidth * alignRatio + space * spaceRatio, index * (mergedFontSize + FontGap * ratio));
       });
     }
     const angle = Math.PI / 180 * Number(rotate);

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

@@ -1 +1 @@
-{"version":3,"file":"useClips.mjs","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport 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 {\n        color,\n        fontSize,\n        fontStyle,\n        fontWeight,\n        fontFamily,\n        textAlign,\n        textBaseline,\n      } = 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 = textAlign\n      ctx.textBaseline = textBaseline\n      const contents = 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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"}
+{"version":3,"file":"useClips.mjs","sources":["../../../../../../packages/components/watermark/src/useClips.ts"],"sourcesContent":["import { isArray } from '@element-plus/utils'\n\nimport type { WatermarkProps } from './watermark'\n\nexport const FontGap = 3\n\n// [alignRatio, spaceRatio]\nconst TEXT_ALIGN_RATIO_MAP = {\n  left: [0, 0.5],\n  start: [0, 0.5],\n  center: [0.5, 0],\n  right: [1, -0.5],\n  end: [1, -0.5],\n} as const\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    space: 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 {\n        color,\n        fontSize,\n        fontStyle,\n        fontWeight,\n        fontFamily,\n        textAlign,\n        textBaseline,\n      } = 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 = textAlign\n      ctx.textBaseline = textBaseline\n      const contents = isArray(content) ? content : [content]\n      contents?.forEach((item, index) => {\n        const [alignRatio, spaceRatio] = TEXT_ALIGN_RATIO_MAP[textAlign]\n        ctx.fillText(\n          item ?? '',\n          contentWidth * alignRatio + space * spaceRatio,\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/es/components/watermark/src/watermark2.mjs

@@ -111,6 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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}`;
@@ -134,10 +135,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         defaultWidth = maxWidth;
         defaultHeight = maxHeight * contents.length + (contents.length - 1) * FontGap;
         const angle = Math.PI / 180 * Number(rotate);
-        const space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+        space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
         defaultWidth += space;
       }
-      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
+      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight, space];
     };
     const getClips = useClips();
     const renderWatermark = () => {
@@ -151,7 +152,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           watermarkRef.value = document.createElement("div");
         }
         const ratio = getPixelRatio();
-        const [markWidth, markHeight] = getMarkSize(ctx);
+        const [markWidth, markHeight, space] = getMarkSize(ctx);
         const drawCanvas = (drawContent) => {
           const [textClips, clipWidth] = getClips(drawContent || "", rotate, ratio, markWidth, markHeight, {
             color: color.value,
@@ -161,7 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             fontFamily: fontFamily.value,
             textAlign: textAlign.value,
             textBaseline: textBaseline.value
-          }, gapX.value, gapY.value);
+          }, gapX.value, gapY.value, space);
           appendWatermark(textClips, clipWidth);
         };
         if (image) {