Skip to content

Commit 260be92

Browse files
essenmitsosseessenmitsosse
committed
feat: unifyied keyshort cut system
1 parent cf33ca9 commit 260be92

4 files changed

Lines changed: 44 additions & 47 deletions

File tree

‎app/components/AppHeader.vue‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import { LinkBase } from '#components'
23
import { isEditableElement } from '~/utils/input'
34
45
withDefaults(
@@ -155,31 +156,19 @@ onKeyStroke(
155156
variant="button-secondary"
156157
to="/compare"
157158
class="inline-flex items-center gap-2"
158-
aria-keyshortcuts="c"
159+
keyshortcut="c"
159160
>
160161
{{ $t('nav.compare') }}
161-
<kbd
162-
class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
163-
aria-hidden="true"
164-
>
165-
c
166-
</kbd>
167162
</LinkBase>
168163

169164
<!-- Desktop: Settings link -->
170165
<LinkBase
171166
variant="button-secondary"
172167
to="/settings"
173168
class="inline-flex items-center gap-2"
174-
aria-keyshortcuts=","
169+
keyshortcut=","
175170
>
176171
{{ $t('nav.settings') }}
177-
<kbd
178-
class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded no-underline"
179-
aria-hidden="true"
180-
>
181-
,
182-
</kbd>
183172
</LinkBase>
184173

185174
<!-- Desktop: Account menu -->

‎app/components/Button/Base.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
<script setup lang="ts">
22
const props = withDefaults(
33
defineProps<{
4-
disabled?: boolean
5-
type?: 'button' | 'submit'
6-
variant?: 'primary' | 'secondary' | 'tag'
4+
'disabled'?: boolean
5+
'type'?: 'button' | 'submit'
6+
'variant'?: 'primary' | 'secondary' | 'tag'
7+
'keyshortcut'?: string
8+
9+
/**
10+
* Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
11+
*/
12+
'aria-keyshortcuts'?: never
713
}>(),
814
{
915
type: 'button',
@@ -21,7 +27,7 @@ defineExpose({
2127
<template>
2228
<button
2329
ref="el"
24-
class="cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
30+
class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))"
2531
:class="{
2632
'text-sm px-4 py-2': variant !== 'tag',
2733
'text-xs px-2 py-0.5': variant === 'tag',
@@ -31,7 +37,15 @@ defineExpose({
3137
}"
3238
:type="props.type"
3339
:disabled="disabled ? true : undefined"
40+
:aria-keyshortcuts="keyshortcut"
3441
>
3542
<slot />
43+
<kbd
44+
v-if="keyshortcut"
45+
class="inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
46+
aria-hidden="true"
47+
>
48+
{{ keyshortcut }}
49+
</kbd>
3650
</button>
3751
</template>

‎app/components/Link/Base.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,21 @@ const props = withDefaults(
55
defineProps<
66
{
77
/** Disabled links will be displayed as plain text */
8-
disabled?: boolean
8+
'disabled'?: boolean
99
/**
1010
* `type` should never be used, because this will always be a link.
1111
*
1212
* If you want a button use `TagButton` instead.
1313
* */
14-
type?: never
15-
variant?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
14+
'type'?: never
15+
'variant'?: 'button-primary' | 'button-secondary' | 'tag' | 'link'
16+
17+
'keyshortcut'?: string
18+
19+
/**
20+
* Don't use this directly, use `keyshortcut` instead. Correcty HTML will be automatically generated and the shortcut will automatically be displayed in the UI.
21+
*/
22+
'aria-keyshortcuts'?: never
1623
} &
1724
/** This makes sure the link always has either `to` or `href` */
1825
(Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
@@ -38,6 +45,7 @@ const props = withDefaults(
3845
/></span>
3946
<NuxtLink
4047
v-else
48+
class="group"
4149
:class="{
4250
'text-fg underline-offset-4 underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
4351
variant === 'link',
@@ -51,7 +59,15 @@ const props = withDefaults(
5159
}"
5260
:to="to"
5361
:href="href"
62+
:aria-keyshortcuts="keyshortcut"
5463
>
5564
<slot />
65+
<kbd
66+
v-if="keyshortcut"
67+
class="inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
68+
aria-hidden="true"
69+
>
70+
{{ keyshortcut }}
71+
</kbd>
5672
</NuxtLink>
5773
</template>

‎app/pages/package/[...package].vue‎

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { getDependencyCount } from '~/utils/npm/dependency-count'
1616
import { useModal } from '~/composables/useModal'
1717
import { useAtproto } from '~/composables/atproto/useAtproto'
1818
import { togglePackageLike } from '~/utils/atproto/likes'
19+
import { LinkBase } from '#components'
1920
2021
definePageMeta({
2122
name: 'package',
@@ -649,48 +650,25 @@ onKeyStroke(
649650
:aria-label="$t('package.navigation')"
650651
class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
651652
>
652-
<LinkBase
653-
variant="button-secondary"
654-
v-if="docsLink"
655-
:to="docsLink"
656-
aria-keyshortcuts="d"
657-
>
653+
<LinkBase variant="button-secondary" v-if="docsLink" :to="docsLink" keyshortcut="d">
658654
<span class="i-carbon:document w-3 h-3" aria-hidden="true" />
659655
{{ $t('package.links.docs') }}
660-
<kbd
661-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
662-
aria-hidden="true"
663-
>
664-
d
665-
</kbd>
666656
</LinkBase>
667657
<LinkBase
668658
variant="button-secondary"
669659
:to="`/package-code/${pkg.name}/v/${resolvedVersion}`"
670-
aria-keyshortcuts="."
660+
keyshortcut="."
671661
>
672662
<span class="i-carbon:code w-3 h-3" aria-hidden="true" />
673663
{{ $t('package.links.code') }}
674-
<kbd
675-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
676-
aria-hidden="true"
677-
>
678-
.
679-
</kbd>
680664
</LinkBase>
681665
<LinkBase
682666
variant="button-secondary"
683667
:to="{ path: '/compare', query: { packages: pkg.name } }"
684-
aria-keyshortcuts="c"
668+
keyshortcut="c"
685669
>
686670
<span class="i-carbon:compare w-3 h-3" aria-hidden="true" />
687671
{{ $t('package.links.compare') }}
688-
<kbd
689-
class="inline-flex items-center justify-center w-4 h-4 text-xs bg-bg-muted border border-border rounded no-underline"
690-
aria-hidden="true"
691-
>
692-
c
693-
</kbd>
694672
</LinkBase>
695673
</nav>
696674
</div>

0 commit comments

Comments
 (0)