@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -0,0 +1,102 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export type CostSummaryDot = Tone | "pending" | "muted" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8";
+export interface CostSummarySpec {
+    /** Short name, e.g. "vCPU" or "SLA". */
+    label: string;
+    /** Its value, e.g. "4" or "99.95%". */
+    value: string;
+}
+export interface CostSummaryItem {
+    /** Unique key for the row. */
+    key: string | number;
+    /** What the cost is for, e.g. "Primary node", "Storage" or a node pool's name. */
+    label: string;
+    /** A line of muted text under the label, e.g. "General purpose / 2 vCPU / 4 GB RAM". */
+    detail?: string;
+    /** The cost. A number is formatted with the card's currency; a string is shown as is, e.g. "Free". */
+    price: string | number;
+    /** Unit after the price. Defaults to the card's `total-period`. */
+    period?: string;
+    /** A Lucide icon in a 32px tile before the label. Rows with an icon get dashed dividers, as on cloud-ui's Create Kubernetes page. */
+    icon?: Component;
+    /** A 10px coloured dot before the label, as on cloud-ui's Create database page. */
+    dot?: CostSummaryDot;
+    /** A small grey tag under the label, e.g. the machine tier "General purpose". */
+    badge?: string;
+    /** Label and value pairs in a two-column grid under the label, e.g. vCPU, RAM, Nodes or SLA. */
+    specs?: CostSummarySpec[];
+    /** Greys the row out, for included or free lines such as the control plane. */
+    muted?: boolean;
+}
+export interface Props {
+    /** Card title. */
+    title?: string;
+    /** Line under the title, e.g. "Review before creation". */
+    subtitle?: string;
+    /** A Lucide icon in a tinted 32px tile before the title, with a primary wash and the icon as a watermark, like the other create-page cards. */
+    icon?: Component;
+    /** The cost lines. */
+    items?: CostSummaryItem[];
+    /** The total. A number is formatted with the currency; a string is shown as is. Defaults to the sum of the rows' number prices. */
+    total?: string | number;
+    /** Unit after the total, and after each row's price unless the row sets `period`, e.g. `/mo` or `/month`. */
+    totalPeriod?: string;
+    /** A line under the total, e.g. "$0.06/hour". */
+    totalDetail?: string;
+    /** Label before the total. */
+    totalLabel?: string;
+    /** ISO 4217 currency code for number prices, e.g. `USD` or `EUR`. */
+    currency?: string;
+    /** Locale for number prices. Defaults to `en-US`, so prices read "$40.00" as in cloud-ui. */
+    locale?: string;
+    /** Formats every number price and the total. Overrides `currency` and `locale`. */
+    formatter?: (value: number) => string;
+    /** A note at the bottom with an info icon, e.g. what the cost leaves out. Or use the `note` slot. */
+    note?: string;
+    /** Text shown when there are no rows. Say what to pick to see a cost. */
+    emptyText?: string;
+    /** Sticks to the top while the page scrolls, and caps the rows at 416px (46% of the window on short screens) so the total and actions stay in view. */
+    sticky?: boolean;
+    /** Distance from the top when sticky, e.g. `"80px"` under an app navbar. */
+    top?: string;
+    /** Shows placeholder rows and a placeholder total while prices load. */
+    loading?: boolean;
+}
+type __VLS_Slots = {
+    /** Under the total, e.g. the full-width Create button. */
+    actions?: () => unknown;
+    /** A note at the bottom, after an info icon. Replaces the `note` prop. */
+    note?: () => unknown;
+    /** Replaces a row's content. Gets the `item` and its formatted `price`, period included. */
+    item?: (props: {
+        item: CostSummaryItem;
+        price: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    icon: Component;
+    loading: boolean;
+    top: string;
+    items: CostSummaryItem[];
+    subtitle: string;
+    emptyText: string;
+    total: string | number;
+    totalPeriod: string;
+    totalDetail: string;
+    totalLabel: string;
+    currency: string;
+    locale: string;
+    formatter: (value: number) => string;
+    note: string;
+    sticky: 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/AcCostSummary.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,179 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createStaticVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useId as v, useSlots as y } from "vue";
+import { Info as b } from "@lucide/vue";
+//#region src/lib/components/AcCostSummary.vue?vue&type=script&setup=true&lang.ts
+var ee = ["aria-labelledby", "aria-busy"], x = {
+	key: 0,
+	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
+	"aria-hidden": "true"
+}, te = {
+	key: 1,
+	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary",
+	"aria-hidden": "true"
+}, S = { class: "min-w-0 flex-1" }, C = ["id"], w = {
+	key: 0,
+	class: "mt-0.5 text-xs leading-4 text-muted"
+}, T = {
+	key: 0,
+	role: "list",
+	class: "m-0 list-none divide-y divide-dashed divide-border/70 px-5",
+	"aria-hidden": "true",
+	"data-testid": "ac-cost-summary-loading"
+}, E = {
+	key: 1,
+	class: "px-5 py-6 text-center text-base text-muted",
+	"data-testid": "ac-cost-summary-empty"
+}, D = { class: "min-w-0 flex-1" }, O = { class: "flex min-w-0 items-center gap-2" }, k = {
+	key: 1,
+	class: "mt-1.5 inline-block rounded-8 bg-surface-sunken/50 px-2 py-0.5 text-xs font-medium text-muted"
+}, A = {
+	key: 2,
+	class: "m-0 mt-2 grid grid-cols-2 gap-x-3 gap-y-1.5"
+}, j = { class: "shrink-0 text-base text-muted" }, M = { class: "m-0 truncate text-base font-medium text-heading" }, N = { class: "flex flex-col gap-3 border-t border-border/60 px-5 py-3.5" }, P = {
+	class: "flex items-baseline justify-between gap-2",
+	"aria-live": "polite",
+	"aria-atomic": "true",
+	"data-testid": "ac-cost-summary-total"
+}, F = { class: "text-lg font-semibold text-heading" }, I = {
+	key: 0,
+	class: "flex flex-col items-end gap-1.5 self-center",
+	"aria-hidden": "true"
+}, ne = {
+	key: 0,
+	class: "ac-skeleton-bone block h-3 w-16 rounded-4"
+}, L = {
+	key: 1,
+	class: "min-w-0 text-right"
+}, R = { class: "text-3xl leading-tight font-bold break-words text-primary-strong tabular-nums" }, z = { class: "text-base font-medium tracking-normal text-muted" }, B = {
+	key: 0,
+	class: "text-base leading-tight text-muted"
+}, V = {
+	key: 0,
+	class: "sr-only"
+}, H = {
+	key: 1,
+	class: "flex flex-col gap-2 [&>*]:w-full"
+}, U = {
+	key: 2,
+	class: "flex items-start gap-1.5 text-xs leading-snug text-muted"
+}, W = { class: "min-w-0" }, G = 3, K = /*@__PURE__*/ l({
+	__name: "AcCostSummary",
+	props: {
+		title: { default: "Cost summary" },
+		subtitle: { default: "" },
+		icon: { default: void 0 },
+		items: { default: () => [] },
+		total: { default: void 0 },
+		totalPeriod: { default: "/mo" },
+		totalDetail: { default: "" },
+		totalLabel: { default: "Total cost" },
+		currency: { default: "USD" },
+		locale: { default: "en-US" },
+		formatter: {
+			type: Function,
+			default: void 0
+		},
+		note: { default: "" },
+		emptyText: { default: "Pick a plan to see the estimated cost." },
+		sticky: {
+			type: Boolean,
+			default: !1
+		},
+		top: { default: "80px" },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(l) {
+		let K = l, q = y(), J = {
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger",
+			pending: "bg-pending",
+			muted: "bg-muted",
+			"chart-1": "bg-chart-1",
+			"chart-2": "bg-chart-2",
+			"chart-3": "bg-chart-3",
+			"chart-4": "bg-chart-4",
+			"chart-5": "bg-chart-5",
+			"chart-6": "bg-chart-6",
+			"chart-7": "bg-chart-7",
+			"chart-8": "bg-chart-8"
+		}, Y = v(), X = t(() => new Intl.NumberFormat(K.locale, {
+			style: "currency",
+			currency: K.currency
+		})), Z = t(() => K.items.some((e) => e.icon)), re = t(() => K.total === void 0 ? Q(K.items.reduce((e, t) => e + (typeof t.price == "number" ? t.price : 0), 0)) : Q(K.total));
+		function Q(e) {
+			return typeof e == "string" ? e : K.formatter ? K.formatter(e) : X.value.format(e);
+		}
+		function ie() {
+			return !!(K.note || q.note);
+		}
+		function $(e) {
+			return typeof e.price == "number" ? e.period ?? K.totalPeriod : e.period ?? "";
+		}
+		return (t, v) => (f(), i("section", {
+			class: u(["flex flex-col rounded-14 border border-border bg-surface text-body shadow-xs transition-shadow duration-200 hover:shadow-card motion-reduce:transition-none", l.sticky && "sticky"]),
+			style: d(l.sticky ? { top: l.top } : void 0),
+			"aria-labelledby": `${_(Y)}-title`,
+			"aria-busy": l.loading || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-cost-summary"
+		}, [
+			a("header", { class: u(["relative isolate flex items-center gap-3 rounded-t-[calc(var(--radius-14)-1px)] px-5 pt-5 pb-3", l.icon && "border-b border-border/60 bg-linear-to-br from-primary/10 via-primary/3 to-transparent"]) }, [
+				l.icon ? (f(), i("div", x, [(f(), n(h(l.icon), { class: "absolute -top-4 -right-4 size-24 text-primary/5" }))])) : r("", !0),
+				l.icon ? (f(), i("span", te, [(f(), n(h(l.icon), { class: "size-4" }))])) : r("", !0),
+				a("div", S, [a("h3", {
+					id: `${_(Y)}-title`,
+					class: "truncate font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
+				}, g(l.title), 9, C), l.subtitle ? (f(), i("p", w, g(l.subtitle), 1)) : r("", !0)])
+			], 2),
+			l.loading ? (f(), i("ul", T, [(f(), i(e, null, p(G, (e) => a("li", {
+				key: e,
+				class: "flex items-center gap-3 py-3.5"
+			}, [...v[0] ||= [o("<span class=\"ac-skeleton-bone block size-8 shrink-0 rounded-10\"></span><span class=\"min-w-0 flex-1\"><span class=\"ac-skeleton-bone block h-3.5 w-1/2 rounded-4\"></span><span class=\"ac-skeleton-bone mt-2 block h-3 w-1/3 rounded-4\"></span></span><span class=\"ac-skeleton-bone block h-3.5 w-16 shrink-0 rounded-4\"></span>", 3)]])), 64))])) : l.items.length ? (f(), i("ul", {
+				key: 2,
+				role: "list",
+				class: u(["m-0 list-none px-5", [Z.value ? "divide-y divide-dashed divide-border/70" : "flex flex-col gap-2.5 pb-3", l.sticky && "ac-scrollbar max-h-[min(46vh,416px)] overflow-y-auto"]])
+			}, [(f(!0), i(e, null, p(l.items, (o) => (f(), i("li", {
+				key: o.key,
+				class: u(["min-w-0", Z.value && "py-3.5"])
+			}, [m(t.$slots, "item", {
+				item: o,
+				price: `${Q(o.price)}${$(o)}`
+			}, () => [a("div", { class: u(["flex gap-3", Z.value ? "items-start" : "items-center"]) }, [Z.value && o.icon ? (f(), i("span", {
+				key: 0,
+				class: u(["flex size-8 shrink-0 items-center justify-center rounded-10 bg-surface-sunken/40", o.muted && "opacity-60"]),
+				"aria-hidden": "true"
+			}, [(f(), n(h(o.icon), { class: "size-4 text-muted" }))], 2)) : r("", !0), a("div", D, [
+				a("div", { class: u(["flex justify-between gap-2", Z.value ? "items-baseline" : "items-center"]) }, [a("span", O, [o.dot ? (f(), i("span", {
+					key: 0,
+					class: u(["size-2.5 shrink-0 rounded-full", [J[o.dot], o.muted && "opacity-60"]]),
+					"aria-hidden": "true"
+				}, null, 2)) : r("", !0), a("span", { class: u(["truncate", [Z.value ? "text-lg font-semibold" : "text-base", o.muted ? "text-muted" : "text-heading"]]) }, g(o.label), 3)]), a("span", { class: u(["whitespace-nowrap tabular-nums", [Z.value ? "text-lg font-semibold" : "text-base font-medium", o.muted ? "text-muted" : "text-heading"]]) }, [s(g(Q(o.price)), 1), a("span", { class: u(Z.value && "text-base font-normal text-muted") }, g($(o)), 3)], 2)], 2),
+				o.detail ? (f(), i("p", {
+					key: 0,
+					class: u(["text-muted", Z.value ? "mt-0.5 text-base" : ["mt-2.5 text-xs leading-relaxed", o.dot && "ml-[18px]"]])
+				}, g(o.detail), 3)) : r("", !0),
+				o.badge ? (f(), i("span", k, g(o.badge), 1)) : r("", !0),
+				o.specs?.length ? (f(), i("dl", A, [(f(!0), i(e, null, p(o.specs, (e) => (f(), i("div", {
+					key: e.label,
+					class: "flex min-w-0 items-baseline gap-1.5"
+				}, [a("dt", j, g(e.label), 1), a("dd", M, g(e.value), 1)]))), 128))])) : r("", !0)
+			])], 2)])], 2))), 128))], 2)) : (f(), i("p", E, g(l.emptyText), 1)),
+			a("div", N, [
+				a("div", P, [a("span", F, g(l.totalLabel), 1), l.loading ? (f(), i("div", I, [v[1] ||= a("span", { class: "ac-skeleton-bone block h-6 w-24 rounded-6" }, null, -1), l.totalDetail ? (f(), i("span", ne)) : r("", !0)])) : (f(), i("div", L, [a("div", R, [s(g(re.value), 1), a("span", z, g(l.totalPeriod), 1)]), l.totalDetail ? (f(), i("div", B, g(l.totalDetail), 1)) : r("", !0)]))]),
+				l.loading ? (f(), i("span", V, "Loading prices")) : r("", !0),
+				t.$slots.actions ? (f(), i("div", H, [m(t.$slots, "actions")])) : r("", !0),
+				ie() ? (f(), i("p", U, [c(_(b), {
+					class: "mt-px size-4 shrink-0",
+					"aria-hidden": "true"
+				}), a("span", W, [m(t.$slots, "note", {}, () => [s(g(l.note), 1)])])])) : r("", !0)
+			])
+		], 14, ee));
+	}
+});
+//#endregion
+export { K as default };

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

@@ -29,7 +29,7 @@ export interface Props {
     locale?: string;
     /** First column of the calendar, 0 = Sunday … 6 = Saturday. Defaults to the locale's. */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Adds a seconds box to the time in `datetime` mode. */
+    /** Adds a seconds column to the Time tab in `datetime` mode. */
     showSeconds?: boolean;
     /** Shows a clear button when there is a value. */
     clearable?: boolean;
@@ -41,7 +41,7 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`. */
     size?: "small" | "normal";
     /** Adds a hidden input with this name so plain form posts include the value. A range posts as `start/end`. */
     name?: string;
@@ -76,11 +76,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     clearable: boolean;
     errorMsg: string;
     presets: DatePickerPreset[];
+    locale: string;
     minDate: string;
     maxDate: string;
     isDateDisabled: (day: string) => boolean;
     timeZone: string;
-    locale: string;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     showSeconds: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;