npmx.dev/app/components/CopyToClipboardButton.vue at 58da597516879bc60851049b6f348aa410d5c0d8 · npmx-dev/npmx.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<{
  copied: boolean
  copyText?: string
  copiedText?: string
  ariaLabelCopy?: string
  ariaLabelCopied?: string
  buttonAttrs?: HTMLAttributes
}>()

const buttonCopyText = computed(() => props.copyText || $t('common.copy'))
const buttonCopiedText = computed(() => props.copiedText || $t('common.copied'))
const buttonAriaLabelCopy = computed(() => props.ariaLabelCopy || $t('common.copy'))
const buttonAriaLabelCopied = computed(() => props.ariaLabelCopied || $t('common.copied'))

const emit = defineEmits<{
  click: []
}>()

function handleClick() {
  emit('click')
}
</script>

<template>
  <div class="group relative" v-bind="$attrs">
    <slot />
    <button
      type="button"
      @click="handleClick"
      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,
        copied ? ['text-accent', $style.copiedBg] : 'text-fg-muted bg-bg border-border',
      ]"
      :aria-label="copied ? buttonAriaLabelCopied : buttonAriaLabelCopy"
      v-bind="buttonAttrs"
    >
      <span
        :class="copied ? 'i-lucide:check' : 'i-lucide:copy'"
        class="w-3.5 h-3.5"
        aria-hidden="true"
      />
      {{ copied ? buttonCopiedText : buttonCopyText }}
    </button>
  </div>
</template>

<style module>
.copyButton {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  width: 1px;
  transition:
    opacity 0.25s 0.1s,
    translate 0.15s 0.1s,
    clip 0.01s 0.34s allow-discrete,
    clip-path 0.01s 0.34s allow-discrete,
    height 0.01s 0.34s allow-discrete,
    width 0.01s 0.34s allow-discrete;
}

:global(.group):hover .copyButton,
.copyButton:focus-visible {
  clip: auto;
  clip-path: none;
  height: auto;
  overflow: visible;
  width: auto;
  transition:
    opacity 0.15s,
    translate 0.15s;
}

.copiedBg {
  background-color: color-mix(in srgb, var(--accent) 10%, var(--bg));
}

@media (hover: none) {
  .copyButton {
    display: none;
  }
}
</style>