vft 0.0.142 → 0.0.144

package/theme-style/src/tabs.scss

@@ -13,6 +13,7 @@ $name: tabs;
 
 @include b($name) {
   padding: getCompCssVar('padding');
+
   @include e(header) {
     padding: getCompCssVar('header-padding');
     //height: getCompCssVar('header-height');
@@ -21,6 +22,7 @@ $name: tabs;
     position: relative;
     margin: getCompCssVar('header-margin');
   }
+
   @include e(item) {
     padding: getCompCssVar('item-padding');
     height: getCompCssVar('header-height');
@@ -40,10 +42,11 @@ $name: tabs;
     border-radius: getCompCssVar('item-border-radius');
     // 滑入时动画的渐变控制
     // color getCssVar('transition-duration')
-    transition:
-      getCssVar('transition-function-ease-in-out-bezier'),
-      padding getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
-      background-color getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+    transition: getCssVar('transition-function-ease-in-out-bezier'),
+      padding getCssVar('transition-duration')
+        getCssVar('transition-function-ease-in-out-bezier'),
+      background-color getCssVar('transition-duration')
+        getCssVar('transition-function-ease-in-out-bezier');
     max-width: getCompCssVar('item-max-width');
 
     @include when(disabled) {
@@ -51,11 +54,25 @@ $name: tabs;
       cursor: not-allowed;
     }
 
+    // 当前标签激活时的样式
+    @include when(active) {
+      color: getCompCssVar('item-active-color');
+      background-color: getCompCssVar('item-active-bg-color');
+      font-weight: getCompCssVar('font-weight-active');
+      border: getCompCssVar('item-active-border');
+
+      &.is-closable {
+        .is-icon-close {
+          width: getCompCssVar('active-distance');
+        }
+      }
+    }
+
     // active tab close icon is show
     &.is-active.is-closable {
       .is-icon-close {
         opacity: 1;
-        width: getCompCssVar('active-distance')!important;
+        width: getCompCssVar('active-distance') !important;
       }
     }
 
@@ -82,35 +99,23 @@ $name: tabs;
       cursor: pointer;
     }
 
-    // 当前标签激活时的样式
-    @include when(active) {
-      color: getCompCssVar('item-active-color');
-      background-color: getCompCssVar('item-active-bg-color');
-      font-weight: getCompCssVar('font-weight-active');
-      border: getCompCssVar('item-active-border');
-
-      &.is-closable {
-        .is-icon-close {
-          width: getCompCssVar('active-distance');
-        }
-      }
-    }
-
     &:focus,
     &:focus:active {
       outline: none;
     }
+
     &:focus-visible {
       box-shadow: 0 0 2px 2px getCssVar('primary-color') inset;
       border-radius: 3px;
     }
+
     & .is-icon-close {
-      transition: all getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+      transition: all getCssVar('transition-duration')
+        getCssVar('transition-function-ease-in-out-bezier');
       margin-left: getCompCssVar('close-icon-left');
       display: flex;
       justify-content: center;
       align-items: center;
-
       height: getCompCssVar(active-distance);
       width: getCompCssVar(active-distance);
       border-radius: 50%;
@@ -124,6 +129,7 @@ $name: tabs;
       }
     }
   }
+
   @include e(active-bar) {
     position: absolute;
     bottom: 0;
@@ -131,10 +137,13 @@ $name: tabs;
     height: 2px;
     background-color: getCssVar('primary-color');
     z-index: 1;
-    transition: width getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
-    transform getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+    transition: width getCssVar('transition-duration')
+        getCssVar('transition-function-ease-in-out-bezier'),
+      transform getCssVar('transition-duration')
+        getCssVar('transition-function-ease-in-out-bezier');
     list-style: none;
   }
+
   @include e(new-tab) {
     cursor: pointer;
     transition: all 0.15s;
@@ -149,11 +158,22 @@ $name: tabs;
       color: getCssVar('primary-color');
     }
   }
+
   @include e(nav-wrap) {
     overflow: hidden;
     margin-bottom: -1px;
     position: relative;
 
+    // scrollNav 左右距离控制， + 距离控制
+    @include when(scrollable) {
+      padding: getCompCssVar('scroll-padding');
+      box-sizing: border-box;
+
+      @include e(new-tab) {
+        right: getCompCssVar('add-icon-right');
+      }
+    }
+
     &::after {
       content: '';
       position: absolute;
@@ -165,39 +185,20 @@ $name: tabs;
       z-index: getCssVar('z-index-normal');
       display: getCompCssVar('show-border-bottom');
     }
-
-    // scrollNav 左右距离控制， + 距离控制
-    @include when(scrollable) {
-      padding: getCompCssVar('scroll-padding');
-      box-sizing: border-box;
-
-      @include e(new-tab) {
-        right: getCompCssVar('add-icon-right');
-      }
-    }
   }
+
   @include e(nav-scroll) {
     overflow: hidden;
+
     @include when(have-fixed-tab) {
       height: getCompCssVar('header-height');
     }
   }
 
-  .icon-plus {
-    @include icon-common($icon-plus)
-  }
   @include icon-close;
   @include icon-arrow-left;
   @include icon-arrow-right;
 
-  //.#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
-  //  content: none;
-  //}
-  .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
-    border-radius: 4px 4px 0 0;
-    box-sizing: border-box;
-  }
-
   // 前进后退样式
   @include e((nav-next, nav-prev)) {
     position: absolute;
@@ -206,12 +207,15 @@ $name: tabs;
     align-items: center;
     height: 100%;
   }
+
   @include e(nav-next) {
     right: 0;
   }
+
   @include e(nav-prev) {
     left: 0;
   }
+
   @include e(nav) {
     display: flex;
     white-space: nowrap;
@@ -223,6 +227,7 @@ $name: tabs;
     @include when(stretch) {
       min-width: 100%;
       display: flex;
+
       & > * {
         flex: 1;
         text-align: center;
@@ -239,6 +244,7 @@ $name: tabs;
     overflow: hidden;
     position: relative;
   }
+
   @include m((top, bottom)) {
     .#{$namespace}-tabs__item.is-top:nth-child(2),
     .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
@@ -264,13 +270,14 @@ $name: tabs;
       }
     }
   }
+
   @include m(bottom) {
     .#{$namespace}-tabs__header.is-bottom {
       margin-bottom: 0;
       margin-top: 10px;
     }
-
   }
+
   @include m((left, right)) {
     overflow: hidden;
 
@@ -342,6 +349,7 @@ $name: tabs;
       justify-content: flex-start;
     }
   }
+
   @include m(left) {
     .#{$namespace}-tabs__header.is-left {
       float: left;
@@ -425,6 +433,7 @@ $name: tabs;
       }
     }
   }
+
   @include m(right) {
     .#{$namespace}-tabs__header.is-right {
       float: right;
@@ -498,6 +507,18 @@ $name: tabs;
       }
     }
   }
+
+  .icon-plus {
+    @include icon-common($icon-plus);
+  }
+
+  //.#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
+  //  content: none;
+  //}
+  .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
+    border-radius: 4px 4px 0 0;
+    box-sizing: border-box;
+  }
 }
 
 .slideInRight-transition,
@@ -534,7 +555,7 @@ $name: tabs;
     transform: translateX(100%);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform-origin: 0 0;
     transform: translateX(0);
@@ -562,7 +583,7 @@ $name: tabs;
     transform: translateX(-100%);
   }
 
-  to {
+  100% {
     opacity: 1;
     transform-origin: 0 0;
     transform: translateX(0);

package/theme-style/src/tree.scss

@@ -40,22 +40,17 @@
   }
 
   .icon-caret-right {
-    @include icon-common($icon-caret-right)
+    @include icon-common($icon-caret-right);
   }
+
   .icon-loading {
-    @include icon-common($icon-loading)
+    @include icon-common($icon-loading);
   }
 }
 
 @include b(tree-node) {
   white-space: nowrap;
   outline: none;
-  &:focus {
-    /* focus */
-    > .#{$namespace}-tree-node__content {
-      background-color: getCssVar('tree-node-hover-bg-color');
-    }
-  }
 
   @include when(drop-inner) {
     > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
@@ -73,6 +68,7 @@
     & > label.#{$namespace}-checkbox {
       margin-right: 8px;
     }
+
     &:hover {
       background-color: getCssVar('tree-node-hover-bg-color');
     }
@@ -95,7 +91,6 @@
     color: getCssVar('tree-expand-icon-color');
     font-size: 12px;
     margin-right: 6px;
-
     transform: rotate(0deg);
     transition: transform getCssVar('transition-duration') ease-in-out;
 
@@ -107,6 +102,7 @@
       color: transparent;
       cursor: default;
     }
+
     &.is-hidden {
       visibility: hidden;
     }
@@ -118,6 +114,13 @@
     color: getCssVar('tree-expand-icon-color');
   }
 
+  &:focus {
+    /* focus */
+    > .#{$namespace}-tree-node__content {
+      background-color: getCssVar('tree-node-hover-bg-color');
+    }
+  }
+
   & > .#{$namespace}-tree-node__children {
     overflow: hidden;
     background-color: transparent;
@@ -128,7 +131,9 @@
   }
 }
 
-.#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
+.#{$namespace}-tree--highlight-current
+  .#{$namespace}-tree-node.is-current
+  > .#{$namespace}-tree-node__content {
   background-color: getCssVar('primary-color-light-9');
   color: getCssVar('primary-color');
 }

package/theme-style/src/upload.scss

@@ -23,10 +23,11 @@
 }
 
 @include b(upload) {
-  @include flex-center(true);
-
   cursor: pointer;
   outline: none;
+
+  @include flex-center(true);
+
   @include e(input) {
     display: none;
   }
@@ -37,19 +38,8 @@
     margin-top: 7px;
   }
 
-  iframe {
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    filter: alpha(opacity=0);
-  }
-
   /* Picture Card for Wall */
   @include m(picture-card) {
-    @include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
-
     background-color: getCssVar('fill-color', 'lighter');
     border: 1px dashed getCssVar('border-color', 'darker');
     border-radius: 6px;
@@ -59,6 +49,7 @@
     cursor: pointer;
     vertical-align: top;
 
+    @include set-css-var-value(('upload', 'picture-card', 'size'), 148px);
     @include flex-center(true);
 
     i {
@@ -76,6 +67,17 @@
     display: block;
   }
 
+  @include icon-close;
+
+  iframe {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    filter: alpha(opacity=0);
+  }
+
   &:focus {
     border-color: getCssVar('primary-color');
     color: getCssVar('primary-color');
@@ -86,28 +88,29 @@
   }
 
   .icon-document {
-    @include icon-common($icon-document)
+    @include icon-common($icon-document);
   }
+
   .icon-circle-check {
-    @include icon-common($icon-circle-check)
+    @include icon-common($icon-circle-check);
   }
+
   .icon-check {
-    @include icon-common($icon-check)
+    @include icon-common($icon-check);
   }
 
-  @include icon-close;
-
   .icon-zoom-in {
-    @include icon-common($icon-zoom-in)
+    @include icon-common($icon-zoom-in);
   }
 
   .icon-delete {
-    @include icon-common($icon-delete)
+    @include icon-common($icon-delete);
   }
 }
 
 @include b(upload-dragger) {
-  padding: getCssVar('upload-dragger-padding-horizontal') getCssVar('upload-dragger-padding-vertical');
+  padding: getCssVar('upload-dragger-padding-horizontal')
+    getCssVar('upload-dragger-padding-vertical');
   background-color: getCssVar('fill-color', 'blank');
   border: 1px dashed getCssVar('border-color');
   border-radius: 6px;
@@ -117,6 +120,13 @@
   position: relative;
   overflow: hidden;
 
+  @include when(dragover) {
+    padding: calc(#{getCssVar('upload-dragger-padding-horizontal')} - 1px)
+      calc(#{getCssVar('upload-dragger-padding-vertical')} - 1px);
+    background-color: getCssVar('primary-color', 'light-9');
+    border: 2px dashed getCssVar('primary-color');
+  }
+
   .#{bem('icon', '', 'upload')} {
     font-size: 67px;
     color: getCssVar('text-placeholder-color');
@@ -148,12 +158,6 @@
   &:hover {
     border-color: getCssVar('primary-color');
   }
-
-  @include when(dragover) {
-    padding: calc(#{getCssVar('upload-dragger-padding-horizontal')} - 1px) calc(#{getCssVar('upload-dragger-padding-vertical')} - 1px);
-    background-color: getCssVar('primary-color', 'light-9');
-    border: 2px dashed getCssVar('primary-color');
-  }
 }
 
 @include b(upload-list) {
@@ -161,6 +165,7 @@
   padding: 0;
   list-style: none;
   position: relative;
+
   @include e(item) {
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
@@ -171,6 +176,43 @@
     border-radius: 4px;
     width: 100%;
 
+    @include when(success) {
+      .#{bem('upload-list', 'item-status-label')} {
+        display: inline-flex;
+      }
+
+      .#{bem('upload-list', 'item-name')}:hover,
+      .#{bem('upload-list', 'item-name')}:focus {
+        color: getCssVar('primary-color');
+        cursor: pointer;
+      }
+
+      &:focus:not(:hover) {
+        /* 键盘focus */
+        .#{bem('icon', '', 'close-tip')} {
+          display: inline-block;
+        }
+      }
+
+      &:not(.focusing):focus,
+      &:active {
+        /* click时 */
+        outline-width: 0;
+
+        .#{bem('icon', '', 'close-tip')} {
+          display: none;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        .#{bem('upload-list', 'item-status-label')} {
+          display: none;
+          opacity: 0;
+        }
+      }
+    }
+
     .#{bem('progress')} {
       position: absolute;
       top: 20px;
@@ -240,43 +282,6 @@
       width: calc(100% - 30px);
       margin-left: 4px;
     }
-
-    @include when(success) {
-      .#{bem('upload-list', 'item-status-label')} {
-        display: inline-flex;
-      }
-
-      .#{bem('upload-list', 'item-name')}:hover,
-      .#{bem('upload-list', 'item-name')}:focus {
-        color: getCssVar('primary-color');
-        cursor: pointer;
-      }
-
-      &:focus:not(:hover) {
-        /* 键盘focus */
-        .#{bem('icon', '', 'close-tip')} {
-          display: inline-block;
-        }
-      }
-
-      &:not(.focusing):focus,
-      &:active {
-        /* click时 */
-        outline-width: 0;
-
-        .#{bem('icon', '', 'close-tip')} {
-          display: none;
-        }
-      }
-
-      &:hover,
-      &:focus {
-        .#{bem('upload-list', 'item-status-label')} {
-          display: none;
-          opacity: 0;
-        }
-      }
-    }
   }
 
   @include e(item-name) {
@@ -284,9 +289,7 @@
     display: inline-flex;
     text-align: center;
     align-items: center;
-
     padding: 0 4px;
-
     transition: color getCssVar('transition-duration');
     font-size: getCssVar('font-size', 'base');
 
@@ -308,11 +311,9 @@
     top: 0;
     line-height: inherit;
     display: none;
-
     height: 100%;
     justify-content: center;
     align-items: center;
-
     transition: opacity getCssVar('transition-duration');
   }
 
@@ -331,12 +332,12 @@
 
   // upload-list
   @include m(picture-card) {
-    @include set-css-var-value(('upload-list', 'picture-card', 'size'), 148px);
-
     display: inline-flex;
     flex-wrap: wrap;
     margin: 0;
 
+    @include set-css-var-value(('upload-list', 'picture-card', 'size'), 148px);
+
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
       background-color: getCssVar('fill-color', 'blank');
@@ -347,7 +348,6 @@
       height: getCssVar('upload-list', 'picture-card', 'size');
       margin: 0 8px 8px 0;
       padding: 0;
-
       display: inline-flex;
 
       .#{bem('icon', '' ,'check')},
@@ -385,7 +385,7 @@
     }
 
     .#{bem('upload-list', 'item-status-label')} {
-      @include upload-success();
+      @include upload-success;
     }
 
     .#{bem('upload-list', 'item-actions')} {
@@ -395,11 +395,9 @@
       left: 0;
       top: 0;
       cursor: default;
-
       display: inline-flex;
       justify-content: center;
       align-items: center;
-
       color: #fff;
       opacity: 0;
       font-size: 20px;
@@ -492,11 +490,9 @@
       display: inline-flex;
       justify-content: center;
       align-items: center;
-
       width: $item-thumbnail-size;
       height: $item-thumbnail-size;
       object-fit: contain;
-
       position: relative;
       z-index: 1;
       background-color: getCssVar('color-white');
@@ -535,13 +531,8 @@
   overflow: hidden;
   z-index: 10;
   cursor: default;
-  @include utils-vertical-center;
 
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
+  @include utils-vertical-center;
 
   @include e(label) {
     @include upload-success(#fff);
@@ -634,6 +625,12 @@
     color: getCssVar('text-primary-color');
   }
 
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
   + .#{bem('upload', 'inner')} {
     opacity: 0;
     position: relative;

package/theme-style/src/var.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'common/var' as *;
 @use 'mixins/var' as *;
 @use 'mixins/mixins' as *;
@@ -28,12 +27,10 @@
   @include set-component-css-var('transition-duration', $transition-duration);
   @include set-component-css-var('transition-function', $transition-function);
   @include set-component-css-var('transition', $transition);
-
 }
 
 // for light
 :root {
-  color-scheme: light;
 
   // --vft-color-#{$type}
   // --vft-color-#{$type}-light-{$i}
@@ -41,11 +38,13 @@
     @include set-css-color-type($colors, $type);
   }
 
+  color-scheme: light;
+
   // color-scheme
   // Background --vft-bg-color-#{$type}
   @include set-component-css-var('bg-color', $bg-color);
   // --vft-text-color-#{$type}
-  @include set-component-css-var('text', $text-color);
+  @include set-component-css-var('text', $text);
   // --vft-border-color-#{$type}
   @include set-component-css-var('border-color', $border-color);
   // Fill --vft-fill-color-#{$type}
@@ -65,7 +64,11 @@
   @include set-css-var-value('border-width', $border-width);
   @include set-css-var-value('border-style', $border-style);
   @include set-css-var-value('border-color-hover', $border-color-hover);
-  @include set-css-var-value('border', getCssVar('border-width') getCssVar('border-style') getCssVar('border-color'));
+  @include set-css-var-value(
+    'border',
+    getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color')
+  );
 
   // Svg
   @include css-var-from-global('svg-monochrome-grey', 'border-color');