@davincihealthcare/elty-design-system-vue 2.7.2 → 2.9.0

package/dist/src/table/ElResponsiveTable.vue.cjs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElResponsiveTable.vue.cjs2.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\ndefineEmits<{\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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"}

package/dist/src/table/ElResponsiveTable.vue.esm2.js.map

@@ -0,0 +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\ndefineEmits<{\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":"0mBAkIM,MAAAA,EAAa,OAAO,WAAW,oBAAoB,EACnDC,EAAWC,EAAIF,EAAW,OAAO,EACjCG,EAAQC,EAERC,EAAsBC,GAA+B,CACzDL,EAAS,MAAQK,EAAM,OAAA,EAEzBC,GAAU,IAAM,CACHP,EAAA,iBAAiB,SAAUK,CAAkB,CAAA,CACzD,EACDG,GAAY,IAAM,CACLR,EAAA,oBAAoB,SAAUK,CAAkB,CAAA,CAC5D,EASK,MAAAI,EAAeP,EAAyC,IAAI,EAC5DQ,EAAcR,EAA+C,IAAI,EAEjES,EAAWC,EAAS,IACxBT,EAAM,KAAK,OACT,CAACU,EAAKC,KACAD,EAAAC,EAAI,EAAE,EAAIA,EACPD,GAET,CAAC,CACH,CAAA,EAGIE,EAAeH,EAAS,IAAM,SAClC,OAAOX,EAAS,OAAQe,EAAAN,EAAY,QAAZ,YAAAM,EAAmB,cAAeC,EAAAR,EAAa,QAAb,YAAAQ,EAAoB,YAAA,CAC/E,EAEKC,EAAa,MAAOC,GAAsB,SAC1ClB,EAAS,OACCe,EAAAN,EAAA,QAAA,MAAAM,EAAO,WAAWG,IAEjBF,EAAAR,EAAA,QAAA,MAAAQ,EAAO,WAAWE,EACjC,EAGIC,EAAkB,IAAM,SACxBnB,EAAS,OACXe,EAAAN,EAAY,QAAZ,MAAAM,EAAmB,mBAEnBC,EAAAR,EAAa,QAAb,MAAAQ,EAAoB,iBACtB,EAGII,EAA6BC,IAC1B,CACL,GAAIA,EAAK,GACT,iBAAkBA,EAAK,iBACvB,cAAeA,EAAK,cACpB,MAAOA,EAAK,MAAM,IAAYC,GAAA,mBAC5B,GAAI,CAACA,EAAK,KAAM,MAAO,CAAE,KAAM,UAAW,GAAGA,CAAK,EAElD,OAAQA,EAAK,KAAM,CACjB,IAAK,UACI,MAAA,CACL,KAAM,UACN,UAAUP,EAAAO,EAAK,mBAAL,YAAAP,EAAuB,SACjC,SAAUO,EAAK,SACf,cAAeA,EAAK,cACpB,cAAeA,EAAK,cACpB,SAASN,EAAAM,EAAK,mBAAL,YAAAN,EAAuB,QAChC,QAASM,EAAK,QACd,OAAQA,EAAK,OACb,YAAaA,EAAK,YAClB,UAAUC,EAAAD,EAAK,mBAAL,YAAAC,EAAuB,SACjC,iBAAiBC,EAAAF,EAAK,mBAAL,YAAAE,EAAuB,eAAA,EAE5C,IAAK,MACI,MAAA,CACL,KAAM,MACN,IAAK,CAAE,KAAMF,EAAK,MAAQ,GAAI,MAAOA,EAAK,MAAO,IAAGG,EAAAH,EAAK,mBAAL,YAAAG,EAAuB,GAAI,EAC/E,SAASC,EAAAJ,EAAK,mBAAL,YAAAI,EAAuB,QAChC,iBAAiBC,EAAAL,EAAK,mBAAL,YAAAK,EAAuB,eAAA,EAE5C,IAAK,SACI,MAAA,CACL,KAAM,SACN,QAASL,EAAK,QACd,YAAaA,EAAK,YAClB,SAAUA,EAAK,QAAA,CAErB,CAAA,CACD,CAAA,GAkBQM,EAAA,CACX,aAAAd,EACA,WAAAG,EACA,gBAAAE,EACA,YAlBkB,IAAM,SACxB,OAAKnB,EAAS,QACPgB,EAAAP,EAAY,QAAZ,YAAAO,EAAmB,cAAc,IAAIH,GAAOH,EAAS,MAAMG,EAAI,EAAE,KAAM,CAAA,IADlDE,EAAAP,EAAa,QAAb,YAAAO,EAAoB,cAAc,IAAIF,GAAOH,EAAS,MAAMG,EAAI,EAAE,KAAM,CAAA,CACrB,EAiB/E,gBAdsB,IAAM,SAC5B,OAAKb,EAAS,QACPgB,EAAAP,EAAY,QAAZ,YAAAO,EAAmB,kBAAkB,IAAIH,GAAOH,EAAS,MAAMG,EAAI,EAAE,KAAM,CAAA,IADtDE,EAAAP,EAAa,QAAb,YAAAO,EAAoB,kBAAkB,IAAIF,GAAOH,EAAS,MAAMG,EAAI,EAAE,KAAM,CAAA,CACrB,EAanF,4BAVkC,IAAM,QACxCE,EAAAN,EAAY,QAAZ,MAAAM,EAAmB,kBAAiB,CASpC,CACD,EAEK,MAAAc,EAAclB,EAA2B,IACtCT,EAAM,KAAK,IAAYmB,GAAA,mCACxB,IAAAS,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,EACJ,MAAMC,EAA+B,CAAA,EACjC,IAAAC,EACAC,EACJ,MAAMC,EAAqC,CAAA,EAE3C,SAAW,CAACC,EAAWrB,CAAI,IAAKD,EAAK,MAAM,UAAW,CAC9C,MAAAuB,EAAS1C,EAAM,QAAQyC,CAAS,EACtC,GAAI,CAACC,EAAc,MAAA,IAAI,MAAM,oCAAsCD,CAAS,EAExE,GAAArB,EAAK,OAAS,UAChB,GAAI,MAAM,SAAQP,EAAA6B,EAAO,kBAAP,YAAA7B,EAAwB,QAAQ,EACrC,UAAA8B,KAAWD,EAAO,gBAAgB,SACvCC,EAAQ,KAAO,SACjBH,EAAQ,KAAK,CACX,MAAOG,EAAQ,UACf,MAAO,CAAE,KAAM,SAAU,GAAGvB,EAAK,MAAO,CAAA,CACzC,EAEDoB,EAAQ,KAAK,CACX,MAAOG,EAAQ,UACf,MAAO,CAAE,KAAM,UAAW,KAAMvB,EAAKuB,EAAQ,IAAI,GAAK,EAAG,CAAA,CAC1D,OAIDvB,EAAK,OACPoB,EAAQ,KAAK,CACX,MAAOE,EAAO,MACd,MAAO,CAAE,KAAM,SAAU,GAAGtB,EAAK,MAAO,CAAA,CACzC,EAEDoB,EAAQ,KAAK,CACX,MAAOE,EAAO,MACd,MAAO,CAAE,KAAM,UAAW,KAAMtB,EAAK,QAAS,CAAA,CAC/C,OAGIA,EAAK,OAAS,OACvBoB,EAAQ,KAAK,CACX,MAAOE,EAAO,MACd,MAAO,CACL,KAAM,MACN,OAAM5B,EAAAM,EAAK,mBAAL,YAAAN,EAAuB,IAAI,OAAQM,EAAK,MAAQ,GACtD,QAAOC,EAAAD,EAAK,mBAAL,YAAAC,EAAuB,IAAI,QAASD,EAAK,KAClD,CAAA,CACD,EAGH,MAAMwB,EAAeF,EAAO,gBACxB,GAAA,GAACE,GAAgBxB,EAAK,OAAS,UAC/B,IAAAA,EAAK,OAAS,UAChB,GAAI,MAAM,QAAQwB,EAAc,QAAQ,EAC3B,UAAAD,KAAWC,EAAc,SAClC,OAAQD,EAAQ,GAAI,CAClB,IAAK,OACQP,EAAAhB,EAAKuB,EAAQ,IAAI,EAC5B,MACF,IAAK,WACQf,EAAAR,EAAKuB,EAAQ,IAAI,EAC5Bd,EAAgBT,EAAK,cACrBU,EAAgBV,EAAK,cACrB,MACF,IAAK,eACaW,EAAAX,EAAKuB,EAAQ,IAAI,EACjC,MACF,IAAK,cACYX,EAAAZ,EAAKuB,EAAQ,IAAI,EAChC,MACF,IAAK,SACUV,EAAAb,EAAKuB,EAAQ,IAAI,EAC9B,MACF,IAAK,SACHT,GAAcZ,EAAAF,EAAK,SAAL,YAAAE,EAAa,MAC3Ba,GAAgBZ,EAAAH,EAAK,SAAL,YAAAG,EAAa,QAC7B,KACJ,KAEG,CACL,OAAQqB,EAAc,SAAU,CAC9B,IAAK,WACHhB,EAAWR,EAAK,SAChBS,EAAgBT,EAAK,cACrBU,EAAgBV,EAAK,cACrB,MACF,IAAK,eACaW,EAAAX,EAAK,SAAWA,EAAK,SACrC,MACF,IAAK,SACHc,GAAcV,EAAAJ,EAAK,SAAL,YAAAI,EAAa,MAC3BW,GAAgBV,EAAAL,EAAK,SAAL,YAAAK,EAAa,QAC7B,MACF,IAAK,SACUQ,IAAAY,EAAAzB,EAAK,kBAAL,YAAAyB,EAAsB,aAAczB,EAAK,SACtD,MACF,IAAK,cACYY,IAAAc,EAAA1B,EAAK,kBAAL,YAAA0B,EAAsB,eAAgB1B,EAAK,SAC1D,MACF,IAAK,OACH,QAAQ,KAAK,4GAA4G,EACzH,MACF,IAAK,OACQgB,IAAAW,EAAA3B,EAAK,kBAAL,YAAA2B,EAAsB,WAAY3B,EAAK,SAClD,KACJ,CACA,QACF,CAGF,GAAIA,EAAK,OAAS,OAASwB,EAAc,WAAa,OAAQ,CAC5D,MAAMI,IAAOC,EAAA7B,EAAK,mBAAL,YAAA6B,EAAuB,IAAI,OAAQ7B,EAAK,MAAQ,GAC7DiB,EAAK,KAAK,CACR,IAAKW,EACL,KAAAA,EACA,QAAOE,EAAA9B,EAAK,mBAAL,YAAA8B,EAAuB,IAAI,QAAS9B,EAAK,KAAA,CACjD,EACD,QACF,CAEIA,EAAK,MAAQ,YACX+B,EAAA/B,EAAK,kBAAL,MAAA+B,EAAsB,UACxBb,EAAgBlB,EAAK,gBAAgB,UAEnCgC,EAAAhC,EAAK,kBAAL,MAAAgC,EAAsB,YACxBb,EAAkBnB,EAAK,gBAAgB,YAG7C,CAEI,IAAAiC,EAQJ,GAPIf,IACQe,EAAA,CACR,QAASf,EACT,UAAWC,CAAA,GAIX,CAACX,EAAgB,MAAA,IAAI,MAAM,kCAAkC,EAE1D,MAAA,CACL,GAAIT,EAAK,GACT,iBAAkBA,EAAK,iBACvB,cAAeA,EAAK,cACpB,KAAMiB,EACN,SAAU,CACR,MAAOR,EACP,MAAOC,EACP,MAAOC,CACT,EACA,aAAcC,EACd,YAAaC,EACb,KAAAK,EACA,OAAQJ,EACR,OAAQC,GAAeC,EAAiB,CAAE,MAAOD,EAAa,QAASC,CAA+C,EAAA,OACtH,cAAcmB,EAAAnC,EAAK,kBAAL,YAAAmC,EAAsB,aACpC,QAAAD,EACA,QAAAb,CAAA,CACF,CACD,CACF,EAEKe,GAAe9C,EAAoB,IAChCT,EAAM,KAAK,IAAIkB,CAAyB,CAChD,EAEKsC,GAAgB/C,EAA4B,IAAM,CACtD,MAAMgD,EAAkC,CAAA,EACxC,OAAIzD,EAAM,WACJA,EAAA,QACH,OAAQ0C,GAA8F,CAAC,CAACA,EAAO,MAAM,EACrH,QAAkBA,GAAA,eACT,OAAAA,EAAO,OAAO,KAAM,CAC1B,IAAK,cACC,GAAA,GAAC7B,EAAA6B,EAAO,kBAAP,MAAA7B,EAAwB,UAAU,OAClC4C,EAAa,aAAYA,EAAa,WAAa,CAAE,SAAU,CAAG,CAAA,GACnEf,EAAO,OAAO,eACHe,EAAA,WAAW,aAAef,EAAO,OAAO,aACxCe,EAAA,WAAW,YAAcf,EAAO,OAAO,cAEtD5B,EAAA2C,EAAa,aAAb,MAAA3C,EAAyB,SAAS,KAChC,GAAI,MAAM,QAAQ4B,EAAO,gBAAgB,QAAQ,EAC7CA,EAAO,gBAAgB,SAAS,IAAIgB,GAAYA,EAAS,EAAE,EAC3D,CAAChB,EAAO,gBAAgB,QAAQ,GAEtC,MACF,IAAK,aACEe,EAAa,YAChBA,EAAa,UAAY,CACvB,MAAOf,EAAO,MACd,QAAS,GACT,aAAcA,EAAO,OAAO,aAC5B,YAAaA,EAAO,OAAO,WAAA,GAE/B,MACF,IAAK,cACC,GAAA,GAACrB,EAAAqB,EAAO,kBAAP,MAAArB,EAAwB,UAAU,OAClCoC,EAAa,aAAYA,EAAa,WAAa,IACpD,IAAAC,EAMJ,GALI,MAAM,QAAQhB,EAAO,gBAAgB,QAAQ,EACpCgB,IAAApC,EAAAoB,EAAO,OAAO,kBAAd,YAAApB,EAA+B,aAAYC,EAAAmB,EAAO,gBAAgB,SAAS,GAAG,CAAC,IAApC,YAAAnB,EAAuC,IAE7FmC,EAAWhB,EAAO,gBAAgB,SAEhC,CAACgB,EAAU,OACFD,EAAA,WAAWC,CAAQ,EAAI,CAClC,QAAS,GACT,aAAchB,EAAO,OAAO,aAC5B,cAAeA,EAAO,OAAO,cAC7B,MAAOA,EAAO,KAAA,EAEhB,MACF,IAAK,uBACHe,EAAa,YAAc,GAC3B,KACJ,CAAA,CACD,EACIA,CAAA,CACR,EAEKE,GAAkBlD,EAA0C,IAAM,eAClE,KAAAI,EAAAb,EAAM,kBAAN,YAAAa,EAAuB,aAAc,OAClC,MAAA,CACL,QAASb,EAAM,oBAAsB,QAAaA,EAAM,wBAA0B,GAClF,cAAeA,EAAM,mBAAqB,WAC1C,mBAAmBc,EAAAd,EAAM,kBAAN,YAAAc,EAAuB,UAAU,kBACpD,kBAAkBO,EAAArB,EAAM,kBAAN,YAAAqB,EAAuB,UAAU,iBACnD,eAAeC,EAAAtB,EAAM,kBAAN,YAAAsB,EAAuB,UAAU,cAChD,YAAYC,EAAAvB,EAAM,kBAAN,YAAAuB,EAAuB,UAAU,UAAA,CAC/C,CACD,EAEKqC,GAA+BC,GACnBA,EAAY,IAAWlD,GAAAA,EAAI,EAAE,EAAE,IAAUmD,GAAA9D,EAAM,KAAK,UAAUW,GAAOA,EAAI,KAAOmD,CAAE,CAAC,EACpF,IAAIC,GAAS/D,EAAM,KAAK+D,CAAK,CAAC,EAGzCC,EAA8BC,GAClBA,EAAW,IAAWtD,GAAAA,EAAI,EAAE,EAAE,IAAUmD,GAAA9D,EAAM,KAAK,UAAUW,GAAOA,EAAI,KAAOmD,CAAE,CAAC,EACnF,IAAIC,GAAS/D,EAAM,KAAK+D,CAAK,CAAC,EAGzCG,GAA4BC,GAAiD,CAC3E,MAAAJ,EAAQ/D,EAAM,KAAK,aAAiBW,EAAI,KAAOwD,EAAU,EAAE,EAC1D,OAAAnE,EAAM,KAAK+D,CAAK,CAAA,EAGnBK,GAAe3D,EAAmD,IAAM,SAC5E,GAAI,CAACT,EAAM,QAAU,CAACA,EAAM,OAAO,OAAe,OAClD,MAAM0C,EAAS1C,EAAM,QAAQA,EAAM,OAAO,MAAM,EAC5C,GAAA,KAACa,EAAA6B,EAAO,kBAAP,MAAA7B,EAAwB,WAAY,MAAM,QAAQ6B,EAAO,gBAAgB,QAAQ,GAE/E,MAAA,CACL,IAAI5B,EAAA4B,EAAO,kBAAP,YAAA5B,EAAwB,SAC5B,MAAOd,EAAM,OAAO,OAAS,MAAA,CAC/B,CACD"}

package/dist/src/table/ElServerSideMobileTable.vue.cjs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElServerSideMobileTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n  triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n  filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n  filters?: {\n    freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n  } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n  dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n  freeSearch: '',\n  fromDate: 0,\n  multiSelect: {\n    avatar: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n    time: '',\n  },\n});\nconst fetchNextPage = () => {\n  loading.value = true;\n  props\n    .dataController({\n      paginationStatus: {\n        currentPage: currentPage.value + 1,\n      },\n      filterStatus: filterStatus.value,\n      triggeredEvent: 'paginate',\n    })\n    .then(response => {\n      data.value.push(...response.data);\n      totalItemsCount.value = response.totalRows;\n    })\n    .finally(() => {\n      nextTick(() =>\n        nextTick(() => {\n          loading.value = false;\n        }),\n      );\n      currentPage.value += 1;\n    });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n  loading.value = true;\n  currentPage.value = 0;\n  data.value = [];\n  return props\n    .dataController({\n      paginationStatus: {\n        currentPage: 0,\n      },\n      filterStatus: filterStatus.value,\n      triggeredEvent: triggeredEvent,\n    })\n    .then(response => {\n      data.value = response.data;\n      totalItemsCount.value = response.totalRows;\n    })\n    .finally(() => {\n      nextTick(() =>\n        nextTick(() => {\n          loading.value = false;\n        }),\n      );\n    });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n  filterStatus.value = filters;\n  fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n  fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n  if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n    fetchNextPage();\n  }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n  observer.value = new IntersectionObserver(\n    entry => {\n      if (entry.some(e => e.isIntersecting) && !loading.value) {\n        onInfiniteScroll();\n      }\n    },\n    {\n      threshold: 1.0,\n    },\n  );\n  if (infiniteScrollEl.value) {\n    observer.value.observe(infiniteScrollEl.value!);\n  }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n  if (oldValue) observer.value!.unobserve(oldValue);\n  if (newValue) {\n    observer.value!.observe(newValue);\n  }\n});\nonUnmounted(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n    observer.value = undefined;\n  }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n  table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n  filterStatus.value = {\n    freeSearch: '',\n    fromDate: 0,\n    multiSelect: {\n      avatar: '',\n      mainText: '',\n      secondaryRow: '',\n      tertiaryRow: '',\n      amount: '',\n      tags: '',\n      time: '',\n    },\n  };\n  table.value?.unselectAllRows();\n  return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  data.value = newData.data;\n  totalItemsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nconst closeItemDetails = () => {\n  table.value?.closeItemDetails();\n};\n\ndefineExpose({\n  selectRows,\n  unselectAllRows,\n  getSelectedRows,\n  resetAllAndFetch,\n  triggerDataController,\n  closeItemDetails,\n});\n\ndefineEmits<{\n  (event: 'bulk:click', rows: MobileTableRow[]): void;\n  (event: 'destructive:click', rows: MobileTableRow[]): void;\n  (event: 'selection:exit'): void;\n  (event: 'rows-selected', rows: MobileTableRow[]): void;\n  (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n  <ElTableMobile\n    ref=\"table\"\n    :color=\"props.color\"\n    :selection=\"props.selection\"\n    :data=\"data\"\n    :filters=\"{\n      ...props.filters,\n      freeSearch: props.filters?.freeSearch\n        ? {\n            placeholder: props.filters.freeSearch.placeholder,\n            initialValue: props.filters.freeSearch.initialValue,\n            filterOn: [],\n          }\n        : undefined,\n      managed: true,\n    }\"\n    :loading=\"loading\"\n    :prevent-default-item-click=\"props.preventDefaultItemClick\"\n    @rows-selected=\"v => $emit('rows-selected', v)\"\n    @filters-updated=\"onFiltersUpdated\"\n    @bulk:click=\"v => $emit('bulk:click', v)\"\n    @selection:exit=\"$emit('selection:exit')\"\n    @destructive:click=\"v => $emit('destructive:click', v)\"\n    @item:click=\"v => $emit('item:click', v)\"\n  >\n    <template #default>\n      <slot />\n    </template>\n    <template #after-list>\n      <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n    </template>\n  </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"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"}

package/dist/src/table/ElServerSideMobileTable.vue.esm2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElServerSideMobileTable.vue.esm2.js","sources":["../../../src/table/ElServerSideMobileTable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTableMobile, { ElMobileTableProps, MobileTableFilter, MobileTableFiltersStatus, MobileTableRow } from '@/table/ElMobileTable.vue';\nimport { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';\nimport { DataControls } from './ElServerSideTable.vue';\n\nexport type MobileDataControls = Pick<DataControls, 'paginationStatus'> & {\n  triggeredEvent: 'paginate' | 'filter' | 'firstLoad' | 'trigger';\n  filterStatus: MobileTableFiltersStatus;\n};\n\nexport type ElServerSideMobileTableProps = Pick<ElMobileTableProps, 'selection' | 'color' | 'preventDefaultItemClick'> & {\n  filters?: {\n    freeSearch?: Omit<NonNullable<MobileTableFilter['freeSearch']>, 'filterOn'>;\n  } & Pick<MobileTableFilter, 'dateRange' | 'multiValue' | 'resetButton'>;\n  dataController: (args: MobileDataControls) => Promise<{ data: MobileTableRow[]; totalRows: number }>;\n};\n</script>\n\n<script setup lang=\"ts\">\nconst loading = ref(false);\nconst props = defineProps<ElServerSideMobileTableProps>();\nconst data = ref<MobileTableRow[]>([]);\nconst currentPage = ref<number>(1);\nconst totalItemsCount = ref<number | undefined>(undefined);\nconst filterStatus = ref<MobileTableFiltersStatus>({\n  freeSearch: '',\n  fromDate: 0,\n  multiSelect: {\n    avatar: '',\n    mainText: '',\n    secondaryRow: '',\n    tertiaryRow: '',\n    amount: '',\n    tags: '',\n    time: '',\n  },\n});\nconst fetchNextPage = () => {\n  loading.value = true;\n  props\n    .dataController({\n      paginationStatus: {\n        currentPage: currentPage.value + 1,\n      },\n      filterStatus: filterStatus.value,\n      triggeredEvent: 'paginate',\n    })\n    .then(response => {\n      data.value.push(...response.data);\n      totalItemsCount.value = response.totalRows;\n    })\n    .finally(() => {\n      nextTick(() =>\n        nextTick(() => {\n          loading.value = false;\n        }),\n      );\n      currentPage.value += 1;\n    });\n};\nconst fetchFirstPage = (triggeredEvent: 'firstLoad' | 'filter') => {\n  loading.value = true;\n  currentPage.value = 0;\n  data.value = [];\n  return props\n    .dataController({\n      paginationStatus: {\n        currentPage: 0,\n      },\n      filterStatus: filterStatus.value,\n      triggeredEvent: triggeredEvent,\n    })\n    .then(response => {\n      data.value = response.data;\n      totalItemsCount.value = response.totalRows;\n    })\n    .finally(() => {\n      nextTick(() =>\n        nextTick(() => {\n          loading.value = false;\n        }),\n      );\n    });\n};\nconst onFiltersUpdated = (filters: MobileTableFiltersStatus) => {\n  filterStatus.value = filters;\n  fetchFirstPage('filter');\n};\n// fetch initial data\nonMounted(() => {\n  fetchFirstPage('firstLoad');\n});\n\n// infinite scroll\nconst onInfiniteScroll = () => {\n  if (totalItemsCount.value && data.value.length < totalItemsCount.value) {\n    fetchNextPage();\n  }\n};\nconst infiniteScrollEl = ref<HTMLDivElement | null>();\nconst observer = ref<IntersectionObserver | undefined>(undefined);\nonMounted(() => {\n  observer.value = new IntersectionObserver(\n    entry => {\n      if (entry.some(e => e.isIntersecting) && !loading.value) {\n        onInfiniteScroll();\n      }\n    },\n    {\n      threshold: 1.0,\n    },\n  );\n  if (infiniteScrollEl.value) {\n    observer.value.observe(infiniteScrollEl.value!);\n  }\n});\nwatch(infiniteScrollEl, (newValue, oldValue) => {\n  if (oldValue) observer.value!.unobserve(oldValue);\n  if (newValue) {\n    observer.value!.observe(newValue);\n  }\n});\nonUnmounted(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n    observer.value = undefined;\n  }\n});\n\nconst table = ref<InstanceType<typeof ElTableMobile> | null>(null);\n\nconst selectRows = (rowsIds: string[]) => {\n  table.value?.selectRows(rowsIds);\n};\n\nconst unselectAllRows = () => table.value?.unselectAllRows();\n\nconst getSelectedRows = () => table.value?.getSelectedRows() ?? [];\n\nconst resetAllAndFetch = () => {\n  filterStatus.value = {\n    freeSearch: '',\n    fromDate: 0,\n    multiSelect: {\n      avatar: '',\n      mainText: '',\n      secondaryRow: '',\n      tertiaryRow: '',\n      amount: '',\n      tags: '',\n      time: '',\n    },\n  };\n  table.value?.unselectAllRows();\n  return fetchFirstPage('firstLoad');\n};\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    filterStatus: filterStatus.value,\n    triggeredEvent: 'trigger',\n  });\n  data.value = newData.data;\n  totalItemsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nconst closeItemDetails = () => {\n  table.value?.closeItemDetails();\n};\n\ndefineExpose({\n  selectRows,\n  unselectAllRows,\n  getSelectedRows,\n  resetAllAndFetch,\n  triggerDataController,\n  closeItemDetails,\n});\n\ndefineEmits<{\n  (event: 'bulk:click', rows: MobileTableRow[]): void;\n  (event: 'destructive:click', rows: MobileTableRow[]): void;\n  (event: 'selection:exit'): void;\n  (event: 'rows-selected', rows: MobileTableRow[]): void;\n  (event: 'item:click', row: MobileTableRow): void;\n}>();\n</script>\n\n<template>\n  <ElTableMobile\n    ref=\"table\"\n    :color=\"props.color\"\n    :selection=\"props.selection\"\n    :data=\"data\"\n    :filters=\"{\n      ...props.filters,\n      freeSearch: props.filters?.freeSearch\n        ? {\n            placeholder: props.filters.freeSearch.placeholder,\n            initialValue: props.filters.freeSearch.initialValue,\n            filterOn: [],\n          }\n        : undefined,\n      managed: true,\n    }\"\n    :loading=\"loading\"\n    :prevent-default-item-click=\"props.preventDefaultItemClick\"\n    @rows-selected=\"v => $emit('rows-selected', v)\"\n    @filters-updated=\"onFiltersUpdated\"\n    @bulk:click=\"v => $emit('bulk:click', v)\"\n    @selection:exit=\"$emit('selection:exit')\"\n    @destructive:click=\"v => $emit('destructive:click', v)\"\n    @item:click=\"v => $emit('item:click', v)\"\n  >\n    <template #default>\n      <slot />\n    </template>\n    <template #after-list>\n      <div ref=\"infiniteScrollEl\" class=\"h-1 mb-2 shrink-0\" />\n    </template>\n  </ElTableMobile>\n</template>\n"],"names":["loading","ref","props","__props","data","currentPage","totalItemsCount","filterStatus","fetchNextPage","response","nextTick","fetchFirstPage","triggeredEvent","onFiltersUpdated","filters","onMounted","onInfiniteScroll","infiniteScrollEl","observer","entry","e","watch","newValue","oldValue","onUnmounted","table","__expose","rowsIds","_a","newData"],"mappings":"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"}

package/dist/src/table/ElServerSideResponsiveTable.vue.cjs2.js.map

@@ -0,0 +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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"}

package/dist/src/table/ElServerSideResponsiveTable.vue.esm2.js.map

@@ -0,0 +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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"}

package/dist/src/table/ElServerSideTable.vue.cjs2.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),K=require("./ElServerSideTablePagination.vue.cjs2.js"),Q=require("../_CustomTransition.vue.cjs2.js"),b=require("../forms/ElInputCheckbox.vue.cjs2.js"),W=require("../forms/ElInputSelect.vue.cjs2.js"),Y=require("../forms/ElInputDate.vue.cjs2.js"),Z=require("../forms/ElInputText.vue.cjs2.js"),ee=require("../ElSpinner.vue.cjs2.js"),te=require("./ElTableCell.vue.cjs2.js"),le=require("../ElButton.vue.cjs2.js"),x=require("../../node_modules/@vueuse/core/node_modules/@vueuse/shared/index.cjs.js"),oe={class:"flex flex-col"},re={class:"overflow-x-auto"},ae={class:"inline-block min-w-full bg-white align-middle"},ne={class:"min-w-full"},se={class:"bg-neutral-surface-raised font-semibold"},ce={key:1,class:"w-7"},ue=["title","onClick"],ie={key:0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",class:"ml-1 inline-flex h-3 w-3",fill:"currentColor"},de={key:0,d:"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z"},pe={key:1,d:"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z",title:"Ordine Decrescente"},fe={key:0},ge={key:0,scope:"col"},me={key:1,class:"flex flex-col"},_e={key:3,class:"flex justify-end"},ve={key:"loading"},we=["colspan"],ye={key:"tableFull",class:"bg-white"},Se={key:0,class:"flex h-20 items-center justify-center py-3"},ke=["data-cy"],Ee={key:"tableEmpty"},he=["colspan"],Be=e.defineComponent({__name:"ElServerSideTable",props:{columns:{},sortByCol:{default:-1},sortByColAsc:{type:Boolean,default:!1},noFilters:{type:Boolean},noFooter:{type:Boolean},rowsSelectionMode:{default:void 0},rowsSelectionDisabled:{type:Boolean},rowsPerPage:{default:15},dataController:{}},emits:["rows-selected","newPageSelected"],setup(A,{expose:F,emit:T}){const r=A,N=T,f=e.ref(!0),_=10,d=e.ref([]),S=e.ref(null);e.onMounted(async()=>{const t=await r.dataController({paginationStatus:{currentPage:0},sortStatus:w.value,filterStatus:i.value.filter(c=>c),triggeredEvent:"firstLoad"});d.value=t.data,v.value=t.totalRows,f.value=!1});function P(){const t=e.ref(0),c=e.computed(()=>{var a;return((a=S.value)==null?void 0:a.currentPage)??0});return{newPageSelected:async a=>{f.value=!0,d.value=(await r.dataController({paginationStatus:{currentPage:a},sortStatus:w.value,filterStatus:i.value.filter(n=>n),triggeredEvent:"paginate"})).data,f.value=!1},totalRowsCount:t,currentPage:c,goToFirstPage:()=>{var a;return(a=S.value)==null?void 0:a.goToPage(0,{doNotEmitEvent:!0})}}}function M(){const t=e.ref({currentlySortColIndex:r.sortByCol>-1?r.sortByCol:-1,arrows:[]}),c=()=>{t.value={currentlySortColIndex:-1,arrows:[]}},o=e.computed(()=>({columnToSort:t.value.currentlySortColIndex,order:t.value.arrows[t.value.currentlySortColIndex]?"asc":"desc"}));return e.onMounted(async()=>{r.columns.length>_?t.value.arrows=new Array(_):t.value.arrows=new Array(r.columns.length-1),r.sortByCol>-1&&(t.value.arrows[r.sortByCol]=r.sortByColAsc)}),{sortStatus:t,toggleSortArrow:async a=>{t.value.currentlySortColIndex=a,t.value.arrows.splice(a,1,!t.value.arrows[a]),f.value=!0;try{const n=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:o.value,filterStatus:i.value.filter(s=>s),triggeredEvent:"sort"});d.value=n.data,v.value=n.totalRows}catch(n){console.error(n)}finally{f.value=!1}},currentSortStatus:o,resetSort:c}}function D(){const t=e.ref([]),c=e.ref(!1);e.onMounted(()=>{o(),x.watchDeep(t,async n=>{c.value?(l(n),c.value=!1):a(n)})});const o=()=>{var n;c.value=!0,r.columns.length>_?t.value=new Array(_):t.value=new Array(r.columns.length-1);for(let s=0;s<_;s++){const u=(n=r.columns[s])==null?void 0:n.filter;u&&(u.type==="FREE_SEARCH"?t.value.splice(s,1,{id:u.id,textSearch:u.initialValue??"",type:"FREE_SEARCH",columnTitle:r.columns[s].title}):u.type==="MULTI_VALUE"?t.value.splice(s,1,{id:u.id,textSearch:u.initialValue??"",type:"MULTI_VALUE",columnTitle:r.columns[s].title}):u.type==="DATE_RANGE"&&t.value.splice(s,1,{id:u.id,dateFrom:u.initialValue??0,type:"DATE_RANGE",columnTitle:r.columns[s].title}))}},l=async n=>{console.log("applyFilters"),f.value=!0,H();const s=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:w.value,filterStatus:n.filter(u=>u),triggeredEvent:"filter"});d.value=s.data,v.value=s.totalRows,f.value=!1},a=x.useDebounceFn(l,500);return{filterStatus:t,resetFilters:o}}function U(){const t=e.ref([]),c=()=>{N("rows-selected",t.value)},o=p=>{a(p.map(g=>g.id))},l=p=>{const g=t.value.findIndex(m=>m.id===p);t.value.splice(g,1),c()},a=async p=>{r.rowsSelectionMode==="single"&&(t.value=[],await e.nextTick());const g=d.value.filter(m=>p.includes(m.id));r.rowsSelectionMode==="single"&&(g.length=Math.min(1,g.length));for(const m of g)t.value.some(J=>J.id===m.id)||t.value.push(m);c()},n=()=>{t.value=[],c()},s=()=>d.value,u=()=>t.value,y=e.computed(()=>t.value.length>0&&t.value.length===d.value.length);return{selectedRows:t,rowsSelected:o,rowUnselected:l,selectRows:a,unselectAllRows:n,getDataRows:s,getSelectedRows:u,allRowsSelected:y}}const{selectedRows:B,rowsSelected:C,rowUnselected:L,selectRows:I,unselectAllRows:k,getDataRows:q,getSelectedRows:z,allRowsSelected:V}=U(),{filterStatus:i,resetFilters:E}=D(),{sortStatus:R,toggleSortArrow:O,currentSortStatus:w,resetSort:G}=M(),{newPageSelected:j,totalRowsCount:v,currentPage:h,goToFirstPage:H}=P(),X=async()=>{G(),E(),k()},$=async()=>{f.value=!0;const t=await r.dataController({paginationStatus:{currentPage:h.value},sortStatus:w.value,filterStatus:i.value.filter(c=>c),triggeredEvent:"trigger"});d.value=t.data,v.value=t.totalRows,f.value=!1};return e.watch(()=>r.columns,()=>E(),{deep:!0,immediate:!0}),F({selectRows:I,resetAllAndFetch:X,unselectAllRows:k,getDataRows:q,getSelectedRows:z,triggerDataController:$}),(t,c)=>(e.openBlock(),e.createElementBlock("div",oe,[e.createElementVNode("div",re,[e.createElementVNode("div",ae,[e.createElementVNode("table",ne,[e.createElementVNode("thead",null,[e.createElementVNode("tr",se,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",{key:0,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider",{"cursor-pointer":t.rowsSelectionMode==="multiple"}])},[t.rowsSelectionMode==="multiple"?(e.openBlock(),e.createBlock(b.default,{key:0,"model-value":e.unref(V),disabled:t.rowsSelectionDisabled,size:"xxs",onClick:c[0]||(c[0]=()=>e.unref(V)?e.unref(k)():e.unref(C)(d.value))},null,8,["model-value","disabled"])):(e.openBlock(),e.createElementBlock("div",ce))],2)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.columns,(o,l)=>(e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:e.normalizeClass(["bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider",[o.alignRight?"text-right":"text-left",o.noSort?"cursor-default":"cursor-pointer"]]),title:o.noSort?"Colonna non ordinabile":e.unref(R).arrows[l]?"Ordine crescente":"Ordine decrescente",onClick:a=>!o.noSort&&e.unref(O)(l)},[e.createTextVNode(e.toDisplayString(o.title)+" ",1),o.noSort?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("svg",ie,[e.unref(R).arrows[l]?(e.openBlock(),e.createElementBlock("path",de)):(e.openBlock(),e.createElementBlock("path",pe))]))],10,ue))),128))]),e.unref(i).length>0&&!t.noFilters?(e.openBlock(),e.createElementBlock("tr",fe,[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("th",ge)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(o,l)=>{var a,n,s,u,y;return e.openBlock(),e.createElementBlock("th",{key:l,scope:"col",class:"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider"},[((a=o.filter)==null?void 0:a.type)==="FREE_SEARCH"&&e.unref(i)[l].type==="FREE_SEARCH"?(e.openBlock(),e.createBlock(Z.default,{key:0,modelValue:e.unref(i)[l].textSearch,"onUpdate:modelValue":p=>e.unref(i)[l].textSearch=p,placeholder:((n=o.filter)==null?void 0:n.placeholder)||"Cerca","hidden-error-message":!0,"leading-icon":{name:"MagnifyingGlassIcon"}},null,8,["modelValue","onUpdate:modelValue","placeholder"])):((s=o.filter)==null?void 0:s.type)==="DATE_RANGE"&&e.unref(i)[l].type==="DATE_RANGE"?(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(Y.default,{modelValue:e.unref(i)[l].dateFrom,"onUpdate:modelValue":p=>e.unref(i)[l].dateFrom=p,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue"])])):((u=o.filter)==null?void 0:u.type)==="MULTI_VALUE"&&e.unref(i)[l].type==="MULTI_VALUE"?(e.openBlock(),e.createBlock(W.default,{key:2,modelValue:e.unref(i)[l].textSearch,"onUpdate:modelValue":p=>e.unref(i)[l].textSearch=p,class:"flex flex-col",type:"autocomplete",options:o.filter.selectOptions,"hidden-error-message":!0},null,8,["modelValue","onUpdate:modelValue","options"])):((y=o.filter)==null?void 0:y.type)==="RESET_FILTERS_BUTTON"?(e.openBlock(),e.createElementBlock("div",_e,[e.createVNode(le.default,{label:"Azzera filtri",variant:"tertiary",size:"xs",onClick:e.unref(E)},null,8,["onClick"])])):e.createCommentVNode("",!0)])}),128))])):e.createCommentVNode("",!0)]),e.createVNode(Q.default,{name:"fade"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("tbody",ve,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.columns.length+1},[e.createVNode(ee.default,{label:"Caricamento dati...",class:"p-4","extra-loading-msg-after-seconds":3})],8,we)])])):d.value.length>0?(e.openBlock(),e.createElementBlock("tbody",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,o=>(e.openBlock(),e.createElementBlock("tr",{key:o.id,class:e.normalizeClass(["transition duration-150 ease-in-out border-t border-neutral-surface",{"bg-neutral-surface-raised":t.rowsSelectionMode&&e.unref(B).find(l=>l.id===o.id)}]),"data-cy":"table-row"},[t.rowsSelectionMode?(e.openBlock(),e.createElementBlock("td",Se,[e.createVNode(b.default,{"model-value":!!e.unref(B).find(l=>l.id===o.id),disabled:t.rowsSelectionDisabled,size:"xxs","onUpdate:modelValue":l=>l?e.unref(C)([o]):e.unref(L)(o.id)},null,8,["model-value","disabled","onUpdate:modelValue"])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.cells,(l,a)=>(e.openBlock(),e.createElementBlock("td",{key:a,class:"max-w-sm px-2.5 py-2.5","data-cy":l.type==="default"&&l.mainText.trim().replaceAll(" ","").replaceAll(",","")},[e.createVNode(te.default,{cell:l},null,8,["cell"])],8,ke))),128))],2))),128))])):d.value.length===0?(e.openBlock(),e.createElementBlock("tbody",Ee,[e.createElementVNode("tr",null,[e.createElementVNode("td",{colspan:r.columns.length+1,class:"p-4 font-light text-neutral-darker"},"nessun dato trovato",8,he)])])):e.createCommentVNode("",!0)]),_:1})])])]),e.createVNode(K.default,{ref_key:"pagination",ref:S,"total-rows-count":e.unref(v),"rows-per-page":r.rowsPerPage,"hide-footer":r.noFooter,"onUpdate:currentPage":e.unref(j)},null,8,["total-rows-count","rows-per-page","hide-footer","onUpdate:currentPage"])]))}});exports.default=Be;
+//# sourceMappingURL=ElServerSideTable.vue.cjs2.js.map

package/dist/src/table/ElServerSideTable.vue.cjs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElServerSideTable.vue.cjs2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value.filter(f => f),\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value.filter(f => f),\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    if (props.columns.length > MAX_COLS) {\n      sortStatus.value.arrows = new Array(MAX_COLS);\n    } else {\n      sortStatus.value.arrows = new Array(props.columns.length - 1);\n    }\n\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value.filter(f => f),\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    if (props.columns.length > MAX_COLS) {\n      filterStatus.value = new Array(MAX_COLS);\n    } else {\n      filterStatus.value = new Array(props.columns.length - 1);\n    }\n\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters.filter(f => f),\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value.filter(f => f),\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","f","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}

package/dist/src/table/ElServerSideTable.vue.esm2.js

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

package/dist/src/table/ElServerSideTable.vue.esm2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElServerSideTable.vue.esm2.js","sources":["../../../src/table/ElServerSideTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface TableColumn {\n  title: string;\n  filter?: TableColumnFilter;\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport type TableColumnFilter =\n  | TableColumnFilterFreeSearch\n  | TableColumnFilterDateRange\n  | TableColumnFilterMultiValue\n  | TableColumnFilterResetButton;\n\nexport type TableColumnFilterFreeSearch = {\n  id?: string;\n  type: Extract<FilterType, 'FREE_SEARCH'>;\n  placeholder?: string;\n  initialValue?: string;\n};\n\nexport type TableColumnFilterDateRange = {\n  id?: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n  placeholder?: string;\n  initialValue?: number;\n};\n\nexport type TableColumnFilterMultiValue = {\n  id?: string;\n  type: Extract<FilterType, 'MULTI_VALUE'>;\n  selectOptions: InstanceType<typeof ElInputSelect>['$props']['options'];\n  initialValue?: string;\n};\n\nexport type TableColumnFilterResetButton = {\n  type: 'RESET_FILTERS_BUTTON';\n};\n\nexport interface DataControls {\n  sortStatus: SortStatus;\n  paginationStatus: {\n    currentPage: number;\n  };\n  filterStatus: FilterStatus[];\n  triggeredEvent: 'paginate' | 'filter' | 'sort' | 'firstLoad' | 'trigger';\n}\n\nexport interface SortStatus {\n  columnToSort: number;\n  order: 'asc' | 'desc';\n}\n\nexport interface ServerSideTableProps {\n  columns: TableColumn[];\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  rowsPerPage?: number;\n  dataController: (args: DataControls) => Promise<{ data: DataRow[]; totalRows: number }>;\n}\n\nexport type FilterStatus = TextFilterStatus | DateFilterStatus;\n\nexport type TextFilterStatus = {\n  id?: string;\n  textSearch: string;\n  columnTitle: string;\n  type: Extract<FilterType, 'FREE_SEARCH' | 'MULTI_VALUE'>;\n};\n\nexport type DateFilterStatus = {\n  id?: string;\n  dateFrom: number;\n  columnTitle: string;\n  type: Extract<FilterType, 'DATE_RANGE'>;\n};\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport ElServerSideTablePagination from '@/table/ElServerSideTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { watchDeep, useDebounceFn } from '@vueuse/core';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<ServerSideTableProps>(), {\n  sortByCol: -1,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n  rowsPerPage: 15,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n  (event: 'newPageSelected', pageNumber: number): void;\n}>();\n\nconst loading = ref(true);\n\nconst MAX_COLS = 10;\n\nconst currentPageDataRows = ref<DataRow[]>([]);\n\nconst pagination = ref<InstanceType<typeof ElServerSideTablePagination> | null>(null);\n\nonMounted(async () => {\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: 0,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value.filter(f => f),\n    triggeredEvent: 'firstLoad',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n});\n\nfunction usePagination() {\n  const totalRowsCount = ref(0);\n  const currentPage = computed(() => pagination.value?.currentPage ?? 0);\n\n  const goToFirstPage = () => pagination.value?.goToPage(0, { doNotEmitEvent: true });\n\n  const newPageSelected = async (newPage: number) => {\n    loading.value = true;\n    currentPageDataRows.value = (\n      await props.dataController({\n        paginationStatus: {\n          currentPage: newPage,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value.filter(f => f),\n        triggeredEvent: 'paginate',\n      })\n    ).data;\n    loading.value = false;\n  };\n\n  return {\n    newPageSelected,\n    totalRowsCount,\n    currentPage,\n    goToFirstPage,\n  };\n}\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  const resetSort = () => {\n    sortStatus.value = {\n      currentlySortColIndex: -1,\n      arrows: [],\n    };\n  };\n  const currentSortStatus = computed<DataControls['sortStatus']>(() => {\n    return {\n      columnToSort: sortStatus.value.currentlySortColIndex,\n      order: sortStatus.value.arrows[sortStatus.value.currentlySortColIndex] ? 'asc' : 'desc',\n    };\n  });\n\n  onMounted(async () => {\n    if (props.columns.length > MAX_COLS) {\n      sortStatus.value.arrows = new Array(MAX_COLS);\n    } else {\n      sortStatus.value.arrows = new Array(props.columns.length - 1);\n    }\n\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const toggleSortArrow = async (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n    loading.value = true;\n    try {\n      const newData = await props.dataController({\n        paginationStatus: {\n          currentPage: currentPage.value,\n        },\n        sortStatus: currentSortStatus.value,\n        filterStatus: filterStatus.value.filter(f => f),\n        triggeredEvent: 'sort',\n      });\n      currentPageDataRows.value = newData.data;\n      totalRowsCount.value = newData.totalRows;\n    } catch (error) {\n      // TODO handle error\n      console.error(error);\n    } finally {\n      loading.value = false;\n    }\n  };\n\n  return {\n    sortStatus,\n    toggleSortArrow,\n    currentSortStatus,\n    resetSort,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<FilterStatus[]>([]);\n  const isResettingFilters = ref(false);\n\n  onMounted(() => {\n    resetFilters();\n    watchDeep(filterStatus, async filters => {\n      if (isResettingFilters.value) {\n        applyFilters(filters);\n        isResettingFilters.value = false;\n      } else {\n        applyFiltersDebounced(filters);\n      }\n    });\n  });\n\n  const resetFilters = () => {\n    isResettingFilters.value = true;\n\n    if (props.columns.length > MAX_COLS) {\n      filterStatus.value = new Array(MAX_COLS);\n    } else {\n      filterStatus.value = new Array(props.columns.length - 1);\n    }\n\n    for (let i = 0; i < MAX_COLS; i++) {\n      const filter = props.columns[i]?.filter;\n      if (filter) {\n        if (filter.type === 'FREE_SEARCH') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'FREE_SEARCH',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'MULTI_VALUE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            textSearch: filter.initialValue ?? '',\n            type: 'MULTI_VALUE',\n            columnTitle: props.columns[i].title,\n          });\n        } else if (filter.type === 'DATE_RANGE') {\n          filterStatus.value.splice(i, 1, {\n            id: filter.id,\n            dateFrom: filter.initialValue ?? 0,\n            type: 'DATE_RANGE',\n            columnTitle: props.columns[i].title,\n          });\n        }\n      }\n    }\n  };\n\n  const applyFilters = async (filters: FilterStatus[]) => {\n    console.log('applyFilters');\n    loading.value = true;\n    goToFirstPage();\n    const newData = await props.dataController({\n      paginationStatus: {\n        currentPage: currentPage.value,\n      },\n      sortStatus: currentSortStatus.value,\n      filterStatus: filters.filter(f => f),\n      triggeredEvent: 'filter',\n    });\n    currentPageDataRows.value = newData.data;\n    totalRowsCount.value = newData.totalRows;\n    loading.value = false;\n  };\n\n  const applyFiltersDebounced = useDebounceFn(applyFilters, 500);\n\n  return {\n    filterStatus,\n    resetFilters,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof currentPageDataRows.value>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentPageDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentPageDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentPageDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, resetFilters } = useFilters();\nconst { sortStatus, toggleSortArrow, currentSortStatus, resetSort } = useSorting();\nconst { newPageSelected, totalRowsCount, currentPage, goToFirstPage } = usePagination();\n\nconst resetAllAndFetch = async () => {\n  // Resetting filters and sort will trigger the dataController\n  resetSort();\n  resetFilters();\n  unselectAllRows();\n};\n\nconst triggerDataController = async () => {\n  loading.value = true;\n  const newData = await props.dataController({\n    paginationStatus: {\n      currentPage: currentPage.value,\n    },\n    sortStatus: currentSortStatus.value,\n    filterStatus: filterStatus.value.filter(f => f),\n    triggeredEvent: 'trigger',\n  });\n  currentPageDataRows.value = newData.data;\n  totalRowsCount.value = newData.totalRows;\n  loading.value = false;\n};\n\nwatch(\n  () => props.columns,\n  () => resetFilters(),\n  { deep: true, immediate: true },\n);\n\ndefineExpose({\n  selectRows,\n  resetAllAndFetch,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n  triggerDataController,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentPageDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH' && filterStatus[index].type === 'FREE_SEARCH'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :leading-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE' && filterStatus[index].type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"(filterStatus[index] as DateFilterStatus).dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE' && filterStatus[index].type === 'MULTI_VALUE'\"\n                  v-model=\"(filterStatus[index] as TextFilterStatus).textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"col.filter.selectOptions\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in DS version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilters\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentPageDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentPageDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ElServerSideTablePagination\n      ref=\"pagination\"\n      :total-rows-count=\"totalRowsCount\"\n      :rows-per-page=\"props.rowsPerPage\"\n      :hide-footer=\"props.noFooter\"\n      @update:current-page=\"newPageSelected\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","loading","ref","MAX_COLS","currentPageDataRows","pagination","onMounted","newData","currentSortStatus","filterStatus","f","totalRowsCount","usePagination","currentPage","computed","_a","newPage","useSorting","sortStatus","resetSort","colIndex","error","useFilters","isResettingFilters","resetFilters","filters","applyFilters","applyFiltersDebounced","i","filter","goToFirstPage","useDebounceFn","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","toggleSortArrow","newPageSelected","resetAllAndFetch","triggerDataController","watch","__expose"],"mappings":"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"}

package/dist/src/table/ElServerSideTablePagination.vue.cjs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElServerSideTablePagination.vue.cjs2.js","sources":["../../../src/table/ElServerSideTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ninterface Props {\n  totalRowsCount: number;\n  rowsPerPage?: number;\n  pagesBeforeDots?: number; // < 1,2,3....13,14,15 > in this case it's 3\n  hideFooter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  rowsPerPage: 15,\n  pagesBeforeDots: 3,\n  hideFooter: false,\n});\n\nconst currentPage = ref(0);\n\nconst emit = defineEmits<{\n  (event: 'update:currentPage', page: number): void;\n}>();\n\nconst totalPages = computed(() => Math.ceil(props.totalRowsCount / props.rowsPerPage));\n\nconst prevPageDisabled = computed(() => currentPage.value <= 0);\nconst nextPageDisabled = computed(() => currentPage.value >= totalPages.value - 1);\n\nconst pageChanged = (page: number) => emit('update:currentPage', page);\n\nconst goToPage = (pageNumber: number, { doNotEmitEvent }: { doNotEmitEvent: boolean } = { doNotEmitEvent: false }) => {\n  console.log('goToPage', pageNumber);\n  console.log('totalPages', totalPages.value);\n  if (pageNumber < 0 || pageNumber >= totalPages.value) return;\n  currentPage.value = pageNumber;\n  console.log('pageChanged', pageNumber);\n  if (!doNotEmitEvent) pageChanged(pageNumber);\n};\n\nfunction useNumberedPages() {\n  const sliceStart = ref(0);\n  const sliceArray = computed(() => range(totalPages.value).slice(sliceStart.value, sliceStart.value + props.pagesBeforeDots));\n\n  watch(\n    () => [props.pagesBeforeDots, props.totalRowsCount, props.rowsPerPage, totalPages.value, currentPage.value],\n    () => {\n      calculateSliceStart();\n    },\n    {\n      immediate: true,\n    },\n  );\n\n  const range = (end: number, start: number = 0, step: number = 1) => {\n    const arr = [];\n    for (let i = start; i < end; i += step) {\n      arr.push(i);\n    }\n    return arr;\n  };\n\n  function calculateSliceStart() {\n    const chunkSize = props.pagesBeforeDots;\n    const currentChunkStart = sliceStart.value;\n    const currentChunkEnd = currentChunkStart + chunkSize;\n\n    if (currentPage.value >= currentChunkEnd) {\n      const lastChunkStart = totalPages.value - chunkSize;\n      if (currentPage.value > lastChunkStart) {\n        sliceStart.value = lastChunkStart;\n      } else {\n        sliceStart.value = currentPage.value;\n      }\n    } else if (currentPage.value < currentChunkStart) {\n      if (currentPage.value > chunkSize) {\n        sliceStart.value = currentPage.value + 1 - chunkSize;\n      } else {\n        if (currentPage.value >= 3) {\n          sliceStart.value = currentPage.value - 1;\n        } else {\n          sliceStart.value = 0;\n        }\n      }\n    }\n  }\n\n  return {\n    sliceStart,\n    sliceArray,\n  };\n}\nconst { sliceStart, sliceArray } = useNumberedPages();\n\ndefineExpose({\n  currentPage,\n  goToPage,\n});\n</script>\n\n<template>\n  <div v-if=\"!hideFooter\" class=\"bg-white flex items-center rounded-b-md border-t border-neutral-surface px-4 sm:px-6 py-4\">\n    <!-- Small Screen -->\n    <ul class=\"pagination w-fit mx-auto flex items-center rounded-md border border-surface bg-white md:hidden\">\n      <!--Previous-->\n      <li class=\"min-w-8\">\n        <ElIconButton\n          class=\"-ml-px\"\n          :icon=\"{\n            name: 'ChevronLeftIcon',\n          }\"\n          :disabled=\"prevPageDisabled\"\n          @click=\"goToPage(currentPage - 1)\"\n        />\n      </li>\n\n      <!--Pages-->\n      <li\n        v-for=\"item in sliceArray\"\n        :key=\"item\"\n        :class=\"['border-x-[1px] border-surface -ml-px', currentPage === item && 'border-primary -my-px']\"\n      >\n        <button\n          type=\"button\"\n          :class=\"['text-sm min-w-8 h-8', currentPage === item ? 'font-semibold bg-primary text-white' : 'text-neutral-600']\"\n          @click.prevent=\"goToPage(item)\"\n        >\n          {{ item + 1 }}\n        </button>\n      </li>\n\n      <!-- Expand pages button (...) -->\n      <li\n        v-if=\"sliceStart < totalPages - pagesBeforeDots && totalPages > 3 && (sliceArray.at(-1) ?? 0) < totalPages - 1\"\n        class=\"border-x-[1px] border-surface -my-px -ml-px\"\n      >\n        <button type=\"button\" class=\"text-neutral-600 text-sm min-w-8 h-8\" @click.prevent=\"goToPage((sliceArray.at(-1) ?? 0) + 1)\">\n          <span aria-hidden=\"true\">&hellip;</span>\n        </button>\n      </li>\n\n      <!-- Next -->\n      <li class=\"min-w-8\">\n        <ElIconButton\n          :icon=\"{\n            name: 'ChevronRightIcon',\n          }\"\n          :disabled=\"nextPageDisabled\"\n          @click=\"goToPage(currentPage + 1)\"\n        />\n      </li>\n    </ul>\n\n    <!-- Large Screen -->\n    <div class=\"hidden md:flex flex-1 items-center w-full\">\n      <nav class=\"mx-auto\" aria-label=\"Page navigation\">\n        <ul class=\"pagination flex items-center rounded-md border border-surface bg-white\">\n          <!--Previous-->\n          <li>\n            <ElIconButton\n              :icon=\"{\n                name: 'ChevronLeftIcon',\n              }\"\n              :disabled=\"prevPageDisabled\"\n              @click=\"goToPage(currentPage - 1)\"\n            />\n          </li>\n\n          <!-- First 2 pages -->\n          <li v-if=\"sliceStart > 0 && totalPages > pagesBeforeDots\" class=\"border-x-[1px] border-surface -ml-px\">\n            <button type=\"button\" class=\"text-sm min-w-8 h-8 text-neutral-600\" @click.prevent=\"goToPage(0)\">1</button>\n          </li>\n          <li\n            v-if=\"(sliceStart > 2 && totalPages > pagesBeforeDots + 1) || (sliceStart > 0 && totalPages === 5)\"\n            class=\"border-x-[1px] border-surface -ml-px\"\n          >\n            <button type=\"button\" class=\"text-sm min-w-8 h-8 text-neutral-600\" @click.prevent=\"goToPage(1)\">2</button>\n          </li>\n\n          <!-- Expand pages button (...) -->\n          <li v-if=\"sliceStart > 0 && totalPages > 5\" class=\"border-x-[1px] border-surface -my-px -ml-px\">\n            <button type=\"button\" class=\"text-neutral-600 text-sm min-w-8 h-8\" @click.prevent=\"goToPage((sliceArray.at(0) ?? 1) - 1)\">\n              <span aria-hidden=\"true\">&hellip;</span>\n            </button>\n          </li>\n\n          <!--Pages-->\n          <li\n            v-for=\"item in sliceArray\"\n            :key=\"item\"\n            :class=\"['border-x-[1px] border-surface -ml-px', currentPage === item && 'border-primary -my-px']\"\n          >\n            <button\n              type=\"button\"\n              :class=\"['text-sm min-w-8 h-8', currentPage === item ? 'font-semibold bg-primary text-white' : 'text-neutral-600']\"\n              @click.prevent=\"goToPage(item)\"\n            >\n              {{ item + 1 }}\n            </button>\n          </li>\n\n          <!-- Expand pages button (...) -->\n          <li\n            v-if=\"sliceStart < totalPages - pagesBeforeDots && totalPages > 5 && (sliceArray.at(-1) ?? 0) < totalPages - 2\"\n            class=\"border-x-[1px] border-surface -my-px -ml-px\"\n          >\n            <button type=\"button\" class=\"text-neutral-600 text-sm min-w-8 h-8\" @click.prevent=\"goToPage((sliceArray.at(-1) ?? 0) + 1)\">\n              <span aria-hidden=\"true\">&hellip;</span>\n            </button>\n          </li>\n\n          <!-- Last 2 pages -->\n          <li\n            v-if=\"\n              sliceStart < totalPages - pagesBeforeDots &&\n              totalPages >= pagesBeforeDots + 2 &&\n              (totalPages === 5 || (sliceArray.at(-1) ?? 0) < totalPages - 3)\n            \"\n            class=\"border-x-[1px] border-surface -ml-px\"\n          >\n            <button type=\"button\" class=\"text-sm min-w-8 h-8 text-neutral-600\" @click.prevent=\"goToPage(totalPages - 2)\">\n              {{ totalPages - 1 }}\n            </button>\n          </li>\n          <li\n            v-if=\"sliceStart < totalPages - pagesBeforeDots && totalPages >= pagesBeforeDots + 1\"\n            class=\"border-x-[1px] border-surface -ml-px\"\n          >\n            <button type=\"button\" class=\"text-sm min-w-8 h-8 text-neutral-600\" @click.prevent=\"goToPage(totalPages - 1)\">\n              {{ totalPages }}\n            </button>\n          </li>\n\n          <!-- Next -->\n          <li>\n            <ElIconButton\n              :icon=\"{\n                name: 'ChevronRightIcon',\n              }\"\n              :disabled=\"nextPageDisabled\"\n              @click=\"goToPage(currentPage + 1)\"\n            />\n          </li>\n        </ul>\n      </nav>\n    </div>\n  </div>\n</template>\n"],"names":["props","__props","currentPage","ref","emit","__emit","totalPages","computed","prevPageDisabled","nextPageDisabled","pageChanged","page","goToPage","pageNumber","doNotEmitEvent","useNumberedPages","sliceStart","sliceArray","range","watch","calculateSliceStart","end","start","step","arr","i","chunkSize","currentChunkStart","currentChunkEnd","lastChunkStart","__expose"],"mappings":"w8CAWA,MAAMA,EAAQC,EAMRC,EAAcC,MAAI,CAAC,EAEnBC,EAAOC,EAIPC,EAAaC,WAAS,IAAM,KAAK,KAAKP,EAAM,eAAiBA,EAAM,WAAW,CAAC,EAE/EQ,EAAmBD,EAAAA,SAAS,IAAML,EAAY,OAAS,CAAC,EACxDO,EAAmBF,EAAS,SAAA,IAAML,EAAY,OAASI,EAAW,MAAQ,CAAC,EAE3EI,EAAeC,GAAiBP,EAAK,qBAAsBO,CAAI,EAE/DC,EAAW,CAACC,EAAoB,CAAE,eAAAC,GAAgD,CAAE,eAAgB,MAAY,CAC5G,QAAA,IAAI,WAAYD,CAAU,EAC1B,QAAA,IAAI,aAAcP,EAAW,KAAK,EACtC,EAAAO,EAAa,GAAKA,GAAcP,EAAW,SAC/CJ,EAAY,MAAQW,EACZ,QAAA,IAAI,cAAeA,CAAU,EAChCC,GAAgBJ,EAAYG,CAAU,EAAA,EAG7C,SAASE,GAAmB,CACpBC,MAAAA,EAAab,MAAI,CAAC,EAClBc,EAAaV,EAAAA,SAAS,IAAMW,EAAMZ,EAAW,KAAK,EAAE,MAAMU,EAAW,MAAOA,EAAW,MAAQhB,EAAM,eAAe,CAAC,EAE3HmB,EAAA,MACE,IAAM,CAACnB,EAAM,gBAAiBA,EAAM,eAAgBA,EAAM,YAAaM,EAAW,MAAOJ,EAAY,KAAK,EAC1G,IAAM,CACgBkB,GACtB,EACA,CACE,UAAW,EACb,CAAA,EAGF,MAAMF,EAAQ,CAACG,EAAaC,EAAgB,EAAGC,EAAe,IAAM,CAClE,MAAMC,EAAM,CAAA,EACZ,QAASC,EAAIH,EAAOG,EAAIJ,EAAKI,GAAKF,EAChCC,EAAI,KAAKC,CAAC,EAEL,OAAAD,CAAA,EAGT,SAASJ,GAAsB,CAC7B,MAAMM,EAAY1B,EAAM,gBAClB2B,EAAoBX,EAAW,MAC/BY,EAAkBD,EAAoBD,EAExC,GAAAxB,EAAY,OAAS0B,EAAiB,CAClC,MAAAC,EAAiBvB,EAAW,MAAQoB,EACtCxB,EAAY,MAAQ2B,EACtBb,EAAW,MAAQa,EAEnBb,EAAW,MAAQd,EAAY,KACjC,MACSA,EAAY,MAAQyB,IACzBzB,EAAY,MAAQwB,EACtBV,EAAW,MAAQd,EAAY,MAAQ,EAAIwB,EAEvCxB,EAAY,OAAS,EACvBc,EAAW,MAAQd,EAAY,MAAQ,EAEvCc,EAAW,MAAQ,EAI3B,CAEO,MAAA,CACL,WAAAA,EACA,WAAAC,CAAA,CAEJ,CACA,KAAM,CAAE,WAAAD,EAAY,WAAAC,CAAW,EAAIF,EAAiB,EAEvC,OAAAe,EAAA,CACX,YAAA5B,EACA,SAAAU,CAAA,CACD"}