@event-calendar/core 5.0.5 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.0.5",
+  "version": "5.1.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.46.0"
+    "svelte": "^5.46.1"
   }
 }

package/src/Buttons.svelte

@@ -4,10 +4,9 @@
 
     let {buttons} = $props();
 
-    let {
-        _currentRange, _today, _viewTitle, _viewDates, buttonText, customButtons, date, duration, hiddenDays, theme,
-        validRange, view
-    } = getContext('state');
+    let mainState = getContext('state');
+    let {currentRange, today, viewTitle, viewDates, options: {buttonText, customButtons, date, duration, hiddenDays,
+        theme, validRange, view}} = $derived(mainState);
 
     let prevDisabled = $state(false);
     let nextDisabled = $state(false);
@@ -15,28 +14,28 @@
 
     let running = false;
     $effect.pre(() => {
-        $_viewDates;
-        $validRange;
+        viewDates;
+        validRange;
         buttons;
         untrack(() => {
             if (!running) {
                 running = true;
                 if (buttons.includes('prev')) {
                     prevDisabled = false;
-                    if ($validRange.start) {
+                    if (validRange.start) {
                         prevDisabled = test(prev);
                     }
                 }
                 if (buttons.includes('next')) {
                     nextDisabled = false;
-                    if ($validRange.end) {
+                    if (validRange.end) {
                         nextDisabled = test(next);
                     }
                 }
                 if (buttons.includes('today')) {
-                    todayDisabled = $_today >= $_currentRange.start && $_today < $_currentRange.end;
-                    if (!todayDisabled && ($validRange.start || $validRange.end)) {
-                        todayDisabled = test(today);
+                    todayDisabled = today >= currentRange.start && today < currentRange.end;
+                    if (!todayDisabled && (validRange.start || validRange.end)) {
+                        todayDisabled = test(setToday);
                     }
                 }
                 tick().then(() => running = false);
@@ -45,63 +44,63 @@
     });
 
     function test(fn) {
-        let currentDate = cloneDate($date);
+        let currentDate = date;
         fn();
-        let result = $_viewDates.every(date => outsideRange(date, $validRange));
-        $date = currentDate;
+        let result = viewDates.every(date => outsideRange(date, validRange));
+        mainState.setOption('date', currentDate);
         return result;
     }
 
     function prev() {
-        $date = prevDate($date, $duration, $hiddenDays);
+        mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
     }
 
     function next() {
-        $date = nextDate($date, $duration);
+        mainState.setOption('date', nextDate(cloneDate(date), duration));
     }
 
-    function today() {
-        $date = cloneDate($_today);
+    function setToday() {
+        mainState.setOption('date', cloneDate(today));
     }
 </script>
 
 {#each buttons as button}
     {#if button === 'title'}
         <!-- svelte-ignore a11y_missing_content -->
-        <h2 class="{$theme.title}" {@attach contentFrom($_viewTitle)}></h2>
+        <h2 class="{theme.title}" {@attach contentFrom(viewTitle)}></h2>
     {:else if button === 'prev'}
         <button
-            class="{$theme.button} ec-{button}"
-            aria-label={$buttonText.prev}
-            title={$buttonText.prev}
+            class="{theme.button} ec-{button}"
+            aria-label={buttonText.prev}
+            title={buttonText.prev}
             onclick={prev}
             disabled={prevDisabled}
-        ><i class="{$theme.icon} ec-{button}"></i></button>
+        ><i class="{theme.icon} ec-{button}"></i></button>
     {:else if button === 'next'}
         <button
-            class="{$theme.button} ec-{button}"
-            aria-label={$buttonText.next}
-            title={$buttonText.next}
+            class="{theme.button} ec-{button}"
+            aria-label={buttonText.next}
+            title={buttonText.next}
             onclick={next}
             disabled={nextDisabled}
-        ><i class="{$theme.icon} ec-{button}"></i></button>
+        ><i class="{theme.icon} ec-{button}"></i></button>
     {:else if button === 'today'}
         <button
-            class="{$theme.button} ec-{button}"
-            onclick={today}
+            class="{theme.button} ec-{button}"
+            onclick={setToday}
             disabled={todayDisabled}
-        >{$buttonText[button]}</button>
-    {:else if $customButtons[button]}
+        >{buttonText[button]}</button>
+    {:else if customButtons[button]}
         <!-- svelte-ignore a11y_consider_explicit_label -->
         <button
-            class={[$theme.button, `ec-${button}`, $customButtons[button].active && $theme.active]}
-            onclick={$customButtons[button].click}
-            {@attach contentFrom($customButtons[button].text)}
+            class={[theme.button, `ec-${button}`, customButtons[button].active && theme.active]}
+            onclick={customButtons[button].click}
+            {@attach contentFrom(customButtons[button].text)}
         ></button>
     {:else if button !== ''}
         <button
-            class={[$theme.button, `ec-${button}`, $view === button && $theme.active]}
-            onclick={() => $view = button}
-        >{$buttonText[button]}</button>
+            class={[theme.button, `ec-${button}`, view === button && theme.active]}
+            onclick={() => mainState.setOption('view', button)}
+        >{buttonText[button]}</button>
     {/if}
 {/each}

package/src/Calendar.svelte

@@ -1,31 +1,29 @@
 <script>
     import './styles/index.css';
     import {setContext, untrack} from 'svelte';
-    import {get} from 'svelte/store';
-    import {diff} from './storage/options.js';
-    import State from './storage/state.js';
-    import Toolbar from './Toolbar.svelte';
-    import Auxiliary from './Auxiliary.svelte';
     import {
-        assign, createEvents, getElementWithPayload, getPayload, listView, nextDate,
+        assign, cloneDate, createEvents, getElementWithPayload, getPayload, nextDate,
         prevDate, toEventWithLocalDates, toLocalDate, toViewWithLocalDates
     } from '#lib';
+    import MainState from './storage/state.svelte.js';
+    import {diff} from './storage/options.svelte.js';
+    import Toolbar from './Toolbar.svelte';
 
     let {plugins = [], options = {}} = $props();
 
     // svelte-ignore state_referenced_locally
-    let state = new State(plugins, options);
-    setContext('state', state);
+    let mainState = new MainState(plugins, options);
+    setContext('state', mainState);
 
     let {
-        _viewComponent, _interaction, _iClass, _events,
-        date, duration, hiddenDays, height, theme, view
-    } = state;
+        auxComponents, features, events, interaction, iClass, view, viewComponent: View,
+        options: {date, duration, height, hiddenDays, theme}
+    } = $derived(mainState);
 
     // Reactively update options that did change
     // svelte-ignore state_referenced_locally
     let prevOptions = {...options};
-    $effect(() => {
+    $effect.pre(() => {
         for (let [name, value] of diff(options, prevOptions)) {
             untrack(() => {
                 setOption(name, value);
@@ -35,27 +33,28 @@
     });
 
     export function setOption(name, value) {
-        state._set(name, value);
+        mainState.setOption(name, value, false);
         return this;
     }
 
     export function getOption(name) {
-        let value = state._get(name);
+        let value = mainState.options[name];
         return value instanceof Date ? toLocalDate(value) : value;
     }
 
     export function refetchEvents() {
-        state._fetchedRange.set({start: undefined, end: undefined});
+        mainState.fetchedRange = {start: undefined, end: undefined};
         return this;
     }
 
     export function getEvents() {
-        return $_events.map(toEventWithLocalDates);
+        return events.map(toEventWithLocalDates);
     }
 
     export function getEventById(id) {
-        for (let event of $_events) {
-            if (event.id == id) {
+        id = String(id);
+        for (let event of events) {
+            if (event.id === id) {
                 return toEventWithLocalDates(event);
             }
         }
@@ -64,17 +63,16 @@
 
     export function addEvent(event) {
         event = createEvents([event])[0];
-        $_events.push(event);
-        $_events = $_events;
+        events.push(event);
         return toEventWithLocalDates(event);
     }
 
     export function updateEvent(event) {
         let id = String(event.id);
-        let idx = $_events.findIndex(event => event.id === id);
+        let idx = events.findIndex(event => event.id === id);
         if (idx >= 0) {
             event = createEvents([event])[0];
-            $_events[idx] = event;
+            events[idx] = event;
             return toEventWithLocalDates(event);
         }
         return null;
@@ -82,20 +80,19 @@
 
     export function removeEventById(id) {
         id = String(id);
-        let idx = $_events.findIndex(event => event.id === id);
+        let idx = events.findIndex(event => event.id === id);
         if (idx >= 0) {
-            $_events.splice(idx, 1);
-            $_events = $_events;
+            events.splice(idx, 1);
         }
         return this;
     }
 
     export function getView() {
-        return toViewWithLocalDates(get(state._view));
+        return toViewWithLocalDates(view);
     }
 
     export function unselect() {
-        $_interaction.action?.unselect();
+        interaction.action?.unselect();
         return this;
     }
 
@@ -111,28 +108,28 @@
     }
 
     export function next() {
-        $date = nextDate($date, $duration);
+        mainState.setOption('date', nextDate(cloneDate(date), duration));
         return this;
     }
 
     export function prev() {
-        $date = prevDate($date, $duration, $hiddenDays);
+        mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
         return this;
     }
-
-    let View = $derived($_viewComponent);
 </script>
 
 <div
     class={[
-        $theme.calendar,
-        $theme.view,
-        $_iClass && $theme[$_iClass]
+        theme.calendar,
+        theme.view,
+        iClass && theme[iClass]
     ]}
-    style:height={$height}
-    role="{listView($view) ? 'list' : 'table'}"
+    style:height
+    role="{features.includes('list') ? 'list' : 'table'}"
 >
     <Toolbar/>
     <View/>
+    {#each auxComponents as AuxComponent}
+        <AuxComponent/>
+    {/each}
 </div>
-<Auxiliary/>

package/src/Toolbar.svelte

@@ -3,23 +3,23 @@
     import {keys} from '#lib';
     import Buttons from './Buttons.svelte';
 
-    let {headerToolbar, theme} = getContext('state');
+    let {options: {headerToolbar, theme}} = $derived(getContext('state'));
 
     let sections = $derived.by(() => {
         let sections = {};
         for (let key of ['start', 'center', 'end']) {
-            sections[key] = $headerToolbar[key]?.split(' ').map(group => group.split(',')) ?? [];
+            sections[key] = headerToolbar[key]?.split(' ').map(group => group.split(',')) ?? [];
         }
         return sections;
     });
 </script>
 
-<nav class="{$theme.toolbar}">
+<nav class="{theme.toolbar}">
     {#each keys(sections) as key}
         <div class="ec-{key}">
             {#each sections[key] as buttons}
                 {#if buttons.length > 1}
-                    <div class="{$theme.buttonGroup}">
+                    <div class="{theme.buttonGroup}">
                         <Buttons {buttons}/>
                     </div>
                 {:else}

package/src/lib/components/BaseDay.svelte

@@ -17,19 +17,20 @@
         children
     } = $props();
 
-    let {_interaction, _today, theme} = getContext('state');
+    let {today, interaction: {action}, options: {theme}} = $derived(getContext('state'));
+    let {snap} = $derived(getContext('view-state'));  // timeGrid has snap, others don't
 
-    let isToday = $derived(datesEqual(date, $_today));
+    let isToday = $derived(datesEqual(date, today));
 
     // Class
     let classNames = $derived(classes([
-        $theme.day,
-        $theme.weekdays?.[date.getUTCDay()],
-        isToday && $theme.today,
-        highlight && $theme.highlight,
-        disabled && $theme.disabled,
-        noIeb && $theme.noIeb,
-        noBeb && $theme.noBeb
+        theme.day,
+        theme.weekdays?.[date.getUTCDay()],
+        isToday && theme.today,
+        highlight && theme.highlight,
+        disabled && theme.disabled,
+        noIeb && theme.noIeb,
+        noBeb && theme.noBeb
     ]));
 
     // dateFromPoint
@@ -44,11 +45,13 @@
             };
         });
     });
+
+    let onpointerdown = $derived(!disabled && action ? jsEvent => action.select(jsEvent, snap) : undefined);
 </script>
 
 <div
     bind:this={el}
     class={classNames}
     {role}
-    onpointerdown={!disabled ? $_interaction.action?.select : undefined}
+    {onpointerdown}
 >{@render children?.()}</div>

package/src/lib/components/BaseEvent.svelte

@@ -14,54 +14,54 @@
         body
     } = $props();
 
-    let {
+    let {intlEventTime, view, options: {
         displayEventEnd, eventBackgroundColor, eventColor, eventContent, eventClick, eventDidMount, eventClassNames,
-        eventMouseEnter, eventMouseLeave, eventTextColor, resources, theme, _view, _intlEventTime
-    } = getContext('state');
+        eventMouseEnter, eventMouseLeave, eventTextColor, resources, theme
+    }} = $derived(getContext('state'));
 
     let event = $derived(chunk.event);
     let display = $derived(chunk.event.display);
 
     // Style
-    let bgColor = $derived(event.backgroundColor ?? resourceBackgroundColor(event, $resources) ?? $eventBackgroundColor ?? $eventColor);
-    let txtColor = $derived(event.textColor ?? resourceTextColor(event, $resources) ?? $eventTextColor);
+    let bgColor = $derived(event.backgroundColor ?? resourceBackgroundColor(event, resources) ?? eventBackgroundColor ?? eventColor);
+    let txtColor = $derived(event.textColor ?? resourceTextColor(event, resources) ?? eventTextColor);
     let style = $derived(entries(styles(
         {'background-color': bgColor, 'color': txtColor}
     )).map(entry => `${entry[0]}:${entry[1]}`).concat(event.styles).join(';'));
 
     // Class
     let classNames = $derived(classes([
-        bgEvent(display) ? $theme.bgEvent : $theme.event,
-        ...createEventClasses($eventClassNames, event, $_view)
+        bgEvent(display) ? theme.bgEvent : theme.event,
+        ...createEventClasses(eventClassNames, event, view)
     ]));
 
     // Content
     let [timeText, content] = $derived(createEventContent(
-        chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view
+        chunk, displayEventEnd, eventContent, theme, intlEventTime, view
     ));
 
     onMount(() => {
-        if (isFunction($eventDidMount)) {
-            $eventDidMount({
+        if (isFunction(eventDidMount)) {
+            eventDidMount({
                 event: toEventWithLocalDates(event),
                 timeText,
                 el,
-                view: toViewWithLocalDates($_view)
+                view: toViewWithLocalDates(view)
             });
         }
     });
 
     function createHandler(fn, display) {
-        return !helperEvent(display) && isFunction(fn)
-            ? jsEvent => fn({event: toEventWithLocalDates(event), el, jsEvent, view: toViewWithLocalDates($_view)})
+        return isFunction(fn) && !helperEvent(display)
+            ? jsEvent => fn({event: toEventWithLocalDates(event), el, jsEvent, view: toViewWithLocalDates(view)})
             : undefined;
     }
 
     // Handlers
-    let onclick = $derived(!bgEvent(display) && createHandler($eventClick, display) || undefined);
+    let onclick = $derived(!bgEvent(display) && createHandler(eventClick, display) || undefined);
     let onkeydown = $derived(onclick && keyEnter(onclick));
-    let onmouseenter = $derived(createHandler($eventMouseEnter, display));
-    let onmouseleave = $derived(createHandler($eventMouseLeave, display));
+    let onmouseenter = $derived(createHandler(eventMouseEnter, display));
+    let onmouseleave = $derived(createHandler(eventMouseLeave, display));
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -78,7 +78,7 @@
     {onpointerdown}
 >
     {#snippet defaultBody()}
-        <div class={$theme.eventBody} {@attach contentFrom(content)}></div>
+        <div class={theme.eventBody} {@attach contentFrom(content)}></div>
     {/snippet}
     {#if body}
         {@render body(defaultBody, bgColor, txtColor)}

package/src/lib/components/ColHead.svelte

@@ -14,16 +14,16 @@
         children
     } = $props();
 
-    let {_today, theme} = getContext('state');
+    let {today, options: {theme}} = $derived(getContext('state'));
 </script>
 
 <div
     class={[
-        className ?? $theme.colHead,
-        weekday && $theme.weekdays?.[date.getUTCDay()],
-        weekday && datesEqual(date, $_today) && $theme.today,
-        highlight && $theme.highlight,
-        disabled && $theme.disabled
+        className ?? theme.colHead,
+        weekday && theme.weekdays?.[date.getUTCDay()],
+        weekday && datesEqual(date, today) && theme.today,
+        highlight && theme.highlight,
+        disabled && theme.disabled
     ]}
     role="{ariaHidden ? null : 'columnheader'}"
     aria-colspan="{ariaHidden || colSpan <= 1 ? null : colSpan}"

package/src/lib/components/DayHeader.svelte

@@ -4,11 +4,11 @@
 
     let {date, alPrefix = ''} = $props();
 
-    let {_intlDayHeader, _intlDayHeaderAL} = getContext('state');
+    let {intlDayHeader, intlDayHeaderAL} = $derived(getContext('state'));
 </script>
 
 <time
     datetime="{toISOString(date, 10)}"
-    aria-label="{alPrefix}{$_intlDayHeaderAL.format(date)}"
-    {@attach contentFrom($_intlDayHeader.format(date))}
+    aria-label="{alPrefix}{intlDayHeaderAL.format(date)}"
+    {@attach contentFrom(intlDayHeader.format(date))}
 ></time>

package/src/lib/components/InteractableEvent.svelte

@@ -1,7 +1,7 @@
 <script>
     import {getContext} from 'svelte';
     import BaseEvent from './BaseEvent.svelte';
-    import {bgEvent, helperEvent} from "#lib";
+    import {bgEvent, helperEvent} from '#lib';
 
     let {
         el = $bindable(),
@@ -12,22 +12,21 @@
         forceMargin
     } = $props();
 
-    let {_interaction, _iClasses} = getContext('state');
+    let {iClasses, interaction: {action, resizer: Resizer}} = $derived(getContext('state'));
+    let {snap} = $derived(getContext('view-state'));  // timeGrid has snap, others don't
 
     let event = $derived(chunk.event);
     let display = $derived(chunk.event.display);
 
     // Class
-    let classes = $derived(classNames => $_iClasses(classNames, event));
+    let classes = $derived(classNames => iClasses(classNames, event));
 
     function createDragHandler(event) {
-        return $_interaction.action?.draggable(event)
-            ? jsEvent => $_interaction.action.drag(event, jsEvent, forceDate, forceMargin)
-            : $_interaction.action?.noAction;
+        return action?.draggable(event)
+            ? jsEvent => action.drag(event, jsEvent, forceDate, forceMargin, snap)
+            : action?.noAction;
     }
     let onpointerdown = $derived(!bgEvent(display) && !helperEvent(display) ? createDragHandler(event) : undefined);
-
-    let Resizer = $derived($_interaction.resizer);
 </script>
 
 <BaseEvent bind:el {chunk} {classes} {styles} {onpointerdown}>

package/src/lib/derived.js

@@ -0,0 +1,80 @@
+import {untrack} from 'svelte';
+import {isFunction} from './utils.js';
+import {toLocalDate} from './date.js';
+
+export function intl(mainState, option) {
+    return () => {
+        // Dependencies
+        let {options: {locale}} = mainState;
+        let format = mainState.options[option];
+
+        let intl;
+
+        untrack(() => {
+            intl = isFunction(format)
+                ? {format}
+                : new Intl.DateTimeFormat(locale, format);
+        });
+
+        return {
+            format: date => intl.format(toLocalDate(date))
+        };
+    };
+}
+
+export function intlRange(mainState, option) {
+    return () => {
+        // Dependencies
+        let {options: {locale}} = mainState;
+        let format = mainState.options[option];
+
+        let formatRange;
+
+        untrack(() => {
+            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/lib/index.js

@@ -2,7 +2,7 @@ export * from './a11y.js';
 export * from './attachments.js';
 export * from './chunks.js';
 export * from './date.js';
-export * from './debounce.js';
+export * from './derived.js';
 export * from './dom.js';
 export * from './events.js';
 export * from './options.js';
@@ -10,6 +10,5 @@ export * from './payload.js';
 export * from './range.js';
 export * from './resources.js';
 export * from './slots.js';
-export * from './stores.js';
 export * from './utils.js';
 export * from './view.js';