@sdata/web-vue 1.6.0 → 1.7.0

package/es/upload/style/index.scss

@@ -0,0 +1,503 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/upload/style/token.scss' as *;
+
+$upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
+
+.#{$upload-prefix-cls} {
+  display: inline-block;
+  max-width: 100%;
+  cursor: pointer;
+
+  .#{$upload-prefix-cls}.#{$upload-prefix-cls}-draggable {
+    width: 100%;
+  }
+
+  &-tip {
+    margin-top: $upload-tip-margin-top;
+    overflow: hidden;
+    color: $upload-tip-color-text;
+    font-size: $upload-tip-font-size;
+    line-height: 1.5;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-picture-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: $upload-picture-item-width;
+    height: $upload-picture-item-width;
+    margin-bottom: 0;
+    color: $upload-picture-color-text;
+    text-align: center;
+    background: $upload-picture-color-bg;
+    border: $upload-picture-border-width $upload-picture-border-style $upload-picture-color-border;
+    border-radius: $upload-picture-border-radius;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+    &:hover {
+      color: $upload-picture-color-text_hover;
+      background-color: $upload-picture-color-bg_hover;
+      border-color: $upload-picture-color-border_hover;
+    }
+  }
+
+  &-drag {
+    width: 100%;
+    padding: $upload-drag-padding-vertical 0;
+    color: $upload-drag-color-text;
+    text-align: center;
+    background-color: $upload-drag-color-bg;
+    border: $upload-drag-border-width $upload-drag-border-style $upload-drag-color-border;
+    border-radius: $upload-drag-border-radius;
+    transition: all theme.$transition-duration-2 ease;
+
+    .#{theme.$prefix}-icon-plus {
+      margin-bottom: $upload-drag-margin-icon-bottom;
+      color: $upload-drag-color-icon;
+      font-size: $upload-drag-size-icon;
+    }
+
+    &:hover {
+      background-color: $upload-drag-color-bg_hover;
+      border-color: $upload-drag-color-border_hover;
+
+      .#{$upload-prefix-cls}-drag-text {
+        color: $upload-drag-color-text_hover;
+      }
+
+      .#{theme.$prefix}-icon-plus {
+        color: $upload-drag-color-icon_hover;
+      }
+    }
+
+    &-active {
+      color: $upload-drag-color-text_active;
+      background-color: $upload-drag-color-bg_active;
+      border-color: $upload-drag-color-border_active;
+
+      .#{$upload-prefix-cls}-drag-text {
+        color: $upload-drag-color-text_active;
+      }
+
+      .#{theme.$prefix}-icon-plus {
+        color: $upload-drag-color-icon_active;
+      }
+    }
+
+    .#{$upload-prefix-cls}-tip {
+      margin-top: $upload-drag-tip-margin-top;
+    }
+  }
+
+  &-drag-text {
+    color: $upload-drag-color-text;
+    font-size: $upload-drag-font-size;
+    line-height: 1.5;
+  }
+
+  &-wrapper {
+    width: 100%;
+
+    .#{$upload-prefix-cls}-wrapper.#{$upload-prefix-cls}-wrapper-type-picture-card {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+
+  &-drag {
+    width: 100%;
+  }
+
+  &-hide {
+    display: none;
+  }
+
+  &-disabled {
+    .#{$upload-prefix-cls}-picture-card,
+    .#{$upload-prefix-cls}-picture-card:hover {
+      color: $upload-picture-color-text_disabled;
+      background-color: $upload-picture-color-bg_disabled;
+      border-color: $upload-picture-color-border_disabled;
+      cursor: not-allowed;
+    }
+
+    .#{$upload-prefix-cls}-drag,
+    .#{$upload-prefix-cls}-drag:hover {
+      background-color: $upload-drag-color-bg_disabled;
+      border-color: $upload-drag-color-border_disabled;
+      cursor: not-allowed;
+
+      .#{theme.$prefix}-icon-plus,
+      .#{$upload-prefix-cls}-drag-text {
+        color: $upload-drag-color-text_disabled;
+      }
+    }
+
+    .#{$upload-prefix-cls}-tip {
+      color: $upload-drag-color-text_disabled;
+    }
+  }
+}
+
+.#{$upload-prefix-cls}-icon {
+  cursor: pointer;
+
+  &-error {
+    margin-left: $upload-text-item-margin-error-icon-left;
+    color: $upload-text-item-color-error-icon;
+  }
+
+  &-success {
+    color: $upload-text-item-color-success-icon;
+    font-size: $upload-text-item-size-success-icon;
+    line-height: $upload-text-item-size-success-icon;
+  }
+
+  &-remove {
+    position: relative;
+    font-size: $upload-picture-item-size-operation-icon;
+  }
+
+  &-start,
+  &-cancel {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: $upload-text-item-color-status-icon;
+    font-size: $upload-text-item-size-status-icon;
+    transform: translateX(-50%) translateY(-50%);
+  }
+
+  &-upload {
+    color: $upload-text-item-color-reupload-icon;
+    font-size: $upload-text-item-size-reupload-icon;
+    cursor: pointer;
+    transition: all theme.$transition-duration-2 ease;
+
+    &:active,
+    &:hover {
+      color: $upload-text-item-color-reupload-icon_hover;
+    }
+  }
+}
+
+.#{$upload-prefix-cls}-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  .#{$upload-prefix-cls}-list.#{$upload-prefix-cls}-list-type-text,
+  .#{$upload-prefix-cls}-list.#{$upload-prefix-cls}-list-type-picture {
+    width: 100%;
+
+    .#{$upload-prefix-cls}-list-item:first-of-type {
+      margin-top: $upload-list-margin-top;
+    }
+  }
+
+  /*** listtype is text ****/
+  &-item-done &-item-file-icon {
+    color: $upload-text-item-color-file-icon_success;
+  }
+
+  &-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-top: $upload-text-item-margin-top;
+
+    &-content {
+      display: flex;
+      flex: 1;
+      flex-wrap: nowrap;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      padding: $upload-text-item-padding-vertical 0;
+      padding-right: $upload-text-item-padding-right;
+      padding-left: $upload-text-item-padding-left;
+      overflow: hidden;
+      font-size: $upload-text-item-font-size;
+      background-color: $upload-text-item-color-bg;
+      border-radius: $upload-text-item-border-radius;
+      transition: background-color theme.$transition-duration-1
+        theme.$transition-timing-function-linear;
+    }
+
+    &-file-icon {
+      margin-right: $upload-text-item-margin-file-icon-right;
+      color: $upload-text-item-color-file-icon;
+      font-size: $upload-text-item-size-file-icon;
+      line-height: $upload-text-item-size-file-icon;
+    }
+
+    &-thumbnail {
+      flex-shrink: 0;
+      width: $upload-text-item-thumbnail-width;
+      height: $upload-text-item-thumbnail-width;
+      margin-right: $upload-text-item-margin-thumbnail-right;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &-name {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      margin-right: $upload-text-item-margin-status-left;
+      overflow: hidden;
+      color: $upload-text-item-color-text;
+      font-size: $upload-text-item-font-size;
+      line-height: 1.4286;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      &-link {
+        overflow: hidden;
+        color: $upload-text-item-color-link;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+
+      &-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+    }
+
+    & .#{$upload-prefix-cls}-progress {
+      position: relative;
+      margin-left: auto;
+      line-height: $upload-text-item-size-status-icon;
+
+      &:hover {
+        .#{theme.$prefix}-progress-circle-bg {
+          stroke: $upload-text-item-color-progress-bg_hover;
+        }
+
+        .#{theme.$prefix}-progress-circle-bar {
+          stroke: $upload-text-item-color-progress-bg_hover_active;
+        }
+      }
+    }
+
+    &-operation {
+      margin-left: $upload-text-item-margin-remove-icon-left;
+      color: $upload-text-item-color-remove-icon;
+      font-size: $upload-text-item-size-operation-icon;
+
+      .#{$upload-prefix-cls}-icon-remove {
+        font-size: inherit;
+      }
+    }
+  }
+
+  &-item-error,
+  &-item-done {
+    .#{$upload-prefix-cls}-list-status {
+      display: none;
+    }
+  }
+
+  &-type-text {
+    .#{$upload-prefix-cls}-list-item-error .#{$upload-prefix-cls}-list-item-name-link,
+    .#{$upload-prefix-cls}-list-item-error .#{$upload-prefix-cls}-list-item-name {
+      color: $upload-text-item-color-text_error;
+    }
+
+    @if $upload-text-item-color-text_success != unset {
+      .#{$upload-prefix-cls}-list-item-done .#{$upload-prefix-cls}-list-item-name {
+        color: $upload-text-item-color-text_success;
+      }
+    }
+
+    @if $upload-text-item-color-text_uploading != unset {
+      .#{$upload-prefix-cls}-list-item-uploading .#{$upload-prefix-cls}-list-item-name {
+        color: $upload-text-item-color-text_uploading;
+      }
+    }
+  }
+
+  /*** end ****/
+  .#{$upload-prefix-cls}-list.#{$upload-prefix-cls}-list-type-picture-card {
+    display: flex;
+    flex-wrap: wrap;
+    vertical-align: top;
+
+    .#{$upload-prefix-cls}-list-status {
+      top: 50%;
+      margin-left: 0;
+      transform: translateY(-50%);
+    }
+  }
+
+  &-picture {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: $upload-picture-item-margin-right;
+    margin-bottom: $upload-picture-item-margin-bottom;
+    padding-right: 0;
+    overflow: hidden;
+    vertical-align: top;
+    transition: all theme.$transition-duration-2 theme.$transition-timing-function-standard;
+  }
+
+  &-picture-status-error &-picture-mask {
+    opacity: 1;
+  }
+
+  &-picture {
+    position: relative;
+    box-sizing: border-box;
+    width: $upload-picture-item-size-width;
+    height: $upload-picture-item-size-width;
+    overflow: hidden;
+    line-height: $upload-picture-item-size-width;
+    text-align: center;
+    vertical-align: top;
+    border-radius: $upload-picture-item-border-radius;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-mask {
+      position: absolute;
+      inset: 0;
+      color: $upload-picture-item-color-operation-icon;
+      font-size: $upload-picture-item-size-mask-icon;
+      line-height: $upload-picture-item-size-width;
+      text-align: center;
+      background: $upload-picture-item-color-operation_bg;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    &-operation {
+      display: none;
+      font-size: $upload-picture-item-size-operation-icon;
+
+      .#{$upload-prefix-cls}-icon-retry {
+        color: $upload-picture-item-color-operation-icon;
+      }
+    }
+
+    &-error-tip {
+      .#{$upload-prefix-cls}-icon-error {
+        color: $upload-picture-item-color-error-icon;
+        font-size: $upload-picture-item-size-error-icon;
+      }
+    }
+
+    &-mask:hover {
+      opacity: 1;
+    }
+
+    &-mask:hover &-operation {
+      display: flex;
+      justify-content: space-evenly;
+    }
+
+    &-mask:hover &-error-tip {
+      display: none;
+    }
+  }
+
+  // picture-list
+  &-type-picture {
+    .#{$upload-prefix-cls}-list-item-content {
+      padding-top: $upload-picture-text-item-padding-vertical;
+      padding-bottom: $upload-picture-text-item-padding-vertical;
+    }
+
+    .#{$upload-prefix-cls}-list-item-error .#{$upload-prefix-cls}-list-item-content {
+      background-color: $upload-picture-text-item-color-bg_error;
+    }
+
+    .#{$upload-prefix-cls}-list-item-error .#{$upload-prefix-cls}-list-item-name-link,
+    .#{$upload-prefix-cls}-list-item-error .#{$upload-prefix-cls}-list-item-name {
+      color: $upload-picture-text-item-color-text_error;
+    }
+
+    @if $upload-picture-text-item-color-text_success != unset {
+      .#{$upload-prefix-cls}-list-item-done .#{$upload-prefix-cls}-list-item-name {
+        color: $upload-picture-text-item-color-text_success;
+      }
+    }
+
+    @if $upload-picture-text-item-color-text_uploading != unset {
+      .#{$upload-prefix-cls}-list-item-uploading .#{$upload-prefix-cls}-list-item-name {
+        color: $upload-picture-text-item-color-text_uploading;
+      }
+    }
+  }
+}
+
+.#{$upload-prefix-cls}-hide + .#{$upload-prefix-cls}-list {
+  .#{$upload-prefix-cls}-list-item:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.#{$upload-prefix-cls}-slide-up-enter {
+  opacity: 0;
+}
+
+.#{$upload-prefix-cls}-slide-up-enter-active {
+  opacity: 1;
+  transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-standard;
+}
+
+.#{$upload-prefix-cls}-slide-up-exit {
+  opacity: 1;
+}
+
+.#{$upload-prefix-cls}-slide-up-exit-active {
+  margin: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    opacity theme.$transition-duration-1 theme.$transition-timing-function-linear,
+    height theme.$transition-duration-3 theme.$transition-timing-function-standard
+      theme.$transition-duration-1,
+    margin theme.$transition-duration-3 theme.$transition-timing-function-standard
+      theme.$transition-duration-1;
+}
+
+.#{$upload-prefix-cls}-list-item {
+  &.#{$upload-prefix-cls}-slide-inline-enter {
+    opacity: 0;
+  }
+
+  &.#{$upload-prefix-cls}-slide-inline-enter-active {
+    opacity: 1;
+    transition: opacity theme.$transition-duration-2 theme.$transition-timing-function-linear;
+  }
+
+  &.#{$upload-prefix-cls}-slide-inline-exit {
+    opacity: 1;
+  }
+
+  &.#{$upload-prefix-cls}-slide-inline-exit-active {
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition:
+      opacity theme.$transition-duration-1 theme.$transition-timing-function-linear,
+      width theme.$transition-duration-3 theme.$transition-timing-function-standard
+        theme.$transition-duration-1,
+      margin theme.$transition-duration-3 theme.$transition-timing-function-standard
+        theme.$transition-duration-1;
+  }
+}

package/es/upload/style/token.scss

@@ -0,0 +1,212 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$upload-tip-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$upload-tip-margin-top: global.$spacing-2;
+
+$upload-tip-font-size: global.$font-size-body-1;
+
+$upload-list-margin-top: global.$spacing-9;
+
+$upload-picture-item-width: global.$size-20;
+
+$upload-picture-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$upload-picture-border-radius: global.$radius-small;
+
+$upload-picture-border-width: global.$border-1;
+
+$upload-picture-border-style: global.$border-dashed;
+
+$upload-picture-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$upload-picture-color-border_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-4')
+);
+
+$upload-picture-color-border_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-4')
+);
+
+$upload-picture-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$upload-picture-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$upload-picture-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$upload-picture-color-text_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$upload-picture-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$upload-drag-font-size: global.$font-size-body-3;
+
+$upload-drag-border-radius: global.$radius-small;
+
+$upload-drag-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$upload-drag-tip-margin-top: 0;
+
+$upload-drag-border-style: global.$border-dashed;
+
+$upload-drag-border-width: global.$border-1;
+
+$upload-drag-padding-vertical: 50px;
+
+$upload-drag-margin-icon-bottom: 24px;
+
+$upload-drag-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$upload-drag-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$upload-drag-color-bg_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+
+$upload-drag-color-bg_disabled: $upload-drag-color-bg;
+
+$upload-drag-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$upload-drag-color-border_active: global.$color-primary-6;
+
+$upload-drag-color-border_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-4')
+);
+
+$upload-drag-color-border_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$upload-drag-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$upload-drag-color-icon_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$upload-drag-color-icon_active: global.$color-primary-6;
+
+$upload-drag-color-text_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$upload-drag-color-text_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$upload-drag-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$upload-text-item-size-operation-icon: global.$size-3;
+
+$upload-text-item-margin-top: global.$spacing-6;
+
+$upload-text-item-font-size: global.$font-size-body-3;
+
+$upload-text-item-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$upload-text-item-padding-left: global.$spacing-6;
+
+$upload-text-item-padding-right: global.$spacing-5;
+
+$upload-text-item-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$upload-text-item-padding-vertical: global.$spacing-4;
+
+$upload-text-item-margin-remove-icon-left: global.$spacing-6;
+
+$upload-text-item-color-remove-icon: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+
+$upload-text-item-color-status-icon: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+
+$upload-text-item-color-file-icon_success: global.$color-primary-6;
+
+$upload-text-item-color-progress-bg_hover: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-gray-10')),
+  0.2
+);
+
+$upload-text-item-color-progress-bg_hover_active: global.$color-primary-7;
+
+$upload-text-item-size-file-icon: global.$size-4;
+
+$upload-text-item-margin-file-icon-right: global.$spacing-6;
+
+$upload-text-item-color-file-icon: global.$color-primary-6;
+
+$upload-text-item-color-link: global.$color-link-6;
+
+$upload-text-item-color-reupload-icon: global.$color-primary-6;
+
+$upload-text-item-color-reupload-icon_hover: global.$color-primary-7;
+
+$upload-text-item-size-status-icon: global.$size-3;
+
+$upload-text-item-color-error-icon: global.$color-danger-6;
+
+$upload-text-item-color-success-icon: global.$color-success-6;
+
+$upload-text-item-color-text_success: unset;
+
+$upload-text-item-color-text_uploading: unset;
+
+$upload-text-item-border-radius: global.$radius-small;
+
+$upload-text-item-margin-error-icon-left: global.$spacing-2;
+
+$upload-text-item-margin-status-left: global.$spacing-5;
+
+$upload-text-item-thumbnail-width: global.$size-10;
+
+$upload-text-item-margin-thumbnail-right: global.$spacing-6;
+
+$upload-text-item-color-text_error: global.$color-danger-6;
+
+$upload-picture-item-margin-preview-icon-right: global.$spacing-8;
+
+$upload-picture-item-size-width: global.$size-20;
+
+$upload-picture-item-border-radius: global.$radius-small;
+
+$upload-picture-item-margin-right: global.$spacing-4;
+
+$upload-picture-item-margin-bottom: global.$spacing-4;
+
+$upload-picture-item-color-operation_bg: rgb(0 0 0 / 50%);
+
+$upload-picture-item-color-operation-icon: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+
+$upload-picture-item-color-error-icon: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+
+$upload-picture-text-item-color-bg_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1')
+);
+
+$upload-picture-text-item-color-text_error: global.$color-danger-6;
+
+$upload-picture-text-item-padding-vertical: global.$spacing-4;
+
+$upload-picture-text-item-color-text_success: unset;
+
+$upload-picture-text-item-color-text_uploading: unset;
+
+$upload-drag-size-icon: 14px;
+
+$upload-picture-item-size-mask-icon: global.$size-4;
+
+$upload-picture-item-size-error-icon: 26px;
+
+$upload-text-item-size-reupload-icon: 14px;
+
+$upload-text-item-size-success-icon: 14px;
+
+$upload-text-item-size-error-icon: 14px;
+
+$upload-picture-item-size-operation-icon: 14px;

package/es/verification-code/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -40,4 +41,4 @@
 }
 .sd-verification-code .sd-input-size-large {
   width: 36px;
-}
+}