@nutui/nutui 3.1.22-beta.0 → 3.1.22

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

@@ -1,13 +1,12 @@
 /*!
-* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
+var o = (o2, r) => {
+  const t = o2.__vccOpts || o2;
+  for (const [o3, c] of r)
+    t[o3] = c;
+  return t;
 };
-export { _export_sfc as _ };
+export { o as _ };

package/dist/packages/_es/pxCheck.js

@@ -1,9 +1,7 @@
 /*!
-* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-const pxCheck = (value) => {
-  return isNaN(Number(value)) ? String(value) : `${value}px`;
-};
-export { pxCheck as p };
+const p = (p2) => isNaN(Number(p2)) ? String(p2) : `${p2}px`;
+export { p };

package/dist/packages/_es/raf.js

@@ -1,19 +1,12 @@
 /*!
-* @nutui/nutui v3.1.22-beta.0 Tue May 31 2022 21:47:10 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-const _window = window;
-function requestAniFrame() {
-  if (typeof _window !== "undefined") {
-    return _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || function(callback) {
-      _window.setTimeout(callback, 1e3 / 60);
-    };
-  } else {
-    return function(callback) {
-      setTimeout(callback, 1e3 / 60);
-    };
-  }
-}
-var requestAniFrame$1 = requestAniFrame();
-export { requestAniFrame$1 as r };
+const e = window;
+var t = e !== void 0 ? e.requestAnimationFrame || e.webkitRequestAnimationFrame || function(t2) {
+  e.setTimeout(t2, 1e3 / 60);
+} : function(e2) {
+  setTimeout(e2, 1e3 / 60);
+};
+export { t as r };

package/dist/packages/animate/index.scss

@@ -0,0 +1,299 @@
+.nut-animate {
+  .nut-ani-container {
+    display: inline-block;
+  }
+
+  /* Animation css */
+  [class*='nut-animate-'] {
+    animation-duration: 0.5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both;
+  }
+
+  //抖动
+  .nut-animate-shake {
+    animation-name: shake;
+  }
+
+  //心跳
+  .nut-animate-ripple {
+    animation-name: ripple;
+  }
+
+  // 漂浮
+
+  .nut-animate-float {
+    position: relative;
+    animation-name: float-pop;
+  }
+
+  //呼吸灯
+  .nut-animate-breath {
+    animation-name: breath;
+    animation-duration: 2700ms;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate;
+  }
+
+  //右侧向左侧划入
+  .nut-animate-slide-right {
+    animation-name: slide-right;
+  }
+
+  //右侧向左侧划入
+  .nut-animate-slide-left {
+    animation-name: slide-left;
+  }
+
+  //上面向下面划入
+  .nut-animate-slide-top {
+    animation-name: slide-top;
+  }
+
+  //下面向上面划入
+  .nut-animate-slide-bottom {
+    animation-name: slide-bottom;
+  }
+
+  .nut-animate-jump {
+    transform-origin: center center;
+    animation: jump 0.7s linear;
+  }
+
+  //循环
+  .loop {
+    animation-iteration-count: infinite;
+  }
+
+  //抖动动画
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+
+    10% {
+      transform: translateX(-9px);
+    }
+
+    20% {
+      transform: translateX(8px);
+    }
+
+    30% {
+      transform: translateX(-7px);
+    }
+
+    40% {
+      transform: translateX(6px);
+    }
+
+    50% {
+      transform: translateX(-5px);
+    }
+
+    60% {
+      transform: translateX(4px);
+    }
+
+    70% {
+      transform: translateX(-3px);
+    }
+
+    80% {
+      transform: translateX(2px);
+    }
+
+    90% {
+      transform: translateX(-1px);
+    }
+  }
+
+  //心跳
+  @keyframes ripple {
+    0% {
+      //box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.4);
+      transform: scale(1);
+    }
+    50% {
+      //box-shadow: 0 1em 1em rgba(0, 0, 0, 0.4);
+      transform: scale(1.1);
+    }
+  }
+
+  //呼吸
+  @keyframes breath {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  //右侧向左侧划入
+  @keyframes slide-right {
+    0% {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  //左侧向右侧划入
+  @keyframes slide-left {
+    0% {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  //上面向下面划入
+  @keyframes slide-top {
+    0% {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  //下面向上面划入
+  @keyframes slide-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  // 漂浮 float
+  @keyframes float-pop {
+    0% {
+      top: 0px;
+    }
+
+    25% {
+      top: 1px;
+    }
+
+    50% {
+      top: 4px;
+    }
+
+    75% {
+      top: 1px;
+    }
+
+    100% {
+      top: 0px;
+    }
+  }
+
+  //跳跃
+  @keyframes jump {
+    0% {
+      animation-timing-function: ease-in;
+      transform: rotate(0deg) translateY(0);
+    }
+    25% {
+      animation-timing-function: ease-out;
+      transform: rotate(10deg) translateY(20 * 1px);
+    }
+    50% {
+      animation-timing-function: ease-in;
+      transform: rotate(0deg) translateY(-10 * 1px);
+    }
+    75% {
+      animation-timing-function: ease-out;
+      transform: rotate(-10deg) translateY(20 * 1px);
+    }
+    100% {
+      animation-timing-function: ease-in;
+      transform: rotate(0deg) translateY(0);
+    }
+  }
+
+  .nut-animate-twinkle {
+    position: relative;
+    &::after,
+    &::before {
+      width: 60 * 1px;
+      height: 60 * 1px;
+      content: '';
+      box-sizing: border-box;
+      border: 4 * 1px solid rgba(255, 255, 255, 0.6);
+      position: absolute;
+      border-radius: calc(60 / 2) * 1px;
+      right: 50%;
+      margin-top: calc(-30 / 2) * 1px;
+      margin-right: calc(-60 / 2) * 1px;
+      z-index: 1;
+      transform: scale(0);
+      animation: twinkle 2s ease-out infinite;
+    }
+
+    &::after {
+      animation-delay: 0.4s;
+    }
+  }
+
+  // 水波
+  @keyframes twinkle {
+    0% {
+      transform: scale(0);
+    }
+    20% {
+      opacity: 1;
+    }
+    50%,
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
+  }
+
+  .nut-animate-flicker {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+      width: 100 * 1px;
+      height: 60 * 1px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      opacity: 0.73;
+      content: '';
+      background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
+      animation: flicker 1.5s linear infinite;
+      transform: skewX(-20deg);
+      filter: blur(3 * 1px);
+    }
+  }
+
+  @keyframes flicker {
+    0% {
+      transform: translateX(-100 * 1px) skewX(-20deg);
+    }
+    40%,
+    100% {
+      transform: translateX(150 * 1px) skewX(-20deg);
+    }
+  }
+}

package/dist/packages/button/index.scss

@@ -124,6 +124,7 @@
     width: 100%;
     height: $button-large-height;
     line-height: $button-large-line-height;
+    font-size: $button-large-font-size;
   }
 
   &--normal {
@@ -139,7 +140,7 @@
   }
   &--mini {
     height: $button-mini-height;
-    line-height: 1.2;
+    line-height: $button-mini-line-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
   }

package/dist/packages/cell/index.scss

@@ -1,10 +1,16 @@
+.nut-theme-dark {
+  .nut-cell {
+    background: $dark-background;
+    color: $dark-color;
+  }
+}
 .nut-cell {
   position: relative;
   display: flex;
   width: 100%;
   line-height: $cell-line-height;
   padding: $cell-padding;
-  background: $white;
+  background: $cell-background;
   border-radius: $cell-border-radius;
   box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
   font-size: $cell-title-font;
@@ -16,6 +22,14 @@
     align-items: center;
   }
 
+  &--large {
+    font-size: $cell-large-title-font;
+    padding: $cell-large-padding;
+    .nut-cell__title-desc {
+      font-size: $cell-large-title-desc-font;
+    }
+  }
+
   &:last-child {
     &::after {
       border: 0 !important;
@@ -73,6 +87,9 @@
     text-align: right;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
+    &--alone {
+      color: $cell-color;
+    }
   }
   &__link {
     color: #979797;

package/dist/packages/checkbox/index.scss

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-checkbox {
+    &__label {
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+      }
+    }
+  }
+}
 .nut-checkbox {
   display: flex;
   align-items: center;
@@ -24,8 +34,14 @@
   }
   &__icon--unchecked {
     color: $checkbox-icon-disable-color;
+    font-size: $checkbox-icon-font-size;
+  }
+  &__icon--indeterminate {
+    color: $primary-color;
+    font-size: $checkbox-icon-font-size;
   }
   &__icon--disable {
     color: $help-color;
+    font-size: $checkbox-icon-font-size;
   }
 }

package/dist/packages/configprovider/index.scss

@@ -0,0 +1,2 @@
+.nut-configprovider {
+}

package/dist/packages/dialog/index.scss

@@ -51,6 +51,7 @@
 
     .nut-button {
       min-width: 100px;
+      overflow: hidden;
     }
 
     &-cancel {

package/dist/packages/elevator/index.scss

@@ -4,12 +4,14 @@
   position: relative;
   &__list {
     display: block;
+    position: relative;
     overflow: auto;
     &__item {
       display: block;
       font-size: $elevator-list-item-font-size;
       color: $elevator-list-item-font-color;
       &__code {
+        display: flex;
         position: relative;
         height: $elevator-list-item-code-height;
         line-height: $elevator-list-item-code-line-height;
@@ -17,6 +19,7 @@
         color: $elevator-list-item-code-font-color;
         padding: $elevator-list-item-code-padding;
         font-weight: $elevator-list-item-code-font-weight;
+        box-sizing: border-box;
         &::after {
           content: ' ';
           width: $elevator-list-item-code-after-width;
@@ -38,6 +41,21 @@
         }
       }
     }
+    &__fixed {
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: $elevator-list-item-code-padding;
+      height: $elevator-list-item-code-height;
+      line-height: $elevator-list-item-code-line-height;
+      font-size: $elevator-list-item-code-font-size;
+      color: $elevator-list-fixed-color;
+      font-weight: $elevator-list-item-code-font-weight;
+      background-color: $elevator-list-fixed-bg-color;
+      box-sizing: border-box;
+      box-shadow: $elevator-list-fixed-box-shadow;
+    }
   }
   &__code--current {
     position: $elevator-list-item-code-current-position;
@@ -67,6 +85,9 @@
         display: block;
         padding: $elevator-list-item-bars-inner-item-padding;
         font-size: $elevator-list-item-bars-inner-item-font-size;
+        &.active {
+          color: $elevator-list-item-bars-inner-item-active-color;
+        }
       }
     }
   }

package/dist/packages/ellipsis/index.scss

@@ -0,0 +1,12 @@
+.nut-ellipsis {
+  .nut-ellipsis-text {
+    cursor: hand;
+    color: $ellipsis-expand-collapse-color;
+    display: inline;
+  }
+}
+
+.nut-ellipsis-copy {
+  position: absolute;
+  top: -999999px;
+}

package/dist/packages/formitem/index.scss

@@ -1,3 +1,14 @@
+.nut-theme-dark {
+  .nut-form-item {
+    &__body {
+      &__slots {
+        .nut-input-text {
+          color: $dark-color;
+        }
+      }
+    }
+  }
+}
 .nut-form-item {
   display: flex;
   &::before {
@@ -51,6 +62,7 @@
         outline: 0 none;
         border: 0;
         text-decoration: none;
+        background: transparent;
       }
       .nut-range-container {
         min-height: 24px;

package/dist/packages/griditem/index.scss

@@ -1,3 +1,14 @@
+.nut-theme-dark {
+  .nut-grid-item {
+    &__content {
+      background: $dark-background;
+      color: $dark-color;
+    }
+    &__text {
+      color: $dark-color;
+    }
+  }
+}
 .nut-grid-item {
   position: relative;
   box-sizing: border-box;

package/dist/packages/image/index.scss

@@ -0,0 +1,39 @@
+.nut-image {
+  display: block;
+  position: relative;
+  .nut-img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.nut-image-round {
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .nut-img-loading {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #f7f8fa;
+  }
+  .nut-img-error {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #f7f8fa;
+  }
+}

package/dist/packages/imagepreview/index.scss

@@ -1,6 +1,8 @@
 .nut-imagepreview {
+  height: 100%;
+  width: 100%;
   &-swiper {
-    height: 327px;
+    height: 100%;
     width: 100vw;
     background-color: transparent;
   }
@@ -28,6 +30,13 @@
     }
   }
 
+  &-close-icon {
+    position: fixed;
+    z-index: 2002;
+    top: 50px;
+    right: 15px;
+  }
+
   .popup-bg {
     background: rgba(0, 0, 0, 0.9);
   }
@@ -45,5 +54,15 @@
   align-items: center;
 }
 .nut-imagepreview-swiper .nut-swiper-item {
-  height: 327px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  .nut-video {
+    height: auto;
+    video {
+      object-fit: contain;
+    }
+  }
 }

package/dist/packages/input/index.scss

@@ -1,3 +1,15 @@
+.nut-theme-dark {
+  .nut-input {
+    background: $dark-background;
+    &-label {
+      color: $dark-color;
+    }
+    .input-text,
+    &__text--readonly {
+      color: $dark-color;
+    }
+  }
+}
 input,
 textarea {
   font: inherit;
@@ -29,7 +41,7 @@ textarea {
 
   .input-text,
   &__text--readonly {
-    width: 100%;
+    width: 90%;
     padding: 0;
     // padding-right: 35px;
     line-height: inherit;
@@ -37,6 +49,7 @@ textarea {
     outline: 0 none;
     border: 0;
     text-decoration: none;
+    background: transparent;
     resize: none;
   }
 
@@ -60,10 +73,16 @@ textarea {
     display: flex;
     align-items: center;
   }
+  &-box {
+    position: relative;
+    width: 100%;
+  }
   &-disabled-mask {
     position: absolute;
     width: 100%;
     height: 100%;
+    top: 0;
+    left: 0;
     z-index: 2;
   }
   &-error-message {
@@ -91,6 +110,12 @@ textarea {
   &-left-icon {
     margin-right: 4px;
   }
+  &-clear-box {
+    height: 100%;
+    .nut-input-clear {
+      vertical-align: -2px;
+    }
+  }
   &-clear {
     width: 16px;
     height: 16px;