@event-calendar/core 5.0.6 → 5.1.0

package/src/plugins/interaction/Resizer.svelte

@@ -5,32 +5,34 @@
 
     let {chunk, axis, forceDate = undefined, forceMargin = undefined, children} = $props();
 
-    let {theme, eventDurationEditable, eventResizableFromStart, editable, _interaction} = getContext('state');
+    let {interaction: {action}, options: {editable, eventDurationEditable, eventResizableFromStart, theme}} = $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);
 
     let resizable = $derived(
-        !bgEvent(display) && !helperEvent(display) && eventResizable(event, $eventDurationEditable, $editable)
+        !bgEvent(display) && !helperEvent(display) && eventResizable(event, eventDurationEditable, editable)
     );
 
     function createResizeHandler(start) {
-        return jsEvent => $_interaction.action.resize(
+        return jsEvent => action.resize(
             event,
             jsEvent,
             start,
             axis,
             forceDate,
             forceMargin,
-            chunk.zeroDuration
+            chunk.zeroDuration,
+            snap
         );
     }
 </script>
 
-{#if resizable && $eventResizableFromStart}
-    <div class="{$theme.resizer} {$theme.start}" onpointerdown={createResizeHandler(true)}></div>
+{#if resizable && eventResizableFromStart}
+    <div class="{theme.resizer} {theme.start}" onpointerdown={createResizeHandler(true)}></div>
 {/if}
 {@render children()}
 {#if resizable}
-    <div class="{$theme.resizer}" onpointerdown={createResizeHandler(false)}></div>
+    <div class="{theme.resizer}" onpointerdown={createResizeHandler(false)}></div>
 {/if}

package/src/plugins/interaction/effects.js

@@ -0,0 +1,37 @@
+import {bgEvent, helperEvent, listen} from '#lib';
+import {eventDraggable} from './lib';
+
+export function setIClasses(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {editable, eventStartEditable, theme}} = mainState;
+
+        mainState.iClasses = (classNames, event) => {
+            let {display} = event;
+            return [
+                ...classNames,
+                helperEvent(display)
+                    ? [theme[display]]
+                    : (
+                        !bgEvent(display) && eventDraggable(event, eventStartEditable, editable)
+                            ? [theme.draggable]
+                            : []
+                    )
+            ];
+        };
+    };
+}
+
+export function handleScroll(mainState) {
+    return () => {
+        // Dependencies
+        let {interaction, mainEl} = mainState;
+
+        if (mainEl) {
+            return listen(mainEl, 'scroll', () => {
+                interaction.action.handleScroll();
+                interaction.pointer?.handleScroll();
+            });
+        }
+    };
+}

package/src/plugins/interaction/index.js

@@ -1,46 +1,52 @@
+import {assign} from '#lib';
 import Auxiliary from './Auxiliary.svelte';
 
 export default {
     createOptions(options) {
-        options.dateClick = undefined;
-        options.dragConstraint = undefined;
-        options.dragScroll = true;
-        options.editable = false;
-        options.eventDragMinDistance = 5;
-        options.eventDragStart = undefined;
-        options.eventDragStop = undefined;
-        options.eventDrop = undefined;
-        options.eventDurationEditable = true;
-        options.eventLongPressDelay = undefined;
-        options.eventResizableFromStart = false;
-        options.eventResizeStart = undefined;
-        options.eventResizeStop = undefined;
-        options.eventResize = undefined;
-        options.eventStartEditable = true;
-        options.longPressDelay = 1000;
-        options.pointer = false;
-        options.resizeConstraint = undefined;
-        options.select = undefined;
-        options.selectBackgroundColor = undefined;  // ec option
-        options.selectConstraint = undefined;
-        options.selectLongPressDelay = undefined;
-        options.selectMinDistance = 5;
-        options.unselect = undefined;
-        options.unselectAuto = true;
-        options.unselectCancel = '';
-        options.theme.draggable = 'ec-draggable';
-        options.theme.ghost = 'ec-ghost';
-        options.theme.preview = 'ec-preview';
-        options.theme.pointer = 'ec-pointer';
-        options.theme.resizer = 'ec-resizer';
-        options.theme.start = 'ec-start';
-        options.theme.dragging = 'ec-dragging';
-        options.theme.resizingY = 'ec-resizing-y';
-        options.theme.resizingX = 'ec-resizing-x';
-        options.theme.selecting = 'ec-selecting';
+        assign(options, {
+            dateClick: undefined,
+            dragConstraint: undefined,
+            dragScroll: true,
+            editable: false,
+            eventDragMinDistance: 5,
+            eventDragStart: undefined,
+            eventDragStop: undefined,
+            eventDrop: undefined,
+            eventDurationEditable: true,
+            eventLongPressDelay: undefined,
+            eventResizableFromStart: false,
+            eventResizeStart: undefined,
+            eventResizeStop: undefined,
+            eventResize: undefined,
+            eventStartEditable: true,
+            longPressDelay: 1000,
+            pointer: false,
+            resizeConstraint: undefined,
+            select: undefined,
+            selectBackgroundColor: undefined,  // ec option
+            selectConstraint: undefined,
+            selectLongPressDelay: undefined,
+            selectMinDistance: 5,
+            snapDuration: undefined,
+            unselect: undefined,
+            unselectAuto: true,
+            unselectCancel: ''
+        });
+        assign(options.theme, {
+            draggable: 'ec-draggable',
+            ghost: 'ec-ghost',
+            preview: 'ec-preview',
+            pointer: 'ec-pointer',
+            resizer: 'ec-resizer',
+            start: 'ec-start',
+            dragging: 'ec-dragging',
+            resizingY: 'ec-resizing-y',
+            resizingX: 'ec-resizing-x',
+            selecting: 'ec-selecting'
+        });
     },
 
-    createStores(state) {
-        state._auxiliary.update($_auxiliary => [...$_auxiliary, Auxiliary]);
+    initState(mainState) {
+        mainState.auxComponents.push(Auxiliary);
     }
 }

package/src/plugins/interaction/lib/utils.js

@@ -13,4 +13,4 @@ export function animate(fn) {
 
 export function limit(value, minLimit, maxLimit) {
     return max(minLimit, min(maxLimit, value));
-}
+}

package/src/plugins/interaction/state.svelte.js

@@ -0,0 +1,12 @@
+import {handleScroll, setIClasses} from './effects.js';
+
+export default class AuxState {
+    constructor(mainState) {
+        this.#setupEffects(mainState);
+    }
+
+    #setupEffects(mainState) {
+        $effect.pre(setIClasses(mainState));
+        $effect(handleScroll(mainState));
+    }
+}

package/src/plugins/list/Day.svelte

@@ -8,10 +8,11 @@
 
     let {date} = $props();
 
-    let {_filteredEvents, _intlListDay, _intlListDaySide, highlightedDates, theme, validRange} = getContext('state');
+    let {filteredEvents, options: {highlightedDates, theme, validRange}} = $derived(getContext('state'));
+    let {intlListDay, intlListDaySide} = $derived(getContext('view-state'));
 
-    let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
-    let disabled = $derived(outsideRange(date, $validRange));
+    let highlight = $derived(highlightedDates.some(d => datesEqual(d, date)));
+    let disabled = $derived(outsideRange(date, validRange));
     let datetime = $derived(toISOString(date, 10));
 
     let chunks = $derived.by(() => {
@@ -19,7 +20,7 @@
         if (!disabled) {
             let start = date;
             let end = addDay(cloneDate(date));
-            for (let event of $_filteredEvents) {
+            for (let event of filteredEvents) {
                 if (!bgEvent(event.display) && eventIntersects(event, start, end)) {
                     let chunk = createEventChunk(event, start, end);
                     chunks.push(chunk);
@@ -33,9 +34,9 @@
 {#if chunks.length}
     <BaseDay {date} allDay role="listitem" {disabled} {highlight}>
         <!-- svelte-ignore a11y_missing_content -->
-        <h4 class="{$theme.dayHead}">
-            <time {datetime} {@attach contentFrom($_intlListDay.format(date))}></time>
-            <time class="{$theme.daySide}" {datetime} {@attach contentFrom($_intlListDaySide.format(date))}></time>
+        <h4 class="{theme.dayHead}">
+            <time {datetime} {@attach contentFrom(intlListDay.format(date))}></time>
+            <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
         </h4>
         {#each chunks as chunk (chunk.event)}
             <Event {chunk}/>

package/src/plugins/list/Event.svelte

@@ -4,7 +4,7 @@
 
     let {chunk} = $props();
 
-    let {theme, _interaction} = getContext('state');
+    let {interaction, options: {theme}} = $derived(getContext('state'));
 
     // Style
     let styles = $derived(style => {
@@ -14,9 +14,9 @@
     });
 </script>
 
-<BaseEvent {chunk} {styles} onpointerdown={$_interaction.action?.noAction}>
+<BaseEvent {chunk} {styles} onpointerdown={interaction.action?.noAction}>
     {#snippet body(defaultBody, bgColor, txtColor)}
-        <div class="{$theme.eventTag}" style:background-color={bgColor}></div>
+        <div class="{theme.eventTag}" style:background-color={bgColor}></div>
         {@render defaultBody()}
     {/snippet}
 </BaseEvent>

package/src/plugins/list/View.svelte

@@ -1,20 +1,21 @@
 <script>
-    import {getContext} from 'svelte';
-    import {addDay, cloneDate, identity, contentFrom, bgEvent, isFunction, toViewWithLocalDates} from '#lib';
+    import {getContext, setContext} from 'svelte';
+    import {addDay, cloneDate, contentFrom, bgEvent, isFunction, toViewWithLocalDates} from '#lib';
+    import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
 
-    let {_activeRangeExt, _mainEl, _filteredEvents, _view, _viewDates, noEventsClick, noEventsContent, theme} = getContext('state');
+    let mainState = getContext('state');
+    let viewState = new ViewState(mainState);
+    setContext('view-state', viewState);
 
-    $effect.pre(() => {
-        $_activeRangeExt = identity;
-    });
+    let {filteredEvents, view, viewDates, options: {noEventsClick, noEventsContent, theme}} = $derived(mainState);
 
     let noEvents = $derived.by(() => {
         let noEvents = true;
-        if ($_viewDates.length) {
-            let start = $_viewDates[0];
-            let end = addDay(cloneDate($_viewDates.at(-1)));
-            for (let event of $_filteredEvents) {
+        if (viewDates.length) {
+            let start = viewDates[0];
+            let end = addDay(cloneDate(viewDates.at(-1)));
+            for (let event of filteredEvents) {
                 if (!bgEvent(event.display) && event.start < end && event.end > start) {
                     noEvents = false;
                     break;
@@ -24,22 +25,22 @@
         return noEvents;
     });
 
-    let content = $derived(isFunction($noEventsContent) ? $noEventsContent() : $noEventsContent);
+    let content = $derived(isFunction(noEventsContent) ? noEventsContent() : noEventsContent);
 
     function onclick(jsEvent) {
-        if (isFunction($noEventsClick)) {
-            $noEventsClick({jsEvent, view: toViewWithLocalDates($_view)});
+        if (isFunction(noEventsClick)) {
+            noEventsClick({jsEvent, view: toViewWithLocalDates(view)});
         }
     }
 </script>
 
-<section bind:this={$_mainEl} class="{$theme.main}">
+<section bind:this={mainState.mainEl} class="{theme.main}">
     {#if noEvents}
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div {@attach contentFrom(content)} class="{$theme.noEvents}" {onclick}></div>
+        <div {@attach contentFrom(content)} class="{theme.noEvents}" {onclick}></div>
     {:else}
-        {#each $_viewDates as date}
+        {#each viewDates as date}
             <Day {date}/>
         {/each}
     {/if}

package/src/plugins/list/index.js

@@ -1,49 +1,57 @@
-import {btnTextDay, btnTextWeek, btnTextMonth, btnTextYear, intl, themeView} from '#lib';
+import {btnTextDay, btnTextWeek, btnTextMonth, btnTextYear, themeView, assign} from '#lib';
 import View from './View.svelte';
 
 export default {
     createOptions(options) {
-        // Common options
-        options.buttonText.listDay = 'list';
-        options.buttonText.listWeek = 'list';
-        options.buttonText.listMonth = 'list';
-        options.buttonText.listYear = 'list';
-        options.listDayFormat = {weekday: 'long'};
-        options.listDaySideFormat = {year: 'numeric', month: 'long', day: 'numeric'};
-        options.noEventsClick = undefined;  // ec option
-        options.noEventsContent = 'No events';
-        options.theme.daySide = 'ec-day-side';
-        options.theme.eventTag = 'ec-event-tag';
-        options.theme.noEvents = 'ec-no-events';
-        options.view = 'listWeek';
-        options.views.listDay = {
-            buttonText: btnTextDay,
-            component: View,
-            duration: {days: 1},
-            theme: themeView('ec-list ec-day-view')
-        };
-        options.views.listWeek = {
-            buttonText: btnTextWeek,
-            component: View,
-            duration: {weeks: 1},
-            theme: themeView('ec-list ec-week-view')
-        };
-        options.views.listMonth = {
-            buttonText: btnTextMonth,
-            component: View,
-            duration: {months: 1},
-            theme: themeView('ec-list ec-month-view')
-        };
-        options.views.listYear = {
-            buttonText: btnTextYear,
-            component: View,
-            duration: {years: 1},
-            theme: themeView('ec-list ec-year-view')
-        };
-    },
-
-    createStores(state) {
-        state._intlListDay = intl(state.locale, state.listDayFormat);
-        state._intlListDaySide = intl(state.locale, state.listDaySideFormat);
+        assign(options, {
+            listDayFormat: {weekday: 'long'},
+            listDaySideFormat: {year: 'numeric', month: 'long', day: 'numeric'},
+            noEventsClick: undefined,  // ec option
+            noEventsContent: 'No events',
+            // Common options
+            view: 'listWeek'
+        });
+        assign(options.buttonText, {
+            listDay: 'list',
+            listWeek: 'list',
+            listMonth: 'list',
+            listYear: 'list'
+        });
+        assign(options.theme, {
+            daySide: 'ec-day-side',
+            eventTag: 'ec-event-tag',
+            noEvents: 'ec-no-events'
+        });
+        assign(options.views, {
+            listDay: {
+                buttonText: btnTextDay,
+                component: initViewComponent,
+                duration: {days: 1},
+                theme: themeView('ec-list ec-day-view')
+            },
+            listWeek: {
+                buttonText: btnTextWeek,
+                component: initViewComponent,
+                duration: {weeks: 1},
+                theme: themeView('ec-list ec-week-view')
+            },
+            listMonth: {
+                buttonText: btnTextMonth,
+                component: initViewComponent,
+                duration: {months: 1},
+                theme: themeView('ec-list ec-month-view')
+            },
+            listYear: {
+                buttonText: btnTextYear,
+                component: initViewComponent,
+                duration: {years: 1},
+                theme: themeView('ec-list ec-year-view')
+            }
+        });
     }
 }
+
+function initViewComponent(mainState) {
+    mainState.features = ['list'];
+    return View;
+}

package/src/plugins/list/state.svelte.js

@@ -0,0 +1,8 @@
+import {intl} from '#lib';
+
+export default class ViewState {
+    constructor(mainState) {
+        this.intlListDay = $derived.by(intl(mainState, 'listDayFormat'));
+        this.intlListDaySide = $derived.by(intl(mainState, 'listDaySideFormat'));
+    }
+}

package/src/plugins/resource-time-grid/Label.svelte

@@ -4,18 +4,18 @@
 
     let {resource, date = undefined, setLabel = undefined} = $props();
 
-    let {resourceLabelContent, resourceLabelDidMount, _intlDayHeaderAL} = getContext('state');
+    let {intlDayHeaderAL, options: {resourceLabelContent, resourceLabelDidMount}} = $derived(getContext('state'));
 
     let el = $state();
     // Content
     let content = $derived.by(() => {
-        if ($resourceLabelContent) {
-            return isFunction($resourceLabelContent)
-                ? $resourceLabelContent({
+        if (resourceLabelContent) {
+            return isFunction(resourceLabelContent)
+                ? resourceLabelContent({
                     resource,
                     date: date ? toLocalDate(date) : undefined,
                 })
-                : $resourceLabelContent;
+                : resourceLabelContent;
         } else {
             return resource.title;
         }
@@ -26,7 +26,7 @@
         content;
         untrack(() => {
             if (date) {
-                ariaLabel = $_intlDayHeaderAL.format(date) + ', ' + el.innerText;
+                ariaLabel = intlDayHeaderAL.format(date) + ', ' + el.innerText;
             } else if (setLabel) {
                 ariaLabel = undefined;
                 setLabel(el.innerText);
@@ -35,8 +35,8 @@
     });
 
     onMount(() => {
-        if (isFunction($resourceLabelDidMount)) {
-            $resourceLabelDidMount({
+        if (isFunction(resourceLabelDidMount)) {
+            resourceLabelDidMount({
                 resource,
                 date: date ? toLocalDate(date) : undefined,
                 el

package/src/plugins/resource-time-grid/View.svelte

@@ -1,34 +1,55 @@
 <script>
-    import {getContext} from 'svelte';
-    import {createGrid} from './lib.js';
+    import {getContext, tick} from 'svelte';
     import {ColHead, DayHeader} from '#components';
+    import {datesEqual, isRtl} from '#lib';
+    import ViewState from './state.svelte.js';
     import Label from './Label.svelte';
     import View from '../time-grid/View.svelte';
     import NowIndicator from '../time-grid/NowIndicator.svelte';
 
-    let {_viewDates, _viewResources, _slotTimeLimits, datesAboveResources, highlightedDates, validRange, theme} = getContext('state');
+    let mainState = getContext('state');
+    let viewState = new ViewState(mainState);
+
+    let {today, mainEl, viewDates, options: {scrollTime, datesAboveResources, theme}} = $derived(mainState);
+    let {grid, sidebarWidth} = $derived(viewState);
 
     let resourceLabels = $state([]);
+
+    // Handle scrollTime (scroll to today)
+    $effect(() => {
+        if (datesAboveResources) {
+            viewDates;
+            scrollTime;
+            tick().then(scrollToTime);
+        }
+    });
+    function scrollToTime() {
+        if (today >= viewDates[0] && today <= viewDates.at(-1)) {
+            for (let days of grid) {
+                let day = days[0];
+                if (datesEqual(day.dayStart, today)) {
+                    mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / (grid.length * days.length) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+                    break;
+                }
+            }
+        }
+    }
 </script>
 
-<View
-    createGridFn={() => createGrid(
-        $_viewDates, $_viewResources, $_slotTimeLimits, $datesAboveResources, $validRange, $highlightedDates
-    )}
->
-    {#snippet header(grid)}
+<View {viewState}>
+    {#snippet header()}
         {#each grid as days, i}
             {@const {dayStart: date, resource, disabled, highlight} = days[0]}
             <ColHead
                 {date}
-                className={grid[0].length > 1 ? $theme.colGroup : undefined}
-                weekday={$datesAboveResources}
+                className={grid[0].length > 1 ? theme.colGroup : undefined}
+                weekday={datesAboveResources}
                 colSpan={days.length}
                 colIndex={1 + i * days.length}
-                disabled={$datesAboveResources && disabled}
-                highlight={$datesAboveResources && highlight}
+                disabled={datesAboveResources && disabled}
+                highlight={datesAboveResources && highlight}
             >
-                {#if $datesAboveResources}
+                {#if datesAboveResources}
                     <DayHeader {date}/>
                 {:else}
                     <Label {resource} setLabel={label => resourceLabels[i] = label + ', '}/>
@@ -40,7 +61,7 @@
                 {#each days as day, j}
                     {@const {dayStart: date, resource, disabled, highlight} = day}
                     <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
-                        {#if $datesAboveResources}
+                        {#if datesAboveResources}
                             <Label {resource} {date}/>
                         {:else}
                             <DayHeader {date} alPrefix={resourceLabels[i]}/>
@@ -51,8 +72,8 @@
         {/if}
     {/snippet}
 
-    {#snippet nowIndicator(grid)}
-        {#if $datesAboveResources}
+    {#snippet nowIndicator()}
+        {#if datesAboveResources}
             <NowIndicator days={grid.flat()} span={grid[0].length}/>
         {:else}
             {#if grid[0].length > 1}

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

@@ -0,0 +1,67 @@
+import {untrack} from 'svelte';
+import {
+    addDay, addDuration, cloneDate, createResources, datesEqual, eventIntersects, outsideRange
+} from '#lib';
+
+export function viewResources(mainState) {
+    return () => {
+        // Dependencies
+        let {
+            activeRange, filteredEvents, options: {filterResourcesWithEvents, resources}, extensions: {viewResources}
+        } = mainState;
+
+        let result = viewResources ? viewResources(resources) : resources;
+
+        untrack(() => {
+            if (filterResourcesWithEvents) {
+                result = resources.filter(
+                    resource => filteredEvents.some(
+                        event => eventIntersects(event, activeRange.start, activeRange.end, resource)
+                    )
+                );
+            }
+            if (!result.length) {
+                result = createResources([{}]);
+            }
+        });
+
+        return result;
+    };
+}
+
+export function grid(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {viewDates, options: {datesAboveResources, highlightedDates, validRange}} = mainState;
+        let {slotTimeLimits, viewResources} = viewState;
+
+        let grid = [];
+
+        untrack(() => {
+            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;
+    };
+}