Skip to content

feat(Calendar): add month and year selection (upstream nuxt/ui#6582) #194

Description

@IgorShevchik

Context

Upstream nuxt/ui shipped ca3c72ebfeat(Calendar): add month and year selection (nuxt/ui#6582) — the largest single component change in the current sync stream:

  • src/runtime/components/Calendar.vue +296 lines
  • src/theme/calendar.ts +102 lines
  • docs/content/docs/2.components/calendar.md +226 lines, playgrounds/nuxt/app/pages/components/calendar.vue, a new CalendarTodayExample.vue
  • ~4,800-line snapshot regen per project

It adds a type prop (date | month | year), a drill-up/down view state machine (day → month → year), a viewControl heading button that cycles views, month/year picker grids via reka-ui's namespaced MonthPicker / YearPicker (+ range variants), new emits (update:placeholder, update:startValue, update:validModelValue), and new slots (month-cell, year-cell, and an extended heading signature).

Decision in the sync stream — SKIPPED (no-op)

Recorded as a skip in the ledger (cursor advanced, no source change) per maintainer decision. Rationale:

  • The component logic ports mechanically, but the theme does not: upstream's calendar.ts is built on options.theme.colors loops + nuxt/ui semantic tokens (bg-${color}, text-inverted, ring-accented, text-muted, data-selected, …). b24ui's calendar.ts is air-design-token based and has no theme.colors, so the new view variant + daySizes/pickerSizes compounds + month/year cellTrigger styling + headingLabel slot need a deliberate air-design pass (how month/year cells and the viewControl button look in b24ui), not a 1:1 translation.
  • The size + design-decision content warranted handling it as its own task rather than a rushed mega-PR.

reka-ui 2.9.10 (current in b24ui) does expose MonthPicker / YearPicker / MonthRangePicker / YearRangePicker namespaced, so there's no upstream-dependency blocker.

Scope of this issue (port the feature, adapted to air design)

  • Calendar.vue: port the view-state machine and template (Picker.*, month/year grids, viewControl heading button, cellProps, new emits/slots), adapted to b24ui (B24Button color="air-tertiary", b24ui prop, IconComponent icons via dictionary/icons, btnSize).
  • theme/calendar.ts: design + apply the view variant (day/month/year), the size→view-size compounds (daySizes/pickerSizes equivalents), headingLabel slot, and month/year cellTrigger styling in air tokens consistent with the existing day cells (b24ui has no theme.colors, so adapt the per-color compounds to b24ui's single air color model).
  • docs calendar.md + CalendarTodayExample.vue, playground calendar.vue (B24-namespaced, air examples).
  • Regenerate Calendar snapshots (nuxt + vue).

References

No behaviour change has been made by the sync stream; this is deferred to a focused, design-aware implementation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions