@davincihealthcare/elty-design-system-vue 1.72.0 → 1.72.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ElAccordion.vue.cjs2.js.map +1 -1
- package/dist/ElAccordion.vue.esm2.js.map +1 -1
- package/dist/ElActionButton.vue.cjs2.js +1 -1
- package/dist/ElActionButton.vue.cjs2.js.map +1 -1
- package/dist/ElActionButton.vue.esm2.js +1 -1
- package/dist/ElActionButton.vue.esm2.js.map +1 -1
- package/dist/ElAvatar.vue.cjs2.js.map +1 -1
- package/dist/ElAvatar.vue.esm2.js.map +1 -1
- package/dist/ElBadge.vue.cjs2.js.map +1 -1
- package/dist/ElBadge.vue.esm2.js.map +1 -1
- package/dist/ElBubbleChat.vue.cjs2.js +1 -1
- package/dist/ElBubbleChat.vue.cjs2.js.map +1 -1
- package/dist/ElBubbleChat.vue.esm2.js +1 -1
- package/dist/ElBubbleChat.vue.esm2.js.map +1 -1
- package/dist/ElButton.vue.cjs2.js.map +1 -1
- package/dist/ElButton.vue.esm2.js.map +1 -1
- package/dist/ElCalendarCard.vue.cjs2.js.map +1 -1
- package/dist/ElCalendarCard.vue.esm2.js.map +1 -1
- package/dist/ElCalendarCell.vue.cjs2.js +1 -1
- package/dist/ElCalendarCell.vue.cjs2.js.map +1 -1
- package/dist/ElCalendarCell.vue.d.ts +5 -0
- package/dist/ElCalendarCell.vue.esm2.js +1 -1
- package/dist/ElCalendarCell.vue.esm2.js.map +1 -1
- package/dist/ElCarousel.vue.cjs2.js +1 -1
- package/dist/ElCarousel.vue.cjs2.js.map +1 -1
- package/dist/ElCarousel.vue.esm2.js +1 -1
- package/dist/ElCarousel.vue.esm2.js.map +1 -1
- package/dist/ElClipToAnchor.vue.cjs2.js +1 -1
- package/dist/ElClipToAnchor.vue.cjs2.js.map +1 -1
- package/dist/ElClipToAnchor.vue.esm2.js +1 -1
- package/dist/ElClipToAnchor.vue.esm2.js.map +1 -1
- package/dist/ElContainerTemplate.vue.cjs2.js +1 -1
- package/dist/ElContainerTemplate.vue.cjs2.js.map +1 -1
- package/dist/ElContainerTemplate.vue.esm2.js +1 -1
- package/dist/ElContainerTemplate.vue.esm2.js.map +1 -1
- package/dist/ElDivider.vue.cjs2.js.map +1 -1
- package/dist/ElDivider.vue.esm2.js.map +1 -1
- package/dist/ElDrawer.vue.cjs2.js.map +1 -1
- package/dist/ElDrawer.vue.esm2.js.map +1 -1
- package/dist/ElDropdown.vue.cjs2.js +1 -1
- package/dist/ElDropdown.vue.cjs2.js.map +1 -1
- package/dist/ElDropdown.vue.esm2.js +1 -1
- package/dist/ElDropdown.vue.esm2.js.map +1 -1
- package/dist/ElFile.vue.cjs2.js.map +1 -1
- package/dist/ElFile.vue.esm2.js.map +1 -1
- package/dist/ElIcon.vue.cjs2.js +1 -1
- package/dist/ElIcon.vue.cjs2.js.map +1 -1
- package/dist/ElIcon.vue.esm2.js +1 -1
- package/dist/ElIcon.vue.esm2.js.map +1 -1
- package/dist/ElIconButton.vue.cjs2.js +1 -1
- package/dist/ElIconButton.vue.cjs2.js.map +1 -1
- package/dist/ElIconButton.vue.d.ts +4 -0
- package/dist/ElIconButton.vue.esm2.js +1 -1
- package/dist/ElIconButton.vue.esm2.js.map +1 -1
- package/dist/ElInlineBanner.vue.cjs2.js.map +1 -1
- package/dist/ElInlineBanner.vue.esm2.js.map +1 -1
- package/dist/ElInputChat.vue.cjs2.js.map +1 -1
- package/dist/ElInputChat.vue.esm2.js.map +1 -1
- package/dist/ElListItem.vue.cjs2.js.map +1 -1
- package/dist/ElListItem.vue.esm2.js.map +1 -1
- package/dist/ElLogo.vue.cjs2.js.map +1 -1
- package/dist/ElLogo.vue.esm2.js.map +1 -1
- package/dist/ElModal.vue.cjs2.js +1 -1
- package/dist/ElModal.vue.cjs2.js.map +1 -1
- package/dist/ElModal.vue.esm2.js +1 -1
- package/dist/ElModal.vue.esm2.js.map +1 -1
- package/dist/ElSortingHeader.vue.cjs2.js.map +1 -1
- package/dist/ElSortingHeader.vue.esm2.js.map +1 -1
- package/dist/ElSpinner.vue.cjs2.js.map +1 -1
- package/dist/ElSpinner.vue.esm2.js.map +1 -1
- package/dist/ElTab.vue.cjs2.js.map +1 -1
- package/dist/ElTab.vue.esm2.js.map +1 -1
- package/dist/ElTabGroup.vue.cjs2.js.map +1 -1
- package/dist/ElTabGroup.vue.esm2.js.map +1 -1
- package/dist/ElTabs.vue.cjs2.js.map +1 -1
- package/dist/ElTabs.vue.esm2.js.map +1 -1
- package/dist/ElTag.vue.cjs2.js.map +1 -1
- package/dist/ElTag.vue.esm2.js.map +1 -1
- package/dist/ElTextCell.vue.cjs2.js.map +1 -1
- package/dist/ElTextCell.vue.esm2.js.map +1 -1
- package/dist/ElToast.vue.cjs2.js +1 -1
- package/dist/ElToast.vue.cjs2.js.map +1 -1
- package/dist/ElToast.vue.esm2.js +1 -1
- package/dist/ElToast.vue.esm2.js.map +1 -1
- package/dist/ElTooltip.vue.cjs2.js.map +1 -1
- package/dist/ElTooltip.vue.esm2.js.map +1 -1
- package/dist/ElVerticalTab.vue.cjs2.js.map +1 -1
- package/dist/ElVerticalTab.vue.esm2.js.map +1 -1
- package/dist/_CustomTransition.vue.cjs2.js.map +1 -1
- package/dist/_CustomTransition.vue.esm2.js.map +1 -1
- package/dist/assets/logo/davinci-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/davinci-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/davinci-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/davinci-white.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-two-tone.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-two-tone.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-white.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-two-tone.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-two-tone.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-white.svg.esm.js.map +1 -1
- package/dist/composable/mobileComposable.cjs.js +1 -1
- package/dist/composable/mobileComposable.cjs.js.map +1 -1
- package/dist/composable/mobileComposable.esm.js +1 -1
- package/dist/composable/mobileComposable.esm.js.map +1 -1
- package/dist/forms/ElInputCheckbox.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputCheckbox.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputDate.vue.cjs2.js +1 -1
- package/dist/forms/ElInputDate.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputDate.vue.esm2.js +1 -1
- package/dist/forms/ElInputDate.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputFile.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputFile.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputMeasureUnit.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputMeasureUnit.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputNumber.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputNumber.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputPhone.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputPhone.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRadioButton.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRadioButton.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.cjs2.js +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.esm2.js +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRichText/translations/it.cjs.js +1 -1
- package/dist/forms/ElInputRichText/translations/it.cjs.js.map +1 -1
- package/dist/forms/ElInputRichText/translations/it.esm.js +1 -1
- package/dist/forms/ElInputRichText/translations/it.esm.js.map +1 -1
- package/dist/forms/ElInputRichText.vue.cjs2.js +1 -1
- package/dist/forms/ElInputRichText.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRichText.vue.esm2.js +2 -2
- package/dist/forms/ElInputRichText.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSearch.vue.cjs2.js +1 -1
- package/dist/forms/ElInputSearch.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSearch.vue.esm2.js +1 -1
- package/dist/forms/ElInputSearch.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSelect.vue.cjs2.js +1 -1
- package/dist/forms/ElInputSelect.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSelect.vue.esm2.js +1 -1
- package/dist/forms/ElInputSelect.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSwitch.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSwitch.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputText.vue.cjs2.js +1 -1
- package/dist/forms/ElInputText.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputText.vue.esm2.js +1 -1
- package/dist/forms/ElInputText.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputTextarea.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputTextarea.vue.esm2.js.map +1 -1
- package/dist/forms/input.cjs.js.map +1 -1
- package/dist/forms/input.esm.js.map +1 -1
- package/dist/forms/unicodeCharsRule.cjs.js +1 -1
- package/dist/forms/unicodeCharsRule.cjs.js.map +1 -1
- package/dist/forms/unicodeCharsRule.esm.js +1 -1
- package/dist/forms/unicodeCharsRule.esm.js.map +1 -1
- package/dist/forms/utils.cjs.js +1 -1
- package/dist/forms/utils.cjs.js.map +1 -1
- package/dist/forms/utils.esm.js +1 -1
- package/dist/forms/utils.esm.js.map +1 -1
- package/dist/forms/validation-rules.cjs.js +1 -1
- package/dist/forms/validation-rules.cjs.js.map +1 -1
- package/dist/forms/validation-rules.esm.js +1 -1
- package/dist/forms/validation-rules.esm.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/polyfills.cjs.js.map +1 -1
- package/dist/polyfills.esm.js.map +1 -1
- package/dist/preset.cjs.js +1 -1
- package/dist/preset.esm.js +1 -1
- package/dist/table/ElMobileTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElMobileTable.vue.esm2.js.map +1 -1
- package/dist/table/ElResponsiveTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElResponsiveTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideMobileTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideMobileTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideResponsiveTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideResponsiveTable.vue.d.ts +2 -0
- package/dist/table/ElServerSideResponsiveTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideTable.vue.cjs2.js +1 -1
- package/dist/table/ElServerSideTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideTable.vue.esm2.js +1 -1
- package/dist/table/ElServerSideTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideTablePagination.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideTablePagination.vue.esm2.js.map +1 -1
- package/dist/table/ElTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElTable.vue.esm2.js.map +1 -1
- package/dist/table/ElTableCell.vue.cjs2.js.map +1 -1
- package/dist/table/ElTableCell.vue.esm2.js.map +1 -1
- package/dist/table/ElTablePagination.vue.cjs2.js.map +1 -1
- package/dist/table/ElTablePagination.vue.esm2.js.map +1 -1
- package/dist/tailwind.plugin.cjs.js +1 -1
- package/dist/tailwind.plugin.cjs.js.map +1 -1
- package/dist/tailwind.plugin.esm.js +1 -1
- package/dist/tailwind.plugin.esm.js.map +1 -1
- package/dist/types.cjs.js.map +1 -1
- package/dist/types.esm.js.map +1 -1
- package/dist/utils.cjs.js.map +1 -1
- package/dist/utils.esm.js.map +1 -1
- package/dist/vue.plugin.cjs.js.map +1 -1
- package/dist/vue.plugin.esm.js.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElResponsiveTable.vue.esm2.js","sources":["../../../src/table/ElResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { DataRow } from '@/table/commonTypes';\nimport { computed, ref, onMounted, onUnmounted } from 'vue';\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport ElTable from './ElTable.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport { ElIconProps } from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ActionCell, DefaultCell, TagCell } from './ElTableCell.vue';\nimport {\n ElTagColor,\n TableColumnFilterDateRange,\n TableColumnFilterFreeSearch,\n TableColumnFilterMultiValue,\n TableColumnFilterResetButton,\n} from '..';\n\nexport type ResponsiveDataCell = ResponsiveDefaultDataCell | ResponsiveTagDataCell | ResponsiveActionDataCell;\n\nexport type ResponsiveDefaultDataCell = Omit<DefaultCell, 'mainIcon' | 'subIcon' | 'longText' | 'truncateSubText'> & {\n desktopBehaviour?: Pick<DefaultCell, 'mainIcon' | 'subIcon' | 'longText' | 'truncateSubText'>;\n mobileBehaviour?: {\n tertiaryText?: string;\n amountText?: string;\n timeText?: string;\n };\n};\n\nexport type ResponsiveTagDataCell = Omit<TagCell, 'subText' | 'truncateSubText' | 'tag'> & {\n type: 'tag';\n // @deprecated use desktopBehaviour.tag.text instead\n text?: string;\n // @deprecated use desktopBehaviour.tag.color instead\n color?: ElTagColor;\n desktopBehaviour?: Pick<TagCell, 'subText' | 'truncateSubText' | 'tag'>;\n};\n\nexport type ResponsiveActionDataCell = ActionCell & {\n type: 'action';\n mobileBehaviour?: {\n // index of the button to use as primary action\n primary: InstanceType<typeof ElButton>['$props'];\n // index of the button to use as secondary action\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n};\n\nexport type ResponsiveDataRow<T = any> = {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: T;\n cells: ResponsiveDataCell[];\n mobileBehaviour?: {\n trailingIcon?: ElIconProps;\n };\n};\n\n// If filter of type 'MULTI_VALUE' is used and mobileBehaviour.position is a list\n// Then the first will be used for the first mapping unless specified otherwise\n// In filter.mobileBehaviour.position\nexport type ResponsiveTableColumn = {\n title: string;\n filter?: ResponiveTableColumnFilter;\n desktopBehaviour?: {\n alignRight?: boolean;\n noSort?: boolean;\n };\n mobileBehaviour?: {\n position:\n | 'mainText'\n | 'secondaryRow'\n | 'tertiaryRow'\n | 'amount'\n | 'time'\n | 'tags'\n | 'avatar'\n | (\n | {\n take: keyof Pick<ResponsiveDefaultDataCell, 'mainText' | 'subText'>;\n to: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'time';\n withLabel: string;\n }\n | {\n withLabel: string;\n to: 'avatar';\n }\n )[];\n };\n};\n\nexport type ResponiveTableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | (TableColumnFilterMultiValue & {\n mobileBehaviour?: {\n /**\n * Used only if filter type === 'MULTI_VALUE' and column.mobileBehaviour.position is an array\n */\n position?: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'time' | 'tags' | 'avatar';\n };\n })\n | TableColumnFilterResetButton;\n\nexport interface ElResponsiveTableProps {\n columns: ResponsiveTableColumn[];\n data: ResponsiveDataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n noFilters?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n color: 'primary' | 'secondary';\n loading?: boolean;\n sortBy?: {\n column?: number;\n order?: 'asc' | 'desc';\n };\n desktopBehaviour?: {\n noFooter?: boolean;\n initialRows?: number;\n };\n mobileBehaviour?: Pick<ElMobileTableProps, 'preventDefaultItemClick'> & {\n selection?: Pick<\n NonNullable<ElMobileTableProps['selection']>,\n 'destructiveAction' | 'bulkActionButton' | 'selectedLabel' | 'cancelText'\n >;\n };\n}\n</script>\n\n<script lang=\"ts\" setup>\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElResponsiveTableProps>();\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\nconst desktopTable = ref<InstanceType<typeof ElTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst rowsById = computed(() =>\n props.data.reduce(\n (acc, row) => {\n acc[row.id] = row;\n return acc;\n },\n {} as Record<string, ResponsiveDataRow>,\n ),\n);\n\nconst filteredData = computed(() => {\n return isMobile.value ? mobileTable.value?.filteredData : desktopTable.value?.filteredData;\n});\n\nconst selectRows = async (rowsIds: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(rowsIds);\n } else {\n desktopTable.value?.selectRows(rowsIds);\n }\n};\n\nconst unselectAllRows = () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n};\n\nconst responsiveRowToDesktopRow = (item: ResponsiveDataRow): DataRow => {\n return {\n id: item.id,\n rowNotSelectable: item.rowNotSelectable,\n relatedObject: item.relatedObject,\n cells: item.cells.map(cell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n } satisfies DefaultCell;\n case 'tag':\n return {\n type: 'tag',\n tag: { text: cell.text ?? '', color: cell.color, ...cell.desktopBehaviour?.tag },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n } satisfies TagCell;\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n } satisfies ActionCell;\n }\n }),\n } satisfies DataRow;\n};\n\nconst getDataRows = () => {\n if (!isMobile.value) return desktopTable.value?.getDataRows().map(row => rowsById.value[row.id]) || [];\n return mobileTable.value?.getDataRows().map(row => rowsById.value[row.id]) || [];\n};\n\nconst getSelectedRows = () => {\n if (!isMobile.value) return desktopTable.value?.getSelectedRows().map(row => rowsById.value[row.id]) || [];\n return mobileTable.value?.getSelectedRows().map(row => rowsById.value[row.id]) || [];\n};\n\nconst closeMobileTableItemDetails = () => {\n mobileTable.value?.closeItemDetails();\n};\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeMobileTableItemDetails,\n});\n\nconst mobileItems = computed<MobileTableRow[]>(() => {\n return props.data.map(item => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of item.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: {\n type: 'tag',\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n const text = cell.desktopBehaviour?.tag.text ?? cell.text ?? '';\n tags.push({\n key: text,\n text: text,\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: item.id,\n rowNotSelectable: item.rowNotSelectable,\n relatedObject: item.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: item.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n });\n});\n\nconst desktopItems = computed<DataRow[]>(() => {\n return props.data.map(responsiveRowToDesktopRow);\n});\n\nconst mobileFilters = computed<MobileTableFilter>(() => {\n const mobileFilter: MobileTableFilter = {};\n if (props.noFilters) return mobileFilter;\n props.columns\n .filter((column): column is ResponsiveTableColumn & Required<Pick<ResponsiveTableColumn, 'filter'>> => !!column.filter)\n .forEach(column => {\n switch (column.filter.type) {\n case 'FREE_SEARCH':\n if (!column.mobileBehaviour?.position) return;\n if (!mobileFilter.freeSearch) mobileFilter.freeSearch = { filterOn: [] };\n if (column.filter.initialValue) {\n mobileFilter.freeSearch.initialValue = column.filter.initialValue;\n mobileFilter.freeSearch.placeholder = column.filter.placeholder;\n }\n mobileFilter.freeSearch?.filterOn.push(\n ...(Array.isArray(column.mobileBehaviour.position)\n ? column.mobileBehaviour.position.map(position => position.to)\n : [column.mobileBehaviour.position]),\n );\n break;\n case 'DATE_RANGE':\n if (!mobileFilter.dateRange)\n mobileFilter.dateRange = {\n label: column.title,\n enabled: true,\n initialValue: column.filter.initialValue,\n placeholder: column.filter.placeholder,\n };\n break;\n case 'MULTI_VALUE':\n if (!column.mobileBehaviour?.position) return;\n if (!mobileFilter.multiValue) mobileFilter.multiValue = {};\n let position;\n if (Array.isArray(column.mobileBehaviour.position)) {\n position = column.filter.mobileBehaviour?.position ?? column.mobileBehaviour.position.at(0)?.to;\n } else {\n position = column.mobileBehaviour.position;\n }\n if (!position) return;\n mobileFilter.multiValue[position] = {\n enabled: true,\n initialValue: column.filter.initialValue,\n selectOptions: column.filter.selectOptions,\n label: column.title,\n };\n break;\n case 'RESET_FILTERS_BUTTON':\n mobileFilter.resetButton = true;\n break;\n }\n });\n return mobileFilter;\n});\n\nconst mobileSelection = computed<ElMobileTableProps['selection']>(() => {\n if (props.mobileBehaviour?.selection === undefined) return undefined;\n return {\n enabled: props.rowsSelectionMode !== undefined && props.rowsSelectionDisabled !== true,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection.bulkActionButton,\n selectedLabel: props.mobileBehaviour?.selection.selectedLabel,\n cancelText: props.mobileBehaviour?.selection.cancelText,\n } satisfies ElMobileTableProps['selection'];\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => props.data.findIndex(row => row.id === id));\n return indexes.map(index => props.data[index]);\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => props.data.findIndex(row => row.id === id));\n return indexes.map(index => props.data[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = props.data.findIndex(row => row.id === mobileRow.id);\n return props.data[index];\n};\n\nconst mobileSortBy = computed<ElMobileTableProps['sortBy'] | undefined>(() => {\n if (!props.sortBy || !props.sortBy.column) return undefined;\n const column = props.columns[props.sortBy.column];\n if (!column.mobileBehaviour?.position || Array.isArray(column.mobileBehaviour.position)) return undefined;\n\n return {\n on: column.mobileBehaviour?.position,\n order: props.sortBy.order ?? 'desc',\n } satisfies ElMobileTableProps['sortBy'];\n});\n</script>\n\n<template>\n <ElTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :data=\"desktopItems\"\n :columns=\"props.columns\"\n :table-id=\"props.tableId\"\n :sort-by-col=\"props.sortBy?.column\"\n :sort-by-col-asc=\"props.sortBy?.order === 'asc'\"\n :no-filters=\"props.noFilters\"\n :no-footer=\"props.desktopBehaviour?.noFooter\"\n :rows-selection-mode=\"props.rowsSelectionMode\"\n :rows-selection-disabled=\"props.rowsSelectionDisabled\"\n :initial-rows=\"props.desktopBehaviour?.initialRows\"\n :loading=\"props?.loading\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElTableMobile\n v-else\n ref=\"mobileTable\"\n :data=\"mobileItems\"\n :sort-by=\"mobileSortBy\"\n :color=\"props.color\"\n :filters=\"mobileFilters\"\n :selection=\"mobileSelection\"\n :loading=\"props?.loading\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @selection:exit=\"() => $emit('mobile:selection:exit')\"\n @bulk:click=\"data => $emit('mobile:bulk:click', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => $emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElTableMobile>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","onMatchMediaChange","event","onMounted","onUnmounted","desktopTable","mobileTable","rowsById","computed","acc","row","filteredData","_a","_b","selectRows","rowsIds","unselectAllRows","responsiveRowToDesktopRow","item","cell","_c","_d","_e","_f","_g","__expose","mobileItems","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","text","_k","_l","_m","_n","actions","_o","desktopItems","mobileFilters","mobileFilter","position","mobileSelection","desktopRowsToResponsiveRows","desktopRows","id","index","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","mobileSortBy"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElResponsiveTable.vue.esm2.js","sources":["../../src/table/ElResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { DataRow } from '@/table/commonTypes';\nimport { computed, ref, onMounted, onUnmounted } from 'vue';\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport ElTable from './ElTable.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport { ElIconProps } from '@/ElIcon.vue';\nimport ElButton from '@/ElButton.vue';\nimport { ActionCell, DefaultCell, TagCell } from './ElTableCell.vue';\nimport {\n ElTagColor,\n TableColumnFilterDateRange,\n TableColumnFilterFreeSearch,\n TableColumnFilterMultiValue,\n TableColumnFilterResetButton,\n} from '..';\n\nexport type ResponsiveDataCell = ResponsiveDefaultDataCell | ResponsiveTagDataCell | ResponsiveActionDataCell;\n\nexport type ResponsiveDefaultDataCell = Omit<DefaultCell, 'mainIcon' | 'subIcon' | 'longText' | 'truncateSubText'> & {\n desktopBehaviour?: Pick<DefaultCell, 'mainIcon' | 'subIcon' | 'longText' | 'truncateSubText'>;\n mobileBehaviour?: {\n tertiaryText?: string;\n amountText?: string;\n timeText?: string;\n };\n};\n\nexport type ResponsiveTagDataCell = Omit<TagCell, 'subText' | 'truncateSubText' | 'tag'> & {\n type: 'tag';\n // @deprecated use desktopBehaviour.tag.text instead\n text?: string;\n // @deprecated use desktopBehaviour.tag.color instead\n color?: ElTagColor;\n desktopBehaviour?: Pick<TagCell, 'subText' | 'truncateSubText' | 'tag'>;\n};\n\nexport type ResponsiveActionDataCell = ActionCell & {\n type: 'action';\n mobileBehaviour?: {\n // index of the button to use as primary action\n primary: InstanceType<typeof ElButton>['$props'];\n // index of the button to use as secondary action\n secondary?: InstanceType<typeof ElButton>['$props'];\n };\n};\n\nexport type ResponsiveDataRow<T = any> = {\n id: string;\n rowNotSelectable?: boolean;\n relatedObject?: T;\n cells: ResponsiveDataCell[];\n mobileBehaviour?: {\n trailingIcon?: ElIconProps;\n };\n};\n\n// If filter of type 'MULTI_VALUE' is used and mobileBehaviour.position is a list\n// Then the first will be used for the first mapping unless specified otherwise\n// In filter.mobileBehaviour.position\nexport type ResponsiveTableColumn = {\n title: string;\n filter?: ResponiveTableColumnFilter;\n desktopBehaviour?: {\n alignRight?: boolean;\n noSort?: boolean;\n };\n mobileBehaviour?: {\n position:\n | 'mainText'\n | 'secondaryRow'\n | 'tertiaryRow'\n | 'amount'\n | 'time'\n | 'tags'\n | 'avatar'\n | (\n | {\n take: keyof Pick<ResponsiveDefaultDataCell, 'mainText' | 'subText'>;\n to: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'time';\n withLabel: string;\n }\n | {\n withLabel: string;\n to: 'avatar';\n }\n )[];\n };\n};\n\nexport type ResponiveTableColumnFilter =\n | TableColumnFilterFreeSearch\n | TableColumnFilterDateRange\n | (TableColumnFilterMultiValue & {\n mobileBehaviour?: {\n /**\n * Used only if filter type === 'MULTI_VALUE' and column.mobileBehaviour.position is an array\n */\n position?: 'mainText' | 'secondaryRow' | 'tertiaryRow' | 'amount' | 'time' | 'tags' | 'avatar';\n };\n })\n | TableColumnFilterResetButton;\n\nexport interface ElResponsiveTableProps {\n columns: ResponsiveTableColumn[];\n data: ResponsiveDataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n noFilters?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n color: 'primary' | 'secondary';\n loading?: boolean;\n sortBy?: {\n column?: number;\n order?: 'asc' | 'desc';\n };\n desktopBehaviour?: {\n noFooter?: boolean;\n initialRows?: number;\n };\n mobileBehaviour?: Pick<ElMobileTableProps, 'preventDefaultItemClick'> & {\n selection?: Pick<\n NonNullable<ElMobileTableProps['selection']>,\n 'destructiveAction' | 'bulkActionButton' | 'selectedLabel' | 'cancelText'\n >;\n };\n}\n</script>\n\n<script lang=\"ts\" setup>\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElResponsiveTableProps>();\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\nconst desktopTable = ref<InstanceType<typeof ElTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst rowsById = computed(() =>\n props.data.reduce(\n (acc, row) => {\n acc[row.id] = row;\n return acc;\n },\n {} as Record<string, ResponsiveDataRow>,\n ),\n);\n\nconst filteredData = computed(() => {\n return isMobile.value ? mobileTable.value?.filteredData : desktopTable.value?.filteredData;\n});\n\nconst selectRows = async (rowsIds: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(rowsIds);\n } else {\n desktopTable.value?.selectRows(rowsIds);\n }\n};\n\nconst unselectAllRows = () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n};\n\nconst responsiveRowToDesktopRow = (item: ResponsiveDataRow): DataRow => {\n return {\n id: item.id,\n rowNotSelectable: item.rowNotSelectable,\n relatedObject: item.relatedObject,\n cells: item.cells.map(cell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n } satisfies DefaultCell;\n case 'tag':\n return {\n type: 'tag',\n tag: { text: cell.text ?? '', color: cell.color, ...cell.desktopBehaviour?.tag },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n } satisfies TagCell;\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n } satisfies ActionCell;\n }\n }),\n } satisfies DataRow;\n};\n\nconst getDataRows = () => {\n if (!isMobile.value) return desktopTable.value?.getDataRows().map(row => rowsById.value[row.id]) || [];\n return mobileTable.value?.getDataRows().map(row => rowsById.value[row.id]) || [];\n};\n\nconst getSelectedRows = () => {\n if (!isMobile.value) return desktopTable.value?.getSelectedRows().map(row => rowsById.value[row.id]) || [];\n return mobileTable.value?.getSelectedRows().map(row => rowsById.value[row.id]) || [];\n};\n\nconst closeMobileTableItemDetails = () => {\n mobileTable.value?.closeItemDetails();\n};\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n closeMobileTableItemDetails,\n});\n\nconst mobileItems = computed<MobileTableRow[]>(() => {\n return props.data.map(item => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of item.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: {\n type: 'tag',\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n const text = cell.desktopBehaviour?.tag.text ?? cell.text ?? '';\n tags.push({\n key: text,\n text: text,\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: item.id,\n rowNotSelectable: item.rowNotSelectable,\n relatedObject: item.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: item.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n });\n});\n\nconst desktopItems = computed<DataRow[]>(() => {\n return props.data.map(responsiveRowToDesktopRow);\n});\n\nconst mobileFilters = computed<MobileTableFilter>(() => {\n const mobileFilter: MobileTableFilter = {};\n if (props.noFilters) return mobileFilter;\n props.columns\n .filter((column): column is ResponsiveTableColumn & Required<Pick<ResponsiveTableColumn, 'filter'>> => !!column.filter)\n .forEach(column => {\n switch (column.filter.type) {\n case 'FREE_SEARCH':\n if (!column.mobileBehaviour?.position) return;\n if (!mobileFilter.freeSearch) mobileFilter.freeSearch = { filterOn: [] };\n if (column.filter.initialValue) {\n mobileFilter.freeSearch.initialValue = column.filter.initialValue;\n mobileFilter.freeSearch.placeholder = column.filter.placeholder;\n }\n mobileFilter.freeSearch?.filterOn.push(\n ...(Array.isArray(column.mobileBehaviour.position)\n ? column.mobileBehaviour.position.map(position => position.to)\n : [column.mobileBehaviour.position]),\n );\n break;\n case 'DATE_RANGE':\n if (!mobileFilter.dateRange)\n mobileFilter.dateRange = {\n label: column.title,\n enabled: true,\n initialValue: column.filter.initialValue,\n placeholder: column.filter.placeholder,\n };\n break;\n case 'MULTI_VALUE':\n if (!column.mobileBehaviour?.position) return;\n if (!mobileFilter.multiValue) mobileFilter.multiValue = {};\n let position;\n if (Array.isArray(column.mobileBehaviour.position)) {\n position = column.filter.mobileBehaviour?.position ?? column.mobileBehaviour.position.at(0)?.to;\n } else {\n position = column.mobileBehaviour.position;\n }\n if (!position) return;\n mobileFilter.multiValue[position] = {\n enabled: true,\n initialValue: column.filter.initialValue,\n selectOptions: column.filter.selectOptions,\n label: column.title,\n };\n break;\n case 'RESET_FILTERS_BUTTON':\n mobileFilter.resetButton = true;\n break;\n }\n });\n return mobileFilter;\n});\n\nconst mobileSelection = computed<ElMobileTableProps['selection']>(() => {\n if (props.mobileBehaviour?.selection === undefined) return undefined;\n return {\n enabled: props.rowsSelectionMode !== undefined && props.rowsSelectionDisabled !== true,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection.bulkActionButton,\n selectedLabel: props.mobileBehaviour?.selection.selectedLabel,\n cancelText: props.mobileBehaviour?.selection.cancelText,\n } satisfies ElMobileTableProps['selection'];\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => props.data.findIndex(row => row.id === id));\n return indexes.map(index => props.data[index]);\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => props.data.findIndex(row => row.id === id));\n return indexes.map(index => props.data[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = props.data.findIndex(row => row.id === mobileRow.id);\n return props.data[index];\n};\n\nconst mobileSortBy = computed<ElMobileTableProps['sortBy'] | undefined>(() => {\n if (!props.sortBy || !props.sortBy.column) return undefined;\n const column = props.columns[props.sortBy.column];\n if (!column.mobileBehaviour?.position || Array.isArray(column.mobileBehaviour.position)) return undefined;\n\n return {\n on: column.mobileBehaviour?.position,\n order: props.sortBy.order ?? 'desc',\n } satisfies ElMobileTableProps['sortBy'];\n});\n</script>\n\n<template>\n <ElTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :data=\"desktopItems\"\n :columns=\"props.columns\"\n :table-id=\"props.tableId\"\n :sort-by-col=\"props.sortBy?.column\"\n :sort-by-col-asc=\"props.sortBy?.order === 'asc'\"\n :no-filters=\"props.noFilters\"\n :no-footer=\"props.desktopBehaviour?.noFooter\"\n :rows-selection-mode=\"props.rowsSelectionMode\"\n :rows-selection-disabled=\"props.rowsSelectionDisabled\"\n :initial-rows=\"props.desktopBehaviour?.initialRows\"\n :loading=\"props?.loading\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElTableMobile\n v-else\n ref=\"mobileTable\"\n :data=\"mobileItems\"\n :sort-by=\"mobileSortBy\"\n :color=\"props.color\"\n :filters=\"mobileFilters\"\n :selection=\"mobileSelection\"\n :loading=\"props?.loading\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @selection:exit=\"() => $emit('mobile:selection:exit')\"\n @bulk:click=\"data => $emit('mobile:bulk:click', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => $emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElTableMobile>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","onMatchMediaChange","event","onMounted","onUnmounted","desktopTable","mobileTable","rowsById","computed","acc","row","filteredData","_a","_b","selectRows","rowsIds","unselectAllRows","responsiveRowToDesktopRow","item","cell","_c","_d","_e","_f","_g","__expose","mobileItems","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","text","_k","_l","_m","_n","actions","_o","desktopItems","mobileFilters","mobileFilter","position","mobileSelection","desktopRowsToResponsiveRows","desktopRows","id","index","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","mobileSortBy"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideMobileTable.vue.cjs2.js","sources":["
|
|
1
|
+
{"version":3,"file":"ElServerSideMobileTable.vue.cjs2.js","sources":["../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\nconst emits = defineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"mcAmBM,MAAAA,EAAUC,MAAI,EAAK,EACnBC,EAAQC,EACRC,EAAOH,MAAsB,CAAA,CAAE,EAC/BI,EAAcJ,MAAY,CAAC,EAC3BK,EAAkBL,EAAAA,IAAwB,MAAS,EACnDM,EAAeN,EAAAA,IAA8B,CACjD,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,CACD,EACKO,EAAgB,IAAM,CAC1BR,EAAQ,MAAQ,GAChBE,EACG,eAAe,CACd,iBAAkB,CAChB,YAAaG,EAAY,MAAQ,CACnC,EACA,aAAcE,EAAa,MAC3B,eAAgB,UAAA,CACjB,EACA,KAAiBE,GAAA,CAChBL,EAAK,MAAM,KAAK,GAAGK,EAAS,IAAI,EAChCH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAA,SAAS,IACPA,WAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,EAEHK,EAAY,OAAS,CAAA,CACtB,CAAA,EAECM,EAAkBC,IACtBZ,EAAQ,MAAQ,GAChBK,EAAY,MAAQ,EACpBD,EAAK,MAAQ,GACNF,EACJ,eAAe,CACd,iBAAkB,CAChB,YAAa,CACf,EACA,aAAcK,EAAa,MAC3B,eAAAK,CAAA,CACD,EACA,KAAiBH,GAAA,CAChBL,EAAK,MAAQK,EAAS,KACtBH,EAAgB,MAAQG,EAAS,SAAA,CAClC,EACA,QAAQ,IAAM,CACbC,EAAA,SAAS,IACPA,WAAS,IAAM,CACbV,EAAQ,MAAQ,EAAA,CACjB,CAAA,CACH,CACD,GAECa,EAAoBC,GAAsC,CAC9DP,EAAa,MAAQO,EACrBH,EAAe,QAAQ,CAAA,EAGzBI,EAAAA,UAAU,IAAM,CACdJ,EAAe,WAAW,CAAA,CAC3B,EAGD,MAAMK,EAAmB,IAAM,CACzBV,EAAgB,OAASF,EAAK,MAAM,OAASE,EAAgB,OACjDE,GAChB,EAEIS,EAAmBhB,EAAAA,MACnBiB,EAAWjB,EAAAA,IAAsC,MAAS,EAChEc,EAAAA,UAAU,IAAM,CACdG,EAAS,MAAQ,IAAI,qBACVC,GAAA,CACHA,EAAM,KAAUC,GAAAA,EAAE,cAAc,GAAK,CAACpB,EAAQ,OAC/BgB,GAErB,EACA,CACE,UAAW,CACb,CAAA,EAEEC,EAAiB,OACVC,EAAA,MAAM,QAAQD,EAAiB,KAAM,CAChD,CACD,EACKI,EAAAA,MAAAJ,EAAkB,CAACK,EAAUC,IAAa,CAC1CA,GAAmBL,EAAA,MAAO,UAAUK,CAAQ,EAC5CD,GACOJ,EAAA,MAAO,QAAQI,CAAQ,CAClC,CACD,EACDE,EAAAA,YAAY,IAAM,CACZN,EAAS,QACXA,EAAS,MAAM,aACfA,EAAS,MAAQ,OACnB,CACD,EAEK,MAAAO,EAAQxB,MAA+C,IAAI,EA6CpD,OAAAyB,EAAA,CACX,WA5CkBC,GAAsB,QAClCC,EAAAH,EAAA,QAAA,MAAAG,EAAO,WAAWD,EAAO,EA4C/B,gBAzCsB,IAAM,OAAA,OAAAC,EAAAH,EAAM,QAAN,YAAAG,EAAa,mBA0CzC,gBAxCsB,IAAA,OAAM,QAAAA,EAAAH,EAAM,QAAN,YAAAG,EAAa,oBAAqB,CAAA,GAyC9D,iBAvCuB,IAAM,OAC7B,OAAArB,EAAa,MAAQ,CACnB,WAAY,GACZ,SAAU,EACV,YAAa,CACX,OAAQ,GACR,SAAU,GACV,aAAc,GACd,YAAa,GACb,OAAQ,GACR,KAAM,GACN,KAAM,EACR,CAAA,GAEFqB,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBACNjB,EAAe,WAAW,CAAA,EAyBjC,sBAvB4B,SAAY,CACxCX,EAAQ,MAAQ,GACV,MAAA6B,EAAU,MAAM3B,EAAM,eAAe,CACzC,iBAAkB,CAChB,YAAaG,EAAY,KAC3B,EACA,aAAcE,EAAa,MAC3B,eAAgB,SAAA,CACjB,EACDH,EAAK,MAAQyB,EAAQ,KACrBvB,EAAgB,MAAQuB,EAAQ,UAChC7B,EAAQ,MAAQ,EAAA,EAahB,iBAVuB,IAAM,QAC7B4B,EAAAH,EAAM,QAAN,MAAAG,EAAa,kBAAiB,CAS9B,CACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideMobileTable.vue.esm2.js","sources":["
|
|
1
|
+
{"version":3,"file":"ElServerSideMobileTable.vue.esm2.js","sources":["../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n filters?: {\n freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n});\nconst fetchNextPage = () => {\n loading.value = true;\n props\n .dataController({\n paginationStatus: {\n currentPage: currentPage.value + 1,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'paginate',\n })\n .then(response => {\n data.value.push(...response.data);\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n currentPage.value += 1;\n });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n loading.value = true;\n currentPage.value = 0;\n data.value = [];\n return props\n .dataController({\n paginationStatus: {\n currentPage: 0,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: triggeredEvent,\n })\n .then(response => {\n data.value = response.data;\n totalItemsCount.value = response.totalRows;\n })\n .finally(() => {\n nextTick(() =>\n nextTick(() => {\n loading.value = false;\n }),\n );\n });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n filterStatus.value = filters;\n fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n fetchNextPage();\n }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n observer.value = new IntersectionObserver(\n entry => {\n if (entry.some(e => e.isIntersecting) && !loading.value) {\n onInfiniteScroll();\n }\n },\n {\n threshold: 1.0,\n },\n );\n if (infiniteScrollEl.value) {\n observer.value.observe(infiniteScrollEl.value!);\n }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n if (oldValue) observer.value!.unobserve(oldValue);\n if (newValue) {\n observer.value!.observe(newValue);\n }\n});\nonUnmounted(() => {\n if (observer.value) {\n observer.value.disconnect();\n observer.value = undefined;\n }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n filterStatus.value = {\n freeSearch: '',\n fromDate: 0,\n multiSelect: {\n avatar: '',\n mainText: '',\n secondaryRow: '',\n tertiaryRow: '',\n amount: '',\n tags: '',\n time: '',\n },\n };\n table.value?.unselectAllRows();\n return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n loading.value = true;\n const newData = await props.dataController({\n paginationStatus: {\n currentPage: currentPage.value,\n },\n filterStatus: filterStatus.value,\n triggeredEvent: 'trigger',\n });\n data.value = newData.data;\n totalItemsCount.value = newData.totalRows;\n loading.value = false;\n};\n\nconst closeItemDetails = () => {\n table.value?.closeItemDetails();\n};\n\ndefineExpose({\n selectRows,\n unselectAllRows,\n getSelectedRows,\n resetAllAndFetch,\n triggerDataController,\n closeItemDetails,\n});\n\nconst emits = defineEmits<{\n (event: 'bulk:click', rows: MobileTableRow[]): void;\n (event: 'destructive:click', rows: MobileTableRow[]): void;\n (event: 'selection:exit'): void;\n (event: 'rows-selected', rows: MobileTableRow[]): void;\n (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n <ElTableMobile\n ref=\"table\"\n :color=\"props.color\"\n :selection=\"props.selection\"\n :data=\"data\"\n :filters=\"{\n ...props.filters,\n freeSearch: props.filters?.freeSearch\n ? {\n placeholder: props.filters.freeSearch.placeholder,\n initialValue: props.filters.freeSearch.initialValue,\n filterOn: [],\n }\n : undefined,\n managed: true,\n }\"\n :loading=\"loading\"\n :prevent-default-item-click=\"props.preventDefaultItemClick\"\n @rows-selected=\"v => $emit('rows-selected', v)\"\n @filters-updated=\"onFiltersUpdated\"\n @bulk:click=\"v => $emit('bulk:click', v)\"\n @selection:exit=\"$emit('selection:exit')\"\n @destructive:click=\"v => $emit('destructive:click', v)\"\n @item:click=\"v => $emit('item:click', v)\"\n >\n <template #default>\n <slot />\n </template>\n <template #after-list>\n <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n </template>\n </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideResponsiveTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, onMounted, onUnmounted, computed } from 'vue';\nimport { ElResponsiveTableProps, ResponsiveTableColumn, ResponsiveDataRow, ResponsiveDataCell } from './ElResponsiveTable.vue';\nimport ElServerSideMobileTable, { ElServerSideMobileTableProps } from './ElServerSideMobileTable.vue';\nimport ElServerSideTable, { DataControls, TableColumn, ServerSideTableProps, FilterStatus, SortStatus } from './ElServerSideTable.vue';\nimport { DataRow } from './commonTypes';\nimport { MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { DataCell } from './ElTableCell.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport ElButton from '@/ElButton.vue';\n\nexport type ResponsiveServerSideTableColumn = Pick<TableColumn, 'title'> & {\n desktopBehaviour?: Pick<TableColumn, 'alignRight' | 'noSort'>;\n filter?: ResponsiveTableColumn['filter'];\n} & Pick<ResponsiveTableColumn, 'mobileBehaviour'>;\n\nexport type ResponsiveDataControls = Pick<DataControls, 'paginationStatus' | 'filterStatus' | 'triggeredEvent'> &\n (\n | {\n tableType: 'desktop';\n sortStatus: SortStatus;\n }\n | {\n tableType: 'mobile';\n mobileFiltersStatus: MobileTableFiltersStatus;\n }\n );\n\nexport type ElServerSideResponsiveTableDataController = (\n args: ResponsiveDataControls,\n) => Promise<{ data: ResponsiveDataRow[]; totalRows: number }>;\n\nexport type ElServerSideResponsiveTableProps = Pick<\n ElResponsiveTableProps,\n 'mobileBehaviour' | 'desktopBehaviour' | 'sortBy' | 'color' | 'rowsSelectionMode' | 'rowsSelectionDisabled'\n> & {\n columns: ResponsiveServerSideTableColumn[];\n dataController: ElServerSideResponsiveTableDataController;\n rowsPerPage?: number;\n};\n\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElServerSideResponsiveTableProps>();\nconst desktopTable = ref<InstanceType<typeof ElServerSideTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElServerSideMobileTable> | null>(null);\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\n\nconst responsiveDataCellToDataCell = (cell: ResponsiveDataCell): DataCell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'tag':\n return {\n type: 'tag',\n tag: {\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.color,\n },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n };\n }\n};\n\nconst responsiveDataRowToDesktopDataRow = (row: ResponsiveDataRow): DataRow => {\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n cells: row.cells.map(responsiveDataCellToDataCell),\n relatedObject: row.relatedObject,\n };\n};\n\nconst responsiveDataRowToMobileDataRow = (row: ResponsiveDataRow): MobileTableRow => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of row.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: { type: 'tag', text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '', color: cell.color },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n tags.push({\n key: cell.text,\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n relatedObject: row.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: row.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n};\n\nconst mobileSelection = computed<ElServerSideMobileTableProps['selection']>(() => {\n if (props.rowsSelectionDisabled || !props.mobileBehaviour?.selection) return undefined;\n return {\n enabled: !props.rowsSelectionDisabled,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection?.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection?.bulkActionButton,\n cancelText: props.mobileBehaviour?.selection?.cancelText,\n selectedLabel: props.mobileBehaviour?.selection?.selectedLabel,\n };\n});\n\nconst fetchedRows = ref<ResponsiveDataRow[]>([]);\n\nconst desktopDataController: ServerSideTableProps['dataController'] = data =>\n props.dataController({ tableType: 'desktop', ...data }).then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToDesktopDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileDataController: ElServerSideMobileTableProps['dataController'] = data =>\n props\n .dataController({\n tableType: 'mobile',\n ...data,\n mobileFiltersStatus: data.filterStatus,\n filterStatus: props.columns\n .map(column => {\n const filter = column.filter;\n if (!filter) return;\n switch (filter.type) {\n case 'FREE_SEARCH':\n return {\n id: filter.id,\n type: 'FREE_SEARCH',\n columnTitle: column.title,\n textSearch: data.filterStatus.freeSearch ?? '',\n } as FilterStatus;\n case 'DATE_RANGE':\n return {\n id: filter.id,\n type: 'DATE_RANGE',\n columnTitle: column.title,\n dateFrom: data.filterStatus.fromDate ?? 0,\n } satisfies FilterStatus;\n case 'MULTI_VALUE':\n const mobilePosition = filter.mobileBehaviour?.position ?? column.mobileBehaviour?.position;\n if (!mobilePosition) return;\n if (Array.isArray(mobilePosition)) {\n console.warn(\n `Cannot map column ${column.title} mobile filter value since multiple mappings are defined, please specify the mobileBehaviour on the column.filter`,\n );\n return;\n }\n return {\n id: filter.id,\n type: 'MULTI_VALUE',\n columnTitle: column.title,\n textSearch: data.filterStatus.multiSelect[mobilePosition] ?? '',\n } satisfies FilterStatus;\n case 'RESET_FILTERS_BUTTON':\n return undefined;\n }\n })\n .filter((v: FilterStatus | undefined): v is FilterStatus => v !== undefined),\n })\n .then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToMobileDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileFilters = computed<ElServerSideMobileTableProps['filters']>(() => {\n const filters: ElServerSideMobileTableProps['filters'] = {};\n props.columns.forEach(column => {\n if (!column.filter) return;\n const mobileBehaviour = column.mobileBehaviour;\n if (!mobileBehaviour) return;\n\n if (column.filter.type === 'FREE_SEARCH') {\n if (!filters.freeSearch) {\n filters.freeSearch = {\n placeholder: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'DATE_RANGE') {\n if (!filters.dateRange) {\n filters.dateRange = {\n enabled: true,\n label: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'RESET_FILTERS_BUTTON') {\n filters.resetButton = true;\n return;\n }\n\n if (column.filter.type === 'MULTI_VALUE') {\n if (!filters.multiValue) {\n filters.multiValue = {};\n }\n if (Array.isArray(mobileBehaviour.position)) {\n const position = column.filter.mobileBehaviour?.position ?? mobileBehaviour.position.at(0)?.to;\n if (!position) return;\n filters.multiValue[position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n } else {\n filters.multiValue[mobileBehaviour.position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n }\n }\n });\n return filters;\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst desktopRowToResponsiveRow = (desktopRow: DataRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === desktopRow.id);\n return fetchedRows.value[index];\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === mobileRow.id);\n return fetchedRows.value[index];\n};\n\ndefineExpose({\n selectRows: (ids: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(ids);\n } else {\n desktopTable.value?.selectRows(ids);\n }\n },\n resetAllAndFetch: () => {\n if (isMobile.value) {\n return mobileTable.value?.resetAllAndFetch();\n } else {\n return desktopTable.value?.resetAllAndFetch();\n }\n },\n unselectAllRows: () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n },\n getDataRows: () => {\n return fetchedRows.value;\n },\n getSelectedRows: () => {\n if (isMobile.value) {\n return (mobileTable.value?.getSelectedRows() ?? []).map(mobileRowToResponsiveRow);\n } else {\n return (desktopTable.value?.getSelectedRows() ?? []).map(desktopRowToResponsiveRow);\n }\n },\n triggerDataController: async () => {\n if (isMobile.value) {\n return mobileTable.value?.triggerDataController();\n } else {\n return desktopTable.value?.triggerDataController();\n }\n },\n closeMobileTableItemDetails: () => {\n mobileTable.value?.closeItemDetails();\n },\n});\n</script>\n<template>\n <ElServerSideTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :columns=\"props.columns.map(column => ({ ...column, ...column.desktopBehaviour }))\"\n :data-controller=\"desktopDataController\"\n :rows-per-page=\"props.rowsPerPage\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElServerSideMobileTable\n v-else\n ref=\"mobileTable\"\n :color=\"props.color\"\n :selection=\"mobileSelection\"\n :data-controller=\"mobileDataController\"\n :filters=\"mobileFilters\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @selection:exit=\"emit('mobile:selection:exit')\"\n @bulk:click=\"v => emit('mobile:bulk:click', mobileRowsToResponsiveRows(v))\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElServerSideMobileTable>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","desktopTable","mobileTable","onMatchMediaChange","event","onMounted","onUnmounted","emit","__emit","responsiveDataCellToDataCell","cell","_a","_b","_c","_d","_e","_f","_g","responsiveDataRowToDesktopDataRow","row","responsiveDataRowToMobileDataRow","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","_k","_l","_m","actions","_n","mobileSelection","computed","fetchedRows","desktopDataController","data","response","mobileDataController","filter","mobilePosition","v","mobileFilters","filters","mobileBehaviour","position","desktopRowsToResponsiveRows","desktopRows","id","index","desktopRowToResponsiveRow","desktopRow","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","__expose","ids"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElServerSideResponsiveTable.vue.cjs2.js","sources":["../../src/table/ElServerSideResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, onMounted, onUnmounted, computed } from 'vue';\nimport { ElResponsiveTableProps, ResponsiveTableColumn, ResponsiveDataRow, ResponsiveDataCell } from './ElResponsiveTable.vue';\nimport ElServerSideMobileTable, { ElServerSideMobileTableProps } from './ElServerSideMobileTable.vue';\nimport ElServerSideTable, { DataControls, TableColumn, ServerSideTableProps, FilterStatus, SortStatus } from './ElServerSideTable.vue';\nimport { DataRow } from './commonTypes';\nimport { MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { DataCell } from './ElTableCell.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport ElButton from '@/ElButton.vue';\n\nexport type ResponsiveServerSideTableColumn = Pick<TableColumn, 'title'> & {\n desktopBehaviour?: Pick<TableColumn, 'alignRight' | 'noSort'>;\n filter?: ResponsiveTableColumn['filter'];\n} & Pick<ResponsiveTableColumn, 'mobileBehaviour'>;\n\nexport type ResponsiveDataControls = Pick<DataControls, 'paginationStatus' | 'filterStatus' | 'triggeredEvent'> &\n (\n | {\n tableType: 'desktop';\n sortStatus: SortStatus;\n }\n | {\n tableType: 'mobile';\n mobileFiltersStatus: MobileTableFiltersStatus;\n }\n );\n\nexport type ElServerSideResponsiveTableDataController = (\n args: ResponsiveDataControls,\n) => Promise<{ data: ResponsiveDataRow[]; totalRows: number }>;\n\nexport type ElServerSideResponsiveTableProps = Pick<\n ElResponsiveTableProps,\n 'mobileBehaviour' | 'desktopBehaviour' | 'sortBy' | 'color' | 'rowsSelectionMode' | 'rowsSelectionDisabled'\n> & {\n columns: ResponsiveServerSideTableColumn[];\n dataController: ElServerSideResponsiveTableDataController;\n rowsPerPage?: number;\n};\n\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElServerSideResponsiveTableProps>();\nconst desktopTable = ref<InstanceType<typeof ElServerSideTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElServerSideMobileTable> | null>(null);\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\n\nconst responsiveDataCellToDataCell = (cell: ResponsiveDataCell): DataCell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'tag':\n return {\n type: 'tag',\n tag: {\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.color,\n },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n };\n }\n};\n\nconst responsiveDataRowToDesktopDataRow = (row: ResponsiveDataRow): DataRow => {\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n cells: row.cells.map(responsiveDataCellToDataCell),\n relatedObject: row.relatedObject,\n };\n};\n\nconst responsiveDataRowToMobileDataRow = (row: ResponsiveDataRow): MobileTableRow => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of row.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: { type: 'tag', text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '', color: cell.color },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n tags.push({\n key: cell.text,\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n relatedObject: row.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: row.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n};\n\nconst mobileSelection = computed<ElServerSideMobileTableProps['selection']>(() => {\n if (props.rowsSelectionDisabled || !props.mobileBehaviour?.selection) return undefined;\n return {\n enabled: !props.rowsSelectionDisabled,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection?.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection?.bulkActionButton,\n cancelText: props.mobileBehaviour?.selection?.cancelText,\n selectedLabel: props.mobileBehaviour?.selection?.selectedLabel,\n };\n});\n\nconst fetchedRows = ref<ResponsiveDataRow[]>([]);\n\nconst desktopDataController: ServerSideTableProps['dataController'] = data =>\n props.dataController({ tableType: 'desktop', ...data }).then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToDesktopDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileDataController: ElServerSideMobileTableProps['dataController'] = data =>\n props\n .dataController({\n tableType: 'mobile',\n ...data,\n mobileFiltersStatus: data.filterStatus,\n filterStatus: props.columns\n .map(column => {\n const filter = column.filter;\n if (!filter) return;\n switch (filter.type) {\n case 'FREE_SEARCH':\n return {\n id: filter.id,\n type: 'FREE_SEARCH',\n columnTitle: column.title,\n textSearch: data.filterStatus.freeSearch ?? '',\n } as FilterStatus;\n case 'DATE_RANGE':\n return {\n id: filter.id,\n type: 'DATE_RANGE',\n columnTitle: column.title,\n dateFrom: data.filterStatus.fromDate ?? 0,\n } satisfies FilterStatus;\n case 'MULTI_VALUE':\n const mobilePosition = filter.mobileBehaviour?.position ?? column.mobileBehaviour?.position;\n if (!mobilePosition) return;\n if (Array.isArray(mobilePosition)) {\n console.warn(\n `Cannot map column ${column.title} mobile filter value since multiple mappings are defined, please specify the mobileBehaviour on the column.filter`,\n );\n return;\n }\n return {\n id: filter.id,\n type: 'MULTI_VALUE',\n columnTitle: column.title,\n textSearch: data.filterStatus.multiSelect[mobilePosition] ?? '',\n } satisfies FilterStatus;\n case 'RESET_FILTERS_BUTTON':\n return undefined;\n }\n })\n .filter((v: FilterStatus | undefined): v is FilterStatus => v !== undefined),\n })\n .then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToMobileDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileFilters = computed<ElServerSideMobileTableProps['filters']>(() => {\n const filters: ElServerSideMobileTableProps['filters'] = {};\n props.columns.forEach(column => {\n if (!column.filter) return;\n const mobileBehaviour = column.mobileBehaviour;\n if (!mobileBehaviour) return;\n\n if (column.filter.type === 'FREE_SEARCH') {\n if (!filters.freeSearch) {\n filters.freeSearch = {\n placeholder: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'DATE_RANGE') {\n if (!filters.dateRange) {\n filters.dateRange = {\n enabled: true,\n label: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'RESET_FILTERS_BUTTON') {\n filters.resetButton = true;\n return;\n }\n\n if (column.filter.type === 'MULTI_VALUE') {\n if (!filters.multiValue) {\n filters.multiValue = {};\n }\n if (Array.isArray(mobileBehaviour.position)) {\n const position = column.filter.mobileBehaviour?.position ?? mobileBehaviour.position.at(0)?.to;\n if (!position) return;\n filters.multiValue[position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n } else {\n filters.multiValue[mobileBehaviour.position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n }\n }\n });\n return filters;\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst desktopRowToResponsiveRow = (desktopRow: DataRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === desktopRow.id);\n return fetchedRows.value[index];\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === mobileRow.id);\n return fetchedRows.value[index];\n};\n\ndefineExpose({\n selectRows: (ids: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(ids);\n } else {\n desktopTable.value?.selectRows(ids);\n }\n },\n resetAllAndFetch: () => {\n if (isMobile.value) {\n return mobileTable.value?.resetAllAndFetch();\n } else {\n return desktopTable.value?.resetAllAndFetch();\n }\n },\n unselectAllRows: () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n },\n getDataRows: () => {\n return fetchedRows.value;\n },\n getSelectedRows: () => {\n if (isMobile.value) {\n return (mobileTable.value?.getSelectedRows() ?? []).map(mobileRowToResponsiveRow);\n } else {\n return (desktopTable.value?.getSelectedRows() ?? []).map(desktopRowToResponsiveRow);\n }\n },\n triggerDataController: async () => {\n if (isMobile.value) {\n return mobileTable.value?.triggerDataController();\n } else {\n return desktopTable.value?.triggerDataController();\n }\n },\n closeMobileTableItemDetails: () => {\n mobileTable.value?.closeItemDetails();\n },\n});\n</script>\n<template>\n <ElServerSideTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :columns=\"props.columns.map(column => ({ ...column, ...column.desktopBehaviour }))\"\n :data-controller=\"desktopDataController\"\n :rows-per-page=\"props.rowsPerPage\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElServerSideMobileTable\n v-else\n ref=\"mobileTable\"\n :color=\"props.color\"\n :selection=\"mobileSelection\"\n :data-controller=\"mobileDataController\"\n :filters=\"mobileFilters\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @selection:exit=\"emit('mobile:selection:exit')\"\n @bulk:click=\"v => emit('mobile:bulk:click', mobileRowsToResponsiveRows(v))\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElServerSideMobileTable>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","desktopTable","mobileTable","onMatchMediaChange","event","onMounted","onUnmounted","emit","__emit","responsiveDataCellToDataCell","cell","_a","_b","_c","_d","_e","_f","_g","responsiveDataRowToDesktopDataRow","row","responsiveDataRowToMobileDataRow","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","_k","_l","_m","actions","_n","mobileSelection","computed","fetchedRows","desktopDataController","data","response","mobileDataController","filter","mobilePosition","v","mobileFilters","filters","mobileBehaviour","position","desktopRowsToResponsiveRows","desktopRows","id","index","desktopRowToResponsiveRow","desktopRow","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","__expose","ids"],"mappings":"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"}
|
|
@@ -151,6 +151,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
|
|
|
151
151
|
tooltip?: string | undefined;
|
|
152
152
|
tooltipDelay?: (string | number) | undefined;
|
|
153
153
|
badgeColor?: import('..').ElBadgeColors | undefined;
|
|
154
|
+
showTooltipOnMobile?: boolean | undefined;
|
|
154
155
|
key?: (string | number | symbol) | undefined;
|
|
155
156
|
ref?: any;
|
|
156
157
|
ref_for?: boolean | undefined;
|
|
@@ -216,6 +217,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
|
|
|
216
217
|
tooltip?: string | undefined;
|
|
217
218
|
tooltipDelay?: (string | number) | undefined;
|
|
218
219
|
badgeColor?: import('..').ElBadgeColors | undefined;
|
|
220
|
+
showTooltipOnMobile?: boolean | undefined;
|
|
219
221
|
key?: (string | number | symbol) | undefined;
|
|
220
222
|
ref?: any;
|
|
221
223
|
ref_for?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElServerSideResponsiveTable.vue.esm2.js","sources":["../../../src/table/ElServerSideResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, onMounted, onUnmounted, computed } from 'vue';\nimport { ElResponsiveTableProps, ResponsiveTableColumn, ResponsiveDataRow, ResponsiveDataCell } from './ElResponsiveTable.vue';\nimport ElServerSideMobileTable, { ElServerSideMobileTableProps } from './ElServerSideMobileTable.vue';\nimport ElServerSideTable, { DataControls, TableColumn, ServerSideTableProps, FilterStatus, SortStatus } from './ElServerSideTable.vue';\nimport { DataRow } from './commonTypes';\nimport { MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { DataCell } from './ElTableCell.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport ElButton from '@/ElButton.vue';\n\nexport type ResponsiveServerSideTableColumn = Pick<TableColumn, 'title'> & {\n desktopBehaviour?: Pick<TableColumn, 'alignRight' | 'noSort'>;\n filter?: ResponsiveTableColumn['filter'];\n} & Pick<ResponsiveTableColumn, 'mobileBehaviour'>;\n\nexport type ResponsiveDataControls = Pick<DataControls, 'paginationStatus' | 'filterStatus' | 'triggeredEvent'> &\n (\n | {\n tableType: 'desktop';\n sortStatus: SortStatus;\n }\n | {\n tableType: 'mobile';\n mobileFiltersStatus: MobileTableFiltersStatus;\n }\n );\n\nexport type ElServerSideResponsiveTableDataController = (\n args: ResponsiveDataControls,\n) => Promise<{ data: ResponsiveDataRow[]; totalRows: number }>;\n\nexport type ElServerSideResponsiveTableProps = Pick<\n ElResponsiveTableProps,\n 'mobileBehaviour' | 'desktopBehaviour' | 'sortBy' | 'color' | 'rowsSelectionMode' | 'rowsSelectionDisabled'\n> & {\n columns: ResponsiveServerSideTableColumn[];\n dataController: ElServerSideResponsiveTableDataController;\n rowsPerPage?: number;\n};\n\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElServerSideResponsiveTableProps>();\nconst desktopTable = ref<InstanceType<typeof ElServerSideTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElServerSideMobileTable> | null>(null);\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\n\nconst responsiveDataCellToDataCell = (cell: ResponsiveDataCell): DataCell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'tag':\n return {\n type: 'tag',\n tag: {\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.color,\n },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n };\n }\n};\n\nconst responsiveDataRowToDesktopDataRow = (row: ResponsiveDataRow): DataRow => {\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n cells: row.cells.map(responsiveDataCellToDataCell),\n relatedObject: row.relatedObject,\n };\n};\n\nconst responsiveDataRowToMobileDataRow = (row: ResponsiveDataRow): MobileTableRow => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of row.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: { type: 'tag', text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '', color: cell.color },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n tags.push({\n key: cell.text,\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n relatedObject: row.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: row.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n};\n\nconst mobileSelection = computed<ElServerSideMobileTableProps['selection']>(() => {\n if (props.rowsSelectionDisabled || !props.mobileBehaviour?.selection) return undefined;\n return {\n enabled: !props.rowsSelectionDisabled,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection?.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection?.bulkActionButton,\n cancelText: props.mobileBehaviour?.selection?.cancelText,\n selectedLabel: props.mobileBehaviour?.selection?.selectedLabel,\n };\n});\n\nconst fetchedRows = ref<ResponsiveDataRow[]>([]);\n\nconst desktopDataController: ServerSideTableProps['dataController'] = data =>\n props.dataController({ tableType: 'desktop', ...data }).then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToDesktopDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileDataController: ElServerSideMobileTableProps['dataController'] = data =>\n props\n .dataController({\n tableType: 'mobile',\n ...data,\n mobileFiltersStatus: data.filterStatus,\n filterStatus: props.columns\n .map(column => {\n const filter = column.filter;\n if (!filter) return;\n switch (filter.type) {\n case 'FREE_SEARCH':\n return {\n id: filter.id,\n type: 'FREE_SEARCH',\n columnTitle: column.title,\n textSearch: data.filterStatus.freeSearch ?? '',\n } as FilterStatus;\n case 'DATE_RANGE':\n return {\n id: filter.id,\n type: 'DATE_RANGE',\n columnTitle: column.title,\n dateFrom: data.filterStatus.fromDate ?? 0,\n } satisfies FilterStatus;\n case 'MULTI_VALUE':\n const mobilePosition = filter.mobileBehaviour?.position ?? column.mobileBehaviour?.position;\n if (!mobilePosition) return;\n if (Array.isArray(mobilePosition)) {\n console.warn(\n `Cannot map column ${column.title} mobile filter value since multiple mappings are defined, please specify the mobileBehaviour on the column.filter`,\n );\n return;\n }\n return {\n id: filter.id,\n type: 'MULTI_VALUE',\n columnTitle: column.title,\n textSearch: data.filterStatus.multiSelect[mobilePosition] ?? '',\n } satisfies FilterStatus;\n case 'RESET_FILTERS_BUTTON':\n return undefined;\n }\n })\n .filter((v: FilterStatus | undefined): v is FilterStatus => v !== undefined),\n })\n .then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToMobileDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileFilters = computed<ElServerSideMobileTableProps['filters']>(() => {\n const filters: ElServerSideMobileTableProps['filters'] = {};\n props.columns.forEach(column => {\n if (!column.filter) return;\n const mobileBehaviour = column.mobileBehaviour;\n if (!mobileBehaviour) return;\n\n if (column.filter.type === 'FREE_SEARCH') {\n if (!filters.freeSearch) {\n filters.freeSearch = {\n placeholder: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'DATE_RANGE') {\n if (!filters.dateRange) {\n filters.dateRange = {\n enabled: true,\n label: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'RESET_FILTERS_BUTTON') {\n filters.resetButton = true;\n return;\n }\n\n if (column.filter.type === 'MULTI_VALUE') {\n if (!filters.multiValue) {\n filters.multiValue = {};\n }\n if (Array.isArray(mobileBehaviour.position)) {\n const position = column.filter.mobileBehaviour?.position ?? mobileBehaviour.position.at(0)?.to;\n if (!position) return;\n filters.multiValue[position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n } else {\n filters.multiValue[mobileBehaviour.position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n }\n }\n });\n return filters;\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst desktopRowToResponsiveRow = (desktopRow: DataRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === desktopRow.id);\n return fetchedRows.value[index];\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === mobileRow.id);\n return fetchedRows.value[index];\n};\n\ndefineExpose({\n selectRows: (ids: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(ids);\n } else {\n desktopTable.value?.selectRows(ids);\n }\n },\n resetAllAndFetch: () => {\n if (isMobile.value) {\n return mobileTable.value?.resetAllAndFetch();\n } else {\n return desktopTable.value?.resetAllAndFetch();\n }\n },\n unselectAllRows: () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n },\n getDataRows: () => {\n return fetchedRows.value;\n },\n getSelectedRows: () => {\n if (isMobile.value) {\n return (mobileTable.value?.getSelectedRows() ?? []).map(mobileRowToResponsiveRow);\n } else {\n return (desktopTable.value?.getSelectedRows() ?? []).map(desktopRowToResponsiveRow);\n }\n },\n triggerDataController: async () => {\n if (isMobile.value) {\n return mobileTable.value?.triggerDataController();\n } else {\n return desktopTable.value?.triggerDataController();\n }\n },\n closeMobileTableItemDetails: () => {\n mobileTable.value?.closeItemDetails();\n },\n});\n</script>\n<template>\n <ElServerSideTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :columns=\"props.columns.map(column => ({ ...column, ...column.desktopBehaviour }))\"\n :data-controller=\"desktopDataController\"\n :rows-per-page=\"props.rowsPerPage\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElServerSideMobileTable\n v-else\n ref=\"mobileTable\"\n :color=\"props.color\"\n :selection=\"mobileSelection\"\n :data-controller=\"mobileDataController\"\n :filters=\"mobileFilters\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @selection:exit=\"emit('mobile:selection:exit')\"\n @bulk:click=\"v => emit('mobile:bulk:click', mobileRowsToResponsiveRows(v))\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElServerSideMobileTable>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","desktopTable","mobileTable","onMatchMediaChange","event","onMounted","onUnmounted","emit","__emit","responsiveDataCellToDataCell","cell","_a","_b","_c","_d","_e","_f","_g","responsiveDataRowToDesktopDataRow","row","responsiveDataRowToMobileDataRow","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","_k","_l","_m","actions","_n","mobileSelection","computed","fetchedRows","desktopDataController","data","response","mobileDataController","filter","mobilePosition","v","mobileFilters","filters","mobileBehaviour","position","desktopRowsToResponsiveRows","desktopRows","id","index","desktopRowToResponsiveRow","desktopRow","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","__expose","ids"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElServerSideResponsiveTable.vue.esm2.js","sources":["../../src/table/ElServerSideResponsiveTable.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, onMounted, onUnmounted, computed } from 'vue';\nimport { ElResponsiveTableProps, ResponsiveTableColumn, ResponsiveDataRow, ResponsiveDataCell } from './ElResponsiveTable.vue';\nimport ElServerSideMobileTable, { ElServerSideMobileTableProps } from './ElServerSideMobileTable.vue';\nimport ElServerSideTable, { DataControls, TableColumn, ServerSideTableProps, FilterStatus, SortStatus } from './ElServerSideTable.vue';\nimport { DataRow } from './commonTypes';\nimport { MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { DataCell } from './ElTableCell.vue';\nimport { ElTextCellColor, ElTextCellStyle } from '@/ElTextCell.vue';\nimport ElButton from '@/ElButton.vue';\n\nexport type ResponsiveServerSideTableColumn = Pick<TableColumn, 'title'> & {\n desktopBehaviour?: Pick<TableColumn, 'alignRight' | 'noSort'>;\n filter?: ResponsiveTableColumn['filter'];\n} & Pick<ResponsiveTableColumn, 'mobileBehaviour'>;\n\nexport type ResponsiveDataControls = Pick<DataControls, 'paginationStatus' | 'filterStatus' | 'triggeredEvent'> &\n (\n | {\n tableType: 'desktop';\n sortStatus: SortStatus;\n }\n | {\n tableType: 'mobile';\n mobileFiltersStatus: MobileTableFiltersStatus;\n }\n );\n\nexport type ElServerSideResponsiveTableDataController = (\n args: ResponsiveDataControls,\n) => Promise<{ data: ResponsiveDataRow[]; totalRows: number }>;\n\nexport type ElServerSideResponsiveTableProps = Pick<\n ElResponsiveTableProps,\n 'mobileBehaviour' | 'desktopBehaviour' | 'sortBy' | 'color' | 'rowsSelectionMode' | 'rowsSelectionDisabled'\n> & {\n columns: ResponsiveServerSideTableColumn[];\n dataController: ElServerSideResponsiveTableDataController;\n rowsPerPage?: number;\n};\n\nconst mediaQuery = window.matchMedia('(max-width: 768px)');\nconst isMobile = ref(mediaQuery.matches);\nconst props = defineProps<ElServerSideResponsiveTableProps>();\nconst desktopTable = ref<InstanceType<typeof ElServerSideTable> | null>(null);\nconst mobileTable = ref<InstanceType<typeof ElServerSideMobileTable> | null>(null);\n\nconst onMatchMediaChange = (event: MediaQueryListEvent) => {\n isMobile.value = event.matches;\n};\nonMounted(() => {\n mediaQuery.addEventListener('change', onMatchMediaChange);\n});\nonUnmounted(() => {\n mediaQuery.removeEventListener('change', onMatchMediaChange);\n});\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:bulk:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:destructive:click', rows: ResponsiveDataRow[]): void;\n (event: 'mobile:selection:exit'): void;\n (event: 'mobile:item:click', row: ResponsiveDataRow): void;\n}>();\n\nconst responsiveDataCellToDataCell = (cell: ResponsiveDataCell): DataCell => {\n if (!cell.type) return { type: 'default', ...cell };\n\n switch (cell.type) {\n case 'default':\n return {\n type: 'default',\n mainIcon: cell.desktopBehaviour?.mainIcon,\n mainText: cell.mainText,\n mainTextStyle: cell.mainTextStyle,\n mainTextColor: cell.mainTextColor,\n subIcon: cell.desktopBehaviour?.subIcon,\n subText: cell.subText,\n avatar: cell.avatar,\n clickAction: cell.clickAction,\n longText: cell.desktopBehaviour?.longText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'tag':\n return {\n type: 'tag',\n tag: {\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.color,\n },\n subText: cell.desktopBehaviour?.subText,\n truncateSubText: cell.desktopBehaviour?.truncateSubText,\n sortableAndFilterableValue: cell.sortableAndFilterableValue,\n };\n case 'action':\n return {\n type: 'action',\n buttons: cell.buttons,\n iconButtons: cell.iconButtons,\n dropdown: cell.dropdown,\n };\n }\n};\n\nconst responsiveDataRowToDesktopDataRow = (row: ResponsiveDataRow): DataRow => {\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n cells: row.cells.map(responsiveDataCellToDataCell),\n relatedObject: row.relatedObject,\n };\n};\n\nconst responsiveDataRowToMobileDataRow = (row: ResponsiveDataRow): MobileTableRow => {\n let mainText: string | undefined;\n let mainTextStyle: ElTextCellStyle | undefined;\n let mainTextColor: ElTextCellColor | undefined;\n let secondaryText: string | undefined;\n let tertiaryText: string | undefined;\n let amountText: string | undefined;\n let avatarLabel: string | undefined;\n let avatarPicture: string | undefined;\n let timeText: string | undefined;\n const tags: MobileTableRow['tags'] = [];\n let primaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n let secondaryAction: InstanceType<typeof ElButton>['$props'] | undefined;\n const details: MobileTableRow['details'] = [];\n\n for (const [cellIndex, cell] of row.cells.entries()) {\n const column = props.columns[cellIndex];\n if (!column) throw new Error('Missing column for cell at index ' + cellIndex);\n\n if (cell.type === 'default') {\n if (Array.isArray(column.mobileBehaviour?.position)) {\n for (const mapping of column.mobileBehaviour.position) {\n if (mapping.to === 'avatar') {\n details.push({\n label: mapping.withLabel,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: mapping.withLabel,\n value: { type: 'default', text: cell[mapping.take] ?? '' },\n });\n }\n }\n } else {\n if (cell.avatar) {\n details.push({\n label: column.title,\n value: { type: 'avatar', ...cell.avatar },\n });\n } else {\n details.push({\n label: column.title,\n value: { type: 'default', text: cell.mainText },\n });\n }\n }\n } else if (cell.type === 'tag') {\n details.push({\n label: column.title,\n value: { type: 'tag', text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '', color: cell.color },\n });\n }\n\n const mobileColumn = column.mobileBehaviour;\n if (!mobileColumn && cell.type !== 'action') continue;\n if (cell.type === 'default') {\n if (Array.isArray(mobileColumn!.position)) {\n for (const mapping of mobileColumn!.position) {\n switch (mapping.to) {\n case 'time':\n timeText = cell[mapping.take];\n break;\n case 'mainText':\n mainText = cell[mapping.take];\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell[mapping.take];\n break;\n case 'tertiaryRow':\n tertiaryText = cell[mapping.take];\n break;\n case 'amount':\n amountText = cell[mapping.take];\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n }\n }\n } else {\n switch (mobileColumn!.position) {\n case 'mainText':\n mainText = cell.mainText;\n mainTextStyle = cell.mainTextStyle;\n mainTextColor = cell.mainTextColor;\n break;\n case 'secondaryRow':\n secondaryText = cell.subText ?? cell.mainText;\n break;\n case 'avatar':\n avatarLabel = cell.avatar?.label;\n avatarPicture = cell.avatar?.picture;\n break;\n case 'amount':\n amountText = cell.mobileBehaviour?.amountText ?? cell.mainText;\n break;\n case 'tertiaryRow':\n tertiaryText = cell.mobileBehaviour?.tertiaryText ?? cell.mainText;\n break;\n case 'tags':\n console.warn('Skipping tags mobile position on cell type default, for tags to be used in mobile table, use cell type tag');\n break;\n case 'time':\n timeText = cell.mobileBehaviour?.timeText ?? cell.mainText;\n break;\n }\n continue;\n }\n }\n\n if (cell.type === 'tag' && mobileColumn!.position === 'tags') {\n tags.push({\n key: cell.text,\n text: cell.desktopBehaviour?.tag.text ?? cell.text ?? '',\n color: cell.desktopBehaviour?.tag.color ?? cell.color,\n });\n continue;\n }\n\n if (cell.type == 'action') {\n if (cell.mobileBehaviour?.primary) {\n primaryAction = cell.mobileBehaviour.primary;\n }\n if (cell.mobileBehaviour?.secondary) {\n secondaryAction = cell.mobileBehaviour.secondary;\n }\n }\n }\n\n let actions: MobileTableRow['actions'];\n if (primaryAction) {\n actions = {\n primary: primaryAction,\n secondary: secondaryAction,\n };\n }\n\n if (!mainText) throw new Error('Missing mainText for mobile item');\n\n return {\n id: row.id,\n rowNotSelectable: row.rowNotSelectable,\n relatedObject: row.relatedObject,\n time: timeText,\n mainText: {\n label: mainText,\n style: mainTextStyle,\n color: mainTextColor,\n },\n secondaryRow: secondaryText,\n tertiaryRow: tertiaryText,\n tags,\n amount: amountText,\n avatar: avatarLabel || avatarPicture ? ({ label: avatarLabel, picture: avatarPicture } as MobileTableRow['avatar']) : undefined,\n trailingIcon: row.mobileBehaviour?.trailingIcon,\n actions,\n details,\n } satisfies MobileTableRow;\n};\n\nconst mobileSelection = computed<ElServerSideMobileTableProps['selection']>(() => {\n if (props.rowsSelectionDisabled || !props.mobileBehaviour?.selection) return undefined;\n return {\n enabled: !props.rowsSelectionDisabled,\n selectionMode: props.rowsSelectionMode || 'multiple',\n destructiveAction: props.mobileBehaviour?.selection?.destructiveAction,\n bulkActionButton: props.mobileBehaviour?.selection?.bulkActionButton,\n cancelText: props.mobileBehaviour?.selection?.cancelText,\n selectedLabel: props.mobileBehaviour?.selection?.selectedLabel,\n };\n});\n\nconst fetchedRows = ref<ResponsiveDataRow[]>([]);\n\nconst desktopDataController: ServerSideTableProps['dataController'] = data =>\n props.dataController({ tableType: 'desktop', ...data }).then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToDesktopDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileDataController: ElServerSideMobileTableProps['dataController'] = data =>\n props\n .dataController({\n tableType: 'mobile',\n ...data,\n mobileFiltersStatus: data.filterStatus,\n filterStatus: props.columns\n .map(column => {\n const filter = column.filter;\n if (!filter) return;\n switch (filter.type) {\n case 'FREE_SEARCH':\n return {\n id: filter.id,\n type: 'FREE_SEARCH',\n columnTitle: column.title,\n textSearch: data.filterStatus.freeSearch ?? '',\n } as FilterStatus;\n case 'DATE_RANGE':\n return {\n id: filter.id,\n type: 'DATE_RANGE',\n columnTitle: column.title,\n dateFrom: data.filterStatus.fromDate ?? 0,\n } satisfies FilterStatus;\n case 'MULTI_VALUE':\n const mobilePosition = filter.mobileBehaviour?.position ?? column.mobileBehaviour?.position;\n if (!mobilePosition) return;\n if (Array.isArray(mobilePosition)) {\n console.warn(\n `Cannot map column ${column.title} mobile filter value since multiple mappings are defined, please specify the mobileBehaviour on the column.filter`,\n );\n return;\n }\n return {\n id: filter.id,\n type: 'MULTI_VALUE',\n columnTitle: column.title,\n textSearch: data.filterStatus.multiSelect[mobilePosition] ?? '',\n } satisfies FilterStatus;\n case 'RESET_FILTERS_BUTTON':\n return undefined;\n }\n })\n .filter((v: FilterStatus | undefined): v is FilterStatus => v !== undefined),\n })\n .then(response => {\n if (data.triggeredEvent === 'paginate') {\n fetchedRows.value = [...fetchedRows.value, ...response.data];\n } else {\n fetchedRows.value = response.data;\n }\n return {\n data: response.data.map(responsiveDataRowToMobileDataRow),\n totalRows: response.totalRows,\n };\n });\n\nconst mobileFilters = computed<ElServerSideMobileTableProps['filters']>(() => {\n const filters: ElServerSideMobileTableProps['filters'] = {};\n props.columns.forEach(column => {\n if (!column.filter) return;\n const mobileBehaviour = column.mobileBehaviour;\n if (!mobileBehaviour) return;\n\n if (column.filter.type === 'FREE_SEARCH') {\n if (!filters.freeSearch) {\n filters.freeSearch = {\n placeholder: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'DATE_RANGE') {\n if (!filters.dateRange) {\n filters.dateRange = {\n enabled: true,\n label: column.title,\n initialValue: column.filter.initialValue,\n };\n }\n return;\n }\n\n if (column.filter.type === 'RESET_FILTERS_BUTTON') {\n filters.resetButton = true;\n return;\n }\n\n if (column.filter.type === 'MULTI_VALUE') {\n if (!filters.multiValue) {\n filters.multiValue = {};\n }\n if (Array.isArray(mobileBehaviour.position)) {\n const position = column.filter.mobileBehaviour?.position ?? mobileBehaviour.position.at(0)?.to;\n if (!position) return;\n filters.multiValue[position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n } else {\n filters.multiValue[mobileBehaviour.position] = {\n enabled: true,\n label: column.title,\n selectOptions: column.filter.selectOptions,\n initialValue: column.filter.initialValue,\n };\n }\n }\n });\n return filters;\n});\n\nconst desktopRowsToResponsiveRows = (desktopRows: DataRow[]): ResponsiveDataRow[] => {\n const indexes = desktopRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst desktopRowToResponsiveRow = (desktopRow: DataRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === desktopRow.id);\n return fetchedRows.value[index];\n};\n\nconst mobileRowsToResponsiveRows = (mobileRows: MobileTableRow[]): ResponsiveDataRow[] => {\n const indexes = mobileRows.map(row => row.id).map(id => fetchedRows.value.findIndex(row => row.id === id));\n return indexes.map(index => fetchedRows.value[index]);\n};\n\nconst mobileRowToResponsiveRow = (mobileRow: MobileTableRow): ResponsiveDataRow => {\n const index = fetchedRows.value.findIndex(row => row.id === mobileRow.id);\n return fetchedRows.value[index];\n};\n\ndefineExpose({\n selectRows: (ids: string[]) => {\n if (isMobile.value) {\n mobileTable.value?.selectRows(ids);\n } else {\n desktopTable.value?.selectRows(ids);\n }\n },\n resetAllAndFetch: () => {\n if (isMobile.value) {\n return mobileTable.value?.resetAllAndFetch();\n } else {\n return desktopTable.value?.resetAllAndFetch();\n }\n },\n unselectAllRows: () => {\n if (isMobile.value) {\n mobileTable.value?.unselectAllRows();\n } else {\n desktopTable.value?.unselectAllRows();\n }\n },\n getDataRows: () => {\n return fetchedRows.value;\n },\n getSelectedRows: () => {\n if (isMobile.value) {\n return (mobileTable.value?.getSelectedRows() ?? []).map(mobileRowToResponsiveRow);\n } else {\n return (desktopTable.value?.getSelectedRows() ?? []).map(desktopRowToResponsiveRow);\n }\n },\n triggerDataController: async () => {\n if (isMobile.value) {\n return mobileTable.value?.triggerDataController();\n } else {\n return desktopTable.value?.triggerDataController();\n }\n },\n closeMobileTableItemDetails: () => {\n mobileTable.value?.closeItemDetails();\n },\n});\n</script>\n<template>\n <ElServerSideTable\n v-if=\"!isMobile\"\n ref=\"desktopTable\"\n :columns=\"props.columns.map(column => ({ ...column, ...column.desktopBehaviour }))\"\n :data-controller=\"desktopDataController\"\n :rows-per-page=\"props.rowsPerPage\"\n @rows-selected=\"data => $emit('rows-selected', desktopRowsToResponsiveRows(data))\"\n />\n <ElServerSideMobileTable\n v-else\n ref=\"mobileTable\"\n :color=\"props.color\"\n :selection=\"mobileSelection\"\n :data-controller=\"mobileDataController\"\n :filters=\"mobileFilters\"\n :prevent-default-item-click=\"props.mobileBehaviour?.preventDefaultItemClick\"\n @selection:exit=\"emit('mobile:selection:exit')\"\n @bulk:click=\"v => emit('mobile:bulk:click', mobileRowsToResponsiveRows(v))\"\n @rows-selected=\"data => $emit('rows-selected', mobileRowsToResponsiveRows(data))\"\n @destructive:click=\"data => $emit('mobile:destructive:click', mobileRowsToResponsiveRows(data))\"\n @item:click=\"row => emit('mobile:item:click', mobileRowToResponsiveRow(row))\"\n >\n <slot name=\"mobile\" />\n </ElServerSideMobileTable>\n</template>\n"],"names":["mediaQuery","isMobile","ref","props","__props","desktopTable","mobileTable","onMatchMediaChange","event","onMounted","onUnmounted","emit","__emit","responsiveDataCellToDataCell","cell","_a","_b","_c","_d","_e","_f","_g","responsiveDataRowToDesktopDataRow","row","responsiveDataRowToMobileDataRow","mainText","mainTextStyle","mainTextColor","secondaryText","tertiaryText","amountText","avatarLabel","avatarPicture","timeText","tags","primaryAction","secondaryAction","details","cellIndex","column","mapping","mobileColumn","_h","_i","_j","_k","_l","_m","actions","_n","mobileSelection","computed","fetchedRows","desktopDataController","data","response","mobileDataController","filter","mobilePosition","v","mobileFilters","filters","mobileBehaviour","position","desktopRowsToResponsiveRows","desktopRows","id","index","desktopRowToResponsiveRow","desktopRow","mobileRowsToResponsiveRows","mobileRows","mobileRowToResponsiveRow","mobileRow","__expose","ids"],"mappings":"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"}
|