@sdata/web-vue 1.6.0 → 1.7.0

package/es/skeleton/style/index.scss

@@ -0,0 +1,68 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/skeleton/style/token.scss' as *;
+
+$skeleton-prefix-cls: string.unquote('#{theme.$prefix}-skeleton');
+
+.#{$skeleton-prefix-cls} {
+  &-shape {
+    width: $skeleton-size-image_default;
+    height: $skeleton-size-image_default;
+    background-color: $skeleton-color-bg-base;
+    border-radius: $skeleton-radius-image-border;
+
+    &-circle {
+      border-radius: 50%;
+    }
+
+    &-small {
+      width: $skeleton-size-image_small;
+      height: $skeleton-size-image_small;
+    }
+
+    &-large {
+      width: $skeleton-size-image_large;
+      height: $skeleton-size-image_large;
+    }
+  }
+
+  &-line {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &-row {
+      height: $skeleton-size-row-height;
+      background-color: $skeleton-color-bg-base;
+    }
+
+    &-row:not(:last-child) {
+      margin-bottom: $skeleton-spacing-last_row-margin-bottom;
+    }
+  }
+
+  &-animation {
+    .#{$skeleton-prefix-cls}-shape,
+    .#{$skeleton-prefix-cls}-line-row {
+      background: linear-gradient(
+        90deg,
+        $skeleton-color-bg-base 25%,
+        $skeleton-color-animate-bg 37%,
+        $skeleton-color-bg-base 63%
+      );
+      background-size: 400% 100%;
+      animation: #{theme.$prefix}-skeleton-circle 1.5s theme.$transition-timing-function-linear
+        infinite;
+    }
+  }
+}
+
+@keyframes #{theme.$prefix}-skeleton-circle {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

package/es/skeleton/style/token.scss

@@ -0,0 +1,27 @@
+@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 *;
+
+$skeleton-color-bg-base: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$skeleton-radius-image-border: global.$radius-small;
+
+$skeleton-size-image_default: global.$size-12;
+
+$skeleton-size-image_small: global.$size-9;
+
+$skeleton-size-image_large: global.$size-15;
+
+$skeleton-spacing-image_left-margin-right: global.$spacing-7;
+
+$skeleton-spacing-image_right-margin-left: global.$spacing-7;
+
+$skeleton-size-row-height: global.$size-4;
+
+$skeleton-spacing-last_row-margin-bottom: global.$spacing-7;
+
+$skeleton-color-animate-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));

package/es/slider/style/index.css

@@ -53,7 +53,7 @@
   background-color: var(--color-fill-3);
   border-radius: 2px;
   transform: translateY(-50%);
-  content: '';
+  content: "";
 }
 .sd-slider-track.sd-slider-track-vertical {
   width: 12px;
@@ -131,12 +131,11 @@
   border: 2px solid rgb(var(--primary-6));
   border-radius: 50%;
   transition: all 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-  content: '';
+  content: "";
 }
-.sd-slider-btn.sd-slider-btn-active::after,
-.sd-slider-btn:hover::after {
+.sd-slider-btn.sd-slider-btn-active::after, .sd-slider-btn:hover::after {
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  transform: scale(1.16666667);
+  transform: scale("");
 }
 .sd-slider-track-vertical .sd-slider-btn {
   top: unset;
@@ -233,4 +232,4 @@
   /* prettier-ignore */
   margin: 0 6px;
   background: rgb(var(--gray-6));
-}
+}

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

@@ -1,5 +1,5 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../input-number/style';
 import '../../tooltip/style';
-import './index.less';
+import './index.scss';

package/es/slider/style/index.js

@@ -1,3 +1,3 @@
 import "../../input-number/style/index.js";
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/slider/style/index.scss

@@ -0,0 +1,282 @@
+@use 'sass:math';
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/slider/style/token.scss' as *;
+
+$slider-prefix: string.unquote('#{theme.$prefix}-slider');
+
+.#{$slider-prefix} {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+
+  &-vertical {
+    display: inline-block;
+    width: auto;
+    min-width: $slider-size-button-width + 10;
+    height: auto;
+
+    .#{$slider-prefix}-wrapper {
+      flex-direction: column;
+    }
+  }
+
+  &-with-marks {
+    margin-bottom: $slider-spacing-margin-bottom_with-mark;
+    padding: $slider-spacing-padding_width-mark_vertical $slider-spacing-padding_width-mark;
+  }
+
+  &-vertical#{&}-with-marks {
+    margin-bottom: 0;
+    padding: 0;
+  }
+
+  &-track {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    height: $slider-size-button-width;
+    cursor: pointer;
+
+    &::before {
+      // 局中
+      position: absolute;
+      top: 50%;
+      display: block;
+      width: 100%;
+      height: $slider-size-road-width;
+      background-color: $slider-color-road-bg;
+      border-radius: $slider-size-road-width;
+      transform: translateY(-50%);
+      content: '';
+    }
+
+    &#{&}-vertical {
+      width: $slider-size-button-width;
+      max-width: $slider-size-button-width;
+      height: 100%;
+      min-height: $slider-size-height_vertical;
+      margin-top: ($slider-size-button-width * 0.5);
+      margin-right: 0;
+      margin-bottom: ($slider-size-button-width * 0.5);
+      transform: translateY(0);
+
+      &::before {
+        // 局中
+        top: unset;
+        left: 50%;
+        width: $slider-size-road-width;
+        height: 100%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &#{&}-disabled {
+      &::before {
+        background-color: $slider-color-road-bg_disabled;
+      }
+
+      .#{$slider-prefix}-bar {
+        background-color: $slider-color-bar-bg_disabled;
+      }
+
+      .#{$slider-prefix}-btn {
+        cursor: not-allowed;
+
+        &::after {
+          border-color: $slider-color-button-border_disabled;
+        }
+      }
+
+      .#{$slider-prefix}-dots {
+        .#{$slider-prefix}-dot {
+          border-color: $slider-color-road-bg_disabled;
+
+          &-active {
+            border-color: $slider-color-bar-bg_disabled;
+          }
+        }
+      }
+
+      .#{$slider-prefix}-ticks {
+        .#{$slider-prefix}-tick {
+          background: $slider-color-road-bg_disabled;
+
+          &-active {
+            background: $slider-color-bar-bg_disabled;
+          }
+        }
+      }
+    }
+  }
+
+  &-bar {
+    // 局中
+    position: absolute;
+    top: 50%;
+    height: $slider-size-road-width;
+    background-color: $slider-color-bar-bg;
+    border-radius: $slider-size-road-width;
+    transform: translateY(-50%);
+
+    .#{$slider-prefix}-track-vertical & {
+      // 局中
+      top: unset;
+      left: 50%;
+      width: $slider-size-road-width;
+      height: unset;
+      transform: translateX(-50%);
+    }
+  }
+
+  &-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $slider-size-button-width;
+    height: $slider-size-button-width;
+    transform: translateX(-50%);
+
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      box-sizing: border-box;
+      width: $slider-size-button-width;
+      height: $slider-size-button-width;
+      background: $slider-color-button-bg;
+      border: $slider-border-size-button solid $slider-color-button-border;
+      border-radius: 50%;
+      transition: all theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+      content: '';
+    }
+
+    &#{&}-active,
+    &:hover {
+      &::after {
+        box-shadow: $slider-shadow-button_active;
+        transform: scale(
+          (math.unit(math.div($slider-size-button-width_active, $slider-size-button-width)))
+        );
+      }
+    }
+
+    .#{$slider-prefix}-track-vertical & {
+      top: unset;
+      bottom: 0;
+      left: 0;
+      transform: translateY(50%);
+    }
+  }
+
+  &-marks {
+    position: absolute;
+    top: $slider-size-button-width;
+    width: 100%;
+
+    .#{$slider-prefix}-mark {
+      position: absolute;
+      color: $slider-color-mark-font;
+      font-size: $slider-font-size-mark;
+      line-height: 1;
+      transform: translateX(-50%);
+      cursor: pointer;
+    }
+
+    .#{$slider-prefix}-track-vertical & {
+      top: 0;
+      left: $slider-size-button-width + $slider-spacing-mark-left;
+      height: 100%;
+
+      .#{$slider-prefix}-mark {
+        transform: translateY(50%);
+      }
+    }
+  }
+
+  &-dots {
+    height: 100%;
+
+    .#{$slider-prefix}-dot-wrapper {
+      position: absolute;
+      top: 50%;
+      font-size: $slider-font-size-dot;
+      transform: translate(-50%, -50%);
+
+      .#{$slider-prefix}-track-vertical & {
+        top: unset;
+        left: 50%;
+        transform: translate(-50%, 50%);
+      }
+
+      .#{$slider-prefix}-dot {
+        box-sizing: border-box;
+        width: $slider-size-dot-width;
+        height: $slider-size-dot-width;
+        background-color: $slider-color-dot-bg;
+        border: $slider-border-size-dot solid $slider-color-road-bg;
+        border-radius: 50%;
+
+        &-active {
+          border-color: $slider-color-bar-bg;
+        }
+      }
+    }
+  }
+
+  &-ticks {
+    .#{$slider-prefix}-tick {
+      position: absolute;
+      top: 50%;
+      width: $slider-size-tick-width;
+      height: $slider-size-tick-height;
+      margin-top: -($slider-size-road-width * 0.5);
+      background: $slider-color-road-bg;
+      transform: translate(-50%, -100%);
+
+      &-active {
+        background: $slider-color-bar-bg;
+      }
+
+      .#{$slider-prefix}-vertical & {
+        top: unset;
+        left: 50%;
+        width: $slider-size-tick-height;
+        height: $slider-size-tick-width;
+        margin-top: unset;
+        transform: translate(($slider-size-road-width * 0.5), 50%);
+      }
+    }
+  }
+
+  &-input {
+    display: flex;
+    align-items: center;
+    margin-left: $slider-spacing-input-margin-left;
+
+    .#{$slider-prefix}-vertical & {
+      margin-left: 0;
+    }
+
+    > .#{theme.$prefix}-input-number {
+      width: $slider-size-input-width;
+      height: $slider-size-input-height;
+      overflow: visible;
+      line-height: normal;
+
+      input {
+        text-align: center;
+      }
+    }
+
+    &-hyphens {
+      width: $slider-size-input_range_content-width;
+      height: $slider-size-input_range_content-height;
+
+      /* prettier-ignore */
+      margin: 0 (($slider-size-input_range-width - $slider-size-input_range_content-width) * 0.5);
+      background: $slider-color-input_range_content-bg;
+    }
+  }
+}

package/es/slider/style/token.scss

@@ -0,0 +1,60 @@
+@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 *;
+
+// road
+$slider-size-road-width: 2px;
+$slider-color-road-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$slider-color-road-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+// bar
+$slider-color-bar-bg: global.$color-primary-6;
+$slider-color-bar-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+// button
+$slider-color-button-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$slider-border-size-button: global.$border-2;
+$slider-color-button-border: global.$color-primary-6;
+$slider-color-button-border_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+$slider-shadow-button_active: global.$shadow1-down;
+$slider-size-button-width: global.$size-3;
+$slider-size-button-width_active: 14px;
+
+// dot
+$slider-color-dot-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$slider-border-size-dot: global.$border-2;
+$slider-font-size-dot: global.$font-size-body-1;
+$slider-size-dot-width: global.$size-2;
+
+// mark
+$slider-spacing-margin-bottom_with-mark: global.$spacing-9;
+$slider-spacing-padding_width-mark: global.$spacing-8;
+$slider-spacing-padding_width-mark_vertical: global.$spacing-8;
+$slider-font-size-mark: global.$font-size-body-3;
+$slider-color-mark-font: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+// tick
+$slider-size-tick-width: 1px;
+$slider-size-tick-height: 3px;
+
+// input
+$slider-spacing-input-margin-left: global.$spacing-8;
+$slider-size-input-width: global.$size-15;
+$slider-size-input-height: global.$size-8;
+$slider-size-input_range-width: global.$size-5;
+$slider-size-input_range-height: global.$size-8;
+$slider-size-input_range_content-width: global.$size-2;
+$slider-size-input_range_content-height: 2px;
+$slider-color-input_range_content-bg: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-gray-6'))
+);
+
+// vertical
+$slider-size-height_vertical: 200px;
+$slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离

package/es/space/style/index.css

@@ -48,4 +48,4 @@
 }
 .sd-space-rtl {
   direction: rtl;
-}
+}

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

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

package/es/space/style/index.js

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

package/es/space/style/{index.less → index.scss}

@@ -1,16 +1,17 @@
-@import url('../../style/theme/index.less');
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
 
-@space-prefix-cls: ~'@{prefix}-space';
+$space-prefix-cls: string.unquote('#{$prefix}-space');
 
-.@{space-prefix-cls} {
+.#{$space-prefix-cls} {
   display: inline-flex;
 
-  .@{space-prefix-cls}-item:empty {
+  .#{$space-prefix-cls}-item:empty {
     display: none;
   }
 
   &-horizontal {
-    .@{space-prefix-cls}-item {
+    .#{$space-prefix-cls}-item {
       display: flex;
       align-items: center;
     }

package/es/spin/style/dot-loading.scss

@@ -0,0 +1,64 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:math';
+@use 'sass:string';
+@use '@components/spin/style/token.scss' as *;
+
+$dot-prefix-cls: string.unquote('#{theme.$prefix}-dot-loading');
+
+.#{$dot-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  width: $spin-dot-size-width * 7;
+  height: $spin-dot-size-width;
+  transform-style: preserve-3d;
+  perspective: 200px;
+
+  &-item {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: $spin-dot-size-width;
+    height: $spin-dot-size-width;
+    background-color: $spin-dot-color-icon_default;
+    border-radius: global.$radius-circle;
+    transform: translateX(-50%) scale(0);
+    animation: $dot-prefix-cls 2s theme.$transition-timing-function-linear infinite forwards;
+
+    &:nth-child(2) {
+      background-color: $spin-dot-color-icon_second;
+      animation-delay: 400ms;
+    }
+
+    &:nth-child(3) {
+      background-color: $spin-dot-color-icon_third;
+      animation-delay: 800ms;
+    }
+
+    &:nth-child(4) {
+      background-color: $spin-dot-color-icon_forth;
+      animation-delay: 1200ms;
+    }
+
+    &:nth-child(5) {
+      background-color: $spin-dot-color-icon_last;
+      animation-delay: 1600ms;
+    }
+  }
+}
+
+@keyframes #{$dot-prefix-cls} {
+  @for $value from 1 through 36 {
+    $percent: math.percentage(math.div($value - 1, 36));
+
+    $radius: 280%;
+    $angle: math.div(math.$pi, 180) * $value * 10;
+    $xOffset: math.sin($angle) * $radius * -1;
+    $zOffset: math.cos($angle) * -1px;
+    $scaleOffset: (1 - math.cos($angle)) * 0.75 + 0.5;
+
+    #{$percent} {
+      transform: string.unquote('translate3D(#{$xOffset}, 0, #{$zOffset}) scale(#{$scaleOffset})');
+    }
+  }
+}