Skip to content

Commit 7152c10

Browse files
committed
feat: update toc button style
1 parent 124c13e commit 7152c10

2 files changed

Lines changed: 9 additions & 8 deletions

File tree

app/components/Button/Base.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const el = useTemplateRef('el')
2525
2626
defineExpose({
2727
focus: () => el.value?.focus(),
28+
buttonRef: el,
2829
})
2930
</script>
3031

app/components/ReadmeTocDropdown.vue

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,8 @@ function toggle() {
7979
if (isOpen.value) {
8080
close()
8181
} else {
82-
if (triggerRef.value) {
83-
const rect = triggerRef.value.getBoundingClientRect()
82+
if (triggerRef.value?.buttonRef) {
83+
const rect = triggerRef.value.buttonRef.getBoundingClientRect()
8484
dropdownPosition.value = {
8585
top: rect.bottom + 4,
8686
right: rect.right,
@@ -101,7 +101,7 @@ function close() {
101101
function select(id: string) {
102102
scrollToAnchor(id, { scrollFn: props.scrollToHeading })
103103
close()
104-
triggerRef.value?.focus()
104+
triggerRef.value?.buttonRef?.focus()
105105
}
106106
107107
function getIndex(id: string): number {
@@ -138,25 +138,25 @@ function handleKeydown(event: KeyboardEvent) {
138138
}
139139
case 'Escape':
140140
close()
141-
triggerRef.value?.focus()
141+
triggerRef.value?.buttonRef?.focus()
142142
break
143143
}
144144
}
145145
</script>
146146

147147
<template>
148-
<button
148+
<ButtonBase
149149
ref="triggerRef"
150150
type="button"
151-
class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover hover:text-fg"
152151
:aria-expanded="isOpen"
153152
aria-haspopup="listbox"
154153
:aria-label="$t('package.readme.toc_title')"
155154
:aria-controls="listboxId"
156155
@click="toggle"
157156
@keydown="handleKeydown"
157+
classicon="i-carbon:list"
158+
class="px-2.5 flex items-center"
158159
>
159-
<span class="i-carbon:list w-3.5 h-3.5" aria-hidden="true" />
160160
<span
161161
class="i-carbon:chevron-down w-3 h-3"
162162
:class="[
@@ -165,7 +165,7 @@ function handleKeydown(event: KeyboardEvent) {
165165
]"
166166
aria-hidden="true"
167167
/>
168-
</button>
168+
</ButtonBase>
169169

170170
<Teleport to="body">
171171
<Transition

0 commit comments

Comments
 (0)