vft 0.0.48 → 0.0.50

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

@@ -306,6 +306,250 @@ $transition-function: map.merge(
   $transition-function
 );
 
+$button: () !default;
+$button: map.merge(
+    (
+      'font-weight': getCssVar('font-weight-primary'),
+      'border-color': getCssVar('border-color'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'text-color': getCssVar('text', 'regular-color'),
+      'disabled-text-color': getCssVar('text-disabled-color'),
+      'disabled-bg-color': getCssVar('fill-color', 'blank'),
+      'disabled-border-color': getCssVar('border-color-light'),
+      'divide-border-color': rgba($color-white, 0.5),
+      'hover-text-color': getCssVar('primary-color'),
+      'hover-bg-color': getCssVar('primary-color', 'light-9'),
+      'hover-border-color': getCssVar('primary-color-light-7'),
+      'active-text-color': getCssVar('button-hover-text-color'),
+      'active-border-color': getCssVar('primary-color'),
+      'active-bg-color': getCssVar('button', 'hover-bg-color'),
+      'outline-color': getCssVar('primary-color', 'light-5'),
+      'hover-link-text-color': getCssVar('info-color'),
+      'active-color': getCssVar('text-primary-color'),
+    ),
+    $button
+);
+
+$button-border-width: $border-width !default;
+
+// need mix, so do not use css var
+$button-hover-tint-percent: 20%;
+$button-active-shade-percent: 10%;
+
+$button-border-color: () !default;
+$button-bg-color: () !default;
+$button-text-color: () !default;
+
+@each $type in $types {
+  $button-border-color: map.merge(
+      (
+        $type: map.get($colors, $type, 'base'),
+      ),
+      $button-border-color
+  ) !global;
+
+  $button-bg-color: map.merge(
+      (
+        $type: map.get($colors, $type, 'base'),
+      ),
+      $button-bg-color
+  ) !global;
+}
+
+$button-font-size: () !default;
+$button-font-size: map.merge(
+    (
+      'large': getCssVar('font-size', 'base'),
+      'default': getCssVar('font-size', 'base'),
+      'small': 12px,
+    ),
+    $button-font-size
+);
+
+$button-border-radius: () !default;
+$button-border-radius: map.merge(
+    (
+      'large': getCssVar('border-radius', 'base'),
+      'default': getCssVar('border-radius', 'base'),
+      'small': calc(#{getCssVar('border-radius', 'base')} - 1px),
+    ),
+    $button-border-radius
+);
+
+$button-padding-vertical: () !default;
+$button-padding-vertical: map.merge(
+    (
+      'large': 13px,
+      'default': 9px,
+      'small': 6px,
+    ),
+    $button-padding-vertical
+);
+
+$button-padding-horizontal: () !default;
+$button-padding-horizontal: map.merge(
+    (
+      'large': 20px,
+      'default': 16px,
+      'small': 12px,
+    ),
+    $button-padding-horizontal
+);
+
+$checkbox: () !default;
+$checkbox: map.merge(
+    (
+      'font-size': 14px,
+      'font-weight': getCssVar('font-weight-primary'),
+      'text-color': getCssVar('text-regular-color'),
+      'input-height': 14px,
+      'input-width': 14px,
+      'border-radius': getCssVar('border-radius-small'),
+      'bg-color': getCssVar('fill-color', 'blank'),
+      'input-border': getCssVar('border'),
+      'disabled-border-color': getCssVar('border-color'),
+      'disabled-input-fill': getCssVar('fill-color', 'light'),
+      'disabled-icon-color': getCssVar('text-placeholder-color'),
+      'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
+      'disabled-checked-input-border-color': getCssVar('border-color'),
+      'disabled-checked-icon-color': getCssVar('text-placeholder-color'),
+      'checked-text-color': getCssVar('primary-color'),
+      'checked-input-border-color': getCssVar('primary-color'),
+      'checked-bg-color': getCssVar('primary-color'),
+      'checked-icon-color': getCssVar('color', 'white'),
+      'input-border-color-hover': getCssVar('primary-color'),
+    ),
+    $checkbox
+);
+
+$checkbox-button: () !default;
+$checkbox-button: map.merge(
+    (
+      'checked-bg-color': getCssVar('primary-color'),
+      'checked-text-color': getCssVar('color-white'),
+      'checked-border-color': getCssVar('primary-color'),
+    ),
+    $checkbox-button
+);
+
+$checkbox-bordered-padding-left: () !default;
+$checkbox-bordered-padding-left: map.merge(
+    (
+      'large': 12px,
+      'default': 10px,
+      'small': 8px,
+    ),
+    $checkbox-bordered-padding-left
+);
+
+$checkbox-bordered-padding-right: () !default;
+$checkbox-bordered-padding-right: map.merge(
+    (
+      'large': 20px,
+      'default': 16px,
+      'small': 12px,
+    ),
+    $checkbox-bordered-padding-right
+);
+
+
+$radio: () !default;
+$radio: map.merge(
+    (
+      'font-size': getCssVar('font-size-base'),
+      'text-color': getCssVar('text-regular-color'),
+      'font-weight': getCssVar('font-weight-primary'),
+      'input-height': 14px,
+      'input-width': 14px,
+      'input-border-radius': getCssVar('border-radius-circle'),
+      'input-bg-color': getCssVar('fill-color', 'blank'),
+      'input-border': getCssVar('border'),
+      'input-border-color': getCssVar('border-color'),
+      'input-border-color-hover': getCssVar('primary-color'),
+    ),
+    $radio
+);
+
+$radio-height: () !default;
+$radio-height: map.merge($common-component-size, $radio-height);
+
+$radio-button: () !default;
+$radio-button: map.merge(
+    (
+      'checked-bg-color': getCssVar('primary-color'),
+      'checked-text-color': getCssVar('color-white'),
+      'checked-border-color': getCssVar('primary-color'),
+      'disabled-checked-fill': getCssVar('border-color-extra-light'),
+    ),
+    $radio-button
+);
+
+$radio-disabled: () !default;
+$radio-disabled: map.merge(
+    (
+      'input-border-color': getCssVar('disabled-border-color'),
+      'input-fill': getCssVar('disabled-bg-color'),
+      'icon-color': getCssVar('disabled-bg-color'),
+      'checked-input-border-color': getCssVar('disabled-border-color'),
+      'checked-input-fill': getCssVar('disabled-bg-color'),
+      'checked-icon-color': getCssVar('text-placeholder-color'),
+    ),
+    $radio-disabled
+);
+
+$radio-checked: () !default;
+$radio-checked: map.merge(
+    (
+      'text-color': getCssVar('primary-color'),
+      'input-border-color': getCssVar('primary-color'),
+      'icon-color': getCssVar('primary-color'),
+    ),
+    $radio-checked
+);
+
+$radio-bordered-input-height: () !default;
+$radio-bordered-input-height: map.merge(
+    (
+      'large': 14px,
+      'default': 12px,
+      'small': 12px,
+    ),
+    $radio-bordered-input-height
+);
+
+$radio-bordered-input-width: () !default;
+$radio-bordered-input-width: map.merge(
+    (
+      'large': 14px,
+      'default': 12px,
+      'small': 12px,
+    ),
+    $radio-bordered-input-width
+);
+
+// Switch
+// css3 var in packages/theme-chalk/src/switch.scss
+$switch: () !default;
+$switch: map.merge(
+    (
+      'on-color': getCssVar('primary-color'),
+      'off-color': getCssVar('border-color'),
+    ),
+    $switch
+);
+
+// Dropdown
+$dropdown: () !default;
+$dropdown: map.merge(
+    (
+      'menu-box-shadow': getCssVar('box-shadow-light'),
+      'menuItem-hover-fill': getCssVar('primary-color-light-9'),
+      'menuItem-hover-color': getCssVar('primary-color'),
+      'menu-index': 10,
+    ),
+    $dropdown
+);
+
 $header-layout: () !default;
 $header-layout: map-merge(
   (

package/theme-style/src/dropdown.scss

@@ -0,0 +1,207 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$dropdown-item-line-height: () !default;
+$dropdown-item-line-height: map.merge(
+  (
+    'large': 22px,
+    'default': 22px,
+    'small': 20px,
+  ),
+  $dropdown-item-line-height
+);
+
+$dropdown-item-padding: () !default;
+$dropdown-item-padding: map.merge(
+  (
+    'large': 7px 20px,
+    'default': 5px 16px,
+    'small': 2px 12px,
+  ),
+  $dropdown-item-padding
+);
+
+$dropdown-item-divided-margin: () !default;
+$dropdown-item-divided-margin: map.merge(
+  (
+    'large': 8px 0,
+    'default': 6px 0,
+    'small': 4px 0,
+  ),
+  $dropdown-item-divided-margin
+);
+
+$dropdown-caret-width: () !default;
+$dropdown-caret-width: map.merge($common-component-size, $dropdown-caret-width);
+
+$dropdown-divider-width: 1px !default;
+
+@include b(dropdown) {
+  @include set-component-css-var('dropdown', $dropdown);
+
+  display: inline-flex;
+  position: relative;
+  color: getCssVar('text', 'regular-color');
+  font-size: getCssVar('font-size', 'base');
+  line-height: 1;
+  vertical-align: top;
+
+  &.is-disabled {
+    color: getCssVar('text', 'placeholder-color');
+    cursor: not-allowed;
+  }
+
+  @include e(popper) {
+    @include set-component-css-var('dropdown', $dropdown);
+
+    // using attributes selector to override
+
+    @include picker-popper(
+      getCssVar('bg-color', 'overlay'),
+      1px solid getCssVar('border-color-light'),
+      getCssVar('dropdown-menu-box-shadow')
+    );
+
+    .#{$namespace}-dropdown-menu {
+      border: none;
+    }
+
+    #{& + '-selfdefine'} {
+      outline: none;
+    }
+
+    @include b(scrollbar__bar) {
+      z-index: calc(#{getCssVar('dropdown', 'menu-index')} + 1);
+    }
+
+    @include b(dropdown__list) {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  & .#{$namespace}-dropdown__caret-button {
+    padding-left: 0;
+    padding-right: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: map.get($dropdown-caret-width, 'default');
+    border-left: none;
+
+    > span {
+      display: inline-flex;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 1px;
+      top: -1px;
+      bottom: -1px;
+      left: 0;
+      background: getCssVar('overlay-color', 'lighter');
+    }
+
+    &.#{$namespace}-button::before {
+      background: getCssVar('border-color');
+      opacity: 0.5;
+    }
+
+    & .#{$namespace}-dropdown__icon {
+      font-size: inherit;
+      padding-left: 0;
+    }
+  }
+
+  .#{$namespace}-dropdown-selfdefine {
+    // 自定义
+    outline: none;
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      .#{$namespace}-dropdown__caret-button {
+        width: map.get($dropdown-caret-width, $size);
+      }
+    }
+  }
+}
+
+$dropdown-menu-padding-vertical: () !default;
+$dropdown-menu-padding-vertical: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $dropdown-menu-padding-vertical
+);
+
+@include b(dropdown-menu) {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: getCssVar('dropdown-menu-index');
+  padding: map.get($dropdown-menu-padding-vertical, 'default')-$border-width 0;
+  margin: 0;
+  background-color: getCssVar('bg-color', 'overlay');
+  border: none;
+  border-radius: getCssVar('border-radius-base');
+  box-shadow: none;
+  list-style: none;
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: map.get($dropdown-item-line-height, 'default');
+    padding: map.get($dropdown-item-padding, 'default');
+    margin: 0;
+    font-size: getCssVar('font-size', 'base');
+    color: getCssVar('text', 'regular-color');
+    cursor: pointer;
+    outline: none;
+    &:not(.is-disabled):focus {
+      background-color: getCssVar('dropdown-menuItem-hover-fill');
+      color: getCssVar('dropdown-menuItem-hover-color');
+    }
+
+    i {
+      margin-right: 5px;
+    }
+
+    @include m(divided) {
+      margin: map.get($dropdown-item-divided-margin, 'default');
+      border-top: 1px solid getCssVar('border-color-lighter');
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+      color: getCssVar('text-disabled-color');
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      padding: map.get($dropdown-menu-padding-vertical, $size)-$border-width 0;
+
+      @include e(item) {
+        padding: map.get($dropdown-item-padding, $size);
+        line-height: map.get($dropdown-item-line-height, $size);
+        font-size: map.get($input-font-size, $size);
+
+        @include m(divided) {
+          margin: map.get($dropdown-item-divided-margin, $size);
+        }
+      }
+    }
+  }
+}

package/theme-style/src/form.scss

@@ -216,16 +216,16 @@ $form-item-label-top-margin-bottom: map.merge(
     .#{$namespace}-textarea__inner {
       &,
       &:focus {
-        box-shadow: 0 0 0 1px getCssVar('danger-color') inset;
+        border: 1px solid getCssVar('danger-color');
       }
     }
     .#{$namespace}-input__wrapper {
-      box-shadow: 0 0 0 1px getCssVar('danger-color') inset;
+      border: 1px solid getCssVar('danger-color');
     }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {
       .#{$namespace}-input__wrapper {
-        box-shadow: 0 0 0 1px transparent inset;
+        border: 1px solid transparent;
       }
     }
     .#{$namespace}-input__validateIcon {

package/theme-style/src/index.scss

@@ -42,6 +42,29 @@
 @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/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;
+  }
+}