@sdata/web-vue 1.5.0 → 1.7.0

package/es/steps/style/index.css

@@ -118,7 +118,7 @@
   width: 5000px;
   height: 1px;
   background-color: var(--color-neutral-3);
-  content: '';
+  content: "";
 }
 .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-process .sd-steps-item-title::after {
   background-color: var(--color-neutral-3);
@@ -141,7 +141,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--color-neutral-3);
-  content: '';
+  content: "";
 }
 .sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
   position: absolute;
@@ -157,7 +157,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--color-neutral-3);
-  content: '';
+  content: "";
 }
 .sd-steps-size-small.sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
   left: 11.5px;
@@ -212,6 +212,7 @@
   left: 94px;
   padding-right: 36px;
 }
+
 .sd-steps-mode-dot .sd-steps-item {
   position: relative;
   flex: 1;
@@ -347,7 +348,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--color-neutral-3);
-  content: '';
+  content: "";
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-process .sd-steps-item-tail::after {
   background-color: var(--color-neutral-3);
@@ -365,6 +366,7 @@
   margin-top: 6px;
   margin-left: -1px;
 }
+
 .sd-steps-mode-arrow .sd-steps-item {
   position: relative;
   display: flex;
@@ -452,7 +454,7 @@
   border-top: 36px solid transparent;
   border-bottom: 36px solid transparent;
   border-left: 36px solid var(--color-bg-2);
-  content: '';
+  content: "";
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child)::after {
   position: absolute;
@@ -465,7 +467,7 @@
   height: 0;
   border-top: 36px solid transparent;
   border-bottom: 36px solid transparent;
-  content: '';
+  content: "";
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child).sd-steps-item-wait::after {
   border-left: 36px solid var(--color-fill-1);
@@ -517,6 +519,7 @@
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:last-child).sd-steps-item-finish::after {
   border-left: 20px solid var(--color-primary-light-1);
 }
+
 .sd-steps-mode-navigation.sd-steps-label-horizontal .sd-steps-item:not(:last-child) .sd-steps-item-title::after {
   display: none;
 }
@@ -542,7 +545,7 @@
   display: block;
   height: 2px;
   background-color: rgb(var(--primary-6));
-  content: '';
+  content: "";
 }
 .sd-steps-mode-navigation .sd-steps-item-active:last-child::after {
   width: 100%;
@@ -559,8 +562,9 @@
   border-bottom: none;
   border-left: none;
   transform: rotate(45deg);
-  content: '';
+  content: "";
 }
+
 .sd-steps {
   display: flex;
 }
@@ -575,9 +579,11 @@
 .sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-description {
   color: rgb(var(--primary-6));
 }
+
 .sd-steps-line-less .sd-steps-item-title::after {
   display: none !important;
 }
+
 .sd-steps-vertical {
   flex-direction: column;
 }
@@ -590,6 +596,7 @@
 .sd-steps-vertical .sd-steps-item-description {
   max-width: none;
 }
+
 .sd-steps-label-vertical .sd-steps-item-content {
   display: block;
   width: 140px;
@@ -597,4 +604,4 @@
 }
 .sd-steps-label-vertical .sd-steps-item-description {
   max-width: none;
-}
+}

package/es/steps/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/steps/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/steps/style/index.scss

@@ -0,0 +1,77 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/steps/style/token.scss' as *;
+@use '@components/steps/style/circle.scss' as *;
+@use '@components/steps/style/dot.scss' as *;
+@use '@components/steps/style/arrow.scss' as *;
+@use '@components/steps/style/navigation.scss' as *;
+
+$steps-prefix-cls: string.unquote('#{theme.$prefix}-steps');
+
+.#{$steps-prefix-cls} {
+  display: flex;
+
+  &-changeable {
+    .#{$steps-prefix-cls}-item-title,
+    .#{$steps-prefix-cls}-item-description {
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+  }
+
+  &-changeable &-item:not(#{&}-item-active, &-item-disabled) {
+    cursor: pointer;
+
+    &:hover {
+      .#{$steps-prefix-cls}-item-content {
+        .#{$steps-prefix-cls}-item-title,
+        .#{$steps-prefix-cls}-item-description {
+          color: global.$color-primary-6;
+        }
+      }
+    }
+  }
+}
+
+// Line Less
+.#{$steps-prefix-cls} {
+  &-line-less &-item-title::after {
+    display: none !important;
+  }
+}
+
+// Direction
+.#{$steps-prefix-cls} {
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-vertical &-item {
+    &:not(:last-child) {
+      min-height: 90px;
+    }
+
+    &-title::after {
+      display: none !important;
+    }
+
+    &-description {
+      max-width: none;
+    }
+  }
+}
+
+// Label vertical
+.#{$steps-prefix-cls} {
+  &-label-vertical &-item {
+    &-content {
+      display: block;
+      width: $steps-label-vertical-content-width;
+      text-align: center;
+    }
+
+    &-description {
+      max-width: none;
+    }
+  }
+}

package/es/steps/style/navigation.scss

@@ -0,0 +1,61 @@
+@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');
+
+// Navigation
+.#{$-steps-prefix-cls} {
+  &-mode-navigation#{&}-label-horizontal &-item:not(:last-child) &-item-title::after {
+    display: none;
+  }
+
+  &-mode-navigation &-item {
+    margin-right: $steps-navigation-margin-right;
+    padding-right: $steps-navigation-spacing-arrow-right;
+    padding-left: $steps-navigation-padding-left;
+
+    &:last-child {
+      flex: 1;
+    }
+
+    &-content {
+      margin-bottom: 20px;
+    }
+
+    &-description {
+      padding-right: 20px;
+    }
+
+    &-active::after {
+      position: absolute;
+      right: $steps-navigation-spacing-ink-right;
+      bottom: 0;
+      left: $steps-navigation-spacing-ink-left;
+      display: block;
+      height: 2px;
+      background-color: global.$color-primary-6;
+      content: '';
+    }
+
+    &-active:last-child::after {
+      width: 100%;
+    }
+  }
+
+  &-mode-navigation &-item:not(:last-child) &-item-content::after {
+    position: absolute;
+    top: $steps-navigation-size-arrow-top;
+    right: 30px;
+    display: inline-block;
+    width: $steps-navigation-size-arrow;
+    height: $steps-navigation-size-arrow;
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+    border: $steps-navigation-size-arrow-line-width solid $steps-navigation-color-arrow;
+    border-bottom: none;
+    border-left: none;
+    transform: rotate(45deg);
+    content: '';
+  }
+}

package/es/steps/style/token.scss

@@ -0,0 +1,207 @@
+@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 *;
+
+// Two size: Default and small
+$steps-size-default: global.$size-7;
+$steps-size-small: global.$size-6;
+$steps-size-default-arrow: global.$size-18;
+$steps-size-small-arrow: global.$size-10;
+
+$steps-size-default-font-size-icon: global.$size-4;
+$steps-size-default-font-size-title: global.$font-size-title-1;
+$steps-size-default-font-size-description: global.$font-size-body-1;
+$steps-size-small-font-size-icon: 14px;
+$steps-size-small-font-size-title: global.$font-size-body-3;
+$steps-size-small-font-size-description: global.$font-size-body-1;
+
+$steps-label-vertical-content-width: 140px;
+$steps-direction-horizontal-description-width: 140px;
+
+// Circle
+$steps-circle-size-item-tail: global.$border-1;
+$steps-circle-size-item-icon-gap: 12px;
+
+$steps-circle-font-weight-item-title_active: global.$font-weight-500;
+
+$steps-circle-border-radius-item-icon: global.$radius-circle;
+
+$steps-circle-horizontal-item-description-margin-top: global.$spacing-1;
+$steps-circle-vertical-item-description-margin-top: global.$spacing-1;
+
+$steps-circle-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$steps-circle-color-item-border_wait: global.$color-transparent;
+$steps-circle-color-item-icon-text_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+$steps-circle-color-item-tail_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+$steps-circle-color-item-title_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+$steps-circle-color-item-description_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-circle-color-item-bg_process: global.$color-primary-6;
+$steps-circle-color-item-border_process: global.$color-transparent;
+$steps-circle-color-item-icon-text_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$steps-circle-color-item-tail_process: global.$color-primary-6;
+$steps-circle-color-item-title_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-circle-color-item-description_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-circle-color-item-bg_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$steps-circle-color-item-border_finish: global.$color-transparent;
+$steps-circle-color-item-icon-text_finish: global.$color-primary-6;
+$steps-circle-color-item-title_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-circle-color-item-description_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-circle-color-item-bg_error: global.$color-danger-6;
+$steps-circle-color-item-border_error: global.$color-transparent;
+$steps-circle-color-item-icon-text_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$steps-circle-color-item-tail_error: global.$color-danger-6;
+$steps-circle-color-item-title_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-circle-color-item-description_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+// Dot
+$steps-dot-horizontal-item-title-margin-top: global.$spacing-2;
+$steps-dot-horizontal-item-description-margin-top: global.$spacing-2;
+$steps-dot-vertical-item-title-margin-top: -2px;
+$steps-dot-vertical-item-description-margin-top: global.$spacing-2;
+
+$steps-dot-size-item-icon: global.$size-2;
+$steps-dot-size-item-icon-active: 10px;
+$steps-dot-size-item-icon-gap: global.$spacing-2;
+$steps-dot-size-item-tail: global.$border-1;
+
+$steps-dot-vertical-item-icon-margin-right: global.$spacing-7;
+
+$steps-dot-font-weight-item-title_active: global.$font-weight-500;
+
+$steps-dot-border-radius-item-icon: global.$radius-circle;
+
+$steps-dot-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+$steps-dot-color-item-border_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+$steps-dot-color-item-tail_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+$steps-dot-color-item-title_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$steps-dot-color-item-description_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-dot-color-item-bg_process: global.$color-primary-6;
+$steps-dot-color-item-border_process: global.$color-primary-6;
+$steps-dot-color-item-tail_process: global.$color-primary-6;
+$steps-dot-color-item-title_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-dot-color-item-description_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-dot-color-item-bg_finish: global.$color-primary-6;
+$steps-dot-color-item-border_finish: global.$color-primary-6;
+$steps-dot-color-item-title_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-dot-color-item-description_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-dot-color-item-bg_error: global.$color-danger-6;
+$steps-dot-color-item-border_error: global.$color-danger-6;
+$steps-dot-color-item-tail_error: global.$color-danger-6;
+$steps-dot-color-item-title_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$steps-dot-color-item-description_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+// Arrow
+$steps-arrow-size-item-gap: global.$spacing-2;
+
+$steps-arrow-size-default-title-padding-left: global.$spacing-7;
+$steps-arrow-size-small-title-padding-left: global.$spacing-8;
+
+$steps-arrow-item-description-margin-top: 0;
+
+$steps-arrow-font-weight-item-title_active: global.$font-weight-500;
+
+$steps-arrow-color-item-bg_wait: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$steps-arrow-color-item-title_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+$steps-arrow-color-item-description_wait: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-arrow-color-item-bg_process: global.$color-primary-6;
+$steps-arrow-color-item-title_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$steps-arrow-color-item-description_process: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+
+$steps-arrow-color-item-bg_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$steps-arrow-color-item-title_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$steps-arrow-color-item-description_finish: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$steps-arrow-color-item-bg_error: global.$color-danger-6;
+$steps-arrow-color-item-title_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+$steps-arrow-color-item-description_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-white')
+);
+
+// Navigation
+$steps-navigation-color-arrow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$steps-navigation-size-arrow: 6px;
+$steps-navigation-size-arrow-line-width: 2px;
+$steps-navigation-size-arrow-top: global.$spacing-5;
+
+// Circle
+
+$steps-circle-vertical-spacing-tail-top: global.$spacing-3;
+$steps-circle-vertical-spacing-tail-bottom: global.$spacing-3;
+
+// Dot
+$steps-dot-vertical-item-dot-margin-top: global.$spacing-4;
+$steps-dot-vertical-spacing-tail-top: global.$spacing-2;
+$steps-dot-vertical-spacing-tail-bottom: global.$spacing-2;
+
+$steps-navigation-padding-left: global.$spacing-8;
+$steps-navigation-margin-right: global.$spacing-10;
+$steps-navigation-spacing-arrow-right: global.$spacing-5;
+$steps-navigation-spacing-ink-left: global.$spacing-none;
+$steps-navigation-spacing-ink-right: 30px;

package/es/style/animation/{fade.less → fade.scss}

@@ -1,4 +1,4 @@
-@import url('../theme/index.less');
+@use '@style/theme/index.scss' as *;
 
 .fade-in-standard-enter-from,
 .fade-in-standard-appear-from {
@@ -12,7 +12,7 @@
 
 .fade-in-standard-enter-active,
 .fade-in-standard-appear-active {
-  transition: opacity @transition-duration-3 @transition-timing-function-standard;
+  transition: opacity $transition-duration-3 $transition-timing-function-standard;
 }
 
 .fade-in-standard-leave-from {
@@ -24,7 +24,7 @@
 }
 
 .fade-in-standard-leave-active {
-  transition: opacity @transition-duration-3 @transition-timing-function-standard;
+  transition: opacity $transition-duration-3 $transition-timing-function-standard;
 }
 
 .fade-in-enter-from,
@@ -39,7 +39,7 @@
 
 .fade-in-enter-active,
 .fade-in-appear-active {
-  transition: opacity @transition-duration-1 @transition-timing-function-linear;
+  transition: opacity $transition-duration-1 $transition-timing-function-linear;
 }
 
 .fade-in-leave-from {
@@ -51,5 +51,5 @@
 }
 
 .fade-in-leave-active {
-  transition: opacity @transition-duration-1 @transition-timing-function-linear;
+  transition: opacity $transition-duration-1 $transition-timing-function-linear;
 }

package/es/style/animation/index.scss

@@ -0,0 +1,3 @@
+@use '@style/animation/fade.scss' as *;
+@use '@style/animation/zoom.scss' as *;
+@use '@style/animation/slide.scss' as *;

package/es/style/animation/{slide.less → slide.scss}

@@ -1,4 +1,4 @@
-@import url('../theme/index.less');
+@use '@style/theme/index.scss' as *;
 
 // used by cascader select treeselect ... like picker
 .slide-dynamic-origin-enter-from,
@@ -18,8 +18,8 @@
 .slide-dynamic-origin-enter-active,
 .slide-dynamic-origin-appear-active {
   transition:
-    transform @transition-duration-2 @transition-timing-function-standard,
-    opacity @transition-duration-2 @transition-timing-function-standard;
+    transform $transition-duration-2 $transition-timing-function-standard,
+    opacity $transition-duration-2 $transition-timing-function-standard;
 }
 
 .slide-dynamic-origin-leave-from {
@@ -36,8 +36,8 @@
 
 .slide-dynamic-origin-leave-active {
   transition:
-    transform @transition-duration-2 @transition-timing-function-standard,
-    opacity @transition-duration-2 @transition-timing-function-standard;
+    transform $transition-duration-2 $transition-timing-function-standard,
+    opacity $transition-duration-2 $transition-timing-function-standard;
 }
 
 // used by drawer
@@ -53,7 +53,7 @@
 
 .slide-left-enter-active,
 .slide-left-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-left-leave-from {
@@ -65,7 +65,7 @@
 }
 
 .slide-left-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-right-enter-from,
@@ -80,7 +80,7 @@
 
 .slide-right-enter-active,
 .slide-right-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-right-leave-from {
@@ -92,7 +92,7 @@
 }
 
 .slide-right-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-top-enter-from,
@@ -107,7 +107,7 @@
 
 .slide-top-enter-active,
 .slide-top-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-top-leave-from {
@@ -119,7 +119,7 @@
 }
 
 .slide-top-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-bottom-enter-from,
@@ -134,7 +134,7 @@
 
 .slide-bottom-enter-active,
 .slide-bottom-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }
 
 .slide-bottom-leave-from {
@@ -146,5 +146,5 @@
 }
 
 .slide-bottom-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform $transition-duration-3 $transition-timing-function-standard;
 }