@ac-design/design-system 0.0.0-stage → 1.0.1

package/dist/lib/components/AcAccordion.js

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

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

@@ -0,0 +1,35 @@
+export interface Props {
+    /** Lets several items be open at once. `v-model` becomes an array of values. */
+    multiple?: boolean;
+    /** `bordered` one card with dividers, `separated` a card per item, `flush` dividers only, for use inside a card or form. */
+    variant?: "bordered" | "separated" | "flush";
+    /** Heading level of each item's title, so the outline fits the page. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** AcAccordionItem children. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** The open item's `value` (or an array of values with `multiple`). `null` when all are closed. */
+    modelValue?: string | string[] | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+}>, {
+    multiple: boolean;
+    variant: "bordered" | "separated" | "flush";
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, 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/AcAccordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,61 @@
+import { computed as e, createElementBlock as t, defineComponent as n, mergeModels as r, normalizeClass as i, openBlock as a, provide as o, ref as s, renderSlot as c, useModel as l } from "vue";
+//#region src/lib/components/AcAccordion.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ n({
+	__name: "AcAccordion",
+	props: /*@__PURE__*/ r({
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: "bordered" },
+		headingLevel: { default: 3 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(n) {
+		let r = n, u = l(n, "modelValue"), d = s(null), f = e(() => {
+			let e = u.value;
+			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
+		});
+		function p(e) {
+			return f.value.includes(e);
+		}
+		function m(e) {
+			let t = p(e);
+			r.multiple ? u.value = t ? f.value.filter((t) => t !== e) : [...f.value, e] : u.value = t ? null : e;
+		}
+		function h(e) {
+			if (![
+				"ArrowDown",
+				"ArrowUp",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = e.target;
+			if (!t.matches("[data-accordion-trigger]")) return;
+			let n = [...d.value?.querySelectorAll("[data-accordion-trigger]") ?? []].filter((e) => e.closest("[data-testid='ac-accordion']") === d.value && !e.disabled), r = n.indexOf(t);
+			r < 0 || (e.preventDefault(), n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : (r + (e.key === "ArrowDown" ? 1 : -1) + n.length) % n.length]?.focus());
+		}
+		return o("ac-accordion", {
+			isOpen: p,
+			toggle: m,
+			variant: e(() => r.variant),
+			headingLevel: e(() => r.headingLevel)
+		}), (e, r) => (a(), t("div", {
+			ref_key: "root",
+			ref: d,
+			class: i(["w-full", {
+				"divide-y divide-border-light overflow-hidden rounded-10 border border-border bg-surface shadow-xs": n.variant === "bordered",
+				"flex flex-col gap-3": n.variant === "separated",
+				"divide-y divide-border-light border-y border-border-light": n.variant === "flush"
+			}]),
+			"data-ac-ds": "",
+			"data-testid": "ac-accordion",
+			onKeydown: h
+		}, [c(e.$slots, "default")], 34));
+	}
+});
+//#endregion
+export { u as default };

package/dist/lib/components/AcAccordionItem.js

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

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

@@ -0,0 +1,49 @@
+export interface Props {
+    /** Identifies the item in the parent AcAccordion's `v-model`. Generated when left out. */
+    value?: string;
+    /** Header text. The `title` slot overrides it. */
+    title?: string;
+    /** A muted line under the title, e.g. a summary of the settings inside ("3 replicas · 10 GiB"). */
+    description?: string;
+    /** The item can't be opened or closed. */
+    disabled?: boolean;
+    /** Heading level of the title. Defaults to the parent AcAccordion's, or 3. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** The panel content, shown when open. */
+    default?: () => unknown;
+    /** Replaces the `title` text. Keep it to text and inline badges; it sits inside the header button. */
+    title?: () => unknown;
+    /** Replaces the `description` text. */
+    description?: () => unknown;
+    /** A 16px icon before the title. */
+    icon?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the item is open. Use `v-model:open` for a single item outside an AcAccordion. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (open: boolean) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onToggle?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+    title: string;
+    value: string;
+    description: string;
+    disabled: 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/AcAccordionItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,81 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { ChevronDown as b } from "@lucide/vue";
+//#region src/lib/components/AcAccordionItem.vue?vue&type=script&setup=true&lang.ts
+var x = [
+	"id",
+	"aria-expanded",
+	"aria-controls",
+	"disabled"
+], S = {
+	key: 0,
+	class: "inline-flex shrink-0 text-muted [&_svg]:size-4",
+	"aria-hidden": "true"
+}, C = { class: "min-w-0 flex-1" }, w = { class: "block text-lg leading-6 font-medium text-heading" }, T = {
+	key: 0,
+	class: "mt-0.5 block text-xs text-muted"
+}, E = [
+	"id",
+	"aria-labelledby",
+	"inert"
+], D = /*@__PURE__*/ s({
+	__name: "AcAccordionItem",
+	props: /*@__PURE__*/ l({
+		value: { default: void 0 },
+		title: { default: "" },
+		description: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		headingLevel: { default: void 0 }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["toggle"], ["update:open"]),
+	setup(s, { emit: l }) {
+		let D = s, O = _(s, "open"), k = l, A = c("ac-accordion", null), j = g(), M = e(() => D.value ?? j), N = e(() => A ? A.isOpen(M.value) : O.value), P = e(() => D.headingLevel ?? A?.headingLevel.value ?? 3), F = e(() => A?.variant.value ?? "separated");
+		function I() {
+			if (D.disabled) return;
+			let e = !N.value;
+			A ? A.toggle(M.value) : O.value = e, k("toggle", e);
+		}
+		return v(N, (e) => {
+			A && (O.value = e);
+		}), (e, c) => (d(), r("div", {
+			class: u(F.value === "separated" && "overflow-hidden rounded-10 border border-border bg-surface shadow-xs"),
+			"data-ac-ds": "",
+			"data-testid": "ac-accordion-item"
+		}, [(d(), t(p(`h${P.value}`), { class: "m-0 text-base leading-5 font-normal tracking-normal" }, {
+			default: y(() => [i("button", {
+				id: `${h(j)}-trigger`,
+				type: "button",
+				"data-accordion-trigger": "",
+				"aria-expanded": N.value,
+				"aria-controls": `${h(j)}-panel`,
+				disabled: s.disabled,
+				class: u(["flex w-full cursor-pointer items-center gap-3 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1" : "px-4", !s.disabled && "hover:bg-surface-muted"]]),
+				onClick: I
+			}, [
+				e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
+				i("span", C, [i("span", w, [f(e.$slots, "title", {}, () => [a(m(s.title), 1)])]), s.description || e.$slots.description ? (d(), r("span", T, [f(e.$slots, "description", {}, () => [a(m(s.description), 1)])])) : n("", !0)]),
+				o(h(b), {
+					class: u(["size-4 shrink-0 text-muted transition-transform duration-200 ease-out-soft motion-reduce:transition-none", N.value && "rotate-180 text-heading"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])
+			], 10, x)]),
+			_: 3
+		})), i("div", { class: u(["grid transition-[grid-template-rows] duration-200 ease-out-soft motion-reduce:transition-none", N.value ? "grid-rows-[1fr]" : "grid-rows-[0fr]"]) }, [i("div", {
+			id: `${h(j)}-panel`,
+			role: "region",
+			"aria-labelledby": `${h(j)}-trigger`,
+			inert: !N.value || void 0,
+			class: "min-h-0 overflow-hidden"
+		}, [i("div", { class: u(["pt-1 pb-4 text-base text-body", F.value === "flush" ? "px-1" : "px-4"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+	}
+});
+//#endregion
+export { D as default };

package/dist/lib/components/AcAlert.js

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

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

@@ -0,0 +1,52 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** Status colour of the border, tint and icon. */
+    color?: Tone | "neutral";
+    /** Optional bold first line above the message. */
+    title?: string;
+    /** Shows a close button that emits `close`. */
+    dismissible?: boolean;
+    /** Hides the status icon, for dense inline messages. */
+    hideIcon?: boolean;
+    /** A Lucide icon component to replace the colour's default icon. */
+    icon?: Component;
+    /** Text of a small button on the right that emits `action`, such as "Retry" or "Upgrade". */
+    actionLabel?: string;
+    /** A Lucide icon component shown in the action button, before `action-label`. */
+    actionIcon?: Component;
+    /** Shows a spinner in the action button and blocks clicks while the action runs. */
+    actionLoading?: boolean;
+}
+type __VLS_Slots = {
+    /** The message. Links inside are underlined in the alert's colour. */
+    default?: () => unknown;
+    /** Replaces the status icon, e.g. with a custom SVG. */
+    icon?: () => unknown;
+    /** Buttons on the right of the message (wrapping below it on narrow screens). Use `AcButton size="small"`. Replaces `action-label`. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    action: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAction?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    title: string;
+    icon: Component;
+    color: Tone | "neutral";
+    dismissible: boolean;
+    hideIcon: boolean;
+    actionLabel: string;
+    actionIcon: Component;
+    actionLoading: 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/AcAlert.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,121 @@
+import e from "./AcButton.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createSlots as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { CircleAlert as g, CircleCheck as _, Info as v, TriangleAlert as y, X as b } from "@lucide/vue";
+//#region src/lib/components/AcAlert.vue?vue&type=script&setup=true&lang.ts
+var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2" }, C = { class: "min-w-0 flex-[1_1_256px]" }, w = {
+	key: 0,
+	class: "-my-1 flex shrink-0 flex-wrap items-center gap-2"
+}, T = /*@__PURE__*/ c({
+	__name: "AcAlert",
+	props: {
+		color: { default: "info" },
+		title: { default: "" },
+		dismissible: {
+			type: Boolean,
+			default: !1
+		},
+		hideIcon: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: void 0 },
+		actionLabel: { default: "" },
+		actionIcon: { default: void 0 },
+		actionLoading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["close", "action"],
+	setup(c, { emit: T }) {
+		let E = c, D = T, O = {
+			primary: {
+				box: "border-primary-90 bg-primary-97",
+				title: "text-primary-10",
+				body: "text-primary-20",
+				icon: "text-primary",
+				glyph: v
+			},
+			info: {
+				box: "border-blue-90 bg-blue-97",
+				title: "text-blue-10",
+				body: "text-blue-20",
+				icon: "text-blue-50",
+				glyph: v
+			},
+			success: {
+				box: "border-green-90 bg-green-97",
+				title: "text-green-10",
+				body: "text-green-20",
+				icon: "text-green-40",
+				glyph: _
+			},
+			warning: {
+				box: "border-yellow-80 bg-yellow-97",
+				title: "text-yellow-10",
+				body: "text-yellow-20",
+				icon: "text-yellow-50",
+				glyph: y
+			},
+			danger: {
+				box: "border-red-90 bg-red-97",
+				title: "text-red-10",
+				body: "text-red-20",
+				icon: "text-red-40",
+				glyph: g
+			},
+			neutral: {
+				box: "border-border bg-surface-muted",
+				title: "text-heading",
+				body: "text-body",
+				icon: "text-muted",
+				glyph: v
+			}
+		}, k = t(() => O[E.color]), A = t(() => E.icon ?? k.value.glyph), j = t(() => E.color === "neutral" ? "white" : E.color);
+		return (t, g) => (u(), i("div", {
+			class: l(["flex items-start gap-3 rounded-10 border px-4 py-3 text-base [&_a]:font-medium [&_a]:underline [&_a]:decoration-current/40 [&_a]:underline-offset-2 [&_a:hover]:decoration-current", [k.value.box, k.value.body]]),
+			role: c.color === "danger" || c.color === "warning" ? "alert" : "status",
+			"data-ac-ds": "",
+			"data-testid": "ac-alert"
+		}, [
+			c.hideIcon ? r("", !0) : (u(), i("span", {
+				key: 0,
+				class: l(["mt-0.5 inline-flex shrink-0 [&_svg]:size-4", k.value.icon]),
+				"aria-hidden": "true"
+			}, [d(t.$slots, "icon", {}, () => [(u(), n(f(A.value)))])], 2)),
+			a("div", S, [a("div", C, [c.title ? (u(), i("p", {
+				key: 0,
+				class: l(["font-semibold", k.value.title])
+			}, p(c.title), 3)) : r("", !0), a("div", { class: l(c.title && "mt-0.5") }, [d(t.$slots, "default")], 2)]), t.$slots.actions || c.actionLabel ? (u(), i("div", w, [d(t.$slots, "actions", {}, () => [s(e, {
+				title: c.actionLabel,
+				color: j.value,
+				variant: "outlined",
+				size: "small",
+				loading: c.actionLoading,
+				"data-ac-ds": "",
+				"data-testid": "ac-alert-action",
+				onClick: g[0] ||= (e) => D("action", e)
+			}, o({ _: 2 }, [c.actionIcon ? {
+				name: "icon",
+				fn: h(() => [(u(), n(f(c.actionIcon)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"title",
+				"color",
+				"loading"
+			])])])) : r("", !0)]),
+			c.dismissible ? (u(), i("button", {
+				key: 1,
+				type: "button",
+				class: "-my-0.5 -mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-70 transition hover:bg-current/8 hover:opacity-100 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-label": "Dismiss",
+				onClick: g[1] ||= (e) => D("close")
+			}, [s(m(b), {
+				class: "size-3.5",
+				"aria-hidden": "true"
+			})])) : r("", !0)
+		], 10, x));
+	}
+});
+//#endregion
+export { T as default };

package/dist/lib/components/AcAppSwitcher.js

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

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

@@ -0,0 +1,83 @@
+import type { Component } from "vue";
+export interface AppSwitcherApp {
+    /** Key of the app. Also the URL path: `db` opens `${baseUrl}/db/`. */
+    name: string;
+    /** Product name on the tile. */
+    title: string;
+    /** One line about the app. Old `sub_title`. */
+    subtitle?: string;
+    /** Full URL. Without it the URL is built from `baseUrl`, `name` and `port`. */
+    url?: string;
+    /** Dev-server port, used when `baseUrl` is `localhost` or `bb.test`. */
+    port?: string;
+    /** A Lucide icon component for the tile. */
+    icon?: Component;
+    /** Image URL for the tile, e.g. a product logo PNG. Wins over `icon`. Old `icon_url`. */
+    iconUrl?: string;
+    /** Tint of the icon tile. */
+    color?: "primary" | "blue" | "green" | "yellow" | "purple" | "red" | "slate";
+}
+export interface Props {
+    /** The app this is rendered in. It's marked as current (or hidden with `hideCurrent`). `id` is accepted as `platform`. */
+    currentApp?: "console" | "db" | "platform" | "id" | "billing" | "selfhost" | "learn" | "grafana" | "observe" | (string & {});
+    /** Origin the app URLs are built on, e.g. `https://appscode.com`. `localhost` and `bb.test` use each app's dev port. Any other origin counts as self-hosted. */
+    baseUrl?: string;
+    /** Organization to open Grafana in; written to the `gorg` cookie when Grafana is clicked. */
+    activeOrganization?: string;
+    /** Cookie domain for `gorg`, e.g. `.appscode.com`. */
+    rootDomain?: string;
+    /** Type of the active organization. Type `3` (client org) has no Console; type `6` keeps Billing on an offline installer. */
+    activeOrgType?: number;
+    /** Air-gapped offline installer: on a self-hosted origin, Billing stays in the list for org type `6`. */
+    isOfflineInstaller?: boolean;
+    /** Replaces the built-in AppsCode list. Entries without `url` get one built from `baseUrl`; the self-host and org-type rules aren't applied. */
+    apps?: AppSwitcherApp[];
+    /** Leaves the current app out of the grid, as the old component did. */
+    hideCurrent?: boolean;
+    /** Accessible name of the grid button, and the panel heading. */
+    label?: string;
+    /** Which edge of the button the panel lines up with. `end` suits the right side of the navbar. */
+    align?: "start" | "end";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content under the grid, e.g. a link to all products. */
+    footer?: (props: {
+        close: () => void;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (app: AppSwitcherApp & {
+        url: string;
+    }) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((app: AppSwitcherApp & {
+        url: string;
+    }) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    currentApp: "console" | "db" | "platform" | "id" | "billing" | "selfhost" | "learn" | "grafana" | "observe" | (string & {});
+    baseUrl: string;
+    activeOrganization: string;
+    rootDomain: string;
+    activeOrgType: number;
+    isOfflineInstaller: boolean;
+    apps: AppSwitcherApp[];
+    hideCurrent: boolean;
+    align: "start" | "end";
+}, {}, {}, {}, 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;
+    };
+};