@davincihealthcare/elty-design-system-vue 2.14.5 → 2.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/src/table/ElMobileTable.vue.cjs2.js +1 -1
  2. package/dist/src/table/ElMobileTable.vue.cjs2.js.map +1 -1
  3. package/dist/src/table/ElMobileTable.vue.esm2.js +1 -1
  4. package/dist/src/table/ElMobileTable.vue.esm2.js.map +1 -1
  5. package/dist/src/table/ElServerSideMobileTable.vue.cjs2.js +1 -1
  6. package/dist/src/table/ElServerSideMobileTable.vue.cjs2.js.map +1 -1
  7. package/dist/src/table/ElServerSideMobileTable.vue.esm2.js +1 -1
  8. package/dist/src/table/ElServerSideMobileTable.vue.esm2.js.map +1 -1
  9. package/dist/src/table/ElServerSideTable.vue.cjs2.js +1 -1
  10. package/dist/src/table/ElServerSideTable.vue.cjs2.js.map +1 -1
  11. package/dist/src/table/ElServerSideTable.vue.esm2.js +1 -1
  12. package/dist/src/table/ElServerSideTable.vue.esm2.js.map +1 -1
  13. package/dist/table/ElMobileTable.vue.d.ts +1 -0
  14. package/dist/table/ElServerSideMobileTable.vue.d.ts +1 -0
  15. package/dist/table/ElServerSideTable.vue.d.ts +9 -2
  16. package/package.json +1 -1
package/dist/src/table/ElMobileTable.vue.cjs2.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ve=require("../ElListItem.vue.cjs2.js"),fe=require("../forms/ElInputText.vue.cjs2.js"),ye=require("../ElIconButton.vue.cjs2.js"),N=require("../ElButton.vue.cjs2.js"),ge=require("../ElTag.vue.cjs2.js"),G=require("../ElModal.vue.cjs2.js"),_e=require("../forms/ElInputSelect.vue.cjs2.js"),be=require("../forms/ElInputDate.vue.cjs2.js"),Ve=require("../ElAvatar.vue.cjs2.js"),ke=require("../_CustomTransition.vue.cjs2.js"),he=require("../ElSpinner.vue.cjs2.js"),xe=require("../ElIcon.vue.cjs2.js"),we={class:"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto"},Be={key:0,class:"flex flex-row items-center gap-4 pb-2"},Ce={class:"flex-grow"},Re={key:1,class:"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3"},Ee={class:"flex flex-row justify-start items-center"},Ne={class:"flex flex-row justify-center items-center"},Te={class:"text-neutral-darker font-normal text-sm"},Ae={class:"relative"},Fe={key:2,class:"pt-3 px-4"},Se={class:"font-semibold text-neutral-darker"},Ie={key:3,class:"m-0 flex flex-col flex-grow overflow-y-auto h-full"},De={key:4,class:"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3"},Oe=e.createElementVNode("div",{class:"flex flex-col gap-1 text-center"},[e.createElementVNode("span",{class:"text-lg font-semibold text-neutral-darker"},"Nessun risultato"),e.createElementVNode("p",{class:"text-neutral-lighter text-sm"},"Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.")],-1),je={key:5,class:"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4"},qe={key:0,class:"m-0 flex flex-col gap-5"},Le={class:"text-neutral-lighter"},Me={key:0},$e={key:1},Ue={key:2},ze={class:"flex flex-col gap-6"},Pe=e.defineComponent({__name:"ElMobileTable",props:{color:{},filters:{},loading:{type:Boolean},preventDefaultItemClick:{type:Boolean},selection:{},sortBy:{},itemsCountLabel:{type:Function},noItemsCountLabel:{type:Boolean},data:{}},emits:["destructive:click","bulk:click","item:click","selection:exit","rows-selected","filters-updated"],setup(H,{expose:J,emit:K}){var A,F,S,I,D,O,j,q,L,M,$,U,z,P;const t=H,f=e.ref(""),u=e.ref([]),m=e.ref(null),V=e.ref(!1),v=e.ref(0),B=e.ref(void 0);e.watch(f,(l,o)=>{B.value&&clearTimeout(B.value),B.value=setTimeout(()=>{o!==l&&R()},500)});const Q=e.computed(()=>f.value.trim().length>0||Object.values(s.value).some(l=>l&&l.trim().length>0)||v.value!==0),C=()=>u.value.map(l=>t.data[l]),y=l=>{var r;const o=(r=f.value)==null?void 0:r.trim();return o?l.split(" ").some(n=>n.toLowerCase().includes(o.toLowerCase())):!0},s=e.ref({avatar:((F=(A=t.filters.multiValue)==null?void 0:A.avatar)==null?void 0:F.initialValue)??"",mainText:((I=(S=t.filters.multiValue)==null?void 0:S.mainText)==null?void 0:I.initialValue)??"",secondaryRow:((O=(D=t.filters.multiValue)==null?void 0:D.secondaryRow)==null?void 0:O.initialValue)??"",tertiaryRow:((q=(j=t.filters.multiValue)==null?void 0:j.tertiaryRow)==null?void 0:q.initialValue)??"",amount:((M=(L=t.filters.multiValue)==null?void 0:L.amount)==null?void 0:M.initialValue)??"",tags:((U=($=t.filters.multiValue)==null?void 0:$.tags)==null?void 0:U.initialValue)??"",time:((P=(z=t.filters.multiValue)==null?void 0:z.time)==null?void 0:P.initialValue)??""}),h=e.ref({...s.value}),g=l=>Array.from(new Set(l)),b=l=>l!==void 0,W=e.computed(()=>{var l,o,r,n,c,p,i;return{mainText:(l=t.filters.multiValue)!=null&&l.mainText?t.filters.multiValue.mainText.selectOptions??g(t.data.map(a=>a.mainText.label)).map(a=>({value:a,label:a})):[],secondaryRow:(o=t.filters.multiValue)!=null&&o.secondaryRow?t.filters.multiValue.secondaryRow.selectOptions??g(t.data.map(a=>a.secondaryRow).filter(b)).map(a=>({value:a,label:a})):[],tertiaryRow:(r=t.filters.multiValue)!=null&&r.tertiaryRow?t.filters.multiValue.tertiaryRow.selectOptions??g(t.data.map(a=>a.tertiaryRow).filter(b)).map(a=>({value:a,label:a})):[],amount:(n=t.filters.multiValue)!=null&&n.amount?t.filters.multiValue.amount.selectOptions??g(t.data.map(a=>a.amount).filter(b)).map(a=>({value:a,label:a})):[],tags:(c=t.filters.multiValue)!=null&&c.tags?t.filters.multiValue.tags.selectOptions??g(t.data.flatMap(a=>(a.tags??[]).map(d=>d.text).filter(b))).map(a=>({value:a,label:a})):[],time:(p=t.filters.multiValue)!=null&&p.time?t.filters.multiValue.time.selectOptions??g(t.data.map(a=>a.time).filter(b)).map(a=>({value:a,label:a})):[],avatar:(i=t.filters.multiValue)!=null&&i.avatar?t.filters.multiValue.avatar.selectOptions??g(t.data.map(a=>{var d;return(d=a.avatar)==null?void 0:d.label}).filter(b)).map(a=>({value:a,label:a})):[]}}),_=e.computed(()=>{var o;let l=t.data.slice();if(t.filters.managed)return l;if(t.filters.freeSearch&&f.value.trim().length>0){const r=t.filters.freeSearch;l=l.filter(n=>r.filterOn.some(c=>{switch(c){case"avatar":return n.avatar&&n.avatar.label&&y(n.avatar.label);case"time":return n.time&&y(n.time);case"mainText":return n.mainText&&y(n.mainText.label);case"secondaryRow":return n.secondaryRow&&y(n.secondaryRow);case"tertiaryRow":return n.tertiaryRow&&y(n.tertiaryRow);case"amount":return n.amount&&y(n.amount);case"tags":return n.tags&&n.tags.some(p=>y(p.text))}}))}return t.filters.multiValue&&(t.filters.multiValue.mainText&&(l=l.filter(r=>!s.value.mainText||s.value.mainText.length===0||s.value.mainText.includes(r.sortableAndFilterableValue??r.mainText.label))),t.filters.multiValue.secondaryRow&&(l=l.filter(r=>!s.value.secondaryRow||s.value.secondaryRow.length===0||s.value.secondaryRow.includes(r.sortableAndFilterableValue??r.secondaryRow??""))),t.filters.multiValue.tertiaryRow&&(l=l.filter(r=>!s.value.tertiaryRow||s.value.tertiaryRow.length===0||s.value.tertiaryRow.includes(r.sortableAndFilterableValue??r.tertiaryRow??""))),t.filters.multiValue.amount&&(l=l.filter(r=>!s.value.amount||s.value.amount.length===0||s.value.amount.includes(r.sortableAndFilterableValue??r.amount??""))),t.filters.multiValue.tags&&(l=l.filter(r=>{var n;return!s.value.tags||s.value.tags.length===0||((n=r.tags)==null?void 0:n.some(c=>s.value.tags.includes(c.text)))})),t.filters.multiValue.avatar&&(l=l.filter(r=>{var n;return!s.value.avatar||s.value.avatar.length===0||s.value.avatar.includes(r.sortableAndFilterableValue??((n=r.avatar)==null?void 0:n.label)??"")}))),(o=t.filters.dateRange)!=null&&o.enabled&&(l=l.filter(r=>v.value?r.time&&new Date(r.time).getTime()>=v.value:!0)),t.sortBy&&(l=l.sort((r,n)=>{var p,i,a,d,w;let c=0;if(r.sortableAndFilterableValue&&n.sortableAndFilterableValue)c=r.sortableAndFilterableValue.localeCompare(n.sortableAndFilterableValue);else switch(t.sortBy.on){case"mainText":c=r.mainText.label.localeCompare(n.mainText.label);break;case"avatar":c=(((p=r.avatar)==null?void 0:p.label)??"").localeCompare(((i=n.avatar)==null?void 0:i.label)??"");break;case"time":case"secondaryRow":case"tertiaryRow":c=(r[t.sortBy.on]??"").localeCompare(n[t.sortBy.on]??"");break;case"amount":const me=parseFloat(r.amount??"0"),pe=parseFloat(n.amount??"0");c=me-pe;break;case"tags":c=(((a=r.tags)==null?void 0:a.map(E=>E.text).join(""))??"").localeCompare(((d=n.tags)==null?void 0:d.map(E=>E.text).join(""))??"");break}return((w=t.sortBy)==null?void 0:w.order)==="desc"&&(c*=-1),c})),l}),X=e.computed(()=>Object.fromEntries(Object.entries(t.filters.multiValue??{}).filter(([l,o])=>o.enabled))),Y=e.computed(()=>{var l;return((l=t.filters.dateRange)==null?void 0:l.enabled)||Object.values(t.filters.multiValue??{}).some(o=>o.enabled)}),Z=e.computed(()=>Object.values(s.value).some(l=>l.length>0)||v.value!==0),ee=l=>{var r;const o=l.map(n=>x({id:n}));((r=t.selection)==null?void 0:r.selectionMode)==="single"&&o.length>0&&(u.value=[o.at(0)]),u.value.push(...o),u.value=Array.from(new Set(u.value))},te=l=>{var o;((o=t.selection)==null?void 0:o.selectionMode)==="single"?u.value=[l]:(u.value.push(l),u.value=Array.from(new Set(u.value))),T("rows-selected",C())},le=l=>{u.value=u.value.filter(o=>o!==l)},x=l=>{const o=t.data.findIndex(r=>r.id===l.id);if(o===-1)throw new Error(`Item with id ${l.id} not found`);return o},ae=()=>{u.value=[]},re=()=>t.data,oe=()=>{V.value=!0},ne=l=>{m.value=l},k=()=>{m.value=null},ie=e.computed(()=>{var l;return(l=m.value)!=null&&l.actions?m.value.actions.primary:{label:"Chiudi",onClick:k}}),se=e.computed(()=>{var l,o,r,n;return(o=(l=m.value)==null?void 0:l.actions)!=null&&o.secondary?m.value.actions.secondary:(n=(r=m.value)==null?void 0:r.actions)!=null&&n.primary?{label:"Chiudi",onClick:k}:void 0}),ue=e.computed(()=>{var l,o;if((o=(l=m.value)==null?void 0:l.actions)!=null&&o.secondary)return{label:"Chiudi",onClick:k}}),ce=()=>{V.value=!1,s.value={...h.value},R()},de=()=>{s.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},v.value=0,h.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},R()},R=()=>{t.filters.managed&&T("filters-updated",{freeSearch:t.filters.freeSearch?f.value:void 0,fromDate:t.filters.dateRange?v.value:void 0,multiSelect:s.value})},T=K;return J({filteredData:_,selectRows:ee,unselectAllRows:ae,getDataRows:re,getSelectedRows:C,closeItemDetails:k}),(l,o)=>{var r,n,c,p;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",we,[(r=t.selection)!=null&&r.enabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("div",Ce,[t.filters.freeSearch?(e.openBlock(),e.createBlock(fe.default,{key:0,modelValue:f.value,"onUpdate:modelValue":o[0]||(o[0]=i=>f.value=i),placeholder:t.filters.freeSearch.placeholder??"Cerca","leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","placeholder"])):e.createCommentVNode("",!0)]),Y.value?(e.openBlock(),e.createBlock(ye.default,{key:0,badge:Z.value,"badge-color":t.color,icon:{name:"AdjustmentsVerticalIcon"},class:e.normalizeClass(t.color==="primary"?"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active":"text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active"),onClick:oe},null,8,["badge","badge-color","class"])):e.createCommentVNode("",!0)])),(n=t.selection)!=null&&n.enabled?(e.openBlock(),e.createElementBlock("div",Re,[e.createElementVNode("div",Ee,[e.createVNode(N.default,{error:"",variant:"tertiary",type:"button",label:`Elimina (${u.value.length})`,onClick:o[1]||(o[1]=i=>l.$emit("destructive:click",C()))},null,8,["label"])]),e.createElementVNode("div",Ne,[e.createElementVNode("span",Te,[t.selection.selectedLabel?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.selection.selectedLabel(u.value.length)),1)],64)):t.selection.selectionMode!=="single"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(u.value.length)+" Selezionati",1)],64)):e.createCommentVNode("",!0)])])])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default"),e.createVNode(ke.default,{name:"fade"},{default:e.withCtx(()=>[e.createElementVNode("div",Ae,[t.loading?(e.openBlock(),e.createBlock(he.default,{key:0,label:"Caricamento dati...",class:"p-4 absolute bg-neutral-surface w-full","extra-loading-msg-after-seconds":3})):e.createCommentVNode("",!0)])]),_:1}),Q.value&&l.noItemsCountLabel!==!0&&_.value.length!==0?(e.openBlock(),e.createElementBlock("div",Fe,[e.createElementVNode("span",Se,e.toDisplayString(t.itemsCountLabel?t.itemsCountLabel(_.value.length):`${_.value.length} risultati per la tua ricerca`),1)])):e.createCommentVNode("",!0),_.value.length>0?(e.openBlock(),e.createElementBlock("ul",Ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,i=>{var a;return e.openBlock(),e.createBlock(ve.default,e.mergeProps({ref_for:!0},i,{key:i.id,color:t.color,"model-value":(a=t.selection)!=null&&a.enabled?u.value.includes(x(i)):void 0,"onUpdate:modelValue":d=>d?te(x(i)):le(x(i)),onClick:()=>{var d;l.$emit("item:click",i),!((d=t.selection)!=null&&d.enabled)&&!t.preventDefaultItemClick&&ne(i)}}),null,16,["color","model-value","onUpdate:modelValue","onClick"])}),128)),e.renderSlot(l.$slots,"after-list")])):!t.loading&&_.value.length===0?(e.openBlock(),e.createElementBlock("div",De,[e.createVNode(xe.default,{name:"MagnifyingGlassIcon",class:e.normalizeClass(["h-8 w-8",t.color==="primary"?"text-primary-active":"text-secondary-active"])},null,8,["class"]),Oe])):e.createCommentVNode("",!0),(c=t.selection)!=null&&c.enabled?(e.openBlock(),e.createElementBlock("div",je,[e.createVNode(N.default,{size:"l",variant:"tertiary",label:"Annulla",onClick:o[2]||(o[2]=i=>l.$emit("selection:exit"))}),(p=t.selection)!=null&&p.bulkActionButton?(e.openBlock(),e.createBlock(N.default,{key:0,variant:t.color,label:t.selection.bulkActionButton.label(u.value.length),disabled:u.value.length===0,size:"l",onClick:o[3]||(o[3]=i=>l.$emit("bulk:click",u.value.map(a=>t.data[a])))},null,8,["variant","label","disabled"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),e.createVNode(G.default,{size:"xs","is-open":m.value!==null,"header-icon":{name:"AdjustmentsVerticalIcon"},title:"Dettaglio",color:t.color,"primary-action":ie.value,"secondary-action":se.value,"tertiary-action":ue.value,onClosed:k},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("ul",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.details,(i,a)=>(e.openBlock(),e.createElementBlock("li",{key:a,class:"flex flex-col gap-1"},[e.createElementVNode("span",Le,e.toDisplayString(i.label),1),i.value.type==="default"?(e.openBlock(),e.createElementBlock("span",Me,e.toDisplayString(i.value.text),1)):i.value.type==="tag"?(e.openBlock(),e.createElementBlock("div",$e,[e.createVNode(ge.default,{text:i.value.text,color:i.value.color},null,8,["text","color"])])):i.value.type==="avatar"?(e.openBlock(),e.createElementBlock("div",Ue,[e.createVNode(Ve.default,{label:i.value.label,picture:i.value.picture,size:"sm"},null,8,["label","picture"])])):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)]),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"]),e.createVNode(G.default,{"is-open":V.value,"onUpdate:isOpen":o[5]||(o[5]=i=>V.value=i),size:"xs","header-icon":{name:"AdjustmentsVerticalIcon"},title:"Filtri",color:t.color,"primary-action":{label:"Applica filtri",onClick:ce},"secondary-action":t.filters.resetButton?{label:"Reset",onClick:de}:void 0,"tertiary-action":{label:"Chiudi",onClick:()=>{V.value=!1}}},{default:e.withCtx(()=>{var i;return[e.createElementVNode("div",ze,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(X.value,(a,d)=>(e.openBlock(),e.createBlock(_e.default,{key:d,modelValue:h.value[d],"onUpdate:modelValue":w=>h.value[d]=w,options:W.value[d],label:a.label},null,8,["modelValue","onUpdate:modelValue","options","label"]))),128)),(i=t.filters.dateRange)!=null&&i.enabled?(e.openBlock(),e.createBlock(be.default,{key:0,modelValue:v.value,"onUpdate:modelValue":o[4]||(o[4]=a=>v.value=a),label:t.filters.dateRange.label,placeholder:t.filters.dateRange.placeholder,"hidden-error-message":""},null,8,["modelValue","label","placeholder"])):e.createCommentVNode("",!0)])]}),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"])],64)}}});exports.default=Pe;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ve=require("../ElListItem.vue.cjs2.js"),fe=require("../forms/ElInputText.vue.cjs2.js"),ye=require("../ElIconButton.vue.cjs2.js"),T=require("../ElButton.vue.cjs2.js"),ge=require("../ElTag.vue.cjs2.js"),G=require("../ElModal.vue.cjs2.js"),be=require("../forms/ElInputSelect.vue.cjs2.js"),_e=require("../forms/ElInputDate.vue.cjs2.js"),Ve=require("../ElAvatar.vue.cjs2.js"),ke=require("../_CustomTransition.vue.cjs2.js"),he=require("../ElSpinner.vue.cjs2.js"),we={class:"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto"},xe={key:0,class:"flex flex-row items-center gap-4 pb-2"},Be={class:"flex-grow"},Ce={key:1,class:"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3"},Re={class:"flex flex-row justify-start items-center"},Ee={class:"flex flex-row justify-center items-center"},Te={class:"text-neutral-darker font-normal text-sm"},Ne={class:"relative"},Ae={key:2,class:"pt-3 px-4"},Fe={class:"font-semibold text-neutral-darker"},Se={key:3,class:"m-0 flex flex-col flex-grow overflow-y-auto h-full"},Ie={key:5,class:"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4"},De={key:0,class:"m-0 flex flex-col gap-5"},Oe={class:"text-neutral-lighter"},je={key:0},qe={key:1},Le={key:2},$e={class:"flex flex-col gap-6"},Me=e.defineComponent({__name:"ElMobileTable",props:{color:{},filters:{},loading:{type:Boolean},preventDefaultItemClick:{type:Boolean},selection:{},sortBy:{},itemsCountLabel:{type:Function},noItemsCountLabel:{type:Boolean},data:{}},emits:["destructive:click","bulk:click","item:click","selection:exit","rows-selected","filters-updated"],setup(H,{expose:J,emit:K}){var A,F,S,I,D,O,j,q,L,$,M,U,z,P;const t=H,f=e.ref(""),u=e.ref([]),m=e.ref(null),V=e.ref(!1),v=e.ref(0),B=e.ref(void 0);e.watch(f,(l,o)=>{B.value&&clearTimeout(B.value),B.value=setTimeout(()=>{o!==l&&R()},500)});const Q=e.computed(()=>f.value.trim().length>0||Object.values(s.value).some(l=>l&&l.trim().length>0)||v.value!==0),C=()=>u.value.map(l=>t.data[l]),y=l=>{var r;const o=(r=f.value)==null?void 0:r.trim();return o?l.split(" ").some(n=>n.toLowerCase().includes(o.toLowerCase())):!0},s=e.ref({avatar:((F=(A=t.filters.multiValue)==null?void 0:A.avatar)==null?void 0:F.initialValue)??"",mainText:((I=(S=t.filters.multiValue)==null?void 0:S.mainText)==null?void 0:I.initialValue)??"",secondaryRow:((O=(D=t.filters.multiValue)==null?void 0:D.secondaryRow)==null?void 0:O.initialValue)??"",tertiaryRow:((q=(j=t.filters.multiValue)==null?void 0:j.tertiaryRow)==null?void 0:q.initialValue)??"",amount:(($=(L=t.filters.multiValue)==null?void 0:L.amount)==null?void 0:$.initialValue)??"",tags:((U=(M=t.filters.multiValue)==null?void 0:M.tags)==null?void 0:U.initialValue)??"",time:((P=(z=t.filters.multiValue)==null?void 0:z.time)==null?void 0:P.initialValue)??""}),h=e.ref({...s.value}),g=l=>Array.from(new Set(l)),_=l=>l!==void 0,W=e.computed(()=>{var l,o,r,n,c,p,i;return{mainText:(l=t.filters.multiValue)!=null&&l.mainText?t.filters.multiValue.mainText.selectOptions??g(t.data.map(a=>a.mainText.label)).map(a=>({value:a,label:a})):[],secondaryRow:(o=t.filters.multiValue)!=null&&o.secondaryRow?t.filters.multiValue.secondaryRow.selectOptions??g(t.data.map(a=>a.secondaryRow).filter(_)).map(a=>({value:a,label:a})):[],tertiaryRow:(r=t.filters.multiValue)!=null&&r.tertiaryRow?t.filters.multiValue.tertiaryRow.selectOptions??g(t.data.map(a=>a.tertiaryRow).filter(_)).map(a=>({value:a,label:a})):[],amount:(n=t.filters.multiValue)!=null&&n.amount?t.filters.multiValue.amount.selectOptions??g(t.data.map(a=>a.amount).filter(_)).map(a=>({value:a,label:a})):[],tags:(c=t.filters.multiValue)!=null&&c.tags?t.filters.multiValue.tags.selectOptions??g(t.data.flatMap(a=>(a.tags??[]).map(d=>d.text).filter(_))).map(a=>({value:a,label:a})):[],time:(p=t.filters.multiValue)!=null&&p.time?t.filters.multiValue.time.selectOptions??g(t.data.map(a=>a.time).filter(_)).map(a=>({value:a,label:a})):[],avatar:(i=t.filters.multiValue)!=null&&i.avatar?t.filters.multiValue.avatar.selectOptions??g(t.data.map(a=>{var d;return(d=a.avatar)==null?void 0:d.label}).filter(_)).map(a=>({value:a,label:a})):[]}}),b=e.computed(()=>{var o;let l=t.data.slice();if(t.filters.managed)return l;if(t.filters.freeSearch&&f.value.trim().length>0){const r=t.filters.freeSearch;l=l.filter(n=>r.filterOn.some(c=>{switch(c){case"avatar":return n.avatar&&n.avatar.label&&y(n.avatar.label);case"time":return n.time&&y(n.time);case"mainText":return n.mainText&&y(n.mainText.label);case"secondaryRow":return n.secondaryRow&&y(n.secondaryRow);case"tertiaryRow":return n.tertiaryRow&&y(n.tertiaryRow);case"amount":return n.amount&&y(n.amount);case"tags":return n.tags&&n.tags.some(p=>y(p.text))}}))}return t.filters.multiValue&&(t.filters.multiValue.mainText&&(l=l.filter(r=>!s.value.mainText||s.value.mainText.length===0||s.value.mainText.includes(r.sortableAndFilterableValue??r.mainText.label))),t.filters.multiValue.secondaryRow&&(l=l.filter(r=>!s.value.secondaryRow||s.value.secondaryRow.length===0||s.value.secondaryRow.includes(r.sortableAndFilterableValue??r.secondaryRow??""))),t.filters.multiValue.tertiaryRow&&(l=l.filter(r=>!s.value.tertiaryRow||s.value.tertiaryRow.length===0||s.value.tertiaryRow.includes(r.sortableAndFilterableValue??r.tertiaryRow??""))),t.filters.multiValue.amount&&(l=l.filter(r=>!s.value.amount||s.value.amount.length===0||s.value.amount.includes(r.sortableAndFilterableValue??r.amount??""))),t.filters.multiValue.tags&&(l=l.filter(r=>{var n;return!s.value.tags||s.value.tags.length===0||((n=r.tags)==null?void 0:n.some(c=>s.value.tags.includes(c.text)))})),t.filters.multiValue.avatar&&(l=l.filter(r=>{var n;return!s.value.avatar||s.value.avatar.length===0||s.value.avatar.includes(r.sortableAndFilterableValue??((n=r.avatar)==null?void 0:n.label)??"")}))),(o=t.filters.dateRange)!=null&&o.enabled&&(l=l.filter(r=>v.value?r.time&&new Date(r.time).getTime()>=v.value:!0)),t.sortBy&&(l=l.sort((r,n)=>{var p,i,a,d,x;let c=0;if(r.sortableAndFilterableValue&&n.sortableAndFilterableValue)c=r.sortableAndFilterableValue.localeCompare(n.sortableAndFilterableValue);else switch(t.sortBy.on){case"mainText":c=r.mainText.label.localeCompare(n.mainText.label);break;case"avatar":c=(((p=r.avatar)==null?void 0:p.label)??"").localeCompare(((i=n.avatar)==null?void 0:i.label)??"");break;case"time":case"secondaryRow":case"tertiaryRow":c=(r[t.sortBy.on]??"").localeCompare(n[t.sortBy.on]??"");break;case"amount":const me=parseFloat(r.amount??"0"),pe=parseFloat(n.amount??"0");c=me-pe;break;case"tags":c=(((a=r.tags)==null?void 0:a.map(E=>E.text).join(""))??"").localeCompare(((d=n.tags)==null?void 0:d.map(E=>E.text).join(""))??"");break}return((x=t.sortBy)==null?void 0:x.order)==="desc"&&(c*=-1),c})),l}),X=e.computed(()=>Object.fromEntries(Object.entries(t.filters.multiValue??{}).filter(([l,o])=>o.enabled))),Y=e.computed(()=>{var l;return((l=t.filters.dateRange)==null?void 0:l.enabled)||Object.values(t.filters.multiValue??{}).some(o=>o.enabled)}),Z=e.computed(()=>Object.values(s.value).some(l=>l.length>0)||v.value!==0),ee=l=>{var r;const o=l.map(n=>w({id:n}));((r=t.selection)==null?void 0:r.selectionMode)==="single"&&o.length>0&&(u.value=[o.at(0)]),u.value.push(...o),u.value=Array.from(new Set(u.value))},te=l=>{var o;((o=t.selection)==null?void 0:o.selectionMode)==="single"?u.value=[l]:(u.value.push(l),u.value=Array.from(new Set(u.value))),N("rows-selected",C())},le=l=>{u.value=u.value.filter(o=>o!==l)},w=l=>{const o=t.data.findIndex(r=>r.id===l.id);if(o===-1)throw new Error(`Item with id ${l.id} not found`);return o},ae=()=>{u.value=[]},re=()=>t.data,oe=()=>{V.value=!0},ne=l=>{m.value=l},k=()=>{m.value=null},ie=e.computed(()=>{var l;return(l=m.value)!=null&&l.actions?m.value.actions.primary:{label:"Chiudi",onClick:k}}),se=e.computed(()=>{var l,o,r,n;return(o=(l=m.value)==null?void 0:l.actions)!=null&&o.secondary?m.value.actions.secondary:(n=(r=m.value)==null?void 0:r.actions)!=null&&n.primary?{label:"Chiudi",onClick:k}:void 0}),ue=e.computed(()=>{var l,o;if((o=(l=m.value)==null?void 0:l.actions)!=null&&o.secondary)return{label:"Chiudi",onClick:k}}),ce=()=>{V.value=!1,s.value={...h.value},R()},de=()=>{s.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},v.value=0,h.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},R()},R=()=>{t.filters.managed&&N("filters-updated",{freeSearch:t.filters.freeSearch?f.value:void 0,fromDate:t.filters.dateRange?v.value:void 0,multiSelect:s.value})},N=K;return J({filteredData:b,selectRows:ee,unselectAllRows:ae,getDataRows:re,getSelectedRows:C,closeItemDetails:k}),(l,o)=>{var r,n,c,p;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",we,[(r=t.selection)!=null&&r.enabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",xe,[e.createElementVNode("div",Be,[t.filters.freeSearch?(e.openBlock(),e.createBlock(fe.default,{key:0,modelValue:f.value,"onUpdate:modelValue":o[0]||(o[0]=i=>f.value=i),placeholder:t.filters.freeSearch.placeholder??"Cerca","leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","placeholder"])):e.createCommentVNode("",!0)]),Y.value?(e.openBlock(),e.createBlock(ye.default,{key:0,badge:Z.value,"badge-color":t.color,icon:{name:"AdjustmentsVerticalIcon"},class:e.normalizeClass(t.color==="primary"?"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active":"text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active"),onClick:oe},null,8,["badge","badge-color","class"])):e.createCommentVNode("",!0)])),(n=t.selection)!=null&&n.enabled?(e.openBlock(),e.createElementBlock("div",Ce,[e.createElementVNode("div",Re,[e.createVNode(T.default,{error:"",variant:"tertiary",type:"button",label:`Elimina (${u.value.length})`,onClick:o[1]||(o[1]=i=>l.$emit("destructive:click",C()))},null,8,["label"])]),e.createElementVNode("div",Ee,[e.createElementVNode("span",Te,[t.selection.selectedLabel?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.selection.selectedLabel(u.value.length)),1)],64)):t.selection.selectionMode!=="single"?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(u.value.length)+" Selezionati",1)],64)):e.createCommentVNode("",!0)])])])):e.createCommentVNode("",!0),e.renderSlot(l.$slots,"default"),e.createVNode(ke.default,{name:"fade"},{default:e.withCtx(()=>[e.createElementVNode("div",Ne,[t.loading?(e.openBlock(),e.createBlock(he.default,{key:0,label:"Caricamento dati...",class:"p-4 absolute bg-neutral-surface w-full","extra-loading-msg-after-seconds":3})):e.createCommentVNode("",!0)])]),_:1}),Q.value&&l.noItemsCountLabel!==!0&&b.value.length!==0?(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("span",Fe,e.toDisplayString(t.itemsCountLabel?t.itemsCountLabel(b.value.length):`${b.value.length} risultati per la tua ricerca`),1)])):e.createCommentVNode("",!0),b.value.length>0?(e.openBlock(),e.createElementBlock("ul",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,i=>{var a;return e.openBlock(),e.createBlock(ve.default,e.mergeProps({ref_for:!0},i,{key:i.id,color:t.color,"model-value":(a=t.selection)!=null&&a.enabled?u.value.includes(w(i)):void 0,"onUpdate:modelValue":d=>d?te(w(i)):le(w(i)),onClick:()=>{var d;l.$emit("item:click",i),!((d=t.selection)!=null&&d.enabled)&&!t.preventDefaultItemClick&&ne(i)}}),null,16,["color","model-value","onUpdate:modelValue","onClick"])}),128)),e.renderSlot(l.$slots,"after-list")])):!t.loading&&b.value.length===0?e.renderSlot(l.$slots,"no-data-message",{key:4}):e.createCommentVNode("",!0),(c=t.selection)!=null&&c.enabled?(e.openBlock(),e.createElementBlock("div",Ie,[e.createVNode(T.default,{size:"l",variant:"tertiary",label:"Annulla",onClick:o[2]||(o[2]=i=>l.$emit("selection:exit"))}),(p=t.selection)!=null&&p.bulkActionButton?(e.openBlock(),e.createBlock(T.default,{key:0,variant:t.color,label:t.selection.bulkActionButton.label(u.value.length),disabled:u.value.length===0,size:"l",onClick:o[3]||(o[3]=i=>l.$emit("bulk:click",u.value.map(a=>t.data[a])))},null,8,["variant","label","disabled"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),e.createVNode(G.default,{size:"xs","is-open":m.value!==null,"header-icon":{name:"AdjustmentsVerticalIcon"},title:"Dettaglio",color:t.color,"primary-action":ie.value,"secondary-action":se.value,"tertiary-action":ue.value,onClosed:k},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("ul",De,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value.details,(i,a)=>(e.openBlock(),e.createElementBlock("li",{key:a,class:"flex flex-col gap-1"},[e.createElementVNode("span",Oe,e.toDisplayString(i.label),1),i.value.type==="default"?(e.openBlock(),e.createElementBlock("span",je,e.toDisplayString(i.value.text),1)):i.value.type==="tag"?(e.openBlock(),e.createElementBlock("div",qe,[e.createVNode(ge.default,{text:i.value.text,color:i.value.color},null,8,["text","color"])])):i.value.type==="avatar"?(e.openBlock(),e.createElementBlock("div",Le,[e.createVNode(Ve.default,{label:i.value.label,picture:i.value.picture,size:"sm"},null,8,["label","picture"])])):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)]),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"]),e.createVNode(G.default,{"is-open":V.value,"onUpdate:isOpen":o[5]||(o[5]=i=>V.value=i),size:"xs","header-icon":{name:"AdjustmentsVerticalIcon"},title:"Filtri",color:t.color,"primary-action":{label:"Applica filtri",onClick:ce},"secondary-action":t.filters.resetButton?{label:"Reset",onClick:de}:void 0,"tertiary-action":{label:"Chiudi",onClick:()=>{V.value=!1}}},{default:e.withCtx(()=>{var i;return[e.createElementVNode("div",$e,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(X.value,(a,d)=>(e.openBlock(),e.createBlock(be.default,{key:d,modelValue:h.value[d],"onUpdate:modelValue":x=>h.value[d]=x,options:W.value[d],label:a.label},null,8,["modelValue","onUpdate:modelValue","options","label"]))),128)),(i=t.filters.dateRange)!=null&&i.enabled?(e.openBlock(),e.createBlock(_e.default,{key:0,modelValue:v.value,"onUpdate:modelValue":o[4]||(o[4]=a=>v.value=a),label:t.filters.dateRange.label,placeholder:t.filters.dateRange.placeholder,"hidden-error-message":""},null,8,["modelValue","label","placeholder"])):e.createCommentVNode("",!0)])]}),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"])],64)}}});exports.default=Me;
2
2
  //# sourceMappingURL=ElMobileTable.vue.cjs2.js.map
package/dist/src/table/ElMobileTable.vue.cjs2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElMobileTable.vue.cjs2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n | { type?: 'default'; text: string }\n | { type: 'tag'; text: string; color?: ElTagColor }\n | { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' | 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' | 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n order: 'asc' | 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 ||\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText ||\n multiValueFiltersValues.value.mainText.length === 0 ||\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow ||\n multiValueFiltersValues.value.secondaryRow.length === 0 ||\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow ||\n multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount ||\n multiValueFiltersValues.value.amount.length === 0 ||\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags ||\n multiValueFiltersValues.value.tags.length === 0 ||\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar ||\n multiValueFiltersValues.value.avatar.length === 0 ||\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","a","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
1
+ {"version":3,"file":"ElMobileTable.vue.cjs2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n | { type?: 'default'; text: string }\n | { type: 'tag'; text: string; color?: ElTagColor }\n | { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' | 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' | 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n order: 'asc' | 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 ||\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText ||\n multiValueFiltersValues.value.mainText.length === 0 ||\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow ||\n multiValueFiltersValues.value.secondaryRow.length === 0 ||\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow ||\n multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount ||\n multiValueFiltersValues.value.amount.length === 0 ||\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags ||\n multiValueFiltersValues.value.tags.length === 0 ||\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar ||\n multiValueFiltersValues.value.avatar.length === 0 ||\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <slot v-else-if=\"!props.loading && filteredData.length === 0\" name=\"no-data-message\" />\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","a","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
package/dist/src/table/ElMobileTable.vue.esm2.js CHANGED
@@ -1,2 +1,2 @@
1
- import{defineComponent as Te,ref as h,watch as Fe,computed as y,openBlock as n,createElementBlock as m,Fragment as A,createElementVNode as v,createBlock as R,createCommentVNode as f,normalizeClass as le,createVNode as x,createTextVNode as ae,toDisplayString as $,renderSlot as re,withCtx as M,renderList as U,mergeProps as $e}from"vue";import Se from"../ElListItem.vue.esm2.js";import Be from"../forms/ElInputText.vue.esm2.js";import Ie from"../ElIconButton.vue.esm2.js";import z from"../ElButton.vue.esm2.js";import Oe from"../ElTag.vue.esm2.js";import oe from"../ElModal.vue.esm2.js";import je from"../forms/ElInputSelect.vue.esm2.js";import De from"../forms/ElInputDate.vue.esm2.js";import Le from"../ElAvatar.vue.esm2.js";import Me from"../_CustomTransition.vue.esm2.js";import Ue from"../ElSpinner.vue.esm2.js";import ze from"../ElIcon.vue.esm2.js";const Ee={class:"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto"},Ne={key:0,class:"flex flex-row items-center gap-4 pb-2"},Pe={class:"flex-grow"},qe={key:1,class:"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3"},Ge={class:"flex flex-row justify-start items-center"},He={class:"flex flex-row justify-center items-center"},Je={class:"text-neutral-darker font-normal text-sm"},Ke={class:"relative"},Qe={key:2,class:"pt-3 px-4"},We={class:"font-semibold text-neutral-darker"},Xe={key:3,class:"m-0 flex flex-col flex-grow overflow-y-auto h-full"},Ye={key:4,class:"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3"},Ze=v("div",{class:"flex flex-col gap-1 text-center"},[v("span",{class:"text-lg font-semibold text-neutral-darker"},"Nessun risultato"),v("p",{class:"text-neutral-lighter text-sm"},"Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.")],-1),et={key:5,class:"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4"},tt={key:0,class:"m-0 flex flex-col gap-5"},lt={class:"text-neutral-lighter"},at={key:0},rt={key:1},ot={key:2},it={class:"flex flex-col gap-6"},xt=Te({__name:"ElMobileTable",props:{color:{},filters:{},loading:{type:Boolean},preventDefaultItemClick:{type:Boolean},selection:{},sortBy:{},itemsCountLabel:{type:Function},noItemsCountLabel:{type:Boolean},data:{}},emits:["destructive:click","bulk:click","item:click","selection:exit","rows-selected","filters-updated"],setup(ie,{expose:se,emit:ne}){var N,P,q,G,H,J,K,Q,W,X,Y,Z,ee,te;const e=ie,w=h(""),u=h([]),p=h(null),T=h(!1),g=h(0),O=h(void 0);Fe(w,(t,r)=>{O.value&&clearTimeout(O.value),O.value=setTimeout(()=>{r!==t&&D()},500)});const ue=y(()=>w.value.trim().length>0||Object.values(s.value).some(t=>t&&t.trim().length>0)||g.value!==0),j=()=>u.value.map(t=>e.data[t]),V=t=>{var a;const r=(a=w.value)==null?void 0:a.trim();return r?t.split(" ").some(o=>o.toLowerCase().includes(r.toLowerCase())):!0},s=h({avatar:((P=(N=e.filters.multiValue)==null?void 0:N.avatar)==null?void 0:P.initialValue)??"",mainText:((G=(q=e.filters.multiValue)==null?void 0:q.mainText)==null?void 0:G.initialValue)??"",secondaryRow:((J=(H=e.filters.multiValue)==null?void 0:H.secondaryRow)==null?void 0:J.initialValue)??"",tertiaryRow:((Q=(K=e.filters.multiValue)==null?void 0:K.tertiaryRow)==null?void 0:Q.initialValue)??"",amount:((X=(W=e.filters.multiValue)==null?void 0:W.amount)==null?void 0:X.initialValue)??"",tags:((Z=(Y=e.filters.multiValue)==null?void 0:Y.tags)==null?void 0:Z.initialValue)??"",time:((te=(ee=e.filters.multiValue)==null?void 0:ee.time)==null?void 0:te.initialValue)??""}),S=h({...s.value}),_=t=>Array.from(new Set(t)),C=t=>t!==void 0,ce=y(()=>{var t,r,a,o,c,b,i;return{mainText:(t=e.filters.multiValue)!=null&&t.mainText?e.filters.multiValue.mainText.selectOptions??_(e.data.map(l=>l.mainText.label)).map(l=>({value:l,label:l})):[],secondaryRow:(r=e.filters.multiValue)!=null&&r.secondaryRow?e.filters.multiValue.secondaryRow.selectOptions??_(e.data.map(l=>l.secondaryRow).filter(C)).map(l=>({value:l,label:l})):[],tertiaryRow:(a=e.filters.multiValue)!=null&&a.tertiaryRow?e.filters.multiValue.tertiaryRow.selectOptions??_(e.data.map(l=>l.tertiaryRow).filter(C)).map(l=>({value:l,label:l})):[],amount:(o=e.filters.multiValue)!=null&&o.amount?e.filters.multiValue.amount.selectOptions??_(e.data.map(l=>l.amount).filter(C)).map(l=>({value:l,label:l})):[],tags:(c=e.filters.multiValue)!=null&&c.tags?e.filters.multiValue.tags.selectOptions??_(e.data.flatMap(l=>(l.tags??[]).map(d=>d.text).filter(C))).map(l=>({value:l,label:l})):[],time:(b=e.filters.multiValue)!=null&&b.time?e.filters.multiValue.time.selectOptions??_(e.data.map(l=>l.time).filter(C)).map(l=>({value:l,label:l})):[],avatar:(i=e.filters.multiValue)!=null&&i.avatar?e.filters.multiValue.avatar.selectOptions??_(e.data.map(l=>{var d;return(d=l.avatar)==null?void 0:d.label}).filter(C)).map(l=>({value:l,label:l})):[]}}),k=y(()=>{var r;let t=e.data.slice();if(e.filters.managed)return t;if(e.filters.freeSearch&&w.value.trim().length>0){const a=e.filters.freeSearch;t=t.filter(o=>a.filterOn.some(c=>{switch(c){case"avatar":return o.avatar&&o.avatar.label&&V(o.avatar.label);case"time":return o.time&&V(o.time);case"mainText":return o.mainText&&V(o.mainText.label);case"secondaryRow":return o.secondaryRow&&V(o.secondaryRow);case"tertiaryRow":return o.tertiaryRow&&V(o.tertiaryRow);case"amount":return o.amount&&V(o.amount);case"tags":return o.tags&&o.tags.some(b=>V(b.text))}}))}return e.filters.multiValue&&(e.filters.multiValue.mainText&&(t=t.filter(a=>!s.value.mainText||s.value.mainText.length===0||s.value.mainText.includes(a.sortableAndFilterableValue??a.mainText.label))),e.filters.multiValue.secondaryRow&&(t=t.filter(a=>!s.value.secondaryRow||s.value.secondaryRow.length===0||s.value.secondaryRow.includes(a.sortableAndFilterableValue??a.secondaryRow??""))),e.filters.multiValue.tertiaryRow&&(t=t.filter(a=>!s.value.tertiaryRow||s.value.tertiaryRow.length===0||s.value.tertiaryRow.includes(a.sortableAndFilterableValue??a.tertiaryRow??""))),e.filters.multiValue.amount&&(t=t.filter(a=>!s.value.amount||s.value.amount.length===0||s.value.amount.includes(a.sortableAndFilterableValue??a.amount??""))),e.filters.multiValue.tags&&(t=t.filter(a=>{var o;return!s.value.tags||s.value.tags.length===0||((o=a.tags)==null?void 0:o.some(c=>s.value.tags.includes(c.text)))})),e.filters.multiValue.avatar&&(t=t.filter(a=>{var o;return!s.value.avatar||s.value.avatar.length===0||s.value.avatar.includes(a.sortableAndFilterableValue??((o=a.avatar)==null?void 0:o.label)??"")}))),(r=e.filters.dateRange)!=null&&r.enabled&&(t=t.filter(a=>g.value?a.time&&new Date(a.time).getTime()>=g.value:!0)),e.sortBy&&(t=t.sort((a,o)=>{var b,i,l,d,I;let c=0;if(a.sortableAndFilterableValue&&o.sortableAndFilterableValue)c=a.sortableAndFilterableValue.localeCompare(o.sortableAndFilterableValue);else switch(e.sortBy.on){case"mainText":c=a.mainText.label.localeCompare(o.mainText.label);break;case"avatar":c=(((b=a.avatar)==null?void 0:b.label)??"").localeCompare(((i=o.avatar)==null?void 0:i.label)??"");break;case"time":case"secondaryRow":case"tertiaryRow":c=(a[e.sortBy.on]??"").localeCompare(o[e.sortBy.on]??"");break;case"amount":const Ce=parseFloat(a.amount??"0"),Ae=parseFloat(o.amount??"0");c=Ce-Ae;break;case"tags":c=(((l=a.tags)==null?void 0:l.map(L=>L.text).join(""))??"").localeCompare(((d=o.tags)==null?void 0:d.map(L=>L.text).join(""))??"");break}return((I=e.sortBy)==null?void 0:I.order)==="desc"&&(c*=-1),c})),t}),de=y(()=>Object.fromEntries(Object.entries(e.filters.multiValue??{}).filter(([t,r])=>r.enabled))),me=y(()=>{var t;return((t=e.filters.dateRange)==null?void 0:t.enabled)||Object.values(e.filters.multiValue??{}).some(r=>r.enabled)}),fe=y(()=>Object.values(s.value).some(t=>t.length>0)||g.value!==0),ve=t=>{var a;const r=t.map(o=>B({id:o}));((a=e.selection)==null?void 0:a.selectionMode)==="single"&&r.length>0&&(u.value=[r.at(0)]),u.value.push(...r),u.value=Array.from(new Set(u.value))},pe=t=>{var r;((r=e.selection)==null?void 0:r.selectionMode)==="single"?u.value=[t]:(u.value.push(t),u.value=Array.from(new Set(u.value))),E("rows-selected",j())},be=t=>{u.value=u.value.filter(r=>r!==t)},B=t=>{const r=e.data.findIndex(a=>a.id===t.id);if(r===-1)throw new Error(`Item with id ${t.id} not found`);return r},ye=()=>{u.value=[]},ge=()=>e.data,he=()=>{T.value=!0},xe=t=>{p.value=t},F=()=>{p.value=null},we=y(()=>{var t;return(t=p.value)!=null&&t.actions?p.value.actions.primary:{label:"Chiudi",onClick:F}}),Ve=y(()=>{var t,r,a,o;return(r=(t=p.value)==null?void 0:t.actions)!=null&&r.secondary?p.value.actions.secondary:(o=(a=p.value)==null?void 0:a.actions)!=null&&o.primary?{label:"Chiudi",onClick:F}:void 0}),_e=y(()=>{var t,r;if((r=(t=p.value)==null?void 0:t.actions)!=null&&r.secondary)return{label:"Chiudi",onClick:F}}),ke=()=>{T.value=!1,s.value={...S.value},D()},Re=()=>{s.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},g.value=0,S.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},D()},D=()=>{e.filters.managed&&E("filters-updated",{freeSearch:e.filters.freeSearch?w.value:void 0,fromDate:e.filters.dateRange?g.value:void 0,multiSelect:s.value})},E=ne;return se({filteredData:k,selectRows:ve,unselectAllRows:ye,getDataRows:ge,getSelectedRows:j,closeItemDetails:F}),(t,r)=>{var a,o,c,b;return n(),m(A,null,[v("div",Ee,[(a=e.selection)!=null&&a.enabled?f("",!0):(n(),m("div",Ne,[v("div",Pe,[e.filters.freeSearch?(n(),R(Be,{key:0,modelValue:w.value,"onUpdate:modelValue":r[0]||(r[0]=i=>w.value=i),placeholder:e.filters.freeSearch.placeholder??"Cerca","leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","placeholder"])):f("",!0)]),me.value?(n(),R(Ie,{key:0,badge:fe.value,"badge-color":e.color,icon:{name:"AdjustmentsVerticalIcon"},class:le(e.color==="primary"?"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active":"text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active"),onClick:he},null,8,["badge","badge-color","class"])):f("",!0)])),(o=e.selection)!=null&&o.enabled?(n(),m("div",qe,[v("div",Ge,[x(z,{error:"",variant:"tertiary",type:"button",label:`Elimina (${u.value.length})`,onClick:r[1]||(r[1]=i=>t.$emit("destructive:click",j()))},null,8,["label"])]),v("div",He,[v("span",Je,[e.selection.selectedLabel?(n(),m(A,{key:0},[ae($(e.selection.selectedLabel(u.value.length)),1)],64)):e.selection.selectionMode!=="single"?(n(),m(A,{key:1},[ae($(u.value.length)+" Selezionati",1)],64)):f("",!0)])])])):f("",!0),re(t.$slots,"default"),x(Me,{name:"fade"},{default:M(()=>[v("div",Ke,[e.loading?(n(),R(Ue,{key:0,label:"Caricamento dati...",class:"p-4 absolute bg-neutral-surface w-full","extra-loading-msg-after-seconds":3})):f("",!0)])]),_:1}),ue.value&&t.noItemsCountLabel!==!0&&k.value.length!==0?(n(),m("div",Qe,[v("span",We,$(e.itemsCountLabel?e.itemsCountLabel(k.value.length):`${k.value.length} risultati per la tua ricerca`),1)])):f("",!0),k.value.length>0?(n(),m("ul",Xe,[(n(!0),m(A,null,U(k.value,i=>{var l;return n(),R(Se,$e({ref_for:!0},i,{key:i.id,color:e.color,"model-value":(l=e.selection)!=null&&l.enabled?u.value.includes(B(i)):void 0,"onUpdate:modelValue":d=>d?pe(B(i)):be(B(i)),onClick:()=>{var d;t.$emit("item:click",i),!((d=e.selection)!=null&&d.enabled)&&!e.preventDefaultItemClick&&xe(i)}}),null,16,["color","model-value","onUpdate:modelValue","onClick"])}),128)),re(t.$slots,"after-list")])):!e.loading&&k.value.length===0?(n(),m("div",Ye,[x(ze,{name:"MagnifyingGlassIcon",class:le(["h-8 w-8",e.color==="primary"?"text-primary-active":"text-secondary-active"])},null,8,["class"]),Ze])):f("",!0),(c=e.selection)!=null&&c.enabled?(n(),m("div",et,[x(z,{size:"l",variant:"tertiary",label:"Annulla",onClick:r[2]||(r[2]=i=>t.$emit("selection:exit"))}),(b=e.selection)!=null&&b.bulkActionButton?(n(),R(z,{key:0,variant:e.color,label:e.selection.bulkActionButton.label(u.value.length),disabled:u.value.length===0,size:"l",onClick:r[3]||(r[3]=i=>t.$emit("bulk:click",u.value.map(l=>e.data[l])))},null,8,["variant","label","disabled"])):f("",!0)])):f("",!0)]),x(oe,{size:"xs","is-open":p.value!==null,"header-icon":{name:"AdjustmentsVerticalIcon"},title:"Dettaglio",color:e.color,"primary-action":we.value,"secondary-action":Ve.value,"tertiary-action":_e.value,onClosed:F},{default:M(()=>[p.value?(n(),m("ul",tt,[(n(!0),m(A,null,U(p.value.details,(i,l)=>(n(),m("li",{key:l,class:"flex flex-col gap-1"},[v("span",lt,$(i.label),1),i.value.type==="default"?(n(),m("span",at,$(i.value.text),1)):i.value.type==="tag"?(n(),m("div",rt,[x(Oe,{text:i.value.text,color:i.value.color},null,8,["text","color"])])):i.value.type==="avatar"?(n(),m("div",ot,[x(Le,{label:i.value.label,picture:i.value.picture,size:"sm"},null,8,["label","picture"])])):f("",!0)]))),128))])):f("",!0)]),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"]),x(oe,{"is-open":T.value,"onUpdate:isOpen":r[5]||(r[5]=i=>T.value=i),size:"xs","header-icon":{name:"AdjustmentsVerticalIcon"},title:"Filtri",color:e.color,"primary-action":{label:"Applica filtri",onClick:ke},"secondary-action":e.filters.resetButton?{label:"Reset",onClick:Re}:void 0,"tertiary-action":{label:"Chiudi",onClick:()=>{T.value=!1}}},{default:M(()=>{var i;return[v("div",it,[(n(!0),m(A,null,U(de.value,(l,d)=>(n(),R(je,{key:d,modelValue:S.value[d],"onUpdate:modelValue":I=>S.value[d]=I,options:ce.value[d],label:l.label},null,8,["modelValue","onUpdate:modelValue","options","label"]))),128)),(i=e.filters.dateRange)!=null&&i.enabled?(n(),R(De,{key:0,modelValue:g.value,"onUpdate:modelValue":r[4]||(r[4]=l=>g.value=l),label:e.filters.dateRange.label,placeholder:e.filters.dateRange.placeholder,"hidden-error-message":""},null,8,["modelValue","label","placeholder"])):f("",!0)])]}),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"])],64)}}});export{xt as default};
1
+ import{defineComponent as Ae,ref as h,watch as Te,computed as b,openBlock as n,createElementBlock as m,Fragment as A,createElementVNode as y,createBlock as _,createCommentVNode as f,normalizeClass as Fe,createVNode as R,createTextVNode as ae,toDisplayString as $,renderSlot as M,withCtx as U,renderList as z,mergeProps as $e}from"vue";import Se from"../ElListItem.vue.esm2.js";import Be from"../forms/ElInputText.vue.esm2.js";import Oe from"../ElIconButton.vue.esm2.js";import E from"../ElButton.vue.esm2.js";import Ie from"../ElTag.vue.esm2.js";import re from"../ElModal.vue.esm2.js";import je from"../forms/ElInputSelect.vue.esm2.js";import De from"../forms/ElInputDate.vue.esm2.js";import Le from"../ElAvatar.vue.esm2.js";import Me from"../_CustomTransition.vue.esm2.js";import Ue from"../ElSpinner.vue.esm2.js";const ze={class:"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto"},Ee={key:0,class:"flex flex-row items-center gap-4 pb-2"},Ne={class:"flex-grow"},Pe={key:1,class:"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3"},qe={class:"flex flex-row justify-start items-center"},Ge={class:"flex flex-row justify-center items-center"},He={class:"text-neutral-darker font-normal text-sm"},Je={class:"relative"},Ke={key:2,class:"pt-3 px-4"},Qe={class:"font-semibold text-neutral-darker"},We={key:3,class:"m-0 flex flex-col flex-grow overflow-y-auto h-full"},Xe={key:5,class:"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4"},Ye={key:0,class:"m-0 flex flex-col gap-5"},Ze={class:"text-neutral-lighter"},et={key:0},tt={key:1},lt={key:2},at={class:"flex flex-col gap-6"},bt=Ae({__name:"ElMobileTable",props:{color:{},filters:{},loading:{type:Boolean},preventDefaultItemClick:{type:Boolean},selection:{},sortBy:{},itemsCountLabel:{type:Function},noItemsCountLabel:{type:Boolean},data:{}},emits:["destructive:click","bulk:click","item:click","selection:exit","rows-selected","filters-updated"],setup(oe,{expose:ie,emit:se}){var P,q,G,H,J,K,Q,W,X,Y,Z,ee,te,le;const e=oe,V=h(""),u=h([]),v=h(null),T=h(!1),g=h(0),I=h(void 0);Te(V,(t,r)=>{I.value&&clearTimeout(I.value),I.value=setTimeout(()=>{r!==t&&D()},500)});const ne=b(()=>V.value.trim().length>0||Object.values(s.value).some(t=>t&&t.trim().length>0)||g.value!==0),j=()=>u.value.map(t=>e.data[t]),w=t=>{var a;const r=(a=V.value)==null?void 0:a.trim();return r?t.split(" ").some(o=>o.toLowerCase().includes(r.toLowerCase())):!0},s=h({avatar:((q=(P=e.filters.multiValue)==null?void 0:P.avatar)==null?void 0:q.initialValue)??"",mainText:((H=(G=e.filters.multiValue)==null?void 0:G.mainText)==null?void 0:H.initialValue)??"",secondaryRow:((K=(J=e.filters.multiValue)==null?void 0:J.secondaryRow)==null?void 0:K.initialValue)??"",tertiaryRow:((W=(Q=e.filters.multiValue)==null?void 0:Q.tertiaryRow)==null?void 0:W.initialValue)??"",amount:((Y=(X=e.filters.multiValue)==null?void 0:X.amount)==null?void 0:Y.initialValue)??"",tags:((ee=(Z=e.filters.multiValue)==null?void 0:Z.tags)==null?void 0:ee.initialValue)??"",time:((le=(te=e.filters.multiValue)==null?void 0:te.time)==null?void 0:le.initialValue)??""}),S=h({...s.value}),x=t=>Array.from(new Set(t)),C=t=>t!==void 0,ue=b(()=>{var t,r,a,o,c,p,i;return{mainText:(t=e.filters.multiValue)!=null&&t.mainText?e.filters.multiValue.mainText.selectOptions??x(e.data.map(l=>l.mainText.label)).map(l=>({value:l,label:l})):[],secondaryRow:(r=e.filters.multiValue)!=null&&r.secondaryRow?e.filters.multiValue.secondaryRow.selectOptions??x(e.data.map(l=>l.secondaryRow).filter(C)).map(l=>({value:l,label:l})):[],tertiaryRow:(a=e.filters.multiValue)!=null&&a.tertiaryRow?e.filters.multiValue.tertiaryRow.selectOptions??x(e.data.map(l=>l.tertiaryRow).filter(C)).map(l=>({value:l,label:l})):[],amount:(o=e.filters.multiValue)!=null&&o.amount?e.filters.multiValue.amount.selectOptions??x(e.data.map(l=>l.amount).filter(C)).map(l=>({value:l,label:l})):[],tags:(c=e.filters.multiValue)!=null&&c.tags?e.filters.multiValue.tags.selectOptions??x(e.data.flatMap(l=>(l.tags??[]).map(d=>d.text).filter(C))).map(l=>({value:l,label:l})):[],time:(p=e.filters.multiValue)!=null&&p.time?e.filters.multiValue.time.selectOptions??x(e.data.map(l=>l.time).filter(C)).map(l=>({value:l,label:l})):[],avatar:(i=e.filters.multiValue)!=null&&i.avatar?e.filters.multiValue.avatar.selectOptions??x(e.data.map(l=>{var d;return(d=l.avatar)==null?void 0:d.label}).filter(C)).map(l=>({value:l,label:l})):[]}}),k=b(()=>{var r;let t=e.data.slice();if(e.filters.managed)return t;if(e.filters.freeSearch&&V.value.trim().length>0){const a=e.filters.freeSearch;t=t.filter(o=>a.filterOn.some(c=>{switch(c){case"avatar":return o.avatar&&o.avatar.label&&w(o.avatar.label);case"time":return o.time&&w(o.time);case"mainText":return o.mainText&&w(o.mainText.label);case"secondaryRow":return o.secondaryRow&&w(o.secondaryRow);case"tertiaryRow":return o.tertiaryRow&&w(o.tertiaryRow);case"amount":return o.amount&&w(o.amount);case"tags":return o.tags&&o.tags.some(p=>w(p.text))}}))}return e.filters.multiValue&&(e.filters.multiValue.mainText&&(t=t.filter(a=>!s.value.mainText||s.value.mainText.length===0||s.value.mainText.includes(a.sortableAndFilterableValue??a.mainText.label))),e.filters.multiValue.secondaryRow&&(t=t.filter(a=>!s.value.secondaryRow||s.value.secondaryRow.length===0||s.value.secondaryRow.includes(a.sortableAndFilterableValue??a.secondaryRow??""))),e.filters.multiValue.tertiaryRow&&(t=t.filter(a=>!s.value.tertiaryRow||s.value.tertiaryRow.length===0||s.value.tertiaryRow.includes(a.sortableAndFilterableValue??a.tertiaryRow??""))),e.filters.multiValue.amount&&(t=t.filter(a=>!s.value.amount||s.value.amount.length===0||s.value.amount.includes(a.sortableAndFilterableValue??a.amount??""))),e.filters.multiValue.tags&&(t=t.filter(a=>{var o;return!s.value.tags||s.value.tags.length===0||((o=a.tags)==null?void 0:o.some(c=>s.value.tags.includes(c.text)))})),e.filters.multiValue.avatar&&(t=t.filter(a=>{var o;return!s.value.avatar||s.value.avatar.length===0||s.value.avatar.includes(a.sortableAndFilterableValue??((o=a.avatar)==null?void 0:o.label)??"")}))),(r=e.filters.dateRange)!=null&&r.enabled&&(t=t.filter(a=>g.value?a.time&&new Date(a.time).getTime()>=g.value:!0)),e.sortBy&&(t=t.sort((a,o)=>{var p,i,l,d,O;let c=0;if(a.sortableAndFilterableValue&&o.sortableAndFilterableValue)c=a.sortableAndFilterableValue.localeCompare(o.sortableAndFilterableValue);else switch(e.sortBy.on){case"mainText":c=a.mainText.label.localeCompare(o.mainText.label);break;case"avatar":c=(((p=a.avatar)==null?void 0:p.label)??"").localeCompare(((i=o.avatar)==null?void 0:i.label)??"");break;case"time":case"secondaryRow":case"tertiaryRow":c=(a[e.sortBy.on]??"").localeCompare(o[e.sortBy.on]??"");break;case"amount":const Re=parseFloat(a.amount??"0"),Ce=parseFloat(o.amount??"0");c=Re-Ce;break;case"tags":c=(((l=a.tags)==null?void 0:l.map(L=>L.text).join(""))??"").localeCompare(((d=o.tags)==null?void 0:d.map(L=>L.text).join(""))??"");break}return((O=e.sortBy)==null?void 0:O.order)==="desc"&&(c*=-1),c})),t}),ce=b(()=>Object.fromEntries(Object.entries(e.filters.multiValue??{}).filter(([t,r])=>r.enabled))),de=b(()=>{var t;return((t=e.filters.dateRange)==null?void 0:t.enabled)||Object.values(e.filters.multiValue??{}).some(r=>r.enabled)}),me=b(()=>Object.values(s.value).some(t=>t.length>0)||g.value!==0),fe=t=>{var a;const r=t.map(o=>B({id:o}));((a=e.selection)==null?void 0:a.selectionMode)==="single"&&r.length>0&&(u.value=[r.at(0)]),u.value.push(...r),u.value=Array.from(new Set(u.value))},ve=t=>{var r;((r=e.selection)==null?void 0:r.selectionMode)==="single"?u.value=[t]:(u.value.push(t),u.value=Array.from(new Set(u.value))),N("rows-selected",j())},pe=t=>{u.value=u.value.filter(r=>r!==t)},B=t=>{const r=e.data.findIndex(a=>a.id===t.id);if(r===-1)throw new Error(`Item with id ${t.id} not found`);return r},be=()=>{u.value=[]},ye=()=>e.data,ge=()=>{T.value=!0},he=t=>{v.value=t},F=()=>{v.value=null},Ve=b(()=>{var t;return(t=v.value)!=null&&t.actions?v.value.actions.primary:{label:"Chiudi",onClick:F}}),we=b(()=>{var t,r,a,o;return(r=(t=v.value)==null?void 0:t.actions)!=null&&r.secondary?v.value.actions.secondary:(o=(a=v.value)==null?void 0:a.actions)!=null&&o.primary?{label:"Chiudi",onClick:F}:void 0}),xe=b(()=>{var t,r;if((r=(t=v.value)==null?void 0:t.actions)!=null&&r.secondary)return{label:"Chiudi",onClick:F}}),ke=()=>{T.value=!1,s.value={...S.value},D()},_e=()=>{s.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},g.value=0,S.value={avatar:"",time:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:""},D()},D=()=>{e.filters.managed&&N("filters-updated",{freeSearch:e.filters.freeSearch?V.value:void 0,fromDate:e.filters.dateRange?g.value:void 0,multiSelect:s.value})},N=se;return ie({filteredData:k,selectRows:fe,unselectAllRows:be,getDataRows:ye,getSelectedRows:j,closeItemDetails:F}),(t,r)=>{var a,o,c,p;return n(),m(A,null,[y("div",ze,[(a=e.selection)!=null&&a.enabled?f("",!0):(n(),m("div",Ee,[y("div",Ne,[e.filters.freeSearch?(n(),_(Be,{key:0,modelValue:V.value,"onUpdate:modelValue":r[0]||(r[0]=i=>V.value=i),placeholder:e.filters.freeSearch.placeholder??"Cerca","leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","placeholder"])):f("",!0)]),de.value?(n(),_(Oe,{key:0,badge:me.value,"badge-color":e.color,icon:{name:"AdjustmentsVerticalIcon"},class:Fe(e.color==="primary"?"text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active":"text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active"),onClick:ge},null,8,["badge","badge-color","class"])):f("",!0)])),(o=e.selection)!=null&&o.enabled?(n(),m("div",Pe,[y("div",qe,[R(E,{error:"",variant:"tertiary",type:"button",label:`Elimina (${u.value.length})`,onClick:r[1]||(r[1]=i=>t.$emit("destructive:click",j()))},null,8,["label"])]),y("div",Ge,[y("span",He,[e.selection.selectedLabel?(n(),m(A,{key:0},[ae($(e.selection.selectedLabel(u.value.length)),1)],64)):e.selection.selectionMode!=="single"?(n(),m(A,{key:1},[ae($(u.value.length)+" Selezionati",1)],64)):f("",!0)])])])):f("",!0),M(t.$slots,"default"),R(Me,{name:"fade"},{default:U(()=>[y("div",Je,[e.loading?(n(),_(Ue,{key:0,label:"Caricamento dati...",class:"p-4 absolute bg-neutral-surface w-full","extra-loading-msg-after-seconds":3})):f("",!0)])]),_:1}),ne.value&&t.noItemsCountLabel!==!0&&k.value.length!==0?(n(),m("div",Ke,[y("span",Qe,$(e.itemsCountLabel?e.itemsCountLabel(k.value.length):`${k.value.length} risultati per la tua ricerca`),1)])):f("",!0),k.value.length>0?(n(),m("ul",We,[(n(!0),m(A,null,z(k.value,i=>{var l;return n(),_(Se,$e({ref_for:!0},i,{key:i.id,color:e.color,"model-value":(l=e.selection)!=null&&l.enabled?u.value.includes(B(i)):void 0,"onUpdate:modelValue":d=>d?ve(B(i)):pe(B(i)),onClick:()=>{var d;t.$emit("item:click",i),!((d=e.selection)!=null&&d.enabled)&&!e.preventDefaultItemClick&&he(i)}}),null,16,["color","model-value","onUpdate:modelValue","onClick"])}),128)),M(t.$slots,"after-list")])):!e.loading&&k.value.length===0?M(t.$slots,"no-data-message",{key:4}):f("",!0),(c=e.selection)!=null&&c.enabled?(n(),m("div",Xe,[R(E,{size:"l",variant:"tertiary",label:"Annulla",onClick:r[2]||(r[2]=i=>t.$emit("selection:exit"))}),(p=e.selection)!=null&&p.bulkActionButton?(n(),_(E,{key:0,variant:e.color,label:e.selection.bulkActionButton.label(u.value.length),disabled:u.value.length===0,size:"l",onClick:r[3]||(r[3]=i=>t.$emit("bulk:click",u.value.map(l=>e.data[l])))},null,8,["variant","label","disabled"])):f("",!0)])):f("",!0)]),R(re,{size:"xs","is-open":v.value!==null,"header-icon":{name:"AdjustmentsVerticalIcon"},title:"Dettaglio",color:e.color,"primary-action":Ve.value,"secondary-action":we.value,"tertiary-action":xe.value,onClosed:F},{default:U(()=>[v.value?(n(),m("ul",Ye,[(n(!0),m(A,null,z(v.value.details,(i,l)=>(n(),m("li",{key:l,class:"flex flex-col gap-1"},[y("span",Ze,$(i.label),1),i.value.type==="default"?(n(),m("span",et,$(i.value.text),1)):i.value.type==="tag"?(n(),m("div",tt,[R(Ie,{text:i.value.text,color:i.value.color},null,8,["text","color"])])):i.value.type==="avatar"?(n(),m("div",lt,[R(Le,{label:i.value.label,picture:i.value.picture,size:"sm"},null,8,["label","picture"])])):f("",!0)]))),128))])):f("",!0)]),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"]),R(re,{"is-open":T.value,"onUpdate:isOpen":r[5]||(r[5]=i=>T.value=i),size:"xs","header-icon":{name:"AdjustmentsVerticalIcon"},title:"Filtri",color:e.color,"primary-action":{label:"Applica filtri",onClick:ke},"secondary-action":e.filters.resetButton?{label:"Reset",onClick:_e}:void 0,"tertiary-action":{label:"Chiudi",onClick:()=>{T.value=!1}}},{default:U(()=>{var i;return[y("div",at,[(n(!0),m(A,null,z(ce.value,(l,d)=>(n(),_(je,{key:d,modelValue:S.value[d],"onUpdate:modelValue":O=>S.value[d]=O,options:ue.value[d],label:l.label},null,8,["modelValue","onUpdate:modelValue","options","label"]))),128)),(i=e.filters.dateRange)!=null&&i.enabled?(n(),_(De,{key:0,modelValue:g.value,"onUpdate:modelValue":r[4]||(r[4]=l=>g.value=l),label:e.filters.dateRange.label,placeholder:e.filters.dateRange.placeholder,"hidden-error-message":""},null,8,["modelValue","label","placeholder"])):f("",!0)])]}),_:1},8,["is-open","color","primary-action","secondary-action","tertiary-action"])],64)}}});export{bt as default};
2
2
  //# sourceMappingURL=ElMobileTable.vue.esm2.js.map
package/dist/src/table/ElMobileTable.vue.esm2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n | { type?: 'default'; text: string }\n | { type: 'tag'; text: string; color?: ElTagColor }\n | { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' | 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' | 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n order: 'asc' | 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 ||\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText ||\n multiValueFiltersValues.value.mainText.length === 0 ||\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow ||\n multiValueFiltersValues.value.secondaryRow.length === 0 ||\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow ||\n multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount ||\n multiValueFiltersValues.value.amount.length === 0 ||\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags ||\n multiValueFiltersValues.value.tags.length === 0 ||\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar ||\n multiValueFiltersValues.value.avatar.length === 0 ||\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
1
+ {"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n | { type?: 'default'; text: string }\n | { type: 'tag'; text: string; color?: ElTagColor }\n | { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' | 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' | 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' | 'type' | 'label' | 'error' | 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'tags' | 'time' | 'avatar';\n order: 'asc' | 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow | null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> | undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 ||\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) ||\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T | undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText ||\n multiValueFiltersValues.value.mainText.length === 0 ||\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow ||\n multiValueFiltersValues.value.secondaryRow.length === 0 ||\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow ||\n multiValueFiltersValues.value.tertiaryRow.length === 0 ||\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount ||\n multiValueFiltersValues.value.amount.length === 0 ||\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags ||\n multiValueFiltersValues.value.tags.length === 0 ||\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar ||\n multiValueFiltersValues.value.avatar.length === 0 ||\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled || Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) || filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' | 'size' | 'variant'> | undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <slot v-else-if=\"!props.loading && filteredData.length === 0\" name=\"no-data-message\" />\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
package/dist/src/table/ElServerSideMobileTable.vue.cjs2.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),R=require("./ElMobileTable.vue.cjs2.js"),b=t.defineComponent({__name:"ElServerSideMobileTable",props:{selection:{},color:{},preventDefaultItemClick:{type:Boolean},filters:{},dataController:{type:Function}},emits:["bulk:click","destructive:click","selection:exit","rows-selected","item:click"],setup(g,{expose:S}){const r=t.ref(!1),a=g,n=t.ref([]),v=t.ref(1),u=t.ref(void 0),c=t.ref({freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}}),k=()=>{r.value=!0,a.dataController({paginationStatus:{currentPage:v.value+1},filterStatus:c.value,triggeredEvent:"paginate"}).then(e=>{n.value.push(...e.data),u.value=e.totalRows}).finally(()=>{t.nextTick(()=>t.nextTick(()=>{r.value=!1})),v.value+=1})},d=e=>(r.value=!0,v.value=0,n.value=[],a.dataController({paginationStatus:{currentPage:0},filterStatus:c.value,triggeredEvent:e}).then(l=>{n.value=l.data,u.value=l.totalRows}).finally(()=>{t.nextTick(()=>t.nextTick(()=>{r.value=!1}))})),w=e=>{c.value=e,d("filter")};t.onMounted(()=>{d("firstLoad")});const p=()=>{u.value&&n.value.length<u.value&&k()},f=t.ref(),i=t.ref(void 0);t.onMounted(()=>{i.value=new IntersectionObserver(e=>{e.some(l=>l.isIntersecting)&&!r.value&&p()},{threshold:1}),f.value&&i.value.observe(f.value)}),t.watch(f,(e,l)=>{l&&i.value.unobserve(l),e&&i.value.observe(e)}),t.onUnmounted(()=>{i.value&&(i.value.disconnect(),i.value=void 0)});const s=t.ref(null);return S({selectRows:e=>{var l;(l=s.value)==null||l.selectRows(e)},unselectAllRows:()=>{var e;return(e=s.value)==null?void 0:e.unselectAllRows()},getSelectedRows:()=>{var e;return((e=s.value)==null?void 0:e.getSelectedRows())??[]},resetAllAndFetch:()=>{var e;return c.value={freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}},(e=s.value)==null||e.unselectAllRows(),d("firstLoad")},triggerDataController:async()=>{r.value=!0;const e=await a.dataController({paginationStatus:{currentPage:v.value},filterStatus:c.value,triggeredEvent:"trigger"});n.value=e.data,u.value=e.totalRows,r.value=!1},closeItemDetails:()=>{var e;(e=s.value)==null||e.closeItemDetails()}}),(e,l)=>{var m;return t.openBlock(),t.createBlock(R.default,{ref_key:"table",ref:s,color:a.color,selection:a.selection,data:n.value,filters:{...a.filters,freeSearch:(m=a.filters)!=null&&m.freeSearch?{placeholder:a.filters.freeSearch.placeholder,initialValue:a.filters.freeSearch.initialValue,filterOn:[]}:void 0,managed:!0},loading:r.value,"prevent-default-item-click":a.preventDefaultItemClick,onRowsSelected:l[0]||(l[0]=o=>e.$emit("rows-selected",o)),onFiltersUpdated:w,"onBulk:click":l[1]||(l[1]=o=>e.$emit("bulk:click",o)),"onSelection:exit":l[2]||(l[2]=o=>e.$emit("selection:exit")),"onDestructive:click":l[3]||(l[3]=o=>e.$emit("destructive:click",o)),"onItem:click":l[4]||(l[4]=o=>e.$emit("item:click",o))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),"after-list":t.withCtx(()=>[t.createElementVNode("div",{ref_key:"infiniteScrollEl",ref:f,class:"h-1 mb-2 shrink-0"},null,512)]),_:3},8,["color","selection","data","filters","loading","prevent-default-item-click"])}}});exports.default=b;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),x=require("./ElMobileTable.vue.cjs2.js"),h=require("../ElIcon.vue.cjs2.js"),b={class:"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3"},y=t.createElementVNode("div",{class:"flex flex-col gap-1 text-center"},[t.createElementVNode("span",{class:"text-lg font-semibold text-neutral-darker"},"Nessun risultato"),t.createElementVNode("p",{class:"text-neutral-lighter text-sm"},"Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.")],-1),R=t.defineComponent({__name:"ElServerSideMobileTable",props:{selection:{},color:{},preventDefaultItemClick:{type:Boolean},filters:{},dataController:{type:Function}},emits:["bulk:click","destructive:click","selection:exit","rows-selected","item:click"],setup(g,{expose:p}){const r=t.ref(!1),a=g,n=t.ref([]),v=t.ref(1),c=t.ref(void 0),u=t.ref({freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}}),S=()=>{r.value=!0,a.dataController({paginationStatus:{currentPage:v.value+1},filterStatus:u.value,triggeredEvent:"paginate"}).then(e=>{n.value.push(...e.data),c.value=e.totalRows}).finally(()=>{t.nextTick(()=>t.nextTick(()=>{r.value=!1})),v.value+=1})},d=e=>(r.value=!0,v.value=0,n.value=[],a.dataController({paginationStatus:{currentPage:0},filterStatus:u.value,triggeredEvent:e}).then(l=>{n.value=l.data,c.value=l.totalRows}).finally(()=>{t.nextTick(()=>t.nextTick(()=>{r.value=!1}))})),w=e=>{u.value=e,d("filter")};t.onMounted(()=>{d("firstLoad")});const k=()=>{c.value&&n.value.length<c.value&&S()},f=t.ref(),s=t.ref(void 0);t.onMounted(()=>{s.value=new IntersectionObserver(e=>{e.some(l=>l.isIntersecting)&&!r.value&&k()},{threshold:1}),f.value&&s.value.observe(f.value)}),t.watch(f,(e,l)=>{l&&s.value.unobserve(l),e&&s.value.observe(e)}),t.onUnmounted(()=>{s.value&&(s.value.disconnect(),s.value=void 0)});const i=t.ref(null);return p({selectRows:e=>{var l;(l=i.value)==null||l.selectRows(e)},unselectAllRows:()=>{var e;return(e=i.value)==null?void 0:e.unselectAllRows()},getSelectedRows:()=>{var e;return((e=i.value)==null?void 0:e.getSelectedRows())??[]},resetAllAndFetch:()=>{var e;return u.value={freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}},(e=i.value)==null||e.unselectAllRows(),d("firstLoad")},triggerDataController:async()=>{r.value=!0;const e=await a.dataController({paginationStatus:{currentPage:v.value},filterStatus:u.value,triggeredEvent:"trigger"});n.value=e.data,c.value=e.totalRows,r.value=!1},closeItemDetails:()=>{var e;(e=i.value)==null||e.closeItemDetails()}}),(e,l)=>{var m;return t.openBlock(),t.createBlock(x.default,{ref_key:"table",ref:i,color:a.color,selection:a.selection,data:n.value,filters:{...a.filters,freeSearch:(m=a.filters)!=null&&m.freeSearch?{placeholder:a.filters.freeSearch.placeholder,initialValue:a.filters.freeSearch.initialValue,filterOn:[]}:void 0,managed:!0},loading:r.value,"prevent-default-item-click":a.preventDefaultItemClick,onRowsSelected:l[0]||(l[0]=o=>e.$emit("rows-selected",o)),onFiltersUpdated:w,"onBulk:click":l[1]||(l[1]=o=>e.$emit("bulk:click",o)),"onSelection:exit":l[2]||(l[2]=o=>e.$emit("selection:exit")),"onDestructive:click":l[3]||(l[3]=o=>e.$emit("destructive:click",o)),"onItem:click":l[4]||(l[4]=o=>e.$emit("item:click",o))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),"no-data-message":t.withCtx(()=>[t.renderSlot(e.$slots,"no-data-message",{},()=>[t.createElementVNode("div",b,[t.createVNode(h.default,{name:"MagnifyingGlassIcon",class:t.normalizeClass(["h-8 w-8",a.color==="primary"?"text-primary-active":"text-secondary-active"])},null,8,["class"]),y])])]),"after-list":t.withCtx(()=>[t.createElementVNode("div",{ref_key:"infiniteScrollEl",ref:f,class:"h-1 mb-2 shrink-0"},null,512)]),_:3},8,["color","selection","data","filters","loading","prevent-default-item-click"])}}});exports.default=R;
2
2
  //# sourceMappingURL=ElServerSideMobileTable.vue.cjs2.js.map
package/dist/src/table/ElServerSideMobileTable.vue.cjs2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElServerSideMobileTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\ndefineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"4bAmBM,MAAAA,EAAUC,MAAI,EAAK,EACnBC,EAAQC,EACRC,EAAOH,MAAsB,CAAA,CAAE,EAC/BI,EAAcJ,MAAY,CAAC,EAC3BK,EAAkBL,EAAAA,IAAwB,MAAS,EACnDM,EAAeN,EAAAA,IAA8B,CACjD,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,CACD,EACKO,EAAgB,IAAM,CAC1BR,EAAQ,MAAQ,GAChBE,EACG,eAAe,CACd,iBAAkB,CAChB,YAAaG,EAAY,MAAQ,CACnC,EACA,aAAcE,EAAa,MAC3B,eAAgB,UAAA,CACjB,EACA,KAAiBE,GAAA,CAChBL,EAAK,MAAM,KAAK,GAAGK,EAAS,IAAI,EAChCH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAA,SAAS,IACPA,WAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,EAEHK,EAAY,OAAS,CAAA,CACtB,CAAA,EAECM,EAAkBC,IACtBZ,EAAQ,MAAQ,GAChBK,EAAY,MAAQ,EACpBD,EAAK,MAAQ,GACNF,EACJ,eAAe,CACd,iBAAkB,CAChB,YAAa,CACf,EACA,aAAcK,EAAa,MAC3B,eAAAK,CAAA,CACD,EACA,KAAiBH,GAAA,CAChBL,EAAK,MAAQK,EAAS,KACtBH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAA,SAAS,IACPA,WAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,CACH,CACD,GAECa,EAAoBC,GAAsC,CAC9DP,EAAa,MAAQO,EACrBH,EAAe,QAAQ,CAAA,EAGzBI,EAAAA,UAAU,IAAM,CACdJ,EAAe,WAAW,CAAA,CAC3B,EAGD,MAAMK,EAAmB,IAAM,CACzBV,EAAgB,OAASF,EAAK,MAAM,OAASE,EAAgB,OACjDE,GAChB,EAEIS,EAAmBhB,EAAAA,MACnBiB,EAAWjB,EAAAA,IAAsC,MAAS,EAChEc,EAAAA,UAAU,IAAM,CACdG,EAAS,MAAQ,IAAI,qBACVC,GAAA,CACHA,EAAM,KAAUC,GAAAA,EAAE,cAAc,GAAK,CAACpB,EAAQ,OAC/BgB,GAErB,EACA,CACE,UAAW,CACb,CAAA,EAEEC,EAAiB,OACVC,EAAA,MAAM,QAAQD,EAAiB,KAAM,CAChD,CACD,EACKI,EAAAA,MAAAJ,EAAkB,CAACK,EAAUC,IAAa,CAC1CA,GAAmBL,EAAA,MAAO,UAAUK,CAAQ,EAC5CD,GACOJ,EAAA,MAAO,QAAQI,CAAQ,CAClC,CACD,EACDE,EAAAA,YAAY,IAAM,CACZN,EAAS,QACXA,EAAS,MAAM,aACfA,EAAS,MAAQ,OACnB,CACD,EAEK,MAAAO,EAAQxB,MAA+C,IAAI,EA6CpD,OAAAyB,EAAA,CACX,WA5CkBC,GAAsB,QAClCC,EAAAH,EAAA,QAAA,MAAAG,EAAO,WAAWD,EAAO,EA4C/B,gBAzCsB,IAAM,OAAA,OAAAC,EAAAH,EAAM,QAAN,YAAAG,EAAa,mBA0CzC,gBAxCsB,IAAA,OAAM,QAAAA,EAAAH,EAAM,QAAN,YAAAG,EAAa,oBAAqB,CAAA,GAyC9D,iBAvCuB,IAAM,OAC7B,OAAArB,EAAa,MAAQ,CACnB,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,GAEFqB,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBACNjB,EAAe,WAAW,CAAA,EAyBjC,sBAvB4B,SAAY,CACxCX,EAAQ,MAAQ,GACV,MAAA6B,EAAU,MAAM3B,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAaG,EAAY,KAC3B,EACA,aAAcE,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDH,EAAK,MAAQyB,EAAQ,KACrBvB,EAAgB,MAAQuB,EAAQ,UAChC7B,EAAQ,MAAQ,EAAA,EAahB,iBAVuB,IAAM,QAC7B4B,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBAAiB,CAS9B,CACD"}
1
+ {"version":3,"file":"ElServerSideMobileTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\nimport ElIcon from '@/ElIcon.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\ndefineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n\n <template #no-data-message>\n <slot name=\"no-data-message\">\n <div class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n </slot>\n </template>\n\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"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"}
package/dist/src/table/ElServerSideMobileTable.vue.esm2.js CHANGED
@@ -1,2 +1,2 @@
1
- import{defineComponent as y,ref as r,onMounted as S,watch as C,onUnmounted as D,openBlock as I,createBlock as A,withCtx as w,renderSlot as $,createElementVNode as E,nextTick as d}from"vue";import P from"./ElMobileTable.vue.esm2.js";const U=y({__name:"ElServerSideMobileTable",props:{selection:{},color:{},preventDefaultItemClick:{type:Boolean},filters:{},dataController:{type:Function}},emits:["bulk:click","destructive:click","selection:exit","rows-selected","item:click"],setup(p,{expose:k}){const a=r(!1),l=p,n=r([]),v=r(1),u=r(void 0),c=r({freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}}),R=()=>{a.value=!0,l.dataController({paginationStatus:{currentPage:v.value+1},filterStatus:c.value,triggeredEvent:"paginate"}).then(e=>{n.value.push(...e.data),u.value=e.totalRows}).finally(()=>{d(()=>d(()=>{a.value=!1})),v.value+=1})},m=e=>(a.value=!0,v.value=0,n.value=[],l.dataController({paginationStatus:{currentPage:0},filterStatus:c.value,triggeredEvent:e}).then(t=>{n.value=t.data,u.value=t.totalRows}).finally(()=>{d(()=>d(()=>{a.value=!1}))})),h=e=>{c.value=e,m("filter")};S(()=>{m("firstLoad")});const b=()=>{u.value&&n.value.length<u.value&&R()},f=r(),i=r(void 0);S(()=>{i.value=new IntersectionObserver(e=>{e.some(t=>t.isIntersecting)&&!a.value&&b()},{threshold:1}),f.value&&i.value.observe(f.value)}),C(f,(e,t)=>{t&&i.value.unobserve(t),e&&i.value.observe(e)}),D(()=>{i.value&&(i.value.disconnect(),i.value=void 0)});const s=r(null);return k({selectRows:e=>{var t;(t=s.value)==null||t.selectRows(e)},unselectAllRows:()=>{var e;return(e=s.value)==null?void 0:e.unselectAllRows()},getSelectedRows:()=>{var e;return((e=s.value)==null?void 0:e.getSelectedRows())??[]},resetAllAndFetch:()=>{var e;return c.value={freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}},(e=s.value)==null||e.unselectAllRows(),m("firstLoad")},triggerDataController:async()=>{a.value=!0;const e=await l.dataController({paginationStatus:{currentPage:v.value},filterStatus:c.value,triggeredEvent:"trigger"});n.value=e.data,u.value=e.totalRows,a.value=!1},closeItemDetails:()=>{var e;(e=s.value)==null||e.closeItemDetails()}}),(e,t)=>{var g;return I(),A(P,{ref_key:"table",ref:s,color:l.color,selection:l.selection,data:n.value,filters:{...l.filters,freeSearch:(g=l.filters)!=null&&g.freeSearch?{placeholder:l.filters.freeSearch.placeholder,initialValue:l.filters.freeSearch.initialValue,filterOn:[]}:void 0,managed:!0},loading:a.value,"prevent-default-item-click":l.preventDefaultItemClick,onRowsSelected:t[0]||(t[0]=o=>e.$emit("rows-selected",o)),onFiltersUpdated:h,"onBulk:click":t[1]||(t[1]=o=>e.$emit("bulk:click",o)),"onSelection:exit":t[2]||(t[2]=o=>e.$emit("selection:exit")),"onDestructive:click":t[3]||(t[3]=o=>e.$emit("destructive:click",o)),"onItem:click":t[4]||(t[4]=o=>e.$emit("item:click",o))},{default:w(()=>[$(e.$slots,"default")]),"after-list":w(()=>[E("div",{ref_key:"infiniteScrollEl",ref:f,class:"h-1 mb-2 shrink-0"},null,512)]),_:3},8,["color","selection","data","filters","loading","prevent-default-item-click"])}}});export{U as default};
1
+ import{defineComponent as C,ref as r,onMounted as S,watch as D,onUnmounted as I,openBlock as $,createBlock as A,withCtx as p,renderSlot as k,createElementVNode as v,createVNode as P,normalizeClass as E,nextTick as m}from"vue";import F from"./ElMobileTable.vue.esm2.js";import N from"../ElIcon.vue.esm2.js";const B={class:"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3"},T=v("div",{class:"flex flex-col gap-1 text-center"},[v("span",{class:"text-lg font-semibold text-neutral-darker"},"Nessun risultato"),v("p",{class:"text-neutral-lighter text-sm"},"Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.")],-1),H=C({__name:"ElServerSideMobileTable",props:{selection:{},color:{},preventDefaultItemClick:{type:Boolean},filters:{},dataController:{type:Function}},emits:["bulk:click","destructive:click","selection:exit","rows-selected","item:click"],setup(h,{expose:R}){const a=r(!1),l=h,i=r([]),f=r(1),c=r(void 0),u=r({freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}}),x=()=>{a.value=!0,l.dataController({paginationStatus:{currentPage:f.value+1},filterStatus:u.value,triggeredEvent:"paginate"}).then(e=>{i.value.push(...e.data),c.value=e.totalRows}).finally(()=>{m(()=>m(()=>{a.value=!1})),f.value+=1})},g=e=>(a.value=!0,f.value=0,i.value=[],l.dataController({paginationStatus:{currentPage:0},filterStatus:u.value,triggeredEvent:e}).then(t=>{i.value=t.data,c.value=t.totalRows}).finally(()=>{m(()=>m(()=>{a.value=!1}))})),y=e=>{u.value=e,g("filter")};S(()=>{g("firstLoad")});const b=()=>{c.value&&i.value.length<c.value&&x()},d=r(),s=r(void 0);S(()=>{s.value=new IntersectionObserver(e=>{e.some(t=>t.isIntersecting)&&!a.value&&b()},{threshold:1}),d.value&&s.value.observe(d.value)}),D(d,(e,t)=>{t&&s.value.unobserve(t),e&&s.value.observe(e)}),I(()=>{s.value&&(s.value.disconnect(),s.value=void 0)});const n=r(null);return R({selectRows:e=>{var t;(t=n.value)==null||t.selectRows(e)},unselectAllRows:()=>{var e;return(e=n.value)==null?void 0:e.unselectAllRows()},getSelectedRows:()=>{var e;return((e=n.value)==null?void 0:e.getSelectedRows())??[]},resetAllAndFetch:()=>{var e;return u.value={freeSearch:"",fromDate:0,multiSelect:{avatar:"",mainText:"",secondaryRow:"",tertiaryRow:"",amount:"",tags:"",time:""}},(e=n.value)==null||e.unselectAllRows(),g("firstLoad")},triggerDataController:async()=>{a.value=!0;const e=await l.dataController({paginationStatus:{currentPage:f.value},filterStatus:u.value,triggeredEvent:"trigger"});i.value=e.data,c.value=e.totalRows,a.value=!1},closeItemDetails:()=>{var e;(e=n.value)==null||e.closeItemDetails()}}),(e,t)=>{var w;return $(),A(F,{ref_key:"table",ref:n,color:l.color,selection:l.selection,data:i.value,filters:{...l.filters,freeSearch:(w=l.filters)!=null&&w.freeSearch?{placeholder:l.filters.freeSearch.placeholder,initialValue:l.filters.freeSearch.initialValue,filterOn:[]}:void 0,managed:!0},loading:a.value,"prevent-default-item-click":l.preventDefaultItemClick,onRowsSelected:t[0]||(t[0]=o=>e.$emit("rows-selected",o)),onFiltersUpdated:y,"onBulk:click":t[1]||(t[1]=o=>e.$emit("bulk:click",o)),"onSelection:exit":t[2]||(t[2]=o=>e.$emit("selection:exit")),"onDestructive:click":t[3]||(t[3]=o=>e.$emit("destructive:click",o)),"onItem:click":t[4]||(t[4]=o=>e.$emit("item:click",o))},{default:p(()=>[k(e.$slots,"default")]),"no-data-message":p(()=>[k(e.$slots,"no-data-message",{},()=>[v("div",B,[P(N,{name:"MagnifyingGlassIcon",class:E(["h-8 w-8",l.color==="primary"?"text-primary-active":"text-secondary-active"])},null,8,["class"]),T])])]),"after-list":p(()=>[v("div",{ref_key:"infiniteScrollEl",ref:d,class:"h-1 mb-2 shrink-0"},null,512)]),_:3},8,["color","selection","data","filters","loading","prevent-default-item-click"])}}});export{H as default};
2
2
  //# sourceMappingURL=ElServerSideMobileTable.vue.esm2.js.map
package/dist/src/table/ElServerSideMobileTable.vue.esm2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElServerSideMobileTable.vue.esm2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\ndefineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"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"}
1
+ {"version":3,"file":"ElServerSideMobileTable.vue.esm2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\nimport ElIcon from '@/ElIcon.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\ndefineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n\n <template #no-data-message>\n <slot name=\"no-data-message\">\n <div class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n </slot>\n </template>\n\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"m5BAoBM,MAAAA,EAAUC,EAAI,EAAK,EACnBC,EAAQC,EACRC,EAAOH,EAAsB,CAAA,CAAE,EAC/BI,EAAcJ,EAAY,CAAC,EAC3BK,EAAkBL,EAAwB,MAAS,EACnDM,EAAeN,EAA8B,CACjD,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,CACD,EACKO,EAAgB,IAAM,CAC1BR,EAAQ,MAAQ,GAChBE,EACG,eAAe,CACd,iBAAkB,CAChB,YAAaG,EAAY,MAAQ,CACnC,EACA,aAAcE,EAAa,MAC3B,eAAgB,UAAA,CACjB,EACA,KAAiBE,GAAA,CAChBL,EAAK,MAAM,KAAK,GAAGK,EAAS,IAAI,EAChCH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAS,IACPA,EAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,EAEHK,EAAY,OAAS,CAAA,CACtB,CAAA,EAECM,EAAkBC,IACtBZ,EAAQ,MAAQ,GAChBK,EAAY,MAAQ,EACpBD,EAAK,MAAQ,GACNF,EACJ,eAAe,CACd,iBAAkB,CAChB,YAAa,CACf,EACA,aAAcK,EAAa,MAC3B,eAAAK,CAAA,CACD,EACA,KAAiBH,GAAA,CAChBL,EAAK,MAAQK,EAAS,KACtBH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAS,IACPA,EAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,CACH,CACD,GAECa,EAAoBC,GAAsC,CAC9DP,EAAa,MAAQO,EACrBH,EAAe,QAAQ,CAAA,EAGzBI,EAAU,IAAM,CACdJ,EAAe,WAAW,CAAA,CAC3B,EAGD,MAAMK,EAAmB,IAAM,CACzBV,EAAgB,OAASF,EAAK,MAAM,OAASE,EAAgB,OACjDE,GAChB,EAEIS,EAAmBhB,IACnBiB,EAAWjB,EAAsC,MAAS,EAChEc,EAAU,IAAM,CACdG,EAAS,MAAQ,IAAI,qBACVC,GAAA,CACHA,EAAM,KAAUC,GAAAA,EAAE,cAAc,GAAK,CAACpB,EAAQ,OAC/BgB,GAErB,EACA,CACE,UAAW,CACb,CAAA,EAEEC,EAAiB,OACVC,EAAA,MAAM,QAAQD,EAAiB,KAAM,CAChD,CACD,EACKI,EAAAJ,EAAkB,CAACK,EAAUC,IAAa,CAC1CA,GAAmBL,EAAA,MAAO,UAAUK,CAAQ,EAC5CD,GACOJ,EAAA,MAAO,QAAQI,CAAQ,CAClC,CACD,EACDE,EAAY,IAAM,CACZN,EAAS,QACXA,EAAS,MAAM,aACfA,EAAS,MAAQ,OACnB,CACD,EAEK,MAAAO,EAAQxB,EAA+C,IAAI,EA6CpD,OAAAyB,EAAA,CACX,WA5CkBC,GAAsB,QAClCC,EAAAH,EAAA,QAAA,MAAAG,EAAO,WAAWD,EAAO,EA4C/B,gBAzCsB,IAAM,OAAA,OAAAC,EAAAH,EAAM,QAAN,YAAAG,EAAa,mBA0CzC,gBAxCsB,IAAA,OAAM,QAAAA,EAAAH,EAAM,QAAN,YAAAG,EAAa,oBAAqB,CAAA,GAyC9D,iBAvCuB,IAAM,OAC7B,OAAArB,EAAa,MAAQ,CACnB,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,GAEFqB,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBACNjB,EAAe,WAAW,CAAA,EAyBjC,sBAvB4B,SAAY,CACxCX,EAAQ,MAAQ,GACV,MAAA6B,EAAU,MAAM3B,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAaG,EAAY,KAC3B,EACA,aAAcE,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDH,EAAK,MAAQyB,EAAQ,KACrBvB,EAAgB,MAAQuB,EAAQ,UAChC7B,EAAQ,MAAQ,EAAA,EAahB,iBAVuB,IAAM,QAC7B4B,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBAAiB,CAS9B,CACD"}
package/dist/src/table/ElServerSideTable.vue.cjs2.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("./ElServerSideTablePagination.vue.cjs2.js"),Q=require("../_CustomTransition.vue.cjs2.js"),x=require("../forms/ElInputCheckbox.vue.cjs2.js"),W=require("../forms/ElInputSelect.vue.cjs2.js"),Y=require("../forms/ElInputDate.vue.cjs2.js"),Z=require("../forms/ElInputText.vue.cjs2.js"),ee=require("../ElSpinner.vue.cjs2.js"),te=require("./ElTableCell.vue.cjs2.js"),le=require("../ElButton.vue.cjs2.js"),A=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),oe={class:"flex flex-col"},re={class:"overflow-x-auto"},ae={class:"inline-block min-w-full bg-white align-middle"},ne={class:"min-w-full"},se={class:"bg-neutral-surface-raised font-semibold"},ce={key:1,class:"w-7"},ue=["title","onClick"],ie={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},de={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},fe={key:0},ge={key:0,scope:"col"},me={key:1,class:"flex flex-col"},_e={key:3,class:"flex justify-end"},ve={key:"loading"},we=["colspan"],Se={key:"tableFull",class:"bg-white"},ye={key:0,class:"flex h-20 items-center justify-center py-3"},ke=["data-cy"],Ee={key:"tableEmpty"},he=["colspan"],Be=e.defineComponent({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(F,{expose:T,emit:N}){const a=F,P=N,p=e.ref(!0),y=10,d=e.ref([]),k=e.ref(null);e.onMounted(async()=>{const t=await a.dataController({paginationStatus:{currentPage:0},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"firstLoad"});d.value=t.data,v.value=t.totalRows,p.value=!1});function D(){const t=e.ref(0),i=e.computed(()=>{var r;return((r=k.value)==null?void 0:r.currentPage)??0});return{newPageSelected:async r=>{p.value=!0,d.value=(await a.dataController({paginationStatus:{currentPage:r},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"paginate"})).data,p.value=!1},totalRowsCount:t,currentPage:i,goToFirstPage:()=>{var r;return(r=k.value)==null?void 0:r.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:a.sortByCol>-1?a.sortByCol:-1,arrows:[...new Array(y)].map((r,n)=>n===a.sortByCol?a.sortByColAsc:r)}),i=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:t,toggleSortArrow:async r=>{t.value.currentlySortColIndex=r,t.value.arrows.splice(r,1,!t.value.arrows[r]),p.value=!0;try{const n=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:o.value,filterStatus:u.value,triggeredEvent:"sort"});d.value=n.data,v.value=n.totalRows}catch(n){console.error(n)}finally{p.value=!1}},currentSortStatus:o,resetSort:i}}function U(){const t=e.ref([]),i=e.ref(!1);e.onMounted(()=>{o(),A.watchDeep(t,async n=>{i.value?(l(n),i.value=!1):r(n)})});const o=()=>{var n;i.value=!0,t.value=new Array(y).fill(void 0);for(let s=0;s<y;s++){const c=(n=a.columns[s])==null?void 0:n.filter;c&&(c.type==="FREE_SEARCH"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:a.columns[s].title}):c.type==="MULTI_VALUE"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:a.columns[s].title}):c.type==="DATE_RANGE"&&t.value.splice(s,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:a.columns[s].title}))}},l=async n=>{console.log("applyFilters"),p.value=!0,X();const s=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:w.value,filterStatus:n,triggeredEvent:"filter"});d.value=s.data,v.value=s.totalRows,p.value=!1},r=A.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function L(){const t=e.ref([]),i=()=>{P("rows-selected",t.value)},o=m=>{r(m.map(f=>f.id))},l=m=>{const f=t.value.findIndex(g=>g.id===m);t.value.splice(f,1),i()},r=async m=>{a.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const f=d.value.filter(g=>m.includes(g.id));a.rowsSelectionMode==="single"&&(f.length=Math.min(1,f.length));for(const g of f)t.value.some(_=>_.id===g.id)||t.value.push(g);i()},n=()=>{t.value=[],i()},s=()=>d.value,c=()=>t.value,S=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:r,unselectAllRows:n,getDataRows:s,getSelectedRows:c,allRowsSelected:S}}const{selectedRows:C,rowsSelected:V,rowUnselected:I,selectRows:q,unselectAllRows:E,getDataRows:z,getSelectedRows:O,allRowsSelected:R}=L(),{filterStatus:u,resetFilters:h}=U(),{sortStatus:b,toggleSortArrow:G,currentSortStatus:w,resetSort:j}=M(),{newPageSelected:H,totalRowsCount:v,currentPage:B,goToFirstPage:X}=D(),$=async()=>{j(),h(),E()},J=async()=>{p.value=!0;const t=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"trigger"});d.value=t.data,v.value=t.totalRows,p.value=!1};return e.watch(()=>a.columns,()=>h(),{deep:!0,immediate:!0}),T({selectRows:q,resetAllAndFetch:$,unselectAllRows:E,getDataRows:z,getSelectedRows:O,triggerDataController:J}),(t,i)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.createElementVNode("table",ne,[e.createElementVNode("thead",null,[e.createElementVNode("tr",se,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":t.rowsSelectionMode==="multiple"}])},[t.rowsSelectionMode==="multiple"?(e.openBlock(),e.createBlock(x.default,{key:0,"model-value":e.unref(R),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:i[0]||(i[0]=()=>e.unref(R)?e.unref(E)():e.unref(V)(d.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",ce))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,(o,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":e.unref(b).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:r=>!o.noSort&&e.unref(G)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(b).arrows[l]?(e.openBlock(),e.createElementBlock("path",de)):(e.openBlock(),e.createElementBlock("path",pe))]))],10,ue))),128))]),e.unref(u).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",fe,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(o,l)=>{var r,n,s,c,S,m,f,g;return e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((r=o.filter)==null?void 0:r.type)==="FREE_SEARCH"&&((n=e.unref(u)[l])==null?void 0:n.type)==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":_=>e.unref(u)[l].textSearch=_,placeholder:((s=o.filter)==null?void 0:s.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((c=o.filter)==null?void 0:c.type)==="DATE_RANGE"&&((S=e.unref(u)[l])==null?void 0:S.type)==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(u)[l].dateFrom,"onUpdate:modelValue":_=>e.unref(u)[l].dateFrom=_,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((m=o.filter)==null?void 0:m.type)==="MULTI_VALUE"&&((f=e.unref(u)[l])==null?void 0:f.type)==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":_=>e.unref(u)[l].textSearch=_,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((g=o.filter)==null?void 0:g.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(h)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1},[e.createVNode(ee.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,we)])])):d.value.length>0?(e.openBlock(),e.createElementBlock("tbody",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(C).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",ye,[e.createVNode(x.default,{"model-value":!!e.unref(C).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(V)([o]):e.unref(I)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.cells,(l,r)=>(e.openBlock(),e.createElementBlock("td",{key:r,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(te.default,{cell:l},null,8,["cell"])],8,ke))),128))],2))),128))])):d.value.length===0?(e.openBlock(),e.createElementBlock("tbody",Ee,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,he)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(K.default,{ref_key:"pagination",ref:k,"total-rows-count":e.unref(v),"rows-per-page":a.rowsPerPage,"hide-footer":a.noFooter,"onUpdate:currentPage":e.unref(H)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("./ElServerSideTablePagination.vue.cjs2.js"),Q=require("../_CustomTransition.vue.cjs2.js"),x=require("../forms/ElInputCheckbox.vue.cjs2.js"),W=require("../forms/ElInputSelect.vue.cjs2.js"),Y=require("../forms/ElInputDate.vue.cjs2.js"),Z=require("../forms/ElInputText.vue.cjs2.js"),ee=require("../ElSpinner.vue.cjs2.js"),te=require("./ElTableCell.vue.cjs2.js"),le=require("../ElButton.vue.cjs2.js"),A=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),oe={class:"flex flex-col"},re={class:"overflow-x-auto"},ae={class:"inline-block min-w-full bg-white align-middle"},ne={class:"min-w-full"},se={class:"bg-neutral-surface-raised font-semibold"},ce={key:1,class:"w-7"},ue=["title","onClick"],ie={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},de={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},fe={key:0},ge={key:0,scope:"col"},me={key:1,class:"flex flex-col"},_e={key:3,class:"flex justify-end"},ve={key:"loading"},we=["colspan"],Se={key:"tableFull",class:"bg-white"},ye={key:0,class:"flex h-20 items-center justify-center py-3"},ke=["data-cy"],Ee={key:"tableEmpty"},he=["colspan"],Be=e.defineComponent({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(T,{expose:F,emit:N}){const a=T,P=N,p=e.ref(!0),y=10,d=e.ref([]),k=e.ref(null);e.onMounted(async()=>{const t=await a.dataController({paginationStatus:{currentPage:0},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"firstLoad"});d.value=t.data,v.value=t.totalRows,p.value=!1});function D(){const t=e.ref(0),i=e.computed(()=>{var r;return((r=k.value)==null?void 0:r.currentPage)??0});return{newPageSelected:async r=>{p.value=!0,d.value=(await a.dataController({paginationStatus:{currentPage:r},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"paginate"})).data,p.value=!1},totalRowsCount:t,currentPage:i,goToFirstPage:()=>{var r;return(r=k.value)==null?void 0:r.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:a.sortByCol>-1?a.sortByCol:-1,arrows:[...new Array(y)].map((r,n)=>n===a.sortByCol?a.sortByColAsc:r)}),i=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:t,toggleSortArrow:async r=>{t.value.currentlySortColIndex=r,t.value.arrows.splice(r,1,!t.value.arrows[r]),p.value=!0;try{const n=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:o.value,filterStatus:u.value,triggeredEvent:"sort"});d.value=n.data,v.value=n.totalRows}catch(n){console.error(n)}finally{p.value=!1}},currentSortStatus:o,resetSort:i}}function U(){const t=e.ref([]),i=e.ref(!1);e.onMounted(()=>{o(),A.watchDeep(t,async n=>{i.value?(l(n),i.value=!1):r(n)})});const o=()=>{var n;i.value=!0,t.value=new Array(y).fill(void 0);for(let s=0;s<y;s++){const c=(n=a.columns[s])==null?void 0:n.filter;c&&(c.type==="FREE_SEARCH"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:a.columns[s].title}):c.type==="MULTI_VALUE"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:a.columns[s].title}):c.type==="DATE_RANGE"&&t.value.splice(s,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:a.columns[s].title}))}},l=async n=>{console.log("applyFilters"),p.value=!0,$();const s=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:w.value,filterStatus:n,triggeredEvent:"filter"});d.value=s.data,v.value=s.totalRows,p.value=!1},r=A.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function L(){const t=e.ref([]),i=()=>{P("rows-selected",t.value)},o=m=>{r(m.map(f=>f.id))},l=m=>{const f=t.value.findIndex(g=>g.id===m);t.value.splice(f,1),i()},r=async m=>{a.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const f=d.value.filter(g=>m.includes(g.id));a.rowsSelectionMode==="single"&&(f.length=Math.min(1,f.length));for(const g of f)t.value.some(_=>_.id===g.id)||t.value.push(g);i()},n=()=>{t.value=[],i()},s=()=>d.value,c=()=>t.value,S=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:r,unselectAllRows:n,getDataRows:s,getSelectedRows:c,allRowsSelected:S}}const{selectedRows:C,rowsSelected:V,rowUnselected:I,selectRows:q,unselectAllRows:E,getDataRows:z,getSelectedRows:O,allRowsSelected:R}=L(),{filterStatus:u,resetFilters:h}=U(),{sortStatus:b,toggleSortArrow:G,currentSortStatus:w,resetSort:j}=M(),{newPageSelected:H,totalRowsCount:v,currentPage:B,goToFirstPage:$}=D(),X=async()=>{j(),h(),E()},J=async()=>{p.value=!0;const t=await a.dataController({paginationStatus:{currentPage:B.value},sortStatus:w.value,filterStatus:u.value,triggeredEvent:"trigger"});d.value=t.data,v.value=t.totalRows,p.value=!1};return e.watch(()=>a.columns,()=>h(),{deep:!0,immediate:!0}),F({selectRows:q,resetAllAndFetch:X,unselectAllRows:E,getDataRows:z,getSelectedRows:O,triggerDataController:J}),(t,i)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.createElementVNode("table",ne,[e.createElementVNode("thead",null,[e.createElementVNode("tr",se,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":t.rowsSelectionMode==="multiple"}])},[t.rowsSelectionMode==="multiple"?(e.openBlock(),e.createBlock(x.default,{key:0,"model-value":e.unref(R),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:i[0]||(i[0]=()=>e.unref(R)?e.unref(E)():e.unref(V)(d.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",ce))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.columns,(o,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":e.unref(b).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:r=>!o.noSort&&e.unref(G)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(b).arrows[l]?(e.openBlock(),e.createElementBlock("path",de)):(e.openBlock(),e.createElementBlock("path",pe))]))],10,ue))),128))]),e.unref(u).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",fe,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(o,l)=>{var r,n,s,c,S,m,f,g;return e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((r=o.filter)==null?void 0:r.type)==="FREE_SEARCH"&&((n=e.unref(u)[l])==null?void 0:n.type)==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":_=>e.unref(u)[l].textSearch=_,placeholder:((s=o.filter)==null?void 0:s.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((c=o.filter)==null?void 0:c.type)==="DATE_RANGE"&&((S=e.unref(u)[l])==null?void 0:S.type)==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(u)[l].dateFrom,"onUpdate:modelValue":_=>e.unref(u)[l].dateFrom=_,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((m=o.filter)==null?void 0:m.type)==="MULTI_VALUE"&&((f=e.unref(u)[l])==null?void 0:f.type)==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":_=>e.unref(u)[l].textSearch=_,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((g=o.filter)==null?void 0:g.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(h)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[p.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1},[e.createVNode(ee.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,we)])])):d.value.length>0?(e.openBlock(),e.createElementBlock("tbody",Se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(C).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",ye,[e.createVNode(x.default,{"model-value":!!e.unref(C).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(V)([o]):e.unref(I)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.cells,(l,r)=>(e.openBlock(),e.createElementBlock("td",{key:r,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(te.default,{cell:l},null,8,["cell"])],8,ke))),128))],2))),128))])):d.value.length===0?(e.openBlock(),e.createElementBlock("tbody",Ee,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:a.columns.length+1,class:"p-4 font-light text-neutral-darker"},[e.renderSlot(t.$slots,"no-data-message",{},()=>[e.createTextVNode(" nessun dato trovato ")])],8,he)])])):e.createCommentVNode("",!0)]),_:3})])])]),e.createVNode(K.default,{ref_key:"pagination",ref:k,"total-rows-count":e.unref(v),"rows-per-page":a.rowsPerPage,"hide-footer":a.noFooter,"onUpdate:currentPage":e.unref(H)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
2
2
  //# sourceMappingURL=ElServerSideTable.vue.cjs2.js.map
package/dist/src/table/ElServerSideTable.vue.cjs2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus | undefined;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array<FilterStatus>(MAX_COLS).fill(undefined);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index]?.type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index]?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index]?.type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","i","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
1
+ {"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus | undefined;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array<FilterStatus>(MAX_COLS).fill(undefined);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index]?.type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index]?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index]?.type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">\n <slot name=\"no-data-message\"> nessun dato trovato </slot>\n </td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","i","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
package/dist/src/table/ElServerSideTable.vue.esm2.js CHANGED
@@ -1,2 +1,2 @@
1
- import{defineComponent as se,ref as y,onMounted as $,watch as ne,openBlock as o,createElementBlock as s,createElementVNode as v,normalizeClass as U,createBlock as D,unref as r,createCommentVNode as h,Fragment as A,renderList as x,createTextVNode as ie,toDisplayString as ue,createVNode as R,withCtx as ce,computed as M,nextTick as de}from"vue";import pe from"./ElServerSideTablePagination.vue.esm2.js";import ge from"../_CustomTransition.vue.esm2.js";import z from"../forms/ElInputCheckbox.vue.esm2.js";import fe from"../forms/ElInputSelect.vue.esm2.js";import me from"../forms/ElInputDate.vue.esm2.js";import we from"../forms/ElInputText.vue.esm2.js";import ve from"../ElSpinner.vue.esm2.js";import Se from"./ElTableCell.vue.esm2.js";import ye from"../ElButton.vue.esm2.js";import{watchDeep as _e,useDebounceFn as he}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const Re={class:"flex flex-col"},Ce={class:"overflow-x-auto"},ke={class:"inline-block min-w-full bg-white align-middle"},Ee={class:"min-w-full"},Ae={class:"bg-neutral-surface-raised font-semibold"},xe={key:1,class:"w-7"},be=["title","onClick"],Fe={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},Ve={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},Pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},Te={key:0},Ue={key:0,scope:"col"},De={key:1,class:"flex flex-col"},Me={key:3,class:"flex justify-end"},Be={key:"loading"},Le=["colspan"],Ie={key:"tableFull",class:"bg-white"},Ne={key:0,class:"flex h-20 items-center justify-center py-3"},$e=["data-cy"],ze={key:"tableEmpty"},Oe=["colspan"],et=se({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(O,{expose:G,emit:H}){const n=O,j=H,f=y(!0),b=10,g=y([]),F=y(null);$(async()=>{const e=await n.dataController({paginationStatus:{currentPage:0},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"firstLoad"});g.value=e.data,C.value=e.totalRows,f.value=!1});function X(){const e=y(0),p=M(()=>{var a;return((a=F.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,g.value=(await n.dataController({paginationStatus:{currentPage:a},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:e,currentPage:p,goToFirstPage:()=>{var a;return(a=F.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function q(){const e=y({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[...new Array(b)].map((a,i)=>i===n.sortByCol?n.sortByColAsc:a)}),p=()=>{e.value={currentlySortColIndex:-1,arrows:[]}},l=M(()=>({columnToSort:e.value.currentlySortColIndex,order:e.value.arrows[e.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:e,toggleSortArrow:async a=>{e.value.currentlySortColIndex=a,e.value.arrows.splice(a,1,!e.value.arrows[a]),f.value=!0;try{const i=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:l.value,filterStatus:d.value,triggeredEvent:"sort"});g.value=i.data,C.value=i.totalRows}catch(i){console.error(i)}finally{f.value=!1}},currentSortStatus:l,resetSort:p}}function J(){const e=y([]),p=y(!1);$(()=>{l(),_e(e,async i=>{p.value?(t(i),p.value=!1):a(i)})});const l=()=>{var i;p.value=!0,e.value=new Array(b).fill(void 0);for(let u=0;u<b;u++){const c=(i=n.columns[u])==null?void 0:i.filter;c&&(c.type==="FREE_SEARCH"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:n.columns[u].title}):c.type==="MULTI_VALUE"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:n.columns[u].title}):c.type==="DATE_RANGE"&&e.value.splice(u,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:n.columns[u].title}))}},t=async i=>{console.log("applyFilters"),f.value=!0,oe();const u=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:k.value,filterStatus:i,triggeredEvent:"filter"});g.value=u.data,C.value=u.totalRows,f.value=!1},a=he(t,500);return{filterStatus:e,resetFilters:l}}function K(){const e=y([]),p=()=>{j("rows-selected",e.value)},l=S=>{a(S.map(m=>m.id))},t=S=>{const m=e.value.findIndex(w=>w.id===S);e.value.splice(m,1),p()},a=async S=>{n.rowsSelectionMode==="single"&&(e.value=[],await de());const m=g.value.filter(w=>S.includes(w.id));n.rowsSelectionMode==="single"&&(m.length=Math.min(1,m.length));for(const w of m)e.value.some(_=>_.id===w.id)||e.value.push(w);p()},i=()=>{e.value=[],p()},u=()=>g.value,c=()=>e.value,E=M(()=>e.value.length>0&&e.value.length===g.value.length);return{selectedRows:e,rowsSelected:l,rowUnselected:t,selectRows:a,unselectAllRows:i,getDataRows:u,getSelectedRows:c,allRowsSelected:E}}const{selectedRows:B,rowsSelected:L,rowUnselected:Q,selectRows:W,unselectAllRows:V,getDataRows:Y,getSelectedRows:Z,allRowsSelected:I}=K(),{filterStatus:d,resetFilters:P}=J(),{sortStatus:N,toggleSortArrow:ee,currentSortStatus:k,resetSort:te}=q(),{newPageSelected:le,totalRowsCount:C,currentPage:T,goToFirstPage:oe}=X(),ae=async()=>{te(),P(),V()},re=async()=>{f.value=!0;const e=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"trigger"});g.value=e.data,C.value=e.totalRows,f.value=!1};return ne(()=>n.columns,()=>P(),{deep:!0,immediate:!0}),G({selectRows:W,resetAllAndFetch:ae,unselectAllRows:V,getDataRows:Y,getSelectedRows:Z,triggerDataController:re}),(e,p)=>(o(),s("div",Re,[v("div",Ce,[v("div",ke,[v("table",Ee,[v("thead",null,[v("tr",Ae,[e.rowsSelectionMode?(o(),s("th",{key:0,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":e.rowsSelectionMode==="multiple"}])},[e.rowsSelectionMode==="multiple"?(o(),D(z,{key:0,"model-value":r(I),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:p[0]||(p[0]=()=>r(I)?r(V)():r(L)(g.value))},null,8,["model-value","disabled"])):(o(),s("div",xe))],2)):h("",!0),(o(!0),s(A,null,x(n.columns,(l,t)=>(o(),s("th",{key:t,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[l.alignRight?"text-right":"text-left",l.noSort?"cursor-default":"cursor-pointer"]]),title:l.noSort?"Colonna non ordinabile":r(N).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:a=>!l.noSort&&r(ee)(t)},[ie(ue(l.title)+" ",1),l.noSort?h("",!0):(o(),s("svg",Fe,[r(N).arrows[t]?(o(),s("path",Ve)):(o(),s("path",Pe))]))],10,be))),128))]),r(d).length>0&&!e.noFilters?(o(),s("tr",Te,[e.rowsSelectionMode?(o(),s("th",Ue)):h("",!0),(o(!0),s(A,null,x(e.columns,(l,t)=>{var a,i,u,c,E,S,m,w;return o(),s("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((a=l.filter)==null?void 0:a.type)==="FREE_SEARCH"&&((i=r(d)[t])==null?void 0:i.type)==="FREE_SEARCH"?(o(),D(we,{key:0,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":_=>r(d)[t].textSearch=_,placeholder:((u=l.filter)==null?void 0:u.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((c=l.filter)==null?void 0:c.type)==="DATE_RANGE"&&((E=r(d)[t])==null?void 0:E.type)==="DATE_RANGE"?(o(),s("div",De,[R(me,{modelValue:r(d)[t].dateFrom,"onUpdate:modelValue":_=>r(d)[t].dateFrom=_,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((S=l.filter)==null?void 0:S.type)==="MULTI_VALUE"&&((m=r(d)[t])==null?void 0:m.type)==="MULTI_VALUE"?(o(),D(fe,{key:2,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":_=>r(d)[t].textSearch=_,class:"flex flex-col",type:"autocomplete",options:l.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((w=l.filter)==null?void 0:w.type)==="RESET_FILTERS_BUTTON"?(o(),s("div",Me,[R(ye,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:r(P)},null,8,["onClick"])])):h("",!0)])}),128))])):h("",!0)]),R(ge,{name:"fade"},{default:ce(()=>[f.value?(o(),s("tbody",Be,[v("tr",null,[v("td",{colspan:n.columns.length+1},[R(ve,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Le)])])):g.value.length>0?(o(),s("tbody",Ie,[(o(!0),s(A,null,x(g.value,l=>(o(),s("tr",{key:l.id,class:U(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&r(B).find(t=>t.id===l.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(o(),s("td",Ne,[R(z,{"model-value":!!r(B).find(t=>t.id===l.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?r(L)([l]):r(Q)(l.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):h("",!0),(o(!0),s(A,null,x(l.cells,(t,a)=>(o(),s("td",{key:a,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[R(Se,{cell:t},null,8,["cell"])],8,$e))),128))],2))),128))])):g.value.length===0?(o(),s("tbody",ze,[v("tr",null,[v("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Oe)])])):h("",!0)]),_:1})])])]),R(pe,{ref_key:"pagination",ref:F,"total-rows-count":r(C),"rows-per-page":n.rowsPerPage,"hide-footer":n.noFooter,"onUpdate:currentPage":r(le)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});export{et as default};
1
+ import{defineComponent as ne,ref as y,onMounted as N,watch as ie,openBlock as l,createElementBlock as s,createElementVNode as v,normalizeClass as U,createBlock as D,unref as r,createCommentVNode as h,Fragment as A,renderList as b,createTextVNode as z,toDisplayString as ue,createVNode as R,withCtx as ce,renderSlot as de,computed as M,nextTick as pe}from"vue";import ge from"./ElServerSideTablePagination.vue.esm2.js";import fe from"../_CustomTransition.vue.esm2.js";import O from"../forms/ElInputCheckbox.vue.esm2.js";import me from"../forms/ElInputSelect.vue.esm2.js";import we from"../forms/ElInputDate.vue.esm2.js";import ve from"../forms/ElInputText.vue.esm2.js";import Se from"../ElSpinner.vue.esm2.js";import ye from"./ElTableCell.vue.esm2.js";import _e from"../ElButton.vue.esm2.js";import{watchDeep as he,useDebounceFn as Re}from"../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.esm.js";const Ce={class:"flex flex-col"},ke={class:"overflow-x-auto"},Ee={class:"inline-block min-w-full bg-white align-middle"},Ae={class:"min-w-full"},be={class:"bg-neutral-surface-raised font-semibold"},xe={key:1,class:"w-7"},Fe=["title","onClick"],Ve={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},Pe={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},Te={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},Ue={key:0},De={key:0,scope:"col"},Me={key:1,class:"flex flex-col"},Be={key:3,class:"flex justify-end"},Le={key:"loading"},$e=["colspan"],Ie={key:"tableFull",class:"bg-white"},Ne={key:0,class:"flex h-20 items-center justify-center py-3"},ze=["data-cy"],Oe={key:"tableEmpty"},Ge=["colspan"],tt=ne({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(G,{expose:H,emit:j}){const n=G,X=j,f=y(!0),x=10,g=y([]),F=y(null);N(async()=>{const e=await n.dataController({paginationStatus:{currentPage:0},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"firstLoad"});g.value=e.data,C.value=e.totalRows,f.value=!1});function q(){const e=y(0),p=M(()=>{var a;return((a=F.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,g.value=(await n.dataController({paginationStatus:{currentPage:a},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:e,currentPage:p,goToFirstPage:()=>{var a;return(a=F.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function J(){const e=y({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[...new Array(x)].map((a,i)=>i===n.sortByCol?n.sortByColAsc:a)}),p=()=>{e.value={currentlySortColIndex:-1,arrows:[]}},o=M(()=>({columnToSort:e.value.currentlySortColIndex,order:e.value.arrows[e.value.currentlySortColIndex]?"asc":"desc"}));return{sortStatus:e,toggleSortArrow:async a=>{e.value.currentlySortColIndex=a,e.value.arrows.splice(a,1,!e.value.arrows[a]),f.value=!0;try{const i=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:o.value,filterStatus:d.value,triggeredEvent:"sort"});g.value=i.data,C.value=i.totalRows}catch(i){console.error(i)}finally{f.value=!1}},currentSortStatus:o,resetSort:p}}function K(){const e=y([]),p=y(!1);N(()=>{o(),he(e,async i=>{p.value?(t(i),p.value=!1):a(i)})});const o=()=>{var i;p.value=!0,e.value=new Array(x).fill(void 0);for(let u=0;u<x;u++){const c=(i=n.columns[u])==null?void 0:i.filter;c&&(c.type==="FREE_SEARCH"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"FREE_SEARCH",columnTitle:n.columns[u].title}):c.type==="MULTI_VALUE"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:n.columns[u].title}):c.type==="DATE_RANGE"&&e.value.splice(u,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:n.columns[u].title}))}},t=async i=>{console.log("applyFilters"),f.value=!0,ae();const u=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:k.value,filterStatus:i,triggeredEvent:"filter"});g.value=u.data,C.value=u.totalRows,f.value=!1},a=Re(t,500);return{filterStatus:e,resetFilters:o}}function Q(){const e=y([]),p=()=>{X("rows-selected",e.value)},o=S=>{a(S.map(m=>m.id))},t=S=>{const m=e.value.findIndex(w=>w.id===S);e.value.splice(m,1),p()},a=async S=>{n.rowsSelectionMode==="single"&&(e.value=[],await pe());const m=g.value.filter(w=>S.includes(w.id));n.rowsSelectionMode==="single"&&(m.length=Math.min(1,m.length));for(const w of m)e.value.some(_=>_.id===w.id)||e.value.push(w);p()},i=()=>{e.value=[],p()},u=()=>g.value,c=()=>e.value,E=M(()=>e.value.length>0&&e.value.length===g.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:a,unselectAllRows:i,getDataRows:u,getSelectedRows:c,allRowsSelected:E}}const{selectedRows:B,rowsSelected:L,rowUnselected:W,selectRows:Y,unselectAllRows:V,getDataRows:Z,getSelectedRows:ee,allRowsSelected:$}=Q(),{filterStatus:d,resetFilters:P}=K(),{sortStatus:I,toggleSortArrow:te,currentSortStatus:k,resetSort:oe}=J(),{newPageSelected:le,totalRowsCount:C,currentPage:T,goToFirstPage:ae}=q(),re=async()=>{oe(),P(),V()},se=async()=>{f.value=!0;const e=await n.dataController({paginationStatus:{currentPage:T.value},sortStatus:k.value,filterStatus:d.value,triggeredEvent:"trigger"});g.value=e.data,C.value=e.totalRows,f.value=!1};return ie(()=>n.columns,()=>P(),{deep:!0,immediate:!0}),H({selectRows:Y,resetAllAndFetch:re,unselectAllRows:V,getDataRows:Z,getSelectedRows:ee,triggerDataController:se}),(e,p)=>(l(),s("div",Ce,[v("div",ke,[v("div",Ee,[v("table",Ae,[v("thead",null,[v("tr",be,[e.rowsSelectionMode?(l(),s("th",{key:0,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":e.rowsSelectionMode==="multiple"}])},[e.rowsSelectionMode==="multiple"?(l(),D(O,{key:0,"model-value":r($),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:p[0]||(p[0]=()=>r($)?r(V)():r(L)(g.value))},null,8,["model-value","disabled"])):(l(),s("div",xe))],2)):h("",!0),(l(!0),s(A,null,b(n.columns,(o,t)=>(l(),s("th",{key:t,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":r(I).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&r(te)(t)},[z(ue(o.title)+" ",1),o.noSort?h("",!0):(l(),s("svg",Ve,[r(I).arrows[t]?(l(),s("path",Pe)):(l(),s("path",Te))]))],10,Fe))),128))]),r(d).length>0&&!e.noFilters?(l(),s("tr",Ue,[e.rowsSelectionMode?(l(),s("th",De)):h("",!0),(l(!0),s(A,null,b(e.columns,(o,t)=>{var a,i,u,c,E,S,m,w;return l(),s("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&((i=r(d)[t])==null?void 0:i.type)==="FREE_SEARCH"?(l(),D(ve,{key:0,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":_=>r(d)[t].textSearch=_,placeholder:((u=o.filter)==null?void 0:u.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((c=o.filter)==null?void 0:c.type)==="DATE_RANGE"&&((E=r(d)[t])==null?void 0:E.type)==="DATE_RANGE"?(l(),s("div",Me,[R(we,{modelValue:r(d)[t].dateFrom,"onUpdate:modelValue":_=>r(d)[t].dateFrom=_,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((S=o.filter)==null?void 0:S.type)==="MULTI_VALUE"&&((m=r(d)[t])==null?void 0:m.type)==="MULTI_VALUE"?(l(),D(me,{key:2,modelValue:r(d)[t].textSearch,"onUpdate:modelValue":_=>r(d)[t].textSearch=_,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((w=o.filter)==null?void 0:w.type)==="RESET_FILTERS_BUTTON"?(l(),s("div",Be,[R(_e,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:r(P)},null,8,["onClick"])])):h("",!0)])}),128))])):h("",!0)]),R(fe,{name:"fade"},{default:ce(()=>[f.value?(l(),s("tbody",Le,[v("tr",null,[v("td",{colspan:n.columns.length+1},[R(Se,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,$e)])])):g.value.length>0?(l(),s("tbody",Ie,[(l(!0),s(A,null,b(g.value,o=>(l(),s("tr",{key:o.id,class:U(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&r(B).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(l(),s("td",Ne,[R(O,{"model-value":!!r(B).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?r(L)([o]):r(W)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):h("",!0),(l(!0),s(A,null,b(o.cells,(t,a)=>(l(),s("td",{key:a,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[R(ye,{cell:t},null,8,["cell"])],8,ze))),128))],2))),128))])):g.value.length===0?(l(),s("tbody",Oe,[v("tr",null,[v("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},[de(e.$slots,"no-data-message",{},()=>[z(" nessun dato trovato ")])],8,Ge)])])):h("",!0)]),_:3})])])]),R(ge,{ref_key:"pagination",ref:F,"total-rows-count":r(C),"rows-per-page":n.rowsPerPage,"hide-footer":n.noFooter,"onUpdate:currentPage":r(le)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});export{tt as default};
2
2
  //# sourceMappingURL=ElServerSideTable.vue.esm2.js.map
package/dist/src/table/ElServerSideTable.vue.esm2.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus | undefined;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array<FilterStatus>(MAX_COLS).fill(undefined);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index]?.type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index]?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index]?.type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}
1
+ {"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n title: string;\n filter?: TableColumnFilter;\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | TableColumnFilterMultiValue\n | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n id?: string;\n type: Extract<FilterType, 'FREE_SEARCH'>;\n placeholder?: string;\n initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n id?: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n placeholder?: string;\n initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n id?: string;\n type: Extract<FilterType, 'MULTI_VALUE'>;\n selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n sortStatus: SortStatus;\n paginationStatus: {\n currentPage: number;\n };\n filterStatus: FilterStatus[];\n triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n columnToSort: number;\n order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n columns: TableColumn[];\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n rowsPerPage?: number;\n dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus | undefined;\n\nexport type TextFilterStatus = {\n id?: string;\n textSearch: string;\n columnTitle: string;\n type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n id?: string;\n dateFrom: number;\n columnTitle: string;\n type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [...new Array(MAX_COLS)].map((v, i) => (i === props.sortByCol ? props.sortByColAsc : v)),\n });\n\n const resetSort = () => {\n sortStatus.value = {\n currentlySortColIndex: -1,\n arrows: [],\n };\n };\n const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n return {\n columnToSort: sortStatus.value.currentlySortColIndex,\n order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n };\n });\n\n const toggleSortArrow = async (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n loading.value = true;\n try {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'sort',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n } catch (error) {\n // TODO handle error\n console.error(error);\n } finally {\n loading.value = false;\n }\n };\n\n return {\n sortStatus,\n toggleSortArrow,\n currentSortStatus,\n resetSort,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<FilterStatus[]>([]);\n const isResettingFilters = ref(false);\n\n onMounted(() => {\n resetFilters();\n watchDeep(filterStatus, async filters => {\n if (isResettingFilters.value) {\n applyFilters(filters);\n isResettingFilters.value = false;\n } else {\n applyFiltersDebounced(filters);\n }\n });\n });\n\n const resetFilters = () => {\n isResettingFilters.value = true;\n\n filterStatus.value = new Array<FilterStatus>(MAX_COLS).fill(undefined);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\n\n if (filter) {\n if (filter.type === 'FREE_SEARCH') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'FREE_SEARCH',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'MULTI_VALUE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n textSearch: filter.initialValue ?? '',\n type: 'MULTI_VALUE',\n columnTitle: props.columns[i].title,\n });\n } else if (filter.type === 'DATE_RANGE') {\n filterStatus.value.splice(i, 1, {\n id: filter.id,\n dateFrom: filter.initialValue ?? 0,\n type: 'DATE_RANGE',\n columnTitle: props.columns[i].title,\n });\n }\n }\n }\n };\n\n const applyFilters = async (filters: FilterStatus[]) => {\n console.log('applyFilters');\n loading.value = true;\n goToFirstPage();\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filters,\n triggeredEvent: 'filter',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n };\n\n const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n return {\n filterStatus,\n resetFilters,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentPageDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n // Resetting filters and sort will trigger the dataController\n resetSort();\n resetFilters();\n unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nwatch(\n () => props.columns,\n () => resetFilters(),\n { deep: true, immediate: true },\n);\n\ndefineExpose({\n selectRows,\n resetAllAndFetch,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n triggerDataController,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none p-4 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index]?.type === 'FREE_SEARCH'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :leading-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index]?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index]?.type === 'MULTI_VALUE'\"\n v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"col.filter.selectOptions\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in DS version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentPageDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">\n <slot name=\"no-data-message\"> nessun dato trovato </slot>\n </td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <ElServerSideTablePagination\n ref=\"pagination\"\n :total-rows-count=\"totalRowsCount\"\n :rows-per-page=\"props.rowsPerPage\"\n :hide-footer=\"props.noFooter\"\n @update:current-page=\"newPageSelected\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","v","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"ipEAgGA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAUC,EAAI,EAAI,EAElBC,EAAW,GAEXC,EAAsBF,EAAe,CAAA,CAAE,EAEvCG,EAAaH,EAA6D,IAAI,EAEpFI,EAAU,SAAY,CACd,MAAAC,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAa,CACf,EACA,WAAYW,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,WAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,CACjB,EAED,SAASU,GAAgB,CACjBD,MAAAA,EAAiBR,EAAI,CAAC,EACtBU,EAAcC,EAAS,IAAM,OAAA,QAAAC,EAAAT,EAAW,QAAX,YAAAS,EAAkB,cAAe,EAAC,EAmB9D,MAAA,CACL,gBAhBsB,MAAOC,GAAoB,CACjDd,EAAQ,MAAQ,GACIG,EAAA,OAClB,MAAMP,EAAM,eAAe,CACzB,iBAAkB,CAChB,YAAakB,CACf,EACA,WAAYP,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,UACjB,CAAA,GACD,KACFR,EAAQ,MAAQ,EAAA,EAKhB,eAAAS,EACA,YAAAE,EACA,cArBoB,WAAM,OAAAE,EAAAT,EAAW,QAAX,YAAAS,EAAkB,SAAS,EAAG,CAAE,eAAgB,EAAA,GAqB1E,CAEJ,CAEA,SAASE,GAAa,CACpB,MAAMC,EAAaf,EAGhB,CACD,sBAAuBL,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,GAAG,IAAI,MAAMM,CAAQ,CAAC,EAAE,IAAI,CAACe,EAAG,IAAO,IAAMrB,EAAM,UAAYA,EAAM,aAAeqB,CAAE,CAAA,CAChG,EAEKC,EAAY,IAAM,CACtBF,EAAW,MAAQ,CACjB,sBAAuB,GACvB,OAAQ,CAAC,CAAA,CACX,EAEIT,EAAoBK,EAAqC,KACtD,CACL,aAAcI,EAAW,MAAM,sBAC/B,MAAOA,EAAW,MAAM,OAAOA,EAAW,MAAM,qBAAqB,EAAI,MAAQ,MAAA,EAEpF,EAyBM,MAAA,CACL,WAAAA,EACA,gBAzBsB,MAAOG,GAAqB,CAClDH,EAAW,MAAM,sBAAwBG,EACzCH,EAAW,MAAM,OAAO,OAAOG,EAAU,EAAG,CAACH,EAAW,MAAM,OAAOG,CAAQ,CAAC,EAC9EnB,EAAQ,MAAQ,GACZ,GAAA,CACI,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,MAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,gBACxBc,EAAO,CAEd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACApB,EAAQ,MAAQ,EAClB,CAAA,EAMA,kBAAAO,EACA,UAAAW,CAAA,CAEJ,CAEA,SAASG,GAAa,CACdb,MAAAA,EAAeP,EAAoB,CAAA,CAAE,EACrCqB,EAAqBrB,EAAI,EAAK,EAEpCI,EAAU,IAAM,CACdkB,IACUf,GAAAA,EAAc,MAAMgB,GAAW,CACnCF,EAAmB,OACrBG,EAAaD,CAAO,EACpBF,EAAmB,MAAQ,IAE3BI,EAAsBF,CAAO,CAC/B,CACD,CAAA,CACF,EAED,MAAMD,EAAe,IAAM,OACzBD,EAAmB,MAAQ,GAE3Bd,EAAa,MAAQ,IAAI,MAAoBN,CAAQ,EAAE,KAAK,MAAS,EACrE,QAASyB,EAAI,EAAGA,EAAIzB,EAAUyB,IAAK,CACjC,MAAMC,GAASf,EAAAjB,EAAM,QAAQ+B,CAAC,IAAf,YAAAd,EAAkB,OAE7Be,IACEA,EAAO,OAAS,cAClBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBpB,EAAa,MAAM,OAAOmB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,SAAUA,EAAO,cAAgB,EACjC,KAAM,aACN,YAAahC,EAAM,QAAQ+B,CAAC,EAAE,KAAA,CAC/B,EAGP,CAAA,EAGIF,EAAe,MAAOD,GAA4B,CACtD,QAAQ,IAAI,cAAc,EAC1BxB,EAAQ,MAAQ,GACF6B,KACR,MAAAvB,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAciB,EACd,eAAgB,QAAA,CACjB,EACDrB,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGZ0B,EAAwBI,GAAcL,EAAc,GAAG,EAEtD,MAAA,CACL,aAAAjB,EACA,aAAAe,CAAA,CAEJ,CAEA,SAASQ,GAAmB,CACpBC,MAAAA,EAAe/B,EAAsC,CAAA,CAAE,EAEvDgC,EAAmB,IAAM,CACxBnC,EAAA,gBAAiBkC,EAAa,KAAK,CAAA,EAGpCE,EAAgBC,GAAoB,CACxCC,EAAWD,EAAK,IAASE,GAAAA,EAAE,EAAE,CAAC,CAAA,EAG1BC,EAAiBC,GAAkB,CACvC,MAAMC,EAAQR,EAAa,MAAM,UAAeK,GAAAA,EAAE,KAAOE,CAAK,EAC9DP,EAAa,MAAM,OAAOQ,EAAO,CAAC,EACjBP,GAAA,EAIbG,EAAa,MAAOK,GAAsB,CAC1C7C,EAAM,oBAAsB,WAC9BoC,EAAa,MAAQ,GACrB,MAAMU,GAAS,GAEX,MAAAC,EAAexC,EAAoB,MAAM,UAAYsC,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC7EzC,EAAM,oBAAsB,WAC9B+C,EAAa,OAAS,KAAK,IAAI,EAAGA,EAAa,MAAM,GAGvD,UAAWC,KAAOD,EACXX,EAAa,MAAM,QAAUK,EAAE,KAAOO,EAAI,EAAE,GAC/CZ,EAAa,MAAM,KAAKY,CAAG,EAIdX,GAAA,EAGbY,EAAkB,IAAM,CAC5Bb,EAAa,MAAQ,GACJC,GAAA,EAGba,EAAc,IAAiB3C,EAAoB,MACnD4C,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBpC,EAAS,IACxBoB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAW7B,EAAoB,MAAM,MACjG,EAEM,MAAA,CACL,aAAA6B,EACA,aAAAE,EACA,cAAAI,EACA,WAAAF,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAEJ,CAEM,KAAA,CAAE,aAAAhB,EAAc,aAAAE,EAAc,cAAAI,EAAe,WAAAF,EAAY,gBAAAS,EAAiB,YAAAC,EAAa,gBAAAC,GAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAAvB,EAAc,aAAAe,CAAa,EAAIF,EAAW,EAC5C,CAAE,WAAAL,EAAY,gBAAAiC,GAAiB,kBAAA1C,EAAmB,UAAAW,EAAA,EAAcH,IAChE,CAAE,gBAAAmC,GAAiB,eAAAzC,EAAgB,YAAAE,EAAa,cAAAkB,EAAA,EAAkBnB,IAElEyC,GAAmB,SAAY,CAEzBjC,KACGK,IACGsB,GAAA,EAGZO,GAAwB,SAAY,CACxCpD,EAAQ,MAAQ,GACV,MAAAM,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcC,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDL,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGlB,OAAAqD,GACE,IAAMzD,EAAM,QACZ,IAAM2B,EAAa,EACnB,CAAE,KAAM,GAAM,UAAW,EAAK,CAAA,EAGnB+B,EAAA,CACX,WAAAlB,EACA,iBAAAe,GACA,gBAAAN,EACA,YAAAC,EACA,gBAAAC,GACA,sBAAAK,EAAA,CACD"}
package/dist/table/ElMobileTable.vue.d.ts CHANGED
@@ -133,6 +133,7 @@ export interface ElMobileTableProps {
133
133
  declare function __VLS_template(): {
134
134
  default?(_: {}): any;
135
135
  "after-list"?(_: {}): any;
136
+ "no-data-message"?(_: {}): any;
136
137
  };
137
138
  declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<ElMobileTableProps>, {
138
139
  filteredData: import('vue').ComputedRef<MobileTableRow[]>;
package/dist/table/ElServerSideMobileTable.vue.d.ts CHANGED
@@ -35,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
35
35
  "onSelection:exit"?: (() => any) | undefined;
36
36
  }, {}, {}>, {
37
37
  default?(_: {}): any;
38
+ "no-data-message"?(_: {}): any;
38
39
  }>;
39
40
  export default _default;
40
41
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
package/dist/table/ElServerSideTable.vue.d.ts CHANGED
@@ -68,7 +68,7 @@ export type DateFilterStatus = {
68
68
  columnTitle: string;
69
69
  type: Extract<FilterType, 'DATE_RANGE'>;
70
70
  };
71
- declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ServerSideTableProps>, {
71
+ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ServerSideTableProps>, {
72
72
  sortByCol: number;
73
73
  sortByColAsc: boolean;
74
74
  rowsSelectionMode: undefined;
@@ -96,7 +96,9 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
96
96
  sortByCol: number;
97
97
  sortByColAsc: boolean;
98
98
  rowsSelectionMode: "single" | "multiple";
99
- }, {}>;
99
+ }, {}>, {
100
+ "no-data-message"?(_: {}): any;
101
+ }>;
100
102
  export default _default;
101
103
  type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
102
104
  type __VLS_TypePropsToRuntimeProps<T> = {
@@ -115,3 +117,8 @@ type __VLS_WithDefaults<P, D> = {
115
117
  type __VLS_Prettify<T> = {
116
118
  [K in keyof T]: T[K];
117
119
  } & {};
120
+ type __VLS_WithTemplateSlots<T, S> = T & {
121
+ new (): {
122
+ $slots: S;
123
+ };
124
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@davincihealthcare/elty-design-system-vue",
3
- "version": "2.14.5",
3
+ "version": "2.16.0",
4
4
  "license": "UNLICENSED",
5
5
  "main": "dist/index.umd.cjs",
6
6
  "types": "dist/index.d.ts",