@nutui/nutui-react 3.0.0 → 3.0.2

package/dist/cjs/packages/nutui.react.scss.js

@@ -14,19 +14,16 @@ require("./griditem/griditem.scss");
 require("./layout/layout.scss");
 require("./col/col.scss");
 require("./row/row.scss");
+require("./safearea/safearea.scss");
 require("./space/space.scss");
 require("./sticky/sticky.scss");
-require("./safearea/safearea.scss");
 require("./backtop/backtop.scss");
 require("./elevator/elevator.scss");
 require("./fixednav/fixednav.scss");
 require("./hoverbutton/hoverbutton.scss");
 require("./hoverbuttonitem/hoverbuttonitem.scss");
 require("./navbar/navbar.scss");
-require("./sidenavbar/sidenavbar.scss");
 require("./sidebar/sidebar.scss");
-require("./sidenavbaritem/sidenavbaritem.scss");
-require("./subsidenavbar/subsidenavbar.scss");
 require("./tabbar/tabbar.scss");
 require("./tabbaritem/tabbaritem.scss");
 require("./tabpane/tabpane.scss");
@@ -39,6 +36,7 @@ require("./cascader/cascader.scss");
 require("./checkbox/checkbox.scss");
 require("./checkboxgroup/checkboxgroup.scss");
 require("./datepicker/datepicker.scss");
+require("./datepickerview/datepickerview.scss");
 require("./form/form.scss");
 require("./formitem/formitem.scss");
 require("./input/input.scss");
@@ -63,7 +61,6 @@ require("./badge/badge.scss");
 require("./dialog/dialog.scss");
 require("./drag/drag.scss");
 require("./empty/empty.scss");
-require("./resultpage/resultpage.scss");
 require("./infiniteloading/infiniteloading.scss");
 require("./loading/loading.scss");
 require("./noticebar/noticebar.scss");
@@ -71,6 +68,7 @@ require("./notify/notify.scss");
 require("./popover/popover.scss");
 require("./popup/popup.scss");
 require("./pulltorefresh/pulltorefresh.scss");
+require("./resultpage/resultpage.scss");
 require("./skeleton/skeleton.scss");
 require("./swipe/swipe.scss");
 require("./toast/toast.scss");
@@ -88,9 +86,9 @@ require("./imagepreview/imagepreview.scss");
 require("./indicator/indicator.scss");
 require("./lottie/lottie.scss");
 require("./pagination/pagination.scss");
-require("./segmented/segmented.scss");
 require("./price/price.scss");
 require("./progress/progress.scss");
+require("./segmented/segmented.scss");
 require("./step/step.scss");
 require("./steps/steps.scss");
 require("./swiper/swiper.scss");
@@ -100,10 +98,10 @@ require("./tag/tag.scss");
 require("./tour/tour.scss");
 require("./video/video.scss");
 require("./virtuallist/virtuallist.scss");
+require("./avatarcropper/avatarcropper.scss");
 require("./barrage/barrage.scss");
 require("./card/card.scss");
 require("./timedetail/timedetail.scss");
 require("./timeselect/timeselect.scss");
 require("./trendarrow/trendarrow.scss");
 require("./watermark/watermark.scss");
-require("./avatarcropper/avatarcropper.scss");

package/dist/cjs/packages/overlay/style/overlay.scss

@@ -19,11 +19,9 @@
     0% {
       opacity: 0;
     }
-
     1% {
       opacity: 0;
     }
-
     100% {
       opacity: 1;
     }
@@ -33,11 +31,9 @@
     0% {
       opacity: 1;
     }
-
     1% {
       opacity: 1;
     }
-
     100% {
       opacity: 0;
     }

package/dist/cjs/packages/picker/style/index.js

@@ -1,2 +1,3 @@
 import '../../popup/style';
+import '../../pickerview/style';
 import './picker.scss';

package/dist/cjs/packages/picker/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

package/dist/cjs/packages/popover/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/popup/style/popup.scss

@@ -141,7 +141,6 @@
         opacity: 0;
         transform: scale(0.8);
       }
-
       to {
         opacity: 1;
         transform: scale(1);
@@ -153,7 +152,6 @@
         opacity: 1;
         transform: scale(1);
       }
-
       to {
         opacity: 0;
         transform: scale(0.8);
@@ -176,7 +174,6 @@
       from {
         opacity: 0;
       }
-
       to {
         opacity: 1;
       }
@@ -186,7 +183,6 @@
       from {
         opacity: 1;
       }
-
       to {
         opacity: 0;
       }
@@ -209,6 +205,9 @@
       from {
         transform: translate3d(0, -100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes popup-slide-top-exit {
@@ -236,6 +235,9 @@
       from {
         transform: translate3d(100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-right-exit {
@@ -263,6 +265,9 @@
       from {
         transform: translate3d(0, 100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes slide-bottom-exit {
@@ -290,6 +295,9 @@
       from {
         transform: translate3d(-100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-left-exit {

package/dist/cjs/packages/popup/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -40,7 +40,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var InternalShortPassword = function InternalShortPassword(props, ref) {
     var locale = (0, _configprovider.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, round = _ref.round, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
         "title",
         "description",
         "tips",
@@ -54,6 +54,7 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         "className",
         "closeable",
         "autoFocus",
+        "round",
         "onFocus",
         "onChange",
         "onConfirm",
@@ -117,15 +118,12 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         onConfirm && onConfirm(inputValue);
     };
     return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
-        style: {
-            padding: '32px 24px 28px 24px',
-            borderRadius: '12px',
-            textAlign: 'center'
-        },
+        className: "".concat(classPrefix, "-popup"),
         visible: visible,
         closeable: true,
         onOverlayClick: handleClose,
-        onCloseIconClick: handleClose
+        onCloseIconClick: handleClose,
+        round: round
     }, rest), /*#__PURE__*/ _react.default.createElement("div", {
         className: (0, _classnames.default)(classPrefix, className),
         style: style

package/dist/cjs/packages/shortpassword/style/shortpassword.scss

@@ -1,11 +1,21 @@
 .nut-shortpassword {
+  &-popup {
+    padding: 32px 24px 28px 24px;
+    border-radius: 12px;
+    text-align: center;
+  }
+
   &-title {
+    display: flex;
+    justify-content: center;
     line-height: 1;
     font-size: $font-size-l;
     color: $color-title;
   }
 
   &-description {
+    display: flex;
+    justify-content: center;
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;

package/dist/cjs/packages/shortpassword/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,12 +383,21 @@
   right: 0;
 }
 
+.nut-shortpassword-popup {
+  padding: 32px 24px 28px 24px;
+  border-radius: 12px;
+  text-align: center;
+}
 .nut-shortpassword-title {
+  display: flex;
+  justify-content: center;
   line-height: 1;
   font-size: var(--nutui-font-size-l, 16px);
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-shortpassword-description {
+  display: flex;
+  justify-content: center;
   margin-top: 12px;
   margin-bottom: 24px;
   line-height: 1;

package/dist/cjs/packages/swipe/style/style.css

@@ -22,12 +22,12 @@
 .nut-swipe-left, .nut-swipe-right {
   position: absolute;
   top: 0;
-  display: flex;
-  flex-direction: row;
 }
 .nut-swipe-left {
   left: 0;
+  transform: translate(-100%, 0px);
 }
 .nut-swipe-right {
-  left: 100%;
+  right: 0px;
+  transform: translate(100%, 0px);
 }

package/dist/cjs/packages/swipe/style/swipe.scss

@@ -20,15 +20,19 @@
   &-right {
     position: absolute;
     top: 0;
-    display: flex;
-    flex-direction: row;
+    //display: flex;
+    //flex-direction: row;
+    //flex-shrink: 0;
   }
 
   &-left {
     left: 0;
+    transform: translate(-100%, 0px);
   }
 
   &-right {
-    left: 100%;
+    //left: 100%;
+    right: 0px;
+    transform: translate(100%, 0px);
   }
 }

package/dist/cjs/packages/tabbar/style/style.css

@@ -121,6 +121,12 @@
   width: 22px;
   height: 22px;
   font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;

package/dist/cjs/packages/tabbaritem/style/style.css

@@ -121,6 +121,12 @@
   width: 22px;
   height: 22px;
   font-size: 22px;
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a));
+  /* #endif*/
+  /* #ifndef harmony*/
+  color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;

package/dist/cjs/packages/tabbaritem/style/tabbaritem.scss

@@ -20,6 +20,12 @@
       width: 22px;
       height: 22px;
       font-size: 22px;
+      /* #ifdef harmony*/
+      color: $tabbar-inactive-color;
+      /* #endif*/
+      /* #ifndef harmony*/
+      color: inherit;
+      /* #endif*/
     }
 
     &-nav {

package/dist/cjs/packages/timeselect/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/tour/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/utils/get-rect-by-taro.d.ts

@@ -9,4 +9,4 @@ export interface Rect {
     height: number;
 }
 export declare function makeRect(width: number, height: number): Rect;
-export declare const getRectByTaro: (element: any) => Promise<Rect>;
+export declare const getRectByTaro: (element: any, harmonyId?: string) => Promise<Rect>;

package/dist/cjs/utils/get-rect-by-taro.js

@@ -33,7 +33,10 @@ function makeRect(width, height) {
 }
 var getRectByTaro = /*#__PURE__*/ function() {
     var _ref = (0, _async_to_generator._)(function(element) {
+        var harmonyId;
+        var _arguments = arguments;
         return (0, _ts_generator._)(this, function(_state) {
+            harmonyId = _arguments.length > 1 && _arguments[1] !== void 0 ? _arguments[1] : '';
             if (element) {
                 if (_useclientrect.inBrowser) {
                     return [
@@ -45,7 +48,7 @@ var getRectByTaro = /*#__PURE__*/ function() {
                 return [
                     2,
                     new Promise(function(resolve, reject) {
-                        (0, _taro.createSelectorQuery)().select("#".concat(element.uid)).boundingClientRect().exec(function(param) {
+                        (0, _taro.createSelectorQuery)().select("#".concat(harmonyId || element.uid)).boundingClientRect().exec(function(param) {
                             var _param = (0, _sliced_to_array._)(param, 1), rects = _param[0];
                             resolve(rects);
                         });

package/dist/cjs/utils/get-system-info.js

@@ -19,14 +19,13 @@ _export(exports, {
         return getWindowInfo;
     }
 });
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
+var _taro = require("@tarojs/taro");
 var getDeviceInfo = function getDeviceInfo() {
-    return _taro.default.canIUse('getDeviceInfo') ? _taro.default.getDeviceInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getDeviceInfo') ? (0, _taro.getDeviceInfo)() : (0, _taro.getSystemInfoSync)();
 };
 var getWindowInfo = function getWindowInfo() {
-    return _taro.default.canIUse('getWindowInfo') ? _taro.default.getWindowInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getWindowInfo') ? (0, _taro.getWindowInfo)() : (0, _taro.getSystemInfoSync)();
 };
 var getAppBaseInfo = function getAppBaseInfo() {
-    return _taro.default.canIUse('getAppBaseInfo') ? _taro.default.getAppBaseInfo() : _taro.default.getSystemInfoSync();
+    return (0, _taro.canIUse)('getAppBaseInfo') ? (0, _taro.getAppBaseInfo)() : (0, _taro.getSystemInfoSync)();
 };