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

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/swiper/swiper.js

@@ -18,7 +18,7 @@ var _react1 = require("@use-gesture/react");
 var _web = require("@react-spring/web");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _indicator = /*#__PURE__*/ _interop_require_default._(require("../indicator"));
-var _userefstate = require("../../utils/use-ref-state");
+var _userefstate = require("../../hooks/use-ref-state");
 var _default = require("./effects/default");
 var _focus = require("./effects/focus");
 var defaultProps = {
@@ -196,11 +196,9 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
                 -y
             ];
         },
-        triggerAllEvents: true,
         bounds: function bounds() {
             if (loop) return {};
             var slideSize = getSlideSize();
-            var swiperSize = getSwiperSize();
             if (isVertical) {
                 return {
                     top: 0,
@@ -212,8 +210,9 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
                 right: (count - 1) * slideSize
             };
         },
-        preventDefault: true,
         rubberband: true,
+        triggerAllEvents: true,
+        preventScroll: isVertical,
         axis: isVertical ? 'y' : 'x',
         pointer: {
             touch: true
@@ -255,17 +254,15 @@ var Swiper = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
     };
     var renderSlides = function renderSlides() {
+        var _obj;
         return /*#__PURE__*/ _react.default.createElement("div", {
             ref: stageRef,
-            className: (0, _classnames.default)('nut-swiper-inner', {
-                'nut-swiper-inner-vertical': isVertical,
-                'nut-swiper-inner-horizontal': !isVertical
-            }),
+            className: (0, _classnames.default)("".concat(classPrefix, "-inner"), (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-inner-vertical"), isVertical), (0, _define_property._)(_obj, "".concat(classPrefix, "-inner-horizontal"), !isVertical), _obj)),
             style: (0, _object_spread._)({}, props.slideSize ? (0, _define_property._)({}, isVertical ? 'height' : 'width', "".concat(props.slideSize, "px")) : {})
         }, renderEffect());
     };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: (0, _classnames.default)('nut-swiper', className),
+        className: (0, _classnames.default)(classPrefix, "".concat(classPrefix, "-canmove-").concat(direction), className),
         style: style,
         ref: swiperRef
     }, bind()), renderSlides(), renderIndicator());

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/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

@@ -17,7 +17,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 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 _configprovider = require("../configprovider");
 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/tabbar.js

@@ -16,7 +16,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
 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 _tabbaritem = /*#__PURE__*/ _interop_require_default._(require("../tabbaritem"));
 var _context = /*#__PURE__*/ _interop_require_default._(require("./context"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {

package/dist/cjs/packages/tabbaritem/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/tabbaritem/style/tabbaritem.scss

@@ -17,14 +17,16 @@
     position: relative;
 
     .nut-icon {
-      width: 24px;
-      height: 24px;
-      font-size: 24px;
+      width: 22px;
+      height: 22px;
+      font-size: 22px;
     }
 
     &-nav {
       display: block;
+      color: $color-text;
       font-size: $tabbar-text-font-size;
+      line-height: $tabbar-text-font-size;
       margin-top: $tabbar-text-margin-top;
     }
 
@@ -39,22 +41,14 @@
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box {
+    .nut-tabbar-item-icon-box,
+    .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;
       /* #endif*/
       /* #ifndef harmony*/
       color: inherit;
       /* #endif*/
-
-      .nut-icon {
-        /* #ifdef harmony*/
-        color: $tabbar-active-color;
-        /* #endif*/
-        /* #ifndef harmony*/
-        color: inherit;
-        /* #endif*/
-      }
     }
   }
 }

package/dist/cjs/packages/tabbaritem/tabbaritem.js

@@ -26,7 +26,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     dot: false,
     max: 99,
     top: '0',
-    right: '5'
+    right: '0'
 });
 var TabbarItem = function TabbarItem(props) {
     var ctx = (0, _react.useContext)(_context.default);
@@ -55,6 +55,11 @@ var TabbarItem = function TabbarItem(props) {
         right: right,
         color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
     };
+    var renderTitleText = function renderTitleText() {
+        return title && /*#__PURE__*/ _react.default.createElement("div", {
+            className: titleClass
+        }, title);
+    };
     return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: tabbarItemClass,
         style: (0, _object_spread._)({
@@ -65,9 +70,5 @@ var TabbarItem = function TabbarItem(props) {
         }
     }, rest), icon ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement("div", {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ _react.default.createElement("div", {
-        className: titleClass
-    }, title)) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, /*#__PURE__*/ _react.default.createElement("div", {
-        className: titleClass
-    }, title)));
+    }, icon)), renderTitleText()) : /*#__PURE__*/ _react.default.createElement(_index.default, badgeProps, renderTitleText()));
 };

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

@@ -33,13 +33,13 @@
   position: relative;
 }
 .nut-table-main-striped .nut-table-main-head-tr {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) {
   background-color: var(--nutui-table-tr-odd-bg-color, #ffffff);
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(even) {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-table-main-head, .nut-table-main-body {
   background: inherit;

package/dist/cjs/packages/table/table.js

@@ -21,7 +21,7 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _iconsreact = require("@nutui/icons-react");
 var _configprovider = require("../configprovider");
 var _typings = require("../../utils/typings");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _utils = require("./utils");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     columns: [],

package/dist/cjs/packages/tabpane/tabpane.js

@@ -23,7 +23,7 @@ var TabPane = function TabPane(props) {
     var classes = (0, _classnames.default)(classPrefix, {
         active: !disabled && props.active
     }, autoHeightClassName, className);
-    return children ? /*#__PURE__*/ _react.default.createElement("div", {
+    return children && /*#__PURE__*/ _react.default.createElement("div", {
         className: classes
-    }, !disabled && children) : null;
+    }, !disabled && children);
 };

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

@@ -32,7 +32,7 @@
   user-select: none;
   overflow-x: auto;
   overflow-y: hidden;
-  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f5f6fa));
+  background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5));
   scrollbar-width: none;
 }
 .nut-tabs-titles::-webkit-scrollbar {
@@ -139,13 +139,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 16px));
 }
-.nut-tabs-titles-card {
-  padding: 0;
-  background-color: var(--nutui-color-default-light);
-}
-.nut-tabs-titles-card .nut-tabs-titles-item {
-  padding: 0;
-}
 .nut-tabs-titles-card .nut-tabs-titles-item-active {
   font-weight: var(--nutui-font-weight-bold, 600);
   background-color: #ffffff;
@@ -171,11 +164,9 @@
   border: var(--nutui-tabs-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabs-titles-divider {
-  padding: 0;
   border-bottom: 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06));
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item {
-  padding: 0;
   position: relative;
 }
 .nut-tabs-titles-divider .nut-tabs-titles-item::after {
@@ -193,9 +184,15 @@
 }
 
 .nut-tabs-vertical .nut-tabs-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  white-space: break-spaces;
+  /* #ifdef harmony */
+  padding-left: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  padding-left: 6px;
+  /* #endif */
+  width: 90px;
+  line-height: var(--nutui-font-size-base, 14px);
 }
 .nut-tabs-vertical .nut-tabs-titles {
   flex-direction: column;

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

@@ -151,11 +151,7 @@
   }
 
   &-card {
-    padding: 0;
-    background-color: $color-default-light;
-
     .nut-tabs-titles-item {
-      padding: 0;
       &-active {
         font-weight: $font-weight-bold;
         background-color: $white;
@@ -189,11 +185,9 @@
   }
 
   &-divider {
-    padding: 0;
     border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
-      padding: 0;
       position: relative;
 
       &::after {
@@ -218,9 +212,15 @@
 
 .nut-tabs-vertical {
   .nut-tabs-ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    white-space: break-spaces;
+    /* #ifdef harmony */
+    padding-left: 12px;
+    /* #endif */
+    /* #ifndef harmony */
+    padding-left: 6px;
+    /* #endif */
+    width: 90px;
+    line-height: $font-size-base;
   }
 
   .nut-tabs-titles {