@para-ui/core 4.0.47 → 4.0.49

package/Badge/index.d.ts

@@ -20,6 +20,8 @@ export interface BadgeProps {
     color?: string;
     /** 偏移量 */
     offset?: [number, number];
+    /** 定位方向 默认 top-right */
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 export declare const Badge: FunctionComponent<BadgeProps>;
 export default Badge;

package/Badge/index.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import clsx from 'clsx';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-badge {\n  display: inline-block;\n  line-height: 1;\n  position: relative;\n}\n.paraui-v4-badge > .pos-box {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n  transform-origin: 100% 0%;\n  height: 12px;\n  display: inline-block;\n  background-color: rgb(244, 66, 66);\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-badge > .pos-box.dot {\n  border-radius: 50%;\n  width: 8px;\n  height: 8px;\n}\n.paraui-v4-badge > .pos-box.number, .paraui-v4-badge > .pos-box.text {\n  border-radius: 8px;\n  font-size: 12px;\n  min-width: 12px;\n  text-align: center;\n  line-height: 12px;\n  padding: 0 3px;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-badge > .pos-box.number > span, .paraui-v4-badge > .pos-box.text > span {\n  transform: scale(0.8);\n  display: inline-block;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-badge {\n  display: inline-block;\n  line-height: 1;\n  position: relative;\n}\n.paraui-v4-badge > .pos-box {\n  position: absolute;\n  height: 12px;\n  display: inline-block;\n  background-color: rgb(244, 66, 66);\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-badge > .pos-box.dot {\n  border-radius: 50%;\n  width: 8px;\n  height: 8px;\n}\n.paraui-v4-badge > .pos-box.number, .paraui-v4-badge > .pos-box.text {\n  border-radius: 8px;\n  font-size: 12px;\n  min-width: 12px;\n  text-align: center;\n  line-height: 12px;\n  padding: 0 3px;\n  max-width: 60px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-badge > .pos-box.number > span, .paraui-v4-badge > .pos-box.text > span {\n  transform: scale(0.8);\n  display: inline-block;\n}\n.paraui-v4-badge.paraui-v4-badge-top-left > .pos-box {\n  top: 0;\n  left: 0;\n  transform: translate(-50%, -50%);\n}\n.paraui-v4-badge.paraui-v4-badge-top-right > .pos-box {\n  top: 0;\n  right: 0;\n  transform: translate(50%, -50%);\n}\n.paraui-v4-badge.paraui-v4-badge-bottom-left > .pos-box {\n  bottom: 0;\n  left: 0;\n  transform: translate(-50%, 50%);\n}\n.paraui-v4-badge.paraui-v4-badge-bottom-right > .pos-box {\n  bottom: 0;\n  right: 0;\n  transform: translate(50%, 50%);\n}";
 styleInject(css_248z);
 
 const Badge = props => {
@@ -14,8 +15,29 @@ const Badge = props => {
     sign,
     backgroundColor,
     color,
-    offset
+    offset,
+    placement = 'top-right'
   } = props;
+  const constData = useRef({
+    offsetPos: {
+      'top-left': {
+        offsetX: 'left',
+        offsetY: 'top'
+      },
+      'top-right': {
+        offsetX: 'right',
+        offsetY: 'top'
+      },
+      'bottom-left': {
+        offsetX: 'left',
+        offsetY: 'bottom'
+      },
+      'bottom-right': {
+        offsetX: 'right',
+        offsetY: 'bottom'
+      }
+    }
+  });
   // 判断数据类型
   const handleType = () => {
     const type = typeof sign;
@@ -35,8 +57,10 @@ const Badge = props => {
       color
     };
     if (offset) {
-      styleSign.right = -offset[0] + 'px';
-      styleSign.marginTop = offset[1] + 'px';
+      const offsetX = constData.current.offsetPos[placement].offsetX;
+      const offsetY = constData.current.offsetPos[placement].offsetY;
+      styleSign[offsetX] = -offset[0] + 'px';
+      styleSign[offsetY] = offset[1] + 'px';
     }
     return jsxs("span", Object.assign({
       className: "pos-box ".concat(type),
@@ -55,7 +79,7 @@ const Badge = props => {
     return sign;
   };
   return jsxs("span", Object.assign({
-    className: clsx("".concat($prefixCls, "-badge"), "".concat($prefixCls, "-badge-").concat(type), className),
+    className: clsx("".concat($prefixCls, "-badge ").concat($prefixCls, "-badge-").concat(type, " ").concat($prefixCls, "-badge-").concat(placement), className),
     style: style
   }, {
     children: [children, handleSign()]

package/README.md

@@ -1,3 +1,13 @@
+## 🎉 para-ui/core@4.0.49 发布
+
+🎁【Feature】
+- 【Dragger-拖拽】支持height
+
+## 🎉 para-ui/core@4.0.48 发布
+
+🔧【Bugfix】
+- 【消息角标-Badge】消息角标新增placement，支持4个角落定位
+
 ## 🎉 para-ui/core@4.0.47 发布
 
 🔧【Bugfix】

package/SelectorPicker/index.js

@@ -57,8 +57,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh,
-  en
+  zh: zh,
+  en: en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 38px 0 10px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgb(234, 236, 241);\n  border-radius: 2px;\n  padding: 0 10px;\n  color: rgb(29, 33, 38);\n  margin-right: 4px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(29, 33, 38);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgb(161, 168, 179);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgb(247, 248, 250);\n  cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown {\n  padding: 4px 0;\n}\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n  border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content .paraui-v4-selector-main.paraui-v4-selector-main-search .selectot-main-search {\n  margin-bottom: 4px;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content .paraui-v4-selector-main .selector-main-content .nav-box {\n  margin-top: 2px;\n}\n.paraui-v4-selector-picker-dropdown.paraui-v4-selector-picker-dropdown-search {\n  padding-top: 0;\n}\n\n.paraui-v4-selector-more-popover {\n  /*// 小\n  &.paraui-v4-selector-more-popover-small {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 28px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 28px;\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-selector-more-popover-medium {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 32px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 32px;\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-selector-more-popover-large {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 36px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 36px;\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n  width: 290px;\n  padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 10px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 18px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n  border-radius: 2px;\n}";

package/Stepper/index.js

@@ -24,7 +24,7 @@ import '@para-ui/icons/Forbid';
 import '@paraview/lib';
 
 //默认图标
-const Icons = {
+var Icons = {
   1: jsx(One, {
     size: "medium"
   }),

package/Tabs/index.js

@@ -42,8 +42,8 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:29\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav {\n  height: 32px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav .component-tabs-tab {\n  height: 24px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.paraui-v4-tabs-medium .component-tabs-nav .component-tabs-nav-operations {\n  height: 100%;\n}\n\n/**\n* @author Hanz\n* @date 2022/5/30 上午10:44\n* @description\n*/\n.paraui-v4-tabs.component-tabs-top, .paraui-v4-tabs.component-tabs-bottom {\n  flex-direction: column;\n}\n.paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-bottom > div > .component-tabs-nav {\n  padding: 0 20px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-line.component-nav-padding.component-tabs-right > div > .component-tabs-nav {\n  padding: 20px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  margin: 0 0 16px 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  position: absolute;\n  right: 0;\n  left: 0;\n  border-bottom: 1px solid rgb(234, 236, 241);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  height: 1px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: width 0.3s, left 0.3s, right 0.3s;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  top: 0;\n  bottom: 0;\n  width: 30px;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  left: 0;\n  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-left::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-right::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav::before {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-top > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-top > div > .component-tabs-nav .component-tabs-ink-bar {\n  bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav {\n  order: 1;\n  margin-top: 16px;\n  margin-bottom: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav::before, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav::before {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-nav .component-tabs-ink-bar {\n  top: 0;\n}\n.paraui-v4-tabs.component-tabs-bottom > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-bottom > div > .component-tabs-content-holder {\n  order: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  flex-direction: column;\n  min-width: 50px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab {\n  padding: 0 12px;\n  text-align: center;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin: 8px 0 0 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap {\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  right: 0;\n  left: 0;\n  height: 30px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::before {\n  top: 0;\n  box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  bottom: 0;\n  box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-top::before {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-wrap.component-tabs-nav-wrap-ping-bottom::after {\n  opacity: 1;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  width: 1px;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar-animated, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar-animated {\n  transition: height 0.3s, top 0.3s;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-nav-operations {\n  flex: 1 0 auto;\n  flex-direction: column;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-nav .component-tabs-ink-bar {\n  right: 0;\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder {\n  margin-left: -1px;\n  border-left: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-tabs.component-tabs-left > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-left > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-left: 20px;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav {\n  order: 1;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-nav .component-tabs-ink-bar {\n  left: 0;\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder {\n  order: 0;\n  margin-right: -1px;\n  border-right: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-tabs.component-tabs-right > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane, .paraui-v4-tabs.component-tabs-right > div > .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding-right: 20px;\n}\n\n.component-tabs-dropdown {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgba(0, 0, 0, 0.85);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  position: absolute;\n  top: -9999px;\n  left: -9999px;\n  z-index: 1050;\n  display: block;\n}\n.component-tabs-dropdown.component-tabs-dropdown-hidden {\n  display: none;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu {\n  max-height: 200px;\n  margin: 0;\n  padding: 4px 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  text-align: left;\n  list-style-type: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border-radius: 4px;\n  outline: none;\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item {\n  display: flex;\n  align-items: center;\n  min-width: 140px;\n  margin: 0;\n  padding: 5px 10px;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help {\n  display: inline-flex;\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(161, 168, 179);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item .component-tabs-tab-help .paraui-v4-help svg {\n  color: inherit;\n  font-size: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item > span {\n  flex: 1;\n  white-space: nowrap;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove {\n  flex: none;\n  margin-left: 12px;\n  margin-top: 2px;\n  color: rgb(92, 101, 115);\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove svg {\n  color: inherit;\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-remove:hover {\n  color: rgb(87, 131, 235);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item:hover {\n  background: rgb(247, 248, 250);\n}\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled,\n.component-tabs-dropdown .component-tabs-dropdown-menu-item-disabled:hover {\n  color: rgb(161, 168, 179);\n  background: transparent;\n  cursor: not-allowed;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-leave {\n  animation-duration: 0.2s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tabs-slide-up-enter.component-tabs-slide-up-enter-active,\n.component-tabs-slide-up-appear.component-tabs-slide-up-appear-active {\n  animation-name: componentTabsSlideUpIn;\n  animation-play-state: running;\n}\n\n.component-tabs-slide-up-leave.component-tabs-slide-up-leave-active {\n  animation-name: componentTabsSlideUpOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tabs-slide-up-enter,\n.component-tabs-slide-up-appear {\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.component-tabs-slide-up-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n\n@keyframes componentTabsSlideUpIn {\n  0% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n  100% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n}\n@keyframes componentTabsSlideUpOut {\n  0% {\n    transform: scaleY(1);\n    transform-origin: 0% 0%;\n    opacity: 1;\n  }\n  100% {\n    transform: scaleY(0.8);\n    transform-origin: 0% 0%;\n    opacity: 0;\n  }\n}\n.paraui-v4-tabs {\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  line-height: 1.5715;\n  display: flex;\n  background-color: rgb(255, 255, 255);\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap {\n  position: relative;\n  display: flex;\n  flex: auto;\n  align-self: stretch;\n  overflow: hidden;\n  white-space: nowrap;\n  transform: translate(0);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::before, .paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-wrap::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-wrap::after {\n  position: absolute;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  content: \"\";\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-list, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-list {\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  transition: transform 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations {\n  display: flex;\n  align-self: stretch;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-operations-hidden, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-operations-hidden {\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more {\n  position: relative;\n  padding: 8px;\n  background: transparent;\n  border: 0;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more:hover svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more:hover svg {\n  color: rgb(46, 101, 230);\n  transition: all 0.3s;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more svg {\n  font-size: 18px;\n  vertical-align: top;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-more::after, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-more::after {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  transform: translateY(100%);\n  content: \"\";\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add {\n  min-width: 40px;\n  margin-left: 2px;\n  padding: 0 8px;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n  color: rgb(29, 33, 38);\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add svg, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add svg {\n  color: inherit;\n}\n.paraui-v4-tabs.component-tabs > .component-tabs-nav .component-tabs-nav-add:hover, .paraui-v4-tabs.component-tabs > div > .component-tabs-nav .component-tabs-nav-add:hover {\n  color: rgb(46, 101, 230);\n  border: 1px solid rgb(87, 131, 235);\n}\n.paraui-v4-tabs .component-tabs-extra-content {\n  flex: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-centered > .component-tabs-nav .component-tabs-nav-wrap, .paraui-v4-tabs.paraui-v4-tabs-centered > div > .component-tabs-nav .component-tabs-nav-wrap {\n  justify-content: center;\n}\n.paraui-v4-tabs .component-tabs-ink-bar {\n  position: absolute;\n  background: rgb(46, 101, 230);\n  pointer-events: none;\n}\n.paraui-v4-tabs .component-tabs-tab {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  height: 40px;\n  padding: 0 10px;\n  font-size: 14px;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v4-tabs .component-tabs-tab:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs .component-tabs-tab-btn {\n  outline: none;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help {\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help {\n  display: inline-flex;\n  margin-left: 4px;\n  font-size: 16px;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .component-tabs-tab-help .paraui-v4-help svg {\n  margin-right: 0;\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-btn .paraui-v4-radio {\n  margin-right: 8px;\n}\n.paraui-v4-tabs .component-tabs-tab-remove {\n  display: inline-flex;\n  flex: none;\n  margin-right: -4px;\n  margin-left: 4px;\n  color: rgb(92, 101, 115);\n  font-size: 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tab-remove:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs .component-tabs-tab-remove svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab-remove span {\n  display: inline-flex;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  font-weight: 400;\n  text-shadow: 0 0 0.25px currentcolor;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-active .component-tabs-tab-btn {\n  color: inherit;\n}\n.paraui-v4-tabs .component-tabs-tab.component-tabs-tab-disabled {\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}\n.paraui-v4-tabs .component-tabs-tab .component-tabs-tab-remove svg {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-tab svg {\n  margin-right: 12px;\n}\n.paraui-v4-tabs .component-tabs-tab + .component-tabs-tab {\n  margin: 0;\n}\n.paraui-v4-tabs .component-tabs-content {\n  display: flex;\n  width: 100%;\n}\n.paraui-v4-tabs .component-tabs-content-holder {\n  flex: auto;\n  min-width: 0;\n  min-height: 0;\n}\n.paraui-v4-tabs .component-tabs-content-animated {\n  transition: margin 0.3s;\n}\n.paraui-v4-tabs .component-tabs-tabpane {\n  flex: none;\n  width: 100%;\n  outline: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-line .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add, .paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-nav .component-tabs-nav-add {\n  min-width: initial;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  align-self: center;\n  margin-left: 10px;\n  padding: 0;\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(212, 218, 227);\n  border-radius: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track {\n  display: inline-flex;\n  max-width: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav {\n  height: 36px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-wrap {\n  padding: 0 4px;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-nav-add {\n  margin-right: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab {\n  height: 28px;\n  margin: 4px 0;\n  padding: 0 10px;\n  border-radius: 2px;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n  text-shadow: none;\n  background-color: rgb(255, 255, 255);\n  font-weight: 400;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-nav, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-nav {\n  max-width: 200px;\n  height: auto;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-left .component-tabs-content-holder, .paraui-v4-tabs.paraui-v4-tabs-track.component-tabs-right .component-tabs-content-holder {\n  border-left: 0;\n  border-right: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-track .component-tabs-content-holder > .component-tabs-content > .component-tabs-tabpane {\n  padding: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-editable-track .component-tabs-nav {\n  border-radius: 4px;\n}\n.paraui-v4-tabs.component-tabs.paraui-v4-tabs-track > .component-tabs-nav .component-tabs-nav-more {\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab {\n  margin: 0;\n  padding: 0 10px;\n  background: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab .component-tabs-tab-remove {\n  margin-left: 8px;\n  font-size: 14px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-tab-active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card > .component-tabs-nav .component-tabs-ink-bar, .paraui-v4-tabs.paraui-v4-tabs-card > div > .component-tabs-nav .component-tabs-ink-bar {\n  visibility: hidden;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-left: 0;\n  border-left: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:first-child {\n  border-top-left-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab:nth-last-child(2) {\n  border-top-right-radius: 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-top > div > .component-tabs-nav .component-tabs-tab-active {\n  border-bottom-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-bottom > div > .component-tabs-nav .component-tabs-tab-active {\n  border-top-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab + .component-tabs-tab {\n  margin-top: 0;\n  border-top: 0;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left > div > .component-tabs-nav .component-tabs-tab-active {\n  border-right-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > .component-tabs-nav .component-tabs-tab-active, .paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right > div > .component-tabs-nav .component-tabs-tab-active {\n  border-left-color: rgb(212, 218, 227);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-right .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card.component-tabs-left .component-tabs-nav .component-tabs-nav-add {\n  margin-left: 0;\n  margin-top: 2px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav:before {\n  display: none;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab {\n  border: 0;\n  transition: 0.3s;\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container > .component-tabs-nav .component-tabs-tab.component-tabs-tab-active {\n  border-radius: 4px 4px 0 0;\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-tabs.paraui-v4-tabs-card-container .component-tabs-content {\n  margin-top: -16px;\n  padding: 16px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 0 0 4px 4px;\n}\n.paraui-v4-tabs.paraui-v4-tabs-no-child:not(.paraui-v4-tabs-card-container) .component-tabs-nav {\n  margin: 0;\n}";

package/Upload/index.js

@@ -1664,7 +1664,7 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 });
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午1:40\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload .component-upload {\n  position: relative;\n  display: inline-block;\n}\n.paraui-v4-upload-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag {\n  position: relative;\n}\n.paraui-v4-upload-drag-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag-hover .upload-drag-container {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container {\n  display: inline-flex;\n  width: 100%;\n  height: 200px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1;\n  border: 1px dashed rgb(212, 218, 227);\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-drag .upload-drag-container:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container:hover .upload-drag-text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon {\n  line-height: 0;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon svg {\n  font-size: 48px;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon .upload-drag-loading {\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text {\n  margin: 16px 0 10px 0;\n  color: rgb(29, 33, 38);\n  padding: 0 20px;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-loading {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-filename {\n  margin-right: 5px;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-hint {\n  color: rgb(92, 101, 115);\n  padding: 0 20px;\n  text-align: center;\n  white-space: pre-wrap;\n  line-height: 21px;\n}\n.paraui-v4-upload-drag .component-upload {\n  display: block;\n  max-width: 590px;\n}\n.paraui-v4-upload-drag .component-upload-disabled {\n  color: rgb(92, 101, 115);\n  cursor: not-allowed;\n}\n.paraui-v4-upload-drag .component-upload-disabled > div {\n  width: 100%;\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container {\n  cursor: not-allowed;\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container .upload-drag-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container .upload-drag-text {\n  color: rgb(92, 101, 115);\n}\n@keyframes uploadLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午1:40\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload .component-upload {\n  position: relative;\n  display: inline-block;\n}\n.paraui-v4-upload-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag {\n  position: relative;\n}\n.paraui-v4-upload-drag-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag-hover .upload-drag-container {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container {\n  display: inline-flex;\n  width: 100%;\n  height: 200px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1;\n  border: 1px dashed rgb(212, 218, 227);\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-drag .upload-drag-container:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container:hover .upload-drag-text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon {\n  line-height: 0;\n  margin-bottom: 16px;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon svg {\n  font-size: 48px;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon .upload-drag-loading {\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text {\n  margin: 0 0 10px 0;\n  color: rgb(29, 33, 38);\n  padding: 0 20px;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-loading {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-filename {\n  margin-right: 5px;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-hint {\n  color: rgb(92, 101, 115);\n  padding: 0 20px;\n  text-align: center;\n  white-space: pre-wrap;\n  line-height: 21px;\n}\n.paraui-v4-upload-drag .component-upload {\n  display: block;\n  max-width: 590px;\n}\n.paraui-v4-upload-drag .component-upload-disabled {\n  color: rgb(92, 101, 115);\n  cursor: not-allowed;\n}\n.paraui-v4-upload-drag .component-upload-disabled > div {\n  width: 100%;\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container {\n  cursor: not-allowed;\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container .upload-drag-icon svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-upload-drag .component-upload-disabled .upload-drag-container .upload-drag-text {\n  color: rgb(92, 101, 115);\n}\n@keyframes uploadLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 styleInject(css_248z);
 
 //upload
@@ -1699,9 +1699,10 @@ const InternalUpload = props => {
       actionRender,
       onPreview,
       removeErrorTip,
-      defaultFile
+      defaultFile,
+      height
     } = props,
-    restProps = __rest(props, ["type", "className", "style", "onStart", "onSuccess", "onError", "onProgress", "onRemove", "beforeUpload", "onChange", "onDrop", "defaultFileList", "fileList", "showUploadList", "maxCount", "children", "itemRender", "showUploadError", "size", "stash", "uploading", "showLoading", "loading", "dragArea", "disabledTooltip", "operateBtnProps", "actionRender", "onPreview", "removeErrorTip", "defaultFile"]);
+    restProps = __rest(props, ["type", "className", "style", "onStart", "onSuccess", "onError", "onProgress", "onRemove", "beforeUpload", "onChange", "onDrop", "defaultFileList", "fileList", "showUploadList", "maxCount", "children", "itemRender", "showUploadError", "size", "stash", "uploading", "showLoading", "loading", "dragArea", "disabledTooltip", "operateBtnProps", "actionRender", "onPreview", "removeErrorTip", "defaultFile", "height"]);
   const intl = useFormatMessage('Upload', localeJson);
   const [uploadFileList, setUploadFileList] = useState(composeDefaultFileList(defaultFileList, defaultFile)); //文件列表
   const [showLoading, setShowLoading] = useState(false); //upload loading
@@ -1910,6 +1911,9 @@ const InternalUpload = props => {
       areaText = text,
       areaDesc = hint
     } = dragArea !== null && dragArea !== void 0 ? dragArea : {};
+    console.log('areaIcon', areaIcon);
+    console.log('areaText', areaText);
+    console.log('areaDesc', areaDesc);
     if (showLoading) {
       areaIcon = jsx(LoadingIcon, {
         className: 'upload-drag-loading'
@@ -1928,15 +1932,15 @@ const InternalUpload = props => {
     }
     const dragNode = jsx(Fragment, {
       children: children ? children : jsxs(Fragment, {
-        children: [jsx("p", Object.assign({
+        children: [areaIcon && jsx("p", Object.assign({
           className: "upload-drag-icon"
         }, {
           children: areaIcon
-        })), jsx("p", Object.assign({
+        })), areaText && jsx("p", Object.assign({
           className: 'upload-drag-text'
         }, {
           children: areaText
-        })), !showLoading && jsx("p", Object.assign({
+        })), !showLoading && areaDesc && jsx("p", Object.assign({
           className: "upload-drag-hint"
         }, {
           children: areaDesc
@@ -1949,12 +1953,18 @@ const InternalUpload = props => {
       disabled: true
     }, {
       children: jsx("div", Object.assign({
+        style: {
+          height
+        },
         className: 'upload-drag-container'
       }, {
         children: dragNode
       }))
     }));
     return jsx("div", Object.assign({
+      style: {
+        height
+      },
       className: 'upload-drag-container'
     }, {
       children: dragNode

package/Upload/interface.d.ts

@@ -167,6 +167,8 @@ export interface UploadProps<T = any> {
     removeErrorTip?: boolean;
     /** 默认文件 */
     defaultFile?: UploadFile<T>;
+    /** 上传高度 */
+    height?: number | string;
 }
 interface IActions {
     onRemove: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@para-ui/core",
   "private": false,
-  "version": "4.0.47",
+  "version": "4.0.49",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "description": "Powered by Para FED",

package/umd/Badge.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ParaUI=t(require("react")):e.ParaUI=t(e.react)}(self,(e=>(()=>{var t={47830:(e,t,n)=>{(t=n(76314)(!1)).push([e.id,".paraui-v4-badge{display:inline-block;line-height:1;position:relative}.paraui-v4-badge>.pos-box{position:absolute;top:0;right:0;transform:translate(50%, -50%);transform-origin:100% 0%;height:12px;display:inline-block;background-color:#f44242;color:#fff}.paraui-v4-badge>.pos-box.dot{border-radius:50%;width:8px;height:8px}.paraui-v4-badge>.pos-box.number,.paraui-v4-badge>.pos-box.text{border-radius:8px;font-size:12px;min-width:12px;text-align:center;line-height:12px;padding:0 3px;max-width:60px;overflow:hidden;text-overflow:ellipsis}.paraui-v4-badge>.pos-box.number>span,.paraui-v4-badge>.pos-box.text>span{transform:scale(0.8);display:inline-block}",""]),e.exports=t},76314:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var o=(i=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(s," */")),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[n].concat(a).concat([o]).join("\n")}var i,c,s;return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(o[i]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(n&&(s[2]?s[2]="".concat(n," and ").concat(s[2]):s[2]=n),t.push(s))}},t}},33653:(e,t,n)=>{var r=n(85072),o=n(47830);"string"==typeof(o=o.__esModule?o.default:o)&&(o=[[e.id,o,""]]);var a={insert:"head",singleton:!1};r(o,a);e.exports=o.locals||{}},85072:(e,t,n)=>{"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),i=[];function c(e){for(var t=-1,n=0;n<i.length;n++)if(i[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],o=0;o<e.length;o++){var a=e[o],s=t.base?a[0]+t.base:a[0],u=n[s]||0,l="".concat(s," ").concat(u);n[s]=u+1;var f=c(l),d={css:a[1],media:a[2],sourceMap:a[3]};-1!==f?(i[f].references++,i[f].updater(d)):i.push({identifier:l,updater:m(d,t),references:1}),r.push(l)}return r}function u(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(t)}return t}var l,f=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function d(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=f(t,o);else{var a=document.createTextNode(o),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function p(e,t,n){var r=n.css,o=n.media,a=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var v=null,b=0;function m(e,t){var n,r,o;if(t.singleton){var a=b++;n=v||(v=u(t)),r=d.bind(null,n,a,!1),o=d.bind(null,n,a,!0)}else n=u(t),r=p.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=c(n[r]);i[o].references--}for(var a=s(e,t),u=0;u<n.length;u++){var l=c(n[u]);0===i[l].references&&(i[l].updater(),i.splice(l,1))}n=a}}}},39155:t=>{"use strict";t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={id:e,exports:{}};return t[e](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};return(()=>{"use strict";r.r(o),r.d(o,{Badge:()=>c,default:()=>s});var e=r(39155),t=r.n(e),n="paraui-v4";function a(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=a(e[t]))&&(r&&(r+=" "),r+=n);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function i(){for(var e,t,n=0,r="";n<arguments.length;)(e=arguments[n++])&&(t=a(e))&&(r&&(r+=" "),r+=t);return r}r(33653);var c=function(e){var r=e.className,o=e.style,a=e.children,c=e.sign,s=e.backgroundColor,u=e.color,l=e.offset,f=function(){var e,t=void 0===c?"undefined":(e=c)&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e;return"undefined"===t?"dot":"number"===t?"number":null===c?"null":"text"}(),d=function(){return Number(c)>999?"999+":c};return t().createElement("span",{className:i("".concat(n,"-badge"),"".concat(n,"-badge-").concat(f),r),style:o},a,function(){if(null===f)return null;var e={backgroundColor:s,color:u};return l&&(e.right=-l[0]+"px",e.marginTop=l[1]+"px"),t().createElement("span",{className:"pos-box ".concat(f),style:e},"number"===f&&t().createElement("span",null,d()),"text"===f&&t().createElement("span",null,c))}())};const s=c})(),o})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ParaUI=t(require("react")):e.ParaUI=t(e.react)}(self,(e=>(()=>{var t={47830:(e,t,o)=>{(t=o(76314)(!1)).push([e.id,".paraui-v4-badge{display:inline-block;line-height:1;position:relative}.paraui-v4-badge>.pos-box{position:absolute;height:12px;display:inline-block;background-color:#f44242;color:#fff}.paraui-v4-badge>.pos-box.dot{border-radius:50%;width:8px;height:8px}.paraui-v4-badge>.pos-box.number,.paraui-v4-badge>.pos-box.text{border-radius:8px;font-size:12px;min-width:12px;text-align:center;line-height:12px;padding:0 3px;max-width:60px;overflow:hidden;text-overflow:ellipsis}.paraui-v4-badge>.pos-box.number>span,.paraui-v4-badge>.pos-box.text>span{transform:scale(0.8);display:inline-block}.paraui-v4-badge.paraui-v4-badge-top-left>.pos-box{top:0;left:0;transform:translate(-50%, -50%)}.paraui-v4-badge.paraui-v4-badge-top-right>.pos-box{top:0;right:0;transform:translate(50%, -50%)}.paraui-v4-badge.paraui-v4-badge-bottom-left>.pos-box{bottom:0;left:0;transform:translate(-50%, 50%)}.paraui-v4-badge.paraui-v4-badge-bottom-right>.pos-box{bottom:0;right:0;transform:translate(50%, 50%)}",""]),e.exports=t},76314:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var o=function(e,t){var o=e[1]||"",r=e[3];if(!r)return o;if(t&&"function"==typeof btoa){var n=(i=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),a=r.sources.map((function(e){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(e," */")}));return[o].concat(a).concat([n]).join("\n")}var i,s,c;return[o].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(o,"}"):o})).join("")},t.i=function(e,o,r){"string"==typeof e&&(e=[[null,e,""]]);var n={};if(r)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(n[i]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);r&&n[c[0]]||(o&&(c[2]?c[2]="".concat(o," and ").concat(c[2]):c[2]=o),t.push(c))}},t}},33653:(e,t,o)=>{var r=o(85072),n=o(47830);"string"==typeof(n=n.__esModule?n.default:n)&&(n=[[e.id,n,""]]);var a={insert:"head",singleton:!1};r(n,a);e.exports=n.locals||{}},85072:(e,t,o)=>{"use strict";var r,n=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},a=function(){var e={};return function(t){if(void 0===e[t]){var o=document.querySelector(t);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}e[t]=o}return e[t]}}(),i=[];function s(e){for(var t=-1,o=0;o<i.length;o++)if(i[o].identifier===e){t=o;break}return t}function c(e,t){for(var o={},r=[],n=0;n<e.length;n++){var a=e[n],c=t.base?a[0]+t.base:a[0],u=o[c]||0,f="".concat(c," ").concat(u);o[c]=u+1;var l=s(f),d={css:a[1],media:a[2],sourceMap:a[3]};-1!==l?(i[l].references++,i[l].updater(d)):i.push({identifier:f,updater:m(d,t),references:1}),r.push(f)}return r}function u(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var n=o.nc;n&&(r.nonce=n)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var i=a(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(t)}return t}var f,l=(f=[],function(e,t){return f[e]=t,f.filter(Boolean).join("\n")});function d(e,t,o,r){var n=o?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=l(t,n);else{var a=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(a,i[t]):e.appendChild(a)}}function p(e,t,o){var r=o.css,n=o.media,a=o.sourceMap;if(n?e.setAttribute("media",n):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var b=null,v=0;function m(e,t){var o,r,n;if(t.singleton){var a=v++;o=b||(b=u(t)),r=d.bind(null,o,a,!1),n=d.bind(null,o,a,!0)}else o=u(t),r=p.bind(null,o,t),n=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(o)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=n());var o=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<o.length;r++){var n=s(o[r]);i[n].references--}for(var a=c(e,t),u=0;u<o.length;u++){var f=s(o[u]);0===i[f].references&&(i[f].updater(),i.splice(f,1))}o=a}}}},39155:t=>{"use strict";t.exports=e}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={id:e,exports:{}};return t[e](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var n={};return(()=>{"use strict";r.r(n),r.d(n,{Badge:()=>s,default:()=>c});var e=r(39155),t=r.n(e),o="paraui-v4";function a(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=a(e[t]))&&(r&&(r+=" "),r+=o);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function i(){for(var e,t,o=0,r="";o<arguments.length;)(e=arguments[o++])&&(t=a(e))&&(r&&(r+=" "),r+=t);return r}r(33653);var s=function(r){var n=r.className,a=r.style,s=r.children,c=r.sign,u=r.backgroundColor,f=r.color,l=r.offset,d=r.placement,p=void 0===d?"top-right":d,b=(0,e.useRef)({offsetPos:{"top-left":{offsetX:"left",offsetY:"top"},"top-right":{offsetX:"right",offsetY:"top"},"bottom-left":{offsetX:"left",offsetY:"bottom"},"bottom-right":{offsetX:"right",offsetY:"bottom"}}}),v=function(){var e,t=void 0===c?"undefined":(e=c)&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e;return"undefined"===t?"dot":"number"===t?"number":null===c?"null":"text"}(),m=function(){return Number(c)>999?"999+":c};return t().createElement("span",{className:i("".concat(o,"-badge ").concat(o,"-badge-").concat(v," ").concat(o,"-badge-").concat(p),n),style:a},s,function(){if(null===v)return null;var e={backgroundColor:u,color:f};if(l){var o=b.current.offsetPos[p].offsetX,r=b.current.offsetPos[p].offsetY;e[o]=-l[0]+"px",e[r]=l[1]+"px"}return t().createElement("span",{className:"pos-box ".concat(v),style:e},"number"===v&&t().createElement("span",null,m()),"text"===v&&t().createElement("span",null,c))}())};const c=s})(),n})()));