origam 2.3.0 → 2.6.1

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -0,0 +1,1302 @@
+<template>
+  <div
+    class="origam-calendar"
+    :class="rootClasses"
+    :style="rootStyles"
+    role="application"
+    :aria-label="ariaLabel"
+    data-cy="origam-calendar"
+    @keydown="onKeydown"
+  >
+    <slot
+      name="header"
+      :view="resolvedView"
+      :title="headerTitle"
+      :can-prev="canPrev"
+      :can-next="canNext"
+      :set-view="onSetView"
+      :navigate="onNavigate"
+    >
+      <div
+        class="origam-calendar__toolbar"
+        role="toolbar"
+        :aria-label="ariaToolbarLabel"
+        data-cy="origam-calendar-toolbar"
+      >
+        <origam-btn-group
+          class="origam-calendar__toolbar-nav"
+          density="compact"
+        >
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="prevGlyph"
+            :aria-label="ariaPrevLabel"
+            :disabled="!canPrev"
+            data-cy="origam-calendar-prev"
+            @click="onNavigate('prev')"
+          />
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="todayLabel"
+            :aria-label="ariaTodayLabel"
+            data-cy="origam-calendar-today"
+            @click="onNavigate('today')"
+          />
+          <origam-btn
+            variant="text"
+            size="small"
+            :text="nextGlyph"
+            :aria-label="ariaNextLabel"
+            :disabled="!canNext"
+            data-cy="origam-calendar-next"
+            @click="onNavigate('next')"
+          />
+        </origam-btn-group>
+
+        <div
+          class="origam-calendar__toolbar-title"
+          data-cy="origam-calendar-title"
+        >
+          {{ headerTitle }}
+        </div>
+
+        <origam-btn-group
+          class="origam-calendar__toolbar-views"
+          density="compact"
+          :aria-label="ariaViewListLabel"
+        >
+          <origam-btn
+            v-for="viewOption in VIEW_OPTIONS"
+            :key="viewOption"
+            size="small"
+            :text="viewLabel(viewOption)"
+            :variant="viewBtnVariant(viewOption)"
+            :bg-color="viewBtnBgColor(viewOption)"
+            :active="isViewActive(viewOption)"
+            class="origam-calendar__view-btn"
+            :aria-pressed="isViewActive(viewOption)"
+            :data-cy="`origam-calendar-view-${viewOption}`"
+            @click="onSetView(viewOption)"
+          />
+        </origam-btn-group>
+      </div>
+    </slot>
+
+    <div
+      v-if="resolvedView === VIEW.MONTH"
+      class="origam-calendar__body origam-calendar__body--month"
+      data-cy="origam-calendar-body-month"
+    >
+      <div
+        class="origam-calendar__weekdays"
+        role="row"
+      >
+        <div
+          v-if="showWeekNumbers"
+          class="origam-calendar__weekday origam-calendar__week-number-head"
+          aria-hidden="true"
+        />
+        <div
+          v-for="weekdayName in weekdayNames"
+          :key="weekdayName"
+          class="origam-calendar__weekday"
+          role="columnheader"
+        >
+          {{ weekdayName }}
+        </div>
+      </div>
+      <div
+        class="origam-calendar__month-grid"
+        role="grid"
+        :aria-label="ariaMonthLabel"
+      >
+        <div
+          v-for="(weekRow, rowIndex) in monthGrid"
+          :key="rowIndex"
+          class="origam-calendar__month-row"
+          role="row"
+        >
+          <div
+            v-if="showWeekNumbers"
+            class="origam-calendar__week-number"
+            role="rowheader"
+            :aria-label="ariaWeekNumberLabel(weekRow[0])"
+          >
+            {{ weekNumberOf(weekRow[0]) }}
+          </div>
+          <div
+            v-for="dayCell in weekRow"
+            :key="dayCell.toISOString()"
+            class="origam-calendar__day-cell"
+            :class="dayCellClasses(dayCell)"
+            role="gridcell"
+            tabindex="0"
+            :aria-label="ariaDayLabel(dayCell)"
+            :aria-selected="isInDragSelection(dayCell)"
+            :aria-disabled="isDayDisabled(dayCell)"
+            :data-cy="`origam-calendar-day-${dayCellKey(dayCell)}`"
+            @click="onDayClick(dayCell, $event)"
+            @mousedown="onCellMouseDown(dayCell, $event)"
+            @mouseenter="onCellMouseEnter(dayCell)"
+          >
+            <slot
+              name="day"
+              :date="dayCell"
+              :events="eventsOnDay(dayCell)"
+              :is-today="isCellToday(dayCell)"
+              :is-past="isCellPast(dayCell)"
+              :is-outside="isOutsideMonth(dayCell)"
+              :is-weekend="isCellWeekend(dayCell)"
+              :is-disabled="isDayDisabled(dayCell)"
+            >
+              <div class="origam-calendar__day-number">{{ dayCell.getDate() }}</div>
+              <div class="origam-calendar__day-events">
+                <button
+                  v-for="event in dayEventsCapped(dayCell)"
+                  :key="`${event.id}-${dayCellKey(dayCell)}`"
+                  type="button"
+                  class="origam-calendar__event"
+                  :style="eventStyle(event)"
+                  :aria-label="ariaEventLabel(event)"
+                  :data-cy="`origam-calendar-event-${event.id}`"
+                  @click.stop="onEventClick(event, $event)"
+                >
+                  <slot
+                    name="event"
+                    :event="event"
+                    :view="resolvedView"
+                    :is-past="isEventPast(event)"
+                    :is-today="isEventToday(event)"
+                  >
+                    <span class="origam-calendar__event-title">{{ event.title }}</span>
+                  </slot>
+                </button>
+                <div
+                  v-if="eventsOnDay(dayCell).length > MONTH_EVENT_LIMIT"
+                  class="origam-calendar__day-more"
+                  :data-cy="`origam-calendar-more-${dayCellKey(dayCell)}`"
+                >
+                  +{{ eventsOnDay(dayCell).length - MONTH_EVENT_LIMIT }}
+                </div>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
+      class="origam-calendar__body"
+      :class="{
+					'origam-calendar__body--week': resolvedView === VIEW.WEEK,
+					'origam-calendar__body--day': resolvedView === VIEW.DAY
+				}"
+      :data-cy="`origam-calendar-body-${resolvedView}`"
+    >
+      <div class="origam-calendar__timeline">
+        <div class="origam-calendar__timeline-hours">
+          <div
+            v-for="(hourLabel, hourIndex) in hourLabels"
+            :key="hourIndex"
+            class="origam-calendar__hour-label"
+            :style="{ height: `${slotPx * 60 / slotDuration}px` }"
+          >
+            {{ hourLabel }}
+          </div>
+        </div>
+        <div class="origam-calendar__timeline-grid">
+          <div
+            v-for="day in timelineDays"
+            :key="day.toISOString()"
+            class="origam-calendar__timeline-day"
+            :class="{
+								'origam-calendar__timeline-day--today': isCellToday(day),
+								'origam-calendar__timeline-day--weekend': isCellWeekend(day) && weekendHighlight
+							}"
+            role="gridcell"
+            :aria-label="ariaDayLabel(day)"
+            :data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
+          >
+            <div
+              v-if="resolvedView === VIEW.WEEK"
+              class="origam-calendar__day-header"
+            >
+              <slot
+                name="dayHeader"
+                :date="day"
+              >
+								<span class="origam-calendar__day-header-weekday">
+									{{ weekdayShort(day) }}
+								</span>
+                <span class="origam-calendar__day-header-number">
+									{{ day.getDate() }}
+								</span>
+              </slot>
+            </div>
+            <div
+              class="origam-calendar__timeline-slots"
+              :style="{ height: `${(dayEndHour - dayStartHour) * 60 / slotDuration * slotPx}px` }"
+              @mousedown="onSlotMouseDown(day, $event)"
+              @mousemove="onSlotMouseMove(day, $event)"
+              @mouseup="onSlotMouseUp(day, $event)"
+              @click="onSlotClick(day, $event)"
+            >
+              <div
+                v-for="(slot, slotIndex) in dayGridFor(day)"
+                :key="slotIndex"
+                class="origam-calendar__timeline-slot"
+                :class="{ 'origam-calendar__timeline-slot--hour': slot.isHourMark }"
+                :style="{ height: `${slotPx}px` }"
+                :data-slot-index="slotIndex"
+              />
+              <button
+                v-for="event in eventsOnTimeline(day)"
+                :key="`${event.id}-${day.toISOString()}`"
+                type="button"
+                class="origam-calendar__event origam-calendar__event--timeline"
+                :style="timelineEventStyle(event, day)"
+                :aria-label="ariaEventLabel(event)"
+                :data-cy="`origam-calendar-event-${event.id}`"
+                @click="onEventClick(event, $event)"
+                @mousedown.stop
+              >
+                <slot
+                  name="event"
+                  :event="event"
+                  :view="resolvedView"
+                  :is-past="isEventPast(event)"
+                  :is-today="isEventToday(event)"
+                >
+                  <span class="origam-calendar__event-title">{{ event.title }}</span>
+                  <span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
+                </slot>
+              </button>
+              <div
+                v-if="dragSelection && isSameDayLocal(dragSelection.day, day)"
+                class="origam-calendar__range-overlay"
+                :style="dragOverlayStyle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else
+      class="origam-calendar__body origam-calendar__body--agenda"
+      data-cy="origam-calendar-body-agenda"
+    >
+      <template v-if="agendaEntries.length > 0">
+        <div
+          v-for="entry in agendaEntries"
+          :key="entry.date.toISOString()"
+          class="origam-calendar__agenda-day"
+        >
+          <div class="origam-calendar__agenda-day-header">
+            {{ agendaDayHeader(entry.date) }}
+          </div>
+          <button
+            v-for="event in entry.events"
+            :key="event.id"
+            type="button"
+            class="origam-calendar__agenda-event"
+            :style="eventStyle(event)"
+            :aria-label="ariaEventLabel(event)"
+            :data-cy="`origam-calendar-event-${event.id}`"
+            @click="onEventClick(event, $event)"
+          >
+            <slot
+              name="event"
+              :event="event"
+              :view="resolvedView"
+              :is-past="isEventPast(event)"
+              :is-today="isEventToday(event)"
+            >
+              <span class="origam-calendar__event-time">{{ eventTimeLabel(event) }}</span>
+              <span class="origam-calendar__event-title">{{ event.title }}</span>
+            </slot>
+          </button>
+        </div>
+      </template>
+      <div
+        v-else
+        class="origam-calendar__agenda-empty"
+        data-cy="origam-calendar-agenda-empty"
+      >
+        <slot
+          name="empty"
+          :view="resolvedView"
+        >
+          {{ emptyLabel }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  watch
+} from "vue";
+import { OrigamBtn, OrigamBtnGroup } from "../../components";
+import {
+  useCalendar,
+  useDensity,
+  useDimension,
+  useLocale,
+  useStateEffect
+} from "../../composables";
+import {
+  getForeground,
+  isCssColor,
+  isIntent,
+  parseColor,
+  tokenForegroundForIntent,
+  tokenStylesForIntent
+} from "../../utils/Commons/color.util";
+import {
+  buildDisabledPredicate,
+  formatDate,
+  formatTime,
+  getWeekdayNames,
+  isAfter,
+  isBefore,
+  isoWeekNumber,
+  isPast,
+  isSameDay,
+  isToday,
+  isWeekend,
+  startOfDay,
+  toDate
+} from "../../utils/Calendar/date.util";
+const props = defineProps({
+  view: { type: String, required: false, default: "month" },
+  currentDate: { type: [Date, String], required: false, default: () => /* @__PURE__ */ new Date() },
+  events: { type: Array, required: false, default: () => [] },
+  firstDayOfWeek: { type: Number, required: false, default: 1 },
+  timeFormat: { type: String, required: false, default: "24h" },
+  locale: { type: String, required: false, default: void 0 },
+  selectable: { type: Boolean, required: false, default: true },
+  eventColorKey: { type: String, required: false, default: "category" },
+  categoryColors: { type: Object, required: false, default: () => ({}) },
+  weekendHighlight: { type: Boolean, required: false, default: true },
+  showWeekNumbers: { type: Boolean, required: false, default: false },
+  dayStartHour: { type: Number, required: false, default: 0 },
+  dayEndHour: { type: Number, required: false, default: 24 },
+  slotDuration: { type: Number, required: false, default: 30 },
+  minDate: { type: [Date, String], required: false, default: void 0 },
+  maxDate: { type: [Date, String], required: false, default: void 0 },
+  disabledDates: { type: [Array, Function], required: false, default: void 0 },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  density: { type: null, required: false },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false }
+});
+const emit = defineEmits(["update:view", "update:currentDate", "event-click", "date-click", "range-select", "create-event-request", "view-change", "navigate"]);
+const VIEW = {
+  MONTH: "month",
+  WEEK: "week",
+  DAY: "day",
+  AGENDA: "agenda"
+};
+const VIEW_OPTIONS = [VIEW.MONTH, VIEW.WEEK, VIEW.DAY, VIEW.AGENDA];
+const MONTH_EVENT_LIMIT = 3;
+const DEFAULT_SLOT_HEIGHT_PX = 32;
+const { t } = useLocale();
+const VIEW_LABEL_FALLBACK = {
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  agenda: "Agenda"
+};
+function viewLabel(view) {
+  return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
+}
+const ariaLabel = computed(() => t("origam.calendar.ariaLabel", "Calendar"));
+const ariaToolbarLabel = computed(() => t("origam.calendar.toolbar", "Calendar toolbar"));
+const ariaPrevLabel = computed(() => t("origam.calendar.previous", "Previous"));
+const ariaNextLabel = computed(() => t("origam.calendar.next", "Next"));
+const ariaTodayLabel = computed(() => t("origam.calendar.today", "Today"));
+const ariaViewListLabel = computed(() => t("origam.calendar.viewSwitcher", "View"));
+const ariaMonthLabel = computed(() => t("origam.calendar.monthGrid", "Month grid"));
+const todayLabel = computed(() => t("origam.calendar.today", "Today"));
+const emptyLabel = computed(() => t("origam.calendar.empty", "No events to display"));
+const slotPx = DEFAULT_SLOT_HEIGHT_PX;
+const slotDuration = computed(() => props.slotDuration);
+const dayStartHour = computed(() => props.dayStartHour);
+const dayEndHour = computed(() => props.dayEndHour);
+const showWeekNumbers = computed(() => props.showWeekNumbers);
+const weekendHighlight = computed(() => props.weekendHighlight);
+const internalView = ref(props.view ?? "month");
+const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
+watch(() => props.view, (next) => {
+  if (next != null) internalView.value = next;
+});
+watch(() => props.currentDate, (next) => {
+  const parsed = toDate(next);
+  if (parsed) internalDate.value = parsed;
+});
+const resolvedView = computed(() => internalView.value);
+const resolvedDate = computed(() => internalDate.value);
+const resolvedLocale = computed(() => {
+  if (props.locale) return props.locale;
+  if (typeof document !== "undefined" && document.documentElement.lang) {
+    return document.documentElement.lang;
+  }
+  return "en-US";
+});
+const minDate = computed(() => props.minDate ? toDate(props.minDate) : null);
+const maxDate = computed(() => props.maxDate ? toDate(props.maxDate) : null);
+const disabledPredicate = computed(
+  () => buildDisabledPredicate(props.disabledDates)
+);
+const calendar = useCalendar(
+  {
+    events: () => props.events ?? [],
+    view: () => resolvedView.value,
+    currentDate: () => resolvedDate.value,
+    firstDayOfWeek: () => props.firstDayOfWeek,
+    slotDuration: () => slotDuration.value,
+    dayStartHour: () => dayStartHour.value,
+    dayEndHour: () => dayEndHour.value,
+    minDate: () => minDate.value,
+    maxDate: () => maxDate.value,
+    locale: () => resolvedLocale.value
+  },
+  (next) => {
+    internalView.value = next;
+    emit("update:view", next);
+    emit("view-change", next);
+  },
+  (next) => {
+    internalDate.value = next;
+    emit("update:currentDate", next);
+  }
+);
+function onSetView(next) {
+  calendar.setView(next);
+}
+function onNavigate(direction) {
+  calendar.navigate(direction);
+  emit("navigate", direction);
+}
+const prevGlyph = "\u2039";
+const nextGlyph = "\u203A";
+function isViewActive(view) {
+  return resolvedView.value === view;
+}
+function viewBtnVariant(view) {
+  return isViewActive(view) ? "flat" : "text";
+}
+const toolbarIntent = computed(() => {
+  const bg = props.bgColor;
+  if (bg && isIntent(bg)) return bg;
+  const fg = props.color;
+  if (fg && isIntent(fg)) return fg;
+  return "primary";
+});
+function viewBtnBgColor(view) {
+  return isViewActive(view) ? toolbarIntent.value : void 0;
+}
+const headerTitle = computed(() => {
+  const date = resolvedDate.value;
+  const locale = resolvedLocale.value;
+  switch (resolvedView.value) {
+    case "week": {
+      const range = calendar.visibleDateRange.value;
+      const startLabel = formatDate(range.start, locale, { month: "short", day: "numeric" });
+      const endLabel = formatDate(range.end, locale, { month: "short", day: "numeric", year: "numeric" });
+      return `${startLabel} \u2014 ${endLabel}`;
+    }
+    case "day":
+      return formatDate(date, locale, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric"
+      });
+    case "month":
+    case "agenda":
+    default:
+      return formatDate(date, locale, { month: "long", year: "numeric" });
+  }
+});
+const canPrev = computed(() => {
+  if (!minDate.value) return true;
+  return isAfter(resolvedDate.value, minDate.value);
+});
+const canNext = computed(() => {
+  if (!maxDate.value) return true;
+  return isBefore(resolvedDate.value, maxDate.value);
+});
+const monthGrid = computed(() => calendar.buildMonthGrid(resolvedDate.value));
+const weekdayNames = computed(() => getWeekdayNames(resolvedLocale.value, props.firstDayOfWeek, "short"));
+function dayCellKey(date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function isCellToday(date) {
+  return isToday(date);
+}
+function isCellPast(date) {
+  return isPast(startOfDay(date)) && !isCellToday(date);
+}
+function isCellWeekend(date) {
+  return isWeekend(date);
+}
+function isOutsideMonth(date) {
+  return date.getMonth() !== resolvedDate.value.getMonth();
+}
+function isDayDisabled(date) {
+  if (disabledPredicate.value(date)) return true;
+  if (minDate.value && isBefore(startOfDay(date), startOfDay(minDate.value))) return true;
+  if (maxDate.value && isAfter(startOfDay(date), startOfDay(maxDate.value))) return true;
+  return false;
+}
+function dayCellClasses(date) {
+  return {
+    "origam-calendar__day-cell--today": isCellToday(date),
+    "origam-calendar__day-cell--past": isCellPast(date),
+    "origam-calendar__day-cell--outside": isOutsideMonth(date),
+    "origam-calendar__day-cell--weekend": isCellWeekend(date) && weekendHighlight.value,
+    "origam-calendar__day-cell--disabled": isDayDisabled(date),
+    "origam-calendar__day-cell--selected": isInDragSelection(date)
+  };
+}
+function eventsOnDay(date) {
+  return calendar.eventsOnDay(date);
+}
+function dayEventsCapped(date) {
+  return eventsOnDay(date).slice(0, MONTH_EVENT_LIMIT);
+}
+function weekNumberOf(date) {
+  return isoWeekNumber(date);
+}
+function ariaWeekNumberLabel(date) {
+  return `Week ${weekNumberOf(date)}`;
+}
+function ariaDayLabel(date) {
+  return formatDate(date, resolvedLocale.value, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+const timelineDays = computed(() => {
+  if (resolvedView.value === "day") return [startOfDay(resolvedDate.value)];
+  const range = calendar.visibleDateRange.value;
+  const out = [];
+  let cursor = startOfDay(range.start);
+  for (let i = 0; i < 7; i++) {
+    out.push(cursor);
+    cursor = calendar.helpers.addDays(cursor, 1);
+  }
+  return out;
+});
+const hourLabels = computed(() => {
+  const out = [];
+  const date = new Date(resolvedDate.value);
+  date.setMinutes(0, 0, 0);
+  for (let h = dayStartHour.value; h < dayEndHour.value; h++) {
+    date.setHours(h);
+    out.push(formatTime(date, props.timeFormat, resolvedLocale.value));
+  }
+  return out;
+});
+function dayGridFor(date) {
+  return calendar.buildDayGrid(date);
+}
+function eventsOnTimeline(day) {
+  return eventsOnDay(day).filter((event) => !event.allDay);
+}
+function timelineEventStyle(event, day) {
+  const dayStartTime = new Date(day);
+  dayStartTime.setHours(dayStartHour.value, 0, 0, 0);
+  const pxPerMin = slotPx / slotDuration.value;
+  const pos = calendar.positionEvent(event, dayStartTime, pxPerMin);
+  if (!pos) return {};
+  return {
+    top: `${pos.top}px`,
+    height: `${pos.height}px`,
+    ...colorStyleFor(event)
+  };
+}
+function weekdayShort(date) {
+  return formatDate(date, resolvedLocale.value, { weekday: "short" });
+}
+function eventTimeLabel(event) {
+  const start = toDate(event.start);
+  if (!start) return "";
+  return formatTime(start, props.timeFormat, resolvedLocale.value);
+}
+const agendaEntries = computed(() => calendar.buildAgenda());
+function agendaDayHeader(date) {
+  return formatDate(date, resolvedLocale.value, {
+    weekday: "long",
+    month: "short",
+    day: "numeric"
+  });
+}
+const INTENT_NAMES = [
+  "neutral",
+  "primary",
+  "secondary",
+  "ghost",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+function colorFor(event) {
+  if (props.eventColorKey === "color" && event.color) {
+    return resolveColor(event.color);
+  }
+  if (event.color) return resolveColor(event.color);
+  const cat = event.category;
+  if (!cat) return null;
+  const mapped = props.categoryColors?.[cat];
+  if (!mapped) return null;
+  return resolveColor(mapped);
+}
+function resolveColor(value) {
+  if (INTENT_NAMES.includes(value)) {
+    return `var(--origam-color__action--${value}---bg, var(--origam-color__feedback--${value}---bg, currentColor))`;
+  }
+  return value;
+}
+function colorStyleFor(event) {
+  const c = colorFor(event);
+  if (!c) return {};
+  return {
+    "background-color": c,
+    "border-color": c
+  };
+}
+function eventStyle(event) {
+  return colorStyleFor(event);
+}
+function isEventPast(event) {
+  const start = toDate(event.start);
+  return start ? isPast(start) : false;
+}
+function isEventToday(event) {
+  const start = toDate(event.start);
+  return start ? isToday(start) : false;
+}
+function ariaEventLabel(event) {
+  const start = toDate(event.start);
+  if (!start) return event.title;
+  return `${event.title} \u2014 ${formatDate(start, resolvedLocale.value, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric"
+  })}`;
+}
+const monthDrag = ref(null);
+const dragSelection = ref(null);
+const isMouseDown = ref(false);
+function onDayClick(date, _event) {
+  if (isDayDisabled(date)) return;
+  if (monthDrag.value && !isSameDay(monthDrag.value.startDate, monthDrag.value.endDate)) return;
+  emit("date-click", date);
+}
+function onCellMouseDown(date, _ev) {
+  if (!props.selectable) return;
+  if (isDayDisabled(date)) return;
+  isMouseDown.value = true;
+  monthDrag.value = { startDate: date, endDate: date };
+}
+function onCellMouseEnter(date) {
+  if (!isMouseDown.value || !monthDrag.value) return;
+  monthDrag.value = { startDate: monthDrag.value.startDate, endDate: date };
+}
+function onMonthMouseUp() {
+  if (!monthDrag.value || !isMouseDown.value) {
+    isMouseDown.value = false;
+    return;
+  }
+  const { startDate, endDate } = monthDrag.value;
+  isMouseDown.value = false;
+  if (!isSameDay(startDate, endDate)) {
+    const [from, to] = startDate.getTime() <= endDate.getTime() ? [startDate, endDate] : [endDate, startDate];
+    emit("range-select", from, to);
+    emit("create-event-request", from, to);
+  }
+  monthDrag.value = null;
+}
+function isInDragSelection(date) {
+  if (!monthDrag.value) return false;
+  const { startDate, endDate } = monthDrag.value;
+  const [from, to] = startDate.getTime() <= endDate.getTime() ? [startDate, endDate] : [endDate, startDate];
+  return date.getTime() >= startOfDay(from).getTime() && date.getTime() <= startOfDay(to).getTime() + 24 * 60 * 60 * 1e3 - 1;
+}
+function slotMinutesFromY(event) {
+  const target = event.currentTarget;
+  const rect = target.getBoundingClientRect();
+  const y = event.clientY - rect.top;
+  const pxPerMin = slotPx / slotDuration.value;
+  return Math.max(0, Math.round(y / pxPerMin));
+}
+function onSlotMouseDown(day, event) {
+  if (!props.selectable) return;
+  if (event.button !== 0) return;
+  const minutes = slotMinutesFromY(event);
+  const start = new Date(day);
+  start.setHours(dayStartHour.value, 0, 0, 0);
+  start.setMinutes(start.getMinutes() + minutes);
+  dragSelection.value = { day, startMin: minutes, endMin: minutes + slotDuration.value };
+  isMouseDown.value = true;
+}
+function onSlotMouseMove(day, event) {
+  if (!isMouseDown.value || !dragSelection.value) return;
+  if (!isSameDayLocal(dragSelection.value.day, day)) return;
+  const minutes = slotMinutesFromY(event);
+  dragSelection.value = {
+    day: dragSelection.value.day,
+    startMin: dragSelection.value.startMin,
+    endMin: Math.max(minutes, dragSelection.value.startMin + slotDuration.value)
+  };
+}
+function onSlotMouseUp(day, _event) {
+  if (!isMouseDown.value || !dragSelection.value) {
+    isMouseDown.value = false;
+    return;
+  }
+  const start = new Date(day);
+  start.setHours(dayStartHour.value, 0, 0, 0);
+  start.setMinutes(start.getMinutes() + dragSelection.value.startMin);
+  const end = new Date(start);
+  end.setMinutes(start.getMinutes() + (dragSelection.value.endMin - dragSelection.value.startMin));
+  const dragged = dragSelection.value.endMin - dragSelection.value.startMin > slotDuration.value;
+  isMouseDown.value = false;
+  dragSelection.value = null;
+  if (dragged) {
+    emit("range-select", start, end);
+    emit("create-event-request", start, end);
+  }
+}
+function onSlotClick(day, event) {
+  const minutes = slotMinutesFromY(event);
+  const slotDate = new Date(day);
+  slotDate.setHours(dayStartHour.value, 0, 0, 0);
+  slotDate.setMinutes(slotDate.getMinutes() + minutes);
+  const wasDrag = dragSelection.value !== null;
+  if (!wasDrag) emit("date-click", slotDate);
+}
+const dragOverlayStyle = computed(() => {
+  if (!dragSelection.value) return {};
+  const pxPerMin = slotPx / slotDuration.value;
+  return {
+    top: `${dragSelection.value.startMin * pxPerMin}px`,
+    height: `${(dragSelection.value.endMin - dragSelection.value.startMin) * pxPerMin}px`
+  };
+});
+function isSameDayLocal(a, b) {
+  return isSameDay(a, b);
+}
+if (typeof window !== "undefined") {
+  window.addEventListener("mouseup", () => {
+    if (monthDrag.value) onMonthMouseUp();
+    else if (dragSelection.value) {
+      dragSelection.value = null;
+      isMouseDown.value = false;
+    }
+  });
+}
+function onEventClick(event, originalEvent) {
+  emit("event-click", event, originalEvent);
+}
+function onKeydown(event) {
+  const target = event.target;
+  if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) return;
+  let next = null;
+  const current = resolvedDate.value;
+  switch (event.key) {
+    case "ArrowRight":
+      next = calendar.helpers.addDays(current, 1);
+      break;
+    case "ArrowLeft":
+      next = calendar.helpers.addDays(current, -1);
+      break;
+    case "ArrowUp":
+      next = calendar.helpers.addDays(current, -7);
+      break;
+    case "ArrowDown":
+      next = calendar.helpers.addDays(current, 7);
+      break;
+    case "PageUp":
+      next = calendar.helpers.addMonths(current, -1);
+      break;
+    case "PageDown":
+      next = calendar.helpers.addMonths(current, 1);
+      break;
+  }
+  if (next) {
+    event.preventDefault();
+    internalDate.value = next;
+    emit("update:currentDate", next);
+  }
+}
+const {
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props);
+const { dimensionStyles } = useDimension(props);
+const { densityClasses } = useDensity(props, "origam-calendar");
+const borderColorStyle = computed(() => {
+  const value = props.borderColor;
+  return value && isIntent(value) ? [`border-color: ${tokenForegroundForIntent(value)}`] : [];
+});
+const surfaceVars = computed(() => {
+  const vars = {};
+  const bg = props.bgColor;
+  const fg = props.color;
+  const bgIntent = Boolean(bg) && isIntent(bg);
+  const bgCss = Boolean(bg) && typeof bg === "string" && isCssColor(bg);
+  const fgIntent = Boolean(fg) && isIntent(fg);
+  const fgCss = Boolean(fg) && typeof fg === "string" && isCssColor(fg);
+  if (bgIntent) {
+    vars["--origam-calendar__toolbar---background-color"] = tokenStylesForIntent(bg, "default")["background-color"];
+  } else if (bgCss) {
+    vars["--origam-calendar__toolbar---background-color"] = bg;
+  }
+  let headerFg;
+  if (bgIntent) {
+    headerFg = tokenStylesForIntent(bg, "default").color;
+  } else if (bgCss) {
+    headerFg = getForeground(parseColor(bg));
+  } else if (fgIntent) {
+    headerFg = tokenForegroundForIntent(fg);
+  } else if (fgCss) {
+    headerFg = fg;
+  }
+  if (headerFg) vars["--origam-calendar__toolbar---color"] = headerFg;
+  let bodyFg;
+  if (fgIntent) bodyFg = tokenForegroundForIntent(fg);
+  else if (fgCss) bodyFg = fg;
+  if (bodyFg) {
+    vars["--origam-calendar__day-cell---color"] = bodyFg;
+    vars["--origam-calendar__weekday---color"] = bodyFg;
+  }
+  return vars;
+});
+const rootClasses = computed(() => [
+  `origam-calendar--${resolvedView.value}`,
+  {
+    "origam-calendar--week-numbers": showWeekNumbers.value
+  },
+  borderClasses.value,
+  roundedClasses.value,
+  elevationClasses.value,
+  paddingClasses.value,
+  marginClasses.value,
+  densityClasses.value,
+  props.class
+]);
+const rootStyles = computed(() => [
+  surfaceVars.value,
+  borderStyles.value,
+  borderColorStyle.value,
+  roundedStyles.value,
+  elevationStyles.value,
+  paddingStyles.value,
+  marginStyles.value,
+  dimensionStyles.value,
+  props.style
+]);
+defineExpose({
+  visibleDateRange: calendar.visibleDateRange,
+  expandedEvents: calendar.expandedEvents,
+  navigate: onNavigate,
+  setView: onSetView
+});
+</script>
+
+<style lang="scss" scoped>
+  .origam-calendar {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: var(--origam-calendar---background-color, #ffffff);
+    color: var(--origam-calendar---color, inherit);
+    border: var(--origam-calendar---border-width, 1px) solid var(--origam-calendar---border-color, #e5e7eb);
+    border-radius: var(--origam-calendar---border-radius, 8px);
+    overflow: hidden;
+  }
+
+  .origam-calendar--density-compact {
+    --origam-calendar__toolbar---padding: 8px;
+    --origam-calendar__day-cell---height: 72px;
+    --origam-calendar__day-cell---padding: 4px;
+  }
+
+  .origam-calendar--density-comfortable {
+    --origam-calendar__toolbar---padding: 16px;
+    --origam-calendar__day-cell---height: 120px;
+    --origam-calendar__day-cell---padding: 10px;
+  }
+
+  .origam-calendar__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--origam-calendar__toolbar---gap, 8px);
+    padding: var(--origam-calendar__toolbar---padding, 12px);
+    color: var(--origam-calendar__toolbar---color, inherit);
+    background-color: var(--origam-calendar__toolbar---background-color, transparent);
+    border-bottom: 1px solid var(--origam-calendar__toolbar---border-color, #e5e7eb);
+    --origam-btn---color: var(--origam-calendar__toolbar---color, inherit);
+    --origam-color__overlay---scrim: currentColor;
+    --origam-btn---overlay-opacity-hover: 0.16;
+  }
+
+  .origam-calendar__toolbar-title {
+    flex: 0 1 auto;
+    min-width: 0;
+    text-align: center;
+    color: var(--origam-calendar__toolbar---title-color, inherit);
+    font-size: var(--origam-calendar__toolbar---title-font-size, 1rem);
+    font-weight: var(--origam-calendar__toolbar---title-font-weight, 600);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .origam-calendar__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .origam-calendar__weekdays {
+    display: grid;
+    grid-template-columns: var(--origam-calendar__week-number---grid-template-columns, repeat(7, minmax(0, 1fr)));
+  }
+
+  .origam-calendar--week-numbers .origam-calendar__weekdays,
+  .origam-calendar--week-numbers .origam-calendar__month-row {
+    grid-template-columns: var(--origam-calendar__week-number---width, 32px) repeat(7, minmax(0, 1fr));
+  }
+
+  .origam-calendar__weekday {
+    padding: 8px;
+    text-align: center;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: var(--origam-calendar__weekday---color, var(--origam-calendar__day-cell---color-muted, #6b7280));
+  }
+
+  .origam-calendar__week-number {
+    padding: 8px 4px;
+    font-size: var(--origam-calendar__week-number---font-size, 0.75rem);
+    color: var(--origam-calendar__week-number---color, #6b7280);
+    text-align: center;
+    align-self: center;
+  }
+
+  .origam-calendar__week-number-head {
+    min-width: var(--origam-calendar__week-number---width, 32px);
+  }
+
+  .origam-calendar__month-grid {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
+  .origam-calendar__month-row {
+    display: grid;
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+    flex: 1 1 auto;
+  }
+
+  .origam-calendar__day-cell {
+    min-height: var(--origam-calendar__day-cell---height, 96px);
+    padding: var(--origam-calendar__day-cell---padding, 6px);
+    border-top: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    background-color: var(--origam-calendar---background-color, #ffffff);
+    color: var(--origam-calendar__day-cell---color, inherit);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    user-select: none;
+  }
+
+  .origam-calendar__day-cell:focus-visible {
+    outline: 2px solid var(--origam-calendar__range-select---border-color, currentColor);
+    outline-offset: -2px;
+  }
+
+  .origam-calendar__day-cell--today {
+    background-image: linear-gradient(
+        0deg,
+        var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.08)),
+        var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.08))
+    );
+  }
+
+  .origam-calendar__day-cell--outside {
+    background-color: var(--origam-calendar__day-cell---bg-color-outside, #f9fafb);
+    color: var(--origam-calendar__day-cell---color-muted, #9ca3af);
+  }
+
+  .origam-calendar__day-cell--weekend {
+    background-color: var(--origam-calendar__day-cell---bg-color-weekend, #f9fafb);
+  }
+
+  .origam-calendar__day-cell--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    color: var(--origam-calendar__day-cell---color-disabled, #d1d5db);
+  }
+
+  .origam-calendar__day-cell--selected {
+    background-image: linear-gradient(
+        0deg,
+        var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.12)),
+        var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.12))
+    );
+  }
+
+  .origam-calendar__day-number {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .origam-calendar__day-events {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .origam-calendar__event {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: var(--origam-calendar__event---padding, 2px 4px);
+    font-size: var(--origam-calendar__event---font-size, 0.75rem);
+    border-radius: var(--origam-calendar__event---border-radius, 4px);
+    background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
+    color: var(--origam-calendar__event---color-default, #ffffff);
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .origam-calendar__event-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+  }
+
+  .origam-calendar__event-time {
+    opacity: 0.85;
+    font-size: 0.6875rem;
+  }
+
+  .origam-calendar__day-more {
+    font-size: 0.6875rem;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+    padding-left: 4px;
+  }
+
+  .origam-calendar__timeline {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .origam-calendar__timeline-hours {
+    display: flex;
+    flex-direction: column;
+    width: var(--origam-calendar__timeline__hour-label---width, 56px);
+    padding-top: 32px;
+    border-right: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+  }
+
+  .origam-calendar__hour-label {
+    font-size: var(--origam-calendar__timeline__hour-label---font-size, 0.6875rem);
+    color: var(--origam-calendar__timeline__hour-label---color, #6b7280);
+    text-align: right;
+    padding-right: 6px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+
+  .origam-calendar__timeline-grid {
+    display: flex;
+    flex: 1 1 auto;
+  }
+
+  .origam-calendar__timeline-day {
+    flex: 1 1 0;
+    min-width: 0;
+    border-left: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .origam-calendar__timeline-day--today {
+    background-color: var(--origam-calendar__day-cell---bg-color-today, rgba(59, 130, 246, 0.04));
+  }
+
+  .origam-calendar__timeline-day--weekend {
+    background-color: var(--origam-calendar__day-cell---bg-color-weekend, rgba(0, 0, 0, 0.02));
+  }
+
+  .origam-calendar__day-header {
+    padding: 8px;
+    text-align: center;
+    border-bottom: 1px solid var(--origam-calendar__day-cell---border-color, #e5e7eb);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .origam-calendar__day-header-weekday {
+    font-size: 0.75rem;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+    text-transform: uppercase;
+  }
+
+  .origam-calendar__day-header-number {
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  .origam-calendar__timeline-slots {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .origam-calendar__timeline-slot {
+    border-top: 1px solid var(--origam-calendar__timeline---grid-line-color, #f3f4f6);
+    pointer-events: auto;
+  }
+
+  .origam-calendar__timeline-slot--hour {
+    border-top-color: var(--origam-calendar__day-cell---border-color, #e5e7eb);
+  }
+
+  .origam-calendar__event--timeline {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 4px 6px;
+    font-size: 0.75rem;
+    line-height: 1.2;
+  }
+
+  .origam-calendar__range-overlay {
+    position: absolute;
+    left: 4px;
+    right: 4px;
+    background-color: var(--origam-calendar__range-select---bg-color, rgba(59, 130, 246, 0.18));
+    border: 1px dashed var(--origam-calendar__range-select---border-color, rgba(59, 130, 246, 0.6));
+    pointer-events: none;
+    border-radius: 4px;
+  }
+
+  .origam-calendar__body--agenda {
+    padding: var(--origam-calendar__agenda---padding, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--origam-calendar__agenda---row-gap, 12px);
+  }
+
+  .origam-calendar__agenda-day {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .origam-calendar__agenda-day-header {
+    font-size: 0.875rem;
+    color: var(--origam-calendar__agenda---day-color, inherit);
+    font-weight: var(--origam-calendar__agenda---day-font-weight, 600);
+  }
+
+  .origam-calendar__agenda-event {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    background-color: var(--origam-calendar__event---bg-color-default, #3b82f6);
+    color: var(--origam-calendar__event---color-default, #ffffff);
+    font-size: 0.875rem;
+  }
+
+  .origam-calendar__agenda-empty {
+    padding: 32px;
+    text-align: center;
+    color: var(--origam-calendar__day-cell---color-muted, #6b7280);
+  }
+</style>