@davincihealthcare/elty-design-system-vue 1.72.0 → 1.72.1

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

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

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

@@ -1 +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"}
+{"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"}

package/dist/table/ElServerSideTablePagination.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElServerSideTablePagination.vue.esm2.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":"kiDAWA,MAAMA,EAAQC,EAMRC,EAAcC,EAAI,CAAC,EAEnBC,EAAOC,EAIPC,EAAaC,EAAS,IAAM,KAAK,KAAKP,EAAM,eAAiBA,EAAM,WAAW,CAAC,EAE/EQ,EAAmBD,EAAS,IAAML,EAAY,OAAS,CAAC,EACxDO,EAAmBF,EAAS,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,EAAI,CAAC,EAClBc,EAAaV,EAAS,IAAMW,EAAMZ,EAAW,KAAK,EAAE,MAAMU,EAAW,MAAOA,EAAW,MAAQhB,EAAM,eAAe,CAAC,EAE3HmB,EACE,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"}
+{"version":3,"file":"ElServerSideTablePagination.vue.esm2.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":"kiDAWA,MAAMA,EAAQC,EAMRC,EAAcC,EAAI,CAAC,EAEnBC,EAAOC,EAIPC,EAAaC,EAAS,IAAM,KAAK,KAAKP,EAAM,eAAiBA,EAAM,WAAW,CAAC,EAE/EQ,EAAmBD,EAAS,IAAML,EAAY,OAAS,CAAC,EACxDO,EAAmBF,EAAS,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,EAAI,CAAC,EAClBc,EAAaV,EAAS,IAAMW,EAAMZ,EAAW,KAAK,EAAE,MAAMU,EAAW,MAAOA,EAAW,MAAQhB,EAAM,eAAe,CAAC,EAE3HmB,EACE,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n  title: string;\n  filter?:\n    | {\n        type: FilterType;\n        placeholder?: string;\n      }\n    | { type: 'RESET_FILTERS_BUTTON' };\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport interface TableProps {\n  columns: TableColumn[];\n  data: DataRow[];\n  tableId?: number | string; // needed to understand when the table changes cols and data\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  initialRows?: number;\n  loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  tableId: 0,\n  sortByCol: 0,\n  initialRows: 15,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  onMounted(() => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const sortData = (data: DataRow[]) => {\n    if (data.length > 0) {\n      const colIndex = sortStatus.value.currentlySortColIndex;\n      const asc = sortStatus.value.arrows[colIndex];\n\n      return data.sort((a, b) => {\n        const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n        const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n        return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n      });\n    }\n    return data;\n  };\n\n  const toggleSortArrow = (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n  };\n\n  return {\n    sortStatus,\n    sortData,\n    toggleSortArrow,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<\n    {\n      textSearch: string;\n      dateFrom: number;\n    }[]\n  >([]);\n\n  onMounted(() => {\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      filterStatus.value.splice(i, 1, {\n        textSearch: '',\n        dateFrom: 0,\n      });\n    }\n  });\n\n  watch(\n    () => props.tableId,\n    () => resetFilter(),\n  );\n\n  const filteredData = computed((): typeof props.data => {\n    let data = props.data.slice();\n\n    if (filterStatus.value.length > 0 && data.length > 0) {\n      for (let i = 0; i < props.columns.length; i++) {\n        const colToFilter = props.columns[i];\n        const currentFilter = filterStatus.value[i];\n\n        if (colToFilter.filter?.type === 'FREE_SEARCH') {\n          if (currentFilter.textSearch) {\n            const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n            data = data.filter(d => {\n              const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n              return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n            });\n          }\n        } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n          if (currentFilter.textSearch) {\n            data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n          }\n        } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n          if (currentFilter.dateFrom > 0) {\n            data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n          }\n        }\n      }\n\n      if (sortStatus.value.currentlySortColIndex > -1) {\n        return sortData(data);\n      }\n    }\n    return data;\n  });\n\n  const resetFilter = () => {\n    filterStatus.value.forEach(f => {\n      f.textSearch = '';\n      f.dateFrom = 0;\n    });\n  };\n\n  const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n    const mainTextValues = props.data\n      .filter(d => {\n        const currentCell = d.cells[colIndex];\n        return getCellText(currentCell);\n      })\n      .map(d => getCellText(d.cells[colIndex]) || '');\n    return [...new Set(mainTextValues)].map(v => ({\n      value: v,\n      label: v,\n    }));\n  };\n  return {\n    filterStatus,\n    filteredData,\n    resetFilter,\n    findFilterMultiValuesOptions,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof props.data>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentTabDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :trailing-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"findFilterMultiValuesOptions(index)\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"props.loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentTabDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <TablePagination\n      v-model:current-tab-rows=\"currentTabDataRows\"\n      :rows=\"filteredData\"\n      :rows-per-page=\"props.initialRows\"\n      :hide-footer=\"props.noFooter\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
+{"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n  title: string;\n  filter?:\n    | {\n        type: FilterType;\n        placeholder?: string;\n      }\n    | { type: 'RESET_FILTERS_BUTTON' };\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport interface TableProps {\n  columns: TableColumn[];\n  data: DataRow[];\n  tableId?: number | string; // needed to understand when the table changes cols and data\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  initialRows?: number;\n  loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  tableId: 0,\n  sortByCol: 0,\n  initialRows: 15,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  onMounted(() => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const sortData = (data: DataRow[]) => {\n    if (data.length > 0) {\n      const colIndex = sortStatus.value.currentlySortColIndex;\n      const asc = sortStatus.value.arrows[colIndex];\n\n      return data.sort((a, b) => {\n        const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n        const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n        return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n      });\n    }\n    return data;\n  };\n\n  const toggleSortArrow = (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n  };\n\n  return {\n    sortStatus,\n    sortData,\n    toggleSortArrow,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<\n    {\n      textSearch: string;\n      dateFrom: number;\n    }[]\n  >([]);\n\n  onMounted(() => {\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      filterStatus.value.splice(i, 1, {\n        textSearch: '',\n        dateFrom: 0,\n      });\n    }\n  });\n\n  watch(\n    () => props.tableId,\n    () => resetFilter(),\n  );\n\n  const filteredData = computed((): typeof props.data => {\n    let data = props.data.slice();\n\n    if (filterStatus.value.length > 0 && data.length > 0) {\n      for (let i = 0; i < props.columns.length; i++) {\n        const colToFilter = props.columns[i];\n        const currentFilter = filterStatus.value[i];\n\n        if (colToFilter.filter?.type === 'FREE_SEARCH') {\n          if (currentFilter.textSearch) {\n            const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n            data = data.filter(d => {\n              const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n              return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n            });\n          }\n        } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n          if (currentFilter.textSearch) {\n            data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n          }\n        } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n          if (currentFilter.dateFrom > 0) {\n            data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n          }\n        }\n      }\n\n      if (sortStatus.value.currentlySortColIndex > -1) {\n        return sortData(data);\n      }\n    }\n    return data;\n  });\n\n  const resetFilter = () => {\n    filterStatus.value.forEach(f => {\n      f.textSearch = '';\n      f.dateFrom = 0;\n    });\n  };\n\n  const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n    const mainTextValues = props.data\n      .filter(d => {\n        const currentCell = d.cells[colIndex];\n        return getCellText(currentCell);\n      })\n      .map(d => getCellText(d.cells[colIndex]) || '');\n    return [...new Set(mainTextValues)].map(v => ({\n      value: v,\n      label: v,\n    }));\n  };\n  return {\n    filterStatus,\n    filteredData,\n    resetFilter,\n    findFilterMultiValuesOptions,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof props.data>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentTabDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :trailing-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"findFilterMultiValuesOptions(index)\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"props.loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentTabDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <TablePagination\n      v-model:current-tab-rows=\"currentTabDataRows\"\n      :rows=\"filteredData\"\n      :rows-per-page=\"props.initialRows\"\n      :hide-footer=\"props.noFooter\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"wyDAyCA,MAAMA,EAAQC,EAQRC,EAAOC,EAIPC,EAAW,GAEXC,EAAqBC,EAAAA,IAAeN,EAAM,IAAI,EAEpD,SAASO,GAAa,CACpB,MAAMC,EAAaF,EAAAA,IAGhB,CACD,sBAAuBN,EAAM,UAAY,GAAKA,EAAM,UAAY,GAChE,OAAQ,CAAC,CAAA,CACV,EAEDS,OAAAA,EAAAA,UAAU,IAAM,CACdD,EAAW,MAAM,OAAS,IAAI,MAAMJ,CAAQ,EACxCJ,EAAM,UAAY,KACpBQ,EAAW,MAAM,OAAOR,EAAM,SAAS,EAAIA,EAAM,aACnD,CACD,EAqBM,CACL,WAAAQ,EACA,SArBgBE,GAAoB,CAChC,GAAAA,EAAK,OAAS,EAAG,CACb,MAAAC,EAAWH,EAAW,MAAM,sBAC5BI,EAAMJ,EAAW,MAAM,OAAOG,CAAQ,EAE5C,OAAOD,EAAK,KAAK,CAACG,EAAGC,IAAM,CACzB,MAAMC,EAAaC,EAAAA,kCAAkCH,EAAE,MAAMF,CAAQ,CAAC,EAChEM,EAAaD,EAAAA,kCAAkCF,EAAE,MAAMH,CAAQ,CAAC,EACtE,OAAOC,EAAMG,EAAW,cAAcE,CAAU,EAAIA,EAAW,cAAcF,CAAU,CAAA,CACxF,CACH,CACO,OAAAL,CAAA,EAWP,gBARuBC,GAAqB,CAC5CH,EAAW,MAAM,sBAAwBG,EACzCH,EAAW,MAAM,OAAO,OAAOG,EAAU,EAAG,CAACH,EAAW,MAAM,OAAOG,CAAQ,CAAC,CAAA,CAM9E,CAEJ,CAEA,SAASO,GAAa,CACdC,MAAAA,EAAeb,MAKnB,CAAA,CAAE,EAEJG,EAAAA,UAAU,IAAM,CACdU,EAAa,MAAQ,IAAI,MAAMf,CAAQ,EACvC,QAASgB,EAAI,EAAGA,EAAIhB,EAAUgB,IAC5BD,EAAa,MAAM,OAAOC,EAAG,EAAG,CAC9B,WAAY,GACZ,SAAU,CAAA,CACX,CACH,CACD,EAEDC,EAAA,MACE,IAAMrB,EAAM,QACZ,IAAMsB,EAAY,CAAA,EAGdC,MAAAA,EAAeC,EAAAA,SAAS,IAAyB,WACjD,IAAAd,EAAOV,EAAM,KAAK,MAAM,EAE5B,GAAImB,EAAa,MAAM,OAAS,GAAKT,EAAK,OAAS,EAAG,CACpD,QAASU,EAAI,EAAGA,EAAIpB,EAAM,QAAQ,OAAQoB,IAAK,CACvC,MAAAK,EAAczB,EAAM,QAAQoB,CAAC,EAC7BM,EAAgBP,EAAa,MAAMC,CAAC,EAEtC,KAAAO,EAAAF,EAAY,SAAZ,YAAAE,EAAoB,QAAS,eAC/B,GAAID,EAAc,WAAY,CACtB,MAAAE,EAAeF,EAAc,WAAW,OAAO,YAAY,EAAE,MAAM,GAAG,EACrEhB,EAAAA,EAAK,OAAYmB,GAAA,CACtB,MAAMC,EAAYd,EAAAA,kCAAkCa,EAAE,MAAMT,CAAC,CAAC,EAAE,cAChE,OAAOQ,EAAa,KAAKG,GAAeD,GAAaA,EAAU,SAASC,CAAW,CAAC,CAAA,CACrF,CACH,QACSC,EAAAP,EAAY,SAAZ,YAAAO,EAAoB,QAAS,cAClCN,EAAc,aACThB,EAAAA,EAAK,OAAOmB,GAAKH,EAAc,aAAeV,EAAAA,kCAAkCa,EAAE,MAAMT,CAAC,CAAC,CAAC,KAE3Fa,EAAAR,EAAY,SAAZ,YAAAQ,EAAoB,QAAS,cAClCP,EAAc,SAAW,IAC3BhB,EAAOA,EAAK,OAAYmB,GAAA,SAASb,EAAkC,kCAAAa,EAAE,MAAMT,CAAC,CAAC,CAAC,GAAKM,EAAc,QAAQ,EAG/G,CAEI,GAAAlB,EAAW,MAAM,sBAAwB,GAC3C,OAAO0B,EAASxB,CAAI,CAExB,CACO,OAAAA,CAAA,CACR,EAEKY,EAAc,IAAM,CACxBH,EAAa,MAAM,QAAagB,GAAA,CAC9BA,EAAE,WAAa,GACfA,EAAE,SAAW,CAAA,CACd,CAAA,EAeI,MAAA,CACL,aAAAhB,EACA,aAAAI,EACA,YAAAD,EACA,6BAhBoCX,GAA8E,CAClH,MAAMyB,EAAiBpC,EAAM,KAC1B,OAAY6B,GAAA,CACL,MAAAQ,EAAcR,EAAE,MAAMlB,CAAQ,EACpC,OAAO2B,EAAAA,YAAYD,CAAW,CAAA,CAC/B,EACA,IAASR,GAAAS,EAAA,YAAYT,EAAE,MAAMlB,CAAQ,CAAC,GAAK,EAAE,EACzC,MAAA,CAAC,GAAG,IAAI,IAAIyB,CAAc,CAAC,EAAE,IAAUG,IAAA,CAC5C,MAAOA,EACP,MAAOA,CACP,EAAA,CAAA,CAMF,CAEJ,CAEA,SAASC,GAAmB,CACpBC,MAAAA,EAAenC,MAAuB,CAAA,CAAE,EAExCoC,EAAmB,IAAM,CACxBxC,EAAA,gBAAiBuC,EAAa,KAAK,CAAA,EAGpCE,EAAgBC,GAAoB,CACxCC,EAAWD,EAAK,IAASE,GAAAA,EAAE,EAAE,CAAC,CAAA,EAG1BC,EAAiBC,GAAkB,CACvC,MAAMC,EAAQR,EAAa,MAAM,UAAeK,GAAAA,EAAE,KAAOE,CAAK,EAC9DP,EAAa,MAAM,OAAOQ,EAAO,CAAC,EACjBP,GAAA,EAIbG,EAAa,MAAOK,GAAsB,CAC1ClD,EAAM,oBAAsB,WAC9ByC,EAAa,MAAQ,GACrB,MAAMU,EAAS,SAAA,GAEX,MAAAC,EAAe/C,EAAmB,MAAM,UAAY6C,EAAQ,SAASJ,EAAE,EAAE,CAAC,EAC5E9C,EAAM,oBAAsB,WAC9BoD,EAAa,OAAS,KAAK,IAAI,EAAGA,EAAa,MAAM,GAGvD,UAAWC,KAAOD,EACXX,EAAa,MAAM,QAAUK,EAAE,KAAOO,EAAI,EAAE,GAC/CZ,EAAa,MAAM,KAAKY,CAAG,EAIdX,GAAA,EAGbY,EAAkB,IAAM,CAC5Bb,EAAa,MAAQ,GACJC,GAAA,EAGba,EAAc,IAAiBlD,EAAmB,MAClDmD,EAAkB,IAAiBf,EAAa,MAEhDgB,EAAkBjC,EAAAA,SAAS,IACxBiB,EAAa,MAAM,OAAS,GAAKA,EAAa,MAAM,SAAWpC,EAAmB,MAAM,MAChG,EAEM,MAAA,CACL,aAAAoC,EACA,aAAAE,EACA,cAAAI,EACA,WAAAF,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,EACA,gBAAAC,CAAA,CAEJ,CAEM,KAAA,CAAE,aAAAhB,EAAc,aAAAE,EAAc,cAAAI,EAAe,WAAAF,EAAY,gBAAAS,EAAiB,YAAAC,EAAa,gBAAAC,EAAiB,gBAAAC,CAAgB,EAC5HjB,EAAiB,EACb,CAAE,aAAArB,EAAc,aAAAI,EAAc,YAAAD,EAAa,6BAAAoC,CAAA,EAAiCxC,IAC5E,CAAE,WAAAV,EAAY,SAAA0B,EAAU,gBAAAyB,GAAoBpD,EAAW,EAEhD,OAAAqD,EAAA,CACX,aAAArC,EACA,WAAAsB,EACA,gBAAAS,EACA,YAAAC,EACA,gBAAAC,CAAA,CACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"ElTable.vue.esm2.js","sources":["../../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n  title: string;\n  filter?:\n    | {\n        type: FilterType;\n        placeholder?: string;\n      }\n    | { type: 'RESET_FILTERS_BUTTON' };\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport interface TableProps {\n  columns: TableColumn[];\n  data: DataRow[];\n  tableId?: number | string; // needed to understand when the table changes cols and data\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  initialRows?: number;\n  loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  tableId: 0,\n  sortByCol: 0,\n  initialRows: 15,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  onMounted(() => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const sortData = (data: DataRow[]) => {\n    if (data.length > 0) {\n      const colIndex = sortStatus.value.currentlySortColIndex;\n      const asc = sortStatus.value.arrows[colIndex];\n\n      return data.sort((a, b) => {\n        const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n        const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n        return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n      });\n    }\n    return data;\n  };\n\n  const toggleSortArrow = (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n  };\n\n  return {\n    sortStatus,\n    sortData,\n    toggleSortArrow,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<\n    {\n      textSearch: string;\n      dateFrom: number;\n    }[]\n  >([]);\n\n  onMounted(() => {\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      filterStatus.value.splice(i, 1, {\n        textSearch: '',\n        dateFrom: 0,\n      });\n    }\n  });\n\n  watch(\n    () => props.tableId,\n    () => resetFilter(),\n  );\n\n  const filteredData = computed((): typeof props.data => {\n    let data = props.data.slice();\n\n    if (filterStatus.value.length > 0 && data.length > 0) {\n      for (let i = 0; i < props.columns.length; i++) {\n        const colToFilter = props.columns[i];\n        const currentFilter = filterStatus.value[i];\n\n        if (colToFilter.filter?.type === 'FREE_SEARCH') {\n          if (currentFilter.textSearch) {\n            const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n            data = data.filter(d => {\n              const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n              return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n            });\n          }\n        } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n          if (currentFilter.textSearch) {\n            data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n          }\n        } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n          if (currentFilter.dateFrom > 0) {\n            data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n          }\n        }\n      }\n\n      if (sortStatus.value.currentlySortColIndex > -1) {\n        return sortData(data);\n      }\n    }\n    return data;\n  });\n\n  const resetFilter = () => {\n    filterStatus.value.forEach(f => {\n      f.textSearch = '';\n      f.dateFrom = 0;\n    });\n  };\n\n  const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n    const mainTextValues = props.data\n      .filter(d => {\n        const currentCell = d.cells[colIndex];\n        return getCellText(currentCell);\n      })\n      .map(d => getCellText(d.cells[colIndex]) || '');\n    return [...new Set(mainTextValues)].map(v => ({\n      value: v,\n      label: v,\n    }));\n  };\n  return {\n    filterStatus,\n    filteredData,\n    resetFilter,\n    findFilterMultiValuesOptions,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof props.data>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentTabDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :trailing-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"findFilterMultiValuesOptions(index)\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"props.loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentTabDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <TablePagination\n      v-model:current-tab-rows=\"currentTabDataRows\"\n      :rows=\"filteredData\"\n      :rows-per-page=\"props.initialRows\"\n      :hide-footer=\"props.noFooter\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
+{"version":3,"file":"ElTable.vue.esm2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n  title: string;\n  filter?:\n    | {\n        type: FilterType;\n        placeholder?: string;\n      }\n    | { type: 'RESET_FILTERS_BUTTON' };\n  alignRight?: boolean;\n  noSort?: boolean;\n}\n\nexport interface TableProps {\n  columns: TableColumn[];\n  data: DataRow[];\n  tableId?: number | string; // needed to understand when the table changes cols and data\n  sortByCol?: number; // initial sort by column\n  sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n  noFilters?: boolean;\n  noFooter?: boolean;\n  rowsSelectionMode?: 'single' | 'multiple';\n  rowsSelectionDisabled?: boolean;\n  initialRows?: number;\n  loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n  tableId: 0,\n  sortByCol: 0,\n  initialRows: 15,\n  sortByColAsc: false,\n  rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n  (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n  const sortStatus = ref<{\n    currentlySortColIndex: number;\n    arrows: boolean[];\n  }>({\n    currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n    arrows: [],\n  });\n\n  onMounted(() => {\n    sortStatus.value.arrows = new Array(MAX_COLS);\n    if (props.sortByCol > -1) {\n      sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n    }\n  });\n\n  const sortData = (data: DataRow[]) => {\n    if (data.length > 0) {\n      const colIndex = sortStatus.value.currentlySortColIndex;\n      const asc = sortStatus.value.arrows[colIndex];\n\n      return data.sort((a, b) => {\n        const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n        const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n        return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n      });\n    }\n    return data;\n  };\n\n  const toggleSortArrow = (colIndex: number) => {\n    sortStatus.value.currentlySortColIndex = colIndex;\n    sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n  };\n\n  return {\n    sortStatus,\n    sortData,\n    toggleSortArrow,\n  };\n}\n\nfunction useFilters() {\n  const filterStatus = ref<\n    {\n      textSearch: string;\n      dateFrom: number;\n    }[]\n  >([]);\n\n  onMounted(() => {\n    filterStatus.value = new Array(MAX_COLS);\n    for (let i = 0; i < MAX_COLS; i++) {\n      filterStatus.value.splice(i, 1, {\n        textSearch: '',\n        dateFrom: 0,\n      });\n    }\n  });\n\n  watch(\n    () => props.tableId,\n    () => resetFilter(),\n  );\n\n  const filteredData = computed((): typeof props.data => {\n    let data = props.data.slice();\n\n    if (filterStatus.value.length > 0 && data.length > 0) {\n      for (let i = 0; i < props.columns.length; i++) {\n        const colToFilter = props.columns[i];\n        const currentFilter = filterStatus.value[i];\n\n        if (colToFilter.filter?.type === 'FREE_SEARCH') {\n          if (currentFilter.textSearch) {\n            const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n            data = data.filter(d => {\n              const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n              return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n            });\n          }\n        } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n          if (currentFilter.textSearch) {\n            data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n          }\n        } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n          if (currentFilter.dateFrom > 0) {\n            data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n          }\n        }\n      }\n\n      if (sortStatus.value.currentlySortColIndex > -1) {\n        return sortData(data);\n      }\n    }\n    return data;\n  });\n\n  const resetFilter = () => {\n    filterStatus.value.forEach(f => {\n      f.textSearch = '';\n      f.dateFrom = 0;\n    });\n  };\n\n  const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n    const mainTextValues = props.data\n      .filter(d => {\n        const currentCell = d.cells[colIndex];\n        return getCellText(currentCell);\n      })\n      .map(d => getCellText(d.cells[colIndex]) || '');\n    return [...new Set(mainTextValues)].map(v => ({\n      value: v,\n      label: v,\n    }));\n  };\n  return {\n    filterStatus,\n    filteredData,\n    resetFilter,\n    findFilterMultiValuesOptions,\n  };\n}\n\nfunction useRowsSelection() {\n  const selectedRows = ref<typeof props.data>([]);\n\n  const emitRowsSelected = () => {\n    emit('rows-selected', selectedRows.value);\n  };\n\n  const rowsSelected = (rows: DataRow[]) => {\n    selectRows(rows.map(r => r.id));\n  };\n\n  const rowUnselected = (rowId: string) => {\n    const index = selectedRows.value.findIndex(r => r.id === rowId);\n    selectedRows.value.splice(index, 1);\n    emitRowsSelected();\n  };\n\n  // select the rows with the given ids, possibly in addition to the rows that are already selected\n  const selectRows = async (rowsIds: string[]) => {\n    if (props.rowsSelectionMode === 'single') {\n      selectedRows.value = [];\n      await nextTick();\n    }\n    const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n    if (props.rowsSelectionMode === 'single') {\n      rowsToSelect.length = Math.min(1, rowsToSelect.length);\n    }\n\n    for (const row of rowsToSelect) {\n      if (!selectedRows.value.some(r => r.id === row.id)) {\n        selectedRows.value.push(row);\n      }\n    }\n\n    emitRowsSelected();\n  };\n\n  const unselectAllRows = () => {\n    selectedRows.value = [];\n    emitRowsSelected();\n  };\n\n  const getDataRows = (): DataRow[] => currentTabDataRows.value;\n  const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n  const allRowsSelected = computed(() => {\n    return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n  });\n\n  return {\n    selectedRows,\n    rowsSelected,\n    rowUnselected,\n    selectRows,\n    unselectAllRows,\n    getDataRows,\n    getSelectedRows,\n    allRowsSelected,\n  };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n  useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n  filteredData,\n  selectRows,\n  unselectAllRows,\n  getDataRows,\n  getSelectedRows,\n});\n</script>\n\n<template>\n  <div class=\"flex flex-col\">\n    <div class=\"overflow-x-auto\">\n      <div class=\"inline-block min-w-full bg-white align-middle\">\n        <table class=\"min-w-full\">\n          <thead>\n            <tr class=\"bg-neutral-surface-raised font-semibold\">\n              <th\n                v-if=\"rowsSelectionMode\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n                :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n              >\n                <ElInputCheckbox\n                  v-if=\"rowsSelectionMode === 'multiple'\"\n                  :model-value=\"allRowsSelected\"\n                  :disabled=\"rowsSelectionDisabled\"\n                  size=\"xxs\"\n                  @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n                />\n                <div v-else class=\"w-7\" />\n              </th>\n              <th\n                v-for=\"(col, index) in props.columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n                :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n                :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n                @click=\"!col.noSort && toggleSortArrow(index)\"\n              >\n                {{ col.title }}\n\n                <!-- //////////////////// SORT //////////////////////////// -->\n                <svg\n                  v-if=\"!col.noSort\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"ml-1 inline-flex h-3 w-3\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    v-if=\"sortStatus.arrows[index]\"\n                    d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n                  />\n                  <path\n                    v-else\n                    d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n                    title=\"Ordine Decrescente\"\n                  />\n                </svg>\n              </th>\n            </tr>\n            <!-- ///////////////////// FILTERS ///////////////////////// -->\n            <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n              <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n              <th\n                v-for=\"(col, index) in columns\"\n                :key=\"index\"\n                scope=\"col\"\n                class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n              >\n                <!-- FILTER: TEXT SEARCH -->\n                <ElInputText\n                  v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n                  :hidden-error-message=\"true\"\n                  :trailing-icon=\"{\n                    name: 'MagnifyingGlassIcon',\n                  }\"\n                />\n\n                <!-- FILTER: DATE RANGE -->\n                <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n                  <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n                </div>\n\n                <!-- FILTER: MULTIPLE VALUES -->\n                <ElInputSelect\n                  v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n                  v-model=\"filterStatus[index].textSearch\"\n                  class=\"flex flex-col\"\n                  type=\"autocomplete\"\n                  :options=\"findFilterMultiValuesOptions(index)\"\n                  :hidden-error-message=\"true\"\n                />\n\n                <!-- TODO: change with new button when it'll be available in version 2 -->\n                <!-- FILTER: RESET -->\n\n                <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n                  <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n                </div>\n              </th>\n            </tr>\n          </thead>\n          <CustomTransition name=\"fade\">\n            <tbody v-if=\"props.loading\" key=\"loading\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\">\n                  <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n              <tr\n                v-for=\"row in currentTabDataRows\"\n                :key=\"row.id\"\n                class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n                :class=\"{\n                  'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n                }\"\n                data-cy=\"table-row\"\n              >\n                <!-- ROWS SELECTION -->\n                <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n                  <ElInputCheckbox\n                    :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n                    :disabled=\"rowsSelectionDisabled\"\n                    size=\"xxs\"\n                    @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n                  />\n                </td>\n\n                <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n                <td\n                  v-for=\"(cell, i) in row.cells\"\n                  :key=\"i\"\n                  class=\"max-w-sm px-2.5 py-2.5\"\n                  :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n                >\n                  <!-- TODO data-cy should stay inside ElTableCell -->\n                  <ElTableCell :cell=\"cell\" />\n                </td>\n              </tr>\n            </tbody>\n            <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n              <tr>\n                <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n              </tr>\n            </tbody>\n          </CustomTransition>\n        </table>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <TablePagination\n      v-model:current-tab-rows=\"currentTabDataRows\"\n      :rows=\"filteredData\"\n      :rows-per-page=\"props.initialRows\"\n      :hide-footer=\"props.noFooter\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}

package/dist/table/ElTableCell.vue.cjs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElTableCell.vue.cjs2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n  sortableAndFilterableValue?: string;\n  type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n  type?: 'default';\n  mainIcon?: ElIconProps;\n  mainIconTooltip?: string;\n  mainText: string;\n  mainTextStyle?: ElTextCellStyle;\n  mainTextColor?: ElTextCellColor;\n  subIcon?: ElIconProps;\n  subIconTooltip?: string;\n  subText?: string;\n  avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n  clickAction?: (payload?: PointerEvent) => void;\n  longText?: boolean;\n  truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n  type?: 'tag';\n  tag: InstanceType<typeof ElTag>['$props'];\n  subText?: string;\n  truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n  type?: 'action';\n  buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n  iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n  dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n  type?: 'input';\n  value?: string;\n  onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n  if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  if (isCellTypeInput(cell)) return cell.value || '';\n  return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  cell: DataCell;\n}>();\n</script>\n\n<template>\n  <!-- type DEFAULT -->\n  <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n    <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n          <ElIcon\n            :name=\"cell.mainIcon.name\"\n            :solid=\"cell.mainIcon.solid\"\n            class=\"w-4 h-4 shrink-0\"\n            :class=\"[\n              cell.mainTextColor && cell.mainTextStyle !== 'underline'\n                ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n                : 'text-neutral-darker',\n              cell.mainIconTooltip ? 'cursor-pointer' : '',\n            ]\"\n          />\n        </ElTooltip>\n        <div class=\"overflow-hidden\">\n          <ElTextCell\n            :label=\"cell.mainText\"\n            :style=\"cell.mainTextStyle\"\n            :color-text=\"cell.mainTextColor\"\n            @click=\"\n              () => {\n                if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n              }\n            \"\n          />\n        </div>\n      </div>\n      <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n          <div class=\"flex gap-2 items-center\">\n            <ElIcon\n              :name=\"cell.subIcon.name\"\n              :solid=\"cell.subIcon.solid\"\n              class=\"w-4 h-4 text-neutral-lighter shrink-0\"\n              :class=\"cell.subIconTooltip ? 'cursor-pointer' : ''\"\n            />\n          </div>\n        </ElTooltip>\n        <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n          {{ cell.subText }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- type TAG -->\n  <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n        <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n          {{ cell.tag.text }}\n        </ElTag>\n      </div>\n\n      <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n        {{ cell.subText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- ACTION -->\n  <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n    <ElButton v-for=\"(button, index, prevI) in cell.buttons\" :key=\"prevI || 0 + index\" v-bind=\"button\" />\n    <ElIconButton v-for=\"(iconButton, index, prevI) in cell.iconButtons\" :key=\"prevI || 0 + index\" v-bind=\"iconButton\" />\n    <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n      <template #anchor=\"{ toggle }\">\n        <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n      </template>\n    </ElDropdown>\n  </div>\n\n  <!-- INPUT -->\n  <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n    <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n  </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"8nCAYaA,EAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,EAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,EAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}
+{"version":3,"file":"ElTableCell.vue.cjs2.js","sources":["../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n  sortableAndFilterableValue?: string;\n  type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n  type?: 'default';\n  mainIcon?: ElIconProps;\n  mainIconTooltip?: string;\n  mainText: string;\n  mainTextStyle?: ElTextCellStyle;\n  mainTextColor?: ElTextCellColor;\n  subIcon?: ElIconProps;\n  subIconTooltip?: string;\n  subText?: string;\n  avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n  clickAction?: (payload?: PointerEvent) => void;\n  longText?: boolean;\n  truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n  type?: 'tag';\n  tag: InstanceType<typeof ElTag>['$props'];\n  subText?: string;\n  truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n  type?: 'action';\n  buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n  iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n  dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n  type?: 'input';\n  value?: string;\n  onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n  if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  if (isCellTypeInput(cell)) return cell.value || '';\n  return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  cell: DataCell;\n}>();\n</script>\n\n<template>\n  <!-- type DEFAULT -->\n  <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n    <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n          <ElIcon\n            :name=\"cell.mainIcon.name\"\n            :solid=\"cell.mainIcon.solid\"\n            class=\"w-4 h-4 shrink-0\"\n            :class=\"[\n              cell.mainTextColor && cell.mainTextStyle !== 'underline'\n                ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n                : 'text-neutral-darker',\n              cell.mainIconTooltip ? 'cursor-pointer' : '',\n            ]\"\n          />\n        </ElTooltip>\n        <div class=\"overflow-hidden\">\n          <ElTextCell\n            :label=\"cell.mainText\"\n            :style=\"cell.mainTextStyle\"\n            :color-text=\"cell.mainTextColor\"\n            @click=\"\n              () => {\n                if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n              }\n            \"\n          />\n        </div>\n      </div>\n      <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n          <div class=\"flex gap-2 items-center\">\n            <ElIcon\n              :name=\"cell.subIcon.name\"\n              :solid=\"cell.subIcon.solid\"\n              class=\"w-4 h-4 text-neutral-lighter shrink-0\"\n              :class=\"cell.subIconTooltip ? 'cursor-pointer' : ''\"\n            />\n          </div>\n        </ElTooltip>\n        <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n          {{ cell.subText }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- type TAG -->\n  <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n        <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n          {{ cell.tag.text }}\n        </ElTag>\n      </div>\n\n      <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n        {{ cell.subText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- ACTION -->\n  <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n    <ElButton v-for=\"(button, index, prevI) in cell.buttons\" :key=\"prevI || 0 + index\" v-bind=\"button\" />\n    <ElIconButton v-for=\"(iconButton, index, prevI) in cell.iconButtons\" :key=\"prevI || 0 + index\" v-bind=\"iconButton\" />\n    <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n      <template #anchor=\"{ toggle }\">\n        <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n      </template>\n    </ElDropdown>\n  </div>\n\n  <!-- INPUT -->\n  <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n    <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n  </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"8nCAYaA,EAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,EAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,EAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}

package/dist/table/ElTableCell.vue.esm2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElTableCell.vue.esm2.js","sources":["../../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n  sortableAndFilterableValue?: string;\n  type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n  type?: 'default';\n  mainIcon?: ElIconProps;\n  mainIconTooltip?: string;\n  mainText: string;\n  mainTextStyle?: ElTextCellStyle;\n  mainTextColor?: ElTextCellColor;\n  subIcon?: ElIconProps;\n  subIconTooltip?: string;\n  subText?: string;\n  avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n  clickAction?: (payload?: PointerEvent) => void;\n  longText?: boolean;\n  truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n  type?: 'tag';\n  tag: InstanceType<typeof ElTag>['$props'];\n  subText?: string;\n  truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n  type?: 'action';\n  buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n  iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n  dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n  type?: 'input';\n  value?: string;\n  onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n  if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  if (isCellTypeInput(cell)) return cell.value || '';\n  return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  cell: DataCell;\n}>();\n</script>\n\n<template>\n  <!-- type DEFAULT -->\n  <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n    <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n          <ElIcon\n            :name=\"cell.mainIcon.name\"\n            :solid=\"cell.mainIcon.solid\"\n            class=\"w-4 h-4 shrink-0\"\n            :class=\"[\n              cell.mainTextColor && cell.mainTextStyle !== 'underline'\n                ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n                : 'text-neutral-darker',\n              cell.mainIconTooltip ? 'cursor-pointer' : '',\n            ]\"\n          />\n        </ElTooltip>\n        <div class=\"overflow-hidden\">\n          <ElTextCell\n            :label=\"cell.mainText\"\n            :style=\"cell.mainTextStyle\"\n            :color-text=\"cell.mainTextColor\"\n            @click=\"\n              () => {\n                if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n              }\n            \"\n          />\n        </div>\n      </div>\n      <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n          <div class=\"flex gap-2 items-center\">\n            <ElIcon\n              :name=\"cell.subIcon.name\"\n              :solid=\"cell.subIcon.solid\"\n              class=\"w-4 h-4 text-neutral-lighter shrink-0\"\n              :class=\"cell.subIconTooltip ? 'cursor-pointer' : ''\"\n            />\n          </div>\n        </ElTooltip>\n        <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n          {{ cell.subText }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- type TAG -->\n  <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n        <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n          {{ cell.tag.text }}\n        </ElTag>\n      </div>\n\n      <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n        {{ cell.subText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- ACTION -->\n  <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n    <ElButton v-for=\"(button, index, prevI) in cell.buttons\" :key=\"prevI || 0 + index\" v-bind=\"button\" />\n    <ElIconButton v-for=\"(iconButton, index, prevI) in cell.iconButtons\" :key=\"prevI || 0 + index\" v-bind=\"iconButton\" />\n    <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n      <template #anchor=\"{ toggle }\">\n        <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n      </template>\n    </ElDropdown>\n  </div>\n\n  <!-- INPUT -->\n  <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n    <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n  </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"84CAYaA,GAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,GAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,GAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}
+{"version":3,"file":"ElTableCell.vue.esm2.js","sources":["../../src/table/ElTableCell.vue"],"sourcesContent":["<script lang=\"ts\">\nimport ElTag from '@/ElTag.vue';\nimport ElButton from '@/ElButton.vue';\nimport ElIconButton from '@/ElIconButton.vue';\nimport ElTextCell, { ElTextCellColor, ElTextCellStyle, getTextColorClass } from '@/ElTextCell.vue';\nimport ElAvatar from '@/ElAvatar.vue';\nimport ElIcon, { ElIconProps } from '@/ElIcon.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport { TextualValueType } from '@/forms/input';\nimport ElDropdown from '@/ElDropdown.vue';\nimport ElTooltip from '@/ElTooltip.vue';\n\nexport const dataCellTypes = ['default', 'tag', 'action', 'input'] as const;\nexport type DataCellType = (typeof dataCellTypes)[number];\n\nexport type DataCell = TagCell | DefaultCell | ActionCell | InputCell;\n\ninterface BasicDataCell {\n  sortableAndFilterableValue?: string;\n  type?: DataCellType;\n}\n\nexport interface DefaultCell extends BasicDataCell {\n  type?: 'default';\n  mainIcon?: ElIconProps;\n  mainIconTooltip?: string;\n  mainText: string;\n  mainTextStyle?: ElTextCellStyle;\n  mainTextColor?: ElTextCellColor;\n  subIcon?: ElIconProps;\n  subIconTooltip?: string;\n  subText?: string;\n  avatar?: Pick<InstanceType<typeof ElAvatar>['$props'], 'picture' | 'label'>;\n  clickAction?: (payload?: PointerEvent) => void;\n  longText?: boolean;\n  truncateSubText?: boolean;\n}\n\nexport interface TagCell extends BasicDataCell {\n  type?: 'tag';\n  tag: InstanceType<typeof ElTag>['$props'];\n  subText?: string;\n  truncateSubText?: boolean;\n}\n\nexport interface ActionCell<ID extends string = string> extends BasicDataCell {\n  type?: 'action';\n  buttons?: (InstanceType<typeof ElButton>['$props'] & { id?: ID })[];\n  iconButtons?: (InstanceType<typeof ElIconButton>['$props'] & { id?: ID })[];\n  dropdown?: InstanceType<typeof ElDropdown>['$props'] & { disabled?: boolean };\n}\n\nexport interface InputCell extends BasicDataCell {\n  type?: 'input';\n  value?: string;\n  onUpdate?: (value: TextualValueType) => void;\n}\n\nconst isCellTypeDefault = (cell: DataCell): cell is DefaultCell => !cell.type || cell.type === 'default';\nconst isCellTypeTag = (cell: DataCell): cell is TagCell => cell.type === 'tag';\nconst isCellTypeAction = (cell: DataCell): cell is ActionCell => cell.type === 'action';\nconst isCellTypeInput = (cell: DataCell): cell is InputCell => cell.type === 'input';\n\nexport const getCellText = (cell: DataCell) => {\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  return null;\n};\n\nexport const getCellSortableAndFilterableValue = (cell: DataCell): string => {\n  if (cell.sortableAndFilterableValue?.length) return cell.sortableAndFilterableValue;\n  if (isCellTypeDefault(cell)) return cell.mainText;\n  if (isCellTypeTag(cell)) return cell.tag.text;\n  if (isCellTypeInput(cell)) return cell.value || '';\n  return '';\n};\n</script>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  cell: DataCell;\n}>();\n</script>\n\n<template>\n  <!-- type DEFAULT -->\n  <div v-if=\"isCellTypeDefault(cell)\" :class=\"['flex h-12 gap-3 items-center text-nowrap', cell.clickAction && 'cursor-pointer']\">\n    <ElAvatar v-if=\"cell.avatar\" size=\"sm\" :picture=\"cell.avatar.picture\" :label=\"cell.avatar.label\" class=\"shrink-0\" />\n\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.mainIcon\" :title=\"cell.mainIconTooltip ?? ''\">\n          <ElIcon\n            :name=\"cell.mainIcon.name\"\n            :solid=\"cell.mainIcon.solid\"\n            class=\"w-4 h-4 shrink-0\"\n            :class=\"[\n              cell.mainTextColor && cell.mainTextStyle !== 'underline'\n                ? getTextColorClass(cell.mainTextColor, cell.mainTextStyle)\n                : 'text-neutral-darker',\n              cell.mainIconTooltip ? 'cursor-pointer' : '',\n            ]\"\n          />\n        </ElTooltip>\n        <div class=\"overflow-hidden\">\n          <ElTextCell\n            :label=\"cell.mainText\"\n            :style=\"cell.mainTextStyle\"\n            :color-text=\"cell.mainTextColor\"\n            @click=\"\n              () => {\n                if (isCellTypeDefault(cell) && cell.clickAction) cell.clickAction();\n              }\n            \"\n          />\n        </div>\n      </div>\n      <div v-if=\"cell.subIcon || cell.subText\" class=\"flex gap-2 items-center\">\n        <ElTooltip v-if=\"cell.subIcon\" :title=\"cell.subIconTooltip ?? ''\">\n          <div class=\"flex gap-2 items-center\">\n            <ElIcon\n              :name=\"cell.subIcon.name\"\n              :solid=\"cell.subIcon.solid\"\n              class=\"w-4 h-4 text-neutral-lighter shrink-0\"\n              :class=\"cell.subIconTooltip ? 'cursor-pointer' : ''\"\n            />\n          </div>\n        </ElTooltip>\n        <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n          {{ cell.subText }}\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- type TAG -->\n  <div v-else-if=\"isCellTypeTag(cell)\" class=\"overflow-y-hidden h-12 flex items-center\">\n    <div class=\"flex flex-col gap-2 grow min-w-8\">\n      <div class=\"text-neutral-darker text-xs inline font-normal text-nowrap\">\n        <ElTag v-bind=\"{ size: 'xs', ...cell.tag }\">\n          {{ cell.tag.text }}\n        </ElTag>\n      </div>\n\n      <div v-if=\"cell.subText\" class=\"text-sm font-normal text-neutral-lighter overflow-hidden text-ellipsis\">\n        {{ cell.subText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- ACTION -->\n  <div v-else-if=\"isCellTypeAction(cell)\" class=\"flex items-center h-12 overflow-y-hidden content-center justify-end gap-2\">\n    <ElButton v-for=\"(button, index, prevI) in cell.buttons\" :key=\"prevI || 0 + index\" v-bind=\"button\" />\n    <ElIconButton v-for=\"(iconButton, index, prevI) in cell.iconButtons\" :key=\"prevI || 0 + index\" v-bind=\"iconButton\" />\n    <ElDropdown v-if=\"cell.dropdown\" v-bind=\"cell.dropdown\" left>\n      <template #anchor=\"{ toggle }\">\n        <ElIconButton :disabled=\"cell.dropdown.disabled\" :icon=\"{ name: 'EllipsisVerticalIcon' }\" @click=\"toggle\" />\n      </template>\n    </ElDropdown>\n  </div>\n\n  <!-- INPUT -->\n  <div v-else-if=\"isCellTypeInput(cell)\" class=\"flex items-center h-12\">\n    <ElInputText class=\"w-full\" :model-value=\"cell.value\" @update:model-value=\"cell.onUpdate?.($event)\" />\n  </div>\n</template>\n"],"names":["dataCellTypes","isCellTypeDefault","cell","isCellTypeTag","isCellTypeAction","isCellTypeInput","getCellText","getCellSortableAndFilterableValue","_a"],"mappings":"84CAYaA,GAAgB,CAAC,UAAW,MAAO,SAAU,OAAO,EA8C3DC,EAAqBC,GAAwC,CAACA,EAAK,MAAQA,EAAK,OAAS,UACzFC,EAAiBD,GAAoCA,EAAK,OAAS,MACnEE,EAAoBF,GAAuCA,EAAK,OAAS,SACzEG,EAAmBH,GAAsCA,EAAK,OAAS,QAEhEI,GAAeJ,GACtBD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KAClC,KAGIK,GAAqCL,GAA2B,OAC3E,OAAIM,EAAAN,EAAK,6BAAL,MAAAM,EAAiC,OAAeN,EAAK,2BACrDD,EAAkBC,CAAI,EAAUA,EAAK,SACrCC,EAAcD,CAAI,EAAUA,EAAK,IAAI,KACrCG,EAAgBH,CAAI,GAAUA,EAAK,OAAS,EAElD"}