@bagelink/vue 0.0.687 → 0.0.689

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

@@ -66,18 +66,18 @@ const defaultDropdownOptions = {
 }
 
 const defaultInputOptions = {
-	showDialCode: true,
-	autofocus: false,
+	'showDialCode': true,
+	'autofocus': false,
 	'aria-describedby': '',
-	id: '',
-	maxlength: 25,
-	minlength: 9,
-	pattern: undefined as string | undefined,
-	name: '',
-	readonly: false,
-	tabindex: 0,
-	style: '' as Raw<StyleValue>,
-	placeholder: 'Enter a phone number',
+	'id': '',
+	'maxlength': 25,
+	'minlength': 9,
+	'pattern': undefined as string | undefined,
+	'name': '',
+	'readonly': false,
+	'tabindex': 0,
+	'style': '' as Raw<StyleValue>,
+	'placeholder': 'Enter a phone number',
 }
 
 interface Props {
@@ -123,26 +123,22 @@ const searchQuery = $ref('')
 // const refInput = $ref<HTMLInputElement | null>(null)
 
 // Computed: activeCountry
-const activeCountry = $computed(() =>
-	props.allCountries.find(
-		country => country.iso2 === activeCountryCode?.toUpperCase()
-	)
+const activeCountry = $computed(() => props.allCountries.find(
+	country => country.iso2 === activeCountryCode?.toUpperCase(),
+),
 )
 
-const isPreferred = (country?: Country) =>
-	props.preferredCountries.includes(country?.iso2 as CountryCode)
+const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode)
 
 const filteredCountries = $computed(() => {
 	if (props.onlyCountries.length) {
-		return props.allCountries.filter(({ iso2 }) =>
-			props.onlyCountries.some(c => c.toUpperCase() === iso2)
+		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some(c => c.toUpperCase() === iso2),
 		)
 	}
 	if (props.excludeCountries.length) {
 		return props.allCountries.filter(
-			({ iso2 }) =>
-				!props.excludeCountries.includes(iso2.toUpperCase()) &&
-				!props.excludeCountries.includes(iso2.toLowerCase())
+			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
+			&& !props.excludeCountries.includes(iso2.toLowerCase()),
 		)
 	}
 	return props.allCountries
@@ -155,14 +151,13 @@ const sortedCountries = $computed(() => {
 	const cleanInput = searchQuery.replace(
 		// eslint-disable-next-line regexp/no-obscure-range
 		/[~`!#$%&*()+={};:'"<>.,/?-_]/g,
-		''
+		'',
 	)
 	return countriesList
 		.filter(
-			c =>
-				new RegExp(cleanInput, 'i').test(c.name || '') ||
-				new RegExp(cleanInput, 'i').test(c.iso2 || '') ||
-				new RegExp(cleanInput, 'i').test(c.dialCode || '')
+			c => new RegExp(cleanInput, 'i').test(c.name || '')
+			|| new RegExp(cleanInput, 'i').test(c.iso2 || '')
+			|| new RegExp(cleanInput, 'i').test(c.dialCode || ''),
 		)
 		.filter(Boolean)
 })
@@ -174,21 +169,16 @@ const parseArgs = $computed(() => ({
 
 const phone = defineModel<string>('modelValue', {
 	default: '',
-	set: value => {
+	set: (value) => {
 		let maybeFormatted = value
 		if (value.length > 5) {
 			maybeFormatted = formatPhone(`${value}`)
 
-			if (!maybeFormatted) {
-				emit('update:modelValue', '')
-				return ''
-			}
+			if (!maybeFormatted) { emit('update:modelValue', ''); return '' }
 		}
 
 		emit('update:modelValue', maybeFormatted)
-		debounce(() => {
-			emit('debounce', maybeFormatted)
-		}, props.debounceDelay)
+		debounce(() => { emit('debounce', maybeFormatted) }, props.debounceDelay)
 		return maybeFormatted
 	},
 	get: value => value,
@@ -199,8 +189,8 @@ function formatPhone(val: string): string {
 	console.log('Phone Number:', phoneNumber)
 
 	if (!phoneNumber) {
-		const dialCode =
-			sortedCountries.find(c => c.iso2 === activeCountryCode)?.dialCode || ''
+		const dialCode
+			= sortedCountries.find(c => c.iso2 === activeCountryCode)?.dialCode || ''
 		if (props.mode === 'INTERNATIONAL') return `+${dialCode}`
 		return dialCode
 	}
@@ -217,21 +207,11 @@ watch(
 		}
 		// eslint-disable-next-line vue/custom-event-name-casing
 		if (value?.iso2) emit('country-changed', value)
-	}
+	},
 )
 
 async function initializeCountry() {
-	if (props.modelValue.includes('+')) {
-		const sanitized = `${props.modelValue}`.replace(/[\+\-\s]/gi, '')
-		const twoDigits = sanitized.slice(0, 2)
-		const threeDigits = sanitized.slice(0, 3)
-		const country =
-			findCountryByDialCode(+threeDigits) || findCountryByDialCode(+twoDigits)
-		if (country) {
-			chooseCountry(country.iso2)
-			return
-		}
-	}
+	// if (phone?.[0] === '+') return;
 	// 2. Use default country if passed from parent
 	if (props.defaultCountry) {
 		if (typeof props.defaultCountry === 'string') {
@@ -265,12 +245,11 @@ async function initializeCountry() {
 
 onMounted(initializeCountry)
 
-const findCountry = (iso: string) =>
-	filteredCountries.find(country => country.iso2 === iso.toUpperCase())
+const findCountry = (iso: string) => filteredCountries.find(country => country.iso2 === iso.toUpperCase())
 
 function getCountries(list: string[]): Country[] {
 	const countryList: Country[] = []
-	list.forEach(countryCode => {
+	list.forEach((countryCode) => {
 		const country = findCountry(countryCode)
 		if (country) countryList.push(country)
 	})
@@ -278,9 +257,7 @@ function getCountries(list: string[]): Country[] {
 }
 
 function findCountryByDialCode(dialCode: number) {
-	return filteredCountries.find(
-		country => Number(country.dialCode) === dialCode
-	)
+	return filteredCountries.find(country => Number(country.dialCode) === dialCode)
 }
 
 function chooseCountry(country?: string) {
@@ -299,27 +276,21 @@ function chooseCountry(country?: string) {
 	// emitInput(phone);
 }
 
-function onBlur() {
-	emit('blur')
-}
+function onBlur() { emit('blur') }
 
-function onFocus() {
-	emit('focus')
-}
+function onFocus() { emit('focus') }
 
-function onEnter(e: KeyboardEvent) {
-	emit('enter')
-}
+function onEnter(e: KeyboardEvent) { emit('enter') }
 
-function onSpace() {
-	emit('space')
-}
+function onSpace() { emit('space') }
 
 // const focus = () => refInput?.focus();
 
 // Method: reset
 function reset() {
-	selectedIndex = sortedCountries.findIndex(c => c.iso2 === activeCountryCode)
+	selectedIndex = sortedCountries.findIndex(
+		c => c.iso2 === activeCountryCode,
+	)
 	open = false
 }
 
@@ -336,7 +307,10 @@ function handleInput(e: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="bagel-input" :class="{ disabled }">
+	<div
+		class="bagel-input"
+		:class="{ disabled }"
+	>
 		<label>
 			{{ label }}
 			<div
@@ -355,7 +329,10 @@ function handleInput(e: KeyboardEvent) {
 					:disabled="computedDropDownOptions.disabled"
 					@hide="open = false"
 				>
-					<span class="flex gap-05" @click="open = true">
+					<span
+						class="flex gap-05"
+						@click="open = true"
+					>
 						<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
 						<Flag
 							v-if="computedDropDownOptions.showFlags && activeCountryCode"
@@ -384,10 +361,12 @@ function handleInput(e: KeyboardEvent) {
 									role="option"
 									class="flex gap-075"
 									tabindex="-1"
-									:aria-selected="
-										activeCountryCode === pb.iso2 && !isPreferred(pb)
+									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
+									"
+									@click="
+										chooseCountry(pb.iso2);
+										hide();
 									"
-									@click="hide() && chooseCountry(pb.iso2)"
 									@mousemove="selectedIndex = index"
 								>
 									<Flag
@@ -427,7 +406,7 @@ function handleInput(e: KeyboardEvent) {
 					@keyup.enter="onEnter"
 					@keyup.space="onSpace"
 					@keydown="handleInput"
-				/>
+				>
 			</div>
 		</label>
 	</div>

package/src/styles/layout.css

@@ -1784,7 +1784,7 @@
     height: 10px;
 }
 
-.hm-10px, .max-h-10px {
+.hm-10px {
     max-height: 10px;
 }
 
@@ -1801,7 +1801,7 @@
     height: 20px;
 }
 
-.hm-20px, .max-h-20px {
+.hm-20px {
     max-height: 20px;
 }
 
@@ -1817,7 +1817,7 @@
     height: 30px;
 }
 
-.hm-30px, .max-h-30px {
+.hm-30px {
     max-height: 30px;
 }
 
@@ -1833,7 +1833,7 @@
     height: 40px;
 }
 
-.hm-40px, .max-h-40px {
+.hm-40px {
     max-height: 40px;
 }
 
@@ -1849,7 +1849,7 @@
     height: 50px;
 }
 
-.hm-50px, .max-h-50px {
+.hm-50px {
     max-height: 50px;
 }
 
@@ -1865,7 +1865,7 @@
     height: 60px;
 }
 
-.hm-60px, .max-h-60px {
+.hm-60px {
     max-height: 60px;
 }
 
@@ -1881,7 +1881,7 @@
     height: 70px;
 }
 
-.hm-70px, .max-h-70px {
+.hm-70px {
     max-height: 70px;
 }
 
@@ -1897,7 +1897,7 @@
     height: 80px;
 }
 
-.hm-80px, .max-h-80px {
+.hm-80px {
     max-height: 80px;
 }
 
@@ -1913,10 +1913,11 @@
     height: 90px;
 }
 
-.hm-90px, .max-h-90px {
+.hm-90px {
     max-height: 90px;
 }
 
+
 .h-100 {
     height: 100%;
 }
@@ -1929,7 +1930,7 @@
     height: 100px !important;
 }
 
-.hm-100px, .max-h-100px {
+.hm-100px {
     max-height: 100px;
 }
 
@@ -1945,7 +1946,7 @@
     height: 150px;
 }
 
-.hm-150px, .max-h-150px {
+.hm-150px {
     max-height: 150px;
 }
 
@@ -1961,7 +1962,7 @@
     height: 200px;
 }
 
-.hm-200px, .max-h-200px {
+.hm-200px {
     max-height: 200px;
 }
 
@@ -1977,7 +1978,7 @@
     height: 300px;
 }
 
-.hm-300px, .max-h-300px {
+.hm-300px {
     max-height: 300px;
 }
 
@@ -1993,7 +1994,7 @@
     height: 400px;
 }
 
-.hm-400px, .max-h-400px {
+.hm-400px {
     max-height: 400px;
 }
 
@@ -2009,7 +2010,7 @@
     height: 500px;
 }
 
-.hm-500px, .max-h-500px {
+.hm-500px {
     max-height: 500px;
 }
 
@@ -2025,44 +2026,10 @@
     height: 600px;
 }
 
-.hm-600px, .max-h-600px {
+.hm-600px {
     max-height: 600px;
 }
 
-.hm-10vh, .max-h-10vh {
-    max-height: 10vh;
-}
-.hm-20vh, .max-h-20vh {
-    max-height: 20vh;
-}
-.hm-30vh, .max-h-30vh {
-    max-height: 30vh;
-}
-.hm-40vh, .max-h-40vh {
-    max-height: 40vh;
-}
-.hm-50vh, .max-h-50vh {
-    max-height: 50vh;
-}
-.hm-60vh, .max-h-60vh {
-    max-height: 60vh;
-}
-.hm-70vh, .max-h-70vh {
-    max-height: 70vh;
-}
-.hm-80vh, .max-h-80vh {
-    max-height: 80vh;
-}
-.hm-90vh, .max-h-90vh {
-    max-height: 90vh;
-}
-.hm-100vh, .max-h-100vh {
-    max-height: 100vh;
-}
-
-
-
-
 
 .layout-h-100 {
     height: 100vh;

package/src/styles/mobilLayout.css

@@ -1417,7 +1417,7 @@
         height: 10px;
     }
 
-    .m_hm-10px, .max-h-10px {
+    .m_hm-10px {
         max-height: 10px;
     }
 
@@ -1434,7 +1434,7 @@
         height: 20px;
     }
 
-    .m_hm-20px, .max-h-20px {
+    .m_hm-20px {
         max-height: 20px;
     }
 
@@ -1450,7 +1450,7 @@
         height: 30px;
     }
 
-    .m_hm-30px, .max-h-30px {
+    .m_hm-30px {
         max-height: 30px;
     }
 
@@ -1466,7 +1466,7 @@
         height: 40px;
     }
 
-    .m_hm-40px, .max-h-40px {
+    .m_hm-40px {
         max-height: 40px;
     }
 
@@ -1482,7 +1482,7 @@
         height: 50px;
     }
 
-    .m_hm-50px, .max-h-50px {
+    .m_hm-50px {
         max-height: 50px;
     }
 
@@ -1498,7 +1498,7 @@
         height: 60px;
     }
 
-    .m_hm-60px, .max-h-60px {
+    .m_hm-60px {
         max-height: 60px;
     }
 
@@ -1514,7 +1514,7 @@
         height: 70px;
     }
 
-    .m_hm-70px, .max-h-70px {
+    .m_hm-70px {
         max-height: 70px;
     }
 
@@ -1530,7 +1530,7 @@
         height: 80px;
     }
 
-    .m_hm-80px, .max-h-80px {
+    .m_hm-80px {
         max-height: 80px;
     }
 
@@ -1546,7 +1546,7 @@
         height: 90px;
     }
 
-    .m_hm-90px, .max-h-90px {
+    .m_hm-90px {
         max-height: 90px;
     }
 
@@ -1563,7 +1563,7 @@
         height: 100px;
     }
 
-    .m_hm-100px, .max-h-100px {
+    .m_hm-100px {
         max-height: 100px;
     }
 
@@ -1579,7 +1579,7 @@
         height: 150px;
     }
 
-    .m_hm-150px, .max-h-150px {
+    .m_hm-150px {
         max-height: 150px;
     }
 
@@ -1595,7 +1595,7 @@
         height: 200px;
     }
 
-    .m_hm-200px, .max-h-200px {
+    .m_hm-200px {
         max-height: 200px;
     }
 
@@ -1611,7 +1611,7 @@
         height: 300px;
     }
 
-    .m_hm-300px, .max-h-300px {
+    .m_hm-300px {
         max-height: 300px;
     }
 
@@ -1627,7 +1627,7 @@
         height: 400px;
     }
 
-    .m_hm-400px, .max-h-400px {
+    .m_hm-400px {
         max-height: 400px;
     }
 
@@ -1643,7 +1643,7 @@
         height: 500px;
     }
 
-    .m_hm-500px, .max-h-500px {
+    .m_hm-500px {
         max-height: 500px;
     }
 
@@ -1659,41 +1659,10 @@
         height: 600px;
     }
 
-    .m_hm-600px, .m_max-h-600px {
+    .m_hm-600px {
         max-height: 600px;
     }
 
-    .m_hm-10vh, .m_max-h-10vh {
-        max-height: 10vh;
-    }
-    .m_hm-20vh, .m_max-h-20vh {
-        max-height: 20vh;
-    }
-    .m_hm-30vh, .m_max-h-30vh {
-        max-height: 30vh;
-    }
-    .m_hm-40vh, .m_max-h-40vh {
-        max-height: 40vh;
-    }
-    .m_hm-50vh, .m_max-h-50vh {
-        max-height: 50vh;
-    }
-    .m_hm-60vh, .m_max-h-60vh {
-        max-height: 60vh;
-    }
-    .m_hm-70vh, .m_max-h-70vh {
-        max-height: 70vh;
-    }
-    .m_hm-80vh, .m_max-h-80vh {
-        max-height: 80vh;
-    }
-    .m_hm-90vh, .m_max-h-90vh {
-        max-height: 90vh;
-    }
-    .m_hm-100vh, .m_max-h-100vh {
-        max-height: 100vh;
-    }
-    
 
     .m_layout-h-100 {
         height: 100vh;

package/src/styles/text.css

@@ -341,10 +341,6 @@
     font-family: "Material Symbols Outlined", serif !important;
 }
 
-.user-select-none{
-    user-select: none;
-}
-
 .nowrap {
     white-space: nowrap;
 }
@@ -711,10 +707,6 @@
         white-space: nowrap;
     }
 
-    .m_user-select-none{
-        user-select: none;
-    }
-
     .m_balance {
         text-wrap: balance;
     }

package/src/types/index.ts

@@ -33,7 +33,6 @@ export type ThemeType = |
 	| 'primary'
 	| 'blue' // ! blue does nothing
 
-// | boolean TODO: add to option type
 export type Option =
 	| string
 	| number

package/src/utils/lang.ts

@@ -12,21 +12,14 @@ const state: State = reactive({
 	lang: 'en',
 })
 
-function $tdb<T extends Record<string, any>>(langEl?: T): string {
-	if (!langEl) {
-		console.warn('No language element provided for $tdb function')
-		return ''
-	}
-
-	return langEl[state.lang] || langEl[state.defaultLang] || ''
-}
-
 export function useLang() {
 	const lang = computed({
 		get: () => state.lang,
 		set: val => (state.lang = val),
 	})
 
+	const $tdb = (langEl: Record<string, any>) => langEl[state.lang] || langEl[state.defaultLang] || ''
+
 	const availableLangs = computed({
 		get: () => state.availableLangs,
 		set: val => (state.availableLangs = val),