@iris-ui-kit/vue 0.2.33 → 0.2.35

package/dist/admin.cjs

@@ -702,13 +702,13 @@ function createNavMenuFlyout(ctx) {
     const rect = trigger.getBoundingClientRect();
     const dir = getComputedStyle(trigger).direction;
     panel.style.position = "fixed";
-    panel.style.top = `${ctx.collapsed ? rect.top : rect.bottom}px`;
+    panel.style.top = `${ctx.collapsed.value ? rect.top : rect.bottom}px`;
     if (dir === "rtl") {
       panel.style.left = "";
-      panel.style.right = `${window.innerWidth - (ctx.collapsed ? rect.left : rect.right)}px`;
+      panel.style.right = `${window.innerWidth - (ctx.collapsed.value ? rect.left : rect.right)}px`;
     } else {
       panel.style.right = "";
-      panel.style.left = `${ctx.collapsed ? rect.right : rect.left}px`;
+      panel.style.left = `${ctx.collapsed.value ? rect.right : rect.left}px`;
     }
   };
   vue.onBeforeUnmount(() => {
@@ -717,8 +717,8 @@ function createNavMenuFlyout(ctx) {
     flyoutPanels.clear();
   });
   const isolateAtDepth = (key) => {
-    const depth = core.findNavPath(ctx.items, key).length - 1;
-    const isSameDepthOther = (k) => k !== key && core.findNavPath(ctx.items, k).length - 1 === depth;
+    const depth = core.findNavPath(ctx.items.value, key).length - 1;
+    const isSameDepthOther = (k) => k !== key && core.findNavPath(ctx.items.value, k).length - 1 === depth;
     for (const state of [hoveredBranches, clickedBranches, focusedBranches]) {
       if (state.value.some(isSameDepthOther)) {
         state.value = state.value.filter((k) => !isSameDepthOther(k));
@@ -786,7 +786,7 @@ function createNavMenuFlyout(ctx) {
     const next = event.relatedTarget;
     return !!(next && next instanceof Node && container.contains(next));
   };
-  const interactionKeyAtDepth = (keys, depth) => keys.find((key) => core.findNavPath(ctx.items, key).length === depth + 1);
+  const interactionKeyAtDepth = (keys, depth) => keys.find((key) => core.findNavPath(ctx.items.value, key).length === depth + 1);
   const horizontalBranchVisible = (key, depth) => {
     const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
     if (hoveredAtDepth) return hoveredAtDepth === key;
@@ -998,6 +998,7 @@ var IrisNavMenu = vue.defineComponent({
   setup(props, { emit, attrs }) {
     installNavMenuStyles();
     const { t } = useI18n();
+    const menuItems = vue.computed(() => props.items);
     const tree = vue.computed(() => core.visibleNav(props.items));
     const activePath = vue.computed(
       () => props.activeKey ? core.findNavPath(props.items, props.activeKey).map((n) => n.key) : []
@@ -1033,11 +1034,13 @@ var IrisNavMenu = vue.defineComponent({
       }
     };
     const flyout = createNavMenuFlyout({
-      items: props.items,
+      // Keep the flyout controller in sync with async navigation data and
+      // layout changes; passing .value here would freeze the initial state.
+      items: menuItems,
       tree,
       expanded,
-      flyoutMode: { value: flyoutMode.value },
-      collapsed: props.collapsed,
+      flyoutMode,
+      collapsed: vue.computed(() => props.collapsed),
       toggle,
       emitSelect: (key, node) => emit("select", key, node)
     });
@@ -1086,12 +1089,14 @@ var IrisNavMenu = vue.defineComponent({
     const renderItem = (node, depth) => {
       const branch = core.isBranch(node);
       const horizontal = flyoutMode.value;
+      const verticalAccordion = props.orientation === "vertical" && !props.collapsed;
       const open = expanded.value.includes(node.key);
       const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
       const active = node.key === props.activeKey;
       const trail = branch && !active && activePath.value.includes(node.key);
       const rowHovered = hovered.value === node.key || horizontal && shown;
-      const arrowReversed = branch && !node.disabled && (active || trail || shown || rowHovered);
+      const arrowReversed = !verticalAccordion && branch && !node.disabled && (active || trail || shown || rowHovered);
+      const arrowName = verticalAccordion ? open ? "chevron-up" : "chevron-down" : horizontal && depth === 0 && !props.collapsed ? "chevron-down" : "chevron-right";
       const isFlyoutRoot = horizontal && branch && depth === 0;
       const row = vue.h(
         "button",
@@ -1157,7 +1162,7 @@ var IrisNavMenu = vue.defineComponent({
           ),
           badgeNode(node),
           branch && !(props.collapsed && depth === 0) ? vue.h(IrisIcon, {
-            name: horizontal && depth === 0 && !props.collapsed ? "chevron-down" : "chevron-right",
+            name: arrowName,
             size: 16,
             class: "iris-nav-menu-arrow",
             "data-reversed": arrowReversed ? "true" : void 0