zmdms-webui 0.0.180 → 0.0.181

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/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/index.css

@@ -1 +1 @@
-.ztxk-watermark.ztxk-watermark--hidden>.ztxk-watermark--div{display:none}
+.ztxk-watermark.ztxk-watermark--hidden>.ztxk-watermark--div{display:none}#watermark-shadow-id-zmdms{display:block!important;pointer-events:none!important}

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,54 @@
+import { __assign } from '../_virtual/_tslib.js';
+
+var WRAP_DIV_ID = "watermark-shadow-id-zmdms";
+function createWatermark(watermarkText, options) {
+    var preDiv = document.getElementById(WRAP_DIV_ID);
+    if (preDiv) {
+        preDiv.remove();
+    }
+    // 创建一个新的 div 作为水印容器
+    var watermarkDiv = document.createElement("div");
+    watermarkDiv.id = WRAP_DIV_ID;
+    // 使用 shadow DOM
+    var shadowRoot = watermarkDiv.attachShadow({ mode: "open" });
+    var width = options.width, height = options.height;
+    // 创建一个水印元素
+    var fragment = document.createDocumentFragment();
+    for (var i = 0; i < 3; i++) {
+        var watermark = createWatermarkItem(watermarkText, __assign(__assign({}, options), { top: 50 + height * i, left: 50 + width * i }));
+        fragment.appendChild(watermark);
+    }
+    // 将水印添加到 shadow DOM
+    shadowRoot.appendChild(fragment);
+    // 将水印容器添加到文档的 body 中
+    document.body.appendChild(watermarkDiv);
+}
+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, "px");
+    watermark.style.height = "".concat(height || 200, "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.js

@@ -5,6 +5,7 @@ import classNames from '../node_modules/classnames/index.js';
 import WatermarkDiv from './watermark-div.js';
 import { mergeWaterConfig, createWater } from 'zmdms-utils';
 import { useMutationObserver } from 'ahooks';
+import { createWatermark } from './utils.js';
 
 var reRendering = function (mutation, isWatermarkEle) {
     var flag = false;
@@ -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,
@@ -51,7 +52,7 @@ var Watermark = function (props) {
         };
     }, [content, font, height, image, rotate, width, lineSpacing]);
     useMutationObserver(function (mutationsList) {
-        if (!isMutationObserver || isAppendBody) {
+        if (!isMutationObserver || isAppendBody || isShadow) {
             return;
         }
         console.log("触发父级", mutationsList);
@@ -76,6 +77,15 @@ var Watermark = function (props) {
             document.body.style.background = "";
         }
     }, [isAppendBody, visible, config.image]);
+    useEffect(function () {
+        if (!isShadow) {
+            return;
+        }
+        createWatermark(content, { font: font, rotate: rotate, width: width, height: height });
+    }, [content, font, height, isShadow, rotate, width]);
+    if (isShadow) {
+        return (jsx("div", __assign({ className: classes, style: { position: "relative" }, ref: waterDomRef }, { children: children })));
+    }
     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';