@bagelink/vue 1.15.234 → 1.15.239

package/dist/types/NavLink.d.ts

@@ -7,6 +7,7 @@ export interface NavLink {
     href?: string;
     localized?: string;
     children?: NavLink[];
+    exact?: boolean;
     action?: () => void;
     class?: string;
 }

package/dist/types/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,kBAAkB,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,kBAAkB,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd"}

package/package.json

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

package/src/components/Btn.vue

@@ -225,10 +225,13 @@ const slots: SetupContext['slots'] = useSlots()
 			'frost': computedVariant === 'frost',
 			'gradient': computedVariant === 'gradient',
 			'bgl_pill-frame': frame,
+			relative: loading,
 		}, computedPairClass]" :style="gradientStyle" :tabindex="disabled ? -1 : 0" @click.stop="handleClick" @keydown.enter="handleClick" @keydown.space="handleClick"
 	>
-		<Loading v-if="loading" class="h-100p" size="15" color="currentColor" />
-		<div v-else class="bgl_btn-flex">
+		<!-- Keep label/icons mounted while loading so the button width/height don't jump.
+		     absolute-fill + flex-center (not center-xy) so it stays centered in RTL too. -->
+		<Loading v-if="loading" class="absolute-fill flex-center pointer-events-none" size="15" color="currentColor" />
+		<div class="bgl_btn-flex" :class="{ invisible: loading }">
 			<Icon
 				v-if="icon" :icon="icon" class="transition-400" :size="iconSizeComputed"
 				:mobile-size="iconMobileSize"
@@ -296,6 +299,11 @@ justify-content: center;
 height: 100%;
 }
 
+/* Loading.ring applies a thickness offset transform that pulls the spinner off-center */
+.bgl_btn :deep(.lds-ring) {
+transform: none;
+}
+
 .bgl_btn .bgl_btn-icon {
 font-size: calc(var(--bgl-input-font-size) * 1.3);
 }

package/src/components/RouterWrapper.vue

@@ -33,6 +33,8 @@ const route = useRoute()
 watch(
 	() => route.fullPath,
 	async () => {
+		// Hash-only / hash navigations scroll to the target — don't yank back to top.
+		if (route.hash) return
 		await nextTick()
 		const container = anchor.value?.closest('.pageContent') as HTMLElement | null
 		if (container) container.scrollTop = 0

package/src/components/layout/SidebarNavItem.vue

@@ -8,6 +8,7 @@ import { resolveI18n } from '../../i18n'
 interface LinkWithAction extends NavLink {
 	activeRoutes?: string[]
 	children?: LinkWithAction[]
+	exact?: boolean
 	action?: () => void
 }
 
@@ -34,6 +35,7 @@ function linkActive(link: LinkWithAction): boolean {
 			p === '/' ? route.path === p : route.path === p || route.path.startsWith(`${p}/`))
 	}
 	if (!linkPath) return false
+	if (link.exact) return route.path === linkPath
 	if (linkPath === '/') return route.path === linkPath
 	return route.path === linkPath || route.path.startsWith(`${linkPath}/`)
 }

package/src/components/layout/Tabs.vue

@@ -1,20 +1,34 @@
 <script setup lang="ts">
-import type { Tab } from '@bagelink/vue'
+import type { Tab, IconType } from '@bagelink/vue'
 import type { SetupContext, VNode } from 'vue'
 import { TabsNav } from '@bagelink/vue'
-import { computed, defineComponent, h, useSlots } from 'vue'
+import { computed, defineComponent, h, useAttrs, useSlots } from 'vue'
 
 import { useTabs } from './tabsManager'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<{
 	tabs: Tab[]
 	modelValue?: string
 	flat?: boolean
 	frame?: boolean
+	outline?: boolean
+	thin?: boolean
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	fullWidth?: boolean
+	fullWidthMobile?: boolean
+	alignTxt?: 'center' | 'start' | 'end'
+	alignTxtMobile?: 'center' | 'start' | 'end'
+	icon?: IconType
+	iconEnd?: IconType
+	iconSize?: number | string
+	iconMobileSize?: number | string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 const slots: SetupContext['slots'] = useSlots()
+const attrs = useAttrs()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 
@@ -41,13 +55,21 @@ const tabComponent = defineComponent({
 </script>
 
 <template>
-	<TabsNav v-model="slctTab" :flat="flat" :frame="frame" :tabs="tabs" :group class="mb-05" />
-	<div v-if="currentTab">
-		<template v-if="slots[currentTab]">
-			<slot :name="currentTab" />
-		</template>
-		<template v-else-if="currentTab">
-			<component :is="tabComponent" />
-		</template>
+	<div class="bgl_tabs grid gap-05">
+		<div class="flex justify-content-center">
+			<TabsNav
+				v-bind="{ ...props, ...attrs }"
+				v-model="slctTab"
+				:group="group"
+			/>
+		</div>
+		<div v-if="currentTab">
+			<template v-if="slots[currentTab]">
+				<slot :name="currentTab" />
+			</template>
+			<template v-else-if="currentTab">
+				<component :is="tabComponent" />
+			</template>
+		</div>
 	</div>
 </template>

package/src/types/NavLink.ts

@@ -8,6 +8,7 @@ export interface NavLink {
 	href?: string
 	localized?: string
 	children?: NavLink[]
+	exact?: boolean
 	action?: () => void
 	class?: string
 }