@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -1,6 +1,6 @@
 export interface Props {
-    /** Label above the field. Also the accessible name of the input and of the list of values. */
-    label: string;
+    /** Label above the field. Also the accessible name of the input and of the list of values. Without one, pass `aria-label`. */
+    label?: string;
     /** Native `name` attribute of the text input. */
     name?: string;
     /** Example value shown in the empty input, e.g. "e.g. 10.0.0.0/16". Defaults to "Add item and press Enter". */
@@ -31,14 +31,24 @@ export interface Props {
     disabled?: boolean;
     /** Shows the input on a muted fill and the chips without remove buttons. Was `is-read-only` in cloud-ui. */
     readonly?: boolean;
+    /** Puts new values first instead of last, as cloud-ui's list field did. */
+    prepend?: boolean;
+    /** Error shown when a `required` field is left with no values: on leaving the input, or after removing the last value. Cleared by typing or adding. E.g. "This field is required. Please input at least one". */
+    requiredMessage?: string;
 }
 type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content before the label text, such as a 14px icon. Was `icon` in cloud-ui. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as an info tooltip. Was `labelInfo` in cloud-ui. */
+    "label-extra"?: () => unknown;
+};
 type __VLS_ModelProps = {
     /** The values, in the order they were added. Replaced with a new array on every change. */
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Moves focus to the text input. */
     focus: () => void | undefined;
     /** Adds the typed text now, e.g. before submitting. Returns `false` when text was rejected and is still in the input. */
@@ -55,20 +65,29 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onRemove?: ((value: string, index: number) => any) | undefined;
 }>, {
     required: boolean;
+    label: string;
     disabled: boolean;
     name: string;
     transform: (value: string) => string;
     size: "small" | "normal";
+    hint: string;
     maxItems: number;
     readonly: boolean;
-    hint: string;
     validate: (value: string, values: string[]) => string | void | null | undefined;
     placeholder: string;
     errorMsg: string;
     mono: boolean;
+    requiredMessage: string;
     allowDuplicates: boolean;
     showClear: boolean;
     addOnBlur: boolean;
+    prepend: 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/AcTagInput.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelText as y, watch as ee, withDirectives as te, withModifiers as ne } from "vue";
-import { Plus as re, X as b } from "@lucide/vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, vModelText as b, watch as x, withDirectives as ee, withModifiers as te } from "vue";
+import { Plus as ne, X as S } from "@lucide/vue";
 //#region src/lib/components/AcTagInput.vue?vue&type=script&setup=true&lang.ts
-var ie = ["for"], x = {
+var re = ["for"], ie = {
 	key: 0,
 	class: "font-normal text-muted"
-}, ae = {
+}, C = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, S = [
+}, ae = [
 	"id",
 	"name",
 	"placeholder",
@@ -17,26 +17,26 @@ var ie = ["for"], x = {
 	"aria-invalid",
 	"aria-required",
 	"aria-describedby"
-], C = [
+], oe = [
 	"disabled",
 	"aria-label",
 	"title"
-], oe = ["aria-label"], se = ["title"], ce = [
+], se = ["aria-label"], ce = ["title"], le = [
 	"aria-label",
 	"title",
 	"onClick",
 	"onKeydown"
-], le = {
+], ue = {
 	key: 3,
 	class: "mt-2 flex items-center justify-between gap-3 text-xs text-muted tabular-nums"
-}, w = { key: 0 }, T = {
+}, de = { key: 0 }, fe = {
 	class: "sr-only",
 	"aria-live": "polite"
-}, E = /*@__PURE__*/ o({
+}, w = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcTagInput",
 	props: /*@__PURE__*/ s({
-		label: {},
+		label: { default: "" },
 		name: { default: "" },
 		placeholder: { default: "" },
 		hint: { default: "" },
@@ -78,7 +78,12 @@ var ie = ["for"], x = {
 		readonly: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		prepend: {
+			type: Boolean,
+			default: !1
+		},
+		requiredMessage: { default: "" }
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
@@ -88,202 +93,209 @@ var ie = ["for"], x = {
 		"remove",
 		"clear"
 	], ["update:modelValue"]),
-	setup(o, { expose: s, emit: E }) {
-		let D = o, O = v(o, "modelValue"), k = E, A = /[\s,;]+/, ue = /[,\n]+/, j = _(), M = `${j}-hint`, N = `${j}-msg`, P = `${j}-count`, F = `${j}-help`, I = g(), L = t(() => ({
-			class: I.class,
-			style: I.style
-		})), R = t(() => {
-			let { class: e, style: t, ...n } = I;
+	setup(o, { expose: s, emit: w }) {
+		let T = o, E = y(o, "modelValue"), D = w, O = /[\s,;]+/, pe = /[,\n]+/, k = v(), A = `${k}-hint`, j = `${k}-msg`, M = `${k}-count`, N = `${k}-help`, P = _(), F = t(() => ({
+			class: P.class,
+			style: P.style
+		})), I = t(() => {
+			let { class: e, style: t, ...n } = P;
 			return n;
-		}), z = f(null), B = f(null), V = f(""), H = f(""), U = f(!1), W = f(""), G = t(() => O.value ?? []), K = t(() => !D.disabled && !D.readonly), q = t(() => D.maxItems !== void 0 && G.value.length >= D.maxItems), de = t(() => D.maxItems !== void 0 && G.value.length >= D.maxItems * .8), J = t(() => H.value || D.errorMsg), fe = t(() => [
-			D.hint && M,
-			J.value && N,
-			D.maxItems !== void 0 && P,
-			K.value && F
-		].filter(Boolean).join(" ") || void 0), pe = t(() => K.value ? q.value ? `Maximum ${D.maxItems} items reached` : D.placeholder || "Add item and press Enter" : ""), me = t(() => K.value && !q.value && !!V.value.trim());
-		function Y(e) {
-			W.value = "", l(() => W.value = e);
+		}), L = f(null), R = f(null), z = f(""), B = f(""), V = f(""), H = f(!1), U = f(""), W = t(() => E.value ?? []), G = t(() => !T.disabled && !T.readonly), K = t(() => T.maxItems !== void 0 && W.value.length >= T.maxItems), me = t(() => T.maxItems !== void 0 && W.value.length >= T.maxItems * .8), q = t(() => B.value || V.value || T.errorMsg), he = t(() => [
+			T.hint && A,
+			q.value && j,
+			T.maxItems !== void 0 && M,
+			G.value && N
+		].filter(Boolean).join(" ") || void 0), ge = t(() => G.value ? K.value ? `Maximum ${T.maxItems} items reached` : T.placeholder || "Add item and press Enter" : ""), _e = t(() => G.value && !K.value && !!z.value.trim());
+		function J(e) {
+			U.value = "", l(() => U.value = e);
 		}
-		function he(e, t) {
-			return D.maxItems !== void 0 && t.length >= D.maxItems ? `You can add up to ${D.maxItems} ${D.maxItems === 1 ? "value" : "values"}. Remove one first.` : !D.allowDuplicates && t.includes(e) ? `“${e}” is already added.` : D.validate?.(e, t) || "";
+		function ve(e, t) {
+			return T.maxItems !== void 0 && t.length >= T.maxItems ? `You can add up to ${T.maxItems} ${T.maxItems === 1 ? "value" : "values"}. Remove one first.` : !T.allowDuplicates && t.includes(e) ? `“${e}” is already added.` : T.validate?.(e, t) || "";
 		}
-		function X(e, t) {
-			let n = [...G.value], r = [], i = [], a = "";
+		function Y(e, t) {
+			let n = [...W.value], r = [], i = [], a = "";
 			for (let o of e.split(t)) {
-				let e = D.transform(o);
+				let e = T.transform(o);
 				if (!e) continue;
-				let t = he(e, n);
+				let t = ve(e, n);
 				if (t) {
 					i.push(o.trim()), a ||= t;
 					continue;
 				}
 				n.push(e), r.push(e);
 			}
-			return r.length && (O.value = n, r.forEach((e) => k("add", e)), Y(r.length === 1 ? `Added ${r[0]}.` : `Added ${r.length} values.`)), V.value = i.join(", "), l(() => H.value = a), i.length > 0;
+			return r.length && (E.value = T.prepend ? [...[...r].reverse(), ...W.value] : n, V.value = "", r.forEach((e) => D("add", e)), J(r.length === 1 ? `Added ${r[0]}.` : `Added ${r.length} values.`)), z.value = i.join(", "), l(() => B.value = a), i.length > 0;
 		}
-		function Z() {
-			return !K.value || !V.value.trim() ? !1 : X(V.value, ue);
+		function X() {
+			return !G.value || !z.value.trim() ? !1 : Y(z.value, pe);
 		}
-		function Q(e, t = !0) {
-			if (!K.value) return;
-			let n = G.value[e];
+		function Z(e, t = !0) {
+			if (!G.value) return;
+			let n = W.value[e];
 			if (n === void 0) return;
-			let r = G.value.filter((t, n) => n !== e);
-			O.value = r, U.value = !1, H.value = "", k("remove", n, e), Y(`Removed ${n}.`), t && l(() => {
+			let r = W.value.filter((t, n) => n !== e);
+			E.value = r, H.value = !1, B.value = "", D("remove", n, e), J(`Removed ${n}.`), Q(r), t && l(() => {
 				let t = $();
-				(t[Math.min(e, t.length - 1)] ?? z.value)?.focus();
+				(t[Math.min(e, t.length - 1)] ?? L.value)?.focus();
 			});
 		}
-		function ge() {
-			K.value && G.value.length && (O.value = [], U.value = !1, k("clear"), Y("Removed every value."), z.value?.focus());
+		function ye() {
+			G.value && W.value.length && (E.value = [], H.value = !1, D("clear"), Q([]), J("Removed every value."), L.value?.focus());
+		}
+		function Q(e = W.value) {
+			V.value = T.required && T.requiredMessage && !e.length ? T.requiredMessage : "";
 		}
 		function $() {
-			return Array.from(B.value?.querySelectorAll("[data-remove]") ?? []);
+			return Array.from(R.value?.querySelectorAll("[data-remove]") ?? []);
 		}
-		function _e(e) {
-			if (!K.value || e.isComposing) return;
+		function be(e) {
+			if (!G.value || e.isComposing) return;
 			let t = e.target, n = t.selectionStart === 0 && t.selectionEnd === 0;
-			e.key === "Enter" || e.key === "," ? (e.preventDefault(), Z()) : e.key === "Tab" && !e.shiftKey && V.value.trim() ? Z() : e.key === "Backspace" && !V.value && G.value.length ? (e.preventDefault(), U.value ? Q(G.value.length - 1, !1) : (U.value = !0, Y(`${G.value[G.value.length - 1]} selected. Press Backspace again to remove it.`))) : e.key === "ArrowLeft" && n && G.value.length ? (e.preventDefault(), U.value = !1, $().at(-1)?.focus()) : e.key === "Escape" && (V.value || H.value) ? (e.preventDefault(), V.value = "", H.value = "") : U.value = !1;
+			e.key === "Enter" || e.key === "," ? (e.preventDefault(), X()) : e.key === "Tab" && !e.shiftKey && z.value.trim() ? X() : e.key === "Backspace" && !z.value && W.value.length ? (e.preventDefault(), H.value ? Z(W.value.length - 1, !1) : (H.value = !0, J(`${W.value[W.value.length - 1]} selected. Press Backspace again to remove it.`))) : e.key === "ArrowLeft" && n && W.value.length ? (e.preventDefault(), H.value = !1, $().at(-1)?.focus()) : e.key === "Escape" && (z.value || B.value) ? (e.preventDefault(), z.value = "", B.value = "") : H.value = !1;
 		}
-		function ve(e, t) {
+		function xe(e, t) {
 			let n = $();
-			e.key === "Backspace" || e.key === "Delete" ? (e.preventDefault(), Q(t)) : e.key === "ArrowLeft" ? (e.preventDefault(), n[Math.max(t - 1, 0)]?.focus()) : e.key === "ArrowRight" ? (e.preventDefault(), (n[t + 1] ?? z.value)?.focus()) : e.key === "Home" ? (e.preventDefault(), n[0]?.focus()) : e.key === "End" && (e.preventDefault(), z.value?.focus());
+			e.key === "Backspace" || e.key === "Delete" ? (e.preventDefault(), Z(t)) : e.key === "ArrowLeft" ? (e.preventDefault(), n[Math.max(t - 1, 0)]?.focus()) : e.key === "ArrowRight" ? (e.preventDefault(), (n[t + 1] ?? L.value)?.focus()) : e.key === "Home" ? (e.preventDefault(), n[0]?.focus()) : e.key === "End" && (e.preventDefault(), L.value?.focus());
 		}
-		function ye(e) {
-			if (!K.value) return;
+		function Se(e) {
+			if (!G.value) return;
 			let t = e.clipboardData?.getData("text") ?? "";
-			if (!A.test(t.trim())) return;
+			if (!O.test(t.trim())) return;
 			e.preventDefault();
-			let n = z.value, r = n?.selectionStart ?? V.value.length, i = n?.selectionEnd ?? V.value.length;
-			X(V.value.slice(0, r) + t + V.value.slice(i), A);
+			let n = L.value, r = n?.selectionStart ?? z.value.length, i = n?.selectionEnd ?? z.value.length;
+			Y(z.value.slice(0, r) + t + z.value.slice(i), O);
 		}
-		function be() {
-			U.value = !1, D.addOnBlur && Z();
+		function Ce() {
+			H.value = !1;
+			let e = !!z.value.trim();
+			T.addOnBlur && X(), T.addOnBlur && e || Q();
 		}
-		function xe(e) {
-			D.disabled || e.target.closest("button") || z.value?.focus();
+		function we(e) {
+			T.disabled || e.target.closest("button") || L.value?.focus();
 		}
-		return ee(V, () => {
-			H.value = "", U.value = !1;
+		return x(z, () => {
+			B.value = "", V.value = "", H.value = !1;
 		}), s({
-			focus: () => z.value?.focus(),
-			commit: () => !Z()
-		}), (t, s) => (d(), r("div", c(L.value, {
+			focus: () => L.value?.focus(),
+			commit: () => !X()
+		}), (t, s) => (d(), r("div", c(F.value, {
 			class: ["w-full", o.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-tag-input"
 		}), [
 			i("label", {
-				for: h(j),
+				for: g(k),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				i("span", null, m(o.label), 1),
-				o.readonly ? (d(), r("span", x, "(read only)")) : n("", !0),
-				o.required ? (d(), r("span", ae, "*")) : n("", !0)
-			], 8, ie),
+				m(t.$slots, "label-icon"),
+				i("span", null, h(o.label), 1),
+				m(t.$slots, "label-extra"),
+				o.readonly ? (d(), r("span", ie, "(read only)")) : n("", !0),
+				o.required ? (d(), r("span", C, "*")) : n("", !0)
+			], 8, re),
 			o.hint ? (d(), r("p", {
 				key: 0,
-				id: M,
+				id: A,
 				class: "mb-2 text-base text-muted"
-			}, m(o.hint), 1)) : n("", !0),
+			}, h(o.hint), 1)) : n("", !0),
 			i("div", {
 				class: u(["flex w-full items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
 					o.size === "small" ? "h-9" : "h-10.5",
 					o.readonly ? "bg-surface-muted" : "bg-background",
 					o.disabled ? "cursor-not-allowed" : "cursor-text",
-					J.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"]
+					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"]
 				]]),
-				onClick: xe
-			}, [te(i("input", c({
-				id: h(j),
+				onClick: we
+			}, [ee(i("input", c({
+				id: g(k),
 				ref_key: "input",
-				ref: z
-			}, R.value, {
-				"onUpdate:modelValue": s[0] ||= (e) => V.value = e,
+				ref: L
+			}, I.value, {
+				"onUpdate:modelValue": s[0] ||= (e) => z.value = e,
 				type: "text",
 				name: o.name,
-				placeholder: pe.value,
+				placeholder: ge.value,
 				disabled: o.disabled,
 				readonly: o.readonly,
-				"aria-invalid": !!J.value || void 0,
+				"aria-invalid": !!q.value || void 0,
 				"aria-required": o.required || void 0,
-				"aria-describedby": fe.value,
+				"aria-describedby": he.value,
 				autocomplete: "off",
 				autocapitalize: "off",
 				spellcheck: "false",
 				class: ["h-full min-w-0 flex-1 rounded-10 bg-transparent pr-2 text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [o.mono && "font-mono", o.size === "small" ? "pl-4" : "pl-5"]],
-				onKeydown: _e,
-				onPaste: ye,
-				onBlur: be
-			}), null, 16, S), [[y, V.value]]), i("span", { class: u(["flex shrink-0 items-center text-heading", o.size === "small" ? "mr-1" : "mr-3"]) }, [K.value && o.showClear && G.value.length ? (d(), r("button", {
+				onKeydown: be,
+				onPaste: Se,
+				onBlur: Ce
+			}), null, 16, ae), [[b, z.value]]), i("span", { class: u(["flex shrink-0 items-center text-heading", o.size === "small" ? "mr-1" : "mr-3"]) }, [G.value && o.showClear && W.value.length ? (d(), r("button", {
 				key: 0,
 				type: "button",
 				class: u(["inline-flex cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", o.size === "small" ? "size-7" : "size-8"]),
 				"aria-label": "Clear all values",
 				title: "Clear all items",
-				onClick: ge
-			}, [a(h(b), {
+				onClick: ye
+			}, [a(g(S), {
 				class: "size-4",
 				"aria-hidden": "true"
 			})], 2)) : n("", !0), i("button", {
 				type: "button",
 				class: u(["inline-flex items-center justify-center rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none enabled:cursor-pointer enabled:hover:bg-surface-sunken disabled:cursor-not-allowed disabled:opacity-40", o.size === "small" ? "size-7" : "size-8"]),
-				disabled: !me.value,
-				"aria-label": V.value.trim() ? `Add ${V.value.trim()}` : "Add item",
-				title: V.value.trim() ? `Add “${V.value.trim()}”` : "Add item",
+				disabled: !_e.value,
+				"aria-label": z.value.trim() ? `Add ${z.value.trim()}` : "Add item",
+				title: z.value.trim() ? `Add “${z.value.trim()}”` : "Add item",
 				tabindex: "-1",
-				onMousedown: s[1] ||= ne(() => {}, ["prevent"]),
-				onClick: Z
-			}, [a(h(re), {
+				onMousedown: s[1] ||= te(() => {}, ["prevent"]),
+				onClick: X
+			}, [a(g(ne), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 42, C)], 2)], 2),
-			J.value ? (d(), r("p", {
+			})], 42, oe)], 2)], 2),
+			q.value ? (d(), r("p", {
 				key: 1,
-				id: N,
+				id: j,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, m(J.value), 1)) : n("", !0),
-			G.value.length ? (d(), r("ul", {
+			}, h(q.value), 1)) : n("", !0),
+			W.value.length ? (d(), r("ul", {
 				key: 2,
 				ref_key: "list",
-				ref: B,
+				ref: R,
 				role: "list",
-				"aria-label": o.label,
+				"aria-label": o.label || g(P)["aria-label"],
 				class: "mt-3 flex w-full flex-wrap gap-2"
-			}, [(d(!0), r(e, null, p(G.value, (e, t) => (d(), r("li", {
+			}, [(d(!0), r(e, null, p(W.value, (e, t) => (d(), r("li", {
 				key: `${t}-${e}`,
-				class: u(["inline-flex h-8 max-w-full min-w-0 items-center justify-between gap-2 rounded-10 border px-3 text-base text-heading transition-all duration-300 hover:shadow-sm motion-reduce:transition-none", [o.mono && "font-mono", U.value && t === G.value.length - 1 ? "border-primary bg-accent-active ring-2 ring-ring" : "border-border bg-background"]]),
+				class: u(["inline-flex h-8 max-w-full min-w-0 items-center justify-between gap-2 rounded-10 border px-3 text-base text-heading transition-all duration-300 hover:shadow-sm motion-reduce:transition-none", [o.mono && "font-mono", H.value && t === W.value.length - 1 ? "border-primary bg-accent-active ring-2 ring-ring" : "border-border bg-background"]]),
 				"data-testid": "ac-tag-input-chip"
 			}, [i("span", {
 				class: "truncate",
 				title: e
-			}, m(e), 9, se), K.value ? (d(), r("button", {
+			}, h(e), 9, ce), G.value ? (d(), r("button", {
 				key: 0,
 				type: "button",
 				"data-remove": "",
 				class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": `Remove ${e}`,
 				title: `Remove ${e}`,
-				onClick: (e) => Q(t),
-				onKeydown: (e) => ve(e, t)
-			}, [a(h(b), {
+				onClick: (e) => Z(t),
+				onKeydown: (e) => xe(e, t)
+			}, [a(g(S), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 40, ce)) : n("", !0)], 2))), 128))], 8, oe)) : n("", !0),
-			G.value.length || o.maxItems !== void 0 ? (d(), r("div", le, [G.value.length ? (d(), r("span", w, m(G.value.length) + " " + m(G.value.length === 1 ? "item" : "items"), 1)) : n("", !0), o.maxItems === void 0 ? n("", !0) : (d(), r("span", {
+			})], 40, le)) : n("", !0)], 2))), 128))], 8, se)) : n("", !0),
+			W.value.length || o.maxItems !== void 0 ? (d(), r("div", ue, [W.value.length ? (d(), r("span", de, h(W.value.length) + " " + h(W.value.length === 1 ? "item" : "items"), 1)) : n("", !0), o.maxItems === void 0 ? n("", !0) : (d(), r("span", {
 				key: 1,
-				id: P,
-				class: u(["ml-auto", q.value ? "text-danger-strong" : de.value && "text-warning-strong"])
-			}, m(G.value.length) + " / " + m(o.maxItems) + " items ", 3))])) : n("", !0),
-			K.value ? (d(), r("p", {
+				id: M,
+				class: u(["ml-auto", K.value ? "text-danger-strong" : me.value && "text-warning-strong"])
+			}, h(W.value.length) + " / " + h(o.maxItems) + " items ", 3))])) : n("", !0),
+			G.value ? (d(), r("p", {
 				key: 4,
-				id: F,
+				id: N,
 				class: "sr-only"
 			}, "Press Enter or comma to add a value. Backspace in the empty input removes the last one.")) : n("", !0),
-			i("p", T, m(W.value), 1)
+			i("p", fe, h(U.value), 1)
 		], 16));
 	}
 });
 //#endregion
-export { E as default };
+export { w as default };

package/dist/lib/components/AcTaintInput.js

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

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

@@ -0,0 +1,44 @@
+import type { SelectOption } from "./types";
+/** One Kubernetes node taint. */
+export interface TaintItem<E = string> {
+    key: string;
+    value: string;
+    /** One of `effects`' values, e.g. `NoSchedule`. */
+    effect: E;
+}
+export interface Props<T> {
+    /** Effects to choose from, each with a `description` shown under its name. Defaults to Kubernetes' `NoSchedule`, `NoExecute` and `PreferNoSchedule`; pass your own to store enum numbers. The first is the default for a new row. */
+    effects?: SelectOption<T>[];
+    /** The effect that evicts running pods. Choosing it shows a warning under the rows. */
+    evictEffect?: T;
+    /** Disables every field and button. Was `is-disabled` in cloud-ui. */
+    disabled?: boolean;
+}
+declare const __VLS_export: <V extends string | number = string>(__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<V> & {
+        /** The taints that have a key, in order. Rows without a key stay on screen but aren't in the model. */
+        modelValue?: TaintItem<V>[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: TaintItem<V>[]) => any) | undefined;
+        onAdd?: (() => any) | undefined;
+        onRemove?: ((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;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: (((evt: "add") => void) & ((evt: "remove", index: number) => void)) & ((event: "update:modelValue", value: TaintItem<V>[]) => 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];
+}) & {};