cv2/components/Badge.vue

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

      <div class="details">
        <v-card-title>{{ title }}</v-card-title>
        <v-card-subtitle v-if="subtitle">{{ subtitle }}</v-card-subtitle>
      </div>

<!--      <v-card-actions>-->
<!--        <v-btn icon="fas fa-plus" variant="flat" @click="onMoreClick" />-->
<!--      </v-card-actions>-->
    </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: 95%;
    padding: 10px;

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

    .details {
      flex: 1;
      max-width: 154px;
    }

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

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

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

  .v-card-actions {
    width: 24px;
    right: 0;
    padding: 0 8px;

    .v-btn {
      width: 24px;
      font-size: 13px;
      color: rgb(var(--v-theme-primary-alt));
    }
  }

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