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

package/dist/lib/components/AcDeleteModal.js

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

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

@@ -0,0 +1,51 @@
+export interface Props {
+    /** Heading, e.g. "Delete Database". */
+    title?: string;
+    /** The question. The item name is shown in bold after it. */
+    message?: string;
+    /** Name of the thing being deleted, e.g. `demo-postgres`. */
+    itemName?: string;
+    /** Extra consequence shown under the question, e.g. "Backups are kept for 7 days." */
+    detail?: string;
+    /** Label of the destructive button. */
+    confirmText?: string;
+    /** Requires typing `itemName` before the delete button enables. Use for irreversible deletes. */
+    confirmByTyping?: boolean;
+    /** Shows a spinner on the delete button and blocks closing while the request runs. */
+    loading?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Extra content under the message, e.g. a "Also delete backups" checkbox. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the dialog 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, {
+    "update:open": (value: boolean) => any;
+    cancel: () => any;
+    confirm: (itemName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((itemName: string) => any) | undefined;
+}>, {
+    title: string;
+    loading: boolean;
+    message: string;
+    itemName: string;
+    detail: string;
+    confirmText: string;
+    confirmByTyping: 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/AcDeleteModal.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,110 @@
+import e from "./AcButton.js";
+import t from "./AcModal.js";
+import n from "./AcInput.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, watch as y, withCtx as b } from "vue";
+import { Trash2 as x } from "@lucide/vue";
+//#region src/lib/components/AcDeleteModal.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "flex gap-4" }, C = {
+	class: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-red-95 text-red-40 ring-8 ring-red-97",
+	"aria-hidden": "true"
+}, w = { class: "min-w-0 flex-1 pt-0.5" }, T = { class: "text-lg leading-6 text-heading" }, E = { class: "font-semibold break-all" }, D = {
+	key: 0,
+	class: "mt-1 text-base text-label"
+}, O = {
+	key: 1,
+	class: "mt-4"
+}, k = { class: "mb-2 text-xs text-label" }, A = { class: "rounded-4 bg-surface-muted px-1 py-0.5 font-mono text-heading ring-1 ring-border" }, j = {
+	key: 2,
+	class: "mt-4"
+}, M = /*@__PURE__*/ d({
+	__name: "AcDeleteModal",
+	props: /*@__PURE__*/ f({
+		title: { default: "Delete" },
+		message: { default: "Are you sure you want to delete" },
+		itemName: { default: "" },
+		detail: { default: "" },
+		confirmText: { default: "Delete" },
+		confirmByTyping: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
+	setup(d, { emit: f }) {
+		let M = d, N = f, P = v(d, "open"), F = m("");
+		y(P, (e) => e && (F.value = ""));
+		let I = i(() => !M.confirmByTyping || F.value === M.itemName), L = () => {
+			P.value = !1, N("cancel");
+		};
+		return (i, f) => (p(), a(t, {
+			open: P.value,
+			"onUpdate:open": f[2] ||= (e) => P.value = e,
+			title: d.title,
+			size: "small",
+			closable: !d.loading,
+			"close-on-outside-click": !d.loading,
+			onClose: f[3] ||= (e) => N("cancel")
+		}, {
+			footer: b(() => [u(e, {
+				title: "Cancel",
+				color: "white",
+				disabled: d.loading,
+				"data-ac-ds": "",
+				"data-testid": "ac-delete-modal-cancel",
+				onClick: L
+			}, null, 8, ["disabled"]), u(e, {
+				title: d.confirmText,
+				color: "danger",
+				loading: d.loading,
+				disabled: !I.value,
+				"data-ac-ds": "",
+				"data-testid": "ac-delete-modal-confirm",
+				onClick: f[1] ||= (e) => N("confirm", d.itemName)
+			}, null, 8, [
+				"title",
+				"loading",
+				"disabled"
+			])]),
+			default: b(() => [c("div", S, [c("span", C, [u(_(x), {
+				class: "size-5",
+				"aria-hidden": "true"
+			})]), c("div", w, [
+				c("p", T, [
+					l(g(d.message), 1),
+					d.itemName ? (p(), s(r, { key: 0 }, [f[4] ||= l(g(" "), -1), c("strong", E, g(d.itemName), 1)], 64)) : o("", !0),
+					f[5] ||= l("? ", -1)
+				]),
+				d.detail ? (p(), s("p", D, g(d.detail), 1)) : o("", !0),
+				d.confirmByTyping && d.itemName ? (p(), s("div", O, [c("p", k, [
+					f[6] ||= l(" Type ", -1),
+					c("code", A, g(d.itemName), 1),
+					f[7] ||= l(" to confirm. ", -1)
+				]), u(n, {
+					modelValue: F.value,
+					"onUpdate:modelValue": f[0] ||= (e) => F.value = e,
+					label: "Resource name",
+					autocomplete: "off"
+				}, null, 8, ["modelValue"])])) : o("", !0),
+				i.$slots.default ? (p(), s("div", j, [h(i.$slots, "default")])) : o("", !0)
+			])])]),
+			_: 3
+		}, 8, [
+			"open",
+			"title",
+			"closable",
+			"close-on-outside-click"
+		]));
+	}
+});
+//#endregion
+export { M as default };

package/dist/lib/components/AcDivider.js

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

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

@@ -0,0 +1,25 @@
+export interface Props {
+    /** `horizontal` separates stacked content; `vertical` separates items in a row and stretches to its height. */
+    orientation?: "horizontal" | "vertical";
+    /** Text in the line, e.g. "OR" or a group name. The default slot overrides it. */
+    label?: string;
+    /** Where the label sits on a horizontal divider. Vertical labels are always centred. */
+    align?: "center" | "left";
+}
+type __VLS_Slots = {
+    /** Label content. Replaces `label`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    orientation: "horizontal" | "vertical";
+    align: "center" | "left";
+}, {}, {}, {}, 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/AcDivider.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,39 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, useSlots as u } from "vue";
+//#region src/lib/components/AcDivider.vue?vue&type=script&setup=true&lang.ts
+var d = ["aria-orientation"], f = { class: "shrink-0 whitespace-nowrap" }, p = /*@__PURE__*/ a({
+	__name: "AcDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		label: { default: "" },
+		align: { default: "center" }
+	},
+	setup(a) {
+		let p = a, m = u(), h = e(() => !!p.label || !!m.default), g = e(() => p.orientation === "vertical");
+		return (e, u) => h.value ? (s(), n("div", {
+			key: 1,
+			class: o(["flex shrink-0 items-center gap-3 text-xs font-medium text-muted", g.value ? "min-h-16 flex-col self-stretch" : "w-full"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-divider"
+		}, [
+			g.value || a.align === "center" ? (s(), n("span", {
+				key: 0,
+				class: o(["flex-1 bg-border", g.value ? "w-px" : "h-px"]),
+				"aria-hidden": "true"
+			}, null, 2)) : t("", !0),
+			r("span", f, [c(e.$slots, "default", {}, () => [i(l(a.label), 1)])]),
+			r("span", {
+				class: o(["flex-1 bg-border", g.value ? "w-px" : "h-px"]),
+				"aria-hidden": "true"
+			}, null, 2)
+		], 2)) : (s(), n("div", {
+			key: 0,
+			role: "separator",
+			"aria-orientation": a.orientation,
+			class: o(["shrink-0 bg-border", g.value ? "min-h-4 w-px self-stretch" : "h-px w-full"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-divider"
+		}, null, 10, d));
+	}
+});
+//#endregion
+export { p as default };

package/dist/lib/components/AcDropdown.js

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

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

@@ -0,0 +1,45 @@
+export interface Props {
+    /** Text of the default trigger button. Without it (and without a `trigger` slot) a ⋮ icon button is shown. */
+    label?: string;
+    /** Accessible name of the menu and of the ⋮ trigger, e.g. "Actions for demo-postgres". */
+    menuLabel?: string;
+    /** Which edge of the trigger the menu lines up with. Use `end` for menus at the right of a row. Old `is-right`. */
+    align?: "start" | "end";
+    /** Preferred side. The menu flips when there isn't room. Old `is-up`. */
+    placement?: "bottom" | "top";
+    /** Disables the default trigger and stops the menu opening. */
+    disabled?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom trigger, usually an `AcButton`. It gets the menu-button ARIA attributes and keys; don't add your own click toggle. */
+    trigger?: (props: {
+        open: boolean;
+    }) => unknown;
+    /** The menu: `AcDropdownItem`s and `AcDropdownDivider`s. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the menu is open. Bind with `v-model:open` to open or close it from code. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    align: "start" | "end";
+    placement: "bottom" | "top";
+    menuLabel: 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;
+    };
+};

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

@@ -0,0 +1,152 @@
+import e from "./AcButton.js";
+import { Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as m, openBlock as h, provide as g, ref as _, renderSlot as v, unref as y, useId as b, useModel as ee, useSlots as te, watch as x, withCtx as S } from "vue";
+import { ChevronDown as C, EllipsisVertical as w } from "@lucide/vue";
+//#region src/lib/components/AcDropdown.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", O = /*@__PURE__*/ s({
+	__name: "AcDropdown",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		menuLabel: { default: "Actions" },
+		align: { default: "start" },
+		placement: { default: "bottom" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: ["update:open"],
+	setup(s) {
+		let c = s, O = ee(s, "open"), k = te(), A = b(), j = `${A}-menu`, M = _(null), N = _(null), P = _({}), F = _(!1), I = _(""), L = null, R = "menu", z = "", B;
+		function V() {
+			L = M.value?.querySelector("button, a[href], [tabindex]") ?? null, L && (L.id || (L.id = `${A}-trigger`), I.value = L.id, L.setAttribute("aria-haspopup", "menu"), L.setAttribute("aria-expanded", String(O.value)), O.value ? L.setAttribute("aria-controls", j) : L.removeAttribute("aria-controls"));
+		}
+		function H() {
+			return [...N.value?.querySelectorAll(D) ?? []];
+		}
+		function U(e) {
+			let t = H();
+			if (!t.length) return N.value?.focus();
+			t[e === "first" ? 0 : e === "last" ? t.length - 1 : (e + t.length) % t.length]?.focus();
+		}
+		function W(e) {
+			c.disabled || (R = e, O.value = !0);
+		}
+		function G(e = !0) {
+			O.value && (O.value = !1, e && L?.focus());
+		}
+		function K() {
+			if (!L || !N.value) return;
+			let e = L.getBoundingClientRect(), t = `${Math.min(Math.max(e.width, 192), window.innerWidth - 16)}px`;
+			N.value.style.minWidth = t;
+			let { offsetWidth: n, offsetHeight: r } = N.value, i = window.innerHeight - e.bottom - 4 - 8, a = e.top - 4 - 8, o = c.placement === "top" ? a >= r || a > i : i < r && a > i, s = c.align === "end" ? e.right - n : e.left;
+			F.value = !o, P.value = {
+				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 4 : e.bottom + 4}px`,
+				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
+				minWidth: t,
+				maxHeight: `${Math.max(o ? a : i, 120)}px`
+			};
+		}
+		function q(e) {
+			if (L?.contains(e.target)) {
+				if (O.value) return G();
+				W(e.detail === 0 ? "first" : "menu");
+			}
+		}
+		function J(e) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				if (e.preventDefault(), O.value) return U(e.key === "ArrowDown" ? "first" : "last");
+				W(e.key === "ArrowDown" ? "first" : "last");
+			}
+		}
+		function Y(e) {
+			let t = H(), n = t.indexOf(document.activeElement);
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = e.key === "ArrowDown" ? 1 : -1;
+				U(n < 0 ? t > 0 ? "first" : "last" : n + t);
+			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), U(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), G()) : e.key === "Tab" ? G() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && X(e.key, t, n);
+		}
+		function X(e, t, n) {
+			z += e.toLowerCase(), clearTimeout(B), B = setTimeout(() => z = "", 500);
+			let r = (e) => (e.dataset.acLabel || e.textContent || "").trim().toLowerCase(), i = z.length === 1 ? n + 1 : Math.max(n, 0);
+			[...t.slice(i), ...t.slice(0, i)].find((e) => r(e).startsWith(z))?.focus();
+		}
+		function Z(e) {
+			let t = e.target;
+			M.value?.contains(t) || N.value?.contains(t) || G(!1);
+		}
+		function Q(e) {
+			e && N.value?.contains(e.target) || K();
+		}
+		function $(e) {
+			e ? (document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
+		}
+		return g("ac-dropdown", {
+			close: G,
+			focusMenu: () => N.value?.focus()
+		}), x(O, async (e) => {
+			V(), $(e), e && (await l(), K(), R === "menu" ? N.value?.focus() : U(R), R = "menu");
+		}), p(V), m(V), f(() => {
+			$(!1), clearTimeout(B);
+		}), (c, l) => (h(), a("div", {
+			ref_key: "root",
+			ref: M,
+			class: "inline-flex",
+			"data-ac-ds": "",
+			"data-testid": "ac-dropdown",
+			onClick: q,
+			onKeydown: J
+		}, [k.trigger ? v(c.$slots, "trigger", { open: O.value }, void 0, void 0, 0) : s.label ? (h(), r(e, {
+			key: 1,
+			title: s.label,
+			color: "white",
+			disabled: s.disabled
+		}, {
+			default: S(() => [o(y(C), {
+				class: u(["-mr-1 text-muted transition-transform duration-200", O.value && "rotate-180"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])]),
+			_: 1
+		}, 8, ["title", "disabled"])) : (h(), a("button", {
+			key: 2,
+			type: "button",
+			"aria-label": s.menuLabel,
+			disabled: s.disabled,
+			class: u(["inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", O.value && "bg-surface-sunken text-heading"])
+		}, [o(y(w), {
+			class: "size-4",
+			"aria-hidden": "true"
+		})], 10, T)), (h(), r(t, { to: "body" }, [o(n, {
+			"enter-active-class": "transition duration-150 ease-out",
+			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${F.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
+			"leave-active-class": "transition duration-100 ease-in",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: S(() => [O.value ? (h(), a("div", {
+				key: 0,
+				id: j,
+				ref_key: "panel",
+				ref: N,
+				role: "menu",
+				tabindex: "-1",
+				"aria-orientation": "vertical",
+				"aria-labelledby": (k.trigger || s.label) && I.value ? I.value : void 0,
+				"aria-label": k.trigger || s.label ? void 0 : s.menuLabel,
+				class: u(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col rounded-8 border border-border bg-surface p-1 shadow-lg outline-none", F.value ? "origin-top" : "origin-bottom"]),
+				style: d(P.value),
+				"data-ac-ds": "",
+				"data-testid": "ac-dropdown-menu",
+				onKeydown: Y
+			}, [v(c.$slots, "default")], 46, E)) : i("", !0)]),
+			_: 3
+		}, 8, ["enter-from-class"])]))], 544));
+	}
+});
+//#endregion
+export { O as default };

package/dist/lib/components/AcDropdownDivider.js

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

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

@@ -0,0 +1,9 @@
+export interface Props {
+    /** Optional group heading shown under the line, e.g. "Danger zone". The line is hidden when the divider comes first. */
+    label?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, toDisplayString as a } from "vue";
+//#region src/lib/components/AcDropdownDivider.vue?vue&type=script&setup=true&lang.ts
+var o = ["aria-label"], s = {
+	key: 0,
+	class: "px-2.5 pt-1.5 pb-1 text-sm font-medium tracking-wide text-muted uppercase"
+}, c = /*@__PURE__*/ r({
+	__name: "AcDropdownDivider",
+	props: { label: { default: "" } },
+	setup(r) {
+		return (c, l) => (i(), t("div", {
+			role: "separator",
+			"aria-label": r.label || void 0,
+			class: "group",
+			"data-ac-ds": "",
+			"data-testid": "ac-dropdown-divider"
+		}, [l[0] ||= n("div", { class: "-mx-1 my-1 h-px bg-border-light group-first:hidden" }, null, -1), r.label ? (i(), t("div", s, a(r.label), 1)) : e("", !0)], 8, o));
+	}
+});
+//#endregion
+export { c as default };

package/dist/lib/components/AcDropdownItem.js

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

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

@@ -0,0 +1,50 @@
+import type { Component } from "vue";
+export interface Props {
+    /** Item text. You can also pass content through the default slot. */
+    label?: string;
+    /** A second, muted line under the label. */
+    description?: string;
+    /** An icon component shown before the label, e.g. `:icon="Trash2"` from @lucide/vue. Or use the `icon` slot. */
+    icon?: Component;
+    /** Keyboard shortcut hint shown at the right, e.g. "⌘D". Display only; bind the key yourself. */
+    shortcut?: string;
+    /** Red text for destructive actions such as Delete. Confirm them before acting. */
+    danger?: boolean;
+    /** Disables the item; it's skipped by the arrow keys. */
+    disabled?: boolean;
+    /** Renders a link to this URL instead of a button. */
+    href?: string;
+    /** Link target for `href`, e.g. `_blank`. */
+    target?: string;
+    /** Renders a `RouterLink` to this route instead of a button. Needs vue-router in the app. */
+    to?: string | Record<string, unknown>;
+}
+type __VLS_Slots = {
+    /** Item content, after the icon and `label`. */
+    default?: () => unknown;
+    /** A 16px icon before the label. */
+    icon?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    label: string;
+    description: string;
+    disabled: boolean;
+    icon: Component;
+    target: string;
+    href: string;
+    to: string | Record<string, unknown>;
+    danger: boolean;
+    shortcut: 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;
+    };
+};

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

@@ -0,0 +1,86 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+//#region src/lib/components/AcDropdownItem.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
+	key: 0,
+	class: "block text-xs text-muted"
+}, y = {
+	key: 1,
+	class: "mt-0.5 shrink-0 font-sans text-xs text-muted"
+}, b = /*@__PURE__*/ o({
+	__name: "AcDropdownItem",
+	props: {
+		label: { default: "" },
+		description: { default: "" },
+		icon: { default: void 0 },
+		shortcut: { default: "" },
+		danger: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		target: { default: void 0 },
+		to: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(o, { emit: b }) {
+		let x = o, S = b, C = s("ac-dropdown", null), w = x.to ? d("RouterLink") : null, T = e(() => x.disabled ? "button" : x.to && w ? w : x.href ? "a" : "button");
+		function E(e) {
+			if (x.disabled) {
+				e.preventDefault();
+				return;
+			}
+			S("click", e), C?.close();
+		}
+		function D(e) {
+			if (x.disabled || e.pointerType === "touch") return;
+			let t = e.currentTarget;
+			document.activeElement !== t && t.focus({ preventScroll: !0 });
+		}
+		function O(e) {
+			e.pointerType !== "touch" && document.activeElement === e.currentTarget && C?.focusMenu();
+		}
+		return (e, s) => (l(), t(f(T.value), {
+			role: "menuitem",
+			tabindex: "-1",
+			type: T.value === "button" ? "button" : void 0,
+			href: T.value === "a" ? o.href : void 0,
+			target: T.value === "a" ? o.target : void 0,
+			to: T.value === m(w) ? o.to : void 0,
+			disabled: T.value === "button" && o.disabled || void 0,
+			"aria-disabled": o.disabled || void 0,
+			"data-ac-label": o.label || void 0,
+			class: c(["flex w-full cursor-pointer items-start gap-2.5 rounded-6 px-2.5 py-1.5 text-left text-base no-underline outline-none select-none transition-colors duration-75 disabled:cursor-not-allowed disabled:opacity-40", o.danger ? "text-red-30 focus:bg-red-95 focus:text-red-20" : "text-heading focus:bg-surface-sunken"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-dropdown-item",
+			onClick: E,
+			onPointermove: D,
+			onPointerleave: O
+		}, {
+			default: h(() => [
+				o.icon || e.$slots.icon ? (l(), r("span", {
+					key: 0,
+					class: c(["mt-0.5 inline-flex shrink-0 [&_svg]:size-4", o.danger ? "text-current" : "text-muted"]),
+					"aria-hidden": "true"
+				}, [u(e.$slots, "icon", {}, () => [(l(), t(f(o.icon)))])], 2)) : n("", !0),
+				i("span", g, [i("span", _, [a(p(o.label), 1), u(e.$slots, "default")]), o.description ? (l(), r("span", v, p(o.description), 1)) : n("", !0)]),
+				o.shortcut ? (l(), r("kbd", y, p(o.shortcut), 1)) : n("", !0)
+			]),
+			_: 3
+		}, 40, [
+			"type",
+			"href",
+			"target",
+			"to",
+			"disabled",
+			"aria-disabled",
+			"data-ac-label",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { b as default };

package/dist/lib/components/AcEmptyState.js

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