vxe-pc-ui 4.20.24 → 4.20.26

package/es/menu/src/menu.js

@@ -1,7 +1,7 @@
 import { ref, h, reactive, Teleport, inject, resolveComponent, watch, computed, nextTick, onBeforeUnmount, onMounted } from "vue";
 import { defineVxeComponent } from "../../ui/src/comp";
 import XEUtils from "xe-utils";
-import { VxeUI, createEvent, permission, globalEvents, renderEmptyElement } from "../../ui";
+import { VxeUI } from "@vxe-ui/core";
 import { getPopupContainer, scrollToView, toCssUnit } from "../../ui/src/dom";
 import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from "../../ui/src/utils";
 import { getSlotVNs } from "../../ui/src/vn";
@@ -9,7 +9,7 @@ import { createComponentLog } from "../../ui/src/log";
 import VxeLoadingComponent from "../../loading";
 import VxeScrollbarComponent from "../../scrollbar";
 const { errLog } = createComponentLog("menu");
-const { menus, useFns, getConfig, getIcon } = VxeUI;
+const { menus, useFns, getConfig, getIcon, createEvent, permission, globalEvents, renderEmptyElement } = VxeUI;
 function createInternalData() {
   return {
     lastActiveTime: 0,
@@ -74,12 +74,7 @@ var menu_default = defineVxeComponent({
       default: () => getConfig().menu.appendTo
     }
   },
-  emits: [
-    "update:modelValue",
-    "click",
-    "option-menu",
-    "menu-click"
-  ],
+  emits: ["update:modelValue", "click", "option-menu", "menu-click"],
   setup(props, context) {
     const { emit, slots } = context;
     const xID = XEUtils.uniqueId();
@@ -172,21 +167,25 @@ var menu_default = defineVxeComponent({
     const updateActiveMenu = (isDefExpand) => {
       const { activeName } = reactData;
       const { menuInitMaps } = internalData;
-      XEUtils.eachTree(reactData.menuList, (item, index, items, path, parentItem, nodes) => {
-        if (item.itemKey === activeName) {
-          nodes.forEach((obj) => {
-            obj.isActive = true;
-            if (isDefExpand) {
-              obj.isExpand = true;
-              menuInitMaps[obj.itemId] = true;
-            }
-          });
-          item.isExactActive = true;
-        } else {
-          item.isExactActive = false;
-          item.isActive = false;
-        }
-      }, { children: "childList" });
+      XEUtils.eachTree(
+        reactData.menuList,
+        (item, index, items, path, parentItem, nodes) => {
+          if (item.itemKey === activeName) {
+            nodes.forEach((obj) => {
+              obj.isActive = true;
+              if (isDefExpand) {
+                obj.isExpand = true;
+                menuInitMaps[obj.itemId] = true;
+              }
+            });
+            item.isExactActive = true;
+          } else {
+            item.isExactActive = false;
+            item.isActive = false;
+          }
+        },
+        { children: "childList" }
+      );
     };
     const updateMenuConfig = () => {
       const { options, expandAll, expandKeys } = props;
@@ -204,43 +203,47 @@ var menu_default = defineVxeComponent({
       }
       const muCacheMaps = {};
       const muKeyMaps = {};
-      reactData.menuList = XEUtils.mapTree(options, (item, index, items, path, parentItem) => {
-        const itemId = ++nemuUniqueKey;
-        const itemKey = item[keyField] || path.join(",");
-        const childList = item[childrenField];
-        const hasChild = childList && childList.length > 0;
-        const isExpand = hasChild ? XEUtils.isBoolean(item.expanded) ? item.expanded : defaultExpandMaps[itemKey] || !!expandAll : false;
-        if (isExpand) {
-          muInitMaps[itemId] = true;
-        }
-        const objItem = {
-          itemConf: item,
-          title: item[titleField],
-          name: item[keyField],
-          icon: item.icon,
-          linkUrl: item[linkUrlField],
-          linkTarget: item.linkTarget,
-          routerLink: item[routerLinkField],
-          permissionCode: item.permissionCode,
-          children: childList,
-          slots: item.slots,
-          parentKey: parentItem ? parentItem.name || path.slice(0, path.length - 1).join(",") : "",
-          level: path.length,
-          itemId,
-          itemKey,
-          isExactActive: false,
-          isActive: false,
-          isExpand,
-          hasChild,
-          childList: []
-        };
-        if (muKeyMaps[itemKey]) {
-          errLog("vxe.error.repeatKey", [keyField, item[keyField]]);
-        }
-        muCacheMaps[itemId] = objItem;
-        muKeyMaps[itemKey] = objItem;
-        return objItem;
-      }, { children: "children", mapChildren: "childList" });
+      reactData.menuList = XEUtils.mapTree(
+        options,
+        (item, index, items, path, parentItem) => {
+          const itemId = ++nemuUniqueKey;
+          const itemKey = item[keyField] || path.join(",");
+          const childList = item[childrenField];
+          const hasChild = childList && childList.length > 0;
+          const isExpand = hasChild ? XEUtils.isBoolean(item.expanded) ? item.expanded : defaultExpandMaps[itemKey] || !!expandAll : false;
+          if (isExpand) {
+            muInitMaps[itemId] = true;
+          }
+          const objItem = {
+            itemConf: item,
+            title: item[titleField],
+            name: item[keyField],
+            icon: item.icon,
+            linkUrl: item[linkUrlField],
+            linkTarget: item.linkTarget,
+            routerLink: item[routerLinkField],
+            permissionCode: item.permissionCode,
+            children: childList,
+            slots: item.slots,
+            parentKey: parentItem ? parentItem.name || path.slice(0, path.length - 1).join(",") : "",
+            level: path.length,
+            itemId,
+            itemKey,
+            isExactActive: false,
+            isActive: false,
+            isExpand,
+            hasChild,
+            childList: []
+          };
+          if (muKeyMaps[itemKey]) {
+            errLog("vxe.error.repeatKey", [keyField, item[keyField]]);
+          }
+          muCacheMaps[itemId] = objItem;
+          muKeyMaps[itemKey] = objItem;
+          return objItem;
+        },
+        { children: "children", mapChildren: "childList" }
+      );
       internalData.menuInitMaps = muInitMaps;
       internalData.menuCacheMaps = muCacheMaps;
       internalData.menuKeyMaps = muKeyMaps;
@@ -449,9 +452,13 @@ var menu_default = defineVxeComponent({
       },
       clearAllExpandMenu() {
         const { menuList } = reactData;
-        XEUtils.eachTree(menuList, (item) => {
-          item.isExpand = false;
-        }, { children: "childList" });
+        XEUtils.eachTree(
+          menuList,
+          (item) => {
+            item.isExpand = false;
+          },
+          { children: "childList" }
+        );
         internalData.menuInitMaps = {};
         return nextTick();
       },
@@ -499,27 +506,45 @@ var menu_default = defineVxeComponent({
         collapsed: isCollapsed
       };
       return [
-        optionSlot ? renderEmptyElement($xeMenu) : h("div", {
-          class: "vxe-menu--item-link-icon"
-        }, iconSlot ? callSlot(iconSlot, params) : icon ? [h("i", {
-          class: icon
-        })] : []),
-        optionSlot ? h("div", {
-          class: "vxe-menu--item-custom-title"
-        }, callSlot(optionSlot, params)) : h("div", {
-          class: "vxe-menu--item-link-title",
-          title
-        }, titleSlot ? callSlot(titleSlot, params) : title),
-        hasChild ? h("div", {
-          class: "vxe-menu--item-link-collapse",
-          onClick(evnt) {
-            handleClickIconCollapse(evnt, item, itemList);
-          }
-        }, [
-          h("i", {
-            class: isExpand ? getIcon().MENU_ITEM_EXPAND_OPEN : getIcon().MENU_ITEM_EXPAND_CLOSE
-          })
-        ]) : renderEmptyElement($xeMenu)
+        optionSlot ? renderEmptyElement($xeMenu) : h(
+          "div",
+          {
+            class: "vxe-menu--item-link-icon"
+          },
+          iconSlot ? callSlot(iconSlot, params) : icon ? [
+            h("i", {
+              class: icon
+            })
+          ] : []
+        ),
+        optionSlot ? h(
+          "div",
+          {
+            class: "vxe-menu--item-custom-title"
+          },
+          callSlot(optionSlot, params)
+        ) : h(
+          "div",
+          {
+            class: "vxe-menu--item-link-title",
+            title
+          },
+          titleSlot ? callSlot(titleSlot, params) : title
+        ),
+        hasChild ? h(
+          "div",
+          {
+            class: "vxe-menu--item-link-collapse",
+            onClick(evnt) {
+              handleClickIconCollapse(evnt, item, itemList);
+            }
+          },
+          [
+            h("i", {
+              class: isExpand ? getIcon().MENU_ITEM_EXPAND_OPEN : getIcon().MENU_ITEM_EXPAND_CLOSE
+            })
+          ]
+        ) : renderEmptyElement($xeMenu)
       ];
     };
     const renderDefaultChildren = (item, itemList) => {
@@ -541,36 +566,60 @@ var menu_default = defineVxeComponent({
           handleClickMenu(evnt, item, itemList);
         }
       };
-      return h("div", {
-        key: itemKey,
-        class: ["vxe-menu--item-wrapper", `vxe-menu--item-level${level}`, {
-          "has--child": hasChild,
-          "is--exact-active": isExactActive,
-          "is--active": isActive,
-          "is--expand": isExpandChild
-        }],
-        "data-menu-id": itemId
-      }, [
-        linkUrl ? h("a", {
-          class: "vxe-menu--item-link is--link",
-          href: linkUrl,
-          target: linkTarget,
-          ...linkOns
-        }, renderMenuTitle(item, itemList)) : routerLink ? h(resolveComponent("router-link"), {
-          class: "vxe-menu--item-link is--router",
-          to: routerLink,
-          target: linkTarget,
-          ...linkOns
-        }, {
-          default: () => renderMenuTitle(item, itemList)
-        }) : h("div", {
-          class: "vxe-menu--item-link is--default",
-          ...linkOns
-        }, renderMenuTitle(item, itemList)),
-        hasChild ? h("div", {
-          class: "vxe-menu--item-group"
-        }, isExpandChild || menuInitMaps[itemId] ? childList.map((child) => renderDefaultChildren(child, childList)) : []) : renderEmptyElement($xeMenu)
-      ]);
+      return h(
+        "div",
+        {
+          key: itemKey,
+          class: [
+            "vxe-menu--item-wrapper",
+            `vxe-menu--item-level${level}`,
+            {
+              "has--child": hasChild,
+              "is--exact-active": isExactActive,
+              "is--active": isActive,
+              "is--expand": isExpandChild
+            }
+          ],
+          "data-menu-id": itemId
+        },
+        [
+          linkUrl ? h(
+            "a",
+            {
+              class: "vxe-menu--item-link is--link",
+              href: linkUrl,
+              target: linkTarget,
+              ...linkOns
+            },
+            renderMenuTitle(item, itemList)
+          ) : routerLink ? h(
+            resolveComponent("router-link"),
+            {
+              class: "vxe-menu--item-link is--router",
+              to: routerLink,
+              target: linkTarget,
+              ...linkOns
+            },
+            {
+              default: () => renderMenuTitle(item, itemList)
+            }
+          ) : h(
+            "div",
+            {
+              class: "vxe-menu--item-link is--default",
+              ...linkOns
+            },
+            renderMenuTitle(item, itemList)
+          ),
+          hasChild ? h(
+            "div",
+            {
+              class: "vxe-menu--item-group"
+            },
+            isExpandChild || menuInitMaps[itemId] ? childList.map((child) => renderDefaultChildren(child, childList)) : []
+          ) : renderEmptyElement($xeMenu)
+        ]
+      );
     };
     const renderCollapseChildren = (item, itemList) => {
       const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, linkUrl, linkTarget, childList } = item;
@@ -587,35 +636,59 @@ var menu_default = defineVxeComponent({
           handleClickMenu(evnt, item, itemList);
         }
       };
-      return h("div", {
-        key: itemKey,
-        class: ["vxe-menu--item-wrapper", `vxe-menu--item-level${level}`, {
-          "has--child": hasChild,
-          "is--exact-active": isExactActive,
-          "is--active": isActive
-        }],
-        "data-menu-id": itemId
-      }, [
-        linkUrl ? h("a", {
-          class: "vxe-menu--item-link is--link",
-          href: linkUrl,
-          target: linkTarget,
-          ...linkOns
-        }, renderMenuTitle(item, itemList)) : routerLink ? h(resolveComponent("router-link"), {
-          class: "vxe-menu--item-link is--router",
-          to: routerLink,
-          target: linkTarget,
-          ...linkOns
-        }, {
-          default: () => renderMenuTitle(item, itemList)
-        }) : h("div", {
-          class: "vxe-menu--item-link is--default",
-          ...linkOns
-        }, renderMenuTitle(item, itemList)),
-        hasChild ? h("div", {
-          class: "vxe-menu--item-group"
-        }, childList.map((child) => renderDefaultChildren(child, childList))) : renderEmptyElement($xeMenu)
-      ]);
+      return h(
+        "div",
+        {
+          key: itemKey,
+          class: [
+            "vxe-menu--item-wrapper",
+            `vxe-menu--item-level${level}`,
+            {
+              "has--child": hasChild,
+              "is--exact-active": isExactActive,
+              "is--active": isActive
+            }
+          ],
+          "data-menu-id": itemId
+        },
+        [
+          linkUrl ? h(
+            "a",
+            {
+              class: "vxe-menu--item-link is--link",
+              href: linkUrl,
+              target: linkTarget,
+              ...linkOns
+            },
+            renderMenuTitle(item, itemList)
+          ) : routerLink ? h(
+            resolveComponent("router-link"),
+            {
+              class: "vxe-menu--item-link is--router",
+              to: routerLink,
+              target: linkTarget,
+              ...linkOns
+            },
+            {
+              default: () => renderMenuTitle(item, itemList)
+            }
+          ) : h(
+            "div",
+            {
+              class: "vxe-menu--item-link is--default",
+              ...linkOns
+            },
+            renderMenuTitle(item, itemList)
+          ),
+          hasChild ? h(
+            "div",
+            {
+              class: "vxe-menu--item-group"
+            },
+            childList.map((child) => renderDefaultChildren(child, childList))
+          ) : renderEmptyElement($xeMenu)
+        ]
+      );
     };
     const renderVN = () => {
       const { loading, collapseFixed, appendTo } = props;
@@ -637,75 +710,127 @@ var menu_default = defineVxeComponent({
         };
       }
       const stParams = { collapsed: isCollapsed };
-      return h("div", {
-        ref: refElem,
-        class: ["vxe-menu", {
-          [`border--${currBorder}`]: currBorder,
-          [`size--${vSize}`]: vSize,
-          "is--collapsed": isCollapsed,
-          "is--loading": loading
-        }]
-      }, [
-        headerSlot ? h("div", {
-          class: "vxe-menu--header"
-        }, headerSlot(stParams)) : renderEmptyElement($xeMenu),
-        h("div", {
-          class: "vxe-menu--body"
-        }, menuList.map((child) => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))),
-        footerSlot ? h("div", {
-          class: "vxe-menu--footer"
-        }, footerSlot(stParams)) : renderEmptyElement($xeMenu),
-        h(Teleport, {
-          to: getPopupContainer(appendTo),
-          disabled: !initialized
-        }, [
-          h("div", {
-            ref: refCollapseElem,
-            class: ["vxe-menu--collapse-wrapper", {
+      return h(
+        "div",
+        {
+          ref: refElem,
+          class: [
+            "vxe-menu",
+            {
+              [`border--${currBorder}`]: currBorder,
               [`size--${vSize}`]: vSize,
               "is--collapsed": isCollapsed,
-              "is--enter": isEnterCollapse,
               "is--loading": loading
-            }],
-            style: Object.assign({}, varStyle, collapseStyle),
-            ...ons
-          }, isCollapsed ? [
-            headerSlot ? h("div", {
+            }
+          ]
+        },
+        [
+          headerSlot ? h(
+            "div",
+            {
               class: "vxe-menu--header"
-            }, headerSlot(stParams)) : renderEmptyElement($xeMenu),
-            isVScrollbar && isEnterCollapse ? h(VxeScrollbarComponent, {
-              ref: refCollapseBodyScrollbar,
-              class: "vxe-menu--scrollbar-body",
-              ...scrollbarOpts,
-              viewClassName: "vxe-menu--scrollbar-body-view" + (viewClassName ? " " + viewClassName : ""),
-              viewInnerClassName: "vxe-menu--scrollbar-body-inner" + (viewClassName ? " " + viewInnerClassName : "")
-            }, {
-              default: () => menuList.map((child) => renderDefaultChildren(child, menuList))
-            }) : h("div", {
-              ref: refCollapseBodyElem,
+            },
+            headerSlot(stParams)
+          ) : renderEmptyElement($xeMenu),
+          h(
+            "div",
+            {
               class: "vxe-menu--body"
-            }, menuList.map((child) => renderDefaultChildren(child, menuList))),
-            footerSlot ? h("div", {
+            },
+            menuList.map((child) => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))
+          ),
+          footerSlot ? h(
+            "div",
+            {
               class: "vxe-menu--footer"
-            }, footerSlot(stParams)) : renderEmptyElement($xeMenu)
-          ] : [])
-        ]),
-        /**
-         * 加载中
-         */
-        h(VxeLoadingComponent, {
-          class: "vxe-menu-view--loading",
-          modelValue: loading
-        })
-      ]);
+            },
+            footerSlot(stParams)
+          ) : renderEmptyElement($xeMenu),
+          h(
+            Teleport,
+            {
+              to: getPopupContainer(appendTo),
+              disabled: !initialized
+            },
+            [
+              h(
+                "div",
+                {
+                  ref: refCollapseElem,
+                  class: [
+                    "vxe-menu--collapse-wrapper",
+                    {
+                      [`size--${vSize}`]: vSize,
+                      "is--collapsed": isCollapsed,
+                      "is--enter": isEnterCollapse,
+                      "is--loading": loading
+                    }
+                  ],
+                  style: Object.assign({}, varStyle, collapseStyle),
+                  ...ons
+                },
+                isCollapsed ? [
+                  headerSlot ? h(
+                    "div",
+                    {
+                      class: "vxe-menu--header"
+                    },
+                    headerSlot(stParams)
+                  ) : renderEmptyElement($xeMenu),
+                  isVScrollbar && isEnterCollapse ? h(
+                    VxeScrollbarComponent,
+                    {
+                      ref: refCollapseBodyScrollbar,
+                      class: "vxe-menu--scrollbar-body",
+                      ...scrollbarOpts,
+                      viewClassName: "vxe-menu--scrollbar-body-view" + (viewClassName ? " " + viewClassName : ""),
+                      viewInnerClassName: "vxe-menu--scrollbar-body-inner" + (viewClassName ? " " + viewInnerClassName : "")
+                    },
+                    {
+                      default: () => menuList.map((child) => renderDefaultChildren(child, menuList))
+                    }
+                  ) : h(
+                    "div",
+                    {
+                      ref: refCollapseBodyElem,
+                      class: "vxe-menu--body"
+                    },
+                    menuList.map((child) => renderDefaultChildren(child, menuList))
+                  ),
+                  footerSlot ? h(
+                    "div",
+                    {
+                      class: "vxe-menu--footer"
+                    },
+                    footerSlot(stParams)
+                  ) : renderEmptyElement($xeMenu)
+                ] : []
+              )
+            ]
+          ),
+          /**
+           * 加载中
+           */
+          h(VxeLoadingComponent, {
+            class: "vxe-menu-view--loading",
+            modelValue: loading
+          })
+        ]
+      );
     };
     const optFlag = ref(0);
-    watch(() => props.options ? props.options.length : -1, () => {
-      optFlag.value++;
-    });
-    watch(() => props.options, () => {
-      optFlag.value++;
-    });
+    watch(
+      () => props.options ? props.options.length : -1,
+      () => {
+        optFlag.value++;
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        optFlag.value++;
+      }
+    );
     watch(optFlag, () => {
       updateMenuConfig();
       updateActiveMenu(true);
@@ -713,12 +838,18 @@ var menu_default = defineVxeComponent({
         $xeMenu.scrollToActiveMenu();
       });
     });
-    watch(() => props.modelValue, (val) => {
-      reactData.activeName = val;
-    });
-    watch(() => reactData.activeName, () => {
-      updateActiveMenu(true);
-    });
+    watch(
+      () => props.modelValue,
+      (val) => {
+        reactData.activeName = val;
+      }
+    );
+    watch(
+      () => reactData.activeName,
+      () => {
+        updateActiveMenu(true);
+      }
+    );
     watch(computeIsCollapsed, () => {
       handleCollapseMenu();
     });