vxe-table 4.7.70 → 4.7.72

package/packages/table/module/menu/panel.ts

@@ -1,9 +1,12 @@
 import { defineComponent, h, Teleport, inject, ref, Ref, createCommentVNode } from 'vue'
+import { VxeUI } from '../../../ui'
 import { getFuncText } from '../../../ui/src/utils'
 import XEUtils from 'xe-utils'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods } from '../../../../types'
 
+const { getIcon } = VxeUI
+
 export default defineComponent({
   name: 'VxeTableMenuPanel',
   setup (props, context) {
@@ -49,6 +52,8 @@ export default defineComponent({
               key: gIndex
             }, options.map((item, index) => {
               const hasChildMenus = item.children && item.children.some((child: any) => child.visible !== false)
+              const prefixOpts = Object.assign({}, item.prefixConfig)
+              const suffixOpts = Object.assign({}, item.suffixConfig)
               return item.visible === false
                 ? null
                 : h('li', {
@@ -70,15 +75,25 @@ export default defineComponent({
                       $xeTable.ctxMenuMouseoutEvent(evnt, item)
                     }
                   }, [
-                    h('i', {
-                      class: ['vxe-context-menu--link-prefix', item.prefixIcon]
-                    }),
-                    h('span', {
+                    h('div', {
+                      class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+                    }, [
+                      h('i', {
+                        class: prefixOpts.icon || item.prefixIcon
+                      }),
+                      prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : createCommentVNode()
+                    ]),
+                    h('div', {
                       class: 'vxe-context-menu--link-content'
                     }, getFuncText(item.name)),
-                    h('i', {
-                      class: ['vxe-context-menu--link-suffix', hasChildMenus ? item.suffixIcon || 'suffix--haschild' : item.suffixIcon]
-                    })
+                    h('div', {
+                      class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+                    }, [
+                      h('i', {
+                        class: (suffixOpts.icon || item.suffixIcon) || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+                      }),
+                      suffixOpts.content ? h('span', `${suffixOpts.content}`) : createCommentVNode()
+                    ])
                   ]),
                   hasChildMenus
                     ? h('ul', {
@@ -86,6 +101,8 @@ export default defineComponent({
                         'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
                       }]
                     }, item.children.map((child: any, cIndex: any) => {
+                      const childPrefixOpts = Object.assign({}, child.prefixConfig)
+                      const childSuffixOpts = Object.assign({}, child.suffixConfig)
                       return child.visible === false
                         ? null
                         : h('li', {
@@ -107,12 +124,25 @@ export default defineComponent({
                               $xeTable.ctxMenuMouseoutEvent(evnt, item)
                             }
                           }, [
-                            h('i', {
-                              class: ['vxe-context-menu--link-prefix', child.prefixIcon]
-                            }),
-                            h('span', {
+                            h('div', {
+                              class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+                            }, [
+                              h('i', {
+                                class: childPrefixOpts.icon || child.prefixIcon
+                              }),
+                              childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : createCommentVNode()
+                            ]),
+                            h('div', {
                               class: 'vxe-context-menu--link-content'
-                            }, getFuncText(child.name))
+                            }, getFuncText(child.name)),
+                            h('div', {
+                              class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+                            }, [
+                              h('i', {
+                                class: childSuffixOpts.icon
+                              }),
+                              childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : createCommentVNode()
+                            ])
                           ])
                         ])
                     }))

package/packages/ui/index.ts

@@ -233,6 +233,7 @@ VxeUI.setIcon({
   TABLE_RADIO_CHECKED: iconPrefix + 'radio-checked-fill',
   TABLE_RADIO_UNCHECKED: iconPrefix + 'radio-unchecked',
   TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
+  TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/table-module/menu.scss

@@ -19,46 +19,28 @@
   background-color: var(--vxe-ui-table-menu-background-color);
 }
 .vxe-context-menu--link {
-  display: block;
-  padding: 0 2.5em;
+  display: flex;
+  flex-direction: row;
   width: var(--vxe-ui-table-menu-item-width);
   line-height: 26px;
+  padding: 0 0.8em;
   color: var(--vxe-ui-font-color);
   cursor: pointer;
   .vxe-context-menu--link-prefix,
   .vxe-context-menu--link-suffix {
-    position: absolute;
-    top: 5px;
-    margin-right: 5px;
-    font-size: 16px;
-  }
-  .vxe-context-menu--link-prefix {
-    left: 5px;
-  }
-  .vxe-context-menu--link-suffix {
-    right: 5px;
-    &.suffix--haschild {
-      top: 8px;
-      &:before {
-        position: absolute;
-        content: "";
-        border: 4px solid transparent;
-        border-left-color: #727272;
-      }
-    }
+    min-width: 2em;
+    flex-shrink: 0;
+    text-align: center;
+    padding: 0 0.2em;
   }
   .vxe-context-menu--link-content {
-    display: block;
+    flex-grow: 1;
+    padding: 0 0.2em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }
-.vxe-table--context-menu-clild-wrapper {
-  .vxe-context-menu--link {
-    padding: 0 2em 0 2.5em;
-  }
-}
 .vxe-context-menu--option-wrapper,
 .vxe-table--context-menu-clild-wrapper {
   margin: 0;

package/styles/theme/base.scss

@@ -78,7 +78,7 @@
   --vxe-ui-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color);
   --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color);
 
-  --vxe-ui-table-menu-item-width: 178px;
+  --vxe-ui-table-menu-item-width: 198px;
   --vxe-ui-table-menu-background-color: #fff;
 
   --vxe-ui-table-validate-error-color: #f56c6c;