@bagelink/vue 1.15.238 → 1.15.239

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.238",
+  "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/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>