@shtabapp/ui-kit 1.79.0 → 1.80.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.
- package/CHANGELOG.md +14 -0
- package/dist/{SAvatar-hWbsODUa.js → SAvatar-6uaisUHm.js} +23 -21
- package/dist/{SAvatar-ClmtSIFg.cjs → SAvatar-BQNqFdkk.cjs} +1 -1
- package/dist/{SAvatarGroup-By8oMNTe.cjs → SAvatarGroup-D27squmU.cjs} +1 -1
- package/dist/{SAvatarGroup-CSSCQKdH.js → SAvatarGroup-DnVhY7I1.js} +1 -1
- package/dist/SBadge-Dn87LB9z.cjs +1 -0
- package/dist/{SBadge-BDxQJh6c.js → SBadge-Du9iIiXS.js} +4 -2
- package/dist/{SButton-BxsPvcET.cjs → SButton-B3o80WMR.cjs} +1 -1
- package/dist/{SButton-B21hubD2.js → SButton-D-dmK8Cm.js} +1 -1
- package/dist/{SChip-suCSzJ9O.js → SChip-C6Z1VRf9.js} +1 -1
- package/dist/{SChip-no4cGQNB.cjs → SChip-Cr6wNKd7.cjs} +1 -1
- package/dist/{SColorPicker-DHjY2NVd.cjs → SColorPicker--sBL2SBq.cjs} +1 -1
- package/dist/{SColorPicker-C5pA54Q3.js → SColorPicker-D2072gdX.js} +3 -3
- package/dist/SDropdown-B_nsm3Jf.cjs +1 -0
- package/dist/SDropdown-aWjZrahp.js +541 -0
- package/dist/{SInput-DRV4XHWh.js → SInput-D2pCcaym.js} +1 -1
- package/dist/{SInput-Doale-L0.cjs → SInput-DG9R9tJC.cjs} +1 -1
- package/dist/{SList-DuSCQL0t.js → SList-DKstFJu1.js} +1 -1
- package/dist/{SList-B98BGyt8.cjs → SList-_VnusDWn.cjs} +1 -1
- package/dist/SListItem-B7RIawMl.cjs +1 -0
- package/dist/SListItem-Bw0OXPVk.js +231 -0
- package/dist/{SPhotoEdit-D3a1Ptp0.cjs → SPhotoEdit-C1K1n0ti.cjs} +1 -1
- package/dist/{SPhotoEdit-CuVHNypX.js → SPhotoEdit-eKRRevtl.js} +1 -1
- package/dist/SSelect-91iBEAHR.cjs +1 -0
- package/dist/{SSelect-BU4eSrVf.js → SSelect-CKw3a1AD.js} +238 -230
- package/dist/STable-CdMVPiYt.cjs +1 -0
- package/dist/{STable-BTKXjbrB.js → STable-Dbr1oX01.js} +1032 -1002
- package/dist/{STabs-B07Q6QYO.js → STabs-DhwF2GvF.js} +1 -1
- package/dist/{STabs-JtF4ca3o.cjs → STabs-yf2Mtaji.cjs} +1 -1
- package/dist/{STag-BKLs0RRY.js → STag-BCGC8smg.js} +1 -1
- package/dist/{STag-Btut_n-4.cjs → STag-DBerzc3o.cjs} +1 -1
- package/dist/{STagGroup-CNZVwrG2.js → STagGroup-B2FeOTSD.js} +1 -1
- package/dist/{STagGroup-Ddeb_8Ot.cjs → STagGroup-GecKyBlJ.cjs} +1 -1
- package/dist/components/SAvatar/SAvatar.vue.d.ts.map +1 -1
- package/dist/components/SBadge/SBadge.vue.d.ts.map +1 -1
- package/dist/components/SDropdown/SDropdown.types.d.ts +16 -1
- package/dist/components/SDropdown/SDropdown.types.d.ts.map +1 -1
- package/dist/components/SDropdown/SDropdown.vue.d.ts +2 -2
- package/dist/components/SDropdown/SDropdown.vue.d.ts.map +1 -1
- package/dist/components/SDropdown/utils/dropdownFocusables.d.ts +9 -0
- package/dist/components/SDropdown/utils/dropdownFocusables.d.ts.map +1 -0
- package/dist/components/SDropdown/utils/useDropdownFocus.d.ts +31 -0
- package/dist/components/SDropdown/utils/useDropdownFocus.d.ts.map +1 -0
- package/dist/components/SListItem/SListItem.types.d.ts +5 -3
- package/dist/components/SListItem/SListItem.types.d.ts.map +1 -1
- package/dist/components/SListItem/SListItem.vue.d.ts.map +1 -1
- package/dist/components/SSelect/SSelect.vue.d.ts.map +1 -1
- package/dist/components/STable/STable.vue.d.ts.map +1 -1
- package/dist/components/STable/utils/useTableGridFocus.d.ts +5 -2
- package/dist/components/STable/utils/useTableGridFocus.d.ts.map +1 -1
- package/dist/components/STable/utils/useTableGridKeyboard.d.ts.map +1 -1
- package/dist/components/SToastProvider/SToastProvider.vue.d.ts +1 -1
- package/dist/components/SToastProvider/SToastProvider.vue.d.ts.map +1 -1
- package/dist/entries/avatar-group.cjs +1 -1
- package/dist/entries/avatar-group.js +1 -1
- package/dist/entries/avatar.cjs +1 -1
- package/dist/entries/avatar.js +1 -1
- package/dist/entries/badge.cjs +1 -1
- package/dist/entries/badge.js +1 -1
- package/dist/entries/button.cjs +1 -1
- package/dist/entries/button.js +1 -1
- package/dist/entries/chip.cjs +1 -1
- package/dist/entries/chip.js +1 -1
- package/dist/entries/color-picker.cjs +1 -1
- package/dist/entries/color-picker.js +1 -1
- package/dist/entries/dropdown.cjs +1 -1
- package/dist/entries/dropdown.js +1 -1
- package/dist/entries/input.cjs +1 -1
- package/dist/entries/input.js +1 -1
- package/dist/entries/list-item.cjs +1 -1
- package/dist/entries/list-item.js +1 -1
- package/dist/entries/list.cjs +1 -1
- package/dist/entries/list.js +1 -1
- package/dist/entries/photo-edit.cjs +1 -1
- package/dist/entries/photo-edit.js +1 -1
- package/dist/entries/select.cjs +1 -1
- package/dist/entries/select.js +1 -1
- package/dist/entries/table.cjs +1 -1
- package/dist/entries/table.js +1 -1
- package/dist/entries/tabs.cjs +1 -1
- package/dist/entries/tabs.js +1 -1
- package/dist/entries/tag-group.cjs +1 -1
- package/dist/entries/tag-group.js +2 -2
- package/dist/entries/tag.cjs +1 -1
- package/dist/entries/tag.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +447 -423
- package/dist/uikit-components.css +1 -1
- package/package.json +3 -3
- package/dist/SBadge-d1GOPFP-.cjs +0 -1
- package/dist/SDropdown-CPfoNHbg.cjs +0 -1
- package/dist/SDropdown-DvPW3_WP.js +0 -400
- package/dist/SListItem-B3MQgu4Q.js +0 -227
- package/dist/SListItem-CZtR8bgI.cjs +0 -1
- package/dist/SSelect-CPQIcGhK.cjs +0 -1
- package/dist/STable-RmVTPyg2.cjs +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shtabapp/ui-kit",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.80.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,8 +279,8 @@
|
|
|
279
279
|
"dependencies": {
|
|
280
280
|
"chart.js": "^4.5.0",
|
|
281
281
|
"vue-i18n": "^9.14.5",
|
|
282
|
-
"@shtabapp/ui-kit-
|
|
283
|
-
"@shtabapp/ui-kit-
|
|
282
|
+
"@shtabapp/ui-kit-primitives": "^1.36.0",
|
|
283
|
+
"@shtabapp/ui-kit-tokens": "^1.23.0"
|
|
284
284
|
},
|
|
285
285
|
"devDependencies": {
|
|
286
286
|
"@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
|
package/dist/SBadge-d1GOPFP-.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
let e=require("vue"),t=require("@shtabapp/ui-kit-primitives");var n=function(e){return e.DANGER=`danger`,e.MAIN=`main`,e.SUCCESS=`success`,e.WARNING=`warning`,e.GRAY=`gray`,e.WHITE=`white`,e.BILLING=`billing`,e.DISABLED=`disabled`,e}({}),r=function(e){return e.SMALL=`s`,e.MEDIUM=`m`,e.LARGE=`l`,e}({}),i=function(e){return e.TOP_END=`top-end`,e.TOP_START=`top-start`,e.BOTTOM_END=`bottom-end`,e.BOTTOM_START=`bottom-start`,e}({}),a={key:0,class:`s-ui-badge-anchor`},o=[`aria-label`],s={key:1,class:`s-ui-badge__dot`},c={key:2,class:`s-ui-badge__label s-ui-typography-label-10-medium`},l=[`aria-label`],u={key:1,class:`s-ui-badge__dot`},d={key:2,class:`s-ui-badge__label s-ui-typography-label-10-medium`},f=16,p=(0,e.defineComponent)({__name:`SBadge`,props:{anchored:{type:Boolean,default:!1},color:{default:()=>n.DANGER},value:{},max:{},label:{},icon:{},size:{default:()=>r.SMALL},placement:{default:()=>i.TOP_END},offsetX:{default:0},offsetY:{default:0}},setup(n){let i=(0,e.useSlots)(),p=(0,e.computed)(()=>!!(i.default||n.anchored)),m=(0,e.computed)(()=>typeof n.value==`number`),h=(0,e.computed)(()=>typeof n.value==`number`?n.max&&n.value>n.max?`${n.max}+`:String(n.value):``),g=(0,e.computed)(()=>h.value.length===1),_=(0,e.computed)(()=>!!n.icon),v=(0,e.computed)(()=>!_.value&&!m.value),y=(0,e.computed)(()=>[`s-ui-badge--color-${n.color}`,{"s-ui-badge--anchored":p.value,"s-ui-badge--single":g.value&&!_.value,"s-ui-badge--with-dot":v.value,"s-ui-badge--with-icon":_.value,[`s-ui-badge--size-${n.size}`]:n.size!==r.SMALL||_.value||v.value,[`s-ui-badge--placement-${n.placement}`]:p.value}]),b=(0,e.computed)(()=>{if(p.value)return{"--s-ui-badge-offset-x":`${n.offsetX}px`,"--s-ui-badge-offset-y":`${n.offsetY}px`}}),x=(0,e.computed)(()=>{if(n.label)return n.label;if(n.icon)return n.icon;if(h.value)return h.value});return(r,p)=>(0,e.unref)(i).default?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,a,[(0,e.renderSlot)(r.$slots,`default`),(0,e.createElementVNode)(`span`,{class:(0,e.normalizeClass)([`s-ui-badge`,y.value]),style:(0,e.normalizeStyle)(b.value),"aria-label":x.value},[n.icon?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SIcon),{key:0,class:`s-ui-badge__icon`,name:n.icon,size:f},null,8,[`name`])):v.value?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,s)):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,c,(0,e.toDisplayString)(h.value),1))],14,o)])):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,{key:1,class:(0,e.normalizeClass)([`s-ui-badge`,y.value]),style:(0,e.normalizeStyle)(b.value),"aria-label":x.value},[n.icon?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SIcon),{key:0,class:`s-ui-badge__icon`,name:n.icon,size:f},null,8,[`name`])):v.value?((0,e.openBlock)(),(0,e.createElementBlock)(`span`,u)):((0,e.openBlock)(),(0,e.createElementBlock)(`span`,d,(0,e.toDisplayString)(h.value),1))],14,l))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("./useFloatingOverlay-CwGCMrig.cjs");let t=require("vue"),n=require("@shtabapp/ui-kit-primitives"),r=require("@vueuse/core");var i=768,a=e=>{let n=(0,t.ref)(e.value),r=(0,t.ref)(e.value);return(0,t.watch)(e,e=>{if(e){n.value=!0,r.value=!0;return}n.value=!1},{flush:`sync`}),{isPanelShown:n,isPanelActive:r,handlePanelAfterLeave:()=>{e.value||(r.value=!1)}}},o=(e,n)=>{let i=(0,r.useMediaQuery)((0,t.computed)(()=>`(max-width: ${((0,t.toValue)(n)||768)-.02}px)`));return(0,t.computed)(()=>(0,t.toValue)(e)&&i.value)},s=Symbol(`SDropdown`),c=e=>{let n=(0,t.inject)(s,null),r=(0,t.shallowReactive)(new Set),i=(0,t.computed)(()=>[...r].filter(e=>e.isOpen())),a=(0,t.computed)(()=>i.value.length>0),o=(0,t.computed)(()=>i.value.flatMap(e=>e.getElements())),c={isOpen:()=>(0,t.toValue)(e.open),getElements:()=>{let n=(0,t.toValue)(e.element);return n?[n,...o.value]:o.value}};return(0,t.provide)(s,{registerChild:e=>{r.add(e)},unregisterChild:e=>{r.delete(e)}}),n&&(n.registerChild(c),(0,t.onScopeDispose)(()=>n.unregisterChild(c))),{hasOpenChild:a,descendantElements:o}},l=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},u={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"]`},d=e=>{let n=(0,t.shallowRef)(0),i=(0,t.shallowRef)(!1),a=(0,t.shallowRef)(!1),o=null,s=0,c=0,l=0,d=0,f=0,p,m=(0,t.computed)(()=>i.value||a.value),h=()=>{clearTimeout(p),p=void 0,a.value=!1},g=()=>{a.value=!0,clearTimeout(p),p=setTimeout(h,u.SETTLE_TIMEOUT)},_=()=>{o=null,n.value=0,i.value=!1,h()},v=()=>(0,t.toValue)(e.popup)?.offsetHeight??0,y=()=>{let e=d-s;if(e<=0)return!1;let t=f-l;return(t>0?(d-c)/t:0)>=u.CLOSE_VELOCITY?!0:e>=Math.min(v()*u.CLOSE_DISTANCE_RATIO,u.CLOSE_DISTANCE_LIMIT)},b=e=>{o===null&&(e.pointerType===`mouse`&&e.button!==0||e.target instanceof Element&&e.target.closest(u.INTERACTIVE_SELECTOR)||(o=e.pointerId,s=e.clientY,d=e.clientY,c=e.clientY,f=e.timeStamp,l=e.timeStamp,h(),i.value=!0))},x=e=>{o===e.pointerId&&(c=d,l=f,d=e.clientY,f=e.timeStamp,n.value=Math.max(e.clientY-s,-u.OVERDRAG_LIMIT))},S=t=>{if(o===t.pointerId){if(o=null,i.value=!1,y()){a.value=!0,n.value=v()+u.OVERDRAG_LIMIT,e.onClose();return}if(n.value===0){h();return}g(),n.value=0}};return(0,r.useEventListener)(()=>(0,t.toValue)(e.handle),`pointerdown`,b),(0,r.useEventListener)(window,`pointermove`,x),(0,r.useEventListener)(window,`pointerup`,S),(0,r.useEventListener)(window,`pointercancel`,S),(0,r.useEventListener)(()=>(0,t.toValue)(e.popup),`transitionend`,e=>{e.propertyName!==`transform`||i.value||n.value!==0||h()}),(0,t.onScopeDispose)(()=>{clearTimeout(p)}),{isActive:m,popupStyles:(0,t.computed)(()=>{if(m.value)return{transform:`translate3d(0, ${n.value}px, 0)`,transition:a.value?`transform var(--s-ui-transition-duration-slow) var(--s-ui-transition-easing-standard)`:`none`}}),reset:_}},f=[`aria-label`],p={class:`s-ui-dropdown-sheet__side`},m={class:`s-ui-dropdown-sheet__title`},h={class:`s-ui-dropdown-sheet__side s-ui-dropdown-sheet__side--end`},g=[`id`],_=(0,t.defineComponent)({__name:`SDropdownSheet`,props:{open:{type:Boolean},title:{default:``},dismissOnOverlayClick:{type:Boolean,default:!0},dismissOnEscape:{type:Boolean,default:!0},hasOpenDescendant:{type:Boolean,default:!1},contentId:{}},emits:[`close`],setup(i,{expose:a,emit:o}){let s=o,{t:c}=(0,n.useUiKitI18n)(),l=(0,t.useTemplateRef)(`overlayRef`),u=(0,t.useTemplateRef)(`popupRef`),_=(0,t.useTemplateRef)(`headerRef`),v=()=>s(`close`),{isActive:y,popupStyles:b,reset:x}=d({handle:_,popup:u,onClose:v}),S=(0,r.useScrollLock)(()=>typeof document>`u`?null:document.body),C=()=>{i.dismissOnOverlayClick&&v()},w=e=>{y.value&&e.stopPropagation()},T=()=>x(),E=null,D=()=>{let e=document.activeElement;E=e instanceof HTMLElement?e:null},O=async()=>{await(0,t.nextTick)();let e=u.value;!e||e.contains(document.activeElement)||e.focus({preventScroll:!0})},k=()=>{let e=E,t=!!u.value?.contains(document.activeElement);E=null,!(!t||!e?.isConnected)&&e.focus({preventScroll:!0})};return(0,t.watch)(()=>i.open,e=>{if(S.value=e,e){D(),O();return}k()},{immediate:!0}),e.n({open:()=>i.open,enabled:()=>i.dismissOnEscape,hasOpenDescendant:()=>i.hasOpenDescendant,onDismiss:v}),(0,t.onBeforeUnmount)(()=>{S.value=!1}),a({overlayElement:l}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{name:`s-ui-dropdown-sheet`,onAfterLeave:T},{default:(0,t.withCtx)(()=>[i.open?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`overlayRef`,ref:l,class:`s-ui-dropdown-sheet`,onClick:C},[(0,t.createElementVNode)(`div`,{ref_key:`popupRef`,ref:u,class:`s-ui-dropdown-sheet__popup`,style:(0,t.normalizeStyle)((0,t.unref)(b)),role:`dialog`,"aria-modal":`true`,"aria-label":i.title||(0,t.unref)(c)(`dropdown.sheet`),tabindex:`-1`,onClickCapture:w,onClick:n[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.createElementVNode)(`header`,{ref_key:`headerRef`,ref:_,class:`s-ui-dropdown-sheet__header`},[n[1]||=(0,t.createElementVNode)(`span`,{class:`s-ui-dropdown-sheet__handle`,"aria-hidden":`true`},null,-1),(0,t.createElementVNode)(`div`,p,[(0,t.renderSlot)(e.$slots,`header-left`)]),(0,t.createElementVNode)(`div`,m,(0,t.toDisplayString)(i.title),1),(0,t.createElementVNode)(`div`,h,[(0,t.renderSlot)(e.$slots,`header-right`)])],512),(0,t.createElementVNode)(`div`,{id:i.contentId,class:`s-ui-dropdown-sheet__content`},[(0,t.renderSlot)(e.$slots,`default`)],8,g)],44,f)],512)):(0,t.createCommentVNode)(``,!0)]),_:3}))}}),v=[`id`],y=[`data-placement`],b={class:`s-ui-dropdown__content`},x=(0,t.defineComponent)({inheritAttrs:!1,__name:`SDropdown`,props:(0,t.mergeModels)({placement:{default:()=>e.s.BOTTOM_START},offset:{default:8},flip:{type:Boolean,default:!0},shift:{type:Boolean,default:!0},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},boundary:{default:()=>e.o.CLIPPING_ANCESTORS},block:{type:Boolean,default:!1},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(n,{expose:i}){let s=(0,t.useModel)(n,`modelValue`),u=o(()=>n.sheet,()=>n.sheetBreakpoint),{isPanelShown:d,isPanelActive:f,handlePanelAfterLeave:p}=a(s),m=e=>{s.value=e},h=()=>m(!1),g=(0,t.useSlots)(),x=(0,t.useTemplateRef)(`triggerWrapperRef`),S=(0,t.useTemplateRef)(`panelRef`),C=(0,t.useTemplateRef)(`sheetRef`),{hasOpenChild:w,descendantElements:T}=c({open:s,element:(0,t.computed)(()=>u.value?C.value?.overlayElement??null:S.value)}),E=(0,t.useId)(),D=(0,t.useId)(),O=(0,t.computed)(()=>n.contentId??E),k=(0,t.computed)(()=>g.trigger?l(x.value):n.reference),A=(0,t.computed)(()=>n.teleportTo!==!1),j=(0,t.computed)(()=>n.teleportTo===!1?`body`:n.teleportTo),M=e.s.BOTTOM_START,N=()=>{n.disabled||m(!0)},P=()=>{n.disabled||(s.value=!s.value)},F=(0,t.computed)(()=>({id:D,"aria-expanded":s.value,"aria-haspopup":`dialog`,"aria-controls":O.value})),{panelStyles:I,panelMaxHeight:L,resolvedPlacement:R,arrowStyles:z,isArrowOverflow:B,isPositionReady:V,updatePosition:H}=e.t({open:()=>f.value&&!u.value,onOpenChange:m,reference:()=>k.value,panel:()=>S.value,placement:()=>n.placement,offset:()=>n.offset,flip:()=>n.flip,shift:()=>n.shift,matchReferenceWidth:()=>n.matchReferenceWidth,fitViewport:()=>n.fitViewport,dismissOnClickOutside:()=>n.dismissOnClickOutside,dismissOnEscape:()=>n.dismissOnEscape,viewportPadding:()=>n.viewportPadding,arrow:()=>n.arrow,boundary:()=>n.boundary,clickOutsideIgnore:T,hasOpenDescendant:w}),U=(0,t.computed)(()=>n.showOnHover&&!u.value),W=(0,t.computed)(()=>U.value?e.r(k.value):null),G=(0,t.computed)(()=>U.value?S.value:null),K=(0,r.useElementHover)(W,{delayLeave:n.hoverLeaveDelay}),q=(0,r.useElementHover)(G,{delayLeave:n.hoverLeaveDelay});(0,t.watch)([K,q,w,U,()=>n.disabled],()=>{if(U.value){if(n.disabled){m(!1);return}m(K.value||q.value||w.value)}});let J=(0,t.computed)(()=>!!L.value),Y=(0,t.computed)(()=>{if(L.value)return{maxHeight:`${L.value}px`}});return(0,t.watch)(()=>n.disabled,e=>{e&&s.value&&(s.value=!1)}),i({updatePosition:H,show:N,close:h,toggle:P}),(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[(0,t.unref)(g).trigger?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,(0,t.mergeProps)({key:0,ref_key:`triggerWrapperRef`,ref:x,class:[`s-ui-dropdown`,{"s-ui-dropdown--block":n.block}]},e.$attrs),[(0,t.renderSlot)(e.$slots,`trigger`,{open:s.value,toggle:P,close:h,isSheet:(0,t.unref)(u),triggerProps:F.value})],16)):(0,t.createCommentVNode)(``,!0),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:j.value,disabled:!A.value},[(0,t.unref)(u)?((0,t.openBlock)(),(0,t.createBlock)(_,{key:0,ref_key:`sheetRef`,ref:C,open:s.value,title:n.sheetTitle,"dismiss-on-overlay-click":n.dismissOnClickOutside,"dismiss-on-escape":n.dismissOnEscape,"has-open-descendant":(0,t.unref)(w),"content-id":O.value,onClose:h},{"header-left":(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`sheet-header-left`,{close:h})]),"header-right":(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`sheet-header-right`,{close:h})]),default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`content`,{resolvedPlacement:(0,t.unref)(M),isSheet:!0,close:h})]),_:3},8,[`open`,`title`,`dismiss-on-overlay-click`,`dismiss-on-escape`,`has-open-descendant`,`content-id`])):((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{key:1,name:`s-ui-dropdown`,onAfterLeave:(0,t.unref)(p)},{default:(0,t.withCtx)(()=>[(0,t.unref)(d)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,id:O.value,ref_key:`panelRef`,ref:S,class:(0,t.normalizeClass)([`s-ui-dropdown__panel`,{"s-ui-dropdown__panel--match-reference-width":n.matchReferenceWidth,"s-ui-dropdown__panel--ready":(0,t.unref)(V)}]),style:(0,t.normalizeStyle)((0,t.unref)(I)),role:`dialog`},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`s-ui-dropdown__surface`,[n.surfaceClass,{"s-ui-dropdown__surface--fit-viewport":J.value,"s-ui-dropdown__surface--with-arrow":n.arrow}]]),style:(0,t.normalizeStyle)(Y.value),"data-placement":(0,t.unref)(R)},[n.arrow?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`s-ui-dropdown__arrow`,{"s-ui-dropdown__arrow--overflow":(0,t.unref)(B)}]),style:(0,t.normalizeStyle)((0,t.unref)(z)),"aria-hidden":`true`},[...r[0]||=[(0,t.createElementVNode)(`span`,{class:`s-ui-dropdown__arrow-shape`},null,-1)]],6)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`div`,b,[(0,t.renderSlot)(e.$slots,`content`,{resolvedPlacement:(0,t.unref)(R),isSheet:!1,close:h})])],14,y)],14,v)):(0,t.createCommentVNode)(``,!0)]),_:3},8,[`onAfterLeave`]))],8,[`to`,`disabled`]))],64))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});
|
|
@@ -1,400 +0,0 @@
|
|
|
1
|
-
import { n as e, o as t, r as n, s as r, t as i } from "./useFloatingOverlay-TxzVisMJ.js";
|
|
2
|
-
import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, inject as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onBeforeUnmount as b, onScopeDispose as x, openBlock as S, provide as C, ref as w, renderSlot as T, shallowReactive as E, shallowRef as D, toDisplayString as O, toValue as k, unref as A, useId as j, useModel as M, useSlots as ee, useTemplateRef as N, watch as P, withCtx as F, withModifiers as I } from "vue";
|
|
3
|
-
import { useUiKitI18n as L } from "@shtabapp/ui-kit-primitives";
|
|
4
|
-
import { useElementHover as R, useEventListener as z, useMediaQuery as B, useScrollLock as V } from "@vueuse/core";
|
|
5
|
-
//#region src/components/SDropdown/SDropdown.types.ts
|
|
6
|
-
var H = 768, te = (e) => {
|
|
7
|
-
let t = w(e.value), n = w(e.value);
|
|
8
|
-
return P(e, (e) => {
|
|
9
|
-
if (e) {
|
|
10
|
-
t.value = !0, n.value = !0;
|
|
11
|
-
return;
|
|
12
|
-
}
|
|
13
|
-
t.value = !1;
|
|
14
|
-
}, { flush: "sync" }), {
|
|
15
|
-
isPanelShown: t,
|
|
16
|
-
isPanelActive: n,
|
|
17
|
-
handlePanelAfterLeave: () => {
|
|
18
|
-
e.value || (n.value = !1);
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
}, ne = (e, t) => {
|
|
22
|
-
let n = B(c(() => `(max-width: ${(k(t) || 768) - .02}px)`));
|
|
23
|
-
return c(() => k(e) && n.value);
|
|
24
|
-
}, U = Symbol("SDropdown"), re = (e) => {
|
|
25
|
-
let t = m(U, null), n = E(/* @__PURE__ */ new Set()), r = c(() => [...n].filter((e) => e.isOpen())), i = c(() => r.value.length > 0), a = c(() => r.value.flatMap((e) => e.getElements())), o = {
|
|
26
|
-
isOpen: () => k(e.open),
|
|
27
|
-
getElements: () => {
|
|
28
|
-
let t = k(e.element);
|
|
29
|
-
return t ? [t, ...a.value] : a.value;
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
return C(U, {
|
|
33
|
-
registerChild: (e) => {
|
|
34
|
-
n.add(e);
|
|
35
|
-
},
|
|
36
|
-
unregisterChild: (e) => {
|
|
37
|
-
n.delete(e);
|
|
38
|
-
}
|
|
39
|
-
}), t && (t.registerChild(o), x(() => t.unregisterChild(o))), {
|
|
40
|
-
hasOpenChild: i,
|
|
41
|
-
descendantElements: a
|
|
42
|
-
};
|
|
43
|
-
}, ie = (e) => {
|
|
44
|
-
if (!e) return null;
|
|
45
|
-
let t = e.getBoundingClientRect();
|
|
46
|
-
if (t.width > 0 || t.height > 0) return e;
|
|
47
|
-
let n = e.firstElementChild;
|
|
48
|
-
return n instanceof HTMLElement ? n : e;
|
|
49
|
-
}, W = {
|
|
50
|
-
OVERDRAG_LIMIT: 50,
|
|
51
|
-
CLOSE_DISTANCE_RATIO: .3,
|
|
52
|
-
CLOSE_DISTANCE_LIMIT: 140,
|
|
53
|
-
CLOSE_VELOCITY: .5,
|
|
54
|
-
SETTLE_TIMEOUT: 400,
|
|
55
|
-
INTERACTIVE_SELECTOR: "button, a[href], input, select, textarea, [role=\"button\"], [contenteditable=\"true\"]"
|
|
56
|
-
}, G = (e) => {
|
|
57
|
-
let t = D(0), n = D(!1), r = D(!1), i = null, a = 0, o = 0, s = 0, l = 0, u = 0, d, f = c(() => n.value || r.value), p = () => {
|
|
58
|
-
clearTimeout(d), d = void 0, r.value = !1;
|
|
59
|
-
}, m = () => {
|
|
60
|
-
r.value = !0, clearTimeout(d), d = setTimeout(p, W.SETTLE_TIMEOUT);
|
|
61
|
-
}, h = () => {
|
|
62
|
-
i = null, t.value = 0, n.value = !1, p();
|
|
63
|
-
}, g = () => k(e.popup)?.offsetHeight ?? 0, _ = () => {
|
|
64
|
-
let e = l - a;
|
|
65
|
-
if (e <= 0) return !1;
|
|
66
|
-
let t = u - s;
|
|
67
|
-
return (t > 0 ? (l - o) / t : 0) >= W.CLOSE_VELOCITY ? !0 : e >= Math.min(g() * W.CLOSE_DISTANCE_RATIO, W.CLOSE_DISTANCE_LIMIT);
|
|
68
|
-
}, v = (e) => {
|
|
69
|
-
i === null && (e.pointerType === "mouse" && e.button !== 0 || e.target instanceof Element && e.target.closest(W.INTERACTIVE_SELECTOR) || (i = e.pointerId, a = e.clientY, l = e.clientY, o = e.clientY, u = e.timeStamp, s = e.timeStamp, p(), n.value = !0));
|
|
70
|
-
}, y = (e) => {
|
|
71
|
-
i === e.pointerId && (o = l, s = u, l = e.clientY, u = e.timeStamp, t.value = Math.max(e.clientY - a, -W.OVERDRAG_LIMIT));
|
|
72
|
-
}, b = (a) => {
|
|
73
|
-
if (i === a.pointerId) {
|
|
74
|
-
if (i = null, n.value = !1, _()) {
|
|
75
|
-
r.value = !0, t.value = g() + W.OVERDRAG_LIMIT, e.onClose();
|
|
76
|
-
return;
|
|
77
|
-
}
|
|
78
|
-
if (t.value === 0) {
|
|
79
|
-
p();
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
m(), t.value = 0;
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
return z(() => k(e.handle), "pointerdown", v), z(window, "pointermove", y), z(window, "pointerup", b), z(window, "pointercancel", b), z(() => k(e.popup), "transitionend", (e) => {
|
|
86
|
-
e.propertyName !== "transform" || n.value || t.value !== 0 || p();
|
|
87
|
-
}), x(() => {
|
|
88
|
-
clearTimeout(d);
|
|
89
|
-
}), {
|
|
90
|
-
isActive: f,
|
|
91
|
-
popupStyles: c(() => {
|
|
92
|
-
if (f.value) return {
|
|
93
|
-
transform: `translate3d(0, ${t.value}px, 0)`,
|
|
94
|
-
transition: r.value ? "transform var(--s-ui-transition-duration-slow) var(--s-ui-transition-easing-standard)" : "none"
|
|
95
|
-
};
|
|
96
|
-
}),
|
|
97
|
-
reset: h
|
|
98
|
-
};
|
|
99
|
-
}, K = ["aria-label"], q = { class: "s-ui-dropdown-sheet__side" }, J = { class: "s-ui-dropdown-sheet__title" }, Y = { class: "s-ui-dropdown-sheet__side s-ui-dropdown-sheet__side--end" }, X = ["id"], ae = /* @__PURE__ */ p({
|
|
100
|
-
__name: "SDropdownSheet",
|
|
101
|
-
props: {
|
|
102
|
-
open: { type: Boolean },
|
|
103
|
-
title: { default: "" },
|
|
104
|
-
dismissOnOverlayClick: {
|
|
105
|
-
type: Boolean,
|
|
106
|
-
default: !0
|
|
107
|
-
},
|
|
108
|
-
dismissOnEscape: {
|
|
109
|
-
type: Boolean,
|
|
110
|
-
default: !0
|
|
111
|
-
},
|
|
112
|
-
hasOpenDescendant: {
|
|
113
|
-
type: Boolean,
|
|
114
|
-
default: !1
|
|
115
|
-
},
|
|
116
|
-
contentId: {}
|
|
117
|
-
},
|
|
118
|
-
emits: ["close"],
|
|
119
|
-
setup(t, { expose: n, emit: r }) {
|
|
120
|
-
let i = r, { t: a } = L(), o = N("overlayRef"), c = N("popupRef"), p = N("headerRef"), m = () => i("close"), { isActive: h, popupStyles: g, reset: v } = G({
|
|
121
|
-
handle: p,
|
|
122
|
-
popup: c,
|
|
123
|
-
onClose: m
|
|
124
|
-
}), x = V(() => typeof document > "u" ? null : document.body), C = () => {
|
|
125
|
-
t.dismissOnOverlayClick && m();
|
|
126
|
-
}, w = (e) => {
|
|
127
|
-
h.value && e.stopPropagation();
|
|
128
|
-
}, E = () => v(), D = null, k = () => {
|
|
129
|
-
let e = document.activeElement;
|
|
130
|
-
D = e instanceof HTMLElement ? e : null;
|
|
131
|
-
}, j = async () => {
|
|
132
|
-
await _();
|
|
133
|
-
let e = c.value;
|
|
134
|
-
!e || e.contains(document.activeElement) || e.focus({ preventScroll: !0 });
|
|
135
|
-
}, M = () => {
|
|
136
|
-
let e = D, t = !!c.value?.contains(document.activeElement);
|
|
137
|
-
D = null, !(!t || !e?.isConnected) && e.focus({ preventScroll: !0 });
|
|
138
|
-
};
|
|
139
|
-
return P(() => t.open, (e) => {
|
|
140
|
-
if (x.value = e, e) {
|
|
141
|
-
k(), j();
|
|
142
|
-
return;
|
|
143
|
-
}
|
|
144
|
-
M();
|
|
145
|
-
}, { immediate: !0 }), e({
|
|
146
|
-
open: () => t.open,
|
|
147
|
-
enabled: () => t.dismissOnEscape,
|
|
148
|
-
hasOpenDescendant: () => t.hasOpenDescendant,
|
|
149
|
-
onDismiss: m
|
|
150
|
-
}), b(() => {
|
|
151
|
-
x.value = !1;
|
|
152
|
-
}), n({ overlayElement: o }), (e, n) => (S(), l(s, {
|
|
153
|
-
name: "s-ui-dropdown-sheet",
|
|
154
|
-
onAfterLeave: E
|
|
155
|
-
}, {
|
|
156
|
-
default: F(() => [t.open ? (S(), d("div", {
|
|
157
|
-
key: 0,
|
|
158
|
-
ref_key: "overlayRef",
|
|
159
|
-
ref: o,
|
|
160
|
-
class: "s-ui-dropdown-sheet",
|
|
161
|
-
onClick: C
|
|
162
|
-
}, [f("div", {
|
|
163
|
-
ref_key: "popupRef",
|
|
164
|
-
ref: c,
|
|
165
|
-
class: "s-ui-dropdown-sheet__popup",
|
|
166
|
-
style: y(A(g)),
|
|
167
|
-
role: "dialog",
|
|
168
|
-
"aria-modal": "true",
|
|
169
|
-
"aria-label": t.title || A(a)("dropdown.sheet"),
|
|
170
|
-
tabindex: "-1",
|
|
171
|
-
onClickCapture: w,
|
|
172
|
-
onClick: n[0] ||= I(() => {}, ["stop"])
|
|
173
|
-
}, [f("header", {
|
|
174
|
-
ref_key: "headerRef",
|
|
175
|
-
ref: p,
|
|
176
|
-
class: "s-ui-dropdown-sheet__header"
|
|
177
|
-
}, [
|
|
178
|
-
n[1] ||= f("span", {
|
|
179
|
-
class: "s-ui-dropdown-sheet__handle",
|
|
180
|
-
"aria-hidden": "true"
|
|
181
|
-
}, null, -1),
|
|
182
|
-
f("div", q, [T(e.$slots, "header-left")]),
|
|
183
|
-
f("div", J, O(t.title), 1),
|
|
184
|
-
f("div", Y, [T(e.$slots, "header-right")])
|
|
185
|
-
], 512), f("div", {
|
|
186
|
-
id: t.contentId,
|
|
187
|
-
class: "s-ui-dropdown-sheet__content"
|
|
188
|
-
}, [T(e.$slots, "default")], 8, X)], 44, K)], 512)) : u("", !0)]),
|
|
189
|
-
_: 3
|
|
190
|
-
}));
|
|
191
|
-
}
|
|
192
|
-
}), oe = ["id"], se = ["data-placement"], ce = { class: "s-ui-dropdown__content" }, Z = /* @__PURE__ */ p({
|
|
193
|
-
inheritAttrs: !1,
|
|
194
|
-
__name: "SDropdown",
|
|
195
|
-
props: /*@__PURE__*/ h({
|
|
196
|
-
placement: { default: () => r.BOTTOM_START },
|
|
197
|
-
offset: { default: 8 },
|
|
198
|
-
flip: {
|
|
199
|
-
type: Boolean,
|
|
200
|
-
default: !0
|
|
201
|
-
},
|
|
202
|
-
shift: {
|
|
203
|
-
type: Boolean,
|
|
204
|
-
default: !0
|
|
205
|
-
},
|
|
206
|
-
matchReferenceWidth: {
|
|
207
|
-
type: Boolean,
|
|
208
|
-
default: !1
|
|
209
|
-
},
|
|
210
|
-
fitViewport: {
|
|
211
|
-
type: Boolean,
|
|
212
|
-
default: !1
|
|
213
|
-
},
|
|
214
|
-
surfaceClass: {},
|
|
215
|
-
teleportTo: {
|
|
216
|
-
type: [String, Boolean],
|
|
217
|
-
default: "body"
|
|
218
|
-
},
|
|
219
|
-
dismissOnClickOutside: {
|
|
220
|
-
type: Boolean,
|
|
221
|
-
default: !0
|
|
222
|
-
},
|
|
223
|
-
dismissOnEscape: {
|
|
224
|
-
type: Boolean,
|
|
225
|
-
default: !0
|
|
226
|
-
},
|
|
227
|
-
disabled: {
|
|
228
|
-
type: Boolean,
|
|
229
|
-
default: !1
|
|
230
|
-
},
|
|
231
|
-
reference: { default: null },
|
|
232
|
-
contentId: {},
|
|
233
|
-
viewportPadding: { default: 8 },
|
|
234
|
-
boundary: { default: () => t.CLIPPING_ANCESTORS },
|
|
235
|
-
block: {
|
|
236
|
-
type: Boolean,
|
|
237
|
-
default: !1
|
|
238
|
-
},
|
|
239
|
-
arrow: {
|
|
240
|
-
type: Boolean,
|
|
241
|
-
default: !1
|
|
242
|
-
},
|
|
243
|
-
showOnHover: {
|
|
244
|
-
type: Boolean,
|
|
245
|
-
default: !1
|
|
246
|
-
},
|
|
247
|
-
hoverLeaveDelay: { default: 100 },
|
|
248
|
-
sheet: {
|
|
249
|
-
type: Boolean,
|
|
250
|
-
default: !0
|
|
251
|
-
},
|
|
252
|
-
sheetBreakpoint: { default: () => 768 },
|
|
253
|
-
sheetTitle: { default: "" }
|
|
254
|
-
}, {
|
|
255
|
-
modelValue: {
|
|
256
|
-
type: Boolean,
|
|
257
|
-
default: !1
|
|
258
|
-
},
|
|
259
|
-
modelModifiers: {}
|
|
260
|
-
}),
|
|
261
|
-
emits: ["update:modelValue"],
|
|
262
|
-
setup(e, { expose: t }) {
|
|
263
|
-
let p = M(e, "modelValue"), m = ne(() => e.sheet, () => e.sheetBreakpoint), { isPanelShown: h, isPanelActive: _, handlePanelAfterLeave: b } = te(p), x = (e) => {
|
|
264
|
-
p.value = e;
|
|
265
|
-
}, C = () => x(!1), w = ee(), E = N("triggerWrapperRef"), D = N("panelRef"), O = N("sheetRef"), { hasOpenChild: k, descendantElements: I } = re({
|
|
266
|
-
open: p,
|
|
267
|
-
element: c(() => m.value ? O.value?.overlayElement ?? null : D.value)
|
|
268
|
-
}), L = j(), z = j(), B = c(() => e.contentId ?? L), V = c(() => w.trigger ? ie(E.value) : e.reference), H = c(() => e.teleportTo !== !1), U = c(() => e.teleportTo === !1 ? "body" : e.teleportTo), W = r.BOTTOM_START, G = () => {
|
|
269
|
-
e.disabled || x(!0);
|
|
270
|
-
}, K = () => {
|
|
271
|
-
e.disabled || (p.value = !p.value);
|
|
272
|
-
}, q = c(() => ({
|
|
273
|
-
id: z,
|
|
274
|
-
"aria-expanded": p.value,
|
|
275
|
-
"aria-haspopup": "dialog",
|
|
276
|
-
"aria-controls": B.value
|
|
277
|
-
})), { panelStyles: J, panelMaxHeight: Y, resolvedPlacement: X, arrowStyles: Z, isArrowOverflow: le, isPositionReady: ue, updatePosition: de } = i({
|
|
278
|
-
open: () => _.value && !m.value,
|
|
279
|
-
onOpenChange: x,
|
|
280
|
-
reference: () => V.value,
|
|
281
|
-
panel: () => D.value,
|
|
282
|
-
placement: () => e.placement,
|
|
283
|
-
offset: () => e.offset,
|
|
284
|
-
flip: () => e.flip,
|
|
285
|
-
shift: () => e.shift,
|
|
286
|
-
matchReferenceWidth: () => e.matchReferenceWidth,
|
|
287
|
-
fitViewport: () => e.fitViewport,
|
|
288
|
-
dismissOnClickOutside: () => e.dismissOnClickOutside,
|
|
289
|
-
dismissOnEscape: () => e.dismissOnEscape,
|
|
290
|
-
viewportPadding: () => e.viewportPadding,
|
|
291
|
-
arrow: () => e.arrow,
|
|
292
|
-
boundary: () => e.boundary,
|
|
293
|
-
clickOutsideIgnore: I,
|
|
294
|
-
hasOpenDescendant: k
|
|
295
|
-
}), Q = c(() => e.showOnHover && !m.value), fe = c(() => Q.value ? n(V.value) : null), pe = c(() => Q.value ? D.value : null), $ = R(fe, { delayLeave: e.hoverLeaveDelay }), me = R(pe, { delayLeave: e.hoverLeaveDelay });
|
|
296
|
-
P([
|
|
297
|
-
$,
|
|
298
|
-
me,
|
|
299
|
-
k,
|
|
300
|
-
Q,
|
|
301
|
-
() => e.disabled
|
|
302
|
-
], () => {
|
|
303
|
-
if (Q.value) {
|
|
304
|
-
if (e.disabled) {
|
|
305
|
-
x(!1);
|
|
306
|
-
return;
|
|
307
|
-
}
|
|
308
|
-
x($.value || me.value || k.value);
|
|
309
|
-
}
|
|
310
|
-
});
|
|
311
|
-
let he = c(() => !!Y.value), ge = c(() => {
|
|
312
|
-
if (Y.value) return { maxHeight: `${Y.value}px` };
|
|
313
|
-
});
|
|
314
|
-
return P(() => e.disabled, (e) => {
|
|
315
|
-
e && p.value && (p.value = !1);
|
|
316
|
-
}), t({
|
|
317
|
-
updatePosition: de,
|
|
318
|
-
show: G,
|
|
319
|
-
close: C,
|
|
320
|
-
toggle: K
|
|
321
|
-
}), (t, n) => (S(), d(a, null, [A(w).trigger ? (S(), d("span", g({
|
|
322
|
-
key: 0,
|
|
323
|
-
ref_key: "triggerWrapperRef",
|
|
324
|
-
ref: E,
|
|
325
|
-
class: ["s-ui-dropdown", { "s-ui-dropdown--block": e.block }]
|
|
326
|
-
}, t.$attrs), [T(t.$slots, "trigger", {
|
|
327
|
-
open: p.value,
|
|
328
|
-
toggle: K,
|
|
329
|
-
close: C,
|
|
330
|
-
isSheet: A(m),
|
|
331
|
-
triggerProps: q.value
|
|
332
|
-
})], 16)) : u("", !0), (S(), l(o, {
|
|
333
|
-
to: U.value,
|
|
334
|
-
disabled: !H.value
|
|
335
|
-
}, [A(m) ? (S(), l(ae, {
|
|
336
|
-
key: 0,
|
|
337
|
-
ref_key: "sheetRef",
|
|
338
|
-
ref: O,
|
|
339
|
-
open: p.value,
|
|
340
|
-
title: e.sheetTitle,
|
|
341
|
-
"dismiss-on-overlay-click": e.dismissOnClickOutside,
|
|
342
|
-
"dismiss-on-escape": e.dismissOnEscape,
|
|
343
|
-
"has-open-descendant": A(k),
|
|
344
|
-
"content-id": B.value,
|
|
345
|
-
onClose: C
|
|
346
|
-
}, {
|
|
347
|
-
"header-left": F(() => [T(t.$slots, "sheet-header-left", { close: C })]),
|
|
348
|
-
"header-right": F(() => [T(t.$slots, "sheet-header-right", { close: C })]),
|
|
349
|
-
default: F(() => [T(t.$slots, "content", {
|
|
350
|
-
resolvedPlacement: A(W),
|
|
351
|
-
isSheet: !0,
|
|
352
|
-
close: C
|
|
353
|
-
})]),
|
|
354
|
-
_: 3
|
|
355
|
-
}, 8, [
|
|
356
|
-
"open",
|
|
357
|
-
"title",
|
|
358
|
-
"dismiss-on-overlay-click",
|
|
359
|
-
"dismiss-on-escape",
|
|
360
|
-
"has-open-descendant",
|
|
361
|
-
"content-id"
|
|
362
|
-
])) : (S(), l(s, {
|
|
363
|
-
key: 1,
|
|
364
|
-
name: "s-ui-dropdown",
|
|
365
|
-
onAfterLeave: A(b)
|
|
366
|
-
}, {
|
|
367
|
-
default: F(() => [A(h) ? (S(), d("div", {
|
|
368
|
-
key: 0,
|
|
369
|
-
id: B.value,
|
|
370
|
-
ref_key: "panelRef",
|
|
371
|
-
ref: D,
|
|
372
|
-
class: v(["s-ui-dropdown__panel", {
|
|
373
|
-
"s-ui-dropdown__panel--match-reference-width": e.matchReferenceWidth,
|
|
374
|
-
"s-ui-dropdown__panel--ready": A(ue)
|
|
375
|
-
}]),
|
|
376
|
-
style: y(A(J)),
|
|
377
|
-
role: "dialog"
|
|
378
|
-
}, [f("div", {
|
|
379
|
-
class: v(["s-ui-dropdown__surface", [e.surfaceClass, {
|
|
380
|
-
"s-ui-dropdown__surface--fit-viewport": he.value,
|
|
381
|
-
"s-ui-dropdown__surface--with-arrow": e.arrow
|
|
382
|
-
}]]),
|
|
383
|
-
style: y(ge.value),
|
|
384
|
-
"data-placement": A(X)
|
|
385
|
-
}, [e.arrow ? (S(), d("div", {
|
|
386
|
-
key: 0,
|
|
387
|
-
class: v(["s-ui-dropdown__arrow", { "s-ui-dropdown__arrow--overflow": A(le) }]),
|
|
388
|
-
style: y(A(Z)),
|
|
389
|
-
"aria-hidden": "true"
|
|
390
|
-
}, [...n[0] ||= [f("span", { class: "s-ui-dropdown__arrow-shape" }, null, -1)]], 6)) : u("", !0), f("div", ce, [T(t.$slots, "content", {
|
|
391
|
-
resolvedPlacement: A(X),
|
|
392
|
-
isSheet: !1,
|
|
393
|
-
close: C
|
|
394
|
-
})])], 14, se)], 14, oe)) : u("", !0)]),
|
|
395
|
-
_: 3
|
|
396
|
-
}, 8, ["onAfterLeave"]))], 8, ["to", "disabled"]))], 64));
|
|
397
|
-
}
|
|
398
|
-
});
|
|
399
|
-
//#endregion
|
|
400
|
-
export { H as n, Z as t };
|
|
@@ -1,227 +0,0 @@
|
|
|
1
|
-
import { i as e, n as t, r as n, t as r } from "./SButton-B21hubD2.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, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as ie, useTemplateRef as ae, withModifiers as oe } from "vue";
|
|
4
|
-
import { ESSkeletonType as v, SIcon as y, SSkeleton as se, useUiKitI18n as ce } from "@shtabapp/ui-kit-primitives";
|
|
5
|
-
//#region src/components/SList/utils/context.ts
|
|
6
|
-
var b = Symbol("sListInjectionKey"), x = /* @__PURE__ */ function(e) {
|
|
7
|
-
return e.NEUTRAL = "neutral", e.SECONDARY = "secondary", e.MAIN = "main", e.ERROR = "error", e.BILLING = "billing", e;
|
|
8
|
-
}({}), S = /* @__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
|
-
}({}), C = new Set([S.OPTION, S.TREEITEM]), w = new Set([S.MENUITEMCHECKBOX, S.MENUITEMRADIO]), T = new Set([
|
|
11
|
-
S.TREEITEM,
|
|
12
|
-
S.MENUITEM,
|
|
13
|
-
S.BUTTON,
|
|
14
|
-
S.LINK
|
|
15
|
-
]), E = ({ role: e, selected: t }) => ({
|
|
16
|
-
"aria-selected": C.has(e) && t ? !0 : void 0,
|
|
17
|
-
"aria-checked": w.has(e) ? t : void 0
|
|
18
|
-
}), D = ({ role: e, expandable: t, expanded: n, loading: r, depth: i }) => ({
|
|
19
|
-
"aria-expanded": T.has(e) && t && !r ? n : void 0,
|
|
20
|
-
"aria-level": e === S.TREEITEM ? i + 1 : void 0
|
|
21
|
-
}), O = ({ disabled: e, readonly: t, loading: n }) => ({
|
|
22
|
-
"aria-disabled": e || t || n ? !0 : void 0,
|
|
23
|
-
"aria-busy": n ? !0 : void 0
|
|
24
|
-
}), k = (e) => e.role === S.NONE ? { role: e.role } : {
|
|
25
|
-
role: e.role,
|
|
26
|
-
...E(e),
|
|
27
|
-
...D(e),
|
|
28
|
-
...O(e)
|
|
29
|
-
}, A = ["id", "tabindex"], j = {
|
|
30
|
-
key: 0,
|
|
31
|
-
class: "s-ui-list-item__level"
|
|
32
|
-
}, M = { class: "s-ui-list-item__body" }, N = {
|
|
33
|
-
key: 0,
|
|
34
|
-
class: "s-ui-list-item__icon-left"
|
|
35
|
-
}, P = { class: "s-ui-list-item__text" }, F = {
|
|
36
|
-
key: 0,
|
|
37
|
-
class: "s-ui-list-item__title s-ui-typography-label-14-medium"
|
|
38
|
-
}, I = {
|
|
39
|
-
key: 1,
|
|
40
|
-
class: "s-ui-list-item__subtitle s-ui-typography-body-12-regular"
|
|
41
|
-
}, L = {
|
|
42
|
-
key: 1,
|
|
43
|
-
class: "s-ui-list-item__title-action"
|
|
44
|
-
}, R = {
|
|
45
|
-
key: 1,
|
|
46
|
-
class: "s-ui-list-item__actions"
|
|
47
|
-
}, z = { class: "s-ui-list-item__actions-reveal" }, B = { class: "s-ui-list-item__actions-inner" }, V = {
|
|
48
|
-
key: 0,
|
|
49
|
-
class: "s-ui-list-item__trailing"
|
|
50
|
-
}, H = {
|
|
51
|
-
key: 1,
|
|
52
|
-
class: "s-ui-list-item__action-end"
|
|
53
|
-
}, U = ".s-ui-list-item__expand, .s-ui-list-item__title-action, .s-ui-list-item__actions", W = 16, G = "a, button, input, select, textarea, [role=\"button\"], [role=\"link\"], [contenteditable=\"true\"]", K = /* @__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: () => x.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
|
-
selected: {
|
|
83
|
-
type: Boolean,
|
|
84
|
-
default: !1
|
|
85
|
-
},
|
|
86
|
-
active: {
|
|
87
|
-
type: Boolean,
|
|
88
|
-
default: !1
|
|
89
|
-
},
|
|
90
|
-
disabled: {
|
|
91
|
-
type: Boolean,
|
|
92
|
-
default: !1
|
|
93
|
-
},
|
|
94
|
-
readonly: {
|
|
95
|
-
type: Boolean,
|
|
96
|
-
default: !1
|
|
97
|
-
},
|
|
98
|
-
loading: {
|
|
99
|
-
type: Boolean,
|
|
100
|
-
default: !1
|
|
101
|
-
},
|
|
102
|
-
title: {},
|
|
103
|
-
subtitle: {},
|
|
104
|
-
iconLeft: {},
|
|
105
|
-
iconLeftSize: {},
|
|
106
|
-
rowKey: {},
|
|
107
|
-
revealRight: { type: Boolean },
|
|
108
|
-
expandOnClick: { type: Boolean },
|
|
109
|
-
role: {}
|
|
110
|
-
},
|
|
111
|
-
emits: [
|
|
112
|
-
"click",
|
|
113
|
-
"toggleExpand",
|
|
114
|
-
"keydown"
|
|
115
|
-
],
|
|
116
|
-
setup(d, { expose: C, emit: w }) {
|
|
117
|
-
let T = w, E = a(() => ({
|
|
118
|
-
disabled: d.disabled,
|
|
119
|
-
readonly: d.readonly
|
|
120
|
-
})), D = ie(), O = ae("listItemElementRef"), K = te(b, null), { t: q } = ce(), J = i({
|
|
121
|
-
group: () => K,
|
|
122
|
-
value: () => d.rowKey,
|
|
123
|
-
el: () => O.value,
|
|
124
|
-
disabled: () => d.disabled || d.loading,
|
|
125
|
-
interactive: () => !d.readonly && !d.loading
|
|
126
|
-
}), le = a(() => d.variant === x.BILLING && !d.disabled), ue = [
|
|
127
|
-
"Enter",
|
|
128
|
-
" ",
|
|
129
|
-
"Spacebar"
|
|
130
|
-
], Y = a(() => K && d.rowKey ? K.isExpanded(d.rowKey) : d.expanded), de = a(() => Y.value ? q("listItem.collapse") : q("listItem.expand")), X = a(() => J.isInGroup.value ? J.isActive.value : d.selected), fe = a(() => K && d.rowKey ? K.activeKey() === d.rowKey : d.active), pe = a(() => d.revealRight ? !0 : K ? K.revealRight() : !1), me = a(() => d.expandOnClick ? !0 : K ? K.expandOnClick() : !1), he = a(() => {
|
|
131
|
-
if (!(!K || !d.rowKey)) return K.getItemOptionId(d.rowKey);
|
|
132
|
-
}), Z = a(() => d.role ? d.role : K ? K.itemRole() : S.BUTTON), ge = a(() => k({
|
|
133
|
-
role: Z.value,
|
|
134
|
-
selected: X.value,
|
|
135
|
-
expandable: d.expandable,
|
|
136
|
-
expanded: Y.value,
|
|
137
|
-
disabled: d.disabled,
|
|
138
|
-
readonly: d.readonly,
|
|
139
|
-
loading: d.loading,
|
|
140
|
-
depth: d.depth
|
|
141
|
-
})), _e = a(() => {
|
|
142
|
-
if (K?.usesActiveDescendantNavigation()) return -1;
|
|
143
|
-
if (!(d.disabled || d.readonly || d.loading || Z.value === S.NONE)) return J.tabIndex.value === void 0 ? 0 : J.tabIndex.value;
|
|
144
|
-
}), Q = a(() => ({
|
|
145
|
-
"--s-ui-list-item-depth": String(d.depth),
|
|
146
|
-
"--s-ui-list-item-icon-size": d.iconLeftSize === void 0 ? void 0 : `${d.iconLeftSize}px`
|
|
147
|
-
})), ve = a(() => [`s-ui-list-item--variant-${d.variant}`, {
|
|
148
|
-
"s-ui-list-item--tiny": d.tiny,
|
|
149
|
-
"s-ui-list-item--compact": d.compact,
|
|
150
|
-
"s-ui-list-item--flush": d.flush,
|
|
151
|
-
"s-ui-list-item--selected": X.value,
|
|
152
|
-
"s-ui-list-item--active": fe.value,
|
|
153
|
-
"s-ui-list-item--disabled": d.disabled,
|
|
154
|
-
"s-ui-list-item--readonly": d.readonly,
|
|
155
|
-
"s-ui-list-item--loading": d.loading,
|
|
156
|
-
"s-ui-list-item--expandable": d.expandable,
|
|
157
|
-
"s-ui-list-item--reveal-right": pe.value
|
|
158
|
-
}]), $ = () => {
|
|
159
|
-
if (K && d.rowKey) {
|
|
160
|
-
K.toggleExpanded(d.rowKey);
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
T("toggleExpand");
|
|
164
|
-
}, ye = () => {
|
|
165
|
-
d.disabled || d.readonly || d.loading || $();
|
|
166
|
-
}, be = (e) => e.target instanceof Element && !!e.target.closest(U) && !!e.target.closest(G), xe = (e) => {
|
|
167
|
-
d.disabled || d.readonly || d.loading || be(e) || (d.expandable && me.value && (K && d.rowKey ? K.toggleExpanded(d.rowKey) : T("toggleExpand")), K && d.rowKey && K.setActiveKey(d.rowKey), J.isInGroup.value && J.handleClick(), T("click", e));
|
|
168
|
-
}, Se = (e) => !d.expandable || K?.handlesTreeKeyboardNavigation() || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.key === "ArrowRight" === Y.value ? !1 : (e.preventDefault(), $(), !0), Ce = (e) => K || J.isInGroup.value || !ue.includes(e.key) || e.target !== O.value ? !1 : (e.preventDefault(), O.value?.click(), !0), we = (e) => {
|
|
169
|
-
d.disabled || d.readonly || d.loading || (!Se(e) && !Ce(e) && J.isInGroup.value && J.handleKeydown(e), T("keydown", e));
|
|
170
|
-
};
|
|
171
|
-
return C({ listItemElementRef: O }), (i, a) => (m(), c("div", ne({
|
|
172
|
-
ref_key: "listItemElementRef",
|
|
173
|
-
ref: O,
|
|
174
|
-
id: he.value,
|
|
175
|
-
class: ["s-ui-list-item", ve.value],
|
|
176
|
-
style: Q.value,
|
|
177
|
-
tabindex: _e.value
|
|
178
|
-
}, ge.value, {
|
|
179
|
-
onClick: xe,
|
|
180
|
-
onKeydown: we
|
|
181
|
-
}), [d.loading ? (m(), o(_(se), {
|
|
182
|
-
key: 0,
|
|
183
|
-
type: _(v).S_LIST_ITEM
|
|
184
|
-
}, null, 8, ["type"])) : (m(), c(ee, { key: 1 }, [
|
|
185
|
-
d.expandable || d.depth || d.hasLevel || _(D).level ? (m(), c("div", j, [h(i.$slots, "level", {}, () => [d.expandable ? (m(), o(_(r), {
|
|
186
|
-
key: 0,
|
|
187
|
-
class: re(["s-ui-list-item__expand", { "s-ui-list-item__expand--expanded": Y.value }]),
|
|
188
|
-
appearance: _(t).BARE,
|
|
189
|
-
variant: _(e).NEUTRAL,
|
|
190
|
-
size: _(n).SMALL,
|
|
191
|
-
icon: "chevronMiniRight",
|
|
192
|
-
disabled: d.disabled || d.readonly,
|
|
193
|
-
tabindex: -1,
|
|
194
|
-
"aria-label": de.value,
|
|
195
|
-
onClick: oe(ye, ["stop"])
|
|
196
|
-
}, null, 8, [
|
|
197
|
-
"class",
|
|
198
|
-
"appearance",
|
|
199
|
-
"variant",
|
|
200
|
-
"size",
|
|
201
|
-
"disabled",
|
|
202
|
-
"aria-label"
|
|
203
|
-
])) : s("", !0)])])) : s("", !0),
|
|
204
|
-
l("div", M, [
|
|
205
|
-
d.iconLeft || _(D)["icon-left"] ? (m(), c("div", N, [h(i.$slots, "icon-left", {}, () => [d.iconLeft ? (m(), o(_(y), {
|
|
206
|
-
key: 0,
|
|
207
|
-
name: d.iconLeft,
|
|
208
|
-
size: d.iconLeftSize ?? W,
|
|
209
|
-
billing: le.value
|
|
210
|
-
}, null, 8, [
|
|
211
|
-
"name",
|
|
212
|
-
"size",
|
|
213
|
-
"billing"
|
|
214
|
-
])) : s("", !0)])])) : s("", !0),
|
|
215
|
-
l("div", P, [d.title || _(D).title ? (m(), c("span", F, [h(i.$slots, "title", {}, () => [u(g(d.title), 1)])])) : s("", !0), d.subtitle || _(D).subtitle ? (m(), c("span", I, [h(i.$slots, "subtitle", {}, () => [u(g(d.subtitle), 1)])])) : s("", !0)]),
|
|
216
|
-
_(D)["title-action"] ? (m(), c("div", L, [h(i.$slots, "title-action", p(f(E.value)))])) : s("", !0)
|
|
217
|
-
]),
|
|
218
|
-
_(D).trailing || _(D).right || _(D)["action-end"] ? (m(), c("div", R, [l("div", z, [l("div", B, [
|
|
219
|
-
_(D).trailing ? (m(), c("div", V, [h(i.$slots, "trailing", p(f(E.value)))])) : s("", !0),
|
|
220
|
-
h(i.$slots, "right", p(f(E.value))),
|
|
221
|
-
_(D)["action-end"] ? (m(), c("div", H, [h(i.$slots, "action-end", p(f(E.value)))])) : s("", !0)
|
|
222
|
-
])])])) : s("", !0)
|
|
223
|
-
], 64))], 16, A));
|
|
224
|
-
}
|
|
225
|
-
});
|
|
226
|
-
//#endregion
|
|
227
|
-
export { b as i, S as n, x as r, K as t };
|