VDataTableFooter.mjs 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VDataTableFooter.css";
  4. // Components
  5. import { VPagination } from "../VPagination/index.mjs";
  6. import { VSelect } from "../VSelect/index.mjs"; // Composables
  7. import { usePagination } from "./composables/paginate.mjs";
  8. import { IconValue } from "../../composables/icons.mjs";
  9. import { useLocale } from "../../composables/locale.mjs"; // Utilities
  10. import { computed } from 'vue';
  11. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  12. export const makeVDataTableFooterProps = propsFactory({
  13. prevIcon: {
  14. type: IconValue,
  15. default: '$prev'
  16. },
  17. nextIcon: {
  18. type: IconValue,
  19. default: '$next'
  20. },
  21. firstIcon: {
  22. type: IconValue,
  23. default: '$first'
  24. },
  25. lastIcon: {
  26. type: IconValue,
  27. default: '$last'
  28. },
  29. itemsPerPageText: {
  30. type: String,
  31. default: '$vuetify.dataFooter.itemsPerPageText'
  32. },
  33. pageText: {
  34. type: String,
  35. default: '$vuetify.dataFooter.pageText'
  36. },
  37. firstPageLabel: {
  38. type: String,
  39. default: '$vuetify.dataFooter.firstPage'
  40. },
  41. prevPageLabel: {
  42. type: String,
  43. default: '$vuetify.dataFooter.prevPage'
  44. },
  45. nextPageLabel: {
  46. type: String,
  47. default: '$vuetify.dataFooter.nextPage'
  48. },
  49. lastPageLabel: {
  50. type: String,
  51. default: '$vuetify.dataFooter.lastPage'
  52. },
  53. itemsPerPageOptions: {
  54. type: Array,
  55. default: () => [{
  56. value: 10,
  57. title: '10'
  58. }, {
  59. value: 25,
  60. title: '25'
  61. }, {
  62. value: 50,
  63. title: '50'
  64. }, {
  65. value: 100,
  66. title: '100'
  67. }, {
  68. value: -1,
  69. title: '$vuetify.dataFooter.itemsPerPageAll'
  70. }]
  71. },
  72. showCurrentPage: Boolean
  73. }, 'VDataTableFooter');
  74. export const VDataTableFooter = genericComponent()({
  75. name: 'VDataTableFooter',
  76. props: makeVDataTableFooterProps(),
  77. setup(props, _ref) {
  78. let {
  79. slots
  80. } = _ref;
  81. const {
  82. t
  83. } = useLocale();
  84. const {
  85. page,
  86. pageCount,
  87. startIndex,
  88. stopIndex,
  89. itemsLength,
  90. itemsPerPage,
  91. setItemsPerPage
  92. } = usePagination();
  93. const itemsPerPageOptions = computed(() => props.itemsPerPageOptions.map(option => {
  94. if (typeof option === 'number') {
  95. return {
  96. value: option,
  97. title: option === -1 ? t('$vuetify.dataFooter.itemsPerPageAll') : String(option)
  98. };
  99. }
  100. return {
  101. ...option,
  102. title: !isNaN(Number(option.title)) ? option.title : t(option.title)
  103. };
  104. }));
  105. useRender(() => {
  106. const paginationProps = VPagination.filterProps(props);
  107. return _createVNode("div", {
  108. "class": "v-data-table-footer"
  109. }, [slots.prepend?.(), _createVNode("div", {
  110. "class": "v-data-table-footer__items-per-page"
  111. }, [_createVNode("span", null, [t(props.itemsPerPageText)]), _createVNode(VSelect, {
  112. "items": itemsPerPageOptions.value,
  113. "modelValue": itemsPerPage.value,
  114. "onUpdate:modelValue": v => setItemsPerPage(Number(v)),
  115. "density": "compact",
  116. "variant": "outlined",
  117. "hide-details": true
  118. }, null)]), _createVNode("div", {
  119. "class": "v-data-table-footer__info"
  120. }, [_createVNode("div", null, [t(props.pageText, !itemsLength.value ? 0 : startIndex.value + 1, stopIndex.value, itemsLength.value)])]), _createVNode("div", {
  121. "class": "v-data-table-footer__pagination"
  122. }, [_createVNode(VPagination, _mergeProps({
  123. "modelValue": page.value,
  124. "onUpdate:modelValue": $event => page.value = $event,
  125. "density": "comfortable",
  126. "first-aria-label": props.firstPageLabel,
  127. "last-aria-label": props.lastPageLabel,
  128. "length": pageCount.value,
  129. "next-aria-label": props.nextPageLabel,
  130. "previous-aria-label": props.prevPageLabel,
  131. "rounded": true,
  132. "show-first-last-page": true,
  133. "total-visible": props.showCurrentPage ? 1 : 0,
  134. "variant": "plain"
  135. }, paginationProps), null)])]);
  136. });
  137. return {};
  138. }
  139. });
  140. //# sourceMappingURL=VDataTableFooter.mjs.map