vft 0.0.47 → 0.0.50

package/theme-style/src/form.scss

@@ -0,0 +1,241 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$form-item-margin-bottom: () !default;
+$form-item-margin-bottom: map.merge(
+  (
+    'large': 22px,
+    'default': 18px,
+    'small': 18px
+  ),
+  $form-item-margin-bottom
+);
+
+$form-item-line-height: () !default;
+$form-item-line-height: map.merge(
+  (
+    'large': 40px,
+    'default': 32px,
+    'small': 24px
+  ),
+  $form-item-line-height
+);
+
+$form-item-error-padding-top: () !default;
+$form-item-error-padding-top: map.merge(
+  (
+    'large': 4px,
+    'default': 2px,
+    'small': 2px
+  ),
+  $form-item-error-padding-top
+);
+
+$form-item-label-top-line-height: () !default;
+$form-item-label-top-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px
+  ),
+  $form-item-label-top-line-height
+);
+
+$form-item-label-top-margin-bottom: () !default;
+$form-item-label-top-margin-bottom: map.merge(
+  (
+    'large': 12px,
+    'default': 8px,
+    'small': 4px
+  ),
+  $form-item-label-top-margin-bottom
+);
+
+@include b(form) {
+  @include set-component-css-var('form', $form);
+
+  @include m(label-left) {
+    .#{$namespace}-form-item__label {
+      justify-content: flex-start;
+    }
+  }
+  @include m(label-top) {
+    .#{$namespace}-form-item {
+      display: block;
+
+      .#{$namespace}-form-item__label {
+        display: block;
+        height: auto;
+        text-align: left;
+        margin-bottom: #{map.get($form-item-label-top-margin-bottom, 'default')};
+        line-height: #{map.get($form-item-label-top-line-height, 'default')};
+      }
+    }
+  }
+  @include m(inline) {
+    .#{$namespace}-form-item {
+      display: inline-flex;
+      vertical-align: middle;
+      margin-right: 32px;
+    }
+
+    &.#{$namespace}-form--label-top {
+      display: flex;
+      flex-wrap: wrap;
+
+      .#{$namespace}-form-item {
+        display: block;
+      }
+    }
+  }
+
+  @each $size in (large, default, small) {
+    @include m($size) {
+      &.#{$namespace}-form--label-top {
+        .#{$namespace}-form-item {
+          .#{$namespace}-form-item__label {
+            margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
+            line-height: #{map.get($form-item-label-top-line-height, $size)};
+          }
+        }
+      }
+    }
+  }
+}
+
+@include b(form-item) {
+  display: flex;
+  --font-size: #{map.get($input-font-size, 'default')};
+  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
+
+  .#{$namespace}-form-item {
+    margin-bottom: 0;
+  }
+
+  .#{$namespace}-input__validateIcon {
+    display: none;
+  }
+
+  @each $size in (large, default, small) {
+    @include m($size) {
+      --font-size: #{map.get($input-font-size, $size)};
+      @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
+
+      margin-bottom: #{map.get($form-item-margin-bottom, $size)};
+
+      @include e(label) {
+        height: #{map.get($form-item-line-height, $size)};
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(content) {
+        line-height: #{map.get($form-item-line-height, $size)};
+      }
+      @include e(error) {
+        padding-top: #{map.get($form-item-error-padding-top, $size)};
+      }
+    }
+  }
+
+  @include e(label-wrap) {
+    display: flex;
+  }
+
+  @include e(label) {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    flex: 0 0 auto;
+    font-size: getCssVar('form-label-font-size');
+    color: getCssVar('text', 'regular-color');
+
+    height: #{map.get($form-item-line-height, 'default')};
+    line-height: #{map.get($form-item-line-height, 'default')};
+
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+  @include e(content) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1;
+    line-height: #{map.get($form-item-line-height, 'default')};
+    position: relative;
+    font-size: var(--font-size);
+    min-width: 0;
+
+    .#{$namespace}-input-group {
+      vertical-align: top;
+    }
+  }
+  @include e(error) {
+    color: getCssVar('danger-color');
+    font-size: 12px;
+    line-height: 1;
+    padding-top: #{map.get($form-item-error-padding-top, 'default')};
+    position: absolute;
+    top: 100%;
+    left: 0;
+
+    @include m(inline) {
+      position: relative;
+      top: auto;
+      left: auto;
+      display: inline-block;
+      margin-left: 10px;
+    }
+  }
+
+  @include when(required) {
+    @include pseudo('not(.is-no-asterisk)') {
+      &.asterisk-left {
+        > .#{$namespace}-form-item__label:before,
+        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
+          content: '*';
+          color: getCssVar('danger-color');
+          margin-right: 4px;
+        }
+      }
+      &.asterisk-right {
+        > .#{$namespace}-form-item__label:after,
+        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:after {
+          content: '*';
+          color: getCssVar('danger-color');
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+
+  @include when(error) {
+    .#{$namespace}-select-v2__wrapper,
+    .#{$namespace}-textarea__inner {
+      &,
+      &:focus {
+        border: 1px solid getCssVar('danger-color');
+      }
+    }
+    .#{$namespace}-input__wrapper {
+      border: 1px solid getCssVar('danger-color');
+    }
+    .#{$namespace}-input-group__append,
+    .#{$namespace}-input-group__prepend {
+      .#{$namespace}-input__wrapper {
+        border: 1px solid transparent;
+      }
+    }
+    .#{$namespace}-input__validateIcon {
+      color: getCssVar('danger-color');
+    }
+  }
+
+  @include m(feedback) {
+    .#{$namespace}-input__validateIcon {
+      display: inline-flex;
+    }
+  }
+}

package/theme-style/src/header-layout.scss

@@ -11,7 +11,6 @@ $name: header-layout;
 
 @include b($name) {
   height: getCompCssVar('height');
-  color: getCompCssVar('color');
   background-color: getCompCssVar('bg-color');
   border-bottom: getCompCssVar('border-bottom');
   box-sizing: border-box;
@@ -31,8 +30,5 @@ $name: header-layout;
       height: 100%;
       align-items: center;
     }
-
-    //@include e(right) {
-    //}
   }
 }

package/theme-style/src/index.scss

@@ -40,6 +40,31 @@
 @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';
 // md comp
 @use './md-comment.scss';
 @use './md-tabs.scss';

package/theme-style/src/input.scss

@@ -160,11 +160,6 @@ $name: input;
   }
 
   & .#{$namespace}-input__icon {
-    height: inherit;
-    line-height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     transition: all getCssVar('transition-duration');
     margin-left: 8px;
   }

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

@@ -1,8 +1,7 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 @use 'common/transition';
-
-
+@use 'md/pswp' as *;
 
 $name: md-container;
 
@@ -37,7 +36,6 @@ $name: md-container;
   // 任务列表
   @import 'md/tasklist';
   @import 'md/figure';
-  @import 'md/pswp';
 
   -webkit-font-smoothing: antialiased;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", STHeiti, "Microsoft YaHei", SimSun, sans-serif;

package/theme-style/src/menu.scss

@@ -33,6 +33,7 @@ $name: menu;
   }
 
   i {
+    flex-shrink: 0;
     margin-right: getCompCssVar('icon-mr');;
   }
 
@@ -58,7 +59,8 @@ $name: menu;
 }
 
 @include b(menu) {
-  border-right: solid 1px getCompCssVar('border-color');
+  border: getCompCssVar('border');
+  border-right: getCompCssVar('border-right');
   list-style: none;
   position: relative;
   margin: 0;

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

@@ -0,0 +1,167 @@
+@use 'sass:map';
+
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
+@use '../common/var' as *;
+
+@mixin button-plain($type) {
+  $button-color-types: (
+    '': (
+      'text-color': (
+        $type,
+        'color',
+      ),
+      'bg-color': (
+        $type,
+        'color',
+        'light-9',
+      ),
+      'border-color': (
+        $type,
+        'color',
+        'light-5',
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        $type,
+        'color',
+      ),
+      'border-color': (
+        $type,
+        'color',
+      ),
+    ),
+    'active': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+    ),
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
+  &.is-disabled {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: getCssVar($type, 'color', 'light-5');
+      background-color: getCssVar($type, 'color', 'light-9');
+      border-color: getCssVar($type, 'color', 'light-8');
+    }
+  }
+}
+
+@mixin button-variant($type) {
+  $button-color-types: (
+    '': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        $type,
+        'color',
+      ),
+      'border-color': (
+        $type,
+        'color',
+      ),
+      'outline-color': (
+        $type,
+        'color',
+        'light-5',
+      ),
+      'active-color': (
+        $type,
+        'color',
+        'dark-2',
+      ),
+    ),
+    'hover': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'link-text-color': (
+        $type,
+        'color',
+        'light-5',
+      ),
+      'bg-color': (
+        $type,
+        'color',
+        'light-3',
+      ),
+      'border-color': (
+        $type,
+        'color',
+        'light-3',
+      ),
+    ),
+    'active': (
+      'bg-color': (
+        $type,
+        'color',
+        'dark-2',
+      ),
+      'border-color': (
+        $type,
+        'color',
+        'dark-2',
+      ),
+    ),
+    'disabled': (
+      'text-color': (
+        'color',
+        'white',
+      ),
+      'bg-color': (
+        $type,
+        'color',
+        'light-5',
+      ),
+      'border-color': (
+        $type,
+        'color',
+        'light-5',
+      ),
+    ),
+  );
+
+  @each $type, $typeMap in $button-color-types {
+    @each $typeColor, $list in $typeMap {
+      @include css-var-from-global(('button', $type, $typeColor), $list);
+    }
+  }
+
+  &.is-plain,
+  &.is-text,
+  &.is-link {
+    @include button-plain($type);
+  }
+}
+
+@mixin button-size(
+  $padding-vertical,
+  $padding-horizontal,
+  $font-size,
+  $border-radius
+) {
+  padding: $padding-vertical $padding-horizontal;
+  font-size: $font-size;
+  border-radius: $border-radius;
+  &.is-round {
+    padding: $padding-vertical $padding-horizontal;
+  }
+}

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

@@ -198,6 +198,15 @@
   }
 }
 
+@mixin inset-input-border($color, $important: false) {
+  @if $important == true {
+    box-shadow: 0 0 0 1px $color inset !important;
+  } @else {
+    box-shadow: 0 0 0 1px $color inset;
+  }
+}
+
+
 // dark
 @mixin dark($block) {
   html.dark {
@@ -207,7 +216,7 @@
   }
 }
 
-@mixin line-clamp($number, $inline: false) {
+@mixin line-clamp($number: 1, $inline: false) {
   overflow: hidden;
   @if $inline {
     // noinspection CssInvalidPropertyValue
@@ -261,3 +270,19 @@
   background: transparent;
   cursor: pointer;
 }
+
+@mixin utils-clearfix {
+  $selector: &;
+
+  @at-root {
+    #{$selector}::before,
+    #{$selector}::after {
+      display: table;
+      content: '';
+    }
+
+    #{$selector}::after {
+      clear: both;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@include b(select-group) {
+  $gap: 20px;
+
+  margin: 0;
+  padding: 0;
+
+  @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');
+    }
+  }
+
+  @include e(title) {
+    padding-left: $gap;
+    font-size: map.get($select-group, 'font-size');
+    color: map.get($select-group, 'text-color');
+    line-height: map.get($select-group, 'height');
+  }
+
+  & .#{$namespace}-select-dropdown__item {
+    padding-left: $gap;
+  }
+}

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

@@ -0,0 +1,70 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(select-dropdown) {
+  @include e(option-item) {
+    font-size: getCssVar('select-font-size');
+    // 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');
+    line-height: map.get($select-option, 'height');
+    box-sizing: border-box;
+    cursor: pointer;
+
+    @include when(disabled) {
+      color: map.get($select-option, 'disabled-color');
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: getCssVar('bg-color');
+      }
+    }
+
+    @include when(selected) {
+      background-color: map.get($select-option, 'hover-background');
+      font-weight: 700;
+
+      &:not(.is-multiple) {
+        color: map.get($select-option, 'selected-text-color');
+      }
+    }
+
+    &.hover {
+      background-color: map.get($select-option, 'hover-background') !important;
+    }
+
+    &:hover {
+      background-color: map.get($select-option, 'hover-background');
+    }
+  }
+
+  @include when(multiple) {
+    .#{$namespace}-select-dropdown__option-item {
+      &.is-selected {
+        color: map.get($select-option, 'selected-text-color');
+        background-color: map.get($select-dropdown, 'bg-color');
+
+        & .#{$namespace}-icon {
+          position: absolute;
+          right: 20px;
+          top: 0;
+          height: inherit;
+          font-size: 12px;
+
+          svg {
+            height: inherit;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+}