vxe-pc-ui 3.19.5 → 3.19.7

package/packages/row/src/col.ts

@@ -3,9 +3,12 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, globalMixins } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
+import { createComponentLog } from '../../ui/src/log'
 
 import type { ColReactData, VxeColPropTypes, VxeColEmits, VxeRowConstructor, VxeRowPrivateMethods, VxeComponentSizeType, ValueOf } from '../../../types'
 
+const { errLog } = createComponentLog('col')
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeCol',
   mixins: [
@@ -61,31 +64,38 @@ export default /* define-vxe-component start */ defineVxeComponent({
     computeColStyle () {
       const $xeCol = this
       const props = $xeCol
+      const $xeRow = $xeCol.$xeRow
 
       const { width } = props
       const rowGutter = $xeCol.computeRowGutter
       const rowVertical = $xeCol.computeRowVertical
+      let gridLayout = false
+      if ($xeRow) {
+        gridLayout = !!$xeRow.gridLayout
+      }
       const style: Record<string, string | number> = {}
-      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 (!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 (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)
         }
       }
-      if (width) {
-        style.width = toCssUnit(width)
-      }
       return style
     }
   },
@@ -124,6 +134,23 @@ export default /* define-vxe-component start */ defineVxeComponent({
       ])
     }
   },
+  mounted () {
+    const $xeCol = this
+    const props = $xeCol
+    const $xeRow = $xeCol.$xeRow
+
+    const { width, fill } = props
+    if ($xeRow) {
+      if ($xeRow.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'])
+        }
+      }
+    }
+  },
   render (this: any, h) {
     return this.renderVN(h)
   }

package/packages/row/src/row.ts

@@ -3,15 +3,22 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, globalMixins } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
+import { createComponentLog } from '../../ui/src/log'
 
 import type { VxeRowPropTypes, RowReactData, VxeRowEmits, ValueOf } from '../../../types'
 
+const { warnLog } = createComponentLog('row')
+
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeRow',
   mixins: [
     globalMixins.sizeMixin
   ],
   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>,
@@ -42,23 +49,28 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeRow = this
       const props = $xeRow
 
-      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
@@ -84,12 +96,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeRow
       const slots = $xeRow.$scopedSlots
 
-      const { vertical, wrap } = props
+      const { gridLayout, vertical, wrap } = props
       const rowStyle = $xeRow.computeRowStyle
       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
         }],
@@ -100,6 +112,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }, defaultSlot ? defaultSlot({}) : [])
     }
   },
+  mounted () {
+    const $xeRow = this
+    const props = $xeRow
+
+    const { gridLayout, wrap } = props
+    if (gridLayout && !wrap) {
+      warnLog('vxe.error.notSupportProp', ['grid-layout', 'wrap=false', 'wrap=true'])
+    }
+  },
   render (this: any, h) {
     return this.renderVN(h)
   }

package/packages/scrollbar/src/scrollbar.ts

@@ -8,7 +8,7 @@ import VxeLoadingComponent from '../../loading'
 
 import type { ScrollbarReactData, ScrollbarInternalData, VxeScrollbarEmits, ValueOf, VxeScrollbarPropTypes, VxeComponentStyleType } from '../../../types'
 
-const { getConfig, createEvent, domUtils, globalResize, renderEmptyElement } = VxeUI
+const { getConfig, createEvent, domUtils, globalResize, globalEvents, renderEmptyElement } = VxeUI
 
 function createReactData (): ScrollbarReactData {
   return {
@@ -693,6 +693,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
 
     $xeScrollbar.reFlag++
+    globalEvents.on($xeScrollbar, 'resize', () => {
+      $xeScrollbar.reFlag++
+    })
   },
   beforeDestroy () {
     const $xeScrollbar = this
@@ -702,6 +705,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (resizeObserver) {
       resizeObserver.disconnect()
     }
+    globalEvents.off($xeScrollbar, 'resize')
   },
   destroyed () {
     const $xeScrollbar = this

package/styles/components/layout-aside.scss

@@ -12,7 +12,16 @@
     width: var(--vxe-ui-layout-aside-collapse-width);
   }
   &.is--padding {
-    padding: var(--vxe-ui-layout-padding-default);
+    & > .vxe-layout-aside--inner {
+      padding: var(--vxe-ui-layout-padding-default);
+    }
+    & > .vxe-layout-aside--scrollbar{
+      & > .vxe-layout-aside--scrollbar-view {
+        & > .vxe-layout-aside--scrollbar-inner {
+          padding: var(--vxe-ui-layout-padding-default);
+        }
+      }
+    }
   }
 }
 

package/styles/components/layout-body.scss

@@ -5,7 +5,16 @@
   flex-grow: 1;
   overflow: hidden;
   &.is--padding {
-    padding: var(--vxe-ui-layout-padding-double);
+    & > .vxe-layout-body--inner {
+      padding: var(--vxe-ui-layout-padding-double);
+    }
+    & > .vxe-layout-body--scrollbar {
+      & > .vxe-layout-body--scrollbar-view {
+        & >  .vxe-layout-body--scrollbar-inner {
+          padding: var(--vxe-ui-layout-padding-double);
+        }
+      }
+    }
   }
 }
 .vxe-layout-body--inner {

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

package/styles/components/space.scss

@@ -38,6 +38,7 @@
   &.is--fill {
     & > .vxe-space--item {
       flex-grow: 1;
+      min-width: 100%;
     }
   }
 }

package/styles/components/tabs.scss

@@ -732,6 +732,10 @@ $scrollbarOffsetSize: 20px;
   }
 }
 
+.vxe-tabs-slots {
+  display: none;
+}
+
 .vxe-tabs {
   @include getTabsSizeStyle(var(--vxe-ui-font-size-default), var(--vxe-ui-tabs-header-height-default));
   &.size--medium {

package/types/components/row.d.ts

@@ -16,13 +16,15 @@ export interface RowPrivateRef {
 export interface VxeRowPrivateRef extends RowPrivateRef { }
 
 export namespace VxeRowPropTypes {
+  export type GridLayout = boolean
   export type Gutter = string | number | (string | number)[]
   export type Wrap = boolean
   export type Vertical = boolean
   export type Size = VxeComponentSizeType
 }
 
-export interface VxeRowProps {
+export type VxeRowProps = {
+  gridLayout?: VxeRowPropTypes.GridLayout
   gutter?: VxeRowPropTypes.Gutter
   wrap?: VxeRowPropTypes.Wrap
   vertical?: VxeRowPropTypes.Vertical