@bagelink/vue 1.4.109 → 1.4.115

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SetupContext } from 'vue'
 import type { CalendarEvent } from '../CalendarTypes'
-import { fmtDate } from '@bagelink/vue'
+import { formatDate } from '@bagelink/vue'
 import { computed, useSlots } from 'vue'
 
 interface MonthViewEvent {
@@ -115,17 +115,14 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 		</div>
 		<div class="month-grid">
 			<div
-				v-for="day in currentMonth"
-				:key="day.date.toISOString()"
-				class="day-cell"
-				:class="{
+				v-for="day in currentMonth" :key="day.date.toISOString()" class="day-cell" :class="{
 					'current-month': day.isCurrentMonth,
 					'today': day.isToday,
 					'other-month': !day.isCurrentMonth,
 				}"
 			>
 				<div class="day-number">
-					{{ fmtDate(day.date, { fmt: 'DD' }) }}
+					{{ formatDate(day.date, { fmt: 'DD' }) }}
 				</div>
 				<div class="day-events">
 					<template v-if="isMobile">
@@ -133,9 +130,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 					</template>
 					<template v-else>
 						<div
-							v-for="event in day.events"
-							:key="event.id"
-							class="event-item"
+							v-for="event in day.events" :key="event.id" class="event-item"
 							:style="{ backgroundColor: event.color || 'var(--bgl-primary)' }"
 							@click.stop="handleEventSelection(event, $event)"
 						>
@@ -143,7 +138,7 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 								{{ event.title }}
 							</div>
 							<div class="event-time">
-								{{ fmtDate(event.start_time, { fmt: 'HH:mm' }) }}
+								{{ formatDate(event.start_time, 'HH:mm') }}
 							</div>
 						</div>
 					</template>
@@ -155,132 +150,133 @@ function handleEventSelection(event: CalendarEvent, domEvent?: MouseEvent) {
 
 <style scoped>
 .month-view {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
 }
 
 .month-header {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  border-bottom: 1px solid var(--border-color);
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	border-bottom: 1px solid var(--border-color);
 }
 
 .weekday {
-  padding: 0.5rem;
-  text-align: center;
-  color: var(--text-muted);
+	padding: 0.5rem;
+	text-align: center;
+	color: var(--text-muted);
 }
 
 .month-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: repeat(6, 1fr);
-  flex-grow: 1;
-  overflow: auto;
-  border-inline-end: 1px solid var(--border-color);
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	grid-template-rows: repeat(6, 1fr);
+	flex-grow: 1;
+	overflow: auto;
+	border-inline-end: 1px solid var(--border-color);
 
 }
 
 .day-cell {
-  border-inline-start: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-  padding: 0.5rem;
-  min-height: 100px;
-  display: flex;
-  flex-direction: column;
+	border-inline-start: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--border-color);
+	padding: 0.5rem;
+	min-height: 100px;
+	display: flex;
+	flex-direction: column;
 }
 
 .day-number {
-  margin-bottom: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 
 .other-month {
-  background-color: var(--bgl-gray-light);
-  color: var(--bgl-gray);
+	background-color: var(--bgl-gray-light);
+	color: var(--bgl-gray);
 }
 
 .today {
-  background-color: var(--bgl-primary-light);
+	background-color: var(--bgl-primary-light);
 }
 
 .today .day-number {
-  color: var(--bgl-primary);
+	color: var(--bgl-primary);
 }
 
 .day-events {
-  flex-grow: 1;
-  overflow-y: auto;
+	flex-grow: 1;
+	overflow-y: auto;
 }
 
 .event-item {
-  margin-bottom: 0.25rem;
-  padding: 0.25rem;
-  border-radius: 4px;
-  color: white;
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
+	margin-bottom: 0.25rem;
+	padding: 0.25rem;
+	border-radius: 4px;
+	color: white;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
 }
 
 .event-title {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	font-weight: 500;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .event-time {
-  font-size: 0.7rem;
-  opacity: 0.8;
+	font-size: 0.7rem;
+	opacity: 0.8;
 }
 
 .event-dot {
-  width: 6px;
-  height: 6px;
-  background-color: var(--bgl-primary);
-  border-radius: 50%;
-  margin: 0.25rem auto;
+	width: 6px;
+	height: 6px;
+	background-color: var(--bgl-primary);
+	border-radius: 50%;
+	margin: 0.25rem auto;
 }
 
 .custom-popover {
-  position: fixed;
-  z-index: 1000;
-  min-width: 250px;
-  max-width: 350px;
-  background-color: white;
-  border-radius: var(--btn-border-radius);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  animation: fadeIn 0.2s ease;
-  transform-origin: center left;
+	position: fixed;
+	z-index: 1000;
+	min-width: 250px;
+	max-width: 350px;
+	background-color: white;
+	border-radius: var(--btn-border-radius);
+	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);
-  }
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
 @media (max-width: 768px) {
-  .day-cell {
-    min-height: 60px;
-    padding: 0.25rem;
-  }
-
-  .day-number {
-    font-size: 0.8rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .weekday {
-    font-size: 0.8rem;
-    padding: 0.25rem;
-  }
+	.day-cell {
+		min-height: 60px;
+		padding: 0.25rem;
+	}
+
+	.day-number {
+		font-size: 0.8rem;
+		margin-bottom: 0.25rem;
+	}
+
+	.weekday {
+		font-size: 0.8rem;
+		padding: 0.25rem;
+	}
 }
 </style>

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

@@ -36,6 +36,11 @@ const slotHeight = 60
 const slotDuration = 60
 const timeRange = { start: 0, end: 24 }
 
+// Check if drag-to-create is enabled based on whether eventCreate handler is provided
+const isDragToCreateEnabled = computed(() => {
+	return !!slots.eventCreate || emit.hasOwnProperty('eventCreate')
+})
+
 // Drag state
 const dragState = ref({
 	isDragging: false,
@@ -92,11 +97,28 @@ const timeSlots = computed(() => {
 	return slots
 })
 
+// Calculate drag preview positioning using the same formula as events
+const dragPreviewPosition = computed(() => {
+	if (!dragState.value.isDragging || !dragState.value.startTime || !dragState.value.endTime) {
+		return null
+	}
+
+	// Use the exact same calculation as events
+	const startMinutes = dragState.value.startTime.getHours() * 60 + dragState.value.startTime.getMinutes()
+	const endMinutes = dragState.value.endTime.getHours() * 60 + dragState.value.endTime.getMinutes()
+
+	const top = (startMinutes / slotDuration) * slotHeight
+	const height = Math.max(((endMinutes - startMinutes) / slotDuration) * slotHeight, 30)
+
+	return { top, height }
+})
+
 // Process events for display with positioning calculations
 const processedEvents = computed(() => {
 	const events: WeekViewEvent[] = []
-	const overlappingGroups: { [key: string]: WeekViewEvent[] } = {}
+	const dayEvents: { [dayIndex: number]: WeekViewEvent[] } = {}
 
+	// First pass: group events by day and calculate basic positioning
 	props.events.forEach((event) => {
 		const startDate = new Date(event.start_time)
 		const endDate = new Date(event.end_time)
@@ -109,7 +131,7 @@ const processedEvents = computed(() => {
 
 		if (dayIndex === -1) return
 
-		// Calculate vertical positioning - make sure to use the same formula everywhere
+		// Calculate vertical positioning
 		const startMinutes = startDate.getHours() * 60 + startDate.getMinutes()
 		const endMinutes = endDate.getHours() * 60 + endDate.getMinutes()
 		const top = (startMinutes / slotDuration) * slotHeight
@@ -125,26 +147,69 @@ const processedEvents = computed(() => {
 			position: 0
 		}
 
-		// Group by day and time range for overlapping calculation
-		const key = `${dayIndex}-${Math.floor(startMinutes / 30)}`
-		if (!overlappingGroups[key]) {
-			overlappingGroups[key] = []
+		if (!dayEvents[dayIndex]) {
+			dayEvents[dayIndex] = []
 		}
-		overlappingGroups[key].push(weekEvent)
+		dayEvents[dayIndex].push(weekEvent)
 	})
 
-	// Adjust overlapping events
-	Object.values(overlappingGroups).forEach((group) => {
-		if (group.length > 1) {
-			const groupWidth = 100 / group.length
-			group.forEach((event, index) => {
-				event.overlappingEvents = group.length
-				event.position = index
-				event.width = groupWidth
-				event.left = index * groupWidth
-			})
+	// Second pass: detect and handle overlapping events for each day
+	Object.entries(dayEvents).forEach(([_, dayEventList]) => {
+		// Sort events by start time
+		dayEventList.sort((a, b) => new Date(a.start_time).getTime() - new Date(b.start_time).getTime())
+
+		// Group overlapping events
+		const overlappingGroups: WeekViewEvent[][] = []
+		let currentGroup: WeekViewEvent[] = []
+
+		dayEventList.forEach((event) => {
+			if (currentGroup.length === 0) {
+				currentGroup = [event]
+			} else {
+				// Check if this event overlaps with any event in the current group
+				const overlaps = currentGroup.some((groupEvent) => {
+					const eventStart = new Date(event.start_time).getTime()
+					const eventEnd = new Date(event.end_time).getTime()
+					const groupEventStart = new Date(groupEvent.start_time).getTime()
+					const groupEventEnd = new Date(groupEvent.end_time).getTime()
+
+					return !(eventEnd <= groupEventStart || eventStart >= groupEventEnd)
+				})
+
+				if (overlaps) {
+					currentGroup.push(event)
+				} else {
+					// No overlap, finalize current group and start new one
+					if (currentGroup.length > 0) {
+						overlappingGroups.push([...currentGroup])
+					}
+					currentGroup = [event]
+				}
+			}
+		})
+
+		// Don't forget the last group
+		if (currentGroup.length > 0) {
+			overlappingGroups.push(currentGroup)
 		}
-		events.push(...group)
+
+		// Position overlapping events with elegant spacing
+		overlappingGroups.forEach((group) => {
+			if (group.length > 1) {
+				// Add some spacing between overlapping events (2% gap)
+				const gap = 2
+				const availableWidth = 100 - (gap * (group.length - 1))
+				const eventWidth = availableWidth / group.length
+
+				group.forEach((event, index) => {
+					event.overlappingEvents = group.length
+					event.position = index
+					event.width = eventWidth
+					event.left = index * (eventWidth + gap)
+				})
+			}
+			events.push(...group)
+		})
 	})
 
 	return events
@@ -152,6 +217,9 @@ const processedEvents = computed(() => {
 
 // Mouse event handlers for drag-to-create functionality
 function handleMouseDown(e: MouseEvent, day: Date) {
+	// Only allow drag-to-create if the feature is enabled
+	if (!isDragToCreateEnabled.value) return
+
 	if (!calendarGrid.value || !dayColumnsContainer.value) return
 
 	// Find the clicked day column
@@ -185,11 +253,8 @@ function handleMouseDown(e: MouseEvent, day: Date) {
 		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)
+	// Use the same positioning calculation as events for consistency
+	const startTime = getTimeFromPositionConsistent(e.clientY, day)
 	dragState.value.startTime = startTime
 
 	document.addEventListener('mousemove', handleMouseMove)
@@ -197,7 +262,7 @@ function handleMouseDown(e: MouseEvent, day: Date) {
 }
 
 function handleMouseMove(e: MouseEvent) {
-	if (!dragState.value.isDragging || !dragState.value.start || !dayColumns.value.length || !calendarGrid.value || !dayColumnsContainer.value) return
+	if (!isDragToCreateEnabled.value || !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
@@ -215,50 +280,34 @@ function handleMouseMove(e: MouseEvent) {
 	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
+		x: dragState.value.start!.x, // Keep x position bound to starting day column
+		y: e.clientY - dayColumnsContainer.value.getBoundingClientRect().top
 	}
 
-	// Ensure the selection spans the full width of all selected days
-	dragState.value.start.x = leftEdge
-
 	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)
+		// Always use the starting day as the base date for the event
+		const startDay = new Date(weekDays.value[dragState.value.startDay])
+		startDay.setHours(0, 0, 0, 0)
 
-		const endTime = getTimeFromPosition(e.clientY, targetDay)
+		// Calculate end time based on mouse position but on the starting day
+		// Use the consistent positioning function for perfect alignment
+		const endTime = getTimeFromPositionConsistent(e.clientY, startDay)
 		dragState.value.endTime = endTime
 	}
 }
 
 function handleMouseUp() {
-	if (!dragState.value.isDragging || !dragState.value.startTime || !dragState.value.endTime) return
+	if (!isDragToCreateEnabled.value || !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 - handle multi-day and reversed selections
-	if (dragState.value.startDay > dragState.value.endDay
-		|| (dragState.value.startDay === dragState.value.endDay && end < start)) {
+	// Always use the starting day for the event, but allow time selection across days
+	// The event will be created on the starting day with the selected time range
+	if (end < start) {
+		// If end time is before start time, swap them but keep the starting day
 		[start, end] = [end, start]
 	}
 
@@ -279,21 +328,22 @@ function handleMouseUp() {
 	document.removeEventListener('mouseup', handleMouseUp)
 }
 
-function getTimeFromPosition(y: number, day: Date): Date {
-	if (!calendarGrid.value || !timeSlotsContainer.value) return new Date(day)
+// Consistent time positioning function that uses the same coordinate system as events
+function getTimeFromPositionConsistent(y: number, day: Date): Date {
+	if (!dayColumnsContainer.value) return new Date(day)
 
-	const gridRect = calendarGrid.value.getBoundingClientRect()
+	const containerRect = dayColumnsContainer.value.getBoundingClientRect()
 
-	// Calculate relative Y position
-	const relativeY = y - gridRect.top
+	// Calculate relative Y position from the container (same as events use)
+	const relativeY = y - containerRect.top
 
-	// Use the same formula as for events
+	// Use the exact same formula as events
 	const minutesPerSlot = slotDuration
 	const slotsFromTop = relativeY / slotHeight
 	const minutes = Math.floor(slotsFromTop * minutesPerSlot)
 
 	const date = new Date(day)
-	date.setHours(Math.floor(minutes / 60) - 1)
+	date.setHours(Math.floor(minutes / 60))
 	const roundedMinutes = Math.round((minutes % 60) / 5) * 5
 	date.setMinutes(roundedMinutes)
 	date.setSeconds(0)
@@ -371,14 +421,10 @@ onUnmounted(() => {
 	<div class="w-100p overflow-hidden m_overflow h-100p grid">
 		<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"
-			>
+			<div v-for="day in weekDays" :key="day.toISOString()" class="day-header p-05 txt-center">
 				{{ formatDate(day, { fmt: 'DDD' }) }}
 				<span
-					class="txt-12 round p-025"
-					:class="{
+					class="txt-12 round p-025" :class="{
 						'color-gray': day.toDateString() !== new Date().toDateString(),
 						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
 					}"
@@ -390,28 +436,31 @@ onUnmounted(() => {
 		<div class="overflow h-100p pe-05">
 			<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` }">
+					<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>
 
 				<!-- 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
+					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, index) in weekDays"
-					:key="day.toISOString()"
-					:ref="el => setDayColumnRef(el, index)"
-					class="day-column top bottom border-start relative"
-					@mousedown="handleMouseDown($event, day)"
+					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())"
-						:key="event.id"
+							new Date(e.start_time).toDateString() === day.toDateString())" :key="event.id"
 					>
 						<div
 							class="event absolute radius-05 overflow-hidden pointer transition z-1 opacity-8 border"
@@ -421,16 +470,15 @@ onUnmounted(() => {
 								left: `${event.left}%`,
 								width: `${event.width}%`,
 								backgroundColor: event.color || 'var(--bgl-primary)',
-							}"
-							@mousedown.stop
-							@click.stop="handleEventSelection(event, $event)"
+							}" @mousedown.stop @click.stop="handleEventSelection(event, $event)"
 						>
 							<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 user-select-none">
-									{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }} - {{ formatDate(event.end_time, { fmt: 'HH:mm' }) }}
+									{{ formatDate(event.start_time, { fmt: 'HH:mm' }) }} - {{ formatDate(event.end_time,
+										{ fmt: 'HH:mm' }) }}
 								</div>
 							</div>
 						</div>
@@ -439,17 +487,19 @@ onUnmounted(() => {
 
 				<!-- Drag selection preview - ensure it aligns with time slots and events -->
 				<div
-					v-if="dragState.isDragging && dragState.start && dragState.end"
+					v-if="isDragToCreateEnabled && dragState.isDragging && dragState.start && dragState.end && dragPreviewPosition"
 					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`,
+						left: `${dragState.start.x}px`,
+						top: `${dragPreviewPosition.top}px`,
+						width: `${dayColumns[dragState.startDay]?.offsetWidth || 100}px`,
+						height: `${dragPreviewPosition.height}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' }) : '' }}
+						{{ dragState.startTime ? formatDate(dragState.startTime, { fmt: 'HH:mm' }) : '' }} - {{
+							dragState.endTime
+								? formatDate(dragState.endTime, { fmt: 'HH:mm' }) : '' }}
 					</div>
 				</div>
 			</div>
@@ -471,8 +521,10 @@ onUnmounted(() => {
 
 .day-column {
 	flex: 1;
-	position: relative; /* Ensure absolute positioning works properly */
-	min-height: 100%; /* Ensure column fills the full height */
+	position: relative;
+	/* Ensure absolute positioning works properly */
+	min-height: 100%;
+	/* Ensure column fills the full height */
 }
 
 /* Add consistent styling for the time slots */
@@ -496,7 +548,8 @@ onUnmounted(() => {
 .drag-preview {
 	border: 1px solid var(--bgl-primary);
 	background-color: rgba(var(--bgl-primary-rgb), 0.1);
-	box-sizing: border-box; /* Ensure consistent sizing */
+	box-sizing: border-box;
+	/* Ensure consistent sizing */
 }
 
 .current-time-line {
@@ -506,7 +559,8 @@ onUnmounted(() => {
 
 .current-time-dot {
 	background-color: var(--bgl-primary);
-	margin-right: -5px; /* Adjust dot position */
+	margin-right: -5px;
+	/* Adjust dot position */
 }
 
 /* This ensures all grid content aligns properly */

package/src/components/dataTable/DataTable.vue

@@ -79,12 +79,11 @@ const {
 })
 
 function renderFieldForRow(field: Field<T>, row: T) {
-	const { renderField } = useSchemaField<T, P>({
+	const { renderField } = useSchemaField<T>({
 		mode: 'table',
 		getFormData: () => row,
-		onUpdateModelValue: undefined
 	})
-	return renderField({ ...field, label: '' } as BaseBagelField<T, P>, slots as unknown as BaseBagelField<T, P>['slots'])
+	return renderField({ ...field, label: '' } as BaseBagelField<T, Path<T>>, slots as unknown as BaseBagelField<T, Path<T>>['slots'])
 }
 
 const computedItemHeight = $computed(() => `${itemHeight.value}px`)