@svar-ui/svelte-calendar 2.6.0

package/dist/components/Render/ListSection.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">import { getContext } from "svelte";
+import { setID } from "@svar-ui/lib-dom";
+const { primitives, eventContent } = $props();
+const api = getContext("calendar-api");
+const _ = getContext("wx-i18n").getGroup("eventCalendar");
+const fmtDate = api.fmt("agendaDayFormat");
+const fmtTime = api.fmt("timeScaleFormat");
+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 `${fmtTime(start)} – ${fmtTime(end)}`;
+}
+const groups = $derived.by(() => {
+	const map = new Map();
+	for (const p of primitives) {
+		const d = p.event.start;
+		const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+		let group = map.get(key);
+		if (!group) {
+			const date = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+			group = {
+				date,
+				label: fmtDate(date),
+				events: []
+			};
+			map.set(key, group);
+		}
+		group.events.push(p);
+	}
+	return Array.from(map.values());
+});
+</script>
+
+<div class="wx-list-section">
+	{#each groups as group (group.date.getTime())}
+		<div class="wx-list-day">
+			<div class="wx-list-date">{group.label}</div>
+			<div class="wx-list-events">
+				{#each group.events as p (p.id)}
+					<div
+						class="wx-list-event"
+						data-id={setID(p.id)}
+					>
+						{#if eventContent}
+							{@const EventContentCmp = eventContent}
+							<div class="wx-list-event-content">
+								<EventContentCmp event={p.event} mode="list" />
+							</div>
+						{:else}
+							<span class="wx-event-time">
+								{formatRange(p.event)}
+							</span>
+							<span class="wx-event-title">
+								{p.event.text || ""}
+							</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/each}
+	{#if groups.length === 0}
+		<div class="wx-list-empty" role="status">No events this month</div>
+	{/if}
+</div>
+
+<style>
+	.wx-list-section {
+		padding: 8px 0;
+	}
+	.wx-list-day {
+		margin-bottom: 4px;
+	}
+	.wx-list-date {
+		padding: 8px 16px;
+		font-weight: var(--wx-font-weight-md);
+		border-bottom: var(--wx-border);
+		background: var(--wx-background-alt);
+	}
+	.wx-list-event {
+		display: flex;
+		align-items: center;
+		padding: 8px 16px 8px 32px;
+		border-bottom: var(--wx-border);
+		cursor: pointer;
+	}
+	.wx-list-event:hover {
+		background-color: var(--wx-background-hover);
+	}
+	.wx-event-time {
+		flex-shrink: 0;
+		width: 130px;
+		font-size: 13px;
+		color: var(--wx-color-font-alt);
+	}
+	.wx-event-title {
+		font-size: var(--wx-font-size);
+	}
+	.wx-list-event-content {
+		flex: 1;
+		min-width: 0;
+	}
+	.wx-list-empty {
+		padding: 32px 16px;
+		text-align: center;
+		color: var(--wx-color-font-alt);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Primitive } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    primitives: Primitive[];
+    eventContent?: any;
+};
+declare const ListSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListSection = ReturnType<typeof ListSection>;
+export default ListSection;

package/dist/components/Render/NowLine.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import { onMount } from "svelte";
+const { yHeaders, dy } = $props();
+let now = $state(new Date());
+onMount(() => {
+	const id = setInterval(() => {
+		now = new Date();
+	}, 6e4);
+	return () => clearInterval(id);
+});
+const position = $derived.by(() => {
+	if (!yHeaders) return null;
+	const inner = yHeaders[yHeaders.length - 1];
+	if (!inner?.length) return null;
+	const first = inner[0]?.ui?.date;
+	const last = inner[inner.length - 1]?.ui?.date;
+	if (!first || !last) return null;
+	const rangeStart = first.getTime();
+	// range end = last unit position + last unit size worth of time
+	const unitMs = (last.getTime() - first.getTime()) / (inner.length - 1 || 1);
+	const rangeEnd = last.getTime() + unitMs;
+	const nowMs = now.getTime();
+	if (nowMs < rangeStart || nowMs > rangeEnd) return null;
+	// same math as LinearScale.eventToPosition
+	const pos = (nowMs - rangeStart) / (rangeEnd - rangeStart) * 100;
+	return pos;
+});
+</script>
+
+{#if position !== null}
+	<div
+		class="wx-now-line"
+		style="top:{dy * position}px"
+		aria-hidden="true"
+	>
+		<div class="wx-now-dot"></div>
+	</div>
+{/if}
+
+<style>
+	.wx-now-line {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 0;
+		z-index: 3;
+		pointer-events: none;
+	}
+	.wx-now-line::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 2px;
+		background: var(--wx-color-danger);
+		transform: translateY(-50%);
+	}
+	.wx-now-dot {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--wx-color-danger);
+		transform: translate(-50%, -50%);
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { ScaleUnit } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    yHeaders: ScaleUnit[][] | null;
+    dy: number;
+};
+declare const NowLine: import("svelte").Component<$$ComponentProps, {}, "">;
+type NowLine = ReturnType<typeof NowLine>;
+export default NowLine;

package/dist/components/Render/ScrollableSection.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">import { getContext, onMount } 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();
+const section = $derived(data[0]);
+const xHeaders = $derived(section?.xHeaders ?? null);
+const yHeaders = $derived(section?.yHeaders ?? null);
+const showXHeaders = $derived(xHeaders !== null && section?.xVisible !== false);
+const showYHeaders = $derived(yHeaders !== null && section?.yVisible !== false);
+// oxlint-disable-next-line no-unused-vars no-unassigned-vars
+let contentEl;
+let contentWidth = $state(0);
+let contentHeight = $state(0);
+let ready = $state(false);
+function measure() {
+	if (contentEl) {
+		const rect = contentEl.getBoundingClientRect();
+		const w = Math.round(rect.width * 1e3) / 1e3;
+		const h = Math.round(rect.height * 1e3) / 1e3;
+		if (w !== contentWidth || h !== contentHeight) {
+			contentWidth = w;
+			contentHeight = h;
+		}
+	}
+}
+onMount(() => {
+	measure();
+	ready = true;
+	const ro = new ResizeObserver(() => measure());
+	ro.observe(contentEl);
+	return () => ro.disconnect();
+});
+const dx = $derived(contentWidth / 100);
+const dy = $derived(contentHeight / 100);
+function getMinContentWidth() {
+	if (!xHeaders) return 0;
+	const inner = xHeaders[xHeaders.length - 1];
+	if (!inner?.length) return 0;
+	const v = inner[0].ui?.minUnitWidth;
+	return typeof v === "number" ? inner.length * v : 0;
+}
+function getMinContentHeight() {
+	if (!yHeaders) return 0;
+	const inner = yHeaders[yHeaders.length - 1];
+	if (!inner?.length) return 0;
+	const v = inner[0].ui?.minUnitHeight;
+	return typeof v === "number" ? inner.length * v : 0;
+}
+const minW = $derived(getMinContentWidth());
+const minH = $derived(getMinContentHeight());
+const overlay = useEventOverlay((id) => api.getEvent(id), () => 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-scrollable-section">
+	<div
+		class="wx-scroll-grid"
+		class:wx-has-x-headers={showXHeaders}
+		class:wx-has-y-headers={showYHeaders}
+	>
+		{#if showXHeaders && showYHeaders}
+			<div class="wx-corner"></div>
+		{/if}
+		{#if showXHeaders}
+			<div class="wx-x-headers-sticky">
+				<Headers headers={xHeaders} direction="x" />
+			</div>
+		{/if}
+		{#if showYHeaders}
+			<div class="wx-y-headers-sticky">
+				<Headers headers={yHeaders} direction="y" />
+			</div>
+		{/if}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="wx-content"
+			style:min-width={minW > 0 ? `${minW}px` : undefined}
+			style:min-height={minH > 0 ? `${minH}px` : undefined}
+			bind:this={contentEl}
+			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}
+			use:drag={{
+				mode: section?.mode ?? "boxes",
+				dx,
+				dy,
+				xHeaders,
+				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,
+			}}
+		>
+			{#if section?.ui?.dragCreate}
+				<div class="wx-drag-stub" data-drag-stub aria-hidden="true"></div>
+			{/if}
+			{#if section}
+				<SectionContent
+					{section}
+					{dx}
+					{dy}
+					scrollHeight={null}
+					measured={ready && contentWidth > 0 && contentHeight > 0}
+					{cellCss}
+					{eventCss}
+					{eventContent}
+					{view}
+					{tooltip}
+				/>
+			{/if}
+		</div>
+	</div>
+
+	{#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-scrollable-section {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+	}
+
+	.wx-scroll-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+		min-height: 100%;
+	}
+	.wx-scroll-grid.wx-has-y-headers {
+		grid-template-columns: auto 1fr;
+	}
+	.wx-scroll-grid.wx-has-x-headers {
+		grid-template-rows: auto 1fr;
+	}
+
+	.wx-corner {
+		position: sticky;
+		top: 0;
+		left: 0;
+		z-index: 3;
+		background: var(--wx-background);
+		width: var(--wx-calendar-y-scale-width, 60px);
+		border-right: var(--wx-border);
+		border-bottom: var(--wx-border);
+	}
+
+	.wx-x-headers-sticky {
+		position: sticky;
+		top: 0;
+		z-index: 2;
+		background: var(--wx-background);
+	}
+
+	.wx-y-headers-sticky {
+		position: sticky;
+		left: 0;
+		z-index: 1;
+		background: var(--wx-background);
+	}
+
+	.wx-content {
+		position: relative;
+		z-index: 0;
+	}
+</style>

package/dist/components/Render/ScrollableSection.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 ScrollableSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScrollableSection = ReturnType<typeof ScrollableSection>;
+export default ScrollableSection;

package/dist/components/Render/SectionContent.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">import BoxSection from "./BoxSection.svelte";
+import BarSection from "./BarSection.svelte";
+import GridSection from "./GridSection.svelte";
+import ListSection from "./ListSection.svelte";
+import YearSection from "./YearSection.svelte";
+import Grid from "./Grid.svelte";
+import NowLine from "./NowLine.svelte";
+const { section, dx, dy, scrollHeight, measured, cellCss, eventCss, eventContent, view, tooltip, onoverflow } = $props();
+</script>
+
+{#if section.mode === "list"}
+	<ListSection primitives={section.primitives} {eventContent} />
+{:else if section.mode === "year"}
+	<YearSection {section} {tooltip} {eventContent} />
+{:else if measured}
+	{#snippet gridContent()}
+		{#if section.mode === "grid" && section.cells}
+			<GridSection
+				primitives={section.primitives}
+				cells={section.cells}
+				{dx}
+				{dy}
+				{cellCss}
+				{eventCss}
+				{eventContent}
+				{view}
+				section={section.name}
+				{onoverflow}
+			/>
+		{:else}
+			<Grid
+				xHeaders={section.xHeaders}
+				yHeaders={section.yHeaders}
+				{dx}
+				{dy}
+				{cellCss}
+				{view}
+				section={section.name}
+				mode={section.mode}
+			/>
+			{#if section.mode === "boxes"}
+				<BoxSection
+					primitives={section.primitives}
+					{dx}
+					{dy}
+					layoutMode={section.ui?.boxLayout ?? "split"}
+					{eventCss}
+					{eventContent}
+					{view}
+					section={section.name}
+				/>
+			{:else}
+				<BarSection
+					primitives={section.primitives}
+					{dx}
+					{dy}
+					{eventCss}
+					{eventContent}
+					{view}
+					section={section.name}
+				/>
+			{/if}
+			{#if section.ui?.nowLine}
+				<NowLine yHeaders={section.yHeaders} {dy} />
+			{/if}
+		{/if}
+	{/snippet}
+
+	{#if scrollHeight !== null}
+		<div class="wx-scroll-inner" style="height:{scrollHeight}px">
+			{@render gridContent()}
+		</div>
+	{:else}
+		{@render gridContent()}
+	{/if}
+{/if}
+
+<style>
+	.wx-scroll-inner {
+		position: relative;
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { SectionResult, CellCss, EventCss } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    section: SectionResult;
+    dx: number;
+    dy: number;
+    scrollHeight: number | null;
+    measured: boolean;
+    cellCss?: CellCss;
+    eventCss?: EventCss;
+    eventContent?: any;
+    view: string;
+    tooltip?: any;
+    onoverflow?: (overflow: boolean) => void;
+};
+declare const SectionContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type SectionContent = ReturnType<typeof SectionContent>;
+export default SectionContent;