@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/base/event-calendar/DayView.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import type { CalendarEvent, DayColumnData, TimeSlot } from './types';
+import { useCalendarUtils } from './composables/useCalendarUtils';
+import LocationDisplay from './LocationDisplay.vue';
+import EventResizeHandle from './EventResizeHandle.vue';
+import { useColorManager } from './composables/useColorManager';
+import { useDragAndDropSystem } from './composables/useDragAndDrop';
+
+const props = defineProps<{
+	dayData: DayColumnData;
+	pixelsPerHour: number;
+	disableDrag?: boolean;
+	isAddEvent?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: 'openAddModal', date: Date, isAllDaySlot?: boolean, allDayTargetDate?: Date): void;
+	(e: 'openEditModal' | 'eventUpdate', event: CalendarEvent): void;
+}>();
+const { getEventStyle, generateTimeSlots } = useCalendarUtils();
+
+// Enhanced drag state for visual feedback
+const dragState = ref({
+	isDragging: false,
+	draggedEventId: null as string | null | undefined,
+	validDropZones: [] as string[],
+	currentDropZone: null as string | null,
+});
+
+const timeSlotsForView = computed<TimeSlot[]>(() => {
+	return generateTimeSlots(props.dayData.date);
+});
+
+// Process raw timed events to include style for positioning
+const processedDayData = computed(() => {
+	return {
+		...props.dayData,
+		timedEventsStyled: props.dayData.timedEventsRaw.map((event) => ({
+			...event,
+			style: getEventStyle(event, props.dayData.date, props.pixelsPerHour),
+		})),
+	};
+});
+
+// Initialize color manager
+const allEventsComputed = computed(() => {
+	return [...props.dayData.allDayEvents, ...props.dayData.timedEventsRaw];
+});
+
+const { getColorClasses } = useColorManager(allEventsComputed);
+
+// Initialize drag and drop system
+const { createDragConfig, formatEventDuration, calculateEventHeight } = useDragAndDropSystem();
+
+const getDndConfigForDayZone = (zoneType: 'allDay' | 'timed') => createDragConfig(`day-${zoneType}-${props.dayData.dateKey}`, zoneType === 'allDay' ? 'all-day' : 'timed', props.dayData.dateKey, (updatedEvent: CalendarEvent) => emit('eventUpdate', updatedEvent), props.pixelsPerHour);
+
+// Resize event handlers
+const handleResizeStart = (_event: CalendarEvent) => {};
+
+const handleResize = throttle((event: CalendarEvent) => {
+	// Update the event immediately for visual feedback
+	emit('eventUpdate', event);
+}, 16); // ~60fps
+
+// Drag handlers for events
+const handleEventDragStart = (event: CalendarEvent, dragEvent: DragEvent) => {
+	if (props.disableDrag || !dragEvent.dataTransfer) return;
+
+	dragState.value.isDragging = true;
+	dragState.value.draggedEventId = event.id;
+
+	dragEvent.dataTransfer.setData('application/json', JSON.stringify(event));
+	dragEvent.dataTransfer.effectAllowed = 'move';
+
+	document.body.classList.add('dragging-event');
+};
+
+const handleEventDragEnd = (_event: CalendarEvent, _dragEvent: DragEvent) => {
+	dragState.value.isDragging = false;
+	dragState.value.draggedEventId = null;
+	document.body.classList.remove('dragging-event');
+};
+
+// Drop zone handlers
+const handleDragEnter = (dragEvent: DragEvent, zoneType: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.add('drop-zone-active');
+	}
+	dragState.value.currentDropZone = `${zoneType}-${props.dayData.dateKey}`;
+};
+
+const handleDragLeave = (dragEvent: DragEvent, zoneType: string) => {
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+	dragState.value.currentDropZone = null;
+};
+
+const handleDrop = (dragEvent: DragEvent, zoneType: string) => {
+	dragEvent.preventDefault();
+
+	if (props.disableDrag) return;
+
+	if (dragEvent.currentTarget instanceof HTMLElement) {
+		dragEvent.currentTarget.classList.remove('drop-zone-active');
+	}
+
+	const draggedData = dragEvent.dataTransfer?.getData('application/json');
+	if (!draggedData) return;
+
+	try {
+		const droppedEvent: CalendarEvent = JSON.parse(draggedData);
+		const config = getDndConfigForDayZone(zoneType as 'allDay' | 'timed');
+		config.handleDrop(droppedEvent, dragEvent, dragEvent.currentTarget as HTMLElement);
+	} catch (error) {
+		console.error('❌ Error handling drop:', error);
+	}
+};
+
+const handleResizeEnd = debounce((event: CalendarEvent) => {
+	// Final update
+	emit('eventUpdate', event);
+}, 100);
+
+// Note: Cleanup is handled automatically by Vue's reactivity system
+</script>
+
+<template>
+	<div class="flex h-full flex-col">
+		<!-- All Day Events Header -->
+		<div class="border-border-base bg-background sticky top-0 z-20 flex border-b">
+			<div class="border-border-base text-text-body flex w-16 shrink-0 items-center justify-center border-r p-2 text-xs">All-day</div>
+			<div :class="['border-border-base group relative min-h-15 flex-1 border-r p-1', { 'bg-blue-50 dark:bg-blue-900/30': processedDayData.isToday }]">
+				<div class="mb-1 text-center text-sm" :class="{ 'font-bold text-blue-600 dark:text-blue-400': processedDayData.isToday }">
+					{{ formatDateTime(processedDayData.date, 'EEEE, MMM dd') }}
+				</div>
+				<div
+					:data-date-key="processedDayData.dateKey"
+					data-type="allDay"
+					:class="[
+						'min-h-7.5 space-y-0.5',
+						{
+							'bg-blue-100/50 ring-2 ring-blue-300 dark:bg-blue-800/30 dark:ring-blue-600': dragState.isDragging && dragState.currentDropZone === 'allday-zone',
+							'bg-green-50/30 dark:bg-green-900/20': dragState.isDragging && dragState.validDropZones.includes('allday-zone') && dragState.currentDropZone !== 'allday-zone',
+						},
+					]"
+					@dragover.prevent
+					@dragenter="handleDragEnter($event, 'allDay')"
+					@dragleave="handleDragLeave($event, 'allDay')"
+					@drop="handleDrop($event, 'allDay')"
+				>
+					<div
+						v-for="event in processedDayData.allDayEvents"
+						:key="event.id"
+						:class="[
+							'event-content mb-0.5 rounded border p-1 text-xs select-none hover:shadow-sm',
+							props.disableDrag ? 'cursor-pointer' : 'cursor-move',
+							event.color ? getColorClasses(event.color) : 'border-gray-400 bg-gray-200 text-gray-800 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-100',
+						]"
+						:draggable="!props.disableDrag"
+						@dragstart="handleEventDragStart(event, $event)"
+						@dragend="handleEventDragEnd(event, $event)"
+						@click="emit('openEditModal', event)"
+					>
+						<div class="space-y-0.5">
+							<div class="flex min-w-0 items-center gap-1">
+								<span class="flex-1 truncate font-medium">{{ event.title }}</span>
+								<LocationDisplay v-if="event.location" :location="event.location" :compact="true" :show-tooltip="true" :icon-size="10" />
+							</div>
+							<div v-if="formatEventDuration(event)" class="event-duration text-opacity-75">
+								{{ formatEventDuration(event) }}
+							</div>
+						</div>
+					</div>
+				</div>
+				<DynectButton v-if="props.isAddEvent" color="ghost" size="xs" :icon-only="true" :title="`Add event on ${formatDateTime(processedDayData.date, 'MMM d')}`" @click="emit('openAddModal', processedDayData.date, true, processedDayData.date)">
+					<Icon name="lucide:plus" size="14" />
+				</DynectButton>
+			</div>
+		</div>
+
+		<!-- Timed Events Grid -->
+		<ScrollArea class="min-h-0 grow">
+			<div class="flex">
+				<div class="border-border-base text-text-body time-gutter w-16 shrink-0 border-r text-xs">
+					<!-- Time Gutter -->
+					<div v-for="slot in timeSlotsForView" :key="slot.label" :style="{ height: `${pixelsPerHour}px` }" class="border-border-base group relative box-border border-b pt-1 text-center">
+						<span class="relative top-[-0.5em] block leading-none group-first:top-0">{{ slot.label }}</span>
+					</div>
+				</div>
+				<div
+					:data-date-key="processedDayData.dateKey"
+					data-type="timed"
+					:class="[
+						'border-border-base relative flex-1 border-r',
+						{
+							'bg-blue-50/50 dark:bg-blue-900/20': processedDayData.isToday,
+							'bg-blue-100/50 ring-2 ring-blue-300 dark:bg-blue-800/30 dark:ring-blue-600': dragState.isDragging && dragState.currentDropZone === 'timed-zone',
+							'bg-green-50/30 dark:bg-green-900/20': dragState.isDragging && dragState.validDropZones.includes('timed-zone') && dragState.currentDropZone !== 'timed-zone',
+						},
+					]"
+					@dragover.prevent
+					@dragenter="handleDragEnter($event, 'timed')"
+					@dragleave="handleDragLeave($event, 'timed')"
+					@drop="handleDrop($event, 'timed')"
+				>
+					<div v-for="slot in timeSlotsForView" :key="slot.time.toISOString()" :data-slot-time="slot.dateTimeStr" :style="{ height: `${pixelsPerHour}px` }" class="border-border-base dark:border-border-base relative box-border border-b border-dashed" />
+
+					<TooltipProvider>
+						<template v-for="styledEvent in processedDayData.timedEventsStyled" :key="styledEvent.id">
+							<div
+								v-if="true"
+								:style="{
+									...styledEvent.style,
+									height: `${calculateEventHeight(styledEvent, props.pixelsPerHour)}px`,
+								}"
+								:class="[
+									'event-content absolute z-5 rounded border p-1 text-xs select-none hover:z-10 hover:shadow-md',
+									props.disableDrag ? 'cursor-pointer' : 'cursor-move',
+									styledEvent.color ? getColorClasses(styledEvent.color) : 'border-gray-400 bg-gray-200 text-gray-800 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-100',
+								]"
+								:draggable="!props.disableDrag"
+								@dragstart="handleEventDragStart(styledEvent, $event)"
+								@dragend="handleEventDragEnd(styledEvent, $event)"
+								@click="emit('openEditModal', styledEvent)"
+							>
+								<!-- Resize handles -->
+								<EventResizeHandle :event="styledEvent" position="top" :enabled="!styledEvent.allDay && !props.disableDrag" :pixels-per-hour="pixelsPerHour" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+								<EventResizeHandle :event="styledEvent" position="left" :enabled="!props.disableDrag" :pixels-per-hour="pixelsPerHour" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+								<EventResizeHandle :event="styledEvent" position="right" :enabled="!props.disableDrag" :pixels-per-hour="pixelsPerHour" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+
+								<div class="space-y-0.5">
+									<Tooltip>
+										<TooltipTrigger as-child>
+											<div class="truncate font-semibold">{{ styledEvent.title }}</div>
+										</TooltipTrigger>
+										<TooltipContent>{{ styledEvent.title }}</TooltipContent>
+									</Tooltip>
+									<div class="text-xs opacity-80">{{ formatDateTime(new Date(styledEvent.startDate), 'p') }} - {{ formatDateTime(new Date(styledEvent.endDate), 'p') }}</div>
+									<div v-if="formatEventDuration(styledEvent)" class="event-duration">
+										{{ formatEventDuration(styledEvent) }}
+									</div>
+									<LocationDisplay v-if="styledEvent.location" :location="styledEvent.location" :compact="true" :show-tooltip="true" :icon-size="10" />
+								</div>
+
+								<EventResizeHandle :event="styledEvent" position="bottom" :enabled="!styledEvent.allDay && !props.disableDrag" :pixels-per-hour="pixelsPerHour" @resize-start="handleResizeStart" @resize="handleResize" @resize-end="handleResizeEnd" />
+							</div>
+						</template>
+					</TooltipProvider>
+				</div>
+			</div>
+		</ScrollArea>
+	</div>
+</template>

package/src/runtime/components/base/event-calendar/DragDropVisualFeedback.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { CalendarEvent } from './types';
+import { useColorManager } from './composables/useColorManager';
+
+interface DragFeedbackProps {
+	isDragging?: boolean;
+	draggedEvent?: CalendarEvent;
+	validDropZones?: string[];
+	currentDropZone?: string;
+	dragPosition?: { x: number; y: number };
+}
+
+const props = withDefaults(defineProps<DragFeedbackProps>(), {
+	isDragging: false,
+	validDropZones: () => [],
+	currentDropZone: undefined,
+	dragPosition: () => ({ x: 0, y: 0 }),
+});
+
+const dragPreviewRef = ref<HTMLElement | null>(null);
+const mousePosition = ref({ x: 0, y: 0 });
+
+// Initialize color manager for drag preview
+const eventsComputed = computed(() => (props.draggedEvent ? [props.draggedEvent] : []));
+const { getColorClasses } = useColorManager(eventsComputed);
+
+// Track mouse position for drag preview
+const updateMousePosition = (e: MouseEvent) => {
+	mousePosition.value = { x: e.clientX, y: e.clientY };
+};
+
+// Drag preview styles
+const dragPreviewStyle = computed(() => {
+	if (!props.isDragging || !props.draggedEvent) return { display: 'none' };
+
+	return {
+		position: 'fixed' as const,
+		left: `${mousePosition.value.x + 10}px`,
+		top: `${mousePosition.value.y - 10}px`,
+		zIndex: 9999,
+		pointerEvents: 'none' as const,
+		transform: 'rotate(2deg)',
+		opacity: 0.9,
+	};
+});
+
+// Format time for display
+const formatEventTime = (event: CalendarEvent) => {
+	if (event.allDay) return 'All day';
+
+	const start = new Date(event.startDate);
+	const end = new Date(event.endDate);
+
+	return `${start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+};
+
+onMounted(() => {
+	if (globalThis.window !== undefined) {
+		document.addEventListener('mousemove', updateMousePosition);
+	}
+});
+
+onUnmounted(() => {
+	if (globalThis.window !== undefined) {
+		document.removeEventListener('mousemove', updateMousePosition);
+	}
+});
+</script>
+
+<template>
+	<!-- Drag Preview -->
+	<Teleport to="body">
+		<div
+			v-if="isDragging && draggedEvent"
+			ref="dragPreviewRef"
+			:style="dragPreviewStyle"
+			:class="['max-w-xs rounded-lg border-2 p-3 shadow-lg backdrop-blur-sm', draggedEvent.color ? getColorClasses(draggedEvent.color) : 'border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100']"
+		>
+			<!-- Event preview content -->
+			<div class="space-y-1">
+				<div class="truncate text-sm font-semibold">
+					{{ draggedEvent.title }}
+				</div>
+				<div class="text-xs opacity-80">
+					{{ formatEventTime(draggedEvent) }}
+				</div>
+				<div v-if="draggedEvent.location" class="flex items-center gap-1 text-xs opacity-70">
+					<Icon name="lucide:map-pin" size="10" />
+					<span class="truncate">{{ draggedEvent.location }}</span>
+				</div>
+			</div>
+
+			<!-- Drag indicator -->
+			<div class="bg-primary absolute -top-1 -right-1 h-3 w-3 animate-pulse rounded-full" />
+		</div>
+	</Teleport>
+</template>

package/src/runtime/components/base/event-calendar/EventCalendar.md

@@ -0,0 +1,203 @@
+# Dynect EventCalendar Component
+
+A reusable event calendar component with support for multiple views, recurring events, drag-and-drop, and external calendar integration.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import DynectEventCalendar from '@/components/dynect/EventCalendar.vue';
+import type { CalendarEvent } from '@/components/dynect/EventCalendar.vue';
+
+const events = ref<CalendarEvent[]>([
+	{
+		id: '1',
+		title: 'Team Meeting',
+		description: 'Weekly sync with the team',
+		startDate: new Date('2026-03-15T10:00:00'),
+		endDate: new Date('2026-03-15T11:00:00'),
+		startTime: '10:00',
+		endTime: '11:00',
+		allDay: false,
+		color: 'sky',
+		location: 'Conference Room A',
+		status: 'confirmed',
+		timezone: 'Asia/Kuala_Lumpur',
+		isRecurring: false,
+		recurringPattern: undefined,
+		recurringId: undefined,
+	},
+]);
+
+const handleEventAdd = (event: CalendarEvent) => {
+	console.log('Event added:', event);
+	events.value.push(event);
+};
+
+const handleEventUpdate = (event: CalendarEvent) => {
+	console.log('Event updated:', event);
+	const index = events.value.findIndex((e) => e.id === event.id);
+	if (index !== -1) {
+		events.value[index] = event;
+	}
+};
+
+const handleEventDelete = (eventId: string) => {
+	console.log('Event deleted:', eventId);
+	events.value = events.value.filter((e) => e.id !== eventId);
+};
+</script>
+
+<template>
+	<DynectEventCalendar :events="events" initial-view="month" @event-add="handleEventAdd" @event-update="handleEventUpdate" @event-delete="handleEventDelete" />
+</template>
+```
+
+## Props
+
+| Prop          | Type                                     | Default     | Description                                |
+| ------------- | ---------------------------------------- | ----------- | ------------------------------------------ |
+| `events`      | `CalendarEvent[]`                        | `[]`        | Array of events to display in the calendar |
+| `initialView` | `'month' \| 'week' \| 'day' \| 'agenda'` | `'month'`   | Initial view mode of the calendar          |
+| `loading`     | `boolean`                                | `false`     | Whether to show loading state              |
+| `class`       | `string`                                 | `undefined` | Custom CSS class for the container         |
+
+## Events
+
+| Event         | Payload            | Description                                |
+| ------------- | ------------------ | ------------------------------------------ |
+| `eventAdd`    | `CalendarEvent`    | Emitted when a new event is created        |
+| `eventUpdate` | `CalendarEvent`    | Emitted when an existing event is modified |
+| `eventDelete` | `string` (eventId) | Emitted when an event is deleted           |
+
+## CalendarEvent Interface
+
+```typescript
+interface CalendarEvent {
+	id: string | undefined;
+	title: string | undefined;
+	description: string | undefined;
+	startDate: Date;
+	endDate: Date;
+	startTime: string | undefined;
+	endTime: string | undefined;
+	allDay: boolean | undefined;
+	color: EventColor | undefined; // 'sky' | 'amber' | 'violet' | 'rose' | 'emerald' | 'orange'
+	location: string | undefined;
+	status: EventStatus | undefined; // 'confirmed' | 'cancelled' | 'tentative' | 'past'
+	timezone: string | undefined;
+	isRecurring: boolean | undefined;
+	recurringPattern: RecurringPattern | undefined;
+	recurringId: string | undefined;
+}
+```
+
+## Advanced Examples
+
+### With Loading State
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import DynectEventCalendar from '@/components/dynect/EventCalendar.vue';
+
+const events = ref([]);
+const loading = ref(true);
+
+onMounted(async () => {
+	// Fetch events from API
+	const response = await fetch('/api/events');
+	events.value = await response.json();
+	loading.value = false;
+});
+</script>
+
+<template>
+	<DynectEventCalendar :events="events" :loading="loading" initial-view="week" @event-add="handleEventAdd" @event-update="handleEventUpdate" @event-delete="handleEventDelete" />
+</template>
+```
+
+### Recurring Events
+
+```vue
+<script setup lang="ts">
+const recurringEvent = {
+	id: '2',
+	title: 'Daily Standup',
+	description: 'Team daily standup meeting',
+	startDate: new Date('2026-03-10T09:00:00'),
+	endDate: new Date('2026-03-10T09:15:00'),
+	startTime: '09:00',
+	endTime: '09:15',
+	allDay: false,
+	color: 'violet',
+	location: 'Virtual - Zoom',
+	status: 'confirmed',
+	timezone: 'Asia/Kuala_Lumpur',
+	isRecurring: true,
+	recurringPattern: {
+		type: 'weekly',
+		interval: 1,
+		daysOfWeek: [1, 2, 3, 4, 5], // Monday to Friday
+		endDate: new Date('2026-12-31'),
+	},
+	recurringId: 'recurring-standup',
+};
+</script>
+```
+
+### Different View Modes
+
+```vue
+<template>
+	<!-- Month View -->
+	<DynectEventCalendar :events="events" initial-view="month" />
+
+	<!-- Week View -->
+	<DynectEventCalendar :events="events" initial-view="week" />
+
+	<!-- Day View -->
+	<DynectEventCalendar :events="events" initial-view="day" />
+
+	<!-- Agenda View -->
+	<DynectEventCalendar :events="events" initial-view="agenda" />
+</template>
+```
+
+## Features
+
+- ✅ Multiple view modes (Month, Week, Day, Agenda)
+- ✅ Drag and drop events
+- ✅ Resize events
+- ✅ Recurring events support
+- ✅ All-day events
+- ✅ Event colors and status
+- ✅ Location display
+- ✅ Timezone support
+- ✅ Keyboard navigation
+- ✅ Responsive design
+- ✅ Dark mode support
+- ✅ Loading states
+- ✅ External calendar integration (Google, Outlook)
+
+## Keyboard Shortcuts
+
+| Key | Action                |
+| --- | --------------------- |
+| `M` | Switch to Month view  |
+| `W` | Switch to Week view   |
+| `D` | Switch to Day view    |
+| `A` | Switch to Agenda view |
+| `T` | Go to Today           |
+| `←` | Previous period       |
+| `→` | Next period           |
+| `N` | New event             |
+
+## Notes
+
+- All dates should be JavaScript `Date` objects
+- Times should be in 24-hour format (e.g., "14:00")
+- Timezones should be IANA timezone strings (e.g., "Asia/Kuala_Lumpur")
+- Event IDs should be unique strings
+- The component handles timezone conversion automatically