@ac-design/design-system 2.3.0 → 2.4.0

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];
+}) & {};

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

@@ -0,0 +1,208 @@
+import e from "./AcInput.js";
+import t from "./AcSelect.js";
+import { Fragment as n, TransitionGroup as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+import { Plus as ee, Trash as S, TriangleAlert as C } from "@lucide/vue";
+//#region src/lib/components/AcTaintInput.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "relative flex-1 max-sm:basis-full" }, T = {
+	key: 0,
+	class: "mt-1.5 flex items-center gap-1.5 text-xs font-bold text-danger-strong",
+	role: "alert"
+}, E = { class: "relative flex-1 max-sm:basis-full" }, D = { class: "w-64 max-sm:min-w-0 max-sm:flex-1" }, O = { class: "flex flex-col" }, k = { class: "text-base font-bold" }, A = { class: "text-xs text-muted" }, te = { class: "flex flex-col" }, j = { class: "text-base font-bold" }, M = { class: "text-xs text-muted" }, N = [
+	"disabled",
+	"aria-label",
+	"onClick"
+], P = { class: "mt-4 flex" }, F = ["disabled"], I = {
+	key: 0,
+	class: "mt-6 flex items-start gap-3 rounded-8 border border-warning/20 bg-warning/5 p-4",
+	role: "note"
+}, L = /*@__PURE__*/ d({
+	__name: "AcTaintInput",
+	props: /*@__PURE__*/ f({
+		effects: { default: () => [
+			{
+				value: "NoSchedule",
+				label: "NoSchedule",
+				description: "Does not schedule new pods"
+			},
+			{
+				value: "NoExecute",
+				label: "NoExecute",
+				description: "Evicts existing pods"
+			},
+			{
+				value: "PreferNoSchedule",
+				label: "PreferNoSchedule",
+				description: "Prefers not to schedule new pods"
+			}
+		] },
+		evictEffect: { default: () => "NoExecute" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["add", "remove"], ["update:modelValue"]),
+	setup(d, { expose: f, emit: L }) {
+		let R = d, z = y(d, "modelValue"), B = L, V = h(null), H = 0, U = h([]), W = "", G = i(() => R.effects[0]?.value), K = i(() => U.value.some((e) => e.effect === R.evictEffect)), q = i(() => {
+			let e = /* @__PURE__ */ new Set();
+			return U.value.map((t) => {
+				if (t.key) {
+					let n = e.has(t.key);
+					return e.add(t.key), n ? "If duplicate key found , it will be overwritten" : "";
+				}
+				return !t.keyFocused && (t.value || t.effect !== G.value) ? "Key is required" : "";
+			});
+		});
+		function J(e = "", t = "", n) {
+			return {
+				id: H++,
+				key: e,
+				value: t,
+				effect: n || G.value,
+				keyFocused: !1
+			};
+		}
+		function Y(e) {
+			let t = (e ?? []).map((e) => J(e.key, e.value || "", e.effect));
+			U.value = t.length ? t : [J()], W = JSON.stringify(X());
+		}
+		function X() {
+			return U.value.filter((e) => e.key).map((e) => ({
+				key: e.key,
+				value: e.value,
+				effect: e.effect
+			}));
+		}
+		function Z() {
+			let e = X();
+			W = JSON.stringify(e), z.value = e;
+		}
+		function Q(e, t) {
+			Object.assign(e, t), Z();
+		}
+		function $() {
+			if (R.disabled) return;
+			U.value.push(J()), Z(), B("add");
+			let e = U.value.length - 1;
+			p(() => V.value?.querySelectorAll("[data-cell='key']")[e]?.focus());
+		}
+		function ne(e) {
+			R.disabled || (U.value.splice(e, 1), Z(), B("remove", e));
+		}
+		return b(z, (e) => {
+			JSON.stringify(e ?? []) !== W && Y(e);
+		}, { immediate: !0 }), f({ add: $ }), (i, f) => (m(), o("div", {
+			ref_key: "root",
+			ref: V,
+			class: "w-full",
+			"data-ac-ds": "",
+			"data-testid": "ac-taint-input"
+		}, [
+			f[3] ||= c("<div class=\"mb-2 flex items-center gap-4 text-base font-bold text-heading max-sm:hidden\" aria-hidden=\"true\"><div class=\"flex-1\">Key<span class=\"ml-1 text-danger\">*</span></div><div class=\"flex-1\">Value (Optional)</div><div class=\"w-64\">Effect</div><div class=\"w-9\"></div></div>", 1),
+			u(r, {
+				tag: "div",
+				class: "relative space-y-4",
+				"enter-active-class": "transition-all duration-300 ease-out motion-reduce:transition-none",
+				"enter-from-class": "-translate-y-2.5 opacity-0",
+				"leave-active-class": "absolute w-full transition-all duration-300 ease-out motion-reduce:transition-none",
+				"leave-to-class": "translate-x-5 opacity-0",
+				"move-class": "transition-transform duration-300 ease-out motion-reduce:transition-none"
+			}, {
+				default: x(() => [(m(!0), o(n, null, g(U.value, (n, r) => (m(), o("div", {
+					key: n.id,
+					class: "flex w-full items-start gap-4 max-sm:flex-wrap max-sm:gap-2"
+				}, [
+					s("div", w, [u(e, {
+						"data-cell": "key",
+						"model-value": n.key,
+						disabled: d.disabled,
+						invalid: !!q.value[r],
+						"aria-label": `Taint ${r + 1} key`,
+						placeholder: "Enter identifier for taint",
+						autocomplete: "off",
+						spellcheck: "false",
+						class: "[&_:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:pr-3 [&_input]:pl-3 [&_input]:font-medium [&_input]:placeholder:text-heading/50",
+						"onUpdate:modelValue": (e) => Q(n, { key: String(e) }),
+						onFocus: (e) => n.keyFocused = !0,
+						onBlur: (e) => n.keyFocused = !1
+					}, null, 8, [
+						"model-value",
+						"disabled",
+						"invalid",
+						"aria-label",
+						"onUpdate:modelValue",
+						"onFocus",
+						"onBlur"
+					]), !n.key && !n.keyFocused && (n.value || q.value[r]) ? (m(), o("p", T, [u(v(C), {
+						class: "size-3.5 fill-danger text-surface",
+						"aria-hidden": "true"
+					}), f[0] ||= l(" Key is required ", -1)])) : a("", !0)]),
+					s("div", E, [u(e, {
+						"data-cell": "value",
+						"model-value": n.value,
+						disabled: d.disabled,
+						"aria-label": `Taint ${r + 1} value`,
+						placeholder: "Enter associated value",
+						autocomplete: "off",
+						spellcheck: "false",
+						class: "[&_:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:pr-3 [&_input]:pl-3 [&_input]:font-medium [&_input]:placeholder:text-heading/50",
+						"onUpdate:modelValue": (e) => Q(n, { value: String(e) })
+					}, null, 8, [
+						"model-value",
+						"disabled",
+						"aria-label",
+						"onUpdate:modelValue"
+					])]),
+					s("div", D, [u(t, {
+						"model-value": n.effect,
+						options: d.effects,
+						disabled: d.disabled,
+						"aria-label": `Taint ${r + 1} effect`,
+						placeholder: "Select effect",
+						"onUpdate:modelValue": (e) => Q(n, { effect: e ?? G.value })
+					}, {
+						option: x(({ option: e }) => [s("div", O, [s("span", k, _(e.label), 1), s("span", A, _(e.description), 1)])]),
+						selected: x(({ option: e }) => [s("div", te, [s("span", j, _(e.label), 1), s("span", M, _(e.description), 1)])]),
+						_: 1
+					}, 8, [
+						"model-value",
+						"options",
+						"disabled",
+						"aria-label",
+						"onUpdate:modelValue"
+					])]),
+					s("button", {
+						type: "button",
+						class: "mt-0.5 inline-flex size-[38px] shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-danger/10 hover:text-danger focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted",
+						disabled: d.disabled,
+						"aria-label": n.key ? `Remove taint ${n.key}` : `Remove taint ${r + 1}`,
+						title: "Remove item",
+						onClick: (e) => ne(r)
+					}, [u(v(S), {
+						class: "size-[18px]",
+						"aria-hidden": "true"
+					})], 8, N)
+				]))), 128))]),
+				_: 1
+			}),
+			s("div", P, [s("button", {
+				type: "button",
+				class: "inline-flex cursor-pointer items-center gap-1.5 rounded-4 text-base leading-5 font-bold text-primary hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:no-underline",
+				disabled: d.disabled,
+				onClick: $
+			}, [u(v(ee), {
+				class: "size-4",
+				"aria-hidden": "true"
+			}), f[1] ||= l(" Add another taint ", -1)], 8, F)]),
+			K.value ? (m(), o("div", I, [u(v(C), {
+				class: "mt-0.5 size-5 shrink-0 text-warning",
+				"aria-hidden": "true"
+			}), f[2] ||= s("p", { class: "text-base text-heading" }, [s("span", { class: "font-bold" }, "Warning:"), l(" NoExecute taint immediately evicts any running pods on this node pool that don't have a matching toleration. ")], -1)])) : a("", !0)
+		], 512));
+	}
+});
+//#endregion
+export { L as default };