@bagelink/vue 1.2.33 → 1.2.41

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

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import type { SetupContext } from 'vue'
+import type { SetupContext, ComponentPublicInstance } from 'vue'
 import type { CalendarEvent, WeekStart } from '../CalendarTypes'
-import type { PopoverState } from '../utils'
-import { Card, fmtDate } from '@bagelink/vue'
+import { formatDate } from '@bagelink/vue'
 import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
-import {
-	openPopover as openPopoverUtil,
-	closePopover as closePopoverUtil,
-} from '../utils'
 
 interface WeekViewEvent extends CalendarEvent {
 	top: number
@@ -31,6 +26,7 @@ const props = withDefaults(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()
@@ -43,29 +39,23 @@ 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
+	startDay: -1, // Index of the starting day
+	endDay: -1, // Index of the ending day
+	start: undefined as { x: number, y: number } | undefined,
+	end: undefined as { x: number, y: number } | undefined,
+	startTime: undefined as Date | undefined,
+	endTime: undefined as Date | undefined
 })
 
-// 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
-}
-
 // Time indicators
 const currentTimeTop = ref(0)
 const isToday = ref(false)
-const currentTimeInterval = ref(null as any)
+const currentTimeInterval = ref<any>()
+
+const timeSlotsContainer = ref<HTMLElement>()
+const calendarGrid = ref<HTMLElement>()
+const dayColumns = ref<HTMLElement[]>([])
+const dayColumnsContainer = ref<HTMLElement>()
 
 // Calculate week days based on start date and week start preference
 const weekDays = computed(() => {
@@ -76,6 +66,7 @@ const weekDays = computed(() => {
 	// Adjust to start of week
 	const dayOfWeek = start.getDay()
 	start.setDate(start.getDate() - dayOfWeek + weekStartOffset)
+	start.setHours(0, 0, 0, 0) // Set time to start of day
 
 	// Create array of 7 day dates
 	for (let i = 0; i < 7; i++) {
@@ -118,18 +109,18 @@ const processedEvents = computed(() => {
 
 		if (dayIndex === -1) return
 
-		// Calculate vertical positioning
+		// Calculate vertical positioning - make sure to use the same formula everywhere
 		const startMinutes = startDate.getHours() * 60 + startDate.getMinutes()
 		const endMinutes = endDate.getHours() * 60 + endDate.getMinutes()
-		const top = (startMinutes / slotDuration) * (slotHeight / 2)
-		const height = Math.max(((endMinutes - startMinutes) / slotDuration) * (slotHeight / 2), 30)
+		const top = (startMinutes / slotDuration) * slotHeight
+		const height = Math.max(((endMinutes - startMinutes) / slotDuration) * slotHeight, 30)
 
 		const weekEvent: WeekViewEvent = {
 			...event,
 			top,
 			height,
 			left: 0,
-			width: 95,
+			width: 100,
 			overlappingEvents: 0,
 			position: 0
 		}
@@ -160,23 +151,103 @@ const processedEvents = computed(() => {
 })
 
 // Mouse event handlers for drag-to-create functionality
-function handleMouseDown(e: MouseEvent) {
-	const target = e.target as HTMLElement
-	if (!target.closest('.time-slot')) return
+function handleMouseDown(e: MouseEvent, day: Date) {
+	if (!calendarGrid.value || !dayColumnsContainer.value) return
+
+	// Find the clicked day column
+	let clickedDayIndex = -1
+	for (let i = 0; i < dayColumns.value.length; i++) {
+		const columnEl = dayColumns.value[i]
+		if (!columnEl) continue
+
+		const rect = columnEl.getBoundingClientRect()
+		if (e.clientX >= rect.left && e.clientX <= rect.right) {
+			clickedDayIndex = i
+			break
+		}
+	}
+
+	if (clickedDayIndex === -1) return
+
+	// Get the clicked day column's position and dimensions
+	const dayColumnRect = dayColumns.value[clickedDayIndex].getBoundingClientRect()
+	const dayColumnsRect = dayColumnsContainer.value.getBoundingClientRect()
 
 	dragState.value.isDragging = true
-	dragState.value.start = { x: e.clientX, y: e.clientY }
-	dragState.value.startTime = getTimeFromPosition(e.clientX, e.clientY)
+	dragState.value.startDay = clickedDayIndex
+	dragState.value.endDay = clickedDayIndex
+	dragState.value.start = {
+		x: dayColumnRect.left - dayColumnsRect.left, // Left edge of the day column
+		y: e.clientY - dayColumnsRect.top
+	}
+	dragState.value.end = {
+		x: dayColumnRect.right - dayColumnsRect.left, // Right edge of the day column
+		y: e.clientY - dayColumnsRect.top
+	}
+
+	// Create a clean copy of the day
+	const cleanDay = new Date(day)
+	cleanDay.setHours(0, 0, 0, 0)
+
+	const startTime = getTimeFromPosition(e.clientY, cleanDay)
+	dragState.value.startTime = startTime
 
 	document.addEventListener('mousemove', handleMouseMove)
 	document.addEventListener('mouseup', handleMouseUp)
 }
 
 function handleMouseMove(e: MouseEvent) {
-	if (!dragState.value.isDragging) return
+	if (!dragState.value.isDragging || !dragState.value.start || !dayColumns.value.length || !calendarGrid.value || !dayColumnsContainer.value) return
+
+	// Find which day column we're hovering over
+	let targetDayIndex = -1
+	for (let i = 0; i < dayColumns.value.length; i++) {
+		const columnEl = dayColumns.value[i]
+		if (!columnEl) continue
+
+		const rect = columnEl.getBoundingClientRect()
+		if (e.clientX >= rect.left && e.clientX <= rect.right) {
+			targetDayIndex = i
+			break
+		}
+	}
+
+	if (targetDayIndex === -1) return
+
+	// Update which days are selected
+	const dayColumnsRect = dayColumnsContainer.value.getBoundingClientRect()
+	const minDayIndex = Math.min(dragState.value.startDay, targetDayIndex)
+	const maxDayIndex = Math.max(dragState.value.startDay, targetDayIndex)
+
+	// Get the left edge of the leftmost selected day
+	const leftDayEl = dayColumns.value[minDayIndex]
+	if (!leftDayEl) return
+	const leftDayRect = leftDayEl.getBoundingClientRect()
+	const leftEdge = leftDayRect.left - dayColumnsRect.left
+
+	// Get the right edge of the rightmost selected day
+	const rightDayEl = dayColumns.value[maxDayIndex]
+	if (!rightDayEl) return
+	const rightDayRect = rightDayEl.getBoundingClientRect()
+	const rightEdge = rightDayRect.right - dayColumnsRect.left
+
+	dragState.value.endDay = targetDayIndex
+	dragState.value.end = {
+		x: rightEdge,
+		y: e.clientY - dayColumnsRect.top
+	}
+
+	// Ensure the selection spans the full width of all selected days
+	dragState.value.start.x = leftEdge
 
-	dragState.value.end = { x: e.clientX, y: e.clientY }
-	dragState.value.endTime = getTimeFromPosition(e.clientX, e.clientY)
+	if (targetDayIndex >= 0 && targetDayIndex < weekDays.value.length) {
+		// Create a clean copy of the day
+		const targetDay = new Date(weekDays.value[targetDayIndex])
+		targetDay.setHours(0, 0, 0, 0)
+
+		const endTime = getTimeFromPosition(e.clientY, targetDay)
+		dragState.value.endTime = endTime
+	}
 }
 
 function handleMouseUp() {
@@ -185,39 +256,53 @@ function handleMouseUp() {
 	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]
+	// Ensure end time is after start time - handle multi-day and reversed selections
+	if (dragState.value.startDay > dragState.value.endDay
+		|| (dragState.value.startDay === dragState.value.endDay && 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
+		startDay: -1,
+		endDay: -1,
+		start: undefined,
+		end: undefined,
+		startTime: undefined,
+		endTime: undefined
 	}
 
 	document.removeEventListener('mousemove', handleMouseMove)
 	document.removeEventListener('mouseup', handleMouseUp)
 }
 
-function getTimeFromPosition(x: number, y: number): Date {
-	const rect = document.querySelector('.time-slots')?.getBoundingClientRect()
-	if (!rect) return new Date()
+function getTimeFromPosition(y: number, day: Date): Date {
+	if (!calendarGrid.value || !timeSlotsContainer.value) return new Date(day)
+
+	const gridRect = calendarGrid.value.getBoundingClientRect()
+
+	// Calculate relative Y position
+	const relativeY = y - gridRect.top
 
-	const dayIndex = Math.floor((x - rect.left) / (rect.width / 7))
-	const minutes = Math.floor((y - rect.top) / (slotHeight / 2)) * slotDuration
+	// Use the same formula as for events
+	const minutesPerSlot = slotDuration
+	const slotsFromTop = relativeY / slotHeight
+	const minutes = Math.floor(slotsFromTop * minutesPerSlot)
 
-	const date = new Date(weekDays.value[dayIndex])
-	date.setHours(Math.floor(minutes / 60))
-	date.setMinutes(minutes % 60)
+	const date = new Date(day)
+	date.setHours(Math.floor(minutes / 60) - 1)
+	const roundedMinutes = Math.round((minutes % 60) / 5) * 5
+	date.setMinutes(roundedMinutes)
+	date.setSeconds(0)
+	date.setMilliseconds(0)
 
 	return date
 }
 
-// Update the current time indicator position
+// Update the current time indicator to use the same calculation as events
 function updateCurrentTimeIndicator() {
 	const now = new Date()
 
@@ -227,37 +312,52 @@ function updateCurrentTimeIndicator() {
 		&& day.getFullYear() === now.getFullYear()
 	)
 
-	// Calculate position for the current time line
+	// Calculate position for the current time line - use same formula as events
 	const minutes = now.getHours() * 60 + now.getMinutes()
-	currentTimeTop.value = (minutes / slotDuration) * (slotHeight / 2)
+	currentTimeTop.value = (minutes / slotDuration) * slotHeight
 }
 
-// Wrapper functions for popover utilities
-function openPopover(event: CalendarEvent, e: MouseEvent) {
-	openPopoverUtil(
-		event,
-		e,
-		popoverState,
-		!!slots.eventContent,
-		(evt) => { emit('eventClick', evt) }
-	)
+// Update the event handling to emit the openPopover event
+function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
+	if (!slots.eventContent) {
+		emit('eventClick', event)
+		return
+	}
+
+	// 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)
+	}
 }
 
-function closePopover() {
-	closePopoverUtil(popoverState)
+function setDayColumnRef(el: Element | ComponentPublicInstance | null | undefined, index: number) {
+	// Ensure the array is the right size
+	while (dayColumns.value.length <= index) {
+		dayColumns.value.push(null as unknown as HTMLElement)
+	}
+
+	if (el) {
+		dayColumns.value[index] = el instanceof Element ? el as HTMLElement : (el.$el as HTMLElement)
+	} else {
+		// If el is undefined or null, we might still want to keep track of this slot
+		dayColumns.value[index] = null as unknown as HTMLElement
+	}
 }
 
 // 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)
 
@@ -269,13 +369,13 @@ onUnmounted(() => {
 
 <template>
 	<div class="w-100p overflow-hidden m_overflow h-100p grid">
-		<div class="weekGrid border-bottom me-1">
+		<div ref="calendarGrid" class="weekGrid border-bottom me-1">
 			<div />
 			<div
 				v-for="day in weekDays" :key="day.toISOString()"
 				class="day-header p-05 txt-center"
 			>
-				{{ fmtDate(day, { fmt: 'DDD' }) }}
+				{{ formatDate(day, { fmt: 'DDD' }) }}
 				<span
 					class="txt-12 round p-025"
 					:class="{
@@ -283,24 +383,31 @@ onUnmounted(() => {
 						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
 					}"
 				>
-					{{ fmtDate(day, { fmt: 'DD' }) }}
+					{{ formatDate(day, { fmt: 'DD' }) }}
 				</span>
 			</div>
 		</div>
 		<div class="overflow h-100p pe-05">
-			<div class="weekGrid border-end relative" @mousedown="handleMouseDown">
-				<div>
+			<div ref="dayColumnsContainer" class="weekGrid border-end relative">
+				<div ref="timeSlotsContainer">
 					<div v-for="slot in timeSlots" :key="slot.time" class="txt-light txt-12 color-gray flex justify-content-center bg-gray-light border-start" :style="{ height: `${slotHeight}px` }">
 						{{ slot.time }}
 					</div>
 				</div>
 
-				<div v-if="isToday" class=" absolute end w-100p z-2 flex pointer-events-none ps-4-5" :style="{ top: `${currentTimeTop}px` }">
+				<!-- Current time indicator - ensure it aligns with the time slots and events -->
+				<div v-if="isToday" class="absolute end w-100p z-2 flex pointer-events-none ps-4-5" :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="day in weekDays" :key="day.toISOString()" class="day-column top bottom border-start relative">
+				<div
+					v-for="(day, index) in weekDays"
+					:key="day.toISOString()"
+					:ref="el => setDayColumnRef(el, index)"
+					class="day-column top bottom border-start relative"
+					@mousedown="handleMouseDown($event, day)"
+				>
 					<template
 						v-for="event in processedEvents.filter(e =>
 							new Date(e.start_time).toDateString() === day.toDateString())"
@@ -315,118 +422,104 @@ onUnmounted(() => {
 								width: `${event.width}%`,
 								backgroundColor: event.color || 'var(--bgl-primary)',
 							}"
-							@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+							@mousedown.stop
+							@click.stop="handleEventSelection(event, $event)"
 						>
-							<div class="overflow-hidden color-text-light p-025 txt12 h-100p">
+							<div class="overflow-hidden color-white p-025 txt12 h-100p">
 								<div class="white-space ellipsis-1">
 									{{ event.title }}
 								</div>
 								<div class="txt10 opacity-8">
-									{{ fmtDate(event.start_time, { fmt: 'HH:mm' }) }}
+									{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }} - {{ formatDate(event.end_time, { fmt: 'HH:mm' }) }}
 								</div>
 							</div>
 						</div>
 					</template>
 				</div>
 
-				<!-- Drag selection preview -->
+				<!-- Drag selection preview - ensure it aligns with time slots and events -->
 				<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 overflow-hidden opacity-7 z-1"
 					:style="{
 						left: `${Math.min(dragState.start.x, dragState.end.x)}px`,
 						top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
 						width: `${Math.abs(dragState.end.x - dragState.start.x)}px`,
 						height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
 					}"
-				/>
+				>
+					<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 -->
-		<Card
-			v-if="showPopover && activeEvent"
-			ref="popoverRef"
-			v-click-outside="closePopover"
-			thin
-			class="custom-popover fixed z-999 radius-05 bg-white w350"
-			:style="{
-				top: `${popoverPosition.top}px`,
-				left: `${popoverPosition.left}px`,
-				maxWidth: `${popoverPosition.width}px`,
-			}"
-		>
-			<slot name="eventContent" :event="activeEvent" />
-		</Card>
 		<div class="border-bottom me-1" />
 	</div>
 </template>
 
 <style scoped>
-.weekGrid{
+.weekGrid {
 	display: grid;
 	grid-template-columns: 5rem repeat(7, 1fr);
 }
 
 .days-column {
-  flex-grow: 1;
-  display: flex;
-
-}
-
-.time-slot {
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
+	flex-grow: 1;
+	display: flex;
 }
 
-.time-slots {
-  flex-grow: 1;
-  display: flex;
-  overflow: auto;
-  position: relative;
+.day-column {
+	flex: 1;
+	position: relative; /* Ensure absolute positioning works properly */
+	min-height: 100%; /* Ensure column fills the full height */
 }
 
-.day-column {
-  flex: 1;
+/* Add consistent styling for the time slots */
+.txt-light {
+	padding: 0.5rem 0;
+	box-sizing: border-box;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
 }
 
 .event {
-  margin-right: 2px;
+	margin-right: 2px;
+	box-sizing: border-box;
 }
 
 .event:hover {
-  z-index: 1;
+	z-index: 2;
 }
 
 .drag-preview {
-  border: 2px solid var(--bgl-primary);
+	border: 1px solid var(--bgl-primary);
+	background-color: rgba(var(--bgl-primary-rgb), 0.1);
+	box-sizing: border-box; /* Ensure consistent sizing */
 }
 
 .current-time-line {
-  height: 2px;
+	height: 2px;
+	background-color: var(--bgl-primary);
 }
 
-.custom-popover {
-  min-width: 250px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn 0.2s ease;
-  transform-origin: center left;
+.current-time-dot {
+	background-color: var(--bgl-primary);
+	margin-right: -5px; /* Adjust dot position */
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+/* This ensures all grid content aligns properly */
+.overflow {
+	position: relative;
 }
-@media screen and (max-width: 910px) {
 
+/* Time column headers should be aligned with their content */
+.day-header {
+	box-sizing: border-box;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 </style>

package/src/components/form/inputs/DateInput.vue

@@ -150,7 +150,7 @@ onMounted(() => {
 <template>
 	<div class="bagel-input" :class="{ small }" :title="label" @focusin="handleFocus">
 		<label v-if="label">
-			{{ label }}
+			<!-- {{ label }} -->
 			<span v-if="required" class="required">*</span>
 		</label>
 		<Dropdown
@@ -163,7 +163,7 @@ onMounted(() => {
 				<div ref="datePickerRef" class="date-picker-container" @mousedown.stop @click.stop>
 					<TextInput
 						:modelValue="formatDisplayDate(selectedDate)"
-						icon="calendar"
+						iconStart="calendar"
 						:min="formatDisplayDate(min)"
 						:max="formatDisplayDate(max)"
 						:required="required"
@@ -196,8 +196,19 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped>
+<style>
 .date-picker-container {
 	width: 100%;
 }
+.date-picker-container .date-input{
+	--input-bg: transparent;
+	--input-font-size: 12px;
+	opacity: 0.6;
+	--input-height: 20px;
+	width: 75px;
+}
+.date-picker-container .txtInputIconStart input{
+	padding: 0 !important;
+	padding-inline-start: 1.25rem !important;
+}
 </style>

package/src/components/form/inputs/DatePicker.vue

@@ -437,6 +437,13 @@ function selectDate(date: Date | null) {
 
 .day:hover:not(.disabled) {
 	background-color: var(--input-bg);
+	color: var(--bgl-text-color);
+	outline: 1px solid var(--border-color);
+}
+.day:hover:not(.disabled).selected {
+	filter: var(--bgl-hover-filter);
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .day.selected {

package/src/composables/useDevice.ts

@@ -1,24 +1,35 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 export function useDevice() {
 	const innerWidth = ref(window.innerWidth)
 	const isMobile = ref(window.innerWidth < 768)
+	const scrollY = ref(window.scrollY)
+	const scrollX = ref(window.scrollX)
+	const innerHeight = ref(window.innerHeight)
 
 	function updateDeviceInfo() {
 		innerWidth.value = window.innerWidth
 		isMobile.value = window.innerWidth < 768
+		scrollY.value = window.scrollY
+		scrollX.value = window.scrollX
+		innerHeight.value = window.innerHeight
 	}
 
 	onMounted(() => {
 		window.addEventListener('resize', updateDeviceInfo)
+		window.addEventListener('scroll', updateDeviceInfo)
 	})
 
 	onUnmounted(() => {
 		window.removeEventListener('resize', updateDeviceInfo)
+		window.removeEventListener('scroll', updateDeviceInfo)
 	})
 
 	return {
 		innerWidth,
-		isMobile
+		isMobile,
+		scrollY,
+		scrollX,
+		innerHeight,
 	}
 }

package/src/styles/layout.css

@@ -986,6 +986,20 @@
     min-height: 100%;
 }
 
+
+.vh-min-100,
+.min100vh,
+.min-100vh,
+.h-min100vh {
+    min-height: 100vh !important;
+}
+.h-min-unset,
+.min-h-unset {
+    min-height: 100%;
+}
+
+
+
 .min-0,
 .min0,
 .wmin0p,