@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/Watermark/helper.js

@@ -0,0 +1,253 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/** 用于判断值是否为 undefined 的辅助函数 */
+function isUndefined(val) {
+  return val === undefined;
+}
+
+/** 用于判断值是否为数组的辅助函数 */
+function isArray(val) {
+  return Array.isArray(val);
+}
+
+/**
+ * @description 将驼峰命名的字符串转换为小写并用指定分隔符连接
+ * @param key - 驼峰命名的键名
+ * @returns 转换后的小写分隔字符串
+ */
+function toLowercaseSeparator(key) {
+  return key.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+/**
+ * @description 将 CSSProperties 对象转换为内联样式字符串
+ * @param style - CSS 属性对象
+ * @returns 内联样式字符串
+ */
+export function getStyleStr(style) {
+  return Object.keys(style).map(function (key) {
+    return "".concat(toLowercaseSeparator(key), ": ").concat(style[key], ";");
+  }).join(' ');
+}
+
+/**
+ * @description 返回设备物理像素分辨率与 CSS 像素分辨率的比率
+ * @returns 设备像素比
+ */
+export function getPixelRatio() {
+  return window.devicePixelRatio || 1;
+}
+
+/**
+ * @description 判断是否需要重新渲染水印
+ * @param mutation - MutationRecord 对象
+ * @param watermarkElement - 水印 DOM 元素（可选）
+ * @returns 是否需要重新渲染
+ */
+export var reRendering = function reRendering(mutation, watermarkElement) {
+  var flag = false;
+  if (mutation.removedNodes.length && watermarkElement) {
+    flag = Array.from(mutation.removedNodes).includes(watermarkElement);
+  }
+  if (mutation.type === 'attributes' && mutation.target === watermarkElement) {
+    flag = true;
+  }
+  return flag;
+};
+
+/** 文本对齐比例映射：[对齐比例, 间距比例] */
+var TEXT_ALIGN_RATIO_MAP = {
+  left: [0, 0.5],
+  start: [0, 0.5],
+  center: [0.5, 0],
+  right: [1, -0.5],
+  end: [1, -0.5]
+};
+
+/**
+ * @description 准备 Canvas 并返回其上下文和相关尺寸
+ * @param width - 画布逻辑宽度
+ * @param height - 画布逻辑高度
+ * @param ratio - 像素比率
+ * @returns [画布上下文, 画布元素, 实际宽度, 实际高度]
+ */
+function prepareCanvas(width, height) {
+  var ratio = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  var realWidth = width * ratio;
+  var realHeight = height * ratio;
+  canvas.setAttribute('width', "".concat(realWidth, "px"));
+  canvas.setAttribute('height', "".concat(realHeight, "px"));
+  ctx.save();
+  return [ctx, canvas, realWidth, realHeight];
+}
+
+/**
+ * @description 获取水印内容的 Canvas 剪辑（clips）
+ *  生成包含旋转和填充的水印图案 data URL
+ * @param content - 水印内容（文本或图片元素）
+ * @param rotate - 旋转角度
+ * @param ratio - 像素比率
+ * @param width - 内容宽度
+ * @param height - 内容高度
+ * @param font - 字体样式配置（必填）
+ * @param gapX - 水平间距
+ * @param gapY - 垂直间距
+ * @param space - 旋转后的额外空间
+ * @returns [dataURL, 最终宽度, 最终高度]
+ */
+export function getClips(content, rotate, ratio, width, height, font, gapX, gapY, space) {
+  var _prepareCanvas = prepareCanvas(width, height, ratio),
+    _prepareCanvas2 = _slicedToArray(_prepareCanvas, 4),
+    ctx = _prepareCanvas2[0],
+    canvas = _prepareCanvas2[1],
+    contentWidth = _prepareCanvas2[2],
+    contentHeight = _prepareCanvas2[3];
+  var baselineOffset = 0;
+  if (content instanceof HTMLImageElement) {
+    ctx.drawImage(content, 0, 0, contentWidth, contentHeight);
+  } else {
+    var color = font.color,
+      fontSize = font.fontSize,
+      fontStyle = font.fontStyle,
+      fontWeight = font.fontWeight,
+      fontFamily = font.fontFamily,
+      textAlign = font.textAlign,
+      textBaseline = font.textBaseline;
+    var mergedFontSize = Number(fontSize) * ratio;
+    ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(mergedFontSize, "px/").concat(height, "px ").concat(fontFamily);
+    ctx.fillStyle = color;
+    ctx.textAlign = textAlign;
+    ctx.textBaseline = textBaseline;
+    var contents = isArray(content) ? content : [content];
+    if (textBaseline !== 'top' && contents[0]) {
+      var argumentMetrics = ctx.measureText(contents[0]);
+      ctx.textBaseline = 'top';
+      var topMetrics = ctx.measureText(contents[0]);
+      baselineOffset = argumentMetrics.actualBoundingBoxAscent - topMetrics.actualBoundingBoxAscent;
+    }
+    contents === null || contents === void 0 || contents.forEach(function (item, index) {
+      var _TEXT_ALIGN_RATIO_MAP = _slicedToArray(TEXT_ALIGN_RATIO_MAP[textAlign], 2),
+        alignRatio = _TEXT_ALIGN_RATIO_MAP[0],
+        spaceRatio = _TEXT_ALIGN_RATIO_MAP[1];
+      ctx.fillText(item !== null && item !== void 0 ? item : '', contentWidth * alignRatio + space * spaceRatio, index * (mergedFontSize + font.fontGap * ratio));
+    });
+  }
+  var angle = Math.PI / 180 * Number(rotate);
+  var maxSize = Math.max(width, height);
+  var _prepareCanvas3 = prepareCanvas(maxSize, maxSize, ratio),
+    _prepareCanvas4 = _slicedToArray(_prepareCanvas3, 3),
+    rCtx = _prepareCanvas4[0],
+    rCanvas = _prepareCanvas4[1],
+    realMaxSize = _prepareCanvas4[2];
+  rCtx.translate(realMaxSize / 2, realMaxSize / 2);
+  rCtx.rotate(angle);
+  if (contentWidth > 0 && contentHeight > 0) {
+    rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2);
+  }
+
+  /** 获取旋转后的坐标 */
+  function getRotatePos(x, y) {
+    var targetX = x * Math.cos(angle) - y * Math.sin(angle);
+    var targetY = x * Math.sin(angle) + y * Math.cos(angle);
+    return [targetX, targetY];
+  }
+  var left = 0;
+  var right = 0;
+  var top = 0;
+  var bottom = 0;
+  var halfWidth = contentWidth / 2;
+  var halfHeight = contentHeight / 2;
+  var points = [[0 - halfWidth, 0 - halfHeight], [0 + halfWidth, 0 - halfHeight], [0 + halfWidth, 0 + halfHeight], [0 - halfWidth, 0 + halfHeight]];
+  points.forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      x = _ref2[0],
+      y = _ref2[1];
+    var _getRotatePos = getRotatePos(x, y),
+      _getRotatePos2 = _slicedToArray(_getRotatePos, 2),
+      targetX = _getRotatePos2[0],
+      targetY = _getRotatePos2[1];
+    left = Math.min(left, targetX);
+    right = Math.max(right, targetX);
+    top = Math.min(top, targetY);
+    bottom = Math.max(bottom, targetY);
+  });
+  var cutLeft = left + realMaxSize / 2;
+  var cutTop = top + realMaxSize / 2;
+  var cutWidth = right - left;
+  var cutHeight = bottom - top;
+  var realGapX = gapX * ratio;
+  var realGapY = gapY * ratio;
+  var filledWidth = (cutWidth + realGapX) * 2;
+  var filledHeight = cutHeight + realGapY;
+  var _prepareCanvas5 = prepareCanvas(filledWidth, filledHeight),
+    _prepareCanvas6 = _slicedToArray(_prepareCanvas5, 2),
+    fCtx = _prepareCanvas6[0],
+    fCanvas = _prepareCanvas6[1];
+
+  /** 在填充画布上绘制旋转后的图像 */
+  function drawImg() {
+    var targetX = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var targetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    fCtx.drawImage(rCanvas, cutLeft, cutTop, cutWidth, cutHeight, targetX, targetY + baselineOffset, cutWidth, cutHeight);
+  }
+  drawImg();
+  drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2);
+  drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2);
+  return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio];
+}
+
+/**
+ * @description 获取水印的宽度和高度
+ *  默认值：图片 [120, 64]；文本内容：根据内容计算
+ * @param props - 水印组件属性
+ * @param ctx - Canvas 2D 渲染上下文
+ * @returns [宽度, 高度, 额外空间]
+ */
+export function getMarkSize(props, ctx) {
+  var _font$fontSize, _font$fontFamily, _font$fontGap;
+  var defaultWidth = 120;
+  var defaultHeight = 64;
+  var space = 0;
+  var image = props.image,
+    content = props.content,
+    width = props.width,
+    height = props.height,
+    rotate = props.rotate,
+    font = props.font;
+  var finalFontSize = (_font$fontSize = font === null || font === void 0 ? void 0 : font.fontSize) !== null && _font$fontSize !== void 0 ? _font$fontSize : 16;
+  var finalFontFamily = (_font$fontFamily = font === null || font === void 0 ? void 0 : font.fontFamily) !== null && _font$fontFamily !== void 0 ? _font$fontFamily : 'sans-serif';
+  var finalFontGap = (_font$fontGap = font === null || font === void 0 ? void 0 : font.fontGap) !== null && _font$fontGap !== void 0 ? _font$fontGap : 3;
+  if (!image && ctx.measureText) {
+    ctx.font = "".concat(Number(finalFontSize), "px ").concat(finalFontFamily);
+    var contents = isArray(content) ? content : [content];
+    var maxWidth = 0;
+    var maxHeight = 0;
+    contents.forEach(function (item) {
+      var _ctx$measureText = ctx.measureText(item),
+        textWidth = _ctx$measureText.width,
+        fontBoundingBoxAscent = _ctx$measureText.fontBoundingBoxAscent,
+        fontBoundingBoxDescent = _ctx$measureText.fontBoundingBoxDescent,
+        actualBoundingBoxAscent = _ctx$measureText.actualBoundingBoxAscent,
+        actualBoundingBoxDescent = _ctx$measureText.actualBoundingBoxDescent;
+      var textHeight = isUndefined(fontBoundingBoxAscent) ? actualBoundingBoxAscent + actualBoundingBoxDescent : fontBoundingBoxAscent + fontBoundingBoxDescent;
+      if (textWidth > maxWidth) {
+        maxWidth = Math.ceil(textWidth);
+      }
+      if (textHeight > maxHeight) {
+        maxHeight = Math.ceil(textHeight);
+      }
+    });
+    defaultWidth = maxWidth;
+    defaultHeight = maxHeight * contents.length + (contents.length - 1) * finalFontGap;
+    var angle = Math.PI / 180 * Number(rotate);
+    space = Math.ceil(Math.abs(Math.sin(angle) * defaultHeight) / 2);
+    defaultWidth += space;
+  }
+  return [width !== null && width !== void 0 ? width : defaultWidth, height !== null && height !== void 0 ? height : defaultHeight, space];
+}

package/dist/Watermark/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Watermark } from './Watermark';
+export type { WatermarkFontType, WatermarkProps } from './typings';

package/dist/Watermark/index.js

@@ -0,0 +1 @@
+export { default as Watermark } from "./Watermark";

package/dist/Watermark/typings.d.ts

@@ -0,0 +1,93 @@
+import { BaseProps, NativeProps } from '../types/common';
+/**
+ * @description 水印字体样式配置
+ */
+export interface WatermarkFontType {
+    /**
+     * @description 字体颜色
+     * @default 'rgba(0,0,0,.15)'
+     */
+    color?: string;
+    /**
+     * @description 字体大小，支持数字或字符串
+     * @default 16
+     */
+    fontSize?: number | string;
+    /**
+     * @description 字重
+     * @default 'normal'
+     */
+    fontWeight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
+    /**
+     * @description 字体样式
+     * @default 'normal'
+     */
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+    /**
+     * @description 字体族
+     * @default 'sans-serif'
+     */
+    fontFamily?: string;
+    /**
+     * @description 多行文本之间的间距
+     * @default 3
+     */
+    fontGap?: number;
+    /**
+     * @description 文本对齐方式
+     * @default 'center'
+     */
+    textAlign?: 'start' | 'end' | 'left' | 'right' | 'center';
+    /**
+     * @description 文本基线
+     * @default 'hanging'
+     */
+    textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
+}
+/**
+ * @description Watermark 水印组件属性
+ */
+export interface WatermarkProps extends BaseProps, NativeProps {
+    /**
+     * @description 水印元素的 z-index 值
+     * @default 9
+     */
+    zIndex?: number;
+    /**
+     * @description 水印的旋转角度，单位 °
+     * @default -22
+     */
+    rotate?: number;
+    /**
+     * @description 水印的宽度，`content` 的默认值是它自己的宽度
+     * @default 120
+     */
+    width?: number;
+    /**
+     * @description 水印的高度，`content` 的默认值是它自己的高度
+     * @default 64
+     */
+    height?: number;
+    /**
+     * @description 水印图片，建议使用 2x 或 3x 图像，优先级高于文字内容（支持 base64 格式）
+     */
+    image?: string;
+    /**
+     * @description 水印文本内容，支持字符串或字符串数组（多行水印）
+     * @default 'Element Plus'
+     */
+    content?: string | string[];
+    /**
+     * @description 文字样式配置
+     */
+    font?: WatermarkFontType;
+    /**
+     * @description 水印之间的间距，[水平间距, 垂直间距]
+     * @default [100, 100]
+     */
+    gap?: [number, number];
+    /**
+     * @description 水印从容器左上角的偏移，默认值为 gap/2
+     */
+    offset?: [number, number];
+}

package/dist/Watermark/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './htmlPropsUtils';
 export { default as useClassNames } from './useClassNames';
+export type { UseNamespaceReturn } from './useClassNames';
 export { default as useClickOutside } from './useClickOutside';
 export { default as useComponentWillMount } from './useComponentWillMount';
 export { default as useControlled } from './useControlled';

package/dist/hooks/useClassNames.d.ts

@@ -108,3 +108,4 @@ declare function useClassNames(str: string, classPrefix?: string): {
     cssVarName: (name: string) => string;
 };
 export default useClassNames;
+export type UseNamespaceReturn = ReturnType<typeof useClassNames>;

package/dist/hooks/useClickOutside.js

@@ -19,7 +19,7 @@ function createDocumentHandler(el, binding) {
       var mouseDownTarget = mousedown.target;
       var isBound = !binding;
       var isTargetExists = !mouseUpTarget || !mouseDownTarget;
-      var isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget);
+      var isContainedByEl = el.nodeType === Node.ELEMENT_NODE ? (el === null || el === void 0 ? void 0 : el.contains(mouseUpTarget)) || (el === null || el === void 0 ? void 0 : el.contains(mouseDownTarget)) : false;
       var isSelf = el === mouseUpTarget;
       var isTargetExcluded = excludes.length && excludes.some(function (item) {
         return item === null || item === void 0 ? void 0 : item.contains(mouseUpTarget);
@@ -47,11 +47,19 @@ var useClickOutside = function useClickOutside(el, binding) {
   }
   useLayoutEffect(function () {
     if (el.current && binding.popperRef) {
-      if (!(el.current instanceof HTMLElement)) {
-        return;
-      }
+      // if (!(el.current instanceof HTMLElement)) {
+      //     return;
+      // }
       var index = randomCode(11);
-      el.current.dataset.index = index;
+      if (el.current.dataset) {
+        el.current.dataset.index = index;
+      } else {
+        Object.assign(el.current, {
+          dataset: {
+            index: index
+          }
+        });
+      }
       nodeList[index] = {
         documentHandler: createDocumentHandler(el.current, binding),
         bindingFn: binding.value
@@ -64,11 +72,19 @@ var useClickOutside = function useClickOutside(el, binding) {
   }, [binding.popperRef]);
   useEffect(function () {
     if (el.current && binding.visible) {
-      if (!(el.current instanceof HTMLElement)) {
-        return;
-      }
+      // if (!(el.current instanceof HTMLElement)) {
+      //     return;
+      // }
       var index = randomCode(11);
-      el.current.dataset.index = index;
+      if (el.current.dataset) {
+        el.current.dataset.index = index;
+      } else {
+        Object.assign(el.current, {
+          dataset: {
+            index: index
+          }
+        });
+      }
       nodeList[index] = {
         documentHandler: createDocumentHandler(el.current, binding),
         bindingFn: binding.value

package/dist/hooks/useCommonProps.d.ts

@@ -1,3 +1,7 @@
 import { TypeAttributes } from '../types/common';
 export declare const useSize: (fallback?: TypeAttributes.Size | (() => TypeAttributes.Size)) => TypeAttributes.Size;
 export declare const useDisabled: (fallback?: boolean | (() => boolean)) => boolean;
+export declare const useStatusIcon: () => {
+    statusIcon: boolean;
+    validateState: "" | "error" | "success" | "validating";
+};

package/dist/hooks/useCommonProps.js

@@ -1,12 +1,12 @@
 import { useContext, useMemo } from 'react';
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
-import FormContext from "../Form/FieldContext";
 import { FormItemContext } from "../Form/FormItemContext";
+import InternalFormContext from "../Form/InternalFormContext";
 export var useSize = function useSize(fallback) {
   var _useConfigProvider = useConfigProvider(),
     globalSize = _useConfigProvider.size;
   var size = fallback instanceof Function ? fallback() : fallback;
-  var form = useContext(FormContext);
+  var form = useContext(InternalFormContext);
   var formItem = useContext(FormItemContext);
   return useMemo(function () {
     return size || (formItem === null || formItem === void 0 ? void 0 : formItem.size) || (form === null || form === void 0 ? void 0 : form.size) || globalSize || null;
@@ -14,8 +14,17 @@ export var useSize = function useSize(fallback) {
 };
 export var useDisabled = function useDisabled(fallback) {
   var disabled = fallback instanceof Function ? fallback() : fallback;
-  var form = useContext(FormContext);
+  var form = useContext(InternalFormContext);
   return useMemo(function () {
     return disabled || (form === null || form === void 0 ? void 0 : form.disabled) || false;
   }, [disabled, form === null || form === void 0 ? void 0 : form.disabled]);
+};
+export var useStatusIcon = function useStatusIcon() {
+  var statusIcon = useContext(InternalFormContext).statusIcon;
+  var _useContext = useContext(FormItemContext),
+    validateState = _useContext.validateState;
+  return {
+    statusIcon: statusIcon,
+    validateState: validateState
+  };
 };

package/dist/hooks/useLockscreen.d.ts

@@ -0,0 +1,6 @@
+import { UseNamespaceReturn } from './useClassNames';
+export type UseLockScreenOptions = {
+    ns?: UseNamespaceReturn;
+    shouldLock: boolean;
+};
+export declare const useLockscreen: (trigger: boolean, options?: UseLockScreenOptions) => void;

package/dist/hooks/useLockscreen.js

@@ -0,0 +1,45 @@
+import addClass from 'dom-lib/esm/addClass';
+import removeClass from 'dom-lib/esm/removeClass';
+import { useEffect } from 'react';
+import { getScrollBarWidth } from "../Util/scroll";
+import { namespace } from "./prefix";
+import useClassNames from "./useClassNames";
+var countRef = 0;
+export var useLockscreen = function useLockscreen(trigger) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    shouldLock: true
+  };
+  var popupNs = useClassNames('popup');
+  var ns = options.ns || popupNs;
+  var hiddenCls = ns.bm('parent', 'hidden');
+  var lockScroll = function lockScroll() {
+    if (!options.shouldLock) {
+      return;
+    }
+    addClass(document.body, hiddenCls);
+    var scrollWidth = getScrollBarWidth(namespace);
+    document.body.style.width = "calc(100% - ".concat(scrollWidth, "px)");
+  };
+  var unlockScroll = function unlockScroll() {
+    setTimeout(function () {
+      if (!options.shouldLock) {
+        return;
+      }
+      removeClass(document.body, hiddenCls);
+      document.body.style.width = '';
+    }, 200);
+  };
+  useEffect(function () {
+    if (trigger) {
+      countRef = countRef + 1;
+      lockScroll();
+    } else {
+      if (countRef > 0) {
+        countRef = countRef - 1;
+      }
+      if (countRef === 0) {
+        unlockScroll();
+      }
+    }
+  }, [trigger]);
+};

package/dist/hooks/useResizeObserver.d.ts

@@ -18,7 +18,7 @@ export interface UseResizeObserverOptions {
      *
      * @default 'content-box'
      */
-    box?: ResizeObserverBoxOptions;
+    box?: any;
     window?: Window;
 }
 declare class ResizeObserver {

package/dist/hooks/useResizeObserver.js

@@ -27,7 +27,7 @@ export function useResizeObserver(target, callback) {
     cleanup();
     if (isSupported && window) {
       observer = new ResizeObserver(callback);
-      if (target.current) {
+      if (target !== null && target !== void 0 && target.current) {
         observer.observe(target.current, observerOptions);
       }
     }