picocrank 1.25.1 → 1.26.0

package/vue/components/Calendar.vue

@@ -12,6 +12,8 @@ export interface CalendarEvent {
   icon?: unknown
   /** Optional CSS color overriding the default event background. */
   color?: string
+  /** Optional CSS color for event title/time when using a custom background. */
+  foregroundColor?: string
   [key: string]: any
 }
 
@@ -23,7 +25,7 @@ export interface CalendarEventMoveRequest {
   /** Calendar cell where the event was dropped. */
   targetDate: Date
   /** Invoke exactly once with the outcome. If omitted until timeout, the move is treated as rejected. */
-  respond: (accepted: boolean) => void
+  respond: (_accepted: boolean) => void
 }
 
 export interface CalendarProps {
@@ -41,9 +43,9 @@ export interface CalendarProps {
    */
   eventMoveResponseTimeoutMs?: number
   // Formatter functions
-  getEventDate?: (event: CalendarEvent) => Date | null
-  getEventDateRange?: (event: CalendarEvent) => { start: Date | null; end: Date | null }
-  formatEventTime?: (event: CalendarEvent, date: Date) => string
+  getEventDate?: (_event: CalendarEvent) => Date | null
+  getEventDateRange?: (_event: CalendarEvent) => { start: Date | null; end: Date | null }
+  formatEventTime?: (_event: CalendarEvent, _date: Date) => string
   // Customization
   showNavigation?: boolean
   /** When true, day titles show ordinal + full month name (e.g. "21st July") instead of the day number alone. */
@@ -87,8 +89,8 @@ const currentDate = computed(() => {
   return internalCurrentDate.value
 })
 
-const currentMonth = computed(() => currentDate.value.getMonth())
-const currentYear = computed(() => currentDate.value.getFullYear())
+const viewMonth = computed(() => currentDate.value.getMonth())
+const viewYear = computed(() => currentDate.value.getFullYear())
 
 // Compute the first visible day (Monday) for the current month view
 function getStartOfGrid(date: Date): Date {
@@ -130,7 +132,7 @@ function isPastDay(date: Date): boolean {
 }
 
 // Get event date range
-function getEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
+function resolveEventDateRange(event: CalendarEvent): { start: Date | null; end: Date | null } {
   if (props.getEventDateRange) {
     return props.getEventDateRange(event)
   }
@@ -158,7 +160,7 @@ function getEventsForDate(date: Date): CalendarEvent[] {
   targetDate.setHours(0, 0, 0, 0)
 
   return props.events.filter(event => {
-    const { start, end } = getEventDateRange(event)
+    const { start, end } = resolveEventDateRange(event)
     
     if (!start) return false
     
@@ -177,7 +179,7 @@ function getEventsForDate(date: Date): CalendarEvent[] {
 
 // Check if an event is a multi-day event
 function isMultiDayEvent(event: CalendarEvent): boolean {
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   
   if (!start || !end) return false
 
@@ -192,7 +194,7 @@ function isMultiDayEvent(event: CalendarEvent): boolean {
 
 // Get the position of an event within a multi-day range for a specific date
 function getMultiDayPosition(event: CalendarEvent, date: Date): 'start' | 'middle' | 'end' | 'single' {
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   
   if (!start || !end) return 'single'
 
@@ -218,7 +220,7 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
     return props.formatEventTime(event, date)
   }
   
-  const { start, end } = getEventDateRange(event)
+  const { start, end } = resolveEventDateRange(event)
   const position = getMultiDayPosition(event, date)
 
   if (!start || !end) return 'No time'
@@ -237,8 +239,14 @@ function formatEventTimeDefault(event: CalendarEvent, date: Date): string {
 }
 
 function getEventStyle(event: CalendarEvent): Record<string, string> | undefined {
-  if (!event.color) return undefined
-  return { '--event-color': event.color }
+  const style: Record<string, string> = {}
+  if (event.color) {
+    style['--event-color'] = event.color
+  }
+  if (event.foregroundColor) {
+    style['--event-foreground-color'] = event.foregroundColor
+  }
+  return Object.keys(style).length > 0 ? style : undefined
 }
 
 // Get ordinal suffix for a number (1st, 2nd, 3rd, 4th, etc.)
@@ -275,25 +283,25 @@ const calendarDays = computed(() => {
 // Navigation functions
 function previousMonth() {
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
-    const newMonth = currentMonth.value === 0 ? 11 : currentMonth.value - 1
-    const newYear = currentMonth.value === 0 ? currentYear.value - 1 : currentYear.value
+    const newMonth = viewMonth.value === 0 ? 11 : viewMonth.value - 1
+    const newYear = viewMonth.value === 0 ? viewYear.value - 1 : viewYear.value
     emit('month-change', newMonth, newYear)
     // Optimistically update grid anchor for smooth transition
     gridStartDate.value = getStartOfGrid(new Date(newYear, newMonth, 1))
   } else {
-    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value - 1, 1)
+    internalCurrentDate.value = new Date(viewYear.value, viewMonth.value - 1, 1)
     gridStartDate.value = getStartOfGrid(internalCurrentDate.value)
   }
 }
 
 function nextMonth() {
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
-    const newMonth = currentMonth.value === 11 ? 0 : currentMonth.value + 1
-    const newYear = currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value
+    const newMonth = viewMonth.value === 11 ? 0 : viewMonth.value + 1
+    const newYear = viewMonth.value === 11 ? viewYear.value + 1 : viewYear.value
     emit('month-change', newMonth, newYear)
     gridStartDate.value = getStartOfGrid(new Date(newYear, newMonth, 1))
   } else {
-    internalCurrentDate.value = new Date(currentYear.value, currentMonth.value + 1, 1)
+    internalCurrentDate.value = new Date(viewYear.value, viewMonth.value + 1, 1)
     gridStartDate.value = getStartOfGrid(internalCurrentDate.value)
   }
 }
@@ -325,7 +333,7 @@ function adjustByWeeks(weeks: number): void {
 
   if (props.currentMonth !== undefined && props.currentYear !== undefined) {
     const { month, year } = getVisibleMonthYear(newStart)
-    if (month !== currentMonth.value || year !== currentYear.value) {
+    if (month !== viewMonth.value || year !== viewYear.value) {
       emit('month-change', month, year)
       // Set flag to prevent watcher from resetting our scroll position
       isScrolling.value = true
@@ -589,9 +597,9 @@ function onDayDrop(dayDate: Date, ev: DragEvent): void {
 }
 
 // Sync grid start when controlled month/year props change (but not during scrolling)
-watch([currentMonth, currentYear], () => {
+watch([viewMonth, viewYear], () => {
   if (isScrolling.value) return
-  const anchor = new Date(currentYear.value, currentMonth.value, 1)
+  const anchor = new Date(viewYear.value, viewMonth.value, 1)
   gridStartDate.value = getStartOfGrid(anchor)
 })
 
@@ -600,7 +608,7 @@ watch([currentMonth, currentYear], () => {
 <template>
   <div class="calendar-wrapper">
     <div v-if="showNavigation" class="calendar-header-nav">
-      <h2 class="calendar-title">{{ monthNames[currentMonth] }} {{ currentYear }}</h2>
+      <h2 class="calendar-title">{{ monthNames[viewMonth] }} {{ viewYear }}</h2>
       <div class="calendar-nav-buttons">
         <slot name="nav-buttons">
           <button @click="previousMonth" class="button neutral">‹</button>
@@ -638,8 +646,8 @@ watch([currentMonth, currentYear], () => {
           :class="{
             'today': day.date.toDateString() === new Date().toDateString(),
             'weekend': day.date.getDay() === 0 || day.date.getDay() === 6,
-            'prev-month': day.date.getMonth() !== currentMonth && day.date.getMonth() !== (currentMonth + 1) % 12,
-            'next-month': day.date.getMonth() !== currentMonth && day.date.getMonth() === (currentMonth + 1) % 12,
+            'prev-month': day.date.getMonth() !== viewMonth && day.date.getMonth() !== (viewMonth + 1) % 12,
+            'next-month': day.date.getMonth() !== viewMonth && day.date.getMonth() === (viewMonth + 1) % 12,
             'past': isPastDay(day.date),
             'range-single': rangeHighlightForDate(day.date) === 'single',
             'range-start': rangeHighlightForDate(day.date) === 'start',
@@ -731,7 +739,7 @@ watch([currentMonth, currentYear], () => {
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #f8f9fa;
+  background: var(--calendar-chrome-bg);
   border-radius: 8px;
 }
 
@@ -748,7 +756,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-error {
-  color: #b00020;
+  color: var(--calendar-error-fg);
   padding: 1rem;
 }
 
@@ -763,14 +771,14 @@ watch([currentMonth, currentYear], () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--calendar-loading-overlay-bg);
   z-index: 1;
   font-weight: 600;
 }
 
 .calendar-container {
-  background: white;
-  border: 1px solid #e0e0e0;
+  background: var(--calendar-surface-bg);
+  border: 1px solid var(--calendar-border);
   overflow: hidden;
   border-radius: 8px;
   position: relative;
@@ -788,36 +796,36 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.range-single {
-  background-color: rgba(0, 123, 255, 0.22) !important;
-  box-shadow: inset 0 0 0 2px #007bff;
+  background-color: var(--calendar-range-bg-strong) !important;
+  box-shadow: inset 0 0 0 2px var(--calendar-range-accent);
 }
 
 .calendar-day.range-start {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset 2px 0 0 0 #007bff,
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset 2px 0 0 0 var(--calendar-range-accent),
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.range-end {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset -2px 0 0 0 #007bff,
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset -2px 0 0 0 var(--calendar-range-accent),
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.range-middle {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.drag-over-target {
-  background-color: rgba(0, 123, 255, 0.1) !important;
-  outline: 2px dashed #007bff;
+  background-color: var(--calendar-range-bg-subtle) !important;
+  outline: 2px dashed var(--calendar-range-accent);
   outline-offset: -3px;
 }
 
@@ -825,10 +833,10 @@ watch([currentMonth, currentYear], () => {
   padding: 1rem;
   text-align: center;
   font-weight: 600;
-  color: #666;
-  border-right: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
-  background: #f8f9fa;
+  color: var(--calendar-muted-fg);
+  border-right: 1px solid var(--calendar-border);
+  border-bottom: 1px solid var(--calendar-border);
+  background: var(--calendar-chrome-bg);
 }
 
 .day-header:last-child {
@@ -836,8 +844,8 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day {
-  border-right: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
+  border-right: 1px solid var(--calendar-border);
+  border-bottom: 1px solid var(--calendar-border);
   height: 160px;
   position: relative;
   transition: background-color 0.2s ease;
@@ -846,7 +854,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day:hover {
-  background-color: #f0f8ff;
+  background-color: var(--calendar-day-hover-bg);
 }
 
 .calendar-day:hover .day-number .day-month {
@@ -858,21 +866,21 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.weekend {
-  background: #f8f9fa;
+  background: var(--calendar-day-muted-bg);
 }
 
 .calendar-day.weekend:hover {
-  background: #e9ecef;
+  background: var(--calendar-day-muted-hover-bg);
 }
 
 .calendar-day.next-month,
 .calendar-day.prev-month {
-  background: #f8f9fa;
+  background: var(--calendar-day-muted-bg);
 }
 
 .calendar-day.next-month:hover,
 .calendar-day.prev-month:hover {
-  background: #e9ecef;
+  background: var(--calendar-day-muted-hover-bg);
 }
 
 .calendar-day.past {
@@ -884,12 +892,12 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.today {
-  background: #f7f8d7;
+  background: var(--calendar-today-bg);
   font-weight: bold;
 }
 
 .calendar-day.today:hover {
-  background: #bbdefb;
+  background: var(--calendar-today-hover-bg);
 }
 
 
@@ -902,7 +910,7 @@ watch([currentMonth, currentYear], () => {
 .day-number {
   font-size: 0.9rem;
   margin-bottom: 0.25rem;
-  color: #333;
+  color: var(--calendar-day-fg);
   text-decoration: none;
   display: inline-block;
   padding: 0.1rem;
@@ -932,7 +940,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .day-content:hover .day-number.clickable {
-  color: #007bff;
+  color: var(--calendar-accent-fg);
 }
 
 .day-events {
@@ -941,12 +949,12 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-event {
-  background: #d6f1aa;
-  border: 1px solid #c4db96;
+  background: var(--calendar-event-bg);
+  border: 1px solid var(--calendar-event-border);
   margin-bottom: 0.25rem;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--calendar-event-shadow);
   padding: 0.1rem 0.1rem;
 }
 
@@ -963,23 +971,35 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-event:hover {
-  background: #b3de6e;
-  border-color: #c4db96;
+  background: var(--calendar-event-hover-bg);
+  border-color: var(--calendar-event-border);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--calendar-event-hover-shadow);
 }
 
 .calendar-event.has-custom-color {
   background: var(--event-color);
-  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+  border-color: color-mix(in srgb, var(--event-color) 75%, var(--calendar-event-custom-border-mix));
 }
 
 .calendar-event.has-custom-color:hover {
   background: var(--event-color);
-  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+  border-color: color-mix(in srgb, var(--event-color) 75%, var(--calendar-event-custom-border-mix));
   filter: brightness(0.92);
 }
 
+.calendar-event.has-custom-color .event-title {
+  color: var(--event-foreground-color, var(--calendar-event-title-fg));
+}
+
+.calendar-event.has-custom-color .event-time {
+  color: var(--event-foreground-color, var(--calendar-muted-fg));
+}
+
+.calendar-event.has-custom-color .multi-day-indicator {
+  color: var(--event-foreground-color, var(--calendar-accent-fg));
+}
+
 .event-icon {
   flex-shrink: 0;
 }
@@ -1005,7 +1025,7 @@ watch([currentMonth, currentYear], () => {
 .event-title {
   font-weight: bold;
   font-size: 0.85rem;
-  color: #333;
+  color: var(--calendar-event-title-fg);
   white-space: normal;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1016,22 +1036,22 @@ watch([currentMonth, currentYear], () => {
 
 .multi-day-indicator {
   font-size: 0.7rem;
-  color: #007bff;
+  color: var(--calendar-accent-fg);
   font-weight: bold;
 }
 
 .event-time {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--calendar-muted-fg);
   margin-top: 0.125rem;
 }
 
 .more-events {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--calendar-muted-fg);
   text-align: center;
   padding: 0.25rem;
-  background: #f8f9fa;
+  background: var(--calendar-more-bg);
   border-radius: 4px;
   margin-top: 0.25rem;
 }
@@ -1085,111 +1105,4 @@ watch([currentMonth, currentYear], () => {
     padding: 0.25rem 0.5rem;
   }
 }
-
-html[data-theme="dark"] {
-  .calendar-container {
-    background: #565656;
-    border-color: #374151;
-    border: 1px solid #565656;
-  }
-
-  .calendar-day.today {
-    background: #646c70;
-  }
-
-  .calendar-day.weekend {
-    background: #444;
-  }
-
-  .calendar-day.weekend:hover {
-    background: #1a1a1a;
-  }
-
-  .calendar-day.next-month,
-  .calendar-day.prev-month {
-    background: #1a1a1a !important;
-  }
-  
-  .calendar-day.next-month:hover,
-  .calendar-day.prev-month:hover {
-    background: #374151;
-  }
-
-  .calendar-day.today:hover {
-    background: #374151;
-  }
-
-  .calendar-day {
-    border: 1px solid #3b3b3b;
-  }
-
-  .day-number {
-    color: #f9fafb;
-  }
-
-  .day-header {
-    color: #f9fafb;
-    background: #444 !important;
-    border: 1px solid #374151;
-    border-color: #374151;
-  }
-
-  .day-content:hover .day-number.clickable {
-    color: #f9fafb;
-  }
-
-  .calendar-day:hover {
-    background-color: #374151;
-  }
-
-  .calendar-day.today:hover {
-    background: #374151;
-  }
-
-  .calendar-day.weekend:hover {
-    background: #374151;
-  }
-
-  .calendar-day.range-single {
-    background-color: rgba(96, 165, 250, 0.28) !important;
-    box-shadow: inset 0 0 0 2px #60a5fa;
-  }
-
-  .calendar-day.range-start {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset 2px 0 0 0 #60a5fa,
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.range-end {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset -2px 0 0 0 #60a5fa,
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.range-middle {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.drag-over-target {
-    background-color: rgba(96, 165, 250, 0.12) !important;
-    outline: 2px dashed #60a5fa;
-    outline-offset: -3px;
-  }
-
-  .calendar-day.past {
-    opacity: 0.6;
-  }
-
-  .calendar-day.past:hover {
-    opacity: 0.8;
-  }
-}
 </style>