@nutui/nutui-react 3.0.5 → 3.0.6

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

@@ -11,7 +11,7 @@
 /*入场动画过程*/
 .fade-enter-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-in;
 }
 
 /*入场动画结束*/
@@ -27,7 +27,7 @@
 /*离场动画过程*/
 .fade-exit-active {
   opacity: 0;
-  transition: opacity 1s;
+  transition: opacity 300ms ease-out;
 }
 
 /*离场动画结束*/
@@ -43,47 +43,52 @@
 /*页面第一次加载时的动画过程*/
 .fade-appear-active {
   opacity: 1;
-  transition: opacity 1s;
+  transition: opacity 300ms;
 }
 
 .nut-notify {
+  position: fixed;
+  left: 8px;
+  right: 8px;
+  z-index: var(--nutui-notify-z-index, 1000);
   display: flex;
-  justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: var(--nutui-notify-padding, 0px 10px);
-  color: var(--nutui-notify-text-color, #ffffff);
-  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
-  white-space: pre-wrap;
-  word-wrap: break-word;
   height: var(--nutui-notify-height, 40px);
+  padding: var(--nutui-notify-padding, 0px 12px);
+  border-radius: var(--nutui-notify-border-radius, 8px);
+  box-shadow: var(--nutui-notify-box-shadow, 0px 4px 12px 0px rgba(0, 0, 0, 0.06));
+  background-color: var(--nutui-notify-background-color, #ffffff);
+}
+.nut-notify-content {
+  flex: 1;
+  text-align: center;
+  min-width: 0;
+  font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a));
+  white-space: nowrap;
+  overflow: hidden;
 }
-.nut-notify-popup-top, .nut-notify-popup-bottom {
-  position: fixed;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
-  transition: transform 0.3s;
-  z-index: 9999;
-}
-.nut-notify-popup-top {
-  top: 0;
+.nut-notify-ellipsis {
+  text-overflow: ellipsis;
 }
-.nut-notify-popup-bottom {
-  bottom: 0;
+.nut-notify-layout-left {
+  text-align: left;
 }
-.nut-notify-base {
-  background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
+.nut-notify-left-icon, .nut-notify-right-icon {
+  display: inline-flex;
 }
-.nut-notify-primary {
-  background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
+.nut-notify-left-icon {
+  margin-right: 6px;
 }
-.nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #00d900));
+.nut-notify-left-icon .nut-icon {
+  height: 16px;
+  width: 16px;
 }
-.nut-notify-danger {
-  background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
+.nut-notify-right-icon {
+  margin-left: 6px;
 }
-.nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #ffbf00));
+.nut-notify-right-icon .nut-icon {
+  height: 12px;
+  width: 12px;
 }

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

@@ -429,6 +429,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: var(--nutui-picker-item-height, 36px);
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

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

@@ -49,6 +49,9 @@
     height: $picker-item-height;
     z-index: 1;
     transform-style: preserve-3d;
+    &-placeholder {
+      height: $picker-item-height;
+    }
   }
 
   &-roller-item {

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

@@ -48,6 +48,9 @@
   z-index: 1;
   transform-style: preserve-3d;
 }
+.nut-pickerview-roller-placeholder {
+  height: var(--nutui-picker-item-height, 36px);
+}
 .nut-pickerview-roller-item {
   position: absolute;
   top: 0;

package/dist/cjs/packages/skeleton/skeleton.js

@@ -9,80 +9,95 @@ Object.defineProperty(exports, "Skeleton", {
     }
 });
 var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
-var _avatar = /*#__PURE__*/ _interop_require_default._(require("../avatar"));
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     rows: 1,
-    animated: false,
-    title: false,
-    avatar: false,
-    avatarSize: '50px',
+    animated: true,
     visible: false,
-    avatarShape: 'round'
+    size: 'normal',
+    shape: 'round',
+    duration: 0.6,
+    inline: false
 });
 var Skeleton = function Skeleton(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, animated = _ref.animated, rows = _ref.rows, title = _ref.title, avatar = _ref.avatar, avatarSize = _ref.avatarSize, visible = _ref.visible, children = _ref.children, avatarShape = _ref.avatarShape, rest = (0, _object_without_properties._)(_ref, [
+    var shapeStyle = function shapeStyle() {
+        if (shape === 'circle') return {
+            borderRadius: '50%'
+        };
+        if (shape === 'square') return {
+            borderRadius: '0'
+        };
+        return {};
+    };
+    var durationStyle = function durationStyle() {
+        if (typeof duration !== 'undefined') return {
+            animationDuration: "".concat(duration, "s")
+        };
+        return {};
+    };
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, width = _ref.width, height = _ref.height, shape = _ref.shape, animated = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = (0, _object_without_properties._)(_ref, [
         "className",
+        "width",
+        "height",
+        "shape",
         "animated",
         "rows",
-        "title",
-        "avatar",
-        "avatarSize",
         "visible",
-        "children",
-        "avatarShape"
+        "size",
+        "duration",
+        "children"
     ]);
     var classPrefix = 'nut-skeleton';
     var classes = (0, _classnames.default)(classPrefix, className);
-    var _obj;
-    var avatarClass = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "nut-avatar", true), (0, _define_property._)(_obj, "nut-skeleton-content-avatar", true), (0, _define_property._)(_obj, "avatar-".concat(avatarShape), avatarShape), _obj));
-    var repeatLines = function repeatLines(num) {
+    var repeatCount = function repeatCount(num) {
         return Array.from({
             length: num
         }, function(v, i) {
             return i;
         });
     };
-    var getStyle = function getStyle() {
-        if (avatarSize) {
-            return {
-                width: avatarSize,
-                height: avatarSize
-            };
-        }
-        return {
-            width: '50px',
-            height: '50px'
-        };
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), animate = _useState[0], setAnimate = _useState[1];
+    var playAnimation = function playAnimation() {
+        setAnimate(false) // 首先将 animate 设置为 false
+        ;
+        setTimeout(function() {
+            setAnimate(true) // 1 毫秒后再设置为 true，触发动画
+            ;
+        }, 10);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, visible ? /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children) : /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
+    (0, _react.useEffect)(function() {
+        if (!animated) return;
+        playAnimation();
+        // 每隔 3 秒播放一次动画
+        var intervalId = setInterval(playAnimation, 1000 + duration * 1000) // xs 动画 + 1s 间隔
+        ;
+        // 清理定时器
+        return function() {
+            return clearInterval(intervalId);
+        };
+    }, []);
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, visible ? children : /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
         className: classes
-    }, rest), animated && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-animation")
-    }), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content")
-    }, avatar && /*#__PURE__*/ _react.default.createElement(_avatar.default, {
-        className: avatarClass,
-        shape: avatarShape,
-        style: getStyle(),
-        icon: "null"
-    }), rows === 1 ? /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content-block")
-    }) : /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content-line")
-    }, title && /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content-title")
-    }), repeatLines(rows).map(function(item, index) {
+    }, rest), repeatCount(rows).map(function(item, index) {
+        var contentClass = "".concat(classPrefix, "-content ").concat(classPrefix, "-content-").concat(size, " ").concat(classPrefix, "-content-").concat(size, "-").concat(index);
         return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "".concat(classPrefix, "-content-block"),
-            key: index
-        });
-    })))));
+            className: "".concat(contentClass),
+            key: index,
+            style: (0, _object_spread._)({
+                width: width,
+                height: height
+            }, shapeStyle())
+        }, animated && /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-animated ").concat(animate ? "".concat(classPrefix, "-animation") : ''),
+            style: durationStyle()
+        }));
+    })));
 };
 Skeleton.displayName = 'NutSkeleton';

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

@@ -1,2 +1 @@
-import '../../avatar/style';
 import './skeleton.scss';

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

@@ -1,44 +1,29 @@
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 
   &-content {
-    display: flex;
-    flex-direction: row;
+    position: relative;
+    display: inline-flex;
+    width: $skeleton-line-width;
+    background: $skeleton-background;
+    border-radius: $skeleton-line-border-radius;
+    overflow: hidden;
 
-    &-avatar {
-      margin-right: 20px;
-      background: $skeleton-background !important;
+    &-normal {
+      height: $skeleton-line-normal-height;
     }
 
-    &-block {
-      width: $skeleton-line-width;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-      margin-top: 10px;
-      border-radius: $skeleton-line-border-radius;
+    &-large {
+      height: $skeleton-line-large-height;
     }
 
-    &-line {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      .nut-skeleton-content-block:last-child {
-        width: 70%;
-      }
+    &-small {
+      height: $skeleton-line-small-height;
+      margin-top: 8px;
     }
-
-    &-title {
-      width: 30%;
-      height: $skeleton-line-height;
-      background: $skeleton-background;
-    }
-
-    &-block-last-child {
-      width: 55%;
+    &-small-0 {
+      margin-top: 0;
     }
   }
 
@@ -49,41 +34,50 @@
     width: 100%;
     height: 100%;
     z-index: 1;
-    animation: nut-skeleton 2s ease-in-out 0s infinite;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.02) 50%,
+      rgba(0, 0, 0, 0) 100%
+    );
+    animation-name: nut-skeleton;
+    animation-delay: 0s;
+    animation-duration: 0.6s;
+    animation-direction: normal;
+    animation-fill-mode: both;
+    animation-play-state: running;
+    animation-iteration-count: 1;
+    animation-timing-function: linear;
   }
 
   @keyframes nut-skeleton {
-    0% {
-      background-position-x: -500px;
+    from {
+      transform: translateX(-100%);
     }
 
     to {
-      background-position-x: calc(500px + 100%);
+      transform: translateX(100%);
     }
   }
 }
 
 [dir='rtl'] .nut-skeleton,
 .nut-rtl .nut-skeleton {
-  &-content {
-    .nut-avatar {
-      margin-right: 0;
-      margin-left: 20px;
-    }
-  }
   &-animation {
     left: auto;
     right: 0;
-    animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+    animation: nut-skeleton-rtl 2s linear 0s infinite;
   }
 
   @keyframes nut-skeleton-rtl {
-    0% {
-      background-position-x: calc(500px + 100%);
+    from {
+      //background-position: -200% 0;
+      transform: translateX(100%);
     }
 
     to {
-      background-position-x: -500px;
+      //background-position: 200% 0;
+      transform: translateX(-100%);
     }
   }
 }

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

@@ -2,176 +2,30 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-image {
-  display: block;
-  position: relative;
-}
-.nut-image-default {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.nut-image.nut-image-round {
-  border-radius: 50%;
-  overflow: hidden;
-}
-.nut-image-loading {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--nutui-color-background, #f2f3f5);
-  background-size: 100% 100%;
-}
-.nut-image-error {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: var(--nutui-color-background, #f2f3f5);
-  background-size: 100% 100%;
-}
-
-[dir=rtl] .nut-image .nut-img-loading,
-.nut-rtl .nut-image .nut-img-loading {
-  left: auto;
-  right: 0;
-}
-[dir=rtl] .nut-image .nut-img-error,
-.nut-rtl .nut-image .nut-img-error {
-  left: auto;
-  right: 0;
-}
-
-.nut-avatar-group {
-  display: flex;
-  flex-direction: row;
-  flex: 0 0 auto;
-}
-.nut-avatar-group-avatar,
-.nut-avatar-group .nut-avatar {
-  border: 1px solid #fff;
-  margin-left: -8px;
-}
-.nut-avatar-group-avatar:not(:first-of-type),
-.nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: -8px;
-}
-
-[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
-.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
-  margin-left: 0;
-  margin-right: -8px;
-}
-
-.nut-avatar {
-  position: relative;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: var(--nutui-avatar-normal-width, 40px);
-  height: var(--nutui-avatar-normal-height, 40px);
-}
-.nut-avatar-round {
-  border-radius: 999px;
-  overflow: hidden;
-}
-.nut-avatar-square {
-  border-radius: var(--nutui-avatar-square, 5px);
-}
-.nut-avatar-first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-.nut-avatar-img {
-  width: 100%;
-  height: 100%;
-  flex-shrink: 0;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.nut-avatar-icon {
-  background-size: 100% 100%;
-}
-.nut-avatar-text {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.nut-avatar-large {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-img {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-icon {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-large-text {
-  width: var(--nutui-avatar-large-width, 60px);
-  height: var(--nutui-avatar-large-height, 60px);
-}
-.nut-avatar-small {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-.nut-avatar-small-text {
-  width: var(--nutui-avatar-small-width, 32px);
-  height: var(--nutui-avatar-small-height, 32px);
-}
-
 .nut-skeleton {
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  vertical-align: middle;
-  width: 100%;
+  line-height: 0px;
+  font-size: 0px;
 }
 .nut-skeleton-content {
-  display: flex;
-  flex-direction: row;
-}
-.nut-skeleton-content-avatar {
-  margin-right: 20px;
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5)) !important;
-}
-.nut-skeleton-content-block {
+  position: relative;
+  display: inline-flex;
   width: var(--nutui-skeleton-line-width, 100%);
-  height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
-  margin-top: 10px;
-  border-radius: var(--nutui-skeleton-line-border-radius, 0);
+  background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc));
+  border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4px));
+  overflow: hidden;
 }
-.nut-skeleton-content-line {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
+.nut-skeleton-content-normal {
+  height: var(--nutui-skeleton-line-normal-height, 24px);
 }
-.nut-skeleton-content-line .nut-skeleton-content-block:last-child {
-  width: 70%;
+.nut-skeleton-content-large {
+  height: var(--nutui-skeleton-line-large-height, 32px);
 }
-.nut-skeleton-content-title {
-  width: 30%;
-  height: var(--nutui-skeleton-line-height, 15px);
-  background: var(--nutui-skeleton-background, var(--nutui-color-background, #f2f3f5));
+.nut-skeleton-content-small {
+  height: var(--nutui-skeleton-line-small-height, 16px);
+  margin-top: 8px;
 }
-.nut-skeleton-content-block-last-child {
-  width: 55%;
+.nut-skeleton-content-small-0 {
+  margin-top: 0;
 }
 .nut-skeleton-animation {
   position: absolute;
@@ -180,33 +34,36 @@
   width: 100%;
   height: 100%;
   z-index: 1;
-  animation: nut-skeleton 2s ease-in-out 0s infinite;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
+  animation-name: nut-skeleton;
+  animation-delay: 0s;
+  animation-duration: 0.6s;
+  animation-direction: normal;
+  animation-fill-mode: both;
+  animation-play-state: running;
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
 }
 @keyframes nut-skeleton {
-  0% {
-    background-position-x: -500px;
+  from {
+    transform: translateX(-100%);
   }
   to {
-    background-position-x: calc(500px + 100%);
+    transform: translateX(100%);
   }
 }
 
-[dir=rtl] .nut-skeleton-content .nut-avatar,
-.nut-rtl .nut-skeleton-content .nut-avatar {
-  margin-right: 0;
-  margin-left: 20px;
-}
 [dir=rtl] .nut-skeleton-animation,
 .nut-rtl .nut-skeleton-animation {
   left: auto;
   right: 0;
-  animation: nut-skeleton-rtl 2s ease-in-out 0s infinite;
+  animation: nut-skeleton-rtl 2s linear 0s infinite;
 }
 @keyframes nut-skeleton-rtl {
-  0% {
-    background-position-x: calc(500px + 100%);
+  from {
+    transform: translateX(100%);
   }
   to {
-    background-position-x: -500px;
+    transform: translateX(-100%);
   }
 }

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

@@ -45,6 +45,11 @@
 .nut-switch-button-close-rtl {
   left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
+.nut-switch-button .nut-icon {
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  height: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
+}
 .nut-switch-close {
   background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }

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

@@ -40,6 +40,11 @@
         left: calc(100% - $switch-height + $switch-border-width);
       }
     }
+    .nut-icon {
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      height: calc(($switch-height - $switch-border-width * 2) / 2);
+      color: $switch-active-disabled-background-color;
+    }
   }
 
   &-close {