@bagelink/vue 1.2.39 → 1.2.43

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

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 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[]
@@ -17,6 +12,7 @@ const props = defineProps<{
 const emit = defineEmits<{
 	(e: 'eventClick', event: CalendarEvent): void
 	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
+	(e: 'openPopover', event: CalendarEvent, position?: { top: number, left: number }): void
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -40,19 +36,6 @@ 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 = []
@@ -100,7 +83,7 @@ function updateCurrentTimeIndicator() {
 	// Check if today is the selected day
 	isToday.value = now.toDateString() === props.startDate.toDateString()
 
-	// Calculate the position for the current time line
+	// Calculate the position for the current time line - use same formula as events
 	const minutes = now.getHours() * 60 + now.getMinutes()
 	currentTimeTop.value = (minutes / slotDuration) * slotHeight
 }
@@ -153,27 +136,39 @@ 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
+	// Calculate time using the same formula as for events
+	const relativeY = y - rect.top
+	const minutesPerSlot = slotDuration
+	const slotsFromTop = relativeY / slotHeight
+	const minutes = Math.floor(slotsFromTop * minutesPerSlot)
+
 	const date = new Date(props.startDate)
 	date.setHours(Math.floor(minutes / 60))
 	date.setMinutes(minutes % 60)
+	date.setSeconds(0)
+	date.setMilliseconds(0)
 
 	return date
 }
 
-// Popover handling functions
-function openPopover(event: CalendarEvent, e: MouseEvent) {
-	openPopoverUtil(
-		event,
-		e,
-		popoverState,
-		!!slots.eventContent,
-		(evt) => { emit('eventClick', evt) }
-	)
-}
+// Update event handling to emit the openPopover event
+function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
+	if (!slots.eventContent) {
+		emit('eventClick', event)
+		return
+	}
 
-function closePopover() {
-	closePopoverUtil(popoverState)
+	// Calculate position from DOM event if available
+	if (domEvent) {
+		const rect = (domEvent.currentTarget as HTMLElement).getBoundingClientRect()
+		const position = {
+			top: rect.top + window.scrollY + (rect.height / 2),
+			left: rect.left + window.scrollX + rect.width + 10
+		}
+		emit('openPopover', event, position)
+	} else {
+		emit('openPopover', event)
+	}
 }
 
 // Lifecycle hooks
@@ -218,7 +213,7 @@ onUnmounted(() => {
 				</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 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>
@@ -231,14 +226,14 @@ onUnmounted(() => {
 							height: `${event.height}px`,
 							backgroundColor: event.color || 'var(--bgl-primary)',
 						}"
-						@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+						@click.stop="handleEventSelection(event, $event)"
 					>
 						<div class="event-content">
-							<div class=" white-space ellipsis-1">
+							<div class="white-space ellipsis-1">
 								{{ event.title }}
 							</div>
 							<div class="event-time opacity-8">
-								{{ formatDate(new Date(event.start_time)) }}
+								{{ formatDate(new Date(event.start_time), { fmt: 'HH:mm' }) }} - {{ formatDate(new Date(event.end_time), { fmt: 'HH:mm' }) }}
 							</div>
 						</div>
 					</div>
@@ -247,128 +242,112 @@ onUnmounted(() => {
 				<!-- Drag selection preview -->
 				<div
 					v-if="dragState.isDragging && dragState.start && dragState.end"
-					class="drag-preview absolute bg-primary pointer-events-none"
+					class="drag-preview absolute bg-primary-tint pointer-events-none z-1"
 					:style="{
 						top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
 						height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
+						left: '10px',
+						right: '10px',
 					}"
-				/>
+				>
+					<div class="color-primary txt-12 p-025">
+						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }}
+						-
+						{{ dragState.endTime ? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
+					</div>
+				</div>
 			</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{
+.dayGrid {
 	display: grid;
 	grid-template-columns: 5rem 1fr;
 }
 
 .time-column {
-  width: 80px;
-  flex-shrink: 0;
+	width: 80px;
+	flex-shrink: 0;
 }
 
 .events-column {
-  flex-grow: 1;
-  position: relative;
-  border-inline-start: 1px solid var(--border-color);
+	flex-grow: 1;
+	position: relative;
+	border-inline-start: 1px solid var(--border-color);
+	min-height: 100%; /* Ensure the column fills the full height */
 }
 
 .date-header {
-  padding: 0.5rem;
-  text-align: center;
+	padding: 0.5rem;
+	text-align: center;
 }
+
 .day-header .events-column {
-  border-inline-start: 1px solid transparent;
+	border-inline-start: 1px solid transparent;
 }
 
 .time-slot {
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	height: 60px; /* Match this with the slotHeight variable */
+	display: flex;
+	align-items: flex-start; /* Align to top to match events */
+	justify-content: center;
+	padding: 0.5rem 0;
+	box-sizing: border-box;
 }
 
 .time-slots {
-  flex-grow: 1;
-  display: flex;
-  overflow: auto;
-  position: relative;
+	flex-grow: 1;
+	display: flex;
+	overflow: auto;
+	position: relative;
 }
 
 .event {
-  left: 10px;
-  right: 10px;
+	left: 10px;
+	right: 10px;
+	box-sizing: border-box;
 }
 
 .event:hover {
-  z-index: 2;
-  transform: scale(1.02);
+	z-index: 2;
+	transform: scale(1.02);
 }
 
 .event-content {
-  padding: 0.5rem;
-  color: white;
-  font-size: 0.9rem;
-  height: 100%;
-  overflow: hidden;
+	padding: 0.5rem;
+	color: white;
+	font-size: 0.9rem;
+	height: 100%;
+	overflow: hidden;
 }
 
 .event-title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .event-time {
-  font-size: 0.8rem;
+	font-size: 0.8rem;
 }
 
 .drag-preview {
+	border: 1px solid var(--bgl-primary);
 	background-color: rgba(var(--bgl-primary-rgb), 0.1);
+	box-sizing: border-box;
 }
 
 .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;
+	height: 2px;
+	background-color: var(--bgl-primary);
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+.current-time-dot {
+	background-color: var(--bgl-primary);
+	margin-right: -5px; /* Adjust dot position */
 }
 </style>

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

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
-import type { PopoverState } from '../utils'
-import { Card, fmtDate } from '@bagelink/vue'
-import { ref, computed, useSlots } from 'vue'
-import {
-	openPopover as openPopoverUtil,
-	closePopover as closePopoverUtil,
-} from '../utils'
+import { fmtDate } from '@bagelink/vue'
+import { computed, useSlots } from 'vue'
 
 interface MonthViewEvent {
 	date: Date
@@ -23,6 +18,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
 	(e: 'eventClick', event: CalendarEvent): void
+	(e: 'openPopover', event: CalendarEvent, position?: { top: number, left: number }): void
 }>()
 
 const slots: SetupContext['slots'] = useSlots()
@@ -30,19 +26,6 @@ const slots: SetupContext['slots'] = useSlots()
 // Responsive state
 const isMobile = computed(() => window.innerWidth < 768)
 
-// 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
-}
-
 // Calendar data
 const weekDays = computed(() => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
 
@@ -102,19 +85,24 @@ const currentMonth = computed(() => {
 	return days
 })
 
-// Popover handling functions
-function openPopover(event: CalendarEvent, e: MouseEvent) {
-	openPopoverUtil(
-		event,
-		e,
-		popoverState,
-		!!slots.eventContent,
-		(evt) => { emit('eventClick', evt) }
-	)
-}
+// Update event handling to emit the openPopover event
+function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
+	if (!slots.eventContent) {
+		emit('eventClick', event)
+		return
+	}
 
-function closePopover() {
-	closePopoverUtil(popoverState)
+	// Calculate position from DOM event if available
+	if (domEvent) {
+		const rect = (domEvent.currentTarget as HTMLElement).getBoundingClientRect()
+		const position = {
+			top: rect.top + window.scrollY + (rect.height / 2),
+			left: rect.left + window.scrollX + rect.width + 10
+		}
+		emit('openPopover', event, position)
+	} else {
+		emit('openPopover', event)
+	}
 }
 </script>
 
@@ -149,7 +137,7 @@ function closePopover() {
 							:key="event.id"
 							class="event-item"
 							:style="{ backgroundColor: event.color || 'var(--bgl-primary)' }"
-							@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+							@click.stop="handleEventSelection(event, $event)"
 						>
 							<div class="event-title">
 								{{ event.title }}
@@ -162,22 +150,6 @@ function closePopover() {
 				</div>
 			</div>
 		</div>
-
-		<!-- Custom Popover -->
-		<Card
-			v-if="showPopover && activeEvent"
-			ref="popoverRef"
-			v-click-outside="closePopover"
-			thin
-			class="custom-popover"
-			:style="{
-				top: `${popoverPosition.top}px`,
-				left: `${popoverPosition.left}px`,
-				maxWidth: `${popoverPosition.width}px`,
-			}"
-		>
-			<slot name="eventContent" :event="activeEvent" />
-		</Card>
 	</div>
 </template>