vxe-table 4.2.8 → 4.3.0-beta.0

package/packages/tooltip/src/tooltip.ts

@@ -4,6 +4,7 @@ import GlobalConfig from '../../v-x-e-table/src/conf'
 import { useSize } from '../../hooks/size'
 import { getLastZIndex, nextZIndex, formatText } from '../../tools/utils'
 import { getAbsolutePos, getDomNode } from '../../tools/dom'
+import { getSlotVNs } from '../../tools/vn'
 
 import { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types/all'
 
@@ -292,11 +293,12 @@ export default defineComponent({
     const renderContent = () => {
       const { useHTML } = props
       const { tipContent } = reactData
-      if (slots.content) {
+      const contentSlot = slots.content
+      if (contentSlot) {
         return h('div', {
           key: 1,
           class: 'vxe-table--tooltip-content'
-        }, slots.content({}))
+        }, getSlotVNs(contentSlot({})))
       }
       if (useHTML) {
         return h('div', {
@@ -314,6 +316,7 @@ export default defineComponent({
     const renderVN = () => {
       const { theme, isArrow, enterable } = props
       const { tipActive, visible, tipStore } = reactData
+      const defaultSlot = slots.default
       const vSize = computeSize.value
       let ons
       if (enterable) {
@@ -339,8 +342,9 @@ export default defineComponent({
         h('div', {
           class: 'vxe-table--tooltip-arrow',
           style: tipStore.arrowStyle
-        })
-      ].concat(slots.default ? slots.default({}) : []))
+        }),
+        ...(defaultSlot ? getSlotVNs(defaultSlot({})) : [])
+      ])
     }
 
     $xetooltip.renderVN = renderVN

package/packages/v-x-e-table/src/conf.ts

@@ -1,6 +1,6 @@
 import { VXETableGlobalConfig } from '../../../types/all'
 
-const iconPrefix = 'vxe-icon--'
+const iconPrefix = 'vxe-icon-'
 
 const GlobalConfig: VXETableGlobalConfig = {
   size: null, // 全局尺寸
@@ -8,7 +8,7 @@ const GlobalConfig: VXETableGlobalConfig = {
   version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
   // resizeInterval: 500,
   emptyCell: '　',
-  loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
+  // loadingText: null, // 自定义loading提示内容，如果为null则不显示文本
   table: {
     fit: true,
     showHeader: true,
@@ -127,73 +127,73 @@ const GlobalConfig: VXETableGlobalConfig = {
   },
   icon: {
     // loading
-    // LOADING: iconPrefix + 'refresh roll vxe-loading--default-icon',
+    LOADING: iconPrefix + 'spinner roll vxe-loading--default-icon',
 
     // table
-    TABLE_SORT_ASC: iconPrefix + 'caret-top',
-    TABLE_SORT_DESC: iconPrefix + 'caret-bottom',
+    TABLE_SORT_ASC: iconPrefix + 'caret-up',
+    TABLE_SORT_DESC: iconPrefix + 'caret-down',
     TABLE_FILTER_NONE: iconPrefix + 'funnel',
     TABLE_FILTER_MATCH: iconPrefix + 'funnel',
-    TABLE_EDIT: iconPrefix + 'edit-outline',
-    TABLE_HELP: iconPrefix + 'question',
-    TABLE_TREE_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EDIT: iconPrefix + 'edit',
+    TABLE_HELP: iconPrefix + 'question-circle-fill',
+    TABLE_TREE_LOADED: iconPrefix + 'spinner roll',
     TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90',
     TABLE_TREE_CLOSE: iconPrefix + 'caret-right',
-    TABLE_EXPAND_LOADED: iconPrefix + 'refresh roll',
+    TABLE_EXPAND_LOADED: iconPrefix + 'spinner roll',
     TABLE_EXPAND_OPEN: iconPrefix + 'arrow-right rotate90',
     TABLE_EXPAND_CLOSE: iconPrefix + 'arrow-right',
 
     // button
-    BUTTON_DROPDOWN: iconPrefix + 'arrow-bottom',
-    BUTTON_LOADING: iconPrefix + 'refresh roll',
+    BUTTON_DROPDOWN: iconPrefix + 'arrow-down',
+    BUTTON_LOADING: iconPrefix + 'spinner roll',
 
     // select
-    SELECT_LOADED: iconPrefix + 'refresh roll',
-    SELECT_OPEN: iconPrefix + 'caret-bottom rotate180',
-    SELECT_CLOSE: iconPrefix + 'caret-bottom',
+    SELECT_LOADED: iconPrefix + 'spinner roll',
+    SELECT_OPEN: iconPrefix + 'caret-down rotate180',
+    SELECT_CLOSE: iconPrefix + 'caret-down',
 
     // pager
-    PAGER_JUMP_PREV: iconPrefix + 'd-arrow-left',
-    PAGER_JUMP_NEXT: iconPrefix + 'd-arrow-right',
+    PAGER_JUMP_PREV: iconPrefix + 'arrow-double-left',
+    PAGER_JUMP_NEXT: iconPrefix + 'arrow-double-right',
     PAGER_PREV_PAGE: iconPrefix + 'arrow-left',
     PAGER_NEXT_PAGE: iconPrefix + 'arrow-right',
-    PAGER_JUMP_MORE: iconPrefix + 'more',
+    PAGER_JUMP_MORE: iconPrefix + 'ellipsis-h',
 
     // input
-    INPUT_CLEAR: iconPrefix + 'close',
-    INPUT_PWD: iconPrefix + 'eye-slash',
-    INPUT_SHOW_PWD: iconPrefix + 'eye',
-    INPUT_PREV_NUM: iconPrefix + 'caret-top',
-    INPUT_NEXT_NUM: iconPrefix + 'caret-bottom',
+    INPUT_CLEAR: iconPrefix + 'error-circle-fill',
+    INPUT_PWD: iconPrefix + 'eye-fill',
+    INPUT_SHOW_PWD: iconPrefix + 'eye-fill-close',
+    INPUT_PREV_NUM: iconPrefix + 'caret-up',
+    INPUT_NEXT_NUM: iconPrefix + 'caret-down',
     INPUT_DATE: iconPrefix + 'calendar',
     INPUT_SEARCH: iconPrefix + 'search',
 
     // modal
     MODAL_ZOOM_IN: iconPrefix + 'square',
-    MODAL_ZOOM_OUT: iconPrefix + 'zoomout',
+    MODAL_ZOOM_OUT: iconPrefix + 'maximize',
     MODAL_CLOSE: iconPrefix + 'close',
-    MODAL_INFO: iconPrefix + 'info',
-    MODAL_SUCCESS: iconPrefix + 'success',
-    MODAL_WARNING: iconPrefix + 'warning',
-    MODAL_ERROR: iconPrefix + 'error',
-    MODAL_QUESTION: iconPrefix + 'question',
-    MODAL_LOADING: iconPrefix + 'refresh roll',
+    MODAL_INFO: iconPrefix + 'info-circle-fill',
+    MODAL_SUCCESS: iconPrefix + 'success-circle-fill',
+    MODAL_WARNING: iconPrefix + 'warnion-circle-fill',
+    MODAL_ERROR: iconPrefix + 'error-circle-fill',
+    MODAL_QUESTION: iconPrefix + 'question-circle-fill',
+    MODAL_LOADING: iconPrefix + 'spinner roll',
 
     // toolbar
-    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'refresh',
-    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'refresh roll',
+    TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
+    TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
     TOOLBAR_TOOLS_IMPORT: iconPrefix + 'upload',
     TOOLBAR_TOOLS_EXPORT: iconPrefix + 'download',
     TOOLBAR_TOOLS_PRINT: iconPrefix + 'print',
-    TOOLBAR_TOOLS_ZOOM_IN: iconPrefix + 'zoomin',
-    TOOLBAR_TOOLS_ZOOM_OUT: iconPrefix + 'zoomout',
-    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'menu',
+    TOOLBAR_TOOLS_FULLSCREEN: iconPrefix + 'fullscreen',
+    TOOLBAR_TOOLS_MINIMIZE: iconPrefix + 'minimize',
+    TOOLBAR_TOOLS_CUSTOM: iconPrefix + 'custom-column',
 
     // form
-    FORM_PREFIX: iconPrefix + 'question',
-    FORM_SUFFIX: iconPrefix + 'question',
-    FORM_FOLDING: iconPrefix + 'arrow-top rotate180',
-    FORM_UNFOLDING: iconPrefix + 'arrow-top'
+    FORM_PREFIX: iconPrefix + 'question-circle-fill',
+    FORM_SUFFIX: iconPrefix + 'question-circle-fill',
+    FORM_FOLDING: iconPrefix + 'arrow-up rotate180',
+    FORM_UNFOLDING: iconPrefix + 'arrow-up'
   },
   grid: {
     // size: null,

package/styles/button.scss

@@ -58,11 +58,6 @@ $btnThemeList: (
   &:not(.is--disabled) {
     color: $vxe-font-color;
     cursor: pointer;
-    .vxe-button--icon {
-      &.vxe-icon--zoomin {
-        border-color: $vxe-font-color;
-      }
-    }
   }
   &.is--loading {
     cursor: progress;
@@ -80,11 +75,6 @@ $btnThemeList: (
   }
   &.is--disabled {
     color: $vxe-disabled-color;
-    .vxe-button--icon {
-      &.vxe-icon--zoomin {
-        border-color: $vxe-disabled-color;
-      }
-    }
     &:not(.is--loading) {
       cursor: no-drop;
     }
@@ -140,11 +130,6 @@ $btnThemeList: (
     &:not(.is--disabled) {
       &:hover {
         color: lighten($vxe-primary-color, 6%);
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            border-color: lighten($vxe-primary-color, 6%);
-          }
-        }
       }
       &:focus {
         border-color: $vxe-primary-color;
@@ -154,16 +139,6 @@ $btnThemeList: (
         color: darken($vxe-primary-color, 3%);
         border-color: darken($vxe-primary-color, 3%);
         background-color: darken($vxe-button-default-background-color, 3%);
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            background-color: darken($vxe-button-default-background-color, 3%);
-          }
-          &.vxe-icon--zoomout {
-            &:after {
-              background-color: darken($vxe-button-default-background-color, 3%);
-            }
-          }
-        }
       }
     }
     @for $index from 0 to length($btnThemeList) {
@@ -172,11 +147,6 @@ $btnThemeList: (
       $btnBackground: map-get($item, btnBackground);
       &.theme--#{map-get($item, name)} {
         color: $btnColor;
-        .vxe-button--icon {
-          &.vxe-icon--zoomin {
-            border-color: $btnColor;
-          }
-        }
         &:not(.is--disabled) {
           border-color: $btnBackground;
           background-color: $btnBackground;
@@ -184,24 +154,11 @@ $btnThemeList: (
             color: $btnColor;
             background-color: lighten($btnBackground, 6%);
             border-color: lighten($btnBackground, 6%);
-            .vxe-button--icon {
-              &.vxe-icon--zoomin {
-                border-color: lighten($btnBackground, 6%);
-              }
-            }
           }
           &:active {
             color: $btnColor;
             background-color: darken($btnBackground, 3%);
             border-color: darken($btnBackground, 3%);
-            &.vxe-icon--zoomin {
-              background-color: darken($btnBackground, 3%);
-            }
-            &.vxe-icon--zoomout {
-              &:after {
-                background-color: darken($btnBackground, 3%);
-              }
-            }
           }
         }
         &.is--disabled {
@@ -333,6 +290,7 @@ $btnThemeList: (
 }
 
 .vxe-button--dropdown-arrow {
+  display: inline-block;
   font-size: 12px;
   margin-left: 4px;
   @include animatTransition(transform, .2s);

package/styles/form.scss

@@ -44,9 +44,6 @@
   .vxe-form--item-title-suffix {
     cursor: help;
     vertical-align: middle;
-    & > i {
-      vertical-align: middle;
-    }
   }
   .vxe-form--item-title-prefix {
     margin-right: 0.25em;

package/styles/header.scss

@@ -1,135 +1 @@
 /**Variable**/
-
-.vxe-table {
-  .vxe-table--header-wrapper {
-    color: $vxe-table-header-font-color;
-    .vxe-table--header-border-line {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      height: 0;
-      border-bottom: $vxe-table-border-width solid $vxe-table-border-color;
-    }
-  }
-  /*排序*/
-  .vxe-cell--sort {
-    width: 1.5em;
-    height: 1.35em;
-    vertical-align: middle;
-    text-align: center;
-    display: inline-block;
-    position: relative;
-  }
-  .vxe-sort--asc-btn,
-  .vxe-sort--desc-btn {
-    position: absolute;
-    left: 0.35em;
-    color: $vxe-table-column-icon-border-color;
-    width: 1em;
-    text-align: center;
-    cursor: pointer;
-    &:hover {
-      color: $vxe-table-font-color;
-    }
-    &.sort--active {
-      color: $vxe-primary-color;
-    }
-  }
-  .vxe-sort--asc-btn {
-    top: -0.15em;
-  }
-  .vxe-sort--desc-btn {
-    bottom: -0.15em;
-  }
-}
-
-.vxe-header--column {
-  position: relative;
-  font-weight: $vxe-table-header-font-weight;
-  // user-select: none;
-  &.col--ellipsis {
-    & > .vxe-cell {
-      display: flex;
-      align-items: center;
-      .vxe-cell--title {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      & > i,
-      & > span {
-        &:not(.vxe-cell--title) {
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-  .vxe-cell--required-icon {
-    display: inline-block;
-    color: $vxe-table-validate-error-color;
-    width: 0.8em;
-    height: 1em;
-    line-height: 1em;
-    font-family: $vxe-icon-font-family;
-    font-weight: normal;
-    position: relative;
-    &:before {
-      content: "*";
-      position: absolute;
-      left: 0;
-      top: 0.2em;
-    }
-  }
-  // .vxe-cell--required-icon,
-  // .vxe-cell--edit-icon,
-  // .vxe-cell-help-icon,
-  // .vxe-cell--title {
-  //   vertical-align: middle;
-  // }
-  .vxe-cell--required-icon {
-    margin-right: 0.1em;
-  }
-  .vxe-cell--edit-icon,
-  .vxe-cell-help-icon {
-    margin-right: 0.2em;
-  }
-  .vxe-cell-help-icon {
-    cursor: help;
-  }
-  .vxe-resizable {
-    position: absolute;
-    right: -7px;
-    bottom: 0;
-    width: 14px;
-    height: 100%;
-    text-align: center;
-    z-index: 1;
-    cursor: col-resize;
-    &.is--line {
-      &:before,
-      &:after {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-      }
-      &:before {
-        width: 1px;
-        height: 50%;
-        background-color: $vxe-table-resizable-line-color;
-      }
-      &:after {
-        width: 0;
-        height: 100%;
-      }
-    }
-  }
-}
-
-.vxe-table--fixed-right-wrapper {
-  .vxe-header--column {
-    .vxe-resizable {
-      right: auto;
-      left: -7px;
-    }
-  }
-}