@nomideusz/svelte-calendar 0.14.1 → 0.15.2

package/dist/views/mobile/MobileWeek.svelte

@@ -12,16 +12,8 @@ import { DAY_MS, sod, isAllDay, isMultiDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
 import { fmtTime as _fmtTime, weekdayShort } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
-let {
-  mondayStart = true,
-  locale,
-  height = null,
-  events = [],
-  style = "",
-  focusDate,
-  oneventclick,
-  selectedEventId = null
-} = $props();
+let { mondayStart = true, locale, height = null, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
+// ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const viewState = $derived(ctx.viewState);
@@ -33,103 +25,118 @@ const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
 const loadRangeCtx = $derived(ctx.loadRange);
 const clock = createClock(ctx.timezone);
+// ── Config ─────────────────────────────────────────
 const MAX_EVENTS = 3;
 const customDays = $derived(viewState?.dayCount ?? 7);
+// ── Derived week data ──────────────────────────────
 const todayMs = $derived(clock.today);
 const focusMs = $derived(focusDate ? sod(focusDate.getTime()) : todayMs);
-const weekStart = $derived(
-  customDays === 7 ? sowFn(focusMs, mondayStart) : sod(focusMs)
-);
+const weekStart = $derived(customDays === 7 ? sowFn(focusMs, mondayStart) : sod(focusMs));
+// ── Load range ─────────────────────────────────────
 $effect(() => {
-  if (!loadRangeCtx) return;
-  const rangeStart = new Date(weekStart - 7 * DAY_MS);
-  const rangeEnd = new Date(weekStart + (customDays + 7) * DAY_MS);
-  loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
-  return () => loadRangeCtx.set(null);
+	if (!loadRangeCtx) return;
+	const rangeStart = new Date(weekStart - 7 * DAY_MS);
+	const rangeEnd = new Date(weekStart + (customDays + 7) * DAY_MS);
+	loadRangeCtx.set({
+		start: rangeStart,
+		end: rangeEnd
+	});
+	return () => loadRangeCtx.set(null);
 });
 const dayCells = $derived.by(() => {
-  const result = [];
-  const hideSet = new Set(hideDays ?? []);
-  for (let i = 0; i < customDays; i++) {
-    const ms = weekStart + i * DAY_MS;
-    const d = new Date(ms);
-    const jsDay = d.getDay();
-    const isoDay = jsDay === 0 ? 7 : jsDay;
-    if (hideSet.has(isoDay)) continue;
-    const isToday = ms === todayMs;
-    const isPast = equalDays ? false : ms < todayMs;
-    const isWeekend = jsDay === 0 || jsDay === 6;
-    const isDisabled = disabledSet.has(ms);
-    const dayEnd = ms + DAY_MS;
-    const dayEvents = events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
-    const allDayCount = dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)).length;
-    result.push({
-      ms,
-      dayNum: d.getDate(),
-      dayName: weekdayShort(ms, locale),
-      isToday,
-      isPast,
-      isDisabled,
-      isWeekend,
-      events: dayEvents,
-      allDayCount,
-      totalCount: dayEvents.length
-    });
-  }
-  return result;
+	const result = [];
+	const hideSet = new Set(hideDays ?? []);
+	for (let i = 0; i < customDays; i++) {
+		const ms = weekStart + i * DAY_MS;
+		const d = new Date(ms);
+		const jsDay = d.getDay();
+		const isoDay = jsDay === 0 ? 7 : jsDay;
+		if (hideSet.has(isoDay)) continue;
+		const isToday = ms === todayMs;
+		const isPast = equalDays ? false : ms < todayMs;
+		const isWeekend = jsDay === 0 || jsDay === 6;
+		const isDisabled = disabledSet.has(ms);
+		const dayEnd = ms + DAY_MS;
+		const dayEvents = events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
+		const allDayCount = dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)).length;
+		result.push({
+			ms,
+			dayNum: d.getDate(),
+			dayName: weekdayShort(ms, locale),
+			isToday,
+			isPast,
+			isDisabled,
+			isWeekend,
+			events: dayEvents,
+			allDayCount,
+			totalCount: dayEvents.length
+		});
+	}
+	return result;
 });
-let expandedDays = $state(/* @__PURE__ */ new Set());
+// ── Expanded rows ("+N more") ──────────────────────
+let expandedDays = $state(new Set());
 function toggleExpand(ms) {
-  const next = new Set(expandedDays);
-  if (next.has(ms)) next.delete(ms);
-  else next.add(ms);
-  expandedDays = next;
+	const next = new Set(expandedDays);
+	if (next.has(ms)) next.delete(ms);
+	else next.add(ms);
+	expandedDays = next;
 }
+// ── Format helpers ─────────────────────────────────
 function fmtTime(d) {
-  return _fmtTime(d, locale);
+	return _fmtTime(d, locale);
 }
 function evTimeLabel(ev) {
-  if (isAllDay(ev) || isMultiDay(ev)) return L.allDay;
-  return `${fmtTime(ev.start)} \u2013 ${fmtTime(ev.end)}`;
+	if (isAllDay(ev) || isMultiDay(ev)) return L.allDay;
+	return `${fmtTime(ev.start)} – ${fmtTime(ev.end)}`;
 }
 function statusText(ev) {
-  if (ev.status === "cancelled") return ` (${L.cancelled})`;
-  if (ev.status === "tentative") return ` (${L.tentative})`;
-  if (ev.status === "full") return ` (${L.full})`;
-  if (ev.status === "limited") return ` (${L.limited})`;
-  return "";
+	if (ev.status === "cancelled") return ` (${L.cancelled})`;
+	if (ev.status === "tentative") return ` (${L.tentative})`;
+	if (ev.status === "full") return ` (${L.full})`;
+	if (ev.status === "limited") return ` (${L.limited})`;
+	return "";
 }
+// ── Touch swipe ────────────────────────────────────
 let swipeOffset = $state(0);
 let swipeAnimate = $state(false);
 const swipe = createSwipe({
-  onmove: (dx) => {
-    swipeAnimate = false;
-    swipeOffset = dx;
-  },
-  onend: (dir) => {
-    if (dir !== 0) {
-      swipeAnimate = false;
-      swipeOffset = 0;
-      if (dir > 0) viewState?.prev();
-      else viewState?.next();
-    } else {
-      swipeAnimate = true;
-      swipeOffset = 0;
-    }
-  }
+	onmove: (dx) => {
+		swipeAnimate = false;
+		swipeOffset = dx;
+	},
+	onend: (dir) => {
+		if (dir !== 0) {
+			// Committed — the week changes, so jump rather than slide new content.
+			swipeAnimate = false;
+			swipeOffset = 0;
+			if (dir > 0) viewState?.prev();
+			else viewState?.next();
+		} else {
+			// Snap back (CSS drops the transition under prefers-reduced-motion).
+			swipeAnimate = true;
+			swipeOffset = 0;
+		}
+	}
 });
+// ── Day tap → switch to day mode ───────────────────
 function handleDayTap(dayMs) {
-  if (!viewState) return;
-  viewState.setFocusDate(new Date(dayMs));
-  const currentView = viewState.view;
-  if (!currentView.split("-").includes("week")) return;
-  const dayView = currentView.split("-").map((seg) => seg === "week" ? "day" : seg).join("-");
-  if (dayView !== currentView) viewState.setView(dayView);
+	if (!viewState) return;
+	viewState.setFocusDate(new Date(dayMs));
+	// The registered view list isn't reachable from the view context, so we
+	// can only map conventionally-named ids ("week-mobile" → "day-mobile",
+	// "week-planner" → "day-planner", …). For custom ids that don't follow
+	// the "week-*" segment convention, we keep the current view (the focus
+	// date still moves) instead of switching to a possibly-unregistered id.
+	const currentView = viewState.view;
+	if (!currentView.split("-").includes("week")) return;
+	const dayView = currentView.split("-").map((seg) => seg === "week" ? "day" : seg).join("-");
+	if (dayView !== currentView) viewState.setView(dayView);
 }
 function handleDayKeydown(e, dayMs) {
-  if (e.key !== "Enter" && e.key !== " ") return;
-  e.preventDefault();
-  handleDayTap(dayMs);
+	if (e.key !== "Enter" && e.key !== " ") return;
+	e.preventDefault();
+	handleDayTap(dayMs);
 }
 </script>
 

package/dist/views/month/MonthGrid.svelte

@@ -10,15 +10,7 @@
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, sod, isAllDay } from "../../core/time.js";
 import { fmtTime, weekdayShort } from "../../core/locale.js";
-let {
-  events = [],
-  style = "",
-  height = null,
-  locale,
-  focusDate,
-  oneventclick,
-  selectedEventId = null
-} = $props();
+let { events = [], style = "", height = null, locale, focusDate, oneventclick, selectedEventId = null } = $props();
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const viewState = $derived(ctx.viewState);
@@ -31,127 +23,132 @@ const eventSnippet = $derived(ctx.eventSnippet);
 const loadRangeCtx = $derived(ctx.loadRange);
 const clock = createClock(ctx.timezone);
 const todayMs = $derived(clock.today);
+// Mobile cells are too narrow for text chips (a 55px cell fits ~1 character)
+// and too short for stacked rows — render color dots instead, and let the
+// cell tap (day drill-down) carry the interaction.
 const dotsMode = $derived(isMobile);
 const MAX_CHIPS = 3;
 const range = $derived(viewState?.range);
-const focusMonth = $derived((focusDate ?? /* @__PURE__ */ new Date()).getMonth());
+const focusMonth = $derived((focusDate ?? new Date()).getMonth());
 $effect(() => {
-  if (!loadRangeCtx || !range) return;
-  loadRangeCtx.set({
-    start: new Date(range.start.getTime() - 7 * DAY_MS),
-    end: new Date(range.end.getTime() + 7 * DAY_MS)
-  });
-  return () => loadRangeCtx.set(null);
+	if (!loadRangeCtx || !range) return;
+	loadRangeCtx.set({
+		start: new Date(range.start.getTime() - 7 * DAY_MS),
+		end: new Date(range.end.getTime() + 7 * DAY_MS)
+	});
+	return () => loadRangeCtx.set(null);
 });
+/** Day (ms) whose cell is inline-expanded to show all events (no-ondayclick fallback). */
 let expandedMs = $state(null);
+/** Roving-tabindex anchor: the one cell reachable via Tab. */
 let focusMs = $state(null);
 let bodyEl = $state(null);
 const cellsInteractive = $derived(!!ondayclick);
 const rovingMs = $derived.by(() => {
-  if (!range) return null;
-  const start = sod(range.start.getTime());
-  const end = range.end.getTime();
-  if (focusMs !== null && focusMs >= start && focusMs < end) return focusMs;
-  if (todayMs >= start && todayMs < end) return todayMs;
-  return start;
+	if (!range) return null;
+	const start = sod(range.start.getTime());
+	const end = range.end.getTime();
+	if (focusMs !== null && focusMs >= start && focusMs < end) return focusMs;
+	if (todayMs >= start && todayMs < end) return todayMs;
+	return start;
 });
 function moveFocus(fromMs, deltaDays) {
-  if (!range) return;
-  const target = fromMs + deltaDays * DAY_MS;
-  if (target < sod(range.start.getTime()) || target >= range.end.getTime()) return;
-  focusMs = target;
-  const el = bodyEl?.querySelector(`[data-ms="${target}"]`);
-  el?.focus();
+	if (!range) return;
+	const target = fromMs + deltaDays * DAY_MS;
+	if (target < sod(range.start.getTime()) || target >= range.end.getTime()) return;
+	focusMs = target;
+	const el = bodyEl?.querySelector(`[data-ms="${target}"]`);
+	el?.focus();
 }
 function cellKeydown(e, cell) {
-  switch (e.key) {
-    case "ArrowRight":
-      e.preventDefault();
-      moveFocus(cell.ms, 1);
-      break;
-    case "ArrowLeft":
-      e.preventDefault();
-      moveFocus(cell.ms, -1);
-      break;
-    case "ArrowDown":
-      e.preventDefault();
-      moveFocus(cell.ms, 7);
-      break;
-    case "ArrowUp":
-      e.preventDefault();
-      moveFocus(cell.ms, -7);
-      break;
-    case "Escape":
-      if (expandedMs !== null) {
-        e.preventDefault();
-        expandedMs = null;
-      }
-      break;
-    case "Enter":
-    case " ":
-      if (!cell.isDisabled) {
-        e.preventDefault();
-        ondayclick?.(cell.date);
-      }
-      break;
-  }
+	switch (e.key) {
+		case "ArrowRight":
+			e.preventDefault();
+			moveFocus(cell.ms, 1);
+			break;
+		case "ArrowLeft":
+			e.preventDefault();
+			moveFocus(cell.ms, -1);
+			break;
+		case "ArrowDown":
+			e.preventDefault();
+			moveFocus(cell.ms, 7);
+			break;
+		case "ArrowUp":
+			e.preventDefault();
+			moveFocus(cell.ms, -7);
+			break;
+		case "Escape":
+			if (expandedMs !== null) {
+				e.preventDefault();
+				expandedMs = null;
+			}
+			break;
+		case "Enter":
+		case " ":
+			if (!cell.isDisabled) {
+				e.preventDefault();
+				ondayclick?.(cell.date);
+			}
+			break;
+	}
 }
 function overflowClick(e, cell) {
-  e.stopPropagation();
-  if (ondayclick) ondayclick(cell.date);
-  else expandedMs = expandedMs === cell.ms ? null : cell.ms;
+	e.stopPropagation();
+	if (ondayclick) ondayclick(cell.date);
+	else expandedMs = expandedMs === cell.ms ? null : cell.ms;
 }
 function cellLabel(cell) {
-  const date = cell.date.toLocaleDateString(locale, {
-    weekday: "long",
-    day: "numeric",
-    month: "long"
-  });
-  return `${date}, ${L.nEvents(cell.all.length)}`;
+	const date = cell.date.toLocaleDateString(locale, {
+		weekday: "long",
+		day: "numeric",
+		month: "long"
+	});
+	return `${date}, ${L.nEvents(cell.all.length)}`;
 }
 function eventsForDay(ms) {
-  const dayStart = ms;
-  const dayEnd = ms + DAY_MS;
-  return events.filter((e) => e.start.getTime() < dayEnd && e.end.getTime() > dayStart).sort((a, b) => {
-    const aAll = isAllDay(a) ? 0 : 1;
-    const bAll = isAllDay(b) ? 0 : 1;
-    return aAll - bAll || a.start.getTime() - b.start.getTime();
-  });
+	const dayStart = ms;
+	const dayEnd = ms + DAY_MS;
+	return events.filter((e) => e.start.getTime() < dayEnd && e.end.getTime() > dayStart).sort((a, b) => {
+		const aAll = isAllDay(a) ? 0 : 1;
+		const bAll = isAllDay(b) ? 0 : 1;
+		return aAll - bAll || a.start.getTime() - b.start.getTime();
+	});
 }
 const weeks = $derived.by(() => {
-  if (!range) return [];
-  const rows = [];
-  for (let ms = sod(range.start.getTime()); ms < range.end.getTime(); ms += 7 * DAY_MS) {
-    const row = [];
-    for (let i = 0; i < 7; i++) {
-      const cellMs = ms + i * DAY_MS;
-      const date = new Date(cellMs);
-      const jsDay = date.getDay();
-      const dayEvents = eventsForDay(cellMs);
-      row.push({
-        ms: cellMs,
-        date,
-        dayNum: date.getDate(),
-        inMonth: date.getMonth() === focusMonth,
-        isToday: cellMs === todayMs,
-        isWeekend: jsDay === 0 || jsDay === 6,
-        isDisabled: disabledSet.has(cellMs),
-        chips: dayEvents.slice(0, MAX_CHIPS),
-        all: dayEvents,
-        overflow: Math.max(0, dayEvents.length - MAX_CHIPS)
-      });
-    }
-    rows.push(row);
-  }
-  return rows;
+	if (!range) return [];
+	const rows = [];
+	for (let ms = sod(range.start.getTime()); ms < range.end.getTime(); ms += 7 * DAY_MS) {
+		const row = [];
+		for (let i = 0; i < 7; i++) {
+			const cellMs = ms + i * DAY_MS;
+			const date = new Date(cellMs);
+			const jsDay = date.getDay();
+			const dayEvents = eventsForDay(cellMs);
+			row.push({
+				ms: cellMs,
+				date,
+				dayNum: date.getDate(),
+				inMonth: date.getMonth() === focusMonth,
+				isToday: cellMs === todayMs,
+				isWeekend: jsDay === 0 || jsDay === 6,
+				isDisabled: disabledSet.has(cellMs),
+				chips: dayEvents.slice(0, MAX_CHIPS),
+				all: dayEvents,
+				overflow: Math.max(0, dayEvents.length - MAX_CHIPS)
+			});
+		}
+		rows.push(row);
+	}
+	return rows;
 });
 const weekdayLabels = $derived.by(() => {
-  const first = weeks[0];
-  if (!first) return [];
-  return first.map((c) => weekdayShort(c.ms, locale));
+	const first = weeks[0];
+	if (!first) return [];
+	return first.map((c) => weekdayShort(c.ms, locale));
 });
 function chipTime(e) {
-  return isAllDay(e) ? "" : fmtTime(e.start, locale);
+	return isAllDay(e) ? "" : fmtTime(e.start, locale);
 }
 </script>