vxe-pc-ui 4.19.6 → 4.19.8

package/packages/card/src/card.ts

@@ -1,10 +1,11 @@
 import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading'
-import XEUtils from 'xe-utils'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, ValueOf, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 
@@ -34,7 +35,12 @@ export default defineVxeComponent({
     size: {
       type: String as PropType<VxeCardPropTypes.Size>,
       default: () => getConfig().card.size || getConfig().size
-    }
+    },
+    useScrollbar: {
+      type: Boolean as PropType<VxeCardPropTypes.UseScrollbar>,
+      default: () => getConfig().card.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeCardPropTypes.ScrollbarConfig>
   },
   emits: [
   ] as VxeCardEmits,
@@ -66,6 +72,10 @@ export default defineVxeComponent({
       return stys
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig)
+    })
+
     const computeMaps: VxeCardPrivateComputed = {
       computeSize
     }
@@ -94,7 +104,7 @@ export default defineVxeComponent({
     Object.assign($xeCard, cardMethods, cardPrivateMethods)
 
     const renderVN = () => {
-      const { title, border, shadow, padding, loading, showTitleOverflow } = props
+      const { title, border, shadow, padding, loading, showTitleOverflow, useScrollbar } = props
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const titleSlot = slots.title
@@ -104,6 +114,8 @@ export default defineVxeComponent({
       const rightSlot = slots.right
       const vSize = computeSize.value
       const cardStyle = computeCardStyle.value
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
 
       return h('div', {
         ref: refElem,
@@ -137,17 +149,48 @@ export default defineVxeComponent({
           class: 'vxe-card--body'
         }, [
           leftSlot
-            ? h('div', {
-              class: 'vxe-card--body-left'
-            }, getSlotVNs(leftSlot({})))
+            ? (
+                useScrollbar
+                  ? h(VxeScrollbarComponent, {
+                    class: 'vxe-card--body-scrollbar-left',
+                    ...scrollbarOpts,
+                    viewClassName: 'vxe-card--body-scrollbar-left-view',
+                    viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
+                  }, {
+                    default: () => getSlotVNs(leftSlot({}))
+                  })
+                  : h('div', {
+                    class: 'vxe-card--body-left'
+                  }, getSlotVNs(leftSlot({})))
+              )
             : renderEmptyElement($xeCard),
-          h('div', {
-            class: 'vxe-card--body-content'
-          }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              class: 'vxe-card--body-scrollbar-content',
+              ...scrollbarOpts,
+              viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+              viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            }, {
+              default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
+            })
+            : h('div', {
+              class: 'vxe-card--body-content'
+            }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
           rightSlot
-            ? h('div', {
-              class: 'vxe-card--body-right'
-            }, getSlotVNs(rightSlot({})))
+            ? (
+                useScrollbar
+                  ? h(VxeScrollbarComponent, {
+                    class: 'vxe-card--body-scrollbar-right',
+                    ...scrollbarOpts,
+                    viewClassName: 'vxe-card--body-scrollbar-right-view',
+                    viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
+                  }, {
+                    default: () => getSlotVNs(rightSlot({}))
+                  })
+                  : h('div', {
+                    class: 'vxe-card--body-right'
+                  }, getSlotVNs(rightSlot({})))
+              )
             : renderEmptyElement($xeCard)
         ]),
         footerSlot

package/packages/list/src/list.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, getConfig, getIcon, getI18n, menus, globalEvents, globalResize, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getCrossListDragRowInfo } from './store'
-import { isScale, removeClass, addClass, getTpImg, toCssUnit } from '../../ui/src/dom'
+import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom'
 import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
@@ -419,8 +419,12 @@ export default defineVxeComponent({
     const recalculate = () => {
       const el = refElem.value
       if (el) {
-        const parentEl = el.parentElement
+        let parentEl = el.parentElement
         let parentHeight = 0
+        // 如果是虚拟滚动条
+        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+          parentEl = parentEl.parentElement
+        }
         if (parentEl) {
           const parentStyle = getComputedStyle(parentEl)
           parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight))

package/packages/row/src/col.ts

@@ -1,11 +1,14 @@
-import { ref, h, reactive, computed, PropType, inject } from 'vue'
+import { ref, h, reactive, computed, PropType, inject, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
+import { createComponentLog } from '../../ui/src/log'
 
 import type { ColReactData, VxeColPropTypes, ColPrivateRef, VxeColEmits, ColMethods, ColPrivateMethods, VxeColPrivateComputed, VxeColConstructor, VxeColPrivateMethods, ValueOf, VxeRowConstructor, VxeRowPrivateMethods } from '../../../types'
 
+const { errLog } = createComponentLog('col')
+
 export default defineVxeComponent({
   name: 'VxeCol',
   props: {
@@ -56,26 +59,32 @@ export default defineVxeComponent({
       const { width } = props
       const rowGutter = computeRowGutter.value
       const rowVertical = computeRowVertical.value
+      let gridLayout = false
+      if ($xeRow) {
+        gridLayout = !!$xeRow.props.gridLayout
+      }
       const style: Record<string, string | number> = {}
-      if (rowGutter) {
-        let [lrGutter, tbGutter] = XEUtils.isArray(rowGutter) ? rowGutter : [rowGutter]
-        if (rowVertical) {
-          tbGutter = lrGutter
-          lrGutter = ''
+      if (!gridLayout) {
+        if (rowGutter) {
+          let [lrGutter, tbGutter] = XEUtils.isArray(rowGutter) ? rowGutter : [rowGutter]
+          if (rowVertical) {
+            tbGutter = lrGutter
+            lrGutter = ''
+          }
+          if (lrGutter) {
+            const padding = XEUtils.isNumber(lrGutter) ? toCssUnit(lrGutter / 2) : `calc(${toCssUnit(lrGutter)} / 2)`
+            style.paddingLeft = padding
+            style.paddingRight = padding
+          }
+          if (tbGutter) {
+            const padding = XEUtils.isNumber(tbGutter) ? toCssUnit(tbGutter / 2) : `calc(${toCssUnit(tbGutter)} / 2)`
+            style.paddingTop = padding
+            style.paddingBottom = padding
+          }
         }
-        if (lrGutter) {
-          const padding = XEUtils.isNumber(lrGutter) ? toCssUnit(lrGutter / 2) : `calc(${toCssUnit(lrGutter)} / 2)`
-          style.paddingLeft = padding
-          style.paddingRight = padding
+        if (width) {
+          style.width = toCssUnit(width)
         }
-        if (tbGutter) {
-          const padding = XEUtils.isNumber(tbGutter) ? toCssUnit(tbGutter / 2) : `calc(${toCssUnit(tbGutter)} / 2)`
-          style.paddingTop = padding
-          style.paddingBottom = padding
-        }
-      }
-      if (width) {
-        style.width = toCssUnit(width)
       }
       return style
     })
@@ -126,6 +135,20 @@ export default defineVxeComponent({
       ])
     }
 
+    onMounted(() => {
+      const { width, fill } = props
+      if ($xeRow) {
+        if ($xeRow.props.gridLayout) {
+          if (width) {
+            errLog('vxe.error.notSupportProp', ['grid-layout', `width=${width}`, 'width=null'])
+          }
+          if (fill) {
+            errLog('vxe.error.notSupportProp', ['grid-layout', `fill=${fill}`, 'fill=false'])
+          }
+        }
+      }
+    })
+
     $xeCol.renderVN = renderVN
 
     return $xeCol

package/packages/row/src/row.ts

@@ -1,14 +1,21 @@
-import { ref, h, reactive, provide, PropType, computed } from 'vue'
+import { ref, h, reactive, provide, PropType, computed, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
+import { createComponentLog } from '../../ui/src/log'
 
 import type { VxeRowPropTypes, RowReactData, RowPrivateRef, VxeRowEmits, RowMethods, RowPrivateMethods, VxeRowPrivateComputed, VxeRowConstructor, VxeRowPrivateMethods, ValueOf } from '../../../types'
 
+const { warnLog } = createComponentLog('row')
+
 export default defineVxeComponent({
   name: 'VxeRow',
   props: {
+    gridLayout: {
+      type: Boolean as PropType<VxeRowPropTypes.GridLayout>,
+      default: () => getConfig().row.gridLayout
+    },
     gutter: [Number, String, Array] as PropType<VxeRowPropTypes.Gutter>,
     wrap: {
       type: Boolean as PropType<VxeRowPropTypes.Wrap>,
@@ -40,23 +47,28 @@ export default defineVxeComponent({
     }
 
     const computeRowStyle = computed(() => {
-      const { gutter, vertical } = props
+      const { gridLayout, gutter, vertical } = props
       const style: Record<string, string | number> = {}
       if (gutter) {
         let [lrGutter, tbGutter] = XEUtils.isArray(gutter) ? gutter : [gutter]
-        if (vertical) {
-          tbGutter = lrGutter
-          lrGutter = ''
-        }
-        if (lrGutter) {
-          const offsetSize = XEUtils.isNumber(lrGutter) ? toCssUnit(-(lrGutter / 2)) : `calc(${toCssUnit(lrGutter)} / 2 * -1)`
-          style.marginLeft = offsetSize
-          style.marginRight = offsetSize
-        }
-        if (tbGutter) {
-          const offsetSize = XEUtils.isNumber(tbGutter) ? toCssUnit(-(tbGutter / 2)) : `calc(${toCssUnit(tbGutter)} / 2 * -1)`
-          style.marginTop = offsetSize
-          style.marginBottom = offsetSize
+        if (gridLayout) {
+          style.columnGap = toCssUnit(lrGutter)
+          style.rowGap = toCssUnit(tbGutter || lrGutter)
+        } else {
+          if (vertical) {
+            tbGutter = lrGutter
+            lrGutter = ''
+          }
+          if (lrGutter) {
+            const offsetSize = XEUtils.isNumber(lrGutter) ? toCssUnit(-(lrGutter / 2)) : `calc(${toCssUnit(lrGutter)} / 2 * -1)`
+            style.marginLeft = offsetSize
+            style.marginRight = offsetSize
+          }
+          if (tbGutter) {
+            const offsetSize = XEUtils.isNumber(tbGutter) ? toCssUnit(-(tbGutter / 2)) : `calc(${toCssUnit(tbGutter)} / 2 * -1)`
+            style.marginTop = offsetSize
+            style.marginBottom = offsetSize
+          }
         }
       }
       return style
@@ -93,12 +105,12 @@ export default defineVxeComponent({
     Object.assign($xeRow, rowMethods, rowPrivateMethods)
 
     const renderVN = () => {
-      const { vertical, wrap } = props
+      const { gridLayout, vertical, wrap } = props
       const rowStyle = computeRowStyle.value
       const defaultSlot = slots.default
       return h('div', {
         ref: refElem,
-        class: ['vxe-row', {
+        class: ['vxe-row', gridLayout ? 'grid--layout' : 'def--layout', {
           'is--vertical': vertical,
           'is--wrap': wrap
         }],
@@ -107,6 +119,13 @@ export default defineVxeComponent({
       }, defaultSlot ? defaultSlot({}) : [])
     }
 
+    onMounted(() => {
+      const { gridLayout, wrap } = props
+      if (gridLayout && !wrap) {
+        warnLog('vxe.error.notSupportProp', ['grid-layout', 'wrap=false', 'wrap=true'])
+      }
+    })
+
     provide('$xeRow', $xeRow)
 
     $xeRow.renderVN = renderVN

package/packages/scrollbar/src/scrollbar.ts

@@ -8,7 +8,7 @@ import VxeLoadingComponent from '../../loading'
 
 import type { ScrollbarReactData, ScrollbarInternalData, VxeScrollbarEmits, ScrollbarMethods, ScrollbarPrivateMethods, VxeScrollbarPropTypes, ValueOf, ScrollbarPrivateRef, VxeScrollbarPrivateComputed, VxeScrollbarConstructor, VxeScrollbarPrivateMethods, VxeComponentStyleType } from '../../../types'
 
-const { getConfig, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI
+const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI
 
 function createReactData (): ScrollbarReactData {
   return {
@@ -268,6 +268,9 @@ export default defineVxeComponent({
       if (!viewEl) {
         return
       }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
       const trackXEl = refTrackXElem.value
       const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
       const thumbXElem = refThumbXElem.value
@@ -277,6 +280,7 @@ export default defineVxeComponent({
       reactData.xThumbWidth = xThumbWidth
 
       const trackYEl = refTrackYElem.value
+
       const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
       const thumbYElem = refThumbYElem.value
       if (thumbYElem) {
@@ -290,6 +294,9 @@ export default defineVxeComponent({
       if (!viewEl) {
         return
       }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
       const { xThumbWidth, yThumbHeight } = reactData
       const trackXEl = refTrackXElem.value
       const thumbXElem = refThumbXElem.value
@@ -624,6 +631,10 @@ export default defineVxeComponent({
       }
 
       reFlag.value++
+
+      globalEvents.on($xeScrollbar, 'resize', () => {
+        reFlag.value++
+      })
     })
 
     onBeforeUnmount(() => {
@@ -631,6 +642,7 @@ export default defineVxeComponent({
       if (resizeObserver) {
         resizeObserver.disconnect()
       }
+      globalEvents.off($xeScrollbar, 'resize')
     })
 
     $xeScrollbar.renderVN = renderVN

package/packages/tabs/src/tabs.ts

@@ -7,6 +7,7 @@ import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 
@@ -52,6 +53,11 @@ export default defineVxeComponent({
       type: String as PropType<VxeTabsPropTypes.Size>,
       default: () => getConfig().tabs.size || getConfig().size
     },
+    useScrollbar: {
+      type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
+      default: () => getConfig().tabs.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃
     beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
   },
@@ -165,6 +171,10 @@ export default defineVxeComponent({
       return $xeParentTabs ? $xeParentTabs.reactData.resizeFlag : null
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig)
+    })
+
     const computeMaps: VxeTabsPrivateComputed = {
     }
 
@@ -761,17 +771,33 @@ export default defineVxeComponent({
     }
 
     const renderTabPane = (item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => {
+      const { useScrollbar } = props
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
-      return name && initNames.includes(name)
-        ? h('div', {
-          key: `${name}`,
-          class: ['vxe-tabs-pane--item', {
-            'is--visible': activeName === name
-          }]
-        }, defaultSlot ? callSlot(defaultSlot, { name }) : [])
-        : renderEmptyElement($xeTabs)
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      if (name && initNames.includes(name)) {
+        return useScrollbar
+          ? h(VxeScrollbarComponent, {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--scrollbar-item', {
+              'is--visible': activeName === name
+            }],
+            ...scrollbarOpts,
+            viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+            viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+          }, {
+            default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
+          })
+          : h('div', {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--item', {
+              'is--visible': activeName === name
+            }]
+          }, defaultSlot ? callSlot(defaultSlot, { name }) : [])
+      }
+      return renderEmptyElement($xeTabs)
     }
 
     const renderTabContent = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {

package/packages/tree/src/tree.ts

@@ -6,7 +6,7 @@ import { createComponentLog } from '../../ui/src/log'
 import { getCrossTreeDragNodeInfo } from './store'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
-import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode } from '../../ui/src/dom'
+import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
 import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
@@ -936,11 +936,15 @@ export default defineVxeComponent({
       const { rowHeight } = scrollYStore
       const el = refElem.value
       if (el && el.clientWidth && el.clientHeight) {
-        const parentEl = getParentElem()
+        let parentEl = getParentElem()
         const headerWrapperEl = refHeaderWrapperElem.value
         const footerWrapperEl = refFooterWrapperElem.value
         const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0
         const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0
+        // 如果是虚拟滚动条
+        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+          parentEl = parentEl.parentElement
+        }
         if (parentEl) {
           const parentPaddingSize = getPaddingTopBottomSize(parentEl)
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)

package/styles/components/card.scss

@@ -1,8 +1,34 @@
+// 局部变量
+.vxe-card {
+  --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-default);
+  &.size--xlarge {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-large);
+  }
+  &.size--medium {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-medium);
+  }
+  &.size--small {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-small);
+  }
+  &.size--mini {
+    --vxe-ui-card-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-card-current-padding: var(--vxe-ui-card-padding-mini);
+  }
+}
+
 .vxe-card {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  font-size: var(--vxe-ui-font-size-default);
+  font-size: var(--vxe-ui-card-current-font-size);
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
   background-color: var(--vxe-ui-layout-background-color);
@@ -33,19 +59,25 @@
   flex-grow: 1;
 }
 .vxe-card--body-left,
+.vxe-card--body-scrollbar-left,
 .vxe-card--body-right,
-.vxe-card--body-content {
+.vxe-card--body-scrollbar-right,
+.vxe-card--body-content,
+.vxe-card--body-scrollbar-content {
   overflow: auto;
 }
 .vxe-card--header,
 .vxe-card--header-extra,
 .vxe-card--footer,
 .vxe-card--body-left,
-.vxe-card--body-right {
+.vxe-card--body-scrollbar-left,
+.vxe-card--body-right,
+.vxe-card--body-scrollbar-right {
   flex-shrink: 0;
 }
 .vxe-card--header-title,
-.vxe-card--body-content {
+.vxe-card--body-content,
+.vxe-card--body-scrollbar-content {
   flex-grow: 1;
 }
 .vxe-card--header-title {
@@ -57,66 +89,20 @@
 }
 
 .vxe-card {
-  font-size: var(--vxe-ui-font-size-default);
   & > .vxe-card--header,
   & > .vxe-card--footer {
-    padding: var(--vxe-ui-card-padding-default);
+    padding: var(--vxe-ui-card-current-padding);
   }
   &.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);
-        }
+      .vxe-card--body-scrollbar-left-view,
+      .vxe-card--body-right,
+      .vxe-card--body-scrollbar-right-view,
+      .vxe-card--body-content,
+      .vxe-card--body-scrollbar-content-view {
+        padding: var(--vxe-ui-card-current-padding);
       }
     }
   }
-}
+}

package/styles/components/row.scss

@@ -36,9 +36,27 @@
   &.align--right {
     text-align: right;
   }
-  @for $i from 0 to list.length(base_var.$colSpanList) {
-    &.span#{$i + 1} {
-      width: list.nth(base_var.$colSpanList, $i + 1);
+}
+
+.vxe-row {
+  &.def--layout {
+    & > .vxe-col {
+      @for $i from 0 to list.length(base_var.$colSpanList) {
+        &.span#{$i + 1} {
+          width: list.nth(base_var.$colSpanList, $i + 1);
+        }
+      }
+    }
+  }
+  &.grid--layout {
+    display: grid;
+    grid-template-columns: repeat(24, minmax(0, 1fr));
+    & > .vxe-col {
+      @for $i from 0 to list.length(base_var.$colSpanList) {
+        &.span#{$i + 1} {
+          grid-column: span $i + 1;
+        }
+      }
     }
   }
 }