@nutui/nutui-react 2.7.8 → 2.7.10

package/dist/packages/calendar/calendar.scss

@@ -61,6 +61,10 @@
     height: 36px;
     border-radius: 0px 0px 12px 12px;
     box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+
+    &-shrink {
+      padding-left: 17%;
+    }
   }
 
   &-week-item {
@@ -110,6 +114,22 @@
     margin: 8px 0;
   }
 
+  &-weeknumber {
+    width: 35%;
+    &-index {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      position: relative;
+      height: $calendar-day-height;
+      font-weight: $font-weight;
+      font-size: $font-size-base;
+      margin-bottom: 4px;
+      color: $color-text-help;
+    }
+  }
+
   &-days {
     overflow: hidden;
   }
@@ -204,6 +224,10 @@
     }
   }
 
+  .shrink {
+    display: flex;
+  }
+
   // 底部导航
   &-footer {
     display: flex;

package/dist/packages/calendar/calendarviewmode.scss

@@ -0,0 +1,181 @@
+.nut-calendar-viewmode {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  font-size: $calendar-base-font-size;
+  background-color: $color-background-overlay;
+  color: $color-title;
+  overflow: hidden;
+  height: 100%;
+
+  &.nut-calendar-title {
+    .nut-calendar-header {
+      .calendar-title {
+        font-size: $calendar-base-font-size;
+      }
+    }
+  }
+
+  .nut-calendar-taro {
+    height: 60vh;
+  }
+
+  .popup-box {
+    height: 100%;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  // 头部导航
+  &-header {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  &-title {
+    color: $color-title;
+    font-size: $calendar-title-font-size;
+    font-weight: $calendar-title-font-weight;
+    line-height: 50px;
+  }
+
+  &-sub-title {
+    padding: 7px 0;
+    line-height: 22px;
+    font-size: $calendar-sub-title-font-size;
+  }
+
+  // 内容区域
+  &-content {
+    flex: 1;
+    width: 100%;
+    display: block;
+    overflow-y: auto;
+  }
+
+  &-pannel {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: block;
+    box-sizing: border-box;
+
+    .calendar-loading-tip {
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      position: absolute;
+      top: -50px;
+      left: 0;
+      right: 0;
+      font-size: $font-size-small;
+      color: $color-text;
+    }
+  }
+
+  &-panel {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    &-title {
+      height: 23px;
+      line-height: 23px;
+      margin: 8px 0;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    float: left;
+    width: $calendar-panel-item-width;
+    height: $calendar-day-height;
+    font-weight: $calendar-day-font-weight;
+    margin-bottom: 4px;
+
+    &-info-curr {
+      position: absolute;
+      bottom: 5px;
+      width: 100%;
+      font-size: $font-size-small;
+      line-height: 14px;
+    }
+
+    &-info {
+      position: absolute;
+      bottom: 5px;
+      width: 100%;
+      font-size: $font-size-small;
+      line-height: 14px;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text !important;
+      border-radius: $calendar-day-active-border-radius;
+      .nut-calendar-day-info {
+        color: $color-primary-text;
+      }
+    }
+
+    &-prev,
+    &-next {
+      color: $calendar-disable-color !important;
+      .nut-calendar-day-info-curr {
+        display: none;
+      }
+    }
+  }
+
+  // 底部导航
+  &-footer {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    background-color: $white;
+
+    .calendar-confirm-btn {
+      height: 44px;
+      margin: 10px 18px;
+      border-radius: 22px;
+      background: $button-primary-background-color;
+      color: $color-primary-text;
+      text-align: center;
+      line-height: 44px;
+    }
+  }
+}
+
+.nut-calendar-popup .nut-popup-title-right {
+  top: 7px !important;
+}
+
+[dir='rtl'] .nut-calendar,
+.nut-rtl .nut-calendar {
+  &-day {
+    float: right;
+
+    &-active {
+      &.active-start {
+        border-top-left-radius: 0;
+        border-top-right-radius: $calendar-day-active-border-radius;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: $calendar-day-active-border-radius;
+      }
+
+      &.active-end {
+        border-top-right-radius: 0;
+        border-top-left-radius: $calendar-day-active-border-radius;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: $calendar-day-active-border-radius;
+      }
+    }
+  }
+}

package/dist/packages/swiper/swiper.scss

@@ -6,6 +6,14 @@
   touch-action: none;
   position: relative;
 
+  &-canmove-horizontal {
+    touch-action: pan-y;
+  }
+
+  &-canmove-vertical {
+    touch-action: pan-x;
+  }
+
   &-indicator {
     display: flex;
     position: absolute;
@@ -26,11 +34,13 @@
     z-index: 1;
   }
 }
+
 .nut-swiper-inner {
   width: 100%;
   height: 100%;
   display: flex;
   position: relative;
+
   &-horizontal {
     transform: translateX(var(--swiper-offset));
   }
@@ -60,6 +70,7 @@
     right: 50%;
     transform: translateX(50%);
   }
+
   &-indicator-vertical {
     left: auto;
     right: 12px;