@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/composables/useDragAndDrop.ts

@@ -0,0 +1,481 @@
+import { makeDraggable, makeDroppable, type IDragEvent } from '@vue-dnd-kit/core';
+import type { CalendarEvent } from '../types';
+import { useCalendarUtils } from './useCalendarUtils';
+
+export interface DragDropConfig {
+	enabled: boolean;
+	crossViewEnabled: boolean;
+	visualFeedback: boolean;
+	snapToGrid: boolean;
+	allowTimeChange: boolean;
+	allowDateChange: boolean;
+	showDuration: boolean;
+	enableResize: boolean;
+}
+
+export interface DropZoneInfo {
+	id: string;
+	type: 'time-slot' | 'all-day' | 'day-cell';
+	date: Date;
+	time?: string;
+	isValid: boolean;
+	element?: HTMLElement;
+}
+
+export interface DragState {
+	isDragging: boolean;
+	draggedEvent?: CalendarEvent;
+	validDropZones: DropZoneInfo[];
+	currentDropZone?: DropZoneInfo;
+	dragPreview?: { x: number; y: number; event: CalendarEvent };
+	originalEvent?: CalendarEvent;
+}
+
+// Global drag state for cross-view compatibility
+const globalDragState = reactive<DragState>({
+	isDragging: false,
+	validDropZones: [],
+});
+
+// Configuration with enhanced defaults
+const defaultConfig: DragDropConfig = {
+	enabled: true,
+	crossViewEnabled: true,
+	visualFeedback: true,
+	snapToGrid: true,
+	allowTimeChange: true,
+	allowDateChange: true,
+	showDuration: true,
+	enableResize: true,
+};
+
+export function useDragAndDropSystem(config: Partial<DragDropConfig> = {}) {
+	const finalConfig = { ...defaultConfig, ...config };
+	const { getDropTime } = useCalendarUtils();
+
+	// Enhanced drag configuration with vue-dnd-kit
+	const createDragConfig = (zoneId: string, zoneType: 'all-day' | 'timed' | 'day-cell', dateKey: string, onEventUpdate: (event: CalendarEvent) => void, pixelsPerHour = 60) => {
+		const handleDrop = (droppedEvent: CalendarEvent, mouseEvent?: DragEvent, targetElement?: HTMLElement) => {
+			try {
+				let updatedEvent: CalendarEvent;
+
+				if (zoneType === 'all-day') {
+					const newDate = new Date(dateKey);
+					if (Number.isNaN(newDate.getTime())) {
+						throw new TypeError(`Invalid date: ${dateKey}`);
+					}
+					updatedEvent = {
+						...droppedEvent,
+						startDate: newDate,
+						endDate: new Date(newDate),
+						allDay: true,
+					};
+				} else if (zoneType === 'timed') {
+					const originalStart = new Date(droppedEvent.startDate);
+					const originalEnd = new Date(droppedEvent.endDate);
+					if (Number.isNaN(originalStart.getTime()) || Number.isNaN(originalEnd.getTime())) {
+						throw new TypeError('Invalid original event dates');
+					}
+
+					const originalDuration = originalEnd.getTime() - originalStart.getTime();
+					const baseDateOfDrop = new Date(dateKey);
+
+					let newStart: Date;
+					if (mouseEvent && targetElement) {
+						newStart = getDropTime(mouseEvent, targetElement, baseDateOfDrop, pixelsPerHour);
+					} else {
+						newStart = new Date(dateKey + 'T09:00:00');
+					}
+
+					if (Number.isNaN(newStart.getTime())) {
+						throw new TypeError(`Invalid date: ${dateKey}`);
+					}
+					const newEnd = new Date(newStart.getTime() + originalDuration);
+
+					updatedEvent = {
+						...droppedEvent,
+						startDate: newStart,
+						endDate: newEnd,
+						allDay: false,
+					};
+				} else {
+					const originalStart = new Date(droppedEvent.startDate);
+					const originalEnd = new Date(droppedEvent.endDate);
+
+					updatedEvent = {
+						...droppedEvent,
+						startDate: new Date(dateKey + 'T' + originalStart.toTimeString().split(' ')[0]),
+						endDate: new Date(dateKey + 'T' + originalEnd.toTimeString().split(' ')[0]),
+					};
+				}
+
+				onEventUpdate(updatedEvent);
+			} catch (error) {
+				console.error('❌ Error updating event:', error);
+			}
+		};
+
+		return {
+			zoneId,
+			zoneType,
+			dateKey,
+			handleDrop,
+			disabled: !finalConfig.enabled,
+		};
+	};
+
+	// Helper function to create draggable events
+	const createDraggableEvent = (event: CalendarEvent) => {
+		const elementRef = ref<HTMLElement | null>(null);
+
+		// Only create draggable on client-side
+		if (globalThis.window === undefined) {
+			return {
+				elementRef,
+				isDragging: ref(false),
+				handleDragStart: () => {},
+				handleDragEnd: () => {},
+			};
+		}
+
+		const { isDragging } = makeDraggable(elementRef, {
+			disabled: !finalConfig.enabled,
+			data: () => event,
+		});
+
+		const handleDragStart = (dragEvent: DragEvent) => {
+			if (!dragEvent.dataTransfer || !event) return;
+
+			globalDragState.isDragging = true;
+			globalDragState.draggedEvent = event;
+
+			dragEvent.dataTransfer.setData('application/json', JSON.stringify(event));
+			dragEvent.dataTransfer.effectAllowed = 'move';
+
+			if (typeof document !== 'undefined') {
+				document.body.classList.add('dragging-event');
+			}
+		};
+
+		const handleDragEnd = () => {
+			globalDragState.isDragging = false;
+			globalDragState.draggedEvent = undefined;
+			if (typeof document !== 'undefined') {
+				document.body.classList.remove('dragging-event');
+			}
+		};
+
+		return {
+			elementRef,
+			isDragging,
+			handleDragStart,
+			handleDragEnd,
+		};
+	};
+
+	// Helper function to create droppable zones
+	const createDroppableZone = (config: ReturnType<typeof createDragConfig>) => {
+		const elementRef = ref<HTMLElement | null>(null);
+
+		// Only create droppable on client-side
+		if (globalThis.window === undefined) {
+			return {
+				elementRef,
+				isOver: ref(false),
+			};
+		}
+
+		const { isDragOver } = makeDroppable(elementRef, {
+			disabled: config.disabled,
+			events: {
+				onDrop: (dndEvent: IDragEvent) => {
+					try {
+						const droppedEvent = dndEvent.draggedItems[0]?.data as CalendarEvent;
+						if (droppedEvent && config.handleDrop) {
+							config.handleDrop(droppedEvent);
+						}
+					} catch (error) {
+						console.error('Failed to handle drop:', error);
+					}
+				},
+			},
+		});
+
+		const isOver = computed(() => !!isDragOver.value);
+
+		return {
+			elementRef,
+			isOver,
+		};
+	};
+
+	// Validate if an event can be dropped in a specific zone
+	const validateDropZone = (event: CalendarEvent, targetElement: HTMLElement): boolean => {
+		if (!finalConfig.allowDateChange && !finalConfig.allowTimeChange) return false;
+
+		const targetDate = targetElement.dataset.dateKey;
+
+		if (!targetDate) return false;
+
+		return true;
+	};
+
+	// Calculate the updated event based on drop location
+	const calculateEventUpdate = (originalEvent: CalendarEvent, targetElement: HTMLElement, dateKey: string, zoneType: string, pixelsPerHour: number, mouseEvent: MouseEvent): CalendarEvent | null => {
+		const duration = new Date(originalEvent.endDate).getTime() - new Date(originalEvent.startDate).getTime();
+		const baseDateOfDrop = new Date(dateKey);
+		const actualZoneType = targetElement.dataset.type || zoneType;
+
+		let newStart: Date;
+		let newEnd: Date;
+
+		switch (actualZoneType) {
+			case 'allDay':
+			case 'all-day':
+				newStart = startOfDay(baseDateOfDrop);
+				newEnd = originalEvent.allDay ? new Date(newStart.getTime() + duration) : endOfDay(baseDateOfDrop);
+				return {
+					...originalEvent,
+					startDate: newStart,
+					endDate: newEnd,
+					allDay: true,
+				};
+
+			case 'timed':
+			case 'time-slot':
+				if (finalConfig.snapToGrid) {
+					newStart = getDropTime(mouseEvent, targetElement, baseDateOfDrop, pixelsPerHour);
+				} else {
+					newStart = new Date(baseDateOfDrop);
+					const hours = Math.floor((mouseEvent.offsetY || 0) / pixelsPerHour);
+					const minutes = Math.floor(((mouseEvent.offsetY || 0) % pixelsPerHour) / (pixelsPerHour / 60));
+					newStart = setMinutes(setHours(newStart, hours), minutes);
+				}
+				newEnd = new Date(newStart.getTime() + duration);
+				return {
+					...originalEvent,
+					startDate: newStart,
+					endDate: newEnd,
+					allDay: false,
+				};
+
+			default: {
+				const originalStart = new Date(originalEvent.startDate);
+				const originalEnd = new Date(originalEvent.endDate);
+
+				newStart = new Date(baseDateOfDrop);
+				newStart.setHours(originalStart.getHours(), originalStart.getMinutes(), 0, 0);
+
+				newEnd = new Date(baseDateOfDrop);
+				newEnd.setHours(originalEnd.getHours(), originalEnd.getMinutes(), 0, 0);
+
+				return {
+					...originalEvent,
+					startDate: newStart,
+					endDate: newEnd,
+				};
+			}
+		}
+	};
+
+	// Utility functions for managing drop zones and drag state
+	const registerDropZone = (zoneInfo: DropZoneInfo) => {
+		if (!globalDragState.validDropZones.some((zone) => zone.id === zoneInfo.id)) {
+			globalDragState.validDropZones.push(zoneInfo);
+		}
+	};
+
+	const unregisterDropZone = (zoneId: string) => {
+		globalDragState.validDropZones = globalDragState.validDropZones.filter((zone) => zone.id !== zoneId);
+	};
+
+	const isValidDropZone = (zoneId: string): boolean => {
+		return globalDragState.validDropZones.some((zone) => zone.id === zoneId && zone.isValid);
+	};
+
+	const getCurrentDropZone = (): DropZoneInfo | undefined => {
+		return globalDragState.currentDropZone;
+	};
+
+	// Enhanced duration calculation and formatting
+	const formatEventDuration = (event: CalendarEvent): string => {
+		if (!finalConfig.showDuration) return '';
+
+		const start = new Date(event.startDate);
+		const end = new Date(event.endDate);
+		const duration = end.getTime() - start.getTime();
+
+		if (event.allDay) {
+			const days = Math.ceil(duration / (1000 * 60 * 60 * 24));
+			return days === 1 ? 'All day' : `${days} days`;
+		}
+
+		const hours = Math.floor(duration / (1000 * 60 * 60));
+		const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
+
+		if (hours === 0) {
+			return `${minutes}m`;
+		} else if (minutes === 0) {
+			return `${hours}h`;
+		} else {
+			return `${hours}h ${minutes}m`;
+		}
+	};
+
+	// Calculate visual height for events based on duration
+	const calculateEventHeight = (event: CalendarEvent, pixelsPerHour: number = 60): number => {
+		if (event.allDay) return 24; // Fixed height for all-day events
+
+		const duration = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
+		const hours = duration / (1000 * 60 * 60);
+		return Math.max(hours * pixelsPerHour, 20); // Minimum 20px height
+	};
+
+	// Resize functionality
+	const createResizeHandler = (event: CalendarEvent, onEventUpdate: (event: CalendarEvent) => void, direction: 'start' | 'end' = 'end') => {
+		if (!finalConfig.enableResize) return null;
+
+		let isResizing = false;
+		let startY = 0;
+		let originalEvent: CalendarEvent;
+
+		const handleMouseDown = (e: MouseEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			isResizing = true;
+			startY = e.clientY;
+			originalEvent = { ...event };
+
+			if (typeof document !== 'undefined') {
+				document.addEventListener('mousemove', handleMouseMove);
+				document.addEventListener('mouseup', handleMouseUp);
+				document.body.classList.add('resizing-event');
+			}
+		};
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!isResizing) return;
+
+			const deltaY = e.clientY - startY;
+			const pixelsPerHour = 60;
+			const timeChange = (deltaY / pixelsPerHour) * 60 * 60 * 1000;
+
+			let newEvent: CalendarEvent;
+
+			if (direction === 'start') {
+				const newStartTime = new Date(originalEvent.startDate.getTime() + timeChange);
+				newEvent = {
+					...originalEvent,
+					startDate: newStartTime,
+				};
+			} else {
+				const newEndTime = new Date(originalEvent.endDate.getTime() + timeChange);
+				newEvent = {
+					...originalEvent,
+					endDate: newEndTime,
+				};
+			}
+
+			if (newEvent.endDate.getTime() - newEvent.startDate.getTime() >= 15 * 60 * 1000) {
+				onEventUpdate(newEvent);
+			}
+		};
+
+		const handleMouseUp = () => {
+			isResizing = false;
+			if (typeof document !== 'undefined') {
+				document.removeEventListener('mousemove', handleMouseMove);
+				document.removeEventListener('mouseup', handleMouseUp);
+				document.body.classList.remove('resizing-event');
+			}
+		};
+
+		return { handleMouseDown };
+	};
+
+	// Enhanced visual feedback utilities
+	const addDragStyles = () => {
+		// Only add styles on client-side
+		if (typeof document === 'undefined') return;
+
+		const style = document.createElement('style');
+		style.id = 'drag-drop-styles';
+		style.textContent = `
+      /* Dragging state */
+      .dragging-event {
+        user-select: none;
+      }
+      
+      .dragging-event .event-content {
+        opacity: 0.6;
+        transform: scale(0.98);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      }
+      
+      /* Drop zone animations */
+      .drop-zone-active {
+        background-color: rgba(34, 197, 94, 0.08);
+        border: 2px dashed rgba(34, 197, 94, 0.4);
+        transform: scale(1.01);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.2);
+      }
+      
+      .drop-zone-valid {
+        background-color: rgba(34, 197, 94, 0.1);
+        border: 2px solid rgba(34, 197, 94, 0.6);
+        transition: all 0.2s ease;
+      }
+      
+      .drop-zone-invalid {
+        background-color: rgba(239, 68, 68, 0.1);
+        border: 2px solid rgba(239, 68, 68, 0.6);
+        transition: all 0.2s ease;
+      }
+      
+      /* Event animations */
+      .event-content {
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform, opacity;
+      }
+      
+      .event-content:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+      }
+    `;
+
+		if (!document.getElementById('drag-drop-styles')) {
+			document.head.appendChild(style);
+		}
+	};
+
+	// Initialize drag and drop system
+	const initializeDragAndDropSystem = () => {
+		addDragStyles();
+
+		return {
+			globalDragState,
+			config: finalConfig,
+			createDragConfig,
+			createDraggableEvent,
+			createDroppableZone,
+			validateDropZone,
+			calculateEventUpdate,
+			registerDropZone,
+			unregisterDropZone,
+			isValidDropZone,
+			getCurrentDropZone,
+			formatEventDuration,
+			calculateEventHeight,
+			createResizeHandler,
+			addDragStyles,
+			makeDraggable,
+			makeDroppable,
+		};
+	};
+
+	return initializeDragAndDropSystem();
+}

package/src/runtime/components/base/event-calendar/composables/useEventFiltering.ts

@@ -0,0 +1,116 @@
+import type { CalendarEvent } from '../types';
+
+/**
+ * Optimized event filtering composable with memoization
+ */
+export function useEventFiltering(events: ComputedRef<CalendarEvent[]>) {
+	// Memoize today's date to avoid repeated Date() calls
+	const today = computed(() => new Date());
+
+	/**
+	 * Get events for a specific day with optimized filtering
+	 */
+	const getEventsForDay = (day: Date) => {
+		return computed(() => {
+			const dayStart = startOfDay(day);
+			const dayEnd = endOfDay(day);
+
+			return events.value.filter((event) => {
+				const eventStart = new Date(event.startDate);
+				const eventEnd = new Date(event.endDate);
+
+				// Check if the event overlaps with the day (either starts, ends, or spans the day)
+				return (
+					// Event starts on this day
+					isWithinInterval(eventStart, { start: dayStart, end: dayEnd }) ||
+					// Event ends on this day
+					isWithinInterval(eventEnd, { start: dayStart, end: dayEnd }) ||
+					// Event spans across this day (starts before and ends after)
+					(eventStart < dayStart && eventEnd > dayEnd)
+				);
+			});
+		});
+	};
+
+	/**
+	 * Get all-day events for a specific day
+	 */
+	const getAllDayEventsForDay = (day: Date) => {
+		return computed(() => {
+			const dayStart = startOfDay(day);
+			const dayEnd = endOfDay(day);
+
+			return events.value.filter((event) => {
+				if (!event.allDay) return false;
+
+				const eventStart = new Date(event.startDate);
+				const eventEnd = new Date(event.endDate);
+
+				// Check if the all-day event overlaps with the day
+				return (
+					// Event starts on this day
+					isWithinInterval(eventStart, { start: dayStart, end: dayEnd }) ||
+					// Event ends on this day
+					isWithinInterval(eventEnd, { start: dayStart, end: dayEnd }) ||
+					// Event spans across this day (starts before and ends after)
+					(eventStart < dayStart && eventEnd > dayEnd)
+				);
+			});
+		});
+	};
+
+	/**
+	 * Get timed events for a specific day
+	 */
+	const getTimedEventsForDay = (day: Date) => {
+		return computed(() => {
+			const dayStart = startOfDay(day);
+			const dayPlusOne = new Date(dayStart.getTime() + 24 * 60 * 60 * 1000);
+
+			return events.value.filter((event) => {
+				if (event.allDay) return false;
+
+				const eventStart = new Date(event.startDate);
+				const eventEnd = new Date(event.endDate);
+
+				return isWithinInterval(eventStart, { start: dayStart, end: dayPlusOne }) || isWithinInterval(eventEnd, { start: dayStart, end: dayPlusOne }) || (eventStart < dayStart && eventEnd > dayPlusOne);
+			});
+		});
+	};
+
+	/**
+	 * Get events for agenda view (month-based events sorted by date)
+	 */
+	const getAgendaEvents = (fromDate: Date) => {
+		return computed(() => {
+			const monthStart = startOfMonth(fromDate);
+			const monthEnd = endOfMonth(fromDate);
+
+			return events.value
+				.filter((event) => {
+					const eventStart = startOfDay(new Date(event.startDate));
+					const eventEnd = startOfDay(new Date(event.endDate));
+
+					// Include events that start or end within the month, or span across it
+					return eventStart <= monthEnd && eventEnd >= monthStart;
+				})
+				.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+		});
+	};
+
+	/**
+	 * Check if a day is today (memoized)
+	 */
+	const isToday = (day: Date) => {
+		return computed(() => isSameDay(day, today.value));
+	};
+
+	return {
+		today,
+		getEventsForDay,
+		getAllDayEventsForDay,
+		getTimedEventsForDay,
+		getAgendaEvents,
+		isToday,
+	};
+}

package/src/runtime/components/base/event-calendar/composables/useEventStatus.ts

@@ -0,0 +1,108 @@
+import type { CalendarEvent, EventStatus } from '../types';
+
+export function useEventStatus(events: ComputedRef<CalendarEvent[]>) {
+	// Determine event status based on current time and explicit status
+	const getEventStatus = (event: CalendarEvent): EventStatus => {
+		// If status is explicitly set, use it (unless it needs auto-updating)
+		if (event.status && event.status !== 'past') {
+			return event.status;
+		}
+
+		// Auto-determine if event is past
+		const eventEnd = new Date(event.endDate);
+
+		if (event.allDay) {
+			// For all-day events, consider them past after the day ends
+			if (isPast(endOfDay(eventEnd))) {
+				return 'past';
+			}
+		} else if (isPast(eventEnd)) {
+			// For timed events, check if the end time has passed
+			return 'past';
+		}
+
+		return event.status || 'confirmed';
+	};
+
+	// Get CSS classes for event status styling
+	const getEventStatusClasses = (event: CalendarEvent): string => {
+		const status = getEventStatus(event);
+
+		switch (status) {
+			case 'cancelled':
+				return 'opacity-50 line-through saturate-50';
+			case 'past':
+				return 'opacity-70 saturate-75';
+			case 'tentative':
+				return 'opacity-80 border-dashed';
+			case 'confirmed':
+			default:
+				return '';
+		}
+	};
+
+	// Get visual indicator for event status
+	const getEventStatusIndicator = (event: CalendarEvent): string => {
+		const status = getEventStatus(event);
+
+		switch (status) {
+			case 'cancelled':
+				return '✕';
+			case 'past':
+				return '⏰';
+			case 'tentative':
+				return '?';
+			case 'confirmed':
+			default:
+				return '';
+		}
+	};
+
+	// Get tooltip text for event status
+	const getEventStatusTooltip = (event: CalendarEvent): string => {
+		const status = getEventStatus(event);
+
+		switch (status) {
+			case 'cancelled':
+				return 'This event has been cancelled';
+			case 'past':
+				return 'This event has already ended';
+			case 'tentative':
+				return 'This event is tentative';
+			case 'confirmed':
+			default:
+				return '';
+		}
+	};
+
+	// Check if event is in past
+	const isEventInPast = (event: CalendarEvent): boolean => {
+		return getEventStatus(event) === 'past';
+	};
+
+	// Check if event is cancelled
+	const isEventCancelled = (event: CalendarEvent): boolean => {
+		return getEventStatus(event) === 'cancelled';
+	};
+
+	// Process events with auto-status updates
+	const processEventsWithStatus = computed(() => {
+		return events.value.map((event) => ({
+			...event,
+			computedStatus: getEventStatus(event),
+			statusClasses: getEventStatusClasses(event),
+			statusIndicator: getEventStatusIndicator(event),
+			statusTooltip: getEventStatusTooltip(event),
+		}));
+	});
+
+	return {
+		getEventStatus,
+		getEventStatusClasses,
+		getEventStatusIndicator,
+		getEventStatusTooltip,
+		isEventInPast,
+		isEventCancelled,
+		processEventsWithStatus,
+	};
+}