@event-calendar/core 4.7.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.7.0",
+  "version": "5.0.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.34.8"
+    "svelte": "^5.45.8"
   }
 }

package/src/Auxiliary.svelte

@@ -1,12 +1,11 @@
 <script>
     import {getContext, untrack} from 'svelte';
     import {
-        toISOString, toLocalDate, toViewWithLocalDates, isFunction, task, flushDebounce, hasYScroll
+        toISOString, toLocalDate, toViewWithLocalDates, isFunction, task, flushDebounce
     } from '#lib';
 
     let {
-        datesSet, eventAllUpdated, _auxiliary, _activeRange, _filteredEvents, _scrollable, _bodyEl, _tasks, _recheckScrollable,
-        _queue, _view
+        datesSet, eventAllUpdated, _auxiliary, _activeRange, _filteredEvents, _tasks, _queue, _view
     } = getContext('state');
 
     // datesSet callback
@@ -41,16 +40,6 @@
             flushDebounce($_queue);
         });
     });
-
-    $effect(() => {
-        $_recheckScrollable;
-        untrack(() => {
-            if ($_bodyEl) {
-                $_scrollable = hasYScroll($_bodyEl);
-            }
-            $_recheckScrollable = false;
-        });
-    });
 </script>
 
 {#each $_auxiliary as Component}

package/src/Buttons.svelte

@@ -1,49 +1,55 @@
 <script>
-    import {getContext, tick} from 'svelte';
-    import {createDate, cloneDate, setContent, setMidnight, nextDate, prevDate, outsideRange} from '#lib';
+    import {getContext, tick, untrack} from 'svelte';
+    import {cloneDate, contentFrom, nextDate, prevDate, outsideRange} from '#lib';
 
-    export let buttons;
+    let {buttons} = $props();
 
     let {
-        _currentRange, _viewTitle, _viewDates, buttonText, customButtons, date, duration, hiddenDays, theme, validRange,
-        view
+        _currentRange, _today, _viewTitle, _viewDates, buttonText, customButtons, date, duration, hiddenDays, theme,
+        validRange, view
     } = getContext('state');
 
-    let today = setMidnight(createDate());
-    let prevDisabled, nextDisabled, todayDisabled;
+    let prevDisabled = $state(false);
+    let nextDisabled = $state(false);
+    let todayDisabled = $state(false);
 
     let running = false;
-    function isRunning() {
-        return running;
-    }
-    $: if (!isRunning()) {
-        running = true;
-        prevDisabled = false;
-        nextDisabled = false;
-        if ($validRange.start) {
-            let currentDate = cloneDate($date);
-            $date = prevDate($date, $duration, $hiddenDays);
-            prevDisabled = test();
-            $date = currentDate;
-        }
-        if ($validRange.end) {
-            let currentDate = cloneDate($date);
-            $date = nextDate($date, $duration);
-            nextDisabled = test();
-            $date = currentDate;
-        }
-        todayDisabled = today >= $_currentRange.start && today < $_currentRange.end;
-        if (!todayDisabled && ($validRange.start || $validRange.end)) {
-            let currentDate = cloneDate($date);
-            $date = cloneDate(today);
-            todayDisabled = test();
-            $date = currentDate;
-        }
-        tick().then(() => running = false);
-    }
+    $effect.pre(() => {
+        $_viewDates;
+        $validRange;
+        buttons;
+        untrack(() => {
+            if (!running) {
+                running = true;
+                if (buttons.includes('prev')) {
+                    prevDisabled = false;
+                    if ($validRange.start) {
+                        prevDisabled = test(prev);
+                    }
+                }
+                if (buttons.includes('next')) {
+                    nextDisabled = false;
+                    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);
+                    }
+                }
+                tick().then(() => running = false);
+            }
+        });
+    });
 
-    function test() {
-        return $_viewDates.every(date => outsideRange(date, $validRange));
+    function test(fn) {
+        let currentDate = cloneDate($date);
+        fn();
+        let result = $_viewDates.every(date => outsideRange(date, $validRange));
+        $date = currentDate;
+        return result;
     }
 
     function prev() {
@@ -53,45 +59,49 @@
     function next() {
         $date = nextDate($date, $duration);
     }
+
+    function today() {
+        $date = cloneDate($_today);
+    }
 </script>
 
 {#each buttons as button}
-    {#if button == 'title'}
-        <!-- svelte-ignore a11y-missing-content -->
-        <h2 class="{$theme.title}" use:setContent={$_viewTitle}></h2>
-    {:else if button == 'prev'}
+    {#if button === 'title'}
+        <!-- svelte-ignore a11y_missing_content -->
+        <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}
-            on:click={prev}
+            onclick={prev}
             disabled={prevDisabled}
         ><i class="{$theme.icon} ec-{button}"></i></button>
-    {:else if button == 'next'}
+    {:else if button === 'next'}
         <button
             class="{$theme.button} ec-{button}"
             aria-label={$buttonText.next}
             title={$buttonText.next}
-            on:click={next}
+            onclick={next}
             disabled={nextDisabled}
         ><i class="{$theme.icon} ec-{button}"></i></button>
-    {:else if button == 'today'}
+    {:else if button === 'today'}
         <button
             class="{$theme.button} ec-{button}"
-            on:click={() => $date = cloneDate(today)}
+            onclick={today}
             disabled={todayDisabled}
         >{$buttonText[button]}</button>
     {:else if $customButtons[button]}
         <!-- svelte-ignore a11y_consider_explicit_label -->
         <button
-            class="{$theme.button} ec-{button}{$customButtons[button].active ? ' ' + $theme.active : ''}"
-            on:click={$customButtons[button].click}
-            use:setContent={$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 != ''}
+    {:else if button !== ''}
         <button
-            class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}"
-            on:click={() => $view = button}
+            class={[$theme.button, `ec-${button}`, $view === button && $theme.active]}
+            onclick={() => $view = button}
         >{$buttonText[button]}</button>
     {/if}
 {/each}

package/src/Calendar.svelte

@@ -1,5 +1,5 @@
 <script>
-    import '../dist/index.css';
+    import './styles/index.css';
     import {setContext, untrack} from 'svelte';
     import {get} from 'svelte/store';
     import {diff} from './storage/options.js';
@@ -13,15 +13,17 @@
 
     let {plugins = [], options = {}} = $props();
 
+    // svelte-ignore state_referenced_locally
     let state = new State(plugins, options);
     setContext('state', state);
 
     let {
-        _viewComponent, _interaction, _iClass, _events, _scrollable,
+        _viewComponent, _interaction, _iClass, _events,
         date, duration, hiddenDays, height, theme, view
     } = state;
 
     // Reactively update options that did change
+    // svelte-ignore state_referenced_locally
     let prevOptions = {...options};
     $effect(() => {
         for (let [name, value] of diff(options, prevOptions)) {
@@ -122,7 +124,11 @@
 </script>
 
 <div
-    class="{$theme.calendar} {$theme.view}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
+    class={[
+        $theme.calendar,
+        $theme.view,
+        $_iClass && $theme[$_iClass]
+    ]}
     style:height={$height}
     role="{listView($view) ? 'list' : 'table'}"
 >

package/src/lib/a11y.js

@@ -1,8 +1,8 @@
 
-export function keyEnter(fn) {
+export function keyEnter(fn, _this = undefined) {
     return function (e) {
         return e.key === 'Enter' || e.key === ' ' && !e.preventDefault()  // prevent page scroll down
-            ? fn.call(this, e)
+            ? fn.call(_this, e)
             : undefined;
     };
 }

package/src/lib/attachments.js

@@ -0,0 +1,61 @@
+
+export function contentFrom(content) {
+    return el => {
+        if (typeof content == 'string') {
+            el.innerText = content;
+        } else if (content?.domNodes) {
+            el.replaceChildren(...content.domNodes);
+        } else if (content?.html) {
+            el.innerHTML = content.html;
+        }
+    };
+}
+
+/** Dispatch event occurred outside of node */
+export function outsideEvent(type) {
+    return el => {
+        let listener = jsEvent => {
+            if (el && !el.contains(jsEvent.target)) {
+                el.dispatchEvent(
+                    new CustomEvent(type + 'outside', {detail: {jsEvent}})
+                );
+            }
+        };
+        document.addEventListener(type, listener, true);
+
+        return () => {
+            document.removeEventListener(type, listener, true);
+        };
+    };
+}
+
+export function resizeObserver(callback) {
+    return el => {
+        let observer = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                callback(el, entry);
+            }
+        });
+        observer.observe(el);
+
+        return () => {
+            observer.unobserve(el);
+        };
+    };
+}
+
+export function intersectionObserver(callback, options) {
+    return el => {
+        let observer = new IntersectionObserver(entries => {
+            for (let entry of entries) {
+                callback(el, entry);
+            }
+        }, options);
+
+        observer.observe(el);
+
+        return () => {
+            observer.unobserve(el);
+        };
+    };
+}

package/src/lib/chunks.js

@@ -0,0 +1,117 @@
+import {datesEqual} from './date.js';
+import {eventIntersects} from './events.js';
+import {assign} from './utils.js';
+
+/**
+ * @returns {{
+ *   start: Date,
+ *   end: Date,
+ *   event: Object,
+ *   zeroDuration?: boolean,
+ *   gridColumn?: Number,
+ *   gridRow?: Number,
+ *   group?: Object,
+ *   groupColumn?: Number,
+ *   dates?: Array
+ *   day?: Array,
+ *   long?: Object,
+ *   prev?: Object,
+ *   top?: Number,
+ *   bottom?: Number,
+ *   left?: Number,
+ *   height?: Number,
+ *   width?: Number,
+ *   maxHeight?: Number
+ * }}
+ */
+export function createEventChunk(event, start, end) {
+    let chunk = {
+        start: event.start > start ? event.start : start,
+        end: event.end < end ? event.end : end,
+        event
+    };
+    chunk.zeroDuration = datesEqual(chunk.start, chunk.end);
+
+    return chunk;
+}
+
+/**
+ * Create event chunk for month view and all-day slot in week view
+ */
+export function createAllDayChunks(event, days) {
+    let dates = [];
+    let lastEnd;
+    let gridColumn;
+    let gridRow;
+    for (let {gridColumn: column, gridRow: row, resource, dayStart, dayEnd, disabled} of days) {
+        if (!disabled && eventIntersects(event, dayStart, dayEnd, resource)) {
+            dates.push(dayStart);
+            lastEnd = dayEnd;
+            if (!gridColumn) {
+                gridColumn = column;
+                gridRow = row;
+            }
+        }
+    }
+    if (dates.length) {
+        let chunk = createEventChunk(event, dates[0], lastEnd);
+        // Chunk layout
+        assign(chunk, {gridColumn, gridRow, dates});
+
+        return [chunk];
+    }
+
+    return [];
+}
+
+/**
+ * Prepare event chunks for month view and all-day slot in week view
+ */
+export function prepareAllDayChunks(chunks) {
+    let prevChunks = {};
+    let longChunks = {};
+    for (let chunk of chunks) {
+        let {gridColumn, gridRow} = chunk;
+        // Prepare long chunks
+        for (let i = 1; i < chunk.dates.length; ++ i) {
+            let key = `${gridRow}_${gridColumn + i}`;
+            if (longChunks[key]) {
+                longChunks[key].chunks.push(chunk);
+            } else {
+                longChunks[key] = {
+                    sorted: false,
+                    chunks: [chunk]
+                };
+            }
+        }
+        let key = `${gridRow}_${gridColumn}`;
+        chunk.long = longChunks[key];
+        // Connect with previous chunk
+        chunk.prev = prevChunks[key];
+        prevChunks[key] = chunk;
+    }
+}
+
+export function repositionEvent(chunk, height, top = 0) {
+    if (chunk.prev) {
+        top = chunk.prev.bottom + 1;
+    }
+    let bottom = top + height;
+    if (chunk.long) {
+        let longChunks = chunk.long;
+        if (!longChunks.sorted) {
+            longChunks.chunks.sort((a, b) => a.top - b.top);
+            longChunks.sorted = true;
+        }
+        for (let longChunk of longChunks.chunks) {
+            if (top < longChunk.bottom && bottom > longChunk.top) {
+                let offset = longChunk.bottom - top + 1;
+                top += offset;
+                bottom += offset;
+            }
+        }
+    }
+    assign(chunk, {top, bottom});
+
+    return top;
+}

package/src/lib/components/BaseDay.svelte

@@ -0,0 +1,50 @@
+<script>
+    import {getContext, onMount} from 'svelte';
+    import {datesEqual, identity, setPayload} from '#lib';
+
+    let {
+        el = $bindable(),
+        date,
+        allDay = false,
+        resource = undefined,
+        dateFromPoint = () => date,
+        classes = identity,
+        disabled = false,
+        highlight = false,
+        role = 'cell',
+        children
+    } = $props();
+
+    let {_interaction, _today, highlightedDates, theme} = getContext('state');
+
+    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
+    ]));
+
+    // dateFromPoint
+    onMount(() => {
+        setPayload(el, (x, y) => {
+            return {
+                allDay,
+                date: dateFromPoint(x, y),
+                resource,
+                dayEl: el,
+                disabled
+            };
+        });
+    });
+</script>
+
+<div
+    bind:this={el}
+    class={classNames}
+    {role}
+    onpointerdown={!disabled ? $_interaction.action?.select : undefined}
+>{@render children?.()}</div>

package/src/lib/components/BaseEvent.svelte

@@ -2,7 +2,7 @@
     import {getContext, onMount} from 'svelte';
     import {
         bgEvent, createEventClasses, createEventContent, entries, helperEvent, identity, isFunction, keyEnter,
-        resourceBackgroundColor, resourceTextColor, setContent, toEventWithLocalDates, toViewWithLocalDates
+        resourceBackgroundColor, resourceTextColor, contentFrom, toEventWithLocalDates, toViewWithLocalDates
     } from '#lib';
 
     let {
@@ -33,7 +33,7 @@
     let classNames = $derived(classes([
         bgEvent(display) ? $theme.bgEvent : $theme.event,
         ...createEventClasses($eventClassNames, event, $_view)
-    ]).join(' '));
+    ]));
 
     // Content
     let [timeText, content] = $derived(createEventContent(
@@ -78,7 +78,7 @@
     {onpointerdown}
 >
     {#snippet defaultBody()}
-        <div class={$theme.eventBody} use:setContent={content}></div>
+        <div class={$theme.eventBody} {@attach contentFrom(content)}></div>
     {/snippet}
     {#if body}
         {@render body(defaultBody, bgColor, txtColor)}

package/src/lib/components/ColHead.svelte

@@ -0,0 +1,34 @@
+<script>
+    import {getContext} from 'svelte';
+    import {datesEqual} from '#lib';
+
+    let {
+        date,
+        className,
+        weekday = true,
+        colSpan = 1,
+        colIndex,
+        ariaHidden = false,
+        disabled = false,
+        highlight = false,
+        children
+    } = $props();
+
+    let {_today, theme} = 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
+    ]}
+    role="{ariaHidden ? null : 'columnheader'}"
+    aria-colspan="{ariaHidden || colSpan <= 1 ? null : colSpan}"
+    aria-colindex="{ariaHidden ? null : colIndex}"
+    aria-hidden="{ariaHidden ? 'true' : null}"
+>
+    {@render children()}
+</div>

package/src/lib/components/DayHeader.svelte

@@ -0,0 +1,14 @@
+<script>
+    import {getContext} from 'svelte';
+    import {contentFrom, toISOString} from '#lib';
+
+    let {date, alPrefix = ''} = $props();
+
+    let {_intlDayHeader, _intlDayHeaderAL} = getContext('state');
+</script>
+
+<time
+    datetime="{toISOString(date, 10)}"
+    aria-label="{alPrefix}{$_intlDayHeaderAL.format(date)}"
+    {@attach contentFrom($_intlDayHeader.format(date))}
+></time>

package/src/lib/components/InteractableEvent.svelte

@@ -22,9 +22,7 @@
 
     function createDragHandler(event) {
         return $_interaction.action?.draggable(event)
-            ? jsEvent => $_interaction.action.drag(
-                event, jsEvent, forceDate?.(), forceMargin?.()
-            )
+            ? jsEvent => $_interaction.action.drag(event, jsEvent, forceDate, forceMargin)
             : $_interaction.action?.noAction;
     }
     let onpointerdown = $derived(!bgEvent(display) && !helperEvent(display) ? createDragHandler(event) : undefined);

package/src/lib/components/index.js

@@ -1,2 +1,5 @@
+export {default as BaseDay} from './BaseDay.svelte';
 export {default as BaseEvent} from './BaseEvent.svelte';
+export {default as ColHead} from './ColHead.svelte';
+export {default as DayHeader} from './DayHeader.svelte';
 export {default as InteractableEvent} from './InteractableEvent.svelte';

package/src/lib/date.js

@@ -159,7 +159,7 @@ export function prevDate(date, duration, hiddenDays) {
 export function getWeekNumber(date, firstDay) {
     // Copy date so don't modify original
     date = cloneDate(date);
-    if (firstDay == 0) {  // Western
+    if (firstDay === 0) {  // Western
         // Set to nearest Saturday: current date + 6 - current day number
         date.setUTCDate(date.getUTCDate() + 6 - date.getUTCDay());
     } else {  // ISO

package/src/lib/dom.js

@@ -16,10 +16,6 @@ export function createElement(tag, className, content, attrs = []) {
     return el;
 }
 
-export function hasYScroll(el) {
-    return el.scrollHeight > el.clientHeight;
-}
-
 export function rect(el) {
     return el.getBoundingClientRect();
 }