From 1f1dc8cd24fe0f447d96868965a96a877db3b62e Mon Sep 17 00:00:00 2001
From: Olivier Druais <olivier.druais@socleo.fr>
Date: Tue, 22 Oct 2024 09:48:44 +0200
Subject: [PATCH 01/17] feat(bar): bar label always visible and centered

- Make sure the bar label is centered on the visible part of the bar, even when the bar overflows.
- The bar label is wrapped into a container whom position is calculated based on the barContainer position and bar position (xStart, xEnd)
---
 src/components/GGanttBar.vue | 44 ++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/GGanttBar.vue b/src/components/GGanttBar.vue
index a8e1ce2b..c7ab127c 100644
--- a/src/components/GGanttBar.vue
+++ b/src/components/GGanttBar.vue
@@ -18,13 +18,15 @@
     @mouseleave="onMouseEvent"
     @contextmenu="onMouseEvent"
   >
-    <div class="g-gantt-bar-label">
-      <slot :bar="bar">
-        <div>
-          {{ barConfig.label || "" }}
-        </div>
-        <div v-if="barConfig.html" v-html="barConfig.html"/>
-      </slot>
+    <div class="g-gantt-bar-label-container" :style="labelPosition">
+      <div class="g-gantt-bar-label">
+        <slot :bar="bar">
+          <div>
+            {{ barConfig.label || "" }}
+          </div>
+          <div v-if="barConfig.html" v-html="barConfig.html"/>
+        </slot>
+      </div>
     </div>
     <template v-if="barConfig.hasHandles">
       <div class="g-gantt-bar-handle-left" />
@@ -105,6 +107,34 @@ const { barStart, barEnd, width, chartStart, chartEnd, chartSize } = config
 const xStart = ref(0)
 const xEnd = ref(0)
 
+// Position bar label to the center of the visible part of the chart
+const labelPosition = computed((): Record<string, string> => {
+  const barContainer = barContainerEl?.value?.getBoundingClientRect()
+  if (!barContainer) {
+    return {}
+  }
+  // The bar either ends at the end of the container (overflow) or at the element's position in the chart
+  const barVisibleRight = Math.min(xEnd.value, barContainer.right - barContainer.left)
+  // The bar either starts at the beginning of the container (overflow) or at the element's position in the chart
+  const barVisibleLeft = Math.max(xStart.value, 0)
+  // Visible width of the bar
+  const barVisibleWidth = barVisibleRight - barVisibleLeft
+
+  // The label container is positioned from the left.
+  // If overflowing on the left, adjust the label's positioning to fit in the visible part
+  let offsetLeft = 0
+  if (xStart.value < 0) {
+    // Shift the left position by the width of the hidden part
+    offsetLeft = -xStart.value
+  }
+
+  return {
+    left: `${offsetLeft}px`,
+    width: `${barVisibleWidth}px`,
+    position: "absolute"
+  }
+})
+
 onMounted(() => {
   watch(
     [bar, width, chartStart, chartEnd, chartSize.width],

From 0c5a50e9e4f147776175b4e69ba59b059c96e6a2 Mon Sep 17 00:00:00 2001
From: Olivier Druais <olivier.druais@socleo.fr>
Date: Mon, 4 Nov 2024 12:26:26 +0100
Subject: [PATCH 02/17] 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.
---
 package.json                        | 2 +-
 src/components/GGanttBarTooltip.vue | 9 ++++++---
 src/components/GGanttChart.vue      | 2 ++
 src/provider/symbols.ts             | 3 +++
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 906f2445..e47444d7 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/GGanttBarTooltip.vue b/src/components/GGanttBarTooltip.vue
index 762ee7f7..de5e8e38 100644
--- a/src/components/GGanttBarTooltip.vue
+++ b/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`
   },
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index 910882df..05528013 100644
--- a/src/components/GGanttChart.vue
+++ b/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),
diff --git a/src/provider/symbols.ts b/src/provider/symbols.ts
index a86d5c9e..e2bbc96d 100644
--- a/src/provider/symbols.ts
+++ b/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>
+>

From 18e9aa64a2ee897a999756b23e2e89a09e656986 Mon Sep 17 00:00:00 2001
From: Olivier Druais <olivier.druais@socleo.fr>
Date: Mon, 4 Nov 2024 15:23:35 +0100
Subject: [PATCH 03/17] build(version): keep version 2.3.2 for label and
 tooltip changes

---
 .gitignore   | 3 +++
 package.json | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 8bd9b249..8f1f9c5d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,6 @@ docs/.vitepress/temp
 docs/.vitepress/dist
 
 *.tgz
+
+# Package manager
+.npmrc
diff --git a/package.json b/package.json
index e47444d7..906f2445 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infectoone/vue-ganttastic",
-  "version": "2.3.3",
+  "version": "2.3.2",
   "description": "A simple and customizable Gantt chart component for Vue.js",
   "author": "Marko Zunic (@zunnzunn)",
   "scripts": {

From 0031667041e3c0fa26ac8a27b59f6fb9e3ced616 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 27 Nov 2024 14:57:39 +0000
Subject: [PATCH 04/17] Fix duplicate key warning

Fix duplicate key warning when switching to hour precision
---
 src/components/GGanttGrid.vue     | 4 ++--
 src/components/GGanttTimeaxis.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/GGanttGrid.vue b/src/components/GGanttGrid.vue
index 23462e02..5f4180cf 100644
--- a/src/components/GGanttGrid.vue
+++ b/src/components/GGanttGrid.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="g-grid-container">
     <div
-      v-for="{ label, value, width } in timeaxisUnits.lowerUnits"
-      :key="label"
+      v-for="({ label, value, width }, index) in timeaxisUnits.lowerUnits"
+      :key="`${label}_${index}`"
       class="g-grid-line"
       :style="{
         width,
diff --git a/src/components/GGanttTimeaxis.vue b/src/components/GGanttTimeaxis.vue
index 07e6bfd3..cec4e218 100644
--- a/src/components/GGanttTimeaxis.vue
+++ b/src/components/GGanttTimeaxis.vue
@@ -3,7 +3,7 @@
     <div class="g-timeunits-container">
       <div
         v-for="({ label, value, date, width }, index) in timeaxisUnits.upperUnits"
-        :key="label"
+        :key="`${label}_${index}`"
         class="g-upper-timeunit"
         :style="{
           background: index % 2 === 0 ? colors.primary : colors.secondary,
@@ -20,7 +20,7 @@
     <div class="g-timeunits-container">
       <div
         v-for="({ label, value, date, width }, index) in timeaxisUnits.lowerUnits"
-        :key="label"
+        :key="`${label}_${index}`"
         class="g-timeunit"
         :style="{
           background: index % 2 === 0 ? colors.ternary : colors.quartenary,

From 86e045169a5c12864e0a94dc6d8b0be3899102bb Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Thu, 28 Nov 2024 11:25:40 +0000
Subject: [PATCH 05/17] Adds Day names to timeaxis

Adds day names to time axis when using day or date mode.

Chose this implementation in order to avoid making sweeping changes to the pre-existing implementation.
---
 docs/GGanttChart.md               | 3 +++
 src/components/GGanttChart.vue    | 8 +++++++-
 src/components/GGanttTimeaxis.vue | 8 +++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 7b5fd9dc..2b0f61dc 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -22,6 +22,9 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `font` | string | `"Helvetica"`| Font family of the chart.
 | `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)
+| `showDayName` | boolean? | `true` | Adds the Day name to the timeunit axis when in `day` or `date` mode
+| `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long`
+| `locale` | string? | 'en-GB' | Used when getting the day name only.
 
 
 ## Custom Events
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index 910882df..ba56b48c 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -100,6 +100,9 @@ export interface GGanttChartProps {
   font?: string
   labelColumnTitle?: string
   labelColumnWidth?: string
+  showDayName?: boolean
+  dayNameLength?: "short" | "long"
+  locale?: string
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
@@ -124,7 +127,10 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   highlightedUnits: () => [],
   font: "inherit",
   labelColumnTitle: "",
-  labelColumnWidth: "150px"
+  labelColumnWidth: "150px",
+  showDayName: true,
+  dayNameLength: "short",
+  locale: "en-GB"
 })
 
 const emit = defineEmits<{
diff --git a/src/components/GGanttTimeaxis.vue b/src/components/GGanttTimeaxis.vue
index cec4e218..dfc3970a 100644
--- a/src/components/GGanttTimeaxis.vue
+++ b/src/components/GGanttTimeaxis.vue
@@ -31,6 +31,7 @@
         }"
       >
         <slot name="timeunit" :label="label" :value="value" :date="date">
+          {{ shouldShowDayName ? date.toLocaleDateString(locale, { weekday: dayNameLength }) + " " : "" }}
           {{ label }}
         </slot>
         <div
@@ -44,11 +45,16 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue"
 import provideConfig from "../provider/provideConfig.js"
 import useTimeaxisUnits from "../composables/useTimeaxisUnits.js"
 
-const { precision, colors } = provideConfig()
+const { precision, colors, showDayName, dayNameLength, locale } = provideConfig()
 const { timeaxisUnits } = useTimeaxisUnits()
+
+const shouldShowDayName = computed(() => {
+  return showDayName && (precision.value === "day" || precision.value === "date")
+})
 </script>
 
 <style>

From 8e639df8b63ea7c450746b7907745e1e77548cba Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Mon, 2 Dec 2024 15:53:58 +0000
Subject: [PATCH 06/17] [feat] Enable/Disable right click dragging

Enable or disable right click dragging. Useful if you want to use the right-click context menu but want to prevent accidental bar movement.
---
 docs/GGanttChart.md              | 1 +
 src/components/GGanttChart.vue   | 4 +++-
 src/composables/createBarDrag.ts | 7 ++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 2b0f61dc..83fd7ce0 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -25,6 +25,7 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `showDayName` | boolean? | `true` | Adds the Day name to the timeunit axis when in `day` or `date` mode
 | `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long`
 | `locale` | string? | 'en-GB' | Used when getting the day name only.
+| `allowRightClickDragging | boolean? | 'false' | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
 
 
 ## Custom Events
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index ba56b48c..d247cf3e 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -103,6 +103,7 @@ export interface GGanttChartProps {
   showDayName?: boolean
   dayNameLength?: "short" | "long"
   locale?: string
+  allowRightClickDragging?: boolean
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
@@ -130,7 +131,8 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   labelColumnWidth: "150px",
   showDayName: true,
   dayNameLength: "short",
-  locale: "en-GB"
+  locale: "en-GB",
+  allowRightClickDragging: false
 })
 
 const emit = defineEmits<{
diff --git a/src/composables/createBarDrag.ts b/src/composables/createBarDrag.ts
index eb6d59cc..54b76ea6 100644
--- a/src/composables/createBarDrag.ts
+++ b/src/composables/createBarDrag.ts
@@ -12,7 +12,7 @@ export default function createBarDrag(
   onEndDrag: (e: MouseEvent, bar: GanttBarObject) => void = () => null,
   config: GGanttChartConfig = provideConfig()
 ) {
-  const { barStart, barEnd, pushOnOverlap } = config
+  const { barStart, barEnd, pushOnOverlap, allowRightClickDragging } = config
 
   const isDragging = ref(false)
   let cursorOffsetX = 0
@@ -22,6 +22,11 @@ export default function createBarDrag(
   const { toDayjs } = useDayjsHelper(config)
 
   const initDrag = (e: MouseEvent) => {
+    if (!allowRightClickDragging.value && e.buttons === 2) {
+      // Do not allow dragging when right-clicking
+      return
+    }
+
     const barElement = document.getElementById(bar.ganttBarConfig.id)
     if (!barElement) {
       return

From e7cfe400b88990219a8ded1e4504e620d4070151 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 08:47:03 +0000
Subject: [PATCH 07/17] fix typos

---
 docs/GGanttChart.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 83fd7ce0..7a001b5c 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -24,8 +24,8 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)
 | `showDayName` | boolean? | `true` | Adds the Day name to the timeunit axis when in `day` or `date` mode
 | `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long`
-| `locale` | string? | 'en-GB' | Used when getting the day name only.
-| `allowRightClickDragging | boolean? | 'false' | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
+| `locale` | string? | `en-GB` | Used when getting the day name only.
+| `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
 
 
 ## Custom Events

From 030d2bf54a5d71a2150c33922cd46c5b1f094eba Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 11:59:31 +0000
Subject: [PATCH 08/17] [fix][feat] Highlighted dates/hours

Fix #125
[feat] re-working of #95

Adds new props to handle different methods of highlighting dates and hours.

- `highlighted-days-of-week` to handle highlighting the same day or days every week without having to calculate their dates. Useful for highlighting weekends. Set to [0, 6].
- `highlighted-dates` for when you want to highlight specific dates.
- `highlighted-hours` for when you are using hour precision.

`highlighted-units` probably depreciated now.
---
 docs/GGanttChart.md            |  3 +++
 src/GanttPlayground.vue        |  5 ++++-
 src/components/GGanttChart.vue |  6 ++++++
 src/components/GGanttGrid.vue  | 26 ++++++++++++++++++++++----
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 7a001b5c..add524e3 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -19,6 +19,9 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `no-overlap` | boolean? |  `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
 | `row-height` | number? | `40` | Height of each row in pixels.
 | `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color.
+| `highlighted-days-of-week` | number[]? | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`
+| `highlighted-dates` | number[]? | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`.
+| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted.  
 | `font` | string | `"Helvetica"`| Font family of the chart.
 | `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)
diff --git a/src/GanttPlayground.vue b/src/GanttPlayground.vue
index 960848f2..6502ef70 100644
--- a/src/GanttPlayground.vue
+++ b/src/GanttPlayground.vue
@@ -2,8 +2,11 @@
   <g-gantt-chart
     :chart-start="chartStart"
     :chart-end="chartEnd"
-    precision="week"
+    precision="day"
     :row-height="40"
+    :highlighted-hours="[0, 1, 8, 22, 23]"
+    :highlighted-days-of-week="[0, 6]"
+    :highlighted-dates="[4, 6]"
     grid
     current-time
     width="100%"
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index d247cf3e..7cf6cadd 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -97,6 +97,9 @@ export interface GGanttChartProps {
   noOverlap?: boolean
   rowHeight?: number
   highlightedUnits?: number[]
+  highlightedDates?: number[]
+  highlightedDaysOfWeek?: number[]
+  highlightedHours?: number[]
   font?: string
   labelColumnTitle?: string
   labelColumnWidth?: string
@@ -126,6 +129,9 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   noOverlap: false,
   rowHeight: 40,
   highlightedUnits: () => [],
+  highlightedDates: () => [],
+  highlightedDaysOfWeek: () => [],
+  highlightedHours: () => [],
   font: "inherit",
   labelColumnTitle: "",
   labelColumnWidth: "150px",
diff --git a/src/components/GGanttGrid.vue b/src/components/GGanttGrid.vue
index 5f4180cf..5df13e66 100644
--- a/src/components/GGanttGrid.vue
+++ b/src/components/GGanttGrid.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="g-grid-container">
     <div
-      v-for="({ label, value, width }, index) in timeaxisUnits.lowerUnits"
+      v-for="({ label, date, width }, index) in timeaxisUnits.lowerUnits"
       :key="`${label}_${index}`"
       class="g-grid-line"
       :style="{
         width,
-        background: highlightedUnits?.includes(Number(value)) ? colors.hoverHighlight : undefined
+        background: shouldHighlight(date) ? colors.hoverHighlight : undefined
       }"
     />
   </div>
@@ -16,12 +16,30 @@
 import provideConfig from "../provider/provideConfig.js"
 import useTimeaxisUnits from "../composables/useTimeaxisUnits.js"
 
-defineProps<{
+const props = defineProps<{
   highlightedUnits?: number[]
 }>()
 
-const { colors } = provideConfig()
+const { colors, precision, highlightedDaysOfWeek, highlightedDates, highlightedHours } = provideConfig()
 const { timeaxisUnits } = useTimeaxisUnits()
+
+function shouldHighlight(date: Date): boolean {
+  if (precision.value === "hour") {
+    return highlightedHours?.value.includes(date.getHours())
+  } else if (precision.value !== "week" && precision.value !== "month") {
+    if (highlightedDaysOfWeek?.value.includes(date.getDay())) {
+      return true
+    }
+    if (highlightedDates?.value.includes(date.getDate())) {
+      return true
+    }
+    if (props.highlightedUnits?.includes(date.getHours())) {
+      return true
+    }
+  }
+
+  return false
+}
 </script>
 
 <style>

From 5f758fe49cbb070be9c3e5e2af9ef99b726d4745 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:37:31 +0000
Subject: [PATCH 09/17] Fix #123

---
 docs/common-use-cases.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/common-use-cases.md b/docs/common-use-cases.md
index b187a14f..fbebff46 100644
--- a/docs/common-use-cases.md
+++ b/docs/common-use-cases.md
@@ -125,7 +125,7 @@ const onDrop = (e: MouseEvent, datetime?: string) => {
 If the time-range (`chart-start` to `chart-end`) of your chart is very large, the displayed time units in the time axis might be too dense if the chart is not wide enough. You might want to specify the precision of the time axis accordingly. Use the `precision` prop of `g-gantt-chart` for this. Possible values are `hour`, `day`, `week` and `month`.
 
 ## Chart themes
-Vue Ganttastic ships with several pre-made color schemes that you may specify using the `color-scheme` prop of `g-gantt-chart`. [List of available color-schemes](https://infectoone.github.io/vue-ganttastic/GGanttChart.html#color-schemes)
+Vue Ganttastic ships with several pre-made color schemes that you may specify using the `color-scheme` prop of `g-gantt-chart`. [List of available color-schemes](https://zunnzunn.github.io/vue-ganttastic/GGanttChart.html#color-schemes)
 
 ## Locale
 Since Vue Ganttastic uses Day.js for all datetime manipulations, you can change the locale of Vue Ganttastic by [changing the global locale of Day.js](https://day.js.org/docs/en/i18n/changing-locale). You will usually do this in your `src/main.js` before you initialize the Ganttastic plugin.

From 647ad0c918efd1621ebe6325a15ec9ab8732ab09 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:44:39 +0000
Subject: [PATCH 10/17] [feat] fix #89

new prop `disableDragging` to disable bar dragging at the chart level.
---
 docs/GGanttChart.md              | 1 +
 src/components/GGanttChart.vue   | 4 +++-
 src/composables/createBarDrag.ts | 6 +++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index add524e3..27554e04 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -29,6 +29,7 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long`
 | `locale` | string? | `en-GB` | Used when getting the day name only.
 | `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
+| `disableDragging` | boolean? | `false` | Disable dragging for all bars in the chart.
 
 
 ## Custom Events
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index 7cf6cadd..1bcbc93a 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -107,6 +107,7 @@ export interface GGanttChartProps {
   dayNameLength?: "short" | "long"
   locale?: string
   allowRightClickDragging?: boolean
+  disableDragging?: boolean
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
@@ -138,7 +139,8 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   showDayName: true,
   dayNameLength: "short",
   locale: "en-GB",
-  allowRightClickDragging: false
+  allowRightClickDragging: false,
+  disableDragging: false
 })
 
 const emit = defineEmits<{
diff --git a/src/composables/createBarDrag.ts b/src/composables/createBarDrag.ts
index 54b76ea6..941c6175 100644
--- a/src/composables/createBarDrag.ts
+++ b/src/composables/createBarDrag.ts
@@ -12,7 +12,7 @@ export default function createBarDrag(
   onEndDrag: (e: MouseEvent, bar: GanttBarObject) => void = () => null,
   config: GGanttChartConfig = provideConfig()
 ) {
-  const { barStart, barEnd, pushOnOverlap, allowRightClickDragging } = config
+  const { barStart, barEnd, pushOnOverlap, allowRightClickDragging, disableDragging } = config
 
   const isDragging = ref(false)
   let cursorOffsetX = 0
@@ -22,6 +22,10 @@ export default function createBarDrag(
   const { toDayjs } = useDayjsHelper(config)
 
   const initDrag = (e: MouseEvent) => {
+    if (disableDragging.value) {
+      return
+    }
+
     if (!allowRightClickDragging.value && e.buttons === 2) {
       // Do not allow dragging when right-clicking
       return

From d33b236895cf44f3607df84ca299ba6d670a1070 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:09:13 +0000
Subject: [PATCH 11/17] [feat] disable dragging at row level

fixes #89

Adds new prop to GGanttRow to disable dragging on whole rows. (Note that bundles will still cause dragging, but that still happens even if you manually set the config flag as well.)
---
 src/components/GGanttRow.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/GGanttRow.vue b/src/components/GGanttRow.vue
index 6bfcda13..19969a32 100644
--- a/src/components/GGanttRow.vue
+++ b/src/components/GGanttRow.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref, toRefs, computed, type StyleValue, provide } from "vue"
+import { ref, type Ref, toRefs, computed, type StyleValue, provide, onMounted } from "vue"
 
 import useTimePositionMapping from "../composables/useTimePositionMapping.js"
 import provideConfig from "../provider/provideConfig.js"
@@ -40,12 +40,25 @@ const props = defineProps<{
   label: string
   bars: GanttBarObject[]
   highlightOnHover?: boolean
+  disableDragging?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: "drop", value: { e: MouseEvent; datetime: string | Date }): void
 }>()
 
+const setImmobileFlags = () => {
+  for (const bar of props.bars) {
+    if (!Object.prototype.hasOwnProperty.call(bar.ganttBarConfig, "immobile")) {
+      bar.ganttBarConfig.immobile = props.disableDragging
+    } else {
+      // if disableDragging is set to true, then override immobile flag
+      // if it isn't, then leave it as is
+      bar.ganttBarConfig.immobile = props.disableDragging || bar.ganttBarConfig.immobile
+    }
+  }
+}
+
 const { rowHeight, colors, labelColumnTitle } = provideConfig()
 const { highlightOnHover } = toRefs(props)
 const isHovering = ref(false)
@@ -74,9 +87,12 @@ const onDrop = (e: MouseEvent) => {
 }
 
 const isBlank = (str: string) => {
-  return (!str || /^\s*$/.test(str))
+  return !str || /^\s*$/.test(str)
 }
 
+onMounted(() => {
+  setImmobileFlags()
+})
 </script>
 
 <style>

From abf4cfe500676f686ac798e6760485f3c6f17dc2 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:15:44 +0000
Subject: [PATCH 12/17] Update GGanttRow.md

---
 docs/GGanttRow.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/GGanttRow.md b/docs/GGanttRow.md
index b9bcbb82..796db9b0 100644
--- a/docs/GGanttRow.md
+++ b/docs/GGanttRow.md
@@ -7,6 +7,7 @@ Represents a single row of the chart. It is meant to be a child component of `g-
 | `label`     |`string?`| `""`    | Text that is floating in the upper left corner of the row.
 | `bars`      |`GanttBarObject[]`|  | Array of objects, each representing a bar in this row. Any JavaScript/TypeScript object with a nested `ganttBarConfig` object with a unique `id` string property is compatible. The objects must also contain two properties which represent the start and end datetime of the bar. The names of those properties must be passed  to the `bar-start` and `bar-end` props of the `g-gantt-chart` parent.
 | `highlight-on-hover` | `boolean?` | `false` | Used for toggling a background color transition effect on mouse hover.
+| `disableDragging` | `boolean?` | `false` | Used to disable dragging on a per-row basis. You can still disable dragging on a per-bar basis by setting `immobile` in the `GanttBarConfig` object of your bar object. Note that bar bundles ignore the immobile flag. If you drag an immobile bar in a bundle, the dragging will be prevented. If you drag a mobile bar in the same bundle, the immobile bars will also move. You can disable dragging entirely by setting `disableDragging` at the Chart level.
   
 ## Custom Events
 | Event name                 | Event data                                                 |

From 41ee511e66dbebe31c1dfeee76e5fd05c1532911 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Thu, 5 Dec 2024 09:17:36 +0000
Subject: [PATCH 13/17] Update Docs

Update docs to notify user that grid prop must be used in order for highlighting props to have any effect.
---
 docs/GGanttChart.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 27554e04..32a2ae0b 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -18,10 +18,10 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `push-on-overlap` | boolean? | `false` | Specifies whether bars "push one another" when dragging and overlaping.
 | `no-overlap` | boolean? |  `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
 | `row-height` | number? | `40` | Height of each row in pixels.
-| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color.
-| `highlighted-days-of-week` | number[]? | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`
-| `highlighted-dates` | number[]? | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`.
-| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted.  
+| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color. Make sure to also use the `grid` prop on the chart.
+| `highlighted-days-of-week` | number[]? | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`. Make sure to also use the `grid` prop on the chart.
+| `highlighted-dates` | number[]? | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`. Make sure to also use the `grid` prop on the chart.
+| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
 | `font` | string | `"Helvetica"`| Font family of the chart.
 | `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)

From 1b647fac15239eca18e2f274cbea6381dfc4b7a1 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:20:33 +0000
Subject: [PATCH 14/17] [feat] add click event for row labels

New feature to add click events for row labels which will close #116.
Also adds new id prop for rows as that will be returned via the click event along with the label itself.
---
 docs/GGanttRow.md            |  2 ++
 src/GanttPlayground.vue      |  6 ++++++
 src/components/GGanttRow.vue | 10 +++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/docs/GGanttRow.md b/docs/GGanttRow.md
index 796db9b0..0c014a5a 100644
--- a/docs/GGanttRow.md
+++ b/docs/GGanttRow.md
@@ -4,6 +4,7 @@ Represents a single row of the chart. It is meant to be a child component of `g-
 ## Props
 | Prop        | Type    | Default | Description                  |
 |-------------|---------|---------|------------------------------|
+| `id`        | `string, number` | | Used in the `click-label` event. 
 | `label`     |`string?`| `""`    | Text that is floating in the upper left corner of the row.
 | `bars`      |`GanttBarObject[]`|  | Array of objects, each representing a bar in this row. Any JavaScript/TypeScript object with a nested `ganttBarConfig` object with a unique `id` string property is compatible. The objects must also contain two properties which represent the start and end datetime of the bar. The names of those properties must be passed  to the `bar-start` and `bar-end` props of the `g-gantt-chart` parent.
 | `highlight-on-hover` | `boolean?` | `false` | Used for toggling a background color transition effect on mouse hover.
@@ -13,6 +14,7 @@ Represents a single row of the chart. It is meant to be a child component of `g-
 | Event name                 | Event data                                                 |
 |----------------------------|------------------------------------------------------------|
 | `drop`                     | `{ e: MouseEvent, datetime: string}`                       |
+| `click-label` | `{ e: MouseEvent, label: string, id?: string | number }` |
 
 
 ## Slots
diff --git a/src/GanttPlayground.vue b/src/GanttPlayground.vue
index 6502ef70..d8ca73c2 100644
--- a/src/GanttPlayground.vue
+++ b/src/GanttPlayground.vue
@@ -27,9 +27,11 @@
     <g-gantt-row label="My another new row to test" highlight-on-hover :bars="bars2" />
     <g-gantt-row label="just another row to test gantt" highlight-on-hover :bars="bars3" />
     <g-gantt-row
+      id="some-unique-id"
       label="errors teach us, and debugging makes us stronger!"
       highlight-on-hover
       :bars="bars4"
+      @click-label="onLabelClick"
     />
   </g-gantt-chart>
 
@@ -48,6 +50,10 @@ const chartEnd = ref(
   dayjs(chartStart.value, format.value).add(3, "days").hour(12).format(format.value)
 )
 
+const onLabelClick = (e: MouseEvent) => {
+  console.log("click-label", e)
+}
+
 const bars1 = ref<GanttBarObject[]>([
   {
     beginDate: dayjs().hour(13).startOf("hour").format(format.value),
diff --git a/src/components/GGanttRow.vue b/src/components/GGanttRow.vue
index 19969a32..780abd63 100644
--- a/src/components/GGanttRow.vue
+++ b/src/components/GGanttRow.vue
@@ -14,7 +14,9 @@
       :style="{ background: colors.primary, color: colors.text }"
     >
       <slot name="label">
-        {{ label }}
+        <span @click="onLabelClick">
+          {{ label }}
+        </span>
       </slot>
     </div>
     <div ref="barContainer" class="g-gantt-row-bars-container" v-bind="$attrs">
@@ -41,10 +43,12 @@ const props = defineProps<{
   bars: GanttBarObject[]
   highlightOnHover?: boolean
   disableDragging?: boolean
+  id?: string | number
 }>()
 
 const emit = defineEmits<{
   (e: "drop", value: { e: MouseEvent; datetime: string | Date }): void
+  (e: "click-label", value: { e: MouseEvent; label: string; id?: string | number }): void
 }>()
 
 const setImmobileFlags = () => {
@@ -86,6 +90,10 @@ const onDrop = (e: MouseEvent) => {
   emit("drop", { e, datetime })
 }
 
+const onLabelClick = (e: MouseEvent) => {
+  emit("click-label", { e, label: props.label, id: props.id })
+}
+
 const isBlank = (str: string) => {
   return !str || /^\s*$/.test(str)
 }

From ffc8477cd06e21d969e075674db731ec1afd2f06 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:45:22 +0000
Subject: [PATCH 15/17] [feat] Adds optional title and subtitle to bar tooltips

Reworking of prior work to make it more sensible.

- Adds new prop `showLabelAsTooltipTitle` on GGanttChart. Deafult `true`. Shows the bar item's label as a title (followed by a line break) to the tooltip. Make sure to sanitize label.
- Adds new `subtitle` field to `ganttBarConfig` type. If provided, value will be appended to the end of the tooltip. Make sure to sanitize the value.
---
 docs/GGanttChart.md                 |  1 +
 src/GanttPlayground.vue             |  1 +
 src/components/GGanttBarTooltip.vue |  9 +++++++--
 src/components/GGanttChart.vue      | 10 ++++++++--
 src/types.ts                        |  1 +
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 32a2ae0b..c1d5a251 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -30,6 +30,7 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `locale` | string? | `en-GB` | Used when getting the day name only.
 | `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
 | `disableDragging` | boolean? | `false` | Disable dragging for all bars in the chart.
+| `showLabelAsTooltipTitle` | boolean? | `true` | Toggles showing each bar item's label as the title in the hover tooltip. Make sure to sanitize your labels.
 
 
 ## Custom Events
diff --git a/src/GanttPlayground.vue b/src/GanttPlayground.vue
index d8ca73c2..58b52e85 100644
--- a/src/GanttPlayground.vue
+++ b/src/GanttPlayground.vue
@@ -97,6 +97,7 @@ const bars2 = ref([
     ganttBarConfig: {
       id: "9716981641",
       label: "Oh hey",
+      subtitle: "I'm a subtitle",
       style: {
         background: "#69e064",
         borderRadius: "15px",
diff --git a/src/components/GGanttBarTooltip.vue b/src/components/GGanttBarTooltip.vue
index de5e8e38..9a6dfb27 100644
--- a/src/components/GGanttBarTooltip.vue
+++ b/src/components/GGanttBarTooltip.vue
@@ -12,7 +12,7 @@
       >
         <div class="g-gantt-tooltip-color-dot" :style="{ background: dotColor }" />
         <slot :bar="bar" :bar-start="barStartRaw" :bar-end="barEndRaw">
-          {{ tooltipContent }}
+          <span v-html="tooltipContent"></span>
         </slot>
       </div>
     </transition>
@@ -40,6 +40,7 @@ const DEFAULT_DOT_COLOR = "cadetblue"
 const props = defineProps<{
   bar: GanttBarObject | undefined
   modelValue: boolean
+  tooltipTitle?: boolean
 }>()
 
 const { bar } = toRefs(props)
@@ -85,7 +86,11 @@ const tooltipContent = computed(() => {
   const format = TOOLTIP_FORMATS[precision.value]
   const barStartFormatted = toDayjs(barStartRaw.value).format(format)
   const barEndFormatted = toDayjs(barEndRaw.value).format(format)
-  return `${barStartFormatted} \u2013 ${barEndFormatted}`
+  const title = props.tooltipTitle ? `${props?.bar?.ganttBarConfig.label} <br />` : ""
+  const subtitle = props?.bar?.ganttBarConfig.subtitle
+    ? `<br />${props.bar.ganttBarConfig.subtitle}`
+    : ""
+  return `${title}${barStartFormatted} \u2013 ${barEndFormatted}${subtitle}`
 })
 </script>
 
diff --git a/src/components/GGanttChart.vue b/src/components/GGanttChart.vue
index cdeb0dbc..7502fcef 100644
--- a/src/components/GGanttChart.vue
+++ b/src/components/GGanttChart.vue
@@ -41,7 +41,11 @@
         </div>
       </div>
     </div>
-    <g-gantt-bar-tooltip :model-value="showTooltip || isDragging" :bar="tooltipBar">
+    <g-gantt-bar-tooltip
+      :model-value="showTooltip || isDragging"
+      :bar="tooltipBar"
+      :tooltipTitle="showLabelAsTooltipTitle"
+    >
       <template #default>
         <slot name="bar-tooltip" :bar="tooltipBar" />
       </template>
@@ -109,6 +113,7 @@ export interface GGanttChartProps {
   locale?: string
   allowRightClickDragging?: boolean
   disableDragging?: boolean
+  showLabelAsTooltipTitle?: boolean
 }
 
 export type GGanttChartConfig = ToRefs<Required<GGanttChartProps>> & {
@@ -141,7 +146,8 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   dayNameLength: "short",
   locale: "en-GB",
   allowRightClickDragging: false,
-  disableDragging: false
+  disableDragging: false,
+  showLabelAsTooltipTitle: true
 })
 
 const emit = defineEmits<{
diff --git a/src/types.ts b/src/types.ts
index 25671b35..5771a89f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,6 +6,7 @@ export type GanttBarObject = {
   ganttBarConfig: {
     id: string
     label?: string
+    subtitle?: string
     html?: string
     hasHandles?: boolean
     immobile?: boolean

From b7ddb0d1c4cf97e91643f52b3bb5b37116f18ff0 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:47:08 +0000
Subject: [PATCH 16/17] Update docs

---
 docs/GGanttChart.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index c1d5a251..86659087 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -19,9 +19,9 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `no-overlap` | boolean? |  `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
 | `row-height` | number? | `40` | Height of each row in pixels.
 | `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color. Make sure to also use the `grid` prop on the chart.
-| `highlighted-days-of-week` | number[]? | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`. Make sure to also use the `grid` prop on the chart.
-| `highlighted-dates` | number[]? | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`. Make sure to also use the `grid` prop on the chart.
-| `highlighted-hours` | number[]? | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
+| `highlighted-days-of-week` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`. Make sure to also use the `grid` prop on the chart.
+| `highlighted-dates` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`. Make sure to also use the `grid` prop on the chart.
+| `highlighted-hours` | number[]? | `[]` | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
 | `font` | string | `"Helvetica"`| Font family of the chart.
 | `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
 | `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)

From 455705d09cfa23d450ac622d3728a97376b99f90 Mon Sep 17 00:00:00 2001
From: albadedan <115635421+albadedan@users.noreply.github.com>
Date: Thu, 12 Dec 2024 11:15:00 +0000
Subject: [PATCH 17/17] Update Docs, Add new.

Added new doc for ganttBarConfig Object.
Updated docs.
Updated example.
---
 docs/GGanttChart.md     | 50 ++++++++++++++++++++---------------------
 docs/GGanttRow.md       |  6 ++---
 docs/ganttBarConfig.md  | 20 +++++++++++++++++
 docs/getting-started.md |  2 +-
 src/GanttPlayground.vue |  2 ++
 5 files changed, 51 insertions(+), 29 deletions(-)
 create mode 100644 docs/ganttBarConfig.md

diff --git a/docs/GGanttChart.md b/docs/GGanttChart.md
index 86659087..4ee361e9 100644
--- a/docs/GGanttChart.md
+++ b/docs/GGanttChart.md
@@ -6,31 +6,31 @@ The main component of Vue Ganttastic. Represents an entire chart and is meant to
 | `chart-start` | string | | Start date-time of the chart.
 | `chart-end` | string  | | End date-time of the chart.
 | `precision` | string? | `"hour"` | Display precision of the time-axis. Possible values: `hour`, `day`, `date`, `week` and `month`. |
-| `bar-start` | string | | Name of the property in bar objects that represents the start date.
-| `bar-end` | string  | | Name of the property in bar objects that represents the end date .
-| `date-format` | string \| false  | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`.
-| `width` | string? | `"100%"` | Width of the chart (e.g. `80%` or `800px`)
-| `hide-timeaxis` | boolean? | `false` | Toggle visibility of the time axis.
-| `color-scheme` | string \| ColorScheme | `"default"` | Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes).
-| `grid` | string? | `false` | Toggle visibility of background grid.
-| `current-time` | boolean? | `false` | Toggle visibility of current time marker.
-| `current-time-label` | string? | `''` | Text to be displayed next to the current time marker.
-| `push-on-overlap` | boolean? | `false` | Specifies whether bars "push one another" when dragging and overlaping.
-| `no-overlap` | boolean? |  `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position.
-| `row-height` | number? | `40` | Height of each row in pixels.
-| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color. Make sure to also use the `grid` prop on the chart.
-| `highlighted-days-of-week` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`. Make sure to also use the `grid` prop on the chart.
-| `highlighted-dates` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`. Make sure to also use the `grid` prop on the chart.
-| `highlighted-hours` | number[]? | `[]` | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart.
-| `font` | string | `"Helvetica"`| Font family of the chart.
-| `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header.
-| `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified)
-| `showDayName` | boolean? | `true` | Adds the Day name to the timeunit axis when in `day` or `date` mode
-| `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long`
-| `locale` | string? | `en-GB` | Used when getting the day name only.
-| `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements.
-| `disableDragging` | boolean? | `false` | Disable dragging for all bars in the chart.
-| `showLabelAsTooltipTitle` | boolean? | `true` | Toggles showing each bar item's label as the title in the hover tooltip. Make sure to sanitize your labels.
+| `bar-start` | string | | Name of the property in bar objects that represents the start date. |
+| `bar-end` | string  | | Name of the property in bar objects that represents the end date . |
+| `date-format` | string \| false  | `"YYYY-MM-DD HH:mm"` | Datetime string format of `chart-start`, `chart-end` and the values of the `bar-start`, `bar-end` properties in bar objects. See [Day.js format tokens](https://day.js.org/docs/en/parse/string-format). If the aforementioned properties are native JavaScript [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) objects in your use case, pass `false`. |
+| `width` | string? | `"100%"` | Width of the chart (e.g. `80%` or `800px`) |
+| `hide-timeaxis` | boolean? | `false` | Toggle visibility of the time axis. |
+| `color-scheme` | string \| ColorScheme | `"default"` | Color scheme (theme) of the chart. Either use the name of one of the predefined schemes or pass a color-scheme-object of your own. See [color schemes](#color-schemes). |
+| `grid` | string? | `false` | Toggle visibility of background grid. |
+| `current-time` | boolean? | `false` | Toggle visibility of current time marker. |
+| `current-time-label` | string? | `''` | Text to be displayed next to the current time marker. |
+| `push-on-overlap` | boolean? | `false` | Specifies whether bars "push one another" when dragging and overlaping. |
+| `no-overlap` | boolean? |  `false` | If `push-on-overlap` is `false`, toggle this to prevent overlaps after drag by snapping the dragged bar back to its original position. |
+| `row-height` | number? | `40` | Height of each row in pixels. |
+| `highlighted-units` | number[]? | `[]` | The time units specified here will be visually highlighted in the chart with a mild opaque color. Make sure to also use the `grid` prop on the chart. |
+| `highlighted-days-of-week` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the days of the week that should be highlighted. Sunday = 0. So to highlight weekends, use `[0, 6]`. Can be combined with `highlighted-dates`. Make sure to also use the `grid` prop on the chart. |
+| `highlighted-dates` | number[]? | `[]` | When using `precision = day` or `date`, set this array to the dates that should be highlighted. e.g. `[1, 15, 23]` to highlight the 1st, 15th and 23rd. Can be combined with `highlighted-days-of-week`. Make sure to also use the `grid` prop on the chart. |
+| `highlighted-hours` | number[]? | `[]` | When using `precision = hour` set this array to the hours that should be highlighted. Make sure to also use the `grid` prop on the chart. |
+| `font` | string | `"Helvetica"`| Font family of the chart. |
+| `label-column-title` | string? | `''` | If specified, a dedicated column for the row labels will be rendered on the left side of the graph. The specified title is displayed in the upper left corner, as the column's header. |
+| `label-column-width` | string? | `150px` | Width of the column containing the row labels (if `label-column-title` specified) |
+| `showDayName` | boolean? | `true` | Adds the Day name to the timeunit axis when in `day` or `date` mode |
+| `dayNameLength` | string? | `short` | Sets whether the day name is short or long eg. 'Fri' or 'Friday'. Possible values: `short`, `long` |
+| `locale` | string? | `en-GB` | Used when getting the day name only. |
+| `allowRightClickDragging` | boolean? | `false` | Enable or disable the ability to drag bars when right-clicking a bar. Useful if you want to use the context menu and prevent accidental bar movements. |
+| `disableDragging` | boolean? | `false` | Disable dragging for all bars in the chart. |
+| `showLabelAsTooltipTitle` | boolean? | `true` | Toggles showing each bar item's label as the title in the hover tooltip. Make sure to sanitize your labels. |
 
 
 ## Custom Events
diff --git a/docs/GGanttRow.md b/docs/GGanttRow.md
index 0c014a5a..73858c11 100644
--- a/docs/GGanttRow.md
+++ b/docs/GGanttRow.md
@@ -6,9 +6,9 @@ Represents a single row of the chart. It is meant to be a child component of `g-
 |-------------|---------|---------|------------------------------|
 | `id`        | `string, number` | | Used in the `click-label` event. 
 | `label`     |`string?`| `""`    | Text that is floating in the upper left corner of the row.
-| `bars`      |`GanttBarObject[]`|  | Array of objects, each representing a bar in this row. Any JavaScript/TypeScript object with a nested `ganttBarConfig` object with a unique `id` string property is compatible. The objects must also contain two properties which represent the start and end datetime of the bar. The names of those properties must be passed  to the `bar-start` and `bar-end` props of the `g-gantt-chart` parent.
-| `highlight-on-hover` | `boolean?` | `false` | Used for toggling a background color transition effect on mouse hover.
-| `disableDragging` | `boolean?` | `false` | Used to disable dragging on a per-row basis. You can still disable dragging on a per-bar basis by setting `immobile` in the `GanttBarConfig` object of your bar object. Note that bar bundles ignore the immobile flag. If you drag an immobile bar in a bundle, the dragging will be prevented. If you drag a mobile bar in the same bundle, the immobile bars will also move. You can disable dragging entirely by setting `disableDragging` at the Chart level.
+| `bars`      |`GanttBarObject[]`|  | Array of objects, each representing a bar in this row. Any JavaScript/TypeScript object with a nested `ganttBarConfig` object with a unique `id` string property is compatible. The objects must also contain two properties which represent the start and end datetime of the bar. The names of those properties must be passed  to the `bar-start` and `bar-end` props of the `g-gantt-chart` parent. |
+| `highlight-on-hover` | `boolean?` | `false` | Used for toggling a background color transition effect on mouse hover. |
+| `disableDragging` | `boolean?` | `false` | Used to disable dragging on a per-row basis. You can still disable dragging on a per-bar basis by setting `immobile` in the `GanttBarConfig` object of your bar object. Note that bar bundles ignore the immobile flag. If you drag an immobile bar in a bundle, the dragging will be prevented. If you drag a mobile bar in the same bundle, the immobile bars will also move. You can disable dragging entirely by setting `disableDragging` at the Chart level. |
   
 ## Custom Events
 | Event name                 | Event data                                                 |
diff --git a/docs/ganttBarConfig.md b/docs/ganttBarConfig.md
new file mode 100644
index 00000000..b27f7b2f
--- /dev/null
+++ b/docs/ganttBarConfig.md
@@ -0,0 +1,20 @@
+# ganttBarConfig type
+The ganttBarConfig object allows customization of the bar objects and how they behave.
+
+You can add new properties as you wish, but the following properties already exist, and will change how your bars behave.
+
+## Properties
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `id` | string | An identifier for the bar |
+| `label` | string? | The label for the bar. Can also be shown in the bar's tooltip if you set the `showLabelAsTooltipTitle` prop on the GGanttChart. Make sure to sanitize the value. |
+| `subtitle` | string? | If set, this will be appended to the tooltip. Make sure to sanitize the value. |
+| `html` | string? | Will render HTML immediately next to the label. Make sure to sanitize the value. |
+| `hasHandles` | boolean? | Toggles the bars drag handles allowing user to adjust start and end times independently. |
+| `immobile` | boolean? | Toggle an individual bar's ability to be dragged. Note that if an immobile bar is in a bundle with a mobile bar, dragging the mobile bar will also move the immobile bar. Immobile disables direct user interaction. |
+| `bundle` | string? | Group bars together such that dragging any bar in the same bundle will also move all other bars in that bundle. |
+| `pushOnOverlap` | boolean? | Prevents bars from overlapping each other by pushing other bars that would overlap out of the way. |
+| `dragLimitLeft` | number? | |
+| `dragLimitRight` | number? | |
+| `style` | Object<CSSProperties> | The style for each bar. |
+| `class` | string? | The class to be applied to each bar. |
\ No newline at end of file
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 96dd419d..08668e1c 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -73,7 +73,7 @@ const row2BarList = ref([
 </script>
 ```
 
-The result shoud look like this:  
+The result should look like this:  
 <g-gantt-chart chart-start="2021-07-12 12:00" chart-end="2021-07-14 12:00" precision="hour" width="100%" bar-start="myBeginDate" bar-end="myEndDate"> <g-gantt-row label="My row 1" :bars="row1BarList"/>
 <g-gantt-row label="My row 2" :bars="row2BarList"/>
 </g-gantt-chart>
diff --git a/src/GanttPlayground.vue b/src/GanttPlayground.vue
index 58b52e85..084eb326 100644
--- a/src/GanttPlayground.vue
+++ b/src/GanttPlayground.vue
@@ -98,6 +98,8 @@ const bars2 = ref([
       id: "9716981641",
       label: "Oh hey",
       subtitle: "I'm a subtitle",
+      html: "<strong>HTML</strong> content",
+      hasHandles: true,
       style: {
         background: "#69e064",
         borderRadius: "15px",