@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,48 @@
+export interface LocaleOption {
+    /** Locale code the app's i18n uses, e.g. `en`, `bn`, `de`. */
+    value: string;
+    /** The language's own name, e.g. "English", "বাংলা", "Deutsch". */
+    label: string;
+    /** A muted second line, e.g. the name in English: "Bengali". */
+    description?: string;
+    /** A flag emoji shown before the name at 20px, as in cloud-ui's language menu. */
+    flag?: string;
+}
+export interface Props {
+    /** Languages to offer, each named in its own language. With fewer than two, nothing renders. */
+    locales: LocaleOption[];
+    /** `icon` is cloud-ui's bare 20px icon trigger for the navbar; `button` adds the current code (EN) and a chevron. */
+    variant?: "icon" | "button";
+    /** Accessible name of the trigger. The current language is added after it. */
+    ariaLabel?: string;
+    /** Heading at the top of the menu. Pass an empty string to hide it. */
+    menuTitle?: string;
+    /** Which edge of the trigger the menu lines up with. `end` suits the right of a navbar. */
+    align?: "start" | "end";
+    /** Remembers the choice in localStorage under `storageKey` and restores it on load. */
+    persist?: boolean;
+    /** localStorage key for `persist`. cloud-ui uses `user-locale`. */
+    storageKey?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The current locale code. Bind it to your i18n instance's locale. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {
+    variant: "icon" | "button";
+    align: "start" | "end";
+    ariaLabel: string;
+    menuTitle: string;
+    persist: boolean;
+    storageKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,111 @@
+import e from "./AcDropdown.js";
+import t from "./AcDropdownItem.js";
+import { Fragment as n, computed 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, openBlock as f, renderList as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
+import { ChevronDown as v, Languages as y } from "@lucide/vue";
+//#region src/lib/components/AcLocaleSwitcher.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = ["aria-label"], S = { class: "font-mono text-xs tracking-wide uppercase" }, C = {
+	key: 0,
+	class: "mb-2 border-b border-border px-4 py-2 text-xs font-semibold text-muted",
+	"aria-hidden": "true"
+}, w = { class: "flex items-center gap-2" }, T = {
+	key: 0,
+	class: "shrink-0 text-xl leading-none",
+	"aria-hidden": "true"
+}, E = ["lang"], D = {
+	key: 1,
+	class: "size-2 shrink-0 rounded-full bg-primary",
+	"aria-hidden": "true"
+}, O = /*@__PURE__*/ l({
+	__name: "AcLocaleSwitcher",
+	props: /*@__PURE__*/ u({
+		locales: {},
+		variant: { default: "icon" },
+		ariaLabel: { default: "Change language" },
+		menuTitle: { default: "Select language" },
+		align: { default: "end" },
+		persist: {
+			type: Boolean,
+			default: !1
+		},
+		storageKey: { default: "user-locale" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["change"], ["update:modelValue"]),
+	setup(l, { emit: u }) {
+		let O = l, k = g(l, "modelValue"), A = u, j = r(() => O.locales.find((e) => e.value === k.value)), M = r(() => j.value ? `${O.ariaLabel} (${j.value.label})` : O.ariaLabel);
+		function N() {
+			try {
+				return localStorage.getItem(O.storageKey);
+			} catch {
+				return null;
+			}
+		}
+		function P(e) {
+			if (e !== k.value && (k.value = e, A("change", e), O.persist)) try {
+				localStorage.setItem(O.storageKey, e);
+			} catch {}
+		}
+		if (O.persist && typeof window < "u") {
+			let e = N();
+			e && e !== k.value && O.locales.some((t) => t.value === e) && P(e);
+		}
+		return (r, u) => l.locales.length > 1 ? (f(), i(e, {
+			key: 0,
+			align: l.align,
+			"menu-label": l.ariaLabel,
+			"data-testid": "ac-locale-switcher"
+		}, {
+			trigger: _(({ open: e }) => [l.variant === "icon" ? (f(), o("button", {
+				key: 0,
+				type: "button",
+				"aria-label": M.value,
+				class: d(["inline-flex cursor-pointer items-center gap-2 rounded-10 px-2 py-0.5 transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e ? "text-heading" : "text-muted"])
+			}, [c(h(y), {
+				class: "size-5",
+				"aria-hidden": "true"
+			})], 10, b)) : (f(), o("button", {
+				key: 1,
+				type: "button",
+				"aria-label": M.value,
+				class: d(["inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e && "bg-surface-sunken/50"])
+			}, [
+				c(h(y), {
+					class: "size-4 text-muted",
+					"aria-hidden": "true"
+				}),
+				s("span", S, m(j.value?.value ?? ""), 1),
+				c(h(v), {
+					class: d(["size-4 text-muted transition-transform duration-200 motion-reduce:transition-none", e && "rotate-180"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])
+			], 10, x))]),
+			default: _(() => [l.menuTitle ? (f(), o("p", C, m(l.menuTitle), 1)) : a("", !0), (f(!0), o(n, null, p(l.locales, (e) => (f(), i(t, {
+				key: e.value,
+				description: e.description,
+				"aria-current": e.value === k.value ? "true" : void 0,
+				class: d(e.value === k.value && "bg-surface-sunken/50"),
+				onClick: (t) => P(e.value)
+			}, {
+				default: _(() => [s("span", w, [
+					e.flag ? (f(), o("span", T, m(e.flag), 1)) : a("", !0),
+					s("span", {
+						class: "min-w-0 flex-1 truncate font-medium text-heading",
+						lang: e.value
+					}, m(e.label), 9, E),
+					e.value === k.value ? (f(), o("span", D)) : a("", !0)
+				])]),
+				_: 2
+			}, 1032, [
+				"description",
+				"aria-current",
+				"class",
+				"onClick"
+			]))), 128))]),
+			_: 1
+		}, 8, ["align", "menu-label"])) : a("", !0);
+	}
+});
+//#endregion
+export { O as default };

package/dist/lib/components/AcMapChart.js

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

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

@@ -0,0 +1,136 @@
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartColor, ChartLegendPosition } from "../charts/shared";
+/** The statuses with a built-in colour and label. Any other string is matched like AcBadge's `status`: `running` is green, `down` red. */
+export type MapPointStatus = "success" | "info" | "warning" | "danger" | "pending" | "neutral";
+/** One location on the map. */
+export interface MapPoint {
+    /** Unique key, e.g. the datacenter slug `nyc1`. */
+    id: string;
+    /** Name in the tooltip, data table and `labels`, e.g. "New York 1". */
+    label: string;
+    /** Degrees north; negative is south. */
+    latitude: number;
+    /** Degrees east; negative is west. */
+    longitude: number;
+    /** Sets the colour and legend group: `success`, `warning`, `danger`, `info`, `pending`, `neutral`, or a raw state such as `RUNNING` or `down`. Defaults to `neutral`. */
+    status?: MapPointStatus | (string & {});
+    /** A line under the label in the tooltip, e.g. "New York, United States". */
+    description?: string;
+    /** A number shown in the tooltip and data table, e.g. the cluster count. */
+    value?: number;
+    /** Colour of this point only. Wins over the status colour. */
+    color?: ChartColor;
+    /** Other fields, read by your `tooltip` slot. */
+    [key: string]: any;
+}
+/** A GeoJSON `FeatureCollection` of the areas to draw, in longitude and latitude, e.g. countries or regions. */
+export interface MapGeoJson {
+    type: "FeatureCollection";
+    features: {
+        type: "Feature";
+        geometry: {
+            type: string;
+            coordinates?: unknown;
+        } | null;
+        properties?: Record<string, any> | null;
+        id?: string | number;
+    }[];
+}
+export interface MapChartTooltipSlotProps {
+    /** The hovered point. */
+    point: MapPoint;
+    /** Its status as shown in the legend, e.g. "Healthy". */
+    statusLabel: string;
+    /** Its colour as CSS, e.g. `var(--color-success)`. */
+    color: string;
+    /** `value` run through `valueFormatter`; empty when the point has none. */
+    formattedValue: string;
+}
+export interface Props {
+    /** The locations to plot: `{ id, label, latitude, longitude, status?, description?, value? }`. */
+    points: MapPoint[];
+    /** 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. */
+    pointSize?: number | ((point: MapPoint) => number);
+    /** Legend names per status, e.g. `{ success: "Live", danger: "Disabled" }`. Defaults: success "Healthy", warning "Degraded", danger "Down", info "Info", pending "Pending", neutral "Unknown"; other states are humanized. */
+    statusLabels?: Record<string, string>;
+    /** Colour per status, overriding the status colour: `{ maintenance: "chart-4" }`. */
+    statusColors?: Record<string, ChartColor>;
+    /** Legend of statuses above or below the map, or `none`. Hidden anyway when every point shares one status; clicking an entry hides or shows those points. */
+    legend?: ChartLegendPosition;
+    /** Shows how many points have each status in the legend. */
+    legendValues?: boolean;
+    /** Pulses a ring around points to show they're live: `true` for healthy (`success`) points, or a list of statuses, e.g. `["danger"]`. Points stay still when the viewer asks for reduced motion. */
+    pulse?: boolean | string[];
+    /** Prints each point's `label` under it. Labels that would overlap are hidden. */
+    labels?: boolean;
+    /** Lets viewers drag to pan and scroll to zoom, and shows zoom buttons. Off by default, so the wheel keeps scrolling the page. */
+    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. */
+    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;
+    /** Name of `value` in the tooltip and data table, e.g. "Clusters". */
+    valueLabel?: string;
+    /** Formats `value` in the tooltip and data table. Defaults to compact numbers: `1.2K`. */
+    valueFormatter?: (value: number) => string;
+    /** Plural noun for the points in the screen-reader summary: "World map, 10 datacenters: 8 healthy, 2 down." */
+    pointsLabel?: 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. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Datacenters". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the map shows. Defaults to the point count per status. */
+    description?: string;
+    /** `canvas` (default) or `svg`, which is crisper when printed or zoomed. */
+    renderer?: ChartRenderer;
+    /** Fades the points in and animates changes. Always off when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered point. */
+    tooltip?: (props: MapChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "point-click": (point: MapPoint) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onPoint-click"?: ((point: MapPoint) => any) | undefined;
+}>, {
+    legend: ChartLegendPosition;
+    title: string;
+    description: string;
+    height: number;
+    loading: boolean;
+    animation: boolean;
+    pulse: boolean | string[];
+    tooltip: boolean;
+    emptyText: string;
+    labels: boolean;
+    valueLabel: string;
+    renderer: ChartRenderer;
+    zoom: boolean;
+    valueFormatter: (value: number) => string;
+    legendValues: boolean;
+    pointSize: number | ((point: MapPoint) => number);
+    statusLabels: Record<string, string>;
+    statusColors: Record<string, ChartColor>;
+    zoomExtent: [number, number];
+    fitToPoints: boolean;
+    geoJson: MapGeoJson;
+    pointsLabel: string;
+}, {}, {}, {}, 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;
+    };
+};