@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/packages/dialog/dialog.scss

@@ -9,12 +9,27 @@
   padding: $dialog-padding;
   box-sizing: border-box;
 
+  &__outer {
+    position: fixed;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: $white;
+    transition: transform 0.2s, -webkit-transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border-radius: $dialog-outer-border-radius;
+    z-index: $dialog-outer-z-index;
+    animation-duration: 0.3s;
+  }
+
   &__header {
     display: block;
     text-align: center;
-    height: $dialog-header-height;
     font-size: $font-size-3;
-    color: $dialog-header-color;
+    color: $title-color;
     @include oneline-ellipsis();
   }
 
@@ -30,6 +45,7 @@
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
+    text-align: $dialog-content-text-align;
   }
 
   &__footer {
@@ -69,67 +85,22 @@
   }
 }
 
-.nut-dialog__mask {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: $dialog-mask-background-color;
-  z-index: $dialog-mask-z-index;
-}
-
-.nut-dialog__wrap {
-  position: fixed;
-  overflow: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: $dialog-mask-z-index;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-
-.nut-dialog__outer {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background-color: $white;
-  -webkit-transition: -webkit-transform 0.2s;
-  transition: -webkit-transform 0.2s;
-  transition: transform 0.2s;
-  transition: transform 0.2s, -webkit-transform 0.2s;
-  -webkit-overflow-scrolling: touch;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  border-radius: $dialog-outer-bordder-radius;
-  z-index: $dialog-outer-z-index;
-  animation-duration: 0.3s;
-}
-
-.fadeDialog-enter,
-.fadeDialog-appear {
-  opacity: 0;
-}
-
-.fadeDialog-enter-active,
-.fadeDialog-appear-active {
-  opacity: 1;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.fadeDialog-exit {
-  opacity: 1;
-}
-
-.fadeDialog-exit-active {
-  opacity: 0;
-  transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
-
-.nut-overflow-hidden {
-  overflow: hidden !important;
-}
+// .fadeDialog-enter,
+// .fadeDialog-appear {
+//   opacity: 0;
+// }
+
+// .fadeDialog-enter-active,
+// .fadeDialog-appear-active {
+//   opacity: 1;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }
+
+// .fadeDialog-exit {
+//   opacity: 1;
+// }
+
+// .fadeDialog-exit-active {
+//   opacity: 0;
+//   transition: opacity 1s cubic-bezier(0.3, 1.3, 0.3, 1);
+// }

package/dist/packages/divider/divider.scss

@@ -4,20 +4,22 @@
   font-size: $divider-text-font-size;
   color: $divider-text-color;
   margin: $divider-margin;
-  //   width: 100%;
+  border: 0 solid currentColor;
+  width: 100%;
 
   &::before,
   &::after {
     content: '';
-    border: $divider-line-height solid currentColor;
+    border-style: inherit;
+    border-color: inherit;
     border-width: $divider-line-height 0 0;
     height: $divider-line-height;
     flex: 1;
   }
 
-  &.nut-divider__center,
-  &.nut-divider__left,
-  &.nut-divider__right {
+  &__center,
+  &__left,
+  &__right {
     &::before {
       margin-right: $divider-before-margin-right;
     }
@@ -27,37 +29,32 @@
     }
   }
 
-  &.nut-divider__left {
+  &__left {
     &::before {
       max-width: 10%;
     }
   }
 
-  &.nut-divider__right {
+  &__right {
     &::after {
       max-width: 10%;
     }
   }
 
-  &.nut-divider__dashed {
-    &::before,
-    &::after {
-      border-style: dashed;
-    }
-  }
-
-  &.nut-divider__hairline {
+  &__hairline {
     &::before,
     &::after {
       transform: scaleY(0.5);
     }
   }
-  &.nut-divider__vertical {
+
+  &__vertical {
     position: relative;
     top: $divider-vertical-top;
     display: inline-block;
     height: $divider-vertical-height;
     border-left: 1px solid $divider-vertical-border-left;
     margin: $divider-vertical-margin;
+    width: auto;
   }
 }

package/dist/packages/drag/drag.scss

@@ -6,4 +6,5 @@
   height: fit-content;
   touch-action: none;
   user-select: none;
+  font-size: 0;
 }

package/dist/packages/elevator/elevator.scss

@@ -12,6 +12,7 @@
       height: 100%;
       width: 100%;
       display: block;
+      background-color: $elevator-list-inner-bg-color;
       overflow: auto;
     }
     &__item {
@@ -28,15 +29,8 @@
         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;
-          height: $elevator-list-item-code-after-height;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          background-color: $elevator-list-item-code-after-bg-color;
-        }
+        border-bottom: $elevator-list-item-code-border-bottom solid
+          $elevator-list-item-code-border-bottom-color;
       }
       &__name {
         display: flex;
@@ -97,6 +91,7 @@
         &--active {
           color: $elevator-list-item-bars-inner-item-active-color;
         }
+        cursor: pointer;
       }
     }
   }

package/dist/packages/ellipsis/ellipsis.scss

@@ -0,0 +1,21 @@
+.nut-ellipsis {
+  display: flex;
+  .nut-ellipsis-text {
+    cursor: pointer;
+    color: $ellipsis-expand-collapse-color;
+    display: inline;
+  }
+
+  .nut-ellipsis-wordbreak {
+    word-break: break-all;
+  }
+}
+
+.nut-ellipsis-copy {
+  position: absolute;
+  top: -999999px;
+}
+
+.nut-ellipsis-width {
+  width: fit-content;
+}

package/dist/packages/empty/empty.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   padding: $empty-padding;
-
+  background-color: $background-color3;
   &__image {
     width: $empty-image-size;
     height: $empty-image-size;

package/dist/packages/fixednav/fixednav.scss

@@ -1,3 +1,11 @@
+.nut-theme-dark {
+  .nut-fixednav {
+    &__list {
+      // background-color: $dark2;
+      // color: $white;
+    }
+  }
+}
 .nut-fixednav {
   position: fixed;
   z-index: $fixednav-index;
@@ -24,7 +32,7 @@
     position: absolute;
     right: 0;
 
-    z-index: $fixednav-index + 1;
+    z-index: $fixednav-index;
     width: 80px;
     padding-left: 12px;
     height: 100%;

package/dist/packages/form/form.scss

@@ -0,0 +1,31 @@
+
+.form-layout-right .nut-form-item__label {
+  text-align: right;
+  font-size: 14px;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.form-layout-left .nut-form-item__label {
+  text-align: left;
+  font-size: 14px;
+  padding-right: 24px;
+  white-space: nowrap;
+}
+
+.form-layout-top .nut-form-item {
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: nowrap;
+}
+
+.form-layout-top .nut-form-item__label {
+  padding-bottom: 4px;
+  display: block;
+  font-size: 14px;
+  padding-right: 24px;
+}
+
+.form-layout-top .nut-form-item__body {
+  margin-left: 0;
+}

package/dist/packages/formitem/formitem.scss

@@ -0,0 +1,88 @@
+.nut-form-item {
+  display: flex;
+
+  &::before {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 16px;
+    bottom: 0;
+    left: 16px;
+    transform: scaleX(0);
+  }
+
+  &.error {
+    &.line {
+      &::before {
+        border-bottom: 1px solid $form-item-error-line-color;
+        transform: scaleX(1);
+        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      }
+    }
+  }
+
+  &__label {
+    font-size: $form-item-label-font-size;
+    font-weight: normal;
+    width: $form-item-label-width;
+    margin-right: $form-item-label-margin-right;
+    flex: none !important;
+    display: inline-block !important;
+    word-wrap: break-word;
+    text-align: $form-item-label-text-align;
+
+    .required {
+      &::before {
+        content: '*';
+        color: $form-item-required-color;
+        margin-right: $form-item-required-margin-right;
+      }
+    }
+  }
+
+  &__body {
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+
+    &__slots {
+      text-align: $form-item-body-slots-text-align;
+
+      .nut-input {
+        padding: 0;
+        border: 0;
+      }
+
+      .nut-input-text {
+        font-size: $form-item-body-font-size;
+        text-align: $form-item-body-input-text-align;
+        color: $black;
+        width: 100%;
+        outline: 0 none;
+        border: 0;
+        text-decoration: none;
+        background: transparent;
+      }
+
+      .nut-range-container {
+        min-height: 24px;
+      }
+
+      .nut-textarea {
+        padding: 0 !important;
+
+        .nut-textarea__textarea {
+          font: inherit;
+          text-align: $form-item-body-input-text-align;
+        }
+      }
+    }
+
+    &__tips {
+      text-align: $form-item-tip-text-align;
+      font-size: $form-item-tip-font-size;
+      color: $form-item-error-message-color;
+    }
+  }
+}

package/dist/packages/grid/grid.scss

@@ -0,0 +1,11 @@
+
+.nut-grid {
+  display: flex;
+  flex-wrap: wrap;
+  border: 0 solid $grid-border-color;
+
+  &__border {
+    border-top-width: 1px;
+    border-left-width: 1px;
+  }
+}

package/dist/packages/griditem/griditem.scss

@@ -0,0 +1,93 @@
+.nut-grid-item {
+  position: relative;
+  box-sizing: border-box;
+  color: $grid-item-text-color;
+
+  $block: &;
+
+  &__text {
+    color: $grid-item-text-color;
+    font-size: $grid-item-text-font-size;
+    line-height: 1.5;
+    word-break: break-all;
+    margin: $grid-item-text-margin 0 0 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: $grid-item-content-padding;
+    background: $grid-item-content-bg-color;
+    border: 0 solid $grid-border-color;
+
+    &--border {
+      border-right-width: 1px;
+      border-bottom-width: 1px;
+    }
+
+    &--surround {
+      border-top-width: 1px;
+      border-left-width: 1px;
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--square {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &--reverse {
+      flex-direction: column-reverse;
+
+      #{$block}__text {
+        margin: 0 0 $grid-item-text-margin;
+      }
+    }
+
+    &--horizontal {
+      flex-direction: row;
+
+      #{$block}__text {
+        margin: 0 0 0 $grid-item-text-margin;
+      }
+    }
+
+    &--horizontal#{&}--reverse {
+      flex-direction: row-reverse;
+      #{$block}__text {
+        margin: 0 $grid-item-text-margin 0 0;
+      }
+    }
+
+    &--clickable {
+      cursor: pointer;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        background-color: $black;
+        border: inherit;
+        border-color: $black;
+        border-radius: inherit;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        content: ' ';
+      }
+
+      &:active::before {
+        opacity: 0.1;
+      }
+    }
+  }
+}

package/dist/packages/image/image.scss

@@ -0,0 +1,41 @@
+.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;
+    background-size: 100% 100%;
+  }
+  .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;
+    background-size: 100% 100%;
+  }
+}

package/dist/packages/imagepreview/imagepreview.scss

@@ -0,0 +1,87 @@
+
+.nut-imagepreview {
+  width: 100%;
+  height: 100%;
+
+  &-swiper {
+    height: 100%;
+    width: 100vw;
+    background-color: transparent;
+  }
+
+  &-index {
+    position: fixed;
+    z-index: 2002;
+    top: 50px;
+    text-align: center;
+    left: 0;
+    right: 0;
+    background: transparent;
+    color: #fff;
+
+    .arrow {
+      position: absolute;
+      left: 15px;
+      transform: rotateZ(180deg);
+    }
+  }
+
+  .popup-bg {
+    background: rgba(0, 0, 0, 0.9);
+  }
+
+  .popup-box {
+    height: 100%;
+    overflow: visible;
+    background-color: transparent;
+  }
+
+  &-pop {
+    height: 100%;
+    background: transparent !important;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &-swiper {
+    swiper {
+      width: 100%;
+      height: 100%;
+    }
+
+    swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+
+    .nut-swiper-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      .nut-image-preview-box {
+        width: 100%;
+      }
+
+      .nut-video {
+        video {
+          object-fit: contain;
+        }
+      }
+    }
+  }
+}