vxe-table 4.6.5 → 4.6.6

package/es/button/style.css

@@ -381,13 +381,13 @@
   min-width: var(--vxe-font-size-mini);
 }
 
-.vxe-input + .vxe-button-warpper, .vxe-input + .vxe-button.type--button, .vxe-input + .vxe-button--dropdown,
-.vxe-button + .vxe-button-warpper,
+.vxe-input + .vxe-button-wrapper, .vxe-input + .vxe-button.type--button, .vxe-input + .vxe-button--dropdown,
+.vxe-button + .vxe-button-wrapper,
 .vxe-button + .vxe-button.type--button,
 .vxe-button + .vxe-button--dropdown,
-.vxe-button-warpper + .vxe-button-warpper,
-.vxe-button-warpper + .vxe-button.type--button,
-.vxe-button-warpper + .vxe-button--dropdown {
+.vxe-button-wrapper + .vxe-button-wrapper,
+.vxe-button-wrapper + .vxe-button.type--button,
+.vxe-button-wrapper + .vxe-button--dropdown {
   margin-left: 12px;
 }
 
@@ -408,7 +408,7 @@
 .vxe-button--dropdown {
   position: relative;
 }
-.vxe-button--dropdown + .vxe-button-warpper, .vxe-button--dropdown + .vxe-button.type--button, .vxe-button--dropdown + .vxe-button--dropdown {
+.vxe-button--dropdown + .vxe-button-wrapper, .vxe-button--dropdown + .vxe-button.type--button, .vxe-button--dropdown + .vxe-button--dropdown {
   margin-left: 12px;
 }
 .vxe-button--dropdown > .vxe-button.type--button.theme--primary {

package/es/checkbox/src/group.js

@@ -40,6 +40,10 @@ export default defineComponent({
             const propsOpts = computePropsOpts.value;
             return propsOpts.value || 'value';
         });
+        const computeDisabledField = computed(() => {
+            const propsOpts = computePropsOpts.value;
+            return propsOpts.disabled || 'disabled';
+        });
         const computeMaps = {
             computeIsMaximize
         };
@@ -82,12 +86,14 @@ export default defineComponent({
             const defaultSlot = slots.default;
             const valueField = computeValueField.value;
             const labelField = computeLabelField.value;
+            const disabledField = computeDisabledField.value;
             return h('div', {
                 class: 'vxe-checkbox-group'
             }, defaultSlot ? defaultSlot({}) : (options ? options.map(item => {
                 return h(VxeCheckboxComponent, {
                     label: item[valueField],
-                    content: item[labelField]
+                    content: item[labelField],
+                    disabled: item[disabledField]
                 });
             }) : []));
         };

package/es/custom/src/hook.js

@@ -28,6 +28,7 @@ const customHook = {
             const { initStore, customStore } = reactData;
             customStore.visible = true;
             initStore.custom = true;
+            reactData.customColumnList = internalData.collectColumn.slice(0);
             checkCustomStatus();
             calcMaxHeight();
             return nextTick().then(() => calcMaxHeight());

package/es/custom/src/panel.js

@@ -1,5 +1,7 @@
-import { defineComponent, h, inject, ref } from 'vue';
+import { defineComponent, h, inject, ref, TransitionGroup } from 'vue';
+import { VXETable } from '../../v-x-e-table';
 import { formatText } from '../../tools/utils';
+import { addClass, removeClass } from '../../tools/dom';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import VxeModalComponent from '../../modal/src/modal';
 import VxeButtonComponent from '../../button/src/button';
@@ -15,9 +17,13 @@ export default defineComponent({
     },
     setup(props) {
         const $xetable = inject('$xetable', {});
-        const { internalData } = $xetable;
+        const { reactData } = $xetable;
         const { computeCustomOpts, computeIsMaxFixedColumn } = $xetable.getComputeMaps();
         const refElem = ref();
+        const bodyElemRef = ref();
+        const dragHintElemRef = ref();
+        const dragColumn = ref();
+        let prevDropTrEl;
         const handleWrapperMouseenterEvent = (evnt) => {
             const { customStore } = props;
             customStore.activeWrapper = true;
@@ -46,11 +52,24 @@ export default defineComponent({
             $xetable.emitCustomEvent('reset', evnt);
         };
         const resetPopupCustomEvent = (evnt) => {
-            resetCustomEvent(evnt);
+            if (VXETable.modal) {
+                VXETable.modal.confirm({
+                    content: GlobalConfig.i18n('vxe.custom.cstmConfirmRestore'),
+                    className: 'vxe-table--ignore-clear',
+                    escClosable: true
+                }).then(type => {
+                    if (type === 'confirm') {
+                        resetCustomEvent(evnt);
+                    }
+                });
+            }
+            else {
+                resetCustomEvent(evnt);
+            }
         };
         const handleOptionCheck = (column) => {
-            const { collectColumn } = internalData;
-            const matchObj = XEUtils.findTree(collectColumn, item => item === column);
+            const { customColumnList } = reactData;
+            const matchObj = XEUtils.findTree(customColumnList, item => item === column);
             if (matchObj && matchObj.parent) {
                 const { parent } = matchObj;
                 if (parent.children && parent.children.length) {
@@ -92,11 +111,11 @@ export default defineComponent({
         };
         const allCustomEvent = () => {
             const { customStore } = props;
-            const { collectColumn } = internalData;
+            const { customColumnList } = reactData;
             const customOpts = computeCustomOpts.value;
             const { checkMethod } = customOpts;
             const isAll = !customStore.isAll;
-            XEUtils.eachTree(collectColumn, (column) => {
+            XEUtils.eachTree(customColumnList, (column) => {
                 if (!checkMethod || checkMethod({ column })) {
                     column.visible = isAll;
                     column.halfVisible = false;
@@ -105,9 +124,111 @@ export default defineComponent({
             customStore.isAll = isAll;
             $xetable.checkCustomStatus();
         };
+        const sortMousedownEvent = (evnt) => {
+            const btnEl = evnt.currentTarget;
+            const tdEl = btnEl.parentNode;
+            const trEl = tdEl.parentNode;
+            const colid = trEl.getAttribute('colid');
+            const column = $xetable.getColumnById(colid);
+            trEl.draggable = true;
+            dragColumn.value = column;
+            addClass(trEl, 'active--drag-origin');
+        };
+        const sortMouseupEvent = (evnt) => {
+            const btnEl = evnt.currentTarget;
+            const tdEl = btnEl.parentNode;
+            const trEl = tdEl.parentNode;
+            const dragHintEl = dragHintElemRef.value;
+            trEl.draggable = false;
+            dragColumn.value = null;
+            removeClass(trEl, 'active--drag-origin');
+            if (dragHintEl) {
+                dragHintEl.style.display = '';
+            }
+        };
+        const sortDragstartEvent = (evnt) => {
+            const img = new Image();
+            if (evnt.dataTransfer) {
+                evnt.dataTransfer.setDragImage(img, 0, 0);
+            }
+        };
+        const sortDragendEvent = (evnt) => {
+            const { customColumnList } = reactData;
+            const trEl = evnt.currentTarget;
+            const dragHintEl = dragHintElemRef.value;
+            if (prevDropTrEl) {
+                // 判断是否有拖动
+                if (prevDropTrEl !== trEl) {
+                    const dragOffset = prevDropTrEl.getAttribute('drag-pos');
+                    const colid = trEl.getAttribute('colid');
+                    const column = $xetable.getColumnById(colid);
+                    if (!column) {
+                        return;
+                    }
+                    const cIndex = XEUtils.findIndexOf(customColumnList, item => item.id === column.id);
+                    const targetColid = prevDropTrEl.getAttribute('colid');
+                    const targetColumn = $xetable.getColumnById(targetColid);
+                    if (!targetColumn) {
+                        return;
+                    }
+                    // 移出源位置
+                    customColumnList.splice(cIndex, 1);
+                    const tcIndex = XEUtils.findIndexOf(customColumnList, item => item.id === targetColumn.id);
+                    // 插新位置
+                    customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+                }
+                prevDropTrEl.draggable = false;
+                prevDropTrEl.removeAttribute('drag-pos');
+                removeClass(prevDropTrEl, 'active--drag-target');
+            }
+            dragColumn.value = null;
+            trEl.draggable = false;
+            trEl.removeAttribute('drag-pos');
+            if (dragHintEl) {
+                dragHintEl.style.display = '';
+            }
+            removeClass(trEl, 'active--drag-target');
+            removeClass(trEl, 'active--drag-origin');
+            // 更新顺序
+            customColumnList.forEach((column, index) => {
+                column.renderSortNumber = index;
+            });
+        };
+        const sortDragoverEvent = (evnt) => {
+            const trEl = evnt.currentTarget;
+            if (prevDropTrEl !== trEl) {
+                removeClass(prevDropTrEl, 'active--drag-target');
+            }
+            const colid = trEl.getAttribute('colid');
+            const column = $xetable.getColumnById(colid);
+            // 是否移入有效元行
+            if (column && column.level === 1) {
+                evnt.preventDefault();
+                const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+                const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+                addClass(trEl, 'active--drag-target');
+                trEl.setAttribute('drag-pos', dragOffset);
+                prevDropTrEl = trEl;
+            }
+            updateDropHint(evnt);
+        };
+        const updateDropHint = (evnt) => {
+            const dragHintEl = dragHintElemRef.value;
+            const bodyEl = bodyElemRef.value;
+            if (!bodyEl) {
+                return;
+            }
+            if (dragHintEl) {
+                const warpperEl = bodyEl.parentNode;
+                const warpperRect = warpperEl.getBoundingClientRect();
+                dragHintEl.style.display = 'block';
+                dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`;
+                dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`;
+            }
+        };
         const renderSimplePanel = () => {
             const { customStore } = props;
-            const { collectColumn } = internalData;
+            const { customColumnList } = reactData;
             const customOpts = computeCustomOpts.value;
             const { maxHeight } = customStore;
             const { checkMethod, visibleMethod, trigger } = customOpts;
@@ -119,7 +240,7 @@ export default defineComponent({
                 customWrapperOns.onMouseenter = handleWrapperMouseenterEvent;
                 customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent;
             }
-            XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
                 const isVisible = visibleMethod ? visibleMethod({ column }) : true;
                 if (isVisible) {
                     const isChecked = column.visible;
@@ -235,12 +356,12 @@ export default defineComponent({
         };
         const renderPopupPanel = () => {
             const { customStore } = props;
-            const { collectColumn } = internalData;
+            const { customColumnList } = reactData;
             const customOpts = computeCustomOpts.value;
             const { checkMethod, visibleMethod } = customOpts;
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
             const trVNs = [];
-            XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+            XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
                 const isVisible = visibleMethod ? visibleMethod({ column }) : true;
                 if (isVisible) {
                     const isChecked = column.visible;
@@ -250,12 +371,29 @@ export default defineComponent({
                     const isDisabled = checkMethod ? !checkMethod({ column }) : false;
                     trVNs.push(h('tr', {
                         key: column.id,
-                        class: [`vxe-table-custom-popup--row-level${column.level}`, {
+                        colid: column.id,
+                        class: [`vxe-table-custom-popup--row level--${column.level}`, {
                                 'is--group': isColGroup
-                            }]
+                            }],
+                        onDragstart: sortDragstartEvent,
+                        onDragend: sortDragendEvent,
+                        onDragover: sortDragoverEvent
                     }, [
                         h('td', {
-                            class: 'vxe-table-custom-popup--column-name'
+                            class: 'vxe-table-custom-popup--column-item col--sort'
+                        }, [
+                            column.level === 1 ? h('span', {
+                                class: 'vxe-table-custom-popup--column-sort-btn',
+                                onMousedown: sortMousedownEvent,
+                                onMouseup: sortMouseupEvent
+                            }, [
+                                h('i', {
+                                    class: 'vxe-icon-sort'
+                                })
+                            ]) : null
+                        ]),
+                        h('td', {
+                            class: 'vxe-table-custom-popup--column-item col--name'
                         }, [
                             h('div', {
                                 class: 'vxe-table-custom-popup--name',
@@ -263,7 +401,7 @@ export default defineComponent({
                             }, colTitle)
                         ]),
                         h('td', {
-                            class: 'vxe-table-custom-popup--column-visiblw'
+                            class: 'vxe-table-custom-popup--column-item col--visible'
                         }, [
                             h('div', {
                                 class: ['vxe-table-custom--checkbox-option', {
@@ -283,17 +421,16 @@ export default defineComponent({
                             ])
                         ]),
                         h('td', {
-                            class: 'vxe-table-custom-popup--column-fixed'
+                            class: 'vxe-table-custom-popup--column-item col--fixed'
                         }, [
                             !parent && customOpts.allowFixed ? h(VxeRadioGroupComponent, {
                                 modelValue: column.fixed || '',
-                                disabled: isMaxFixedColumn,
                                 type: 'button',
                                 size: 'mini',
                                 options: [
-                                    { label: '左侧', value: 'left' },
-                                    { label: '不固定', value: '' },
-                                    { label: '右侧', value: 'right' }
+                                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
+                                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '' },
+                                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
                                 ],
                                 'onUpdate:modelValue'(value) {
                                     column.fixed = value;
@@ -308,46 +445,71 @@ export default defineComponent({
             });
             return h(VxeModalComponent, {
                 key: 'popup',
-                className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
+                className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear',
                 modelValue: customStore.visible,
                 title: GlobalConfig.i18n('vxe.custom.cstmTitle'),
-                width: 700,
-                maxHeight: 500,
+                width: '40vw',
+                minWidth: 500,
+                height: '50vh',
+                minHeight: 300,
                 mask: true,
                 lockView: true,
                 showFooter: true,
+                resize: true,
                 escClosable: true,
+                destroyOnClose: true,
                 'onUpdate:modelValue'(value) {
                     customStore.visible = value;
                 }
             }, {
                 default: () => {
                     return h('div', {
+                        ref: bodyElemRef,
                         class: 'vxe-table-custom-popup--body'
                     }, [
-                        h('table', {}, [
-                            h('colgroup', {}, [
-                                h('col'),
-                                h('col', {
-                                    style: {
-                                        width: '80px'
-                                    }
-                                }),
-                                h('col', {
-                                    style: {
-                                        width: '200px'
-                                    }
+                        h('div', {
+                            class: 'vxe-table-custom-popup--table-wrapper'
+                        }, [
+                            h('table', {}, [
+                                h('colgroup', {}, [
+                                    h('col', {
+                                        style: {
+                                            width: '60px'
+                                        }
+                                    }),
+                                    h('col'),
+                                    h('col', {
+                                        style: {
+                                            width: '80px'
+                                        }
+                                    }),
+                                    h('col', {
+                                        style: {
+                                            width: '200px'
+                                        }
+                                    })
+                                ]),
+                                h('thead', {}, [
+                                    h('tr', {}, [
+                                        h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colSort')),
+                                        h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colTitle')),
+                                        h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colVisible')),
+                                        h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colFixed'))
+                                    ])
+                                ]),
+                                h(TransitionGroup, {
+                                    class: 'vxe-table-custom--body',
+                                    tag: 'tbody',
+                                    name: 'vxe-table-custom--flip'
+                                }, {
+                                    default: () => trVNs
                                 })
-                            ]),
-                            h('thead', {}, [
-                                h('tr', {}, [
-                                    h('th', {}, '标题'),
-                                    h('th', {}, '是否显示'),
-                                    h('th', {}, '是否固定')
-                                ])
-                            ]),
-                            h('tbody', {}, trVNs)
-                        ])
+                            ])
+                        ]),
+                        h('div', {
+                            ref: dragHintElemRef,
+                            class: 'vxe-table-custom-popup--drag-hint'
+                        }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
                     ]);
                 },
                 footer: () => {