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).
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<!--
|
|
This component acts as a wrapper for the v-tooltip to solve the following:
|
|
- Direct inclusion of inline HTML in tooltip components has challenges such as
|
|
- absence of linting or editor support,
|
|
- involves cumbersome string concatenation.
|
|
This component caters to these issues by permitting HTML usage in a slot.
|
|
- It provides an abstraction for a third-party component which simplifies
|
|
switching and acts as an anti-corruption layer.
|
|
-->
|
|
|
|
<template>
|
|
<div class="tooltip-container" v-tooltip.top-center="tooltipHtml">
|
|
<slot />
|
|
<div class="tooltip-content" ref="tooltipWrapper">
|
|
<slot name="tooltip" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, ref, onMounted, onUpdated, nextTick,
|
|
} from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const tooltipWrapper = ref<HTMLElement | undefined>();
|
|
const tooltipHtml = ref<string | undefined>();
|
|
|
|
onMounted(() => updateTooltipHTML());
|
|
|
|
onUpdated(() => {
|
|
nextTick(() => {
|
|
updateTooltipHTML();
|
|
});
|
|
});
|
|
|
|
function updateTooltipHTML() {
|
|
const newValue = tooltipWrapper.value?.innerHTML;
|
|
const oldValue = tooltipHtml.value;
|
|
if (newValue === oldValue) {
|
|
return;
|
|
}
|
|
tooltipHtml.value = newValue;
|
|
}
|
|
|
|
return {
|
|
tooltipWrapper,
|
|
tooltipHtml,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
.tooltip-container {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tooltip-content {
|
|
display: none;
|
|
}
|
|
</style>
|