vxe-pc-ui 4.9.18 → 4.9.20

package/lib/vxe-tooltip/style/style.css

@@ -4,9 +4,7 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  max-width: 600px;
   border-radius: var(--vxe-ui-base-border-radius);
-  padding: 8px 12px;
   white-space: normal;
   word-break: break-word;
   box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
@@ -17,7 +15,7 @@
   pointer-events: none;
 }
 .vxe-tooltip--wrapper.is--visible {
-  display: block;
+  display: inline-block;
 }
 .vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow {
   display: block;
@@ -31,7 +29,12 @@
   background-color: transparent;
 }
 .vxe-tooltip--wrapper .vxe-tooltip--content {
+  padding: 8px 12px;
+  max-width: 600px;
+  max-height: 800px;
   white-space: pre-line;
+  border-radius: var(--vxe-ui-base-border-radius);
+  overflow: auto;
 }
 .vxe-tooltip--wrapper .vxe-tooltip--arrow {
   display: none;
@@ -63,10 +66,10 @@
   top: -6px;
 }
 .vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow {
-  top: -12px;
+  top: -11px;
 }
 .vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before {
-  top: -4px;
+  top: -3px;
 }
 
 .vxe-tooltip--wrapper.theme--light {

package/lib/vxe-tooltip/style/style.min.css

@@ -1 +1 @@
-.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;max-width:600px;border-radius:var(--vxe-ui-base-border-radius);padding:8px 12px;white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tooltip--wrapper:not(.is--enterable){pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper .vxe-tooltip--content{white-space:pre-line}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-12px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-4px}.vxe-tooltip--wrapper.theme--light{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}
+.vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tooltip--wrapper:not(.is--enterable){pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper .vxe-tooltip--content{padding:8px 12px;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--wrapper.theme--light{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.9.18",
+  "version": "4.9.20",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/card/src/card.ts

@@ -1,7 +1,7 @@
 import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getSlotVNs } from '../../ui/src/vn'
-import { getConfig, createEvent, renderEmptyElement } from '../../ui'
+import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
@@ -30,6 +30,10 @@ export default defineVxeComponent({
     padding: {
       type: Boolean as PropType<VxeCardPropTypes.Padding>,
       default: () => getConfig().card.padding
+    },
+    size: {
+      type: String as PropType<VxeCardPropTypes.Size>,
+      default: () => getConfig().card.size || getConfig().size
     }
   },
   emits: [
@@ -41,6 +45,8 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
 
+    const { computeSize } = useSize(props)
+
     const reactData = reactive<CardReactData>({
     })
 
@@ -61,6 +67,7 @@ export default defineVxeComponent({
     })
 
     const computeMaps: VxeCardPrivateComputed = {
+      computeSize
     }
 
     const $xeCard = {
@@ -95,11 +102,13 @@ export default defineVxeComponent({
       const footerSlot = slots.footer
       const leftSlot = slots.left
       const rightSlot = slots.right
+      const vSize = computeSize.value
       const cardStyle = computeCardStyle.value
 
       return h('div', {
         ref: refElem,
         class: ['vxe-card', {
+          [`size--${vSize}`]: vSize,
           'is--border': border,
           'is--shadow': shadow,
           'is--padding': padding

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/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/text/src/text.ts

@@ -125,6 +125,13 @@ export default defineVxeComponent({
       }
     }
 
+    const dblclickEvent = (evnt : MouseEvent) => {
+      const { loading } = props
+      if (!loading) {
+        dispatchEvent('dblclick', {}, evnt)
+      }
+    }
+
     const prefixEvent = (evnt : MouseEvent) => {
       const { loading } = props
       if (!loading) {
@@ -202,7 +209,9 @@ export default defineVxeComponent({
         h('span', {
           key: 'ct',
           ref: refContentElem,
-          class: 'vxe-text--content'
+          class: 'vxe-text--content',
+          onClick: clickEvent,
+          onDblclick: dblclickEvent
         }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content))
       )
       if (suffixIcon) {
@@ -237,8 +246,7 @@ export default defineVxeComponent({
           [`theme--${status}`]: status,
           'is--copy': clickToCopy,
           'is--loading': loading
-        }],
-        onClick: clickEvent
+        }]
       }, renderContent())
     }
 

package/packages/tooltip/src/tooltip.ts

@@ -1,12 +1,12 @@
-import { h, ref, Ref, nextTick, onBeforeUnmount, onMounted, reactive, watch, PropType } from 'vue'
+import { h, ref, nextTick, onBeforeUnmount, onMounted, computed, reactive, watch, PropType, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
-import { getAbsolutePos, getDomNode } from '../../ui/src/dom'
+import { getAbsolutePos, getDomNode, toCssUnit } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types'
+import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipReactData, TooltipMethods, TooltipPrivateRef, VxeComponentStyleType } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeTooltip',
@@ -32,6 +32,30 @@ export default defineVxeComponent({
     useHTML: Boolean as PropType<VxeTooltipPropTypes.UseHTML>,
     zIndex: [String, Number] as PropType<VxeTooltipPropTypes.ZIndex>,
     popupClassName: [String, Function] as PropType<VxeTooltipPropTypes.PopupClassName>,
+    width: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.Width>,
+      default: () => getConfig().tooltip.Width
+    },
+    height: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.Height>,
+      default: () => getConfig().tooltip.height
+    },
+    minWidth: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.MinWidth>,
+      default: () => getConfig().tooltip.minWidth
+    },
+    minHeight: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.MinHeight>,
+      default: () => getConfig().tooltip.minHeight
+    },
+    maxWidth: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.MaxWidth>,
+      default: () => getConfig().tooltip.maxWidth
+    },
+    maxHeight: {
+      type: [String, Number] as PropType<VxeTooltipPropTypes.MaxHeight>,
+      default: () => getConfig().tooltip.maxHeight
+    },
     isArrow: {
       type: Boolean as PropType<VxeTooltipPropTypes.IsArrow>,
       default: () => getConfig().tooltip.isArrow
@@ -77,7 +101,32 @@ export default defineVxeComponent({
     const internalData: TooltipInternalData = {
     }
 
-    const refElem = ref() as Ref<HTMLDivElement>
+    const refElem = ref<HTMLDivElement>()
+    const contentWrapperfElem = ref<HTMLDivElement>()
+
+    const computeWrapperStyle = computed(() => {
+      const { width, height, minHeight, minWidth, maxHeight, maxWidth } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      if (height) {
+        stys.height = toCssUnit(height)
+      }
+      if (minWidth) {
+        stys.minWidth = toCssUnit(minWidth)
+      }
+      if (minHeight) {
+        stys.minHeight = toCssUnit(minHeight)
+      }
+      if (maxWidth) {
+        stys.maxWidth = toCssUnit(maxWidth)
+      }
+      if (maxHeight) {
+        stys.maxHeight = toCssUnit(maxHeight)
+      }
+      return stys
+    })
 
     const refMaps: TooltipPrivateRef = {
       refElem
@@ -100,6 +149,9 @@ export default defineVxeComponent({
         const { scrollTop, scrollLeft, visibleWidth } = getDomNode()
         const { top, left } = getAbsolutePos(tipTarget)
         const el = refElem.value
+        if (!el) {
+          return
+        }
         const marginSize = 6
         const offsetHeight = el.offsetHeight
         const offsetWidth = el.offsetWidth
@@ -276,29 +328,42 @@ export default defineVxeComponent({
       }
     }
 
+    const wheelEvent = (evnt: Event) => {
+      evnt.stopPropagation()
+    }
+
     Object.assign($xeTooltip, tooltipMethods)
 
     const renderContent = () => {
       const { useHTML } = props
       const { tipContent } = reactData
+      const wrapperStyle = computeWrapperStyle.value
       const contentSlot = slots.content
+      const contVNs: VNode[] = []
       if (contentSlot) {
-        return h('div', {
-          key: 1,
-          class: 'vxe-tooltip--content'
-        }, getSlotVNs(contentSlot({})))
-      }
-      if (useHTML) {
-        return h('div', {
-          key: 2,
-          class: 'vxe-tooltip--content',
-          innerHTML: tipContent
-        })
+        contVNs.push(
+          h('div', {
+            key: 1
+          }, getSlotVNs(contentSlot({})))
+        )
+      } else if (useHTML) {
+        contVNs.push(
+          h('div', {
+            key: 2,
+            innerHTML: tipContent
+          })
+        )
+      } else {
+        contVNs.push(h('span', {
+          key: 3
+        }, `${tipContent}`))
       }
       return h('div', {
         key: 3,
-        class: 'vxe-tooltip--content'
-      }, `${tipContent}`)
+        ref: contentWrapperfElem,
+        class: 'vxe-tooltip--content',
+        style: wrapperStyle
+      }, contVNs)
     }
 
     const renderVN = () => {
@@ -355,6 +420,10 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
+      const contentWrapperfEl = contentWrapperfElem.value
+      if (contentWrapperfEl) {
+        contentWrapperfEl.addEventListener('wheel', wheelEvent, { passive: false })
+      }
       nextTick(() => {
         const { trigger, content } = props
         const wrapperElem = refElem.value
@@ -397,6 +466,10 @@ export default defineVxeComponent({
         target.onmouseleave = null
         target.onclick = null
       }
+      const contentWrapperfEl = contentWrapperfElem.value
+      if (contentWrapperfEl) {
+        contentWrapperfEl.removeEventListener('wheel', wheelEvent)
+      }
       if (wrapperElem) {
         const parentNode = wrapperElem.parentNode
         if (parentNode) {

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);
+  }
 }