@davincihealthcare/elty-design-system-vue 1.72.0 → 1.72.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ElAccordion.vue.cjs2.js.map +1 -1
- package/dist/ElAccordion.vue.esm2.js.map +1 -1
- package/dist/ElActionButton.vue.cjs2.js +1 -1
- package/dist/ElActionButton.vue.cjs2.js.map +1 -1
- package/dist/ElActionButton.vue.esm2.js +1 -1
- package/dist/ElActionButton.vue.esm2.js.map +1 -1
- package/dist/ElAvatar.vue.cjs2.js.map +1 -1
- package/dist/ElAvatar.vue.esm2.js.map +1 -1
- package/dist/ElBadge.vue.cjs2.js.map +1 -1
- package/dist/ElBadge.vue.esm2.js.map +1 -1
- package/dist/ElBubbleChat.vue.cjs2.js +1 -1
- package/dist/ElBubbleChat.vue.cjs2.js.map +1 -1
- package/dist/ElBubbleChat.vue.esm2.js +1 -1
- package/dist/ElBubbleChat.vue.esm2.js.map +1 -1
- package/dist/ElButton.vue.cjs2.js.map +1 -1
- package/dist/ElButton.vue.esm2.js.map +1 -1
- package/dist/ElCalendarCard.vue.cjs2.js.map +1 -1
- package/dist/ElCalendarCard.vue.esm2.js.map +1 -1
- package/dist/ElCalendarCell.vue.cjs2.js +1 -1
- package/dist/ElCalendarCell.vue.cjs2.js.map +1 -1
- package/dist/ElCalendarCell.vue.d.ts +5 -0
- package/dist/ElCalendarCell.vue.esm2.js +1 -1
- package/dist/ElCalendarCell.vue.esm2.js.map +1 -1
- package/dist/ElCarousel.vue.cjs2.js +1 -1
- package/dist/ElCarousel.vue.cjs2.js.map +1 -1
- package/dist/ElCarousel.vue.esm2.js +1 -1
- package/dist/ElCarousel.vue.esm2.js.map +1 -1
- package/dist/ElClipToAnchor.vue.cjs2.js +1 -1
- package/dist/ElClipToAnchor.vue.cjs2.js.map +1 -1
- package/dist/ElClipToAnchor.vue.esm2.js +1 -1
- package/dist/ElClipToAnchor.vue.esm2.js.map +1 -1
- package/dist/ElContainerTemplate.vue.cjs2.js +1 -1
- package/dist/ElContainerTemplate.vue.cjs2.js.map +1 -1
- package/dist/ElContainerTemplate.vue.esm2.js +1 -1
- package/dist/ElContainerTemplate.vue.esm2.js.map +1 -1
- package/dist/ElDivider.vue.cjs2.js.map +1 -1
- package/dist/ElDivider.vue.esm2.js.map +1 -1
- package/dist/ElDrawer.vue.cjs2.js.map +1 -1
- package/dist/ElDrawer.vue.esm2.js.map +1 -1
- package/dist/ElDropdown.vue.cjs2.js +1 -1
- package/dist/ElDropdown.vue.cjs2.js.map +1 -1
- package/dist/ElDropdown.vue.esm2.js +1 -1
- package/dist/ElDropdown.vue.esm2.js.map +1 -1
- package/dist/ElFile.vue.cjs2.js.map +1 -1
- package/dist/ElFile.vue.esm2.js.map +1 -1
- package/dist/ElIcon.vue.cjs2.js +1 -1
- package/dist/ElIcon.vue.cjs2.js.map +1 -1
- package/dist/ElIcon.vue.esm2.js +1 -1
- package/dist/ElIcon.vue.esm2.js.map +1 -1
- package/dist/ElIconButton.vue.cjs2.js +1 -1
- package/dist/ElIconButton.vue.cjs2.js.map +1 -1
- package/dist/ElIconButton.vue.d.ts +4 -0
- package/dist/ElIconButton.vue.esm2.js +1 -1
- package/dist/ElIconButton.vue.esm2.js.map +1 -1
- package/dist/ElInlineBanner.vue.cjs2.js.map +1 -1
- package/dist/ElInlineBanner.vue.esm2.js.map +1 -1
- package/dist/ElInputChat.vue.cjs2.js.map +1 -1
- package/dist/ElInputChat.vue.esm2.js.map +1 -1
- package/dist/ElListItem.vue.cjs2.js.map +1 -1
- package/dist/ElListItem.vue.esm2.js.map +1 -1
- package/dist/ElLogo.vue.cjs2.js.map +1 -1
- package/dist/ElLogo.vue.esm2.js.map +1 -1
- package/dist/ElModal.vue.cjs2.js +1 -1
- package/dist/ElModal.vue.cjs2.js.map +1 -1
- package/dist/ElModal.vue.esm2.js +1 -1
- package/dist/ElModal.vue.esm2.js.map +1 -1
- package/dist/ElSortingHeader.vue.cjs2.js.map +1 -1
- package/dist/ElSortingHeader.vue.esm2.js.map +1 -1
- package/dist/ElSpinner.vue.cjs2.js.map +1 -1
- package/dist/ElSpinner.vue.esm2.js.map +1 -1
- package/dist/ElTab.vue.cjs2.js.map +1 -1
- package/dist/ElTab.vue.esm2.js.map +1 -1
- package/dist/ElTabGroup.vue.cjs2.js.map +1 -1
- package/dist/ElTabGroup.vue.esm2.js.map +1 -1
- package/dist/ElTabs.vue.cjs2.js.map +1 -1
- package/dist/ElTabs.vue.esm2.js.map +1 -1
- package/dist/ElTag.vue.cjs2.js.map +1 -1
- package/dist/ElTag.vue.esm2.js.map +1 -1
- package/dist/ElTextCell.vue.cjs2.js.map +1 -1
- package/dist/ElTextCell.vue.esm2.js.map +1 -1
- package/dist/ElToast.vue.cjs2.js +1 -1
- package/dist/ElToast.vue.cjs2.js.map +1 -1
- package/dist/ElToast.vue.esm2.js +1 -1
- package/dist/ElToast.vue.esm2.js.map +1 -1
- package/dist/ElTooltip.vue.cjs2.js.map +1 -1
- package/dist/ElTooltip.vue.esm2.js.map +1 -1
- package/dist/ElVerticalTab.vue.cjs2.js.map +1 -1
- package/dist/ElVerticalTab.vue.esm2.js.map +1 -1
- package/dist/_CustomTransition.vue.cjs2.js.map +1 -1
- package/dist/_CustomTransition.vue.esm2.js.map +1 -1
- package/dist/assets/logo/davinci-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/davinci-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/davinci-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/davinci-white.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-two-tone.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-two-tone.svg.esm.js.map +1 -1
- package/dist/assets/logo/elty-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/elty-white.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-dark.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-dark.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-two-tone.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-two-tone.svg.esm.js.map +1 -1
- package/dist/assets/logo/heart-white.svg.cjs.js.map +1 -1
- package/dist/assets/logo/heart-white.svg.esm.js.map +1 -1
- package/dist/composable/mobileComposable.cjs.js +1 -1
- package/dist/composable/mobileComposable.cjs.js.map +1 -1
- package/dist/composable/mobileComposable.esm.js +1 -1
- package/dist/composable/mobileComposable.esm.js.map +1 -1
- package/dist/forms/ElInputCheckbox.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputCheckbox.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputDate.vue.cjs2.js +1 -1
- package/dist/forms/ElInputDate.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputDate.vue.esm2.js +1 -1
- package/dist/forms/ElInputDate.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputFile.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputFile.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputMeasureUnit.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputMeasureUnit.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputNumber.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputNumber.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputPhone.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputPhone.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRadioButton.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRadioButton.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.cjs2.js +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.esm2.js +1 -1
- package/dist/forms/ElInputRichText/Editor.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputRichText/translations/it.cjs.js +1 -1
- package/dist/forms/ElInputRichText/translations/it.cjs.js.map +1 -1
- package/dist/forms/ElInputRichText/translations/it.esm.js +1 -1
- package/dist/forms/ElInputRichText/translations/it.esm.js.map +1 -1
- package/dist/forms/ElInputRichText.vue.cjs2.js +1 -1
- package/dist/forms/ElInputRichText.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputRichText.vue.esm2.js +2 -2
- package/dist/forms/ElInputRichText.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSearch.vue.cjs2.js +1 -1
- package/dist/forms/ElInputSearch.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSearch.vue.esm2.js +1 -1
- package/dist/forms/ElInputSearch.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSelect.vue.cjs2.js +1 -1
- package/dist/forms/ElInputSelect.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSelect.vue.esm2.js +1 -1
- package/dist/forms/ElInputSelect.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputSwitch.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputSwitch.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputText.vue.cjs2.js +1 -1
- package/dist/forms/ElInputText.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputText.vue.esm2.js +1 -1
- package/dist/forms/ElInputText.vue.esm2.js.map +1 -1
- package/dist/forms/ElInputTextarea.vue.cjs2.js.map +1 -1
- package/dist/forms/ElInputTextarea.vue.esm2.js.map +1 -1
- package/dist/forms/input.cjs.js.map +1 -1
- package/dist/forms/input.esm.js.map +1 -1
- package/dist/forms/unicodeCharsRule.cjs.js +1 -1
- package/dist/forms/unicodeCharsRule.cjs.js.map +1 -1
- package/dist/forms/unicodeCharsRule.esm.js +1 -1
- package/dist/forms/unicodeCharsRule.esm.js.map +1 -1
- package/dist/forms/utils.cjs.js +1 -1
- package/dist/forms/utils.cjs.js.map +1 -1
- package/dist/forms/utils.esm.js +1 -1
- package/dist/forms/utils.esm.js.map +1 -1
- package/dist/forms/validation-rules.cjs.js +1 -1
- package/dist/forms/validation-rules.cjs.js.map +1 -1
- package/dist/forms/validation-rules.esm.js +1 -1
- package/dist/forms/validation-rules.esm.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/polyfills.cjs.js.map +1 -1
- package/dist/polyfills.esm.js.map +1 -1
- package/dist/preset.cjs.js +1 -1
- package/dist/preset.esm.js +1 -1
- package/dist/table/ElMobileTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElMobileTable.vue.esm2.js.map +1 -1
- package/dist/table/ElResponsiveTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElResponsiveTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideMobileTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideMobileTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideResponsiveTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideResponsiveTable.vue.d.ts +2 -0
- package/dist/table/ElServerSideResponsiveTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideTable.vue.cjs2.js +1 -1
- package/dist/table/ElServerSideTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideTable.vue.esm2.js +1 -1
- package/dist/table/ElServerSideTable.vue.esm2.js.map +1 -1
- package/dist/table/ElServerSideTablePagination.vue.cjs2.js.map +1 -1
- package/dist/table/ElServerSideTablePagination.vue.esm2.js.map +1 -1
- package/dist/table/ElTable.vue.cjs2.js.map +1 -1
- package/dist/table/ElTable.vue.esm2.js.map +1 -1
- package/dist/table/ElTableCell.vue.cjs2.js.map +1 -1
- package/dist/table/ElTableCell.vue.esm2.js.map +1 -1
- package/dist/table/ElTablePagination.vue.cjs2.js.map +1 -1
- package/dist/table/ElTablePagination.vue.esm2.js.map +1 -1
- package/dist/tailwind.plugin.cjs.js +1 -1
- package/dist/tailwind.plugin.cjs.js.map +1 -1
- package/dist/tailwind.plugin.esm.js +1 -1
- package/dist/tailwind.plugin.esm.js.map +1 -1
- package/dist/types.cjs.js.map +1 -1
- package/dist/types.esm.js.map +1 -1
- package/dist/utils.cjs.js.map +1 -1
- package/dist/utils.esm.js.map +1 -1
- package/dist/vue.plugin.cjs.js.map +1 -1
- package/dist/vue.plugin.esm.js.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n | {\n type: FilterType;\n placeholder?: string;\n }\n | { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) || '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElTable.vue.cjs2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n | {\n type: FilterType;\n placeholder?: string;\n }\n | { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) || '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTable.vue.esm2.js","sources":["../../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n | {\n type: FilterType;\n placeholder?: string;\n }\n | { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) || '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ElTable.vue.esm2.js","sources":["../../src/table/ElTable.vue"],"sourcesContent":["<script lang=\"ts\">\ninterface TableColumn {\n title: string;\n filter?:\n | {\n type: FilterType;\n placeholder?: string;\n }\n | { type: 'RESET_FILTERS_BUTTON' };\n alignRight?: boolean;\n noSort?: boolean;\n}\n\nexport interface TableProps {\n columns: TableColumn[];\n data: DataRow[];\n tableId?: number | string; // needed to understand when the table changes cols and data\n sortByCol?: number; // initial sort by column\n sortByColAsc?: boolean; // initial sort by column should be in Ascending order\n noFilters?: boolean;\n noFooter?: boolean;\n rowsSelectionMode?: 'single' | 'multiple';\n rowsSelectionDisabled?: boolean;\n initialRows?: number;\n loading?: boolean;\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport TablePagination from '@/table/ElTablePagination.vue';\nimport CustomTransition from '@/_CustomTransition.vue';\nimport ElInputCheckbox from '@/forms/ElInputCheckbox.vue';\nimport ElInputSelect from '@/forms/ElInputSelect.vue';\nimport ElInputDate from '@/forms/ElInputDate.vue';\nimport ElInputText from '@/forms/ElInputText.vue';\nimport ElSpinner from '@/ElSpinner.vue';\nimport ElTableCell, { getCellText, getCellSortableAndFilterableValue } from '@/table/ElTableCell.vue';\nimport ElButton from '@/ElButton.vue';\nimport { DataRow, FilterType } from '@/table/commonTypes';\n\nconst props = withDefaults(defineProps<TableProps>(), {\n tableId: 0,\n sortByCol: 0,\n initialRows: 15,\n sortByColAsc: false,\n rowsSelectionMode: undefined,\n});\n\nconst emit = defineEmits<{\n (event: 'rows-selected', rows: DataRow[]): void;\n}>();\n\nconst MAX_COLS = 10;\n\nconst currentTabDataRows = ref<DataRow[]>(props.data);\n\nfunction useSorting() {\n const sortStatus = ref<{\n currentlySortColIndex: number;\n arrows: boolean[];\n }>({\n currentlySortColIndex: props.sortByCol > -1 ? props.sortByCol : -1,\n arrows: [],\n });\n\n onMounted(() => {\n sortStatus.value.arrows = new Array(MAX_COLS);\n if (props.sortByCol > -1) {\n sortStatus.value.arrows[props.sortByCol] = props.sortByColAsc;\n }\n });\n\n const sortData = (data: DataRow[]) => {\n if (data.length > 0) {\n const colIndex = sortStatus.value.currentlySortColIndex;\n const asc = sortStatus.value.arrows[colIndex];\n\n return data.sort((a, b) => {\n const sortValueA = getCellSortableAndFilterableValue(a.cells[colIndex]);\n const sortValueB = getCellSortableAndFilterableValue(b.cells[colIndex]);\n return asc ? sortValueA.localeCompare(sortValueB) : sortValueB.localeCompare(sortValueA);\n });\n }\n return data;\n };\n\n const toggleSortArrow = (colIndex: number) => {\n sortStatus.value.currentlySortColIndex = colIndex;\n sortStatus.value.arrows.splice(colIndex, 1, !sortStatus.value.arrows[colIndex]);\n };\n\n return {\n sortStatus,\n sortData,\n toggleSortArrow,\n };\n}\n\nfunction useFilters() {\n const filterStatus = ref<\n {\n textSearch: string;\n dateFrom: number;\n }[]\n >([]);\n\n onMounted(() => {\n filterStatus.value = new Array(MAX_COLS);\n for (let i = 0; i < MAX_COLS; i++) {\n filterStatus.value.splice(i, 1, {\n textSearch: '',\n dateFrom: 0,\n });\n }\n });\n\n watch(\n () => props.tableId,\n () => resetFilter(),\n );\n\n const filteredData = computed((): typeof props.data => {\n let data = props.data.slice();\n\n if (filterStatus.value.length > 0 && data.length > 0) {\n for (let i = 0; i < props.columns.length; i++) {\n const colToFilter = props.columns[i];\n const currentFilter = filterStatus.value[i];\n\n if (colToFilter.filter?.type === 'FREE_SEARCH') {\n if (currentFilter.textSearch) {\n const searchValues = currentFilter.textSearch.trim().toLowerCase().split(' ');\n data = data.filter(d => {\n const cellValue = getCellSortableAndFilterableValue(d.cells[i]).toLowerCase();\n return searchValues.some(searchValue => cellValue && cellValue.includes(searchValue));\n });\n }\n } else if (colToFilter.filter?.type === 'MULTI_VALUE') {\n if (currentFilter.textSearch) {\n data = data.filter(d => currentFilter.textSearch === getCellSortableAndFilterableValue(d.cells[i]));\n }\n } else if (colToFilter.filter?.type === 'DATE_RANGE') {\n if (currentFilter.dateFrom > 0) {\n data = data.filter(d => parseInt(getCellSortableAndFilterableValue(d.cells[i])) >= currentFilter.dateFrom);\n }\n }\n }\n\n if (sortStatus.value.currentlySortColIndex > -1) {\n return sortData(data);\n }\n }\n return data;\n });\n\n const resetFilter = () => {\n filterStatus.value.forEach(f => {\n f.textSearch = '';\n f.dateFrom = 0;\n });\n };\n\n const findFilterMultiValuesOptions = (colIndex: number): InstanceType<typeof ElInputSelect>['$props']['options'] => {\n const mainTextValues = props.data\n .filter(d => {\n const currentCell = d.cells[colIndex];\n return getCellText(currentCell);\n })\n .map(d => getCellText(d.cells[colIndex]) || '');\n return [...new Set(mainTextValues)].map(v => ({\n value: v,\n label: v,\n }));\n };\n return {\n filterStatus,\n filteredData,\n resetFilter,\n findFilterMultiValuesOptions,\n };\n}\n\nfunction useRowsSelection() {\n const selectedRows = ref<typeof props.data>([]);\n\n const emitRowsSelected = () => {\n emit('rows-selected', selectedRows.value);\n };\n\n const rowsSelected = (rows: DataRow[]) => {\n selectRows(rows.map(r => r.id));\n };\n\n const rowUnselected = (rowId: string) => {\n const index = selectedRows.value.findIndex(r => r.id === rowId);\n selectedRows.value.splice(index, 1);\n emitRowsSelected();\n };\n\n // select the rows with the given ids, possibly in addition to the rows that are already selected\n const selectRows = async (rowsIds: string[]) => {\n if (props.rowsSelectionMode === 'single') {\n selectedRows.value = [];\n await nextTick();\n }\n const rowsToSelect = currentTabDataRows.value.filter(r => rowsIds.includes(r.id));\n if (props.rowsSelectionMode === 'single') {\n rowsToSelect.length = Math.min(1, rowsToSelect.length);\n }\n\n for (const row of rowsToSelect) {\n if (!selectedRows.value.some(r => r.id === row.id)) {\n selectedRows.value.push(row);\n }\n }\n\n emitRowsSelected();\n };\n\n const unselectAllRows = () => {\n selectedRows.value = [];\n emitRowsSelected();\n };\n\n const getDataRows = (): DataRow[] => currentTabDataRows.value;\n const getSelectedRows = (): DataRow[] => selectedRows.value;\n\n const allRowsSelected = computed(() => {\n return selectedRows.value.length > 0 && selectedRows.value.length === currentTabDataRows.value.length;\n });\n\n return {\n selectedRows,\n rowsSelected,\n rowUnselected,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n allRowsSelected,\n };\n}\n\nconst { selectedRows, rowsSelected, rowUnselected, selectRows, unselectAllRows, getDataRows, getSelectedRows, allRowsSelected } =\n useRowsSelection();\nconst { filterStatus, filteredData, resetFilter, findFilterMultiValuesOptions } = useFilters();\nconst { sortStatus, sortData, toggleSortArrow } = useSorting();\n\ndefineExpose({\n filteredData,\n selectRows,\n unselectAllRows,\n getDataRows,\n getSelectedRows,\n});\n</script>\n\n<template>\n <div class=\"flex flex-col\">\n <div class=\"overflow-x-auto\">\n <div class=\"inline-block min-w-full bg-white align-middle\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-neutral-surface-raised font-semibold\">\n <th\n v-if=\"rowsSelectionMode\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker flex justify-center px-3 py-3 text-xs uppercase leading-4 tracking-wider\"\n :class=\"{ 'cursor-pointer': rowsSelectionMode === 'multiple' }\"\n >\n <ElInputCheckbox\n v-if=\"rowsSelectionMode === 'multiple'\"\n :model-value=\"allRowsSelected\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @click=\"() => (allRowsSelected ? unselectAllRows() : rowsSelected(currentTabDataRows))\"\n />\n <div v-else class=\"w-7\" />\n </th>\n <th\n v-for=\"(col, index) in props.columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"bg-neutral-surface-raised text-neutral-darker whitespace-nowrap rounded-none px-3 py-3 text-xs font-semibold uppercase leading-4 tracking-wider\"\n :class=\"[col.alignRight ? 'text-right' : 'text-left', !col.noSort ? 'cursor-pointer' : 'cursor-default']\"\n :title=\"!col.noSort ? (sortStatus.arrows[index] ? 'Ordine crescente' : 'Ordine decrescente') : 'Colonna non ordinabile'\"\n @click=\"!col.noSort && toggleSortArrow(index)\"\n >\n {{ col.title }}\n\n <!-- //////////////////// SORT //////////////////////////// -->\n <svg\n v-if=\"!col.noSort\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n class=\"ml-1 inline-flex h-3 w-3\"\n fill=\"currentColor\"\n >\n <path\n v-if=\"sortStatus.arrows[index]\"\n d=\"M13 5.41V21a1 1 0 0 1-2 0V5.41l-5.3 5.3a1 1 0 1 1-1.4-1.42l7-7a1 1 0 0 1 1.4 0l7 7a1 1 0 1 1-1.4 1.42L13 5.4z\"\n />\n <path\n v-else\n d=\"M11 18.59V3a1 1 0 0 1 2 0v15.59l5.3-5.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 1.4-1.42l5.3 5.3z\"\n title=\"Ordine Decrescente\"\n />\n </svg>\n </th>\n </tr>\n <!-- ///////////////////// FILTERS ///////////////////////// -->\n <tr v-if=\"filterStatus.length > 0 && !noFilters\" class=\"bg-white\">\n <th v-if=\"rowsSelectionMode\" scope=\"col\" />\n <th\n v-for=\"(col, index) in columns\"\n :key=\"index\"\n scope=\"col\"\n class=\"text-neutral-darker px-3 py-3 text-left text-xs font-light leading-4 tracking-wider\"\n >\n <!-- FILTER: TEXT SEARCH -->\n <ElInputText\n v-if=\"col.filter?.type === 'FREE_SEARCH'\"\n v-model=\"filterStatus[index].textSearch\"\n :placeholder=\"col.filter?.placeholder || 'Cerca'\"\n :hidden-error-message=\"true\"\n :trailing-icon=\"{\n name: 'MagnifyingGlassIcon',\n }\"\n />\n\n <!-- FILTER: DATE RANGE -->\n <div v-else-if=\"col.filter?.type === 'DATE_RANGE'\" class=\"flex flex-col\">\n <ElInputDate v-model=\"filterStatus[index].dateFrom\" :hidden-error-message=\"true\" />\n </div>\n\n <!-- FILTER: MULTIPLE VALUES -->\n <ElInputSelect\n v-else-if=\"col.filter?.type === 'MULTI_VALUE'\"\n v-model=\"filterStatus[index].textSearch\"\n class=\"flex flex-col\"\n type=\"autocomplete\"\n :options=\"findFilterMultiValuesOptions(index)\"\n :hidden-error-message=\"true\"\n />\n\n <!-- TODO: change with new button when it'll be available in version 2 -->\n <!-- FILTER: RESET -->\n\n <div v-else-if=\"col.filter?.type === 'RESET_FILTERS_BUTTON'\" class=\"flex justify-end\">\n <ElButton label=\"Azzera filtri\" variant=\"tertiary\" size=\"xs\" @click=\"resetFilter\" />\n </div>\n </th>\n </tr>\n </thead>\n <CustomTransition name=\"fade\">\n <tbody v-if=\"props.loading\" key=\"loading\">\n <tr>\n <td :colspan=\"props.columns.length + 1\">\n <ElSpinner label=\"Caricamento dati...\" class=\"p-4\" :extra-loading-msg-after-seconds=\"3\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length > 0\" key=\"tableFull\" class=\"bg-white\">\n <tr\n v-for=\"row in currentTabDataRows\"\n :key=\"row.id\"\n class=\"transition duration-150 ease-in-out border-t border-neutral-surface\"\n :class=\"{\n 'bg-neutral-surface-raised': rowsSelectionMode && selectedRows.find(x => x.id === row.id),\n }\"\n data-cy=\"table-row\"\n >\n <!-- ROWS SELECTION -->\n <td v-if=\"rowsSelectionMode\" class=\"flex h-20 items-center justify-center py-3\">\n <ElInputCheckbox\n :model-value=\"!!selectedRows.find(r => r.id === row.id)\"\n :disabled=\"rowsSelectionDisabled\"\n size=\"xxs\"\n @update:model-value=\"val => (val ? rowsSelected([row]) : rowUnselected(row.id))\"\n />\n </td>\n\n <!-- ///////////////////// DATA CELLS ///////////////////////// -->\n <td\n v-for=\"(cell, i) in row.cells\"\n :key=\"i\"\n class=\"max-w-sm px-2.5 py-2.5\"\n :data-cy=\"cell.type === 'default' && cell.mainText.trim().replaceAll(' ', '').replaceAll(',', '')\"\n >\n <!-- TODO data-cy should stay inside ElTableCell -->\n <ElTableCell :cell=\"cell\" />\n </td>\n </tr>\n </tbody>\n <tbody v-else-if=\"currentTabDataRows.length === 0\" key=\"tableEmpty\">\n <tr>\n <td :colspan=\"props.columns.length + 1\" class=\"p-4 font-light text-neutral-darker\">nessun dato trovato</td>\n </tr>\n </tbody>\n </CustomTransition>\n </table>\n </div>\n </div>\n\n <!-- Footer -->\n <TablePagination\n v-model:current-tab-rows=\"currentTabDataRows\"\n :rows=\"filteredData\"\n :rows-per-page=\"props.initialRows\"\n :hide-footer=\"props.noFooter\"\n />\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","MAX_COLS","currentTabDataRows","ref","useSorting","sortStatus","onMounted","data","colIndex","asc","a","b","sortValueA","getCellSortableAndFilterableValue","sortValueB","useFilters","filterStatus","i","watch","resetFilter","filteredData","computed","colToFilter","currentFilter","_a","searchValues","d","cellValue","searchValue","_b","_c","sortData","f","mainTextValues","currentCell","getCellText","v","useRowsSelection","selectedRows","emitRowsSelected","rowsSelected","rows","selectRows","r","rowUnselected","rowId","index","rowsIds","nextTick","rowsToSelect","row","unselectAllRows","getDataRows","getSelectedRows","allRowsSelected","findFilterMultiValuesOptions","toggleSortArrow","__expose"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTableCell.vue.cjs2.js","sources":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTableCell.vue.esm2.js","sources":["
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTablePagination.vue.cjs2.js","sources":["../../../src/table/ElTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed, ref, watch } from 'vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ninterface Props {\n rows: T[];\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 totalRowsNumber = computed(() => props.rows.length);\n\nconst emitCurrentTabRows = () => emit('update:currentTabRows', props.rows.slice(currentStartItem.value, currentEndItem.value + 1));\n\nconst currentStartItem = computed(() => {\n return currentPage.value * props.rowsPerPage;\n});\n\nconst currentEndItem = computed(() => {\n const end = currentStartItem.value + props.rowsPerPage - 1;\n return end <= totalRowsNumber.value ? end : totalRowsNumber.value - 1;\n});\n\nconst emit = defineEmits<{\n (event: 'update:currentTabRows', rows: T[]): void;\n (event: 'update:currentPage', page: number): void;\n (event: 'change', page: number): void;\n}>();\n\n// number of pages, given number of rows and rows per page\nconst totalPages = computed(() => Math.ceil(totalRowsNumber.value / props.rowsPerPage));\n\nconst prevPageDisabled = computed(() => currentPage.value <= 0);\nconst nextPageDisabled = computed(() => currentPage.value >= totalPages.value - 1);\n\nconst onPageChange = (page: number) => {\n if (page > 0 && page <= totalPages.value && page !== currentPage.value) {\n emit('update:currentPage', page);\n emit('change', page);\n }\n emitCurrentTabRows();\n};\n\n// reset current page if filters have been applied\nwatch(\n () => props.rows,\n () => {\n currentPage.value = 0;\n },\n);\n\nconst goToPage = (pageNumber: number) => {\n console.log('goToPage', pageNumber, currentPage.value, sliceStart.value, totalPages.value);\n // only allow going to valid pages\n if (pageNumber < 0 || pageNumber >= totalPages.value) return;\n currentPage.value = pageNumber;\n onPageChange(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.rows, props.rowsPerPage, totalPages.value, currentPage.value],\n () => {\n calculateSliceStart();\n emitCurrentTabRows();\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</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\">…</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\">…</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\">…</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","totalRowsNumber","computed","emitCurrentTabRows","emit","currentStartItem","currentEndItem","end","__emit","totalPages","prevPageDisabled","nextPageDisabled","onPageChange","page","watch","goToPage","pageNumber","sliceStart","useNumberedPages","sliceArray","range","calculateSliceStart","start","step","arr","i","chunkSize","currentChunkStart","currentChunkEnd","lastChunkStart"],"mappings":"48CAWA,MAAMA,EAAQC,EAMRC,EAAcC,MAAI,CAAC,EAEnBC,EAAkBC,EAAAA,SAAS,IAAML,EAAM,KAAK,MAAM,EAElDM,EAAqB,IAAMC,EAAK,wBAAyBP,EAAM,KAAK,MAAMQ,EAAiB,MAAOC,EAAe,MAAQ,CAAC,CAAC,EAE3HD,EAAmBH,EAAAA,SAAS,IACzBH,EAAY,MAAQF,EAAM,WAClC,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,MAAMK,EAAMF,EAAiB,MAAQR,EAAM,YAAc,EACzD,OAAOU,GAAON,EAAgB,MAAQM,EAAMN,EAAgB,MAAQ,CAAA,CACrE,EAEKG,EAAOI,EAOPC,EAAaP,WAAS,IAAM,KAAK,KAAKD,EAAgB,MAAQJ,EAAM,WAAW,CAAC,EAEhFa,EAAmBR,EAAAA,SAAS,IAAMH,EAAY,OAAS,CAAC,EACxDY,EAAmBT,EAAS,SAAA,IAAMH,EAAY,OAASU,EAAW,MAAQ,CAAC,EAE3EG,EAAgBC,GAAiB,CACjCA,EAAO,GAAKA,GAAQJ,EAAW,OAASI,IAASd,EAAY,QAC/DK,EAAK,qBAAsBS,CAAI,EAC/BT,EAAK,SAAUS,CAAI,GAEFV,GAAA,EAIrBW,EAAA,MACE,IAAMjB,EAAM,KACZ,IAAM,CACJE,EAAY,MAAQ,CACtB,CAAA,EAGI,MAAAgB,EAAYC,GAAuB,CAC/B,QAAA,IAAI,WAAYA,EAAYjB,EAAY,MAAOkB,EAAW,MAAOR,EAAW,KAAK,EAErF,EAAAO,EAAa,GAAKA,GAAcP,EAAW,SAC/CV,EAAY,MAAQiB,EACpBJ,EAAaI,CAAU,EAAA,EAGzB,SAASE,GAAmB,CACpBD,MAAAA,EAAajB,MAAI,CAAC,EAClBmB,EAAajB,EAAAA,SAAS,IAAMkB,EAAMX,EAAW,KAAK,EAAE,MAAMQ,EAAW,MAAOA,EAAW,MAAQpB,EAAM,eAAe,CAAC,EAE3HiB,EAAA,MACE,IAAM,CAACjB,EAAM,gBAAiBA,EAAM,KAAMA,EAAM,YAAaY,EAAW,MAAOV,EAAY,KAAK,EAChG,IAAM,CACgBsB,IACDlB,GACrB,EACA,CACE,UAAW,EACb,CAAA,EAGF,MAAMiB,EAAQ,CAACb,EAAae,EAAgB,EAAGC,EAAe,IAAM,CAClE,MAAMC,EAAM,CAAA,EACZ,QAASC,EAAIH,EAAOG,EAAIlB,EAAKkB,GAAKF,EAChCC,EAAI,KAAKC,CAAC,EAEL,OAAAD,CAAA,EAGT,SAASH,GAAsB,CAC7B,MAAMK,EAAY7B,EAAM,gBAClB8B,EAAoBV,EAAW,MAC/BW,EAAkBD,EAAoBD,EAExC,GAAA3B,EAAY,OAAS6B,EAAiB,CAClC,MAAAC,EAAiBpB,EAAW,MAAQiB,EACtC3B,EAAY,MAAQ8B,EACtBZ,EAAW,MAAQY,EAEnBZ,EAAW,MAAQlB,EAAY,KACjC,MACSA,EAAY,MAAQ4B,IACzB5B,EAAY,MAAQ2B,EACtBT,EAAW,MAAQlB,EAAY,MAAQ,EAAI2B,EAEvC3B,EAAY,OAAS,EACvBkB,EAAW,MAAQlB,EAAY,MAAQ,EAEvCkB,EAAW,MAAQ,EAI3B,CAEO,MAAA,CACL,WAAAA,EACA,WAAAE,CAAA,CAEJ,CACA,KAAM,CAAE,WAAAF,EAAY,WAAAE,CAAW,EAAID,EAAiB"}
|
|
1
|
+
{"version":3,"file":"ElTablePagination.vue.cjs2.js","sources":["../../src/table/ElTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed, ref, watch } from 'vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ninterface Props {\n rows: T[];\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 totalRowsNumber = computed(() => props.rows.length);\n\nconst emitCurrentTabRows = () => emit('update:currentTabRows', props.rows.slice(currentStartItem.value, currentEndItem.value + 1));\n\nconst currentStartItem = computed(() => {\n return currentPage.value * props.rowsPerPage;\n});\n\nconst currentEndItem = computed(() => {\n const end = currentStartItem.value + props.rowsPerPage - 1;\n return end <= totalRowsNumber.value ? end : totalRowsNumber.value - 1;\n});\n\nconst emit = defineEmits<{\n (event: 'update:currentTabRows', rows: T[]): void;\n (event: 'update:currentPage', page: number): void;\n (event: 'change', page: number): void;\n}>();\n\n// number of pages, given number of rows and rows per page\nconst totalPages = computed(() => Math.ceil(totalRowsNumber.value / props.rowsPerPage));\n\nconst prevPageDisabled = computed(() => currentPage.value <= 0);\nconst nextPageDisabled = computed(() => currentPage.value >= totalPages.value - 1);\n\nconst onPageChange = (page: number) => {\n if (page > 0 && page <= totalPages.value && page !== currentPage.value) {\n emit('update:currentPage', page);\n emit('change', page);\n }\n emitCurrentTabRows();\n};\n\n// reset current page if filters have been applied\nwatch(\n () => props.rows,\n () => {\n currentPage.value = 0;\n },\n);\n\nconst goToPage = (pageNumber: number) => {\n console.log('goToPage', pageNumber, currentPage.value, sliceStart.value, totalPages.value);\n // only allow going to valid pages\n if (pageNumber < 0 || pageNumber >= totalPages.value) return;\n currentPage.value = pageNumber;\n onPageChange(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.rows, props.rowsPerPage, totalPages.value, currentPage.value],\n () => {\n calculateSliceStart();\n emitCurrentTabRows();\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</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\">…</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\">…</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\">…</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","totalRowsNumber","computed","emitCurrentTabRows","emit","currentStartItem","currentEndItem","end","__emit","totalPages","prevPageDisabled","nextPageDisabled","onPageChange","page","watch","goToPage","pageNumber","sliceStart","useNumberedPages","sliceArray","range","calculateSliceStart","start","step","arr","i","chunkSize","currentChunkStart","currentChunkEnd","lastChunkStart"],"mappings":"48CAWA,MAAMA,EAAQC,EAMRC,EAAcC,MAAI,CAAC,EAEnBC,EAAkBC,EAAAA,SAAS,IAAML,EAAM,KAAK,MAAM,EAElDM,EAAqB,IAAMC,EAAK,wBAAyBP,EAAM,KAAK,MAAMQ,EAAiB,MAAOC,EAAe,MAAQ,CAAC,CAAC,EAE3HD,EAAmBH,EAAAA,SAAS,IACzBH,EAAY,MAAQF,EAAM,WAClC,EAEKS,EAAiBJ,EAAAA,SAAS,IAAM,CACpC,MAAMK,EAAMF,EAAiB,MAAQR,EAAM,YAAc,EACzD,OAAOU,GAAON,EAAgB,MAAQM,EAAMN,EAAgB,MAAQ,CAAA,CACrE,EAEKG,EAAOI,EAOPC,EAAaP,WAAS,IAAM,KAAK,KAAKD,EAAgB,MAAQJ,EAAM,WAAW,CAAC,EAEhFa,EAAmBR,EAAAA,SAAS,IAAMH,EAAY,OAAS,CAAC,EACxDY,EAAmBT,EAAS,SAAA,IAAMH,EAAY,OAASU,EAAW,MAAQ,CAAC,EAE3EG,EAAgBC,GAAiB,CACjCA,EAAO,GAAKA,GAAQJ,EAAW,OAASI,IAASd,EAAY,QAC/DK,EAAK,qBAAsBS,CAAI,EAC/BT,EAAK,SAAUS,CAAI,GAEFV,GAAA,EAIrBW,EAAA,MACE,IAAMjB,EAAM,KACZ,IAAM,CACJE,EAAY,MAAQ,CACtB,CAAA,EAGI,MAAAgB,EAAYC,GAAuB,CAC/B,QAAA,IAAI,WAAYA,EAAYjB,EAAY,MAAOkB,EAAW,MAAOR,EAAW,KAAK,EAErF,EAAAO,EAAa,GAAKA,GAAcP,EAAW,SAC/CV,EAAY,MAAQiB,EACpBJ,EAAaI,CAAU,EAAA,EAGzB,SAASE,GAAmB,CACpBD,MAAAA,EAAajB,MAAI,CAAC,EAClBmB,EAAajB,EAAAA,SAAS,IAAMkB,EAAMX,EAAW,KAAK,EAAE,MAAMQ,EAAW,MAAOA,EAAW,MAAQpB,EAAM,eAAe,CAAC,EAE3HiB,EAAA,MACE,IAAM,CAACjB,EAAM,gBAAiBA,EAAM,KAAMA,EAAM,YAAaY,EAAW,MAAOV,EAAY,KAAK,EAChG,IAAM,CACgBsB,IACDlB,GACrB,EACA,CACE,UAAW,EACb,CAAA,EAGF,MAAMiB,EAAQ,CAACb,EAAae,EAAgB,EAAGC,EAAe,IAAM,CAClE,MAAMC,EAAM,CAAA,EACZ,QAASC,EAAIH,EAAOG,EAAIlB,EAAKkB,GAAKF,EAChCC,EAAI,KAAKC,CAAC,EAEL,OAAAD,CAAA,EAGT,SAASH,GAAsB,CAC7B,MAAMK,EAAY7B,EAAM,gBAClB8B,EAAoBV,EAAW,MAC/BW,EAAkBD,EAAoBD,EAExC,GAAA3B,EAAY,OAAS6B,EAAiB,CAClC,MAAAC,EAAiBpB,EAAW,MAAQiB,EACtC3B,EAAY,MAAQ8B,EACtBZ,EAAW,MAAQY,EAEnBZ,EAAW,MAAQlB,EAAY,KACjC,MACSA,EAAY,MAAQ4B,IACzB5B,EAAY,MAAQ2B,EACtBT,EAAW,MAAQlB,EAAY,MAAQ,EAAI2B,EAEvC3B,EAAY,OAAS,EACvBkB,EAAW,MAAQlB,EAAY,MAAQ,EAEvCkB,EAAW,MAAQ,EAI3B,CAEO,MAAA,CACL,WAAAA,EACA,WAAAE,CAAA,CAEJ,CACA,KAAM,CAAE,WAAAF,EAAY,WAAAE,CAAW,EAAID,EAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElTablePagination.vue.esm2.js","sources":["../../../src/table/ElTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed, ref, watch } from 'vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ninterface Props {\n rows: T[];\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 totalRowsNumber = computed(() => props.rows.length);\n\nconst emitCurrentTabRows = () => emit('update:currentTabRows', props.rows.slice(currentStartItem.value, currentEndItem.value + 1));\n\nconst currentStartItem = computed(() => {\n return currentPage.value * props.rowsPerPage;\n});\n\nconst currentEndItem = computed(() => {\n const end = currentStartItem.value + props.rowsPerPage - 1;\n return end <= totalRowsNumber.value ? end : totalRowsNumber.value - 1;\n});\n\nconst emit = defineEmits<{\n (event: 'update:currentTabRows', rows: T[]): void;\n (event: 'update:currentPage', page: number): void;\n (event: 'change', page: number): void;\n}>();\n\n// number of pages, given number of rows and rows per page\nconst totalPages = computed(() => Math.ceil(totalRowsNumber.value / props.rowsPerPage));\n\nconst prevPageDisabled = computed(() => currentPage.value <= 0);\nconst nextPageDisabled = computed(() => currentPage.value >= totalPages.value - 1);\n\nconst onPageChange = (page: number) => {\n if (page > 0 && page <= totalPages.value && page !== currentPage.value) {\n emit('update:currentPage', page);\n emit('change', page);\n }\n emitCurrentTabRows();\n};\n\n// reset current page if filters have been applied\nwatch(\n () => props.rows,\n () => {\n currentPage.value = 0;\n },\n);\n\nconst goToPage = (pageNumber: number) => {\n console.log('goToPage', pageNumber, currentPage.value, sliceStart.value, totalPages.value);\n // only allow going to valid pages\n if (pageNumber < 0 || pageNumber >= totalPages.value) return;\n currentPage.value = pageNumber;\n onPageChange(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.rows, props.rowsPerPage, totalPages.value, currentPage.value],\n () => {\n calculateSliceStart();\n emitCurrentTabRows();\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</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\">…</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\">…</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\">…</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","totalRowsNumber","computed","emitCurrentTabRows","emit","currentStartItem","currentEndItem","end","__emit","totalPages","prevPageDisabled","nextPageDisabled","onPageChange","page","watch","goToPage","pageNumber","sliceStart","useNumberedPages","sliceArray","range","calculateSliceStart","start","step","arr","i","chunkSize","currentChunkStart","currentChunkEnd","lastChunkStart"],"mappings":"0iDAWA,MAAMA,EAAQC,EAMRC,EAAcC,EAAI,CAAC,EAEnBC,EAAkBC,EAAS,IAAML,EAAM,KAAK,MAAM,EAElDM,EAAqB,IAAMC,EAAK,wBAAyBP,EAAM,KAAK,MAAMQ,EAAiB,MAAOC,EAAe,MAAQ,CAAC,CAAC,EAE3HD,EAAmBH,EAAS,IACzBH,EAAY,MAAQF,EAAM,WAClC,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,MAAMK,EAAMF,EAAiB,MAAQR,EAAM,YAAc,EACzD,OAAOU,GAAON,EAAgB,MAAQM,EAAMN,EAAgB,MAAQ,CAAA,CACrE,EAEKG,EAAOI,EAOPC,EAAaP,EAAS,IAAM,KAAK,KAAKD,EAAgB,MAAQJ,EAAM,WAAW,CAAC,EAEhFa,EAAmBR,EAAS,IAAMH,EAAY,OAAS,CAAC,EACxDY,EAAmBT,EAAS,IAAMH,EAAY,OAASU,EAAW,MAAQ,CAAC,EAE3EG,EAAgBC,GAAiB,CACjCA,EAAO,GAAKA,GAAQJ,EAAW,OAASI,IAASd,EAAY,QAC/DK,EAAK,qBAAsBS,CAAI,EAC/BT,EAAK,SAAUS,CAAI,GAEFV,GAAA,EAIrBW,EACE,IAAMjB,EAAM,KACZ,IAAM,CACJE,EAAY,MAAQ,CACtB,CAAA,EAGI,MAAAgB,EAAYC,GAAuB,CAC/B,QAAA,IAAI,WAAYA,EAAYjB,EAAY,MAAOkB,EAAW,MAAOR,EAAW,KAAK,EAErF,EAAAO,EAAa,GAAKA,GAAcP,EAAW,SAC/CV,EAAY,MAAQiB,EACpBJ,EAAaI,CAAU,EAAA,EAGzB,SAASE,GAAmB,CACpBD,MAAAA,EAAajB,EAAI,CAAC,EAClBmB,EAAajB,EAAS,IAAMkB,EAAMX,EAAW,KAAK,EAAE,MAAMQ,EAAW,MAAOA,EAAW,MAAQpB,EAAM,eAAe,CAAC,EAE3HiB,EACE,IAAM,CAACjB,EAAM,gBAAiBA,EAAM,KAAMA,EAAM,YAAaY,EAAW,MAAOV,EAAY,KAAK,EAChG,IAAM,CACgBsB,IACDlB,GACrB,EACA,CACE,UAAW,EACb,CAAA,EAGF,MAAMiB,EAAQ,CAACb,EAAae,EAAgB,EAAGC,EAAe,IAAM,CAClE,MAAMC,EAAM,CAAA,EACZ,QAASC,EAAIH,EAAOG,EAAIlB,EAAKkB,GAAKF,EAChCC,EAAI,KAAKC,CAAC,EAEL,OAAAD,CAAA,EAGT,SAASH,GAAsB,CAC7B,MAAMK,EAAY7B,EAAM,gBAClB8B,EAAoBV,EAAW,MAC/BW,EAAkBD,EAAoBD,EAExC,GAAA3B,EAAY,OAAS6B,EAAiB,CAClC,MAAAC,EAAiBpB,EAAW,MAAQiB,EACtC3B,EAAY,MAAQ8B,EACtBZ,EAAW,MAAQY,EAEnBZ,EAAW,MAAQlB,EAAY,KACjC,MACSA,EAAY,MAAQ4B,IACzB5B,EAAY,MAAQ2B,EACtBT,EAAW,MAAQlB,EAAY,MAAQ,EAAI2B,EAEvC3B,EAAY,OAAS,EACvBkB,EAAW,MAAQlB,EAAY,MAAQ,EAEvCkB,EAAW,MAAQ,EAI3B,CAEO,MAAA,CACL,WAAAA,EACA,WAAAE,CAAA,CAEJ,CACA,KAAM,CAAE,WAAAF,EAAY,WAAAE,CAAW,EAAID,EAAiB"}
|
|
1
|
+
{"version":3,"file":"ElTablePagination.vue.esm2.js","sources":["../../src/table/ElTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T\">\nimport { computed, ref, watch } from 'vue';\nimport ElIconButton from '@/ElIconButton.vue';\n\ninterface Props {\n rows: T[];\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 totalRowsNumber = computed(() => props.rows.length);\n\nconst emitCurrentTabRows = () => emit('update:currentTabRows', props.rows.slice(currentStartItem.value, currentEndItem.value + 1));\n\nconst currentStartItem = computed(() => {\n return currentPage.value * props.rowsPerPage;\n});\n\nconst currentEndItem = computed(() => {\n const end = currentStartItem.value + props.rowsPerPage - 1;\n return end <= totalRowsNumber.value ? end : totalRowsNumber.value - 1;\n});\n\nconst emit = defineEmits<{\n (event: 'update:currentTabRows', rows: T[]): void;\n (event: 'update:currentPage', page: number): void;\n (event: 'change', page: number): void;\n}>();\n\n// number of pages, given number of rows and rows per page\nconst totalPages = computed(() => Math.ceil(totalRowsNumber.value / props.rowsPerPage));\n\nconst prevPageDisabled = computed(() => currentPage.value <= 0);\nconst nextPageDisabled = computed(() => currentPage.value >= totalPages.value - 1);\n\nconst onPageChange = (page: number) => {\n if (page > 0 && page <= totalPages.value && page !== currentPage.value) {\n emit('update:currentPage', page);\n emit('change', page);\n }\n emitCurrentTabRows();\n};\n\n// reset current page if filters have been applied\nwatch(\n () => props.rows,\n () => {\n currentPage.value = 0;\n },\n);\n\nconst goToPage = (pageNumber: number) => {\n console.log('goToPage', pageNumber, currentPage.value, sliceStart.value, totalPages.value);\n // only allow going to valid pages\n if (pageNumber < 0 || pageNumber >= totalPages.value) return;\n currentPage.value = pageNumber;\n onPageChange(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.rows, props.rowsPerPage, totalPages.value, currentPage.value],\n () => {\n calculateSliceStart();\n emitCurrentTabRows();\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</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\">…</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\">…</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\">…</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","totalRowsNumber","computed","emitCurrentTabRows","emit","currentStartItem","currentEndItem","end","__emit","totalPages","prevPageDisabled","nextPageDisabled","onPageChange","page","watch","goToPage","pageNumber","sliceStart","useNumberedPages","sliceArray","range","calculateSliceStart","start","step","arr","i","chunkSize","currentChunkStart","currentChunkEnd","lastChunkStart"],"mappings":"0iDAWA,MAAMA,EAAQC,EAMRC,EAAcC,EAAI,CAAC,EAEnBC,EAAkBC,EAAS,IAAML,EAAM,KAAK,MAAM,EAElDM,EAAqB,IAAMC,EAAK,wBAAyBP,EAAM,KAAK,MAAMQ,EAAiB,MAAOC,EAAe,MAAQ,CAAC,CAAC,EAE3HD,EAAmBH,EAAS,IACzBH,EAAY,MAAQF,EAAM,WAClC,EAEKS,EAAiBJ,EAAS,IAAM,CACpC,MAAMK,EAAMF,EAAiB,MAAQR,EAAM,YAAc,EACzD,OAAOU,GAAON,EAAgB,MAAQM,EAAMN,EAAgB,MAAQ,CAAA,CACrE,EAEKG,EAAOI,EAOPC,EAAaP,EAAS,IAAM,KAAK,KAAKD,EAAgB,MAAQJ,EAAM,WAAW,CAAC,EAEhFa,EAAmBR,EAAS,IAAMH,EAAY,OAAS,CAAC,EACxDY,EAAmBT,EAAS,IAAMH,EAAY,OAASU,EAAW,MAAQ,CAAC,EAE3EG,EAAgBC,GAAiB,CACjCA,EAAO,GAAKA,GAAQJ,EAAW,OAASI,IAASd,EAAY,QAC/DK,EAAK,qBAAsBS,CAAI,EAC/BT,EAAK,SAAUS,CAAI,GAEFV,GAAA,EAIrBW,EACE,IAAMjB,EAAM,KACZ,IAAM,CACJE,EAAY,MAAQ,CACtB,CAAA,EAGI,MAAAgB,EAAYC,GAAuB,CAC/B,QAAA,IAAI,WAAYA,EAAYjB,EAAY,MAAOkB,EAAW,MAAOR,EAAW,KAAK,EAErF,EAAAO,EAAa,GAAKA,GAAcP,EAAW,SAC/CV,EAAY,MAAQiB,EACpBJ,EAAaI,CAAU,EAAA,EAGzB,SAASE,GAAmB,CACpBD,MAAAA,EAAajB,EAAI,CAAC,EAClBmB,EAAajB,EAAS,IAAMkB,EAAMX,EAAW,KAAK,EAAE,MAAMQ,EAAW,MAAOA,EAAW,MAAQpB,EAAM,eAAe,CAAC,EAE3HiB,EACE,IAAM,CAACjB,EAAM,gBAAiBA,EAAM,KAAMA,EAAM,YAAaY,EAAW,MAAOV,EAAY,KAAK,EAChG,IAAM,CACgBsB,IACDlB,GACrB,EACA,CACE,UAAW,EACb,CAAA,EAGF,MAAMiB,EAAQ,CAACb,EAAae,EAAgB,EAAGC,EAAe,IAAM,CAClE,MAAMC,EAAM,CAAA,EACZ,QAASC,EAAIH,EAAOG,EAAIlB,EAAKkB,GAAKF,EAChCC,EAAI,KAAKC,CAAC,EAEL,OAAAD,CAAA,EAGT,SAASH,GAAsB,CAC7B,MAAMK,EAAY7B,EAAM,gBAClB8B,EAAoBV,EAAW,MAC/BW,EAAkBD,EAAoBD,EAExC,GAAA3B,EAAY,OAAS6B,EAAiB,CAClC,MAAAC,EAAiBpB,EAAW,MAAQiB,EACtC3B,EAAY,MAAQ8B,EACtBZ,EAAW,MAAQY,EAEnBZ,EAAW,MAAQlB,EAAY,KACjC,MACSA,EAAY,MAAQ4B,IACzB5B,EAAY,MAAQ2B,EACtBT,EAAW,MAAQlB,EAAY,MAAQ,EAAI2B,EAEvC3B,EAAY,OAAS,EACvBkB,EAAW,MAAQlB,EAAY,MAAQ,EAEvCkB,EAAW,MAAQ,EAI3B,CAEO,MAAA,CACL,WAAAA,EACA,WAAAE,CAAA,CAEJ,CACA,KAAM,CAAE,WAAAF,EAAY,WAAAE,CAAW,EAAID,EAAiB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.cjs.js"),t=require("./node_modules/tailwindcss/plugin.cjs.js"),i=t.default(({addBase:e})=>{e(require("./style.cjs"))},{plugins:[u.TailwindPlugin]}),l=t.default(({addBase:e})=>{e(require("./style.cjs"))});exports.defaultPlugin=i;exports.pluginWithoutStyles=l;
|
|
2
2
|
//# sourceMappingURL=tailwind.plugin.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind.plugin.cjs.js","sources":["
|
|
1
|
+
{"version":3,"file":"tailwind.plugin.cjs.js","sources":["../src/tailwind.plugin.ts"],"sourcesContent":["import { TailwindPlugin } from '@davincihealthcare/elty-design-system-foundations';\nimport plugin from 'tailwindcss/plugin';\n\nexport const defaultPlugin = plugin(\n ({ addBase }) => {\n // eslint-disable-next-line no-undef\n addBase(require('./style.cjs'));\n },\n {\n plugins: [TailwindPlugin],\n },\n);\n\nexport const pluginWithoutStyles = plugin(({ addBase }) => {\n // eslint-disable-next-line no-undef\n addBase(require('./style.cjs'));\n});\n"],"names":["defaultPlugin","plugin","addBase","TailwindPlugin","pluginWithoutStyles"],"mappings":"4OAGaA,EAAgBC,EAAA,QAC3B,CAAC,CAAE,QAAAC,CAAA,IAAc,CAEPA,EAAA,QAAQ,aAAa,CAAC,CAChC,EACA,CACE,QAAS,CAACC,EAAAA,cAAc,CAC1B,CACF,EAEaC,EAAsBH,EAAA,QAAO,CAAC,CAAE,QAAAC,KAAc,CAEjDA,EAAA,QAAQ,aAAa,CAAC,CAChC,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{TailwindPlugin as t}from"
|
|
1
|
+
import{TailwindPlugin as t}from"./node_modules/@davincihealthcare/elty-design-system-foundations/dist/index.esm.js";import r from"./node_modules/tailwindcss/plugin.esm.js";const n=r(({addBase:i})=>{i(require("./style.cjs"))},{plugins:[t]}),o=r(({addBase:i})=>{i(require("./style.cjs"))});export{n as defaultPlugin,o as pluginWithoutStyles};
|
|
2
2
|
//# sourceMappingURL=tailwind.plugin.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind.plugin.esm.js","sources":["
|
|
1
|
+
{"version":3,"file":"tailwind.plugin.esm.js","sources":["../src/tailwind.plugin.ts"],"sourcesContent":["import { TailwindPlugin } from '@davincihealthcare/elty-design-system-foundations';\nimport plugin from 'tailwindcss/plugin';\n\nexport const defaultPlugin = plugin(\n ({ addBase }) => {\n // eslint-disable-next-line no-undef\n addBase(require('./style.cjs'));\n },\n {\n plugins: [TailwindPlugin],\n },\n);\n\nexport const pluginWithoutStyles = plugin(({ addBase }) => {\n // eslint-disable-next-line no-undef\n addBase(require('./style.cjs'));\n});\n"],"names":["defaultPlugin","plugin","addBase","TailwindPlugin","pluginWithoutStyles"],"mappings":"4KAGO,MAAMA,EAAgBC,EAC3B,CAAC,CAAE,QAAAC,CAAA,IAAc,CAEPA,EAAA,QAAQ,aAAa,CAAC,CAChC,EACA,CACE,QAAS,CAACC,CAAc,CAC1B,CACF,EAEaC,EAAsBH,EAAO,CAAC,CAAE,QAAAC,KAAc,CAEjDA,EAAA,QAAQ,aAAa,CAAC,CAChC,CAAC"}
|
package/dist/types.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs.js","sources":["
|
|
1
|
+
{"version":3,"file":"types.cjs.js","sources":["../src/types.ts"],"sourcesContent":["export type OptionType = {\n __typename?: 'OptionType';\n imageUrl?: string | null;\n label: string;\n value: string;\n};\n\nexport enum Role {\n Admin = 'ADMIN',\n AuxiliaryNurse = 'AUXILIARY_NURSE',\n Clinic = 'CLINIC',\n Doctor = 'DOCTOR',\n Nurse = 'NURSE',\n Patient = 'PATIENT',\n Secretary = 'SECRETARY',\n}\n\nexport enum DrugDurationMeasures {\n Giorni = 'GIORNI',\n Mesi = 'MESI',\n Settimane = 'SETTIMANE',\n}\n\nexport enum DrugTimeMeasures {\n AlBisogno = 'AL_BISOGNO',\n Giorni = 'GIORNI',\n Mesi = 'MESI',\n Ore = 'ORE',\n Settimane = 'SETTIMANE',\n}\n\nexport enum DrugUnitMeasures {\n Amp = 'AMP',\n App = 'APP',\n Bar = 'BAR',\n Bas = 'BAS',\n Bom = 'BOM',\n Bus = 'BUS',\n Car = 'CAR',\n Cc = 'CC',\n Cer = 'CER',\n Cli = 'CLI',\n Cmo = 'CMO',\n Cpr = 'CPR',\n Cps = 'CPS',\n Cro = 'CRO',\n Div = 'DIV',\n Dos = 'DOS',\n Ero = 'ERO',\n Fia = 'FIA',\n Fil = 'FIL',\n Fla = 'FLA',\n G = 'G',\n Gar = 'GAR',\n Gra = 'GRA',\n Grn = 'GRN',\n Gtt = 'GTT',\n Imp = 'IMP',\n Inp = 'INP',\n Ins = 'INS',\n Iud = 'IUD',\n Lio = 'LIO',\n Mc = 'MC',\n Mcg = 'MCG',\n Meq = 'MEQ',\n Mg = 'MG',\n Ml = 'ML',\n Mtr = 'MTR',\n Neb = 'NEB',\n Ovu = 'OVU',\n Pas = 'PAS',\n Pen = 'PEN',\n Sac = 'SAC',\n Sir = 'SIR',\n Spu = 'SPU',\n Sup = 'SUP',\n Tam = 'TAM',\n Tub = 'TUB',\n U = 'U',\n Ual = 'UAL',\n Ui = 'UI',\n Vas = 'VAS',\n}\n\nexport interface AvatarParameters {\n avatarUrl: string | null | undefined;\n role: Role;\n}\n"],"names":["Role","DrugDurationMeasures","DrugTimeMeasures","DrugUnitMeasures"],"mappings":"gFAOY,IAAAA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,eAAiB,kBACjBA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,UAAY,YAPFA,IAAAA,GAAA,CAAA,CAAA,EAUAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,UAAY,YAHFA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACVA,EAAA,UAAY,aACZA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,IAAM,MACNA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,EAAI,IACJA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,EAAI,IACJA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MAlDIA,IAAAA,GAAA,CAAA,CAAA"}
|
package/dist/types.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.esm.js","sources":["
|
|
1
|
+
{"version":3,"file":"types.esm.js","sources":["../src/types.ts"],"sourcesContent":["export type OptionType = {\n __typename?: 'OptionType';\n imageUrl?: string | null;\n label: string;\n value: string;\n};\n\nexport enum Role {\n Admin = 'ADMIN',\n AuxiliaryNurse = 'AUXILIARY_NURSE',\n Clinic = 'CLINIC',\n Doctor = 'DOCTOR',\n Nurse = 'NURSE',\n Patient = 'PATIENT',\n Secretary = 'SECRETARY',\n}\n\nexport enum DrugDurationMeasures {\n Giorni = 'GIORNI',\n Mesi = 'MESI',\n Settimane = 'SETTIMANE',\n}\n\nexport enum DrugTimeMeasures {\n AlBisogno = 'AL_BISOGNO',\n Giorni = 'GIORNI',\n Mesi = 'MESI',\n Ore = 'ORE',\n Settimane = 'SETTIMANE',\n}\n\nexport enum DrugUnitMeasures {\n Amp = 'AMP',\n App = 'APP',\n Bar = 'BAR',\n Bas = 'BAS',\n Bom = 'BOM',\n Bus = 'BUS',\n Car = 'CAR',\n Cc = 'CC',\n Cer = 'CER',\n Cli = 'CLI',\n Cmo = 'CMO',\n Cpr = 'CPR',\n Cps = 'CPS',\n Cro = 'CRO',\n Div = 'DIV',\n Dos = 'DOS',\n Ero = 'ERO',\n Fia = 'FIA',\n Fil = 'FIL',\n Fla = 'FLA',\n G = 'G',\n Gar = 'GAR',\n Gra = 'GRA',\n Grn = 'GRN',\n Gtt = 'GTT',\n Imp = 'IMP',\n Inp = 'INP',\n Ins = 'INS',\n Iud = 'IUD',\n Lio = 'LIO',\n Mc = 'MC',\n Mcg = 'MCG',\n Meq = 'MEQ',\n Mg = 'MG',\n Ml = 'ML',\n Mtr = 'MTR',\n Neb = 'NEB',\n Ovu = 'OVU',\n Pas = 'PAS',\n Pen = 'PEN',\n Sac = 'SAC',\n Sir = 'SIR',\n Spu = 'SPU',\n Sup = 'SUP',\n Tam = 'TAM',\n Tub = 'TUB',\n U = 'U',\n Ual = 'UAL',\n Ui = 'UI',\n Vas = 'VAS',\n}\n\nexport interface AvatarParameters {\n avatarUrl: string | null | undefined;\n role: Role;\n}\n"],"names":["Role","DrugDurationMeasures","DrugTimeMeasures","DrugUnitMeasures"],"mappings":"AAOY,IAAAA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,eAAiB,kBACjBA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,UAAY,YAPFA,IAAAA,GAAA,CAAA,CAAA,EAUAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,UAAY,YAHFA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACVA,EAAA,UAAY,aACZA,EAAA,OAAS,SACTA,EAAA,KAAO,OACPA,EAAA,IAAM,MACNA,EAAA,UAAY,YALFA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,EAAI,IACJA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,GAAK,KACLA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,IAAM,MACNA,EAAA,EAAI,IACJA,EAAA,IAAM,MACNA,EAAA,GAAK,KACLA,EAAA,IAAM,MAlDIA,IAAAA,GAAA,CAAA,CAAA"}
|
package/dist/utils.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs.js","sources":["
|
|
1
|
+
{"version":3,"file":"utils.cjs.js","sources":["../src/utils.ts"],"sourcesContent":["import { onMounted, onUnmounted, ref } from 'vue';\nimport { AvatarParameters, Role } from '@/types';\n\nexport const getAvatar = (user: AvatarParameters | null | undefined): string => {\n if (user?.avatarUrl) {\n return user.avatarUrl;\n }\n if (user?.role === Role.Doctor) {\n return 'https://davinci-public.s3.eu-central-1.amazonaws.com/avatar_doctor.svg';\n } else {\n return 'https://davinci-public.s3.eu-central-1.amazonaws.com/avatar_patient.svg';\n }\n};\n\nenum MaxWidth {\n Mobile = 640,\n Tablet = 768,\n Desktop = 1024,\n LargeDesktop = 1280,\n ExtraLargeDesktop = 1536,\n}\n\nexport enum Device {\n Mobile = 'Mobile',\n Tablet = 'Tablet',\n Desktop = 'Desktop',\n}\n\nexport const useMatchDevice = () => {\n const mediaQueryMobile = window.matchMedia(`(max-width: ${MaxWidth.Mobile}px)`);\n const mediaQueryTablet = window.matchMedia(`(max-width: ${MaxWidth.Tablet}px)`);\n const mediaQueryDesktop = window.matchMedia(`(max-width: ${MaxWidth.Desktop}px)`);\n\n const device = ref<Device>(mediaQueryDesktop.matches ? Device.Desktop : mediaQueryTablet.matches ? Device.Tablet : Device.Mobile);\n\n const onMatchMobileMediaChange = () => {\n device.value = Device.Mobile;\n };\n\n const onMatchTabletMediaChange = () => {\n device.value = Device.Tablet;\n };\n\n const onMatchDesktopMediaChange = () => {\n device.value = Device.Desktop;\n };\n\n onMounted(() => {\n mediaQueryMobile.addEventListener('change', onMatchMobileMediaChange);\n mediaQueryTablet.addEventListener('change', onMatchTabletMediaChange);\n mediaQueryDesktop.addEventListener('change', onMatchDesktopMediaChange);\n });\n\n onUnmounted(() => {\n mediaQueryMobile.removeEventListener('change', onMatchMobileMediaChange);\n mediaQueryTablet.removeEventListener('change', onMatchTabletMediaChange);\n mediaQueryDesktop.removeEventListener('change', onMatchDesktopMediaChange);\n });\n\n return device;\n};\n"],"names":["getAvatar","user","Role","Device","useMatchDevice","mediaQueryMobile","mediaQueryTablet","mediaQueryDesktop","device","ref","onMatchMobileMediaChange","onMatchTabletMediaChange","onMatchDesktopMediaChange","onMounted","onUnmounted"],"mappings":"mIAGaA,EAAaC,GACpBA,GAAA,MAAAA,EAAM,UACDA,EAAK,WAEVA,GAAA,YAAAA,EAAM,QAASC,EAAA,KAAK,OACf,yEAEA,0EAYC,IAAAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UAHAA,IAAAA,GAAA,CAAA,CAAA,EAML,MAAMC,EAAiB,IAAM,CAClC,MAAMC,EAAmB,OAAO,WAAW,oBAAmC,EACxEC,EAAmB,OAAO,WAAW,oBAAmC,EACxEC,EAAoB,OAAO,WAAW,qBAAoC,EAE1EC,EAASC,MAAYF,EAAkB,QAAU,UAAiBD,EAAiB,QAAU,SAAgB,UAE7GI,EAA2B,IAAM,CACrCF,EAAO,MAAQ,QAAA,EAGXG,EAA2B,IAAM,CACrCH,EAAO,MAAQ,QAAA,EAGXI,EAA4B,IAAM,CACtCJ,EAAO,MAAQ,SAAA,EAGjBK,OAAAA,EAAAA,UAAU,IAAM,CACGR,EAAA,iBAAiB,SAAUK,CAAwB,EACnDJ,EAAA,iBAAiB,SAAUK,CAAwB,EAClDJ,EAAA,iBAAiB,SAAUK,CAAyB,CAAA,CACvE,EAEDE,EAAAA,YAAY,IAAM,CACCT,EAAA,oBAAoB,SAAUK,CAAwB,EACtDJ,EAAA,oBAAoB,SAAUK,CAAwB,EACrDJ,EAAA,oBAAoB,SAAUK,CAAyB,CAAA,CAC1E,EAEMJ,CACT"}
|
package/dist/utils.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.esm.js","sources":["
|
|
1
|
+
{"version":3,"file":"utils.esm.js","sources":["../src/utils.ts"],"sourcesContent":["import { onMounted, onUnmounted, ref } from 'vue';\nimport { AvatarParameters, Role } from '@/types';\n\nexport const getAvatar = (user: AvatarParameters | null | undefined): string => {\n if (user?.avatarUrl) {\n return user.avatarUrl;\n }\n if (user?.role === Role.Doctor) {\n return 'https://davinci-public.s3.eu-central-1.amazonaws.com/avatar_doctor.svg';\n } else {\n return 'https://davinci-public.s3.eu-central-1.amazonaws.com/avatar_patient.svg';\n }\n};\n\nenum MaxWidth {\n Mobile = 640,\n Tablet = 768,\n Desktop = 1024,\n LargeDesktop = 1280,\n ExtraLargeDesktop = 1536,\n}\n\nexport enum Device {\n Mobile = 'Mobile',\n Tablet = 'Tablet',\n Desktop = 'Desktop',\n}\n\nexport const useMatchDevice = () => {\n const mediaQueryMobile = window.matchMedia(`(max-width: ${MaxWidth.Mobile}px)`);\n const mediaQueryTablet = window.matchMedia(`(max-width: ${MaxWidth.Tablet}px)`);\n const mediaQueryDesktop = window.matchMedia(`(max-width: ${MaxWidth.Desktop}px)`);\n\n const device = ref<Device>(mediaQueryDesktop.matches ? Device.Desktop : mediaQueryTablet.matches ? Device.Tablet : Device.Mobile);\n\n const onMatchMobileMediaChange = () => {\n device.value = Device.Mobile;\n };\n\n const onMatchTabletMediaChange = () => {\n device.value = Device.Tablet;\n };\n\n const onMatchDesktopMediaChange = () => {\n device.value = Device.Desktop;\n };\n\n onMounted(() => {\n mediaQueryMobile.addEventListener('change', onMatchMobileMediaChange);\n mediaQueryTablet.addEventListener('change', onMatchTabletMediaChange);\n mediaQueryDesktop.addEventListener('change', onMatchDesktopMediaChange);\n });\n\n onUnmounted(() => {\n mediaQueryMobile.removeEventListener('change', onMatchMobileMediaChange);\n mediaQueryTablet.removeEventListener('change', onMatchTabletMediaChange);\n mediaQueryDesktop.removeEventListener('change', onMatchDesktopMediaChange);\n });\n\n return device;\n};\n"],"names":["getAvatar","user","Role","Device","useMatchDevice","mediaQueryMobile","mediaQueryTablet","mediaQueryDesktop","device","ref","onMatchMobileMediaChange","onMatchTabletMediaChange","onMatchDesktopMediaChange","onMounted","onUnmounted"],"mappings":"gGAGa,MAAAA,EAAaC,GACpBA,GAAA,MAAAA,EAAM,UACDA,EAAK,WAEVA,GAAA,YAAAA,EAAM,QAASC,EAAK,OACf,yEAEA,0EAYC,IAAAC,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UAHAA,IAAAA,GAAA,CAAA,CAAA,EAML,MAAMC,EAAiB,IAAM,CAClC,MAAMC,EAAmB,OAAO,WAAW,oBAAmC,EACxEC,EAAmB,OAAO,WAAW,oBAAmC,EACxEC,EAAoB,OAAO,WAAW,qBAAoC,EAE1EC,EAASC,EAAYF,EAAkB,QAAU,UAAiBD,EAAiB,QAAU,SAAgB,UAE7GI,EAA2B,IAAM,CACrCF,EAAO,MAAQ,QAAA,EAGXG,EAA2B,IAAM,CACrCH,EAAO,MAAQ,QAAA,EAGXI,EAA4B,IAAM,CACtCJ,EAAO,MAAQ,SAAA,EAGjB,OAAAK,EAAU,IAAM,CACGR,EAAA,iBAAiB,SAAUK,CAAwB,EACnDJ,EAAA,iBAAiB,SAAUK,CAAwB,EAClDJ,EAAA,iBAAiB,SAAUK,CAAyB,CAAA,CACvE,EAEDE,EAAY,IAAM,CACCT,EAAA,oBAAoB,SAAUK,CAAwB,EACtDJ,EAAA,oBAAoB,SAAUK,CAAwB,EACrDJ,EAAA,oBAAoB,SAAUK,CAAyB,CAAA,CAC1E,EAEMJ,CACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.plugin.cjs.js","sources":["
|
|
1
|
+
{"version":3,"file":"vue.plugin.cjs.js","sources":["../src/vue.plugin.ts"],"sourcesContent":["import { defineValidationRules } from './forms/validation-rules';\n\nexport default {\n install: () => {\n defineValidationRules();\n },\n};\n"],"names":["vue_plugin","defineValidationRules"],"mappings":"+JAEeA,EAAA,CACb,QAAS,IAAM,CACSC,EAAAA,uBACxB,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.plugin.esm.js","sources":["
|
|
1
|
+
{"version":3,"file":"vue.plugin.esm.js","sources":["../src/vue.plugin.ts"],"sourcesContent":["import { defineValidationRules } from './forms/validation-rules';\n\nexport default {\n install: () => {\n defineValidationRules();\n },\n};\n"],"names":["vue_plugin","defineValidationRules"],"mappings":"wEAEA,MAAeA,EAAA,CACb,QAAS,IAAM,CACSC,GACxB,CACF"}
|