sfp_front_vue_diarista_cliente/src/components/charts/CardIconMiniChart.vue

<template>
  <q-card flat class="q-pa-lg" style="max-height: 184px; min-width: 305px;">
    <div class="column no-wrap full-width">
      <div class="flex justify-between items-center no-wrap">
        <span class="text-h5">{{ title }}</span>
        <div class="round background">
          <q-icon class="q-pa-sm" :name="icon" size="24px" :color="color" />
        </div>
      </div>
      <div class="flex no-wrap full-width justify-between q-pa-sm">
        <div class="column flex-center">
          <span :class="numberCard.length >= 7 ? 'text-h4' : 'text-h3'">
            {{ numberCard }}
          </span>
          <div
            v-if="numberPorcent !== null"
            class="flex no-wrap text-subtitle2"
            :class="numberPorcent > 0 ? 'text-positive' : 'text-negative'"
          >
            <q-icon
              :name="numberPorcent > 0 ? 'mdi-arrow-up' : 'mdi-arrow-down'"
              size="18px"
              class="q-mr-xs"
            />
            {{ numberPorcent + "%" }}
          </div>
        </div>
        <div class="flex justify-end" style="max-width: 120px; height: 80px">
          <slot name="chart" :color="color" :chart-data="chartData" />
        </div>
      </div>
    </div>
  </q-card>
</template>

<script setup>
const { color, title, icon, chartData, numberCard, numberPorcent } =
  defineProps({
    color: {
      type: String,
      default: "primary",
    },
    title: {
      type: String,
      default: "Usuários",
    },
    icon: {
      type: String,
      default: "mdi-account",
    },
    chartData: {
      type: Array,
      default: () =>
        Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
    },
    numberCard: {
      type: String,
      default: () => Math.floor(Math.random() * 100),
    },
    numberPorcent: {
      type: Number,
      default: () => Math.ceil(Math.random() * 200 - 100),
    },
  });
</script>
<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss";

body.body--light {
  .background {
    background: rgba(map.get($colors, "primary"), 0.2) !important;
  }
}

body.body--dark {
  .background {
    background: rgba(map.get($colors-dark, "primary"), 0.2) !important;
  }
}
</style>