davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: a11y mobile menu items (#624)

authored by

SHAMIL and committed by
GitHub 256275c9 d6e2e1aa

+86 -6
+8
app/components/MobileMenu.vue
··· 1 1 <script setup lang="ts"> 2 + import { useFocusTrap } from '@vueuse/integrations/useFocusTrap' 3 + 2 4 const isOpen = defineModel<boolean>('open', { default: false }) 3 5 4 6 const { isConnected, npmUser, avatar: npmAvatar } = useConnector() 5 7 const { user: atprotoUser } = useAtproto() 6 8 9 + const navRef = useTemplateRef('navRef') 10 + const { activate, deactivate } = useFocusTrap(navRef, { allowOutsideClick: true }) 11 + 7 12 function closeMenu() { 8 13 isOpen.value = false 9 14 } ··· 39 44 // Prevent body scroll when menu is open 40 45 const isLocked = useScrollLock(document) 41 46 watch(isOpen, open => (isLocked.value = open)) 47 + watch(isOpen, open => (open ? nextTick(activate) : deactivate())) 48 + onUnmounted(deactivate) 42 49 </script> 43 50 44 51 <template> ··· 75 82 > 76 83 <nav 77 84 v-if="isOpen" 85 + ref="navRef" 78 86 class="absolute inset-ie-0 top-0 bottom-0 w-72 bg-bg border-is border-border shadow-xl flex flex-col" 79 87 > 80 88 <!-- Header -->
+2
package.json
··· 66 66 "@vite-pwa/nuxt": "1.1.0", 67 67 "@voidzero-dev/vite-plus-core": "0.0.0-833c515fa25cef20905a7f9affb156dfa6f151ab", 68 68 "@vueuse/core": "14.2.0", 69 + "@vueuse/integrations": "14.2.0", 69 70 "@vueuse/nuxt": "14.2.0", 70 71 "@vueuse/router": "^14.2.0", 72 + "focus-trap": "^7.8.0", 71 73 "marked": "17.0.1", 72 74 "module-replacements": "2.11.0", 73 75 "nuxt": "4.3.0",
+76 -6
pnpm-lock.yaml
··· 110 110 '@vueuse/core': 111 111 specifier: 14.2.0 112 112 version: 14.2.0(vue@3.5.27(typescript@5.9.3)) 113 + '@vueuse/integrations': 114 + specifier: 14.2.0 115 + version: 14.2.0(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3)) 113 116 '@vueuse/nuxt': 114 117 specifier: 14.2.0 115 118 version: 14.2.0(magicast@0.5.1)(nuxt@4.3.0(@parcel/watcher@2.5.6)(@types/node@24.10.9)(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(@vue/compiler-sfc@3.5.27)(better-sqlite3@12.6.2)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.6.2))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.3))(rolldown@1.0.0-rc.1)(rollup@4.57.0)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@3.2.4(typescript@5.9.3))(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3)) 116 119 '@vueuse/router': 117 120 specifier: ^14.2.0 118 121 version: 14.2.0(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3)) 122 + focus-trap: 123 + specifier: ^7.8.0 124 + version: 7.8.0 119 125 marked: 120 126 specifier: 17.0.1 121 127 version: 17.0.1 ··· 285 291 version: 12.5.0 286 292 docus: 287 293 specifier: 5.4.4 288 - version: 5.4.4(2f831e0430d485ee9f0df148b483e89e) 294 + version: 5.4.4(0425d66a55e18cb301b6484929682ec3) 289 295 nuxt: 290 296 specifier: 4.3.0 291 297 version: 4.3.0(@parcel/watcher@2.5.6)(@types/node@24.10.9)(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(@vue/compiler-sfc@3.5.27)(better-sqlite3@12.5.0)(cac@6.7.14)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(optionator@0.9.4)(oxlint@1.42.0(oxlint-tsgolint@0.11.3))(rolldown@1.0.0-rc.1)(rollup@4.57.0)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@3.2.4(typescript@5.9.3))(yaml@2.8.2) ··· 4398 4404 universal-cookie: 4399 4405 optional: true 4400 4406 4407 + '@vueuse/integrations@14.2.0': 4408 + resolution: {integrity: sha512-Yuo5XbIi6XkfSXOYKd5SBZwyBEyO3Hd41eeG2555hDbE0Maz/P0BfPJDYhgDXjS9xI0jkWUUp1Zh5lXHOgkwLw==} 4409 + peerDependencies: 4410 + async-validator: ^4 4411 + axios: ^1 4412 + change-case: ^5 4413 + drauu: ^0.4 4414 + focus-trap: ^7 || ^8 4415 + fuse.js: ^7 4416 + idb-keyval: ^6 4417 + jwt-decode: ^4 4418 + nprogress: ^0.2 4419 + qrcode: ^1.5 4420 + sortablejs: ^1 4421 + universal-cookie: ^7 || ^8 4422 + vue: ^3.5.0 4423 + peerDependenciesMeta: 4424 + async-validator: 4425 + optional: true 4426 + axios: 4427 + optional: true 4428 + change-case: 4429 + optional: true 4430 + drauu: 4431 + optional: true 4432 + focus-trap: 4433 + optional: true 4434 + fuse.js: 4435 + optional: true 4436 + idb-keyval: 4437 + optional: true 4438 + jwt-decode: 4439 + optional: true 4440 + nprogress: 4441 + optional: true 4442 + qrcode: 4443 + optional: true 4444 + sortablejs: 4445 + optional: true 4446 + universal-cookie: 4447 + optional: true 4448 + 4401 4449 '@vueuse/metadata@10.11.1': 4402 4450 resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==} 4403 4451 ··· 5705 5753 flatted@3.3.3: 5706 5754 resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==} 5707 5755 5756 + focus-trap@7.8.0: 5757 + resolution: {integrity: sha512-/yNdlIkpWbM0ptxno3ONTuf+2g318kh2ez3KSeZN5dZ8YC6AAmgeWz+GasYYiBJPFaYcSAPeu4GfhUaChzIJXA==} 5758 + 5708 5759 fontaine@0.7.0: 5709 5760 resolution: {integrity: sha512-vlaWLyoJrOnCBqycmFo/CA8ZmPzuyJHYmgu261KYKByZ4YLz9sTyHZ4qoHgWSYiDsZXhiLo2XndVMz0WOAyZ8Q==} 5710 5761 engines: {node: '>=18.12.0'} ··· 8469 8520 system-architecture@0.1.0: 8470 8521 resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==} 8471 8522 engines: {node: '>=18'} 8523 + 8524 + tabbable@6.4.0: 8525 + resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==} 8472 8526 8473 8527 tagged-tag@1.0.0: 8474 8528 resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==} ··· 11855 11909 - magicast 11856 11910 - typescript 11857 11911 11858 - '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.5.0))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)': 11912 + '@nuxt/ui@4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.5.0))(embla-carousel@8.6.0)(focus-trap@7.8.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6)': 11859 11913 dependencies: 11860 11914 '@floating-ui/dom': 1.7.5 11861 11915 '@iconify/vue': 5.0.0(vue@3.5.27(typescript@5.9.3)) ··· 11890 11944 '@tiptap/vue-3': 3.17.1(@floating-ui/dom@1.7.5)(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(vue@3.5.27(typescript@5.9.3)) 11891 11945 '@unhead/vue': 2.1.2(vue@3.5.27(typescript@5.9.3)) 11892 11946 '@vueuse/core': 14.2.0(vue@3.5.27(typescript@5.9.3)) 11893 - '@vueuse/integrations': 14.1.0(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3)) 11947 + '@vueuse/integrations': 14.1.0(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3)) 11894 11948 '@vueuse/shared': 14.2.0(vue@3.5.27(typescript@5.9.3)) 11895 11949 colortranslator: 5.0.0 11896 11950 consola: 3.4.2 ··· 14247 14301 '@vueuse/shared': 14.2.0(vue@3.5.27(typescript@5.9.3)) 14248 14302 vue: 3.5.27(typescript@5.9.3) 14249 14303 14250 - '@vueuse/integrations@14.1.0(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3))': 14304 + '@vueuse/integrations@14.1.0(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3))': 14251 14305 dependencies: 14252 14306 '@vueuse/core': 14.1.0(vue@3.5.27(typescript@5.9.3)) 14253 14307 '@vueuse/shared': 14.1.0(vue@3.5.27(typescript@5.9.3)) 14254 14308 vue: 3.5.27(typescript@5.9.3) 14255 14309 optionalDependencies: 14310 + focus-trap: 7.8.0 14311 + fuse.js: 7.1.0 14312 + 14313 + '@vueuse/integrations@14.2.0(focus-trap@7.8.0)(fuse.js@7.1.0)(vue@3.5.27(typescript@5.9.3))': 14314 + dependencies: 14315 + '@vueuse/core': 14.2.0(vue@3.5.27(typescript@5.9.3)) 14316 + '@vueuse/shared': 14.2.0(vue@3.5.27(typescript@5.9.3)) 14317 + vue: 3.5.27(typescript@5.9.3) 14318 + optionalDependencies: 14319 + focus-trap: 7.8.0 14256 14320 fuse.js: 7.1.0 14257 14321 14258 14322 '@vueuse/metadata@10.11.1': {} ··· 15141 15205 15142 15206 diff@8.0.3: {} 15143 15207 15144 - docus@5.4.4(2f831e0430d485ee9f0df148b483e89e): 15208 + docus@5.4.4(0425d66a55e18cb301b6484929682ec3): 15145 15209 dependencies: 15146 15210 '@iconify-json/lucide': 1.2.87 15147 15211 '@iconify-json/simple-icons': 1.2.68 ··· 15149 15213 '@nuxt/content': 3.11.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)) 15150 15214 '@nuxt/image': 2.0.0(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.9.2)(magicast@0.5.1) 15151 15215 '@nuxt/kit': 4.3.0(magicast@0.5.1) 15152 - '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.5.0))(embla-carousel@8.6.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6) 15216 + '@nuxt/ui': 4.4.0(@nuxt/content@3.11.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.9.3)))(@tiptap/extensions@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.4)(prosemirror-state@1.4.4)(prosemirror-view@1.41.5)(y-protocols@1.0.7(yjs@13.6.29))(yjs@13.6.29))(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(db0@0.3.4(better-sqlite3@12.5.0))(embla-carousel@8.6.0)(focus-trap@7.8.0)(ioredis@5.9.2)(magicast@0.5.1)(tailwindcss@4.1.18)(typescript@5.9.3)(valibot@1.2.0(typescript@5.9.3))(vite@7.3.1(@types/node@24.10.9)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue-router@4.6.4(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))(yjs@13.6.29)(zod@4.3.6) 15153 15217 '@nuxtjs/i18n': 10.2.1(@upstash/redis@1.36.1)(@vercel/kv@3.0.0)(@vue/compiler-dom@3.5.27)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(magicast@0.5.1)(rollup@4.57.0)(vue@3.5.27(typescript@5.9.3)) 15154 15218 '@nuxtjs/mcp-toolkit': 0.6.2(hono@4.11.7)(magicast@0.5.1)(zod@4.3.6) 15155 15219 '@nuxtjs/mdc': 0.20.0(magicast@0.5.1) ··· 15799 15863 flat@6.0.1: {} 15800 15864 15801 15865 flatted@3.3.3: {} 15866 + 15867 + focus-trap@7.8.0: 15868 + dependencies: 15869 + tabbable: 6.4.0 15802 15870 15803 15871 fontaine@0.7.0: 15804 15872 dependencies: ··· 19782 19850 sax: 1.4.4 19783 19851 19784 19852 system-architecture@0.1.0: {} 19853 + 19854 + tabbable@6.4.0: {} 19785 19855 19786 19856 tagged-tag@1.0.0: {} 19787 19857