npm - @davincihealthcare/elty-design-system-vue - Versions diffs - 1.73.1 → 1.73.3 - Mend

@davincihealthcare/elty-design-system-vue 1.73.1 → 1.73.3

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 (13) hide show

package/dist/forms/ElInputFile.vue.cjs2.js +1 -1
package/dist/forms/ElInputFile.vue.cjs2.js.map +1 -1
package/dist/forms/ElInputFile.vue.esm2.js +1 -1
package/dist/forms/ElInputFile.vue.esm2.js.map +1 -1
package/dist/table/ElServerSideTable.vue.cjs2.js +1 -1
package/dist/table/ElServerSideTable.vue.cjs2.js.map +1 -1
package/dist/table/ElServerSideTable.vue.esm2.js +1 -1
package/dist/table/ElServerSideTable.vue.esm2.js.map +1 -1
package/dist/table/ElTable.vue.cjs2.js +1 -1
package/dist/table/ElTable.vue.cjs2.js.map +1 -1
package/dist/table/ElTable.vue.esm2.js +1 -1
package/dist/table/ElTable.vue.esm2.js.map +1 -1
package/package.json +1 -1

package/dist/forms/ElInputFile.vue.cjs2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./input.cjs.js"),k=require("./ElInputContainer.vue.cjs2.js"),x=require("../ElFile.vue.cjs2.js"),M=require("../ElIcon.vue.cjs2.js"),_=require("../ElToast.vue.cjs2.js"),F={class:"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20"},z=["for"],q={key:0,class:"text-xs"},C=["id","accept","disabled","name","multiple"],V=["image","document","csv","excel","any","zip","patientsImportDataFpfV5","patientsImportDataHippocrates","patientsImportDataIatros","patientsImportDataMdb2000","patientsImportDataMillewin","patientsImportDataPhronesis","patientsImportDataFastamb","patientsImportDataMedico2000","patientsImportDataTServe","patientsImportDataProfim","patientsImportDataMillewinAttachments","patientsImportDataAdvmednet"],E=e.defineComponent({__name:"ElInputFile",props:{...d.withCommonElInputProps(),modelValue:{type:Array,required:!0},content:{type:String,default:void 0},multiple:{type:Boolean,default:!1},fileType:{type:String,default:"document",required:!1}},emits:["update:modelValue"],setup(i,{emit:f}){const s=i,o=e.ref(!1),u=e.ref(),v=f,b=e.toRef(s.modelValue),c=e.computed(()=>{switch(s.fileType){case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":return[".mdb",".zip"];case"patientsImportDataHippocrates":return[".xml",".zip"];case"patientsImportDataIatros":return[".xml",".mdb",".sql",".backup",".zip"];case"patientsImportDataMillewin":return[".sql",".backup",".db3",".zip"];case"patientsImportDataPhronesis":return[".sqlite",".sqlite3",".db",".db3",".s3db",".sl3",".gz"];case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":return[".zip"];case"image":return["image/jpeg","image/png"];case"document":return[".doc",".docx",".xml","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document",".pdf"];case"csv":return[".csv"];case"excel":return[".xlsx"];default:return["*"]}}),g=e.computed(()=>{const t=[s.validation];switch(s.fileType){case"image":t.push("ext:jpg,png,jpeg");break;case"document":t.push("ext:doc,docs,xml,pdf");break;case"csv":t.push("ext:csv");break;case"excel":t.push("ext:xlsx");break;case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":t.push("ext:mdb,zip");break;case"patientsImportDataHippocrates":t.push("ext:xml,zip");break;case"patientsImportDataIatros":t.push("ext:xml,mdb,sql,backup,zip");break;case"patientsImportDataMillewin":t.push("ext:sql,backup,.db3,zip");break;case"patientsImportDataPhronesis":t.push("ext:sqlite,sqlite3,db,db3,s3db,sl3,gz");break;case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":t.push("ext:zip");break}return t}),{value:n,errorMessage:h,uuid:p}=d.useInput(b,g,s.name,t=>{v("update:modelValue",t)}),I=t=>{const a=t.target;a&&m(a.files)},D=t=>{t.dataTransfer&&(m(t.dataTransfer.files),o.value=!1)},m=t=>{var a;y(t),(a=u.value)!=null&&a.value&&(u.value.value=null)},y=t=>{if(!t)return;const a=[...t];if(!a.every(r=>c.value.some(l=>r.name.toLowerCase().endsWith(l)||r.type.toLowerCase()===l||l==="*")))return _.toast("Formato non supportato, verifica di aver inserito un file/s con il formato corretto",{state:"error"});n.value=[...n.value,...a],!s.multiple&&n.value.length>1&&(n.value=[n.value[0]])},w=t=>{n.value=n.value.filter((a,r)=>r!==t)};return(t,a)=>(e.openBlock(),e.createBlock(k.default,e.mergeProps(t.$attrs,{name:e.unref(p),label:t.label,"error-message":s.errorMessage===!1?!1:s.errorMessage||e.unref(h),"hidden-error-message":t.hiddenErrorMessage,class:"relative inline-block w-full"}),{default:e.withCtx(()=>[e.createElementVNode("div",F,[e.unref(n).length==0||i.multiple?(e.openBlock(),e.createElementBlock("label",{key:0,tabIndex:"0",for:e.unref(p),class:e.normalizeClass(["min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full",{"bg-white":!o.value,"bg-primary-light-hover":o.value,"hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused":!t.disabled,"border-gray-300 text-gray-300 cursor-not-allowed":t.disabled,"border-primary":!t.disabled&&!o.value,"border-primary-hover":!t.disabled&&o.value}]),onDragover:a[0]||(a[0]=e.withModifiers(r=>o.value=!0,["prevent"])),onDrop:e.withModifiers(D,["prevent"]),onDragenter:a[1]||(a[1]=e.withModifiers(r=>o.value=!0,["prevent"])),onDragleave:a[2]||(a[2]=e.withModifiers(r=>o.value=!1,["prevent"]))},[e.createVNode(M.default,{name:"ArrowUpCircleIcon",class:e.normalizeClass({"w-5 h-5":i.content,"w-7 h-7":!i.content,"cursor-pointer":!t.disabled})},null,8,["class"]),i.content?(e.openBlock(),e.createElementBlock("span",q,e.toDisplayString(i.content),1)):e.createCommentVNode("",!0)],42,z)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:e.unref(p),ref_key:"inputField",ref:u,type:"file",class:"hidden",accept:c.value.join(","),disabled:t.disabled,name:s.name||e.unref(p),multiple:i.multiple,onChange:e.withModifiers(I,["prevent"])},null,40,C),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),(r,l)=>(e.openBlock(),e.createBlock(x.default,{key:`file-${l}`,variant:"primary",name:r.name,format:r.type,class:"w-full",disabled:t.disabled,onClose:A=>w(l)},null,8,["name","format","disabled","onClose"]))),128))])]),_:1},16,["name","label","error-message","hidden-error-message"]))}});exports.default=E;exports.elInputFileTypes=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./input.cjs.js"),k=require("./ElInputContainer.vue.cjs2.js"),x=require("../ElFile.vue.cjs2.js"),M=require("../ElIcon.vue.cjs2.js"),_=require("../ElToast.vue.cjs2.js"),F={class:"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20"},q=["for"],C={key:0,class:"text-xs"},V=["id","accept","disabled","name","multiple"],E=["image","document","csv","excel","any","zip","patientsImportDataFpfV5","patientsImportDataHippocrates","patientsImportDataIatros","patientsImportDataMdb2000","patientsImportDataMillewin","patientsImportDataPhronesis","patientsImportDataFastamb","patientsImportDataMedico2000","patientsImportDataTServe","patientsImportDataProfim","patientsImportDataMillewinAttachments","patientsImportDataAdvmednet"],A=e.defineComponent({__name:"ElInputFile",props:{...d.withCommonElInputProps(),modelValue:{type:Array,required:!0},content:{type:String,default:void 0},multiple:{type:Boolean,default:!1},fileType:{type:String,default:"document",required:!1}},emits:["update:modelValue"],setup(i,{emit:f}){const s=i,o=e.ref(!1),u=e.ref(),v=f,b=e.toRef(s.modelValue),c=e.computed(()=>{switch(s.fileType){case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":return[".mdb"];case"patientsImportDataHippocrates":return[".xml"];case"patientsImportDataIatros":return[".xml",".mdb",".sql",".backup"];case"patientsImportDataMillewin":return[".sql",".backup",".db3"];case"patientsImportDataPhronesis":return[".sqlite",".sqlite3",".db",".db3",".s3db",".sl3",".gz"];case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":return[".zip"];case"image":return["image/jpeg","image/png"];case"document":return[".doc",".docx",".xml","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document",".pdf"];case"csv":return[".csv"];case"excel":return[".xlsx"];default:return["*"]}}),g=e.computed(()=>{const t=[s.validation];switch(s.fileType){case"image":t.push("ext:jpg,png,jpeg");break;case"document":t.push("ext:doc,docs,xml,pdf");break;case"csv":t.push("ext:csv");break;case"excel":t.push("ext:xlsx");break;case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":t.push("ext:mdb");break;case"patientsImportDataHippocrates":t.push("ext:xml");break;case"patientsImportDataIatros":t.push("ext:xml,mdb,sql,backup");break;case"patientsImportDataMillewin":t.push("ext:sql,backup,.db3");break;case"patientsImportDataPhronesis":t.push("ext:sqlite,sqlite3,db,db3,s3db,sl3,gz");break;case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":t.push("ext:zip");break}return t}),{value:n,errorMessage:h,uuid:p}=d.useInput(b,g,s.name,t=>{v("update:modelValue",t)}),I=t=>{const a=t.target;a&&m(a.files)},D=t=>{t.dataTransfer&&(m(t.dataTransfer.files),o.value=!1)},m=t=>{var a;y(t),(a=u.value)!=null&&a.value&&(u.value.value=null)},y=t=>{if(!t)return;const a=[...t];if(!a.every(r=>c.value.some(l=>r.name.toLowerCase().endsWith(l)||r.type.toLowerCase()===l||l==="*")))return _.toast("Formato non supportato, verifica di aver inserito un file/s con il formato corretto",{state:"error"});n.value=[...n.value,...a],!s.multiple&&n.value.length>1&&(n.value=[n.value[0]])},w=t=>{n.value=n.value.filter((a,r)=>r!==t)};return(t,a)=>(e.openBlock(),e.createBlock(k.default,e.mergeProps(t.$attrs,{name:e.unref(p),label:t.label,"error-message":s.errorMessage===!1?!1:s.errorMessage||e.unref(h),"hidden-error-message":t.hiddenErrorMessage,class:"relative inline-block w-full"}),{default:e.withCtx(()=>[e.createElementVNode("div",F,[e.unref(n).length==0||i.multiple?(e.openBlock(),e.createElementBlock("label",{key:0,tabIndex:"0",for:e.unref(p),class:e.normalizeClass(["min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full",{"bg-white":!o.value,"bg-primary-light-hover":o.value,"hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused":!t.disabled,"border-gray-300 text-gray-300 cursor-not-allowed":t.disabled,"border-primary":!t.disabled&&!o.value,"border-primary-hover":!t.disabled&&o.value}]),onDragover:a[0]||(a[0]=e.withModifiers(r=>o.value=!0,["prevent"])),onDrop:e.withModifiers(D,["prevent"]),onDragenter:a[1]||(a[1]=e.withModifiers(r=>o.value=!0,["prevent"])),onDragleave:a[2]||(a[2]=e.withModifiers(r=>o.value=!1,["prevent"]))},[e.createVNode(M.default,{name:"ArrowUpCircleIcon",class:e.normalizeClass({"w-5 h-5":i.content,"w-7 h-7":!i.content,"cursor-pointer":!t.disabled})},null,8,["class"]),i.content?(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(i.content),1)):e.createCommentVNode("",!0)],42,q)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:e.unref(p),ref_key:"inputField",ref:u,type:"file",class:"hidden",accept:c.value.join(","),disabled:t.disabled,name:s.name||e.unref(p),multiple:i.multiple,onChange:e.withModifiers(I,["prevent"])},null,40,V),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(n),(r,l)=>(e.openBlock(),e.createBlock(x.default,{key:`file-${l}`,variant:"primary",name:r.name,format:r.type,class:"w-full",disabled:t.disabled,onClose:B=>w(l)},null,8,["name","format","disabled","onClose"]))),128))])]),_:1},16,["name","label","error-message","hidden-error-message"]))}});exports.default=A;exports.elInputFileTypes=E;
 //# sourceMappingURL=ElInputFile.vue.cjs2.js.map

package/dist/forms/ElInputFile.vue.cjs2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElInputFile.vue.cjs2.js","sources":["../../src/forms/ElInputFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputFileTypes = [\n 'image',\n 'document',\n 'csv',\n 'excel',\n 'any',\n 'zip',\n 'patientsImportDataFpfV5',\n 'patientsImportDataHippocrates',\n 'patientsImportDataIatros',\n 'patientsImportDataMdb2000',\n 'patientsImportDataMillewin',\n 'patientsImportDataPhronesis',\n 'patientsImportDataFastamb',\n 'patientsImportDataMedico2000',\n 'patientsImportDataTServe',\n 'patientsImportDataProfim',\n 'patientsImportDataMillewinAttachments',\n 'patientsImportDataAdvmednet',\n] as const;\nexport type ElInputFileType = (typeof elInputFileTypes)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef, PropType } from 'vue';\nimport { useInput, withCommonElInputProps } from '@/forms/input';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElFile from '@/ElFile.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { toast } from '@/ElToast.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: Array as () => File[],\n required: true,\n },\n content: {\n type: String,\n default: undefined,\n },\n multiple: {\n type: Boolean,\n default: false,\n },\n fileType: {\n type: String as PropType<ElInputFileType>,\n default: 'document',\n required: false,\n },\n});\n\nconst dragging = ref(false);\nconst inputField = ref<HTMLFormElement>();\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', files: File[]): void;\n}>();\n\nconst modelValue = toRef(props.modelValue);\n\nconst computedAcceptedFileExtensionsOrMimeType = computed<string[]>(() => {\n switch (props.fileType) {\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n return ['.mdb', '.zip'];\n case 'patientsImportDataHippocrates':\n return ['.xml', '.zip'];\n case 'patientsImportDataIatros':\n return ['.xml', '.mdb', '.sql', '.backup', '.zip'];\n case 'patientsImportDataMillewin':\n return ['.sql', '.backup', '.db3', '.zip'];\n case 'patientsImportDataPhronesis':\n return ['.sqlite', '.sqlite3', '.db', '.db3', '.s3db', '.sl3', '.gz'];\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n return ['.zip'];\n case 'image':\n return ['image/jpeg', 'image/png'];\n case 'document':\n // any pdf or word-like document\n return [\n '.doc',\n '.docx',\n '.xml',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n '.pdf',\n ];\n case 'csv':\n return ['.csv'];\n case 'excel':\n return ['.xlsx'];\n default:\n return [''];\n }\n});\nconst computedValidation = computed(() => {\n const validations = [props.validation];\n switch (props.fileType) {\n case 'image':\n validations.push('ext:jpg,png,jpeg');\n break;\n case 'document':\n validations.push('ext:doc,docs,xml,pdf');\n break;\n case 'csv':\n validations.push('ext:csv');\n break;\n case 'excel':\n validations.push('ext:xlsx');\n break;\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n validations.push('ext:mdb,zip');\n break;\n case 'patientsImportDataHippocrates':\n validations.push('ext:xml,zip');\n break;\n case 'patientsImportDataIatros':\n validations.push('ext:xml,mdb,sql,backup,zip');\n break;\n case 'patientsImportDataMillewin':\n validations.push('ext:sql,backup,.db3,zip');\n break;\n case 'patientsImportDataPhronesis':\n validations.push('ext:sqlite,sqlite3,db,db3,s3db,sl3,gz');\n break;\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n validations.push('ext:zip');\n break;\n default:\n break;\n }\n return validations;\n});\n\nconst { value, errorMessage, uuid } = useInput(modelValue, computedValidation, props.name, (newValue: File[]) => {\n emit('update:modelValue', newValue);\n});\n\nconst onChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (!target) return;\n loadFilesAndClearInput(target.files);\n};\n\nconst onDrop = (event: DragEvent) => {\n if (!event.dataTransfer) return;\n loadFilesAndClearInput(event.dataTransfer.files);\n dragging.value = false;\n};\n\nconst loadFilesAndClearInput = (newFiles: FileList \| null) => {\n loadFiles(newFiles);\n if (inputField.value?.value) inputField.value.value = null;\n};\n\nconst loadFiles = (newFiles: FileList \| null) => {\n if (!newFiles) return;\n const newFilesArray = [...newFiles];\n\n if (\n !newFilesArray.every(file =>\n computedAcceptedFileExtensionsOrMimeType.value.some(\n extensionOrMimeType =>\n file.name.toLowerCase().endsWith(extensionOrMimeType) \|\|\n file.type.toLowerCase() === extensionOrMimeType \|\|\n extensionOrMimeType === '',\n ),\n )\n ) {\n return toast('Formato non supportato, verifica di aver inserito un file/s con il formato corretto', { state: 'error' });\n }\n\n value.value = [...value.value, ...newFilesArray];\n if (!props.multiple && value.value.length > 1) {\n value.value = [value.value[0]];\n }\n};\n\nconst removeFile = (idx: number) => {\n value.value = value.value.filter((_, i) => i !== idx);\n};\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage \|\| errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n class=\"relative inline-block w-full\"\n >\n <div class=\"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20\">\n <label\n v-if=\"value.length == 0 \|\| multiple\"\n tabIndex=\"0\"\n :for=\"uuid\"\n class=\"min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full\"\n :class=\"{\n 'bg-white': !dragging,\n 'bg-primary-light-hover': dragging,\n 'hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused':\n !disabled,\n 'border-gray-300 text-gray-300 cursor-not-allowed': disabled,\n 'border-primary': !disabled && !dragging,\n 'border-primary-hover': !disabled && dragging,\n }\"\n @dragover.prevent=\"dragging = true\"\n @drop.prevent=\"onDrop\"\n @dragenter.prevent=\"dragging = true\"\n @dragleave.prevent=\"dragging = false\"\n >\n <ElIcon\n name=\"ArrowUpCircleIcon\"\n :class=\"{\n 'w-5 h-5': content,\n 'w-7 h-7': !content,\n 'cursor-pointer': !disabled,\n }\"\n ></ElIcon>\n <span v-if=\"content\" class=\"text-xs\">{{ content }}</span>\n </label>\n <input\n :id=\"uuid\"\n ref=\"inputField\"\n type=\"file\"\n class=\"hidden\"\n :accept=\"computedAcceptedFileExtensionsOrMimeType.join(',')\"\n :disabled=\"disabled\"\n :name=\"props.name \|\| uuid\"\n :multiple=\"multiple\"\n @change.prevent=\"onChange\"\n />\n <ElFile\n v-for=\"(file, index) in value\"\n :key=\"`file-${index}`\"\n variant=\"primary\"\n :name=\"file.name\"\n :format=\"file.type\"\n class=\"w-full\"\n :disabled=\"disabled\"\n @close=\"removeFile(index)\"\n />\n </div>\n </ElInputContainer>\n</template>\n"],"names":["elInputFileTypes","props","__props","dragging","ref","inputField","emit","__emit","modelValue","toRef","computedAcceptedFileExtensionsOrMimeType","computed","computedValidation","validations","value","errorMessage","uuid","useInput","newValue","onChange","event","target","loadFilesAndClearInput","onDrop","newFiles","loadFiles","_a","newFilesArray","file","extensionOrMimeType","toast","removeFile","idx","_","i"],"mappings":"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"}
1	+ {"version":3,"file":"ElInputFile.vue.cjs2.js","sources":["../../src/forms/ElInputFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputFileTypes = [\n 'image',\n 'document',\n 'csv',\n 'excel',\n 'any',\n 'zip',\n 'patientsImportDataFpfV5',\n 'patientsImportDataHippocrates',\n 'patientsImportDataIatros',\n 'patientsImportDataMdb2000',\n 'patientsImportDataMillewin',\n 'patientsImportDataPhronesis',\n 'patientsImportDataFastamb',\n 'patientsImportDataMedico2000',\n 'patientsImportDataTServe',\n 'patientsImportDataProfim',\n 'patientsImportDataMillewinAttachments',\n 'patientsImportDataAdvmednet',\n] as const;\nexport type ElInputFileType = (typeof elInputFileTypes)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef, PropType } from 'vue';\nimport { useInput, withCommonElInputProps } from '@/forms/input';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElFile from '@/ElFile.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { toast } from '@/ElToast.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: Array as () => File[],\n required: true,\n },\n content: {\n type: String,\n default: undefined,\n },\n multiple: {\n type: Boolean,\n default: false,\n },\n fileType: {\n type: String as PropType<ElInputFileType>,\n default: 'document',\n required: false,\n },\n});\n\nconst dragging = ref(false);\nconst inputField = ref<HTMLFormElement>();\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', files: File[]): void;\n}>();\n\nconst modelValue = toRef(props.modelValue);\n\nconst computedAcceptedFileExtensionsOrMimeType = computed<string[]>(() => {\n switch (props.fileType) {\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n return ['.mdb'];\n case 'patientsImportDataHippocrates':\n return ['.xml'];\n case 'patientsImportDataIatros':\n return ['.xml', '.mdb', '.sql', '.backup'];\n case 'patientsImportDataMillewin':\n return ['.sql', '.backup', '.db3'];\n case 'patientsImportDataPhronesis':\n return ['.sqlite', '.sqlite3', '.db', '.db3', '.s3db', '.sl3', '.gz'];\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n return ['.zip'];\n case 'image':\n return ['image/jpeg', 'image/png'];\n case 'document':\n // any pdf or word-like document\n return [\n '.doc',\n '.docx',\n '.xml',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n '.pdf',\n ];\n case 'csv':\n return ['.csv'];\n case 'excel':\n return ['.xlsx'];\n default:\n return [''];\n }\n});\nconst computedValidation = computed(() => {\n const validations = [props.validation];\n switch (props.fileType) {\n case 'image':\n validations.push('ext:jpg,png,jpeg');\n break;\n case 'document':\n validations.push('ext:doc,docs,xml,pdf');\n break;\n case 'csv':\n validations.push('ext:csv');\n break;\n case 'excel':\n validations.push('ext:xlsx');\n break;\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n validations.push('ext:mdb');\n break;\n case 'patientsImportDataHippocrates':\n validations.push('ext:xml');\n break;\n case 'patientsImportDataIatros':\n validations.push('ext:xml,mdb,sql,backup');\n break;\n case 'patientsImportDataMillewin':\n validations.push('ext:sql,backup,.db3');\n break;\n case 'patientsImportDataPhronesis':\n validations.push('ext:sqlite,sqlite3,db,db3,s3db,sl3,gz');\n break;\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n validations.push('ext:zip');\n break;\n default:\n break;\n }\n return validations;\n});\n\nconst { value, errorMessage, uuid } = useInput(modelValue, computedValidation, props.name, (newValue: File[]) => {\n emit('update:modelValue', newValue);\n});\n\nconst onChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (!target) return;\n loadFilesAndClearInput(target.files);\n};\n\nconst onDrop = (event: DragEvent) => {\n if (!event.dataTransfer) return;\n loadFilesAndClearInput(event.dataTransfer.files);\n dragging.value = false;\n};\n\nconst loadFilesAndClearInput = (newFiles: FileList \| null) => {\n loadFiles(newFiles);\n if (inputField.value?.value) inputField.value.value = null;\n};\n\nconst loadFiles = (newFiles: FileList \| null) => {\n if (!newFiles) return;\n const newFilesArray = [...newFiles];\n\n if (\n !newFilesArray.every(file =>\n computedAcceptedFileExtensionsOrMimeType.value.some(\n extensionOrMimeType =>\n file.name.toLowerCase().endsWith(extensionOrMimeType) \|\|\n file.type.toLowerCase() === extensionOrMimeType \|\|\n extensionOrMimeType === '',\n ),\n )\n ) {\n return toast('Formato non supportato, verifica di aver inserito un file/s con il formato corretto', { state: 'error' });\n }\n\n value.value = [...value.value, ...newFilesArray];\n if (!props.multiple && value.value.length > 1) {\n value.value = [value.value[0]];\n }\n};\n\nconst removeFile = (idx: number) => {\n value.value = value.value.filter((_, i) => i !== idx);\n};\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage \|\| errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n class=\"relative inline-block w-full\"\n >\n <div class=\"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20\">\n <label\n v-if=\"value.length == 0 \|\| multiple\"\n tabIndex=\"0\"\n :for=\"uuid\"\n class=\"min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full\"\n :class=\"{\n 'bg-white': !dragging,\n 'bg-primary-light-hover': dragging,\n 'hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused':\n !disabled,\n 'border-gray-300 text-gray-300 cursor-not-allowed': disabled,\n 'border-primary': !disabled && !dragging,\n 'border-primary-hover': !disabled && dragging,\n }\"\n @dragover.prevent=\"dragging = true\"\n @drop.prevent=\"onDrop\"\n @dragenter.prevent=\"dragging = true\"\n @dragleave.prevent=\"dragging = false\"\n >\n <ElIcon\n name=\"ArrowUpCircleIcon\"\n :class=\"{\n 'w-5 h-5': content,\n 'w-7 h-7': !content,\n 'cursor-pointer': !disabled,\n }\"\n ></ElIcon>\n <span v-if=\"content\" class=\"text-xs\">{{ content }}</span>\n </label>\n <input\n :id=\"uuid\"\n ref=\"inputField\"\n type=\"file\"\n class=\"hidden\"\n :accept=\"computedAcceptedFileExtensionsOrMimeType.join(',')\"\n :disabled=\"disabled\"\n :name=\"props.name \|\| uuid\"\n :multiple=\"multiple\"\n @change.prevent=\"onChange\"\n />\n <ElFile\n v-for=\"(file, index) in value\"\n :key=\"`file-${index}`\"\n variant=\"primary\"\n :name=\"file.name\"\n :format=\"file.type\"\n class=\"w-full\"\n :disabled=\"disabled\"\n @close=\"removeFile(index)\"\n />\n </div>\n </ElInputContainer>\n</template>\n"],"names":["elInputFileTypes","props","__props","dragging","ref","inputField","emit","__emit","modelValue","toRef","computedAcceptedFileExtensionsOrMimeType","computed","computedValidation","validations","value","errorMessage","uuid","useInput","newValue","onChange","event","target","loadFilesAndClearInput","onDrop","newFiles","loadFiles","_a","newFilesArray","file","extensionOrMimeType","toast","removeFile","idx","_","i"],"mappings":"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"}

package/dist/forms/ElInputFile.vue.esm2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineComponent as q,ref as b,toRef as $,computed as g,openBlock as p,createBlock as h,mergeProps as P,unref as i,withCtx as T,createElementVNode as I,createElementBlock as c,normalizeClass as D,withModifiers as m,createVNode as E,toDisplayString as S,createCommentVNode as y,Fragment as j,renderList as B}from"vue";import{withCommonElInputProps as H,useInput as L}from"./input.esm.js";import N from"./ElInputContainer.vue.esm2.js";import R from"../ElFile.vue.esm2.js";import U from"../ElIcon.vue.esm2.js";import{toast as W}from"../ElToast.vue.esm2.js";const G={class:"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20"},J=["for"],K={key:0,class:"text-xs"},Q=["id","accept","disabled","name","multiple"],ae=["image","document","csv","excel","any","zip","patientsImportDataFpfV5","patientsImportDataHippocrates","patientsImportDataIatros","patientsImportDataMdb2000","patientsImportDataMillewin","patientsImportDataPhronesis","patientsImportDataFastamb","patientsImportDataMedico2000","patientsImportDataTServe","patientsImportDataProfim","patientsImportDataMillewinAttachments","patientsImportDataAdvmednet"],re=q({__name:"ElInputFile",props:{...H(),modelValue:{type:Array,required:!0},content:{type:String,default:void 0},multiple:{type:Boolean,default:!1},fileType:{type:String,default:"document",required:!1}},emits:["update:modelValue"],setup(n,{emit:w}){const r=n,o=b(!1),u=b(),x=w,k=$(r.modelValue),f=g(()=>{switch(r.fileType){case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":return[".mdb",".zip"];case"patientsImportDataHippocrates":return[".xml",".zip"];case"patientsImportDataIatros":return[".xml",".mdb",".sql",".backup",".zip"];case"patientsImportDataMillewin":return[".sql",".backup",".db3",".zip"];case"patientsImportDataPhronesis":return[".sqlite",".sqlite3",".db",".db3",".s3db",".sl3",".gz"];case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":return[".zip"];case"image":return["image/jpeg","image/png"];case"document":return[".doc",".docx",".xml","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document",".pdf"];case"csv":return[".csv"];case"excel":return[".xlsx"];default:return["*"]}}),z=g(()=>{const e=[r.validation];switch(r.fileType){case"image":e.push("ext:jpg,png,jpeg");break;case"document":e.push("ext:doc,docs,xml,pdf");break;case"csv":e.push("ext:csv");break;case"excel":e.push("ext:xlsx");break;case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":e.push("ext:mdb,zip");break;case"patientsImportDataHippocrates":e.push("ext:xml,zip");break;case"patientsImportDataIatros":e.push("ext:xml,mdb,sql,backup,zip");break;case"patientsImportDataMillewin":e.push("ext:sql,backup,.db3,zip");break;case"patientsImportDataPhronesis":e.push("ext:sqlite,sqlite3,db,db3,s3db,sl3,gz");break;case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":e.push("ext:zip");break}return e}),{value:s,errorMessage:F,uuid:d}=L(k,z,r.name,e=>{x("update:modelValue",e)}),M=e=>{const t=e.target;t&&v(t.files)},C=e=>{e.dataTransfer&&(v(e.dataTransfer.files),o.value=!1)},v=e=>{var t;V(e),(t=u.value)!=null&&t.value&&(u.value.value=null)},V=e=>{if(!e)return;const t=[...e];if(!t.every(a=>f.value.some(l=>a.name.toLowerCase().endsWith(l)||a.type.toLowerCase()===l||l==="*")))return W("Formato non supportato, verifica di aver inserito un file/s con il formato corretto",{state:"error"});s.value=[...s.value,...t],!r.multiple&&s.value.length>1&&(s.value=[s.value[0]])},A=e=>{s.value=s.value.filter((t,a)=>a!==e)};return(e,t)=>(p(),h(N,P(e.$attrs,{name:i(d),label:e.label,"error-message":r.errorMessage===!1?!1:r.errorMessage||i(F),"hidden-error-message":e.hiddenErrorMessage,class:"relative inline-block w-full"}),{default:T(()=>[I("div",G,[i(s).length==0||n.multiple?(p(),c("label",{key:0,tabIndex:"0",for:i(d),class:D(["min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full",{"bg-white":!o.value,"bg-primary-light-hover":o.value,"hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused":!e.disabled,"border-gray-300 text-gray-300 cursor-not-allowed":e.disabled,"border-primary":!e.disabled&&!o.value,"border-primary-hover":!e.disabled&&o.value}]),onDragover:t[0]||(t[0]=m(a=>o.value=!0,["prevent"])),onDrop:m(C,["prevent"]),onDragenter:t[1]||(t[1]=m(a=>o.value=!0,["prevent"])),onDragleave:t[2]||(t[2]=m(a=>o.value=!1,["prevent"]))},[E(U,{name:"ArrowUpCircleIcon",class:D({"w-5 h-5":n.content,"w-7 h-7":!n.content,"cursor-pointer":!e.disabled})},null,8,["class"]),n.content?(p(),c("span",K,S(n.content),1)):y("",!0)],42,J)):y("",!0),I("input",{id:i(d),ref_key:"inputField",ref:u,type:"file",class:"hidden",accept:f.value.join(","),disabled:e.disabled,name:r.name||i(d),multiple:n.multiple,onChange:m(M,["prevent"])},null,40,Q),(p(!0),c(j,null,B(i(s),(a,l)=>(p(),h(R,{key:`file-${l}`,variant:"primary",name:a.name,format:a.type,class:"w-full",disabled:e.disabled,onClose:X=>A(l)},null,8,["name","format","disabled","onClose"]))),128))])]),_:1},16,["name","label","error-message","hidden-error-message"]))}});export{re as default,ae as elInputFileTypes};
+import{defineComponent as $,ref as b,toRef as z,computed as g,openBlock as p,createBlock as h,mergeProps as P,unref as i,withCtx as T,createElementVNode as I,createElementBlock as c,normalizeClass as D,withModifiers as m,createVNode as E,toDisplayString as S,createCommentVNode as y,Fragment as j,renderList as B}from"vue";import{withCommonElInputProps as H,useInput as L}from"./input.esm.js";import N from"./ElInputContainer.vue.esm2.js";import R from"../ElFile.vue.esm2.js";import U from"../ElIcon.vue.esm2.js";import{toast as W}from"../ElToast.vue.esm2.js";const G={class:"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20"},J=["for"],K={key:0,class:"text-xs"},Q=["id","accept","disabled","name","multiple"],ae=["image","document","csv","excel","any","zip","patientsImportDataFpfV5","patientsImportDataHippocrates","patientsImportDataIatros","patientsImportDataMdb2000","patientsImportDataMillewin","patientsImportDataPhronesis","patientsImportDataFastamb","patientsImportDataMedico2000","patientsImportDataTServe","patientsImportDataProfim","patientsImportDataMillewinAttachments","patientsImportDataAdvmednet"],re=$({__name:"ElInputFile",props:{...H(),modelValue:{type:Array,required:!0},content:{type:String,default:void 0},multiple:{type:Boolean,default:!1},fileType:{type:String,default:"document",required:!1}},emits:["update:modelValue"],setup(n,{emit:w}){const r=n,o=b(!1),u=b(),x=w,k=z(r.modelValue),f=g(()=>{switch(r.fileType){case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":return[".mdb"];case"patientsImportDataHippocrates":return[".xml"];case"patientsImportDataIatros":return[".xml",".mdb",".sql",".backup"];case"patientsImportDataMillewin":return[".sql",".backup",".db3"];case"patientsImportDataPhronesis":return[".sqlite",".sqlite3",".db",".db3",".s3db",".sl3",".gz"];case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":return[".zip"];case"image":return["image/jpeg","image/png"];case"document":return[".doc",".docx",".xml","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document",".pdf"];case"csv":return[".csv"];case"excel":return[".xlsx"];default:return["*"]}}),F=g(()=>{const e=[r.validation];switch(r.fileType){case"image":e.push("ext:jpg,png,jpeg");break;case"document":e.push("ext:doc,docs,xml,pdf");break;case"csv":e.push("ext:csv");break;case"excel":e.push("ext:xlsx");break;case"patientsImportDataFpfV5":case"patientsImportDataMdb2000":case"patientsImportDataFastamb":case"patientsImportDataProfim":e.push("ext:mdb");break;case"patientsImportDataHippocrates":e.push("ext:xml");break;case"patientsImportDataIatros":e.push("ext:xml,mdb,sql,backup");break;case"patientsImportDataMillewin":e.push("ext:sql,backup,.db3");break;case"patientsImportDataPhronesis":e.push("ext:sqlite,sqlite3,db,db3,s3db,sl3,gz");break;case"patientsImportDataTServe":case"patientsImportDataMedico2000":case"patientsImportDataMillewinAttachments":case"patientsImportDataAdvmednet":case"zip":e.push("ext:zip");break}return e}),{value:s,errorMessage:M,uuid:d}=L(k,F,r.name,e=>{x("update:modelValue",e)}),C=e=>{const t=e.target;t&&v(t.files)},V=e=>{e.dataTransfer&&(v(e.dataTransfer.files),o.value=!1)},v=e=>{var t;A(e),(t=u.value)!=null&&t.value&&(u.value.value=null)},A=e=>{if(!e)return;const t=[...e];if(!t.every(a=>f.value.some(l=>a.name.toLowerCase().endsWith(l)||a.type.toLowerCase()===l||l==="*")))return W("Formato non supportato, verifica di aver inserito un file/s con il formato corretto",{state:"error"});s.value=[...s.value,...t],!r.multiple&&s.value.length>1&&(s.value=[s.value[0]])},q=e=>{s.value=s.value.filter((t,a)=>a!==e)};return(e,t)=>(p(),h(N,P(e.$attrs,{name:i(d),label:e.label,"error-message":r.errorMessage===!1?!1:r.errorMessage||i(M),"hidden-error-message":e.hiddenErrorMessage,class:"relative inline-block w-full"}),{default:T(()=>[I("div",G,[i(s).length==0||n.multiple?(p(),c("label",{key:0,tabIndex:"0",for:i(d),class:D(["min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full",{"bg-white":!o.value,"bg-primary-light-hover":o.value,"hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused":!e.disabled,"border-gray-300 text-gray-300 cursor-not-allowed":e.disabled,"border-primary":!e.disabled&&!o.value,"border-primary-hover":!e.disabled&&o.value}]),onDragover:t[0]||(t[0]=m(a=>o.value=!0,["prevent"])),onDrop:m(V,["prevent"]),onDragenter:t[1]||(t[1]=m(a=>o.value=!0,["prevent"])),onDragleave:t[2]||(t[2]=m(a=>o.value=!1,["prevent"]))},[E(U,{name:"ArrowUpCircleIcon",class:D({"w-5 h-5":n.content,"w-7 h-7":!n.content,"cursor-pointer":!e.disabled})},null,8,["class"]),n.content?(p(),c("span",K,S(n.content),1)):y("",!0)],42,J)):y("",!0),I("input",{id:i(d),ref_key:"inputField",ref:u,type:"file",class:"hidden",accept:f.value.join(","),disabled:e.disabled,name:r.name||i(d),multiple:n.multiple,onChange:m(C,["prevent"])},null,40,Q),(p(!0),c(j,null,B(i(s),(a,l)=>(p(),h(R,{key:`file-${l}`,variant:"primary",name:a.name,format:a.type,class:"w-full",disabled:e.disabled,onClose:X=>q(l)},null,8,["name","format","disabled","onClose"]))),128))])]),_:1},16,["name","label","error-message","hidden-error-message"]))}});export{re as default,ae as elInputFileTypes};
 //# sourceMappingURL=ElInputFile.vue.esm2.js.map

package/dist/forms/ElInputFile.vue.esm2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElInputFile.vue.esm2.js","sources":["../../src/forms/ElInputFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputFileTypes = [\n 'image',\n 'document',\n 'csv',\n 'excel',\n 'any',\n 'zip',\n 'patientsImportDataFpfV5',\n 'patientsImportDataHippocrates',\n 'patientsImportDataIatros',\n 'patientsImportDataMdb2000',\n 'patientsImportDataMillewin',\n 'patientsImportDataPhronesis',\n 'patientsImportDataFastamb',\n 'patientsImportDataMedico2000',\n 'patientsImportDataTServe',\n 'patientsImportDataProfim',\n 'patientsImportDataMillewinAttachments',\n 'patientsImportDataAdvmednet',\n] as const;\nexport type ElInputFileType = (typeof elInputFileTypes)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef, PropType } from 'vue';\nimport { useInput, withCommonElInputProps } from '@/forms/input';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElFile from '@/ElFile.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { toast } from '@/ElToast.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: Array as () => File[],\n required: true,\n },\n content: {\n type: String,\n default: undefined,\n },\n multiple: {\n type: Boolean,\n default: false,\n },\n fileType: {\n type: String as PropType<ElInputFileType>,\n default: 'document',\n required: false,\n },\n});\n\nconst dragging = ref(false);\nconst inputField = ref<HTMLFormElement>();\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', files: File[]): void;\n}>();\n\nconst modelValue = toRef(props.modelValue);\n\nconst computedAcceptedFileExtensionsOrMimeType = computed<string[]>(() => {\n switch (props.fileType) {\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n return ['.mdb', '.zip'];\n case 'patientsImportDataHippocrates':\n return ['.xml', '.zip'];\n case 'patientsImportDataIatros':\n return ['.xml', '.mdb', '.sql', '.backup', '.zip'];\n case 'patientsImportDataMillewin':\n return ['.sql', '.backup', '.db3', '.zip'];\n case 'patientsImportDataPhronesis':\n return ['.sqlite', '.sqlite3', '.db', '.db3', '.s3db', '.sl3', '.gz'];\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n return ['.zip'];\n case 'image':\n return ['image/jpeg', 'image/png'];\n case 'document':\n // any pdf or word-like document\n return [\n '.doc',\n '.docx',\n '.xml',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n '.pdf',\n ];\n case 'csv':\n return ['.csv'];\n case 'excel':\n return ['.xlsx'];\n default:\n return [''];\n }\n});\nconst computedValidation = computed(() => {\n const validations = [props.validation];\n switch (props.fileType) {\n case 'image':\n validations.push('ext:jpg,png,jpeg');\n break;\n case 'document':\n validations.push('ext:doc,docs,xml,pdf');\n break;\n case 'csv':\n validations.push('ext:csv');\n break;\n case 'excel':\n validations.push('ext:xlsx');\n break;\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n validations.push('ext:mdb,zip');\n break;\n case 'patientsImportDataHippocrates':\n validations.push('ext:xml,zip');\n break;\n case 'patientsImportDataIatros':\n validations.push('ext:xml,mdb,sql,backup,zip');\n break;\n case 'patientsImportDataMillewin':\n validations.push('ext:sql,backup,.db3,zip');\n break;\n case 'patientsImportDataPhronesis':\n validations.push('ext:sqlite,sqlite3,db,db3,s3db,sl3,gz');\n break;\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n validations.push('ext:zip');\n break;\n default:\n break;\n }\n return validations;\n});\n\nconst { value, errorMessage, uuid } = useInput(modelValue, computedValidation, props.name, (newValue: File[]) => {\n emit('update:modelValue', newValue);\n});\n\nconst onChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (!target) return;\n loadFilesAndClearInput(target.files);\n};\n\nconst onDrop = (event: DragEvent) => {\n if (!event.dataTransfer) return;\n loadFilesAndClearInput(event.dataTransfer.files);\n dragging.value = false;\n};\n\nconst loadFilesAndClearInput = (newFiles: FileList \| null) => {\n loadFiles(newFiles);\n if (inputField.value?.value) inputField.value.value = null;\n};\n\nconst loadFiles = (newFiles: FileList \| null) => {\n if (!newFiles) return;\n const newFilesArray = [...newFiles];\n\n if (\n !newFilesArray.every(file =>\n computedAcceptedFileExtensionsOrMimeType.value.some(\n extensionOrMimeType =>\n file.name.toLowerCase().endsWith(extensionOrMimeType) \|\|\n file.type.toLowerCase() === extensionOrMimeType \|\|\n extensionOrMimeType === '',\n ),\n )\n ) {\n return toast('Formato non supportato, verifica di aver inserito un file/s con il formato corretto', { state: 'error' });\n }\n\n value.value = [...value.value, ...newFilesArray];\n if (!props.multiple && value.value.length > 1) {\n value.value = [value.value[0]];\n }\n};\n\nconst removeFile = (idx: number) => {\n value.value = value.value.filter((_, i) => i !== idx);\n};\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage \|\| errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n class=\"relative inline-block w-full\"\n >\n <div class=\"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20\">\n <label\n v-if=\"value.length == 0 \|\| multiple\"\n tabIndex=\"0\"\n :for=\"uuid\"\n class=\"min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full\"\n :class=\"{\n 'bg-white': !dragging,\n 'bg-primary-light-hover': dragging,\n 'hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused':\n !disabled,\n 'border-gray-300 text-gray-300 cursor-not-allowed': disabled,\n 'border-primary': !disabled && !dragging,\n 'border-primary-hover': !disabled && dragging,\n }\"\n @dragover.prevent=\"dragging = true\"\n @drop.prevent=\"onDrop\"\n @dragenter.prevent=\"dragging = true\"\n @dragleave.prevent=\"dragging = false\"\n >\n <ElIcon\n name=\"ArrowUpCircleIcon\"\n :class=\"{\n 'w-5 h-5': content,\n 'w-7 h-7': !content,\n 'cursor-pointer': !disabled,\n }\"\n ></ElIcon>\n <span v-if=\"content\" class=\"text-xs\">{{ content }}</span>\n </label>\n <input\n :id=\"uuid\"\n ref=\"inputField\"\n type=\"file\"\n class=\"hidden\"\n :accept=\"computedAcceptedFileExtensionsOrMimeType.join(',')\"\n :disabled=\"disabled\"\n :name=\"props.name \|\| uuid\"\n :multiple=\"multiple\"\n @change.prevent=\"onChange\"\n />\n <ElFile\n v-for=\"(file, index) in value\"\n :key=\"`file-${index}`\"\n variant=\"primary\"\n :name=\"file.name\"\n :format=\"file.type\"\n class=\"w-full\"\n :disabled=\"disabled\"\n @close=\"removeFile(index)\"\n />\n </div>\n </ElInputContainer>\n</template>\n"],"names":["elInputFileTypes","props","__props","dragging","ref","inputField","emit","__emit","modelValue","toRef","computedAcceptedFileExtensionsOrMimeType","computed","computedValidation","validations","value","errorMessage","uuid","useInput","newValue","onChange","event","target","loadFilesAndClearInput","onDrop","newFiles","loadFiles","_a","newFilesArray","file","extensionOrMimeType","toast","removeFile","idx","_","i"],"mappings":"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"}
1	+ {"version":3,"file":"ElInputFile.vue.esm2.js","sources":["../../src/forms/ElInputFile.vue"],"sourcesContent":["<script lang=\"ts\">\nexport const elInputFileTypes = [\n 'image',\n 'document',\n 'csv',\n 'excel',\n 'any',\n 'zip',\n 'patientsImportDataFpfV5',\n 'patientsImportDataHippocrates',\n 'patientsImportDataIatros',\n 'patientsImportDataMdb2000',\n 'patientsImportDataMillewin',\n 'patientsImportDataPhronesis',\n 'patientsImportDataFastamb',\n 'patientsImportDataMedico2000',\n 'patientsImportDataTServe',\n 'patientsImportDataProfim',\n 'patientsImportDataMillewinAttachments',\n 'patientsImportDataAdvmednet',\n] as const;\nexport type ElInputFileType = (typeof elInputFileTypes)[number];\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef, PropType } from 'vue';\nimport { useInput, withCommonElInputProps } from '@/forms/input';\nimport ElInputContainer from '@/forms/ElInputContainer.vue';\nimport ElFile from '@/ElFile.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { toast } from '@/ElToast.vue';\n\nconst props = defineProps({\n ...withCommonElInputProps(),\n modelValue: {\n type: Array as () => File[],\n required: true,\n },\n content: {\n type: String,\n default: undefined,\n },\n multiple: {\n type: Boolean,\n default: false,\n },\n fileType: {\n type: String as PropType<ElInputFileType>,\n default: 'document',\n required: false,\n },\n});\n\nconst dragging = ref(false);\nconst inputField = ref<HTMLFormElement>();\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', files: File[]): void;\n}>();\n\nconst modelValue = toRef(props.modelValue);\n\nconst computedAcceptedFileExtensionsOrMimeType = computed<string[]>(() => {\n switch (props.fileType) {\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n return ['.mdb'];\n case 'patientsImportDataHippocrates':\n return ['.xml'];\n case 'patientsImportDataIatros':\n return ['.xml', '.mdb', '.sql', '.backup'];\n case 'patientsImportDataMillewin':\n return ['.sql', '.backup', '.db3'];\n case 'patientsImportDataPhronesis':\n return ['.sqlite', '.sqlite3', '.db', '.db3', '.s3db', '.sl3', '.gz'];\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n return ['.zip'];\n case 'image':\n return ['image/jpeg', 'image/png'];\n case 'document':\n // any pdf or word-like document\n return [\n '.doc',\n '.docx',\n '.xml',\n 'application/msword',\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n '.pdf',\n ];\n case 'csv':\n return ['.csv'];\n case 'excel':\n return ['.xlsx'];\n default:\n return [''];\n }\n});\nconst computedValidation = computed(() => {\n const validations = [props.validation];\n switch (props.fileType) {\n case 'image':\n validations.push('ext:jpg,png,jpeg');\n break;\n case 'document':\n validations.push('ext:doc,docs,xml,pdf');\n break;\n case 'csv':\n validations.push('ext:csv');\n break;\n case 'excel':\n validations.push('ext:xlsx');\n break;\n case 'patientsImportDataFpfV5':\n case 'patientsImportDataMdb2000':\n case 'patientsImportDataFastamb':\n case 'patientsImportDataProfim':\n validations.push('ext:mdb');\n break;\n case 'patientsImportDataHippocrates':\n validations.push('ext:xml');\n break;\n case 'patientsImportDataIatros':\n validations.push('ext:xml,mdb,sql,backup');\n break;\n case 'patientsImportDataMillewin':\n validations.push('ext:sql,backup,.db3');\n break;\n case 'patientsImportDataPhronesis':\n validations.push('ext:sqlite,sqlite3,db,db3,s3db,sl3,gz');\n break;\n case 'patientsImportDataTServe':\n case 'patientsImportDataMedico2000':\n case 'patientsImportDataMillewinAttachments':\n case 'patientsImportDataAdvmednet':\n case 'zip':\n validations.push('ext:zip');\n break;\n default:\n break;\n }\n return validations;\n});\n\nconst { value, errorMessage, uuid } = useInput(modelValue, computedValidation, props.name, (newValue: File[]) => {\n emit('update:modelValue', newValue);\n});\n\nconst onChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n if (!target) return;\n loadFilesAndClearInput(target.files);\n};\n\nconst onDrop = (event: DragEvent) => {\n if (!event.dataTransfer) return;\n loadFilesAndClearInput(event.dataTransfer.files);\n dragging.value = false;\n};\n\nconst loadFilesAndClearInput = (newFiles: FileList \| null) => {\n loadFiles(newFiles);\n if (inputField.value?.value) inputField.value.value = null;\n};\n\nconst loadFiles = (newFiles: FileList \| null) => {\n if (!newFiles) return;\n const newFilesArray = [...newFiles];\n\n if (\n !newFilesArray.every(file =>\n computedAcceptedFileExtensionsOrMimeType.value.some(\n extensionOrMimeType =>\n file.name.toLowerCase().endsWith(extensionOrMimeType) \|\|\n file.type.toLowerCase() === extensionOrMimeType \|\|\n extensionOrMimeType === '',\n ),\n )\n ) {\n return toast('Formato non supportato, verifica di aver inserito un file/s con il formato corretto', { state: 'error' });\n }\n\n value.value = [...value.value, ...newFilesArray];\n if (!props.multiple && value.value.length > 1) {\n value.value = [value.value[0]];\n }\n};\n\nconst removeFile = (idx: number) => {\n value.value = value.value.filter((_, i) => i !== idx);\n};\n</script>\n\n<template>\n <ElInputContainer\n v-bind=\"$attrs\"\n :name=\"uuid\"\n :label=\"label\"\n :error-message=\"props.errorMessage === false ? false : props.errorMessage \|\| errorMessage\"\n :hidden-error-message=\"hiddenErrorMessage\"\n class=\"relative inline-block w-full\"\n >\n <div class=\"flex flex-col gap-2 min-w-0 sm:min-w-80 min-h-20\">\n <label\n v-if=\"value.length == 0 \|\| multiple\"\n tabIndex=\"0\"\n :for=\"uuid\"\n class=\"min-h-20 p-4 flex flex-col gap-2 items-center justify-center rounded border outline-none border-dashed w-full\"\n :class=\"{\n 'bg-white': !dragging,\n 'bg-primary-light-hover': dragging,\n 'hover:bg-primary-light-hover hover:text-primary-hover hover:border-primary-hover group-focus-within:bg-primary-light-focused group-focus-within:text-primary-focused group-focus-within:border-primary-light-focused':\n !disabled,\n 'border-gray-300 text-gray-300 cursor-not-allowed': disabled,\n 'border-primary': !disabled && !dragging,\n 'border-primary-hover': !disabled && dragging,\n }\"\n @dragover.prevent=\"dragging = true\"\n @drop.prevent=\"onDrop\"\n @dragenter.prevent=\"dragging = true\"\n @dragleave.prevent=\"dragging = false\"\n >\n <ElIcon\n name=\"ArrowUpCircleIcon\"\n :class=\"{\n 'w-5 h-5': content,\n 'w-7 h-7': !content,\n 'cursor-pointer': !disabled,\n }\"\n ></ElIcon>\n <span v-if=\"content\" class=\"text-xs\">{{ content }}</span>\n </label>\n <input\n :id=\"uuid\"\n ref=\"inputField\"\n type=\"file\"\n class=\"hidden\"\n :accept=\"computedAcceptedFileExtensionsOrMimeType.join(',')\"\n :disabled=\"disabled\"\n :name=\"props.name \|\| uuid\"\n :multiple=\"multiple\"\n @change.prevent=\"onChange\"\n />\n <ElFile\n v-for=\"(file, index) in value\"\n :key=\"`file-${index}`\"\n variant=\"primary\"\n :name=\"file.name\"\n :format=\"file.type\"\n class=\"w-full\"\n :disabled=\"disabled\"\n @close=\"removeFile(index)\"\n />\n </div>\n </ElInputContainer>\n</template>\n"],"names":["elInputFileTypes","props","__props","dragging","ref","inputField","emit","__emit","modelValue","toRef","computedAcceptedFileExtensionsOrMimeType","computed","computedValidation","validations","value","errorMessage","uuid","useInput","newValue","onChange","event","target","loadFilesAndClearInput","onDrop","newFiles","loadFiles","_a","newFilesArray","file","extensionOrMimeType","toast","removeFile","idx","_","i"],"mappings":"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"}

package/dist/table/ElServerSideTable.vue.cjs2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"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"),b=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"),x=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"],ye={key:"tableFull",class:"bg-white"},Se={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(A,{expose:F,emit:T}){const r=A,N=T,f=e.ref(!0),y=10,d=e.ref([]),S=e.ref(null);e.onMounted(async()=>{const t=await r.dataController({paginationStatus:{currentPage:0},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"firstLoad"});d.value=t.data,_.value=t.totalRows,f.value=!1});function P(){const t=e.ref(0),i=e.computed(()=>{var a;return((a=S.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,d.value=(await r.dataController({paginationStatus:{currentPage:a},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:t,currentPage:i,goToFirstPage:()=>{var a;return(a=S.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),i=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return e.onMounted(async()=>{t.value.arrows=new Array(y),r.sortByCol>-1&&(t.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:t,toggleSortArrow:async a=>{t.value.currentlySortColIndex=a,t.value.arrows.splice(a,1,!t.value.arrows[a]),f.value=!0;try{const n=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:o.value,filterStatus:u.value,triggeredEvent:"sort"});d.value=n.data,_.value=n.totalRows}catch(n){console.error(n)}finally{f.value=!1}},currentSortStatus:o,resetSort:i}}function D(){const t=e.ref([]),i=e.ref(!1);e.onMounted(()=>{o(),x.watchDeep(t,async n=>{i.value?(l(n),i.value=!1):a(n)})});const o=()=>{var n;i.value=!0,t.value=new Array(y);for(let s=0;s<y;s++){const c=(n=r.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:r.columns[s].title}):c.type==="MULTI_VALUE"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[s].title}):c.type==="DATE_RANGE"&&t.value.splice(s,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[s].title}))}},l=async n=>{console.log("applyFilters"),f.value=!0,H();const s=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:n,triggeredEvent:"filter"});d.value=s.data,_.value=s.totalRows,f.value=!1},a=x.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function U(){const t=e.ref([]),i=()=>{N("rows-selected",t.value)},o=p=>{a(p.map(g=>g.id))},l=p=>{const g=t.value.findIndex(m=>m.id===p);t.value.splice(g,1),i()},a=async p=>{r.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const g=d.value.filter(m=>p.includes(m.id));r.rowsSelectionMode==="single"&&(g.length=Math.min(1,g.length));for(const m of g)t.value.some(J=>J.id===m.id)||t.value.push(m);i()},n=()=>{t.value=[],i()},s=()=>d.value,c=()=>t.value,w=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:a,unselectAllRows:n,getDataRows:s,getSelectedRows:c,allRowsSelected:w}}const{selectedRows:B,rowsSelected:C,rowUnselected:L,selectRows:I,unselectAllRows:k,getDataRows:q,getSelectedRows:z,allRowsSelected:V}=U(),{filterStatus:u,resetFilters:E}=D(),{sortStatus:R,toggleSortArrow:O,currentSortStatus:v,resetSort:G}=M(),{newPageSelected:j,totalRowsCount:_,currentPage:h,goToFirstPage:H}=P(),X=async()=>{G(),E(),k()},$=async()=>{f.value=!0;const t=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"trigger"});d.value=t.data,_.value=t.totalRows,f.value=!1};return e.watch(()=>r.columns,()=>E(),{deep:!0,immediate:!0}),F({selectRows:I,resetAllAndFetch:X,unselectAllRows:k,getDataRows:q,getSelectedRows:z,triggerDataController:$}),(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(b.default,{key:0,"model-value":e.unref(V),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:i[0]||(i[0]=()=>e.unref(V)?e.unref(k)():e.unref(C)(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(r.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 px-3 py-3 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(R).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(R).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 a,n,s,c,w;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"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&e.unref(u)[l].type==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,placeholder:((n=o.filter)==null?void 0:n.placeholder)||"Cerca","hidden-error-message":!0,"trailing-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=o.filter)==null?void 0:s.type)==="DATE_RANGE"&&e.unref(u)[l].type==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(u)[l].dateFrom,"onUpdate:modelValue":p=>e.unref(u)[l].dateFrom=p,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&e.unref(u)[l].type==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,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"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(E)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.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",ye,[(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(B).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",Se,[e.createVNode(b.default,{"model-value":!!e.unref(B).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(C)([o]):e.unref(L)(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,a)=>(e.openBlock(),e.createElementBlock("td",{key:a,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:r.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:S,"total-rows-count":e.unref(_),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":e.unref(j)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
+"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"),b=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"),x=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"],ye={key:"tableFull",class:"bg-white"},Se={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(A,{expose:F,emit:T}){const r=A,N=T,f=e.ref(!0),y=10,d=e.ref([]),S=e.ref(null);e.onMounted(async()=>{const t=await r.dataController({paginationStatus:{currentPage:0},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"firstLoad"});d.value=t.data,_.value=t.totalRows,f.value=!1});function P(){const t=e.ref(0),i=e.computed(()=>{var a;return((a=S.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,d.value=(await r.dataController({paginationStatus:{currentPage:a},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:t,currentPage:i,goToFirstPage:()=>{var a;return(a=S.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),i=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return e.onMounted(async()=>{t.value.arrows=new Array(y),r.sortByCol>-1&&(t.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:t,toggleSortArrow:async a=>{t.value.currentlySortColIndex=a,t.value.arrows.splice(a,1,!t.value.arrows[a]),f.value=!0;try{const n=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:o.value,filterStatus:u.value,triggeredEvent:"sort"});d.value=n.data,_.value=n.totalRows}catch(n){console.error(n)}finally{f.value=!1}},currentSortStatus:o,resetSort:i}}function D(){const t=e.ref([]),i=e.ref(!1);e.onMounted(()=>{o(),x.watchDeep(t,async n=>{i.value?(l(n),i.value=!1):a(n)})});const o=()=>{var n;i.value=!0,t.value=new Array(y);for(let s=0;s<y;s++){const c=(n=r.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:r.columns[s].title}):c.type==="MULTI_VALUE"?t.value.splice(s,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[s].title}):c.type==="DATE_RANGE"&&t.value.splice(s,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[s].title}))}},l=async n=>{console.log("applyFilters"),f.value=!0,H();const s=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:n,triggeredEvent:"filter"});d.value=s.data,_.value=s.totalRows,f.value=!1},a=x.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function U(){const t=e.ref([]),i=()=>{N("rows-selected",t.value)},o=p=>{a(p.map(g=>g.id))},l=p=>{const g=t.value.findIndex(m=>m.id===p);t.value.splice(g,1),i()},a=async p=>{r.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const g=d.value.filter(m=>p.includes(m.id));r.rowsSelectionMode==="single"&&(g.length=Math.min(1,g.length));for(const m of g)t.value.some(J=>J.id===m.id)||t.value.push(m);i()},n=()=>{t.value=[],i()},s=()=>d.value,c=()=>t.value,w=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:a,unselectAllRows:n,getDataRows:s,getSelectedRows:c,allRowsSelected:w}}const{selectedRows:B,rowsSelected:C,rowUnselected:L,selectRows:I,unselectAllRows:k,getDataRows:q,getSelectedRows:z,allRowsSelected:V}=U(),{filterStatus:u,resetFilters:E}=D(),{sortStatus:R,toggleSortArrow:O,currentSortStatus:v,resetSort:G}=M(),{newPageSelected:j,totalRowsCount:_,currentPage:h,goToFirstPage:H}=P(),X=async()=>{G(),E(),k()},$=async()=>{f.value=!0;const t=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:v.value,filterStatus:u.value,triggeredEvent:"trigger"});d.value=t.data,_.value=t.totalRows,f.value=!1};return e.watch(()=>r.columns,()=>E(),{deep:!0,immediate:!0}),F({selectRows:I,resetAllAndFetch:X,unselectAllRows:k,getDataRows:q,getSelectedRows:z,triggerDataController:$}),(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(b.default,{key:0,"model-value":e.unref(V),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:i[0]||(i[0]=()=>e.unref(V)?e.unref(k)():e.unref(C)(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(r.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 px-3 py-3 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(R).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(R).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 a,n,s,c,w;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"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&e.unref(u)[l].type==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,placeholder:((n=o.filter)==null?void 0:n.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=o.filter)==null?void 0:s.type)==="DATE_RANGE"&&e.unref(u)[l].type==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(u)[l].dateFrom,"onUpdate:modelValue":p=>e.unref(u)[l].dateFrom=p,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&e.unref(u)[l].type==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(u)[l].textSearch,"onUpdate:modelValue":p=>e.unref(u)[l].textSearch=p,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"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(E)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.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",ye,[(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(B).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",Se,[e.createVNode(b.default,{"model-value":!!e.unref(B).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(C)([o]):e.unref(L)(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,a)=>(e.openBlock(),e.createElementBlock("td",{key:a,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:r.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:S,"total-rows-count":e.unref(_),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":e.unref(j)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
 //# sourceMappingURL=ElServerSideTable.vue.cjs2.js.map

package/dist/table/ElServerSideTable.vue.cjs2.js.map CHANGED Viewed

	@@ -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;\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 } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\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: [],\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 onMounted(async () => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\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(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\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 px-3 py-3 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 :trailing-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","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.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;\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 } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\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: [],\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 onMounted(async () => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\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(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\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 px-3 py-3 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","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":"u3DAiGA,MAAMA,EAAQC,EAORC,EAAOC,EAKPC,EAAUC,MAAI,EAAI,EAElBC,EAAW,GAEXC,EAAsBF,MAAe,CAAA,CAAE,EAEvCG,EAAaH,MAA6D,IAAI,EAEpFI,EAAAA,UAAU,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,MAAI,CAAC,EACtBU,EAAcC,EAAAA,SAAS,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,EAAAA,IAGhB,CACD,sBAAuBL,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,CAAA,CACV,EAEKqB,EAAY,IAAM,CACtBD,EAAW,MAAQ,CACjB,sBAAuB,GACvB,OAAQ,CAAC,CAAA,CACX,EAEIT,EAAoBK,EAAAA,SAAqC,KACtD,CACL,aAAcI,EAAW,MAAM,sBAC/B,MAAOA,EAAW,MAAM,OAAOA,EAAW,MAAM,qBAAqB,EAAI,MAAQ,MAAA,EAEpF,EAEDX,OAAAA,EAAAA,UAAU,SAAY,CACpBW,EAAW,MAAM,OAAS,IAAI,MAAMd,CAAQ,EACxCN,EAAM,UAAY,KACpBoB,EAAW,MAAM,OAAOpB,EAAM,SAAS,EAAIA,EAAM,aACnD,CACD,EAyBM,CACL,WAAAoB,EACA,gBAzBsB,MAAOE,GAAqB,CAClDF,EAAW,MAAM,sBAAwBE,EACzCF,EAAW,MAAM,OAAO,OAAOE,EAAU,EAAG,CAACF,EAAW,MAAM,OAAOE,CAAQ,CAAC,EAC9ElB,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,gBACxBa,EAAO,CAEd,QAAQ,MAAMA,CAAK,CAAA,QACnB,CACAnB,EAAQ,MAAQ,EAClB,CAAA,EAMA,kBAAAO,EACA,UAAAU,CAAA,CAEJ,CAEA,SAASG,GAAa,CACdZ,MAAAA,EAAeP,MAAoB,CAAA,CAAE,EACrCoB,EAAqBpB,MAAI,EAAK,EAEpCI,EAAAA,UAAU,IAAM,CACdiB,IACUd,YAAAA,EAAc,MAAMe,GAAW,CACnCF,EAAmB,OACrBG,EAAaD,CAAO,EACpBF,EAAmB,MAAQ,IAE3BI,EAAsBF,CAAO,CAC/B,CACD,CAAA,CACF,EAED,MAAMD,EAAe,IAAM,OACzBD,EAAmB,MAAQ,GAE3Bb,EAAa,MAAQ,IAAI,MAAMN,CAAQ,EACvC,QAASwB,EAAI,EAAGA,EAAIxB,EAAUwB,IAAK,CACjC,MAAMC,GAASd,EAAAjB,EAAM,QAAQ8B,CAAC,IAAf,YAAAb,EAAkB,OAC7Bc,IACEA,EAAO,OAAS,cAClBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,WAAYA,EAAO,cAAgB,GACnC,KAAM,cACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EACQC,EAAO,OAAS,cACzBnB,EAAa,MAAM,OAAOkB,EAAG,EAAG,CAC9B,GAAIC,EAAO,GACX,SAAUA,EAAO,cAAgB,EACjC,KAAM,aACN,YAAa/B,EAAM,QAAQ8B,CAAC,EAAE,KAAA,CAC/B,EAGP,CAAA,EAGIF,EAAe,MAAOD,GAA4B,CACtD,QAAQ,IAAI,cAAc,EAC1BvB,EAAQ,MAAQ,GACF4B,IACR,MAAAtB,EAAU,MAAMV,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAae,EAAY,KAC3B,EACA,WAAYJ,EAAkB,MAC9B,aAAcgB,EACd,eAAgB,QAAA,CACjB,EACDpB,EAAoB,MAAQG,EAAQ,KACpCG,EAAe,MAAQH,EAAQ,UAC/BN,EAAQ,MAAQ,EAAA,EAGZyB,EAAwBI,EAAAA,cAAcL,EAAc,GAAG,EAEtD,MAAA,CACL,aAAAhB,EACA,aAAAc,CAAA,CAEJ,CAEA,SAASQ,GAAmB,CACpBC,MAAAA,EAAe9B,MAAsC,CAAA,CAAE,EAEvD+B,EAAmB,IAAM,CACxBlC,EAAA,gBAAiBiC,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,CAC1C5C,EAAM,oBAAsB,WAC9BmC,EAAa,MAAQ,GACrB,MAAMU,EAAS,SAAA,GAEX,MAAAC,EAAevC,EAAoB,MAAM,UAAYqC,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC7ExC,EAAM,oBAAsB,WAC9B8C,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,IAAiB1C,EAAoB,MACnD2C,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBnC,EAAAA,SAAS,IACxBmB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAW5B,EAAoB,MAAM,MACjG,EAEM,MAAA,CACL,aAAA4B,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,EAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAAtB,EAAc,aAAAc,CAAa,EAAIF,EAAW,EAC5C,CAAE,WAAAJ,EAAY,gBAAAgC,EAAiB,kBAAAzC,EAAmB,UAAAU,CAAA,EAAcF,IAChE,CAAE,gBAAAkC,EAAiB,eAAAxC,EAAgB,YAAAE,EAAa,cAAAiB,CAAA,EAAkBlB,IAElEwC,EAAmB,SAAY,CAEzBjC,IACGK,IACGsB,GAAA,EAGZO,EAAwB,SAAY,CACxCnD,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,EAGlBoD,OAAAA,EAAA,MACE,IAAMxD,EAAM,QACZ,IAAM0B,EAAa,EACnB,CAAE,KAAM,GAAM,UAAW,EAAK,CAAA,EAGnB+B,EAAA,CACX,WAAAlB,EACA,iBAAAe,EACA,gBAAAN,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAK,CAAA,CACD"}

package/dist/table/ElServerSideTable.vue.esm2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineComponent as se,ref as v,onMounted as T,watch as ne,openBlock as l,createElementBlock as n,createElementVNode as w,normalizeClass as U,createBlock as D,unref as a,createCommentVNode as y,Fragment as E,renderList as x,createTextVNode as ie,toDisplayString as ue,createVNode as _,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 $ 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"},xe={class:"bg-neutral-surface-raised font-semibold"},Ae={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(z,{expose:O,emit:G}){const r=z,H=G,m=v(!0),A=10,g=v([]),b=v(null);T(async()=>{const e=await r.dataController({paginationStatus:{currentPage:0},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"firstLoad"});g.value=e.data,R.value=e.totalRows,m.value=!1});function j(){const e=v(0),p=M(()=>{var s;return((s=b.value)==null?void 0:s.currentPage)??0});return{newPageSelected:async s=>{m.value=!0,g.value=(await r.dataController({paginationStatus:{currentPage:s},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"paginate"})).data,m.value=!1},totalRowsCount:e,currentPage:p,goToFirstPage:()=>{var s;return(s=b.value)==null?void 0:s.goToPage(0,{doNotEmitEvent:!0})}}}function X(){const e=v({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),p=()=>{e.value={currentlySortColIndex:-1,arrows:[]}},o=M(()=>({columnToSort:e.value.currentlySortColIndex,order:e.value.arrows[e.value.currentlySortColIndex]?"asc":"desc"}));return T(async()=>{e.value.arrows=new Array(A),r.sortByCol>-1&&(e.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:e,toggleSortArrow:async s=>{e.value.currentlySortColIndex=s,e.value.arrows.splice(s,1,!e.value.arrows[s]),m.value=!0;try{const i=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:o.value,filterStatus:d.value,triggeredEvent:"sort"});g.value=i.data,R.value=i.totalRows}catch(i){console.error(i)}finally{m.value=!1}},currentSortStatus:o,resetSort:p}}function q(){const e=v([]),p=v(!1);T(()=>{o(),_e(e,async i=>{p.value?(t(i),p.value=!1):s(i)})});const o=()=>{var i;p.value=!0,e.value=new Array(A);for(let u=0;u<A;u++){const c=(i=r.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:r.columns[u].title}):c.type==="MULTI_VALUE"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[u].title}):c.type==="DATE_RANGE"&&e.value.splice(u,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[u].title}))}},t=async i=>{console.log("applyFilters"),m.value=!0,oe();const u=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:i,triggeredEvent:"filter"});g.value=u.data,R.value=u.totalRows,m.value=!1},s=he(t,500);return{filterStatus:e,resetFilters:o}}function J(){const e=v([]),p=()=>{H("rows-selected",e.value)},o=f=>{s(f.map(S=>S.id))},t=f=>{const S=e.value.findIndex(h=>h.id===f);e.value.splice(S,1),p()},s=async f=>{r.rowsSelectionMode==="single"&&(e.value=[],await de());const S=g.value.filter(h=>f.includes(h.id));r.rowsSelectionMode==="single"&&(S.length=Math.min(1,S.length));for(const h of S)e.value.some(re=>re.id===h.id)||e.value.push(h);p()},i=()=>{e.value=[],p()},u=()=>g.value,c=()=>e.value,k=M(()=>e.value.length>0&&e.value.length===g.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:s,unselectAllRows:i,getDataRows:u,getSelectedRows:c,allRowsSelected:k}}const{selectedRows:B,rowsSelected:L,rowUnselected:K,selectRows:Q,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,allRowsSelected:I}=J(),{filterStatus:d,resetFilters:V}=q(),{sortStatus:N,toggleSortArrow:Z,currentSortStatus:C,resetSort:ee}=X(),{newPageSelected:te,totalRowsCount:R,currentPage:P,goToFirstPage:oe}=j(),le=async()=>{ee(),V(),F()},ae=async()=>{m.value=!0;const e=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"trigger"});g.value=e.data,R.value=e.totalRows,m.value=!1};return ne(()=>r.columns,()=>V(),{deep:!0,immediate:!0}),O({selectRows:Q,resetAllAndFetch:le,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,triggerDataController:ae}),(e,p)=>(l(),n("div",Re,[w("div",Ce,[w("div",ke,[w("table",Ee,[w("thead",null,[w("tr",xe,[e.rowsSelectionMode?(l(),n("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($,{key:0,"model-value":a(I),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:p[0]||(p[0]=()=>a(I)?a(F)():a(L)(g.value))},null,8,["model-value","disabled"])):(l(),n("div",Ae))],2)):y("",!0),(l(!0),n(E,null,x(r.columns,(o,t)=>(l(),n("th",{key:t,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 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":a(N).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:s=>!o.noSort&&a(Z)(t)},[ie(ue(o.title)+" ",1),o.noSort?y("",!0):(l(),n("svg",Fe,[a(N).arrows[t]?(l(),n("path",Ve)):(l(),n("path",Pe))]))],10,be))),128))]),a(d).length>0&&!e.noFilters?(l(),n("tr",Te,[e.rowsSelectionMode?(l(),n("th",Ue)):y("",!0),(l(!0),n(E,null,x(e.columns,(o,t)=>{var s,i,u,c,k;return l(),n("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((s=o.filter)==null?void 0:s.type)==="FREE_SEARCH"&&a(d)[t].type==="FREE_SEARCH"?(l(),D(we,{key:0,modelValue:a(d)[t].textSearch,"onUpdate:modelValue":f=>a(d)[t].textSearch=f,placeholder:((i=o.filter)==null?void 0:i.placeholder)||"Cerca","hidden-error-message":!0,"trailing-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((u=o.filter)==null?void 0:u.type)==="DATE_RANGE"&&a(d)[t].type==="DATE_RANGE"?(l(),n("div",De,[_(me,{modelValue:a(d)[t].dateFrom,"onUpdate:modelValue":f=>a(d)[t].dateFrom=f,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&a(d)[t].type==="MULTI_VALUE"?(l(),D(fe,{key:2,modelValue:a(d)[t].textSearch,"onUpdate:modelValue":f=>a(d)[t].textSearch=f,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((k=o.filter)==null?void 0:k.type)==="RESET_FILTERS_BUTTON"?(l(),n("div",Me,[_(ye,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:a(V)},null,8,["onClick"])])):y("",!0)])}),128))])):y("",!0)]),_(ge,{name:"fade"},{default:ce(()=>[m.value?(l(),n("tbody",Be,[w("tr",null,[w("td",{colspan:r.columns.length+1},[_(ve,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Le)])])):g.value.length>0?(l(),n("tbody",Ie,[(l(!0),n(E,null,x(g.value,o=>(l(),n("tr",{key:o.id,class:U(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&a(B).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(l(),n("td",Ne,[_($,{"model-value":!!a(B).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?a(L)([o]):a(K)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):y("",!0),(l(!0),n(E,null,x(o.cells,(t,s)=>(l(),n("td",{key:s,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[_(Se,{cell:t},null,8,["cell"])],8,$e))),128))],2))),128))])):g.value.length===0?(l(),n("tbody",ze,[w("tr",null,[w("td",{colspan:r.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Oe)])])):y("",!0)]),_:1})])])]),_(pe,{ref_key:"pagination",ref:b,"total-rows-count":a(R),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":a(te)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});export{et as default};
+import{defineComponent as se,ref as v,onMounted as T,watch as ne,openBlock as l,createElementBlock as n,createElementVNode as w,normalizeClass as U,createBlock as D,unref as a,createCommentVNode as y,Fragment as E,renderList as x,createTextVNode as ie,toDisplayString as ue,createVNode as _,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 $ 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"},xe={class:"bg-neutral-surface-raised font-semibold"},Ae={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(z,{expose:O,emit:G}){const r=z,H=G,m=v(!0),A=10,g=v([]),b=v(null);T(async()=>{const e=await r.dataController({paginationStatus:{currentPage:0},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"firstLoad"});g.value=e.data,R.value=e.totalRows,m.value=!1});function j(){const e=v(0),p=M(()=>{var s;return((s=b.value)==null?void 0:s.currentPage)??0});return{newPageSelected:async s=>{m.value=!0,g.value=(await r.dataController({paginationStatus:{currentPage:s},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"paginate"})).data,m.value=!1},totalRowsCount:e,currentPage:p,goToFirstPage:()=>{var s;return(s=b.value)==null?void 0:s.goToPage(0,{doNotEmitEvent:!0})}}}function X(){const e=v({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),p=()=>{e.value={currentlySortColIndex:-1,arrows:[]}},o=M(()=>({columnToSort:e.value.currentlySortColIndex,order:e.value.arrows[e.value.currentlySortColIndex]?"asc":"desc"}));return T(async()=>{e.value.arrows=new Array(A),r.sortByCol>-1&&(e.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:e,toggleSortArrow:async s=>{e.value.currentlySortColIndex=s,e.value.arrows.splice(s,1,!e.value.arrows[s]),m.value=!0;try{const i=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:o.value,filterStatus:d.value,triggeredEvent:"sort"});g.value=i.data,R.value=i.totalRows}catch(i){console.error(i)}finally{m.value=!1}},currentSortStatus:o,resetSort:p}}function q(){const e=v([]),p=v(!1);T(()=>{o(),_e(e,async i=>{p.value?(t(i),p.value=!1):s(i)})});const o=()=>{var i;p.value=!0,e.value=new Array(A);for(let u=0;u<A;u++){const c=(i=r.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:r.columns[u].title}):c.type==="MULTI_VALUE"?e.value.splice(u,1,{id:c.id,textSearch:c.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[u].title}):c.type==="DATE_RANGE"&&e.value.splice(u,1,{id:c.id,dateFrom:c.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[u].title}))}},t=async i=>{console.log("applyFilters"),m.value=!0,oe();const u=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:i,triggeredEvent:"filter"});g.value=u.data,R.value=u.totalRows,m.value=!1},s=he(t,500);return{filterStatus:e,resetFilters:o}}function J(){const e=v([]),p=()=>{H("rows-selected",e.value)},o=f=>{s(f.map(S=>S.id))},t=f=>{const S=e.value.findIndex(h=>h.id===f);e.value.splice(S,1),p()},s=async f=>{r.rowsSelectionMode==="single"&&(e.value=[],await de());const S=g.value.filter(h=>f.includes(h.id));r.rowsSelectionMode==="single"&&(S.length=Math.min(1,S.length));for(const h of S)e.value.some(re=>re.id===h.id)||e.value.push(h);p()},i=()=>{e.value=[],p()},u=()=>g.value,c=()=>e.value,k=M(()=>e.value.length>0&&e.value.length===g.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:s,unselectAllRows:i,getDataRows:u,getSelectedRows:c,allRowsSelected:k}}const{selectedRows:B,rowsSelected:L,rowUnselected:K,selectRows:Q,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,allRowsSelected:I}=J(),{filterStatus:d,resetFilters:V}=q(),{sortStatus:N,toggleSortArrow:Z,currentSortStatus:C,resetSort:ee}=X(),{newPageSelected:te,totalRowsCount:R,currentPage:P,goToFirstPage:oe}=j(),le=async()=>{ee(),V(),F()},ae=async()=>{m.value=!0;const e=await r.dataController({paginationStatus:{currentPage:P.value},sortStatus:C.value,filterStatus:d.value,triggeredEvent:"trigger"});g.value=e.data,R.value=e.totalRows,m.value=!1};return ne(()=>r.columns,()=>V(),{deep:!0,immediate:!0}),O({selectRows:Q,resetAllAndFetch:le,unselectAllRows:F,getDataRows:W,getSelectedRows:Y,triggerDataController:ae}),(e,p)=>(l(),n("div",Re,[w("div",Ce,[w("div",ke,[w("table",Ee,[w("thead",null,[w("tr",xe,[e.rowsSelectionMode?(l(),n("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($,{key:0,"model-value":a(I),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:p[0]||(p[0]=()=>a(I)?a(F)():a(L)(g.value))},null,8,["model-value","disabled"])):(l(),n("div",Ae))],2)):y("",!0),(l(!0),n(E,null,x(r.columns,(o,t)=>(l(),n("th",{key:t,scope:"col",class:U(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 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":a(N).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:s=>!o.noSort&&a(Z)(t)},[ie(ue(o.title)+" ",1),o.noSort?y("",!0):(l(),n("svg",Fe,[a(N).arrows[t]?(l(),n("path",Ve)):(l(),n("path",Pe))]))],10,be))),128))]),a(d).length>0&&!e.noFilters?(l(),n("tr",Te,[e.rowsSelectionMode?(l(),n("th",Ue)):y("",!0),(l(!0),n(E,null,x(e.columns,(o,t)=>{var s,i,u,c,k;return l(),n("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((s=o.filter)==null?void 0:s.type)==="FREE_SEARCH"&&a(d)[t].type==="FREE_SEARCH"?(l(),D(we,{key:0,modelValue:a(d)[t].textSearch,"onUpdate:modelValue":f=>a(d)[t].textSearch=f,placeholder:((i=o.filter)==null?void 0:i.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((u=o.filter)==null?void 0:u.type)==="DATE_RANGE"&&a(d)[t].type==="DATE_RANGE"?(l(),n("div",De,[_(me,{modelValue:a(d)[t].dateFrom,"onUpdate:modelValue":f=>a(d)[t].dateFrom=f,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((c=o.filter)==null?void 0:c.type)==="MULTI_VALUE"&&a(d)[t].type==="MULTI_VALUE"?(l(),D(fe,{key:2,modelValue:a(d)[t].textSearch,"onUpdate:modelValue":f=>a(d)[t].textSearch=f,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((k=o.filter)==null?void 0:k.type)==="RESET_FILTERS_BUTTON"?(l(),n("div",Me,[_(ye,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:a(V)},null,8,["onClick"])])):y("",!0)])}),128))])):y("",!0)]),_(ge,{name:"fade"},{default:ce(()=>[m.value?(l(),n("tbody",Be,[w("tr",null,[w("td",{colspan:r.columns.length+1},[_(ve,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Le)])])):g.value.length>0?(l(),n("tbody",Ie,[(l(!0),n(E,null,x(g.value,o=>(l(),n("tr",{key:o.id,class:U(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&a(B).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(l(),n("td",Ne,[_($,{"model-value":!!a(B).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?a(L)([o]):a(K)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):y("",!0),(l(!0),n(E,null,x(o.cells,(t,s)=>(l(),n("td",{key:s,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[_(Se,{cell:t},null,8,["cell"])],8,$e))),128))],2))),128))])):g.value.length===0?(l(),n("tbody",ze,[w("tr",null,[w("td",{colspan:r.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Oe)])])):y("",!0)]),_:1})])])]),_(pe,{ref_key:"pagination",ref:b,"total-rows-count":a(R),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":a(te)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});export{et as default};
 //# sourceMappingURL=ElServerSideTable.vue.esm2.js.map

package/dist/table/ElServerSideTable.vue.esm2.js.map CHANGED Viewed

	@@ -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;\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 } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\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: [],\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 onMounted(async () => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\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(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\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 px-3 py-3 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 :trailing-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","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;\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 } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\nimport { useDebounceFn } from '@vueuse/core';\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: [],\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 onMounted(async () => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\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(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n const filter = props.columns[i]?.filter;\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 px-3 py-3 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","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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"}

package/dist/table/ElTable.vue.cjs2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),G=require("./ElTablePagination.vue.cjs2.js"),H=require("../_CustomTransition.vue.cjs2.js"),b=require("../forms/ElInputCheckbox.vue.cjs2.js"),P=require("../forms/ElInputSelect.vue.cjs2.js"),X=require("../forms/ElInputDate.vue.cjs2.js"),$=require("../forms/ElInputText.vue.cjs2.js"),J=require("../ElSpinner.vue.cjs2.js"),_=require("./ElTableCell.vue.cjs2.js"),K=require("../ElButton.vue.cjs2.js"),Q={class:"flex flex-col"},W={class:"overflow-x-auto"},Y={class:"inline-block min-w-full bg-white align-middle"},Z={class:"min-w-full"},ee={class:"bg-neutral-surface-raised font-semibold"},te={key:1,class:"w-7"},le=["title","onClick"],oe={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"},re={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"},ne={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"},ae={key:0,class:"bg-white"},se={key:0,scope:"col"},ce={key:1,class:"flex flex-col"},ue={key:3,class:"flex justify-end"},ie={key:"loading"},de=["colspan"],pe={key:"tableFull",class:"bg-white"},fe={key:0,class:"flex h-20 items-center justify-center py-3"},me=["data-cy"],_e={key:"tableEmpty"},ge=["colspan"],we=e.defineComponent({__name:"ElTable",props:{columns:{},data:{},tableId:{default:0},sortByCol:{default:0},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},initialRows:{default:15},loading:{type:Boolean}},emits:["rows-selected"],setup(C,{expose:x,emit:F}){const n=C,R=F,w=10,m=e.ref(n.data);function A(){const t=e.ref({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[]});return e.onMounted(()=>{t.value.arrows=new Array(w),n.sortByCol>-1&&(t.value.arrows[n.sortByCol]=n.sortByColAsc)}),{sortStatus:t,sortData:l=>{if(l.length>0){const o=t.value.currentlySortColIndex,p=t.value.arrows[o];return l.sort((s,f)=>{const c=_.getCellSortableAndFilterableValue(s.cells[o]),a=_.getCellSortableAndFilterableValue(f.cells[o]);return p?c.localeCompare(a):a.localeCompare(c)})}return l},toggleSortArrow:l=>{t.value.currentlySortColIndex=l,t.value.arrows.splice(l,1,!t.value.arrows[l])}}}function N(){const t=e.ref([]);e.onMounted(()=>{t.value=new Array(w);for(let o=0;o<w;o++)t.value.splice(o,1,{textSearch:"",dateFrom:0})}),e.watch(()=>n.tableId,()=>r());const d=e.computed(()=>{var p,s,f;let o=n.data.slice();if(t.value.length>0&&o.length>0){for(let c=0;c<n.columns.length;c++){const a=n.columns[c],u=t.value[c];if(((p=a.filter)==null?void 0:p.type)==="FREE_SEARCH"){if(u.textSearch){const i=u.textSearch.trim().toLowerCase().split(" ");o=o.filter(y=>{const V=_.getCellSortableAndFilterableValue(y.cells[c]).toLowerCase();return i.some(j=>V&&V.includes(j))})}}else((s=a.filter)==null?void 0:s.type)==="MULTI_VALUE"?u.textSearch&&(o=o.filter(i=>u.textSearch===_.getCellSortableAndFilterableValue(i.cells[c]))):((f=a.filter)==null?void 0:f.type)==="DATE_RANGE"&&u.dateFrom>0&&(o=o.filter(i=>parseInt(_.getCellSortableAndFilterableValue(i.cells[c]))>=u.dateFrom))}if(k.value.currentlySortColIndex>-1)return z(o)}return o}),r=()=>{t.value.forEach(o=>{o.textSearch="",o.dateFrom=0})};return{filterStatus:t,filteredData:d,resetFilter:r,findFilterMultiValuesOptions:o=>{const p=n.data.filter(s=>{const f=s.cells[o];return _.getCellText(f)}).map(s=>_.getCellText(s.cells[o])||"");return[...new Set(p)].map(s=>({value:s,label:s}))}}}function M(){const t=e.ref([]),d=()=>{R("rows-selected",t.value)},r=a=>{o(a.map(u=>u.id))},l=a=>{const u=t.value.findIndex(i=>i.id===a);t.value.splice(u,1),d()},o=async a=>{n.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const u=m.value.filter(i=>a.includes(i.id));n.rowsSelectionMode==="single"&&(u.length=Math.min(1,u.length));for(const i of u)t.value.some(y=>y.id===i.id)||t.value.push(i);d()},p=()=>{t.value=[],d()},s=()=>m.value,f=()=>t.value,c=e.computed(()=>t.value.length>0&&t.value.length===m.value.length);return{selectedRows:t,rowsSelected:r,rowUnselected:l,selectRows:o,unselectAllRows:p,getDataRows:s,getSelectedRows:f,allRowsSelected:c}}const{selectedRows:h,rowsSelected:v,rowUnselected:T,selectRows:D,unselectAllRows:S,getDataRows:U,getSelectedRows:I,allRowsSelected:B}=M(),{filterStatus:g,filteredData:E,resetFilter:L,findFilterMultiValuesOptions:q}=N(),{sortStatus:k,sortData:z,toggleSortArrow:O}=A();return x({filteredData:E,selectRows:D,unselectAllRows:S,getDataRows:U,getSelectedRows:I}),(t,d)=>(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",W,[e.createElementVNode("div",Y,[e.createElementVNode("table",Z,[e.createElementVNode("thead",null,[e.createElementVNode("tr",ee,[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(b.default,{key:0,"model-value":e.unref(B),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:d[0]||(d[0]=()=>e.unref(B)?e.unref(S)():e.unref(v)(m.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",te))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(r,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider",[r.alignRight?"text-right":"text-left",r.noSort?"cursor-default":"cursor-pointer"]]),title:r.noSort?"Colonna non ordinabile":e.unref(k).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:o=>!r.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(r.title)+" ",1),r.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",oe,[e.unref(k).arrows[l]?(e.openBlock(),e.createElementBlock("path",re)):(e.openBlock(),e.createElementBlock("path",ne))]))],10,le))),128))]),e.unref(g).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",ae,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",se)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(r,l)=>{var o,p,s,f,c;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"},[((o=r.filter)==null?void 0:o.type)==="FREE_SEARCH"?(e.openBlock(),e.createBlock($.default,{key:0,modelValue:e.unref(g)[l].textSearch,"onUpdate:modelValue":a=>e.unref(g)[l].textSearch=a,placeholder:((p=r.filter)==null?void 0:p.placeholder)||"Cerca","hidden-error-message":!0,"trailing-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=r.filter)==null?void 0:s.type)==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",ce,[e.createVNode(X.default,{modelValue:e.unref(g)[l].dateFrom,"onUpdate:modelValue":a=>e.unref(g)[l].dateFrom=a,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((f=r.filter)==null?void 0:f.type)==="MULTI_VALUE"?(e.openBlock(),e.createBlock(P.default,{key:2,modelValue:e.unref(g)[l].textSearch,"onUpdate:modelValue":a=>e.unref(g)[l].textSearch=a,class:"flex flex-col",type:"autocomplete",options:e.unref(q)(l),"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((c=r.filter)==null?void 0:c.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",ue,[e.createVNode(K.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(L)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(H.default,{name:"fade"},{default:e.withCtx(()=>[n.loading?(e.openBlock(),e.createElementBlock("tbody",ie,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length+1},[e.createVNode(J.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,de)])])):m.value.length>0?(e.openBlock(),e.createElementBlock("tbody",pe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,r=>(e.openBlock(),e.createElementBlock("tr",{key:r.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(h).find(l=>l.id===r.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",fe,[e.createVNode(b.default,{"model-value":!!e.unref(h).find(l=>l.id===r.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(v)([r]):e.unref(T)(r.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.cells,(l,o)=>(e.openBlock(),e.createElementBlock("td",{key:o,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(_.default,{cell:l},null,8,["cell"])],8,me))),128))],2))),128))])):m.value.length===0?(e.openBlock(),e.createElementBlock("tbody",_e,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,ge)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(G.default,{"current-tab-rows":m.value,"onUpdate:currentTabRows":d[1]||(d[1]=r=>m.value=r),rows:e.unref(E),"rows-per-page":n.initialRows,"hide-footer":n.noFooter},null,8,["current-tab-rows","rows","rows-per-page","hide-footer"])]))}});exports.default=we;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),G=require("./ElTablePagination.vue.cjs2.js"),H=require("../_CustomTransition.vue.cjs2.js"),b=require("../forms/ElInputCheckbox.vue.cjs2.js"),P=require("../forms/ElInputSelect.vue.cjs2.js"),X=require("../forms/ElInputDate.vue.cjs2.js"),$=require("../forms/ElInputText.vue.cjs2.js"),J=require("../ElSpinner.vue.cjs2.js"),_=require("./ElTableCell.vue.cjs2.js"),K=require("../ElButton.vue.cjs2.js"),Q={class:"flex flex-col"},W={class:"overflow-x-auto"},Y={class:"inline-block min-w-full bg-white align-middle"},Z={class:"min-w-full"},ee={class:"bg-neutral-surface-raised font-semibold"},te={key:1,class:"w-7"},le=["title","onClick"],oe={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"},re={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"},ne={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"},ae={key:0,class:"bg-white"},se={key:0,scope:"col"},ce={key:1,class:"flex flex-col"},ue={key:3,class:"flex justify-end"},ie={key:"loading"},de=["colspan"],pe={key:"tableFull",class:"bg-white"},fe={key:0,class:"flex h-20 items-center justify-center py-3"},me=["data-cy"],_e={key:"tableEmpty"},ge=["colspan"],we=e.defineComponent({__name:"ElTable",props:{columns:{},data:{},tableId:{default:0},sortByCol:{default:0},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},initialRows:{default:15},loading:{type:Boolean}},emits:["rows-selected"],setup(C,{expose:x,emit:F}){const n=C,R=F,w=10,m=e.ref(n.data);function A(){const t=e.ref({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[]});return e.onMounted(()=>{t.value.arrows=new Array(w),n.sortByCol>-1&&(t.value.arrows[n.sortByCol]=n.sortByColAsc)}),{sortStatus:t,sortData:l=>{if(l.length>0){const o=t.value.currentlySortColIndex,p=t.value.arrows[o];return l.sort((s,f)=>{const c=_.getCellSortableAndFilterableValue(s.cells[o]),a=_.getCellSortableAndFilterableValue(f.cells[o]);return p?c.localeCompare(a):a.localeCompare(c)})}return l},toggleSortArrow:l=>{t.value.currentlySortColIndex=l,t.value.arrows.splice(l,1,!t.value.arrows[l])}}}function N(){const t=e.ref([]);e.onMounted(()=>{t.value=new Array(w);for(let o=0;o<w;o++)t.value.splice(o,1,{textSearch:"",dateFrom:0})}),e.watch(()=>n.tableId,()=>r());const d=e.computed(()=>{var p,s,f;let o=n.data.slice();if(t.value.length>0&&o.length>0){for(let c=0;c<n.columns.length;c++){const a=n.columns[c],u=t.value[c];if(((p=a.filter)==null?void 0:p.type)==="FREE_SEARCH"){if(u.textSearch){const i=u.textSearch.trim().toLowerCase().split(" ");o=o.filter(y=>{const V=_.getCellSortableAndFilterableValue(y.cells[c]).toLowerCase();return i.some(j=>V&&V.includes(j))})}}else((s=a.filter)==null?void 0:s.type)==="MULTI_VALUE"?u.textSearch&&(o=o.filter(i=>u.textSearch===_.getCellSortableAndFilterableValue(i.cells[c]))):((f=a.filter)==null?void 0:f.type)==="DATE_RANGE"&&u.dateFrom>0&&(o=o.filter(i=>parseInt(_.getCellSortableAndFilterableValue(i.cells[c]))>=u.dateFrom))}if(k.value.currentlySortColIndex>-1)return z(o)}return o}),r=()=>{t.value.forEach(o=>{o.textSearch="",o.dateFrom=0})};return{filterStatus:t,filteredData:d,resetFilter:r,findFilterMultiValuesOptions:o=>{const p=n.data.filter(s=>{const f=s.cells[o];return _.getCellText(f)}).map(s=>_.getCellText(s.cells[o])||"");return[...new Set(p)].map(s=>({value:s,label:s}))}}}function M(){const t=e.ref([]),d=()=>{R("rows-selected",t.value)},r=a=>{o(a.map(u=>u.id))},l=a=>{const u=t.value.findIndex(i=>i.id===a);t.value.splice(u,1),d()},o=async a=>{n.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const u=m.value.filter(i=>a.includes(i.id));n.rowsSelectionMode==="single"&&(u.length=Math.min(1,u.length));for(const i of u)t.value.some(y=>y.id===i.id)||t.value.push(i);d()},p=()=>{t.value=[],d()},s=()=>m.value,f=()=>t.value,c=e.computed(()=>t.value.length>0&&t.value.length===m.value.length);return{selectedRows:t,rowsSelected:r,rowUnselected:l,selectRows:o,unselectAllRows:p,getDataRows:s,getSelectedRows:f,allRowsSelected:c}}const{selectedRows:h,rowsSelected:v,rowUnselected:T,selectRows:D,unselectAllRows:S,getDataRows:U,getSelectedRows:I,allRowsSelected:B}=M(),{filterStatus:g,filteredData:E,resetFilter:L,findFilterMultiValuesOptions:q}=N(),{sortStatus:k,sortData:z,toggleSortArrow:O}=A();return x({filteredData:E,selectRows:D,unselectAllRows:S,getDataRows:U,getSelectedRows:I}),(t,d)=>(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",W,[e.createElementVNode("div",Y,[e.createElementVNode("table",Z,[e.createElementVNode("thead",null,[e.createElementVNode("tr",ee,[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(b.default,{key:0,"model-value":e.unref(B),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:d[0]||(d[0]=()=>e.unref(B)?e.unref(S)():e.unref(v)(m.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",te))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.columns,(r,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider",[r.alignRight?"text-right":"text-left",r.noSort?"cursor-default":"cursor-pointer"]]),title:r.noSort?"Colonna non ordinabile":e.unref(k).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:o=>!r.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(r.title)+" ",1),r.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",oe,[e.unref(k).arrows[l]?(e.openBlock(),e.createElementBlock("path",re)):(e.openBlock(),e.createElementBlock("path",ne))]))],10,le))),128))]),e.unref(g).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",ae,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",se)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(r,l)=>{var o,p,s,f,c;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"},[((o=r.filter)==null?void 0:o.type)==="FREE_SEARCH"?(e.openBlock(),e.createBlock($.default,{key:0,modelValue:e.unref(g)[l].textSearch,"onUpdate:modelValue":a=>e.unref(g)[l].textSearch=a,placeholder:((p=r.filter)==null?void 0:p.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=r.filter)==null?void 0:s.type)==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",ce,[e.createVNode(X.default,{modelValue:e.unref(g)[l].dateFrom,"onUpdate:modelValue":a=>e.unref(g)[l].dateFrom=a,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((f=r.filter)==null?void 0:f.type)==="MULTI_VALUE"?(e.openBlock(),e.createBlock(P.default,{key:2,modelValue:e.unref(g)[l].textSearch,"onUpdate:modelValue":a=>e.unref(g)[l].textSearch=a,class:"flex flex-col",type:"autocomplete",options:e.unref(q)(l),"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((c=r.filter)==null?void 0:c.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",ue,[e.createVNode(K.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(L)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(H.default,{name:"fade"},{default:e.withCtx(()=>[n.loading?(e.openBlock(),e.createElementBlock("tbody",ie,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length+1},[e.createVNode(J.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,de)])])):m.value.length>0?(e.openBlock(),e.createElementBlock("tbody",pe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,r=>(e.openBlock(),e.createElementBlock("tr",{key:r.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(h).find(l=>l.id===r.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",fe,[e.createVNode(b.default,{"model-value":!!e.unref(h).find(l=>l.id===r.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(v)([r]):e.unref(T)(r.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.cells,(l,o)=>(e.openBlock(),e.createElementBlock("td",{key:o,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(_.default,{cell:l},null,8,["cell"])],8,me))),128))],2))),128))])):m.value.length===0?(e.openBlock(),e.createElementBlock("tbody",_e,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,ge)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(G.default,{"current-tab-rows":m.value,"onUpdate:currentTabRows":d[1]||(d[1]=r=>m.value=r),rows:e.unref(E),"rows-per-page":n.initialRows,"hide-footer":n.noFooter},null,8,["current-tab-rows","rows","rows-per-page","hide-footer"])]))}});exports.default=we;
 //# sourceMappingURL=ElTable.vue.cjs2.js.map

package/dist/table/ElTable.vue.cjs2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n \| {\n type: FilterType;\n placeholder?: string;\n }\n \| { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number \| string; // needed to understand when the table changes cols and data\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 initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.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, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) \|\| '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\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 = currentTabDataRows.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[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.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, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\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(currentTabDataRows))\"\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 px-3 py-3 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\" class=\"bg-white\">\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'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder \|\| 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in 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=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.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=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\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=\"currentTabDataRows.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 <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
1	+ {"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n \| {\n type: FilterType;\n placeholder?: string;\n }\n \| { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number \| string; // needed to understand when the table changes cols and data\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 initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.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, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) \|\| '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\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 = currentTabDataRows.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[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.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, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\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(currentTabDataRows))\"\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 px-3 py-3 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\" class=\"bg-white\">\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'\"\n v-model=\"filterStatus[index].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'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in 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=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.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=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\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=\"currentTabDataRows.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 <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}

package/dist/table/ElTable.vue.esm2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineComponent as le,ref as x,openBlock as s,createElementBlock as r,createElementVNode as g,normalizeClass as F,createBlock as A,unref as a,createCommentVNode as _,Fragment as b,renderList as k,createTextVNode as oe,toDisplayString as se,createVNode as S,withCtx as re,onMounted as I,watch as ae,computed as L,nextTick as ne}from"vue";import ie from"./ElTablePagination.vue.esm2.js";import ce from"../_CustomTransition.vue.esm2.js";import $ from"../forms/ElInputCheckbox.vue.esm2.js";import de from"../forms/ElInputSelect.vue.esm2.js";import ue from"../forms/ElInputDate.vue.esm2.js";import fe from"../forms/ElInputText.vue.esm2.js";import me from"../ElSpinner.vue.esm2.js";import pe,{getCellSortableAndFilterableValue as v,getCellText as O}from"./ElTableCell.vue.esm2.js";import we from"../ElButton.vue.esm2.js";const he={class:"flex flex-col"},ge={class:"overflow-x-auto"},ye={class:"inline-block min-w-full bg-white align-middle"},_e={class:"min-w-full"},Se={class:"bg-neutral-surface-raised font-semibold"},ve={key:1,class:"w-7"},xe=["title","onClick"],be={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"},ke={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"},Ce={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"},Re={key:0,class:"bg-white"},Ve={key:0,scope:"col"},Fe={key:1,class:"flex flex-col"},Ae={key:3,class:"flex justify-end"},Me={key:"loading"},Ee=["colspan"],Be={key:"tableFull",class:"bg-white"},De={key:0,class:"flex h-20 items-center justify-center py-3"},Te=["data-cy"],Ue={key:"tableEmpty"},Ie=["colspan"],Je=le({__name:"ElTable",props:{columns:{},data:{},tableId:{default:0},sortByCol:{default:0},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},initialRows:{default:15},loading:{type:Boolean}},emits:["rows-selected"],setup(z,{expose:N,emit:j}){const n=z,G=j,C=10,h=x(n.data);function H(){const e=x({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[]});return I(()=>{e.value.arrows=new Array(C),n.sortByCol>-1&&(e.value.arrows[n.sortByCol]=n.sortByColAsc)}),{sortStatus:e,sortData:t=>{if(t.length>0){const l=e.value.currentlySortColIndex,p=e.value.arrows[l];return t.sort((c,w)=>{const d=v(c.cells[l]),i=v(w.cells[l]);return p?d.localeCompare(i):i.localeCompare(d)})}return t},toggleSortArrow:t=>{e.value.currentlySortColIndex=t,e.value.arrows.splice(t,1,!e.value.arrows[t])}}}function X(){const e=x([]);I(()=>{e.value=new Array(C);for(let l=0;l<C;l++)e.value.splice(l,1,{textSearch:"",dateFrom:0})}),ae(()=>n.tableId,()=>o());const m=L(()=>{var p,c,w;let l=n.data.slice();if(e.value.length>0&&l.length>0){for(let d=0;d<n.columns.length;d++){const i=n.columns[d],u=e.value[d];if(((p=i.filter)==null?void 0:p.type)==="FREE_SEARCH"){if(u.textSearch){const f=u.textSearch.trim().toLowerCase().split(" ");l=l.filter(V=>{const U=v(V.cells[d]).toLowerCase();return f.some(te=>U&&U.includes(te))})}}else((c=i.filter)==null?void 0:c.type)==="MULTI_VALUE"?u.textSearch&&(l=l.filter(f=>u.textSearch===v(f.cells[d]))):((w=i.filter)==null?void 0:w.type)==="DATE_RANGE"&&u.dateFrom>0&&(l=l.filter(f=>parseInt(v(f.cells[d]))>=u.dateFrom))}if(R.value.currentlySortColIndex>-1)return Z(l)}return l}),o=()=>{e.value.forEach(l=>{l.textSearch="",l.dateFrom=0})};return{filterStatus:e,filteredData:m,resetFilter:o,findFilterMultiValuesOptions:l=>{const p=n.data.filter(c=>{const w=c.cells[l];return O(w)}).map(c=>O(c.cells[l])||"");return[...new Set(p)].map(c=>({value:c,label:c}))}}}function q(){const e=x([]),m=()=>{G("rows-selected",e.value)},o=i=>{l(i.map(u=>u.id))},t=i=>{const u=e.value.findIndex(f=>f.id===i);e.value.splice(u,1),m()},l=async i=>{n.rowsSelectionMode==="single"&&(e.value=[],await ne());const u=h.value.filter(f=>i.includes(f.id));n.rowsSelectionMode==="single"&&(u.length=Math.min(1,u.length));for(const f of u)e.value.some(V=>V.id===f.id)||e.value.push(f);m()},p=()=>{e.value=[],m()},c=()=>h.value,w=()=>e.value,d=L(()=>e.value.length>0&&e.value.length===h.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:l,unselectAllRows:p,getDataRows:c,getSelectedRows:w,allRowsSelected:d}}const{selectedRows:M,rowsSelected:E,rowUnselected:J,selectRows:K,unselectAllRows:B,getDataRows:P,getSelectedRows:Q,allRowsSelected:D}=q(),{filterStatus:y,filteredData:T,resetFilter:W,findFilterMultiValuesOptions:Y}=X(),{sortStatus:R,sortData:Z,toggleSortArrow:ee}=H();return N({filteredData:T,selectRows:K,unselectAllRows:B,getDataRows:P,getSelectedRows:Q}),(e,m)=>(s(),r("div",he,[g("div",ge,[g("div",ye,[g("table",_e,[g("thead",null,[g("tr",Se,[e.rowsSelectionMode?(s(),r("th",{key:0,scope:"col",class:F(["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"?(s(),A($,{key:0,"model-value":a(D),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:m[0]||(m[0]=()=>a(D)?a(B)():a(E)(h.value))},null,8,["model-value","disabled"])):(s(),r("div",ve))],2)):_("",!0),(s(!0),r(b,null,k(n.columns,(o,t)=>(s(),r("th",{key:t,scope:"col",class:F(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 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":a(R).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:l=>!o.noSort&&a(ee)(t)},[oe(se(o.title)+" ",1),o.noSort?_("",!0):(s(),r("svg",be,[a(R).arrows[t]?(s(),r("path",ke)):(s(),r("path",Ce))]))],10,xe))),128))]),a(y).length>0&&!e.noFilters?(s(),r("tr",Re,[e.rowsSelectionMode?(s(),r("th",Ve)):_("",!0),(s(!0),r(b,null,k(e.columns,(o,t)=>{var l,p,c,w,d;return s(),r("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((l=o.filter)==null?void 0:l.type)==="FREE_SEARCH"?(s(),A(fe,{key:0,modelValue:a(y)[t].textSearch,"onUpdate:modelValue":i=>a(y)[t].textSearch=i,placeholder:((p=o.filter)==null?void 0:p.placeholder)||"Cerca","hidden-error-message":!0,"trailing-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((c=o.filter)==null?void 0:c.type)==="DATE_RANGE"?(s(),r("div",Fe,[S(ue,{modelValue:a(y)[t].dateFrom,"onUpdate:modelValue":i=>a(y)[t].dateFrom=i,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((w=o.filter)==null?void 0:w.type)==="MULTI_VALUE"?(s(),A(de,{key:2,modelValue:a(y)[t].textSearch,"onUpdate:modelValue":i=>a(y)[t].textSearch=i,class:"flex flex-col",type:"autocomplete",options:a(Y)(t),"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((d=o.filter)==null?void 0:d.type)==="RESET_FILTERS_BUTTON"?(s(),r("div",Ae,[S(we,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:a(W)},null,8,["onClick"])])):_("",!0)])}),128))])):_("",!0)]),S(ce,{name:"fade"},{default:re(()=>[n.loading?(s(),r("tbody",Me,[g("tr",null,[g("td",{colspan:n.columns.length+1},[S(me,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Ee)])])):h.value.length>0?(s(),r("tbody",Be,[(s(!0),r(b,null,k(h.value,o=>(s(),r("tr",{key:o.id,class:F(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&a(M).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(s(),r("td",De,[S($,{"model-value":!!a(M).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?a(E)([o]):a(J)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):_("",!0),(s(!0),r(b,null,k(o.cells,(t,l)=>(s(),r("td",{key:l,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[S(pe,{cell:t},null,8,["cell"])],8,Te))),128))],2))),128))])):h.value.length===0?(s(),r("tbody",Ue,[g("tr",null,[g("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Ie)])])):_("",!0)]),_:1})])])]),S(ie,{"current-tab-rows":h.value,"onUpdate:currentTabRows":m[1]||(m[1]=o=>h.value=o),rows:a(T),"rows-per-page":n.initialRows,"hide-footer":n.noFooter},null,8,["current-tab-rows","rows","rows-per-page","hide-footer"])]))}});export{Je as default};
+import{defineComponent as le,ref as x,openBlock as s,createElementBlock as r,createElementVNode as g,normalizeClass as F,createBlock as A,unref as a,createCommentVNode as _,Fragment as b,renderList as k,createTextVNode as oe,toDisplayString as se,createVNode as S,withCtx as re,onMounted as I,watch as ae,computed as L,nextTick as ne}from"vue";import ie from"./ElTablePagination.vue.esm2.js";import ce from"../_CustomTransition.vue.esm2.js";import $ from"../forms/ElInputCheckbox.vue.esm2.js";import de from"../forms/ElInputSelect.vue.esm2.js";import ue from"../forms/ElInputDate.vue.esm2.js";import fe from"../forms/ElInputText.vue.esm2.js";import me from"../ElSpinner.vue.esm2.js";import pe,{getCellSortableAndFilterableValue as v,getCellText as O}from"./ElTableCell.vue.esm2.js";import we from"../ElButton.vue.esm2.js";const he={class:"flex flex-col"},ge={class:"overflow-x-auto"},ye={class:"inline-block min-w-full bg-white align-middle"},_e={class:"min-w-full"},Se={class:"bg-neutral-surface-raised font-semibold"},ve={key:1,class:"w-7"},xe=["title","onClick"],be={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"},ke={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"},Ce={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"},Re={key:0,class:"bg-white"},Ve={key:0,scope:"col"},Fe={key:1,class:"flex flex-col"},Ae={key:3,class:"flex justify-end"},Me={key:"loading"},Ee=["colspan"],Be={key:"tableFull",class:"bg-white"},De={key:0,class:"flex h-20 items-center justify-center py-3"},Te=["data-cy"],Ue={key:"tableEmpty"},Ie=["colspan"],Je=le({__name:"ElTable",props:{columns:{},data:{},tableId:{default:0},sortByCol:{default:0},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},initialRows:{default:15},loading:{type:Boolean}},emits:["rows-selected"],setup(z,{expose:N,emit:j}){const n=z,G=j,C=10,h=x(n.data);function H(){const e=x({currentlySortColIndex:n.sortByCol>-1?n.sortByCol:-1,arrows:[]});return I(()=>{e.value.arrows=new Array(C),n.sortByCol>-1&&(e.value.arrows[n.sortByCol]=n.sortByColAsc)}),{sortStatus:e,sortData:t=>{if(t.length>0){const l=e.value.currentlySortColIndex,p=e.value.arrows[l];return t.sort((c,w)=>{const d=v(c.cells[l]),i=v(w.cells[l]);return p?d.localeCompare(i):i.localeCompare(d)})}return t},toggleSortArrow:t=>{e.value.currentlySortColIndex=t,e.value.arrows.splice(t,1,!e.value.arrows[t])}}}function X(){const e=x([]);I(()=>{e.value=new Array(C);for(let l=0;l<C;l++)e.value.splice(l,1,{textSearch:"",dateFrom:0})}),ae(()=>n.tableId,()=>o());const m=L(()=>{var p,c,w;let l=n.data.slice();if(e.value.length>0&&l.length>0){for(let d=0;d<n.columns.length;d++){const i=n.columns[d],u=e.value[d];if(((p=i.filter)==null?void 0:p.type)==="FREE_SEARCH"){if(u.textSearch){const f=u.textSearch.trim().toLowerCase().split(" ");l=l.filter(V=>{const U=v(V.cells[d]).toLowerCase();return f.some(te=>U&&U.includes(te))})}}else((c=i.filter)==null?void 0:c.type)==="MULTI_VALUE"?u.textSearch&&(l=l.filter(f=>u.textSearch===v(f.cells[d]))):((w=i.filter)==null?void 0:w.type)==="DATE_RANGE"&&u.dateFrom>0&&(l=l.filter(f=>parseInt(v(f.cells[d]))>=u.dateFrom))}if(R.value.currentlySortColIndex>-1)return Z(l)}return l}),o=()=>{e.value.forEach(l=>{l.textSearch="",l.dateFrom=0})};return{filterStatus:e,filteredData:m,resetFilter:o,findFilterMultiValuesOptions:l=>{const p=n.data.filter(c=>{const w=c.cells[l];return O(w)}).map(c=>O(c.cells[l])||"");return[...new Set(p)].map(c=>({value:c,label:c}))}}}function q(){const e=x([]),m=()=>{G("rows-selected",e.value)},o=i=>{l(i.map(u=>u.id))},t=i=>{const u=e.value.findIndex(f=>f.id===i);e.value.splice(u,1),m()},l=async i=>{n.rowsSelectionMode==="single"&&(e.value=[],await ne());const u=h.value.filter(f=>i.includes(f.id));n.rowsSelectionMode==="single"&&(u.length=Math.min(1,u.length));for(const f of u)e.value.some(V=>V.id===f.id)||e.value.push(f);m()},p=()=>{e.value=[],m()},c=()=>h.value,w=()=>e.value,d=L(()=>e.value.length>0&&e.value.length===h.value.length);return{selectedRows:e,rowsSelected:o,rowUnselected:t,selectRows:l,unselectAllRows:p,getDataRows:c,getSelectedRows:w,allRowsSelected:d}}const{selectedRows:M,rowsSelected:E,rowUnselected:J,selectRows:K,unselectAllRows:B,getDataRows:P,getSelectedRows:Q,allRowsSelected:D}=q(),{filterStatus:y,filteredData:T,resetFilter:W,findFilterMultiValuesOptions:Y}=X(),{sortStatus:R,sortData:Z,toggleSortArrow:ee}=H();return N({filteredData:T,selectRows:K,unselectAllRows:B,getDataRows:P,getSelectedRows:Q}),(e,m)=>(s(),r("div",he,[g("div",ge,[g("div",ye,[g("table",_e,[g("thead",null,[g("tr",Se,[e.rowsSelectionMode?(s(),r("th",{key:0,scope:"col",class:F(["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"?(s(),A($,{key:0,"model-value":a(D),disabled:e.rowsSelectionDisabled,size:"xxs",onClick:m[0]||(m[0]=()=>a(D)?a(B)():a(E)(h.value))},null,8,["model-value","disabled"])):(s(),r("div",ve))],2)):_("",!0),(s(!0),r(b,null,k(n.columns,(o,t)=>(s(),r("th",{key:t,scope:"col",class:F(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 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":a(R).arrows[t]?"Ordine crescente":"Ordine decrescente",onClick:l=>!o.noSort&&a(ee)(t)},[oe(se(o.title)+" ",1),o.noSort?_("",!0):(s(),r("svg",be,[a(R).arrows[t]?(s(),r("path",ke)):(s(),r("path",Ce))]))],10,xe))),128))]),a(y).length>0&&!e.noFilters?(s(),r("tr",Re,[e.rowsSelectionMode?(s(),r("th",Ve)):_("",!0),(s(!0),r(b,null,k(e.columns,(o,t)=>{var l,p,c,w,d;return s(),r("th",{key:t,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((l=o.filter)==null?void 0:l.type)==="FREE_SEARCH"?(s(),A(fe,{key:0,modelValue:a(y)[t].textSearch,"onUpdate:modelValue":i=>a(y)[t].textSearch=i,placeholder:((p=o.filter)==null?void 0:p.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(),r("div",Fe,[S(ue,{modelValue:a(y)[t].dateFrom,"onUpdate:modelValue":i=>a(y)[t].dateFrom=i,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((w=o.filter)==null?void 0:w.type)==="MULTI_VALUE"?(s(),A(de,{key:2,modelValue:a(y)[t].textSearch,"onUpdate:modelValue":i=>a(y)[t].textSearch=i,class:"flex flex-col",type:"autocomplete",options:a(Y)(t),"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((d=o.filter)==null?void 0:d.type)==="RESET_FILTERS_BUTTON"?(s(),r("div",Ae,[S(we,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:a(W)},null,8,["onClick"])])):_("",!0)])}),128))])):_("",!0)]),S(ce,{name:"fade"},{default:re(()=>[n.loading?(s(),r("tbody",Me,[g("tr",null,[g("td",{colspan:n.columns.length+1},[S(me,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,Ee)])])):h.value.length>0?(s(),r("tbody",Be,[(s(!0),r(b,null,k(h.value,o=>(s(),r("tr",{key:o.id,class:F(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":e.rowsSelectionMode&&a(M).find(t=>t.id===o.id)}]),"data-cy":"table-row"},[e.rowsSelectionMode?(s(),r("td",De,[S($,{"model-value":!!a(M).find(t=>t.id===o.id),disabled:e.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":t=>t?a(E)([o]):a(J)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):_("",!0),(s(!0),r(b,null,k(o.cells,(t,l)=>(s(),r("td",{key:l,class:"max-w-sm px-2.5 py-2.5","data-cy":t.type==="default"&&t.mainText.trim().replaceAll(" ","").replaceAll(",","")},[S(pe,{cell:t},null,8,["cell"])],8,Te))),128))],2))),128))])):h.value.length===0?(s(),r("tbody",Ue,[g("tr",null,[g("td",{colspan:n.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,Ie)])])):_("",!0)]),_:1})])])]),S(ie,{"current-tab-rows":h.value,"onUpdate:currentTabRows":m[1]||(m[1]=o=>h.value=o),rows:a(T),"rows-per-page":n.initialRows,"hide-footer":n.noFooter},null,8,["current-tab-rows","rows","rows-per-page","hide-footer"])]))}});export{Je as default};
 //# sourceMappingURL=ElTable.vue.esm2.js.map

package/dist/table/ElTable.vue.esm2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElTable.vue.esm2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n \| {\n type: FilterType;\n placeholder?: string;\n }\n \| { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number \| string; // needed to understand when the table changes cols and data\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 initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.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, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) \|\| '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\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 = currentTabDataRows.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[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.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, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\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(currentTabDataRows))\"\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 px-3 py-3 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\" class=\"bg-white\">\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'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder \|\| 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in 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=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.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=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\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=\"currentTabDataRows.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 <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
1	+ {"version":3,"file":"ElTable.vue.esm2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n \| {\n type: FilterType;\n placeholder?: string;\n }\n \| { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number \| string; // needed to understand when the table changes cols and data\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 initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.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, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) \|\| '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\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 = currentTabDataRows.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[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.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, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\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(currentTabDataRows))\"\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 px-3 py-3 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\" class=\"bg-white\">\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'\"\n v-model=\"filterStatus[index].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'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in 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=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.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=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\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=\"currentTabDataRows.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 <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}

package/package.json CHANGED Viewed

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