@operato/event-view 10.10.2 → 10.15.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/event-view",
   "description": "Webcomponent event-view following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.10.2",
+  "version": "10.15.0",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -46,7 +46,8 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/styles": "^10.9.0",
+    "@operato/styles": "^10.15.0",
+    "@operato/utils": "^10.15.0",
     "dayjs": "^1.11.2",
     "lit": "^3.1.2"
   },
@@ -83,5 +84,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "d2c8c94cda6f6480e8be4e7d5994554ea5920c54"
+  "gitHead": "62ac2a23866e7ea579786c4433ef356888dfded8"
 }

package/test/calendar-layout.test.ts

@@ -106,3 +106,133 @@ describe('the built-in view switch tells the host', () => {
     expect((await heard).detail.mode).to.equal('monthly')
   })
 })
+
+/**
+ * The calendar drew "Sun Mon Tue" over "September 2026" on a screen whose every other word was
+ * Korean: the weekday row was a literal English array and dayjs had no locale loaded.
+ *
+ * These read the rendered text rather than the helpers, because a helper that returns Korean
+ * proves nothing if the template still holds the old array.
+ */
+describe('the calendar speaks the language the document declares', () => {
+  const original = document.documentElement.lang
+
+  afterEach(() => {
+    document.documentElement.lang = original
+  })
+
+  async function headerOf(lang: string, mode: 'monthly' | 'weekly') {
+    document.documentElement.lang = lang
+    const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+    const inner = await settle(el)
+    return inner.renderRoot as ShadowRoot
+  }
+
+  for (const mode of ['monthly', 'weekly'] as const) {
+    it(`${mode}: the weekday row is in Korean when the document says ko`, async () => {
+      const root = await headerOf('ko', mode)
+      const names = Array.from(root.querySelectorAll('li[day-of-week], [date-label]')).map(el =>
+        el.textContent!.trim()
+      )
+      const row = names.join(' ')
+
+      expect(row, `weekday row came out "${row}"`).to.not.match(/Sun|Mon|Tue|Wed|Thu|Fri|Sat/)
+      expect(row, `weekday row came out "${row}"`).to.match(/[일월화수목금토]/)
+    })
+
+    it(`${mode}: the step buttons carry a name, not a "<" glyph`, async () => {
+      const root = await headerOf('ko', mode)
+      const buttons = Array.from(root.querySelectorAll('md-icon-button'))
+
+      expect(buttons.length, 'previous and next should both be icon buttons').to.equal(2)
+      for (const button of buttons) {
+        const name = button.getAttribute('aria-label') ?? ''
+        expect(name, 'an icon button with no accessible name is read as its glyph').to.not.equal('')
+        expect(name).to.not.match(/^[<>]$/)
+      }
+    })
+  }
+
+  it('monthly: the month title follows the language', async () => {
+    const root = await headerOf('ko', 'monthly')
+    const title = root.querySelector('[this-month]')!.textContent!.trim()
+
+    expect(title, `title came out "${title}"`).to.not.match(/January|February|March|September|December/)
+    expect(title, `title came out "${title}"`).to.include('월')
+  })
+
+  it('monthly: today is named in the language, not the word "Today"', async () => {
+    const root = await headerOf('ko', 'monthly')
+    const labels = Array.from(root.querySelectorAll('md-text-button')).map(el => el.textContent!.trim())
+
+    expect(labels.join(' '), `buttons came out "${labels.join(' ')}"`).to.not.include('Today')
+    expect(labels.some(l => l.includes('오늘')), `buttons came out "${labels.join(' ')}"`).to.be.true
+  })
+})
+
+/**
+ * The day numbers were formatted once, when the grid was built, and the grid is rebuilt on a
+ * month change - not on a language change. So switching language left "Sep 6 (일)": the
+ * weekday came from the template and followed, the date came from the stored string and did
+ * not. Found on the running plant, with the weekday already in Korean beside it.
+ */
+describe('the dates follow a language change, not just the weekday', () => {
+  const original = document.documentElement.lang
+
+  afterEach(() => {
+    document.documentElement.lang = original
+  })
+
+  for (const mode of ['monthly', 'weekly'] as const) {
+    it(`${mode}: switching to ko rewrites the day labels, not only the weekday row`, async () => {
+      document.documentElement.lang = 'en'
+      const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+      const inner = await settle(el)
+
+      document.documentElement.lang = 'ko'
+      inner.requestUpdate()
+      await inner.updateComplete
+
+      const labels = Array.from((inner.renderRoot as ShadowRoot).querySelectorAll('[date-label]'))
+        .map(el => el.textContent!.trim())
+        .join(' ')
+
+      expect(labels, `day labels came out "${labels}"`).to.not.match(
+        /Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec/
+      )
+      expect(labels, `day labels came out "${labels}"`).to.include('월')
+    })
+  }
+})
+
+/**
+ * The view switch was a bare md-icon: 24px, no padding, no hit area and no accessible name,
+ * sitting flush against a 40px button. On screen it read as four vertical bars.
+ */
+describe('the view switch is a named button', () => {
+  for (const [mode, other] of [
+    ['monthly', 'week'],
+    ['weekly', 'month']
+  ] as const) {
+    it(`${mode}: the switch is an icon button that says where it goes`, async () => {
+      const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+      await settle(el)
+
+      const button = (el.renderRoot as ShadowRoot).querySelector('md-icon-button')
+      expect(button, 'the switch should be a button, not a bare icon').to.exist
+
+      const name = button!.getAttribute('aria-label') ?? ''
+      expect(name, 'an icon with no name is read as its glyph').to.include(other)
+    })
+  }
+
+  it('a host can pass its own words', async () => {
+    const el = (await fixture(
+      html`<ox-event-view mode="monthly" weekly-label="주간 보기"></ox-event-view>`
+    )) as OxEventView
+    await settle(el)
+
+    const button = (el.renderRoot as ShadowRoot).querySelector('md-icon-button')
+    expect(button!.getAttribute('aria-label')).to.equal('주간 보기')
+  })
+})

package/test/day-overflow.test.ts

@@ -0,0 +1,103 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+import { BizEvent, CALENDAR, EventProvider } from '../src/types.js'
+import { DayOverflow } from '../src/day-overflow.js'
+
+/**
+ * A cell takes a ceiling so one busy day does not set the height of every day beside it, and
+ * says what the ceiling cut so the host can fold harder.
+ *
+ * The ceiling on its own would be the defect it replaces - the old "+763 more" hid rows the same
+ * way. What makes it different is that somebody is told.
+ */
+
+const ROW_HEIGHT = 20
+
+function providerWith(rowsOnFirstDay: number): EventProvider {
+  return {
+    async fetchEventsForCalendar(calendar: CALENDAR) {
+      const events: BizEvent[] = Array.from({ length: rowsOnFirstDay }, (unused, index) => ({
+        title: `row ${index}`,
+        color: 'rgb(0, 0, 0)',
+        template: html`<div style="height: ${ROW_HEIGHT}px">row ${index}</div>`
+      }))
+
+      return new Map([[calendar[0].date, events]])
+    }
+  }
+}
+
+async function calendarWith(rows: number, cap?: string) {
+  const el = (await fixture(html`
+    <ox-event-view mode="monthly" style=${cap ? `--calendar-monthly-date-max-height:${cap}` : ''}></ox-event-view>
+  `)) as OxEventView
+
+  const seen: DayOverflow[][] = []
+  el.addEventListener('day-overflow', event => seen.push((event as CustomEvent<DayOverflow[]>).detail))
+
+  el.eventProvider = providerWith(rows)
+  await el.updateComplete
+  await new Promise(resolve => setTimeout(resolve, 80))
+
+  const root = el.renderRoot.querySelector('calendar-monthly')!.shadowRoot!
+  return { root, seen }
+}
+
+describe('a day cell that cannot hold everything says so', () => {
+  it('stays uncapped, and silent, when no theme sets a ceiling', async () => {
+    /*
+     * The default has to be none. A ceiling is only safe once the host folds its rows, so a
+     * component that capped by default would start hiding rows in every app that upgraded.
+     */
+    const { root, seen } = await calendarWith(40)
+    const cell = root.querySelector('li[date]') as HTMLElement
+
+    expect(getComputedStyle(cell).maxHeight).to.equal('none')
+    expect(cell.getBoundingClientRect().height, 'the cell grew to hold all forty').to.be.greaterThan(40 * ROW_HEIGHT)
+    expect(seen, 'nothing was cut, so nothing is reported').to.deep.equal([])
+  })
+
+  it('reports the rows a ceiling cut, and which day lost them', async () => {
+    const { root, seen } = await calendarWith(40, '160px')
+    const cell = root.querySelector('li[date]') as HTMLElement
+
+    expect(cell.getBoundingClientRect().height, 'held to the ceiling').to.be.at.most(161)
+
+    const last = seen[seen.length - 1]
+    expect(last, 'the host was told').to.not.be.undefined
+    expect(last.length).to.equal(1)
+    expect(last[0].hidden, 'roughly the rows past 160px, not all forty').to.be.greaterThan(20)
+    expect(last[0].date, 'named by day, so the host knows where to fold').to.be.instanceOf(Date)
+  })
+
+  it('keeps every other cell off the busy day\'s height', async () => {
+    /*
+     * The measured failure: a grid row is as tall as its tallest cell, so 767 events on the 8th
+     * made all seven of the week view's cells 670px, the two empty ones included.
+     */
+    const { root } = await calendarWith(40, '160px')
+    const cells = Array.from(root.querySelectorAll('li[date]')) as HTMLElement[]
+    const heights = cells.map(cell => Math.round(cell.getBoundingClientRect().height))
+
+    expect(Math.max(...heights)).to.be.at.most(161)
+  })
+
+  it('does not repeat itself when nothing changed', async () => {
+    /*
+     * This measurement runs after every render, and a host that re-renders in response would
+     * otherwise be told the same thing forever.
+     */
+    const { seen } = await calendarWith(40, '160px')
+    const signatures = seen.map(one => one.map(day => `${day.date?.getTime()}:${day.hidden}`).join(','))
+
+    expect(new Set(signatures).size, 'one distinct report, however many renders').to.equal(signatures.length)
+  })
+
+  it('says nothing for a day that fits under the ceiling', async () => {
+    const { seen } = await calendarWith(2, '160px')
+
+    expect(seen.flat()).to.deep.equal([])
+  })
+})

package/test/day-state.test.ts

@@ -0,0 +1,139 @@
+import { html, fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-event-view.js'
+import { OxEventView } from '../src/ox-event-view.js'
+import { CALENDAR, DayState, EventProvider } from '../src/types.js'
+
+/**
+ * A host can say something about a day itself, not only about what happened in it.
+ *
+ * Before this there was no such channel: CALENDAR carried only what the component works out
+ * (which month a date is in, whether it is today), so a screen wanting to mark a holiday had to
+ * send an event, and it drew as one more 6px dot among the day's actual work. That was the
+ * component's shape, not the screen's choice.
+ */
+
+function providerMarking(pick: (calendar: CALENDAR) => Date[], state: DayState): EventProvider {
+  return {
+    async fetchEventsForCalendar() {
+      return new Map()
+    },
+    async fetchDayStatesForCalendar(calendar: CALENDAR) {
+      /*
+       * Key by the very Date objects the component handed over. The component looks the day up
+       * by identity, the way it already does for events - a fresh Date with the same instant
+       * would not match, and a host that built its own would silently mark nothing.
+       */
+      return new Map(pick(calendar).map(date => [date, state]))
+    }
+  }
+}
+
+const HOLIDAY: DayState = { name: 'non-working', color: 'rgb(1, 2, 3)' }
+
+/*
+ * A bare test page carries no theme, and every surface in this component is a var() onto one.
+ * Without these the month cells compute to transparent and "the state did not paint" looks the
+ * same as "nothing paints here at all" — which is precisely the confusion these tests exist to
+ * rule out. Only the tokens the cell surfaces read.
+ */
+const THEME: Record<string, string> = {
+  '--md-sys-color-surface-container-lowest': 'rgb(255, 255, 255)',
+  '--md-sys-color-surface-variant': 'rgb(232, 235, 238)',
+  '--md-sys-color-surface': 'rgb(240, 242, 244)',
+  '--md-sys-color-tertiary-container': 'rgb(200, 220, 255)',
+  '--md-sys-color-primary': 'rgb(38, 46, 56)'
+}
+
+before(() => Object.entries(THEME).forEach(([name, value]) => document.documentElement.style.setProperty(name, value)))
+after(() => Object.keys(THEME).forEach(name => document.documentElement.style.removeProperty(name)))
+
+async function calendarWith(provider: EventProvider | undefined, mode: 'monthly' | 'weekly') {
+  const el = (await fixture(html`<ox-event-view mode=${mode}></ox-event-view>`)) as OxEventView
+  if (provider) el.eventProvider = provider
+  await el.updateComplete
+  /* The grid is filled in updated(), after the provider has answered. */
+  await new Promise(resolve => setTimeout(resolve, 50))
+
+  const view = el.renderRoot.querySelector(mode === 'monthly' ? 'calendar-monthly' : 'calendar-weekly')!
+  return view.shadowRoot!
+}
+
+describe('a host can mark the day itself', () => {
+  it('paints the marked day and leaves the rest alone', async () => {
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+
+    const marked = root.querySelectorAll('li[day-state]')
+    expect(marked.length, 'exactly the day the host named').to.equal(1)
+    expect(getComputedStyle(marked[0] as HTMLElement).backgroundColor).to.equal('rgb(1, 2, 3)')
+    expect(marked[0].getAttribute('day-state'), 'the host word reaches the dom').to.equal('non-working')
+  })
+
+  it('leaves every cell unmarked when the host does not answer', async () => {
+    /* The old EventProvider shape, which must keep working - the method is optional. */
+    const root = await calendarWith({ async fetchEventsForCalendar() { return new Map() } }, 'monthly')
+
+    expect(root.querySelectorAll('li[day-state]').length).to.equal(0)
+  })
+
+  it('does not blank a cell when there is no state to draw', async () => {
+    /*
+     * The failure this guards. `background-color: var(--day-state-color)` with the property
+     * unset is invalid at computed-value time, which resolves to transparent - so an attribute
+     * written without a colour would erase the month surface underneath instead of adding to
+     * it. Unmarked days must keep the surface the month view gave them.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+
+    const plain = root.querySelector('li[current-month]:not([day-state])') as HTMLElement
+    expect(getComputedStyle(plain).backgroundColor, 'the month surface, untouched').to.equal('rgb(255, 255, 255)')
+  })
+
+  it('marks both cells of a day in the week view', async () => {
+    /*
+     * A day is two cells stacked there - the date band and the events under it. Marking only
+     * the band would tint a 37px strip and leave the 600px body untouched.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[3].date], HOLIDAY), 'weekly')
+
+    const marked = Array.from(root.querySelectorAll('li[day-state]')) as HTMLElement[]
+    expect(marked.length).to.equal(2)
+    expect(marked.some(li => li.hasAttribute('day-of-week')), 'the date band').to.be.true
+    expect(marked.some(li => !li.hasAttribute('day-of-week')), 'the events under it').to.be.true
+    marked.forEach(li => expect(getComputedStyle(li).backgroundColor).to.equal('rgb(1, 2, 3)'))
+  })
+
+  it('lets a selection win over the day state', async () => {
+    /*
+     * Both rules are (0,1,1), so the order they are written in is what decides. A day you have
+     * selected should look selected even if it is a holiday; a holiday you have not touched
+     * should look like a holiday. Get the order wrong and dragging across a holiday leaves a
+     * hole in the selection.
+     */
+    const root = await calendarWith(providerMarking(calendar => [calendar[10].date], HOLIDAY), 'monthly')
+    const cell = root.querySelector('li[day-state]') as HTMLElement
+
+    cell.setAttribute('selected', '')
+
+    expect(getComputedStyle(cell).backgroundColor).to.not.equal('rgb(1, 2, 3)')
+  })
+
+  it('keeps today readable on a marked day', async () => {
+    /*
+     * Today rides on a background-image and an outline, precisely so it survives whatever claims
+     * the background colour. A holiday that is also today has to show both.
+     */
+    const root = await calendarWith(
+      providerMarking(calendar => calendar.filter(one => one.today).map(one => one.date), HOLIDAY),
+      'monthly'
+    )
+    const today = root.querySelector('li[today]') as HTMLElement
+    const style = getComputedStyle(today)
+
+    expect(today.hasAttribute('day-state'), 'today was the day marked').to.be.true
+    expect(style.backgroundColor, 'the holiday surface').to.equal('rgb(1, 2, 3)')
+    expect(style.backgroundImage, 'today, still drawn on top').to.not.equal('none')
+    expect(style.outlineStyle, 'and the ring, which is an outline so it can sit inset').to.equal('solid')
+    expect(parseFloat(style.outlineWidth)).to.be.greaterThan(0)
+  })
+})