@pgcorp/ui-kit 0.13.0 → 0.14.0

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

@@ -1,15 +1,16 @@
 import { registerLayer as e } from "../../../internal/layerStack.js";
-import { useFloatingPosition as t } from "../../../composables/useFloatingPosition.js";
-import { useUiKitLocale as n } from "../../../composables/useUiKitLocale.js";
-import { useOwnedAttrs as ee } from "../../../internal/ownedAttrs.js";
-import { validateBoolean as r, validateDomId as te, validateExactString as i, validateNonEmptyString as a } from "../../../internal/runtimeContract.js";
+import { useOverlayAdmission as t } from "../../../internal/overlayHost.js";
+import { validateBoolean as n, validateDomId as ee, validateExactString as r, validateNonEmptyString as i } from "../../../internal/runtimeContract.js";
+import { useFloatingPosition as te } from "../../../composables/useFloatingPosition.js";
+import { useUiKitLocale as ne } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as a } from "../../../internal/ownedAttrs.js";
 import { selectionKeyToken as o } from "../_internal/useSelectionRoving.js";
-import { isSelectionModelList as ne, resolveSelectionInventory as s, validateOptionalSelectionString as c, validateSelectionModel as l } from "../_internal/selectionContract.js";
-import u from "./SListbox.vue.js";
-import d from "./SInputText.vue.js";
-import { Fragment as f, Teleport as re, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, mergeProps as ie, nextTick as b, normalizeStyle as x, onBeforeUnmount as S, openBlock as C, shallowRef as w, unref as T, useId as E, watch as D } from "vue";
+import { isSelectionModelList as s, resolveSelectionInventory as c, validateOptionalSelectionString as l, validateSelectionModel as u } from "../_internal/selectionContract.js";
+import d from "./SListbox.vue.js";
+import re from "./SInputText.vue.js";
+import { Fragment as ie, Teleport as ae, computed as f, createBlock as oe, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as v, nextTick as y, normalizeStyle as se, onBeforeUnmount as ce, openBlock as b, shallowRef as x, unref as S, useId as C, watch as w, watchEffect as T } from "vue";
 //#region src/components/shared/controls/SCombobox.vue?vue&type=script&setup=true&lang.ts
-var O = /*@__PURE__*/ y({
+var E = /*@__PURE__*/ _({
 	inheritAttrs: !1,
 	__name: "SCombobox",
 	props: {
@@ -46,46 +47,49 @@ var O = /*@__PURE__*/ y({
 		}
 	},
 	emits: ["update:modelValue", "update:search"],
-	setup(y, { emit: O }) {
-		let k = y, { t: A } = n(), j = O, M = ee({
+	setup(_, { emit: E }) {
+		let D = _, { t: O } = ne(), k = E, A = a({
 			component: "SCombobox",
 			owner: "editable combobox input"
-		}), N = E(), P = w(null), F = w(null), I = w(!1), L = w(null), R = w("var(--s-layer-root-floating)"), z = null, B = p(() => k.id === void 0 ? `s-combobox-${N}` : te("SCombobox", "id", k.id)), V = p(() => `${B.value}-listbox`), H = p(() => {
-			if (typeof k.search != "string") throw TypeError("SCombobox: search must be a string");
-			return k.search;
-		}), U = p(() => ({
-			filterMode: i("SCombobox", "filterMode", k.filterMode, ["local", "manual"]),
-			placeholder: a("SCombobox", "placeholder", k.placeholder ?? A("forms.searchPlaceholder")),
-			disabled: r("SCombobox", "disabled", k.disabled),
-			readonly: r("SCombobox", "readonly", k.readonly),
-			required: r("SCombobox", "required", k.required),
-			invalid: r("SCombobox", "invalid", k.invalid),
-			emptyLabel: a("SCombobox", "emptyLabel", k.emptyLabel ?? A("forms.noOptions")),
-			size: i("SCombobox", "size", k.size, [
+		}), le = C(), j = x(null), M = x(null), N = x(!1), P = t(), F = x(null), I = x("var(--s-layer-root-floating)"), L = null, R = 0, z = f(() => D.id === void 0 ? `s-combobox-${le}` : ee("SCombobox", "id", D.id)), B = f(() => `${z.value}-listbox`), V = f(() => {
+			if (typeof D.search != "string") throw TypeError("SCombobox: search must be a string");
+			return D.search;
+		}), H = f(() => ({
+			filterMode: r("SCombobox", "filterMode", D.filterMode, ["local", "manual"]),
+			placeholder: i("SCombobox", "placeholder", D.placeholder ?? O("forms.searchPlaceholder")),
+			disabled: n("SCombobox", "disabled", D.disabled),
+			readonly: n("SCombobox", "readonly", D.readonly),
+			required: n("SCombobox", "required", D.required),
+			invalid: n("SCombobox", "invalid", D.invalid),
+			emptyLabel: i("SCombobox", "emptyLabel", D.emptyLabel ?? O("forms.noOptions")),
+			size: r("SCombobox", "size", D.size, [
 				"sm",
 				"md",
 				"lg"
 			]),
-			allowCustomValue: r("SCombobox", "allowCustomValue", k.allowCustomValue),
-			label: c("SCombobox", "label", k.label),
-			helpText: c("SCombobox", "helpText", k.helpText),
-			errorMessage: c("SCombobox", "errorMessage", k.errorMessage)
-		})), W = p(() => {
-			let e = s("SCombobox", k.options);
-			return U.value.allowCustomValue && typeof k.modelValue == "string" ? o("SCombobox", k.modelValue, "modelValue") : l("SCombobox", "single", k.modelValue, e), e;
+			allowCustomValue: n("SCombobox", "allowCustomValue", D.allowCustomValue),
+			label: l("SCombobox", "label", D.label),
+			helpText: l("SCombobox", "helpText", D.helpText),
+			errorMessage: l("SCombobox", "errorMessage", D.errorMessage)
+		})), U = f(() => {
+			let e = c("SCombobox", D.options);
+			return H.value.allowCustomValue && typeof D.modelValue == "string" ? o("SCombobox", D.modelValue, "modelValue") : u("SCombobox", "single", D.modelValue, e), e;
 		});
-		function G(e) {
+		T(() => {
+			U.value;
+		});
+		function W(e) {
 			return e.entries.map((e) => e.kind === "option" ? e.record.option : {
 				groupId: e.groupId,
 				label: e.label,
 				options: e.records.map((e) => e.option)
 			});
 		}
-		let K = p(() => {
-			let e = W.value;
-			if (U.value.filterMode === "manual") return G(e);
-			let t = H.value.trim().toLocaleLowerCase();
-			return t.length === 0 ? G(e) : e.entries.flatMap((e) => {
+		let G = f(() => {
+			let e = U.value;
+			if (H.value.filterMode === "manual") return W(e);
+			let t = V.value.trim().toLocaleLowerCase();
+			return t.length === 0 ? W(e) : e.entries.flatMap((e) => {
 				if (e.kind === "option") return `${e.record.option.label} ${e.record.option.title ?? ""}`.toLocaleLowerCase().includes(t) ? [e.record.option] : [];
 				let n = e.records.filter((e) => `${e.option.label} ${e.option.title ?? ""}`.toLocaleLowerCase().includes(t));
 				return n.length === 0 ? [] : [{
@@ -94,73 +98,82 @@ var O = /*@__PURE__*/ y({
 					options: n.map((e) => e.option)
 				}];
 			});
-		}), q = p(() => s("SCombobox filtered options", K.value)), J = p(() => {
-			if (k.modelValue === null) return null;
-			let e = o("SCombobox", k.modelValue, "modelValue");
-			return q.value.optionsByToken.has(e) ? k.modelValue : null;
-		}), ae = p(() => {
-			let e = M.bindings()["aria-label"];
-			return typeof e == "string" ? a("SCombobox", "aria-label", e) : U.value.label ?? U.value.placeholder;
-		}), oe = p(() => {
-			if (!I.value || L.value === null) return;
-			let e = o("SCombobox", L.value, "activeValue");
-			if (q.value.optionsByToken.has(e)) return `${V.value}-option-${encodeURIComponent(e)}`;
+		}), K = f(() => c("SCombobox filtered options", G.value)), ue = f(() => {
+			if (D.modelValue === null) return null;
+			let e = o("SCombobox", D.modelValue, "modelValue");
+			return K.value.optionsByToken.has(e) ? D.modelValue : null;
+		}), de = f(() => {
+			let e = A.bindings()["aria-label"];
+			return typeof e == "string" ? i("SCombobox", "aria-label", e) : H.value.label ?? H.value.placeholder;
+		}), fe = f(() => {
+			if (!N.value || F.value === null) return;
+			let e = o("SCombobox", F.value, "activeValue");
+			if (K.value.optionsByToken.has(e)) return `${B.value}-option-${encodeURIComponent(e)}`;
 		});
-		D(H, () => {
-			L.value = null, I.value && b(() => F.value?.initializeActive());
+		w(V, () => {
+			F.value = null, N.value && $();
+		}, { flush: "sync" }), w(P, (e) => {
+			e || Z("retire");
 		}, { flush: "sync" });
-		let { anchorRef: Y, panelRef: X, floatingStyle: se } = t({
-			active: I,
+		let { anchorRef: q, panelRef: J, floatingStyle: pe } = te({
+			active: N,
 			placement: () => "bottom-start",
 			widthMatch: () => "exact",
-			zIndex: () => R.value
+			zIndex: () => I.value
 		});
-		function ce() {
-			if (!U.value.allowCustomValue) return null;
-			let e = H.value.trim();
+		function Y() {
+			if (!H.value.allowCustomValue) return null;
+			let e = V.value.trim();
 			if (e.length === 0) return null;
-			if (k.modelValue !== null) {
-				let t = o("SCombobox", k.modelValue, "modelValue");
-				if (W.value.optionsByToken.get(t)?.option.label.trim() === e || typeof k.modelValue == "string" && k.modelValue === e) return null;
+			if (D.modelValue !== null) {
+				let t = o("SCombobox", D.modelValue, "modelValue");
+				if (U.value.optionsByToken.get(t)?.option.label.trim() === e || typeof D.modelValue == "string" && D.modelValue === e) return null;
 			}
 			return e;
 		}
-		function Z() {
-			let e = ce();
-			return e !== null && (j("update:modelValue", e), j("update:search", String(e)), !0);
+		function X() {
+			let e = Y();
+			return e !== null && (k("update:modelValue", e), k("update:search", String(e)), !0);
 		}
-		function le() {
-			let e = P.value;
+		function me() {
+			let e = j.value;
 			if (!e) throw Error("SCombobox: SInputText API is unavailable");
 			return e.getElement();
 		}
-		function Q(e) {
-			I.value && ((e === "tab" || e === "outside") && Z(), I.value = !1, L.value = null, z?.unregister({ restoreFocus: !1 }), z = null, R.value = "var(--s-layer-root-floating)");
+		function Z(e) {
+			R += 1, N.value && ((e === "tab" || e === "outside") && X(), N.value = !1, F.value = null, L?.unregister({ restoreFocus: !1 }), L = null, I.value = "var(--s-layer-root-floating)");
 		}
-		async function $() {
-			if (W.value, U.value.disabled || U.value.readonly || I.value) return;
-			let t = le();
-			I.value = !0, z = e({
+		async function Q() {
+			if (U.value, H.value.disabled || H.value.readonly || N.value || !P.value) return;
+			let t = me(), n = ++R;
+			N.value = !0, L = e({
 				kind: "listbox",
-				root: () => X.value,
-				anchor: () => Y.value,
+				root: () => J.value,
+				anchor: () => q.value,
 				restoreTarget: t,
-				requestDismiss: (e) => Q(e === "escape" ? "escape" : "outside")
-			}), R.value = z.zIndex, await b(), F.value?.initializeActive();
+				requestDismiss: (e) => Z(e === "escape" ? "escape" : "outside"),
+				onRetire: () => Z("retire")
+			}), I.value = L.zIndex, await y(), N.value && P.value && R === n && M.value?.initializeActive();
+		}
+		function $() {
+			let e = R;
+			y(() => {
+				N.value && P.value && R === e && M.value?.initializeActive();
+			});
 		}
-		function ue(e) {
-			j("update:search", e), L.value = null, I.value ? b(() => F.value?.initializeActive()) : $();
+		function he(e) {
+			k("update:search", e), F.value = null, N.value ? $() : Q();
 		}
-		function de(e) {
-			if (ne(e)) throw TypeError("SCombobox: selection update must be a single key or null");
-			if (l("SCombobox update", "single", e, W.value), j("update:modelValue", e), e !== null) {
-				let t = o("SCombobox", e, "selected value"), n = W.value.optionsByToken.get(t);
+		function ge(e) {
+			if (s(e)) throw TypeError("SCombobox: selection update must be a single key or null");
+			if (u("SCombobox update", "single", e, U.value), k("update:modelValue", e), e !== null) {
+				let t = o("SCombobox", e, "selected value"), n = U.value.optionsByToken.get(t);
 				if (!n) throw Error("SCombobox: selected option identity is stale");
-				j("update:search", n.option.label);
+				k("update:search", n.option.label);
 			}
-			Q("selection");
+			Z("selection");
 		}
-		async function fe(e) {
+		async function _e(e) {
 			let t = {
 				ArrowDown: "next",
 				ArrowUp: "previous",
@@ -168,53 +181,55 @@ var O = /*@__PURE__*/ y({
 				End: "last"
 			}[e.key];
 			if (t) {
-				e.preventDefault();
-				let n = I.value;
-				if (await $(), await b(), !n && (t === "next" || t === "previous")) return;
-				F.value?.moveActive(t);
+				if (e.preventDefault(), N.value && M.value !== null) {
+					M.value.moveActive(t);
+					return;
+				}
+				if (await Q(), await y(), !N.value || !P.value || t === "next" || t === "previous") return;
+				M.value?.moveActive(t);
 				return;
 			}
-			if (e.key === "Enter" && I.value) {
-				e.preventDefault(), L.value === null ? Z() && Q("selection") : F.value?.selectActive();
+			if (e.key === "Enter" && N.value) {
+				e.preventDefault(), F.value === null ? X() && Z("selection") : M.value?.selectActive();
 				return;
 			}
-			if (e.key === "Escape" && I.value) {
-				e.preventDefault(), Q("escape");
+			if (e.key === "Escape" && N.value) {
+				e.preventDefault(), Z("escape");
 				return;
 			}
-			e.key === "Tab" && Q("tab");
+			e.key === "Tab" && Z("tab");
 		}
-		return S(() => z?.unregister({ restoreFocus: !1 })), (e, t) => (C(), g(f, null, [_("div", {
+		return ce(() => Z("retire")), (e, t) => (b(), m(ie, null, [h("div", {
 			ref_key: "anchorRef",
-			ref: Y,
+			ref: q,
 			class: "s-combobox-anchor"
-		}, [v(d, ie({
+		}, [g(re, v({
 			ref_key: "inputRef",
-			ref: P
-		}, T(M).bindings(), {
-			id: B.value,
-			"model-value": H.value,
-			label: y.label,
-			placeholder: U.value.placeholder,
-			disabled: y.disabled,
-			readonly: y.readonly,
-			required: y.required,
-			invalid: y.invalid,
-			"error-message": y.errorMessage,
-			"help-text": y.helpText,
-			size: y.size,
+			ref: j
+		}, S(A).bindings(), {
+			id: z.value,
+			"model-value": V.value,
+			label: _.label,
+			placeholder: H.value.placeholder,
+			disabled: _.disabled,
+			readonly: _.readonly,
+			required: _.required,
+			invalid: _.invalid,
+			"error-message": _.errorMessage,
+			"help-text": _.helpText,
+			size: _.size,
 			type: "search",
 			autocomplete: "off",
 			role: "combobox",
 			"aria-haspopup": "listbox",
 			"aria-autocomplete": "list",
-			"aria-expanded": I.value,
-			"aria-controls": V.value,
-			"aria-activedescendant": oe.value,
-			"onUpdate:modelValue": ue,
-			onFocus: $,
-			onClick: $,
-			onKeydown: fe
+			"aria-expanded": N.value,
+			"aria-controls": B.value,
+			"aria-activedescendant": fe.value,
+			"onUpdate:modelValue": he,
+			onFocus: Q,
+			onClick: Q,
+			onKeydown: _e
 		}), null, 16, [
 			"id",
 			"model-value",
@@ -230,27 +245,27 @@ var O = /*@__PURE__*/ y({
 			"aria-expanded",
 			"aria-controls",
 			"aria-activedescendant"
-		])], 512), (C(), m(re, { to: "body" }, [I.value ? (C(), g("div", {
+		])], 512), (b(), oe(ae, { to: "body" }, [N.value && S(P) ? (b(), m("div", {
 			key: 0,
 			ref_key: "panelRef",
-			ref: X,
-			style: x(T(se)),
+			ref: J,
+			style: se(S(pe)),
 			class: "s-combobox-layer"
-		}, [v(u, {
+		}, [g(d, {
 			ref_key: "listboxRef",
-			ref: F,
-			id: V.value,
-			"model-value": J.value,
-			options: K.value,
-			label: ae.value,
-			disabled: y.disabled,
-			readonly: y.readonly,
-			invalid: y.invalid,
-			"empty-label": U.value.emptyLabel,
+			ref: M,
+			id: B.value,
+			"model-value": ue.value,
+			options: G.value,
+			label: de.value,
+			disabled: _.disabled,
+			readonly: _.readonly,
+			invalid: _.invalid,
+			"empty-label": H.value.emptyLabel,
 			"focus-mode": "activedescendant",
-			"active-value": L.value,
-			"onUpdate:modelValue": de,
-			"onUpdate:activeValue": t[0] ||= (e) => L.value = e
+			"active-value": F.value,
+			"onUpdate:modelValue": ge,
+			"onUpdate:activeValue": t[0] ||= (e) => F.value = e
 		}, null, 8, [
 			"id",
 			"model-value",
@@ -261,8 +276,8 @@ var O = /*@__PURE__*/ y({
 			"invalid",
 			"empty-label",
 			"active-value"
-		])], 4)) : h("", !0)]))], 64));
+		])], 4)) : p("", !0)]))], 64));
 	}
 });
 //#endregion
-export { O as default };
+export { E as default };

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

@@ -24,9 +24,9 @@ export interface Props {
 }
 export type SComboboxTriggerApi = InteractiveElementApi<HTMLButtonElement>;
 declare const __VLS_export: import('vue').DefineComponent<Props, SComboboxTriggerApi, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    toggle: (event: KeyboardEvent | MouseEvent) => any;
+    toggle: (event: MouseEvent | KeyboardEvent) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onToggle?: ((event: KeyboardEvent | MouseEvent) => any) | undefined;
+    onToggle?: ((event: MouseEvent | KeyboardEvent) => any) | undefined;
 }>, {
     required: boolean;
     title: string;

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

@@ -7,6 +7,8 @@ export interface Props {
     trigger?: 'contextmenu' | 'click' | 'both';
     boundaryLayout?: 'block' | 'inline' | 'contents';
 }
+/** Original admitted pointer/keyboard event, emitted synchronously before interception or menu focus. preventDefault cancels opening. */
+export type SContextMenuBeforeOpenEvent = MouseEvent | KeyboardEvent;
 /**
  * ARIA-связь canonical trigger с принадлежащим ему context-menu layer.
  * ARIA relationship between the canonical trigger and its owned context-menu layer.
@@ -17,16 +19,25 @@ export interface SContextMenuTriggerProps {
     readonly 'aria-controls'?: string;
     readonly onKeydown?: (event: KeyboardEvent) => void;
 }
+/** Native textbox relationship and context-menu keys without button-only aria-expanded or arrow-key activation. */
+export interface SContextMenuTextInputTriggerProps {
+    readonly 'aria-haspopup'?: 'menu';
+    readonly 'aria-controls'?: string;
+    readonly onKeydown?: (event: KeyboardEvent) => void;
+}
 type __VLS_Slots = {
     /** Canonical interactive owner получает готовые ARIA props. / The canonical interactive owner receives complete ARIA props. */
     default?: (props: {
         triggerProps: SContextMenuTriggerProps;
+        textInputTriggerProps: SContextMenuTextInputTriggerProps;
     }) => VNodeChild;
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (entry: SMenuSelectableEntry, event: SMenuActivationEvent) => any;
+    "before-open": (event: SContextMenuBeforeOpenEvent) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((entry: SMenuSelectableEntry, event: SMenuActivationEvent) => any) | undefined;
+    "onBefore-open"?: ((event: SContextMenuBeforeOpenEvent) => any) | undefined;
 }>, {
     enabled: boolean;
     trigger: "contextmenu" | "click" | "both";

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

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