@bagelink/vue 1.6.47 → 1.6.49

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

@@ -40,7 +40,7 @@ const currentTimeInterval = ref(null as any)
 const timeSlots = computed(() => {
 	const slots = []
 	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
-		for (let minute = 0; 60 > minute; minute += slotDuration) {
+		for (let minute = 0; minute < 60; minute += slotDuration) {
 			slots.push({
 				hour,
 				minute,
@@ -91,7 +91,7 @@ function updateCurrentTimeIndicator() {
 // Event handlers for drag-to-create functionality
 function handleMouseDown(e: MouseEvent) {
 	const target = e.target as HTMLElement
-	if (!target.closest('.time-slot')) {return}
+	if (!target.closest('.time-slot')) { return }
 
 	dragState.value.isDragging = true
 	dragState.value.start = { x: e.clientX, y: e.clientY }
@@ -102,20 +102,20 @@ function handleMouseDown(e: MouseEvent) {
 }
 
 function handleMouseMove(e: MouseEvent) {
-	if (!dragState.value.isDragging) {return}
+	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}
+	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]}
+	if (end < start) { [start, end] = [end, start] }
 
 	emit('eventCreate', { start_time: start, end_time: end })
 
@@ -134,7 +134,7 @@ function handleMouseUp() {
 
 function getTimeFromPosition(y: number): Date {
 	const rect = document.querySelector('.time-slots')?.getBoundingClientRect()
-	if (!rect) {return new Date()}
+	if (!rect) { return new Date() }
 
 	// Calculate time using the same formula as for events
 	const relativeY = y - rect.top

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

@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const slots: SetupContext['slots'] = useSlots()
 
 // Responsive state
-const isMobile = computed(() => 768 > window.innerWidth)
+const isMobile = computed(() => window.innerWidth < 768)
 
 // Calendar data
 const weekDays = computed(() => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
@@ -42,7 +42,7 @@ const currentMonth = computed(() => {
 
 	// Add days from previous month to fill the calendar grid
 	const prevMonthLastDay = new Date(year, month, 0).getDate()
-	for (let i = startingDay - 1; 0 <= i; i--) {
+	for (let i = startingDay - 1; i >= 0; i--) {
 		const date = new Date(year, month - 1, prevMonthLastDay - i)
 		days.push({
 			date,

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

@@ -67,7 +67,7 @@ const scrollableContainer = ref<HTMLElement>()
 const weekDays = computed(() => {
 	const days = []
 	const start = new Date(props.startDate)
-	const weekStartOffset = 'Sunday' === props.weekStart ? 0 : 1
+	const weekStartOffset = props.weekStart === 'Sunday' ? 0 : 1
 
 	// Adjust to start of week
 	const dayOfWeek = start.getDay()
@@ -75,7 +75,7 @@ const weekDays = computed(() => {
 	start.setHours(0, 0, 0, 0) // Set time to start of day
 
 	// Create array of 7 day dates
-	for (let i = 0; 7 > i; i++) {
+	for (let i = 0; i < 7; i++) {
 		const date = new Date(start)
 		date.setDate(start.getDate() + i)
 		days.push(date)
@@ -87,7 +87,7 @@ const weekDays = computed(() => {
 const timeSlots = computed(() => {
 	const slots = []
 	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
-		for (let minute = 0; 60 > minute; minute += slotDuration) {
+		for (let minute = 0; minute < 60; minute += slotDuration) {
 			slots.push({
 				hour,
 				minute,
@@ -130,7 +130,7 @@ const processedEvents = computed(() => {
 			&& day.getFullYear() === startDate.getFullYear()
 		)
 
-		if (-1 === dayIndex) {return}
+		if (dayIndex === -1) { return }
 
 		// Calculate vertical positioning
 		const startMinutes = startDate.getHours() * 60 + startDate.getMinutes()
@@ -164,7 +164,7 @@ const processedEvents = computed(() => {
 		let currentGroup: WeekViewEvent[] = []
 
 		dayEventList.forEach((event) => {
-			if (0 === currentGroup.length) {
+			if (currentGroup.length === 0) {
 				currentGroup = [event]
 			} else {
 				// Check if this event overlaps with any event in the current group
@@ -181,7 +181,7 @@ const processedEvents = computed(() => {
 					currentGroup.push(event)
 				} else {
 					// No overlap, finalize current group and start new one
-					if (0 < currentGroup.length) {
+					if (currentGroup.length > 0) {
 						overlappingGroups.push([...currentGroup])
 					}
 					currentGroup = [event]
@@ -190,13 +190,13 @@ const processedEvents = computed(() => {
 		})
 
 		// Don't forget the last group
-		if (0 < currentGroup.length) {
+		if (currentGroup.length > 0) {
 			overlappingGroups.push(currentGroup)
 		}
 
 		// Position overlapping events with elegant spacing
 		overlappingGroups.forEach((group) => {
-			if (1 < group.length) {
+			if (group.length > 1) {
 				// Add some spacing between overlapping events (2% gap)
 				const gap = 2
 				const availableWidth = 100 - (gap * (group.length - 1))
@@ -219,15 +219,15 @@ 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 (!isDragToCreateEnabled.value) { return }
 
-	if (!calendarGrid.value || !dayColumnsContainer.value) {return}
+	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}
+		if (!columnEl) { continue }
 
 		const rect = columnEl.getBoundingClientRect()
 		if (e.clientX >= rect.left && e.clientX <= rect.right) {
@@ -236,7 +236,7 @@ function handleMouseDown(e: MouseEvent, day: Date) {
 		}
 	}
 
-	if (-1 === clickedDayIndex) {return}
+	if (clickedDayIndex === -1) { return }
 
 	// Get the clicked day column's position and dimensions
 	const dayColumnRect = dayColumns.value[clickedDayIndex].getBoundingClientRect()
@@ -263,13 +263,13 @@ function handleMouseDown(e: MouseEvent, day: Date) {
 }
 
 function handleMouseMove(e: MouseEvent) {
-	if (!isDragToCreateEnabled.value || !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
 	for (let i = 0; i < dayColumns.value.length; i++) {
 		const columnEl = dayColumns.value[i]
-		if (!columnEl) {continue}
+		if (!columnEl) { continue }
 
 		const rect = columnEl.getBoundingClientRect()
 		if (e.clientX >= rect.left && e.clientX <= rect.right) {
@@ -278,7 +278,7 @@ function handleMouseMove(e: MouseEvent) {
 		}
 	}
 
-	if (-1 === targetDayIndex) {return}
+	if (targetDayIndex === -1) { return }
 
 	// Update which days are selected
 	dragState.value.endDay = targetDayIndex
@@ -287,7 +287,7 @@ function handleMouseMove(e: MouseEvent) {
 		y: e.clientY - dayColumnsContainer.value.getBoundingClientRect().top
 	}
 
-	if (0 <= targetDayIndex && targetDayIndex < weekDays.value.length) {
+	if (targetDayIndex >= 0 && targetDayIndex < weekDays.value.length) {
 		// 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)
@@ -300,7 +300,7 @@ function handleMouseMove(e: MouseEvent) {
 }
 
 function handleMouseUp() {
-	if (!isDragToCreateEnabled.value || !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)
@@ -331,7 +331,7 @@ function handleMouseUp() {
 
 // 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)}
+	if (!dayColumnsContainer.value) { return new Date(day) }
 
 	const containerRect = dayColumnsContainer.value.getBoundingClientRect()
 

package/src/components/dataTable/DataTable.vue

@@ -86,13 +86,13 @@ function renderFieldForRow(field: Field<T>, row: T) {
 	return renderField({ ...field, label: '' } as BaseBagelField<T, Path<T>>, slots as unknown as BaseBagelField<T, Path<T>>['slots'])
 }
 
-const computedItemHeight = $computed(() => `${itemHeight.value}px`)
+const computedItemHeight = computed(() => `${itemHeight.value}px`)
 
 watch(
 	() => loading.value,
 	(newLoadingVal, oldLoadingVal) => {
-		if (newLoadingVal === oldLoadingVal) {return}
-		if (!newLoadingVal) {registerLastItemObserver()}
+		if (newLoadingVal === oldLoadingVal) { return }
+		if (!newLoadingVal) { registerLastItemObserver() }
 	},
 	{ immediate: true }
 )
@@ -105,7 +105,7 @@ watch(
 watch(
 	() => computedData.value,
 	(newData, oldData) => {
-		if (newData.length === oldData.length || props.onLastItemVisible !== undefined) {return}
+		if (newData.length === oldData.length || props.onLastItemVisible !== undefined) { return }
 		scrollTo(0)
 	}
 )

package/src/components/dataTable/useSorting.ts

@@ -10,7 +10,7 @@ export function useSorting(options: SortingOptions) {
 
 	function sort(fieldname: string) {
 		if (sortFieldRef.value === fieldname) {
-			if ('ASC' === sortDirectionRef.value) {
+			if (sortDirectionRef.value === 'ASC') {
 				sortDirectionRef.value = 'DESC'
 			} else {
 				sortFieldRef.value = ''

package/src/components/dataTable/useTableData.ts

@@ -32,7 +32,7 @@ interface TransformedDataBase {
 type TransformedData<TransDataT> = TransDataT & TransformedDataBase
 
 function autoTransform<T>(field: Field<T, DefaultPathsOptions>): Field<T, DefaultPathsOptions> {
-	if (('created_at' === field.id || 'updated_at' === field.id) && !field.transform) {
+	if ((field.id === 'created_at' || field.id === 'updated_at') && !field.transform) {
 		field.transform = (val?: any) => val ? formatDate(val) : val
 	}
 	return field
@@ -62,18 +62,18 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 			})
 
 			// If we have a valid schema with fields, filter out fields without an ID
-			if (Array.isArray(schema) && 0 < schema.length) {
+			if (Array.isArray(schema) && schema.length > 0) {
 				resolvedSchema.value = (schema as SchemaField<T>[])
 					.filter(field => field)
 					.map(field => field as Field<T>)
 					.map(autoTransform)
-			} else if (Array.isArray(dataValue) && 0 < dataValue.length) {
+			} else if (Array.isArray(dataValue) && dataValue.length > 0) {
 				// If no schema is provided or it's empty, generate a default schema from the data
 				const firstItem = dataValue[0]
 
 				// Create a schema based on the keys of the first item
 				resolvedSchema.value = Object.keys(firstItem || {})
-					.filter(key => 'id' !== key && !key.startsWith('_')) // Exclude id and internal fields
+					.filter(key => key !== 'id' && !key.startsWith('_')) // Exclude id and internal fields
 					.map(key => ({
 						id: key as any, // Cast to any to resolve type issues with Path<T>
 						label: keyToLabel(key),
@@ -81,7 +81,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 						transform: (val?: any) => {
 							// Handle date fields
 							const dateFields = ['created_at', 'updated_at']
-							if (dateFields.includes(key)) {return val ? new Date(val).toLocaleString() : val}
+							if (dateFields.includes(key)) { return val ? new Date(val).toLocaleString() : val }
 							return val
 						}
 					}))
@@ -129,8 +129,8 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 			;(transformed as TransformedDataBase)[originalKey] = fieldData
 
 			// Determine if this component should receive value as slot or src
-			const isSlotValueComponent = 'string' === typeof field.$el && SLOT_VALUE_COMPONENTS.has(field.$el)
-			const isSrcValueComponent = 'string' === typeof field.$el && SRC_VALUE_COMPONENTS.has(field.$el)
+			const isSlotValueComponent = typeof field.$el === 'string' && SLOT_VALUE_COMPONENTS.has(field.$el)
+			const isSrcValueComponent = typeof field.$el === 'string' && SRC_VALUE_COMPONENTS.has(field.$el)
 
 			;(transformed as TransformedDataBase)[slotKey] = isSlotValueComponent
 			;(transformed as TransformedDataBase)[srcKey] = isSrcValueComponent
@@ -167,11 +167,11 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 		const currentData = toValue(options.data) || []
 
 		// If there's no data, return an empty array
-		if (!Array.isArray(currentData) || 0 === currentData.length) {
+		if (!Array.isArray(currentData) || currentData.length === 0) {
 			return []
 		}
 
-		if (!sortField.value || true === toValue(options.useServerSort)) {
+		if (!sortField.value || toValue(options.useServerSort) === true) {
 			return currentData.map(transform)
 		}
 
@@ -182,7 +182,7 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 				const bValue = (z as any)[computedSortField.value] ?? ''
 
 				if (isDate(aValue) && isDate(bValue)) {
-					return 'ASC' === sortDirection.value
+					return sortDirection.value === 'ASC'
 						? new Date(aValue).getTime() - new Date(bValue).getTime()
 						: new Date(bValue).getTime() - new Date(aValue).getTime()
 				}
@@ -191,20 +191,20 @@ export function useTableData<T extends { [key: string]: any }>(options: UseTable
 				const numBValue = Number.parseInt(`${bValue}`.replaceAll(NON_DIGIT_REGEX, ''), 10)
 
 				if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
-					return 'ASC' === sortDirection.value ? numAValue - numBValue : numBValue - numAValue
+					return sortDirection.value === 'ASC' ? numAValue - numBValue : numBValue - numAValue
 				}
 
-				if ('string' === typeof aValue) {
-					return 'ASC' === sortDirection.value ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
+				if (typeof aValue === 'string') {
+					return sortDirection.value === 'ASC' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue)
 				}
 
-				return 'ASC' === sortDirection.value ? (aValue < bValue ? -1 : 1) : (aValue < bValue ? 1 : -1)
+				return sortDirection.value === 'ASC' ? (aValue < bValue ? -1 : 1) : (aValue < bValue ? 1 : -1)
 			})
 	})
 
 	function toggleSort(fieldname: string) {
 		if (sortField.value === fieldname) {
-			if ('ASC' === sortDirection.value) {
+			if (sortDirection.value === 'ASC') {
 				sortDirection.value = 'DESC'
 			} else {
 				sortField.value = ''

package/src/components/dataTable/useTableSelection.ts

@@ -11,24 +11,24 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 	const allSelectorEl = ref<HTMLInputElement>()
 	const lastSelectedIndex = ref<number | null>(null)
 	const computedSelectedItems = computed(() => options.selectedItems.value)
-	const isSelectable = computed(() => true === options.selectable && Array.isArray(options.selectedItems.value))
-	const allItems = $computed(() => options.data.value)
+	const isSelectable = computed(() => options.selectable === true && Array.isArray(options.selectedItems.value))
+	const allItems = computed(() => options.data.value)
 
 	function updateAllSelectorState() {
-		if (allSelectorEl.value === undefined) {return}
+		if (allSelectorEl.value === undefined) { return }
 
 		// If we don't know the total items, we can't determine if "all" are selected
-		if (!allItems) {
-			allSelectorEl.value.indeterminate = 0 < options.selectedItems.value.length
+		if (!allItems.value) {
+			allSelectorEl.value.indeterminate = options.selectedItems.value.length > 0
 			return
 		}
 
 		// Get all possible item IDs
-		const allItemIds = allItems.map(item => item.id)
+		const allItemIds = allItems.value.map(item => item.id)
 
 		// Check if all items are selected
 		const allSelected
-    = 0 < allItemIds.length
+    = allItemIds.length > 0
     	&& options.selectedItems.value.length === allItemIds.length
     	&& allItemIds.every(id => options.selectedItems.value.includes(id))
 
@@ -37,19 +37,19 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 
 		// Set indeterminate state (some but not all items selected)
 		allSelectorEl.value.indeterminate
-    = !allSelected && 0 < options.selectedItems.value.length
+    = !allSelected && options.selectedItems.value.length > 0
 	}
 
 	function toggleSelectItem(item: T, event?: MouseEvent) {
-		const currentIndex = allItems.findIndex(i => i.id === item.id)
+		const currentIndex = allItems.value.findIndex(i => i.id === item.id)
 
 		// Handle Shift+click for range selection
-		if (event?.shiftKey && null !== lastSelectedIndex.value && -1 !== currentIndex) {
+		if (event?.shiftKey && lastSelectedIndex.value !== null && currentIndex !== -1) {
 			const startIndex = Math.min(lastSelectedIndex.value, currentIndex)
 			const endIndex = Math.max(lastSelectedIndex.value, currentIndex)
 
 			// Get all items in the range
-			const rangeItems = allItems.slice(startIndex, endIndex + 1)
+			const rangeItems = allItems.value.slice(startIndex, endIndex + 1)
 			const rangeItemIds = rangeItems.map(i => i.id)
 
 			// Check if all items in range are currently selected
@@ -71,7 +71,7 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 		}
 
 		// Regular single item selection logic
-		if (0 === computedSelectedItems.value.length) {
+		if (computedSelectedItems.value.length === 0) {
 			// Clean the item if a cleanData function is provided, otherwise use the default cleaning
 			const cleanItem = options.cleanData ? options.cleanData(item) : { ...item }
 
@@ -90,7 +90,7 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 		}
 
 		const index = computedSelectedItems.value.indexOf(item.id)
-		if (-1 < index) {
+		if (index > -1) {
 			options.selectedItems.value.splice(index, 1)
 		} else {
 			options.selectedItems.value.push(item.id)
@@ -104,8 +104,8 @@ export function useTableSelection<T extends { [key: string]: any }>(options: Use
 	function toggleSelectAll(event: Event) {
 		const value = (event.target as HTMLInputElement).checked
 
-		if (allItems && value) {
-			options.selectedItems.value = allItems.map(item => item.id)
+		if (allItems.value && value) {
+			options.selectedItems.value = allItems.value.map(item => item.id)
 		} else {
 			options.selectedItems.value = []
 		}

package/src/components/dataTable/useTableVirtualization.ts

@@ -32,7 +32,7 @@ export function useTableVirtualization<T>(options: TableVirtualizationOptions<T>
 			// Check if options.data.value exists and has length
 			const dataLength = toValue(options.data).length || 0
 
-			if (entry.isIntersecting && 0 < dataLength) {
+			if (entry.isIntersecting && dataLength > 0) {
 				options.onLastItemVisible?.()
 			}
 		})