@iris-ui-kit/vue 0.2.32 → 0.2.34

package/dist/admin.cjs

@@ -660,7 +660,7 @@ function installNavMenuStyles() {
   document.head.appendChild(style);
   installed = true;
 }
-var HOVER_OPEN_DELAY_VAL = 60;
+var HOVER_OPEN_DELAY_VAL = 40;
 var HOVER_CLOSE_DELAY_VAL = 150;
 function createNavMenuFlyout(ctx) {
   const hovered = vue.ref(null);
@@ -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)
     });