@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -0,0 +1,518 @@
+import e from "./AcButton.js";
+import { statusMeta as t } from "./status.js";
+import n from "../charts/ChartFrame.js";
+import { bindItemHover as r, loadOnce as i, useEChart as a } from "../charts/echarts.js";
+import { chartColor as o, formatCompact as s } from "../charts/shared.js";
+import { computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as ee, createVNode as m, defineComponent as h, getCurrentInstance as te, normalizeStyle as g, openBlock as _, ref as v, renderSlot as ne, shallowRef as re, toDisplayString as y, unref as b, useId as ie, watch as x, withCtx as S } from "vue";
+import { MapPinOff as ae, Minus as oe, Plus as se, RotateCcw as ce } from "@lucide/vue";
+import { registerMap as C, use as le } from "echarts/core";
+import { EffectScatterChart as ue, ScatterChart as de } from "echarts/charts";
+import { GeoComponent as fe } from "echarts/components";
+import { LabelLayout as pe } from "echarts/features";
+//#region src/lib/components/AcMapChart.vue?vue&type=script&setup=true&lang.ts
+var me = { class: "absolute top-2 right-2 flex flex-col gap-1" }, he = { class: "font-medium text-heading" }, ge = {
+	key: 0,
+	class: "mt-0.5 text-muted"
+}, _e = {
+	key: 2,
+	class: "mt-1.5 flex justify-between gap-4 border-t border-border pt-1.5"
+}, ve = { class: "text-muted" }, ye = { class: "font-medium text-heading tabular-nums" }, w = 2, be = 1.9, T = .75, E = 8, D = 8, xe = .7, O = /*@__PURE__*/ h({
+	__name: "AcMapChart",
+	props: {
+		points: {},
+		height: { default: 360 },
+		pointSize: {
+			type: [Number, Function],
+			default: 10
+		},
+		statusLabels: { default: void 0 },
+		statusColors: { default: void 0 },
+		legend: { default: "bottom" },
+		legendValues: {
+			type: Boolean,
+			default: !0
+		},
+		pulse: {
+			type: [Boolean, Array],
+			default: !1
+		},
+		labels: {
+			type: Boolean,
+			default: !1
+		},
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		zoomExtent: { default: () => [1, 8] },
+		fitToPoints: {
+			type: Boolean,
+			default: !1
+		},
+		geoJson: { default: void 0 },
+		valueLabel: { default: "Value" },
+		valueFormatter: {
+			type: Function,
+			default: void 0
+		},
+		pointsLabel: { default: "locations" },
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No locations to show yet" },
+		title: { default: "" },
+		description: { default: "" },
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["point-click"],
+	setup(h, { emit: O }) {
+		le([
+			fe,
+			de,
+			ue,
+			pe
+		]);
+		let k = h, Se = O, A = [
+			"success",
+			"info",
+			"pending",
+			"warning",
+			"danger",
+			"neutral"
+		], Ce = {
+			success: o("success", 0),
+			info: o("info", 0),
+			pending: o("pending", 0),
+			warning: o("warning", 0),
+			danger: o("danger", 0),
+			neutral: o("chart-7", 0)
+		}, we = {
+			success: "Healthy",
+			info: "Info",
+			pending: "Pending",
+			warning: "Degraded",
+			danger: "Down",
+			neutral: "Unknown"
+		}, Te = ie(), Ee = !!te()?.vnode.props?.onPointClick, j = v(), M = v([]), N = v(0), P = v(null), F = v(), I = re(), De = 0, L = null;
+		function R(e) {
+			return e.status?.trim() || "neutral";
+		}
+		function z(e) {
+			if (A.includes(e)) return e;
+			let n = t(e).tone;
+			return n === "default" ? "neutral" : n;
+		}
+		function B(e) {
+			return k.statusLabels?.[e] ?? we[e] ?? t(e).label;
+		}
+		function V(e) {
+			let t = k.statusColors?.[e];
+			return t ? o(t, 0) : Ce[z(e)];
+		}
+		function H(e) {
+			return e.color ? o(e.color, 0) : V(R(e));
+		}
+		function Oe(e) {
+			return typeof k.pointSize == "function" ? k.pointSize(e) : k.pointSize;
+		}
+		function U(e) {
+			return k.valueFormatter ? k.valueFormatter(e) : s(e);
+		}
+		function ke(e) {
+			if (!k.pulse) return !1;
+			let t = R(e);
+			return k.pulse === !0 ? z(t) === "success" : k.pulse.includes(t) || k.pulse.includes(z(t));
+		}
+		function Ae(e) {
+			return /^.[a-z]/.test(e) ? e.charAt(0).toLowerCase() + e.slice(1) : e;
+		}
+		function je(e) {
+			return `${`${Math.abs(e.latitude).toFixed(2)}° ${e.latitude >= 0 ? "N" : "S"}`}, ${`${Math.abs(e.longitude).toFixed(2)}° ${e.longitude >= 0 ? "E" : "W"}`}`;
+		}
+		function W(e) {
+			return Math.min(k.zoomExtent[1], Math.max(k.zoomExtent[0], e));
+		}
+		function G(e) {
+			let t = [
+				Infinity,
+				Infinity,
+				-Infinity,
+				-Infinity
+			];
+			function n(e) {
+				if (Array.isArray(e)) {
+					if (typeof e[0] == "number" && typeof e[1] == "number") {
+						t[0] = Math.min(t[0], e[0]), t[1] = Math.min(t[1], e[1]), t[2] = Math.max(t[2], e[0]), t[3] = Math.max(t[3], e[1]);
+						return;
+					}
+					e.forEach(n);
+				}
+			}
+			for (let t of e.features) n(t.geometry?.coordinates);
+			return t;
+		}
+		function K(e, t, n) {
+			let r = (e) => n ? e[0] >= t : e[0] <= t, i = [];
+			return e.forEach((n, a) => {
+				let o = e[(a + e.length - 1) % e.length];
+				r(o) !== r(n) && i.push([t, o[1] + (n[1] - o[1]) * (t - o[0]) / (n[0] - o[0])]), r(n) && i.push(n);
+			}), i;
+		}
+		function Me(e) {
+			if (!e.some((e) => e.some((t, n) => n > 0 && Math.abs(t[0] - e[n - 1][0]) > 180))) return [e];
+			let t = e.map((e) => {
+				let t = e[0][0];
+				return e.map((e) => {
+					let n = e[0];
+					for (; n - t > 180;) n -= 360;
+					for (; n - t < -180;) n += 360;
+					return t = n, [n, e[1]];
+				});
+			});
+			return [
+				-360,
+				0,
+				360
+			].flatMap((e) => {
+				let n = t.map((t) => K(K(t.map((t) => [t[0] + e, t[1]]), -180, !0), 180, !1)).filter((e) => e.length >= 3);
+				return n.length ? [n] : [];
+			});
+		}
+		async function Ne() {
+			let [{ feature: e }, t] = await Promise.all([import("topojson-client"), import("world-atlas/countries-110m.json")]), n = t.default, r = {
+				type: "FeatureCollection",
+				features: e(n, n.objects.countries).features.filter((e) => e.properties?.name !== "Antarctica").map((e) => {
+					let t = e.geometry;
+					if (!t || t.type !== "Polygon" && t.type !== "MultiPolygon") return e;
+					let n = t.type === "Polygon" ? [t.coordinates] : t.coordinates;
+					return {
+						...e,
+						geometry: {
+							type: "MultiPolygon",
+							coordinates: n.flatMap(Me)
+						}
+					};
+				})
+			};
+			return C("ac-world", r), r;
+		}
+		async function q() {
+			let e = k.geoJson;
+			if (e) {
+				let t = `ac-map-${Te}-${++De}`;
+				C(t, e), I.value = G(e), F.value = t;
+				return;
+			}
+			let t = await i("world-map", Ne);
+			k.geoJson || (I.value = G(t), F.value = "ac-world");
+		}
+		let J = c(() => {
+			let e = /* @__PURE__ */ new Map();
+			for (let t of k.points) e.set(R(t), (e.get(R(t)) ?? 0) + 1);
+			let t = [...e.keys()];
+			return t.sort((e, t) => A.indexOf(z(e)) - A.indexOf(z(t))), t.map((t) => ({
+				key: t,
+				label: B(t),
+				color: V(t),
+				count: e.get(t)
+			}));
+		}), Pe = c(() => J.value.map((e) => ({
+			key: e.key,
+			name: e.label,
+			color: e.color,
+			value: k.legendValues ? String(e.count) : void 0
+		}))), Y = c(() => k.fitToPoints || !N.value ? k.height : Math.min(k.height, Math.round(N.value / be))), X = c(() => k.points.some((e) => e.status)), Z = c(() => k.points.some((e) => e.description)), Q = c(() => k.points.some((e) => typeof e.value == "number")), Fe = c(() => ({
+			columns: [
+				"Name",
+				...X.value ? ["Status"] : [],
+				...Z.value ? ["Details"] : [],
+				...Q.value ? [k.valueLabel] : [],
+				"Coordinates"
+			],
+			rows: k.points.map((e) => [
+				e.label,
+				...X.value ? [B(R(e))] : [],
+				...Z.value ? [e.description ?? ""] : [],
+				...Q.value ? [typeof e.value == "number" ? U(e.value) : "–"] : [],
+				je(e)
+			])
+		})), Ie = c(() => {
+			let e = J.value.map((e) => `${e.count} ${Ae(e.label)}`).join(", "), t = `World map, ${k.points.length} ${k.pointsLabel}${X.value ? `: ${e}` : ""}.`;
+			return [k.title, k.description || t].filter(Boolean).join(". ");
+		}), Le = c(() => {
+			let e = I.value;
+			if (!e) return {
+				zoom: W(1),
+				center: void 0
+			};
+			let t = {
+				zoom: W(1),
+				center: [(e[0] + e[2]) / 2, (e[1] + e[3]) / 2]
+			};
+			if (!k.fitToPoints || !k.points.length || !N.value) return t;
+			let n = k.points.map((e) => e.longitude), r = k.points.map((e) => e.latitude), [i, a, o, s] = [
+				Math.min(...n),
+				Math.max(...n),
+				Math.min(...r),
+				Math.max(...r)
+			], c = N.value - 16, l = Y.value - 16, u = e[2] - e[0], d = e[3] - e[1], f = Math.min(c, u / d * l * T) / u, p = f / T;
+			return {
+				zoom: W(Math.min(c / (Math.max(a - i, D) * f), l / (Math.max(s - o, D) * p)) * xe),
+				center: [(i + a) / 2, (o + s) / 2]
+			};
+		});
+		function Re(e, t) {
+			let n = H(t);
+			return {
+				name: t.label,
+				value: [t.longitude, t.latitude],
+				point: k.points.indexOf(t),
+				symbolSize: Oe(t),
+				itemStyle: { color: e.color(n) },
+				emphasis: { itemStyle: {
+					shadowBlur: 10,
+					shadowColor: e.alpha(n, .6)
+				} }
+			};
+		}
+		function ze(e) {
+			if (!F.value) return {};
+			let t = L ?? Le.value, n = k.animation && !e.reducedMotion, r = k.points.filter((e) => !M.value.includes(R(e))), i = e.reducedMotion ? [] : r.filter(ke), a = r.filter((e) => !i.includes(e)), o = {
+				coordinateSystem: "geo",
+				symbol: "circle",
+				cursor: Ee ? "pointer" : "default",
+				itemStyle: {
+					borderColor: e.surface,
+					borderWidth: 1.5
+				},
+				emphasis: { scale: 1.4 },
+				label: {
+					show: k.labels,
+					position: "bottom",
+					distance: 4,
+					formatter: "{b}",
+					color: e.muted,
+					fontSize: 11,
+					fontFamily: e.font,
+					textBorderColor: e.surface,
+					textBorderWidth: 2
+				},
+				labelLayout: { hideOverlap: !0 }
+			};
+			return {
+				animation: n,
+				geo: {
+					map: F.value,
+					roam: k.zoom,
+					silent: !0,
+					zoom: t.zoom,
+					center: t.center,
+					scaleLimit: {
+						min: k.zoomExtent[0],
+						max: k.zoomExtent[1]
+					},
+					aspectScale: T,
+					left: E,
+					right: E,
+					top: E,
+					bottom: E,
+					preserveAspect: "contain",
+					label: { show: !1 },
+					itemStyle: {
+						areaColor: e.sunken,
+						borderColor: e.borderDark,
+						borderWidth: .5
+					},
+					emphasis: { disabled: !0 },
+					select: { disabled: !0 }
+				},
+				series: [{
+					...o,
+					id: "still",
+					type: "scatter",
+					data: a.map((t) => Re(e, t))
+				}, {
+					...o,
+					id: "pulsing",
+					type: "effectScatter",
+					data: i.map((t) => Re(e, t)),
+					showEffectOn: "render",
+					rippleEffect: {
+						brushType: "stroke",
+						scale: 3,
+						period: 2.5
+					}
+				}]
+			};
+		}
+		function Be(e, t, n) {
+			let r = e ? k.points[e.point] : void 0;
+			if (!r || !k.tooltip) return;
+			let i = R(r), a = typeof r.value == "number" ? r.value : null;
+			P.value = {
+				clientX: t,
+				clientY: n,
+				title: r.label,
+				items: [{
+					key: i,
+					name: B(i),
+					color: H(r),
+					value: a,
+					formatted: a === null ? "" : U(a)
+				}],
+				datum: r,
+				index: e.point
+			};
+		}
+		let { chart: Ve } = a({
+			host: j,
+			renderer: () => k.renderer,
+			prepare: q,
+			option: ze,
+			setup: (e) => {
+				r(e, (e) => Be(e.data, e.clientX, e.clientY), () => P.value = null), e.on("click", (e) => {
+					let t = k.points[e.data?.point ?? -1];
+					t && Se("point-click", t);
+				}), e.on("georoam", () => {
+					let t = e.getOption().geo?.[0];
+					t?.zoom !== void 0 && t.center && (L = {
+						zoom: t.zoom,
+						center: [...t.center]
+					});
+				});
+			}
+		});
+		function $(e) {
+			let t = Ve.value;
+			t && t.dispatchAction({
+				type: "geoRoam",
+				geoIndex: 0,
+				zoom: e,
+				originX: t.getWidth() / 2,
+				originY: t.getHeight() / 2
+			});
+		}
+		function He() {
+			$(w);
+		}
+		function Ue() {
+			$(1 / w);
+		}
+		function We() {
+			L = null;
+			let e = Le.value;
+			Ve.value?.setOption({ geo: [{
+				zoom: e.zoom,
+				center: e.center
+			}] });
+		}
+		return x(() => k.geoJson, () => void q()), x([() => k.zoom, () => k.fitToPoints], () => L = null), (t, r) => (_(), l(n, {
+			hidden: M.value,
+			"onUpdate:hidden": r[0] ||= (e) => M.value = e,
+			width: N.value,
+			"onUpdate:width": r[1] ||= (e) => N.value = e,
+			testid: "ac-map-chart",
+			height: Y.value,
+			loading: h.loading,
+			empty: !h.points.length,
+			"empty-text": h.emptyText,
+			"empty-icon": b(ae),
+			legend: h.legend,
+			"legend-items": Pe.value,
+			summary: Ie.value,
+			title: h.title,
+			description: h.description,
+			table: Fe.value,
+			tip: P.value,
+			tooltip: h.tooltip
+		}, p({
+			tooltip: S(({ datum: e, items: n }) => [ne(t.$slots, "tooltip", {
+				point: e,
+				statusLabel: n[0]?.name ?? "",
+				color: n[0]?.color ?? "",
+				formattedValue: n[0]?.formatted ?? ""
+			}, () => [
+				f("p", he, y(e.label), 1),
+				e.description ? (_(), d("p", ge, y(e.description), 1)) : u("", !0),
+				e.status && n[0] ? (_(), d("p", {
+					key: 1,
+					class: "mt-2 inline-flex h-5 items-center gap-1.5 rounded-full px-2 font-medium text-heading",
+					style: g({ backgroundColor: `color-mix(in srgb, ${n[0].color} 14%, transparent)` })
+				}, [f("span", {
+					class: "size-1.5 shrink-0 rounded-full",
+					style: g({ backgroundColor: n[0].color }),
+					"aria-hidden": "true"
+				}, null, 4), ee(" " + y(n[0].name), 1)], 4)) : u("", !0),
+				n[0]?.formatted ? (_(), d("p", _e, [f("span", ve, y(h.valueLabel), 1), f("span", ye, y(n[0].formatted), 1)])) : u("", !0)
+			])]),
+			default: S(() => [f("div", {
+				ref_key: "host",
+				ref: j,
+				class: "size-full"
+			}, null, 512)]),
+			_: 2
+		}, [h.zoom ? {
+			name: "controls",
+			fn: S(() => [f("div", me, [
+				m(e, {
+					color: "white",
+					size: "xs",
+					"icon-only": "",
+					title: "Zoom in",
+					onClick: He
+				}, {
+					icon: S(() => [m(b(se), { "aria-hidden": "true" })]),
+					_: 1
+				}),
+				m(e, {
+					color: "white",
+					size: "xs",
+					"icon-only": "",
+					title: "Zoom out",
+					onClick: Ue
+				}, {
+					icon: S(() => [m(b(oe), { "aria-hidden": "true" })]),
+					_: 1
+				}),
+				m(e, {
+					color: "white",
+					size: "xs",
+					"icon-only": "",
+					title: "Reset view",
+					onClick: We
+				}, {
+					icon: S(() => [m(b(ce), { "aria-hidden": "true" })]),
+					_: 1
+				})
+			])]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -3,8 +3,10 @@ export interface Props {
     title?: string;
     /** Optional line under the title. */
     description?: string;
-    /** Width: `small` 440px, `normal` 520px, `medium` 800px, `large` 1000px, `full` viewport minus 64px. */
-    size?: "small" | "normal" | "medium" | "large" | "full";
+    /** Width: `xsmall` 384px, `small` 448px, `normal` 576px, `medium` 800px, `large` 1000px, `xlarge` 1152px, `full` viewport minus 64px. */
+    size?: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
+    /** `framed` has a header and footer bar and a close button; `plain` is one padded card (title, body, buttons) on a lighter backdrop, as cloud-ui's confirm dialogs. */
+    variant?: "framed" | "plain";
     /** Shows the close button and allows Escape to close. Turn off while a required action runs. */
     closable?: boolean;
     /** Closes when the backdrop is clicked. */
@@ -37,9 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    variant: "framed" | "plain";
     title: string;
     description: string;
-    size: "small" | "normal" | "medium" | "large" | "full";
+    size: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
     closable: boolean;
     closeOnOutsideClick: boolean;
     hideFooter: boolean;