@event-calendar/core 4.7.1 → 5.0.0

package/src/styles/popup.css

@@ -0,0 +1,30 @@
+.ec-popup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    block-size: max-content;
+    inline-size: 110%;
+    min-block-size: 6em;
+    min-inline-size: 10em;
+    padding: .375rem .75rem .75rem;
+    background-color: var(--ec-popup-bg-color);
+    border: 1px solid var(--ec-border-color);
+    border-radius: .25rem;
+    box-shadow: var(--ec-color-300) 0 10px 15px -3px, var(--ec-color-300) 0 4px 6px -4px;
+
+    .ec-day-head {
+        flex-direction: row;
+        padding-inline: 0;
+
+        a {
+            cursor: pointer;
+            font-size: 1.5em;
+            line-height: .8;
+        }
+    }
+
+    .ec-events {
+        --ec-event-col-gap: 0;
+        display: block;
+    }
+}

package/src/styles/sidebar.css

@@ -0,0 +1,59 @@
+.ec-sidebar {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+    background-color: var(--ec-bg-color);
+    border-inline-end: 1px solid var(--ec-border-color);
+    margin-inline-end: -1px;
+    text-align: end;
+    overflow: clip;
+
+    .ec-header & {
+        padding-block: .375rem;
+    }
+
+    .ec-time-grid & {
+        padding-inline: .75rem;
+    }
+
+    .ec-time-grid .ec-body & {
+        background-image:
+                linear-gradient(to left, transparent .375rem, var(--ec-bg-color) .375rem),
+                linear-gradient(var(--ec-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px);
+        background-size:
+                100% 100%,
+                100% 100%,
+                100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
+                2px 100%,
+                100% var(--ec-slot-height);
+    }
+
+    .ec-timeline .ec-body & {
+        grid-area: 1 / 1 / -1 / 2;
+        display: grid;
+        grid-template-rows: subgrid;
+        background-color: var(--ec-border-color);
+    }
+}
+
+.ec-row-head {
+    display: flex;
+    background-color: var(--ec-bg-color);
+    padding: .375em .75rem;
+    min-block-size: 1.5em;
+}
+
+.ec-expander {
+    margin-right: .25em;
+    width: 1.25em;
+
+    .ec-button {
+        line-height: normal;
+        padding: 0;
+        aspect-ratio: 1;
+        height: 1.25em;
+    }
+}

package/src/styles/slots.css

@@ -0,0 +1,42 @@
+.ec-slot {
+    white-space: nowrap;
+
+    .ec-time-grid & {
+        block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
+        position: relative;
+        inset-block-start: -.5em;
+    }
+
+    .ec-timeline & {
+        grid-column: span var(--ec-slot-label-periodicity);
+        font-size: .95em;
+        padding: .18rem 0;
+        overflow: clip;
+        text-overflow: ellipsis;
+    }
+}
+
+.ec-slots {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: var(--ec-slot-width);
+    text-align: center;
+
+    --ec-day-bg-color: var(--ec-bg-color);
+    background-color: var(--ec-day-bg-color);
+
+    &.ec-today {
+        --ec-day-bg-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        --ec-day-bg-color: var(--ec-highlight-color);
+    }
+
+    background-image:
+            linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
+            linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px);
+    background-size:
+            100% 100%,
+            calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
+}

package/src/styles/theme.css

@@ -0,0 +1,68 @@
+.ec {
+    color-scheme: light;
+
+    /* Main colors */
+    --ec-color-400: oklch(70.8% 0 0);
+    --ec-color-300: oklch(87% 0 0);
+    --ec-color-200: oklch(92.2% 0 0);
+    --ec-color-100: oklch(97% 0 0);
+    --ec-color-50: oklch(98.5% 0 0);
+
+    /* General props */
+    --ec-bg-color: #fff;
+    --ec-text-color: currentcolor;
+    --ec-border-color: var(--ec-color-300);
+
+    /* Buttons */
+    --ec-button-bg-color: var(--ec-bg-color);
+    --ec-button-border-color: var(--ec-border-color);
+    --ec-button-text-color: var(--ec-text-color);
+    --ec-button-active-bg-color: var(--ec-color-200);
+    --ec-button-active-border-color: var(--ec-color-400);
+    --ec-button-active-text-color: var(--ec-button-text-color);
+
+    /* Days */
+    --ec-today-bg-color: oklch(98.7% 0.026 102.212);
+    --ec-highlight-color: oklch(98.4% 0.019 200.873);
+
+    /* Events */
+    --ec-event-bg-color: oklch(70.7% 0.165 254.624);
+    --ec-event-text-color: #fff;
+    --ec-bg-event-color: var(--ec-color-300);
+    --ec-bg-event-opacity: 0.3;
+    --ec-event-col-gap: .375rem;
+
+    /* Now Indicator */
+    --ec-now-indicator-color: oklch(63.7% 0.237 25.331);
+
+    /* Popup */
+    --ec-popup-bg-color: var(--ec-bg-color);
+
+    .ec-dark & {
+        color-scheme: dark;
+        --ec-color-400: oklch(43.9% 0 0);
+        --ec-color-300: oklch(37.1% 0 0);
+        --ec-color-200: oklch(26.9% 0 0);
+        --ec-color-100: oklch(20.5% 0 0);
+        --ec-color-50: oklch(14.5% 0 0);
+        --ec-bg-color: var(--ec-color-100);
+        --ec-today-bg-color: oklch(28.6% 0.066 53.813);
+        --ec-highlight-color: oklch(30.2% 0.056 229.695);
+        --ec-bg-event-opacity: 0.5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .ec-auto-dark & {
+            color-scheme: dark;
+            --ec-color-400: oklch(43.9% 0 0);
+            --ec-color-300: oklch(37.1% 0 0);
+            --ec-color-200: oklch(26.9% 0 0);
+            --ec-color-100: oklch(20.5% 0 0);
+            --ec-color-50: oklch(14.5% 0 0);
+            --ec-bg-color: var(--ec-color-100);
+            --ec-today-bg-color: oklch(28.6% 0.066 53.813);
+            --ec-highlight-color: oklch(30.2% 0.056 229.695);
+            --ec-bg-event-opacity: 0.5;
+        }
+    }
+}

package/src/styles/toolbar.css

@@ -0,0 +1,80 @@
+/* Toolbar */
+.ec-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-block-end: 1em;
+
+    > * {
+        display: inline-flex;
+        flex-wrap: wrap;
+        column-gap: .75rem;
+        row-gap: .5rem;
+    }
+}
+
+.ec-title {
+    margin: 0;
+}
+
+.ec-button {
+    background-color: var(--ec-button-bg-color);
+    border: 1px solid var(--ec-button-border-color);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .25rem;
+
+    &:not(:disabled) {
+        color: var(--ec-button-text-color);
+        cursor: pointer;
+    }
+
+    &:not(:disabled):hover,
+    &.ec-active {
+        background-color: var(--ec-button-active-bg-color);
+        border-color: var(--ec-button-active-border-color);
+        color: var(--ec-button-active-text-color);
+        z-index: 1;  /* make all borders visible */
+    }
+}
+
+.ec-button-group {
+    display: inline-flex;
+    vertical-align: top;
+
+    .ec-button:not(:first-child) {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        margin-inline-start: -1px;
+    }
+
+    .ec-button:not(:last-child) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+}
+
+.ec-icon {
+    display: inline-block;
+    width: 1em;
+
+    &.ec-prev:after,
+    &.ec-next:after {
+        content: '';
+        position: relative;
+        inline-size: .5em;
+        block-size: .5em;
+        border-block-start: 2px solid currentcolor;
+        border-inline-end: 2px solid currentcolor;
+        display: inline-block;
+    }
+
+    &.ec-prev:after {
+        transform: rotate(-135deg) translate(-2px, 2px);
+    }
+
+    &.ec-next:after {
+        transform: rotate(45deg) translate(-2px, 2px);
+    }
+}

package/src/lib/actions.js

@@ -1,52 +0,0 @@
-
-export function setContent(node, content) {
-    let actions = {
-        update(content) {
-            if (typeof content == 'string') {
-                node.innerText = content;
-            } else if (content?.domNodes) {
-                node.replaceChildren(...content.domNodes);
-            } else if (content?.html) {
-                node.innerHTML = content.html;
-            }
-        }
-    };
-    actions.update(content);
-
-    return actions;
-}
-
-/** Dispatch event occurred outside of node */
-export function outsideEvent(node, type) {
-
-    const handlePointerDown = jsEvent => {
-        if (node && !node.contains(jsEvent.target)) {
-            node.dispatchEvent(
-                new CustomEvent(type + 'outside', {detail: {jsEvent}})
-            );
-        }
-    };
-
-    document.addEventListener(type, handlePointerDown, true);
-
-    return {
-        destroy() {
-            document.removeEventListener(type, handlePointerDown, true);
-        }
-    };
-}
-
-export function observeResize(node, callback) {
-    let resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            callback(entry);
-        }
-    });
-    resizeObserver.observe(node);
-
-    return {
-        destroy() {
-            resizeObserver.unobserve(node);
-        }
-    };
-}

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

@@ -1,54 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {runReposition, observeResize} from '#lib';
-    import Week from './Week.svelte';
-
-    let {
-        _bodyEl, _viewDates, _filteredEvents, _hiddenEvents, _recheckScrollable, dayMaxEvents, hiddenDays, theme
-    } = getContext('state');
-
-    let refs = [];
-
-    let days = $derived(7 - $hiddenDays.length);
-    let weeks = $derived.by(() => {
-        let weeks = [];
-        for (let i = 0; i < $_viewDates.length / days; ++i) {
-            let dates = [];
-            for (let j = 0; j < days; ++j) {
-                dates.push($_viewDates[i * days + j]);
-            }
-            weeks.push(dates);
-        }
-        return weeks;
-    });
-    $effect.pre(() => {
-        weeks;
-        $dayMaxEvents;
-        $_hiddenEvents = {};
-    });
-
-    function reposition() {
-        runReposition(refs, weeks);
-    }
-    $effect(() => {
-        $_filteredEvents;
-        $_hiddenEvents;
-        $dayMaxEvents;
-        untrack(reposition);
-    });
-</script>
-
-<div
-    bind:this={$_bodyEl}
-    class="{$theme.body}{$dayMaxEvents === true ? ' ' + $theme.uniform : ''}"
-    use:observeResize={() => $_recheckScrollable = true}
->
-    <div class="{$theme.content}">
-        {#each weeks as dates, i}
-            <!-- svelte-ignore binding_property_non_reactive -->
-            <Week {dates} bind:this={refs[i]}/>
-        {/each}
-    </div>
-</div>
-
-<svelte:window on:resize={reposition}/>

package/src/plugins/day-grid/Header.svelte

@@ -1,20 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {setContent} from '#lib';
-
-    let {theme, _intlDayHeader, _intlDayHeaderAL, _days} = getContext('state');
-</script>
-
-<div class="{$theme.header}">
-    <div class="{$theme.days}" role="row">
-        {#each $_days as day}
-            <div class="{$theme.day} {$theme.weekdays?.[day.getUTCDay()]}" role="columnheader">
-                <span
-                    aria-label="{$_intlDayHeaderAL.format(day)}"
-                    use:setContent={$_intlDayHeader.format(day)}
-                ></span>
-            </div>
-        {/each}
-    </div>
-    <div class="{$theme.hiddenScroll}"></div>
-</div>

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

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

package/src/plugins/list/Body.svelte

@@ -1,44 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {addDay, cloneDate, toViewWithLocalDates, setContent, bgEvent, isFunction} from '#lib';
-    import Day from './Day.svelte';
-
-    let {_bodyEl, _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>
-
-<div bind:this={$_bodyEl} class="{$theme.body}">
-    <div class="{$theme.content}">
-        {#if noEvents}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div use:setContent={content} class="{$theme.noEvents}" {onclick}></div>
-        {:else}
-            {#each $_viewDates as date}
-                <Day {date}/>
-            {/each}
-        {/if}
-    </div>
-</div>

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

@@ -1,67 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {observeResize, runReposition, toSeconds} from '#lib';
-    import {getSlotTimeLimits} from './lib.js';
-    import Days from './Days.svelte';
-
-    let {_bodyEl, _bodyHeight, _bodyWidth, _bodyScrollLeft, _headerEl, _filteredEvents, _sidebarEl, _dayTimes, _dayTimeLimits,
-        _recheckScrollable, _daysHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
-
-    let refs = [];
-
-    function scrollToTime() {
-        let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[0]);
-        $_bodyEl.scrollLeft = (toSeconds($scrollTime) - toSeconds(slotTimeLimits.min)) / toSeconds($slotDuration) * $slotWidth;
-        $_bodyScrollLeft = $_bodyEl.scrollLeft;
-    }
-    $effect(() => {
-        $_viewDates;
-        $scrollTime;
-        untrack(scrollToTime);
-    });
-
-    function reposition() {
-        $_daysHs.clear();
-        runReposition(refs, $_viewResources);
-    }
-    $effect(() => {
-        $_filteredEvents;
-        $_viewResources;
-        untrack(reposition);
-    });
-
-    function onscroll() {
-        $_headerEl.scrollLeft = $_bodyEl.scrollLeft;
-        $_sidebarEl.scrollTop = $_bodyEl.scrollTop;
-        $_bodyScrollLeft = $_bodyEl.scrollLeft;
-    }
-
-    function onresize() {
-        $_bodyHeight = $_bodyEl.clientHeight;
-        $_bodyWidth = $_bodyEl.clientWidth;
-        $_recheckScrollable = true;
-    }
-</script>
-
-<div
-    bind:this={$_bodyEl}
-    class="{$theme.body}"
-    {onscroll}
-    use:observeResize={onresize}
->
-    <div class="{$theme.content}">
-        <div class="{$theme.lines}">
-            {#each $_viewDates as date}
-                {#each $_dayTimes[date.getTime()] as time}
-                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
-                {/each}
-            {/each}
-        </div>
-        {#each $_viewResources as resource, i}
-            <!-- svelte-ignore binding_property_non_reactive -->
-            <Days {resource} bind:this={refs[i]}/>
-        {/each}
-    </div>
-</div>
-
-<svelte:window on:resize={reposition}/>

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

@@ -1,72 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {
-        addDay, addDuration, bgEvent, ceil, cloneDate, createEventChunk, DAY_IN_SECONDS, eventIntersects,
-        limitToRange, max, runReposition
-    } from '#lib';
-    import {getSlotTimeLimits, prepareEventChunks} from './lib.js';
-    import Day from './Day.svelte';
-
-    let {resource} = $props();
-
-    let {_viewDates, _filteredEvents, _iEvents, _dayTimeLimits, _daysHs, _resHs,
-        eventOrder, slotDuration, theme, validRange} = getContext('state');
-
-    let refs = [];
-
-    let [start, end] = $derived.by(() => {
-        let start = cloneDate(limitToRange($_viewDates[0], $validRange));
-        let end = cloneDate(limitToRange($_viewDates.at(-1), $validRange));
-        let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, start);
-        addDuration(start, slotTimeLimits.min);
-        slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, end);
-        if (slotTimeLimits.max.seconds > DAY_IN_SECONDS) {
-            addDuration(end, slotTimeLimits.max)  /** @see https://github.com/vkurko/calendar/issues/333 */
-        } else {
-            addDay(end);
-        }
-        return [start, end];
-    });
-
-    let [chunks, bgChunks, longChunks] = $derived.by(() => {
-        let chunks = [];
-        let bgChunks = [];
-        let longChunks;
-        for (let event of $_filteredEvents) {
-            if (eventIntersects(event, start, end, resource)) {
-                let chunk = createEventChunk(event, start, end);
-                if (bgEvent(event.display)) {
-                    bgChunks.push(chunk);
-                } else {
-                    chunks.push(chunk);
-                }
-            }
-        }
-        [bgChunks] = prepareEventChunks(bgChunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
-        [chunks, longChunks] = prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
-        return [chunks, bgChunks, longChunks];
-    });
-
-    let iChunks = $derived($_iEvents.map(event => {
-        let chunk;
-        if (event && eventIntersects(event, start, end, resource)) {
-            chunk = createEventChunk(event, start, end);
-            [[chunk]] = prepareEventChunks([chunk], $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
-        } else {
-            chunk = null;
-        }
-        return chunk;
-    }));
-
-    export function reposition() {
-        $_daysHs.set(resource, ceil(max(...runReposition(refs, $_viewDates))) + 10);
-        $_daysHs = $_daysHs;
-    }
-</script>
-
-<div class="{$theme.days}" style="flex-basis: {max($_daysHs.get(resource) ?? 0, $_resHs.get(resource) ?? 0, 34)}px" role="row">
-    {#each $_viewDates as date, i}
-        <!-- svelte-ignore binding_property_non_reactive -->
-        <Day {date} {resource} {chunks} {bgChunks} {longChunks} {iChunks} bind:this={refs[i]}/>
-    {/each}
-</div>

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

@@ -1,35 +0,0 @@
-<script>
-    import {getContext, untrack} from 'svelte';
-    import {max} from '#lib';
-    import Label from './Label.svelte';
-    import Expander from './Expander.svelte';
-
-    let {_viewResources, _headerHeight, _bodyEl, _daysHs, _resHs, _sidebarEl, _nestedResources, theme} = getContext('state');
-
-    $effect.pre(() => {
-        $_viewResources;
-        untrack(() => {
-            $_resHs.clear();
-        });
-    });
-
-    function onwheel(jsEvent) {
-        $_bodyEl.scrollBy({
-            top: jsEvent.deltaY < 0 ? -30 : 30
-        });
-    }
-</script>
-
-<div class="{$theme.sidebar}">
-    <div class="{$theme.sidebarTitle}" style="flex-basis: {$_headerHeight}px"></div>
-    <div class="{$theme.content}" bind:this={$_sidebarEl} {onwheel}>
-        {#each $_viewResources as resource}
-            <div class="{$theme.resource}" style="flex-basis: {max($_daysHs.get(resource) ?? 0, $_resHs.get(resource) ?? 0, 34)}px" role="rowheader">
-                {#if $_nestedResources}
-                    <Expander {resource} />
-                {/if}
-                <Label {resource}/>
-            </div>
-        {/each}
-    </div>
-</div>