@shtabapp/ui-kit 1.57.0 → 1.59.0

package/dist/SDropdown-LOTCtlCX.js

@@ -0,0 +1,356 @@
+import { i as e, t } from "./useFloatingOverlay-QcumEYEq.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onScopeDispose as _, openBlock as v, ref as y, renderSlot as b, shallowRef as x, toDisplayString as S, toValue as C, unref as w, useId as T, useModel as E, useSlots as D, useTemplateRef as O, watch as k, withCtx as A, withModifiers as j } from "vue";
+import { useUiKitI18n as M } from "@shtabapp/ui-kit-primitives";
+import { useElementHover as N, useEventListener as P, useMediaQuery as F, useScrollLock as I } from "@vueuse/core";
+//#region src/components/SDropdown/SDropdown.types.ts
+var L = 768, R = (e) => {
+	let t = y(e.value), n = y(e.value);
+	return k(e, (e) => {
+		if (e) {
+			t.value = !0, n.value = !0;
+			return;
+		}
+		t.value = !1;
+	}, { flush: "sync" }), {
+		isPanelShown: t,
+		isPanelActive: n,
+		handlePanelAfterLeave: () => {
+			e.value || (n.value = !1);
+		}
+	};
+}, ee = (e, t) => {
+	let n = F(a(() => `(max-width: ${(C(t) || 768) - .02}px)`));
+	return a(() => C(e) && n.value);
+}, te = (e) => {
+	if (!e) return null;
+	let t = e.getBoundingClientRect();
+	if (t.width > 0 || t.height > 0) return e;
+	let n = e.firstElementChild;
+	return n instanceof HTMLElement ? n : e;
+}, z = {
+	OVERDRAG_LIMIT: 50,
+	CLOSE_DISTANCE_RATIO: .3,
+	CLOSE_DISTANCE_LIMIT: 140,
+	CLOSE_VELOCITY: .5,
+	SETTLE_TIMEOUT: 400,
+	INTERACTIVE_SELECTOR: "button, a[href], input, select, textarea, [role=\"button\"], [contenteditable=\"true\"]"
+}, B = (e) => {
+	let t = x(0), n = x(!1), r = x(!1), i = null, o = 0, s = 0, c = 0, l = 0, u = 0, d, f = a(() => n.value || r.value), p = () => {
+		clearTimeout(d), d = void 0, r.value = !1;
+	}, m = () => {
+		r.value = !0, clearTimeout(d), d = setTimeout(p, z.SETTLE_TIMEOUT);
+	}, h = () => {
+		i = null, t.value = 0, n.value = !1, p();
+	}, g = () => C(e.popup)?.offsetHeight ?? 0, v = () => {
+		let e = l - o;
+		if (e <= 0) return !1;
+		let t = u - c;
+		return (t > 0 ? (l - s) / t : 0) >= z.CLOSE_VELOCITY ? !0 : e >= Math.min(g() * z.CLOSE_DISTANCE_RATIO, z.CLOSE_DISTANCE_LIMIT);
+	}, y = (e) => {
+		i === null && (e.pointerType === "mouse" && e.button !== 0 || e.target instanceof Element && e.target.closest(z.INTERACTIVE_SELECTOR) || (i = e.pointerId, o = e.clientY, l = e.clientY, s = e.clientY, u = e.timeStamp, c = e.timeStamp, p(), n.value = !0));
+	}, b = (e) => {
+		i === e.pointerId && (s = l, c = u, l = e.clientY, u = e.timeStamp, t.value = Math.max(e.clientY - o, -z.OVERDRAG_LIMIT));
+	}, S = (a) => {
+		if (i === a.pointerId) {
+			if (i = null, n.value = !1, v()) {
+				r.value = !0, t.value = g() + z.OVERDRAG_LIMIT, e.onClose();
+				return;
+			}
+			if (t.value === 0) {
+				p();
+				return;
+			}
+			m(), t.value = 0;
+		}
+	};
+	return P(() => C(e.handle), "pointerdown", y), P(window, "pointermove", b), P(window, "pointerup", S), P(window, "pointercancel", S), P(() => C(e.popup), "transitionend", (e) => {
+		e.propertyName !== "transform" || n.value || t.value !== 0 || p();
+	}), _(() => {
+		clearTimeout(d);
+	}), {
+		isActive: f,
+		popupStyles: a(() => {
+			if (f.value) return {
+				transform: `translate3d(0, ${t.value}px, 0)`,
+				transition: r.value ? "transform var(--s-ui-transition-duration-slow) var(--s-ui-transition-easing-standard)" : "none"
+			};
+		}),
+		reset: h
+	};
+}, V = ["aria-label"], H = { class: "s-ui-dropdown-sheet__side" }, U = { class: "s-ui-dropdown-sheet__title" }, W = { class: "s-ui-dropdown-sheet__side s-ui-dropdown-sheet__side--end" }, G = ["id"], K = /* @__PURE__ */ u({
+	__name: "SDropdownSheet",
+	props: {
+		open: { type: Boolean },
+		title: { default: "" },
+		dismissOnOverlayClick: {
+			type: Boolean,
+			default: !0
+		},
+		dismissOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		contentId: {}
+	},
+	emits: ["close"],
+	setup(e, { emit: t }) {
+		let n = t, { t: r } = M(), a = O("popupRef"), u = O("headerRef"), d = () => n("close"), { isActive: f, popupStyles: m, reset: _ } = B({
+			handle: u,
+			popup: a,
+			onClose: d
+		}), y = I(() => typeof document > "u" ? null : document.body), x = () => {
+			e.dismissOnOverlayClick && d();
+		}, C = (e) => {
+			f.value && e.stopPropagation();
+		}, T = () => _(), E = null, D = () => {
+			let e = document.activeElement;
+			E = e instanceof HTMLElement ? e : null;
+		}, N = async () => {
+			await p();
+			let e = a.value;
+			!e || e.contains(document.activeElement) || e.focus({ preventScroll: !0 });
+		}, F = () => {
+			let e = E, t = !!a.value?.contains(document.activeElement);
+			E = null, !(!t || !e?.isConnected) && e.focus({ preventScroll: !0 });
+		};
+		return k(() => e.open, (e) => {
+			if (y.value = e, e) {
+				D(), N();
+				return;
+			}
+			F();
+		}, { immediate: !0 }), P(window, "keydown", (t) => {
+			!e.open || !e.dismissOnEscape || t.key !== "Escape" || d();
+		}), g(() => {
+			y.value = !1;
+		}), (t, n) => (v(), o(i, {
+			name: "s-ui-dropdown-sheet",
+			onAfterLeave: T
+		}, {
+			default: A(() => [e.open ? (v(), c("div", {
+				key: 0,
+				class: "s-ui-dropdown-sheet",
+				onClick: x
+			}, [l("div", {
+				ref_key: "popupRef",
+				ref: a,
+				class: "s-ui-dropdown-sheet__popup",
+				style: h(w(m)),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": e.title || w(r)("dropdown.sheet"),
+				tabindex: "-1",
+				onClickCapture: C,
+				onClick: n[0] ||= j(() => {}, ["stop"])
+			}, [l("header", {
+				ref_key: "headerRef",
+				ref: u,
+				class: "s-ui-dropdown-sheet__header"
+			}, [
+				n[1] ||= l("span", {
+					class: "s-ui-dropdown-sheet__handle",
+					"aria-hidden": "true"
+				}, null, -1),
+				l("div", H, [b(t.$slots, "header-left")]),
+				l("div", U, S(e.title), 1),
+				l("div", W, [b(t.$slots, "header-right")])
+			], 512), l("div", {
+				id: e.contentId,
+				class: "s-ui-dropdown-sheet__content"
+			}, [b(t.$slots, "default")], 8, G)], 44, V)])) : s("", !0)]),
+			_: 3
+		}));
+	}
+}), q = ["id"], ne = ["data-placement"], re = { class: "s-ui-dropdown__content" }, J = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "SDropdown",
+	props: /*@__PURE__*/ d({
+		placement: { default: () => e.BOTTOM_START },
+		offset: { default: 8 },
+		flip: {
+			type: Boolean,
+			default: !0
+		},
+		shift: {
+			type: Boolean,
+			default: !1
+		},
+		matchReferenceWidth: {
+			type: Boolean,
+			default: !1
+		},
+		fitViewport: {
+			type: Boolean,
+			default: !1
+		},
+		surfaceClass: {},
+		teleportTo: {
+			type: [String, Boolean],
+			default: "body"
+		},
+		dismissOnClickOutside: {
+			type: Boolean,
+			default: !0
+		},
+		dismissOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		reference: { default: null },
+		contentId: {},
+		viewportPadding: { default: 8 },
+		arrow: {
+			type: Boolean,
+			default: !1
+		},
+		showOnHover: {
+			type: Boolean,
+			default: !1
+		},
+		hoverLeaveDelay: { default: 100 },
+		sheet: {
+			type: Boolean,
+			default: !0
+		},
+		sheetBreakpoint: { default: () => 768 },
+		sheetTitle: { default: "" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u, { expose: d }) {
+		let p = E(u, "modelValue"), g = ee(() => u.sheet, () => u.sheetBreakpoint), { isPanelShown: _, isPanelActive: y, handlePanelAfterLeave: x } = R(p), S = (e) => {
+			p.value = e;
+		}, C = () => S(!1), j = D(), M = O("triggerWrapperRef"), P = O("panelRef"), F = T(), I = T(), L = a(() => u.contentId ?? F), z = a(() => j.trigger ? te(M.value) : u.reference), B = a(() => u.teleportTo !== !1), V = a(() => u.teleportTo === !1 ? "body" : u.teleportTo), H = e.BOTTOM_START, U = () => {
+			u.disabled || S(!0);
+		}, W = () => {
+			u.disabled || (p.value = !p.value);
+		}, G = a(() => ({
+			id: I,
+			"aria-expanded": p.value,
+			"aria-haspopup": "dialog",
+			"aria-controls": L.value
+		})), { panelStyles: J, panelMaxHeight: Y, resolvedPlacement: X, arrowStyles: ie, isArrowOverflow: ae, isPositionReady: oe, updatePosition: se } = t({
+			open: () => y.value && !g.value,
+			onOpenChange: S,
+			reference: () => z.value,
+			panel: () => P.value,
+			placement: () => u.placement,
+			offset: () => u.offset,
+			flip: () => u.flip,
+			shift: () => u.shift,
+			matchReferenceWidth: () => u.matchReferenceWidth,
+			fitViewport: () => u.fitViewport,
+			dismissOnClickOutside: () => u.dismissOnClickOutside,
+			dismissOnEscape: () => u.dismissOnEscape,
+			viewportPadding: () => u.viewportPadding,
+			arrow: () => u.arrow
+		}), Z = a(() => u.showOnHover && !g.value), ce = a(() => Z.value ? z.value : null), le = a(() => Z.value ? P.value : null), Q = N(ce, { delayLeave: u.hoverLeaveDelay }), $ = N(le, { delayLeave: u.hoverLeaveDelay });
+		k([
+			Q,
+			$,
+			Z,
+			() => u.disabled
+		], () => {
+			if (Z.value) {
+				if (u.disabled) {
+					S(!1);
+					return;
+				}
+				S(Q.value || $.value);
+			}
+		});
+		let ue = a(() => !!Y.value), de = a(() => {
+			if (Y.value) return { maxHeight: `${Y.value}px` };
+		});
+		return k(() => u.disabled, (e) => {
+			e && p.value && (p.value = !1);
+		}), d({
+			updatePosition: se,
+			show: U,
+			close: C,
+			toggle: W
+		}), (e, t) => (v(), c(n, null, [w(j).trigger ? (v(), c("span", f({
+			key: 0,
+			ref_key: "triggerWrapperRef",
+			ref: M,
+			class: "s-ui-dropdown"
+		}, e.$attrs), [b(e.$slots, "trigger", {
+			open: p.value,
+			toggle: W,
+			close: C,
+			isSheet: w(g),
+			triggerProps: G.value
+		})], 16)) : s("", !0), (v(), o(r, {
+			to: V.value,
+			disabled: !B.value
+		}, [w(g) ? (v(), o(K, {
+			key: 0,
+			open: p.value,
+			title: u.sheetTitle,
+			"dismiss-on-overlay-click": u.dismissOnClickOutside,
+			"dismiss-on-escape": u.dismissOnEscape,
+			"content-id": L.value,
+			onClose: C
+		}, {
+			"header-left": A(() => [b(e.$slots, "sheet-header-left", { close: C })]),
+			"header-right": A(() => [b(e.$slots, "sheet-header-right", { close: C })]),
+			default: A(() => [b(e.$slots, "content", {
+				resolvedPlacement: w(H),
+				isSheet: !0,
+				close: C
+			})]),
+			_: 3
+		}, 8, [
+			"open",
+			"title",
+			"dismiss-on-overlay-click",
+			"dismiss-on-escape",
+			"content-id"
+		])) : (v(), o(i, {
+			key: 1,
+			name: "s-ui-dropdown",
+			onAfterLeave: w(x)
+		}, {
+			default: A(() => [w(_) ? (v(), c("div", {
+				key: 0,
+				id: L.value,
+				ref_key: "panelRef",
+				ref: P,
+				class: m(["s-ui-dropdown__panel", {
+					"s-ui-dropdown__panel--match-reference-width": u.matchReferenceWidth,
+					"s-ui-dropdown__panel--ready": w(oe)
+				}]),
+				style: h(w(J)),
+				role: "dialog"
+			}, [l("div", {
+				class: m(["s-ui-dropdown__surface", [u.surfaceClass, {
+					"s-ui-dropdown__surface--fit-viewport": ue.value,
+					"s-ui-dropdown__surface--with-arrow": u.arrow
+				}]]),
+				style: h(de.value),
+				"data-placement": w(X)
+			}, [u.arrow ? (v(), c("div", {
+				key: 0,
+				class: m(["s-ui-dropdown__arrow", { "s-ui-dropdown__arrow--overflow": w(ae) }]),
+				style: h(w(ie)),
+				"aria-hidden": "true"
+			}, [...t[0] ||= [l("span", { class: "s-ui-dropdown__arrow-outer" }, null, -1), l("span", { class: "s-ui-dropdown__arrow-inner" }, null, -1)]], 6)) : s("", !0), l("div", re, [b(e.$slots, "content", {
+				resolvedPlacement: w(X),
+				isSheet: !1,
+				close: C
+			})])], 14, ne)], 14, q)) : s("", !0)]),
+			_: 3
+		}, 8, ["onAfterLeave"]))], 8, ["to", "disabled"]))], 64));
+	}
+});
+//#endregion
+export { L as n, J as t };

package/dist/SInput-CRAegYKS.cjs

@@ -0,0 +1 @@
+const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./SButton-C-z_q5CG.cjs"),n=require("./SInlineMessage-gjkMiE-W.cjs"),r=require("./SLabel-DLKfepRW.cjs"),i=require("./useFieldMessages-2TaArixP.cjs");let a=require("vue"),o=require("@shtabapp/ui-kit-primitives");var s=function(e){return e.NONE=`none`,e.HORIZONTAL=`horizontal`,e.VERTICAL=`vertical`,e}({}),c=e=>()=>e.hasControlSlot()?e.hasValue()===!0:e.value().length>0,l=[`inert`,`aria-disabled`],u={key:0,class:`s-ui-input__prepend`},d={class:`s-ui-input__row`},f={key:0,class:`s-ui-input__prefix`},p=[`id`,`type`,`name`,`placeholder`,`disabled`,`readonly`,`autocomplete`],m={key:0,class:`s-ui-input__inline`},h={key:1,class:`s-ui-input__clear`},g={key:2,class:`s-ui-input__action`},_=16,v=(0,a.defineComponent)({inheritAttrs:!1,__name:`SInput`,props:(0,a.mergeModels)({label:{},labelProps:{},placeholder:{},helpMessages:{},errorMessages:{},bordered:{type:Boolean,default:!0},reserveMessageSpace:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},hasValue:{type:Boolean},focused:{type:Boolean,default:!1},iconLeft:{},iconRight:{},customize:{default:()=>s.NONE},name:{},type:{default:`text`},id:{},autocomplete:{},autofocus:{type:Boolean,default:!1}},{modelValue:{default:``},modelModifiers:{}}),emits:(0,a.mergeModels)([`clear`,`focus`,`blur`],[`update:modelValue`]),setup(v,{expose:y,emit:b}){let x=(0,a.useModel)(v,`modelValue`),{t:S}=(0,o.useUiKitI18n)(),C=b,{rootAttrs:w,controlAttrs:T,errorQa:E}=i.r(),D=(0,a.useSlots)(),O=(0,a.useId)(),k=(0,a.useTemplateRef)(`fieldElementRef`),A=(0,a.useTemplateRef)(`inputElementRef`),{isFocused:j,handleFocus:M,handleFocusOut:N}=i.n({isDisabled:()=>v.disabled,blurField:()=>Q(),emitFocus:e=>C(`focus`,e),emitBlur:e=>C(`blur`,e)}),{normalizedHelpMessages:P,normalizedErrorMessages:F,hasErrorMessages:I,hasHelpMessages:L}=i.t(()=>v.helpMessages,()=>v.errorMessages),R=(0,a.computed)(()=>v.id?v.id:O),z=(0,a.computed)(()=>!!(v.label||D.label)),B=(0,a.computed)(()=>!!(v.iconLeft||D.prefix)),V=(0,a.computed)(()=>v.customize===s.VERTICAL&&!!D.prepend),H=(0,a.computed)(()=>v.customize===s.HORIZONTAL&&!!D.prepend),U=()=>!v.clearable||v.disabled||v.readonly?!1:q(),W=(0,a.computed)(()=>{if(!j.value)return-1}),G=(0,a.computed)(()=>!!(v.iconRight||D.action)),K=(0,a.computed)(()=>!!D.message||L.value||I.value),q=c({hasControlSlot:()=>!!D.control,hasValue:()=>v.hasValue,value:()=>x.value}),J=(0,a.computed)(()=>({"s-ui-input--disabled":v.disabled,"s-ui-input--readonly":v.readonly})),Y=(0,a.computed)(()=>[{"s-ui-input__field--bordered":v.bordered,"s-ui-input__field--borderless":!v.bordered,"s-ui-input__field--disabled":v.disabled,"s-ui-input__field--readonly":v.readonly,"s-ui-input__field--error":I.value,"s-ui-input__field--vertical":v.customize===s.VERTICAL,"s-ui-input__field--focused":j.value||v.focused}]),X=e=>{let t=k.value;t&&t.querySelector(`.s-ui-input__control, .s-ui-select__control, .s-ui-select__search-input, [tabindex]:not([tabindex="-1"])`)?.focus(e)},Z=e=>{if(D.control){X(e);return}A.value?.focus(e)},Q=()=>{if(D.control){let e=document.activeElement;e instanceof HTMLElement&&k.value?.contains(e)&&e.blur();return}A.value?.blur()},$=e=>{v.disabled||v.readonly||e.target instanceof HTMLElement&&(e.target.closest(`.s-ui-input__prepend, .s-ui-input__inline, .s-ui-input__clear, .s-ui-input__action`)||Z())},ee=()=>{x.value=``,C(`clear`),Z()};return(0,a.onMounted)(()=>{v.autofocus&&(0,a.nextTick)(()=>{Z()})}),y({blur:Q,focus:Z,fieldElementRef:k,inputElementRef:A}),(i,c)=>((0,a.openBlock)(),(0,a.createElementBlock)(`div`,(0,a.mergeProps)({class:[`s-ui-input`,J.value]},(0,a.unref)(w)),[z.value?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.t),(0,a.mergeProps)({key:0},v.labelProps,{"html-for":R.value}),{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(i.$slots,`label`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(v.label),1)])]),_:3},16,[`html-for`])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,{ref_key:`fieldElementRef`,ref:k,class:(0,a.normalizeClass)([`s-ui-input__field`,[Y.value,{"s-ui-input__field--filled":(0,a.unref)(q)()}]]),inert:v.disabled?!0:void 0,"aria-disabled":v.disabled?!0:void 0,onClick:c[2]||=e=>$(e),onFocusout:c[3]||=(...e)=>(0,a.unref)(N)&&(0,a.unref)(N)(...e)},[V.value?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,u,[(0,a.renderSlot)(i.$slots,`prepend`,{disabled:v.disabled})])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,d,[B.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,f,[(0,a.renderSlot)(i.$slots,`prefix`,{disabled:v.disabled},()=>[v.iconLeft?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(o.SIcon),{key:0,name:v.iconLeft,size:_},null,8,[`name`])):(0,a.createCommentVNode)(``,!0)])])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,{class:(0,a.normalizeClass)([`s-ui-input__control-wrap`,{"s-ui-input__control-wrap--horizontal":v.customize===(0,a.unref)(s).HORIZONTAL}])},[(0,a.renderSlot)(i.$slots,`control`,{disabled:v.disabled},()=>[(0,a.withDirectives)((0,a.createElementVNode)(`input`,(0,a.mergeProps)({id:R.value,ref_key:`inputElementRef`,ref:A,"onUpdate:modelValue":c[0]||=e=>x.value=e,class:`s-ui-input__control s-ui-typography-body-14-regular`,type:v.type,name:v.name,placeholder:v.placeholder,disabled:v.disabled,readonly:v.readonly,autocomplete:v.autocomplete},(0,a.unref)(T),{onFocus:c[1]||=(...e)=>(0,a.unref)(M)&&(0,a.unref)(M)(...e)}),null,16,p),[[a.vModelDynamic,x.value]])]),H.value?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,m,[(0,a.renderSlot)(i.$slots,`prepend`,{disabled:v.disabled})])):(0,a.createCommentVNode)(``,!0)],2),U()?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,h,[(0,a.createVNode)((0,a.unref)(t.t),{appearance:(0,a.unref)(e.t).BARE,variant:(0,a.unref)(e.r).NEUTRAL,size:(0,a.unref)(e.n).SMALL,icon:`closeMini`,"aria-label":(0,a.unref)(S)(`input.clear`),tabindex:W.value,onClick:(0,a.withModifiers)(ee,[`stop`])},null,8,[`appearance`,`variant`,`size`,`aria-label`,`tabindex`])])):(0,a.createCommentVNode)(``,!0),G.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,g,[(0,a.renderSlot)(i.$slots,`action`,{disabled:v.disabled},()=>[v.iconRight?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(t.t),{key:0,appearance:(0,a.unref)(e.t).BARE,variant:(0,a.unref)(e.r).NEUTRAL,size:(0,a.unref)(e.n).SMALL,disabled:v.disabled,icon:v.iconRight,tabindex:-1},null,8,[`appearance`,`variant`,`size`,`disabled`,`icon`])):(0,a.createCommentVNode)(``,!0)])])):(0,a.createCommentVNode)(``,!0)])],42,l),K.value||v.reserveMessageSpace?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:1,class:(0,a.normalizeClass)([`s-ui-input__messages`,{"s-ui-input__messages--reserved":v.reserveMessageSpace}])},[(0,a.renderSlot)(i.$slots,`message`,{},()=>[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)((0,a.unref)(P),(e,t)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.t),{key:`help-${t}`,message:e},null,8,[`message`]))),128)),((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)((0,a.unref)(F),(e,t)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.t),{key:`error-${t}`,message:e,"data-qa":(0,a.unref)(E),"validation-status":(0,a.unref)(n.n).ERROR},null,8,[`message`,`data-qa`,`validation-status`]))),128))])],2)):(0,a.createCommentVNode)(``,!0)],16))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return v}});

package/dist/SInput-Csy2uch7.js

@@ -0,0 +1,224 @@
+import { n as e, r as t, t as n } from "./SButton.types-CpdHQtyx.js";
+import { t as r } from "./SButton-DnU_XZ1C.js";
+import { n as i, t as a } from "./SInlineMessage-Dirk5RwO.js";
+import { t as ee } from "./SLabel-FHHPlcKq.js";
+import { n as o, r as s, t as te } from "./useFieldMessages-C-GXaf_q.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeModels as _, mergeProps as v, nextTick as ne, normalizeClass as y, onMounted as b, openBlock as x, renderList as S, renderSlot as C, toDisplayString as re, unref as w, useId as ie, useModel as ae, useSlots as oe, useTemplateRef as T, vModelDynamic as se, withCtx as ce, withDirectives as le, withModifiers as ue } from "vue";
+import { SIcon as de, useUiKitI18n as fe } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SInput/SInput.types.ts
+var E = /* @__PURE__ */ function(e) {
+	return e.NONE = "none", e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e;
+}({}), D = (e) => () => e.hasControlSlot() ? e.hasValue() === !0 : e.value().length > 0, O = ["inert", "aria-disabled"], k = {
+	key: 0,
+	class: "s-ui-input__prepend"
+}, A = { class: "s-ui-input__row" }, j = {
+	key: 0,
+	class: "s-ui-input__prefix"
+}, M = [
+	"id",
+	"type",
+	"name",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"autocomplete"
+], N = {
+	key: 0,
+	class: "s-ui-input__inline"
+}, P = {
+	key: 1,
+	class: "s-ui-input__clear"
+}, F = {
+	key: 2,
+	class: "s-ui-input__action"
+}, I = 16, L = /* @__PURE__ */ g({
+	inheritAttrs: !1,
+	__name: "SInput",
+	props: /*@__PURE__*/ _({
+		label: {},
+		labelProps: {},
+		placeholder: {},
+		helpMessages: {},
+		errorMessages: {},
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		reserveMessageSpace: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		hasValue: { type: Boolean },
+		focused: {
+			type: Boolean,
+			default: !1
+		},
+		iconLeft: {},
+		iconRight: {},
+		customize: { default: () => E.NONE },
+		name: {},
+		type: { default: "text" },
+		id: {},
+		autocomplete: {},
+		autofocus: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _([
+		"clear",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(g, { expose: _, emit: L }) {
+		let R = ae(g, "modelValue"), { t: z } = fe(), B = L, { rootAttrs: V, controlAttrs: pe, errorQa: me } = s(), H = oe(), he = ie(), U = T("fieldElementRef"), W = T("inputElementRef"), { isFocused: G, handleFocus: K, handleFocusOut: q } = o({
+			isDisabled: () => g.disabled,
+			blurField: () => $(),
+			emitFocus: (e) => B("focus", e),
+			emitBlur: (e) => B("blur", e)
+		}), { normalizedHelpMessages: ge, normalizedErrorMessages: _e, hasErrorMessages: J, hasHelpMessages: ve } = te(() => g.helpMessages, () => g.errorMessages), Y = l(() => g.id ? g.id : he), ye = l(() => !!(g.label || H.label)), be = l(() => !!(g.iconLeft || H.prefix)), xe = l(() => g.customize === E.VERTICAL && !!H.prepend), Se = l(() => g.customize === E.HORIZONTAL && !!H.prepend), Ce = () => !g.clearable || g.disabled || g.readonly ? !1 : Z(), X = l(() => {
+			if (!G.value) return -1;
+		}), we = l(() => !!(g.iconRight || H.action)), Te = l(() => !!H.message || ve.value || J.value), Z = D({
+			hasControlSlot: () => !!H.control,
+			hasValue: () => g.hasValue,
+			value: () => R.value
+		}), Ee = l(() => ({
+			"s-ui-input--disabled": g.disabled,
+			"s-ui-input--readonly": g.readonly
+		})), De = l(() => [{
+			"s-ui-input__field--bordered": g.bordered,
+			"s-ui-input__field--borderless": !g.bordered,
+			"s-ui-input__field--disabled": g.disabled,
+			"s-ui-input__field--readonly": g.readonly,
+			"s-ui-input__field--error": J.value,
+			"s-ui-input__field--vertical": g.customize === E.VERTICAL,
+			"s-ui-input__field--focused": G.value || g.focused
+		}]), Oe = (e) => {
+			let t = U.value;
+			t && t.querySelector(".s-ui-input__control, .s-ui-select__control, .s-ui-select__search-input, [tabindex]:not([tabindex=\"-1\"])")?.focus(e);
+		}, Q = (e) => {
+			if (H.control) {
+				Oe(e);
+				return;
+			}
+			W.value?.focus(e);
+		}, $ = () => {
+			if (H.control) {
+				let e = document.activeElement;
+				e instanceof HTMLElement && U.value?.contains(e) && e.blur();
+				return;
+			}
+			W.value?.blur();
+		}, ke = (e) => {
+			g.disabled || g.readonly || e.target instanceof HTMLElement && (e.target.closest(".s-ui-input__prepend, .s-ui-input__inline, .s-ui-input__clear, .s-ui-input__action") || Q());
+		}, Ae = () => {
+			R.value = "", B("clear"), Q();
+		};
+		return b(() => {
+			g.autofocus && ne(() => {
+				Q();
+			});
+		}), _({
+			blur: $,
+			focus: Q,
+			fieldElementRef: U,
+			inputElementRef: W
+		}), (o, s) => (x(), f("div", v({ class: ["s-ui-input", Ee.value] }, w(V)), [
+			ye.value ? (x(), u(w(ee), v({ key: 0 }, g.labelProps, { "html-for": Y.value }), {
+				default: ce(() => [C(o.$slots, "label", {}, () => [m(re(g.label), 1)])]),
+				_: 3
+			}, 16, ["html-for"])) : d("", !0),
+			p("div", {
+				ref_key: "fieldElementRef",
+				ref: U,
+				class: y(["s-ui-input__field", [De.value, { "s-ui-input__field--filled": w(Z)() }]]),
+				inert: g.disabled ? !0 : void 0,
+				"aria-disabled": g.disabled ? !0 : void 0,
+				onClick: s[2] ||= (e) => ke(e),
+				onFocusout: s[3] ||= (...e) => w(q) && w(q)(...e)
+			}, [xe.value ? (x(), f("div", k, [C(o.$slots, "prepend", { disabled: g.disabled })])) : d("", !0), p("div", A, [
+				be.value ? (x(), f("span", j, [C(o.$slots, "prefix", { disabled: g.disabled }, () => [g.iconLeft ? (x(), u(w(de), {
+					key: 0,
+					name: g.iconLeft,
+					size: I
+				}, null, 8, ["name"])) : d("", !0)])])) : d("", !0),
+				p("div", { class: y(["s-ui-input__control-wrap", { "s-ui-input__control-wrap--horizontal": g.customize === w(E).HORIZONTAL }]) }, [C(o.$slots, "control", { disabled: g.disabled }, () => [le(p("input", v({
+					id: Y.value,
+					ref_key: "inputElementRef",
+					ref: W,
+					"onUpdate:modelValue": s[0] ||= (e) => R.value = e,
+					class: "s-ui-input__control s-ui-typography-body-14-regular",
+					type: g.type,
+					name: g.name,
+					placeholder: g.placeholder,
+					disabled: g.disabled,
+					readonly: g.readonly,
+					autocomplete: g.autocomplete
+				}, w(pe), { onFocus: s[1] ||= (...e) => w(K) && w(K)(...e) }), null, 16, M), [[se, R.value]])]), Se.value ? (x(), f("div", N, [C(o.$slots, "prepend", { disabled: g.disabled })])) : d("", !0)], 2),
+				Ce() ? (x(), f("span", P, [h(w(r), {
+					appearance: w(n).BARE,
+					variant: w(t).NEUTRAL,
+					size: w(e).SMALL,
+					icon: "closeMini",
+					"aria-label": w(z)("input.clear"),
+					tabindex: X.value,
+					onClick: ue(Ae, ["stop"])
+				}, null, 8, [
+					"appearance",
+					"variant",
+					"size",
+					"aria-label",
+					"tabindex"
+				])])) : d("", !0),
+				we.value ? (x(), f("span", F, [C(o.$slots, "action", { disabled: g.disabled }, () => [g.iconRight ? (x(), u(w(r), {
+					key: 0,
+					appearance: w(n).BARE,
+					variant: w(t).NEUTRAL,
+					size: w(e).SMALL,
+					disabled: g.disabled,
+					icon: g.iconRight,
+					tabindex: -1
+				}, null, 8, [
+					"appearance",
+					"variant",
+					"size",
+					"disabled",
+					"icon"
+				])) : d("", !0)])])) : d("", !0)
+			])], 42, O),
+			Te.value || g.reserveMessageSpace ? (x(), f("div", {
+				key: 1,
+				class: y(["s-ui-input__messages", { "s-ui-input__messages--reserved": g.reserveMessageSpace }])
+			}, [C(o.$slots, "message", {}, () => [(x(!0), f(c, null, S(w(ge), (e, t) => (x(), u(w(a), {
+				key: `help-${t}`,
+				message: e
+			}, null, 8, ["message"]))), 128)), (x(!0), f(c, null, S(w(_e), (e, t) => (x(), u(w(a), {
+				key: `error-${t}`,
+				message: e,
+				"data-qa": w(me),
+				"validation-status": w(i).ERROR
+			}, null, 8, [
+				"message",
+				"data-qa",
+				"validation-status"
+			]))), 128))])], 2)) : d("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { E as n, L as t };

package/dist/{SSelect-8RPurgr-.js → SSelect-fLtErA7p.js}

@@ -1,8 +1,8 @@
 import { n as e, r as t, t as n } from "./SButton.types-CpdHQtyx.js";
 import { t as r } from "./SButton-DnU_XZ1C.js";
 import { n as i } from "./useSelectionGroup-cKj38lEN.js";
-import { t as a } from "./SDropdown-CTQ5Qlez.js";
-import { n as o, t as s } from "./SInput-C-_R5pug.js";
+import { t as a } from "./SDropdown-LOTCtlCX.js";
+import { n as o, t as s } from "./SInput-Csy2uch7.js";
 import { i as c, n as l, r as u, t as d } from "./SList-DhjYsx7q.js";
 import { t as f } from "./SListItem-BYMbFs2A.js";
 import { computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as v, createTextVNode as ee, createVNode as y, defineComponent as b, guardReactiveProps as x, isRef as te, mergeModels as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeProps as E, normalizeStyle as D, openBlock as O, ref as ne, renderSlot as k, toDisplayString as A, toValue as j, unref as M, useId as re, useModel as ie, useSlots as ae, useTemplateRef as N, vModelText as oe, watch as P, withCtx as F, withDirectives as se, withModifiers as ce } from "vue";