@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onConfirm?: ((itemName: string) => any) | undefined;
 }>, {
     title: string;
-    loading: boolean;
     message: string;
+    loading: boolean;
     confirmText: string;
     itemName: string;
     detail: string;

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

@@ -58,10 +58,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     value: ChartAccessor<number>;
     description: string;
     height: number;
-    loading: boolean;
     animation: boolean;
-    index: ChartAccessor<string>;
     tooltip: boolean;
+    loading: boolean;
+    index: ChartAccessor<string>;
     emptyText: string;
     renderer: ChartRenderer;
     categories: Record<string, ChartCategory>;

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

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     variant: "menu" | "panel";
     label: string;
     disabled: boolean;
-    align: "start" | "end";
     placement: "bottom" | "top";
+    align: "start" | "end";
     menuLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,5 +1,5 @@
-import e from "./AcButton.js";
-import { fixedFrame as t } from "./fixedFrame.js";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcButton.js";
 import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as te, onMounted as p, onUpdated as m, openBlock as h, provide as g, ref as _, renderSlot as v, toRef as y, unref as b, useId as x, useModel as S, useSlots as C, watch as w, withCtx as T } from "vue";
 import { ChevronDown as E, Ellipsis as D } from "@lucide/vue";
 //#region src/lib/components/AcDropdown.vue?vue&type=script&setup=true&lang.ts
@@ -55,11 +55,11 @@ var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "
 		}
 		function X() {
 			if (!B || !I.value) return;
-			let e = B.getBoundingClientRect(), n = t(), r = `${Math.min(Math.max(e.width, ne[u.variant]), n.width - 16)}px`;
+			let t = B.getBoundingClientRect(), n = e(), r = `${Math.min(Math.max(t.width, ne[u.variant]), n.width - 16)}px`;
 			I.value.style.minWidth = r;
-			let { offsetWidth: i, offsetHeight: a } = I.value, o = n.bottom - e.bottom - 8 - 8, s = e.top - n.top - 8 - 8, c = u.placement === "top" ? s >= a || s > o : o < a && s > o, l = (u.align === "end" ? e.right - i : e.left) - n.left;
+			let { offsetWidth: i, offsetHeight: a } = I.value, o = n.bottom - t.bottom - 8 - 8, s = t.top - n.top - 8 - 8, c = u.placement === "top" ? s >= a || s > o : o < a && s > o, l = (u.align === "end" ? t.right - i : t.left) - n.left;
 			R.value = !c, L.value = {
-				[c ? "bottom" : "top"]: `${c ? n.bottom - e.top + 8 : e.bottom + 8 - n.top}px`,
+				[c ? "bottom" : "top"]: `${c ? n.bottom - t.top + 8 : t.bottom + 8 - n.top}px`,
 				left: `${Math.max(8, Math.min(l, n.width - i - 8))}px`,
 				minWidth: r,
 				maxHeight: `${Math.max(c ? s : o, 120)}px`
@@ -108,7 +108,7 @@ var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "
 			G(), $(e), e && (await d(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
 		}), p(G), m(G), te(() => {
 			$(!1), clearTimeout(U);
-		}), (t, i) => (h(), s("div", {
+		}), (e, i) => (h(), s("div", {
 			ref_key: "root",
 			ref: F,
 			class: "inline-flex",
@@ -116,7 +116,7 @@ var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "
 			"data-testid": "ac-dropdown",
 			onClick: ae,
 			onKeydown: oe
-		}, [M.trigger ? v(t.$slots, "trigger", { open: j.value }, void 0, void 0, 0) : l.label ? (h(), a(e, {
+		}, [M.trigger ? v(e.$slots, "trigger", { open: j.value }, void 0, void 0, 0) : l.label ? (h(), a(t, {
 			key: 1,
 			title: l.label,
 			color: "white",
@@ -157,7 +157,7 @@ var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "
 				"data-ac-ds": "",
 				"data-testid": "ac-dropdown-menu",
 				onKeydown: se
-			}, [v(t.$slots, "default")], 46, k)) : o("", !0)]),
+			}, [v(e.$slots, "default")], 46, k)) : o("", !0)]),
 			_: 3
 		})]))], 544));
 	}

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

@@ -30,11 +30,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     error: undefined;
+    titleTag: "h2" | "h3" | "h4" | "p";
     compact: boolean;
     retrying: boolean;
     retryText: string;
     hideRetry: boolean;
-    titleTag: "h2" | "h3" | "h4" | "p";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,5 +1,5 @@
-import e from "./AcButton.js";
-import { fixedFrame as t } from "./fixedFrame.js";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcButton.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, watch as _ } from "vue";
 //#region src/lib/components/AcFormFooter.vue?vue&type=script&setup=true&lang.ts
 var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = { class: "ml-auto flex items-center gap-3" }, b = /*@__PURE__*/ c({
@@ -34,10 +34,10 @@ var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = {
 		}
 		function A() {
 			if (!w.value || !T.value) return;
-			let e = w.value.getBoundingClientRect();
+			let t = w.value.getBoundingClientRect();
 			E.value = {
-				left: e.left - t().left,
-				width: e.width,
+				left: t.left - e().left,
+				width: t.width,
 				height: T.value.offsetHeight
 			};
 		}
@@ -47,7 +47,7 @@ var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = {
 		function M() {
 			D?.disconnect(), D = void 0, window.removeEventListener("resize", A);
 		}
-		return _(() => x.sticky, j, { flush: "post" }), p(j), f(M), (t, n) => (m(), a("div", {
+		return _(() => x.sticky, j, { flush: "post" }), p(j), f(M), (e, n) => (m(), a("div", {
 			ref_key: "root",
 			ref: w,
 			class: u(["mt-4 w-full", [c.sticky === "container" && "sticky bottom-0 z-10", c.sticky !== "viewport" && O.value]]),
@@ -62,13 +62,13 @@ var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = {
 				left: `${E.value.left}px`,
 				width: `${E.value.width}px`
 			} : void 0)
-		}, [o("div", { class: u(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", O.value]) }, [o("div", v, [g(t.$slots, "left")]), o("div", y, [g(t.$slots, "right", {}, () => [c.hideCancel ? i("", !0) : (m(), r(e, {
+		}, [o("div", { class: u(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", O.value]) }, [o("div", v, [g(e.$slots, "left")]), o("div", y, [g(e.$slots, "right", {}, () => [c.hideCancel ? i("", !0) : (m(), r(t, {
 			key: 0,
 			title: c.cancelLabel,
 			color: "white",
 			disabled: c.loading,
 			onClick: n[0] ||= (e) => S("cancel")
-		}, null, 8, ["title", "disabled"])), s(e, {
+		}, null, 8, ["title", "disabled"])), s(t, {
 			title: c.submitLabel,
 			type: "submit",
 			form: c.form || void 0,

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

@@ -102,10 +102,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     description: string;
     height: number;
     direction: "LR" | "TB";
-    loading: boolean;
     animation: boolean;
-    shape: "circle" | "square";
     tooltip: boolean;
+    loading: boolean;
+    shape: "circle" | "square";
     emptyText: string;
     links: GraphLink[];
     renderer: ChartRenderer;

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

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     size: "normal" | "compact";
     top: string;
     subtitle: string;
-    sticky: boolean;
     titleTag: "h1" | "h2" | "h3" | "h4";
+    sticky: boolean;
     countLabel: string;
     docsHref: string;
     backButton: boolean;

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

@@ -1,23 +1,59 @@
-import type { Component } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 export interface Props {
-    /** Label above the field. Pass `placeholder` for an example value inside it. */
-    label: string;
+    /** Label above the field. Pass `placeholder` for an example value inside it. Without a label, pass `aria-label`; the placeholder is the accessible name otherwise. */
+    label?: string;
     /** Native `name` attribute. */
     name?: string;
+    /** Example value shown inside the empty field. */
+    placeholder?: string;
+    /** Native `autocomplete` hint, e.g. `off`, `email` or `new-password`. Cloud-ui fields passed `off`. */
+    autocomplete?: string;
     /** Native input type. `password` adds a show/hide toggle. */
-    type?: "text" | "password" | "email" | "number" | "url" | "search";
+    type?: "text" | "password" | "email" | "number" | "url" | "search" | "tel" | "date" | "file";
     /** 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. */
+    requiredMark?: boolean;
+    /** Error shown under the field when the viewer clears it or leaves it empty, e.g. "Please enter a VPC name". `error-msg` shows when this one doesn't. */
+    requiredMessage?: string;
+    /** With `required-message`, an empty field emits no `input` or `focusout`, as cloud-ui's v1 AcInput did. */
+    silentWhenEmpty?: boolean;
     /** Disables the field. */
     disabled?: boolean;
     /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
+    /** Text after the label of a read-only field, e.g. "(Read Only)". */
+    readonlyText?: string;
+    /** Keeps the editable fill on a read-only field, as cloud-ui's v1 AcInput did. */
+    plainReadonly?: boolean;
+    /** Disables the field without dimming it or changing the cursor, as cloud-ui's v1 AcInput did. */
+    plainDisabled?: boolean;
+    /** Cloud-ui v1 error look: no field fill while it shows an error, and the message in 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;
+    /** Lays `#prefix` over the field's left padding (a 12–24px box, 10–20px in) and starts the value 40px in, like cloud-ui's v1 `left-icon`. */
+    prefixOverlay?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
+    /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
+    invalid?: boolean;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall. */
-    size?: "small" | "normal";
+    /** Height: `xs` 26px with 12px text, `xsmall` 34px, `small` 36px, `medium` 38px, `normal` 42px or `large` 50px with 16px text. */
+    size?: "xs" | "xsmall" | "small" | "medium" | "normal" | "large";
+    /** Field look: `outline` (border on the page fill), `soft` (grey fill, no border), `ghost` (no fill or border until focus) or `none` (bare text, no focus style). */
+    variant?: "outline" | "soft" | "ghost" | "none";
+    /** Draws a 2px primary halo around the field to point the viewer at it. */
+    highlight?: boolean;
+    /** Classes for the `<input>` element itself, e.g. `font-mono`. `class` goes on the wrapper. */
+    inputClass?: HTMLAttributes["class"];
+    /** Keeps the model a string with `type="number"`, instead of the number Vue casts it to. */
+    numberAsString?: boolean;
+    /** Shows a spinner in the password toggle and disables it, e.g. while `update:showValue` fetches a stored secret. */
+    revealing?: boolean;
+    /** Fetches a stored password the first time the viewer shows it while the field is empty; the result fills the model. A rejected promise leaves the field masked. */
+    reveal?: () => Promise<string>;
     /** Text of a button attached to the right edge, such as "Copy", "Generate" or "Browse". It emits `addon` when clicked. Also its accessible name when `addon-icon-only` is set. */
     addonLabel?: string;
     /** A Lucide icon component shown in the attached button, before `addon-label`. */
@@ -25,44 +61,50 @@ export interface Props {
     /** Shows only `addon-icon` in the attached button; `addon-label` becomes its `aria-label` and tooltip. */
     addonIconOnly?: boolean;
 }
-type __VLS_Props = Props;
-type __VLS_Slots = {
-    /** Content inside the field before the value: a 16px icon or fixed text such as `https://`. */
-    prefix?: () => unknown;
-    /** Content inside the field after the value: a unit such as `Gi` or `%`, or a status icon. */
-    suffix?: () => unknown;
-};
-type __VLS_ModelProps = {
-    modelValue?: string | number;
+declare const __VLS_export: <V extends string | number = string | number>(__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 & {
+        modelValue?: V;
+        /** Whether a password shows as plain text. Bind `v-model:show-value` to fetch a stored value before it shows. */
+        showValue?: boolean;
+    }) & {
+        onInput?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: V) => any) | undefined;
+        onKeydown?: ((event: KeyboardEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onFocusout?: ((event: FocusEvent) => any) | undefined;
+        onKeyup?: ((event: KeyboardEvent) => any) | undefined;
+        onAddon?: ((event: MouseEvent) => any) | undefined;
+        "onUpdate:showValue"?: ((value: boolean) => 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 inside the field before the value: a 16px icon or fixed text such as `https://`. */
+        prefix?: () => unknown;
+        /** Content inside the field after the value: a unit such as `Gi` or `%`, or a status icon. */
+        suffix?: () => unknown;
+        /** 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 under the field and its error, such as a note or a helper button. */
+        message?: () => unknown;
+    };
+    emit: (((evt: "input", event: Event) => void) & ((evt: "keydown", event: KeyboardEvent) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "focusout", event: FocusEvent) => void) & ((evt: "keyup", event: KeyboardEvent) => void) & ((evt: "addon", event: MouseEvent) => void)) & (((event: "update:modelValue", value: V) => void) & ((event: "update:showValue", value: boolean) => 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: string | number) => any;
-    addon: (event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-    onAddon?: ((event: MouseEvent) => any) | undefined;
-}>, {
-    type: "text" | "password" | "email" | "number" | "url" | "search";
-    required: boolean;
-    disabled: boolean;
-    name: string;
-    size: "small" | "normal";
-    readonly: boolean;
-    hint: string;
-    errorMsg: string;
-    addonLabel: string;
-    addonIcon: Component;
-    addonIconOnly: 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;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};