@svar-ui/svelte-calendar 2.6.0 → 2.7.0

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

@@ -0,0 +1,15 @@
+export default ProRecurringForm;
+type ProRecurringForm = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ProRecurringForm: import("svelte").Component<{
+    value: any;
+    error: any;
+    onchange: any;
+}, {}, "">;
+type $$ComponentProps = {
+    value: any;
+    error: any;
+    onchange: any;
+};

package/dist/components/pro_rrule-form.d.ts

@@ -0,0 +1,23 @@
+import type { RecurrenceFrequency } from "@svar-ui/calendar-store";
+export type Frequency = RecurrenceFrequency;
+export type Weekday = "MO" | "TU" | "WE" | "TH" | "FR" | "SA" | "SU";
+export type RecurrenceForm = {
+    type: "never" | "daily" | "weekly" | "monthly" | "yearly" | "workdays" | "custom";
+    freq: Frequency;
+    interval: number;
+    weekdays: Weekday[];
+    monthMode: "day" | "weekday";
+    ends: "never" | "count" | "until";
+    count: number;
+    until: Date | null;
+};
+export declare const WEEKDAYS: {
+    id: Weekday;
+    label: string;
+}[];
+export declare function weekdayOf(date: Date): Weekday;
+export declare function weekdayName(day: Weekday): string;
+export declare function nthOf(date: Date): number;
+export declare function nthLabel(value: number): string;
+export declare function parseRRule(rrule?: string, start?: Date): RecurrenceForm;
+export declare function buildRRule(form: RecurrenceForm, start: Date): string;

package/dist/components/pro_rrule-form.js

@@ -0,0 +1,121 @@
+import { parseRRule as parseRule, serializeRRule } from "@svar-ui/calendar-store";
+export const WEEKDAYS = [
+    { id: "MO", label: "Mon" },
+    { id: "TU", label: "Tue" },
+    { id: "WE", label: "Wed" },
+    { id: "TH", label: "Thu" },
+    { id: "FR", label: "Fri" },
+    { id: "SA", label: "Sat" },
+    { id: "SU", label: "Sun" },
+];
+const DAY_IDS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
+const WORKDAYS = [1, 2, 3, 4, 5];
+export function weekdayOf(date) {
+    return DAY_IDS[date.getDay()];
+}
+export function weekdayName(day) {
+    return WEEKDAYS.find(item => item.id === day)?.label ?? day;
+}
+export function nthOf(date) {
+    const nextWeek = new Date(date);
+    nextWeek.setDate(date.getDate() + 7);
+    return nextWeek.getMonth() !== date.getMonth()
+        ? -1
+        : Math.ceil(date.getDate() / 7);
+}
+export function nthLabel(value) {
+    if (value === -1)
+        return "last";
+    if (value === 1)
+        return "first";
+    if (value === 2)
+        return "second";
+    if (value === 3)
+        return "third";
+    return "fourth";
+}
+function isWorkdays(byDay) {
+    if (byDay?.length !== WORKDAYS.length)
+        return false;
+    const sorted = [...byDay].sort((a, b) => a - b);
+    return WORKDAYS.every((day, i) => sorted[i] === day);
+}
+// which preset, if any, the rule is equivalent to for the current start date
+function detectType(rule, start) {
+    if (rule.interval !== 1)
+        return "custom";
+    const onStartDay = rule.byMonthDay == null || rule.byMonthDay === start.getDate();
+    const days = rule.byDay ?? [];
+    if (rule.freq === "WEEKLY") {
+        if (isWorkdays(days))
+            return "workdays";
+        if (!days.length || (days.length === 1 && days[0] === start.getDay())) {
+            return "weekly";
+        }
+    }
+    else if (rule.freq === "MONTHLY") {
+        if (!days.length && onStartDay)
+            return "monthly";
+    }
+    else if (rule.freq === "YEARLY") {
+        const onStartMonth = !rule.byMonth?.length ||
+            (rule.byMonth.length === 1 && rule.byMonth[0] === start.getMonth() + 1);
+        if (!days.length && onStartDay && onStartMonth)
+            return "yearly";
+    }
+    else if (!days.length) {
+        return "daily";
+    }
+    return "custom";
+}
+export function parseRRule(rrule = "", start = new Date()) {
+    const rule = parseRule(rrule);
+    const weekdays = (rule?.byDay ?? []).map(day => DAY_IDS[day]);
+    return {
+        type: rule ? detectType(rule, start) : "never",
+        freq: rule?.freq ?? "DAILY",
+        interval: rule?.interval ?? 1,
+        weekdays: weekdays.length ? weekdays : [weekdayOf(start)],
+        monthMode: rule?.byDay?.length ? "weekday" : "day",
+        ends: rule?.count ? "count" : rule?.until ? "until" : "never",
+        count: Math.max(1, rule?.count ?? 10),
+        until: rule?.until ?? null,
+    };
+}
+export function buildRRule(form, start) {
+    if (form.type === "never")
+        return "";
+    let rule;
+    if (form.type === "custom") {
+        rule = { freq: form.freq, interval: form.interval };
+        if (form.freq === "WEEKLY" && form.weekdays.length) {
+            rule.byDay = form.weekdays.map(day => DAY_IDS.indexOf(day));
+        }
+        if (form.freq === "MONTHLY" || form.freq === "YEARLY") {
+            if (form.freq === "YEARLY")
+                rule.byMonth = [start.getMonth() + 1];
+            if (form.monthMode === "weekday") {
+                rule.byDay = [start.getDay()];
+                rule.bySetPos = nthOf(start);
+            }
+            else {
+                rule.byMonthDay = start.getDate();
+            }
+        }
+    }
+    else if (form.type === "workdays") {
+        rule = { freq: "WEEKLY", interval: 1, byDay: [...WORKDAYS] };
+    }
+    else {
+        rule = { freq: form.type.toUpperCase(), interval: 1 };
+    }
+    if (form.ends === "count")
+        rule.count = form.count;
+    // the picker hands over a local day, and a date-only UNTIL keeps it that
+    // way - UTC parts would name the previous day in positive-offset zones
+    if (form.ends === "until" && form.until) {
+        rule.until = form.until;
+        rule.untilDateOnly = true;
+    }
+    return serializeRRule(rule);
+}

package/dist/components/{Render/useEventOverlay.svelte.d.ts → useEventOverlay.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { EventPopupInfo } from "../../directives/clickevent.js";
+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): {

package/dist/components/{Render/useEventOverlay.svelte.js → useEventOverlay.svelte.js}

@@ -30,7 +30,7 @@ export function useEventOverlay(getEvent, getEventPopupAt) {
             eventPopupState = null;
             return;
         }
-        const ev = getEvent(info.eventId);
+        const ev = getEvent(info.rawId);
         if (ev) {
             eventPopupState = {
                 event: ev,

package/dist/defaults.d.ts

@@ -0,0 +1,18 @@
+export declare function getEditorItems(recurring?: boolean): ({
+    comp: string;
+    key: string;
+    label: string;
+    keys?: undefined;
+    validation?: undefined;
+    validationMessage?: undefined;
+} | {
+    comp: string;
+    key: string;
+    keys: string[];
+    label: string;
+    validation: (value: {
+        start?: Date;
+        end?: Date;
+    }) => boolean;
+    validationMessage: string;
+})[];

package/dist/defaults.js

@@ -0,0 +1,15 @@
+export function getEditorItems(recurring = false) {
+    return [
+        { comp: "text", key: "text", label: "Text" },
+        {
+            comp: recurring ? "event-recurrence" : "event-dates",
+            key: "schedule",
+            keys: recurring
+                ? ["start", "end", "allDay", "rrule"]
+                : ["start", "end", "allDay"],
+            label: "",
+            validation: (value) => !value.start || !value.end || value.end >= value.start,
+            validationMessage: "End date must be after the start date",
+        },
+    ];
+}

package/dist/directives/clickevent.d.ts

@@ -1,6 +1,7 @@
 import type { CalendarEvent, StoreActions } from "@svar-ui/calendar-store";
 export interface EventPopupInfo {
     eventId: string | number;
+    rawId: string | number;
     element: HTMLElement;
 }
 export type ExecFn = (action: keyof StoreActions, data: any) => unknown;

package/dist/directives/clickevent.js

@@ -12,6 +12,9 @@ export function clickevent(node, options) {
         startY = e.clientY;
         target = e.target;
     }
+    function cancel() {
+        opts.onEventPopup?.(null);
+    }
     function handleMouseUp(e) {
         if (!target)
             return;
@@ -22,22 +25,22 @@ export function clickevent(node, options) {
             return;
         }
         const node = locate(target);
-        const event = node ? opts.getEvent(getID(node)) : null;
         target = null;
+        if (!node)
+            return cancel();
+        const rawId = getID(node);
+        const event = opts.getEvent(rawId);
+        if (!event)
+            return cancel();
         if (opts.onEventPopup) {
-            if (!event) {
-                opts.onEventPopup(null);
-                return;
-            }
             opts.onEventPopup({
                 eventId: event.id,
+                rawId,
                 element: node,
             });
         }
         else {
-            if (!event)
-                return;
-            opts.exec("select-event", { id: event.id });
+            opts.exec("select-event", { id: event.id, rawId });
         }
     }
     node.addEventListener("mousedown", handleMouseDown);

package/dist/directives/drag.js

@@ -1,3 +1,4 @@
+import { decodeId } from "@svar-ui/calendar-store";
 import { startResize } from "./dragresize.js";
 import { getID } from "@svar-ui/lib-dom";
 const MOVE_THRESHOLD = 3;
@@ -80,7 +81,7 @@ export function drag(node, options) {
             const id = getID(moveEl);
             moveEl = null;
             movePending = false;
-            if (!id)
+            if (id == null)
                 return;
             startResize(node, el, e, id, {
                 dx: opts.dx,
@@ -199,8 +200,9 @@ export function drag(node, options) {
             resetMove();
             return;
         }
-        const eventId = getID(moveEl);
-        const original = opts.getEvent(eventId);
+        const rawId = getID(moveEl);
+        const eventInfo = decodeId(rawId);
+        const original = opts.getEvent(eventInfo.id);
         if (!original) {
             resetMove();
             return;
@@ -235,10 +237,11 @@ export function drag(node, options) {
                         : 0;
                 const newEnd = new Date(newStart.getTime() + duration);
                 const payload = {
-                    id: original.id,
+                    id: eventInfo.id,
+                    rawId,
                     event: { start: newStart, end: newEnd },
                 };
-                opts.exec("update-event", payload);
+                opts.exec("move-event", payload);
             }
             resetMove();
             return;
@@ -269,10 +272,11 @@ export function drag(node, options) {
             if (partial.start instanceof Date) {
                 partial.end = new Date(partial.start.getTime() + duration);
                 const payload = {
-                    id: original.id,
+                    id: eventInfo.id,
+                    rawId,
                     event: partial,
                 };
-                opts.exec("update-event", payload);
+                opts.exec("move-event", payload);
             }
         }
         resetMove();

package/dist/directives/dragresize.js

@@ -1,3 +1,4 @@
+import { decodeId } from "@svar-ui/calendar-store";
 const DRAG_THRESHOLD = 3;
 export function startResize(node, dragEl, e, eventId, opts) {
     const origStyle = dragEl.style.cssText;
@@ -30,7 +31,8 @@ export function startResize(node, dragEl, e, eventId, opts) {
             return;
         }
         const finalBottom = origTop + (parseFloat(dragEl.style.height) || dragEl.offsetHeight);
-        const original = opts.getEvent(eventId);
+        const eventInfo = decodeId(eventId);
+        const original = opts.getEvent(eventInfo.id);
         if (original) {
             // x100: center of the element's column
             const finalLeft = parseFloat(dragEl.style.left) || 0;
@@ -39,10 +41,11 @@ export function startResize(node, dragEl, e, eventId, opts) {
             const endPartial = opts.model.toPositionEnd(opts.sectionName, x100, endY100, { end: original.end }, true);
             if (endPartial.end instanceof Date) {
                 const payload = {
-                    id: original.id,
+                    id: eventInfo.id,
+                    rawId: eventId,
                     event: { end: endPartial.end },
                 };
-                opts.exec("update-event", payload);
+                opts.exec("move-event", payload);
             }
         }
         reset();

package/dist/helpers/pro_export.d.ts

@@ -0,0 +1,5 @@
+export declare function collectEventMaps(root: HTMLElement): {
+    content: Record<string, string>;
+    css: Record<string, string>;
+};
+export declare function collectCellCss(root: HTMLElement): string[];

package/dist/helpers/pro_export.js

@@ -0,0 +1,22 @@
+const EVENT_SELECTOR = ".wx-bar-event[data-id], .wx-box-event[data-id], .wx-list-event[data-id]";
+const CELL_SELECTOR = "div.wx-grid-cell";
+// Read rendered custom content and css from the live widget markup;
+// position and size stay in style/wx-* classes and are excluded, as the
+// export backend computes its own layout for its viewport
+export function collectEventMaps(root) {
+    const content = {};
+    const css = {};
+    root.querySelectorAll(EVENT_SELECTOR).forEach(node => {
+        const el = node;
+        const id = el.dataset.id;
+        content[id] = el.innerHTML;
+        css[id] = el.getAttribute("class") || "";
+    });
+    return {
+        content,
+        css,
+    };
+}
+export function collectCellCss(root) {
+    return Array.from(root.querySelectorAll(CELL_SELECTOR), node => node.getAttribute("class") || "");
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+declare const version: string;
 import Calendar from "./components/Calendar.svelte";
 import CalendarPanel from "./components/CalendarPanel.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -5,10 +6,10 @@ import Editor from "./components/Editor.svelte";
 import Willow from "./themes/Willow.svelte";
 import WillowDark from "./themes/WillowDark.svelte";
 export { getToolbarItems, getMenuOptions, registerCalendarView, WeekViewModel, DayViewModel, MonthViewModel, } from "@svar-ui/calendar-store";
-export type { ToolbarItem, CalendarEvent, CellContext, EventContext, EventContentMode, CellCss, EventCss, } from "@svar-ui/calendar-store";
-export type { CalendarContextApi, CalendarInstanceApi, ViewOption, } from "./components/types.js";
-export { getEditorItems } from "./components/editorItems.js";
+export type { ToolbarItem, CalendarEvent, EditorData, CellContext, EventContext, EventContentMode, EventOverflowMode, SectionUI, CellCss, EventCss, } from "@svar-ui/calendar-store";
+export type { CalendarContextApi, CalendarInstanceApi, CalendarPoint, ViewOption, } from "./types.js";
+export { getEditorItems } from "./defaults.js";
 export { registerEditorItem } from "@svar-ui/svelte-editor";
 export { parseICal, serializeICal } from "@svar-ui/calendar-ical";
 export { RestDataProvider } from "@svar-ui/calendar-provider";
-export { Calendar, CalendarPanel, ContextMenu, Editor, Willow, WillowDark };
+export { Calendar, CalendarPanel, ContextMenu, Editor, Willow, WillowDark, version, };

package/dist/index.js

@@ -1,3 +1,5 @@
+import pkg from "../package.json" with { type: "json" };
+const version = pkg.version;
 import Calendar from "./components/Calendar.svelte";
 import CalendarPanel from "./components/CalendarPanel.svelte";
 import ContextMenu from "./components/ContextMenu.svelte";
@@ -5,8 +7,8 @@ import Editor from "./components/Editor.svelte";
 import Willow from "./themes/Willow.svelte";
 import WillowDark from "./themes/WillowDark.svelte";
 export { getToolbarItems, getMenuOptions, registerCalendarView, WeekViewModel, DayViewModel, MonthViewModel, } from "@svar-ui/calendar-store";
-export { getEditorItems } from "./components/editorItems.js";
+export { getEditorItems } from "./defaults.js";
 export { registerEditorItem } from "@svar-ui/svelte-editor";
 export { parseICal, serializeICal } from "@svar-ui/calendar-ical";
 export { RestDataProvider } from "@svar-ui/calendar-provider";
-export { Calendar, CalendarPanel, ContextMenu, Editor, Willow, WillowDark };
+export { Calendar, CalendarPanel, ContextMenu, Editor, Willow, WillowDark, version, };

package/dist/pro_export/Calendar.svelte

@@ -0,0 +1,30 @@
+<script>
+	import Willow from "../themes/Willow.svelte";
+	import WillowDark from "../themes/WillowDark.svelte";
+	import Print from "../themes/Print.svelte";
+	import PrintBW from "../themes/PrintBW.svelte";
+	import Calendar from "../components/Calendar.svelte";
+	import Event from "./Event.svelte";
+
+	const { skin, config = {}, htmlMode } = $props();
+	const eventContent = $derived(htmlMode ? Event : undefined);
+
+</script>
+
+{#if skin === "willow-dark" || skin === "dark"}
+	<WillowDark>
+		<Calendar {...config} {eventContent} />
+	</WillowDark>
+{:else if skin === "print"}
+	<Print>
+		<Calendar {...config} {eventContent} />
+	</Print>
+{:else if skin === "bw"}
+	<PrintBW>
+		<Calendar {...config} {eventContent} />
+	</PrintBW>
+{:else}
+	<Willow>
+		<Calendar {...config} {eventContent} />
+	</Willow>
+{/if}

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

@@ -0,0 +1,16 @@
+export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Calendar: import("svelte").Component<{
+    skin: any;
+    config?: Record<string, any>;
+    htmlMode: any;
+}, {}, "">;
+import Calendar from "../components/Calendar.svelte";
+type $$ComponentProps = {
+    skin: any;
+    config?: Record<string, any>;
+    htmlMode: any;
+};

package/dist/pro_export/Event.svelte

@@ -0,0 +1,5 @@
+<script>
+	const { event } = $props();
+</script>
+
+{@html event.$html}

package/dist/pro_export/Event.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Event;
+type Event = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Event: import("svelte").Component<{
+    event: any;
+}, {}, "">;
+type $$ComponentProps = {
+    event: any;
+};

package/dist/pro_export.d.ts

@@ -0,0 +1,3 @@
+import type { ExportConfig } from "@svar-ui/calendar-store";
+declare function init(target: string, config: ExportConfig, skin: string, htmlMode: boolean): void;
+export { init };

package/dist/pro_export.js

@@ -0,0 +1,15 @@
+import { mount } from "svelte";
+import Export from "./pro_export/Calendar.svelte";
+function init(target, config, skin, htmlMode) {
+    mount(Export, {
+        target: target
+            ? document.querySelector(target)
+            : document.body,
+        props: {
+            config,
+            skin,
+            htmlMode,
+        },
+    });
+}
+export { init };

package/dist/themes/Print.svelte

@@ -0,0 +1,89 @@
+<script>
+	import Willow from "./Willow.svelte";
+	let { fonts = true, children } = $props();
+</script>
+
+{#if children}
+	<Willow {fonts}>
+		<div class="wx-print-theme">
+			{@render children()}
+		</div>
+	</Willow>
+{:else}
+	<Willow {fonts} />
+{/if}
+
+<style>
+	:global{
+		.wx-print-theme {
+			height: 100%;
+			width: 100%;
+			box-sizing: border-box;
+
+			/* surfaces - strip filled backgrounds, keep neutral page */
+			--wx-background: #ffffff;
+			--wx-background-alt: #ffffff;
+			--wx-background-hover: transparent;
+			--wx-color-primary: #1f6bd9;
+			--wx-color-primary-selected: transparent;
+			--wx-color-secondary-hover: transparent;
+			--wx-color-font-alt: #555d68;
+			--wx-icon-color: #555d68;
+
+			/* calendar surfaces */
+			--wx-calendar-grid-color: #b8bec8;
+			--wx-calendar-weekend-background: #ffffff;
+		}
+
+		.wx-print-theme .wx-calendar,
+		.wx-print-theme .wx-calendar-content,
+		.wx-print-theme .wx-calendar-main,
+		.wx-print-theme .wx-calendar-sidebar,
+		.wx-print-theme .wx-scroll-grid,
+		.wx-print-theme .wx-scroll-inner,
+		.wx-print-theme .wx-sections,
+		.wx-print-theme .wx-section {
+			background: #ffffff;
+		}
+
+		/* events - white body with a colored outline instead of a solid fill */
+		.wx-print-theme .wx-bar-event:not(.wx-bar-single-day),
+		.wx-print-theme .wx-box-event {
+			background-color: #ffffff;
+			color: var(--wx-color-font);
+			border: 2px solid var(--wx-color-primary);
+			box-shadow: none;
+			break-inside: avoid;
+		}
+
+		.wx-print-theme .wx-bar-event:hover,
+		.wx-print-theme .wx-box-event:hover {
+			box-shadow: none;
+			opacity: 1;
+		}
+
+		.wx-print-theme .wx-bar-single-day:hover {
+			background-color: transparent;
+		}
+
+		/* today marker - outline the day number instead of filling it */
+		.wx-print-theme .wx-month-day.wx-today .wx-day-num {
+			background: #ffffff;
+			color: var(--wx-color-primary);
+			border: 1px solid currentColor;
+		}
+
+		.wx-print-theme .wx-event-placeholder {
+			background: transparent;
+			border: 1px dashed var(--wx-color-primary);
+		}
+
+		.wx-print-theme .wx-list-event:hover {
+			background-color: transparent;
+		}
+		
+		.wx-print-theme .wx-navigation button {
+			display: none;
+		}
+	}
+</style>

package/dist/themes/Print.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Print;
+type Print = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Print: import("svelte").Component<{
+    fonts?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    fonts?: boolean;
+    children: any;
+};