VDataTableServer.mjs 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
  2. // Components
  3. import { makeDataTableProps } from "./VDataTable.mjs";
  4. import { makeVDataTableFooterProps, VDataTableFooter } from "./VDataTableFooter.mjs";
  5. import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
  6. import { VDataTableRows } from "./VDataTableRows.mjs";
  7. import { VDivider } from "../VDivider/index.mjs";
  8. import { VTable } from "../VTable/index.mjs"; // Composables
  9. import { provideExpanded } from "./composables/expand.mjs";
  10. import { createGroupBy, provideGroupBy, useGroupedItems } from "./composables/group.mjs";
  11. import { createHeaders } from "./composables/headers.mjs";
  12. import { useDataTableItems } from "./composables/items.mjs";
  13. import { useOptions } from "./composables/options.mjs";
  14. import { createPagination, makeDataTablePaginateProps, providePagination } from "./composables/paginate.mjs";
  15. import { provideSelection } from "./composables/select.mjs";
  16. import { createSort, provideSort } from "./composables/sort.mjs";
  17. import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
  18. import { computed, provide, toRef, toRefs } from 'vue';
  19. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  20. export const makeVDataTableServerProps = propsFactory({
  21. itemsLength: {
  22. type: [Number, String],
  23. required: true
  24. },
  25. ...makeDataTablePaginateProps(),
  26. ...makeDataTableProps(),
  27. ...makeVDataTableFooterProps()
  28. }, 'VDataTableServer');
  29. export const VDataTableServer = genericComponent()({
  30. name: 'VDataTableServer',
  31. props: makeVDataTableServerProps(),
  32. emits: {
  33. 'update:modelValue': value => true,
  34. 'update:page': page => true,
  35. 'update:itemsPerPage': page => true,
  36. 'update:sortBy': sortBy => true,
  37. 'update:options': options => true,
  38. 'update:expanded': options => true,
  39. 'update:groupBy': value => true
  40. },
  41. setup(props, _ref) {
  42. let {
  43. attrs,
  44. slots
  45. } = _ref;
  46. const {
  47. groupBy
  48. } = createGroupBy(props);
  49. const {
  50. sortBy,
  51. multiSort,
  52. mustSort
  53. } = createSort(props);
  54. const {
  55. page,
  56. itemsPerPage
  57. } = createPagination(props);
  58. const {
  59. disableSort
  60. } = toRefs(props);
  61. const itemsLength = computed(() => parseInt(props.itemsLength, 10));
  62. const {
  63. columns,
  64. headers
  65. } = createHeaders(props, {
  66. groupBy,
  67. showSelect: toRef(props, 'showSelect'),
  68. showExpand: toRef(props, 'showExpand')
  69. });
  70. const {
  71. items
  72. } = useDataTableItems(props, columns);
  73. const {
  74. toggleSort
  75. } = provideSort({
  76. sortBy,
  77. multiSort,
  78. mustSort,
  79. page
  80. });
  81. const {
  82. opened,
  83. isGroupOpen,
  84. toggleGroup,
  85. extractRows
  86. } = provideGroupBy({
  87. groupBy,
  88. sortBy,
  89. disableSort
  90. });
  91. const {
  92. pageCount,
  93. setItemsPerPage
  94. } = providePagination({
  95. page,
  96. itemsPerPage,
  97. itemsLength
  98. });
  99. const {
  100. flatItems
  101. } = useGroupedItems(items, groupBy, opened);
  102. const {
  103. isSelected,
  104. select,
  105. selectAll,
  106. toggleSelect,
  107. someSelected,
  108. allSelected
  109. } = provideSelection(props, {
  110. allItems: items,
  111. currentPage: items
  112. });
  113. const {
  114. isExpanded,
  115. toggleExpand
  116. } = provideExpanded(props);
  117. const itemsWithoutGroups = computed(() => extractRows(items.value));
  118. useOptions({
  119. page,
  120. itemsPerPage,
  121. sortBy,
  122. groupBy,
  123. search: toRef(props, 'search')
  124. });
  125. provide('v-data-table', {
  126. toggleSort,
  127. sortBy
  128. });
  129. provideDefaults({
  130. VDataTableRows: {
  131. hideNoData: toRef(props, 'hideNoData'),
  132. noDataText: toRef(props, 'noDataText'),
  133. loading: toRef(props, 'loading'),
  134. loadingText: toRef(props, 'loadingText')
  135. }
  136. });
  137. const slotProps = computed(() => ({
  138. page: page.value,
  139. itemsPerPage: itemsPerPage.value,
  140. sortBy: sortBy.value,
  141. pageCount: pageCount.value,
  142. toggleSort,
  143. setItemsPerPage,
  144. someSelected: someSelected.value,
  145. allSelected: allSelected.value,
  146. isSelected,
  147. select,
  148. selectAll,
  149. toggleSelect,
  150. isExpanded,
  151. toggleExpand,
  152. isGroupOpen,
  153. toggleGroup,
  154. items: itemsWithoutGroups.value.map(item => item.raw),
  155. internalItems: itemsWithoutGroups.value,
  156. groupedItems: flatItems.value,
  157. columns: columns.value,
  158. headers: headers.value
  159. }));
  160. useRender(() => {
  161. const dataTableFooterProps = VDataTableFooter.filterProps(props);
  162. const dataTableHeadersProps = VDataTableHeaders.filterProps(props);
  163. const dataTableRowsProps = VDataTableRows.filterProps(props);
  164. const tableProps = VTable.filterProps(props);
  165. return _createVNode(VTable, _mergeProps({
  166. "class": ['v-data-table', {
  167. 'v-data-table--loading': props.loading
  168. }, props.class],
  169. "style": props.style
  170. }, tableProps), {
  171. top: () => slots.top?.(slotProps.value),
  172. default: () => slots.default ? slots.default(slotProps.value) : _createVNode(_Fragment, null, [slots.colgroup?.(slotProps.value), !props.hideDefaultHeader && _createVNode("thead", {
  173. "key": "thead",
  174. "class": "v-data-table__thead",
  175. "role": "rowgroup"
  176. }, [_createVNode(VDataTableHeaders, _mergeProps(dataTableHeadersProps, {
  177. "sticky": props.fixedHeader
  178. }), slots)]), slots.thead?.(slotProps.value), !props.hideDefaultBody && _createVNode("tbody", {
  179. "class": "v-data-table__tbody",
  180. "role": "rowgroup"
  181. }, [slots['body.prepend']?.(slotProps.value), slots.body ? slots.body(slotProps.value) : _createVNode(VDataTableRows, _mergeProps(attrs, dataTableRowsProps, {
  182. "items": flatItems.value
  183. }), slots), slots['body.append']?.(slotProps.value)]), slots.tbody?.(slotProps.value), slots.tfoot?.(slotProps.value)]),
  184. bottom: () => slots.bottom ? slots.bottom(slotProps.value) : !props.hideDefaultFooter && _createVNode(_Fragment, null, [_createVNode(VDivider, null, null), _createVNode(VDataTableFooter, dataTableFooterProps, {
  185. prepend: slots['footer.prepend']
  186. })])
  187. });
  188. });
  189. }
  190. });
  191. //# sourceMappingURL=VDataTableServer.mjs.map