@bagelink/vue 1.12.61 → 1.12.67

package/package.json

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

package/src/components/Btn.vue

@@ -4,7 +4,7 @@ import type { SetupContext } from 'vue'
 import { Icon, Loading, useModal, useI18n, resolveI18n } from '@bagelink/vue'
 import { useSlots, ref, onMounted, onUnmounted, computed } from 'vue'
 import { RouterLink } from 'vue-router'
-
+defineOptions({ name: 'BglBtn' })
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
@@ -23,7 +23,7 @@ const props = withDefaults(
 		loading?: boolean
 		role?: string
 		value?: TranslatableString
-		to?: string
+		to?: string | Record<string, any>
 		href?: string
 		round?: boolean
 		is?: string

package/src/components/IframeVue.vue

@@ -58,15 +58,16 @@ defineExpose({ contentWindow })
 		ref="iframe"
 		:src
 		:title
-		frameborder="none"
-		:width
-		:height
+		frameborder="0"
+		:width="width ?? '100%'"
+		:height="height ?? '100%'"
 		allowpaymentrequest="true"
 		:marginwidth
 		:marginheight
 		:csp
 		:scrolling
 		:srcset
+		style="display:block; border:none;"
 		@load="$event => emit('load', $event)"
 	/>
 </template>

package/src/components/Menu.vue

@@ -43,8 +43,13 @@ defineProps<{ items: NavLink[] }>()
 </template>
 
 <style scoped>
-.bgl_btn.router-link-active {
+/* .bgl_btn.router-link-active {
 	background-color: var(--bgl-gray-40);
+} */
+
+.bglTopMenu .router-link-active {
+    background: var(--bgl-primary) !important;
+    color: var(--bgl-white) !important;
 }
 </style>
 

package/src/components/calendar/views/WeekView.vue

@@ -714,7 +714,7 @@ onUnmounted(() => {
 								backgroundColor: event.color || 'var(--bgl-primary)',
 							}" @mousedown.stop @click.stop="handleEventSelection(event, $event)"
 						>
-							<div class="overflow-hidden color-white p-025 txt12 h-100p">
+							<div class="overflow-hidden color-white p-025 txt12 h-100p flex gap-1 flex-wrap">
 								<div class="white-space ellipsis-1">
 									{{ event.title }}
 								</div>

package/src/components/layout/AppContent.vue

@@ -5,7 +5,7 @@ import { inject, computed } from 'vue'
 interface Props {
 	title?: string
 	showMenuButton?: boolean
-	backTo?: string
+	backTo?: string | Record<string, any>
 	border?: boolean
 }
 

package/src/components/layout/TabsNav.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 	fullWidthMobile?: boolean
 	alignTxt?: 'center' | 'start' | 'end'
 	alignTxtMobile?: 'center' | 'start' | 'end'
+	outline?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -34,21 +35,40 @@ currentTab.value
 const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabEls = ref<HTMLElement[]>([])
 
+let resizeObserver: ResizeObserver | undefined
+
+/** Position relative to tabs wrap content box (works after breakpoint / font / scroll changes). */
+function measureActiveTabIndicator(wrap: HTMLElement, activeTab: HTMLElement) {
+	const wrapRect = wrap.getBoundingClientRect()
+	const tabRect = activeTab.getBoundingClientRect()
+	const left = tabRect.left - wrapRect.left + wrap.scrollLeft
+	const width = tabRect.width
+	if (width > 0) {
+		wrap.style.setProperty('--indicator-left', `${left}px`)
+		wrap.style.setProperty('--indicator-width', `${width}px`)
+		wrap.style.setProperty('--indicator-opacity', '1')
+	}
+}
+
 function updateIndicator() {
 	nextTick(() => {
-		if (!tabsWrap.value) { return }
-		const activeTab = tabEls.value.find(tab => tab.classList.contains('active'))
-		if (activeTab) {
-			// Wait a bit more to ensure CSS is fully loaded and elements are properly sized
-			setTimeout(() => {
-				const { offsetLeft, offsetWidth } = activeTab
-				if (offsetLeft >= 0 && offsetWidth > 0) { // Ensure valid measurements
-					tabsWrap.value?.style.setProperty('--indicator-left', `${offsetLeft}px`)
-					tabsWrap.value?.style.setProperty('--indicator-width', `${offsetWidth}px`)
-					tabsWrap.value?.style.setProperty('--indicator-opacity', '1')
-				}
-			}, 10)
+		const wrap = tabsWrap.value
+		if (!wrap) { return }
+
+		const apply = () => {
+			tabEls.value = Array.from(wrap.querySelectorAll<HTMLElement>('.bgl_tab'))
+			const activeTab = tabEls.value.find(tab => tab.classList.contains('active'))
+			if (!activeTab) {
+				wrap.style.setProperty('--indicator-opacity', '0')
+				return
+			}
+			measureActiveTabIndicator(wrap, activeTab)
 		}
+
+		// Double rAF: layout + media-query / font metrics often settle after one frame (e.g. mobile ↔ desktop).
+		requestAnimationFrame(() => {
+			requestAnimationFrame(apply)
+		})
 	})
 }
 
@@ -80,32 +100,51 @@ watch(
 onMounted(() => {
 	tabEls.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
 
-	// Wait for the next frame to ensure all CSS and layout calculations are done
 	requestAnimationFrame(() => {
 		updateIndicator()
 	})
 
 	window.addEventListener('resize', updateIndicator)
+	tabsWrap.value?.addEventListener('scroll', updateIndicator, { passive: true })
+
+	if (typeof ResizeObserver !== 'undefined' && tabsWrap.value) {
+		resizeObserver = new ResizeObserver(() => {
+			updateIndicator()
+		})
+		resizeObserver.observe(tabsWrap.value)
+	}
+
+	if (typeof window !== 'undefined' && window.visualViewport) {
+		// Mobile browser chrome / zoom — window "resize" alone can miss this.
+		window.visualViewport.addEventListener('resize', updateIndicator)
+	}
 })
 
 watch(
-	() => tabEls.value,
+	() => props.tabs,
 	() => {
 		nextTick(() => { updateIndicator() })
 	},
 	{ deep: true }
 )
+
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', updateIndicator)
+	tabsWrap.value?.removeEventListener('scroll', updateIndicator)
+	resizeObserver?.disconnect()
+	resizeObserver = undefined
+	if (typeof window !== 'undefined' && window.visualViewport) {
+		window.visualViewport.removeEventListener('resize', updateIndicator)
+	}
 })
 </script>
 
 <template>
-<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }">
+<div ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden" :class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical, 'outline': outline }">
 	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs: tabEls }">
 		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="[
 			{ active: isActive(tab) },
-			{
+			{	
 				'bgl_tab-thin': thin,
 				'bgl_tab-xs': size === 'xs' || size === 'extra-small',
 				'bgl_tab-s': size === 's' || size === 'small',