@element-plus/nightly 0.0.20241230 → 0.0.20241231

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

@@ -1,178 +1,33 @@
-import { defineComponent, ref, computed, openBlock, createBlock, TransitionGroup, normalizeClass, unref, withCtx, createElementBlock, Fragment, renderList, withKeys, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode, toDisplayString, normalizeStyle } from 'vue';
-import { ElIcon } from '../../icon/index.mjs';
-import { Document, CircleCheck, Check, Close, ZoomIn, Delete } from '@element-plus/icons-vue';
-import { ElProgress } from '../../progress/index.mjs';
-import { uploadListProps, uploadListEmits } from './upload-list.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { uploadListTypes } from './upload.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
+import { NOOP } from '@vue/shared';
 
-const __default__ = defineComponent({
-  name: "ElUploadList"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: uploadListProps,
-  emits: uploadListEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const { t } = useLocale();
-    const nsUpload = useNamespace("upload");
-    const nsIcon = useNamespace("icon");
-    const nsList = useNamespace("list");
-    const disabled = useFormDisabled();
-    const focusing = ref(false);
-    const containerKls = computed(() => [
-      nsUpload.b("list"),
-      nsUpload.bm("list", props.listType),
-      nsUpload.is("disabled", props.disabled)
-    ]);
-    const handleRemove = (file) => {
-      emit("remove", file);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(TransitionGroup, {
-        tag: "ul",
-        class: normalizeClass(unref(containerKls)),
-        name: unref(nsList).b()
-      }, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.files, (file, index) => {
-            return openBlock(), createElementBlock("li", {
-              key: file.uid || file.name,
-              class: normalizeClass([
-                unref(nsUpload).be("list", "item"),
-                unref(nsUpload).is(file.status),
-                { focusing: focusing.value }
-              ]),
-              tabindex: "0",
-              onKeydown: withKeys(($event) => !unref(disabled) && handleRemove(file), ["delete"]),
-              onFocus: ($event) => focusing.value = true,
-              onBlur: ($event) => focusing.value = false,
-              onClick: ($event) => focusing.value = false
-            }, [
-              renderSlot(_ctx.$slots, "default", {
-                file,
-                index
-              }, () => [
-                _ctx.listType === "picture" || file.status !== "uploading" && _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("img", {
-                  key: 0,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-thumbnail")),
-                  src: file.url,
-                  crossorigin: _ctx.crossorigin,
-                  alt: ""
-                }, null, 10, ["src", "crossorigin"])) : createCommentVNode("v-if", true),
-                file.status === "uploading" || _ctx.listType !== "picture-card" ? (openBlock(), createElementBlock("div", {
-                  key: 1,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-info"))
-                }, [
-                  createElementVNode("a", {
-                    class: normalizeClass(unref(nsUpload).be("list", "item-name")),
-                    onClick: withModifiers(($event) => _ctx.handlePreview(file), ["prevent"])
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("document"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Document))
-                      ]),
-                      _: 1
-                    }, 8, ["class"]),
-                    createElementVNode("span", {
-                      class: normalizeClass(unref(nsUpload).be("list", "item-file-name")),
-                      title: file.name
-                    }, toDisplayString(file.name), 11, ["title"])
-                  ], 10, ["onClick"]),
-                  file.status === "uploading" ? (openBlock(), createBlock(unref(ElProgress), {
-                    key: 0,
-                    type: _ctx.listType === "picture-card" ? "circle" : "line",
-                    "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
-                    percentage: Number(file.percentage),
-                    style: normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
-                  }, null, 8, ["type", "stroke-width", "percentage", "style"])) : createCommentVNode("v-if", true)
-                ], 2)) : createCommentVNode("v-if", true),
-                createElementVNode("label", {
-                  class: normalizeClass(unref(nsUpload).be("list", "item-status-label"))
-                }, [
-                  _ctx.listType === "text" ? (openBlock(), createBlock(unref(ElIcon), {
-                    key: 0,
-                    class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("circle-check")])
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CircleCheck))
-                    ]),
-                    _: 1
-                  }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(unref(ElIcon), {
-                    key: 1,
-                    class: normalizeClass([unref(nsIcon).m("upload-success"), unref(nsIcon).m("check")])
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(Check))
-                    ]),
-                    _: 1
-                  }, 8, ["class"])) : createCommentVNode("v-if", true)
-                ], 2),
-                !unref(disabled) ? (openBlock(), createBlock(unref(ElIcon), {
-                  key: 2,
-                  class: normalizeClass(unref(nsIcon).m("close")),
-                  onClick: ($event) => handleRemove(file)
-                }, {
-                  default: withCtx(() => [
-                    createVNode(unref(Close))
-                  ]),
-                  _: 2
-                }, 1032, ["class", "onClick"])) : createCommentVNode("v-if", true),
-                createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
-                createCommentVNode(" This is a bug which needs to be fixed "),
-                createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
-                !unref(disabled) ? (openBlock(), createElementBlock("i", {
-                  key: 3,
-                  class: normalizeClass(unref(nsIcon).m("close-tip"))
-                }, toDisplayString(unref(t)("el.upload.deleteTip")), 3)) : createCommentVNode("v-if", true),
-                _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("span", {
-                  key: 4,
-                  class: normalizeClass(unref(nsUpload).be("list", "item-actions"))
-                }, [
-                  createElementVNode("span", {
-                    class: normalizeClass(unref(nsUpload).be("list", "item-preview")),
-                    onClick: ($event) => _ctx.handlePreview(file)
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("zoom-in"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(ZoomIn))
-                      ]),
-                      _: 1
-                    }, 8, ["class"])
-                  ], 10, ["onClick"]),
-                  !unref(disabled) ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: normalizeClass(unref(nsUpload).be("list", "item-delete")),
-                    onClick: ($event) => handleRemove(file)
-                  }, [
-                    createVNode(unref(ElIcon), {
-                      class: normalizeClass(unref(nsIcon).m("delete"))
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Delete))
-                      ]),
-                      _: 1
-                    }, 8, ["class"])
-                  ], 10, ["onClick"])) : createCommentVNode("v-if", true)
-                ], 2)) : createCommentVNode("v-if", true)
-              ])
-            ], 42, ["onKeydown", "onFocus", "onBlur", "onClick"]);
-          }), 128)),
-          renderSlot(_ctx.$slots, "append")
-        ]),
-        _: 3
-      }, 8, ["class", "name"]);
-    };
+const uploadListProps = buildProps({
+  files: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  handlePreview: {
+    type: definePropType(Function),
+    default: NOOP
+  },
+  listType: {
+    type: String,
+    values: uploadListTypes,
+    default: "text"
+  },
+  crossorigin: {
+    type: definePropType(String)
   }
 });
-var UploadList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "upload-list.vue"]]);
+const uploadListEmits = {
+  remove: (file) => !!file
+};
 
-export { UploadList as default };
+export { uploadListEmits, uploadListProps };
 //# sourceMappingURL=upload-list2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"upload-list2.mjs","sources":["../../../../../../packages/components/upload/src/upload-list.vue"],"sourcesContent":["<template>\n  <transition-group tag=\"ul\" :class=\"containerKls\" :name=\"nsList.b()\">\n    <li\n      v-for=\"(file, index) in files\"\n      :key=\"file.uid || file.name\"\n      :class=\"[\n        nsUpload.be('list', 'item'),\n        nsUpload.is(file.status),\n        { focusing },\n      ]\"\n      tabindex=\"0\"\n      @keydown.delete=\"!disabled && handleRemove(file)\"\n      @focus=\"focusing = true\"\n      @blur=\"focusing = false\"\n      @click=\"focusing = false\"\n    >\n      <slot :file=\"file\" :index=\"index\">\n        <img\n          v-if=\"\n            listType === 'picture' ||\n            (file.status !== 'uploading' && listType === 'picture-card')\n          \"\n          :class=\"nsUpload.be('list', 'item-thumbnail')\"\n          :src=\"file.url\"\n          :crossorigin=\"crossorigin\"\n          alt=\"\"\n        />\n        <div\n          v-if=\"file.status === 'uploading' || listType !== 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-info')\"\n        >\n          <a\n            :class=\"nsUpload.be('list', 'item-name')\"\n            @click.prevent=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('document')\">\n              <Document />\n            </el-icon>\n            <span\n              :class=\"nsUpload.be('list', 'item-file-name')\"\n              :title=\"file.name\"\n            >\n              {{ file.name }}\n            </span>\n          </a>\n          <el-progress\n            v-if=\"file.status === 'uploading'\"\n            :type=\"listType === 'picture-card' ? 'circle' : 'line'\"\n            :stroke-width=\"listType === 'picture-card' ? 6 : 2\"\n            :percentage=\"Number(file.percentage)\"\n            :style=\"listType === 'picture-card' ? '' : 'margin-top: 0.5rem'\"\n          />\n        </div>\n\n        <label :class=\"nsUpload.be('list', 'item-status-label')\">\n          <el-icon\n            v-if=\"listType === 'text'\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('circle-check')]\"\n          >\n            <circle-check />\n          </el-icon>\n          <el-icon\n            v-else-if=\"['picture-card', 'picture'].includes(listType)\"\n            :class=\"[nsIcon.m('upload-success'), nsIcon.m('check')]\"\n          >\n            <Check />\n          </el-icon>\n        </label>\n        <el-icon\n          v-if=\"!disabled\"\n          :class=\"nsIcon.m('close')\"\n          @click=\"handleRemove(file)\"\n        >\n          <Close />\n        </el-icon>\n        <!-- Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn-->\n        <!-- This is a bug which needs to be fixed -->\n        <!-- TODO: Fix the incorrect navigation interaction -->\n        <i v-if=\"!disabled\" :class=\"nsIcon.m('close-tip')\">{{\n          t('el.upload.deleteTip')\n        }}</i>\n        <span\n          v-if=\"listType === 'picture-card'\"\n          :class=\"nsUpload.be('list', 'item-actions')\"\n        >\n          <span\n            :class=\"nsUpload.be('list', 'item-preview')\"\n            @click=\"handlePreview(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('zoom-in')\"><zoom-in /></el-icon>\n          </span>\n          <span\n            v-if=\"!disabled\"\n            :class=\"nsUpload.be('list', 'item-delete')\"\n            @click=\"handleRemove(file)\"\n          >\n            <el-icon :class=\"nsIcon.m('delete')\">\n              <Delete />\n            </el-icon>\n          </span>\n        </span>\n      </slot>\n    </li>\n    <slot name=\"append\" />\n  </transition-group>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  Check,\n  CircleCheck,\n  Close,\n  Delete,\n  Document,\n  ZoomIn,\n} from '@element-plus/icons-vue'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElProgress from '@element-plus/components/progress'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport { uploadListEmits, uploadListProps } from './upload-list'\nimport type { UploadFile } from './upload'\n\ndefineOptions({\n  name: 'ElUploadList',\n})\n\nconst props = defineProps(uploadListProps)\nconst emit = defineEmits(uploadListEmits)\n\nconst { t } = useLocale()\nconst nsUpload = useNamespace('upload')\nconst nsIcon = useNamespace('icon')\nconst nsList = useNamespace('list')\nconst disabled = useFormDisabled()\n\nconst focusing = ref(false)\n\nconst containerKls = computed(() => [\n  nsUpload.b('list'),\n  nsUpload.bm('list', props.listType),\n  nsUpload.is('disabled', props.disabled),\n])\n\nconst handleRemove = (file: UploadFile) => {\n  emit('remove', file)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;mCA4Hc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,EAAE,CAAE,EAAA,GAAI,SAAU,EAAA,CAAA;AACxB,IAAM,MAAA,QAAA,GAAW,aAAa,QAAQ,CAAA,CAAA;AACtC,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA,CAAA;AAClC,IAAA,MAAM,WAAW,eAAgB,EAAA,CAAA;AAEjC,IAAM,MAAA,QAAA,GAAW,IAAI,KAAK,CAAA,CAAA;AAE1B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAAA,MAClC,QAAA,CAAS,EAAE,MAAM,CAAA;AAAA,MACjB,QAAS,CAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,MAClC,QAAS,CAAA,EAAA,CAAG,UAAY,EAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,KACvC,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,IAAqB,KAAA;AACzC,MAAA,IAAA,CAAK,UAAU,IAAI,CAAA,CAAA;AAAA,KACrB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"upload-list2.mjs","sources":["../../../../../../packages/components/upload/src/upload-list.ts"],"sourcesContent":["import { NOOP, buildProps, definePropType, mutable } from '@element-plus/utils'\nimport { uploadListTypes } from './upload'\nimport type { ExtractPropTypes } from 'vue'\nimport type { UploadFile, UploadFiles, UploadHooks } from './upload'\nimport type UploadList from './upload-list.vue'\n\nexport const uploadListProps = buildProps({\n  files: {\n    type: definePropType<UploadFiles>(Array),\n    default: () => mutable([]),\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  handlePreview: {\n    type: definePropType<UploadHooks['onPreview']>(Function),\n    default: NOOP,\n  },\n  listType: {\n    type: String,\n    values: uploadListTypes,\n    default: 'text',\n  },\n  /**\n   * @description set HTML attribute: crossorigin.\n   */\n  crossorigin: {\n    type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\n  },\n} as const)\n\nexport type UploadListProps = ExtractPropTypes<typeof uploadListProps>\nexport const uploadListEmits = {\n  remove: (file: UploadFile) => !!file,\n}\nexport type UploadListEmits = typeof uploadListEmits\nexport type UploadListInstance = InstanceType<typeof UploadList>\n"],"names":[],"mappings":";;;;;AAEY,MAAC,eAAe,GAAG,UAAU,CAAC;AAC1C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,eAAe;AAC3B,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,eAAe,GAAG;AAC/B,EAAE,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI;AAC1B;;;;"}

package/es/components/upload/src/upload2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, shallowRef, computed, onBeforeUnmount, provide, toRef, openBlock, createElementBlock, unref, createBlock, createSlots, withCtx, createVNode, mergeProps, renderSlot, createCommentVNode } from 'vue';
 import { uploadContextKey } from './constants.mjs';
-import UploadList from './upload-list2.mjs';
+import UploadList from './upload-list.mjs';
 import UploadContent from './upload-content2.mjs';
 import { useHandlers } from './use-handlers.mjs';
 import { uploadProps } from './upload.mjs';

package/es/components/upload/src/use-handlers.mjs

@@ -22,7 +22,7 @@ const useHandlers = (props, uploadRef) => {
     uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
   }
   function removeFile(file) {
-    uploadFiles.value = uploadFiles.value.filter((uploadFile) => uploadFile !== file);
+    uploadFiles.value = uploadFiles.value.filter((uploadFile) => uploadFile.uid !== file.uid);
   }
   const handleError = (err, rawFile) => {
     const file = getFile(rawFile);

package/es/components/upload/src/use-handlers.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-handlers.mjs","sources":["../../../../../../packages/components/upload/src/use-handlers.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useVModel } from '@vueuse/core'\nimport { debugWarn, throwError } from '@element-plus/utils'\nimport { genFileId } from './upload'\nimport type { ShallowRef } from 'vue'\nimport type {\n  UploadContentInstance,\n  UploadContentProps,\n} from './upload-content'\nimport type {\n  UploadFile,\n  UploadFiles,\n  UploadProps,\n  UploadRawFile,\n  UploadStatus,\n} from './upload'\n\nconst SCOPE = 'ElUpload'\n\nconst revokeFileObjectURL = (file: UploadFile) => {\n  if (file.url?.startsWith('blob:')) {\n    URL.revokeObjectURL(file.url)\n  }\n}\n\nexport const useHandlers = (\n  props: UploadProps,\n  uploadRef: ShallowRef<UploadContentInstance | undefined>\n) => {\n  const uploadFiles = useVModel(\n    props as Omit<UploadProps, 'fileList'> & { fileList: UploadFiles },\n    'fileList',\n    undefined,\n    { passive: true }\n  )\n\n  const getFile = (rawFile: UploadRawFile) =>\n    uploadFiles.value.find((file) => file.uid === rawFile.uid)\n\n  function abort(file: UploadFile) {\n    uploadRef.value?.abort(file)\n  }\n\n  function clearFiles(\n    /** @default ['ready', 'uploading', 'success', 'fail'] */\n    states: UploadStatus[] = ['ready', 'uploading', 'success', 'fail']\n  ) {\n    uploadFiles.value = uploadFiles.value.filter(\n      (row) => !states.includes(row.status)\n    )\n  }\n\n  function removeFile(file: UploadFile) {\n    uploadFiles.value = uploadFiles.value.filter(\n      (uploadFile) => uploadFile !== file\n    )\n  }\n\n  const handleError: UploadContentProps['onError'] = (err, rawFile) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    console.error(err)\n    file.status = 'fail'\n    removeFile(file)\n    props.onError(err, file, uploadFiles.value)\n    props.onChange(file, uploadFiles.value)\n  }\n\n  const handleProgress: UploadContentProps['onProgress'] = (evt, rawFile) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    props.onProgress(evt, file, uploadFiles.value)\n    file.status = 'uploading'\n    file.percentage = Math.round(evt.percent)\n  }\n\n  const handleSuccess: UploadContentProps['onSuccess'] = (\n    response,\n    rawFile\n  ) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    file.status = 'success'\n    file.response = response\n    props.onSuccess(response, file, uploadFiles.value)\n    props.onChange(file, uploadFiles.value)\n  }\n\n  const handleStart: UploadContentProps['onStart'] = (file) => {\n    if (isNil(file.uid)) file.uid = genFileId()\n    const uploadFile: UploadFile = {\n      name: file.name,\n      percentage: 0,\n      status: 'ready',\n      size: file.size,\n      raw: file,\n      uid: file.uid,\n    }\n    if (props.listType === 'picture-card' || props.listType === 'picture') {\n      try {\n        uploadFile.url = URL.createObjectURL(file)\n      } catch (err: unknown) {\n        debugWarn(SCOPE, (err as Error).message)\n        props.onError(err as Error, uploadFile, uploadFiles.value)\n      }\n    }\n    uploadFiles.value = [...uploadFiles.value, uploadFile]\n    props.onChange(uploadFile, uploadFiles.value)\n  }\n\n  const handleRemove: UploadContentProps['onRemove'] = async (\n    file\n  ): Promise<void> => {\n    const uploadFile = file instanceof File ? getFile(file) : file\n    if (!uploadFile) throwError(SCOPE, 'file to be removed not found')\n\n    const doRemove = (file: UploadFile) => {\n      abort(file)\n      removeFile(file)\n      props.onRemove(file, uploadFiles.value)\n      revokeFileObjectURL(file)\n    }\n\n    if (props.beforeRemove) {\n      const before = await props.beforeRemove(uploadFile, uploadFiles.value)\n      if (before !== false) doRemove(uploadFile)\n    } else {\n      doRemove(uploadFile)\n    }\n  }\n\n  function submit() {\n    uploadFiles.value\n      .filter(({ status }) => status === 'ready')\n      .forEach(({ raw }) => raw && uploadRef.value?.upload(raw))\n  }\n\n  watch(\n    () => props.listType,\n    (val) => {\n      if (val !== 'picture-card' && val !== 'picture') {\n        return\n      }\n\n      uploadFiles.value = uploadFiles.value.map((file) => {\n        const { raw, url } = file\n        if (!url && raw) {\n          try {\n            file.url = URL.createObjectURL(raw)\n          } catch (err: unknown) {\n            props.onError(err as Error, file, uploadFiles.value)\n          }\n        }\n        return file\n      })\n    }\n  )\n\n  watch(\n    uploadFiles,\n    (files) => {\n      for (const file of files) {\n        file.uid ||= genFileId()\n        file.status ||= 'success'\n      }\n    },\n    { immediate: true, deep: true }\n  )\n\n  return {\n    /** @description two-way binding ref from props `fileList` */\n    uploadFiles,\n    abort,\n    clearFiles,\n    handleError,\n    handleProgress,\n    handleStart,\n    handleSuccess,\n    handleRemove,\n    submit,\n    revokeFileObjectURL,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-handlers.mjs","sources":["../../../../../../packages/components/upload/src/use-handlers.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { useVModel } from '@vueuse/core'\nimport { debugWarn, throwError } from '@element-plus/utils'\nimport { genFileId } from './upload'\nimport type { ShallowRef } from 'vue'\nimport type {\n  UploadContentInstance,\n  UploadContentProps,\n} from './upload-content'\nimport type {\n  UploadFile,\n  UploadFiles,\n  UploadProps,\n  UploadRawFile,\n  UploadStatus,\n} from './upload'\n\nconst SCOPE = 'ElUpload'\n\nconst revokeFileObjectURL = (file: UploadFile) => {\n  if (file.url?.startsWith('blob:')) {\n    URL.revokeObjectURL(file.url)\n  }\n}\n\nexport const useHandlers = (\n  props: UploadProps,\n  uploadRef: ShallowRef<UploadContentInstance | undefined>\n) => {\n  const uploadFiles = useVModel(\n    props as Omit<UploadProps, 'fileList'> & { fileList: UploadFiles },\n    'fileList',\n    undefined,\n    { passive: true }\n  )\n\n  const getFile = (rawFile: UploadRawFile) =>\n    uploadFiles.value.find((file) => file.uid === rawFile.uid)\n\n  function abort(file: UploadFile) {\n    uploadRef.value?.abort(file)\n  }\n\n  function clearFiles(\n    /** @default ['ready', 'uploading', 'success', 'fail'] */\n    states: UploadStatus[] = ['ready', 'uploading', 'success', 'fail']\n  ) {\n    uploadFiles.value = uploadFiles.value.filter(\n      (row) => !states.includes(row.status)\n    )\n  }\n\n  function removeFile(file: UploadFile) {\n    uploadFiles.value = uploadFiles.value.filter(\n      (uploadFile) => uploadFile.uid !== file.uid\n    )\n  }\n\n  const handleError: UploadContentProps['onError'] = (err, rawFile) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    console.error(err)\n    file.status = 'fail'\n    removeFile(file)\n    props.onError(err, file, uploadFiles.value)\n    props.onChange(file, uploadFiles.value)\n  }\n\n  const handleProgress: UploadContentProps['onProgress'] = (evt, rawFile) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    props.onProgress(evt, file, uploadFiles.value)\n    file.status = 'uploading'\n    file.percentage = Math.round(evt.percent)\n  }\n\n  const handleSuccess: UploadContentProps['onSuccess'] = (\n    response,\n    rawFile\n  ) => {\n    const file = getFile(rawFile)\n    if (!file) return\n\n    file.status = 'success'\n    file.response = response\n    props.onSuccess(response, file, uploadFiles.value)\n    props.onChange(file, uploadFiles.value)\n  }\n\n  const handleStart: UploadContentProps['onStart'] = (file) => {\n    if (isNil(file.uid)) file.uid = genFileId()\n    const uploadFile: UploadFile = {\n      name: file.name,\n      percentage: 0,\n      status: 'ready',\n      size: file.size,\n      raw: file,\n      uid: file.uid,\n    }\n    if (props.listType === 'picture-card' || props.listType === 'picture') {\n      try {\n        uploadFile.url = URL.createObjectURL(file)\n      } catch (err: unknown) {\n        debugWarn(SCOPE, (err as Error).message)\n        props.onError(err as Error, uploadFile, uploadFiles.value)\n      }\n    }\n    uploadFiles.value = [...uploadFiles.value, uploadFile]\n    props.onChange(uploadFile, uploadFiles.value)\n  }\n\n  const handleRemove: UploadContentProps['onRemove'] = async (\n    file\n  ): Promise<void> => {\n    const uploadFile = file instanceof File ? getFile(file) : file\n    if (!uploadFile) throwError(SCOPE, 'file to be removed not found')\n\n    const doRemove = (file: UploadFile) => {\n      abort(file)\n      removeFile(file)\n      props.onRemove(file, uploadFiles.value)\n      revokeFileObjectURL(file)\n    }\n\n    if (props.beforeRemove) {\n      const before = await props.beforeRemove(uploadFile, uploadFiles.value)\n      if (before !== false) doRemove(uploadFile)\n    } else {\n      doRemove(uploadFile)\n    }\n  }\n\n  function submit() {\n    uploadFiles.value\n      .filter(({ status }) => status === 'ready')\n      .forEach(({ raw }) => raw && uploadRef.value?.upload(raw))\n  }\n\n  watch(\n    () => props.listType,\n    (val) => {\n      if (val !== 'picture-card' && val !== 'picture') {\n        return\n      }\n\n      uploadFiles.value = uploadFiles.value.map((file) => {\n        const { raw, url } = file\n        if (!url && raw) {\n          try {\n            file.url = URL.createObjectURL(raw)\n          } catch (err: unknown) {\n            props.onError(err as Error, file, uploadFiles.value)\n          }\n        }\n        return file\n      })\n    }\n  )\n\n  watch(\n    uploadFiles,\n    (files) => {\n      for (const file of files) {\n        file.uid ||= genFileId()\n        file.status ||= 'success'\n      }\n    },\n    { immediate: true, deep: true }\n  )\n\n  return {\n    /** @description two-way binding ref from props `fileList` */\n    uploadFiles,\n    abort,\n    clearFiles,\n    handleError,\n    handleProgress,\n    handleStart,\n    handleSuccess,\n    handleRemove,\n    submit,\n    revokeFileObjectURL,\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/components/watermark/index.mjs

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

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

@@ -1,32 +1,215 @@
-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 './watermark2.mjs';
+import { reRendering, getStyleStr, getPixelRatio } from './utils.mjs';
+import useClips, { FontGap } from './useClips.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { isArray } from '@vue/shared';
 
-const watermarkProps = buildProps({
-  zIndex: {
-    type: Number,
-    default: 9
-  },
-  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)
+const __default__ = defineComponent({
+  name: "ElWatermark"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: watermarkProps,
+  setup(__props) {
+    const props = __props;
+    const style = {
+      position: "relative"
+    };
+    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;
+      const image = props.image;
+      const content = props.content;
+      const width = props.width;
+      const height = props.height;
+      if (!image && ctx.measureText) {
+        ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`;
+        const contents = isArray(content) ? content : [content];
+        const sizes = contents.map((item) => {
+          const metrics = ctx.measureText(item);
+          return [
+            metrics.width,
+            metrics.fontBoundingBoxAscent !== void 0 ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
+          ];
+        });
+        defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])));
+        defaultHeight = Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + (contents.length - 1) * FontGap;
+      }
+      return [width != null ? width : defaultWidth, height != null ? height : defaultHeight];
+    };
+    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] = 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,
+            textAlign: textAlign.value,
+            textBaseline: textBaseline.value
+          }, gapX.value, gapY.value);
+          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", "watermark.vue"]]);
 
-export { watermarkProps };
+export { Watermark as default };
 //# 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.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  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 WatermarkInstance = InstanceType<typeof Watermark>\n"],"names":[],"mappings":";;AACY,MAAC,cAAc,GAAG,UAAU,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,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AACzC,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC;;;;"}
+{"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 } from '@element-plus/utils'\nimport { watermarkProps } from './watermark'\nimport { getPixelRatio, getStyleStr, reRendering } from './utils'\nimport useClips, { FontGap } from './useClips'\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 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  const image = props.image\n  const content = props.content\n  const width = props.width\n  const height = props.height\n  if (!image && ctx.measureText) {\n    ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`\n    const contents = isArray(content) ? content : [content]\n    const sizes = contents.map((item) => {\n      const metrics = ctx.measureText(item!)\n\n      return [\n        metrics.width,\n        // Using `actualBoundingBoxAscent` to be compatible with lower version browsers (eg: Firefox < 116)\n        metrics.fontBoundingBoxAscent !== undefined\n          ? metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent\n          : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n      ]\n    })\n    defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0])))\n    defaultHeight =\n      Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length +\n      (contents.length - 1) * FontGap\n  }\n  return [width ?? defaultWidth, height ?? defaultHeight] 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] = 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          textAlign: textAlign.value,\n          textBaseline: textBaseline.value,\n        },\n        gapX.value,\n        gapY.value\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":[],"mappings":"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"}