Major new version (#2)
Release Notes Architecture - Component refactor: removed monoliths (`Calendar.vue`, `CalendarGrid.vue`); expanded granular view + header/control components. - Dialog system introduced (`BaseDialog`, `SettingsDialog`). State & Data - Store redesigned: Map-based events + recurrence map; mutation counters. - Local persistence + undo/redo history (custom plugins). Date & Holidays - Migrated all date logic to `date-fns` (+ tz). - Added national holiday support (toggle + loading utilities). Recurrence & Events - Consolidated recurrence handling; fixes for monthly edge days (29–31), annual, multi‑day, and complex weekly repeats. - Reliable splitting/moving/resizing/deletion of repeating and multi‑day events. Interaction & UX - Double‑tap to create events; improved drag (multi‑day + position retention). - Scroll & inertial/momentum navigation; year change via numeric scroller. - Movable event dialog; live settings application. Performance - Progressive / virtual week rendering, reduced off‑screen buffer. - Targeted repaint strategy; minimized full re-renders. Plugins Added - History, undo normalization, persistence, scroll manager, virtual weeks. Styling & Layout - Responsive + compact layout refinements; header restructured. - Simplified visual elements (removed dots/overflow text); holiday styling adjustments. Reliability / Fixes - Numerous recurrence, deletion, orientation/rotation, and event indexing corrections. - Cross-browser fallback (Firefox week info). Dependencies Added - date-fns, date-fns-tz, date-holidays, pinia-plugin-persistedstate. Net Change - 28 files modified; ~4.4K insertions / ~2.2K deletions (major refactor + feature set).
This commit is contained in:
+130
-42
@@ -20,6 +20,10 @@
|
||||
--label-bg: #fafbfe;
|
||||
--label-bg-rgb: 250, 251, 254;
|
||||
|
||||
/* Holiday colors */
|
||||
--holiday: #da0;
|
||||
--holiday-label: var(--strong);
|
||||
|
||||
/* Input / recurrence tokens */
|
||||
--input-border: var(--muted-alt);
|
||||
--input-focus: var(--accent);
|
||||
@@ -34,28 +38,68 @@
|
||||
}
|
||||
|
||||
/* Month tints (light) */
|
||||
.dec { background: hsl(220 50% 95%) }
|
||||
.jan { background: hsl(220 50% 92%) }
|
||||
.feb { background: hsl(220 50% 95%) }
|
||||
.mar { background: hsl(125 60% 92%) }
|
||||
.apr { background: hsl(125 60% 95%) }
|
||||
.may { background: hsl(125 60% 92%) }
|
||||
.jun { background: hsl(45 85% 95%) }
|
||||
.jul { background: hsl(45 85% 92%) }
|
||||
.aug { background: hsl(45 85% 95%) }
|
||||
.sep { background: hsl(18 78% 92%) }
|
||||
.oct { background: hsl(18 78% 95%) }
|
||||
.nov { background: hsl(18 78% 92%) }
|
||||
.dec {
|
||||
background: hsl(220 50% 95%);
|
||||
}
|
||||
.jan {
|
||||
background: hsl(220 50% 92%);
|
||||
}
|
||||
.feb {
|
||||
background: hsl(220 50% 95%);
|
||||
}
|
||||
.mar {
|
||||
background: hsl(125 60% 92%);
|
||||
}
|
||||
.apr {
|
||||
background: hsl(125 60% 95%);
|
||||
}
|
||||
.may {
|
||||
background: hsl(125 60% 92%);
|
||||
}
|
||||
.jun {
|
||||
background: hsl(45 85% 95%);
|
||||
}
|
||||
.jul {
|
||||
background: hsl(45 85% 92%);
|
||||
}
|
||||
.aug {
|
||||
background: hsl(45 85% 95%);
|
||||
}
|
||||
.sep {
|
||||
background: hsl(18 78% 92%);
|
||||
}
|
||||
.oct {
|
||||
background: hsl(18 78% 95%);
|
||||
}
|
||||
.nov {
|
||||
background: hsl(18 78% 92%);
|
||||
}
|
||||
|
||||
/* Light mode — gray shades and colors */
|
||||
.event-color-0 { background: hsl(0, 0%, 85%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 75%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 65%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 55%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 70%, 70%) } /* red */
|
||||
.event-color-5 { background: hsl(90, 70%, 70%) } /* green */
|
||||
.event-color-6 { background: hsl(230, 70%, 70%) } /* blue */
|
||||
.event-color-7 { background: hsl(280, 70%, 70%) } /* purple */
|
||||
.event-color-0 {
|
||||
background: hsl(0, 0%, 85%);
|
||||
} /* lightest grey */
|
||||
.event-color-1 {
|
||||
background: hsl(0, 0%, 75%);
|
||||
} /* light grey */
|
||||
.event-color-2 {
|
||||
background: hsl(0, 0%, 65%);
|
||||
} /* medium grey */
|
||||
.event-color-3 {
|
||||
background: hsl(0, 0%, 55%);
|
||||
} /* dark grey */
|
||||
.event-color-4 {
|
||||
background: hsl(0, 70%, 70%);
|
||||
} /* red */
|
||||
.event-color-5 {
|
||||
background: hsl(90, 70%, 70%);
|
||||
} /* green */
|
||||
.event-color-6 {
|
||||
background: hsl(230, 70%, 70%);
|
||||
} /* blue */
|
||||
.event-color-7 {
|
||||
background: hsl(280, 70%, 70%);
|
||||
} /* purple */
|
||||
|
||||
/* Color tokens (dark) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -69,7 +113,7 @@
|
||||
--muted: #7d8691;
|
||||
--muted-alt: #5d646d;
|
||||
--accent: #3b82f6;
|
||||
--accent-soft: rgba(59,130,246,0.15);
|
||||
--accent-soft: rgba(59, 130, 246, 0.15);
|
||||
--accent-hover: #2563eb;
|
||||
--danger: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
@@ -85,32 +129,76 @@
|
||||
--pill-bg: #222a32;
|
||||
--pill-active-bg: var(--accent);
|
||||
--pill-active-ink: #fff;
|
||||
--pill-hover-bg: rgba(255,255,255,0.08);
|
||||
--pill-hover-bg: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* Vue component color mappings (dark) */
|
||||
--bg: var(--panel);
|
||||
--border-color: #333;
|
||||
|
||||
/* Holiday colors (dark mode) */
|
||||
--holiday: #ffc107;
|
||||
--holiday-label: #fff8e1;
|
||||
}
|
||||
|
||||
.dec { background: hsl(220 50% 8%) }
|
||||
.jan { background: hsl(220 50% 6%) }
|
||||
.feb { background: hsl(220 50% 8%) }
|
||||
.mar { background: hsl(125 60% 6%) }
|
||||
.apr { background: hsl(125 60% 8%) }
|
||||
.may { background: hsl(125 60% 6%) }
|
||||
.jun { background: hsl(45 85% 8%) }
|
||||
.jul { background: hsl(45 85% 6%) }
|
||||
.aug { background: hsl(45 85% 8%) }
|
||||
.sep { background: hsl(18 78% 6%) }
|
||||
.oct { background: hsl(18 78% 8%) }
|
||||
.nov { background: hsl(18 78% 6%) }
|
||||
.dec {
|
||||
background: hsl(220 50% 8%);
|
||||
}
|
||||
.jan {
|
||||
background: hsl(220 50% 6%);
|
||||
}
|
||||
.feb {
|
||||
background: hsl(220 50% 8%);
|
||||
}
|
||||
.mar {
|
||||
background: hsl(125 60% 6%);
|
||||
}
|
||||
.apr {
|
||||
background: hsl(125 60% 8%);
|
||||
}
|
||||
.may {
|
||||
background: hsl(125 60% 6%);
|
||||
}
|
||||
.jun {
|
||||
background: hsl(45 85% 8%);
|
||||
}
|
||||
.jul {
|
||||
background: hsl(45 85% 6%);
|
||||
}
|
||||
.aug {
|
||||
background: hsl(45 85% 8%);
|
||||
}
|
||||
.sep {
|
||||
background: hsl(18 78% 6%);
|
||||
}
|
||||
.oct {
|
||||
background: hsl(18 78% 8%);
|
||||
}
|
||||
.nov {
|
||||
background: hsl(18 78% 6%);
|
||||
}
|
||||
|
||||
.event-color-0 { background: hsl(0, 0%, 50%) } /* lightest grey */
|
||||
.event-color-1 { background: hsl(0, 0%, 40%) } /* light grey */
|
||||
.event-color-2 { background: hsl(0, 0%, 30%) } /* medium grey */
|
||||
.event-color-3 { background: hsl(0, 0%, 20%) } /* dark grey */
|
||||
.event-color-4 { background: hsl(0, 70%, 40%) } /* red */
|
||||
.event-color-5 { background: hsl(90, 70%, 30%) } /* green - darker for perceptional purposes */
|
||||
.event-color-6 { background: hsl(230, 70%, 40%) } /* blue */
|
||||
.event-color-7 { background: hsl(280, 70%, 40%) } /* purple */
|
||||
.event-color-0 {
|
||||
background: hsl(0, 0%, 50%);
|
||||
} /* lightest grey */
|
||||
.event-color-1 {
|
||||
background: hsl(0, 0%, 40%);
|
||||
} /* light grey */
|
||||
.event-color-2 {
|
||||
background: hsl(0, 0%, 30%);
|
||||
} /* medium grey */
|
||||
.event-color-3 {
|
||||
background: hsl(0, 0%, 20%);
|
||||
} /* dark grey */
|
||||
.event-color-4 {
|
||||
background: hsl(0, 70%, 40%);
|
||||
} /* red */
|
||||
.event-color-5 {
|
||||
background: hsl(90, 70%, 30%);
|
||||
} /* green - darker for perceptional purposes */
|
||||
.event-color-6 {
|
||||
background: hsl(230, 70%, 40%);
|
||||
} /* blue */
|
||||
.event-color-7 {
|
||||
background: hsl(280, 70%, 40%);
|
||||
} /* purple */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user