fix(staggered-fade-and-slide): add data-index attr to animation compo…

…nents

packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

@@ -4,7 +4,7 @@
   <button @click="reset">Reset</button>
 
   <StaggeredFadeAndSlide :stagger="500">
-    <li v-for="item in items" :key="item.id">
+    <li v-for="(item, index) in items" :key="item.id" :data-index="index">
       {{ item.id }} - {{ item.name }}
       <button @click="remove(item)">x</button>
     </li>
@@ -21,9 +21,9 @@
   <br />
   <h1>Static content:</h1>
   <StaggeredFadeAndSlide :stagger="50">
-    <li key="1">Element to animate</li>
-    <li key="2">Element to animate</li>
-    <li key="3">Element to animate</li>
+    <li key="1" data-index="0">Element to animate</li>
+    <li key="2" data-index="1">Element to animate</li>
+    <li key="3" data-index="2">Element to animate</li>
   </StaggeredFadeAndSlide>
 </template>
 

packages/x-components/src/components/animations/staggered-fade-and-slide.vue

@@ -147,9 +147,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li key="1">Element to animate</li>
-  <li key="2">Element to animate</li>
-  <li key="3">Element to animate</li>
+  <li key="1" data-index="0">Element to animate</li>
+  <li key="2" data-index="1">Element to animate</li>
+  <li key="3" data-index="2">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>

packages/x-components/src/components/base-dropdown.vue

@@ -44,7 +44,12 @@
         role="listbox"
         tabindex="-1"
       >
-        <li v-for="(item, index) in items" :key="item.id || item" class="x-dropdown__list-item">
+        <li
+          v-for="(item, index) in items"
+          :key="item.id || item"
+          :data-index="index"
+          class="x-dropdown__list-item"
+        >
           <button
             :ref="el => (itemsButtonRefs[index] = el)"
             @click="emitSelectedItemChanged(item)"

packages/x-components/src/components/items-list.vue

@@ -7,8 +7,9 @@
     data-test="items-list"
   >
     <li
-      v-for="item in computedItems"
+      v-for="(item, index) in computedItems"
       :key="item.id"
+      :data-index="index"
       class="x-items-list__item"
       :class="item.class"
       :data-test="item.dataTest"

packages/x-components/src/components/suggestions/base-suggestions.vue

@@ -3,6 +3,7 @@
     <li
       v-for="(suggestion, index) in suggestionsToRender"
       :key="suggestionsKeys[index]"
+      :data-index="index"
       class="x-suggestions__item"
       :class="suggestionItemClass"
       data-test="suggestion-item"

packages/x-components/src/x-modules/facets/components/facets/facets.vue

@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="hasFacets" class="x-facets-list" data-test="facets" tag="ul">
     <li
-      v-for="({ facet, slotNameById, slotNameByModelName }, facetId) in mappedFacets"
+      v-for="({ facet, slotNameById, slotNameByModelName }, facetId, index) in mappedFacets"
       :key="facetId"
+      :data-index="index"
       class="x-facets-list__item"
       data-test="facets-facet"
     >

packages/x-components/src/x-modules/facets/components/lists/filters-list.vue

@@ -8,8 +8,9 @@
     data-test="base-filters"
   >
     <li
-      v-for="filter in renderedFilters"
+      v-for="(filter, index) in renderedFilters"
       :key="filter.id"
+      :data-index="index"
       class="x-filters__item"
       data-test="base-filters-item"
     >

packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue

@@ -11,8 +11,9 @@
       tag="ul"
     >
       <li
-        v-for="{ slotName, selectedFilter } in mapSlot(selectedFilters)"
+        v-for="({ slotName, selectedFilter }, index) in mapSlot(selectedFilters)"
         :key="selectedFilter.id"
+        :data-index="index"
         class="x-selected-filters-list__item"
         data-test="selected-filters-list-item"
       >

packages/x-components/src/x-modules/history-queries/components/my-history.vue

@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="hasHistoryQueries" class="x-my-history" tag="ul">
     <li
-      v-for="(historyQueries, date) in groupByDate"
+      v-for="(historyQueries, date, index) in groupByDate"
       :key="date"
+      :data-index="index"
       class="x-my-history-item"
       data-test="my-history-item"
     >

packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue

@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="identifierResults.length" tag="ul" class="x-identifier-results">
     <li
-      v-for="identifierResult in identifierResultsToRender"
+      v-for="(identifierResult, index) in identifierResultsToRender"
       :key="identifierResult.id"
+      :data-index="index"
       class="x-identifier-results__item"
       data-test="identifier-results-item"
     >

packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue

@@ -3,6 +3,7 @@
     <li
       v-for="(queryPreview, index) in renderedQueryPreviews"
       :key="index"
+      :data-index="index"
       data-test="query-preview-item"
     >
       <QueryPreview

packages/x-components/src/x-modules/recommendations/components/recommendations.vue

@@ -7,8 +7,9 @@
     class="x-recommendations"
   >
     <li
-      v-for="recommendation in recommendations"
+      v-for="(recommendation, index) in recommendations"
       :key="recommendation.id"
+      :data-index="index"
       class="x-recommendations__item"
       data-test="recommendation-item"
     >

packages/x-components/src/x-modules/related-tags/components/related-tags.vue

@@ -7,8 +7,9 @@
     data-test="related-tags"
   >
     <li
-      v-for="relatedTag in relatedTags"
+      v-for="(relatedTag, index) in relatedTags"
       :key="relatedTag.query"
+      :data-index="index"
       class="x-related-tags__item"
       data-test="related-tag-item"
     >

packages/x-components/src/x-modules/search/components/partial-results-list.vue

@@ -9,6 +9,7 @@
     <li
       v-for="(partialResult, index) in partialResults"
       :key="`${partialResult.query}-${index}`"
+      :data-index="index"
       class="x-partial-result"
       data-test="partial-result"
     >

packages/x-components/src/x-modules/search/components/sort-list.vue

@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" tag="ul" class="x-option-list x-sort-list" data-test="sort-list">
     <li
-      v-for="{ item, cssClasses, event } in listItems"
+      v-for="({ item, cssClasses, event }, index) in listItems"
       :key="item"
+      :data-index="index"
       :class="cssClasses"
       class="x-option-list__item x-sort-list__item"
     >

packages/x-components/src/x-modules/search/components/sort-picker-list.vue

@@ -7,8 +7,9 @@
     role="list"
   >
     <BaseEventButton
-      v-for="{ item, cssClasses, event } in listItems"
+      v-for="({ item, cssClasses, event }, index) in listItems"
       :key="item"
+      :data-index="index"
       :class="[cssClasses, buttonClass]"
       data-test="sort-picker-button"
       :events="event"