forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: add copy button for package versions (#1447)
Co-authored-by: Willow (GHOST) <git@willow.sh>
authored by
Omar Gamal Hamed
Willow (GHOST)
and committed by
GitHub
c887a5f0
295520c6
+34
-2
+28
-2
app/pages/package/[[org]]/[name].vue
+28
-2
app/pages/package/[[org]]/[name].vue
···
246
246
copiedDuring: 2000,
247
247
})
248
248
249
+
//copy version name
250
+
const { copied: copiedVersion, copy: copyVersion } = useClipboard({
251
+
source: resolvedVersion.value ?? '',
252
+
copiedDuring: 2000,
253
+
})
254
+
249
255
// Fetch dependency analysis (lazy, client-side)
250
256
// This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
251
257
const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
···
680
686
</span>
681
687
</h1>
682
688
683
-
<!-- Floating copy button -->
689
+
<!-- Floating copy name button -->
684
690
<button
685
691
type="button"
686
692
@click="copyPkgName()"
···
699
705
{{ copiedPkgName ? $t('common.copied') : $t('package.copy_name') }}
700
706
</button>
701
707
</div>
708
+
702
709
<span
703
710
v-if="resolvedVersion"
704
-
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
711
+
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0 relative group"
705
712
>
706
713
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
707
714
<template v-if="requestedVersion && resolvedVersion !== requestedVersion">
···
744
751
class="text-fg-subtle text-sm shrink-0"
745
752
>{{ $t('package.not_latest') }}</span
746
753
>
754
+
755
+
<!-- Floating copy version button -->
756
+
<button
757
+
type="button"
758
+
@click="copyVersion()"
759
+
class="absolute z-20 inset-is-0 top-full inline-flex items-center gap-1 px-2 py-1 rounded border text-xs font-mono whitespace-nowrap transition-all duration-150 opacity-0 -translate-y-1 pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto focus-visible:opacity-100 focus-visible:translate-y-0 focus-visible:pointer-events-auto"
760
+
:class="[
761
+
$style.copyButton,
762
+
copiedVersion ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
763
+
]"
764
+
:aria-label="copiedVersion ? $t('common.copied') : $t('package.copy_version')"
765
+
>
766
+
<span
767
+
:class="copiedVersion ? 'i-carbon:checkmark' : 'i-carbon:copy'"
768
+
class="w-3.5 h-3.5"
769
+
aria-hidden="true"
770
+
/>
771
+
{{ copiedVersion ? $t('common.copied') : $t('package.copy_version') }}
772
+
</button>
747
773
</span>
748
774
749
775
<!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
+1
i18n/locales/en.json
+1
i18n/locales/en.json
···
151
151
"view_permalink": "View permalink for this version",
152
152
"navigation": "Package",
153
153
"copy_name": "Copy package name",
154
+
"copy_version": "Copy package version",
154
155
"deprecation": {
155
156
"package": "This package has been deprecated.",
156
157
"version": "This version has been deprecated.",
+3
i18n/schema.json
+3
i18n/schema.json
+1
lunaria/files/en-GB.json
+1
lunaria/files/en-GB.json
···
150
150
"view_permalink": "View permalink for this version",
151
151
"navigation": "Package",
152
152
"copy_name": "Copy package name",
153
+
"copy_version": "Copy package version",
153
154
"deprecation": {
154
155
"package": "This package has been deprecated.",
155
156
"version": "This version has been deprecated.",
+1
lunaria/files/en-US.json
+1
lunaria/files/en-US.json
···
150
150
"view_permalink": "View permalink for this version",
151
151
"navigation": "Package",
152
152
"copy_name": "Copy package name",
153
+
"copy_version": "Copy package version",
153
154
"deprecation": {
154
155
"package": "This package has been deprecated.",
155
156
"version": "This version has been deprecated.",