@nutui/nutui 3.1.16 → 3.1.17-beta.0

package/dist/packages/_es/index2.js

@@ -1,64 +1,36 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { ref } from "vue";
-const MIN_DISTANCE = 10;
-function getDirection(x, y) {
-  if (x > y && x > MIN_DISTANCE) {
-    return "horizontal";
+import { unref } from "vue";
+function isWindow(val) {
+  return val === window;
+}
+const useRect = (elementRef) => {
+  const element = unref(elementRef);
+  if (isWindow(element)) {
+    const width = element.innerWidth;
+    const height = element.innerHeight;
+    return {
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: height,
+      width,
+      height
+    };
   }
-  if (y > x && y > MIN_DISTANCE) {
-    return "vertical";
+  if (element && element.getBoundingClientRect) {
+    return element.getBoundingClientRect();
   }
-  return "";
-}
-function useTouch() {
-  const startX = ref(0);
-  const startY = ref(0);
-  const deltaX = ref(0);
-  const deltaY = ref(0);
-  const offsetX = ref(0);
-  const offsetY = ref(0);
-  const direction = ref("");
-  const isVertical = () => direction.value === "vertical";
-  const isHorizontal = () => direction.value === "horizontal";
-  const reset = () => {
-    deltaX.value = 0;
-    deltaY.value = 0;
-    offsetX.value = 0;
-    offsetY.value = 0;
-    direction.value = "";
-  };
-  const start = (event) => {
-    reset();
-    startX.value = event.touches[0].clientX;
-    startY.value = event.touches[0].clientY;
-  };
-  const move = (event) => {
-    const touch = event.touches[0];
-    deltaX.value = touch.clientX - startX.value;
-    deltaY.value = touch.clientY - startY.value;
-    offsetX.value = Math.abs(deltaX.value);
-    offsetY.value = Math.abs(deltaY.value);
-    if (!direction.value) {
-      direction.value = getDirection(offsetX.value, offsetY.value);
-    }
-  };
   return {
-    move,
-    start,
-    reset,
-    startX,
-    startY,
-    deltaX,
-    deltaY,
-    offsetX,
-    offsetY,
-    direction,
-    isVertical,
-    isHorizontal
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
   };
-}
-export { useTouch as u };
+};
+export { useRect as u };

package/dist/packages/_es/index3.js

@@ -1,36 +1,64 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { unref } from "vue";
-function isWindow(val) {
-  return val === window;
-}
-const useRect = (elementRef) => {
-  const element = unref(elementRef);
-  if (isWindow(element)) {
-    const width = element.innerWidth;
-    const height = element.innerHeight;
-    return {
-      top: 0,
-      left: 0,
-      right: width,
-      bottom: height,
-      width,
-      height
-    };
+import { ref } from "vue";
+const MIN_DISTANCE = 10;
+function getDirection(x, y) {
+  if (x > y && x > MIN_DISTANCE) {
+    return "horizontal";
   }
-  if (element && element.getBoundingClientRect) {
-    return element.getBoundingClientRect();
+  if (y > x && y > MIN_DISTANCE) {
+    return "vertical";
   }
+  return "";
+}
+function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const reset = () => {
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  };
+  const move = (event) => {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - startX.value;
+    deltaY.value = touch.clientY - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  };
   return {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: 0,
-    height: 0
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
   };
-};
-export { useRect as u };
+}
+export { useTouch as u };

package/dist/packages/_es/plugin-vue_export-helper.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/pxCheck.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/raf.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/util.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.16 Sun Jan 30 2022 10:58:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/address/index.scss

@@ -37,6 +37,14 @@
           font-weight: bold;
         }
 
+        view {
+          display: block;
+          max-width: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
         span {
           display: inline-block;
           max-width: 100px;

package/dist/packages/audio/index.scss

@@ -0,0 +1,66 @@
+.nut-audio {
+  padding: 0;
+  .progress-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0px auto;
+    padding: 10px 0;
+
+    .progress-bar-wrapper {
+      flex: 1;
+      margin: 0 10px;
+    }
+
+    .time {
+      min-width: 50px;
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+
+  .nut-audio-icon {
+    position: relative;
+    display: inline-block;
+
+    .nut-audio-icon-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      background: #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 8px rgba($color: $text-color, $alpha: 0.5);
+      &.nut-audio-icon-stop {
+        &::after {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translateX(-15px);
+          content: '';
+          height: 2px;
+          width: 30px;
+          background: $disable-color;
+          transform: rotate(45deg);
+          transform-origin: 8px -18px;
+        }
+      }
+    }
+  }
+
+  .audioMain {
+    margin-top: 30px;
+  }
+
+  .custom-button {
+    width: 8px;
+    height: 8px;
+    color: #fff;
+    font-size: 10px;
+    line-height: 18px;
+    text-align: center;
+    background-color: #ee0a24;
+    border-radius: 100px;
+  }
+}

package/dist/packages/audiooperate/index.scss

@@ -0,0 +1,13 @@
+.nut-audio-operate-group {
+  display: flex;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+
+  .nut-audio-operate {
+    .nut-audio-operate-item {
+      margin: 0 5px;
+    }
+  }
+}

package/dist/packages/calendar/index.scss

@@ -2,30 +2,24 @@
   position: relative;
   display: flex;
   flex: 1;
-  height: 518px;
-  padding-top: 132px;
-  padding-bottom: 78px;
-  color: $calendar-base-color;
-  font-size: $calendar-base-font;
-  background-color: $white;
+  color: #333333;
+  font-size: 16px;
+  background-color: #fff;
   overflow: hidden;
-
+  height: 100%;
+  flex-direction: column;
   &.nut-calendar-tile {
-    padding-top: 46px;
-    padding-bottom: 0;
-
     .nut-calendar-header {
       .calendar-title {
         font-size: $calendar-base-font;
       }
     }
   }
-
   .nut-calendar-taro {
     height: 60vh;
   }
   .popup-box {
-    height: 518px;
+    height: 100%;
   }
   .nut-calendar-content {
     overflow-y: auto;
@@ -36,26 +30,21 @@
 
   // 头部导航
   .nut-calendar-header {
-    position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
     display: flex;
     flex-direction: column;
     text-align: center;
     padding-top: 1px;
     background-color: $white;
-    z-index: 1;
 
     .calendar-title {
-      padding-top: 22px;
       font-size: $calendar-title-font;
-      line-height: 25px;
-      border-radius: 12px 12px 0 0;
+      line-height: 44px;
+    }
+    .calendar-top-slot {
+      height: 24px;
     }
-
     .calendar-curr-month {
-      padding: 10px 0 7px;
+      padding: 7px 0;
       line-height: 22px;
     }
 
@@ -63,7 +52,7 @@
       display: flex;
       align-items: center;
       justify-content: space-around;
-      height: 46px;
+      height: 36px;
       border-radius: 0px 0px 12px 12px;
       box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
 
@@ -79,13 +68,17 @@
   // 月份
   .nut-calendar-content {
     flex: 1;
-
+    width: 100%;
+    display: block;
     .calendar-months-panel {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
-
+      box-sizing: border-box;
+      .viewArea {
+        display: block;
+      }
       .calendar-month {
         display: flex;
         flex-direction: column;
@@ -118,14 +111,12 @@
 
       .calendar-month-con {
         overflow: hidden;
-
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
             color: $calendar-primary-color;
           }
         }
-
         .calendar-month-day {
           float: left;
           width: 14.28%;
@@ -136,24 +127,43 @@
           flex-direction: column;
           position: relative;
 
-          .curr-tips,
+          .calendar-curr-tips {
+            position: absolute;
+            width: 100%;
+          }
+
+          .calendar-curr-tip-curr {
+            position: absolute;
+            bottom: 6px;
+            width: 100%;
+            font-size: 12px;
+            line-height: 14px;
+          }
           .calendar-day-tip {
             position: absolute;
-            top: 10px;
+            bottom: 6px;
             width: 100%;
-            font-size: 11px;
-            line-height: 12px;
+            font-size: 12px;
+            line-height: 14px;
             color: $calendar-primary-color;
           }
-
+          .calendar-curr-tips-top {
+            top: 6px;
+          }
+          .calendar-curr-tips-bottom {
+            bottom: 6px;
+          }
           &-active {
             background-color: $calendar-primary-color;
             color: $white !important;
 
-            .curr-tips {
+            .calendar-curr-tips {
+              // color: $white !important;
+              visibility: hidden;
+            }
+            .calendar-curr-tip-curr {
               visibility: hidden;
             }
-
             .calendar-day-tip {
               color: $white;
             }
@@ -168,7 +178,7 @@
           }
 
           .calendar-day {
-            padding: 4px 0;
+            padding: 2px 0;
             font-size: $calendar-day-font;
           }
         }
@@ -178,19 +188,15 @@
 
   // 底部导航
   .nut-calendar-footer {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
     display: flex;
-    height: 78px;
+    height: 62px;
     width: 100%;
     background-color: $white;
 
     .calendar-confirm-btn {
       height: 44px;
       width: 100%;
-      margin: 14px 18px;
+      margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
       color: $white;

package/dist/packages/calendaritem/index.scss

@@ -2,52 +2,49 @@
   position: relative;
   display: flex;
   flex: 1;
-  height: 518px;
-  padding-top: 132px;
-  padding-bottom: 78px;
-  color: $calendar-base-color;
-  font-size: $calendar-base-font;
-  background-color: $white;
+  color: #333333;
+  font-size: 16px;
+  background-color: #fff;
   overflow: hidden;
-
+  height: 100%;
+  flex-direction: column;
   &.nut-calendar-tile {
-    height: 100%;
-    padding-top: 46px;
-    padding-bottom: 0;
-
     .nut-calendar-header {
       .calendar-title {
         font-size: $calendar-base-font;
       }
     }
   }
-
-  &.nut-calendar-nofooter {
-    padding-bottom: 0;
+  .nut-calendar-taro {
+    height: 60vh;
+  }
+  .popup-box {
+    height: 100%;
+  }
+  .nut-calendar-content {
+    overflow-y: auto;
+  }
+  ::-webkit-scrollbar {
+    display: none;
   }
 
   // 头部导航
   .nut-calendar-header {
-    position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
     display: flex;
     flex-direction: column;
     text-align: center;
     padding-top: 1px;
     background-color: $white;
-    z-index: 1;
 
     .calendar-title {
-      padding-top: 22px;
       font-size: $calendar-title-font;
-      line-height: 25px;
-      border-radius: 12px 12px 0 0;
+      line-height: 44px;
+    }
+    .calendar-top-slot {
+      height: 24px;
     }
-
     .calendar-curr-month {
-      padding: 10px 0 7px;
+      padding: 7px 0;
       line-height: 22px;
     }
 
@@ -55,7 +52,8 @@
       display: flex;
       align-items: center;
       justify-content: space-around;
-      height: 46px;
+      height: 36px;
+      border-radius: 0px 0px 12px 12px;
       box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
 
       .calendar-week-item {
@@ -70,13 +68,17 @@
   // 月份
   .nut-calendar-content {
     flex: 1;
-
+    width: 100%;
+    display: block;
     .calendar-months-panel {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
-
+      box-sizing: border-box;
+      .viewArea {
+        display: block;
+      }
       .calendar-month {
         display: flex;
         flex-direction: column;
@@ -109,14 +111,12 @@
 
       .calendar-month-con {
         overflow: hidden;
-
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
             color: $calendar-primary-color;
           }
         }
-
         .calendar-month-day {
           float: left;
           width: 14.28%;
@@ -127,24 +127,43 @@
           flex-direction: column;
           position: relative;
 
-          .calendar-curr-tips,
+          .calendar-curr-tips {
+            position: absolute;
+            width: 100%;
+          }
+
+          .calendar-curr-tip-curr {
+            position: absolute;
+            bottom: 6px;
+            width: 100%;
+            font-size: 12px;
+            line-height: 14px;
+          }
           .calendar-day-tip {
             position: absolute;
-            top: 10px;
+            bottom: 6px;
             width: 100%;
-            font-size: 11px;
-            line-height: 12px;
+            font-size: 12px;
+            line-height: 14px;
             color: $calendar-primary-color;
           }
-
+          .calendar-curr-tips-top {
+            top: 6px;
+          }
+          .calendar-curr-tips-bottom {
+            bottom: 6px;
+          }
           &-active {
             background-color: $calendar-primary-color;
             color: $white !important;
 
             .calendar-curr-tips {
+              // color: $white !important;
+              visibility: hidden;
+            }
+            .calendar-curr-tip-curr {
               visibility: hidden;
             }
-
             .calendar-day-tip {
               color: $white;
             }
@@ -159,7 +178,7 @@
           }
 
           .calendar-day {
-            padding: 4px 0;
+            padding: 2px 0;
             font-size: $calendar-day-font;
           }
         }
@@ -169,19 +188,15 @@
 
   // 底部导航
   .nut-calendar-footer {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -1px;
     display: flex;
-    height: 78px;
+    height: 62px;
     width: 100%;
     background-color: $white;
 
     .calendar-confirm-btn {
       height: 44px;
       width: 100%;
-      margin: 14px 18px;
+      margin: 10px 18px;
       border-radius: 22px;
       background: $button-primary-background-color;
       color: $white;