@nutui/nutui-react-taro 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,33 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swipe {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #ffffff;
+}
+.nut-swipe-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-self: stretch;
+  width: 100%;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
+}
+.nut-swipe-left, .nut-swipe-right {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+}
+.nut-swipe-left {
+  left: 0;
+}
+.nut-swipe-right {
+  left: 100%;
+}

package/dist/cjs/packages/swipe/swipe.js

@@ -18,12 +18,12 @@ var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
-var _usetouch = require("../../utils/use-touch");
+var _usetouch = require("../../hooks/use-touch");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
 var _typings = require("../../utils/typings");
 var _platformtaro = require("../../utils/platform-taro");
 var _pxtransform = /*#__PURE__*/ _interop_require_default._(require("../../utils/px-transform"));
-var _userefstate = require("../../utils/use-ref-state");
+var _userefstate = require("../../hooks/use-ref-state");
 function preventDefault(event, isStopPropagation) {
     if (typeof event.cancelable !== 'boolean' || event.cancelable) {
         event.preventDefault();
@@ -297,7 +297,7 @@ var Swipe = /*#__PURE__*/ (0, _react.forwardRef)(function(props, instanceRef) {
         };
     });
     (0, _react.useEffect)(function() {
-        if ((0, _platformtaro.harmonyAndRn)()) return;
+        if ((0, _platformtaro.harmony)()) return;
         var handler = function handler(event) {
             var targets = [
                 root

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

@@ -4,60 +4,129 @@
 /* #endif */
 .nut-indicator {
   display: flex;
-  flex-direction: row;
   width: auto;
+  flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: center;
 }
-.nut-indicator-dot {
+.nut-indicator-fixed-width {
+  width: 21px;
+}
+.nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-size, 4px);
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-size, 3px);
   border-radius: 50%;
-  background-color: var(--nutui-indicator-dot-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  margin: 0 var(--nutui-indicator-dot-margin, 2px);
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
+  opacity: 0.4;
 }
-.nut-indicator-dot:first-child {
+.nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
-.nut-indicator-dot:last-child {
-  margin-right: 0px;
+.nut-indicator-dot-active, .nut-indicator-line-active {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+  opacity: 1;
+}
+.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-fixed-width .nut-indicator-dot-active {
+  width: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width {
+  justify-content: flex-start;
+  height: 21px;
+  width: auto;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
+  width: 3px;
+  height: 12px;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+}
+.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
+  height: 6px;
+}
+.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
+  height: 6px;
 }
-.nut-indicator-active {
-  width: var(--nutui-indicator-dot-active-size, 8px);
-  border-radius: var(--nutui-indicator-border-radius, 2px);
+.nut-indicator-line {
+  width: var(--nutui-indicator-dot-active-size, 6px);
+  margin: 0;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: transparent;
+}
+.nut-indicator-line-active {
+  transition: transform 0.3s ease-in-out;
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
 }
+
+.nut-indicator-track {
+  position: relative;
+}
+.nut-indicator-track:after {
+  display: block;
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2px));
+  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  opacity: 0.4;
+}
+
+.nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
+  position: relative;
+  box-sizing: content-box;
+  background: rgba(255, 255, 255, 0.4);
+  opacity: 1;
+}
+.nut-indicator-white .nut-indicator-line {
+  opacity: 0;
+}
+.nut-indicator-white .nut-indicator-line-active {
+  opacity: 1;
+  background: rgb(255, 255, 255);
+}
+.nut-indicator-white .nut-indicator-dot-active {
+  background: rgb(255, 255, 255);
+}
+
+.nut-indicator-track.nut-indicator-white:after {
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.4);
+}
+
 .nut-indicator-vertical {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.nut-indicator-vertical-dot {
-  margin: var(--nutui-indicator-dot-margin, 2px) 0;
+.nut-indicator-vertical .nut-indicator-dot {
+  margin: 0px;
+  margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
 }
-.nut-indicator-vertical-dot:first-child {
+.nut-indicator-vertical .nut-indicator-dot-0 {
   margin-top: 0px;
 }
-.nut-indicator-vertical-dot:last-child {
-  margin-bottom: 0px;
+.nut-indicator-vertical .nut-indicator-dot-active {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
 }
-.nut-indicator-vertical-active {
-  width: var(--nutui-indicator-dot-size, 4px);
-  height: var(--nutui-indicator-dot-active-size, 8px);
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
+  width: var(--nutui-indicator-dot-size, 3px);
+  height: var(--nutui-indicator-dot-active-size, 6px);
 }
 
-[dir=rtl] .nut-indicator-dot:first-child,
-.nut-rtl .nut-indicator-dot:first-child {
-  margin-left: var(--nutui-indicator-dot-margin, 2px);
-  margin-right: 0px;
-}
-[dir=rtl] .nut-indicator-dot:last-child,
-.nut-rtl .nut-indicator-dot:last-child {
-  margin-right: var(--nutui-indicator-dot-margin, 2px);
+[dir=rtl] .nut-indicator-dot-0,
+.nut-rtl .nut-indicator-dot-0 {
+  margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4px));
   margin-left: 0px;
 }
 
@@ -65,9 +134,14 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  touch-action: none;
   position: relative;
 }
+.nut-swiper-canmove-horizontal {
+  touch-action: pan-y;
+}
+.nut-swiper-canmove-vertical {
+  touch-action: pan-x;
+}
 .nut-swiper-indicator {
   display: flex;
   flex-direction: row;
@@ -94,15 +168,7 @@
   display: flex;
   position: relative;
 }
-.nut-swiper-inner-horizontal {
-  /* #ifndef rn */
-  transform: translateX(var(--swiper-offset));
-  /* #ifndef rn */
-}
 .nut-swiper-inner-vertical {
-  /* #ifndef rn */
-  transform: translateY(var(--swiper-offset));
-  /* #ifndef rn */
   flex-direction: column;
 }
 
@@ -122,9 +188,6 @@
 .nut-rtl .nut-swiper-indicator {
   left: auto;
   right: 50%;
-  /* #ifndef rn */
-  transform: translateX(50%);
-  /* #endif */
 }
 [dir=rtl] .nut-swiper-indicator-vertical,
 .nut-rtl .nut-swiper-indicator-vertical {

package/dist/cjs/packages/swiper/style/style.harmony.css

@@ -0,0 +1,68 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.nut-swiper-canmove-horizontal {
+  touch-action: pan-y;
+}
+.nut-swiper-canmove-vertical {
+  touch-action: pan-x;
+}
+.nut-swiper-indicator {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  position: absolute;
+  height: 4px;
+  width: 100%;
+  top: 89.33%;
+  z-index: 10;
+}
+.nut-swiper-indicator-vertical {
+  width: 8px;
+  height: 100%;
+  top: 0;
+  left: 12px;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 1;
+}
+
+.nut-swiper-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+.nut-swiper-inner-vertical {
+  flex-direction: column;
+}
+
+.nut-swiper-slide {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.nut-swiper-item {
+  width: 100%;
+  height: 100%;
+}
+
+[dir=rtl] .nut-swiper-indicator,
+.nut-rtl .nut-swiper-indicator {
+  left: auto;
+  right: 50%;
+}
+[dir=rtl] .nut-swiper-indicator-vertical,
+.nut-rtl .nut-swiper-indicator-vertical {
+  left: auto;
+  right: 12px;
+}

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

@@ -2,9 +2,16 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  touch-action: none;
   position: relative;
 
+  &-canmove-horizontal {
+    touch-action: pan-y;
+  }
+
+  &-canmove-vertical {
+    touch-action: pan-x;
+  }
+
   &-indicator {
     display: flex;
     flex-direction: row;
@@ -26,21 +33,14 @@
     z-index: 1;
   }
 }
+
 .nut-swiper-inner {
   width: 100%;
   height: 100%;
   display: flex;
   position: relative;
-  &-horizontal {
-    /* #ifndef rn */
-    transform: translateX(var(--swiper-offset));
-    /* #ifndef rn */
-  }
 
   &-vertical {
-    /* #ifndef rn */
-    transform: translateY(var(--swiper-offset));
-    /* #ifndef rn */
     flex-direction: column;
   }
 }
@@ -62,10 +62,8 @@
   &-indicator {
     left: auto;
     right: 50%;
-    /* #ifndef rn */
-    transform: translateX(50%);
-    /* #endif */
   }
+
   &-indicator-vertical {
     left: auto;
     right: 12px;

package/dist/cjs/packages/swiperitem/style/style.harmony.css

@@ -0,0 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-swiper-item {
+  height: 100%;
+}

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

@@ -5,7 +5,7 @@
 .nut-switch {
   cursor: pointer;
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   min-width: var(--nutui-switch-width, 46px);
@@ -29,7 +29,7 @@
   height: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
   width: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
   border-radius: var(--nutui-switch-inside-border-radius, 50%);
-  background: var(--nutui-color-primary-text, #ffffff);
+  background: #ffffff;
   transition: left 0.3s linear;
   box-shadow: var(--nutui-switch-inside-box-shadow, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
@@ -59,11 +59,11 @@
   align-items: center;
   height: 100%;
   white-space: nowrap;
-  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-switch-label-text-color, #ffffff);
   font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-switch-label .nut-icon {
-  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-switch-label-text-color, #ffffff);
 }
 .nut-switch-label-open {
   margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
@@ -87,5 +87,5 @@
   background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
 }
 .nut-switch-disabled-close {
-  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f5f6fa));
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
 }

package/dist/cjs/packages/switch/style/style.harmony.css

@@ -0,0 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-switch {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  min-width: 46px;
+  height: 28px;
+  line-height: 28px;
+  background-color: #ff0f23;
+  border-radius: 50px;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  flex: 0 0 auto;
+}
+.nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: calc(28px - 2px * 2);
+  width: calc(28px - 2px * 2);
+  border-radius: 50%;
+  background: #ffffff;
+  transition: left 0.3s linear;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
+}
+.nut-switch-button-open {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-button-open-rtl {
+  left: 2px;
+}
+.nut-switch-button-close {
+  left: 2px;
+}
+.nut-switch-button-close-rtl {
+  left: calc(100% - 28px + 2px);
+}
+.nut-switch-close {
+  background-color: #c2c4cc;
+}
+.nut-switch-close-line {
+  width: calc((28px - 2px * 2) / 2);
+  height: 2px;
+  background: #ffffff;
+  border-radius: 2px;
+}
+.nut-switch-label {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: #ffffff;
+  font-size: 12px;
+}
+.nut-switch-label .nut-icon {
+  color: #ffffff;
+}
+.nut-switch-label-open {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-open-rtl {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close {
+  margin: 0 7px 0 calc(28px - 2px + 3px);
+}
+.nut-switch-label-close-rtl {
+  margin: 0 calc(28px - 2px + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: #c2c4cc;
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: #c2c4cc;
+}
+.nut-switch-disabled {
+  background-color: #ffadbe;
+}
+.nut-switch-disabled-close {
+  background-color: #f2f3f5;
+}

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

@@ -1,7 +1,7 @@
 .nut-switch {
   cursor: pointer;
   position: relative;
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
   min-width: $switch-width;

package/dist/cjs/packages/switch/switch.js

@@ -18,7 +18,7 @@ var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _components = require("@tarojs/components");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _index = require("../configprovider/index");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     disabled: false,

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

@@ -32,7 +32,7 @@
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border: var(--nutui-badge-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border: var(--nutui-badge-border, 1px solid #ffffff);
   border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
 }
 .nut-badge-sup {
@@ -42,7 +42,7 @@
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
-  color: var(--nutui-badge-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-badge-color, #ffffff);
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
   line-height: 12px;
   white-space: nowrap;
@@ -73,7 +73,7 @@
   border-radius: 50%;
 }
 .nut-badge-dot::after {
-  border: var(--nutui-badge-dot-border, 1px solid var(--nutui-color-primary-text, #ffffff));
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
   border-radius: 50%;
 }
 .nut-badge-dot-normal {
@@ -92,7 +92,7 @@
   height: var(--nutui-badge-dot-width, 8px);
 }
 .nut-badge-outline {
-  background: var(--nutui-color-primary-text, #ffffff);
+  background: #ffffff;
   color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {
@@ -118,13 +118,15 @@
   position: relative;
 }
 .nut-tabbar-item-icon-box .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
   margin-top: var(--nutui-tabbar-text-margin-top, 3px);
 }
 .nut-tabbar-item-icon-box-large {
@@ -136,15 +138,8 @@
 .nut-tabbar-item-active {
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
-.nut-tabbar-item-active .nut-tabbar-item-icon-box {
-  /* #ifdef harmony*/
-  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
-  /* #endif*/
-  /* #ifndef harmony*/
-  color: inherit;
-  /* #endif*/
-}
-.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+.nut-tabbar-item-active .nut-tabbar-item-icon-box,
+.nut-tabbar-item-active .nut-icon {
   /* #ifdef harmony*/
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
   /* #endif*/

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

@@ -0,0 +1,50 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-tabbar {
+  border: 0px;
+  box-shadow: none;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background: #ffffff;
+}
+.nut-tabbar-wrap {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.nut-tabbar:last-child {
+  border-right: 0;
+}
+.nut-tabbar-fixed {
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+}
+.nut-tabbar-safe-area {
+  display: block;
+  width: 100%;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+[dir=rtl] .nut-tabbar:last-child,
+.nut-rtl .nut-tabbar:last-child {
+  border-right: none;
+  border-left: 0;
+}
+[dir=rtl] .nut-tabbar-fixed,
+.nut-rtl .nut-tabbar-fixed {
+  left: auto;
+  right: 0px;
+}

package/dist/cjs/packages/tabbar/tabbar.js

@@ -17,7 +17,7 @@ var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem/index"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {