@bagelink/vue 0.0.439 → 0.0.447

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

@@ -0,0 +1,401 @@
+<template>
+	<div class="bagel-input" :class="{ disabled: disabled }">
+		<label>
+			{{ label }}
+			<div
+				dir="ltr"
+				class="flex gap-05 tel-input"
+				tabindex="-1"
+				aria-label="Country Code Selector"
+				aria-haspopup="listbox"
+				:aria-expanded="open"
+				@keydown.esc="reset"
+				@keydown.tab="reset"
+			>
+				<Dropdown :placement="'bottom'" @hide="open = false">
+					<span class="flex gap-05" @click="open = true">
+						<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
+						<Flag
+							v-if="dropdownOptions.showFlags && activeCountryCode"
+							:country-code="activeCountryCode?.toLowerCase()"
+						/>
+					</span>
+					<template #popper="{ hide }">
+						<div class="p-075 tel-countryp-dropdown">
+							<TextInput
+								v-if="searchable"
+								aria-label="Search by country name or country code"
+								placeholder="Search"
+								icon="search"
+								v-model="searchQuery"
+							/>
+							<ul
+								ref="listEl"
+								class="overflow-y p-0"
+								:style="{ 'max-height': '400px' }"
+								:class="dropdownOpenDirection"
+								role="listbox"
+							>
+								<li
+									v-for="(pb, index) in sortedCountries"
+									role="option"
+									class="flex gap-075"
+									:key="pb.iso2 + isPreferred(pb)"
+									tabindex="-1"
+									@click="
+										() => {
+											chooseCountry(pb.iso2);
+											hide();
+										}
+									"
+									@mousemove="selectedIndex = index"
+									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)"
+								>
+									<Flag v-if="dropdownOptions.showFlags" :country-code="pb.iso2.toLowerCase()" />
+									<p class="tel-country">{{ pb.name }}</p>
+									<span v-if="dropdownOptions.showDialCodeInList"> +{{ pb.dialCode }} </span>
+								</li>
+							</ul>
+						</div>
+					</template>
+				</Dropdown>
+				<input
+					:required="required"
+					:placeholder="placeholder"
+					:disabled="disabled"
+					v-model="phone"
+					type="tel"
+					ref="refInput"
+					:autocomplete="autocomplete"
+					:class="['vti__input']"
+					:id="id"
+					:maxlength="inputOptions.maxlength"
+					:name="inputOptions.name"
+					:readonly="inputOptions.readonly"
+					:tabindex="inputOptions.tabindex"
+					:aria-describedby="inputOptions['aria-describedby']"
+					@blur="onBlur"
+					@focus="onFocus"
+					@keyup.enter="onEnter"
+					@keyup.space="onSpace"
+				>
+			</div>
+		</label>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import {
+	Icon, Dropdown, TextInput, Flag,
+	allCountries, type Country,
+} from '@bagelink/vue';
+import { onMounted, watch } from 'vue';
+import { parsePhoneNumberFromString, type CountryCode, type PhoneNumber } from 'libphonenumber-js';
+import axios from 'axios';
+
+async function getIp() {
+	const apiData = sessionStorage?.getItem('ipapi');
+	if (apiData) return JSON.parse(apiData);
+	const { data } = await axios.get('https://ipapi.co/json/');
+	sessionStorage.setItem('ipapi', JSON.stringify(data));
+	return data;
+}
+
+type DropdownOptions = {
+	disabled?: boolean;
+	showFlags?: boolean;
+	showDialCodeInSelection?: boolean;
+	showDialCodeInList?: boolean;
+};
+
+type InputOptions = {
+	autofocus?: boolean;
+	'aria-describedby'?: string;
+	maxlength?: number;
+	name?: string;
+	placeholder?: string;
+	readonly?: boolean;
+	tabindex?: number;
+	showDialCode?: boolean;
+};
+
+type Props = {
+	label?: string;
+	id?: string;
+	autocomplete?: 'on' | 'off';
+	placeholder?: string;
+	required?: boolean;
+	modelValue: string;
+	allCountries?: Country[];
+	autoFormat?: boolean;
+	customValidate?: boolean | RegExp;
+	defaultCountry?: string | number;
+	disabled?: boolean;
+	searchable?: boolean;
+	autoDefaultCountry?: boolean;
+	dropdownOptions?: DropdownOptions;
+	excludeCountries?: string[];
+	inputOptions?: InputOptions;
+	invalidMsg?: string;
+	mode?: 'auto' | 'international' | 'national';
+	onlyCountries?: string[];
+	preferredCountries?: string[];
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: '',
+	autocomplete: 'on',
+	allCountries: () => allCountries,
+	autoFormat: true,
+	customValidate: false,
+	defaultCountry: '',
+	placeholder: 'Enter a phone number',
+	searchable: true,
+	dropdownOptions: () => ({
+		disabled: false,
+		showFlags: true,
+		showDialCodeInSelection: true,
+		showDialCodeInList: true,
+		searchable: true,
+	}),
+	disabled: false,
+	autoDefaultCountry: true,
+	excludeCountries: () => [],
+	inputOptions: () => ({
+		showDialCode: true,
+		autofocus: false,
+		'aria-describedby': '',
+		id: '',
+		maxlength: 25,
+		name: '',
+		readonly: false,
+		tabindex: 0,
+	}),
+	required: false,
+	invalidMsg: 'Invalid phone number',
+	mode: 'auto',
+	onlyCountries: () => [],
+	preferredCountries: () => [],
+});
+
+let activeCountryCode = $ref<CountryCode>();
+let open = $ref(false);
+let selectedIndex = $ref<number>();
+const dropdownOpenDirection = $ref('below');
+const searchQuery = $ref('');
+
+const refInput = $ref<HTMLInputElement | null>(null);
+
+const emit = defineEmits([
+	'update:modelValue',
+	'change',
+	'input',
+	'blur',
+	'focus',
+	'country-changed',
+	'enter',
+	'space',
+]);
+
+function formatPhone(val: string) {
+	let result: PhoneNumber | undefined;
+	if (val?.[0] === '+') result = parsePhoneNumberFromString(val);
+	else result = parsePhoneNumberFromString(val, activeCountryCode);
+	const valid = result?.isValid?.();
+	refInput?.setCustomValidity?.(valid ? '' : props.invalidMsg);
+	const formatted = valid ? result?.format?.(parsedMode.toUpperCase() as any) : val;
+	return formatted;
+}
+
+const cleanStr = (str?: string) => {
+	const phoneNumber = (str?.match(/[()\-+0-9\s]*/g) || []).join('');
+	return phoneNumber.trim();
+};
+
+let phone = $computed<string>({
+	get: () => props.modelValue,
+	set: (value) => {
+		const clean = cleanStr(value);
+		const formatted = formatPhone(clean) || '';
+		emit('update:modelValue', formatted);
+	},
+});
+
+// Computed: activeCountry
+const activeCountry = $computed(() => props.allCountries.find((country) => country.iso2 === activeCountryCode?.toUpperCase()));
+
+const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as string);
+
+// Computed: parsedMode
+const parsedMode = $computed(() => {
+	if (props.mode === 'auto') {
+		if (!phone || phone[0] !== '+') return 'national';
+		return 'international';
+	}
+	return props.mode || 'international';
+});
+
+const filteredCountries = $computed(() => {
+	if (props.onlyCountries.length) {
+		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()),
+		);
+	}
+	return props.allCountries;
+});
+
+const sortedCountries = $computed(() => {
+	const preferredCountries = getCountries(props.preferredCountries);
+
+	const countriesList = [...preferredCountries, ...filteredCountries];
+	const cleanInput = searchQuery.replace(/[~`!@#$%^&*()+={}\[\];:'"<>.,\/\\\?-_]/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 || ''),
+		)
+		.filter(Boolean);
+});
+
+// Watchers
+watch(
+	() => activeCountry,
+	(value, oldValue) => {
+		if (!value && oldValue?.iso2) {
+			activeCountryCode = oldValue.iso2;
+			return;
+		}
+		if (value?.iso2) emit('country-changed', value);
+	},
+);
+
+const initializeCountry = async () => {
+	// if (phone?.[0] === '+') return;
+	// 2. Use default country if passed from parent
+	if (props.defaultCountry) {
+		if (typeof props.defaultCountry === 'string') {
+			chooseCountry(props.defaultCountry);
+			return;
+		}
+		if (typeof props.defaultCountry === 'number') {
+			const country = findCountryByDialCode(props.defaultCountry);
+			if (country) {
+				chooseCountry(country.iso2);
+				return;
+			}
+		}
+	}
+
+	const fallbackCountry = sortedCountries[0];
+
+	if (props.autoDefaultCountry) {
+		try {
+			const res = (await getIp()).country;
+			chooseCountry(res || activeCountryCode);
+		} catch (error) {
+			console.warn(error);
+			chooseCountry(fallbackCountry?.iso2);
+		}
+	} else {
+		// 4. Use the first country from preferred list (if available) or all countries list
+		chooseCountry(fallbackCountry?.iso2);
+	}
+};
+
+onMounted(initializeCountry);
+
+const findCountry = (iso: string) => filteredCountries.find((country) => country.iso2 === iso?.toUpperCase());
+
+const getCountries = (list: string[]): Country[] => {
+	const countryList: Country[] = [];
+	list.forEach((countryCode) => {
+		const country = findCountry(countryCode);
+		if (country) countryList.push(country);
+	});
+	return countryList;
+};
+
+const findCountryByDialCode = (dialCode: number) => filteredCountries.find((country) => Number(country.dialCode) === dialCode);
+
+const chooseCountry = (country?: string) => {
+	if (!country) return;
+	const parsedCountry = findCountry(country);
+	if (!parsedCountry) return;
+	activeCountryCode = parsedCountry.iso2;
+
+	if (props.inputOptions?.showDialCode && parsedCountry) {
+		phone = `+${parsedCountry.dialCode}`;
+		activeCountryCode = parsedCountry.iso2 || '';
+		return;
+	}
+
+	activeCountryCode = parsedCountry.iso2 || '';
+	// emitInput(phone);
+};
+
+const onBlur = () => emit('blur');
+
+const onFocus = () => emit('focus');
+
+const onEnter = () => emit('enter');
+
+const onSpace = () => emit('space');
+
+// const focus = () => refInput?.focus();
+
+// Method: reset
+const reset = () => {
+	selectedIndex = sortedCountries.findIndex((c) => c.iso2 === activeCountryCode);
+	open = false;
+};
+</script>
+
+<style scoped>
+.tel-input {
+	direction: ltr;
+	text-align: left;
+	background: var(--input-bg);
+	border: none;
+	padding-inline-start: 0.7rem;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	min-width: calc(var(--input-height) * 3);
+	width: 100%;
+}
+
+.tel-input:focus-within {
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
+}
+.tel-input input {
+	background: transparent;
+}
+.tel-input input::placeholder {
+	color: transparent;
+}
+.tel-input input:focus-visible {
+	box-shadow: none;
+}
+.input_country-code {
+	font-size: var(--input-font-size);
+	color: var(--input-color);
+}
+.tel-country {
+	font-size: var(--input-font-size);
+	max-width: 200px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.tel-countryp-dropdown {
+	direction: ltr;
+	text-align: left;
+}
+</style>

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

@@ -2,7 +2,7 @@
 	<div
 		class="bagel-input text-input"
 		:class="{
-			dense, small, shrink, toggleEdit, editMode, code,
+			dense, small, shrink, code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
 		}"
@@ -20,11 +20,11 @@
 				:rows="1"
 				ref="input"
 				:placeholder="placeholder || label"
-				:disabled="!editMode"
+				:disabled
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
+				@input="updateInputVal"
 			>
 			<textarea
 				v-else
@@ -35,11 +35,11 @@
 				:rows="rows"
 				ref="input"
 				:placeholder="placeholder || label"
-				:disabled="!editMode"
+				:disabled
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
+				@input="updateInputVal"
 			/>
 			<p v-if="helptext">{{ helptext }}</p>
 		</label>
@@ -53,14 +53,6 @@
 			v-if="icon"
 			:icon="icon"
 		/>
-		<Btn
-			class="toggleEditBtn"
-			v-if="toggleEdit"
-			thin
-			@click="toggleEditAction"
-			:icon="editMode ? 'check' : 'edit'"
-			flat
-		/>
 	</div>
 </template>
 
@@ -87,7 +79,7 @@ const props = withDefaults(
 		required?: boolean;
 		pattern?: string;
 		shrink?: boolean;
-		toggleEdit?: boolean;
+		disabled?: boolean;
 		type?: string;
 		nativeInputAttrs?: Record<string, any>;
 		icon?: MaterialIcons;
@@ -102,27 +94,13 @@ const props = withDefaults(
 	}>(),
 	{
 		type: 'text',
-		toggleEdit: false,
 		modelValue: '',
 	},
 );
 let inputVal = $ref<string | number>();
-let editMode = $ref<boolean>(!props.toggleEdit);
 
 const input = $ref<HTMLInputElement>();
 
-const toggleEditAction = () => {
-	if (!props.toggleEdit) return;
-	if (editMode) {
-		editMode = false;
-		emit('debounce', inputVal);
-		emit('update:modelValue', inputVal as string);
-	} else {
-		editMode = true;
-		setTimeout(() => input?.focus(), 10);
-	}
-};
-
 const rows = $computed(() => {
 	if (props.lines) return props.lines;
 	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
@@ -130,15 +108,11 @@ const rows = $computed(() => {
 	return 1;
 });
 
-watch(
-	() => inputVal,
-	(newVal) => {
-		if (props.toggleEdit) return;
-		if (newVal === props.modelValue) return;
-		emit('update:modelValue', newVal as string);
-		debounce(() => emit('debounce', newVal));
-	},
-);
+function updateInputVal() {
+	if (props.disabled) return;
+	emit('update:modelValue', inputVal as string);
+	debounce(() => emit('debounce', inputVal), 300);
+}
 
 watch(
 	() => props.modelValue,
@@ -185,10 +159,6 @@ onMounted(() => {
 	opacity: 0.3;
 }
 
-.bagel-input.toggleEdit:hover {
-	background-color: var(--input-bg);
-}
-
 .bagel-input.small {
 	margin-bottom: 0;
 	height: 30px;
@@ -200,15 +170,13 @@ onMounted(() => {
 	gap: 0.5rem;
 }
 
-.bagel-input label {
-	font-size: var(--label-font-size);
+.bagel-input input:disabled {
+	background: #f5f5f5;
+
 }
 
-.toggleEditBtn {
-	position: absolute;
-	right: -24px;
-	top: 4;
-	opacity: 0;
+.bagel-input label {
+	font-size: var(--label-font-size);
 }
 
 .textInputIconWrap {
@@ -235,11 +203,6 @@ onMounted(() => {
 	padding-inline-start: 2rem;
 }
 
-.bagel-input:hover .toggleEditBtn,
-.bagel-input.editMode .toggleEditBtn {
-	opacity: 1;
-}
-
 .bagel-input.small textarea {
 	height: 30px;
 }

package/src/components/form/inputs/index.ts

@@ -11,4 +11,5 @@ export { default as RadioPillsInput } from './RadioPillsInput.vue';
 export { default as FileUpload } from './FileUpload.vue';
 export { default as ToggleInput } from './ToggleInput.vue';
 export { default as RichText } from './RichText.vue';
+export { default as TelInput } from './TelInput.vue';
 export { Dropdown } from 'floating-vue';

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';
 export { default as Carousel } from './Carousel.vue';
 export { default as ModalConfirm } from './ModalConfirm.vue';
+export { default as Flag } from './Flag.vue';
 
 export * from './form';
 export * from './dashboard';

package/src/components/layout/Tabs.vue

@@ -39,6 +39,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			(tab) => tabValue(tab) === currentTab.value,
 		);
+		if (currentTabIndex === -1) return null;
 		const slotChildren = slots?.default?.()?.[1]?.children;
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex]);

package/src/index.ts

@@ -5,4 +5,5 @@ export { ModalPlugin, useModal } from './plugins/modal';
 export * from './utils';
 export * from './types';
 export * from './components';
+export * from './utils/allCountries';
 import './styles/bagel.css';