romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Resolve shared component styling and Vite module deduplication

Browse Source 
- Add dedupe option for vue, vue-router, pinia, primevue in both Vite configs
  to prevent duplicate module issues when using shared components
- Add optimizeDeps and commonjsOptions for better shared module handling
- Fix CompanySelector and PeriodSelector header variants to support both
  light headers (using CSS variables) and gradient headers (white text)
- Make hamburger button always display:flex for consistent mobile layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Marius Mutu
2025-12-19 12:35:14 +02:00
parent 3295f60faa
commit ee239eb3f3
5 changed files with 70 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
shared/frontend/components/CompanySelector.vue
View File

@@ -528,26 +528,48 @@ export default {
}
}
/* Header variant - transparent background, white text for dark headers */
/* Header variant - transparent background for header integration */
.company-selector--header .company-trigger {
background: transparent;
border-color: rgba(255, 255, 255, 0.3);
border-color: var(--color-border, rgba(0, 0, 0, 0.2));
}
.company-selector--header .company-trigger:hover {
background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
border-color: var(--color-primary, #2563eb);
}
.company-selector--header .company-name {
color: var(--color-text, #111827);
}
.company-selector--header .company-code {
color: var(--color-text-secondary, #6b7280);
}
.company-selector--header .pi-chevron-down {
color: var(--color-text-secondary, #6b7280);
}
/* Gradient header variant - white text for dark/gradient headers */
.header-container--gradient .company-selector--header .company-trigger {
border-color: rgba(255, 255, 255, 0.3);
}
.header-container--gradient .company-selector--header .company-trigger:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.company-selector--header .company-name {
.header-container--gradient .company-selector--header .company-name {
color: white;
}
.company-selector--header .company-code {
.header-container--gradient .company-selector--header .company-code {
color: rgba(255, 255, 255, 0.8);
}
.company-selector--header .pi-chevron-down {
.header-container--gradient .company-selector--header .pi-chevron-down {
color: rgba(255, 255, 255, 0.8);
}

38
shared/frontend/components/PeriodSelector.vue
View File

@@ -410,30 +410,56 @@ export default {
}
}
/* Header variant - transparent background, white text for dark headers */
/* Header variant - transparent background for header integration */
.period-selector--header .period-trigger {
background: transparent;
border-color: rgba(255, 255, 255, 0.3);
border-color: var(--color-border, rgba(0, 0, 0, 0.2));
}
.period-selector--header .period-trigger:hover:not(:disabled) {
background: var(--color-bg-secondary, rgba(0, 0, 0, 0.05));
border-color: var(--color-primary, #2563eb);
}
.period-selector--header .period-trigger:disabled {
border-color: var(--color-border, rgba(0, 0, 0, 0.1));
}
.period-selector--header .period-label {
color: var(--color-text-secondary, #6b7280);
}
.period-selector--header .period-name {
color: var(--color-text, #111827);
}
.period-selector--header .pi-chevron-down {
color: var(--color-text-secondary, #6b7280);
}
/* Gradient header variant - white text for dark/gradient headers */
.header-container--gradient .period-selector--header .period-trigger {
border-color: rgba(255, 255, 255, 0.3);
}
.header-container--gradient .period-selector--header .period-trigger:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.period-selector--header .period-trigger:disabled {
.header-container--gradient .period-selector--header .period-trigger:disabled {
border-color: rgba(255, 255, 255, 0.15);
}
.period-selector--header .period-label {
.header-container--gradient .period-selector--header .period-label {
color: rgba(255, 255, 255, 0.7);
}
.period-selector--header .period-name {
.header-container--gradient .period-selector--header .period-name {
color: white;
}
.period-selector--header .pi-chevron-down {
.header-container--gradient .period-selector--header .pi-chevron-down {
color: rgba(255, 255, 255, 0.8);
}