vft 0.0.48 → 0.0.51

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

@@ -34,8 +34,6 @@ $colors: map.deep-merge(
   $colors
 );
 
-$nprogress-color: #409eff !default;
-
 $color-white: map.get($colors, "white") !default;
 $color-black: map.get($colors, "black") !default;
 $primary-color: getCssVar("primary-color") !default;
@@ -306,6 +304,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(
   (
@@ -877,3 +1119,38 @@ $form: map.merge(
     ),
     $form
 );
+
+// Dialog
+// css3 var in packages/theme-chalk/src/dialog.scss
+$dialog: () !default;
+$dialog: map.merge(
+    (
+      'width': 50%,
+      'margin-top': 15vh,
+      'bg-color': getCssVar('bg-color'),
+      'box-shadow': getCssVar('box-shadow'),
+      'title-font-size': getCssVar('font-size-large'),
+      'content-font-size': 14px,
+      'font-line-height': getCssVar('font-line-height-primary'),
+      'padding-primary': 20px,
+      'border-radius': getCssVar('border-radius-small'),
+    ),
+    $dialog
+);
+
+// Alert
+// css3 var in packages/theme-chalk/src/alert.scss
+$alert: () !default;
+$alert: map.merge(
+    (
+      'padding': 8px 16px,
+      'border-radius-base': getCssVar('border-radius-base'),
+      'title-font-size': 13px,
+      'description-font-size': 12px,
+      'close-font-size': 12px,
+      'close-customed-font-size': 13px,
+      'icon-size': 16px,
+      'icon-large-size': 28px,
+    ),
+    $alert
+);

package/theme-style/src/dialog.scss

@@ -0,0 +1,185 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$name: dialog;
+
+@include b($name) {
+  @include set-component-css-var('dialog', $dialog);
+
+  position: relative;
+  margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+  background: getCssVar('dialog', 'bg-color');
+  border-radius: getCssVar('dialog', 'border-radius');
+  box-shadow: getCssVar('dialog', 'box-shadow');
+  box-sizing: border-box;
+  width: var(#{getCssVarName('dialog-width')}, 50%);
+
+  &:focus {
+    outline: none !important;
+  }
+
+  @include when(align-center) {
+    margin: auto;
+  }
+
+  @include when(fullscreen) {
+    @include set-css-var-value('dialog-width', 100%);
+    @include set-css-var-value('dialog-margin-top', 0);
+
+    margin-bottom: 0;
+    height: 100%;
+    overflow: auto;
+  }
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: auto;
+    margin: 0;
+  }
+
+  @include when(draggable) {
+    @include e(header) {
+      cursor: move;
+      user-select: none;
+    }
+  }
+
+  @include e(header) {
+    padding: getCssVar('dialog', 'padding-primary');
+    padding-bottom: 10px;
+    margin-right: 16px;
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 6px;
+    right: 0;
+    padding: 0;
+    width: 54px;
+    height: 54px;
+    background: transparent;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: var(
+      #{getCssVarName('message-close-size')},
+      map.get($message, 'close-size')
+    );
+
+    .#{$namespace}-dialog__close {
+      color: getCssVar('color', 'info');
+      font-size: inherit;
+    }
+
+    &:focus,
+    &:hover {
+      .#{$namespace}-dialog__close {
+        color: getCssVar('color', 'primary');
+      }
+    }
+  }
+
+  @include e(title) {
+    line-height: getCssVar('dialog-font-line-height');
+    font-size: getCssVar('dialog-title-font-size');
+    color: getCssVar('text-color', 'primary');
+  }
+
+  @include e(body) {
+    padding: calc(#{getCssVar('dialog-padding-primary')} + 10px)
+      getCssVar('dialog-padding-primary');
+    color: getCssVar('text-color', 'regular');
+    font-size: getCssVar('dialog-content-font-size');
+  }
+
+  @include e(footer) {
+    padding: getCssVar('dialog-padding-primary');
+    padding-top: 10px;
+    text-align: right;
+    box-sizing: border-box;
+  }
+
+  // 内容居中布局
+  @include m(center) {
+    text-align: center;
+
+    @include e(body) {
+      text-align: initial;
+      padding: 25px calc(#{getCssVar('dialog-padding-primary')} + 5px) 30px;
+    }
+
+    @include e(footer) {
+      text-align: inherit;
+    }
+  }
+}
+
+.#{$namespace}-overlay-dialog {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+}
+
+.dialog-fade-enter-active {
+  animation: modal-fade-in getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-in getCssVar('transition-duration');
+  }
+}
+
+.dialog-fade-leave-active {
+  animation: modal-fade-out getCssVar('transition-duration');
+  .#{$namespace}-overlay-dialog {
+    animation: dialog-fade-out getCssVar('transition-duration');
+  }
+}
+
+@keyframes dialog-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}
+
+@keyframes modal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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 {