@shtabapp/ui-kit 1.63.0 → 1.64.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 -2
- package/dist/SColorPicker-BRSi0Xhm.cjs +1 -0
- package/dist/{SColorPicker-BL-zrskU.js → SColorPicker-Djr-R81h.js} +2 -1
- package/dist/SDropdownMenu-2koPU6IG.js +38 -0
- package/dist/SDropdownMenu-k9SxaFVH.cjs +1 -0
- package/dist/SList-D0PDc8VN.cjs +1 -0
- package/dist/SList-D2K9dNsj.js +465 -0
- package/dist/SSelect-CRlkCLik.cjs +1 -0
- package/dist/SSelect-D6taevzT.js +650 -0
- package/dist/STable-NbCfen0n.cjs +1 -0
- package/dist/STable-aS1eGuVB.js +3445 -0
- package/dist/components/SList/SList.vue.d.ts.map +1 -1
- package/dist/components/SList/utils/resolveListItemFields.d.ts +1 -1
- package/dist/components/SList/utils/resolveListItemFields.d.ts.map +1 -1
- package/dist/components/STable/STable.types.d.ts +317 -0
- package/dist/components/STable/STable.types.d.ts.map +1 -0
- package/dist/components/STable/STable.vue.d.ts +154 -0
- package/dist/components/STable/STable.vue.d.ts.map +1 -0
- package/dist/components/STable/constants/tableSizes.d.ts +76 -0
- package/dist/components/STable/constants/tableSizes.d.ts.map +1 -0
- package/dist/components/STable/index.d.ts +4 -0
- package/dist/components/STable/index.d.ts.map +1 -0
- package/dist/components/STable/parts/STableCellText.vue.d.ts +23 -0
- package/dist/components/STable/parts/STableCellText.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableCheckbox.vue.d.ts +17 -0
- package/dist/components/STable/parts/STableCheckbox.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableContentRow.vue.d.ts +41 -0
- package/dist/components/STable/parts/STableContentRow.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableGroupRow.vue.d.ts +55 -0
- package/dist/components/STable/parts/STableGroupRow.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableHeaderCell.vue.d.ts +36 -0
- package/dist/components/STable/parts/STableHeaderCell.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableHint.vue.d.ts +7 -0
- package/dist/components/STable/parts/STableHint.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STablePlaceholderRow.vue.d.ts +25 -0
- package/dist/components/STable/parts/STablePlaceholderRow.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableRow.vue.d.ts +67 -0
- package/dist/components/STable/parts/STableRow.vue.d.ts.map +1 -0
- package/dist/components/STable/parts/STableSkeletonRow.vue.d.ts +27 -0
- package/dist/components/STable/parts/STableSkeletonRow.vue.d.ts.map +1 -0
- package/dist/components/STable/utils/tableDndShared.d.ts +17 -0
- package/dist/components/STable/utils/tableDndShared.d.ts.map +1 -0
- package/dist/components/STable/utils/useFlatTableRows.d.ts +62 -0
- package/dist/components/STable/utils/useFlatTableRows.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableCellPlans.d.ts +48 -0
- package/dist/components/STable/utils/useTableCellPlans.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableColumnDnd.d.ts +28 -0
- package/dist/components/STable/utils/useTableColumnDnd.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableColumnResize.d.ts +24 -0
- package/dist/components/STable/utils/useTableColumnResize.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableColumns.d.ts +86 -0
- package/dist/components/STable/utils/useTableColumns.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableGridFocus.d.ts +79 -0
- package/dist/components/STable/utils/useTableGridFocus.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableGridKeyboard.d.ts +36 -0
- package/dist/components/STable/utils/useTableGridKeyboard.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableRenderEntries.d.ts +56 -0
- package/dist/components/STable/utils/useTableRenderEntries.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableRowDnd.d.ts +37 -0
- package/dist/components/STable/utils/useTableRowDnd.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableRowHydration.d.ts +29 -0
- package/dist/components/STable/utils/useTableRowHydration.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableScrollScale.d.ts +34 -0
- package/dist/components/STable/utils/useTableScrollScale.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableSelection.d.ts +27 -0
- package/dist/components/STable/utils/useTableSelection.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableServiceRows.d.ts +57 -0
- package/dist/components/STable/utils/useTableServiceRows.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableSorting.d.ts +21 -0
- package/dist/components/STable/utils/useTableSorting.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableStickyRows.d.ts +38 -0
- package/dist/components/STable/utils/useTableStickyRows.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableStyleVars.d.ts +22 -0
- package/dist/components/STable/utils/useTableStyleVars.d.ts.map +1 -0
- package/dist/components/STable/utils/useTableVirtualRows.d.ts +56 -0
- package/dist/components/STable/utils/useTableVirtualRows.d.ts.map +1 -0
- package/dist/composables/treeKeyboardNavigation.d.ts +26 -0
- package/dist/composables/treeKeyboardNavigation.d.ts.map +1 -0
- package/dist/composables/useFlatTreeList.d.ts +1 -0
- package/dist/composables/useFlatTreeList.d.ts.map +1 -1
- package/dist/entries/color-picker.cjs +1 -1
- package/dist/entries/color-picker.js +1 -1
- package/dist/entries/list.cjs +1 -1
- package/dist/entries/list.js +1 -1
- package/dist/entries/select.cjs +1 -1
- package/dist/entries/select.js +1 -1
- package/dist/entries/table.cjs +1 -0
- package/dist/entries/table.d.ts +3 -0
- package/dist/entries/table.d.ts.map +1 -0
- package/dist/entries/table.js +2 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +111 -108
- package/dist/treeKeyboardNavigation-BOz2SVus.cjs +1 -0
- package/dist/treeKeyboardNavigation-SmxTdnDz.js +131 -0
- package/dist/uikit-components.css +1 -1
- package/package.json +14 -3
- package/dist/SColorPicker-CvhpJEj1.cjs +0 -1
- package/dist/SList-C39LrsoS.js +0 -590
- package/dist/SList-Du0gqyFs.cjs +0 -1
- package/dist/SSelect-BkX3VuCr.js +0 -682
- package/dist/SSelect-CHWKMbB_.cjs +0 -1
- package/dist/components/SList/utils/treeKeyboardNavigation.d.ts +0 -16
- package/dist/components/SList/utils/treeKeyboardNavigation.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,21 @@
|
|
|
1
|
+
## [@shtabapp/ui-kit-v1.64.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.63.0...@shtabapp/ui-kit@1.64.0) (2026-08-28)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- **s-table:** сжатие прокрутки, прогрессивная гидрация, гибкие колонки, sticky-футеры без моргания ([1905a03](https://gitlab.com/mstikharev/shtab-ui-kit/commit/1905a037ecaa9014e2b1b2d11e09a7e1e43a4999))
|
|
6
|
+
- **s-table:** таблица с виртуализацией, деревьями и sticky-слоями ([732687a](https://gitlab.com/mstikharev/shtab-ui-kit/commit/732687ae3b31201b8b426f21661e47eb1c66f824))
|
|
7
|
+
- stable rework wip ([4a0fc41](https://gitlab.com/mstikharev/shtab-ui-kit/commit/4a0fc41338a5d8d3ac985e92d077cc1b2e118bf2))
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- **s-table:** пустая строка в ячейке показывает плейсхолдер, ноль остаётся видимым ([e01d1dd](https://gitlab.com/mstikharev/shtab-ui-kit/commit/e01d1dde0d0fec083fcf1109711669f0be9972de))
|
|
12
|
+
|
|
1
13
|
## [@shtabapp/ui-kit-v1.63.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.62.0...@shtabapp/ui-kit@1.63.0) (2026-08-14)
|
|
2
14
|
|
|
3
15
|
### Features
|
|
4
16
|
|
|
5
|
-
|
|
6
|
-
|
|
17
|
+
- schart chart fixes, fixes ([0e9bc5c](https://gitlab.com/mstikharev/shtab-ui-kit/commit/0e9bc5c27067b310891812bdf96c36771a0da170))
|
|
18
|
+
- schartbar ([5a128f5](https://gitlab.com/mstikharev/shtab-ui-kit/commit/5a128f557e88e2b6a6aecea2570a4e44ff684315))
|
|
7
19
|
|
|
8
20
|
## [@shtabapp/ui-kit-v1.62.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.61.0...@shtabapp/ui-kit@1.62.0) (2026-08-08)
|
|
9
21
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require("./contrastSurfaceTextColor-BRjRzXyZ.cjs"),t=require("./SColorPalette-CqIA4Qtp.cjs"),n=require("./colorValue-Dda7fKd3.cjs"),r=require("./SButton.types-UKroD-ev.cjs"),i=require("./SButton-9dLbCJvh.cjs"),a=require("./useFloatingOverlay-B1UCUYQQ.cjs"),o=require("./SDropdown-LNVnMol3.cjs"),s=require("./SDropdownMenu-k9SxaFVH.cjs"),c=require("./SSelect-CRlkCLik.cjs");let l=require("vue"),u=require("@shtabapp/ui-kit-primitives"),d=require("@vueuse/core");var f=e=>Math.max(0,Math.min(255,Math.round(e))),p=e=>{let t=e%360;return t<0?t+360:t},m=e=>Math.max(0,Math.min(100,Math.round(e))),h=e=>{let t=e.slice(1);if(t.length===3){let e=t[0],n=t[1],r=t[2];return!e||!n||!r?void 0:`${e}${e}${n}${n}${r}${r}`}if(t.length===6||t.length===8)return t.slice(0,6)},g=e=>{let t=h(e);if(!t)return;let n=Number.parseInt(t.slice(0,2),16),r=Number.parseInt(t.slice(2,4),16),i=Number.parseInt(t.slice(4,6),16);if(!(Number.isNaN(n)||Number.isNaN(r)||Number.isNaN(i)))return{first:n,second:r,third:i}},_=e=>{let t=f(e.first),n=f(e.second),r=f(e.third);return`#${t.toString(16).padStart(2,`0`).toUpperCase()}${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}`},v=e=>{let t=g(e);if(!t)return;let n=t.first/255,r=t.second/255,i=t.third/255,a=Math.max(n,r,i),o=Math.min(n,r,i),s=a-o,c=0,l=(a+o)/2;s!==0&&(c=a===n?((r-i)/s+(r<i?6:0))*60:a===r?((i-n)/s+2)*60:((n-r)/s+4)*60);let u=0;return s!==0&&(u=l>.5?s/(2-a-o):s/(a+o)),{first:Math.round(c),second:Math.round(u*100),third:Math.round(l*100)}},y=e=>{let t=p(e.first),n=m(e.second)/100,r=m(e.third)/100,i=e=>{let i=(t+e)/30;return f((r-n*Math.min(r,1-r)*Math.max(-1,Math.min(i%2-1,1)))*255)};return _({first:i(0),second:i(8),third:i(4)})},b=t=>{let n=t.toUpperCase(),r=n.startsWith(`#`)?n.slice(1):n;if(!/^[0-9A-F]{3}$/.test(r)&&!/^[0-9A-F]{6}$/.test(r))return;let i=`#${r}`;if(e.n(i))return _(g(i)??{first:0,second:0,third:0})},x=e=>e.slice(1).toUpperCase(),S=e=>{let t=e.first/255,n=e.second/255,r=e.third/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:a/i;return{hue:o,saturation:s,value:i}},C=e=>{let t=e.value*e.saturation,n=e.hue/60,r=t*(1-Math.abs(n%2-1)),i=e.value-t,a=0,o=0,s=0;return n>=0&&n<1?(a=t,o=r):n>=1&&n<2?(a=r,o=t):n>=2&&n<3?(o=t,s=r):n>=3&&n<4?(o=r,s=t):n>=4&&n<5?(a=r,s=t):(a=t,s=r),{first:f((a+i)*255),second:f((o+i)*255),third:f((s+i)*255)}},w=e=>{let t=g(e);if(t)return S(t)},T=e=>_(C(e)),E=[t.o.HEX,t.o.RGB,t.o.HSL],D={[t.o.HEX]:`Hex`,[t.o.RGB]:`RGB`,[t.o.HSL]:`HSL`},O=e=>{let t=getComputedStyle(e).backgroundColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(!t)return;let n=Number.parseInt(t[1]??`0`,10),r=Number.parseInt(t[2]??`0`,10),i=Number.parseInt(t[3]??`0`,10);return`#${n.toString(16).padStart(2,`0`).toUpperCase()}${r.toString(16).padStart(2,`0`).toUpperCase()}${i.toString(16).padStart(2,`0`).toUpperCase()}`},k=(t,r)=>{if(n.n(t)&&e.n(t))return t;if(r)return O(r)},A=(e,n)=>n===t.o.HEX?x(e):n===t.o.RGB?g(e)??{first:0,second:0,third:0}:v(e)??{first:0,second:0,third:0},j=e=>{let t=Number.parseInt(e,10);if(!Number.isNaN(t))return t},M=(e,n)=>{if(e===t.o.HEX)return typeof n==`string`?b(n):void 0;if(typeof n==`string`)return;if(e===t.o.RGB){let e=_({first:j(String(n.first))??0,second:j(String(n.second))??0,third:j(String(n.third))??0});return g(e)?e:void 0}let r=y({first:j(String(n.first))??0,second:j(String(n.second))??0,third:j(String(n.third))??0});if(r&&v(r))return r},N=17,P=`#000000`,F=e=>e??P,I=({modelValue:e,getEditableHex:t,saturationAreaRef:n,hueSliderRef:r,disabled:i,readonly:a})=>{let o=w(F(t()))??{hue:0,saturation:0,value:0},s=(0,l.ref)(o.hue),c=(0,l.ref)(o.saturation),u=(0,l.ref)(o.value),f=(0,l.ref)(!1),p=(0,l.ref)(!1),m=(0,l.ref)(!1),h=(0,l.shallowRef)(null),g=(0,l.shallowRef)(null),_=(0,l.computed)(()=>T({hue:s.value,saturation:c.value,value:u.value})),v=(0,l.computed)(()=>T({hue:s.value,saturation:1,value:1})),y=e=>{s.value=Math.max(0,Math.min(360,e))},b=(e,t)=>{c.value=Math.max(0,Math.min(1,e)),u.value=Math.max(0,Math.min(1,t))},x=e=>{let t=w(F(e));t&&(f.value=!0,t.saturation>0&&(s.value=t.hue),c.value=t.saturation,u.value=t.value,f.value=!1)},S=()=>{let e=t();e&&e.toUpperCase()!==_.value.toUpperCase()&&x(e)},C=()=>{let n=_.value;t()?.toUpperCase()!==n.toUpperCase()&&(f.value=!0,e.value=n,f.value=!1)};(0,l.watch)([s,c,u],()=>{f.value||C()}),(0,l.watch)(e,()=>{f.value||S()}),(0,l.onMounted)(()=>{(0,l.nextTick)(()=>{E(),D(),S()})});let E=()=>{h.value=n.value?.getBoundingClientRect()??null},D=()=>{g.value=r.value?.getBoundingClientRect()??null},O=(0,l.computed)(()=>{let e=h.value;return e?{transform:`translate3d(calc(${c.value*e.width}px - 50%), calc(${(1-u.value)*e.height}px - 50%), 0)`}:{}}),k=(0,l.computed)(()=>{let e=g.value;return e?{transform:`translate3d(-50%, calc(${s.value/360*e.height}px - 50%), 0)`}:{}}),A=()=>!i.value&&!a.value,j=e=>{let t=h.value;if(!t)return;let n=Math.max(0,Math.min(e.clientX-t.left,t.width)),r=Math.max(0,Math.min(e.clientY-t.top,t.height));b(n/t.width,1-r/t.height)},M=e=>{let t=g.value;t&&y(Math.max(0,Math.min(e.clientY-t.top,t.height))/t.height*360)},N=e=>{A()&&(E(),p.value=!0,j(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},P=e=>{A()&&(D(),m.value=!0,M(e),e.currentTarget instanceof HTMLElement&&e.currentTarget.setPointerCapture(e.pointerId))},I=()=>{p.value=!1},L=()=>{m.value=!1};return(0,d.useEventListener)(n,`pointermove`,e=>{p.value&&j(e)}),(0,d.useEventListener)(n,`pointerup`,I),(0,d.useEventListener)(n,`pointercancel`,I),(0,d.useEventListener)(n,`lostpointercapture`,I),(0,d.useEventListener)(r,`pointermove`,e=>{m.value&&M(e)}),(0,d.useEventListener)(r,`pointerup`,L),(0,d.useEventListener)(r,`pointercancel`,L),(0,d.useEventListener)(r,`lostpointercapture`,L),{hexColor:_,hueBackground:v,saturationPointerStyle:O,huePointerStyle:k,handleSaturationPointerDown:N,handleHuePointerDown:P,syncFromModelValue:S}},L=e=>{if(!e)return null;let t=e.$el;if(!(t instanceof HTMLElement))return null;let n=t.querySelector(`.s-ui-color-swatch__fill`);return n instanceof HTMLElement?n:null},R={class:`s-ui-color-area__canvas-row`},ee=[`aria-label`],te=[`aria-label`,`aria-disabled`],z=(0,l.defineComponent)({__name:`SColorArea`,props:(0,l.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=(0,l.useModel)(e,`modelValue`),{t:r}=(0,u.useUiKitI18n)(),i=(0,l.useTemplateRef)(`colorResolutionSwatchRef`),a=(0,l.useTemplateRef)(`saturationAreaRef`),o=(0,l.useTemplateRef)(`hueSliderRef`),s=()=>k(t.value,L(i.value)),c=(0,l.computed)(()=>n.a(t.value)),{hexColor:d,hueBackground:f,saturationPointerStyle:p,huePointerStyle:m,handleSaturationPointerDown:h,handleHuePointerDown:g}=I({modelValue:t,getEditableHex:s,saturationAreaRef:a,hueSliderRef:o,disabled:(0,l.toRef)(()=>e.disabled),readonly:(0,l.toRef)(()=>e.readonly)});return(t,n)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,(0,l.mergeProps)({class:[`s-ui-color-area`,{"s-ui-color-area--disabled":e.disabled,"s-ui-color-area--readonly":e.readonly}]},t.$attrs),[(0,l.createVNode)((0,l.unref)(u.SColorSwatch),{ref_key:`colorResolutionSwatchRef`,ref:i,class:`s-ui-color-area__color-resolution`,color:c.value,size:(0,l.unref)(u.ESColorSwatchSize).SIZE_24,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`]),(0,l.createElementVNode)(`div`,R,[(0,l.createElementVNode)(`div`,{ref_key:`saturationAreaRef`,ref:a,class:`s-ui-color-area__canvas`,role:`img`,"aria-label":(0,l.unref)(r)(`colorArea.saturationBrightness`),style:(0,l.normalizeStyle)({"--s-ui-color-area-hue":(0,l.unref)(f)}),onPointerdown:n[0]||=(...e)=>(0,l.unref)(h)&&(0,l.unref)(h)(...e)},[(0,l.createElementVNode)(`div`,{class:`s-ui-color-area__canvas-pointer`,style:(0,l.normalizeStyle)({...(0,l.unref)(p),backgroundColor:(0,l.unref)(d)})},null,4)],44,ee),(0,l.createElementVNode)(`div`,{ref_key:`hueSliderRef`,ref:o,class:`s-ui-color-area__hue`,role:`slider`,"aria-label":(0,l.unref)(r)(`colorArea.hue`),"aria-valuemin":`0`,"aria-valuemax":`360`,"aria-disabled":e.disabled||e.readonly,onPointerdown:n[1]||=(...e)=>(0,l.unref)(g)&&(0,l.unref)(g)(...e)},[(0,l.createElementVNode)(`div`,{class:`s-ui-color-area__hue-pointer`,style:(0,l.normalizeStyle)({...(0,l.unref)(m),backgroundColor:(0,l.unref)(f)})},null,4)],40,te)])],16))}}),B={class:`s-ui-color-values__left`},V={class:`s-ui-color-values__format`},H={class:`s-ui-color-values__value-group`},U={class:`s-ui-color-values__inputs`},W={key:0,class:`s-ui-color-values__input-wrap`},G=[`disabled`,`readonly`,`aria-label`],K={class:`s-ui-color-values__input-wrap`},q=[`disabled`,`readonly`,`aria-label`],J={class:`s-ui-color-values__input-wrap`},Y=[`disabled`,`readonly`,`aria-label`],X={class:`s-ui-color-values__input-wrap`},Z=[`disabled`,`readonly`,`aria-label`],Q=(0,l.defineComponent)({__name:`SColorValues`,props:(0,l.mergeModels)({disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},formats:{default:()=>E}},{modelValue:{required:!0},modelModifiers:{},format:{default:t.o.HEX},formatModifiers:{}}),emits:(0,l.mergeModels)([`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`,`update:format`]),setup(e,{emit:a}){let{t:o}=(0,u.useUiKitI18n)(),s=(0,l.useModel)(e,`modelValue`),d=(0,l.useModel)(e,`format`),f=a,p=(0,l.useTemplateRef)(`previewSwatchRef`),m=(0,l.ref)(``),h=(0,l.ref)(`0`),g=(0,l.ref)(`0`),_=(0,l.ref)(`0`),v=(0,l.computed)(()=>(e.formats.length>0?e.formats:E).map(e=>({value:e,label:D[e]}))),y=(0,l.computed)(()=>n.a(s.value)),b=(0,l.computed)(()=>k(s.value,L(p.value))),x=(0,l.computed)(()=>d.value===t.o.RGB?o(`colorValues.redChannel`):o(`colorValues.hueChannel`)),S=(0,l.computed)(()=>d.value===t.o.RGB?o(`colorValues.greenChannel`):o(`colorValues.saturationChannel`)),C=(0,l.computed)(()=>d.value===t.o.RGB?o(`colorValues.blueChannel`):o(`colorValues.lightnessChannel`)),w=()=>{let e=b.value;if(!e)return;let n=A(e,d.value);if(d.value===t.o.HEX&&typeof n==`string`){m.value=n;return}typeof n==`object`&&(h.value=String(n.first),g.value=String(n.second),_.value=String(n.third))};(0,l.watch)([s,d,b],()=>{w()}),(0,l.onMounted)(()=>{(0,l.nextTick)(()=>{w()})});let T=()=>{if(e.disabled||e.readonly)return;if(d.value===t.o.HEX){let e=M(t.o.HEX,m.value);e&&(s.value=e),w();return}let n=M(d.value,{first:Number.parseInt(h.value,10),second:Number.parseInt(g.value,10),third:Number.parseInt(_.value,10)});n&&(s.value=n),w()},O=e=>{e.key===`Enter`&&(e.preventDefault(),T())};return(n,a)=>((0,l.openBlock)(),(0,l.createElementBlock)(`div`,(0,l.mergeProps)({class:[`s-ui-color-values`,{"s-ui-color-values--disabled":e.disabled,"s-ui-color-values--readonly":e.readonly}]},n.$attrs),[(0,l.createElementVNode)(`div`,B,[(0,l.createVNode)((0,l.unref)(u.SColorSwatch),{ref_key:`previewSwatchRef`,ref:p,class:`s-ui-color-values__preview`,color:y.value,size:(0,l.unref)(u.ESColorSwatchSize).SIZE_32,disabled:e.disabled,tabindex:`-1`,"aria-hidden":`true`},null,8,[`color`,`size`,`disabled`]),(0,l.createElementVNode)(`div`,V,[(0,l.createVNode)((0,l.unref)(c.t),{modelValue:d.value,"onUpdate:modelValue":a[0]||=e=>d.value=e,class:`s-ui-color-values__format-select`,options:v.value,disabled:e.disabled,readonly:e.readonly,bordered:!0,clearable:!1,"close-on-select":!0,"fit-viewport":!1,"aria-label":(0,l.unref)(o)(`colorValues.format`),onOpen:a[1]||=e=>f(`formatDropdownOpen`),onClose:a[2]||=e=>f(`formatDropdownClose`)},null,8,[`modelValue`,`options`,`disabled`,`readonly`,`aria-label`])])]),(0,l.createElementVNode)(`div`,H,[(0,l.createVNode)((0,l.unref)(i.t),{class:`s-ui-color-values__pipette`,appearance:(0,l.unref)(r.t).BARE,variant:(0,l.unref)(r.r).NEUTRAL,size:(0,l.unref)(r.n).SMALL,icon:`pipette`,"aria-label":(0,l.unref)(o)(`colorValues.pickColor`),"aria-disabled":`true`,disabled:e.disabled,tabindex:`-1`},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`]),a[9]||=(0,l.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,l.createElementVNode)(`div`,U,[d.value===(0,l.unref)(t.o).HEX?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,W,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":a[3]||=e=>m.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`text`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":(0,l.unref)(o)(`colorValues.hexValue`),onBlur:T,onKeydown:O},null,40,G),[[l.vModelText,m.value]])])):((0,l.openBlock)(),(0,l.createElementBlock)(l.Fragment,{key:1},[(0,l.createElementVNode)(`div`,K,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":a[4]||=e=>h.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":x.value,onBlur:T,onKeydown:O},null,40,q),[[l.vModelText,h.value]])]),a[7]||=(0,l.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,l.createElementVNode)(`div`,J,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":a[5]||=e=>g.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":S.value,onBlur:T,onKeydown:O},null,40,Y),[[l.vModelText,g.value]])]),a[8]||=(0,l.createElementVNode)(`span`,{class:`s-ui-color-values__separator`,"aria-hidden":`true`},null,-1),(0,l.createElementVNode)(`div`,X,[(0,l.withDirectives)((0,l.createElementVNode)(`input`,{"onUpdate:modelValue":a[6]||=e=>_.value=e,class:`s-ui-color-values__input s-ui-typography-body-14-regular`,type:`text`,inputmode:`numeric`,spellcheck:`false`,disabled:e.disabled,readonly:e.readonly,"aria-label":C.value,onBlur:T,onKeydown:O},null,40,Z),[[l.vModelText,_.value]])])],64))])])],16))}}),ne={class:`s-ui-color-picker__section`},re={class:`s-ui-color-picker__label`},$={class:`s-ui-color-picker__section`},ie={class:`s-ui-color-picker__label`},ae={class:`s-ui-color-picker__custom-editor`},oe={class:`s-ui-color-picker__custom-actions`},se=(0,l.defineComponent)({__name:`SColorPicker`,props:(0,l.mergeModels)({disabled:{type:Boolean,default:!1},recommendedColors:{},recentColors:{default:()=>[]}},{modelValue:{},modelModifiers:{}}),emits:(0,l.mergeModels)([`select`,`customEditorOpen`,`customEditorClose`,`formatDropdownOpen`,`formatDropdownClose`],[`update:modelValue`]),setup(e,{emit:n}){let c=(0,l.useModel)(e,`modelValue`),d=n,{t:f}=(0,u.useUiKitI18n)(),p=(0,l.ref)(!1),m=(0,l.ref)(`#526DE3`),h=(0,l.ref)(t.o.HEX),g=(0,l.computed)(()=>e.recommendedColors&&e.recommendedColors.length>0?e.recommendedColors:t.r),_=(0,l.computed)(()=>e.recentColors.length<=17?e.recentColors:e.recentColors.slice(0,17)),v=()=>{if(c.value){m.value=c.value;return}m.value=`#526DE3`},y=e=>{d(`select`,e)},b=()=>{c.value=m.value,d(`select`,m.value),p.value=!1},x=()=>{p.value=!1};return(0,l.watch)(p,(e,t)=>{if(e&&!t){v(),d(`customEditorOpen`);return}!e&&t&&d(`customEditorClose`)}),(n,v)=>((0,l.openBlock)(),(0,l.createBlock)((0,l.unref)(s.t),(0,l.mergeProps)({width:336},n.$attrs),{default:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)([`s-ui-color-picker`,{"s-ui-color-picker--disabled":e.disabled}])},[(0,l.createElementVNode)(`section`,ne,[(0,l.createElementVNode)(`span`,re,(0,l.toDisplayString)((0,l.unref)(f)(`colorPicker.recommendedColors`)),1),(0,l.createVNode)((0,l.unref)(t.t),{modelValue:c.value,"onUpdate:modelValue":v[0]||=e=>c.value=e,class:`s-ui-color-picker__palette`,layout:(0,l.unref)(t.n).GRID,colors:g.value,size:(0,l.unref)(u.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:y},null,8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])]),(0,l.createElementVNode)(`section`,$,[(0,l.createElementVNode)(`span`,ie,(0,l.toDisplayString)((0,l.unref)(f)(`colorPicker.recentColors`)),1),(0,l.createVNode)((0,l.unref)(t.t),{modelValue:c.value,"onUpdate:modelValue":v[7]||=e=>c.value=e,class:`s-ui-color-picker__palette`,layout:(0,l.unref)(t.n).ROW,colors:_.value,size:(0,l.unref)(u.ESColorSwatchSize).SIZE_32,disabled:e.disabled,onSelect:y},{append:(0,l.withCtx)(()=>[(0,l.createVNode)((0,l.unref)(o.t),{modelValue:p.value,"onUpdate:modelValue":v[6]||=e=>p.value=e,placement:(0,l.unref)(a.i).RIGHT_START,offset:8,shift:!0,flip:!0,disabled:e.disabled,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{trigger:(0,l.withCtx)(({toggle:t,triggerProps:n})=>[(0,l.createVNode)((0,l.unref)(i.t),(0,l.mergeProps)(n,{class:`s-ui-color-picker__add-button`,appearance:(0,l.unref)(r.t).OUTLINED,variant:(0,l.unref)(r.r).NEUTRAL,size:(0,l.unref)(r.n).SMALL,icon:`plus`,"aria-label":(0,l.unref)(f)(`colorPicker.addCustomColor`),disabled:e.disabled,onClick:t}),null,16,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),content:(0,l.withCtx)(()=>[(0,l.createVNode)((0,l.unref)(s.t),{width:320},{footer:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,oe,[(0,l.createVNode)((0,l.unref)(i.t),{class:`s-ui-color-picker__save-button`,appearance:(0,l.unref)(r.t).MAJOR,variant:(0,l.unref)(r.r).MAIN,size:(0,l.unref)(r.n).SMALL,disabled:e.disabled,onClick:b},{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)((0,l.unref)(f)(`colorPicker.save`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`]),(0,l.createVNode)((0,l.unref)(i.t),{class:`s-ui-color-picker__cancel-button`,appearance:(0,l.unref)(r.t).MINOR,variant:(0,l.unref)(r.r).NEUTRAL,size:(0,l.unref)(r.n).SMALL,disabled:e.disabled,onClick:x},{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)((0,l.unref)(f)(`colorPicker.cancel`)),1)]),_:1},8,[`appearance`,`variant`,`size`,`disabled`])])]),default:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,ae,[(0,l.createVNode)(z,{modelValue:m.value,"onUpdate:modelValue":v[1]||=e=>m.value=e,disabled:e.disabled},null,8,[`modelValue`,`disabled`]),(0,l.createVNode)(Q,{modelValue:m.value,"onUpdate:modelValue":v[2]||=e=>m.value=e,format:h.value,"onUpdate:format":v[3]||=e=>h.value=e,disabled:e.disabled,onFormatDropdownOpen:v[4]||=e=>d(`formatDropdownOpen`),onFormatDropdownClose:v[5]||=e=>d(`formatDropdownClose`)},null,8,[`modelValue`,`format`,`disabled`])])]),_:1})]),_:1},8,[`modelValue`,`placement`,`disabled`])]),_:1},8,[`modelValue`,`layout`,`colors`,`size`,`disabled`])])],2)]),_:1},16))}});Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return se}});
|
|
@@ -5,7 +5,8 @@ import { n as s, r as c, t as l } from "./SButton.types-CpdHQtyx.js";
|
|
|
5
5
|
import { t as u } from "./SButton-6AL2ipRT.js";
|
|
6
6
|
import { i as d } from "./useFloatingOverlay-QcumEYEq.js";
|
|
7
7
|
import { t as f } from "./SDropdown-LOTCtlCX.js";
|
|
8
|
-
import {
|
|
8
|
+
import { t as p } from "./SDropdownMenu-2koPU6IG.js";
|
|
9
|
+
import { t as m } from "./SSelect-D6taevzT.js";
|
|
9
10
|
import { Fragment as h, computed as g, createBlock as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeModels as C, mergeProps as w, nextTick as T, normalizeClass as E, normalizeStyle as D, onMounted as O, openBlock as k, ref as A, shallowRef as j, toDisplayString as M, toRef as N, unref as P, useModel as F, useTemplateRef as I, vModelText as L, watch as R, withCtx as z, withDirectives as B } from "vue";
|
|
10
11
|
import { ESColorSwatchSize as V, SColorSwatch as ee, useUiKitI18n as H } from "@shtabapp/ui-kit-primitives";
|
|
11
12
|
import { useEventListener as U } from "@vueuse/core";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderSlot as c, unref as l, useSlots as u } from "vue";
|
|
2
|
+
//#region src/components/SDropdownMenu/SDropdownMenu.vue?vue&type=script&setup=true&lang.ts
|
|
3
|
+
var d = {
|
|
4
|
+
key: 0,
|
|
5
|
+
class: "s-ui-dropdown-menu__header"
|
|
6
|
+
}, f = {
|
|
7
|
+
key: 1,
|
|
8
|
+
class: "s-ui-dropdown-menu__footer"
|
|
9
|
+
}, p = /* @__PURE__ */ i({
|
|
10
|
+
__name: "SDropdownMenu",
|
|
11
|
+
props: {
|
|
12
|
+
width: {},
|
|
13
|
+
maxHeight: {},
|
|
14
|
+
accent: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: !1
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
setup(i) {
|
|
20
|
+
let p = u(), m = (e) => typeof e == "number" ? `${e}px` : e, h = e(() => ({
|
|
21
|
+
"s-ui-dropdown-menu--accent": i.accent,
|
|
22
|
+
"s-ui-dropdown-menu--bounded": !!i.maxHeight
|
|
23
|
+
})), g = e(() => ({ "s-ui-dropdown-menu__body--scrollable": !!i.maxHeight })), _ = e(() => ({
|
|
24
|
+
"--s-ui-dropdown-menu-width": m(i.width),
|
|
25
|
+
"--s-ui-dropdown-menu-max-height": m(i.maxHeight)
|
|
26
|
+
}));
|
|
27
|
+
return (e, i) => (s(), n("div", {
|
|
28
|
+
class: a(["s-ui-dropdown-menu", h.value]),
|
|
29
|
+
style: o(_.value)
|
|
30
|
+
}, [
|
|
31
|
+
l(p).header ? (s(), n("div", d, [c(e.$slots, "header")])) : t("", !0),
|
|
32
|
+
r("div", { class: a(["s-ui-dropdown-menu__body", g.value]) }, [c(e.$slots, "default")], 2),
|
|
33
|
+
l(p).footer ? (s(), n("div", f, [c(e.$slots, "footer")])) : t("", !0)
|
|
34
|
+
], 6));
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
//#endregion
|
|
38
|
+
export { p as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let e=require("vue");var t={key:0,class:`s-ui-dropdown-menu__header`},n={key:1,class:`s-ui-dropdown-menu__footer`},r=(0,e.defineComponent)({__name:`SDropdownMenu`,props:{width:{},maxHeight:{},accent:{type:Boolean,default:!1}},setup(r){let i=(0,e.useSlots)(),a=e=>typeof e==`number`?`${e}px`:e,o=(0,e.computed)(()=>({"s-ui-dropdown-menu--accent":r.accent,"s-ui-dropdown-menu--bounded":!!r.maxHeight})),s=(0,e.computed)(()=>({"s-ui-dropdown-menu__body--scrollable":!!r.maxHeight})),c=(0,e.computed)(()=>({"--s-ui-dropdown-menu-width":a(r.width),"--s-ui-dropdown-menu-max-height":a(r.maxHeight)}));return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:(0,e.normalizeClass)([`s-ui-dropdown-menu`,o.value]),style:(0,e.normalizeStyle)(c.value)},[(0,e.unref)(i).header?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[(0,e.renderSlot)(r.$slots,`header`)])):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`div`,{class:(0,e.normalizeClass)([`s-ui-dropdown-menu__body`,s.value])},[(0,e.renderSlot)(r.$slots,`default`)],2),(0,e.unref)(i).footer?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,n,[(0,e.renderSlot)(r.$slots,`footer`)])):(0,e.createCommentVNode)(``,!0)],6))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return r}});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require("./useSelectionGroup-NJvi3hNo.cjs"),t=require("./treeKeyboardNavigation-BOz2SVus.cjs"),n=require("./SListItem-cWTuQQY-.cjs");let r=require("vue"),i=require("@shtabapp/ui-kit-primitives"),a=require("@tanstack/vue-virtual");var o=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}({}),s=o.TWO_X_SMALL,ee={[o.NONE]:`var(--s-ui-space-gap-none)`,[o.TWO_X_SMALL]:`var(--s-ui-space-gap-2x-small)`,[o.X_SMALL]:`var(--s-ui-space-gap-x-small)`,[o.SMALL]:`var(--s-ui-space-gap-small)`,[o.MEDIUM]:`var(--s-ui-space-gap-medium)`,[o.X_MEDIUM]:`var(--s-ui-space-gap-x-medium)`,[o.LARGE]:`var(--s-ui-space-gap-large)`,[o.X_LARGE]:`var(--s-ui-space-gap-x-large)`,[o.TWO_X_LARGE]:`var(--s-ui-space-gap-2x-large)`},te={[o.NONE]:0,[o.TWO_X_SMALL]:2,[o.X_SMALL]:4,[o.SMALL]:8,[o.MEDIUM]:12,[o.X_MEDIUM]:16,[o.LARGE]:20,[o.X_LARGE]:24,[o.TWO_X_LARGE]:32},ne=(e,t)=>`s-ui-list-option-${e}-${t}`,c=(e,t)=>{let n=e[t];if(typeof n==`string`)return n},l=(e,t)=>{let n=e[t];return typeof n==`boolean`?n:!1},u=e=>e in i.ESIconName,d=(e,t)=>{let n=e[t];if(typeof n==`string`&&n.length>0&&u(n))return n},re=[`role`,`aria-multiselectable`],ie=[`aria-multiselectable`,`aria-activedescendant`,`tabindex`],ae=[`data-index`],f={key:0,class:`s-ui-list__divider`,role:`separator`},oe={key:0,class:`s-ui-list__divider`,role:`separator`},p={key:2,class:`s-ui-list__static`},m=(0,r.defineComponent)({__name:`SList`,props:(0,r.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:()=>s},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,r.mergeModels)([`endReached`,`loadMoreChildren`,`itemClick`],[`update:modelValue`,`update:selected`,`update:expanded`]),setup(o,{expose:s,emit:u}){let m=(0,r.useModel)(o,`modelValue`),h=(0,r.useModel)(o,`selected`),g=(0,r.useModel)(o,`expanded`),_=u,v=(0,r.useSlots)(),y=(0,r.useId)(),b=(0,r.useTemplateRef)(`scrollElementRef`),x=(0,r.useTemplateRef)(`listRootElementRef`),S=(0,r.computed)(()=>te[o.gap]),C=(0,r.computed)(()=>o.items!==void 0),w=(0,r.computed)(()=>C.value?o.virtual===void 0?!0:o.virtual:!1),{flatRows:T,toggleExpanded:E}=t.s({items:()=>o.items??[],childrenKey:()=>o.childrenKey,itemKey:()=>o.itemKey,expanded:g,hasMoreChildrenKey:()=>o.hasMoreChildrenKey,selectedOnTop:()=>o.selectedOnTop,selectedKeys:()=>h.value}),{t:D}=(0,i.useUiKitI18n)(),O=(0,r.computed)(()=>new Set(o.loadingMoreChildrenKeys)),k=(0,r.computed)(()=>D(`list.loadMore`)),A=e=>e.loadMoreForKey?O.value.has(e.loadMoreForKey):!1,j=(e,t)=>{O.value.has(e)||_(`loadMoreChildren`,{key:e,item:t})},M=e=>{e.loadMoreForKey&&j(e.loadMoreForKey,e.item)},N=e=>({parentKey:e.loadMoreForKey??``,parentItem:e.item,depth:e.depth,loading:A(e),loadMore:()=>{M(e)}}),P=(0,a.useVirtualizer)((0,r.computed)(()=>({count:T.value.length,getScrollElement:()=>b.value,estimateSize:()=>o.estimateItemSize,gap:S.value,overscan:o.overscan}))),F=(0,r.computed)(()=>{if(C.value)return T.value.reduce((e,t)=>(t.divider||e.push(t.key),e),[])}),I=(0,r.computed)(()=>{let e=new Set;for(let t of T.value)!t.loadMoreForKey&&l(t.item,o.disabledKey)&&e.add(t.key);return e}),L=async e=>{if(!w.value)return;let t=T.value.findIndex(t=>t.key===e);t!==-1&&(P.value.scrollToIndex(t,{align:`auto`}),await new Promise(e=>{requestAnimationFrame(()=>{e()})}),await(0,r.nextTick)())},R=e=>ne(y,e),z=e.o({modelValue:()=>h.value,onUpdateModelValue:e=>{h.value=e},mode:()=>o.selectionMode,mandatory:()=>o.mandatory,orientation:()=>e.r.VERTICAL,enableTabNavigation:!0,focusMode:()=>w.value?e.t.ACTIVE_DESCENDANT:e.t.DOM,orderedValues:F,isValueDisabled:e=>I.value.has(e),onBeforeFocusItem:async e=>{await L(e)},onFocusGroup:()=>{b.value?.focus()}}),B=(0,r.computed)(()=>C.value&&t.t(T.value)),V=()=>{if(w.value){b.value?.focus();return}x.value?.focus()},H=()=>{z.focusedValue.value=void 0,m.value=void 0;let e=document.activeElement;e instanceof HTMLElement&&e!==b.value&&e.blur(),V()},U=async e=>{w.value&&await L(e)},W=async e=>{if(H(),e.type===`expand`||e.type===`collapse`){E(e.rowKey),z.select(e.rowKey,!1),await U(e.rowKey);return}z.select(e.rowKey,!1),await U(e.rowKey)},G=async(e,n)=>{if(!B.value||e.key!==`ArrowUp`&&e.key!==`ArrowDown`)return!1;let r=t.n(n,h.value),i=t.i(e.key,r,T.value);return i?(e.preventDefault(),H(),z.select(i,!1),await U(i),!0):!1},K=async(e,n)=>{if(!B.value||e.key!==`ArrowLeft`&&e.key!==`ArrowRight`)return!1;let r=t.n(n,h.value),i=t.r(e.key,r,T.value);return i?(e.preventDefault(),await W(i),!0):!1},q=()=>{if(m.value)return m.value;let e=t.n(``,h.value);if(e)return e;let n=F.value;if(n){for(let e of n)if(!I.value.has(e))return e}},se=()=>q(),ce=async e=>{let t=se();t&&await J(e,t)},le=[`Enter`,` `,`Spacebar`],ue=(e,t)=>{if(!le.includes(e.key))return!1;let n=T.value.find(e=>e.key===t);return n?.loadMoreForKey?(e.preventDefault(),j(n.loadMoreForKey,n.item),!0):!1},J=async(e,t)=>{ue(e,t)||await G(e,t)||await K(e,t)||(await z.handleItemKeydown(e,t),m.value=z.focusedValue.value,!z.focusedValue.value&&!w.value&&V())},de=async e=>{let t=q();t&&await J(e,t)},fe=async e=>{if(w.value||e.target!==x.value)return;let t=q();t&&await J(e,t)},pe=async()=>{let e=q();if(!e){V();return}await z.focusItem(e,!1)};(0,r.provide)(n.r,{mode:()=>o.selectionMode,isSelected:z.isSelected,selectItem:z.toggle,registerItem:z.registerItem,getItemTabIndex:z.getItemTabIndex,getGroupTabIndex:z.getGroupTabIndex,handleItemKeydown:J,activeKey:()=>m.value,setActiveKey:e=>{m.value=e},isExpanded:e=>g.value.includes(e),toggleExpanded:e=>{if(C.value){E(e);return}let t=new Set(g.value);t.has(e)?t.delete(e):t.add(e),g.value=[...t]},revealRight:()=>o.revealRight,expandOnClick:()=>o.expandOnClick,getItemOptionId:e=>{if(w.value)return R(e)},usesActiveDescendantNavigation:()=>w.value,handlesTreeKeyboardNavigation:()=>C.value});let me=(0,r.computed)(()=>P.value.getVirtualItems()),he=(0,r.computed)(()=>me.value.flatMap(e=>{let t=T.value[e.index];return t?[{virtualRow:e,flatRow:t}]:[]})),ge=(0,r.computed)(()=>P.value.getTotalSize()),_e=(0,r.computed)(()=>({height:`${ge.value}px`,position:`relative`,width:`100%`})),Y=(0,r.computed)(()=>{let e={};return typeof o.height==`number`?e.height=`${o.height}px`:o.height&&(e.height=o.height),o.maxHeight&&(typeof o.maxHeight==`number`?e.maxHeight=`${o.maxHeight}px`:e.maxHeight=o.maxHeight),e}),ve=(0,r.computed)(()=>({"s-ui-list--virtual":w.value,"s-ui-list--static":!w.value})),ye=(0,r.computed)(()=>({"--s-ui-list-gap":ee[o.gap]})),X=(0,r.computed)(()=>({"s-ui-list__scroll--flat":C.value&&!w.value})),Z=(0,r.computed)(()=>{if(o.selectionMode===e.n.MULTIPLE)return!0}),be=(0,r.computed)(()=>{if(!w.value)return`listbox`}),xe=(0,r.computed)(()=>{if(!w.value)return Z.value}),Se=(0,r.computed)(()=>{if(w.value)return z.getGroupTabIndex()}),Ce=(0,r.computed)(()=>m.value?m.value:t.n(``,h.value)),we=(0,r.computed)(()=>{if(!w.value)return;let e=Ce.value;if(e)return R(e)});t.a(()=>b.value,{distance:()=>o.endReachedDistance,canLoadMore:()=>o.canLoadMore?.()??!0,onEndReached:()=>{_(`endReached`,{direction:`bottom`})}});let Te=e=>({position:`absolute`,top:0,left:0,width:`100%`,transform:`translateY(${e.start}px)`}),Ee=e=>{e instanceof HTMLElement&&P.value.measureElement(e)},Q=e=>{let t=e.item,n={rowKey:e.key,depth:e.depth,expandable:e.hasChildren,expanded:e.expanded,selected:z.isSelected(e.key),active:m.value===e.key,disabled:l(t,o.disabledKey),title:c(t,o.titleKey),subtitle:c(t,o.subtitleKey),iconLeft:d(t,o.iconLeftKey),revealRight:o.revealRight,onClick:()=>{_(`itemClick`,{key:e.key,item:e.item})}};return o.itemProps?{...n,...o.itemProps(t,e)}:n},$=e=>({...e,revealRight:o.revealRight,toggleExpanded:()=>{E(e.key)}});return s({focusNavigation:pe,handleKeyboardNavigation:de}),(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{ref_key:`listRootElementRef`,ref:x,class:(0,r.normalizeClass)([`s-ui-list`,ve.value]),style:(0,r.normalizeStyle)(ye.value),role:be.value,"aria-multiselectable":xe.value,tabindex:`-1`,onKeydown:fe},[C.value&&w.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:0,ref_key:`scrollElementRef`,ref:b,class:(0,r.normalizeClass)([`s-ui-list__scroll`,X.value]),style:(0,r.normalizeStyle)(Y.value),role:`listbox`,"aria-multiselectable":Z.value,"aria-activedescendant":we.value,tabindex:Se.value,onKeydown:ce},[(0,r.createElementVNode)(`div`,{class:`s-ui-list__virtual-panel`,style:(0,r.normalizeStyle)(_e.value)},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)(he.value,t=>((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:t.virtualRow.index,class:`s-ui-list__virtual-row`,"data-index":t.virtualRow.index,ref_for:!0,ref:Ee,style:(0,r.normalizeStyle)(Te(t.virtualRow))},[t.flatRow.divider?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,f)):t.flatRow.loadMoreForKey?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:1},[(0,r.unref)(v).loadMore?(0,r.renderSlot)(e.$slots,`loadMore`,(0,r.mergeProps)({key:0,ref_for:!0},N(t.flatRow))):((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(n.t),{key:1,"row-key":t.flatRow.key,depth:t.flatRow.depth,tiny:``,title:k.value,onClick:e=>M(t.flatRow)},(0,r.createSlots)({_:2},[A(t.flatRow)?{name:`icon-left`,fn:(0,r.withCtx)(()=>[(0,r.createVNode)((0,r.unref)(i.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:2},[(0,r.unref)(v).item?(0,r.renderSlot)(e.$slots,`item`,(0,r.mergeProps)({key:0,ref_for:!0},$(t.flatRow))):((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(n.t),(0,r.mergeProps)({key:1,ref_for:!0},Q(t.flatRow)),(0,r.createSlots)({_:2},[(0,r.unref)(v).itemIconLeft?{name:`icon-left`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemIconLeft`,(0,r.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`0`}:void 0,(0,r.unref)(v).itemTitle?{name:`title`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemTitle`,(0,r.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`1`}:void 0,(0,r.unref)(v).itemSubtitle?{name:`subtitle`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemSubtitle`,(0,r.mergeProps)({ref_for:!0},$(t.flatRow)))]),key:`2`}:void 0]),1040))],64))],12,ae))),128))],4)],46,ie)):C.value?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{key:1,ref_key:`scrollElementRef`,ref:b,class:(0,r.normalizeClass)([`s-ui-list__scroll`,X.value]),style:(0,r.normalizeStyle)(Y.value)},[((0,r.openBlock)(!0),(0,r.createElementBlock)(r.Fragment,null,(0,r.renderList)((0,r.unref)(T),t=>((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:t.key},[t.divider?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,oe)):t.loadMoreForKey?((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:1},[(0,r.unref)(v).loadMore?(0,r.renderSlot)(e.$slots,`loadMore`,(0,r.mergeProps)({key:0,ref_for:!0},N(t))):((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(n.t),{key:1,"row-key":t.key,depth:t.depth,tiny:``,title:k.value,onClick:e=>M(t)},(0,r.createSlots)({_:2},[A(t)?{name:`icon-left`,fn:(0,r.withCtx)(()=>[(0,r.createVNode)((0,r.unref)(i.SSpinner),{size:16})]),key:`0`}:void 0]),1032,[`row-key`,`depth`,`title`,`onClick`]))],64)):((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,{key:2},[(0,r.unref)(v).item?(0,r.renderSlot)(e.$slots,`item`,(0,r.mergeProps)({key:0,ref_for:!0},$(t))):((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(n.t),(0,r.mergeProps)({key:1,ref_for:!0},Q(t)),(0,r.createSlots)({_:2},[(0,r.unref)(v).itemIconLeft?{name:`icon-left`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemIconLeft`,(0,r.mergeProps)({ref_for:!0},$(t)))]),key:`0`}:void 0,(0,r.unref)(v).itemTitle?{name:`title`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemTitle`,(0,r.mergeProps)({ref_for:!0},$(t)))]),key:`1`}:void 0,(0,r.unref)(v).itemSubtitle?{name:`subtitle`,fn:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`itemSubtitle`,(0,r.mergeProps)({ref_for:!0},$(t)))]),key:`2`}:void 0]),1040))],64))],64))),128))],6)):((0,r.openBlock)(),(0,r.createElementBlock)(`div`,p,[(0,r.renderSlot)(e.$slots,`default`)]))],46,re))}});Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});
|
|
@@ -0,0 +1,465 @@
|
|
|
1
|
+
import { n as e, o as t, r as n, t as r } from "./useSelectionGroup-BCAmPf3R.js";
|
|
2
|
+
import { a as ee, i as te, n as i, r as ne, s as re, t as ie } from "./treeKeyboardNavigation-SmxTdnDz.js";
|
|
3
|
+
import { r as ae, t as a } from "./SListItem-C1IeCv8M.js";
|
|
4
|
+
import { Fragment as o, computed as s, createBlock as c, createElementBlock as l, createElementVNode as oe, createSlots as u, createVNode as se, defineComponent as d, mergeModels as f, mergeProps as p, nextTick as ce, normalizeClass as m, normalizeStyle as h, openBlock as g, provide as le, renderList as _, renderSlot as v, unref as y, useId as ue, useModel as b, useSlots as de, useTemplateRef as fe, withCtx as x } from "vue";
|
|
5
|
+
import { ESIconName as S, SSpinner as C, useUiKitI18n as pe } from "@shtabapp/ui-kit-primitives";
|
|
6
|
+
import { useVirtualizer as me } from "@tanstack/vue-virtual";
|
|
7
|
+
//#region src/components/SList/SList.types.ts
|
|
8
|
+
var w = /* @__PURE__ */ function(e) {
|
|
9
|
+
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;
|
|
10
|
+
}({}), T = w.TWO_X_SMALL, he = {
|
|
11
|
+
[w.NONE]: "var(--s-ui-space-gap-none)",
|
|
12
|
+
[w.TWO_X_SMALL]: "var(--s-ui-space-gap-2x-small)",
|
|
13
|
+
[w.X_SMALL]: "var(--s-ui-space-gap-x-small)",
|
|
14
|
+
[w.SMALL]: "var(--s-ui-space-gap-small)",
|
|
15
|
+
[w.MEDIUM]: "var(--s-ui-space-gap-medium)",
|
|
16
|
+
[w.X_MEDIUM]: "var(--s-ui-space-gap-x-medium)",
|
|
17
|
+
[w.LARGE]: "var(--s-ui-space-gap-large)",
|
|
18
|
+
[w.X_LARGE]: "var(--s-ui-space-gap-x-large)",
|
|
19
|
+
[w.TWO_X_LARGE]: "var(--s-ui-space-gap-2x-large)"
|
|
20
|
+
}, ge = {
|
|
21
|
+
[w.NONE]: 0,
|
|
22
|
+
[w.TWO_X_SMALL]: 2,
|
|
23
|
+
[w.X_SMALL]: 4,
|
|
24
|
+
[w.SMALL]: 8,
|
|
25
|
+
[w.MEDIUM]: 12,
|
|
26
|
+
[w.X_MEDIUM]: 16,
|
|
27
|
+
[w.LARGE]: 20,
|
|
28
|
+
[w.X_LARGE]: 24,
|
|
29
|
+
[w.TWO_X_LARGE]: 32
|
|
30
|
+
}, _e = (e, t) => `s-ui-list-option-${e}-${t}`, E = (e, t) => {
|
|
31
|
+
let n = e[t];
|
|
32
|
+
if (typeof n == "string") return n;
|
|
33
|
+
}, D = (e, t) => {
|
|
34
|
+
let n = e[t];
|
|
35
|
+
return typeof n == "boolean" ? n : !1;
|
|
36
|
+
}, O = (e) => e in S, ve = (e, t) => {
|
|
37
|
+
let n = e[t];
|
|
38
|
+
if (typeof n == "string" && n.length > 0 && O(n)) return n;
|
|
39
|
+
}, ye = ["role", "aria-multiselectable"], be = [
|
|
40
|
+
"aria-multiselectable",
|
|
41
|
+
"aria-activedescendant",
|
|
42
|
+
"tabindex"
|
|
43
|
+
], xe = ["data-index"], Se = {
|
|
44
|
+
key: 0,
|
|
45
|
+
class: "s-ui-list__divider",
|
|
46
|
+
role: "separator"
|
|
47
|
+
}, Ce = {
|
|
48
|
+
key: 0,
|
|
49
|
+
class: "s-ui-list__divider",
|
|
50
|
+
role: "separator"
|
|
51
|
+
}, we = {
|
|
52
|
+
key: 2,
|
|
53
|
+
class: "s-ui-list__static"
|
|
54
|
+
}, k = /* @__PURE__ */ d({
|
|
55
|
+
__name: "SList",
|
|
56
|
+
props: /*@__PURE__*/ f({
|
|
57
|
+
items: {},
|
|
58
|
+
itemKey: {
|
|
59
|
+
type: [String, Function],
|
|
60
|
+
default: "id"
|
|
61
|
+
},
|
|
62
|
+
childrenKey: { default: "children" },
|
|
63
|
+
titleKey: { default: "title" },
|
|
64
|
+
subtitleKey: { default: "subtitle" },
|
|
65
|
+
iconLeftKey: { default: "iconLeft" },
|
|
66
|
+
disabledKey: { default: "disabled" },
|
|
67
|
+
itemProps: { type: Function },
|
|
68
|
+
selectionMode: { default: () => e.NONE },
|
|
69
|
+
mandatory: {
|
|
70
|
+
type: Boolean,
|
|
71
|
+
default: !1
|
|
72
|
+
},
|
|
73
|
+
virtual: { type: Boolean },
|
|
74
|
+
gap: { default: () => T },
|
|
75
|
+
estimateItemSize: { default: 36 },
|
|
76
|
+
overscan: { default: 5 },
|
|
77
|
+
endReachedDistance: { default: 0 },
|
|
78
|
+
canLoadMore: { type: Function },
|
|
79
|
+
height: { default: 320 },
|
|
80
|
+
maxHeight: {},
|
|
81
|
+
revealRight: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: !1
|
|
84
|
+
},
|
|
85
|
+
expandOnClick: {
|
|
86
|
+
type: Boolean,
|
|
87
|
+
default: !1
|
|
88
|
+
},
|
|
89
|
+
selectedOnTop: {
|
|
90
|
+
type: Boolean,
|
|
91
|
+
default: !1
|
|
92
|
+
},
|
|
93
|
+
hasMoreChildrenKey: {},
|
|
94
|
+
loadingMoreChildrenKeys: { default: () => [] }
|
|
95
|
+
}, {
|
|
96
|
+
modelValue: {},
|
|
97
|
+
modelModifiers: {},
|
|
98
|
+
selected: {},
|
|
99
|
+
selectedModifiers: {},
|
|
100
|
+
expanded: { default: () => [] },
|
|
101
|
+
expandedModifiers: {}
|
|
102
|
+
}),
|
|
103
|
+
emits: /*@__PURE__*/ f([
|
|
104
|
+
"endReached",
|
|
105
|
+
"loadMoreChildren",
|
|
106
|
+
"itemClick"
|
|
107
|
+
], [
|
|
108
|
+
"update:modelValue",
|
|
109
|
+
"update:selected",
|
|
110
|
+
"update:expanded"
|
|
111
|
+
]),
|
|
112
|
+
setup(d, { expose: f, emit: S }) {
|
|
113
|
+
let w = b(d, "modelValue"), T = b(d, "selected"), O = b(d, "expanded"), k = S, A = de(), Te = ue(), j = fe("scrollElementRef"), M = fe("listRootElementRef"), Ee = s(() => ge[d.gap]), N = s(() => d.items !== void 0), P = s(() => N.value ? d.virtual === void 0 ? !0 : d.virtual : !1), { flatRows: F, toggleExpanded: I } = re({
|
|
114
|
+
items: () => d.items ?? [],
|
|
115
|
+
childrenKey: () => d.childrenKey,
|
|
116
|
+
itemKey: () => d.itemKey,
|
|
117
|
+
expanded: O,
|
|
118
|
+
hasMoreChildrenKey: () => d.hasMoreChildrenKey,
|
|
119
|
+
selectedOnTop: () => d.selectedOnTop,
|
|
120
|
+
selectedKeys: () => T.value
|
|
121
|
+
}), { t: De } = pe(), L = s(() => new Set(d.loadingMoreChildrenKeys)), R = s(() => De("list.loadMore")), z = (e) => e.loadMoreForKey ? L.value.has(e.loadMoreForKey) : !1, B = (e, t) => {
|
|
122
|
+
L.value.has(e) || k("loadMoreChildren", {
|
|
123
|
+
key: e,
|
|
124
|
+
item: t
|
|
125
|
+
});
|
|
126
|
+
}, V = (e) => {
|
|
127
|
+
e.loadMoreForKey && B(e.loadMoreForKey, e.item);
|
|
128
|
+
}, H = (e) => ({
|
|
129
|
+
parentKey: e.loadMoreForKey ?? "",
|
|
130
|
+
parentItem: e.item,
|
|
131
|
+
depth: e.depth,
|
|
132
|
+
loading: z(e),
|
|
133
|
+
loadMore: () => {
|
|
134
|
+
V(e);
|
|
135
|
+
}
|
|
136
|
+
}), U = me(s(() => ({
|
|
137
|
+
count: F.value.length,
|
|
138
|
+
getScrollElement: () => j.value,
|
|
139
|
+
estimateSize: () => d.estimateItemSize,
|
|
140
|
+
gap: Ee.value,
|
|
141
|
+
overscan: d.overscan
|
|
142
|
+
}))), W = s(() => {
|
|
143
|
+
if (N.value) return F.value.reduce((e, t) => (t.divider || e.push(t.key), e), []);
|
|
144
|
+
}), G = s(() => {
|
|
145
|
+
let e = /* @__PURE__ */ new Set();
|
|
146
|
+
for (let t of F.value) !t.loadMoreForKey && D(t.item, d.disabledKey) && e.add(t.key);
|
|
147
|
+
return e;
|
|
148
|
+
}), K = async (e) => {
|
|
149
|
+
if (!P.value) return;
|
|
150
|
+
let t = F.value.findIndex((t) => t.key === e);
|
|
151
|
+
t !== -1 && (U.value.scrollToIndex(t, { align: "auto" }), await new Promise((e) => {
|
|
152
|
+
requestAnimationFrame(() => {
|
|
153
|
+
e();
|
|
154
|
+
});
|
|
155
|
+
}), await ce());
|
|
156
|
+
}, q = (e) => _e(Te, e), J = t({
|
|
157
|
+
modelValue: () => T.value,
|
|
158
|
+
onUpdateModelValue: (e) => {
|
|
159
|
+
T.value = e;
|
|
160
|
+
},
|
|
161
|
+
mode: () => d.selectionMode,
|
|
162
|
+
mandatory: () => d.mandatory,
|
|
163
|
+
orientation: () => n.VERTICAL,
|
|
164
|
+
enableTabNavigation: !0,
|
|
165
|
+
focusMode: () => P.value ? r.ACTIVE_DESCENDANT : r.DOM,
|
|
166
|
+
orderedValues: W,
|
|
167
|
+
isValueDisabled: (e) => G.value.has(e),
|
|
168
|
+
onBeforeFocusItem: async (e) => {
|
|
169
|
+
await K(e);
|
|
170
|
+
},
|
|
171
|
+
onFocusGroup: () => {
|
|
172
|
+
j.value?.focus();
|
|
173
|
+
}
|
|
174
|
+
}), Oe = s(() => N.value && ie(F.value)), Y = () => {
|
|
175
|
+
if (P.value) {
|
|
176
|
+
j.value?.focus();
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
M.value?.focus();
|
|
180
|
+
}, ke = () => {
|
|
181
|
+
J.focusedValue.value = void 0, w.value = void 0;
|
|
182
|
+
let e = document.activeElement;
|
|
183
|
+
e instanceof HTMLElement && e !== j.value && e.blur(), Y();
|
|
184
|
+
}, X = async (e) => {
|
|
185
|
+
P.value && await K(e);
|
|
186
|
+
}, Ae = async (e) => {
|
|
187
|
+
if (ke(), e.type === "expand" || e.type === "collapse") {
|
|
188
|
+
I(e.rowKey), J.select(e.rowKey, !1), await X(e.rowKey);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
J.select(e.rowKey, !1), await X(e.rowKey);
|
|
192
|
+
}, je = async (e, t) => {
|
|
193
|
+
if (!Oe.value || e.key !== "ArrowUp" && e.key !== "ArrowDown") return !1;
|
|
194
|
+
let n = i(t, T.value), r = te(e.key, n, F.value);
|
|
195
|
+
return r ? (e.preventDefault(), ke(), J.select(r, !1), await X(r), !0) : !1;
|
|
196
|
+
}, Me = async (e, t) => {
|
|
197
|
+
if (!Oe.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return !1;
|
|
198
|
+
let n = i(t, T.value), r = ne(e.key, n, F.value);
|
|
199
|
+
return r ? (e.preventDefault(), await Ae(r), !0) : !1;
|
|
200
|
+
}, Z = () => {
|
|
201
|
+
if (w.value) return w.value;
|
|
202
|
+
let e = i("", T.value);
|
|
203
|
+
if (e) return e;
|
|
204
|
+
let t = W.value;
|
|
205
|
+
if (t) {
|
|
206
|
+
for (let e of t) if (!G.value.has(e)) return e;
|
|
207
|
+
}
|
|
208
|
+
}, Ne = () => Z(), Pe = async (e) => {
|
|
209
|
+
let t = Ne();
|
|
210
|
+
t && await Q(e, t);
|
|
211
|
+
}, Fe = [
|
|
212
|
+
"Enter",
|
|
213
|
+
" ",
|
|
214
|
+
"Spacebar"
|
|
215
|
+
], Ie = (e, t) => {
|
|
216
|
+
if (!Fe.includes(e.key)) return !1;
|
|
217
|
+
let n = F.value.find((e) => e.key === t);
|
|
218
|
+
return n?.loadMoreForKey ? (e.preventDefault(), B(n.loadMoreForKey, n.item), !0) : !1;
|
|
219
|
+
}, Q = async (e, t) => {
|
|
220
|
+
Ie(e, t) || await je(e, t) || await Me(e, t) || (await J.handleItemKeydown(e, t), w.value = J.focusedValue.value, !J.focusedValue.value && !P.value && Y());
|
|
221
|
+
}, Le = async (e) => {
|
|
222
|
+
let t = Z();
|
|
223
|
+
t && await Q(e, t);
|
|
224
|
+
}, Re = async (e) => {
|
|
225
|
+
if (P.value || e.target !== M.value) return;
|
|
226
|
+
let t = Z();
|
|
227
|
+
t && await Q(e, t);
|
|
228
|
+
}, ze = async () => {
|
|
229
|
+
let e = Z();
|
|
230
|
+
if (!e) {
|
|
231
|
+
Y();
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
await J.focusItem(e, !1);
|
|
235
|
+
};
|
|
236
|
+
le(ae, {
|
|
237
|
+
mode: () => d.selectionMode,
|
|
238
|
+
isSelected: J.isSelected,
|
|
239
|
+
selectItem: J.toggle,
|
|
240
|
+
registerItem: J.registerItem,
|
|
241
|
+
getItemTabIndex: J.getItemTabIndex,
|
|
242
|
+
getGroupTabIndex: J.getGroupTabIndex,
|
|
243
|
+
handleItemKeydown: Q,
|
|
244
|
+
activeKey: () => w.value,
|
|
245
|
+
setActiveKey: (e) => {
|
|
246
|
+
w.value = e;
|
|
247
|
+
},
|
|
248
|
+
isExpanded: (e) => O.value.includes(e),
|
|
249
|
+
toggleExpanded: (e) => {
|
|
250
|
+
if (N.value) {
|
|
251
|
+
I(e);
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
let t = new Set(O.value);
|
|
255
|
+
t.has(e) ? t.delete(e) : t.add(e), O.value = [...t];
|
|
256
|
+
},
|
|
257
|
+
revealRight: () => d.revealRight,
|
|
258
|
+
expandOnClick: () => d.expandOnClick,
|
|
259
|
+
getItemOptionId: (e) => {
|
|
260
|
+
if (P.value) return q(e);
|
|
261
|
+
},
|
|
262
|
+
usesActiveDescendantNavigation: () => P.value,
|
|
263
|
+
handlesTreeKeyboardNavigation: () => N.value
|
|
264
|
+
});
|
|
265
|
+
let Be = s(() => U.value.getVirtualItems()), Ve = s(() => Be.value.flatMap((e) => {
|
|
266
|
+
let t = F.value[e.index];
|
|
267
|
+
return t ? [{
|
|
268
|
+
virtualRow: e,
|
|
269
|
+
flatRow: t
|
|
270
|
+
}] : [];
|
|
271
|
+
})), He = s(() => U.value.getTotalSize()), Ue = s(() => ({
|
|
272
|
+
height: `${He.value}px`,
|
|
273
|
+
position: "relative",
|
|
274
|
+
width: "100%"
|
|
275
|
+
})), We = s(() => {
|
|
276
|
+
let e = {};
|
|
277
|
+
return typeof d.height == "number" ? e.height = `${d.height}px` : d.height && (e.height = d.height), d.maxHeight && (typeof d.maxHeight == "number" ? e.maxHeight = `${d.maxHeight}px` : e.maxHeight = d.maxHeight), e;
|
|
278
|
+
}), Ge = s(() => ({
|
|
279
|
+
"s-ui-list--virtual": P.value,
|
|
280
|
+
"s-ui-list--static": !P.value
|
|
281
|
+
})), Ke = s(() => ({ "--s-ui-list-gap": he[d.gap] })), qe = s(() => ({ "s-ui-list__scroll--flat": N.value && !P.value })), Je = s(() => {
|
|
282
|
+
if (d.selectionMode === e.MULTIPLE) return !0;
|
|
283
|
+
}), Ye = s(() => {
|
|
284
|
+
if (!P.value) return "listbox";
|
|
285
|
+
}), Xe = s(() => {
|
|
286
|
+
if (!P.value) return Je.value;
|
|
287
|
+
}), Ze = s(() => {
|
|
288
|
+
if (P.value) return J.getGroupTabIndex();
|
|
289
|
+
}), Qe = s(() => w.value ? w.value : i("", T.value)), $e = s(() => {
|
|
290
|
+
if (!P.value) return;
|
|
291
|
+
let e = Qe.value;
|
|
292
|
+
if (e) return q(e);
|
|
293
|
+
});
|
|
294
|
+
ee(() => j.value, {
|
|
295
|
+
distance: () => d.endReachedDistance,
|
|
296
|
+
canLoadMore: () => d.canLoadMore?.() ?? !0,
|
|
297
|
+
onEndReached: () => {
|
|
298
|
+
k("endReached", { direction: "bottom" });
|
|
299
|
+
}
|
|
300
|
+
});
|
|
301
|
+
let et = (e) => ({
|
|
302
|
+
position: "absolute",
|
|
303
|
+
top: 0,
|
|
304
|
+
left: 0,
|
|
305
|
+
width: "100%",
|
|
306
|
+
transform: `translateY(${e.start}px)`
|
|
307
|
+
}), tt = (e) => {
|
|
308
|
+
e instanceof HTMLElement && U.value.measureElement(e);
|
|
309
|
+
}, nt = (e) => {
|
|
310
|
+
let t = e.item, n = {
|
|
311
|
+
rowKey: e.key,
|
|
312
|
+
depth: e.depth,
|
|
313
|
+
expandable: e.hasChildren,
|
|
314
|
+
expanded: e.expanded,
|
|
315
|
+
selected: J.isSelected(e.key),
|
|
316
|
+
active: w.value === e.key,
|
|
317
|
+
disabled: D(t, d.disabledKey),
|
|
318
|
+
title: E(t, d.titleKey),
|
|
319
|
+
subtitle: E(t, d.subtitleKey),
|
|
320
|
+
iconLeft: ve(t, d.iconLeftKey),
|
|
321
|
+
revealRight: d.revealRight,
|
|
322
|
+
onClick: () => {
|
|
323
|
+
k("itemClick", {
|
|
324
|
+
key: e.key,
|
|
325
|
+
item: e.item
|
|
326
|
+
});
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
return d.itemProps ? {
|
|
330
|
+
...n,
|
|
331
|
+
...d.itemProps(t, e)
|
|
332
|
+
} : n;
|
|
333
|
+
}, $ = (e) => ({
|
|
334
|
+
...e,
|
|
335
|
+
revealRight: d.revealRight,
|
|
336
|
+
toggleExpanded: () => {
|
|
337
|
+
I(e.key);
|
|
338
|
+
}
|
|
339
|
+
});
|
|
340
|
+
return f({
|
|
341
|
+
focusNavigation: ze,
|
|
342
|
+
handleKeyboardNavigation: Le
|
|
343
|
+
}), (e, t) => (g(), l("div", {
|
|
344
|
+
ref_key: "listRootElementRef",
|
|
345
|
+
ref: M,
|
|
346
|
+
class: m(["s-ui-list", Ge.value]),
|
|
347
|
+
style: h(Ke.value),
|
|
348
|
+
role: Ye.value,
|
|
349
|
+
"aria-multiselectable": Xe.value,
|
|
350
|
+
tabindex: "-1",
|
|
351
|
+
onKeydown: Re
|
|
352
|
+
}, [N.value && P.value ? (g(), l("div", {
|
|
353
|
+
key: 0,
|
|
354
|
+
ref_key: "scrollElementRef",
|
|
355
|
+
ref: j,
|
|
356
|
+
class: m(["s-ui-list__scroll", qe.value]),
|
|
357
|
+
style: h(We.value),
|
|
358
|
+
role: "listbox",
|
|
359
|
+
"aria-multiselectable": Je.value,
|
|
360
|
+
"aria-activedescendant": $e.value,
|
|
361
|
+
tabindex: Ze.value,
|
|
362
|
+
onKeydown: Pe
|
|
363
|
+
}, [oe("div", {
|
|
364
|
+
class: "s-ui-list__virtual-panel",
|
|
365
|
+
style: h(Ue.value)
|
|
366
|
+
}, [(g(!0), l(o, null, _(Ve.value, (t) => (g(), l("div", {
|
|
367
|
+
key: t.virtualRow.index,
|
|
368
|
+
class: "s-ui-list__virtual-row",
|
|
369
|
+
"data-index": t.virtualRow.index,
|
|
370
|
+
ref_for: !0,
|
|
371
|
+
ref: tt,
|
|
372
|
+
style: h(et(t.virtualRow))
|
|
373
|
+
}, [t.flatRow.divider ? (g(), l("div", Se)) : t.flatRow.loadMoreForKey ? (g(), l(o, { key: 1 }, [y(A).loadMore ? v(e.$slots, "loadMore", p({
|
|
374
|
+
key: 0,
|
|
375
|
+
ref_for: !0
|
|
376
|
+
}, H(t.flatRow))) : (g(), c(y(a), {
|
|
377
|
+
key: 1,
|
|
378
|
+
"row-key": t.flatRow.key,
|
|
379
|
+
depth: t.flatRow.depth,
|
|
380
|
+
tiny: "",
|
|
381
|
+
title: R.value,
|
|
382
|
+
onClick: (e) => V(t.flatRow)
|
|
383
|
+
}, u({ _: 2 }, [z(t.flatRow) ? {
|
|
384
|
+
name: "icon-left",
|
|
385
|
+
fn: x(() => [se(y(C), { size: 16 })]),
|
|
386
|
+
key: "0"
|
|
387
|
+
} : void 0]), 1032, [
|
|
388
|
+
"row-key",
|
|
389
|
+
"depth",
|
|
390
|
+
"title",
|
|
391
|
+
"onClick"
|
|
392
|
+
]))], 64)) : (g(), l(o, { key: 2 }, [y(A).item ? v(e.$slots, "item", p({
|
|
393
|
+
key: 0,
|
|
394
|
+
ref_for: !0
|
|
395
|
+
}, $(t.flatRow))) : (g(), c(y(a), p({
|
|
396
|
+
key: 1,
|
|
397
|
+
ref_for: !0
|
|
398
|
+
}, nt(t.flatRow)), u({ _: 2 }, [
|
|
399
|
+
y(A).itemIconLeft ? {
|
|
400
|
+
name: "icon-left",
|
|
401
|
+
fn: x(() => [v(e.$slots, "itemIconLeft", p({ ref_for: !0 }, $(t.flatRow)))]),
|
|
402
|
+
key: "0"
|
|
403
|
+
} : void 0,
|
|
404
|
+
y(A).itemTitle ? {
|
|
405
|
+
name: "title",
|
|
406
|
+
fn: x(() => [v(e.$slots, "itemTitle", p({ ref_for: !0 }, $(t.flatRow)))]),
|
|
407
|
+
key: "1"
|
|
408
|
+
} : void 0,
|
|
409
|
+
y(A).itemSubtitle ? {
|
|
410
|
+
name: "subtitle",
|
|
411
|
+
fn: x(() => [v(e.$slots, "itemSubtitle", p({ ref_for: !0 }, $(t.flatRow)))]),
|
|
412
|
+
key: "2"
|
|
413
|
+
} : void 0
|
|
414
|
+
]), 1040))], 64))], 12, xe))), 128))], 4)], 46, be)) : N.value ? (g(), l("div", {
|
|
415
|
+
key: 1,
|
|
416
|
+
ref_key: "scrollElementRef",
|
|
417
|
+
ref: j,
|
|
418
|
+
class: m(["s-ui-list__scroll", qe.value]),
|
|
419
|
+
style: h(We.value)
|
|
420
|
+
}, [(g(!0), l(o, null, _(y(F), (t) => (g(), l(o, { key: t.key }, [t.divider ? (g(), l("div", Ce)) : t.loadMoreForKey ? (g(), l(o, { key: 1 }, [y(A).loadMore ? v(e.$slots, "loadMore", p({
|
|
421
|
+
key: 0,
|
|
422
|
+
ref_for: !0
|
|
423
|
+
}, H(t))) : (g(), c(y(a), {
|
|
424
|
+
key: 1,
|
|
425
|
+
"row-key": t.key,
|
|
426
|
+
depth: t.depth,
|
|
427
|
+
tiny: "",
|
|
428
|
+
title: R.value,
|
|
429
|
+
onClick: (e) => V(t)
|
|
430
|
+
}, u({ _: 2 }, [z(t) ? {
|
|
431
|
+
name: "icon-left",
|
|
432
|
+
fn: x(() => [se(y(C), { size: 16 })]),
|
|
433
|
+
key: "0"
|
|
434
|
+
} : void 0]), 1032, [
|
|
435
|
+
"row-key",
|
|
436
|
+
"depth",
|
|
437
|
+
"title",
|
|
438
|
+
"onClick"
|
|
439
|
+
]))], 64)) : (g(), l(o, { key: 2 }, [y(A).item ? v(e.$slots, "item", p({
|
|
440
|
+
key: 0,
|
|
441
|
+
ref_for: !0
|
|
442
|
+
}, $(t))) : (g(), c(y(a), p({
|
|
443
|
+
key: 1,
|
|
444
|
+
ref_for: !0
|
|
445
|
+
}, nt(t)), u({ _: 2 }, [
|
|
446
|
+
y(A).itemIconLeft ? {
|
|
447
|
+
name: "icon-left",
|
|
448
|
+
fn: x(() => [v(e.$slots, "itemIconLeft", p({ ref_for: !0 }, $(t)))]),
|
|
449
|
+
key: "0"
|
|
450
|
+
} : void 0,
|
|
451
|
+
y(A).itemTitle ? {
|
|
452
|
+
name: "title",
|
|
453
|
+
fn: x(() => [v(e.$slots, "itemTitle", p({ ref_for: !0 }, $(t)))]),
|
|
454
|
+
key: "1"
|
|
455
|
+
} : void 0,
|
|
456
|
+
y(A).itemSubtitle ? {
|
|
457
|
+
name: "subtitle",
|
|
458
|
+
fn: x(() => [v(e.$slots, "itemSubtitle", p({ ref_for: !0 }, $(t)))]),
|
|
459
|
+
key: "2"
|
|
460
|
+
} : void 0
|
|
461
|
+
]), 1040))], 64))], 64))), 128))], 6)) : (g(), l("div", we, [v(e.$slots, "default")]))], 46, ye));
|
|
462
|
+
}
|
|
463
|
+
});
|
|
464
|
+
//#endregion
|
|
465
|
+
export { w as a, E as i, D as n, ve as r, k as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e=require("./SButton.types-UKroD-ev.cjs"),t=require("./SButton-9dLbCJvh.cjs"),n=require("./useSelectionGroup-NJvi3hNo.cjs"),r=require("./SDropdown-LNVnMol3.cjs"),i=require("./SDropdownMenu-k9SxaFVH.cjs"),a=require("./SInput-IfbP8zrv.cjs"),o=require("./SListItem-cWTuQQY-.cjs"),s=require("./SList-D0PDc8VN.cjs");let c=require("vue"),l=require("@shtabapp/ui-kit-primitives");var u=({listItemScope:e,itemTitle:t,itemSubtitle:n,itemDisabled:r,itemIconLeft:i,listActiveKey:a,isOptionSelected:o})=>{let c=e.item;return{rowKey:e.key,title:s.i(c,t),subtitle:s.i(c,n),disabled:s.n(c,r),iconLeft:s.r(c,i),selected:o,active:a===e.key,revealRight:e.revealRight,tiny:!0}},d=e=>typeof e==`string`||typeof e==`number`,f=(e,t)=>{let n=e[t];if(d(n))return n},p=e=>typeof e==`string`?e:String(e),m=e=>e==null?!1:typeof e==`string`?e.length>0:!0,h=(e,t,n)=>t.find(t=>p(f(t,n)??``)===e),g=e=>typeof e==`object`&&!!e,_=(e,t,n)=>{let r=h(e,t,n);if(r)return f(r,n)},v=function(e){return e.INPUT=`input`,e.CONTENT=`content`,e}({}),y=(e,t,n)=>{if(!e)return!0;let r=e.toLocaleLowerCase(),i=s.i(t,n.itemTitle)?.toLocaleLowerCase()??``,a=p(f(t,n.itemValue)??``).toLocaleLowerCase();return i.includes(r)||a.includes(r)},ee=(e,t,n,r)=>{let i=r??((e,t)=>y(e,t,n));return t?e.filter(e=>i(t,e)):[...e]},b=e=>typeof e==`string`&&m(e),x=e=>typeof e==`number`&&m(e),S=(e,t,n)=>{if(t){if(!g(e))return;let t=f(e,n);return b(t)||x(t)?t:void 0}let r=typeof e==`string`||typeof e==`number`?e:void 0;if(b(r)||x(r))return r},C=(e,t,n)=>e?(Array.isArray(e)?e:[e]).flatMap(e=>{let r=S(e,t,n);return m(r)?[r]:[]}):[],w=(e,t)=>{if(b(t)){e.value=t;return}if(x(t)){e.value=t;return}e.value=void 0},T=(e,t,n)=>t.flatMap(t=>{let r=p(t),i=e.find(e=>p(f(e,n)??``)===r);return i?[i]:[]}),E=({modelValue:e,options:t,itemFields:r,multiple:i,returnObject:a,searchable:o,filterOption:l,isDropdownOpen:u,searchQuery:d})=>{let g=(0,c.computed)(()=>(0,c.toValue)(i)),y=(0,c.computed)(()=>(0,c.toValue)(a)),b=(0,c.computed)(()=>(0,c.toValue)(o)===v.INPUT),x=(0,c.computed)(()=>(0,c.toValue)(o)===v.CONTENT),S=(0,c.computed)(()=>!!(0,c.toValue)(o)),E=(0,c.computed)(()=>{let t=(0,c.toValue)(r);return C(e.value,y.value,t.itemValue)}),te=(0,c.computed)(()=>{let e=(0,c.toValue)(t),n=(0,c.toValue)(r);return ee(e,S.value?d.value:``,n,(0,c.toValue)(l))}),ne=(0,c.computed)(()=>g.value?n.n.MULTIPLE:n.n.SINGLE),D=(t,n,r)=>{if(y.value){e.value=T(n,t,r);return}e.value=t},O=(t,n,r)=>{if(!t){e.value=void 0;return}if(y.value){e.value=h(t,n,r)??void 0;return}w(e,_(t,n,r))},k=(0,c.computed)({get:()=>{if(g.value)return E.value.map(e=>p(e));let e=E.value[0];if(m(e))return p(e)},set:e=>{let n=(0,c.toValue)(t),i=(0,c.toValue)(r);if(g.value){D((Array.isArray(e)?e:[]).map(e=>_(e,n,i.itemValue)).filter(e=>m(e)),n,i.itemValue);return}O(typeof e==`string`?e:void 0,n,i.itemValue)}}),A=(0,c.computed)(()=>E.value.length>0),j=(e,t,n)=>{let r=p(t);return e.find(e=>p(f(e,n)??``)===r)},M=(0,c.computed)(()=>{let e=E.value[0];if(!m(e))return``;let n=(0,c.toValue)(r),i=j((0,c.toValue)(t),e,n.itemValue);return i?s.i(i,n.itemTitle)??``:p(e)}),N=(0,c.computed)(()=>{let e=(0,c.toValue)(t),n=(0,c.toValue)(r);return E.value.map(t=>{let r=j(e,t,n.itemValue);return r?s.i(r,n.itemTitle)??``:p(t)})}),re=(0,c.computed)(()=>N.value.join(`, `)),P=(0,c.computed)(()=>g.value?E.value.length===0:!M.value),F=(0,c.computed)(()=>b.value&&(u.value||g.value)),I=()=>{d.value=``};return(0,c.watch)(u,e=>{e||I()}),(0,c.watch)(()=>(0,c.toValue)(o),()=>{I()}),{searchQuery:d,selectedValues:E,filteredOptions:te,listSelectionMode:ne,listSelectedModel:k,hasSelectedValues:A,singleDisplayLabel:M,multipleDisplayLabels:N,multipleDisplayText:re,showPlaceholder:P,showInputSearchField:F,isSearchableMode:S,isSearchableInputMode:b,isSearchableContentMode:x,isMultipleMode:g,isReturnObjectMode:y,clearSelection:()=>{e.value=void 0,I()},removeSelectedValue:e=>{let n=p(e);D(E.value.filter(e=>p(e)!==n),(0,c.toValue)(t),(0,c.toValue)(r).itemValue)},resetSearchQuery:I,formatSelectListKey:p,resolveValueFromListKey:e=>_(e,(0,c.toValue)(t),(0,c.toValue)(r).itemValue)}},te={key:1,class:`s-ui-select__empty s-ui-typography-body-14-regular`},ne=[`id`,`aria-expanded`,`aria-controls`,`aria-disabled`,`aria-readonly`,`aria-autocomplete`,`tabindex`],D={key:0,class:`s-ui-select__value`},O={key:1,class:`s-ui-select__placeholder`},k={key:1,class:`s-ui-select__placeholder`},A={key:2,class:`s-ui-select__value`},j={key:3,class:`s-ui-select__value-suffix`},M=[`name`,`placeholder`,`disabled`,`readonly`],N=20,re=`100%`,P=20,F=(0,c.defineComponent)({__name:`SSelect`,props:(0,c.mergeModels)({options:{},itemValue:{default:`value`},itemTitle:{default:`label`},itemSubtitle:{default:`subtitle`},itemId:{},itemDisabled:{default:`disabled`},itemIconLeft:{default:`iconLeft`},multiple:{type:Boolean,default:!1},returnObject:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},closableOptions:{type:Boolean,default:!1},searchable:{type:[String,Boolean],default:!1},closeOnSelect:{type:Boolean,default:!0},listHeight:{default:320},searchPlaceholder:{default:`Search`},filterOption:{type:Function},fitViewport:{type:Boolean,default:!0},panelWidth:{},surfaceClass:{},canLoadMore:{type:Function},endReachedDistance:{default:0},label:{},labelProps:{},placeholder:{},helpMessages:{},errorMessages:{},bordered:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},iconLeft:{},customize:{default:()=>a.n.NONE},name:{},id:{}},{modelValue:{},modelModifiers:{},searchQuery:{default:``},searchQueryModifiers:{}}),emits:(0,c.mergeModels)([`clear`,`focus`,`blur`,`open`,`close`,`endReached`],[`update:modelValue`,`update:searchQuery`]),setup(n,{expose:d,emit:f}){let p=(0,c.useModel)(n,`modelValue`),h=(0,c.useModel)(n,`searchQuery`),g=f,{t:_}=(0,l.useUiKitI18n)(),v=(0,c.useSlots)(),y=(0,c.useId)(),ee=(0,c.useId)(),b=(0,c.useTemplateRef)(`triggerInputRef`),x=(0,c.ref)(``),S=(0,c.useTemplateRef)(`searchInputElementRef`),C=(0,c.useTemplateRef)(`panelSearchInputElementRef`),w=(0,c.useTemplateRef)(`listElementRef`),T=(0,c.ref)(),F=(0,c.ref)(!1),I=(0,c.ref)(!1),ie=(0,c.computed)(()=>n.panelWidth===void 0),ae=(0,c.computed)(()=>n.panelWidth??re),oe=(0,c.computed)(()=>n.itemId??n.itemValue),se=(0,c.computed)(()=>({itemValue:n.itemValue,itemTitle:n.itemTitle,itemSubtitle:n.itemSubtitle,itemId:oe.value})),{selectedValues:L,filteredOptions:R,listSelectionMode:ce,listSelectedModel:z,hasSelectedValues:le,singleDisplayLabel:ue,multipleDisplayLabels:de,multipleDisplayText:B,showPlaceholder:V,showInputSearchField:H,isSearchableMode:fe,isSearchableInputMode:U,isSearchableContentMode:W,isMultipleMode:G,clearSelection:pe,removeSelectedValue:K,resolveValueFromListKey:me,formatSelectListKey:q}=E({modelValue:p,options:()=>n.options,itemFields:()=>se.value,multiple:()=>n.multiple,returnObject:()=>n.returnObject,searchable:()=>n.searchable,filterOption:()=>n.filterOption,isDropdownOpen:F,searchQuery:h}),he=(0,c.computed)(()=>({disabled:n.disabled,displayLabel:ue.value})),J=(0,c.computed)(()=>R.value.length>P),ge=(0,c.computed)(()=>W.value||J.value?n.listHeight:`auto`),_e=(0,c.computed)(()=>{if(!(W.value||J.value))return n.listHeight}),ve=(0,c.computed)(()=>L.value.map(e=>q(e))),ye=e=>ve.value.includes(e),be=()=>({tiny:!0}),xe=e=>u({listItemScope:e,itemTitle:n.itemTitle,itemSubtitle:n.itemSubtitle,itemDisabled:n.itemDisabled,itemIconLeft:n.itemIconLeft,listActiveKey:T.value,isOptionSelected:ye(e.key)}),Se=e=>{let t=me(e);if(m(t)){if(G.value){K(t);return}p.value=void 0}},Ce=(0,c.computed)(()=>n.id??y),we=(0,c.computed)(()=>ee),Te=(0,c.computed)(()=>b.value?.fieldElementRef??null),Ee=(0,c.computed)(()=>({labels:de.value,values:L.value,displayText:B.value,disabled:n.disabled||n.readonly,removeValue:K})),De=(0,c.computed)(()=>{if(!n.disabled&&(n.readonly&&!U.value||!U.value))return 0}),Oe=(0,c.computed)(()=>({"s-ui-select--disabled":n.disabled,"s-ui-select--readonly":n.readonly,"s-ui-select--multiple":G.value,"s-ui-select--open":F.value})),ke=()=>{if(W.value){C.value?.focus();return}S.value?.focus()},Ae=async()=>{await(0,c.nextTick)(),C.value?.focus()},je=async()=>{await(0,c.nextTick)(),await w.value?.focusNavigation()},Y=async()=>{if(!(n.disabled||n.readonly)&&!F.value){if(F.value=!0,g(`open`),W.value){await Ae();return}if(U.value){await(0,c.nextTick)(),S.value?.focus();return}await je()}},Me=async()=>{n.disabled||n.readonly||F.value||await Y()};(0,c.watch)(h,async e=>{U.value&&(n.disabled||n.readonly||e&&(F.value||await Y()))});let X=()=>{F.value&&(F.value=!1,T.value=void 0,g(`close`))},Z=()=>{!n.closeOnSelect||G.value||X()};(0,c.watch)(p,(e,t)=>{!n.closeOnSelect||G.value||!F.value||!e||e===t||X()});let Ne=e=>{F.value&&e.target instanceof Element&&e.target.closest(`.s-ui-list-item`)&&Z()},Pe=async e=>{e.key!==`Enter`&&e.key!==` `&&e.key!==`Spacebar`||F.value&&(await(0,c.nextTick)(),Z())},Q=async()=>{if(F.value){X();return}await Y()},Fe=async e=>{if(!(n.disabled||n.readonly)&&e.target instanceof HTMLElement){if(e.target.closest(`.s-ui-select__search-input`)){F.value||await Y();return}await Q()}},Ie=async e=>e.key!==`ArrowDown`&&e.key!==`ArrowUp`?!1:(e.preventDefault(),e.stopPropagation(),F.value||await Y(),await je(),await w.value?.handleKeyboardNavigation(e),!0),Le=e=>{let t=me(e);if(t){if(G.value){L.value.some(t=>q(t)===e)?K(t):z.value=[...L.value.map(e=>q(e)),e];return}z.value=e,Z()}},Re=async e=>{if(!(n.disabled||n.readonly)&&!await Ie(e)){if(e.key===`Escape`){e.preventDefault(),X();return}if(e.key===`Enter`||e.key===` `){if(e.preventDefault(),F.value&&T.value){Le(T.value);return}await Q()}}},$=async e=>{if(e.key===`Escape`){e.preventDefault(),X();return}await Ie(e)},ze=$,Be=e=>{n.disabled||(I.value||g(`focus`,e),I.value=!0)},Ve=e=>{if(!(e.currentTarget instanceof HTMLElement))return;let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||(I.value=!1,g(`blur`,e))},He=()=>{pe(),g(`clear`)},Ue=e=>{g(`endReached`,e)};return d({open:Y,close:X,toggle:Q,focusSearchInput:ke}),(u,d)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{class:(0,c.normalizeClass)([`s-ui-select`,Oe.value])},[(0,c.createVNode)((0,c.unref)(r.t),{modelValue:F.value,"onUpdate:modelValue":d[4]||=e=>F.value=e,reference:Te.value,disabled:n.disabled,"match-reference-width":ie.value,"fit-viewport":n.fitViewport,"surface-class":n.surfaceClass,"content-id":we.value,"dismiss-on-click-outside":!0,"dismiss-on-escape":!0},{content:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(i.t),{class:`s-ui-select__menu`,width:ae.value},(0,c.createSlots)({default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{class:`s-ui-select__menu-body`,onClick:Ne,onKeydown:Pe},[(0,c.unref)(R).length>0?((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(s.t),{key:0,ref_key:`listElementRef`,ref:w,modelValue:T.value,"onUpdate:modelValue":d[2]||=e=>T.value=e,selected:(0,c.unref)(z),"onUpdate:selected":d[3]||=e=>(0,c.isRef)(z)?z.value=e:null,items:(0,c.unref)(R),"item-key":oe.value,"title-key":n.itemTitle,"subtitle-key":n.itemSubtitle,"icon-left-key":n.itemIconLeft,"disabled-key":n.itemDisabled,"selection-mode":(0,c.unref)(ce),mandatory:!n.multiple,height:ge.value,"max-height":_e.value,virtual:J.value,"item-props":be,"selected-on-top":(0,c.unref)(G),"can-load-more":n.canLoadMore,"end-reached-distance":n.endReachedDistance,onEndReached:Ue},(0,c.createSlots)({_:2},[(0,c.unref)(v).option||(0,c.unref)(v)[`option-icon`]||n.closableOptions||(0,c.unref)(G)?{name:`item`,fn:(0,c.withCtx)(r=>[(0,c.unref)(v).option?(0,c.renderSlot)(u.$slots,`option`,(0,c.normalizeProps)((0,c.mergeProps)({key:0},r))):n.closableOptions?((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.t),(0,c.normalizeProps)((0,c.mergeProps)({key:1},xe(r))),(0,c.createSlots)({_:2},[(0,c.unref)(v)[`option-icon`]?{name:`icon-left`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`option-icon`,(0,c.normalizeProps)((0,c.guardReactiveProps)(r)))]),key:`0`}:void 0,ye(r.key)?{name:`right`,fn:(0,c.withCtx)(n=>[(0,c.createVNode)((0,c.unref)(t.t),{appearance:(0,c.unref)(e.t).BARE,variant:(0,c.unref)(e.r).NEUTRAL,size:(0,c.unref)(e.n).SMALL,icon:`closeMini`,"aria-label":(0,c.unref)(_)(`select.removeOption`),disabled:n.disabled||n.readonly,tabindex:-1,onClick:(0,c.withModifiers)(e=>Se(r.key),[`stop`])},null,8,[`appearance`,`variant`,`size`,`aria-label`,`disabled`,`onClick`])]),key:`1`}:void 0]),1040)):((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.t),(0,c.normalizeProps)((0,c.mergeProps)({key:2},xe(r))),(0,c.createSlots)({_:2},[(0,c.unref)(v)[`option-icon`]?{name:`icon-left`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`option-icon`,(0,c.normalizeProps)((0,c.guardReactiveProps)(r)))]),key:`0`}:void 0]),1040))]),key:`0`}:void 0]),1032,[`modelValue`,`selected`,`items`,`item-key`,`title-key`,`subtitle-key`,`icon-left-key`,`disabled-key`,`selection-mode`,`mandatory`,`height`,`max-height`,`virtual`,`selected-on-top`,`can-load-more`,`end-reached-distance`])):((0,c.openBlock)(),(0,c.createElementBlock)(`div`,te,[(0,c.renderSlot)(u.$slots,`empty`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(_)(`select.noOptions`)),1)])]))],32)]),_:2},[(0,c.unref)(W)||(0,c.unref)(v)[`panel-header`]?{name:`header`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`panel-header`),(0,c.unref)(W)?((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(a.t),{key:0,ref_key:`panelSearchInputElementRef`,ref:C,modelValue:h.value,"onUpdate:modelValue":d[0]||=e=>h.value=e,placeholder:n.searchPlaceholder,disabled:n.disabled,clearable:!1,"icon-left":`search`,onClick:d[1]||=(0,c.withModifiers)(()=>{},[`stop`]),onKeydown:(0,c.unref)(ze)},null,8,[`modelValue`,`placeholder`,`disabled`,`onKeydown`])):(0,c.createCommentVNode)(``,!0)]),key:`0`}:void 0,(0,c.unref)(v)[`panel-footer`]?{name:`footer`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`panel-footer`)]),key:`1`}:void 0]),1032,[`width`])]),_:3},8,[`modelValue`,`reference`,`disabled`,`match-reference-width`,`fit-viewport`,`surface-class`,`content-id`]),(0,c.createVNode)((0,c.unref)(a.t),{ref_key:`triggerInputRef`,ref:b,modelValue:x.value,"onUpdate:modelValue":d[7]||=e=>x.value=e,label:n.label,"label-props":n.labelProps,placeholder:n.placeholder,"help-messages":n.helpMessages,"error-messages":n.errorMessages,bordered:n.bordered,disabled:n.disabled,readonly:n.readonly,clearable:n.clearable,"has-value":(0,c.unref)(le),focused:I.value||F.value,"icon-left":n.iconLeft,customize:n.customize,name:n.name,id:Ce.value,onClear:He,onFocus:Be,onBlur:Ve},(0,c.createSlots)({control:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`div`,{id:Ce.value,class:(0,c.normalizeClass)([`s-ui-select__control s-ui-typography-body-14-regular`,{"s-ui-select__control--multiple":(0,c.unref)(G),"s-ui-select__control--empty":(0,c.unref)(G)&&!(0,c.unref)(le)&&!(0,c.unref)(H),"s-ui-select__control--with-value-suffix":(0,c.unref)(v)[`value-suffix`]&&!(0,c.unref)(G)&&!(0,c.unref)(H)&&!(0,c.unref)(V)}]),role:`combobox`,"aria-expanded":F.value,"aria-controls":we.value,"aria-haspopup":`listbox`,"aria-disabled":n.disabled?!0:void 0,"aria-readonly":n.readonly?!0:void 0,"aria-autocomplete":(0,c.unref)(fe)?`list`:void 0,tabindex:De.value,onClick:Fe,onKeydown:Re},[(0,c.unref)(G)?(0,c.renderSlot)(u.$slots,`selection`,(0,c.normalizeProps)((0,c.mergeProps)({key:0},Ee.value)),()=>[(0,c.unref)(B)?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,D,(0,c.toDisplayString)((0,c.unref)(B)),1)):(0,c.unref)(V)&&!(0,c.unref)(H)?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,O,(0,c.toDisplayString)(n.placeholder),1)):(0,c.createCommentVNode)(``,!0)]):(0,c.unref)(V)&&!(0,c.unref)(H)?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,k,(0,c.toDisplayString)(n.placeholder),1)):(0,c.unref)(H)?(0,c.createCommentVNode)(``,!0):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,A,(0,c.toDisplayString)((0,c.unref)(ue)),1)),(0,c.unref)(v)[`value-suffix`]&&!(0,c.unref)(G)&&!(0,c.unref)(H)&&!(0,c.unref)(V)?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,j,[(0,c.renderSlot)(u.$slots,`value-suffix`,(0,c.normalizeProps)((0,c.guardReactiveProps)(he.value)))])):(0,c.createCommentVNode)(``,!0),(0,c.unref)(H)?(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`input`,{key:4,ref_key:`searchInputElementRef`,ref:S,"onUpdate:modelValue":d[5]||=e=>h.value=e,class:`s-ui-select__search-input`,type:`text`,name:n.name,placeholder:n.placeholder,disabled:n.disabled,readonly:n.readonly,autocomplete:`off`,onClick:d[6]||=(0,c.withModifiers)(()=>{},[`stop`]),onFocus:Me,onKeydown:$},null,40,M)),[[c.vModelText,h.value]]):(0,c.createCommentVNode)(``,!0)],42,ne)]),action:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(l.SIcon),{name:`chevronMiniDown`,size:N,class:`s-ui-select__chevron`})]),_:2},[(0,c.unref)(v).label?{name:`label`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`label`)]),key:`0`}:void 0,(0,c.unref)(v).prefix?{name:`prefix`,fn:(0,c.withCtx)(e=>[(0,c.renderSlot)(u.$slots,`prefix`,(0,c.normalizeProps)((0,c.guardReactiveProps)(e)))]),key:`1`}:void 0,(0,c.unref)(v).prepend?{name:`prepend`,fn:(0,c.withCtx)(e=>[(0,c.renderSlot)(u.$slots,`prepend`,(0,c.normalizeProps)((0,c.guardReactiveProps)(e)))]),key:`2`}:void 0,(0,c.unref)(v).message?{name:`message`,fn:(0,c.withCtx)(()=>[(0,c.renderSlot)(u.$slots,`message`)]),key:`3`}:void 0]),1032,[`modelValue`,`label`,`label-props`,`placeholder`,`help-messages`,`error-messages`,`bordered`,`disabled`,`readonly`,`clearable`,`has-value`,`focused`,`icon-left`,`customize`,`name`,`id`])],2))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return F}});
|