n8n-editor-ui 1.115.0 → 1.116.0

package/dist/assets/NavigationDropdown-BmOSJSCn.js

@@ -0,0 +1,1116 @@
+import { fC as EVENT_CODE, fD as triggerEvent, fE as _export_sfc, d as defineComponent, e as createBlock, g as openBlock, w as withCtx, Y as renderSlot, K as mergeProps, fF as Transition, fG as useNamespace, fH as addClass, fI as hasClass, fJ as removeClass, x as computed, fK as TinyColor, fL as buildProps, fM as useDeprecated, bP as inject, fN as throwError, r as ref, fO as arrow_down_default, fP as arrow_right_default, c$ as reactive, a8 as watch, bK as provide, eD as getCurrentInstance, o as onMounted, X as onBeforeUnmount, aY as h, fQ as ElIcon, fR as isString, fS as ElTooltip, fT as _CollapseTransition, b4 as withDirectives, b5 as vShow, F as Fragment, fU as useTimeoutFn, fV as iconPropType, fW as isObject, fX as watchEffect, fY as useResizeObserver, fZ as flattedChildren, f_ as more_default, f$ as isNil, g0 as mutable, g1 as definePropType, Z as nextTick, a9 as resolveComponent, h as createElementBlock, j as createBaseVNode, n as normalizeClass, cl as toRef, l as createTextVNode, t as toDisplayString, g2 as withNoopInstall, g3 as withInstall, i as createVNode, k as unref, A as renderList, g4 as _sfc_main$4, f as createCommentVNode, N as N8nIcon, p as N8nText, bX as withKeys, _ as _export_sfc$1 } from "./index-CW8ZBeS3.js";
+let SubMenu$1 = class SubMenu {
+  constructor(parent, domNode) {
+    this.parent = parent;
+    this.domNode = domNode;
+    this.subIndex = 0;
+    this.subIndex = 0;
+    this.init();
+  }
+  init() {
+    this.subMenuItems = this.domNode.querySelectorAll("li");
+    this.addListeners();
+  }
+  gotoSubIndex(idx) {
+    if (idx === this.subMenuItems.length) {
+      idx = 0;
+    } else if (idx < 0) {
+      idx = this.subMenuItems.length - 1;
+    }
+    this.subMenuItems[idx].focus();
+    this.subIndex = idx;
+  }
+  addListeners() {
+    const parentNode = this.parent.domNode;
+    Array.prototype.forEach.call(this.subMenuItems, (el) => {
+      el.addEventListener("keydown", (event) => {
+        let prevDef = false;
+        switch (event.code) {
+          case EVENT_CODE.down: {
+            this.gotoSubIndex(this.subIndex + 1);
+            prevDef = true;
+            break;
+          }
+          case EVENT_CODE.up: {
+            this.gotoSubIndex(this.subIndex - 1);
+            prevDef = true;
+            break;
+          }
+          case EVENT_CODE.tab: {
+            triggerEvent(parentNode, "mouseleave");
+            break;
+          }
+          case EVENT_CODE.enter:
+          case EVENT_CODE.space: {
+            prevDef = true;
+            event.currentTarget.click();
+            break;
+          }
+        }
+        if (prevDef) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        return false;
+      });
+    });
+  }
+};
+let MenuItem$1 = class MenuItem {
+  constructor(domNode, namespace) {
+    this.domNode = domNode;
+    this.submenu = null;
+    this.submenu = null;
+    this.init(namespace);
+  }
+  init(namespace) {
+    this.domNode.setAttribute("tabindex", "0");
+    const menuChild = this.domNode.querySelector(`.${namespace}-menu`);
+    if (menuChild) {
+      this.submenu = new SubMenu$1(this, menuChild);
+    }
+    this.addListeners();
+  }
+  addListeners() {
+    this.domNode.addEventListener("keydown", (event) => {
+      let prevDef = false;
+      switch (event.code) {
+        case EVENT_CODE.down: {
+          triggerEvent(event.currentTarget, "mouseenter");
+          this.submenu && this.submenu.gotoSubIndex(0);
+          prevDef = true;
+          break;
+        }
+        case EVENT_CODE.up: {
+          triggerEvent(event.currentTarget, "mouseenter");
+          this.submenu && this.submenu.gotoSubIndex(this.submenu.subMenuItems.length - 1);
+          prevDef = true;
+          break;
+        }
+        case EVENT_CODE.tab: {
+          triggerEvent(event.currentTarget, "mouseleave");
+          break;
+        }
+        case EVENT_CODE.enter:
+        case EVENT_CODE.space: {
+          prevDef = true;
+          event.currentTarget.click();
+          break;
+        }
+      }
+      if (prevDef) {
+        event.preventDefault();
+      }
+    });
+  }
+};
+let Menu$1 = class Menu {
+  constructor(domNode, namespace) {
+    this.domNode = domNode;
+    this.init(namespace);
+  }
+  init(namespace) {
+    const menuChildren = this.domNode.childNodes;
+    Array.from(menuChildren).forEach((child) => {
+      if (child.nodeType === 1) {
+        new MenuItem$1(child, namespace);
+      }
+    });
+  }
+};
+const _sfc_main$3 = defineComponent({
+  name: "ElMenuCollapseTransition",
+  setup() {
+    const ns = useNamespace("menu");
+    const listeners = {
+      onBeforeEnter: (el) => el.style.opacity = "0.2",
+      onEnter(el, done) {
+        addClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = "1";
+        done();
+      },
+      onAfterEnter(el) {
+        removeClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = "";
+      },
+      onBeforeLeave(el) {
+        if (!el.dataset) {
+          el.dataset = {};
+        }
+        if (hasClass(el, ns.m("collapse"))) {
+          removeClass(el, ns.m("collapse"));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          addClass(el, ns.m("collapse"));
+        } else {
+          addClass(el, ns.m("collapse"));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          removeClass(el, ns.m("collapse"));
+        }
+        el.style.width = `${el.scrollWidth}px`;
+        el.style.overflow = "hidden";
+      },
+      onLeave(el) {
+        addClass(el, "horizontal-collapse-transition");
+        el.style.width = `${el.dataset.scrollWidth}px`;
+      }
+    };
+    return {
+      listeners
+    };
+  }
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, _ctx.listeners), {
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+  }, 16);
+}
+var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-collapse-transition.vue"]]);
+function useMenu(instance, currentIndex) {
+  const indexPath = computed(() => {
+    let parent = instance.parent;
+    const path = [currentIndex.value];
+    while (parent.type.name !== "ElMenu") {
+      if (parent.props.index) {
+        path.unshift(parent.props.index);
+      }
+      parent = parent.parent;
+    }
+    return path;
+  });
+  const parentMenu = computed(() => {
+    let parent = instance.parent;
+    while (parent && !["ElMenu", "ElSubMenu"].includes(parent.type.name)) {
+      parent = parent.parent;
+    }
+    return parent;
+  });
+  return {
+    parentMenu,
+    indexPath
+  };
+}
+function useMenuColor(props) {
+  const menuBarColor = computed(() => {
+    const color = props.backgroundColor;
+    if (!color) {
+      return "";
+    } else {
+      return new TinyColor(color).shade(20).toString();
+    }
+  });
+  return menuBarColor;
+}
+const useMenuCssVar = (props, level) => {
+  const ns = useNamespace("menu");
+  return computed(() => {
+    return ns.cssVarBlock({
+      "text-color": props.textColor || "",
+      "hover-text-color": props.textColor || "",
+      "bg-color": props.backgroundColor || "",
+      "hover-bg-color": useMenuColor(props).value || "",
+      "active-color": props.activeTextColor || "",
+      level: `${level}`
+    });
+  });
+};
+const subMenuProps = buildProps({
+  index: {
+    type: String,
+    required: true
+  },
+  showTimeout: {
+    type: Number,
+    default: 300
+  },
+  hideTimeout: {
+    type: Number,
+    default: 300
+  },
+  popperClass: String,
+  disabled: Boolean,
+  popperAppendToBody: {
+    type: Boolean,
+    default: void 0
+  },
+  teleported: {
+    type: Boolean,
+    default: void 0
+  },
+  popperOffset: {
+    type: Number,
+    default: 6
+  },
+  expandCloseIcon: {
+    type: iconPropType
+  },
+  expandOpenIcon: {
+    type: iconPropType
+  },
+  collapseCloseIcon: {
+    type: iconPropType
+  },
+  collapseOpenIcon: {
+    type: iconPropType
+  }
+});
+const COMPONENT_NAME$2 = "ElSubMenu";
+var SubMenu2 = defineComponent({
+  name: COMPONENT_NAME$2,
+  props: subMenuProps,
+  setup(props, { slots, expose }) {
+    useDeprecated({
+      from: "popper-append-to-body",
+      replacement: "teleported",
+      scope: COMPONENT_NAME$2,
+      version: "2.3.0",
+      ref: "https://element-plus.org/en-US/component/menu.html#submenu-attributes"
+    }, computed(() => props.popperAppendToBody !== void 0));
+    const instance = getCurrentInstance();
+    const { indexPath, parentMenu } = useMenu(instance, computed(() => props.index));
+    const nsMenu = useNamespace("menu");
+    const nsSubMenu = useNamespace("sub-menu");
+    const rootMenu = inject("rootMenu");
+    if (!rootMenu)
+      throwError(COMPONENT_NAME$2, "can not inject root menu");
+    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    if (!subMenu)
+      throwError(COMPONENT_NAME$2, "can not inject sub menu");
+    const items = ref({});
+    const subMenus = ref({});
+    let timeout;
+    const mouseInChild = ref(false);
+    const verticalTitleRef = ref();
+    const vPopper = ref(null);
+    const currentPlacement = computed(() => mode.value === "horizontal" && isFirstLevel.value ? "bottom-start" : "right-start");
+    const subMenuTitleIcon = computed(() => {
+      return mode.value === "horizontal" && isFirstLevel.value || mode.value === "vertical" && !rootMenu.props.collapse ? props.expandCloseIcon && props.expandOpenIcon ? opened.value ? props.expandOpenIcon : props.expandCloseIcon : arrow_down_default : props.collapseCloseIcon && props.collapseOpenIcon ? opened.value ? props.collapseOpenIcon : props.collapseCloseIcon : arrow_right_default;
+    });
+    const isFirstLevel = computed(() => {
+      return subMenu.level === 0;
+    });
+    const appendToBody = computed(() => {
+      var _a;
+      const value = (_a = props.teleported) != null ? _a : props.popperAppendToBody;
+      return value === void 0 ? isFirstLevel.value : value;
+    });
+    const menuTransitionName = computed(() => rootMenu.props.collapse ? `${nsMenu.namespace.value}-zoom-in-left` : `${nsMenu.namespace.value}-zoom-in-top`);
+    const fallbackPlacements = computed(() => mode.value === "horizontal" && isFirstLevel.value ? [
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end",
+      "right-start",
+      "left-start"
+    ] : [
+      "right-start",
+      "right",
+      "right-end",
+      "left-start",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]);
+    const opened = computed(() => rootMenu.openedMenus.includes(props.index));
+    const active = computed(() => {
+      let isActive = false;
+      Object.values(items.value).forEach((item2) => {
+        if (item2.active) {
+          isActive = true;
+        }
+      });
+      Object.values(subMenus.value).forEach((subItem) => {
+        if (subItem.active) {
+          isActive = true;
+        }
+      });
+      return isActive;
+    });
+    const mode = computed(() => rootMenu.props.mode);
+    const item = reactive({
+      index: props.index,
+      indexPath,
+      active
+    });
+    const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1);
+    const doDestroy = () => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = vPopper.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.popperInstanceRef) == null ? void 0 : _c.destroy();
+    };
+    const handleCollapseToggle = (value) => {
+      if (!value) {
+        doDestroy();
+      }
+    };
+    const handleClick = () => {
+      if (rootMenu.props.menuTrigger === "hover" && rootMenu.props.mode === "horizontal" || rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled)
+        return;
+      rootMenu.handleSubMenuClick({
+        index: props.index,
+        indexPath: indexPath.value,
+        active: active.value
+      });
+    };
+    const handleMouseenter = (event, showTimeout = props.showTimeout) => {
+      var _a;
+      if (event.type === "focus") {
+        return;
+      }
+      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical" || props.disabled) {
+        return;
+      }
+      subMenu.mouseInChild.value = true;
+      timeout == null ? void 0 : timeout();
+      ({ stop: timeout } = useTimeoutFn(() => {
+        rootMenu.openMenu(props.index, indexPath.value);
+      }, showTimeout));
+      if (appendToBody.value) {
+        (_a = parentMenu.value.vnode.el) == null ? void 0 : _a.dispatchEvent(new MouseEvent("mouseenter"));
+      }
+    };
+    const handleMouseleave = (deepDispatch = false) => {
+      var _a, _b;
+      if (rootMenu.props.menuTrigger === "click" && rootMenu.props.mode === "horizontal" || !rootMenu.props.collapse && rootMenu.props.mode === "vertical") {
+        return;
+      }
+      timeout == null ? void 0 : timeout();
+      subMenu.mouseInChild.value = false;
+      ({ stop: timeout } = useTimeoutFn(() => !mouseInChild.value && rootMenu.closeMenu(props.index, indexPath.value), props.hideTimeout));
+      if (appendToBody.value && deepDispatch) {
+        if (((_a = instance.parent) == null ? void 0 : _a.type.name) === "ElSubMenu") {
+          (_b = subMenu.handleMouseleave) == null ? void 0 : _b.call(subMenu, true);
+        }
+      }
+    };
+    watch(() => rootMenu.props.collapse, (value) => handleCollapseToggle(Boolean(value)));
+    {
+      const addSubMenu = (item2) => {
+        subMenus.value[item2.index] = item2;
+      };
+      const removeSubMenu = (item2) => {
+        delete subMenus.value[item2.index];
+      };
+      provide(`subMenu:${instance.uid}`, {
+        addSubMenu,
+        removeSubMenu,
+        handleMouseleave,
+        mouseInChild,
+        level: subMenu.level + 1
+      });
+    }
+    expose({
+      opened
+    });
+    onMounted(() => {
+      rootMenu.addSubMenu(item);
+      subMenu.addSubMenu(item);
+    });
+    onBeforeUnmount(() => {
+      subMenu.removeSubMenu(item);
+      rootMenu.removeSubMenu(item);
+    });
+    return () => {
+      var _a;
+      const titleTag = [
+        (_a = slots.title) == null ? void 0 : _a.call(slots),
+        h(ElIcon, {
+          class: nsSubMenu.e("icon-arrow"),
+          style: {
+            transform: opened.value ? props.expandCloseIcon && props.expandOpenIcon || props.collapseCloseIcon && props.collapseOpenIcon && rootMenu.props.collapse ? "none" : "rotateZ(180deg)" : "none"
+          }
+        }, {
+          default: () => isString(subMenuTitleIcon.value) ? h(instance.appContext.components[subMenuTitleIcon.value]) : h(subMenuTitleIcon.value)
+        })
+      ];
+      const child = rootMenu.isMenuPopup ? h(ElTooltip, {
+        ref: vPopper,
+        visible: opened.value,
+        effect: "light",
+        pure: true,
+        offset: props.popperOffset,
+        showArrow: false,
+        persistent: true,
+        popperClass: props.popperClass,
+        placement: currentPlacement.value,
+        teleported: appendToBody.value,
+        fallbackPlacements: fallbackPlacements.value,
+        transition: menuTransitionName.value,
+        gpuAcceleration: false
+      }, {
+        content: () => {
+          var _a2;
+          return h("div", {
+            class: [
+              nsMenu.m(mode.value),
+              nsMenu.m("popup-container"),
+              props.popperClass
+            ],
+            onMouseenter: (evt) => handleMouseenter(evt, 100),
+            onMouseleave: () => handleMouseleave(true),
+            onFocus: (evt) => handleMouseenter(evt, 100)
+          }, [
+            h("ul", {
+              class: [
+                nsMenu.b(),
+                nsMenu.m("popup"),
+                nsMenu.m(`popup-${currentPlacement.value}`)
+              ],
+              style: ulStyle.value
+            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])
+          ]);
+        },
+        default: () => h("div", {
+          class: nsSubMenu.e("title"),
+          onClick: handleClick
+        }, titleTag)
+      }) : h(Fragment, {}, [
+        h("div", {
+          class: nsSubMenu.e("title"),
+          ref: verticalTitleRef,
+          onClick: handleClick
+        }, titleTag),
+        h(_CollapseTransition, {}, {
+          default: () => {
+            var _a2;
+            return withDirectives(h("ul", {
+              role: "menu",
+              class: [nsMenu.b(), nsMenu.m("inline")],
+              style: ulStyle.value
+            }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vShow, opened.value]]);
+          }
+        })
+      ]);
+      return h("li", {
+        class: [
+          nsSubMenu.b(),
+          nsSubMenu.is("active", active.value),
+          nsSubMenu.is("opened", opened.value),
+          nsSubMenu.is("disabled", props.disabled)
+        ],
+        role: "menuitem",
+        ariaHaspopup: true,
+        ariaExpanded: opened.value,
+        onMouseenter: handleMouseenter,
+        onMouseleave: () => handleMouseleave(true),
+        onFocus: handleMouseenter
+      }, [child]);
+    };
+  }
+});
+const menuProps = buildProps({
+  mode: {
+    type: String,
+    values: ["horizontal", "vertical"],
+    default: "vertical"
+  },
+  defaultActive: {
+    type: String,
+    default: ""
+  },
+  defaultOpeneds: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  uniqueOpened: Boolean,
+  router: Boolean,
+  menuTrigger: {
+    type: String,
+    values: ["hover", "click"],
+    default: "hover"
+  },
+  collapse: Boolean,
+  backgroundColor: String,
+  textColor: String,
+  activeTextColor: String,
+  collapseTransition: {
+    type: Boolean,
+    default: true
+  },
+  ellipsis: {
+    type: Boolean,
+    default: true
+  },
+  popperEffect: {
+    type: String,
+    values: ["dark", "light"],
+    default: "dark"
+  }
+});
+const checkIndexPath = (indexPath) => Array.isArray(indexPath) && indexPath.every((path) => isString(path));
+const menuEmits = {
+  close: (index, indexPath) => isString(index) && checkIndexPath(indexPath),
+  open: (index, indexPath) => isString(index) && checkIndexPath(indexPath),
+  select: (index, indexPath, item, routerResult) => isString(index) && checkIndexPath(indexPath) && isObject(item) && (routerResult === void 0 || routerResult instanceof Promise)
+};
+var Menu2 = defineComponent({
+  name: "ElMenu",
+  props: menuProps,
+  emits: menuEmits,
+  setup(props, { emit, slots, expose }) {
+    const instance = getCurrentInstance();
+    const router = instance.appContext.config.globalProperties.$router;
+    const menu = ref();
+    const nsMenu = useNamespace("menu");
+    const nsSubMenu = useNamespace("sub-menu");
+    const sliceIndex = ref(-1);
+    const openedMenus = ref(props.defaultOpeneds && !props.collapse ? props.defaultOpeneds.slice(0) : []);
+    const activeIndex = ref(props.defaultActive);
+    const items = ref({});
+    const subMenus = ref({});
+    const isMenuPopup = computed(() => {
+      return props.mode === "horizontal" || props.mode === "vertical" && props.collapse;
+    });
+    const initMenu = () => {
+      const activeItem = activeIndex.value && items.value[activeIndex.value];
+      if (!activeItem || props.mode === "horizontal" || props.collapse)
+        return;
+      const indexPath = activeItem.indexPath;
+      indexPath.forEach((index) => {
+        const subMenu = subMenus.value[index];
+        subMenu && openMenu(index, subMenu.indexPath);
+      });
+    };
+    const openMenu = (index, indexPath) => {
+      if (openedMenus.value.includes(index))
+        return;
+      if (props.uniqueOpened) {
+        openedMenus.value = openedMenus.value.filter((index2) => indexPath.includes(index2));
+      }
+      openedMenus.value.push(index);
+      emit("open", index, indexPath);
+    };
+    const close = (index) => {
+      const i = openedMenus.value.indexOf(index);
+      if (i !== -1) {
+        openedMenus.value.splice(i, 1);
+      }
+    };
+    const closeMenu = (index, indexPath) => {
+      close(index);
+      emit("close", index, indexPath);
+    };
+    const handleSubMenuClick = ({
+      index,
+      indexPath
+    }) => {
+      const isOpened = openedMenus.value.includes(index);
+      if (isOpened) {
+        closeMenu(index, indexPath);
+      } else {
+        openMenu(index, indexPath);
+      }
+    };
+    const handleMenuItemClick = (menuItem) => {
+      if (props.mode === "horizontal" || props.collapse) {
+        openedMenus.value = [];
+      }
+      const { index, indexPath } = menuItem;
+      if (isNil(index) || isNil(indexPath))
+        return;
+      if (props.router && router) {
+        const route = menuItem.route || index;
+        const routerResult = router.push(route).then((res) => {
+          if (!res)
+            activeIndex.value = index;
+          return res;
+        });
+        emit("select", index, indexPath, { index, indexPath, route }, routerResult);
+      } else {
+        activeIndex.value = index;
+        emit("select", index, indexPath, { index, indexPath });
+      }
+    };
+    const updateActiveIndex = (val) => {
+      const itemsInData = items.value;
+      const item = itemsInData[val] || activeIndex.value && itemsInData[activeIndex.value] || itemsInData[props.defaultActive];
+      if (item) {
+        activeIndex.value = item.index;
+      } else {
+        activeIndex.value = val;
+      }
+    };
+    const calcSliceIndex = () => {
+      var _a, _b;
+      if (!menu.value)
+        return -1;
+      const items2 = Array.from((_b = (_a = menu.value) == null ? void 0 : _a.childNodes) != null ? _b : []).filter((item) => item.nodeName !== "#comment" && (item.nodeName !== "#text" || item.nodeValue));
+      const moreItemWidth = 64;
+      const paddingLeft = Number.parseInt(getComputedStyle(menu.value).paddingLeft, 10);
+      const paddingRight = Number.parseInt(getComputedStyle(menu.value).paddingRight, 10);
+      const menuWidth = menu.value.clientWidth - paddingLeft - paddingRight;
+      let calcWidth = 0;
+      let sliceIndex2 = 0;
+      items2.forEach((item, index) => {
+        calcWidth += item.offsetWidth || 0;
+        if (calcWidth <= menuWidth - moreItemWidth) {
+          sliceIndex2 = index + 1;
+        }
+      });
+      return sliceIndex2 === items2.length ? -1 : sliceIndex2;
+    };
+    const debounce = (fn, wait = 33.34) => {
+      let timmer;
+      return () => {
+        timmer && clearTimeout(timmer);
+        timmer = setTimeout(() => {
+          fn();
+        }, wait);
+      };
+    };
+    let isFirstTimeRender = true;
+    const handleResize = () => {
+      const callback = () => {
+        sliceIndex.value = -1;
+        nextTick(() => {
+          sliceIndex.value = calcSliceIndex();
+        });
+      };
+      isFirstTimeRender ? callback() : debounce(callback)();
+      isFirstTimeRender = false;
+    };
+    watch(() => props.defaultActive, (currentActive) => {
+      if (!items.value[currentActive]) {
+        activeIndex.value = "";
+      }
+      updateActiveIndex(currentActive);
+    });
+    watch(() => props.collapse, (value) => {
+      if (value)
+        openedMenus.value = [];
+    });
+    watch(items.value, initMenu);
+    let resizeStopper;
+    watchEffect(() => {
+      if (props.mode === "horizontal" && props.ellipsis)
+        resizeStopper = useResizeObserver(menu, handleResize).stop;
+      else
+        resizeStopper == null ? void 0 : resizeStopper();
+    });
+    {
+      const addSubMenu = (item) => {
+        subMenus.value[item.index] = item;
+      };
+      const removeSubMenu = (item) => {
+        delete subMenus.value[item.index];
+      };
+      const addMenuItem = (item) => {
+        items.value[item.index] = item;
+      };
+      const removeMenuItem = (item) => {
+        delete items.value[item.index];
+      };
+      provide("rootMenu", reactive({
+        props,
+        openedMenus,
+        items,
+        subMenus,
+        activeIndex,
+        isMenuPopup,
+        addMenuItem,
+        removeMenuItem,
+        addSubMenu,
+        removeSubMenu,
+        openMenu,
+        closeMenu,
+        handleMenuItemClick,
+        handleSubMenuClick
+      }));
+      provide(`subMenu:${instance.uid}`, {
+        addSubMenu,
+        removeSubMenu,
+        mouseInChild: ref(false),
+        level: 0
+      });
+    }
+    onMounted(() => {
+      if (props.mode === "horizontal") {
+        new Menu$1(instance.vnode.el, nsMenu.namespace.value);
+      }
+    });
+    {
+      const open = (index) => {
+        const { indexPath } = subMenus.value[index];
+        indexPath.forEach((i) => openMenu(i, indexPath));
+      };
+      expose({
+        open,
+        close,
+        handleResize
+      });
+    }
+    return () => {
+      var _a, _b;
+      let slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [];
+      const vShowMore = [];
+      if (props.mode === "horizontal" && menu.value) {
+        const originalSlot = flattedChildren(slot);
+        const slotDefault = sliceIndex.value === -1 ? originalSlot : originalSlot.slice(0, sliceIndex.value);
+        const slotMore = sliceIndex.value === -1 ? [] : originalSlot.slice(sliceIndex.value);
+        if ((slotMore == null ? void 0 : slotMore.length) && props.ellipsis) {
+          slot = slotDefault;
+          vShowMore.push(h(SubMenu2, {
+            index: "sub-menu-more",
+            class: nsSubMenu.e("hide-arrow")
+          }, {
+            title: () => h(ElIcon, {
+              class: nsSubMenu.e("icon-more")
+            }, { default: () => h(more_default) }),
+            default: () => slotMore
+          }));
+        }
+      }
+      const ulStyle = useMenuCssVar(props, 0);
+      const vMenu = h("ul", {
+        key: String(props.collapse),
+        role: "menubar",
+        ref: menu,
+        style: ulStyle.value,
+        class: {
+          [nsMenu.b()]: true,
+          [nsMenu.m(props.mode)]: true,
+          [nsMenu.m("collapse")]: props.collapse
+        }
+      }, [...slot, ...vShowMore]);
+      if (props.collapseTransition && props.mode === "vertical") {
+        return h(ElMenuCollapseTransition, () => vMenu);
+      }
+      return vMenu;
+    };
+  }
+});
+const menuItemProps = buildProps({
+  index: {
+    type: definePropType([String, null]),
+    default: null
+  },
+  route: {
+    type: definePropType([String, Object])
+  },
+  disabled: Boolean
+});
+const menuItemEmits = {
+  click: (item) => isString(item.index) && Array.isArray(item.indexPath)
+};
+const COMPONENT_NAME$1 = "ElMenuItem";
+const _sfc_main$2 = defineComponent({
+  name: COMPONENT_NAME$1,
+  components: {
+    ElTooltip
+  },
+  props: menuItemProps,
+  emits: menuItemEmits,
+  setup(props, { emit }) {
+    const instance = getCurrentInstance();
+    const rootMenu = inject("rootMenu");
+    const nsMenu = useNamespace("menu");
+    const nsMenuItem = useNamespace("menu-item");
+    if (!rootMenu)
+      throwError(COMPONENT_NAME$1, "can not inject root menu");
+    const { parentMenu, indexPath } = useMenu(instance, toRef(props, "index"));
+    const subMenu = inject(`subMenu:${parentMenu.value.uid}`);
+    if (!subMenu)
+      throwError(COMPONENT_NAME$1, "can not inject sub menu");
+    const active = computed(() => props.index === rootMenu.activeIndex);
+    const item = reactive({
+      index: props.index,
+      indexPath,
+      active
+    });
+    const handleClick = () => {
+      if (!props.disabled) {
+        rootMenu.handleMenuItemClick({
+          index: props.index,
+          indexPath: indexPath.value,
+          route: props.route
+        });
+        emit("click", item);
+      }
+    };
+    onMounted(() => {
+      subMenu.addSubMenu(item);
+      rootMenu.addMenuItem(item);
+    });
+    onBeforeUnmount(() => {
+      subMenu.removeSubMenu(item);
+      rootMenu.removeMenuItem(item);
+    });
+    return {
+      parentMenu,
+      rootMenu,
+      active,
+      nsMenu,
+      nsMenuItem,
+      handleClick
+    };
+  }
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass([
+      _ctx.nsMenuItem.b(),
+      _ctx.nsMenuItem.is("active", _ctx.active),
+      _ctx.nsMenuItem.is("disabled", _ctx.disabled)
+    ]),
+    role: "menuitem",
+    tabindex: "-1",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    _ctx.parentMenu.type.name === "ElMenu" && _ctx.rootMenu.props.collapse && _ctx.$slots.title ? (openBlock(), createBlock(_component_el_tooltip, {
+      key: 0,
+      effect: _ctx.rootMenu.props.popperEffect,
+      placement: "right",
+      "fallback-placements": ["left"],
+      persistent: ""
+    }, {
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "title")
+      ]),
+      default: withCtx(() => [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.nsMenu.be("tooltip", "trigger"))
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["effect"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      renderSlot(_ctx.$slots, "default"),
+      renderSlot(_ctx.$slots, "title")
+    ], 64))
+  ], 2);
+}
+var MenuItem2 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-item.vue"]]);
+const menuItemGroupProps = {
+  title: String
+};
+const COMPONENT_NAME = "ElMenuItemGroup";
+const _sfc_main$1 = defineComponent({
+  name: COMPONENT_NAME,
+  props: menuItemGroupProps,
+  setup() {
+    const ns = useNamespace("menu-item-group");
+    return {
+      ns
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(_ctx.ns.b())
+  }, [
+    createBaseVNode("div", {
+      class: normalizeClass(_ctx.ns.e("title"))
+    }, [
+      !_ctx.$slots.title ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        createTextVNode(toDisplayString(_ctx.title), 1)
+      ], 64)) : renderSlot(_ctx.$slots, "title", { key: 1 })
+    ], 2),
+    createBaseVNode("ul", null, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 2);
+}
+var MenuItemGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-item-group.vue"]]);
+const ElMenu = withInstall(Menu2, {
+  MenuItem: MenuItem2,
+  MenuItemGroup,
+  SubMenu: SubMenu2
+});
+const ElMenuItem = withNoopInstall(MenuItem2);
+withNoopInstall(MenuItemGroup);
+const ElSubMenu = withNoopInstall(SubMenu2);
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 0 };
+const ROOT_MENU_INDEX = "-1";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "N8nNavigationDropdown"
+  },
+  __name: "NavigationDropdown",
+  props: {
+    menu: {},
+    disabled: { type: Boolean },
+    teleport: { type: Boolean }
+  },
+  emits: ["itemClick", "select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const menuRef = ref(null);
+    const emit = __emit;
+    const close = () => {
+      menuRef.value?.close(ROOT_MENU_INDEX);
+    };
+    const menuTrigger = ref("click");
+    const onOpen = (index) => {
+      if (index !== ROOT_MENU_INDEX) return;
+      menuTrigger.value = "hover";
+    };
+    const onClose = (index) => {
+      if (index !== ROOT_MENU_INDEX) return;
+      menuTrigger.value = "click";
+    };
+    __expose({
+      close
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElMenu), {
+        ref_key: "menuRef",
+        ref: menuRef,
+        mode: "horizontal",
+        "unique-opened": "",
+        "menu-trigger": menuTrigger.value,
+        ellipsis: false,
+        class: normalizeClass(_ctx.$style.dropdown),
+        onSelect: _cache[1] || (_cache[1] = ($event) => emit("select", $event)),
+        onKeyup: withKeys(close, ["escape"]),
+        onOpen,
+        onClose
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(ElSubMenu), {
+            index: ROOT_MENU_INDEX,
+            class: normalizeClass(_ctx.$style.trigger),
+            "popper-offset": -10,
+            "popper-class": _ctx.$style.submenu,
+            disabled: _ctx.disabled,
+            teleported: _ctx.teleport
+          }, {
+            title: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menu, (item) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: item.id
+                }, [
+                  item.isDivider ? (openBlock(), createElementBlock("hr", _hoisted_1)) : item.submenu ? (openBlock(), createBlock(unref(ElSubMenu), {
+                    key: 1,
+                    "popper-class": _ctx.$style.nestedSubmenu,
+                    index: item.id,
+                    "popper-offset": -10,
+                    "data-test-id": "navigation-submenu"
+                  }, {
+                    title: withCtx(() => [
+                      createBaseVNode("div", {
+                        class: normalizeClass(_ctx.$style.subMenuTitle)
+                      }, [
+                        renderSlot(_ctx.$slots, "item-icon", mergeProps({ ref_for: true }, { item }), () => [
+                          item.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            typeof item.icon === "string" || item.icon.type === "icon" ? (openBlock(), createBlock(unref(N8nIcon), {
+                              key: 0,
+                              class: normalizeClass(_ctx.$style.submenu__icon),
+                              icon: typeof item.icon === "object" ? item.icon.value : item.icon
+                            }, null, 8, ["class", "icon"])) : item.icon.type === "emoji" ? (openBlock(), createBlock(unref(N8nText), {
+                              key: 1,
+                              class: normalizeClass(_ctx.$style.submenu__icon)
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(item.icon.value), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["class"])) : createCommentVNode("", true)
+                          ], 64)) : createCommentVNode("", true)
+                        ]),
+                        createTextVNode(" " + toDisplayString(item.title), 1)
+                      ], 2)
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(item.submenu, (subitem) => {
+                        return openBlock(), createElementBlock(Fragment, {
+                          key: subitem.id
+                        }, [
+                          subitem.isDivider ? (openBlock(), createElementBlock("hr", _hoisted_2)) : (openBlock(), createBlock(unref(_sfc_main$4), {
+                            key: 1,
+                            to: !subitem.disabled && subitem.route || void 0
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(ElMenuItem), {
+                                "data-test-id": "navigation-submenu-item",
+                                index: subitem.id,
+                                disabled: subitem.disabled,
+                                onClick: _cache[0] || (_cache[0] = ($event) => emit("itemClick", $event))
+                              }, {
+                                default: withCtx(() => [
+                                  renderSlot(_ctx.$slots, "item-icon", mergeProps({ ref_for: true }, { item: subitem }), () => [
+                                    subitem.icon ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                      typeof subitem.icon === "string" || subitem.icon.type === "icon" ? (openBlock(), createBlock(unref(N8nIcon), {
+                                        key: 0,
+                                        class: normalizeClass(_ctx.$style.submenu__icon),
+                                        icon: typeof subitem.icon === "object" ? subitem.icon.value : subitem.icon
+                                      }, null, 8, ["class", "icon"])) : subitem.icon.type === "emoji" ? (openBlock(), createBlock(unref(N8nText), {
+                                        key: 1,
+                                        class: normalizeClass(_ctx.$style.submenu__icon)
+                                      }, {
+                                        default: withCtx(() => [
+                                          createTextVNode(toDisplayString(subitem.icon.value), 1)
+                                        ]),
+                                        _: 2
+                                      }, 1032, ["class"])) : createCommentVNode("", true)
+                                    ], 64)) : createCommentVNode("", true)
+                                  ]),
+                                  createTextVNode(" " + toDisplayString(subitem.title) + " ", 1),
+                                  renderSlot(_ctx.$slots, `item.append.${item.id}`, mergeProps({ ref_for: true }, { item }))
+                                ]),
+                                _: 2
+                              }, 1032, ["index", "disabled"])
+                            ]),
+                            _: 2
+                          }, 1032, ["to"]))
+                        ], 64);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["popper-class", "index"])) : (openBlock(), createBlock(unref(_sfc_main$4), {
+                    key: 2,
+                    to: !item.disabled && item.route || void 0
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ElMenuItem), {
+                        index: item.id,
+                        disabled: item.disabled,
+                        "data-test-id": "navigation-menu-item"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.title) + " ", 1),
+                          renderSlot(_ctx.$slots, `item.append.${item.id}`, mergeProps({ ref_for: true }, { item }))
+                        ]),
+                        _: 2
+                      }, 1032, ["index", "disabled"])
+                    ]),
+                    _: 2
+                  }, 1032, ["to"]))
+                ], 64);
+              }), 128))
+            ]),
+            _: 3
+          }, 8, ["class", "popper-class", "disabled", "teleported"])
+        ]),
+        _: 3
+      }, 8, ["menu-trigger", "class"]);
+    };
+  }
+});
+const dropdown = "_dropdown_z37pb_123";
+const nestedSubmenu = "_nestedSubmenu_z37pb_145";
+const submenu = "_submenu_z37pb_150";
+const subMenuTitle = "_subMenuTitle_z37pb_178";
+const submenu__icon = "_submenu__icon_z37pb_184";
+const style0 = {
+  dropdown,
+  nestedSubmenu,
+  submenu,
+  subMenuTitle,
+  submenu__icon
+};
+const cssModules = {
+  "$style": style0
+};
+const N8nNavigationDropdown = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  N8nNavigationDropdown as N
+};