vxe-table 3.12.1-beta.4 → 3.12.1-beta.5

package/es/grid/src/grid.js

@@ -10,6 +10,7 @@ import { warnLog, errLog } from '../../ui/src/log';
 const { getConfig, getI18n, commands, globalEvents, globalMixins, renderEmptyElement } = VxeUI;
 const methods = {};
 const propKeys = Object.keys(tableComponentProps);
+const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']];
 function renderDefaultForm(h, $xeGrid) {
     const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
     const props = $xeGrid;
@@ -274,46 +275,73 @@ function renderPager(h, $xeGrid) {
     }
     return renderEmptyElement($xeGrid);
 }
-const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager'];
-function renderLayout(h, _vm) {
-    const { layouts } = _vm;
-    const vns = [];
-    const currLayouts = (layouts && layouts.length ? layouts : (getConfig().grid.layouts || defaultLayouts));
-    currLayouts.forEach((name) => {
-        switch (name) {
+function renderChildLayout(h, $xeGrid, layoutKeys) {
+    const childVNs = [];
+    layoutKeys.forEach(key => {
+        switch (key) {
             case 'Form':
-                vns.push(renderForm(h, _vm));
+                childVNs.push(renderForm(h, $xeGrid));
                 break;
             case 'Toolbar':
-                vns.push(renderToolbar(h, _vm));
+                childVNs.push(renderToolbar(h, $xeGrid));
                 break;
             case 'Top':
-                vns.push(renderTop(h, _vm));
+                childVNs.push(renderTop(h, $xeGrid));
                 break;
             case 'Table':
-                vns.push(h('div', {
+                childVNs.push(h('div', {
                     key: 'table',
                     class: 'vxe-grid--table-container'
                 }, [
-                    renderTableLeft(h, _vm),
-                    renderTable(h, _vm),
-                    renderTableRight(h, _vm)
+                    renderTableLeft(h, $xeGrid),
+                    renderTable(h, $xeGrid),
+                    renderTableRight(h, $xeGrid)
                 ]));
                 break;
             case 'Bottom':
-                vns.push(renderBottom(h, _vm));
+                childVNs.push(renderBottom(h, $xeGrid));
                 break;
             case 'Pager':
-                vns.push(renderPager(h, _vm));
+                childVNs.push(renderPager(h, $xeGrid));
                 break;
             default:
-                if (process.env.NODE_ENV === 'development') {
-                    errLog('vxe.error.notProp', [`layouts -> ${name}`]);
-                }
+                errLog('vxe.error.notProp', [`layouts -> ${key}`]);
                 break;
         }
     });
-    return vns;
+    return childVNs;
+}
+function renderLayout(h, $xeGrid) {
+    const slots = $xeGrid.$scopedSlots;
+    const currLayoutConf = $xeGrid.computeCurrLayoutConf;
+    const { headKeys, bodyKeys, footKeys } = currLayoutConf;
+    const asideLeftSlot = slots.asideLeft || slots['aside-left'];
+    const asideRightSlot = slots.asideRight || slots['aside-right'];
+    return [
+        h('div', {
+            class: 'vxe-grid--layout-header-wrapper'
+        }, renderChildLayout(h, $xeGrid, headKeys)),
+        h('div', {
+            class: 'vxe-grid--layout-body-wrapper'
+        }, [
+            asideLeftSlot
+                ? h('div', {
+                    class: 'vxe-grid--layout-aside-left-wrapper'
+                }, asideLeftSlot({}))
+                : renderEmptyElement($xeGrid),
+            h('div', {
+                class: 'vxe-grid--layout-body-content-wrapper'
+            }, renderChildLayout(h, $xeGrid, bodyKeys)),
+            asideRightSlot
+                ? h('div', {
+                    class: 'vxe-grid--layout-aside-right-wrapper'
+                }, asideRightSlot({}))
+                : renderEmptyElement($xeGrid)
+        ]),
+        h('div', {
+            class: 'vxe-grid--layout-footer-wrapper'
+        }, renderChildLayout(h, $xeGrid, footKeys))
+    ];
 }
 Object.keys(VxeTableComponent.methods).forEach((name) => {
     methods[name] = function (...args) {
@@ -437,6 +465,36 @@ export default {
             }
             return tableProps;
         },
+        computeCurrLayoutConf() {
+            const $xeGrid = this;
+            const props = $xeGrid;
+            const { layouts } = props;
+            let confs = [];
+            if (layouts && layouts.length) {
+                confs = layouts;
+            }
+            else {
+                confs = getConfig().grid.layouts || defaultLayouts;
+            }
+            let headKeys = [];
+            let bodyKeys = [];
+            let footKeys = [];
+            if (confs.length) {
+                if (XEUtils.isArray(confs[0])) {
+                    headKeys = confs[0];
+                    bodyKeys = (confs[1] || []);
+                    footKeys = (confs[2] || []);
+                }
+                else {
+                    bodyKeys = confs;
+                }
+            }
+            return {
+                headKeys,
+                bodyKeys,
+                footKeys
+            };
+        },
         computePageConfFlag() {
             const $xeGrid = this;
             const pagerOpts = $xeGrid.computePagerOpts;
@@ -516,11 +574,8 @@ export default {
         const $xeGrid = this;
         const props = $xeGrid;
         const reactData = $xeGrid;
-        const slots = $xeGrid.$scopedSlots;
         const vSize = $xeGrid.computeSize;
         const styles = $xeGrid.computeStyles;
-        const asideLeftSlot = slots.asideLeft || slots['aside-left'];
-        const asideRightSlot = slots.asideRight || slots['aside-right'];
         return h('div', {
             class: ['vxe-grid', {
                     [`size--${vSize}`]: vSize,
@@ -530,21 +585,7 @@ export default {
                     'is--loading': props.loading || reactData.tableLoading
                 }],
             style: styles
-        }, [
-            asideLeftSlot
-                ? h('div', {
-                    class: 'vxe-grid--aside-left-wrapper'
-                }, asideLeftSlot.call($xeGrid, {}))
-                : renderEmptyElement($xeGrid),
-            h('div', {
-                class: 'vxe-grid--body-content-wrapper'
-            }, renderLayout(h, $xeGrid)),
-            asideRightSlot
-                ? h('div', {
-                    class: 'vxe-grid--aside-right-wrapper'
-                }, asideRightSlot.call($xeGrid, {}))
-                : renderEmptyElement($xeGrid)
-        ]);
+        }, renderLayout(h, $xeGrid));
     },
     methods: Object.assign(Object.assign(Object.assign({}, methods), { callSlot(slotFunc, params, h, vNodes) {
             if (slotFunc) {

package/es/grid/style.css

@@ -1,8 +1,8 @@
 .vxe-grid {
   position: relative;
-  display: flex;
-  flex-direction: row;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 .vxe-grid.is--loading:before {
   content: "";
@@ -49,17 +49,26 @@
   overflow: hidden;
 }
 
-.vxe-grid--aside-left-wrapper,
-.vxe-grid--aside-right-wrapper {
-  flex-shrink: 0;
+.vxe-grid--layout-body-wrapper {
+  display: flex;
+  flex-direction: row;
   overflow: auto;
+  flex-grow: 1;
 }
 
-.vxe-grid--body-content-wrapper {
+.vxe-grid--layout-body-content-wrapper {
   flex-grow: 1;
   overflow: auto;
 }
 
+.vxe-grid--layout-header-wrapper,
+.vxe-grid--layout-footer-wrapper,
+.vxe-grid--layout-aside-left-wrapper,
+.vxe-grid--layout-aside-left-wrapper {
+  flex-shrink: 0;
+  overflow: auto;
+}
+
 .vxe-grid {
   font-size: var(--vxe-ui-font-size-default);
 }

package/es/grid/style.min.css

@@ -1 +1 @@
-.vxe-grid{position:relative;display:flex;flex-direction:row;overflow:auto}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid--aside-left-wrapper,.vxe-grid--aside-right-wrapper{flex-shrink:0;overflow:auto}.vxe-grid--body-content-wrapper{flex-grow:1;overflow:auto}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}
+.vxe-grid{position:relative;overflow:auto;display:flex;flex-direction:column}.vxe-grid.is--loading:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:99;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxe-ui-loading-background-color)}.vxe-grid.is--loading>.vxe-table .vxe-loading{background-color:transparent}.vxe-grid.is--maximize{position:fixed;top:0;left:0;width:100%;height:100%;padding:.5em 1em;background-color:var(--vxe-ui-layout-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.vxe-grid .vxe-grid--table-container{display:flex;flex-direction:row}.vxe-grid .vxe-grid--left-wrapper,.vxe-grid .vxe-grid--right-wrapper{flex-shrink:0;overflow:auto;outline:0}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.vxe-grid--layout-body-wrapper{display:flex;flex-direction:row;overflow:auto;flex-grow:1}.vxe-grid--layout-body-content-wrapper{flex-grow:1;overflow:auto}.vxe-grid--layout-aside-left-wrapper,.vxe-grid--layout-footer-wrapper,.vxe-grid--layout-header-wrapper{flex-shrink:0;overflow:auto}.vxe-grid{font-size:var(--vxe-ui-font-size-default)}.vxe-grid.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-grid.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-grid.size--mini{font-size:var(--vxe-ui-font-size-mini)}