@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/ui/gantt/GanttFeatureItem.vue

@@ -0,0 +1,303 @@
+<template>
+	<div
+		ref="itemRef"
+		data-gantt-feature-item
+		:class="cn('group absolute z-20 flex cursor-move items-center gap-2 rounded-sm px-3 py-1.5', isDragging && 'cursor-grabbing opacity-50', isResizing && 'opacity-50', props.class)"
+		:style="{
+			left: `${leftPosition}px`,
+			width: `${width}px`,
+			top: '50%',
+			transform: 'translateY(-50%)',
+			backgroundColor: props.status?.color || '#3b82f6',
+			color: getContrastColor(props.status?.color || '#3b82f6'),
+			height: `${gantt.rowHeight.value - 12}px`,
+		}"
+		@mousedown="handleMouseDown"
+	>
+		<!-- Left resize handle -->
+		<div class="absolute top-0 left-0 h-full w-2 cursor-ew-resize rounded-l-md opacity-0 group-hover:opacity-100 hover:bg-white/30" @mousedown.stop="handleResizeStart('left', $event)" @mouseenter="showTooltip('start')" @mouseleave="hideTooltip" />
+
+		<!-- Right resize handle -->
+		<div class="absolute top-0 right-0 h-full w-2 cursor-ew-resize rounded-r-md opacity-0 group-hover:opacity-100 hover:bg-white/30" @mousedown.stop="handleResizeStart('right', $event)" @mouseenter="showTooltip('end')" @mouseleave="hideTooltip" />
+
+		<!-- Progress indicator bar -->
+		<div
+			v-if="props.progress !== undefined && props.progress > 0"
+			class="pointer-events-none absolute top-0 left-0 z-0 h-full rounded-sm"
+			:style="{
+				width: `${props.progress}%`,
+				backgroundColor: getProgressColor(props.status?.color || '#3b82f6'),
+			}"
+		/>
+
+		<!-- Slot content with higher z-index to appear above progress indicator -->
+		<div class="relative z-10">
+			<slot />
+		</div>
+
+		<!-- Tooltip -->
+		<div v-if="tooltip.visible" ref="tooltipRef" class="pointer-events-none absolute z-50 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white" :style="tooltipStyle">
+			{{ tooltip.text }}
+		</div>
+
+		<!-- Drag tooltip showing both dates -->
+		<div v-if="isDragging && dragTooltip.visible" class="pointer-events-none absolute z-50 rounded bg-gray-900 px-3 py-2 text-xs whitespace-nowrap text-white" :style="dragTooltipStyle">
+			<div class="flex flex-col gap-1">
+				<div>Start: {{ formatDateTime(props.startAt, 'dd MMM yyyy') }}</div>
+				<div>End: {{ formatDateTime(props.endAt, 'dd MMM yyyy') }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+const props = defineProps({ id: { type: String, required: true }, startAt: { type: Date, required: true }, endAt: { type: Date, required: true }, class: { type: String, required: false }, status: { type: Object, required: false }, progress: { type: Number, required: false } });
+const emit = defineEmits<{
+	move: [id: string, startAt: Date, endAt: Date | null];
+}>();
+
+const gantt = useGantt();
+const isDragging = ref(false);
+const isResizing = ref(false);
+const dragStartX = ref(0);
+const dragStartLeft = ref(0);
+const originalStartAt = ref<Date>(props.startAt);
+const originalEndAt = ref<Date>(props.endAt);
+const resizeType = ref<'left' | 'right' | null>(null);
+const resizeStartX = ref(0);
+const resizeStartWidth = ref(0);
+
+// Tooltip state
+const tooltip = ref({
+	visible: false,
+	text: '',
+	type: 'start' as 'start' | 'end',
+});
+
+// Drag tooltip state
+const dragTooltip = ref({
+	visible: false,
+});
+
+const timelineStartDate = computed(() => {
+	const firstYear = gantt.timelineData.value[0]?.year;
+	return new Date(firstYear || new Date().getFullYear(), 0, 1);
+});
+
+const leftPosition = computed(() => {
+	return getOffset(props.startAt, timelineStartDate.value, {
+		zoom: gantt.zoom.value,
+		range: gantt.range.value,
+		columnWidth: gantt.columnWidth.value,
+	});
+});
+
+const width = computed(() => {
+	if (!props.startAt || !props.endAt) return 0;
+	const days = differenceInDays(props.endAt, props.startAt);
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+
+	// For monthly view, approximate width based on days
+	if (gantt.range.value === 'monthly') {
+		return Math.max((days / 30) * columnWidth, columnWidth / 4);
+	} else if (gantt.range.value === 'weekly') {
+		return Math.max((days / 7) * columnWidth, columnWidth / 4);
+	} else {
+		return Math.max(days * columnWidth, columnWidth / 4);
+	}
+});
+
+const tooltipStyle = computed(() => {
+	if (!tooltip.value.visible) return {};
+
+	const isLeft = tooltip.value.type === 'start';
+	return {
+		left: isLeft ? '0px' : '100%',
+		top: '-35px',
+		transform: isLeft ? 'translateX(0)' : 'translateX(-100%)',
+	};
+});
+
+const dragTooltipStyle = computed(() => {
+	return {
+		left: '50%',
+		top: '-60px',
+		transform: 'translateX(-50%)',
+	};
+});
+
+function getContrastColor(hexColor: string): string {
+	const hex = hexColor.replace('#', '');
+	const r = Number.parseInt(hex.substr(0, 2), 16);
+	const g = Number.parseInt(hex.substr(2, 2), 16);
+	const b = Number.parseInt(hex.substr(4, 2), 16);
+	const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+	return brightness > 128 ? '#000000' : '#ffffff';
+}
+
+function getProgressColor(hexColor: string): string {
+	// Create a darker shade for the progress indicator
+	const hex = hexColor.replace('#', '');
+	const r = Number.parseInt(hex.substr(0, 2), 16);
+	const g = Number.parseInt(hex.substr(2, 2), 16);
+	const b = Number.parseInt(hex.substr(4, 2), 16);
+
+	// Darken by 20%
+	const darken = (value: number) => Math.max(0, Math.floor(value * 0.8));
+
+	const darkenedR = darken(r);
+	const darkenedG = darken(g);
+	const darkenedB = darken(b);
+
+	return `rgb(${darkenedR}, ${darkenedG}, ${darkenedB})`;
+}
+
+function showTooltip(type: 'start' | 'end') {
+	const date = type === 'start' ? props.startAt : props.endAt;
+	const label = type === 'start' ? 'Start' : 'End';
+	tooltip.value = {
+		visible: true,
+		text: `${label}: ${formatDateTime(date, 'dd MMM yyyy')}`,
+		type,
+	};
+}
+
+function hideTooltip() {
+	tooltip.value.visible = false;
+}
+
+function updateTooltipDuringResize() {
+	if (!isResizing.value || !resizeType.value) return;
+
+	const date = resizeType.value === 'left' ? props.startAt : props.endAt;
+	const label = resizeType.value === 'left' ? 'Start' : 'End';
+	tooltip.value.text = `${label}: ${formatDateTime(date, 'dd MMM yyyy')}`;
+}
+
+function handleMouseDown(event: MouseEvent) {
+	event.preventDefault();
+	event.stopPropagation(); // Prevent timeline drag when clicking on bar
+	isDragging.value = true;
+	dragStartX.value = event.clientX;
+	dragStartLeft.value = leftPosition.value;
+	originalStartAt.value = props.startAt;
+	originalEndAt.value = props.endAt;
+
+	// Show drag tooltip
+	dragTooltip.value.visible = true;
+
+	document.addEventListener('mousemove', handleMouseMove);
+	document.addEventListener('mouseup', handleMouseUp);
+}
+
+function handleMouseMove(event: MouseEvent) {
+	if (!isDragging.value) return;
+
+	const deltaX = event.clientX - dragStartX.value;
+	const newLeft = dragStartLeft.value + deltaX;
+
+	// Calculate new dates based on position
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+	let daysOffset = 0;
+
+	if (gantt.range.value === 'monthly') {
+		daysOffset = Math.round(((newLeft - dragStartLeft.value) / columnWidth) * 30);
+	} else if (gantt.range.value === 'weekly') {
+		daysOffset = Math.round(((newLeft - dragStartLeft.value) / columnWidth) * 7);
+	} else {
+		daysOffset = Math.round((newLeft - dragStartLeft.value) / columnWidth);
+	}
+
+	const duration = differenceInDays(originalEndAt.value, originalStartAt.value);
+	const newStartAt = addDays(originalStartAt.value, daysOffset);
+	const newEndAt = addDays(newStartAt, duration);
+
+	// Emit temporary move event for visual feedback
+	emit('move', props.id, newStartAt, newEndAt);
+}
+
+function handleMouseUp() {
+	isDragging.value = false;
+	dragTooltip.value.visible = false;
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+}
+
+function handleResizeStart(type: 'left' | 'right', event: MouseEvent) {
+	event.preventDefault();
+	event.stopPropagation();
+
+	isResizing.value = true;
+	resizeType.value = type;
+	resizeStartX.value = event.clientX;
+	resizeStartWidth.value = width.value;
+
+	// Store the original dates at the start of resize
+	originalStartAt.value = props.startAt;
+	originalEndAt.value = props.endAt;
+
+	// Show tooltip for the resize operation
+	showTooltip(type === 'left' ? 'start' : 'end');
+
+	document.addEventListener('mousemove', handleResizeMove);
+	document.addEventListener('mouseup', handleResizeEnd);
+}
+
+function handleResizeMove(event: MouseEvent) {
+	if (!isResizing.value || !resizeType.value) return;
+
+	const deltaX = event.clientX - resizeStartX.value;
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+
+	let daysOffset = 0;
+	if (gantt.range.value === 'monthly') {
+		daysOffset = Math.round((deltaX / columnWidth) * 30);
+	} else if (gantt.range.value === 'weekly') {
+		daysOffset = Math.round((deltaX / columnWidth) * 7);
+	} else {
+		daysOffset = Math.round(deltaX / columnWidth);
+	}
+
+	let newStartAt = new Date(originalStartAt.value);
+	let newEndAt = new Date(originalEndAt.value);
+
+	if (resizeType.value === 'left') {
+		// Resize from left edge - adjust start date
+		newStartAt = addDays(originalStartAt.value, daysOffset);
+		// Ensure start date doesn't go beyond end date
+		if (newStartAt >= originalEndAt.value) {
+			newStartAt = new Date(originalEndAt.value.getTime() - 24 * 60 * 60 * 1000); // 1 day before end
+		}
+	} else if (resizeType.value === 'right') {
+		// Resize from right edge - adjust end date
+		newEndAt = addDays(originalEndAt.value, daysOffset);
+		// Ensure end date doesn't go before start date
+		if (newEndAt <= originalStartAt.value) {
+			newEndAt = new Date(originalStartAt.value.getTime() + 24 * 60 * 60 * 1000); // 1 day after start
+		}
+	}
+
+	// Emit resize event for visual feedback
+	emit('move', props.id, newStartAt, newEndAt);
+
+	// Update tooltip with new date
+	updateTooltipDuringResize();
+}
+
+function handleResizeEnd() {
+	isResizing.value = false;
+	resizeType.value = null;
+	hideTooltip();
+	document.removeEventListener('mousemove', handleResizeMove);
+	document.removeEventListener('mouseup', handleResizeEnd);
+}
+
+onUnmounted(() => {
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+	document.removeEventListener('mousemove', handleResizeMove);
+	document.removeEventListener('mouseup', handleResizeEnd);
+});
+</script>

package/src/runtime/components/ui/gantt/GanttFeatureList.vue

@@ -0,0 +1,16 @@
+<template>
+	<div :class="cn('flex w-full flex-col', props.class)">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttFeatureListProps {
+	class?: string;
+}
+
+const props = defineProps<GanttFeatureListProps>();
+const gantt = useGantt();
+</script>

package/src/runtime/components/ui/gantt/GanttFeatureListGroup.vue

@@ -0,0 +1,20 @@
+<template>
+	<div :class="cn('border-border border-b', props.class)">
+		<!-- Group Header Row -->
+		<div class="border-border bg-muted/50 flex items-center border-b" :style="{ height: `${gantt.rowHeight.value}px` }" />
+
+		<!-- Group Items -->
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttFeatureListGroupProps {
+	class?: string;
+}
+
+const props = defineProps<GanttFeatureListGroupProps>();
+const gantt = useGantt();
+</script>

package/src/runtime/components/ui/gantt/GanttHeader.vue

@@ -0,0 +1,197 @@
+<template>
+	<div :class="cn('timeline-header sticky top-0 z-30 flex flex-col border-b border-slate-200', props.class)" :style="{ height: `${gantt.headerHeight.value}px` }">
+		<!-- Year Row -->
+		<div class="relative flex h-1/2 items-center border-b border-slate-200">
+			<template v-for="(yearData, yearIndex) in gantt.timelineData.value" :key="`year-${yearData.year}`">
+				<template v-if="shouldShowYear(yearData.year, yearIndex)">
+					<div class="border-border relative flex items-center border-r" :style="{ width: getYearWidth(), minWidth: getYearWidth() }">
+						<!-- Month labels at the 1st of each month -->
+						<template v-for="(quarter, qIndex) in yearData.quarters" :key="`quarter-${yearData.year}-${qIndex}`">
+							<template v-for="(month, mIndex) in quarter.months" :key="`month-${yearData.year}-${qIndex}-${mIndex}`">
+								<template v-if="gantt.range.value === 'daily'">
+									<!-- Show month label at the 1st day of each month -->
+									<div
+										class="text-foreground absolute px-2 text-xs font-medium"
+										:style="{
+											left: `${getMonthStartOffset(yearData.year, qIndex * 3 + mIndex)}px`,
+											zIndex: 20,
+										}"
+									>
+										{{ getMonthName(qIndex * 3 + mIndex) }}
+									</div>
+								</template>
+								<template v-else-if="gantt.range.value === 'weekly'">
+									<!-- Show month label at the 1st week of each month -->
+									<div
+										class="text-foreground absolute px-2 text-xs font-medium"
+										:style="{
+											left: `${getMonthStartOffsetWeekly(yearData.year, qIndex * 3 + mIndex)}px`,
+											zIndex: 20,
+										}"
+									>
+										{{ getMonthName(qIndex * 3 + mIndex) }}
+									</div>
+								</template>
+							</template>
+						</template>
+						<!-- Year label at the end (sticky) - inside year container -->
+						<div
+							class="text-foreground sticky right-0 z-10 ml-auto px-2 text-sm font-medium"
+							:style="{
+								backgroundColor: 'hsl(var(--card) / 0.8)',
+								backdropFilter: 'blur(12px)',
+								WebkitBackdropFilter: 'blur(12px)',
+							}"
+						>
+							{{ yearData.year }}
+						</div>
+					</div>
+				</template>
+			</template>
+		</div>
+
+		<!-- Period Row (Months/Weeks/Days) -->
+		<div class="flex h-1/2 items-center">
+			<template v-for="yearData in gantt.timelineData.value" :key="`periods-${yearData.year}`">
+				<template v-for="(quarter, qIndex) in yearData.quarters" :key="`quarter-${yearData.year}-${qIndex}`">
+					<template v-for="(month, mIndex) in quarter.months" :key="`month-${yearData.year}-${qIndex}-${mIndex}`">
+						<template v-if="gantt.range.value === 'monthly'">
+							<div class="border-border text-muted-foreground flex items-center justify-center border-r px-2 text-xs" :style="{ width: `var(--gantt-column-width)` }">
+								{{ getMonthName(qIndex * 3 + mIndex) }}
+							</div>
+						</template>
+						<template v-else-if="gantt.range.value === 'weekly'">
+							<div
+								v-for="week in getWeeksForMonth(yearData.year, qIndex * 3 + mIndex, month.days)"
+								:key="`week-${yearData.year}-${qIndex}-${mIndex}-${week}`"
+								class="border-border text-muted-foreground flex items-center justify-center border-r px-2 text-xs"
+								:style="{ width: `var(--gantt-column-width)` }"
+							>
+								W{{ week }}
+							</div>
+						</template>
+						<template v-else>
+							<div v-for="day in month.days" :key="`day-${yearData.year}-${qIndex}-${mIndex}-${day}`" class="border-border text-muted-foreground flex items-center justify-center border-r px-2 text-xs" :style="{ width: `var(--gantt-column-width)` }">
+								{{ day }}
+							</div>
+						</template>
+					</template>
+				</template>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttHeaderProps {
+	class?: string;
+}
+
+const props = defineProps<GanttHeaderProps>();
+const gantt = useGantt();
+
+const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function getMonthName(monthIndex: number) {
+	return monthNames[monthIndex];
+}
+
+function getWeeksForMonth(year: number, monthIndex: number, daysInMonth: number) {
+	const startDayOfYear = getDayOfYear(year, monthIndex);
+	const endDayOfYear = startDayOfYear + daysInMonth - 1;
+
+	const startWeek = Math.ceil(startDayOfYear / 7);
+	const endWeek = Math.ceil(endDayOfYear / 7);
+
+	const weeks: number[] = [];
+	for (let i = startWeek; i <= endWeek; i++) {
+		weeks.push(i);
+	}
+	return weeks;
+}
+
+function getYearWidth() {
+	const range = gantt.range.value;
+	let periods = 12; // months by default
+
+	if (range === 'daily') {
+		periods = 365;
+	} else if (range === 'weekly') {
+		periods = 52;
+	}
+
+	return `calc(var(--gantt-column-width) * ${periods})`;
+}
+
+function shouldShowYear(year: number, index: number) {
+	// Always show the first year and any year change
+	if (index === 0) return true;
+	const prevYear = gantt.timelineData.value[index - 1]?.year;
+	return year !== prevYear;
+}
+
+function getDayOfYear(year: number, monthIndex: number): number {
+	// Calculate the day of year for the 1st of the given month
+	const date = new Date(year, monthIndex, 1);
+	const startOfYear = new Date(year, 0, 1);
+	const diffTime = date.getTime() - startOfYear.getTime();
+	const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+	return diffDays + 1;
+}
+
+function getMonthStartOffset(year: number, monthIndex: number): number {
+	// Calculate the pixel offset for the 1st day of the month
+	const dayOfYear = getDayOfYear(year, monthIndex);
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+	return (dayOfYear - 1) * columnWidth;
+}
+
+function getMonthStartWeek(year: number, monthIndex: number): number {
+	// Calculate which week of the year the 1st of the month falls on
+	const date = new Date(year, monthIndex, 1);
+	const startOfYear = new Date(year, 0, 1);
+	const diffTime = date.getTime() - startOfYear.getTime();
+	const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+	return Math.ceil((diffDays + startOfYear.getDay() + 1) / 7);
+}
+
+function getMonthStartOffsetWeekly(year: number, monthIndex: number): number {
+	// Calculate the pixel offset for the 1st week of the month
+	const weekOfYear = getMonthStartWeek(year, monthIndex);
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+	return (weekOfYear - 1) * columnWidth;
+}
+
+function getYearEndPosition(yearIndex: number): number {
+	// Calculate the position at the end of the year (right edge)
+	let offset = 0;
+	const range = gantt.range.value;
+	let periodsPerYear = 12; // months by default
+	if (range === 'daily') {
+		periodsPerYear = 365;
+	} else if (range === 'weekly') {
+		periodsPerYear = 52;
+	}
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+
+	// Calculate cumulative width of all years up to and including this one
+	for (let i = 0; i <= yearIndex; i++) {
+		const yearData = gantt.timelineData.value[i];
+		if (yearData && shouldShowYear(yearData.year, i)) {
+			offset += periodsPerYear * columnWidth;
+		}
+	}
+	return offset;
+}
+</script>
+
+<style scoped>
+.timeline-header {
+	background: hsl(var(--card) / 0.8);
+	backdrop-filter: blur(12px);
+	-webkit-backdrop-filter: blur(12px);
+	border-bottom-color: rgb(226 232 240); /* slate-200 - lighter border */
+}
+</style>

package/src/runtime/components/ui/gantt/GanttMarker.vue

@@ -0,0 +1,133 @@
+<template>
+	<div
+		class="pointer-events-none absolute inset-y-0 left-0 z-40 flex h-full flex-col items-center justify-center overflow-visible select-none"
+		:style="{
+			width: 0,
+			transform: `translateX(calc(var(--gantt-column-width) * ${offset} + ${innerOffset}px))`,
+		}"
+	>
+		<div :class="cn('group pointer-events-auto sticky top-0 flex cursor-move flex-col flex-nowrap items-center justify-center rounded-b-md px-2 py-1 text-xs whitespace-nowrap select-auto', isDragging && 'cursor-grabbing opacity-50', props.className)" @mousedown="handleMouseDown">
+			{{ label }}
+			<span class="max-h-0 overflow-hidden opacity-80 group-hover:max-h-8">
+				{{ formattedDate }}
+			</span>
+			<button v-if="onRemove" type="button" class="mt-1 max-h-0 overflow-hidden text-xs opacity-0 group-hover:max-h-8 group-hover:opacity-100 hover:underline" @click.stop="() => onRemove?.(id)">Remove</button>
+		</div>
+		<div :class="cn('h-full w-px', props.className)" />
+
+		<!-- Drag tooltip -->
+		<div v-if="isDragging && tooltip.visible" class="pointer-events-none absolute z-50 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white" :style="tooltipStyle">
+			{{ tooltip.text }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttMarkerProps {
+	id: string;
+	date: Date;
+	label: string;
+	className?: string;
+	onRemove?: (id: string) => void;
+	onMove?: (id: string, newDate: Date) => void;
+}
+
+const props = defineProps<GanttMarkerProps>();
+const emit = defineEmits<{
+	move: [id: string, newDate: Date];
+}>();
+
+const gantt = useGantt();
+
+// Drag state
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const originalDate = ref<Date>(props.date);
+
+// Tooltip state
+const tooltip = ref({
+	visible: false,
+	text: '',
+});
+
+const timelineStartDate = computed(() => {
+	const firstYear = gantt.timelineData.value[0]?.year;
+	return new Date(firstYear || new Date().getFullYear(), 0, 1);
+});
+
+const differenceIn = computed(() => getDifferenceIn(gantt.range.value));
+
+const offset = computed(() => {
+	return differenceIn.value(props.date, timelineStartDate.value);
+});
+
+const innerOffset = computed(() => {
+	return calculateInnerOffset(props.date, gantt.range.value, (gantt.columnWidth.value * gantt.zoom.value) / 100);
+});
+
+const formattedDate = computed(() => {
+	return formatDateTime(props.date, 'dd MMM yyyy');
+});
+
+const tooltipStyle = computed(() => {
+	return {
+		top: '-35px',
+		left: '50%',
+		transform: 'translateX(-50%)',
+	};
+});
+
+function handleMouseDown(event: MouseEvent) {
+	event.preventDefault();
+	isDragging.value = true;
+	dragStartX.value = event.clientX;
+	originalDate.value = props.date;
+
+	// Show tooltip
+	tooltip.value.visible = true;
+	tooltip.value.text = formatDateTime(props.date, 'dd MMM yyyy');
+
+	document.addEventListener('mousemove', handleMouseMove);
+	document.addEventListener('mouseup', handleMouseUp);
+}
+
+function handleMouseMove(event: MouseEvent) {
+	if (!isDragging.value) return;
+
+	const deltaX = event.clientX - dragStartX.value;
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+
+	// Calculate new date based on movement - always move by days like bars
+	let daysOffset = 0;
+
+	if (gantt.range.value === 'monthly') {
+		daysOffset = Math.round((deltaX / columnWidth) * 30);
+	} else if (gantt.range.value === 'weekly') {
+		daysOffset = Math.round((deltaX / columnWidth) * 7);
+	} else {
+		daysOffset = Math.round(deltaX / columnWidth);
+	}
+
+	const newDate = addDays(originalDate.value, daysOffset);
+
+	// Update tooltip
+	tooltip.value.text = formatDateTime(newDate, 'dd MMM yyyy');
+
+	// Emit move event
+	emit('move', props.id, newDate);
+}
+
+function handleMouseUp() {
+	isDragging.value = false;
+	tooltip.value.visible = false;
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+}
+
+onUnmounted(() => {
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+});
+</script>