sfp_vue_franchisor_ginastica_cerebro/src/components/charts/CardIconChart.vue

<template>
  <q-card
    flat
    class="full-height q-pa-lg"
    :style="{
      minHeight: $q.screen.lt.sm ? '400px' : '600px',
      minWidth: $q.screen.lt.sm ? '200px' : '300px',
    }"
  >
    <div class="column no-wrap full-width">
      <div class="flex justify-between items-center no-wrap">
        <span class="text-h5">{{ title }}</span>
        <div class="flex no-wrap flex-center">
          <div class="round background">
            <q-icon class="q-pa-sm" :name="icon" size="24px" :color="color" />
          </div>
          <!-- <q-icon
            v-if="downloadImage !== null"
            name="mdi-dots-vertical"
            size="sm"
            style="width: 12px;margin-right: -12px"
            @click="downloadImage"
          /> -->
        </div>
      </div>
    </div>
    <div class="flex flex-grow flex-center" style="height: calc(100% - 30px)">
      <template v-if="hasChartSlot">
        <slot name="chart"></slot>
      </template>
      <template v-else>
        <div v-if="!loading" class="q-my-md row justify-center full-width">
          <div class="q-pa-md body2">
            {{ $t("http.errors.no_records_found") }}
          </div>
        </div>
      </template>
    </div>
  </q-card>
</template>

<script setup>
import { useSlots } from "vue";

const hasChartSlot = useSlots("chart");

const { color, title, icon } = defineProps({
  color: {
    type: String,
    default: "primary",
  },
  title: {
    type: String,
    default: "Usuários",
  },
  icon: {
    type: String,
    default: "mdi-account",
  },
});
</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>