vxe-table 3.6.14-beta.5 → 3.6.14

package/packages/table/src/table.js

@@ -337,6 +337,10 @@ export default {
         import: false,
         export: false
       },
+      // 刷新列标识，当列筛选被改变时，触发表格刷新数据
+      upDataFlag: 0,
+      // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
+      reColumnFlag: 0,
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -648,6 +652,12 @@ export default {
     tableColumn () {
       this.analyColumnWidth()
     },
+    upDataFlag () {
+      this.$nextTick().then(() => this.updateData())
+    },
+    reColumnFlag () {
+      this.$nextTick().then(() => this.refreshColumn())
+    },
     showHeader () {
       this.$nextTick(() => {
         this.recalculate(true).then(() => this.refreshScroll())

package/styles/base/checked.scss

@@ -24,7 +24,7 @@
     }
   }
   &.is--disabled {
-    color: $vxe-disabled-color;
+    color: $vxe-font-disabled-color;
     cursor: not-allowed;
     .vxe-checkbox--icon {
       color: $vxe-input-disabled-color;
@@ -62,7 +62,7 @@
     }
   }
   &.is--disabled {
-    color: $vxe-disabled-color;
+    color: $vxe-font-disabled-color;
     cursor: not-allowed;
     .vxe-radio--icon {
       color: $vxe-input-disabled-color;

package/styles/button.scss

@@ -6,37 +6,49 @@ $btnThemeList: (
     name: "primary",
     textColor: $vxe-primary-color,
     btnColor: #fff,
-    btnBackground: $vxe-primary-color
+    btnLightenColor: $vxe-primary-lighten-color,
+    btnDarkenColor: $vxe-primary-darken-color,
+    btnDisabledColor: $vxe-primary-disabled-color
   ),
   (
     name: "success",
     textColor: $vxe-success-color,
     btnColor: #fff,
-    btnBackground: $vxe-success-color
+    btnLightenColor: $vxe-success-lighten-color,
+    btnDarkenColor: $vxe-success-darken-color,
+    btnDisabledColor: $vxe-success-disabled-color
   ),
   (
     name: "info",
     textColor: $vxe-info-color,
     btnColor: #fff,
-    btnBackground: $vxe-info-color
+    btnLightenColor: $vxe-info-lighten-color,
+    btnDarkenColor: $vxe-info-darken-color,
+    btnDisabledColor: $vxe-info-disabled-color
   ),
   (
     name: "warning",
     textColor: $vxe-warning-color,
     btnColor: #fff,
-    btnBackground: $vxe-warning-color
+    btnLightenColor: $vxe-warning-lighten-color,
+    btnDarkenColor: $vxe-warning-darken-color,
+    btnDisabledColor: $vxe-warning-disabled-color
   ),
   (
     name: "danger",
     textColor: $vxe-danger-color,
     btnColor: #fff,
-    btnBackground: $vxe-danger-color
+    btnLightenColor: $vxe-danger-lighten-color,
+    btnDarkenColor: $vxe-danger-darken-color,
+    btnDisabledColor: $vxe-danger-disabled-color
   ),
   (
     name: "perfect",
     textColor: $vxe-table-header-background-color,
     btnColor: $vxe-font-color,
-    btnBackground: $vxe-table-header-background-color
+    btnLightenColor: $vxe-table-header-background-color,
+    btnDarkenColor: $vxe-table-header-background-color,
+    btnDisabledColor: $vxe-table-header-background-color
   )
 );
 
@@ -74,7 +86,7 @@ $btnThemeList: (
     }
   }
   &.is--disabled {
-    color: $vxe-disabled-color;
+    color: $vxe-font-disabled-color;
     &:not(.is--loading) {
       cursor: no-drop;
     }
@@ -86,27 +98,26 @@ $btnThemeList: (
     background-color: transparent;
     &:not(.is--disabled) {
       &:focus {
-        color: darken($vxe-font-color, 20%);
+        color: $vxe-font-darken-color;
       }
       &:hover {
-        color: lighten($vxe-primary-color, 10%);
+        color: $vxe-primary-lighten-color;
       }
     }
     @for $index from 0 to length($btnThemeList) {
       $item: nth($btnThemeList, $index + 1);
-      $textColor: map-get($item, textColor);
       &.theme--#{map-get($item, name)} {
-        color: $textColor;
+        color: map-get($item, textColor);
         &:not(.is--disabled) {
           &:focus {
-            color: darken($textColor, 10%);
+            color: map-get($item, btnDarkenColor);
           }
           &:hover {
-            color: lighten($textColor, 10%);
+            color: map-get($item, btnLightenColor);
           }
         }
         &.is--disabled {
-          color: lighten($textColor, 20%);
+          color: map-get($item, btnDisabledColor);
         }
       }
     }
@@ -132,44 +143,44 @@ $btnThemeList: (
     }
     &:not(.is--disabled) {
       &:hover {
-        color: lighten($vxe-primary-color, 6%);
+        color: $vxe-primary-lighten-color;
       }
       &:focus {
         border-color: $vxe-primary-color;
       }
       &:active {
-        color: darken($vxe-primary-color, 3%);
-        border-color: darken($vxe-primary-color, 3%);
-        background-color: darken($vxe-button-default-background-color, 3%);
+        color: $vxe-primary-darken-color;
+        border-color: $vxe-primary-darken-color;
+        background-color: $vxe-button-default-background-color;
       }
     }
     @for $index from 0 to length($btnThemeList) {
       $item: nth($btnThemeList, $index + 1);
+      $textColor: map-get($item, textColor);
       $btnColor: map-get($item, btnColor);
-      $btnBackground: map-get($item, btnBackground);
       &.theme--#{map-get($item, name)} {
         color: $btnColor;
         &:not(.is--disabled) {
-          border-color: $btnBackground;
-          background-color: $btnBackground;
+          border-color: $textColor;
+          background-color: $textColor;
           &:hover {
             color: $btnColor;
-            background-color: lighten($btnBackground, 6%);
-            border-color: lighten($btnBackground, 6%);
+            background-color: map-get($item, btnLightenColor);
+            border-color: map-get($item, btnLightenColor);
           }
           &:active {
             color: $btnColor;
-            background-color: darken($btnBackground, 3%);
-            border-color: darken($btnBackground, 3%);
+            background-color: map-get($item, btnDarkenColor);
+            border-color: map-get($item, btnDarkenColor);
           }
         }
         &.is--disabled {
-          border-color: lighten($btnBackground, 20%);
-          background-color: lighten($btnBackground, 20%);
+          border-color: map-get($item, btnDisabledColor);
+          background-color: map-get($item, btnDisabledColor);
         }
         &.is--loading {
-          border-color: $btnBackground;
-          background-color: $btnBackground;
+          border-color: $textColor;
+          background-color: $textColor;
         }
       }
     }
@@ -261,26 +272,23 @@ $btnThemeList: (
   &.is--active {
     & > .vxe-button {
       &:not(.is--disabled) {
-        color: lighten($vxe-primary-color, 6%);
+        color: $vxe-primary-lighten-color;
       }
       &.type--text {
         @for $index from 0 to length($btnThemeList) {
           $item: nth($btnThemeList, $index + 1);
-          $textColor: map-get($item, textColor);
           &.theme--#{map-get($item, name)} {
-            color: lighten($textColor, 10%);
+            color: map-get($item, btnLightenColor);
           }
         }
       }
       &.type--button {
         @for $index from 0 to length($btnThemeList) {
           $item: nth($btnThemeList, $index + 1);
-          $btnColor: map-get($item, btnColor);
-          $btnBackground: map-get($item, btnBackground);
           &.theme--#{map-get($item, name)} {
-            color: $btnColor;
-            background-color: lighten($btnBackground, 6%);
-            border-color: lighten($btnBackground, 6%);
+            color: map-get($item, btnColor);
+            background-color: map-get($item, btnLightenColor);
+            border-color: map-get($item, btnLightenColor);
           }
         }
       }

package/styles/checkbox.scss

@@ -61,7 +61,7 @@
       &+.vxe-checkbox--icon {
         color: $vxe-input-disabled-color;
         &+.vxe-checkbox--label {
-          color: $vxe-disabled-color;
+          color: $vxe-font-disabled-color;
         }
       }
       &:checked+.vxe-checkbox--icon {

package/styles/cssvar.scss

@@ -3,7 +3,6 @@
 :root {
   /*font*/
   --vxe-font-family: #{$vxe-font-family};
-  --vxe-font-color: #{$vxe-font-color};
   --vxe-font-size: #{$vxe-font-size};
   --vxe-font-size-medium: #{$vxe-font-size-medium};
   --vxe-font-size-small: #{$vxe-font-size-small};
@@ -17,13 +16,33 @@
   --vxe-icon-background-color: #{$vxe-icon-background-color};
 
   /*color*/
+  --vxe-font-color: #{$vxe-font-color};
   --vxe-primary-color: #{$vxe-primary-color};
   --vxe-success-color: #{$vxe-success-color};
   --vxe-info-color: #{$vxe-info-color};
   --vxe-warning-color: #{$vxe-warning-color};
   --vxe-danger-color: #{$vxe-danger-color};
-  --vxe-disabled-color: #{$vxe-disabled-color};
+
+  --vxe-font-lighten-color: #{$vxe-font-lighten-color};
+  --vxe-primary-lighten-color: #{$vxe-primary-lighten-color};
+  --vxe-success-lighten-color: #{$vxe-success-lighten-color};
+  --vxe-info-lighten-color: #{$vxe-info-lighten-color};
+  --vxe-warning-lighten-color: #{$vxe-warning-lighten-color};
+  --vxe-danger-lighten-color: #{$vxe-danger-lighten-color};
+
+  --vxe-font-darken-color: #{$vxe-font-darken-color};
+  --vxe-primary-darken-color: #{$vxe-primary-darken-color};
+  --vxe-success-darken-color: #{$vxe-success-darken-color};
+  --vxe-info-darken-color: #{$vxe-info-darken-color};
+  --vxe-warning-darken-color: #{$vxe-warning-darken-color};
+  --vxe-danger-darken-color: #{$vxe-danger-darken-color};
+
+  --vxe-font-disabled-color: #{$vxe-font-disabled-color};
   --vxe-primary-disabled-color: #{$vxe-primary-disabled-color};
+  --vxe-success-disabled-color: #{$vxe-success-disabled-color};
+  --vxe-info-disabled-color: #{$vxe-info-disabled-color};
+  --vxe-warning-disabled-color: #{$vxe-warning-disabled-color};
+  --vxe-danger-disabled-color: #{$vxe-danger-disabled-color};
 
   /*input/radio/checkbox*/
   --vxe-input-border-color: #{$vxe-input-border-color};
@@ -35,7 +54,6 @@
   --vxe-table-popup-border-color: #{$vxe-table-popup-border-color};
 
   /*table*/
-  --vxe-table-font-color: #{$vxe-table-font-color};
   --vxe-table-header-font-color: #{$vxe-table-header-font-color};
   --vxe-table-footer-font-color: #{$vxe-table-footer-font-color};
   --vxe-table-border-radius: #{$vxe-table-border-radius};

package/styles/filter.scss

@@ -10,14 +10,14 @@
   line-height: 0;
   &.col--filter {
     .vxe-filter--btn {
-      color: $vxe-table-font-color;
+      color: $vxe-font-color;
     }
   }
   .vxe-filter--btn {
     color: $vxe-table-column-icon-border-color;
     cursor: pointer;
     &:hover {
-      color: $vxe-table-font-color;
+      color: $vxe-font-color;
     }
   }
 }
@@ -92,7 +92,7 @@
       background-color: transparent;
       padding: 0 0.4em;
       border: 0;
-      color: $vxe-table-font-color;
+      color: $vxe-font-color;
       cursor: pointer;
       &:focus {
         outline: none;
@@ -101,7 +101,7 @@
         color: $vxe-primary-color;
       }
       &.is--disabled {
-        color: $vxe-disabled-color;
+        color: $vxe-font-disabled-color;
         cursor: not-allowed;
       }
     }
@@ -110,4 +110,4 @@
 
 .vxe-table--filter-option {
   @extend %XECheckboxIcon;
-}
+}

package/styles/form.scss

@@ -1,7 +1,7 @@
 /**Variable**/
 %ButtonHover {
-  color: lighten($vxe-primary-color, 6%);
-  border-color: lighten($vxe-primary-color, 10%);
+  color: $vxe-primary-lighten-color;
+  border-color: $vxe-primary-lighten-color;
 }
 
 .vxe-form {
@@ -226,15 +226,15 @@
   }
   .vxe-default-input[type="submit"],
   .vxe-default-input[type="reset"] {
-    line-height: $vxe-button-height-default - 2px;
+    line-height: calc($vxe-button-height-default - 2px);
     background-color: #fff;
     cursor: pointer;
     &:hover {
       @extend %ButtonHover;
     }
     &:active {
-      color: darken($vxe-primary-color, 2%);
-      border-color: darken($vxe-primary-color, 2%);
+      color: $vxe-primary-darken-color;
+      border-color: $vxe-primary-darken-color;
     }
   }
   .vxe-default-input {
@@ -284,7 +284,7 @@
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-medium - 2px;
+      line-height: calc($vxe-button-height-medium - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,
@@ -299,7 +299,7 @@
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-small - 2px;
+      line-height: calc($vxe-button-height-small - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,
@@ -314,7 +314,7 @@
     }
     .vxe-default-input[type="submit"],
     .vxe-default-input[type="reset"] {
-      line-height: $vxe-button-height-mini - 2px;
+      line-height: calc($vxe-button-height-mini - 2px);
     }
     .vxe-default-input,
     .vxe-default-input,