vxe-pc-ui 4.9.19 → 4.9.21

package/packages/date-range-picker/src/date-range-picker.ts

@@ -48,6 +48,7 @@ export default defineVxeComponent({
     },
     form: String as PropType<VxeDateRangePickerPropTypes.Form>,
     className: String as PropType<VxeDateRangePickerPropTypes.ClassName>,
+    zIndex: Number as PropType<VxeDateRangePickerPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeDateRangePickerPropTypes.Size>,
       default: () => getConfig().dateRangePicker.size || getConfig().size
@@ -668,7 +669,10 @@ export default defineVxeComponent({
 
     // 弹出面板
     const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
+      const { zIndex } = props
+      if (zIndex) {
+        reactData.panelIndex = zIndex
+      } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
     }

package/packages/image/src/group.ts

@@ -16,7 +16,11 @@ export default defineVxeComponent({
       default: () => getConfig().imageGroup.showPreview
     },
     imageStyle: Object as PropType<VxeImageGroupPropTypes.ImageStyle>,
-    size: { type: String as PropType<VxeImageGroupPropTypes.Size>, default: () => getConfig().imageGroup.size || getConfig().size },
+    zIndex: Number as PropType<VxeImageGroupPropTypes.ZIndex>,
+    size: {
+      type: String as PropType<VxeImageGroupPropTypes.Size>,
+      default: () => getConfig().imageGroup.size || getConfig().size
+    },
     toolbarConfig: Object as PropType<VxeImageGroupPropTypes.ToolbarConfig>,
     showPrintButton: {
       type: Boolean as PropType<VxeImageGroupPropTypes.ShowPrintButton>,
@@ -87,7 +91,7 @@ export default defineVxeComponent({
 
     const imageGroupPrivateMethods: ImageGroupPrivateMethods = {
       handleClickImgEvent (evnt, params) {
-        const { showPreview, toolbarConfig, showPrintButton, showDownloadButton } = props
+        const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props
         const { url } = params
         const imgList = computeImgList.value
         if (showPreview && url) {
@@ -97,6 +101,7 @@ export default defineVxeComponent({
             toolbarConfig,
             showPrintButton,
             showDownloadButton,
+            zIndex,
             events: {
               change (eventParams) {
                 $xeImageGroup.dispatchEvent('change', eventParams, eventParams.$event)

package/packages/image/src/image.ts

@@ -17,6 +17,7 @@ export default defineVxeComponent({
     width: [String, Number] as PropType<VxeImagePropTypes.Width>,
     height: [String, Number] as PropType<VxeImagePropTypes.Height>,
     circle: Boolean as PropType<VxeImagePropTypes.Circle>,
+    zIndex: Number as PropType<VxeImagePropTypes.ZIndex>,
     maskClosable: {
       type: Boolean as PropType<VxeImagePropTypes.MaskClosable>,
       default: () => getConfig().image.maskClosable
@@ -136,7 +137,7 @@ export default defineVxeComponent({
     }
 
     const clickEvent = (evnt: MouseEvent) => {
-      const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable } = props
+      const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, maskClosable, zIndex } = props
       const imgList = computeImgList.value
       const imgUrl = computeImgUrl.value
       if ($xeImageGroup) {
@@ -149,6 +150,7 @@ export default defineVxeComponent({
             showPrintButton,
             showDownloadButton,
             maskClosable,
+            zIndex,
             events: {
               change (eventParams) {
                 $xeImage.dispatchEvent('change', eventParams, eventParams.$event)

package/packages/image/src/preview.ts

@@ -31,6 +31,7 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeImagePreviewPropTypes.ShowDownloadButton>,
       default: () => getConfig().imagePreview.showDownloadButton
     },
+    zIndex: Number as PropType<VxeImagePreviewPropTypes.ZIndex>,
     toolbarConfig: Object as PropType<VxeImagePreviewPropTypes.ToolbarConfig>,
     beforeDownloadMethod: Function as PropType<VxeImagePreviewPropTypes.BeforeDownloadMethod>,
     downloadMethod: Function as PropType<VxeImagePreviewPropTypes.DownloadMethod>

package/packages/image/src/util.ts

@@ -10,7 +10,7 @@ export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options)
     const opts = Object.assign({
       escClosable: true
     }, options)
-    const { urlList, activeIndex } = opts
+    const { urlList, activeIndex, zIndex } = opts
     const { rotate, change } = opts.events || {}
     const modalId = XEUtils.uniqueId('image-preview')
     VxeUI.modal.open({
@@ -22,6 +22,7 @@ export const openPreviewImage: VxeImageDefines.PreviewImageFunction = (options)
       showFooter: false,
       padding: false,
       escClosable: opts.escClosable,
+      zIndex,
       className: 'vxe-image-preview-popup-wrapper',
       slots: {
         default () {

package/packages/pulldown/src/pulldown.ts

@@ -18,7 +18,11 @@ export default defineVxeComponent({
       type: String as PropType<VxePulldownPropTypes.Trigger>,
       default: getConfig().pulldown.trigger
     },
-    size: { type: String as PropType<VxePulldownPropTypes.Size>, default: () => getConfig().size },
+    zIndex: Number as PropType<VxePulldownPropTypes.ZIndex>,
+    size: {
+      type: String as PropType<VxePulldownPropTypes.Size>,
+      default: () => getConfig().pulldown.size || getConfig().size
+    },
     options: Array as PropType<VxePulldownPropTypes.Options>,
     className: {
       type: [String, Function] as PropType<VxePulldownPropTypes.ClassName>,
@@ -103,7 +107,10 @@ export default defineVxeComponent({
     let pulldownMethods = {} as PulldownMethods
 
     const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
+      const { zIndex } = props
+      if (zIndex) {
+        reactData.panelIndex = zIndex
+      } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
     }

package/packages/select/src/select.ts

@@ -82,6 +82,7 @@ export default defineVxeComponent({
       type: [String, Number] as PropType<VxeSelectPropTypes.Max>,
       default: null
     },
+    zIndex: Number as PropType<VxeSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeSelectPropTypes.Size>,
       default: () => getConfig().select.size || getConfig().size
@@ -439,7 +440,10 @@ export default defineVxeComponent({
     }
 
     const updateZIndex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
+      const { zIndex } = props
+      if (zIndex) {
+        reactData.panelIndex = zIndex
+      } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
     }

package/packages/split/src/split.ts

@@ -1,6 +1,6 @@
 import { PropType, ref, h, reactive, provide, VNode, computed, watch, nextTick, onMounted, onUnmounted, onActivated } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, getIcon, createEvent, globalEvents, globalResize, renderEmptyElement } from '../../ui'
+import { getConfig, getIcon, createEvent, globalEvents, globalResize, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom'
 import { getGlobalDefaultConfig } from '../../ui/src/utils'
@@ -34,7 +34,11 @@ export default defineVxeComponent({
     itemConfig: Object as PropType<VxeSplitPropTypes.ItemConfig>,
     barConfig: Object as PropType<VxeSplitPropTypes.BarConfig>,
     resizeConfig: Object as PropType<VxeSplitPropTypes.ResizeConfig>,
-    actionConfig: Object as PropType<VxeSplitPropTypes.ActionConfig>
+    actionConfig: Object as PropType<VxeSplitPropTypes.ActionConfig>,
+    size: {
+      type: String as PropType<VxeSplitPropTypes.Size>,
+      default: () => getConfig().split.size || getConfig().size
+    }
   },
   emits: [
     'action-dblclick',
@@ -53,6 +57,8 @@ export default defineVxeComponent({
     const refBarInfoElem = ref<HTMLDivElement>()
     const refResizableSplitTip = ref<HTMLDivElement>()
 
+    const { computeSize } = useSize(props)
+
     const reactData = reactive<SplitReactData>({
       staticItems: [],
       itemList: [],
@@ -725,6 +731,7 @@ export default defineVxeComponent({
     const renderItems = () => {
       const { border, padding, resize, vertical } = props
       const { itemList } = reactData
+      const vSize = computeSize.value
       const resizeOpts = computeResizeOpts.value
       const { immediate } = resizeOpts
       const visibleItems = computeVisibleItems.value
@@ -766,6 +773,7 @@ export default defineVxeComponent({
           h('div', {
             itemid: id,
             class: ['vxe-split-pane', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+              [`size--${vSize}`]: vSize,
               'is--resize': resize,
               'is--padding': padding,
               'is--border': border,
@@ -799,6 +807,7 @@ export default defineVxeComponent({
 
     const renderVN = () => {
       const { vertical, width, height } = props
+      const vSize = computeSize.value
       const resizeOpts = computeResizeOpts.value
       const { immediate, showTip } = resizeOpts
       const defaultSlot = slots.default
@@ -811,7 +820,9 @@ export default defineVxeComponent({
       }
       return h('div', {
         ref: refElem,
-        class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy'],
+        class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+          [`size--${vSize}`]: vSize
+        }],
         style: stys
       }, [
         h('div', {

package/packages/table-select/src/table-select.ts

@@ -41,9 +41,10 @@ export default defineVxeComponent({
     columns: Array as PropType<VxeTableSelectPropTypes.Columns>,
     options: Array as PropType<VxeTableSelectPropTypes.Options>,
     optionProps: Object as PropType<VxeTableSelectPropTypes.OptionProps>,
+    zIndex: Number as PropType<VxeTableSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeTableSelectPropTypes.Size>,
-      default: () => getConfig().select.size || getConfig().size
+      default: () => getConfig().tableSelect.size || getConfig().size
     },
     popupConfig: Object as PropType<VxeTableSelectPropTypes.PopupConfig>,
     gridConfig: Object as PropType<VxeTableSelectPropTypes.GridConfig>,
@@ -349,7 +350,10 @@ export default defineVxeComponent({
     }
 
     const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
+      const { zIndex } = props
+      if (zIndex) {
+        reactData.panelIndex = zIndex
+      } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
     }

package/packages/tabs/src/tabs.ts

@@ -1,6 +1,6 @@
 import { ref, h, reactive, inject, PropType, provide, computed, onUnmounted, watch, nextTick, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } from '../../ui'
+import { createEvent, getConfig, getIcon, globalEvents, permission, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
@@ -43,6 +43,10 @@ export default defineVxeComponent({
     beforeChangeMethod: Function as PropType<VxeTabsPropTypes.BeforeChangeMethod>,
     closeConfig: Object as PropType<VxeTabsPropTypes.CloseConfig>,
     refreshConfig: Object as PropType<VxeTabsPropTypes.RefreshConfig>,
+    size: {
+      type: String as PropType<VxeTabsPropTypes.Size>,
+      default: () => getConfig().tabs.size || getConfig().size
+    },
     // 已废弃
     beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
   },
@@ -63,6 +67,8 @@ export default defineVxeComponent({
 
     const $xeParentTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
 
+    const { computeSize } = useSize(props)
+
     const refElem = ref<HTMLDivElement>()
     const refHeadWrapperElem = ref<HTMLDivElement>()
     const refHeadPrevElem = ref<HTMLDivElement>()
@@ -776,6 +782,7 @@ export default defineVxeComponent({
     const rendetTabBody = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
       const { height, padding, showBody } = props
       const { activeName, cacheTabMaps } = reactData
+      const vSize = computeSize.value
       const tabType = computeTabType.value
       const tabPosition = computeTabPosition.value
       const refreshOpts = computeRefreshOpts.value
@@ -801,6 +808,7 @@ export default defineVxeComponent({
           : renderEmptyElement($xeTabs),
         h('div', {
           class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
+            [`size--${vSize}`]: vSize,
             'is--padding': padding,
             'is--height': height
           }]
@@ -822,6 +830,7 @@ export default defineVxeComponent({
     const renderVN = () => {
       const { height, padding, trigger } = props
       const { activeName } = reactData
+      const vSize = computeSize.value
       const tabOptions = computeTabOptions.value
       const tabStaticOptions = computeTabStaticOptions.value
       const tabType = computeTabType.value
@@ -852,6 +861,7 @@ export default defineVxeComponent({
       return h('div', {
         ref: refElem,
         class: ['vxe-tabs', `pos--${tabPosition}`, `vxe-tabs--${tabType}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
+          [`size--${vSize}`]: vSize,
           'is--padding': padding,
           'is--height': height
         }],

package/packages/tree-select/src/tree-select.ts

@@ -52,6 +52,7 @@ export default defineVxeComponent({
     placement: String as PropType<VxeTreeSelectPropTypes.Placement>,
     options: Array as PropType<VxeTreeSelectPropTypes.Options>,
     optionProps: Object as PropType<VxeTreeSelectPropTypes.OptionProps>,
+    zIndex: Number as PropType<VxeTreeSelectPropTypes.ZIndex>,
     size: {
       type: String as PropType<VxeTreeSelectPropTypes.Size>,
       default: () => getConfig().treeSelect.size || getConfig().size
@@ -356,7 +357,10 @@ export default defineVxeComponent({
     }
 
     const updateZindex = () => {
-      if (reactData.panelIndex < getLastZIndex()) {
+      const { zIndex } = props
+      if (zIndex) {
+        reactData.panelIndex = zIndex
+      } else if (reactData.panelIndex < getLastZIndex()) {
         reactData.panelIndex = nextZIndex()
       }
     }

package/packages/ui/src/dom.ts

@@ -169,7 +169,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
   teleportTo?: boolean
   marginSize?: number
 }) {
-  const { placement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 32 }, options)
+  const { placement, teleportTo, marginSize } = Object.assign({ teleportTo: false, marginSize: 18 }, options)
   let panelPlacement: 'top' | 'bottom' = 'bottom'
   let top: number | '' = ''
   let bottom: number | '' = ''

package/styles/components/card.scss

@@ -10,13 +10,6 @@
   &.is--shadow {
     box-shadow: var(--vxe-ui-base-popup-box-shadow);
   }
-  &.is--padding {
-    .vxe-card--body-content,
-    .vxe-card--body-left,
-    .vxe-card--body-right {
-      padding: var(--vxe-ui-card-padding);
-    }
-  }
   &.is--border {
     border: 1px solid var(--vxe-ui-input-border-color);
     .vxe-card--header {
@@ -35,10 +28,6 @@
 .vxe-card--header {
   flex-shrink: 0;
 }
-.vxe-card--header,
-.vxe-card--footer {
-  padding: var(--vxe-ui-card-padding);
-}
 .vxe-card--body {
   overflow: hidden;
   flex-grow: 1;
@@ -66,3 +55,68 @@
     white-space: nowrap;
   }
 }
+
+.vxe-card {
+  font-size: var(--vxe-ui-font-size-default);
+  & > .vxe-card--header,
+  & > .vxe-card--footer {
+    padding: var(--vxe-ui-card-padding-default);
+  }
+  &.is--padding {
+    & > .vxe-card--body {
+      .vxe-card--body-content,
+      .vxe-card--body-left,
+      .vxe-card--body-right {
+        padding: var(--vxe-ui-card-padding-default);
+      }
+    }
+  }
+  &.size--medium {
+    font-size: var(--vxe-ui-font-size-medium);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-medium);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-medium);
+        }
+      }
+    }
+  }
+  &.size--small {
+    font-size: var(--vxe-ui-font-size-small);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-small);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-small);
+        }
+      }
+    }
+  }
+  &.size--mini {
+    font-size: var(--vxe-ui-font-size-mini);
+    & > .vxe-card--header,
+    & > .vxe-card--footer {
+      padding: var(--vxe-ui-card-padding-mini);
+    }
+    &.is--padding {
+      & > .vxe-card--body {
+        .vxe-card--body-content,
+        .vxe-card--body-left,
+        .vxe-card--body-right {
+          padding: var(--vxe-ui-card-padding-mini);
+        }
+      }
+    }
+  }
+}

package/styles/components/list.scss

@@ -25,4 +25,17 @@
 
 .vxe-list--virtual-wrapper {
   height: 100px;
+}
+
+.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

@@ -13,9 +13,7 @@
     min-height: 4em;
   }
 }
-.vxe-menu,
-.vxe-menu--collapse-wrapper {
-  font-size: var(--vxe-ui-font-size-default);
+.vxe-menu {
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -45,7 +43,6 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: var(--vxe-ui-menu-item-height);
   color: var(--vxe-ui-font-color);
   text-decoration: none;
   user-select: none;
@@ -96,10 +93,6 @@
   }
 }
 
-.vxe-menu--item-level3 {
-  font-size: 13px;
-}
-
 .vxe-menu--item-group {
   display: none;
 }
@@ -121,3 +114,37 @@
     }
   }
 }
+
+.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);
+    }
+  }
+  &.size--small,
+  &.size--mini {
+    .vxe-menu--item-level3 {
+      font-size: 12px;
+    }
+  }
+}

package/styles/components/select.scss

@@ -121,11 +121,9 @@
 .vxe-select-option--wrapper {
   max-height: 18em;
 }
-
 .vxe-select-option {
   position: relative;
   padding: 0 0.6em;
-  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/styles/components/split.scss

@@ -299,4 +299,17 @@
   & > .vxe-split {
     height: 100%;
   }
+}
+
+.vxe-split {
+  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/tabs.scss

@@ -590,7 +590,6 @@ $scrollbarOffsetSize: 20px;
   }
   &.pos--top,
   &.pos--bottom {
-    height: var(--vxe-ui-tabs-header-height-default);
     .vxe-tabs-header--item-wrapper {
       flex-direction: row;
       width: 100%;
@@ -684,21 +683,6 @@ $scrollbarOffsetSize: 20px;
   }
 }
 
-.vxe-tabs {
-  .vxe-tabs-header--item-inner {
-    height: var(--vxe-ui-tabs-header-height-default);
-  }
-  .vxe-tabs-header--active-line {
-    &.type--card {
-      height: var(--vxe-ui-tabs-header-height-default);
-    }
-    &.type--border-card {
-      height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
-      line-height: calc(var(--vxe-ui-tabs-header-height-default) + 1px);
-    }
-  }
-}
-
 .vxe-tabs--default,
 .vxe-tabs--card,
 .vxe-tabs--border-card,
@@ -712,9 +696,44 @@ $scrollbarOffsetSize: 20px;
     border-bottom: 2px solid transparent;
   }
 }
-.vxe-tabs--card,
-.vxe-tabs--round-card {
+
+@mixin getTabsSizeStyle ($fontSize, $headHeight) {
+  font-size: $fontSize;
   .vxe-tabs-header--item-inner {
-    height: calc(var(--vxe-ui-tabs-header-height-default) - 1px);
+    height: $headHeight;
+  }
+  .vxe-tabs-header--active-line {
+    &.type--card {
+      height: $headHeight;
+    }
+    &.type--border-card {
+      height: calc($headHeight + 1px);
+      line-height: calc($headHeight + 1px);
+    }
+  }
+  .vxe-tabs-header--wrapper {
+    &.pos--top,
+    &.pos--bottom {
+      height: $headHeight;
+    }
+  }
+  .vxe-tabs--card,
+  .vxe-tabs--round-card {
+    .vxe-tabs-header--item-inner {
+      height: calc($headHeight - 1px);
+    }
+  }
+}
+
+.vxe-tabs {
+  @include getTabsSizeStyle(var(--vxe-ui-font-size-default), var(--vxe-ui-tabs-header-height-default));
+  &.size--medium {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-medium), var(--vxe-ui-tabs-header-height-medium));
+  }
+  &.size--small {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-small), var(--vxe-ui-tabs-header-height-small));
+  }
+  &.size--mini {
+    @include getTabsSizeStyle(var(--vxe-ui-font-size-mini), var(--vxe-ui-tabs-header-height-mini));
   }
 }

package/styles/theme/base.scss

@@ -30,7 +30,10 @@
   --vxe-ui-layout-aside-collapse-width: 60px;
 
   /*menu*/
-  --vxe-ui-menu-item-height: 44px;
+  --vxe-ui-menu-item-height-default: 44px;
+  --vxe-ui-menu-item-height-medium: 40px;
+  --vxe-ui-menu-item-height-small: 36px;
+  --vxe-ui-menu-item-height-mini: 32px;
   --vxe-ui-menu-icon-width: 1.5em;
 
   /*button*/
@@ -160,7 +163,10 @@
   --vxe-ui-upload-image-wh-mini: 72px;
 
   /*card*/
-  --vxe-ui-card-padding: 12px;
+  --vxe-ui-card-padding-default: 12px;
+  --vxe-ui-card-padding-medium: 10px;
+  --vxe-ui-card-padding-small: 8px;
+  --vxe-ui-card-padding-mini: 6px;
 
   /*tree*/
   --vxe-ui-tree-node-height: 2em;
@@ -181,7 +187,7 @@
   --vxe-ui-calendar-notice-selected-background-color: var(--vxe-ui-calendar-selected-color);
 
   /*split*/
-  --vxe-ui-split-handle-bar-horizontal-width: 10px;
+  --vxe-ui-split-handle-bar-horizontal-width: 0.68em;
   --vxe-ui-split-handle-bar-horizontal-height: 6.8em;
   --vxe-ui-split-handle-bar-vertical-width: var(--vxe-ui-split-handle-bar-horizontal-height);
   --vxe-ui-split-handle-bar-vertical-height: var(--vxe-ui-split-handle-bar-horizontal-width);

package/types/components/button.d.ts

@@ -26,6 +26,7 @@ export interface VxeButtonPrivateRef extends ButtonPrivateRef { }
 
 export namespace VxeButtonPropTypes {
   export type Size = VxeComponentSizeType
+  export type ZIndex = number
   export type Type = string
   export type Mode = null | '' | 'button' | 'text'
   export type ClassName = string | ((params: { $button: VxeButtonConstructor }) => string)
@@ -84,6 +85,7 @@ export namespace VxeButtonPropTypes {
 
 export interface VxeButtonProps {
   size?: VxeButtonPropTypes.Size
+  zIndex?: VxeButtonPropTypes.ZIndex
   /**
    * 按钮类型
    */