vxe-table 4.7.71 → 4.7.73

package/es/table/module/custom/panel.js

@@ -26,7 +26,7 @@ export default defineComponent({
         const refElem = ref();
         const bodyElemRef = ref();
         const dragHintElemRef = ref();
-        const dragColumn = ref();
+        const dragColumnRef = ref();
         let prevDropTrEl;
         const handleWrapperMouseenterEvent = (evnt) => {
             const { customStore } = props;
@@ -72,6 +72,10 @@ export default defineComponent({
             $xeTable.emitCustomEvent('confirm', $event);
             $xeTable.saveCustomStore('confirm');
         };
+        const cancelCloseEvent = ({ $event }) => {
+            $xeTable.closeCustom();
+            $xeTable.emitCustomEvent('close', $event);
+        };
         const cancelCustomEvent = ({ $event }) => {
             const { customStore } = props;
             const { customColumnList } = reactData;
@@ -136,49 +140,79 @@ export default defineComponent({
         const changeCheckboxOption = (column) => {
             const isChecked = !column.renderVisible;
             const customOpts = computeCustomOpts.value;
-            XEUtils.eachTree([column], (item) => {
-                item.renderVisible = isChecked;
-                item.halfVisible = false;
-            });
-            handleOptionCheck(column);
             if (customOpts.immediate) {
+                XEUtils.eachTree([column], (item) => {
+                    item.visible = isChecked;
+                    item.renderVisible = isChecked;
+                    item.halfVisible = false;
+                });
                 $xeTable.handleCustom();
                 $xeTable.saveCustomStore('update:visible');
             }
+            else {
+                XEUtils.eachTree([column], (item) => {
+                    item.renderVisible = isChecked;
+                    item.halfVisible = false;
+                });
+            }
+            handleOptionCheck(column);
             $xeTable.checkCustomStatus();
         };
         const changeFixedOption = (column, colFixed) => {
             const isMaxFixedColumn = computeIsMaxFixedColumn.value;
-            if (column.renderFixed === colFixed) {
-                column.renderFixed = '';
-                // $xeTable.clearColumnFixed(column)
+            const customOpts = computeCustomOpts.value;
+            if (customOpts.immediate) {
+                if (column.renderFixed === colFixed) {
+                    column.fixed = '';
+                    column.renderFixed = '';
+                }
+                else {
+                    if (!isMaxFixedColumn || column.renderFixed) {
+                        column.fixed = colFixed;
+                        column.renderFixed = colFixed;
+                    }
+                }
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:fixed');
             }
             else {
-                if (!isMaxFixedColumn || column.renderFixed) {
-                    column.renderFixed = colFixed;
-                    // $xeTable.setColumnFixed(column, colFixed)
+                if (column.renderFixed === colFixed) {
+                    column.renderFixed = '';
+                }
+                else {
+                    if (!isMaxFixedColumn || column.renderFixed) {
+                        column.renderFixed = colFixed;
+                    }
                 }
             }
         };
-        // const changePopupFixedOption = () => {
-        //   const isMaxFixedColumn = computeIsMaxFixedColumn.value
-        //   if (!isMaxFixedColumn) {
-        //     // $xeTable.setColumnFixed(column, column.fixed)
-        //   }
-        // }
         const allOptionEvent = () => {
             const { customStore } = props;
             const { customColumnList } = reactData;
             const customOpts = computeCustomOpts.value;
             const { checkMethod } = customOpts;
             const isAll = !customStore.isAll;
-            XEUtils.eachTree(customColumnList, (column) => {
-                if (!checkMethod || checkMethod({ column })) {
-                    column.renderVisible = isAll;
-                    column.halfVisible = false;
-                }
-            });
-            customStore.isAll = isAll;
+            if (customOpts.immediate) {
+                XEUtils.eachTree(customColumnList, (column) => {
+                    if (!checkMethod || checkMethod({ column })) {
+                        column.visible = isAll;
+                        column.renderVisible = isAll;
+                        column.halfVisible = false;
+                    }
+                });
+                customStore.isAll = isAll;
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:visible');
+            }
+            else {
+                XEUtils.eachTree(customColumnList, (column) => {
+                    if (!checkMethod || checkMethod({ column })) {
+                        column.renderVisible = isAll;
+                        column.halfVisible = false;
+                    }
+                });
+                customStore.isAll = isAll;
+            }
             $xeTable.checkCustomStatus();
         };
         const sortMousedownEvent = (evnt) => {
@@ -188,7 +222,7 @@ export default defineComponent({
             const colid = trEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
             trEl.draggable = true;
-            dragColumn.value = column;
+            dragColumnRef.value = column;
             addClass(trEl, 'active--drag-origin');
         };
         const sortMouseupEvent = (evnt) => {
@@ -197,7 +231,7 @@ export default defineComponent({
             const trEl = tdEl.parentNode;
             const dragHintEl = dragHintElemRef.value;
             trEl.draggable = false;
-            dragColumn.value = null;
+            dragColumnRef.value = null;
             removeClass(trEl, 'active--drag-origin');
             if (dragHintEl) {
                 dragHintEl.style.display = '';
@@ -211,6 +245,7 @@ export default defineComponent({
         };
         const sortDragendEvent = (evnt) => {
             const { customColumnList } = reactData;
+            const customOpts = computeCustomOpts.value;
             const trEl = evnt.currentTarget;
             const dragHintEl = dragHintElemRef.value;
             if (prevDropTrEl) {
@@ -238,7 +273,7 @@ export default defineComponent({
                 prevDropTrEl.removeAttribute('drag-pos');
                 removeClass(prevDropTrEl, 'active--drag-target');
             }
-            dragColumn.value = null;
+            dragColumnRef.value = null;
             trEl.draggable = false;
             trEl.removeAttribute('drag-pos');
             if (dragHintEl) {
@@ -246,6 +281,16 @@ export default defineComponent({
             }
             removeClass(trEl, 'active--drag-target');
             removeClass(trEl, 'active--drag-origin');
+            if (customOpts.immediate) {
+                XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
+                    if (!parent) {
+                        const sortIndex = index + 1;
+                        column.renderSortNumber = sortIndex;
+                    }
+                });
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:sort');
+            }
         };
         const sortDragoverEvent = (evnt) => {
             const trEl = evnt.currentTarget;
@@ -301,6 +346,7 @@ export default defineComponent({
                     const isColGroup = column.children && column.children.length;
                     const colTitle = formatText(column.getTitle(), 1);
                     const isDisabled = checkMethod ? !checkMethod({ column }) : false;
+                    const isHidden = !isChecked;
                     colVNs.push(h('li', {
                         key: column.id,
                         colid: column.id,
@@ -334,46 +380,58 @@ export default defineComponent({
                             ? h('div', {
                                 class: 'vxe-table-custom--sort-option'
                             }, [
-                                h('span', {
-                                    class: 'vxe-table-custom--sort-btn',
-                                    title: getI18n('vxe.custom.setting.sortHelpTip'),
-                                    onMousedown: sortMousedownEvent,
-                                    onMouseup: sortMouseupEvent
-                                }, [
+                                h('span', Object.assign({ class: ['vxe-table-custom--sort-btn', {
+                                            'is--disabled': isHidden
+                                        }], title: getI18n('vxe.custom.setting.sortHelpTip') }, (isHidden
+                                    ? {}
+                                    : {
+                                        onMousedown: sortMousedownEvent,
+                                        onMouseup: sortMouseupEvent
+                                    })), [
                                     h('i', {
                                         class: getIcon().TABLE_CUSTOM_SORT
                                     })
                                 ])
                             ])
                             : createCommentVNode(),
-                        h('div', {
-                            class: 'vxe-table-custom--checkbox-label',
-                            title: colTitle
-                        }, colTitle),
+                        column.type === 'html'
+                            ? h('div', {
+                                key: '1',
+                                class: 'vxe-table-custom--checkbox-label',
+                                innerHTML: colTitle
+                            })
+                            : h('div', {
+                                key: '0',
+                                class: 'vxe-table-custom--checkbox-label'
+                            }, colTitle),
                         !parent && allowFixed
                             ? h('div', {
                                 class: 'vxe-table-custom--fixed-option'
                             }, [
-                                h('span', {
-                                    class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT, {
-                                            'is--checked': column.renderFixed === 'left',
-                                            'is--disabled': isMaxFixedColumn && !column.renderFixed
-                                        }],
-                                    title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
-                                    onClick: () => {
-                                        changeFixedOption(column, 'left');
-                                    }
-                                }),
-                                h('span', {
-                                    class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT, {
-                                            'is--checked': column.renderFixed === 'right',
-                                            'is--disabled': isMaxFixedColumn && !column.renderFixed
-                                        }],
-                                    title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
-                                    onClick: () => {
-                                        changeFixedOption(column, 'right');
-                                    }
-                                })
+                                VxeUIButtonComponent
+                                    ? h(VxeUIButtonComponent, {
+                                        mode: 'text',
+                                        icon: column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT,
+                                        status: column.renderFixed === 'left' ? 'primary' : '',
+                                        disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                                        title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
+                                        onClick: () => {
+                                            changeFixedOption(column, 'left');
+                                        }
+                                    })
+                                    : createCommentVNode(),
+                                VxeUIButtonComponent
+                                    ? h(VxeUIButtonComponent, {
+                                        mode: 'text',
+                                        icon: column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT,
+                                        status: column.renderFixed === 'right' ? 'primary' : '',
+                                        disabled: isHidden || (isMaxFixedColumn && !column.renderFixed),
+                                        title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
+                                        onClick: () => {
+                                            changeFixedOption(column, 'right');
+                                        }
+                                    })
+                                    : createCommentVNode()
                             ])
                             : createCommentVNode()
                     ]));
@@ -381,6 +439,7 @@ export default defineComponent({
             });
             const isAllChecked = customStore.isAll;
             const isAllIndeterminate = customStore.isIndeterminate;
+            const dragColumn = dragColumnRef.value;
             return h('div', {
                 ref: refElem,
                 key: 'simple',
@@ -431,26 +490,44 @@ export default defineComponent({
                         h('div', {
                             ref: dragHintElemRef,
                             class: 'vxe-table-custom-popup--drag-hint'
-                        }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+                        }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
                     ]),
                     customOpts.showFooter
                         ? h('div', {
                             class: 'vxe-table-custom--footer'
                         }, [
-                            h('button', {
-                                class: 'btn--reset',
-                                onClick: resetCustomEvent
-                            }, customOpts.resetButtonText || getI18n('vxe.table.customRestore')),
+                            VxeUIButtonComponent
+                                ? h(VxeUIButtonComponent, {
+                                    mode: 'text',
+                                    content: customOpts.resetButtonText || getI18n('vxe.table.customRestore'),
+                                    onClick: resetCustomEvent
+                                })
+                                : createCommentVNode(),
+                            customOpts.immediate
+                                ? (VxeUIButtonComponent
+                                    ? h(VxeUIButtonComponent, {
+                                        mode: 'text',
+                                        content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                                        onClick: cancelCloseEvent
+                                    })
+                                    : createCommentVNode())
+                                : (VxeUIButtonComponent
+                                    ? h(VxeUIButtonComponent, {
+                                        mode: 'text',
+                                        content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                                        onClick: cancelCustomEvent
+                                    })
+                                    : createCommentVNode()),
                             customOpts.immediate
                                 ? createCommentVNode()
-                                : h('button', {
-                                    class: 'btn--cancel',
-                                    onClick: cancelCustomEvent
-                                }, customOpts.resetButtonText || getI18n('vxe.table.customCancel')),
-                            h('button', {
-                                class: 'btn--confirm',
-                                onClick: confirmCustomEvent
-                            }, customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'))
+                                : (VxeUIButtonComponent
+                                    ? h(VxeUIButtonComponent, {
+                                        mode: 'text',
+                                        status: 'primary',
+                                        content: customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'),
+                                        onClick: confirmCustomEvent
+                                    })
+                                    : createCommentVNode())
                         ])
                         : null
                 ]
@@ -476,6 +553,7 @@ export default defineComponent({
                     const colTitle = formatText(column.getTitle(), 1);
                     const isColGroup = column.children && column.children.length;
                     const isDisabled = checkMethod ? !checkMethod({ column }) : false;
+                    const isHidden = !isChecked;
                     trVNs.push(h('tr', {
                         key: column.id,
                         colid: column.id,
@@ -514,12 +592,14 @@ export default defineComponent({
                                 class: 'vxe-table-custom-popup--column-item col--sort'
                             }, [
                                 column.level === 1
-                                    ? h('span', {
-                                        class: 'vxe-table-custom-popup--column-sort-btn',
-                                        title: getI18n('vxe.custom.setting.sortHelpTip'),
-                                        onMousedown: sortMousedownEvent,
-                                        onMouseup: sortMouseupEvent
-                                    }, [
+                                    ? h('span', Object.assign({ class: ['vxe-table-custom-popup--column-sort-btn', {
+                                                'is--disabled': isHidden
+                                            }], title: getI18n('vxe.custom.setting.sortHelpTip') }, (isHidden
+                                        ? {}
+                                        : {
+                                            onMousedown: sortMousedownEvent,
+                                            onMouseup: sortMouseupEvent
+                                        })), [
                                         h('i', {
                                             class: getIcon().TABLE_CUSTOM_SORT
                                         })
@@ -530,20 +610,28 @@ export default defineComponent({
                         h('td', {
                             class: 'vxe-table-custom-popup--column-item col--name'
                         }, [
-                            h('div', {
-                                class: 'vxe-table-custom-popup--name',
-                                title: colTitle
-                            }, colTitle)
+                            column.type === 'html'
+                                ? h('div', {
+                                    key: '1',
+                                    class: 'vxe-table-custom-popup--name',
+                                    innerHTML: colTitle
+                                })
+                                : h('div', {
+                                    key: '0',
+                                    class: 'vxe-table-custom-popup--name',
+                                    title: colTitle
+                                }, colTitle)
                         ]),
                         allowResizable
                             ? h('td', {
                                 class: 'vxe-table-custom-popup--column-item col--resizable'
                             }, [
-                                !isChecked || (column.children && column.children.length)
+                                column.children && column.children.length
                                     ? h('span', '-')
                                     : (VxeUIInputComponent
                                         ? h(VxeUIInputComponent, {
                                             type: 'integer',
+                                            disabled: isHidden,
                                             modelValue: column.renderResizeWidth,
                                             'onUpdate:modelValue'(value) {
                                                 column.renderResizeWidth = Math.max(0, Number(value));
@@ -563,17 +651,15 @@ export default defineComponent({
                                             modelValue: column.renderFixed || '',
                                             type: 'button',
                                             size: 'mini',
+                                            disabled: isHidden,
                                             options: [
-                                                { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
-                                                { label: getI18n('vxe.custom.setting.fixedUnset'), value: '' },
-                                                { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
+                                                { label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isHidden || isMaxFixedColumn },
+                                                { label: getI18n('vxe.custom.setting.fixedUnset'), value: '', disabled: isHidden },
+                                                { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isHidden || isMaxFixedColumn }
                                             ],
                                             'onUpdate:modelValue'(value) {
                                                 column.renderFixed = value;
                                             }
-                                            // onChange () {
-                                            //   changePopupFixedOption(column)
-                                            // }
                                         })
                                         : createCommentVNode())
                             ])
@@ -583,6 +669,7 @@ export default defineComponent({
             });
             const isAllChecked = customStore.isAll;
             const isAllIndeterminate = customStore.isIndeterminate;
+            const dragColumn = dragColumnRef.value;
             const scopedSlots = {
                 default: () => {
                     return h('div', {
@@ -690,7 +777,7 @@ export default defineComponent({
                         h('div', {
                             ref: dragHintElemRef,
                             class: 'vxe-table-custom-popup--drag-hint'
-                        }, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
+                        }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))
                     ]);
                 },
                 footer: () => {

package/es/table/module/export/export-panel.js

@@ -149,14 +149,16 @@ export default defineComponent({
                 const isColGroup = column.children && column.children.length;
                 const isChecked = column.checked;
                 const indeterminate = column.halfChecked;
+                const isHtml = column.type === 'html';
                 cols.push(h('li', {
+                    key: column.id,
                     class: ['vxe-export--panel-column-option', `level--${column.level}`, {
                             'is--group': isColGroup,
                             'is--checked': isChecked,
                             'is--indeterminate': indeterminate,
                             'is--disabled': column.disabled
                         }],
-                    title: colTitle,
+                    title: isHtml ? '' : colTitle,
                     onClick: () => {
                         if (!column.disabled) {
                             changeOption(column);
@@ -166,9 +168,16 @@ export default defineComponent({
                     h('span', {
                         class: ['vxe-checkbox--icon', indeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
                     }),
-                    h('span', {
-                        class: 'vxe-checkbox--label'
-                    }, colTitle)
+                    isHtml
+                        ? h('span', {
+                            key: '1',
+                            class: 'vxe-checkbox--label',
+                            innerHTML: colTitle
+                        })
+                        : h('span', {
+                            key: '0',
+                            class: 'vxe-checkbox--label'
+                        }, colTitle)
                 ]));
             });
             return VxeUIModalComponent

package/es/table/style.css

@@ -879,25 +879,10 @@
   flex-direction: row;
   flex-shrink: 0;
   border-top: 1px solid var(--vxe-ui-base-popup-border-color);
-  text-align: right;
 }
 .vxe-table-custom--footer button {
-  background-color: transparent;
-  width: 50%;
+  flex-grow: 1;
   height: 2.8em;
-  border: 0;
-  color: var(--vxe-ui-font-color);
-  text-align: center;
-  cursor: pointer;
-}
-.vxe-table-custom--footer button:focus {
-  outline: none;
-}
-.vxe-table-custom--footer button:hover {
-  color: var(--vxe-ui-font-primary-lighten-color);
-}
-.vxe-table-custom--footer .btn--confirm {
-  color: var(--vxe-ui-font-primary-color);
 }
 
 .vxe-table-custom--checkbox-option .vxe-checkbox--icon {
@@ -957,11 +942,17 @@
 .vxe-table-custom--sort-btn {
   padding-left: 0.2em;
   padding-right: 0.4em;
+}
+.vxe-table-custom--sort-btn:not(.is--disabled) {
   cursor: grabbing;
 }
-.vxe-table-custom--sort-btn:hover {
+.vxe-table-custom--sort-btn:not(.is--disabled):hover {
   color: var(--vxe-ui-font-primary-color);
 }
+.vxe-table-custom--sort-btn.is--disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
 
 .vxe-table-custom--checkbox-label {
   flex-grow: 1;
@@ -981,24 +972,6 @@
           user-select: none;
 }
 
-.vxe-table-custom--fixed-left-option,
-.vxe-table-custom--fixed-right-option {
-  line-height: 1.34em;
-  font-size: 1.1em;
-  padding: 0 0.2em;
-  cursor: pointer;
-}
-.vxe-table-custom--fixed-left-option.is--checked, .vxe-table-custom--fixed-left-option:hover,
-.vxe-table-custom--fixed-right-option.is--checked,
-.vxe-table-custom--fixed-right-option:hover {
-  color: var(--vxe-ui-font-primary-color);
-}
-.vxe-table-custom--fixed-left-option.is--disabled,
-.vxe-table-custom--fixed-right-option.is--disabled {
-  cursor: no-drop;
-  color: var(--vxe-ui-input-disabled-color);
-}
-
 .vxe-table-custom-popup--body {
   overflow: auto;
   height: 100%;
@@ -1150,14 +1123,20 @@
 .vxe-table-custom-popup--column-sort-btn {
   font-size: 1.2em;
   padding: 0.2em 0.5em;
+}
+.vxe-table-custom-popup--column-sort-btn:not(.is--disabled) {
   cursor: grab;
 }
-.vxe-table-custom-popup--column-sort-btn:hover {
+.vxe-table-custom-popup--column-sort-btn:not(.is--disabled):hover {
   color: var(--vxe-ui-font-primary-color);
 }
-.vxe-table-custom-popup--column-sort-btn:active {
+.vxe-table-custom-popup--column-sort-btn:not(.is--disabled):active {
   cursor: grabbing;
 }
+.vxe-table-custom-popup--column-sort-btn.is--disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
 
 .vxe-table-custom-popup--table-sort-help-title,
 .vxe-table-custom-popup--table-sort-help-icon {