@nutui/nutui 4.0.0 → 4.0.1-2.beta-1

package/dist/packages/calendar/style.mjs

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

package/dist/packages/card/index.scss

@@ -1,3 +1,6 @@
+@import '../price/index.scss';
+@import '../tag/index.scss';
+
 .nut-theme-dark {
   .nut-card {
     .nut-card__right {

package/dist/packages/card/style.mjs

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

package/dist/packages/cascader/index.scss

@@ -1,3 +1,7 @@
+@import '../popup/index.scss';
+@import '../tabs/index.scss';
+@import '../tabpane/index.scss';
+
 .nut-theme-dark {
   .nut-cascader__bar {
     background: $dark-background2;

package/dist/packages/cascader/style.mjs

@@ -1,7 +1,2 @@
 import '../../styles/reset.css';
-import '../tabpane/index.scss';
-import '../sticky/index.scss';
-import '../tabs/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/cellgroup/index.scss

@@ -18,7 +18,7 @@
     margin-top: 10px;
     margin-bottom: 10px;
   }
-  &__warp {
+  &__wrap {
     display: inherit;
     border-radius: $cell-border-radius;
     overflow: hidden;

package/dist/packages/checkbox/index.scss

@@ -6,6 +6,14 @@
         color: $checkbox-label-disable-color;
       }
     }
+    &__button {
+      background: $dark-background;
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+        border: 1px solid $checkbox-label-disable-color;
+      }
+    }
   }
 }
 .nut-checkbox {
@@ -18,6 +26,39 @@
       margin-left: 0;
     }
   }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-button-background;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-button-border-color;
+    &--active {
+      background: transparent;
+      color: $checkbox-button-font-color-active;
+      border: 1px solid $checkbox-button-border-color-active;
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $checkbox-button-background-active;
+        opacity: 0.05;
+        content: '';
+      }
+    }
+    &--disabled {
+      color: $checkbox-label-disable-color;
+      border: none;
+    }
+  }
   &__label {
     flex: 1;
     margin-left: $checkbox-label-margin-left;

package/dist/packages/col/index.scss

@@ -15,10 +15,10 @@
 
 @for $i from 1 through 24 {
   .nut-col-offset-#{$i} {
-    margin-left: calc(100 / 24) * $i * 1%;
+    margin-left: calc((100 / 24) * #{$i} * 1%);
   }
 
   .nut-col-#{$i} {
-    width: calc(100 / 24) * $i * 1%;
+    width: calc((100 / 24) * #{$i} * 1%);
   }
 }

package/dist/packages/comment/index.scss

@@ -1,3 +1,5 @@
+@import '../rate/index.scss';
+
 .nut-theme-dark {
   .nut-comment {
     &-header {

package/dist/packages/comment/style.mjs

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

package/dist/packages/datepicker/index.scss

@@ -1,2 +1 @@
-.nut-date-picker {
-}
+@import '../picker/index.scss';

package/dist/packages/datepicker/style.mjs

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

package/dist/packages/dialog/index.scss

@@ -1,3 +1,14 @@
+@import '../button/index.scss';
+@import '../popup/index.scss';
+
+.nut-theme-dark {
+  .nut-dialog {
+    &__header {
+      color: $dark-color3;
+    }
+  }
+}
+
 .nut-dialog {
   display: flex;
   flex-direction: column;

package/dist/packages/dialog/style.mjs

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

package/dist/packages/ecard/index.scss

@@ -1,3 +1,5 @@
+@import '../inputnumber/index.scss';
+
 .nut-theme-dark {
   .nut-ecard {
     color: $dark-color3;

package/dist/packages/ecard/style.mjs

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

package/dist/packages/fixednav/index.scss

@@ -1,3 +1,5 @@
+@import '../overlay/index.scss';
+
 .nut-fixed-nav {
   position: fixed;
   z-index: $fixednav-index;

package/dist/packages/fixednav/style.mjs

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

package/dist/packages/form/index.scss

@@ -1,2 +1 @@
-.nut-form {
-}
+@import '../cellgroup/index.scss';

package/dist/packages/form/style.mjs

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

package/dist/packages/formitem/index.scss

@@ -1,3 +1,5 @@
+@import '../cell/index.scss';
+
 .nut-theme-dark {
   .nut-form-item {
     &__body {
@@ -35,6 +37,7 @@
     font-size: $form-item-label-font-size;
     font-weight: normal;
     width: $form-item-label-width;
+    min-width: auto;
     margin-right: $form-item-label-margin-right;
     flex: none !important;
     display: inline-block !important;

package/dist/packages/formitem/style.mjs

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

package/dist/packages/imagepreview/index.scss

@@ -1,3 +1,8 @@
+@import '../popup/index.scss';
+@import '../swiper/index.scss';
+@import '../swiperitem/index.scss';
+@import '../video/index.scss';
+
 .nut-image-preview {
   height: 100%;
   width: 100%;
@@ -13,11 +18,6 @@
     object-fit: contain;
   }
 
-  &-taro-img {
-    width: 100%;
-    height: 100%;
-  }
-
   &-index {
     position: fixed;
     z-index: 2002;

package/dist/packages/imagepreview/style.mjs

@@ -1,7 +1,2 @@
 import '../../styles/reset.css';
-import '../video/index.scss';
-import '../swiperitem/index.scss';
-import '../swiper/index.scss';
-import '../overlay/index.scss';
-import '../popup/index.scss';
 import './index.scss';

package/dist/packages/input/index.scss

@@ -55,8 +55,8 @@ textarea {
   }
   .input-text {
     font-size: $input-font-size;
-    height: auto;
-    min-height: auto;
+    // height: auto;
+    // min-height: auto;
   }
   &__label {
     width: 80px;
@@ -77,6 +77,7 @@ textarea {
     position: relative;
     width: 100%;
     display: flex;
+    flex: 1;
   }
   &-disabled-mask {
     position: absolute;
@@ -95,33 +96,32 @@ textarea {
     // margin-top: -50%;
     // line-height: var(--van-field-word-limit-line-height);
   }
-  &-left-icon,
-  &-right-icon {
+  &-left-box,
+  &-right-box {
     display: flex;
     align-items: center;
     font-size: 0;
   }
-  &-clear,
-  &-right-icon {
+  &-right-box {
     margin-left: 4px;
   }
-  &-left-icon {
+  &-left-box {
     margin-right: 4px;
   }
   &-clear-box {
     height: 100%;
-    .nut-input-clear {
-      vertical-align: -2px;
-    }
+    display: flex;
+    align-items: center;
+    // .nut-input-clear {
+    //   vertical-align: -2px;
+    // }
   }
   &-clear {
     width: 16px;
     height: 16px;
     color: #c8c9cc;
     cursor: pointer;
-  }
-  .nut-button {
-    margin-left: 10px;
+    margin: 0 4px;
   }
   &--required {
     &::before {

package/dist/packages/invoice/index.scss

@@ -1,3 +1,9 @@
+@import '../button/index.scss';
+@import '../radiogroup/index.scss';
+@import '../radio/index.scss';
+@import '../form/index.scss';
+@import '../formitem/index.scss';
+
 .nut-theme-dark {
   .nut-invoice {
     .nut-invoice__submit {

package/dist/packages/invoice/style.mjs

@@ -1,9 +1,2 @@
 import '../../styles/reset.css';
-import '../button/index.scss';
-import '../radio/index.scss';
-import '../radiogroup/index.scss';
-import '../cell/index.scss';
-import '../formitem/index.scss';
-import '../cellgroup/index.scss';
-import '../form/index.scss';
 import './index.scss';

package/dist/packages/list/index.scss

@@ -1,23 +1,23 @@
 .nut-list {
   width: 100%;
-  overflow: scroll;
   position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+
   &-phantom {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
+    position: relative;
     z-index: -1;
   }
+
   &-container {
+    position: absolute;
+    top: 0;
     left: 0;
     right: 0;
-    top: 0;
-    position: absolute;
   }
+
   &-item {
     overflow: hidden;
-    margin: $list-item-margin;
   }
 }

package/dist/packages/menuitem/index.scss

@@ -1,3 +1,5 @@
+@import '../popup/index.scss';
+
 .nut-theme-dark {
   .nut-menu-item__content {
     .nut-menu-item__option {
@@ -7,6 +9,13 @@
 }
 
 .nut-menu-item {
+  position: fixed;
+  z-index: $menu-bar-opened-z-index;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  overflow: hidden;
+
   .active {
     font-weight: $menu-active-item-font-weight;
     color: $menu-item-active-text-color !important;
@@ -38,20 +47,10 @@
   }
 }
 
-.nut-menu__pop {
-  transition: all 0 ease 0;
-  transform: none;
-}
-
 .nut-menu-item-placeholder-element {
   position: fixed;
-  top: -$menu-bar-line-height;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
-
-  &.up {
-    bottom: -$menu-bar-line-height;
-  }
 }

package/dist/packages/menuitem/style.mjs

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

package/dist/packages/navbar/index.scss

@@ -33,7 +33,6 @@
     width: 100%;
   }
   &--placeholder {
-    display: inline-block;
     width: 100%;
   }
   &--safe-area-inset-top {

package/dist/packages/noticebar/index.scss

@@ -110,17 +110,27 @@
   color: $noticebar-color;
 
   .nut-noticebar__vertical-list {
+    width: 100%;
     margin: 0;
     padding: 0;
     display: block;
     flex: 1;
+    overflow: hidden;
     .nut-noticebar__vertical-item {
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       height: $noticebar-across-height;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }
 
+  .nut-noticebar-custom-item {
+    position: absolute;
+    top: 999999px;
+  }
   .go {
     margin: $noticebar-righticon-margin;
     align-self: center;

package/dist/packages/notify/index.scss

@@ -1,3 +1,5 @@
+@import '../popup/index.scss';
+
 .nut-fade-enter-active {
   transition: opacity 1s;
 }

package/dist/packages/notify/style.mjs

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

package/dist/packages/numberkeyboard/index.scss

@@ -1,3 +1,5 @@
+@import '../popup/index.scss';
+
 .nut-theme-dark {
   .nut-number-keyboard {
     background-color: $dark-background4;

package/dist/packages/numberkeyboard/style.mjs

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

package/dist/packages/picker/index.scss

@@ -144,27 +144,22 @@
     }
 
     &-item-tile {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      display: block;
+      text-align: center;
       width: 100%;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
-
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
     &-item-tarotile {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+      display: block;
+      text-align: center;
       width: 100%;
       color: $picker-item-text-color;
       font-size: $picker-item-text-font-size;
-
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

package/dist/packages/picker/style.mjs

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

package/dist/packages/popover/index.scss

@@ -1,3 +1,5 @@
+@import '../popup/index.scss';
+
 .nut-popover {
   position: absolute;
   display: inline-block;

package/dist/packages/popover/style.mjs

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

package/dist/packages/popup/index.scss

@@ -1,3 +1,5 @@
+@import '../overlay/index.scss';
+
 .nut-theme-dark {
   .nut-popup {
     background: $dark-background2;

package/dist/packages/popup/style.mjs

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

package/dist/packages/price/index.scss

@@ -2,10 +2,14 @@
   font-size: 0;
   display: inline;
   color: $primary-color;
+  &--strike {
+    [class*='nut-price'] {
+      text-decoration: line-through;
+    }
+  }
   &--symbol {
     display: inline-block;
     font-size: $font-size-3;
-    // margin-right: 4px;
   }
   &--large {
     display: inline-block;
@@ -15,11 +19,6 @@
     display: inline-block;
     font-size: $price-big-size;
   }
-  // &--small {
-  //   display: inline-block;
-  //   font-size: $font-size-4;
-  // }
-
   &--decimal-large {
     display: inline-block;
     font-size: $price-decimal-big-size;
@@ -52,8 +51,4 @@
     display: inline-block;
     font-size: $price-symbol-small-size;
   }
-  // &--decimal--big {
-  //   display: inline-block;
-  //   font-size: $price-medium-size;
-  // }
 }

package/dist/packages/rate/index.scss

@@ -11,25 +11,22 @@
 
     &__icon {
       color: $rate-icon-color;
+      flex-shrink: 0;
       cursor: pointer;
 
-      &::before {
-        // position: relative;
-        // top: auto;
-        // left: auto;
-        // transform: none;
-      }
-
       &--disabled {
         color: $rate-icon-void-color;
       }
+      &--full {
+        display: flex;
+      }
       &--half {
+        display: flex;
         position: absolute;
-        width: 50% !important;
+        width: 50%;
         left: 0;
         top: 0;
         overflow: hidden;
-        height: auto !important;
       }
     }
   }

package/dist/packages/searchbar/index.scss

@@ -48,6 +48,10 @@
     background: $searchbar-input-background;
     box-sizing: border-box;
 
+    &.square {
+      border-radius: 0;
+    }
+
     .nut-searchbar__input-inner {
       display: flex;
       position: relative;

package/dist/packages/shortpassword/index.scss

@@ -1,15 +1,33 @@
+@import '../popup/index.scss';
+
 .nut-theme-dark {
   .nut-short-password-title {
     color: $dark-color;
   }
+
   .nut-short-password-wrapper {
     .nut-short-password__list {
       border: none;
       background: $dark-background3;
+
       .nut-short-password__item {
+        position: relative;
         .nut-short-password__item-icon {
           background: $dark-color;
         }
+
+        &::after {
+          position: absolute;
+          box-sizing: border-box;
+          content: ' ';
+          pointer-events: none;
+          top: -50%;
+          right: -50%;
+          bottom: -50%;
+          left: -50%;
+          outline: 1px solid #3a3a3c;
+          transform: scale(0.5);
+        }
       }
     }
   }

package/dist/packages/shortpassword/style.mjs

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