vft 0.0.249 → 0.0.252

package/theme-style/src/date-picker/picker.scss

@@ -16,12 +16,31 @@
 }
 
 @include b(date-editor) {
+  @include set-component-css-var('date-editor', $date-editor);
+  @include set-component-css-var('input', $input);
+
   position: relative;
-  display: inline-block;
   text-align: left;
+  vertical-align: middle;
 
-  @include set-component-css-var('date-editor', $date-editor);
-  @include set-component-css-var('input', $input);
+  &.#{$namespace}-input__wrapper {
+    @include inset-input-border(
+      var(
+        #{getCssVarName('input-border-color')},
+        map.get($input, 'border-color')
+      )
+    );
+
+    &:hover {
+      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
+    }
+  }
+
+  &.#{$namespace}-input,
+  &.#{$namespace}-input__wrapper {
+    width: getCssVar('date-editor-width');
+    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
+  }
 
   @include m((monthrange)) {
     @include css-var-from-global(
@@ -51,25 +70,6 @@
     }
   }
 
-  &.#{$namespace}-input__wrapper {
-    @include inset-input-border(
-      var(
-        #{getCssVarName('input-border-color')},
-        map.get($input, 'border-color')
-      )
-    );
-
-    &:hover {
-      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
-    }
-  }
-
-  &.#{$namespace}-input,
-  &.#{$namespace}-input__wrapper {
-    width: getCssVar('date-editor-width');
-    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
-  }
-
   .close-icon {
     cursor: pointer;
   }
@@ -83,9 +83,10 @@
   }
 
   .#{$namespace}-range__icon {
-    font-size: 14px;
-    color: getCssVar('text-placeholder-color');
+    height: inherit;
     float: left;
+    color: getCssVar('text-placeholder-color');
+    font-size: 14px;
 
     svg {
       vertical-align: middle;
@@ -93,19 +94,19 @@
   }
 
   .#{$namespace}-range-input {
-    appearance: none;
-    border: none;
-    outline: none;
     display: inline-block;
+    width: 39%;
     height: #{map.get($input-height, 'default') - 2};
-    line-height: #{map.get($input-height, 'default') - 2};
     margin: 0;
     padding: 0;
-    width: 39%;
-    text-align: center;
-    font-size: getCssVar('font-size', 'base');
-    color: getCssVar('text-regular-color');
+    border: none;
+    outline: none;
     background-color: transparent;
+    color: getCssVar('text-regular-color');
+    font-size: getCssVar('font-size', 'base');
+    line-height: #{map.get($input-height, 'default') - 2};
+    text-align: center;
+    appearance: none;
 
     &::placeholder {
       color: getCssVar('text-placeholder-color');
@@ -113,22 +114,23 @@
   }
 
   .#{$namespace}-range-separator {
-    flex: 1;
     display: inline-flex;
-    justify-content: center;
+    flex: 1;
     align-items: center;
+    justify-content: center;
     height: 100%;
-    padding: 0 5px;
     margin: 0;
-    font-size: 14px;
-    word-break: keep-all;
+    padding: 0 5px;
     color: getCssVar('text-primary-color');
+    font-size: 14px;
+    overflow-wrap: break-word;
   }
 
   .#{$namespace}-range__close-icon {
-    font-size: 14px;
-    color: getCssVar('text-placeholder-color');
     width: unset;
+    height: inherit;
+    color: getCssVar('text-placeholder-color');
+    font-size: 14px;
     cursor: pointer;
 
     &:hover {
@@ -140,13 +142,28 @@
     }
 
     &--hidden {
-      opacity: 0;
       visibility: hidden;
+      opacity: 0;
     }
   }
 }
 
 @include b(range-editor) {
+  &.#{$namespace}-input__wrapper {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 10px;
+    vertical-align: middle;
+  }
+
+  @include when(active) {
+    @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+
+    &:hover {
+      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+    }
+  }
+
   @each $size in (large, small) {
     @include m($size) {
       line-height: getCssVar('component-size', $size);
@@ -156,29 +173,21 @@
       }
 
       .#{$namespace}-range-separator {
-        line-height: map.get($input-line-height, $size);
         font-size: map.get($input-font-size, $size);
+        line-height: map.get($input-line-height, $size);
       }
 
       .#{$namespace}-range-input {
         height: #{map.get($input-height, $size) - 2};
-        line-height: #{map.get($input-height, $size) - 2};
         font-size: map.get($input-font-size, $size);
+        line-height: #{map.get($input-height, $size) - 2};
       }
     }
   }
 
-  @include when(active) {
-    @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-
-    &:hover {
-      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-    }
-  }
-
   @include when(disabled) {
-    background-color: map.get($input-disabled, 'fill');
     border-color: map.get($input-disabled, 'border');
+    background-color: map.get($input-disabled, 'fill');
     color: map.get($input-disabled, 'text-color');
     cursor: not-allowed;
 
@@ -201,9 +210,4 @@
       color: map.get($input-disabled, 'text-color');
     }
   }
-  &.#{$namespace}-input__wrapper {
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-  }
 }

package/theme-style/src/date-picker/time-picker.scss

@@ -2,44 +2,44 @@
 @use '../common/var' as *;
 
 @include b(time-panel) {
-  border-radius: 2px;
   position: relative;
-  width: 180px;
+  z-index: getCssVar('index-top');
   left: 0;
-  z-index: getCssVar('z-index-top');
-  user-select: none;
   box-sizing: content-box;
+  width: 180px;
+  border-radius: 2px;
+  user-select: none;
 
   @include e(content) {
-    font-size: 0;
     position: relative;
     overflow: hidden;
+    font-size: 0;
 
     &::after,
     &::before {
       content: '';
-      top: 50%;
       position: absolute;
-      margin-top: -16px;
-      height: 32px;
       z-index: -1;
-      left: 0;
+      top: 50%;
       right: 0;
+      left: 0;
       box-sizing: border-box;
+      height: 32px;
+      margin-top: -16px;
       padding-top: 6px;
       text-align: left;
     }
 
     &::after {
       left: 50%;
-      margin-left: 12%;
       margin-right: 12%;
+      margin-left: 12%;
     }
 
     &::before {
-      padding-left: 50%;
       margin-right: 12%;
       margin-left: 12%;
+      padding-left: 50%;
       border-top: 1px solid getCssVar('border-color-light');
       border-bottom: 1px solid getCssVar('border-color-light');
     }
@@ -56,35 +56,35 @@
   }
 
   @include e(footer) {
+    box-sizing: border-box;
+    height: 36px;
+    padding: 4px;
     border-top: 1px solid
       var(
         #{getCssVarName('timepicker-inner-border-color')},
         #{getCssVar('border-color-light')}
       );
-    padding: 4px;
-    height: 36px;
     line-height: 25px;
     text-align: right;
-    box-sizing: border-box;
   }
 
   @include e(btn) {
-    border: none;
-    line-height: 28px;
-    padding: 0 5px;
     margin: 0 5px;
-    cursor: pointer;
-    background-color: transparent;
+    padding: 0 5px;
+    border: none;
     outline: none;
-    font-size: 12px;
+    background-color: transparent;
     color: getCssVar('text-primary-color');
+    font-size: 12px;
+    line-height: 28px;
+    cursor: pointer;
 
     &.confirm {
-      font-weight: 800;
       color: var(
         #{getCssVarName('timepicker-active-color')},
         #{getCssVar('primary-color')}
       );
+      font-weight: 800;
     }
   }
 

package/theme-style/src/date-picker/time-range-picker.scss

@@ -7,27 +7,27 @@
 
   @include e(content) {
     position: relative;
-    text-align: center;
-    padding: 10px;
     z-index: 1;
+    padding: 10px;
+    text-align: center;
   }
 
   @include e(cell) {
+    display: inline-block;
     box-sizing: border-box;
+    width: 50%;
     margin: 0;
     padding: 4px 7px 7px;
-    width: 50%;
-    display: inline-block;
   }
 
   @include e(header) {
     margin-bottom: 5px;
-    text-align: center;
     font-size: 14px;
+    text-align: center;
   }
 
   @include e(body) {
-    border-radius: 2px;
     border: 1px solid getCssVar('datepicker-border-color');
+    border-radius: 2px;
   }
 }

package/theme-style/src/date-picker/time-spinner.scss

@@ -2,18 +2,30 @@
 @use '../common/var' as *;
 
 @include b(time-spinner) {
+  &.has-seconds {
+    .#{$namespace}-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
+
   @include e(wrapper) {
-    max-height: 192px;
-    overflow: auto;
     display: inline-block;
+    position: relative;
     width: 50%;
+    max-height: 192px;
+    overflow: auto;
     vertical-align: top;
-    position: relative;
+
+    &.#{$namespace}-scrollbar__wrap:not(
+        .#{$namespace}-scrollbar__wrap--hidden-default
+      ) {
+      padding-bottom: 15px;
+    }
 
     @include when(arrow) {
       box-sizing: border-box;
-      text-align: center;
       overflow: hidden;
+      text-align: center;
 
       .#{$namespace}-time-spinner__list {
         transform: translateY(-32px);
@@ -26,21 +38,17 @@
         cursor: default;
       }
     }
-
-    &.#{$namespace}-scrollbar__wrap:not(
-        .#{$namespace}-scrollbar__wrap--hidden-default
-      ) {
-      padding-bottom: 15px;
-    }
   }
 
   @include e(arrow) {
-    font-size: 16px;
-    color: getCssVar('text-secondary-color');
     position: absolute;
+    z-index: getCssVar('index-normal');
     left: 0;
     width: 100%;
-    z-index: getCssVar('z-index-normal');
+    height: 30px;
+    color: getCssVar('text-secondary-color');
+    font-size: 12px;
+    line-height: 30px;
     text-align: center;
     cursor: pointer;
 
@@ -69,8 +77,8 @@
   }
 
   @include e(list) {
-    padding: 0;
     margin: 0;
+    padding: 0;
     list-style: none;
     text-align: center;
 
@@ -85,9 +93,9 @@
 
   @include e(item) {
     height: 32px;
-    line-height: 32px;
-    font-size: 12px;
     color: getCssVar('text-regular-color');
+    font-size: 12px;
+    line-height: 32px;
 
     &:hover:not(.is-disabled, .is-active) {
       background: getCssVar('fill-color', 'light');
@@ -104,10 +112,4 @@
       cursor: not-allowed;
     }
   }
-
-  &.has-seconds {
-    .#{$namespace}-time-spinner__wrapper {
-      width: 33.3%;
-    }
-  }
 }

package/theme-style/src/date-picker/year-table.scss

@@ -2,59 +2,106 @@
 @use '../common/var' as *;
 
 @include b(year-table) {
-  font-size: 12px;
   margin: -1px;
   border-collapse: collapse;
+  font-size: 12px;
 
   .#{$namespace}-icon {
     color: getCssVar('datepicker', 'icon-color');
   }
 
   td {
+    position: relative;
+    width: 68px;
+    padding: 8px 0;
     text-align: center;
-    padding: 20px 3px;
     cursor: pointer;
 
+    @include b(date-table-cell) {
+      box-sizing: border-box;
+      height: 48px;
+      padding: 6px 0;
+    }
+
     &.today {
-      .cell {
+      .#{$namespace}-date-table-cell__text {
         color: getCssVar('primary-color');
         font-weight: bold;
       }
+
+      &.start-date .#{$namespace}-date-table-cell__text,
+      &.end-date .#{$namespace}-date-table-cell__text {
+        color: $color-white;
+      }
     }
 
-    &.disabled .cell {
+    &.disabled .#{$namespace}-date-table-cell__text {
       background-color: getCssVar('fill-color', 'light');
-      cursor: not-allowed;
       color: getCssVar('text-placeholder-color');
+      cursor: not-allowed;
 
       &:hover {
         color: getCssVar('text-placeholder-color');
       }
     }
 
-    .cell {
-      width: 48px;
-      height: 36px;
+    @include b(date-table-cell__text) {
       display: block;
-      line-height: 36px;
-      color: getCssVar('datepicker-text-color');
-      border-radius: 18px;
+      position: absolute;
+      left: 50%;
+      width: 60px;
+      height: 36px;
       margin: 0 auto;
+      transform: translateX(-50%);
+      border-radius: 18px;
+      color: getCssVar('datepicker-text-color');
+      line-height: 36px;
 
       &:hover {
         color: getCssVar('datepicker-hover-text-color');
       }
     }
 
-    &.current:not(.disabled) .cell {
-      color: getCssVar('datepicker-active-color');
+    &.in-range .#{$namespace}-date-table-cell {
+      background-color: getCssVar('datepicker-inrange-bg-color');
+
+      &:hover {
+        background-color: getCssVar('datepicker-inrange-hover-bg-color');
+      }
+    }
+
+    &.start-date .#{$namespace}-date-table-cell,
+    &.end-date .#{$namespace}-date-table-cell {
+      color: $color-white;
+    }
+
+    &.start-date .#{$namespace}-date-table-cell__text,
+    &.end-date .#{$namespace}-date-table-cell__text {
+      background-color: getCssVar('datepicker-active-color');
+      color: $color-white;
+    }
+
+    &.start-date .#{$namespace}-date-table-cell {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+    }
+
+    &.end-date .#{$namespace}-date-table-cell {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
+
+    &.current:not(.disabled) .#{$namespace}-date-table-cell__text {
+      background-color: getCssVar('datepicker-active-color');
+      color: $color-white;
     }
 
     &:focus-visible {
       outline: none;
 
-      .cell {
+      .#{$namespace}-date-table-cell__text {
         outline: 2px solid getCssVar('datepicker-active-color');
+        outline-offset: 1px;
       }
     }
   }

package/theme-style/src/option-group.scss

@@ -10,41 +10,20 @@
 
   @include e(wrap) {
     position: relative;
-    list-style: none;
     margin: 0;
     padding: 0;
-
-    &:not(:last-of-type) {
-      padding-bottom: 24px;
-
-      &::after {
-        content: '';
-        position: absolute;
-        display: block;
-        left: $gap;
-        right: $gap;
-        bottom: 12px;
-        height: 1px;
-        background: getCssVar('border-color-light');
-      }
-    }
-  }
-
-  @include e(split) {
-    &-dash {
-      position: absolute;
-      left: $gap;
-      right: $gap;
-      height: 1px;
-      background: getCssVar('border-color-light');
-    }
+    list-style: none;
   }
 
   @include e(title) {
-    padding-left: $gap;
-    font-size: map.get($select-group, 'font-size');
+    box-sizing: border-box;
+    padding: 0 $gap;
+    overflow: hidden;
     color: map.get($select-group, 'text-color');
+    font-size: map.get($select-group, 'font-size');
     line-height: map.get($select-group, 'height');
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   & .#{$namespace}-select-dropdown__item {

package/theme-style/src/option.scss

@@ -1,35 +1,69 @@
 @use 'sass:map';
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
+$checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
+
+@mixin checked-icon {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  border-top: none;
+  border-right: none;
+  background-color: map.get($select-option, 'selected-text-color');
+  background-repeat: no-repeat;
+  background-position: center;
+  mask: url('#{$checked-icon}') no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask: url('#{$checked-icon}') no-repeat;
+  -webkit-mask-size: 100% 100%;
+}
 
 @include b(select-dropdown) {
   @include e(item) {
-    font-size: map.get($select, 'font-size');
+    position: relative;
+    box-sizing: border-box;
+    height: map.get($select-option, 'height');
     // 20 as the padding of option item, 12 as the size of ✓ icon size
     padding: 0 #{20 + 12}px 0 20px;
-    position: relative;
-    white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
     color: map.get($select-option, 'text-color');
-    height: map.get($select-option, 'height');
+    font-size: map.get($select, 'font-size');
     line-height: map.get($select-option, 'height');
-    box-sizing: border-box;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     cursor: pointer;
 
+    @include when(hovering) {
+      background-color: map.get($select-option, 'hover-background');
+    }
+
+    @include when(selected) {
+      color: map.get($select-option, 'selected-text-color');
+      font-weight: bold;
+    }
+
     @include when(disabled) {
+      background-color: unset;
       color: map.get($select-option, 'disabled-color');
       cursor: not-allowed;
     }
+  }
 
-    &.hover,
-    &:hover {
-      background-color: map.get($select-option, 'hover-background');
+  @include when(multiple) {
+    .#{$namespace}-select-dropdown__item.is-selected {
+      &::after {
+        @include checked-icon;
+      }
     }
 
-    &.selected {
-      color: map.get($select-option, 'selected-text-color');
-      font-weight: bold;
+    .#{$namespace}-select-dropdown__item.is-disabled {
+      &::after {
+        background-color: map.get($select-option, 'disabled-color');
+      }
     }
   }
 }