@nutui/nutui-react-taro 3.0.20 → 3.0.22-cpp

package/dist/es/packages/picker/style/style.harmony.css

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -157,6 +162,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -166,6 +173,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -266,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -290,6 +305,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -314,6 +332,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -339,27 +360,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {
@@ -462,7 +483,7 @@
   align-items: center;
   justify-content: space-between;
   height: var(--nutui-popup-title-height, 50px);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   box-sizing: border-box;
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }

package/dist/es/packages/pickerview/pickerroller.js

@@ -12,7 +12,7 @@ import { preventDefault } from "../../utils";
 import { momentum, useStyles } from "./utils";
 import { useUuid } from "../../hooks/use-uuid";
 import { getRectInMultiPlatform } from "../../utils/taro/get-rect";
-var InternalPickerRoller = function(props, ref) {
+var InternalPickerRoller = function InternalPickerRoller(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, onSelect = props.onSelect, _props_renderLabel = props.renderLabel, renderLabel = _props_renderLabel === void 0 ? function(item) {
         return item.label;
     } : _props_renderLabel;
@@ -37,16 +37,16 @@ var InternalPickerRoller = function(props, ref) {
     var _useState5 = _sliced_to_array(useState(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
     var _useState6 = _sliced_to_array(useState(web()), 2), isGetLineSpacing = _useState6[0], setGetStatus = _useState6[1];
     var _useStyles = useStyles(touchTime, touchDeg, scrollDistance, lineSpacing, ROTATION), touchRollerStyle = _useStyles.touchRollerStyle, touchTiledStyle = _useStyles.touchTiledStyle, rollerStyle = _useStyles.rollerStyle;
-    var isItemHidden = function(index) {
+    var isItemHidden = function isItemHidden(index) {
         return index >= currentIndex + 8 || index <= currentIndex - 8;
     };
-    var applyTransform = function(type, deg) {
+    var applyTransform = function applyTransform(type, deg) {
         var time = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : DEFAULT_DURATION, translateY = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
         setTouchTime(type !== 'end' ? 0 : time);
         setTouchDeg(deg);
         setScrollDistance(translateY);
     };
-    var handleMove = function(move, type, time) {
+    var handleMove = function handleMove(move, type, time) {
         var updatedMove = move + transformY.current;
         if (type === 'end') {
             updatedMove = Math.max(Math.min(updatedMove, 0), -(options.length - 1) * lineSpacing.current);
@@ -64,18 +64,18 @@ var InternalPickerRoller = function(props, ref) {
             }
         }
     };
-    var selectValue = function(move) {
+    var selectValue = function selectValue(move) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing.current)], keyIndex);
     };
     var isScroll = useRef(false);
-    var handleTouchStart = function(event) {
+    var handleTouchStart = function handleTouchStart(event) {
         isScroll.current = true;
         touch.start(event);
         setStartY(touch.deltaY.current);
         setStartTime(Date.now());
         transformY.current = scrollDistance;
     };
-    var handleTouchMove = function(event) {
+    var handleTouchMove = function handleTouchMove(event) {
         touch.move(event);
         if (touch.isVertical) {
             isMoving.current = true;
@@ -84,7 +84,7 @@ var InternalPickerRoller = function(props, ref) {
         var move = touch.deltaY.current - startY;
         handleMove(move);
     };
-    var handleTouchEnd = function() {
+    var handleTouchEnd = function handleTouchEnd() {
         if (!isMoving.current) return;
         var move = touch.deltaY.current - startY;
         var moveTime = Date.now() - startTime;
@@ -99,7 +99,7 @@ var InternalPickerRoller = function(props, ref) {
             touch.reset();
         }, 0);
     };
-    var updateStatus = function(shouldSelect, value) {
+    var updateStatus = function updateStatus(shouldSelect, value) {
         var selectedValue = value || props.value;
         var index = options.findIndex(function(item) {
             return item.value === selectedValue;
@@ -109,12 +109,12 @@ var InternalPickerRoller = function(props, ref) {
         shouldSelect && selectValue(-move);
         handleMove(-move);
     };
-    var stopMomentumScroll = function() {
+    var stopMomentumScroll = function stopMomentumScroll() {
         isMoving.current = false;
         setTouchTime(0);
         selectValue(scrollDistance);
     };
-    var getReactHeight = function() {
+    var getReactHeight = function getReactHeight() {
         return _async_to_generator(function() {
             var placeholder, placeholderHeight, error;
             return _ts_generator(this, function(_state) {
@@ -211,7 +211,7 @@ var InternalPickerRoller = function(props, ref) {
         handleTouchMove,
         handleTouchEnd
     ]);
-    var onTransitionEnd = function() {
+    var onTransitionEnd = function onTransitionEnd() {
         if (!isScroll.current) {
             stopMomentumScroll();
         }

package/dist/es/packages/pickerview/pickerview.js

@@ -14,11 +14,11 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     options: [],
     defaultValue: [],
     value: undefined,
-    renderLabel: function(item) {
+    renderLabel: function renderLabel(item) {
         return item.label;
     }
 });
-var InternalPickerView = function(props, ref) {
+var InternalPickerView = function InternalPickerView(props, ref) {
     var _$_object_spread = _object_spread({}, defaultProps, props), options = _$_object_spread.options, _object_spread_defaultValue = _$_object_spread.defaultValue, defaultValue = _object_spread_defaultValue === void 0 ? [] : _object_spread_defaultValue, value = _$_object_spread.value, duration = _$_object_spread.duration, threeDimensional = _$_object_spread.threeDimensional, renderLabel = _$_object_spread.renderLabel, className = _$_object_spread.className, style = _$_object_spread.style, onChange = _$_object_spread.onChange;
     var classPrefix = 'nut-pickerview';
     var cls = classNames(classPrefix, className);
@@ -41,7 +41,7 @@ var InternalPickerView = function(props, ref) {
     }, [
         props.options
     ]);
-    var formatCascadeOptions = function(options, value) {
+    var formatCascadeOptions = function formatCascadeOptions(options, value) {
         var _loop = function() {
             var currentOptions = columnOptions.children;
             formatted.push(currentOptions);

package/dist/es/packages/pickerview/utils.js

@@ -1,21 +1,21 @@
-export var momentum = function(distance, duration) {
+export var momentum = function momentum(distance, duration) {
     var speed = Math.abs(distance / duration);
     return speed / 0.003 * (distance < 0 ? -1 : 1);
 };
-export var useStyles = function(touchTime, touchDeg, scrollDistance, lineSpacing, rotation) {
-    var getTransitionStyle = function(transformValue) {
+export var useStyles = function useStyles(touchTime, touchDeg, scrollDistance, lineSpacing, rotation) {
+    var getTransitionStyle = function getTransitionStyle(transformValue) {
         return {
             transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
             transform: transformValue
         };
     };
-    var touchRollerStyle = function() {
+    var touchRollerStyle = function touchRollerStyle() {
         return getTransitionStyle("rotate3d(1, 0, 0, ".concat(touchDeg, ")"));
     };
-    var touchTiledStyle = function() {
+    var touchTiledStyle = function touchTiledStyle() {
         return getTransitionStyle("translate3d(0, ".concat(scrollDistance, "px, 0)"));
     };
-    var rollerStyle = function(index) {
+    var rollerStyle = function rollerStyle(index) {
         return {
             transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, ").concat(Math.round(lineSpacing.current * 3.2), "px)")
         };

package/dist/es/packages/popover/popover.js

@@ -31,14 +31,14 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     closeOnOutsideClick: true,
     closeOnActionClick: true,
     overlay: false,
-    onClick: function() {},
-    onOpen: function() {},
-    onClose: function() {}
+    onClick: function onClick() {},
+    onOpen: function onOpen() {},
+    onClose: function onClose() {}
 });
 var classPrefix = "nut-popover";
-export var Popover = function(props) {
+export var Popover = function Popover(props) {
     var rtl = useRtl();
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, list = _ref.list, theme = _ref.theme, location = _ref.location, visible = _ref.visible, offset = _ref.offset, arrowOffset = _ref.arrowOffset, targetId = _ref.targetId, overlay = _ref.overlay, closeOnOutsideClick = _ref.closeOnOutsideClick, closeOnActionClick = _ref.closeOnActionClick, className = _ref.className, showArrow = _ref.showArrow, style = _ref.style, onClick = _ref.onClick, onOpen = _ref.onOpen, onClose = _ref.onClose, onSelect = _ref.onSelect, rest = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, list = _$_object_spread.list, theme = _$_object_spread.theme, location = _$_object_spread.location, visible = _$_object_spread.visible, offset = _$_object_spread.offset, arrowOffset = _$_object_spread.arrowOffset, targetId = _$_object_spread.targetId, overlay = _$_object_spread.overlay, closeOnOutsideClick = _$_object_spread.closeOnOutsideClick, closeOnActionClick = _$_object_spread.closeOnActionClick, className = _$_object_spread.className, showArrow = _$_object_spread.showArrow, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onSelect = _$_object_spread.onSelect, rest = _object_without_properties(_$_object_spread, [
         "children",
         "list",
         "theme",
@@ -74,7 +74,7 @@ export var Popover = function(props) {
     ]);
     var uid = useUuid();
     var popoverId = "popover-".concat(uid);
-    var getWrapperPosition = function() {
+    var getWrapperPosition = function getWrapperPosition() {
         return _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 nextTick(function() {
@@ -89,7 +89,7 @@ export var Popover = function(props) {
                                     ];
                                     return [
                                         4,
-                                        getRectInMultiPlatform(document.querySelector("#".concat(targetId)), targetId)
+                                        getRectInMultiPlatform(typeof document !== 'undefined' ? document.querySelector("#".concat(targetId)) : null, targetId)
                                     ];
                                 case 1:
                                     _tmp = _state.sent();
@@ -129,7 +129,7 @@ export var Popover = function(props) {
             });
         })();
     };
-    var getPopoverContentW = function() {
+    var getPopoverContentW = function getPopoverContentW() {
         return _async_to_generator(function() {
             return _ts_generator(this, function(_state) {
                 nextTick(function() {
@@ -159,19 +159,19 @@ export var Popover = function(props) {
             });
         })();
     };
-    var clickAway = function() {
+    var clickAway = function clickAway() {
         if (closeOnOutsideClick) {
             onClick === null || onClick === void 0 ? void 0 : onClick();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
     var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
-    var popoverArrow = function() {
+    var popoverArrow = function popoverArrow() {
         var prefixCls = 'nut-popover-arrow';
         var direction = location.split('-')[0];
         return "".concat(prefixCls, " ").concat(prefixCls, "-").concat(direction, " ").concat(prefixCls, "-").concat(location);
     };
-    var getPopoverPosition = function() {
+    var getPopoverPosition = function getPopoverPosition() {
         var styles = {};
         if (!wrapperPosition) {
             styles.visibility = 'hidden';
@@ -225,7 +225,7 @@ export var Popover = function(props) {
         styles.visibility = popWidth === 0 ? 'hidden' : 'initial';
         return styles;
     };
-    var popoverArrowStyle = function() {
+    var popoverArrowStyle = function popoverArrowStyle() {
         var styles = {};
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
@@ -264,7 +264,7 @@ export var Popover = function(props) {
         }
         return styles;
     };
-    var handleSelect = function(item, index) {
+    var handleSelect = function handleSelect(item, index) {
         if (!item.disabled) {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(item, index);
         }
@@ -277,7 +277,7 @@ export var Popover = function(props) {
         className: "nut-popover-wrapper",
         ref: popoverRef,
         id: popoverId,
-        onClick: function() {
+        onClick: function onClick() {
             var _props_onClick;
             props === null || props === void 0 ? void 0 : (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props);
             if (!visible) {
@@ -312,7 +312,7 @@ export var Popover = function(props) {
                 'nut-popover-item-disabled': item.disabled
             }, item.className),
             key: item.key || index,
-            onClick: function() {
+            onClick: function onClick() {
                 return handleSelect(item, index);
             }
         }, item.icon && /*#__PURE__*/ React.createElement(View, {
@@ -321,7 +321,7 @@ export var Popover = function(props) {
             className: "nut-popover-item-name"
         }, item.name), ((_item_action = item.action) === null || _item_action === void 0 ? void 0 : _item_action.icon) && /*#__PURE__*/ React.createElement(View, {
             className: "nut-popover-item-action-icon",
-            onClick: function(e) {
+            onClick: function onClick(e) {
                 var _item_action_onClick, _item_action;
                 return (_item_action = item.action) === null || _item_action === void 0 ? void 0 : (_item_action_onClick = _item_action.onClick) === null || _item_action_onClick === void 0 ? void 0 : _item_action_onClick.call(_item_action, e);
             }

package/dist/es/packages/popover/style/style.harmony.css

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -157,6 +162,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -166,6 +173,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -266,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -290,6 +305,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -314,6 +332,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -339,27 +360,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {