ele-admin-plus 1.4.1 → 1.5.0-beta.1

package/lib/ele-virtual-table/util.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
 const elementPlus = require("element-plus");
 const common = require("../utils/common");
 const util = require("../ele-data-table/util");
@@ -254,7 +253,7 @@ function transformTableData(data, hasExpandCol, childrenName, hasChildrenName, r
     return data.map((d, i) => {
       const key = common.getValue(d, rowKey) ?? i;
       const temp = {
-        rowId: "_expand_" + key,
+        rowId: `_expand_${key}`,
         rowIndex: i,
         rowData: d,
         isExpandRow: true
@@ -327,14 +326,13 @@ function isAutoRowHeight(hasExpandCol, bodyCols, showOverflowTooltip) {
   return showOverflowTooltip == null || showOverflowTooltip === false;
 }
 function CellRender(props, ctx) {
-  var _a, _b;
   if (typeof props.render === "function" && props.params != null) {
     const node = props.render(...props.params);
     if (node != null) {
       return Array.isArray(node) ? node : [node];
     }
   }
-  return (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+  return ctx.slots.default?.();
 }
 function getSortBy(current, col) {
   const key = getColKey(col);
@@ -377,6 +375,14 @@ function getDefaultSort(defaultSort) {
     order: order === "ascending" ? elementPlus.TableV2SortOrder.ASC : elementPlus.TableV2SortOrder.DESC
   };
 }
+function getDefaultSorter(defaultSort, columns) {
+  if (!defaultSort) {
+    return;
+  }
+  const { prop, order } = defaultSort;
+  const col = common.findTree(columns, (c) => c.prop === prop);
+  return { prop, order, column: col };
+}
 function getDefaultFiltered(columns) {
   const filtered = {};
   common.eachTree(columns, (col) => {
@@ -425,9 +431,8 @@ function getIndexValue(rowIndex, index, pageIndex) {
   return index + rowIndex;
 }
 function getCellSpan(params, spanMethod) {
-  var _a;
   const span = { rowspan: 1, colspan: 1 };
-  const type = (_a = params.column) == null ? void 0 : _a.type;
+  const type = params.column?.type;
   if ((!type || !["index", "selection", "expand"].includes(type)) && typeof spanMethod === "function") {
     const result = spanMethod(params);
     if (result != null) {
@@ -505,55 +510,22 @@ function cellIsOverflow(cell) {
   const cellChild = cell.querySelector(".ele-table-cell");
   return common.contentIsEllipsis(cellChild, "horizontal");
 }
-function useAutoResize(getEl) {
-  const wrapWidth = vue.ref(0);
-  const wrapHeight = vue.ref(0);
-  const updateWrapSize = () => {
-    const el = getEl();
-    if (el) {
-      const width = Math.floor(el.clientWidth);
-      if (wrapWidth.value !== width) {
-        wrapWidth.value = width;
-      }
-      const height = Math.floor(el.clientHeight);
-      if (wrapWidth.value !== height) {
-        wrapHeight.value = height;
-      }
-    }
-  };
-  const observer = new ResizeObserver(
-    common.debounce(() => {
-      updateWrapSize();
-    }, 400)
-  );
-  const observe = () => {
-    unobserve();
-    const el = getEl();
-    if (el) {
-      observer.observe(el);
-    }
-  };
-  const unobserve = () => {
-    const el = getEl();
-    if (el) {
-      observer.unobserve(el);
-    }
-  };
-  vue.onMounted(() => {
-    updateWrapSize();
-    observe();
-  });
-  vue.onBeforeUnmount(() => {
-    observer.disconnect();
-  });
-  vue.onActivated(() => {
-    updateWrapSize();
-    observe();
-  });
-  vue.onDeactivated(() => {
-    unobserve();
-  });
-  return { wrapWidth, wrapHeight, updateWrapSize };
+function getSortCompareValue(sortMethod, a, b, prop) {
+  if (sortMethod) {
+    return sortMethod(a.rowData, b.rowData);
+  }
+  if (!prop) {
+    return a.rowIndex - b.rowIndex;
+  }
+  const aValue = common.getValue(a.rowData, prop);
+  const bValue = common.getValue(b.rowData, prop);
+  if (aValue < bValue) {
+    return -1;
+  }
+  if (aValue > bValue) {
+    return 1;
+  }
+  return 0;
 }
 exports.CellRender = CellRender;
 exports.analyseColumns = analyseColumns;
@@ -571,6 +543,7 @@ exports.getColWidth = getColWidth;
 exports.getColumnByKey = getColumnByKey;
 exports.getDefaultFiltered = getDefaultFiltered;
 exports.getDefaultSort = getDefaultSort;
+exports.getDefaultSorter = getDefaultSorter;
 exports.getIndexValue = getIndexValue;
 exports.getKeysAndList = getKeysAndList;
 exports.getNumberSize = getNumberSize;
@@ -579,6 +552,7 @@ exports.getRowByKey = getRowByKey;
 exports.getRowHeight = getRowHeight;
 exports.getSelectableFunction = getSelectableFunction;
 exports.getSortBy = getSortBy;
+exports.getSortCompareValue = getSortCompareValue;
 exports.getSortOrder = getSortOrder;
 exports.getSumValue = getSumValue;
 exports.getTableColumns = getTableColumns;
@@ -587,4 +561,3 @@ exports.getTreeProps = getTreeProps;
 exports.getUserSums = getUserSums;
 exports.isAutoRowHeight = isAutoRowHeight;
 exports.transformTableData = transformTableData;
-exports.useAutoResize = useAutoResize;

package/lib/ele-virtual-table/util.d.ts

@@ -147,6 +147,12 @@ export declare function getOrderValue(sort?: TableV2SortOrder): OrderValue | und
  * @param defaultSort 默认排序值
  */
 export declare function getDefaultSort(defaultSort?: Sorter): SortBy | undefined;
+/**
+ * 获取默认排序状态
+ * @param defaultSort 默认排序值
+ * @param columns 列配置
+ */
+export declare function getDefaultSorter(defaultSort?: Sorter, columns?: Columns): Sorter | undefined;
 /**
  * 获取默认筛选
  * @param columns 列配置
@@ -217,11 +223,10 @@ export declare function floorSize(size: number): number;
  */
 export declare function cellIsOverflow(cell: HTMLElement): boolean;
 /**
- * 表格自适应容器宽高
- * @param getEl 获取根节点的方法
+ * 获取排序对比值
+ * @param sortMethod 自定义的排序方法
+ * @param a 排序数据
+ * @param b 排序比较数据
+ * @param prop 排序字段名
  */
-export declare function useAutoResize(getEl: () => HTMLElement | null): {
-    wrapWidth: import('vue').Ref<number, number>;
-    wrapHeight: import('vue').Ref<number, number>;
-    updateWrapSize: () => void;
-};
+export declare function getSortCompareValue(sortMethod: Column['sortMethod'], a: DataItem, b: DataItem, prop?: string): number;

package/lib/ele-watermark/index.cjs

@@ -1,82 +1,18 @@
 "use strict";
 const vue = require("vue");
+const common = require("../utils/common");
+const util$1 = require("../ele-qr-code-svg/util");
+const SvgRender = require("../ele-qr-code-svg/components/svg-render");
 const util = require("./util");
 const props = require("./props");
-const _hoisted_1 = ["id", "width", "height"];
-const _hoisted_2 = ["transform"];
-const _hoisted_3 = ["href", "width", "height", "x", "y"];
-const _hoisted_4 = ["transform"];
-const _hoisted_5 = ["href", "width", "height", "x", "y"];
-const _hoisted_6 = ["id", "width", "height"];
-const _hoisted_7 = ["transform"];
-const _hoisted_8 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
-const _hoisted_9 = ["transform"];
-const _hoisted_10 = ["x", "y", "fill", "font-size", "font-weight", "font-family", "font-style"];
-const _hoisted_11 = ["fill", "transform"];
-const SIZE = 2;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleWatermark" },
   __name: "index",
   props: props.watermarkProps,
   setup(__props) {
     const props2 = __props;
-    const { observe, observeTextNode, disconnect } = util.useMutation({
-      getRoot: () => rootRef.value,
-      getEl: () => imgRef.value,
-      onDeleted: () => {
-        disconnect();
-        rootKey.value = rootKey.value + 1;
-        vue.nextTick(() => {
-          render();
-        });
-      },
-      onDalsified: () => {
-        render();
-      }
-    });
-    const svgId = vue.useId();
-    const rootKey = vue.ref(1);
-    const rootRef = vue.ref(null);
-    const imgRef = vue.ref(null);
-    const imgStyle = vue.ref(util.joinStyle({ display: "none" }));
-    const markWidth = vue.computed(() => {
-      return props2.width ?? 120;
-    });
-    const markHeight = vue.computed(() => {
-      return props2.height ?? 64;
-    });
-    const markGapX = vue.computed(() => {
-      var _a;
-      return ((_a = props2.gap) == null ? void 0 : _a[0]) ?? 100;
-    });
-    const markGapY = vue.computed(() => {
-      var _a;
-      return ((_a = props2.gap) == null ? void 0 : _a[1]) ?? 100;
-    });
-    const markOffsetX = vue.computed(() => {
-      var _a;
-      return ((_a = props2.offset) == null ? void 0 : _a[0]) ?? markGapX.value / 2;
-    });
-    const markOffsetY = vue.computed(() => {
-      var _a;
-      return ((_a = props2.offset) == null ? void 0 : _a[1]) ?? markGapY.value / 2;
-    });
-    const markFont = vue.computed(() => {
-      return {
-        color: "rgba(122, 122, 122, 0.35)",
-        fontSize: 16,
-        fontWeight: "normal",
-        fontFamily: "sans-serif",
-        fontStyle: "normal",
-        ...props2.font || {}
-      };
-    });
-    const markContents = vue.computed(() => {
-      if (typeof props2.content === "string") {
-        return [props2.content];
-      }
-      return props2.content || [];
-    });
+    const wrapperRef = vue.ref(null);
+    const imageRef = vue.ref(null);
     const markCommonStyle = vue.computed(() => {
       const position = props2.fixed ? "fixed" : "absolute";
       const width = props2.fixed ? "100vw" : "100%";
@@ -94,276 +30,129 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ...props2.customStyle || {}
       };
     });
-    const infoLog = vue.inject(util.INFO_LOG_KEY, void 0);
-    const svgStyle = vue.computed(() => util.joinStyle(markCommonStyle.value));
-    const updateStyle = (base64, imgWidth, imgHeight) => {
-      disconnect();
-      const style = { ...markCommonStyle.value };
-      if (!base64) {
-        style.display = "none !important";
-      } else {
-        style.backgroundImage = `url('${base64}') !important`;
-        style.backgroundSize = `${imgWidth}px ${imgHeight}px !important`;
-        let positionLeft = markOffsetX.value - markGapX.value / 2;
-        let positionTop = markOffsetY.value - markGapY.value / 2;
-        if (positionLeft > 0) {
-          style.left = `${positionLeft}px !important`;
-          style.width = `calc(100% - ${positionLeft}px) !important`;
-          positionLeft = 0;
-        }
-        if (positionTop > 0) {
-          style.top = `${positionTop}px !important`;
-          style.height = `calc(100% - ${positionTop}px) !important`;
-          positionTop = 0;
-        }
-        style.backgroundPosition = `${positionLeft}px ${positionTop}px !important`;
+    const isDeactivated = vue.ref(false);
+    const svgMarkOption = vue.ref();
+    const imageConfig = vue.inject(util.svgContents, null);
+    const markWrapperHeight = vue.computed(() => {
+      if (props2.wrapHeight != null && typeof props2.wrapHeight === "number") {
+        return `${props2.wrapHeight}px`;
       }
-      imgStyle.value = util.joinStyle(style);
-      vue.nextTick(() => {
-        observe();
-      });
-    };
-    const getMarkSize = (ctx) => {
-      if (props2.image || props2.width != null && props2.height != null || !ctx.measureText) {
-        return [markWidth.value, markHeight.value];
+      return props2.wrapHeight;
+    });
+    const markWrapperStyle = vue.computed(() => {
+      const styles = [];
+      if (markWrapperHeight.value) {
+        styles.push({ height: markWrapperHeight.value });
       }
-      const widths = markContents.value.map(
-        (text) => ctx.measureText(text).width
-      );
-      const textWidth = Math.ceil(Math.max(...widths));
-      const lines = markContents.value.length;
-      const { fontSize } = markFont.value;
-      const textHeight = fontSize * lines + (lines - 1) * props2.lineGap;
-      return [props2.width ?? textWidth, props2.height ?? textHeight];
-    };
-    const froined = vue.computed(() => !!(infoLog && !infoLog.froined));
-    const isDisabled = vue.computed(() => !(!props2.disabled || froined.value));
-    const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
-      const ratio = util.getPixelRatio();
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = markFont.value;
-      const mergedFontSize = fontSize * ratio;
-      ctx.fillStyle = color;
-      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
-      const froin = "el-n-d-s-p";
-      ctx.textAlign = "center";
-      ctx.textBaseline = "top";
-      ctx.translate(drawWidth / 2, 0);
-      const contents = froined.value ? [`e${observeTextNode(froin)}`.toUpperCase()] : markContents.value;
-      contents.forEach((item, index) => {
-        ctx.fillText(
-          item ?? "",
-          drawX,
-          drawY + index * (mergedFontSize + props2.lineGap * ratio)
-        );
-      });
-    };
-    const render = () => {
-      if (props2.svgRender || isDisabled.value) {
-        disconnect();
-        imgStyle.value = util.joinStyle({ display: "none" });
-        return;
+      if (props2.wrapPosition && !props2.fixed) {
+        styles.push({ position: "relative" });
       }
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
+      return styles;
+    });
+    const markId = vue.computed(() => imageConfig ? !imageConfig.id : 1);
+    const getImageStyleOption = () => {
+      if (!markDisabled.value) {
+        svgMarkOption.value = void 0;
         return;
       }
-      const rotate = props2.rotate;
-      const gapX = markGapX.value;
-      const gapY = markGapY.value;
-      if (!props2.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = markFont.value;
-        ctx.font = `${fontSize}px ${fontFamily}`;
-      }
-      const [markWidth2, markHeight2] = getMarkSize(ctx);
-      const ratio = util.getPixelRatio();
-      const canvasWidth = (gapX + markWidth2) * ratio;
-      const canvasHeight = (gapY + markHeight2) * ratio;
-      canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
-      canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
-      const drawWidth = markWidth2 * ratio;
-      const drawHeight = markHeight2 * ratio;
-      const rotateX = (drawWidth + gapX * ratio) / 2;
-      const rotateY = (drawHeight + gapY * ratio) / 2;
-      ctx.save();
-      util.rotateWatermark(ctx, rotateX, rotateY, rotate);
-      const drawX = gapX * ratio / 2;
-      const drawY = gapY * ratio / 2;
-      const alternateDrawX = drawX + canvasWidth;
-      const alternateDrawY = drawY + canvasHeight;
-      const alternateRotateX = rotateX + canvasWidth;
-      const alternateRotateY = rotateY + canvasHeight;
-      if (props2.image) {
-        const img = new Image();
-        img.onload = () => {
-          ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-          {
-            ctx.restore();
-            util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-            ctx.drawImage(
-              img,
-              alternateDrawX,
-              alternateDrawY,
-              drawWidth,
-              drawHeight
-            );
-          }
-          updateStyle(
-            canvas.toDataURL(),
-            (gapX + markWidth2) * SIZE,
-            (gapY + markHeight2) * SIZE
-          );
+      const defaultWidth = 120;
+      const defaultHeight = 64;
+      const gapX = props2.gap?.[0] ?? 100;
+      const gapY = props2.gap?.[1] ?? 100;
+      const option = {
+        rotate: props2.rotate ?? -22,
+        lineGap: props2.lineGap ?? 3,
+        font: {
+          color: "rgba(122, 122, 122, 0.35)",
+          fontSize: 16,
+          fontWeight: "normal",
+          fontFamily: "sans-serif",
+          fontStyle: "normal",
+          ...props2.font || {}
+        },
+        contents: common.normalizeStringArray(
+          props2.content,
+          [imageConfig && !imageConfig.id, "el", "NDSP"],
+          observeText
+        ),
+        image: props2.image,
+        width: props2.width,
+        height: props2.height,
+        gapX,
+        gapY,
+        commonStyle: markCommonStyle.value
+      };
+      if (props2.svgRender) {
+        svgMarkOption.value = {
+          ...option,
+          width: option.width ?? defaultWidth,
+          height: option.height ?? defaultHeight,
+          offsetX: props2.offset?.[0] ?? gapX / 2,
+          offsetY: props2.offset?.[1] ?? gapY / 2
         };
-        img.crossOrigin = "anonymous";
-        img.referrerPolicy = "no-referrer";
-        img.src = props2.image;
-      } else {
-        fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
-        {
-          ctx.restore();
-          util.rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-          fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-        }
-        updateStyle(
-          canvas.toDataURL(),
-          (gapX + markWidth2) * SIZE,
-          (gapY + markHeight2) * SIZE
-        );
+        return;
       }
+      return {
+        ...option,
+        defaultWidth,
+        defaultHeight,
+        offsetX: props2.offset?.[0] ?? 0,
+        offsetY: props2.offset?.[1] ?? 0
+      };
     };
+    const { imageId, imageStyle, observeText, updateImageStyle } = util$1.useMutation({
+      getWrapperEl: () => wrapperRef.value,
+      getImageEl: () => imageRef.value,
+      getImageStyleOption
+    });
+    const markTeleport = vue.computed(() => isDeactivated.value || !props2.fixed);
+    const markDisabled = vue.computed(() => !props2.disabled || markId.value);
     vue.watch(
       [
+        () => props2.offset,
+        () => props2.width,
+        () => props2.height,
+        () => props2.gap,
+        () => props2.font,
+        () => props2.content,
         () => props2.rotate,
         () => props2.image,
         () => props2.lineGap,
         () => props2.svgRender,
-        markWidth,
-        markHeight,
-        markGapX,
-        markGapY,
-        markOffsetX,
-        markOffsetY,
-        markFont,
-        markContents,
         markCommonStyle,
-        isDisabled
+        markDisabled
       ],
       () => {
-        render();
+        updateImageStyle();
       },
       { deep: true }
     );
-    vue.onMounted(() => {
-      render();
+    vue.onActivated(() => {
+      isDeactivated.value = false;
+    });
+    vue.onDeactivated(() => {
+      isDeactivated.value = true;
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "rootRef",
-        ref: rootRef,
-        key: rootKey.value,
-        style: vue.normalizeStyle([
-          props2.wrapHeight == null ? {} : { height: props2.wrapHeight },
-          !_ctx.wrapPosition || _ctx.fixed ? {} : { position: "relative" }
-        ])
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        key: vue.unref(imageId),
+        style: vue.normalizeStyle(markWrapperStyle.value)
       }, [
         vue.renderSlot(_ctx.$slots, "default"),
-        !isDisabled.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.svgRender ? (vue.openBlock(), vue.createElementBlock("svg", {
-            key: 0,
-            style: vue.normalizeStyle(svgStyle.value)
-          }, [
-            vue.createElementVNode("defs", null, [
-              _ctx.image ? (vue.openBlock(), vue.createElementBlock("pattern", {
-                key: 0,
-                id: `imgPattern-${vue.unref(svgId)}`,
-                patternUnits: "userSpaceOnUse",
-                width: (markWidth.value + markGapX.value) * SIZE,
-                height: (markHeight.value + markGapY.value) * SIZE
-              }, [
-                vue.createElementVNode("g", {
-                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
-                }, [
-                  vue.createElementVNode("image", {
-                    href: _ctx.image,
-                    width: markWidth.value,
-                    height: markHeight.value,
-                    x: markGapX.value / 2,
-                    y: markGapY.value / 2
-                  }, null, 8, _hoisted_3)
-                ], 8, _hoisted_2),
-                (vue.openBlock(), vue.createElementBlock("g", {
-                  key: 0,
-                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
-                }, [
-                  vue.createElementVNode("image", {
-                    href: _ctx.image,
-                    width: markWidth.value,
-                    height: markHeight.value,
-                    x: markGapX.value / 2 + markWidth.value + markGapX.value,
-                    y: markGapY.value / 2 + markHeight.value + markGapY.value
-                  }, null, 8, _hoisted_5)
-                ], 8, _hoisted_4))
-              ], 8, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("pattern", {
-                key: 1,
-                id: `textPattern-${vue.unref(svgId)}`,
-                patternUnits: "userSpaceOnUse",
-                width: (markWidth.value + markGapX.value) * SIZE,
-                height: (markHeight.value + markGapY.value) * SIZE
-              }, [
-                vue.createElementVNode("g", {
-                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2}, ${(markHeight.value + markGapY.value) / 2})`
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(markContents.value, (text, index) => {
-                    return vue.openBlock(), vue.createElementBlock("text", {
-                      key: index,
-                      x: (markWidth.value + markGapX.value) / 2,
-                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap),
-                      fill: markFont.value.color,
-                      "font-size": markFont.value.fontSize,
-                      "font-weight": markFont.value.fontWeight,
-                      "font-family": markFont.value.fontFamily,
-                      "font-style": markFont.value.fontStyle,
-                      "text-anchor": "middle",
-                      "alignment-baseline": "hanging",
-                      "vector-effect": "non-scaling-stroke"
-                    }, vue.toDisplayString(text), 9, _hoisted_8);
-                  }), 128))
-                ], 8, _hoisted_7),
-                (vue.openBlock(), vue.createElementBlock("g", {
-                  key: 0,
-                  transform: `rotate(${_ctx.rotate}, ${(markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value}, ${(markHeight.value + markGapY.value) / 2 + markHeight.value + markGapY.value})`
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(markContents.value, (text, index) => {
-                    return vue.openBlock(), vue.createElementBlock("text", {
-                      key: index,
-                      x: (markWidth.value + markGapX.value) / 2 + markWidth.value + markGapX.value,
-                      y: markGapY.value / 2 + index * (markFont.value.fontSize + _ctx.lineGap) + markHeight.value + markGapY.value,
-                      fill: markFont.value.color,
-                      "font-size": markFont.value.fontSize,
-                      "font-weight": markFont.value.fontWeight,
-                      "font-family": markFont.value.fontFamily,
-                      "font-style": markFont.value.fontStyle,
-                      "text-anchor": "middle",
-                      "alignment-baseline": "hanging",
-                      "vector-effect": "non-scaling-stroke"
-                    }, vue.toDisplayString(text), 9, _hoisted_10);
-                  }), 128))
-                ], 8, _hoisted_9))
-              ], 8, _hoisted_6))
-            ]),
-            vue.createElementVNode("rect", {
-              width: "100%",
-              height: "100%",
-              fill: `url(#${_ctx.image ? "img" : "text"}Pattern-${vue.unref(svgId)})`,
-              transform: `translate(${markOffsetX.value - markGapX.value / 2}, ${markOffsetY.value - markGapY.value / 2})`
-            }, null, 8, _hoisted_11)
-          ], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
-            key: 1,
-            ref_key: "imgRef",
-            ref: imgRef,
-            style: vue.normalizeStyle(imgStyle.value)
-          }, null, 4))
-        ], 64)) : vue.createCommentVNode("", true)
+        !_ctx.svgRender && markDisabled.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "imageRef",
+          ref: imageRef,
+          style: vue.normalizeStyle(vue.unref(imageStyle))
+        }, null, 4)) : svgMarkOption.value && markDisabled.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          key: 1,
+          to: "body",
+          disabled: markTeleport.value
+        }, [
+          vue.createVNode(SvgRender, vue.normalizeProps(vue.guardReactiveProps(svgMarkOption.value)), null, 16)
+        ], 8, ["disabled"])) : vue.createCommentVNode("", true)
       ], 4);
     };
   }