vxe-pc-ui 4.15.13 → 4.15.15

package/styles/components/button.scss

@@ -2,65 +2,33 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
+@use '../helpers/themeStatus.scss';
 
-$btnThemeList: (
-  (
-    name: "primary",
-    textColor: var(--vxe-ui-font-primary-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-font-primary-lighten-color),
-    btnDarkenColor: var(--vxe-ui-font-primary-darken-color),
-    btnDisabledColor: var(--vxe-ui-font-primary-disabled-color)
-  ),
-  (
-    name: "success",
-    textColor: var(--vxe-ui-status-success-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-success-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-success-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-success-disabled-color)
-  ),
-  (
-    name: "info",
-    textColor: var(--vxe-ui-status-info-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-info-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-info-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-info-disabled-color)
-  ),
-  (
-    name: "warning",
-    textColor: var(--vxe-ui-status-warning-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-warning-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-warning-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-warning-disabled-color)
-  ),
-  (
-    name: "danger",
-    textColor: var(--vxe-ui-status-danger-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-danger-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-danger-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-danger-disabled-color)
-  ),
-  (
-    name: "error",
-    textColor: var(--vxe-ui-status-error-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-error-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-error-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-error-disabled-color)
-  ),
-  (
-    name: "perfect",
-    textColor: var(--vxe-ui-table-header-background-color),
-    btnColor: var(--vxe-ui-font-color),
-    btnLightenColor: var(--vxe-ui-table-header-background-color),
-    btnDarkenColor: var(--vxe-ui-table-header-background-color),
-    btnDisabledColor: var(--vxe-ui-table-header-background-color)
-  )
-);
+// 局部变量
+.vxe-button {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-default);
+  --vxe-ui-button-current-height: var(--vxe-ui-button-height-default);
+  --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-default);
+  &.size--medium {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-medium);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-medium);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-medium);
+  }
+  &.size--small {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-small);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-small);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-small);
+  }
+  &.size--mini {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-mini);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-mini);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-mini);
+  }
+}
 
 .vxe-button {
   display: inline-flex;
@@ -71,7 +39,7 @@ $btnThemeList: (
   position: relative;
   background-color: var(--vxe-ui-layout-background-color);
   outline: 0;
-  font-size: var(--vxe-ui-font-size-default);
+  font-size: var(--vxe-ui-button-current-font-size);
   max-width: var(--vxe-ui-button-max-width);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -130,8 +98,8 @@ $btnThemeList: (
         color: var(--vxe-ui-font-primary-darken-color);
       }
     }
-    @for $index from 0 to list.length($btnThemeList) {
-      $item: list.nth($btnThemeList, $index + 1);
+    @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+      $item: list.nth(themeStatus.$btnThemeList, $index + 1);
       &.theme--#{map.get($item, name)} {
         color: map.get($item, textColor);
         &:not(.is--disabled) {
@@ -157,7 +125,7 @@ $btnThemeList: (
     border: 1px solid var(--vxe-ui-input-border-color);
     text-decoration: none;
     &.is--round {
-      border-radius: var(--vxe-ui-button-round-border-radius-default);
+      border-radius: var(--vxe-ui-button-current-border-radius);
     }
     &:not(.is--round) {
       border-radius: var(--vxe-ui-base-border-radius);
@@ -166,7 +134,7 @@ $btnThemeList: (
       padding: 0 0.5em;
       text-align: center;
       justify-content: center;
-      min-width: var(--vxe-ui-button-height-default);
+      min-width: var(--vxe-ui-button-current-height);
       border-radius: 50%;
     }
     &.is--shadow {
@@ -188,8 +156,21 @@ $btnThemeList: (
         background-color: var(--vxe-ui-layout-background-color);
       }
     }
-    @for $index from 0 to list.length($btnThemeList) {
-      $item: list.nth($btnThemeList, $index + 1);
+    &:not(.is--disabled) {
+      &:hover {
+        color: var(--vxe-ui-font-primary-lighten-color);
+      }
+      &:focus {
+        border-color: var(--vxe-ui-font-primary-color);
+      }
+      &:active {
+        color: var(--vxe-ui-font-primary-darken-color);
+        border-color: var(--vxe-ui-font-primary-darken-color);
+        background-color: var(--vxe-ui-layout-background-color);
+      }
+    }
+    @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+      $item: list.nth(themeStatus.$btnThemeList, $index + 1);
       $textColor: map.get($item, textColor);
       $btnColor: map.get($item, btnColor);
       &.theme--#{map.get($item, name)} {
@@ -219,56 +200,12 @@ $btnThemeList: (
       }
     }
   }
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    &.type--button {
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-medium);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-medium);
-      }
-    }
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    &.type--button {
-      height: var(--vxe-ui-button-height-small);
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-small);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-small);
-      }
-    }
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    &.type--button {
-      height: var(--vxe-ui-button-height-mini);
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-mini);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-mini);
-      }
-    }
-  }
 }
 
 
 .vxe-button {
   &.type--button {
-    height: var(--vxe-ui-button-height-default);
-    &.size--medium {
-      height: var(--vxe-ui-button-height-medium);
-    }
-    &.size--small {
-      height: var(--vxe-ui-button-height-small);
-    }
-    &.size--mini {
-      height: var(--vxe-ui-button-height-mini);
-    }
+    height: var(--vxe-ui-button-current-height);
   }
 }
 
@@ -308,8 +245,8 @@ $btnThemeList: (
   outline: 0;
   & > .vxe-button {
     &.type--button {
-      @for $index from 0 to list.length($btnThemeList) {
-        $item: list.nth($btnThemeList, $index + 1);
+      @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+        $item: list.nth(themeStatus.$btnThemeList, $index + 1);
         $btnColor: map.get($item, btnColor);
         &.theme--#{map.get($item, name)} {
           color: $btnColor;
@@ -323,16 +260,16 @@ $btnThemeList: (
         color: var(--vxe-ui-font-primary-lighten-color);
       }
       &.type--text {
-        @for $index from 0 to list.length($btnThemeList) {
-          $item: list.nth($btnThemeList, $index + 1);
+        @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+          $item: list.nth(themeStatus.$btnThemeList, $index + 1);
           &.theme--#{map.get($item, name)} {
             color: map.get($item, btnLightenColor);
           }
         }
       }
       &.type--button {
-        @for $index from 0 to list.length($btnThemeList) {
-          $item: list.nth($btnThemeList, $index + 1);
+        @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+          $item: list.nth(themeStatus.$btnThemeList, $index + 1);
           &.theme--#{map.get($item, name)} {
             color: map.get($item, btnColor);
             background-color: map.get($item, btnLightenColor);
@@ -386,16 +323,7 @@ $btnThemeList: (
 
 .vxe-button.type--button,
 .vxe-button--dropdown {
-  margin-right: var(--vxe-ui-base-margin-gap-default);
-  &.size--medium {
-    margin-right: var(--vxe-ui-base-margin-gap-medium);
-  }
-  &.size--small {
-    margin-right: var(--vxe-ui-base-margin-gap-small);
-  }
-  &.size--mini {
-    margin-right: var(--vxe-ui-base-margin-gap-mini);
-  }
+  margin-right: var(--vxe-ui-button-current-margin-left);
   &:last-of-type {
     margin-right: 0;
   }
@@ -403,14 +331,5 @@ $btnThemeList: (
 
 .vxe-button+.vxe-button--dropdown,
 .vxe-button--dropdown+.vxe-button {
-  margin-left: var(--vxe-ui-base-margin-gap-default);
-  &.size--medium {
-    margin-left: var(--vxe-ui-base-margin-gap-medium);
-  }
-  &.size--small {
-    margin-left: var(--vxe-ui-base-margin-gap-small);
-  }
-  &.size--mini {
-    margin-left: var(--vxe-ui-base-margin-gap-mini);
-  }
-}
+  margin-left: var(--vxe-ui-button-current-margin-left);
+}

package/styles/components/cascader.scss

@@ -1,10 +1,30 @@
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
 
+// 局部变量
+.vxe-cascader,
+.vxe-cascader--panel {
+  --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-default);
+  &.size--medium {
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-mini);
+  }
+}
+
 .vxe-cascader {
   position: relative;
   display: inline-block;
   width: 180px;
+  font-size: var(--vxe-ui-cascader-current-font-size);
   color: var(--vxe-ui-font-color);
   text-align: left;
   --vxe-ui-cascader-chunk-size: 1;
@@ -56,13 +76,14 @@
 }
 
 .vxe-cascader--panel {
+  font-size: var(--vxe-ui-cascader-current-font-size);
   pointer-events: none;
   @include placement.createPlacementPanel(var(--vxe-ui-cascader-node-width));
 }
 
 .vxe-cascader--panel-search {
   display: block;
-  padding: var(--vxe-ui-current-padding);
+  padding: var(--vxe-ui-cascader-current-font-size);
   width: calc(var(--vxe-ui-cascader-node-width) * var(--vxe-ui-cascader-chunk-size));
   .vxe-cascader-search--input {
     width: 100%;
@@ -78,7 +99,7 @@
   min-height: 2em;
 }
 .vxe-cascader--total-btns {
-  padding-left: var(--vxe-ui-current-padding);
+  padding-left: var(--vxe-ui-cascader-current-font-size);
   flex-grow: 1;
 }
 .vxe-cascader--total-btns,
@@ -145,7 +166,7 @@
 .vxe-cascader-chunk--item-wrapper {
   flex-shrink: 0;
   border-left: 1px solid var(--vxe-ui-base-popup-border-color);
-  padding: var(--vxe-ui-current-padding) 0;
+  padding: var(--vxe-ui-cascader-current-font-size) 0;
   &:first-child {
     border-left: 0;
   }
@@ -169,7 +190,7 @@
   flex-direction: row;
   height: var(--vxe-ui-cascader-node-height);
   line-height: var(--vxe-ui-cascader-node-height);
-  padding: 0 calc(var(--vxe-ui-current-padding) + 18px) 0 var(--vxe-ui-current-padding);
+  padding: 0 calc(var(--vxe-ui-cascader-current-font-size) + 18px) 0 var(--vxe-ui-cascader-current-font-size);
   cursor: pointer;
   &:hover {
     background-color: var(--vxe-ui-cascader-node-hover-background-color);
@@ -211,26 +232,3 @@
     @include baseMixin.createAnimationTransition(transform, .2s);
   }
 }
-
-.vxe-cascader,
-.vxe-cascader--panel {
-  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
-  &.size--small,
-  &.size--mini {
-    --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
-  }
-}
-
-.vxe-cascader,
-.vxe-cascader--panel {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/components/checkbox-button.scss

@@ -1,7 +1,10 @@
+@use "sass:map";
+@use "sass:list";
+@use '../helpers/baseMixin.scss';
+@use '../helpers/placement.scss';
+@use '../helpers/themeStatus.scss';
+
 .vxe-checkbox--button {
-  .vxe-checkbox--label {
-    background-color: var(--vxe-ui-layout-background-color);
-  }
   &:first-child {
     .vxe-checkbox--label {
       border-left: 1px solid var(--vxe-ui-input-border-color);
@@ -13,12 +16,6 @@
       border-radius: 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0;
     }
   }
-  > input {
-    &:checked+.vxe-checkbox--label {
-      color: #fff;
-      background-color: var(--vxe-ui-font-primary-color);
-    }
-  }
   .vxe-checkbox--label {
     padding: 0 1em;
     line-height: calc(var(--vxe-ui-button-height-default) - 2px);
@@ -32,13 +29,68 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
+
+.vxe-checkbox--button {
   & > input {
-    &:focus {
-      &+.vxe-checkbox--label {
-        border-color: var(--vxe-ui-font-primary-color);
+    &:checked+.vxe-checkbox--label {
+      color: #fff;
+      border-color: var(--vxe-ui-font-primary-color);
+      background-color: var(--vxe-ui-font-primary-color);
+      &:not(.is--disabled) {
+        &:hover {
+          background-color: var(--vxe-ui-font-primary-lighten-color);
+          border-color: var(--vxe-ui-font-primary-lighten-color);
+        }
+        &:active {
+          background-color: var(--vxe-ui-font-primary-darken-color);
+          border-color: var(--vxe-ui-font-primary-darken-color);
+        }
+      }
+      &.is--disabled {
+        border-color: var(--vxe-ui-font-primary-disabled-color);
+        background-color: var(--vxe-ui-font-primary-disabled-color);
+      }
+    }
+  }
+}
+
+.vxe-checkbox-group {
+  @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+    $item: list.nth(themeStatus.$btnThemeList, $index + 1);
+    $textColor: map.get($item, textColor);
+    $btnColor: map.get($item, btnColor);
+    &.theme--#{map.get($item, name)} {
+      .vxe-checkbox--button {
+        & > input {
+          &:checked+.vxe-checkbox--label {
+            color: $btnColor;
+            border-color: $textColor;
+            background-color: $textColor;
+            &:not(.is--disabled) {
+              &:hover {
+                color: $btnColor;
+                background-color: map.get($item, btnLightenColor);
+                border-color: map.get($item, btnLightenColor);
+              }
+              &:active {
+                color: $btnColor;
+                background-color: map.get($item, btnDarkenColor);
+                border-color: map.get($item, btnDarkenColor);
+              }
+            }
+            &.is--disabled {
+              border-color: map.get($item, btnDisabledColor);
+              background-color: map.get($item, btnDisabledColor);
+            }
+          }
+        }
       }
     }
   }
+}
+
+.vxe-checkbox--button {
   &.size--medium {
     .vxe-checkbox--label {
       line-height: calc(var(--vxe-ui-button-height-medium) - 2px);
@@ -54,4 +106,4 @@
       line-height: calc(var(--vxe-ui-button-height-mini) - 2px);
     }
   }
-}
+}

package/styles/components/checkbox.scss

@@ -1,5 +1,23 @@
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-checkbox {
+  --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-default);
+  &.size--medium {
+    --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-medium);
+  }
+  &.size--small {
+    --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-small);
+  }
+  &.size--mini {
+    --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-mini);
+  }
+}
+
 /*checkbox-group*/
 .vxe-checkbox-group {
   display: inline-flex;
@@ -18,9 +36,12 @@
 /*checkbox*/
 .vxe-checkbox {
   display: inline-flex;
+  flex-direction: row;
+  align-items: center;
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1;
+  font-size: var(--vxe-ui-checkbox-current-font-size);
   @include baseMixin.createCheckboxIcon();
   > input {
     &[type="checkbox"] {
@@ -41,7 +62,6 @@
     }
   }
   .vxe-checkbox--label {
-    padding-left: 0.5em;
     vertical-align: middle;
     display: inline-block;
     max-width: 50em;
@@ -51,31 +71,9 @@
   }
 }
 
-.vxe-checkbox {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}
-
 .vxe-checkbox--default,
 .vxe-checkbox-group {
-  margin-right: var(--vxe-ui-base-margin-gap-default);
-  &.size--medium {
-    margin-right: var(--vxe-ui-base-margin-gap-medium);
-  }
-  &.size--small {
-    margin-right: var(--vxe-ui-base-margin-gap-small);
-  }
-  &.size--mini {
-    margin-right: var(--vxe-ui-base-margin-gap-mini);
-  }
+  margin-right: var(--vxe-ui-checkbox-current-margin-right);
   &:last-of-type {
     margin-right: 0;
   }

package/styles/components/context-menu.scss

@@ -1,3 +1,17 @@
+// 局部变量
+.vxe-context-menu {
+  --vxe-ui-context-menu-current-font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    --vxe-ui-context-menu-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-context-menu-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-context-menu-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+
 .vxe-context-menu {
   display: none;
   top: 0;
@@ -24,6 +38,7 @@
 .vxe-context-menu--wrapper,
 .vxe-context-menu--children-wrapper {
   padding: 0;
+  font-size: var(--vxe-ui-context-menu-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -88,16 +103,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.vxe-context-menu {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}