Skip to content

Commit ef5755c

Browse files
eryue0220eryue0220
committed
add transition
1 parent 573e631 commit ef5755c

1 file changed

Lines changed: 78 additions & 67 deletions

File tree

‎app/components/ReadmeTocDropdown.vue‎

Lines changed: 78 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -166,83 +166,94 @@ function handleKeydown(event: KeyboardEvent) {
166166
</ButtonBase>
167167

168168
<Teleport to="body">
169-
<div
170-
:id="listboxId"
171-
ref="listRef"
172-
role="listbox"
173-
:aria-hidden="!isOpen"
174-
:aria-activedescendant="
175-
isOpen && highlightedIndex >= 0 ? `${listboxId}-${toc[highlightedIndex]?.id}` : undefined
176-
"
177-
:aria-label="$t('package.readme.toc_title')"
178-
:style="
179-
isOpen
180-
? getDropdownStyle()
181-
: { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
182-
"
183-
:class="[
184-
'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
185-
!isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
186-
]"
169+
<Transition
170+
:enter-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-150'"
171+
:enter-from-class="prefersReducedMotion ? '' : 'opacity-0'"
172+
enter-to-class="opacity-100"
173+
:leave-active-class="prefersReducedMotion ? '' : 'transition-opacity duration-100'"
174+
leave-from-class="opacity-100"
175+
:leave-to-class="prefersReducedMotion ? '' : 'opacity-0'"
187176
>
188-
<template v-for="node in tocTree" :key="node.id">
189-
<NuxtLink
190-
:id="`${listboxId}-${node.id}`"
191-
:to="`#${node.id}`"
192-
role="option"
193-
:aria-selected="activeId === node.id"
194-
class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
195-
:class="[
196-
activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
197-
highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
198-
]"
199-
dir="auto"
200-
@click="select()"
201-
@mouseenter="highlightedIndex = getIndex(node.id)"
202-
>
203-
<span class="truncate">{{ node.text }}</span>
204-
</NuxtLink>
205-
206-
<template v-for="child in node.children" :key="child.id">
177+
<div
178+
:id="listboxId"
179+
ref="listRef"
180+
role="listbox"
181+
:aria-hidden="!isOpen"
182+
:aria-activedescendant="
183+
isOpen && highlightedIndex >= 0 && toc[highlightedIndex]?.id
184+
? `${listboxId}-${toc[highlightedIndex]?.id}`
185+
: undefined
186+
"
187+
:aria-label="$t('package.readme.toc_title')"
188+
:style="
189+
isOpen
190+
? getDropdownStyle()
191+
: { visibility: 'hidden', position: 'fixed', pointerEvents: 'none' }
192+
"
193+
:class="[
194+
'fixed bg-bg-subtle border border-border rounded-md shadow-lg z-50 max-h-80 overflow-y-auto w-56 overscroll-contain',
195+
!isOpen ? 'opacity-0' : prefersReducedMotion ? '' : 'transition-opacity duration-150',
196+
]"
197+
>
198+
<template v-for="node in tocTree" :key="node.id">
207199
<NuxtLink
208-
:id="`${listboxId}-${child.id}`"
209-
:to="`#${child.id}`"
200+
:id="`${listboxId}-${node.id}`"
201+
:to="`#${node.id}`"
210202
role="option"
211-
:aria-selected="activeId === child.id"
212-
class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
203+
:aria-selected="activeId === node.id"
204+
class="flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150"
213205
:class="[
214-
activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
215-
highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
206+
activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
207+
highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
216208
]"
217209
dir="auto"
218210
@click="select()"
219-
@mouseenter="highlightedIndex = getIndex(child.id)"
211+
@mouseenter="highlightedIndex = getIndex(node.id)"
220212
>
221-
<span class="truncate">{{ child.text }}</span>
213+
<span class="truncate">{{ node.text }}</span>
222214
</NuxtLink>
223215

224-
<NuxtLink
225-
v-for="grandchild in child.children"
226-
:id="`${listboxId}-${grandchild.id}`"
227-
:to="`#${grandchild.id}`"
228-
:key="grandchild.id"
229-
role="option"
230-
:aria-selected="activeId === grandchild.id"
231-
class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
232-
:class="[
233-
grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
234-
highlightedIndex === getIndex(grandchild.id)
235-
? 'bg-bg-elevated'
236-
: 'hover:bg-bg-elevated',
237-
]"
238-
dir="auto"
239-
@click="select()"
240-
@mouseenter="highlightedIndex = getIndex(grandchild.id)"
241-
>
242-
<span class="truncate">{{ grandchild.text }}</span>
243-
</NuxtLink>
216+
<template v-for="child in node.children" :key="child.id">
217+
<NuxtLink
218+
:id="`${listboxId}-${child.id}`"
219+
:to="`#${child.id}`"
220+
role="option"
221+
:aria-selected="activeId === child.id"
222+
class="flex items-center gap-2 px-3 py-1.5 ps-6 text-sm cursor-pointer transition-colors duration-150"
223+
:class="[
224+
activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
225+
highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
226+
]"
227+
dir="auto"
228+
@click="select()"
229+
@mouseenter="highlightedIndex = getIndex(child.id)"
230+
>
231+
<span class="truncate">{{ child.text }}</span>
232+
</NuxtLink>
233+
234+
<NuxtLink
235+
v-for="grandchild in child.children"
236+
:id="`${listboxId}-${grandchild.id}`"
237+
:to="`#${grandchild.id}`"
238+
:key="grandchild.id"
239+
role="option"
240+
:aria-selected="activeId === grandchild.id"
241+
class="flex items-center gap-2 px-3 py-1.5 ps-9 text-sm cursor-pointer transition-colors duration-150"
242+
:class="[
243+
grandchild.id === activeId ? 'text-fg font-medium' : 'text-fg-subtle',
244+
highlightedIndex === getIndex(grandchild.id)
245+
? 'bg-bg-elevated'
246+
: 'hover:bg-bg-elevated',
247+
]"
248+
dir="auto"
249+
@click="select()"
250+
@mouseenter="highlightedIndex = getIndex(grandchild.id)"
251+
>
252+
<span class="truncate">{{ grandchild.text }}</span>
253+
</NuxtLink>
254+
</template>
244255
</template>
245-
</template>
246-
</div>
256+
</div>
257+
</Transition>
247258
</Teleport>
248259
</template>

0 commit comments

Comments
 (0)