vxe-table 4.7.0-alpha.1 → 4.7.0-alpha.11

package/README.en.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-A [vue](https://www.npmjs.com/package/vue) based PC form component, support add delete change check, virtual tree, column drag and drop, lazy loading, shortcut menu, data verification, print export, form rendering, custom template, renderer, JSON configuration...
+A [vue](https://www.npmjs.com/package/vue) based PC form component, support add delete change check, virtual tree, column drag and drop, lazy loading, shortcut menu, data verification, import/export/print, form rendering, custom template, renderer, JSON configuration...
 
 * Design concept
   * Efficient and concise API design for modern browsers.
@@ -22,8 +22,10 @@ A [vue](https://www.npmjs.com/package/vue) based PC form component, support add
 * Plan
   * [x] ~~v1.0 Based on vue2.6, Support for all major browsers.~~
   * [x] ~~v2.0 Based on vue2.6, Support for all major browsers.~~
-  * [x] v3.0 Based on vue2.6, supports modern browsers and retains compatibility with IE11.
-  * [x] v4.0 Based on vue3.x, Only support modern browser, not IE.
+  * [x] v3.0 Based on vue2.6+, supports modern browsers and retains compatibility with IE11.
+  * [ ] v3.9 Based on vue2.6+, Reconstruct and split the components into [Vxe table](https://github.com/x-extends/vxe-table) and [Vxe UI](https://github.com/x-extends/vxe-pc-ui). Form Designer, list designer, process designer will be supported.
+  * [x] v4.0 Based on vue3.2+, Only support modern browser, not IE.
+  * [x] v4.7 Based on vue3.2+, Reconstruct and split the components into [Vxe table](https://github.com/x-extends/vxe-table) and [Vxe UI](https://github.com/x-extends/vxe-pc-ui). Form Designer, list designer, process designer will be supported.
 
 ## Browser Support
 

package/README.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件，支持增删改查、虚拟树、列拖拽、懒加载、快捷菜单、数据校验、打印导出、表单渲染、自定义模板、渲染器、JSON 配置式...  
+一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件，支持增删改查、虚拟树、列拖拽、懒加载、快捷菜单、数据校验、导入/导出/打印、表单渲染、自定义模板、渲染器、JSON 配置式...  
 
 * 设计理念
   * 面向现代浏览器，高效的简洁 API 设计
@@ -22,8 +22,10 @@
 * 计划
   * [x] ~~v1.0 基于 vue2.6，支持所有主流的浏览器，实现表格的一切实用的功能~~
   * [x] ~~v2.0 基于 vue2.6，支持所有主流的浏览器，同时兼具功能与性能~~
-  * [x] v3.0 基于 vue2.6，支持现代浏览器并保留兼容 IE11
-  * [x] v4.0 基于 vue3.x，只支持现代浏览器，不支持 IE
+  * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11
+  * [ ] v3.9 基于 vue2.6+，重构拆分组件，分为 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui)，将支持表单设计器、列表你设计器、流程设计器
+  * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
+  * [x] v4.7 基于 vue3.2+，重构拆分组件，分为 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui)，将支持表单设计器、列表你设计器、流程设计器
   * [ ] 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
 
 ## 浏览器支持

package/README.zh-TW.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增刪改查、虛擬樹、列拖拽、懶加載、快捷菜單、數據校驗、打印導出、表單渲染、自定義模板、渲染器、JSON 配置式…
+一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增刪改查、虛擬樹、列拖拽、懶加載、快捷菜單、數據校驗、導入/匯出/列印、表單渲染、自定義模板、渲染器、JSON 配置式…
 
 * 設計理念
   * 面向現代瀏覽器，高效的簡潔 API 設計
@@ -22,8 +22,10 @@
 * 計劃
   * [x] ~~v1.0 基於 vue2.6，支持所有主流的瀏覽器，實現表格的一切實用的功能~~
   * [x] ~~v2.0 基於 vue2.6，支持所有主流的瀏覽器，同時兼具功能與效能~~
-  * [x] v3.0 基於 vue2.6，支持現代瀏覽器並保留相容IE11
+  * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11
+  * [ ] v3.9 基於 vue2.6+，重構拆分組件，分爲 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui)，將支持表單設計器、列表你設計器、流程設計器
   * [x] v4.0 基于 vue3.x，只支持現代瀏覽器，不支持IE
+  * [x] v4.7 基於 vue3.x，重構拆分組件，分爲 [Vxe table](https://github.com/x-extends/vxe-table) 和 [Vxe UI](https://github.com/x-extends/vxe-pc-ui)，將支持表單設計器、列表你設計器、流程設計器
 
 ## 瀏覽器支持
 

package/es/grid/src/grid.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, ref, computed, provide, resolveComponent, reactive, onUnmounted, watch, nextTick, onMounted } from 'vue';
+import { defineComponent, h, ref, computed, provide, resolveComponent, reactive, onUnmounted, watch, nextTick, onMounted, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode } from '../../ui/src/dom';
@@ -349,12 +349,11 @@ export default defineComponent({
         /**
          * 渲染表单
          */
-        const renderForms = () => {
+        const renderForm = () => {
             const { formConfig, proxyConfig } = props;
             const { formData } = reactData;
             const proxyOpts = computeProxyOpts.value;
             const formOpts = computeFormOpts.value;
-            const restVNs = [];
             if ((formConfig && isEnableConf(formOpts)) || slots.form) {
                 let slotVNs = [];
                 if (slots.form) {
@@ -387,21 +386,20 @@ export default defineComponent({
                         })), { onSubmit: submitFormEvent, onReset: resetFormEvent, onSubmitInvalid: submitInvalidEvent, onCollapse: collapseEvent }), formSlots));
                     }
                 }
-                restVNs.push(h('div', {
+                return h('div', {
                     ref: refFormWrapper,
                     key: 'form',
                     class: 'vxe-grid--form-wrapper'
-                }, slotVNs));
+                }, slotVNs);
             }
-            return restVNs;
+            return createCommentVNode();
         };
         /**
          * 渲染工具栏
          */
-        const renderToolbars = () => {
+        const renderToolbar = () => {
             const { toolbarConfig } = props;
             const toolbarOpts = computeToolbarOpts.value;
-            const restVNs = [];
             if ((toolbarConfig && isEnableConf(toolbarOpts)) || slots.toolbar) {
                 let slotVNs = [];
                 if (slots.toolbar) {
@@ -424,72 +422,49 @@ export default defineComponent({
                     }
                     slotVNs.push(h(VxeToolbarComponent, Object.assign({ ref: refToolbar }, toolbarOpts), toolbarSlots));
                 }
-                restVNs.push(h('div', {
+                return h('div', {
                     ref: refToolbarWrapper,
                     key: 'toolbar',
                     class: 'vxe-grid--toolbar-wrapper'
-                }, slotVNs));
+                }, slotVNs);
             }
-            return restVNs;
+            return createCommentVNode();
         };
         /**
          * 渲染表格顶部区域
          */
-        const renderTops = () => {
+        const renderTop = () => {
             if (slots.top) {
-                return [
-                    h('div', {
-                        ref: refTopWrapper,
-                        key: 'top',
-                        class: 'vxe-grid--top-wrapper'
-                    }, slots.top({ $grid: $xeGrid }))
-                ];
+                return h('div', {
+                    ref: refTopWrapper,
+                    key: 'top',
+                    class: 'vxe-grid--top-wrapper'
+                }, slots.top({ $grid: $xeGrid }));
             }
-            return [];
+            return createCommentVNode();
         };
-        const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager'];
-        const renderLayout = () => {
-            const { layouts } = props;
-            const vns = [];
-            const currLayouts = (layouts && layouts.length ? layouts : (getConfig().grid.layouts || defaultLayouts));
-            currLayouts.forEach(name => {
-                switch (name) {
-                    case 'Form':
-                        vns.push(renderForms());
-                        break;
-                    case 'Toolbar':
-                        vns.push(renderToolbars());
-                        break;
-                    case 'Top':
-                        vns.push(renderTops());
-                        break;
-                    case 'Table':
-                        vns.push(renderTables());
-                        break;
-                    case 'Bottom':
-                        vns.push(renderBottoms());
-                        break;
-                    case 'Pager':
-                        vns.push(renderPagers());
-                        break;
-                    default:
-                        if (process.env.NODE_ENV === 'development') {
-                            log.err('vxe.error.notProp', [`layouts -> ${name}`]);
-                        }
-                        break;
-                }
-            });
-            return vns;
+        const renderTableLeft = () => {
+            const leftSlot = slots.left;
+            if (leftSlot) {
+                return h('div', {
+                    class: 'vxe-grid--left-wrapper'
+                }, leftSlot({ $grid: $xeGrid }));
+            }
+            return createCommentVNode();
+        };
+        const renderTableRight = () => {
+            const rightSlot = slots.right;
+            if (rightSlot) {
+                return h('div', {
+                    class: 'vxe-grid--right-wrapper'
+                }, rightSlot({ $grid: $xeGrid }));
+            }
+            return createCommentVNode();
         };
-        const tableCompEvents = {};
-        tableComponentEmits.forEach(name => {
-            const type = XEUtils.camelCase(`on-${name}`);
-            tableCompEvents[type] = (...args) => emit(name, ...args);
-        });
         /**
          * 渲染表格
          */
-        const renderTables = () => {
+        const renderTable = () => {
             const { proxyConfig } = props;
             const tableProps = computeTableProps.value;
             const proxyOpts = computeProxyOpts.value;
@@ -506,38 +481,37 @@ export default defineComponent({
             }
             const slotObj = {};
             if (emptySlot) {
-                slotObj.empty = () => emptySlot({});
+                slotObj.empty = () => emptySlot({ $grid: $xeGrid });
             }
             if (loadingSlot) {
-                slotObj.loading = () => loadingSlot({});
+                slotObj.loading = () => loadingSlot({ $grid: $xeGrid });
             }
-            return [
-                h(VxeTableComponent, Object.assign(Object.assign({ ref: refTable, key: 'table' }, tableProps), tableOns), slotObj)
-            ];
+            return h('div', {
+                class: 'vxe-grid--table-wrapper'
+            }, [
+                h(VxeTableComponent, Object.assign(Object.assign({ ref: refTable }, tableProps), tableOns), slotObj)
+            ]);
         };
         /**
          * 渲染表格底部区域
          */
-        const renderBottoms = () => {
+        const renderBottom = () => {
             if (slots.bottom) {
-                return [
-                    h('div', {
-                        ref: refBottomWrapper,
-                        key: 'bottom',
-                        class: 'vxe-grid--bottom-wrapper'
-                    }, slots.bottom({ $grid: $xeGrid }))
-                ];
+                return h('div', {
+                    ref: refBottomWrapper,
+                    key: 'bottom',
+                    class: 'vxe-grid--bottom-wrapper'
+                }, slots.bottom({ $grid: $xeGrid }));
             }
-            return [];
+            return createCommentVNode();
         };
         /**
          * 渲染分页
          */
-        const renderPagers = () => {
+        const renderPager = () => {
             const { proxyConfig, pagerConfig } = props;
             const proxyOpts = computeProxyOpts.value;
             const pagerOpts = computePagerOpts.value;
-            const restVNs = [];
             if ((pagerConfig && isEnableConf(pagerOpts)) || slots.pager) {
                 let slotVNs = [];
                 if (slots.pager) {
@@ -560,14 +534,60 @@ export default defineComponent({
                     }
                     slotVNs.push(h(resolveComponent('vxe-pager'), Object.assign(Object.assign(Object.assign({ ref: refPager }, pagerOpts), (proxyConfig && isEnableConf(proxyOpts) ? reactData.tablePage : {})), { onPageChange: pageChangeEvent }), pagerSlots));
                 }
-                restVNs.push(h('div', {
+                return h('div', {
                     ref: refPagerWrapper,
                     key: 'pager',
                     class: 'vxe-grid--pager-wrapper'
-                }, slotVNs));
+                }, slotVNs);
             }
-            return restVNs;
+            return createCommentVNode();
+        };
+        const defaultLayouts = ['Form', 'Toolbar', 'Top', 'Table', 'Bottom', 'Pager'];
+        const renderLayout = () => {
+            const { layouts } = props;
+            const vns = [];
+            const currLayouts = (layouts && layouts.length ? layouts : (getConfig().grid.layouts || defaultLayouts));
+            currLayouts.forEach(name => {
+                switch (name) {
+                    case 'Form':
+                        vns.push(renderForm());
+                        break;
+                    case 'Toolbar':
+                        vns.push(renderToolbar());
+                        break;
+                    case 'Top':
+                        vns.push(renderTop());
+                        break;
+                    case 'Table':
+                        vns.push(h('div', {
+                            key: 'table',
+                            class: 'vxe-grid--table-container'
+                        }, [
+                            renderTableLeft(),
+                            renderTable(),
+                            renderTableRight()
+                        ]));
+                        break;
+                    case 'Bottom':
+                        vns.push(renderBottom());
+                        break;
+                    case 'Pager':
+                        vns.push(renderPager());
+                        break;
+                    default:
+                        if (process.env.NODE_ENV === 'development') {
+                            log.err('vxe.error.notProp', [`layouts -> ${name}`]);
+                        }
+                        break;
+                }
+            });
+            return vns;
         };
+        const tableCompEvents = {};
+        tableComponentEmits.forEach(name => {
+            const type = XEUtils.camelCase(`on-${name}`);
+            tableCompEvents[type] = (...args) => emit(name, ...args);
+        });
         const initProxy = () => {
             const { proxyConfig, formConfig } = props;
             const { proxyInited } = reactData;

package/es/grid/style.css

@@ -12,7 +12,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background-color: var(--vxe-loading-background-color);
+  background-color: var(--vxe-ui-loading-background-color);
 }
 .vxe-grid.is--loading > .vxe-table .vxe-loading {
   background-color: transparent;
@@ -24,13 +24,26 @@
   width: 100%;
   height: 100%;
   padding: 0.5em 1em;
-  background-color: var(--vxe-ui-grid-maximize-background-color);
+  background-color: var(--vxe-ui-layout-background-color);
 }
 .vxe-grid .vxe-grid--form-wrapper,
 .vxe-grid .vxe-grid--top-wrapper,
 .vxe-grid .vxe-grid--bottom-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;
+}
+.vxe-grid .vxe-grid--table-wrapper {
+  flex-grow: 1;
+  overflow: hidden;
+}
 
 .vxe-grid {
   font-size: var(--vxe-ui-font-size-default);

package/es/grid/style.min.css

@@ -1 +1 @@
-.vxe-grid{position:relative}.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-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-grid-maximize-background-color)}.vxe-grid .vxe-grid--bottom-wrapper,.vxe-grid .vxe-grid--form-wrapper,.vxe-grid .vxe-grid--top-wrapper{position:relative}.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}.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}.vxe-grid .vxe-grid--table-wrapper{flex-grow:1;overflow:hidden}.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)}