vxe-pc-ui 3.15.13 → 3.15.15

package/styles/components/link.scss

@@ -113,4 +113,4 @@ $btnThemeList: (
   &.size--mini {
     font-size: var(--vxe-ui-font-size-mini);
   }
-}
+}

package/styles/components/list.scss

@@ -1,9 +1,28 @@
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-list {
+  --vxe-ui-list-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-list-current-padding: var(--vxe-ui-layout-padding-default);
+  &.size--medium {
+    --vxe-ui-list-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-list-current-padding: var(--vxe-ui-layout-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-list-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-list-current-padding: var(--vxe-ui-layout-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-list-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-list-current-padding: var(--vxe-ui-layout-padding-mini);
+  }
+}
+
 .vxe-list {
   position: relative;
   display: block;
   padding: 0;
+  font-size: var(--vxe-ui-list-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   direction: ltr;
@@ -55,7 +74,7 @@
   }
   &.is--padding {
     & > .vxe-list--row {
-      padding: 0 var(--vxe-ui-current-padding);
+      padding: 0 var(--vxe-ui-list-current-padding);
     }
   }
   
@@ -123,7 +142,7 @@
   flex-direction: row;
   align-items: center;
   flex-shrink: 0;
-  padding-right: var(--vxe-ui-current-padding);
+  padding-right: var(--vxe-ui-list-current-padding);
 }
 .vxe-list--row-content {
   display: flex;
@@ -252,36 +271,15 @@
 }
 
 .vxe-list--checkbox-header {
-  padding-right: var(--vxe-ui-current-padding);
+  padding-right: var(--vxe-ui-list-current-padding);
   user-select: none;
   @include baseMixin.createCheckboxIcon();
 }
 .vxe-list--checkbox-option {
-  padding-right: var(--vxe-ui-current-padding);
+  padding-right: var(--vxe-ui-list-current-padding);
   @include baseMixin.createCheckboxIcon();
 }
 .vxe-list--radio-option {
-  padding-right: var(--vxe-ui-current-padding);
+  padding-right: var(--vxe-ui-list-current-padding);
   @include baseMixin.createRadioIcon();
 }
-
-.vxe-list {
-  --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-list {
-  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/menu.scss

@@ -1,5 +1,23 @@
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-menu {
+  --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-default);
+  &.size--medium {
+    --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-medium);
+  }
+  &.size--small {
+    --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-small);
+  }
+  &.size--mini {
+    --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-mini);
+  }
+}
+
 .vxe-menu {
   position: relative;
   &.is--collapsed {
@@ -14,6 +32,7 @@
   }
 }
 .vxe-menu {
+  font-size: var(--vxe-ui-menu-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -44,11 +63,11 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  height: var(--vxe-ui-menu-current-item-height);
   color: var(--vxe-ui-font-color);
   text-decoration: none;
   user-select: none;
   &:hover {
-    color: var(--vxe-ui-menu-item-hover-color);
     background-color: var(--vxe-ui-base-hover-background-color);
   }
 }
@@ -116,36 +135,14 @@
   }
 }
 
-.vxe-menu--item-level3 {
-  font-size: 13px;
-}
-.vxe-menu--item-link {
-  height: var(--vxe-ui-menu-item-height-default);
-}
 .vxe-menu {
-  font-size: var(--vxe-ui-font-size-default);
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    .vxe-menu--item-link {
-      height: var(--vxe-ui-menu-item-height-medium);
-    }
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    .vxe-menu--item-link {
-      height: var(--vxe-ui-menu-item-height-small);
-    }
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    .vxe-menu--item-link {
-      height: var(--vxe-ui-menu-item-height-mini);
-    }
+  .vxe-menu--item-level3 {
+    font-size: var(--vxe-ui-menu-item-height-small);
   }
   &.size--small,
   &.size--mini {
     .vxe-menu--item-level3 {
-      font-size: 12px;
+      font-size: var(--vxe-ui-menu-item-height-mini);
     }
   }
 }

package/styles/components/radio-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-radio--button {
-  .vxe-radio--label {
-    background-color: var(--vxe-ui-layout-background-color);
-  }
   &:first-child {
     .vxe-radio--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-radio--label {
-      color: #fff;
-      background-color: var(--vxe-ui-font-primary-color);
-    }
-  }
   .vxe-radio--label {
     padding: 0 1em;
     line-height: calc(var(--vxe-ui-button-height-default) - 2px);
@@ -27,18 +24,73 @@
     border-color: var(--vxe-ui-input-border-color);
     border-width: 1px 1px 1px 0;
     max-width: 50em;
+    user-select: none;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
+
+.vxe-radio--button {
   & > input {
-    &:focus {
-      &+.vxe-radio--label {
-        border-color: var(--vxe-ui-font-primary-color);
-        box-shadow: 0 0 0.2em 0 var(--vxe-ui-font-primary-color);
+    &:checked+.vxe-radio--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-radio-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-radio--button {
+        & > input {
+          &:checked+.vxe-radio--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-radio--button {
   &.size--medium {
     .vxe-radio--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/radio.scss

@@ -1,5 +1,23 @@
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-radio {
+  --vxe-ui-radio-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-radio-current-margin-right: var(--vxe-ui-base-margin-gap-default);
+  &.size--medium {
+    --vxe-ui-radio-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-radio-current-margin-right: var(--vxe-ui-base-margin-gap-medium);
+  }
+  &.size--small {
+    --vxe-ui-radio-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-radio-current-margin-right: var(--vxe-ui-base-margin-gap-small);
+  }
+  &.size--mini {
+    --vxe-ui-radio-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-radio-current-margin-right: var(--vxe-ui-base-margin-gap-mini);
+  }
+}
+
 /*radio-group*/
 .vxe-radio-group {
   display: inline-flex;
@@ -16,9 +34,12 @@
 /*radio*/
 .vxe-radio {
   display: inline-flex;
+  flex-direction: row;
+  align-items: center;
   vertical-align: middle;
   white-space: nowrap;
   line-height: 1;
+  font-size: var(--vxe-ui-radio-current-font-size);
   @include baseMixin.createRadioIcon();
   > input {
     &[type="radio"] {
@@ -47,16 +68,6 @@
 }
 
 .vxe-radio {
-  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);
-  }
   &:last-of-type {
     margin-right: 0;
   }
@@ -64,17 +75,5 @@
 
 .vxe-radio--default,
 .vxe-radio-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);
-  }
-  &:last-of-type {
-    margin-right: 0;
-  }
+  margin-right: var(--vxe-ui-radio-current-margin-right);
 }

package/styles/components/select.scss

@@ -1,10 +1,38 @@
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
 
+// 局部变量
+.vxe-select,
+.vxe-select--panel {
+  --vxe-ui-select-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-select-current-option-height: var(--vxe-ui-select-option-height-default);
+  &.size--medium {
+    --vxe-ui-select-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-select-current-option-height: var(--vxe-ui-select-option-height-medium);
+  }
+  &.size--small {
+    --vxe-ui-select-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-select-current-option-height: var(--vxe-ui-select-option-height-small);
+  }
+  &.size--mini {
+    --vxe-ui-select-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-select-current-option-height: var(--vxe-ui-select-option-height-mini);
+  }
+}
+.vxe-select,
+.vxe-select--panel {
+  --vxe-ui-select-current-padding: var(--vxe-ui-layout-padding-default);
+  &.size--small,
+  &.size--mini {
+    --vxe-ui-select-current-padding: var(--vxe-ui-layout-padding-half);
+  }
+}
+
 .vxe-select {
   position: relative;
   display: inline-block;
   width: 180px;
+  font-size: var(--vxe-ui-select-current-font-size);
   color: var(--vxe-ui-font-color);
   text-align: left;
   & > .vxe-input {
@@ -51,6 +79,7 @@
 }
 
 .vxe-select--panel {
+  font-size: var(--vxe-ui-select-current-font-size);
   @include placement.createPlacementPanel();
 }
 
@@ -95,7 +124,7 @@
   min-height: 2em;
 }
 .vxe-select--total-btns {
-  padding-left: var(--vxe-ui-current-padding);
+  padding-left: var(--vxe-ui-select-current-padding);
   flex-grow: 1;
 }
 .vxe-select--total-btns,
@@ -214,66 +243,11 @@
   color: var(--vxe-ui-select-empty-color);
 }
 
-.vxe-select,
-.vxe-select--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);
-  }
-}
-
-.vxe-select,
-.vxe-select--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-select-option {
+  height: var(--vxe-ui-select-current-option-height);
 }
-
-.vxe-select--panel {
-  .vxe-select-option {
-    height: var(--vxe-ui-select-option-height-default);
-  }
-  .vxe-select-option,
-  .vxe-select--search-loading,
-  .vxe-select--empty-placeholder {
-    line-height: var(--vxe-ui-select-option-height-default);
-  }
-  &.size--medium {
-    .vxe-select-option {
-      height: var(--vxe-ui-select-option-height-medium);
-    }
-    .vxe-select-option,
-    .vxe-select--search-loading,
-    .vxe-select--empty-placeholder {
-      line-height: var(--vxe-ui-select-option-height-medium);
-    }
-  }
-  &.size--small {
-    .vxe-select-option {
-      height: var(--vxe-ui-select-option-height-small);
-    }
-    .vxe-select-option,
-    .vxe-select--search-loading,
-    .vxe-select--empty-placeholder {
-      line-height: var(--vxe-ui-select-option-height-small);
-    }
-  }
-  &.size--mini {
-    .vxe-select-option {
-      height: var(--vxe-ui-select-option-height-mini);
-    }
-    .vxe-select-option,
-    .vxe-select--search-loading,
-    .vxe-select--empty-placeholder {
-      line-height: var(--vxe-ui-select-option-height-mini);
-    }
-  }
+.vxe-select-option,
+.vxe-select--search-loading,
+.vxe-select--empty-placeholder {
+  line-height: var(--vxe-ui-select-current-option-height);
 }

package/styles/components/tree-select.scss

@@ -1,10 +1,31 @@
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
 
+
+// 局部变量
+.vxe-tree-select,
+.vxe-tree-select--panel {
+  --vxe-ui-tree-select-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-tree-select-current-padding: var(--vxe-ui-layout-padding-default);
+  &.size--medium {
+    --vxe-ui-tree-select-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-tree-select-current-padding: var(--vxe-ui-layout-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-tree-select-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-tree-select-current-padding: var(--vxe-ui-layout-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-tree-select-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-tree-select-current-padding: var(--vxe-ui-layout-padding-mini);
+  }
+}
+
 .vxe-tree-select {
   position: relative;
   display: inline-block;
   width: 180px;
+  font-size: var(--vxe-ui-tree-select-current-font-size);
   color: var(--vxe-ui-font-color);
   text-align: left;
   & > .vxe-input {
@@ -55,13 +76,14 @@
 }
 
 .vxe-tree-select--panel {
+  font-size: var(--vxe-ui-tree-select-current-font-size);
   pointer-events: none;
   @include placement.createPlacementPanel();
 }
 
 .vxe-tree-select--panel-search {
   display: block;
-  padding: var(--vxe-ui-current-padding);
+  padding: var(--vxe-ui-tree-select-current-padding);
   .vxe-tree-select-search--input {
     width: 100%;
   }
@@ -76,7 +98,7 @@
   min-height: 2em;
 }
 .vxe-tree-select--total-btns {
-  padding-left: var(--vxe-ui-current-padding);
+  padding-left: var(--vxe-ui-tree-select-current-padding);
   flex-grow: 1;
 }
 .vxe-tree-select--total-btns,
@@ -128,10 +150,11 @@
 .vxe-tree-select-tree--wrapper {
   position: relative;
   overflow: auto;
-  padding: var(--vxe-ui-current-padding) 0;
+  padding: var(--vxe-ui-tree-select-current-padding) 0;
   outline: 0;
 }
 .vxe-tree-select--tree {
+  --vxe-ui-tree-node-padding: var(--vxe-ui-tree-select-current-padding);
   width: 100%;
   .vxe-tree--node-item {
     &.is-radio--checked,
@@ -145,27 +168,3 @@
     cursor: pointer;
   }
 }
-
-.vxe-tree-select,
-.vxe-tree-select--panel {
-  --vxe-ui-current-padding: var(--vxe-ui-layout-padding-default);
-  --vxe-ui-tree-node-root-indent: var(--vxe-ui-current-padding);
-  &.size--small,
-  &.size--mini {
-    --vxe-ui-current-padding: var(--vxe-ui-layout-padding-half);
-  }
-}
-
-.vxe-tree-select,
-.vxe-tree-select--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/tree.scss

@@ -1,7 +1,22 @@
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-tree {
+  --vxe-ui-tree-current-font-size: var(--vxe-ui-font-size-default);
+  &.size--medium {
+    --vxe-ui-tree-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-tree-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-tree-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
+
 .vxe-tree {
   position: relative;
+  font-size: var(--vxe-ui-tree-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   &.node--trigger {
@@ -100,7 +115,7 @@
   @for $i from 0 to 10 {
     &.node--level-#{$i} {
       & > .vxe-tree--node-item {
-        padding-left: calc(var(--vxe-ui-tree-node-indent) * $i + var(--vxe-ui-tree-node-root-indent));
+        padding-left: calc(var(--vxe-ui-tree-node-indent) * $i + var(--vxe-ui-tree-node-root-indent) + var(--vxe-ui-tree-node-padding));
       }
     }
   }
@@ -291,16 +306,3 @@
   width: 0;
   float: left;
 }
-
-.vxe-tree {
-  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);
-  }
-}