45 lines
778 B
Vue
45 lines
778 B
Vue
<template>
|
|
<div class="text-shortener">
|
|
<span
|
|
class="text-shortener__text"
|
|
@click="copyButton.copy()"
|
|
>
|
|
{{ shortenedText }}
|
|
</span>
|
|
|
|
<UiCopyButton
|
|
ref="copyButton"
|
|
:title="null"
|
|
:pressed-title="null"
|
|
:value="text"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({ text: { type: String, required: true } })
|
|
|
|
const copyButton = ref()
|
|
|
|
const shortenedText = computed(() => {
|
|
if (props.text.length > 12)
|
|
return `${props.text.substr(0, 5)}....${props.text.substr(-5, 5)}`
|
|
|
|
return props.text
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.text-shortener {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
|
|
&__text {
|
|
@include txt-r-sb('text-shortener');
|
|
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|