@nutui/nutui 3.1.21-beta.2 → 3.1.22-beta.0

package/dist/packages/locale/lang/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.21-beta.2 Mon May 09 2022 11:11:25 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:36 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -73,7 +73,7 @@ class Lang extends BaseLang {
     this.sku = {
       buyNow: "\u7ACB\u5373\u8D2D\u4E70",
       buyNumber: "\u8D2D\u4E70\u6570\u91CF",
-      addToCard: "\u52A0\u5165\u8D2D\u7269\u8F66"
+      addToCart: "\u52A0\u5165\u8D2D\u7269\u8F66"
     };
     this.skuheader = {
       skuId: "\u5546\u54C1\u7F16\u53F7"
@@ -91,6 +91,14 @@ class Lang extends BaseLang {
       pullTxt: "\u677E\u5F00\u5237\u65B0",
       loadMoreTxt: "\u54CE\u5440\uFF0C\u8FD9\u91CC\u662F\u5E95\u90E8\u4E86\u5566"
     };
+    this.datepicker = {
+      year: "\u5E74",
+      month: "\u6708",
+      day: "\u65E5",
+      hour: "\u65F6",
+      min: "\u5206",
+      seconds: "\u79D2"
+    };
   }
 }
 export { Lang as default };

package/dist/packages/locale/{locale/lang → lang}/zh-TW.d.ts

@@ -66,7 +66,7 @@ declare class Lang extends BaseLang {
     sku: {
         buyNow: string;
         buyNumber: string;
-        addToCard: string;
+        addToCart: string;
     };
     skuheader: {
         skuId: string;
@@ -84,5 +84,13 @@ declare class Lang extends BaseLang {
         pullTxt: string;
         loadMoreTxt: string;
     };
+    datepicker: {
+        year: string;
+        month: string;
+        day: string;
+        hour: string;
+        min: string;
+        seconds: string;
+    };
 }
 export default Lang;

package/dist/packages/locale/lang/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.21-beta.2 Mon May 09 2022 11:11:25 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:36 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -73,7 +73,7 @@ class Lang extends BaseLang {
     this.sku = {
       buyNow: "\u7ACB\u5373\u8CFC\u8CB7",
       buyNumber: "\u8CFC\u8CB7\u6578\u91CF",
-      addToCard: "\u52A0\u5165\u8CFC\u7269\u8ECA"
+      addToCart: "\u52A0\u5165\u8CFC\u7269\u8ECA"
     };
     this.skuheader = {
       skuId: "\u5546\u54C1\u7DE8\u865F"
@@ -91,6 +91,14 @@ class Lang extends BaseLang {
       pullTxt: "\u9B06\u958B\u5237\u65B0",
       loadMoreTxt: "\u54CE\u5440\uFF0C\u9019\u88E1\u662F\u5E95\u90E8\u4E86\u5566"
     };
+    this.datepicker = {
+      year: "\u5E74",
+      month: "\u6708",
+      day: "\u65E5",
+      hour: "\u6642",
+      min: "\u5206",
+      seconds: "\u79D2"
+    };
   }
 }
 export { Lang as default };

package/dist/packages/menuitem/index.scss

@@ -27,7 +27,6 @@
 }
 
 .nut-menu__overlay {
-  position: absolute;
   top: auto !important;
 }
 

package/dist/packages/navbar/index.scss

@@ -14,12 +14,19 @@
   &:active::before {
     opacity: 0.1;
   }
+  &--border {
+    border-bottom: 1px solid #eee;
+  }
   &--fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
+  &--placeholder {
+    display: inline-block;
+    width: 100%;
+  }
   &--safe-area-inset-top {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
@@ -54,7 +61,7 @@
     display: flex;
     justify-content: center;
     .title {
-      width: $navbar-title-width;
+      min-width: $navbar-title-width;
       font-size: $navbar-title-font;
       font-weight: $navbar-title-font-weight;
       color: $navbar-title-font-color;

package/dist/packages/popover/index.scss

@@ -1,8 +1,8 @@
-.nut-popover--dark,
 .nut-popover {
-  position: relative;
-  display: inline-block;
-  margin-right: 20px;
+  overflow-y: inherit;
+  transform: inherit;
+
+  // 遮罩
   .more-background {
     opacity: 0;
     position: fixed;
@@ -12,74 +12,402 @@
     left: 0;
     top: 0;
   }
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
-    z-index: 12;
+
+  .popover-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+  }
+  // top
+  &[data-popper-placement^='top'] {
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+    }
+  }
+
+  &[data-popper-placement='top'] {
+    .popover-arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-popper-placement='top-start'] {
+    .popover-arrow {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  &[data-popper-placement='top-end'] {
+    .popover-arrow {
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // left
+  &[data-popper-placement^='left'] {
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+    }
+  }
+
+  &[data-popper-placement='left'] {
+    .popover-arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &[data-popper-placement='left-start'] {
+    .popover-arrow {
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  &[data-popper-placement='left-end'] {
+    .popover-arrow {
+      bottom: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  // right
+
+  &[data-popper-placement^='right'] {
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+    }
+  }
+
+  &[data-popper-placement='right'] {
+    .popover-arrow {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &[data-popper-placement='right-start'] {
+    .popover-arrow {
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  &[data-popper-placement='right-end'] {
+    .popover-arrow {
+      bottom: 16px;
+      transform: translateY(0%);
+    }
+  }
+  // bottom
+  &[data-popper-placement^='bottom'] {
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+    }
+  }
+
+  &[data-popper-placement='bottom'] {
+    .popover-arrow {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &[data-popper-placement='bottom-start'] {
+    .popover-arrow {
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  &[data-popper-placement='bottom-end'] {
+    .popover-arrow {
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-menu {
+    display: block;
     background: $popover-white-background-color;
     border-radius: 5px;
-    opacity: 1;
     font-size: 14px;
     font-family: PingFangSC;
     font-weight: normal;
     color: $popover-primary-text-color;
-    position: absolute;
-    .popoverArrow {
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid $popover-white-background-color;
-    }
-    .title-item {
+    box-shadow: 0 2px 12px rgb(50 50 51 / 12%);
+    .popover-menu-item {
       display: flex;
       align-items: center;
       padding-bottom: 8px;
-      margin: 8px;
+      padding: 8px 0;
+      margin: 0 8px;
       border-bottom: 1px solid $popover-border-bottom-color;
-      &:first-child {
-        margin-top: 15px;
-      }
+
       &:last-child {
-        margin-bottom: 2px;
         border-bottom: none;
       }
-      .title-name {
+      .popover-menu-name {
+        display: block;
         margin-right: 12px;
         margin-left: 8px;
-        width: 100%;
       }
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-white-background-color;
-      border-bottom: 10px solid transparent;
+
+  .disabled {
+    color: $popover-disable-color;
+    cursor: not-allowed;
+  }
+}
+
+.nut-popover--dark {
+  color: $popover-white-background-color;
+
+  &[data-popper-placement^='top'] {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-white-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+
+  &[data-popper-placement^='left'] {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--right {
-    .popoverArrow--right {
+
+  &[data-popper-placement^='right'] {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
+    }
+  }
+
+  &[data-popper-placement^='bottom'] {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
+    }
+  }
+
+  .popover-menu {
+    background: $popover-dark-background-color;
+    color: $popover-white-background-color;
+  }
+}
+
+// Taro
+.nut-popover-taro {
+  position: relative;
+  display: inline-block;
+  .more-background {
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    left: 0;
+    top: 0;
+  }
+
+  .popover-content {
+    position: absolute;
+    z-index: 12;
+    min-width: 80px;
+
+    .popover-arrow {
       position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-white-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+    }
+
+    .popover-menu {
+      box-shadow: 0 2px 12px rgb(50 50 51 / 12%);
+      border-radius: 5px;
+      font-size: 14px;
+      font-family: PingFangSC;
+      font-weight: normal;
+      color: $popover-primary-text-color;
+      background: $popover-white-background-color;
+      .popover-menu-item {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+        margin: 0 8px;
+        border-bottom: 1px solid $popover-border-bottom-color;
+        &:last-child {
+          border-bottom: none;
+        }
+        .popover-menu-name {
+          margin-right: 12px;
+          margin-left: 8px;
+          width: 100%;
+        }
+      }
+    }
+  }
+  // bottom
+  .popover-content--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--bottom-start {
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--bottom-end {
+    right: 0;
+    .popover-arrow {
+      top: 0px;
+      border-bottom-color: $popover-white-background-color;
+      border-top-width: 0;
+      margin-top: -8px;
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  // top
+  .popover-content--top {
+    left: 50%;
+    transform: translateX(-50%);
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  .popover-content--top-start {
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      left: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--top-end {
+    right: 0;
+    .popover-arrow {
+      bottom: 0;
+      border-top-color: $popover-white-background-color;
+      border-bottom-width: 0;
+      margin-bottom: -8px;
+
+      right: 16px;
+      transform: translateX(0%);
+    }
+  }
+  // left
+  .popover-content--left {
+    top: 50%;
+    transform: translateY(-50%);
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  .popover-content--left-start {
+    top: 0%;
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      top: 16px;
+      transform: translateX(0%);
+    }
+  }
+
+  .popover-content--left-end {
+    bottom: 0%;
+    .popover-arrow {
+      right: 0px;
+      border-left-color: $popover-white-background-color;
+      border-right-width: 0;
+      margin-right: -8px;
+      bottom: 16px;
+      transform: translateX(0%);
+    }
+  }
+  // right
+  .popover-content--right {
+    top: 50%;
+    transform: translateY(-50%);
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .popover-content--right-start {
+    top: 0%;
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      top: 16px;
+      transform: translateY(0%);
+    }
+  }
+
+  .popover-content--right-end {
+    bottom: 0%;
+    .popover-arrow {
+      left: 0px;
+      border-right-color: $popover-white-background-color;
+      border-left-width: 0;
+      margin-left: -8px;
+      bottom: 16px;
+      transform: translateY(0%);
     }
   }
 
@@ -89,45 +417,38 @@
   }
 }
 
-.nut-popover--dark {
-  background: $popover-dark-background-color;
+.nut-popover-taro--dark {
   color: $popover-white-background-color;
-  .popoverContent--left,
-  .popoverContent--right,
-  .popoverContent--top,
-  .popoverContent {
-    background: $popover-dark-background-color;
-    color: $popover-white-background-color;
-    .popoverArrow {
-      border-bottom: 10px solid $popover-dark-background-color;
+  .popover-content--bottom,
+  .popover-content--bottom-start,
+  .popover-content--bottom-end {
+    .popover-arrow {
+      border-bottom-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--top {
-    .popoverArrow--top {
-      position: absolute;
-      top: auto;
-      border-left: 8px solid transparent;
-      border-right: 8px solid transparent;
-      border-top: 10px solid $popover-dark-background-color;
-      border-bottom: 10px solid transparent;
+  .popover-content--top,
+  .popover-content--top-start,
+  .popover-content--top-end {
+    .popover-arrow {
+      border-top-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--left {
-    .popoverArrow--left {
-      position: absolute;
-      border-left: 10px solid $popover-dark-background-color;
-      border-right: 10px solid transparent;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+  .popover-content--left,
+  .popover-content--left-start,
+  .popover-content--left-end {
+    .popover-arrow {
+      border-left-color: $popover-dark-background-color;
     }
   }
-  .popoverContent--right {
-    .popoverArrow--right {
-      position: absolute;
-      border-left: 10px solid transparent;
-      border-right: 10px solid $popover-dark-background-color;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
+  .popover-content--right,
+  .popover-content--right-start,
+  .popover-content--right-end {
+    .popover-arrow {
+      border-right-color: $popover-dark-background-color;
     }
   }
+  .popover-menu {
+    background: $popover-dark-background-color !important;
+    color: $popover-white-background-color !important;
+  }
 }

package/dist/packages/popup/index.scss

@@ -87,6 +87,9 @@
   background-color: $white;
   transition: transform 0.2s;
   -webkit-overflow-scrolling: touch;
+  .nutui-popup__content-wrapper {
+    height: 100%;
+  }
 }
 
 .nut-overflow-hidden {

package/dist/packages/searchbar/index.scss

@@ -5,6 +5,10 @@
   padding: $searchbar-padding;
   background: $searchbar-background;
   box-sizing: border-box;
+  &__search-label {
+    padding: 0 5px;
+    color: #323233;
+  }
   &__search-input {
     display: flex;
     align-items: center;

package/dist/packages/tabbar/index.scss

@@ -21,7 +21,7 @@
   }
 
   &-safebottom {
-    margin-bottom: constant(safe-area-inset-bottom);
-    margin-bottom: env(safe-area-inset-bottom);
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

package/dist/packages/tabpane/index.scss

@@ -6,7 +6,9 @@
   padding: 24px 20px;
   box-sizing: border-box;
   overflow: auto;
-  &.active {
-    // overflow: visible;
+  height: 100%;
+  &.inactive {
+    overflow: visible;
+    height: 0;
   }
 }

package/dist/packages/tabs/index.scss

@@ -16,6 +16,9 @@
       &.scrollable {
         overflow-x: hidden;
         overflow-y: auto;
+        .nut-tabs__titles-item {
+          padding: 0 10px 0 15px;
+        }
       }
       &-item {
         height: $tabs-vertical-titles-item-height;