@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/components/AcTooltip.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,14 @@
-import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as ee, createVNode as te, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as ne, openBlock as m, ref as h, renderList as re, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, useId as y, useSlots as ie, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
-import { CircleAlert as w, CircleCheck as ae, Info as oe, TriangleAlert as se } from "@lucide/vue";
+import { fixedFrame as e } from "./fixedFrame.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as ee, defineComponent as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as te, onMounted as m, onUpdated as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, useId as ne, useSlots as re, vShow as ie, watch as S, withCtx as ae, withDirectives as oe } from "vue";
+import { CircleAlert as se, CircleCheck as ce, Info as le, TriangleAlert as ue } from "@lucide/vue";
 //#region src/lib/components/AcTooltip.vue?vue&type=script&setup=true&lang.ts
-var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class: "min-w-0 flex-1" }, T = {
+var C = ["data-side"], de = { class: "flex items-start gap-2" }, w = { class: "min-w-0 flex-1" }, fe = {
 	key: 0,
 	class: "font-semibold text-on-tooltip"
-}, de = {
+}, pe = {
 	key: 1,
 	class: "ml-1 flex shrink-0 items-center gap-0.5 self-center"
-}, E = null, D = 0, fe = 400, O = /*@__PURE__*/ c({
+}, T = null, E = 0, me = 400, D = /*@__PURE__*/ u({
 	__name: "AcTooltip",
 	props: {
 		content: { default: "" },
@@ -31,13 +32,13 @@ var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class:
 		},
 		maxWidth: { default: "280px" }
 	},
-	setup(c) {
-		let O = c, pe = ie(), k = {
+	setup(u) {
+		let D = u, he = re(), O = {
 			top: "bottom",
 			bottom: "top",
 			left: "right",
 			right: "left"
-		}, me = {
+		}, k = {
 			top: "translate-y-1",
 			bottom: "-translate-y-1",
 			left: "translate-x-1",
@@ -49,26 +50,26 @@ var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class:
 			right: "border-b border-l"
 		}, j = {
 			info: {
-				icon: oe,
+				icon: le,
 				class: "text-info"
 			},
 			success: {
-				icon: ae,
+				icon: ce,
 				class: "text-success"
 			},
 			warning: {
-				icon: se,
+				icon: ue,
 				class: "text-warning"
 			},
 			danger: {
-				icon: w,
+				icon: se,
 				class: "text-danger"
 			}
-		}, M = `${y()}-tip`, N = h(null), P = h(null), F = h(!1), I = h(O.placement), L = h({
+		}, M = `${ne()}-tip`, N = _(null), P = _(null), F = _(!1), I = _(D.placement), L = _({
 			top: 0,
 			left: 0,
 			arrow: 0
-		}), R, z, B = null, V = r(() => !O.disabled && !!(O.content || O.title || pe.content)), H = r(() => O.tone === "neutral" ? null : j[O.tone]), he = r(() => {
+		}), R, z, B = null, V = i(() => !D.disabled && !!(D.content || D.title || he.content)), H = i(() => D.tone === "neutral" ? null : j[D.tone]), ge = i(() => {
 			let { top: e, left: t, arrow: n } = L.value, r = {
 				top: `${n}px 100%`,
 				bottom: `${n}px 0`,
@@ -78,10 +79,10 @@ var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class:
 			return {
 				top: `${e}px`,
 				left: `${t}px`,
-				maxWidth: O.maxWidth,
+				maxWidth: D.maxWidth,
 				transformOrigin: r
 			};
-		}), ge = r(() => {
+		}), _e = i(() => {
 			let e = `${L.value.arrow - 5}px`, t = "-6px";
 			return {
 				top: {
@@ -116,65 +117,65 @@ var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class:
 			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== M);
 			t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
-		function _e() {
+		function ve() {
 			let e = N.value;
 			return e ? [e, ...e.querySelectorAll("*")].some((e) => e.scrollWidth > e.clientWidth + 1) : !1;
 		}
-		async function ve() {
-			(!O.overflowOnly || _e()) && (E && E !== q && E(), E = q, F.value = !0, await l(), ye());
+		async function ye() {
+			(!D.overflowOnly || ve()) && (T && T !== q && T(), T = q, F.value = !0, await d(), be());
 		}
 		function K(e) {
 			if (clearTimeout(z), !V.value || F.value) return;
 			clearTimeout(R);
-			let t = E !== null || Date.now() - D < fe;
-			R = setTimeout(ve, t ? 0 : e);
+			let t = T !== null || Date.now() - E < me;
+			R = setTimeout(ye, t ? 0 : e);
 		}
 		function q() {
-			clearTimeout(R), clearTimeout(z), F.value && (F.value = !1, D = Date.now(), E === q && (E = null));
+			clearTimeout(R), clearTimeout(z), F.value && (F.value = !1, E = Date.now(), T === q && (T = null));
 		}
 		function J(e = 0) {
 			clearTimeout(R), clearTimeout(z), e ? z = setTimeout(q, e) : q();
 		}
-		function Y(e, t, n, r) {
-			return e === "top" ? t.top - 8 - r >= 8 : e === "bottom" ? t.bottom + 8 + r <= window.innerHeight - 8 : e === "left" ? t.left - 8 - n >= 8 : t.right + 8 + n <= window.innerWidth - 8;
+		function Y(e, t, n, r, i) {
+			return e === "top" ? t.top - 8 - i >= n.top + 8 : e === "bottom" ? t.bottom + 8 + i <= n.bottom - 8 : e === "left" ? t.left - 8 - r >= n.left + 8 : t.right + 8 + r <= n.right - 8;
 		}
 		function X(e, t, n) {
-			return O.align === "start" ? e : O.align === "end" ? e + t - n : e + (t - n) / 2;
+			return D.align === "start" ? e : D.align === "end" ? e + t - n : e + (t - n) / 2;
 		}
 		function Z(e, t, n) {
 			return Math.min(Math.max(e, t), Math.max(t, n));
 		}
-		function ye() {
-			let e = U() ?? N.value;
-			if (!e || !P.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = P.value, i = O.placement, a = Y(i, t, n, r) || !Y(k[i], t, n, r) ? i : k[i];
-			if (I.value = a, a === "top" || a === "bottom") {
-				let e = Z(X(t.left, t.width, n), 8, window.innerWidth - 8 - n), i = Z(t.left + t.width / 2 - e, 12, n - 12);
+		function be() {
+			let t = U() ?? N.value;
+			if (!t || !P.value) return;
+			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = P.value, o = D.placement, s = Y(o, n, r, i, a) || !Y(O[o], n, r, i, a) ? o : O[o];
+			if (I.value = s, s === "top" || s === "bottom") {
+				let e = Z(X(n.left - r.left, n.width, i), 8, r.width - 8 - i), t = Z(n.left - r.left + n.width / 2 - e, 12, i - 12);
 				L.value = {
-					top: Math.round(a === "top" ? t.top - 8 - r : t.bottom + 8),
+					top: Math.round((s === "top" ? n.top - 8 - a : n.bottom + 8) - r.top),
 					left: Math.round(e),
-					arrow: i
+					arrow: t
 				};
 			} else {
-				let e = Z(X(t.top, t.height, r), 8, window.innerHeight - 8 - r), i = Z(t.top + t.height / 2 - e, 12, r - 12);
+				let e = Z(X(n.top - r.top, n.height, a), 8, r.height - 8 - a), t = Z(n.top - r.top + n.height / 2 - e, 12, a - 12);
 				L.value = {
 					top: Math.round(e),
-					left: Math.round(a === "left" ? t.left - 8 - n : t.right + 8),
-					arrow: i
+					left: Math.round((s === "left" ? n.left - 8 - i : n.right + 8) - r.left),
+					arrow: t
 				};
 			}
 		}
-		function be(e) {
-			e.pointerType !== "touch" && K(O.delay);
-		}
 		function xe(e) {
-			e.target.matches(":focus-visible") && K(0);
+			e.pointerType !== "touch" && K(D.delay);
 		}
-		function Se() {
-			O.interactive && clearTimeout(z);
+		function Se(e) {
+			e.target.matches(":focus-visible") && K(0);
 		}
 		function Ce() {
-			O.interactive && J(120);
+			D.interactive && clearTimeout(z);
+		}
+		function we() {
+			D.interactive && J(120);
 		}
 		function Q() {
 			J();
@@ -182,60 +183,60 @@ var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class:
 		function $(e) {
 			e.key === "Escape" && F.value && J();
 		}
-		return x(F, (e) => {
+		return S(F, (e) => {
 			e ? (document.addEventListener("keydown", $), window.addEventListener("scroll", Q, !0)) : (document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0));
-		}), x(V, (e) => {
+		}), S(V, (e) => {
 			W(), e || J();
-		}), p(W), ne(W), f(() => {
-			J(), E === q && (E = null), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), B && G(B);
-		}), (r, l) => (m(), o("span", {
+		}), m(W), h(W), te(() => {
+			J(), T === q && (T = null), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), B && G(B);
+		}), (e, i) => (g(), s("span", {
 			ref_key: "root",
 			ref: N,
 			class: "inline-flex max-w-full",
 			"data-ac-ds": "",
 			"data-testid": "ac-tooltip",
-			onPointerenter: be,
-			onPointerleave: l[0] ||= (e) => J(120),
-			onPointerdown: l[1] ||= (e) => J(),
-			onFocusin: xe,
-			onFocusout: l[2] ||= (e) => J()
-		}, [g(r.$slots, "default"), (m(), i(t, { to: "body" }, [te(n, {
+			onPointerenter: xe,
+			onPointerleave: i[0] ||= (e) => J(120),
+			onPointerdown: i[1] ||= (e) => J(),
+			onFocusin: Se,
+			onFocusout: i[2] ||= (e) => J()
+		}, [y(e.$slots, "default"), (g(), a(n, { to: "body" }, [ee(r, {
 			"enter-active-class": "transition-[opacity,scale,translate] duration-150 ease-out motion-reduce:transition-none",
-			"enter-from-class": `opacity-0 scale-95 ${me[I.value]}`,
+			"enter-from-class": `opacity-0 scale-95 ${k[I.value]}`,
 			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
 			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: S(() => [C(s("div", {
+			default: ae(() => [oe(c("div", {
 				id: M,
 				ref_key: "tip",
 				ref: P,
 				role: "tooltip",
-				class: u(["fixed z-[100] w-max rounded-10 border border-white/10 bg-tooltip text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", [c.title ? "px-3 py-2" : "px-2.5 py-1.5", c.interactive ? "pointer-events-auto" : "pointer-events-none"]]),
+				class: f(["fixed z-[100] w-max rounded-10 border border-white/10 bg-tooltip text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", [u.title ? "px-3 py-2" : "px-2.5 py-1.5", u.interactive ? "pointer-events-auto" : "pointer-events-none"]]),
 				"data-side": I.value,
-				style: d(he.value),
+				style: p(ge.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-tooltip-panel",
-				onPointerenter: Se,
-				onPointerleave: Ce
-			}, [s("div", le, [
-				H.value ? (m(), i(_(H.value.icon), {
+				onPointerenter: Ce,
+				onPointerleave: we
+			}, [c("div", de, [
+				H.value ? (g(), a(b(H.value.icon), {
 					key: 0,
-					class: u(["mt-0.5 size-3.5 shrink-0", H.value.class]),
+					class: f(["mt-0.5 size-3.5 shrink-0", H.value.class]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])) : a("", !0),
-				s("div", ue, [c.title ? (m(), o("p", T, v(c.title), 1)) : a("", !0), s("div", { class: u(c.title && "mt-0.5 text-on-tooltip/75") }, [g(r.$slots, "content", {}, () => [ee(v(c.content), 1)])], 2)]),
-				c.shortcut.length ? (m(), o("span", de, [(m(!0), o(e, null, re(c.shortcut, (e) => (m(), o("kbd", {
+				}, null, 8, ["class"])) : o("", !0),
+				c("div", w, [u.title ? (g(), s("p", fe, x(u.title), 1)) : o("", !0), c("div", { class: f(u.title && "mt-0.5 text-on-tooltip/75") }, [y(e.$slots, "content", {}, () => [l(x(u.content), 1)])], 2)]),
+				u.shortcut.length ? (g(), s("span", pe, [(g(!0), s(t, null, v(u.shortcut, (e) => (g(), s("kbd", {
 					key: e,
 					class: "min-w-4 rounded-4 border border-white/15 bg-white/10 px-1 text-center font-mono text-xm leading-4 text-on-tooltip/75"
-				}, v(e), 1))), 128))])) : a("", !0)
-			]), s("span", {
+				}, x(e), 1))), 128))])) : o("", !0)
+			]), c("span", {
 				"aria-hidden": "true",
-				class: u(["absolute size-2.5 rotate-45 border-white/10 bg-tooltip", A[I.value]]),
-				style: d(ge.value)
-			}, null, 6)], 46, ce), [[b, F.value]])]),
+				class: f(["absolute size-2.5 rotate-45 border-white/10 bg-tooltip", A[I.value]]),
+				style: p(_e.value)
+			}, null, 6)], 46, C), [[ie, F.value]])]),
 			_: 3
 		}, 8, ["enter-from-class"])]))], 544));
 	}
 });
 //#endregion
-export { O as default };
+export { D as default };

package/dist/lib/components/AcUserMenu.vue.d.ts

@@ -46,9 +46,15 @@ export interface Props {
     workspaces?: UserMenuWorkspace[];
     /** Heading of the workspace list. */
     workspacesLabel?: string;
+    /** Shows the name, email and avatar at the top of the menu. cloud-ui's workspace menu leaves it out and starts with the workspaces. */
+    showProfile?: boolean;
+    /** Shows the sign-out icon before `logoutLabel`. cloud-ui's workspace menu shows the text only. */
+    logoutIcon?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
+    /** Replaces the round avatar in the trigger, e.g. a square logo for an organisation workspace. */
+    avatar?: () => unknown;
     /** Custom rows after `items`. Give each focusable row `role="menuitem"`, `tabindex="-1"` and the `itemClass` classes; call `close()` after an action. */
     default?: (props: {
         close: () => void;
@@ -88,6 +94,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     logoutLabel: string;
     workspaces: UserMenuWorkspace[];
     workspacesLabel: string;
+    showProfile: boolean;
+    logoutIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;