99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
// Composables
|
|
import { useProxiedModel } from "../../../composables/proxiedModel.mjs"; // Utilities
|
|
import { computed, inject, provide, watch, watchEffect } from 'vue';
|
|
import { clamp, getCurrentInstance, propsFactory } from "../../../util/index.mjs"; // Types
|
|
export const makeDataTablePaginateProps = propsFactory({
|
|
page: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
itemsPerPage: {
|
|
type: [Number, String],
|
|
default: 10
|
|
}
|
|
}, 'DataTable-paginate');
|
|
const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
|
|
export function createPagination(props) {
|
|
const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1));
|
|
const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10));
|
|
return {
|
|
page,
|
|
itemsPerPage
|
|
};
|
|
}
|
|
export function providePagination(options) {
|
|
const {
|
|
page,
|
|
itemsPerPage,
|
|
itemsLength
|
|
} = options;
|
|
const startIndex = computed(() => {
|
|
if (itemsPerPage.value === -1) return 0;
|
|
return itemsPerPage.value * (page.value - 1);
|
|
});
|
|
const stopIndex = computed(() => {
|
|
if (itemsPerPage.value === -1) return itemsLength.value;
|
|
return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
|
|
});
|
|
const pageCount = computed(() => {
|
|
if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
|
|
return Math.ceil(itemsLength.value / itemsPerPage.value);
|
|
});
|
|
watchEffect(() => {
|
|
if (page.value > pageCount.value) {
|
|
page.value = pageCount.value;
|
|
}
|
|
});
|
|
function setItemsPerPage(value) {
|
|
itemsPerPage.value = value;
|
|
page.value = 1;
|
|
}
|
|
function nextPage() {
|
|
page.value = clamp(page.value + 1, 1, pageCount.value);
|
|
}
|
|
function prevPage() {
|
|
page.value = clamp(page.value - 1, 1, pageCount.value);
|
|
}
|
|
function setPage(value) {
|
|
page.value = clamp(value, 1, pageCount.value);
|
|
}
|
|
const data = {
|
|
page,
|
|
itemsPerPage,
|
|
startIndex,
|
|
stopIndex,
|
|
pageCount,
|
|
itemsLength,
|
|
nextPage,
|
|
prevPage,
|
|
setPage,
|
|
setItemsPerPage
|
|
};
|
|
provide(VDataTablePaginationSymbol, data);
|
|
return data;
|
|
}
|
|
export function usePagination() {
|
|
const data = inject(VDataTablePaginationSymbol);
|
|
if (!data) throw new Error('Missing pagination!');
|
|
return data;
|
|
}
|
|
export function usePaginatedItems(options) {
|
|
const vm = getCurrentInstance('usePaginatedItems');
|
|
const {
|
|
items,
|
|
startIndex,
|
|
stopIndex,
|
|
itemsPerPage
|
|
} = options;
|
|
const paginatedItems = computed(() => {
|
|
if (itemsPerPage.value <= 0) return items.value;
|
|
return items.value.slice(startIndex.value, stopIndex.value);
|
|
});
|
|
watch(paginatedItems, val => {
|
|
vm.emit('update:currentItems', val);
|
|
});
|
|
return {
|
|
paginatedItems
|
|
};
|
|
}
|
|
//# sourceMappingURL=paginate.mjs.map
|