vxe-table 4.4.1 → 4.4.2-beta.1

package/styles/form.scss

@@ -6,10 +6,10 @@
 
 .vxe-form {
   position: relative;
-  font-size: $vxe-font-size;
-  color: $vxe-font-color;
-  font-family: $vxe-font-family;
-  background-color: $vxe-form-background-color;
+  font-size: var(--vxe-font-size);
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+  background-color: var(--vxe-form-background-color);
   text-align: left;
 }
 
@@ -82,8 +82,8 @@
   width: 100%;
   font-size: 12px;
   line-height: 1.2em;
-  color: $vxe-form-validate-error-color;
-  background-color: $vxe-form-validate-error-background-color;
+  color: var(--vxe-form-validate-error-color);
+  background-color: var(--vxe-form-validate-error-background-color);
   z-index: 1;
   opacity: 0;
   transform-origin: center top;
@@ -129,7 +129,7 @@
       .vxe-form--item-title-content {
         &:before {
           content: "*";
-          color: $vxe-form-validate-error-color;
+          color: var(--vxe-form-validate-error-color);
           font-family: Verdana,Arial,Tahoma;
           margin-right: 0.2em;
           font-weight: normal;
@@ -156,7 +156,7 @@
     .vxe-default-input,
     .vxe-default-textarea,
     .vxe-default-select {
-      border-color: $vxe-form-validate-error-color;
+      border-color: var(--vxe-form-validate-error-color);
     }
     .vxe-input>.vxe-input--inner,
     .vxe-textarea>.vxe-textarea--inner,
@@ -165,7 +165,7 @@
     .vxe-default-textarea,
     .vxe-default-select {
       &:focus {
-        border-color: $vxe-form-validate-error-color;
+        border-color: var(--vxe-form-validate-error-color);
       }
     }
     .vxe-form--item-valid {
@@ -191,12 +191,12 @@
   .vxe-default-textarea,
   .vxe-default-select {
     outline: 0;
-    border: 1px solid $vxe-input-border-color;
-    border-radius: $vxe-border-radius;
+    border: 1px solid var(--vxe-input-border-color);
+    border-radius: var(--vxe-border-radius);
   }
   .vxe-default-input,
   .vxe-default-select {
-    height: $vxe-button-height-default;
+    height: var(--vxe-button-height-default);
   }
   .vxe-default-input {
     padding: 0 0.8em;
@@ -215,18 +215,18 @@
   .vxe-default-input[type="search"],
   .vxe-default-textarea,
   .vxe-default-select {
-    color: $vxe-font-color;
+    color: var(--vxe-font-color);
     &:focus {
-      border: 1px solid $vxe-primary-color;
+      border: 1px solid var(--vxe-primary-color);
     }
     &[disabled] {
       cursor: not-allowed;
-      background-color: $vxe-input-disabled-background-color;
+      background-color: var(--vxe-input-disabled-background-color);
     }
   }
   .vxe-default-input[type="submit"],
   .vxe-default-input[type="reset"] {
-    line-height: $vxe-button-height-default - 2px;
+    line-height: var(--vxe-button-height-default) - 2px;
     background-color: #fff;
     cursor: pointer;
     &:hover {
@@ -246,7 +246,7 @@
       height: 24px;
     }
     &::placeholder {
-      color: $vxe-input-placeholder-color;
+      color: var(--vxe-input-placeholder-color);
     }
   }
   .vxe-default-input[type="text"],
@@ -259,14 +259,14 @@
     resize: none;
     vertical-align: middle;
     &::placeholder {
-      color: $vxe-input-placeholder-color;
+      color: var(--vxe-input-placeholder-color);
     }
   }
 }
 
 .vxe-form {
   .vxe-form--item-inner {
-    min-height: $vxe-form-item-min-height-default;
+    min-height: var(--vxe-form-item-min-height-default);
     & > .align--center {
       text-align: center;
     }
@@ -278,48 +278,48 @@
     }
   }
   &.size--medium {
-    font-size: $vxe-font-size-medium;
+    font-size: var(--vxe-font-size-medium);
     .vxe-form--item-inner {
-      min-height: $vxe-form-item-min-height-medium;
+      min-height: var(--vxe-form-item-min-height-medium);
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-medium - 2px;
+      line-height: calc(var(--vxe-button-height-medium) - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,
     .vxe-default-select {
-      height: $vxe-button-height-medium;
+      height: var(--vxe-button-height-medium);
     }
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
+    font-size: var(--vxe-font-size-small);
     .vxe-form--item-inner {
-      min-height: $vxe-form-item-min-height-small;
+      min-height: var(--vxe-form-item-min-height-small);
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-small - 2px;
+      line-height: calc(var(--vxe-button-height-small) - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,
     .vxe-default-select {
-      height: $vxe-button-height-small;
+      height: var(--vxe-button-height-small);
     }
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
+    font-size: var(--vxe-font-size-mini);
     .vxe-form--item-inner {
-      min-height: $vxe-form-item-min-height-mini;
+      min-height: var(--vxe-form-item-min-height-mini);
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-mini - 2px;
+      line-height: calc(var(--vxe-button-height-mini) - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,
     .vxe-default-select {
-      height: $vxe-button-height-mini;
+      height: var(--vxe-button-height-mini);
     }
   }
 }

package/styles/grid.scss

@@ -12,7 +12,7 @@
       height: 100%;
       z-index: 99;
       user-select: none;
-      background-color: $vxe-loading-background-color;
+      background-color: var(--vxe-loading-background-color);
     }
     & > .vxe-table {
       .vxe-loading {
@@ -27,11 +27,11 @@
     width: 100%;
     height: 100%;
     padding: 0.5em 1em;
-    background-color: $vxe-grid-maximize-background-color;
+    background-color: var(--vxe-grid-maximize-background-color);
   }
   .vxe-body--row {
     &.row--pending {
-      color: $vxe-table-validate-error-color;
+      color: var(--vxe-table-validate-error-color);
       text-decoration: line-through;
       cursor: no-drop;
       .vxe-body--column {
@@ -43,7 +43,7 @@
           left: 0;
           width: 100%;
           height: 0;
-          border-bottom: 1px solid $vxe-table-validate-error-color;
+          border-bottom: 1px solid var(--vxe-table-validate-error-color);
           z-index: 1;
         }
       }
@@ -57,14 +57,14 @@
 }
 
 .vxe-grid {
-  font-size: $vxe-font-size;
+  font-size: var(--vxe-font-size);
   &.size--medium {
-    font-size: $vxe-font-size-medium;
+    font-size: var(--vxe-font-size-medium);
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
+    font-size: var(--vxe-font-size-small);
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
+    font-size: var(--vxe-font-size-mini);
   }
 }

package/styles/input.scss

@@ -6,22 +6,22 @@ $iconWidth: 1.6em;
 .vxe-input--inner {
   width: 100%;
   height: 100%;
-  border-radius: $vxe-border-radius;
+  border-radius: var(--vxe-border-radius);
   outline: 0;
   margin: 0;
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
   padding: 0 0.6em;
-  color: $vxe-font-color;
-  border: 1px solid $vxe-input-border-color;
-  background-color: $vxe-input-background-color;
+  color: var(--vxe-font-color);
+  border: 1px solid var(--vxe-input-border-color);
+  background-color: var(--vxe-input-background-color);
   box-shadow: none;
   &::placeholder {
-    color: $vxe-input-placeholder-color;
+    color: var(--vxe-input-placeholder-color);
   }
   &::-webkit-autofill {
-    background-color: $vxe-input-background-color;
+    background-color: var(--vxe-input-background-color);
   }
   &[type="number"] {
     appearance: none;
@@ -35,8 +35,8 @@ $iconWidth: 1.6em;
   }
   &[disabled] {
     cursor: not-allowed;
-    color: $vxe-disabled-color;
-    background-color: $vxe-input-disabled-background-color;
+    color: var(--vxe-disabled-color);
+    background-color: var(--vxe-input-disabled-background-color);
   }
 }
 
@@ -62,7 +62,7 @@ $iconWidth: 1.6em;
     }
     &.is--active {
       .vxe-input--inner {
-        border: 1px solid $vxe-primary-color;
+        border: 1px solid var(--vxe-primary-color);
       }
     }
   }
@@ -77,7 +77,7 @@ $iconWidth: 1.6em;
     user-select: none;
     align-items: center;
     justify-content: center;
-    color: $vxe-table-column-icon-border-color;
+    color: var(--vxe-table-column-icon-border-color);
   }
 }
 
@@ -181,12 +181,12 @@ $iconWidth: 1.6em;
     .vxe-input--suffix {
       &:hover {
         .vxe-input--clear-icon {
-          color: $vxe-font-color;
+          color: var(--vxe-font-color);
         }
       }
       &:active {
         .vxe-input--clear-icon {
-          color: $vxe-primary-color;
+          color: var(--vxe-primary-color);
         }
       }
     }
@@ -194,27 +194,27 @@ $iconWidth: 1.6em;
       &:hover {
         .vxe-input--search-suffix,
         .vxe-input--password-suffix {
-          color: $vxe-font-color;
+          color: var(--vxe-font-color);
         }
       }
       &:active {
         .vxe-input--search-suffix,
         .vxe-input--password-suffix {
-          color: $vxe-primary-color;
+          color: var(--vxe-primary-color);
         }
       }
     }
     .vxe-input--number-prev,
     .vxe-input--number-next {
       &:hover {
-        color: $vxe-font-color;
+        color: var(--vxe-font-color);
       }
       &:active {
-        color: $vxe-primary-color;
+        color: var(--vxe-primary-color);
       }
       &.is--disabled {
         cursor: no-drop;
-        color: $vxe-input-number-disabled-color;
+        color: var(--vxe-input-number-disabled-color);
       }
     }
   }
@@ -279,8 +279,8 @@ $iconWidth: 1.6em;
   position: absolute;
   left: 0;
   padding: 4px 0;
-  color: $vxe-font-color;
-  font-size: $vxe-font-size;
+  color: var(--vxe-font-color);
+  font-size: var(--vxe-font-size);
   text-align: left;
   &:not(.is--transfer) {
     min-width: 100%;
@@ -308,10 +308,10 @@ $iconWidth: 1.6em;
 
 .vxe-input--panel-wrapper,
 .vxe-input--panel-layout-wrapper {
-  background-color: $vxe-input-panel-background-color;
-  border: 1px solid $vxe-table-popup-border-color;
+  background-color: var(--vxe-input-panel-background-color);
+  border: 1px solid var(--vxe-table-popup-border-color);
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
-  border-radius: $vxe-border-radius;
+  border-radius: var(--vxe-border-radius);
 }
 
 .vxe-input--panel-wrapper {
@@ -336,7 +336,7 @@ $iconWidth: 1.6em;
     .vxe-input--panel-right-wrapper {
       display: flex;
       flex-direction: column;
-      border-left: 1px solid $vxe-input-border-color;
+      border-left: 1px solid var(--vxe-input-border-color);
     }
   }
   &.type--date,
@@ -381,8 +381,8 @@ $iconWidth: 1.6em;
 .vxe-input--time-picker-title {
   display: inline-block;
   text-align: center;
-  border: 1px solid $vxe-input-border-color;
-  border-radius: $vxe-border-radius;
+  border: 1px solid var(--vxe-input-border-color);
+  border-radius: var(--vxe-border-radius);
 }
 .vxe-input--time-picker-confirm {
   position: absolute;
@@ -392,12 +392,12 @@ $iconWidth: 1.6em;
 .vxe-input--time-picker-confirm,
 .vxe-input--date-picker-confirm {
   outline: 0;
-  border: 1px solid $vxe-input-border-color;
-  border-radius: $vxe-border-radius;
+  border: 1px solid var(--vxe-input-border-color);
+  border-radius: var(--vxe-border-radius);
   cursor: pointer;
-  color: $vxe-input-date-time-confirm-button-color;
-  border-color: $vxe-primary-color;
-  background-color: $vxe-primary-color;
+  color: var(--vxe-input-date-time-confirm-button-color);
+  border-color: var(--vxe-primary-color);
+  background-color: var(--vxe-primary-color);
   &:hover {
     background-color: lighten($vxe-primary-color, 6%);
     border-color: lighten($vxe-primary-color, 6%);
@@ -442,11 +442,11 @@ $iconWidth: 1.6em;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $vxe-button-default-background-color;
+  background-color: var(--vxe-button-default-background-color);
 }
 .vxe-input--date-picker-btn {
   &.is--disabled {
-    color: $vxe-disabled-color;
+    color: var(--vxe-disabled-color);
     cursor: no-drop;
   }
   &:not(.is--disabled) {
@@ -460,8 +460,8 @@ $iconWidth: 1.6em;
   }
 }
 .vxe-input--date-picker-body {
-  border-radius: $vxe-border-radius;
-  border: 1px solid $vxe-table-popup-border-color;
+  border-radius: var(--vxe-border-radius);
+  border: 1px solid var(--vxe-table-popup-border-color);
   user-select: none;
   table {
     border: 0;
@@ -476,47 +476,47 @@ $iconWidth: 1.6em;
     font-weight: normal;
   }
   th {
-    box-shadow: inset 0 -1px 0 0 $vxe-table-popup-border-color;
+    box-shadow: inset 0 -1px 0 0 var(--vxe-table-popup-border-color);
   }
   td {
     &.is--prev,
     &.is--next {
-      color: $vxe-disabled-color;
+      color: var(--vxe-disabled-color);
       .vxe-input--date-label,
       .vxe-input--date-festival {
-        color: $vxe-disabled-color;
+        color: var(--vxe-disabled-color);
       }
     }
     &.is--now {
-      box-shadow: inset 0 0 0 1px $vxe-table-popup-border-color;
+      box-shadow: inset 0 0 0 1px var(--vxe-table-popup-border-color);
       &:not(.is--selected) {
         &.is--current {
-          color: $vxe-primary-color;
+          color: var(--vxe-primary-color);
           .vxe-input--date-label,
           .vxe-input--date-festival {
-            color: $vxe-primary-color;
+            color: var(--vxe-primary-color);
           }
         }
       }
     }
     &.is--hover {
-      background-color: $vxe-input-date-picker-hover-background-color;
+      background-color: var(--vxe-input-date-picker-hover-background-color);
     }
     &.is--selected {
-      color: $vxe-input-date-picker-selected-color;
-      background-color: $vxe-primary-color;
+      color: var(--vxe-input-date-picker-selected-color);
+      background-color: var(--vxe-primary-color);
       &.is--prev,
       &.is--next {
         background-color: lighten($vxe-primary-color, 10%);
       }
       .vxe-input--date-label,
       .vxe-input--date-festival {
-        color: $vxe-input-date-picker-festival-selected-color;
+        color: var(--vxe-input-date-picker-festival-selected-color);
       }
       .vxe-input--date-label {
         &.is-notice {
           &:before {
-            background-color: $vxe-input-date-picker-notice-selected-background-color;
+            background-color: var(--vxe-input-date-picker-notice-selected-background-color);
           }
         }
       }
@@ -526,11 +526,11 @@ $iconWidth: 1.6em;
     }
     &.is--disabled {
       cursor: no-drop;
-      color: $vxe-input-disabled-color;
-      background-color: $vxe-input-disabled-background-color;
+      color: var(--vxe-input-disabled-color);
+      background-color: var(--vxe-input-disabled-background-color);
       .vxe-input--date-label,
       .vxe-input--date-festival {
-        color: $vxe-input-disabled-color;
+        color: var(--vxe-input-disabled-color);
       }
     }
   }
@@ -539,12 +539,12 @@ $iconWidth: 1.6em;
 .vxe-input--date-week-view {
   th {
     &:first-child {
-      box-shadow: inset -1px -1px 0 0 $vxe-table-popup-border-color;
+      box-shadow: inset -1px -1px 0 0 var(--vxe-table-popup-border-color);
     }
   }
   td {
     &:first-child {
-      box-shadow: inset -1px 0 0 0 $vxe-table-popup-border-color;
+      box-shadow: inset -1px 0 0 0 var(--vxe-table-popup-border-color);
     }
   }
 }
@@ -567,7 +567,7 @@ $iconWidth: 1.6em;
       top: 0.1em;
       transform: translateX(-50%);
       border-radius: 100%;
-      background-color: $vxe-input-date-notice-background-color;
+      background-color: var(--vxe-input-date-notice-background-color);
     }
   }
 }
@@ -578,19 +578,19 @@ $iconWidth: 1.6em;
   font-size: 12px;
   line-height: 12px;
   transform: scale(0.7);
-  color: $vxe-input-date-extra-color;
+  color: var(--vxe-input-date-extra-color);
   &.is-important {
-    color: $vxe-input-date-extra-important-color;
+    color: var(--vxe-input-date-extra-important-color);
   }
 }
 
 .vxe-input--date-festival {
-  color: $vxe-input-date-festival-color;
+  color: var(--vxe-input-date-festival-color);
   height: 14px;
   line-height: 1;
   overflow: hidden;
   &.is-important {
-    color: $vxe-input-date-festival-important-color;
+    color: var(--vxe-input-date-festival-important-color);
   }
 }
 .vxe-input--date-festival--label {
@@ -640,9 +640,9 @@ $iconWidth: 1.6em;
   position: relative;
   display: flex;
   flex-direction: row;
-  border: 1px solid $vxe-table-popup-border-color;
+  border: 1px solid var(--vxe-table-popup-border-color);
   flex-grow: 1;
-  border-radius: $vxe-border-radius;
+  border-radius: var(--vxe-border-radius);
   user-select: none;
   & > ul {
     height: 100%;
@@ -660,27 +660,27 @@ $iconWidth: 1.6em;
     & > li {
       display: block;
       &:hover {
-        background-color: $vxe-input-date-picker-hover-background-color;
+        background-color: var(--vxe-input-date-picker-hover-background-color);
         cursor: pointer;
       }
       &.is--selected {
         font-weight: 700;
-        color: $vxe-primary-color;
+        color: var(--vxe-primary-color);
       }
     }
   }
   .vxe-input--time-picker-minute-list {
-    border-left: 1px solid $vxe-table-popup-border-color;
+    border-left: 1px solid var(--vxe-table-popup-border-color);
   }
   .vxe-input--time-picker-second-list {
-    border-left: 1px solid $vxe-table-popup-border-color;
+    border-left: 1px solid var(--vxe-table-popup-border-color);
   }
 }
 
 .vxe-input {
-  font-size: $vxe-font-size;
-  height: $vxe-input-height-default;
-  line-height: $vxe-input-height-default;
+  font-size: var(--vxe-font-size);
+  height: var(--vxe-input-height-default);
+  line-height: var(--vxe-input-height-default);
   .vxe-input--inner {
     &[type="date"]::-webkit-inner-spin-button,
     &[type="month"]::-webkit-inner-spin-button,
@@ -695,9 +695,9 @@ $iconWidth: 1.6em;
     }
   }
   &.size--medium {
-    font-size: $vxe-font-size-medium;
-    height: $vxe-input-height-medium;
-    line-height: $vxe-input-height-medium;
+    font-size: var(--vxe-font-size-medium);
+    height: var(--vxe-input-height-medium);
+    line-height: var(--vxe-input-height-medium);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -707,9 +707,9 @@ $iconWidth: 1.6em;
     }
   }
   &.size--small {
-    font-size: $vxe-font-size-small;
-    height: $vxe-input-height-small;
-    line-height: $vxe-input-height-small;
+    font-size: var(--vxe-font-size-small);
+    height: var(--vxe-input-height-small);
+    line-height: var(--vxe-input-height-small);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -719,9 +719,9 @@ $iconWidth: 1.6em;
     }
   }
   &.size--mini {
-    font-size: $vxe-font-size-mini;
-    height: $vxe-input-height-mini;
-    line-height: $vxe-input-height-mini;
+    font-size: var(--vxe-font-size-mini);
+    height: var(--vxe-input-height-mini);
+    line-height: var(--vxe-input-height-mini);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -802,8 +802,8 @@ $iconWidth: 1.6em;
     .vxe-input--date-picker-current-btn,
     .vxe-input--date-picker-next-btn {
       width: 31px - $sizeIndex;
-      border-radius: $vxe-border-radius;
-      border: 1px solid $vxe-input-border-color;
+      border-radius: var(--vxe-border-radius);
+      border: 1px solid var(--vxe-input-border-color);
     }
   }
   .vxe-input--date-picker-type-wrapper {

package/styles/list.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: block;
   padding: 0;
-  color: $vxe-font-color;
+  color: var(--vxe-font-color);
   direction: ltr;
   .vxe-list--virtual-wrapper {
     position: relative;

package/styles/loading.scss

@@ -10,7 +10,7 @@
   left: 0;
   z-index: 99;
   user-select: none;
-  background-color: $vxe-loading-background-color;
+  background-color: var(--vxe-loading-background-color);
   &.is--visible {
     display: block;
   }
@@ -22,7 +22,7 @@
     left: 0;
     transform: translateY(-50%);
     text-align: center;
-    color: $vxe-loading-color;
+    color: var(--vxe-loading-color);
   }
   .vxe-loading--default-icon {
     font-size: 1.4em;
@@ -41,7 +41,7 @@
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background-color: $vxe-primary-color;
+      background-color: var(--vxe-primary-color);
       opacity: 0.6;
       position: absolute;
       top: 0;