vxe-table 3.19.12 → 3.19.13

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

@@ -2,7 +2,7 @@ import { VxeUI } from '../../../ui';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../../ui/src/utils';
 import { getSlotVNs } from '../../../ui/src/vn';
-const { getIcon, renderEmptyElement } = VxeUI;
+const { getIcon, getI18n, renderEmptyElement } = VxeUI;
 export default {
     name: 'VxeTableMenuPanel',
     props: {
@@ -52,7 +52,8 @@ export default {
                         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);
@@ -62,6 +63,7 @@ export default {
                             ? renderEmptyElement($xeTable)
                             : h('li', {
                                 class: [item.className, {
+                                        'link--loading': loading,
                                         'link--disabled': item.disabled,
                                         'link--active': item === ctxMenuStore.selected
                                     }],
@@ -84,11 +86,17 @@ export default {
                                     h('div', {
                                         class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
                                     }, [
-                                        prefixIcon && XEUtils.isFunction(prefixIcon)
-                                            ? h('span', {}, getSlotVNs(prefixIcon.call($xeTable, {})))
-                                            : h('i', {
-                                                class: prefixIcon
-                                            }),
+                                        loading
+                                            ? h('span', {
+                                                class: getIcon('TABLE_MENU_OPTION_LOADING')
+                                            })
+                                            : (prefixIcon && XEUtils.isFunction(prefixIcon)
+                                                ? h('span', {}, getSlotVNs(prefixIcon.call($xeTable, {})))
+                                                : h('span', {}, [
+                                                    h('i', {
+                                                        class: prefixIcon
+                                                    })
+                                                ])),
                                         prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)
                                     ]),
                                     h('span', {
@@ -96,7 +104,7 @@ export default {
                                         attrs: {
                                             title: menuContent
                                         }
-                                    }, menuContent),
+                                    }, loading ? getI18n('vxe.table.menuLoading') : menuContent),
                                     h('div', {
                                         class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
                                     }, [
@@ -114,6 +122,7 @@ export default {
                                                 '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);
@@ -123,6 +132,7 @@ export default {
                                             ? null
                                             : h('li', {
                                                 class: [child.className, {
+                                                        'link--loading': childLoading,
                                                         'link--disabled': child.disabled,
                                                         'link--active': child === ctxMenuStore.selectChild
                                                     }],
@@ -145,11 +155,17 @@ export default {
                                                     h('div', {
                                                         class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
                                                     }, [
-                                                        childPrefixIcon && XEUtils.isFunction(childPrefixIcon)
-                                                            ? h('span', {}, getSlotVNs(childPrefixIcon.call($xeTable, {})))
-                                                            : 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('span', {
@@ -157,7 +173,7 @@ export default {
                                                         attrs: {
                                                             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;
 }