@svar-ui/svelte-calendar 2.6.0

package/dist/components/Render/GridCells.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">const { xHeaders, yHeaders, dx, dy, cellCss, view, section, mode } = $props();
+function getDate(unit) {
+	return unit?.ui?.date instanceof Date ? unit.ui.date : null;
+}
+function combineDates(dateUnit, timeUnit) {
+	const d = new Date(dateUnit);
+	d.setHours(timeUnit.getHours(), timeUnit.getMinutes(), timeUnit.getSeconds(), 0);
+	return d;
+}
+function resolveDate(x, y) {
+	const xd = getDate(x);
+	const yd = getDate(y);
+	if (xd && yd) return combineDates(xd, yd);
+	return xd ?? yd;
+}
+const cells = $derived.by(() => {
+	const xUnits = xHeaders ? xHeaders[xHeaders.length - 1] : null;
+	const yUnits = yHeaders ? yHeaders[yHeaders.length - 1] : null;
+	const result = [];
+	const computeCss = cellCss ? (x, y) => cellCss({
+		view,
+		section,
+		mode,
+		x,
+		y,
+		date: resolveDate(x, y)
+	}) : () => "";
+	if (xUnits && yUnits) {
+		for (const xUnit of xUnits) {
+			for (const yUnit of yUnits) {
+				result.push({
+					x: xUnit.position,
+					y: yUnit.position,
+					width: xUnit.size,
+					height: yUnit.size,
+					css: computeCss(xUnit, yUnit),
+					weekend: !!(xUnit.weekend || yUnit.weekend)
+				});
+			}
+		}
+	} else if (xUnits) {
+		for (const xUnit of xUnits) {
+			result.push({
+				x: xUnit.position,
+				y: 0,
+				width: xUnit.size,
+				height: 100,
+				css: computeCss(xUnit, null),
+				weekend: !!xUnit.weekend
+			});
+		}
+	} else if (yUnits) {
+		for (const yUnit of yUnits) {
+			result.push({
+				x: 0,
+				y: yUnit.position,
+				width: 100,
+				height: yUnit.size,
+				css: computeCss(null, yUnit),
+				weekend: !!yUnit.weekend
+			});
+		}
+	}
+	return result;
+});
+function cellStyle(c) {
+	return `left:${dx * c.x}px;top:${dy * c.y}px;width:${dx * c.width}px;height:${dy * c.height}px`;
+}
+export {};
+</script>
+
+<div class="wx-grid" aria-hidden="true">
+	{#each cells as c}
+		<div
+			class="wx-grid-cell {c.css}"
+			class:wx-weekend={c.weekend}
+			style={cellStyle(c)}
+		></div>
+	{/each}
+</div>
+
+<style>
+	.wx-grid {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: 0;
+	}
+	.wx-grid-cell {
+		position: absolute;
+		box-sizing: border-box;
+		border-right: var(--wx-border);
+		border-bottom: var(--wx-border);
+	}
+	.wx-grid-cell.wx-weekend {
+		background-color: var(--wx-calendar-weekend-background);
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { CellCss, ScaleUnit, SectionMode } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    xHeaders: ScaleUnit[][] | null;
+    yHeaders: ScaleUnit[][] | null;
+    dx: number;
+    dy: number;
+    cellCss?: CellCss;
+    view: string;
+    section: string;
+    mode: SectionMode;
+};
+declare const GridCells: import("svelte").Component<$$ComponentProps, {}, "">;
+type GridCells = ReturnType<typeof GridCells>;
+export default GridCells;

package/dist/components/Render/GridLines.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">const { xHeaders, yHeaders, dx, dy } = $props();
+export {};
+</script>
+
+<div class="wx-grid" aria-hidden="true">
+	{#if xHeaders}
+		{#each xHeaders[xHeaders.length - 1].slice(0, -1) as unit}
+			<div
+				class="wx-grid-line wx-vertical"
+				style="left: {dx * (unit.position + unit.size)}px"
+			></div>
+		{/each}
+	{/if}
+	{#if yHeaders}
+		{#each yHeaders[yHeaders.length - 1].slice(0, -1) as unit}
+			<div
+				class="wx-grid-line wx-horizontal"
+				style="top: {dy * (unit.position + unit.size)}px"
+			></div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.wx-grid {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		z-index: 0;
+	}
+	.wx-grid-line {
+		position: absolute;
+		background-color: var(--wx-calendar-grid-color);
+	}
+	.wx-grid-line.wx-vertical {
+		top: 0;
+		width: 1px;
+		height: 100%;
+	}
+	.wx-grid-line.wx-horizontal {
+		left: 0;
+		height: 1px;
+		width: 100%;
+	}
+</style>

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

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

package/dist/components/Render/GridSection.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">import { setID } from "@svar-ui/lib-dom";
+const { primitives, cells, dx, dy, cellCss, eventCss, eventContent, view, section, onoverflow } = $props();
+const laneHeight = 22;
+const gap = 2;
+const fullLaneHeight = laneHeight + gap * 2;
+const dayLabelHeight = 20;
+const moreLabelHeight = 18;
+// Track which rows (by y position) are expanded
+let expandedRows = $state(new Set());
+// Compute per-row: max visible lanes and extra offset for expanded rows
+const rowLayout = $derived.by(() => {
+	// Collect per-row max lane counts
+	const rowInfo = new Map();
+	for (const p of primitives) {
+		const existing = rowInfo.get(p.y);
+		const lanes = p.totalLanes ?? 1;
+		if (!existing || lanes > existing.totalLanes) {
+			rowInfo.set(p.y, {
+				totalLanes: lanes,
+				height: p.height
+			});
+		}
+	}
+	const layout = new Map();
+	for (const [y, info] of rowInfo) {
+		const groupHeight = dy * info.height - dayLabelHeight;
+		// Only reserve space for "+more" label if lanes don't all fit
+		const allFit = Math.floor(groupHeight / fullLaneHeight) >= info.totalLanes;
+		const maxVisible = allFit ? info.totalLanes : Math.max(0, Math.floor((groupHeight - moreLabelHeight) / fullLaneHeight));
+		const isExpanded = expandedRows.has(y);
+		let extraHeight = 0;
+		if (isExpanded && info.totalLanes > maxVisible) {
+			// Extra pixels needed beyond the normal row height
+			const neededHeight = dayLabelHeight + info.totalLanes * fullLaneHeight;
+			const normalHeight = dy * info.height;
+			extraHeight = Math.max(0, neededHeight - normalHeight);
+		}
+		layout.set(y, {
+			maxVisible,
+			expanded: isExpanded,
+			extraHeight
+		});
+	}
+	return layout;
+});
+// Cumulative extra offset per row — sorted by y position
+const rowExtraOffsets = $derived.by(() => {
+	const offsets = new Map();
+	const sorted = [...rowLayout.entries()].sort((a, b) => a[0] - b[0]);
+	let cumulative = 0;
+	for (const [y, info] of sorted) {
+		offsets.set(y, cumulative);
+		cumulative += info.extraHeight;
+	}
+	return {
+		offsets,
+		totalExtra: cumulative
+	};
+});
+function getRowOffset(y) {
+	return rowExtraOffsets.offsets.get(y) ?? 0;
+}
+// Total height — only set when rows are expanded to avoid sub-pixel overflow
+const totalExtra = $derived(rowExtraOffsets.totalExtra);
+const totalHeight = $derived(totalExtra > 0 ? dy * 100 + totalExtra : null);
+const hasOverflow = $derived(totalExtra > 0);
+$effect(() => {
+	onoverflow?.(hasOverflow);
+});
+// Partition primitives into visible and hidden-by-row in one pass
+const { visiblePrimitives, hiddenByRow } = $derived.by(() => {
+	const visible = [];
+	const hidden = new Map();
+	for (const p of primitives) {
+		const info = rowLayout.get(p.y);
+		if (!info || info.expanded || (p.lane ?? 0) < info.maxVisible) {
+			visible.push(p);
+		} else {
+			let arr = hidden.get(p.y);
+			if (!arr) {
+				arr = [];
+				hidden.set(p.y, arr);
+			}
+			arr.push(p);
+		}
+	}
+	return {
+		visiblePrimitives: visible,
+		hiddenByRow: hidden
+	};
+});
+// Per-cell "+N more" indicators
+const moreIndicators = $derived.by(() => {
+	const indicators = [];
+	for (const cell of cells) {
+		const hidden = hiddenByRow.get(cell.y);
+		if (!hidden) continue;
+		let count = 0;
+		for (const p of hidden) {
+			if (p.x < cell.x + cell.width && p.x + p.width > cell.x) {
+				count++;
+			}
+		}
+		if (count > 0) {
+			indicators.push({
+				rowY: cell.y,
+				cellX: cell.x,
+				cellWidth: cell.width,
+				count
+			});
+		}
+	}
+	return indicators;
+});
+function barStyle(p) {
+	const left = dx * p.x + gap;
+	const width = dx * p.width - gap * 2;
+	const lane = p.lane ?? 0;
+	const groupTop = dy * p.y + dayLabelHeight + getRowOffset(p.y);
+	const top = groupTop + lane * fullLaneHeight + gap;
+	const height = laneHeight;
+	return `left:${left}px;top:${top}px;width:${width}px;height:${height}px`;
+}
+function formatTime(date) {
+	const h = date.getHours();
+	const m = date.getMinutes();
+	if (m === 0) return `${h % 12 || 12}${h < 12 ? "am" : "pm"}`;
+	return `${h % 12 || 12}:${String(m).padStart(2, "0")}${h < 12 ? "am" : "pm"}`;
+}
+function eventLabel(p) {
+	return p.event.text || " ";
+}
+function eventTime(p) {
+	if (p.isMultiDay === false) {
+		return `${formatTime(p.event.start)} `;
+	}
+	return "";
+}
+function dateStr(date) {
+	const y = date.getFullYear();
+	const m = String(date.getMonth() + 1).padStart(2, "0");
+	const d = String(date.getDate()).padStart(2, "0");
+	return `${y}-${m}-${d}`;
+}
+function css(p) {
+	const base = p.event.css || "";
+	const dynamic = eventCss ? eventCss({
+		event: p.event,
+		view,
+		section,
+		mode: "grid"
+	}) : "";
+	return base + (dynamic ? " " + dynamic : "");
+}
+function cellStyle(cell) {
+	const offset = getRowOffset(cell.y);
+	const info = rowLayout.get(cell.y);
+	const extra = info?.extraHeight ?? 0;
+	const left = dx * cell.x;
+	const top = dy * cell.y + offset;
+	const width = dx * cell.width;
+	const height = dy * cell.height + extra;
+	return `left:${left}px;top:${top}px;width:${width}px;height:${height}px`;
+}
+function moreStyle(indicator) {
+	const offset = getRowOffset(indicator.rowY);
+	const info = rowLayout.get(indicator.rowY);
+	const top = dy * indicator.rowY + dayLabelHeight + offset + info.maxVisible * fullLaneHeight;
+	const left = dx * indicator.cellX;
+	const width = dx * indicator.cellWidth;
+	return `left:${left}px;top:${top}px;width:${width}px;height:${moreLabelHeight}px`;
+}
+function toggleRow(y) {
+	const next = new Set(expandedRows);
+	if (next.has(y)) {
+		next.delete(y);
+	} else {
+		next.add(y);
+	}
+	expandedRows = next;
+}
+</script>
+
+<div
+	class="wx-grid-section"
+	style:height={totalHeight !== null ? `${totalHeight}px` : undefined}
+>
+	{#each cells as cell}
+		<div
+			class="wx-grid-cell {cellCss
+				? cellCss({
+						view,
+						section,
+						mode: 'grid',
+						x: null,
+						y: null,
+						date: cell.date,
+					})
+				: ''}"
+			class:wx-weekend={cell.weekend}
+			class:wx-out-of-month={!cell.inMonth}
+			class:wx-today={cell.today}
+			aria-current={cell.today ? "date" : undefined}
+			style={cellStyle(cell)}
+		>
+			<span class="wx-day-number" data-date={dateStr(cell.date)}
+				>{cell.day}</span
+			>
+		</div>
+	{/each}
+
+	{#each visiblePrimitives as p (p.id)}
+		<div
+			class="wx-bar-event {css(p)}"
+			class:wx-bar-single-day={p.isMultiDay === false}
+			style={barStyle(p)}
+			data-id={setID(p.id)}
+		>
+			{#if eventContent}
+				{@const EventContentCmp = eventContent}
+				<EventContentCmp event={p.event} mode="grid" />
+			{:else}
+				<span class="wx-bar-marker"></span>
+				<span class="wx-bar-time">{eventTime(p)}</span>
+				<span class="wx-bar-title">{eventLabel(p)}</span>
+			{/if}
+		</div>
+	{/each}
+
+	{#each moreIndicators as indicator}
+		<button
+			class="wx-more-button"
+			style={moreStyle(indicator)}
+			onclick={() => toggleRow(indicator.rowY)}
+		>
+			+{indicator.count} more
+		</button>
+	{/each}
+</div>
+
+<style>
+	.wx-grid-section {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.wx-grid-cell {
+		position: absolute;
+		box-sizing: border-box;
+		border-right: var(--wx-border);
+		border-bottom: var(--wx-border);
+	}
+	.wx-grid-cell.wx-weekend {
+		background-color: var(--wx-calendar-weekend-background);
+	}
+	.wx-grid-cell.wx-out-of-month {
+		background-color: var(--wx-background-alt);
+	}
+	.wx-grid-cell.wx-today {
+		background-color: var(--wx-color-primary-selected);
+	}
+
+	.wx-day-number {
+		display: block;
+		padding: 2px 4px;
+		font-size: var(--wx-font-size-sm);
+		text-align: right;
+		cursor: pointer;
+	}
+	.wx-out-of-month .wx-day-number {
+		color: var(--wx-color-font-alt);
+	}
+	.wx-today .wx-day-number {
+		font-weight: var(--wx-font-weight-b);
+		color: var(--wx-color-primary);
+	}
+
+	.wx-bar-event {
+		position: absolute;
+		background-color: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+		border-radius: var(--wx-border-radius);
+		overflow: hidden;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		z-index: 1;
+	}
+	.wx-bar-event:hover {
+		opacity: 0.9;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+	}
+	.wx-bar-single-day {
+		background-color: transparent;
+		color: var(--wx-color-font);
+		box-shadow: none;
+		border-radius: 0;
+	}
+	.wx-bar-single-day:hover {
+		background-color: var(--wx-color-secondary-hover);
+		box-shadow: none;
+		opacity: 1;
+	}
+	.wx-bar-title {
+		padding: 0 6px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: 12px;
+		line-height: 1.2;
+	}
+
+	.wx-more-button {
+		position: absolute;
+		background: none;
+		border: none;
+		box-sizing: border-box;
+		padding: 0 4px;
+		font-size: 12px;
+		color: var(--wx-color-link, var(--wx-color-primary));
+		cursor: pointer;
+		z-index: 2;
+		text-align: left;
+		line-height: 18px;
+	}
+	.wx-more-button:hover {
+		text-decoration: underline;
+	}
+
+	.wx-bar-time {
+		font-weight: var(--wx-font-weight-md);
+		font-size: 12px;
+		margin-bottom: 1px;
+		margin-left: 4px;
+	}
+
+	.wx-bar-marker {
+		display: block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-color: var(--wx-color-primary);
+		margin-bottom: 1px;
+		margin-left: 4px;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Primitive, GridCell, CellCss, EventCss } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    primitives: Primitive[];
+    cells: GridCell[];
+    dx: number;
+    dy: number;
+    cellCss?: CellCss;
+    eventCss?: EventCss;
+    eventContent?: any;
+    view: string;
+    section: string;
+    onoverflow?: (overflow: boolean) => void;
+};
+declare const GridSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type GridSection = ReturnType<typeof GridSection>;
+export default GridSection;

package/dist/components/Render/Headers.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">const { headers, direction } = $props();
+export {};
+</script>
+
+{#if direction === "x"}
+	<div class="wx-x-headers">
+		{#each headers as level}
+			<div class="wx-x-header-row">
+				{#each level as unit}
+					<div
+						class="wx-x-header-cell"
+						role="columnheader"
+						style="left:{unit.position}%;width:{unit.size}%"
+					>
+						{unit.label}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{:else}
+	<div class="wx-y-headers">
+		{#each headers as level}
+			<div class="wx-y-header-col">
+				{#each level as unit}
+					<div
+						class="wx-y-header-cell"
+						role="rowheader"
+						style="top:{unit.position}%;height:{unit.size}%"
+					>
+						{unit.label}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.wx-x-headers {
+		flex-shrink: 0;
+		border-bottom: var(--wx-border);
+	}
+	.wx-x-header-row {
+		position: relative;
+		display: flex;
+		height: 32px;
+	}
+	.wx-x-header-cell {
+		position: absolute;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 13px;
+		font-weight: 500;
+		border-right: var(--wx-border);
+	}
+	.wx-x-header-cell:last-child {
+		border-right: none;
+	}
+
+	.wx-y-headers {
+		display: flex;
+		flex-shrink: 0;
+		width: var(--wx-calendar-y-scale-width, 60px);
+		height: 100%;
+		border-right: var(--wx-border);
+	}
+	.wx-y-header-col {
+		position: relative;
+		flex: 1;
+		min-width: 0;
+		height: 100%;
+	}
+	.wx-y-header-cell {
+		position: absolute;
+		width: 100%;
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		font-size: 11px;
+		color: var(--wx-color-font-alt);
+		padding-top: 2px;
+	}
+</style>

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

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