@ac-design/design-system 2.3.0 → 2.4.0

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

@@ -1,17 +1,12 @@
 import e from "./AcSpinner.js";
-import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, useSlots as y, vModelDynamic as b, withDirectives as x } from "vue";
-import { Eye as S, EyeOff as C } from "@lucide/vue";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, useSlots as ee, vModelDynamic as te, withDirectives as ne } from "vue";
+import { Eye as y, EyeOff as b } from "@lucide/vue";
 //#region src/lib/components/AcInput.vue?vue&type=script&setup=true&lang.ts
-var w = ["for"], T = { key: 0 }, E = {
-	key: 1,
-	class: "text-muted"
-}, D = {
-	key: 2,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, O = ["id"], ee = { class: "flex" }, k = [
+var x = ["for"], S = { key: 0 }, C = ["id"], w = { class: "flex" }, re = [
 	"id",
 	"name",
+	"placeholder",
+	"autocomplete",
 	"type",
 	"disabled",
 	"readonly",
@@ -19,21 +14,23 @@ var w = ["for"], T = { key: 0 }, E = {
 	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
-], A = [
+], ie = [
 	"disabled",
 	"aria-label",
 	"aria-pressed",
 	"aria-busy"
-], j = [
+], T = [
 	"disabled",
 	"aria-label",
 	"title"
-], M = { key: 1 }, N = ["id"], P = /*@__PURE__*/ o({
+], ae = { key: 1 }, E = ["id"], D = "focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]", O = "focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]", k = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcInput",
 	props: /*@__PURE__*/ s({
 		label: { default: "" },
 		name: { default: "" },
+		placeholder: { default: void 0 },
+		autocomplete: { default: void 0 },
 		type: { default: "text" },
 		required: {
 			type: Boolean,
@@ -43,6 +40,11 @@ var w = ["for"], T = { key: 0 }, E = {
 			type: Boolean,
 			default: !1
 		},
+		requiredMessage: { default: "" },
+		silentWhenEmpty: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -51,6 +53,27 @@ var w = ["for"], T = { key: 0 }, E = {
 			type: Boolean,
 			default: !1
 		},
+		readonlyText: { default: "(read only)" },
+		plainReadonly: {
+			type: Boolean,
+			default: !1
+		},
+		plainDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		plainError: {
+			type: Boolean,
+			default: !1
+		},
+		flushLabelSlots: {
+			type: Boolean,
+			default: !1
+		},
+		prefixOverlay: {
+			type: Boolean,
+			default: !1
+		},
 		errorMsg: { default: "" },
 		invalid: {
 			type: Boolean,
@@ -58,6 +81,11 @@ var w = ["for"], T = { key: 0 }, E = {
 		},
 		hint: { default: "" },
 		size: { default: "normal" },
+		variant: { default: "outline" },
+		highlight: {
+			type: Boolean,
+			default: !1
+		},
 		inputClass: {
 			type: [
 				Boolean,
@@ -68,10 +96,18 @@ var w = ["for"], T = { key: 0 }, E = {
 			],
 			default: void 0
 		},
+		numberAsString: {
+			type: Boolean,
+			default: !1
+		},
 		revealing: {
 			type: Boolean,
 			default: !1
 		},
+		reveal: {
+			type: Function,
+			default: void 0
+		},
 		addonLabel: { default: "" },
 		addonIcon: { default: void 0 },
 		addonIconOnly: {
@@ -87,134 +123,262 @@ var w = ["for"], T = { key: 0 }, E = {
 		},
 		showValueModifiers: {}
 	}),
-	emits: /*@__PURE__*/ s(["addon"], ["update:modelValue", "update:showValue"]),
-	setup(o, { expose: s, emit: P }) {
-		let F = o, I = v(o, "modelValue"), L = v(o, "showValue"), R = P, z = _(), B = g(), V = y(), H = t(() => ({
-			class: B.class,
-			style: B.style
-		})), U = t(() => {
-			let { class: e, style: t, ...n } = B;
+	emits: /*@__PURE__*/ s([
+		"addon",
+		"focus",
+		"blur",
+		"focusout",
+		"input",
+		"change",
+		"keyup",
+		"keydown"
+	], ["update:modelValue", "update:showValue"]),
+	setup(o, { expose: s, emit: k }) {
+		let A = o, j = v(o, "modelValue"), M = v(o, "showValue"), N = k, P = _(), F = g(), I = ee(), L = t(() => ({
+			class: F.class,
+			style: F.style
+		})), R = t(() => {
+			let { class: e, style: t, ...n } = F;
 			return n;
-		}), W = d(null), G = t(() => !!F.label || !!V["label-icon"] || !!V["label-extra"]), K = t(() => G.value ? void 0 : B["aria-label"] ?? B.placeholder), q = t(() => !!F.errorMsg || F.invalid), J = t(() => F.type === "password" && L.value ? "text" : F.type), Y = t(() => [
-			B["aria-describedby"],
-			F.hint && `${z}-hint`,
-			F.errorMsg && `${z}-msg`
-		].filter(Boolean).join(" ") || void 0), X = t(() => !!F.addonLabel || !!F.addonIcon), Z = t(() => !!V.suffix || F.type === "password"), Q = {
+		}), z = d(null), B = d(""), V = d(!1), H = d(!1), U = t(() => !!A.label || !!I["label-icon"] || !!I["label-extra"]), W = t(() => U.value ? void 0 : F["aria-label"] ?? A.placeholder), G = t(() => B.value || A.errorMsg), K = t(() => !!G.value || A.invalid), q = t(() => A.revealing || V.value), J = t(() => A.type === "password" && M.value ? "text" : A.type), oe = t(() => [
+			F["aria-describedby"],
+			A.hint && `${P}-hint`,
+			G.value && `${P}-msg`
+		].filter(Boolean).join(" ") || void 0), Y = t(() => !!A.addonLabel || !!A.addonIcon), se = t(() => !!I.suffix || A.type === "password"), X = {
+			xs: "h-6.5",
 			xsmall: "h-8.5",
 			small: "h-9",
-			normal: "h-10.5"
-		}, te = {
+			medium: "h-9.5",
+			normal: "h-10.5",
+			large: "h-12.5"
+		}, ce = {
+			xs: "h-6",
+			xsmall: "h-8",
+			small: "h-8.5",
+			medium: "h-9",
+			normal: "h-10",
+			large: "h-12"
+		}, le = {
+			xs: "w-6.5",
 			xsmall: "w-8.5",
 			small: "w-9",
-			normal: "w-10.5"
-		}, ne = {
+			medium: "w-9.5",
+			normal: "w-10.5",
+			large: "w-12.5"
+		}, ue = {
+			xs: "pl-2",
 			xsmall: "pl-3",
 			small: "pl-4",
-			normal: "pl-5"
-		}, re = {
+			medium: "pl-4",
+			normal: "pl-5",
+			large: "pl-6"
+		}, de = {
+			xs: "pr-2",
 			xsmall: "pr-3",
 			small: "pr-4",
-			normal: "pr-5"
-		}, $ = t(() => F.size in Q ? F.size : "normal");
-		function ie(e) {
-			F.disabled || R("addon", e);
+			medium: "pr-4",
+			normal: "pr-5",
+			large: "pr-6"
+		}, fe = {
+			xs: "pl-2",
+			xsmall: "pl-3",
+			small: "pl-3",
+			medium: "pl-3",
+			normal: "pl-4",
+			large: "pl-5"
+		}, pe = {
+			xs: "pr-2",
+			xsmall: "pr-3",
+			small: "pr-3",
+			medium: "pr-3",
+			normal: "pr-4",
+			large: "pr-5"
+		}, me = {
+			xs: "mr-2",
+			xsmall: "mr-3",
+			small: "mr-3",
+			medium: "mr-3",
+			normal: "mr-4",
+			large: "mr-5"
+		}, he = {
+			xs: "size-3",
+			xsmall: "size-4",
+			small: "size-4",
+			medium: "size-4",
+			normal: "size-5",
+			large: "size-6"
+		}, ge = {
+			xs: "text-xs",
+			xsmall: "text-base",
+			small: "text-base",
+			medium: "text-base",
+			normal: "text-base",
+			large: "text-lg"
+		}, _e = {
+			xs: "left-[7px] size-3",
+			xsmall: "left-[9px] size-3",
+			small: "left-[11px] size-4",
+			medium: "left-[11px] size-4",
+			normal: "left-[15px] size-5",
+			large: "left-[19px] size-6"
+		}, Z = t(() => A.size in X ? A.size : "normal"), ve = t(() => {
+			let e = A.variant, t = !A.disabled || A.plainDisabled;
+			return e === "soft" ? K.value ? `border-transparent bg-danger/5 focus-within:bg-danger/10 ${D}` : [
+				"border-transparent bg-accent focus-within:bg-accent-hover",
+				O,
+				t && "hover:bg-accent-hover"
+			] : e === "ghost" ? K.value ? `border-transparent bg-transparent focus-within:bg-danger/5 ${D}` : `border-transparent bg-transparent focus-within:bg-accent-hover ${O}` : e === "none" ? "border-0 bg-transparent" : [K.value && A.plainError ? "bg-transparent" : A.readonly && !A.plainReadonly ? "bg-surface-muted" : "bg-background", K.value ? `border-danger/50 focus-within:border-danger ${D}` : ["border-border focus-within:focus-ring", t && "hover:border-accent-active"]];
+		}), Q = t({
+			get: () => j.value,
+			set: (e) => {
+				j.value = A.numberAsString ? e == null ? "" : String(e) : e;
+			}
+		});
+		function ye(e) {
+			A.disabled || N("addon", e);
+		}
+		function $(e) {
+			A.requiredMessage && (B.value = e.target.value === "" ? A.requiredMessage : "");
+		}
+		function be(e) {
+			$(e), A.silentWhenEmpty && B.value || N("input", e);
 		}
-		return s({ focus: () => W.value?.focus() }), (t, s) => (u(), i("div", c(H.value, {
-			class: ["w-full", o.disabled && "opacity-50"],
+		function xe(e) {
+			$(e), A.silentWhenEmpty && B.value || N("focusout", e);
+		}
+		async function Se() {
+			if (A.reveal && !M.value && !H.value && !j.value) {
+				if (V.value) return;
+				V.value = !0;
+				try {
+					j.value = await A.reveal(), H.value = !0, M.value = !0;
+				} catch {} finally {
+					V.value = !1;
+				}
+				return;
+			}
+			M.value = !M.value;
+		}
+		return s({ focus: () => z.value?.focus() }), (t, s) => (u(), i("div", c(L.value, {
+			class: ["w-full", o.disabled && !o.plainDisabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-input"
 		}), [
-			G.value ? (u(), i("label", {
+			U.value ? (u(), i("label", {
 				key: 0,
-				for: h(z),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				for: h(P),
+				class: l(["mb-2 flex items-center text-base font-medium text-heading", !o.flushLabelSlots && "gap-1"])
 			}, [
 				f(t.$slots, "label-icon"),
-				o.label ? (u(), i("span", T, m(o.label), 1)) : r("", !0),
-				o.readonly ? (u(), i("span", E, "(read only)")) : r("", !0),
+				o.label ? (u(), i("span", S, m(o.label), 1)) : r("", !0),
+				o.readonly ? (u(), i("span", {
+					key: 1,
+					class: l(["text-muted", o.flushLabelSlots && "ml-1"])
+				}, m(o.readonlyText), 3)) : r("", !0),
 				f(t.$slots, "label-extra"),
-				o.required || o.requiredMark ? (u(), i("span", D, "*")) : r("", !0)
-			], 8, w)) : r("", !0),
+				o.required || o.requiredMark ? (u(), i("span", {
+					key: 2,
+					class: l(["text-danger", o.flushLabelSlots && "ml-1"]),
+					"aria-hidden": "true"
+				}, "*", 2)) : r("", !0)
+			], 10, x)) : r("", !0),
 			o.hint ? (u(), i("p", {
 				key: 1,
-				id: `${h(z)}-hint`,
+				id: `${h(P)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, m(o.hint), 9, O)) : r("", !0),
-			a("div", ee, [a("div", { class: l(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
-				Q[$.value],
-				X.value ? "rounded-l-10" : "rounded-10",
-				o.readonly ? "bg-surface-muted" : "bg-background",
-				q.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !o.disabled && "hover:border-accent-active"]
+			}, m(o.hint), 9, C)) : r("", !0),
+			a("div", w, [a("div", { class: l(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
+				o.variant === "none" ? ce[Z.value] : X[Z.value],
+				Y.value ? "rounded-l-10" : "rounded-10",
+				ve.value,
+				o.highlight && "ring-2 ring-primary/20 ring-offset-2 ring-offset-surface"
 			]]) }, [
-				t.$slots.prefix ? (u(), i("span", {
+				t.$slots.prefix && o.prefixOverlay ? (u(), i("span", {
 					key: 0,
-					class: l(["flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", o.size === "normal" ? "pl-4" : "pl-3"])
+					class: l(["absolute top-1/2 block -translate-y-1/2 whitespace-nowrap text-muted select-none", _e[Z.value]])
+				}, [f(t.$slots, "prefix")], 2)) : t.$slots.prefix ? (u(), i("span", {
+					key: 1,
+					class: l(["flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", fe[Z.value]])
 				}, [f(t.$slots, "prefix")], 2)) : r("", !0),
-				x(a("input", c({
-					id: h(z),
+				ne(a("input", c({
+					id: h(P),
 					ref_key: "input",
-					ref: W
-				}, U.value, {
-					"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
+					ref: z
+				}, R.value, {
+					"onUpdate:modelValue": s[0] ||= (e) => Q.value = e,
 					name: o.name,
+					placeholder: o.placeholder,
+					autocomplete: o.autocomplete,
 					type: J.value,
 					disabled: o.disabled,
 					readonly: o.readonly,
 					required: o.required,
-					"aria-label": K.value,
-					"aria-invalid": q.value || void 0,
-					"aria-describedby": Y.value,
-					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
-						t.$slots.prefix ? "pl-2" : ne[$.value],
-						Z.value ? "pr-2" : re[$.value],
+					"aria-label": W.value,
+					"aria-invalid": K.value || void 0,
+					"aria-describedby": oe.value,
+					class: ["block w-full min-w-0 flex-1 rounded-10 bg-transparent font-normal outline-none placeholder:text-muted/80", [
+						!o.plainDisabled && "disabled:cursor-not-allowed",
+						o.type === "file" ? "h-auto" : "h-full",
+						ge[Z.value],
+						o.variant === "none" && K.value ? "text-danger-strong" : "text-heading",
+						t.$slots.prefix ? o.prefixOverlay ? "pl-10" : "pl-2" : ue[Z.value],
+						se.value ? "pr-2" : de[Z.value],
 						o.inputClass
-					]]
-				}), null, 16, k), [[b, I.value]]),
+					]],
+					onInput: be,
+					onFocusout: xe,
+					onFocus: s[1] ||= (e) => N("focus", e),
+					onBlur: s[2] ||= (e) => N("blur", e),
+					onChange: s[3] ||= (e) => N("change", e),
+					onKeyup: s[4] ||= (e) => N("keyup", e),
+					onKeydown: s[5] ||= (e) => N("keydown", e)
+				}), null, 16, re), [[te, Q.value]]),
 				t.$slots.suffix ? (u(), i("span", {
-					key: 1,
-					class: l(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", o.type === "password" ? "pr-2" : o.size === "normal" ? "pr-4" : "pr-3"])
+					key: 2,
+					class: l(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", o.type === "password" ? "pr-2" : pe[Z.value]])
 				}, [f(t.$slots, "suffix")], 2)) : r("", !0),
 				o.type === "password" ? (u(), i("button", {
-					key: 2,
+					key: 3,
 					type: "button",
-					class: l(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-wait", o.size === "normal" ? "mr-4" : "mr-3"]),
-					disabled: o.revealing,
-					"aria-label": L.value ? "Hide value" : "Show value",
-					"aria-pressed": L.value,
-					"aria-busy": o.revealing || void 0,
-					onClick: s[1] ||= (e) => L.value = !L.value
-				}, [o.revealing ? (u(), n(e, {
+					class: l(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-wait", me[Z.value]]),
+					disabled: q.value,
+					"aria-label": M.value ? "Hide value" : "Show value",
+					"aria-pressed": M.value,
+					"aria-busy": q.value || void 0,
+					onClick: Se
+				}, [q.value ? (u(), n(e, {
 					key: 0,
-					size: o.size === "normal" ? "normal" : "small",
+					size: Z.value === "normal" || Z.value === "large" ? "normal" : "small",
 					label: ""
-				}, null, 8, ["size"])) : (u(), n(p(L.value ? h(C) : h(S)), {
+				}, null, 8, ["size"])) : (u(), n(p(M.value ? h(b) : h(y)), {
 					key: 1,
-					class: l(o.size === "normal" ? "size-5" : "size-4"),
+					class: l(he[Z.value]),
 					"aria-hidden": "true"
-				}, null, 8, ["class"]))], 10, A)) : r("", !0)
-			], 2), X.value ? (u(), i("button", {
+				}, null, 8, ["class"]))], 10, ie)) : r("", !0)
+			], 2), Y.value ? (u(), i("button", {
 				key: 0,
 				type: "button",
-				class: l(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [Q[$.value], o.addonIconOnly ? te[$.value] : "px-4"]]),
+				class: l(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [X[Z.value], o.addonIconOnly ? le[Z.value] : "px-4"]]),
 				disabled: o.disabled,
 				"aria-label": o.addonIconOnly ? o.addonLabel : void 0,
 				title: o.addonIconOnly ? o.addonLabel : void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-input-addon",
-				onClick: ie
+				onClick: ye
 			}, [o.addonIcon ? (u(), n(p(o.addonIcon), {
 				key: 0,
 				class: "size-4 text-muted",
 				"aria-hidden": "true"
-			})) : r("", !0), o.addonIconOnly ? r("", !0) : (u(), i("span", M, m(o.addonLabel), 1))], 10, j)) : r("", !0)]),
-			o.errorMsg ? (u(), i("p", {
+			})) : r("", !0), o.addonIconOnly ? r("", !0) : (u(), i("span", ae, m(o.addonLabel), 1))], 10, T)) : r("", !0)]),
+			G.value ? (u(), i("p", {
 				key: 2,
-				id: `${h(z)}-msg`,
-				class: "mt-1 text-base text-danger-strong",
+				id: `${h(P)}-msg`,
+				class: l(["mt-1 text-base", o.plainError ? "text-danger" : "text-danger-strong"]),
 				role: "alert"
-			}, m(o.errorMsg), 9, N)) : r("", !0)
+			}, m(G.value), 11, E)) : r("", !0),
+			f(t.$slots, "message")
 		], 16));
 	}
 });
 //#endregion
-export { P as default };
+export { k as default };

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

@@ -54,61 +54,41 @@ export interface Props {
     disabled?: boolean;
     /** Shows the rows as read-only fields, without the Add and Remove buttons. */
     readonly?: boolean;
+    /** Drops the column headers and the phone-width cards: rows stay side by side at every width, and each field's name is for screen readers only, as cloud-ui's key/value field. */
+    plain?: boolean;
 }
-type __VLS_Props = Props;
-type __VLS_Slots = {
-    /** Content under the rows and above the Add button, e.g. a warning about `NoExecute` taints. */
-    footer?: () => unknown;
-};
-declare function add(): void;
-type __VLS_ModelProps = {
-    /** The rows, empty ones included, in order. Replaced with a new array on every change; drop rows with an empty key before saving. */
-    modelValue?: KeyValueItem[];
+declare const __VLS_export: <M extends KeyValueItem[] | Record<string, string> = KeyValueItem[]>(__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 & {
+        /** The rows, empty ones included, in order. Replaced with a new array on every change; drop rows with an empty key before saving. Bind a `Record<string, string>` instead to get a map of the rows that have a key; a repeated key keeps the last value. */
+        modelValue?: M;
+    }) & {
+        "onUpdate:modelValue"?: ((value: M) => any) | undefined;
+        onAdd?: ((index: number) => any) | undefined;
+        onRemove?: ((item: KeyValueItem, index: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Adds an empty row and focuses its key. */
+        add: () => void;
+        /** Moves focus to the first key, or to the Add button when there are no rows. */
+        focus: () => void;
+        /** Whether any row shows an error (duplicate key, missing key, or a validator's message). Check it before saving. */
+        hasErrors: () => boolean;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Content under the rows and above the Add button, e.g. a warning about `NoExecute` taints. */
+        footer?: () => unknown;
+    };
+    emit: (((evt: "add", index: number) => void) & ((evt: "remove", item: KeyValueItem, index: number) => void)) & ((event: "update:modelValue", value: M) => 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, {
-    /** Adds an empty row and focuses its key. */
-    add: typeof add;
-    /** Moves focus to the first key, or to the Add button when there are no rows. */
-    focus: () => void;
-    /** Whether any row shows an error (duplicate key, missing key, or a validator's message). Check it before saving. */
-    hasErrors: () => boolean;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: KeyValueItem[]) => any;
-    add: (index: number) => any;
-    remove: (item: KeyValueItem, index: number) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: KeyValueItem[]) => any) | undefined;
-    onAdd?: ((index: number) => any) | undefined;
-    onRemove?: ((item: KeyValueItem, index: number) => any) | undefined;
-}>, {
-    required: boolean;
-    label: string;
-    disabled: boolean;
-    max: number;
-    size: "small" | "normal";
-    hint: string;
-    readonly: boolean;
-    options: SelectOption<string>[];
-    errorMsg: string;
-    mono: boolean;
-    itemName: string;
-    addLabel: string;
-    keyLabel: string;
-    valueLabel: string;
-    keyPlaceholder: string;
-    valuePlaceholder: string;
-    optionLabel: string;
-    defaultOption: string;
-    validateKey: (key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
-    validateValue: (value: string, key: string, index: number, items: KeyValueItem[]) => string | void | null | undefined;
-    allowDuplicateKeys: 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];
+}) & {};