e20c76036f9d324591d9b739562efefdf7f3d02ddefbbea71f0c10af3ca196fd48754013cfc9575f598e9df9cb21e32a273eecad64c1e31977550d86a2085e 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { ref, provide, inject, onMounted, unref, onBeforeUnmount } from 'vue';
  2. import Collection from './collection2.mjs';
  3. import CollectionItem from './collection-item.mjs';
  4. const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
  5. const createCollectionWithScope = (name) => {
  6. const COLLECTION_NAME = `El${name}Collection`;
  7. const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
  8. const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
  9. const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
  10. const ElCollection = {
  11. ...Collection,
  12. name: COLLECTION_NAME,
  13. setup() {
  14. const collectionRef = ref();
  15. const itemMap = /* @__PURE__ */ new Map();
  16. const getItems = () => {
  17. const collectionEl = unref(collectionRef);
  18. if (!collectionEl)
  19. return [];
  20. const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
  21. const items = [...itemMap.values()];
  22. return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
  23. };
  24. provide(COLLECTION_INJECTION_KEY, {
  25. itemMap,
  26. getItems,
  27. collectionRef
  28. });
  29. }
  30. };
  31. const ElCollectionItem = {
  32. ...CollectionItem,
  33. name: COLLECTION_ITEM_NAME,
  34. setup(_, { attrs }) {
  35. const collectionItemRef = ref();
  36. const collectionInjection = inject(COLLECTION_INJECTION_KEY, void 0);
  37. provide(COLLECTION_ITEM_INJECTION_KEY, {
  38. collectionItemRef
  39. });
  40. onMounted(() => {
  41. const collectionItemEl = unref(collectionItemRef);
  42. if (collectionItemEl) {
  43. collectionInjection.itemMap.set(collectionItemEl, {
  44. ref: collectionItemEl,
  45. ...attrs
  46. });
  47. }
  48. });
  49. onBeforeUnmount(() => {
  50. const collectionItemEl = unref(collectionItemRef);
  51. collectionInjection.itemMap.delete(collectionItemEl);
  52. });
  53. }
  54. };
  55. return {
  56. COLLECTION_INJECTION_KEY,
  57. COLLECTION_ITEM_INJECTION_KEY,
  58. ElCollection,
  59. ElCollectionItem
  60. };
  61. };
  62. export { COLLECTION_ITEM_SIGN, createCollectionWithScope };
  63. //# sourceMappingURL=collection.mjs.map