@ac-design/design-system 2.6.1 → 2.7.0

package/dist/lib/components/AcList.js

@@ -0,0 +1,5 @@
+import e from "./AcList.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcList.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,56 @@
+import type { Component } from "vue";
+export interface ListItem {
+    /** Unique key. Defaults to the title. */
+    key?: string;
+    /** Main line of the row. */
+    title: string;
+    /** Muted second line under the title. */
+    description?: string;
+    /** A Lucide icon before the text. */
+    icon?: Component;
+    /** Route for `RouterLink` (needs vue-router in the app). */
+    to?: string | Record<string, unknown>;
+    /** Plain link, when there's no router. */
+    href?: string;
+    /** Highlights the row as the current or chosen one. */
+    selected?: boolean;
+    /** Greys the row out and blocks clicks. */
+    disabled?: boolean;
+    /** Shows a chevron at the end, for rows that open something. */
+    chevron?: boolean;
+}
+export interface Props {
+    /** Rows to render, for simple lists: `{ key?, title, description?, icon?, to?, href?, selected?, disabled?, chevron? }`. Put AcListItems in the default slot instead for custom rows. */
+    items?: ListItem[];
+    /** `plain` has no frame, for a list inside a card or panel; `card` puts the list in a bordered card. */
+    variant?: "plain" | "card";
+    /** Draws a line between rows. */
+    divided?: boolean;
+    /** `normal` 14px titles with 12px padding; `small` 12px titles with 8px padding, for side panels and dense lists. */
+    size?: "small" | "normal";
+    /** Accessible name of the list, e.g. "Regions". */
+    label?: string;
+}
+type __VLS_Slots = {
+    /** AcListItem children. Replaces `items`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: ListItem, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((item: ListItem, index: number) => any) | undefined;
+}>, {
+    variant: "plain" | "card";
+    label: string;
+    size: "small" | "normal";
+    items: ListItem[];
+    divided: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,74 @@
+import e from "./AcListItem.js";
+import { Fragment as t, computed as n, createBlock as r, createElementBlock as i, defineComponent as a, getCurrentInstance as o, mergeProps as s, normalizeClass as c, openBlock as l, provide as u, reactive as d, ref as f, renderList as p, renderSlot as m, toHandlers as h, toRef as g } from "vue";
+//#region src/lib/components/AcList.vue?vue&type=script&setup=true&lang.ts
+var _ = ["aria-label"], v = "[data-ac-list-row]:not([aria-disabled='true']):not(:disabled)", y = /*@__PURE__*/ a({
+	__name: "AcList",
+	props: {
+		items: { default: () => [] },
+		variant: { default: "plain" },
+		divided: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" },
+		label: { default: void 0 }
+	},
+	emits: ["select"],
+	setup(a, { emit: y }) {
+		let b = a, x = y, S = !!o()?.vnode.props?.onSelect, C = f(null), w = n(() => b.variant === "plain" && !b.divided), T = n(() => b.items.some((e) => e.selected !== void 0));
+		u("ac-list", d({
+			size: g(b, "size"),
+			rounded: w
+		}));
+		function E(e, t) {
+			return S ? { click: () => x("select", e, t) } : {};
+		}
+		function D(e) {
+			if (![
+				"ArrowDown",
+				"ArrowUp",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = e.target;
+			if (!t.matches("[data-ac-list-row]")) return;
+			let n = [...C.value?.querySelectorAll(v) ?? []].filter((e) => e.closest("[data-testid='ac-list']") === C.value), r = n.indexOf(t);
+			r < 0 || (e.preventDefault(), n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : Math.min(Math.max(r + (e.key === "ArrowDown" ? 1 : -1), 0), n.length - 1)]?.focus());
+		}
+		return (n, o) => (l(), i("ul", {
+			ref_key: "root",
+			ref: C,
+			role: "list",
+			class: c(["@container m-0 flex list-none flex-col p-0", [
+				a.variant === "card" && "overflow-hidden rounded-14 border border-border bg-surface",
+				a.divided && "divide-y divide-border",
+				w.value && "gap-0.5"
+			]]),
+			"aria-label": a.label,
+			"data-ac-ds": "",
+			"data-testid": "ac-list",
+			onKeydown: D
+		}, [m(n.$slots, "default", {}, () => [(l(!0), i(t, null, p(a.items, (t, n) => (l(), r(e, s({
+			key: t.key ?? t.title,
+			title: t.title,
+			description: t.description,
+			icon: t.icon,
+			to: t.to,
+			href: t.href,
+			selected: T.value ? !!t.selected : void 0,
+			disabled: t.disabled,
+			chevron: t.chevron
+		}, h(E(t, n))), null, 16, [
+			"title",
+			"description",
+			"icon",
+			"to",
+			"href",
+			"selected",
+			"disabled",
+			"chevron"
+		]))), 128))])], 42, _));
+	}
+});
+//#endregion
+export { y as default };

package/dist/lib/components/AcListItem.js

@@ -0,0 +1,5 @@
+import e from "./AcListItem.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcListItem.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,53 @@
+import type { Component } from "vue";
+export interface Props {
+    /** Main line of the row. Truncates with an ellipsis when it doesn't fit. */
+    title?: string;
+    /** Muted second line under the title, e.g. "3 datacenters". Truncates too. */
+    description?: string;
+    /** A Lucide icon before the text, e.g. `:icon="Database"`. The `leading` slot replaces it. */
+    icon?: Component;
+    /** Route to link to. Renders `RouterLink` when vue-router is installed in the app, otherwise a plain link (string routes only). */
+    to?: string | Record<string, unknown>;
+    /** Plain URL, for pages outside the app. Takes over from `to` when vue-router isn't installed. */
+    href?: string;
+    /** Highlights the row as the current or chosen one. On a link it sets `aria-current="page"`; on a button `aria-pressed`. Leave it unset on rows that don't select anything. */
+    selected?: boolean;
+    /** Greys the row out and blocks clicks. */
+    disabled?: boolean;
+    /** Shows a chevron at the end, for rows that open or zoom to something. */
+    chevron?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces `icon`, e.g. a colour dot, an avatar or a provider logo. */
+    leading?: () => unknown;
+    /** Replaces the title text, e.g. to add a badge or use a mono font. */
+    title?: () => unknown;
+    /** Replaces the description text. */
+    description?: () => unknown;
+    /** Extra content beside the text, e.g. a message column. It moves under the text when the list is narrower than 512px. */
+    default?: () => unknown;
+    /** Meta on the right, before the chevron: badges, a count, a status dot or a timestamp. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    disabled: boolean;
+    href: string;
+    to: string | Record<string, unknown>;
+    icon: Component;
+    chevron: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,105 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, inject as c, mergeProps as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { ChevronRight as _ } from "@lucide/vue";
+//#region src/lib/components/AcListItem.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	class: "m-0 min-w-0 list-none p-0",
+	"data-ac-ds": "",
+	"data-testid": "ac-list-item"
+}, y = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1 @lg:flex-row @lg:items-center" }, b = {
+	key: 1,
+	class: "flex shrink-0 items-center gap-2 text-xs text-muted"
+}, x = "aria-[current=page]:bg-accent aria-[current=true]:bg-accent aria-pressed:bg-accent", S = "group-aria-[current=page]/row:block group-aria-[current=true]/row:block group-aria-pressed/row:block", C = "group-aria-[current=page]/row:text-primary group-aria-[current=true]/row:text-primary group-aria-pressed/row:text-primary", w = /*@__PURE__*/ o({
+	__name: "AcListItem",
+	props: {
+		title: { default: "" },
+		description: { default: "" },
+		icon: { default: void 0 },
+		to: { default: void 0 },
+		href: { default: void 0 },
+		selected: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		chevron: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["click"],
+	setup(o, { emit: w }) {
+		let T = o, E = w, D = {
+			normal: {
+				row: "gap-3 px-4 py-3",
+				title: "text-base",
+				description: "mt-0.5 text-xs",
+				icon: "size-4"
+			},
+			small: {
+				row: "gap-2.5 px-3 py-2",
+				title: "text-xs",
+				description: "text-xs",
+				icon: "size-3.5"
+			}
+		}, O = c("ac-list", null), k = s()?.appContext.components.RouterLink, A = !!s()?.vnode.props?.onClick, j = e(() => D[O?.size ?? "normal"]), M = e(() => T.to && k && !T.disabled ? k : T.to || T.href ? "a" : A ? "button" : "div"), N = e(() => M.value !== "div"), P = e(() => {
+			let e = {};
+			return M.value === k ? e.to = T.to : M.value === "a" ? T.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = T.href ?? (typeof T.to == "string" ? T.to : void 0) : M.value === "button" && (e.type = "button", e.disabled = T.disabled || void 0, e["aria-pressed"] = T.selected), N.value && (e["data-ac-list-row"] = ""), T.selected && M.value !== "button" && (e["aria-current"] = N.value ? "page" : "true"), e;
+		});
+		function F(e) {
+			if (T.disabled) {
+				e.preventDefault();
+				return;
+			}
+			E("click", e);
+		}
+		return (e, s) => (d(), r("li", v, [(d(), t(p(M.value), l(P.value, {
+			class: ["group/row relative flex w-full min-w-0 items-center border-0 bg-transparent text-left text-body no-underline transition-colors duration-150 motion-reduce:transition-none", [
+				j.value.row,
+				x,
+				h(O)?.rounded && "rounded-10",
+				N.value && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset",
+				N.value && (o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-accent-hover"),
+				!N.value && o.disabled && "opacity-50"
+			]],
+			"data-ac-ds": "",
+			"data-testid": "ac-list-row",
+			onClick: F
+		}), {
+			default: g(() => [
+				i("span", {
+					class: u(["absolute start-0 top-1.5 bottom-1.5 hidden w-[3px] rounded-e-full bg-primary", S]),
+					"aria-hidden": "true"
+				}),
+				e.$slots.leading || o.icon ? (d(), r("span", {
+					key: 0,
+					class: u(["flex shrink-0 items-center justify-center text-muted transition-colors duration-150", C])
+				}, [f(e.$slots, "leading", {}, () => [(d(), t(p(o.icon), {
+					class: u(j.value.icon),
+					"aria-hidden": "true"
+				}, null, 8, ["class"]))])])) : n("", !0),
+				i("span", y, [i("span", { class: u(["min-w-0", e.$slots.default ? "@lg:w-2/5 @lg:max-w-[240px] @lg:shrink-0" : "flex-1"]) }, [e.$slots.title || o.title ? (d(), r("span", {
+					key: 0,
+					class: u(["block truncate font-medium text-heading", j.value.title])
+				}, [f(e.$slots, "title", {}, () => [a(m(o.title), 1)])], 2)) : n("", !0), e.$slots.description || o.description ? (d(), r("span", {
+					key: 1,
+					class: u(["block truncate text-muted", j.value.description])
+				}, [f(e.$slots, "description", {}, () => [a(m(o.description), 1)])], 2)) : n("", !0)], 2), e.$slots.default ? (d(), r("span", {
+					key: 0,
+					class: u(["min-w-0 flex-1 text-muted", j.value.title])
+				}, [f(e.$slots, "default")], 2)) : n("", !0)]),
+				e.$slots.trailing ? (d(), r("span", b, [f(e.$slots, "trailing")])) : n("", !0),
+				o.chevron ? (d(), t(h(_), {
+					key: 2,
+					class: "size-4 shrink-0 text-muted rtl:rotate-180",
+					"aria-hidden": "true"
+				})) : n("", !0)
+			]),
+			_: 3
+		}, 16, ["class"]))]));
+	}
+});
+//#endregion
+export { w as default };

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

@@ -36,6 +36,40 @@ export interface MapGeoJson {
         id?: string | number;
     }[];
 }
+/** A round area drawn under the points, such as the reach of a cloud region. */
+export interface MapArea {
+    /** Unique key, e.g. the region slug `europe`. */
+    id: string;
+    /** Name under the area, in the tooltip and data table, e.g. "Europe". */
+    label: string;
+    /** Degrees north of the centre; negative is south. */
+    latitude: number;
+    /** Degrees east of the centre; negative is west. */
+    longitude: number;
+    /** Radius in km, measured north to south. The circle stays round and covers the same ground at every zoom. */
+    radius: number;
+    /** Fill and edge colour. Defaults to `chart-1`, `chart-2`… in the order the areas are listed. */
+    color?: ChartColor;
+    /** A line under the label on the map and in the tooltip, e.g. "4 datacenters". */
+    description?: string;
+    /** Other fields, read by your `area-tooltip` slot. */
+    [key: string]: any;
+}
+/** Where `focus()` moves the view. */
+export interface MapFocusTarget {
+    /** Degrees north of the new centre. */
+    latitude: number;
+    /** Degrees east of the new centre. */
+    longitude: number;
+    /** Zoom as a multiple of the whole-world view. Keeps the current zoom when left out. */
+    zoom?: number;
+}
+export interface MapChartAreaTooltipSlotProps {
+    /** The hovered area. */
+    area: MapArea;
+    /** Its colour as CSS, e.g. `var(--color-chart-2)`. */
+    color: string;
+}
 export interface MapChartTooltipSlotProps {
     /** The hovered point. */
     point: MapPoint;
@@ -49,6 +83,12 @@ export interface MapChartTooltipSlotProps {
 export interface Props {
     /** The locations to plot: `{ id, label, latitude, longitude, status?, description?, value? }`. */
     points: MapPoint[];
+    /** Round areas drawn under the points, e.g. the reach of each region: `{ id, label, latitude, longitude, radius, color?, description? }`, with `radius` in km. */
+    areas?: MapArea[];
+    /** Prints each area's `label` and `description` under it. Labels that would overlap are hidden. */
+    areaLabels?: boolean;
+    /** Ids of points or areas to highlight, e.g. the datacenter open in a side panel. Set it from `point-click` or `area-click`. */
+    selected?: string | string[];
     /** Map height in px. The width fills the container; on narrow screens the world view shrinks to keep its shape. */
     height?: number;
     /** Point diameter in px, or a function of the point, e.g. to size by `value`. cloud-ui uses 10px. */
@@ -69,7 +109,7 @@ export interface Props {
     zoom?: boolean;
     /** Smallest and largest zoom, as multiples of the whole-world view. */
     zoomExtent?: [number, number];
-    /** Starts zoomed to fit the points instead of the whole world. */
+    /** Starts zoomed to fit the points and areas instead of the whole world. */
     fitToPoints?: boolean;
     /** Your own map in place of the built-in world, e.g. one your API serves. Without it, a 110m Natural Earth world (no Antarctica) loads on first use, about 40 KB gzipped. */
     geoJson?: MapGeoJson;
@@ -79,11 +119,13 @@ export interface Props {
     valueFormatter?: (value: number) => string;
     /** Plural noun for the points in the screen-reader summary: "World map, 10 datacenters: 8 healthy, 2 down." */
     pointsLabel?: string;
+    /** Plural noun for the areas in the screen-reader summary: "World map, 16 datacenters in 8 regions: …". */
+    areasLabel?: string;
     /** Shows a tooltip with the point's label, description, status and value on hover. Customise it with the `tooltip` slot. */
     tooltip?: boolean;
     /** Shows a skeleton of the same height while data loads. */
     loading?: boolean;
-    /** Text shown in place of the map when `points` is empty. */
+    /** Text shown in place of the map when `points` and `areas` are empty. */
     emptyText?: string;
     /** Accessible name, e.g. "Datacenters". Show the visible title in the surrounding card. */
     title?: string;
@@ -97,11 +139,28 @@ export interface Props {
 type __VLS_Slots = {
     /** Replaces the tooltip body for the hovered point. */
     tooltip?: (props: MapChartTooltipSlotProps) => unknown;
+    /** Replaces the tooltip body for the hovered area. */
+    "area-tooltip"?: (props: MapChartAreaTooltipSlotProps) => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare function zoomIn(): void;
+declare function zoomOut(): void;
+/** Moves the view to an area or point by id (fitted with room around it), or to a centre and zoom. */
+declare function focus(target?: string | MapFocusTarget): void;
+/** Returns to the starting view: the whole world, or the fitted box with `fitToPoints`. */
+declare function resetView(): void;
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    /** Moves the view to an area or point by id, or to `{ latitude, longitude, zoom? }`. */
+    focus: typeof focus;
+    /** Returns to the starting view. */
+    resetView: typeof resetView;
+    zoomIn: typeof zoomIn;
+    zoomOut: typeof zoomOut;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "point-click": (point: MapPoint) => any;
+    "area-click": (area: MapArea) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onPoint-click"?: ((point: MapPoint) => any) | undefined;
+    "onArea-click"?: ((area: MapArea) => any) | undefined;
 }>, {
     legend: ChartLegendPosition;
     title: string;
@@ -112,12 +171,15 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     loading: boolean;
     pulse: boolean | string[];
     emptyText: string;
+    selected: string | string[];
     labels: boolean;
     valueLabel: string;
     renderer: ChartRenderer;
     zoom: boolean;
     valueFormatter: (value: number) => string;
     legendValues: boolean;
+    areas: MapArea[];
+    areaLabels: boolean;
     pointSize: number | ((point: MapPoint) => number);
     statusLabels: Record<string, string>;
     statusColors: Record<string, ChartColor>;
@@ -125,6 +187,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     fitToPoints: boolean;
     geoJson: MapGeoJson;
     pointsLabel: string;
+    areasLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;