fix(dashboard): Add missing CollapsibleCard shared component
This component was imported in DashboardView.vue but never committed. CollapsibleCard provides an expandable/collapsible card UI pattern used for Trezorerie, Cash Flow, Clienți, and Furnizori dashboard cards. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
242
src/shared/components/CollapsibleCard.vue
Normal file
242
src/shared/components/CollapsibleCard.vue
Normal file
@@ -0,0 +1,242 @@
|
|||||||
|
<template>
|
||||||
|
<div class="collapsible-card" :class="{ 'collapsible-card--expanded': isExpanded }">
|
||||||
|
<!-- Collapsed Header (always visible) -->
|
||||||
|
<div class="collapsible-card__header" @click="toggleExpanded" role="button" tabindex="0" @keydown.enter="toggleExpanded">
|
||||||
|
<div class="collapsible-card__content">
|
||||||
|
<i v-if="icon" :class="icon" class="collapsible-card__icon"></i>
|
||||||
|
<span class="collapsible-card__label">{{ label }}</span>
|
||||||
|
<span class="collapsible-card__value" :class="valueClass">{{ formattedValue }}</span>
|
||||||
|
</div>
|
||||||
|
<i class="pi pi-chevron-down collapsible-card__chevron"
|
||||||
|
:class="{ 'collapsible-card__chevron--expanded': isExpanded }"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expandable Content -->
|
||||||
|
<div v-show="isExpanded" class="collapsible-card__body">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
/**
|
||||||
|
* Label displayed in the collapsed header
|
||||||
|
*/
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Main value displayed in the collapsed header
|
||||||
|
* Can be a number or string
|
||||||
|
*/
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* PrimeVue icon class (e.g., 'pi pi-wallet')
|
||||||
|
*/
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* CSS class to apply to the value (e.g., 'positive', 'negative', 'neutral')
|
||||||
|
*/
|
||||||
|
valueClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Whether the card is expanded by default
|
||||||
|
*/
|
||||||
|
defaultExpanded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Format the value as currency (RON)
|
||||||
|
*/
|
||||||
|
formatCurrency: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// State
|
||||||
|
const isExpanded = ref(props.defaultExpanded)
|
||||||
|
|
||||||
|
// Computed: Format the value
|
||||||
|
const formattedValue = computed(() => {
|
||||||
|
if (props.value === null || props.value === undefined) return '-'
|
||||||
|
|
||||||
|
if (props.formatCurrency && typeof props.value === 'number') {
|
||||||
|
return new Intl.NumberFormat('ro-RO', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'RON',
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0
|
||||||
|
}).format(props.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return String(props.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
const toggleExpanded = () => {
|
||||||
|
isExpanded.value = !isExpanded.value
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Collapsible Card Container */
|
||||||
|
.collapsible-card {
|
||||||
|
background: var(--surface-card);
|
||||||
|
border: 1px solid var(--surface-border);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header - clickable area */
|
||||||
|
.collapsible-card__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-md) var(--space-lg);
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: background-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__header:hover {
|
||||||
|
background: var(--surface-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__header:focus {
|
||||||
|
outline: 2px solid var(--color-primary);
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header content: icon + label + value */
|
||||||
|
.collapsible-card__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-sm);
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon */
|
||||||
|
.collapsible-card__icon {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
color: var(--color-primary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label */
|
||||||
|
.collapsible-card__label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Value */
|
||||||
|
.collapsible-card__value {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--text-color);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
margin-left: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Value variants */
|
||||||
|
.collapsible-card__value.positive {
|
||||||
|
color: var(--green-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__value.negative {
|
||||||
|
color: var(--red-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__value.neutral {
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode value colors */
|
||||||
|
[data-theme="dark"] .collapsible-card__value.positive {
|
||||||
|
color: var(--green-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .collapsible-card__value.negative {
|
||||||
|
color: var(--red-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root:not([data-theme]) .collapsible-card__value.positive {
|
||||||
|
color: var(--green-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:not([data-theme]) .collapsible-card__value.negative {
|
||||||
|
color: var(--red-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chevron */
|
||||||
|
.collapsible-card__chevron {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
transition: transform var(--transition-fast);
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__chevron--expanded {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body - expandable content */
|
||||||
|
.collapsible-card__body {
|
||||||
|
border-top: 1px solid var(--surface-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When expanded, remove internal card borders/shadows */
|
||||||
|
.collapsible-card--expanded .collapsible-card__body :deep(.metric-card),
|
||||||
|
.collapsible-card--expanded .collapsible-card__body :deep(.treasury-dual-card),
|
||||||
|
.collapsible-card--expanded .collapsible-card__body :deep(.cash-flow-metric-card),
|
||||||
|
.collapsible-card--expanded .collapsible-card__body :deep(.clienti-balance-card),
|
||||||
|
.collapsible-card--expanded .collapsible-card__body :deep(.furnizori-balance-card) {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.collapsible-card__header {
|
||||||
|
padding: var(--space-sm) var(--space-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__label {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__value {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__icon {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsible-card__chevron {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user