ivue-material-plus
Version:
A high quality UI components Library with Vue.js
449 lines (446 loc) • 12.9 kB
JavaScript
import { getCurrentInstance, ref, unref } from 'vue';
import { hasOwn } from '@vue/shared';
import { throwError } from '../../../utils/error.mjs';
import useExpand from './expand.mjs';
import useTree from './tree.mjs';
import useCurrent from './current.mjs';
import { orderBy, toggleRowStatus, getRowIdentity, getKeysMap, getColumnById, getColumnByKey } from '../utils.mjs';
const flattenColumns = (columns) => {
const result = [];
columns.forEach((column) => {
if (column.children) {
result.push.apply(result, flattenColumns(column.children));
} else {
result.push(column);
}
});
return result;
};
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
);
};
function useWatcher() {
const vm = getCurrentInstance();
const data = ref([]);
const _data = ref([]);
const rowKey = ref(null);
const selectOnIndeterminate = ref(false);
const isAllSelected = ref(false);
const selection = ref([]);
const isFixedColumns = ref(false);
const hoverRow = ref(null);
const originColumns = ref([]);
const columns = ref([]);
const _columns = ref([]);
const fixedColumns = ref([]);
const rightFixedColumns = ref([]);
const leafColumnsLength = ref(0);
const fixedLeafColumnsLength = ref(0);
const rightFixedLeafColumnsLength = ref(0);
const selectable = ref(null);
const reserveSelection = ref(false);
const sortProp = ref(null);
const sortingColumn = ref(null);
const sortOrder = ref(null);
const filteredData = ref([]);
const filters = ref({});
const _toggleAllSelection = () => {
var _a, _b;
const value = selectOnIndeterminate.value ? !isAllSelected.value : !(isAllSelected.value || selection.value.length);
isAllSelected.value = value;
let selectionChanged = false;
let childrenCount = 0;
const rowKey2 = (_b = (_a = vm == null ? void 0 : vm.store) == null ? void 0 : _a.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) {
vm.emit("on-selection-change", selection.value || []);
}
vm.emit("on-select-all", selection.value);
};
const {
toggleRowExpansion,
updateExpandRows,
setExpandRowKeys,
isRowExpanded,
states: expandStates
} = useExpand({
data,
rowKey
});
const {
loadOrToggle,
updateTreeData,
updateTreeExpandKeys,
toggleTreeExpansion,
states: treeStates
} = useTree({
data,
rowKey
});
const isRowKey = () => {
if (!rowKey.value) {
throwError("ivue-table", "prop row-key is required");
}
};
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 updateColumns = () => {
const notFixedColumns = _columns.value.filter((column) => !column.fixed);
fixedColumns.value = _columns.value.filter(
(column) => column.fixed === true || column.fixed === "left"
) || [];
rightFixedColumns.value = _columns.value.filter(
(column) => column.fixed === "right"
);
originColumns.value = [];
originColumns.value = originColumns.value.concat(fixedColumns.value).concat(notFixedColumns).concat(rightFixedColumns.value);
const leafColumns = flattenColumns(notFixedColumns);
const fixedLeafColumns = flattenColumns(fixedColumns.value);
const rightFixedLeafColumns = flattenColumns(rightFixedColumns.value);
leafColumnsLength.value = leafColumns.length;
fixedLeafColumnsLength.value = fixedLeafColumns.length;
rightFixedLeafColumnsLength.value = rightFixedLeafColumns.length;
columns.value = [];
columns.value = columns.value.concat(fixedLeafColumns).concat(leafColumns).concat(rightFixedLeafColumns);
isFixedColumns.value = fixedColumns.value.length > 0 || rightFixedColumns.value.length > 0;
};
const {
updateCurrentRowData,
updateCurrentRow,
setCurrentRowKey,
states: currentData
} = useCurrent({
data,
rowKey
});
const scheduleLayout = (needUpdateColumns, immediate = false) => {
if (needUpdateColumns) {
updateColumns();
}
if (immediate) {
vm.state.updateLayout();
} else {
vm.state.debouncedUpdateLayout();
}
};
const isSelected = (row) => {
return selection.value.includes(row);
};
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) {
vm.emit("on-select", newSelection, row);
}
vm.emit("on-selection-change", newSelection);
}
};
const updateAllSelected = () => {
var _a, _b, _c;
if (((_a = data.value) == null ? void 0 : _a.length) === 0) {
isAllSelected.value = false;
return;
}
let selectedMap;
if (rowKey.value) {
selectedMap = getKeysMap(selection.value, rowKey.value);
}
const isSelected2 = (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 = vm == null ? void 0 : vm.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 _a;
if (!vm || !vm.store) {
return 0;
}
const { treeData } = vm.store.states;
let count = 0;
const children = (_a = treeData.value[rowKey2]) == null ? void 0 : _a.children;
if (children) {
count += children.length;
children.forEach((childKey) => {
count += getChildrenCount(childKey);
});
}
return count;
};
const clearSelection = () => {
isAllSelected.value = false;
const oldSelection = selection.value;
if (oldSelection.length) {
selection.value = [];
vm.emit("on-selection-change", []);
}
};
const cleanRedundantSelection = () => {
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;
vm.emit("on-selection-change", newSelection);
}
};
const handleExecQueryData = (filter = true) => {
if (filter) {
initFilterData();
}
initSortData();
};
const initSortData = () => {
data.value = sortData(filteredData.value, {
sortingColumn: sortingColumn.value,
sortProp: sortProp.value,
sortOrder: sortOrder.value
});
};
const initFilterData = () => {
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 updateSort = (column, prop, order) => {
if (sortingColumn.value && sortingColumn.value !== column) {
sortingColumn.value.order = null;
}
sortingColumn.value = column;
sortProp.value = prop;
sortOrder.value = order;
};
const assertRowKey = () => {
if (!rowKey.value) {
throwError("ivue-table", "prop row-key is required");
}
};
const updateFilters = (columns2, values) => {
if (!Array.isArray(columns2)) {
columns2 = [columns2];
}
const obj = {};
columns2.forEach((item) => {
filters.value[`${item.id}`] = values;
obj[item.columnKey || item.id] = values;
});
return obj;
};
const clearSort = () => {
if (!sortingColumn.value) {
return;
}
updateSort(null, null, null);
vm.store.commit("changeSortCondition", {
silent: true
});
};
const clearFilter = (columnKeys) => {
const { tableHeaderContent } = vm.refs;
if (!tableHeaderContent) {
return;
}
const panels = Object.assign({}, tableHeaderContent.filterPanels);
const keys = Object.keys(panels);
if (!keys.length) {
return;
}
if (typeof columnKeys === "string") {
columnKeys = [columnKeys];
}
if (Array.isArray(columnKeys)) {
const _columns2 = columnKeys.map(
(key) => getColumnByKey(
{
columns: columns.value
},
key
)
);
keys.forEach((key) => {
const column = _columns2.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
vm.store.commit("filterChange", {
column: _columns2,
values: [],
silent: true,
multi: true
});
} else {
keys.forEach((key) => {
const column = columns.value.find((col) => col.id === key);
if (column) {
column.filteredValue = [];
}
});
filters.value = {};
vm.store.commit("filterChange", {
column: {},
values: [],
silent: true
});
}
};
const toggleRowExpansionAdapter = (row, expanded) => {
const hasExpandColumn = columns.value.some(({ type }) => type === "expand");
if (hasExpandColumn) {
toggleRowExpansion(row, expanded);
} else {
toggleTreeExpansion(row, expanded);
}
};
const setExpandRowKeysAdapter = (val) => {
setExpandRowKeys(val);
updateTreeExpandKeys(val);
};
return {
_toggleAllSelection,
toggleAllSelection: () => {
},
isRowKey,
updateSelectionByRowKey,
updateColumns,
scheduleLayout,
updateCurrentRowData,
updateCurrentRow,
isSelected,
toggleRowSelection,
updateAllSelected,
clearSelection,
cleanRedundantSelection,
handleExecQueryData,
updateSort,
assertRowKey,
updateFilters,
clearSort,
clearFilter,
getSelectionRows,
toggleRowExpansion,
toggleRowExpansionAdapter,
updateExpandRows,
setExpandRowKeysAdapter,
setCurrentRowKey,
isRowExpanded,
updateTreeData,
loadOrToggle,
states: {
data,
_data,
rowKey,
selectOnIndeterminate,
isFixedColumns,
hoverRow,
columns,
_columns,
originColumns,
rightFixedLeafColumnsLength,
fixedLeafColumnsLength,
fixedColumns,
rightFixedColumns,
isAllSelected,
selectable,
reserveSelection,
selection,
sortProp,
sortingColumn,
sortOrder,
...expandStates,
...treeStates,
...currentData
}
};
}
export { useWatcher as default };
//# sourceMappingURL=watcher.mjs.map