feat: added iteration index

Author: kouts

docs/components/index.md

@@ -355,13 +355,18 @@ It also provides the row's original index, useful e.g if you want to delete an i
     <tr>
       <td>row</td>
       <td>Object</td>
-      <td>The dataset row data.</td>
+      <td>The dataset row data</td>
     </tr>
     <tr>
       <td>rowIndex</td>
       <td>Number</td>
       <td>The original index of the data row</td>
     </tr>
+    <tr>
+      <td>index</td>
+      <td>Number</td>
+      <td>The iteration index</td>
+    </tr>    
   </tbody>
 </table>
 

src/DatasetItem.vue

@@ -1,14 +1,14 @@
 <template>
   <component :is="tag">
-    <template v-for="item in dsRows">
-      <slot :row="dsData[item]" :rowIndex="item"></slot>
+    <template v-for="(rowIndex, i) in dsRows">
+      <slot :row="dsData[rowIndex]" :rowIndex="rowIndex" :index="indexes[i]"></slot>
     </template>
     <slot v-if="!dsRows.length" name="noDataFound"></slot>
   </component>
 </template>
 
 <script>
-import { inject } from 'vue'
+import { inject, computed } from 'vue'
 
 export default {
   props: {
@@ -18,9 +18,18 @@ export default {
     }
   },
   setup() {
+    const indexes = computed(() => {
+      const arr = []
+      for (let i = inject('dsFrom').value; i < inject('dsTo').value; i++) {
+        arr.push(i)
+      }
+      return arr
+    })
+
     return {
       dsData: inject('dsData'),
-      dsRows: inject('dsRows')
+      dsRows: inject('dsRows'),
+      indexes
     }
   }
 }

tests/unit/DatasetItem.spec.js

@@ -22,15 +22,18 @@ describe('DatasetItem', () => {
             }
           ]),
           dsRows: ref([0, 1]),
+          dsFrom: ref(0),
+          dsTo: ref(10),
           ...provideOpts
         }
       },
       slots: {
         default: `
-          <template v-slot="{ row, rowIndex }">
+          <template v-slot="{ row, rowIndex, index }">
             <div class="result">
               <p>{{ row.name }}</p>
               <p>{{ rowIndex }}</p>
+              <p>{{ index }}</p>
             </div>
           </template>
         `,
@@ -45,11 +48,21 @@ describe('DatasetItem', () => {
     wrapper.unmount()
   })
 
+  it('renders correctly', () => {
+    wrapper = wrapperWithProvide()
+    expect(wrapper.element).toMatchSnapshot()
+  })
+
   it('renders divs based on passed props', () => {
     wrapper = wrapperWithProvide()
     expect(wrapper.findAll('div.result').length).toBe(2)
   })
 
+  it('calculates the correct indexes', () => {
+    wrapper = wrapperWithProvide()
+    expect(wrapper.vm.indexes).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
+  })
+
   it('does not render any results when dsRows is empty', () => {
     wrapper = wrapperWithProvide({
       dsRows: ref([])
@@ -76,5 +89,6 @@ describe('DatasetItem', () => {
       dsRows: ref([0])
     })
     expect(wrapper.findAll('div.result').length).toBe(1)
+    expect(wrapper.element).toMatchSnapshot()
   })
 })

tests/unit/__snapshots__/DatasetItem.spec.js.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatasetItem renders correctly 1`] = `
+<div>
+  
+  
+  <div
+    class="result"
+  >
+    <p>
+      Jessie Casey
+    </p>
+    <p>
+      0
+    </p>
+    <p>
+      0
+    </p>
+  </div>
+  
+  
+  <div
+    class="result"
+  >
+    <p>
+      Solomon Stanley
+    </p>
+    <p>
+      1
+    </p>
+    <p>
+      1
+    </p>
+  </div>
+  
+  
+  <!--v-if-->
+</div>
+`;
+
+exports[`DatasetItem renders divs after data changed 1`] = `
+<div>
+  
+  
+  <div
+    class="result"
+  >
+    <p>
+      John Doe
+    </p>
+    <p>
+      0
+    </p>
+    <p>
+      0
+    </p>
+  </div>
+  
+  
+  <!--v-if-->
+</div>
+`;