feat(bar): tooltip always visible

If the bar is going out of bounds, make the tooltip visible. Take into account the position of the chart in the page.

Author: Olivier Druais

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infectoone/vue-ganttastic",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "author": "Marko Zunic (@zunnzunn)",
   "scripts": {

src/components/GGanttBarTooltip.vue

@@ -20,11 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, watch, nextTick } from "vue"
+import { computed, toRefs, ref, watch, nextTick, inject } from "vue"
 
 import type { GanttBarObject } from "../types"
 import useDayjsHelper from "../composables/useDayjsHelper.js"
 import provideConfig from "../provider/provideConfig.js"
+import { CHART_CONTAINER_KEY } from "../provider/symbols"
 
 const TOOLTIP_FORMATS = {
   hour: "HH:mm",
@@ -44,6 +45,8 @@ const props = defineProps<{
 const { bar } = toRefs(props)
 const { precision, font, barStart, barEnd, rowHeight } = provideConfig()
 
+const barContainerEl = inject(CHART_CONTAINER_KEY)
+
 const tooltipTop = ref("0px")
 const tooltipLeft = ref("0px")
 watch(
@@ -52,7 +55,7 @@ watch(
     await nextTick()
 
     const barId = bar?.value?.ganttBarConfig.id || ""
-    if (!barId) {
+    if (!barId || !barContainerEl?.value) {
       return
     }
 
@@ -61,7 +64,7 @@ watch(
       top: 0,
       left: 0
     }
-    const leftValue = Math.max(left, 10)
+    const leftValue = Math.max(left, barContainerEl?.value.getBoundingClientRect().left)
     tooltipTop.value = `${top + rowHeight.value - 10}px`
     tooltipLeft.value = `${leftValue}px`
   },

src/components/GGanttChart.vue

@@ -77,6 +77,7 @@ import {
   CHART_ROWS_KEY,
   CONFIG_KEY,
   EMIT_BAR_EVENT_KEY,
+  CHART_CONTAINER_KEY,
   type ChartRow
 } from "../provider/symbols.js"
 
@@ -254,6 +255,7 @@ const emitBarEvent = (
 const ganttChart = ref<HTMLElement | null>(null)
 const chartSize = useElementSize(ganttChart)
 
+provide(CHART_CONTAINER_KEY, ganttChart)
 provide(CHART_ROWS_KEY, getChartRows)
 provide(CONFIG_KEY, {
   ...toRefs(props),

src/provider/symbols.ts

@@ -18,3 +18,6 @@ export const EMIT_BAR_EVENT_KEY = Symbol("EMIT_BAR_EVENT_KEY") as InjectionKey<E
 export const BAR_CONTAINER_KEY = Symbol("BAR_CONTAINER_KEY") as InjectionKey<
   Ref<HTMLElement | null>
 >
+export const CHART_CONTAINER_KEY = Symbol("CHART_CONTAINER_KEY") as InjectionKey<
+  Ref<HTMLElement | null>
+>