zmdms-webui 0.0.180 → 0.0.182

package/dist/es/print/components/PrintBtn.js

@@ -37,7 +37,7 @@ var PrintBtn = function (_a) {
                     _a.label = 2;
                 case 2:
                     style_1 = document.createElement("style");
-                    style_1.innerHTML = "\n        @media print {\n          body * {\n            visibility: hidden;\n          }\n        }\n      ";
+                    style_1.innerHTML = "\n        @media print {\n          body * {\n            visibility: hidden;\n          }\n          #watermark-shadow-id-zmdms {\n            visibility: visible;\n          }\n        }\n      ";
                     document.head.appendChild(style_1);
                     window.print();
                     setTimeout(function () {

package/dist/es/print/print.js

@@ -27,7 +27,7 @@ var Print = function (props, ref) {
         "ztxk-print--water": headerProps.isWaterBtn,
     });
     var _d = useState(false), spinning = _d[0], setSpinning = _d[1];
-    return (jsx(Spin, __assign({ spinning: spinning || outSpinning }, { children: jsxs("div", __assign({ className: classes }, { children: [jsx(PrintHeader, __assign({ setSpinning: setSpinning, waterVisible: waterVisible, setWaterVisible: setWaterVisible }, headerProps)), jsx(WatermarkCom, __assign({ className: "ztxk-print--content", visible: waterVisible, isMutationObserver: false, isAppendBody: true }, waterConfig, { children: jsx("div", __assign({ className: "ztxk-print--main" }, { children: children })) }))] })) })));
+    return (jsx(Spin, __assign({ spinning: spinning || outSpinning }, { children: jsxs("div", __assign({ className: classes }, { children: [jsx(PrintHeader, __assign({ setSpinning: setSpinning, waterVisible: waterVisible, setWaterVisible: setWaterVisible }, headerProps)), jsx(WatermarkCom, __assign({ className: "ztxk-print--content", visible: waterVisible, isShadow: true }, waterConfig, { children: jsx("div", __assign({ className: "ztxk-print--main" }, { children: children })) }))] })) })));
 };
 var PrintCom = memo(forwardRef(Print));
 PrintCom.displayName = "ZTXK_WEBUI_Print";

package/dist/es/sortable/index.d.ts

@@ -0,0 +1,5 @@
+import Sortable from './sortable.js';
+
+
+
+export { Sortable as default };

package/dist/es/sortable/index.js

@@ -0,0 +1,5 @@
+import Sortable from './sortable.js';
+
+
+
+export { Sortable as default };

package/dist/es/sortable/sortable-item.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface ISortableProps {
+    type: string | symbol;
+    onMoveItem: (dragIndex: number, hoverIndex: number) => void;
+    index: number;
+    id?: string;
+    className?: string;
+    style?: any;
+    children?: any;
+}
+declare const Sortable: React__default.FC<ISortableProps>;
+
+export { Sortable as default };

package/dist/es/sortable/sortable-item.js

@@ -0,0 +1,68 @@
+import { __assign } from '../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import classNames from '../node_modules/classnames/index.js';
+import { useDrop } from '../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js';
+import { useDrag } from '../node_modules/react-dnd/dist/hooks/useDrag/useDrag.js';
+
+var Sortable = function (_a) {
+    var type = _a.type, onMoveItem = _a.onMoveItem, index = _a.index, id = _a.id, children = _a.children, style = _a.style, className = _a.className;
+    var ref = useRef(null);
+    var classes = classNames("zt-sortable", className, {});
+    /**
+     * @description 定义可放置对象
+     */
+    var _b = useDrop({
+        accept: type,
+        hover: function (item, monitor) {
+            var _a;
+            if (!ref.current) {
+                return;
+            }
+            // 当前拖动项索引
+            var dragIndex = item.index;
+            // 当前放置位置索引
+            var hoverIndex = index;
+            // 不要将项目本身替换
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+            // 获取当前项的位置信息
+            var hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            // 元素高度的一半
+            var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            // 确定鼠标位置
+            var clientOffset = monitor.getClientOffset();
+            // 鼠标位置纵坐标 与 当前hover元素顶部位置差
+            var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            // 临界值判断
+            // 如果当前拖拽元素本身在当前放置元素之上 并且 鼠标位置与当前放置元素之差 要小于中间位置
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            // 如果当前拖拽元素本身在当前放置元素之下 并且鼠标位置与当前放置元素之差要 大于 中间位置
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            onMoveItem(dragIndex, hoverIndex);
+            item.index = hoverIndex;
+        },
+    }), drop = _b[1];
+    /**
+     * @description 定义可拖动对象
+     */
+    var _c = useDrag({
+        type: type,
+        item: function () {
+            return { id: id, index: index };
+        },
+        collect: function (monitor) { return ({
+            isDragging: monitor.isDragging(),
+        }); },
+    }), isDragging = _c[0].isDragging, drag = _c[1];
+    var opacity = isDragging ? 0 : 1;
+    drag(drop(ref));
+    return (jsx("div", __assign({ ref: ref, className: classes, style: __assign(__assign({}, style), { opacity: opacity }) }, { children: children })));
+};
+
+export { Sortable as default };

package/dist/es/sortable/sortable.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import Sortable$1 from './sortable-item.js';
+
+interface ISortableProps {
+    children?: any;
+}
+interface SortableListComponent extends React__default.FC<ISortableProps> {
+    Item: typeof Sortable$1;
+    displayName: string;
+}
+declare const Sortable: SortableListComponent;
+
+export { Sortable as default };

package/dist/es/sortable/sortable.js

@@ -0,0 +1,16 @@
+import { __assign } from '../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { HTML5Backend } from '../node_modules/react-dnd-html5-backend/dist/index.js';
+import Sortable$1 from './sortable-item.js';
+import { DndProvider } from '../node_modules/react-dnd/dist/core/DndProvider.js';
+
+var SortableList = function (_a) {
+    var children = _a.children;
+    return (jsx(DndProvider, __assign({ backend: HTML5Backend, context: window }, { children: children })));
+};
+var Sortable = memo(SortableList);
+Sortable.displayName = "ZTXK_WEBUI_Sortable";
+Sortable.Item = Sortable$1;
+
+export { Sortable as default };

package/dist/es/table/useInnerPagination.js

@@ -55,9 +55,9 @@ function useInnerPagination(isInnerPagination, innerPaginationPageSize, options)
             }
         },
         hideOnSinglePage: true,
-        position: innerPaginationPageSizeOptions,
+        position: innerPaginationPosition,
         defaultPageSize: pageSize,
-        pageSizeOptions: innerPaginationPosition,
+        pageSizeOptions: innerPaginationPageSizeOptions,
     }); }, [
         isInnerPagination,
         current,

package/dist/es/watermark/interface.d.ts

@@ -11,6 +11,10 @@ interface IWatermark extends IWaterConfig {
      * 如果采取之前的模式 打印的时候需要勾选显示背景才能显示内容
      */
     isAppendBody?: boolean;
+    /**
+     * 是否采用 shadow-root的模式创建水印
+     */
+    isShadow?: boolean;
 }
 interface WatermarkComponent extends React__default.FC<IWatermark> {
     displayName: string;

package/dist/es/watermark/utils.js

@@ -0,0 +1,60 @@
+import { __assign } from '../_virtual/_tslib.js';
+
+function createWatermark(watermarkText, options, container) {
+    var width = options.width, height = options.height, rotate = options.rotate;
+    var watermarkWidth = width * 2;
+    var watermarkHeight = height * 2;
+    // 计算旋转后水印的占用空间
+    var radians = (Math.abs(rotate) * Math.PI) / 180;
+    var sin = Math.sin(radians);
+    var cos = Math.cos(radians);
+    var rotatedWidth = cos * watermarkWidth + sin * watermarkHeight;
+    var rotatedHeight = sin * watermarkWidth + cos * watermarkHeight;
+    // 计算容器可以容纳多少行和列的水印
+    var cols = Math.floor((container.offsetWidth || 600) / rotatedWidth);
+    var rows = Math.floor((container.offsetHeight || 600) / rotatedHeight);
+    // 创建一个水印元素
+    var fragment = document.createDocumentFragment();
+    // 循环创建和定位水印元素
+    for (var row = 0; row < rows; row++) {
+        for (var col = 0; col < cols; col++) {
+            // 克隆水印元素
+            var watermark = createWatermarkItem(watermarkText, __assign({}, options));
+            // 设置绝对定位
+            watermark.style.left = "".concat(col * rotatedWidth, "px");
+            watermark.style.top = "".concat(row * rotatedHeight, "px");
+            // 将克隆的水印添加到容器中
+            fragment.appendChild(watermark);
+        }
+    }
+    return fragment;
+}
+function createWatermarkItem(watermarkText, options) {
+    // 创建一个水印元素
+    var watermark = document.createElement("div");
+    watermark.className = "shadow-root--container";
+    var textContent = watermarkText;
+    if (Array.isArray(watermarkText)) {
+        textContent = watermarkText.join("\n");
+    }
+    watermark.innerHTML = "\n    <span style=\"position: absolute; top: 20px; left: 20px\">".concat(textContent, "</span>\n    <span style=\"position: absolute; bottom: 20px; right: 20px\">").concat(textContent, "</span>\n  ");
+    var font = options.font, rotate = options.rotate, width = options.width, height = options.height, top = options.top, left = options.left;
+    // 设置水印样式
+    watermark.style.position = "absolute";
+    watermark.style.top = "".concat(top || 50, "px");
+    watermark.style.left = "".concat(left || 50, "px");
+    watermark.style.width = "".concat((width || 200) * 2, "px");
+    watermark.style.height = "".concat((height || 200) * 2, "px");
+    watermark.style.color = (font === null || font === void 0 ? void 0 : font.color) || "rgba(0, 0, 0, 0.2)";
+    watermark.style.fontFamily = (font === null || font === void 0 ? void 0 : font.fontFamily) || "微软雅黑";
+    watermark.style.fontSize = "".concat((font === null || font === void 0 ? void 0 : font.fontSize) || 14, "px");
+    watermark.style.fontStyle = (font === null || font === void 0 ? void 0 : font.fontStyle) || "normal";
+    watermark.style.fontWeight = (font === null || font === void 0 ? void 0 : font.fontWeight) || "normal";
+    watermark.style.textAlign = (font === null || font === void 0 ? void 0 : font.textAlign) || "center";
+    watermark.style.zIndex = "1000";
+    watermark.style.whiteSpace = "pre";
+    watermark.style.transform = "rotate(".concat(rotate || -20, "deg)");
+    return watermark;
+}
+
+export { createWatermark };

package/dist/es/watermark/watermark-shadow.js

@@ -0,0 +1,115 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
+import { createWatermark } from './utils.js';
+import { useMemoizedFn, useMount } from 'ahooks';
+
+var WatermarkShadow = function (props, ref) {
+    var zIndex = props.zIndex, isMutationObserver = props.isMutationObserver, content = props.content, font = props.font, rotate = props.rotate, width = props.width, height = props.height, containerDomRef = props.containerDomRef;
+    var waterDomRef = useRef(null);
+    var shadowRootRef = useRef();
+    var createWaterMemo = useMemoizedFn(function () {
+        if (!content) {
+            return;
+        }
+        var watermarkFragment = createWatermark(content, {
+            font: font,
+            rotate: rotate,
+            width: width,
+            height: height,
+        }, containerDomRef === null || containerDomRef === void 0 ? void 0 : containerDomRef.current);
+        if (shadowRootRef.current) {
+            while (shadowRootRef.current.firstChild) {
+                shadowRootRef.current.removeChild(shadowRootRef.current.firstChild);
+            }
+            shadowRootRef.current.appendChild(watermarkFragment);
+        }
+    });
+    // 初始化一个监听器
+    var observerMemo = useMemo(function () {
+        // 配置观察器的选项
+        var config = { childList: true, attributes: true, subtree: true };
+        // 创建一个回调函数来处理观察到的变化
+        var callback = function (mutationsList) {
+            var _a, _b;
+            console.log("触发子级", mutationsList);
+            // 先解除监听
+            (_a = observer === null || observer === void 0 ? void 0 : observer.disconnect) === null || _a === void 0 ? void 0 : _a.call(observer);
+            createWaterMemo();
+            // 等元素挂载后再开始监听
+            (_b = observer === null || observer === void 0 ? void 0 : observer.observe) === null || _b === void 0 ? void 0 : _b.call(observer, shadowRootRef.current, config);
+        };
+        // 创建一个 MutationObserver 实例并传入回调函数
+        var observer = new MutationObserver(callback);
+        return {
+            observer: observer,
+            config: config,
+        };
+    }, [createWaterMemo]);
+    // 初始化创建shadow节点
+    useMount(function () {
+        if (waterDomRef.current) {
+            var shadowRoot = waterDomRef.current.attachShadow({
+                mode: "open",
+            });
+            shadowRootRef.current = shadowRoot;
+        }
+    });
+    useEffect(function () {
+        var _a, _b;
+        if (!content) {
+            return;
+        }
+        var watermarkFragment = createWatermark(content, {
+            font: font,
+            rotate: rotate,
+            width: width,
+            height: height,
+        }, containerDomRef === null || containerDomRef === void 0 ? void 0 : containerDomRef.current);
+        if (shadowRootRef.current) {
+            while (shadowRootRef.current.firstChild) {
+                shadowRootRef.current.removeChild(shadowRootRef.current.firstChild);
+            }
+            shadowRootRef.current.appendChild(watermarkFragment);
+            // 是否监听？
+            if (isMutationObserver) {
+                (_b = (_a = observerMemo.observer) === null || _a === void 0 ? void 0 : _a.observe) === null || _b === void 0 ? void 0 : _b.call(_a, shadowRootRef.current, observerMemo.config);
+            }
+        }
+        return function () {
+            var _a, _b;
+            (_b = (_a = observerMemo.observer) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+        };
+    }, [
+        content,
+        font,
+        height,
+        rotate,
+        width,
+        observerMemo,
+        isMutationObserver,
+        containerDomRef,
+    ]);
+    useImperativeHandle(ref, function () {
+        return {
+            getWaterDomRef: function () { return waterDomRef.current; },
+            toggleVisible: function () {
+                if (waterDomRef.current) {
+                    waterDomRef.current.style.visibility = "hidden";
+                }
+            },
+        };
+    });
+    return (jsx("div", { ref: waterDomRef, className: "ztxk-watermark--div", style: {
+            zIndex: zIndex,
+            position: "absolute",
+            visibility: "visible",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+        } }));
+};
+var WatermarkShadow$1 = memo(forwardRef(WatermarkShadow));
+
+export { WatermarkShadow$1 as default };

package/dist/es/watermark/watermark.js

@@ -1,8 +1,9 @@
 import { __rest, __assign } from '../_virtual/_tslib.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { memo, useRef, useMemo, useEffect } from 'react';
 import classNames from '../node_modules/classnames/index.js';
 import WatermarkDiv from './watermark-div.js';
+import WatermarkShadow from './watermark-shadow.js';
 import { mergeWaterConfig, createWater } from 'zmdms-utils';
 import { useMutationObserver } from 'ahooks';
 
@@ -18,7 +19,7 @@ var reRendering = function (mutation, isWatermarkEle) {
 };
 // TODO: 通过方法设置水印隐藏 （有没有必要做）
 var Watermark = function (props) {
-    var children = props.children, className = props.className, _a = props.visible, visible = _a === void 0 ? true : _a, _b = props.isMutationObserver, isMutationObserver = _b === void 0 ? true : _b, isAppendBody = props.isAppendBody, waterConfigProps = __rest(props, ["children", "className", "visible", "isMutationObserver", "isAppendBody"]);
+    var children = props.children, className = props.className, _a = props.visible, visible = _a === void 0 ? true : _a, _b = props.isMutationObserver, isMutationObserver = _b === void 0 ? true : _b, isAppendBody = props.isAppendBody, isShadow = props.isShadow, waterConfigProps = __rest(props, ["children", "className", "visible", "isMutationObserver", "isAppendBody", "isShadow"]);
     // 主容器类名
     var classes = classNames("ztxk-watermark", className, {
         "ztxk-watermark--hidden": !visible,
@@ -56,10 +57,12 @@ var Watermark = function (props) {
         }
         console.log("触发父级", mutationsList);
         mutationsList.forEach(function (mutation) {
+            var _a, _b;
             if (reRendering(mutation, function (node) {
-                return node === waterDomChildHandleRef.current.getWaterDomRef();
+                var _a, _b;
+                return node === ((_b = (_a = waterDomChildHandleRef.current) === null || _a === void 0 ? void 0 : _a.getWaterDomRef) === null || _b === void 0 ? void 0 : _b.call(_a));
             })) {
-                waterDomRef.current.appendChild(waterDomChildHandleRef.current.getWaterDomRef());
+                waterDomRef.current.appendChild((_b = (_a = waterDomChildHandleRef.current) === null || _a === void 0 ? void 0 : _a.getWaterDomRef) === null || _b === void 0 ? void 0 : _b.call(_a));
             }
         });
     }, waterDomRef, {
@@ -76,6 +79,9 @@ var Watermark = function (props) {
             document.body.style.background = "";
         }
     }, [isAppendBody, visible, config.image]);
+    if (isShadow) {
+        return (jsxs("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: [children, jsx(WatermarkShadow, { ref: waterDomChildHandleRef, isMutationObserver: isMutationObserver, content: content, font: font, rotate: rotate, width: width, height: height, containerDomRef: waterDomRef, zIndex: zIndex })] })));
+    }
     return isAppendBody ? (jsx("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: children }))) : (jsxs("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: [children, jsx(WatermarkDiv, { ref: waterDomChildHandleRef, isMutationObserver: isMutationObserver, isAppendBody: isAppendBody, zIndex: zIndex, image: config.image })] })));
 };
 var WatermarkCom = memo(Watermark);

package/dist/index.build.d.ts

@@ -43,6 +43,7 @@ export { default as NotRoutePage } from './es/notroutepage/notRoutePage.js';
 export { default as Alert } from './es/alert/alert.js';
 export { default as ZtTransfer } from './es/zttransfer/zt-transfer.js';
 export { default as Watermark } from './es/watermark/watermark.js';
+export { default as Sortable } from './es/sortable/sortable.js';
 export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Card, Carousel, Cascader, Checkbox, Col, Comment, ConfigProvider, Divider, Drawer, Dropdown, Empty, Grid, Image, Layout, List, Mentions, Menu, PageHeader, Popconfirm, Popover, Progress, Radio, Rate, Result, Row, Segmented, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Timeline, Tooltip, Transfer, Typography, Upload, message, notification } from 'antd';
 export { IModalOpenOptions, IModalProps, IModalRef } from './es/modal/interface.js';
 export { IFooterDom, IFooterProps } from './es/footer/interface.js';

package/dist/index.es.js

@@ -41,6 +41,7 @@ export { default as NotRoutePage } from './es/notroutepage/notRoutePage.js';
 export { default as Alert } from './es/alert/alert.js';
 export { default as ZtTransfer } from './es/zttransfer/zt-transfer.js';
 export { default as Watermark } from './es/watermark/watermark.js';
+export { default as Sortable } from './es/sortable/sortable.js';
 export { Affix, Anchor, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Card, Carousel, Cascader, Checkbox, Col, Comment, ConfigProvider, Divider, Drawer, Dropdown, Empty, Grid, Image, Layout, List, Mentions, Menu, PageHeader, Popconfirm, Popover, Progress, Radio, Rate, Result, Row, Segmented, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Timeline, Tooltip, Transfer, Typography, Upload, message, notification } from 'antd';
 export { default as Button } from './es/button/button.js';
 export { default as NotAuthPage } from './es/notauthpage/notAuthPage.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmdms-webui",
-  "version": "0.0.180",
+  "version": "0.0.182",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",