@event-calendar/core 4.7.1 → 5.0.0

package/src/plugins/time-grid/Body.svelte

@@ -1,43 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {observeResize} from '#lib';
-    import Section from './Section.svelte';
-
-    let {children} = $props();
-
-    let {
-        _bodyEl, _viewDates, _slotTimeLimits, _times, _recheckScrollable, scrollTime, slotDuration, slotHeight, theme
-    } = getContext('state');
-
-    let el = $state();
-
-    $effect(() => {
-        $_bodyEl = el;
-    });
-
-    $effect(() => {
-        $_viewDates;
-        $scrollTime;
-        untrack(scrollToTime);
-    });
-
-    function scrollToTime() {
-        el.scrollTop = (($scrollTime.seconds - $_slotTimeLimits.min.seconds) / $slotDuration.seconds - 0.5) * $slotHeight;
-    }
-</script>
-
-<div
-    bind:this={el}
-    class="{$theme.body}"
-    use:observeResize={() => $_recheckScrollable = true}
->
-    <div class="{$theme.content}">
-        <Section {children}>
-            {#snippet lines()}
-                {#each $_times as time}
-                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
-                {/each}
-            {/snippet}
-        </Section>
-    </div>
-</div>

package/src/plugins/time-grid/Section.svelte

@@ -1,29 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {setContent} from '#lib';
-    import {createAllDayContent} from './utils.js';
-
-    let {children, lines} = $props();
-
-    let {allDayContent, slotLabelInterval, theme, _times} = getContext('state');
-
-    let allDayText = $derived(createAllDayContent($allDayContent));
-    let showAllTimes = $derived($slotLabelInterval && $slotLabelInterval.seconds <= 0);
-</script>
-
-<div class="{$theme.sidebar}">
-    <div class="{$theme.sidebarTitle}" use:setContent={allDayText}></div>
-    {#each $_times as time, i}
-        <time
-            class="{$theme.time}{(i || showAllTimes) && time[2] ? '' : ' ' + $theme.minor}"
-            datetime="{time[0]}"
-            use:setContent={time[1]}
-        ></time>
-    {/each}
-</div>
-<div class="{$theme.days}" role="row">
-    <div class="{$theme.lines}">{#if lines}{@render lines()}{/if}</div>
-    {#if children}
-        {@render children()}
-    {/if}
-</div>

package/src/plugins/time-grid/all-day/Day.svelte

@@ -1,65 +0,0 @@
-<script>
-    import {getContext, onMount} from 'svelte';
-    import {datesEqual, outsideRange, runReposition, setPayload} from '#lib';
-    import Event from './Event.svelte';
-
-    let {date, chunks, bgChunks, longChunks, iChunks = [], resource = undefined} = $props();
-
-    let {highlightedDates, theme, validRange, _interaction, _today} = getContext('state');
-
-    let el = $state();
-    let refs = [];
-
-    let dayChunks = $derived(chunks.filter(chunk => datesEqual(chunk.date, date)));
-    let dayBgChunks = $derived(bgChunks.filter(bgChunk => datesEqual(bgChunk.date, date)));
-
-    let isToday = $derived(datesEqual(date, $_today));
-    let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
-    let disabled = $derived(outsideRange(date, $validRange));
-
-    // dateFromPoint
-    onMount(() => {
-        setPayload(el, () => ({
-            allDay: true,
-            date,
-            resource,
-            dayEl: el,
-            disabled
-        }));
-    });
-
-    export function reposition() {
-        if (!disabled) {
-            runReposition(refs, dayChunks);
-        }
-    }
-</script>
-
-<div
-    bind:this={el}
-    class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{isToday ? ' ' + $theme.today : ''}{highlight ? ' ' + $theme.highlight : ''}{disabled ? ' ' + $theme.disabled : ''}"
-    role="cell"
-    onpointerdown={!disabled ? $_interaction.action?.select : undefined}
->
-    <div class="{$theme.bgEvents}">
-        {#if !disabled}
-            {#each dayBgChunks as chunk (chunk.event)}
-                <Event {chunk}/>
-            {/each}
-        {/if}
-    </div>
-    <!-- Drag, Resize & Select -->
-    {#if iChunks[0] && datesEqual(iChunks[0].date, date) && !disabled}
-        <div class="{$theme.events} {$theme.preview}">
-            <Event chunk={iChunks[0]}/>
-        </div>
-    {/if}
-    <div class="{$theme.events}">
-        {#if !disabled}
-            {#each dayChunks as chunk, i (chunk.event)}
-                <!-- svelte-ignore binding_property_non_reactive -->
-                <Event {chunk} {longChunks} bind:this={refs[i]}/>
-            {/each}
-        {/if}
-    </div>
-</div>

package/src/plugins/time-grid/all-day/Event.svelte

@@ -1,37 +0,0 @@
-<script>
-    import {ancestor, bgEvent, height, rect, repositionEvent} from '#lib';
-    import {InteractableEvent} from '#components';
-
-    let {chunk, longChunks = {}} = $props();
-
-    let el = $state();
-    let margin = $state(1);
-    let event = $derived(chunk.event);
-    let display = $derived(chunk.event.display);
-
-    // Style
-    let styles = $derived(style => {
-        if (bgEvent(display)) {
-            style['width'] = `calc(${chunk.days * 100}% + ${(chunk.days - 1)}px)`;
-        } else {
-            style['width'] = `calc(${chunk.days * 100}% + ${(chunk.days - 1) * 7}px)`;
-            style['margin-top'] = `${event._margin ?? margin}px`;
-        }
-        return style;
-    });
-
-    export function reposition() {
-        if (!el) {
-            return;
-        }
-        margin = repositionEvent(chunk, longChunks, height(el));
-    }
-</script>
-
-<InteractableEvent
-    bind:el
-    {chunk}
-    {styles}
-    axis="x"
-    forceMargin={() => rect(el).top - rect(ancestor(el, 1)).top}
-/>

package/src/plugins/time-grid/all-day/Week.svelte

@@ -1,65 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {
-        addDay, bgEvent, cloneDate, createEventChunk, eventIntersects, limitToRange, prepareEventChunks, runReposition
-    } from '#lib';
-    import Day from './Day.svelte';
-
-    let {dates, resource = undefined} = $props();
-
-    let {_filteredEvents, _iEvents, eventOrder, hiddenDays, resources, filterEventsWithResources,
-        validRange} = getContext('state');
-
-    let refs = [];
-
-    let start = $derived(limitToRange(dates[0], $validRange));
-    let end = $derived(addDay(cloneDate(limitToRange(dates.at(-1), $validRange))));
-
-    let resourceFilter = $derived(resource ?? (
-        $filterEventsWithResources ? $resources : undefined
-    ));
-
-    let [chunks, bgChunks, longChunks] = $derived.by(() => {
-        let chunks = [];
-        let bgChunks = [];
-        for (let event of $_filteredEvents) {
-            if (event.allDay && eventIntersects(event, start, end, resourceFilter)) {
-                let chunk = createEventChunk(event, start, end);
-                if (bgEvent(event.display)) {
-                    bgChunks.push(chunk);
-                } else {
-                    chunks.push(chunk);
-                }
-            }
-        }
-        prepareEventChunks(bgChunks, $hiddenDays, $eventOrder);
-        let longChunks = prepareEventChunks(chunks, $hiddenDays, $eventOrder);
-        return [chunks, bgChunks, longChunks];
-    });
-
-    function reposition() {
-        runReposition(refs, dates);
-    }
-    $effect(() => {
-        chunks;
-        untrack(reposition);
-    });
-
-    let iChunks = $derived($_iEvents.map(event => {
-        let chunk;
-        if (event && event.allDay && eventIntersects(event, start, end, resource)) {
-            chunk = createEventChunk(event, start, end);
-            prepareEventChunks([chunk], $hiddenDays, $eventOrder);
-        } else {
-            chunk = null;
-        }
-        return chunk;
-    }));
-</script>
-
-{#each dates as date, i}
-    <!-- svelte-ignore binding_property_non_reactive -->
-    <Day {date} {chunks} {bgChunks} {longChunks} {iChunks} {resource} bind:this={refs[i]} />
-{/each}
-
-<svelte:window on:resize={reposition}/>

package/src/plugins/time-grid/utils.js

@@ -1,58 +0,0 @@
-import {isFunction, sortEventChunks} from '#lib';
-
-export function groupEventChunks(chunks, $eventOrder) {
-    if (!chunks.length) {
-        return;
-    }
-
-    sortEventChunks(chunks, $eventOrder);
-
-    // Group
-    let group = {
-        columns: [],
-        end: chunks[0].end
-    };
-    for (let chunk of chunks) {
-        let c = 0;
-        if (chunk.start < group.end) {
-            for (; c < group.columns.length; ++c) {
-                if (group.columns[c].at(-1).end <= chunk.start) {
-                    break;
-                }
-            }
-            if (chunk.end > group.end) {
-                group.end = chunk.end;
-            }
-        } else {
-            group = {
-                columns: [],
-                end: chunk.end
-            };
-        }
-
-        if (group.columns.length < c + 1) {
-            group.columns.push([]);
-        }
-        group.columns[c].push(chunk);
-
-        chunk.group = group;
-        chunk.column = c;
-    }
-}
-
-export function createAllDayContent(allDayContent) {
-    let text = 'all-day';
-    let content;
-    if (allDayContent) {
-        content = isFunction(allDayContent) ? allDayContent({text}) : allDayContent;
-        if (typeof content === 'string') {
-            content = {html: content};
-        }
-    } else {
-        content = {
-            html: text
-        };
-    }
-
-    return content;
-}

package/src/styles/day-grid.scss

@@ -1,51 +0,0 @@
-.ec-day-grid {
-  .ec-body {
-    flex: 1 1 auto;
-
-    .ec-day {
-      min-height: 5em;
-      position: relative;
-    }
-  }
-
-  .ec-content {
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .ec-uniform {
-    .ec-content {
-      overflow: hidden;  // remove scrolling due to hidden events
-    }
-    .ec-days {
-      flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
-      min-height: 0;
-    }
-    .ec-day {
-      min-height: 0;
-    }
-  }
-
-  .ec-day:first-child {
-    border-left: none;
-  }
-
-  .ec-day-head {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    border: none;
-    padding: 4px 4px 3px;
-  }
-
-  .ec-day-foot {
-    position: absolute;
-    bottom: 0;
-    padding: 2px;
-    font-size: .85em;
-
-    a {
-      cursor: pointer;
-    }
-  }
-}