@pgcorp/ui-kit 0.11.0 → 0.13.0

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;
@@ -75,10 +77,12 @@ export interface Props {
     monospace?: boolean;
 }
 declare const __VLS_export: import('vue').DefineComponent<Props, STextareaApi, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    blur: (focusEvent: FocusEvent) => any;
     click: (mouseEvent: MouseEvent) => any;
     compositionend: (compositionEvent: CompositionEvent) => any;
     compositionstart: (compositionEvent: CompositionEvent) => any;
     compositionupdate: (compositionEvent: CompositionEvent) => any;
+    focus: (focusEvent: FocusEvent) => any;
     keydown: (keyboardEvent: KeyboardEvent) => any;
     keyup: (keyboardEvent: KeyboardEvent) => any;
     paste: (clipboardEvent: ClipboardEvent) => any;
@@ -86,10 +90,12 @@ declare const __VLS_export: import('vue').DefineComponent<Props, STextareaApi, {
     "selection-change": (selection: STextareaSelection) => any;
     "state-change": (state: STextareaState) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onBlur?: ((focusEvent: FocusEvent) => any) | undefined;
     onClick?: ((mouseEvent: MouseEvent) => any) | undefined;
     onCompositionend?: ((compositionEvent: CompositionEvent) => any) | undefined;
     onCompositionstart?: ((compositionEvent: CompositionEvent) => any) | undefined;
     onCompositionupdate?: ((compositionEvent: CompositionEvent) => any) | undefined;
+    onFocus?: ((focusEvent: FocusEvent) => any) | undefined;
     onKeydown?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
     onKeyup?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
     onPaste?: ((clipboardEvent: ClipboardEvent) => any) | undefined;
@@ -111,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;