@operato/event-view 8.0.0-alpha.4 → 8.0.0-beta.0

package/src/calendar-weekly.ts

@@ -18,6 +18,9 @@ export class CalendarWeekly extends LitElement {
   @state() week: number = dayjs().week()
   @state() calendar?: CALENDAR
   @state() eventMap?: Map<Date, BizEvent[]>
+  @state() selections?: [Date, Date]
+
+  @state() pointerDownDate?: Date | null
 
   render() {
     return html`
@@ -54,14 +57,28 @@ export class CalendarWeekly extends LitElement {
         <slot></slot>
       </div>
 
-      <ol>
+      <ol
+        @pointerdown=${this.handlePointerDown}
+        @pointermove=${this.handlePointerMove}
+        @pointerup=${this.handlePointerUp}
+      >
         ${this.calendar?.map((date, index) => {
+          const [from, to] = this.selections || ([] as any)
+          const { date: thisDate } = date
+          const selected = from && to && thisDate >= from && thisDate <= to
+
           return html`
-            <li ?today=${date.today} day-of-week><span date-label>${date.label}(${WEEKDAYS[index]})</span></li>
+            <li ?today=${date.today} day-of-week date .date=${thisDate} ?selected=${selected}>
+              <span date-label>${date.label}(${WEEKDAYS[index]})</span>
+            </li>
           `
         })}
         ${this.calendar?.map(date => {
-          return html`<li date>
+          const [from, to] = this.selections || ([] as any)
+          const { date: thisDate } = date
+          const selected = from && to && thisDate >= from && thisDate <= to
+
+          return html`<li date .date=${thisDate} ?selected=${selected}>
             <div>
               ${(this.eventMap?.get(date?.date) || []).map(({ title, color, template }) =>
                 template ? template : html`<span event .style="border-color: ${color};">${title}</span>`
@@ -74,7 +91,7 @@ export class CalendarWeekly extends LitElement {
   }
 
   async updated(changes: PropertyValues<this>) {
-    if (changes.has('year') || changes.has('month') || changes.has('week')) {
+    if (changes.has('year') || changes.has('month') || changes.has('week') || changes.has('eventProvider')) {
       const calendar = this.createDaysForCurrentWeek(this.year, this.week)
 
       this.eventMap = await this.eventProvider?.fetchEventsForCalendar(calendar)
@@ -88,6 +105,93 @@ export class CalendarWeekly extends LitElement {
     this.week = week
   }
 
+  handlePointerDown(event: PointerEvent) {
+    const target = event.target as HTMLElement
+
+    if (!target.hasAttribute('date') && !target.hasAttribute('date-label')) {
+      return
+    }
+
+    const dateElement = target.closest('[date]') as HTMLElement
+    const from = (dateElement as any).date
+
+    this.pointerDownDate = from
+
+    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)
+    target.releasePointerCapture(event.pointerId)
+
+    event.preventDefault()
+  }
+
+  handlePointerMove(event: PointerEvent) {
+    const from = this.pointerDownDate
+
+    if (!from) {
+      return
+    }
+
+    const target = event.target as HTMLElement
+    const dateElement = target.closest('[date]') as HTMLElement
+
+    if (!dateElement) {
+      return
+    }
+
+    const date = (dateElement as any).date
+    this.selections = from > date ? [date, from] : [from, date]
+
+    // 캡처를 설정하지 않음(Touch 디바이스에서 중요)
+    target.releasePointerCapture(event.pointerId)
+
+    event.preventDefault()
+  }
+
+  handlePointerUp(event: PointerEvent) {
+    const from = this.pointerDownDate
+
+    this.pointerDownDate = null
+
+    if (!from) {
+      return
+    }
+
+    const target = event.target as HTMLElement
+    const dateElement = target.closest('[date]') as HTMLElement
+
+    if (!dateElement) {
+      return
+    }
+
+    const date = (dateElement as any).date
+    this.selections = from > date ? [date, from] : [from, date]
+
+    this.dispatchEvent(
+      new CustomEvent('select-date', {
+        detail: this.selections,
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    event.preventDefault()
+  }
+
+  selectDate(date: { label: string; date: Date; thisMonth?: boolean; thisWeek?: boolean; today?: boolean }) {
+    if (date) {
+      this.selections = [date.date, date.date]
+    } else {
+      this.selections = undefined
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('select-date', {
+        detail: date,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   getLastDateOfWeek(year: number, week: number): Dayjs {
     const firstWeekLastDay = dayjs(new Date(year, 0, 1)).endOf('w')
     week -= 1 // one-based week, so need the minus-one

package/src/ox-event-view.ts

@@ -19,7 +19,8 @@ export class OxEventView extends LitElement {
       color: var(--md-sys-color-on-background);
     }
 
-    calendar-weekly {
+    calendar-weekly,
+    calendar-monthly {
       flex: 1;
 
       padding: 0;

package/src/types.ts

@@ -23,7 +23,7 @@ export type CALENDAR = {
 }[]
 
 export interface EventProvider {
-  fetchEventsForCalendar(calendar: CALENDAR): Map<Date, BizEvent[]>
+  fetchEventsForCalendar(calendar: CALENDAR): Promise<Map<Date, BizEvent[]>>
 }
 
 export const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

package/stories/index.stories.ts

@@ -3,7 +3,7 @@ import { html, TemplateResult } from 'lit'
 import { BizEvent, CALENDAR, EventProvider } from '../src/types.js'
 
 class SampleEventProvider implements EventProvider {
-  fetchEventsForCalendar(calendar: CALENDAR) {
+  async fetchEventsForCalendar(calendar: CALENDAR) {
     const map = new Map<Date, BizEvent[]>()
 
     calendar.forEach(({ date }) =>
@@ -75,7 +75,7 @@ interface Story<T> {
 }
 
 interface ArgTypes {
-  mode?: string
+  mode?: 'monthly' | 'weekly'
 }
 
 const Template: Story<ArgTypes> = ({ mode = 'monthly' }: ArgTypes) => html`
@@ -102,7 +102,14 @@ const Template: Story<ArgTypes> = ({ mode = 'monthly' }: ArgTypes) => html`
     rel="stylesheet"
   />
 
-  <ox-event-view mode=${mode} .eventProvider=${new SampleEventProvider()}> </ox-event-view>
+  <ox-event-view
+    mode="${mode}"
+    .eventProvider=${new SampleEventProvider()}
+    @select-date=${(e: CustomEvent) => {
+      console.log(e.detail)
+    }}
+  >
+  </ox-event-view>
 `
 
 export const Regular = Template.bind({})

package/themes/calendar-theme.css

@@ -9,7 +9,8 @@ body {
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
   --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-monty-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
   --calendar-monthly-label-color: var(--md-sys-color-secondary);
@@ -18,6 +19,7 @@ body {
   --calendar-monthly-date-label-margin: var(--margin-narrow);
   --calendar-monthly-date-label-padding: 0px 6px;
   --calendar-monthly-date-label-color: var(--md-sys-color-on-primary);
+  --calendar-monthly-date-min-height: 120px;
 
   --calendar-monthly-background-color: #f4f4f4;
   --calendar-monthly-event-border-radius: var(--border-radius);
@@ -35,6 +37,7 @@ body {
   --calendar-weekly-ol-margin: var(--margin-default) 0;
   --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
   --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
+  --calendar-current-week-color: var(--md-sys-color-on-surface);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
   --calendar-weekly-label-color: var(--md-sys-color-secondary);