@nutui/nutui 3.3.1 → 4.0.0-beta.0

package/dist/packages/calendar/index.scss

@@ -2,13 +2,13 @@
   .nut-calendar {
     background: $dark-background;
     color: $dark-color;
-    .nut-calendar-header {
+    .nut-calendar__header {
       background: $dark-background;
       color: $dark-color;
     }
-    .nut-calendar-content {
-      .calendar-months-panel {
-        .calendar-month-con {
+    .nut-calendar__content {
+      .nut-calendar__panel {
+        .nut-calendar__days {
           .calendar-month-day {
             &-choose {
               background-color: $dark-calendar-choose-color;
@@ -18,7 +18,7 @@
         }
       }
     }
-    .nut-calendar-footer {
+    .nut-calendar__footer {
       background: $dark-background2;
       color: $dark-color;
     }
@@ -34,20 +34,17 @@
   overflow: hidden;
   height: 100%;
   flex-direction: column;
-  &.nut-calendar-tile {
-    .nut-calendar-header {
-      .calendar-title {
+  &.nut-calendar--nopop {
+    .nut-calendar__header {
+      .nut-calendar__header-title {
         font-size: $calendar-base-font;
       }
     }
   }
-  .nut-calendar-taro {
-    height: 60vh;
-  }
   .popup-box {
     height: 100%;
   }
-  .nut-calendar-content {
+  .nut-calendar__content {
     overflow-y: auto;
   }
   ::-webkit-scrollbar {
@@ -55,28 +52,28 @@
   }
 
   // 头部导航
-  .nut-calendar-header {
+  .nut-calendar__header {
     display: flex;
     flex-direction: column;
     text-align: center;
     padding-top: 1px;
     background-color: $white;
 
-    .calendar-title {
+    .nut-calendar__header-title {
       font-size: $calendar-title-font;
       font-weight: $calendar-title-font-weight;
       line-height: 44px;
     }
-    .calendar-top-slot {
+    .nut-calendar__header-slot {
       height: 24px;
     }
-    .calendar-curr-month {
+    .nut-calendar__header-subtitle {
       padding: 7px 0;
       line-height: 22px;
       font-size: $calendar-sub-title-font;
     }
 
-    .calendar-weeks {
+    .nut-calendar__weekdays {
       display: flex;
       align-items: center;
       justify-content: space-around;
@@ -84,7 +81,7 @@
       border-radius: 0px 0px 12px 12px;
       box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
 
-      .calendar-week-item {
+      .nut-calendar__weekday {
         &:first-of-type,
         &:last-of-type {
           color: $calendar-day67-font-color;
@@ -94,27 +91,27 @@
   }
 
   // 月份
-  .nut-calendar-content {
+  .nut-calendar__content {
     flex: 1;
     width: 100%;
     display: block;
-    .calendar-months-panel {
+    .nut-calendar__panel {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
       box-sizing: border-box;
-      .viewArea {
+      .nut-calendar__body {
         display: block;
       }
-      .calendar-month {
+      .nut-calendar__month {
         display: flex;
         flex-direction: column;
         text-align: center;
       }
 
       div:nth-of-type(2) {
-        .calendar-month-title {
+        .nut-calendar__month-title {
           padding-top: 0;
         }
       }
@@ -131,22 +128,22 @@
         color: $text-color;
       }
 
-      .calendar-month-title {
+      .nut-calendar__month-title {
         height: 23px;
         line-height: 23px;
         margin: 8px 0;
         font-size: $calendar-month-title-font-size;
       }
 
-      .calendar-month-con {
+      .nut-calendar__days {
         overflow: hidden;
-        .calendar-month-item {
-          .calendar-month-day:nth-child(7n + 0),
-          .calendar-month-day:nth-child(7n + 1) {
+        .nut-calendar__days-item {
+          .nut-calendar__day:nth-child(7n + 0),
+          .nut-calendar__day:nth-child(7n + 1) {
             color: $calendar-day67-font-color;
           }
         }
-        .calendar-month-day {
+        .nut-calendar__day {
           float: left;
           width: $calendar-day-width;
           height: $calendar-day-height;
@@ -157,19 +154,19 @@
           flex-direction: column;
           position: relative;
 
-          .calendar-curr-tips {
+          .nut-calendar__day-tips {
             position: absolute;
             width: 100%;
           }
 
-          .calendar-curr-tip-curr {
+          .nut-calendar__day-tips--curr {
             position: absolute;
             bottom: 6px;
             width: 100%;
             font-size: 12px;
             line-height: 14px;
           }
-          .calendar-day-tip {
+          .nut-calendar__day-tip {
             position: absolute;
             bottom: 6px;
             width: 100%;
@@ -177,25 +174,24 @@
             line-height: 14px;
             color: $calendar-primary-color;
           }
-          .calendar-curr-tips-top {
+          .nut-calendar__day-tips--top {
             top: 6px;
           }
-          .calendar-curr-tips-bottom {
+          .nut-calendar__day-tips--bottom {
             bottom: 6px;
           }
-          &-active {
+          &--active {
             background-color: $calendar-primary-color;
             color: $white !important;
             border-radius: $calendar-day-active-border-radius;
 
-            .calendar-curr-tips {
-              // color: $white !important;
+            .nut-calendar__day-tips {
               visibility: hidden;
             }
-            .calendar-curr-tip-curr {
+            .nut-calendar__day-tips--curr {
               visibility: hidden;
             }
-            .calendar-day-tip {
+            .nut-calendar__day-tip {
               color: $white;
             }
           }
@@ -204,12 +200,12 @@
             color: $calendar-disable-color !important;
           }
 
-          &-choose {
+          &--choose {
             background-color: $calendar-choose-color;
             color: $calendar-choose-font-color;
           }
 
-          .calendar-day {
+          .nut-calendar__day-value {
             padding: 2px 0;
             font-size: $calendar-day-font;
           }
@@ -219,13 +215,13 @@
   }
 
   // 底部导航
-  .nut-calendar-footer {
+  .nut-calendar__footer {
     display: flex;
     height: 62px;
     width: 100%;
     background-color: $white;
 
-    .calendar-confirm-btn {
+    .nut-calendar__confirm {
       height: 44px;
       width: 100%;
       margin: 10px 18px;

package/dist/packages/calendaritem/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/card/index.js

@@ -0,0 +1,3 @@
+require('./index.scss');
+require('../price/index.scss');
+require('../tag/index.scss');

package/dist/packages/cascader/index.js

@@ -0,0 +1,6 @@
+require('./index.scss');
+require('../popup/index.scss');
+require('../overlay/index.scss');
+require('../tabs/index.scss');
+require('../sticky/index.scss');
+require('../tabpane/index.scss');

package/dist/packages/cascader/index.scss

@@ -16,7 +16,7 @@
   font-size: $cascader-font-size;
   line-height: $cascader-line-height;
 
-  .nut-tabpane {
+  .nut-tab-pane {
     padding: 0;
   }
 

package/dist/packages/category/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/categorypane/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/categorypane/index.scss

@@ -1,5 +1,5 @@
 .nut-theme-dark {
-  .nut-categorypane {
+  .nut-category-pane {
     &__childTitle {
       color: $white;
     }
@@ -8,7 +8,7 @@
     }
   }
 }
-.nut-categorypane {
+.nut-category-pane {
   &__cateListRight {
     padding-left: 15px;
     background: $category-bg-color;

package/dist/packages/cell/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/cellgroup/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/checkbox/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/checkboxgroup/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/circleprogress/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/circleprogress/index.scss

@@ -1,22 +1,22 @@
 .nut-theme-dark {
-  .nut-circleprogress-text {
+  .nut-circle-progress-text {
     color: $dark-color;
   }
 }
 
-.nut-circleprogress {
+.nut-circle-progress {
   position: relative;
 
-  &-hover {
+  &__hover {
     stroke: $circleprogress-primary-color;
     transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
   }
 
-  &-path {
+  &__path {
     stroke: $circleprogress-path-color;
   }
 
-  &-text {
+  &__text {
     position: absolute;
     top: 50%;
     left: 0;

package/dist/packages/col/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/collapse/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/collapseitem/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/collapseitem/index.scss

@@ -1,27 +1,26 @@
 .nut-theme-dark {
   .nut-collapse-item {
-    .collapse-item {
+    .nut-collapse-item__title {
       background: $dark-background;
       color: $dark-color;
       box-shadow: none;
     }
-    .collapse-wrapper {
+    .nut-collapse__item-wrapper {
       .collapse-content,
-      .collapse-extraRender {
+      .nut-collapse__item-extraWrapper__extraRender {
         background: $dark-background;
         color: $dark-color;
       }
     }
-    .collapse-extraWrapper {
-      .collapse-extraRender {
+    .nut-collapse__item-extraWrapper {
+      .nut-collapse__item-extraWrapper__extraRender {
         background: $dark-background;
       }
     }
   }
 }
-.nut-collapse-item {
-  position: relative;
-  .collapse-item {
+.nut-collapse-item__border {
+  .nut-collapse-item__title {
     &::after {
       position: absolute;
       box-sizing: border-box;
@@ -34,16 +33,15 @@
       -webkit-transform: scaleY(0.5);
       transform: scaleY(0.5);
     }
-    .collapse-title-value {
-      display: inline-block;
-      .collapse-title-icon {
-        top: 2px;
-      }
-    }
   }
-  .collapse-item {
+}
+.nut-collapse-item {
+  position: relative;
+  .nut-collapse-item__title {
     position: relative;
-    display: block;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 100%;
     overflow: hidden;
     padding: $collapse-item-padding;
@@ -52,52 +50,50 @@
     line-height: $collapse-item-line-height;
     background-color: #fff;
     box-sizing: border-box;
-    .collapse-icon {
+    .nut-collapse-item__title-main {
+      flex: 1;
+    }
+    .nut-collapse-item__title-main-value {
       display: block;
-      position: absolute;
-      top: 50%;
-      // margin-top: -6px;
-      right: 16px;
+      .nut-collapse-item__title-main-icon {
+        top: 2px;
+      }
+    }
+    .nut-collapse-item__title-icon {
+      // display: block;
+      // position: absolute;
+      // top: 50%;
+      // right: 16px;
+      display: flex;
+      align-items: center;
       color: $collapse-item-icon-color;
-      // width: 24px;
-      // height: 12px;
-      // line-height: 24px;
-      // background-image: url(https://img13.360buyimg.com/imagetools/jfs/t1/153504/23/6125/464/5fb240abE562ed1c5/382909c698fa3c1f.png);
-      // background-repeat: no-repeat;
-      // background-size: 100% 100%;
       transition: transform 0.3s;
+      &--expanded {
+        transform: rotate(-180deg);
+      }
     }
-    .col-expanded {
-      transform: rotate(-180deg);
-    }
-    .subTitle {
+    .nut-collapse-item__title-sub {
       position: absolute;
       top: 50%;
-      right: 60px;
+      right: 65px;
       margin-top: -12px;
       color: $collapse-item-sub-title-color;
     }
-    .titleIconRight {
-      vertical-align: middle;
-      margin: 0px 0 0 10px;
-    }
-    .titleIconLeft {
-      vertical-align: middle;
-      margin: 0px 10px 0 0;
+    .nut-collapse-item__title-label {
+      display: block;
+      color: #969799;
+      font-size: 12px;
     }
   }
-  // .extraRender {
-  //   display: block;
-  // }
-  .collapse-wrapper,
-  .collapse-extraWrapper {
+  .nut-collapse__item-wrapper,
+  .nut-collapse__item-extraWrapper {
     display: block;
     position: relative;
     height: 0;
     overflow: hidden;
     transition: height 0.3s ease-in-out;
-    .collapse-content,
-    .collapse-extraRender {
+    .nut-collapse__item-wrapper__content,
+    .nut-collapse__item-extraWrapper__extraRender {
       display: block;
       padding: $collapse-wrapper-content-padding;
       color: $collapse-wrapper-content-color;
@@ -105,13 +101,13 @@
       line-height: $collapse-wrapper-content-line-height;
       background-color: $collapse-wrapper-content-background-color;
     }
-    .empty {
+    .nut-collapse__item-wrapper__content--empty {
       padding: $collapse-wrapper-empty-content-padding;
     }
   }
-  .collapse-extraWrapper {
+  .nut-collapse__item-extraWrapper {
     height: auto;
-    .collapse-extraRender {
+    .nut-collapse__item-extraWrapper__extraRender {
       word-wrap: break-word;
       word-break: break-all;
       overflow: hidden;
@@ -123,42 +119,23 @@
   }
   .close-style {
     will-change: auto;
-    // height: 0;
   }
-  .nut-collapse-item-disabled {
+  .nut-collapse-item__title--disabled {
     color: $collapse-item-disabled-color;
     cursor: not-allowed;
     pointer-events: none;
-    // .collapse-icon-disabled {
-    //   background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150103/9/14710/474/5fb2419aE63e79ef3/8db2699c11139027.png);
-    //   background-repeat: no-repeat;
-    //   background-size: 100% 100%;
-    // }
     .collapse-icon {
       color: $collapse-item-disabled-color;
     }
   }
-  .titleIconLeft {
-    float: left;
-    .collapse-item {
-      padding: 10px 16px 10px 50px;
-      .collapse-icon {
-        left: 20px;
-      }
-      .subTitle {
-        right: 16px;
-      }
-    }
-  }
-  .titleIconRight {
-    float: right;
-  }
-  .collapse-icon-title {
+  .nut-collapse-item__title-mtitle {
     display: inline-block;
   }
-  // .nut-collapse-item.nut-collapse-item-icon {
-  //     .collapse-icon {
-  //         transform: rotate(0deg);
-  //     }
-  // }
+}
+.collapse-border-none {
+  .nut-collapse-item__title {
+    &::after {
+      display: none;
+    }
+  }
 }

package/dist/packages/comment/index.js

@@ -0,0 +1,2 @@
+require('./index.scss');
+require('../rate/index.scss');

package/dist/packages/comment/index.scss

@@ -255,14 +255,12 @@
   &__follow {
     &-title {
       position: relative;
-      // display: flex;
-      // align-items: center;
       font-size: 14px;
       font-weight: bold;
       color: $black;
       padding-left: 8px;
 
-      i {
+      svg {
         position: absolute;
         left: 0;
         top: 13%;

package/dist/packages/configprovider/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/countdown/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/countup/index.js

@@ -0,0 +1 @@
+require('./index.scss');

package/dist/packages/countup/index.scss

@@ -4,78 +4,48 @@
     color: $dark-color;
     box-shadow: none;
   }
-  .nut-collapse-item {
-    .collapse-wrapper {
-      .collapse-content,
-      .collapse-extraRender {
-        background: $dark-background;
-        color: $dark-color;
-      }
-    }
-    .collapse-extraWrapper {
-      .collapse-extraRender {
-        background: $dark-background;
-      }
-    }
-  }
 }
 .nut-countup {
   display: block;
-  // width: 100%;
   padding: 5px 20px;
   color: #000;
   font-weight: bold;
   font-family: PingFangSC-Regular;
-  // text-align:center;
-  .run-number {
+  .nut-countup__number {
     display: inline-block;
     width: 100%;
-    // margin: 0 auto;
     padding: 0;
     overflow: hidden;
-    // height: 50px;
-    // line-height: 50px;
     text-align: center;
     font-weight: bold;
     position: relative;
-    .numberItem {
+    .nut-countup__number-item {
       position: absolute;
       transition: none;
       list-style: none;
-      // transition: all linear .1s;
-      // animation: myMove 1s linear infinite;
-      // animation-fill-mode: forwards;
-      // @keyframes myMove {
-      //     0% {
-      //       transform: translateY(0);
-      //     }
-      //     100% {
-      //       transform: translateY(-50px);
-      //     }
-      // }
-      .itemSpan {
+      .nut-countup__number-item__span {
         display: block;
         font-family: PingFangSC-Regular;
       }
     }
   }
-  .pointstyl {
+  .nut-countup-pointstyl {
     position: absolute;
     display: block;
   }
-  .run-number-machine-img {
+  .nut-countup__machine {
     overflow: hidden;
-    .run-number-machine-img-li {
+    .nut-countup__machine-item {
       float: left;
       background-position: center 0;
       background-repeat: repeat-y;
       background-attachment: scroll;
     }
   }
-  .run-number-img {
+  .nut-countup__numberimg {
     position: relative;
     display: inline-block;
-    .run-number-img-li {
+    .nut-countup__numberimg__item {
       position: absolute;
       display: block;
       transition: none;

package/dist/packages/datepicker/index.js

@@ -0,0 +1,4 @@
+require('./index.scss');
+require('../picker/index.scss');
+require('../popup/index.scss');
+require('../overlay/index.scss');

package/dist/packages/datepicker/index.scss

@@ -1,2 +1,2 @@
-.nut-datepicker {
+.nut-date-picker {
 }