@redvars/peacock 3.5.0 → 3.6.0

package/src/calendar/calendar-event.ts

@@ -0,0 +1,20 @@
+import { BaseEvent } from './base-event.js';
+
+export class CalendarEvent extends BaseEvent {
+  data: any;
+  title: string;
+  color?: string;
+
+  constructor(
+    start: Date,
+    end: Date,
+    title: string,
+    color: string | undefined,
+    data: any,
+  ) {
+    super(start, end);
+    this.data = data;
+    if (color) this.color = color;
+    this.title = title;
+  }
+}

package/src/calendar/calendar-month-view.scss

@@ -0,0 +1,192 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  --calendar-border-color: var(--color-outline-variant);
+  --calendar-scale-color: var(--color-outline-variant);
+  --scale-size: 3rem;
+}
+
+.scale {
+  width: var(--scale-size);
+  flex-shrink: 0;
+}
+
+.calendar-month-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ── Header ── */
+.view-header {
+  background: var(--color-surface-container);
+  display: flex;
+  border-bottom: 1px solid var(--calendar-border-color);
+
+  .columns {
+    display: flex;
+    flex: 1;
+
+    .column {
+      flex: 1;
+      border-inline-start: 1px solid var(--calendar-border-color);
+
+      &:first-child {
+        border-inline-start: 0;
+      }
+
+      .column-content {
+        display: flex;
+        align-items: center;
+        padding: 0.5rem 0.75rem;
+        gap: 0.5rem;
+      }
+
+      .day {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--color-on-surface-variant);
+      }
+    }
+  }
+
+  .scrollbar-placeholder {
+    width: var(--scrollbar-width, 0px);
+  }
+}
+
+/* ── View body ── */
+.view-body {
+  height: 100%;
+  overflow-y: auto;
+
+  .view-body-scroll {
+    display: flex;
+    position: relative;
+    min-height: 100%;
+
+    .drawing-area {
+      flex: 1;
+
+      .multi-day-section {
+        border-bottom: 1px solid var(--calendar-scale-color);
+        min-height: 8rem;
+
+        .multi-day-body-scroll {
+          position: relative;
+          height: 100%;
+        }
+
+        .multi-day-background {
+          display: flex;
+          height: 100%;
+          position: absolute;
+          width: 100%;
+
+          .columns {
+            display: flex;
+            flex: 1;
+
+            .column {
+              min-height: 8rem;
+              flex: 1;
+              border-inline-start: 1px solid var(--calendar-scale-color);
+
+              &:first-child {
+                border-inline-start: 0;
+              }
+
+              .column-header {
+                font-size: 0.75rem;
+                color: var(--color-on-surface-variant);
+                padding-inline-start: 0.5rem;
+                padding-top: 0.375rem;
+                border-top: 3px solid transparent;
+              }
+
+              &.today {
+                background: color-mix(in srgb, var(--color-primary) 6%, transparent);
+
+                .column-header {
+                  border-top-color: var(--color-primary);
+                }
+              }
+            }
+          }
+        }
+
+        .multi-events {
+          min-height: 4rem;
+          padding-top: 2rem;
+          height: 100%;
+
+          .row {
+            height: 1.8rem;
+            box-sizing: content-box;
+            position: relative;
+            padding-bottom: 0.25rem;
+
+            &:last-child {
+              padding-bottom: 0;
+            }
+          }
+
+          .row-spacer {
+            height: 0.75rem;
+          }
+
+          .event {
+            position: absolute;
+            height: 1.8rem;
+            text-overflow: ellipsis;
+            overflow: hidden;
+
+            .event-title {
+              padding: 0.25rem 0.375rem;
+              font-size: 0.75rem;
+              font-weight: 500;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            &.clickable {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* ── Event styles ── */
+.event {
+  background: var(--calendar-event-bg-color);
+  border-inline-start: 0.25rem solid var(--calendar-event-border-color);
+  border-radius: var(--shape-corner-extra-small);
+  color: var(--calendar-event-text-color);
+  transition: background 150ms ease;
+
+  &.clickable {
+    &:hover {
+      background: var(--calendar-event-bg-color--hover);
+      color: var(--calendar-event-text-color--hover);
+    }
+  }
+}
+
+/* ── Today highlighting ── */
+.calendar-month-view .view-body .view-body-scroll .drawing-area .multi-day-section .multi-day-background .columns .column {
+  &.today {
+    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
+
+    .column-header {
+      border-top-color: var(--color-primary);
+    }
+  }
+}

package/src/calendar/calendar-month-view.ts

@@ -0,0 +1,244 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import {
+  addDays,
+  differenceInDays,
+  startOfDay,
+  endOfDay,
+  calculateMonthRange,
+  formatDate,
+  getTimePercent,
+  LONG_EVENT_PADDING,
+} from './utils.js';
+import { BaseEvent } from './base-event.js';
+import { CalendarEvent } from './calendar-event.js';
+import { MonthEventManager } from './event-manager.js';
+import type { ColumnEvent } from './event-manager.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './calendar-month-view.scss';
+
+/**
+ * @label Calendar Month View
+ * @tag wc-calendar-month-view
+ * @rawTag calendar-month-view
+ * @parentRawTag calendar
+ * @summary Internal month view component for the calendar.
+ */
+@IndividualComponent
+export class CalendarMonthView extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Array })
+  events: CalendarEvent[] = [];
+
+  @property({ type: Boolean, attribute: 'event-clickable' })
+  eventClickable: boolean = true;
+
+  @property({ type: Object, attribute: false })
+  currentTime: Date = new Date();
+
+  @property({ type: Object, attribute: false })
+  contextDate: Date = new Date();
+
+  @state()
+  private dateRange: any = {};
+
+  @state()
+  private weekDayEvents: ColumnEvent[][][] = [];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._processEvents();
+  }
+
+  override willUpdate(changedProperties: Map<string, unknown>) {
+    if (
+      changedProperties.has('events') ||
+      changedProperties.has('contextDate')
+    ) {
+      this._processEvents();
+    }
+  }
+
+  override firstUpdated() {
+    const viewBody = this.renderRoot.querySelector('.view-body');
+    if (viewBody) {
+      const viewBodyHeight = viewBody.scrollHeight;
+      viewBody.scrollTo({
+        top:
+          (getTimePercent(this.currentTime) / 100) * viewBodyHeight - 150,
+      });
+    }
+  }
+
+  private _processEvents() {
+    this.dateRange = calculateMonthRange(this.contextDate, 1);
+    this.weekDayEvents = [];
+
+    for (
+      let i = new Date(this.dateRange.startDate), j = 0;
+      j < 6;
+      i = addDays(i, 7), j++
+    ) {
+      const manager = new MonthEventManager();
+      manager.addEvents(
+        this.events.filter(event =>
+          event.isOverlapping(
+            new BaseEvent(startOfDay(i), endOfDay(addDays(i, 6))),
+          ),
+        ),
+      );
+      manager.process();
+      this.weekDayEvents.push(manager.columns);
+    }
+  }
+
+  private _getDatePercent(date: Date, dateRangeStartDate: Date): number {
+    const currentDay = differenceInDays(startOfDay(date), dateRangeStartDate);
+    const percent = (currentDay / 7) * 100;
+    if (percent < 0) return 0;
+    if (percent > 100) return 100;
+    return percent;
+  }
+
+  private _getDayClass(date: Date): string {
+    const diff = differenceInDays(
+      startOfDay(date),
+      startOfDay(this.currentTime),
+    );
+    if (diff === 0) return 'column today';
+    if (diff < 0) return 'column past';
+    return 'column future';
+  }
+
+  private _populateColorVars(
+    styles: Record<string, string>,
+    color: string,
+  ) {
+    styles['--calendar-event-bg-color'] = `var(--color-${color}-container)`;
+    styles['--calendar-event-bg-color--hover'] = `var(--color-inverse-${color})`;
+    styles['--calendar-event-border-color'] = `var(--color-${color})`;
+    styles['--calendar-event-text-color'] = `var(--color-on-${color}-container)`;
+    styles['--calendar-event-text-color--hover'] = `var(--color-on-${color})`;
+  }
+
+  private _emitEventClick(event: any) {
+    this.dispatchEvent(
+      new CustomEvent('month-view-event-click', {
+        detail: { event },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderHeader() {
+    const columns: any[] = [];
+    for (
+      let i = new Date(this.dateRange.startDate), j = 0;
+      j < 7;
+      i = addDays(i, 1), j++
+    ) {
+      columns.push(html`
+        <div class="column">
+          <div class="column-content">
+            <div class="day">${formatDate(i, 'EEEE')}</div>
+          </div>
+        </div>
+      `);
+    }
+    return columns;
+  }
+
+  private _renderMultiDayBackground(sd: Date) {
+    const columns: any[] = [];
+    for (let i = new Date(sd), j = 0; j < 7; i = addDays(i, 1), j++) {
+      columns.push(html`
+        <div class=${this._getDayClass(i)}>
+          <div class="column-content">
+            <div class="column-header">
+              <div class="day">${formatDate(i, 'd')}</div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+    return columns;
+  }
+
+  private _renderEvents() {
+    return this.weekDayEvents.map((eventDay, index) => {
+      const weekStartDate = addDays(this.dateRange.startDate, index * 7);
+      return html`
+        <div class="multi-day-section">
+          <div class="multi-day-body-scroll">
+            <div class="multi-day-background">
+              <div class="columns">
+                ${this._renderMultiDayBackground(weekStartDate)}
+              </div>
+            </div>
+            <div class="multi-events">
+              <div class="row-content">
+                ${eventDay.map(
+                  nodes => html`
+                    <div class="row">
+                      ${nodes.map(node => {
+                        const evtCls = this.eventClickable
+                          ? 'event clickable'
+                          : 'event';
+                        const evtStyles: Record<string, string> = {
+                          left: `${this._getDatePercent(node.start, weekStartDate) + LONG_EVENT_PADDING}%`,
+                          width: `${this._getDatePercent(addDays(node.end, 1), weekStartDate) - this._getDatePercent(node.start, weekStartDate) - 2 * LONG_EVENT_PADDING}%`,
+                        };
+                        if (node.color) {
+                          this._populateColorVars(evtStyles, node.color);
+                        }
+                        return html`
+                          <div
+                            class=${evtCls}
+                            style=${this._styleMap(evtStyles)}
+                            @click=${() => {
+                              if (this.eventClickable)
+                                this._emitEventClick(node.data);
+                            }}
+                          >
+                            <div class="event-title">
+                              ${node.title || '(no title)'}
+                            </div>
+                          </div>
+                        `;
+                      })}
+                    </div>
+                  `,
+                )}
+                <div class="row-spacer"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  private _styleMap(styles: Record<string, string>): string {
+    return Object.entries(styles)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(';');
+  }
+
+  render() {
+    return html`
+      <div class="calendar-month-view">
+        <div class="view-header">
+          <div class="columns">${this._renderHeader()}</div>
+          <div class="scrollbar-placeholder"></div>
+        </div>
+        <div class="view-body">
+          <div class="view-body-scroll">
+            <div class="drawing-area">${this._renderEvents()}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/calendar/calendar.scss

@@ -0,0 +1,71 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  height: 100%;
+  min-height: 20em;
+
+  --calendar-border-color: var(--color-outline-variant);
+  --calendar-scale-color: var(--color-outline-variant);
+
+  --calendar-event-bg-color: var(--color-primary-container);
+  --calendar-event-bg-color--hover: var(--color-inverse-primary);
+  --calendar-event-border-color: var(--color-primary);
+  --calendar-event-text-color: var(--color-on-primary-container);
+  --calendar-event-text-color--hover: var(--color-on-primary);
+
+  --calendar-surface: var(--color-surface);
+  --calendar-surface-variant: var(--color-surface-variant);
+  --calendar-on-surface: var(--color-on-surface);
+  --calendar-on-surface-variant: var(--color-on-surface-variant);
+}
+
+.calendar {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--calendar-surface);
+  border-radius: var(--shape-corner-large);
+  overflow: hidden;
+}
+
+.calendar-header {
+  .calendar-header-classic {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+
+    .header-left {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      flex: 1;
+
+      .title {
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--calendar-on-surface);
+        padding-inline-start: 0.5rem;
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.calendar-body {
+  flex: 1;
+  overflow: auto;
+
+  .view-container {
+    height: 100%;
+  }
+}