fix(vue2-masonry-wall): add missing masonry-item keys

DerYeger · Aug 2, 2023 · b389379 · b389379
1 parent 15bd534
commit b389379
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/.changeset/nasty-moose-cover.md b/.changeset/nasty-moose-cover.md
@@ -0,0 +1,6 @@
+---
+'@yeger/vue2-masonry-wall-docs': patch
+'@yeger/vue2-masonry-wall': patch
+---
+
+add missing masonry-item keys
diff --git a/docs/vue2-masonry-wall-docs/src/app.vue b/docs/vue2-masonry-wall-docs/src/app.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import MasonryWall from '@yeger/vue2-masonry-wall'
 import { defineComponent, ref } from 'vue'
 
 import DemoFooter from '~/demo-footer.vue'
@@ -11,6 +12,7 @@ export default defineComponent({
     DemoFooter,
     DemoHeader,
     DemoTools,
+    MasonryWall,
   },
   setup() {
     const scrollContainer = ref(null)
@@ -20,7 +22,7 @@ export default defineComponent({
   },
   data() {
     return {
-      columnWidth: [256, 128, 128, 512, 128],
+      columnWidth: [256, 128, 128, 512, 128] as [number, ...number[]],
       gap: 16,
       items: [] as number[],
       rtl: false,

diff --git a/packages/vue2-masonry-wall/src/masonry-wall.vue b/packages/vue2-masonry-wall/src/masonry-wall.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import type {
-  Column,
-  KeyMapper,
-  NonEmptyArray,
-} from '@yeger/vue-masonry-wall-core'
+import type { Column, NonEmptyArray } from '@yeger/vue-masonry-wall-core'
 import { useMasonryWall } from '@yeger/vue-masonry-wall-core'
 import type { Ref } from 'vue'
 import { nextTick, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 
+export type KeyMapper<T> = (
+  item: T,
+  column: number,
+  row: number,
+  index: number,
+) => string | number | symbol | undefined
+
 const props = withDefaults(
   defineProps<{
     columnWidth?: number | NonEmptyArray<number>
@@ -40,6 +43,7 @@ const emit = defineEmits<{
 
 const columns = ref<Column[]>([])
 const wall = ref<HTMLDivElement>() as Ref<HTMLDivElement>
+
 const { getColumnWidthTarget } = useMasonryWall<unknown>({
   columns,
   emit,
@@ -74,7 +78,11 @@ const { getColumnWidthTarget } = useMasonryWall<unknown>({
         'min-width': 0,
       }"
     >
-      <div v-for="itemIndex in column" :key="itemIndex" class="masonry-item">
+      <div
+        v-for="(itemIndex, row) in column"
+        :key="keyMapper(items[itemIndex], columnIndex, row, itemIndex)"
+        class="masonry-item"
+      >
         <slot :item="items[itemIndex]" :index="itemIndex">
           {{ items[itemIndex] }}
         </slot>