@nutui/nutui 3.1.17-beta.0 → 3.1.18

package/dist/packages/_es/index3.js

@@ -1,64 +1,36 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @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/index4.js

@@ -0,0 +1,64 @@
+/*!
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @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";
+  }
+  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 {
+    move,
+    start,
+    reset,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal
+  };
+}
+export { useTouch as u };

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

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 var _export_sfc = (sfc, props) => {

package/dist/packages/_es/pxCheck.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 const pxCheck = (value) => {

package/dist/packages/_es/raf.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 const _window = window;

package/dist/packages/_es/util.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.16 Fri Feb 25 2022 17:05:36 GMT+0800 (GMT+08:00)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.18 Fri Mar 25 2022 15:02:08 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 const TypeOfFun = (value) => {

package/dist/packages/actionsheet/index.scss

@@ -37,22 +37,23 @@
     display: block;
     //   height: 24px;
     padding: 10px;
-    line-height: 24px;
-    font-size: $font-size-base;
-    color: $title-color;
+    line-height: $actionsheet-item-line-height;
+    font-size: $actionsheet-item-font-size;
+    color: $actionsheet-item-font-color;
     text-align: center;
     background-color: #fff;
+    border-bottom: $actionsheet-item-border-bottom;
     cursor: pointer;
   }
 
   .desc {
-    font-size: $font-size-2;
+    font-size: $actionsheet-item-font-size;
     color: #999;
   }
 
   .subdesc {
     display: block;
-    font-size: $font-size-small;
+    font-size: $actionsheet-item-subdesc-font-size;
     color: #999;
   }
 
@@ -63,6 +64,6 @@
 
   .nut-actionsheet-cancel {
     margin-top: 5px;
-    border-top: 1px solid $actionsheet-light-color;
+    border-top: $actionsheet-item-cancel-border-top;
   }
 }

package/dist/packages/badge/index.scss

@@ -4,32 +4,30 @@
   .slot-icons {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
     top: -20%;
     right: -20%;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
-    z-index: 1;
+    border-radius: $badge-border-radius;
+    z-index: $badge-z-index;
   }
   .sup {
     position: absolute;
     background: $badge-background-color;
-    border-radius: 7px;
-    padding: 0 5px;
+    padding: $badge-padding;
     text-align: center;
-    border-radius: 14px;
+    border-radius: $badge-border-radius;
     font-size: $badge-font-size;
     font-weight: normal;
-    color: $badge-default-background-color;
+    color: $badge-color;
   }
   .nut-badge__content {
-    transform: translateY(-50%) translateX(100%);
+    transform: $badge-content-transform;
   }
   .is-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 7px;
-    padding: 0;
+    width: $badge-dot-width;
+    height: $badge-dot-height;
+    border-radius: $badge-dot-border-radius;
+    padding: $badge-dot-padding;
   }
 }

package/dist/packages/button/index.scss

@@ -1,6 +1,7 @@
 .nut-button {
   position: relative;
   display: inline-block;
+  width: auto;
   flex-shrink: 0;
   height: $button-default-height;
   box-sizing: border-box;
@@ -126,21 +127,21 @@
   }
 
   &--normal {
-    padding: 0 18px;
+    padding: $button-default-padding;
     font-size: $button-default-font-size;
   }
 
   &--small {
     height: $button-small-height;
     line-height: $button-small-line-height;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
   }
   &--mini {
     height: $button-mini-height;
     line-height: 1.2;
-    padding: 0 $padding-xs;
-    font-size: $font-size-1;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
   }
 
   &--block {

package/dist/packages/calendar/index.scss

@@ -38,6 +38,7 @@
 
     .calendar-title {
       font-size: $calendar-title-font;
+      font-weight: $calendar-title-font-weight;
       line-height: 44px;
     }
     .calendar-top-slot {
@@ -46,6 +47,7 @@
     .calendar-curr-month {
       padding: 7px 0;
       line-height: 22px;
+      font-size: $calendar-sub-title-font;
     }
 
     .calendar-weeks {
@@ -59,7 +61,7 @@
       .calendar-week-item {
         &:first-of-type,
         &:last-of-type {
-          color: $calendar-primary-color;
+          color: $calendar-day67-font-color;
         }
       }
     }
@@ -114,13 +116,14 @@
         .calendar-month-item {
           .calendar-month-day:nth-child(7n + 0),
           .calendar-month-day:nth-child(7n + 1) {
-            color: $calendar-primary-color;
+            color: $calendar-day67-font-color;
           }
         }
         .calendar-month-day {
           float: left;
-          width: 14.28%;
-          height: 64px;
+          width: $calendar-day-width;
+          height: $calendar-day-height;
+          font-weight: $calendar-day-font-weight;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -156,6 +159,7 @@
           &-active {
             background-color: $calendar-primary-color;
             color: $white !important;
+            border-radius: $calendar-day-active-border-radius;
 
             .calendar-curr-tips {
               // color: $white !important;
@@ -175,6 +179,7 @@
 
           &-choose {
             background-color: $calendar-choose-color;
+            color: $calendar-choose-font-color;
           }
 
           .calendar-day {

package/dist/packages/calendaritem/index.scss

@@ -1,207 +0,0 @@
-.nut-calendar {
-  position: relative;
-  display: flex;
-  flex: 1;
-  color: #333333;
-  font-size: 16px;
-  background-color: #fff;
-  overflow: hidden;
-  height: 100%;
-  flex-direction: column;
-  &.nut-calendar-tile {
-    .nut-calendar-header {
-      .calendar-title {
-        font-size: $calendar-base-font;
-      }
-    }
-  }
-  .nut-calendar-taro {
-    height: 60vh;
-  }
-  .popup-box {
-    height: 100%;
-  }
-  .nut-calendar-content {
-    overflow-y: auto;
-  }
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  // 头部导航
-  .nut-calendar-header {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-    padding-top: 1px;
-    background-color: $white;
-
-    .calendar-title {
-      font-size: $calendar-title-font;
-      line-height: 44px;
-    }
-    .calendar-top-slot {
-      height: 24px;
-    }
-    .calendar-curr-month {
-      padding: 7px 0;
-      line-height: 22px;
-    }
-
-    .calendar-weeks {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      height: 36px;
-      border-radius: 0px 0px 12px 12px;
-      box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
-
-      .calendar-week-item {
-        &:first-of-type,
-        &:last-of-type {
-          color: $calendar-primary-color;
-        }
-      }
-    }
-  }
-
-  // 月份
-  .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;
-        text-align: center;
-      }
-
-      div:nth-of-type(2) {
-        .calendar-month-title {
-          padding-top: 0;
-        }
-      }
-
-      .calendar-loading-tip {
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        position: absolute;
-        top: -50px;
-        left: 0;
-        right: 0;
-        font-size: $calendar-text-font;
-        color: $text-color;
-      }
-
-      .calendar-month-title {
-        height: 23px;
-        line-height: 23px;
-        margin: 8px 0;
-      }
-
-      .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%;
-          height: 64px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          position: relative;
-
-          .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;
-            bottom: 6px;
-            width: 100%;
-            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;
-            }
-          }
-
-          &-disabled {
-            color: $calendar-disable-color !important;
-          }
-
-          &-choose {
-            background-color: $calendar-choose-color;
-          }
-
-          .calendar-day {
-            padding: 2px 0;
-            font-size: $calendar-day-font;
-          }
-        }
-      }
-    }
-  }
-
-  // 底部导航
-  .nut-calendar-footer {
-    display: flex;
-    height: 62px;
-    width: 100%;
-    background-color: $white;
-
-    .calendar-confirm-btn {
-      height: 44px;
-      width: 100%;
-      margin: 10px 18px;
-      border-radius: 22px;
-      background: $button-primary-background-color;
-      color: $white;
-      text-align: center;
-      line-height: 44px;
-    }
-  }
-}

package/dist/packages/cell/index.scss

@@ -2,8 +2,8 @@
   position: relative;
   display: flex;
   width: 100%;
-  line-height: 20px;
-  padding: 13px 16px;
+  line-height: $cell-line-height;
+  padding: $cell-padding;
   background: $white;
   border-radius: $cell-border-radius;
   box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
@@ -23,7 +23,7 @@
     box-sizing: border-box;
     content: ' ';
     pointer-events: none;
-    right: 16px;
+    right: $cell-after-right;
     bottom: 0;
     left: 16px;
     transform: scaleY(0.5);
@@ -50,16 +50,16 @@
     }
   }
 
+  &__icon {
+    display: flex;
+    flex-direction: row;
+    margin-right: $cell-default-icon-margin;
+  }
+
   &__title {
     display: flex;
     flex-direction: column;
     flex: 1;
-    &.icon {
-      flex-direction: row;
-      .icon {
-        margin-right: 10px;
-      }
-    }
     &-desc {
       font-size: $cell-title-desc-font;
     }

package/dist/packages/cellgroup/index.scss

@@ -32,7 +32,7 @@
   }
   .nut-cell {
     &::after {
-      border-bottom: 2px solid #f5f6f7;
+      border-bottom: $cell-after-border-bottom;
     }
   }
 }

package/dist/packages/checkbox/index.scss

@@ -4,13 +4,13 @@
   &--reverse {
     flex-direction: row-reverse;
     .nut-checkbox__label {
-      margin-right: 15px;
+      margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
   &__label {
-    margin-left: 15px;
-    font-size: 14px;
+    margin-left: $checkbox-label-margin-left;
+    font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
     &--disabled {
       color: $checkbox-label-disable-color;
@@ -18,6 +18,7 @@
   }
   &__icon {
     color: $primary-color;
+    font-size: $checkbox-icon-font-size;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }