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

package/es/ele-virtual-table/util.js

@@ -1,6 +1,5 @@
-import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from "vue";
 import { TableV2SortOrder } from "element-plus";
-import { omit, getValue, mapTree, findTree, eachTree, contentIsEllipsis, debounce } from "../utils/common";
+import { omit, getValue, mapTree, findTree, eachTree, contentIsEllipsis } from "../utils/common";
 import { getColFixedNumber } from "../ele-data-table/util";
 function getRowHeight(size, rowHeight) {
   if (rowHeight != null && rowHeight > 0) {
@@ -252,7 +251,7 @@ function transformTableData(data, hasExpandCol, childrenName, hasChildrenName, r
     return data.map((d, i) => {
       const key = getValue(d, rowKey) ?? i;
       const temp = {
-        rowId: "_expand_" + key,
+        rowId: `_expand_${key}`,
         rowIndex: i,
         rowData: d,
         isExpandRow: true
@@ -325,14 +324,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);
@@ -375,6 +373,14 @@ function getDefaultSort(defaultSort) {
     order: order === "ascending" ? TableV2SortOrder.ASC : TableV2SortOrder.DESC
   };
 }
+function getDefaultSorter(defaultSort, columns) {
+  if (!defaultSort) {
+    return;
+  }
+  const { prop, order } = defaultSort;
+  const col = findTree(columns, (c) => c.prop === prop);
+  return { prop, order, column: col };
+}
 function getDefaultFiltered(columns) {
   const filtered = {};
   eachTree(columns, (col) => {
@@ -423,9 +429,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) {
@@ -503,55 +508,22 @@ function cellIsOverflow(cell) {
   const cellChild = cell.querySelector(".ele-table-cell");
   return contentIsEllipsis(cellChild, "horizontal");
 }
-function useAutoResize(getEl) {
-  const wrapWidth = ref(0);
-  const wrapHeight = 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(
-    debounce(() => {
-      updateWrapSize();
-    }, 400)
-  );
-  const observe = () => {
-    unobserve();
-    const el = getEl();
-    if (el) {
-      observer.observe(el);
-    }
-  };
-  const unobserve = () => {
-    const el = getEl();
-    if (el) {
-      observer.unobserve(el);
-    }
-  };
-  onMounted(() => {
-    updateWrapSize();
-    observe();
-  });
-  onBeforeUnmount(() => {
-    observer.disconnect();
-  });
-  onActivated(() => {
-    updateWrapSize();
-    observe();
-  });
-  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 = getValue(a.rowData, prop);
+  const bValue = getValue(b.rowData, prop);
+  if (aValue < bValue) {
+    return -1;
+  }
+  if (aValue > bValue) {
+    return 1;
+  }
+  return 0;
 }
 export {
   CellRender,
@@ -570,6 +542,7 @@ export {
   getColumnByKey,
   getDefaultFiltered,
   getDefaultSort,
+  getDefaultSorter,
   getIndexValue,
   getKeysAndList,
   getNumberSize,
@@ -578,6 +551,7 @@ export {
   getRowHeight,
   getSelectableFunction,
   getSortBy,
+  getSortCompareValue,
   getSortOrder,
   getSumValue,
   getTableColumns,
@@ -585,6 +559,5 @@ export {
   getTreeProps,
   getUserSums,
   isAutoRowHeight,
-  transformTableData,
-  useAutoResize
+  transformTableData
 };

package/es/ele-watermark/index.d.ts

@@ -1,4 +1,5 @@
 import { StyleValue } from '../ele-app/types';
+import { WatermarkFont } from './types';
 
 declare function __VLS_template(): {
     default?(_: {}): any;
@@ -10,20 +11,19 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     zIndex: NumberConstructor;
     image: StringConstructor;
     content: import('vue').PropType<string | string[]>;
-    font: import('vue').PropType<import('./types').WatermarkFont>;
+    font: import('vue').PropType<WatermarkFont>;
     gap: import('vue').PropType<import('./types').WatermarkGap>;
     offset: import('vue').PropType<import('./types').WatermarkOffset>;
-    lineGap: {
-        type: NumberConstructor;
-        default: number;
-    };
+    lineGap: NumberConstructor;
     customStyle: import('vue').PropType<Exclude<StyleValue, string>>;
+    svgRender: BooleanConstructor;
+    disabled: BooleanConstructor;
     fixed: BooleanConstructor;
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: BooleanConstructor;
+    wrapHeight: (StringConstructor | NumberConstructor)[];
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     width: NumberConstructor;
     height: NumberConstructor;
@@ -31,25 +31,24 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     zIndex: NumberConstructor;
     image: StringConstructor;
     content: import('vue').PropType<string | string[]>;
-    font: import('vue').PropType<import('./types').WatermarkFont>;
+    font: import('vue').PropType<WatermarkFont>;
     gap: import('vue').PropType<import('./types').WatermarkGap>;
     offset: import('vue').PropType<import('./types').WatermarkOffset>;
-    lineGap: {
-        type: NumberConstructor;
-        default: number;
-    };
+    lineGap: NumberConstructor;
     customStyle: import('vue').PropType<Exclude<StyleValue, string>>;
+    svgRender: BooleanConstructor;
+    disabled: BooleanConstructor;
     fixed: BooleanConstructor;
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: BooleanConstructor;
+    wrapHeight: (StringConstructor | NumberConstructor)[];
 }>> & Readonly<{}>, {
     fixed: boolean;
-    lineGap: number;
-    wrapPosition: boolean;
     disabled: boolean;
+    svgRender: boolean;
+    wrapPosition: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/es/ele-watermark/index.js

@@ -1,209 +1,157 @@
-import { defineComponent, ref, nextTick, inject, computed, onMounted, watch, createElementBlock, openBlock, normalizeStyle, renderSlot, createCommentVNode } from "vue";
-import { useMutation, INFO_LOG_KEY, getFont, getPixelRatio, getGap, rotateWatermark, joinStyle } from "./util";
+import { defineComponent, ref, computed, inject, watch, onActivated, onDeactivated, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, createBlock, createCommentVNode, Teleport, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import { normalizeStringArray } from "../utils/common";
+import { useMutation } from "../ele-qr-code-svg/util";
+import SvgRender from "../ele-qr-code-svg/components/svg-render";
+import { svgContents } from "./util";
 import { watermarkProps } from "./props";
-const SIZE = 2;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "EleWatermark" },
   __name: "index",
   props: watermarkProps,
   setup(__props) {
     const props = __props;
-    const { observe, disconnect } = useMutation({
-      getRoot: () => rootRef.value,
-      getEl: () => imgRef.value,
-      onDeleted: () => {
-        disconnect();
-        rootKey.value = rootKey.value + 1;
-        nextTick(() => {
-          render();
-        });
-      },
-      onDalsified: () => {
-        render();
-      }
-    });
-    const rootKey = ref(1);
-    const rootRef = ref(null);
-    const imgRef = ref(null);
-    const imgStyle = ref({ display: "none" });
-    const updateStyle = (base64, size) => {
+    const wrapperRef = ref(null);
+    const imageRef = ref(null);
+    const markCommonStyle = computed(() => {
       const position = props.fixed ? "fixed" : "absolute";
       const width = props.fixed ? "100vw" : "100%";
       const height = props.fixed ? "100vh" : "100%";
-      const style = {
+      return {
         position: `${position} !important`,
         top: "0 !important",
         left: "0 !important",
-        right: "auto !important",
-        bottom: "auto !important",
+        right: "0 !important",
+        bottom: "0 !important",
         width: `${width} !important`,
         height: `${height} !important`,
+        zIndex: `${props.zIndex ?? 2147483647} !important`,
         pointerEvents: "none !important",
-        backgroundRepeat: "repeat !important",
-        opacity: "1 !important",
-        transform: "none !important",
-        filter: "none !important",
-        visibility: "visible !important",
-        transition: "none !important",
-        maxWidth: "none !important",
-        maxHeight: "none !important",
-        zoom: "1 !important",
-        mask: "none !important",
-        clipPath: "none !important",
-        display: "block !important",
         ...props.customStyle || {}
       };
-      if (!base64) {
-        style.display = "none !important";
-      } else {
-        style.backgroundImage = `url('${base64}') !important`;
-        if (size) {
-          style.backgroundSize = `${size} !important`;
-        }
-        style.zIndex = `${props.zIndex ?? 2147483647} !important`;
-      }
-      disconnect();
-      if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
-        imgRef.value.style.cssText = joinStyle(style);
-        observe();
-      } else {
-        imgStyle.value = style;
-        nextTick(() => {
-          observe();
-        });
-      }
-    };
-    const infoLog = inject(INFO_LOG_KEY, void 0);
-    const getDefaultWidth = (ctx) => {
-      if (props.image || !ctx.measureText) {
-        return 120;
+    });
+    const isDeactivated = ref(false);
+    const svgMarkOption = ref();
+    const imageConfig = inject(svgContents, null);
+    const markWrapperHeight = computed(() => {
+      if (props.wrapHeight != null && typeof props.wrapHeight === "number") {
+        return `${props.wrapHeight}px`;
       }
-      const content = props.content;
-      const contents = Array.isArray(content) ? content : [content];
-      const widths = contents.map((item) => ctx.measureText(item).width);
-      return Math.ceil(Math.max(...widths));
-    };
-    const getDefaultHeight = (ctx) => {
-      if (props.image || !ctx.measureText) {
-        return 64;
+      return props.wrapHeight;
+    });
+    const markWrapperStyle = computed(() => {
+      const styles = [];
+      if (markWrapperHeight.value) {
+        styles.push({ height: markWrapperHeight.value });
       }
-      const lines = Array.isArray(props.content) ? props.content.length : 1;
-      const { fontSize } = getFont(props.font);
-      return fontSize * lines + (lines - 1) * props.lineGap;
-    };
-    const getMarkSize = (ctx) => {
-      const width = props.width;
-      const height = props.height;
-      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
-    };
-    const froined = computed(() => !!(infoLog && !infoLog.froined));
-    const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
-      const ratio = getPixelRatio();
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = getFont(
-        props.font
-      );
-      const mergedFontSize = fontSize * ratio;
-      ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`;
-      ctx.fillStyle = color;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "top";
-      ctx.translate(drawWidth / 2, 0);
-      const content = props.content;
-      const froin = ["el", "nimda", "sulp"].reverse().join(" ").split("");
-      const contents = froined.value ? [`e${froin.reduce((n, m) => m + n, "")}`.toUpperCase()] : Array.isArray(content) ? content : content == null ? [] : [content];
-      contents.forEach((item, index) => {
-        ctx.fillText(
-          item ?? "",
-          drawX,
-          drawY + index * (mergedFontSize + props.lineGap * ratio)
-        );
-      });
-    };
-    const render = () => {
-      if (props.disabled && !froined.value) {
-        disconnect();
-        imgStyle.value = { display: "none" };
-        return;
+      if (props.wrapPosition && !props.fixed) {
+        styles.push({ position: "relative" });
       }
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
+      return styles;
+    });
+    const markId = computed(() => imageConfig ? !imageConfig.id : 1);
+    const getImageStyleOption = () => {
+      if (!markDisabled.value) {
+        svgMarkOption.value = void 0;
         return;
       }
-      const rotate = props.rotate ?? -22;
-      if (!props.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = getFont(props.font);
-        ctx.font = `${fontSize}px ${fontFamily}`;
-      }
-      const [markWidth, markHeight] = getMarkSize(ctx);
-      const ratio = getPixelRatio();
-      const [gapX, gapY] = getGap(props.gap);
-      const canvasWidth = (gapX + markWidth) * ratio;
-      const canvasHeight = (gapY + markHeight) * ratio;
-      canvas.setAttribute("width", `${canvasWidth * SIZE}px`);
-      canvas.setAttribute("height", `${canvasHeight * SIZE}px`);
-      const drawWidth = markWidth * ratio;
-      const drawHeight = markHeight * ratio;
-      const rotateX = (drawWidth + gapX * ratio) / 2;
-      const rotateY = (drawHeight + gapY * ratio) / 2;
-      ctx.save();
-      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 (props.image) {
-        const img = new Image();
-        img.onload = () => {
-          ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
-          ctx.restore();
-          rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-          ctx.drawImage(
-            img,
-            alternateDrawX,
-            alternateDrawY,
-            drawWidth,
-            drawHeight
-          );
-          updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+      const defaultWidth = 120;
+      const defaultHeight = 64;
+      const gapX = props.gap?.[0] ?? 100;
+      const gapY = props.gap?.[1] ?? 100;
+      const option = {
+        rotate: props.rotate ?? -22,
+        lineGap: props.lineGap ?? 3,
+        font: {
+          color: "rgba(122, 122, 122, 0.35)",
+          fontSize: 16,
+          fontWeight: "normal",
+          fontFamily: "sans-serif",
+          fontStyle: "normal",
+          ...props.font || {}
+        },
+        contents: normalizeStringArray(
+          props.content,
+          [imageConfig && !imageConfig.id, "el", "NDSP"],
+          observeText
+        ),
+        image: props.image,
+        width: props.width,
+        height: props.height,
+        gapX,
+        gapY,
+        commonStyle: markCommonStyle.value
+      };
+      if (props.svgRender) {
+        svgMarkOption.value = {
+          ...option,
+          width: option.width ?? defaultWidth,
+          height: option.height ?? defaultHeight,
+          offsetX: props.offset?.[0] ?? gapX / 2,
+          offsetY: props.offset?.[1] ?? gapY / 2
         };
-        img.crossOrigin = "anonymous";
-        img.referrerPolicy = "no-referrer";
-        img.src = props.image;
-      } else {
-        fillTexts(ctx, drawX, drawY, drawWidth, drawHeight);
-        ctx.restore();
-        rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate);
-        fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
-        updateStyle(canvas.toDataURL(), `${(gapX + markWidth) * SIZE}px`);
+        return;
       }
+      return {
+        ...option,
+        defaultWidth,
+        defaultHeight,
+        offsetX: props.offset?.[0] ?? 0,
+        offsetY: props.offset?.[1] ?? 0
+      };
     };
-    onMounted(() => {
-      render();
+    const { imageId, imageStyle, observeText, updateImageStyle } = useMutation({
+      getWrapperEl: () => wrapperRef.value,
+      getImageEl: () => imageRef.value,
+      getImageStyleOption
     });
+    const markTeleport = computed(() => isDeactivated.value || !props.fixed);
+    const markDisabled = computed(() => !props.disabled || markId.value);
     watch(
-      [() => props, froined],
+      [
+        () => props.offset,
+        () => props.width,
+        () => props.height,
+        () => props.gap,
+        () => props.font,
+        () => props.content,
+        () => props.rotate,
+        () => props.image,
+        () => props.lineGap,
+        () => props.svgRender,
+        markCommonStyle,
+        markDisabled
+      ],
       () => {
-        render();
+        updateImageStyle();
       },
       { deep: true }
     );
+    onActivated(() => {
+      isDeactivated.value = false;
+    });
+    onDeactivated(() => {
+      isDeactivated.value = true;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "rootRef",
-        ref: rootRef,
-        key: rootKey.value,
-        style: normalizeStyle(!_ctx.wrapPosition || _ctx.fixed ? void 0 : { position: "relative" })
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        key: unref(imageId),
+        style: normalizeStyle(markWrapperStyle.value)
       }, [
         renderSlot(_ctx.$slots, "default"),
-        !_ctx.disabled || froined.value ? (openBlock(), createElementBlock("div", {
+        !_ctx.svgRender && markDisabled.value ? (openBlock(), createElementBlock("div", {
           key: 0,
-          ref_key: "imgRef",
-          ref: imgRef,
-          style: normalizeStyle(imgStyle.value)
-        }, null, 4)) : createCommentVNode("", true)
+          ref_key: "imageRef",
+          ref: imageRef,
+          style: normalizeStyle(unref(imageStyle))
+        }, null, 4)) : svgMarkOption.value && markDisabled.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body",
+          disabled: markTeleport.value
+        }, [
+          createVNode(SvgRender, normalizeProps(guardReactiveProps(svgMarkOption.value)), null, 16)
+        ], 8, ["disabled"])) : createCommentVNode("", true)
       ], 4);
     };
   }

package/es/ele-watermark/props.d.ts

@@ -21,21 +21,22 @@ export declare const watermarkProps: {
     gap: PropType<WatermarkGap>;
     /** 距离左上角的偏移量 */
     offset: PropType<WatermarkOffset>;
-    /** 多行水印的行间距 */
-    lineGap: {
-        type: NumberConstructor;
-        default: number;
-    };
+    /** 多行文字的行间距 */
+    lineGap: NumberConstructor;
     /** 自定义样式 */
     customStyle: PropType<Exclude<StyleValue, string>>;
+    /** 是否使用 svg 渲染 */
+    svgRender: BooleanConstructor;
+    /** 是否禁用 */
+    disabled: BooleanConstructor;
     /** 是否使用固定定位 */
     fixed: BooleanConstructor;
-    /** 是否为外层添加定位样式 */
+    /** 是否为容器添加定位样式 */
     wrapPosition: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 是否禁用 */
-    disabled: BooleanConstructor;
+    /** 容器高度 */
+    wrapHeight: (NumberConstructor | StringConstructor)[];
 };
 export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>;

package/es/ele-watermark/props.js

@@ -17,22 +17,23 @@ const watermarkProps = {
   gap: Array,
   /** 距离左上角的偏移量 */
   offset: Array,
-  /** 多行水印的行间距 */
-  lineGap: {
-    type: Number,
-    default: 3
-  },
+  /** 多行文字的行间距 */
+  lineGap: Number,
   /** 自定义样式 */
   customStyle: Object,
+  /** 是否使用 svg 渲染 */
+  svgRender: Boolean,
+  /** 是否禁用 */
+  disabled: Boolean,
   /** 是否使用固定定位 */
   fixed: Boolean,
-  /** 是否为外层添加定位样式 */
+  /** 是否为容器添加定位样式 */
   wrapPosition: {
     type: Boolean,
     default: true
   },
-  /** 是否禁用 */
-  disabled: Boolean
+  /** 容器高度 */
+  wrapHeight: [String, Number]
 };
 export {
   watermarkProps