@davincihealthcare/elty-design-system-vue 2.10.2 → 2.10.4

package/dist/ElDropdown.vue.d.ts

@@ -33,6 +33,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "click:action": () => void;
     "update:is-open": (isOpen: boolean) => void;
+    endOfList: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: DropdownItem[];
     title?: string;
@@ -55,6 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
 }>>> & {
     "onClick:action"?: (() => any) | undefined;
     "onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
+    onEndOfList?: (() => any) | undefined;
 }, {
     title: string;
     minWidth: number;

package/dist/forms/ElInputAutocomplete.vue.d.ts

@@ -7,6 +7,9 @@ export type ElInputAutocompleteItems = Array<DropdownItem & {
     label?: string;
     value?: string;
 }>;
+export type EventOptions = {
+    isEndOfList: boolean;
+};
 declare const _default: import('vue').DefineComponent<{
     modelValue: {
         type: PropType<TextualValueType>;
@@ -49,7 +52,7 @@ declare const _default: import('vue').DefineComponent<{
         requied: boolean;
     };
     dataController: {
-        type: PropType<(args: TextualValueType) => Promise<{
+        type: PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{
             data: ElInputAutocompleteItems;
         }>>;
         required: false;
@@ -102,6 +105,7 @@ declare const _default: import('vue').DefineComponent<{
     "update:modelValue": (value: TextualValueType) => void;
     "item:click": (itemIndex: number) => void;
     "update:selectedItems": (value: ElInputAutocompleteItems) => void;
+    endOfList: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: {
         type: PropType<TextualValueType>;
@@ -144,7 +148,7 @@ declare const _default: import('vue').DefineComponent<{
         requied: boolean;
     };
     dataController: {
-        type: PropType<(args: TextualValueType) => Promise<{
+        type: PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{
             data: ElInputAutocompleteItems;
         }>>;
         required: false;
@@ -192,6 +196,7 @@ declare const _default: import('vue').DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((value: TextualValueType) => any) | undefined;
+    onEndOfList?: (() => any) | undefined;
     "onItem:click"?: ((itemIndex: number) => any) | undefined;
     "onUpdate:selectedItems"?: ((value: ElInputAutocompleteItems) => any) | undefined;
 }, {
@@ -208,7 +213,7 @@ declare const _default: import('vue').DefineComponent<{
     focusOnMount: boolean;
     multiple: boolean;
     items: ElInputAutocompleteItems;
-    dataController: (args: TextualValueType) => Promise<{
+    dataController: (args: TextualValueType, eventOptions?: EventOptions) => Promise<{
         data: ElInputAutocompleteItems;
     }>;
     selectedItems: ElInputAutocompleteItems;

package/dist/node_modules/@vueuse/core/index.esm.js

@@ -1,2 +1,2 @@
-import{noop as _,isIOS as Y,tryOnMounted as N,toValue as y,useDebounceFn as ee,useThrottleFn as te,toRef as ne,tryOnScopeDispose as R,isClient as oe,isObject as re,notNullish as G}from"./node_modules/@vueuse/shared/index.esm.js";import{createFilterWrapper as Le,debounceFilter as We,getLifeCycleTarget as Te,throttleFilter as xe,watchDeep as De}from"./node_modules/@vueuse/shared/index.esm.js";import{ref as p,watch as T,computed as W,reactive as Q,watchEffect as se,shallowReactive as ie,getCurrentInstance as le,onMounted as ce}from"vue";function w(e){var t;const n=y(e);return(t=n==null?void 0:n.$el)!=null?t:n}const I=oe?window:void 0;function A(...e){let t,n,i,f;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,i,f]=e,t=I):[t,n,i,f]=e,!t)return _;Array.isArray(n)||(n=[n]),Array.isArray(i)||(i=[i]);const a=[],l=()=>{a.forEach(u=>u()),a.length=0},o=(u,r,s,d)=>(u.addEventListener(r,s,d),()=>u.removeEventListener(r,s,d)),v=T(()=>[w(t),y(f)],([u,r])=>{if(l(),!u)return;const s=re(r)?{...r}:r;a.push(...n.flatMap(d=>i.map(h=>o(u,d,h,s))))},{immediate:!0,flush:"post"}),c=()=>{v(),l()};return R(c),c}let $=!1;function we(e,t,n={}){const{window:i=I,ignore:f=[],capture:a=!0,detectIframe:l=!1}=n;if(!i)return _;Y&&!$&&($=!0,Array.from(i.document.body.children).forEach(s=>s.addEventListener("click",_)),i.document.documentElement.addEventListener("click",_));let o=!0;const v=s=>f.some(d=>{if(typeof d=="string")return Array.from(i.document.querySelectorAll(d)).some(h=>h===s.target||s.composedPath().includes(h));{const h=w(d);return h&&(s.target===h||s.composedPath().includes(h))}}),u=[A(i,"click",s=>{const d=w(e);if(!(!d||d===s.target||s.composedPath().includes(d))){if(s.detail===0&&(o=!v(s)),!o){o=!0;return}t(s)}},{passive:!0,capture:a}),A(i,"pointerdown",s=>{const d=w(e);o=!v(s)&&!!(d&&!s.composedPath().includes(d))},{passive:!0}),l&&A(i,"blur",s=>{setTimeout(()=>{var d;const h=w(e);((d=i.document.activeElement)==null?void 0:d.tagName)==="IFRAME"&&!(h!=null&&h.contains(i.document.activeElement))&&t(s)},0)})].filter(Boolean);return()=>u.forEach(s=>s())}function ue(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function be(...e){let t,n,i={};e.length===3?(t=e[0],n=e[1],i=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],i=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:f=I,eventName:a="keydown",passive:l=!1,dedupe:o=!1}=i,v=ue(t);return A(f,a,u=>{u.repeat&&y(o)||v(u)&&n(u)},l)}function ae(){const e=p(!1),t=le();return t&&ce(()=>{e.value=!0},t),e}function z(e){const t=ae();return W(()=>(t.value,!!e()))}function fe(e,t,n={}){const{window:i=I,...f}=n;let a;const l=z(()=>i&&"MutationObserver"in i),o=()=>{a&&(a.disconnect(),a=void 0)},v=W(()=>{const s=y(e),d=(Array.isArray(s)?s:[s]).map(w).filter(G);return new Set(d)}),c=T(()=>v.value,s=>{o(),l.value&&s.size&&(a=new MutationObserver(t),s.forEach(d=>a.observe(d,f)))},{immediate:!0,flush:"post"}),u=()=>a==null?void 0:a.takeRecords(),r=()=>{o(),c()};return R(r),{isSupported:l,stop:r,takeRecords:u}}function de(e,t={}){const{window:n=I}=t,i=z(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let f;const a=p(!1),l=c=>{a.value=c.matches},o=()=>{f&&("removeEventListener"in f?f.removeEventListener("change",l):f.removeListener(l))},v=se(()=>{i.value&&(o(),f=n.matchMedia(y(e)),"addEventListener"in f?f.addEventListener("change",l):f.addListener(l),a.value=f.matches)});return R(()=>{v(),o(),f=void 0}),a}function J(e,t,n={}){const{window:i=I,...f}=n;let a;const l=z(()=>i&&"ResizeObserver"in i),o=()=>{a&&(a.disconnect(),a=void 0)},v=W(()=>Array.isArray(e)?e.map(r=>w(r)):[w(e)]),c=T(v,r=>{if(o(),l.value&&i){a=new ResizeObserver(t);for(const s of r)s&&a.observe(s,f)}},{immediate:!0,flush:"post"}),u=()=>{o(),c()};return R(u),{isSupported:l,stop:u}}function ye(e,t={}){const{reset:n=!0,windowResize:i=!0,windowScroll:f=!0,immediate:a=!0}=t,l=p(0),o=p(0),v=p(0),c=p(0),u=p(0),r=p(0),s=p(0),d=p(0);function h(){const g=w(e);if(!g){n&&(l.value=0,o.value=0,v.value=0,c.value=0,u.value=0,r.value=0,s.value=0,d.value=0);return}const b=g.getBoundingClientRect();l.value=b.height,o.value=b.bottom,v.value=b.left,c.value=b.right,u.value=b.top,r.value=b.width,s.value=b.x,d.value=b.y}return J(e,h),T(()=>w(e),g=>!g&&h()),fe(e,h,{attributeFilter:["style","class"]}),f&&A("scroll",h,{capture:!0,passive:!0}),i&&A("resize",h,{passive:!0}),N(()=>{a&&h()}),{height:l,bottom:o,left:v,right:c,top:u,width:r,x:s,y:d,update:h}}function ge(e,t={width:0,height:0},n={}){const{window:i=I,box:f="content-box"}=n,a=W(()=>{var r,s;return(s=(r=w(e))==null?void 0:r.namespaceURI)==null?void 0:s.includes("svg")}),l=p(t.width),o=p(t.height),{stop:v}=J(e,([r])=>{const s=f==="border-box"?r.borderBoxSize:f==="content-box"?r.contentBoxSize:r.devicePixelContentBoxSize;if(i&&a.value){const d=w(e);if(d){const h=d.getBoundingClientRect();l.value=h.width,o.value=h.height}}else if(s){const d=Array.isArray(s)?s:[s];l.value=d.reduce((h,{inlineSize:g})=>h+g,0),o.value=d.reduce((h,{blockSize:g})=>h+g,0)}else l.value=r.contentRect.width,o.value=r.contentRect.height},n);N(()=>{const r=w(e);r&&(l.value="offsetWidth"in r?r.offsetWidth:t.width,o.value="offsetHeight"in r?r.offsetHeight:t.height)});const c=T(()=>w(e),r=>{l.value=r?t.width:0,o.value=r?t.height:0});function u(){v(),c()}return{width:l,height:o,stop:u}}function ve(e,t,n={}){const{root:i,rootMargin:f="0px",threshold:a=.1,window:l=I,immediate:o=!0}=n,v=z(()=>l&&"IntersectionObserver"in l),c=W(()=>{const h=y(e);return(Array.isArray(h)?h:[h]).map(w).filter(G)});let u=_;const r=p(o),s=v.value?T(()=>[c.value,w(i),r.value],([h,g])=>{if(u(),!r.value||!h.length)return;const b=new IntersectionObserver(t,{root:w(g),rootMargin:f,threshold:a});h.forEach(E=>E&&b.observe(E)),u=()=>{b.disconnect(),u=_}},{immediate:o,flush:"post"}):_,d=()=>{u(),s(),r.value=!1};return R(d),{isSupported:v,isActive:r,pause(){u(),r.value=!1},resume(){r.value=!0},stop:d}}function Ee(e,t={}){const{window:n=I,scrollTarget:i,threshold:f=0}=t,a=p(!1);return ve(e,l=>{let o=a.value,v=0;for(const c of l)c.time>=v&&(v=c.time,o=c.isIntersecting);a.value=o},{root:i,window:n,threshold:f}),a}const q=1;function Se(e,t={}){const{throttle:n=0,idle:i=200,onStop:f=_,onScroll:a=_,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:o={capture:!1,passive:!0},behavior:v="auto",window:c=I,onError:u=m=>{console.error(m)}}=t,r=p(0),s=p(0),d=W({get(){return r.value},set(m){g(m,void 0)}}),h=W({get(){return s.value},set(m){g(void 0,m)}});function g(m,x){var S,k,C,L;if(!c)return;const O=y(e);if(!O)return;(C=O instanceof Document?c.document.body:O)==null||C.scrollTo({top:(S=y(x))!=null?S:h.value,left:(k=y(m))!=null?k:d.value,behavior:y(v)});const H=((L=O==null?void 0:O.document)==null?void 0:L.documentElement)||(O==null?void 0:O.documentElement)||O;d!=null&&(r.value=H.scrollLeft),h!=null&&(s.value=H.scrollTop)}const b=p(!1),E=Q({left:!0,right:!1,top:!0,bottom:!1}),M=Q({left:!1,right:!1,top:!1,bottom:!1}),F=m=>{b.value&&(b.value=!1,M.left=!1,M.right=!1,M.top=!1,M.bottom=!1,f(m))},Z=ee(F,n+i),B=m=>{var x;if(!c)return;const S=((x=m==null?void 0:m.document)==null?void 0:x.documentElement)||(m==null?void 0:m.documentElement)||w(m),{display:k,flexDirection:C}=getComputedStyle(S),L=S.scrollLeft;M.left=L<r.value,M.right=L>r.value;const O=Math.abs(L)<=(l.left||0),H=Math.abs(L)+S.clientWidth>=S.scrollWidth-(l.right||0)-q;k==="flex"&&C==="row-reverse"?(E.left=H,E.right=O):(E.left=O,E.right=H),r.value=L;let D=S.scrollTop;m===c.document&&!D&&(D=c.document.body.scrollTop),M.top=D<s.value,M.bottom=D>s.value;const X=Math.abs(D)<=(l.top||0),j=Math.abs(D)+S.clientHeight>=S.scrollHeight-(l.bottom||0)-q;k==="flex"&&C==="column-reverse"?(E.top=j,E.bottom=X):(E.top=X,E.bottom=j),s.value=D},K=m=>{var x;if(!c)return;const S=(x=m.target.documentElement)!=null?x:m.target;B(S),b.value=!0,Z(m),a(m)};return A(e,"scroll",n?te(K,n,!0,!1):K,o),N(()=>{try{const m=y(e);if(!m)return;B(m)}catch(m){u(m)}}),A(e,"scrollend",F,o),{x:d,y:h,isScrolling:b,arrivedState:E,directions:M,measure(){const m=y(e);c&&m&&B(m)}}}function P(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function Oe(e,t){const i=ie(new Map),f=(...u)=>JSON.stringify(u),a=(u,...r)=>(i.set(u,e(...r)),i.get(u)),l=(...u)=>a(f(...u),...u),o=(...u)=>{i.delete(f(...u))},v=()=>{i.clear()},c=(...u)=>{const r=f(...u);return i.has(r)?i.get(r):a(r,...u)};return c.load=l,c.delete=o,c.clear=v,c.generateKey=f,c.cache=i,c}function U(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:U(n)}}function he(e){const t=e||window.event,n=t.target;return U(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const V=new WeakMap;function Ie(e,t=!1){const n=p(t);let i=null,f="";T(ne(e),o=>{const v=P(y(o));if(v){const c=v;if(V.get(c)||V.set(c,c.style.overflow),c.style.overflow!=="hidden"&&(f=c.style.overflow),c.style.overflow==="hidden")return n.value=!0;if(n.value)return c.style.overflow="hidden"}},{immediate:!0});const a=()=>{const o=P(y(e));!o||n.value||(Y&&(i=A(o,"touchmove",v=>{he(v)},{passive:!1})),o.style.overflow="hidden",n.value=!0)},l=()=>{const o=P(y(e));!o||!n.value||(Y&&(i==null||i()),o.style.overflow=f,V.delete(o),n.value=!1)};return R(l),W({get(){return n.value},set(o){o?a():l()}})}function Ae(e={}){const{window:t=I,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:i=Number.POSITIVE_INFINITY,listenOrientation:f=!0,includeScrollbar:a=!0}=e,l=p(n),o=p(i),v=()=>{t&&(a?(l.value=t.innerWidth,o.value=t.innerHeight):(l.value=t.document.documentElement.clientWidth,o.value=t.document.documentElement.clientHeight))};if(v(),N(v),A("resize",v,{passive:!0}),f){const c=de("(orientation: portrait)");T(c,()=>v())}return{width:l,height:o}}export{Le as createFilterWrapper,We as debounceFilter,I as defaultWindow,Te as getLifeCycleTarget,oe as isClient,Y as isIOS,re as isObject,_ as noop,G as notNullish,we as onClickOutside,be as onKeyStroke,xe as throttleFilter,ne as toRef,y as toValue,N as tryOnMounted,R as tryOnScopeDispose,w as unrefElement,ee as useDebounceFn,ye as useElementBounding,ge as useElementSize,Ee as useElementVisibility,A as useEventListener,ve as useIntersectionObserver,de as useMediaQuery,Oe as useMemoize,ae as useMounted,fe as useMutationObserver,J as useResizeObserver,Se as useScroll,Ie as useScrollLock,z as useSupported,te as useThrottleFn,Ae as useWindowSize,De as watchDeep};
+import{noop as _,isIOS as Y,tryOnMounted as N,toValue as y,useThrottleFn as ee,toRef as te,tryOnScopeDispose as R,isClient as ne,isObject as oe,notNullish as G,useDebounceFn as re}from"./node_modules/@vueuse/shared/index.esm.js";import{createFilterWrapper as Le,debounceFilter as We,getLifeCycleTarget as Te,throttleFilter as xe,watchDeep as De}from"./node_modules/@vueuse/shared/index.esm.js";import{ref as p,watch as T,computed as W,reactive as Q,watchEffect as se,shallowReactive as ie,getCurrentInstance as le,onMounted as ce}from"vue";function w(e){var t;const n=y(e);return(t=n==null?void 0:n.$el)!=null?t:n}const I=ne?window:void 0;function A(...e){let t,n,i,f;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,i,f]=e,t=I):[t,n,i,f]=e,!t)return _;Array.isArray(n)||(n=[n]),Array.isArray(i)||(i=[i]);const a=[],l=()=>{a.forEach(u=>u()),a.length=0},o=(u,r,s,d)=>(u.addEventListener(r,s,d),()=>u.removeEventListener(r,s,d)),v=T(()=>[w(t),y(f)],([u,r])=>{if(l(),!u)return;const s=oe(r)?{...r}:r;a.push(...n.flatMap(d=>i.map(h=>o(u,d,h,s))))},{immediate:!0,flush:"post"}),c=()=>{v(),l()};return R(c),c}let $=!1;function we(e,t,n={}){const{window:i=I,ignore:f=[],capture:a=!0,detectIframe:l=!1}=n;if(!i)return _;Y&&!$&&($=!0,Array.from(i.document.body.children).forEach(s=>s.addEventListener("click",_)),i.document.documentElement.addEventListener("click",_));let o=!0;const v=s=>f.some(d=>{if(typeof d=="string")return Array.from(i.document.querySelectorAll(d)).some(h=>h===s.target||s.composedPath().includes(h));{const h=w(d);return h&&(s.target===h||s.composedPath().includes(h))}}),u=[A(i,"click",s=>{const d=w(e);if(!(!d||d===s.target||s.composedPath().includes(d))){if(s.detail===0&&(o=!v(s)),!o){o=!0;return}t(s)}},{passive:!0,capture:a}),A(i,"pointerdown",s=>{const d=w(e);o=!v(s)&&!!(d&&!s.composedPath().includes(d))},{passive:!0}),l&&A(i,"blur",s=>{setTimeout(()=>{var d;const h=w(e);((d=i.document.activeElement)==null?void 0:d.tagName)==="IFRAME"&&!(h!=null&&h.contains(i.document.activeElement))&&t(s)},0)})].filter(Boolean);return()=>u.forEach(s=>s())}function ue(e){return typeof e=="function"?e:typeof e=="string"?t=>t.key===e:Array.isArray(e)?t=>e.includes(t.key):()=>!0}function be(...e){let t,n,i={};e.length===3?(t=e[0],n=e[1],i=e[2]):e.length===2?typeof e[1]=="object"?(t=!0,n=e[0],i=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:f=I,eventName:a="keydown",passive:l=!1,dedupe:o=!1}=i,v=ue(t);return A(f,a,u=>{u.repeat&&y(o)||v(u)&&n(u)},l)}function ae(){const e=p(!1),t=le();return t&&ce(()=>{e.value=!0},t),e}function z(e){const t=ae();return W(()=>(t.value,!!e()))}function fe(e,t,n={}){const{window:i=I,...f}=n;let a;const l=z(()=>i&&"MutationObserver"in i),o=()=>{a&&(a.disconnect(),a=void 0)},v=W(()=>{const s=y(e),d=(Array.isArray(s)?s:[s]).map(w).filter(G);return new Set(d)}),c=T(()=>v.value,s=>{o(),l.value&&s.size&&(a=new MutationObserver(t),s.forEach(d=>a.observe(d,f)))},{immediate:!0,flush:"post"}),u=()=>a==null?void 0:a.takeRecords(),r=()=>{o(),c()};return R(r),{isSupported:l,stop:r,takeRecords:u}}function de(e,t={}){const{window:n=I}=t,i=z(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let f;const a=p(!1),l=c=>{a.value=c.matches},o=()=>{f&&("removeEventListener"in f?f.removeEventListener("change",l):f.removeListener(l))},v=se(()=>{i.value&&(o(),f=n.matchMedia(y(e)),"addEventListener"in f?f.addEventListener("change",l):f.addListener(l),a.value=f.matches)});return R(()=>{v(),o(),f=void 0}),a}function J(e,t,n={}){const{window:i=I,...f}=n;let a;const l=z(()=>i&&"ResizeObserver"in i),o=()=>{a&&(a.disconnect(),a=void 0)},v=W(()=>Array.isArray(e)?e.map(r=>w(r)):[w(e)]),c=T(v,r=>{if(o(),l.value&&i){a=new ResizeObserver(t);for(const s of r)s&&a.observe(s,f)}},{immediate:!0,flush:"post"}),u=()=>{o(),c()};return R(u),{isSupported:l,stop:u}}function ye(e,t={}){const{reset:n=!0,windowResize:i=!0,windowScroll:f=!0,immediate:a=!0}=t,l=p(0),o=p(0),v=p(0),c=p(0),u=p(0),r=p(0),s=p(0),d=p(0);function h(){const g=w(e);if(!g){n&&(l.value=0,o.value=0,v.value=0,c.value=0,u.value=0,r.value=0,s.value=0,d.value=0);return}const b=g.getBoundingClientRect();l.value=b.height,o.value=b.bottom,v.value=b.left,c.value=b.right,u.value=b.top,r.value=b.width,s.value=b.x,d.value=b.y}return J(e,h),T(()=>w(e),g=>!g&&h()),fe(e,h,{attributeFilter:["style","class"]}),f&&A("scroll",h,{capture:!0,passive:!0}),i&&A("resize",h,{passive:!0}),N(()=>{a&&h()}),{height:l,bottom:o,left:v,right:c,top:u,width:r,x:s,y:d,update:h}}function ge(e,t={width:0,height:0},n={}){const{window:i=I,box:f="content-box"}=n,a=W(()=>{var r,s;return(s=(r=w(e))==null?void 0:r.namespaceURI)==null?void 0:s.includes("svg")}),l=p(t.width),o=p(t.height),{stop:v}=J(e,([r])=>{const s=f==="border-box"?r.borderBoxSize:f==="content-box"?r.contentBoxSize:r.devicePixelContentBoxSize;if(i&&a.value){const d=w(e);if(d){const h=d.getBoundingClientRect();l.value=h.width,o.value=h.height}}else if(s){const d=Array.isArray(s)?s:[s];l.value=d.reduce((h,{inlineSize:g})=>h+g,0),o.value=d.reduce((h,{blockSize:g})=>h+g,0)}else l.value=r.contentRect.width,o.value=r.contentRect.height},n);N(()=>{const r=w(e);r&&(l.value="offsetWidth"in r?r.offsetWidth:t.width,o.value="offsetHeight"in r?r.offsetHeight:t.height)});const c=T(()=>w(e),r=>{l.value=r?t.width:0,o.value=r?t.height:0});function u(){v(),c()}return{width:l,height:o,stop:u}}function ve(e,t,n={}){const{root:i,rootMargin:f="0px",threshold:a=.1,window:l=I,immediate:o=!0}=n,v=z(()=>l&&"IntersectionObserver"in l),c=W(()=>{const h=y(e);return(Array.isArray(h)?h:[h]).map(w).filter(G)});let u=_;const r=p(o),s=v.value?T(()=>[c.value,w(i),r.value],([h,g])=>{if(u(),!r.value||!h.length)return;const b=new IntersectionObserver(t,{root:w(g),rootMargin:f,threshold:a});h.forEach(E=>E&&b.observe(E)),u=()=>{b.disconnect(),u=_}},{immediate:o,flush:"post"}):_,d=()=>{u(),s(),r.value=!1};return R(d),{isSupported:v,isActive:r,pause(){u(),r.value=!1},resume(){r.value=!0},stop:d}}function Ee(e,t={}){const{window:n=I,scrollTarget:i,threshold:f=0}=t,a=p(!1);return ve(e,l=>{let o=a.value,v=0;for(const c of l)c.time>=v&&(v=c.time,o=c.isIntersecting);a.value=o},{root:i,window:n,threshold:f}),a}const q=1;function Se(e,t={}){const{throttle:n=0,idle:i=200,onStop:f=_,onScroll:a=_,offset:l={left:0,right:0,top:0,bottom:0},eventListenerOptions:o={capture:!1,passive:!0},behavior:v="auto",window:c=I,onError:u=m=>{console.error(m)}}=t,r=p(0),s=p(0),d=W({get(){return r.value},set(m){g(m,void 0)}}),h=W({get(){return s.value},set(m){g(void 0,m)}});function g(m,x){var S,k,C,L;if(!c)return;const O=y(e);if(!O)return;(C=O instanceof Document?c.document.body:O)==null||C.scrollTo({top:(S=y(x))!=null?S:h.value,left:(k=y(m))!=null?k:d.value,behavior:y(v)});const H=((L=O==null?void 0:O.document)==null?void 0:L.documentElement)||(O==null?void 0:O.documentElement)||O;d!=null&&(r.value=H.scrollLeft),h!=null&&(s.value=H.scrollTop)}const b=p(!1),E=Q({left:!0,right:!1,top:!0,bottom:!1}),M=Q({left:!1,right:!1,top:!1,bottom:!1}),F=m=>{b.value&&(b.value=!1,M.left=!1,M.right=!1,M.top=!1,M.bottom=!1,f(m))},Z=re(F,n+i),B=m=>{var x;if(!c)return;const S=((x=m==null?void 0:m.document)==null?void 0:x.documentElement)||(m==null?void 0:m.documentElement)||w(m),{display:k,flexDirection:C}=getComputedStyle(S),L=S.scrollLeft;M.left=L<r.value,M.right=L>r.value;const O=Math.abs(L)<=(l.left||0),H=Math.abs(L)+S.clientWidth>=S.scrollWidth-(l.right||0)-q;k==="flex"&&C==="row-reverse"?(E.left=H,E.right=O):(E.left=O,E.right=H),r.value=L;let D=S.scrollTop;m===c.document&&!D&&(D=c.document.body.scrollTop),M.top=D<s.value,M.bottom=D>s.value;const X=Math.abs(D)<=(l.top||0),j=Math.abs(D)+S.clientHeight>=S.scrollHeight-(l.bottom||0)-q;k==="flex"&&C==="column-reverse"?(E.top=j,E.bottom=X):(E.top=X,E.bottom=j),s.value=D},K=m=>{var x;if(!c)return;const S=(x=m.target.documentElement)!=null?x:m.target;B(S),b.value=!0,Z(m),a(m)};return A(e,"scroll",n?ee(K,n,!0,!1):K,o),N(()=>{try{const m=y(e);if(!m)return;B(m)}catch(m){u(m)}}),A(e,"scrollend",F,o),{x:d,y:h,isScrolling:b,arrivedState:E,directions:M,measure(){const m=y(e);c&&m&&B(m)}}}function P(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function Oe(e,t){const i=ie(new Map),f=(...u)=>JSON.stringify(u),a=(u,...r)=>(i.set(u,e(...r)),i.get(u)),l=(...u)=>a(f(...u),...u),o=(...u)=>{i.delete(f(...u))},v=()=>{i.clear()},c=(...u)=>{const r=f(...u);return i.has(r)?i.get(r):a(r,...u)};return c.load=l,c.delete=o,c.clear=v,c.generateKey=f,c.cache=i,c}function U(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:U(n)}}function he(e){const t=e||window.event,n=t.target;return U(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const V=new WeakMap;function Ie(e,t=!1){const n=p(t);let i=null,f="";T(te(e),o=>{const v=P(y(o));if(v){const c=v;if(V.get(c)||V.set(c,c.style.overflow),c.style.overflow!=="hidden"&&(f=c.style.overflow),c.style.overflow==="hidden")return n.value=!0;if(n.value)return c.style.overflow="hidden"}},{immediate:!0});const a=()=>{const o=P(y(e));!o||n.value||(Y&&(i=A(o,"touchmove",v=>{he(v)},{passive:!1})),o.style.overflow="hidden",n.value=!0)},l=()=>{const o=P(y(e));!o||!n.value||(Y&&(i==null||i()),o.style.overflow=f,V.delete(o),n.value=!1)};return R(l),W({get(){return n.value},set(o){o?a():l()}})}function Ae(e={}){const{window:t=I,initialWidth:n=Number.POSITIVE_INFINITY,initialHeight:i=Number.POSITIVE_INFINITY,listenOrientation:f=!0,includeScrollbar:a=!0}=e,l=p(n),o=p(i),v=()=>{t&&(a?(l.value=t.innerWidth,o.value=t.innerHeight):(l.value=t.document.documentElement.clientWidth,o.value=t.document.documentElement.clientHeight))};if(v(),N(v),A("resize",v,{passive:!0}),f){const c=de("(orientation: portrait)");T(c,()=>v())}return{width:l,height:o}}export{Le as createFilterWrapper,We as debounceFilter,I as defaultWindow,Te as getLifeCycleTarget,ne as isClient,Y as isIOS,oe as isObject,_ as noop,G as notNullish,we as onClickOutside,be as onKeyStroke,xe as throttleFilter,te as toRef,y as toValue,N as tryOnMounted,R as tryOnScopeDispose,w as unrefElement,re as useDebounceFn,ye as useElementBounding,ge as useElementSize,Ee as useElementVisibility,A as useEventListener,ve as useIntersectionObserver,de as useMediaQuery,Oe as useMemoize,ae as useMounted,fe as useMutationObserver,J as useResizeObserver,Se as useScroll,Ie as useScrollLock,z as useSupported,ee as useThrottleFn,Ae as useWindowSize,De as watchDeep};
 //# sourceMappingURL=index.esm.js.map

package/dist/src/ElDropdown.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),E=require("./_CustomTransition.vue.cjs2.js"),V=require("./ElClipToAnchor.vue.cjs2.js"),b=require("./ElItem.vue.cjs2.js"),I=require("./ElButton.vue.cjs2.js"),y=require("../node_modules/@vueuse/core/index.cjs.js"),N=require("../node_modules/lodash/lodash.cjs.js"),A=require("./ElIconButton.vue.cjs2.js"),D={class:"relative"},q={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]"},O={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},P={class:"font-semibold"},$=["aria-activedescendant"],S={class:"flex w-full flex-col gap-1"},T={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},M=[0,260,1e3],F=e.defineComponent({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open"],setup(g,{expose:w,emit:B}){const a=g,p=B,f=e.ref(!1),i=e.ref(),v=e.ref(),r=e.ref(0),c=e.ref(),s=e.computed({set(t){a.isOpen!==void 0&&p("update:is-open",t),f.value=t},get(){return a.isOpen!==void 0?a.isOpen:f.value}}),u=()=>s.value=!s.value,m=()=>{s.value=!0},d=()=>s.value=!1;e.watch(()=>[a.items,s.value],()=>{var t;if(s.value){const l=(t=a.items)==null?void 0:t.findIndex(o=>o.check);r.value=l||0}});const h=t=>{var l,o,n;(n=(o=(l=c.value)==null?void 0:l.at(t))==null?void 0:o.$el)==null||n.scrollIntoView({block:"nearest"})},x=()=>{var t;r.value+=(((t=c.value)==null?void 0:t.slice(r.value+1).findIndex(l=>!l.$props.disabled))??-1)+1,h(r.value)},C=()=>{var t;r.value-=(((t=c.value)==null?void 0:t.slice(0,r.value).reverse().findIndex(l=>!l.$props.disabled))??-1)+1,h(r.value)};return y.onKeyStroke(["ArrowDown","ArrowUp","Enter"],t=>{var l;if(s.value===!0){switch(t.key){case"ArrowDown":{x();break}case"ArrowUp":{C();break}case"Enter":{const o=a.items[r.value];o.disabled||((l=o.onClick)==null||l.call(o),d());break}}t.preventDefault(),t.stopPropagation()}}),w({show:m,hide:d,toggle:u}),y.onClickOutside(a.multiple?v:i,t=>{t.target.closest('[data-disabled="true"]')||d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",{ref_key:"listAnchor",ref:i},[e.renderSlot(t.$slots,"anchor",e.normalizeProps(e.guardReactiveProps({isOpen:s.value,toggle:u,show:m,hide:d})),()=>[t.iconButton?(e.openBlock(),e.createBlock(A.default,e.mergeProps({key:0,class:"cursor-pointer","aria-expanded":s.value},t.iconButton,{onClick:u}),null,16,["aria-expanded"])):e.createCommentVNode("",!0)])],512),e.createVNode(E.default,{name:"expand"},{default:e.withCtx(()=>[s.value&&i.value?(e.openBlock(),e.createBlock(V.default,{key:0,ref_key:"elClipToAnchor",ref:v,class:"pt-1","match-anchor-width":"",anchor:i.value,position:t.left?"bottom-left":t.right?"bottom-right":"bottom","min-width":t.minWidth??208},{default:e.withCtx(()=>[e.createElementVNode("div",q,[t.title?(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("span",P,e.toDisplayString(t.title),1)])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":t.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+r.value},[e.createElementVNode("div",S,[t.items.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.items,(o,n)=>{var _;return e.openBlock(),e.createBlock(b.default,e.mergeProps({id:"option-"+n,ref_for:!0,ref_key:"itemRefs",ref:c,key:n,class:["self-stretch",{"cursor-pointer":!o.disabled,"cursor-default":o.disabled}],role:"option",tabindex:"-1"},e.unref(N.lodashExports.omit)(o,"onClick"),{disabled:o.disabled,"data-disabled":o.disabled?"true":void 0,"data-cy":`${(_=o.text)==null?void 0:_.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:r.value===n,onClick:e.withModifiers(H=>{var k;return!o.disabled&&((k=o.onClick)==null?void 0:k.call(o))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(e.openBlock(),e.createBlock(b.default,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],10,$),t.action?(e.openBlock(),e.createElementBlock("div",T,[e.createVNode(I.default,e.mergeProps({variant:"tertiary"},t.action,{class:"w-full",onClick:l[0]||(l[0]=o=>p("click:action"))}),null,16)])):e.createCommentVNode("",!0)])]),_:1},8,["anchor","position","min-width"])):e.createCommentVNode("",!0)]),_:1})]))}});exports.default=F;exports.elDropdownMaxHeight=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),I=require("./_CustomTransition.vue.cjs2.js"),N=require("./ElClipToAnchor.vue.cjs2.js"),y=require("./ElItem.vue.cjs2.js"),A=require("./ElButton.vue.cjs2.js"),w=require("../node_modules/@vueuse/core/index.cjs.js"),D=require("../node_modules/lodash/lodash.cjs.js"),O=require("./ElIconButton.vue.cjs2.js"),q=require("../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),T={class:"relative"},P={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]"},S={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},$={class:"font-semibold"},H=["aria-activedescendant"],F={class:"flex w-full flex-col gap-1"},L={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},M=[0,260,1e3],z=e.defineComponent({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open","endOfList"],setup(B,{expose:x,emit:C}){const n=B,u=C,f=e.ref(!1),i=e.ref(),v=e.ref(),r=e.ref(0),c=e.ref(),s=e.computed({set(t){n.isOpen!==void 0&&u("update:is-open",t),f.value=t},get(){return n.isOpen!==void 0?n.isOpen:f.value}}),p=()=>s.value=!s.value,m=()=>{s.value=!0},d=()=>s.value=!1;e.watch(()=>[n.items,s.value],()=>{var t;if(s.value){const l=(t=n.items)==null?void 0:t.findIndex(o=>o.check);r.value=l||0}});const h=t=>{var l,o,a;(a=(o=(l=c.value)==null?void 0:l.at(t))==null?void 0:o.$el)==null||a.scrollIntoView({block:"nearest"})},E=()=>{var t;r.value+=(((t=c.value)==null?void 0:t.slice(r.value+1).findIndex(l=>!l.$props.disabled))??-1)+1,h(r.value)},_=e.ref(null),k=q.useDebounceFn(()=>{const t=_.value;if(!t)return;t.scrollTop+t.clientHeight>=t.scrollHeight-50&&u("endOfList")},200),V=()=>{var t;r.value-=(((t=c.value)==null?void 0:t.slice(0,r.value).reverse().findIndex(l=>!l.$props.disabled))??-1)+1,h(r.value)};return w.onKeyStroke(["ArrowDown","ArrowUp","Enter"],t=>{var l;if(s.value===!0){switch(t.key){case"ArrowDown":{E();break}case"ArrowUp":{V();break}case"Enter":{const o=n.items[r.value];o.disabled||((l=o.onClick)==null||l.call(o),d());break}}t.preventDefault(),t.stopPropagation()}}),x({show:m,hide:d,toggle:p}),w.onClickOutside(n.multiple?v:i,t=>{t.target.closest('[data-disabled="true"]')||d()}),(t,l)=>(e.openBlock(),e.createElementBlock("div",T,[e.createElementVNode("div",{ref_key:"listAnchor",ref:i},[e.renderSlot(t.$slots,"anchor",e.normalizeProps(e.guardReactiveProps({isOpen:s.value,toggle:p,show:m,hide:d})),()=>[t.iconButton?(e.openBlock(),e.createBlock(O.default,e.mergeProps({key:0,class:"cursor-pointer","aria-expanded":s.value},t.iconButton,{onClick:p}),null,16,["aria-expanded"])):e.createCommentVNode("",!0)])],512),e.createVNode(I.default,{name:"expand"},{default:e.withCtx(()=>[s.value&&i.value?(e.openBlock(),e.createBlock(N.default,{key:0,ref_key:"elClipToAnchor",ref:v,class:"pt-1","match-anchor-width":"",anchor:i.value,position:t.left?"bottom-left":t.right?"bottom-right":"bottom","min-width":t.minWidth??208},{default:e.withCtx(()=>[e.createElementVNode("div",P,[t.title?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("span",$,e.toDisplayString(t.title),1)])):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"scrollableList",ref:_,class:e.normalizeClass(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":t.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+r.value,onScroll:l[0]||(l[0]=(...o)=>e.unref(k)&&e.unref(k)(...o))},[e.createElementVNode("div",F,[t.items.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(t.items,(o,a)=>{var b;return e.openBlock(),e.createBlock(y.default,e.mergeProps({id:"option-"+a,ref_for:!0,ref_key:"itemRefs",ref:c,key:a,class:["self-stretch",{"cursor-pointer":!o.disabled,"cursor-default":o.disabled}],role:"option",tabindex:"-1"},e.unref(D.lodashExports.omit)(o,"onClick"),{disabled:o.disabled,"data-disabled":o.disabled?"true":void 0,"data-cy":`${(b=o.text)==null?void 0:b.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:r.value===a,onClick:e.withModifiers(R=>{var g;return!o.disabled&&((g=o.onClick)==null?void 0:g.call(o))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(e.openBlock(),e.createBlock(y.default,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],42,H),t.action?(e.openBlock(),e.createElementBlock("div",L,[e.createVNode(A.default,e.mergeProps({variant:"tertiary"},t.action,{class:"w-full",onClick:l[1]||(l[1]=o=>u("click:action"))}),null,16)])):e.createCommentVNode("",!0)])]),_:1},8,["anchor","position","min-width"])):e.createCommentVNode("",!0)]),_:1})]))}});exports.default=z;exports.elDropdownMaxHeight=M;
 //# sourceMappingURL=ElDropdown.vue.cjs2.js.map

package/dist/src/ElDropdown.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElDropdown.vue.cjs2.js","sources":["../../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => {\n  isOpenProxy.value = true;\n};\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\n                  :id=\"'option-' + index\"\n                  ref=\"itemRefs\"\n                  :key=\"index\"\n                  class=\"self-stretch\"\n                  :class=\"{\n                    'cursor-pointer': !item.disabled,\n                    'cursor-default': item.disabled,\n                  }\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  v-bind=\"omit(item, 'onClick')\"\n                  :disabled=\"item.disabled\"\n                  :data-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","moveVisibleFocusUp","onKeyStroke","e","__expose","onClickOutside","event"],"mappings":"42BACaA,EAAsB,CAAC,EAAG,IAAK,GAAI,6WAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAKPC,EAAsBC,MAAa,EAAK,EACxCC,EAAaD,EAAAA,MACbE,EAAiBF,EAAAA,MACjBG,EAAeH,MAAY,CAAC,EAC5BI,EAAWJ,EAAAA,MAEXK,EAAcC,EAAAA,SAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAM,CACjBJ,EAAY,MAAQ,EAAA,EAEhBK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EAAA,MACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAqB,IAAM,OAC/BhB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzCiB,OAAAA,EAAA,YAAY,CAAC,YAAa,UAAW,OAAO,EAAQC,GAAA,OAC9C,GAAAhB,EAAY,QAAU,GAAM,CAC9B,OAAQgB,EAAE,IAAK,CACb,IAAK,YAAa,CACKH,IACrB,KACF,CACA,IAAK,UAAW,CACKC,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAML,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEAW,EAAE,eAAe,EACjBA,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYC,EAAA,CACX,KAAAb,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDe,EAAA,eAAe5B,EAAM,SAAWO,EAAiBD,EAAqBuB,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/Dd,GACP,CACD"}
+{"version":3,"file":"ElDropdown.vue.cjs2.js","sources":["../../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside, useDebounceFn } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n  (event: 'endOfList'): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => {\n  isOpenProxy.value = true;\n};\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst scrollableList = ref<HTMLElement | null>(null);\n\nconst onScroll = useDebounceFn(() => {\n  const el = scrollableList.value;\n  if (!el) return;\n\n  const threshold = 50;\n  const scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;\n\n  if (scrolledToBottom) {\n    emit('endOfList');\n  }\n}, 200);\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            ref=\"scrollableList\"\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n            @scroll=\"onScroll\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\n                  :id=\"'option-' + index\"\n                  ref=\"itemRefs\"\n                  :key=\"index\"\n                  class=\"self-stretch\"\n                  :class=\"{\n                    'cursor-pointer': !item.disabled,\n                    'cursor-default': item.disabled,\n                  }\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  v-bind=\"omit(item, 'onClick')\"\n                  :disabled=\"item.disabled\"\n                  :data-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","scrollableList","onScroll","useDebounceFn","el","moveVisibleFocusUp","onKeyStroke","e","__expose","onClickOutside","event"],"mappings":"+7BACaA,EAAsB,CAAC,EAAG,IAAK,GAAI,yXAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAMPC,EAAsBC,MAAa,EAAK,EACxCC,EAAaD,EAAAA,MACbE,EAAiBF,EAAAA,MACjBG,EAAeH,MAAY,CAAC,EAC5BI,EAAWJ,EAAAA,MAEXK,EAAcC,EAAAA,SAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAM,CACjBJ,EAAY,MAAQ,EAAA,EAEhBK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EAAA,MACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAiBnB,MAAwB,IAAI,EAE7CoB,EAAWC,EAAAA,cAAc,IAAM,CACnC,MAAMC,EAAKH,EAAe,MAC1B,GAAI,CAACG,EAAI,OAGgBA,EAAG,UAAYA,EAAG,cAAgBA,EAAG,aAD5C,IAIhBzB,EAAK,WAAW,GAEjB,GAAG,EAEA0B,EAAqB,IAAM,OAC/BpB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzCqB,OAAAA,EAAA,YAAY,CAAC,YAAa,UAAW,OAAO,EAAQC,GAAA,OAC9C,GAAApB,EAAY,QAAU,GAAM,CAC9B,OAAQoB,EAAE,IAAK,CACb,IAAK,YAAa,CACKP,IACrB,KACF,CACA,IAAK,UAAW,CACKK,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAMT,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEAe,EAAE,eAAe,EACjBA,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYC,EAAA,CACX,KAAAjB,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDmB,EAAA,eAAehC,EAAM,SAAWO,EAAiBD,EAAqB2B,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/DlB,GACP,CACD"}

package/dist/src/ElDropdown.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as P,ref as n,computed as F,watch as N,openBlock as a,createElementBlock as f,createElementVNode as d,renderSlot as S,normalizeProps as z,guardReactiveProps as H,createBlock as m,mergeProps as b,createCommentVNode as v,createVNode as $,withCtx as A,toDisplayString as R,normalizeClass as T,Fragment as U,renderList as M,unref as W,withModifiers as K}from"vue";import L from"./_CustomTransition.vue.esm2.js";import j from"./ElClipToAnchor.vue.esm2.js";import B from"./ElItem.vue.esm2.js";import q from"./ElButton.vue.esm2.js";import{onKeyStroke as G,onClickOutside as J}from"../node_modules/@vueuse/core/index.esm.js";import{l as Q}from"../node_modules/lodash/lodash.esm.js";import X from"./ElIconButton.vue.esm2.js";const Y={class:"relative"},Z={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]"},ee={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},te={class:"font-semibold"},oe=["aria-activedescendant"],le={class:"flex w-full flex-col gap-1"},se={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},me=[0,260,1e3],ve=P({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open"],setup(I,{expose:D,emit:E}){const i=I,k=E,w=n(!1),c=n(),y=n(),l=n(0),u=n(),s=F({set(e){i.isOpen!==void 0&&k("update:is-open",e),w.value=e},get(){return i.isOpen!==void 0?i.isOpen:w.value}}),h=()=>s.value=!s.value,_=()=>{s.value=!0},p=()=>s.value=!1;N(()=>[i.items,s.value],()=>{var e;if(s.value){const o=(e=i.items)==null?void 0:e.findIndex(t=>t.check);l.value=o||0}});const x=e=>{var o,t,r;(r=(t=(o=u.value)==null?void 0:o.at(e))==null?void 0:t.$el)==null||r.scrollIntoView({block:"nearest"})},O=()=>{var e;l.value+=(((e=u.value)==null?void 0:e.slice(l.value+1).findIndex(o=>!o.$props.disabled))??-1)+1,x(l.value)},V=()=>{var e;l.value-=(((e=u.value)==null?void 0:e.slice(0,l.value).reverse().findIndex(o=>!o.$props.disabled))??-1)+1,x(l.value)};return G(["ArrowDown","ArrowUp","Enter"],e=>{var o;if(s.value===!0){switch(e.key){case"ArrowDown":{O();break}case"ArrowUp":{V();break}case"Enter":{const t=i.items[l.value];t.disabled||((o=t.onClick)==null||o.call(t),p());break}}e.preventDefault(),e.stopPropagation()}}),D({show:_,hide:p,toggle:h}),J(i.multiple?y:c,e=>{e.target.closest('[data-disabled="true"]')||p()}),(e,o)=>(a(),f("div",Y,[d("div",{ref_key:"listAnchor",ref:c},[S(e.$slots,"anchor",z(H({isOpen:s.value,toggle:h,show:_,hide:p})),()=>[e.iconButton?(a(),m(X,b({key:0,class:"cursor-pointer","aria-expanded":s.value},e.iconButton,{onClick:h}),null,16,["aria-expanded"])):v("",!0)])],512),$(L,{name:"expand"},{default:A(()=>[s.value&&c.value?(a(),m(j,{key:0,ref_key:"elClipToAnchor",ref:y,class:"pt-1","match-anchor-width":"",anchor:c.value,position:e.left?"bottom-left":e.right?"bottom-right":"bottom","min-width":e.minWidth??208},{default:A(()=>[d("div",Z,[e.title?(a(),f("div",ee,[d("span",te,R(e.title),1)])):v("",!0),d("div",{class:T(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":e.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+l.value},[d("div",le,[e.items.length>0?(a(!0),f(U,{key:0},M(e.items,(t,r)=>{var g;return a(),m(B,b({id:"option-"+r,ref_for:!0,ref_key:"itemRefs",ref:u,key:r,class:["self-stretch",{"cursor-pointer":!t.disabled,"cursor-default":t.disabled}],role:"option",tabindex:"-1"},W(Q.omit)(t,"onClick"),{disabled:t.disabled,"data-disabled":t.disabled?"true":void 0,"data-cy":`${(g=t.text)==null?void 0:g.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:l.value===r,onClick:K(ae=>{var C;return!t.disabled&&((C=t.onClick)==null?void 0:C.call(t))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(a(),m(B,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],10,oe),e.action?(a(),f("div",se,[$(q,b({variant:"tertiary"},e.action,{class:"w-full",onClick:o[0]||(o[0]=t=>k("click:action"))}),null,16)])):v("",!0)])]),_:1},8,["anchor","position","min-width"])):v("",!0)]),_:1})]))}});export{ve as default,me as elDropdownMaxHeight};
+import{defineComponent as H,ref as n,computed as L,watch as P,openBlock as r,createElementBlock as p,createElementVNode as d,renderSlot as N,normalizeProps as z,guardReactiveProps as R,createBlock as m,mergeProps as k,createCommentVNode as v,createVNode as D,withCtx as I,toDisplayString as U,normalizeClass as M,unref as w,Fragment as W,renderList as K,withModifiers as j}from"vue";import q from"./_CustomTransition.vue.esm2.js";import G from"./ElClipToAnchor.vue.esm2.js";import O from"./ElItem.vue.esm2.js";import J from"./ElButton.vue.esm2.js";import{onKeyStroke as Q,onClickOutside as X}from"../node_modules/@vueuse/core/index.esm.js";import{l as Y}from"../node_modules/lodash/lodash.esm.js";import Z from"./ElIconButton.vue.esm2.js";import{useDebounceFn as ee}from"../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const oe={class:"relative"},te={class:"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]"},le={key:0,class:"border-neutral-surface flex h-9 items-center self-stretch border-b px-2"},se={class:"font-semibold"},re=["aria-activedescendant"],ie={class:"flex w-full flex-col gap-1"},ae={key:1,class:"border-neutral-surface self-stretch border-t py-2 px-5"},ke=[0,260,1e3],we=H({__name:"ElDropdown",props:{items:{},title:{default:void 0},action:{default:void 0},left:{type:Boolean},right:{type:Boolean},minWidth:{default:void 0},isOpen:{type:Boolean,default:void 0},maxHeight:{default:260},iconButton:{default:void 0},multiple:{type:Boolean,default:!1}},emits:["click:action","update:is-open","endOfList"],setup(E,{expose:V,emit:S}){const i=E,h=S,y=n(!1),c=n(),g=n(),l=n(0),u=n(),s=L({set(e){i.isOpen!==void 0&&h("update:is-open",e),y.value=e},get(){return i.isOpen!==void 0?i.isOpen:y.value}}),b=()=>s.value=!s.value,x=()=>{s.value=!0},f=()=>s.value=!1;P(()=>[i.items,s.value],()=>{var e;if(s.value){const t=(e=i.items)==null?void 0:e.findIndex(o=>o.check);l.value=t||0}});const _=e=>{var t,o,a;(a=(o=(t=u.value)==null?void 0:t.at(e))==null?void 0:o.$el)==null||a.scrollIntoView({block:"nearest"})},T=()=>{var e;l.value+=(((e=u.value)==null?void 0:e.slice(l.value+1).findIndex(t=>!t.$props.disabled))??-1)+1,_(l.value)},C=n(null),B=ee(()=>{const e=C.value;if(!e)return;e.scrollTop+e.clientHeight>=e.scrollHeight-50&&h("endOfList")},200),F=()=>{var e;l.value-=(((e=u.value)==null?void 0:e.slice(0,l.value).reverse().findIndex(t=>!t.$props.disabled))??-1)+1,_(l.value)};return Q(["ArrowDown","ArrowUp","Enter"],e=>{var t;if(s.value===!0){switch(e.key){case"ArrowDown":{T();break}case"ArrowUp":{F();break}case"Enter":{const o=i.items[l.value];o.disabled||((t=o.onClick)==null||t.call(o),f());break}}e.preventDefault(),e.stopPropagation()}}),V({show:x,hide:f,toggle:b}),X(i.multiple?g:c,e=>{e.target.closest('[data-disabled="true"]')||f()}),(e,t)=>(r(),p("div",oe,[d("div",{ref_key:"listAnchor",ref:c},[N(e.$slots,"anchor",z(R({isOpen:s.value,toggle:b,show:x,hide:f})),()=>[e.iconButton?(r(),m(Z,k({key:0,class:"cursor-pointer","aria-expanded":s.value},e.iconButton,{onClick:b}),null,16,["aria-expanded"])):v("",!0)])],512),D(q,{name:"expand"},{default:I(()=>[s.value&&c.value?(r(),m(G,{key:0,ref_key:"elClipToAnchor",ref:g,class:"pt-1","match-anchor-width":"",anchor:c.value,position:e.left?"bottom-left":e.right?"bottom-right":"bottom","min-width":e.minWidth??208},{default:I(()=>[d("div",te,[e.title?(r(),p("div",le,[d("span",se,U(e.title),1)])):v("",!0),d("div",{ref_key:"scrollableList",ref:C,class:M(["no-scrollbar relative w-full overflow-y-scroll",{"max-h-[260px]":e.maxHeight===260}]),role:"listbox","aria-activedescendant":"option-"+l.value,onScroll:t[0]||(t[0]=(...o)=>w(B)&&w(B)(...o))},[d("div",ie,[e.items.length>0?(r(!0),p(W,{key:0},K(e.items,(o,a)=>{var $;return r(),m(O,k({id:"option-"+a,ref_for:!0,ref_key:"itemRefs",ref:u,key:a,class:["self-stretch",{"cursor-pointer":!o.disabled,"cursor-default":o.disabled}],role:"option",tabindex:"-1"},w(Y.omit)(o,"onClick"),{disabled:o.disabled,"data-disabled":o.disabled?"true":void 0,"data-cy":`${($=o.text)==null?void 0:$.trim().replaceAll(" ","").replaceAll(",","")}-dropdown-item`,focused:l.value===a,onClick:j(ne=>{var A;return!o.disabled&&((A=o.onClick)==null?void 0:A.call(o))},["prevent"])}),null,16,["id","class","disabled","data-disabled","data-cy","focused","onClick"])}),128)):(r(),m(O,{key:1,class:"cursor-pointer self-stretch","data-cy":"no-items-dropdown-item",text:"Nessuna opzione disponibile"}))])],42,re),e.action?(r(),p("div",ae,[D(J,k({variant:"tertiary"},e.action,{class:"w-full",onClick:t[1]||(t[1]=o=>h("click:action"))}),null,16)])):v("",!0)])]),_:1},8,["anchor","position","min-width"])):v("",!0)]),_:1})]))}});export{we as default,ke as elDropdownMaxHeight};
 //# sourceMappingURL=ElDropdown.vue.esm2.js.map

package/dist/src/ElDropdown.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElDropdown.vue.esm2.js","sources":["../../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => {\n  isOpenProxy.value = true;\n};\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\n                  :id=\"'option-' + index\"\n                  ref=\"itemRefs\"\n                  :key=\"index\"\n                  class=\"self-stretch\"\n                  :class=\"{\n                    'cursor-pointer': !item.disabled,\n                    'cursor-default': item.disabled,\n                  }\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  v-bind=\"omit(item, 'onClick')\"\n                  :disabled=\"item.disabled\"\n                  :data-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","moveVisibleFocusUp","onKeyStroke","__expose","onClickOutside","event"],"mappings":"yqCACaA,GAAsB,CAAC,EAAG,IAAK,GAAI,8VAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAKPC,EAAsBC,EAAa,EAAK,EACxCC,EAAaD,IACbE,EAAiBF,IACjBG,EAAeH,EAAY,CAAC,EAC5BI,EAAWJ,IAEXK,EAAcC,EAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAM,CACjBJ,EAAY,MAAQ,EAAA,EAEhBK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAqB,IAAM,OAC/BhB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzC,OAAAiB,EAAY,CAAC,YAAa,UAAW,OAAO,EAAQ,GAAA,OAC9C,GAAAf,EAAY,QAAU,GAAM,CAC9B,OAAQ,EAAE,IAAK,CACb,IAAK,YAAa,CACKa,IACrB,KACF,CACA,IAAK,UAAW,CACKC,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAML,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEA,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYW,EAAA,CACX,KAAAZ,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDc,EAAe3B,EAAM,SAAWO,EAAiBD,EAAqBsB,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/Db,GACP,CACD"}
+{"version":3,"file":"ElDropdown.vue.esm2.js","sources":["../../src/ElDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elDropdownMaxHeight = [0, 260, 1000] as const;\nexport type ElDropdownMaxHeight = (typeof elDropdownMaxHeight)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElClipToAnchor from '@/ElClipToAnchor.vue';\nimport ElItem from '@/ElItem.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ref, computed, watch } from 'vue';\nimport { onKeyStroke, onClickOutside, useDebounceFn } from '@vueuse/core';\nimport { omit } from 'lodash';\nimport ElIconButton from './ElIconButton.vue';\n\nexport type DropdownItem = { onClick?: () => void } & InstanceType<typeof ElItem>['$props'];\n\nconst props = withDefaults(\n  defineProps<{\n    items: DropdownItem[];\n    title?: string;\n    action?: Omit<InstanceType<typeof ElButton>['$props'], 'variant' | 'size'>;\n    left?: boolean;\n    right?: boolean;\n    minWidth?: number;\n    isOpen?: boolean;\n    maxHeight?: ElDropdownMaxHeight;\n    iconButton?: InstanceType<typeof ElIconButton>['$props'];\n    multiple?: boolean;\n  }>(),\n  {\n    title: undefined,\n    action: undefined,\n    isOpen: undefined,\n    minWidth: undefined,\n    maxHeight: 260,\n    iconButton: undefined,\n    multiple: false,\n  },\n);\n\nconst emit = defineEmits<{\n  (event: 'click:action'): void;\n  (event: 'update:is-open', isOpen: boolean): void;\n  (event: 'endOfList'): void;\n}>();\n\nconst internalIsOpenState = ref<boolean>(false);\nconst listAnchor = ref<HTMLElement>();\nconst elClipToAnchor = ref<HTMLElement>();\nconst focusedIndex = ref<number>(0);\nconst itemRefs = ref<InstanceType<typeof ElItem>[]>();\n\nconst isOpenProxy = computed({\n  set(isOpen: boolean) {\n    if (props.isOpen !== undefined) {\n      emit('update:is-open', isOpen);\n    }\n    internalIsOpenState.value = isOpen;\n  },\n  get(): boolean {\n    if (props.isOpen !== undefined) return props.isOpen;\n    return internalIsOpenState.value;\n  },\n});\n\nconst toggle = () => (isOpenProxy.value = !isOpenProxy.value);\nconst show = () => {\n  isOpenProxy.value = true;\n};\nconst hide = () => (isOpenProxy.value = false);\n\n// Used to focus the first item when the dropdown is opened, so we can continue keyboard navigation from there\nwatch(\n  () => [props.items, isOpenProxy.value],\n  () => {\n    if (isOpenProxy.value) {\n      const selectedValueIdx = props.items?.findIndex(item => item.check);\n      focusedIndex.value = selectedValueIdx || 0;\n    }\n  },\n);\n\n// Once focused item changes, we try to scroll the focused item into view if it's not already visible\nconst scrollToFocusedIndex = (focusedIndex: number) => {\n  itemRefs.value?.at(focusedIndex)?.$el?.scrollIntoView({ block: 'nearest' });\n};\n\nconst moveVisibleFocusDown = () => {\n  focusedIndex.value += (itemRefs.value?.slice(focusedIndex.value + 1).findIndex(item => !item.$props.disabled) ?? -1) + 1;\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\nconst scrollableList = ref<HTMLElement | null>(null);\n\nconst onScroll = useDebounceFn(() => {\n  const el = scrollableList.value;\n  if (!el) return;\n\n  const threshold = 50;\n  const scrolledToBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;\n\n  if (scrolledToBottom) {\n    emit('endOfList');\n  }\n}, 200);\n\nconst moveVisibleFocusUp = () => {\n  focusedIndex.value -=\n    (itemRefs.value\n      ?.slice(0, focusedIndex.value)\n      .reverse()\n      .findIndex(item => !item.$props.disabled) ?? -1) + 1;\n\n  scrollToFocusedIndex(focusedIndex.value);\n};\n\n// Keyboard navigation handlers\nonKeyStroke(['ArrowDown', 'ArrowUp', 'Enter'], e => {\n  if (isOpenProxy.value === true) {\n    switch (e.key) {\n      case 'ArrowDown': {\n        moveVisibleFocusDown();\n        break;\n      }\n      case 'ArrowUp': {\n        moveVisibleFocusUp();\n        break;\n      }\n      case 'Enter': {\n        const item = props.items[focusedIndex.value];\n\n        if (!item.disabled) {\n          item.onClick?.();\n          hide();\n        }\n\n        break;\n      }\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n});\n\ndefineExpose({\n  show,\n  hide,\n  toggle,\n});\n\nonClickOutside(props.multiple ? elClipToAnchor : listAnchor, event => {\n  // Check if the clicked element is a disabled item\n  const clickedElement = event.target as HTMLElement;\n  const isDisabledItem = clickedElement.closest('[data-disabled=\"true\"]');\n\n  if (!isDisabledItem) {\n    hide();\n  }\n});\n</script>\n\n<template>\n  <div class=\"relative\">\n    <div ref=\"listAnchor\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"{\n          isOpen: isOpenProxy,\n          toggle,\n          show,\n          hide,\n        }\"\n      >\n        <ElIconButton v-if=\"iconButton\" class=\"cursor-pointer\" :aria-expanded=\"isOpenProxy\" v-bind=\"iconButton\" @click=\"toggle\" />\n      </slot>\n    </div>\n\n    <CustomTransition name=\"expand\">\n      <ElClipToAnchor\n        v-if=\"isOpenProxy && listAnchor\"\n        ref=\"elClipToAnchor\"\n        class=\"pt-1\"\n        match-anchor-width\n        :anchor=\"listAnchor\"\n        :position=\"left ? 'bottom-left' : right ? 'bottom-right' : 'bottom'\"\n        :min-width=\"minWidth ?? 208\"\n      >\n        <div\n          class=\"border-neutral-surface text-neutral-darker inline-flex w-full flex-col items-start gap-1 rounded-xl border bg-white p-2 text-sm shadow-md max-h-[inherit]\"\n        >\n          <div v-if=\"title\" class=\"border-neutral-surface flex h-9 items-center self-stretch border-b px-2\">\n            <span class=\"font-semibold\">{{ title }}</span>\n          </div>\n          <div\n            ref=\"scrollableList\"\n            class=\"no-scrollbar relative w-full overflow-y-scroll\"\n            :class=\"{\n              'max-h-[260px]': maxHeight === 260,\n            }\"\n            role=\"listbox\"\n            :aria-activedescendant=\"'option-' + focusedIndex\"\n            @scroll=\"onScroll\"\n          >\n            <div class=\"flex w-full flex-col gap-1\">\n              <template v-if=\"items.length > 0\">\n                <ElItem\n                  v-for=\"(item, index) in items\"\n                  :id=\"'option-' + index\"\n                  ref=\"itemRefs\"\n                  :key=\"index\"\n                  class=\"self-stretch\"\n                  :class=\"{\n                    'cursor-pointer': !item.disabled,\n                    'cursor-default': item.disabled,\n                  }\"\n                  role=\"option\"\n                  tabindex=\"-1\"\n                  v-bind=\"omit(item, 'onClick')\"\n                  :disabled=\"item.disabled\"\n                  :data-disabled=\"item.disabled ? 'true' : undefined\"\n                  :data-cy=\"`${item.text?.trim().replaceAll(' ', '').replaceAll(',', '')}-dropdown-item`\"\n                  :focused=\"focusedIndex === index\"\n                  @click.prevent=\"!item.disabled && item.onClick?.()\"\n                />\n              </template>\n              <ElItem v-else class=\"cursor-pointer self-stretch\" :data-cy=\"`no-items-dropdown-item`\" text=\"Nessuna opzione disponibile\" />\n            </div>\n          </div>\n          <div v-if=\"action\" class=\"border-neutral-surface self-stretch border-t py-2 px-5\">\n            <ElButton variant=\"tertiary\" v-bind=\"action\" class=\"w-full\" @click=\"emit('click:action')\" />\n          </div>\n        </div>\n      </ElClipToAnchor>\n    </CustomTransition>\n  </div>\n</template>\n"],"names":["elDropdownMaxHeight","props","__props","emit","__emit","internalIsOpenState","ref","listAnchor","elClipToAnchor","focusedIndex","itemRefs","isOpenProxy","computed","isOpen","toggle","show","hide","watch","selectedValueIdx","_a","item","scrollToFocusedIndex","_c","_b","moveVisibleFocusDown","scrollableList","onScroll","useDebounceFn","el","moveVisibleFocusUp","onKeyStroke","__expose","onClickOutside","event"],"mappings":"kxCACaA,GAAsB,CAAC,EAAG,IAAK,GAAI,0WAgBhD,MAAMC,EAAQC,EAwBRC,EAAOC,EAMPC,EAAsBC,EAAa,EAAK,EACxCC,EAAaD,IACbE,EAAiBF,IACjBG,EAAeH,EAAY,CAAC,EAC5BI,EAAWJ,IAEXK,EAAcC,EAAS,CAC3B,IAAIC,EAAiB,CACfZ,EAAM,SAAW,QACnBE,EAAK,iBAAkBU,CAAM,EAE/BR,EAAoB,MAAQQ,CAC9B,EACA,KAAe,CACb,OAAIZ,EAAM,SAAW,OAAkBA,EAAM,OACtCI,EAAoB,KAC7B,CAAA,CACD,EAEKS,EAAS,IAAOH,EAAY,MAAQ,CAACA,EAAY,MACjDI,EAAO,IAAM,CACjBJ,EAAY,MAAQ,EAAA,EAEhBK,EAAO,IAAOL,EAAY,MAAQ,GAGxCM,EACE,IAAM,CAAChB,EAAM,MAAOU,EAAY,KAAK,EACrC,IAAM,OACJ,GAAIA,EAAY,MAAO,CACrB,MAAMO,GAAmBC,EAAAlB,EAAM,QAAN,YAAAkB,EAAa,UAAUC,GAAQA,EAAK,OAC7DX,EAAa,MAAQS,GAAoB,CAC3C,CACF,CAAA,EAII,MAAAG,EAAwBZ,GAAyB,YAC5Ca,GAAAC,GAAAJ,EAAAT,EAAA,QAAA,YAAAS,EAAO,GAAGV,KAAV,YAAAc,EAAyB,MAAzB,MAAAD,EAA8B,eAAe,CAAE,MAAO,SAAA,EAAW,EAGtEE,EAAuB,IAAM,OACjCf,EAAa,UAAUU,EAAAT,EAAS,QAAT,YAAAS,EAAgB,MAAMV,EAAa,MAAQ,GAAG,aAAkB,CAACW,EAAK,OAAO,YAAa,IAAM,EACvHC,EAAqBZ,EAAa,KAAK,CAAA,EAGnCgB,EAAiBnB,EAAwB,IAAI,EAE7CoB,EAAWC,GAAc,IAAM,CACnC,MAAMC,EAAKH,EAAe,MAC1B,GAAI,CAACG,EAAI,OAGgBA,EAAG,UAAYA,EAAG,cAAgBA,EAAG,aAD5C,IAIhBzB,EAAK,WAAW,GAEjB,GAAG,EAEA0B,EAAqB,IAAM,OAC/BpB,EAAa,UACVU,EAAAT,EAAS,QAAT,YAAAS,EACG,MAAM,EAAGV,EAAa,OACvB,UACA,UAAkBW,GAAA,CAACA,EAAK,OAAO,YAAa,IAAM,EAEvDC,EAAqBZ,EAAa,KAAK,CAAA,EAIzC,OAAAqB,EAAY,CAAC,YAAa,UAAW,OAAO,EAAQ,GAAA,OAC9C,GAAAnB,EAAY,QAAU,GAAM,CAC9B,OAAQ,EAAE,IAAK,CACb,IAAK,YAAa,CACKa,IACrB,KACF,CACA,IAAK,UAAW,CACKK,IACnB,KACF,CACA,IAAK,QAAS,CACZ,MAAMT,EAAOnB,EAAM,MAAMQ,EAAa,KAAK,EAEtCW,EAAK,YACRD,EAAAC,EAAK,UAAL,MAAAD,EAAA,KAAAC,GACKJ,KAGP,KACF,CACF,CAEA,EAAE,eAAe,EACjB,EAAE,gBAAgB,CACpB,CAAA,CACD,EAEYe,EAAA,CACX,KAAAhB,EACA,KAAAC,EACA,OAAAF,CAAA,CACD,EAEDkB,EAAe/B,EAAM,SAAWO,EAAiBD,EAAqB0B,GAAA,CAE7CA,EAAM,OACS,QAAQ,wBAAwB,GAG/DjB,GACP,CACD"}

package/dist/src/forms/ElInputAutocomplete.vue.cjs2.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),D=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),F=require("../ElInputChip.vue.cjs2.js"),T=require("../../node_modules/@vueuse/core/index.cjs.js"),z=require("../ElSpinner.vue.cjs2.js"),L=require("./ElInputContainer.vue.cjs2.js"),K=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),O={class:"flex flex-col gap-1"},P={class:"flex items-center gap-1 px-2"},U=["disabled","validation","placeholder"],W={key:0,class:"text-xs font-normal text-error"},j=l.defineComponent({__name:"ElInputAutocomplete",props:{...D.withCommonElInputProps(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(p,{expose:w,emit:B}){const o=p,c=B,b=l.ref(!1),i=l.ref(!1),r=l.ref(o.modelValue),u=l.ref([]),n=l.ref(o.selectedItems),f=l.ref(),v=l.ref();l.onMounted(async()=>{if(o.dataController){const e=await g(r.value);u.value=(e==null?void 0:e.data)||[]}else u.value=o.items});const E=l.computed(()=>{var t;const e=(t=u.value)==null?void 0:t.map((a,d)=>({...a,text:a.label||a.text,check:n.value.some(s=>s.text?s.text===a.text:s.label===a.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(m=>m.text?m.text===a.text:m.label===a.label);I!==-1?n.value=n.value.filter((m,A)=>A!==I):n.value.push({...a,check:!0}),r.value="",v.value=void 0,(s=f.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=a.text||a.label||a.value||"";c("update:modelValue",a.text||a.label||a.value||""),c("item:click",d)}}));return o.multiple&&e.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var a;n.value.length===u.value.length?n.value=[]:n.value=u.value,(a=f.value)==null||a.focus(),c("update:selectedItems",n.value)}}),e}),y=T.useMemoize(async e=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,e))}),g=K.useDebounceFn(y,o.debounceTime),_=()=>y.cache.clear(),S=async()=>{var t;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const e=await((t=o.dataController)==null?void 0:t.call(o,r.value));u.value=(e==null?void 0:e.data)||[]},x=e=>{var t;((t=e.relatedTarget)==null?void 0:t.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},q=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&M(e.value)},k=(e,t)=>{n.value=n.value.filter(a=>a.text!==t.text),c("update:selectedItems",n.value)},M=async e=>{if(o.dataController){b.value=!0;const t=await g(e);i.value=!!t,b.value=!t,u.value=(t==null?void 0:t.data)||[]}else e?u.value=o.items.filter(t=>{var a;return(a=t.text)==null?void 0:a.toLowerCase().includes(e.toLowerCase())}):u.value=o.items;c("update:modelValue",e)},C=e=>{var t,a;if(!r.value)if(n.value.length>0&&!v.value){const d=n.value.length-1;v.value=n.value[d],(t=document.getElementById(d.toString()))==null||t.focus()}else k(e,v.value),v.value=void 0,(a=f.value)==null||a.focus()},h=e=>{const t=e.currentTarget;t.scrollLeft+=e.deltaY,e.preventDefault()},V=e=>{o.multiple?i.value=!0:i.value=e};return w({resetAllAndFetch:S,clearCache:_}),(e,t)=>(l.openBlock(),l.createElementBlock("div",O,[l.createElementVNode("label",{class:l.normalizeClass(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},l.toDisplayString(e.label),3),l.createVNode(N.default,{items:E.value,multiple:p.multiple,"is-open":i.value,disabled:e.disabled,"onUpdate:isOpen":t[7]||(t[7]=a=>V(a))},{anchor:l.withCtx(()=>[l.createVNode(L.default,{color:e.color,name:e.name},{default:l.withCtx(()=>[l.createElementVNode("div",P,[p.multiple?(l.openBlock(),l.createElementBlock("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:h},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(n.value,(a,d)=>(l.openBlock(),l.createBlock(F.default,{id:d,key:d,text:a.text||a.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,a),onKeydown:t[0]||(t[0]=l.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):l.createCommentVNode("",!0),l.withDirectives(l.createElementVNode("input",{ref_key:"inputField",ref:f,"onUpdate:modelValue":t[1]||(t[1]=a=>r.value=a),disabled:e.disabled,type:"text",class:l.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:p.placeholder,onInput:t[2]||(t[2]=a=>q(a)),onKeydown:t[3]||(t[3]=l.withKeys(a=>C(a),["backspace"])),onClick:t[4]||(t[4]=l.withModifiers(a=>x(a),["prevent"])),onBlur:t[5]||(t[5]=l.withModifiers(a=>x(a),["prevent"])),onWheel:t[6]||(t[6]=a=>h(a))},null,42,U),[[l.vModelText,r.value]]),b.value?(l.openBlock(),l.createBlock(z.default,{key:1,class:"mx-2",size:"normal"})):l.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(l.openBlock(),l.createElementBlock("div",W,l.toDisplayString(e.errorMessage),1)):l.createCommentVNode("",!0)]))}});exports.default=j;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),L=require("./input.cjs.js"),N=require("../ElDropdown.vue.cjs2.js"),O=require("../ElInputChip.vue.cjs2.js"),F=require("../../node_modules/@vueuse/core/index.cjs.js"),T=require("../ElSpinner.vue.cjs2.js"),z=require("./ElInputContainer.vue.cjs2.js"),K=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),P={class:"flex flex-col gap-1"},U={class:"flex items-center gap-1 px-2"},W=["disabled","validation","placeholder"],$={key:0,class:"text-xs font-normal text-error"},j=a.defineComponent({__name:"ElInputAutocomplete",props:{...L.withCommonElInputProps(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems","endOfList"],setup(p,{expose:w,emit:E}){const o=p,c=E,v=a.ref(!1),i=a.ref(!1),r=a.ref(o.modelValue),u=a.ref([]),n=a.ref(o.selectedItems),m=a.ref(),f=a.ref();a.onMounted(async()=>{if(o.dataController){const l=await g(r.value);u.value=(l==null?void 0:l.data)||[]}else u.value=o.items});const B=a.computed(()=>{var e;const l=(e=u.value)==null?void 0:e.map((t,d)=>({...t,text:t.label||t.text,check:n.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(o.multiple){const I=n.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);I!==-1?n.value=n.value.filter((b,D)=>D!==I):n.value.push({...t,check:!0}),r.value="",f.value=void 0,(s=m.value)==null||s.focus(),c("update:selectedItems",n.value)}else r.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",d)}}));return o.multiple&&l.unshift({text:n.value.length===u.value.length?o.labelDeselectAll:o.labelSelectAll,check:!1,onClick:()=>{var t;n.value.length===u.value.length?n.value=[]:n.value=u.value,(t=m.value)==null||t.focus(),c("update:selectedItems",n.value)}}),l}),y=F.useMemoize(async(l,e)=>{var t;return await((t=o.dataController)==null?void 0:t.call(o,l,e))}),g=K.useDebounceFn(y,o.debounceTime),S=()=>y.cache.clear(),q=async()=>{var e;r.value=void 0,u.value=o.items,n.value=o.selectedItems;const l=await((e=o.dataController)==null?void 0:e.call(o,r.value));u.value=(l==null?void 0:l.data)||[]},x=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(i.value?i.value=!1:i.value=!0)},M=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&V(l.value)},k=(l,e)=>{n.value=n.value.filter(t=>t.text!==e.text),c("update:selectedItems",n.value)},V=async l=>{if(o.dataController){v.value=!0;const e=await g(l);i.value=!!e,v.value=!e,u.value=(e==null?void 0:e.data)||[]}else l?u.value=o.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):u.value=o.items;c("update:modelValue",l)},_=async l=>{if(o.dataController){v.value=!0;const e=await o.dataController(r.value,l);v.value=!e,u.value=(e==null?void 0:e.data)||[]}else u.value=o.items},C=l=>{var e,t;if(!r.value)if(n.value.length>0&&!f.value){const d=n.value.length-1;f.value=n.value[d],(e=document.getElementById(d.toString()))==null||e.focus()}else k(l,f.value),f.value=void 0,(t=m.value)==null||t.focus()},h=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},A=l=>{o.multiple?i.value=!0:i.value=l};return w({resetAllAndFetch:q,clearCache:S}),(l,e)=>(a.openBlock(),a.createElementBlock("div",P,[a.createElementVNode("label",{class:a.normalizeClass(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},a.toDisplayString(l.label),3),a.createVNode(N.default,{items:B.value,multiple:p.multiple,"is-open":i.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>A(t)),onEndOfList:e[8]||(e[8]=t=>_({isEndOfList:!0}))},{anchor:a.withCtx(()=>[a.createVNode(z.default,{color:l.color,name:l.name},{default:a.withCtx(()=>[a.createElementVNode("div",U,[p.multiple?(a.openBlock(),a.createElementBlock("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:h},[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.value,(t,d)=>(a.openBlock(),a.createBlock(O.default,{id:d,key:d,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>k(s,t),onKeydown:e[0]||(e[0]=a.withKeys(s=>C(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):a.createCommentVNode("",!0),a.withDirectives(a.createElementVNode("input",{ref_key:"inputField",ref:m,"onUpdate:modelValue":e[1]||(e[1]=t=>r.value=t),disabled:l.disabled,type:"text",class:a.normalizeClass(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>M(t)),onKeydown:e[3]||(e[3]=a.withKeys(t=>C(t),["backspace"])),onClick:e[4]||(e[4]=a.withModifiers(t=>x(t),["prevent"])),onBlur:e[5]||(e[5]=a.withModifiers(t=>x(t),["prevent"])),onWheel:e[6]||(e[6]=t=>h(t))},null,42,W),[[a.vModelText,r.value]]),v.value?(a.openBlock(),a.createBlock(T.default,{key:1,class:"mx-2",size:"normal"})):a.createCommentVNode("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(a.openBlock(),a.createElementBlock("div",$,a.toDisplayString(l.errorMessage),1)):a.createCommentVNode("",!0)]))}});exports.default=j;
 //# sourceMappingURL=ElInputAutocomplete.vue.cjs2.js.map

package/dist/src/forms/ElInputAutocomplete.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n  ...withCommonElInputProps(),\n  modelValue: {\n    type: [Array, String] as PropType<TextualValueType>,\n    required: false,\n    default: undefined,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n    required: false,\n  },\n  items: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    required: false,\n    default: () => [],\n  },\n  selectedItems: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    default: () => [],\n  },\n  labelSelectAll: {\n    type: String,\n    default: 'Seleziona tutto',\n  },\n  labelDeselectAll: {\n    type: String,\n    default: 'Deseleziona tutto',\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  multiple: {\n    type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n    default: false,\n  },\n  debounceTime: {\n    type: Number,\n    default: 300,\n    requied: false,\n  },\n  dataController: {\n    type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n    required: false,\n    default: undefined,\n  },\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n  (event: 'item:click', itemIndex: number): void;\n  (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n  if (props.dataController) {\n    const response = await debounceDataController(query.value);\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n});\n\nconst items = computed(() => {\n  const mappedItems = filteredItems.value?.map((item, index) => ({\n    ...item,\n    text: item.label || item.text,\n    check: selectedItems.value.some(selectedItem =>\n      selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n    ),\n    onClick: () => {\n      if (props.multiple) {\n        // If the item is already selected, remove it from the selectedItems array\n        const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n          currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n        );\n\n        if (clickedItemIndex !== -1) {\n          selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n        } else {\n          selectedItems.value.push({ ...item, check: true });\n        }\n\n        // Reset query to empty string to clear the input\n        query.value = '';\n        // Reset last selected item because the selectedItems array is updated\n        lastSelectedItem.value = undefined;\n        inputField.value?.focus();\n\n        emit('update:selectedItems', selectedItems.value);\n      } else {\n        query.value = item.text || item.label || item.value || '';\n      }\n\n      emit('update:modelValue', item.text || item.label || item.value || '');\n      emit('item:click', index);\n    },\n  }));\n\n  if (props.multiple) {\n    mappedItems.unshift({\n      text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n      check: false,\n      onClick: () => {\n        if (selectedItems.value.length === filteredItems.value.length) {\n          selectedItems.value = [];\n        } else {\n          selectedItems.value = filteredItems.value;\n        }\n\n        inputField.value?.focus();\n        emit('update:selectedItems', selectedItems.value);\n      },\n    });\n  }\n\n  return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n  return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n  query.value = undefined;\n  filteredItems.value = props.items;\n  selectedItems.value = props.selectedItems;\n  const response = await props.dataController?.(query.value);\n  filteredItems.value = response?.data || [];\n};\n\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n  if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n    if (!isOpen.value) {\n      isOpen.value = true;\n    } else {\n      isOpen.value = false;\n    }\n  }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n  if (target instanceof HTMLInputElement) {\n    if (target.value.charAt(target.value.length - 1) !== ' ') {\n      updateModel(target.value);\n    }\n  }\n};\n\n/**\n * Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n  selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n  emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(value);\n    isOpen.value = !!response;\n    isLoading.value = !response;\n    filteredItems.value = response?.data || [];\n  } else {\n    if (value) {\n      filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n    } else {\n      filteredItems.value = props.items;\n    }\n  }\n\n  emit('update:modelValue', value);\n};\n\n/**\n    Handle backspace key press to remove last selected item when multiple is true\n    param e KeyboardEvent\n   */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n  if (!query.value) {\n    if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n      const lastItemIndex = selectedItems.value.length - 1;\n      lastSelectedItem.value = selectedItems.value[lastItemIndex];\n      document.getElementById(lastItemIndex.toString())?.focus();\n    } else {\n      onRemoveItem(e, lastSelectedItem.value);\n      lastSelectedItem.value = undefined;\n      inputField.value?.focus();\n    }\n  }\n};\n\n/**\n    Handle wheel scroll event to scroll the listbox horizontally\n    param event WheelEvent\n   */\nconst onWheelScroll = (event: WheelEvent) => {\n  const container = event.currentTarget as HTMLElement;\n  container.scrollLeft += event.deltaY;\n  // Prevent vertical scrolling of the page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen event to open the dropdown when multiple is true\n    param event boolean\n   */\nconst onUpdateIsOpen = (event: boolean) => {\n  if (props.multiple) {\n    isOpen.value = true;\n  } else {\n    isOpen.value = event;\n  }\n};\n\ndefineExpose({\n  resetAllAndFetch,\n  clearCache,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n      {{ label }}\n    </label>\n    <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n      <template #anchor>\n        <ElInputContainer :color=\"color\" :name=\"name\">\n          <template #default>\n            <div class=\"flex items-center gap-1 px-2\">\n              <div\n                v-if=\"multiple\"\n                name=\"scrollable-container\"\n                class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n                @wheel=\"onWheelScroll\"\n              >\n                <ElInputChip\n                  v-for=\"(item, index) in selectedItems\"\n                  :id=\"index\"\n                  :key=\"index\"\n                  :text=\"item.text || item.label || ''\"\n                  class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n                  @click=\"onRemoveItem($event, item)\"\n                  @keydown.backspace=\"onDeleteKeyPress($event)\"\n                />\n              </div>\n\n              <input\n                ref=\"inputField\"\n                v-model=\"query\"\n                :disabled=\"disabled\"\n                type=\"text\"\n                class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n                :class=\"{ 'cursor-not-allowed': disabled }\"\n                :validation=\"validation\"\n                :placeholder=\"placeholder\"\n                @input=\"onChangeEvent($event)\"\n                @keydown.backspace=\"onDeleteKeyPress($event)\"\n                @click.prevent=\"onInputClick($event)\"\n                @blur.prevent=\"onInputClick($event)\"\n                @wheel=\"onWheelScroll($event)\"\n              />\n\n              <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n            </div>\n          </template>\n        </ElInputContainer>\n      </template>\n    </ElDropdown>\n    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
+{"version":3,"file":"ElInputAutocomplete.vue.cjs2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n  ...withCommonElInputProps(),\n  modelValue: {\n    type: [Array, String] as PropType<TextualValueType>,\n    required: false,\n    default: undefined,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n    required: false,\n  },\n  items: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    required: false,\n    default: () => [],\n  },\n  selectedItems: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    default: () => [],\n  },\n  labelSelectAll: {\n    type: String,\n    default: 'Seleziona tutto',\n  },\n  labelDeselectAll: {\n    type: String,\n    default: 'Deseleziona tutto',\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  multiple: {\n    type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n    default: false,\n  },\n  debounceTime: {\n    type: Number,\n    default: 300,\n    requied: false,\n  },\n  dataController: {\n    type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n    required: false,\n    default: undefined,\n  },\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n  (event: 'item:click', itemIndex: number): void;\n  (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n  (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n  if (props.dataController) {\n    const response = await debounceDataController(query.value);\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n});\n\nconst items = computed(() => {\n  const mappedItems = filteredItems.value?.map((item, index) => ({\n    ...item,\n    text: item.label || item.text,\n    check: selectedItems.value.some(selectedItem =>\n      selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n    ),\n    onClick: () => {\n      if (props.multiple) {\n        // If the item is already selected, remove it from the selectedItems array\n        const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n          currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n        );\n\n        if (clickedItemIndex !== -1) {\n          selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n        } else {\n          selectedItems.value.push({ ...item, check: true });\n        }\n\n        // Reset query to empty string to clear the input\n        query.value = '';\n        // Reset last selected item because the selectedItems array is updated\n        lastSelectedItem.value = undefined;\n        inputField.value?.focus();\n\n        emit('update:selectedItems', selectedItems.value);\n      } else {\n        query.value = item.text || item.label || item.value || '';\n      }\n\n      emit('update:modelValue', item.text || item.label || item.value || '');\n      emit('item:click', index);\n    },\n  }));\n\n  if (props.multiple) {\n    mappedItems.unshift({\n      text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n      check: false,\n      onClick: () => {\n        if (selectedItems.value.length === filteredItems.value.length) {\n          selectedItems.value = [];\n        } else {\n          selectedItems.value = filteredItems.value;\n        }\n\n        inputField.value?.focus();\n        emit('update:selectedItems', selectedItems.value);\n      },\n    });\n  }\n\n  return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n  query.value = undefined;\n  filteredItems.value = props.items;\n  selectedItems.value = props.selectedItems;\n  const response = await props.dataController?.(query.value);\n  filteredItems.value = response?.data || [];\n};\n\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n  if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n    if (!isOpen.value) {\n      isOpen.value = true;\n    } else {\n      isOpen.value = false;\n    }\n  }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n  if (target instanceof HTMLInputElement) {\n    if (target.value.charAt(target.value.length - 1) !== ' ') {\n      updateModel(target.value);\n    }\n  }\n};\n\n/**\n * Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n  selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n  emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(value);\n    isOpen.value = !!response;\n    isLoading.value = !response;\n    filteredItems.value = response?.data || [];\n  } else {\n    if (value) {\n      filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n    } else {\n      filteredItems.value = props.items;\n    }\n  }\n\n  emit('update:modelValue', value);\n};\n\n// Trigger event end of list to data controller\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await props.dataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n};\n\n/**\n    Handle backspace key press to remove last selected item when multiple is true\n    param e KeyboardEvent\n   */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n  if (!query.value) {\n    if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n      const lastItemIndex = selectedItems.value.length - 1;\n      lastSelectedItem.value = selectedItems.value[lastItemIndex];\n      document.getElementById(lastItemIndex.toString())?.focus();\n    } else {\n      onRemoveItem(e, lastSelectedItem.value);\n      lastSelectedItem.value = undefined;\n      inputField.value?.focus();\n    }\n  }\n};\n\n/**\n    Handle wheel scroll event to scroll the listbox horizontally\n    param event WheelEvent\n   */\nconst onWheelScroll = (event: WheelEvent) => {\n  const container = event.currentTarget as HTMLElement;\n  container.scrollLeft += event.deltaY;\n  // Prevent vertical scrolling of the page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen event to open the dropdown when multiple is true\n    param event boolean\n   */\nconst onUpdateIsOpen = (event: boolean) => {\n  if (props.multiple) {\n    isOpen.value = true;\n  } else {\n    isOpen.value = event;\n  }\n};\n\ndefineExpose({\n  resetAllAndFetch,\n  clearCache,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n      {{ label }}\n    </label>\n    <ElDropdown\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\n      <template #anchor>\n        <ElInputContainer :color=\"color\" :name=\"name\">\n          <template #default>\n            <div class=\"flex items-center gap-1 px-2\">\n              <div\n                v-if=\"multiple\"\n                name=\"scrollable-container\"\n                class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n                @wheel=\"onWheelScroll\"\n              >\n                <ElInputChip\n                  v-for=\"(item, index) in selectedItems\"\n                  :id=\"index\"\n                  :key=\"index\"\n                  :text=\"item.text || item.label || ''\"\n                  class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n                  @click=\"onRemoveItem($event, item)\"\n                  @keydown.backspace=\"onDeleteKeyPress($event)\"\n                />\n              </div>\n\n              <input\n                ref=\"inputField\"\n                v-model=\"query\"\n                :disabled=\"disabled\"\n                type=\"text\"\n                class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n                :class=\"{ 'cursor-not-allowed': disabled }\"\n                :validation=\"validation\"\n                :placeholder=\"placeholder\"\n                @input=\"onChangeEvent($event)\"\n                @keydown.backspace=\"onDeleteKeyPress($event)\"\n                @click.prevent=\"onInputClick($event)\"\n                @blur.prevent=\"onInputClick($event)\"\n                @wheel=\"onWheelScroll($event)\"\n              />\n\n              <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n            </div>\n          </template>\n        </ElInputContainer>\n      </template>\n    </ElDropdown>\n    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}

package/dist/src/forms/ElInputAutocomplete.vue.esm2.js

@@ -1,2 +1,2 @@
-import{defineComponent as H,ref as d,onMounted as R,computed as Y,openBlock as f,createElementBlock as x,createElementVNode as g,normalizeClass as D,toDisplayString as V,createVNode as B,withCtx as E,Fragment as j,renderList as G,createBlock as F,withKeys as q,createCommentVNode as k,withDirectives as J,withModifiers as L,vModelText as Q}from"vue";import{withCommonElInputProps as X}from"./input.esm.js";import Z from"../ElDropdown.vue.esm2.js";import _ from"../ElInputChip.vue.esm2.js";import{useMemoize as ee}from"../../node_modules/@vueuse/core/index.esm.js";import le from"../ElSpinner.vue.esm2.js";import te from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as ae}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const oe={class:"flex flex-col gap-1"},ne={class:"flex items-center gap-1 px-2"},se=["disabled","validation","placeholder"],ue={key:0,class:"text-xs font-normal text-error"},be=H({__name:"ElInputAutocomplete",props:{...X(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems"],setup(v,{expose:T,emit:z}){const a=v,c=z,y=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),p=d(),m=d();R(async()=>{if(a.dataController){const e=await h(u.value);n.value=(e==null?void 0:e.data)||[]}else n.value=a.items});const K=Y(()=>{var l;const e=(l=n.value)==null?void 0:l.map((t,i)=>({...t,text:t.label||t.text,check:o.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(a.multiple){const S=o.value.findIndex(b=>b.text?b.text===t.text:b.label===t.label);S!==-1?o.value=o.value.filter((b,P)=>P!==S):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=p.value)==null||s.focus(),c("update:selectedItems",o.value)}else u.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",i)}}));return a.multiple&&e.unshift({text:o.value.length===n.value.length?a.labelDeselectAll:a.labelSelectAll,check:!1,onClick:()=>{var t;o.value.length===n.value.length?o.value=[]:o.value=n.value,(t=p.value)==null||t.focus(),c("update:selectedItems",o.value)}}),e}),C=ee(async e=>{var l;return await((l=a.dataController)==null?void 0:l.call(a,e))}),h=ae(C,a.debounceTime),N=()=>C.cache.clear(),O=async()=>{var l;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const e=await((l=a.dataController)==null?void 0:l.call(a,u.value));n.value=(e==null?void 0:e.data)||[]},I=e=>{var l;((l=e.relatedTarget)==null?void 0:l.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},$=({target:e})=>{e instanceof HTMLInputElement&&e.value.charAt(e.value.length-1)!==" "&&U(e.value)},w=(e,l)=>{o.value=o.value.filter(t=>t.text!==l.text),c("update:selectedItems",o.value)},U=async e=>{if(a.dataController){y.value=!0;const l=await h(e);r.value=!!l,y.value=!l,n.value=(l==null?void 0:l.data)||[]}else e?n.value=a.items.filter(l=>{var t;return(t=l.text)==null?void 0:t.toLowerCase().includes(e.toLowerCase())}):n.value=a.items;c("update:modelValue",e)},A=e=>{var l,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(l=document.getElementById(i.toString()))==null||l.focus()}else w(e,m.value),m.value=void 0,(t=p.value)==null||t.focus()},M=e=>{const l=e.currentTarget;l.scrollLeft+=e.deltaY,e.preventDefault()},W=e=>{a.multiple?r.value=!0:r.value=e};return T({resetAllAndFetch:O,clearCache:N}),(e,l)=>(f(),x("div",oe,[g("label",{class:D(["text-sm font-semibold",{"text-error":e.errorMessage,"text-neutral-darker":!e.errorMessage}])},V(e.label),3),B(Z,{items:K.value,multiple:v.multiple,"is-open":r.value,disabled:e.disabled,"onUpdate:isOpen":l[7]||(l[7]=t=>W(t))},{anchor:E(()=>[B(te,{color:e.color,name:e.name},{default:E(()=>[g("div",ne,[v.multiple?(f(),x("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:M},[(f(!0),x(j,null,G(o.value,(t,i)=>(f(),F(_,{id:i,key:i,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>w(s,t),onKeydown:l[0]||(l[0]=q(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):k("",!0),J(g("input",{ref_key:"inputField",ref:p,"onUpdate:modelValue":l[1]||(l[1]=t=>u.value=t),disabled:e.disabled,type:"text",class:D(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":e.disabled}]),validation:e.validation,placeholder:v.placeholder,onInput:l[2]||(l[2]=t=>$(t)),onKeydown:l[3]||(l[3]=q(t=>A(t),["backspace"])),onClick:l[4]||(l[4]=L(t=>I(t),["prevent"])),onBlur:l[5]||(l[5]=L(t=>I(t),["prevent"])),onWheel:l[6]||(l[6]=t=>M(t))},null,42,se),[[Q,u.value]]),y.value?(f(),F(le,{key:1,class:"mx-2",size:"normal"})):k("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),e.errorMessage?(f(),x("div",ue,V(e.errorMessage),1)):k("",!0)]))}});export{be as default};
+import{defineComponent as R,ref as d,onMounted as Y,computed as j,openBlock as f,createElementBlock as y,createElementVNode as g,normalizeClass as E,toDisplayString as D,createVNode as L,withCtx as V,Fragment as G,renderList as J,createBlock as O,withKeys as B,createCommentVNode as k,withDirectives as Q,withModifiers as F,vModelText as X}from"vue";import{withCommonElInputProps as Z}from"./input.esm.js";import _ from"../ElDropdown.vue.esm2.js";import ee from"../ElInputChip.vue.esm2.js";import{useMemoize as le}from"../../node_modules/@vueuse/core/index.esm.js";import te from"../ElSpinner.vue.esm2.js";import ae from"./ElInputContainer.vue.esm2.js";import{useDebounceFn as oe}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const ne={class:"flex flex-col gap-1"},se={class:"flex items-center gap-1 px-2"},ue=["disabled","validation","placeholder"],re={key:0,class:"text-xs font-normal text-error"},xe=R({__name:"ElInputAutocomplete",props:{...Z(),modelValue:{type:[Array,String],required:!1,default:void 0},placeholder:{type:String,default:"",required:!1},items:{type:Array,required:!1,default:()=>[]},selectedItems:{type:Array,default:()=>[]},labelSelectAll:{type:String,default:"Seleziona tutto"},labelDeselectAll:{type:String,default:"Deseleziona tutto"},focusOnMount:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},debounceTime:{type:Number,default:300,requied:!1},dataController:{type:Function,required:!1,default:void 0}},emits:["update:modelValue","item:click","update:selectedItems","endOfList"],setup(p,{expose:q,emit:T}){const a=p,c=T,v=d(!1),r=d(!1),u=d(a.modelValue),n=d([]),o=d(a.selectedItems),b=d(),m=d();Y(async()=>{if(a.dataController){const l=await I(u.value);n.value=(l==null?void 0:l.data)||[]}else n.value=a.items});const z=j(()=>{var e;const l=(e=n.value)==null?void 0:e.map((t,i)=>({...t,text:t.label||t.text,check:o.value.some(s=>s.text?s.text===t.text:s.label===t.label),onClick:()=>{var s;if(a.multiple){const S=o.value.findIndex(x=>x.text?x.text===t.text:x.label===t.label);S!==-1?o.value=o.value.filter((x,H)=>H!==S):o.value.push({...t,check:!0}),u.value="",m.value=void 0,(s=b.value)==null||s.focus(),c("update:selectedItems",o.value)}else u.value=t.text||t.label||t.value||"";c("update:modelValue",t.text||t.label||t.value||""),c("item:click",i)}}));return a.multiple&&l.unshift({text:o.value.length===n.value.length?a.labelDeselectAll:a.labelSelectAll,check:!1,onClick:()=>{var t;o.value.length===n.value.length?o.value=[]:o.value=n.value,(t=b.value)==null||t.focus(),c("update:selectedItems",o.value)}}),l}),C=le(async(l,e)=>{var t;return await((t=a.dataController)==null?void 0:t.call(a,l,e))}),I=oe(C,a.debounceTime),$=()=>C.cache.clear(),K=async()=>{var e;u.value=void 0,n.value=a.items,o.value=a.selectedItems;const l=await((e=a.dataController)==null?void 0:e.call(a,u.value));n.value=(l==null?void 0:l.data)||[]},h=l=>{var e;((e=l.relatedTarget)==null?void 0:e.role)!=="option"&&(r.value?r.value=!1:r.value=!0)},N=({target:l})=>{l instanceof HTMLInputElement&&l.value.charAt(l.value.length-1)!==" "&&U(l.value)},w=(l,e)=>{o.value=o.value.filter(t=>t.text!==e.text),c("update:selectedItems",o.value)},U=async l=>{if(a.dataController){v.value=!0;const e=await I(l);r.value=!!e,v.value=!e,n.value=(e==null?void 0:e.data)||[]}else l?n.value=a.items.filter(e=>{var t;return(t=e.text)==null?void 0:t.toLowerCase().includes(l.toLowerCase())}):n.value=a.items;c("update:modelValue",l)},W=async l=>{if(a.dataController){v.value=!0;const e=await a.dataController(u.value,l);v.value=!e,n.value=(e==null?void 0:e.data)||[]}else n.value=a.items},A=l=>{var e,t;if(!u.value)if(o.value.length>0&&!m.value){const i=o.value.length-1;m.value=o.value[i],(e=document.getElementById(i.toString()))==null||e.focus()}else w(l,m.value),m.value=void 0,(t=b.value)==null||t.focus()},M=l=>{const e=l.currentTarget;e.scrollLeft+=l.deltaY,l.preventDefault()},P=l=>{a.multiple?r.value=!0:r.value=l};return q({resetAllAndFetch:K,clearCache:$}),(l,e)=>(f(),y("div",ne,[g("label",{class:E(["text-sm font-semibold",{"text-error":l.errorMessage,"text-neutral-darker":!l.errorMessage}])},D(l.label),3),L(_,{items:z.value,multiple:p.multiple,"is-open":r.value,disabled:l.disabled,"onUpdate:isOpen":e[7]||(e[7]=t=>P(t)),onEndOfList:e[8]||(e[8]=t=>W({isEndOfList:!0}))},{anchor:V(()=>[L(ae,{color:l.color,name:l.name},{default:V(()=>[g("div",se,[p.multiple?(f(),y("div",{key:0,name:"scrollable-container",class:"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing",onWheel:M},[(f(!0),y(G,null,J(o.value,(t,i)=>(f(),O(ee,{id:i,key:i,text:t.text||t.label||"",class:"border flex-shrink-0 rounded-md px-3 py-2",onClick:s=>w(s,t),onKeydown:e[0]||(e[0]=B(s=>A(s),["backspace"]))},null,8,["id","text","onClick"]))),128))],32)):k("",!0),Q(g("input",{ref_key:"inputField",ref:b,"onUpdate:modelValue":e[1]||(e[1]=t=>u.value=t),disabled:l.disabled,type:"text",class:E(["border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0",{"cursor-not-allowed":l.disabled}]),validation:l.validation,placeholder:p.placeholder,onInput:e[2]||(e[2]=t=>N(t)),onKeydown:e[3]||(e[3]=B(t=>A(t),["backspace"])),onClick:e[4]||(e[4]=F(t=>h(t),["prevent"])),onBlur:e[5]||(e[5]=F(t=>h(t),["prevent"])),onWheel:e[6]||(e[6]=t=>M(t))},null,42,ue),[[X,u.value]]),v.value?(f(),O(te,{key:1,class:"mx-2",size:"normal"})):k("",!0)])]),_:1},8,["color","name"])]),_:1},8,["items","multiple","is-open","disabled"]),l.errorMessage?(f(),y("div",re,D(l.errorMessage),1)):k("",!0)]))}});export{xe as default};
 //# sourceMappingURL=ElInputAutocomplete.vue.esm2.js.map

package/dist/src/forms/ElInputAutocomplete.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n  ...withCommonElInputProps(),\n  modelValue: {\n    type: [Array, String] as PropType<TextualValueType>,\n    required: false,\n    default: undefined,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n    required: false,\n  },\n  items: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    required: false,\n    default: () => [],\n  },\n  selectedItems: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    default: () => [],\n  },\n  labelSelectAll: {\n    type: String,\n    default: 'Seleziona tutto',\n  },\n  labelDeselectAll: {\n    type: String,\n    default: 'Deseleziona tutto',\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  multiple: {\n    type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n    default: false,\n  },\n  debounceTime: {\n    type: Number,\n    default: 300,\n    requied: false,\n  },\n  dataController: {\n    type: Function as PropType<(args: TextualValueType) => Promise<{ data: ElInputAutocompleteItems }>>,\n    required: false,\n    default: undefined,\n  },\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n  (event: 'item:click', itemIndex: number): void;\n  (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n  if (props.dataController) {\n    const response = await debounceDataController(query.value);\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n});\n\nconst items = computed(() => {\n  const mappedItems = filteredItems.value?.map((item, index) => ({\n    ...item,\n    text: item.label || item.text,\n    check: selectedItems.value.some(selectedItem =>\n      selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n    ),\n    onClick: () => {\n      if (props.multiple) {\n        // If the item is already selected, remove it from the selectedItems array\n        const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n          currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n        );\n\n        if (clickedItemIndex !== -1) {\n          selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n        } else {\n          selectedItems.value.push({ ...item, check: true });\n        }\n\n        // Reset query to empty string to clear the input\n        query.value = '';\n        // Reset last selected item because the selectedItems array is updated\n        lastSelectedItem.value = undefined;\n        inputField.value?.focus();\n\n        emit('update:selectedItems', selectedItems.value);\n      } else {\n        query.value = item.text || item.label || item.value || '';\n      }\n\n      emit('update:modelValue', item.text || item.label || item.value || '');\n      emit('item:click', index);\n    },\n  }));\n\n  if (props.multiple) {\n    mappedItems.unshift({\n      text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n      check: false,\n      onClick: () => {\n        if (selectedItems.value.length === filteredItems.value.length) {\n          selectedItems.value = [];\n        } else {\n          selectedItems.value = filteredItems.value;\n        }\n\n        inputField.value?.focus();\n        emit('update:selectedItems', selectedItems.value);\n      },\n    });\n  }\n\n  return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType) => {\n  return await props.dataController?.(value);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n  query.value = undefined;\n  filteredItems.value = props.items;\n  selectedItems.value = props.selectedItems;\n  const response = await props.dataController?.(query.value);\n  filteredItems.value = response?.data || [];\n};\n\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n  if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n    if (!isOpen.value) {\n      isOpen.value = true;\n    } else {\n      isOpen.value = false;\n    }\n  }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n  if (target instanceof HTMLInputElement) {\n    if (target.value.charAt(target.value.length - 1) !== ' ') {\n      updateModel(target.value);\n    }\n  }\n};\n\n/**\n * Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n  selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n  emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(value);\n    isOpen.value = !!response;\n    isLoading.value = !response;\n    filteredItems.value = response?.data || [];\n  } else {\n    if (value) {\n      filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n    } else {\n      filteredItems.value = props.items;\n    }\n  }\n\n  emit('update:modelValue', value);\n};\n\n/**\n    Handle backspace key press to remove last selected item when multiple is true\n    param e KeyboardEvent\n   */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n  if (!query.value) {\n    if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n      const lastItemIndex = selectedItems.value.length - 1;\n      lastSelectedItem.value = selectedItems.value[lastItemIndex];\n      document.getElementById(lastItemIndex.toString())?.focus();\n    } else {\n      onRemoveItem(e, lastSelectedItem.value);\n      lastSelectedItem.value = undefined;\n      inputField.value?.focus();\n    }\n  }\n};\n\n/**\n    Handle wheel scroll event to scroll the listbox horizontally\n    param event WheelEvent\n   */\nconst onWheelScroll = (event: WheelEvent) => {\n  const container = event.currentTarget as HTMLElement;\n  container.scrollLeft += event.deltaY;\n  // Prevent vertical scrolling of the page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen event to open the dropdown when multiple is true\n    param event boolean\n   */\nconst onUpdateIsOpen = (event: boolean) => {\n  if (props.multiple) {\n    isOpen.value = true;\n  } else {\n    isOpen.value = event;\n  }\n};\n\ndefineExpose({\n  resetAllAndFetch,\n  clearCache,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n      {{ label }}\n    </label>\n    <ElDropdown :items=\"items\" :multiple=\"multiple\" :is-open=\"isOpen\" :disabled=\"disabled\" @update:is-open=\"onUpdateIsOpen($event)\">\n      <template #anchor>\n        <ElInputContainer :color=\"color\" :name=\"name\">\n          <template #default>\n            <div class=\"flex items-center gap-1 px-2\">\n              <div\n                v-if=\"multiple\"\n                name=\"scrollable-container\"\n                class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n                @wheel=\"onWheelScroll\"\n              >\n                <ElInputChip\n                  v-for=\"(item, index) in selectedItems\"\n                  :id=\"index\"\n                  :key=\"index\"\n                  :text=\"item.text || item.label || ''\"\n                  class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n                  @click=\"onRemoveItem($event, item)\"\n                  @keydown.backspace=\"onDeleteKeyPress($event)\"\n                />\n              </div>\n\n              <input\n                ref=\"inputField\"\n                v-model=\"query\"\n                :disabled=\"disabled\"\n                type=\"text\"\n                class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n                :class=\"{ 'cursor-not-allowed': disabled }\"\n                :validation=\"validation\"\n                :placeholder=\"placeholder\"\n                @input=\"onChangeEvent($event)\"\n                @keydown.backspace=\"onDeleteKeyPress($event)\"\n                @click.prevent=\"onInputClick($event)\"\n                @blur.prevent=\"onInputClick($event)\"\n                @wheel=\"onWheelScroll($event)\"\n              />\n\n              <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n            </div>\n          </template>\n        </ElInputContainer>\n      </template>\n    </ElDropdown>\n    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","onChangeEvent","target","updateModel","onRemoveItem","_event","result","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}
+{"version":3,"file":"ElInputAutocomplete.vue.esm2.js","sources":["../../../src/forms/ElInputAutocomplete.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type InputAutocompleteItemsDataControl = string;\nexport type ElInputAutocompleteItems = Array<DropdownItem & { label?: string; value?: string }>;\nexport type EventOptions = { isEndOfList: boolean };\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, PropType, ref } from 'vue';\nimport { TextualValueType, withCommonElInputProps } from './input';\nimport ElDropdown, { DropdownItem } from '@/ElDropdown.vue';\nimport ElInputChip from '@/ElInputChip.vue';\nimport { useDebounceFn, useMemoize } from '@vueuse/core';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElInputContainer from './ElInputContainer.vue';\n\nconst props = defineProps({\n  ...withCommonElInputProps(),\n  modelValue: {\n    type: [Array, String] as PropType<TextualValueType>,\n    required: false,\n    default: undefined,\n  },\n  placeholder: {\n    type: String,\n    default: '',\n    required: false,\n  },\n  items: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    required: false,\n    default: () => [],\n  },\n  selectedItems: {\n    type: Array as PropType<ElInputAutocompleteItems>,\n    default: () => [],\n  },\n  labelSelectAll: {\n    type: String,\n    default: 'Seleziona tutto',\n  },\n  labelDeselectAll: {\n    type: String,\n    default: 'Deseleziona tutto',\n  },\n  focusOnMount: {\n    type: Boolean,\n    default: false,\n  },\n  multiple: {\n    type: Boolean as PropType<InstanceType<typeof ElDropdown>['multiple']>,\n    default: false,\n  },\n  debounceTime: {\n    type: Number,\n    default: 300,\n    requied: false,\n  },\n  dataController: {\n    type: Function as PropType<(args: TextualValueType, eventOptions?: EventOptions) => Promise<{ data: ElInputAutocompleteItems }>>,\n    required: false,\n    default: undefined,\n  },\n});\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', value: TextualValueType): void;\n  (event: 'item:click', itemIndex: number): void;\n  (event: 'update:selectedItems', value: ElInputAutocompleteItems): void;\n  (event: 'endOfList'): void;\n}>();\n\nconst isLoading = ref(false);\nconst isOpen = ref(false);\nconst query = ref<TextualValueType>(props.modelValue);\nconst filteredItems = ref<ElInputAutocompleteItems>([]);\nconst selectedItems = ref<ElInputAutocompleteItems>(props.selectedItems);\nconst inputField = ref<HTMLInputElement>();\nconst lastSelectedItem = ref();\n\nonMounted(async () => {\n  if (props.dataController) {\n    const response = await debounceDataController(query.value);\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n});\n\nconst items = computed(() => {\n  const mappedItems = filteredItems.value?.map((item, index) => ({\n    ...item,\n    text: item.label || item.text,\n    check: selectedItems.value.some(selectedItem =>\n      selectedItem.text ? selectedItem.text === item.text : selectedItem.label === item.label,\n    ),\n    onClick: () => {\n      if (props.multiple) {\n        // If the item is already selected, remove it from the selectedItems array\n        const clickedItemIndex = selectedItems.value.findIndex(currentItem =>\n          currentItem.text ? currentItem.text === item.text : currentItem.label === item.label,\n        );\n\n        if (clickedItemIndex !== -1) {\n          selectedItems.value = selectedItems.value.filter((_, index) => index !== clickedItemIndex);\n        } else {\n          selectedItems.value.push({ ...item, check: true });\n        }\n\n        // Reset query to empty string to clear the input\n        query.value = '';\n        // Reset last selected item because the selectedItems array is updated\n        lastSelectedItem.value = undefined;\n        inputField.value?.focus();\n\n        emit('update:selectedItems', selectedItems.value);\n      } else {\n        query.value = item.text || item.label || item.value || '';\n      }\n\n      emit('update:modelValue', item.text || item.label || item.value || '');\n      emit('item:click', index);\n    },\n  }));\n\n  if (props.multiple) {\n    mappedItems.unshift({\n      text: selectedItems.value.length === filteredItems.value.length ? props.labelDeselectAll : props.labelSelectAll,\n      check: false,\n      onClick: () => {\n        if (selectedItems.value.length === filteredItems.value.length) {\n          selectedItems.value = [];\n        } else {\n          selectedItems.value = filteredItems.value;\n        }\n\n        inputField.value?.focus();\n        emit('update:selectedItems', selectedItems.value);\n      },\n    });\n  }\n\n  return mappedItems;\n});\n\nconst debounceFunction = useMemoize(async (value: TextualValueType, eventOptions?: EventOptions) => {\n  return await props.dataController?.(value, eventOptions);\n});\n\nconst debounceDataController = useDebounceFn(debounceFunction, props.debounceTime);\nconst clearCache = () => debounceFunction.cache.clear();\n\nconst resetAllAndFetch = async () => {\n  query.value = undefined;\n  filteredItems.value = props.items;\n  selectedItems.value = props.selectedItems;\n  const response = await props.dataController?.(query.value);\n  filteredItems.value = response?.data || [];\n};\n\n/**\n * Handle input click event necessary to open or close dropdown\n * @param e FocusEvent\n */\nconst onInputClick = (e: FocusEvent) => {\n  if ((e.relatedTarget as HTMLElement)?.role !== 'option') {\n    if (!isOpen.value) {\n      isOpen.value = true;\n    } else {\n      isOpen.value = false;\n    }\n  }\n};\n\n/**\n * Handle input change event to update model value\n * @param event Event\n */\nconst onChangeEvent = ({ target }: Event) => {\n  if (target instanceof HTMLInputElement) {\n    if (target.value.charAt(target.value.length - 1) !== ' ') {\n      updateModel(target.value);\n    }\n  }\n};\n\n/**\n * Handle remove item from selected items by clicking on the item\n * @param _event Event\n * @param item DropdownItem\n */\nconst onRemoveItem = (_event: Event, item: DropdownItem) => {\n  selectedItems.value = selectedItems.value.filter(currentItem => currentItem.text !== item.text);\n  emit('update:selectedItems', selectedItems.value);\n};\n\nconst updateModel = async (value: TextualValueType) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await debounceDataController(value);\n    isOpen.value = !!response;\n    isLoading.value = !response;\n    filteredItems.value = response?.data || [];\n  } else {\n    if (value) {\n      filteredItems.value = props.items.filter(result => result.text?.toLowerCase().includes(value.toLowerCase()));\n    } else {\n      filteredItems.value = props.items;\n    }\n  }\n\n  emit('update:modelValue', value);\n};\n\n// Trigger event end of list to data controller\nconst triggerEventOption = async (eventOptions: EventOptions) => {\n  if (props.dataController) {\n    isLoading.value = true;\n    const response = await props.dataController(query.value, eventOptions);\n    isLoading.value = !response;\n\n    filteredItems.value = response?.data || [];\n  } else {\n    filteredItems.value = props.items;\n  }\n};\n\n/**\n    Handle backspace key press to remove last selected item when multiple is true\n    param e KeyboardEvent\n   */\nconst onDeleteKeyPress = (e: KeyboardEvent) => {\n  if (!query.value) {\n    if (selectedItems.value.length > 0 && !lastSelectedItem.value) {\n      const lastItemIndex = selectedItems.value.length - 1;\n      lastSelectedItem.value = selectedItems.value[lastItemIndex];\n      document.getElementById(lastItemIndex.toString())?.focus();\n    } else {\n      onRemoveItem(e, lastSelectedItem.value);\n      lastSelectedItem.value = undefined;\n      inputField.value?.focus();\n    }\n  }\n};\n\n/**\n    Handle wheel scroll event to scroll the listbox horizontally\n    param event WheelEvent\n   */\nconst onWheelScroll = (event: WheelEvent) => {\n  const container = event.currentTarget as HTMLElement;\n  container.scrollLeft += event.deltaY;\n  // Prevent vertical scrolling of the page\n  event.preventDefault();\n};\n\n/**\n    Handle update isOpen event to open the dropdown when multiple is true\n    param event boolean\n   */\nconst onUpdateIsOpen = (event: boolean) => {\n  if (props.multiple) {\n    isOpen.value = true;\n  } else {\n    isOpen.value = event;\n  }\n};\n\ndefineExpose({\n  resetAllAndFetch,\n  clearCache,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1\">\n    <label class=\"text-sm font-semibold\" :class=\"{ 'text-error': errorMessage, 'text-neutral-darker': !errorMessage }\">\n      {{ label }}\n    </label>\n    <ElDropdown\n      :items=\"items\"\n      :multiple=\"multiple\"\n      :is-open=\"isOpen\"\n      :disabled=\"disabled\"\n      @update:is-open=\"onUpdateIsOpen($event)\"\n      @end-of-list=\"triggerEventOption({ isEndOfList: true })\"\n    >\n      <template #anchor>\n        <ElInputContainer :color=\"color\" :name=\"name\">\n          <template #default>\n            <div class=\"flex items-center gap-1 px-2\">\n              <div\n                v-if=\"multiple\"\n                name=\"scrollable-container\"\n                class=\"flex items-center gap-1 overflow-x-scroll no-scrollbar cursor-grab active:cursor-grabbing\"\n                @wheel=\"onWheelScroll\"\n              >\n                <ElInputChip\n                  v-for=\"(item, index) in selectedItems\"\n                  :id=\"index\"\n                  :key=\"index\"\n                  :text=\"item.text || item.label || ''\"\n                  class=\"border flex-shrink-0 rounded-md px-3 py-2\"\n                  @click=\"onRemoveItem($event, item)\"\n                  @keydown.backspace=\"onDeleteKeyPress($event)\"\n                />\n              </div>\n\n              <input\n                ref=\"inputField\"\n                v-model=\"query\"\n                :disabled=\"disabled\"\n                type=\"text\"\n                class=\"border-none tex-tsm font-normal flex flex-1 focus:outline-none focus:ring-0\"\n                :class=\"{ 'cursor-not-allowed': disabled }\"\n                :validation=\"validation\"\n                :placeholder=\"placeholder\"\n                @input=\"onChangeEvent($event)\"\n                @keydown.backspace=\"onDeleteKeyPress($event)\"\n                @click.prevent=\"onInputClick($event)\"\n                @blur.prevent=\"onInputClick($event)\"\n                @wheel=\"onWheelScroll($event)\"\n              />\n\n              <ElSpinner v-if=\"isLoading\" class=\"mx-2\" size=\"normal\" />\n            </div>\n          </template>\n        </ElInputContainer>\n      </template>\n    </ElDropdown>\n    <div v-if=\"errorMessage\" class=\"text-xs font-normal text-error\">{{ errorMessage }}</div>\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","isLoading","ref","isOpen","query","filteredItems","selectedItems","inputField","lastSelectedItem","onMounted","response","debounceDataController","items","computed","mappedItems","_a","item","index","selectedItem","clickedItemIndex","currentItem","_","debounceFunction","useMemoize","value","eventOptions","useDebounceFn","clearCache","resetAllAndFetch","onInputClick","e","onChangeEvent","target","updateModel","onRemoveItem","_event","result","triggerEventOption","onDeleteKeyPress","lastItemIndex","_b","onWheelScroll","event","container","onUpdateIsOpen","__expose"],"mappings":"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"}

package/dist/table/ElServerSideResponsiveTable.vue.d.ts

@@ -296,6 +296,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
                 }[];
                 "onClick:action"?: (() => any) | undefined;
                 "onUpdate:is-open"?: ((isOpen: boolean) => any) | undefined;
+                onEndOfList?: (() => any) | undefined;
                 disabled?: boolean | undefined;
             } | undefined;
             sortableAndFilterableValue?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davincihealthcare/elty-design-system-vue",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "license": "UNLICENSED",
   "main": "dist/index.umd.cjs",
   "types": "dist/index.d.ts",