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

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

@@ -0,0 +1,274 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as ee, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useId as h, useModel as g, withModifiers as _ } from "vue";
+import { CircleAlert as v, FileText as y, Upload as b, X as x } from "@lucide/vue";
+//#region src/lib/components/AcFileUpload.vue?vue&type=script&setup=true&lang.ts
+var S = ["id"], te = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, ne = [
+	"id",
+	"name",
+	"accept",
+	"multiple",
+	"disabled"
+], re = [
+	"disabled",
+	"aria-describedby",
+	"aria-label"
+], ie = ["title"], ae = ["aria-label"], C = { class: "pointer-events-none text-base text-heading" }, w = { class: "font-medium" }, oe = {
+	key: 0,
+	class: "text-muted"
+}, T = [
+	"disabled",
+	"aria-describedby",
+	"aria-label"
+], E = {
+	key: 0,
+	class: "pointer-events-none -mt-1 text-xs text-muted"
+}, D = ["id"], O = ["id"], se = ["aria-label"], ce = ["title"], le = { class: "shrink-0 text-xs text-muted tabular-nums" }, ue = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], de = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, k = /*@__PURE__*/ s({
+	__name: "AcFileUpload",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		accept: { default: "" },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		maxSize: { default: 0 },
+		small: {
+			type: Boolean,
+			default: !1
+		},
+		description: { default: "" },
+		name: { default: "" },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c([
+		"add",
+		"remove",
+		"reject"
+	], ["update:modelValue"]),
+	setup(s, { expose: c, emit: k }) {
+		let A = s, j = g(s, "modelValue"), M = k, N = h(), P = d(null), F = d(null), I = d(null), L = d(0), R = d([]), z = d(""), B = t(() => L.value > 0), V = t(() => A.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean)), fe = t(() => {
+			let e = [];
+			return V.value.length && e.push(V.value.join(", ")), A.maxSize && e.push(`up to ${q(A.maxSize)}`), e.join(" · ");
+		}), H = t(() => A.description || fe.value), U = t(() => R.value.map((e) => e.message).join(" ")), W = t(() => A.errorMsg || U.value), G = t(() => W.value || A.hint ? `${N}-msg` : void 0), K = t(() => j.value.length ? j.value.length === 1 ? j.value[0].name : `${j.value.length} files` : "");
+		function q(e) {
+			if (e < 1024) return `${e} B`;
+			let t = [
+				"KB",
+				"MB",
+				"GB"
+			], n = e / 1024, r = 0;
+			for (; n >= 1024 && r < t.length - 1;) n /= 1024, r++;
+			return `${n >= 10 || Number.isInteger(n) ? Math.round(n) : n.toFixed(1)} ${t[r]}`;
+		}
+		function pe(e) {
+			if (!V.value.length) return !0;
+			let t = e.name.toLowerCase(), n = e.type.toLowerCase();
+			return V.value.some((e) => e.startsWith(".") ? t.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
+		}
+		function me(e, t) {
+			return e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+		}
+		function J(e) {
+			if (A.disabled || !e.length) return;
+			let t = [], n = [];
+			for (let r of A.multiple ? e : e.slice(0, 1)) pe(r) ? A.maxSize && r.size > A.maxSize ? n.push({
+				file: r,
+				reason: "size",
+				message: `${r.name} is larger than ${q(A.maxSize)}.`
+			}) : t.push(r) : n.push({
+				file: r,
+				reason: "type",
+				message: `${r.name} isn't an allowed file type.`
+			});
+			if (R.value = n, n.length && M("reject", n), !t.length) {
+				z.value = U.value;
+				return;
+			}
+			let r = A.multiple ? t.filter((e) => !j.value.some((t) => me(t, e))) : t;
+			j.value = A.multiple ? [...j.value, ...r] : t, M("add", r), z.value = `${r.length === 1 ? r[0].name : `${r.length} files`} added. ${U.value}`.trim();
+		}
+		function Y() {
+			A.disabled || P.value?.click();
+		}
+		function he(e) {
+			let t = e.target;
+			J([...t.files ?? []]), t.value = "";
+		}
+		function X(e) {
+			!A.disabled && e.dataTransfer?.types.includes("Files") && (e.preventDefault(), L.value++);
+		}
+		function Z(e) {
+			!A.disabled && e.dataTransfer?.types.includes("Files") && (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+		}
+		function Q() {
+			L.value = Math.max(0, L.value - 1);
+		}
+		function $(e) {
+			A.disabled || (e.preventDefault(), L.value = 0, J([...e.dataTransfer?.files ?? []]));
+		}
+		async function ge(e) {
+			let t = j.value[e];
+			if (!t || A.disabled) return;
+			j.value = j.value.filter((t, n) => n !== e), R.value = [], M("remove", t), z.value = `${t.name} removed.`, await ee();
+			let n = I.value?.querySelectorAll("button");
+			(n?.[Math.min(e, n.length - 1)] ?? F.value)?.focus();
+		}
+		function _e() {
+			let e = [...j.value];
+			j.value = [], R.value = [], e.forEach((e) => M("remove", e)), z.value = "File removed.", F.value?.focus();
+		}
+		return c({ open: Y }), (t, c) => (u(), r("div", {
+			class: l(["w-full", s.disabled && "opacity-60"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-file-upload"
+		}, [
+			s.label ? (u(), r("p", {
+				key: 0,
+				id: `${m(N)}-label`,
+				class: "mb-1.5 text-xs font-medium text-label"
+			}, [a(p(s.label), 1), s.required ? (u(), r("span", te, " *")) : n("", !0)], 8, S)) : n("", !0),
+			i("input", {
+				id: `${m(N)}-input`,
+				ref_key: "input",
+				ref: P,
+				type: "file",
+				class: "hidden",
+				tabindex: "-1",
+				"aria-hidden": "true",
+				name: s.name || void 0,
+				accept: s.accept || void 0,
+				multiple: s.multiple,
+				disabled: s.disabled,
+				onChange: he
+			}, null, 40, ne),
+			s.small ? (u(), r("div", {
+				key: 1,
+				class: l(["flex h-9 w-full items-center rounded-6 border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150", [W.value ? "border-red-60" : B.value ? "border-primary shadow-[0_0_0_3px_var(--color-ring)]" : "border-border hover:border-border-dark", s.disabled && "bg-surface-muted"]]),
+				onDragenter: X,
+				onDragover: Z,
+				onDragleave: Q,
+				onDrop: $
+			}, [
+				i("button", {
+					ref_key: "browseButton",
+					ref: F,
+					type: "button",
+					class: "ml-1 inline-flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-4 border border-border bg-surface-muted px-2.5 text-xs font-medium text-heading transition hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed",
+					disabled: s.disabled,
+					"aria-describedby": G.value,
+					"aria-label": s.label ? `${s.multiple ? "Choose files" : "Choose file"} for ${s.label}` : void 0,
+					onClick: Y
+				}, [o(m(b), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				}), a(" " + p(s.multiple ? "Choose files" : "Choose file"), 1)], 8, re),
+				i("span", {
+					class: l(["min-w-0 flex-1 truncate px-2.5 text-base", K.value ? "text-heading" : "text-muted"]),
+					title: j.value.map((e) => e.name).join(", ")
+				}, p(K.value || (s.multiple ? "No files chosen" : "No file chosen")), 11, ie),
+				j.value.length && !s.disabled ? (u(), r("button", {
+					key: 0,
+					type: "button",
+					class: "mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					"aria-label": j.value.length === 1 ? `Remove ${j.value[0].name}` : "Remove all files",
+					onClick: _e
+				}, [o(m(x), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})], 8, ae)) : n("", !0)
+			], 34)) : (u(), r("div", {
+				key: 2,
+				class: l(["flex flex-col items-center justify-center gap-3 rounded-10 border border-dashed px-6 py-7 text-center transition-colors duration-150", [s.disabled ? "cursor-not-allowed border-border bg-surface-muted" : "cursor-pointer", !s.disabled && (B.value ? "border-primary bg-primary-97" : W.value ? "border-red-60 bg-surface hover:bg-surface-muted" : "border-border-dark bg-surface hover:bg-surface-muted")]]),
+				onClick: _(Y, ["self"]),
+				onDragenter: X,
+				onDragover: Z,
+				onDragleave: Q,
+				onDrop: $
+			}, [
+				i("span", {
+					class: l(["pointer-events-none inline-flex size-10 items-center justify-center rounded-10 border shadow-xs transition-colors", B.value ? "border-primary-80 bg-surface text-primary" : "border-border bg-surface text-muted"]),
+					"aria-hidden": "true"
+				}, [o(m(b), { class: "size-4.5" })], 2),
+				i("p", C, [i("span", w, p(B.value ? "Drop to upload" : s.multiple ? "Drag and drop files here" : "Drag and drop a file here"), 1), B.value ? n("", !0) : (u(), r("span", oe, " or"))]),
+				i("button", {
+					ref_key: "browseButton",
+					ref: F,
+					type: "button",
+					class: "inline-flex h-8 cursor-pointer items-center gap-2 rounded-6 border border-border bg-surface px-3 text-base font-medium text-heading shadow-xs transition hover:border-border-dark hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed",
+					disabled: s.disabled,
+					"aria-describedby": G.value,
+					"aria-label": s.label ? `Browse files for ${s.label}` : void 0,
+					onClick: Y
+				}, " Browse files ", 8, T),
+				H.value ? (u(), r("p", E, p(H.value), 1)) : n("", !0)
+			], 34)),
+			W.value ? (u(), r("p", {
+				key: 3,
+				id: `${m(N)}-msg`,
+				class: "mt-1.5 flex items-start gap-1 text-xs text-red-30"
+			}, [o(m(v), {
+				class: "mt-px size-3.5 shrink-0",
+				"aria-hidden": "true"
+			}), a(" " + p(W.value), 1)], 8, D)) : s.hint ? (u(), r("p", {
+				key: 4,
+				id: `${m(N)}-msg`,
+				class: "mt-1.5 text-xs text-muted"
+			}, p(s.hint), 9, O)) : n("", !0),
+			!s.small && j.value.length ? (u(), r("ul", {
+				key: 5,
+				ref_key: "list",
+				ref: I,
+				class: "mt-3 divide-y divide-border-light overflow-hidden rounded-8 border border-border bg-surface",
+				"aria-label": s.label ? `${s.label} files` : "Chosen files"
+			}, [(u(!0), r(e, null, f(j.value, (e, t) => (u(), r("li", {
+				key: `${e.name}-${e.size}-${e.lastModified}`,
+				class: "flex items-center gap-3 py-2 pr-2 pl-3"
+			}, [
+				o(m(y), {
+					class: "size-4 shrink-0 text-muted",
+					"aria-hidden": "true"
+				}),
+				i("span", {
+					class: "min-w-0 flex-1 truncate text-base text-heading",
+					title: e.name
+				}, p(e.name), 9, ce),
+				i("span", le, p(q(e.size)), 1),
+				i("button", {
+					type: "button",
+					class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 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",
+					"aria-label": `Remove ${e.name}`,
+					disabled: s.disabled,
+					onClick: (e) => ge(t)
+				}, [o(m(x), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})], 8, ue)
+			]))), 128))], 8, se)) : n("", !0),
+			i("span", de, p(z.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { k as default };

package/dist/lib/components/AcFontScale.js

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

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

@@ -0,0 +1,17 @@
+import type { FontScale } from "../composables/useFontScale";
+export interface Props {
+    /** Used until the viewer picks a size: a preset name or a number (0.8–1.5). */
+    defaultScale?: FontScale | number;
+    /** `icons` is a compact switch of four "A"s; `labels` adds the words, for menus and settings pages. */
+    display?: "icons" | "labels";
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "set:scale": (scale: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onSet:scale"?: ((scale: number) => any) | undefined;
+}>, {
+    display: "icons" | "labels";
+    defaultScale: FontScale | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+import { FONT_SCALES as e, useFontScale as t } from "../composables/useFontScale.js";
+import { Fragment as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
+//#region src/lib/components/AcFontScale.vue?vue&type=script&setup=true&lang.ts
+var d = {
+	role: "radiogroup",
+	"aria-label": "Text size",
+	class: "inline-flex items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5",
+	"data-ac-ds": "",
+	"data-testid": "ac-font-scale"
+}, f = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"onClick"
+], p = { key: 1 }, m = /*@__PURE__*/ a({
+	__name: "AcFontScale",
+	props: {
+		defaultScale: { default: "default" },
+		display: { default: "icons" }
+	},
+	emits: ["set:scale"],
+	setup(a, { emit: m }) {
+		let h = a, g = m, _ = [
+			{
+				value: "small",
+				label: "Small",
+				glyph: "text-xs"
+			},
+			{
+				value: "default",
+				label: "Default",
+				glyph: "text-base"
+			},
+			{
+				value: "large",
+				label: "Large",
+				glyph: "text-xl"
+			},
+			{
+				value: "larger",
+				label: "Larger",
+				glyph: "text-2xl"
+			}
+		], { scale: v, preset: y, setScale: b } = t({ defaultScale: typeof h.defaultScale == "number" ? h.defaultScale : e[h.defaultScale] });
+		function x(e) {
+			b(e), g("set:scale", v.value);
+		}
+		return (e, t) => (s(), r("div", d, [(s(), r(n, null, c(_, (e) => i("button", {
+			key: e.value,
+			type: "button",
+			role: "radio",
+			"aria-checked": u(y) === e.value,
+			"aria-label": a.display === "icons" ? `${e.label} text` : void 0,
+			title: a.display === "icons" ? `${e.label} text` : void 0,
+			class: o(["inline-flex h-6.5 cursor-pointer items-center justify-center gap-1.5 rounded-6 text-xs font-medium transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [a.display === "icons" ? "w-7" : "px-2.5", u(y) === e.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted hover:text-heading"]]),
+			onClick: (t) => x(e.value)
+		}, [a.display === "icons" ? (s(), r("span", {
+			key: 0,
+			class: o(["leading-none font-semibold", e.glyph]),
+			"aria-hidden": "true"
+		}, "A", 2)) : (s(), r("span", p, l(e.label), 1))], 10, f)), 64))]));
+	}
+});
+//#endregion
+export { m as default };

package/dist/lib/components/AcForm.js

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

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

@@ -0,0 +1,31 @@
+export interface Props {
+    /** Maximum width of the fields: `narrow` 640px, `normal` 800px (the old `.form-content`), `wide` 1000px, `full` no limit. Defaults to `wide` for the `aside` layout, `normal` otherwise. */
+    width?: "narrow" | "normal" | "wide" | "full";
+    /** Default layout of every AcFormSection inside: `stacked` puts the title above the fields, `aside` puts it on the left from 768px up. */
+    layout?: "stacked" | "aside";
+    /** Lets the browser block submit on empty `required` fields. Off by default so `@submit` always fires and your own validation shows its messages. */
+    nativeValidation?: boolean;
+}
+type __VLS_Slots = {
+    /** AcFormSection groups, or fields directly. */
+    default?: () => unknown;
+    /** An AcFormFooter. It's placed after the fields and spans the whole form. */
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (event: SubmitEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSubmit?: ((event: SubmitEvent) => any) | undefined;
+}>, {
+    width: "narrow" | "normal" | "wide" | "full";
+    layout: "stacked" | "aside";
+    nativeValidation: 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/AcForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, provide as o, renderSlot as s, withModifiers as c } from "vue";
+//#region src/lib/components/AcForm.vue?vue&type=script&setup=true&lang.ts
+var l = ["novalidate"], u = /*@__PURE__*/ r({
+	__name: "AcForm",
+	props: {
+		width: { default: void 0 },
+		layout: { default: "stacked" },
+		nativeValidation: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["submit"],
+	setup(r, { emit: u }) {
+		let d = r, f = u, p = {
+			narrow: "max-w-160",
+			normal: "max-w-200",
+			wide: "max-w-250",
+			full: ""
+		}, m = e(() => p[d.width ?? (d.layout === "aside" ? "wide" : "normal")]);
+		o("ac-form", {
+			layout: e(() => d.layout),
+			widthClass: m
+		});
+		function h(e) {
+			f("submit", e);
+		}
+		return (e, o) => (a(), t("form", {
+			class: "w-full",
+			novalidate: !r.nativeValidation,
+			"data-ac-ds": "",
+			"data-testid": "ac-form",
+			onSubmit: c(h, ["prevent"])
+		}, [n("div", { class: i(["flex w-full flex-col", m.value]) }, [s(e.$slots, "default")], 2), s(e.$slots, "footer")], 40, l));
+	}
+});
+//#endregion
+export { u as default };

package/dist/lib/components/AcFormArray.js

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

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

@@ -0,0 +1,124 @@
+import type { CellType } from "./AcCellValue.vue";
+/** A column of the item table. */
+export interface FormArrayColumn<I = Record<string, unknown>> {
+    /** Item property shown in this column. Also names the `cell-<key>` and `field-<key>` slots. */
+    key: string;
+    /** Header text. */
+    label: string;
+    /** Shows the value with AcCellValue as this type, e.g. `date` or `labels`. Defaults to `auto`. */
+    type?: CellType;
+    /** Turns the value into text, e.g. to add a unit. */
+    format?: (value: unknown, item: I) => string;
+    /** CSS width of the column. */
+    width?: string;
+}
+export interface Props<I> {
+    /** Name of the field, e.g. “Quotas” or “Environment Variables”. */
+    label: string;
+    /** Columns of the item table: `{ key, label, type?, format?, width? }`. */
+    columns: FormArrayColumn<I>[];
+    /** Singular name of one item, used in buttons and screen-reader text: “Add quota”, “Edit quota cpu-limit”. */
+    itemName?: string;
+    /** Creates the starting value of a new item. */
+    newItem?: () => I;
+    /** `form` opens a panel under the row for the `form` slot; `inline` edits in the row itself through `field-<key>` slots. */
+    mode?: "form" | "inline";
+    /** Checks an item before it's saved. Return errors by field key, or one message. `index` is -1 for a new item. */
+    validate?: (item: I, index: number) => Record<string, string> | string | null | undefined | void;
+    /** Runs after validation and before the list changes, e.g. to save to the API. Return `false` (or throw) to keep the form open. */
+    beforeSave?: (item: I, index: number) => boolean | void | Promise<boolean | void>;
+    /** Runs before an item is removed, e.g. to ask for confirmation. Return `false` to keep it. */
+    beforeRemove?: (item: I, index: number) => boolean | void | Promise<boolean | void>;
+    /** Marks the field required and adds a red asterisk. Show `errorMsg` when it's empty. */
+    required?: boolean;
+    /** Disables adding, editing and removing. */
+    disabled?: boolean;
+    /** Hides every action and shows the items only. */
+    readonly?: boolean;
+    /** Shows the Edit button on each row. */
+    editable?: boolean;
+    /** Disables the Add button only, e.g. until a namespace is chosen. */
+    addDisabled?: boolean;
+    /** Most items allowed. The Add button disables at the limit. */
+    max?: number;
+    /** Shows a spinner on Save and blocks the actions, e.g. while you save outside `beforeSave`. */
+    loading?: boolean;
+    /** Lets people collapse the field to its header. */
+    collapsible?: boolean;
+    /** Starts collapsed. Needs `collapsible`. */
+    defaultCollapsed?: boolean;
+    /** Error for the whole field, e.g. “Add at least one quota”. A list shows one per line. */
+    errorMsg?: string | string[];
+    /** Helper text under the label (hidden while `errorMsg` is set). */
+    hint?: string;
+    /** Text of the Add button. Defaults to “Add <itemName>”. */
+    addLabel?: string;
+    /** Heading of the form. Defaults to “New <itemName>” or “Edit <itemName>”. */
+    formTitle?: string;
+    /** Text shown when there are no items (or use the `empty` slot). */
+    emptyText?: string;
+}
+declare const __VLS_export: <T extends Record<string, unknown>>(__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<T> & {
+        /** The items. Bind with `v-model`; it's replaced with a new array on every change. */
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onAdd?: ((item: T) => any) | undefined;
+        onRemove?: ((item: T, index: number) => any) | undefined;
+        onUpdate?: ((item: T, index: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Opens the form for a new item. */
+        add: () => void;
+        /** Opens the form for the item at `index`. */
+        edit: (index: number) => void;
+        /** Closes the form without saving. */
+        cancel: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        [name: `field-${string}`]: (props: {
+            item: T;
+            index: number;
+            error: string;
+            errors: Record<string, string>;
+        }) => unknown;
+        [name: `cell-${string}`]: (props: {
+            item: T;
+            index: number;
+            value: unknown;
+        }) => unknown;
+        /** The editor in `form` mode. Bind fields to `item` (a copy, saved on Save) and show `errors[key]` under them. `index` is -1 for a new item. */
+        form?: (props: {
+            item: T;
+            index: number;
+            errors: Record<string, string>;
+            isNew: boolean;
+        }) => unknown;
+        /** More about an item, shown under its row behind a toggle button. */
+        details?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        /** Extra buttons before Edit and Remove on each row. */
+        "row-actions"?: (props: {
+            item: T;
+            index: number;
+        }) => unknown;
+        /** Replaces the empty text, e.g. to explain what to add. */
+        empty?: () => unknown;
+    };
+    emit: (((evt: "add", item: T) => void) & ((evt: "remove", item: T, index: number) => void) & ((evt: "update", item: T, index: number) => void)) & ((event: "update:modelValue", value: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};