@bagelink/vue 0.0.439 → 0.0.441

package/src/components/Modal.vue

@@ -3,17 +3,30 @@
 		class="bg-dark"
 		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
 		@click="() => (dismissable ? closeModal() : '')"
-		@keydown.esc="closeModal">
+		@keydown.esc="closeModal"
+	>
 		<Card class="modal" @click.stop :style="{ ...maxWidth }">
-			<header class="tool-bar">
+			<header v-if="slots['toolbar'] || title" class="tool-bar">
 				<slot name="toolbar" />
 				<Btn
 					:style="{ float: side ? 'left' : 'right' }"
 					flat
 					icon="close"
-					@click="closeModal" />
+					@click="closeModal"
+				/>
 				<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">
+				<Btn
+					class="color-black"
+					:style="{ float: side ? 'left' : 'right' }"
+					icon="close"
+					thin
+					color="white"
+					@click="closeModal"
+				/>
+			</div>
 			<slot />
 			<footer v-if="slots['footer'] || actions?.length" class="modal-footer mt-3">
 				<Btn
@@ -21,7 +34,8 @@
 					:key="i"
 					@click="closeModal"
 					color="gray"
-					v-bind="action" />
+					v-bind="action"
+				/>
 				<slot name="footer" />
 			</footer>
 		</Card>
@@ -29,8 +43,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, useSlots } from 'vue';
-import { type BtnOptions, Btn, useEscape, Title, Card } from '@bagelink/vue';
+import {
+	onMounted, onUnmounted, watch, useSlots,
+} from 'vue';
+import {
+	type BtnOptions, Btn, useEscape, Title, Card,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
@@ -53,7 +71,7 @@ watch(
 		if (val) openModal();
 		else closeModal();
 	},
-	{ immediate: true }
+	{ immediate: true },
 );
 
 const maxWidth = $computed(() => {
@@ -72,8 +90,7 @@ const closeModal = () => {
 
 defineExpose({ closeModal });
 
-const escapeKeyClose = (e: KeyboardEvent) =>
-	props?.dismissable && useEscape(e, () => closeModal());
+const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
 	setTimeout(() => (isVisible = true), 1);

package/src/components/ModalForm.vue

@@ -6,7 +6,7 @@
 		:width
 		:visible="visible"
 		:dismissable
-		:title="title">
+		:title >
 		<BagelForm
 			@submit="runSubmit"
 			ref="form"

package/src/components/PageTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page-top">
-		<h1 class="top-title">
+		<h1 class="top-title m-0">
 			<slot /> {{ value }}
 		</h1>
 	</div>
@@ -19,6 +19,7 @@ defineProps({
 .top-title {
   font-weight: 600;
   font-size: 20px;
+  line-height: 1;
 }
 
 .page-top {
@@ -26,4 +27,10 @@ defineProps({
   align-items: center;
   gap: 1rem;
 }
+
+@media screen and (max-width: 910px) {
+.top-title {
+  font-size: 16px;
+}
+}
 </style>

package/src/components/TableSchema.vue

@@ -71,11 +71,32 @@ const slots = useSlots();
 const loading = $ref(true);
 
 const props = defineProps<{
+	selecteItems?: string[];
 	data: any[];
 	schema?: BglFormSchemaT | (() => BglFormSchemaT);
 	showFields?: string[];
 }>();
 
+const emit = defineEmits(['update:selecteItems', 'orderBy', 'select']);
+
+let selecteItems = $ref<string[]>(props.selecteItems || []);
+let selected = $computed({
+	get: () => selecteItems,
+	set: (value: string[]) => {
+		selecteItems = value;
+		emit('update:selecteItems', value);
+	},
+});
+
+function selectAll(event: PointerEvent) {
+	const value = (event.target as HTMLInputElement).checked;
+	if (!value) {
+		selected = [];
+		return;
+	}
+	selected.push(...computedData.map((d) => d.id));
+}
+
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
@@ -97,8 +118,6 @@ const computedSchema = $computed(() => {
 		: schema;
 });
 
-const emit = defineEmits(['select', 'orderBy']);
-
 const selectElement = (item: Record<string, any>) => emit('select', item);
 
 let sortDirection = $ref('ASC');
@@ -131,6 +150,12 @@ const computedData = $computed(() => {
 		return dta.sort((a, b) => {
 			const aValue = a[sortField];
 			const bValue = b[sortField];
+			const numAValue = parseInt(aValue);
+			const numBValue = parseInt(bValue);
+			if (!isNaN(numAValue) && !isNaN(numBValue)) {
+				if (sortDirection === 'ASC') return numAValue - numBValue;
+				return numBValue - numAValue;
+			}
 			if (typeof aValue === 'string') {
 				if (sortDirection === 'ASC') return aValue.localeCompare(bValue);
 				return bValue.localeCompare(aValue);
@@ -197,6 +222,9 @@ th {
 	height: 50px;
 	vertical-align: bottom;
 }
+.row.first-row input[type=checkbox]{
+	margin-bottom: 0.7rem;
+}
 
 .row.first-row::after {
 	content: '';
@@ -267,6 +295,10 @@ th {
 .row-item:hover {
 	background: var(--bgl-gray-light);
 }
+.row-item input[type=checkbox]{
+	margin-top: 0.45rem !important;
+	accent-color: var(--bgl-primary);
+}
 
 .infinite-wrapper {
 	overflow-y: auto;

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

@@ -14,12 +14,16 @@
 				dragover: isDragOver,
 			}"
 		>
+		<slot name="files" :files="storageFiles" :fileQueue>
 			<template v-for="file in storageFiles" :key="file.id">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="file.url" alt="" />
+				<div class="single-image" v-if="!multiple">
+					<img class="single preview" :src="file.url" alt="" />
+					<!-- <p class="no-margin">
+						{{ file.name }}
+					</p> -->
 				</div>
-				<div class="previewName">
-					<img v-if="multiple" class="preview" :src="file.url" alt="" />
+				<div class="multi-image-item previewName" v-if="multiple">
+					<img  class="preview" :src="file.url" alt="" />
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
@@ -60,6 +64,10 @@
 					</div>
 				</div>
 			</template>
+		</slot>
+			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder">
+				<p>Drop files here or click to upload</p>
+			</slot>
 		</div>
 	</div>
 </template>
@@ -224,8 +232,7 @@ const drop = (e: DragEvent) => {
 	cursor: pointer;
 	transition: var(--bgl-transition);
 	position: relative;
-	min-height: 132px;
-	max-height: 500px;
+	height: calc(var(--width) / 1.5);
 	font-size: var(--input-font-size);
 	overflow-y: auto;
 	background: var(--input-bg);
@@ -256,11 +263,24 @@ const drop = (e: DragEvent) => {
 }
 
 img.preview {
-	width: var(--width);
+	/* max-height: calc(var(--width) / 2); */
 	/* max-width: calc(var(--width) * 2); */
+	width: 40px;
+	height: 40px;
 	border-radius: var(--input-border-radius);
 	object-fit: cover;
-	background: var(--bgl-white);
+	background: var(--bgl-gray-light);
+	box-shadow: 0 0 10px #00000012;
+
+}
+
+img.preview.single{
+	max-width: var(--width);
+	width: auto;
+	object-fit: contain;
+	height: auto;
+	max-height: calc(var(--width) / 2);
+	margin: 1rem;
 }
 
 .fileUploadWrap.dragover,
@@ -276,9 +296,6 @@ img.preview {
 	color: var(--bgl-gray);
 }
 
-.bagel-input .fileUploadWrap.fileDropZone:after {
-	content: 'Drop files here or click to upload';
-}
 
 .pie {
 	width: 30px;

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

@@ -283,6 +283,12 @@ watch(
 	width: 100%;
 	font-family: inherit;
 	font-size: var(--input-font-size);
+
+}
+.selectinput-btn p{
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .selectinput-btn:disabled {

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>