@svar-ui/svelte-calendar 2.6.0

package/dist/components/Render/Sections.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">import { getContext, onMount, tick } from "svelte";
+import { drag } from "../../directives/drag.js";
+import { clickevent } from "../../directives/clickevent.js";
+import { clickdate } from "../../directives/clickdate.js";
+import { Popup } from "@svar-ui/svelte-core";
+import Headers from "./Headers.svelte";
+import SectionContent from "./SectionContent.svelte";
+import { useEventOverlay } from "./useEventOverlay.svelte.js";
+const api = getContext("calendar-api");
+const { _view } = api.getReactiveState();
+const { data, cellCss, eventCss, eventContent, view, tooltip, eventPopup, readonly = false } = $props();
+let ready = $state(false);
+let sectionEls = $state({});
+let contentEls = $state({});
+let sizes = $state({});
+let xHeadersEl = $state();
+let xHeadersHeight = $state(0);
+function measure() {
+	const next = {};
+	let changed = false;
+	for (const section of data) {
+		const sectionEl = sectionEls[section.name];
+		const contentEl = contentEls[section.name];
+		if (sectionEl && contentEl) {
+			const w = contentEl.clientWidth;
+			const h = sectionEl.clientHeight;
+			next[section.name] = {
+				width: w,
+				height: h
+			};
+			const prev = sizes[section.name];
+			if (!prev || prev.width !== w || prev.height !== h) {
+				changed = true;
+			}
+		}
+	}
+	if (changed) sizes = next;
+	const xh = xHeadersEl ? xHeadersEl.clientHeight : 0;
+	if (xh !== xHeadersHeight) xHeadersHeight = xh;
+}
+let ro = null;
+function observeAll() {
+	if (!ro) return;
+	ro.disconnect();
+	for (const section of data) {
+		const el = sectionEls[section.name];
+		if (el) ro.observe(el);
+	}
+	if (xHeadersEl) ro.observe(xHeadersEl);
+}
+onMount(() => {
+	measure();
+	ready = true;
+	ro = new ResizeObserver(() => measure());
+	observeAll();
+	return () => ro?.disconnect();
+});
+$effect(() => {
+	if (!ready || !ro) return;
+	// oxlint-disable-next-line no-unused-expressions
+	data;
+	tick().then(() => {
+		observeAll();
+		measure();
+	});
+});
+function dx(name) {
+	return (sizes[name]?.width ?? 0) / 100;
+}
+function getMinContentHeight(section) {
+	if (!section.yHeaders) return 0;
+	const innerLevel = section.yHeaders[section.yHeaders.length - 1];
+	if (!innerLevel || innerLevel.length === 0) return 0;
+	const first = innerLevel[0];
+	const minUnitHeight = first.ui?.minUnitHeight;
+	return typeof minUnitHeight === "number" ? innerLevel.length * minUnitHeight : 0;
+}
+// Lane height must match BarSection.svelte
+const BAR_LANE_HEIGHT = 28;
+function getBarSectionHeight(section) {
+	if (section.mode !== "bars" || typeof section.size === "number") return 0;
+	let maxLanes = 0;
+	for (const p of section.primitives) {
+		const lanes = p.totalLanes ?? 1;
+		if (lanes > maxLanes) maxLanes = lanes;
+	}
+	return maxLanes * BAR_LANE_HEIGHT;
+}
+function dy(name, section) {
+	const containerHeight = sizes[name]?.height ?? 0;
+	const minHeight = getMinContentHeight(section);
+	const barHeight = getBarSectionHeight(section);
+	return Math.max(containerHeight, minHeight, barHeight) / 100;
+}
+function sectionMinHeight(section) {
+	if (typeof section.size !== "number") {
+		return getBarSectionHeight(section);
+	}
+	return getMinContentHeight(section);
+}
+const visibleSections = $derived(data.filter((s) => s.size !== "content-optional" || s.primitives.length > 0));
+// Sticky prefix: consecutive content-sized sections from the top.
+// The first non-content section ends the prefix; later content sections
+// (if any) scroll normally.
+const stickyCount = $derived.by(() => {
+	let count = 0;
+	for (const s of visibleSections) {
+		const sz = s.size ?? 1;
+		if (sz === "content" || sz === "content-optional") count++;
+		else break;
+	}
+	return count;
+});
+// Cumulative `top` for each sticky section, starting after x-headers.
+const stickyOffsets = $derived.by(() => {
+	const offsets = [];
+	let acc = xHeadersHeight;
+	for (let i = 0; i < stickyCount; i++) {
+		offsets[i] = acc;
+		const name = visibleSections[i].name;
+		acc += sizes[name]?.height ?? 0;
+	}
+	return offsets;
+});
+let gridOverflow = $state(false);
+function onGridOverflow(overflow) {
+	gridOverflow = overflow;
+}
+const hasYHeaders = $derived(visibleSections.some((s) => s.yHeaders !== null && s.yVisible !== false));
+const xHeaders = $derived(visibleSections.find((s) => s.xHeaders !== null && s.xVisible !== false)?.xHeaders ?? null);
+function sectionFlex(section, sticky) {
+	if (sticky) return "0 0 auto";
+	// list and year render as natural DOM flow — size to content,
+	// let the outer container scroll when total exceeds viewport.
+	if (section.mode === "list" || section.mode === "year") return "0 0 auto";
+	return typeof section.size === "number" ? "1" : "0 0 auto";
+}
+const overlay = useEventOverlay((id) => api.getEvent(id), (el) => {
+	const section = visibleSections.find((s) => sectionEls[s.name]?.contains(el));
+	return section?.mode === "boxes" ? "right-start" : "bottom-start";
+});
+// trackScroll exists in Popup but is missing from its .d.ts
+const popupExtra = { trackScroll: true };
+</script>
+
+<div class="wx-sections">
+	{#if xHeaders}
+		<div class="wx-x-headers-row" bind:this={xHeadersEl}>
+			{#if hasYHeaders}
+				<div class="wx-header-corner"></div>
+			{/if}
+			<div class="wx-x-headers-area">
+				<Headers headers={xHeaders} direction="x" />
+			</div>
+		</div>
+	{/if}
+
+	{#each visibleSections as section, idx (section.name)}
+		{@const sticky = idx < stickyCount}
+		{@const secDx = dx(section.name)}
+		{@const secDy = dy(section.name, section)}
+		{@const minH = sectionMinHeight(section)}
+		<div
+			class="wx-section"
+			class:wx-section-last={idx === visibleSections.length - 1}
+			class:wx-section-sticky={sticky}
+			class:wx-section-grid={section.mode === "grid" && gridOverflow}
+			class:wx-has-y-headers={hasYHeaders}
+			style:flex={sectionFlex(section, sticky)}
+			style:min-height={minH > 0 ? `${minH}px` : undefined}
+			style:top={sticky ? `${stickyOffsets[idx] ?? 0}px` : undefined}
+			style:z-index={sticky ? 10 - idx : undefined}
+			bind:this={sectionEls[section.name]}
+		>
+			{#if section.yVisible !== false}
+				<div class="wx-y-headers-area">
+					<Headers headers={section.yHeaders} direction="y" />
+				</div>
+			{:else if hasYHeaders}
+				<div class="wx-header-spacer"></div>
+			{/if}
+
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="wx-section-content"
+				bind:this={contentEls[section.name]}
+				use:drag={{
+					mode: section.mode,
+					dx: secDx,
+					dy: secDy,
+					xHeaders: section.xHeaders,
+					yHeaders: section.yHeaders,
+					sectionName: section.name,
+					model: $_view,
+					exec: api.exec,
+					getEvent: id => api.getEvent(id),
+					move: !readonly && !!section.ui?.drag,
+					clipDrag: section.ui?.clipDrag !== false,
+					create: !readonly && !!section.ui?.dragCreate,
+				}}
+				use:clickevent={{
+					exec: api.exec,
+					getEvent: id => api.getEvent(id),
+					onEventPopup: eventPopup ? overlay.handleEventPopup : undefined,
+				}}
+				use:clickdate={{ exec: api.exec }}
+				onmousemove={tooltip ? overlay.handleTooltipMove : undefined}
+				onmouseleave={tooltip ? overlay.handleTooltipLeave : undefined}
+			>
+				{#if section.ui?.dragCreate}
+					<div class="wx-drag-stub" data-drag-stub aria-hidden="true"></div>
+				{/if}
+				<SectionContent
+					{section}
+					dx={secDx}
+					dy={secDy}
+					scrollHeight={null}
+					measured={ready && !!sizes[section.name]}
+					{cellCss}
+					{eventCss}
+					{eventContent}
+					{view}
+					{tooltip}
+					onoverflow={section.mode === "grid" ? onGridOverflow : undefined}
+				/>
+			</div>
+		</div>
+	{/each}
+
+	{#if overlay.tooltipState && tooltip}
+		{@const TooltipCmp = tooltip}
+		<div
+			class="wx-calendar-tooltip"
+			style="position:fixed;left:{overlay.mousePos.x + 12}px;top:{overlay.mousePos.y + 16}px;z-index:10000;pointer-events:none"
+			aria-hidden="true"
+		>
+			<TooltipCmp event={overlay.tooltipState.event} />
+		</div>
+	{/if}
+
+	{#if overlay.eventPopupState && eventPopup}
+		{@const EventPopupCmp = eventPopup}
+		<Popup
+			at={overlay.eventPopupState.at}
+			parent={overlay.eventPopupState.element}
+			oncancel={overlay.hideEventPopup}
+			{...popupExtra}
+		>
+			<EventPopupCmp
+				event={overlay.eventPopupState.event}
+				close={overlay.hideEventPopup}
+			/>
+		</Popup>
+	{/if}
+</div>
+
+<style>
+	.wx-sections {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.wx-x-headers-row {
+		display: flex;
+		flex-shrink: 0;
+		position: sticky;
+		top: 0;
+		z-index: 11;
+		background: var(--wx-background);
+	}
+	.wx-header-corner {
+		width: var(--wx-calendar-y-scale-width, 60px);
+		flex-shrink: 0;
+		border-right: var(--wx-border);
+		border-bottom: var(--wx-border);
+	}
+	.wx-x-headers-area {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.wx-section {
+		display: grid;
+		grid-template-columns: 1fr;
+		overflow: hidden;
+		border-bottom: var(--wx-border);
+	}
+	.wx-section-last {
+		border-bottom: none;
+	}
+	.wx-section.wx-has-y-headers {
+		grid-template-columns: auto 1fr;
+	}
+	.wx-section-sticky {
+		position: sticky;
+		background: var(--wx-background);
+	}
+	.wx-section-grid {
+		overflow: visible;
+		min-height: 0;
+	}
+
+	.wx-y-headers-area {
+		align-self: stretch;
+	}
+	.wx-header-spacer {
+		width: var(--wx-calendar-y-scale-width, 60px);
+		border-right: var(--wx-border);
+	}
+
+	.wx-section-content {
+		min-width: 0;
+		position: relative;
+	}
+
+	.wx-sections :global(.wx-dragging),
+	.wx-sections :global(.wx-resizing) {
+		box-shadow: var(--wx-shadow-light) !important;
+		transition: none !important;
+		z-index: 100 !important;
+		pointer-events: none;
+	}
+	.wx-sections :global(.wx-dragging) {
+		cursor: grabbing !important;
+	}
+
+	:global(.wx-drag-stub) {
+		display: none;
+		position: absolute;
+		background: var(--wx-color-primary);
+		opacity: 0.3;
+		border-radius: var(--wx-border-radius);
+		pointer-events: none;
+		z-index: 50;
+	}
+</style>

package/dist/components/Render/Sections.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SectionResult, CellCss, EventCss } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    data: SectionResult[];
+    cellCss?: CellCss;
+    eventCss?: EventCss;
+    eventContent?: any;
+    view: string;
+    tooltip?: any;
+    eventPopup?: any;
+    readonly?: boolean;
+};
+declare const Sections: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sections = ReturnType<typeof Sections>;
+export default Sections;

package/dist/components/Render/YearSection.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">import { getContext } from "svelte";
+import { Popup } from "@svar-ui/svelte-core";
+const _ = getContext("wx-i18n").getGroup("eventCalendar");
+const { section, tooltip: TooltipCmp, eventContent } = $props();
+const columns = $derived(section.ui?.columns ?? 3);
+const weekStartDay = $derived(section.ui?.weekStartDay ?? 1);
+const months = $derived(section.ui?.months ?? []);
+const weekdayBase = [
+	"S",
+	"M",
+	"T",
+	"W",
+	"T",
+	"F",
+	"S"
+];
+const weekdays = $derived.by(() => {
+	const shift = (weekStartDay % 7 + 7) % 7;
+	const ordered = [];
+	for (let i = 0; i < 7; i++) {
+		const dow = (i + shift) % 7;
+		ordered.push({
+			label: weekdayBase[dow],
+			weekend: dow === 0 || dow === 6
+		});
+	}
+	return ordered;
+});
+function dateStr(year, month, day) {
+	return `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+function getDays(month) {
+	const days = [];
+	for (let i = 0; i < month.startOffset; i++) {
+		days.push({
+			day: 0,
+			empty: true,
+			today: false,
+			weekend: false,
+			hasEvents: false,
+			events: []
+		});
+	}
+	for (let d = 1; d <= month.totalDays; d++) {
+		const events = month.markedDays[d] || [];
+		const dow = new Date(month.year, month.month, d).getDay();
+		days.push({
+			day: d,
+			empty: false,
+			today: month.today === d,
+			weekend: dow === 0 || dow === 6,
+			hasEvents: events.length > 0,
+			events
+		});
+	}
+	return days;
+}
+let tooltipData = $state(null);
+function showTooltip(e, events) {
+	tooltipData = {
+		element: e.currentTarget,
+		events
+	};
+}
+function hideTooltip() {
+	tooltipData = null;
+}
+function formatTime(date) {
+	return date.toLocaleTimeString(undefined, {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function formatRange(event) {
+	const { start, end } = event;
+	if (event.allDay || start.getFullYear() !== end.getFullYear() || start.getMonth() !== end.getMonth() || start.getDate() !== end.getDate()) {
+		return _("Full day");
+	}
+	return `${formatTime(start)} – ${formatTime(end)}`;
+}
+function eventTitle(event) {
+	return event.text || "";
+}
+</script>
+
+<div
+	class="wx-year-grid"
+	style="grid-template-columns: repeat({columns}, 1fr)"
+>
+	{#each months as month (month.month)}
+		<div class="wx-year-month">
+			<div class="wx-month-label">{month.label}</div>
+			<div class="wx-month-grid">
+				{#each weekdays as wd}
+					<div class="wx-weekday-header" class:wx-weekend={wd.weekend}>
+						{wd.label}
+					</div>
+				{/each}
+				{#each getDays(month) as day}
+					{#if day.empty}
+						<div class="wx-month-day wx-empty"></div>
+					{:else}
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="wx-month-day"
+							class:wx-today={day.today}
+							class:wx-weekend={day.weekend}
+							class:wx-has-events={day.hasEvents}
+							data-date={dateStr(month.year, month.month, day.day)}
+							aria-current={day.today ? "date" : undefined}
+							onmouseenter={day.hasEvents
+								? e => showTooltip(e, day.events)
+								: undefined}
+							onmouseleave={day.hasEvents
+								? hideTooltip
+								: undefined}
+						>
+							<span class="wx-day-num">{day.day}</span>
+							{#if day.hasEvents}
+								<span class="wx-event-dot" aria-hidden="true"></span>
+							{/if}
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	{/each}
+</div>
+
+{#if tooltipData}
+	<Popup
+		parent={tooltipData.element}
+		at="bottom-start"
+		oncancel={hideTooltip}
+	>
+		<div
+			class="wx-year-tooltip"
+			class:wx-year-tooltip-custom={!!TooltipCmp}
+		>
+			{#if TooltipCmp}
+				<TooltipCmp events={tooltipData.events} />
+			{:else}
+				{#each tooltipData.events as ev}
+					<div class="wx-tooltip-event">
+						{#if eventContent}
+							{@const EventContentCmp = eventContent}
+							<div class="wx-tooltip-event-content">
+								<EventContentCmp event={ev} mode="year-tooltip" />
+							</div>
+						{:else}
+							<span class="wx-tooltip-time">
+								{formatRange(ev)}
+							</span>
+							<span class="wx-tooltip-title">{eventTitle(ev)}</span>
+						{/if}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	</Popup>
+{/if}
+
+<style>
+	.wx-year-grid {
+		display: grid;
+		gap: 16px;
+		padding: 16px;
+		position: relative;
+	}
+	.wx-month-label {
+		font-weight: var(--wx-font-weight-md);
+		margin-bottom: 4px;
+		padding-left: 20px;
+	}
+	.wx-month-grid {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: 1px;
+	}
+	.wx-weekday-header {
+		text-align: center;
+		font-size: 10px;
+		color: var(--wx-color-font-alt);
+		padding: 2px 0;
+	}
+	.wx-month-day {
+		text-align: center;
+		padding: 2px;
+		position: relative;
+		min-height: 24px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		cursor: default;
+		color: var(--wx-color-font-alt);
+	}
+	.wx-month-day.wx-weekend,
+	.wx-weekday-header.wx-weekend {
+		background-color: var(--wx-calendar-weekend-background);
+	}
+	.wx-month-day.wx-has-events {
+		cursor: pointer;
+		color: var(--wx-color-font);
+	}
+	.wx-day-num {
+		font-size: 13px;
+	}
+	.wx-month-day.wx-today .wx-day-num {
+		background: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+		border-radius: 50%;
+		width: 20px;
+		height: 20px;
+		line-height: 20px;
+		display: inline-block;
+	}
+	.wx-event-dot {
+		display: block;
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+		background: var(--wx-color-primary);
+		margin-top: 1px;
+	}
+	.wx-year-tooltip {
+		background: var(--wx-background);
+		border: var(--wx-border);
+		border-radius: var(--wx-border-radius);
+		padding: 8px 12px;
+		box-shadow: var(--wx-shadow-light);
+		min-width: 150px;
+		max-width: 300px;
+	}
+	.wx-year-tooltip-custom {
+		padding: 0;
+		border: none;
+		background: none;
+		box-shadow: none;
+		min-width: 0;
+		max-width: none;
+	}
+	.wx-tooltip-event {
+		display: flex;
+		align-items: center;
+		padding: 2px 0;
+		font-size: var(--wx-font-size-sm);
+	}
+	.wx-tooltip-event + .wx-tooltip-event {
+		border-top: var(--wx-border);
+		padding-top: 4px;
+		margin-top: 2px;
+	}
+	.wx-tooltip-time {
+		flex-shrink: 0;
+		color: var(--wx-color-font-alt);
+		margin-right: 8px;
+	}
+	.wx-tooltip-title {
+		color: var(--wx-color-font);
+	}
+	.wx-tooltip-event-content {
+		flex: 1;
+		min-width: 0;
+	}
+</style>

package/dist/components/Render/YearSection.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SectionResult } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    section: SectionResult;
+    tooltip?: any;
+    eventContent?: any;
+};
+declare const YearSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type YearSection = ReturnType<typeof YearSection>;
+export default YearSection;

package/dist/components/Render/useEventOverlay.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { EventPopupInfo } from "../../directives/clickevent.js";
+import type { TPosition } from "@svar-ui/lib-dom";
+import type { EventID } from "@svar-ui/calendar-store";
+export declare function useEventOverlay(getEvent: (id: EventID) => any, getEventPopupAt: (element: HTMLElement) => TPosition): {
+    readonly tooltipState: {
+        event: any;
+    } | null;
+    readonly mousePos: {
+        x: number;
+        y: number;
+    };
+    readonly eventPopupState: {
+        event: any;
+        element: HTMLElement;
+        at: TPosition;
+    } | null;
+    handleTooltipMove: (e: MouseEvent) => void;
+    handleTooltipLeave: () => void;
+    handleEventPopup: (info: EventPopupInfo | null) => void;
+    hideEventPopup: () => void;
+};

package/dist/components/Render/useEventOverlay.svelte.js

@@ -0,0 +1,60 @@
+import { getID, locate } from "@svar-ui/lib-dom";
+export function useEventOverlay(getEvent, getEventPopupAt) {
+    let _tooltipTarget = null;
+    let tooltipState = $state(null);
+    let mousePos = $state({ x: 0, y: 0 });
+    let eventPopupState = $state(null);
+    function handleTooltipMove(e) {
+        mousePos = { x: e.clientX, y: e.clientY };
+        if (eventPopupState || !e.target)
+            return;
+        const el = locate(e.target) ?? null;
+        if (el === _tooltipTarget)
+            return;
+        _tooltipTarget = el;
+        if (!el) {
+            tooltipState = null;
+            return;
+        }
+        const ev = getEvent(getID(el));
+        tooltipState = ev ? { event: ev } : null;
+    }
+    function handleTooltipLeave() {
+        _tooltipTarget = null;
+        tooltipState = null;
+    }
+    function handleEventPopup(info) {
+        tooltipState = null;
+        _tooltipTarget = null;
+        if (!info) {
+            eventPopupState = null;
+            return;
+        }
+        const ev = getEvent(info.eventId);
+        if (ev) {
+            eventPopupState = {
+                event: ev,
+                element: info.element,
+                at: getEventPopupAt(info.element),
+            };
+        }
+    }
+    function hideEventPopup() {
+        eventPopupState = null;
+    }
+    return {
+        get tooltipState() {
+            return tooltipState;
+        },
+        get mousePos() {
+            return mousePos;
+        },
+        get eventPopupState() {
+            return eventPopupState;
+        },
+        handleTooltipMove,
+        handleTooltipLeave,
+        handleEventPopup,
+        hideEventPopup,
+    };
+}