@event-calendar/core 4.7.0 → 5.0.0

package/src/plugins/list/Day.svelte

@@ -1,18 +1,15 @@
 <script>
     import {getContext} from 'svelte';
     import {
-        addDay, bgEvent, cloneDate, createEventChunk, datesEqual, eventIntersects, outsideRange, setContent, setPayload,
-        sortEventChunks, toISOString
+        addDay, bgEvent, cloneDate, createEventChunk, datesEqual, eventIntersects, outsideRange, contentFrom, toISOString
     } from '#lib';
+    import {BaseDay} from '#components';
     import Event from './Event.svelte';
 
     let {date} = $props();
 
-    let {_filteredEvents, _interaction, _intlListDay, _intlListDaySide, _today,
-        resources, eventOrder, filterEventsWithResources, highlightedDates, theme, validRange} = getContext('state');
+    let {_filteredEvents, _intlListDay, _intlListDaySide, highlightedDates, theme, validRange} = getContext('state');
 
-    let el = $state();
-    let isToday = $derived(datesEqual(date, $_today));
     let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
     let disabled = $derived(outsideRange(date, $validRange));
     let datetime = $derived(toISOString(date, 10));
@@ -23,38 +20,25 @@
             let start = date;
             let end = addDay(cloneDate(date));
             for (let event of $_filteredEvents) {
-                if (!bgEvent(event.display) && eventIntersects(event, start, end, $filterEventsWithResources ? $resources : undefined)) {
+                if (!bgEvent(event.display) && eventIntersects(event, start, end)) {
                     let chunk = createEventChunk(event, start, end);
                     chunks.push(chunk);
                 }
             }
-            sortEventChunks(chunks, $eventOrder);
         }
         return chunks;
     });
-
-    // dateFromPoint
-    $effect(() => {
-        if (el) {
-            setPayload(el, () => ({allDay: true, date, resource: undefined, dayEl: el, disabled}));
-        }
-    });
 </script>
 
 {#if chunks.length}
-    <div
-        bind:this={el}
-        class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{isToday ? ' ' + $theme.today : ''}{highlight ? ' ' + $theme.highlight : ''}"
-        role="listitem"
-        onpointerdown={$_interaction.action?.select}
-    >
+    <BaseDay {date} allDay role="listitem" {disabled} {highlight}>
         <!-- svelte-ignore a11y_missing_content -->
         <h4 class="{$theme.dayHead}">
-            <time {datetime} use:setContent={$_intlListDay.format(date)}></time>
-            <time class="{$theme.daySide}" {datetime} use:setContent={$_intlListDaySide.format(date)}></time>
+            <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}/>
         {/each}
-    </div>
+    </BaseDay>
 {/if}

package/src/plugins/list/View.svelte

@@ -1,5 +1,42 @@
 <script>
-    import Body from './Body.svelte';
+    import {getContext} from 'svelte';
+    import {addDay, cloneDate, toViewWithLocalDates, contentFrom, bgEvent, isFunction} from '#lib';
+    import Day from './Day.svelte';
+
+    let {_mainEl, _filteredEvents, _view, _viewDates, noEventsClick, noEventsContent, theme} = getContext('state');
+
+    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 (!bgEvent(event.display) && event.start < end && event.end > start) {
+                    noEvents = false;
+                    break;
+                }
+            }
+        }
+        return noEvents;
+    });
+
+    let content = $derived(isFunction($noEventsContent) ? $noEventsContent() : $noEventsContent);
+
+    function onclick(jsEvent) {
+        if (isFunction($noEventsClick)) {
+            $noEventsClick({jsEvent, view: toViewWithLocalDates($_view)});
+        }
+    }
 </script>
 
-<Body/>
+<section bind:this={$_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>
+    {:else}
+        {#each $_viewDates as date}
+            <Day {date}/>
+        {/each}
+    {/if}
+</section>

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

@@ -1,6 +1,6 @@
 <script>
     import {getContext, onMount, untrack} from 'svelte';
-    import {setContent, toLocalDate, isFunction} from '#lib';
+    import {contentFrom, toLocalDate, isFunction} from '#lib';
 
     let {resource, date = undefined, setLabel = undefined} = $props();
 
@@ -48,5 +48,5 @@
 <span
     bind:this={el}
     aria-label="{ariaLabel}"
-    use:setContent={content}
+    {@attach contentFrom(content)}
 ></span>

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

@@ -1,95 +1,51 @@
 <script>
     import {getContext} from 'svelte';
-    import {datesEqual, setContent, toISOString} from '#lib';
-    import {Section, Body, Day, Week} from '../time-grid/index.js';
+    import {createGrid} from './lib.js';
+    import {ColHead, DayHeader} from '#components';
     import Label from './Label.svelte';
+    import View from '../time-grid/View.svelte';
 
-    let {
-        datesAboveResources, _today, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme
-    } = getContext('state');
-
-    let loops = $derived($datesAboveResources ? [$_viewDates, $_viewResources] : [$_viewResources, $_viewDates]);
+    let {_viewDates, _viewResources, _slotTimeLimits, datesAboveResources, highlightedDates, validRange, theme} = getContext('state');
 
     let resourceLabels = $state([]);
 </script>
 
-<div class="{$theme.header}">
-    <Section>
-        {#each loops[0] as item0, i}
-            <div class="{$theme.resource}">
+<View
+    createGridFn={() => createGrid(
+        $_viewDates, $_viewResources, $_slotTimeLimits, $datesAboveResources, $validRange, $highlightedDates
+    )}
+    fullwidthNowIndicator={$datesAboveResources}
+>
+    {#snippet header(grid)}
+        {#each grid as days, i}
+            {@const {dayStart: date, resource, disabled, highlight} = days[0]}
+            <ColHead
+                {date}
+                className={$theme.colGroup}
+                weekday={$datesAboveResources}
+                colSpan={days.length}
+                colIndex={1 + i * days.length}
+                disabled={$datesAboveResources && disabled}
+                highlight={$datesAboveResources && highlight}
+            >
                 {#if $datesAboveResources}
-                    <div class="{$theme.day} {$theme.weekdays?.[item0.getUTCDay()]}{datesEqual(item0, $_today) ? ' ' + $theme.today : ''}">
-                        <time
-                            datetime="{toISOString(item0, 10)}"
-                            aria-label="{$_intlDayHeaderAL.format(item0)}"
-                            use:setContent={$_intlDayHeader.format(item0)}
-                        ></time>
-                    </div>
+                    <DayHeader {date}/>
                 {:else}
-                    <div class="{$theme.day}">
-                        <Label resource={item0} setLabel={e => resourceLabels[i] = e.detail + ', '} />
-                    </div>
-                {/if}
-                {#if loops[1].length > 1}
-                    <div class="{$theme.days}">
-                        {#each loops[1] as item1}
-                            {#if $datesAboveResources}
-                                <div class="{$theme.day}" role="columnheader">
-                                    <Label resource={item1} date={item0} />
-                                </div>
-                            {:else}
-                                <div
-                                    class="{$theme.day} {$theme.weekdays?.[item1.getUTCDay()]}{datesEqual(item1, $_today) ? ' ' + $theme.today : ''}"
-                                    role="columnheader"
-                                >
-                                    <time
-                                        datetime="{toISOString(item1, 10)}"
-                                        aria-label="{resourceLabels[i]}{$_intlDayHeaderAL.format(item1)}"
-                                        use:setContent={$_intlDayHeader.format(item1)}
-                                    ></time>
-                                </div>
-                            {/if}
-                        {/each}
-                    </div>
+                    <Label {resource} setLabel={label => resourceLabels[i] = label + ', '}/>
                 {/if}
-            </div>
+            </ColHead>
         {/each}
-    </Section>
-    <div class="{$theme.hiddenScroll}"></div>
-</div>
-{#if $allDaySlot}
-    <div class="{$theme.allDay}">
-        <div class="{$theme.content}">
-            <Section>
-                {#if $datesAboveResources}
-                    {#each $_viewDates as date}
-                        <div class="{$theme.resource}">
-                            {#each $_viewResources as resource}
-                                <Week dates={[date]} {resource}/>
-                            {/each}
-                        </div>
-                    {/each}
-                {:else}
-                    {#each $_viewResources as resource}
-                        <div class="{$theme.resource}">
-                            <Week dates={$_viewDates} {resource}/>
-                        </div>
-                    {/each}
-                {/if}
-            </Section>
-            <div class="{$theme.hiddenScroll}"></div>
-        </div>
-    </div>
-{/if}
-<Body>
-{#each loops[0] as item0}
-    <div class="{$theme.resource}">
-        {#each loops[1] as item1}
-            <Day
-                date={$datesAboveResources ? item0 : item1}
-                resource={$datesAboveResources ? item1 : item0}
-            />
+        {#each grid as days, i}
+            {#each days as day, j}
+                {@const {dayStart: date, resource, disabled, highlight} = day}
+                <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
+                    {#if $datesAboveResources}
+                        <Label {resource} {date}/>
+                    {:else}
+                        <DayHeader {date} alPrefix={resourceLabels[i]}/>
+                    {/if}
+                </ColHead>
+            {/each}
         {/each}
-    </div>
-{/each}
-</Body>
+    {/snippet}
+</View>

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

@@ -1,34 +1,42 @@
-import {btnTextDay, btnTextWeek, themeView, viewResources} from '#lib';
-import TimeGrid from '../time-grid/index.js';
+import {btnTextDay, btnTextWeek, themeView} from '#lib';
+import {createTROptions, createTRROptions, createTRRParsers} from '../time-grid/options.js';
+import {createTRRStores, createTRStores} from '../time-grid/stores.js';
+import {createRROptions} from './options.js';
+import {createRRStores} from './stores.js';
 import View from './View.svelte';
 
 export default {
     createOptions(options) {
+        createTROptions(options);
+        createTRROptions(options);
+        createRROptions(options);
         options.datesAboveResources = false;
         // Common options
         options.buttonText.resourceTimeGridDay = 'resources';
         options.buttonText.resourceTimeGridWeek = 'resources';
+        options.theme.colGroup = 'ec-col-group';
         options.view = 'resourceTimeGridWeek';
         options.views.resourceTimeGridDay = {
             buttonText: btnTextDay,
             component: View,
             duration: {days: 1},
-            theme: themeView('ec-time-grid ec-resource-day-view')
+            theme: themeView('ec-resource ec-time-grid ec-day-view')
         };
         options.views.resourceTimeGridWeek = {
             buttonText: btnTextWeek,
             component: View,
             duration: {weeks: 1},
-            theme: themeView('ec-time-grid ec-resource-week-view')
+            theme: themeView('ec-resource ec-time-grid ec-week-view')
         };
     },
 
+    createParsers(parsers) {
+        createTRRParsers(parsers);
+    },
+
     createStores(state) {
-        if (!('_times' in state)) {
-            TimeGrid.createStores(state);
-        }
-        if (!('_viewResources' in state)) {
-            state._viewResources = viewResources(state);
-        }
+        createTRRStores(state);
+        createTRStores(state);
+        createRRStores(state);
     }
 }

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

@@ -0,0 +1,31 @@
+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/options.js

@@ -0,0 +1,10 @@
+/**
+ * ResourceTimeGrid + ResourceTimeline
+ */
+export function createRROptions(options) {
+    if (!('resourceLabelContent' in options)) {
+        options.filterResourcesWithEvents = false;
+        options.resourceLabelContent = undefined;
+        options.resourceLabelDidMount = undefined;
+    }
+}

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

@@ -0,0 +1,34 @@
+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/Day.svelte

@@ -1,84 +1,21 @@
 <script>
     import {getContext} from 'svelte';
-    import {
-        addDuration, ceil, cloneDate, datesEqual, floor, max, outsideRange, rect, runReposition, setPayload, toSeconds
-    } from '#lib';
-    import {getSlotTimeLimits} from './lib.js';
-    import Event from './Event.svelte';
+    import {addDuration, cloneDate, floor, rect} from '#lib';
+    import {BaseDay} from '#components';
 
-    let {date, resource, chunks, bgChunks, longChunks, iChunks = []} = $props();
+    let {day} = $props();
 
-    let {
-        highlightedDates, slotDuration, slotWidth, theme, validRange, _interaction, _today, _dayTimeLimits
-    } = getContext('state');
+    let {_monthView, slotDuration, slotWidth} = getContext('state');
 
-    let el = $state();
-    let refs = [];
-
-    let isToday = $derived(datesEqual(date, $_today));
-    let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
-    let disabled = $derived(outsideRange(date, $validRange));
-
-    let slotTimeLimits = $derived(getSlotTimeLimits($_dayTimeLimits, date));
-    let allDay = $derived(!toSeconds($slotDuration));
-    let pointerIdx = $derived(allDay ? 2 : 1);
-
-    let dayChunks = $derived(chunks.filter(chunkIntersects));
-    let dayBgChunks = $derived(bgChunks.filter(bgChunk => (!allDay || bgChunk.event.allDay) && chunkIntersects(bgChunk)));
+    let {dayStart: date, start, resource, disabled, highlight} = $derived(day);
 
-    function chunkIntersects(chunk) {
-        return datesEqual(chunk.date, date);
-    }
+    let el = $state();
 
     function dateFromPoint(x, y) {
-        x -= rect(el).left;
-        return {
-            allDay,
-            date: allDay
-                ? cloneDate(date)
-                : addDuration(
-                    addDuration(cloneDate(date), slotTimeLimits.min),
-                    $slotDuration,
-                    floor(x / $slotWidth)
-                ),
-            resource,
-            dayEl: el,
-            disabled
-        };
-    }
-    $effect(() => {
-        setPayload(el, dateFromPoint);
-    });
-
-    export function reposition() {
-        return max(...runReposition(refs, dayChunks));
+        return $_monthView
+            ? date
+            : addDuration(cloneDate(start), $slotDuration, floor((x - rect(el).left)/ $slotWidth));
     }
 </script>
 
-<div
-    bind:this={el}
-    class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{isToday ? ' ' + $theme.today : ''}{highlight ? ' ' + $theme.highlight : ''}{disabled ? ' ' + $theme.disabled : ''}"
-    style="flex-grow: {allDay ? null : ceil((toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min)) / toSeconds($slotDuration))}"
-    role="cell"
-    onpointerdown={$_interaction.action?.select}
->
-    <div class="{$theme.events}">
-        {#if !disabled}
-            {#each dayBgChunks as chunk (chunk.event)}
-                <Event {chunk}/>
-            {/each}
-            <!-- Pointer -->
-            {#if iChunks[pointerIdx] && chunkIntersects(iChunks[pointerIdx])}
-                <Event chunk={iChunks[pointerIdx]}/>
-            {/if}
-            {#each dayChunks as chunk, i (chunk.event)}
-                <!-- svelte-ignore binding_property_non_reactive -->
-                <Event {chunk} {dayChunks} {longChunks} {resource} bind:this={refs[i]}/>
-            {/each}
-            <!-- Drag, Resize & Select -->
-            {#if iChunks[0] && chunkIntersects(iChunks[0])}
-                <Event chunk={iChunks[0]} {resource}/>
-            {/if}
-        {/if}
-    </div>
-</div>
+<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight}/>

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

@@ -4,46 +4,37 @@
     import {repositionEvent} from './lib.js';
     import {InteractableEvent} from '#components';
 
-    let {chunk, dayChunks = [], longChunks = {}, resource = undefined} = $props();
+    let {chunk} = $props();
 
-    let {slotDuration, slotWidth} = getContext('state');
+    let {slotDuration, slotWidth, _monthView} = getContext('state');
 
     let el = $state();
-    let margin = $state(helperEvent(chunk.event.display) ? 1 : 0);
+    let margin = $state(1);
     let event = $derived(chunk.event);
     // Style
-    let width = $derived('slots' in chunk ? chunk.slots * $slotWidth : chunk.days * 100);
     let styles = $derived(style => {
-        if ('slots' in chunk) {
-            let left = chunk.offset * $slotWidth;
-            style['left'] = `${left}px`;
-            style['width'] = `${width}px`;
-        } else {
-            // Month view
-            style['width'] = `${width}%`;
+        style['grid-column'] = `${chunk.gridColumn} / span ${chunk.dates.length}`;
+        style['grid-row'] = chunk.gridRow;
+        if (!$_monthView) {
+            let left = chunk.left / toSeconds($slotDuration) * $slotWidth;
+            style['inset-inline-start'] = `${left}px`;
+            style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth + chunk.dates.length - 1}px`;
         }
         let marginTop = margin;
         if (event._margin) {
             // Force margin for helper events
-            let [_margin, _resource] = event._margin;
-            if (resource === _resource) {
+            let [_margin, _gridRow] = event._margin;
+            if (chunk.gridRow === _gridRow) {
                 marginTop = _margin;
             }
         }
-        style['margin-top'] = `${marginTop}px`;
+        style['margin-block-start'] = `${marginTop}px`;
         return style;
     });
 
     export function reposition() {
-        if (!el) {
-            return 0;
-        }
-        let h = height(el);
-        margin = repositionEvent(chunk, dayChunks, longChunks, h, !toSeconds($slotDuration));
-        return margin + h;
+        margin = repositionEvent(chunk, height(el), $_monthView);
     }
 </script>
 
-{#if width > 0}
-    <InteractableEvent bind:el {chunk} {styles} axis="x" forceMargin={() => [margin, resource]} />
-{/if}
+<InteractableEvent bind:el {chunk} {styles} axis="x" forceMargin={[margin, chunk.gridRow]} />

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

@@ -1,12 +1,12 @@
 <script>
     import {getContext} from 'svelte';
-    import {datesEqual, setContent, toISOString, toSeconds, observeResize} from '#lib';
+    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} use:observeResize={() => $_headerHeight = $_headerEl.clientHeight}>
+<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 : ''}">
@@ -15,7 +15,7 @@
                         <time
                             datetime="{toISOString(date, 10)}"
                             aria-label="{$_intlDayHeaderAL.format(date)}"
-                            use:setContent={$_intlDayHeader.format(date)}
+                            {@attach contentFrom($_intlDayHeader.format(date))}
                         ></time>
                     </div>
                     <div class="{$theme.times}">
@@ -23,7 +23,7 @@
                             <div class="{$theme.time}{time[2] ? '' : ' ' + $theme.minor}" role="columnheader">
                                 <time
                                     datetime="{time[0]}"
-                                    use:setContent={time[1]}
+                                    {@attach contentFrom(time[1])}
                                 ></time>
                             </div>
                         {/each}
@@ -33,7 +33,7 @@
                         <time
                             datetime="{toISOString(date, 10)}"
                             aria-label="{$_intlDayHeaderAL.format(date)}"
-                            use:setContent={$_intlDayHeader.format(date)}
+                            {@attach contentFrom($_intlDayHeader.format(date))}
                         ></time>
                     </div>
                 {/if}

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

@@ -1,10 +1,10 @@
 <script>
-    import {getContext, onMount, untrack} from 'svelte';
-    import {ceil, height, setContent, toLocalDate, isFunction} from '#lib';
+    import {getContext, onMount} from 'svelte';
+    import {contentFrom, toLocalDate, isFunction} from '#lib';
 
     let {resource, date = undefined} = $props();
 
-    let {resourceLabelContent, resourceLabelDidMount, _resHs} = getContext('state');
+    let {resourceLabelContent, resourceLabelDidMount} = getContext('state');
 
     let el = $state();
     // Content
@@ -21,14 +21,6 @@
         }
     });
 
-    $effect(() => {
-        content;
-        untrack(() => {
-            $_resHs.set(resource, ceil(height(el) + 10));
-            $_resHs = $_resHs;
-        });
-    });
-
     onMount(() => {
         if (isFunction($resourceLabelDidMount)) {
             $resourceLabelDidMount({
@@ -42,5 +34,5 @@
 
 <span
     bind:this={el}
-    use:setContent={content}
+    {@attach contentFrom(content)}
 ></span>