@bagelink/vue 1.4.124 → 1.4.128

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.124",
+  "version": "1.4.128",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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

@@ -36,6 +36,7 @@ interface PropTypes {
 }
 
 const searchInput = $ref<HTMLElement | undefined>()
+const triggerBtn = $ref<HTMLButtonElement | undefined>()
 
 let selectedItems = $ref<Option[]>([])
 
@@ -145,7 +146,15 @@ function select(option: Option) {
 		selectedItems.splice(0, selectedItemCount, option)
 	}
 
-	if (!props.multiselect) open = false
+	// Move focus away from popper content before it gets aria-hidden
+	const active = document.activeElement as HTMLElement | null
+	if (active && selectOptions?.contains(active)) active.blur()
+
+	if (!props.multiselect) {
+		open = false
+		// After closing, return focus to the trigger for accessibility
+		setTimeout(() => { triggerBtn?.focus() }, 0)
+	}
 	emitUpdate()
 }
 
@@ -241,7 +250,7 @@ onMounted(() => {
 						@keydown.down.prevent="navigate('down')" @keydown.up.prevent="navigate('up')"
 					/>
 					<button
-						v-else :disabled="disabled" type="button" class="selectinput-btn"
+						v-else ref="triggerBtn" :disabled="disabled" type="button" class="selectinput-btn"
 						:class="{ isEmpty: selectedItemCount === 0 }" @keydown.down.prevent="navigate('down')"
 						@keydown.up.prevent="navigate('up')"
 					>

package/src/composables/useSchemaField.ts

@@ -235,11 +235,20 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 					props.options = (query: string) => {
 						const row = getFormData?.()
 						const val = currentValue
+						// If author expects (query) only, call directly
+						if (typeof fn === 'function' && fn.length === 1) {
+							return fn(query)
+						}
+						// If author expects (query, val, row), pass it directly
+						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 (typeof out === 'function') return out(query)
 						if (out && typeof out.then === 'function') return out
-						return fn(query, val, row)
+						return []
 					}
 				} else {
 					// Non-search components (e.g., RadioGroup): return a zero-arg async loader using latest row

package/src/directives/pattern.ts

@@ -20,6 +20,7 @@ const DEFAULT_PATTERNS: Record<string, PatternValue> = {
 	lower: { pattern: /[a-z]/i, transform: (v: string) => v.toLowerCase() },
 	upper: { pattern: /[A-Z]/i, transform: (v: string) => v.toUpperCase() },
 	slug: { pattern: /[a-z0-9-]/i, transform: (v: string) => v.toLowerCase().replace(/\s/g, '-') },
+	snake: { pattern: /[a-z_]/, transform: (v: string) => v.toLowerCase().replace(/\s/g, '_') },
 }
 
 interface PatternState {
@@ -27,7 +28,11 @@ interface PatternState {
 	pattern?: RegExp
 	modifier?: string
 	keydownEvent?: EventListenerOrEventListenerObject
-	pasteEvent?: EventListenerOrEventListenerObject
+	inputEvent?: EventListenerOrEventListenerObject
+	compositionStartEvent?: EventListenerOrEventListenerObject
+	compositionEndEvent?: EventListenerOrEventListenerObject
+	composing?: boolean
+	reformatting?: boolean
 }
 
 const stateMap = new WeakMap<HTMLElement, PatternState>()
@@ -41,85 +46,155 @@ function getTarget(el: HTMLElement): HTMLInputElement | HTMLTextAreaElement | nu
 }
 
 function getModifiers(binding: DirectiveBinding): string {
-	const modifiers = Object.keys(binding.modifiers || {})
-	return modifiers.length ? modifiers[modifiers.length - 1] : ''
+	const modifiers = Object.keys(binding.modifiers)
+	return modifiers.length > 0 ? modifiers[modifiers.length - 1] : ''
 }
 
 function getRegex(state: PatternState): RegExp {
-	if (state.pattern) return state.pattern
-	if (state.modifier) return DEFAULT_PATTERNS[state.modifier].pattern || /./
+	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 ?? /./
+	}
 	return /./
 }
 
 function bindEvents(el: HTMLElement, target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	state.keydownEvent = ((event: KeyboardEvent) => { onKeydown(event, target, state) }) as EventListener
-	state.pasteEvent = ((event: ClipboardEvent) => { onPaste(event, target, state) }) as EventListener
+	state.keydownEvent = ((event: KeyboardEvent) => {
+		onKeydown(event, target, state)
+	}) as EventListener
+	state.inputEvent = ((event: InputEvent) => {
+		onInput(event, target, state)
+	}) as EventListener
+	state.compositionStartEvent = (() => {
+		onCompositionStart(state)
+	}) as EventListener
+	state.compositionEndEvent = ((event: CompositionEvent) => {
+		onCompositionEnd(event, target, state)
+	}) as EventListener
 
 	target.addEventListener('keydown', state.keydownEvent)
-	target.addEventListener('paste', state.pasteEvent)
+	target.addEventListener('input', state.inputEvent, { capture: true })
+	target.addEventListener('compositionstart', state.compositionStartEvent)
+	target.addEventListener('compositionend', state.compositionEndEvent)
 }
 
 function unbindEvents(target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
 	if (state.keydownEvent) target.removeEventListener('keydown', state.keydownEvent)
-	if (state.pasteEvent) target.removeEventListener('paste', state.pasteEvent)
+	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.pasteEvent = undefined
+	state.inputEvent = undefined
+	state.compositionStartEvent = undefined
+	state.compositionEndEvent = undefined
+}
+
+function isNavigationOrControlKey(event: KeyboardEvent): boolean {
+	const allowedKeys = [
+		'Tab',
+		'Backspace',
+		'Delete',
+		'ArrowLeft',
+		'ArrowRight',
+		'ArrowUp',
+		'ArrowDown',
+		'Enter',
+	]
+	if (event.ctrlKey || event.altKey || event.metaKey) return true
+	return allowedKeys.includes(event.key)
 }
 
 function onKeydown(event: KeyboardEvent, target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	if (event.ctrlKey || event.altKey || event.metaKey || event.key === 'Tab' || event.key === 'Backspace' || event.key === 'Delete' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Enter') 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 (state.modifier != null && state.modifier !== '') {
+		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
+		if (typeof transformFn === 'function') return
+	}
 
 	const regex = getRegex(state)
 	const testKey = event.key
 
 	if (!regex.test(testKey)) {
 		event.preventDefault()
-	} else if (state.modifier) {
-		const { transform } = DEFAULT_PATTERNS[state.modifier]
-		if (transform) {
-			console.log('transform', transform)
-			event.preventDefault()
-			const transformedValue = transform(testKey)
-			const cursorPos = target.selectionStart ?? 0
-			const newValue = target.value.slice(0, cursorPos) + transformedValue + target.value.slice(cursorPos)
-			target.value = newValue
-			target.setSelectionRange(cursorPos + transformedValue.length, cursorPos + transformedValue.length)
-		}
 	}
 }
 
-function onPaste(event: ClipboardEvent, target: HTMLInputElement | HTMLTextAreaElement, state: PatternState) {
-	const regex = getRegex(state)
-	const clipboardData = event.clipboardData?.getData('text') || ''
+function onCompositionStart(state: PatternState) {
+	state.composing = true
+}
 
-	if (!regex.test(clipboardData)) {
-		event.preventDefault()
-	} else if (state.modifier) {
-		const { transform } = DEFAULT_PATTERNS[state.modifier]
-		if (transform) {
-			event.preventDefault()
-			const transformedValue = transform(clipboardData)
-			const cursorPos = target.selectionStart ?? 0
-			const newValue = target.value.slice(0, cursorPos) + transformedValue + target.value.slice(cursorPos)
-			target.value = newValue
-			target.setSelectionRange(cursorPos + transformedValue.length, cursorPos + transformedValue.length)
-		}
+function onCompositionEnd(
+	event: CompositionEvent,
+	target: HTMLInputElement | HTMLTextAreaElement,
+	state: PatternState,
+) {
+	state.composing = false
+	// Normalize after IME commits text
+	onInput(event as unknown as InputEvent, target, state)
+}
+
+function sanitizeTransformed(value: string, state: PatternState): string {
+	const regex = getRegex(state)
+	let transformed: string
+	if (state.modifier != null && state.modifier !== '') {
+		const transformFn = (DEFAULT_PATTERNS as Record<string, PatternValue | undefined>)[state.modifier]?.transform
+		transformed = transformFn ? transformFn(value) : value
+	} else {
+		transformed = value
+	}
+	let result = ''
+	for (let i = 0; i < transformed.length; i++) {
+		const ch = transformed[i]
+		if (regex.test(ch)) result += ch
 	}
+	return result
+}
+
+function onInput(
+	event: InputEvent,
+	target: HTMLInputElement | HTMLTextAreaElement,
+	state: PatternState,
+) {
+	if (state.reformatting === true) return
+	if (state.composing === true) return
+
+	const originalValue = target.value
+	const selectionEnd = target.selectionEnd ?? originalValue.length
+
+	const left = originalValue.slice(0, selectionEnd)
+
+	const sanitizedFull = sanitizeTransformed(originalValue, state)
+	if (sanitizedFull === originalValue) return
+
+	const leftSanitized = sanitizeTransformed(left, state)
+	const newCursor = leftSanitized.length
+
+	state.reformatting = true
+	target.value = sanitizedFull
+	target.setSelectionRange(newCursor, newCursor)
+	state.reformatting = false
 }
 
+// Paste is handled naturally via the input event normalization
+
 const pattern = {
 	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (!target) return
+		if (target === null) return
 
 		const state: PatternState = {
 			modifier: getModifiers(binding),
 		}
 
-		if (typeof binding.value === 'object') {
-			state.pattern = binding.value.pattern || /./
-			state.validateOnly = binding.value.validateOnly || false
+		if (typeof binding.value === 'object' && binding.value !== null) {
+			state.pattern = binding.value.pattern ?? /./
+			state.validateOnly = binding.value.validateOnly === true
 		}
 
 		stateMap.set(el, state)
@@ -127,18 +202,18 @@ const pattern = {
 	},
 	updated(el: HTMLElement, binding: DirectiveBinding) {
 		const target = getTarget(el)
-		if (!target) return
+		if (target === null) return
 
 		const state = stateMap.get(el)
-		if (!state) return
+		if (state === undefined) return
 
 		unbindEvents(target, state)
 
 		state.modifier = getModifiers(binding)
 
-		if (typeof binding.value === 'object') {
-			state.pattern = binding.value.pattern || /./
-			state.validateOnly = binding.value.validateOnly || false
+		if (typeof binding.value === 'object' && binding.value !== null) {
+			state.pattern = binding.value.pattern ?? /./
+			state.validateOnly = binding.value.validateOnly === true
 		}
 
 		bindEvents(el, target, state)
@@ -147,7 +222,7 @@ const pattern = {
 		const target = getTarget(el)
 		const state = stateMap.get(el)
 
-		if (target && state) {
+		if (target !== null && state !== undefined) {
 			unbindEvents(target, state)
 		}