@para-ui/core 3.0.85 → 4.0.0-alpha

package/DragVerify/index.js

@@ -1,5 +1,5 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
-import { r as regenerator } from '../_verture/index-beef914f.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
+import { r as regenerator } from '../_verture/index-d63bd287.js';
 import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
@@ -7,11 +7,13 @@ import clsx from 'clsx';
 import DoubleRight from '@para-ui/icons/DoubleRight';
 import CloseIcon from '@para-ui/icons/Close';
 import Check from '@para-ui/icons/Check';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import Refresh from '@para-ui/icons/Refresh';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { Loading } from '../Loading/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../_verture/typeof-b240b062.js';
 import '@para-ui/core/GlobalContext';
 import '@para-ui/icons/LoadingF';
 
@@ -30,7 +32,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-drag-verify {\n  width: 100%;\n  position: relative;\n}\n.paraui-v3-drag-verify > svg {\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  z-index: 10;\n  cursor: pointer;\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-img {\n  position: relative;\n  border-radius: 4px;\n  overflow: hidden;\n  line-height: 0;\n  min-height: 60px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-bg {\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-move {\n  position: absolute;\n  left: 0;\n  height: auto;\n}\n.paraui-v3-drag-verify > .slider-move {\n  position: relative;\n  text-align: center;\n  line-height: 32px;\n  height: 32px;\n  margin-top: 12px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-bg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  background-color: rgba(171, 176, 185, 0.12);\n  height: 32px;\n  border-radius: 4px;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 32px;\n  width: 2px;\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box {\n  position: absolute;\n  top: 0;\n  left: -1px;\n  width: 32px;\n  height: 32px;\n  background: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box:hover .svg-right {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-text {\n  color: rgba(46, 55, 67, 0.4);\n  font-size: 14px;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(54, 102, 214);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(54, 102, 214);\n  border-top: 1px solid rgb(54, 102, 214);\n  border-bottom: 1px solid rgb(54, 102, 214);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(235, 96, 84);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(235, 96, 84);\n  border-top: 1px solid rgb(235, 96, 84);\n  border-bottom: 1px solid rgb(235, 96, 84);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-close {\n  display: inline-block;\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(83, 195, 27);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(83, 195, 27);\n  border-top: 1px solid rgb(83, 195, 27);\n  border-bottom: 1px solid rgb(83, 195, 27);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: inline-block;\n  color: #fff;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-drag-verify {\n  width: 100%;\n  position: relative;\n}\n.paraui-v4-drag-verify > .refresh {\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  z-index: 10;\n  cursor: pointer;\n  display: none;\n  font-size: 24px;\n  color: rgb(255, 255, 255);\n  opacity: 0.7;\n}\n.paraui-v4-drag-verify > .refresh:hover {\n  opacity: 1;\n}\n.paraui-v4-drag-verify > .slider-img {\n  position: relative;\n  border-radius: 4px;\n  overflow: hidden;\n  line-height: 0;\n  min-height: 60px;\n}\n.paraui-v4-drag-verify > .slider-img .slider-img-bg {\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n.paraui-v4-drag-verify > .slider-img .slider-img-move {\n  position: absolute;\n  left: 0;\n  height: auto;\n}\n.paraui-v4-drag-verify > .slider-move {\n  position: relative;\n  text-align: center;\n  line-height: 32px;\n  height: 32px;\n  margin-top: 12px;\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-bg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  background-color: rgb(247, 248, 250);\n  height: 32px;\n  border-radius: 4px;\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 32px;\n  width: 2px;\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask > .slider-move-box {\n  position: absolute;\n  top: 0;\n  left: -1px;\n  width: 32px;\n  height: 32px;\n  background: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask > .slider-move-box:hover .svg-right {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: inline-block;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: none;\n}\n.paraui-v4-drag-verify > .slider-move > .slider-move-text {\n  color: rgb(161, 168, 179);\n  font-size: 14px;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-move > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(46, 101, 230);\n  border-width: 1px 0 1px 1px;\n  background-color: rgb(213, 224, 250);\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(46, 101, 230);\n  border-top: 1px solid rgb(46, 101, 230);\n  border-bottom: 1px solid rgb(46, 101, 230);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-error > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(244, 66, 66);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(244, 66, 66);\n  border-top: 1px solid rgb(244, 66, 66);\n  border-bottom: 1px solid rgb(244, 66, 66);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-close {\n  display: inline-block;\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  display: none;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-check {\n  display: none;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-success > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(19, 191, 76);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(19, 191, 76);\n  border-top: 1px solid rgb(19, 191, 76);\n  border-bottom: 1px solid rgb(19, 191, 76);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: none;\n}\n.paraui-v4-drag-verify.paraui-v4-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: inline-block;\n  color: rgb(255, 255, 255);\n}";
 styleInject(css_248z);
 
 var DragVerify = function DragVerify(props) {
@@ -253,103 +255,10 @@ var DragVerify = function DragVerify(props) {
     style: style,
     ref: refDom
   }, {
-    children: [jsxs("svg", Object.assign({
+    children: [jsx(Refresh, {
       onClick: clickRefresh,
-      className: 'refresh',
-      width: "26.529",
-      height: "26.017",
-      viewBox: "0 0 26.529 26.017"
-    }, {
-      children: [jsxs("defs", {
-        children: [jsxs("filter", Object.assign({
-          id: "a",
-          x: "0",
-          y: "0",
-          width: "26.529",
-          height: "17",
-          filterUnits: "userSpaceOnUse"
-        }, {
-          children: [jsx("feOffset", {
-            dy: "1"
-          }), jsx("feGaussianBlur", {
-            stdDeviation: "1",
-            result: "b"
-          }), jsx("feFlood", {}), jsx("feComposite", {
-            operator: "in",
-            in2: "b"
-          }), jsx("feComposite", {
-            in: "SourceGraphic"
-          })]
-        })), jsxs("filter", Object.assign({
-          id: "c",
-          x: "0",
-          y: "9.017",
-          width: "26.529",
-          height: "17",
-          filterUnits: "userSpaceOnUse"
-        }, {
-          children: [jsx("feOffset", {
-            dy: "1"
-          }), jsx("feGaussianBlur", {
-            stdDeviation: "1",
-            result: "d"
-          }), jsx("feFlood", {}), jsx("feComposite", {
-            operator: "in",
-            in2: "d"
-          }), jsx("feComposite", {
-            in: "SourceGraphic"
-          })]
-        }))]
-      }), jsxs("g", Object.assign({
-        style: {
-          opacity: 0.7,
-          isolation: 'isolate'
-        },
-        transform: "translate(-286.735 -95.991)"
-      }, {
-        children: [jsx("g", Object.assign({
-          transform: "translate(288 96)"
-        }, {
-          children: jsx("rect", {
-            style: {
-              fill: 'none'
-            },
-            width: "24",
-            height: "24"
-          })
-        })), jsxs("g", Object.assign({
-          transform: "translate(289.735 97.991)"
-        }, {
-          children: [jsx("g", Object.assign({
-            style: {
-              filter: 'url(#a)'
-            },
-            transform: "matrix(1, 0, 0, 1, -3, -2)"
-          }, {
-            children: jsx("path", {
-              style: {
-                fill: '#FFFFFF'
-              },
-              d: "M577.409,536.791a1,1,0,0,0,1-1A8,8,0,0,1,592.817,531h0c.077.1.149.207.22.312l-1.911-.765a1,1,0,1,0-.743,1.856l3.7,1.483a1,1,0,0,0,1.3-.557l1.482-3.7a1,1,0,1,0-1.857-.744l-.448,1.12c-.048-.067-.093-.137-.143-.2h0a10,10,0,0,0-18.009,5.989A1,1,0,0,0,577.409,536.791Z",
-              transform: "translate(-573.41 -523.79)"
-            })
-          })), jsx("g", Object.assign({
-            style: {
-              filter: 'url(#c)'
-            },
-            transform: "matrix(1, 0, 0, 1, -3, -2)"
-          }, {
-            children: jsx("path", {
-              style: {
-                fill: '#FFFFFF'
-              },
-              d: "M595.938,534.808a1,1,0,0,0-1,1,8,8,0,0,1-14.409,4.79h0c-.076-.1-.148-.206-.219-.312l1.911.765a1,1,0,0,0,.743-1.857l-3.7-1.482a1,1,0,0,0-1.3.557l-1.482,3.7a1,1,0,0,0,1.856.743l.449-1.12c.047.067.093.136.142.2h0a10,10,0,0,0,18.009-5.989A1,1,0,0,0,595.938,534.808Z",
-              transform: "translate(-573.41 -523.79)"
-            })
-          }))]
-        }))]
-      }))]
-    })), jsx("div", {
+      className: 'refresh'
+    }), jsx("div", {
       className: "slider-img",
       style: handStyle()
     }), jsxs("div", Object.assign({

package/Drawer/index.js

@@ -1,16 +1,16 @@
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
 import RcDrawer from 'rc-drawer';
 import { Button } from '../Button/index.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import AutoTips from '../AutoTips/index.js';
 import { isIE } from '@paraview/lib';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-adeedc13.js';
 import 'clsx';
 import '@para-ui/icons/LoadingF';
 import '@para-ui/icons/Forbid';
@@ -18,7 +18,7 @@ import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Down';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'dayjs';
@@ -39,7 +39,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/8 下午2:51\n* @description drawer样式\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  pointer-events: none;\n}\n\n.paraui-v3-drawer-inline {\n  position: absolute;\n}\n\n.paraui-v3-drawer-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  background: rgba(0, 0, 0, 0.45);\n  pointer-events: auto;\n}\n\n.paraui-v3-drawer-content-wrapper {\n  position: absolute;\n  z-index: 1000;\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-content-wrapper-hidden {\n  display: none;\n}\n\n.paraui-v3-drawer-left > .paraui-v3-drawer-content-wrapper {\n  top: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v3-drawer-right > .paraui-v3-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v3-drawer-top > .paraui-v3-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  left: 0;\n  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v3-drawer-bottom > .paraui-v3-drawer-content-wrapper {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v3-drawer-content {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: rgb(255, 255, 255);\n  pointer-events: auto;\n  position: relative;\n}\n.paraui-v3-drawer-content .drawer-content-body {\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: none;\n  height: 60px;\n  padding: 0 24px;\n  font-size: 16px;\n  font-weight: 700;\n  color: rgb(46, 55, 67);\n  border-bottom: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title-ellipsis {\n  overflow: hidden;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra {\n  margin-left: 30px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-align: right;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra button + button {\n  margin-left: 16px;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-content {\n  flex: 1;\n  padding: 24px;\n  overflow: auto;\n  word-wrap: break-word;\n  position: relative;\n}\n.paraui-v3-drawer-content .drawer-content-body .drawer-body-footer {\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: 16px 24px;\n  font-size: 16px;\n  color: rgb(46, 55, 67);\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n}\n\n.panel-motion-enter-start,\n.panel-motion-appear-start,\n.panel-motion-leave-start {\n  transition: none;\n}\n\n.panel-motion-enter-active,\n.panel-motion-appear-active,\n.panel-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-mask-motion-enter-active,\n.paraui-v3-drawer-mask-motion-appear-active,\n.paraui-v3-drawer-mask-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-mask-motion-enter,\n.paraui-v3-drawer-mask-motion-appear {\n  opacity: 0;\n}\n\n.paraui-v3-drawer-mask-motion-enter-active,\n.paraui-v3-drawer-mask-motion-appear-active {\n  opacity: 1;\n}\n\n.paraui-v3-drawer-mask-motion-leave {\n  opacity: 1;\n}\n\n.paraui-v3-drawer-mask-motion-leave-active {\n  opacity: 0;\n}\n\n.paraui-v3-drawer-panel-motion-left-enter-start,\n.paraui-v3-drawer-panel-motion-left-appear-start,\n.paraui-v3-drawer-panel-motion-left-leave-start {\n  transition: none;\n}\n\n.paraui-v3-drawer-panel-motion-left-enter-active,\n.paraui-v3-drawer-panel-motion-left-appear-active,\n.paraui-v3-drawer-panel-motion-left-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-panel-motion-left-enter-start,\n.paraui-v3-drawer-panel-motion-left-appear-start {\n  transform: translateX(-100%) !important;\n}\n\n.paraui-v3-drawer-panel-motion-left-enter-active,\n.paraui-v3-drawer-panel-motion-left-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v3-drawer-panel-motion-left-leave {\n  transform: translateX(0);\n}\n\n.paraui-v3-drawer-panel-motion-left-leave-active {\n  transform: translateX(-100%);\n}\n\n.paraui-v3-drawer-panel-motion-right-enter-start,\n.paraui-v3-drawer-panel-motion-right-appear-start,\n.paraui-v3-drawer-panel-motion-right-leave-start {\n  transition: none;\n}\n\n.paraui-v3-drawer-panel-motion-right-enter-active,\n.paraui-v3-drawer-panel-motion-right-appear-active,\n.paraui-v3-drawer-panel-motion-right-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-panel-motion-right-enter-start,\n.paraui-v3-drawer-panel-motion-right-appear-start {\n  transform: translateX(100%) !important;\n}\n\n.paraui-v3-drawer-panel-motion-right-enter-active,\n.paraui-v3-drawer-panel-motion-right-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v3-drawer-panel-motion-right-leave {\n  transform: translateX(0);\n}\n\n.paraui-v3-drawer-panel-motion-right-leave-active {\n  transform: translateX(100%);\n}\n\n.paraui-v3-drawer-panel-motion-top-enter-start,\n.paraui-v3-drawer-panel-motion-top-appear-start,\n.paraui-v3-drawer-panel-motion-top-leave-start {\n  transition: none;\n}\n\n.paraui-v3-drawer-panel-motion-top-enter-active,\n.paraui-v3-drawer-panel-motion-top-appear-active,\n.paraui-v3-drawer-panel-motion-top-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-panel-motion-top-enter-start,\n.paraui-v3-drawer-panel-motion-top-appear-start {\n  transform: translateY(-100%) !important;\n}\n\n.paraui-v3-drawer-panel-motion-top-enter-active,\n.paraui-v3-drawer-panel-motion-top-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v3-drawer-panel-motion-top-leave {\n  transform: translateY(0);\n}\n\n.paraui-v3-drawer-panel-motion-top-leave-active {\n  transform: translateY(-100%);\n}\n\n.paraui-v3-drawer-panel-motion-bottom-enter-start,\n.paraui-v3-drawer-panel-motion-bottom-appear-start,\n.paraui-v3-drawer-panel-motion-bottom-leave-start {\n  transition: none;\n}\n\n.paraui-v3-drawer-panel-motion-bottom-enter-active,\n.paraui-v3-drawer-panel-motion-bottom-appear-active,\n.paraui-v3-drawer-panel-motion-bottom-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v3-drawer-panel-motion-bottom-enter-start,\n.paraui-v3-drawer-panel-motion-bottom-appear-start {\n  transform: translateY(100%) !important;\n}\n\n.paraui-v3-drawer-panel-motion-bottom-enter-active,\n.paraui-v3-drawer-panel-motion-bottom-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v3-drawer-panel-motion-bottom-leave {\n  transform: translateY(0);\n}\n\n.paraui-v3-drawer-panel-motion-bottom-leave-active {\n  transform: translateY(100%);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/8 下午2:51\n* @description drawer样式\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  pointer-events: none;\n}\n\n.paraui-v4-drawer-inline {\n  position: absolute;\n}\n\n.paraui-v4-drawer-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  background: rgba(29, 33, 38, 0.9);\n  pointer-events: auto;\n}\n\n.paraui-v4-drawer-content-wrapper {\n  position: absolute;\n  z-index: 1000;\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-content-wrapper-hidden {\n  display: none;\n}\n\n.paraui-v4-drawer-left > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-right > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-top > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  left: 0;\n  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-bottom > .paraui-v4-drawer-content-wrapper {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-content {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: rgb(255, 255, 255);\n  pointer-events: auto;\n  position: relative;\n}\n.paraui-v4-drawer-content .drawer-content-body {\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: none;\n  height: 50px;\n  padding: 0 20px;\n  font-size: 500;\n  font-weight: 700;\n  color: rgb(29, 33, 38);\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title-ellipsis {\n  overflow: hidden;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra {\n  margin-left: 30px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-align: right;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra button + button {\n  margin-left: 16px;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-content {\n  flex: 1;\n  padding: 20px;\n  overflow: auto;\n  word-wrap: break-word;\n  position: relative;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-footer {\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: 20px;\n  font-size: 500;\n  color: rgb(29, 33, 38);\n  border-top: 1px solid rgb(234, 236, 241);\n}\n\n.panel-motion-enter-start,\n.panel-motion-appear-start,\n.panel-motion-leave-start {\n  transition: none;\n}\n\n.panel-motion-enter-active,\n.panel-motion-appear-active,\n.panel-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active,\n.paraui-v4-drawer-mask-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter,\n.paraui-v4-drawer-mask-motion-appear {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave-active {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start,\n.paraui-v4-drawer-panel-motion-left-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active,\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start {\n  transform: translateX(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transform: translateX(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start,\n.paraui-v4-drawer-panel-motion-right-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active,\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start {\n  transform: translateX(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transform: translateX(100%);\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start,\n.paraui-v4-drawer-panel-motion-top-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active,\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start {\n  transform: translateY(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transform: translateY(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start,\n.paraui-v4-drawer-panel-motion-bottom-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active,\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start {\n  transform: translateY(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transform: translateY(100%);\n}";
 styleInject(css_248z);
 
 //drawer 抽屉
@@ -64,7 +64,7 @@ var Drawer = function Drawer(props) {
     cancelButtonProps = props.cancelButtonProps,
     _props$push = props.push,
     push = _props$push === void 0 ? {
-      distance: 180
+      distance: 100
     } : _props$push,
     restProps = __rest(props, ["className", "onClose", "destroyOnClose", "style", "title", "extra", "showExtra", "footer", "children", "size", "onOk", "onCancel", "afterVisibleChange", "okButtonProps", "cancelButtonProps", "push"]);
   var intl = useFormatMessage('Drawer', localeJson);
@@ -87,8 +87,8 @@ var Drawer = function Drawer(props) {
       return {};
     }
     var sizeMap = {
-      large: '1008px',
-      medium: '608px',
+      large: '1000px',
+      medium: '630px',
       small: '400px'
     };
     var offsetStyle = {};

package/Drawer/interface.d.ts

@@ -23,7 +23,7 @@ export interface DrawerProps {
     handler?: React.ReactElement | null | false;
     /** 抽屉的方向 */
     placement?: IPlacement;
-    /** 预设抽屉宽度（或高度），large 1008px, medium 608px,small 400px */
+    /** 预设抽屉宽度（或高度）, large 1000px, medium 630px, small 400px */
     size?: 'small' | 'medium' | 'large' | 'auto';
     /** 层级元素 */
     level?: null | string | string[];
@@ -83,7 +83,7 @@ export interface DrawerProps {
     okButtonProps?: ButtonProps;
     /** 取消按钮属性*/
     cancelButtonProps?: ButtonProps;
-    /** 设置多层抽屉的推动行为  默认值 { distance: 180 }*/
+    /** 设置多层抽屉的推动行为  默认值 { distance: 100 }*/
     push?: boolean | {
         distance: string | number;
     };

package/Dropdown/index.js

@@ -1,10 +1,10 @@
 import 'react/jsx-runtime';
 import 'react';
 import 'rc-dropdown';
-import '../_verture/constant-66aa48a1.js';
+import '../_verture/constant-0d9802f7.js';
 import '../_verture/usePopupContainer-87febeb9.js';
 import 'clsx';
-export { D as Dropdown, D as default } from '../_verture/index-77f9e0fb.js';
+export { D as Dropdown, D as default } from '../_verture/index-e9007d6a.js';
 import '@paraview/lib';
 import 'dayjs';
 import '../_verture/style-inject.es-300983ab.js';

package/DynamicMultiBox/index.js

@@ -1,6 +1,6 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect, useMemo } from 'react';
 import { Popover } from '../Popover/index.js';
@@ -21,15 +21,16 @@ import DatePicker from '../DatePicker/index.js';
 import AutoTips from '../AutoTips/index.js';
 import { UUID } from '@paraview/lib';
 import { s as sortable_esm } from '../_verture/sortable.esm-49896035.js';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/typeof-498dd2b1.js';
+import '../_verture/typeof-adeedc13.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
+import '@para-ui/icons/Forbid';
 import '../_verture/usePopupContainer-87febeb9.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
@@ -37,12 +38,12 @@ import '../Checkbox/index.js';
 import '../HelperText/index.js';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
-import '@para-ui/icons/CloseCircle';
+import '@para-ui/icons/CloseCircleF';
 import '../Loading/index.js';
 import '@para-ui/icons/LoadingF';
 import '../_verture/useGlobalProps-1b846a65.js';
 import '@para-ui/core/GlobalContext';
-import '../_verture/index-77f9e0fb.js';
+import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
 import 'dayjs';
 import '../Empty/index.js';
@@ -53,14 +54,13 @@ import '@para-ui/icons/Search';
 import 'rc-switch';
 import 'rc-input-number';
 import '@para-ui/icons/Up';
-import '@para-ui/icons/Minus';
-import '@para-ui/icons/Plus';
 import '../MultiBox/index.js';
-import '@para-ui/icons/Application';
-import '../_verture/index-beef914f.js';
+import '@para-ui/icons/Internet';
+import '../_verture/index-d63bd287.js';
+import '../_verture/typeof-b240b062.js';
+import '@para-ui/icons/CloseCircle';
 import '../Table/index.js';
 import '../Button/index.js';
-import '@para-ui/icons/Forbid';
 import '@para-ui/icons/ScreenF';
 import '@para-ui/icons/UpTriangleF';
 import '@para-ui/icons/DownTriangleF';
@@ -69,21 +69,23 @@ import '../OperateBtn/index.js';
 import '@para-ui/icons/More';
 import '@para-ui/icons/Refresh';
 import '../Pagination/index.js';
-import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/Left';
 import 'rc-pagination';
 import '@para-ui/icons/Right';
+import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
-import '../_verture/index-11e04b7f.js';
+import '../_verture/index-7ec72724.js';
 import 'rc-tree';
 import '@para-ui/icons/Document';
 import 'react-dom';
 import '@para-ui/icons/EditFile';
 import '@para-ui/icons/PlusCircle';
 import '@para-ui/icons/MoreCircle';
-import '../_verture/utils-c9b9a157.js';
+import '../_verture/utils-f0e81540.js';
 import 'rc-picker/es/generate/dayjs';
 import '../Tag/index.js';
+import '@para-ui/icons/EditOutline';
+import '@para-ui/icons/Plus';
 import 'rc-picker';
 import '@para-ui/icons/Calendar';
 import '@para-ui/icons/Time';
@@ -191,17 +193,16 @@ var FormItem = function FormItem(props) {
    */
   var getSelection = function getSelection() {
     var selectList = typeof list === 'function' ? list && list(rowIndex, id, name, valueList) : list || [];
-    return jsx(Select, Object.assign({
-      getPopupContainer: function getPopupContainer() {
-        return document.body;
-      }
-    }, rest, {
+    return jsx(Select, Object.assign({}, rest, {
       list: selectList,
       required: false,
       label: '',
       disabled: disabled,
       onChange: function onChange(value) {
         return inputChange(value);
+      },
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
       }
     }));
   };
@@ -358,7 +359,7 @@ var RowForm = function RowForm(props) {
             onChange: function onChange(id, value) {
               return _onChange(id, value, (data === null || data === void 0 ? void 0 : data.name) || '');
             }
-          }), index !== len - 1 && jsx("div", Object.assign({
+          }), index !== len - 1 && icon && jsx("div", Object.assign({
             className: 'form-item-icon'
           }, {
             children: icon
@@ -914,7 +915,7 @@ var en = {
 };
 
 var zh = {
-  add: '新 增',
+  add: '添 加',
   titleForm: '表单配置 (非必填项)',
   default: '恢复默认',
   noData: '暂无其他属性'
@@ -925,7 +926,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v3-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 12px;\n  flex-shrink: 0;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  margin: 0 3px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 80px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  height: 56px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .paraui-v3-select {\n  overflow: hidden;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 12px;\n  flex-shrink: 0;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 12px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 36px;\n  min-width: 80px;\n}\n.paraui-v3-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 36px;\n  background: rgba(171, 176, 185, 0.12);\n  border: 1px dashed rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 8px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-add-button-top-20 {\n  margin-top: 20px;\n}\n.paraui-v3-dynamic-multi-box .normal-button {\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .normal-button .text {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .normal-button:hover {\n  background: rgba(54, 102, 214, 0.05);\n  border: 1px dashed rgba(54, 102, 214, 0.4);\n}\n.paraui-v3-dynamic-multi-box .disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v3-dynamic-multi-box .disabled-add .text {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-dynamic-multi-box .disabled-add svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-dynamic-multi-box .paraui-v3-comboselect,\n.paraui-v3-dynamic-multi-box .paraui-v3-picker-wrapper {\n  width: 100%;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgba(46, 55, 67, 0.4);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v3-dynamic-multi-box-popover .filter-config {\n  width: 200px;\n  max-height: 300px;\n  padding-top: 16px;\n  overflow-y: auto;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list {\n  padding: 0 12px;\n  overflow-y: auto;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.4);\n  margin-bottom: 12px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .paraui-v3-check-box {\n  margin-bottom: 22px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .paraui-v3-check-box:last-child {\n  margin-bottom: 22px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: sticky;\n  width: 100%;\n  left: 0;\n  bottom: 0;\n  top: -2px;\n  height: 44px;\n  color: rgb(54, 102, 214);\n  cursor: pointer;\n  border-top: 1px solid rgba(171, 176, 185, 0.12);\n  background-color: #fff;\n}\n.paraui-v3-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 32px;\n  min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  background: rgb(247, 248, 250);\n  border: 1px dashed rgb(212, 218, 227);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n  margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n  background: rgb(240, 245, 255);\n  border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgb(161, 168, 179);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n  width: 140px;\n  padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n  padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n  padding: 0 10px;\n  margin-bottom: 0;\n  line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}";
 styleInject(css_248z);
 
 var DynamicMultiBox = function DynamicMultiBox(props) {
@@ -973,6 +974,14 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     selectedConfig = _useState6[0],
     setSelectedConfig = _useState6[1];
+  var constData = useRef({});
+  useEffect(function () {
+    window.addEventListener('resize', monitorScroll);
+    return function () {
+      window.removeEventListener('resize', monitorScroll);
+      clearTimeout(constData.current.timerScroll);
+    };
+  }, []);
   useEffect(function () {
     if (checkedValue) setChecked(checkedValue);
   }, [checkedValue]);
@@ -992,17 +1001,11 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     })) || [];
     setSelectedConfig(selectedArr);
   }, [config, checked]);
-  /**
-   * @desc 内容产生滚动时，给新增按增加marginTop: 20
-   * */
-  useEffect(function () {
-    monitorScroll();
-  }, []);
   /**
    * @desc 筛选回调
    * */
   var onCheckChange = function onCheckChange(val) {
-    // 1、更新selectedConfig配置 2、更新valueList 3、更新errors
+    // 1、更新selectedConfig配置 2、更新valueList 3、更新error
     // 区分正选反选
     var bool = (val === null || val === void 0 ? void 0 : val.length) > (checked === null || checked === void 0 ? void 0 : checked.length);
     // 当前选中数据和上一次选择数据取差值
@@ -1027,11 +1030,20 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
   };
   /** 监听内容是否产生横向滚动*/
   var monitorScroll = function monitorScroll() {
-    setTimeout(function () {
-      var _a, _b, _c, _d;
-      var dom = document.querySelector('#multi-value-add-button');
-      if (((_a = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) < ((_b = domRef === null || domRef === void 0 ? void 0 : domRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth)) (_c = dom === null || dom === void 0 ? void 0 : dom.classList) === null || _c === void 0 ? void 0 : _c.add('multi-value-add-button-top-20');else (_d = dom === null || dom === void 0 ? void 0 : dom.classList) === null || _d === void 0 ? void 0 : _d.remove('multi-value-add-button-top-20');
-    }, 0);
+    var domRefEle = domRef === null || domRef === void 0 ? void 0 : domRef.current;
+    if (!domRefEle) return;
+    var contentDomEle = domRefEle.querySelector('.multi-value-content');
+    if (!contentDomEle) return;
+    var btnDomEle = domRefEle.querySelector('.add-button');
+    if (!btnDomEle) return;
+    clearTimeout(constData.current.timerScroll);
+    constData.current.timerScroll = setTimeout(function () {
+      if (contentDomEle.offsetWidth < contentDomEle.scrollWidth) {
+        btnDomEle.classList.add('add-button-scroll');
+      } else {
+        btnDomEle.classList.remove('add-button-scroll');
+      }
+    }, 50);
   };
   /**
    * @desc 筛选恢复默认,
@@ -1048,6 +1060,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
       valueList: valueArr,
       errors: errorArr
     });
+    monitorScroll();
   };
   /**
    * @desc 数据重置
@@ -1184,7 +1197,11 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
             className: 'operator-column-icon-panel',
             ref: panelRef
           }, {
-            children: jsx(Panel, {})
+            children: jsx("div", Object.assign({
+              className: 'svg-box'
+            }, {
+              children: jsx(Panel, {})
+            }))
           }))
         }))]
       }))]
@@ -1357,11 +1374,11 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     return str;
   };
   return jsxs("div", Object.assign({
-    className: handClass()
+    className: handClass(),
+    ref: domRef
   }, {
     children: [jsxs("div", Object.assign({
-      className: "multi-value-content",
-      ref: domRef
+      className: "multi-value-content"
     }, {
       children: [renderTitle, jsx(dist.exports.ReactSortable, Object.assign({
         list: valueList,
@@ -1373,8 +1390,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
       }))]
     })), jsxs("div", Object.assign({
       className: "add-button ".concat(disabledAdd ? 'disabled-add' : 'normal-button'),
-      onClick: onAddEvent,
-      id: 'multi-value-add-button'
+      onClick: onAddEvent
     }, {
       children: [jsx(PlusCircleF, {}), jsx("span", Object.assign({
         className: "text"

package/DynamicMultiBox/interface.d.ts

@@ -86,16 +86,16 @@ export interface IMultiValueProps {
      * @param errors 新增后错误集合
      *  */
     onAdd?: (valueList: IValueList[], errors: IErrors[]) => void;
+    /**
+     * 自定义删除
+     * */
+    deleteRender?: (index: number, item: IValueList, valueList: IValueList[]) => ReactNode;
     /**
      * @desc 删除，
      * @param valueList 删除后整个valueList值集合
      * @param deleteItem 删除项
      */
     onDelete?: (valueList: IValueList[], errors: IErrors[]) => void;
-    /**
-     * 自定义删除
-     * */
-    deleteRender?: (index: number, item: IValueList, valueList: IValueList[]) => ReactNode;
     /**
      * @desc 筛选函数
      * @param name 当前筛选项的name

package/Empty/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { u as useGlobalProps } from '../_verture/useGlobalProps-1b846a65.js';
-import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import 'react';
 import '@para-ui/core/GlobalContext';
@@ -566,7 +566,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/2 上午10:55\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-empty {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n}\n.paraui-v3-empty > .empty-image {\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v3-empty > .empty-image img {\n  width: 100%;\n}\n.paraui-v3-empty .empty-image-large {\n  width: 334px;\n  height: 238px;\n}\n.paraui-v3-empty .empty-image-small {\n  width: 120px;\n  height: 120px;\n}\n.paraui-v3-empty > .empty-description {\n  line-height: 17px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-empty > .empty-description > .empty-description-refresh {\n  display: inline-block;\n}\n.paraui-v3-empty > .empty-description > .empty-description-refresh span {\n  color: rgb(54, 102, 214);\n  cursor: pointer;\n}\n.paraui-v3-empty.paraui-v3-empty-large > .empty-description {\n  margin-top: 24px;\n}\n.paraui-v3-empty.paraui-v3-empty-small > .empty-description {\n  margin-top: 12px;\n  font-size: 12px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/2 上午10:55\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-empty {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n}\n.paraui-v4-empty > .empty-image {\n  line-height: 0;\n  overflow: hidden;\n}\n.paraui-v4-empty > .empty-image img {\n  width: 100%;\n}\n.paraui-v4-empty .empty-image-large {\n  width: 334px;\n  height: 238px;\n}\n.paraui-v4-empty .empty-image-small {\n  width: 120px;\n  height: 120px;\n}\n.paraui-v4-empty > .empty-description {\n  line-height: 17px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-empty > .empty-description > .empty-description-refresh {\n  display: inline-block;\n}\n.paraui-v4-empty > .empty-description > .empty-description-refresh span {\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n}\n.paraui-v4-empty.paraui-v4-empty-large > .empty-description {\n  margin-top: 24px;\n}\n.paraui-v4-empty.paraui-v4-empty-small > .empty-description {\n  margin-top: 10px;\n  font-size: 12px;\n}";
 styleInject(css_248z);
 
 var imageMap = {