@bagelink/vue 1.4.155 → 1.4.159

package/src/components/layout/TabsNav.vue

@@ -35,9 +35,15 @@ function updateIndicator() {
 		if (!tabsWrap.value) return
 		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
 		if (activeTab) {
-			const { offsetLeft, offsetWidth } = activeTab
-			tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+			// 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)
 		}
 	})
 }
@@ -69,7 +75,12 @@ watch(
 
 onMounted(() => {
 	tabs.value = Array.from(tabsWrap.value?.querySelectorAll('.bgl_tab') || [])
-	updateIndicator()
+
+	// Wait for the next frame to ensure all CSS and layout calculations are done
+	requestAnimationFrame(() => {
+		updateIndicator()
+	})
+
 	window.addEventListener('resize', updateIndicator)
 })
 
@@ -86,24 +97,14 @@ onBeforeUnmount(() => {
 </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 }"
-	>
-		<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
-			<button
-				v-for="(tab, i) in props.tabs"
-				:key="i"
-				type="button"
-				:class="{ active: isActive(tab) }"
-				class="bgl_tab relative z-1"
-				@click="selectTab(tab)"
-			>
-				<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
-				{{ tabLabel(tab) }}
-			</button>
+<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 }">
+	<slot name="tabs" v-bind="{ selectTab, isActive, tabLabel, tabs }">
+		<button v-for="(tab, i) in props.tabs" :key="i" type="button" :class="{ active: isActive(tab) }" class="bgl_tab relative z-1" @click="selectTab(tab)">
+			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
+			{{ tabLabel(tab) }}
+		</button>
 		</slot>
-	</div>
+		</div>
 </template>
 
 <style scoped>
@@ -127,7 +128,6 @@ onBeforeUnmount(() => {
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
 	color: inherit
-
 }
 
 .bgl_tab:hover {
@@ -145,6 +145,8 @@ onBeforeUnmount(() => {
 	border-radius: var(--input-border-radius);
 	transition: var(--bgl-transition);
 	z-index: 0;
+	/* Hide indicator initially until position is calculated */
+	opacity: var(--indicator-opacity, 0);
 }
 .bgl_flat-tabs.bgl_tabs_wrap {
 	background: transparent;

package/src/components/lightbox/Lightbox.vue

@@ -210,6 +210,7 @@ defineExpose({ open, close })
 }
 .lightbox-image{
 	object-fit: contain;
+	width: fit-content;
 }
 
 .bgl-lightbox-overlay {