Merge branch 'release/1.3.0'

docs/.vitepress/theme/components/OtherGanttDemo.vue

@@ -35,6 +35,7 @@ const rows = ref([
           id: 'fe2',
           label: 'Auth Module',
           style: { background: '#4ECDC4' },
+          milestoneId: '1111',
           connections: [
             { 
               targetId: 'fe3',
@@ -227,6 +228,21 @@ const rows = ref([
   }
 ])
 
+const milestones = ref([
+  {
+    id: '1111',
+    date: '2024-12-10 20:00',
+    name: 'Project Launch',
+    description: 'Official launch of the new platform',
+  },
+  {
+    id: '1112',
+    date: '2024-12-12',
+    name: 'Year End Review',
+    description: 'Final review of project milestones',
+  },
+])
+
 onMounted(() => {
   isLibraryReady.value = true
 })
@@ -247,6 +263,8 @@ onMounted(() => {
         :enable-connections="true"
         grid
         label-column-title="Rows"
+        :dayOptionLabel="['day','name','doy']"
+        :milestones="milestones"
       >
         <g-gantt-row
           v-for="row in rows"

docs/.vitepress/theme/index.ts

@@ -2,15 +2,21 @@ import DefaultTheme from 'vitepress/theme'
 import { defineClientComponent } from 'vitepress'
 import './custom.css'
 import dayjs from "dayjs"
+import isoWeek from "dayjs/plugin/isoWeek"
 import isSameOrBefore from "dayjs/plugin/isSameOrBefore.js"
 import isSameOrAfter from "dayjs/plugin/isSameOrAfter.js"
 import isBetween from "dayjs/plugin/isBetween.js"
+import weekOfYear from "dayjs/plugin/weekOfYear"
+import dayOfYear from "dayjs/plugin/dayOfYear.js"
 
 
 export function extendDayjs() {
   dayjs.extend(isSameOrBefore)
   dayjs.extend(isSameOrAfter)
   dayjs.extend(isBetween)
+  dayjs.extend(weekOfYear)
+  dayjs.extend(isoWeek)
+  dayjs.extend(dayOfYear)
 }
 
 const GanttDemo = defineClientComponent(() => {

docs/api/color-schemes.md

@@ -17,6 +17,7 @@ type ColorScheme = {
   toast?: Color;
   commands?: Color;
   rangeHighlight?: Color;
+  holidayHighlight?: Color;
 };
 
 const availableSchemes = {
@@ -28,7 +29,10 @@ const availableSchemes = {
     hoverHighlight: 'rgba(204, 216, 219, 0.5)',
     markerCurrentTime: '#000',
     text: '#404040',
-    background: 'white'
+    background: 'white',
+    commands: "#eeeeee",
+    rangeHighlight: "#000",
+    holidayHighlight: "rgba(240, 120, 96, 0.8)"
   },
   vue: {
     primary: '#258a5d',
@@ -38,7 +42,10 @@ const availableSchemes = {
     hoverHighlight: 'rgba(160, 219, 171, 0.5)',
     markerCurrentTime: '#000',
     text: 'white',
-    background: 'white'
+    background: 'white',
+    commands: "white",
+    rangeHighlight: "#000",
+    holidayHighlight: "#f7842d"
   }
   // Additional schemes available...
 };

docs/api/types.md

@@ -12,6 +12,7 @@ type TimeUnit = 'hour' | 'day' | 'week' | 'month';
 type ConnectionType = 'bezier' | 'straight' | 'squared';
 type ConnectionPattern = 'solid' | 'dot' | 'dash' | 'dashdot';
 type ConnectionSpeed = 'slow' | 'normal' | 'fast';
+type DayOptionLabel = "day" | "doy" | "name" | "number"
 ```
 
 ## Bar Configuration
@@ -41,8 +42,10 @@ interface GanttBarObject {
 
 ```typescript
 interface ChartRow {
-  label: string;
-  bars: GanttBarObject[];
+  id?: string | number
+  label: string
+  bars: GanttBarObject[]
+  _originalNode?: any
 }
 
 interface BarConnection {
@@ -56,6 +59,7 @@ interface BarConnection {
 }
 
 export interface GanttMilestone {
+  id: string
   date: string
   name: string
   description?: string

docs/components/g-gantt-chart.md

@@ -66,6 +66,10 @@ Here's a minimal example of using the GGanttChart component:
 | dateFormat | `string \| false` | `'YYYY-MM-DD HH:mm'` | Format for dates |
 | milestones | `GanttMilestone[]` | `[]` | List of milestone |
 | holidayHighlight| `string` | `` | Country Cody of date-holidays |
+| rowClass| `(row: ChartRow) => string` | `` | Method to add classes to data rows |
+| rowLabelClass| `(row: ChartRow) => string` | `` | Method to add classes to label rows |
+| dayOptionLabel| `DayOptionLabel[]` | `['day']` | Customization for time unit day |
+
 
 ### Events
 
@@ -78,6 +82,8 @@ Here's a minimal example of using the GGanttChart component:
 | dragstart-bar | `{ bar: GanttBarObject, e: MouseEvent }` | Bar drag started |
 | drag-bar | `{ bar: GanttBarObject, e: MouseEvent }` | Bar being dragged |
 | dragend-bar | `{ bar: GanttBarObject, e: MouseEvent, movedBars?: Map }` | Bar drag ended |
+| sort | `{ direction: SortState }` | Sort rows column and direction |
+
 
 ### Slots
 
@@ -86,6 +92,9 @@ Here's a minimal example of using the GGanttChart component:
 | default | None | Main content slot for GGanttRow components |
 | label-column-title | None | Custom label column header |
 | current-time-label | None | Custom current time indicator label |
+| bar-label | `{ bar: GanttBarObject }` | Custom bars label content |
+| milestone | `{ bar: GanttBarObject }` | Custom milestones content |
+| milestone-{milestoneId} | `{ bar: GanttBarObject }` | Custom specific milestone content |
 
 ## Advanced Features
 

docs/components/g-gantt-row.md

@@ -23,6 +23,8 @@ The GGanttRow component represents a single row in the Gantt chart. It manages t
 | label | `string` | Required | Row label |
 | bars | `GanttBarObject[]` | Required | Array of bar objects |
 | highlightOnHover | `boolean` | `false` | Highlight row on hover |
+| id | `string \| number` | `` |Row identifier |
+
 
 ### Events
 
@@ -37,6 +39,38 @@ The GGanttRow component represents a single row in the Gantt chart. It manages t
 | label | None | Custom row label content |
 | bar-label | `{ bar: GanttBarObject }` | Custom bar label content |
 
+### Bar Configuration (ganttBarConfig)
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| id | `string` | Required | Unique identifier for the bar |
+| label | `string` | `undefined` | Label displayed on the bar |
+| html | `string` | `undefined` | Custom HTML content for the bar |
+| hasHandles | `boolean` | `false` | Shows resize handles on the bar |
+| immobile | `boolean` | `false` | When true, bar cannot be moved |
+| bundle | `string` | `undefined` | Identifier to group multiple bars |
+| pushOnOverlap | `boolean` | `undefined` | If true, pushes other bars when overlapping |
+| pushOnConnect | `boolean` | `undefined` | If true, pushes connected bars when moving |
+| dragLimitLeft | `number` | `undefined` | Left limit for dragging |
+| dragLimitRight | `number` | `undefined` | Right limit for dragging |
+| style | `CSSProperties` | `undefined` | Custom CSS styles for the bar |
+| class | `string` | `undefined` | Custom CSS classes for the bar |
+| connections | `GanttBarConnection[]` | `undefined` | Array of connections to other bars |
+| milestoneId | `string` | `undefined` | Identifier of milestone associated with the bar |
+
+### Bar Connection Configuration
+
+The `connections` property in `ganttBarConfig` accepts an array of `GanttBarConnection` objects. Each connection has the following properties:
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| targetId | `string` | Required | ID of the target bar to connect to |
+| type | `'bezier' \| 'straight' \| 'squared'` | `'straight'` | Visual style of the connection line |
+| color | `string` | `'#ff0000'` | Color of the connection line |
+| pattern | `'solid' \| 'dot' \| 'dash' \| 'dashdot'` | `'solid'` | Line pattern style |
+| animated | `boolean` | `false` | Whether the connection should be animated |
+| animationSpeed | `'slow' \| 'normal' \| 'fast'` | `'normal'` | Speed of the connection animation |
+
 # Keyboard Controls
 
 Bars within the row support the following keyboard controls:
@@ -49,6 +83,7 @@ Bars within the row support the following keyboard controls:
 | Down Arrow | Shrink bar | Shrink 12 units |
 
 The actual unit size depends on the chart's precision setting (hours, days, etc.).
+The step increment or shift is greater if Shift is held down 
 
 ## Bar Configuration
 
@@ -63,9 +98,15 @@ interface GanttBarObject {
     html?: string;
     hasHandles?: boolean;
     immobile?: boolean;
+    bundle?: string
+    pushOnOverlap?: boolean
+    pushOnConnect?: boolean
+    dragLimitLeft?: number
+    dragLimitRight?: number
     style?: CSSProperties;
     class?: string;
     connections?: GanttBarConnection[];
+    milestoneName?: string
   }
 }
 ```

docs/guide/chart-configuration.md

@@ -57,6 +57,7 @@ The chart emits various events that you can listen to:
   @dragend-bar="handleDragEnd"
   @mouseenter-bar="handleMouseEnter"
   @mouseleave-bar="handleMouseLeave"
+  @sort="handleSort"
 />
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-vue-gantt",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Evolution of vue-ganttastic package",
   "author": "Eugenio Topa (@Xeyos88)",
   "scripts": {

src/components/GGanttBarTooltip.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 }>()
 
 const { bar } = toRefs(props)
-const { precision, font, barStart, barEnd, rowHeight } = provideConfig()
+const { precision, font, barStart, barEnd, rowHeight, milestones } = provideConfig()
 
 const tooltipTop = ref("0px")
 const tooltipLeft = ref("0px")
@@ -58,10 +58,13 @@ const tooltipContent = computed(() => {
   if (!bar?.value) {
     return ""
   }
+  const milestone = milestones.value.find((m) => m.id === bar.value?.ganttBarConfig.milestoneId)
+
   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 milestoneName = milestone ? ` - (${milestone.name})` : ""
+  return `${barStartFormatted} \u2013 ${barEndFormatted}${milestoneName}`
 })
 </script>
 

src/components/GGanttChart.vue

@@ -21,7 +21,8 @@ import {
   toRefs,
   toRef,
   useSlots,
-  watch
+  watch,
+  h
 } from "vue"
 import { useElementSize } from "@vueuse/core"
 import dayjs from "dayjs"
@@ -33,8 +34,8 @@ import GGanttTimeaxis from "./GGanttTimeaxis.vue"
 import GGanttBarTooltip from "./GGanttBarTooltip.vue"
 import GGanttCurrentTime from "./GGanttCurrentTime.vue"
 import GGanttConnector from "./GGanttConnector.vue"
-import GGanttRow from "./GGanttRow.vue"
 import GGanttMilestone from "./GGanttMilestone.vue"
+import GGanttRow from "./GGanttRow.vue"
 
 // Internal Imports - Composables
 import { useConnections } from "../composables/useConnections"
@@ -50,9 +51,10 @@ import { BOOLEAN_KEY, CONFIG_KEY, EMIT_BAR_EVENT_KEY } from "../provider/symbols
 import type {
   GanttBarObject,
   GGanttChartProps,
-  SortDirection,
+  SortState,
   GGanttTimeaxisInstance,
-  ColorScheme
+  ColorScheme,
+  ChartRow
 } from "../types"
 import type { CSSProperties } from "vue"
 
@@ -88,7 +90,10 @@ const props = withDefaults(defineProps<GGanttChartProps>(), {
   sortable: true,
   labelResizable: true,
   milestones: () => [],
-  holidayHighlight: ""
+  holidayHighlight: "",
+  rowClass: () => "",
+  rowLabelClass: () => "",
+  dayOptionLabel: () => ["day"]
 })
 
 const id = ref(crypto.randomUUID())
@@ -99,15 +104,38 @@ const rowManager = useRows(
   {
     barStart: toRef(props, "barStart"),
     barEnd: toRef(props, "barEnd"),
-    multiColumnLabel: toRef(props, "multiColumnLabel")
+    multiColumnLabel: toRef(props, "multiColumnLabel"),
+    onSort: (sortState) => emit("sort", { sortState })
   },
   props.initialRows ? toRef(props, "initialRows") : undefined
 )
 const rows = computed(() => rowManager.rows.value)
 
+const renderRow = (row: ChartRow) => {
+  if (row._originalNode) {
+    return h(
+      GGanttRow,
+      {
+        ...row._originalNode.props,
+        label: row.label,
+        bars: row.bars,
+        id: row.id,
+        key: row.id || row.label
+      },
+      row._originalNode.children || {}
+    )
+  }
+
+  return h(GGanttRow, {
+    label: row.label,
+    bars: row.bars,
+    id: row.id,
+    key: row.id || row.label
+  })
+}
+
 provide("useRows", rowManager)
 
-// Based on props
 const rowsContainerStyle = computed<CSSProperties>(() => {
   if (props.maxRows === 0) return {}
 
@@ -146,7 +174,7 @@ const emit = defineEmits<{
     e: "contextmenu-bar",
     value: { bar: GanttBarObject; e: MouseEvent; datetime?: string | Date }
   ): void
-  (e: "sort", value: { direction: SortDirection }): void
+  (e: "sort", value: { sortState: SortState }): void
 }>()
 
 // Computed Properties
@@ -449,7 +477,14 @@ provide("id", id)
               v-for="milestone in milestones"
               :key="milestone.date.toString()"
               :milestone="milestone"
-            />
+            >
+              <template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+                <slot
+                  :name="name"
+                  v-bind="slotData"
+                  v-if="(name as string).startsWith('milestone-') || name === 'milestone'"
+                /> </template
+            ></g-gantt-milestone>
 
             <!-- Rows Container -->
             <div
@@ -458,16 +493,9 @@ provide("id", id)
               ref="rowsContainer"
               @scroll="handleContentScroll"
             >
-              <g-gantt-row
-                v-for="row in rows"
-                :key="row.id || row.label"
-                :label="row.label"
-                :bars="row.bars"
-              >
-                <template #bar-label="slotProps">
-                  <slot name="bar-label" v-bind="slotProps" />
-                </template>
-              </g-gantt-row>
+              <template v-for="row in rows" :key="row.id || row.label">
+                <component :is="renderRow(row)" />
+              </template>
               <!-- Connections -->
               <template v-if="enableConnections">
                 <template v-for="conn in connections" :key="`${conn.sourceId}-${conn.targetId}`">