@dskripchenko/ui 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -2053,7 +2053,12 @@ var Cr = /* @__PURE__ */ yr(br, [["render", Sr]]), wr = [
 		collapseMenu: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		collapseFirst: {
+			type: Boolean,
+			default: !1
+		},
+		container: { default: null }
 	},
 	setup(e, { expose: r }) {
 		let i = e, u = $(), d = O(0);
@@ -2073,80 +2078,115 @@ var Cr = /* @__PURE__ */ yr(br, [["render", Sr]]), wr = [
 				return;
 			}
 			if (g.value = !0, h.value.length > 0 && (h.value = []), await v(), e !== D) return;
-			let t = p.value, n = C(), r = t?.clientWidth ?? 0, a = n.map((e) => e.getBoundingClientRect().width), o = a.reduce((e, t) => e + t, 0), s = [];
-			if (r > 0 && o > r && n.length > 2) {
+			let t = p.value, n = C(), r = t?.clientWidth ?? 0, a = n.map((e) => e.getBoundingClientRect().width), o = a.reduce((e, t) => e + t, 0), s = n.slice(1, -1);
+			i.collapseFirst && n.length > 1 && s.push(n[0]);
+			let c = 0;
+			if (r > 0 && o > r && n.length > 1) {
 				let e = m.value?.getBoundingClientRect().width ?? 0;
-				for (let t = 1; t < n.length - 1 && (s.push(n[t]), o -= a[t], !(o + e <= r)); t++);
+				for (; c < s.length;) {
+					let t = s[c++];
+					if (o -= a[n.indexOf(t)], o + e <= r) break;
+				}
 			}
-			h.value = s, g.value = !1;
+			let l = (e) => n.filter((t) => s.slice(0, e).includes(t));
+			for (h.value = l(c); t && c > 0 && c < s.length;) {
+				if (await v(), e !== D) return;
+				if (t.scrollWidth <= t.clientWidth + .5) break;
+				h.value = l(++c);
+			}
+			g.value = !1;
 		}
 		function M() {
 			j();
 		}
-		let I = null, R = null;
-		function B() {
-			V(), i.collapse && (typeof ResizeObserver < "u" && f.value && (I = new ResizeObserver(M), I.observe(f.value)), typeof MutationObserver < "u" && p.value && (R = new MutationObserver(M), R.observe(p.value, { childList: !0 })));
-		}
+		let I = null, R = null, B = /* @__PURE__ */ new WeakMap();
 		function V() {
+			let e = i.container;
+			return e ? typeof e == "string" ? f.value?.closest(e) ?? null : e : null;
+		}
+		function H(e) {
+			let t = !1;
+			for (let n of e) {
+				let e = n.contentRect.width;
+				B.get(n.target) !== e && (B.set(n.target, e), t = !0);
+			}
+			t && M();
+		}
+		function U() {
+			if (W(), !i.collapse) return;
+			let e = f.value;
+			if (typeof ResizeObserver < "u" && e) {
+				I = new ResizeObserver(H);
+				let t = new Set([e]);
+				e.parentElement && t.add(e.parentElement);
+				let n = V();
+				n && t.add(n);
+				for (let e of t) I.observe(e);
+			}
+			typeof MutationObserver < "u" && p.value && (R = new MutationObserver(M), R.observe(p.value, { childList: !0 }));
+		}
+		function W() {
 			I?.disconnect(), R?.disconnect(), I = null, R = null;
 		}
 		S(() => {
-			B(), M();
+			U(), M();
 		}), G(() => i.collapse, () => {
-			B(), M(), i.collapse || ne();
-		}), x(() => {
-			V(), te();
+			U(), M(), i.collapse || ae();
+		}), G(() => i.container, () => {
+			U(), M();
+		}), G(() => i.collapseFirst, M), x(() => {
+			W(), ie();
 		});
-		let H = O(!1), U = O(null), W = O(null), K = z(), { floatingStyle: q, update: J } = tr(U, W, {
+		let K = O(!1), q = O(null), J = O(null), Y = z(), { floatingStyle: X, update: Z } = tr(q, J, {
 			placement: "bottom-start",
 			offset: 4
 		});
-		function Y(e) {
+		function ee(e) {
 			return e.querySelector(":scope > :not(.uid-breadcrumb__separator):not(.uid-breadcrumb__ellipsis)");
 		}
-		let X = a(() => h.value.map((e) => {
-			let t = Y(e), n = t && t.matches("a, button") ? t : null;
+		let te = a(() => h.value.map((e) => {
+			let t = ee(e), n = t && t.matches("a, button") ? t : null;
 			return {
 				el: e,
 				label: t?.textContent?.trim() ?? "",
 				target: n
 			};
 		}));
-		function Z() {
-			return Array.from(W.value?.querySelectorAll("[role=\"menuitem\"]") ?? []);
+		function ne() {
+			return Array.from(J.value?.querySelectorAll("[role=\"menuitem\"]") ?? []);
 		}
-		async function ee(e) {
-			U.value = e, H.value = !0, await v(), J(), Z()[0]?.focus(), document.addEventListener("pointerdown", ie), window.addEventListener("resize", J), window.addEventListener("scroll", J, !0);
+		async function re(e) {
+			q.value = e, K.value = !0, await v(), Z(), ne()[0]?.focus(), document.addEventListener("pointerdown", oe), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0);
 		}
-		function te() {
-			document.removeEventListener("pointerdown", ie), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0);
+		function ie() {
+			document.removeEventListener("pointerdown", oe), window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0);
 		}
-		function ne(e = !1) {
-			H.value && (H.value = !1, te(), e && U.value?.focus());
+		function ae(e = !1) {
+			K.value && (K.value = !1, ie(), e && q.value?.focus());
 		}
-		function re(e) {
-			H.value ? ne() : ee(e);
+		function Q(e) {
+			K.value ? ae() : re(e);
 		}
-		function ie(e) {
+		function oe(e) {
 			let t = e.target;
-			W.value?.contains(t) || U.value?.contains(t) || ne();
+			J.value?.contains(t) || q.value?.contains(t) || ae();
 		}
-		function ae(e) {
-			e.target && (ne(), e.target.click());
+		function se(e) {
+			e.target && (ae(), e.target.click());
 		}
-		function Q(e) {
-			let t = Z(), n = t.indexOf(document.activeElement);
-			e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" ? (e.preventDefault(), t[t.length - 1]?.focus()) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), ne(!0)) : e.key === "Tab" && ne();
+		function ce(e) {
+			let t = ne(), n = t.indexOf(document.activeElement);
+			e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" ? (e.preventDefault(), t[t.length - 1]?.focus()) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), ae(!0)) : e.key === "Tab" && ae();
 		}
 		return G(h, (e) => {
-			e.length === 0 && ne();
+			e.length === 0 && ae();
 		}), E(Br, {
 			tick: d,
 			hidden: h,
 			menu: F(i, "collapseMenu"),
-			menuId: K,
-			menuOpen: H,
-			toggleMenu: re
+			menuId: Y,
+			menuOpen: K,
+			toggleMenu: Q
 		}), r({ recompute: j }), (r, i) => (T(), c("nav", {
 			ref_key: "navRef",
 			ref: f,
@@ -2170,28 +2210,28 @@ var Cr = /* @__PURE__ */ yr(br, [["render", Sr]]), wr = [
 				class: "uid-breadcrumb__item uid-breadcrumb__probe",
 				style: b({ "--uid-breadcrumb-sep": `'${e.separator}'` }),
 				"aria-hidden": "true"
-			}, [...i[0] ||= [l("span", { class: "uid-breadcrumb__separator" }, null, -1), l("span", { class: "uid-breadcrumb__ellipsis" }, "…", -1)]], 4)) : s("", !0),
+			}, [i[0] ||= l("span", { class: "uid-breadcrumb__separator" }, null, -1), l("span", { class: y(["uid-breadcrumb__ellipsis", { "uid-breadcrumb__ellipsis--button": e.collapseMenu }]) }, "…", 2)], 4)) : s("", !0),
 			e.collapse && e.collapseMenu ? (T(), o(n, {
 				key: 1,
 				to: "body"
-			}, [H.value ? (T(), c("div", {
+			}, [K.value ? (T(), c("div", {
 				key: 0,
-				id: L(K),
+				id: L(Y),
 				ref_key: "menuRef",
-				ref: W,
+				ref: J,
 				class: "uid-breadcrumb__menu",
 				role: "menu",
 				"aria-label": L(u).breadcrumb?.showHidden,
-				style: b(L(q)),
-				onKeydown: Q
-			}, [(T(!0), c(t, null, k(X.value, (e, t) => (T(), c("button", {
+				style: b(L(X)),
+				onKeydown: ce
+			}, [(T(!0), c(t, null, k(te.value, (e, t) => (T(), c("button", {
 				key: t,
 				type: "button",
 				role: "menuitem",
 				class: "uid-breadcrumb__menu-item",
 				tabindex: "-1",
 				"aria-disabled": e.target ? void 0 : "true",
-				onClick: (t) => ae(e)
+				onClick: (t) => se(e)
 			}, P(e.label), 9, Ur))), 128))], 44, Hr)) : s("", !0)])) : s("", !0)
 		], 10, Vr));
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dskripchenko/ui",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Vue 3 component, token, and theme library on CSS custom properties",
   "keywords": [
     "vue",