vft 0.0.70 → 0.0.72

package/theme-style/src/index.scss

@@ -1,79 +1,126 @@
-@use './base.scss';
+@use './base';
 // component styles
-@use './divider.scss';
-@use './avatar.scss';
-@use './back-top.scss';
-@use './empty.scss';
-@use './result.scss';
-@use './tabs.scss';
-@use './tab-pane.scss';
-@use './menu.scss';
-@use './menu-item.scss';
-@use './menu-item-group.scss';
-@use './sub-menu.scss';
-@use './popper.scss';
-@use './tooltip.scss';
-@use './popover.scss';
-@use './exception.scss';
-@use './footer-layout.scss';
-@use './header-layout.scss';
-@use './iframe-layout.scss';
-@use './logo.scss';
-@use './descriptions.scss';
-@use './descriptions-item.scss';
-@use './config-provider.scss';
-@use './full-screen.scss';
-@use './icon-text.scss';
-@use './image.scss';
-@use './image-viewer.scss';
-@use './input.scss';
-@use './link.scss';
-@use './pagination.scss';
-@use './tag.scss';
-@use './side-menu.scss';
-@use './qrcode.scss';
-@use './overlay.scss';
-@use './clamp.scss';
-@use './clamp-toggle.scss';
-@use './message.scss';
-@use './loading.scss';
-@use './page-wrapper.scss';
-@use './router-view-content.scss';
-@use './context-menu.scss';
-@use './search.scss';
-@use './form.scss';
-@use './form-item.scss';
-@use './button.scss';
-@use './button-group.scss';
-@use './checkbox.scss';
-@use './checkbox-button.scss';
-@use './checkbox-group.scss';
-@use './radio.scss';
-@use './radio-button.scss';
-@use './radio-group.scss';
-@use './switch.scss';
-@use './color-picker.scss';
-@use './scrollbar.scss';
-@use './dropdown.scss';
-@use './dropdown-item.scss';
-@use './dropdown-menu.scss';
-@use './select-dropdown-v2.scss';
-@use './select-dropdown.scss';
-@use './select.scss';
-@use './select-v2.scss';
-@use './option-group.scss';
-@use './option-item.scss';
-@use './virtual-list.scss';
-@use './verify-code.scss';
-@use './table.scss';
-@use './dialog.scss';
-@use './alert.scss';
-@use './list-cell.scss';
+@use './divider';
+@use './avatar';
+@use './back-top';
+@use './empty';
+@use './result';
+@use './tabs';
+@use './tab-pane';
+@use './menu';
+@use './menu-item';
+@use './menu-item-group';
+@use './sub-menu';
+@use './popper';
+@use './tooltip';
+@use './popover';
+@use './exception';
+@use './footer-layout';
+@use './header-layout';
+@use './iframe-layout';
+@use './logo';
+@use './descriptions';
+@use './descriptions-item';
+@use './config-provider';
+@use './full-screen';
+@use './icon-text';
+@use './image';
+@use './image-viewer';
+@use './input';
+@use './link';
+@use './pagination';
+@use './tag';
+@use './side-menu';
+@use './qrcode';
+@use './overlay';
+@use './clamp';
+@use './clamp-toggle';
+@use './message';
+@use './loading';
+@use './page-wrapper';
+@use './router-view-content';
+@use './context-menu';
+@use './search';
+@use './form';
+@use './form-item';
+@use './button';
+@use './button-group';
+@use './checkbox';
+@use './checkbox-button';
+@use './checkbox-group';
+@use './radio';
+@use './radio-button';
+@use './radio-group';
+@use './switch';
+@use './color-picker';
+@use './scrollbar';
+@use './dropdown';
+@use './dropdown-item';
+@use './dropdown-menu';
+@use './select-dropdown-v2';
+@use './select-dropdown';
+@use './select';
+@use './select-v2';
+@use './option-group';
+@use './option-item';
+@use './virtual-list';
+@use './verify-code';
+@use './table';
+@use './dialog';
+@use './alert';
+@use './list-cell';
 @use './date-time-select';
+@use './row';
+@use './col';
+@use './horizontal-menu';
+@use './affix';
+@use './aside';
+@use './autocomplete';
+@use './badge';
+@use './breadcrumb';
+@use './breadcrumb-item';
+@use './calendar';
+@use './card';
+@use './carousel';
+@use './carousel-item';
+@use './cascader';
+@use './cascader-panel';
+@use './check-tag';
+@use './collapse';
+@use './collapse-item';
+@use './date-picker';
+@use './display';
+@use './drawer';
+@use './infinite-scroll';
+@use './input-number';
+@use './message-box';
+@use './notification';
+@use './option';
+@use './progress';
+@use './rate';
+@use './reset';
+@use './slider';
+@use './space';
+@use './spinner';
+@use './statistic';
+@use './step';
+@use './steps';
+@use './time-picker';
+@use './time-select';
+@use './timeline';
+@use './timeline-item';
+@use './transfer';
+@use './tree';
+@use './tree-select';
+@use './upload';
+@use './container';
+@use './header';
+@use './footer';
+@use './main';
 // md comp
-@use './md-comment.scss';
-@use './md-tabs.scss';
-@use './md-vue-playground.scss';
-@use './md-code-demo.scss';
-@use './md-code-tabs.scss';
-@use './md-container.scss';
+@use './md-comment';
+@use './md-tabs';
+@use './md-vue-playground';
+@use './md-code-demo';
+@use './md-code-tabs';
+@use './md-container';

package/theme-style/src/input-number.scss

@@ -0,0 +1,175 @@
+@use 'sass:math';
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(input-number) {
+  position: relative;
+  display: inline-flex;
+  width: map.get($input-number-width, 'default');
+  line-height: #{map.get($input-height, 'default') - 2};
+
+  .#{$namespace}-input {
+    &__wrapper {
+      padding-left: #{map.get($input-height, 'default') + 10};
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+
+    &__inner {
+      -webkit-appearance: none;
+      -moz-appearance: textfield;
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
+      }
+      text-align: center;
+      line-height: 1;
+    }
+  }
+
+  @include e((increase, decrease)) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+
+    position: absolute;
+    z-index: 1;
+    top: 1px;
+    bottom: 1px;
+
+    width: map.get($input-height, 'default');
+    background: getCssVar('fill-color', 'light');
+    color: getCssVar('text-color', 'regular');
+    cursor: pointer;
+    font-size: 13px;
+    user-select: none;
+
+    &:hover {
+      color: getCssVar('primary-color');
+
+      & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input_wrapper {
+        box-shadow: 0 0 0 1px
+          var(
+            #{getCssVarName('input', 'focus-border-color')},
+            map.get($input, 'focus-border-color')
+          )
+          inset;
+      }
+    }
+
+    &.is-disabled {
+      color: getCssVar('disabled-text-color');
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(increase) {
+    right: 1px;
+    border-radius: 0 getCssVar('border-radius-base')
+      getCssVar('border-radius-base') 0;
+    border-left: getCssVar('border');
+  }
+
+  @include e(decrease) {
+    left: 1px;
+    border-radius: getCssVar('border-radius-base') 0 0
+      getCssVar('border-radius-base');
+    border-right: getCssVar('border');
+  }
+
+  @include when(disabled) {
+    @include e((increase, decrease)) {
+      border-color: getCssVar('disabled-border-color');
+      color: getCssVar('disabled-border-color');
+
+      &:hover {
+        color: getCssVar('disabled-border-color');
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      width: map.get($input-number-width, $size);
+      line-height: #{map.get($input-height, $size) - 2};
+
+      @include e((increase, decrease)) {
+        width: map.get($input-height, $size);
+        font-size: map.get($input-font-size, $size);
+      }
+
+      .#{$namespace}-input__wrapper {
+        padding-left: #{map.get($input-height, $size) + 7};
+        padding-right: #{map.get($input-height, $size) + 7};
+      }
+    }
+  }
+
+  @include m(small) {
+    @include e((increase, decrease)) {
+      [class*='#{$namespace}-icon'] {
+        transform: scale(0.9);
+      }
+    }
+  }
+
+  @include when(without-controls) {
+    .#{$namespace}-input__wrapper {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  @include when(controls-right) {
+    .#{$namespace}-input__wrapper {
+      padding-left: 15px;
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+
+    @include e((increase, decrease)) {
+      @include set-css-var-value(
+        ('input', 'number-controls-height'),
+        math.div(map.get($input-height, 'default') - 2, 2)
+      );
+
+      height: getCssVar('input-number-controls-height');
+      line-height: getCssVar('input-number-controls-height');
+
+      [class*='#{$namespace}-icon'] {
+        transform: scale(0.8);
+      }
+    }
+
+    @include e(increase) {
+      bottom: auto;
+      left: auto;
+      border-radius: 0 getCssVar('border-radius-base') 0 0;
+      border-bottom: getCssVar('border');
+    }
+
+    @include e(decrease) {
+      right: 1px;
+      top: auto;
+      left: auto;
+      border-right: none;
+      border-left: getCssVar('border');
+      border-radius: 0 0 getCssVar('border-radius-base') 0;
+    }
+
+    @each $size in (large, small) {
+      &[class*='#{$size}'] {
+        [class*='increase'],
+        [class*='decrease'] {
+          @include set-css-var-value(
+            ('input', 'number-controls-height'),
+            math.div(map.get($input-height, $size) - 2, 2)
+          );
+        }
+      }
+    }
+  }
+}

package/theme-style/src/input.scss

@@ -16,7 +16,7 @@ $name: input;
   position: relative;
   font-size: getCssVar('font-size', 'base');
   display: inline-flex;
-  width: getCompCssVar('width');;
+  width: getCompCssVar('width');
   line-height: getCssVar('input-height');
   box-sizing: border-box;
   vertical-align: middle;
@@ -59,8 +59,9 @@ $name: input;
     background-color: var(#{getCssVarName('input-bg-color')},map-get($input, 'bg-color'));
     background-image: none;
     border-radius: getCssVarWithDefault('input-border-radius',map-get($input, 'border-radius'));
-
     border: 1px solid getCompCssVar('border-color');
+    transition: getCssVar('transition-all');
+
     &:hover {
       border: 1px solid getCompCssVar('hover-border-color');
     }
@@ -398,8 +399,6 @@ $name: input;
     line-height: 1.5;
     box-sizing: border-box;
     width: 100%;
-    font-size: inherit;
-    font-family: inherit;
     color: var(
         #{getCssVarName('input-text-color')},
         map-get($input, 'text-color')
@@ -468,5 +467,3 @@ $name: input;
     }
   }
 }
-
-

package/theme-style/src/list-cell.scss

@@ -22,7 +22,7 @@ $name: list-cell;
     padding: getCompCssVar('padding');
 
     &:hover {
-      background-color: getCompCssVar('hover-bg-color');;
+      background-color: getCompCssVar('hover-bg-color');
     }
 
     @include when(active) {
@@ -31,7 +31,7 @@ $name: list-cell;
       }
       .#{$namespace}-list-cell--right {
         i {
-          color: getCompCssVar('active-color');;
+          color: getCompCssVar('active-color');
         }
       }
     }
@@ -43,7 +43,7 @@ $name: list-cell;
     justify-content: flex-start;
 
     i {
-      color: getCompCssVar('active-color');;
+      color: getCompCssVar('active-color');
     }
 
     @include e(text) {

package/theme-style/src/loading.scss

@@ -55,7 +55,7 @@ $name: loading;
   position: absolute;
 
   .#{$namespace}-loading-text {
-    color: getCompCssVar('color');;
+    color: getCompCssVar('color');
     margin: getCompCssVar('margin');
     font-size: getCompCssVar('text-size');
   }

package/theme-style/src/main.scss

@@ -0,0 +1,10 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(main) {
+  display: block;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+}

package/theme-style/src/md/code.scss

@@ -7,10 +7,9 @@
 
 // 代码块
 code {
-  font-family: Menlo, Monaco, Consolas, Courier New, monospace;
   padding: 0px 5px;
   color: #ff502c;
-  background-color: getCompCssVar('code-bg-color');;
+  background-color: getCompCssVar('code-bg-color');
   border-radius: 3px;
   font-size: 13.5px;
   word-break: break-word;
@@ -32,7 +31,7 @@ code {
     z-index: 2;
     width: getCompCssVar(line-numbers-width);
     height: 100%;
-    border-right: getCssVar('border');;
+    border-right: getCssVar('border');
     border-radius: 6px 0 0 6px;
     transition: border-color getCssVar(color-transition);
   }
@@ -94,7 +93,7 @@ code {
 
   .highlight-line {
     position: relative;
-    background: getCompCssVar('highlight-line-color');;
+    background: getCompCssVar('highlight-line-color');
     transition: background getCompCssVar('color-transition');
 
     &::before {
@@ -139,7 +138,6 @@ div[class*='language-'] {
     border-radius: 6px;
     line-height: 1.375;
     display: block;
-    font-family: monospace;
     white-space: pre;
     margin: 14px 0 14px 0px;
 
@@ -147,7 +145,6 @@ div[class*='language-'] {
       background: none;
       color: #383a42;
       padding: 0;
-      font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
       text-align: left;
       overflow-wrap: unset;
       white-space: pre;

package/theme-style/src/md/demo-block.scss

@@ -65,7 +65,7 @@
     }
 
     a {
-      color: getCompCssVar('primary-color');;
+      color: getCompCssVar('primary-color');
     }
   }
 
@@ -182,7 +182,7 @@
   }
 
   a {
-    color: getCompCssVar('primary-color');;
+    color: getCompCssVar('primary-color');
   }
 
   code {

package/theme-style/src/md/pswp.scss

@@ -6,13 +6,13 @@
   --pswp-root-z-index: 100000;
 
   --pswp-preloader-color: rgba(79, 79, 79, 0.4);
-  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+  --pswp-preloader-secondary-color: rgba(255, 255, 255, 0.9);
 
   /* defined via js:
   --pswp-transition-duration: 333ms; */
 
   --pswp-icon-color: #fff;
-  --pswp-icon-color-secondary: #4f4f4f;
+  --pswp-icon-secondary-color: #4f4f4f;
   --pswp-icon-stroke-color: #4f4f4f;
   --pswp-icon-stroke-width: 2px;
 
@@ -229,7 +229,7 @@ and show (for example fade in) when PhotoSwipe is opened
 
 .pswp__icn {
   fill: var(--pswp-icon-color);
-  color: var(--pswp-icon-color-secondary);
+  color: var(--pswp-icon-secondary-color);
 }
 
 .pswp__icn {
@@ -413,7 +413,7 @@ div.pswp__img--placeholder,
   font-size: 14px;
   line-height: 30px;
   color: var(--pswp-icon-color);
-  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+  text-shadow: 1px 1px 3px var(--pswp-icon-secondary-color);
   opacity: 0.85;
 }
 

package/theme-style/src/md/scroll-bar.scss

@@ -10,7 +10,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: getCompCssVar('primary-color');;
+  background: getCompCssVar('primary-color');
 
   &:active {
     background: #4abf8a;

package/theme-style/src/md/table.scss

@@ -9,7 +9,7 @@ table {
   border-collapse: collapse;
   overflow: hidden;
   margin: 16px 0;
-  box-shadow: getCssVar('box-shadow');;
+  box-shadow: getCssVar('box-shadow');
 
   thead {
     background-color: getCssVar('primary-color-light-7');
@@ -49,7 +49,7 @@ table {
     line-height: 22px;
     text-align: left;
     font-size: 14px;
-    border-bottom: getCssVar('border');;
+    border-bottom: getCssVar('border');
   }
 
   th {
@@ -59,6 +59,6 @@ table {
   em {
     font-style: normal;
     font-size: 14px;
-    color: getCssVar('danger-color');;
+    color: getCssVar('danger-color');
   }
 }

package/theme-style/src/md/toc.scss

@@ -132,18 +132,18 @@ $headings: (2, 3, 4, 5, 6);
 
     &:hover {
       > .toc-link {
-        color: getCompCssVar('primary-color');;
+        color: getCompCssVar('primary-color');
       }
     }
 
     &.active {
       > .toc-link {
-        color: getCompCssVar('primary-color');;
+        color: getCompCssVar('primary-color');
         font-weight: bold;
       }
 
       &::before {
-        background: getCompCssVar('primary-color');;
+        background: getCompCssVar('primary-color');
       }
     }
   }