DashboardChartCard.vue 804 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <template>
  2. <q-card flat class="dashboard-chart-card card-ring">
  3. <div class="flex justify-between items-center no-wrap q-mb-sm">
  4. <span class="text-subtitle2 text-weight-medium">{{ title }}</span>
  5. <q-btn
  6. flat
  7. round
  8. dense
  9. icon="mdi-book-open-outline"
  10. color="grey-6"
  11. size="sm"
  12. @click="$emit('export')"
  13. />
  14. </div>
  15. <div class="chart-slot-wrapper">
  16. <slot />
  17. </div>
  18. </q-card>
  19. </template>
  20. <script setup>
  21. defineProps({
  22. title: { type: String, required: true },
  23. });
  24. defineEmits(["export"]);
  25. </script>
  26. <style scoped>
  27. .dashboard-chart-card {
  28. border-radius: 8px;
  29. padding: 16px;
  30. display: flex;
  31. flex-direction: column;
  32. }
  33. .chart-slot-wrapper {
  34. flex: 1;
  35. min-height: 220px;
  36. position: relative;
  37. }
  38. </style>