@bagelink/vue 1.2.15 → 1.2.20

package/src/components/calendar/views/AgendaView.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import type { CalendarEvent } from '../CalendarTypes'
+import { formatDate } from '@bagelink/vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+interface AgendaViewEvent extends CalendarEvent {
+	dayLabel: string
+	isToday: boolean
+	height: number
+}
+
+const props = defineProps<{
+	events: CalendarEvent[]
+	startDate: Date
+}>()
+
+const emit = defineEmits<{
+	(e: 'eventClick', event: CalendarEvent): void
+	(e: 'dateChange', date: Date): void
+}>()
+
+// UI references
+const containerRef = ref<HTMLElement | null>(null)
+const currentDate = ref<Date | null>(null)
+
+// Process events for agenda view
+const processedEvents = computed(() => {
+	const events: AgendaViewEvent[] = []
+	const today = new Date().toDateString()
+
+	// Sort events by start time
+	const sortedEvents = [...props.events].sort(
+		(a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
+	)
+
+	// Group events by date
+	const eventsByDate = sortedEvents.reduce((acc, event) => {
+		const date = new Date(event.start_time).toDateString()
+		if (!acc[date]) acc[date] = []
+		acc[date].push(event)
+		return acc
+	}, {} as { [key: string]: CalendarEvent[] })
+
+	// Process each date's events
+	Object.entries(eventsByDate).forEach(([dateStr, dateEvents]) => {
+		const date = new Date(dateStr)
+		const isToday = date.toDateString() === today
+
+		dateEvents.forEach((event) => {
+			const duration = (new Date(event.end_time).getTime() - new Date(event.start_time).getTime()) / (1000 * 60)
+			// Limit height: 60px per 30 minutes, max 200px
+			const height = Math.min(duration / 30 * 60, 200)
+
+			events.push({
+				...event,
+				dayLabel: date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }),
+				isToday,
+				height
+			})
+		})
+	})
+
+	return events
+})
+
+// Handle scroll to determine visible date
+function handleScroll() {
+	if (!containerRef.value) return
+
+	const container = containerRef.value
+	const eventElements = container.querySelectorAll('.event')
+	let mostVisibleEvent: Element | null = null
+	let maxVisibility = 0
+
+	// Find the event that's most visible in the viewport
+	eventElements.forEach((element) => {
+		const rect = element.getBoundingClientRect()
+		const containerRect = container.getBoundingClientRect()
+
+		// Calculate how much of the element is visible
+		const visibleTop = Math.max(rect.top, containerRect.top)
+		const visibleBottom = Math.min(rect.bottom, containerRect.bottom)
+		const visibleHeight = Math.max(0, visibleBottom - visibleTop)
+		const visibility = visibleHeight / rect.height
+
+		if (visibility > maxVisibility) {
+			maxVisibility = visibility
+			mostVisibleEvent = element
+		}
+	})
+
+	// Update current date if a new date is most visible
+	if (mostVisibleEvent) {
+		const element = mostVisibleEvent as HTMLElement
+		const dateStr = element.dataset.date || element.getAttribute('data-date')
+		if (dateStr) {
+			const date = new Date(dateStr)
+			if (!currentDate.value || date.toDateString() !== currentDate.value.toDateString()) {
+				currentDate.value = date
+				emit('dateChange', date)
+			}
+		}
+	}
+}
+
+// Lifecycle hooks
+onMounted(() => {
+	if (containerRef.value) {
+		containerRef.value.addEventListener('scroll', handleScroll)
+	}
+})
+
+onUnmounted(() => {
+	if (containerRef.value) {
+		containerRef.value.removeEventListener('scroll', handleScroll)
+	}
+})
+</script>
+
+<template>
+	<div class="agenda-view">
+		<div class="agenda-header">
+			<div class="time-column">
+				Time
+			</div>
+			<div class="event-column">
+				Event
+			</div>
+		</div>
+		<div ref="containerRef" class="agenda-content">
+			<div
+				v-for="event in processedEvents"
+				:key="event.id"
+				class="event"
+				:style="{
+					height: `${event.height}px`,
+					backgroundColor: event.color || 'var(--bgl-primary)',
+				}"
+				:data-date="event.start_time"
+				@click.stop="emit('eventClick', event)"
+			>
+				<div class="event-content">
+					<div class="event-time">
+						{{ formatDate(event.start_time, 'HH:mm') }}
+					</div>
+					<div class="event-details">
+						<div class="event-title">
+							{{ event.title }}
+						</div>
+						<div class="event-day" :class="{ today: event.isToday }">
+							{{ event.dayLabel }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.agenda-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.agenda-header {
+  display: flex;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.time-column {
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.event-column {
+  flex-grow: 1;
+}
+
+.agenda-content {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.event {
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.event:hover {
+  transform: scale(1.01);
+}
+
+.event-content {
+  display: flex;
+  height: 100%;
+  color: white;
+}
+
+.event-time {
+  width: 100px;
+  flex-shrink: 0;
+  padding: 0.5rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.event-details {
+  flex-grow: 1;
+  padding: 0.5rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.event-title {
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+}
+
+.event-day {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.event-day.today {
+  color: var(--bgl-primary);
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .agenda-header {
+    padding: 0.5rem;
+  }
+
+  .time-column {
+    width: 80px;
+  }
+
+  .event-content {
+    font-size: 0.9rem;
+  }
+
+  .event-time {
+    width: 80px;
+    font-size: 0.8rem;
+  }
+
+  .event-title {
+    font-size: 0.9rem;
+  }
+
+  .event-day {
+    font-size: 0.7rem;
+  }
+}
+</style>

package/src/components/calendar/views/DayView.vue

@@ -0,0 +1,373 @@
+<script setup lang="ts">
+import type { CalendarEvent } from '../CalendarTypes'
+import type { PopoverState } from '../utils'
+import { formatDate } from '@bagelink/vue'
+import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
+import {
+	openPopover as openPopoverUtil,
+	closePopover as closePopoverUtil,
+} from '../utils'
+
+const props = defineProps<{
+	events: CalendarEvent[]
+	startDate: Date
+}>()
+
+const emit = defineEmits<{
+	(e: 'eventClick', event: CalendarEvent): void
+	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
+}>()
+
+const slots = useSlots()
+
+// Configuration constants
+const slotHeight = 60
+const slotDuration = 60
+const timeRange = { start: 0, end: 24 }
+
+// Drag state
+const dragState = ref({
+	isDragging: false,
+	start: null as { x: number, y: number } | null,
+	end: null as { x: number, y: number } | null,
+	startTime: null as Date | null,
+	endTime: null as Date | null
+})
+
+// Time indicators
+const currentTimeTop = ref(0)
+const isToday = ref(false)
+const currentTimeInterval = ref(null as any)
+
+// Popover state
+const activeEvent = ref<CalendarEvent | null>(null)
+const showPopover = ref(false)
+const popoverPosition = ref({ top: 0, left: 0, width: 0, height: 0 })
+const popoverRef = ref<HTMLElement | null>(null)
+
+const popoverState: PopoverState = {
+	activeEvent,
+	showPopover,
+	popoverPosition,
+	popoverRef
+}
+
+// Generate hourly time slots
+const timeSlots = computed(() => {
+	const slots = []
+	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
+		for (let minute = 0; minute < 60; minute += slotDuration) {
+			slots.push({
+				hour,
+				minute,
+				time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+			})
+		}
+	}
+	return slots
+})
+
+// Process events for the current day
+const processedEvents = computed(() => {
+	return props.events
+		.filter((event) => {
+			const eventDate = new Date(event.start_time)
+			return eventDate.toDateString() === props.startDate.toDateString()
+		})
+		.map((event) => {
+			const startDate = new Date(event.start_time)
+			const endDate = new Date(event.end_time)
+
+			const startMinutes = startDate.getHours() * 60 + startDate.getMinutes()
+			const endMinutes = endDate.getHours() * 60 + endDate.getMinutes()
+
+			const top = (startMinutes / slotDuration) * slotHeight
+			const height = Math.max(((endMinutes - startMinutes) / slotDuration) * slotHeight, 30)
+
+			return {
+				...event,
+				top,
+				height
+			}
+		})
+})
+
+// Updates the current time indicator
+function updateCurrentTimeIndicator() {
+	const now = new Date()
+
+	// Check if today is the selected day
+	isToday.value = now.toDateString() === props.startDate.toDateString()
+
+	// Calculate the position for the current time line
+	const minutes = now.getHours() * 60 + now.getMinutes()
+	currentTimeTop.value = (minutes / slotDuration) * slotHeight
+}
+
+// Event handlers for drag-to-create functionality
+function handleMouseDown(e: MouseEvent) {
+	const target = e.target as HTMLElement
+	if (!target.closest('.time-slot')) return
+
+	dragState.value.isDragging = true
+	dragState.value.start = { x: e.clientX, y: e.clientY }
+	dragState.value.startTime = getTimeFromPosition(e.clientY)
+
+	document.addEventListener('mousemove', handleMouseMove)
+	document.addEventListener('mouseup', handleMouseUp)
+}
+
+function handleMouseMove(e: MouseEvent) {
+	if (!dragState.value.isDragging) return
+
+	dragState.value.end = { x: e.clientX, y: e.clientY }
+	dragState.value.endTime = getTimeFromPosition(e.clientY)
+}
+
+function handleMouseUp() {
+	if (!dragState.value.isDragging || !dragState.value.startTime || !dragState.value.endTime) return
+
+	let start = new Date(dragState.value.startTime)
+	let end = new Date(dragState.value.endTime)
+
+	// Ensure end time is after start time
+	if (end < start) [start, end] = [end, start]
+
+	emit('eventCreate', { start_time: start, end_time: end })
+
+	// Reset drag state
+	dragState.value = {
+		isDragging: false,
+		start: null,
+		end: null,
+		startTime: null,
+		endTime: null
+	}
+
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+}
+
+function getTimeFromPosition(y: number): Date {
+	const rect = document.querySelector('.time-slots')?.getBoundingClientRect()
+	if (!rect) return new Date()
+
+	const minutes = Math.floor((y - rect.top) / slotHeight) * slotDuration
+	const date = new Date(props.startDate)
+	date.setHours(Math.floor(minutes / 60))
+	date.setMinutes(minutes % 60)
+
+	return date
+}
+
+// Popover handling functions
+function openPopover(event: CalendarEvent, e: MouseEvent) {
+	openPopoverUtil(
+		event,
+		e,
+		popoverState,
+		!!slots.eventContent,
+		(evt) => { emit('eventClick', evt) }
+	)
+}
+
+function closePopover() {
+	closePopoverUtil(popoverState)
+}
+
+// Lifecycle hooks
+onMounted(() => {
+	document.addEventListener('mousedown', handleMouseDown)
+
+	// Initialize current time indicator and set up interval to update it
+	updateCurrentTimeIndicator()
+	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
+})
+
+onUnmounted(() => {
+	document.removeEventListener('mousedown', handleMouseDown)
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+
+	if (currentTimeInterval.value) {
+		clearInterval(currentTimeInterval.value)
+	}
+})
+</script>
+
+<template>
+	<div class="w-100p overflow-hidden m_overflow h-100p grid">
+		<div class="border-bottom me-1 txt-center p-05 dayGrid">
+			<div />
+			<div>
+				{{ formatDate(startDate) }}
+			</div>
+		</div>
+
+		<div class="overflow h-100p pe-05">
+			<div class="time-slots dayGrid border-end relative" @mousedown="handleMouseDown">
+				<div class="time-column">
+					<div
+						v-for="slot in timeSlots" :key="slot.time"
+						class="time-slot txt-light txt-12 color-gray bg-gray-light border-start"
+						:style="{ height: `${slotHeight}px` }"
+					>
+						{{ slot.time }}
+					</div>
+				</div>
+				<div class="events-column">
+					<!-- Current time indicator -->
+					<div v-if="isToday" class=" absolute end w-100p z-2 flex pointer-events-none" :style="{ top: `${currentTimeTop}px` }">
+						<div class="current-time-dot h-10px aspect-ratio-1 round bg-primary" />
+						<div class="current-time-line w-100p bg-primary" />
+					</div>
+
+					<div
+						v-for="event in processedEvents" :key="event.id"
+						class="event absolute radius-05 overflow-hidden pointer transition z-1"
+						:style="{
+							top: `${event.top}px`,
+							height: `${event.height}px`,
+							backgroundColor: event.color || 'var(--bgl-primary)',
+						}"
+						@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+					>
+						<div class="event-content">
+							<div class=" white-space ellipsis-1">
+								{{ event.title }}
+							</div>
+							<div class="event-time opacity-8">
+								{{ formatDate(new Date(event.start_time)) }}
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Drag selection preview -->
+				<div
+					v-if="dragState.isDragging && dragState.start && dragState.end"
+					class="drag-preview absolute bg-primary pointer-events-none"
+					:style="{
+						top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
+						height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
+					}"
+				/>
+			</div>
+		</div>
+
+		<!-- Custom Popover -->
+		<div
+			v-if="showPopover && activeEvent"
+			ref="popoverRef"
+			v-click-outside="closePopover"
+			class="custom-popover"
+			:style="{
+				top: `${popoverPosition.top}px`,
+				left: `${popoverPosition.left}px`,
+				maxWidth: `${popoverPosition.width}px`,
+			}"
+		>
+			<slot name="eventContent" :event="activeEvent" />
+		</div>
+		<div class="border-bottom me-1" />
+	</div>
+</template>
+
+<style scoped>
+.dayGrid{
+	display: grid;
+	grid-template-columns: 5rem 1fr;
+}
+
+.time-column {
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.events-column {
+  flex-grow: 1;
+  position: relative;
+  border-inline-start: 1px solid var(--border-color);
+}
+
+.date-header {
+  padding: 0.5rem;
+  text-align: center;
+}
+.day-header .events-column {
+  border-inline-start: 1px solid transparent;
+}
+
+.time-slot {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-slots {
+  flex-grow: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
+}
+
+.event {
+  left: 10px;
+  right: 10px;
+}
+
+.event:hover {
+  z-index: 2;
+  transform: scale(1.02);
+}
+
+.event-content {
+  padding: 0.5rem;
+  color: white;
+  font-size: 0.9rem;
+  height: 100%;
+  overflow: hidden;
+}
+
+.event-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-time {
+  font-size: 0.8rem;
+}
+
+.drag-preview {
+	background-color: rgba(var(--bgl-primary-rgb), 0.1);
+}
+
+.current-time-line {
+  height: 2px;
+}
+
+.custom-popover {
+  position: fixed;
+  z-index: 1000;
+  min-width: 250px;
+  max-width: 350px;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: fadeIn 0.2s ease;
+  transform-origin: center left;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>