vxe-table 4.16.17 → 4.16.19

package/lib/table/module/menu/hook.js

@@ -0,0 +1,392 @@
+"use strict";
+
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../../ui");
+var _dom = require("../../../ui/src/dom");
+var _utils = require("../../../ui/src/utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  menus,
+  hooks,
+  globalEvents,
+  GLOBAL_EVENT_KEYS
+} = _ui.VxeUI;
+const tableMenuMethodKeys = ['closeMenu'];
+hooks.add('tableMenuModule', {
+  setupTable($xeTable) {
+    const {
+      xID,
+      props,
+      reactData,
+      internalData
+    } = $xeTable;
+    const {
+      refElem,
+      refTableFilter,
+      refTableMenu
+    } = $xeTable.getRefMaps();
+    const {
+      computeMouseOpts,
+      computeIsContentMenu,
+      computeMenuOpts
+    } = $xeTable.getComputeMaps();
+    let menuMethods = {};
+    let menuPrivateMethods = {};
+    /**
+     * 显示快捷菜单
+     */
+    const handleOpenMenuEvent = (evnt, type, params) => {
+      const {
+        ctxMenuStore
+      } = reactData;
+      const isContentMenu = computeIsContentMenu.value;
+      const menuOpts = computeMenuOpts.value;
+      const config = menuOpts[type];
+      const {
+        transfer,
+        visibleMethod
+      } = menuOpts;
+      if (config) {
+        const {
+          options,
+          disabled
+        } = config;
+        if (disabled) {
+          evnt.preventDefault();
+        } else if (isContentMenu && options && options.length) {
+          params.options = options;
+          $xeTable.preventEvent(evnt, 'event.showMenu', params, () => {
+            if (!visibleMethod || visibleMethod(params)) {
+              evnt.preventDefault();
+              $xeTable.updateZindex();
+              const el = refElem.value;
+              const tableRect = el.getBoundingClientRect();
+              const {
+                scrollTop,
+                scrollLeft,
+                visibleHeight,
+                visibleWidth
+              } = (0, _dom.getDomNode)();
+              let top = evnt.clientY - tableRect.y;
+              let left = evnt.clientX - tableRect.x;
+              if (transfer) {
+                top = evnt.clientY + scrollTop;
+                left = evnt.clientX + scrollLeft;
+              }
+              const handleVisible = () => {
+                internalData._currMenuParams = params;
+                Object.assign(ctxMenuStore, {
+                  visible: true,
+                  list: options,
+                  selected: null,
+                  selectChild: null,
+                  showChild: false,
+                  style: {
+                    zIndex: internalData.tZindex,
+                    top: `${top}px`,
+                    left: `${left}px`
+                  }
+                });
+                (0, _vue.nextTick)(() => {
+                  const tableMenu = refTableMenu.value;
+                  const ctxElem = tableMenu.getRefMaps().refElem.value;
+                  const clientHeight = ctxElem.clientHeight;
+                  const clientWidth = ctxElem.clientWidth;
+                  const {
+                    boundingTop,
+                    boundingLeft
+                  } = (0, _dom.getAbsolutePos)(ctxElem);
+                  const offsetTop = boundingTop + clientHeight - visibleHeight;
+                  const offsetLeft = boundingLeft + clientWidth - visibleWidth;
+                  if (offsetTop > -10) {
+                    ctxMenuStore.style.top = `${Math.max(scrollTop + 2, top - clientHeight - 2)}px`;
+                  }
+                  if (offsetLeft > -10) {
+                    ctxMenuStore.style.left = `${Math.max(scrollLeft + 2, left - clientWidth - 2)}px`;
+                  }
+                });
+              };
+              const {
+                keyboard,
+                row,
+                column
+              } = params;
+              if (keyboard && row && column) {
+                $xeTable.scrollToRow(row, column).then(() => {
+                  const cell = $xeTable.getCellElement(row, column);
+                  if (cell) {
+                    const {
+                      boundingTop,
+                      boundingLeft
+                    } = (0, _dom.getAbsolutePos)(cell);
+                    top = boundingTop + scrollTop + Math.floor(cell.offsetHeight / 2);
+                    left = boundingLeft + scrollLeft + Math.floor(cell.offsetWidth / 2);
+                  }
+                  handleVisible();
+                });
+              } else {
+                handleVisible();
+              }
+            } else {
+              menuMethods.closeMenu();
+            }
+          });
+        }
+      }
+      $xeTable.closeFilter();
+    };
+    menuMethods = {
+      /**
+       * 关闭快捷菜单
+       */
+      closeMenu() {
+        Object.assign(reactData.ctxMenuStore, {
+          visible: false,
+          selected: null,
+          selectChild: null,
+          showChild: false
+        });
+        return (0, _vue.nextTick)();
+      }
+    };
+    menuPrivateMethods = {
+      /**
+       * 处理菜单的移动
+       */
+      moveCtxMenu(evnt, ctxMenuStore, property, hasOper, operRest, menuList) {
+        let selectItem;
+        const selectIndex = _xeUtils.default.findIndexOf(menuList, item => ctxMenuStore[property] === item);
+        if (hasOper) {
+          if (operRest && (0, _utils.hasChildrenList)(ctxMenuStore.selected)) {
+            ctxMenuStore.showChild = true;
+          } else {
+            ctxMenuStore.showChild = false;
+            ctxMenuStore.selectChild = null;
+          }
+        } else if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP)) {
+          for (let len = selectIndex - 1; len >= 0; len--) {
+            if (menuList[len].visible !== false) {
+              selectItem = menuList[len];
+              break;
+            }
+          }
+          ctxMenuStore[property] = selectItem || menuList[menuList.length - 1];
+        } else if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN)) {
+          for (let index = selectIndex + 1; index < menuList.length; index++) {
+            if (menuList[index].visible !== false) {
+              selectItem = menuList[index];
+              break;
+            }
+          }
+          ctxMenuStore[property] = selectItem || menuList[0];
+        } else if (ctxMenuStore[property] && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER) || globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR))) {
+          $xeTable.ctxMenuLinkEvent(evnt, ctxMenuStore[property]);
+        }
+      },
+      handleOpenMenuEvent,
+      /**
+       * 快捷菜单事件处理
+       */
+      handleGlobalContextmenuEvent(evnt) {
+        const $xeGrid = $xeTable.xeGrid;
+        const $xeGantt = $xeTable.xeGantt;
+        const {
+          mouseConfig,
+          menuConfig
+        } = props;
+        const {
+          editStore,
+          ctxMenuStore
+        } = reactData;
+        const {
+          visibleColumn
+        } = internalData;
+        const tableFilter = refTableFilter.value;
+        const tableMenu = refTableMenu.value;
+        const mouseOpts = computeMouseOpts.value;
+        const menuOpts = computeMenuOpts.value;
+        const el = refElem.value;
+        const {
+          selected
+        } = editStore;
+        const layoutList = ['header', 'body', 'footer'];
+        if ((0, _utils.isEnableConf)(menuConfig)) {
+          if (ctxMenuStore.visible && tableMenu && (0, _dom.getEventTargetNode)(evnt, tableMenu.getRefMaps().refElem.value).flag) {
+            evnt.preventDefault();
+            return;
+          }
+          if (internalData._keyCtx) {
+            const type = 'body';
+            const params = {
+              type,
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              keyboard: true,
+              columns: visibleColumn.slice(0),
+              $event: evnt
+            };
+            // 如果开启单元格区域
+            if (mouseConfig && mouseOpts.area) {
+              const activeArea = $xeTable.getActiveCellArea();
+              if (activeArea && activeArea.row && activeArea.column) {
+                params.row = activeArea.row;
+                params.column = activeArea.column;
+                handleOpenMenuEvent(evnt, type, params);
+                return;
+              }
+            } else if (mouseConfig && mouseOpts.selected) {
+              // 如果启用键盘导航且已选中单元格
+              if (selected.row && selected.column) {
+                params.row = selected.row;
+                params.column = selected.column;
+                handleOpenMenuEvent(evnt, type, params);
+                return;
+              }
+            }
+          }
+          // 分别匹配表尾、内容、表尾的快捷菜单
+          for (let index = 0; index < layoutList.length; index++) {
+            const layout = layoutList[index];
+            const columnTargetNode = (0, _dom.getEventTargetNode)(evnt, el, `vxe-${layout}--column`, target => {
+              // target=td|th，直接向上找 table 去匹配即可
+              return target.parentNode.parentNode.parentNode.getAttribute('xid') === xID;
+            });
+            const params = {
+              type: layout,
+              $table: $xeTable,
+              $grid: $xeGrid,
+              $gantt: $xeGantt,
+              columns: visibleColumn.slice(0),
+              $event: evnt
+            };
+            if (columnTargetNode.flag) {
+              const cell = columnTargetNode.targetElem;
+              const columnNodeRest = $xeTable.getColumnNode(cell);
+              const column = columnNodeRest ? columnNodeRest.item : null;
+              let typePrefix = `${layout}-`;
+              if (column) {
+                Object.assign(params, {
+                  column,
+                  columnIndex: $xeTable.getColumnIndex(column),
+                  cell
+                });
+              }
+              if (layout === 'body') {
+                const rowNodeRest = $xeTable.getRowNode(cell.parentNode);
+                const row = rowNodeRest ? rowNodeRest.item : null;
+                typePrefix = '';
+                if (row) {
+                  params.row = row;
+                  params.rowIndex = $xeTable.getRowIndex(row);
+                }
+              }
+              const eventType = `${typePrefix}cell-menu`;
+              handleOpenMenuEvent(evnt, layout, params);
+              $xeTable.dispatchEvent(eventType, params, evnt);
+              return;
+            } else if ((0, _dom.getEventTargetNode)(evnt, el, `vxe-table--${layout}-wrapper`, target => target.getAttribute('xid') === xID).flag) {
+              if (menuOpts.trigger === 'cell') {
+                evnt.preventDefault();
+              } else {
+                handleOpenMenuEvent(evnt, layout, params);
+              }
+              return;
+            }
+          }
+        }
+        if (tableFilter && !(0, _dom.getEventTargetNode)(evnt, tableFilter.getRefMaps().refElem.value).flag) {
+          $xeTable.closeFilter();
+        }
+        menuMethods.closeMenu();
+      },
+      ctxMenuMouseoverEvent(evnt, item, child) {
+        const menuElem = evnt.currentTarget;
+        const {
+          ctxMenuStore
+        } = reactData;
+        evnt.preventDefault();
+        evnt.stopPropagation();
+        ctxMenuStore.selected = item;
+        ctxMenuStore.selectChild = child;
+        if (!child) {
+          ctxMenuStore.showChild = (0, _utils.hasChildrenList)(item);
+          if (ctxMenuStore.showChild) {
+            (0, _vue.nextTick)(() => {
+              const childWrapperElem = menuElem.nextElementSibling;
+              if (childWrapperElem) {
+                const {
+                  boundingTop,
+                  boundingLeft,
+                  visibleHeight,
+                  visibleWidth
+                } = (0, _dom.getAbsolutePos)(menuElem);
+                const posTop = boundingTop + menuElem.offsetHeight;
+                const posLeft = boundingLeft + menuElem.offsetWidth;
+                let left = '';
+                let right = '';
+                // 是否超出右侧
+                if (posLeft + childWrapperElem.offsetWidth > visibleWidth - 10) {
+                  left = 'auto';
+                  right = `${menuElem.offsetWidth}px`;
+                }
+                // 是否超出底部
+                let top = '';
+                let bottom = '';
+                if (posTop + childWrapperElem.offsetHeight > visibleHeight - 10) {
+                  top = 'auto';
+                  bottom = '0';
+                }
+                childWrapperElem.style.left = left;
+                childWrapperElem.style.right = right;
+                childWrapperElem.style.top = top;
+                childWrapperElem.style.bottom = bottom;
+              }
+            });
+          }
+        }
+      },
+      ctxMenuMouseoutEvent(evnt, item) {
+        const {
+          ctxMenuStore
+        } = reactData;
+        if (!item.children) {
+          ctxMenuStore.selected = null;
+        }
+        ctxMenuStore.selectChild = null;
+      },
+      /**
+       * 快捷菜单点击事件
+       */
+      ctxMenuLinkEvent(evnt, menu) {
+        const $xeGrid = $xeTable.xeGrid;
+        const $xeGantt = $xeTable.xeGantt;
+        // 如果一级菜单有配置 code 则允许点击，否则不能点击
+        if (!menu.disabled && (menu.code || !menu.children || !menu.children.length)) {
+          const gMenuOpts = menus.get(menu.code);
+          const params = Object.assign({}, internalData._currMenuParams, {
+            menu,
+            $table: $xeTable,
+            $grid: $xeGrid,
+            $gantt: $xeGantt,
+            $event: evnt
+          });
+          const tmMethod = gMenuOpts ? gMenuOpts.tableMenuMethod || gMenuOpts.menuMethod : null;
+          if (tmMethod) {
+            tmMethod(params, evnt);
+          }
+          $xeTable.dispatchEvent('menu-click', params, evnt);
+          menuMethods.closeMenu();
+        }
+      }
+    };
+    return Object.assign(Object.assign({}, menuMethods), menuPrivateMethods);
+  },
+  setupGrid($xeGrid) {
+    return $xeGrid.extendTableMethods(tableMenuMethodKeys);
+  },
+  setupGantt($xeGantt) {
+    return $xeGantt.extendTableMethods(tableMenuMethodKeys);
+  }
+});

package/lib/table/module/menu/hook.min.js

@@ -0,0 +1 @@
+var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_dom=require("../../../ui/src/dom"),_utils=require("../../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{menus,hooks,globalEvents,GLOBAL_EVENT_KEYS}=_ui.VxeUI,tableMenuMethodKeys=["closeMenu"];hooks.add("tableMenuModule",{setupTable(p){let{xID:M,props:x,reactData:E,internalData:_}=p,{refElem:C,refTableFilter:T,refTableMenu:y}=p.getRefMaps(),{computeMouseOpts:w,computeIsContentMenu:l,computeMenuOpts:L}=p.getComputeMaps(),N;var e;let O=(v,t,g)=>{let f=E.ctxMenuStore;var n=l.value,e=L.value,t=e[t];let{transfer:h,visibleMethod:o}=e;if(t){let{options:l,disabled:e}=t;e?v.preventDefault():n&&l&&l.length&&(g.options=l,p.preventEvent(v,"event.showMenu",g,()=>{if(!o||o(g)){v.preventDefault(),p.updateZindex();var t=C.value.getBoundingClientRect();let{scrollTop:o,scrollLeft:i,visibleHeight:u,visibleWidth:s}=(0,_dom.getDomNode)(),r=v.clientY-t.y,a=v.clientX-t.x,n=(h&&(r=v.clientY+o,a=v.clientX+i),()=>{_._currMenuParams=g,Object.assign(f,{visible:!0,list:l,selected:null,selectChild:null,showChild:!1,style:{zIndex:_.tZindex,top:r+"px",left:a+"px"}}),(0,_vue.nextTick)(()=>{var e=y.value.getRefMaps().refElem.value,t=e.clientHeight,l=e.clientWidth,{boundingTop:e,boundingLeft:n}=(0,_dom.getAbsolutePos)(e),e=e+t-u,n=n+l-s;-10<e&&(f.style.top=Math.max(o+2,r-t-2)+"px"),-10<n&&(f.style.left=Math.max(i+2,a-l-2)+"px")})}),{keyboard:e,row:d,column:c}=g;e&&d&&c?p.scrollToRow(d,c).then(()=>{var e,t,l=p.getCellElement(d,c);l&&({boundingTop:e,boundingLeft:t}=(0,_dom.getAbsolutePos)(l),r=e+o+Math.floor(l.offsetHeight/2),a=t+i+Math.floor(l.offsetWidth/2)),n()}):n()}else N.closeMenu()}))}p.closeFilter()};return N={closeMenu(){return Object.assign(E.ctxMenuStore,{visible:!1,selected:null,selectChild:null,showChild:!1}),(0,_vue.nextTick)()}},e={moveCtxMenu(e,t,l,n,o,i){let u;var s=_xeUtils.default.findIndexOf(i,e=>t[l]===e);if(n)o&&(0,_utils.hasChildrenList)(t.selected)?t.showChild=!0:(t.showChild=!1,t.selectChild=null);else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_UP)){for(let e=s-1;0<=e;e--)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[i.length-1]}else if(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ARROW_DOWN)){for(let e=s+1;e<i.length;e++)if(!1!==i[e].visible){u=i[e];break}t[l]=u||i[0]}else t[l]&&(globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.ENTER)||globalEvents.hasKey(e,GLOBAL_EVENT_KEYS.SPACEBAR))&&p.ctxMenuLinkEvent(e,t[l])},handleOpenMenuEvent:O,handleGlobalContextmenuEvent(t){var l=p.xeGrid,n=p.xeGantt,{mouseConfig:e,menuConfig:o}=x,{editStore:i,ctxMenuStore:u}=E,s=_.visibleColumn,r=T.value,a=y.value,d=w.value,c=L.value,v=C.value,i=i.selected,g=["header","body","footer"];if((0,_utils.isEnableConf)(o)){if(u.visible&&a&&(0,_dom.getEventTargetNode)(t,a.getRefMaps().refElem.value).flag)return void t.preventDefault();if(_._keyCtx){o="body",u={type:o,$table:p,$grid:l,$gantt:n,keyboard:!0,columns:s.slice(0),$event:t};if(e&&d.area){a=p.getActiveCellArea();if(a&&a.row&&a.column)return u.row=a.row,u.column=a.column,void O(t,o,u)}else if(e&&d.selected&&i.row&&i.column)return u.row=i.row,u.column=i.column,void O(t,o,u)}for(let e=0;e<g.length;e++){var f=g[e],h=(0,_dom.getEventTargetNode)(t,v,`vxe-${f}--column`,e=>e.parentNode.parentNode.parentNode.getAttribute("xid")===M),b={type:f,$table:p,$grid:l,$gantt:n,columns:s.slice(0),$event:t};if(h.flag){var h=h.targetElem,m=p.getColumnNode(h),m=m?m.item:null;let e=f+"-";m&&Object.assign(b,{column:m,columnIndex:p.getColumnIndex(m),cell:h}),"body"===f&&(h=(m=p.getRowNode(h.parentNode))?m.item:null,e="",h)&&(b.row=h,b.rowIndex=p.getRowIndex(h));m=e+"cell-menu";return O(t,f,b),void p.dispatchEvent(m,b,t)}if((0,_dom.getEventTargetNode)(t,v,`vxe-table--${f}-wrapper`,e=>e.getAttribute("xid")===M).flag)return void("cell"===c.trigger?t.preventDefault():O(t,f,b))}}r&&!(0,_dom.getEventTargetNode)(t,r.getRefMaps().refElem.value).flag&&p.closeFilter(),N.closeMenu()},ctxMenuMouseoverEvent(e,t,l){let a=e.currentTarget;var n=E.ctxMenuStore;e.preventDefault(),e.stopPropagation(),n.selected=t,(n.selectChild=l)||(n.showChild=(0,_utils.hasChildrenList)(t),n.showChild&&(0,_vue.nextTick)(()=>{var o=a.nextElementSibling;if(o){var{boundingTop:i,boundingLeft:u,visibleHeight:s,visibleWidth:r}=(0,_dom.getAbsolutePos)(a),i=i+a.offsetHeight;let e="",t="",l=(u+a.offsetWidth+o.offsetWidth>r-10&&(e="auto",t=a.offsetWidth+"px"),""),n="";i+o.offsetHeight>s-10&&(l="auto",n="0"),o.style.left=e,o.style.right=t,o.style.top=l,o.style.bottom=n}}))},ctxMenuMouseoutEvent(e,t){var l=E.ctxMenuStore;t.children||(l.selected=null),l.selectChild=null},ctxMenuLinkEvent(e,t){var l,n=p.xeGrid,o=p.xeGantt;t.disabled||!t.code&&t.children&&t.children.length||(l=menus.get(t.code),t=Object.assign({},_._currMenuParams,{menu:t,$table:p,$grid:n,$gantt:o,$event:e}),(n=l?l.tableMenuMethod||l.menuMethod:null)&&n(t,e),p.dispatchEvent("menu-click",t,e),N.closeMenu())}},Object.assign(Object.assign({},N),e)},setupGrid(e){return e.extendTableMethods(tableMenuMethodKeys)},setupGantt(e){return e.extendTableMethods(tableMenuMethodKeys)}});

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

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _comp = require("../../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../../ui");
+var _utils = require("../../../ui/src/utils");
+var _vn = require("../../../ui/src/vn");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getIcon,
+  renderEmptyElement
+} = _ui.VxeUI;
+var _default = exports.default = (0, _comp.defineVxeComponent)({
+  name: 'VxeTableMenuPanel',
+  setup(props, context) {
+    const xID = _xeUtils.default.uniqueId();
+    const $xeTable = (0, _vue.inject)('$xeTable', {});
+    const {
+      reactData: tableReactData
+    } = $xeTable;
+    const refElem = (0, _vue.ref)();
+    const refMaps = {
+      refElem
+    };
+    const $xeMenuPanel = {
+      xID,
+      props,
+      context,
+      getRefMaps: () => refMaps
+    };
+    const renderVN = () => {
+      const {
+        ctxMenuStore
+      } = tableReactData;
+      const {
+        computeMenuOpts
+      } = $xeTable.getComputeMaps();
+      const menuOpts = computeMenuOpts.value;
+      const {
+        transfer,
+        destroyOnClose
+      } = menuOpts;
+      const {
+        visible,
+        list,
+        className
+      } = ctxMenuStore;
+      return (0, _vue.h)(_vue.Teleport, {
+        to: 'body',
+        disabled: !transfer
+      }, [(0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-table--context-menu-wrapper', className, {
+          'is--visible': visible
+        }],
+        style: ctxMenuStore.style
+      }, (destroyOnClose ? visible : true) ? list.map((options, gIndex) => {
+        return options.every(item => item.visible === false) ? renderEmptyElement($xeTable) : (0, _vue.h)('ul', {
+          class: 'vxe-context-menu--option-wrapper',
+          key: gIndex
+        }, options.map((item, index) => {
+          const hasChildMenus = item.children && item.children.some(child => child.visible !== false);
+          const prefixOpts = Object.assign({}, item.prefixConfig);
+          const prefixIcon = prefixOpts.icon || item.prefixIcon;
+          const suffixOpts = Object.assign({}, item.suffixConfig);
+          const suffixIcon = suffixOpts.icon || item.suffixIcon;
+          const menuContent = (0, _utils.getFuncText)(item.name);
+          return item.visible === false ? renderEmptyElement($xeTable) : (0, _vue.h)('li', {
+            class: [item.className, {
+              'link--disabled': item.disabled,
+              'link--active': item === ctxMenuStore.selected
+            }],
+            key: `${gIndex}_${index}`
+          }, [(0, _vue.h)('a', {
+            class: 'vxe-context-menu--link',
+            onClick(evnt) {
+              $xeTable.ctxMenuLinkEvent(evnt, item);
+            },
+            onMouseover(evnt) {
+              $xeTable.ctxMenuMouseoverEvent(evnt, item);
+            },
+            onMouseout(evnt) {
+              $xeTable.ctxMenuMouseoutEvent(evnt, item);
+            }
+          }, [(0, _vue.h)('div', {
+            class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
+          }, [prefixIcon && _xeUtils.default.isFunction(prefixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(prefixIcon({}))) : (0, _vue.h)('i', {
+            class: prefixIcon
+          }), prefixOpts.content ? (0, _vue.h)('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
+            class: 'vxe-context-menu--link-content',
+            title: menuContent
+          }, menuContent), (0, _vue.h)('div', {
+            class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
+          }, [suffixIcon && _xeUtils.default.isFunction(suffixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(suffixIcon({}))) : (0, _vue.h)('i', {
+            class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
+          }), suffixOpts.content ? (0, _vue.h)('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)])]), hasChildMenus && item.children ? (0, _vue.h)('ul', {
+            class: ['vxe-table--context-menu-clild-wrapper', {
+              'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
+            }]
+          }, item.children.map((child, cIndex) => {
+            const childPrefixOpts = Object.assign({}, child.prefixConfig);
+            const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
+            const childSuffixOpts = Object.assign({}, child.suffixConfig);
+            const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon;
+            const childMenuContent = (0, _utils.getFuncText)(child.name);
+            return child.visible === false ? null : (0, _vue.h)('li', {
+              class: [child.className, {
+                'link--disabled': child.disabled,
+                'link--active': child === ctxMenuStore.selectChild
+              }],
+              key: `${gIndex}_${index}_${cIndex}`
+            }, [(0, _vue.h)('a', {
+              class: 'vxe-context-menu--link',
+              onClick(evnt) {
+                $xeTable.ctxMenuLinkEvent(evnt, child);
+              },
+              onMouseover(evnt) {
+                $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
+              },
+              onMouseout(evnt) {
+                $xeTable.ctxMenuMouseoutEvent(evnt, item);
+              }
+            }, [(0, _vue.h)('div', {
+              class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
+            }, [childPrefixIcon && _xeUtils.default.isFunction(childPrefixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(childPrefixIcon({}))) : (0, _vue.h)('i', {
+              class: childPrefixIcon
+            }), childPrefixOpts.content ? (0, _vue.h)('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
+              class: 'vxe-context-menu--link-content',
+              title: childMenuContent
+            }, childMenuContent), (0, _vue.h)('div', {
+              class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
+            }, [childSuffixIcon && _xeUtils.default.isFunction(childSuffixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(childSuffixIcon({}))) : (0, _vue.h)('i', {
+              class: childSuffixIcon
+            }), childSuffixOpts.content ? (0, _vue.h)('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)])])]);
+          })) : null]);
+        }));
+      }) : [])]);
+    };
+    $xeMenuPanel.renderVN = renderVN;
+    return $xeMenuPanel;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/table/module/menu/panel.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../../ui"),_utils=require("../../../ui/src/utils"),_vn=require("../../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getIcon,renderEmptyElement}=_ui.VxeUI;var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeTableMenuPanel",setup(e,t){var n=_xeUtils.default.uniqueId();let v=(0,_vue.inject)("$xeTable",{}),u=v.reactData,l=(0,_vue.ref)(),s={refElem:l};n={xID:n,props:e,context:t,getRefMaps:()=>s};return n.renderVN=()=>{let a=u.ctxMenuStore;var e=v.getComputeMaps().computeMenuOpts,{transfer:e,destroyOnClose:t}=e.value,{visible:n,list:s,className:i}=a;return(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!e},[(0,_vue.h)("div",{ref:l,class:["vxe-table--context-menu-wrapper",i,{"is--visible":n}],style:a.style},!t||n?s.map((e,r)=>e.every(e=>!1===e.visible)?renderEmptyElement(v):(0,_vue.h)("ul",{class:"vxe-context-menu--option-wrapper",key:r},e.map((c,o)=>{var e=c.children&&c.children.some(e=>!1!==e.visible),t=Object.assign({},c.prefixConfig),n=t.icon||c.prefixIcon,s=Object.assign({},c.suffixConfig),i=s.icon||c.suffixIcon,u=(0,_utils.getFuncText)(c.name);return!1===c.visible?renderEmptyElement(v):(0,_vue.h)("li",{class:[c.className,{"link--disabled":c.disabled,"link--active":c===a.selected}],key:r+"_"+o},[(0,_vue.h)("a",{class:"vxe-context-menu--link",onClick(e){v.ctxMenuLinkEvent(e,c)},onMouseover(e){v.ctxMenuMouseoverEvent(e,c)},onMouseout(e){v.ctxMenuMouseoutEvent(e,c)}},[(0,_vue.h)("div",{class:["vxe-context-menu--link-prefix",t.className||""]},[n&&_xeUtils.default.isFunction(n)?(0,_vue.h)("span",{},(0,_vn.getSlotVNs)(n({}))):(0,_vue.h)("i",{class:n}),t.content?(0,_vue.h)("span",{},""+t.content):renderEmptyElement(v)]),(0,_vue.h)("div",{class:"vxe-context-menu--link-content",title:u},u),(0,_vue.h)("div",{class:["vxe-context-menu--link-suffix",s.className||""]},[i&&_xeUtils.default.isFunction(i)?(0,_vue.h)("span",{},(0,_vn.getSlotVNs)(i({}))):(0,_vue.h)("i",{class:i||(e?getIcon().TABLE_MENU_OPTIONS:"")}),s.content?(0,_vue.h)("span",""+s.content):renderEmptyElement(v)])]),e&&c.children?(0,_vue.h)("ul",{class:["vxe-table--context-menu-clild-wrapper",{"is--show":c===a.selected&&a.showChild}]},c.children.map((t,e)=>{var n=Object.assign({},t.prefixConfig),s=n.icon||t.prefixIcon,i=Object.assign({},t.suffixConfig),u=i.icon||t.suffixIcon,l=(0,_utils.getFuncText)(t.name);return!1===t.visible?null:(0,_vue.h)("li",{class:[t.className,{"link--disabled":t.disabled,"link--active":t===a.selectChild}],key:r+`_${o}_`+e},[(0,_vue.h)("a",{class:"vxe-context-menu--link",onClick(e){v.ctxMenuLinkEvent(e,t)},onMouseover(e){v.ctxMenuMouseoverEvent(e,c,t)},onMouseout(e){v.ctxMenuMouseoutEvent(e,c)}},[(0,_vue.h)("div",{class:["vxe-context-menu--link-prefix",n.className||""]},[s&&_xeUtils.default.isFunction(s)?(0,_vue.h)("span",{},(0,_vn.getSlotVNs)(s({}))):(0,_vue.h)("i",{class:s}),n.content?(0,_vue.h)("span",""+n.content):renderEmptyElement(v)]),(0,_vue.h)("div",{class:"vxe-context-menu--link-content",title:l},l),(0,_vue.h)("div",{class:["vxe-context-menu--link-suffix",i.className||""]},[u&&_xeUtils.default.isFunction(u)?(0,_vue.h)("span",{},(0,_vn.getSlotVNs)(u({}))):(0,_vue.h)("i",{class:u}),i.content?(0,_vue.h)("span",""+i.content):renderEmptyElement(v)])])])})):null])}))):[])])},n},render(){return this.renderVN()}});