@event-calendar/core 5.0.5 → 5.1.0

package/src/storage/options.svelte.js

@@ -0,0 +1,275 @@
+import {untrack} from 'svelte';
+import {
+    createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, entries,
+    isFunction, keys, setMidnight
+} from '#lib';
+import {SvelteMap} from "svelte/reactivity";
+
+function createOptions(plugins) {
+    let options = {
+        buttonText: {
+            today: 'today',
+        },
+        customButtons: {},
+        date: new Date(),
+        datesSet: undefined,
+        dayHeaderFormat: {
+            weekday: 'short',
+            month: 'numeric',
+            day: 'numeric'
+        },
+        dayHeaderAriaLabelFormat: {
+            dateStyle: 'full'
+        },
+        displayEventEnd: true,
+        duration: {weeks: 1},
+        events: [],
+        eventAllUpdated: undefined,
+        eventBackgroundColor: undefined,
+        eventClassNames: undefined,
+        eventClick: undefined,
+        eventColor: undefined,
+        eventContent: undefined,
+        eventDidMount: undefined,
+        eventFilter: undefined,    // ec option
+        eventMouseEnter: undefined,
+        eventMouseLeave: undefined,
+        eventOrder: undefined,
+        eventSources: [],
+        eventTextColor: undefined,
+        eventTimeFormat: {
+            hour: 'numeric',
+            minute: '2-digit'
+        },
+        filterEventsWithResources: false,
+        firstDay: 0,
+        headerToolbar: {
+            start: 'title',
+            center: '',
+            end: 'today prev,next'
+        },
+        height: undefined,
+        hiddenDays: [],
+        highlightedDates: [],  // ec option
+        lazyFetching: true,
+        loading: undefined,
+        locale: undefined,
+        resources: [],
+        selectable: false,
+        theme: {
+            active: 'ec-active',
+            bgEvent: 'ec-bg-event',
+            bgEvents: 'ec-bg-events',
+            body: 'ec-body',
+            button: 'ec-button',
+            buttonGroup: 'ec-button-group',
+            calendar: 'ec',
+            colHead: 'ec-col-head',
+            day: 'ec-day',
+            dayHead: 'ec-day-head',
+            disabled: 'ec-disabled',
+            event: 'ec-event',
+            eventBody: 'ec-event-body',
+            eventTime: 'ec-event-time',
+            eventTitle: 'ec-event-title',
+            events: 'ec-events',
+            grid: 'ec-grid',
+            header: 'ec-header',
+            hidden: 'ec-hidden',
+            highlight: 'ec-highlight',
+            icon: 'ec-icon',
+            main: 'ec-main',
+            noBeb: 'ec-no-beb',  // no block end border
+            noIeb: 'ec-no-ieb',  // no inline end border
+            today: 'ec-today',
+            title: 'ec-title',
+            toolbar: 'ec-toolbar',
+            view: '',
+            weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'],
+        },
+        titleFormat: {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        },
+        validRange: undefined,
+        view: undefined,
+        viewDidMount: undefined,
+        views: {}
+    };
+
+    // Let plugins add their options
+    for (let plugin of plugins) {
+        plugin.createOptions?.(options);
+    }
+
+    return options;
+}
+
+function createParsers(plugins) {
+    let parsers = {
+        date: date => setMidnight(createDate(date)),
+        duration: createDuration,
+        events: createEvents,
+        eventSources: createEventSources,
+        hiddenDays: days => [...new Set(days)],
+        highlightedDates: dates => dates.map(date => setMidnight(createDate(date))),
+        resources: createResources,
+        validRange: createDateRange
+    };
+
+    // Let plugins add their parsers
+    for (let plugin of plugins) {
+        plugin.createParsers?.(parsers);
+    }
+
+    return parsers;
+}
+
+// Options where default value is passed to the function
+const specialOptions = ['buttonText', 'customButtons', 'theme'];
+
+export function optionsState(mainState, plugins, userOptions) {
+    // Create default options and parsers
+    let defOptions = createOptions(plugins);
+    let parsers = createParsers(plugins);
+
+    // Parse options
+    defOptions = parseOptions(defOptions, parsers);
+    userOptions = parseOptions(userOptions, parsers);
+
+    // Extract view-specific options
+    let defViewOptions = extractOption(defOptions, 'views') ?? {};
+    let userViewOptions = extractOption(userOptions, 'views') ?? {};
+
+    // Create options state
+    let options = new SvelteMap();
+    setOptions(options, defOptions);
+
+    let setters = {};
+    let currentOpts = {};
+
+    function initEffects() {
+        // Set initial view based on input
+        if (userOptions.view) {
+            options.set('view', userOptions.view);
+        }
+        // Set options for each view
+        let views = new Set([...keys(defViewOptions), ...keys(userViewOptions)]);
+        for (let view of views) {
+            let defOpts = mergeOpts(defOptions, defViewOptions[view] ?? {});
+            let opts = mergeOpts(defOpts, userOptions, userViewOptions[view] ?? {});
+            let component = extractOption(opts, 'component');
+            // View has been set
+            delete opts.view;
+            // Set up option setters and delete unknown options
+            for (let key of keys(opts)) {
+                if (options.has(key)) {
+                    if (!setters[key]) {
+                        setters[key] = [];
+                    }
+                    setters[key].push(
+                        specialOptions.includes(key)
+                            ? value => opts[key] = isFunction(value) ? value(defOpts[key]) : value
+                            : value => opts[key] = value
+                    );
+                } else {
+                    delete opts[key];
+                }
+            }
+            // When view changes...
+            $effect.pre(() => {
+                let newView = options.get('view');
+                untrack(() => {
+                    if (newView === view) {
+                        // ...switch view component
+                        mainState.setViewComponent(component);
+                        // ...and update options
+                        currentOpts = opts;
+                        setOptions(options, opts);
+                    }
+                });
+            });
+        }
+    }
+
+    return {
+        proxy: new Proxy(options, {
+            set(options, key, value) {
+                currentOpts[key] = value;
+                options.set(key, value);
+                return true;
+            },
+            get(options, key) {
+                return options.get(key);
+            }
+        }),
+        setOption(key, value, parsed) {
+            if (options.has(key)) {
+                if (!parsed && key in parsers) {
+                    value = parsers[key](value);
+                }
+                // Set value for all views
+                setters[key]?.forEach(set => set(value));
+                options.set(key, currentOpts[key] ?? value);
+            }
+        },
+        initEffects
+    };
+}
+
+function parseOptions(opts, parsers) {
+    let result = {...opts};
+    for (let key of keys(parsers)) {
+        if (key in result) {
+            result[key] = parsers[key](result[key]);
+        }
+    }
+    if (opts.views) {
+        result.views = {};
+        for (let view of keys(opts.views)) {
+            result.views[view] = parseOptions(opts.views[view], parsers);
+        }
+    }
+    return result;
+}
+
+function extractOption(options, name) {
+    let extracted = options[name];
+    delete options[name];
+    return extracted;
+}
+
+function mergeOpts(...args) {
+    let result = {};
+    for (let opts of args) {
+        let override = {};
+        for (let key of specialOptions) {
+            if (isFunction(opts[key])) {
+                override[key] = opts[key](result[key]);
+            }
+        }
+        result = {
+            ...result,
+            ...opts,
+            ...override
+        };
+    }
+    return result;
+}
+
+function setOptions(map, options) {
+    for (let [key, value] of entries(options)) {
+        map.set(key, value);
+    }
+}
+
+export function diff(options, prevOptions) {
+    let diff = [];
+    for (let key of keys(options)) {
+        if (options[key] !== prevOptions[key]) {
+            diff.push([key, options[key]]);
+        }
+    }
+    return diff;
+}

package/src/storage/state.svelte.js

@@ -0,0 +1,69 @@
+import {SvelteMap} from 'svelte/reactivity';
+import {createDate, identity, intl, intlRange, setMidnight} from '#lib';
+import {optionsState} from './options.svelte.js';
+import {loadEvents, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday} from './effects.js';
+import {activeRange, currentRange, filteredEvents, view, viewDates, viewTitle} from './derived.js';
+
+export default class State {
+
+    #setOption;
+
+    constructor(plugins, options) {
+        // Create options state
+        let {proxy, setOption, initEffects} = optionsState(this, plugins, options);
+        this.options = proxy;
+        this.#setOption = setOption;
+
+        // Create other states
+        this.auxComponents = $state([]);
+        this.currentRange = $derived.by(currentRange(this));
+        this.activeRange = $derived.by(activeRange(this));
+        this.fetchedRange = $state({start: undefined, end: undefined});
+        this.events = $state.raw([]);
+        this.filteredEvents = $derived.by(filteredEvents(this));
+        this.mainEl = $state();
+        this.now = $state(createDate());
+        this.today = $state(setMidnight(createDate()));
+        this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
+        this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));
+        this.intlDayHeaderAL = $derived.by(intl(this, 'dayHeaderAriaLabelFormat'));
+        this.intlTitle = $derived.by(intlRange(this, 'titleFormat'));
+        this.viewDates = $derived.by(viewDates(this));
+        this.viewTitle = $derived.by(viewTitle(this));
+        this.view = $derived.by(view(this));
+        this.viewComponent = $state();
+        this.extensions = $state({});
+        this.features = $state([]);
+        // Interaction
+        this.interaction = $state({});
+        this.iEvents = new SvelteMap();
+        this.iClasses = $state(identity);
+        this.iClass = $state();
+
+        // Let plugins init their states
+        for (let plugin of plugins) {
+            plugin.initState?.(this);
+        }
+
+        initEffects();
+        this.#initEffects();
+    }
+
+    #initEffects() {
+        $effect.pre(setNowAndToday(this));
+        $effect(loadEvents(this));
+        $effect(runDatesSet(this));
+        $effect(runEventAllUpdated(this));
+        $effect(runViewDidMount(this));
+    }
+
+    setViewComponent(component) {
+        this.extensions = {};
+        this.features = [];
+        this.viewComponent = component(this);
+    }
+
+    setOption(name, value, parsed = true) {
+        this.#setOption(name, value, parsed);
+    }
+}

package/src/styles/events.css

@@ -32,7 +32,7 @@
     .ec-day-grid &,
     .ec-all-day &,
     .ec-timeline & {
-        block-size: fit-content;
+        block-size: max-content;
         margin-block-end: var(--ec-event-col-gap);
     }
 

package/src/Auxiliary.svelte

@@ -1,47 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {
-        toISOString, toLocalDate, toViewWithLocalDates, isFunction, task, flushDebounce
-    } from '#lib';
-
-    let {
-        datesSet, eventAllUpdated, _auxiliary, _activeRange, _filteredEvents, _tasks, _queue, _view
-    } = getContext('state');
-
-    // datesSet callback
-    $effect(() => {
-        $_activeRange;
-        untrack(() => {
-            if (isFunction($datesSet)) {
-                $datesSet({
-                    start: toLocalDate($_activeRange.start),
-                    end: toLocalDate($_activeRange.end),
-                    startStr: toISOString($_activeRange.start),
-                    endStr: toISOString($_activeRange.end),
-                    view: toViewWithLocalDates($_view)
-                });
-            }
-        });
-    });
-
-    // eventAllUpdated callback
-    $effect(() => {
-        $_filteredEvents;
-        untrack(() => {
-            if (isFunction($eventAllUpdated)) {
-                task(() => $eventAllUpdated({view: toViewWithLocalDates($_view)}), 'eau', _tasks);
-            }
-        });
-    });
-
-    $effect(() => {
-        $_queue;
-        untrack(() => {
-            flushDebounce($_queue);
-        });
-    });
-</script>
-
-{#each $_auxiliary as Component}
-    <Component/>
-{/each}

package/src/lib/debounce.js

@@ -1,20 +0,0 @@
-import {runAll} from './utils.js';
-
-export function debounce(fn, handle, queueStore) {
-    queueStore.update(queue => queue.set(handle, fn));
-}
-
-export function flushDebounce(queue) {
-    runAll(queue);
-    queue.clear();
-}
-
-export function task(fn, handle, tasks) {
-    handle ??= fn;
-    if (!tasks.has(handle)) {
-        tasks.set(handle, setTimeout(() => {
-            tasks.delete(handle);
-            fn();
-        }));
-    }
-}

package/src/lib/stores.js

@@ -1,63 +0,0 @@
-import {derived} from 'svelte/store';
-import {isFunction} from './utils.js';
-import {toLocalDate} from './date.js';
-
-export function intl(locale, format) {
-    return derived([locale, format], ([$locale, $format]) => {
-        let intl = isFunction($format)
-            ? {format: $format}
-            : new Intl.DateTimeFormat($locale, $format);
-        return {
-            format: date => intl.format(toLocalDate(date))
-        };
-    });
-}
-
-export function intlRange(locale, format) {
-    return derived([locale, format], ([$locale, $format]) => {
-        let formatRange;
-        if (isFunction($format)) {
-            formatRange = $format;
-        } else {
-            let intl = new Intl.DateTimeFormat($locale, $format);
-            formatRange = (start, end) => {
-                if (start <= end) {
-                    return intl.formatRange(start, end);
-                } else {
-                    // In iOS 16 and older, intl.formatRange() throws an exception if the start date is later than the end date.
-                    // Therefore, we first swap the parameters, and then swap the resulting parts.
-                    /** @see https://github.com/vkurko/calendar/issues/227 */
-                    let parts = intl.formatRangeToParts(end, start);
-                    let result = '';
-                    let sources = ['startRange', 'endRange'];
-                    let processed = [false, false];
-                    for (let part of parts) {
-                        let i = sources.indexOf(part.source);
-                        if (i >= 0) {
-                            if (!processed[i]) {
-                                result += _getParts(sources[1 - i], parts);
-                                processed[i] = true;
-                            }
-                        } else {
-                            result += part.value;
-                        }
-                    }
-                    return result;
-                }
-            };
-        }
-        return {
-            formatRange: (start, end) => formatRange(toLocalDate(start), toLocalDate(end))
-        };
-    });
-}
-
-function _getParts(source, parts) {
-    let result = '';
-    for (let part of parts) {
-        if (part.source == source) {
-            result += part.value;
-        }
-    }
-    return result;
-}

package/src/plugins/day-grid/lib.js

@@ -1,61 +0,0 @@
-import {addDay, bgEvent, cloneDate, createAllDayChunks, datesEqual, outsideRange, prepareAllDayChunks} from '#lib';
-
-export function createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates) {
-    let grid = [];
-    let days = [];
-    let gridColumn = 1;
-    let gridRow = 1;
-    for (let date of $_viewDates) {
-        days.push({
-            gridColumn,
-            gridRow,
-            resource: undefined,
-            dayStart: date,
-            dayEnd: addDay(cloneDate(date)),
-            disabled: outsideRange(date, $validRange),
-            highlight: $highlightedDates.some(d => datesEqual(d, date))
-        });
-        if (gridColumn === $_colsCount) {
-            grid.push(days);
-            days = [];
-            gridColumn = 0;
-            ++ gridRow;
-        }
-        ++ gridColumn;
-    }
-
-    return grid;
-}
-
-export function createEventChunks($_filteredEvents, grid) {
-    let chunks = [];
-    let bgChunks = [];
-    for (let event of $_filteredEvents) {
-        for (let days of grid) {
-            if (bgEvent(event.display)) {
-                if (event.allDay) {
-                    bgChunks = bgChunks.concat(createAllDayChunks(event, days));
-                }
-            } else {
-                chunks = chunks.concat(createAllDayChunks(event, days));
-            }
-        }
-    }
-    prepareAllDayChunks(chunks);
-
-    return {chunks, bgChunks};
-}
-
-export function createIEventChunks($_iEvents, grid) {
-    let iChunks = [];
-    for (let event of $_iEvents) {
-        if (!event) {
-            continue;
-        }
-        for (let days of grid) {
-            iChunks = iChunks.concat(createAllDayChunks(event, days));
-        }
-    }
-
-    return iChunks;
-}

package/src/plugins/day-grid/stores.js

@@ -1,5 +0,0 @@
-import {derived} from 'svelte/store';
-
-export function colsCount(state) {
-    return derived(state.hiddenDays, $hiddenDays => 7 - $hiddenDays.length);
-}

package/src/plugins/resource-time-grid/lib.js

@@ -1,31 +0,0 @@
-import {
-    addDay, addDuration, cloneDate, datesEqual, outsideRange
-} from '#lib';
-
-export function createGrid($_viewDates, $_viewResources, $_slotTimeLimits, $datesAboveResources, $validRange, $highlightedDates) {
-    let grid = [];
-    let gridColumn = 1;
-    let loop = $datesAboveResources ? [$_viewDates, $_viewResources] : [$_viewResources, $_viewDates];
-    for (let item0 of loop[0]) {
-        let days = [];
-        for (let item1 of loop[1]) {
-            let date = $datesAboveResources ? item0 : item1;
-            let resource =  $datesAboveResources ? item1 : item0;
-            days.push({
-                gridColumn,
-                gridRow: 1,
-                resource,
-                start: addDuration(cloneDate(date), $_slotTimeLimits.min),
-                end: addDuration(cloneDate(date), $_slotTimeLimits.max),
-                dayStart: date,
-                dayEnd: addDay(cloneDate(date)),
-                disabled: outsideRange(date, $validRange),
-                highlight: $highlightedDates.some(d => datesEqual(d, date))
-            });
-            ++ gridColumn;
-        }
-        grid.push(days);
-    }
-
-    return grid;
-}

package/src/plugins/resource-time-grid/stores.js

@@ -1,34 +0,0 @@
-import {derived} from 'svelte/store';
-import {createResources, eventIntersects, getPayload} from '#lib';
-
-function viewResources(state) {
-    return derived(
-        [state.resources, state.filterResourcesWithEvents, state._filteredEvents, state._activeRange],
-        ([$resources, $filterResourcesWithEvents, $_filteredEvents, $_activeRange]) => {
-            let result = $resources.filter(resource => !getPayload(resource).hidden);
-
-            if ($filterResourcesWithEvents) {
-                result = $resources.filter(
-                    resource => $_filteredEvents.some(
-                        event => eventIntersects(event, $_activeRange.start, $_activeRange.end, resource)
-                    )
-                );
-            }
-
-            if (!result.length) {
-                result = createResources([{}]);
-            }
-
-            return result;
-        }
-    );
-}
-
-/**
- * ResourceTimeGrid + ResourceTimeline
- */
-export function createRRStores(state) {
-    if (!('_viewResources' in state)) {
-        state._viewResources = viewResources(state);
-    }
-}

package/src/plugins/resource-timeline/Header.svelte

@@ -1,44 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {datesEqual, contentFrom, toISOString, toSeconds, resizeObserver} from '#lib';
-
-    let {_headerEl, _headerHeight, _intlDayHeader, _intlDayHeaderAL, _dayTimes, _today, _viewDates,
-        slotDuration, theme} = getContext('state');
-</script>
-
-<div class="{$theme.header}" bind:this={$_headerEl} {@attach resizeObserver(() => $_headerHeight = $_headerEl.clientHeight)}>
-    <div class="{$theme.days}" role="row">
-        {#each $_viewDates as date}
-            <div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}">
-                {#if toSeconds($slotDuration)}
-                    <div class="{$theme.dayHead}">
-                        <time
-                            datetime="{toISOString(date, 10)}"
-                            aria-label="{$_intlDayHeaderAL.format(date)}"
-                            {@attach contentFrom($_intlDayHeader.format(date))}
-                        ></time>
-                    </div>
-                    <div class="{$theme.times}">
-                        {#each $_dayTimes[date.getTime()] as time}
-                            <div class="{$theme.time}{time[2] ? '' : ' ' + $theme.minor}" role="columnheader">
-                                <time
-                                    datetime="{time[0]}"
-                                    {@attach contentFrom(time[1])}
-                                ></time>
-                            </div>
-                        {/each}
-                    </div>
-                {:else}
-                    <div class="{$theme.time}" role="columnheader">
-                        <time
-                            datetime="{toISOString(date, 10)}"
-                            aria-label="{$_intlDayHeaderAL.format(date)}"
-                            {@attach contentFrom($_intlDayHeader.format(date))}
-                        ></time>
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
-    <div class="{$theme.hiddenScroll}"></div>
-</div>