@bagelink/vue 1.6.47 → 1.6.51

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

@@ -2,7 +2,7 @@
 import type { IconType, Option } from '@bagelink/vue'
 import type { AlignedPlacement } from '../../Dropdown.vue'
 import { Btn, Card, Skeleton, Dropdown, Icon, TextInput, useSearch } from '@bagelink/vue'
-import { onMounted, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import 'floating-vue/style.css'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
@@ -35,71 +35,71 @@ interface PropTypes {
 	searchPlaceholder?: string
 }
 
-const searchInput = $ref<HTMLElement | undefined>()
-const triggerBtn = $ref<HTMLButtonElement | undefined>()
+const searchInput = ref<HTMLElement | undefined>()
+const triggerBtn = ref<HTMLButtonElement | undefined>()
 
-let selectedItems = $ref<Option[]>([])
+const selectedItems = ref<Option[]>([])
 
-const selectedItemCount = $computed(() => selectedItems.length ?? 0)
-const searchTerm = $ref<string>('')
+const selectedItemCount = computed(() => selectedItems.value.length ?? 0)
+const searchTerm = ref<string>('')
 
-const dropdown = $ref<InstanceType<typeof Dropdown> | undefined>()
-let selected = $ref(false)
-let open = $ref(false)
+const dropdown = ref<InstanceType<typeof Dropdown> | undefined>()
+const selected = ref(false)
+const open = ref(false)
 
-const selectedLabel = $computed((): string => {
-	if (selectedItemCount === 0) { return props.placeholder }
-	if (selectedItemCount > 4) {
-		const str = selectedItems
+const selectedLabel = computed((): string => {
+	if (selectedItemCount.value === 0) { return props.placeholder }
+	if (selectedItemCount.value > 4) {
+		const str = selectedItems.value
 			.slice(0, 4)
 			.map(item => getLabel(item))
 			.join(', ')
-		return `${str}... +${selectedItemCount - 4}`
+		return `${str}... +${selectedItemCount.value - 4}`
 	}
-	return selectedItems.map(item => getLabel(item)).join(', ')
+	return selectedItems.value.map(item => getLabel(item)).join(', ')
 })
-const searchPlaceholder = $computed(() => props.searchPlaceholder ?? selectedLabel ?? 'Search')
+const searchPlaceholder = computed(() => props.searchPlaceholder ?? selectedLabel.value ?? 'Search')
 
 const { results, isLoading } = useSearch<Option>({
-	searchTerm: () => searchTerm,
+	searchTerm: () => searchTerm.value,
 	serverSearch: isAsyncSource(props.options) ? props.options : undefined,
 	items: () => (Array.isArray(props.options) ? props.options : []),
 	minChars: isAsyncSource(props.options) ? 0 : 2,
 })
 
-let highlightedIndex = $ref(-1)
+const highlightedIndex = ref(-1)
 
-const selectOptions = $ref<HTMLElement | undefined>()
+const selectOptions = ref<HTMLElement | undefined>()
 
 function navigate(direction: 'up' | 'down') {
-	if (!open) {
-		open = true
+	if (!open.value) {
+		open.value = true
 		setTimeout(() => { navigate(direction) }, 210)
 		return
 	}
 	if (direction === 'up') {
-		highlightedIndex = highlightedIndex > 0 ? highlightedIndex - 1 : results.value.length - 1
+		highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : results.value.length - 1
 	} else if (direction === 'down') {
-		highlightedIndex = highlightedIndex < results.value.length - 1 ? highlightedIndex + 1 : 0
+		highlightedIndex.value = highlightedIndex.value < results.value.length - 1 ? highlightedIndex.value + 1 : 0
 	}
 	setTimeout(() => {
-		const el = selectOptions?.children[highlightedIndex] as HTMLElement
+		const el = selectOptions.value?.children[highlightedIndex.value] as HTMLElement
 		if (el) { el.focus() }
-		else { highlightedIndex = -1 }
+		else { highlightedIndex.value = -1 }
 	}, 10)
 }
 
-const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
+const isSelected = (option: Option) => selectedItems.value.find(item => getValue(option) === getValue(item)) !== undefined
 
 function scrollToSelectedItem() {
-	if (!selectOptions || selectedItemCount === 0) { return }
+	if (!selectOptions.value || selectedItemCount.value === 0) { return }
 
 	// Find the first selected item in the results
 	const selectedIndex = results.value.findIndex(option => isSelected(option))
 	if (selectedIndex === -1) { return }
 
 	// Get the selected option element
-	const selectedElement = selectOptions.children[selectedIndex] as HTMLElement
+	const selectedElement = selectOptions.value.children[selectedIndex] as HTMLElement
 	if (!selectedElement) { return }
 
 	// Scroll the selected item into view
@@ -123,47 +123,47 @@ function getValue(option?: Option): Primitive | undefined {
 }
 
 function focusInput() {
-	open = true
+	open.value = true
 	setTimeout(() => {
-		if (searchInput) { searchInput.focus() }
+		if (searchInput.value) { searchInput.value.focus() }
 	}, 10)
 }
 
 function select(option: Option) {
-	selected = true
-	const existingIndex = selectedItems.findIndex(
+	selected.value = true
+	const existingIndex = selectedItems.value.findIndex(
 		item => getValue(item) === getValue(option),
 	)
 	if (existingIndex > -1) {
-		selectedItems.splice(existingIndex, 1)
+		selectedItems.value.splice(existingIndex, 1)
 	}
 	else if (props.multiselect) {
-		const current = [...selectedItems]
+		const current = [...selectedItems.value]
 		current.push(option)
 
-		selectedItems = current
+		selectedItems.value = current
 	} else {
-		selectedItems.splice(0, selectedItemCount, option)
+		selectedItems.value.splice(0, selectedItemCount.value, 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.value?.contains(active)) { active.blur() }
 
 	if (!props.multiselect) {
-		open = false
+		open.value = false
 		// After closing, return focus to the trigger for accessibility
-		setTimeout(() => { triggerBtn?.focus() }, 0)
+		setTimeout(() => { triggerBtn.value?.focus() }, 0)
 	}
 	emitUpdate()
 }
 
 function emitUpdate() {
 	if (props.multiselect) {
-		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean))
+		emit('update:modelValue', selectedItems.value.map(getValue).filter(Boolean))
 	} else {
-		// selectedItems.splice(1, selectedItemCount - 1);
-		const [item] = selectedItems
+		// selectedItems.value.splice(1, selectedItemCount.value - 1);
+		const [item] = selectedItems.value
 		emit('update:modelValue', getValue(item))
 	}
 }
@@ -182,21 +182,21 @@ 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.value = [newOption] }
 		} else {
 			const newData = [newVal].flat()
-			const isSame = compareArrays(newData, selectedItems)
+			const isSame = compareArrays(newData, selectedItems.value)
 			if (!isSame) {
-				selectedItems.splice(0, selectedItemCount, ...newData)
+				selectedItems.value.splice(0, selectedItemCount.value, ...newData)
 			}
 		}
 	},
 	{ immediate: true },
 )
 
-watch(() => open, (value) => {
+watch(() => open.value, (value) => {
 	if (value) {
-		highlightedIndex = -1
+		highlightedIndex.value = -1
 		// Scroll to selected item when dropdown opens
 		setTimeout(() => { scrollToSelectedItem() }, 10)
 	}
@@ -207,15 +207,15 @@ watch(
 	() => {
 		const opts = props.options
 		if (!Array.isArray(opts)) { return }
-		selectedItems.forEach((option, i) => {
+		selectedItems.value.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.value.splice(i, 1) }
+			else { selectedItems.value.splice(i, 1, exists) }
 		})
 		// const original = JSON.stringify(props.options.map(getValue));
-		// const newSelection = JSON.stringify(selectedItems.map(getValue));
+		// const newSelection = JSON.stringify(selectedItems.value.map(getValue));
 		// if (original !== newSelection) emitUpdate();
 	},
 	{ deep: true, immediate: true },
@@ -226,7 +226,7 @@ watch(
 	() => results.value,
 	(newResults) => {
 		if (isAsyncSource(props.options) && newResults.length > 0) {
-			selectedItems.forEach((option, i) => {
+			selectedItems.value.forEach((option, i) => {
 				const optionValue = getValue(option)
 				// If the selected item is just a primitive value (no label), find the full option
 				if (typeof option !== 'object' || !option.label) {
@@ -234,7 +234,7 @@ watch(
 						(o: Option) => getValue(o) === optionValue,
 					)
 					if (fullOption) {
-						selectedItems.splice(i, 1, fullOption)
+						selectedItems.value.splice(i, 1, fullOption)
 					}
 				}
 			})
@@ -252,7 +252,7 @@ onMounted(() => {
 
 		if (defaultOption === undefined) { return }
 
-		selectedItems = [defaultOption]
+		selectedItems.value = [defaultOption]
 	}
 })
 </script>

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

@@ -3,7 +3,7 @@ import type { Options as SignaturePadOptions } from 'signature_pad'
 import { Btn } from '@bagelink/vue'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import SignaturePad from 'signature_pad'
-import { onMounted, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 export interface WaterMark {
 	text: string
@@ -38,35 +38,35 @@ const props = withDefaults(defineProps<{
 const sigData = defineModel()
 const fileData = defineModel<File>('file')
 
-const vCanvas = $ref<HTMLCanvasElement>()
+const vCanvas = ref<HTMLCanvasElement>()
 
-let sig = $ref<SignaturePad>()
+const sig = ref<SignaturePad>()
 
-let _isEmpty = $ref<boolean>(true)
+const _isEmpty = ref<boolean>(true)
 
 function clear() {
-	sig?.clear()
-	_isEmpty = true
+	sig.value?.clear()
+	_isEmpty.value = true
 	sigData.value = undefined
 }
 
 function save(format?: FormatType) {
 	format = format || props.format
-	return format ? sig?.toDataURL(format) : sig?.toDataURL()
+	return format ? sig.value?.toDataURL(format) : sig.value?.toDataURL()
 }
 
 function saveFile() {
 	const data = save()
-	if (!data) {return}
+	if (!data) { return }
 
-	if ('image/svg+xml' === props.format) {
+	if (props.format === 'image/svg+xml') {
 		// 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
@@ -86,41 +86,41 @@ function saveFile() {
 }
 
 function fromDataURL(url: string) {
-	return sig?.fromDataURL(url, {
-		height: vCanvas?.height,
-		width: vCanvas?.width,
+	return sig.value?.fromDataURL(url, {
+		height: vCanvas.value?.height,
+		width: vCanvas.value?.width,
 		ratio: props.ratio,
 		xOffset: 0,
 		yOffset: 0,
 	})
 }
 
-const isEmpty = () => sig?.isEmpty()
+const isEmpty = () => sig.value?.isEmpty()
 function undo() {
-	const data = sig?.toData()
+	const data = sig.value?.toData()
 	if (data) {
 		data.pop()
-		sig?.fromData(data)
+		sig.value?.fromData(data)
 	}
 }
 
-const defaultOptions = $ref<SignaturePadOptions>({
+const defaultOptions = ref<SignaturePadOptions>({
 	penColor: 'rgb(0, 0, 0)',
 	backgroundColor: 'rgb(255, 255, 255)',
 })
 
-const signatureOptions = $computed(() => ({ ...defaultOptions, ...props.sigOption }))
+const signatureOptions = computed(() => ({ ...defaultOptions.value, ...props.sigOption }))
 
 watch(
 	() => props.disabled,
 	(val) => {
-		if (val) {sig?.off()}
-		else {sig?.on()}
+		if (val) { sig.value?.off() }
+		else { sig.value?.on() }
 	},
 )
 
 function addWaterMark(data: WaterMark) {
-	if (!('[object Object]' === Object.prototype.toString.call(data))) {
+	if (!(Object.prototype.toString.call(data) === '[object Object]')) {
 		throw new Error(`Expected Object, got ${typeof data}.`)
 	} else {
 		const textData = {
@@ -131,15 +131,15 @@ function addWaterMark(data: WaterMark) {
 			sy: data.sy || 40,
 		}
 
-		const ctx = vCanvas?.getContext('2d')
-		if (!ctx) {return}
+		const ctx = vCanvas.value?.getContext('2d')
+		if (!ctx) { return }
 		ctx.font = data.font || '20px sans-serif'
 		ctx.fillStyle = data.fillStyle || '#333'
 		ctx.strokeStyle = data.strokeStyle || '#333'
-		if ('all' === data.style) {
+		if (data.style === 'all') {
 			ctx.fillText(textData.text, textData.x, textData.y)
 			ctx.strokeText(textData.text, textData.sx, textData.sy)
-		} else if ('stroke' === data.style) {
+		} else if (data.style === 'stroke') {
 			ctx.strokeText(textData.text, textData.sx, textData.sy)
 		} else {
 			ctx.fillText(textData.text, textData.x, textData.y)
@@ -148,20 +148,20 @@ function addWaterMark(data: WaterMark) {
 }
 
 function onEndStroke() {
-	_isEmpty = sig?.isEmpty() ?? false
+	_isEmpty.value = sig.value?.isEmpty() ?? false
 	const data = save()
 	sigData.value = data
 	saveFile()
 }
 
 function loadFile(file: File | undefined) {
-	if (!file) {return}
+	if (!file) { return }
 	const reader = new FileReader()
 	return new Promise((resolve) => {
 		reader.onload = (e) => {
 			const dataUrl = String(e.target?.result)
 			void fromDataURL(dataUrl)
-			_isEmpty = false
+			_isEmpty.value = false
 			sigData.value = dataUrl
 			resolve(true)
 		}
@@ -175,22 +175,22 @@ 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
+	const { width } = vCanvas.value!.getBoundingClientRect()
+	vCanvas.value!.width = props.width ? Number(props.width.replaceAll('px', '')) : width
+	vCanvas.value!.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)
+	sig.value = new SignaturePad(vCanvas.value!, signatureOptions.value)
 	resizeCanvas()
-	if (props.disabled) {sig.off()}
-	else {sig.on()}
-	_isEmpty = sig.isEmpty()
+	if (props.disabled) { sig.value.off() }
+	else { sig.value.on() }
+	_isEmpty.value = sig.value.isEmpty()
 
 	// Load initial file if provided
 	if (fileData.value) {
@@ -199,8 +199,8 @@ function draw() {
 }
 
 onMounted(draw)
-useResizeObserver(() => vCanvas, resizeCanvas)
-useEventListener(() => sig, 'endStroke', onEndStroke)
+useResizeObserver(() => vCanvas.value, resizeCanvas)
+useEventListener(() => sig.value, 'endStroke', onEndStroke)
 
 defineExpose({
 	save,

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 ('Check' === field.fieldtype) {
+			if (field.fieldtype === 'Check') {
 				entry[field.fieldname] = Number.parseInt(field.default)
 			} else {
 				entry[field.fieldname] = field.default

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

@@ -3,7 +3,7 @@ import type { Country } from '@bagelink/vue'
 import type { CountryCode } from 'libphonenumber-js'
 import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi } from '@bagelink/vue'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
-import { onMounted, watch, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
 	id?: string
@@ -18,27 +18,27 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'blur', 'focus', 'keydown', 'input', 'paste'])
 
-let phoneNumber = $ref(props.modelValue ?? '')
-let search = $ref('')
-let activeCountry = $ref<Country>()
-const searchInput = $ref<InstanceType<typeof TextInput>>()
-let open = $ref(false)
+const phoneNumber = ref(props.modelValue ?? '')
+const search = ref('')
+const activeCountry = ref<Country>()
+const searchInput = ref<InstanceType<typeof TextInput>>()
+const open = ref(false)
 const inputRef = ref<HTMLInputElement | null>(null)
-let isValid = $ref(true)
+const isValid = ref(true)
 
 // Watch for changes to phoneNumber and emit update events
-watch(() => phoneNumber, (newValue) => {
+watch(() => phoneNumber.value, (newValue) => {
 	emit('update:modelValue', newValue)
 })
 
 // Watch for changes to the modelValue prop
 watch(() => props.modelValue, (newValue) => {
-	if (newValue !== phoneNumber) {
-		phoneNumber = newValue ?? ''
+	if (newValue !== phoneNumber.value) {
+		phoneNumber.value = newValue ?? ''
 	}
 })
 
-const countries = $computed(() => {
+const countries = computed(() => {
 	let filteredCountries = allCountries
 	if (props.excludeCountries && props.excludeCountries.length) {
 		const excludeCountries = props.excludeCountries.map(c => c.toLowerCase())
@@ -48,52 +48,52 @@ const countries = $computed(() => {
 		const onlyCountries = props.onlyCountries.map(c => c.toLowerCase())
 		filteredCountries = filteredCountries.filter(c => onlyCountries.includes(c.iso2.toLowerCase()))
 	}
-	if (search.length) {
-		const lowerCaseSearch = search.toLowerCase()
+	if (search.value.length) {
+		const lowerCaseSearch = search.value.toLowerCase()
 		filteredCountries = filteredCountries.filter(c => c.name.toLowerCase().includes(lowerCaseSearch)
 			|| c.iso2.toLowerCase().includes(lowerCaseSearch)
-			|| c.dialCode.includes(search.replace('+', ''))
+			|| c.dialCode.includes(search.value.replace('+', ''))
 		)
 	}
 	return filteredCountries
 })
 
-const activeCountryCode = $computed(() => activeCountry?.iso2)
+const activeCountryCode = computed(() => activeCountry.value?.iso2)
 
 function selectCountry(country: Country) {
-	activeCountry = country
-	open = false
-	search = ''
+	activeCountry.value = country
+	open.value = false
+	search.value = ''
 
-	if (!phoneNumber) {
-		phoneNumber = `+${activeCountry.dialCode}`
-	} else if (phoneNumber.startsWith('+')) {
+	if (!phoneNumber.value) {
+		phoneNumber.value = `+${activeCountry.value.dialCode}`
+	} else if (phoneNumber.value.startsWith('+')) {
 		// Replace existing country code with the new one
-		const existingCountry = countries.find(c => phoneNumber.startsWith(`+${c.dialCode}`))
+		const existingCountry = countries.value.find(c => phoneNumber.value.startsWith(`+${c.dialCode}`))
 		if (existingCountry && existingCountry !== country) {
 			// Remove the old country code and replace with new one
-			const nationalPart = phoneNumber.substring(`+${existingCountry.dialCode}`.length).trim()
-			phoneNumber = `+${activeCountry.dialCode}${nationalPart ? ` ${nationalPart}` : ''}`
+			const nationalPart = phoneNumber.value.substring(`+${existingCountry.dialCode}`.length).trim()
+			phoneNumber.value = `+${activeCountry.value.dialCode}${nationalPart ? ` ${nationalPart}` : ''}`
 		}
 	} else {
 		// Phone number doesn't start with +, prepend the country code
-		phoneNumber = `+${activeCountry.dialCode} ${phoneNumber.replace(/^0+/, '')}`
+		phoneNumber.value = `+${activeCountry.value.dialCode} ${phoneNumber.value.replace(/^0+/, '')}`
 	}
 }
 
 async function getIp() {
 	const { country_code } = await ipapi()
-	selectCountry(countries.find(c => c.iso2 === country_code) ?? countries[0])
+	selectCountry(countries.value.find(c => c.iso2 === country_code) ?? countries.value[0])
 }
 
 // Get the country code for use with libphonenumber-js
 function getCountryCode(): CountryCode | undefined {
-	return activeCountry?.iso2 ? activeCountry.iso2.toUpperCase() as CountryCode : undefined
+	return activeCountry.value?.iso2 ? activeCountry.value.iso2.toUpperCase() as 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,31 +108,32 @@ 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())
+		const parsedNumber = parsePhoneNumberFromString(phoneNumber.value, getCountryCode())
 		if (parsedNumber && parsedNumber.isValid()) {
 			inputRef.value.setCustomValidity('')
-			isValid = true
+			isValid.value = true
 		} else {
 			inputRef.value.setCustomValidity('Please enter a valid phone number')
-			isValid = false
+			isValid.value = false
 		}
 	} catch (error) {
+		console.error('Error validating phone number:', error)
 		inputRef.value.setCustomValidity('Please enter a valid phone number')
-		isValid = false
+		isValid.value = false
 	}
 }
 
 function detectCountryFromNumber(value: string): boolean {
-	if (!value.startsWith('+')) {return false}
+	if (!value.startsWith('+')) { return false }
 
 	const digits = value.replace(/\D/g, '')
-	if (1 >= digits.length) {return false}
+	if (digits.length <= 1) { return false }
 
-	for (const country of countries) {
-		if (digits.startsWith(country.dialCode) && country !== activeCountry) {
+	for (const country of countries.value) {
+		if (digits.startsWith(country.dialCode) && country !== activeCountry.value) {
 			selectCountry(country)
 			return true
 		}
@@ -141,15 +142,15 @@ function detectCountryFromNumber(value: string): boolean {
 }
 
 async function initializeCountry() {
-	if (phoneNumber) {
-		detectCountryFromNumber(phoneNumber)
+	if (phoneNumber.value) {
+		detectCountryFromNumber(phoneNumber.value)
 	} else {
 		await getIp()
 	}
-	const formatted = parseAndFormatPhoneNumber(phoneNumber)
-	if (formatted !== phoneNumber) {
-		phoneNumber = formatted
-		emit('input', phoneNumber)
+	const formatted = parseAndFormatPhoneNumber(phoneNumber.value)
+	if (formatted !== phoneNumber.value) {
+		phoneNumber.value = formatted
+		emit('input', phoneNumber.value)
 		validatePhoneNumber()
 	}
 	validatePhoneNumber()
@@ -163,35 +164,35 @@ function handlePhoneInput(event: Event) {
 	if (value.startsWith('+')) {
 		const formatted = parseAndFormatPhoneNumber(value)
 		if (formatted !== value) {
-			phoneNumber = formatted
+			phoneNumber.value = formatted
 			emit('input', event)
 			validatePhoneNumber()
 			return
 		}
 	}
 
-	phoneNumber = value
+	phoneNumber.value = value
 	emit('input', event)
 	validatePhoneNumber()
 }
 
 function handleBlur(event: Event) {
-	if (phoneNumber && !phoneNumber.startsWith('+') && activeCountry) {
-		const nationalNumber = phoneNumber.replace(/^0+/, '')
-		phoneNumber = `+${activeCountry.dialCode} ${nationalNumber}`
-	} else if (phoneNumber) {
-		phoneNumber = parseAndFormatPhoneNumber(phoneNumber)
+	if (phoneNumber.value && !phoneNumber.value.startsWith('+') && activeCountry.value) {
+		const nationalNumber = phoneNumber.value.replace(/^0+/, '')
+		phoneNumber.value = `+${activeCountry.value.dialCode} ${nationalNumber}`
+	} else if (phoneNumber.value) {
+		phoneNumber.value = parseAndFormatPhoneNumber(phoneNumber.value)
 	}
 
 	validatePhoneNumber()
 	emit('blur', event)
 }
 
-const disableDropdown = $computed(() => 1 === countries.length && !search)
-const searchable = $computed(() => 7 < countries.length || search)
+const disableDropdown = computed(() => countries.value.length === 1 && !search.value)
+const searchable = computed(() => countries.value.length > 7 || search.value)
 
 function focusSearchInput() {
-	setTimeout(() => searchInput?.focus(), 100)
+	setTimeout(() => searchInput.value?.focus(), 100)
 }
 
 onMounted(initializeCountry)