@pgcorp/ui-kit 0.13.0 → 0.15.0

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

@@ -1,15 +1,17 @@
 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 { useOverlayPortalTarget as te } from "../../../internal/overlayPortal.js";
+import { useFloatingPosition as a } from "../../../composables/useFloatingPosition.js";
+import { useUiKitLocale as ne } from "../../../composables/useUiKitLocale.js";
+import { useOwnedAttrs as re } 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 ie from "./SInputText.vue.js";
+import { Fragment as ae, Teleport as oe, computed as f, createBlock as se, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as ce, nextTick as v, normalizeStyle as le, onBeforeUnmount as ue, openBlock as y, shallowRef as b, unref as x, useId as S, watch as C, watchEffect as de } from "vue";
 //#region src/components/shared/controls/SCombobox.vue?vue&type=script&setup=true&lang.ts
-var O = /*@__PURE__*/ y({
+var w = /*@__PURE__*/ _({
 	inheritAttrs: !1,
 	__name: "SCombobox",
 	props: {
@@ -46,46 +48,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: w }) {
+		let T = _, { t: E } = ne(), D = w, O = re({
 			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, [
+		}), k = S(), A = b(null), j = b(null), M = b(!1), N = t(), P = te(), F = b(null), I = b("var(--s-layer-root-floating)"), L = null, R = 0, z = f(() => T.id === void 0 ? `s-combobox-${k}` : ee("SCombobox", "id", T.id)), B = f(() => `${z.value}-listbox`), V = f(() => {
+			if (typeof T.search != "string") throw TypeError("SCombobox: search must be a string");
+			return T.search;
+		}), H = f(() => ({
+			filterMode: r("SCombobox", "filterMode", T.filterMode, ["local", "manual"]),
+			placeholder: i("SCombobox", "placeholder", T.placeholder ?? E("forms.searchPlaceholder")),
+			disabled: n("SCombobox", "disabled", T.disabled),
+			readonly: n("SCombobox", "readonly", T.readonly),
+			required: n("SCombobox", "required", T.required),
+			invalid: n("SCombobox", "invalid", T.invalid),
+			emptyLabel: i("SCombobox", "emptyLabel", T.emptyLabel ?? E("forms.noOptions")),
+			size: r("SCombobox", "size", T.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", T.allowCustomValue),
+			label: l("SCombobox", "label", T.label),
+			helpText: l("SCombobox", "helpText", T.helpText),
+			errorMessage: l("SCombobox", "errorMessage", T.errorMessage)
+		})), U = f(() => {
+			let e = c("SCombobox", T.options);
+			return H.value.allowCustomValue && typeof T.modelValue == "string" ? o("SCombobox", T.modelValue, "modelValue") : u("SCombobox", "single", T.modelValue, e), e;
 		});
-		function G(e) {
+		de(() => {
+			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 +99,88 @@ 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)), fe = f(() => {
+			if (T.modelValue === null) return null;
+			let e = o("SCombobox", T.modelValue, "modelValue");
+			return K.value.optionsByToken.has(e) ? T.modelValue : null;
+		}), pe = f(() => {
+			let e = O.bindings()["aria-label"];
+			return typeof e == "string" ? i("SCombobox", "aria-label", e) : H.value.label ?? H.value.placeholder;
+		}), me = f(() => {
+			if (!M.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());
+		C(V, () => {
+			$(), M.value && Q();
+		}, { flush: "sync" }), C(N, (e) => {
+			e || X("retire");
+		}, { flush: "sync" }), C(P, (e) => {
+			e === null && X("retire");
 		}, { flush: "sync" });
-		let { anchorRef: Y, panelRef: X, floatingStyle: se } = t({
-			active: I,
+		let { anchorRef: q, panelRef: J, floatingStyle: he } = a({
+			active: M,
 			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 ge() {
+			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 (T.modelValue !== null) {
+				let t = o("SCombobox", T.modelValue, "modelValue");
+				if (U.value.optionsByToken.get(t)?.option.label.trim() === e || typeof T.modelValue == "string" && T.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 Y() {
+			let e = ge();
+			return e !== null && (D("update:modelValue", e), D("update:search", String(e)), !0);
 		}
-		function le() {
-			let e = P.value;
+		function _e() {
+			let e = A.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 X(e) {
+			R += 1, M.value && ((e === "tab" || e === "outside") && Y(), M.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 Z() {
+			if (U.value, H.value.disabled || H.value.readonly || M.value || !N.value || P.value === null) return;
+			let t = _e(), n = ++R;
+			M.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) => X(e === "escape" ? "escape" : "outside"),
+				onRetire: () => X("retire")
+			}), I.value = L.zIndex, await v(), M.value && N.value && R === n && j.value?.initializeActive();
+		}
+		C(J, () => L?.refreshModality(), { flush: "sync" });
+		function Q() {
+			let e = R;
+			v(() => {
+				M.value && N.value && R === e && j.value?.initializeActive();
+			});
+		}
+		function $() {
+			j.value?.resetActive(), F.value = null;
 		}
-		function ue(e) {
-			j("update:search", e), L.value = null, I.value ? b(() => F.value?.initializeActive()) : $();
+		function ve(e) {
+			$(), D("update:search", e), M.value ? Q() : Z();
 		}
-		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 ye(e) {
+			if (s(e)) throw TypeError("SCombobox: selection update must be a single key or null");
+			if (u("SCombobox update", "single", e, U.value), D("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);
+				D("update:search", n.option.label);
 			}
-			Q("selection");
+			X("selection");
 		}
-		async function fe(e) {
+		async function be(e) {
 			let t = {
 				ArrowDown: "next",
 				ArrowUp: "previous",
@@ -168,53 +188,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(), M.value && j.value !== null) {
+					j.value.moveActive(t);
+					return;
+				}
+				if (await Z(), await v(), !M.value || !N.value || t === "next" || t === "previous") return;
+				j.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" && M.value) {
+				e.preventDefault(), F.value === null ? Y() && X("selection") : j.value?.selectActive();
 				return;
 			}
-			if (e.key === "Escape" && I.value) {
-				e.preventDefault(), Q("escape");
+			if (e.key === "Escape" && M.value) {
+				e.preventDefault(), X("escape");
 				return;
 			}
-			e.key === "Tab" && Q("tab");
+			e.key === "Tab" && X("tab");
 		}
-		return S(() => z?.unregister({ restoreFocus: !1 })), (e, t) => (C(), g(f, null, [_("div", {
+		return ue(() => X("retire")), (e, t) => (y(), m(ae, null, [h("div", {
 			ref_key: "anchorRef",
-			ref: Y,
+			ref: q,
 			class: "s-combobox-anchor"
-		}, [v(d, ie({
+		}, [g(ie, ce({
 			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: A
+		}, x(O).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": M.value,
+			"aria-controls": B.value,
+			"aria-activedescendant": me.value,
+			"onUpdate:modelValue": ve,
+			onFocus: Z,
+			onClick: Z,
+			onKeydown: be
 		}), null, 16, [
 			"id",
 			"model-value",
@@ -230,27 +252,30 @@ var O = /*@__PURE__*/ y({
 			"aria-expanded",
 			"aria-controls",
 			"aria-activedescendant"
-		])], 512), (C(), m(re, { to: "body" }, [I.value ? (C(), g("div", {
+		])], 512), x(P) ? (y(), se(oe, {
+			key: 0,
+			to: x(P)
+		}, [M.value && x(N) ? (y(), m("div", {
 			key: 0,
 			ref_key: "panelRef",
-			ref: X,
-			style: x(T(se)),
+			ref: J,
+			style: le(x(he)),
 			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: j,
+			id: B.value,
+			"model-value": fe.value,
+			options: G.value,
+			label: pe.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": ye,
+			"onUpdate:activeValue": t[0] ||= (e) => F.value = e
 		}, null, 8, [
 			"id",
 			"model-value",
@@ -261,8 +286,8 @@ var O = /*@__PURE__*/ y({
 			"invalid",
 			"empty-label",
 			"active-value"
-		])], 4)) : h("", !0)]))], 64));
+		])], 4)) : p("", !0)], 8, ["to"])) : p("", !0)], 64));
 	}
 });
 //#endregion
-export { O as default };
+export { w 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_43b6e378_scoped_43b6e378_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-43b6e378"]]);
 //#endregion
 export { n as default };