@shtabapp/ui-kit 1.26.0

package/dist/SOverflowGroup-CVSon6Eg.js

@@ -0,0 +1,80 @@
+import { Comment as e, Fragment as t, Text as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, h as u, isVNode as d, normalizeClass as f, normalizeProps as p, openBlock as m, renderSlot as h, toValue as g, unref as _, useSlots as v } from "vue";
+//#region src/composables/useOverflowGroup.ts
+var y = (e, t) => !t || !Number.isFinite(t) || t >= e ? e : Math.max(t, 0), b = ({ items: e, maxVisible: t }) => {
+	let n = r(() => {
+		let n = g(e), r = y(n.length, g(t));
+		return n.slice(0, r);
+	}), i = r(() => {
+		let t = g(e);
+		return Math.max(t.length - n.value.length, 0);
+	});
+	return {
+		visibleItems: n,
+		hiddenCount: i,
+		hasOverflow: r(() => i.value > 0),
+		overflowLabel: r(() => `+${i.value}`)
+	};
+}, x = new Set([
+	32,
+	9,
+	10,
+	13
+]), S = (e) => {
+	for (let t = 0; t < e.length; t += 1) if (!x.has(e.charCodeAt(t))) return !1;
+	return !0;
+}, C = (e) => {
+	if (!e) return [];
+	if (!Array.isArray(e)) return d(e) ? [e] : [];
+	let t = [];
+	for (let r of e) typeof r == "string" ? S(r) || t.push(u(n, r)) : d(r) && t.push(r);
+	return t;
+}, w = (e) => {
+	if (e.type !== n) return !1;
+	let t = e.children;
+	return typeof t == "string" && S(t);
+}, T = (n) => {
+	let r = [], i = (n) => {
+		for (let a of n) a && a.type !== e && (a.type === t ? i(C(a.children)) : w(a) || r.push(a));
+	};
+	return i(n), r;
+}, E = (e, n, r) => {
+	let i = [];
+	for (let t = 0; t < e.length; t += 1) {
+		let a = e[t];
+		d(a) && i.push(n(a, {
+			...r,
+			visibleCount: e.length,
+			visibleIndex: t
+		}));
+	}
+	return u(t, null, i);
+}, D = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "SOverflowGroup",
+	props: {
+		clusterClass: {},
+		mapVnode: { type: Function },
+		maxVisible: {}
+	},
+	setup(e) {
+		let t = v(), { visibleItems: n, hiddenCount: u, hasOverflow: d, overflowLabel: g } = b({
+			items: r(() => t.default ? T(t.default()) : []),
+			maxVisible: () => e.maxVisible
+		}), y = c({
+			name: "SOverflowGroupVnodeList",
+			setup() {
+				return () => E(n.value, (t, n) => e.mapVnode ? e.mapVnode(t, n) : t, {
+					hiddenCount: u.value,
+					overflowLabel: g.value
+				});
+			}
+		});
+		return (t, n) => (m(), a("div", p(l(t.$attrs)), [o("div", { class: f(e.clusterClass) }, [s(_(y))], 2), _(d) ? h(t.$slots, "overflow", {
+			key: 0,
+			hiddenCount: _(u),
+			overflowLabel: _(g)
+		}) : i("", !0)], 16));
+	}
+});
+//#endregion
+export { D as t };

package/dist/SOverflowGroup-DyVUzkNu.cjs

@@ -0,0 +1 @@
+let e=require("vue");var t=(e,t)=>!t||!Number.isFinite(t)||t>=e?e:Math.max(t,0),n=({items:n,maxVisible:r})=>{let i=(0,e.computed)(()=>{let i=(0,e.toValue)(n),a=t(i.length,(0,e.toValue)(r));return i.slice(0,a)}),a=(0,e.computed)(()=>{let t=(0,e.toValue)(n);return Math.max(t.length-i.value.length,0)});return{visibleItems:i,hiddenCount:a,hasOverflow:(0,e.computed)(()=>a.value>0),overflowLabel:(0,e.computed)(()=>`+${a.value}`)}},r=new Set([32,9,10,13]),i=e=>{for(let t=0;t<e.length;t+=1)if(!r.has(e.charCodeAt(t)))return!1;return!0},a=t=>{if(!t)return[];if(!Array.isArray(t))return(0,e.isVNode)(t)?[t]:[];let n=[];for(let r of t)typeof r==`string`?i(r)||n.push((0,e.h)(e.Text,r)):(0,e.isVNode)(r)&&n.push(r);return n},o=t=>{if(t.type!==e.Text)return!1;let n=t.children;return typeof n==`string`&&i(n)},s=t=>{let n=[],r=t=>{for(let i of t)i&&i.type!==e.Comment&&(i.type===e.Fragment?r(a(i.children)):o(i)||n.push(i))};return r(t),n},c=(t,n,r)=>{let i=[];for(let a=0;a<t.length;a+=1){let o=t[a];(0,e.isVNode)(o)&&i.push(n(o,{...r,visibleCount:t.length,visibleIndex:a}))}return(0,e.h)(e.Fragment,null,i)},l=(0,e.defineComponent)({inheritAttrs:!1,__name:`SOverflowGroup`,props:{clusterClass:{},mapVnode:{type:Function},maxVisible:{}},setup(t){let r=(0,e.useSlots)(),{visibleItems:i,hiddenCount:a,hasOverflow:o,overflowLabel:l}=n({items:(0,e.computed)(()=>r.default?s(r.default()):[]),maxVisible:()=>t.maxVisible}),u=(0,e.defineComponent)({name:`SOverflowGroupVnodeList`,setup(){return()=>c(i.value,(e,n)=>t.mapVnode?t.mapVnode(e,n):e,{hiddenCount:a.value,overflowLabel:l.value})}});return(n,r)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,(0,e.normalizeProps)((0,e.guardReactiveProps)(n.$attrs)),[(0,e.createElementVNode)(`div`,{class:(0,e.normalizeClass)(t.clusterClass)},[(0,e.createVNode)((0,e.unref)(u))],2),(0,e.unref)(o)?(0,e.renderSlot)(n.$slots,`overflow`,{key:0,hiddenCount:(0,e.unref)(a),overflowLabel:(0,e.unref)(l)}):(0,e.createCommentVNode)(``,!0)],16))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/dist/SRadio-Ca-1D4q6.cjs

@@ -0,0 +1 @@
+let e=require("vue");var t=function(e){return e.LEFT=`left`,e.RIGHT=`right`,e}({}),n=[`value`],r={key:0,class:`s-ui-radio__content`},i={key:0,class:`s-ui-radio__label s-ui-typography-label-14-medium`},a={key:1,class:`s-ui-radio__description s-ui-typography-body-12-regular`},o=(0,e.defineComponent)({inheritAttrs:!1,__name:`SRadio`,props:(0,e.mergeModels)({disabled:{type:Boolean,default:!1},labelPlacement:{default:()=>t.LEFT},name:{},value:{}},{modelValue:{},modelModifiers:{}}),emits:(0,e.mergeModels)([`change`],[`update:modelValue`]),setup(o,{emit:s}){let c=(0,e.useModel)(o,`modelValue`),l=s,u=(0,e.useAttrs)(),d=(0,e.useSlots)(),f=(0,e.computed)(()=>!!(d.default||d.description)),p=(0,e.computed)(()=>c.value===o.value),m=(0,e.computed)(()=>[{"s-ui-radio--checked":p.value,"s-ui-radio--disabled":o.disabled,"s-ui-radio--label-right":o.labelPlacement===t.RIGHT,"s-ui-radio--control-only":!f.value}]),h=(0,e.computed)(()=>({...u,disabled:o.disabled,name:o.name})),g=e=>{e.target instanceof HTMLInputElement&&e.target.checked&&l(`change`,o.value)};return(t,s)=>((0,e.openBlock)(),(0,e.createElementBlock)(`label`,{class:(0,e.normalizeClass)([`s-ui-radio`,m.value])},[(0,e.withDirectives)((0,e.createElementVNode)(`input`,(0,e.mergeProps)(h.value,{"onUpdate:modelValue":s[0]||=e=>c.value=e,type:`radio`,class:`s-ui-radio__input`,value:o.value,onChange:g}),null,16,n),[[e.vModelRadio,c.value]]),s[1]||=(0,e.createElementVNode)(`span`,{class:`s-ui-radio__control`},[(0,e.createElementVNode)(`span`,{class:`s-ui-radio__thumb`})],-1),f.value?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,r,[(0,e.unref)(d).default?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,i,[(0,e.renderSlot)(t.$slots,`default`)])):(0,e.createCommentVNode)(``,!0),(0,e.unref)(d).description?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,a,[(0,e.renderSlot)(t.$slots,`description`)])):(0,e.createCommentVNode)(``,!0)])):(0,e.createCommentVNode)(``,!0)],2))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/SRadio-Db_YLcne.js

@@ -0,0 +1,57 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, renderSlot as l, unref as u, useAttrs as d, useModel as f, useSlots as p, vModelRadio as m, withDirectives as h } from "vue";
+//#region src/components/SRadio/SRadio.types.ts
+var g = /* @__PURE__ */ function(e) {
+	return e.LEFT = "left", e.RIGHT = "right", e;
+}({}), _ = ["value"], v = {
+	key: 0,
+	class: "s-ui-radio__content"
+}, y = {
+	key: 0,
+	class: "s-ui-radio__label s-ui-typography-label-14-medium"
+}, b = {
+	key: 1,
+	class: "s-ui-radio__description s-ui-typography-body-12-regular"
+}, x = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "SRadio",
+	props: /*@__PURE__*/ a({
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		labelPlacement: { default: () => g.LEFT },
+		name: {},
+		value: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["change"], ["update:modelValue"]),
+	setup(i, { emit: a }) {
+		let x = f(i, "modelValue"), S = a, C = d(), w = p(), T = e(() => !!(w.default || w.description)), E = e(() => x.value === i.value), D = e(() => [{
+			"s-ui-radio--checked": E.value,
+			"s-ui-radio--disabled": i.disabled,
+			"s-ui-radio--label-right": i.labelPlacement === g.RIGHT,
+			"s-ui-radio--control-only": !T.value
+		}]), O = e(() => ({
+			...C,
+			disabled: i.disabled,
+			name: i.name
+		})), k = (e) => {
+			e.target instanceof HTMLInputElement && e.target.checked && S("change", i.value);
+		};
+		return (e, a) => (c(), n("label", { class: s(["s-ui-radio", D.value]) }, [
+			h(r("input", o(O.value, {
+				"onUpdate:modelValue": a[0] ||= (e) => x.value = e,
+				type: "radio",
+				class: "s-ui-radio__input",
+				value: i.value,
+				onChange: k
+			}), null, 16, _), [[m, x.value]]),
+			a[1] ||= r("span", { class: "s-ui-radio__control" }, [r("span", { class: "s-ui-radio__thumb" })], -1),
+			T.value ? (c(), n("span", v, [u(w).default ? (c(), n("span", y, [l(e.$slots, "default")])) : t("", !0), u(w).description ? (c(), n("span", b, [l(e.$slots, "description")])) : t("", !0)])) : t("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { g as n, x as t };

package/dist/SSegmentControl-CWCXiHF6.js

@@ -0,0 +1,212 @@
+import { n as e } from "./SButton.types-CpdHQtyx.js";
+import { i as t, n, o as r, r as i } from "./useSelectionGroup-cKj38lEN.js";
+import { n as a, t as o } from "./useSelectLink-DClG5hGA.js";
+import { n as s, r as c, t as l } from "./useLink-Zo9A_RCf.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, inject as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeStyle as S, openBlock as C, provide as w, ref as T, renderList as E, resolveDynamicComponent as D, toDisplayString as O, toValue as k, unref as A, useModel as j, useTemplateRef as M, watch as N, withCtx as P } from "vue";
+import { SIcon as F } from "@shtabapp/ui-kit-primitives";
+import { useResizeObserver as I } from "@vueuse/core";
+//#region src/components/SSegmentControl/utils/context.ts
+var L = Symbol("SSegmentControl"), R = {
+	key: 0,
+	class: "s-ui-segment-control__icon",
+	"aria-hidden": "true"
+}, z = /* @__PURE__ */ _({
+	__name: "SSegmentControlItem",
+	props: { item: {} },
+	setup(t) {
+		let n = v(L, null), r = {
+			[e.SMALL]: "s-ui-typography-label-12-medium",
+			[e.MEDIUM]: "s-ui-typography-label-14-medium",
+			[e.LARGE]: "s-ui-typography-label-16-medium"
+		}, i = {
+			[e.SMALL]: 16,
+			[e.MEDIUM]: 20,
+			[e.LARGE]: 24
+		}, u = d(() => n ? k(n.size) : e.MEDIUM), h = d(() => r[u.value]), _ = d(() => i[u.value]), y = M("itemRootRef"), S = l(() => t.item.link, () => t.item.exact, () => t.item.replace);
+		o({
+			isRouterLink: S.isRouterLink,
+			isActive: S.isActive,
+			group: () => n,
+			value: () => t.item.value
+		});
+		let w = d(() => !!(n && k(n.disabled)) || !!t.item.disabled), T = a({
+			group: () => n,
+			value: () => t.item.value,
+			el: y,
+			disabled: w
+		}), E = d(() => S.isRouterLink.value ? S.isActive.value : T.isActive.value), j = S.linkPresentation, N = d(() => {
+			let e = j.value;
+			return e.mode === "none" ? "button" : e.rootTag;
+		}), I = d(() => N.value === "button"), z = d(() => {
+			if (n) return k(n.name);
+		}), B = d(() => ({
+			"s-ui-segment-control__item--selected": E.value,
+			"s-ui-segment-control__item--icon-only": !!t.item.iconOnly,
+			"s-ui-segment-control__item--link": c(t.item.link)
+		})), V = d(() => ({
+			...s(j.value, { replace: t.item.replace }),
+			disabled: I.value && w.value ? !0 : void 0,
+			"aria-disabled": !I.value && w.value ? !0 : void 0
+		})), H = d(() => w.value ? -1 : T.tabIndex.value ?? -1), U = (e) => {
+			if (!w.value) {
+				if (S.isRouterLink.value && (e.key === "Enter" || e.key === " " || e.key === "Spacebar")) {
+					e.preventDefault(), S.navigate();
+					return;
+				}
+				T.handleKeydown(e);
+			}
+		}, W = (e) => {
+			if (w.value) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			S.isRouterLink.value || T.handleClick();
+		};
+		return (e, n) => (C(), f(D(N.value), b({
+			ref_key: "itemRootRef",
+			ref: y,
+			role: "radio",
+			class: ["s-ui-segment-control__item", B.value],
+			type: I.value ? "button" : void 0
+		}, V.value, {
+			"aria-checked": E.value ? "true" : "false",
+			tabindex: H.value,
+			name: I.value ? z.value : void 0,
+			onClick: W,
+			onKeydown: U
+		}), {
+			default: P(() => [t.item.icon ? (C(), m("span", R, [g(A(F), {
+				name: t.item.icon,
+				size: _.value
+			}, null, 8, ["name", "size"])])) : p("", !0), t.item.label && !t.item.iconOnly ? (C(), m("span", {
+				key: 1,
+				class: x(["s-ui-segment-control__label", h.value])
+			}, O(t.item.label), 3)) : p("", !0)]),
+			_: 1
+		}, 16, [
+			"class",
+			"type",
+			"aria-checked",
+			"tabindex",
+			"name"
+		]));
+	}
+}), B = ".s-ui-segment-control__item", V = () => ({
+	offsetX: 0,
+	offsetY: 0,
+	width: 0,
+	height: 0
+}), H = ({ trackEl: e, activeIndex: t, itemCount: n }) => {
+	let r = T(V()), i = () => {
+		let n = k(e), i = k(t);
+		if (!n || i < 0) {
+			r.value = V();
+			return;
+		}
+		let a = n.querySelectorAll(B).item(i);
+		if (!(a instanceof HTMLElement)) {
+			r.value = V();
+			return;
+		}
+		let o = n.getBoundingClientRect(), s = a.getBoundingClientRect();
+		r.value = {
+			offsetX: s.left - o.left,
+			offsetY: s.top - o.top,
+			width: s.width,
+			height: s.height
+		};
+	};
+	return I(e, () => {
+		i();
+	}), N(() => [k(t), k(n)], () => {
+		i();
+	}, { immediate: !0 }), {
+		indicatorStyle: d(() => {
+			let { offsetX: e, offsetY: t, width: n, height: i } = r.value;
+			return !n || !i ? { opacity: "0" } : {
+				opacity: "1",
+				left: `${e}px`,
+				top: `${t}px`,
+				width: `${n}px`,
+				height: `${i}px`
+			};
+		}),
+		updateMetrics: i
+	};
+}, U = ["aria-disabled"], W = /* @__PURE__ */ _({
+	__name: "SSegmentControl",
+	props: /*@__PURE__*/ y({
+		items: {},
+		size: { default: () => e.MEDIUM },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		mandatory: {
+			type: Boolean,
+			default: !0
+		},
+		name: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ y(["change"], ["update:modelValue"]),
+	setup(e, { emit: a }) {
+		let o = j(e, "modelValue"), s = a, c = M("trackRef"), l = r({
+			modelValue: () => o.value,
+			onUpdateModelValue: (e) => {
+				t(e) && (o.value = e, s("change", e));
+			},
+			mode: n.SINGLE,
+			mandatory: () => e.mandatory,
+			orientation: i.HORIZONTAL,
+			loop: !0
+		});
+		w(L, {
+			mode: () => n.SINGLE,
+			isSelected: l.isSelected,
+			selectItem: l.select,
+			registerItem: l.registerItem,
+			getItemTabIndex: l.getItemTabIndex,
+			getGroupTabIndex: l.getGroupTabIndex,
+			handleItemKeydown: l.handleItemKeydown,
+			disabled: () => e.disabled,
+			name: () => e.name,
+			size: () => e.size
+		});
+		let { indicatorStyle: p } = H({
+			trackEl: () => c.value,
+			activeIndex: d(() => {
+				let t = e.items.findIndex((e) => l.isSelected(e.value));
+				return t >= 0 ? t : 0;
+			}),
+			itemCount: () => e.items.length
+		}), g = d(() => ({
+			[`s-ui-segment-control--size-${e.size}`]: !0,
+			"s-ui-segment-control--disabled": e.disabled
+		})), _ = (e, t) => `${String(e.value)}-${t}`, v = () => {
+			if (o.value !== void 0 && o.value !== null) return;
+			let t = e.items.find((e) => !e.disabled);
+			t && (o.value = t.value);
+		};
+		return N(() => e.items, () => {
+			v();
+		}, { immediate: !0 }), (t, n) => (C(), m("div", b({
+			ref_key: "trackRef",
+			ref: c,
+			class: ["s-ui-segment-control", g.value],
+			role: "radiogroup",
+			"aria-disabled": e.disabled || void 0
+		}, t.$attrs), [h("span", {
+			class: "s-ui-segment-control__indicator",
+			style: S(A(p)),
+			"aria-hidden": "true"
+		}, null, 4), (C(!0), m(u, null, E(e.items, (e, t) => (C(), f(z, {
+			key: _(e, t),
+			item: e
+		}, null, 8, ["item"]))), 128))], 16, U));
+	}
+});
+//#endregion
+export { W as t };

package/dist/SSegmentControl-DIoA__FA.cjs

@@ -0,0 +1 @@
+const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./useSelectionGroup-TaektE-I.cjs"),n=require("./useSelectLink-DDdMmsJB.cjs"),r=require("./useLink-CvN7IK0Z.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@vueuse/core");var s=Symbol(`SSegmentControl`),c={key:0,class:`s-ui-segment-control__icon`,"aria-hidden":`true`},l=(0,i.defineComponent)({__name:`SSegmentControlItem`,props:{item:{}},setup(t){let o=(0,i.inject)(s,null),l={[e.n.SMALL]:`s-ui-typography-label-12-medium`,[e.n.MEDIUM]:`s-ui-typography-label-14-medium`,[e.n.LARGE]:`s-ui-typography-label-16-medium`},u={[e.n.SMALL]:16,[e.n.MEDIUM]:20,[e.n.LARGE]:24},d=(0,i.computed)(()=>o?(0,i.toValue)(o.size):e.n.MEDIUM),f=(0,i.computed)(()=>l[d.value]),p=(0,i.computed)(()=>u[d.value]),m=(0,i.useTemplateRef)(`itemRootRef`),h=r.t(()=>t.item.link,()=>t.item.exact,()=>t.item.replace);n.t({isRouterLink:h.isRouterLink,isActive:h.isActive,group:()=>o,value:()=>t.item.value});let g=(0,i.computed)(()=>!!(o&&(0,i.toValue)(o.disabled))||!!t.item.disabled),_=n.n({group:()=>o,value:()=>t.item.value,el:m,disabled:g}),v=(0,i.computed)(()=>h.isRouterLink.value?h.isActive.value:_.isActive.value),y=h.linkPresentation,b=(0,i.computed)(()=>{let e=y.value;return e.mode===`none`?`button`:e.rootTag}),x=(0,i.computed)(()=>b.value===`button`),S=(0,i.computed)(()=>{if(o)return(0,i.toValue)(o.name)}),C=(0,i.computed)(()=>({"s-ui-segment-control__item--selected":v.value,"s-ui-segment-control__item--icon-only":!!t.item.iconOnly,"s-ui-segment-control__item--link":r.r(t.item.link)})),w=(0,i.computed)(()=>({...r.n(y.value,{replace:t.item.replace}),disabled:x.value&&g.value?!0:void 0,"aria-disabled":!x.value&&g.value?!0:void 0})),T=(0,i.computed)(()=>g.value?-1:_.tabIndex.value??-1),E=e=>{if(!g.value){if(h.isRouterLink.value&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),h.navigate();return}_.handleKeydown(e)}},D=e=>{if(g.value){e.preventDefault(),e.stopPropagation();return}h.isRouterLink.value||_.handleClick()};return(e,n)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(b.value),(0,i.mergeProps)({ref_key:`itemRootRef`,ref:m,role:`radio`,class:[`s-ui-segment-control__item`,C.value],type:x.value?`button`:void 0},w.value,{"aria-checked":v.value?`true`:`false`,tabindex:T.value,name:x.value?S.value:void 0,onClick:D,onKeydown:E}),{default:(0,i.withCtx)(()=>[t.item.icon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c,[(0,i.createVNode)((0,i.unref)(a.SIcon),{name:t.item.icon,size:p.value},null,8,[`name`,`size`])])):(0,i.createCommentVNode)(``,!0),t.item.label&&!t.item.iconOnly?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`s-ui-segment-control__label`,f.value])},(0,i.toDisplayString)(t.item.label),3)):(0,i.createCommentVNode)(``,!0)]),_:1},16,[`class`,`type`,`aria-checked`,`tabindex`,`name`]))}}),u=`.s-ui-segment-control__item`,d=()=>({offsetX:0,offsetY:0,width:0,height:0}),f=({trackEl:e,activeIndex:t,itemCount:n})=>{let r=(0,i.ref)(d()),a=()=>{let n=(0,i.toValue)(e),a=(0,i.toValue)(t);if(!n||a<0){r.value=d();return}let o=n.querySelectorAll(u).item(a);if(!(o instanceof HTMLElement)){r.value=d();return}let s=n.getBoundingClientRect(),c=o.getBoundingClientRect();r.value={offsetX:c.left-s.left,offsetY:c.top-s.top,width:c.width,height:c.height}};return(0,o.useResizeObserver)(e,()=>{a()}),(0,i.watch)(()=>[(0,i.toValue)(t),(0,i.toValue)(n)],()=>{a()},{immediate:!0}),{indicatorStyle:(0,i.computed)(()=>{let{offsetX:e,offsetY:t,width:n,height:i}=r.value;return!n||!i?{opacity:`0`}:{opacity:`1`,left:`${e}px`,top:`${t}px`,width:`${n}px`,height:`${i}px`}}),updateMetrics:a}},p=[`aria-disabled`],m=(0,i.defineComponent)({__name:`SSegmentControl`,props:(0,i.mergeModels)({items:{},size:{default:()=>e.n.MEDIUM},disabled:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!0},name:{}},{modelValue:{},modelModifiers:{}}),emits:(0,i.mergeModels)([`change`],[`update:modelValue`]),setup(e,{emit:n}){let r=(0,i.useModel)(e,`modelValue`),a=n,o=(0,i.useTemplateRef)(`trackRef`),c=t.o({modelValue:()=>r.value,onUpdateModelValue:e=>{t.i(e)&&(r.value=e,a(`change`,e))},mode:t.n.SINGLE,mandatory:()=>e.mandatory,orientation:t.r.HORIZONTAL,loop:!0});(0,i.provide)(s,{mode:()=>t.n.SINGLE,isSelected:c.isSelected,selectItem:c.select,registerItem:c.registerItem,getItemTabIndex:c.getItemTabIndex,getGroupTabIndex:c.getGroupTabIndex,handleItemKeydown:c.handleItemKeydown,disabled:()=>e.disabled,name:()=>e.name,size:()=>e.size});let{indicatorStyle:u}=f({trackEl:()=>o.value,activeIndex:(0,i.computed)(()=>{let t=e.items.findIndex(e=>c.isSelected(e.value));return t>=0?t:0}),itemCount:()=>e.items.length}),d=(0,i.computed)(()=>({[`s-ui-segment-control--size-${e.size}`]:!0,"s-ui-segment-control--disabled":e.disabled})),m=(e,t)=>`${String(e.value)}-${t}`,h=()=>{if(r.value!==void 0&&r.value!==null)return;let t=e.items.find(e=>!e.disabled);t&&(r.value=t.value)};return(0,i.watch)(()=>e.items,()=>{h()},{immediate:!0}),(t,n)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({ref_key:`trackRef`,ref:o,class:[`s-ui-segment-control`,d.value],role:`radiogroup`,"aria-disabled":e.disabled||void 0},t.$attrs),[(0,i.createElementVNode)(`span`,{class:`s-ui-segment-control__indicator`,style:(0,i.normalizeStyle)((0,i.unref)(u)),"aria-hidden":`true`},null,4),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(e.items,(e,t)=>((0,i.openBlock)(),(0,i.createBlock)(l,{key:m(e,t),item:e},null,8,[`item`]))),128))],16,p))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});