@kungal/ui-vue 1.4.0 → 1.4.1

package/dist/components/Tab.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.vue.d.ts","sourceRoot":"","sources":["../../src/components/Tab.vue"],"names":[],"mappings":"AAoaA,OAAO,KAAK,EAAc,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAS/E,KAAK,WAAW,GAAG,WAAW,CAAC;AA+V/B,KAAK,gBAAgB,GAAG;IACxB,UAAU,EAAE,MAAM,CAAC;CAClB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA6HxD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Tab.vue.d.ts","sourceRoot":"","sources":["../../src/components/Tab.vue"],"names":[],"mappings":"AAieA,OAAO,KAAK,EAAc,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAS/E,KAAK,WAAW,GAAG,WAAW,CAAC;AAwY/B,KAAK,gBAAgB,GAAG;IACxB,UAAU,EAAE,MAAM,CAAC;CAClB,CAAC;AAmBF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAmIxD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;6EAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.js

@@ -5331,17 +5331,17 @@ var Ze = D({
 			sm: "gap-1",
 			md: "gap-1.5",
 			lg: "gap-2"
-		}, g = D([]), x = (e, t) => {
+		}, g = D([]), C = (e, t) => {
 			let n = e && typeof e == "object" && "$el" in e ? e.$el ?? null : e;
 			n instanceof HTMLElement && (g.value[t] = n);
-		}, S = o(() => r.items.findIndex((e) => e.value === i.value)), C = D({}), T = () => {
-			let e = S.value, t = g.value[e];
+		}, T = o(() => r.items.findIndex((e) => e.value === i.value)), E = D({}), k = () => {
+			let e = T.value, t = g.value[e];
 			if (!t) {
-				C.value = {};
+				E.value = {};
 				return;
 			}
 			let n = r.variant === "underlined";
-			p.value ? C.value = n ? {
+			p.value ? E.value = n ? {
 				transform: `translateY(${t.offsetTop}px)`,
 				height: `${t.offsetHeight}px`,
 				width: "2px"
@@ -5349,7 +5349,7 @@ var Ze = D({
 				transform: `translate(${t.offsetLeft}px, ${t.offsetTop}px)`,
 				width: `${t.offsetWidth}px`,
 				height: `${t.offsetHeight}px`
-			} : C.value = n ? {
+			} : E.value = n ? {
 				transform: `translateX(${t.offsetLeft}px)`,
 				width: `${t.offsetWidth}px`,
 				height: "2px"
@@ -5363,33 +5363,39 @@ var Ze = D({
 			i,
 			() => r.items.length,
 			() => r.orientation
-		], () => v(T), { immediate: !0 });
-		let E = (e) => {
+		], () => v(k), { immediate: !0 });
+		let M = D(null), N = null;
+		S(() => {
+			v(k), typeof ResizeObserver < "u" && M.value && (N = new ResizeObserver(() => k()), N.observe(M.value));
+		}), x(() => {
+			N?.disconnect(), N = null;
+		});
+		let P = (e) => {
 			let t = g.value[e];
 			t && t.focus();
-		}, k = (e, t) => {
+		}, F = (e, t) => {
 			t?.preventDefault();
 			let n = r.items.map((e, t) => e.disabled || r.disabled ? -1 : t).filter((e) => e >= 0);
 			if (!n.length) return;
-			let i = n.indexOf(S.value), a;
+			let i = n.indexOf(T.value), a;
 			if (a = i < 0 ? n[e > 0 ? 0 : n.length - 1] : n[(i + e + n.length) % n.length], a === void 0) return;
 			let o = r.items[a];
-			o && (N(o, a), E(a));
-		}, M = (e, t) => {
+			o && (R(o, a), P(a));
+		}, I = (e, t) => {
 			if (r.disabled) return;
 			let n = p.value ? "ArrowDown" : "ArrowRight", i = p.value ? "ArrowUp" : "ArrowLeft";
 			switch (e.key) {
 				case n:
-					k(1, e);
+					F(1, e);
 					break;
 				case i:
-					k(-1, e);
+					F(-1, e);
 					break;
 				case "Home":
 					e.preventDefault();
 					{
 						let e = r.items.findIndex((e) => !(e.disabled || r.disabled));
-						e >= 0 && r.items[e] && (N(r.items[e], e), E(e));
+						e >= 0 && r.items[e] && (R(r.items[e], e), P(e));
 					}
 					break;
 				case "End":
@@ -5397,7 +5403,7 @@ var Ze = D({
 					for (let e = r.items.length - 1; e >= 0; e--) {
 						let t = r.items[e];
 						if (t && !(t.disabled || r.disabled)) {
-							N(t, e), E(e);
+							R(t, e), P(e);
 							break;
 						}
 					}
@@ -5406,18 +5412,18 @@ var Ze = D({
 				case " ": {
 					e.preventDefault();
 					let n = r.items[t];
-					n && N(n, t);
+					n && R(n, t);
 					break;
 				}
 			}
-		}, N = async (e, t) => {
+		}, R = async (e, t) => {
 			r.disabled || e.disabled || (i.value !== e.value && (i.value = e.value, a("change", e.value)), e.href && await d.navigate(e.href));
-		}, P = (e) => e.href ? d.linkComponent : "button", F = (e) => e.href ? typeof d.linkComponent == "string" ? { href: e.href } : { to: e.href } : {
+		}, z = (e) => e.href ? d.linkComponent : "button", B = (e) => e.href ? typeof d.linkComponent == "string" ? { href: e.href } : { to: e.href } : {
 			type: "button",
 			disabled: e.disabled || r.disabled
-		}, I = (e, t, n) => {
-			t.href && e.preventDefault(), N(t, n);
-		}, R = (e) => hs(r.name, e), z = (e) => gs(r.name, e), B = (e) => i.value === e.value, H = o(() => q("relative", p.value ? "inline-flex flex-col" : "inline-flex", r.fullWidth && "w-full", r.disabled && "opacity-50 cursor-not-allowed", r.scrollable && (p.value ? "max-h-full overflow-y-auto scrollbar-hide" : "max-w-full overflow-x-auto scrollbar-hide"), r.className)), W = o(() => {
+		}, H = (e, t, n) => {
+			t.href && e.preventDefault(), R(t, n);
+		}, W = (e) => hs(r.name, e), G = (e) => gs(r.name, e), K = (e) => i.value === e.value, ee = o(() => q("relative", p.value ? "inline-flex flex-col" : "inline-flex", r.fullWidth && "w-full", r.disabled && "opacity-50 cursor-not-allowed", r.scrollable && (p.value ? "max-h-full overflow-y-auto scrollbar-hide" : "max-w-full overflow-x-auto scrollbar-hide"), r.className)), J = o(() => {
 			let e = p.value ? q("relative flex flex-col items-stretch", h[r.size]) : q("relative flex items-center", h[r.size]);
 			switch (r.variant) {
 				case "underlined": return q(e, r.innerClassName);
@@ -5427,21 +5433,21 @@ var Ze = D({
 				case "pills": return q(e, r.innerClassName);
 				default: return q(e, r.innerClassName);
 			}
-		}), G = {
+		}), te = {
 			start: "justify-start",
 			center: "justify-center",
 			end: "justify-end"
-		}, K = (e) => {
-			let t = B(e), n = q("relative z-10 inline-flex items-center cursor-pointer select-none whitespace-nowrap transition-colors", G[r.align], m[r.size], h[r.size], e.disabled && "opacity-50 cursor-not-allowed", p.value && r.fullWidth && "w-full");
+		}, ne = (e) => {
+			let t = K(e), n = q("relative z-10 inline-flex items-center cursor-pointer select-none whitespace-nowrap transition-colors", te[r.align], m[r.size], h[r.size], e.disabled && "opacity-50 cursor-not-allowed", p.value && r.fullWidth && "w-full"), i = !ce.value;
 			switch (r.variant) {
 				case "underlined": return q(n, t ? fe[r.color] : "text-default-500 hover:text-foreground");
-				case "solid": return q(n, "rounded-kun-md", t ? "text-white" : "text-default-500 hover:text-foreground");
-				case "light": return q(n, "rounded-kun-md", t ? fe[r.color] : "text-default-500 hover:text-foreground");
+				case "solid": return q(n, "rounded-kun-md", t ? q("text-white", i && ae[r.color]) : "text-default-500 hover:text-foreground");
+				case "light": return q(n, "rounded-kun-md", t ? q(fe[r.color], i && ie[r.color]) : "text-default-500 hover:text-foreground");
 				case "bordered": return q(n, "rounded-kun-md border", t ? q(oe[r.color], fe[r.color]) : "border-transparent text-default-500 hover:text-foreground");
 				case "pills": return q(n, "rounded-full", t ? q(ae[r.color], "text-white") : "text-default-500 hover:text-foreground");
 				default: return n;
 			}
-		}, ee = {
+		}, re = (e) => r.variant === "underlined" && K(e) && !ce.value ? { boxShadow: "inset 0 -2px 0 0 currentColor" } : void 0, ie = {
 			default: "bg-default/15",
 			primary: "bg-primary/15",
 			secondary: "bg-secondary/15",
@@ -5449,40 +5455,43 @@ var Ze = D({
 			warning: "bg-warning/15",
 			danger: "bg-danger/15",
 			info: "bg-info/15"
-		}, J = o(() => {
+		}, se = o(() => {
 			switch (r.variant) {
 				case "underlined": return q("absolute rounded-full", ae[r.color], p.value ? "left-0 top-0" : "bottom-0 left-0");
 				case "solid": return q("absolute top-0 left-0 rounded-kun-md", ae[r.color]);
-				case "light": return q("absolute top-0 left-0 rounded-kun-md", ee[r.color]);
+				case "light": return q("absolute top-0 left-0 rounded-kun-md", ie[r.color]);
 				default: return null;
 			}
-		}), te = o(() => !!J.value && S.value >= 0 && Object.keys(C.value).length > 0), ne = o(() => {
-			let e = { ...C.value };
+		}), ce = o(() => !!se.value && T.value >= 0 && Object.keys(E.value).length > 0), Y = o(() => {
+			let e = { ...E.value };
 			return r.disableAnimation || (e.transition = "transform var(--kun-dur-base) var(--ease-kun-standard), width var(--kun-dur-base) var(--ease-kun-standard)"), e;
 		});
-		return (n, r) => (w(), l("div", { class: y(H.value) }, [u("div", {
-			class: y(W.value),
+		return (n, r) => (w(), l("div", { class: y(ee.value) }, [u("div", {
+			ref_key: "listRef",
+			ref: M,
+			class: y(J.value),
 			role: "tablist",
 			"aria-orientation": e.orientation
-		}, [te.value ? (w(), l("div", {
+		}, [ce.value ? (w(), l("div", {
 			key: 0,
 			"aria-hidden": "true",
-			class: y(J.value),
-			style: b(ne.value)
-		}, null, 6)) : c("", !0), (w(!0), l(t, null, O(e.items, (t, n) => (w(), s(A(P(t)), _({
+			class: y(se.value),
+			style: b(Y.value)
+		}, null, 6)) : c("", !0), (w(!0), l(t, null, O(e.items, (t, n) => (w(), s(A(z(t)), _({
 			key: t.value,
 			ref_for: !0,
-			ref: (e) => x(e, n)
-		}, { ref_for: !0 }, F(t), {
-			id: R(t.value),
+			ref: (e) => C(e, n)
+		}, { ref_for: !0 }, B(t), {
+			id: W(t.value),
 			role: "tab",
-			"aria-controls": z(t.value),
-			"aria-selected": B(t),
+			"aria-controls": G(t.value),
+			"aria-selected": K(t),
 			"aria-disabled": t.disabled || e.disabled,
-			tabindex: B(t) && !t.disabled && !e.disabled ? 0 : -1,
-			class: K(t),
-			onClick: (e) => I(e, t, n),
-			onKeydown: (e) => M(e, n)
+			tabindex: K(t) && !t.disabled && !e.disabled ? 0 : -1,
+			class: ne(t),
+			style: re(t),
+			onClick: (e) => H(e, t, n),
+			onKeydown: (e) => I(e, n)
 		}), {
 			default: U(() => [t.icon ? (w(), l("span", {
 				key: 0,
@@ -5497,6 +5506,7 @@ var Ze = D({
 			"aria-disabled",
 			"tabindex",
 			"class",
+			"style",
 			"onClick",
 			"onKeydown"
 		]))), 128))], 10, _s)], 2));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/ui-vue",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "KunUI Vue 3 component layer — Nuxt-decoupled. Works in any Vue app; pairs with @kungal/ui-nuxt for Nuxt sugar.",
   "type": "module",
   "keywords": [
@@ -49,7 +49,7 @@
     "date-fns": "^4.1.0",
     "focus-trap": "^8.2.1",
     "vue-advanced-cropper": "^2.8.9",
-    "@kungal/ui-core": "1.4.0"
+    "@kungal/ui-core": "1.4.1"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -61,7 +61,7 @@
     "vite": "^8.0.16",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.3",
-    "@kungal/ui-tokens": "1.4.0"
+    "@kungal/ui-tokens": "1.4.1"
   },
   "scripts": {
     "build": "vite build && cp src/prose.css dist/prose.css && vue-tsc -p tsconfig.build.json",