@bagelink/vue 1.6.43 → 1.6.49

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 },
 	)

package/src/directives/pattern.ts

@@ -47,12 +47,12 @@ function getTarget(el: HTMLElement): HTMLInputElement | HTMLTextAreaElement | nu
 
 function getModifiers(binding: DirectiveBinding): string {
 	const modifiers = Object.keys(binding.modifiers)
-	return 0 < modifiers.length ? modifiers[modifiers.length - 1] : ''
+	return modifiers.length > 0 ? modifiers[modifiers.length - 1] : ''
 }
 
 function getRegex(state: PatternState): RegExp {
-	if (null != state.pattern) {return state.pattern}
-	if (null != state.modifier && '' !== state.modifier) {
+	if (state.pattern != null) { return state.pattern }
+	if (state.modifier != null && state.modifier !== '') {
 		const presetPattern = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.pattern
 		return presetPattern ?? /./
 	}
@@ -80,10 +80,10 @@ function bindEvents(el: HTMLElement, target: HTMLInputElement | HTMLTextAreaElem
 }
 
 function unbindEvents(target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	if (state.keydownEvent) {target.removeEventListener('keydown', state.keydownEvent)}
-	if (state.inputEvent) {target.removeEventListener('input', state.inputEvent, { capture: true })}
-	if (state.compositionStartEvent) {target.removeEventListener('compositionstart', state.compositionStartEvent)}
-	if (state.compositionEndEvent) {target.removeEventListener('compositionend', state.compositionEndEvent)}
+	if (state.keydownEvent) { target.removeEventListener('keydown', state.keydownEvent) }
+	if (state.inputEvent) { target.removeEventListener('input', state.inputEvent, { capture: true }) }
+	if (state.compositionStartEvent) { target.removeEventListener('compositionstart', state.compositionStartEvent) }
+	if (state.compositionEndEvent) { target.removeEventListener('compositionend', state.compositionEndEvent) }
 
 	state.keydownEvent = undefined
 	state.inputEvent = undefined
@@ -102,19 +102,19 @@ function isNavigationOrControlKey(event: KeyboardEvent): boolean {
 		'ArrowDown',
 		'Enter',
 	]
-	if (event.ctrlKey || event.altKey || event.metaKey) {return true}
+	if (event.ctrlKey || event.altKey || event.metaKey) { return true }
 	return allowedKeys.includes(event.key)
 }
 
 function onKeydown(event: KeyboardEvent, target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	if (true === state.composing) {return}
-	if (isNavigationOrControlKey(event)) {return}
+	if (state.composing === true) { return }
+	if (isNavigationOrControlKey(event)) { return }
 
 	// If a transform is configured (e.g., slug/snake/lower/upper),
 	// do not block keystrokes; normalization happens on input.
-	if (null != state.modifier && '' !== state.modifier) {
+	if (state.modifier != null && state.modifier !== '') {
 		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
-		if ('function' === typeof transformFn) {return}
+		if (typeof transformFn === 'function') { return }
 	}
 
 	const regex = getRegex(state)
@@ -142,7 +142,7 @@ function onCompositionEnd(
 function sanitizeTransformed(value: string, state: PatternState): string {
 	const regex = getRegex(state)
 	let transformed: string
-	if (null != state.modifier && '' !== state.modifier) {
+	if (state.modifier != null && state.modifier !== '') {
 		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
 		transformed = transformFn ? transformFn(value) : value
 	} else {
@@ -151,7 +151,7 @@ function sanitizeTransformed(value: string, state: PatternState): string {
 	let result = ''
 	for (let i = 0; i < transformed.length; i++) {
 		const ch = transformed[i]
-		if (regex.test(ch)) {result += ch}
+		if (regex.test(ch)) { result += ch }
 	}
 	return result
 }
@@ -161,8 +161,8 @@ function onInput(
 	target: HTMLInputElement | HTMLTextAreaElement,
 	state: PatternState,
 ) {
-	if (true === state.reformatting) {return}
-	if (true === state.composing) {return}
+	if (state.reformatting === true) { return }
+	if (state.composing === true) { return }
 
 	const originalValue = target.value
 	const selectionEnd = target.selectionEnd ?? originalValue.length
@@ -170,7 +170,7 @@ function onInput(
 	const left = originalValue.slice(0, selectionEnd)
 
 	const sanitizedFull = sanitizeTransformed(originalValue, state)
-	if (sanitizedFull === originalValue) {return}
+	if (sanitizedFull === originalValue) { return }
 
 	const leftSanitized = sanitizeTransformed(left, state)
 	const newCursor = leftSanitized.length
@@ -186,15 +186,15 @@ function onInput(
 const pattern = {
 	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (null === target) {return}
+		if (target === null) { return }
 
 		const state: PatternState = {
 			modifier: getModifiers(binding),
 		}
 
-		if ('object' === typeof binding.value && null !== binding.value) {
+		if (typeof binding.value === 'object' && binding.value !== null) {
 			state.pattern = binding.value.pattern ?? /./
-			state.validateOnly = true === binding.value.validateOnly
+			state.validateOnly = binding.value.validateOnly === true
 		}
 
 		stateMap.set(el, state)
@@ -202,18 +202,18 @@ const pattern = {
 	},
 	updated(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (null === target) {return}
+		if (target === null) { return }
 
 		const state = stateMap.get(el)
-		if (state === undefined) {return}
+		if (state === undefined) { return }
 
 		unbindEvents(target, state)
 
 		state.modifier = getModifiers(binding)
 
-		if ('object' === typeof binding.value && null !== binding.value) {
+		if (typeof binding.value === 'object' && binding.value !== null) {
 			state.pattern = binding.value.pattern ?? /./
-			state.validateOnly = true === binding.value.validateOnly
+			state.validateOnly = binding.value.validateOnly === true
 		}
 
 		bindEvents(el, target, state)
@@ -222,7 +222,7 @@ const pattern = {
 		const target = getTarget(el)
 		const state = stateMap.get(el)
 
-		if (null !== target && state !== undefined) {
+		if (target !== null && state !== undefined) {
 			unbindEvents(target, state)
 		}
 

package/src/directives/ripple.ts

@@ -27,8 +27,8 @@ const ripple: Directive<HTMLElement, boolean> = {
 
 		(el as any).__rippleClickHandler = clickHandler
 
-		if (false !== binding.value) {
-			if ('static' === getComputedStyle(el).position) {
+		if (binding.value !== false) {
+			if (getComputedStyle(el).position === 'static') {
 				el.style.position = 'relative'
 			}
 			el.style.overflow = 'hidden'
@@ -37,10 +37,10 @@ const ripple: Directive<HTMLElement, boolean> = {
 	},
 	updated(el: HTMLElement, binding: DirectiveBinding<boolean>) {
 		const clickHandler = (el as any).__rippleClickHandler
-		if (false === binding.value) {
+		if (binding.value === false) {
 			el.removeEventListener('mousedown', clickHandler)
 		} else {
-			if ('static' === getComputedStyle(el).position) {
+			if (getComputedStyle(el).position === 'static') {
 				el.style.position = 'relative'
 			}
 			el.style.overflow = 'hidden'