mirror of
https://github.com/modrinth/code.git
synced 2026-08-31 12:05:53 +00:00
Calum H.
82348fe40a
* fix: 20 user cap * qa: invite modal dropdown + other + clamp limits * fix: hide filters if just one type * feat: update req banner * feat: invite management frontend * fix: moderation issues with shared instances * feat: instance icon improvements * fix: better offline handling * fix: lint * feat: show avatar in install to play modal * feat: smaller qa points * fix: fmt * fix: fmt * fix: yeet svg * fix: 50 user limit
44 lines
1.3 KiB
Vue
44 lines
1.3 KiB
Vue
<template>
|
|
<button
|
|
class="!m-0 inline-flex w-fit select-text items-center gap-2 rounded-[10px] bg-[var(--color-button-bg)] px-2 py-1 font-mono text-sm text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[1.25] active:scale-95 active:brightness-[0.8] motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
|
|
:title="formatMessage(copiedMessage)"
|
|
@click="copyText"
|
|
>
|
|
<span>{{ displayText ?? text }}</span>
|
|
<CheckIcon v-if="copied" />
|
|
<ClipboardCopyIcon v-else />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { CheckIcon, ClipboardCopyIcon } from '@modrinth/assets'
|
|
import { onBeforeUnmount, ref } from 'vue'
|
|
|
|
import { defineMessage, useVIntl } from '../../composables/i18n'
|
|
|
|
const copiedMessage = defineMessage({
|
|
id: 'omorphia.component.copy.action.copy',
|
|
defaultMessage: 'Copy code to clipboard',
|
|
})
|
|
const { formatMessage } = useVIntl()
|
|
|
|
const props = defineProps<{
|
|
text: string
|
|
displayText?: string
|
|
}>()
|
|
|
|
const copied = ref(false)
|
|
let copiedResetTimeout: ReturnType<typeof setTimeout> | undefined
|
|
|
|
async function copyText() {
|
|
await navigator.clipboard.writeText(props.text)
|
|
copied.value = true
|
|
clearTimeout(copiedResetTimeout)
|
|
copiedResetTimeout = setTimeout(() => {
|
|
copied.value = false
|
|
}, 2000)
|
|
}
|
|
|
|
onBeforeUnmount(() => clearTimeout(copiedResetTimeout))
|
|
</script>
|