@ac-design/design-system 2.2.0 → 2.3.0

package/dist/lib/charts/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
-import e from "../components/AcSkeleton.js";
-import t from "../components/AcEmptyState.js";
-import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, useModel as b, watch as x } from "vue";
+import { fixedFrame as e } from "../components/fixedFrame.js";
+import t from "../components/AcSkeleton.js";
+import n from "../components/AcEmptyState.js";
+import { Fragment as r, Teleport as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, useModel as x, watch as S } from "vue";
 //#region src/lib/charts/ChartFrame.vue?vue&type=script&setup=true&lang.ts
-var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate" }, T = {
+var C = ["data-testid"], w = ["aria-pressed", "onClick"], T = { class: "truncate" }, E = {
 	key: 0,
 	class: "ml-auto pl-3 font-medium text-heading tabular-nums"
-}, E = ["role", "aria-label"], D = ["aria-label"], O = {
+}, D = ["role", "aria-label"], O = ["aria-label"], k = {
 	key: 4,
 	class: "sr-only"
-}, k = {
+}, A = {
 	key: 5,
 	class: "sr-only"
-}, A = {
+}, j = {
 	scope: "row",
 	class: "text-left"
-}, j = {
+}, M = {
 	key: 0,
 	class: "mb-1.5 font-medium text-heading"
-}, M = { class: "m-0 flex list-none flex-col gap-1 p-0" }, N = { class: "min-w-0 flex-1 truncate text-muted" }, P = { class: "pl-4 font-medium text-heading tabular-nums" }, F = {
+}, N = { class: "m-0 flex list-none flex-col gap-1 p-0" }, P = { class: "min-w-0 flex-1 truncate text-muted" }, F = { class: "pl-4 font-medium text-heading tabular-nums" }, I = {
 	key: 1,
 	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
-}, I = { class: "font-medium text-heading tabular-nums" }, L = 14, R = 300, z = 200, B = /*@__PURE__*/ l({
+}, L = { class: "font-medium text-heading tabular-nums" }, R = 14, z = 300, B = 200, V = /*@__PURE__*/ u({
 	__name: "ChartFrame",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		testid: {},
 		height: {},
 		loading: { type: Boolean },
@@ -48,126 +49,126 @@ var S = ["data-testid"], C = ["aria-pressed", "onClick"], w = { class: "truncate
 		widthModifiers: {}
 	}),
 	emits: ["update:hidden", "update:width"],
-	setup(l) {
-		let u = l, B = b(l, "hidden"), V = b(l, "width"), H = g(), U;
-		function W(e) {
-			let t = B.value.includes(e);
-			!t && u.legendItems.length - B.value.length <= 1 || (B.value = t ? B.value.filter((t) => t !== e) : [...B.value, e]);
-		}
+	setup(u) {
+		let d = u, V = x(u, "hidden"), H = x(u, "width"), U = _(), W;
 		function G(e) {
-			let t = e.clientX > window.innerWidth - R, n = e.clientY > window.innerHeight - z;
+			let t = V.value.includes(e);
+			!t && d.legendItems.length - V.value.length <= 1 || (V.value = t ? V.value.filter((t) => t !== e) : [...V.value, e]);
+		}
+		function K(t) {
+			let n = e(), r = t.clientX > n.right - z, i = t.clientY > n.bottom - B;
 			return {
-				left: t ? void 0 : `${e.clientX + L}px`,
-				right: t ? `${window.innerWidth - e.clientX + L}px` : void 0,
-				top: n ? void 0 : `${e.clientY + L}px`,
-				bottom: n ? `${window.innerHeight - e.clientY + L}px` : void 0
+				left: r ? void 0 : `${t.clientX - n.left + R}px`,
+				right: r ? `${n.right - t.clientX + R}px` : void 0,
+				top: i ? void 0 : `${t.clientY - n.top + R}px`,
+				bottom: i ? `${n.bottom - t.clientY + R}px` : void 0
 			};
 		}
-		function K() {
-			U?.disconnect(), H.value && typeof ResizeObserver < "u" && (U = new ResizeObserver(([e]) => {
-				e && (V.value = Math.round(e.contentRect.width));
-			}), U.observe(H.value));
+		function q() {
+			W?.disconnect(), U.value && typeof ResizeObserver < "u" && (W = new ResizeObserver(([e]) => {
+				e && (H.value = Math.round(e.contentRect.width));
+			}), W.observe(U.value));
 		}
-		return x(H, K), m(K), p(() => U?.disconnect()), (u, p) => (h(), o("figure", {
-			class: d(["m-0 flex w-full min-w-0 gap-3", l.legend === "right" ? "flex-wrap items-center justify-center gap-x-10" : "flex-col"]),
+		return S(U, q), h(q), m(() => W?.disconnect()), (e, d) => (g(), s("figure", {
+			class: f(["m-0 flex w-full min-w-0 gap-3", u.legend === "right" ? "flex-wrap items-center justify-center gap-x-10" : "flex-col"]),
 			"data-ac-ds": "",
 			"data-ac-chart": "",
-			"data-testid": l.testid
+			"data-testid": u.testid
 		}, [
-			l.legend !== "none" && l.legendItems.length > 1 && !l.loading && !l.empty ? (h(), o("ul", {
+			u.legend !== "none" && u.legendItems.length > 1 && !u.loading && !u.empty ? (g(), s("ul", {
 				key: 0,
-				class: d(["m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0", [
-					l.legend === "bottom" && "order-last",
-					l.legend === "right" && "order-last max-w-[320px] min-w-[180px] flex-1 flex-col gap-y-2",
-					l.legendCentered && l.legend !== "right" && "justify-center"
+				class: f(["m-0 flex list-none flex-wrap gap-x-4 gap-y-1.5 p-0", [
+					u.legend === "bottom" && "order-last",
+					u.legend === "right" && "order-last max-w-[320px] min-w-[180px] flex-1 flex-col gap-y-2",
+					u.legendCentered && u.legend !== "right" && "justify-center"
 				]]),
 				"aria-label": "Legend"
-			}, [(h(!0), o(n, null, _(l.legendItems, (e) => (h(), o("li", {
+			}, [(g(!0), s(r, null, v(u.legendItems, (e) => (g(), s("li", {
 				key: e.key,
 				class: "flex"
-			}, [s("button", {
+			}, [c("button", {
 				type: "button",
-				class: d(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [B.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", l.legend === "right" && "w-full"]]),
-				"aria-pressed": !B.value.includes(e.key),
-				onClick: (t) => W(e.key)
+				class: f(["inline-flex min-w-0 cursor-pointer items-center gap-2 rounded-6 text-xs transition-colors duration-200 hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface motion-reduce:transition-none", [V.value.includes(e.key) ? "text-muted/60 line-through" : "text-muted", u.legend === "right" && "w-full"]]),
+				"aria-pressed": !V.value.includes(e.key),
+				onClick: (t) => G(e.key)
 			}, [
-				s("span", {
-					class: d(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", B.value.includes(e.key) && "opacity-30"]),
-					style: f({ backgroundColor: e.color }),
+				c("span", {
+					class: f(["size-2.5 shrink-0 rounded-full transition-opacity duration-200 motion-reduce:transition-none", V.value.includes(e.key) && "opacity-30"]),
+					style: p({ backgroundColor: e.color }),
 					"aria-hidden": "true"
 				}, null, 6),
-				s("span", w, y(e.name), 1),
-				e.value ? (h(), o("span", T, y(e.value), 1)) : a("", !0)
-			], 10, C)]))), 128))], 2)) : a("", !0),
-			l.loading ? (h(), i(e, {
+				c("span", T, b(e.name), 1),
+				e.value ? (g(), s("span", E, b(e.value), 1)) : o("", !0)
+			], 10, w)]))), 128))], 2)) : o("", !0),
+			u.loading ? (g(), a(t, {
 				key: 1,
 				shape: "rect",
-				height: `${l.height}px`,
+				height: `${u.height}px`,
 				label: "Loading chart"
-			}, null, 8, ["height"])) : l.empty ? (h(), o("div", {
+			}, null, 8, ["height"])) : u.empty ? (g(), s("div", {
 				key: 2,
 				class: "flex w-full items-center justify-center overflow-hidden",
-				style: f({ height: `${l.height}px` })
-			}, [c(t, {
+				style: p({ height: `${u.height}px` })
+			}, [l(n, {
 				size: "small",
-				icon: l.emptyIcon,
-				title: l.emptyText
-			}, null, 8, ["icon", "title"])], 4)) : (h(), o("div", {
+				icon: u.emptyIcon,
+				title: u.emptyText
+			}, null, 8, ["icon", "title"])], 4)) : (g(), s("div", {
 				key: 3,
 				ref_key: "plot",
-				ref: H,
-				class: d(["relative min-w-0", l.legend === "right" ? "max-w-full shrink-0" : "w-full"]),
-				style: f(l.legend === "right" ? {
-					height: `${l.height}px`,
-					width: `${l.height}px`
-				} : { height: `${l.height}px` }),
-				role: u.$slots.controls ? void 0 : "img",
-				"aria-label": u.$slots.controls ? void 0 : l.summary
-			}, [u.$slots.controls ? (h(), o("div", {
+				ref: U,
+				class: f(["relative min-w-0", u.legend === "right" ? "max-w-full shrink-0" : "w-full"]),
+				style: p(u.legend === "right" ? {
+					height: `${u.height}px`,
+					width: `${u.height}px`
+				} : { height: `${u.height}px` }),
+				role: e.$slots.controls ? void 0 : "img",
+				"aria-label": e.$slots.controls ? void 0 : u.summary
+			}, [e.$slots.controls ? (g(), s("div", {
 				key: 0,
 				class: "size-full",
 				role: "img",
-				"aria-label": l.summary
-			}, [v(u.$slots, "default")], 8, D)) : v(u.$slots, "default", {}, void 0, void 0, 1), v(u.$slots, "controls")], 14, E)),
-			l.title || l.description ? (h(), o("figcaption", O, y([l.title, l.description].filter(Boolean).join(". ")), 1)) : a("", !0),
-			!l.loading && !l.empty ? (h(), o("table", k, [
-				s("caption", null, y(l.title ? `${l.title}: data` : "Chart data"), 1),
-				s("thead", null, [s("tr", null, [(h(!0), o(n, null, _(l.table.columns, (e, t) => (h(), o("th", {
+				"aria-label": u.summary
+			}, [y(e.$slots, "default")], 8, O)) : y(e.$slots, "default", {}, void 0, void 0, 1), y(e.$slots, "controls")], 14, D)),
+			u.title || u.description ? (g(), s("figcaption", k, b([u.title, u.description].filter(Boolean).join(". ")), 1)) : o("", !0),
+			!u.loading && !u.empty ? (g(), s("table", A, [
+				c("caption", null, b(u.title ? `${u.title}: data` : "Chart data"), 1),
+				c("thead", null, [c("tr", null, [(g(!0), s(r, null, v(u.table.columns, (e, t) => (g(), s("th", {
 					key: t,
 					scope: "col",
 					class: "text-left"
-				}, y(e), 1))), 128))])]),
-				s("tbody", null, [(h(!0), o(n, null, _(l.table.rows, (e, t) => (h(), o("tr", { key: t }, [s("th", A, y(e[0]), 1), (h(!0), o(n, null, _(e.slice(1), (e, t) => (h(), o("td", { key: t }, y(e), 1))), 128))]))), 128))])
-			])) : a("", !0),
-			(h(), i(r, { to: "body" }, [l.tooltip && l.tip && !l.loading && !l.empty ? (h(), o("div", {
+				}, b(e), 1))), 128))])]),
+				c("tbody", null, [(g(!0), s(r, null, v(u.table.rows, (e, t) => (g(), s("tr", { key: t }, [c("th", j, b(e[0]), 1), (g(!0), s(r, null, v(e.slice(1), (e, t) => (g(), s("td", { key: t }, b(e), 1))), 128))]))), 128))])
+			])) : o("", !0),
+			(g(), a(i, { to: "body" }, [u.tooltip && u.tip && !u.loading && !u.empty ? (g(), s("div", {
 				key: 0,
 				class: "pointer-events-none fixed z-[100] w-max max-w-[280px] min-w-[160px] rounded-10 border border-border bg-surface px-3 py-2.5 text-xs text-body shadow-lg",
-				style: f(G(l.tip)),
+				style: p(K(u.tip)),
 				"aria-hidden": "true",
 				"data-ac-ds": "",
 				"data-testid": "ac-chart-tooltip"
-			}, [v(u.$slots, "tooltip", {
-				datum: l.tip.datum,
-				index: l.tip.index,
-				title: l.tip.title,
-				items: l.tip.items
+			}, [y(e.$slots, "tooltip", {
+				datum: u.tip.datum,
+				index: u.tip.index,
+				title: u.tip.title,
+				items: u.tip.items
 			}, () => [
-				l.tip.title ? (h(), o("p", j, y(l.tip.title), 1)) : a("", !0),
-				s("ul", M, [(h(!0), o(n, null, _(l.tip.items, (e) => (h(), o("li", {
+				u.tip.title ? (g(), s("p", M, b(u.tip.title), 1)) : o("", !0),
+				c("ul", N, [(g(!0), s(r, null, v(u.tip.items, (e) => (g(), s("li", {
 					key: e.key,
 					class: "flex items-center gap-2"
 				}, [
-					s("span", {
+					c("span", {
 						class: "size-2 shrink-0 rounded-full",
-						style: f({ backgroundColor: e.color })
+						style: p({ backgroundColor: e.color })
 					}, null, 4),
-					s("span", N, y(e.name), 1),
-					s("span", P, y(e.formatted), 1)
+					c("span", P, b(e.name), 1),
+					c("span", F, b(e.formatted), 1)
 				]))), 128))]),
-				l.tip.total ? (h(), o("p", F, [p[0] ||= s("span", { class: "text-muted" }, "Total", -1), s("span", I, y(l.tip.total), 1)])) : a("", !0)
-			])], 4)) : a("", !0)]))
-		], 10, S));
+				u.tip.total ? (g(), s("p", I, [d[0] ||= c("span", { class: "text-muted" }, "Total", -1), c("span", L, b(u.tip.total), 1)])) : o("", !0)
+			])], 4)) : o("", !0)]))
+		], 10, C));
 	}
 });
 //#endregion
-export { B as default };
+export { V as default };