<script setup>
const props = defineProps({
  documents: {
    type: Array,
    required:true
  },
  returnDocumentId: {
    type: Boolean,
  }
})
const dataStore = useDataStore()

const emit = defineEmits(["updateNeeded"])

</script>

<template>
  <div class="documentList">
    <DocumentDisplay
        v-for="item in documents"
        :document-data="item"
        :key="item.id"
        @clicked="(info) => $emit('selectDocument', info)"
        :return-emit="returnDocumentId"
        @updatedNeeded="emit('updatedNeeded')"
    />
  </div>
</template>

<style scoped>
.documentList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.documentList::-webkit-scrollbar {
  display: none;
}
</style>