paginate.mjs 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. // Composables
  2. import { useProxiedModel } from "../../../composables/proxiedModel.mjs"; // Utilities
  3. import { computed, inject, provide, watch } from 'vue';
  4. import { clamp, getCurrentInstance, propsFactory } from "../../../util/index.mjs"; // Types
  5. export const makeDataTablePaginateProps = propsFactory({
  6. page: {
  7. type: [Number, String],
  8. default: 1
  9. },
  10. itemsPerPage: {
  11. type: [Number, String],
  12. default: 10
  13. }
  14. }, 'DataTable-paginate');
  15. const VDataTablePaginationSymbol = Symbol.for('vuetify:data-table-pagination');
  16. export function createPagination(props) {
  17. const page = useProxiedModel(props, 'page', undefined, value => +(value ?? 1));
  18. const itemsPerPage = useProxiedModel(props, 'itemsPerPage', undefined, value => +(value ?? 10));
  19. return {
  20. page,
  21. itemsPerPage
  22. };
  23. }
  24. export function providePagination(options) {
  25. const {
  26. page,
  27. itemsPerPage,
  28. itemsLength
  29. } = options;
  30. const startIndex = computed(() => {
  31. if (itemsPerPage.value === -1) return 0;
  32. return itemsPerPage.value * (page.value - 1);
  33. });
  34. const stopIndex = computed(() => {
  35. if (itemsPerPage.value === -1) return itemsLength.value;
  36. return Math.min(itemsLength.value, startIndex.value + itemsPerPage.value);
  37. });
  38. const pageCount = computed(() => {
  39. if (itemsPerPage.value === -1 || itemsLength.value === 0) return 1;
  40. return Math.ceil(itemsLength.value / itemsPerPage.value);
  41. });
  42. // Don't run immediately, items may not have been loaded yet: #17966
  43. watch([page, pageCount], () => {
  44. if (page.value > pageCount.value) {
  45. page.value = pageCount.value;
  46. }
  47. });
  48. function setItemsPerPage(value) {
  49. itemsPerPage.value = value;
  50. page.value = 1;
  51. }
  52. function nextPage() {
  53. page.value = clamp(page.value + 1, 1, pageCount.value);
  54. }
  55. function prevPage() {
  56. page.value = clamp(page.value - 1, 1, pageCount.value);
  57. }
  58. function setPage(value) {
  59. page.value = clamp(value, 1, pageCount.value);
  60. }
  61. const data = {
  62. page,
  63. itemsPerPage,
  64. startIndex,
  65. stopIndex,
  66. pageCount,
  67. itemsLength,
  68. nextPage,
  69. prevPage,
  70. setPage,
  71. setItemsPerPage
  72. };
  73. provide(VDataTablePaginationSymbol, data);
  74. return data;
  75. }
  76. export function usePagination() {
  77. const data = inject(VDataTablePaginationSymbol);
  78. if (!data) throw new Error('Missing pagination!');
  79. return data;
  80. }
  81. export function usePaginatedItems(options) {
  82. const vm = getCurrentInstance('usePaginatedItems');
  83. const {
  84. items,
  85. startIndex,
  86. stopIndex,
  87. itemsPerPage
  88. } = options;
  89. const paginatedItems = computed(() => {
  90. if (itemsPerPage.value <= 0) return items.value;
  91. return items.value.slice(startIndex.value, stopIndex.value);
  92. });
  93. watch(paginatedItems, val => {
  94. vm.emit('update:currentItems', val);
  95. });
  96. return {
  97. paginatedItems
  98. };
  99. }
  100. //# sourceMappingURL=paginate.mjs.map