npm - @davincihealthcare/elty-design-system-vue - Versions diffs - 1.77.0 → 1.77.1 - Mend

@davincihealthcare/elty-design-system-vue 1.77.0 → 1.77.1

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

package/dist/src/table/ElMobileTable.vue.esm2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' \| 'secondaryRow' \| 'tertiaryRow' \| 'amount' \| 'tags' \| 'time' \| 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n \| { type?: 'default'; text: string }\n \| { type: 'tag'; text: string; color?: ElTagColor }\n \| { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' \| 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' \| 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' \| 'type' \| 'label' \| 'error' \| 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' \| 'type' \| 'label' \| 'error' \| 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' \| 'secondaryRow' \| 'tertiaryRow' \| 'amount' \| 'tags' \| 'time' \| 'avatar';\n order: 'asc' \| 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow \| null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<NodeJS.Timeout \| undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 \|\|\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) \|\|\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T \| undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText \|\|\n multiValueFiltersValues.value.mainText.length === 0 \|\|\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow \|\|\n multiValueFiltersValues.value.secondaryRow.length === 0 \|\|\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow \|\|\n multiValueFiltersValues.value.tertiaryRow.length === 0 \|\|\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount \|\|\n multiValueFiltersValues.value.amount.length === 0 \|\|\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags \|\|\n multiValueFiltersValues.value.tags.length === 0 \|\|\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar \|\|\n multiValueFiltersValues.value.avatar.length === 0 \|\|\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled \|\| Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) \|\| filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'> \| undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'> \| undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}
1	+ {"version":3,"file":"ElMobileTable.vue.esm2.js","sources":["../../../src/table/ElMobileTable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport ElListItem, { ElListItemProps } from '@/ElListItem.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElButton, { ElButtonProps } from '@/ElButton.vue';\nimport { computed, ref, watch } from 'vue';\nimport ElTag, { ElTagColor } from '@/ElTag.vue';\nimport ElModal from '@/ElModal.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElIcon from '@/ElIcon.vue';\nimport { OptionType } from '@/types';\n\nexport type SelectOptions = OptionType[];\n\nexport type MobileTableFiltersStatus = {\n freeSearch?: string;\n fromDate?: number;\n multiSelect: {\n mainText?: string;\n secondaryRow?: string;\n tertiaryRow?: string;\n tags?: string;\n time?: string;\n amount?: string;\n avatar?: string;\n };\n};\n\nexport type MobileTableFilter = {\n freeSearch?: {\n placeholder?: string;\n filterOn: ('mainText' \| 'secondaryRow' \| 'tertiaryRow' \| 'amount' \| 'tags' \| 'time' \| 'avatar')[];\n initialValue?: string;\n };\n multiValue?: {\n mainText?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n secondaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tertiaryRow?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n amount?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n tags?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n time?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n avatar?: {\n enabled: boolean;\n label: string;\n selectOptions?: SelectOptions;\n initialValue?: string;\n };\n };\n dateRange?: {\n enabled: boolean;\n label: string;\n initialValue?: number;\n placeholder?: string;\n };\n resetButton?: boolean;\n // if true filters won't be applied by the table (used for server side table)\n managed?: boolean;\n};\n\nexport type MobileTableRow = Omit<ElListItemProps, 'color'> & {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: any;\n clickAction?: (payload: PointerEvent) => void;\n actions?: {\n primary: InstanceType<typeof ElButton>['$props'];\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n sortableAndFilterableValue?: string;\n details: {\n label: string;\n value:\n \| { type?: 'default'; text: string }\n \| { type: 'tag'; text: string; color?: ElTagColor }\n \| { type: 'avatar'; label?: string; picture?: string };\n }[];\n};\n\nexport interface ElMobileTableProps {\n color: 'primary' \| 'secondary';\n filters: MobileTableFilter;\n loading?: boolean;\n preventDefaultItemClick?: boolean;\n selection?: {\n enabled: boolean;\n selectionMode?: 'single' \| 'multiple'; // defaults to multiple\n destructiveAction?: {\n enabled: boolean;\n button: Omit<ElButtonProps, 'variant' \| 'type' \| 'label' \| 'error' \| 'onClick'> & { label?: (count: number) => string };\n };\n bulkActionButton: Omit<ElButtonProps, 'variant' \| 'type' \| 'label' \| 'error' \| 'onClick'> & { label: (count: number) => string };\n selectedLabel?: (selectionCount: number) => string;\n cancelText?: (selectionCount: number) => string;\n };\n sortBy?: {\n on: 'mainText' \| 'secondaryRow' \| 'tertiaryRow' \| 'amount' \| 'tags' \| 'time' \| 'avatar';\n order: 'asc' \| 'desc';\n };\n itemsCountLabel?: (count: number) => string;\n noItemsCountLabel?: boolean;\n data: MobileTableRow[];\n}\n\nconst props = defineProps<ElMobileTableProps>();\n\nconst search = ref<string>('');\nconst selectedItems = ref<number[]>([]);\nconst selectedItemToShow = ref<MobileTableRow \| null>(null);\nconst filterModalOpen = ref(false);\nconst filterDateFrom = ref<number>(0);\nconst managedSearchDebounceTimeout = ref<ReturnType<typeof setTimeout> \| undefined>(undefined);\n\nwatch(search, (newValue, oldValue) => {\n if (managedSearchDebounceTimeout.value) {\n clearTimeout(managedSearchDebounceTimeout.value);\n }\n managedSearchDebounceTimeout.value = setTimeout(() => {\n if (oldValue !== newValue) {\n emitFiltersUpdated();\n }\n }, 500);\n});\n\nconst filtersAreApplied = computed(() => {\n return (\n search.value.trim().length > 0 \|\|\n Object.values(multiValueFiltersValues.value).some(filter => filter && filter.trim().length > 0) \|\|\n filterDateFrom.value !== 0\n );\n});\n\nconst getSelectedRows = () => selectedItems.value.map(index => props.data[index]);\n\nconst matchesSearch = (value: string): boolean => {\n const searchText = search.value?.trim();\n if (!searchText) return true;\n return value.split(' ').some(part => part.toLowerCase().includes(searchText.toLowerCase()));\n};\n\nconst multiValueFiltersValues = ref<MobileTableFiltersStatus['multiSelect']>({\n avatar: props.filters.multiValue?.avatar?.initialValue ?? '',\n mainText: props.filters.multiValue?.mainText?.initialValue ?? '',\n secondaryRow: props.filters.multiValue?.secondaryRow?.initialValue ?? '',\n tertiaryRow: props.filters.multiValue?.tertiaryRow?.initialValue ?? '',\n amount: props.filters.multiValue?.amount?.initialValue ?? '',\n tags: props.filters.multiValue?.tags?.initialValue ?? '',\n time: props.filters.multiValue?.time?.initialValue ?? '',\n});\n\nconst multiValueFiltersModalValues = ref<MobileTableFiltersStatus['multiSelect']>({\n ...multiValueFiltersValues.value,\n});\n\nconst makeArrUnique = (arr: string[]): string[] => Array.from(new Set(arr));\nconst isDefined = <T,>(value: T \| undefined): value is T => value !== undefined;\n\nconst multiValueAvailabeOptions = computed<{\n mainText: SelectOptions;\n secondaryRow: SelectOptions;\n tertiaryRow: SelectOptions;\n amount: SelectOptions;\n tags: SelectOptions;\n time: SelectOptions;\n avatar: SelectOptions;\n}>(() => {\n return {\n mainText: props.filters.multiValue?.mainText\n ? props.filters.multiValue.mainText.selectOptions ??\n makeArrUnique(props.data.map(item => item.mainText.label)).map(value => ({ value, label: value }))\n : [],\n secondaryRow: props.filters.multiValue?.secondaryRow\n ? props.filters.multiValue.secondaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.secondaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tertiaryRow: props.filters.multiValue?.tertiaryRow\n ? props.filters.multiValue.tertiaryRow.selectOptions ??\n makeArrUnique(props.data.map(item => item.tertiaryRow).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n amount: props.filters.multiValue?.amount\n ? props.filters.multiValue.amount.selectOptions ??\n makeArrUnique(props.data.map(item => item.amount).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n tags: props.filters.multiValue?.tags\n ? props.filters.multiValue.tags.selectOptions ??\n makeArrUnique(props.data.flatMap(item => (item.tags ?? []).map(tag => tag.text).filter(isDefined))).map(value => ({\n value,\n label: value,\n }))\n : [],\n time: props.filters.multiValue?.time\n ? props.filters.multiValue.time.selectOptions ??\n makeArrUnique(props.data.map(item => item.time).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n avatar: props.filters.multiValue?.avatar\n ? props.filters.multiValue.avatar.selectOptions ??\n makeArrUnique(props.data.map(item => item.avatar?.label).filter(isDefined)).map(value => ({ value, label: value }))\n : [],\n };\n});\n\nconst filteredData = computed(() => {\n let data = props.data.slice();\n if (props.filters.managed) return data;\n if (props.filters.freeSearch && search.value.trim().length > 0) {\n const searchParams = props.filters.freeSearch;\n data = data.filter(item =>\n searchParams.filterOn.some(filter => {\n switch (filter) {\n case 'avatar':\n return item.avatar && item.avatar.label && matchesSearch(item.avatar.label);\n case 'time':\n return item.time && matchesSearch(item.time);\n case 'mainText':\n return item.mainText && matchesSearch(item.mainText.label);\n case 'secondaryRow':\n return item.secondaryRow && matchesSearch(item.secondaryRow);\n case 'tertiaryRow':\n return item.tertiaryRow && matchesSearch(item.tertiaryRow);\n case 'amount':\n return item.amount && matchesSearch(item.amount);\n case 'tags':\n return item.tags && item.tags.some(tag => matchesSearch(tag.text));\n }\n }),\n );\n }\n\n if (props.filters.multiValue) {\n if (props.filters.multiValue.mainText) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.mainText \|\|\n multiValueFiltersValues.value.mainText.length === 0 \|\|\n multiValueFiltersValues.value.mainText.includes(item.sortableAndFilterableValue ?? item.mainText.label),\n );\n }\n if (props.filters.multiValue.secondaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.secondaryRow \|\|\n multiValueFiltersValues.value.secondaryRow.length === 0 \|\|\n multiValueFiltersValues.value.secondaryRow.includes(item.sortableAndFilterableValue ?? item.secondaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.tertiaryRow) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tertiaryRow \|\|\n multiValueFiltersValues.value.tertiaryRow.length === 0 \|\|\n multiValueFiltersValues.value.tertiaryRow.includes(item.sortableAndFilterableValue ?? item.tertiaryRow ?? ''),\n );\n }\n if (props.filters.multiValue.amount) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.amount \|\|\n multiValueFiltersValues.value.amount.length === 0 \|\|\n multiValueFiltersValues.value.amount.includes(item.sortableAndFilterableValue ?? item.amount ?? ''),\n );\n }\n if (props.filters.multiValue.tags) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.tags \|\|\n multiValueFiltersValues.value.tags.length === 0 \|\|\n item.tags?.some(tag => multiValueFiltersValues.value.tags!.includes(tag.text)),\n );\n }\n if (props.filters.multiValue.avatar) {\n data = data.filter(\n item =>\n !multiValueFiltersValues.value.avatar \|\|\n multiValueFiltersValues.value.avatar.length === 0 \|\|\n multiValueFiltersValues.value.avatar.includes(item.sortableAndFilterableValue ?? item.avatar?.label ?? ''),\n );\n }\n }\n\n if (props.filters.dateRange?.enabled) {\n data = data.filter(item => {\n if (!filterDateFrom.value) return true;\n return item.time && new Date(item.time).getTime() >= filterDateFrom.value;\n });\n }\n\n if (props.sortBy) {\n data = data.sort((a, b) => {\n let result = 0;\n if (a.sortableAndFilterableValue && b.sortableAndFilterableValue) {\n result = a.sortableAndFilterableValue.localeCompare(b.sortableAndFilterableValue);\n } else {\n switch (props.sortBy!.on) {\n case 'mainText':\n result = a.mainText.label.localeCompare(b.mainText.label);\n break;\n case 'avatar':\n result = (a.avatar?.label ?? '').localeCompare(b.avatar?.label ?? '');\n break;\n case 'time':\n case 'secondaryRow':\n case 'tertiaryRow':\n result = (a[props.sortBy!.on] ?? '').localeCompare(b[props.sortBy!.on] ?? '');\n break;\n case 'amount':\n const numA = parseFloat(a.amount ?? '0');\n const numB = parseFloat(b.amount ?? '0');\n result = numA - numB;\n break;\n case 'tags':\n result = (a.tags?.map(tag => tag.text).join('') ?? '').localeCompare(b.tags?.map(tag => tag.text).join('') ?? '');\n break;\n }\n }\n if (props.sortBy?.order === 'desc') {\n result *= -1;\n }\n return result;\n });\n }\n\n return data;\n});\n\nconst enabledSelectFilters = computed(() => {\n return Object.fromEntries(Object.entries(props.filters.multiValue ?? {}).filter(([_, filter]) => filter.enabled));\n});\n\nconst showFiltersButton = computed(() => {\n return props.filters.dateRange?.enabled \|\| Object.values(props.filters.multiValue ?? {}).some(filter => filter.enabled);\n});\n\nconst hasFiltersApplied = computed(() => {\n return Object.values(multiValueFiltersValues.value).some(filter => filter.length > 0) \|\| filterDateFrom.value !== 0;\n});\n\nconst selectRows = (rowsIds: string[]) => {\n const indexes = rowsIds.map(id => getItemIndex({ id: id }));\n if (props.selection?.selectionMode === 'single' && indexes.length > 0) {\n selectedItems.value = [indexes.at(0)!];\n }\n selectedItems.value.push(...indexes);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n};\n\nconst selectRow = (rowIndex: number) => {\n if (props.selection?.selectionMode === 'single') {\n selectedItems.value = [rowIndex];\n } else {\n selectedItems.value.push(rowIndex);\n selectedItems.value = Array.from(new Set(selectedItems.value));\n }\n emit('rows-selected', getSelectedRows());\n};\n\nconst deselectRow = (rowIndex: number) => {\n selectedItems.value = selectedItems.value.filter(index => index !== rowIndex);\n};\n\nconst getItemIndex = (item: { id: string }) => {\n const idx = props.data.findIndex(i => i.id === item.id);\n if (idx === -1) throw new Error(`Item with id ${item.id} not found`);\n return idx;\n};\n\nconst unselectAllRows = () => {\n selectedItems.value = [];\n};\n\nconst getDataRows = () => props.data;\n\nconst openFiltersModal = () => {\n filterModalOpen.value = true;\n};\n\nconst showItemDetails = (item: MobileTableRow) => {\n selectedItemToShow.value = item;\n};\n\nconst closeItemDetails = () => {\n selectedItemToShow.value = null;\n};\n\nconst detailsPrimaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'>>(() => {\n if (selectedItemToShow.value?.actions) {\n return selectedItemToShow.value.actions.primary;\n } else {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n }\n});\nconst detailsSecondaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'> \| undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return selectedItemToShow.value.actions.secondary;\n } else if (selectedItemToShow.value?.actions?.primary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\nconst detailsTertiaryAction = computed<Omit<InstanceType<typeof ElButton>['$props'], 'error' \| 'size' \| 'variant'> \| undefined>(() => {\n if (selectedItemToShow.value?.actions?.secondary) {\n return {\n label: 'Chiudi',\n onClick: closeItemDetails,\n };\n } else {\n return undefined;\n }\n});\n\nconst applyFilters = () => {\n filterModalOpen.value = false;\n multiValueFiltersValues.value = { ...multiValueFiltersModalValues.value };\n emitFiltersUpdated();\n};\n\nconst resetFilters = () => {\n multiValueFiltersValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n filterDateFrom.value = 0;\n multiValueFiltersModalValues.value = {\n avatar: '',\n time: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n };\n emitFiltersUpdated();\n};\n\nconst emitFiltersUpdated = () => {\n if (props.filters.managed) {\n emit('filters-updated', {\n freeSearch: props.filters.freeSearch ? search.value : undefined,\n fromDate: props.filters.dateRange ? filterDateFrom.value : undefined,\n multiSelect: multiValueFiltersValues.value,\n });\n }\n};\n\nconst emit = defineEmits<{\n (event: 'destructive:click', selectedItems: MobileTableRow[]): void;\n (event: 'bulk:click', selectedItems: MobileTableRow[]): void;\n (event: 'item:click', item: MobileTableRow): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', selectedItems: MobileTableRow[]): void;\n (event: 'filters-updated', filters: MobileTableFiltersStatus): void;\n}>();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeItemDetails,\n});\n</script>\n\n<template>\n <div class=\"bg-neutral-surface flex flex-col px-4 pt-2 h-full min-w-80 overflow-auto\">\n <div v-if=\"!props.selection?.enabled\" class=\"flex flex-row items-center gap-4 pb-2\">\n <div class=\"flex-grow\">\n <ElInputText\n v-if=\"props.filters.freeSearch\"\n v-model=\"search\"\n :placeholder=\"props.filters.freeSearch.placeholder ?? 'Cerca'\"\n :leading-icon=\"{ name: 'MagnifyingGlassIcon' }\"\n />\n </div>\n <ElIconButton\n v-if=\"showFiltersButton\"\n :badge=\"hasFiltersApplied\"\n :badge-color=\"props.color\"\n :icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n :class=\"\n props.color === 'primary'\n ? 'text-primary hover:text-primary-hover hover:bg-primary-light-hover active:bg-primary-light-active'\n : 'text-secondary hover:text-secondary-hover hover:bg-secondary-light-hover active:bg-secondary-light-active'\n \"\n @click=\"openFiltersModal\"\n />\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"py-3 px-4 border-b border-b-neutral-surface grid grid-cols-3\">\n <div class=\"flex flex-row justify-start items-center\">\n <ElButton\n error\n variant=\"tertiary\"\n type=\"button\"\n :label=\"`Elimina (${selectedItems.length})`\"\n @click=\"$emit('destructive:click', getSelectedRows())\"\n />\n </div>\n <div class=\"flex flex-row justify-center items-center\">\n <span class=\"text-neutral-darker font-normal text-sm\">\n <template v-if=\"props.selection.selectedLabel\">\n {{ props.selection.selectedLabel(selectedItems.length) }}\n </template>\n <template v-else-if=\"props.selection.selectionMode !== 'single'\">{{ selectedItems.length }} Selezionati</template>\n </span>\n </div>\n </div>\n <slot />\n\n <CustomTransition name=\"fade\">\n <div class=\"relative\">\n <ElSpinner\n v-if=\"props.loading\"\n label=\"Caricamento dati...\"\n class=\"p-4 absolute bg-neutral-surface w-full\"\n :extra-loading-msg-after-seconds=\"3\"\n />\n </div>\n </CustomTransition>\n\n <div v-if=\"filtersAreApplied && noItemsCountLabel !== true && filteredData.length !== 0\" class=\"pt-3 px-4\">\n <span class=\"font-semibold text-neutral-darker\">{{\n props.itemsCountLabel ? props.itemsCountLabel(filteredData.length) : `${filteredData.length} risultati per la tua ricerca`\n }}</span>\n </div>\n\n <ul v-if=\"filteredData.length > 0\" class=\"m-0 flex flex-col flex-grow overflow-y-auto h-full\">\n <ElListItem\n v-for=\"item in filteredData\"\n v-bind=\"item\"\n :key=\"item.id\"\n :color=\"props.color\"\n :model-value=\"props.selection?.enabled ? selectedItems.includes(getItemIndex(item)) : undefined\"\n @update:model-value=\"v => (v ? selectRow(getItemIndex(item)) : deselectRow(getItemIndex(item)))\"\n @click=\"\n () => {\n $emit('item:click', item);\n if (!props.selection?.enabled && !props.preventDefaultItemClick) {\n showItemDetails(item);\n }\n }\n \"\n />\n <slot name=\"after-list\" />\n </ul>\n\n <div v-else-if=\"!props.loading && filteredData.length === 0\" class=\"flex flex-grow flex-col justify-start items-center pt-8 px-8 gap-3\">\n <ElIcon\n name=\"MagnifyingGlassIcon\"\n class=\"h-8 w-8\"\n :class=\"props.color === 'primary' ? 'text-primary-active' : 'text-secondary-active'\"\n />\n <div class=\"flex flex-col gap-1 text-center\">\n <span class=\"text-lg font-semibold text-neutral-darker\">Nessun risultato</span>\n <p class=\"text-neutral-lighter text-sm\">Non abbiamo trovato risultati per questa ricerca. Prova con altre parole chiave.</p>\n </div>\n </div>\n\n <div v-if=\"props.selection?.enabled\" class=\"border-t border-t-neutral-surface flex flex-row justify-between py-5 px-4\">\n <ElButton size=\"l\" variant=\"tertiary\" label=\"Annulla\" @click=\"$emit('selection:exit')\" />\n <ElButton\n v-if=\"props.selection?.bulkActionButton\"\n :variant=\"props.color\"\n :label=\"props.selection.bulkActionButton.label(selectedItems.length)\"\n :disabled=\"selectedItems.length === 0\"\n size=\"l\"\n @click=\"\n $emit(\n 'bulk:click',\n selectedItems.map(index => props.data[index]),\n )\n \"\n />\n </div>\n </div>\n\n <ElModal\n size=\"xs\"\n :is-open=\"selectedItemToShow !== null\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Dettaglio\"\n :color=\"props.color\"\n :primary-action=\"detailsPrimaryAction\"\n :secondary-action=\"detailsSecondaryAction\"\n :tertiary-action=\"detailsTertiaryAction\"\n @closed=\"closeItemDetails\"\n >\n <ul v-if=\"selectedItemToShow\" class=\"m-0 flex flex-col gap-5\">\n <li v-for=\"(item, i) in selectedItemToShow.details\" :key=\"i\" class=\"flex flex-col gap-1\">\n <span class=\"text-neutral-lighter\">{{ item.label }}</span>\n <span v-if=\"item.value.type === 'default'\">{{ item.value.text }}</span>\n <div v-else-if=\"item.value.type === 'tag'\">\n <ElTag :text=\"item.value.text\" :color=\"item.value.color\" />\n </div>\n <div v-else-if=\"item.value.type === 'avatar'\">\n <ElAvatar :label=\"item.value.label\" :picture=\"item.value.picture\" size=\"sm\" />\n </div>\n </li>\n </ul>\n </ElModal>\n\n <ElModal\n v-model:is-open=\"filterModalOpen\"\n size=\"xs\"\n :header-icon=\"{ name: 'AdjustmentsVerticalIcon' }\"\n title=\"Filtri\"\n :color=\"props.color\"\n :primary-action=\"{\n label: 'Applica filtri',\n onClick: applyFilters,\n }\"\n :secondary-action=\"props.filters.resetButton ? { label: 'Reset', onClick: resetFilters } : undefined\"\n :tertiary-action=\"{\n label: 'Chiudi',\n onClick: () => {\n filterModalOpen = false;\n },\n }\"\n >\n <div class=\"flex flex-col gap-6\">\n <ElInputSelect\n v-for=\"(filter, key) in enabledSelectFilters\"\n :key=\"key\"\n v-model=\"multiValueFiltersModalValues[key as keyof typeof multiValueFiltersModalValues]\"\n :options=\"multiValueAvailabeOptions[key as keyof typeof multiValueAvailabeOptions]\"\n :label=\"filter.label\"\n />\n <ElInputDate\n v-if=\"props.filters.dateRange?.enabled\"\n v-model=\"filterDateFrom\"\n :label=\"props.filters.dateRange.label\"\n :placeholder=\"props.filters.dateRange.placeholder\"\n hidden-error-message\n />\n </div>\n </ElModal>\n</template>\n"],"names":["props","__props","search","ref","selectedItems","selectedItemToShow","filterModalOpen","filterDateFrom","managedSearchDebounceTimeout","watch","newValue","oldValue","emitFiltersUpdated","filtersAreApplied","computed","multiValueFiltersValues","filter","getSelectedRows","index","matchesSearch","value","searchText","_a","part","_b","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k","_n","_m","multiValueFiltersModalValues","makeArrUnique","arr","isDefined","multiValueAvailabeOptions","item","tag","filteredData","data","searchParams","b","result","numA","numB","enabledSelectFilters","_","showFiltersButton","hasFiltersApplied","selectRows","rowsIds","indexes","id","getItemIndex","selectRow","rowIndex","emit","deselectRow","idx","i","unselectAllRows","getDataRows","openFiltersModal","showItemDetails","closeItemDetails","detailsPrimaryAction","detailsSecondaryAction","detailsTertiaryAction","applyFilters","resetFilters","__emit","__expose"],"mappings":"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"}

package/dist/src/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 :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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"}
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, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> \| null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\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/src/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 :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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"}
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, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n sortByCol: -1,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> \| null>(null);\n\nonMounted(async () => {\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: 0,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'firstLoad',\n });\n currentPageDataRows.value = newData.data;\n totalRowsCount.value = newData.totalRows;\n loading.value = false;\n});\n\nfunction usePagination() {\n const totalRowsCount = ref(0);\n const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n const newPageSelected = async (newPage: number) => {\n loading.value = true;\n currentPageDataRows.value = (\n await props.dataController({\n paginationStatus: {\n currentPage: newPage,\n },\n sortStatus: currentSortStatus.value,\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n ).data;\n loading.value = false;\n };\n\n return {\n newPageSelected,\n totalRowsCount,\n currentPage,\n goToFirstPage,\n };\n}\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\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/package.json CHANGED Viewed

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

package/dist/node_modules/swiper/modules/pagination.css DELETED Viewed

@@ -1 +0,0 @@

- .swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}

package/dist/node_modules/swiper/swiper.css DELETED Viewed

@@ -1 +0,0 @@

- @font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ 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);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}