@nomideusz/svelte-calendar 0.9.0 → 0.11.0

package/dist/views/mobile/MobileWeek.svelte

@@ -10,8 +10,8 @@ import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, sod, isAllDay, isMultiDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
-import { fmtTime as _fmtTime, weekdayShort, getLabels } from "../../core/locale.js";
-const L = $derived(getLabels());
+import { fmtTime as _fmtTime, weekdayShort } from "../../core/locale.js";
+import { createSwipe } from "./swipe.js";
 let {
   mondayStart = true,
   locale,
@@ -20,11 +20,10 @@ let {
   style = "",
   focusDate,
   oneventclick,
-  oneventcreate,
-  selectedEventId = null,
-  readOnly = false
+  selectedEventId = null
 } = $props();
 const ctx = useCalendarContext();
+const L = $derived(ctx.labels);
 const viewState = $derived(ctx.viewState);
 const equalDays = $derived(ctx.equalDays);
 const showDates = $derived(ctx.showDates);
@@ -33,7 +32,6 @@ const autoHeight = $derived(ctx.autoHeight);
 const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
 const loadRangeCtx = $derived(ctx.loadRange);
-const minDuration = $derived(ctx.minDuration);
 const clock = createClock(ctx.timezone);
 const MAX_EVENTS = 3;
 const customDays = $derived(viewState?.dayCount ?? 7);
@@ -80,54 +78,53 @@ const dayCells = $derived.by(() => {
   }
   return result;
 });
+let expandedDays = $state(/* @__PURE__ */ new Set());
+function toggleExpand(ms) {
+  const next = new Set(expandedDays);
+  if (next.has(ms)) next.delete(ms);
+  else next.add(ms);
+  expandedDays = next;
+}
 function fmtTime(d) {
   return _fmtTime(d, locale);
 }
-let touchStartX = 0;
-let touchStartY = 0;
-let swiping = false;
-let swipeOffset = $state(0);
-const SWIPE_THRESHOLD = 60;
-function onTouchStart(e) {
-  const t = e.touches[0];
-  touchStartX = t.clientX;
-  touchStartY = t.clientY;
-  swiping = true;
-  swipeOffset = 0;
+function evTimeLabel(ev) {
+  if (isAllDay(ev) || isMultiDay(ev)) return L.allDay;
+  return `${fmtTime(ev.start)} \u2013 ${fmtTime(ev.end)}`;
 }
-function onTouchMove(e) {
-  if (!swiping) return;
-  const t = e.touches[0];
-  const dx = t.clientX - touchStartX;
-  const dy = t.clientY - touchStartY;
-  if (Math.abs(dy) > Math.abs(dx) * 0.8) {
-    swiping = false;
-    return;
-  }
-  swipeOffset = dx;
+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 "";
 }
-function onTouchEnd() {
-  if (!swiping) {
-    swipeOffset = 0;
-    return;
-  }
-  if (Math.abs(swipeOffset) > SWIPE_THRESHOLD) {
-    if (swipeOffset > 0) {
-      viewState?.prev();
+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 {
-      viewState?.next();
+      swipeAnimate = true;
+      swipeOffset = 0;
     }
   }
-  swipeOffset = 0;
-  swiping = false;
-}
+});
 function handleDayTap(dayMs) {
-  if (viewState) {
-    viewState.setFocusDate(new Date(dayMs));
-    const currentView = viewState.view;
-    const dayView = currentView.replace("week", "day");
-    viewState.setView(dayView);
-  }
+  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);
 }
 function handleDayKeydown(e, dayMs) {
   if (e.key !== "Enter" && e.key !== " ") return;
@@ -143,12 +140,18 @@ function handleDayKeydown(e, dayMs) {
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
 	aria-label={L.weekAhead}
-	ontouchstart={onTouchStart}
-	ontouchmove={onTouchMove}
-	ontouchend={onTouchEnd}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<!-- Vertical day list -->
-	<div class="mw-list" role="list">
+	<div
+		class="mw-list"
+		class:mw-list--animate={swipeAnimate}
+		style:transform={swipeOffset !== 0 ? `translateX(${swipeOffset}px)` : undefined}
+		role="list"
+	>
 		{#each dayCells as cell (cell.ms)}
 			<div
 				class="mw-row"
@@ -157,13 +160,15 @@ function handleDayKeydown(e, dayMs) {
 				class:mw-row--weekend={cell.isWeekend}
 				class:mw-row--disabled={cell.isDisabled}
 				role="listitem"
+				aria-current={cell.isToday ? 'date' : undefined}
 			>
 				<button
+					type="button"
 					class="mw-row-target"
 					disabled={cell.isDisabled}
 					onclick={() => handleDayTap(cell.ms)}
 					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
-					aria-label="{cell.dayName} {cell.dayNum}"
+					aria-label="{cell.dayName} {cell.dayNum}{cell.isToday ? `, ${L.today}` : ''}"
 				></button>
 				<!-- Date column -->
 				<div class="mw-date">
@@ -178,7 +183,7 @@ function handleDayKeydown(e, dayMs) {
 					{#if cell.events.length === 0}
 						<span class="mw-empty">{L.noEvents}</span>
 					{:else}
-						{#each cell.events.slice(0, MAX_EVENTS) as ev (ev.id)}
+						{#each (expandedDays.has(cell.ms) ? cell.events : cell.events.slice(0, MAX_EVENTS)) as ev (ev.id)}
 							<button
 								type="button"
 								class="mw-ev"
@@ -193,6 +198,7 @@ function handleDayKeydown(e, dayMs) {
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
+								aria-label="{ev.title}{statusText(ev)}, {evTimeLabel(ev)}"
 							>
 								<span class="mw-ev-stripe"></span>
 								<div class="mw-ev-body">
@@ -208,7 +214,14 @@ function handleDayKeydown(e, dayMs) {
 							</button>
 						{/each}
 						{#if cell.totalCount > MAX_EVENTS}
-							<span class="mw-ev-more">{L.nMore(cell.totalCount - MAX_EVENTS)}</span>
+							<button
+								type="button"
+								class="mw-ev-more"
+								aria-expanded={expandedDays.has(cell.ms)}
+								onclick={() => toggleExpand(cell.ms)}
+							>
+								{expandedDays.has(cell.ms) ? L.showLess : L.nMore(cell.totalCount - MAX_EVENTS)}
+							</button>
 						{/if}
 					{/if}
 				</div>
@@ -231,6 +244,7 @@ function handleDayKeydown(e, dayMs) {
 		overflow: hidden;
 		background: var(--dt-bg, #fff);
 		-webkit-tap-highlight-color: transparent;
+		touch-action: pan-y;
 	}
 	.mw--auto { overflow: visible; }
 
@@ -238,11 +252,19 @@ function handleDayKeydown(e, dayMs) {
 	.mw-list {
 		flex: 1;
 		overflow-y: auto;
+		overflow-x: hidden;
+		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 	}
 	.mw--auto .mw-list { overflow-y: visible; }
+	.mw-list--animate {
+		transition: transform 180ms ease;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.mw-list--animate { transition: none; }
+	}
 
 	/* ─── Day row ────────────────────────────────────── */
 	.mw-row {
@@ -250,6 +272,10 @@ function handleDayKeydown(e, dayMs) {
 		align-items: center;
 		gap: 12px;
 		position: relative;
+		/* border-box: width 100% + padding otherwise overflows the list by
+		   24px, which iOS turns into a horizontal pan that clips the date
+		   column off the left edge */
+		box-sizing: border-box;
 		padding: 10px 12px;
 		background: transparent;
 		transition: background 120ms;
@@ -268,8 +294,13 @@ function handleDayKeydown(e, dayMs) {
 	.mw-row--today {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 4%, transparent);
 	}
+	/* Token-based dim (not subtree opacity) so past rows stay legible/tappable */
 	.mw-row--past {
-		opacity: 0.5;
+		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 3%, transparent);
+	}
+	.mw-row--past :global(.mw-ev-title),
+	.mw-row--past .mw-day-num {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.mw-row--disabled {
 		background-image: repeating-linear-gradient(
@@ -294,8 +325,8 @@ function handleDayKeydown(e, dayMs) {
 		cursor: default;
 	}
 	.mw-row-target:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: -2px;
+		outline: none;
+		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -312,10 +343,10 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-day-name {
-		font: 600 10px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.06em;
 		text-transform: uppercase;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.mw-day-name--today {
 		color: var(--dt-accent, #2563eb);
@@ -338,6 +369,8 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	/* ─── Events column ──────────────────────────────── */
+	/* pointer-events pass through to the full-row target underneath;
+	   only the chips (and "+N more") re-capture them. */
 	.mw-events {
 		flex: 1;
 		min-width: 0;
@@ -346,12 +379,12 @@ function handleDayKeydown(e, dayMs) {
 		gap: 4px;
 		position: relative;
 		z-index: 2;
+		pointer-events: none;
 	}
 
 	.mw-empty {
-		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		font-style: italic;
+		font: 400 13px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	/* ─── Event chip ─────────────────────────────────── */
@@ -359,6 +392,7 @@ function handleDayKeydown(e, dayMs) {
 		display: flex;
 		align-items: center;
 		gap: 0;
+		min-height: 44px;
 		border-radius: 6px;
 		background: color-mix(in srgb, var(--ev-color) 10%, var(--dt-surface, #f9fafb));
 		overflow: hidden;
@@ -368,6 +402,7 @@ function handleDayKeydown(e, dayMs) {
 		border: none;
 		text-align: left;
 		padding: 0;
+		pointer-events: auto;
 	}
 	.mw-ev:active {
 		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #f9fafb));
@@ -381,22 +416,32 @@ function handleDayKeydown(e, dayMs) {
 	.mw-ev--allday {
 		background: color-mix(in srgb, var(--ev-color) 14%, var(--dt-surface, #f9fafb));
 	}
+	/* Status treatments: token-level dims + a non-opacity signal
+	   (strikethrough / border style) — never a bare opacity on the chip. */
 	.mw-ev--cancelled {
-		opacity: 0.5;
+		background: color-mix(in srgb, var(--ev-color) 5%, var(--dt-surface, #f9fafb));
 	}
 	.mw-ev--cancelled .mw-ev-title {
 		text-decoration: line-through;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+	.mw-ev--cancelled .mw-ev-stripe {
+		opacity: 0.45; /* decorative bar only */
 	}
 	.mw-ev--tentative {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+		background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
 	}
 	.mw-ev--full {
-		opacity: 0.55;
+		background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
+		border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
+	}
+	.mw-ev--full .mw-ev-title {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.mw-ev--limited {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+		background: color-mix(in srgb, var(--ev-color) 8%, var(--dt-surface, #f9fafb));
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
 	}
 
 	.mw-ev-stripe {
@@ -417,7 +462,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-title {
-		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 500 15px/1.2 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
@@ -427,16 +472,39 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-time {
-		font: 400 11px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 12px/1 var(--dt-mono, ui-monospace, monospace);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
 
 	.mw-ev-more {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		padding: 2px 0;
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		padding: 2px 4px;
+		min-height: 32px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		text-align: left;
+		align-self: flex-start;
+		position: relative;
+		pointer-events: auto;
+		-webkit-tap-highlight-color: transparent;
+	}
+	/* Hit-slop: 44px effective touch target */
+	.mw-ev-more::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		height: 44px;
+	}
+	.mw-ev-more:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 
 	/* ─── Chevron ────────────────────────────────────── */
@@ -450,7 +518,7 @@ function handleDayKeydown(e, dayMs) {
 
 	/* ─── Focus ──────────────────────────────────────── */
 	.mw-ev:focus-visible {
-		outline: 2px solid var(--ev-color, var(--dt-accent));
-		outline-offset: 1px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 </style>

package/dist/views/mobile/swipe.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared horizontal-swipe tracker for the mobile views.
+ *
+ * Tracks touch gestures on a container and reports the live horizontal
+ * offset (so the view can follow the finger) plus a commit direction on
+ * release. Vertical-dominant movement hands the gesture back to native
+ * scrolling immediately.
+ */
+/** Unified swipe commit threshold (px) across mobile day + week views. */
+export declare const SWIPE_THRESHOLD = 50;
+export interface SwipeCallbacks {
+    /** Live horizontal offset (px) while the finger is down. Reset to 0 when the gesture is abandoned. */
+    onmove: (dx: number) => void;
+    /**
+     * Gesture finished.
+     * `dir` is `1` (swiped right → previous period), `-1` (swiped left → next period),
+     * or `0` (below threshold — snap back).
+     */
+    onend: (dir: -1 | 0 | 1) => void;
+    /** Return true to ignore the gesture entirely (e.g. while a drag-create/resize is active). */
+    disabled?: () => boolean;
+}
+export interface SwipeHandlers {
+    ontouchstart: (e: TouchEvent) => void;
+    ontouchmove: (e: TouchEvent) => void;
+    ontouchend: () => void;
+    ontouchcancel: () => void;
+}
+export declare function createSwipe(cb: SwipeCallbacks): SwipeHandlers;

package/dist/views/mobile/swipe.js

@@ -0,0 +1,73 @@
+/**
+ * Shared horizontal-swipe tracker for the mobile views.
+ *
+ * Tracks touch gestures on a container and reports the live horizontal
+ * offset (so the view can follow the finger) plus a commit direction on
+ * release. Vertical-dominant movement hands the gesture back to native
+ * scrolling immediately.
+ */
+/** Unified swipe commit threshold (px) across mobile day + week views. */
+export const SWIPE_THRESHOLD = 50;
+export function createSwipe(cb) {
+    let startX = 0;
+    let startY = 0;
+    let tracking = false;
+    let dx = 0;
+    function abandon() {
+        tracking = false;
+        if (dx !== 0) {
+            dx = 0;
+            cb.onmove(0);
+        }
+    }
+    return {
+        ontouchstart(e) {
+            if (cb.disabled?.()) {
+                tracking = false;
+                return;
+            }
+            const t = e.touches[0];
+            startX = t.clientX;
+            startY = t.clientY;
+            tracking = true;
+            dx = 0;
+        },
+        ontouchmove(e) {
+            if (!tracking)
+                return;
+            if (cb.disabled?.()) {
+                abandon();
+                return;
+            }
+            const t = e.touches[0];
+            const mx = t.clientX - startX;
+            const my = t.clientY - startY;
+            // Vertical movement dominates → this is a scroll, not a swipe.
+            if (Math.abs(my) > Math.abs(mx) * 0.8) {
+                abandon();
+                return;
+            }
+            dx = mx;
+            cb.onmove(dx);
+        },
+        ontouchend() {
+            if (!tracking) {
+                cb.onend(0);
+                return;
+            }
+            tracking = false;
+            const dir = Math.abs(dx) > SWIPE_THRESHOLD ? (dx > 0 ? 1 : -1) : 0;
+            dx = 0;
+            cb.onend(dir);
+        },
+        ontouchcancel() {
+            // The browser took over the gesture (scroll, edge-swipe, system UI).
+            // Without this, the view stays stuck at the last swipe offset.
+            if (!tracking)
+                return;
+            tracking = false;
+            dx = 0;
+            cb.onend(0);
+        },
+    };
+}