element-plus
Version:
A Component Library for Vue 3
432 lines (429 loc) • 13.3 kB
JavaScript
import { getCurrentInstance, toRefs, ref, watch, unref } from 'vue';
import '../../../../utils/index.mjs';
import { orderBy, getKeysMap, toggleRowStatus, getRowIdentity, getColumnById, getColumnByKey } from '../util.mjs';
import useExpand from './expand.mjs';
import useCurrent from './current.mjs';
import useTree from './tree.mjs';
import { hasOwn } from '@vue/shared';
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
if (!sortingColumn || typeof sortingColumn.sortable === "string") {
return data;
}
return orderBy(data, states.sortProp, states.sortOrder, sortingColumn.sortMethod, sortingColumn.sortBy);
};
const doFlattenColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push.apply(result, doFlattenColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
function useWatcher() {
var _a;
const instance = getCurrentInstance();
const { size: tableSize } = toRefs((_a = instance.proxy) == null ? void 0 : _a.$props);
const rowKey = ref(null);
const data = ref([]);
const _data = ref([]);
const isComplex = ref(false);
const _columns = ref([]);
const originColumns = ref([]);
const columns = ref([]);
const fixedColumns = ref([]);
const rightFixedColumns = ref([]);
const leafColumns = ref([]);
const fixedLeafColumns = ref([]);
const rightFixedLeafColumns = ref([]);
const leafColumnsLength = ref(0);
const fixedLeafColumnsLength = ref(0);
const rightFixedLeafColumnsLength = ref(0);
const isAllSelected = ref(false);
const selection = ref([]);
const reserveSelection = ref(false);
const selectOnIndeterminate = ref(false);
const selectable = ref(null);
const filters = ref({});
const filteredData = ref(null);
const sortingColumn = ref(null);
const sortProp = ref(null);
const sortOrder = ref(null);
const hoverRow = ref(null);
watch(data, () => instance.state && scheduleLayout(false), {
deep: true
});
const assertRowKey = () => {
if (!rowKey.value)
throw new Error("[ElTable] prop row-key is required");
};
const updateColumns = () => {
fixedColumns.value = _columns.value.filter((column) => column.fixed === true || column.fixed === "left");
rightFixedColumns.value = _columns.value.filter((column) => column.fixed === "right");
if (fixedColumns.value.length > 0 && _columns.value[0] && _columns.value[0].type === "selection" && !_columns.value[0].fixed) {
_columns.value[0].fixed = true;
fixedColumns.value.unshift(_columns.value[0]);
}
const notFixedColumns = _columns.value.filter((column) => !column.fixed);
originColumns.value = [].concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
const leafColumns2 = doFlattenColumns(notFixedColumns);
const fixedLeafColumns2 = doFlattenColumns(fixedColumns.value);
const rightFixedLeafColumns2 = doFlattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns2.length;
fixedLeafColumnsLength.value = fixedLeafColumns2.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns2.length;
columns.value = [].concat(fixedLeafColumns2).concat(leafColumns2).concat(rightFixedLeafColumns2);
isComplex.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
instance.state.doLayout();
} else {
instance.state.debouncedUpdateLayout();
}
};
const isSelected = (row) => {
return selection.value.includes(row);
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
if (oldSelection.length) {
selection.value = [];
instance.emit("selection-change", []);
}
};
const cleanSelection = () => {
let deleted;
if (rowKey.value) {
deleted = [];
const selectedMap = getKeysMap(selection.value, rowKey.value);
const dataMap = getKeysMap(data.value, rowKey.value);
for (const key in selectedMap) {
if (hasOwn(selectedMap, key) && !dataMap[key]) {
deleted.push(selectedMap[key].row);
}
}
} else {
deleted = selection.value.filter((item) => !data.value.includes(item));
}
if (deleted.length) {
const newSelection = selection.value.filter((item) => !deleted.includes(item));
selection.value = newSelection;
instance.emit("selection-change", newSelection.slice());
}
};
const getSelectionRows = () => {
return (selection.value || []).slice();
};
const toggleRowSelection = (row, selected = void 0, emitChange = true) => {
const changed = toggleRowStatus(selection.value, row, selected);
if (changed) {
const newSelection = (selection.value || []).slice();
if (emitChange) {
instance.emit("select", newSelection, row);
}
instance.emit("selection-change", newSelection);
}
};
const _toggleAllSelection = () => {
var _a2, _b;
const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey2 = (_b = (_a2 = instance == null ? void 0 : instance.store) == null ? void 0 : _a2.states) == null ? void 0 : _b.rowKey.value;
data.value.forEach((row, index) => {
const rowIndex = index + childrenCount;
if (selectable.value) {
if (selectable.value.call(null, row, rowIndex) && toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
} else {
if (toggleRowStatus(selection.value, row, value)) {
selectionChanged = true;
}
}
childrenCount += getChildrenCount(getRowIdentity(row, rowKey2));
});
if (selectionChanged) {
instance.emit("selection-change", selection.value ? selection.value.slice() : []);
}
instance.emit("select-all", selection.value);
};
const updateSelectionByRowKey = () => {
const selectedMap = getKeysMap(selection.value, rowKey.value);
data.value.forEach((row) => {
const rowId = getRowIdentity(row, rowKey.value);
const rowInfo = selectedMap[rowId];
if (rowInfo) {
selection.value[rowInfo.index] = row;
}
});
};
const updateAllSelected = () => {
var _a2, _b, _c;
if (((_a2 = data.value) == null ? void 0 : _a2.length) === 0) {
isAllSelected.value = false;
return;
}
let selectedMap;
if (rowKey.value) {
selectedMap = getKeysMap(selection.value, rowKey.value);
}
const isSelected2 = function(row) {
if (selectedMap) {
return !!selectedMap[getRowIdentity(row, rowKey.value)];
} else {
return selection.value.includes(row);
}
};
let isAllSelected_ = true;
let selectedCount = 0;
let childrenCount = 0;
for (let i = 0, j = (data.value || []).length; i < j; i++) {
const keyProp = (_c = (_b = instance == null ? void 0 : instance.store) == null ? void 0 : _b.states) == null ? void 0 : _c.rowKey.value;
const rowIndex = i + childrenCount;
const item = data.value[i];
const isRowSelectable = selectable.value && selectable.value.call(null, item, rowIndex);
if (!isSelected2(item)) {
if (!selectable.value || isRowSelectable) {
isAllSelected_ = false;
break;
}
} else {
selectedCount++;
}
childrenCount += getChildrenCount(getRowIdentity(item, keyProp));
}
if (selectedCount === 0)
isAllSelected_ = false;
isAllSelected.value = isAllSelected_;
};
const getChildrenCount = (rowKey2) => {
var _a2;
if (!instance || !instance.store)
return 0;
const { treeData } = instance.store.states;
let count = 0;
const children = (_a2 = treeData.value[rowKey2]) == null ? void 0 : _a2.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const updateFilters = (columns2, values) => {
if (!Array.isArray(columns2)) {
columns2 = [columns2];
}
const filters_ = {};
columns2.forEach((col) => {
filters.value[col.id] = values;
filters_[col.columnKey || col.id] = values;
});
return filters_;
};
const updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const execFilter = () => {
let sourceData = unref(_data);
Object.keys(filters.value).forEach((columnId) => {
const values = filters.value[columnId];
if (!values || values.length === 0)
return;
const column = getColumnById({
columns: columns.value
}, columnId);
if (column && column.filterMethod) {
sourceData = sourceData.filter((row) => {
return values.some((value) => column.filterMethod.call(null, value, row, column));
});
}
});
filteredData.value = sourceData;
};
const execSort = () => {
data.value = sortData(filteredData.value, {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value
});
};
const execQuery = (ignore = void 0) => {
if (!(ignore && ignore.filter)) {
execFilter();
}
execSort();
};
const clearFilter = (columnKeys) => {
const { tableHeaderRef } = instance.refs;
if (!tableHeaderRef)
return;
const panels = Object.assign({}, tableHeaderRef.filterPanels);
const keys = Object.keys(panels);
if (!keys.length)
return;
if (typeof columnKeys === "string") {
columnKeys = [columnKeys];
}
if (Array.isArray(columnKeys)) {
const columns_ = columnKeys.map((key) => getColumnByKey({
columns: columns.value
}, key));
keys.forEach((key) => {
const column = columns_.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
instance.store.commit("filterChange", {
column: columns_,
values: [],
silent: true,
multi: true
});
} else {
keys.forEach((key) => {
const column = columns.value.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
instance.store.commit("filterChange", {
column: {},
values: [],
silent: true
});
}
};
const clearSort = () => {
if (!sortingColumn.value)
return;
updateSort(null, null, null);
instance.store.commit("changeSortCondition", {
silent: true
});
};
const {
setExpandRowKeys,
toggleRowExpansion,
updateExpandRows,
states: expandStates,
isRowExpanded
} = useExpand({
data,
rowKey
});
const {
updateTreeExpandKeys,
toggleTreeExpansion,
updateTreeData,
loadOrToggle,
states: treeStates
} = useTree({
data,
rowKey
});
const {
updateCurrentRowData,
updateCurrentRow,
setCurrentRowKey,
states: currentData
} = useCurrent({
data,
rowKey
});
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
} else {
toggleTreeExpansion(row, expanded);
}
};
return {
assertRowKey,
updateColumns,
scheduleLayout,
isSelected,
clearSelection,
cleanSelection,
getSelectionRows,
toggleRowSelection,
_toggleAllSelection,
toggleAllSelection: null,
updateSelectionByRowKey,
updateAllSelected,
updateFilters,
updateCurrentRow,
updateSort,
execFilter,
execSort,
execQuery,
clearFilter,
clearSort,
toggleRowExpansion,
setExpandRowKeysAdapter,
setCurrentRowKey,
toggleRowExpansionAdapter,
isRowExpanded,
updateExpandRows,
updateCurrentRowData,
loadOrToggle,
updateTreeData,
states: {
tableSize,
rowKey,
data,
_data,
isComplex,
_columns,
originColumns,
columns,
fixedColumns,
rightFixedColumns,
leafColumns,
fixedLeafColumns,
rightFixedLeafColumns,
leafColumnsLength,
fixedLeafColumnsLength,
rightFixedLeafColumnsLength,
isAllSelected,
selection,
reserveSelection,
selectOnIndeterminate,
selectable,
filters,
filteredData,
sortingColumn,
sortProp,
sortOrder,
hoverRow,
...expandStates,
...treeStates,
...currentData
}
};
}
export { useWatcher as default };
//# sourceMappingURL=watcher.mjs.map