@shtabapp/ui-kit 1.83.0 → 1.85.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/{SColorPicker-BMpT38eb.js → SColorPicker-BfJD4dt_.js} +1 -1
  3. package/dist/{SColorPicker-BJjZR52T.cjs → SColorPicker-NqSNxcwH.cjs} +1 -1
  4. package/dist/SList-CmMkLkdG.cjs +1 -0
  5. package/dist/{SList-WUROy6L6.js → SList-T_fgzdb3.js} +8 -2
  6. package/dist/SListItem-CQKZw5Uj.js +246 -0
  7. package/dist/SListItem-CrAnC2MG.cjs +1 -0
  8. package/dist/{SSegmentControl-Bjech2v4.js → SSegmentControl-BQ8fg3m-.js} +18 -14
  9. package/dist/SSegmentControl-jPA19SVO.cjs +1 -0
  10. package/dist/{SSelect-BG4Wh8N9.cjs → SSelect-BSbEFqAB.cjs} +1 -1
  11. package/dist/{SSelect-CGeBR5qb.js → SSelect-DM4-PF5I.js} +2 -2
  12. package/dist/{STable-wQ3Mgc-8.js → STable-BnS7Ijfz.js} +1 -1
  13. package/dist/{STable-CDGD1gwW.cjs → STable-CfdGC7jb.cjs} +1 -1
  14. package/dist/{STextarea-BDyy7Ku5.js → STextarea-CCnFvaU3.js} +1 -1
  15. package/dist/{STextarea-C4qDIp2k.cjs → STextarea-DxjrKM9g.cjs} +1 -1
  16. package/dist/components/SList/SList.types.d.ts +5 -0
  17. package/dist/components/SList/SList.types.d.ts.map +1 -1
  18. package/dist/components/SList/SList.vue.d.ts.map +1 -1
  19. package/dist/components/SList/utils/context.d.ts +2 -0
  20. package/dist/components/SList/utils/context.d.ts.map +1 -1
  21. package/dist/components/SListItem/SListItem.types.d.ts +7 -0
  22. package/dist/components/SListItem/SListItem.types.d.ts.map +1 -1
  23. package/dist/components/SListItem/SListItem.vue.d.ts.map +1 -1
  24. package/dist/components/SSegmentControl/SSegmentControl.types.d.ts +7 -0
  25. package/dist/components/SSegmentControl/SSegmentControl.types.d.ts.map +1 -1
  26. package/dist/components/SSegmentControl/SSegmentControl.vue.d.ts.map +1 -1
  27. package/dist/components/SSegmentControl/index.d.ts +1 -1
  28. package/dist/components/SSegmentControl/index.d.ts.map +1 -1
  29. package/dist/entries/color-picker.cjs +1 -1
  30. package/dist/entries/color-picker.js +1 -1
  31. package/dist/entries/list-item.cjs +1 -1
  32. package/dist/entries/list-item.js +1 -1
  33. package/dist/entries/list.cjs +1 -1
  34. package/dist/entries/list.js +1 -1
  35. package/dist/entries/segment-control.cjs +1 -1
  36. package/dist/entries/segment-control.d.ts +1 -1
  37. package/dist/entries/segment-control.d.ts.map +1 -1
  38. package/dist/entries/segment-control.js +2 -2
  39. package/dist/entries/select.cjs +1 -1
  40. package/dist/entries/select.js +1 -1
  41. package/dist/entries/table.cjs +1 -1
  42. package/dist/entries/table.js +1 -1
  43. package/dist/entries/textarea.cjs +1 -1
  44. package/dist/entries/textarea.js +1 -1
  45. package/dist/index.cjs +1 -1
  46. package/dist/index.d.ts +1 -1
  47. package/dist/index.d.ts.map +1 -1
  48. package/dist/index.js +223 -223
  49. package/dist/uikit-components.css +1 -1
  50. package/package.json +2 -2
  51. package/dist/SList-C43FRAw1.cjs +0 -1
  52. package/dist/SListItem-BCC_BAUR.js +0 -236
  53. package/dist/SListItem-CzfRtRh7.cjs +0 -1
  54. package/dist/SSegmentControl-BaD9BK2s.cjs +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shtabapp/ui-kit",
3
- "version": "1.83.0",
3
+ "version": "1.85.0",
4
4
  "description": "Vue 3 component library by Shtab — 30+ typed components, design tokens, light/dark themes",
5
5
  "keywords": [
6
6
  "shtab",
@@ -279,7 +279,7 @@
279
279
  "dependencies": {
280
280
  "chart.js": "^4.5.0",
281
281
  "vue-i18n": "^9.14.5",
282
- "@shtabapp/ui-kit-primitives": "^1.38.0",
282
+ "@shtabapp/ui-kit-primitives": "^1.39.1",
283
283
  "@shtabapp/ui-kit-tokens": "^1.25.0"
284
284
  },
285
285
  "devDependencies": {
@@ -1 +0,0 @@
1
- const e=require("./useSelectionGroup-NJvi3hNo.cjs"),t=require("./useAriaAttrs-D748yeJ_.cjs"),n=require("./treeKeyboardNavigation-BOz2SVus.cjs"),r=require("./SListItem-CzfRtRh7.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@tanstack/vue-virtual");var s=function(e){return e.NONE=`none`,e.TWO_X_SMALL=`2x-small`,e.X_SMALL=`x-small`,e.SMALL=`small`,e.MEDIUM=`medium`,e.X_MEDIUM=`x-medium`,e.LARGE=`large`,e.X_LARGE=`x-large`,e.TWO_X_LARGE=`2x-large`,e}({}),c=s.TWO_X_SMALL,ee={[s.NONE]:`var(--s-ui-space-gap-none)`,[s.TWO_X_SMALL]:`var(--s-ui-space-gap-2x-small)`,[s.X_SMALL]:`var(--s-ui-space-gap-x-small)`,[s.SMALL]:`var(--s-ui-space-gap-small)`,[s.MEDIUM]:`var(--s-ui-space-gap-medium)`,[s.X_MEDIUM]:`var(--s-ui-space-gap-x-medium)`,[s.LARGE]:`var(--s-ui-space-gap-large)`,[s.X_LARGE]:`var(--s-ui-space-gap-x-large)`,[s.TWO_X_LARGE]:`var(--s-ui-space-gap-2x-large)`},l={[s.NONE]:0,[s.TWO_X_SMALL]:2,[s.X_SMALL]:4,[s.SMALL]:8,[s.MEDIUM]:12,[s.X_MEDIUM]:16,[s.LARGE]:20,[s.X_LARGE]:24,[s.TWO_X_LARGE]:32},te=(e,t)=>`s-ui-list-option-${e}-${t}`,u=(e,t)=>{let n=e[t];if(typeof n==`string`)return n},d=(e,t)=>{let n=e[t];return typeof n==`boolean`?n:!1},f=e=>e in a.ESIconName,p=(e,t)=>{let n=e[t];if(typeof n==`string`&&n.length>0&&f(n))return n},ne=[`role`,`aria-multiselectable`],m=[`role`,`aria-multiselectable`,`aria-activedescendant`,`tabindex`],h=[`data-index`],re={key:0,class:`s-ui-list__divider`,"aria-hidden":`true`},ie={key:0,class:`s-ui-list__divider`,"aria-hidden":`true`},ae={key:2,class:`s-ui-list__static`},g=(0,i.defineComponent)({inheritAttrs:!1,__name:`SList`,props:(0,i.mergeModels)({items:{},itemKey:{type:[String,Function],default:`id`},childrenKey:{default:`children`},titleKey:{default:`title`},subtitleKey:{default:`subtitle`},iconLeftKey:{default:`iconLeft`},disabledKey:{default:`disabled`},itemProps:{type:Function},selectionMode:{default:()=>e.n.NONE},mandatory:{type:Boolean,default:!1},virtual:{type:Boolean},gap:{default:()=>c},estimateItemSize:{default:36},overscan:{default:5},endReachedDistance:{default:0},canLoadMore:{type:Function},height:{default:320},maxHeight:{},revealRight:{type:Boolean,default:!1},expandOnClick:{type:Boolean,default:!1},selectedOnTop:{type:Boolean,default:!1},hasMoreChildrenKey:{},loadingMoreChildrenKeys:{default:()=>[]}},{modelValue:{},modelModifiers:{},selected:{},selectedModifiers:{},expanded:{default:()=>[]},expandedModifiers:{}}),emits:(0,i.mergeModels)([`endReached`,`loadMoreChildren`,`itemClick`],[`update:modelValue`,`update:selected`,`update:expanded`]),setup(s,{expose:c,emit:f}){let g=(0,i.useModel)(s,`modelValue`),_=(0,i.useModel)(s,`selected`),v=(0,i.useModel)(s,`expanded`),y=f,b=(0,i.useSlots)(),{getRootAttrs:x,getAriaAttrs:oe}=t.t(),se=(0,i.useId)(),S=(0,i.useTemplateRef)(`scrollElementRef`),C=(0,i.useTemplateRef)(`listRootElementRef`),w=(0,i.computed)(()=>l[s.gap]),T=(0,i.computed)(()=>s.items!==void 0),E=(0,i.computed)(()=>T.value?s.virtual===void 0?!0:s.virtual:!1),{flatRows:D,toggleExpanded:O}=n.s({items:()=>s.items??[],childrenKey:()=>s.childrenKey,itemKey:()=>s.itemKey,expanded:v,hasMoreChildrenKey:()=>s.hasMoreChildrenKey,selectedOnTop:()=>s.selectedOnTop,selectedKeys:()=>_.value}),{t:ce}=(0,a.useUiKitI18n)(),k=(0,i.computed)(()=>new Set(s.loadingMoreChildrenKeys)),A=(0,i.computed)(()=>ce(`list.loadMore`)),j=e=>e.loadMoreForKey?k.value.has(e.loadMoreForKey):!1,M=(e,t)=>{k.value.has(e)||y(`loadMoreChildren`,{key:e,item:t})},N=e=>{e.loadMoreForKey&&M(e.loadMoreForKey,e.item)},P=e=>({parentKey:e.loadMoreForKey??``,parentItem:e.item,depth:e.depth,loading:j(e),loadMore:()=>{N(e)}}),F=(0,o.useVirtualizer)((0,i.computed)(()=>({count:D.value.length,getScrollElement:()=>S.value,estimateSize:()=>s.estimateItemSize,gap:w.value,overscan:s.overscan}))),I=(0,i.computed)(()=>{if(T.value)return D.value.reduce((e,t)=>(t.divider||e.push(t.key),e),[])}),L=(0,i.computed)(()=>{let e=new Set;for(let t of D.value)!t.loadMoreForKey&&d(t.item,s.disabledKey)&&e.add(t.key);return e}),R=async e=>{if(!E.value)return;let t=D.value.findIndex(t=>t.key===e);t!==-1&&(F.value.scrollToIndex(t,{align:`auto`}),await new Promise(e=>{requestAnimationFrame(()=>{e()})}),await(0,i.nextTick)())},z=e=>te(se,e),B=e.o({modelValue:()=>_.value,onUpdateModelValue:e=>{_.value=e},mode:()=>s.selectionMode,mandatory:()=>s.mandatory,orientation:()=>e.r.VERTICAL,enableTabNavigation:!0,focusMode:()=>E.value?e.t.ACTIVE_DESCENDANT:e.t.DOM,orderedValues:I,isValueDisabled:e=>L.value.has(e),onBeforeFocusItem:async e=>{await R(e)},onFocusGroup:()=>{S.value?.focus()}}),V=(0,i.computed)(()=>T.value&&n.t(D.value)),H=()=>{if(E.value){S.value?.focus();return}C.value?.focus()},U=()=>{B.focusedValue.value=void 0,g.value=void 0;let e=document.activeElement;e instanceof HTMLElement&&e!==S.value&&e.blur(),H()},W=async e=>{E.value&&await R(e)},G=async e=>{if(U(),e.type===`expand`||e.type===`collapse`){O(e.rowKey),B.select(e.rowKey,!1),await W(e.rowKey);return}B.select(e.rowKey,!1),await W(e.rowKey)},le=async(e,t)=>{if(!V.value||e.key!==`ArrowUp`&&e.key!==`ArrowDown`)return!1;let r=n.n(t,_.value),i=n.i(e.key,r,D.value);return i?(e.preventDefault(),U(),B.select(i,!1),await W(i),!0):!1},ue=async(e,t)=>{if(!V.value||e.key!==`ArrowLeft`&&e.key!==`ArrowRight`)return!1;let r=n.n(t,_.value),i=n.r(e.key,r,D.value);return i?(e.preventDefault(),await G(i),!0):!1},K=()=>{if(g.value)return g.value;let e=n.n(``,_.value);if(e)return e;let t=I.value;if(t){for(let e of t)if(!L.value.has(e))return e}},de=()=>K(),fe=async e=>{let t=de();t&&await q(e,t)},pe=[`Enter`,` `,`Spacebar`],me=(e,t)=>{if(!pe.includes(e.key))return!1;let n=D.value.find(e=>e.key===t);return n?.loadMoreForKey?(e.preventDefault(),M(n.loadMoreForKey,n.item),!0):!1},q=async(e,t)=>{me(e,t)||await le(e,t)||await ue(e,t)||(await B.handleItemKeydown(e,t),g.value=B.focusedValue.value,!B.focusedValue.value&&!E.value&&H())},he=async e=>{let t=K();t&&await q(e,t)},ge=async e=>{if(E.value||e.target!==C.value)return;let t=K();t&&await q(e,t)},_e=async()=>{let e=K();if(!e){H();return}await B.focusItem(e,!1)};(0,i.provide)(r.i,{mode:()=>s.selectionMode,isSelected:B.isSelected,selectItem:B.toggle,registerItem:B.registerItem,getItemTabIndex:B.getItemTabIndex,getGroupTabIndex:B.getGroupTabIndex,handleItemKeydown:q,activeKey:()=>g.value,setActiveKey:e=>{g.value=e},isExpanded:e=>v.value.includes(e),toggleExpanded:e=>{if(T.value){O(e);return}let t=new Set(v.value);t.has(e)?t.delete(e):t.add(e),v.value=[...t]},revealRight:()=>s.revealRight,expandOnClick:()=>s.expandOnClick,getItemOptionId:e=>{if(E.value)return z(e)},usesActiveDescendantNavigation:()=>E.value,handlesTreeKeyboardNavigation:()=>T.value,itemRole:()=>V.value?r.n.TREEITEM:r.n.OPTION});let ve=(0,i.computed)(()=>F.value.getVirtualItems()),ye=(0,i.computed)(()=>ve.value.flatMap(e=>{let t=D.value[e.index];return t?[{virtualRow:e,flatRow:t}]:[]})),be=(0,i.computed)(()=>F.value.getTotalSize()),xe=(0,i.computed)(()=>({height:`${be.value}px`,position:`relative`,width:`100%`})),J=(0,i.computed)(()=>{let e={};return typeof s.height==`number`?e.height=`${s.height}px`:s.height&&(e.height=s.height),s.maxHeight&&(typeof s.maxHeight==`number`?e.maxHeight=`${s.maxHeight}px`:e.maxHeight=s.maxHeight),e}),Se=(0,i.computed)(()=>({"s-ui-list--virtual":E.value,"s-ui-list--static":!E.value})),Ce=(0,i.computed)(()=>({"--s-ui-list-gap":ee[s.gap]})),Y=(0,i.computed)(()=>({"s-ui-list__scroll--flat":T.value&&!E.value})),X=(0,i.computed)(()=>{if(s.selectionMode===e.n.MULTIPLE)return!0}),Z=(0,i.computed)(()=>V.value?`tree`:`listbox`),we=(0,i.computed)(()=>{if(!E.value)return Z.value}),Te=(0,i.computed)(()=>{if(!E.value)return X.value}),Ee=(0,i.computed)(()=>{if(E.value)return B.getGroupTabIndex()}),De=(0,i.computed)(()=>g.value?g.value:n.n(``,_.value)),Oe=(0,i.computed)(()=>{if(!E.value)return;let e=De.value;if(e)return z(e)});n.a(()=>S.value,{distance:()=>s.endReachedDistance,canLoadMore:()=>s.canLoadMore?.()??!0,onEndReached:()=>{y(`endReached`,{direction:`bottom`})}});let ke=e=>({position:`absolute`,top:0,left:0,width:`100%`,transform:`translateY(${e.start}px)`}),Ae=e=>{e instanceof HTMLElement&&F.value.measureElement(e)},Q=e=>{let t=e.item,n={rowKey:e.key,depth:e.depth,expandable:e.hasChildren,expanded:e.expanded,selected:B.isSelected(e.key),active:g.value===e.key,disabled:d(t,s.disabledKey),title:u(t,s.titleKey),subtitle:u(t,s.subtitleKey),iconLeft:p(t,s.iconLeftKey),revealRight:s.revealRight,onClick:()=>{y(`itemClick`,{key:e.key,item:e.item})}};return s.itemProps?{...n,...s.itemProps(t,e)}:n},$=e=>({...e,revealRight:s.revealRight,toggleExpanded:()=>{O(e.key)}});return c({focusNavigation:_e,handleKeyboardNavigation:he}),(e,t)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({ref_key:`listRootElementRef`,ref:C,class:[`s-ui-list`,Se.value],style:Ce.value},E.value?(0,i.unref)(x)():e.$attrs,{role:we.value,"aria-multiselectable":Te.value,tabindex:`-1`,onKeydown:ge}),[T.value&&E.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,(0,i.mergeProps)({key:0,ref_key:`scrollElementRef`,ref:S,class:[`s-ui-list__scroll`,Y.value],style:J.value,role:Z.value,"aria-multiselectable":X.value,"aria-activedescendant":Oe.value},(0,i.unref)(oe)(),{tabindex:Ee.value,onKeydown:fe}),[(0,i.createElementVNode)(`div`,{class:`s-ui-list__virtual-panel`,style:(0,i.normalizeStyle)(xe.value)},[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(ye.value,t=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:t.virtualRow.index,class:`s-ui-list__virtual-row`,"data-index":t.virtualRow.index,ref_for:!0,ref:Ae,style:(0,i.normalizeStyle)(ke(t.virtualRow))},[t.flatRow.divider?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,re)):t.flatRow.loadMoreForKey?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.unref)(b).loadMore?(0,i.renderSlot)(e.$slots,`loadMore`,(0,i.mergeProps)({key:0,ref_for:!0},P(t.flatRow))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),{key:1,"row-key":t.flatRow.key,depth:t.flatRow.depth,tiny:``,title:A.value,onClick:e=>N(t.flatRow)},(0,i.createSlots)({_:2},[j(t.flatRow)?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(a.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:2},[(0,i.unref)(b).item?(0,i.renderSlot)(e.$slots,`item`,(0,i.mergeProps)({key:0,ref_for:!0},$(t.flatRow))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),(0,i.mergeProps)({key:1,ref_for:!0},Q(t.flatRow)),(0,i.createSlots)({_:2},[(0,i.unref)(b).itemIconLeft?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemIconLeft`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`0`}:void 0,(0,i.unref)(b).itemTitle?{name:`title`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemTitle`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`1`}:void 0,(0,i.unref)(b).itemSubtitle?{name:`subtitle`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemSubtitle`,(0,i.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`2`}:void 0]),1040))],64))],12,h))),128))],4)],16,m)):T.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:1,ref_key:`scrollElementRef`,ref:S,class:(0,i.normalizeClass)([`s-ui-list__scroll`,Y.value]),style:(0,i.normalizeStyle)(J.value)},[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)((0,i.unref)(D),t=>((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:t.key},[t.divider?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,ie)):t.loadMoreForKey?((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.unref)(b).loadMore?(0,i.renderSlot)(e.$slots,`loadMore`,(0,i.mergeProps)({key:0,ref_for:!0},P(t))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),{key:1,"row-key":t.key,depth:t.depth,tiny:``,title:A.value,onClick:e=>N(t)},(0,i.createSlots)({_:2},[j(t)?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(a.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:2},[(0,i.unref)(b).item?(0,i.renderSlot)(e.$slots,`item`,(0,i.mergeProps)({key:0,ref_for:!0},$(t))):((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.t),(0,i.mergeProps)({key:1,ref_for:!0},Q(t)),(0,i.createSlots)({_:2},[(0,i.unref)(b).itemIconLeft?{name:`icon-left`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemIconLeft`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`0`}:void 0,(0,i.unref)(b).itemTitle?{name:`title`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemTitle`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`1`}:void 0,(0,i.unref)(b).itemSubtitle?{name:`subtitle`,fn:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`itemSubtitle`,(0,i.mergeProps)({ref_for:!0},$(t)))]),key:`2`}:void 0]),1040))],64))],64))),128))],6)):((0,i.openBlock)(),(0,i.createElementBlock)(`div`,ae,[(0,i.renderSlot)(e.$slots,`default`)]))],16,ne))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return g}});
@@ -1,236 +0,0 @@
1
- import { i as e, n as t, r as n, t as r } from "./SButton-n2Zuqh04.js";
2
- import { n as i } from "./useSelectLink-2aCIYmF6.js";
3
- import { Fragment as ee, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, inject as te, mergeProps as ne, normalizeClass as re, normalizeProps as p, onMounted as ie, openBlock as m, renderSlot as h, shallowRef as ae, toDisplayString as g, unref as _, useSlots as v, useTemplateRef as y, withModifiers as b } from "vue";
4
- import { ESSkeletonType as oe, SIcon as se, SSkeleton as ce, useUiKitI18n as le } from "@shtabapp/ui-kit-primitives";
5
- //#region src/components/SList/utils/context.ts
6
- var x = Symbol("sListInjectionKey"), S = /* @__PURE__ */ function(e) {
7
- return e.NEUTRAL = "neutral", e.SECONDARY = "secondary", e.MAIN = "main", e.ERROR = "error", e.BILLING = "billing", e;
8
- }({}), C = /* @__PURE__ */ function(e) {
9
- return e.OPTION = "option", e.TREEITEM = "treeitem", e.MENUITEM = "menuitem", e.MENUITEMCHECKBOX = "menuitemcheckbox", e.MENUITEMRADIO = "menuitemradio", e.BUTTON = "button", e.LINK = "link", e.NONE = "none", e;
10
- }({}), w = new Set([C.OPTION, C.TREEITEM]), T = new Set([C.MENUITEMCHECKBOX, C.MENUITEMRADIO]), E = new Set([
11
- C.TREEITEM,
12
- C.MENUITEM,
13
- C.BUTTON,
14
- C.LINK
15
- ]), D = ({ role: e, selected: t }) => ({
16
- "aria-selected": w.has(e) && t ? !0 : void 0,
17
- "aria-checked": T.has(e) ? t : void 0
18
- }), O = ({ role: e, expandable: t, expanded: n, loading: r, depth: i }) => ({
19
- "aria-expanded": E.has(e) && t && !r ? n : void 0,
20
- "aria-level": e === C.TREEITEM ? i + 1 : void 0
21
- }), k = ({ disabled: e, readonly: t, loading: n }) => ({
22
- "aria-disabled": e || t || n ? !0 : void 0,
23
- "aria-busy": n ? !0 : void 0
24
- }), A = (e) => e.role === C.NONE ? { role: e.role } : {
25
- role: e.role,
26
- ...D(e),
27
- ...O(e),
28
- ...k(e)
29
- }, j = ["id", "tabindex"], M = {
30
- key: 0,
31
- class: "s-ui-list-item__level"
32
- }, N = { class: "s-ui-list-item__body" }, P = {
33
- key: 0,
34
- class: "s-ui-list-item__icon-left"
35
- }, F = { class: "s-ui-list-item__text" }, I = {
36
- key: 0,
37
- class: "s-ui-list-item__title s-ui-typography-label-14-medium"
38
- }, L = {
39
- key: 1,
40
- class: "s-ui-list-item__subtitle s-ui-typography-body-12-regular"
41
- }, R = {
42
- key: 1,
43
- class: "s-ui-list-item__title-action"
44
- }, z = {
45
- key: 1,
46
- class: "s-ui-list-item__actions"
47
- }, B = { class: "s-ui-list-item__actions-reveal" }, V = { class: "s-ui-list-item__actions-inner" }, H = {
48
- key: 0,
49
- class: "s-ui-list-item__trailing"
50
- }, U = {
51
- key: 1,
52
- class: "s-ui-list-item__action-end"
53
- }, W = ".s-ui-list-item__expand, .s-ui-list-item__title-action, .s-ui-list-item__actions", ue = 16, de = "a, button, input, select, textarea, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]", G = /* @__PURE__ */ d({
54
- __name: "SListItem",
55
- props: {
56
- depth: { default: 0 },
57
- hasLevel: {
58
- type: Boolean,
59
- default: !1
60
- },
61
- expandable: {
62
- type: Boolean,
63
- default: !1
64
- },
65
- expanded: {
66
- type: Boolean,
67
- default: !1
68
- },
69
- variant: { default: () => S.NEUTRAL },
70
- tiny: {
71
- type: Boolean,
72
- default: !1
73
- },
74
- compact: {
75
- type: Boolean,
76
- default: !1
77
- },
78
- flush: {
79
- type: Boolean,
80
- default: !1
81
- },
82
- transparent: {
83
- type: Boolean,
84
- default: !1
85
- },
86
- selected: {
87
- type: Boolean,
88
- default: !1
89
- },
90
- active: {
91
- type: Boolean,
92
- default: !1
93
- },
94
- disabled: {
95
- type: Boolean,
96
- default: !1
97
- },
98
- readonly: {
99
- type: Boolean,
100
- default: !1
101
- },
102
- loading: {
103
- type: Boolean,
104
- default: !1
105
- },
106
- title: {},
107
- subtitle: {},
108
- iconLeft: {},
109
- iconLeftSize: {},
110
- rowKey: {},
111
- revealRight: { type: Boolean },
112
- expandOnClick: { type: Boolean },
113
- role: {}
114
- },
115
- emits: [
116
- "click",
117
- "toggleExpand",
118
- "keydown"
119
- ],
120
- setup(d, { expose: w, emit: T }) {
121
- let E = T, D = a(() => ({
122
- disabled: d.disabled,
123
- readonly: d.readonly
124
- })), O = v(), k = y("listItemElementRef"), G = te(x, null), { t: K } = le(), q = i({
125
- group: () => G,
126
- value: () => d.rowKey,
127
- el: () => k.value,
128
- disabled: () => d.disabled || d.loading,
129
- interactive: () => !d.readonly && !d.loading
130
- }), fe = a(() => d.variant === S.BILLING && !d.disabled), pe = [
131
- "Enter",
132
- " ",
133
- "Spacebar"
134
- ], J = a(() => G && d.rowKey ? G.isExpanded(d.rowKey) : d.expanded), me = a(() => J.value ? K("listItem.collapse") : K("listItem.expand")), Y = a(() => q.isInGroup.value ? q.isActive.value : d.selected), he = a(() => G && d.rowKey ? G.activeKey() === d.rowKey : d.active), ge = a(() => d.revealRight ? !0 : G ? G.revealRight() : !1), _e = a(() => d.expandOnClick ? !0 : G ? G.expandOnClick() : !1), ve = a(() => {
135
- if (!(!G || !d.rowKey)) return G.getItemOptionId(d.rowKey);
136
- }), X = ae(!1);
137
- ie(() => {
138
- X.value = !!k.value?.parentElement?.closest("[role=\"menu\"]");
139
- });
140
- let Z = a(() => d.role ? d.role : G ? G.itemRole() : X.value ? C.MENUITEM : C.BUTTON), ye = a(() => A({
141
- role: Z.value,
142
- selected: Y.value,
143
- expandable: d.expandable,
144
- expanded: J.value,
145
- disabled: d.disabled,
146
- readonly: d.readonly,
147
- loading: d.loading,
148
- depth: d.depth
149
- })), be = a(() => {
150
- if (G?.usesActiveDescendantNavigation()) return -1;
151
- if (!(d.disabled || d.readonly || d.loading || Z.value === C.NONE)) return q.tabIndex.value === void 0 ? 0 : q.tabIndex.value;
152
- }), xe = a(() => ({
153
- "--s-ui-list-item-depth": String(d.depth),
154
- "--s-ui-list-item-icon-size": d.iconLeftSize === void 0 ? void 0 : `${d.iconLeftSize}px`
155
- })), Se = a(() => [`s-ui-list-item--variant-${d.variant}`, {
156
- "s-ui-list-item--tiny": d.tiny,
157
- "s-ui-list-item--compact": d.compact,
158
- "s-ui-list-item--flush": d.flush,
159
- "s-ui-list-item--transparent": d.transparent,
160
- "s-ui-list-item--selected": Y.value,
161
- "s-ui-list-item--active": he.value,
162
- "s-ui-list-item--disabled": d.disabled,
163
- "s-ui-list-item--readonly": d.readonly,
164
- "s-ui-list-item--loading": d.loading,
165
- "s-ui-list-item--expandable": d.expandable,
166
- "s-ui-list-item--reveal-right": ge.value
167
- }]), Q = () => {
168
- if (G && d.rowKey) {
169
- G.toggleExpanded(d.rowKey);
170
- return;
171
- }
172
- E("toggleExpand");
173
- }, Ce = () => {
174
- d.disabled || d.readonly || d.loading || Q();
175
- }, $ = (e) => e.target instanceof Element && !!e.target.closest(W) && !!e.target.closest(de), we = (e) => {
176
- d.disabled || d.readonly || d.loading || $(e) || (d.expandable && _e.value && (G && d.rowKey ? G.toggleExpanded(d.rowKey) : E("toggleExpand")), G && d.rowKey && G.setActiveKey(d.rowKey), q.isInGroup.value && q.handleClick(), E("click", e));
177
- }, Te = (e) => !d.expandable || G?.handlesTreeKeyboardNavigation() || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.key === "ArrowRight" === J.value ? !1 : (e.preventDefault(), Q(), !0), Ee = (e) => G || q.isInGroup.value || !pe.includes(e.key) || e.target !== k.value ? !1 : (e.preventDefault(), k.value?.click(), !0), De = (e) => {
178
- d.disabled || d.readonly || d.loading || (!Te(e) && !Ee(e) && q.isInGroup.value && q.handleKeydown(e), E("keydown", e));
179
- };
180
- return w({ listItemElementRef: k }), (i, a) => (m(), c("div", ne({
181
- ref_key: "listItemElementRef",
182
- ref: k,
183
- id: ve.value,
184
- class: ["s-ui-list-item", Se.value],
185
- style: xe.value,
186
- tabindex: be.value
187
- }, ye.value, {
188
- onClick: we,
189
- onKeydown: De
190
- }), [d.loading ? (m(), o(_(ce), {
191
- key: 0,
192
- type: _(oe).S_LIST_ITEM
193
- }, null, 8, ["type"])) : (m(), c(ee, { key: 1 }, [
194
- d.expandable || d.depth || d.hasLevel || _(O).level ? (m(), c("div", M, [h(i.$slots, "level", {}, () => [d.expandable ? (m(), o(_(r), {
195
- key: 0,
196
- class: re(["s-ui-list-item__expand", { "s-ui-list-item__expand--expanded": J.value }]),
197
- appearance: _(t).BARE,
198
- variant: _(e).NEUTRAL,
199
- size: _(n).SMALL,
200
- icon: "chevronMiniRight",
201
- disabled: d.disabled || d.readonly,
202
- tabindex: -1,
203
- "aria-label": me.value,
204
- onClick: b(Ce, ["stop"])
205
- }, null, 8, [
206
- "class",
207
- "appearance",
208
- "variant",
209
- "size",
210
- "disabled",
211
- "aria-label"
212
- ])) : s("", !0)])])) : s("", !0),
213
- l("div", N, [
214
- d.iconLeft || _(O)["icon-left"] ? (m(), c("div", P, [h(i.$slots, "icon-left", {}, () => [d.iconLeft ? (m(), o(_(se), {
215
- key: 0,
216
- name: d.iconLeft,
217
- size: d.iconLeftSize ?? ue,
218
- billing: fe.value
219
- }, null, 8, [
220
- "name",
221
- "size",
222
- "billing"
223
- ])) : s("", !0)])])) : s("", !0),
224
- l("div", F, [d.title || _(O).title ? (m(), c("span", I, [h(i.$slots, "title", {}, () => [u(g(d.title), 1)])])) : s("", !0), d.subtitle || _(O).subtitle ? (m(), c("span", L, [h(i.$slots, "subtitle", {}, () => [u(g(d.subtitle), 1)])])) : s("", !0)]),
225
- _(O)["title-action"] ? (m(), c("div", R, [h(i.$slots, "title-action", p(f(D.value)))])) : s("", !0)
226
- ]),
227
- _(O).trailing || _(O).right || _(O)["action-end"] ? (m(), c("div", z, [l("div", B, [l("div", V, [
228
- _(O).trailing ? (m(), c("div", H, [h(i.$slots, "trailing", p(f(D.value)))])) : s("", !0),
229
- h(i.$slots, "right", p(f(D.value))),
230
- _(O)["action-end"] ? (m(), c("div", U, [h(i.$slots, "action-end", p(f(D.value)))])) : s("", !0)
231
- ])])])) : s("", !0)
232
- ], 64))], 16, j));
233
- }
234
- });
235
- //#endregion
236
- export { x as i, C as n, S as r, G as t };
@@ -1 +0,0 @@
1
- const e=require("./SButton-CZW6Y8Vw.cjs"),t=require("./useSelectLink-DZIAhQ2J.cjs");let n=require("vue"),r=require("@shtabapp/ui-kit-primitives");var i=Symbol(`sListInjectionKey`),a=function(e){return e.NEUTRAL=`neutral`,e.SECONDARY=`secondary`,e.MAIN=`main`,e.ERROR=`error`,e.BILLING=`billing`,e}({}),o=function(e){return e.OPTION=`option`,e.TREEITEM=`treeitem`,e.MENUITEM=`menuitem`,e.MENUITEMCHECKBOX=`menuitemcheckbox`,e.MENUITEMRADIO=`menuitemradio`,e.BUTTON=`button`,e.LINK=`link`,e.NONE=`none`,e}({}),s=new Set([o.OPTION,o.TREEITEM]),c=new Set([o.MENUITEMCHECKBOX,o.MENUITEMRADIO]),l=new Set([o.TREEITEM,o.MENUITEM,o.BUTTON,o.LINK]),u=({role:e,selected:t})=>({"aria-selected":s.has(e)&&t?!0:void 0,"aria-checked":c.has(e)?t:void 0}),d=({role:e,expandable:t,expanded:n,loading:r,depth:i})=>({"aria-expanded":l.has(e)&&t&&!r?n:void 0,"aria-level":e===o.TREEITEM?i+1:void 0}),f=({disabled:e,readonly:t,loading:n})=>({"aria-disabled":e||t||n?!0:void 0,"aria-busy":n?!0:void 0}),p=e=>e.role===o.NONE?{role:e.role}:{role:e.role,...u(e),...d(e),...f(e)},m=[`id`,`tabindex`],h={key:0,class:`s-ui-list-item__level`},g={class:`s-ui-list-item__body`},_={key:0,class:`s-ui-list-item__icon-left`},v={class:`s-ui-list-item__text`},y={key:0,class:`s-ui-list-item__title s-ui-typography-label-14-medium`},b={key:1,class:`s-ui-list-item__subtitle s-ui-typography-body-12-regular`},x={key:1,class:`s-ui-list-item__title-action`},S={key:1,class:`s-ui-list-item__actions`},C={class:`s-ui-list-item__actions-reveal`},w={class:`s-ui-list-item__actions-inner`},T={key:0,class:`s-ui-list-item__trailing`},E={key:1,class:`s-ui-list-item__action-end`},D=`.s-ui-list-item__expand, .s-ui-list-item__title-action, .s-ui-list-item__actions`,O=16,k=`a, button, input, select, textarea, [role="button"], [role="link"], [contenteditable="true"]`,A=(0,n.defineComponent)({__name:`SListItem`,props:{depth:{default:0},hasLevel:{type:Boolean,default:!1},expandable:{type:Boolean,default:!1},expanded:{type:Boolean,default:!1},variant:{default:()=>a.NEUTRAL},tiny:{type:Boolean,default:!1},compact:{type:Boolean,default:!1},flush:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},title:{},subtitle:{},iconLeft:{},iconLeftSize:{},rowKey:{},revealRight:{type:Boolean},expandOnClick:{type:Boolean},role:{}},emits:[`click`,`toggleExpand`,`keydown`],setup(s,{expose:c,emit:l}){let u=l,d=(0,n.computed)(()=>({disabled:s.disabled,readonly:s.readonly})),f=(0,n.useSlots)(),A=(0,n.useTemplateRef)(`listItemElementRef`),j=(0,n.inject)(i,null),{t:M}=(0,r.useUiKitI18n)(),N=t.n({group:()=>j,value:()=>s.rowKey,el:()=>A.value,disabled:()=>s.disabled||s.loading,interactive:()=>!s.readonly&&!s.loading}),P=(0,n.computed)(()=>s.variant===a.BILLING&&!s.disabled),F=[`Enter`,` `,`Spacebar`],I=(0,n.computed)(()=>j&&s.rowKey?j.isExpanded(s.rowKey):s.expanded),L=(0,n.computed)(()=>I.value?M(`listItem.collapse`):M(`listItem.expand`)),R=(0,n.computed)(()=>N.isInGroup.value?N.isActive.value:s.selected),ee=(0,n.computed)(()=>j&&s.rowKey?j.activeKey()===s.rowKey:s.active),z=(0,n.computed)(()=>s.revealRight?!0:j?j.revealRight():!1),B=(0,n.computed)(()=>s.expandOnClick?!0:j?j.expandOnClick():!1),V=(0,n.computed)(()=>{if(!(!j||!s.rowKey))return j.getItemOptionId(s.rowKey)}),H=(0,n.shallowRef)(!1);(0,n.onMounted)(()=>{H.value=!!A.value?.parentElement?.closest(`[role="menu"]`)});let U=(0,n.computed)(()=>s.role?s.role:j?j.itemRole():H.value?o.MENUITEM:o.BUTTON),W=(0,n.computed)(()=>p({role:U.value,selected:R.value,expandable:s.expandable,expanded:I.value,disabled:s.disabled,readonly:s.readonly,loading:s.loading,depth:s.depth})),G=(0,n.computed)(()=>{if(j?.usesActiveDescendantNavigation())return-1;if(!(s.disabled||s.readonly||s.loading||U.value===o.NONE))return N.tabIndex.value===void 0?0:N.tabIndex.value}),K=(0,n.computed)(()=>({"--s-ui-list-item-depth":String(s.depth),"--s-ui-list-item-icon-size":s.iconLeftSize===void 0?void 0:`${s.iconLeftSize}px`})),q=(0,n.computed)(()=>[`s-ui-list-item--variant-${s.variant}`,{"s-ui-list-item--tiny":s.tiny,"s-ui-list-item--compact":s.compact,"s-ui-list-item--flush":s.flush,"s-ui-list-item--transparent":s.transparent,"s-ui-list-item--selected":R.value,"s-ui-list-item--active":ee.value,"s-ui-list-item--disabled":s.disabled,"s-ui-list-item--readonly":s.readonly,"s-ui-list-item--loading":s.loading,"s-ui-list-item--expandable":s.expandable,"s-ui-list-item--reveal-right":z.value}]),J=()=>{if(j&&s.rowKey){j.toggleExpanded(s.rowKey);return}u(`toggleExpand`)},Y=()=>{s.disabled||s.readonly||s.loading||J()},X=e=>e.target instanceof Element&&!!e.target.closest(D)&&!!e.target.closest(k),Z=e=>{s.disabled||s.readonly||s.loading||X(e)||(s.expandable&&B.value&&(j&&s.rowKey?j.toggleExpanded(s.rowKey):u(`toggleExpand`)),j&&s.rowKey&&j.setActiveKey(s.rowKey),N.isInGroup.value&&N.handleClick(),u(`click`,e))},Q=e=>!s.expandable||j?.handlesTreeKeyboardNavigation()||e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||e.key===`ArrowRight`===I.value?!1:(e.preventDefault(),J(),!0),$=e=>j||N.isInGroup.value||!F.includes(e.key)||e.target!==A.value?!1:(e.preventDefault(),A.value?.click(),!0),te=e=>{s.disabled||s.readonly||s.loading||(!Q(e)&&!$(e)&&N.isInGroup.value&&N.handleKeydown(e),u(`keydown`,e))};return c({listItemElementRef:A}),(t,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,(0,n.mergeProps)({ref_key:`listItemElementRef`,ref:A,id:V.value,class:[`s-ui-list-item`,q.value],style:K.value,tabindex:G.value},W.value,{onClick:Z,onKeydown:te}),[s.loading?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SSkeleton),{key:0,type:(0,n.unref)(r.ESSkeletonType).S_LIST_ITEM},null,8,[`type`])):((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[s.expandable||s.depth||s.hasLevel||(0,n.unref)(f).level?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,h,[(0,n.renderSlot)(t.$slots,`level`,{},()=>[s.expandable?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(e.t),{key:0,class:(0,n.normalizeClass)([`s-ui-list-item__expand`,{"s-ui-list-item__expand--expanded":I.value}]),appearance:(0,n.unref)(e.n).BARE,variant:(0,n.unref)(e.i).NEUTRAL,size:(0,n.unref)(e.r).SMALL,icon:`chevronMiniRight`,disabled:s.disabled||s.readonly,tabindex:-1,"aria-label":L.value,onClick:(0,n.withModifiers)(Y,[`stop`])},null,8,[`class`,`appearance`,`variant`,`size`,`disabled`,`aria-label`])):(0,n.createCommentVNode)(``,!0)])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,g,[s.iconLeft||(0,n.unref)(f)[`icon-left`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,_,[(0,n.renderSlot)(t.$slots,`icon-left`,{},()=>[s.iconLeft?((0,n.openBlock)(),(0,n.createBlock)((0,n.unref)(r.SIcon),{key:0,name:s.iconLeft,size:s.iconLeftSize??O,billing:P.value},null,8,[`name`,`size`,`billing`])):(0,n.createCommentVNode)(``,!0)])])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,v,[s.title||(0,n.unref)(f).title?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,y,[(0,n.renderSlot)(t.$slots,`title`,{},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(s.title),1)])])):(0,n.createCommentVNode)(``,!0),s.subtitle||(0,n.unref)(f).subtitle?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,b,[(0,n.renderSlot)(t.$slots,`subtitle`,{},()=>[(0,n.createTextVNode)((0,n.toDisplayString)(s.subtitle),1)])])):(0,n.createCommentVNode)(``,!0)]),(0,n.unref)(f)[`title-action`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,x,[(0,n.renderSlot)(t.$slots,`title-action`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0)]),(0,n.unref)(f).trailing||(0,n.unref)(f).right||(0,n.unref)(f)[`action-end`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,S,[(0,n.createElementVNode)(`div`,C,[(0,n.createElementVNode)(`div`,w,[(0,n.unref)(f).trailing?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,T,[(0,n.renderSlot)(t.$slots,`trailing`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0),(0,n.renderSlot)(t.$slots,`right`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value))),(0,n.unref)(f)[`action-end`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,E,[(0,n.renderSlot)(t.$slots,`action-end`,(0,n.normalizeProps)((0,n.guardReactiveProps)(d.value)))])):(0,n.createCommentVNode)(``,!0)])])])):(0,n.createCommentVNode)(``,!0)],64))],16,m))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return A}});
@@ -1 +0,0 @@
1
- const e=require("./useSelectionGroup-NJvi3hNo.cjs"),t=require("./useSelectLink-DZIAhQ2J.cjs"),n=require("./useLink-1LLWpdDZ.cjs"),r=require("./getIndicatorMetricsPercent-CFGy_nB8.cjs");let i=require("vue"),a=require("@shtabapp/ui-kit-primitives"),o=require("@vueuse/core");var s=function(e){return e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),c=Symbol(`SSegmentControl`),l={key:0,class:`s-ui-segment-control__icon`,"aria-hidden":`true`},u=(0,i.defineComponent)({__name:`SSegmentControlItem`,props:{item:{}},setup(e){let r=(0,i.inject)(c,null),o={[s.SMALL]:`s-ui-typography-label-12-medium`,[s.MEDIUM]:`s-ui-typography-label-14-medium`},u={[s.SMALL]:16,[s.MEDIUM]:20},d=(0,i.computed)(()=>r?(0,i.toValue)(r.size):s.MEDIUM),f=(0,i.computed)(()=>o[d.value]),p=(0,i.computed)(()=>u[d.value]),m=(0,i.useTemplateRef)(`itemRootRef`),h=n.t(()=>e.item.link,()=>e.item.exact,()=>e.item.replace);t.t({isRouterLink:h.isRouterLink,isActive:h.isActive,group:()=>r,value:()=>e.item.value});let g=(0,i.computed)(()=>!!(r&&(0,i.toValue)(r.disabled))||!!e.item.disabled),_=t.n({group:()=>r,value:()=>e.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(r)return(0,i.toValue)(r.name)}),C=(0,i.computed)(()=>e.item.ariaLabel?e.item.ariaLabel:e.item.iconOnly?e.item.label:void 0),w=(0,i.computed)(()=>({"s-ui-segment-control__item--selected":v.value,"s-ui-segment-control__item--icon-only":!!e.item.iconOnly,"s-ui-segment-control__item--link":n.r(e.item.link)})),T=(0,i.computed)(()=>({...n.n(y.value,{replace:e.item.replace}),disabled:x.value&&g.value?!0:void 0,"aria-disabled":!x.value&&g.value?!0:void 0})),E=(0,i.computed)(()=>g.value?-1:_.tabIndex.value??-1),D=e=>{if(!g.value){if(h.isRouterLink.value&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)){e.preventDefault(),h.navigate();return}_.handleKeydown(e)}},O=e=>{if(g.value){e.preventDefault(),e.stopPropagation();return}h.isRouterLink.value||_.handleClick()};return(t,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`,w.value],type:x.value?`button`:void 0},T.value,{"aria-checked":v.value?`true`:`false`,"aria-label":C.value,tabindex:E.value,name:x.value?S.value:void 0,onClick:O,onKeydown:D}),{default:(0,i.withCtx)(()=>[e.item.icon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,l,[(0,i.createVNode)((0,i.unref)(a.SIcon),{name:e.item.icon,size:p.value},null,8,[`name`,`size`])])):(0,i.createCommentVNode)(``,!0),e.item.label&&!e.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)(e.item.label),3)):(0,i.createCommentVNode)(``,!0)]),_:1},16,[`class`,`type`,`aria-checked`,`aria-label`,`tabindex`,`name`]))}}),d=`.s-ui-segment-control__item`,f=({trackEl:e,activeIndex:t,itemCount:n})=>{let a=(0,i.ref)(r.t()),s=()=>{let n=(0,i.toValue)(e),o=(0,i.toValue)(t);if(!n||o<0){a.value=r.t();return}let s=n.querySelectorAll(d).item(o);if(!(s instanceof HTMLElement)){a.value=r.t();return}a.value=r.n(n,s)};return(0,o.useResizeObserver)(e,()=>{s()}),(0,i.watch)(()=>[(0,i.toValue)(t),(0,i.toValue)(n)],async()=>{await(0,i.nextTick)(),s()},{immediate:!0}),{indicatorStyle:(0,i.computed)(()=>{let{left:e,top:t,width:n,height:r}=a.value;return!n||!r?{opacity:`0`}:{opacity:`1`,left:`${e}%`,top:`${t}%`,width:`${n}%`,height:`${r}%`}}),updateMetrics:s}},p=[`aria-disabled`],m=(0,i.defineComponent)({__name:`SSegmentControl`,props:(0,i.mergeModels)({items:{},size:{default:()=>s.MEDIUM},fullWidth:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!0},name:{}},{modelValue:{},modelModifiers:{}}),emits:(0,i.mergeModels)([`change`],[`update:modelValue`]),setup(t,{emit:n}){let r=(0,i.useModel)(t,`modelValue`),a=n,o=(0,i.useTemplateRef)(`trackRef`),s=e.o({modelValue:()=>r.value,onUpdateModelValue:t=>{e.i(t)&&(r.value=t,a(`change`,t))},mode:e.n.SINGLE,mandatory:()=>t.mandatory,orientation:e.r.HORIZONTAL,loop:!0});(0,i.provide)(c,{mode:()=>e.n.SINGLE,isSelected:s.isSelected,selectItem:s.select,registerItem:s.registerItem,getItemTabIndex:s.getItemTabIndex,getGroupTabIndex:s.getGroupTabIndex,handleItemKeydown:s.handleItemKeydown,disabled:()=>t.disabled,name:()=>t.name,size:()=>t.size});let{indicatorStyle:l}=f({trackEl:()=>o.value,activeIndex:(0,i.computed)(()=>{let e=t.items.findIndex(e=>s.isSelected(e.value));return e>=0?e:0}),itemCount:()=>t.items.length}),d=(0,i.computed)(()=>({[`s-ui-segment-control--size-${t.size}`]:!0,"s-ui-segment-control--full-width":t.fullWidth,"s-ui-segment-control--disabled":t.disabled})),m=(e,t)=>`${String(e.value)}-${t}`,h=()=>{if(r.value!==void 0&&r.value!==null)return;let e=t.items.find(e=>!e.disabled);e&&(r.value=e.value)};return(0,i.watch)(()=>t.items,()=>{h()},{immediate:!0}),(e,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":t.disabled||void 0},e.$attrs),[(0,i.createElementVNode)(`span`,{class:`s-ui-segment-control__indicator`,style:(0,i.normalizeStyle)((0,i.unref)(l)),"aria-hidden":`true`},null,4),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(t.items,(e,t)=>((0,i.openBlock)(),(0,i.createBlock)(u,{key:m(e,t),item:e},null,8,[`item`]))),128))],16,p))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});