@bagelink/vue 1.4.97 → 1.4.101

package/dist/utils/ipapi.d.ts

@@ -0,0 +1,2 @@
+export declare function ipapi(): Promise<any>;
+//# sourceMappingURL=ipapi.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ipapi.d.ts","sourceRoot":"","sources":["../../src/utils/ipapi.ts"],"names":[],"mappings":"AAEA,wBAAsB,KAAK,iBAQ1B"}

package/package.json

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

package/src/components/Dropdown.vue

@@ -29,6 +29,7 @@ const {
 	popperTriggers = [],
 	popperShowTriggers = [],
 	popperHideTriggers = [],
+	showGroup,
 	delay,
 
 } = defineProps<{
@@ -53,6 +54,7 @@ const {
 	popperTriggers?: TriggerEvent[]
 	popperShowTriggers?: TriggerEvent[]
 	popperHideTriggers?: TriggerEvent[]
+	showGroup?: string
 	delay?: number | { show: number, hide: number }
 	// theme
 	// referenceNode
@@ -159,7 +161,7 @@ const computedDelay = $computed((): number | { show: number, hide: number } | un
 	if (delay !== undefined) return delay
 	// For hover dropdowns, add a hide delay
 	if (triggers.includes('hover')) {
-		return { show: 0, hide: 50 } // 50ms delay before hiding
+		return { show: 0, hide: 10 } // 50ms delay before hiding
 	}
 	// For click dropdowns, no delay
 	return 0
@@ -174,7 +176,7 @@ defineExpose({ show, hide, shown })
 		:placement :autoHide="computedAutoHide" :delay="computedDelay" :triggers :showTriggers="computedShowTriggers"
 		:hideTriggers="computedHideTriggers" :popperTriggers="computedPopperTriggers"
 		:popperShowTriggers="computedPopperShowTriggers" :popperHideTriggers="computedPopperHideTriggers"
-		@hide="emit('hide')" @show="emit('show')"
+		:showGroup="showGroup" @hide="emit('hide')" @show="emit('show')"
 	>
 		<div ref="triggerRef" />
 		<slot name="trigger" :show :hide :shown>

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

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { Country } from '@bagelink/vue'
 import type { CountryCode } from 'libphonenumber-js'
-import { Dropdown, Flag, Icon, TextInput, allCountries } from '@bagelink/vue'
-import axios from 'axios'
+import { Dropdown, Flag, Icon, TextInput, allCountries, ipapi } from '@bagelink/vue'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { onMounted, watch, ref } from 'vue'
 
@@ -83,13 +82,7 @@ function selectCountry(country: Country) {
 }
 
 async function getIp() {
-	let apiData = sessionStorage.getItem('ipapi')
-	if (!apiData) {
-		apiData = (await axios.get('https://ipapi.co/json/')).data
-		apiData = JSON.stringify(apiData)
-		sessionStorage.setItem('ipapi', apiData)
-	}
-	const { country_code } = JSON.parse(apiData)
+	const { country_code } = await ipapi()
 	selectCountry(countries.find(c => c.iso2 === country_code) ?? countries[0])
 }
 
@@ -209,47 +202,30 @@ onMounted(initializeCountry)
 		<label>
 			{{ label }} <span v-if="required && label">*</span>
 			<div
-				dir="ltr"
-				class="flex gap-05 tel-input"
-				tabindex="-1"
-				aria-label="Country Code Selector"
-				aria-haspopup="listbox"
-				:aria-expanded="open"
+				dir="ltr" class="flex gap-05 tel-input" tabindex="-1" aria-label="Country Code Selector"
+				aria-haspopup="listbox" :aria-expanded="open"
 			>
 				<Dropdown
-					v-model:shown="open"
-					placement="bottom-start"
-					:disabled="disableDropdown"
+					v-model:shown="open" placement="bottom-start" :disabled="disableDropdown"
 					@show="focusSearchInput"
 				>
 					<template #trigger>
 						<span class="flex gap-05 country-code-display">
 							<Icon v-if="!disableDropdown" :icon="open ? 'collapse_all' : 'expand_all'" />
-							<Flag v-if="activeCountryCode"	:country="activeCountryCode" />
+							<Flag v-if="activeCountryCode" :country="activeCountryCode" />
 						</span>
 					</template>
 					<div class="p-075 tel-countryp-dropdown">
 						<TextInput
-							v-if="searchable"
-							ref="searchInput"
-							v-model="search"
-							aria-label="Search by country name or country code"
-							placeholder="Search"
-							icon="search"
+							v-if="searchable" ref="searchInput" v-model="search"
+							aria-label="Search by country name or country code" placeholder="Search" icon="search"
 						/>
 
-						<ul
-							class="overflow-y p-0 max-h-300px"
-							role="listbox"
-						>
+						<ul class="overflow-y p-0 max-h-300px" role="listbox">
 							<li
-								v-for="(pb) in countries"
-								:key="pb.iso2"
-								role="option"
-								class="flex gap-075 pointer hover"
-								tabindex="-1"
-								:aria-selected="activeCountryCode === pb.iso2"
-								@click="selectCountry(pb)"
+								v-for="(pb) in countries" :key="pb.iso2" role="option"
+								class="flex gap-075 pointer hover" tabindex="-1"
+								:aria-selected="activeCountryCode === pb.iso2" @click="selectCountry(pb)"
 							>
 								<Flag :country="pb.iso2" />
 								<p class="tel-country">{{ pb.name }}</p>
@@ -261,22 +237,10 @@ onMounted(initializeCountry)
 					</div>
 				</Dropdown>
 				<input
-					:id="id"
-					ref="inputRef"
-					v-model="phoneNumber"
-					v-pattern.tel
-					:required="required"
-					:placeholder="placeholder || label || 'Phone Number'"
-					:disabled="disabled"
-					type="tel"
-					autocomplete="tel"
-					:name="id"
-					tabindex="0"
-					class="national-number-input"
-					@blur="handleBlur($event)"
-					@focus="emit('focus', $event)"
-					@keydown="emit('keydown', $event)"
-					@input="handlePhoneInput($event)"
+					:id="id" ref="inputRef" v-model="phoneNumber" v-pattern.tel :required="required"
+					:placeholder="placeholder || label || 'Phone Number'" :disabled="disabled" type="tel"
+					autocomplete="tel" :name="id" tabindex="0" class="national-number-input" @blur="handleBlur($event)"
+					@focus="emit('focus', $event)" @keydown="emit('keydown', $event)" @input="handlePhoneInput($event)"
 					@paste="emit('paste', $event)"
 				>
 			</div>
@@ -353,12 +317,16 @@ onMounted(initializeCountry)
 }
 
 @keyframes highlight-country {
-	0%, 100% {
+
+	0%,
+	100% {
 		background-color: transparent;
 	}
+
 	30% {
 		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
 	}
+
 	70% {
 		background-color: var(--primary-color-light, rgba(0, 123, 255, 0.2));
 	}

package/src/index.ts

@@ -19,4 +19,5 @@ import './styles/bagel.css'
 export * from './utils/calendar/dateUtils'
 export * from './utils/constants'
 export * from './utils/elementUtils'
+export * from './utils/ipapi'
 export * from './utils/useSearch'

package/src/utils/ipapi.ts

@@ -0,0 +1,11 @@
+import axios from 'axios'
+
+export async function ipapi() {
+	let apiData = sessionStorage.getItem('ipapi')
+	if (!apiData) {
+		apiData = (await axios.get('https://ipapi.co/json/')).data
+		apiData = JSON.stringify(apiData)
+		sessionStorage.setItem('ipapi', apiData)
+	}
+	return JSON.parse(apiData)
+}