vft 0.0.147 → 0.0.149

package/theme-style/src/popper.scss

@@ -11,6 +11,50 @@ $name: popper;
 }
 
 @include b(popper) {
+  $arrow-selector: #{& + '__arrow'};
+  $placements: (
+    'top': 'bottom',
+    'bottom': 'top',
+    'left': 'right',
+    'right': 'left',
+  );
+
+  @each $placement, $opposite in $placements {
+    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
+      #{$opposite}: -5px;
+
+      &::before {
+        @if $placement == top {
+          border-bottom-right-radius: 2px;
+        }
+
+        @if $placement == bottom {
+          border-top-left-radius: 2px;
+        }
+
+        @if $placement == left {
+          border-top-right-radius: 2px;
+        }
+
+        @if $placement == right {
+          border-bottom-left-radius: 2px;
+        }
+      }
+    }
+  }
+
+  @each $placement,
+    $adjacency
+      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
+  {
+    &[data-popper-placement^='#{$placement}'] {
+      #{$arrow-selector}::before {
+        border-#{$placement}-color: transparent !important;
+        border-#{$adjacency}-color: transparent !important;
+      }
+    }
+  }
+
   position: absolute;
   border-radius: getCssVar('popper', 'border-radius');
   padding: 5px 11px;
@@ -21,8 +65,6 @@ $name: popper;
   word-wrap: break-word;
   visibility: visible;
 
-  $arrow-selector: #{& + '__arrow'};
-
   @include when(dark) {
     color: getCssVar('bg-color');
     background: getCssVar('text', 'primary-color');
@@ -67,44 +109,4 @@ $name: popper;
       box-sizing: border-box;
     }
   }
-
-  $placements: (
-    'top': 'bottom',
-    'bottom': 'top',
-    'left': 'right',
-    'right': 'left',
-  );
-
-  @each $placement, $opposite in $placements {
-    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
-      #{$opposite}: -5px;
-
-      &::before {
-        @if $placement == top {
-          border-bottom-right-radius: 2px;
-        }
-        @if $placement == bottom {
-          border-top-left-radius: 2px;
-        }
-        @if $placement == left {
-          border-top-right-radius: 2px;
-        }
-        @if $placement == right {
-          border-bottom-left-radius: 2px;
-        }
-      }
-    }
-  }
-
-  @each $placement,
-    $adjacency
-      in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
-  {
-    &[data-popper-placement^='#{$placement}'] {
-      #{$arrow-selector}::before {
-        border-#{$placement}-color: transparent !important;
-        border-#{$adjacency}-color: transparent !important;
-      }
-    }
-  }
 }

package/theme-style/src/radio-button.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'mixins/button' as *;
@@ -10,6 +9,19 @@
 }
 
 @include b(radio-button) {
+  @each $size in (large, small) {
+    @include m($size) {
+      & .#{$namespace}-radio-button__inner {
+        @include button-size(
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
+          map.get($button-font-size, $size),
+          0
+        );
+      }
+    }
+  }
+
   position: relative;
   display: inline-block;
   outline: none;
@@ -63,15 +75,6 @@
     }
   }
 
-  &:first-child {
-    .#{$namespace}-radio-button__inner {
-      border-left: getCssVar('border');
-      border-radius: getCssVar('border-radius-base') 0 0
-        getCssVar('border-radius-base');
-      box-shadow: none !important;
-    }
-  }
-
   @include e(original-radio) {
     opacity: 0;
     outline: none;
@@ -136,6 +139,15 @@
     }
   }
 
+  &:first-child {
+    .#{$namespace}-radio-button__inner {
+      border-left: getCssVar('border');
+      border-radius: getCssVar('border-radius-base') 0 0
+        getCssVar('border-radius-base');
+      box-shadow: none !important;
+    }
+  }
+
   &:last-child {
     .#{$namespace}-radio-button__inner {
       border-radius: 0 getCssVar('border-radius-base')
@@ -148,17 +160,4 @@
       border-radius: getCssVar('border-radius-base');
     }
   }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      & .#{$namespace}-radio-button__inner {
-        @include button-size(
-          map.get($button-padding-vertical, $size) - $button-border-width,
-          map.get($button-padding-horizontal, $size) - $button-border-width,
-          map.get($button-font-size, $size),
-          0
-        );
-      }
-    }
-  }
 }

package/theme-style/src/radio.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'mixins/button' as *;
@@ -19,6 +18,25 @@ $radio-font-size: map.merge(
 }
 
 @include b(radio) {
+  @each $size in (large, small) {
+    &.#{$namespace}-radio--#{$size} {
+      height: map.get($radio-height, $size);
+    }
+  }
+
+  @each $size in (large, small) {
+    &.#{$namespace}-radio--#{$size} {
+      @include e(label) {
+        font-size: map.get($radio-font-size, $size);
+      }
+
+      @include e(inner) {
+        width: map.get($radio-font-size, $size);
+        height: map.get($radio-font-size, $size);
+      }
+    }
+  }
+
   color: getCssVar('radio-text-color');
   font-weight: getCssVar('radio-font-weight');
   position: relative;
@@ -32,29 +50,7 @@ $radio-font-size: map.merge(
   margin-right: 32px;
   height: map.get($radio-height, 'default');
 
-  @each $size in (large, small) {
-    &.#{$namespace}-radio--#{$size} {
-      height: map.get($radio-height, $size);
-    }
-  }
-
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
-
-    border-radius: getCssVar('border-radius-base');
-    border: getCssVar('border');
-    box-sizing: border-box;
-
-    &.is-checked {
-      border-color: getCssVar('primary-color');
-    }
-
-    &.is-disabled {
-      cursor: not-allowed;
-      border-color: getCssVar('border-color-lighter');
-    }
-
     @each $size in (large, small) {
       &.#{$namespace}-radio--#{$size} {
         padding: 0
@@ -73,10 +69,21 @@ $radio-font-size: map.merge(
         }
       }
     }
-  }
 
-  &:last-child {
-    margin-right: 0;
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
+    border-radius: getCssVar('border-radius-base');
+    border: getCssVar('border');
+    box-sizing: border-box;
+
+    &.is-checked {
+      border-color: getCssVar('primary-color');
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+      border-color: getCssVar('border-color-lighter');
+    }
   }
 
   @include e(input) {
@@ -102,6 +109,7 @@ $radio-font-size: map.merge(
           cursor: not-allowed;
         }
       }
+
       &.is-checked {
         .#{$namespace}-radio__inner {
           background-color: map.get($radio-disabled, 'checked-input-fill');
@@ -139,6 +147,7 @@ $radio-font-size: map.merge(
       }
     }
   }
+
   @include e(inner) {
     border: getCssVar('radio-input-border');
     border-radius: getCssVar('radio-input-border-radius');
@@ -188,27 +197,19 @@ $radio-font-size: map.merge(
     }
   }
 
-  &:focus:not(:focus-visible):not(.is-focus):not(:active):not(.is-disabled) {
-    /*获得焦点时 样式提醒*/
-    .#{$namespace}-radio__inner {
-      box-shadow: 0 0 2px 2px getCssVar('radio-input-border-color-hover');
-    }
-  }
-
   @include e(label) {
     font-size: getCssVar('radio-font-size');
     padding-left: 8px;
   }
 
-  @each $size in (large, small) {
-    &.#{$namespace}-radio--#{$size} {
-      @include e(label) {
-        font-size: map.get($radio-font-size, $size);
-      }
-      @include e(inner) {
-        width: map.get($radio-font-size, $size);
-        height: map.get($radio-font-size, $size);
-      }
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:focus:not(:focus-visible, .is-focus, :active, .is-disabled) {
+    /* 获得焦点时 样式提醒 */
+    .#{$namespace}-radio__inner {
+      box-shadow: 0 0 2px 2px getCssVar('radio-input-border-color-hover');
     }
   }
 }

package/theme-style/src/rate.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -13,7 +12,6 @@ $rate-height: map.merge(
   ),
   $rate-height
 );
-
 $rate-size: () !default;
 $rate-size: map.merge(
   (
@@ -27,15 +25,19 @@ $rate-size: map.merge(
 }
 
 @include b(rate) {
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($rate-height, $size);
+      & .#{bem('rate', 'icon')} {
+        font-size: map.get($rate-size, $size);
+      }
+    }
+  }
+
   display: inline-flex;
   align-items: center;
   height: map.get($rate-height, 'default');
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
   @include e(item) {
     cursor: pointer;
     display: inline-block;
@@ -46,28 +48,6 @@ $rate-size: map.merge(
     line-height: normal;
   }
 
-  & .#{bem('rate', 'icon')} {
-    position: relative;
-    display: inline-block;
-    font-size: getCssVar('rate-icon-size');
-    margin-right: getCssVar('rate-icon-margin');
-    transition: getCssVar('transition-duration');
-
-    &.hover {
-      transform: scale(1.15);
-    }
-
-    .path2 {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
-    @include when(active) {
-      color: getCssVar('rate', 'fill-color');
-    }
-  }
-
   @include e(decimal) {
     position: absolute;
     top: 0;
@@ -83,19 +63,37 @@ $rate-size: map.merge(
     color: getCssVar('rate', 'text-color');
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      height: map.get($rate-height, $size);
-      & .#{bem('rate', 'icon')} {
-        font-size: map.get($rate-size, $size);
-      }
-    }
-  }
-
   @include when(disabled) {
     @include e(item) {
       cursor: auto;
       color: getCssVar('rate', 'disabled-void-color');
     }
   }
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  & .#{bem('rate', 'icon')} {
+    position: relative;
+    display: inline-block;
+    font-size: getCssVar('rate-icon-size');
+    margin-right: getCssVar('rate-icon-margin');
+    transition: getCssVar('transition-duration');
+
+    @include when(active) {
+      color: getCssVar('rate', 'fill-color');
+    }
+
+    &.hover {
+      transform: scale(1.15);
+    }
+
+    .path2 {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
 }

package/theme-style/src/result.scss

@@ -10,6 +10,14 @@ $name: result;
 }
 
 @include b($name) {
+  @each $type in $types {
+    .icon-#{$type} {
+      color: getCssVar('result-color');
+
+      @include css-var-from-global(('result', 'color'), ('color', $type));
+    }
+  }
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -53,11 +61,4 @@ $name: result;
   @include e(extra) {
     margin-top: getCssVar('result-extra-margin-top');
   }
-
-  @each $type in $types {
-    .icon-#{$type} {
-      @include css-var-from-global(('result', 'color'), ('color', $type));
-      color: getCssVar('result-color');
-    }
-  }
 }

package/theme-style/src/row.scss

@@ -10,21 +10,27 @@
   @include when(justify-center) {
     justify-content: center;
   }
+
   @include when(justify-end) {
     justify-content: flex-end;
   }
+
   @include when(justify-space-between) {
     justify-content: space-between;
   }
+
   @include when(justify-space-around) {
     justify-content: space-around;
   }
+
   @include when(justify-space-evenly) {
     justify-content: space-evenly;
   }
+
   @include when(align-middle) {
     align-items: center;
   }
+
   @include when(align-bottom) {
     align-items: flex-end;
   }

package/theme-style/src/scrollbar.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -19,6 +18,7 @@
 
     @include m(hidden-default) {
       scrollbar-width: none;
+
       &::-webkit-scrollbar {
         display: none;
       }

package/theme-style/src/search.scss

@@ -27,14 +27,14 @@ $name: search;
       border: 1px solid getCompCssVar('border-color');
       border-radius: getCompCssVar('border-radius');
 
+      @include when(focus) {
+        background-color: getCompCssVar('active-bg-color');
+      }
+
       &:hover {
         background-color: getCompCssVar('hover-bg-color');
         border: 1px solid getCompCssVar('hover-border-color');
       }
-
-      @include when(focus) {
-        background-color: getCompCssVar('active-bg-color');
-      }
     }
   }
 }

package/theme-style/src/select/common.scss

@@ -5,6 +5,7 @@
   .#{$namespace}-#{$name}__tags-text {
     display: inline-block;
     line-height: normal;
+
     @include line-clamp;
   }
 }

package/theme-style/src/select-dropdown-v2.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -9,15 +8,12 @@
   border-radius: getCssVar('border-radius-base');
   box-sizing: border-box;
 
-  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
-    padding: 0;
-  }
-
   @include e(option-item) {
     @include when(selected) {
       &:not(.is-multiple) {
         @include when(disabled) {
           color: getCssVar('text-disabled-color');
+
           &::after {
             background-color: getCssVar('text-disabled-color');
           }
@@ -41,6 +37,10 @@
       }
     }
   }
+
+  .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
+    padding: 0;
+  }
 }
 
 @include b(select-dropdown__empty) {

package/theme-style/src/select-dropdown.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 

package/theme-style/src/skeleton.scss

@@ -21,13 +21,13 @@
   0% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0 50%;
   }
 }
 
 @include b(skeleton) {
-  width: 100%;
   @each $unit in (first-line, paragraph) {
     @include e($unit) {
       height: 16px;
@@ -36,9 +36,11 @@
     }
   }
 
+  width: 100%;
+
   @include when(animated) {
     .#{$namespace}-skeleton__item {
-      @include skeleton-color();
+      @include skeleton-color;
     }
   }
 }

package/theme-style/src/slider.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -19,6 +18,15 @@ $slider-height: map.merge(
 }
 
 @include b(slider) {
+  @each $size in (large, small) {
+    @include m($size) {
+      height: map.get($slider-height, $size);
+
+      @include e(runway) {
+      }
+    }
+  }
+
   width: 100%;
   height: map.get($slider-height, 'default');
   display: flex;
@@ -103,6 +111,7 @@ $slider-height: map.merge(
     user-select: none;
     line-height: normal;
     outline: none;
+
     @include utils-vertical-center;
 
     &:hover,
@@ -175,6 +184,12 @@ $slider-height: map.merge(
     height: 100%;
     flex: 0;
 
+    @include e(marks-text) {
+      margin-top: 0;
+      left: 15px;
+      transform: translateY(50%);
+    }
+
     .#{$namespace}-slider__runway {
       width: getCssVar('slider-height');
       height: 100%;
@@ -193,19 +208,5 @@ $slider-height: map.merge(
     .#{$namespace}-slider__stop {
       transform: translateY(50%);
     }
-
-    @include e(marks-text) {
-      margin-top: 0;
-      left: 15px;
-      transform: translateY(50%);
-    }
-  }
-
-  @each $size in (large, small) {
-    @include m($size) {
-      height: map.get($slider-height, $size);
-      @include e(runway) {
-      }
-    }
   }
 }

package/theme-style/src/spinner.scss

@@ -9,6 +9,7 @@
   display: inline-block;
   vertical-align: middle;
 }
+
 @include b(spinner-inner) {
   animation: rotate 2s linear infinite;
   width: 50px;
@@ -32,10 +33,12 @@
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -35;
   }
+
   100% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -124;

package/theme-style/src/step.scss

@@ -84,15 +84,15 @@
     line-height: 1;
     color: inherit;
 
-    &[class*='#{$namespace}-icon']:not(.is-status) {
-      font-size: 25px;
-      font-weight: normal;
-    }
-
     // 组件自身表示状态的图标
     @include when(status) {
       transform: translateY(1px);
     }
+
+    &[class*='#{$namespace}-icon']:not(.is-status) {
+      font-size: 25px;
+      font-weight: normal;
+    }
   }
 
   @include e(line) {