@svar-ui/svelte-calendar 2.6.0

package/dist/Demo.svelte

@@ -0,0 +1,7 @@
+<script>
+    import { Calendar, Willow } from "./index.js";
+</script>
+
+<Willow>
+    <Calendar />
+</Willow>

package/dist/Demo.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Demo;
+type Demo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Demo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/AddEventButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { getContext } from "svelte";
+import { Button } from "@svar-ui/svelte-core";
+const store = getContext("calendar-api");
+function addEvent() {
+	store.exec("add-event", {
+		event: {},
+		edit: true
+	});
+}
+</script>
+
+<Button icon="wxi-plus" type="primary" onclick={addEvent}></Button>

package/dist/components/AddEventButton.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 AddEventButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AddEventButton = InstanceType<typeof AddEventButton>;
+export default AddEventButton;

package/dist/components/Calendar.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">import { setContext, getContext } from "svelte";
+import { writable } from "svelte/store";
+// locales
+import { locale as l, dateToString } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/calendar-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+// stores
+import { EventBusRouter } from "@svar-ui/lib-state";
+import { CalendarStore } from "@svar-ui/calendar-store";
+// ui
+import Layout from "./Layout.svelte";
+let { events, init, view = "day", date, views = [
+	"day",
+	"week",
+	"month"
+], toolbar, cellCss, eventCss, eventContent, recurring = false, readonly = false, children, tooltip, eventPopup, ...restProps } = $props();
+// uses same logic as the Locale component
+const words = {
+	...coreEn,
+	...en
+};
+let locale = getContext("wx-i18n");
+if (!locale) locale = l(words);
+else locale = locale.extend(words, true);
+setContext("wx-i18n", locale);
+// create date format helper that resolves format names and format strings
+const rawLocale = locale.getRaw();
+const fmt = (format) => {
+	const resolved = rawLocale?.eventCalendar?.[format] ?? format;
+	return dateToString(resolved, rawLocale?.calendar);
+};
+// init stores
+// svelte-ignore state_referenced_locally
+const dataStore = new CalendarStore(writable, {
+	recurring,
+	weekStart: rawLocale?.calendar?.weekStart ?? 1,
+	dateFormat: fmt
+});
+// define event route
+let firstInRoute = dataStore.in;
+const dash = /-/g;
+let lastInRoute = new EventBusRouter((a, b) => {
+	const name = "on" + a.replace(dash, "");
+	const handler = restProps[name];
+	if (handler) {
+		handler(b);
+	}
+});
+firstInRoute.setNext(lastInRoute);
+// public API
+export const getState = dataStore.getState.bind(dataStore), getReactiveState = dataStore.getReactive.bind(dataStore), getStores = () => ({ data: dataStore }), getEvents = dataStore.getEvents.bind(dataStore), getEvent = dataStore.getEvent.bind(dataStore), exec = firstInRoute.exec, setNext = (ev) => lastInRoute = lastInRoute.setNext(ev), intercept = firstInRoute.intercept.bind(firstInRoute), on = firstInRoute.on.bind(firstInRoute), detach = firstInRoute.detach.bind(firstInRoute);
+// extra api
+const api = {
+	exec,
+	setNext,
+	intercept,
+	on,
+	detach,
+	getState,
+	getReactiveState,
+	getStores,
+	getEvents,
+	getEvent,
+	fmt
+};
+const viewOptions = $derived(views.map((v) => {
+	if (typeof v === "string") {
+		return { id: v };
+	}
+	return { ...v };
+}));
+// common API available in components
+const stateStore = {
+	getState,
+	getReactiveState,
+	exec,
+	getEvent,
+	fmt
+};
+setContext("calendar-api", stateStore);
+let init_once = true;
+const reinitStore = () => {
+	dataStore.configureViews(viewOptions);
+	dataStore.init({
+		currentView: view,
+		currentDate: date,
+		events
+	});
+	if (init_once && init) {
+		init(api);
+		init_once = false;
+	}
+};
+reinitStore();
+$effect(reinitStore);
+</script>
+
+<Layout
+	store={stateStore}
+	views={viewOptions}
+	brandmark={dataStore.getBrandmark() ?? undefined}
+	{toolbar}
+	{cellCss}
+	{eventCss}
+	{eventContent}
+	{children}
+	{tooltip}
+	{eventPopup}
+	{readonly}
+/>

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

@@ -0,0 +1,153 @@
+import type { Snippet } from "svelte";
+import { CalendarStore } from "@svar-ui/calendar-store";
+import type { ViewConfig } from "@svar-ui/calendar-store";
+import type { CalendarInstanceApi } from "./types.js";
+import type { ToolbarItem, CellCss, EventCss } from "@svar-ui/calendar-store";
+type Props = {
+    events: any;
+    init?: (api: CalendarInstanceApi) => void;
+    readonly?: boolean;
+    view?: string;
+    views?: (string | ViewConfig)[];
+    toolbar?: {
+        items?: ToolbarItem[];
+        css?: string;
+    } | null;
+    cellCss?: CellCss;
+    eventCss?: EventCss;
+    eventContent?: any;
+    date?: Date;
+    recurring?: boolean;
+    children?: Snippet;
+    tooltip?: any;
+    eventPopup?: any;
+};
+declare const Calendar: import("svelte").Component<Props, {
+    getState: () => import("@svar-ui/calendar-store").State;
+    getReactiveState: () => {
+        currentDate: import("@svar-ui/lib-state").IPublicWritable<Date>;
+        currentView: import("@svar-ui/lib-state").IPublicWritable<string>;
+        rangeLabel: import("@svar-ui/lib-state").IPublicWritable<string>;
+        visibleDateRange: import("@svar-ui/lib-state").IPublicWritable<{
+            start: Date;
+            end: Date;
+        }>;
+        events: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").EventsStore>;
+        viewData: import("@svar-ui/lib-state").IPublicWritable<any>;
+        filters: import("@svar-ui/lib-state").IPublicWritable<Map<string, (obj: any) => boolean>>;
+        editorData: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").CalendarEvent | null>;
+        _view: import("@svar-ui/lib-state").IPublicWritable<import("@svar-ui/calendar-store").ViewModel>;
+    };
+    getStores: () => {
+        data: CalendarStore;
+    };
+    getEvents: (start?: Date, end?: Date) => import("@svar-ui/calendar-store").CalendarEvent[];
+    getEvent: (id: string | number) => import("@svar-ui/calendar-store").CalendarEvent | undefined;
+    exec: (name: keyof import("@svar-ui/calendar-store").StoreActions, ev: {
+        date?: Date;
+        view?: string;
+    } | {
+        direction: "next" | "previous" | "now";
+    } | {
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        edit?: boolean;
+        id?: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
+        originalDate?: string;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID | null;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        x: number;
+        y: number;
+    } | {
+        filter?: ((obj: any) => boolean) | null;
+        tag?: string;
+    }) => Promise<{
+        date?: Date;
+        view?: string;
+    } | {
+        direction: "next" | "previous" | "now";
+    } | {
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        edit?: boolean;
+        id?: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
+        originalDate?: string;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID | null;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        x: number;
+        y: number;
+    } | {
+        filter?: ((obj: any) => boolean) | null;
+        tag?: string;
+    }>;
+    setNext: (ev: any) => any;
+    intercept: (name: keyof import("@svar-ui/calendar-store").StoreActions, handler: (v: {
+        date?: Date;
+        view?: string;
+    } | {
+        direction: "next" | "previous" | "now";
+    } | {
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        edit?: boolean;
+        id?: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
+        originalDate?: string;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID | null;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        x: number;
+        y: number;
+    } | {
+        filter?: ((obj: any) => boolean) | null;
+        tag?: string;
+    }) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+    on: (name: keyof import("@svar-ui/calendar-store").StoreActions, handler: (v: {
+        date?: Date;
+        view?: string;
+    } | {
+        direction: "next" | "previous" | "now";
+    } | {
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        edit?: boolean;
+        id?: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        event: Partial<import("@svar-ui/calendar-store").CalendarEvent>;
+        mode?: "single" | "following";
+        originalDate?: string;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID | null;
+    } | {
+        id: import("@svar-ui/calendar-store").EventID;
+        x: number;
+        y: number;
+    } | {
+        filter?: ((obj: any) => boolean) | null;
+        tag?: string;
+    }) => void | boolean | Promise<boolean>, config?: import("@svar-ui/lib-state").IEventConfig) => void;
+    detach: (tag: number | string | symbol) => void;
+}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/CalendarPanel.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">import { getContext } from "svelte";
+import { writable } from "svelte/store";
+import { Calendar, Checkbox } from "@svar-ui/svelte-core";
+let { calendars, accessor = "calendarId", open = true, onchange } = $props();
+// i18n support with fallback
+const i18n = getContext("wx-i18n");
+const _ = i18n?.getGroup("eventCalendar");
+// Calendar API from context (available when placed inside Calendar widget)
+const calendarApi = getContext("calendar-api");
+const reactiveState = calendarApi?.getReactiveState();
+const currentDate = reactiveState?.currentDate ?? writable(new Date());
+const visibleDateRange = reactiveState?.visibleDateRange ?? writable({
+	start: new Date(),
+	end: new Date()
+});
+const rangeMarkers = $derived.by(() => {
+	const range = $visibleDateRange;
+	const startTime = range.start.getTime();
+	const endTime = range.end.getTime();
+	return (date) => {
+		const t = date.getTime();
+		return t >= startTime && t < endTime ? "wx-view-range" : "";
+	};
+});
+let active = $derived.by(() => {
+	return calendars.reduce((acc, cal) => {
+		acc[cal.id] = cal.active !== false;
+		return acc;
+	}, {});
+});
+function applyFilter() {
+	const value = [];
+	for (const a in active) {
+		if (active[a]) value.push(a);
+	}
+	const filter = value.length === calendars.length ? null : (event) => active[event[accessor]];
+	if (calendarApi) {
+		calendarApi.exec("filter-events", {
+			filter,
+			tag: "calendar-panel"
+		});
+	}
+	onchange?.({
+		value,
+		filter
+	});
+}
+function toggle(id) {
+	active[id] = !active[id];
+	applyFilter();
+}
+$effect(() => {
+	if (calendars.some((c) => c.active === false)) applyFilter();
+});
+function onDateChange({ value }) {
+	if (value && calendarApi) {
+		calendarApi.exec("navigate-to", { date: value });
+	}
+}
+</script>
+
+{#if open}
+<div class="wx-calendar-panel">
+	<div role="group" aria-label={_("Calendar filters")}>
+	{#each calendars as cal (cal.id)}
+		<div class="wx-calendar-name {cal.css}">
+			<Checkbox
+				value={active[cal.id] ?? true}
+				onchange={() => toggle(cal.id)}
+				/* css={cal.css}
+				ariaLabel={cal.label} */
+				label={cal.label}
+			/>
+		</div>
+	{/each}
+	</div>
+
+	<div class="wx-calendar-panel-bottom">
+		<Calendar
+			buttons={false}
+			value={$currentDate}
+			onchange={onDateChange}
+			markers={rangeMarkers}
+		/>
+	</div>
+</div>
+{/if}
+
+<style>
+	.wx-calendar-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		padding: var(--wx-padding);
+		overflow: hidden;
+	}
+
+	.wx-calendar-panel-toggle {
+		background: none;
+		border: var(--wx-border);
+		cursor: pointer;
+		padding: 4px 3px;
+		font-size: var(--wx-icon-size);
+		line-height: 16px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--wx-color-font);
+		flex-shrink: 0;
+		border-radius: var(--wx-border-radius);
+		outline: none;
+	}
+
+	.wx-calendar-panel-toggle:hover {
+		background: var(--wx-background-hover);
+	}
+
+	.wx-calendar-name {
+		margin-top: 4px;
+		border: none !important;
+		border-radius: var(--wx-border-radius);
+		padding: 4px;
+	}
+
+	.wx-calendar-panel-color {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: var(--wx-icon-border-radius);
+		flex-shrink: 0;
+	}
+
+	.wx-calendar-panel-label {
+		white-space: nowrap;
+		overflow: hidden;
+		opacity: 1;
+		max-width: 200px;
+		transition:
+			opacity 0.3s ease,
+			max-width 0.3s ease;
+	}
+
+	.wx-calendar-panel-bottom :global(.wx-view-range:not(.wx-selected):not(.wx-out)) {
+		background: var(--wx-color-primary-selected);
+		border-radius: 0;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type CalendarGroup = {
+    id: string | number;
+    label: string;
+    active?: boolean;
+    css?: string;
+};
+type Props = {
+    calendars: CalendarGroup[];
+    accessor?: string;
+    open?: boolean;
+    onchange?: (detail: {
+        value: (string | number)[];
+        filter: ((event: Record<string, any>) => boolean) | null;
+    }) => void;
+};
+declare const CalendarPanel: import("svelte").Component<Props, {}, "">;
+type CalendarPanel = ReturnType<typeof CalendarPanel>;
+export default CalendarPanel;

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">import { getContext, setContext } from "svelte";
+import { ContextMenu } from "@svar-ui/svelte-menu";
+import { locale } from "@svar-ui/lib-dom";
+import { en } from "@svar-ui/calendar-locales";
+import { en as coreEn } from "@svar-ui/core-locales";
+import { getMenuOptions } from "@svar-ui/calendar-store";
+let { options = [], api = null, resolver = null, filter = null, at = "point", children, onclick, css } = $props();
+let activeId = null;
+// set locale
+let l = getContext("wx-i18n");
+if (!l) {
+	l = locale({
+		...en,
+		...coreEn
+	});
+	setContext("wx-i18n", l);
+}
+const _ = l.getGroup("eventCalendar");
+function applyLocale(opts) {
+	return opts.map((op) => {
+		op = { ...op };
+		if (op.text) op.text = _(op.text);
+		if (op.subtext) op.subtext = _(op.subtext);
+		if (op.data) op.data = applyLocale(op.data);
+		return op;
+	});
+}
+function getOptions() {
+	const base = options.length ? options : getMenuOptions();
+	return applyLocale(base);
+}
+function itemResolver(rawId, ev) {
+	if (!rawId || !api) return null;
+	const event = api.getEvent(rawId);
+	if (!event) return null;
+	if (resolver) {
+		const result = resolver(event, ev);
+		if (!result) return null;
+	}
+	activeId = event.id;
+	return event;
+}
+function menuAction(ev) {
+	const action = ev?.action;
+	if (!action) return;
+	const id = typeof activeId === "object" ? activeId.id : activeId;
+	if (action.id === "edit-event") {
+		api.exec("select-event", { id });
+	} else if (action.id === "delete-event") {
+		api.exec("delete-event", { id });
+	}
+	onclick?.(ev);
+}
+function filterMenu(item, event) {
+	return filter ? filter(item, event) : true;
+}
+const cOptions = $derived(getOptions());
+let menu = $state();
+export function show(ev, obj) {
+	menu.show(ev, obj);
+}
+</script>
+
+<ContextMenu
+	filter={filterMenu}
+	options={cOptions}
+	dataKey="id"
+	resolver={itemResolver}
+	onclick={menuAction}
+	{css}
+	{at}
+	bind:this={menu}
+/>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span oncontextmenu={menu.show} data-menu-ignore="true">
+	{@render children?.()}
+</span>
+
+<style>
+	:global(.wx-menu .wx-option.wx-disabled) {
+		pointer-events: none;
+	}
+	:global(.wx-menu .wx-option.wx-disabled .wx-value),
+	:global(.wx-menu .wx-option.wx-disabled .wx-icon) {
+		color: var(--wx-color-font-disabled);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import { ContextMenu } from "@svar-ui/svelte-menu";
+type Props = {
+    options?: any[];
+    api?: any;
+    resolver?: ((event: any, ev: MouseEvent) => any) | null;
+    filter?: ((item: any, event: any) => boolean) | null;
+    at?: string;
+    children?: Snippet;
+    onclick?: (e: any) => void;
+    css?: string;
+};
+declare const ContextMenu: import("svelte").Component<Props, {
+    show: (ev: any, obj?: any) => void;
+}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/DateLabel.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { getContext } from "svelte";
+const store = getContext("calendar-api");
+const { rangeLabel } = store.getReactiveState();
+</script>
+
+<span class="wx-date-label" role="heading" aria-level="2" aria-live="polite" aria-atomic="true">{$rangeLabel}</span>
+
+<style>
+	.wx-date-label {
+		font-size: var(--wx-font-size-hd);
+		flex-grow: 1;
+	}
+</style>

package/dist/components/DateLabel.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 DateLabel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DateLabel = InstanceType<typeof DateLabel>;
+export default DateLabel;

package/dist/components/DateNav.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { getContext } from "svelte";
+import { Button } from "@svar-ui/svelte-core";
+const store = getContext("calendar-api");
+const _ = getContext("wx-i18n").getGroup("eventCalendar");
+function next() {
+	store.exec("navigate-time", { direction: "next" });
+}
+function prev() {
+	store.exec("navigate-time", { direction: "previous" });
+}
+</script>
+
+<div class="wx-date-nav" role="group" aria-label={_("Date navigation")}>
+	<Button icon="wxi-angle-left" onclick={prev} /*ariaLabel={_("Previous period")}*/ />
+	<Button icon="wxi-angle-right" onclick={next} /*ariaLabel={_("Next period")}*/ />
+</div>
+
+<style>
+	.wx-date-nav {
+		display: flex;
+		align-items: center;
+	}
+	.wx-date-nav :global(button:first-child) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	.wx-date-nav :global(button:last-child) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+</style>

package/dist/components/DateNav.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 DateNav: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DateNav = InstanceType<typeof DateNav>;
+export default DateNav;