@bagelink/vue 0.0.451 → 0.0.458

package/src/components/MapEmbed.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="map" id="map" :style="{height: `${height || 400}px`}"/>
+</template>
+
+<script setup lang="ts">
+import L from 'leaflet';
+import type { LatLngExpression, Map, Marker } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { onMounted, watch } from 'vue';
+
+type MapProps = {
+	center?: LatLngExpression;
+	zoom?: number;
+	height?: number;
+	address?: string;
+};
+
+const props = defineProps<MapProps>();
+
+let map = $ref<Map>();
+const markers = $ref<Marker[]>([]);
+
+function initializeMap() {
+	map = L.map('map', {
+		center: props.center || [31.7683, 35.2137],
+		zoom: props.zoom || 13,
+	});
+	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }).addTo(map);
+}
+
+onMounted(initializeMap);
+
+const markerSVG = '<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><g><path d="m12 0c-4.4183 0-8 3.5817-8 8 0 1.421.3816 2.75 1.0312 3.906.1079.192.221.381.3438.563l6.625 11.531 6.625-11.531c.102-.151.19-.311.281-.469l.063-.094c.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z" fill="#e74c3c"/><path d="m12 3c-2.7614 0-5 2.2386-5 5 0 2.761 2.2386 5 5 5 2.761 0 5-2.239 5-5 0-2.7614-2.239-5-5-5zm0 2c1.657 0 3 1.3431 3 3s-1.343 3-3 3-3-1.3431-3-3 1.343-3 3-3z" fill="#c0392b"/></g></svg>';
+
+function addMarker(latlng: LatLngExpression) {
+	const customIcon = L.icon({
+		iconUrl: `data:image/svg+xml;utf8,${encodeURIComponent(markerSVG)}`,
+		iconSize: [32, 32],
+	});
+	const marker = L.marker(latlng, { icon: customIcon }).addTo(map);
+	markers.push(marker);
+}
+
+async function geocodeAddress(address:string) {
+	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`;
+	const res = await fetch(geocodeUrl);
+	const data = await res.json() || [];
+	data.forEach((element) => addMarker([element.lat, element.lon]));
+}
+
+watch(() => props.address, (address) => {
+	if (address) geocodeAddress(address).catch(console.error);
+}, { immediate: true });
+</script>
+
+  <style>
+  #map {
+    height: 100%;
+  }
+  .map {
+	filter: contrast(0.6) brightness(1.25) hue-rotate(12deg);
+	border-radius: var(--input-border-radius);
+  }
+  .leaflet-control-attribution{
+	display: none;
+  }
+  </style>

package/src/components/Modal.vue

@@ -5,7 +5,7 @@
 		@click="() => (dismissable ? closeModal() : '')"
 		@keydown.esc="closeModal"
 	>
-		<dialog ref="modal" class="modal" @click.stop :style="{ ...maxWidth }">
+		<Card class="modal" @click.stop :style="{ ...maxWidth }">
 			<header v-if="slots['toolbar'] || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
@@ -17,7 +17,7 @@
 				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
 			</header>
 
-			<div v-else class="sticky h-10 bg-white z-index-999 -mt-1 -me-075 h-40px pt-025 round">
+			<div v-else class="sticky bg-white z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
 					class="color-black"
 					:style="{ float: side ? 'left' : 'right' }"
@@ -38,7 +38,7 @@
 				/>
 				<slot name="footer" />
 			</footer>
-		</dialog>
+		</Card>
 	</div>
 </template>
 
@@ -47,7 +47,7 @@ import {
 	onMounted, onUnmounted, watch, useSlots,
 } from 'vue';
 import {
-	type BtnOptions, Btn, useEscape, Title,
+	type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
 import '../styles/modal.css';
 
@@ -82,11 +82,9 @@ const maxWidth = $computed(() => {
 });
 
 const emit = defineEmits(['update:visible']);
-const modal = $ref<HTMLDialogElement | null>(null);
 
 const closeModal = () => {
 	isVisible = false;
-	modal?.close();
 	setTimeout(() => emit('update:visible', false), 200);
 };
 
@@ -95,10 +93,7 @@ defineExpose({ closeModal });
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-	setTimeout(() => {
-		modal?.showModal();
-		isVisible = true;
-}, 1);
+	setTimeout(() => (isVisible = true), 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
@@ -141,4 +136,9 @@ onUnmounted(() => {
 	align-items: center;
 	gap: 0;
 }
+.modal-no-title{
+	width: calc(100% + 2rem);
+	border-radius: var(--card-border-radius);
+
+}
 </style>

package/src/components/form/BglField.vue

@@ -10,6 +10,7 @@
 		:placeholder="field.placeholder || field.label"
 		v-model="fieldData"
 		:defaultValue="field.defaultValue"
+		:disabled="field.disabled"
 		:options="
 			bindAttrs({ options: field.options }, fieldData, modelValue).options
 		"

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

@@ -111,7 +111,7 @@ const config: {
 					txtField('src', 'YouTube URL'),
 					{
 						$el: BglVideo,
-						attrs: { src: (_, { src }: { src: string }) => src || '' },
+						attrs: { src: (_: any, { src }: { src: string }) => src || '' },
 					},
 				],
 				onSubmit: (videoObj) => editor?.commands.setYoutubeVideo(videoObj),
@@ -198,7 +198,7 @@ const config: {
 	{
 		name: 'Table',
 		command: () => editor
-			.chain()
+			?.chain()
 			.focus()
 			.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
 			.run(),

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

@@ -75,7 +75,9 @@
 import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
-import { TextInput, Card, Icon, type MaterialIcons } from '@bagelink/vue';
+import {
+	TextInput, Card, Icon, type MaterialIcons,
+} from '@bagelink/vue';
 
 type Option =
 	| string
@@ -150,11 +152,9 @@ const getValue = (option?: Option) => {
 	return option.value;
 };
 
-const isSelected = (option: Option) =>
-	!!selectedItems.find((item) => getValue(option) === getValue(item));
+const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
 
-const filteredOptions = $computed(() =>
-	props.options.filter((option) => {
+const filteredOptions = $computed(() =>	props.options.filter((option) => {
 		const searchTerm = search
 			.split(/\s+/)
 			.filter(Boolean)
@@ -164,8 +164,7 @@ const filteredOptions = $computed(() =>
 			(searchTerm.every((s) => getLabel(option).match(s)) ||
 				searchTerm.length === 0)
 		);
-	}),
-);
+	}));
 
 const select = (option: Option) => {
 	const existingIndex = selectedItems.findIndex(
@@ -205,7 +204,7 @@ watch(
 	(newVal: Option | Option[]) => {
 		if (!props.multiselect) {
 			const newOption =
-				props.options.find((o) => getValue(o) === newVal) || newVal;
+				props.options?.find((o) => getValue(o) === newVal) || newVal;
 			if (newOption && !isSelected(newOption)) selectedItems = [newOption];
 		} else {
 			const isSame = compareArrays([newVal].flat(), selectedItems);

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

@@ -1,5 +1,8 @@
 <template>
-	<div class="bagel-input" :class="{ disabled: disabled }">
+	<div
+		class="bagel-input"
+		:class="{ disabled: disabled }"
+	>
 		<label>
 			{{ label }}
 			<div
@@ -12,12 +15,20 @@
 				@keydown.esc="reset"
 				@keydown.tab="reset"
 			>
-				<Dropdown :placement="'bottom'" @hide="open = false">
-					<span class="flex gap-05" @click="open = true">
+				<Dropdown
+					:placement="'bottom'"
+					@hide="open = false"
+					v-if="!computedDropDownOptions.hide"
+					:disabled="computedDropDownOptions.disabled"
+				>
+					<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()"
+							v-if="computedDropDownOptions.showFlags && activeCountryCode"
+							:country="activeCountryCode"
 						/>
 					</span>
 					<template #popper="{ hide }">
@@ -29,6 +40,7 @@
 								icon="search"
 								v-model="searchQuery"
 							/>
+
 							<ul
 								ref="listEl"
 								class="overflow-y p-0"
@@ -43,25 +55,30 @@
 									:key="pb.iso2 + isPreferred(pb)"
 									tabindex="-1"
 									@click="
-										() => {
-											chooseCountry(pb.iso2);
-											hide();
-										}
+										chooseCountry(pb.iso2);
+									hide();
 									"
 									@mousemove="selectedIndex = index"
-									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)"
+									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
+										"
 								>
-									<Flag v-if="dropdownOptions.showFlags" :country-code="pb.iso2.toLowerCase()" />
+									<Flag
+										v-if="computedDropDownOptions.showFlags"
+										:country="pb.iso2"
+									/>
 									<p class="tel-country">{{ pb.name }}</p>
-									<span v-if="dropdownOptions.showDialCodeInList"> +{{ pb.dialCode }} </span>
+									<span v-if="computedDropDownOptions.showDialCodeInList">
+										+{{ pb.dialCode }}
+									</span>
 								</li>
 							</ul>
 						</div>
 					</template>
 				</Dropdown>
+
 				<input
 					:required="required"
-					:placeholder="placeholder"
+					:placeholder="computedInputOptions.placeholder"
 					:disabled="disabled"
 					v-model="phone"
 					type="tel"
@@ -69,16 +86,20 @@
 					:autocomplete="autocomplete"
 					:class="['vti__input']"
 					:id="id"
-					:maxlength="inputOptions.maxlength"
-					:name="inputOptions.name"
-					:readonly="inputOptions.readonly"
-					:tabindex="inputOptions.tabindex"
-					:aria-describedby="inputOptions['aria-describedby']"
+					:pattern="computedInputOptions.pattern"
+					:minlength="computedInputOptions.minlength"
+					:maxlength="computedInputOptions.maxlength"
+					:name="computedInputOptions.name"
+					:readonly="computedInputOptions.readonly"
+					:tabindex="computedInputOptions.tabindex"
+					:aria-describedby="computedInputOptions['aria-describedby']"
 					@blur="onBlur"
 					@focus="onFocus"
 					@keyup.enter="onEnter"
 					@keyup.space="onSpace"
-				>
+					@keydown="handleInput"
+					:style="computedInputOptions.style"
+				/>
 			</div>
 		</label>
 	</div>
@@ -86,11 +107,20 @@
 
 <script lang="ts" setup>
 import {
-	Icon, Dropdown, TextInput, Flag,
-	allCountries, type Country,
+	Icon,
+	Dropdown,
+	TextInput,
+	Flag,
+	allCountries,
+	type Country,
+	debounce,
 } from '@bagelink/vue';
-import { onMounted, watch } from 'vue';
-import { parsePhoneNumberFromString, type CountryCode, type PhoneNumber } from 'libphonenumber-js';
+import { type Raw, type StyleValue, onMounted, watch } from 'vue';
+import {
+	parsePhoneNumberFromString,
+	type NumberFormat,
+	type CountryCode,
+} from 'libphonenumber-js';
 import axios from 'axios';
 
 async function getIp() {
@@ -101,28 +131,34 @@ async function getIp() {
 	return data;
 }
 
-type DropdownOptions = {
-	disabled?: boolean;
-	showFlags?: boolean;
-	showDialCodeInSelection?: boolean;
-	showDialCodeInList?: boolean;
+const defaultDropdownOptions = {
+	hide: false,
+	disabled: false,
+	showFlags: true,
+	showDialCodeInSelection: true,
+	showDialCodeInList: true,
+	searchable: true,
 };
 
-type InputOptions = {
-	autofocus?: boolean;
-	'aria-describedby'?: string;
-	maxlength?: number;
-	name?: string;
-	placeholder?: string;
-	readonly?: boolean;
-	tabindex?: number;
-	showDialCode?: boolean;
+const defaultInputOptions = {
+	showDialCode: true,
+	autofocus: false,
+	'aria-describedby': '',
+	id: '',
+	maxlength: 25,
+	minlength: 9,
+	pattern: '',
+	name: '',
+	readonly: false,
+	tabindex: 0,
+	style: '' as Raw<StyleValue>,
+	placeholder: 'Enter a phone number',
 };
 
 type Props = {
 	label?: string;
 	id?: string;
-	autocomplete?: 'on' | 'off';
+	autocomplete?: 'on' | 'off' | 'tel';
 	placeholder?: string;
 	required?: boolean;
 	modelValue: string;
@@ -133,13 +169,14 @@ type Props = {
 	disabled?: boolean;
 	searchable?: boolean;
 	autoDefaultCountry?: boolean;
-	dropdownOptions?: DropdownOptions;
+	inputOptions?: Partial<typeof defaultInputOptions>;
+	dropdownOptions?: Partial<typeof defaultDropdownOptions>;
 	excludeCountries?: string[];
-	inputOptions?: InputOptions;
-	invalidMsg?: string;
-	mode?: 'auto' | 'international' | 'national';
+	mode?: NumberFormat;
 	onlyCountries?: string[];
 	preferredCountries?: string[];
+	parseArg?: { extract?: boolean };
+	debounceDelay?: number;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -151,33 +188,27 @@ const props = withDefaults(defineProps<Props>(), {
 	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',
+	mode: 'INTERNATIONAL',
 	onlyCountries: () => [],
 	preferredCountries: () => [],
+	showDropdown: true,
+	debounceDelay: 300,
 });
 
+const computedDropDownOptions = $computed(() => ({
+	...defaultDropdownOptions,
+	...props.dropdownOptions,
+}));
+
+const computedInputOptions = $computed(() => ({
+	...defaultInputOptions,
+	...props.inputOptions,
+}));
+
 let activeCountryCode = $ref<CountryCode>();
 let open = $ref(false);
 let selectedIndex = $ref<number>();
@@ -195,53 +226,29 @@ const emit = defineEmits([
 	'country-changed',
 	'enter',
 	'space',
+	'debounce',
 ]);
 
-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 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 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()) &&
+			({ iso2 }) =>
+				!props.excludeCountries.includes(iso2.toUpperCase()) &&
 				!props.excludeCountries.includes(iso2.toLowerCase()),
 		);
 	}
@@ -252,16 +259,48 @@ const sortedCountries = $computed(() => {
 	const preferredCountries = getCountries(props.preferredCountries);
 
 	const countriesList = [...preferredCountries, ...filteredCountries];
-	const cleanInput = searchQuery.replace(/[~`!@#$%^&*()+={}\[\];:'"<>.,\/\\\?-_]/g, '');
+	const cleanInput = searchQuery.replace(
+		/[~`!@#$%^&*()+={}[\];:'"<>.,/\\?-_]/g,
+		'',
+	);
 	return countriesList
 		.filter(
-			(c) => new RegExp(cleanInput, 'i').test(c?.name || '') ||
+			(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 phone = defineModel<string>('modelValue', {
+	default: '',
+	set: (value) => {
+		const formatted = formatPhone(`${value}`);
+		if (!formatted) return '';
+
+		emit('update:modelValue', formatted);
+		debounce(() => emit('debounce', formatted), props.debounceDelay);
+		return formatted;
+	},
+});
+
+function formatPhone(val: string): string {
+	const phoneNumber = parsePhoneNumberFromString(val, parseArgs);
+	if (!phoneNumber) {
+		const dialCode =
+			sortedCountries.find((c) => c.iso2 === activeCountryCode)?.dialCode || '';
+		if (props.mode === 'INTERNATIONAL') return `+${dialCode}`;
+		return dialCode;
+	}
+	return phoneNumber.format(props.mode)?.replaceAll(' ', '') || '';
+}
+
 // Watchers
 watch(
 	() => activeCountry,
@@ -309,7 +348,8 @@ const initializeCountry = async () => {
 
 onMounted(initializeCountry);
 
-const findCountry = (iso: string) => filteredCountries.find((country) => country.iso2 === iso?.toUpperCase());
+const findCountry = (iso: string) =>
+	filteredCountries.find((country) => country.iso2 === iso?.toUpperCase());
 
 const getCountries = (list: string[]): Country[] => {
 	const countryList: Country[] = [];
@@ -320,7 +360,8 @@ const getCountries = (list: string[]): Country[] => {
 	return countryList;
 };
 
-const findCountryByDialCode = (dialCode: number) => filteredCountries.find((country) => Number(country.dialCode) === dialCode);
+const findCountryByDialCode = (dialCode: number) =>
+	filteredCountries.find((country) => Number(country.dialCode) === dialCode);
 
 const chooseCountry = (country?: string) => {
 	if (!country) return;
@@ -329,7 +370,7 @@ const chooseCountry = (country?: string) => {
 	activeCountryCode = parsedCountry.iso2;
 
 	if (props.inputOptions?.showDialCode && parsedCountry) {
-		phone = `+${parsedCountry.dialCode}`;
+		phone.value = `+ ${parsedCountry.dialCode}`;
 		activeCountryCode = parsedCountry.iso2 || '';
 		return;
 	}
@@ -342,7 +383,7 @@ const onBlur = () => emit('blur');
 
 const onFocus = () => emit('focus');
 
-const onEnter = () => emit('enter');
+const onEnter = (e: KeyboardEvent) => emit('enter');
 
 const onSpace = () => emit('space');
 
@@ -350,9 +391,22 @@ const onSpace = () => emit('space');
 
 // Method: reset
 const reset = () => {
-	selectedIndex = sortedCountries.findIndex((c) => c.iso2 === activeCountryCode);
+	selectedIndex = sortedCountries.findIndex(
+		(c) => c.iso2 === activeCountryCode,
+	);
 	open = false;
 };
+
+function handleInput(e: KeyboardEvent) {
+	const keyVal = e.key;
+	if (keyVal?.length > 1 || e.metaKey) return;
+
+	const hasBadChars = RegExp(/[^+\d]/).test(keyVal);
+
+	if (!hasBadChars) return;
+
+	e.preventDefault();
+}
 </script>
 
 <style scoped>
@@ -372,19 +426,20 @@ const reset = () => {
 	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;
@@ -394,6 +449,7 @@ const reset = () => {
 	margin-top: 0;
 	margin-bottom: 0;
 }
+
 .tel-countryp-dropdown {
 	direction: ltr;
 	text-align: left;