@sdata/web-vue 1.6.0 → 1.7.0

package/es/steps/style/arrow.scss

@@ -0,0 +1,207 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/steps/style/token.scss' as *;
+
+$-steps-prefix-cls: string.unquote('#{theme.$prefix}-steps');
+
+// Arrow
+.#{$-steps-prefix-cls} {
+  &-mode-arrow &-item {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    height: $steps-size-default-arrow;
+    overflow: visible;
+    white-space: nowrap;
+
+    &:not(:last-child) {
+      margin-right: $steps-arrow-size-item-gap;
+    }
+  }
+
+  &-mode-arrow &-item-wait {
+    background-color: $steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow &-item-process {
+    background-color: $steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow &-item-finish {
+    background-color: $steps-arrow-color-item-bg_finish;
+  }
+
+  &-mode-arrow &-item-error {
+    background-color: $steps-arrow-color-item-bg_error;
+  }
+
+  &-mode-arrow &-item-content {
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  &-mode-arrow &-item:first-child &-item-content {
+    padding-left: $steps-arrow-size-default-title-padding-left;
+  }
+
+  &-mode-arrow &-item:not(:first-child) &-item-content {
+    padding-left: $steps-arrow-size-default-title-padding-left + ($steps-size-default-arrow * 0.5);
+  }
+
+  &-mode-arrow &-item-title {
+    position: relative;
+    display: inline-block;
+    font-size: $steps-size-default-font-size-title;
+    white-space: nowrap;
+
+    &::after {
+      display: none !important;
+    }
+  }
+
+  &-mode-arrow &-item-wait &-item-title {
+    color: $steps-arrow-color-item-title_wait;
+  }
+
+  &-mode-arrow &-item-process &-item-title {
+    color: $steps-arrow-color-item-title_process;
+  }
+
+  &-mode-arrow &-item-finish &-item-title {
+    color: $steps-arrow-color-item-title_finish;
+  }
+
+  &-mode-arrow &-item-error &-item-title {
+    color: $steps-arrow-color-item-title_error;
+  }
+
+  &-mode-arrow &-item-active &-item-title {
+    font-weight: $steps-arrow-font-weight-item-title_active;
+  }
+
+  &-mode-arrow &-item-description {
+    max-width: none;
+    margin-top: $steps-arrow-item-description-margin-top;
+    font-size: $steps-size-default-font-size-description;
+    white-space: nowrap;
+  }
+
+  &-mode-arrow &-item-wait &-item-description {
+    color: $steps-arrow-color-item-description_wait;
+  }
+
+  &-mode-arrow &-item-process &-item-description {
+    color: $steps-arrow-color-item-description_process;
+  }
+
+  &-mode-arrow &-item-finish &-item-description {
+    color: $steps-arrow-color-item-description_finish;
+  }
+
+  &-mode-arrow &-item-error &-item-description {
+    color: $steps-arrow-color-item-description_error;
+  }
+
+  // 前箭头
+  &-mode-arrow &-item:not(:first-child)::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: ($steps-size-default-arrow * 0.5) solid transparent;
+    border-bottom: ($steps-size-default-arrow * 0.5) solid transparent;
+    border-left: ($steps-size-default-arrow * 0.5) solid
+      var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+    content: '';
+  }
+
+  // 后箭头
+  &-mode-arrow &-item:not(:last-child)::after {
+    position: absolute;
+    top: 0;
+    right: -($steps-size-default-arrow * 0.5);
+    z-index: 2;
+    display: block;
+    clear: both;
+    width: 0;
+    height: 0;
+    border-top: ($steps-size-default-arrow * 0.5) solid transparent;
+    border-bottom: ($steps-size-default-arrow * 0.5) solid transparent;
+    content: '';
+  }
+
+  &-mode-arrow &-item:not(:last-child)#{&}-item-wait::after {
+    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow &-item:not(:last-child)#{&}-item-process::after {
+    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow &-item:not(:last-child)#{&}-item-error::after {
+    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_error;
+  }
+
+  &-mode-arrow &-item:not(:last-child)#{&}-item-finish::after {
+    border-left: ($steps-size-default-arrow * 0.5) solid $steps-arrow-color-item-bg_finish;
+  }
+
+  // Small
+  &-mode-arrow#{&}-size-small &-item {
+    height: $steps-size-small-arrow;
+
+    &-title {
+      font-size: $steps-size-small-font-size-title;
+    }
+
+    &-description {
+      display: none;
+    }
+
+    &:not(:first-child) {
+      &::before {
+        border-top: ($steps-size-small-arrow * 0.5) solid transparent;
+        border-bottom: ($steps-size-small-arrow * 0.5) solid transparent;
+        border-left: ($steps-size-small-arrow * 0.5) solid
+          var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+      }
+    }
+
+    &:not(:last-child)::after {
+      right: -($steps-size-small-arrow * 0.5);
+      border-top: ($steps-size-small-arrow * 0.5) solid transparent;
+      border-bottom: ($steps-size-small-arrow * 0.5) solid transparent;
+      border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
+    }
+  }
+
+  &-mode-arrow#{&}-size-small &-item:first-child &-item-content {
+    padding-left: $steps-arrow-size-small-title-padding-left;
+  }
+
+  &-mode-arrow#{&}-size-small &-item:not(:first-child) &-item-content {
+    padding-left: $steps-arrow-size-small-title-padding-left + ($steps-size-small-arrow * 0.5);
+  }
+
+  &-mode-arrow#{&}-size-small &-item-error {
+    &:not(:last-child)::after {
+      border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_error;
+    }
+  }
+
+  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-wait::after {
+    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-process::after {
+    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow#{&}-size-small &-item:not(:last-child)#{&}-item-finish::after {
+    border-left: ($steps-size-small-arrow * 0.5) solid $steps-arrow-color-item-bg_finish;
+  }
+}

package/es/steps/style/circle.scss

@@ -0,0 +1,268 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/steps/style/token.scss' as *;
+
+$-steps-prefix-cls: string.unquote('#{theme.$prefix}-steps');
+
+$steps-size-default-item-icon-margin-left: ($steps-label-vertical-content-width * 0.5) -
+  ($steps-size-default * 0.5);
+$steps-size-small-item-icon-margin-left: ($steps-label-vertical-content-width * 0.5) -
+  ($steps-size-small * 0.5);
+
+// Circle
+.#{$-steps-prefix-cls} {
+  &-item {
+    position: relative;
+    flex: 1;
+    margin-right: $steps-circle-size-item-icon-gap;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: left;
+
+    &:last-child {
+      flex: none;
+      margin-right: 0;
+    }
+  }
+
+  &-item-active &-item-title {
+    font-weight: $steps-circle-font-weight-item-title_active;
+  }
+
+  &-item-node {
+    display: inline-block;
+    margin-right: $steps-circle-size-item-icon-gap;
+    font-weight: global.$font-weight-500;
+    font-size: $steps-size-default-font-size-title;
+    vertical-align: top;
+  }
+
+  &-icon {
+    box-sizing: border-box;
+    width: $steps-size-default;
+    height: $steps-size-default;
+    font-size: $steps-size-default-font-size-icon;
+    line-height: $steps-size-default - 2;
+    text-align: center;
+    border-radius: $steps-circle-border-radius-item-icon;
+  }
+
+  &-item-wait &-icon {
+    color: $steps-circle-color-item-icon-text_wait;
+    background-color: $steps-circle-color-item-bg_wait;
+    border: 1px solid $steps-circle-color-item-border_wait;
+  }
+
+  &-item-process &-icon {
+    color: $steps-circle-color-item-icon-text_process;
+    background-color: $steps-circle-color-item-bg_process;
+    border: 1px solid $steps-circle-color-item-border_process;
+  }
+
+  &-item-finish &-icon {
+    color: $steps-circle-color-item-icon-text_finish;
+    background-color: $steps-circle-color-item-bg_finish;
+    border: 1px solid $steps-circle-color-item-border_finish;
+  }
+
+  &-item-error &-icon {
+    color: $steps-circle-color-item-icon-text_error;
+    background-color: $steps-circle-color-item-bg_error;
+    border: 1px solid $steps-circle-color-item-border_error;
+  }
+
+  &-item-title {
+    position: relative;
+    display: inline-block;
+    padding-right: $steps-circle-size-item-icon-gap;
+    color: $steps-circle-color-item-title_wait;
+    font-size: $steps-size-default-font-size-title;
+    line-height: $steps-size-default;
+    white-space: nowrap;
+  }
+
+  &-item-wait &-item-title {
+    color: $steps-circle-color-item-title_wait;
+  }
+
+  &-item-process &-item-title {
+    color: $steps-circle-color-item-title_process;
+  }
+
+  &-item-finish &-item-title {
+    color: $steps-circle-color-item-title_finish;
+  }
+
+  &-item-error &-item-title {
+    color: $steps-circle-color-item-title_error;
+  }
+
+  &-item-content {
+    display: inline-block;
+  }
+
+  &-item-description {
+    max-width: $steps-direction-horizontal-description-width;
+    margin-top: $steps-circle-horizontal-item-description-margin-top;
+    color: $steps-circle-color-item-description_wait;
+    font-size: $steps-size-default-font-size-description;
+    white-space: normal;
+  }
+
+  &-item-wait &-item-description {
+    color: $steps-circle-color-item-description_wait;
+  }
+
+  &-item-process &-item-description {
+    color: $steps-circle-color-item-description_process;
+  }
+
+  &-item-finish &-item-description {
+    color: $steps-circle-color-item-description_finish;
+  }
+
+  &-item-error &-item-description {
+    color: $steps-circle-color-item-description_error;
+  }
+
+  // label horizontal tail style
+  &-label-horizontal &-item:not(:last-child) &-item-title {
+    &::after {
+      position: absolute;
+      top: (($steps-size-default - $steps-circle-size-item-tail) * 0.5);
+      left: 100%;
+      display: block;
+      box-sizing: border-box;
+      width: 5000px;
+      height: $steps-circle-size-item-tail;
+      background-color: $steps-circle-color-item-tail_wait;
+      content: '';
+    }
+  }
+
+  &-label-horizontal &-item#{&}-item-process &-item-title::after {
+    background-color: $steps-circle-color-item-tail_wait;
+  }
+
+  &-label-horizontal &-item#{&}-item-finish &-item-title::after {
+    background-color: $steps-circle-color-item-tail_process;
+  }
+
+  &-label-horizontal &-item#{&}-item-next-error &-item-title::after {
+    background-color: $steps-circle-color-item-tail_error;
+  }
+
+  // label vertical & direction vertical tail style
+  &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    top: (($steps-size-default - $steps-circle-size-item-tail) * 0.5);
+    box-sizing: border-box;
+    width: 100%;
+    height: $steps-circle-size-item-tail;
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $steps-circle-color-item-tail_wait;
+      content: '';
+    }
+  }
+
+  &-vertical &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    top: 0;
+    left: (($steps-size-default - $steps-circle-size-item-tail) * 0.5);
+    box-sizing: border-box;
+    width: $steps-circle-size-item-tail;
+    height: 100%;
+    padding: ($steps-size-default + 6px) 0 6px;
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $steps-circle-color-item-tail_wait;
+      content: '';
+    }
+  }
+
+  &-size-small#{&}-vertical &-item:not(:last-child) &-item-tail {
+    left: (($steps-size-small - $steps-circle-size-item-tail) * 0.5);
+    padding: ($steps-size-small + 6px) 0 6px;
+  }
+
+  &-item:not(:last-child)#{&}-item-finish &-item-tail::after {
+    background-color: $steps-circle-color-item-tail_process;
+  }
+
+  &-item:not(:last-child)#{&}-item-next-error &-item-tail::after {
+    background-color: $steps-circle-color-item-tail_error;
+  }
+
+  // Size
+  &-size-small:not(#{&}-vertical) &-item:not(:last-child) &-item-tail {
+    top: (($steps-size-small - $steps-circle-size-item-tail) * 0.5);
+  }
+
+  &-size-small &-item {
+    &-node {
+      font-size: $steps-size-small-font-size-title;
+    }
+
+    &-title {
+      font-size: $steps-size-small-font-size-title;
+      line-height: $steps-size-small;
+    }
+
+    &-description {
+      font-size: $steps-size-small-font-size-description;
+    }
+  }
+
+  &-size-small &-icon {
+    width: $steps-size-small;
+    height: $steps-size-small;
+    font-size: $steps-size-small-font-size-icon;
+    line-height: $steps-size-small - 2;
+  }
+
+  &-size-small#{&}-label-horizontal &-item:not(:last-child) &-item-title {
+    &::after {
+      top: (($steps-size-small - $steps-circle-size-item-tail) * 0.5);
+    }
+  }
+
+  // Label vertical
+  &-label-vertical &-item {
+    overflow: visible;
+
+    &-title {
+      margin-top: $steps-circle-vertical-item-description-margin-top;
+      padding-right: 0;
+    }
+
+    &-node {
+      margin-left: $steps-size-default-item-icon-margin-left;
+    }
+
+    &-tail {
+      left: $steps-size-default-item-icon-margin-left + $steps-size-default +
+        $steps-circle-size-item-icon-gap;
+      padding-right: $steps-size-default + $steps-circle-size-item-icon-gap;
+    }
+  }
+
+  &-label-vertical#{&}-size-small &-item {
+    &-node {
+      margin-left: $steps-size-small-item-icon-margin-left;
+    }
+
+    &-tail {
+      left: $steps-size-small-item-icon-margin-left + $steps-size-small +
+        $steps-circle-size-item-icon-gap;
+      padding-right: $steps-size-small + $steps-circle-size-item-icon-gap;
+    }
+  }
+}

package/es/steps/style/dot.scss

@@ -0,0 +1,206 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/steps/style/token.scss' as *;
+
+$-steps-prefix-cls: string.unquote('#{theme.$prefix}-steps');
+
+$steps-dot-item-icon-margin-left: ($steps-label-vertical-content-width * 0.5) -
+  ($steps-dot-size-item-icon * 0.5);
+$steps-dot-vertical-item-dot-margin-top-active: $steps-dot-vertical-item-dot-margin-top -
+  ($steps-dot-size-item-icon-active - $steps-dot-size-item-icon);
+// Dot
+.#{$-steps-prefix-cls} {
+  &-mode-dot &-item {
+    position: relative;
+    flex: 1;
+    margin-right: $steps-dot-size-item-icon + $steps-dot-size-item-icon-gap * 2;
+    overflow: visible;
+    white-space: nowrap;
+    text-align: left;
+
+    &:last-child {
+      flex: none;
+      margin-right: 0;
+    }
+  }
+
+  &-mode-dot &-item-active &-item-title {
+    font-weight: $steps-dot-font-weight-item-title_active;
+  }
+
+  &-mode-dot &-item-node {
+    display: inline-block;
+    box-sizing: border-box;
+    width: $steps-dot-size-item-icon;
+    height: $steps-dot-size-item-icon;
+    vertical-align: top;
+    border-radius: $steps-dot-border-radius-item-icon;
+  }
+
+  &-mode-dot &-item-active &-item-node {
+    width: $steps-dot-size-item-icon-active;
+    height: $steps-dot-size-item-icon-active;
+  }
+
+  &-mode-dot &-item-wait &-item-node {
+    background-color: $steps-dot-color-item-bg_wait;
+    border-color: $steps-dot-color-item-border_wait;
+  }
+
+  &-mode-dot &-item-process &-item-node {
+    background-color: $steps-dot-color-item-bg_process;
+    border-color: $steps-dot-color-item-border_process;
+  }
+
+  &-mode-dot &-item-finish &-item-node {
+    background-color: $steps-dot-color-item-bg_finish;
+    border-color: $steps-dot-color-item-border_finish;
+  }
+
+  &-mode-dot &-item-error &-item-node {
+    background-color: $steps-dot-color-item-bg_error;
+    border-color: $steps-dot-color-item-border_error;
+  }
+
+  &-mode-dot#{&}-horizontal &-item-node {
+    margin-left: $steps-dot-item-icon-margin-left;
+  }
+
+  &-mode-dot#{&}-horizontal &-item-active &-item-node {
+    margin-top: -(($steps-dot-size-item-icon-active - $steps-dot-size-item-icon) * 0.5);
+    margin-left: $steps-dot-item-icon-margin-left -
+      (($steps-dot-size-item-icon-active - $steps-dot-size-item-icon) * 0.5);
+  }
+
+  &-mode-dot &-item-content {
+    display: inline-block;
+  }
+
+  &-mode-dot &-item-title {
+    position: relative;
+    display: inline-block;
+    margin-top: $steps-dot-horizontal-item-title-margin-top;
+    font-size: $steps-size-default-font-size-title;
+  }
+
+  &-mode-dot &-item-wait &-item-title {
+    color: $steps-dot-color-item-title_wait;
+  }
+
+  &-mode-dot &-item-process &-item-title {
+    color: $steps-dot-color-item-title_process;
+  }
+
+  &-mode-dot &-item-finish &-item-title {
+    color: $steps-dot-color-item-title_finish;
+  }
+
+  &-mode-dot &-item-error &-item-title {
+    color: $steps-dot-color-item-title_error;
+  }
+
+  &-mode-dot &-item-description {
+    margin-top: $steps-dot-horizontal-item-description-margin-top;
+    font-size: $steps-size-default-font-size-description;
+    white-space: normal;
+  }
+
+  &-mode-dot &-item-wait &-item-description {
+    color: $steps-dot-color-item-description_wait;
+  }
+
+  &-mode-dot &-item-process &-item-description {
+    color: $steps-dot-color-item-description_process;
+  }
+
+  &-mode-dot &-item-finish &-item-description {
+    color: $steps-dot-color-item-description_finish;
+  }
+
+  &-mode-dot &-item-error &-item-description {
+    color: $steps-dot-color-item-description_error;
+  }
+
+  &-mode-dot &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    top: (($steps-dot-size-item-icon - $steps-dot-size-item-tail) * 0.5);
+    left: $steps-dot-item-icon-margin-left + $steps-dot-size-item-icon +
+      $steps-dot-size-item-icon-gap;
+    box-sizing: border-box;
+    width: 100%;
+    height: $steps-dot-size-item-tail;
+    background-color: $steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot &-item:not(:last-child)#{&}-item-process &-item-tail {
+    background-color: $steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot &-item:not(:last-child)#{&}-item-finish &-item-tail {
+    background-color: $steps-dot-color-item-tail_process;
+  }
+
+  &-mode-dot &-item:not(:last-child)#{&}-item-next-error &-item-tail {
+    background-color: $steps-dot-color-item-tail_error;
+  }
+
+  // Dot vertical
+  &-mode-dot#{&}-vertical &-item-node {
+    margin-right: $steps-dot-vertical-item-icon-margin-right;
+  }
+
+  &-mode-dot#{&}-vertical &-item-content {
+    overflow: hidden;
+  }
+
+  &-mode-dot#{&}-vertical &-item-title {
+    margin-top: $steps-dot-vertical-item-dot-margin-top + ($steps-dot-size-item-icon * 0.5) -
+      ($steps-size-default * 0.5);
+  }
+
+  &-mode-dot#{&}-vertical &-item-description {
+    margin-top: $steps-dot-vertical-item-description-margin-top;
+  }
+
+  &-mode-dot#{&}-vertical &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    bottom: 0;
+    left: ($steps-dot-size-item-icon * 0.5);
+    box-sizing: border-box;
+    width: 1px;
+    height: 100%;
+    padding-top: ($steps-dot-size-item-icon + 4px + $steps-dot-size-item-icon-gap);
+    padding-bottom: 2px;
+    background-color: transparent;
+    transform: translateX(-50%);
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $steps-dot-color-item-tail_wait;
+      content: '';
+    }
+  }
+
+  &-mode-dot#{&}-vertical &-item:not(:last-child)#{&}-item-process &-item-tail::after {
+    background-color: $steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot#{&}-vertical &-item:not(:last-child)#{&}-item-finish &-item-tail::after {
+    background-color: $steps-dot-color-item-tail_process;
+  }
+
+  &-mode-dot#{&}-vertical &-item:not(:last-child)#{&}-item-next-error &-item-tail::after {
+    background-color: $steps-dot-color-item-tail_error;
+  }
+
+  &-mode-dot#{&}-vertical &-item &-item-node {
+    margin-top: $steps-dot-vertical-item-dot-margin-top;
+  }
+
+  &-mode-dot#{&}-vertical &-item-active &-item-node {
+    margin-top: $steps-dot-vertical-item-dot-margin-top-active;
+    margin-left: -(($steps-dot-size-item-icon-active - $steps-dot-size-item-icon) * 0.5);
+  }
+}