@coreui/vue-pro
Version:
UI Components Library for Vue.js
261 lines (258 loc) • 9.61 kB
JavaScript
;
const filterColumns = (items, columnFilter, columnFilterState, itemsDataColumns) => {
if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
return items;
}
if (Object.entries(columnFilterState).length === 0) {
return items;
}
let filteredItems = [...items];
for (const [key, value] of Object.entries(columnFilterState)) {
if (typeof value === 'function') {
filteredItems = filteredItems.filter((item) => value(item[key]));
}
else {
const columnFilterValue = String(value).toLowerCase();
if (columnFilterValue && itemsDataColumns.includes(key)) {
filteredItems = filteredItems.filter((item) => String(item[key]).toLowerCase().includes(columnFilterValue));
}
}
}
return filteredItems;
};
const filterTable = (items, tableFilter, tableFilterState, itemsDataColumns) => {
if (!tableFilterState ||
(tableFilter && typeof tableFilter === 'object' && tableFilter.external)) {
return items;
}
const filter = tableFilterState.toLowerCase();
return items.filter((item) => itemsDataColumns.some((key) => String(item[key]).toLowerCase().includes(filter)));
};
const getClickedColumnName = (target, columnNames, selectable) => {
const clickedCell = target.closest('td');
if (!clickedCell) {
return '';
}
const row = clickedCell.closest('tr');
if (!row) {
return '';
}
const cells = Array.from(row.children);
let index = cells.indexOf(clickedCell);
if (selectable) {
index -= 1;
}
return columnNames[index] || '';
};
const getColumnKey = (column) => typeof column === 'object' ? column.key : column;
const getColumnLabel = (column) => typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column);
const getColumnName = (column) => typeof column === 'object' ? column.key : column;
const getColumnNames = (columns, items) => {
if (columns) {
const _columns = [];
for (const column of columns) {
if (typeof column === 'object' && column.children) {
_columns.push(...getColumnNames(column.children, []));
continue;
}
typeof column === 'object' ? _columns.push(column.key) : _columns.push(column);
}
return _columns;
}
return getColumnNamesFromItems(items);
};
const getColumns = (_columns) => {
const columns = [];
for (const column of _columns) {
if (typeof column === 'object' && column.group && column.children) {
columns.push(...getColumns(column.children));
continue;
}
if (typeof column === 'object' && column.children) {
columns.push(...getColumns(column.children));
}
columns.push(column);
}
return columns;
};
const countColumns = (columns) => {
let count = 0;
for (const column of columns) {
if (!column.children || column.children.length === 0) {
count++;
}
else {
count += countColumns(column.children);
}
}
return count;
};
const getColumnGroups = (columns) => {
const groups = [];
const traverseColumns = (column, deep = 0, colSpan = 0) => {
const groups = [];
if (column.children) {
for (const _column of column.children) {
if (!_column.group) {
colSpan++;
}
groups.push(...traverseColumns(_column, deep + 1, colSpan));
}
}
if (typeof column === 'object' && column.group) {
const { children, group, ...rest } = column;
groups.push({
deep: deep,
label: group,
...(children && { colspan: countColumns(children) }),
...rest,
});
}
return groups;
};
if (columns) {
for (const column of columns) {
if (typeof column === 'object' && column.group) {
const objects = traverseColumns(column);
if (objects) {
for (const object of objects) {
const { deep, ...rest } = object;
if (deep === undefined) {
continue;
}
for (let i = 0; i < deep; i++) {
if (groups[i]) {
continue;
}
groups.push([]);
}
if (groups[deep]) {
groups[deep].push(rest);
}
else {
groups.push([rest]);
}
}
}
}
}
}
return groups;
};
const getColumnNamesFromItems = (items) => Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_');
const getColumnSorterFunction = (column) => {
if (column &&
typeof column === 'object' &&
column.sorter &&
typeof column.sorter === 'function') {
return column.sorter;
}
return;
};
const getColumnSorterState = (key, sorterState) => {
const state = sorterState && sorterState.find((el) => el.column === key);
return state ? state.state : 0;
};
const getColumnValues = (items, key) => items.map((item) => item[key]);
const getTableDataCellProps = (column, item, colName) => {
const props = {
...(typeof column === 'object' && column._colProps),
...item._cellProps?.all,
...item._cellProps?.[colName],
};
return props;
};
const getTableDataCellStyles = (column, item, colName) => {
const styles = {
...(typeof column === 'object' && column._colStyle),
...item._cellStyle?.all,
...item._cellStyle?.[colName],
};
return styles;
};
const getTableHeaderCellProps = (column) => typeof column === 'object' && column._props ? column._props : {};
const getTableHeaderCellStyles = (column, columnSorter) => {
const style = {};
const isSortable = columnSorter &&
(typeof column !== 'object' ||
(typeof column === 'object' && (column.sorter === undefined || column.sorter)));
if (isSortable) {
style.cursor = 'pointer';
}
if (typeof column === 'object' && column._style) {
Object.assign(style, column._style);
}
return style;
};
const isSortable = (index, columns, columnSorter, itemsDataColumns, columnNames) => {
const key = columnNames[index];
const isDataColumn = itemsDataColumns.includes(key);
const column = columns ? columns[index] : undefined;
return (!!columnSorter &&
(!columns ||
typeof column !== 'object' ||
(typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
isDataColumn);
};
const pretifyName = (name) => {
return name
.replace(/[-_.]/g, ' ')
.replace(/ +/g, ' ')
.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
.split(' ')
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(' ');
};
const sortBy = (column, items, key, order) => {
const sorterFunction = getColumnSorterFunction(column);
const sortedItems = [...items].sort(sorterFunction ||
((a, b) => {
const valA = a[key];
const valB = b[key];
const aValue = typeof valA === 'number' ? valA : String(valA).toLowerCase();
const bValue = typeof valB === 'number' ? valB : String(valB).toLowerCase();
return aValue > bValue ? 1 : bValue > aValue ? -1 : 0;
}));
return order === 'desc' ? sortedItems.reverse() : sortedItems;
};
const sortItems = (columns, columnSorter, items, itemsDataColumns, sorterState) => {
if ((columnSorter && typeof columnSorter === 'object' && columnSorter.external) ||
sorterState.length === 0) {
return items;
}
let sortedItems = [...items];
for (const sorter of [...sorterState].reverse()) {
const key = sorter.column;
const order = sorter.state;
const column = columns &&
columns.find((column) => typeof column === 'object' && column.key === key);
if (!key || !itemsDataColumns.includes(key)) {
continue;
}
sortedItems = sortBy(column, sortedItems, key, order);
}
return sortedItems;
};
exports.countColumns = countColumns;
exports.filterColumns = filterColumns;
exports.filterTable = filterTable;
exports.getClickedColumnName = getClickedColumnName;
exports.getColumnGroups = getColumnGroups;
exports.getColumnKey = getColumnKey;
exports.getColumnLabel = getColumnLabel;
exports.getColumnName = getColumnName;
exports.getColumnNames = getColumnNames;
exports.getColumnNamesFromItems = getColumnNamesFromItems;
exports.getColumnSorterFunction = getColumnSorterFunction;
exports.getColumnSorterState = getColumnSorterState;
exports.getColumnValues = getColumnValues;
exports.getColumns = getColumns;
exports.getTableDataCellProps = getTableDataCellProps;
exports.getTableDataCellStyles = getTableDataCellStyles;
exports.getTableHeaderCellProps = getTableHeaderCellProps;
exports.getTableHeaderCellStyles = getTableHeaderCellStyles;
exports.isSortable = isSortable;
exports.pretifyName = pretifyName;
exports.sortBy = sortBy;
exports.sortItems = sortItems;
//# sourceMappingURL=utils.js.map