@iris-ui-kit/vue 0.2.6 → 0.2.8

package/dist/admin.cjs

@@ -390,13 +390,20 @@ var IrisNavMenu = vue.defineComponent({
         emit("update:expandedKeys", model.get());
       }
     };
+    const hovered = vue.ref(null);
+    const hoveredBranches = vue.ref([]);
+    const focusedBranches = vue.ref([]);
+    const closeHorizontalMenus = () => {
+      if (props.orientation !== "horizontal") return;
+      hovered.value = null;
+      hoveredBranches.value = [];
+      focusedBranches.value = [];
+    };
     const select = (node) => {
       if (node.disabled) return;
+      closeHorizontalMenus();
       emit("select", node.key, node);
     };
-    const hovered = vue.ref(null);
-    const hoveredBranches = vue.ref([]);
-    const focusedBranches = vue.ref([]);
     const setBranchInteraction = (state, key, enabled) => {
       const current = state.value;
       if (enabled) {
@@ -430,7 +437,7 @@ var IrisNavMenu = vue.defineComponent({
         cursor: opts.disabled ? "not-allowed" : "pointer",
         opacity: opts.disabled ? "0.5" : "1",
         padding: props.collapsed ? "10px" : "8px 10px",
-        paddingInlineStart: props.collapsed ? "10px" : `${12 + opts.depth * 16}px`,
+        paddingInlineStart: props.collapsed || props.orientation === "horizontal" ? "10px" : `${12 + opts.depth * 16}px`,
         justifyContent: props.collapsed ? "center" : "flex-start"
       };
     };
@@ -533,13 +540,13 @@ var IrisNavMenu = vue.defineComponent({
           ),
           badgeNode(node),
           branch ? vue.h(IrisIcon, {
-            name: horizontal ? "chevron-down" : "chevron-right",
+            name: horizontal && depth === 0 ? "chevron-down" : "chevron-right",
             size: 16,
             style: { marginInlineStart: badgeNode(node) ? "6px" : "auto", opacity: "0.6" }
           }) : null
         ]
       );
-      const groupStyle = horizontal && depth === 0 ? { position: "relative" } : void 0;
+      const groupStyle = horizontal && branch ? { position: "relative" } : void 0;
       if (!branch || !horizontal && !open)
         return vue.h(
           "div",
@@ -574,19 +581,19 @@ var IrisNavMenu = vue.defineComponent({
               "data-iris-nav-children": "",
               role: "group",
               "aria-hidden": horizontal && !shown ? "true" : void 0,
-              style: horizontal && depth === 0 ? {
+              style: horizontal ? {
                 display: shown ? "block" : "none",
                 position: "absolute",
-                insetBlockStart: "100%",
-                insetInlineStart: "0",
-                zIndex: "60",
+                insetBlockStart: depth === 0 ? "100%" : "0",
+                insetInlineStart: depth === 0 ? "0" : "100%",
+                zIndex: depth === 0 ? "60" : "61",
                 minWidth: "220px",
                 padding: "6px",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
                 background: "var(--iris-surface)",
                 boxShadow: "var(--iris-shadow-md)"
-              } : horizontal ? { display: shown ? "block" : "none" } : void 0
+              } : void 0
             },
             (node.children ?? []).map((child) => renderItem(child, depth + 1))
           )
@@ -595,9 +602,7 @@ var IrisNavMenu = vue.defineComponent({
     };
     const onKeydown = (e) => {
       const root = e.currentTarget;
-      const buttons = Array.from(
-        root.querySelectorAll("[data-iris-nav-item]")
-      ).filter(
+      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
         (button) => !button.closest('[data-iris-nav-children][aria-hidden="true"]')
       );
       if (buttons.length === 0) return;