@bagelink/vue 1.9.88 → 1.9.92

package/dist/utils/index.d.ts

@@ -1,4 +1,14 @@
 import { Attributes, BglFormSchemaT, Path } from '../types/BagelForm';
+/**
+ * Returns a singleton popover container that lives in the browser's top layer.
+ * Popovers rendered inside it will appear above showModal() dialogs.
+ */
+export declare function getTopLayerContainer(): HTMLElement | string;
+/**
+ * Re-stacks the top-layer container above any currently open dialogs.
+ * Call this just before showing a popper/dropdown.
+ */
+export declare function restackTopLayerContainer(): void;
 export declare function debounce(fn: () => void, wait?: number): void;
 export declare function slugify(str: string): string;
 export declare function keyToLabel(key?: string): string | undefined;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.88",
+  "version": "1.9.92",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Dropdown.vue

@@ -2,7 +2,7 @@
 import type { IconType, ThemeType } from '@bagelink/vue'
 import type { TriggerEvent } from 'floating-vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
-import { Btn, useDevice } from '@bagelink/vue'
+import { Btn, useDevice, getTopLayerContainer, restackTopLayerContainer } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
 import { computed, ref } from 'vue'
 
@@ -191,7 +191,13 @@ const computedPopperHideTriggers = computed((): TriggerEvent[] => {
 
 const computedAutoHide = computed(() => autoHide)
 
-const container = computed(() => 'body')
+const container = computed(() => getTopLayerContainer())
+
+function onShow() {
+	// Re-stack the container above any dialog that opened after it
+	restackTopLayerContainer()
+	emit('show')
+}
 
 const computedDelay = computed((): number | { show: number, hide: number } | undefined => {
 	if (delay !== undefined) { return delay }
@@ -213,7 +219,7 @@ defineExpose({ show, hide, shown })
 		:showTriggers="computedShowTriggers" :hideTriggers="computedHideTriggers"
 		:popperTriggers="computedPopperTriggers" :popperShowTriggers="computedPopperShowTriggers"
 		:popperHideTriggers="computedPopperHideTriggers" :showGroup="showGroup" :container="container"
-		@hide="emit('hide')" @show="emit('show')"
+		@hide="emit('hide')" @show="onShow"
 	>
 		<div ref="triggerRef" />
 		<slot name="trigger" :show :hide :shown>

package/src/plugins/useToast.ts

@@ -38,20 +38,24 @@ export function useToast(): ToastApi {
 
 export type BagelToastOptions = Partial<ToastOptions>
 
-function createToastContainer(): HTMLElement | undefined {
+function getToastContainer(): HTMLElement | undefined {
 	if (typeof document === 'undefined') return undefined
-	const el = document.createElement('div')
-	el.setAttribute('popover', 'manual')
-	el.setAttribute('id', 'bgl-toast-container')
-	document.body.appendChild(el)
-	// Promote to top layer so toasts appear above showModal() dialogs
-	;(el as any).showPopover?.()
+	let el = document.getElementById('bgl-toast-container')
+	if (!el) {
+		el = document.createElement('div')
+		el.setAttribute('popover', 'manual')
+		el.setAttribute('id', 'bgl-toast-container')
+		document.body.appendChild(el)
+	}
+	// Re-stack on top of any open dialogs
+	try { (el as any).hidePopover() } catch {}
+	try { (el as any).showPopover() } catch {}
 	return el
 }
 
 export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 	install: (app: App, options: BagelToastOptions = {}) => {
-		const container = createToastContainer()
+		const container = getToastContainer()
 
 		const defaultOptions: ToastOptions = {
 			position: POSITION.TOP_RIGHT,
@@ -78,9 +82,18 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 		// Install vue-toastification
 		app.use(Toast, defaultOptions)
 
+		function restackToastContainer() {
+			const el = typeof document !== 'undefined' ? document.getElementById('bgl-toast-container') : null
+			if (el) {
+				try { (el as any).hidePopover() } catch {}
+				try { (el as any).showPopover() } catch {}
+			}
+		}
+
 		// Create the API wrapper using lazy evaluation
 		const api: ToastApi = {
 			success: (message: string, opts?: any) => {
+				restackToastContainer()
 				const toast = useVueToast()
 				return toast({
 					component: CustomToast,
@@ -91,6 +104,7 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 				}, opts)
 			},
 			error: (message: string, opts?: any) => {
+				restackToastContainer()
 				const toast = useVueToast()
 				return toast({
 					component: CustomToast,
@@ -101,6 +115,7 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 				}, opts)
 			},
 			info: (message: string, opts?: any) => {
+				restackToastContainer()
 				const toast = useVueToast()
 				return toast({
 					component: CustomToast,
@@ -111,6 +126,7 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 				}, opts)
 			},
 			warning: (message: string, opts?: any) => {
+				restackToastContainer()
 				const toast = useVueToast()
 				return toast({
 					component: CustomToast,
@@ -121,6 +137,7 @@ export const ToastPlugin: Plugin<BagelToastOptions[]> = {
 				}, opts)
 			},
 			show: (message: string, opts?: any) => {
+				restackToastContainer()
 				const toast = useVueToast()
 				return toast({
 					component: CustomToast,

package/src/styles/toast-overrides.css

@@ -1,10 +1,17 @@
-/* Reset popover container used to promote toasts above showModal() dialogs */
-#bgl-toast-container {
+/* Reset popover containers used to promote elements above showModal() dialogs */
+#bgl-toast-container,
+#bgl-toplayer-container {
 	all: unset;
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
 	pointer-events: none;
+	overflow: visible;
 }
 
-#bgl-toast-container > * {
+#bgl-toast-container > *,
+#bgl-toplayer-container > * {
 	pointer-events: auto;
 }
 

package/src/utils/index.ts

@@ -1,5 +1,33 @@
 import type { Attributes, BglFormSchemaT, Path } from '../types/BagelForm'
 
+/**
+ * Returns a singleton popover container that lives in the browser's top layer.
+ * Popovers rendered inside it will appear above showModal() dialogs.
+ */
+export function getTopLayerContainer(): HTMLElement | string {
+	if (typeof document === 'undefined') return 'body'
+	let el = document.getElementById('bgl-toplayer-container')
+	if (!el) {
+		el = document.createElement('div')
+		el.id = 'bgl-toplayer-container'
+		el.setAttribute('popover', 'manual')
+		document.body.appendChild(el)
+	}
+	return el
+}
+
+/**
+ * Re-stacks the top-layer container above any currently open dialogs.
+ * Call this just before showing a popper/dropdown.
+ */
+export function restackTopLayerContainer(): void {
+	if (typeof document === 'undefined') return
+	const el = document.getElementById('bgl-toplayer-container')
+	if (!el) return
+	try { (el as any).hidePopover() } catch {}
+	try { (el as any).showPopover() } catch {}
+}
+
 const debouncers = new Map<() => void, ReturnType<typeof setTimeout>>()
 
 export function debounce(fn: () => void, wait: number = 500) {