fix(NavigationMenu): wrong instance of activetrigger being reference (#1741)

zernonia · web-flow · commit b72a90b28292 · 2025-03-22T11:23:51.000+08:00
* fix: wrong instance of activetrigger being reference

* chore: update indicator in story

* fix: remove refence content to inner child
diff --git a/packages/core/src/NavigationMenu/NavigationMenuSub.vue b/packages/core/src/NavigationMenu/NavigationMenuSub.vue
@@ -24,7 +24,7 @@ export interface NavigationMenuSubProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
@@ -55,14 +55,26 @@ const { forwardRef, currentElement } = useForwardExpose()
 
 const indicatorTrack = ref<HTMLElement>()
 const viewport = ref<HTMLElement>()
+const activeTrigger = ref<HTMLElement>()
 
-const { CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })
+const { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })
+
+watchEffect(() => {
+  if (!modelValue.value)
+    return
+
+  const items = getItems().map(i => i.ref)
+  activeTrigger.value = items.find(item =>
+    item.id.includes(modelValue.value),
+  )
+})
 
 provideNavigationMenuContext({
   ...menuContext,
   isRootMenu: false,
   modelValue,
   previousValue,
+  activeTrigger,
   orientation: props.orientation,
   rootNavigationMenu: currentElement,
   indicatorTrack,
diff --git a/packages/core/src/NavigationMenu/NavigationMenuViewport.vue b/packages/core/src/NavigationMenu/NavigationMenuViewport.vue
@@ -55,7 +55,7 @@ watch([modelValue, open], () => {
     return
 
   requestAnimationFrame(() => {
-    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]')?.children?.[0] as HTMLElement | undefined
+    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined
     content.value = el
   })
 }, { immediate: true, flush: 'post' })
diff --git a/packages/core/src/NavigationMenu/story/NavigationMenuAlignment.story.vue b/packages/core/src/NavigationMenu/story/NavigationMenuAlignment.story.vue
@@ -188,11 +188,9 @@ const currentTrigger = ref('')
             </NavigationMenuItem>
 
             <NavigationMenuIndicator
-              class="absolute  w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position]  data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[width,transform] duration-300"
+              class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
             >
-              <div
-                class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-              />
+              <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
             </NavigationMenuIndicator>
           </NavigationMenuList>
 
diff --git a/packages/core/src/NavigationMenu/story/NavigationMenuSubmenus.story.vue b/packages/core/src/NavigationMenu/story/NavigationMenuSubmenus.story.vue
@@ -120,11 +120,9 @@ const currentTrigger = ref('')
                     </NavigationMenuItem>
 
                     <NavigationMenuIndicator
-                      class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
+                      class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
                     >
-                      <div
-                        class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-                      />
+                      <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
                     </NavigationMenuIndicator>
                   </NavigationMenuList>
 
@@ -225,11 +223,9 @@ const currentTrigger = ref('')
                     </NavigationMenuItem>
 
                     <NavigationMenuIndicator
-                      class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
+                      class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
                     >
-                      <div
-                        class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-                      />
+                      <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
                     </NavigationMenuIndicator>
                   </NavigationMenuList>
 
@@ -248,11 +244,9 @@ const currentTrigger = ref('')
             </NavigationMenuItem>
 
             <NavigationMenuIndicator
-              class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
+              class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
             >
-              <div
-                class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-              />
+              <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
             </NavigationMenuIndicator>
           </NavigationMenuList>
 
diff --git a/packages/core/src/NavigationMenu/story/NavigationMenuViewport.story.vue b/packages/core/src/NavigationMenu/story/NavigationMenuViewport.story.vue
@@ -105,11 +105,9 @@ const currentTrigger = ref('')
             </NavigationMenuItem>
 
             <NavigationMenuIndicator
-              class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
+              class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
             >
-              <div
-                class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-              />
+              <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
             </NavigationMenuIndicator>
           </NavigationMenuList>
 
diff --git a/packages/core/src/NavigationMenu/story/_NavigationMenu.vue b/packages/core/src/NavigationMenu/story/_NavigationMenu.vue
@@ -166,11 +166,9 @@ const currentTrigger = ref('')
         </NavigationMenuItem>
 
         <NavigationMenuIndicator
-          class="data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full z-[1] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
+          class="absolute data-[state=hidden]:opacity-0 duration-200 data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut top-full w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt-[1px] z-[100] flex h-[10px] items-end justify-center overflow-hidden transition-[all,transform_250ms_ease]"
         >
-          <div
-            class="relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] bg-white"
-          />
+          <div class="relative top-[70%] h-[12px] w-[12px] rotate-[45deg] bg-white border" />
         </NavigationMenuIndicator>
       </NavigationMenuList>
 
