@bagelink/vue 1.15.162 → 1.15.166

package/dist/utils/ipapi.d.ts

@@ -1,2 +1,10 @@
-export declare function ipapi(): Promise<any>;
+export interface IpApiResult {
+    country_code: string;
+    [key: string]: unknown;
+}
+/**
+ * Resolve the visitor's country from their IP.
+ * Result is cached in sessionStorage so multiple TelInputs share one lookup.
+ */
+export declare function ipapi(): Promise<IpApiResult>;
 //# sourceMappingURL=ipapi.d.ts.map

package/dist/utils/ipapi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ipapi.d.ts","sourceRoot":"","sources":["../../src/utils/ipapi.ts"],"names":[],"mappings":"AAIA,wBAAsB,KAAK,iBAmB1B"}
+{"version":3,"file":"ipapi.d.ts","sourceRoot":"","sources":["../../src/utils/ipapi.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACtB;AA+DD;;;GAGG;AACH,wBAAsB,KAAK,IAAI,OAAO,CAAC,WAAW,CAAC,CAmBlD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.162",
+  "version": "1.15.166",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/RouterWrapper.vue

@@ -32,7 +32,7 @@ watch(
 			</div>
 		</slot>
 		<transition v-else :duration="300" name="slide-fade" mode="out-in" appear>
-			<component :is="Component" :key="route?.params.itemID" />
+			<component :is="Component" :key="route.fullPath" />
 		</transition>
 	</RouterView>
 </template>

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

@@ -13,6 +13,7 @@ const props = withDefaults(
 		required?: boolean
 		error?: string
 		thin?: boolean
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 		multiselect?: boolean
 	} & BagelInputShellProps>(),
 	{ multiselect: false },
@@ -60,6 +61,7 @@ function isSelected(val: OptionValue) {
 		<div class="flex flex-wrap gap-05">
 			<Btn
 				v-for="option in options" :key="String(getOptionValue(option))" :thin="thin"
+				:size="size"
 				type="button"
 				:class="isSelected(getOptionValue(option)!) ? 'color-white' : 'bg-transparent'"
 				:style="isSelected(getOptionValue(option)!)
@@ -72,7 +74,7 @@ function isSelected(val: OptionValue) {
 						color: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
 						borderColor: 'var(--bgl-input-label-active-color, var(--bgl-border-color))',
 					}"
-				class="border px-075 radius-2"
+				class="border radius-2 SelectBtn-padding"
 				@click="toggleOption(getOptionValue(option)!)"
 			>
 				<Icon v-if="getOptionIcon(option)" :icon="getOptionIcon(option)!" weight="300" />
@@ -90,5 +92,8 @@ function isSelected(val: OptionValue) {
 .SelectBtn {
 --bgl-btn-height: 30px;
 }
+.SelectBtn-padding{
+	padding: var(--bgl-select-btn-padding, 0.75rem);
+}
 
 </style>

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

@@ -14,6 +14,8 @@ const props = defineProps<{
 	placeholder?: string
 	excludeCountries?: string[]
 	onlyCountries?: string[]
+	/** Preferred ISO-2 country when geo-IP is unavailable (e.g. "NL"). */
+	defaultCountry?: string
 	required?: boolean
 	disabled?: boolean
 	underlined?: boolean
@@ -100,9 +102,35 @@ function selectCountry(country: Country) {
 	}
 }
 
+function findCountry(iso2?: string | null) {
+	if (!iso2) return undefined
+	const code = iso2.toLowerCase()
+	return countries.value.find(c => c.iso2.toLowerCase() === code)
+}
+
+/** Locale / language fallback when geo-IP is blocked (CORS, rate limit, offline). */
+function countryFromBrowser(): Country | undefined {
+	const candidates = [
+		props.defaultCountry,
+		typeof navigator !== 'undefined' ? navigator.language?.split('-')[1] : undefined,
+		typeof navigator !== 'undefined' ? navigator.languages?.[0]?.split('-')[1] : undefined,
+	]
+	for (const code of candidates) {
+		const match = findCountry(code)
+		if (match) return match
+	}
+	return undefined
+}
+
 async function getIp() {
 	const { country_code } = await ipapi()
-	selectCountry(countries.value.find(c => c.iso2 === country_code) ?? countries.value[0])
+	const match = findCountry(country_code) ?? countryFromBrowser()
+	if (match) selectCountry(match)
+}
+
+function selectFallbackCountry() {
+	const match = countryFromBrowser()
+	if (match) selectCountry(match)
 }
 
 // Get the country code for use with libphonenumber-js
@@ -175,7 +203,11 @@ async function initializeCountry() {
 	if (phoneNumber.value) {
 		detectCountryFromNumber(phoneNumber.value)
 	} else {
-		await getIp()
+		try {
+			await getIp()
+		} catch {
+			selectFallbackCountry()
+		}
 	}
 	const formatted = parseAndFormatPhoneNumber(phoneNumber.value)
 	if (formatted !== phoneNumber.value) {

package/src/styles/layout.css

@@ -4115,6 +4115,10 @@
     flex-wrap: wrap;
 }
 
+.flex-wrap-nowrap {
+    flex-wrap: nowrap;
+}
+
 .flex-reverse {
     flex-direction: row-reverse;
 }

package/src/styles/mobilLayout.css

@@ -4146,6 +4146,10 @@
         flex-wrap: wrap;
     }
 
+    .m_flex-wrap-nowrap {
+        flex-wrap: nowrap;
+    }
+
     .m_flex-reverse {
         flex-direction: row-reverse;
     }

package/src/utils/ipapi.ts

@@ -1,24 +1,92 @@
 import axios from 'axios'
 
-let pendingRequest: Promise<any> | null = null
+export interface IpApiResult {
+	country_code: string
+	[key: string]: unknown
+}
+
+const CACHE_KEY = 'ipapi'
+let pendingRequest: Promise<IpApiResult> | null = null
+
+function normalizeCountryCode(code: unknown): string | null {
+	if (typeof code !== 'string') return null
+	const normalized = code.trim().toUpperCase()
+	return /^[A-Z]{2}$/.test(normalized) ? normalized : null
+}
+
+function fromCache(): IpApiResult | null {
+	try {
+		const raw = sessionStorage.getItem(CACHE_KEY)
+		if (!raw) return null
+		const data = JSON.parse(raw) as IpApiResult
+		const country_code = normalizeCountryCode(data?.country_code)
+		if (!country_code) {
+			sessionStorage.removeItem(CACHE_KEY)
+			return null
+		}
+		return { ...data, country_code }
+	}
+	catch {
+		sessionStorage.removeItem(CACHE_KEY)
+		return null
+	}
+}
 
-export async function ipapi() {
-	const apiData = sessionStorage.getItem('ipapi')
-	if (apiData) {
-		return JSON.parse(apiData)
+function toCache(data: IpApiResult) {
+	try {
+		sessionStorage.setItem(CACHE_KEY, JSON.stringify(data))
 	}
+	catch {
+		/* ignore quota / private mode */
+	}
+}
+
+/** Providers that support browser CORS and return a country ISO-2 code. */
+const providers: Array<() => Promise<string | null>> = [
+	async () => {
+		const { data } = await axios.get('https://api.country.is/', { timeout: 4000 })
+		return normalizeCountryCode(data?.country)
+	},
+	async () => {
+		const { data } = await axios.get('https://ipaddress.to/api/lookup/my', { timeout: 4000 })
+		return normalizeCountryCode(data?.location?.country_code)
+	},
+]
+
+async function resolveCountryCode(): Promise<string> {
+	for (const provider of providers) {
+		try {
+			const code = await provider()
+			if (code) return code
+		}
+		catch {
+			/* try next provider */
+		}
+	}
+	throw new Error('Could not resolve country from IP')
+}
+
+/**
+ * Resolve the visitor's country from their IP.
+ * Result is cached in sessionStorage so multiple TelInputs share one lookup.
+ */
+export async function ipapi(): Promise<IpApiResult> {
+	const cached = fromCache()
+	if (cached) return cached
 
-	// Deduplicate concurrent calls — share a single in-flight request
 	if (!pendingRequest) {
-		pendingRequest = axios.get('https://ipapi.co/json/').then(res => {
-			const data = JSON.stringify(res.data)
-			sessionStorage.setItem('ipapi', data)
-			pendingRequest = null
-			return res.data
-		}).catch(err => {
-			pendingRequest = null
-			throw err
-		})
+		pendingRequest = resolveCountryCode()
+			.then((country_code) => {
+				const result = { country_code }
+				toCache(result)
+				pendingRequest = null
+				return result
+			})
+			.catch((err) => {
+				pendingRequest = null
+				throw err
+			})
 	}
+
 	return pendingRequest
 }