app/components/Ui/EventList.vue

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

      <v-list-item
        v-for="event in events"
        :key="event.id"
        class="event-item"
      >
        <template #prepend>
          <v-avatar color="grey-lighten-1">
            <UiImage :image-id="event.image" :width="50" />
          </v-avatar>
        </template>

        <template #default>
          <div
            class="flex-grow-1"
            @click="$emit('edit', event.id)"
          >
            <span class="text-subtitle-1">{{event.name}}</span>
            <br>
            <span class="text-subtitle-2">{{date.format(event.datetimeStart, 'fullDateWithWeekday')}}</span>
          </div>
        </template>

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

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

    </v-list>

    <div v-if="events.length > 0" class="d-flex justify-space-between px-4 py-2 pagination mb-5">
      <v-btn variant="flat" class="pagination-btn" :disabled="!pagination.first || !pagination.previous" @click="$emit('load', pagination.first)">
        <v-avatar>
        <v-icon>fas fa-angles-left</v-icon>
      </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" :disabled="!pagination.previous" @click="$emit('load', pagination.previous)">
        <v-avatar>
          <v-icon>fas fa-angle-left</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" :disabled="!pagination.next" @click="$emit('load', pagination.next)">
        <v-avatar>
          <v-icon>fas fa-angle-right</v-icon>
        </v-avatar>
      </v-btn>
      <v-btn variant="flat" class="pagination-btn" :disabled="pagination.last == 1" @click="$emit('load', pagination.last)">
        <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 type 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 lang="scss">
.event-item {
  margin-top: 20px;
  color: rgb(var(--v-theme-on-neutral));
  .text-subtitle-2{
    text-transform: capitalize !important;
    color: rgb(var(--v-theme-on-neutral--sub));
  }
}
.pagination-btn[disabled] {
  opacity: 0.3;
}
.edit-btn{
  cursor: pointer;
}
:deep(.v-list-item):hover{
  cursor: pointer;
  background-color: rgb(var(--v-theme-neutral));
}
</style>