@iris-ui-kit/vue 0.2.5 → 0.2.7

package/dist/admin.cjs

@@ -390,11 +390,34 @@ 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 setBranchInteraction = (state, key, enabled) => {
+      const current = state.value;
+      if (enabled) {
+        if (!current.includes(key)) state.value = [...current, key];
+      } else if (current.includes(key)) {
+        state.value = current.filter((item) => item !== key);
+      }
+    };
+    const interactionKeyAtDepth = (keys, depth) => keys.find((key) => core.findNavPath(props.items, key).length === depth + 1);
+    const horizontalBranchVisible = (key, depth) => {
+      const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
+      if (hoveredAtDepth) return hoveredAtDepth === key;
+      return interactionKeyAtDepth(focusedBranches.value, depth) === key;
+    };
     const itemStyle = (opts) => {
       const bg = opts.active ? "var(--iris-primary)" : opts.hovered && !opts.disabled ? "var(--iris-surface)" : "transparent";
       return {
@@ -414,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"
       };
     };
@@ -473,6 +496,8 @@ var IrisNavMenu = vue.defineComponent({
     const renderItem = (node, depth) => {
       const branch = core.isBranch(node);
       const open = expanded.value.includes(node.key);
+      const horizontal = props.orientation === "horizontal";
+      const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
       const active = node.key === props.activeKey;
       const trail = branch && !active && activePath.value.includes(node.key);
       const row = vue.h(
@@ -484,10 +509,10 @@ var IrisNavMenu = vue.defineComponent({
           "data-branch": branch ? "true" : void 0,
           "data-active": active ? "true" : void 0,
           "data-active-trail": trail ? "true" : void 0,
-          "data-open": branch && open ? "true" : void 0,
+          "data-open": branch && shown ? "true" : void 0,
           "data-depth": String(depth),
           disabled: node.disabled,
-          "aria-expanded": branch ? open ? "true" : "false" : void 0,
+          "aria-expanded": branch ? shown ? "true" : "false" : void 0,
           "aria-current": active ? "page" : void 0,
           style: itemStyle({
             depth,
@@ -515,14 +540,14 @@ var IrisNavMenu = vue.defineComponent({
           ),
           badgeNode(node),
           branch ? vue.h(IrisIcon, {
-            name: open ? "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 = props.orientation === "horizontal" && depth === 0 ? { position: "relative" } : void 0;
-      if (!branch || !open)
+      const groupStyle = horizontal && branch ? { position: "relative" } : void 0;
+      if (!branch || !horizontal && !open)
         return vue.h(
           "div",
           { key: node.key, "data-iris-nav-group": branch ? "" : void 0, style: groupStyle },
@@ -530,7 +555,24 @@ var IrisNavMenu = vue.defineComponent({
         );
       return vue.h(
         "div",
-        { key: node.key, "data-iris-nav-group": "", "data-open": "true", style: groupStyle },
+        {
+          key: node.key,
+          "data-iris-nav-group": "",
+          "data-open": shown ? "true" : void 0,
+          style: groupStyle,
+          ...horizontal ? {
+            onMouseenter: () => setBranchInteraction(hoveredBranches, node.key, true),
+            onMouseleave: () => setBranchInteraction(hoveredBranches, node.key, false),
+            onFocusin: () => setBranchInteraction(focusedBranches, node.key, true),
+            onFocusout: (event) => {
+              const group = event.currentTarget;
+              const next = event.relatedTarget;
+              if (!next || !group.contains(next)) {
+                setBranchInteraction(focusedBranches, node.key, false);
+              }
+            }
+          } : {}
+        },
         [
           row,
           vue.h(
@@ -538,11 +580,13 @@ var IrisNavMenu = vue.defineComponent({
             {
               "data-iris-nav-children": "",
               role: "group",
-              style: props.orientation === "horizontal" && depth === 0 ? {
+              "aria-hidden": horizontal && !shown ? "true" : void 0,
+              style: horizontal ? {
+                display: shown ? "block" : "none",
                 position: "absolute",
-                insetBlockStart: "calc(100% + 4px)",
-                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)",
@@ -558,7 +602,9 @@ var IrisNavMenu = vue.defineComponent({
     };
     const onKeydown = (e) => {
       const root = e.currentTarget;
-      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]"));
+      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;
       const idx = buttons.indexOf(document.activeElement);
       const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();