VDataIterator.mjs 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import { createVNode as _createVNode } from "vue";
  2. // Components
  3. import { VFadeTransition } from "../transitions/index.mjs";
  4. import { makeDataTableExpandProps, provideExpanded } from "../VDataTable/composables/expand.mjs";
  5. import { makeDataTableGroupProps, provideGroupBy, useGroupedItems } from "../VDataTable/composables/group.mjs";
  6. import { useOptions } from "../VDataTable/composables/options.mjs";
  7. import { createPagination, makeDataTablePaginateProps, providePagination, usePaginatedItems } from "../VDataTable/composables/paginate.mjs";
  8. import { makeDataTableSelectProps, provideSelection } from "../VDataTable/composables/select.mjs";
  9. import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from "../VDataTable/composables/sort.mjs"; // Composables
  10. import { makeDataIteratorItemsProps, useDataIteratorItems } from "./composables/items.mjs";
  11. import { makeComponentProps } from "../../composables/component.mjs";
  12. import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
  13. import { LoaderSlot } from "../../composables/loader.mjs";
  14. import { useProxiedModel } from "../../composables/proxiedModel.mjs";
  15. import { makeTagProps } from "../../composables/tag.mjs";
  16. import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  17. import { computed, toRef } from 'vue';
  18. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  19. export const makeVDataIteratorProps = propsFactory({
  20. search: String,
  21. loading: Boolean,
  22. ...makeComponentProps(),
  23. ...makeDataIteratorItemsProps(),
  24. ...makeDataTableSelectProps(),
  25. ...makeDataTableSortProps(),
  26. ...makeDataTablePaginateProps({
  27. itemsPerPage: 5
  28. }),
  29. ...makeDataTableExpandProps(),
  30. ...makeDataTableGroupProps(),
  31. ...makeFilterProps(),
  32. ...makeTagProps(),
  33. ...makeTransitionProps({
  34. transition: {
  35. component: VFadeTransition,
  36. hideOnLeave: true
  37. }
  38. })
  39. }, 'VDataIterator');
  40. export const VDataIterator = genericComponent()({
  41. name: 'VDataIterator',
  42. props: makeVDataIteratorProps(),
  43. emits: {
  44. 'update:modelValue': value => true,
  45. 'update:groupBy': value => true,
  46. 'update:page': value => true,
  47. 'update:itemsPerPage': value => true,
  48. 'update:sortBy': value => true,
  49. 'update:options': value => true,
  50. 'update:expanded': value => true,
  51. 'update:currentItems': value => true
  52. },
  53. setup(props, _ref) {
  54. let {
  55. slots
  56. } = _ref;
  57. const groupBy = useProxiedModel(props, 'groupBy');
  58. const search = toRef(props, 'search');
  59. const {
  60. items
  61. } = useDataIteratorItems(props);
  62. const {
  63. filteredItems
  64. } = useFilter(props, items, search, {
  65. transform: item => item.raw
  66. });
  67. const {
  68. sortBy,
  69. multiSort,
  70. mustSort
  71. } = createSort(props);
  72. const {
  73. page,
  74. itemsPerPage
  75. } = createPagination(props);
  76. const {
  77. toggleSort
  78. } = provideSort({
  79. sortBy,
  80. multiSort,
  81. mustSort,
  82. page
  83. });
  84. const {
  85. sortByWithGroups,
  86. opened,
  87. extractRows,
  88. isGroupOpen,
  89. toggleGroup
  90. } = provideGroupBy({
  91. groupBy,
  92. sortBy
  93. });
  94. const {
  95. sortedItems
  96. } = useSortedItems(props, filteredItems, sortByWithGroups, {
  97. transform: item => item.raw
  98. });
  99. const {
  100. flatItems
  101. } = useGroupedItems(sortedItems, groupBy, opened);
  102. const itemsLength = computed(() => flatItems.value.length);
  103. const {
  104. startIndex,
  105. stopIndex,
  106. pageCount,
  107. prevPage,
  108. nextPage,
  109. setItemsPerPage,
  110. setPage
  111. } = providePagination({
  112. page,
  113. itemsPerPage,
  114. itemsLength
  115. });
  116. const {
  117. paginatedItems
  118. } = usePaginatedItems({
  119. items: flatItems,
  120. startIndex,
  121. stopIndex,
  122. itemsPerPage
  123. });
  124. const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
  125. const {
  126. isSelected,
  127. select,
  128. selectAll,
  129. toggleSelect
  130. } = provideSelection(props, {
  131. allItems: items,
  132. currentPage: paginatedItemsWithoutGroups
  133. });
  134. const {
  135. isExpanded,
  136. toggleExpand
  137. } = provideExpanded(props);
  138. useOptions({
  139. page,
  140. itemsPerPage,
  141. sortBy,
  142. groupBy,
  143. search
  144. });
  145. const slotProps = computed(() => ({
  146. page: page.value,
  147. itemsPerPage: itemsPerPage.value,
  148. sortBy: sortBy.value,
  149. pageCount: pageCount.value,
  150. toggleSort,
  151. prevPage,
  152. nextPage,
  153. setPage,
  154. setItemsPerPage,
  155. isSelected,
  156. select,
  157. selectAll,
  158. toggleSelect,
  159. isExpanded,
  160. toggleExpand,
  161. isGroupOpen,
  162. toggleGroup,
  163. items: paginatedItemsWithoutGroups.value,
  164. groupedItems: paginatedItems.value
  165. }));
  166. useRender(() => _createVNode(props.tag, {
  167. "class": ['v-data-iterator', {
  168. 'v-data-iterator--loading': props.loading
  169. }, props.class],
  170. "style": props.style
  171. }, {
  172. default: () => [slots.header?.(slotProps.value), _createVNode(MaybeTransition, {
  173. "transition": props.transition
  174. }, {
  175. default: () => [props.loading ? _createVNode(LoaderSlot, {
  176. "key": "loader",
  177. "name": "v-data-iterator",
  178. "active": true
  179. }, {
  180. default: slotProps => slots.loader?.(slotProps)
  181. }) : _createVNode("div", {
  182. "key": "items"
  183. }, [!paginatedItems.value.length ? slots['no-data']?.() : slots.default?.(slotProps.value)])]
  184. }), slots.footer?.(slotProps.value)]
  185. }));
  186. return {};
  187. }
  188. });
  189. //# sourceMappingURL=VDataIterator.mjs.map