@cocoar/vue-ui 2.2.0 → 2.2.1

package/dist/index.js

@@ -8660,6 +8660,7 @@ var wu = {
 }), [["__scopeId", "data-v-13d4d08e"]]), Ou = [
 	"href",
 	"aria-disabled",
+	"aria-current",
 	"tabindex",
 	"onClick"
 ], ku = {
@@ -8668,11 +8669,16 @@ var wu = {
 }, Au = { class: "coar-menu-item__label" }, ju = [
 	"href",
 	"aria-disabled",
+	"aria-current",
 	"tabindex"
 ], Mu = {
 	class: "coar-menu-item__icon",
 	"aria-hidden": "true"
-}, Nu = { class: "coar-menu-item__label" }, Pu = ["aria-disabled", "tabindex"], Fu = {
+}, Nu = { class: "coar-menu-item__label" }, Pu = [
+	"aria-disabled",
+	"aria-current",
+	"tabindex"
+], Fu = {
 	class: "coar-menu-item__icon",
 	"aria-hidden": "true"
 }, Iu = { class: "coar-menu-item__label" }, Lu = /* @__PURE__ */ X(/* @__PURE__ */ d({
@@ -8681,6 +8687,10 @@ var wu = {
 		label: { default: void 0 },
 		icon: { default: void 0 },
 		to: { default: void 0 },
+		active: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -8690,25 +8700,35 @@ var wu = {
 	setup(t, { emit: n }) {
 		let a = t, c = n, d = Cu(), f = m(yu, void 0), p = O(null), { RouterLink: h, hasRouterLink: g, warnIfMisconfigured: _ } = Ge();
 		U(() => a.to, (e) => _(e, "CoarMenuItem"), { immediate: !0 });
-		let v = r(() => a.to !== void 0 && a.to !== null), b = null;
+		let v = r(() => a.to !== void 0 && a.to !== null);
+		function b(e) {
+			return {
+				"coar-menu-item--active": a.active ?? e,
+				"coar-menu-item--disabled": a.disabled
+			};
+		}
+		function x(e) {
+			return a.active ?? e ? "page" : void 0;
+		}
+		let T = null;
 		C(() => {
 			if (f && p.value) {
 				let e = {
 					el: p.value,
 					disabled: a.disabled
 				};
-				b = f.register(e), U(() => a.disabled, (t) => {
+				T = f.register(e), U(() => a.disabled, (t) => {
 					e.disabled = t;
 				});
 			}
 		}), S(() => {
-			b?.();
+			T?.();
 		});
-		let x = r(() => a.disabled ? -1 : f ? f.items.value.findIndex((e) => e.el === p.value) === f.activeIndex.value ? 0 : -1 : 0);
-		function T(e) {
+		let E = r(() => a.disabled ? -1 : f ? f.items.value.findIndex((e) => e.el === p.value) === f.activeIndex.value ? 0 : -1 : 0);
+		function D(e) {
 			return e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
 		}
-		function E(e) {
+		function k(e) {
 			let t = !0;
 			return c("clicked", {
 				event: e,
@@ -8717,30 +8737,30 @@ var wu = {
 				}
 			}), { shouldClose: t };
 		}
-		function D(e) {
+		function M(e) {
 			if (a.disabled) {
 				e.preventDefault(), e.stopPropagation();
 				return;
 			}
 			e.stopPropagation();
-			let { shouldClose: t } = E(e);
+			let { shouldClose: t } = k(e);
 			t && d && queueMicrotask(() => d());
 		}
-		function k(e, t) {
+		function N(e, t) {
 			if (a.disabled) {
 				e.preventDefault(), e.stopPropagation();
 				return;
 			}
-			let n = T(e), { shouldClose: r } = E(e);
+			let n = D(e), { shouldClose: r } = k(e);
 			!n && t && t(e), r && d && !n && queueMicrotask(() => d());
 		}
-		function M(e) {
+		function F(e) {
 			if (e.key !== "Enter" && e.key !== " " || a.disabled || v.value && e.key === "Enter") return;
 			if (e.preventDefault(), v.value && p.value) {
 				p.value.click();
 				return;
 			}
-			let { shouldClose: t } = E(new MouseEvent("click"));
+			let { shouldClose: t } = k(new MouseEvent("click"));
 			t && d && queueMicrotask(() => d());
 		}
 		return (n, r) => v.value && L(g) ? (w(), i(j(L(h)), {
@@ -8748,16 +8768,17 @@ var wu = {
 			to: t.to,
 			custom: ""
 		}, {
-			default: G(({ href: t, navigate: r }) => [s("a", {
+			default: G(({ href: t, isActive: r, navigate: i }) => [s("a", {
 				ref_key: "itemRef",
 				ref: p,
 				role: "menuitem",
 				href: t,
-				class: y(["coar-menu-item", { "coar-menu-item--disabled": a.disabled }]),
+				class: y(["coar-menu-item", b(r)]),
 				"aria-disabled": a.disabled || void 0,
-				tabindex: x.value,
-				onClick: (e) => k(e, r),
-				onKeydown: M
+				"aria-current": x(r),
+				tabindex: E.value,
+				onClick: (e) => N(e, i),
+				onKeydown: F
 			}, [s("span", ku, [u(Z, {
 				name: a.icon || "square-dashed",
 				size: "s"
@@ -8769,11 +8790,12 @@ var wu = {
 			ref: p,
 			role: "menuitem",
 			href: String(t.to),
-			class: y(["coar-menu-item", { "coar-menu-item--disabled": a.disabled }]),
+			class: y(["coar-menu-item", b(!1)]),
 			"aria-disabled": a.disabled || void 0,
-			tabindex: x.value,
-			onClick: k,
-			onKeydown: M
+			"aria-current": x(!1),
+			tabindex: E.value,
+			onClick: N,
+			onKeydown: F
 		}, [s("span", Mu, [u(Z, {
 			name: a.icon || "square-dashed",
 			size: "s"
@@ -8782,17 +8804,18 @@ var wu = {
 			ref_key: "itemRef",
 			ref: p,
 			role: "menuitem",
-			class: y(["coar-menu-item", { "coar-menu-item--disabled": a.disabled }]),
+			class: y(["coar-menu-item", b(!1)]),
 			"aria-disabled": a.disabled || void 0,
-			tabindex: x.value,
-			onClick: D,
-			onKeydown: M
+			"aria-current": x(!1),
+			tabindex: E.value,
+			onClick: M,
+			onKeydown: F
 		}, [s("span", Fu, [u(Z, {
 			name: a.icon || "square-dashed",
 			size: "s"
 		}, null, 8, ["name"])]), s("span", Iu, [a.label ? (w(), o(e, { key: 0 }, [l(P(a.label), 1)], 64)) : A(n.$slots, "default", { key: 1 }, void 0, !0)])], 42, Pu));
 	}
-}), [["__scopeId", "data-v-c329f6e6"]]), Ru = {}, zu = {
+}), [["__scopeId", "data-v-8edc345f"]]), Ru = {}, zu = {
 	role: "separator",
 	class: "coar-menu-divider"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
   "license": "Apache-2.0",
   "repository": {
@@ -49,7 +49,7 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "2.2.0",
+    "@cocoar/vue-localization": "2.2.1",
     "@fontsource/cascadia-code": "^5.2.3",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",