vft 0.0.249 → 0.0.252

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

@@ -786,6 +786,47 @@ $select-tags-prefix-padding: map.merge(
   ),
   $select-tags-prefix-padding
 );
+
+$select-wrapper-padding: () !default;
+$select-wrapper-padding: map.merge(
+  (
+    'large': 8px 16px,
+    'default': 4px 12px,
+    'small': 2px 8px,
+  ),
+  $select-wrapper-padding
+);
+
+$select-near-margin-left: () !default;
+$select-near-margin-left: map.merge(
+  (
+    'large': -8px,
+    'default': -8px,
+    'small': -6px,
+  ),
+  $select-near-margin-left
+);
+
+$select-item-gap: () !default;
+$select-item-gap: map.merge(
+  (
+    'large': 6px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $select-item-gap
+);
+
+// the same height of el-tag
+$select-item-height: () !default;
+$select-item-height: map.merge(
+  (
+    'large': 24px,
+    'default': 24px,
+    'small': 20px,
+  ),
+  $select-item-height
+);
 $input: () !default;
 $input: map.merge(
   (

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

@@ -10,24 +10,45 @@
 @include b(date-picker) {
   width: 322px;
 
-  @include e(editor-wrap) {
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
     position: relative;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  @include e(editor-wrap) {
     display: table-cell;
+    position: relative;
     padding: 0 5px;
   }
 
   @include e(time-header) {
+    display: table;
     position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 5px 5px;
     border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
     font-size: 12px;
-    padding: 8px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
   }
 
   @include e(header) {
-    margin: 12px;
+    padding: 12px 12px 0;
     text-align: center;
 
     @include m(bordered) {
@@ -42,13 +63,13 @@
   }
 
   @include e(header-label) {
+    padding: 0 5px;
+    color: getCssVar('text-regular-color');
     font-size: 16px;
     font-weight: 500;
-    padding: 0 5px;
     line-height: 22px;
     text-align: center;
     cursor: pointer;
-    color: getCssVar('text-regular-color');
 
     &:hover {
       color: getCssVar('datepicker-hover-text-color');
@@ -78,31 +99,10 @@
   }
 
   @include e(time-label) {
+    margin-left: 10px;
     float: left;
-    cursor: pointer;
     line-height: 30px;
-    margin-left: 10px;
-  }
-
-  &.has-sidebar.has-time {
-    width: 434px;
-  }
-
-  &.has-sidebar {
-    width: 438px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    width: 292px;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
+    cursor: pointer;
   }
 
   .#{$namespace}-time-panel {

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

@@ -9,47 +9,91 @@
 @include b(date-range-picker) {
   width: 646px;
 
+  &.has-sidebar {
+    width: 756px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  table {
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  .#{$namespace}-picker-panel__body {
+    min-width: 513px;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    margin: 0;
+  }
+
   @include e(header) {
     position: relative;
-    text-align: center;
     height: 28px;
+    text-align: center;
 
-    button[class*='arrow-left'] {
+    [class*='arrow-left'] {
       float: left;
     }
 
-    button[class*='arrow-right'] {
+    [class*='arrow-right'] {
       float: right;
     }
 
     div {
+      margin-right: 50px;
       font-size: 16px;
       font-weight: 500;
-      margin-right: 50px;
+    }
+  }
+
+  @include e(header-label) {
+    padding: 0 5px;
+    color: getCssVar('text', 'regular-color');
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: getCssVar('datepicker-hover-text-color');
+    }
+
+    &:focus-visible {
+      outline: none;
+      color: getCssVar('datepicker-hover-text-color');
+    }
+
+    &.active {
+      color: getCssVar('datepicker-active-color');
     }
   }
 
   @include e(content) {
-    float: left;
-    width: 50%;
     box-sizing: border-box;
+    width: 50%;
     margin: 0;
     padding: 16px;
+    float: left;
 
     @include when(left) {
       border-right: 1px solid getCssVar('datepicker-inner-border-color');
     }
     .#{$namespace}-date-range-picker__header {
       div {
-        margin-left: 50px;
         margin-right: 50px;
+        margin-left: 50px;
       }
     }
   }
 
   @include e(editors-wrap) {
-    box-sizing: border-box;
     display: table-cell;
+    box-sizing: border-box;
 
     @include when(right) {
       text-align: right;
@@ -57,57 +101,36 @@
   }
 
   @include e(time-header) {
+    display: table;
     position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 8px 5px 5px;
     border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
     font-size: 12px;
-    padding: 8px 5px 5px;
-    display: table;
-    width: 100%;
-    box-sizing: border-box;
 
     > .#{$namespace}-icon-arrow-right {
-      font-size: 20px;
-      vertical-align: middle;
       display: table-cell;
       color: getCssVar('datepicker-icon-color');
+      font-size: 20px;
+      vertical-align: middle;
     }
   }
 
   @include e(time-picker-wrap) {
-    position: relative;
     display: table-cell;
+    position: relative;
     padding: 0 5px;
 
     .#{$namespace}-picker-panel {
       position: absolute;
+      z-index: 1;
       top: 13px;
       right: 0;
-      z-index: 1;
       background: $color-white;
     }
     .#{$namespace}-time-panel {
       position: absolute;
     }
   }
-
-  &.has-sidebar {
-    width: 756px;
-  }
-
-  &.has-time .#{$namespace}-picker-panel__body-wrapper {
-    position: relative;
-  }
-
-  table {
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  .#{$namespace}-picker-panel__body {
-    min-width: 513px;
-  }
-
-  .#{$namespace}-picker-panel__content {
-    margin: 0;
-  }
 }

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

@@ -34,29 +34,28 @@
   }
 
   td {
+    position: relative;
+    box-sizing: border-box;
     width: 32px;
     height: 30px;
     padding: 4px 0;
-    box-sizing: border-box;
     text-align: center;
     cursor: pointer;
-    position: relative;
 
     @include b(date-table-cell) {
+      box-sizing: border-box;
       height: 30px;
       padding: 3px 0;
-      box-sizing: border-box;
-
       @include b(date-table-cell__text) {
-        width: 24px;
-        height: 24px;
         display: block;
-        margin: 0 auto;
-        line-height: 24px;
         position: absolute;
         left: 50%;
+        width: 24px;
+        height: 24px;
+        margin: 0 auto;
         transform: translateX(-50%);
         border-radius: 50%;
+        line-height: 24px;
       }
     }
 
@@ -91,8 +90,8 @@
 
     &.current:not(.disabled) {
       .#{$namespace}-date-table-cell__text {
-        color: $color-white;
         background-color: getCssVar('datepicker-active-color');
+        color: $color-white;
       }
 
       &:focus-visible {
@@ -125,32 +124,28 @@
     }
 
     &.disabled .#{$namespace}-date-table-cell {
-      background-color: getCssVar('fill-color', 'light');
       opacity: 1;
-      cursor: not-allowed;
+      background-color: getCssVar('fill-color', 'light');
       color: getCssVar('text-placeholder-color');
+      cursor: not-allowed;
     }
 
     &.selected .#{$namespace}-date-table-cell {
-      margin-left: 5px;
       margin-right: 5px;
-      background-color: getCssVar('datepicker-inrange-bg-color');
+      margin-left: 5px;
       border-radius: 15px;
-
-      &:hover {
-        background-color: getCssVar('datepicker-inrange-hover-bg-color');
-      }
     }
 
     &.selected .#{$namespace}-date-table-cell__text {
+      border-radius: 15px;
       background-color: getCssVar('datepicker-active-color');
       color: $color-white;
-      border-radius: 15px;
     }
 
     &.week {
+      color: getCssVar('datepicker-off-text-color');
       font-size: 80%;
-      color: getCssVar('datepicker-header-text-color');
+      cursor: default;
     }
 
     &:focus {
@@ -160,8 +155,13 @@
 
   th {
     padding: 5px;
+    border-bottom: solid 1px getCssVar('border-color-lighter');
     color: getCssVar('datepicker-header-text-color');
     font-weight: 400;
-    border-bottom: solid 1px getCssVar('border-color-lighter');
+
+    &.#{$namespace}-date-table__week-header {
+      width: 24px;
+      padding: 0;
+    }
   }
 }

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

@@ -2,58 +2,63 @@
 @use '../common/var' as *;
 
 @include b(month-table) {
-  font-size: 12px;
   margin: -1px;
   border-collapse: collapse;
+  font-size: 12px;
 
   td {
-    text-align: center;
+    position: relative;
+    width: 68px;
     padding: 8px 0;
+    text-align: center;
     cursor: pointer;
 
-    & div {
+    @include b(date-table-cell) {
+      box-sizing: border-box;
       height: 48px;
       padding: 6px 0;
-      box-sizing: border-box;
     }
 
     &.today {
-      .cell {
+      .#{$namespace}-date-table-cell__text {
         color: getCssVar('primary-color');
         font-weight: bold;
       }
 
-      &.start-date .cell,
-      &.end-date .cell {
+      &.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: 60px;
-      height: 36px;
+    @include b(date-table-cell__text) {
       display: block;
-      line-height: 36px;
-      color: getCssVar('datepicker-text-color');
+      position: absolute;
+      left: 50%;
+      width: 54px;
+      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');
       }
     }
 
-    &.in-range div {
+    &.in-range .#{$namespace}-date-table-cell {
       background-color: getCssVar('datepicker-inrange-bg-color');
 
       &:hover {
@@ -61,36 +66,46 @@
       }
     }
 
-    &.start-date div,
-    &.end-date div {
+    &.start-date .#{$namespace}-date-table-cell,
+    &.end-date .#{$namespace}-date-table-cell {
       color: $color-white;
     }
 
-    &.start-date .cell,
-    &.end-date .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 div {
+    &.start-date .#{$namespace}-date-table-cell {
+      margin-left: 3px;
       border-top-left-radius: 24px;
       border-bottom-left-radius: 24px;
     }
 
-    &.end-date div {
+    &.end-date .#{$namespace}-date-table-cell {
+      margin-right: 3px;
       border-top-right-radius: 24px;
       border-bottom-right-radius: 24px;
     }
 
-    &.current:not(.disabled) .cell {
-      color: getCssVar('datepicker-active-color');
+    &.current:not(.disabled) .#{$namespace}-date-table-cell {
+      margin-right: 3px;
+      margin-left: 3px;
+      border-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/date-picker/picker-panel.scss

@@ -2,11 +2,18 @@
 @use '../common/var' as *;
 
 @include b(picker-panel) {
-  color: getCssVar('text-regular-color');
-  background: getCssVar('bg-color', 'overlay');
   border-radius: getCssVar('border-radius-base');
+  background: getCssVar('bg-color', 'overlay');
+  color: getCssVar('text-regular-color');
   line-height: 30px;
 
+  .#{$namespace}-time-panel {
+    margin: 5px 0;
+    border: solid 1px getCssVar('datepicker-border-color');
+    background-color: getCssVar('bg-color', 'overlay');
+    box-shadow: getCssVar('box-shadow-light');
+  }
+
   @include e((body, body-wrapper)) {
     &::after {
       content: '';
@@ -21,25 +28,25 @@
   }
 
   @include e(footer) {
-    border-top: 1px solid getCssVar('datepicker-inner-border-color');
+    position: relative;
     padding: 4px 12px;
-    text-align: right;
+    border-top: 1px solid getCssVar('datepicker-inner-border-color');
     background-color: getCssVar('bg-color', 'overlay');
-    position: relative;
     font-size: 0;
+    text-align: right;
   }
 
   @include e(shortcut) {
     display: block;
     width: 100%;
+    padding-left: 12px;
     border: 0;
+    outline: none;
     background-color: transparent;
-    line-height: 28px;
-    font-size: 14px;
     color: getCssVar('datepicker-text-color');
-    padding-left: 12px;
+    font-size: 14px;
+    line-height: 28px;
     text-align: left;
-    outline: none;
     cursor: pointer;
 
     &:hover {
@@ -53,15 +60,15 @@
   }
 
   @include e(btn) {
+    padding: 0 20px;
     border: 1px solid getCssVar('fill-color', 'darker');
-    color: getCssVar('text-primary-color');
-    line-height: 24px;
     border-radius: 2px;
-    padding: 0 20px;
-    cursor: pointer;
-    background-color: transparent;
     outline: none;
+    background-color: transparent;
+    color: getCssVar('text-primary-color');
     font-size: 12px;
+    line-height: 24px;
+    cursor: pointer;
 
     &[disabled] {
       color: getCssVar('text', 'disabled-color');
@@ -70,13 +77,13 @@
   }
 
   @include e(icon-btn) {
-    font-size: 12px;
-    color: getCssVar('datepicker-icon-color');
+    margin-top: 1px;
     border: 0;
+    outline: none;
     background: transparent;
+    color: getCssVar('datepicker-icon-color');
+    font-size: 12px;
     cursor: pointer;
-    outline: none;
-    margin-top: 3px;
 
     @include when(disabled) {
       color: getCssVar('text-disabled-color');
@@ -101,13 +108,6 @@
   @include e(link-btn) {
     vertical-align: middle;
   }
-
-  .#{$namespace}-time-panel {
-    margin: 5px 0;
-    border: solid 1px getCssVar('datepicker-border-color');
-    background-color: getCssVar('bg-color', 'overlay');
-    box-shadow: getCssVar('box-shadow-light');
-  }
 }
 
 .#{$namespace}-picker-panel *[slot='sidebar'],
@@ -115,12 +115,11 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 110px;
-  border-right: 1px solid getCssVar('datepicker-inner-border-color');
   box-sizing: border-box;
+  width: 110px;
   padding-top: 6px;
-  background-color: getCssVar('bg-color', 'overlay');
   overflow: auto;
+  border-right: 1px solid getCssVar('datepicker-inner-border-color');
 }
 
 .#{$namespace}-picker-panel