VDataTable.mjs 7.5 KB

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