cv2/components/Badge.vue

<template>
  <v-card @hover="onHover">
    <div class="frame">
      <v-img
        :src="img"
        :alt="title"
      />

      <div class="details">
        <v-card-title>{{ title }}</v-card-title>
        <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle>
        <v-card-text v-if="details && expanded">{{ details }}</v-card-text>
        <v-card-actions v-if="details && !expanded">
          <v-btn icon="fas fa-plus" variant="flat" @click="onMoreClick" />
        </v-card-actions>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">

import type { PropType } from '@vue/runtime-core'
import type { Ref } from '@vue/reactivity'

defineProps({
  title: {
    type: String,
    required: true
  },
  img: {
    type: String,
    required: true
  },
  subtitle: {
    type: String as PropType<string | null>,
    required: false,
    default: null
  },
  details: {
    type: String as PropType<string | null>,
    required: false,
    default: null
  },
})

const expanded: Ref<boolean> = ref(false)

const onHover = () => {

}

const onMoreClick = () => {

}
</script>

<style scoped lang="scss">
  .v-card {
    height: 54px;
    width: 196px;
    padding: 10px;

    .frame {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      max-height: 100%;
    }

    .details {
      flex: 1;
    }

    .v-img {
      max-width: 24px;
      height: 24px;
      margin: 0 12px;
    }

    .v-card-title {
      font-size: 16px;
      padding: 0 16px;
      font-weight: 300;
    }

    .v-card-subtitle {
      font-size: 14px;
    }
  }

  .v-card-actions {
    display: none;
  }

  //.v-card:hover {
  //  .v-card-actions {
  //    display: block;
  //  }
  //}
</style>