vft 0.0.249 → 0.0.252

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

@@ -4,51 +4,29 @@
 @use 'common/var' as *;
 
 @include b(select-dropdown) {
-  z-index: calc(#{getCssVar('z-index-top')} + 1);
-  border-radius: getCssVar('border-radius-base');
+  z-index: calc(#{getCssVar('index-top')} + 1);
   box-sizing: border-box;
-
-  @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');
-          }
-        }
-      }
-    }
-
-    &:hover {
-      &:not(.hover) {
-        background-color: transparent;
-      }
-    }
-  }
-
-  @include when(multiple) {
-    .#{$namespace}-select-dropdown__option-item {
-      @include when(disabled) {
-        @include when(selected) {
-          color: getCssVar('text-disabled-color');
-        }
-      }
-    }
-  }
+  border-radius: getCssVar('border-radius-base');
 
   .#{$namespace}-scrollbar.is-empty .#{$namespace}-select-dropdown__list {
     padding: 0;
   }
 }
 
-@include b(select-dropdown__empty) {
-  padding: map.get($select-dropdown, 'empty-padding');
+@include b(select-dropdown__loading) {
   margin: 0;
+  padding: map.get($select-dropdown, 'empty-padding');
+  color: map.get($select-dropdown, 'empty-color');
+  font-size: getCssVar('select-font-size');
   text-align: center;
+}
+
+@include b(select-dropdown__empty) {
+  margin: 0;
+  padding: map.get($select-dropdown, 'empty-padding');
   color: map.get($select-dropdown, 'empty-color');
   font-size: getCssVar('select-font-size');
+  text-align: center;
 }
 
 @include b(select-dropdown__wrap) {
@@ -56,8 +34,24 @@
 }
 
 @include b(select-dropdown__list) {
-  list-style: none;
-  margin: map.get($select-dropdown, 'padding') !important;
-  padding: 0 !important;
   box-sizing: border-box;
+  margin: 0;
+  padding: map.get($select-dropdown, 'padding');
+  list-style: none;
+
+  &.#{$namespace}-vl__window {
+    // for select-v2
+    margin: map.get($select-dropdown, 'padding');
+    padding: 0;
+  }
+}
+
+@include b(select-dropdown__header) {
+  padding: map.get($select-dropdown, 'header-padding');
+  border-bottom: map.get($select-dropdown, 'border');
+}
+
+@include b(select-dropdown__footer) {
+  padding: map.get($select-dropdown, 'footer-padding');
+  border-top: map.get($select-dropdown, 'border');
 }

package/theme-style/src/select.scss

@@ -3,278 +3,174 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 @use './select-dropdown-v2.scss';
-@use './option-item.scss';
+@use './option.scss';
 @use './option-group.scss';
-@use './select/common.scss' as *;
 
 $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
+@mixin mixed-input-border($color) {
+  box-shadow: 0 0 0 1px $color inset;
+}
 
 @include set-root-css-vars('select', $select);
 
 @include b(select) {
-  $selector: &;
-
   display: inline-block;
   position: relative;
-  font-size: map.get($input-font-size, 'default');
+  width: getCssVar('select-width');
   vertical-align: middle;
 
-  @include select-common(select);
-
-  @each $size in (large, small) {
-    @include m($size) {
-      @include e(wrapper) {
-        #{$selector}__combobox-input {
-          height: map.get($input-height, $size) - 8px;
-        }
-      }
-
-      @include e(caret) {
-        height: map.get($input-height, $size);
-      }
-
-      @include e(suffix) {
-        height: map.get($input-height, $size);
-      }
-
-      @include e(placeholder) {
-        font-size: map.get($input-font-size, $size);
-        line-height: map.get($input-line-height, $size);
-      }
-    }
-  }
-
   @include e(wrapper) {
     display: flex;
     position: relative;
     box-sizing: border-box;
-    flex-wrap: wrap;
     align-items: center;
-    padding: 1px 30px 1px 0;
+    min-height: map.get($input-height, 'default');
+    padding: map.get($select-wrapper-padding, 'default');
+    transform: translate3d(0, 0, 0);
     transition: getCssVar('transition', 'duration');
-    border: 1px solid getCssVar('border-color');
     border-radius: getCssVar('border-radius-base');
     background-color: getCssVar('fill-color', 'blank');
+    font-size: map.get($input-font-size, 'default');
+    line-height: map.get($select-item-height, 'default');
+    text-align: left;
     cursor: pointer;
+    gap: map.get($select-item-gap, 'default');
+    @include mixed-input-border(#{getCssVar('border-color')});
 
     @include when(filterable) {
       cursor: text;
     }
 
     @include when(focused) {
-      border-color: getCssVar('primary-color');
+      @include mixed-input-border(#{getCssVar('primary-color')});
     }
 
     @include when(hovering) {
       &:not(.is-focused) {
-        border-color: getCssVar('border-color-hover');
+        @include mixed-input-border(#{getCssVar('border-color-hover')});
       }
     }
 
     @include when(disabled) {
-      border-color: getCssVar('select-disabled-border');
       background-color: getCssVar('fill-color', 'light');
-      color: getCssVar('text', 'placeholder-color');
+      color: getCssVar('text-placeholder-color');
       cursor: not-allowed;
+      @include mixed-input-border(#{getCssVar('select-disabled-border')});
 
       &:hover {
-        border-color: getCssVar('select-disabled-border');
+        @include mixed-input-border(#{getCssVar('select-disabled-border')});
       }
 
       &.is-focus {
-        border-color: getCssVar('input-focus-border-color');
+        @include mixed-input-border(#{getCssVar('input-focus-border-color')});
       }
 
-      .is-transparent {
-        opacity: 1;
-        user-select: none;
+      @include e(selected-item) {
+        color: getCssVar('select-disabled-color');
       }
 
-      #{$selector}__caret {
+      @include e(caret) {
         cursor: not-allowed;
       }
 
-      #{$selector}__combobox-input {
+      .#{$namespace}-tag {
         cursor: not-allowed;
       }
-    }
-
-    &:hover {
-      border-color: getCssVar('text', 'placeholder-color');
-    }
-
-    #{$selector}__input-wrapper {
-      position: relative;
-      box-sizing: border-box;
-      max-width: 100%;
-      margin-inline-start: $input-inline-start;
-      overflow: hidden;
-    }
 
-    &,
-    #{$selector}__input-wrapper {
-      line-height: map.get($input-height, 'default');
-    }
-
-    #{$selector}__input-wrapper input {
-      width: 100%;
-      min-width: 4px;
-      height: getCssVar('input-inner-height');
-      margin: 2px 0;
-      padding: 0;
-      border: none;
-      outline: none;
-      background: 0 0;
-      background-color: transparent;
-      line-height: getCssVar('input-inner-height');
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      appearance: none;
-
-      @include set-css-var-value(
-        'input-inner-height',
-        calc(
-          var(
-              #{getCssVarName('component-size')},
-              #{map.get($input-height, 'default')}
-            ) - 8px
-        )
-      );
+      // When the native input tag is disabled, the cursor value is the 'default'.
+      input {
+        cursor: not-allowed;
+      }
     }
   }
 
-  @include e(empty) {
-    margin: 0;
-    padding: 10px 0;
-    color: getCssVar('text', 'secondary-color');
-    font-size: 14px;
-    text-align: center;
-  }
-
-  @include e(popper) {
-    @include picker-popper(
-      map.get($select-dropdown, 'bg-color'),
-      map.get($select-dropdown, 'border'),
-      map.get($select-dropdown, 'shadow')
+  @include e(prefix) {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(
+      #{getCssVarName('input-icon-color')},
+      map.get($input, 'icon-color')
     );
-  }
-
-  @include e(input) {
-    height: 28px;
-    margin-left: 15px;
-    padding: 0;
-    border: none;
-    outline: none;
-    color: getCssVar('select-multiple-input-color');
-    font-size: getCssVar('select-font-size');
-    appearance: none;
-
-    @include when(small) {
-      height: 14px;
-    }
-  }
-
-  @include e(close) {
-    position: absolute;
-    z-index: getCssVar('z-index-top');
-    top: 8px;
-    right: 25px;
-    color: getCssVar('select-input-color');
-    font-size: getCssVar('select-input-font-size');
-    line-height: 18px;
-    cursor: pointer;
-
-    &:hover {
-      color: getCssVar('select-close-hover-color');
-    }
+    gap: map.get($select-item-gap, 'default');
   }
 
   @include e(suffix) {
-    display: inline-flex;
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    height: 32px;
-    transform: translateY(-50%);
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
     color: var(
       #{getCssVarName('input-icon-color')},
       map.get($input, 'icon-color')
     );
-
-    .#{$namespace}-input__icon {
-      height: inherit !important;
-
-      &:not(:first-child) {
-        margin-left: 8px;
-      }
-    }
+    gap: map.get($select-item-gap, 'default');
   }
 
   @include e(caret) {
-    transform: rotateZ(180deg);
+    transform: rotateZ(0deg);
     transition: getCssVar('transition', 'duration');
     color: getCssVar('select-input-color');
     font-size: getCssVar('select-input-font-size');
     cursor: pointer;
 
     @include when(reverse) {
-      transform: rotateZ(0deg);
-    }
-
-    @include when(show-close) {
       transform: rotateZ(180deg);
-      transition: getCssVar('transition', 'color');
-      border-radius: getCssVar('border-radius-circle');
-      color: getCssVar('select-input-color');
-      font-size: getCssVar('select-font-size');
-      text-align: center;
-
-      &:hover {
-        color: getCssVar('select', 'close-hover-color');
-      }
     }
+  }
 
-    &.#{$namespace}-icon {
-      height: inherit !important;
+  @include e(clear) {
+    cursor: pointer;
 
-      svg {
-        vertical-align: middle;
-      }
+    &:hover {
+      color: getCssVar('select-close-hover-color');
     }
   }
 
   @include e(selection) {
     display: flex;
-    z-index: getCssVar('z-index-normal');
+    position: relative;
+    flex: 1;
     flex-wrap: wrap;
     align-items: center;
-    width: 100%;
-    white-space: normal;
-  }
+    min-width: 0;
+    gap: map.get($select-item-gap, 'default');
 
-  @include e(input-calculator) {
-    visibility: hidden;
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    left: 0;
-    white-space: pre;
+    @include when(near) {
+      margin-left: map.get($select-near-margin-left, 'default');
+    }
+
+    .#{$namespace}-tag {
+      border-color: transparent;
+      cursor: pointer;
+
+      &.#{$namespace}-tag--plain {
+        border-color: getCssVar('tag', 'border-color');
+      }
+
+      .#{$namespace}-tag__content {
+        min-width: 0;
+      }
+    }
   }
 
   @include e(selected-item) {
-    // using this to keep the item centered in both vertically and horizontally
     display: flex;
     flex-wrap: wrap;
-    height: inherit;
-    line-height: inherit;
     user-select: none;
   }
 
+  @include e(tags-text) {
+    display: block;
+    line-height: normal;
+    @include line-clamp;
+  }
+
   @include e(placeholder) {
+    display: block;
     position: absolute;
+    z-index: -1;
     top: 50%;
-    width: calc(100% - 52px);
-    margin-inline-start: $input-inline-start;
+    width: 100%;
     transform: translateY(-50%);
     color: var(
       #{getCssVarName('input-text-color')},
@@ -284,66 +180,86 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     @include line-clamp;
 
     @include when(transparent) {
-      color: getCssVar('text', 'placeholder-color');
+      color: getCssVar('text-placeholder-color');
+      user-select: none;
     }
   }
 
-  @include icon-arrow-up;
-  @include icon-circle-close;
-
-  #{$selector}__selection > span {
-    display: inline-block;
+  @include e(popper) {
+    @include picker-popper(
+      map.get($select-dropdown, 'bg-color'),
+      map.get($select-dropdown, 'border'),
+      map.get($select-dropdown, 'shadow')
+    );
   }
 
-  &:hover {
-    #{$selector}__combobox-input {
-      border-color: getCssVar('select-border-color-hover');
-    }
-  }
+  @include e(input-wrapper) {
+    flex: 1;
 
-  .#{$namespace}-select__selection-text {
-    display: inline-block;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    vertical-align: bottom;
+    @include when(hidden) {
+      // Out of the document flow
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+    }
   }
 
-  #{$selector}__combobox-input {
-    display: block;
-    padding-right: 35px;
-    color: getCssVar('text', 'regular-color');
+  @include e(input) {
+    width: 100%;
+    height: map.get($select-item-height, 'default');
+    padding: 0;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: getCssVar('select-multiple-input-color');
+    font-family: inherit;
+    font-size: inherit;
+    appearance: none;
 
-    &:focus {
-      border-color: getCssVar('select-input-focus-border-color');
+    @include when(disabled) {
+      cursor: not-allowed;
     }
   }
 
-  .#{$namespace}-select__selection .#{$namespace}-tag {
-    box-sizing: border-box;
-    margin: 2px 0 2px 6px;
-    border-color: transparent;
-    background-color: getCssVar('fill-color');
+  @include e(input-calculator) {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: pre;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(wrapper) {
+        min-height: map.get($input-height, $size);
+        padding: map.get($select-wrapper-padding, $size);
+        font-size: map.get($input-font-size, $size);
+        line-height: map.get($select-item-height, $size);
+        gap: map.get($select-item-gap, $size);
+      }
 
-    .#{$namespace}-icon-close {
-      right: -7px;
-      background-color: getCssVar('text', 'placeholder-color');
-      color: getCssVar('color-white');
+      @include e(selection) {
+        gap: map.get($select-item-gap, $size);
 
-      &:hover {
-        background-color: getCssVar('text', 'secondary-color');
+        @include when(near) {
+          margin-left: map.get($select-near-margin-left, $size);
+        }
       }
 
-      &::before {
-        display: block;
-        transform: translate(0, 0.5px);
+      @include e(prefix) {
+        gap: map.get($select-item-gap, $size);
       }
-    }
-  }
 
-  &.#{$namespace}-select--small {
-    .#{$namespace}-select__selection .#{$namespace}-tag {
-      height: 18px;
-      margin: 1px 0 1px 6px;
+      @include e(suffix) {
+        gap: map.get($select-item-gap, $size);
+      }
+
+      @include e(input) {
+        height: map.get($select-item-height, $size);
+      }
     }
   }
 }

package/theme-style/src/tabs.scss

@@ -150,34 +150,15 @@ $name: tabs;
     height: 100%;
     padding-left: getCompCssVar('add-icon-padding-left');
     transition: all 0.15s;
-    border: 1px solid getCssVar('border-color');
-    border-radius: 3px;
-    color: getCssVar('text-primary-color');
-    font-size: 12px;
-    line-height: 20px;
-    text-align: center;
     cursor: pointer;
 
-    .is-icon-plus {
-      width: inherit;
-      height: inherit;
-      transform: scale(0.8, 0.8);
-
-      svg {
-        vertical-align: middle;
-      }
-    }
-
     &:hover {
       color: getCssVar('primary-color');
     }
   }
-  @include e(new-tab-vertical) {
-    margin-left: 0;
-  }
+
   @include e(nav-wrap) {
     position: relative;
-    flex: 1 auto;
     margin-bottom: -1px;
     overflow: hidden;
 
@@ -202,11 +183,6 @@ $name: tabs;
       height: 2px;
       background-color: getCompCssVar('nav-color');
     }
-
-    @include when(scrollable) {
-      box-sizing: border-box;
-      padding: 0 20px;
-    }
   }
 
   @include e(nav-scroll) {
@@ -260,29 +236,10 @@ $name: tabs;
       transform: translateY(calc(0px - #{getCompCssVar('header-height')}));
       background-color: #eceff3;
     }
-
-    &:hover {
-      color: getCssVar('color-primary');
-      cursor: pointer;
-    }
-
-    @include when(disabled) {
-      color: getCssVar('disabled-text-color');
-      cursor: not-allowed;
-    }
-
-    &:focus-visible {
-      border-radius: 3px;
-      box-shadow: 0 0 2px 2px getCssVar('color-primary') inset;
-    }
-
-    @include when(active) {
-      color: getCssVar('color-primary');
-    }
   }
+
   @include e(content) {
     position: relative;
-    flex-grow: 1;
     overflow: hidden;
   }
 
@@ -390,17 +347,12 @@ $name: tabs;
       justify-content: flex-start;
     }
   }
-  @include m((top, bottom)) {
-    .#{$namespace}-tabs__nav {
-      height: getCssVar('tabs', 'header-height');
-    }
-  }
-  @include m(left) {
-    flex-direction: row;
 
+  @include m(left) {
     .#{$namespace}-tabs__header.is-left {
       margin-right: 10px;
       margin-bottom: 0;
+      float: left;
     }
     .#{$namespace}-tabs__nav-wrap.is-left {
       margin-right: -1px;
@@ -478,16 +430,13 @@ $name: tabs;
         }
       }
     }
-
-    // only for SSR
-    > .#{$namespace}-tabs__content + .#{$namespace}-tabs__header {
-      order: -1;
-    }
   }
+
   @include m(right) {
     .#{$namespace}-tabs__header.is-right {
       margin-bottom: 0;
       margin-left: 10px;
+      float: right;
     }
 
     .#{$namespace}-tabs__nav-wrap.is-right {
@@ -575,15 +524,6 @@ $name: tabs;
     box-sizing: border-box;
     border-radius: 4px 4px 0 0;
   }
-
-  @include m(top) {
-    flex-direction: column;
-
-    // only for SSR
-    > .#{$namespace}-tabs__content + .#{$namespace}-tabs__header {
-      order: -1;
-    }
-  }
 }
 
 .slideInRight-transition,