fix(scroll): fix incorrect key unicity

Author: dvcol

src/components/common/buttons/use-back-to-top.ts

@@ -7,7 +7,7 @@ export const useBackToTop = () => {
   const scrolled = ref(false);
 
   const onClick = (scrollTo?: ScrollTo) => {
-    listRef.value?.list?.scrollTo({ top: 0, left: 0, behavior: 'smooth', ...scrollTo });
+    listRef.value?.list?.scrollTo({ top: 0, left: 0, behavior: 'smooth', debounce: true, ...scrollTo });
     scrolled.value = false;
   };
 

src/components/common/list/use-list-scroll.ts

@@ -216,6 +216,7 @@ export const computeNewArray = <T extends ListScrollSourceItemWithDate<D>, D ext
     if (!_item.getProgressQuery) _item.getProgressQuery = getProgressQuery(item);
     if (!_item.tags) _item.tags = getTags(item, _item.type);
 
+    _item.key = `${_item.type}-${_item.id}`;
     _item.date = getDate(item, array, index, dateFn);
     _item.meta = {
       source: item,
@@ -291,7 +292,7 @@ export const useListScrollEvents = (
 ) => {
   const onScroll: OnScroll = async listRef => {
     const _listRef = isRef(listRef) ? listRef.value : listRef;
-    const key = data.value[data.value.length - 1].id;
+    const { key } = data.value[data.value.length - 1];
     await callback({
       page: pagination.value?.page ? pagination.value.page + 1 : 0,
     });
@@ -335,7 +336,8 @@ export const addAllLoaded = (items: Ref<ListScrollItem[]>, pagination: Ref<Store
     if (array[array.length - 1].type === ListScrollItemType.AllLoaded) return array;
     const type = ListScrollItemType.AllLoaded;
     const index = items.value.length;
-    const allLoaded: ListScrollItem = { id: type, type, index, key: `${index}-${type}` };
+    // All loaded should be unique so id and key are based on the type
+    const allLoaded: ListScrollItem = { id: type, type, index, key: type };
     return [...array, allLoaded];
   });
 };
@@ -353,7 +355,8 @@ export const addLoadMore = (items: Ref<ListScrollItem[]>, pagination: Ref<StoreP
     if (array[array.length - 1].type === ListScrollItemType.LoadMore) return array;
     const type = ListScrollItemType.LoadMore;
     const index = items.value.length;
-    const loadMore: ListScrollItem = { id: type, type, index, key: `${index}-${type}` };
+    // Load more should be unique so id and key are based on the type
+    const loadMore: ListScrollItem = { id: type, type, index, key: type };
     return [...array, loadMore];
   });
 };

src/utils/calendar.utils.ts

@@ -1,3 +1,4 @@
+import { randomHex } from '@dvcol/common-utils';
 import { DateUtils } from '@dvcol/common-utils/common/date';
 import { computed, nextTick, type Ref, ref, watch } from 'vue';
 
@@ -26,9 +27,9 @@ export const CalendarPlaceholder: Partial<CalendarItem> = {
   type: ListScrollItemType.Placeholder,
 } as const;
 
-export const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `empty-${date.getTime()}`, date }) as CalendarItem;
+export const getPlaceholder = (date: Date) => ({ ...CalendarPlaceholder, id: `empty-${date.getTime()}-${randomHex(4)}`, date }) as CalendarItem;
 export const getLoadingPlaceholder = (date: Date) =>
-  ({ ...getPlaceholder(date), id: `loading-${date.getTime()}`, type: ListScrollItemType.Loading }) as CalendarItem;
+  ({ ...getPlaceholder(date), id: `loading-${date.getTime()}-${randomHex(4)}`, type: ListScrollItemType.Loading }) as CalendarItem;
 
 export const getEmptyWeeks = ({ startDate, loading = false, days = 14 }: { startDate: Date; loading?: boolean; days?: number }): CalendarItem[] => {
   return Array(days)
@@ -149,7 +150,8 @@ export const useCalendar = ({
     if (!listRef.value?.list) return;
 
     listRef.value?.list.scrollTo({
-      top: index * 145,
+      top: index * itemSize,
+      debounce: true,
       ...options,
     });
   };
@@ -172,7 +174,7 @@ export const useCalendar = ({
     // offset the scroll by 1 item if a placeholder is added
     let placeholder = 0;
     const timeout = setTimeout(() => {
-      listRef.value?.list.scrollTo({ top: 145 });
+      listRef.value?.list.scrollTo({ top: itemSize });
       placeholder = placeholders;
     }, defaultDebounceLoadingDelay); // default debounceLoading delay