@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,65 @@
+<template>
+	<div :class="cn('border-border bg-card relative flex shrink-0 flex-col overflow-hidden border-r', props.class)" :style="{ width: `${gantt.sidebarWidth.value}px` }">
+		<!-- Sticky Header -->
+		<div class="sidebar-header text-foreground sticky top-0 z-30 flex shrink-0 items-center border-b border-slate-200 px-4 text-sm font-medium" :style="{ height: `${gantt.headerHeight.value}px` }">
+			<slot name="header">
+				{{ title }}
+			</slot>
+		</div>
+
+		<!-- Content -->
+		<div ref="sidebarContentRef" class="flex-1 overflow-y-auto">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttSidebarProps {
+	title?: string;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<GanttSidebarProps>(), {
+	title: 'Features',
+});
+
+const gantt = useGantt();
+const sidebarContentRef = ref<HTMLElement | null>(null);
+
+// Handle sidebar scroll - sync to timeline
+const handleSidebarScroll = () => {
+	if (gantt.isSyncingVertical.value) return;
+	const sidebarElement = sidebarContentRef.value;
+	const timelineElement = gantt.scrollRef.value;
+	if (!sidebarElement || !timelineElement) return;
+
+	gantt.isSyncingVertical.value = true;
+	gantt.scrollY.value = sidebarElement.scrollTop;
+	timelineElement.scrollTop = sidebarElement.scrollTop;
+	requestAnimationFrame(() => {
+		gantt.isSyncingVertical.value = false;
+	});
+};
+
+// Register sidebar scroll ref
+onMounted(() => {
+	gantt.sidebarScrollRef.value = sidebarContentRef.value;
+	sidebarContentRef.value?.addEventListener('scroll', handleSidebarScroll);
+});
+
+onUnmounted(() => {
+	sidebarContentRef.value?.removeEventListener('scroll', handleSidebarScroll);
+});
+</script>
+
+<style scoped>
+.sidebar-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/GanttSidebarGroup.vue

@@ -0,0 +1,25 @@
+<template>
+	<div :class="cn('border-border border-b', props.class)">
+		<!-- Group Header -->
+		<div class="bg-muted text-foreground flex items-center px-4 py-2 text-xs font-medium" :style="{ height: `${gantt.rowHeight.value}px` }">
+			{{ name }}
+		</div>
+
+		<!-- Group Items -->
+		<div>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttSidebarGroupProps {
+	name: string;
+	class?: string;
+}
+
+const props = defineProps<GanttSidebarGroupProps>();
+const gantt = useGantt();
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+	<button type="button" :class="cn('border-border hover:bg-accent flex w-full items-center gap-3 border-b px-4 py-2 text-left', props.class)" :style="{ height: `${gantt.rowHeight.value}px` }" @click="handleClick">
+		<!-- Status Indicator -->
+		<div v-if="feature.status" class="h-2 w-2 flex-none rounded-full" :style="{ backgroundColor: feature.status.color }" />
+
+		<!-- Feature Name -->
+		<div class="text-foreground flex-1 truncate text-sm">
+			{{ feature.name }}
+		</div>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttSidebarItemProps {
+	feature: GanttFeature;
+	class?: string;
+}
+
+const props = defineProps<GanttSidebarItemProps>();
+const emit = defineEmits<{
+	selectItem: [id: string];
+}>();
+
+const gantt = useGantt();
+
+function handleClick() {
+	emit('selectItem', props.feature.id);
+	gantt.scrollToFeature?.(props.feature);
+}
+</script>

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

@@ -0,0 +1,179 @@
+<template>
+	<div ref="timelineRef" :class="cn('scrollbar-hide relative flex-1 overflow-auto', props.class, isDragging && 'cursor-grabbing')" :style="isDragging ? { cursor: 'grabbing' } : { cursor: 'grab' }" @scroll="handleScroll" @mousedown="handleMouseDown">
+		<div class="relative" :style="{ width: timelineWidth, minHeight: '100%' }">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttTimelineProps {
+	class?: string;
+}
+
+const props = defineProps<GanttTimelineProps>();
+const gantt = useGantt();
+const timelineRef = ref<HTMLElement | null>(null);
+const scrollTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartScrollLeft = ref(0);
+
+const timelineWidth = computed(() => {
+	const range = gantt.range.value;
+	let periodsPerYear = 12; // months by default
+
+	if (range === 'daily') {
+		periodsPerYear = 365;
+	} else if (range === 'weekly') {
+		periodsPerYear = 52;
+	}
+
+	const totalYears = gantt.timelineData.value.length;
+	const totalPeriods = totalYears * periodsPerYear;
+	const columnWidth = (gantt.columnWidth.value * gantt.zoom.value) / 100;
+
+	return `${totalPeriods * columnWidth}px`;
+});
+
+// Handle horizontal infinite scroll (throttled for performance)
+const handleInfiniteScroll = throttle(() => {
+	const scrollElement = timelineRef.value;
+	if (!scrollElement) return;
+
+	const { scrollLeft, scrollWidth, clientWidth } = scrollElement;
+	gantt.scrollX.value = scrollLeft;
+
+	// Extend timeline when reaching edges
+	if (scrollLeft <= 0) {
+		const firstYear = gantt.timelineData.value[0]?.year;
+		if (!firstYear) return;
+
+		const newData = generateTimelineData(firstYear - 1, 1);
+		gantt.timelineData.value = [...newData, ...gantt.timelineData.value];
+
+		// Adjust scroll position
+		setTimeout(() => {
+			if (scrollElement) {
+				scrollElement.scrollLeft = clientWidth;
+			}
+		}, 0);
+	} else if (scrollLeft + clientWidth >= scrollWidth - 10) {
+		const lastYear = gantt.timelineData.value[gantt.timelineData.value.length - 1]?.year;
+		if (!lastYear) return;
+
+		const newData = generateTimelineData(lastYear + 1, 1);
+		gantt.timelineData.value = [...gantt.timelineData.value, ...newData];
+	}
+}, 100);
+
+// Handle scroll with immediate vertical sync
+const handleScroll = () => {
+	const scrollElement = timelineRef.value;
+	if (!scrollElement) return;
+
+	const { scrollLeft, scrollTop } = scrollElement;
+	gantt.scrollX.value = scrollLeft;
+
+	// Add scrolling class for scrollbar visibility
+	scrollElement.classList.add('scrolling');
+
+	// Clear existing timeout
+	if (scrollTimeout.value) {
+		clearTimeout(scrollTimeout.value);
+	}
+
+	// Remove scrolling class after 1 second of no scrolling
+	scrollTimeout.value = setTimeout(() => {
+		if (scrollElement) {
+			scrollElement.classList.remove('scrolling');
+		}
+	}, 1000);
+
+	// Sync vertical scroll to sidebar (immediate for smooth scrolling)
+	if (!gantt.isSyncingVertical.value) {
+		gantt.isSyncingVertical.value = true;
+		const sidebarElement = gantt.sidebarScrollRef.value;
+		if (sidebarElement) {
+			gantt.scrollY.value = scrollTop;
+			sidebarElement.scrollTop = scrollTop;
+		}
+		requestAnimationFrame(() => {
+			gantt.isSyncingVertical.value = false;
+		});
+	}
+
+	handleInfiniteScroll();
+};
+
+// Set scrollRef to timeline
+onMounted(() => {
+	gantt.scrollRef.value = timelineRef.value;
+
+	// Scroll to current date
+	const scrollElement = timelineRef.value;
+	if (!scrollElement) return;
+
+	const firstYear = gantt.timelineData.value[0]?.year;
+	if (!firstYear) return;
+
+	const now = new Date();
+	const timelineStartDate = new Date(firstYear, 0, 1);
+	const offset = getOffset(now, timelineStartDate, {
+		zoom: gantt.zoom.value,
+		range: gantt.range.value,
+		columnWidth: gantt.columnWidth.value,
+	});
+
+	scrollElement.scrollLeft = Math.max(0, offset - 100);
+});
+
+// Handle mouse down for horizontal dragging
+function handleMouseDown(event: MouseEvent) {
+	// Only start dragging if clicking on the timeline background, not on bars
+	const target = event.target as HTMLElement;
+
+	// Check if the click is on a bar or interactive element
+	if (target.closest('[data-gantt-feature-item]') || target.closest('.cursor-move') || target.closest('.cursor-ew-resize')) {
+		return; // Don't start timeline drag if clicking on a bar
+	}
+
+	isDragging.value = true;
+	dragStartX.value = event.clientX;
+	dragStartScrollLeft.value = timelineRef.value?.scrollLeft || 0;
+
+	// Prevent default to avoid text selection
+	event.preventDefault();
+
+	document.addEventListener('mousemove', handleMouseMove);
+	document.addEventListener('mouseup', handleMouseUp);
+}
+
+// Handle mouse move during drag
+function handleMouseMove(event: MouseEvent) {
+	if (!isDragging.value || !timelineRef.value) return;
+
+	const deltaX = dragStartX.value - event.clientX;
+	const newScrollLeft = dragStartScrollLeft.value + deltaX;
+
+	timelineRef.value.scrollLeft = newScrollLeft;
+}
+
+// Handle mouse up to end drag
+function handleMouseUp() {
+	isDragging.value = false;
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+}
+
+// Cleanup scroll timeout and event listeners
+onUnmounted(() => {
+	if (scrollTimeout.value) {
+		clearTimeout(scrollTimeout.value);
+	}
+	document.removeEventListener('mousemove', handleMouseMove);
+	document.removeEventListener('mouseup', handleMouseUp);
+});
+</script>

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

@@ -0,0 +1,52 @@
+<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 text-foreground pointer-events-auto sticky top-0 flex flex-col flex-nowrap items-center justify-center rounded-b-md bg-yellow-300 px-2 py-1 text-xs whitespace-nowrap select-auto', props.class)">
+			{{ label }}
+			<span class="max-h-0 overflow-hidden opacity-80 group-hover:max-h-8">
+				{{ formattedDate }}
+			</span>
+		</div>
+		<div :class="cn('h-full w-px bg-yellow-300', props.class)" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+export interface GanttTodayProps {
+	label?: string;
+	class?: string;
+}
+
+const props = withDefaults(defineProps<GanttTodayProps>(), {
+	label: 'Today',
+});
+
+const gantt = useGantt();
+const date = new Date();
+
+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(date, timelineStartDate.value);
+});
+
+const innerOffset = computed(() => {
+	return calculateInnerOffset(date, gantt.range.value, (gantt.columnWidth.value * gantt.zoom.value) / 100);
+});
+
+const formattedDate = computed(() => {
+	return formatDateTime(date, 'MMM dd, yyyy');
+});
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+	<div class="bg-card border-border flex items-center gap-2 rounded-sm border px-3 py-2">
+		<!-- Zoom Out -->
+		<button type="button" class="border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 w-8 items-center justify-center rounded-sm border disabled:pointer-events-none disabled:opacity-50" :disabled="gantt.zoom.value <= 25" @click="handleZoomOut">
+			<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+			</svg>
+		</button>
+
+		<!-- Zoom Level Display -->
+		<div class="flex min-w-15 items-center justify-center gap-1">
+			<span class="text-foreground text-sm font-medium">{{ gantt.zoom.value }}%</span>
+		</div>
+
+		<!-- Zoom In -->
+		<button type="button" class="border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 w-8 items-center justify-center rounded-sm border disabled:pointer-events-none disabled:opacity-50" :disabled="gantt.zoom.value >= 300" @click="handleZoomIn">
+			<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+			</svg>
+		</button>
+
+		<!-- Reset Zoom -->
+		<button type="button" class="border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center justify-center rounded-sm border px-3 text-xs font-medium" @click="handleResetZoom">Reset</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+const gantt = useGantt();
+
+const handleZoomIn = () => {
+	if (gantt.setZoom && gantt.zoom.value < 300) {
+		const newZoom = Math.min(300, gantt.zoom.value + 25);
+		gantt.setZoom(newZoom);
+	}
+};
+
+const handleZoomOut = () => {
+	if (gantt.setZoom && gantt.zoom.value > 25) {
+		const newZoom = Math.max(25, gantt.zoom.value - 25);
+		gantt.setZoom(newZoom);
+	}
+};
+
+const handleResetZoom = () => {
+	if (gantt.setZoom) {
+		gantt.setZoom(100);
+	}
+};
+</script>