@dynect/base 0.1.0 → 0.2.0

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

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import type { CalendarEvent } from './types';
+
+interface ResizeHandleProps {
+	event: CalendarEvent;
+	position: 'top' | 'bottom' | 'left' | 'right';
+	enabled?: boolean;
+	pixelsPerHour?: number;
+	minDuration?: number; // in minutes
+	maxDuration?: number; // in minutes
+	snapToGrid?: boolean;
+	onResize?: (event: CalendarEvent) => void;
+}
+
+const props = withDefaults(defineProps<ResizeHandleProps>(), {
+	enabled: true,
+	pixelsPerHour: 60,
+	minDuration: 15,
+	maxDuration: 24 * 60, // 24 hours
+	snapToGrid: true,
+});
+
+const emit = defineEmits<(e: 'resize-start' | 'resize' | 'resize-end', event: CalendarEvent) => void>();
+
+const isResizing = ref(false);
+const startY = ref(0);
+const startX = ref(0);
+const originalEvent = ref<CalendarEvent | null>(null);
+const previewEvent = ref<CalendarEvent | null>(null);
+
+const handleClasses = computed(() => {
+	const baseClasses = ['absolute  duration-200 z-30 event-resize-handle group', `resize-${props.position}`, isResizing.value ? 'opacity-100' : '', props.enabled ? '' : 'pointer-events-none'];
+
+	if (props.position === 'top' || props.position === 'bottom') {
+		return [...baseClasses, 'left-0 right-0 h-3 cursor-ns-resize', props.position === 'top' ? '-top-1' : '-bottom-1'];
+	} else {
+		return [...baseClasses, 'top-0 bottom-0 w-3 cursor-ew-resize', props.position === 'left' ? '-left-1' : '-right-1'];
+	}
+});
+
+const handleStyle = computed(() => ({
+	background: isResizing.value ? 'linear-gradient(90deg, #3b82f6, #8b5cf6)' : 'rgba(75, 85, 99, 0.6)',
+	borderRadius: '2px',
+	opacity: isResizing.value ? '1' : '0',
+}));
+
+const snapToTimeGrid = (minutes: number): number => {
+	if (!props.snapToGrid) return minutes;
+	const snapInterval = 15; // 15-minute intervals
+	return Math.round(minutes / snapInterval) * snapInterval;
+};
+
+const resizeVertically = (deltaY: number, originalStart: Date, originalEnd: Date): { start: Date; end: Date } => {
+	const deltaMinutes = Math.round((deltaY / props.pixelsPerHour) * 60);
+	const snappedDelta = snapToTimeGrid(deltaMinutes);
+
+	let newStart = new Date(originalStart);
+	let newEnd = new Date(originalEnd);
+
+	if (props.position === 'top') {
+		newStart = new Date(originalStart.getTime() + snappedDelta * 60 * 1000);
+		const duration = newEnd.getTime() - newStart.getTime();
+
+		if (duration < props.minDuration * 60 * 1000 || newStart >= newEnd) {
+			newStart = new Date(newEnd.getTime() - props.minDuration * 60 * 1000);
+		}
+	} else {
+		newEnd = new Date(originalEnd.getTime() + snappedDelta * 60 * 1000);
+		const duration = newEnd.getTime() - newStart.getTime();
+
+		if (duration < props.minDuration * 60 * 1000 || newEnd <= newStart) {
+			newEnd = new Date(newStart.getTime() + props.minDuration * 60 * 1000);
+		}
+	}
+
+	const finalDuration = newEnd.getTime() - newStart.getTime();
+	if (finalDuration > props.maxDuration * 60 * 1000) {
+		if (props.position === 'top') {
+			newStart = new Date(newEnd.getTime() - props.maxDuration * 60 * 1000);
+		} else {
+			newEnd = new Date(newStart.getTime() + props.maxDuration * 60 * 1000);
+		}
+	}
+
+	return { start: newStart, end: newEnd };
+};
+
+const resizeHorizontally = (deltaX: number, originalStart: Date, originalEnd: Date): { start: Date; end: Date } => {
+	const daysDelta = Math.round(deltaX / 100);
+
+	let newStart = new Date(originalStart);
+	let newEnd = new Date(originalEnd);
+
+	if (props.position === 'left') {
+		newStart.setDate(newStart.getDate() + daysDelta);
+		if (newStart >= newEnd) {
+			newStart = new Date(newEnd);
+			newStart.setDate(newStart.getDate() - 1);
+		}
+	} else {
+		newEnd.setDate(newEnd.getDate() + daysDelta);
+		if (newEnd <= newStart) {
+			newEnd = new Date(newStart);
+			newEnd.setDate(newEnd.getDate() + 1);
+		}
+	}
+
+	return { start: newStart, end: newEnd };
+};
+
+const calculateNewEventTime = (deltaY: number, deltaX: number = 0): CalendarEvent | null => {
+	if (!originalEvent.value) return null;
+
+	const originalStart = new Date(originalEvent.value.startDate);
+	const originalEnd = new Date(originalEvent.value.endDate);
+
+	const isVertical = props.position === 'top' || props.position === 'bottom';
+	const { start: newStart, end: newEnd } = isVertical ? resizeVertically(deltaY, originalStart, originalEnd) : resizeHorizontally(deltaX, originalStart, originalEnd);
+
+	return {
+		...originalEvent.value,
+		startDate: newStart,
+		endDate: newEnd,
+	};
+};
+
+const handleMouseDown = (e: MouseEvent) => {
+	if (!props.enabled) return;
+
+	// Stop propagation to prevent drag events
+	e.preventDefault();
+	e.stopPropagation();
+	e.stopImmediatePropagation();
+
+	isResizing.value = true;
+	startY.value = e.clientY;
+	startX.value = e.clientX;
+	originalEvent.value = { ...props.event };
+	previewEvent.value = { ...props.event };
+
+	emit('resize-start', props.event);
+
+	// Use capture phase to ensure we get the events first
+	document.addEventListener('mousemove', handleMouseMove, { passive: false, capture: true });
+	document.addEventListener('mouseup', handleMouseUp, { passive: false, capture: true });
+
+	const cursor = props.position === 'left' || props.position === 'right' ? 'ew-resize' : 'ns-resize';
+	document.body.style.cursor = cursor;
+	document.body.style.userSelect = 'none';
+	document.body.classList.add('resizing-event');
+};
+
+const handleMouseMove = (e: MouseEvent) => {
+	if (!isResizing.value || !originalEvent.value) return;
+
+	e.preventDefault();
+	e.stopPropagation();
+
+	const deltaY = e.clientY - startY.value;
+	const deltaX = e.clientX - startX.value;
+	const newEvent = calculateNewEventTime(deltaY, deltaX);
+
+	if (newEvent) {
+		previewEvent.value = newEvent;
+		emit('resize', newEvent);
+	}
+};
+
+const handleMouseUp = () => {
+	if (!isResizing.value || !previewEvent.value) return;
+
+	isResizing.value = false;
+
+	emit('resize-end', previewEvent.value);
+
+	// Cleanup with capture flag matching the add
+	document.removeEventListener('mousemove', handleMouseMove, { capture: true });
+	document.removeEventListener('mouseup', handleMouseUp, { capture: true });
+	document.body.style.cursor = '';
+	document.body.style.userSelect = '';
+	document.body.classList.remove('resizing-event');
+
+	originalEvent.value = null;
+	previewEvent.value = null;
+};
+
+// Touch support for mobile devices
+const handleTouchStart = (e: TouchEvent) => {
+	if (!props.enabled) return;
+
+	e.preventDefault();
+	e.stopPropagation();
+
+	const touch = e.touches[0];
+	if (!touch) return;
+
+	isResizing.value = true;
+	startY.value = touch.clientY;
+	originalEvent.value = { ...props.event };
+	previewEvent.value = { ...props.event };
+
+	emit('resize-start', props.event);
+
+	document.addEventListener('touchmove', handleTouchMove, { passive: false });
+	document.addEventListener('touchend', handleTouchEnd);
+};
+
+const handleTouchMove = (e: TouchEvent) => {
+	if (!isResizing.value || !originalEvent.value) return;
+
+	e.preventDefault();
+	const touch = e.touches[0];
+	if (!touch) return;
+
+	const deltaY = touch.clientY - startY.value;
+	const newEvent = calculateNewEventTime(deltaY);
+
+	if (newEvent) {
+		previewEvent.value = newEvent;
+		emit('resize', newEvent);
+	}
+};
+
+const handleTouchEnd = () => {
+	if (!isResizing.value || !previewEvent.value) return;
+
+	isResizing.value = false;
+
+	emit('resize-end', previewEvent.value);
+
+	// Cleanup
+	document.removeEventListener('touchmove', handleTouchMove);
+	document.removeEventListener('touchend', handleTouchEnd);
+
+	originalEvent.value = null;
+	previewEvent.value = null;
+};
+
+// Cleanup on unmount
+onUnmounted(() => {
+	if (isResizing.value) {
+		document.removeEventListener('mousemove', handleMouseMove);
+		document.removeEventListener('mouseup', handleMouseUp);
+		document.removeEventListener('touchmove', handleTouchMove);
+		document.removeEventListener('touchend', handleTouchEnd);
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+	}
+});
+</script>
+
+<template>
+	<div v-if="enabled" :class="handleClasses" :style="handleStyle" :title="`Resize event ${position === 'top' ? 'start' : position === 'bottom' ? 'end' : position} ${position === 'left' || position === 'right' ? 'date' : 'time'}`" @mousedown="handleMouseDown" @touchstart="handleTouchStart">
+		<!-- Visual indicators for each direction with enhanced visibility -->
+		<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100">
+			<!-- Horizontal handles (top/bottom) -->
+			<div v-if="position === 'top' || position === 'bottom'" class="h-1 w-8 rounded-full border border-blue-400 bg-white shadow-sm">
+				<!-- Grip dots for better visibility -->
+				<div class="absolute inset-0 flex items-center justify-center gap-1">
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+				</div>
+			</div>
+
+			<!-- Vertical handles (left/right) -->
+			<div v-if="position === 'left' || position === 'right'" class="h-8 w-1 rounded-full border border-blue-400 bg-white shadow-sm">
+				<!-- Grip dots for better visibility -->
+				<div class="absolute inset-0 flex flex-col items-center justify-center gap-1">
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+					<div class="h-1 w-1 rounded-full bg-blue-500" />
+				</div>
+			</div>
+		</div>
+
+		<!-- Cursor icon overlay -->
+		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<!-- Double arrow icons for resize directions -->
+			<div v-if="position === 'top' || position === 'bottom'" class="text-xs font-bold text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">↕</div>
+			<div v-if="position === 'left' || position === 'right'" class="text-xs font-bold text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">↔</div>
+		</div>
+	</div>
+</template>

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

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { useExternalCalendar, type ExternalCalendarConfig } from './composables/useExternalCalendar';
+
+const props = defineProps<{
+	config?: ExternalCalendarConfig;
+}>();
+
+const emit = defineEmits<{
+	(e: 'syncComplete', events: any[]): void;
+	(e: 'syncError', error: string): void;
+}>();
+
+// Initialize external calendar integration
+const config = props.config || {};
+const { providers, syncStatus, enabledProviders, hasActiveSync, syncStatusText, enableProvider, disconnectProvider, syncExternalCalendars } = useExternalCalendar(config);
+
+const isExpanded = ref(false);
+
+const handleProviderToggle = async (providerId: string, enabled: boolean) => {
+	try {
+		if (enabled) {
+			await enableProvider(providerId);
+		} else {
+			disconnectProvider(providerId);
+		}
+	} catch (error) {
+		console.error('Provider toggle failed:', error);
+		emit('syncError', `Failed to ${enabled ? 'connect to' : 'disconnect from'} ${providerId}`);
+	}
+};
+
+const handleSync = async () => {
+	if (enabledProviders.value.length === 0) {
+		emit('syncError', 'No external calendars connected');
+		return;
+	}
+
+	try {
+		const now = new Date();
+		const startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1); // 1 month ago
+		const endDate = new Date(now.getFullYear(), now.getMonth() + 2, 0); // 2 months ahead
+
+		const externalEvents = await syncExternalCalendars(
+			{ value: [] } as any, // This would be the actual local events
+			{ start: startDate, end: endDate }
+		);
+
+		emit('syncComplete', externalEvents);
+	} catch (error) {
+		console.error('Sync failed:', error);
+		emit('syncError', `Sync failed: ${error}`);
+	}
+};
+</script>
+
+<template>
+	<Card class="w-full">
+		<CardHeader>
+			<div class="flex items-center justify-between">
+				<div>
+					<CardTitle class="flex items-center gap-2">
+						<Icon name="lucide:cloud" size="20" />
+						External Calendars
+					</CardTitle>
+					<CardDescription> Connect and sync with external calendar services </CardDescription>
+				</div>
+				<DynectButton color="ghost" size="sm" class="p-2" @click="isExpanded = !isExpanded">
+					<Icon name="lucide:chevron-down" size="16" :class="{ 'rotate-180': isExpanded }" class="transition-transform duration-200" />
+				</DynectButton>
+			</div>
+		</CardHeader>
+
+		<CardContent v-if="isExpanded" class="space-y-4">
+			<!-- Sync Status -->
+			<div class="bg-background flex items-center justify-between rounded-md p-3">
+				<div class="flex items-center gap-2">
+					<Icon :name="hasActiveSync ? 'lucide:loader-2' : 'lucide:cloud'" size="16" :class="{ 'animate-spin': hasActiveSync }" />
+					<span class="text-sm font-medium">{{ syncStatusText }}</span>
+				</div>
+				<DynectButton size="sm" :disabled="hasActiveSync || enabledProviders.length === 0" @click="handleSync"> Sync Now </DynectButton>
+			</div>
+
+			<!-- Sync Errors -->
+			<DynectAlert v-if="syncStatus.syncErrors && syncStatus.syncErrors.length > 0" variant="danger" type="complex" title="Sync Errors">
+				<div class="space-y-1">
+					<div v-for="error in syncStatus.syncErrors" :key="error" class="text-sm">
+						{{ error }}
+					</div>
+				</div>
+			</DynectAlert>
+
+			<!-- Provider List -->
+			<div class="space-y-3">
+				<h4 class="text-foreground text-sm font-medium">Available Providers</h4>
+
+				<div v-for="provider in providers" :key="provider.id" class="border-border-base flex items-center justify-between rounded-md border p-3">
+					<div class="flex items-center gap-3">
+						<Icon :name="provider.icon" size="20" :style="{ color: provider.color }" />
+						<div>
+							<p class="text-sm font-medium">{{ provider.name }}</p>
+							<div class="flex items-center gap-2">
+								<DynectBadge :variant="provider.isAuthenticated ? 'success' : 'gray'" size="sm">
+									{{ provider.isAuthenticated ? 'Connected' : 'Not Connected' }}
+								</DynectBadge>
+								<DynectBadge v-if="provider.isEnabled" variant="info" size="sm"> Syncing </DynectBadge>
+							</div>
+						</div>
+					</div>
+
+					<div class="flex items-center gap-2">
+						<Label :for="`${provider.id}-switch`" class="sr-only"> Enable {{ provider.name }} </Label>
+						<Switch :id="`${provider.id}-switch`" :checked="provider.isEnabled" :disabled="hasActiveSync" @update:checked="(checked: any) => handleProviderToggle(provider.id, checked)" />
+					</div>
+				</div>
+			</div>
+
+			<!-- Connected Providers Summary -->
+			<div v-if="enabledProviders.length > 0" class="rounded-md border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-900/20">
+				<div class="flex items-center gap-2 text-green-800 dark:text-green-200">
+					<Icon name="lucide:check-circle" size="16" />
+					<p class="text-sm font-medium">{{ enabledProviders.length }} calendar{{ enabledProviders.length !== 1 ? 's' : '' }} connected</p>
+				</div>
+				<p class="mt-1 text-xs text-green-600 dark:text-green-300">External events will be automatically synced and displayed in your calendar views.</p>
+			</div>
+
+			<!-- Configuration Notice -->
+			<DynectAlert variant="info" type="complex" title="Setup Required">
+				<div>
+					<p>To enable external calendar integration, you need to configure API credentials for each provider in your application settings.</p>
+					<ul class="mt-2 list-inside list-disc space-y-1 text-xs">
+						<li>Google Calendar: Requires Google API credentials</li>
+						<li>Microsoft Outlook: Requires Microsoft Graph API registration</li>
+					</ul>
+				</div>
+			</DynectAlert>
+		</CardContent>
+	</Card>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+interface LocationDisplayProps {
+	location?: string;
+	showIcon?: boolean;
+	showTooltip?: boolean;
+	compact?: boolean;
+	iconSize?: number;
+}
+
+const props = withDefaults(defineProps<LocationDisplayProps>(), {
+	showIcon: true,
+	showTooltip: true,
+	compact: false,
+	iconSize: 12,
+});
+
+const hasLocation = computed(() => Boolean(props.location?.trim()));
+
+const displayText = computed(() => {
+	if (!props.location) return '';
+
+	if (props.compact && props.location.length > 20) {
+		return props.location.substring(0, 17) + '...';
+	}
+
+	return props.location;
+});
+
+const iconClasses = computed(() => ['shrink-0 text-current opacity-70', props.compact ? 'mr-1' : 'mr-1.5']);
+</script>
+
+<template>
+	<div v-if="hasLocation" class="flex items-center">
+		<Popover v-if="showTooltip && location">
+			<PopoverTrigger as-child>
+				<div class="flex cursor-help items-center">
+					<Icon v-if="showIcon" name="lucide:map-pin" :size="iconSize" :class="iconClasses" aria-hidden="true" />
+					<span v-if="!compact || !showIcon" class="truncate text-current opacity-80" :class="{ 'text-xs': compact }">
+						{{ displayText }}
+					</span>
+				</div>
+			</PopoverTrigger>
+			<PopoverContent class="w-auto max-w-xs p-2" side="top" align="start">
+				<div class="flex items-start gap-2">
+					<Icon name="lucide:map-pin" size="14" class="text-text-body mt-0.5 shrink-0" aria-hidden="true" />
+					<div class="text-sm">
+						<div class="font-medium">Location</div>
+						<div class="text-text-body">{{ location }}</div>
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+
+		<!-- Non-tooltip version -->
+		<div v-else class="flex items-center">
+			<Icon v-if="showIcon" name="lucide:map-pin" :size="iconSize" :class="iconClasses" aria-hidden="true" />
+			<span v-if="!compact || !showIcon" class="truncate text-current opacity-80" :class="{ 'text-xs': compact }" :title="location">
+				{{ displayText }}
+			</span>
+		</div>
+	</div>
+</template>