@bagelink/vue 1.6.36 → 1.6.39

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.6.36",
+  "version": "1.6.39",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",
@@ -62,7 +62,8 @@
     "@types/signature_pad": "^4.0.0",
     "@vue-macros/reactivity-transform": "^1.1.6",
     "vue": "^3.5.16",
-    "vue-component-type-helpers": "^2.2.10"
+    "vue-component-type-helpers": "^2.2.10",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -70,11 +71,15 @@
     "vue-component-type-helpers": "^2.2.10",
     "vue": "*",
     "vue-draggable-next": "^2.2.1",
-    "vue-router": "*"
+    "vue-router": "*",
+    "vue-toastification": "^2"
   },
   "peerDependenciesMeta": {
     "vue-draggable-next": {
       "optional": true
+    },
+    "vue-toastification": {
+      "optional": true
     }
   },
   "publishConfig": {

package/src/components/Modal.vue

@@ -7,8 +7,6 @@ import {
 	Title
 } from '@bagelink/vue'
 import {
-	onMounted,
-	onUnmounted,
 	useSlots,
 	watch
 } from 'vue'
@@ -43,27 +41,27 @@ let isVisible = $ref<boolean>(false)
 watch(
 	() => props.visible,
 	(val) => {
-		if (val === isVisible || val === undefined) {return}
-		if (val) {openModal()}
-		else {closeModal()}
+		if (val === isVisible || val === undefined) { return }
+		if (val) { openModal() }
+		else { closeModal() }
 	},
 	{ immediate: true },
 )
 
 const maxWidth = $computed(() => {
 	const { width } = props
-	if (width?.match(/px|em|rem|vw|vh|%/)) {return { 'max-width': width }}
-	if (width?.match(/\d+/)) {return { 'max-width': `${width}px` }}
+	if (width?.match(/px|em|rem|vw|vh|%/)) { return { 'max-width': width } }
+	if (width?.match(/\d+/)) { return { 'max-width': `${width}px` } }
 	return { 'max-width': '720px' }
 })
 
 // Computed properties for close button placement
-const isOverlay = $computed(() => 'overlay' === props.closePlacement || 'overlay-end' === props.closePlacement)
-const isHeader = $computed(() => 'header' === props.closePlacement || 'header-end' === props.closePlacement)
-const isFooter = $computed(() => 'footer' === props.closePlacement)
+const isOverlay = $computed(() => props.closePlacement === 'overlay' || props.closePlacement === 'overlay-end')
+const isHeader = $computed(() => props.closePlacement === 'header' || props.closePlacement === 'header-end')
+const isFooter = $computed(() => props.closePlacement === 'footer')
 
 const overlayCloseClass = $computed(() => {
-	if ('overlay-end' === props.closePlacement) {return 'top-1 end-1'}
+	if (props.closePlacement === 'overlay-end') { return 'top-1 end-1' }
 	return 'top-1 start-1'
 })
 
@@ -74,21 +72,11 @@ function closeModal() {
 
 defineExpose({ closeModal })
 
-function escapeKeyClose(e: KeyboardEvent) {
-	if (props.dismissable && 'Escape' === e.key) {
-		closeModal()
-	}
-}
-
 function openModal() {
 	setTimeout(() => (isVisible = true), 1)
 }
 
-onMounted(() => { document.addEventListener('keydown', escapeKeyClose) })
-
-onUnmounted(() => {
-	document.removeEventListener('keydown', escapeKeyClose)
-})
+// Note: ESC key handling is now done centrally in ModalPlugin for proper stacking behavior
 </script>
 
 <template>

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

@@ -103,7 +103,7 @@ const input = $ref<HTMLInputElement>()
 
 // Use custom validation function
 function validateEmail(value: string) {
-	if (!value) {return}
+	if (!value) { return }
 
 	// Basic format validation
 	if (!EMAIL_REGEX.test(value)) {
@@ -133,19 +133,19 @@ const debouncedEmit = useDebounceFn(() => { emit('debounce', inputVal) }, 700)
 
 // Validate input directly when value changes
 function validateInput() {
-	if (!input) {return}
+	if (!input) { return }
 
 	input.setCustomValidity('')
-	if (!inputVal) {return}
+	if (!inputVal) { return }
 	const validationResult = validateEmail(inputVal)
-	if ('string' === typeof validationResult) {
+	if (typeof validationResult === 'string') {
 		input.setCustomValidity(validationResult)
 	}
 }
 
 // Perform server validation of email
 async function validateEmailWithServer(email: string) {
-	if (!props.serverValidate || !email || !EMAIL_REGEX.test(email)) {return}
+	if (!props.serverValidate || !email || !EMAIL_REGEX.test(email)) { return }
 
 	// If we've already validated this email, use cached result
 	if (validatedEmails.has(email)) {
@@ -163,10 +163,10 @@ async function validateEmailWithServer(email: string) {
 			headers: { 'Content-Type': 'application/json' }
 		})
 
-		if (!response.ok) {throw new Error('Validation service unavailable')}
+		if (!response.ok) { throw new Error('Validation service unavailable') }
 
 		const result = await response.json()
-		const isValid = 'valid' === result.status || true === result.has_mx
+		const isValid = result.status === 'valid' || result.has_mx === true
 
 		isValidEmail.value = isValid
 		validatedEmails.set(email, isValid)
@@ -186,7 +186,7 @@ async function validateEmailWithServer(email: string) {
 
 // Check for email typos and suggest corrections
 function checkForTypos(email: string) {
-	if (!props.autocorrect || !email) {return}
+	if (!props.autocorrect || !email) { return }
 
 	// Handle case where domain is incomplete (missing TLD)
 	if (email.includes('@') && !email.includes('.')) {
@@ -203,7 +203,7 @@ function checkForTypos(email: string) {
 	}
 
 	// Standard typo checking for complete emails
-	if (!email.includes('@')) {return}
+	if (!email.includes('@')) { return }
 
 	const [username, domain] = email.split('@')
 	const domainLower = domain.toLowerCase()
@@ -216,7 +216,7 @@ function checkForTypos(email: string) {
 
 	// Find close matches using Levenshtein distance
 	for (const commonDomain of COMMON_EMAIL_DOMAINS) {
-		if (2 >= calculateLevenshteinDistance(domainLower, commonDomain)) {
+		if (calculateLevenshteinDistance(domainLower, commonDomain) <= 2) {
 			suggestedCorrection.value = `${username}@${commonDomain}`.toLowerCase()
 			return
 		}
@@ -265,7 +265,7 @@ function calculateLevenshteinDistance(a: string, b: string): number {
 const debouncedServerValidate = useDebounceFn(() => validateEmailWithServer(inputVal), 1000)
 
 function updateInputVal() {
-	if (props.disabled) {return}
+	if (props.disabled) { return }
 
 	// Remove typo checking while typing - only do this on focusout now
 	// checkForTypos(inputVal)
@@ -293,7 +293,7 @@ function handleFocusout(e: FocusEvent) {
 		validateEmailWithServer(inputVal)
 	}
 
-	if (props.onFocusout) {props.onFocusout(e)}
+	if (props.onFocusout) { props.onFocusout(e) }
 }
 
 watch(
@@ -318,30 +318,27 @@ const focus = () => input?.focus()
 defineExpose({ focus, hasFocus })
 
 onMounted(() => {
-	if (props.autofocus) {setTimeout(() => input?.focus(), 10)}
+	if (props.autofocus) { setTimeout(() => input?.focus(), 10) }
 	// Don't auto-restore defaultValue - let user control their own content
 })
 </script>
 
 <template>
 	<div
-		class="bagel-input text-input"
-		:class="{
+		class="bagel-input text-input" :class="{
 			small,
 			shrink,
 			'textInputIconWrap': icon,
 			'txtInputIconStart': iconStart,
 			'is-validating': isValidating,
-		}"
-		:title="title"
+		}" :title="title"
 	>
 		<label :for="id">
 			<div class="flex">
 				{{ label }} <span v-if="required">*</span>
 				<span v-if="helptext" class="opacity-7 light">{{ helptext }}</span>
 				<span
-					v-if="suggestedCorrection"
-					class="pointer nowrap inline-block ms-auto color-red txt-10px p-0"
+					v-if="suggestedCorrection" class="pointer nowrap inline-block ms-auto color-red txt-10px p-0"
 					@click.prevent="applyCorrection"
 				>
 					did you mean {{ suggestedCorrection }}?
@@ -349,32 +346,12 @@ onMounted(() => {
 				<span v-if="isValidating" class="validating">Validating email...</span>
 			</div>
 			<input
-				:id
-				ref="input"
-				v-model="inputVal"
-				v-pattern:lower
-				class="ltr"
-				:name
-				:title
-				autocomplete="email"
-				type="email"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				v-bind="nativeInputAttrs"
-				@focusout="handleFocusout"
-				@focus="onFocus"
-				@input="updateInputVal"
+				:id ref="input" v-model="inputVal" v-pattern:lower class="ltr" :name :title autocomplete="email"
+				type="email" :placeholder="placeholder || label" :disabled :required v-bind="nativeInputAttrs"
+				@focusout="handleFocusout" @focus="onFocus" @input="updateInputVal"
 			>
-			<Icon
-				v-if="iconStart"
-				class="iconStart"
-				:icon="iconStart"
-			/>
-			<Icon
-				v-if="icon"
-				:icon="icon"
-			/>
+			<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
+			<Icon v-if="icon" :icon="icon" />
 		</label>
 	</div>
 </template>
@@ -406,6 +383,7 @@ onMounted(() => {
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
+
 .code textarea::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
@@ -433,22 +411,25 @@ onMounted(() => {
 .textInputIconWrap .bgl_icon-font {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
+	inset-inline-end: calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input{
+
+.textInputIconWrap input {
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 );
+	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
 }
-.txtInputIconStart input, .txtInputIconStart textarea{
+
+.txtInputIconStart input,
+.txtInputIconStart textarea {
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
 

package/src/composables/index.ts

@@ -24,7 +24,7 @@ export function useBglSchema<T = { [key: string]: unknown }>(
 
 	if (_schema) {
 		return (
-			_columns && 0 < _columns.length
+			_columns && _columns.length > 0
 				? _schema.filter(f => _columns.includes(f.id as string))
 				: _schema
 		) as BglFormSchemaT<T>
@@ -39,7 +39,7 @@ export function localRef<T>(
 		IfAny<T, Ref<T, T>, T> :
 		Ref<UnwrapRef<T>, T | UnwrapRef<T>> {
 	const storedValue = localStorage.getItem(key)
-	const initial = null !== storedValue ? JSON.parse(storedValue) : initialValue
+	const initial = storedValue !== null ? JSON.parse(storedValue) : initialValue
 	const value = ref<T>(initial)
 
 	watch(() => value.value, (val) => {

package/src/index.ts

@@ -9,6 +9,7 @@ export {
 	injectI18nT,
 } from './plugins/bagel'
 export { ModalPlugin, useModal } from './plugins/useModal'
+export { type BagelToastOptions, type ToastApi, ToastPlugin, useToast } from './plugins/useToast'
 export * from './types'
 export * from './utils'
 export * from './utils/allCountries'

package/src/plugins/useModal.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey, Plugin } from 'vue'
+import type { App, InjectionKey, Plugin } from 'vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 import type {
 	ModalComponentProps,
@@ -9,7 +9,7 @@ import type {
 	ConfirmModalUserOptions,
 	ModalConfirmOptions
 } from './modalTypes'
-import { defineComponent, h, inject, reactive } from 'vue'
+import { createApp, defineComponent, h, inject, reactive } from 'vue'
 import { Modal, ModalConfirm, ModalForm } from '../components'
 
 export interface ModalApi {
@@ -23,29 +23,49 @@ export interface ModalApi {
 	) => ModalFormComponentProps<T> | undefined
 	hideModal: (index?: number) => void
 	confirmModal: (options: ConfirmModalUserOptions) => Promise<boolean>
+	hideAllModals: () => void
 }
 
 export const ModalSymbol: InjectionKey<ModalApi> = Symbol('modal')
 
+// Global singleton instance as fallback (created on first plugin install)
+let globalModalApi: ModalApi | null = null
+
 export function useModal(): ModalApi {
-	const modalApi = inject(ModalSymbol)
-	if (!modalApi) {throw new Error('Modal API not provided')}
+	const modalApi = inject(ModalSymbol, null)
+	if (!modalApi) {
+		// Fallback to global singleton if injection fails
+		if (globalModalApi) {
+			return globalModalApi
+		}
+		throw new Error('Modal API not provided. Make sure ModalPlugin is installed via app.use(ModalPlugin)')
+	}
 	return modalApi
 }
 
 export const ModalPlugin: Plugin = {
-	install: (app) => {
+	install: (app: App) => {
+		const BASE_Z_INDEX = 1000
 		const modalStack = reactive<ModalComponentProps<object>[]>([])
 
-		const hideModal = (index: number) => {
-			modalStack.splice(index, 1)
+		const hideModal = (index?: number) => {
+			if (index === undefined || index >= modalStack.length - 1) {
+				// Close top modal
+				modalStack.splice(modalStack.length - 1, 1)
+			} else {
+				modalStack.splice(index, 1)
+			}
+		}
+
+		const hideAllModals = () => {
+			modalStack.splice(0, modalStack.length)
 		}
 
 		const confirmModal = (options: ConfirmModalUserOptions): Promise<boolean> => {
 			return new Promise((resolve) => {
-				const confirmOptions = 'string' === typeof options ? { title: '', message: options } : options
+				const confirmOptions = typeof options === 'string' ? { title: '', message: options } : options
 				modalStack.push({
-					modalOptions: { ...confirmOptions, resolve },
+					modalOptions: reactive({ ...confirmOptions, resolve }),
 					modalType: 'confirmModal',
 					componentSlots: {},
 				})
@@ -57,20 +77,23 @@ export const ModalPlugin: Plugin = {
 			options: ModalOptions | ModalFormOptions<T>,
 			slots: { [key: string]: any } = {}
 		): ModalComponentProps<T> | ModalFormComponentProps<T> | undefined => {
+			// Make options reactive so updates propagate
+			const reactiveOptions = reactive(options) as ModalOptions | ModalFormOptions<T>
+
 			const modalComponent = {
-				modalOptions: options,
+				modalOptions: reactiveOptions,
 				modalType,
 				componentSlots: slots,
 			}
 			modalStack.push(modalComponent)
 
-			if ('modalForm' === modalType) {
+			if (modalType === 'modalForm') {
 				return modalComponent as ModalFormComponentProps<T>
 			}
 			return modalComponent
 		}
 
-		app.provide(ModalSymbol, {
+		const api: ModalApi = {
 			showModal: (options: ModalOptions, slots?: { [key: string]: any }) => showModal('modal', options, slots),
 
 			showModalForm: <T extends { [key: string]: any }>(
@@ -80,16 +103,54 @@ export const ModalPlugin: Plugin = {
 
 			confirmModal: (options: ConfirmModalUserOptions) => confirmModal(options),
 
-			hideModal: (index = modalStack.length - 1) => { hideModal(index) },
-		})
+			hideModal,
+
+			hideAllModals,
+		}
+
+		// Set global singleton on first install
+		if (!globalModalApi) {
+			globalModalApi = api
+		}
+
+		app.provide(ModalSymbol, api)
+
+		// Modal container component
+		const ModalContainerComponent = defineComponent({
+			name: 'ModalContainer',
+			setup() {
+				// Handle ESC key - only close top modal
+				const handleEscape = (e: KeyboardEvent) => {
+					if (e.key === 'Escape' && modalStack.length > 0) {
+						const topModal = modalStack[modalStack.length - 1]
+						// Check if top modal is dismissable
+						const modalOptions = topModal.modalOptions as ModalOptions
+						if (modalOptions.dismissable !== false) {
+							hideModal()
+						}
+					}
+				}
 
-		const ModalComponent = defineComponent({
-			data: () => ({ modalStack }),
+				return {
+					modalStack,
+					handleEscape,
+				}
+			},
+			mounted() {
+				document.addEventListener('keydown', this.handleEscape)
+			},
+			unmounted() {
+				document.removeEventListener('keydown', this.handleEscape)
+			},
 			render() {
 				return this.modalStack.map((modal, index) => {
+					// Calculate z-index based on stack position
+					const zIndex = BASE_Z_INDEX + index * 10
+
 					const props = {
 						...modal.modalOptions,
 						'visible': true,
+						'zIndex': zIndex,
 						'onUpdate:visible': () => { hideModal(index) },
 					}
 
@@ -104,6 +165,36 @@ export const ModalPlugin: Plugin = {
 				})
 			},
 		})
-		app.component('ModalContainer', ModalComponent)
+
+		// Register the component so users can manually add it if needed
+		app.component('ModalContainer', ModalContainerComponent)
+
+		// Auto-mount modal container to document.body
+		if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+			// Wait for app to be mounted before injecting
+			app.mixin({
+				mounted() {
+					// Only run once on the root component
+					if (this.$root === this) {
+						const existingContainer = document.getElementById('bagelink-modal-root')
+						if (!existingContainer) {
+							// Create mount point
+							const container = document.createElement('div')
+							container.id = 'bagelink-modal-root'
+							document.body.appendChild(container)
+
+							// Create a separate app instance for modals to avoid context issues
+							const modalApp = createApp(ModalContainerComponent)
+
+							// Share the same context/plugins
+							modalApp._context = app._context
+
+							// Mount it
+							modalApp.mount(container)
+						}
+					}
+				}
+			})
+		}
 	},
 }

package/src/plugins/useToast.ts

@@ -0,0 +1,92 @@
+import type { App, InjectionKey, Plugin } from 'vue'
+import { inject } from 'vue'
+import {
+	type PluginOptions as ToastOptions,
+	type ToastInterface,
+	POSITION,
+} from 'vue-toastification'
+
+export interface ToastApi {
+	success: (message: string, options?: any) => void
+	error: (message: string, options?: any) => void
+	info: (message: string, options?: any) => void
+	warning: (message: string, options?: any) => void
+	show: (message: string, options?: any) => void
+	clear: () => void
+}
+
+export const ToastSymbol: InjectionKey<ToastApi> = Symbol('toast')
+
+// Global singleton instance as fallback (created on first plugin install)
+let globalToastApi: ToastApi | null = null
+
+export function useToast(): ToastApi {
+	const toastApi = inject(ToastSymbol, null)
+	if (!toastApi) {
+		// Fallback to global singleton if injection fails
+		if (globalToastApi) {
+			return globalToastApi
+		}
+		throw new Error('Toast API not provided. Make sure ToastPlugin is installed via app.use(ToastPlugin)')
+	}
+	return toastApi
+}
+
+export type BagelToastOptions = Partial<ToastOptions>
+
+export const ToastPlugin: Plugin<BagelToastOptions[]> = {
+	install: async (app: App, options: BagelToastOptions = {}) => {
+		try {
+			// Dynamically import vue-toastification to avoid bundling if not used
+			const Toast = await import('vue-toastification')
+			const ToastInterface = Toast.default || Toast
+
+			const defaultOptions: ToastOptions = {
+				position: POSITION.TOP_RIGHT,
+				timeout: 3000,
+				closeOnClick: true,
+				pauseOnFocusLoss: true,
+				pauseOnHover: true,
+				draggable: true,
+				draggablePercent: 0.6,
+				showCloseButtonOnHover: false,
+				hideProgressBar: false,
+				closeButton: 'button',
+				icon: true,
+				rtl: false,
+				transition: 'Vue-Toastification__fade',
+				maxToasts: 5,
+				newestOnTop: true,
+				...options,
+			}
+
+			// Install vue-toastification
+			app.use(ToastInterface as Plugin, defaultOptions)
+
+			// Get the toast instance
+			const toast: ToastInterface = app.config.globalProperties.$toast
+
+			// Create the API wrapper
+			const api: ToastApi = {
+				success: (message: string, options?: any) => toast.success(message, options),
+				error: (message: string, options?: any) => toast.error(message, options),
+				info: (message: string, options?: any) => toast.info(message, options),
+				warning: (message: string, options?: any) => toast.warning(message, options),
+				show: (message: string, options?: any) => toast(message, options),
+				clear: () => { toast.clear() },
+			}
+
+			// Set global singleton on first install
+			if (!globalToastApi) {
+				globalToastApi = api
+			}
+
+			app.provide(ToastSymbol, api)
+		} catch (error) {
+			console.error('Failed to load vue-toastification. Make sure it is installed:', error)
+			throw new Error(
+				'vue-toastification is required for ToastPlugin. Install it with: pnpm add vue-toastification'
+			)
+		}
+	},
+}