55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<v-tooltip :model-value="!error&&copied" :open-on-hover="false" location="top">
|
|
<template v-slot:activator="{ props }">
|
|
<span v-bind="props" style="cursor: pointer" @click="copy()">
|
|
<v-btn v-bind="props" v-if="permitted" rounded variant="text" size="small" density="compact" @click="copy()"
|
|
:class="error?'error':copied?'success':''"
|
|
:icon="error?'mdi-close-box-outline':copied?'mdi-check-circle-outline':'mdi-content-copy'"
|
|
:text="showText?text:''"
|
|
/>
|
|
<slot>{{text}}</slot>
|
|
</span>
|
|
</template>
|
|
<span>Copied!</span>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
|
|
const props = defineProps({text:String, showText:{default:false}})
|
|
const permitted = ref(true)
|
|
const copied = ref(false)
|
|
const error = ref(false)
|
|
|
|
navigator.permissions.query({name: "clipboard-write"}).then((permission) => {
|
|
permitted.value = permission.state === "granted" || permission.state === "prompt"
|
|
}).catch(()=>null)
|
|
|
|
function copy() {
|
|
if (!copied.value) {
|
|
navigator.clipboard.writeText(props.text)
|
|
.then(() => {
|
|
copied.value = true
|
|
setTimeout(() => copied.value = false, 3000)
|
|
})
|
|
.catch(() => {
|
|
error.value = true
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "src/styles/vars" as *;
|
|
|
|
.error {
|
|
color: $red;
|
|
}
|
|
|
|
.success {
|
|
color: $green;
|
|
}
|
|
</style>
|