bc91237d7c
This commit introduces a new Vue component to handle tooltips. It acts as a wrapper for the `v-tooltip`. It enhances the maintainability, readability and portability of tooltips by enabling the direct inclusion of inline HTML in the tooltip components. It solves issues such as absence of linting or editor support and cumbersome string concatenation. It also provides an abstraction layer that simplifies the switching between different tooltip implementations, which would allow a smooth migration to Vue 3 (see #230).
71 lines
1.4 KiB
Vue
71 lines
1.4 KiB
Vue
<template>
|
|
<span class="code-wrapper">
|
|
<span class="dollar">$</span>
|
|
<code><slot /></code>
|
|
<TooltipWrapper>
|
|
<font-awesome-icon
|
|
class="copy-button"
|
|
:icon="['fas', 'copy']"
|
|
@click="copyCode"
|
|
/>
|
|
<template v-slot:tooltip>
|
|
Copy
|
|
</template>
|
|
</TooltipWrapper>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, useSlots } from 'vue';
|
|
import { Clipboard } from '@/infrastructure/Clipboard';
|
|
import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TooltipWrapper,
|
|
},
|
|
setup() {
|
|
const slots = useSlots();
|
|
|
|
function copyCode() {
|
|
const code = slots.default()[0].text;
|
|
Clipboard.copyText(code);
|
|
}
|
|
|
|
return {
|
|
copyCode,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.code-wrapper {
|
|
display:flex;
|
|
white-space: nowrap;
|
|
justify-content: space-between;
|
|
font-family: $font-normal;
|
|
background-color: $color-primary-darker;
|
|
color: $color-on-primary;
|
|
align-items: center;
|
|
padding: 0.2rem;
|
|
.dollar {
|
|
margin-right: 0.5rem;
|
|
font-size: 0.8rem;
|
|
user-select: none;
|
|
}
|
|
.copy-button {
|
|
margin-left: 1rem;
|
|
@include clickable;
|
|
@include hover-or-touch {
|
|
color: $color-primary;
|
|
}
|
|
}
|
|
code {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|