<template>
    
    <v-sheet
        :height="height"
        class="overflow-x-hidden overflow-y-auto"
        id="region-scroll-target"
    >
        <region-record 
            v-for="(region, index) in items"
            :key="'region-' + index"
            :app="app"
            :region="region"
            class="mb-1 mr-1"
        />
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            dataprovider: {required: true},
            height: {default: null},
        },

        computed: {
            items() {
                return this.dataprovider.items;
            }
        },

        components: {
            RegionRecord: require('./Record/RegionRecord').default,
        },

        name: 'RegionItems',
    }
</script>