Skip to content

feat: add copy button for package versions #1447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghostdevv merged 6 commits into from
Feb 13, 2026
Merged

feat: add copy button for package versions #1447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
868828e
feat: add copy button for package versions
agamyo168 Feb 12, 2026
cf17853
Merge branch 'main' into feat/version-copy-button
agamyo168 Feb 13, 2026
c3f5621
docs: forgot to edit the comment for the copyVersion hook
agamyo168 Feb 13, 2026
676e301
feat: unify style with copy package name button
ghostdevv Feb 13, 2026
c5fce83
Merge remote-tracking branch 'origin/main' into feat/version-copy-button
ghostdevv Feb 13, 2026
cdc7f39
fix: merge artifacts
ghostdevv Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions app/pages/package/[[org]]/[name].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,12 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
copiedDuring: 2000,
})

//copy version name
const { copied: copiedVersion, copy: copyVersion } = useClipboard({
source: resolvedVersion.value ?? '',
Copy link
Contributor

@nicolo-ribaudo nicolo-ribaudo Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In which case there is no value? Maybe we should just not show the copy button when it happens.

Copy link
Contributor Author

@agamyo168 agamyo168 Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this was already the case? This is why I encapsulated it in the version span .

Copy link
Contributor

@nicolo-ribaudo nicolo-ribaudo Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh right

copiedDuring: 2000,
})

// Fetch dependency analysis (lazy, client-side)
// This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
Expand Down Expand Up @@ -680,7 +686,7 @@ const showSkeleton = shallowRef(false)
</span>
</h1>

<!-- Floating copy button -->
<!-- Floating copy name button -->
<button
type="button"
@click="copyPkgName()"
Expand All @@ -699,9 +705,10 @@ const showSkeleton = shallowRef(false)
{{ copiedPkgName ? $t('common.copied') : $t('package.copy_name') }}
</button>
</div>

<span
v-if="resolvedVersion"
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0"
class="inline-flex items-baseline gap-1.5 font-mono text-base sm:text-lg text-fg-muted shrink-0 relative group"
>
<!-- Version resolution indicator (e.g., "latest → 4.2.0") -->
<template v-if="requestedVersion && resolvedVersion !== requestedVersion">
Expand Down Expand Up @@ -744,6 +751,25 @@ const showSkeleton = shallowRef(false)
class="text-fg-subtle text-sm shrink-0"
>{{ $t('package.not_latest') }}</span
>

<!-- Floating copy version button -->
<button
type="button"
@click="copyVersion()"
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"
:class="[
$style.copyButton,
copiedVersion ? 'text-accent bg-accent/10' : 'text-fg-muted bg-bg border-border',
]"
:aria-label="copiedVersion ? $t('common.copied') : $t('package.copy_version')"
>
<span
:class="copiedVersion ? 'i-carbon:checkmark' : 'i-carbon:copy'"
class="w-3.5 h-3.5"
aria-hidden="true"
/>
{{ copiedVersion ? $t('common.copied') : $t('package.copy_version') }}
</button>
</span>

<!-- Docs + Code + Compare — inline on desktop, floating bottom bar on mobile -->
Expand Down
1 change: 1 addition & 0 deletions i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
"view_permalink": "View permalink for this version",
"navigation": "Package",
"copy_name": "Copy package name",
"copy_version": "Copy package version",
"deprecation": {
"package": "This package has been deprecated.",
"version": "This version has been deprecated.",
Expand Down
3 changes: 3 additions & 0 deletions i18n/schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,9 @@
"copy_name": {
"type": "string"
},
"copy_version": {
"type": "string"
},
"deprecation": {
"type": "object",
"properties": {
Expand Down
1 change: 1 addition & 0 deletions lunaria/files/en-GB.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
"view_permalink": "View permalink for this version",
"navigation": "Package",
"copy_name": "Copy package name",
"copy_version": "Copy package version",
"deprecation": {
"package": "This package has been deprecated.",
"version": "This version has been deprecated.",
Expand Down
1 change: 1 addition & 0 deletions lunaria/files/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@
"view_permalink": "View permalink for this version",
"navigation": "Package",
"copy_name": "Copy package name",
"copy_version": "Copy package version",
"deprecation": {
"package": "This package has been deprecated.",
"version": "This version has been deprecated.",
Expand Down
Loading