@nutui/nutui-react 3.0.9-beta.1 → 3.0.9

package/dist/es/packages/uploader/style-jmapp/style.css

@@ -0,0 +1,228 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-uploader {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.nut-uploader-slot {
+  position: relative;
+}
+.nut-uploader-upload {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nutui-uploader-background, var(--nutui-color-surface-1));
+  width: var(--nutui-uploader-image-width, 64px);
+  height: var(--nutui-uploader-image-height, 64px);
+  border: var(--nutui-uploader-image-border, 0px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--nutui-uploader-image-color, var(--nutui-color-text-help));
+}
+.nut-uploader-icon i,
+.nut-uploader-icon .nut-icon {
+  color: var(--nutui-uploader-image-color, var(--nutui-color-text-help));
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-icon-tip {
+  font-size: var(--nutui-uploader-image-icon-tip-font-size, 12px);
+}
+.nut-uploader-input {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+  overflow: hidden;
+  cursor: pointer;
+  opacity: 0;
+}
+.nut-uploader-input:disabled {
+  cursor: not-allowed;
+}
+.nut-uploader-upload-disabled {
+  background: var(--nutui-uploader-background-disabled, var(--nutui-color-surface-1));
+  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled));
+}
+.nut-uploader-upload-disabled .nut-uploader-icon i,
+.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
+  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled));
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-preview {
+  position: relative;
+  margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
+  margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.nut-uploader-preview-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-surface-overlay));
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-preview-progress i {
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-preview-progress-msg {
+  color: var(--nutui-color-text-help);
+  font-size: 12px;
+}
+.nut-uploader-preview.list {
+  width: 100%;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-top: 10px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+}
+.nut-uploader-preview-list {
+  width: 100%;
+  height: 32px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background-color: var(--nutui-gray-2, #f8f8f8);
+}
+.nut-uploader-preview-list .nut-uploader-preview-img-file-name {
+  display: flex;
+  align-items: center;
+  -webkit-line-clamp: 1;
+  padding: 2px;
+  height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nut-uploader-preview-list .nut-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.nut-uploader-preview-list .nut-progress .nut-progress-outer {
+  height: 2px !important;
+}
+.nut-uploader-preview .close {
+  position: absolute;
+  right: var(--nutui-uploader-preview-close-right, 0px);
+  top: var(--nutui-uploader-preview-close-top, 0px);
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+.nut-uploader-preview-img {
+  position: relative;
+  width: var(--nutui-uploader-image-width, 64px);
+  height: var(--nutui-uploader-image-height, 64px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  overflow: hidden;
+}
+.nut-uploader-preview-img i {
+  color: var(--nutui-color-title);
+}
+.nut-uploader-preview-img .tips {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 12px;
+  color: #ffffff;
+  text-align: center;
+  box-sizing: border-box;
+  height: var(--nutui-uploader-preview-tips-height, 20px);
+  line-height: var(--nutui-uploader-preview-tips-height, 20px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding: var(--nutui-uploader-preview-tips-padding, 0 var(--nutui-spacing-xxs));
+  background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-9));
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-uploader-preview-img-c {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  position: initial;
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-preview-img-file {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+.nut-uploader-preview-img-file-name {
+  display: flex;
+  width: 90%;
+  font-size: 12px;
+  color: var(--nutui-color-text);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.nut-uploader-preview-img-file-name.error {
+  color: red !important;
+}
+.nut-uploader-preview-img-file-name.success {
+  color: #1890ff !important;
+}
+.nut-uploader-preview-img-file-name .nut-icon-Link {
+  flex-shrink: 0;
+}
+
+[dir=rtl] .nut-uploader-input,
+.nut-rtl .nut-uploader-input {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-uploader-preview,
+.nut-rtl .nut-uploader-preview {
+  margin-right: 0;
+  margin-left: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
+}
+[dir=rtl] .nut-uploader-preview-progress,
+.nut-rtl .nut-uploader-preview-progress {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-uploader-preview.list,
+.nut-rtl .nut-uploader-preview.list {
+  margin-right: 0;
+  margin-left: 0px;
+}
+[dir=rtl] .nut-uploader-preview .close,
+.nut-rtl .nut-uploader-preview .close {
+  right: auto;
+  left: var(--nutui-uploader-preview-close-right, 0px);
+  transform: translate(-50%, -50%);
+}
+[dir=rtl] .nut-uploader-preview-img .tips,
+.nut-rtl .nut-uploader-preview-img .tips {
+  left: auto;
+  right: 0;
+}

package/dist/es/packages/uploader/style-jmapp/uploader.scss

@@ -0,0 +1,250 @@
+@import '../../../../styles/mixins/text-ellipsis.scss';
+
+.nut-uploader {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  &-slot {
+    position: relative;
+  }
+
+  &-upload {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $uploader-background;
+    width: $uploader-image-width;
+    height: $uploader-image-height;
+    border: $uploader-image-border;
+    border-radius: $uploader-image-border-radius;
+  }
+
+  &-icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: $uploader-image-color;
+
+    i,
+    .nut-icon {
+      color: $uploader-image-color;
+      margin-bottom: $uploader-image-icon-margin-bottom;
+    }
+
+    &-tip {
+      font-size: $uploader-image-icon-tip-font-size;
+    }
+  }
+
+  &-input {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &-upload-disabled {
+    background: $uploader-background-disabled;
+    color: $uploader-image-disabled;
+
+    .nut-uploader-icon {
+      i,
+      .nut-icon {
+        color: $uploader-image-disabled;
+        margin-bottom: $uploader-image-icon-margin-bottom;
+      }
+    }
+  }
+
+  &-preview {
+    position: relative;
+    margin-right: $uploader-preview-margin-right;
+    margin-bottom: $uploader-preview-margin-bottom;
+    border-radius: $uploader-image-border-radius;
+    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+
+    &-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: $uploader-preview-progress-background;
+      border-radius: $uploader-image-border-radius;
+
+      i {
+        margin-bottom: $uploader-image-icon-margin-bottom;
+      }
+
+      &-msg {
+        color: $color-text-help;
+        font-size: 12px;
+      }
+    }
+
+    &.list {
+      width: 100%;
+      margin-right: 0px;
+      margin-bottom: 0px;
+      margin-top: 10px;
+      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 1%);
+    }
+
+    &-list {
+      width: 100%;
+      height: 32px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+      background-color: $color-background-sunken;
+
+      .nut-uploader-preview-img-file-name {
+        display: flex;
+        align-items: center;
+        -webkit-line-clamp: 1;
+        padding: 2px;
+        height: 24px;
+        @include text-ellipsis();
+      }
+
+      .nut-progress {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        .nut-progress-outer {
+          height: 2px !important;
+        }
+      }
+    }
+
+    .close {
+      position: absolute;
+      right: $uploader-preview-close-right;
+      top: $uploader-preview-close-top;
+      transform: translate(50%, -50%);
+      z-index: 1;
+    }
+
+    &-img {
+      position: relative;
+      width: $uploader-image-width;
+      height: $uploader-image-height;
+      border-radius: $uploader-image-border-radius;
+      overflow: hidden;
+
+      i {
+        color: $color-title;
+      }
+
+      .tips {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        font-size: 12px;
+        color: $white;
+        text-align: center;
+        box-sizing: border-box;
+        height: $uploader-preview-tips-height;
+        line-height: $uploader-preview-tips-height;
+        border-radius: $uploader-image-border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        padding: $uploader-preview-tips-padding;
+        background: $uploader-preview-tips-background;
+        @include oneline-ellipsis();
+      }
+
+      &-c {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        position: initial;
+        border-radius: $uploader-image-border-radius;
+      }
+
+      &-file {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        &-name {
+          display: flex;
+          width: 90%;
+          font-size: 12px;
+          color: $color-text;
+          @include moreline-ellipsis();
+
+          &.error {
+            color: red !important;
+          }
+
+          &.success {
+            color: #1890ff !important;
+          }
+
+          .nut-icon-Link {
+            flex-shrink: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+[dir='rtl'] .nut-uploader,
+.nut-rtl .nut-uploader {
+  &-input {
+    left: auto;
+    right: 0;
+  }
+
+  &-preview {
+    margin-right: 0;
+    margin-left: $uploader-preview-margin-right;
+    &-progress {
+      left: auto;
+      right: 0;
+    }
+
+    &.list {
+      margin-right: 0;
+      margin-left: 0px;
+    }
+
+    .close {
+      right: auto;
+      left: $uploader-preview-close-right;
+      transform: translate(-50%, -50%);
+    }
+
+    &-img {
+      .tips {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}

package/dist/es/packages/uploader/style-jrkf/css.js

@@ -0,0 +1,2 @@
+import '../../progress/style-jrkf/css';
+import './style.css';

package/dist/es/packages/uploader/style-jrkf/index.js

@@ -0,0 +1,3 @@
+import '../../progress/style-jrkf';
+import '../../../../styles/mixins/text-ellipsis.scss';
+import './uploader.scss';

package/dist/es/packages/uploader/style-jrkf/style.css

@@ -0,0 +1,228 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-uploader {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.nut-uploader-slot {
+  position: relative;
+}
+.nut-uploader-upload {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nutui-uploader-background, var(--nutui-color-surface-1));
+  width: var(--nutui-uploader-image-width, 64px);
+  height: var(--nutui-uploader-image-height, 64px);
+  border: var(--nutui-uploader-image-border, 0px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-icon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--nutui-uploader-image-color, var(--nutui-color-text-help));
+}
+.nut-uploader-icon i,
+.nut-uploader-icon .nut-icon {
+  color: var(--nutui-uploader-image-color, var(--nutui-color-text-help));
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-icon-tip {
+  font-size: var(--nutui-uploader-image-icon-tip-font-size, 12px);
+}
+.nut-uploader-input {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+  overflow: hidden;
+  cursor: pointer;
+  opacity: 0;
+}
+.nut-uploader-input:disabled {
+  cursor: not-allowed;
+}
+.nut-uploader-upload-disabled {
+  background: var(--nutui-uploader-background-disabled, var(--nutui-color-surface-1));
+  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled));
+}
+.nut-uploader-upload-disabled .nut-uploader-icon i,
+.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon {
+  color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled));
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-preview {
+  position: relative;
+  margin-right: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
+  margin-bottom: var(--nutui-uploader-preview-margin-bottom, var(--nutui-spacing-s));
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+}
+.nut-uploader-preview-progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-surface-overlay));
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-preview-progress i {
+  margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6px);
+}
+.nut-uploader-preview-progress-msg {
+  color: var(--nutui-color-text-help);
+  font-size: 12px;
+}
+.nut-uploader-preview.list {
+  width: 100%;
+  margin-right: 0px;
+  margin-bottom: 0px;
+  margin-top: 10px;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.01);
+}
+.nut-uploader-preview-list {
+  width: 100%;
+  height: 32px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background-color: var(--nutui-gray-2, #f0f0f0);
+}
+.nut-uploader-preview-list .nut-uploader-preview-img-file-name {
+  display: flex;
+  align-items: center;
+  -webkit-line-clamp: 1;
+  padding: 2px;
+  height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nut-uploader-preview-list .nut-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.nut-uploader-preview-list .nut-progress .nut-progress-outer {
+  height: 2px !important;
+}
+.nut-uploader-preview .close {
+  position: absolute;
+  right: var(--nutui-uploader-preview-close-right, 0px);
+  top: var(--nutui-uploader-preview-close-top, 0px);
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+.nut-uploader-preview-img {
+  position: relative;
+  width: var(--nutui-uploader-image-width, 64px);
+  height: var(--nutui-uploader-image-height, 64px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  overflow: hidden;
+}
+.nut-uploader-preview-img i {
+  color: var(--nutui-color-title);
+}
+.nut-uploader-preview-img .tips {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 12px;
+  color: #ffffff;
+  text-align: center;
+  box-sizing: border-box;
+  height: var(--nutui-uploader-preview-tips-height, 20px);
+  line-height: var(--nutui-uploader-preview-tips-height, 20px);
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  padding: var(--nutui-uploader-preview-tips-padding, 0 var(--nutui-spacing-xxs));
+  background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-9));
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nut-uploader-preview-img-c {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  position: initial;
+  border-radius: var(--nutui-uploader-image-border-radius, var(--nutui-radius-xs));
+}
+.nut-uploader-preview-img-file {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s;
+}
+.nut-uploader-preview-img-file-name {
+  display: flex;
+  width: 90%;
+  font-size: 12px;
+  color: var(--nutui-color-text);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+}
+.nut-uploader-preview-img-file-name.error {
+  color: red !important;
+}
+.nut-uploader-preview-img-file-name.success {
+  color: #1890ff !important;
+}
+.nut-uploader-preview-img-file-name .nut-icon-Link {
+  flex-shrink: 0;
+}
+
+[dir=rtl] .nut-uploader-input,
+.nut-rtl .nut-uploader-input {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-uploader-preview,
+.nut-rtl .nut-uploader-preview {
+  margin-right: 0;
+  margin-left: var(--nutui-uploader-preview-margin-right, var(--nutui-spacing-s));
+}
+[dir=rtl] .nut-uploader-preview-progress,
+.nut-rtl .nut-uploader-preview-progress {
+  left: auto;
+  right: 0;
+}
+[dir=rtl] .nut-uploader-preview.list,
+.nut-rtl .nut-uploader-preview.list {
+  margin-right: 0;
+  margin-left: 0px;
+}
+[dir=rtl] .nut-uploader-preview .close,
+.nut-rtl .nut-uploader-preview .close {
+  right: auto;
+  left: var(--nutui-uploader-preview-close-right, 0px);
+  transform: translate(-50%, -50%);
+}
+[dir=rtl] .nut-uploader-preview-img .tips,
+.nut-rtl .nut-uploader-preview-img .tips {
+  left: auto;
+  right: 0;
+}