jws-frontend/src/components/08_request-list/DataDisplay.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

withDefaults(
  defineProps<{
    label: string;
    value?: string;
    icon?: string;
    iconSize?: string;
    tooltip?: boolean;
  }>(),
  {
    label: '-',
    value: '-',
  },
);
</script>

<template>
  <article class="row items-center">
    <Icon
      v-if="icon"
      :icon
      class="app-text-muted q-pr-sm"
      :width="iconSize || '2rem'"
    />
    <span class="row col">
      <span class="col-12 app-text-muted-2" style="font-size: 10px">
        {{ label }}
      </span>
      <span class="col-12 ellipsis">
        <slot name="value">
          {{ value }}
          <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
        </slot>
      </span>
    </span>
  </article>
</template>