@bagelink/vue 1.6.47 → 1.6.51

package/src/components/lightbox/Lightbox.vue

@@ -2,50 +2,50 @@
 import type { LightboxItem } from './lightbox.types'
 
 import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
-import { watch as vueWatch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
-let isOpen = $ref(false)
-let group = $ref<LightboxItem[]>([])
-let currentIndex = $ref(0)
-const currentItem = $computed<LightboxItem>(() => group[currentIndex])
-let zoom = $ref(1)
+const isOpen = ref(false)
+const group = ref<LightboxItem[]>([])
+const currentIndex = ref(0)
+const currentItem = computed<LightboxItem>(() => group.value[currentIndex.value])
+const zoom = ref(1)
 
-const canSwipe = $computed(() => zoom === 1)
+const canSwipe = computed(() => zoom.value === 1)
 
 // Advanced options that update reactively
-const swiperAdvancedOptions = $computed(() => ({
-	allowTouchMove: zoom === 1,
-	touchRatio: zoom === 1 ? 1 : 0,
-	simulateTouch: zoom === 1,
+const swiperAdvancedOptions = computed(() => ({
+	allowTouchMove: zoom.value === 1,
+	touchRatio: zoom.value === 1 ? 1 : 0,
+	simulateTouch: zoom.value === 1,
 }))
 
 function open(item: LightboxItem, groupItems?: LightboxItem[]) {
-	isOpen = true
-	group = groupItems || [item]
-	currentIndex = group.findIndex((groupItem) => {
+	isOpen.value = true
+	group.value = groupItems || [item]
+	currentIndex.value = group.value.findIndex((groupItem) => {
 		const hasSrcMatch = item.src !== undefined && item.src !== null && item.src !== ''
 			&& groupItem.src === item.src
 		const hasPathMatch = item.pathKey !== undefined && item.pathKey !== null && item.pathKey !== ''
 			&& groupItem.pathKey === item.pathKey
 		return hasSrcMatch || hasPathMatch
 	})
-	if (currentIndex === -1) currentIndex = 0
-	zoom = 1
+	if (currentIndex.value === -1) currentIndex.value = 0
+	zoom.value = 1
 	document.addEventListener('keydown', handleKeydown)
 }
 
 function close() {
-	isOpen = false
+	isOpen.value = false
 	document.removeEventListener('keydown', handleKeydown)
 }
 
 function selectItem(index: number) {
-	currentIndex = index
-	zoom = 1
+	currentIndex.value = index
+	zoom.value = 1
 	// The v-model will handle updating the swiper
 }
 
-vueWatch(() => isOpen, (val) => {
+watch(() => isOpen.value, (val) => {
 	if (val) {
 		document.body.style.overflow = 'hidden'
 	} else {
@@ -53,9 +53,9 @@ vueWatch(() => isOpen, (val) => {
 	}
 })
 
-vueWatch(() => currentIndex, () => {
+watch(() => currentIndex.value, () => {
 	// Reset zoom when changing slides
-	zoom = 1
+	zoom.value = 1
 })
 
 function handleKeydown(event: KeyboardEvent) {

package/src/components/lightbox/index.ts

@@ -32,9 +32,9 @@ const lightboxDirective: Directive = {
 
 function groupHandler(item: LightboxItem) {
 	if (item.group) {
-		if (!groups[item.group]) {groups[item.group] = []}
+		if (!groups[item.group]) { groups[item.group] = [] }
 		const currentIndex = groups[item.group].findIndex(i => i.src === item.src)
-		if (-1 === currentIndex) {groups[item.group].push(item)}
+		if (currentIndex === -1) { groups[item.group].push(item) }
 	}
 }
 
@@ -42,7 +42,7 @@ function openClickHandler(e: MouseEvent, el: HTMLElement, binding: DirectiveBind
 	e.stopPropagation()
 	const item = bindingToItem(binding, el)
 	const lightboxInstance = getLightboxInstance()
-	if (!lightboxInstance || !lightboxInstance.open) {return}
+	if (!lightboxInstance || !lightboxInstance.open) { return }
 	const open = lightboxInstance.open as OpenFunction
 	const group = item && item.group ? groups[item.group] : undefined
 	open(item, group)
@@ -60,18 +60,18 @@ const youtubeRegex = /youtube\.com|youtu\.be/
 const vimeoRegex = /vimeo\.com/
 
 function urlToName(url: string): string {
-	if (!url || 'string' !== typeof url) {return ''}
+	if (!url || typeof url !== 'string') { return '' }
 	const name = url.split('/').pop() || ''
 	return name.replace(/\.[^/.]+$/, '')
 }
 
 function determineFileType(url: any): string {
-	if ('string' !== typeof url || !url) {return 'unknown'}
+	if (typeof url !== 'string' || !url) { return 'unknown' }
 	const extension = (url.split('.').pop() || '').toLowerCase()
 	const altExtension = url.split('?')[0].split('.').pop()?.toLowerCase() || ''
-	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) {return 'image'}
-	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) {return 'video'}
-	if (['pdf'].includes(extension)) {return 'pdf'}
+	if (IMAGE_FORMATS_REGEXP.test(extension) || IMAGE_FORMATS_REGEXP.test(altExtension)) { return 'image' }
+	if (VIDEO_FORMATS_REGEXP.test(extension) || youtubeRegex.test(url) || vimeoRegex.test(url)) { return 'video' }
+	if (['pdf'].includes(extension)) { return 'pdf' }
 	return extension ?? 'unknown'
 }
 

package/src/composables/index.ts

@@ -2,7 +2,7 @@ import type { BglFormSchemaT, IfAny } from '@bagelink/vue'
 
 import type { MaybeRefOrGetter, Ref, UnwrapRef } from 'vue'
 import { getFallbackSchema } from '@bagelink/vue'
-import { ref, toValue, watch } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
 export { getBagelInstance, setBagelInstance, useBagel } from './useBagel'
@@ -19,17 +19,17 @@ interface UseBglSchemaParamsT<T> {
 export function useBglSchema<T = { [key: string]: unknown }>(
 	{ schema, columns, data }: UseBglSchemaParamsT<T> = {}
 ): BglFormSchemaT<T> {
-	const _schema = $computed(() => toValue(schema))
-	const _columns = $computed(() => toValue(columns))
+	const _schema = computed(() => toValue(schema))
+	const _columns = computed(() => toValue(columns))
 
-	if (_schema) {
+	if (_schema.value) {
 		return (
-			_columns && _columns.length > 0
-				? _schema.filter(f => _columns.includes(f.id as string))
-				: _schema
+			_columns.value && _columns.value.length > 0
+				? _schema.value.filter(f => _columns.value?.includes(f.id as string))
+				: _schema.value
 		) as BglFormSchemaT<T>
 	}
-	return getFallbackSchema(data, _columns)
+	return getFallbackSchema(data, _columns.value)
 }
 
 export function localRef<T>(

package/src/composables/useAddToCalendar.ts

@@ -14,7 +14,7 @@ export type CalendarProvider = 'google' | 'apple' | 'outlook' | 'outlookcom' | '
 export function useAddToCalendar(event: CalendarEvent) {
 	// Parse dates if they're strings
 	const parseDate = (date: Date | string): Date => {
-		return 'string' === typeof date ? new Date(date) : date
+		return typeof date === 'string' ? new Date(date) : date
 	}
 
 	const eventStartDate = parseDate(event.startDate)
@@ -33,7 +33,7 @@ export function useAddToCalendar(event: CalendarEvent) {
 
 	// Check if location is a URL
 	const isUrl = (text?: string): boolean => {
-		if (!text || 0 === text.length) {
+		if (!text || text.length === 0) {
 			return false
 		}
 		return /^https?:\/\/.+/.test(text.trim())
@@ -77,13 +77,13 @@ export function useAddToCalendar(event: CalendarEvent) {
 			`SUMMARY:${event.title}`,
 		]
 
-		if (event.description && 0 < event.description.length) {
+		if (event.description && event.description.length > 0) {
 			// ICS descriptions need special handling of newlines and character limits
 			const description = event.description.replace(/\n/g, '\\n')
 			icsContent.push(`DESCRIPTION:${description}`)
 		}
 
-		if (event.location && 0 < event.location.length) {
+		if (event.location && event.location.length > 0) {
 			icsContent.push(`LOCATION:${event.location}`)
 			// If location is a URL, also add it as the URL field
 			if (locationIsUrl) {
@@ -104,11 +104,11 @@ export function useAddToCalendar(event: CalendarEvent) {
 			dates: `${formatDateISO(eventStartDate)}/${formatDateISO(eventEndDate)}`,
 		})
 
-		if (event.description && 0 < event.description.length) {
+		if (event.description && event.description.length > 0) {
 			params.append('details', event.description)
 		}
 
-		if (event.location && 0 < event.location.length) {
+		if (event.location && event.location.length > 0) {
 			params.append('location', event.location)
 		}
 
@@ -125,11 +125,11 @@ export function useAddToCalendar(event: CalendarEvent) {
 			enddt: eventEndDate.toISOString(),
 		})
 
-		if (event.description && 0 < event.description.length) {
+		if (event.description && event.description.length > 0) {
 			params.append('body', event.description)
 		}
 
-		if (event.location && 0 < event.location.length) {
+		if (event.location && event.location.length > 0) {
 			params.append('location', event.location)
 		}
 
@@ -146,11 +146,11 @@ export function useAddToCalendar(event: CalendarEvent) {
 			enddt: eventEndDate.toISOString(),
 		})
 
-		if (event.description && 0 < event.description.length) {
+		if (event.description && event.description.length > 0) {
 			params.append('body', event.description)
 		}
 
-		if (event.location && 0 < event.location.length) {
+		if (event.location && event.location.length > 0) {
 			params.append('location', event.location)
 		}
 
@@ -168,11 +168,11 @@ export function useAddToCalendar(event: CalendarEvent) {
 			dur: duration.toString(),
 		})
 
-		if (event.description && 0 < event.description.length) {
+		if (event.description && event.description.length > 0) {
 			params.append('desc', event.description)
 		}
 
-		if (event.location && 0 < event.location.length) {
+		if (event.location && event.location.length > 0) {
 			params.append('in_loc', event.location)
 		}
 
@@ -214,7 +214,7 @@ export function useAddToCalendar(event: CalendarEvent) {
 
 	// Add to calendar action
 	const addToCalendar = (provider: CalendarProvider) => {
-		if ('apple' === provider || 'ics' === provider) {
+		if (provider === 'apple' || provider === 'ics') {
 			downloadICS()
 		} else {
 			const url = getCalendarUrl(provider)

package/src/composables/useDevice.ts

@@ -2,7 +2,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
 
 export function useDevice() {
 	const innerWidth = ref(window.innerWidth)
-	const isMobile = ref(768 > window.innerWidth)
+	const isMobile = ref(window.innerWidth < 768)
 	const scrollY = ref(window.scrollY)
 	const scrollX = ref(window.scrollX)
 	const innerHeight = ref(window.innerHeight)
@@ -20,7 +20,7 @@ export function useDevice() {
 
 		// Update current values
 		innerWidth.value = window.innerWidth
-		isMobile.value = 768 > window.innerWidth
+		isMobile.value = window.innerWidth < 768
 		scrollY.value = window.scrollY
 		scrollX.value = window.scrollX
 		innerHeight.value = window.innerHeight

package/src/composables/useFormField.ts

@@ -12,17 +12,17 @@ export function useFormField<T>(props: {
 
 	const fieldData = computed({
 		get: () => {
-			if (!props.fieldID || !formState) {return props.modelValue ?? props.field.defaultValue ?? ''}
+			if (!props.fieldID || !formState) { return props.modelValue ?? props.field.defaultValue ?? '' }
 			const value = formState.getFieldData(props.fieldID)
 			// For nested form containers, default to empty object
-			if ('form' === props.field.$el && !value) {return {}}
+			if (props.field.$el === 'form' && !value) { return {} }
 			// Don't auto-restore defaultValue - let user control their content
 			return value ?? ''
 		},
 		set: (val: any) => {
-			if (!props.fieldID || !formState) {return}
+			if (!props.fieldID || !formState) { return }
 			const currentValue = formState.getFieldData(props.fieldID)
-			if (JSON.stringify(val) === JSON.stringify(currentValue)) {return}
+			if (JSON.stringify(val) === JSON.stringify(currentValue)) { return }
 
 			if (props.field.onUpdate) {
 				props.field.onUpdate(val, currentValue)

package/src/composables/usePolling.ts

@@ -25,13 +25,13 @@ export function usePolling(
 	const pollingId = ref<number | null>(null)
 
 	const isTabActive = () => {
-		return !pauseInBackground || 'visible' === document.visibilityState
+		return !pauseInBackground || document.visibilityState === 'visible'
 	}
 
 	// Stop polling permanently - cannot be resumed
 	const stopPolling = () => {
 		isPolling.value = false // Permanently set to false
-		if (null !== pollingId.value) {
+		if (pollingId.value !== null) {
 			clearTimeout(pollingId.value)
 			pollingId.value = null
 		}
@@ -39,7 +39,7 @@ export function usePolling(
 
 	// Pause polling temporarily - can be resumed
 	const pausePolling = () => {
-		if (null !== pollingId.value) {
+		if (pollingId.value !== null) {
 			clearTimeout(pollingId.value)
 			pollingId.value = null
 		}
@@ -49,7 +49,7 @@ export function usePolling(
 	// Start polling with intelligent checks
 	const startPolling = () => {
 		// Clear any existing polling timeout
-		if (null !== pollingId.value) {
+		if (pollingId.value !== null) {
 			clearTimeout(pollingId.value)
 			pollingId.value = null
 		}
@@ -70,13 +70,13 @@ export function usePolling(
 	}
 
 	const resumePolling = () => {
-		if (isPolling.value) {startPolling()}
-		else {console.warn('Cannot resume polling that was stopped')}
+		if (isPolling.value) { startPolling() }
+		else { console.warn('Cannot resume polling that was stopped') }
 	}
 
 	function updateVisibility() {
-		if ('visible' === document.visibilityState) {
-			if (isPolling.value) {startPolling()}
+		if (document.visibilityState === 'visible') {
+			if (isPolling.value) { startPolling() }
 		} else if (pauseInBackground) {
 			pausePolling()
 		}

package/src/composables/useSchemaField.ts

@@ -40,19 +40,19 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 
 	// Helper function to render objects recursively
 	function renderObject(obj: T, depth = 0): string {
-		if (null === obj || obj === undefined) {return ''}
-		if ('object' !== typeof obj) {return String(obj)}
-		if (Array.isArray(obj)) {return obj.map(item => renderObject(item, depth + 1)).join(', ')}
+		if (obj === null || obj === undefined) { return '' }
+		if (typeof obj !== 'object') { return String(obj) }
+		if (Array.isArray(obj)) { return obj.map(item => renderObject(item, depth + 1)).join(', ') }
 
 		// For objects, format as key: value pairs
-		const indent = 0 < depth ? '  '.repeat(depth) : ''
+		const indent = depth > 0 ? '  '.repeat(depth) : ''
 		const nextIndent = '  '.repeat(depth + 1)
 
 		const entries = Object.entries(obj)
-		if (0 === entries.length) {return '{}'}
+		if (entries.length === 0) { return '{}' }
 
 		// For nested objects, format with newlines and indentation
-		if (0 < depth) {
+		if (depth > 0) {
 			return `{\n${entries
 				.map(([key, value]) => `${nextIndent}${key}: ${renderObject(value, depth + 1)}`)
 				.join(',\n')}\n${indent}}`
@@ -61,7 +61,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		// For top-level objects, format as a flat list
 		return entries
 			.map(([key, value]) => {
-				const valueStr = 'object' === typeof value && null !== value 
+				const valueStr = typeof value === 'object' && value !== null
 					? renderObject(value, depth + 1)
 					: String(value)
 				return `${key}: ${valueStr}`
@@ -90,18 +90,18 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			email: EmailInput
 		}
 
-		if ('textarea' === field.$el && !field.attrs?.multiline) {
+		if (field.$el === 'textarea' && !field.attrs?.multiline) {
 			field.attrs = { ...field.attrs, multiline: true }
 		}
 
-		return 'object' === typeof field.$el
+		return typeof field.$el === 'object'
 			? field.$el
 			: (componentMap[field.$el as keyof typeof componentMap] ?? field.$el ?? 'div')
 	}
 
 	function renderChild(child: SchemaChild<T, Path<T>>, slots?: BaseBagelField<T, Path<T>>['slots']) {
-		if ('string' === typeof child) {return child}
-		if (isVNode(child)) {return child}
+		if (typeof child === 'string') { return child }
+		if (isVNode(child)) { return child }
 		return renderField(
 			child as BaseBagelField<T, Path<T>>,
 			slots
@@ -113,14 +113,14 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		slots?: BaseBagelField<T, Path<T>>['slots']
 	): VNode | undefined {
 		const Component = getComponent(field as Field<T>)
-		if (!Component) {return}
+		if (!Component) { return }
 
 		const rowData = (getFormData?.() || {}) as T | undefined
 
 		// Check vIf condition first
 		const condition = field.vIf ?? field['v-if']
 		if (condition !== undefined) {
-			if ('function' === typeof condition) {
+			if (typeof condition === 'function') {
 				// Compute currentValue for the vIf check
 				const vIfCurrentValue = field.id
 					? ('get' in (rowData || {})
@@ -134,7 +134,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 				if (!vIfResult) {
 					return
 				}
-			} else if ('string' === typeof condition) {
+			} else if (typeof condition === 'string') {
 				if (!getNestedValue(rowData, condition)) {
 					return
 				}
@@ -178,9 +178,9 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const boundFieldProps = bindAttrs(fieldProps as Attributes<T, Path<T>> | undefined, currentValue, rowData)
 
 		// Check if this component should receive value as slot
-		const isSlotValueComponent = 'string' === typeof Component && SLOT_VALUE_COMPONENTS.has(Component)
+		const isSlotValueComponent = typeof Component === 'string' && SLOT_VALUE_COMPONENTS.has(Component)
 		// Check if this component should receive value as src
-		const isSrcValueComponent = 'string' === typeof Component && SRC_VALUE_COMPONENTS.has(Component)
+		const isSrcValueComponent = typeof Component === 'string' && SRC_VALUE_COMPONENTS.has(Component)
 
 		const props: { [key: string]: any } = {
 			...boundFieldProps,
@@ -209,7 +209,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		}
 
 		// Wire top-level onClick with conditional args
-		if ('function' === typeof (field as any).onClick) {
+		if (typeof (field as any).onClick === 'function') {
 			const original = (field as any).onClick as (val?: any, row?: T) => void
 			props.onClick = () => {
 				if (id) {
@@ -221,7 +221,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		}
 
 		// For form mode, always use the original value for modelValue
-		if ('form' === mode) {
+		if (mode === 'form') {
 			props.modelValue = currentValue
 			props['onUpdate:modelValue'] = (value: any) => {
 				onUpdateModelValue?.(field, value)
@@ -248,7 +248,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		if (field.options) {
 			if (Array.isArray(field.options)) {
 				props.options = field.options
-			} else if ('function' === typeof field.options) {
+			} else if (typeof field.options === 'function') {
 				const fn = field.options as any
 				// Component-aware mapping
 				if (Component === SelectInput) {
@@ -256,18 +256,18 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 						const row = getFormData?.()
 						const val = currentValue
 						// If author expects (query) only, call directly
-						if ('function' === typeof fn && 1 === fn.length) {
+						if (typeof fn === 'function' && fn.length === 1) {
 							return fn(query)
 						}
 						// If author expects (query, val, row), pass it directly
-						if ('function' === typeof fn && 3 <= fn.length) {
+						if (typeof fn === 'function' && fn.length >= 3) {
 							return fn(query, val, row)
 						}
 						// Otherwise evaluate (val,row) → array | (query)=>Promise | Promise
 						const out = fn(val, row)
-						if (Array.isArray(out)) {return out}
-						if ('function' === typeof out) {return out(query)}
-						if (out && 'function' === typeof out.then) {return out}
+						if (Array.isArray(out)) { return out }
+						if (typeof out === 'function') { return out(query) }
+						if (out && typeof out.then === 'function') { return out }
 						return []
 					}
 				} else {
@@ -276,10 +276,10 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 						const row = getFormData?.()
 						const val = currentValue
 						const out = fn(val, row)
-						if (Array.isArray(out)) {return out}
-						if ('function' === typeof out) {return await out('')}
-						if (out && 'function' === typeof out.then) {return await out}
-						if (3 <= fn.length) {return await fn('', val, row)}
+						if (Array.isArray(out)) { return out }
+						if (typeof out === 'function') { return await out('') }
+						if (out && typeof out.then === 'function') { return await out }
+						if (fn.length >= 3) { return await fn('', val, row) }
 						return []
 					}
 				}
@@ -293,10 +293,10 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			const boundAttrs = bindAttrs(field.attrs, currentValue, rowData)
 			Object.entries(boundAttrs).forEach(([key, value]) => {
 				// Skip $el as it's not a DOM attribute
-				if ('$el' === key) {return}
+				if (key === '$el') { return }
 
-				if ('function' === typeof value) {
-					if ('onClick' === key) {
+				if (typeof value === 'function') {
+					if (key === 'onClick') {
 						const original = value as (val?: any, row?: T) => void
 						props.onClick = () => {
 							if (id) {
@@ -324,7 +324,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		const componentSlots: Parameters<typeof h>[1] = {}
 
 		// Add default slot if there are children
-		if (children && 0 < children.length) {
+		if (children && children.length > 0) {
 			componentSlots.default = () => children
 				.map(child => renderChild(child, slots))
 				.filter(Boolean) // Filter out null results from vIf
@@ -342,7 +342,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 					if (Array.isArray(slot)) {
 						// Handle BglFormSchemaT array
 						return slot.map((schemaField) => {
-							if ('function' === typeof schemaField) {
+							if (typeof schemaField === 'function') {
 								// Handle function slot
 								const slotFn = schemaField
 								return slotFn({ row: rowData, field })
@@ -369,19 +369,19 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 		// 			? (slots[field.id])({ row: rowData, field })
 		// 			: undefined
 
-		if ('preview' === mode) {
+		if (mode === 'preview') {
 			// Skip rendering if value is unset and includeUnset is false
-			if (!includeUnset && (transformedValue === undefined || null === transformedValue 
-				|| ('string' === typeof transformedValue && 0 === transformedValue.length))) {
+			if (!includeUnset && (transformedValue === undefined || transformedValue === null
+				|| (typeof transformedValue === 'string' && transformedValue.length === 0))) {
 				return
 			}
 
 			return h('div', { class: 'preview-field' }, [
 				h('div', { class: 'field-label' }, `${field.label || keyToLabel(field.id || '')}:`),
 				h('div', { class: 'field-value' }, [
-					slotContent || ('object' === typeof field.$el
+					slotContent || (typeof field.$el === 'object'
 						? h(Component as any, props, componentSlots)
-						: 'object' === typeof transformedValue && null !== transformedValue 
+						: typeof transformedValue === 'object' && transformedValue !== null
 							? h('pre', {
 								style: 'margin: 0; white-space: pre-wrap; font-family: inherit; font-size: inherit;'
 							}, renderObject(transformedValue))

package/src/composables/useTheme.ts

@@ -50,17 +50,17 @@ function applyTheme(themeValue: string) {
 
 	// Remove all theme classes
 	themeOptions.value.forEach((t) => {
-		if ('system' !== t.class) {
+		if (t.class !== 'system') {
 			root.classList.remove(t.class)
 		}
 	})
 
 	// Handle system theme
-	if ('system' === themeValue) {
+	if (themeValue === 'system') {
 		const systemIsDark = getSystemPrefersDark()
 		isDark.value = systemIsDark
-		const darkTheme = themeOptions.value.find(t => 'dark' === t.value)
-		const lightTheme = themeOptions.value.find(t => 'light' === t.value)
+		const darkTheme = themeOptions.value.find(t => t.value === 'dark')
+		const lightTheme = themeOptions.value.find(t => t.value === 'light')
 		const themeToApply = systemIsDark ? darkTheme : lightTheme
 		if (themeToApply) {
 			root.classList.add(themeToApply.class)
@@ -77,9 +77,9 @@ function applyTheme(themeValue: string) {
 
 function toggleTheme() {
 	// Get all non-system themes
-	const cyclableThemes = themeOptions.value.filter(t => 'system' !== t.value)
+	const cyclableThemes = themeOptions.value.filter(t => t.value !== 'system')
 
-	if (0 === cyclableThemes.length) {return}
+	if (cyclableThemes.length === 0) { return }
 
 	const currentIndex = cyclableThemes.findIndex(t => t.value === colorMode.value)
 	const nextIndex = (currentIndex + 1) % cyclableThemes.length
@@ -91,8 +91,8 @@ function addTheme(theme: ThemeOption) {
 	const exists = themeOptions.value.some(t => t.value === theme.value)
 	if (!exists) {
 		// Add before 'system' option
-		const systemIndex = themeOptions.value.findIndex(t => 'system' === t.value)
-		if (-1 < systemIndex) {
+		const systemIndex = themeOptions.value.findIndex(t => t.value === 'system')
+		if (systemIndex > -1) {
 			themeOptions.value.splice(systemIndex, 0, theme)
 		} else {
 			themeOptions.value.push(theme)
@@ -130,7 +130,7 @@ export function useTheme() {
 		// React to system changes when in "system" mode
 		const mq = window.matchMedia('(prefers-color-scheme: dark)')
 		const handler = (e: MediaQueryListEvent) => {
-			if ('system' === colorMode.value) {
+			if (colorMode.value === 'system') {
 				applyTheme('system')
 			}
 		}

package/src/composables/useValidateFieldValue.ts

@@ -12,9 +12,9 @@ export function useValidateFieldValue(
 		inputVal,
 		(newVal, oldVal) => {
 			getInput?.()?.setCustomValidity('')
-			if (!validateFn || newVal === oldVal || !newVal) {return}
+			if (!validateFn || newVal === oldVal || !newVal) { return }
 			const isValid = validateFn(newVal, getFormData?.())
-			if ('string' === typeof isValid) {getInput?.()?.setCustomValidity(isValid)}
+			if (typeof isValid === 'string') { getInput?.()?.setCustomValidity(isValid) }
 		},
 		{ debounce: 500 },
 	)