@bagelink/vue 1.5.17 → 1.5.20

package/src/components/draggable/useDraggable.ts

@@ -36,7 +36,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const dropTarget = ref<DraggableElement | null>(null)
 
 	// Only run in browser environment
-	const isBrowser = typeof window !== 'undefined'
+	const isBrowser = 'undefined' !== typeof window
 
 	// Move style injection into setup
 	if (isBrowser) {
@@ -79,7 +79,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	const POSITION_CACHE = new Map<number, { top: number, bottom: number }>()
 
 	function createGhost(el: DraggableElement) {
-		if (!isBrowser) return null
+		if (!isBrowser) {return null}
 		const ghost = el.cloneNode(true) as HTMLElement
 		const rect = el.getBoundingClientRect()
 		ghost.style.position = 'fixed'
@@ -99,7 +99,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function createDropIndicator(el: DraggableElement) {
-		if (!isBrowser) return null
+		if (!isBrowser) {return null}
 		const line = document.createElement('div')
 		line.classList.add(defaultOptions.dropIndicatorClass!)
 		line.style.position = 'fixed'
@@ -127,7 +127,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function updateDropIndicator(target: DraggableElement, isAfter: boolean) {
-		if (!dropIndicator.value) return
+		if (!dropIndicator.value) {return}
 
 		const rect = target.getBoundingClientRect()
 		dropIndicator.value.style.display = 'block'
@@ -144,7 +144,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 	function findDraggableParent(element: Element | null): DraggableElement | null {
 		let current = element
-		while (current && (!('__drag_group' in current) || (current as any).dataset.draggable === 'false')) {
+		while (current && (!('__drag_group' in current) || 'false' === (current as any).dataset.draggable)) {
 			current = current.parentElement
 		}
 		return current as DraggableElement | null
@@ -185,11 +185,11 @@ export function useDraggable(options: DraggableOptions = {}) {
 		const now = Date.now()
 		if (now - lastUpdateTime < UPDATE_THRESHOLD) {
 			// Return last calculated index if we're within threshold
-			return lastDropIndex !== -1 ? lastDropIndex : dragIndex
+			return -1 !== lastDropIndex ? lastDropIndex : dragIndex
 		}
 
 		// Use cached positions if available, otherwise calculate new ones
-		if (POSITION_CACHE.size === 0) {
+		if (0 === POSITION_CACHE.size) {
 			cacheElementPositions(draggedList)
 		}
 
@@ -197,7 +197,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 		const targetIndex = draggedList.indexOf(newDropTarget)
 		const targetPos = POSITION_CACHE.get(targetIndex)
 
-		if (!targetPos) return dragIndex
+		if (!targetPos) {return dragIndex}
 
 		const elementHeight = targetPos.bottom - targetPos.top
 		const relativeY = mouseY - targetPos.top
@@ -211,19 +211,19 @@ export function useDraggable(options: DraggableOptions = {}) {
 		// Different behavior based on context
 		if (targetIndex === dragIndex) {
 			// On original element - require significant movement
-			if (relativeY > lowerSticky) dropIndex += 1
+			if (relativeY > lowerSticky) {dropIndex += 1}
 		} else if (targetIndex === lastDropIndex) {
 			// On previously targeted element - use sticky zones
 			if (targetIndex > dragIndex) {
-				if (relativeY < upperSticky) dropIndex = targetIndex
-				else dropIndex = targetIndex + 1
+				if (relativeY < upperSticky) {dropIndex = targetIndex}
+				else {dropIndex = targetIndex + 1}
 			} else {
-				if (relativeY > lowerSticky) dropIndex = targetIndex + 1
-				else dropIndex = targetIndex
+				if (relativeY > lowerSticky) {dropIndex = targetIndex + 1}
+				else {dropIndex = targetIndex}
 			}
 		} else {
 			// On new element - use 60/40 split
-			if (relativeY > elementHeight * 0.6) dropIndex += 1
+			if (relativeY > elementHeight * 0.6) {dropIndex += 1}
 		}
 
 		// Update state
@@ -234,7 +234,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function cleanup() {
-		if (!isBrowser) return
+		if (!isBrowser) {return}
 
 		document.removeEventListener('mousemove', onDragMove)
 		document.removeEventListener('mouseup', onDragEnd)
@@ -294,23 +294,23 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape' && isDragging.value) {
+		if ('Escape' === e.key && isDragging.value) {
 			cleanup()
 		}
 	}
 
 	function onDragStart(e: MouseEvent) {
-		if (!isBrowser || defaultOptions.disabled) return
-		if (e.button !== 0) return // Only left mouse button
-		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return
+		if (!isBrowser || defaultOptions.disabled) {return}
+		if (0 !== e.button) {return} // Only left mouse button
+		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {return}
 
 		const dragEl = findDraggableParent(e.target as Element)
-		if (!dragEl || dragEl.dataset.draggable === 'false') return
+		if (!dragEl || 'false' === dragEl.dataset.draggable) {return}
 
 		// If handle is specified, check if clicked element matches
 		if (defaultOptions.handle) {
 			const handleEl = (e.target as Element).closest(defaultOptions.handle)
-			if (!handleEl || !dragEl.contains(handleEl)) return
+			if (!handleEl || !dragEl.contains(handleEl)) {return}
 		}
 
 		e.preventDefault()
@@ -332,13 +332,13 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 
 		// Only create drop indicator in line mode
-		if (defaultOptions.mode === 'line') {
+		if ('line' === defaultOptions.mode) {
 			dropIndicator.value = createDropIndicator(dragEl)
 		}
 
 		// Apply mode-specific styles and get shift amount
 		dragEl.classList.add(defaultOptions.dragClass!)
-		shiftAmount = defaultOptions.mode === 'ghost'
+		shiftAmount = 'ghost' === defaultOptions.mode
 			? handleGhostMode(dragEl)
 			: handleLineMode(dragEl)
 
@@ -370,8 +370,8 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function autoScroll(e: MouseEvent) {
-		if (!dragElement.value) return
-		if (scrollRAF) cancelAnimationFrame(scrollRAF)
+		if (!dragElement.value) {return}
+		if (scrollRAF) {cancelAnimationFrame(scrollRAF)}
 
 		scrollRAF = requestAnimationFrame(() => {
 			const scrollParent = findScrollParent(dragElement.value!) as HTMLElement
@@ -394,7 +394,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onDragMove(e: MouseEvent) {
-		if (!isDragging.value || !dragElement.value) return
+		if (!isDragging.value || !dragElement.value) {return}
 
 		// Move ghost element with cursor
 		if (ghostElement.value) {
@@ -405,7 +405,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		// Get the draggable list and current positions
 		const list = dragElement.value.__drag_list!
-		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
+		const draggedList = list.filter(el => 'false' !== el.dataset.draggable)
 		const dragIndex = draggedList.indexOf(dragElement.value)
 
 		// Find the element at cursor position
@@ -428,7 +428,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 			dropTarget.value.__intended_index = dropIndex
 
 			// Update line indicator
-			if (dropIndicator.value && defaultOptions.mode === 'line') {
+			if (dropIndicator.value && 'line' === defaultOptions.mode) {
 				const isAfter = dropIndex > dragIndex
 				updateDropIndicator(newDropTarget, isAfter)
 			}
@@ -441,7 +441,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 				el.style.transform = 'translate3d(0, 0, 0)'
 
 				if (el === dragElement.value) {
-					if (defaultOptions.mode === 'ghost') {
+					if ('ghost' === defaultOptions.mode) {
 						const offset = (dropIndex - dragIndex) * shift
 						el.style.transform = `translate3d(0, ${offset}px, 0)`
 					}
@@ -475,11 +475,11 @@ export function useDraggable(options: DraggableOptions = {}) {
 			return
 		}
 
-		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
+		const draggedList = list.filter(el => 'false' !== el.dataset.draggable)
 		const actualDragIndex = draggedList.indexOf(dragElement.value)
 		const actualDropIndex = dropTarget.value.__intended_index!
 
-		if (actualDragIndex !== -1 && actualDropIndex !== -1) {
+		if (-1 !== actualDragIndex && -1 !== actualDropIndex) {
 			list.forEach((el) => {
 				el.style.transition = 'none'
 				el.style.transform = ''
@@ -499,18 +499,18 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function onTouchStart(e: TouchEvent) {
-		if (!isBrowser || defaultOptions.disabled || !e.target) return
+		if (!isBrowser || defaultOptions.disabled || !e.target) {return}
 
 		const touch = e.touches[0]
-		if (!touch) return
+		if (!touch) {return}
 
 		const target = e.target as Element
 		const draggableParent = findDraggableParent(target)
 
-		if (!draggableParent) return
+		if (!draggableParent) {return}
 
 		const { handle } = defaultOptions
-		if (handle && !target.closest(handle)) return
+		if (handle && !target.closest(handle)) {return}
 
 		e.preventDefault() // Prevent scrolling
 		isDragging.value = true
@@ -530,13 +530,13 @@ export function useDraggable(options: DraggableOptions = {}) {
 		}
 
 		// Only create drop indicator in line mode
-		if (defaultOptions.mode === 'line') {
+		if ('line' === defaultOptions.mode) {
 			dropIndicator.value = createDropIndicator(draggableParent)
 		}
 
 		// Apply mode-specific styles and get shift amount
 		dragElement.value.classList.add(defaultOptions.dragClass!)
-		shiftAmount = defaultOptions.mode === 'ghost'
+		shiftAmount = 'ghost' === defaultOptions.mode
 			? handleGhostMode(dragElement.value)
 			: handleLineMode(dragElement.value)
 
@@ -558,7 +558,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	function onTouchMove(e: TouchEvent) {
 		e.preventDefault() // Prevent scrolling
 		const touch = e.touches[0]
-		if (!touch) return
+		if (!touch) {return}
 
 		const mouseEvent = {
 			clientX: touch.clientX,
@@ -572,7 +572,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 	function onTouchEnd(e: TouchEvent) {
 		const touch = e.changedTouches[0]
-		if (!touch) return
+		if (!touch) {return}
 
 		const mouseEvent = {
 			clientX: touch.clientX,
@@ -587,7 +587,7 @@ export function useDraggable(options: DraggableOptions = {}) {
 	}
 
 	function initDraggableContainer(container: HTMLElement) {
-		if (!isBrowser) return
+		if (!isBrowser) {return}
 		cleanupFn?.()
 
 		// Reset state
@@ -607,12 +607,12 @@ export function useDraggable(options: DraggableOptions = {}) {
 
 		let currentIndex = 0
 		elements.forEach((el, index) => {
-			if (el.dataset.draggable !== 'false') {
+			if ('false' !== el.dataset.draggable) {
 				el.style.userSelect = 'none'
 				el.style.webkitUserSelect = 'none'
 				el.__drag_group = options.group
 				el.__drag_index = currentIndex++
-				el.__drag_list = elements.filter(e => e.dataset.draggable !== 'false')
+				el.__drag_list = elements.filter(e => 'false' !== e.dataset.draggable)
 
 				if (options.items) {
 					el.__drag_data = options.items[index]

package/src/components/form/BagelForm.vue

@@ -42,37 +42,80 @@ const isDirty = computed(() => {
 
 // Initialize on mount
 onMounted(() => {
-	if (props.modelValue) initialFormData.value = clone(props.modelValue)
-	applyDefaultValues()
+	if (props.modelValue) {
+		initialFormData.value = clone(props.modelValue)
+		// Ensure formData is properly initialized with the model value
+		if (0 === Object.keys(formData.value).length && 0 < Object.keys(props.modelValue).length) {
+			formData.value = clone(props.modelValue)
+		}
+	}
+	// Apply defaults after ensuring model value is set
+	setTimeout(() => {
+		applyDefaultValues()
+	}, 10)
 })
 
 // Watch for model changes
 watch(() => props.modelValue, (val) => {
-	if (val !== undefined) formData.value = clone(val)
+	if (val !== undefined) {formData.value = clone(val)}
 }, { immediate: true, deep: true })
 
+let isApplyingDefaults = false
+
 function applyDefaultValues() {
-	const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
-	if (!schema) return
-
-	const walk = (nodes: any[]) => {
-		for (const node of nodes) {
-			if (!node || typeof node !== 'object') continue
-			const hasId = typeof node.id === 'string' && node.id.length > 0
-			const hasDefault = Object.prototype.hasOwnProperty.call(node, 'defaultValue') && node.defaultValue !== undefined
-			if (hasId && hasDefault) {
-				const current = getNestedValue(formData.value as any, node.id as string, undefined)
-				if (current === undefined || current === '') {
-					updateFormData({ fieldId: node.id, value: node.defaultValue })
+	if (isApplyingDefaults) {return}
+	isApplyingDefaults = true
+
+	try {
+		const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
+		if (!schema) {return}
+
+		const walk = (nodes: any[]) => {
+			for (const node of nodes) {
+				if (!node || 'object' !== typeof node) {continue}
+				const hasId = 'string' === typeof node.id && 0 < node.id.length
+				const hasDefault = Object.hasOwn(node, 'defaultValue') && node.defaultValue !== undefined
+				if (hasId && hasDefault) {
+					const current = getNestedValue(formData.value as any, node.id as string, undefined)
+
+					// Skip arrays completely - let FieldArray manage its own defaults
+					if ('array' === node.$el || 'array' === node.type) {
+						// Don't apply any defaults to arrays - let FieldArray handle it
+						continue
+					} else {
+						// Don't restore defaultValue for regular inputs - let user control their content
+						// Only apply defaultValue on initial load when truly undefined/null
+						if (current === undefined || null === current) {
+							updateFormData({ fieldId: node.id, value: node.defaultValue })
+						}
+					}
 				}
+				if (Array.isArray(node.children) && node.children.length) {walk(node.children)}
+				// Also check nested fields in array/object configurations
+				if (Array.isArray(node.fields) && node.fields.length) {walk(node.fields)}
 			}
-			if (Array.isArray(node.children) && node.children.length) walk(node.children)
 		}
+		walk(schema as any[])
+	} finally {
+		// Reset the flag after a short delay to allow for multiple synchronous calls
+		setTimeout(() => {
+			isApplyingDefaults = false
+		}, 0)
 	}
-	walk(schema as any[])
 }
 
-watch(resolvedSchema, () => { applyDefaultValues() }, { deep: true })
+// Use a more conservative watch that doesn't trigger on every change
+const schemaVersion = ref(0)
+watch(resolvedSchema, () => {
+	// Increment version to track schema changes
+	schemaVersion.value++
+	// Only apply defaults after a small delay to avoid rapid firing
+	setTimeout(() => {
+		if (!isApplyingDefaults) {
+			applyDefaultValues()
+		}
+	}, 10)
+}, { immediate: false })
 
 // Update form data
 function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
@@ -82,7 +125,7 @@ function updateFormData({ fieldId, value }: { fieldId?: string, value: any }) {
 
 	for (let i = 0; i < keys.length - 1; i++) {
 		const key = keys[i]
-		if (!current[key] || typeof current[key] !== 'object') current[key] = {}
+		if (!current[key] || 'object' !== typeof current[key]) {current[key] = {}}
 		current = current[key]
 	}
 
@@ -99,8 +142,8 @@ const formError = ref<Error>()
 async function handleSubmit() {
 	try {
 		const valid = validateForm()
-		if (!valid) return
-		if (formState.value === 'submitting') return
+		if (!valid) {return}
+		if ('submitting' === formState.value) {return}
 		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
 		initialFormData.value = clone(formData.value)
@@ -118,7 +161,7 @@ const { renderField } = useSchemaField<T>({
 	mode: 'form',
 	getFormData: () => formData.value,
 	onUpdateModelValue: (field, value) => {
-		if (!field.id) return
+		if (!field.id) {return}
 
 		updateFormData({ fieldId: field.id, value })
 		field.onUpdate?.(value, formData.value)
@@ -131,7 +174,7 @@ const renderSchemaField = (field: any) => renderField(field as BaseBagelField<T,
 function handleSlotInputChange(event: Event) {
 	const input = event.target as HTMLInputElement
 	if (input.name) {
-		const value = input.type === 'checkbox' ? input.checked : input.value
+		const value = 'checkbox' === input.type ? input.checked : input.value
 		updateFormData({ fieldId: input.name, value })
 	}
 }

package/src/components/form/BglMultiStepForm.vue

@@ -49,7 +49,7 @@ const previousStep = ref(0)
 const validatedSteps = ref<number[]>([])
 
 function reportValidity() {
-	if (!formRef.value) return false
+	if (!formRef.value) {return false}
 	const isValid = formRef.value.validateForm()
 
 	if (isValid && !validatedSteps.value.includes(currentStep.value)) {
@@ -71,15 +71,15 @@ const filteredSchema = computed(() => {
 		if ((step as any).vIf !== undefined || (step as any)['v-if'] !== undefined) {
 			const condition = (step as any).vIf ?? (step as any)['v-if']
 			// If condition is a function, evaluate it with current form data
-			if (typeof condition === 'function') {
+			if ('function' === typeof condition) {
 				return condition(undefined, formData.value)
 			}
 			// If condition is a boolean, use it directly
-			if (typeof condition === 'boolean') {
+			if ('boolean' === typeof condition) {
 				return condition
 			}
 			// If condition is a string, evaluate it (treat non-empty as true)
-			if (typeof condition === 'string') {
+			if ('string' === typeof condition) {
 				return !!condition
 			}
 		}
@@ -98,11 +98,11 @@ const schemaIndexMap = computed(() => {
 		let shouldInclude = true
 
 		if (vIfCondition !== undefined) {
-			if (typeof vIfCondition === 'function') {
+			if ('function' === typeof vIfCondition) {
 				shouldInclude = vIfCondition(undefined, formData.value)
-			} else if (typeof vIfCondition === 'boolean') {
+			} else if ('boolean' === typeof vIfCondition) {
 				shouldInclude = vIfCondition
-			} else if (typeof vIfCondition === 'string') {
+			} else if ('string' === typeof vIfCondition) {
 				shouldInclude = !!vIfCondition
 			}
 		}
@@ -127,7 +127,7 @@ watch(
 	() => currentStep.value,
 	(newStep, oldStep) => {
 		// Set direction based on step change
-		if (props.direction === 'auto') {
+		if ('auto' === props.direction) {
 			slideDirection.value = props.rtl
 				? (newStep > oldStep ? 'right' : 'left')
 				: (newStep > oldStep ? 'left' : 'right')
@@ -155,12 +155,12 @@ const isStepValid = ref(false)
 
 async function checkCurrentStepValidity() {
 	await nextTick()
-	if (!props.validateOnSteps) isStepValid.value = true
-	else isStepValid.value = formRef.value?.checkValidity() ?? false
+	if (!props.validateOnSteps) {isStepValid.value = true}
+	else {isStepValid.value = formRef.value?.checkValidity() ?? false}
 }
 
 function prevStep() {
-	if (currentStep.value > 0) currentStep.value--
+	if (0 < currentStep.value) {currentStep.value--}
 }
 
 const formContainer = ref<HTMLElement>()
@@ -168,8 +168,8 @@ const formContainer = ref<HTMLElement>()
 async function nextStep() {
 	// Always use reportValidity when attempting to move to next step
 	// This will show validation errors to the user
-	if (props.validateOnSteps && reportValidity() === false) return
-	if (!isLastStep.value) currentStep.value++
+	if (props.validateOnSteps && false === reportValidity()) {return}
+	if (!isLastStep.value) {currentStep.value++}
 	await sleep(400)
 	checkCurrentStepValidity()
 }
@@ -184,7 +184,7 @@ async function goToStep(stepIndex: number) {
 	// For forward navigation, validate each step sequentially until target or invalid step
 	if (stepIndex > currentStep.value) {
 		// Validate current step first
-		if (props.validateOnSteps && reportValidity() === false) {
+		if (props.validateOnSteps && false === reportValidity()) {
 			return false
 		}
 
@@ -205,12 +205,12 @@ async function goToStep(stepIndex: number) {
 				if (!isValid) {
 					// If this step is invalid, stop here
 					return false
-				} else {
+				}
 					// Mark this step as validated
 					if (!validatedSteps.value.includes(step)) {
 						validatedSteps.value.push(step)
 					}
-				}
+				
 			}
 		}
 
@@ -222,7 +222,7 @@ async function goToStep(stepIndex: number) {
 
 function handleSubmit() {
 	// Show validation errors to the user when submitting
-	if (reportValidity() === false) return
+	if (false === reportValidity()) {return}
 	emits('submit', formData.value)
 }
 
@@ -234,7 +234,7 @@ function reset() {
 // Re-evaluate filtered steps when formData changes
 watch(() => formData.value, () => {
 	checkCurrentStepValidity()
-	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
+	if (currentStep.value >= numberOfSteps.value && 0 < numberOfSteps.value) {
 		currentStep.value = 0
 	}
 }, { deep: true })