bitboss-ui 2.1.120 → 2.1.121

package/dist/ai/BbTab.md

@@ -144,8 +144,6 @@ const route = useRoute();
 const router = useRouter();
 const { error } = useLogger();
 
-const tabs = ref();
-
 const id = props.id ?? useId().id.value;
 const instanceid = `bb-tab_${id}`;
 
@@ -280,7 +278,12 @@ const mappedItems = computed(() => {
 const onTabSelected = (tab: BbTabItem<K>['key'], replace = props.replace) => {
 	const tabItem = props.items.find((i) => i.key === tab);
 	if (isNil(tabItem)) return;
-	if (tabItem.key === selectedTab.value) return;
+	if (tabItem.key === selectedTab.value) {
+		if (props.modelValue !== tab) {
+			emit('update:modelValue', tab);
+		}
+		return;
+	}
 
 	/* For Vue or Nuxt context */
 	if (props.navigation && route.value && queryTabParam.value !== tab) {

package/dist/index322.js

@@ -3,9 +3,9 @@ import { useResizeObserver as t, useScroll as n } from "./index14.js";
 import { useFrameworkDetection as r } from "./index17.js";
 import { useQuery as i } from "./index18.js";
 import { isNotNil as a } from "./index26.js";
-import { useRoute as o } from "./index28.js";
-import { useRouter as s } from "./index29.js";
-import { useLogger as ee } from "./index31.js";
+import { useRoute as ee } from "./index28.js";
+import { useRouter as o } from "./index29.js";
+import { useLogger as s } from "./index31.js";
 import c from "./index36.js";
 import { hash as l } from "./index81.js";
 import { isNil as u } from "./index94.js";
@@ -55,26 +55,26 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 	},
 	emits: ["update:modelValue"],
 	setup(_, { expose: O, emit: he }) {
-		let k = _, ge = he, A = o(), j = s(), { error: M } = ee(), _e = C(), N = k.id ?? e().id.value, P = `bb-tab_${N}`, F = C(), { isScrolling: ve, arrivedState: I } = n(F), L = p(() => ({
-			isScrolling: ve.value,
-			left: I.left,
-			right: I.right
-		})), { isInertia: ye } = r(), be = ie(), R = C(null), z = p(() => k.items.findIndex((e) => e.key === R.value)), B = p(() => z.value === 0), V = p(() => z.value === k.items.length - 1);
+		let k = _, A = he, j = ee(), M = o(), { error: N } = s(), P = k.id ?? e().id.value, F = `bb-tab_${P}`, I = C(), { isScrolling: ge, arrivedState: L } = n(I), R = p(() => ({
+			isScrolling: ge.value,
+			left: L.left,
+			right: L.right
+		})), { isInertia: _e } = r(), ve = ie(), z = C(null), B = p(() => k.items.findIndex((e) => e.key === z.value)), V = p(() => B.value === 0), H = p(() => B.value === k.items.length - 1);
 		k.items.forEach((e) => {
-			e.key ? (k.server || e.server) && !k.navigation && M(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : M(`A tab item has no key: ${JSON.stringify(e, null, 2)}`);
+			e.key ? (k.server || e.server) && !k.navigation && N(`A tab item has a server property but the navigation prop is false: ${JSON.stringify(e, null, 2)}`) : N(`A tab item has no key: ${JSON.stringify(e, null, 2)}`);
 		});
-		let H = p(() => [i()[k.querykey]].flat()[0]), U = () => {
-			let e = H.value;
-			if (k.navigation && e) R.value = e;
-			else if (k.modelValue) R.value = k.modelValue;
+		let U = p(() => [i()[k.querykey]].flat()[0]), W = () => {
+			let e = U.value;
+			if (k.navigation && e) z.value = e;
+			else if (k.modelValue) z.value = k.modelValue;
 			else if (k.items[0]) {
 				let e = k.items.find((e) => !e.disabled);
 				if (!e) throw Error("No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.");
-				R.value = e.key;
+				z.value = e.key;
 			}
 		};
-		U();
-		let xe = (e) => ({
+		W();
+		let ye = (e) => ({
 			headers: e.headers ?? k.headers,
 			only: e.only ?? k.only,
 			preserveScroll: e.preserveScroll ?? k.preserveScroll,
@@ -87,10 +87,10 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 			onError: e.onError ?? k.onError,
 			onCancel: e.onCancel ?? k.onCancel,
 			onFinish: e.onFinish ?? k.onFinish
-		}), W = p(() => {
-			let e = R.value, t = z.value;
+		}), G = p(() => {
+			let e = z.value, t = B.value;
 			return k.items.map((n) => {
-				let { key: r, label: i, eager: a } = n, o = `${P}_tab_${n.key}`, s = `${P}_tabpanel_${n.key}`, ee = `label-${n.key}`, c = n.key === R.value, l = {
+				let { key: r, label: i, eager: a } = n, ee = `${F}_tab_${n.key}`, o = `${F}_tabpanel_${n.key}`, s = `label-${n.key}`, c = n.key === z.value, l = {
 					"bb-tab__btn": !0,
 					"bb-tab__btn--active": c
 				}, u = {
@@ -98,12 +98,12 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 					"bb-tab__pane--shown": c
 				}, d = !!(n.disabled || k.disabled);
 				return {
-					tabId: o,
+					tabId: ee,
 					eager: a,
-					panelId: s,
+					panelId: o,
 					active: c,
 					ariaSelected: !!c,
-					labelSlotName: ee,
+					labelSlotName: s,
 					tabClasses: l,
 					paneClasses: u,
 					role: "tab",
@@ -113,35 +113,39 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 					key: r,
 					label: i,
 					currentIndex: t,
-					onClick: () => G(n.key),
-					onKeydown: (e) => Se(e)
+					onClick: () => K(n.key),
+					onKeydown: (e) => be(e)
 				};
 			});
-		}), G = (e, t = k.replace) => {
+		}), K = (e, t = k.replace) => {
 			let n = k.items.find((t) => t.key === e);
-			if (!u(n) && n.key !== R.value) {
-				if (k.navigation && A.value && H.value !== e) {
-					if (!j) return;
+			if (!u(n)) {
+				if (n.key === z.value) {
+					k.modelValue !== e && A("update:modelValue", e);
+					return;
+				}
+				if (k.navigation && j.value && U.value !== e) {
+					if (!M) return;
 					let n = t ? "replace" : "push", r = {
-						...A.value?.query ?? {},
+						...j.value?.query ?? {},
 						[k.querykey]: e
 					}, i = {
-						...A.value,
+						...j.value,
 						query: r
 					};
-					j[n](i);
-				} else if (k.navigation && ye) {
+					M[n](i);
+				} else if (k.navigation && _e) {
 					let r = n.href ?? globalThis.location.href, i = new URL(r, window.location.origin);
 					if (i.searchParams.set(k.querykey, e), k.server || n.server) {
-						let e = be?.proxy?.$inertia, t = xe(n), r = Object.fromEntries(Object.entries(t).filter(([e, t]) => a(t)));
+						let e = ve?.proxy?.$inertia, t = ye(n), r = Object.fromEntries(Object.entries(t).filter(([e, t]) => a(t)));
 						e.visit(i.toString(), r);
 					} else t ? window.history.replaceState(window.history.state, "", i.toString()) : window.history.pushState(window.history.state, "", i.toString());
 				}
-				k.modelValue !== e && ge("update:modelValue", e), R.value = e;
+				k.modelValue !== e && A("update:modelValue", e), z.value = e;
 			}
 		};
-		R.value && G(R.value, !0);
-		let K = (e) => {
+		z.value && K(z.value, !0);
+		let q = (e) => {
 			var t = null;
 			switch (e) {
 				case "first":
@@ -149,12 +153,12 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 					break;
 				case "previous": {
 					let e = 1;
-					for (; e < k.items.length && (t = (z.value + k.items.length - e) % k.items.length, k.items[t].disabled);) e++;
+					for (; e < k.items.length && (t = (B.value + k.items.length - e) % k.items.length, k.items[t].disabled);) e++;
 					break;
 				}
 				case "next": {
 					let e = 1;
-					for (; e < k.items.length && (t = (z.value + e) % k.items.length, k.items[t].disabled);) e++;
+					for (; e < k.items.length && (t = (B.value + e) % k.items.length, k.items[t].disabled);) e++;
 					break;
 				}
 				case "last":
@@ -165,24 +169,24 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 			if (t === null) throw Error("Could not navigate to next tab");
 			if (k.items[t].disabled) return;
 			let n = k.items[t].key;
-			document.querySelector(`#${P}_tab_${n}`)?.focus(), G(n);
-		}, Se = (e) => {
-			if (!k.disabled) if (e.key === "ArrowRight") K("next");
-			else if (e.key === "ArrowLeft") K("previous");
-			else if (e.key === "Home") e.preventDefault(), K("first");
-			else if (e.key === "End") e.preventDefault(), K("last");
+			document.querySelector(`#${F}_tab_${n}`)?.focus(), K(n);
+		}, be = (e) => {
+			if (!k.disabled) if (e.key === "ArrowRight") q("next");
+			else if (e.key === "ArrowLeft") q("previous");
+			else if (e.key === "Home") e.preventDefault(), q("first");
+			else if (e.key === "End") e.preventDefault(), q("last");
 			else return;
 		};
 		E(() => k.modelValue, (e) => {
-			e && G(e);
-		}), E(() => A.value?.query?.[k.querykey], (e) => {
-			e && typeof e == "string" && G(e);
-		}), E(R, async () => {
-			if (!F.value) return;
-			let e = F.value.querySelector(".bb-tab__btn--active");
+			e && K(e);
+		}), E(() => j.value?.query?.[k.querykey], (e) => {
+			e && typeof e == "string" && K(e);
+		}), E(z, async () => {
+			if (!I.value) return;
+			let e = I.value.querySelector(".bb-tab__btn--active");
 			if (!e) return;
 			await y();
-			let t = F.value, n = e.offsetLeft, r = n + e.offsetWidth, i = t.scrollLeft, a = i + t.clientWidth;
+			let t = I.value, n = e.offsetLeft, r = n + e.offsetWidth, i = t.scrollLeft, a = i + t.clientWidth;
 			n < i ? t.scrollTo({
 				left: n,
 				behavior: "smooth"
@@ -191,53 +195,52 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 				behavior: "smooth"
 			});
 		}, { flush: "post" });
-		let q = C("right");
-		E(R, (e, t) => {
-			e && t && (q.value = k.items.findIndex((t) => t.key === e) > k.items.findIndex((e) => e.key === t) ? "right" : "left");
+		let J = C("right");
+		E(z, (e, t) => {
+			e && t && (J.value = k.items.findIndex((t) => t.key === e) > k.items.findIndex((e) => e.key === t) ? "right" : "left");
 		}, { flush: "sync" });
-		let J = C(0), Y = C(0), X = C(0), Z = C(0), Q = C(0), Ce = C(!1), $ = () => {
-			if (!F.value) return;
-			let e = F.value.querySelector(".bb-tab__btn--active");
-			e && (X.value = e.offsetLeft, Z.value = e.offsetTop, J.value = e.clientWidth, Y.value = e.clientHeight, Q.value = F.value.scrollWidth);
+		let Y = C(0), X = C(0), Z = C(0), Q = C(0), xe = C(0), Se = C(!1), $ = () => {
+			if (!I.value) return;
+			let e = I.value.querySelector(".bb-tab__btn--active");
+			e && (Z.value = e.offsetLeft, Q.value = e.offsetTop, Y.value = e.clientWidth, X.value = e.clientHeight, xe.value = I.value.scrollWidth);
 		};
 		return oe(async () => {
-			$(), await y(), Ce.value = !0;
-		}), E(R, $, { flush: "post" }), t(F, () => {
+			$(), await y(), Se.value = !0;
+		}), E(z, $, { flush: "post" }), t(I, () => {
 			$();
 		}), E(() => l(k.items), () => {
-			R.value && !k.items.find((e) => e.key === R.value) && U();
+			z.value && !k.items.find((e) => e.key === z.value) && W();
 		}, {
 			immediate: !0,
 			deep: !0
 		}), O({
-			isFirst: B,
-			isLast: V,
-			current: R,
-			currentIndex: z,
-			goTo: K
+			isFirst: V,
+			isLast: H,
+			current: z,
+			currentIndex: B,
+			goTo: q
 		}), (e, t) => (S(), h("div", {
-			id: le(N),
-			ref_key: "tabs",
-			ref: _e,
+			id: le(P),
+			ref: "tabs",
 			class: b(["bb-tab", {
 				[`bb-tab--${e.direction}`]: !0,
 				"bb-tab--disabled": e.disabled
 			}])
 		}, [g("div", de, [
-			g("span", null, [T(e.$slots, "header:prepend", x(v(L.value)))]),
+			g("span", null, [T(e.$slots, "header:prepend", x(v(R.value)))]),
 			g("ul", {
 				ref_key: "tablist",
-				ref: F,
-				class: b(["bb-tab__label-container", { "bb-tab__label-container--no-transition": !Ce.value }]),
+				ref: I,
+				class: b(["bb-tab__label-container", { "bb-tab__label-container--no-transition": !Se.value }]),
 				role: "tablist",
 				style: ae({
-					"--inner-width": `${Q.value}px`,
-					"--width": `${J.value}px`,
-					"--height": `${Y.value}px`,
-					"--left": `${X.value}px`,
-					"--top": `${Z.value}px`
+					"--inner-width": `${xe.value}px`,
+					"--width": `${Y.value}px`,
+					"--height": `${X.value}px`,
+					"--left": `${Z.value}px`,
+					"--top": `${Q.value}px`
 				})
-			}, [(S(!0), h(f, null, w(W.value, (t) => (S(), h("li", {
+			}, [(S(!0), h(f, null, w(G.value, (t) => (S(), h("li", {
 				key: t.tabId,
 				role: "presentation"
 			}, [re(c, {
@@ -251,22 +254,22 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 				onKeydown: t.onKeydown
 			}, {
 				default: D(() => [T(e.$slots, t.labelSlotName, {
-					current: R.value,
-					currentIndex: z.value,
+					current: z.value,
+					currentIndex: B.value,
 					disabled: t.disabled,
-					goTo: K,
-					isFirst: B.value,
-					isLast: V.value,
+					goTo: q,
+					isFirst: V.value,
+					isLast: H.value,
 					selected: t.active,
 					text: t.label,
 					value: t.key
 				}, () => [T(e.$slots, "label", {
-					current: R.value,
-					currentIndex: z.value,
+					current: z.value,
+					currentIndex: B.value,
 					disabled: t.disabled,
-					goTo: K,
-					isFirst: B.value,
-					isLast: V.value,
+					goTo: q,
+					isFirst: V.value,
+					isLast: H.value,
 					selected: t.active,
 					text: t.label,
 					value: t.key
@@ -281,12 +284,12 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 				"onClick",
 				"onKeydown"
 			])]))), 128))], 6),
-			g("span", null, [T(e.$slots, "header:append", x(v(L.value)))])
+			g("span", null, [T(e.$slots, "header:append", x(v(R.value)))])
 		]), g("div", pe, [(S(), m(se(k.animateY ? d : "div"), null, {
-			default: D(() => [(S(!0), h(f, null, w(W.value, (t) => (S(), m(te, {
+			default: D(() => [(S(!0), h(f, null, w(G.value, (t) => (S(), m(te, {
 				key: t.tabId,
 				css: k.animateX,
-				name: `tab-slide-${q.value}`
+				name: `tab-slide-${J.value}`
 			}, {
 				default: D(() => [t.active || k.eager || t.eager ? (S(), h("section", {
 					key: 0,
@@ -296,12 +299,12 @@ var ue = ["id"], de = { class: "bb-tab__label-boundary" }, fe = { class: "bb-tab
 					role: "tabpanel",
 					tabindex: t.tabindex
 				}, [T(e.$slots, t.key, {
-					current: R.value,
-					currentIndex: z.value,
+					current: z.value,
+					currentIndex: B.value,
 					disabled: t.disabled,
-					goTo: K,
-					isFirst: B.value,
-					isLast: V.value,
+					goTo: q,
+					isFirst: V.value,
+					isLast: H.value,
 					selected: t.active,
 					text: t.label,
 					value: t.key

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bitboss-ui",
-	"version": "2.1.120",
+	"version": "2.1.121",
 	"description": "Vue 3 component library by BitBoss: forms, selects, layout, overlays, and more.",
 	"type": "module",
 	"sideEffects": false,
@@ -113,4 +113,4 @@
 	"lint-staged": {
 		"*.{js,css,md,html,json,vue,ts}": "prettier --write"
 	}
-}
+}