vuestic-ui
Version:
Vue 3 UI Framework
128 lines (127 loc) • 4.03 kB
JavaScript
import { ref, computed, watch } from "vue";
import { u as useThrottleProps, b as useThrottleFunction } from "../../../composables/useThrottle.mjs";
const useSortableProps = {
...useThrottleProps,
sortBy: { type: String },
columnSorted: { type: Object },
sortingOrder: { type: [String, null] },
disableClientSideSorting: { type: Boolean, default: false }
};
const useSortable = (columns, filteredRows, props, emit) => {
const sortByFallback = ref("");
const sortBySync = computed({
get() {
if (props.sortBy === void 0) {
return sortByFallback.value;
} else {
return props.sortBy;
}
},
set(value) {
if (props.sortBy === void 0) {
sortByFallback.value = value;
}
emit("update:sortBy", value);
}
});
const sortingOrderFallback = ref(null);
const sortingOrderSync = computed({
get() {
if (props.sortingOrder === void 0) {
return sortingOrderFallback.value;
} else {
return props.sortingOrder;
}
},
set(value) {
if (props.sortingOrder === void 0) {
sortingOrderFallback.value = value;
}
emit("update:sortingOrder", value);
}
});
const defaultSortingFn = (a, b) => {
if (typeof a === "string" && typeof b === "string") {
return a.localeCompare(b);
}
if (typeof a === "number" && typeof b === "number") {
return a - b;
}
const aParsed = parseFloat(a);
const bParsed = parseFloat(b);
if (!isNaN(aParsed) && !isNaN(bParsed)) {
return aParsed - bParsed;
}
if (!isNaN(aParsed)) {
return -1;
}
if (!isNaN(bParsed)) {
return 1;
}
return 0;
};
const sortedRows = computed(() => {
if (props.disableClientSideSorting) {
return filteredRows.value;
}
if (filteredRows.value.length <= 1) {
return filteredRows.value;
}
const columnIndex = columns.value.findIndex(
({ name, sortable }) => sortBySync.value === name && sortable
);
const column = columns.value[columnIndex];
if (!column) {
return filteredRows.value;
}
const sortingOrderRatio = sortingOrderSync.value === "desc" ? -1 : 1;
return [...filteredRows.value].sort((a, b) => {
if (sortingOrderSync.value === null) {
return a.initialIndex - b.initialIndex;
} else {
const firstSource = a.cells[columnIndex].source;
const secondSource = b.cells[columnIndex].source;
return sortingOrderRatio * (typeof column.sortingFn === "function" ? column.sortingFn(firstSource, secondSource) : defaultSortingFn(firstSource, secondSource));
}
});
});
watch(sortedRows, () => {
emit("sorted", {
sortBy: sortBySync.value,
sortingOrder: sortingOrderSync.value,
items: sortedRows.value.map((row) => row.source),
itemsIndexes: sortedRows.value.map((row) => row.initialIndex)
});
});
const getNextSortingOptionsValue = (value, options) => {
const index = options.findIndex((sortingValue) => sortingValue === value);
return index !== -1 ? options[(index + 1) % options.length] : options[0];
};
function toggleSorting(column) {
let value;
if (column.name === sortBySync.value) {
value = getNextSortingOptionsValue(sortingOrderSync.value, column.sortingOptions);
} else {
sortBySync.value = column.name;
value = column.sortingOptions[0];
}
sortingOrderSync.value = value;
emit("columnSorted", { columnName: column.name, value, column });
}
const toggleSortingThrottled = useThrottleFunction(toggleSorting, props);
const sortingOrderIconName = computed(() => {
return sortingOrderSync.value === "asc" ? "va-sort-asc" : sortingOrderSync.value === "desc" ? "va-sort-desc" : "va-unsorted";
});
return {
sortBySync,
sortingOrderSync,
toggleSorting: toggleSortingThrottled,
sortedRows,
sortingOrderIconName
};
};
export {
useSortable as a,
useSortableProps as u
};
//# sourceMappingURL=useSortable.mjs.map