vxe-pc-ui 4.15.13 → 4.15.14

package/styles/components/button.scss

@@ -2,65 +2,7 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.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)
-  )
-);
+@use '../helpers/themeStatus.scss';
 
 .vxe-button {
   display: inline-flex;
@@ -130,8 +72,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) {
@@ -188,8 +130,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)} {
@@ -308,8 +263,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 +278,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);

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/icon-picker.scss

@@ -9,6 +9,11 @@
   border: 1px solid var(--vxe-ui-input-border-color);
   border-radius: var(--vxe-ui-base-border-radius);
   background-color: var(--vxe-ui-layout-background-color);
+  &.is--disabled {
+    background-color: var(--vxe-ui-input-disabled-background-color);
+    color: var(--vxe-ui-font-disabled-color);
+    cursor: no-drop;
+  }
   &.show--clear {
     &:hover {
       .vxe-ico-picker--clear-icon {
@@ -67,6 +72,15 @@
   }
 }
 
+.vxe-ico-picker--panel-search {
+  display: block;
+  flex-shrink: 0;
+  padding: var(--vxe-ui-layout-padding-default);
+  .vxe-ico-picker-search--input {
+    width: 100%;
+  }
+}
+
 .vxe-ico-picker--readonly {
   color: var(--vxe-ui-font-color);
   display: inline-flex;
@@ -86,10 +100,17 @@
   }
 }
 
+.vxe-ico-picker--all-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .vxe-ico-picker--list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: 22.3em;
+  height: var(--vxe-ui-icon-picker-panel-height);
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
 .vxe-ico-picker--list {
@@ -99,18 +120,23 @@
 .vxe-ico-picker--item {
   display: flex;
   flex-direction: column;
-  width: 4.8em;
-  padding: 0.2em;
-  border: 1px solid var(--vxe-ui-input-border-color);
-  border-radius: var(--vxe-ui-base-border-radius);
-  margin: var(--vxe-ui-layout-padding-half);
-  cursor: pointer;
-  &:hover {
-    background-color: var(--vxe-ui-base-hover-background-color);
+  min-width: 4.8em;
+  width: var(--vxe-ui-icon-picker-item-width, 4.8em);
+  padding: var(--vxe-ui-layout-padding-half);
+  .vxe-ico-picker--item-inner {
+    padding: 0.2em;
+    border: 1px solid var(--vxe-ui-input-border-color);
+    border-radius: var(--vxe-ui-base-border-radius);
+    cursor: pointer;
+    &:hover {
+      background-color: var(--vxe-ui-base-hover-background-color);
+    }
   }
   &.is--selected {
-    color: var(--vxe-ui-font-primary-color);
-    border-color: var(--vxe-ui-font-primary-color);
+    .vxe-ico-picker--item-inner {
+      color: var(--vxe-ui-font-primary-color);
+      border-color: var(--vxe-ui-font-primary-color);
+    }
   }
 }
 .vxe-ico-picker--item-icon {

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);
@@ -32,13 +29,68 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+}
+
+.vxe-radio--button {
   & > input {
-    &:focus {
-      &+.vxe-radio--label {
-        border-color: 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/helpers/themeStatus.scss

@@ -0,0 +1,58 @@
+$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)
+  )
+)