@bagelink/vue 1.6.47 → 1.6.51

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 = 'undefined' !== typeof window
+	const isBrowser = typeof window !== 'undefined'
 
 	// 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) || 'false' === (current as any).dataset.draggable)) {
+		while (current && (!('__drag_group' in current) || (current as any).dataset.draggable === 'false')) {
 			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 -1 !== lastDropIndex ? lastDropIndex : dragIndex
+			return lastDropIndex !== -1 ? lastDropIndex : dragIndex
 		}
 
 		// Use cached positions if available, otherwise calculate new ones
-		if (0 === POSITION_CACHE.size) {
+		if (POSITION_CACHE.size === 0) {
 			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 ('Escape' === e.key && isDragging.value) {
+		if (e.key === 'Escape' && isDragging.value) {
 			cleanup()
 		}
 	}
 
 	function onDragStart(e: MouseEvent) {
-		if (!isBrowser || defaultOptions.disabled) {return}
-		if (0 !== e.button) {return} // Only left mouse button
-		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {return}
+		if (!isBrowser || defaultOptions.disabled) { return }
+		if (e.button !== 0) { return } // Only left mouse button
+		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) { return }
 
 		const dragEl = findDraggableParent(e.target as Element)
-		if (!dragEl || 'false' === dragEl.dataset.draggable) {return}
+		if (!dragEl || dragEl.dataset.draggable === 'false') { 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 ('line' === defaultOptions.mode) {
+		if (defaultOptions.mode === 'line') {
 			dropIndicator.value = createDropIndicator(dragEl)
 		}
 
 		// Apply mode-specific styles and get shift amount
 		dragEl.classList.add(defaultOptions.dragClass!)
-		shiftAmount = 'ghost' === defaultOptions.mode
+		shiftAmount = defaultOptions.mode === 'ghost'
 			? 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 => 'false' !== el.dataset.draggable)
+		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
 		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 && 'line' === defaultOptions.mode) {
+			if (dropIndicator.value && defaultOptions.mode === 'line') {
 				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 ('ghost' === defaultOptions.mode) {
+					if (defaultOptions.mode === 'ghost') {
 						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 => 'false' !== el.dataset.draggable)
+		const draggedList = list.filter(el => el.dataset.draggable !== 'false')
 		const actualDragIndex = draggedList.indexOf(dragElement.value)
 		const actualDropIndex = dropTarget.value.__intended_index!
 
-		if (-1 !== actualDragIndex && -1 !== actualDropIndex) {
+		if (actualDragIndex !== -1 && actualDropIndex !== -1) {
 			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 ('line' === defaultOptions.mode) {
+		if (defaultOptions.mode === 'line') {
 			dropIndicator.value = createDropIndicator(draggableParent)
 		}
 
 		// Apply mode-specific styles and get shift amount
 		dragElement.value.classList.add(defaultOptions.dragClass!)
-		shiftAmount = 'ghost' === defaultOptions.mode
+		shiftAmount = defaultOptions.mode === 'ghost'
 			? 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 ('false' !== el.dataset.draggable) {
+			if (el.dataset.draggable !== 'false') {
 				el.style.userSelect = 'none'
 				el.style.webkitUserSelect = 'none'
 				el.__drag_group = options.group
 				el.__drag_index = currentIndex++
-				el.__drag_list = elements.filter(e => 'false' !== e.dataset.draggable)
+				el.__drag_list = elements.filter(e => e.dataset.draggable !== 'false')
 
 				if (options.items) {
 					el.__drag_data = options.items[index]

package/src/components/form/BagelForm.vue

@@ -45,7 +45,7 @@ onMounted(() => {
 	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) {
+		if (Object.keys(formData.value).length === 0 && Object.keys(props.modelValue).length > 0) {
 			formData.value = clone(props.modelValue)
 		}
 	}
@@ -57,42 +57,42 @@ onMounted(() => {
 
 // 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() {
-	if (isApplyingDefaults) {return}
+	if (isApplyingDefaults) { return }
 	isApplyingDefaults = true
 
 	try {
 		const schema = resolvedSchema.value as unknown as Array<BaseBagelField<T, any>> | undefined
-		if (!schema) {return}
+		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
+				if (!node || typeof node !== 'object') { continue }
+				const hasId = typeof node.id === 'string' && node.id.length > 0
 				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) {
+					if (node.$el === 'array' || node.type === 'array') {
 						// 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) {
+						if (current === undefined || current === null) {
 							updateFormData({ fieldId: node.id, value: node.defaultValue })
 						}
 					}
 				}
-				if (Array.isArray(node.children) && node.children.length) {walk(node.children)}
+				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.fields) && node.fields.length) { walk(node.fields) }
 			}
 		}
 		walk(schema as any[])
@@ -125,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] || 'object' !== typeof current[key]) {current[key] = {}}
+		if (!current[key] || typeof current[key] !== 'object') { current[key] = {} }
 		current = current[key]
 	}
 
@@ -142,8 +142,8 @@ const formError = ref<Error>()
 async function handleSubmit() {
 	try {
 		const valid = validateForm()
-		if (!valid) {return}
-		if ('submitting' === formState.value) {return}
+		if (!valid) { return }
+		if (formState.value === 'submitting') { return }
 		formState.value = 'submitting'
 		await props.onSubmit?.(formData.value)
 		initialFormData.value = clone(formData.value)
@@ -161,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)
@@ -174,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 = 'checkbox' === input.type ? input.checked : input.value
+		const value = input.type === 'checkbox' ? input.checked : input.value
 		updateFormData({ fieldId: input.name, value })
 	}
 }

package/src/components/form/BglFieldSet.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-const fieldSet = $ref<HTMLFieldSetElement | undefined>()
-const isDirty = $ref(false)
-const validateForm = () => fieldSet?.reportValidity()
+import { ref } from 'vue'
+
+const fieldSet = ref<HTMLFieldSetElement | undefined>()
+const isDirty = ref(false)
+const validateForm = () => fieldSet.value?.reportValidity()
 defineExpose({ validateForm, isDirty })
 </script>
 

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 ('function' === typeof condition) {
+			if (typeof condition === 'function') {
 				return condition(undefined, formData.value)
 			}
 			// If condition is a boolean, use it directly
-			if ('boolean' === typeof condition) {
+			if (typeof condition === 'boolean') {
 				return condition
 			}
 			// If condition is a string, evaluate it (treat non-empty as true)
-			if ('string' === typeof condition) {
+			if (typeof condition === 'string') {
 				return !!condition
 			}
 		}
@@ -98,11 +98,11 @@ const schemaIndexMap = computed(() => {
 		let shouldInclude = true
 
 		if (vIfCondition !== undefined) {
-			if ('function' === typeof vIfCondition) {
+			if (typeof vIfCondition === 'function') {
 				shouldInclude = vIfCondition(undefined, formData.value)
-			} else if ('boolean' === typeof vIfCondition) {
+			} else if (typeof vIfCondition === 'boolean') {
 				shouldInclude = vIfCondition
-			} else if ('string' === typeof vIfCondition) {
+			} else if (typeof vIfCondition === 'string') {
 				shouldInclude = !!vIfCondition
 			}
 		}
@@ -127,7 +127,7 @@ watch(
 	() => currentStep.value,
 	(newStep, oldStep) => {
 		// Set direction based on step change
-		if ('auto' === props.direction) {
+		if (props.direction === 'auto') {
 			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 (0 < currentStep.value) {currentStep.value--}
+	if (currentStep.value > 0) { 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 && false === reportValidity()) {return}
-	if (!isLastStep.value) {currentStep.value++}
+	if (props.validateOnSteps && reportValidity() === false) { 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 && false === reportValidity()) {
+		if (props.validateOnSteps && reportValidity() === false) {
 			return false
 		}
 
@@ -206,11 +206,10 @@ async function goToStep(stepIndex: number) {
 					// If this step is invalid, stop here
 					return false
 				}
-					// Mark this step as validated
-					if (!validatedSteps.value.includes(step)) {
-						validatedSteps.value.push(step)
-					}
-				
+				// Mark this step as validated
+				if (!validatedSteps.value.includes(step)) {
+					validatedSteps.value.push(step)
+				}
 			}
 		}
 
@@ -222,7 +221,7 @@ async function goToStep(stepIndex: number) {
 
 function handleSubmit() {
 	// Show validation errors to the user when submitting
-	if (false === reportValidity()) {return}
+	if (reportValidity() === false) { return }
 	emits('submit', formData.value)
 }
 
@@ -234,7 +233,7 @@ function reset() {
 // Re-evaluate filtered steps when formData changes
 watch(() => formData.value, () => {
 	checkCurrentStepValidity()
-	if (currentStep.value >= numberOfSteps.value && 0 < numberOfSteps.value) {
+	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
 		currentStep.value = 0
 	}
 }, { deep: true })

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

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends boolean | undefined | any[]">
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const { defaultValue, id } = defineProps<{
 	label?: string
@@ -12,7 +12,7 @@ const { defaultValue, id } = defineProps<{
 	value?: any
 }>()
 
-const inputId = $computed(() => id || Math.random().toString(36).slice(7))
+const inputId = computed(() => id || Math.random().toString(36).slice(7))
 
 const checked = defineModel<T>('modelValue', { default: undefined })
 

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 ('\n' === char) {
+				if (char === '\n') {
 					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 ('dark' === t) {return 'atom-one-dark'}
-		if ('light' === t) {return 'atom-one-light'}
+		if (t === 'dark') { return 'atom-one-dark' }
+		if (t === 'light') { 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/ColorInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Btn } from '@bagelink/vue'
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -18,10 +18,10 @@ const props = withDefaults(
 	},
 )
 const emits = defineEmits(['update:modelValue'])
-const inputVal = $ref<string>(props.modelValue)
+const inputVal = ref<string>(props.modelValue)
 
 watch(
-	() => inputVal,
+	() => inputVal.value,
 	(newVal) => { emits('update:modelValue', newVal) },
 )
 </script>
@@ -36,7 +36,8 @@ watch(
 					v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
 					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required" v-bind="nativeInputAttrs"
 				>
-				<input v-if="!small"
+				<input
+					v-if="!small"
 					v-model="inputVal"
 					class="flex-grow-1 border colorInputPick"
 					type="text"