@redvars/peacock 3.5.0 → 3.6.0

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

@@ -0,0 +1,326 @@
+@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: 4rem;
+}
+
+.scale {
+  width: var(--scale-size);
+  flex-shrink: 0;
+}
+
+.calendar-column-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* ── Header ── */
+.view-header {
+  display: flex;
+  background: var(--color-surface-container);
+  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;
+        gap: 0.5rem;
+        border-top: 3px solid transparent;
+      }
+
+      &.today .column-content {
+        border-top-color: var(--color-primary);
+
+        .date {
+          color: var(--color-on-primary);
+          background: var(--color-primary);
+        }
+      }
+
+      .date {
+        font-size: 1.5rem;
+        font-weight: 500;
+        cursor: pointer;
+        border-radius: 50%;
+        width: 2.5rem;
+        height: 2.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-on-surface);
+        transition: background 200ms ease;
+
+        &:hover {
+          background: var(--color-primary-90);
+        }
+      }
+
+      .day {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--color-on-surface-variant);
+      }
+    }
+  }
+
+  .scrollbar-placeholder {
+    width: var(--scrollbar-width, 0px);
+  }
+}
+
+/* ── Multi-day section ── */
+.multi-day-section-wrapper {
+  background: var(--color-surface-container);
+  border-bottom: 1px solid var(--calendar-border-color);
+
+  .multi-day-section-scroll {
+    overflow-y: auto;
+    max-height: 6rem;
+  }
+
+  .multi-day-section {
+    position: relative;
+  }
+
+  .multi-day-background {
+    display: flex;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    .columns {
+      display: flex;
+      flex: 1;
+
+      .column {
+        flex: 1;
+        border-inline-start: 1px solid var(--calendar-border-color);
+
+        &:first-child {
+          border-inline-start: 0;
+        }
+      }
+    }
+  }
+
+  .multi-events {
+    padding: 0 0 0 var(--scale-size);
+
+    .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;
+    }
+  }
+}
+
+/* ── View body ── */
+.view-body {
+  height: 100%;
+  border-bottom: 1px solid var(--calendar-border-color);
+  overflow-y: auto;
+
+  .view-body-scroll {
+    display: flex;
+    position: relative;
+
+    .scale {
+      border-right: 1px solid var(--calendar-scale-color);
+
+      .background {
+        border-inline-start: 1rem;
+      }
+
+      .row {
+        width: 0;
+        position: relative;
+        height: 2rem;
+        border-bottom: 1px dashed var(--calendar-scale-color);
+
+        &.hour {
+          border-bottom: 1px solid var(--calendar-scale-color);
+          width: 50%;
+          margin-inline-start: 50%;
+        }
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        .time {
+          position: absolute;
+          top: -0.5rem;
+          font-size: 0.75rem;
+          color: var(--color-on-surface-variant);
+        }
+      }
+    }
+
+    .drawing-area {
+      flex: 1;
+      position: relative;
+
+      .background {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .row {
+          height: 2rem;
+          border-bottom: 1px dashed var(--calendar-scale-color);
+          display: flex;
+
+          &.hour {
+            border-bottom: 1px solid var(--calendar-scale-color);
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+
+          .column {
+            flex: 1;
+            border-inline-start: 1px solid var(--calendar-border-color);
+
+            &:first-child {
+              border-inline-start: 0;
+            }
+
+            &.today {
+              background: color-mix(in srgb, var(--color-primary) 4%, transparent);
+            }
+          }
+        }
+      }
+
+      .events-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+
+        .column {
+          flex: 1;
+          padding: 0 0.5rem 0 1px;
+
+          .column-content {
+            position: relative;
+            height: 100%;
+          }
+
+          .event {
+            position: absolute;
+          }
+        }
+      }
+    }
+
+    /* ── Current time line ── */
+    .current-time-line {
+      position: absolute;
+      z-index: 100;
+      pointer-events: none;
+      width: calc(100% - var(--scale-size));
+      margin-inline-start: var(--scale-size);
+
+      .time {
+        position: absolute;
+        @include mixin.get-typography(label-small);
+        color: var(--color-on-primary-container);
+        transform: translate(calc(-100% - 2px), -50%);
+        background: var(--color-primary-container);
+        padding: 2px 4px;
+        border-radius: var(--shape-corner-extra-small);
+      }
+
+      .dash-line {
+        position: absolute;
+        left: 0;
+        border-bottom: 1px dashed var(--color-primary);
+      }
+
+      .dot {
+        border-radius: 50%;
+        width: 0.5rem;
+        height: 0.5rem;
+        background: var(--color-primary);
+        display: block;
+        position: absolute;
+        top: -0.25rem;
+      }
+
+      .line {
+        border-bottom: 2px solid var(--color-primary);
+        position: absolute;
+        top: -1px;
+      }
+    }
+  }
+}
+
+/* ── 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);
+  transition: background 150ms ease;
+
+  .event-title {
+    padding: 0.25rem 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--calendar-event-text-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--calendar-event-bg-color--hover);
+
+      .event-title {
+        color: var(--calendar-event-text-color--hover);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,392 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import {
+  addDays,
+  addHours,
+  differenceInDays,
+  startOfDay,
+  endOfDay,
+  calculateDateRange,
+  formatDate,
+  getTimePercent,
+  LONG_EVENT_PADDING,
+} from './utils.js';
+import { BaseEvent } from './base-event.js';
+import { CalendarEvent } from './calendar-event.js';
+import { EventManager } from './event-manager.js';
+import type { ColumnEvent } from './event-manager.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './calendar-column-view.scss';
+
+/**
+ * @label Calendar Column View
+ * @tag wc-calendar-column-view
+ * @rawTag calendar-column-view
+ * @parentRawTag calendar
+ * @summary Internal column view component for the calendar (day/week views).
+ */
+@IndividualComponent
+export class CalendarColumnView extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Array })
+  events: CalendarEvent[] = [];
+
+  @property({ type: String })
+  view: string = 'week';
+
+  @property({ type: Number })
+  days: number = 7;
+
+  @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 singleDayEvents: Record<string, ColumnEvent[][]> = {};
+
+  @state()
+  private multiDayEvents: ColumnEvent[][] = [];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._processEvents();
+  }
+
+  override willUpdate(changedProperties: Map<string, unknown>) {
+    if (
+      changedProperties.has('events') ||
+      changedProperties.has('contextDate') ||
+      changedProperties.has('view') ||
+      changedProperties.has('days')
+    ) {
+      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 = calculateDateRange(this.view, this.contextDate, this.days);
+    this.singleDayEvents = {};
+
+    this._forEachDayInRange(i => {
+      const manager = new EventManager();
+      manager.addEvents(
+        this.events.filter(
+          event =>
+            event.isOverlapping(new BaseEvent(startOfDay(i), endOfDay(i))) &&
+            event.length() < 86400000,
+        ),
+      );
+      manager.process();
+      this.singleDayEvents[this._getDateOnly(i)] = manager.columns;
+    });
+
+    const multiManager = new EventManager();
+    multiManager.addEvents(
+      this.events.filter(
+        event =>
+          event.isOverlapping(
+            new BaseEvent(this.dateRange.startDate, this.dateRange.endDate),
+          ) && event.length() >= 86400000,
+      ),
+    );
+    multiManager.process();
+    this.multiDayEvents = multiManager.columns;
+  }
+
+  private _forEachDayInRange(callback: (d: Date) => void) {
+    for (
+      let i = new Date(this.dateRange.startDate);
+      differenceInDays(startOfDay(this.dateRange.endDate), i) >= 0;
+      i = addDays(i, 1)
+    ) {
+      callback(i);
+    }
+  }
+
+  private _getDateOnly(date: Date): string {
+    return formatDate(date, 'dd-MM-yyyy');
+  }
+
+  private _getDatePercent(date: Date): number {
+    const currentDay = differenceInDays(
+      startOfDay(date),
+      this.dateRange.startDate,
+    );
+    const percent = (currentDay / this.dateRange.totalDays) * 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 _emitDateClick(date: Date) {
+    this.dispatchEvent(
+      new CustomEvent('column-view-date-click', {
+        detail: { date },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _emitEventClick(event: any) {
+    this.dispatchEvent(
+      new CustomEvent('column-view-event-click', {
+        detail: { event },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _renderHeader() {
+    const columns: any[] = [];
+    this._forEachDayInRange(i => {
+      columns.push(html`
+        <div class=${this._getDayClass(i)}>
+          <div class="column-content">
+            <div
+              class="date"
+              @click=${() => this._emitDateClick(i)}
+            >
+              ${formatDate(i, 'dd')}
+            </div>
+            <div class="day">${formatDate(i, 'E')}</div>
+          </div>
+        </div>
+      `);
+    });
+    return columns;
+  }
+
+  private _renderMultiDayBackground() {
+    const columns: any[] = [];
+    this._forEachDayInRange(i => {
+      columns.push(html`<div class=${this._getDayClass(i)}></div>`);
+    });
+    return columns;
+  }
+
+  private _renderScale() {
+    const rows: any[] = [];
+    for (let i = 0; i < 48; i++) {
+      const cls = i % 2 ? 'row hour' : 'row';
+      const sd = startOfDay(new Date());
+      rows.push(html`
+        <div class=${cls}>
+          ${i % 2 === 0 && i
+            ? html`<div class="time">${formatDate(addHours(sd, i / 2), 'hh a')}</div>`
+            : nothing}
+        </div>
+      `);
+    }
+    return html`<div class="background">${rows}</div>`;
+  }
+
+  private _renderBackgroundGrid() {
+    const rows: any[] = [];
+    for (let i = 0; i < 48; i++) {
+      const cls = i % 2 ? 'row hour' : 'row';
+      const columns: any[] = [];
+      this._forEachDayInRange(d => {
+        columns.push(html`<div class=${this._getDayClass(d)}></div>`);
+      });
+      rows.push(html`<div class=${cls}>${columns}</div>`);
+    }
+    return html`<div class="background">${rows}</div>`;
+  }
+
+  private _renderEvents() {
+    const columns: any[] = [];
+    this._forEachDayInRange(i => {
+      const cls = this._getDayClass(i);
+      const eventDay = this.singleDayEvents[this._getDateOnly(i)];
+      columns.push(html`
+        <div class=${cls}>
+          <div class="column-content">
+            ${eventDay
+              ? eventDay.map((nodes, columnIndex) =>
+                  nodes.map(node => {
+                    const evtCls = this.eventClickable
+                      ? 'event clickable'
+                      : 'event';
+                    const evtStyles: Record<string, string> = {
+                      top: `${getTimePercent(node.start, startOfDay(i))}%`,
+                      height: `${getTimePercent(node.end, startOfDay(i)) - getTimePercent(node.start, startOfDay(i))}%`,
+                      left: `${(columnIndex / eventDay.length) * 100}%`,
+                      width: `calc(${((1 * node.width) / eventDay.length) * 100}% - 1px)`,
+                    };
+                    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>
+                    `;
+                  }),
+                )
+              : nothing}
+          </div>
+        </div>
+      `);
+    });
+    return html`<div class="events-container">${columns}</div>`;
+  }
+
+  private _renderMultiDayEvents() {
+    if (!this.multiDayEvents || !this.multiDayEvents.length) return nothing;
+    return html`
+      <div class="row-content">
+        ${this.multiDayEvents.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) + LONG_EVENT_PADDING}%`,
+                  width: `${this._getDatePercent(addDays(node.end, 1)) - this._getDatePercent(node.start) - 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>
+    `;
+  }
+
+  private _renderCurrentTime() {
+    if (
+      this.currentTime.valueOf() < this.dateRange.startDate?.valueOf() - 1 ||
+      this.currentTime.valueOf() > this.dateRange.endDate?.valueOf() + 1
+    ) {
+      return nothing;
+    }
+    return html`
+      <div
+        class="current-time-line"
+        style="top: calc(${getTimePercent(this.currentTime)}% - 1px)"
+      >
+        <div class="time">${formatDate(this.currentTime, 'hh:mm a')}</div>
+        <div
+          class="dash-line"
+          style="width: ${this._getDatePercent(this.currentTime)}%"
+        ></div>
+        <div
+          class="dot"
+          style="left: calc(${this._getDatePercent(this.currentTime)}% - 0.25rem)"
+        ></div>
+        <div
+          class="line"
+          style="left: ${this._getDatePercent(this.currentTime)}%; width: ${(1 / this.dateRange.totalDays) * 100}%"
+        ></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-column-view">
+        <div class="view-header">
+          <div class="scale"></div>
+          <div class="columns">${this._renderHeader()}</div>
+          <div class="scrollbar-placeholder"></div>
+        </div>
+        <div class="multi-day-section-wrapper">
+          <div class="multi-day-section-scroll">
+            <div class="multi-day-section">
+              <div class="multi-day-background">
+                <div class="scale"></div>
+                <div class="columns">
+                  ${this._renderMultiDayBackground()}
+                </div>
+              </div>
+              <div class="multi-events">
+                ${this._renderMultiDayEvents()}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="view-body">
+          <div class="view-body-scroll">
+            <div class="scale">${this._renderScale()}</div>
+            <div class="drawing-area">
+              ${this._renderBackgroundGrid()} ${this._renderEvents()}
+            </div>
+            ${this._renderCurrentTime()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}