@bagelink/vue 1.4.99 → 1.4.103

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.99",
+  "version": "1.4.103",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -65,14 +65,12 @@ function toggle() {
 <template>
 	<div class="accordion-item txt-start" :class="[{ flat }]">
 		<button
-			:aria-expanded="isOpen ? 'true' : 'false'"
-			class="accordion-head"
-			:aria-controls="`accordion-body-${id}`"
-			@click="toggle()"
+			:aria-expanded="isOpen ? 'true' : 'false'" class="accordion-head"
+			:aria-controls="`accordion-body-${id}`" @click="toggle()"
 		>
 			<span
-				v-if="iconPosition === 'start'"
-				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
+				v-if="iconPosition === 'start'" class="accordion-icon"
+				:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
 				<Icon :icon="computedIcon" />
 			</span>
@@ -84,17 +82,15 @@ function toggle() {
 			</slot>
 
 			<span
-				v-if="iconPosition === 'end'"
-				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
+				v-if="iconPosition === 'end'" class="accordion-icon"
+				:class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
 				<Icon :icon="computedIcon" />
 			</span>
 		</button>
 		<Transition name="expand">
 			<div
-				v-if="isOpen"
-				:id="`accordion-body-${id}`"
-				class="accordion-body"
+				v-if="isOpen" :id="`accordion-body-${id}`" class="accordion-body"
 				:aria-hidden="isOpen ? 'false' : 'true'"
 			>
 				<slot />
@@ -107,9 +103,9 @@ function toggle() {
 .accordion-item {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
-	cursor: pointer;
 	overflow: hidden;
 }
+
 .accordion-item button {
 	cursor: pointer;
 }
@@ -130,14 +126,14 @@ function toggle() {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
-	width: calc( var(--btn-height) / 1.5);
-	height: calc( var(--btn-height) / 1.5);
+	width: calc(var(--btn-height) / 1.5);
+	height: calc(var(--btn-height) / 1.5);
 	padding-inline: calc(var(--btn-padding) / 3);
 	justify-content: center;
 }
 
-[aria-expanded="true"] .accordion-icon  {
-    transform: rotate(180deg);
+[aria-expanded="true"] .accordion-icon {
+	transform: rotate(180deg);
 }
 
 .accordion-label {

package/src/components/Dropdown.vue

@@ -161,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

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)
+}