@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -107,10 +107,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     height: number;
-    loading: boolean;
     animation: boolean;
-    pulse: boolean | string[];
     tooltip: boolean;
+    loading: boolean;
+    pulse: boolean | string[];
     emptyText: string;
     labels: boolean;
     valueLabel: string;

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

@@ -49,11 +49,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     title: string;
     description: string;
     size: "xsmall" | "small" | "normal" | "medium" | "large" | "xlarge" | "full";
+    maxWidth: "xsm" | "sm" | "md" | "lg" | "xl" | "xxl";
     bodyClass: string;
     closable: boolean;
     closeOnOutsideClick: boolean;
     hideFooter: boolean;
-    maxWidth: "xsm" | "sm" | "md" | "lg" | "xl" | "xxl";
     showCloseButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -19,6 +19,8 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** A search field, placed by `search-position`. Hidden below 640px. */
     search?: () => unknown;
+    /** Left-hand content that fills the row up to `actions` and shrinks first when space runs out, e.g. cloud-ui's search field with its phone-only search button. Use it instead of a centred `search`. */
+    start?: () => unknown;
     /** Right side: icon actions, notifications, theme and `AcUserMenu` last. */
     actions?: () => unknown;
 };

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

@@ -1,22 +1,28 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
-import { Menu as u } from "@lucide/vue";
+import { createCommentVNode as e, createElementBlock as t, createVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s, unref as c } from "vue";
+import { Menu as l } from "@lucide/vue";
 //#region src/lib/components/AcNavbar.vue?vue&type=script&setup=true&lang.ts
-var d = ["aria-label"], f = {
+var u = ["aria-label"], d = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, p = {
+}, f = {
 	key: 0,
 	class: "inline-flex items-center rounded-6 border border-primary/25 bg-primary/10 px-1.5 py-0.5 text-sm font-semibold tracking-wide text-primary-strong uppercase"
-}, m = ["aria-label"], h = {
+}, p = ["aria-label"], m = {
 	key: 3,
 	class: "hidden min-w-0 shrink sm:block sm:w-48 md:w-60 lg:w-80 xl:w-96"
-}, g = { class: "flex min-w-0 flex-1 justify-center" }, _ = {
+}, h = {
+	key: 4,
+	class: "flex min-w-0 flex-1 items-center"
+}, g = {
+	key: 5,
+	class: "flex min-w-0 flex-1 justify-center"
+}, _ = {
 	key: 0,
 	class: "hidden w-full max-w-md sm:block"
 }, v = {
-	key: 4,
+	key: 6,
 	class: "flex shrink-0 items-center gap-0.5 sm:gap-3"
-}, y = /*@__PURE__*/ i({
+}, y = /*@__PURE__*/ r({
 	__name: "AcNavbar",
 	props: {
 		menuButton: { default: "mobile" },
@@ -30,37 +36,37 @@ var d = ["aria-label"], f = {
 		searchPosition: { default: "start" }
 	},
 	emits: ["menu"],
-	setup(i, { emit: y }) {
+	setup(r, { emit: y }) {
 		let b = y;
-		return (y, x) => (o(), t("header", {
-			class: a(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", i.sticky && "sticky"]),
+		return (y, x) => (a(), t("header", {
+			class: i(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", r.sticky && "sticky"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
 		}, [
-			i.menuButton === "never" ? e("", !0) : (o(), t("button", {
+			r.menuButton === "never" ? e("", !0) : (a(), t("button", {
 				key: 0,
 				type: "button",
-				class: a(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 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", {
-					"md:hidden": i.menuButton === "mobile",
-					"lg:hidden": i.menuButton === "tablet"
+				class: i(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 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", {
+					"md:hidden": r.menuButton === "mobile",
+					"lg:hidden": r.menuButton === "tablet"
 				}]),
-				"aria-label": i.menuLabel,
+				"aria-label": r.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
 				onClick: x[0] ||= (e) => b("menu")
-			}, [r(l(u), {
+			}, [n(c(l), {
 				class: "size-5",
 				"aria-hidden": "true"
-			})], 10, d)),
-			y.$slots.brand || i.productName ? (o(), t("div", f, [s(y.$slots, "brand"), i.productName ? (o(), t("span", p, c(i.productName), 1)) : e("", !0)])) : e("", !0),
-			y.$slots.default ? (o(), t("nav", {
+			})], 10, u)),
+			y.$slots.brand || r.productName ? (a(), t("div", d, [o(y.$slots, "brand"), r.productName ? (a(), t("span", f, s(r.productName), 1)) : e("", !0)])) : e("", !0),
+			y.$slots.default ? (a(), t("nav", {
 				key: 2,
-				"aria-label": i.label,
+				"aria-label": r.label,
 				class: "hidden items-center gap-1 md:flex"
-			}, [s(y.$slots, "default")], 8, m)) : e("", !0),
-			y.$slots.search && i.searchPosition === "start" ? (o(), t("div", h, [s(y.$slots, "search")])) : e("", !0),
-			n("div", g, [y.$slots.search && i.searchPosition === "center" ? (o(), t("div", _, [s(y.$slots, "search")])) : e("", !0)]),
-			y.$slots.actions ? (o(), t("div", v, [s(y.$slots, "actions")])) : e("", !0)
+			}, [o(y.$slots, "default")], 8, p)) : e("", !0),
+			y.$slots.search && r.searchPosition === "start" ? (a(), t("div", m, [o(y.$slots, "search")])) : e("", !0),
+			y.$slots.start ? (a(), t("div", h, [o(y.$slots, "start")])) : (a(), t("div", g, [y.$slots.search && r.searchPosition === "center" ? (a(), t("div", _, [o(y.$slots, "search")])) : e("", !0)])),
+			y.$slots.actions ? (a(), t("div", v, [o(y.$slots, "actions")])) : e("", !0)
 		], 2));
 	}
 });

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

@@ -71,8 +71,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onViewAll?: (() => any) | undefined;
 }>, {
     label: string;
-    loading: boolean;
     align: "start" | "end";
+    loading: boolean;
     emptyText: string;
     notifications: NotificationItem[];
     unreadCount: number;

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

@@ -1,5 +1,5 @@
-import e from "./AcNavbarItem.js";
-import { fixedFrame as t } from "./fixedFrame.js";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcNavbarItem.js";
 import n from "./AcSkeleton.js";
 import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as ee, onBeforeUnmount as te, openBlock as y, ref as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useId as ne, useModel as re, watch as E, withCtx as D } from "vue";
 import { ArrowRight as ie, Bell as ae, BellOff as oe } from "@lucide/vue";
@@ -146,9 +146,9 @@ var se = {
 			t.length && t[(e + t.length) % t.length].focus();
 		}
 		function Y() {
-			let e = K();
-			if (!e || !L.value) return;
-			let n = e.getBoundingClientRect(), r = t(), { offsetWidth: i, offsetHeight: a } = L.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (O.align === "end" ? n.right - i : n.left) - r.left;
+			let t = K();
+			if (!t || !L.value) return;
+			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = L.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (O.align === "end" ? n.right - i : n.left) - r.left;
 			z.value = !c, R.value = {
 				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.bottom + 6 - r.top}px`,
 				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
@@ -194,7 +194,7 @@ var se = {
 			B.value = Date.now(), await _(), Y();
 			let t = q()[0];
 			t ? t.focus() : L.value?.focus();
-		}), E(() => [O.notifications.length, O.loading], () => k.value && _(Y)), te(() => $(!1)), (t, o) => (y(), l("div", se, [f(e, {
+		}), E(() => [O.notifications.length, O.loading], () => k.value && _(Y)), te(() => $(!1)), (e, o) => (y(), l("div", se, [f(t, {
 			ref_key: "trigger",
 			ref: I,
 			label: p.label,
@@ -253,44 +253,44 @@ var se = {
 					lines: 3,
 					height: "10px",
 					label: ""
-				})), 64))])) : p.notifications.length ? (y(), l("ul", me, [(y(!0), l(r, null, x(p.notifications, (e) => (y(), l("li", { key: e.id }, [(y(), s(C(W(e.to, e.href)), g({ ref_for: !0 }, G(e.to, e.href), {
+				})), 64))])) : p.notifications.length ? (y(), l("ul", me, [(y(!0), l(r, null, x(p.notifications, (t) => (y(), l("li", { key: t.id }, [(y(), s(C(W(t.to, t.href)), g({ ref_for: !0 }, G(t.to, t.href), {
 					"data-notification-item": "",
-					class: ["relative block w-full cursor-pointer p-3 text-left no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !e.read && "bg-primary/8"],
+					class: ["relative block w-full cursor-pointer p-3 text-left no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !t.read && "bg-primary/8"],
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-item",
-					onClick: (t) => Le(e)
+					onClick: (e) => Le(t)
 				}), {
-					default: D(() => [S(t.$slots, "item", { item: e }, () => [
+					default: D(() => [S(e.$slots, "item", { item: t }, () => [
 						u("span", he, [
-							e.icon ? (y(), s(C(e.icon), {
+							t.icon ? (y(), s(C(t.icon), {
 								key: 0,
 								class: "size-4 shrink-0 text-muted",
 								"aria-hidden": "true"
 							})) : c("", !0),
-							u("span", ge, w(e.title || e.msg), 1),
-							e.read ? c("", !0) : (y(), l("span", _e)),
-							e.read ? c("", !0) : (y(), l("span", ve, "(unread)"))
+							u("span", ge, w(t.title || t.msg), 1),
+							t.read ? c("", !0) : (y(), l("span", _e)),
+							t.read ? c("", !0) : (y(), l("span", ve, "(unread)"))
 						]),
-						e.title && e.msg ? (y(), l("span", ye, w(e.msg), 1)) : c("", !0),
+						t.title && t.msg ? (y(), l("span", ye, w(t.msg), 1)) : c("", !0),
 						u("span", be, [
-							e.status ? (y(), l("span", {
+							t.status ? (y(), l("span", {
 								key: 0,
-								class: v(["font-medium", De[Me(e)]])
-							}, w(e.status), 3)) : c("", !0),
-							e.status ? (y(), l("span", xe, "·")) : c("", !0),
+								class: v(["font-medium", De[Me(t)]])
+							}, w(t.status), 3)) : c("", !0),
+							t.status ? (y(), l("span", xe, "·")) : c("", !0),
 							u("time", {
-								datetime: Fe(e.time),
-								title: Pe(e.time)
-							}, w(Ne(e.time)), 9, Se)
+								datetime: Fe(t.time),
+								title: Pe(t.time)
+							}, w(Ne(t.time)), 9, Se)
 						])
 					])]),
 					_: 2
-				}, 1040, ["class", "onClick"]))]))), 128))])) : (y(), l("div", de, [S(t.$slots, "empty", {}, () => [
+				}, 1040, ["class", "onClick"]))]))), 128))])) : (y(), l("div", de, [S(e.$slots, "empty", {}, () => [
 					u("span", fe, [f(T(oe), { class: "size-6" })]),
 					u("p", pe, w(p.emptyText), 1),
 					o[2] ||= u("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
 				])])),
-				t.$slots.footer || je.value ? (y(), l("div", Ce, [S(t.$slots, "footer", { close: X }, () => [(y(), s(C(W(p.viewAllTo, p.viewAllHref)), g(G(p.viewAllTo, p.viewAllHref), {
+				e.$slots.footer || je.value ? (y(), l("div", Ce, [S(e.$slots, "footer", { close: X }, () => [(y(), s(C(W(p.viewAllTo, p.viewAllHref)), g(G(p.viewAllTo, p.viewAllHref), {
 					class: "group/link flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-semibold text-primary-strong no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-view-all",

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

@@ -1,8 +1,10 @@
-export interface Props {
+export interface Props<K extends "null" | "undefined" = "null"> {
     /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
     label?: string;
     /** Native `name` attribute. */
     name?: string;
+    /** Text shown inside the empty field, e.g. "Enter number". */
+    placeholder?: string;
     /** Lowest allowed value. ↓, − and Home stop here, and typed values are clamped to it on blur. No limit by default. */
     min?: number;
     /** Highest allowed value. ↑, + and End stop here, and typed values are clamped to it on blur. No limit by default. */
@@ -21,6 +23,8 @@ export interface Props {
     holdIntervalDelay?: number;
     /** Marks the field required and adds a red asterisk. */
     required?: boolean;
+    /** Adds the red asterisk without native `required`, for forms that run their own validation on submit. Cloud `is-required`. */
+    requiredMark?: boolean;
     /** Disables the field and its buttons. */
     disabled?: boolean;
     /** Read-only field: a muted fill, "(read only)" after the label, and no stepping. */
@@ -29,51 +33,57 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall, the same as `AcInput`; the step buttons match. */
-    size?: "small" | "normal";
+    /** `small` 36px, `normal` 42px or `large` 46px tall (cloud-ui's default number field); the step buttons match. */
+    size?: "small" | "normal" | "large";
+    /** What an empty field puts in `v-model`: `"null"` (default) or `"undefined"`, as cloud-ui's v1 AcNumberInput did. */
+    emptyValue?: K;
+    /** Text after the label of a read-only field, e.g. "(Read Only)". */
+    readonlyText?: string;
+    /** Keeps the editable fill on a read-only field and shows no focus halo, as cloud-ui's v1 AcNumberInput did. */
+    plainReadonly?: boolean;
+    /** Cloud-ui v1 error look: the border stays grey and the message uses the base `text-danger` red instead of the AA `-strong` shade. */
+    plainError?: boolean;
+    /** No gap around `#label-icon` and `#label-extra`, for slot content that brings its own margin. */
+    flushLabelSlots?: boolean;
+    /** Replaces the built-in range message, e.g. "Value must be between {min} and {max}". It shows from a keystroke that leaves the range until a blur that commits a value, and wins over `error-msg`. */
+    rangeMessage?: string;
+    /** The value and placeholder take the page's font weight and default placeholder colour instead of the field's own. */
+    inheritFont?: boolean;
+    /** Puts the − and + buttons in the tab order and lets a click focus them, as cloud-ui's v1 AcNumberInput did. */
+    focusableStepButtons?: boolean;
+    /** Drops the root's `w-full`, so in a flex row the field sizes to its content, as cloud-ui's v1 AcNumberInput did. */
+    autoWidth?: boolean;
 }
-type __VLS_Props = Props;
-type __VLS_Slots = {
-    /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
-    suffix?: () => unknown;
-};
-type __VLS_ModelProps = {
-    /** The number, or `null` while the field is empty. */
-    modelValue?: number | null;
+declare const __VLS_export: <K extends "null" | "undefined" = "null">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<K> & {
+        modelValue?: number | (K extends "undefined" ? undefined : null);
+    }) & {
+        "onUpdate:modelValue"?: ((value: number | (K extends "undefined" ? undefined : null)) => any) | undefined;
+        onChange?: ((value: number | (K extends "undefined" ? undefined : null)) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus to the input. */
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Content before the label text, such as a 14px icon. */
+        "label-icon"?: () => unknown;
+        /** Content after the label text, such as "(Optional)" or an info tooltip. */
+        "label-extra"?: () => unknown;
+        /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
+        suffix?: () => unknown;
+    };
+    emit: ((evt: "change", value: number | (K extends "undefined" ? undefined : null)) => void) & ((event: "update:modelValue", value: number | (K extends "undefined" ? undefined : null)) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** Moves focus to the input. */
-    focus: () => void | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number | null) => any;
-    change: (value: number | null) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
-    onChange?: ((value: number | null) => any) | undefined;
-}>, {
-    required: boolean;
-    label: string;
-    disabled: boolean;
-    max: number;
-    min: number;
-    name: string;
-    size: "small" | "normal";
-    step: number;
-    readonly: boolean;
-    hint: string;
-    errorMsg: string;
-    unit: string;
-    precision: number;
-    stepButtons: boolean;
-    holdDelay: number;
-    holdIntervalDelay: number;
-}, {}, {}, {}, 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;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};