@event-calendar/core 4.0.2 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -31,7 +31,7 @@
     "#lib": "./src/lib/index.js",
     "#components": "./src/lib/components/index.js"
   },
-  "peerDependencies": {
-    "svelte": "^5.25.10"
+  "dependencies": {
+    "svelte": "^5.28.2"
   }
 }

package/src/lib/components/InteractableEvent.svelte

@@ -1,6 +1,7 @@
 <script>
     import {getContext} from 'svelte';
     import BaseEvent from './BaseEvent.svelte';
+    import {bgEvent, helperEvent} from "#lib";
 
     let {
         el = $bindable(),
@@ -14,6 +15,7 @@
     let {_interaction, _iClasses} = getContext('state');
 
     let event = $derived(chunk.event);
+    let display = $derived(chunk.event.display);
 
     // Class
     let classes = $derived(classNames => $_iClasses(classNames, event));
@@ -23,9 +25,9 @@
             ? jsEvent => $_interaction.action.drag(
                 event, jsEvent, forceDate?.(), forceMargin?.()
             )
-            : undefined;
+            : $_interaction.action?.noAction;
     }
-    let onpointerdown = $derived(createDragHandler(event));
+    let onpointerdown = $derived(!bgEvent(display) && !helperEvent(display) ? createDragHandler(event) : undefined);
 
     let Resizer = $derived($_interaction.resizer);
 </script>

package/src/lib/dom.js

@@ -41,7 +41,7 @@ export function getElementWithPayload(x, y, root = document) {
             return el;
         }
         /** @see https://github.com/vkurko/calendar/issues/142 */
-        if (el.shadowRoot) {
+        if (el.shadowRoot && el.shadowRoot !== root) {
             let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
             if (shadowEl) {
                 return shadowEl;

package/src/lib/times.js

@@ -14,19 +14,15 @@ export function createTimes(date, $slotDuration, $slotLabelInterval, $_slotTimeL
             ? createDuration($slotDuration.seconds * 2)
             : $slotDuration;
     }
-    let showAll = $slotLabelInterval.seconds <= 0;
-    let label;
-    if (!showAll) {
-        label = cloneDate(date);
-    }
+    let label = cloneDate(date);
     // Build times
     while (date < end) {
         times.push([
             toISOString(date),
             $_intlSlotLabel.format(date),
-            showAll || (times.length && date >= label)
+            date >= label
         ]);
-        while (!showAll && date >= label) {
+        while ($slotLabelInterval.seconds && date >= label) {
             addDuration(label, $slotLabelInterval);
         }
         addDuration(date, $slotDuration);

package/src/plugins/interaction/Auxiliary.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {helperEvent, listen} from '#lib';
+    import {bgEvent, helperEvent, listen} from '#lib';
     import {eventDraggable} from './lib';
     import Action from './Action.svelte';
     import Pointer from './Pointer.svelte';
@@ -21,7 +21,11 @@
                 ...classNames,
                 helperEvent(display)
                     ? [$theme[display]]
-                    : (eventDraggable(event, $eventStartEditable, $editable) ? [$theme.draggable] : [])
+                    : (
+                        !bgEvent(display) && eventDraggable(event, $eventStartEditable, $editable)
+                            ? [$theme.draggable]
+                            : []
+                    )
             ];
         };
     });

package/src/plugins/interaction/Resizer.svelte

@@ -1,5 +1,6 @@
 <script>
     import {getContext} from 'svelte';
+    import {bgEvent, helperEvent} from '#lib';
     import {eventResizable} from './lib';
 
     let {chunk, axis, forceDate = undefined, forceMargin = undefined, children} = $props();
@@ -7,8 +8,11 @@
     let {theme, eventDurationEditable, eventResizableFromStart, editable, _interaction} = getContext('state');
 
     let event = $derived(chunk.event);
+    let display = $derived(chunk.event.display);
 
-    let resizable = $derived(eventResizable(event, $eventDurationEditable, $editable));
+    let resizable = $derived(
+        !bgEvent(display) && !helperEvent(display) && eventResizable(event, $eventDurationEditable, $editable)
+    );
 
     function createResizeHandler(start) {
         return jsEvent => $_interaction.action.resize(

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

@@ -1,13 +1,9 @@
 import {bgEvent, helperEvent} from '#lib';
 
 export function eventDraggable(event, $eventStartEditable, $editable) {
-    return (event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable) &&
-        !bgEvent(event.display) &&
-        !helperEvent(event.display);
+    return (event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable);
 }
 
 export function eventResizable(event, $eventDurationEditable, $editable) {
-    return (event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable) &&
-        !bgEvent(event.display) &&
-        !helperEvent(event.display);
+    return (event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable);
 }

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

@@ -50,7 +50,7 @@
         <div class="{$theme.lines}">
             {#each $_viewDates as date}
                 {#each $_dayTimes[date.getTime()] as time}
-                    <div class="{$theme.line}"></div>
+                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
                 {/each}
             {/each}
         </div>

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

@@ -19,7 +19,7 @@
                     </div>
                     <div class="{$theme.times}">
                         {#each $_dayTimes[date.getTime()] as time}
-                            <div class="{$theme.time}" role="columnheader">
+                            <div class="{$theme.time}{time[2] ? '' : ' ' + $theme.minor}" role="columnheader">
                                 <time
                                     datetime="{time[0]}"
                                     use:setContent={time[1]}
@@ -28,13 +28,13 @@
                         {/each}
                     </div>
                 {:else}
-                        <div class="{$theme.time}" role="columnheader">
-                            <time
-                                datetime="{toISOString(date, 10)}"
-                                aria-label="{$_intlDayHeaderAL.format(date)}"
-                                use:setContent={$_intlDayHeader.format(date)}
-                            ></time>
-                        </div>
+                    <div class="{$theme.time}" role="columnheader">
+                        <time
+                            datetime="{toISOString(date, 10)}"
+                            aria-label="{$_intlDayHeaderAL.format(date)}"
+                            use:setContent={$_intlDayHeader.format(date)}
+                        ></time>
+                    </div>
                 {/if}
             </div>
         {/each}

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

@@ -11,8 +11,6 @@
 
     let el = $state();
 
-    let compact = $derived($slotDuration.seconds >= 3600);
-
     $effect(() => {
         $_bodyEl = el;
     });
@@ -30,14 +28,14 @@
 
 <div
     bind:this={el}
-    class="{$theme.body}{compact ? ' ' + $theme.compact : ''}"
+    class="{$theme.body}"
     use:observeResize={() => $_recheckScrollable = true}
 >
     <div class="{$theme.content}">
         <Section {children}>
             {#snippet lines()}
-                {#each new Array($_times.length) as line}
-                    <div class="{$theme.line}"></div>
+                {#each $_times as time}
+                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
                 {/each}
             {/snippet}
         </Section>

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

@@ -5,15 +5,20 @@
 
     let {children, lines} = $props();
 
-    let {allDayContent, theme, _times} = getContext('state');
+    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}
-        <time class="{$theme.time}" datetime="{time[0]}" use:setContent={time[2] ? time[1] : ''}></time>
+    {#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">

package/src/storage/options.js

@@ -79,7 +79,6 @@ export function createOptions(plugins) {
             button: 'ec-button',
             buttonGroup: 'ec-button-group',
             calendar: 'ec',
-            compact: 'ec-compact',
             content: 'ec-content',
             day: 'ec-day',
             dayHead: 'ec-day-head',
@@ -98,6 +97,7 @@ export function createOptions(plugins) {
             icon: 'ec-icon',
             line: 'ec-line',
             lines: 'ec-lines',
+            minor: 'ec-minor',
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
             resource: 'ec-resource',

package/src/styles/time-grid.scss

@@ -34,6 +34,10 @@
     line-height: 24px;
     top: -12px;
     text-align: right;
+
+    &.ec-minor {
+      visibility: hidden;
+    }
   }
 
   .ec-header .ec-time ,
@@ -60,7 +64,7 @@
     pointer-events: none;
   }
 
-  .ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
+  .ec-line.ec-minor:after {
     border-bottom-style: dotted;
   }
 

package/src/styles/timeline.scss

@@ -74,6 +74,10 @@
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &.ec-minor {
+      visibility: hidden;
+    }
   }
 
   .ec-time, .ec-line {
@@ -107,9 +111,9 @@
     pointer-events: none;
   }
 
-  //.ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
-  //  border-bottom-style: dotted;
-  //}
+  .ec-line.ec-minor:after {
+    border-left-style: dotted;
+  }
 
   .ec-sidebar {
     padding: 0;