@bagelink/vue 1.5.15 → 1.5.20

package/src/components/form/FieldArray.vue

@@ -10,12 +10,12 @@ import type {
 	Path
 } from '@bagelink/vue'
 import type { MaybeRefOrGetter } from 'vue'
-import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
-import { ref, computed, watch, toValue } from 'vue'
+import { BagelForm, Btn, Loading, Icon, Card } from '@bagelink/vue'
+import { ref, computed, watch, toValue, onMounted } from 'vue'
 
 export interface FieldArrayProps<T, P extends Path<T>> {
 	el?: any
-	id: string
+	id?: string
 	label?: string
 	placeholder?: string
 	children?: Field<T>[]
@@ -25,13 +25,14 @@ export interface FieldArrayProps<T, P extends Path<T>> {
 	disabled?: boolean
 	helptext?: string
 	options?: BagelFieldOptions<T, P>
-	defaultValue?: any
+	defaultValue?: T[]
 	add?: boolean
 	delete?: boolean
+	collapsed?: boolean
 	transform?: (value: T) => T
 	schema?: MaybeRefOrGetter<BglFormSchemaT<T>>
-	modelValue: T[]
-	type?: 'object' | 'number' | 'text'
+	modelValue?: T[]
+	type?: 'object' | 'number' | 'text' | 'array'
 }
 
 export interface PrimitiveArrFieldT extends BaseBagelField<{ value: string }, 'value'> {
@@ -45,6 +46,7 @@ const props = withDefaults(
 		add: true,
 		el: 'div',
 		type: 'object',
+		collapsed: false,
 	}
 )
 
@@ -56,27 +58,93 @@ const BagelFormFA = BagelForm<T, P>
 const minimizedItems = ref<boolean[]>([])
 const internalData = ref<any[]>(props.modelValue || [])
 const schemaState = ref<'loading' | 'loaded' | 'error'>('loaded')
+let lastEmittedValue = '' // Event handlers state
 
 // Generate schema for primitive types
 const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
-	if (props.type === 'text') {
+	if ('text' === props.type) {
 		return [{ id: 'value', type: 'text', label: '', $el: 'text' }]
-	} else if (props.type === 'number') {
+	}if (props.type === 'number') {
 		return [{ id: 'value', type: 'number', label: '', $el: 'number' }]
 	}
 	return []
 })
 
-const resolvedSchemaData = $computed(() => {
-	if (props.type !== 'object') return primitiveSchema.value as BglFormSchemaT<T>
+const resolvedSchemaData = computed(() => {
+	// Handle 'array' type as equivalent to 'object' type
+	const isObjectType = 'object' === props.type || 'array' === props.type
 
-	return toValue(props.schema)
-})
+	if (!isObjectType) {return primitiveSchema.value as BglFormSchemaT<T>}
+
+	// Use children prop first, then schema prop, then attrs.schema
+	const attrsSchema = props.attrs?.schema !== undefined ? toValue(props.attrs.schema) : null
+	const schemaToUse = props.children || toValue(props.schema) || attrsSchema
+
+	// If no schema but we have defaultValue, try to infer schema from first item
+	const noSchema = null === schemaToUse || schemaToUse === undefined
+		|| (Array.isArray(schemaToUse) && 0 === schemaToUse.length)
+	const hasDefaultValue = props.defaultValue !== undefined
+		&& null !== props.defaultValue
+		&& 0 < props.defaultValue.length
 
-// Watch for external changes to modelValue
+	// Don't infer schema from defaultValue - this causes unwanted restoration
+	// Let the component work with empty arrays
+	return schemaToUse as BglFormSchemaT<T>
+})// Watch for external changes to modelValue - simple and straightforward
 watch(() => props.modelValue, (newValue) => {
-	internalData.value = newValue || []
-}, { deep: true })
+	// Simply sync with external changes, no automatic defaultValue restoration
+	if (newValue && Array.isArray(newValue)) {
+		internalData.value = [...newValue]
+	} else {
+		internalData.value = []
+	}
+}, { deep: true, immediate: false })
+
+// Watch for changes to internalData length to sync minimizedItems
+watch(() => internalData.value.length, (newLength) => {
+	// Resize minimizedItems array to match internalData length
+	if (minimizedItems.value.length !== newLength) {
+		// If array grew, add new items with collapsed state
+		if (minimizedItems.value.length < newLength) {
+			const itemsToAdd = newLength - minimizedItems.value.length
+			for (let i = 0; i < itemsToAdd; i++) {
+				minimizedItems.value.push(props.collapsed || false)
+			}
+		} else {
+			// If array shrank, remove excess items
+			minimizedItems.value = minimizedItems.value.slice(0, newLength)
+		}
+	}
+})
+
+// Initialize with existing data or defaultValue on mount - only once!
+onMounted(() => {
+	// If no modelValue provided, use defaultValue as initial data (one time only)
+	if (!props.modelValue || 0 === props.modelValue.length) {
+		if (props.defaultValue && 0 < props.defaultValue.length) {
+			internalData.value = [...props.defaultValue]
+			emitValue() // This will set the initial value and then it becomes "regular" data
+		}
+	}
+
+	// Initialize minimized state based on collapsed prop
+	if (props.collapsed) {
+		minimizedItems.value = Array.from({ length: internalData.value.length }, () => true)
+	} else {
+		minimizedItems.value = Array.from({ length: internalData.value.length }, () => false)
+	}
+})
+
+// Function to load default values (explicit user action)
+function loadDefaults() {
+	if (props.defaultValue && 0 < props.defaultValue.length) {
+		internalData.value = [...props.defaultValue]
+		emitValue()
+	} else {
+		// If no defaultValue in props, add a single empty item
+		addItem()
+	}
+}
 
 // Resolve schema
 // async function resolveSchema() {
@@ -120,23 +188,43 @@ watch(() => props.modelValue, (newValue) => {
 // onMounted(resolveSchema)
 
 // Event handlers
+
 function emitValue() {
-	emit('update:modelValue', internalData.value)
+	// Only emit if the value has actually changed to prevent recursive updates
+	const currentValue = JSON.stringify(props.modelValue || [])
+	const newValue = JSON.stringify(internalData.value || [])
+
+	// Double-check against last emitted value to prevent loops
+	if (currentValue !== newValue && lastEmittedValue !== newValue) {
+		lastEmittedValue = newValue
+		emit('update:modelValue', internalData.value)
+		// Reset after a short delay to allow for new changes
+		setTimeout(() => {
+			lastEmittedValue = ''
+		}, 50)
+	}
 }
 
 function deleteItem(i: number) {
 	internalData.value.splice(i, 1)
+	minimizedItems.value.splice(i, 1)
 	emitValue()
 }
 
 function addItem() {
 	// Add appropriate default value based on type
-	const defaultValues = {
+	const defaultValues: { [key: string]: any } = {
 		text: '',
 		number: 0,
-		object: {}
+		object: {},
+		array: {}
 	}
-	internalData.value.push(defaultValues[props.type])
+	const defaultValue = defaultValues[props.type]
+	internalData.value.push(defaultValue !== undefined ? defaultValue : {})
+
+	// Add minimized state for new item - always open (false) when newly added
+	minimizedItems.value.push(false)
+
 	emitValue()
 }
 
@@ -146,8 +234,8 @@ function toggleMinimized(index: number) {
 
 function updateItem(index: number, value: any) {
 	// Handle primitive types by extracting the value property
-	if (props.type === 'text' || props.type === 'number') {
-		internalData.value[index] = props.type === 'number' ? Number(value.value) : value.value
+	if ('text' === props.type || 'number' === props.type) {
+		internalData.value[index] = 'number' === props.type ? Number(value.value) : value.value
 	} else {
 		internalData.value[index] = value
 	}
@@ -155,14 +243,25 @@ function updateItem(index: number, value: any) {
 }
 
 // Computed properties for rendering
-const isPrimitiveType = computed(() => props.type === 'text' || props.type === 'number')
-const canRenderItems = computed(
-	() => isPrimitiveType.value || (
-		props.type === 'object' && Number(resolvedSchemaData?.length) > 0
-	)
-)
+const isPrimitiveType = computed(() => 'text' === props.type || 'number' === props.type)
+const canRenderItems = computed(() => {
+	const schemaData = resolvedSchemaData.value
+	const hasValidSchema = (Array.isArray(schemaData) && 0 < schemaData.length)
+		|| (props.children && 0 < props.children.length)
+	const hasDefaultValue = props.defaultValue && 0 < props.defaultValue.length
+
+	// For primitive types or when we have schema or defaultValue
+	const isObjectType = 'object' === props.type || 'array' === props.type
+	const shouldRender = isPrimitiveType.value
+		|| (isObjectType && (true === hasValidSchema || true === hasDefaultValue))
+	return shouldRender
+})
 const showMinimizeButton = computed(() => {
-	return Number(resolvedSchemaData?.length) > 2 || resolvedSchemaData?.some(schema => schema.$el === 'richtext')
+	const schemaData = resolvedSchemaData.value
+	const hasLongSchema = Array.isArray(schemaData) && 2 < schemaData.length
+	const hasRichText = Array.isArray(schemaData)
+		&& schemaData.some((schema: any) => 'richtext' === schema.$el)
+	return hasLongSchema || hasRichText
 })
 </script>
 
@@ -172,7 +271,7 @@ const showMinimizeButton = computed(() => {
 		<p v-if="label" class="label mb-05">
 			{{ label }}
 		</p>
-		<div class="ps-025 border-start mb-05">
+		<div class="ps-025  mb-05">
 			<!-- Loading/Error States -->
 			<div v-if="schemaState !== 'loaded'" class="flex-center h-300px">
 				<Loading v-if="schemaState === 'loading'" />
@@ -180,54 +279,50 @@ const showMinimizeButton = computed(() => {
 			</div>
 
 			<!-- No Schema Available -->
-			<div v-else-if="!canRenderItems" class="py-1">
+			<Card v-else-if="!canRenderItems" class="py-1 border mb-05">
 				<p class="opacity-7">
 					No schema available
 				</p>
-			</div>
+			</Card>
 
 			<!-- Items Rendering -->
 			<template v-else>
+				<!-- Empty Array Message -->
+				<Card v-if="internalData.length === 0" class="py-1  border mb-05">
+					<p class="opacity-7 txt-center txt14">
+						No {{ label?.toLowerCase() || 'items' }} added yet
+					</p>
+					<!-- Load defaults button if defaultValue exists -->
+					<Btn v-if="props.defaultValue && props.defaultValue.length > 0" thin color="primary" class="txt12 mb-05" @click="loadDefaults">
+						Load Default {{ label || 'Items' }}
+					</Btn>
+				</Card>
+
 				<!-- Array Items -->
 				<div
 					v-for="(item, i) in internalData"
 					:key="i"
 					outline
 					thin
-					class="mb-05 itemBox transition ps-05 pb-025 pt-025 radius-05 gap-05 overflow-hidden"
+					class="mb-05 itemBox transition radius-05 overflow-hidden txt12 border"
+					style="--input-font-size: 12px"
 					:class="{ minimized: minimizedItems[i] }"
 				>
-					<!-- Minimized View -->
-					<p v-if="minimizedItems[i]" class="minimizedText txt14 p-025 opacity-7">
-						{{ label }} {{ i + 1 }}
-					</p>
+					<div>
+						<!-- Minimized View -->
+						<div class="flex pointer">
+							<p class="minimizedText txt12 p-05 opacity-7 flex-grow-2" @click="toggleMinimized(i)">
+								{{ label }} {{ i + 1 }}
+							</p>
+							<Btn v-if="showMinimizeButton" class="rotate-180 txt10 opacity-7 p-025" flat thin icon="keyboard_arrow_down" @click="toggleMinimized(i)" />
+						</div>
 
-					<!-- Form View -->
-					<BagelFormFA
-						v-else
-						:model-value="isPrimitiveType ? { value: item } : item"
-						:schema="resolvedSchemaData"
-						@update:model-value="val => updateItem(i, val)"
-					/>
-
-					<!-- Controls -->
-					<div class="bg-gray-80 -my-05 px-025 pt-065 pb-05 txt-center space-between flex column">
-						<Btn
-							v-if="showMinimizeButton"
-							class="block rotate-180 txt10 opacity-7 p-025"
-							flat
-							thin
-							icon="keyboard_arrow_down"
-							@click="toggleMinimized(i)"
-						/>
-						<Btn
-							v-if="props.delete"
-							icon="delete"
-							class="txt10 opacity-7"
-							thin
-							flat
-							@click="deleteItem(i)"
+						<!-- Form View -->
+						<BagelFormFA
+							v-if="!minimizedItems[i]" :model-value="isPrimitiveType ? { value: item } : item" :schema="resolvedSchemaData" class="bginputbg p-05 grid gap-05"
+							@update:model-value="val => updateItem(i, val)"
 						/>
+						<Btn v-if="props.delete" icon="delete" class="txt10 opacity-7" thin flat @click="deleteItem(i)" />
 					</div>
 				</div>
 
@@ -242,25 +337,34 @@ const showMinimizeButton = computed(() => {
 
 <style>
 .minimized {
-	height: 2.4rem;
+	height: 2.3rem;
 	overflow: hidden;
+	border-color: transparent !important;
+
 }
+
 .minimizedText {
-	display: none;
+	/* display: none; */
+	padding-top: 1rem !important;
 }
+
 .minimized .minimizedText {
 	display: block;
 }
+
 .minimized .rotate-180 {
 	transform: rotate(0deg);
 }
+
 .itemBox {
-	background: var(--input-bg);
-	grid-template-columns: 1fr auto;
-	display: grid;
+	background: var(--btn-bg);
 	--label-font-size: 0.6rem;
 	--input-height: 30px;
-	--input-font-size: 14px;
+	--input-font-size: 7px;
+}
+
+.bginputbg {
+	background: var(--input-bg);
 }
 
 .pt-065 {
@@ -273,10 +377,16 @@ const showMinimizeButton = computed(() => {
 .itemBox .custom-select .input {
 	background: var(--bgl-white) !important;
 }
+
 .itemBox .code-editor-wrap textarea {
 	background: transparent !important;
 }
+
 .itemBox .bagel-input {
 	margin-bottom: 0.15rem !important;
 }
+
+.itemBox .richtext-editor-content {
+	font-size: 1px !important;
+}
 </style>

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

@@ -17,7 +17,8 @@ const inputId = $computed(() => id || Math.random().toString(36).slice(7))
 const checked = defineModel<T>('modelValue', { default: undefined })
 
 onMounted(() => {
-	if (checked.value === undefined) checked.value = defaultValue as T
+	// Don't auto-restore defaultValue - let user control their own content
+	// if (checked.value === undefined) checked.value = defaultValue as T
 })
 </script>
 

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -43,7 +43,7 @@ function handleInput(e: Event) {
 }
 
 function handleTab(event: KeyboardEvent) {
-	if (event.key !== 'Tab') return
+	if ('Tab' !== event.key) {return}
 
 	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement

package/src/components/form/inputs/CodeEditor/format.ts

@@ -38,7 +38,7 @@ const format = {
 			for (let i = 0; i < jsCode.length; i++) {
 				const char = jsCode[i]
 				const nextChar = jsCode[i + 1]
-				if (char === '"' || char === '\'' || char === '`') {
+				if ('"' === char || '\'' === char || '`' === char) {
 					formatted += char
 					if (inString.length && inString === char) {
 						inString = ''
@@ -51,25 +51,25 @@ const format = {
 					formatted += char
 					continue
 				}
-				if (char === '{' || char === '[') {
+				if ('{' === char || '[' === char) {
 					formatted += `${char}\n${tab.repeat(++level)}`
 					continue
 				}
-				if (char === '}' || char === ']') {
+				if ('}' === char || ']' === char) {
 					formatted += `\n${tab.repeat(--level)}${char}`
 					continue
 				}
-				if (char === ';' || char === ',') {
+				if (';' === char || ',' === char) {
 					formatted += `${char}\n${tab.repeat(level)}`
 					continue
 				}
-				if (char === '\n') {
+				if ('\n' === char) {
 					formatted += `\n${tab.repeat(level)}`
 					continue
 				}
 				if (
-					(char === ')' && nextChar === '{')
-					|| (char === ')' && nextChar === ' ')
+					(')' === char && '{' === nextChar)
+					|| (')' === char && ' ' === nextChar)
 				) {
 					formatted += `${char}\n${tab.repeat(level)}`
 					continue

package/src/components/form/inputs/CodeEditor/useHighlight.ts

@@ -14,8 +14,8 @@ export function useHighlight(theme: HighlightTheme = 'dark') {
 	const currentTheme = ref<HighlightTheme>(theme)
 
 	const normalizeTheme = (t: HighlightTheme): HighlightTheme => {
-		if (t === 'dark') return 'atom-one-dark'
-		if (t === 'light') return 'atom-one-light'
+		if ('dark' === t) {return 'atom-one-dark'}
+		if ('light' === t) {return 'atom-one-light'}
 		return t
 	}
 
@@ -24,14 +24,14 @@ export function useHighlight(theme: HighlightTheme = 'dark') {
 	const removeExistingThemeLinks = () => {
 		document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
 			if (link instanceof HTMLLinkElement && link.href.includes('/styles/')) {
-				if (link.href.includes('highlight.js')) link.parentElement?.removeChild(link)
+				if (link.href.includes('highlight.js')) {link.parentElement?.removeChild(link)}
 			}
 		})
 	}
 
 	const setTheme = async (theme: HighlightTheme) => {
 		const next = normalizeTheme(theme)
-		if (next === currentTheme.value) return
+		if (next === currentTheme.value) {return}
 		try {
 			removeExistingThemeLinks()
 			const url = getThemeCssUrl(next)
@@ -48,7 +48,7 @@ export function useHighlight(theme: HighlightTheme = 'dark') {
 	}
 
 	const loadHighlight = async () => {
-		if (loaded.value) return
+		if (loaded.value) {return}
 
 		try {
 			// Load highlight.js
@@ -80,7 +80,7 @@ export function useHighlight(theme: HighlightTheme = 'dark') {
 	}
 
 	const highlightCode = (code: string, language?: string, autodetect = true, ignoreIllegals = true) => {
-		if (!hljs.value) return escapeHtml(code)
+		if (!hljs.value) {return escapeHtml(code)}
 
 		try {
 			const lang = language || ''

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

@@ -45,7 +45,7 @@ const isOpen = ref(false)
 // Date formatting composable
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
-		if (!date) return ''
+		if (!date) {return ''}
 		return formatDate(date, { fmt: props.enableTime ? 'DD.MM.YY HH:mm' : 'DD.MM.YY' })
 	}
 
@@ -58,7 +58,7 @@ function useFormatting() {
 
 		// Try DD/MM/YYYY format
 		const parts = input.split(/[/.-]/)
-		if (parts.length === 3) {
+		if (3 === parts.length) {
 			const [day, month, year] = parts.map(p => Number.parseInt(p, 10))
 			if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
 				const parsedDate = new Date(year, month - 1, day)
@@ -79,12 +79,12 @@ function useFormatting() {
 		if (props.enableTime) {
 			// Keep the time when time is enabled
 			return date.toISOString()
-		} else {
+		}
 			// Normalize to midnight to emit exact date without time for server compatibility
 			const normalizedDate = new Date(date)
 			normalizedDate.setHours(0, 0, 0, 0)
 			return normalizedDate.toISOString().split('T')[0]
-		}
+		
 	}
 
 	return {
@@ -123,9 +123,9 @@ function useInputHandling() {
 	}
 
 	const handleKeydown = (event: KeyboardEvent) => {
-		if (event.key === 'Escape') {
+		if ('Escape' === event.key) {
 			isOpen.value = false
-		} else if (event.key === 'Enter' && inputValue.value) {
+		} else if ('Enter' === event.key && inputValue.value) {
 			const date = parseUserInput(inputValue.value)
 			if (date) {
 				selectedDate.value = normalizeDate(date)

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

@@ -40,34 +40,34 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 
 // Parse a date string or object into a Date object
 function parseDate(value: string | Date | undefined): Date | null {
-	if (!value) return null
-	const date = typeof value === 'string' ? new Date(value) : value
+	if (!value) {return null}
+	const date = 'string' === typeof value ? new Date(value) : value
 	return Number.isNaN(date.getTime()) ? null : date
 }
 
 // Date validation composable
 function useDateValidation() {
 	const isDateDisabled = (date: Date | null) => {
-		if (!date) return true
+		if (!date) {return true}
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
 		// Check if date is in min/max range
-		if (minDate && date < minDate) return true
-		if (maxDate && date > maxDate) return true
+		if (minDate && date < minDate) {return true}
+		if (maxDate && date > maxDate) {return true}
 
 		// Check if date is in the disabled dates array
-		if (Array.isArray(computedDisabledDates) && computedDisabledDates.length > 0) {
+		if (Array.isArray(computedDisabledDates) && 0 < computedDisabledDates.length) {
 			const isInDisabledDates = computedDisabledDates.some((disabledDate) => {
 				const parsedDisabledDate = parseDate(disabledDate)
-				if (!parsedDisabledDate) return false
+				if (!parsedDisabledDate) {return false}
 
 				// Compare year, month, and day
 				return date.getFullYear() === parsedDisabledDate.getFullYear()
 					&& date.getMonth() === parsedDisabledDate.getMonth()
 					&& date.getDate() === parsedDisabledDate.getDate()
 			})
-			if (isInDisabledDates) return true
+			if (isInDisabledDates) {return true}
 		}
 
 		return false
@@ -77,8 +77,8 @@ function useDateValidation() {
 		const minDate = parseDate(props.min)
 		const maxDate = parseDate(props.max)
 
-		if (minDate && year < minDate.getFullYear()) return true
-		if (maxDate && year > maxDate.getFullYear()) return true
+		if (minDate && year < minDate.getFullYear()) {return true}
+		if (maxDate && year > maxDate.getFullYear()) {return true}
 		return false
 	}
 
@@ -114,7 +114,7 @@ function useCalendarView() {
 
 		// Always ensure we have 6 rows (42 days) in our calendar
 		// If we have less than 6 weeks, add extra week(s) from the next month
-		while (weeksInMonth.length < 6) {
+		while (6 > weeksInMonth.length) {
 			const lastWeek = weeksInMonth[weeksInMonth.length - 1]
 			const lastDay = lastWeek[lastWeek.length - 1]
 			const nextDay = new Date(lastDay.getFullYear(), lastDay.getMonth(), lastDay.getDate() + 1)
@@ -163,14 +163,14 @@ function useCalendarView() {
 	})
 
 	const isSelected = (date: Date | null) => {
-		if (!date || !selectedDate.value) return false
+		if (!date || !selectedDate.value) {return false}
 		return date.getFullYear() === selectedDate.value.getFullYear()
 			&& date.getMonth() === selectedDate.value.getMonth()
 			&& date.getDate() === selectedDate.value.getDate()
 	}
 
 	const isToday = (date: Date | null) => {
-		if (!date) return false
+		if (!date) {return false}
 		return time.dateIsToday(date)
 	}
 
@@ -190,7 +190,7 @@ function useCalendarView() {
 
 		return computedHighlightedDates.some((highlightedDate) => {
 			const parsedDate = parseDate(highlightedDate)
-			if (!parsedDate) return false
+			if (!parsedDate) {return false}
 
 			// Compare year, month, and day
 			return date.getFullYear() === parsedDate.getFullYear()
@@ -233,12 +233,12 @@ function useNavigation() {
 	}
 
 	const previousYear = () => {
-		const offset = currentView.value === 'months' ? 1 : 21
+		const offset = 'months' === currentView.value ? 1 : 21
 		currentMonth.value = new Date(currentMonth.value.getFullYear() - offset, currentMonth.value.getMonth(), 1)
 	}
 
 	const nextYear = () => {
-		const offset = currentView.value === 'months' ? 1 : 21
+		const offset = 'months' === currentView.value ? 1 : 21
 		currentMonth.value = new Date(currentMonth.value.getFullYear() + offset, currentMonth.value.getMonth(), 1)
 	}
 
@@ -258,14 +258,14 @@ function useTimeHandling() {
 	const minutes = computed(() => selectedDate.value?.getMinutes() ?? 0)
 
 	const handleHourInput = (value: number) => {
-		if (!selectedDate.value) return
+		if (!selectedDate.value) {return}
 		const newDate = new Date(selectedDate.value)
 		newDate.setHours(value)
 		emitDateValue(newDate)
 	}
 
 	const handleMinuteInput = (value: number) => {
-		if (!selectedDate.value) return
+		if (!selectedDate.value) {return}
 		const newDate = new Date(selectedDate.value)
 		newDate.setMinutes(value)
 		emitDateValue(newDate)
@@ -308,7 +308,7 @@ const { hours, minutes, handleHourInput, handleMinuteInput } = useTimeHandling()
 
 // Date selection handler
 function selectDate(date: Date | null) {
-	if (!date) return
+	if (!date) {return}
 
 	if (props.enableTime) {
 		// Create date with current time values