vft 0.0.73 → 0.0.76

package/theme-style/src/menu.scss

@@ -25,7 +25,6 @@ $name: menu;
   transition: border-color getCssVar('transition-duration'),
   background-color getCssVar('transition-duration'),
   color getCssVar('transition-duration');
-  box-sizing: border-box;
   white-space: nowrap;
 
   * {
@@ -34,7 +33,7 @@ $name: menu;
 
   i {
     flex-shrink: 0;
-    margin-right: getCompCssVar('icon-mr');
+    //margin-right: getCompCssVar('icon-mr');
   }
 
   &:hover,
@@ -44,6 +43,7 @@ $name: menu;
 
   &:hover {
     background-color: getCompCssVar('hover-bg-color');
+
   }
 
   @include when(disabled) {
@@ -66,7 +66,6 @@ $name: menu;
   margin: 0;
   padding-left: 0;
   background-color: getCompCssVar('bg-color');
-  box-sizing: border-box;
   scroll-behavior: smooth;
 
   @include m(vertical) {
@@ -88,11 +87,15 @@ $name: menu;
       }
     }
 
-    & > .#{$namespace}-sub-menu {
-      @include e(title) {
-        padding-right: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')});
-      }
+    .#{$namespace}-sub-menu__icon-arrow {
+      position: absolute;
+      right: getCompCssVar('base-level-padding');
     }
+    //& > .#{$namespace}-sub-menu {
+    //  @include e(title) {
+    //    padding-right: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')});
+    //  }
+    //}
   }
 
   @include m(horizontal) {
@@ -109,8 +112,9 @@ $name: menu;
       height: 100%;
 
       margin: 0;
-      border-bottom: 2px solid transparent;
+      border-bottom: getCompCssVar('item-border-bottom');
       color: getCompCssVar('text-color');
+      //box-sizing: content-box;
 
       a,
       a:hover {
@@ -122,21 +126,16 @@ $name: menu;
         background-color: #fff;
       }
     }
+
     & > .#{$namespace}-sub-menu {
       &:focus,
       &:hover {
         outline: none;
       }
 
-      &:hover {
-        .#{$namespace}-sub-menu__title {
-          color: getCompCssVar('hover-text-color');
-        }
-      }
-
       &.is-active {
         .#{$namespace}-sub-menu__title {
-          border-bottom: 2px solid getCompCssVar('active-color');
+          border-bottom: getCompCssVar('item-active-border-bottom');;
           color: getCompCssVar('active-color');
 
           &:hover {
@@ -147,12 +146,12 @@ $name: menu;
 
       & .#{$namespace}-sub-menu__title {
         height: 100%;
-        line-height: 100%;
-        border-bottom: 2px solid transparent;
+        //line-height: 100%;
+        border-bottom: getCompCssVar('item-border-bottom');
         color: getCompCssVar('text-color');
 
-
         &:hover {
+          color: getCompCssVar('hover-text-color');
           background-color: getCompCssVar('hover-bg-color');
         }
       }
@@ -164,14 +163,9 @@ $name: menu;
         display: flex;
         align-items: center;
         height: getCompCssVar('horizontal-sub-item-height');
-        padding: 0 10px;
         color: getCompCssVar('text-color');
       }
 
-      & .#{$namespace}-sub-menu__title {
-        padding-right: 40px;
-      }
-
       & .#{$namespace}-menu-item.is-active,
       & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
         color: getCompCssVar('active-color');
@@ -188,10 +182,11 @@ $name: menu;
       background-color: getCompCssVar('focus-bg-color');
     }
     & > .#{$namespace}-menu-item.is-active {
-      border-bottom: 2px solid getCompCssVar('active-color');
+      border-bottom: getCompCssVar('item-active-border-bottom');;
       color: getCompCssVar('active-color');
     }
   }
+
   @include m(collapse) {
     width: calc(
       #{getCompCssVar('icon-width')} + #{getCompCssVar('base-level-padding')} *
@@ -233,6 +228,7 @@ $name: menu;
       padding-right: 0px;
     }
   }
+
   @include m(popup) {
     z-index: 100;
     min-width: 200px;
@@ -241,44 +237,28 @@ $name: menu;
     box-shadow: getCssVar('box-shadow-light');
 
     // Todo radius
-    border-radius: getCompCssVar('popup-border-radius');
-  }
+    border-radius: getCssVar('popper-border-radius');
 
-  .#{$namespace}-icon {
-    flex-shrink: 0;
-  }
-}
+    .vft-sub-menu__title {
+      color: getCompCssVar('text-color');
+      border-bottom: none !important;
+    }
 
-@include b(menu-item) {
-  @include menu-item;
+    .is-active {
+      .vft-sub-menu__title {
+        color: getCompCssVar('active-color') !important;
+        border-bottom: none !important;
+      }
+    }
 
-  & [class^='#{$namespace}-icon'] {
-    margin-right: getCompCssVar('icon-mr');
-    width: getCompCssVar('icon-width');
-    text-align: center;
-    vertical-align: middle;
-  }
-  @include when(active) {
-    color: getCompCssVar('active-color');
-    i {
-      color: inherit;
+    .#{$namespace}-sub-menu__icon-arrow {
+      position: absolute;
+      right: getCompCssVar('base-level-padding');
     }
   }
-  .#{$namespace}-menu-tooltip__trigger {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 getCompCssVar('base-level-padding');
-  }
-  span {
-    @include line-clamp();
-    word-break: break-all;
-    white-space: break-spaces;
+
+  .#{$namespace}-icon {
+    flex-shrink: 0;
   }
 }
 
@@ -290,19 +270,18 @@ $name: menu;
 
   @include e(title) {
     @include menu-item;
+
     &:hover {
       background-color: getCompCssVar('hover-bg-color');
     }
 
-    //&:not(.vft-menu--collapse) {
-    //  .#{$namespace}-sub-menu__text {
-    //    white-space: break-spaces;
-    //  }
-    //}
+    //padding-right: calc(
+    //  #{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')}
+    //);
+
     @include e(text) {
       padding-right: getCompCssVar('base-level-padding');
     }
-
   }
   & .#{$namespace}-menu {
     border: none;
@@ -341,18 +320,49 @@ $name: menu;
     margin-right: getCompCssVar('icon-mr');
     text-align: center;
 
-    &.#{$namespace}-sub-menu__icon-more {
+    &.#{$namespace}-sub-menu__icon-more,&.#{$namespace}-sub-menu__icon-arrow {
       margin-right: 0 !important;
     }
   }
   .#{$namespace}-sub-menu__icon-arrow {
-    position: absolute;
-    right: getCompCssVar('base-level-padding');
     transition: transform getCssVar('transition-duration');
     color: inherit;
   }
 }
 
+@include b(menu-item) {
+  @include menu-item;
+
+  & [class^='#{$namespace}-icon'] {
+    margin-right: getCompCssVar('icon-mr');
+    width: getCompCssVar('icon-width');
+    text-align: center;
+    vertical-align: middle;
+  }
+  @include when(active) {
+    color: getCompCssVar('active-color');
+    i {
+      color: inherit;
+    }
+  }
+  .#{$namespace}-menu-tooltip__trigger {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 getCompCssVar('base-level-padding');
+  }
+
+  .vft-menu-item__text {
+    @include line-clamp($inline: true);
+    word-break: break-all;
+    white-space: break-spaces;
+  }
+}
+
 @include b(menu-item-group) {
   > ul {
     padding: 0;

package/theme-style/src/mixins/_var.scss

@@ -7,14 +7,14 @@
 // set css var value, because we need translate value to string
 // for example:
 // @include set-css-var-value('color-white', white); --vft-color-white: white;
-// @include set-css-var-value(('color', 'primary'), red); --vft-primary-color: red;
+// @include set-css-var-value(('primary-color'), red); --vft-primary-color: red;
 // @include set-css-var-value('color' 'primary', red); --vft-primary-color: red;
 // --vft-primary-color: red;
 @mixin set-css-var-value($name, $value) {
   #{joinVarName($name)}: #{$value};
 }
 
-// @include set-css-var-type('color', 'primary', $map);
+// @include set-css-var-type('primary-color', $map);
 // --vft-primary-color: #{map.get($map, 'primary')};
 @mixin set-css-var-type($name, $type, $variables) {
   #{getCssVarName($name, $type)}: #{map.get($variables, $type)};

package/theme-style/src/mixins/mixins.scss

@@ -212,9 +212,9 @@
 
 @mixin inset-input-border($color, $important: false) {
   @if $important == true {
-    box-shadow: 0 0 0 1px $color inset !important;
+    border: 1px solid $color !important;
   } @else {
-    box-shadow: 0 0 0 1px $color inset;
+    border: 1px solid $color;
   }
 }
 

package/theme-style/src/popconfirm.scss

@@ -0,0 +1,16 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(popconfirm) {
+  @include e(main) {
+    display: flex;
+    align-items: center;
+  }
+  @include e(icon) {
+    margin-right: 5px;
+  }
+  @include e(action) {
+    text-align: right;
+    margin-top: 8px;
+  }
+}

package/theme-style/src/popper.scss

@@ -4,8 +4,10 @@
 
 $name: popper;
 
-@include b(popper) {
-  @include set-component-css-var('popper', $popper);
+@include set-root-css-vars($name, $popper);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
 }
 
 @include b(popper) {

package/theme-style/src/progress.scss

@@ -9,7 +9,7 @@
 
   @include e(text) {
     font-size: 14px;
-    color: getCssVar('text-color', 'regular');
+    color: getCssVar('text-regular-color');
     margin-left: 5px;
     min-width: 50px;
     line-height: 1;

package/theme-style/src/reset.scss

@@ -6,14 +6,14 @@ body {
     'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   font-weight: 400;
   font-size: getCssVar('font-size', 'base');
-  color: getCssVar('text-color', 'primary');
+  color: getCssVar('text-primary-color');
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
 }
 
 a {
-  color: getCssVar('color', 'primary');
+  color: getCssVar('primary-color');
   text-decoration: none;
 
   &:hover,
@@ -32,7 +32,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: getCssVar('text-color', 'regular');
+  color: getCssVar('text-regular-color');
   font-weight: inherit;
 
   &:first-child {

package/theme-style/src/result.scss

@@ -34,7 +34,7 @@ $name: result;
     p {
       margin: 0;
       font-size: getCssVar('result-title-font-size');
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
       line-height: 1.3;
     }
   }
@@ -45,7 +45,7 @@ $name: result;
     p {
       margin: 0;
       font-size: getCssVar('font-size', 'base');
-      color: getCssVar('text-color', 'regular');
+      color: getCssVar('text-regular-color');
       line-height: 1.3;
     }
   }

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

@@ -5,7 +5,7 @@
 @use 'common/var' as *;
 
 @include b(select-dropdown) {
-  z-index: calc(#{getCssVar('index-top')} + 1);
+  z-index: calc(#{getCssVar('z-index-top')} + 1);
   border-radius: getCssVar('border-radius-base');
   box-sizing: border-box;
 

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

@@ -25,7 +25,7 @@ $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='
 }
 
 @include b(select-dropdown) {
-  z-index: calc(#{getCssVar('index-top')} + 1);
+  z-index: calc(#{getCssVar('z-index-top')} + 1);
   border-radius: getCssVar('border-radius-base');
   box-sizing: border-box;
 

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

@@ -206,7 +206,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
     cursor: pointer;
     position: absolute;
     top: 8px;
-    z-index: getCssVar('index-top');
+    z-index: getCssVar('z-index-top');
     right: 25px;
     color: getCssVar('select-input-color');
     line-height: 18px;
@@ -273,7 +273,7 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
 
   @include e(selection) {
     white-space: normal;
-    z-index: getCssVar('index-normal');
+    z-index: getCssVar('z-index-normal');
     display: flex;
     align-items: center;
     flex-wrap: wrap;

package/theme-style/src/select.scss

@@ -8,7 +8,7 @@
 
 @mixin select-tag-normal {
   white-space: normal;
-  z-index: getCssVar('index-normal');
+  z-index: getCssVar('z-index-normal');
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -23,13 +23,13 @@
     }
 
     .#{$namespace}-icon-close {
-      background-color: getCssVar('text-color', 'placeholder');
+      background-color: getCssVar('text-placeholder-color');
       right: -7px;
       top: 0;
       color: $color-white;
 
       &:hover {
-        background-color: getCssVar('text-color', 'secondary');
+        background-color: getCssVar('text-secondary-color');
       }
 
       &::before {
@@ -134,7 +134,6 @@
 
       &.#{$namespace}-icon {
         position: relative;
-        height: inherit;
         z-index: 2;
       }
     }
@@ -190,7 +189,7 @@
     cursor: pointer;
     position: absolute;
     top: 8px;
-    z-index: getCssVar('index-top');
+    z-index: getCssVar('z-index-top');
     right: 25px;
     color: getCssVar('select-input-color');
     line-height: 18px;

package/theme-style/src/side-menu.scss

@@ -16,7 +16,6 @@ $name: side-menu;
   flex-direction: column;
   border-right: getCssVar('menu-border-right');
   position: relative;
-  overflow-x: hidden;
 
   @include m(fixed) {
     position: fixed;

package/theme-style/src/skeleton-item.scss

@@ -0,0 +1,83 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(skeleton) {
+  @include css-var-from-global(('skeleton', 'circle-size'), ('avatar', 'size'));
+}
+
+@mixin circle-size($size) {
+  width: $size;
+  height: $size;
+  line-height: $size;
+}
+
+@include b(skeleton) {
+  @include e(item) {
+    background: getCssVar('skeleton-color');
+    display: inline-block;
+    height: 16px;
+    border-radius: getCssVar('border-radius-base');
+    width: 100%;
+  }
+
+  @include e(circle) {
+    border-radius: 50%;
+
+    width: getCssVar('skeleton-circle-size');
+    height: getCssVar('skeleton-circle-size');
+    line-height: getCssVar('skeleton-circle-size');
+  }
+
+  @include e(button) {
+    height: 40px;
+    width: 64px;
+    border-radius: 4px;
+  }
+
+  @include e(p) {
+    width: 100%;
+    @include when(last) {
+      width: 61%;
+    }
+
+    @include when(first) {
+      width: 33%;
+    }
+  }
+
+  @include e(text) {
+    width: 100%;
+    height: getCssVar('font-size-small');
+  }
+
+  @include e(caption) {
+    height: getCssVar('font-size-extra-small');
+  }
+
+  @include e(h1) {
+    height: getCssVar('font-size-extra-large');
+  }
+
+  @include e(h3) {
+    height: getCssVar('font-size-large');
+  }
+
+  @include e(h5) {
+    height: getCssVar('font-size-medium');
+  }
+
+  @include e(image) {
+    width: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0;
+
+    svg {
+      color: getCssVar('svg-monochrome-grey');
+      fill: currentColor;
+      width: 22%;
+      height: 22%;
+    }
+  }
+}

package/theme-style/src/skeleton.scss

@@ -0,0 +1,44 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(skeleton) {
+  @include set-component-css-var('skeleton', $skeleton);
+}
+
+@mixin skeleton-color() {
+  background: linear-gradient(
+    90deg,
+    getCssVar('skeleton-color') 25%,
+    getCssVar('skeleton-to-color') 37%,
+    getCssVar('skeleton-color') 63%
+  );
+  background-size: 400% 100%;
+  animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes #{$namespace}-skeleton-loading {
+  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;
+      margin-top: 16px;
+      background: getCssVar('skeleton-color');
+    }
+  }
+
+  @include when(animated) {
+    .#{$namespace}-skeleton__item {
+      @include skeleton-color();
+    }
+  }
+}

package/theme-style/src/step.scss

@@ -27,13 +27,13 @@
     width: 100%;
 
     @include when(process) {
-      color: getCssVar('text-color', 'primary');
-      border-color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
+      border-color: getCssVar('text-primary-color');
     }
 
     @include when(wait) {
-      color: getCssVar('text-color', 'placeholder');
-      border-color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
+      border-color: getCssVar('text-placeholder-color');
     }
 
     @include when(success) {
@@ -98,7 +98,7 @@
   @include e(line) {
     position: absolute;
     border-color: inherit;
-    background-color: getCssVar('text-color', 'placeholder');
+    background-color: getCssVar('text-placeholder-color');
   }
 
   @include e(line-inner) {
@@ -123,11 +123,11 @@
 
     @include when(process) {
       font-weight: bold;
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
     }
 
     @include when(wait) {
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
     }
 
     @include when(success) {
@@ -151,11 +151,11 @@
     font-weight: normal;
 
     @include when(process) {
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
     }
 
     @include when(wait) {
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
     }
 
     @include when(success) {
@@ -293,7 +293,7 @@
         position: absolute;
         height: 15px;
         width: 1px;
-        background: getCssVar('text-color', 'placeholder');
+        background: getCssVar('text-placeholder-color');
       }
 
       &::before {