nested.mjs 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. // Composables
  2. import { useProxiedModel } from "../proxiedModel.mjs"; // Utilities
  3. import { computed, inject, onBeforeUnmount, provide, ref, shallowRef, toRaw } from 'vue';
  4. import { listOpenStrategy, multipleOpenStrategy, singleOpenStrategy } from "./openStrategies.mjs";
  5. import { classicSelectStrategy, independentSelectStrategy, independentSingleSelectStrategy, leafSelectStrategy, leafSingleSelectStrategy } from "./selectStrategies.mjs";
  6. import { getCurrentInstance, getUid, propsFactory } from "../../util/index.mjs"; // Types
  7. export const VNestedSymbol = Symbol.for('vuetify:nested');
  8. export const emptyNested = {
  9. id: shallowRef(),
  10. root: {
  11. register: () => null,
  12. unregister: () => null,
  13. parents: ref(new Map()),
  14. children: ref(new Map()),
  15. open: () => null,
  16. openOnSelect: () => null,
  17. select: () => null,
  18. opened: ref(new Set()),
  19. selected: ref(new Map()),
  20. selectedValues: ref([])
  21. }
  22. };
  23. export const makeNestedProps = propsFactory({
  24. selectStrategy: [String, Function],
  25. openStrategy: [String, Object],
  26. opened: Array,
  27. selected: Array,
  28. mandatory: Boolean
  29. }, 'nested');
  30. export const useNested = props => {
  31. let isUnmounted = false;
  32. const children = ref(new Map());
  33. const parents = ref(new Map());
  34. const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
  35. const selectStrategy = computed(() => {
  36. if (typeof props.selectStrategy === 'object') return props.selectStrategy;
  37. switch (props.selectStrategy) {
  38. case 'single-leaf':
  39. return leafSingleSelectStrategy(props.mandatory);
  40. case 'leaf':
  41. return leafSelectStrategy(props.mandatory);
  42. case 'independent':
  43. return independentSelectStrategy(props.mandatory);
  44. case 'single-independent':
  45. return independentSingleSelectStrategy(props.mandatory);
  46. case 'classic':
  47. default:
  48. return classicSelectStrategy(props.mandatory);
  49. }
  50. });
  51. const openStrategy = computed(() => {
  52. if (typeof props.openStrategy === 'object') return props.openStrategy;
  53. switch (props.openStrategy) {
  54. case 'list':
  55. return listOpenStrategy;
  56. case 'single':
  57. return singleOpenStrategy;
  58. case 'multiple':
  59. default:
  60. return multipleOpenStrategy;
  61. }
  62. });
  63. const selected = useProxiedModel(props, 'selected', props.selected, v => selectStrategy.value.in(v, children.value, parents.value), v => selectStrategy.value.out(v, children.value, parents.value));
  64. onBeforeUnmount(() => {
  65. isUnmounted = true;
  66. });
  67. function getPath(id) {
  68. const path = [];
  69. let parent = id;
  70. while (parent != null) {
  71. path.unshift(parent);
  72. parent = parents.value.get(parent);
  73. }
  74. return path;
  75. }
  76. const vm = getCurrentInstance('nested');
  77. const nested = {
  78. id: shallowRef(),
  79. root: {
  80. opened,
  81. selected,
  82. selectedValues: computed(() => {
  83. const arr = [];
  84. for (const [key, value] of selected.value.entries()) {
  85. if (value === 'on') arr.push(key);
  86. }
  87. return arr;
  88. }),
  89. register: (id, parentId, isGroup) => {
  90. parentId && id !== parentId && parents.value.set(id, parentId);
  91. isGroup && children.value.set(id, []);
  92. if (parentId != null) {
  93. children.value.set(parentId, [...(children.value.get(parentId) || []), id]);
  94. }
  95. },
  96. unregister: id => {
  97. if (isUnmounted) return;
  98. children.value.delete(id);
  99. const parent = parents.value.get(id);
  100. if (parent) {
  101. const list = children.value.get(parent) ?? [];
  102. children.value.set(parent, list.filter(child => child !== id));
  103. }
  104. parents.value.delete(id);
  105. opened.value.delete(id);
  106. },
  107. open: (id, value, event) => {
  108. vm.emit('click:open', {
  109. id,
  110. value,
  111. path: getPath(id),
  112. event
  113. });
  114. const newOpened = openStrategy.value.open({
  115. id,
  116. value,
  117. opened: new Set(opened.value),
  118. children: children.value,
  119. parents: parents.value,
  120. event
  121. });
  122. newOpened && (opened.value = newOpened);
  123. },
  124. openOnSelect: (id, value, event) => {
  125. const newOpened = openStrategy.value.select({
  126. id,
  127. value,
  128. selected: new Map(selected.value),
  129. opened: new Set(opened.value),
  130. children: children.value,
  131. parents: parents.value,
  132. event
  133. });
  134. newOpened && (opened.value = newOpened);
  135. },
  136. select: (id, value, event) => {
  137. vm.emit('click:select', {
  138. id,
  139. value,
  140. path: getPath(id),
  141. event
  142. });
  143. const newSelected = selectStrategy.value.select({
  144. id,
  145. value,
  146. selected: new Map(selected.value),
  147. children: children.value,
  148. parents: parents.value,
  149. event
  150. });
  151. newSelected && (selected.value = newSelected);
  152. nested.root.openOnSelect(id, value, event);
  153. },
  154. children,
  155. parents
  156. }
  157. };
  158. provide(VNestedSymbol, nested);
  159. return nested.root;
  160. };
  161. export const useNestedItem = (id, isGroup) => {
  162. const parent = inject(VNestedSymbol, emptyNested);
  163. const uidSymbol = Symbol(getUid());
  164. const computedId = computed(() => id.value !== undefined ? id.value : uidSymbol);
  165. const item = {
  166. ...parent,
  167. id: computedId,
  168. open: (open, e) => parent.root.open(computedId.value, open, e),
  169. openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
  170. isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
  171. parent: computed(() => parent.root.parents.value.get(computedId.value)),
  172. select: (selected, e) => parent.root.select(computedId.value, selected, e),
  173. isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
  174. isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
  175. isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
  176. isGroupActivator: parent.isGroupActivator
  177. };
  178. !parent.isGroupActivator && parent.root.register(computedId.value, parent.id.value, isGroup);
  179. onBeforeUnmount(() => {
  180. !parent.isGroupActivator && parent.root.unregister(computedId.value);
  181. });
  182. isGroup && provide(VNestedSymbol, item);
  183. return item;
  184. };
  185. export const useNestedGroupActivator = () => {
  186. const parent = inject(VNestedSymbol, emptyNested);
  187. provide(VNestedSymbol, {
  188. ...parent,
  189. isGroupActivator: true
  190. });
  191. };
  192. //# sourceMappingURL=nested.mjs.map