forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: update readme toc button to use new component (#1112)
Co-authored-by: Willow (GHOST) <git@willow.sh>
Co-authored-by: Daniel Roe <daniel@roe.dev>
authored by
Idris Gadi
Willow (GHOST)
Daniel Roe
and committed by
GitHub
9867a476
7483fbea
+7
-6
+1
app/components/Button/Base.vue
+1
app/components/Button/Base.vue
+6
-6
app/components/ReadmeTocDropdown.vue
+6
-6
app/components/ReadmeTocDropdown.vue
···
79
79
if (isOpen.value) {
80
80
close()
81
81
} else {
82
-
if (triggerRef.value) {
83
-
const rect = triggerRef.value.getBoundingClientRect()
82
+
const rect = triggerRef.value?.getBoundingClientRect()
83
+
if (rect) {
84
84
dropdownPosition.value = {
85
85
top: rect.bottom + 4,
86
86
right: rect.right,
···
145
145
</script>
146
146
147
147
<template>
148
-
<button
148
+
<ButtonBase
149
149
ref="triggerRef"
150
150
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 focus-visible:outline-accent/70 hover:text-fg"
152
151
:aria-expanded="isOpen"
153
152
aria-haspopup="listbox"
154
153
:aria-label="$t('package.readme.toc_title')"
155
154
:aria-controls="listboxId"
156
155
@click="toggle"
157
156
@keydown="handleKeydown"
157
+
classicon="i-carbon:list"
158
+
class="px-2.5 flex items-center"
158
159
>
159
-
<span class="i-carbon:list w-3.5 h-3.5" aria-hidden="true" />
160
160
<span
161
161
class="i-carbon:chevron-down w-3 h-3"
162
162
:class="[
···
165
165
]"
166
166
aria-hidden="true"
167
167
/>
168
-
</button>
168
+
</ButtonBase>
169
169
170
170
<Teleport to="body">
171
171
<Transition