@nutui/nutui-react 3.0.0-beta.4 → 3.0.0-beta.6

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-indicator {
   display: flex;
   flex-direction: row;

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

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

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

@@ -1,71 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-switch {
   cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: var(--nutui-switch-width, 40px);
-  height: var(--nutui-switch-height, 24px);
-  line-height: var(--nutui-switch-line-height, 24px);
-  background-color: var(--nutui-switch-open-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-switch-border-radius, 8px);
+  min-width: var(--nutui-switch-width, 46px);
+  height: var(--nutui-switch-height, 28px);
+  line-height: var(--nutui-switch-line-height, 28px);
+  background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
+  border-radius: var(--nutui-switch-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: var(--nutui-switch-inside-height, 20px);
-  width: var(--nutui-switch-inside-width, 20px);
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
-  border-radius: var(--nutui-switch-inside-border-radius, var(--nutui-radius-s, 6px));
+  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);
-  transition: transform 0.3s;
-  box-shadow: var(--nutui-switch-box-shadow, 0 0 transparent);
+  transition: left 0.3s linear;
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
 .nut-switch-button-open {
-  transform: var(--nutui-switch-inside-open-transform, translateX(18px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-button-open-rtl {
-  transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close {
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close-rtl {
-  transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-close-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-switch-close-line {
-  width: 12px;
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
   height: 2px;
-  background: var(--nutui-switch-close-line-background-color, #fff);
+  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
   border-radius: 2px;
 }
-.nut-switch-disabled {
-  background-color: var(--nutui-switch-open-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
-}
-.nut-switch-disabled-close {
-  background-color: var(--nutui-switch-close-disabled-background-color, var(--nutui-color-background, #f5f6fa));
-}
 .nut-switch-label {
-  color: var(--nutui-color-primary-text, #ffffff);
-  font-size: var(--nutui-font-size-s, 12px);
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #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));
 }
 .nut-switch-label-open {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-open-rtl {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close-rtl {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
+.nut-switch-disabled {
+  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));
 }

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

@@ -1,12 +1,13 @@
 .nut-switch {
   cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: $switch-width;
+  min-width: $switch-width;
   height: $switch-height;
   line-height: $switch-line-height;
-  background-color: $switch-open-background-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -14,64 +15,79 @@
   flex: 0 0 auto; // 防止被压缩
 
   &-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: $switch-inside-height;
-    width: $switch-inside-width;
-    transform: $switch-inside-close-transform;
+    height: calc($switch-height - $switch-border-width * 2);
+    width: calc($switch-height - $switch-border-width * 2);
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
-    transition: transform 0.3s;
-    box-shadow: $switch-button-box-shadow;
+    transition: left 0.3s linear;
+    box-shadow: $switch-inside-box-shadow;
     &-open {
-      transform: $switch-inside-open-transform;
+      left: calc(100% - $switch-height + $switch-border-width);
       &-rtl {
-        transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+        left: $switch-border-width;
       }
     }
     &-close {
-      transform: $switch-inside-close-transform;
+      left: $switch-border-width;
       &-rtl {
-        transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+        left: calc(100% - $switch-height + $switch-border-width);
       }
     }
   }
 
   &-close {
-    background-color: $switch-close-background-color;
+    background-color: $switch-inactive-background-color;
     &-line {
-      width: 12px;
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
       height: 2px;
-      background: $switch-close-line-background-color;
+      background: $switch-inactive-line-background-color;
       border-radius: 2px;
     }
   }
 
-  &-disabled {
-    background-color: $switch-open-disabled-background-color;
-    &-close {
-      background-color: $switch-close-disabled-background-color;
-    }
-  }
-
   &-label {
-    color: $color-primary-text;
-    font-size: $font-size-s;
-
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    color: $switch-label-text-color;
+    font-size: $switch-label-font-size;
+    .nut-icon {
+      color: $switch-label-text-color;
+    }
     &-open {
-      transform: translateX(-18px);
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        transform: translateX(18px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      transform: translateX(18px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        transform: translateX(-18px);
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
+
+    &-close-disabled {
+      color: $switch-inactive-disabled-label-text-color;
+      .nut-icon {
+        color: $switch-inactive-disabled-label-text-color;
+      }
+    }
+  }
+
+  &-disabled {
+    background-color: $switch-active-disabled-background-color;
+    &-close {
+      background-color: $switch-inactive-disabled-background-color;
+    }
   }
 }

package/dist/cjs/packages/switch/switch.d.ts

@@ -4,8 +4,8 @@ export interface SwitchProps extends BasicComponent {
     checked: boolean;
     defaultChecked: boolean;
     disabled: boolean;
-    activeText: string;
-    inactiveText: string;
+    activeText: React.ReactNode;
+    inactiveText: React.ReactNode;
     onChange: (val: boolean, event: React.MouseEvent) => void;
 }
 export declare const Switch: FunctionComponent<Partial<SwitchProps>>;

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

@@ -73,16 +73,8 @@ var Switch = function Switch(props) {
         ])
     }, !value && !activeText && /*#__PURE__*/ _react.default.createElement("div", {
         className: "".concat(classPrefix, "-close-line")
-    }), activeText && /*#__PURE__*/ _react.default.createElement("div", {
-        className: (0, _classnames.default)([
-            [
-                "".concat(classPrefix, "-label")
-            ],
-            [
-                value ? "".concat(classPrefix, "-label-open") : "".concat(classPrefix, "-label-close")
-            ],
-            (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-button-close-rtl"), rtl && !value), _obj1)
-        ])
-    }, value ? activeText : inactiveText)));
+    })), activeText && /*#__PURE__*/ _react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(classPrefix, "-label"), (_obj1 = {}, (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-open"), value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close"), !value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close-rtl"), rtl && !value), (0, _define_property._)(_obj1, "".concat(classPrefix, "-label-close-disabled"), disabled && !value), _obj1))
+    }, value ? activeText : inactiveText));
 };
 Switch.displayName = 'NutSwitch';

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
   display: inline-flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
   display: inline-flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-table {
   overflow: hidden;
   position: relative;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-tag {
   padding: var(--nutui-tag-padding, 0px 2px);
   display: flex;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-textarea {
   position: relative;
   width: 100%;

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

@@ -1,6 +1,12 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-timedetail {
   display: flex;
   align-content: flex-start;
+  flex: 1;
+  min-width: 0;
   flex-wrap: wrap;
   padding: 0 0 50px 12px;
 }

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

@@ -1,6 +1,8 @@
 .nut-timedetail {
   display: flex;
   align-content: flex-start;
+  flex: 1;
+  min-width: 0;
   flex-wrap: wrap;
   padding: 0 0 50px 12px;
 

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
@@ -412,6 +413,8 @@
 .nut-timedetail {
   display: flex;
   align-content: flex-start;
+  flex: 1;
+  min-width: 0;
   flex-wrap: wrap;
   padding: 0 0 50px 12px;
 }

package/dist/cjs/packages/toast/Notification.js

@@ -141,13 +141,13 @@ var Notification = /*#__PURE__*/ function(_superClass) {
                     className: "".concat(classPrefix, " ").concat(classes),
                     id: "toast-".concat(id)
                 }, /*#__PURE__*/ _react.createElement("div", {
-                    className: "".concat(classPrefix, "-inner ").concat(classPrefix, "-").concat(position, " ").concat(contentClassName, " ").concat(classPrefix, "-inner-").concat(size, " ").concat(classPrefix, "-inner-").concat(wordBreak),
+                    className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
                     style: (0, _object_spread._)({}, contentStyle)
                 }, this.renderIcon(), title ? /*#__PURE__*/ _react.createElement("div", {
                     className: "".concat(classPrefix, "-title")
-                }, title) : null, /*#__PURE__*/ _react.createElement("span", {
-                    className: "".concat(classPrefix, "-text ").concat(content ? '' : "".concat(classPrefix, "-text-empty"))
-                }, content)))));
+                }, title) : null, content ? /*#__PURE__*/ _react.createElement("span", {
+                    className: "".concat(classPrefix, "-text")
+                }, content) : null))));
             }
         }
     ]);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -106,16 +110,20 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-width: 30%;
-  max-width: 95.7%;
+  min-width: 96px;
+  max-width: 60%;
+  box-sizing: border-box;
   font-size: var(--nutui-toast-text-font-size, 14px);
   text-align: var(--nutui-toast-inner-text-align, center);
-  padding: var(--nutui-toast-inner-padding, 16px 24px);
+  padding: var(--nutui-toast-inner-padding, 13px 16px);
   word-break: break-all;
   background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
-  border-radius: var(--nutui-toast-inner-border-radius, 16px);
+  border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12px));
   color: var(--nutui-toast-font-color, #ffffff);
 }
+.nut-toast-inner-descrption {
+  max-width: 68.2%;
+}
 .nut-toast-inner-normal {
   word-break: normal;
   word-wrap: normal;
@@ -147,17 +155,16 @@
 .nut-toast-text {
   color: #ffffff;
   text-align: var(--nutui-toast-inner-text-align, center);
-}
-.nut-toast-text-empty {
-  margin-bottom: -8px;
+  line-height: 20px;
 }
 .nut-toast-title {
   color: #ffffff;
   font-size: var(--nutui-toast-title-font-size, 16px);
-  font-weight: 500;
+  font-weight: 600;
   text-align: var(--nutui-toast-inner-text-align, center);
+  line-height: 22px;
 }
-.nut-toast-icon {
+.nut-toast .nut-icon {
   width: 24px;
   height: 24px;
   color: #ffffff;
@@ -167,7 +174,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 8px;
+  margin: 3px 0 5px;
   color: #ffffff;
 }
 .nut-toast-icon-wrapper-icon {

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

@@ -50,8 +50,10 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    min-width: 30%;
-    max-width: 95.7%;
+    min-width: 96px;
+    max-width: 60%;
+    // max-width: 224px;
+    box-sizing: border-box;
     font-size: $toast-text-font-size;
     text-align: $toast-inner-text-align;
     padding: $toast-inner-padding;
@@ -60,6 +62,11 @@
     border-radius: $toast-inner-border-radius;
     color: $toast-font-color;
 
+    &-descrption {
+      max-width: 68.2%;
+      // max-width: 256px;
+    }
+
     &-normal {
       word-break: normal;
       word-wrap: normal;
@@ -99,19 +106,18 @@
   &-text {
     color: #ffffff;
     text-align: $toast-inner-text-align;
-    &-empty {
-      margin-bottom: -8px;
-    }
+    line-height: 20px;
   }
 
   &-title {
     color: #ffffff;
     font-size: $toast-title-font-size;
-    font-weight: 500;
+    font-weight: 600;
     text-align: $toast-inner-text-align;
+    line-height: 22px;
   }
 
-  &-icon {
+  .nut-icon {
     width: 24px;
     height: 24px;
     color: #ffffff;
@@ -122,7 +128,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 8px;
+    margin: 3px 0 5px;
     color: #ffffff;
 
     &-icon {

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-trendarrow {
   display: flex;
   flex-direction: row;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-video {
   width: 100%;
   height: 100%;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-horizontal-items {
   float: left;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-watermark {
   position: absolute;
   z-index: var(--nutui-watermark-z-index, 1200);

package/dist/es/packages/actionsheet/actionsheet.d.ts

@@ -4,40 +4,12 @@ export type ActionSheetOption<T> = {
     [key: string]: T;
 };
 export interface ActionSheetProps extends PopupProps {
-    /**
-    * 遮罩层可见
-    * @default false
-    */
-    visible: boolean
-    /**
-    * 设置列表面板副标题/描述
-    * @default -
-    */
-    description: ReactNode
-    /**
-    * 列表项
-    * @default []
-    */
-    options: ActionSheetOption<string | boolean>[]
-    /**
-    * 列表项的自定义设置
-    * @default -
-    */
-    optionKey: ActionSheetOption<string>
-    /**
-    * 取消文案
-    * @default 取消
-    */
-    cancelText: ReactNode
-    /**
-    * 点击取消文案时触发
-    * @default -
-    */
-    onCancel: () => void
-    /**
-    * 选择之后触发
-    * @default -
-    */
-    onSelect: (item: ActionSheetOption<string | boolean>, index: number) => void
+    visible: boolean;
+    description: ReactNode;
+    options: ActionSheetOption<string | boolean>[];
+    optionKey: ActionSheetOption<string>;
+    cancelText: ReactNode;
+    onCancel: () => void;
+    onSelect: (item: ActionSheetOption<string | boolean>, index: number) => void;
 }
 export declare const ActionSheet: FunctionComponent<Partial<ActionSheetProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'>>;