@svar-ui/svelte-calendar 2.6.0

package/dist/components/DateTimePicker.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { DatePicker, TimePicker } from "@svar-ui/svelte-core";
+let { value, id, time, onchange, ...restProps } = $props();
+</script>
+
+<div class="wx-event-calendar-date_field">
+	<div class="wx-event-calendar-input_wrapper">
+		<DatePicker {id} {value} {onchange} {...restProps} buttons={false} />
+	</div>
+	{#if time}
+		<TimePicker {id} {value} {onchange} />
+	{/if}
+</div>
+
+<style>
+	.wx-event-calendar-date_field {
+		display: flex;
+	}
+	.wx-event-calendar-date_field .wx-event-calendar-input_wrapper {
+		flex-grow: 2;
+	}
+	.wx-event-calendar-date_field :global(.timepicker) {
+		width: unset !important;
+	}
+	.wx-event-calendar-input_wrapper {
+		margin-right: 10px;
+	}
+	:global(.wx-event-calendar-editor-controls > .btn:not(:last-child)) {
+		margin-right: 5px;
+	}
+</style>

package/dist/components/DateTimePicker.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const DateTimePicker: import("svelte").Component<{
+    value: any;
+    id: any;
+    time: any;
+    onchange: any;
+} & Record<string, any>, {}, "">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/components/Editor.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { Editor as EditorBase, registerEditorItem } from "@svar-ui/svelte-editor";
+import { locale } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/calendar-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import DateTimePicker from "./DateTimePicker.svelte";
+import { getEditorItems } from "./editorItems.js";
+registerEditorItem("date-time-picker", DateTimePicker);
+let { api, values, items = getEditorItems(), placement = "sidebar", layout = "default", focus = true, css = "", topBar, autoSave = true, onchange, onsave, onaction, ...editorProps } = $props();
+// svelte-ignore state_referenced_locally
+void values;
+// svelte-ignore state_referenced_locally
+const { editorData } = api.getReactiveState();
+let l = getContext("wx-i18n");
+if (!l) {
+	l = locale({
+		...en,
+		...coreEn
+	});
+	setContext("wx-i18n", l);
+}
+const _ = l.getGroup("eventCalendar");
+function translate(value) {
+	return typeof value === "string" ? _(value) : value;
+}
+function applyLocale(list) {
+	return list.map((item) => {
+		const next = { ...item };
+		next.label = translate(next.label);
+		return next;
+	});
+}
+let generation = $state(1);
+const allDay = $derived(generation > 0 ? $editorData?.allDay : false);
+const cItems = $derived(applyLocale(items));
+const defaultTopBar = { items: [
+	{
+		comp: "icon",
+		icon: "wxi-close",
+		id: "close"
+	},
+	{ comp: "spacer" },
+	{
+		comp: "button",
+		id: "delete",
+		text: _("Delete"),
+		type: "primary danger",
+		onclick: handleDelete
+	}
+] };
+const editorTopBar = $derived(topBar === undefined ? defaultTopBar : topBar);
+const editorCss = $derived([
+	"wx-editor-calendar",
+	allDay ? "wx-editor-all-day" : "",
+	css
+].filter(Boolean).join(" "));
+function handleSave(ev) {
+	onsave?.(ev);
+	const data = $editorData;
+	if (!data) return;
+	api.exec("update-event", {
+		id: data.id,
+		event: { ...ev.values }
+	});
+}
+function sameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function handleChange(ev) {
+	const { key, value, update } = ev;
+	const prev = $editorData;
+	generation++;
+	if (prev && key === "start" && !update.allDay) {
+		const oldStart = prev.start;
+		const oldEnd = prev.end;
+		if (oldStart instanceof Date && oldEnd instanceof Date && sameDay(oldStart, oldEnd) && value instanceof Date) {
+			const newEnd = new Date(oldEnd);
+			newEnd.setFullYear(value.getFullYear(), value.getMonth(), value.getDate());
+			update.end = newEnd;
+		}
+	}
+	onchange?.(ev);
+}
+function handleDelete() {
+	const data = $editorData;
+	if (!data) return;
+	api.exec("delete-event", { id: data.id });
+	api.exec("select-event", { id: null });
+}
+function handleAction(ev) {
+	onaction?.(ev);
+	const { item } = ev;
+	if (item.id === "close" && !!item.comp) {
+		api.exec("select-event", { id: null });
+	}
+}
+</script>
+
+{#if $editorData}
+	<EditorBase
+		{...editorProps}
+		{focus}
+		items={cItems}
+		topBar={editorTopBar}
+		{autoSave}
+		onchange={handleChange}
+		onaction={handleAction}
+		onsave={handleSave}
+		{placement}
+		{layout}
+		values={$editorData}
+		css={editorCss}
+	/>
+{/if}
+
+<style>
+	:global(.wx-sidearea .wx-editor-calendar) {
+		width: 450px;
+	}
+	:global(.wx-editor-calendar.wx-editor-all-day .wx-timepicker) {
+		visibility: hidden;
+	}
+</style>

package/dist/components/Editor.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from "svelte";
+import { Editor as EditorBase } from "@svar-ui/svelte-editor";
+type BaseEditorProps = ComponentProps<typeof EditorBase>;
+type EditorProps = Omit<BaseEditorProps, "values"> & {
+    api: any;
+    values?: never;
+};
+declare const Editor: import("svelte").Component<EditorProps, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/Layout.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">import { getContext } from "svelte";
+import Navigation from "./Navigation.svelte";
+import Sections from "./Render/Sections.svelte";
+import ScrollableSection from "./Render/ScrollableSection.svelte";
+const _ = getContext("wx-i18n").getGroup("eventCalendar");
+const { store, views, toolbar, cellCss, eventCss, eventContent, children, tooltip, eventPopup, brandmark, readonly = false } = $props();
+// svelte-ignore state_referenced_locally
+const { viewData, currentView, _view } = store.getReactiveState();
+const renderMode = $derived($_view?.render);
+</script>
+
+{#snippet viewContent()}
+	{#if renderMode === "scrollable"}
+		<ScrollableSection data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} />
+	{:else}
+		<Sections data={$viewData} {cellCss} {eventCss} {eventContent} view={$currentView} {tooltip} {eventPopup} {readonly} />
+	{/if}
+{/snippet}
+
+<div class="wx-calendar" role="region" aria-label={_("Calendar")}>
+	{#if toolbar !== null}
+		<Navigation {views} toolbar={toolbar} {readonly} />
+	{/if}
+	{#if children}
+		<div class="wx-calendar-content">
+			<div class="wx-calendar-sidebar" role="complementary" aria-label={_("Calendar sidebar")}>
+				{@render children()}
+			</div>
+			<div class="wx-calendar-main">
+				{@render viewContent()}
+				{#if brandmark}
+					<a style={brandmark.style} href={brandmark.link} target="_blank">
+						{brandmark.text}
+					</a>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="wx-calendar-main wx-calendar-main--full">
+			{@render viewContent()}
+			{#if brandmark}
+				<a style={brandmark.style} href={brandmark.link} target="_blank">
+					{brandmark.text}
+				</a>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.wx-calendar {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+	.wx-calendar-content {
+		display: flex;
+		flex: 1;
+		min-height: 0;
+	}
+	.wx-calendar-sidebar {
+		flex-shrink: 0;
+		border-right: var(--wx-border);
+	}
+	.wx-calendar-main {
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+	}
+	.wx-calendar-main--full {
+		min-height: 0;
+	}
+</style>

package/dist/components/Layout.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import type { ToolbarItem, Brandmark, CellCss, EventCss } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    store: any;
+    views: any;
+    toolbar?: {
+        items?: ToolbarItem[];
+        css?: string;
+    } | null;
+    cellCss?: CellCss;
+    eventCss?: EventCss;
+    eventContent?: any;
+    children?: Snippet;
+    tooltip?: any;
+    eventPopup?: any;
+    brandmark?: Brandmark;
+    readonly?: boolean;
+};
+declare const Layout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/MenuButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { getContext } from "svelte";
+import { Button } from "@svar-ui/svelte-core";
+const store = getContext("calendar-api");
+function menuClick() {
+	store.exec("action", { id: "menu-button" });
+}
+</script>
+
+<Button icon="wxi-menu" onclick={menuClick} /*ariaLabel={_("Menu")}*/ />

package/dist/components/MenuButton.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MenuButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MenuButton = InstanceType<typeof MenuButton>;
+export default MenuButton;

package/dist/components/Navigation.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">import { getContext } from "svelte";
+import { Toolbar, registerToolbarItem } from "@svar-ui/svelte-toolbar";
+import { RichSelect, Segmented } from "@svar-ui/svelte-core";
+import { getToolbarItems } from "@svar-ui/calendar-store";
+import DateNav from "./DateNav.svelte";
+import TodayButton from "./TodayButton.svelte";
+import DateLabel from "./DateLabel.svelte";
+import MenuButton from "./MenuButton.svelte";
+import AddEventButton from "./AddEventButton.svelte";
+registerToolbarItem("richselect", RichSelect);
+registerToolbarItem("segmented", Segmented);
+registerToolbarItem("dateNav", DateNav);
+registerToolbarItem("todayButton", TodayButton);
+registerToolbarItem("dateLabel", DateLabel);
+registerToolbarItem("menuButton", MenuButton);
+registerToolbarItem("addEventButton", AddEventButton);
+const store = getContext("calendar-api");
+const { views, toolbar = { items: getToolbarItems() }, readonly = false } = $props();
+const { currentView } = store.getReactiveState();
+const _ = getContext("wx-i18n").getGroup("eventCalendar");
+const items = $derived.by(() => {
+	const base = toolbar?.items;
+	const viewOptions = views.map((v) => ({
+		id: v.id,
+		label: _(v.label || v.id.charAt(0).toUpperCase() + v.id.slice(1))
+	}));
+	const res = [...base ?? []].map((item) => {
+		if (item.id === "modes") {
+			if (viewOptions.length > 1) {
+				return {
+					...item,
+					value: $currentView,
+					options: viewOptions
+				};
+			} else {
+				return null;
+			}
+		}
+		if (readonly && item.comp === "addEventButton") return null;
+		return item;
+	}).filter(Boolean);
+	return res;
+});
+const onchange = ({ item, value }) => {
+	if (item.id === "modes") {
+		store.exec("navigate-to", { view: value });
+	}
+};
+</script>
+
+<div class="wx-navigation" role="navigation" aria-label={_("Calendar controls")}>
+	<Toolbar {items} {onchange} css={toolbar?.css}></Toolbar>
+</div>
+
+<style>
+	.wx-navigation {
+		border-bottom: var(--wx-border);
+	}
+</style>

package/dist/components/Navigation.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ToolbarItem } from "@svar-ui/calendar-store";
+type $$ComponentProps = {
+    views: any;
+    toolbar?: {
+        items?: ToolbarItem[];
+        css?: string;
+    };
+    readonly?: boolean;
+};
+declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/components/Render/BarSection.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">import { setID } from "@svar-ui/lib-dom";
+const { primitives, dx, dy, eventCss, eventContent, view, section } = $props();
+const laneHeight = 28;
+const gap = 2;
+function style(p) {
+	const left = dx * p.x + gap;
+	const width = dx * p.width - gap * 2;
+	const lane = p.lane ?? 0;
+	const lanes = p.totalLanes ?? 1;
+	const groupTop = dy * p.y;
+	const groupHeight = dy * p.height;
+	const rowLaneHeight = Math.min(laneHeight, groupHeight / lanes);
+	const top = groupTop + lane * rowLaneHeight + gap;
+	const height = rowLaneHeight - gap * 2;
+	return `left:${left}px;top:${top}px;width:${width}px;height:${height}px`;
+}
+function css(p) {
+	const base = p.event.css || "";
+	const dynamic = eventCss ? eventCss({
+		event: p.event,
+		view,
+		section,
+		mode: "bars"
+	}) : "";
+	return base + (dynamic ? " " + dynamic : "");
+}
+</script>
+
+<div class="wx-bar-section">
+	{#each primitives as p (p.id)}
+		<div
+			class="wx-bar-event {css(p)}"
+			class:wx-bar-single-day={p.isMultiDay}
+			style={style(p)}
+			data-id={setID(p.id)}
+		>
+			{#if eventContent}
+				{@const EventContentCmp = eventContent}
+				<EventContentCmp event={p.event} mode="bars" />
+			{:else}
+				<span class="wx-bar-title">
+					{p.event.text || " "}
+				</span>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wx-bar-section {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+	.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;
+	}
+	.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 8px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: var(--wx-font-size-sm);
+		line-height: 1.2;
+	}
+</style>

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

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

package/dist/components/Render/BoxSection.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { setID } from "@svar-ui/lib-dom";
+const { primitives, dx, dy, layoutMode = "split", eventCss, eventContent, view, section } = $props();
+const gap = 2;
+const overlap = 20;
+function style(p) {
+	const top = dy * p.y;
+	const height = dy * p.height - 1;
+	if (layoutMode === "overlap") {
+		const slot = p.slot ?? 0;
+		const laneOffset = slot * overlap;
+		const left = dx * p.x + gap + laneOffset;
+		const width = Math.max(0, dx * p.width - gap * 2 - laneOffset);
+		return `left:${left}px;top:${top}px;width:${width}px;height:${height}px;z-index:${slot}`;
+	}
+	const slotWidth = p.width / (p.maxConcurrency ?? 1);
+	const left = dx * (p.x + (p.slot ?? 0) * slotWidth) + gap;
+	const width = dx * slotWidth - gap * 2;
+	return `left:${left}px;top:${top}px;width:${width}px;height:${height}px`;
+}
+function formatTime(d) {
+	return d.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function css(p) {
+	const base = p.event.css || "";
+	const dynamic = eventCss ? eventCss({
+		event: p.event,
+		view,
+		section,
+		mode: "boxes"
+	}) : "";
+	return base + (dynamic ? " " + dynamic : "");
+}
+</script>
+
+<div class="wx-box-section">
+	{#each primitives as p (p.id)}
+		<div
+			class="wx-box-event {css(p)}"
+			style={style(p)}
+			data-id={setID(p.id)}
+		>
+			{#if eventContent}
+				{@const EventContentCmp = eventContent}
+				<EventContentCmp event={p.event} mode="boxes" />
+			{:else}
+				<div class="wx-box-time">
+					{formatTime(p.event.start)} – {formatTime(p.event.end)}
+				</div>
+				<div class="wx-box-title">
+					{p.event.text || ""}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.wx-box-section {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+	.wx-box-event {
+		position: absolute;
+		background-color: var(--wx-color-primary);
+		color: var(--wx-color-primary-font);
+		border-radius: var(--wx-border-radius);
+		padding: 4px 8px;
+		overflow: hidden;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+		font-size: var(--wx-font-size-sm);
+		line-height: 1.3;
+		cursor: pointer;
+		z-index: 1;
+	}
+	.wx-box-event:hover {
+		opacity: 0.9;
+		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	}
+	.wx-box-time {
+		font-weight: var(--wx-font-weight-md);
+		font-size: 12px;
+		margin-bottom: 2px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.wx-box-title {
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Primitive, EventCss } from "@svar-ui/calendar-store";
+type BoxLayoutMode = "split" | "overlap";
+type $$ComponentProps = {
+    primitives: Primitive[];
+    dx: number;
+    dy: number;
+    layoutMode?: BoxLayoutMode;
+    eventCss?: EventCss;
+    eventContent?: any;
+    view: string;
+    section: string;
+};
+declare const BoxSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type BoxSection = ReturnType<typeof BoxSection>;
+export default BoxSection;

package/dist/components/Render/Grid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import GridLines from "./GridLines.svelte";
+import GridCells from "./GridCells.svelte";
+const { xHeaders, yHeaders, dx, dy, cellCss, view, section, mode } = $props();
+function hasWeekend(headers) {
+	if (!headers) return false;
+	const last = headers[headers.length - 1];
+	for (const u of last) if (u.weekend) return true;
+	return false;
+}
+</script>
+
+{#if cellCss || hasWeekend(xHeaders)}
+	<GridCells {xHeaders} {yHeaders} {dx} {dy} {cellCss} {view} {section} {mode} />
+{:else}
+	<GridLines {xHeaders} {yHeaders} {dx} {dy} />
+{/if}

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