headers.mjs 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. // Utilities
  2. import { capitalize, inject, provide, ref, watchEffect } from 'vue';
  3. import { consoleError, propsFactory } from "../../../util/index.mjs"; // Types
  4. export const makeDataTableHeaderProps = propsFactory({
  5. headers: Array
  6. }, 'DataTable-header');
  7. export const VDataTableHeadersSymbol = Symbol.for('vuetify:data-table-headers');
  8. const defaultHeader = {
  9. title: '',
  10. sortable: false
  11. };
  12. const defaultActionHeader = {
  13. ...defaultHeader,
  14. width: 48
  15. };
  16. function priorityQueue() {
  17. let arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  18. const queue = arr.map(element => ({
  19. element,
  20. priority: 0
  21. }));
  22. return {
  23. enqueue: (element, priority) => {
  24. let added = false;
  25. for (let i = 0; i < queue.length; i++) {
  26. const item = queue[i];
  27. if (item.priority > priority) {
  28. queue.splice(i, 0, {
  29. element,
  30. priority
  31. });
  32. added = true;
  33. break;
  34. }
  35. }
  36. if (!added) queue.push({
  37. element,
  38. priority
  39. });
  40. },
  41. size: () => queue.length,
  42. count: () => {
  43. let count = 0;
  44. if (!queue.length) return 0;
  45. const whole = Math.floor(queue[0].priority);
  46. for (let i = 0; i < queue.length; i++) {
  47. if (Math.floor(queue[i].priority) === whole) count += 1;
  48. }
  49. return count;
  50. },
  51. dequeue: () => {
  52. return queue.shift();
  53. }
  54. };
  55. }
  56. function extractLeaves(item) {
  57. let columns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
  58. if (!item.children) {
  59. columns.push(item);
  60. } else {
  61. for (const child of item.children) {
  62. extractLeaves(child, columns);
  63. }
  64. }
  65. return columns;
  66. }
  67. function extractKeys(headers) {
  68. let keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Set();
  69. for (const item of headers) {
  70. if (item.key) keys.add(item.key);
  71. if (item.children) {
  72. extractKeys(item.children, keys);
  73. }
  74. }
  75. return keys;
  76. }
  77. function getDefaultItem(item) {
  78. if (!item.key) return undefined;
  79. if (item.key === 'data-table-group') return defaultHeader;
  80. if (['data-table-expand', 'data-table-select'].includes(item.key)) return defaultActionHeader;
  81. return undefined;
  82. }
  83. function getDepth(item) {
  84. let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  85. if (!item.children) return depth;
  86. return Math.max(depth, ...item.children.map(child => getDepth(child, depth + 1)));
  87. }
  88. function parseFixedColumns(items) {
  89. let seenFixed = false;
  90. function setFixed(item) {
  91. let parentFixed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  92. if (!item) return;
  93. if (parentFixed) {
  94. item.fixed = true;
  95. }
  96. if (item.fixed) {
  97. if (item.children) {
  98. for (let i = item.children.length - 1; i >= 0; i--) {
  99. setFixed(item.children[i], true);
  100. }
  101. } else {
  102. if (!seenFixed) {
  103. item.lastFixed = true;
  104. } else if (isNaN(+item.width)) {
  105. consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`);
  106. }
  107. seenFixed = true;
  108. }
  109. } else {
  110. if (item.children) {
  111. for (let i = item.children.length - 1; i >= 0; i--) {
  112. setFixed(item.children[i]);
  113. }
  114. } else {
  115. seenFixed = false;
  116. }
  117. }
  118. }
  119. for (let i = items.length - 1; i >= 0; i--) {
  120. setFixed(items[i]);
  121. }
  122. function setFixedOffset(item) {
  123. let fixedOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  124. if (!item) return fixedOffset;
  125. if (item.children) {
  126. item.fixedOffset = fixedOffset;
  127. for (const child of item.children) {
  128. fixedOffset = setFixedOffset(child, fixedOffset);
  129. }
  130. } else if (item.fixed) {
  131. item.fixedOffset = fixedOffset;
  132. fixedOffset += parseFloat(item.width || '0') || 0;
  133. }
  134. return fixedOffset;
  135. }
  136. let fixedOffset = 0;
  137. for (const item of items) {
  138. fixedOffset = setFixedOffset(item, fixedOffset);
  139. }
  140. }
  141. function parse(items, maxDepth) {
  142. const headers = [];
  143. let currentDepth = 0;
  144. const queue = priorityQueue(items);
  145. while (queue.size() > 0) {
  146. let rowSize = queue.count();
  147. const row = [];
  148. let fraction = 1;
  149. while (rowSize > 0) {
  150. const {
  151. element: item,
  152. priority
  153. } = queue.dequeue();
  154. const diff = maxDepth - currentDepth - getDepth(item);
  155. row.push({
  156. ...item,
  157. rowspan: diff ?? 1,
  158. colspan: item.children ? extractLeaves(item).length : 1
  159. });
  160. if (item.children) {
  161. for (const child of item.children) {
  162. // This internally sorts items that are on the same priority "row"
  163. const sort = priority % 1 + fraction / Math.pow(10, currentDepth + 2);
  164. queue.enqueue(child, currentDepth + diff + sort);
  165. }
  166. }
  167. fraction += 1;
  168. rowSize -= 1;
  169. }
  170. currentDepth += 1;
  171. headers.push(row);
  172. }
  173. const columns = items.map(item => extractLeaves(item)).flat();
  174. return {
  175. columns,
  176. headers
  177. };
  178. }
  179. function convertToInternalHeaders(items) {
  180. const internalHeaders = [];
  181. for (const item of items) {
  182. const defaultItem = {
  183. ...getDefaultItem(item),
  184. ...item
  185. };
  186. const key = defaultItem.key ?? (typeof defaultItem.value === 'string' ? defaultItem.value : null);
  187. const value = defaultItem.value ?? key ?? null;
  188. const internalItem = {
  189. ...defaultItem,
  190. key,
  191. value,
  192. sortable: defaultItem.sortable ?? (defaultItem.key != null || !!defaultItem.sort),
  193. children: defaultItem.children ? convertToInternalHeaders(defaultItem.children) : undefined
  194. };
  195. internalHeaders.push(internalItem);
  196. }
  197. return internalHeaders;
  198. }
  199. export function createHeaders(props, options) {
  200. const headers = ref([]);
  201. const columns = ref([]);
  202. const sortFunctions = ref({});
  203. const sortRawFunctions = ref({});
  204. const filterFunctions = ref({});
  205. watchEffect(() => {
  206. const _headers = props.headers || Object.keys(props.items[0] ?? {}).map(key => ({
  207. key,
  208. title: capitalize(key)
  209. }));
  210. const items = _headers.slice();
  211. const keys = extractKeys(items);
  212. if (options?.groupBy?.value.length && !keys.has('data-table-group')) {
  213. items.unshift({
  214. key: 'data-table-group',
  215. title: 'Group'
  216. });
  217. }
  218. if (options?.showSelect?.value && !keys.has('data-table-select')) {
  219. items.unshift({
  220. key: 'data-table-select'
  221. });
  222. }
  223. if (options?.showExpand?.value && !keys.has('data-table-expand')) {
  224. items.push({
  225. key: 'data-table-expand'
  226. });
  227. }
  228. const internalHeaders = convertToInternalHeaders(items);
  229. parseFixedColumns(internalHeaders);
  230. const maxDepth = Math.max(...internalHeaders.map(item => getDepth(item))) + 1;
  231. const parsed = parse(internalHeaders, maxDepth);
  232. headers.value = parsed.headers;
  233. columns.value = parsed.columns;
  234. const flatHeaders = parsed.headers.flat(1);
  235. for (const header of flatHeaders) {
  236. if (!header.key) continue;
  237. if (header.sortable) {
  238. if (header.sort) {
  239. sortFunctions.value[header.key] = header.sort;
  240. }
  241. if (header.sortRaw) {
  242. sortRawFunctions.value[header.key] = header.sortRaw;
  243. }
  244. }
  245. if (header.filter) {
  246. filterFunctions.value[header.key] = header.filter;
  247. }
  248. }
  249. });
  250. const data = {
  251. headers,
  252. columns,
  253. sortFunctions,
  254. sortRawFunctions,
  255. filterFunctions
  256. };
  257. provide(VDataTableHeadersSymbol, data);
  258. return data;
  259. }
  260. export function useHeaders() {
  261. const data = inject(VDataTableHeadersSymbol);
  262. if (!data) throw new Error('Missing headers!');
  263. return data;
  264. }
  265. //# sourceMappingURL=headers.mjs.map