@nutui/nutui 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/packages/noticebar/index.scss

@@ -13,7 +13,7 @@
 .nut-noticebar__page {
   display: flex;
   padding: $noticebar-box-padding;
-  height: $noticebar-height;
+  height: $noticebar-across-height;
   font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
@@ -23,7 +23,7 @@
     height: auto;
     padding: $noticebar-wrapable-padding;
     .nut-noticebar__page-wrap {
-      height: auto;
+      height: auto !important;
       .nut-noticebar__page-wrap-content {
         position: relative;
         white-space: normal;
@@ -37,8 +37,8 @@
     padding-right: 40px;
   }
   .nut-noticebar__page-lefticon {
-    height: $noticebar-left-icon-width;
-    min-width: $noticebar-left-icon-width;
+    display: flex;
+    align-items: center;
     margin: $noticebar-lefticon-margin;
     background-size: 100% 100%;
   }
@@ -46,14 +46,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: $noticebar-right-icon-width;
     margin: $noticebar-righticon-margin;
   }
   .nut-noticebar__page-wrap {
     display: flex;
     flex: 1;
-    height: $noticebar-line-height;
-    line-height: $noticebar-line-height;
+    height: $noticebar-across-line-height;
+    line-height: $noticebar-across-line-height;
     overflow: hidden;
     position: relative;
   }
@@ -61,6 +60,7 @@
     position: absolute;
     white-space: nowrap;
     &.nut-ellipsis {
+      display: inline-block;
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
@@ -93,7 +93,7 @@
 // 垂直方向的滚动
 @keyframes nut-notice-bar-play-vertical {
   to {
-    transform: translateY($noticebar-height);
+    transform: translateY($noticebar-across-height);
   }
 }
 
@@ -102,10 +102,12 @@
   position: relative;
   display: flex;
   justify-content: space-between;
-  height: $noticebar-height;
+  height: $noticebar-across-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
   padding: $noticebar-box-padding;
+  background: $noticebar-background;
+  color: $noticebar-color;
 
   .nut-noticebar__vertical-list {
     margin: 0;
@@ -115,11 +117,12 @@
     .nut-noticebar__vertical-item {
       display: flex;
       align-items: center;
-      height: $noticebar-height;
+      height: $noticebar-across-height;
     }
   }
 
   .go {
+    margin: $noticebar-righticon-margin;
     align-self: center;
     display: flex;
   }

package/dist/packages/noticebar/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/notify/index.mjs

@@ -1,2 +1,5 @@
-import Notify from '../_es/Notify.js';
-export { Notify };
+import _Notify from '../_es/Notify.js';
+import { showNotify } from '../_es/Notify.js';
+const treeshaking = (t) => t;
+const Notify = treeshaking(_Notify);
+export { Notify, showNotify };

package/dist/packages/notify/style.mjs

@@ -1,3 +1,4 @@
-import './index.scss';
-import '../popup/index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import '../popup/index.scss';
+import './index.scss';

package/dist/packages/numberkeyboard/index.mjs

@@ -1,2 +1,4 @@
-import NumberKeyboard from '../_es/NumberKeyboard.js';
+import _NumberKeyboard from '../_es/NumberKeyboard.js';
+const treeshaking = (t) => t;
+const NumberKeyboard = treeshaking(_NumberKeyboard);
 export { NumberKeyboard };

package/dist/packages/numberkeyboard/style.mjs

@@ -1,3 +1,4 @@
-import './index.scss';
-import '../popup/index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import '../popup/index.scss';
+import './index.scss';

package/dist/packages/overlay/index.mjs

@@ -1,2 +1,4 @@
-import Overlay from '../_es/Overlay.js';
+import _Overlay from '../_es/Overlay.js';
+const treeshaking = (t) => t;
+const Overlay = treeshaking(_Overlay);
 export { Overlay };

package/dist/packages/overlay/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/pagination/index.mjs

@@ -1,2 +1,4 @@
-import Pagination from '../_es/Pagination.js';
+import _Pagination from '../_es/Pagination.js';
+const treeshaking = (t) => t;
+const Pagination = treeshaking(_Pagination);
 export { Pagination };

package/dist/packages/pagination/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/picker/index.mjs

@@ -1,2 +1,4 @@
-import Picker from '../_es/Picker.js';
+import _Picker from '../_es/Picker.js';
+const treeshaking = (t) => t;
+const Picker = treeshaking(_Picker);
 export { Picker };

package/dist/packages/picker/style.mjs

@@ -1,3 +1,4 @@
-import './index.scss';
-import '../popup/index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import '../popup/index.scss';
+import './index.scss';

package/dist/packages/popover/index.mjs

@@ -1,2 +1,4 @@
-import Popover from '../_es/Popover.js';
+import _Popover from '../_es/Popover.js';
+const treeshaking = (t) => t;
+const Popover = treeshaking(_Popover);
 export { Popover };

package/dist/packages/popover/index.scss

@@ -257,5 +257,5 @@
 // Taro
 .nut-popover-content-copy {
   position: absolute;
-  top: 99999px;
+  top: -99999px;
 }

package/dist/packages/popover/style.mjs

@@ -1,3 +1,4 @@
-import './index.scss';
-import '../popup/index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import '../popup/index.scss';
+import './index.scss';

package/dist/packages/popup/index.mjs

@@ -1,2 +1,4 @@
-import Popup from '../_es/Popup.js';
+import _Popup from '../_es/Popup.js';
+const treeshaking = (t) => t;
+const Popup = treeshaking(_Popup);
 export { Popup };

package/dist/packages/popup/style.mjs

@@ -1,2 +1,3 @@
-import './index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import './index.scss';

package/dist/packages/price/index.mjs

@@ -1,2 +1,4 @@
-import Price from '../_es/Price.js';
+import _Price from '../_es/Price.js';
+const treeshaking = (t) => t;
+const Price = treeshaking(_Price);
 export { Price };

package/dist/packages/price/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/progress/index.mjs

@@ -1,2 +1,4 @@
-import Progress from '../_es/Progress.js';
+import _Progress from '../_es/Progress.js';
+const treeshaking = (t) => t;
+const Progress = treeshaking(_Progress);
 export { Progress };

package/dist/packages/progress/index.scss

@@ -15,12 +15,12 @@
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
       // position: relative;
-      .nut-progress-text {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        color: #fff;
-      }
+    }
+    .nut-progress-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      color: #fff;
     }
     .nut-active {
       &:before {
@@ -85,6 +85,8 @@
     font-size: 13px;
     line-height: 1;
     min-width: 35px;
+    display: flex;
+    align-items: center;
   }
   .nut-progress-insidetext {
     padding: $progress-insidetext-padding;

package/dist/packages/progress/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/pullrefresh/index.mjs

@@ -1,2 +1,4 @@
-import PullRefresh from '../_es/PullRefresh.js';
+import _PullRefresh from '../_es/PullRefresh.js';
+const treeshaking = (t) => t;
+const PullRefresh = treeshaking(_PullRefresh);
 export { PullRefresh };

package/dist/packages/pullrefresh/index.scss

@@ -1,4 +1,4 @@
-.nut-pullrefresh {
+.nut-pull-refresh {
   height: 100%;
   overflow: hidden;
   &-container {
@@ -18,8 +18,9 @@
       justify-content: center;
 
       &-icon {
-        width: 28px;
-        height: 24px;
+        margin-right: 4px;
+        width: 16px;
+        height: 16px;
       }
       &-text {
         font-size: $font-size-2;

package/dist/packages/pullrefresh/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/radio/index.mjs

@@ -1,2 +1,4 @@
-import Radio from '../_es/Radio.js';
+import _Radio from '../_es/Radio.js';
+const treeshaking = (t) => t;
+const Radio = treeshaking(_Radio);
 export { Radio };

package/dist/packages/radio/index.scss

@@ -44,9 +44,22 @@
     box-sizing: border-box;
     border: 1px solid #f6f7f9;
     &--active {
-      background: $radio-label-button-background;
+      background: transparent;
       color: $radio-label-font-active-color;
       border: 1px solid $radio-label-button-border-color;
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $radio-label-button-background;
+        opacity: 0.05;
+        content: '';
+      }
     }
     &--disabled {
       color: $radio-label-disable-color;
@@ -68,7 +81,6 @@
     color: $radio-label-font-active-color;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
-    font-size: $radio-icon-font-size;
   }
   &__icon--unchecked {
     color: $radio-icon-disable-color;

package/dist/packages/radio/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/radiogroup/index.mjs

@@ -1,2 +1,4 @@
-import RadioGroup from '../_es/RadioGroup.js';
+import _RadioGroup from '../_es/RadioGroup.js';
+const treeshaking = (t) => t;
+const RadioGroup = treeshaking(_RadioGroup);
 export { RadioGroup };

package/dist/packages/radiogroup/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/range/index.mjs

@@ -1,2 +1,4 @@
-import Range from '../_es/Range.js';
+import _Range from '../_es/Range.js';
+const treeshaking = (t) => t;
+const Range = treeshaking(_Range);
 export { Range };

package/dist/packages/range/index.scss

@@ -106,15 +106,18 @@
   position: relative;
   width: 100%;
   height: 4px;
-  background-color: $range-bg-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
     position: absolute;
-    top: -8px;
+    top: 0;
     right: 0;
-    bottom: -8px;
+    bottom: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $range-bg-color;
+    opacity: 0.5;
     content: '';
   }
 

package/dist/packages/range/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/rate/index.mjs

@@ -1,2 +1,4 @@
-import Rate from '../_es/Rate.js';
+import _Rate from '../_es/Rate.js';
+const treeshaking = (t) => t;
+const Rate = treeshaking(_Rate);
 export { Rate };

package/dist/packages/rate/index.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
+    margin-right: 14px;
     &:last-child {
       margin-right: 0;
     }
@@ -13,10 +14,10 @@
       cursor: pointer;
 
       &::before {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
+        // position: relative;
+        // top: auto;
+        // left: auto;
+        // transform: none;
       }
 
       &--disabled {

package/dist/packages/rate/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/row/index.mjs

@@ -1,2 +1,4 @@
-import Row from '../_es/Row.js';
+import _Row from '../_es/Row.js';
+const treeshaking = (t) => t;
+const Row = treeshaking(_Row);
 export { Row };

package/dist/packages/row/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/searchbar/index.mjs

@@ -1,2 +1,4 @@
-import Searchbar from '../_es/Searchbar.js';
+import _Searchbar from '../_es/Searchbar.js';
+const treeshaking = (t) => t;
+const Searchbar = treeshaking(_Searchbar);
 export { Searchbar };

package/dist/packages/searchbar/index.scss

@@ -51,14 +51,19 @@
     .nut-searchbar__input-inner {
       display: flex;
       position: relative;
-      width: 100%;
+      // width: 100%;
+      flex: 1;
+      align-items: center;
+      overflow: hidden;
       > taro-form-core {
         width: 100%;
       }
-      form {
-        display: flex;
-        align-items: center;
-        width: 100%;
+      .nut-searchbar__input-form {
+        // display: flex;
+        // align-items: center;
+        // width: 100%;
+        flex: 1;
+        overflow: hidden;
       }
       input {
         width: 100%;
@@ -66,25 +71,32 @@
         min-width: 214px;
         padding-left: 4px;
       }
+    }
+
+    .nut-searchbar__input-inner-icon {
+      display: flex;
+      align-items: center;
+      position: relative;
+      // overflow: hidden;
+      padding: 0 7px;
+    }
+    .nut-searchbar__input-clear {
+      position: relative;
+      z-index: 10;
+      padding: 0 5px;
+      & .nut-searchbar__nut-icon-mask-close {
+        color: rgb(204, 204, 204);
+        &:hover {
+          cursor: pointer;
+          color: rgb(104, 104, 104);
+        }
+      }
+    }
+    .nut-searchbar__input-inner-icon-absolute {
       .nut-searchbar__input-clear {
-        display: flex;
-        justify-content: center;
-        align-items: center;
         position: absolute;
-        z-index: 2;
-        top: 50%;
-        right: 0;
-        width: 16px;
-        height: 16px;
-        margin-top: -8px;
-        margin-right: 10px;
-        & .nut-searchbar__nut-icon-mask-close {
-          color: rgb(204, 204, 204);
-          &:hover {
-            cursor: pointer;
-            color: rgb(104, 104, 104);
-          }
-        }
+        z-index: 10;
+        left: -20px;
       }
     }
 
@@ -94,8 +106,8 @@
       height: 14px;
     }
 
-    .nut-searchbar__iptright-sarch-icon {
-      margin-right: 12px;
+    .nut-searchbar__iptright-search-icon {
+      margin-left: 5px;
     }
 
     .nut-searchbar__input-bar {
@@ -110,6 +122,13 @@
       outline: none;
       font-size: 14px;
     }
+
+    .nut-searchbar__input-inner-absolute {
+      .nut-searchbar__input-bar {
+        box-sizing: border-box;
+        padding-right: 20px;
+      }
+    }
   }
 
   &__left-search-icon {

package/dist/packages/searchbar/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/shortpassword/index.mjs

@@ -1,2 +1,4 @@
-import ShortPassword from '../_es/ShortPassword.js';
+import _ShortPassword from '../_es/ShortPassword.js';
+const treeshaking = (t) => t;
+const ShortPassword = treeshaking(_ShortPassword);
 export { ShortPassword };

package/dist/packages/shortpassword/style.mjs

@@ -1,3 +1,4 @@
-import './index.scss';
-import '../popup/index.scss';
+import '../../styles/reset.css';
 import '../overlay/index.scss';
+import '../popup/index.scss';
+import './index.scss';

package/dist/packages/sidenavbar/index.mjs

@@ -1,2 +1,4 @@
-import SideNavbar from '../_es/SideNavbar.js';
+import _SideNavbar from '../_es/SideNavbar.js';
+const treeshaking = (t) => t;
+const SideNavbar = treeshaking(_SideNavbar);
 export { SideNavbar };

package/dist/packages/sidenavbar/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/sidenavbaritem/index.mjs

@@ -1,2 +1,4 @@
-import SideNavbarItem from '../_es/SideNavbarItem.js';
+import _SideNavbarItem from '../_es/SideNavbarItem.js';
+const treeshaking = (t) => t;
+const SideNavbarItem = treeshaking(_SideNavbarItem);
 export { SideNavbarItem };

package/dist/packages/sidenavbaritem/style.mjs

@@ -1 +1,2 @@
+import '../../styles/reset.css';
 import './index.scss';

package/dist/packages/signature/index.mjs

@@ -1,2 +1,4 @@
-import Signature from '../_es/Signature.js';
+import _Signature from '../_es/Signature.js';
+const treeshaking = (t) => t;
+const Signature = treeshaking(_Signature);
 export { Signature };

package/dist/packages/signature/index.scss

@@ -1,6 +1,6 @@
 .nut-signature {
   .nut-signature-inner {
-    height: 10rem;
+    height: 8rem;
     margin-bottom: 1rem;
     border: 1px solid #dadada;
     display: flex;
@@ -10,7 +10,7 @@
   .spcanvas_WEAPP {
     width: 100%;
     height: 100%;
-    #spcanvas {
+    .spcanvas {
       width: 100%;
     }
   }

package/dist/packages/signature/style.mjs

@@ -1,2 +1,3 @@
-import './index.scss';
+import '../../styles/reset.css';
 import '../button/index.scss';
+import './index.scss';

package/dist/packages/skeleton/index.mjs

@@ -1,2 +1,4 @@
-import Skeleton from '../_es/Skeleton.js';
+import _Skeleton from '../_es/Skeleton.js';
+const treeshaking = (t) => t;
+const Skeleton = treeshaking(_Skeleton);
 export { Skeleton };

package/dist/packages/skeleton/style.mjs

@@ -1,2 +1,3 @@
-import './index.scss';
+import '../../styles/reset.css';
 import '../avatar/index.scss';
+import './index.scss';

package/dist/packages/sku/index.mjs

@@ -1,2 +1,4 @@
-import Sku from '../_es/Sku.js';
+import _Sku from '../_es/Sku.js';
+const treeshaking = (t) => t;
+const Sku = treeshaking(_Sku);
 export { Sku };

package/dist/packages/sku/index.scss

@@ -50,7 +50,7 @@
     flex-shrink: 0;
     margin-top: 18px;
     padding: 0 18px;
-    > img {
+    .nut-sku-header-img {
       width: $sku-product-img-width;
       height: $sku-product-img-height;
       flex-shrink: 0;
@@ -106,9 +106,23 @@
           border: 1px solid rgba(242, 242, 242, 1);
 
           &.active {
-            background: $sku-item-active-bg;
+            background: transparent;
             border: $sku-item-border;
             color: $primary-color;
+            position: relative;
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              border-radius: 15px;
+              background-color: $sku-item-active-bg;
+              opacity: 0.15;
+              content: '';
+            }
           }
           &.disable {
             color: $text-color;