select.mjs 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. // Composables
  2. import { useProxiedModel } from "../../../composables/proxiedModel.mjs"; // Utilities
  3. import { computed, inject, provide } from 'vue';
  4. import { deepEqual, propsFactory, wrapInArray } from "../../../util/index.mjs"; // Types
  5. const singleSelectStrategy = {
  6. showSelectAll: false,
  7. allSelected: () => [],
  8. select: _ref => {
  9. let {
  10. items,
  11. value
  12. } = _ref;
  13. return new Set(value ? [items[0]?.value] : []);
  14. },
  15. selectAll: _ref2 => {
  16. let {
  17. selected
  18. } = _ref2;
  19. return selected;
  20. }
  21. };
  22. const pageSelectStrategy = {
  23. showSelectAll: true,
  24. allSelected: _ref3 => {
  25. let {
  26. currentPage
  27. } = _ref3;
  28. return currentPage;
  29. },
  30. select: _ref4 => {
  31. let {
  32. items,
  33. value,
  34. selected
  35. } = _ref4;
  36. for (const item of items) {
  37. if (value) selected.add(item.value);else selected.delete(item.value);
  38. }
  39. return selected;
  40. },
  41. selectAll: _ref5 => {
  42. let {
  43. value,
  44. currentPage,
  45. selected
  46. } = _ref5;
  47. return pageSelectStrategy.select({
  48. items: currentPage,
  49. value,
  50. selected
  51. });
  52. }
  53. };
  54. const allSelectStrategy = {
  55. showSelectAll: true,
  56. allSelected: _ref6 => {
  57. let {
  58. allItems
  59. } = _ref6;
  60. return allItems;
  61. },
  62. select: _ref7 => {
  63. let {
  64. items,
  65. value,
  66. selected
  67. } = _ref7;
  68. for (const item of items) {
  69. if (value) selected.add(item.value);else selected.delete(item.value);
  70. }
  71. return selected;
  72. },
  73. selectAll: _ref8 => {
  74. let {
  75. value,
  76. allItems,
  77. selected
  78. } = _ref8;
  79. return allSelectStrategy.select({
  80. items: allItems,
  81. value,
  82. selected
  83. });
  84. }
  85. };
  86. export const makeDataTableSelectProps = propsFactory({
  87. showSelect: Boolean,
  88. selectStrategy: {
  89. type: [String, Object],
  90. default: 'page'
  91. },
  92. modelValue: {
  93. type: Array,
  94. default: () => []
  95. },
  96. valueComparator: {
  97. type: Function,
  98. default: deepEqual
  99. }
  100. }, 'DataTable-select');
  101. export const VDataTableSelectionSymbol = Symbol.for('vuetify:data-table-selection');
  102. export function provideSelection(props, _ref9) {
  103. let {
  104. allItems,
  105. currentPage
  106. } = _ref9;
  107. const selected = useProxiedModel(props, 'modelValue', props.modelValue, v => {
  108. return new Set(wrapInArray(v).map(v => {
  109. return allItems.value.find(item => props.valueComparator(v, item.value))?.value ?? v;
  110. }));
  111. }, v => {
  112. return [...v.values()];
  113. });
  114. const allSelectable = computed(() => allItems.value.filter(item => item.selectable));
  115. const currentPageSelectable = computed(() => currentPage.value.filter(item => item.selectable));
  116. const selectStrategy = computed(() => {
  117. if (typeof props.selectStrategy === 'object') return props.selectStrategy;
  118. switch (props.selectStrategy) {
  119. case 'single':
  120. return singleSelectStrategy;
  121. case 'all':
  122. return allSelectStrategy;
  123. case 'page':
  124. default:
  125. return pageSelectStrategy;
  126. }
  127. });
  128. function isSelected(items) {
  129. return wrapInArray(items).every(item => selected.value.has(item.value));
  130. }
  131. function isSomeSelected(items) {
  132. return wrapInArray(items).some(item => selected.value.has(item.value));
  133. }
  134. function select(items, value) {
  135. const newSelected = selectStrategy.value.select({
  136. items,
  137. value,
  138. selected: new Set(selected.value)
  139. });
  140. selected.value = newSelected;
  141. }
  142. function toggleSelect(item) {
  143. select([item], !isSelected([item]));
  144. }
  145. function selectAll(value) {
  146. const newSelected = selectStrategy.value.selectAll({
  147. value,
  148. allItems: allSelectable.value,
  149. currentPage: currentPageSelectable.value,
  150. selected: new Set(selected.value)
  151. });
  152. selected.value = newSelected;
  153. }
  154. const someSelected = computed(() => selected.value.size > 0);
  155. const allSelected = computed(() => {
  156. const items = selectStrategy.value.allSelected({
  157. allItems: allSelectable.value,
  158. currentPage: currentPageSelectable.value
  159. });
  160. return !!items.length && isSelected(items);
  161. });
  162. const showSelectAll = computed(() => selectStrategy.value.showSelectAll);
  163. const data = {
  164. toggleSelect,
  165. select,
  166. selectAll,
  167. isSelected,
  168. isSomeSelected,
  169. someSelected,
  170. allSelected,
  171. showSelectAll
  172. };
  173. provide(VDataTableSelectionSymbol, data);
  174. return data;
  175. }
  176. export function useSelection() {
  177. const data = inject(VDataTableSelectionSymbol);
  178. if (!data) throw new Error('Missing selection!');
  179. return data;
  180. }
  181. //# sourceMappingURL=select.mjs.map