app/components/Ui/EventList.vue

<template>
  <div>
    <v-list  height="380">

      <v-list-item
        class="event-item"
        v-for="event in events"
        :key="event.id"
        :subtitle="date.format(event.datetimeStart, 'fullDateWithWeekday')"
        :title="event.name"
      >
        <template v-slot:prepend>
          <v-avatar color="grey-lighten-1">
            <UiImage :imageId="event.image" :width="50" />
          </v-avatar>
        </template>

        <template v-slot:append>
          <v-avatar  @click="$emit('edit', event.id)">
            <v-icon>fas fa-pencil</v-icon>
          </v-avatar>

          <UiButtonDelete :entity="event">
            <v-avatar>
              <v-icon>fas fa-trash</v-icon>
            </v-avatar>
          </UiButtonDelete>
        </template>
      </v-list-item>

    </v-list>

    <div class="d-flex justify-space-between px-4 py-2 pagination mb-5" v-if="events.length > 0">
      <v-btn variant="flat" class="pagination-btn" @click="$emit('load', pagination.first)" :disabled="!pagination.first || !pagination.previous">
        <v-avatar>
        <v-icon>fas fa-angles-left</v-icon>
      </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" @click="$emit('load', pagination.previous)" :disabled="!pagination.previous">
        <v-avatar>
          <v-icon>fas fa-angle-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" @click="$emit('load', pagination.next)" :disabled="!pagination.next">
        <v-avatar>
          <v-icon>fas fa-angle-right</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" @click="$emit('load', pagination.last)" :disabled="pagination.last == 1">
        <v-avatar>
          <v-icon>fas fa-angles-right</v-icon>
        </v-avatar>
      </v-btn>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import type {Collection} from "pinia-orm";
import Event from "~/models/Freemium/Event";
import type {Pagination} from "~/types/data";
import { useDate } from 'vuetify'

const props = defineProps<{
  events: Collection<Event>,
  pagination: Pagination
}>()

const emits = defineEmits(['edit', 'load'])
const date = useDate()
</script>

<style scoped>
.event-item {
  margin-top: 20px;
  color: rgb(var(--v-theme-on-primary-alt));
}

.pagination-btn[disabled] {
  opacity: 0.3;
}

</style>