@bagelink/vue 1.9.96 → 1.9.102

package/package.json

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

package/src/components/layout/AppSidebar.vue

@@ -176,19 +176,13 @@ const sidebarStyles = computed(() => {
 			<!-- Navigation Links -->
 			<nav class="sidebar-nav flex column flex-stretch gap-025 align-items-start scrollbar-gutter-stable">
 				<Btn
-					v-for="link in props.navLinks"
-					:key="link.to"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''"
-					fullWidth
-					alignTxt="start"
-					class="flex-shrink-0 px-1"
-					:class="{ 'nav-btn-active': isActiveRoute(link) }"
+					v-for="link in props.navLinks" :key="link.to"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''" fullWidth
+					alignTxt="start" class="flex-shrink-0 px-1" :class="{ 'nav-btn-active': isActiveRoute(link) }"
 					:style="{
 						backgroundColor: isActiveRoute(link) ? props.activeColor : props.bgColor,
 						color: isActiveRoute(link) ? 'white' : props.textColor,
-					}"
-					:to="link.to || '/'"
-					@click="link.action"
+					}" :to="link.to || '/'" @click="link.action"
 				>
 					<Icon :name="link.icon" size="1.2" />
 					<span class="nav-text">
@@ -200,16 +194,9 @@ const sidebarStyles = computed(() => {
 			<div class="sidebar-footer flex column flex-stretch gap-025 align-items-start mt-auto">
 				<!-- Footer Links -->
 				<Btn
-					v-for="link in props.footerLinks"
-					:key="link.to || link.label"
-					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''"
-					alignTxt="start"
-					fullWidth
-					flat
-					:icon="link.icon"
-					class="flex-shrink-0 px-1"
-					:to="link.to"
-					@click="link.action"
+					v-for="link in props.footerLinks" :key="link.to || link.label"
+					:title="!menuState.isOpen.value && !menuState.isMobile.value ? link.label : ''" alignTxt="start"
+					fullWidth flat :icon="link.icon" class="flex-shrink-0 px-1" :to="link.to" @click="link.action"
 				>
 					<span class="nav-text">
 						{{ link.label }}

package/src/dialog/Dialog.vue

@@ -105,9 +105,8 @@ defineExpose({ close })
 <template>
 	<dialog
 		ref="dialogRef" :class="[positionClass, { 'is-closing': isClosing }]"
-		:style="{ '--dialog-width': widthStyle }" class="border-none overflow-hidden shadow-30 p-0 testMe1" @click="onBackdropClick"
-		@cancel="onCancel"
-		@animationend="onAnimationEnd"
+		:style="{ '--dialog-width': widthStyle }" class="border-none overflow-hidden shadow-30 p-0 testMe1"
+		@click="onBackdropClick" @cancel="onCancel" @animationend="onAnimationEnd"
 	>
 		<div class="grid grid-dialog h-100p max-height-100-2" @click.stop>
 			<!-- Header -->
@@ -115,28 +114,43 @@ defineExpose({ close })
 				v-if="title || dismissable" class="flex space-between flex-shrink-0 align-items-start gap-05"
 				:class="{ 'border-bottom': !flat, 'border-none': !title, 'm_ps-1': title, 'p-05 m_p-05': !title, 'ps-1-5 pe-1 py-1 ': !thin && title, 'ps-1 pe-05 py-05': thin && title }"
 			>
-				<Btn v-if="dismissable && closePlacement === 'header-start'" flat icon="close" aria-label="Close" class="dialog-close" thin @click="close" />
-
-				<h3 v-if="title" class="dialog-title m-0 txt20 semi w-100p word-break-all" :class="{ 'txt-center': centerTitle }">
+				<Btn
+					v-if="dismissable && closePlacement === 'header-start'" flat icon="close" aria-label="Close"
+					class="dialog-close" thin @click="close"
+				/>
+				<h3
+					v-if="title" class="dialog-title m-0 txt20 semi w-100p word-break-all"
+					:class="{ 'txt-center': centerTitle }"
+				>
 					{{ title }}
 				</h3>
 				<div v-if="!title" class="flex-grow-1" />
-				<Btn v-if="dismissable && closePlacement === 'header-end'" flat icon="close" aria-label="Close" class="dialog-close" thin @click="close" />
+				<Btn
+					v-if="dismissable && closePlacement === 'header-end'" flat icon="close" aria-label="Close"
+					class="dialog-close" thin @click="close"
+				/>
 			</header>
-
 			<!-- Body -->
 			<div class="overflow-y flex-grow-1 m_p-1" :class="{ 'px-1 py-05': thin, 'px-1-5 py-1': !thin }">
 				<slot />
 			</div>
-
 			<!-- Footer -->
-			<footer v-if="$slots.footer" class="flex flex-shrink-0 gap-05 m_px-05 m_py-05 justify-content-end" :class="{ 'border-top': !flat, 'px-05 py-05': thin, 'px-1-5 py-1': !thin }">
+			<footer
+				v-if="$slots.footer" class="flex flex-shrink-0 gap-05 m_px-05 m_py-05 justify-content-end"
+				:class="{ 'border-top': !flat, 'px-05 py-05': thin, 'px-1-5 py-1': !thin }"
+			>
 				<slot name="footer" />
 			</footer>
 		</div>
 		<!-- Overlay close buttons -->
-		<Btn v-if="dismissable && closePlacement === 'overlay-start' && overlayButtonsVisible" icon="close" aria-label="Close" class="fixed top-1 start-1 z-999 overlay-btn" @click="close" />
-		<Btn v-if="dismissable && closePlacement === 'overlay-end' && overlayButtonsVisible" icon="close" aria-label="Close" class="fixed top-1 end-1 z-999 overlay-btn" @click="close" />
+		<Btn
+			v-if="dismissable && closePlacement === 'overlay-start' && overlayButtonsVisible" icon="close"
+			aria-label="Close" class="fixed top-1 start-1 z-999 overlay-btn" @click="close"
+		/>
+		<Btn
+			v-if="dismissable && closePlacement === 'overlay-end' && overlayButtonsVisible" icon="close"
+			aria-label="Close" class="fixed top-1 end-1 z-999 overlay-btn" @click="close"
+		/>
 	</dialog>
 </template>
 
@@ -194,6 +208,7 @@ dialog.dialog-center[open] {
 dialog.dialog-center.is-closing {
 	animation: scale-fade-out 0.15s ease-in forwards;
 }
+
 dialog.dialog-right[open] {
 	animation: slide-in-right 0.25s ease-out;
 }
@@ -209,6 +224,7 @@ dialog.dialog-left[open] {
 dialog.dialog-left.is-closing {
 	animation: slide-out-left 0.2s ease-in forwards;
 }
+
 /* Keyframes - shared and reusable */
 @keyframes fade-in {
 	from {
@@ -224,6 +240,7 @@ dialog.dialog-left.is-closing {
 	from {
 		opacity: 1;
 	}
+
 	to {
 		opacity: 0;
 	}
@@ -234,6 +251,7 @@ dialog.dialog-left.is-closing {
 		opacity: 0;
 		transform: scale(0.95) translateY(10px);
 	}
+
 	to {
 		opacity: 1;
 		transform: scale(1) translateY(0);
@@ -245,6 +263,7 @@ dialog.dialog-left.is-closing {
 		opacity: 1;
 		transform: scale(1) translateY(0);
 	}
+
 	to {
 		opacity: 0;
 		transform: scale(0.95) translateY(10px);
@@ -252,23 +271,51 @@ dialog.dialog-left.is-closing {
 }
 
 @keyframes slide-in-right {
-	from { opacity: 0; transform: translateX(100%); }
-	to { opacity: 1; transform: translateX(0); }
+	from {
+		opacity: 0;
+		transform: translateX(100%);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 
 @keyframes slide-out-right {
-	from { opacity: 1; transform: translateX(0); }
-	to { opacity: 0; transform: translateX(100%); }
+	from {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	to {
+		opacity: 0;
+		transform: translateX(100%);
+	}
 }
 
 @keyframes slide-in-left {
-	from { opacity: 0; transform: translateX(-100%); }
-	to { opacity: 1; transform: translateX(0); }
+	from {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
 }
 
 @keyframes slide-out-left {
-	from { opacity: 1; transform: translateX(0); }
-	to { opacity: 0; transform: translateX(-100%); }
+	from {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	to {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
 }
 
 /* Full width adjustments */
@@ -284,6 +331,7 @@ dialog.dialog-right[style*="--dialog-width: 100%"] {
 
 /* Mobile adjustments */
 @media screen and (max-width: 910px) {
+
 	dialog.dialog-left .grid-dialog,
 	dialog.dialog-right .grid-dialog {
 		max-height: 100vh;

package/src/plugins/bagel.ts

@@ -41,7 +41,7 @@ export const BagelVue: Plugin<BagelOptions> = {
 
 		// Setup i18n
 		const i18n = createI18n(options.i18n || {})
-		app.use(i18n)
+		app.use(i18n as any)
 	},
 }
 

package/src/styles/toast-overrides.css

@@ -2,17 +2,13 @@
 #bgl-toast-container,
 #bgl-toplayer-container {
 	all: unset;
+	display: block;
 	position: fixed;
-	inset: 0;
-	width: 100%;
-	height: 100%;
+	top: 0;
+	left: 0;
+	width: 0;
+	height: 0;
 	overflow: visible;
-	pointer-events: none;
-}
-
-#bgl-toast-container *,
-#bgl-toplayer-container * {
-	pointer-events: auto;
 }
 
 /* Override vue-toastification default styles */

package/vite.config.ts

@@ -7,6 +7,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 
 const indexDir = resolve(import.meta.dirname, 'src')
 
+// @ts-ignore - rolldown-vite in root workspace causes plugin type mismatch; build is unaffected
 export default defineConfig(() => ({
 	plugins: [
 		tsconfigPaths({ root: indexDir, }),