@bagelink/vue 1.5.15 → 1.5.20

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

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<PropTypes>(), {
 
 const emit = defineEmits(['update:modelValue'])
 
-const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => typeof src === 'function'
+const isAsyncSource = (src: OptionsSource): src is (q: string) => Promise<Option[]> => 'function' === typeof src
 
 type Primitive = string | number | boolean
 
@@ -48,8 +48,8 @@ let selected = $ref(false)
 let open = $ref(false)
 
 const selectedLabel = $computed((): string => {
-	if (selectedItemCount === 0) return props.placeholder
-	if (selectedItemCount > 4) {
+	if (0 === selectedItemCount) {return props.placeholder}
+	if (4 < selectedItemCount) {
 		const str = selectedItems
 			.slice(0, 4)
 			.map(item => getLabel(item))
@@ -77,30 +77,30 @@ function navigate(direction: 'up' | 'down') {
 		setTimeout(() => { navigate(direction) }, 210)
 		return
 	}
-	if (direction === 'up') {
-		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : results.value.length - 1
-	} else if (direction === 'down') {
+	if ('up' === direction) {
+		highlightedIndex = 0 < highlightedIndex ? highlightedIndex - 1 : results.value.length - 1
+	} else if ('down' === direction) {
 		highlightedIndex = highlightedIndex < results.value.length - 1 ? highlightedIndex + 1 : 0
 	}
 	setTimeout(() => {
 		const el = selectOptions?.children[highlightedIndex] as HTMLElement
-		if (el) el.focus()
-		else highlightedIndex = -1
+		if (el) {el.focus()}
+		else {highlightedIndex = -1}
 	}, 10)
 }
 
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
 function scrollToSelectedItem() {
-	if (!selectOptions || selectedItemCount === 0) return
+	if (!selectOptions || 0 === selectedItemCount) {return}
 
 	// Find the first selected item in the results
 	const selectedIndex = results.value.findIndex(option => isSelected(option))
-	if (selectedIndex === -1) return
+	if (-1 === selectedIndex) {return}
 
 	// Get the selected option element
 	const selectedElement = selectOptions.children[selectedIndex] as HTMLElement
-	if (!selectedElement) return
+	if (!selectedElement) {return}
 
 	// Scroll the selected item into view
 	selectedElement.scrollIntoView({
@@ -110,22 +110,22 @@ function scrollToSelectedItem() {
 }
 
 function getLabel(option: Option) {
-	if (option == null) return ''
-	if (typeof option === 'object') return option.label ?? String((option as any).value ?? '')
-	if (typeof option === 'boolean') return option ? 'Yes' : 'No'
+	if (null == option) {return ''}
+	if ('object' === typeof option) {return option.label ?? String((option as any).value ?? '')}
+	if ('boolean' === typeof option) {return option ? 'Yes' : 'No'}
 	return String(option)
 }
 
 function getValue(option?: Option): Primitive | undefined {
-	if (option == null) return
-	if (typeof option === 'object') return option.value as Primitive
+	if (null == option) {return}
+	if ('object' === typeof option) {return option.value as Primitive}
 	return option as Primitive
 }
 
 function focusInput() {
 	open = true
 	setTimeout(() => {
-		if (searchInput) searchInput.focus()
+		if (searchInput) {searchInput.focus()}
 	}, 10)
 }
 
@@ -134,7 +134,7 @@ function select(option: Option) {
 	const existingIndex = selectedItems.findIndex(
 		item => getValue(item) === getValue(option),
 	)
-	if (existingIndex > -1) {
+	if (-1 < existingIndex) {
 		selectedItems.splice(existingIndex, 1)
 	}
 	else if (props.multiselect) {
@@ -148,7 +148,7 @@ function select(option: Option) {
 
 	// 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 (active && selectOptions?.contains(active)) {active.blur()}
 
 	if (!props.multiselect) {
 		open = false
@@ -169,7 +169,7 @@ function emitUpdate() {
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	if (arr1.length !== arr2.length) return false
+	if (arr1.length !== arr2.length) {return false}
 	const s1 = arr1.map(getValue).filter(Boolean).map(String).sort()
 	const s2 = arr2.map(getValue).filter(Boolean).map(String).sort()
 	return s1.every((v, i) => v === s2[i])
@@ -182,7 +182,7 @@ watch(
 			const newOption = Array.isArray(props.options)
 				? (props.options.find(o => getValue(o) === newVal) ?? newVal)
 				: newVal
-			if (newOption && !isSelected(newOption)) selectedItems = [newOption]
+			if (newOption && !isSelected(newOption)) {selectedItems = [newOption]}
 		} else {
 			const newData = [newVal].flat()
 			const isSame = compareArrays(newData, selectedItems)
@@ -206,13 +206,13 @@ watch(
 	() => props.options,
 	() => {
 		const opts = props.options
-		if (!Array.isArray(opts)) return
+		if (!Array.isArray(opts)) {return}
 		selectedItems.forEach((option, i) => {
 			const exists = opts.find(
 				(o: Option) => getValue(o) === getValue(option),
 			)
-			if (exists === undefined) selectedItems.splice(i, 1)
-			else selectedItems.splice(i, 1, exists)
+			if (exists === undefined) {selectedItems.splice(i, 1)}
+			else {selectedItems.splice(i, 1, exists)}
 		})
 		// const original = JSON.stringify(props.options.map(getValue));
 		// const newSelection = JSON.stringify(selectedItems.map(getValue));
@@ -221,6 +221,28 @@ watch(
 	{ deep: true, immediate: true },
 )
 
+// Watch for async results to update selected items with full option objects
+watch(
+	() => results.value,
+	(newResults) => {
+		if (isAsyncSource(props.options) && 0 < newResults.length) {
+			selectedItems.forEach((option, i) => {
+				const optionValue = getValue(option)
+				// If the selected item is just a primitive value (no label), find the full option
+				if ('object' !== typeof option || !option.label) {
+					const fullOption = newResults.find(
+						(o: Option) => getValue(o) === optionValue,
+					)
+					if (fullOption) {
+						selectedItems.splice(i, 1, fullOption)
+					}
+				}
+			})
+		}
+	},
+	{ deep: true },
+)
+
 onMounted(() => {
 	const opts = props.options
 	if (props.defaultValue !== undefined && Array.isArray(opts)) {
@@ -228,7 +250,7 @@ onMounted(() => {
 			(o: Option) => getValue(o) === getValue(props.defaultValue),
 		)
 
-		if (defaultOption === undefined) return
+		if (defaultOption === undefined) {return}
 
 		selectedItems = [defaultOption]
 	}
@@ -290,7 +312,9 @@ onMounted(() => {
 						{{ getLabel(option) }}
 					</span>
 				</div>
-				<p v-if="results.length === 0" class="selectinput-option opacity-3 pointer-events-none">No options found</p>
+				<p v-if="results.length === 0" class="selectinput-option opacity-3 pointer-events-none">
+					No options found
+				</p>
 			</div>
 			<slot name="last" />
 		</Card>

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

@@ -57,16 +57,16 @@ function save(format?: FormatType) {
 
 function saveFile() {
 	const data = save()
-	if (!data) return
+	if (!data) {return}
 
-	if (props.format === 'image/svg+xml') {
+	if ('image/svg+xml' === props.format) {
 		// For SVG, create file directly from the SVG string
 		fileData.value = new File([data], 'signature.svg', { type: 'image/svg+xml' })
 	} else {
 		try {
 			// For PNG/JPG, convert base64 to blob first
 			const base64Data = data.split(',')[1]
-			if (!base64Data) throw new Error('Invalid data URL format')
+			if (!base64Data) {throw new Error('Invalid data URL format')}
 
 			const byteCharacters = atob(base64Data)
 			// Create byte array directly with mapping function
@@ -114,13 +114,13 @@ const signatureOptions = $computed(() => ({ ...defaultOptions, ...props.sigOptio
 watch(
 	() => props.disabled,
 	(val) => {
-		if (val) sig?.off()
-		else sig?.on()
+		if (val) {sig?.off()}
+		else {sig?.on()}
 	},
 )
 
 function addWaterMark(data: WaterMark) {
-	if (!(Object.prototype.toString.call(data) === '[object Object]')) {
+	if (!('[object Object]' === Object.prototype.toString.call(data))) {
 		throw new Error(`Expected Object, got ${typeof data}.`)
 	} else {
 		const textData = {
@@ -132,14 +132,14 @@ function addWaterMark(data: WaterMark) {
 		}
 
 		const ctx = vCanvas?.getContext('2d')
-		if (!ctx) return
+		if (!ctx) {return}
 		ctx.font = data.font || '20px sans-serif'
 		ctx.fillStyle = data.fillStyle || '#333'
 		ctx.strokeStyle = data.strokeStyle || '#333'
-		if (data.style === 'all') {
+		if ('all' === data.style) {
 			ctx.fillText(textData.text, textData.x, textData.y)
 			ctx.strokeText(textData.text, textData.sx, textData.sy)
-		} else if (data.style === 'stroke') {
+		} else if ('stroke' === data.style) {
 			ctx.strokeText(textData.text, textData.sx, textData.sy)
 		} else {
 			ctx.fillText(textData.text, textData.x, textData.y)
@@ -155,7 +155,7 @@ function onEndStroke() {
 }
 
 function loadFile(file: File | undefined) {
-	if (!file) return
+	if (!file) {return}
 	const reader = new FileReader()
 	return new Promise((resolve) => {
 		reader.onload = (e) => {
@@ -175,21 +175,21 @@ watch(fileData, (newFile) => {
 
 function resizeCanvas() {
 	let url
-	if (!isEmpty()) url = save()
+	if (!isEmpty()) {url = save()}
 	const ratio = props.ratio ?? 1 / 2
 	const { width } = vCanvas!.getBoundingClientRect()
 	vCanvas!.width = props.width ? Number(props.width.replaceAll('px', '')) : width
 	vCanvas!.height = props.height ? Number(props.height.replaceAll('px', '')) : width * ratio
 	clear()
-	if (!props.clearOnResize && url !== undefined) void fromDataURL(url)
-	if (props.waterMark) addWaterMark(props.waterMark)
+	if (!props.clearOnResize && url !== undefined) {void fromDataURL(url)}
+	if (props.waterMark) {addWaterMark(props.waterMark)}
 }
 
 function draw() {
 	sig = new SignaturePad(vCanvas!, signatureOptions)
 	resizeCanvas()
-	if (props.disabled) sig.off()
-	else sig.on()
+	if (props.disabled) {sig.off()}
+	else {sig.on()}
 	_isEmpty = sig.isEmpty()
 
 	// Load initial file if provided

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

@@ -40,7 +40,7 @@ function addRow() {
 	} as { [key: string]: any }
 	entityMeta?.fields.forEach((field: any) => {
 		if (field.default) {
-			if (field.fieldtype === 'Check') {
+			if ('Check' === field.fieldtype) {
 				entry[field.fieldname] = Number.parseInt(field.default)
 			} else {
 				entry[field.fieldname] = field.default

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

@@ -93,7 +93,7 @@ function getCountryCode(): CountryCode | undefined {
 
 // Parse and format the phone number
 function parseAndFormatPhoneNumber(value: string): string {
-	if (!value) return value
+	if (!value) {return value}
 
 	try {
 		const parsedNumber = parsePhoneNumberFromString(value, getCountryCode())
@@ -108,7 +108,7 @@ function parseAndFormatPhoneNumber(value: string): string {
 
 // Validate the phone number and set custom validity
 function validatePhoneNumber() {
-	if (!inputRef.value) return
+	if (!inputRef.value) {return}
 
 	try {
 		const parsedNumber = parsePhoneNumberFromString(phoneNumber, getCountryCode())
@@ -126,10 +126,10 @@ function validatePhoneNumber() {
 }
 
 function detectCountryFromNumber(value: string): boolean {
-	if (!value.startsWith('+')) return false
+	if (!value.startsWith('+')) {return false}
 
 	const digits = value.replace(/\D/g, '')
-	if (digits.length <= 1) return false
+	if (1 >= digits.length) {return false}
 
 	for (const country of countries) {
 		if (digits.startsWith(country.dialCode) && country !== activeCountry) {
@@ -187,8 +187,8 @@ function handleBlur(event: Event) {
 	emit('blur', event)
 }
 
-const disableDropdown = $computed(() => countries.length === 1 && !search)
-const searchable = $computed(() => countries.length > 7 || search)
+const disableDropdown = $computed(() => 1 === countries.length && !search)
+const searchable = $computed(() => 7 < countries.length || search)
 
 function focusSearchInput() {
 	setTimeout(() => searchInput?.focus(), 100)

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

@@ -58,8 +58,8 @@ useValidateFieldValue(
 const inputRows = $computed(() => {
 	let rows = Number(props.rows) || 1
 	if (props.autoheight)
-		rows = Math.max(rows, String(inputVal).split('\n').length)
-	if (props.multiline || props.code) rows = Math.max(rows, 4)
+		{rows = Math.max(rows, String(inputVal).split('\n').length)}
+	if (props.multiline || props.code) {rows = Math.max(rows, 4)}
 	return rows
 })
 
@@ -68,7 +68,7 @@ const debouncedEmit = useDebounceFn(() => {
 }, 700)
 
 function autoResizeTextarea() {
-	if (!props.autoheight || !input || input.tagName !== 'TEXTAREA') return
+	if (!props.autoheight || !input || 'TEXTAREA' !== input.tagName) {return}
 
 	const textarea = input as HTMLTextAreaElement
 	textarea.style.height = 'auto'
@@ -76,7 +76,7 @@ function autoResizeTextarea() {
 }
 
 function updateInputVal() {
-	if (props.disabled) return
+	if (props.disabled) {return}
 	emit('update:modelValue', inputVal as string)
 	debouncedEmit()
 
@@ -108,7 +108,7 @@ onMounted(async () => {
 		await sleep(400)
 		input?.focus()
 	}
-	if (props.defaultValue && !props.modelValue) inputVal = props.defaultValue
+	// Don't auto-restore defaultValue - let user control their own content
 
 	if (props.autoheight) {
 		await nextTick()

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

@@ -15,7 +15,8 @@ const inputId = $ref(props.id || Math.random().toString(36).slice(7))
 const checked = defineModel<boolean | undefined>('modelValue', { default: undefined })
 
 onMounted(() => {
-	if (checked.value === undefined) checked.value = props.defaultValue
+	// Don't auto-restore defaultValue - let user control their own content
+	// if (checked.value === undefined) checked.value = props.defaultValue
 })
 </script>