vue (#1)

Port to Vue. Also implements plenty of new functionality.
2025-08-22 23:34:33 +01:00
parent a92ef0479a
commit 018b9ecc55
35 changed files with 4137 additions and 1717 deletions
@@ -0,0 +1,3 @@
+/* Calendar CSS - Main file with imports */
+@import url('./colors.css');
+@import url('./layout.css');
@@ -0,0 +1,116 @@
+/* Color tokens */
+:root {
+  --panel: #ffffff;
+  --panel-alt: #f6f8fa;
+  --panel-accent: #eef4ff;
+  --today: #f83;
+  --ink: #222;
+  --strong: #000;
+  --muted: #6a6f76;
+  --muted-alt: #9aa2ad;
+  --accent: #2563eb; /* blue */
+  --accent-soft: #dbeafe;
+  --accent-hover: #1d4ed8;
+  --danger: #dc2626;
+  --danger-hover: #b91c1c;
+  --weekend: #888;
+  --firstday: #000;
+  --select: #aaf;
+  --shadow: #fff;
+  --label-bg: #fafbfe;
+  --label-bg-rgb: 250, 251, 254;
+
+  /* Input / recurrence tokens */
+  --input-border: var(--muted-alt);
+  --input-focus: var(--accent);
+  --pill-bg: var(--panel-alt);
+  --pill-active-bg: var(--accent);
+  --pill-active-ink: #fff;
+  --pill-hover-bg: var(--accent-soft);
+
+  /* Vue component color mappings */
+  --bg: var(--panel);
+  --border-color: #ddd;
+}
+
+/* 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%) }
+
+/* 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 */
+
+/* Color tokens (dark) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel: #121417;
+    --panel-alt: #1d2228;
+    --panel-accent: #1a2634;
+    --today: #f83;
+    --ink: #e5e7eb;
+    --strong: #fff;
+    --muted: #7d8691;
+    --muted-alt: #5d646d;
+    --accent: #3b82f6;
+    --accent-soft: rgba(59,130,246,0.15);
+    --accent-hover: #2563eb;
+    --danger: #ef4444;
+    --danger-hover: #dc2626;
+    --workday: var(--ink);
+    --weekend: #999;
+    --firstday: #fff;
+    --select: #3355ff;
+    --shadow: #000;
+    --label-bg: #1a1d25;
+    --label-bg-rgb: 26, 29, 37;
+    --input-border: var(--muted-alt);
+    --input-focus: var(--accent);
+    --pill-bg: #222a32;
+    --pill-active-bg: var(--accent);
+    --pill-active-ink: #fff;
+    --pill-hover-bg: rgba(255,255,255,0.08);
+
+    /* Vue component color mappings (dark) */
+    --bg: var(--panel);
+    --border-color: #333;
+  }
+
+  .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 */
+}
@@ -0,0 +1,143 @@
+/* Layout variables */
+:root {
+  /* Layout */
+  --row-h: 2.2em;
+  --label-w: minmax(4em, 8%);
+  --cell-w: 1fr;
+  --cell-h: clamp(4em, 8vh, 8em);
+  --overlay-w: minmax(3rem, 5%);
+}
+
+/* Layout & typography */
+* { box-sizing: border-box }
+
+body {
+  margin: 0;
+  font: 500 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: .75rem;
+  flex-shrink: 0;
+}
+
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: .75rem;
+}
+
+.today-date { cursor: pointer }
+.today-date::first-line { color: var(--today) }
+.today-button:hover { opacity: .8 }
+
+/* Header row */
+.calendar-header, #calendar-header {
+  display: grid;
+  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  border-bottom: .2em solid var(--muted);
+  align-items: last baseline;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+/* Main container */
+.calendar-container, #calendar-container {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  display: flex;
+}
+
+/* Viewports (support id or class) */
+.calendar-viewport, #calendar-viewport {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  width: 100%;
+  scrollbar-width: none;
+}
+.calendar-viewport::-webkit-scrollbar,
+#calendar-viewport::-webkit-scrollbar { display: none }
+
+.jogwheel-viewport, #jogwheel-viewport {
+  position: absolute;
+  top: 0; right: 0; bottom: 0;
+  width: var(--overlay-w);
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  z-index: 20;
+  cursor: ns-resize;
+}
+.jogwheel-viewport::-webkit-scrollbar,
+#jogwheel-viewport::-webkit-scrollbar { display: none }
+
+.jogwheel-content, #jogwheel-content { position: relative; width: 100% }
+.calendar-content, #calendar-content { position: relative }
+
+/* Week row: label + 7-day grid + jogwheel column */
+.week-row {
+  display: grid;
+  grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+  position: relative;
+  overflow: visible;
+  height: var(--cell-h);
+  scroll-snap-align: start;
+  width: 100%;
+}
+
+/* Label cells */
+.year-label, .week-label {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  color: var(--muted);
+  cursor: ns-resize;
+  font-size: 1.2em;
+}
+
+.week-label {
+  height: var(--cell-h);
+}
+/* 7-day grid inside each week row */
+.week-row > .days-grid {
+  grid-column: 2 / span 7;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 1fr;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.month-name-label {
+  grid-column: -2 / -1;
+  font-size: 2em;
+  font-weight: 700;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 15;
+  overflow: visible;
+  position: absolute;
+  top: 0; right: 0;
+  width: 100%;
+}
+.month-name-label > span {
+  display: inline-block;
+  white-space: nowrap;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  transform-origin: center;
+}