ele-admin-plus 1.4.1-beta.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,210 +1,158 @@
 "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 SIZE = 2;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleWatermark" },
   __name: "index",
   props: props.watermarkProps,
   setup(__props) {
     const props2 = __props;
-    const { observe, disconnect } = util.useMutation({
-      getRoot: () => rootRef.value,
-      getEl: () => imgRef.value,
-      onDeleted: () => {
-        disconnect();
-        rootKey.value = rootKey.value + 1;
-        vue.nextTick(() => {
-          render();
-        });
-      },
-      onDalsified: () => {
-        render();
-      }
-    });
-    const rootKey = vue.ref(1);
-    const rootRef = vue.ref(null);
-    const imgRef = vue.ref(null);
-    const imgStyle = vue.ref({ display: "none" });
-    const updateStyle = (base64, size) => {
+    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%";
       const height = props2.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: `${props2.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",
         ...props2.customStyle || {}
       };
-      if (!base64) {
-        style.display = "none !important";
-      } else {
-        style.backgroundImage = `url('${base64}') !important`;
-        if (size) {
-          style.backgroundSize = `${size} !important`;
-        }
-        style.zIndex = `${props2.zIndex ?? 2147483647} !important`;
-      }
-      disconnect();
-      if (imgRef.value && imgRef.value.style && imgRef.value.style.cssText) {
-        imgRef.value.style.cssText = util.joinStyle(style);
-        observe();
-      } else {
-        imgStyle.value = style;
-        vue.nextTick(() => {
-          observe();
-        });
-      }
-    };
-    const infoLog = vue.inject(util.INFO_LOG_KEY, void 0);
-    const getDefaultWidth = (ctx) => {
-      if (props2.image || !ctx.measureText) {
-        return 120;
+    });
+    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`;
       }
-      const content = props2.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 (props2.image || !ctx.measureText) {
-        return 64;
+      return props2.wrapHeight;
+    });
+    const markWrapperStyle = vue.computed(() => {
+      const styles = [];
+      if (markWrapperHeight.value) {
+        styles.push({ height: markWrapperHeight.value });
       }
-      const lines = Array.isArray(props2.content) ? props2.content.length : 1;
-      const { fontSize } = util.getFont(props2.font);
-      return fontSize * lines + (lines - 1) * props2.lineGap;
-    };
-    const getMarkSize = (ctx) => {
-      const width = props2.width;
-      const height = props2.height;
-      return [width ?? getDefaultWidth(ctx), height ?? getDefaultHeight(ctx)];
-    };
-    const froined = vue.computed(() => !!(infoLog && !infoLog.froined));
-    const fillTexts = (ctx, drawX, drawY, drawWidth, drawHeight) => {
-      const ratio = util.getPixelRatio();
-      const { color, fontSize, fontStyle, fontWeight, fontFamily } = util.getFont(
-        props2.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 = props2.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 + props2.lineGap * ratio)
-        );
-      });
-    };
-    const render = () => {
-      if (props2.disabled && !froined.value) {
-        disconnect();
-        imgStyle.value = { 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 ?? -22;
-      if (!props2.image && ctx.measureText != null) {
-        const { fontSize, fontFamily } = util.getFont(props2.font);
-        ctx.font = `${fontSize}px ${fontFamily}`;
-      }
-      const [markWidth, markHeight] = getMarkSize(ctx);
-      const ratio = util.getPixelRatio();
-      const [gapX, gapY] = util.getGap(props2.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();
-      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 + markWidth) * SIZE}px`);
+      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 + markWidth) * SIZE}px`);
+        return;
       }
+      return {
+        ...option,
+        defaultWidth,
+        defaultHeight,
+        offsetX: props2.offset?.[0] ?? 0,
+        offsetY: props2.offset?.[1] ?? 0
+      };
     };
-    vue.onMounted(() => {
-      render();
+    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, froined],
+      [
+        () => props2.offset,
+        () => props2.width,
+        () => props2.height,
+        () => props2.gap,
+        () => props2.font,
+        () => props2.content,
+        () => props2.rotate,
+        () => props2.image,
+        () => props2.lineGap,
+        () => props2.svgRender,
+        markCommonStyle,
+        markDisabled
+      ],
       () => {
-        render();
+        updateImageStyle();
       },
       { deep: true }
     );
+    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(!_ctx.wrapPosition || _ctx.fixed ? void 0 : { position: "relative" })
+        ref_key: "wrapperRef",
+        ref: wrapperRef,
+        key: vue.unref(imageId),
+        style: vue.normalizeStyle(markWrapperStyle.value)
       }, [
         vue.renderSlot(_ctx.$slots, "default"),
-        !_ctx.disabled || froined.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        !_ctx.svgRender && markDisabled.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          ref_key: "imgRef",
-          ref: imgRef,
-          style: vue.normalizeStyle(imgStyle.value)
-        }, null, 4)) : vue.createCommentVNode("", true)
+          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);
     };
   }

package/lib/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/lib/ele-watermark/props.cjs

@@ -19,21 +19,22 @@ 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]
 };
 exports.watermarkProps = watermarkProps;

package/lib/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>;