@bagelink/vue 0.0.1298 → 0.0.1303

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

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import type { Country } from '@bagelink/vue'
 import type { CountryCode, NumberFormat } from 'libphonenumber-js'
-import type { Raw, StyleValue } from 'vue'
+import type { Raw, StyleValue, Ref } from 'vue'
 import {
-
 	Dropdown,
 	Flag,
 	Icon,
@@ -12,11 +11,8 @@ import {
 	useDebounceFn
 } from '@bagelink/vue'
 import axios from 'axios'
-import {
-
-	parsePhoneNumberFromString
-} from 'libphonenumber-js'
-import { onMounted, watch } from 'vue'
+import { parsePhoneNumberFromString } from 'libphonenumber-js'
+import { onMounted, watch, ref, computed } from 'vue'
 
 export interface Props {
 	label?: string
@@ -40,7 +36,6 @@ export interface Props {
 	onlyCountries?: string[]
 	preferredCountries?: string[]
 	parseArg?: { extract?: boolean }
-	debounceDelay?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -60,7 +55,6 @@ const props = withDefaults(defineProps<Props>(), {
 	onlyCountries: () => [],
 	preferredCountries: () => [],
 	showDropdown: true,
-	debounceDelay: 300,
 })
 
 const emit = defineEmits([
@@ -75,13 +69,8 @@ const emit = defineEmits([
 	'debounce',
 ])
 
-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
-}
+const open = ref(false)
+const dropdownOpenDirection = ref('below')
 
 const defaultDropdownOptions = {
 	hide: false,
@@ -117,192 +106,225 @@ const computedInputOptions = $computed(() => ({
 	...props.inputOptions,
 }))
 
-let activeCountryCode = $ref<CountryCode>()
-let open = $ref(false)
-let selectedIndex = $ref<number>()
-const dropdownOpenDirection = $ref('below')
-const searchQuery = $ref('')
-
-// const refInput = $ref<HTMLInputElement | undefined>()
+// Composables
+function useCountrySelection(props: Props, emit: any) {
+	const activeCountryCode = ref<CountryCode>()
+	const selectedIndex = ref<number>()
+	const searchQuery = ref('')
 
-// Computed: activeCountry
-const activeCountry = $computed(() => props.allCountries.find(
-	country => country.iso2 === activeCountryCode?.toUpperCase(),
-),
-)
+	const activeCountry = computed(() => props.allCountries?.find(
+		country => country.iso2 === activeCountryCode.value?.toUpperCase(),
+	))
 
-const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode)
+	const filteredCountries = computed(() => {
+		const countries = props.allCountries || []
+		const onlyCountries = props.onlyCountries || []
+		const excludeCountries = props.excludeCountries || []
 
-const filteredCountries = $computed(() => {
-	if (props.onlyCountries.length > 0) {
-		return props.allCountries.filter(({ iso2 }) => props.onlyCountries.some(c => c.toUpperCase() === iso2),
-		)
-	}
-	if (props.excludeCountries.length > 0) {
-		return props.allCountries.filter(
-			({ iso2 }) => !props.excludeCountries.includes(iso2.toUpperCase())
-				&& !props.excludeCountries.includes(iso2.toLowerCase()),
-		)
-	}
-	return props.allCountries
-})
+		if (onlyCountries.length > 0) {
+			return countries.filter(({ iso2 }) => onlyCountries.some(c => c.toUpperCase() === iso2))
+		}
+		if (excludeCountries.length > 0) {
+			return countries.filter(
+				({ iso2 }) => !excludeCountries.includes(iso2.toUpperCase())
+					&& !excludeCountries.includes(iso2.toLowerCase()),
+			)
+		}
+		return countries
+	})
 
-const sortedCountries = $computed(() => {
-	const preferredCountries = getCountries(props.preferredCountries)
+	const sortedCountries = computed(() => {
+		const preferredCountries = getCountries(props.preferredCountries || [])
+		const countriesList = [...preferredCountries, ...filteredCountries.value]
+		const cleanInput = searchQuery.value.replaceAll(
+			/[~`!#$%&*()+={};:'"<>.,\\/@-]/g,
+			'',
+		).toLowerCase()
+		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)
+	})
 
-	const countriesList = [...preferredCountries, ...filteredCountries]
-	const cleanInput = searchQuery.replaceAll(
-		// eslint-disable-next-line regexp/no-obscure-range
-		/[~`!#$%&*()+={};:'"<>.,/?-_]/g,
-		'',
+	const findCountry = (iso: string) => filteredCountries.value.find(
+		country => country.iso2 === iso.toUpperCase()
 	)
-	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)
-})
-
-const parseArgs = $computed(() => ({
-	...props.parseArg,
-	defaultCountry: activeCountryCode,
-}))
-
-const debouncedEmit = useDebounceFn((maybeFormatted: string) => {
-	emit('debounce', maybeFormatted)
-}, props.debounceDelay)
-
-const phone = defineModel<string>('modelValue', {
-	default: '',
-	set: (value) => {
-		let maybeFormatted = value
-		if (value.length > 5) {
-			maybeFormatted = formatPhone(`${value}`)
-
-			if (!maybeFormatted) { emit('update:modelValue', ''); return '' }
-		}
-
-		emit('update:modelValue', maybeFormatted)
-		debouncedEmit(maybeFormatted)
-		return maybeFormatted
-	},
-	get: value => value,
-})
 
-function formatPhone(val: string): string {
-	const phoneNumber = parsePhoneNumberFromString(val, parseArgs)
+	const findCountryByDialCode = (dialCode: number) => filteredCountries.value.find((country: Country) => Number(country.dialCode) === dialCode)
 
-	if (!phoneNumber) {
-		const dialCode
-			= sortedCountries.find(c => c.iso2 === activeCountryCode)?.dialCode || ''
-		if (props.mode === 'INTERNATIONAL') return `+${dialCode}`
-		return dialCode
+	function getCountries(list: string[]): Country[] {
+		const countryList: Country[] = []
+		list.forEach((countryCode) => {
+			const country = findCountry(countryCode)
+			if (country) countryList.push(country)
+		})
+		return countryList
 	}
-	return phoneNumber.format(props.mode).replaceAll(' ', '') || ''
-}
 
-// Watchers
-watch(
-	() => activeCountry,
-	(value, oldValue) => {
-		if (!value && oldValue?.iso2) {
-			activeCountryCode = oldValue.iso2
-			return
-		}
-		// eslint-disable-next-line vue/custom-event-name-casing
-		if (value?.iso2) emit('country-changed', value)
-	},
-)
-
-async function initializeCountry() {
-	// 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)
+	async function initializeCountry() {
+		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]
+		const fallbackCountry = sortedCountries.value[0]
 
-	if (props.autoDefaultCountry) {
-		try {
-			const res = (await getIp()).country
-			chooseCountry(res || activeCountryCode)
-		} catch (error) {
-			console.warn(error)
+		if (props.autoDefaultCountry) {
+			try {
+				const res = (await getIp()).country
+				chooseCountry(res || activeCountryCode.value)
+			} catch (error) {
+				console.warn(error)
+				chooseCountry(fallbackCountry.iso2)
+			}
+		} else {
 			chooseCountry(fallbackCountry.iso2)
 		}
-	} else {
-		// 4. Use the first country from preferred list (if available) or all countries list
-		chooseCountry(fallbackCountry.iso2)
 	}
-}
 
-onMounted(initializeCountry)
+	function chooseCountry(country?: string) {
+		if (!country) return
+		const parsedCountry = findCountry(country)
+		if (!parsedCountry) return
+		activeCountryCode.value = parsedCountry.iso2
+		emit('country-changed', parsedCountry)
+		open.value = false
+	}
 
-const findCountry = (iso: string) => filteredCountries.find(country => country.iso2 === iso.toUpperCase())
+	watch(
+		() => activeCountry.value,
+		(value, oldValue) => {
+			if (!value && oldValue?.iso2) {
+				activeCountryCode.value = oldValue.iso2
+				return
+			}
+			if (value?.iso2) emit('country-changed', value)
+		},
+	)
 
-function getCountries(list: string[]): Country[] {
-	const countryList: Country[] = []
-	list.forEach((countryCode) => {
-		const country = findCountry(countryCode)
-		if (country) countryList.push(country)
-	})
-	return countryList
+	return {
+		activeCountryCode,
+		activeCountry,
+		selectedIndex,
+		searchQuery,
+		sortedCountries,
+		chooseCountry,
+		initializeCountry,
+		findCountry,
+		findCountryByDialCode
+	}
 }
 
-function findCountryByDialCode(dialCode: number) {
-	return filteredCountries.find(country => Number(country.dialCode) === dialCode)
-}
+function usePhoneNumberFormatting(props: Props, activeCountryCode: Ref<CountryCode | undefined>) {
+	const parseArgs = computed(() => ({
+		...props.parseArg,
+		defaultCountry: activeCountryCode.value,
+	}))
+
+	function formatPhone(val: string): string {
+		// First, try to parse the number as is
+		let phoneNumber = parsePhoneNumberFromString(val, parseArgs.value)
+
+		// If parsing failed and there's a + at the start, try removing any existing country code
+		if (!phoneNumber && val.startsWith('+')) {
+			const currentCountry = props.allCountries?.find(c => c.iso2 === activeCountryCode.value)
+			if (currentCountry) {
+				// Remove the current country code if it exists
+				const { dialCode } = currentCountry
+				const withoutDialCode = val.replace(new RegExp(`^\\+${dialCode}`), '')
+				// Try parsing again with the cleaned number
+				phoneNumber = parsePhoneNumberFromString(withoutDialCode, parseArgs.value)
+			}
+		}
+
+		if (!phoneNumber) {
+			const dialCode = props.allCountries?.find(
+				c => c.iso2 === activeCountryCode.value
+			)?.dialCode || ''
 
-const phoneDropdown = $ref<typeof Dropdown>()
+			if (props.mode === 'INTERNATIONAL') return `+${dialCode}`
+			return dialCode
+		}
+
+		// Format the number according to the selected mode
+		const formattedNumber = phoneNumber.format(props.mode || 'INTERNATIONAL')
 
-function chooseCountry(country?: string) {
-	if (!country) return
-	const parsedCountry = findCountry(country)
-	if (!parsedCountry) return
-	activeCountryCode = parsedCountry.iso2
+		// For international format, ensure proper formatting with country code
+		if (props.mode === 'INTERNATIONAL') {
+			const countryCode = phoneNumber.countryCallingCode
+			const { nationalNumber } = phoneNumber
+			return `+${countryCode}${nationalNumber}`
+		}
 
-	if (props.inputOptions?.showDialCode && parsedCountry) {
-		phone.value = `+ ${parsedCountry.dialCode}`
-		activeCountryCode = parsedCountry.iso2 || ''
-		return
+		return formattedNumber.replaceAll(' ', '') || ''
 	}
 
-	activeCountryCode = parsedCountry.iso2 || ''
-	// emitInput(phone);
-	phoneDropdown?.hide()
+	return {
+		formatPhone,
+		parseArgs
+	}
 }
 
-function onBlur() { emit('blur') }
-
-function onFocus() { emit('focus') }
+const debouncedEmit = useDebounceFn((maybeFormatted: string) => { emit('debounce', maybeFormatted) })
 
-function onEnter(e: KeyboardEvent) { emit('enter') }
+const {
+	activeCountryCode,
+	selectedIndex,
+	searchQuery,
+	sortedCountries,
+	chooseCountry,
+	initializeCountry
+} = useCountrySelection(props, emit)
 
-function onSpace() { emit('space') }
+const { formatPhone } = usePhoneNumberFormatting(props, activeCountryCode)
 
-// const focus = () => refInput?.focus();
+const isPreferred = (country?: Country) => props.preferredCountries.includes(country?.iso2 as CountryCode) || false
 
 // Method: reset
 function reset() {
-	selectedIndex = sortedCountries.findIndex(
-		c => c.iso2 === activeCountryCode,
+	if (!sortedCountries.value || !activeCountryCode.value) return
+	selectedIndex.value = sortedCountries.value.findIndex(
+		(c: Country) => c.iso2 === activeCountryCode.value
 	)
-	open = false
+	open.value = false
 }
 
+const phone = defineModel<string>('modelValue', {
+	default: '',
+	set: (value) => {
+		let maybeFormatted = value
+		if (value.length > 5) {
+			maybeFormatted = formatPhone(`${value}`)
+			if (!maybeFormatted) {
+				emit('update:modelValue', '')
+				return ''
+			}
+		}
+
+		emit('update:modelValue', maybeFormatted)
+		debouncedEmit(maybeFormatted)
+		return maybeFormatted
+	},
+	get: value => value,
+})
+
+function onBlur() { emit('blur') }
+function onFocus() { emit('focus') }
+function onEnter() { emit('enter') }
+function onSpace() { emit('space') }
+
 function handleInput(e: KeyboardEvent) {
 	const keyVal = (e.key as string | undefined) ?? ''
 	if (keyVal.length > 1 || e.metaKey) return
@@ -313,6 +335,16 @@ function handleInput(e: KeyboardEvent) {
 
 	e.preventDefault()
 }
+
+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
+}
+
+onMounted(initializeCountry)
 </script>
 
 <template>
@@ -333,17 +365,12 @@ function handleInput(e: KeyboardEvent) {
 				@keydown.tab="reset"
 			>
 				<Dropdown
-					v-if="!computedDropDownOptions.hide"
-					ref="phoneDropdown"
+					v-model:shown="open"
 					placement="bottom-start"
 					:disabled="computedDropDownOptions.disabled"
-					@hide="open = false"
 				>
 					<template #trigger>
-						<span
-							class="flex gap-05"
-							@click="open = true"
-						>
+						<span class="flex gap-05">
 							<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
 							<Flag
 								v-if="computedDropDownOptions.showFlags && activeCountryCode"
@@ -361,8 +388,7 @@ function handleInput(e: KeyboardEvent) {
 						/>
 
 						<ul
-							class="overflow-y p-0"
-							:style="{ 'max-height': '400px' }"
+							class="overflow-y p-0 max-h-300px"
 							:class="dropdownOpenDirection"
 							role="listbox"
 						>

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

@@ -1,7 +1,7 @@
 export { default as Checkbox } from './Checkbox.vue'
 export { default as CheckInput } from './CheckInput.vue'
 export { default as CodeEditor } from './CodeEditor/Index.vue'
-export { default as ColorPicker } from './ColorPicker.vue'
+export { default as ColorInput } from './ColorInput.vue'
 export { default as DateInput } from './DateInput.vue'
 export { default as DatePick } from './DatePick.vue'
 export { default as DatePicker } from './DatePicker.vue'

package/src/composables/useSchemaField.ts

@@ -14,8 +14,11 @@ import {
 	BglForm,
 	bindAttrs,
 	classify,
-	keyToLabel
+	keyToLabel,
+	TelInput,
+	ColorInput,
 } from '@bagelink/vue'
+
 import { h, isVNode } from 'vue'
 
 const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
@@ -44,6 +47,8 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			textarea: TextInput,
 			number: NumberInput,
 			array: FieldArray,
+			color: ColorInput,
+			tel: TelInput,
 			select: SelectInput,
 			toggle: ToggleInput,
 			check: CheckInput,

package/src/utils/BagelFormUtils.ts

@@ -1,7 +1,5 @@
 import type { BglFormSchemaT, Field, Option, DotNotation } from '@bagelink/vue'
 import type { UploadInputProps } from '../components/form/inputs/Upload/upload.types'
-import { TelInput } from '@bagelink/vue'
-import { markRaw } from 'vue'
 
 interface InputOptions {
 	required?: boolean
@@ -223,11 +221,27 @@ export function telField<T extends { [key: string]: any }>(
 	options?: { [key: string]: any }
 ): Field<T> {
 	return {
-		$el: markRaw(TelInput),
+		$el: 'tel',
 		id,
 		label,
 		vIf: options?.vIf,
 		attrs: options,
+		class: options?.class,
+	}
+}
+
+export function colorField<T extends { [key: string]: any }>(
+	id: DotNotation<T> | string,
+	label?: string,
+	options?: { [key: string]: any }
+): Field<T> {
+	return {
+		$el: 'color',
+		id,
+		label,
+		vIf: options?.vIf,
+		attrs: options,
+		class: options?.class,
 	}
 }
 

package/src/utils/timeAgo.ts

@@ -117,3 +117,39 @@ export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en'
 
 	return selectedLang.justNow as string
 }
+
+const formatMap = {
+	dd: { type: 'day', format: '2-digit' },
+	ddd: { type: 'weekday', format: 'short' },
+	dddd: { type: 'weekday', format: 'long' },
+	mm: { type: 'month', format: '2-digit' },
+	mmm: { type: 'month', format: 'short' },
+	mmmm: { type: 'month', format: 'long' },
+	yy: { type: 'year', format: '2-digit' },
+	yyyy: { type: 'year', format: 'numeric' },
+	HH: { type: 'hour', format: '2-digit' },
+	hh: { type: 'hour', format: '2-digit' },
+	MM: { type: 'minute', format: '2-digit' },
+	ss: { type: 'second', format: '2-digit' },
+	ampm: { type: 'dayPeriod', format: 'short' }
+} as const
+
+export function formatDate(date?: string | Date, format: string = 'dd.mm.yy') {
+	if (!date) return ''
+	try {
+		const formatParts = format.split(/[.\s:]/)
+		const formatObject: Record<string, string> = {}
+
+		for (const part of formatParts) {
+			const formatInfo = formatMap[part as keyof typeof formatMap]
+			if (!formatInfo) continue
+			formatObject[formatInfo.type] = formatInfo.format
+		}
+
+		const d = typeof date === 'string' ? new Date(date) : date
+
+		return d.toLocaleDateString('he-IL', formatObject)
+	} catch (error) {
+		return ''
+	}
+}