vxe-table 4.17.12 → 4.17.13

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

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../../ui';
 import { getFuncText } from '../../../ui/src/utils';
 import { getSlotVNs } from '../../../ui/src/vn';
-const { getIcon, renderEmptyElement } = VxeUI;
+const { getIcon, getI18n, renderEmptyElement } = VxeUI;
 export default defineVxeComponent({
     name: 'VxeTableMenuPanel',
     setup(props, context) {
@@ -45,7 +45,8 @@ export default defineVxeComponent({
                                 class: 'vxe-context-menu--option-wrapper',
                                 key: gIndex
                             }, options.map((item, index) => {
-                                const hasChildMenus = item.children && item.children.some((child) => child.visible !== false);
+                                const { children, loading } = item;
+                                const hasChildMenus = children && children.some((child) => child.visible !== false);
                                 const prefixOpts = Object.assign({}, item.prefixConfig);
                                 const prefixIcon = prefixOpts.icon || item.prefixIcon;
                                 const suffixOpts = Object.assign({}, item.suffixConfig);
@@ -55,6 +56,7 @@ export default defineVxeComponent({
                                     ? renderEmptyElement($xeTable)
                                     : h('li', {
                                         class: [item.className, {
+                                                'link--loading': loading,
                                                 'link--disabled': item.disabled,
                                                 'link--active': item === ctxMenuStore.selected
                                             }],
@@ -75,17 +77,23 @@ export default defineVxeComponent({
                                             h('div', {
                                                 class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
                                             }, [
-                                                prefixIcon && XEUtils.isFunction(prefixIcon)
-                                                    ? h('span', {}, getSlotVNs(prefixIcon({})))
-                                                    : h('i', {
-                                                        class: prefixIcon
-                                                    }),
+                                                loading
+                                                    ? h('span', {
+                                                        class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                                    })
+                                                    : (prefixIcon && XEUtils.isFunction(prefixIcon)
+                                                        ? h('span', {}, getSlotVNs(prefixIcon({})))
+                                                        : h('span', {}, [
+                                                            h('i', {
+                                                                class: prefixIcon
+                                                            })
+                                                        ])),
                                                 prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                                             ]),
                                             h('div', {
                                                 class: 'vxe-context-menu--link-content',
                                                 title: menuContent
-                                            }, menuContent),
+                                            }, loading ? getI18n('vxe.table.menuLoading') : menuContent),
                                             h('div', {
                                                 class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                                             }, [
@@ -103,6 +111,7 @@ export default defineVxeComponent({
                                                         'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
                                                     }]
                                             }, item.children.map((child, cIndex) => {
+                                                const { loading: childLoading } = child;
                                                 const childPrefixOpts = Object.assign({}, child.prefixConfig);
                                                 const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
                                                 const childSuffixOpts = Object.assign({}, child.suffixConfig);
@@ -112,6 +121,7 @@ export default defineVxeComponent({
                                                     ? null
                                                     : h('li', {
                                                         class: [child.className, {
+                                                                'link--loading': childLoading,
                                                                 'link--disabled': child.disabled,
                                                                 'link--active': child === ctxMenuStore.selectChild
                                                             }],
@@ -132,17 +142,23 @@ export default defineVxeComponent({
                                                             h('div', {
                                                                 class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
                                                             }, [
-                                                                childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
-                                                                    ? h('span', {}, getSlotVNs(childPrefixIcon({})))
-                                                                    : h('i', {
-                                                                        class: childPrefixIcon
-                                                                    }),
+                                                                child.loading
+                                                                    ? h('span', {
+                                                                        class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                                                    })
+                                                                    : (childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
+                                                                        ? h('span', {}, getSlotVNs(childPrefixIcon({})))
+                                                                        : h('span', {}, [
+                                                                            h('i', {
+                                                                                class: childPrefixIcon
+                                                                            })
+                                                                        ])),
                                                                 childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)
                                                             ]),
                                                             h('div', {
                                                                 class: 'vxe-context-menu--link-content',
                                                                 title: childMenuContent
-                                                            }, childMenuContent),
+                                                            }, childLoading ? getI18n('vxe.table.menuLoading') : childMenuContent),
                                                             h('div', {
                                                                 class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
                                                             }, [

package/es/table/style.css

@@ -1716,17 +1716,20 @@
 .vxe-table--context-menu-clild-wrapper li.link--active > .vxe-context-menu--link {
   color: #2B2B2B;
 }
-.vxe-context-menu--option-wrapper li.link--disabled > .vxe-context-menu--link,
+.vxe-context-menu--option-wrapper li.link--loading > .vxe-context-menu--link, .vxe-context-menu--option-wrapper li.link--disabled > .vxe-context-menu--link,
+.vxe-table--context-menu-clild-wrapper li.link--loading > .vxe-context-menu--link,
 .vxe-table--context-menu-clild-wrapper li.link--disabled > .vxe-context-menu--link {
   color: var(--vxe-ui-font-disabled-color);
   cursor: no-drop;
 }
-.vxe-context-menu--option-wrapper li.link--disabled.link--active,
+.vxe-context-menu--option-wrapper li.link--loading.link--active, .vxe-context-menu--option-wrapper li.link--disabled.link--active,
+.vxe-table--context-menu-clild-wrapper li.link--loading.link--active,
 .vxe-table--context-menu-clild-wrapper li.link--disabled.link--active {
   border-color: #C0C1C2;
   background-color: #EEEEEE;
 }
-.vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,
+.vxe-context-menu--option-wrapper li.link--loading.link--active:hover, .vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,
+.vxe-table--context-menu-clild-wrapper li.link--loading.link--active:hover,
 .vxe-table--context-menu-clild-wrapper li.link--disabled.link--active:hover {
   background-color: inherit;
 }