@auronui/vue 1.0.13 → 1.0.14

package/dist/cjs/index.cjs

@@ -13430,12 +13430,10 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, { immediate: true });
 		(0, _vueuse_core.useResizeObserver)(scrollWrapperEl, () => (0, vue.nextTick)(updateScrollButtons));
 		const containerEl = (0, vue.useTemplateRef)("containerEl");
-		const moreBtnEl = (0, vue.useTemplateRef)("moreBtnEl");
 		const dropdownEl = (0, vue.useTemplateRef)("dropdownEl");
 		const hiddenTabs = (0, vue.ref)([]);
 		const dropdownOpen = (0, vue.ref)(false);
 		const hasOverflow = (0, vue.computed)(() => hiddenTabs.value.length > 0);
-		let moreBtnNaturalWidth = 48;
 		(0, _vueuse_core.onClickOutside)(dropdownEl, () => {
 			dropdownOpen.value = false;
 		});
@@ -13452,7 +13450,19 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				});
 				listEl.offsetWidth;
 			}
-			const containerWidth = containerEl.value.clientWidth;
+			let moreWidth = 0;
+			const moreEl = dropdownEl.value;
+			if (moreEl) {
+				const prevDisplay = moreEl.style.display;
+				moreEl.style.display = "flex";
+				moreEl.offsetWidth;
+				moreWidth = moreEl.offsetWidth;
+				moreEl.style.display = prevDisplay;
+			}
+			const cs = getComputedStyle(containerEl.value);
+			const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+			const gap = parseFloat(cs.columnGap) || 0;
+			const contentWidth = containerEl.value.clientWidth - padX;
 			const tabWidths = allTabs.map((t) => t.offsetWidth);
 			const totalWidth = tabWidths.reduce((sum, w) => sum + w, 0);
 			if (listEl) {
@@ -13462,11 +13472,11 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					t.style.width = "";
 				});
 			}
-			if (totalWidth <= containerWidth) {
+			if (totalWidth <= contentWidth) {
 				hiddenTabs.value = [];
 				return;
 			}
-			const available = containerWidth - moreBtnNaturalWidth;
+			const available = contentWidth - moreWidth - gap - 1;
 			let accumulated = 0;
 			const newHidden = [];
 			const visibleEls = [];
@@ -13508,13 +13518,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}
 		(0, _vueuse_core.useResizeObserver)(containerEl, () => (0, vue.nextTick)(computeOverflow));
 		(0, vue.onMounted)(() => {
-			const btnEl = moreBtnEl.value?.$el;
-			if (btnEl) {
-				btnEl.style.display = "flex";
-				btnEl.offsetWidth;
-				moreBtnNaturalWidth = btnEl.offsetWidth;
-				btnEl.style.display = "";
-			}
 			(0, vue.nextTick)(computeOverflow);
 		});
 		(0, vue.watch)(() => ctx.currentValue.value, () => {
@@ -13619,8 +13622,6 @@ var TabList_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				ref: dropdownEl,
 				class: (0, vue.normalizeClass)(["tabs__more", { "tabs__more--visible": hasOverflow.value }])
 			}, [(0, vue.createVNode)(Button_default, {
-				ref_key: "moreBtnEl",
-				ref: moreBtnEl,
 				variant: "secondary",
 				size: "sm",
 				radius: "full",