@pgcorp/ui-kit 0.12.0 → 0.13.0

package/dist/src/components/shared/controls/SInputText.vue.d.ts

@@ -110,10 +110,10 @@ declare const __VLS_export: import('vue').DefineComponent<Props, {
     trailingIcon: Component;
     density: SInputTextDensity;
     appearance: "field" | "grid-cell" | "workbench-title";
-    monospace: boolean;
-    modelModifiers: SInputTextModelModifiers;
     minLength: number;
     maxLength: number;
+    monospace: boolean;
+    modelModifiers: SInputTextModelModifiers;
     trailingText: string;
     trailingAction: SInputTextTrailingAction;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/src/components/shared/controls/SInputText.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SInputText.css_vue_type_style_index_0_src_a9c5f1aa_scoped_a9c5f1aa_lang.css";
+import "../../../../assets/src/components/shared/controls/SInputText.css_vue_type_style_index_0_src_023c25d0_scoped_023c25d0_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SInputText.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                        */
 //#region src/components/shared/controls/SInputText.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-a9c5f1aa"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-023c25d0"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SInputText.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { mergeIdReferences as e, useOwnedAttrs as t } from "../../../internal/ownedAttrs.js";
-import { resolveOptionalDomId as n, validateBoundedInteger as r, validateExactString as i } from "../../../internal/runtimeContract.js";
-import { useInteractiveLeafRegistration as a } from "../../../internal/passiveContentContract.js";
-import o from "./SButton.vue.js";
-import s from "./SField.vue.js";
-import { resolveFieldSurfaceBindings as c } from "../../../internal/fieldSurface.js";
+import { resolveOptionalDomId as n, validateExactString as r } from "../../../internal/runtimeContract.js";
+import { useInteractiveLeafRegistration as i } from "../../../internal/passiveContentContract.js";
+import a from "./SButton.vue.js";
+import o from "./SField.vue.js";
+import { resolveFieldSurfaceBindings as s } from "../../../internal/fieldSurface.js";
+import { resolveTextLengthConstraints as c } from "../../../internal/textLengthConstraints.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, mergeProps as g, openBlock as _, ref as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as S, watchEffect as C, withCtx as w } from "vue";
 //#region src/components/shared/controls/SInputText.vue?vue&type=script&setup=true&lang.ts
 var T = [
@@ -161,7 +162,7 @@ var T = [
 			component: "SInputText",
 			owner: "native input"
 		});
-		a({ owner: "SInputText" });
+		i({ owner: "SInputText" });
 		let R = v(null);
 		j({
 			focus: () => R.value?.focus(),
@@ -172,27 +173,17 @@ var T = [
 			}
 		});
 		let z = S(), B = l(() => n("SInputText", "id", F.id, `s-input-text-${z}`)), V = l(() => {
-			let e = i("SInputText", "type", F.type, N);
+			let e = r("SInputText", "type", F.type, N);
 			return P[e];
 		}), H = l(() => {
-			let e = F.minLength === void 0 ? void 0 : r("SInputText", "minLength", F.minLength, {
-				minimum: 0,
-				maximum: 2 ** 53 - 1
-			}), t = F.maxLength === void 0 ? void 0 : r("SInputText", "maxLength", F.maxLength, {
-				minimum: 0,
-				maximum: 2 ** 53 - 1
-			});
-			if (e !== void 0 && t !== void 0 && e > t) throw RangeError(`SInputText: minLength (${e}) не может превышать maxLength (${t}). / SInputText: minLength (${e}) must not exceed maxLength (${t}).`);
-			if ((e !== void 0 || t !== void 0) && V.value.family !== "textual") throw TypeError("SInputText: minLength и maxLength применимы только к textual native input types. / SInputText: minLength and maxLength apply only to textual native input types.");
-			return {
-				minLength: e,
-				maxLength: t
-			};
-		}), U = l(() => i("SInputText", "size", F.size, [
+			let e = c("SInputText", F.minLength, F.maxLength);
+			if ((e.minLength !== void 0 || e.maxLength !== void 0) && V.value.family !== "textual") throw TypeError("SInputText: minLength и maxLength применимы только к textual native input types. / SInputText: minLength and maxLength apply only to textual native input types.");
+			return e;
+		}), U = l(() => r("SInputText", "size", F.size, [
 			"sm",
 			"md",
 			"lg"
-		])), W = l(() => i("SInputText", "appearance", F.appearance, [
+		])), W = l(() => r("SInputText", "appearance", F.appearance, [
 			"field",
 			"grid-cell",
 			"workbench-title"
@@ -213,7 +204,7 @@ var T = [
 			};
 		});
 		function K(e) {
-			return c("SInputText", {
+			return s("SInputText", {
 				kind: "text-input",
 				appearance: W.value === "field" ? "field" : "embedded",
 				invalid: e.invalid,
@@ -252,7 +243,7 @@ var T = [
 			"data-input-family": V.value.family,
 			"data-trailing": q.value,
 			"data-with-label": !!h.label || void 0
-		}, [m(s, {
+		}, [m(o, {
 			"control-id": B.value,
 			label: h.label,
 			required: h.required,
@@ -297,7 +288,7 @@ var T = [
 				key: 0,
 				class: "s-input-trailing",
 				"data-kind": q.value
-			}, [h.trailingIcon ? (_(), f("span", k, [(_(), u(y(h.trailingIcon), { class: "s-input-trailing__icon" }))])) : h.trailingText === void 0 ? h.trailingAction ? (_(), u(o, {
+			}, [h.trailingIcon ? (_(), f("span", k, [(_(), u(y(h.trailingIcon), { class: "s-input-trailing__icon" }))])) : h.trailingText === void 0 ? h.trailingAction ? (_(), u(a, {
 				key: 2,
 				label: "",
 				size: "sm",

package/dist/src/components/shared/controls/SMenuSurface.vue.js

@@ -1,8 +1,8 @@
-import "../../../../assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_bc7c7be4_scoped_bc7c7be4_lang.css";
+import "../../../../assets/src/components/shared/controls/SMenuSurface.css_vue_type_style_index_0_src_ddcc5fbb_scoped_ddcc5fbb_lang.css";
 import e from "../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./SMenuSurface.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                          */
 //#region src/components/shared/controls/SMenuSurface.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-bc7c7be4"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-ddcc5fbb"]]);
 //#endregion
 export { n as default };

package/dist/src/components/shared/controls/SMenuSurface.vue_vue_type_script_setup_true_lang.js

@@ -3,17 +3,20 @@ import { useInteractiveLeafRegistration as t } from "../../../internal/passiveCo
 import { useMenuLayer as n } from "../../../internal/useMenuLayer.js";
 import r from "../_internal/SMenuLayer.vue.js";
 import { menuContextKey as i, menuDepthKey as a } from "../_internal/menuContext.js";
-import ee from "../_internal/SMenuItem.vue.js";
-import o from "../_internal/SMenuSeparator.vue.js";
+import o from "../_internal/SMenuItem.vue.js";
+import ee from "../_internal/SMenuSeparator.vue.js";
 import { validateSMenuEntries as s } from "./menu.js";
-import { Fragment as c, Teleport as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createVNode as m, defineComponent as h, inject as g, mergeProps as _, nextTick as v, onBeforeUnmount as y, onMounted as b, openBlock as x, provide as S, ref as C, renderList as te, resolveComponent as ne, toRef as re, unref as w, watch as ie, withCtx as T } from "vue";
+import { Fragment as c, Teleport as te, computed as l, createBlock as u, createCommentVNode as ne, createElementBlock as d, createElementVNode as f, createVNode as re, defineComponent as p, inject as ie, mergeProps as m, nextTick as h, onBeforeUnmount as ae, onMounted as oe, openBlock as g, provide as _, ref as v, renderList as y, resolveComponent as se, toDisplayString as ce, toRef as le, unref as b, watch as x, withCtx as S } from "vue";
 //#region src/components/shared/controls/SMenuSurface.vue?vue&type=script&setup=true&lang.ts
-var E = [
+var C = [
 	"data-density",
 	"data-orientation",
 	"aria-label",
 	"aria-orientation"
-], D = /*@__PURE__*/ h({
+], ue = ["aria-label", "data-menu-group-id"], de = {
+	class: "s-menu-group__label",
+	"aria-hidden": "true"
+}, w = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "SMenuSurface",
 	props: {
@@ -35,116 +38,116 @@ var E = [
 		"submenu-back",
 		"dismiss-tree"
 	],
-	setup(h, { expose: D, emit: O }) {
-		let k = h, A = O, j = e({
+	setup(p, { expose: w, emit: T }) {
+		let E = p, D = T, fe = e({
 			component: "SMenuSurface",
 			owner: "menu root"
 		});
 		t({ owner: "SMenuSurface" });
-		let M = g(a, -1) + 1;
-		S(a, M);
-		let N = C(null), P = /* @__PURE__ */ new Map();
-		S(i, {
-			density: re(k, "density"),
+		let O = ie(a, -1) + 1;
+		_(a, O);
+		let k = v(null), A = /* @__PURE__ */ new Map();
+		_(i, {
+			density: le(E, "density"),
 			register: (e) => {
-				if (P.has(e.entryId)) throw Error(`SMenuSurface: duplicate mounted entry id '${e.entryId}'`);
-				return P.set(e.entryId, e), () => P.delete(e.entryId);
+				if (A.has(e.entryId)) throw Error(`SMenuSurface: duplicate mounted entry id '${e.entryId}'`);
+				return A.set(e.entryId, e), () => A.delete(e.entryId);
 			}
 		});
-		let F = C(null), I = C(!0), L = C(null), R = C(null), z = u(() => L.value?.getElement() ?? null), { position: B, zIndex: V, open: H, close: U } = n(z, { onDismiss: (e) => {
-			F.value = null, e === "outside" && A("dismiss-tree");
-		} }), W = u(() => {
-			let e = k.items.find((e) => e.id === F.value);
+		let j = v(null), M = v(!0), N = v(null), P = v(null), F = l(() => N.value?.getElement() ?? null), { position: I, zIndex: L, open: R, close: z } = n(F, { onDismiss: (e) => {
+			j.value = null, e === "outside" && D("dismiss-tree");
+		} }), B = (e) => e.flatMap((e) => e.kind === "group" ? [...e.children] : e.kind === "separator" ? [] : [e]), V = (e) => B(E.items).find((t) => t.id === e), H = l(() => {
+			let e = j.value ? V(j.value) : void 0;
 			return e?.kind === "submenu" ? e : null;
-		}), G = "", K = null, q = () => [...P.values()].filter((e) => e.element().isConnected).sort((e, t) => {
+		}), U = "", W = null, G = () => [...A.values()].filter((e) => e.element().isConnected).sort((e, t) => {
 			let n = e.element().compareDocumentPosition(t.element());
 			return n & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
-		}), J = (e, t) => {
+		}), K = (e, t) => {
 			for (let t of e) t.setTabStop(!1);
 			let n = e[t];
 			n && (n.setTabStop(!0), n.focus());
-		}, Y = () => {
-			let e = q();
-			e.length > 0 && J(e, 0);
-		}, X = () => {
-			let e = q();
-			e.length > 0 && J(e, e.length - 1);
-		}, ae = () => {
-			if (typeof k.label != "string" || !k.label.trim()) throw TypeError("SMenuSurface: label must be a non-empty string");
-			s(k.items);
-		}, oe = (e) => {
-			let t = q();
+		}, q = () => {
+			let e = G();
+			e.length > 0 && K(e, 0);
+		}, J = () => {
+			let e = G();
+			e.length > 0 && K(e, e.length - 1);
+		}, pe = () => {
+			if (typeof E.label != "string" || !E.label.trim()) throw TypeError("SMenuSurface: label must be a non-empty string");
+			s(E.items);
+		}, me = (e) => {
+			let t = G();
 			if (t.length === 0) return;
 			let n = t.findIndex((e) => e.isFocused());
-			J(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
-		}, se = (e) => {
+			K(t, ((n < 0 ? e === 1 ? -1 : 0 : n) + e + t.length) % t.length);
+		}, he = (e) => {
 			let t = e.toLocaleLowerCase();
-			G += t, K && clearTimeout(K), K = setTimeout(() => {
-				G = "", K = null;
+			U += t, W && clearTimeout(W), W = setTimeout(() => {
+				U = "", W = null;
 			}, 500);
-			let n = [...G].every((e) => e === t) ? t : G, r = q();
+			let n = [...U].every((e) => e === t) ? t : U, r = G();
 			if (r.length === 0) return;
 			let i = r.findIndex((e) => e.isFocused()), a = [...r.slice(i + 1), ...r.slice(0, i + 1)].find((e) => e.label().trim().toLocaleLowerCase().startsWith(n));
-			a && J(r, r.indexOf(a));
+			a && K(r, r.indexOf(a));
 		};
-		async function Z(e, t) {
-			let n = k.items.find((t) => t.id === e), r = P.get(e);
+		async function Y(e, t) {
+			let n = V(e), r = A.get(e);
 			if (n?.kind === "submenu" && !n.disabled && r) {
-				if (F.value === e) {
-					t && await v(() => R.value?.focusFirst());
+				if (j.value === e) {
+					t && await h(() => P.value?.focusFirst());
 					return;
 				}
-				F.value && U("outside"), I.value = t, F.value = e, await H({
+				j.value && z("outside"), M.value = t, j.value = e, await R({
 					type: "element",
 					element: r.element(),
 					align: "left",
 					placement: "inline"
-				}, r.element()), t && await v(() => R.value?.focusFirst());
+				}, r.element()), t && await h(() => P.value?.focusFirst());
 			}
 		}
-		function Q(e) {
-			F.value &&= (U(e), null);
+		function X(e) {
+			j.value &&= (z(e), null);
 		}
-		function ce(e) {
-			e.kind === "submenu" && !e.disabled ? Z(e.id, !1) : F.value && Q("outside");
+		function Z(e) {
+			e.kind === "submenu" && !e.disabled ? Y(e.id, !1) : j.value && X("outside");
 		}
-		function le(e, t) {
-			e.kind === "submenu" || e.disabled || A("select", e, t);
+		function Q(e, t) {
+			e.kind === "submenu" || e.disabled || D("select", e, t);
 		}
-		function ue(e, t) {
-			A("select", e, t);
+		function ge(e, t) {
+			D("select", e, t);
 		}
 		function $() {
-			return q().find((e) => e.isFocused());
+			return G().find((e) => e.isFocused());
 		}
-		let de = (e) => {
+		let _e = (e) => {
 			let t = e.target;
-			if (e.currentTarget !== t && !q().some((e) => e.ownsEventTarget(t))) return;
+			if (e.currentTarget !== t && !G().some((e) => e.ownsEventTarget(t))) return;
 			if (e.key === "Tab") {
-				A("tab", e);
+				D("tab", e);
 				return;
 			}
 			if (e.key === "Escape") {
-				e.preventDefault(), A("escape");
+				e.preventDefault(), D("escape");
 				return;
 			}
-			let n = k.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", r = k.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-			if (k.orientation === "vertical" && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+			let n = E.orientation === "horizontal" ? "ArrowRight" : "ArrowDown", r = E.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			if (E.orientation === "vertical" && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
 				let t = $();
-				e.preventDefault(), e.key === "ArrowRight" && t?.hasSubmenu() ? Z(t.entryId, !0) : e.key === "ArrowLeft" && M > 0 && A("submenu-back");
+				e.preventDefault(), e.key === "ArrowRight" && t?.hasSubmenu() ? Y(t.entryId, !0) : e.key === "ArrowLeft" && O > 0 && D("submenu-back");
 				return;
 			}
 			if (e.key === n || e.key === r) {
-				e.preventDefault(), oe(e.key === n ? 1 : -1);
+				e.preventDefault(), me(e.key === n ? 1 : -1);
 				return;
 			}
-			if (k.orientation === "horizontal" && e.key === "ArrowDown") {
+			if (E.orientation === "horizontal" && e.key === "ArrowDown") {
 				let t = $();
-				t?.hasSubmenu() && (e.preventDefault(), Z(t.entryId, !0));
+				t?.hasSubmenu() && (e.preventDefault(), Y(t.entryId, !0));
 				return;
 			}
 			if (e.key === "Home" || e.key === "End") {
-				e.preventDefault(), e.key === "Home" ? Y() : X();
+				e.preventDefault(), e.key === "Home" ? q() : J();
 				return;
 			}
 			if (e.key === "Enter" || e.key === " ") {
@@ -152,76 +155,95 @@ var E = [
 				t && t.activate(e);
 				return;
 			}
-			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && se(e.key);
-		}, fe = (e) => {
+			e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && he(e.key);
+		}, ve = (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && (N.value?.contains(t) || z.value?.contains(t)) || A("focus-exit", e);
+			t instanceof Node && (k.value?.contains(t) || F.value?.contains(t)) || D("focus-exit", e);
 		};
-		return b(() => {
-			k.autofocus && v(k.initialFocus === "last" ? X : Y);
-		}), ie(() => [k.label, k.items], () => {
-			ae(), F.value && !W.value && Q("outside");
+		return oe(() => {
+			E.autofocus && h(E.initialFocus === "last" ? J : q);
+		}), x(() => [E.label, E.items], () => {
+			pe(), j.value && !H.value && X("outside");
 		}, {
 			immediate: !0,
 			deep: !0
-		}), y(() => {
-			K && clearTimeout(K);
-		}), D({
-			focusFirst: Y,
-			focusLast: X
+		}), ae(() => {
+			W && clearTimeout(W);
+		}), w({
+			focusFirst: q,
+			focusLast: J
 		}), (e, t) => {
-			let n = ne("SMenuSurface", !0);
-			return x(), p("div", _({
+			let n = se("SMenuSurface", !0);
+			return g(), d("div", m({
 				ref_key: "surfaceRef",
-				ref: N
-			}, w(j).bindings(), {
+				ref: k
+			}, b(fe).bindings(), {
 				class: "s-menu-surface",
-				"data-density": h.density,
-				"data-orientation": h.orientation,
-				"data-menu-depth": M,
+				"data-density": p.density,
+				"data-orientation": p.orientation,
+				"data-menu-depth": O,
 				role: "menu",
-				"aria-label": h.label,
-				"aria-orientation": h.orientation,
-				onKeydown: de,
-				onFocusout: fe
-			}), [(x(!0), p(c, null, te(h.items, (e) => (x(), p(c, { key: e.id }, [e.kind === "separator" ? (x(), d(o, {
+				"aria-label": p.label,
+				"aria-orientation": p.orientation,
+				onKeydown: _e,
+				onFocusout: ve
+			}), [(g(!0), d(c, null, y(p.items, (e) => (g(), d(c, { key: e.id }, [e.kind === "separator" ? (g(), u(ee, {
 				key: 0,
 				"entry-id": e.id
-			}, null, 8, ["entry-id"])) : (x(), d(ee, {
+			}, null, 8, ["entry-id"])) : e.kind === "group" ? (g(), d("div", {
 				key: 1,
+				class: "s-menu-group",
+				role: "group",
+				"aria-label": e.label,
+				"data-menu-group-id": e.id
+			}, [f("div", de, ce(e.label), 1), (g(!0), d(c, null, y(e.children, (e) => (g(), u(o, {
+				key: e.id,
 				entry: e,
-				"submenu-open": W.value?.id === e.id,
-				onSelect: (t) => le(e, t),
-				onOpenSubmenu: (t) => Z(e.id, !0),
-				onPointerIntent: (t) => ce(e)
+				"submenu-open": H.value?.id === e.id,
+				onSelect: (t) => Q(e, t),
+				onOpenSubmenu: (t) => Y(e.id, !0),
+				onPointerIntent: (t) => Z(e)
 			}, null, 8, [
 				"entry",
 				"submenu-open",
 				"onSelect",
 				"onOpenSubmenu",
 				"onPointerIntent"
-			]))], 64))), 128)), (x(), d(l, { to: "body" }, [W.value ? (x(), d(r, {
+			]))), 128))], 8, ue)) : (g(), u(o, {
+				key: 2,
+				entry: e,
+				"submenu-open": H.value?.id === e.id,
+				onSelect: (t) => Q(e, t),
+				onOpenSubmenu: (t) => Y(e.id, !0),
+				onPointerIntent: (t) => Z(e)
+			}, null, 8, [
+				"entry",
+				"submenu-open",
+				"onSelect",
+				"onOpenSubmenu",
+				"onPointerIntent"
+			]))], 64))), 128)), (g(), u(te, { to: "body" }, [H.value ? (g(), u(r, {
 				key: 0,
 				ref_key: "submenuLayerRef",
-				ref: L,
+				ref: N,
 				kind: "submenu",
-				"landmark-label": `${h.label}: ${W.value.label}`,
-				position: w(B),
-				"z-index": w(V)
+				"landmark-label": `${p.label}: ${H.value.label}`,
+				position: b(I),
+				"z-index": b(L)
 			}, {
-				default: T(() => [m(n, {
+				default: S(() => [re(n, {
 					ref_key: "submenuSurfaceRef",
-					ref: R,
-					label: `${h.label}: ${W.value.label}`,
-					items: W.value.children,
-					density: h.density,
+					ref: P,
+					label: `${p.label}: ${H.value.label}`,
+					items: H.value.children,
+					density: p.density,
 					orientation: "vertical",
-					autofocus: I.value,
-					onEscape: t[0] ||= (e) => Q("escape"),
-					onSubmenuBack: t[1] ||= (e) => Q("escape"),
-					onDismissTree: t[2] ||= (e) => A("dismiss-tree"),
-					onSelect: ue,
-					onTab: t[3] ||= (e) => A("tab", e)
+					autofocus: M.value,
+					onEscape: t[0] ||= (e) => X("escape"),
+					onSubmenuBack: t[1] ||= (e) => X("escape"),
+					onDismissTree: t[2] ||= (e) => D("dismiss-tree"),
+					onSelect: ge,
+					onTab: t[3] ||= (e) => D("tab", e)
 				}, null, 8, [
 					"label",
 					"items",
@@ -233,9 +255,9 @@ var E = [
 				"landmark-label",
 				"position",
 				"z-index"
-			])) : f("", !0)]))], 16, E);
+			])) : ne("", !0)]))], 16, C);
 		};
 	}
 });
 //#endregion
-export { D as default };
+export { w as default };

package/dist/src/components/shared/controls/STextarea.vue.d.ts

@@ -65,6 +65,8 @@ export interface Props {
     helpText?: string;
     id?: string;
     rows?: number;
+    minLength?: number;
+    maxLength?: number;
     size?: STextareaSize;
     autoResize?: boolean;
     maxRows?: number;
@@ -115,6 +117,8 @@ declare const __VLS_export: import('vue').DefineComponent<Props, STextareaApi, {
     errorMessage: string;
     modelValue: string | null;
     appearance: STextareaAppearance;
+    minLength: number;
+    maxLength: number;
     autoResize: boolean;
     maxRows: number;
     minHeight: number;