npm - @event-calendar/core - Versions diffs - 4.5.0 → 4.5.2 - Mend

@event-calendar/core 4.5.0 → 4.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +17 -2
package/dist/index.css +2 -1
package/dist/index.js +156 -177
package/package.json +1 -1
package/src/plugins/resource-timeline/Body.svelte +2 -2
package/src/plugins/resource-timeline/Days.svelte +4 -6
package/src/plugins/resource-timeline/Label.svelte +11 -3
package/src/plugins/resource-timeline/Sidebar.svelte +10 -3
package/src/plugins/resource-timeline/index.js +1 -0
package/src/styles/timeline.scss +1 -0

package/README.md CHANGED Viewed

@@ -11,6 +11,21 @@ Full-sized drag & drop JavaScript event calendar with resource & timeline views:
 Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar options.
+### Featured sponsors
+<table>
+<tr>
+<td>
+[![@steveb85](https://avatars.githubusercontent.com/u/50031994?s=52&v=4)](https://github.com/steveb85)
+</td>
+<td>
+:heavy_plus_sign: [Get on the list](https://github.com/sponsors/vkurko)
+</td>
+</tr>
+</table>
 ## Table of contents
 - [Usage](#usage)
   - [JavaScript module](#javascript-module)
@@ -228,8 +243,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.2/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.5.0
+ * EventCalendar v4.5.2
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -185,6 +185,7 @@
 }
 .ec-timeline .ec-sidebar .ec-resource span {
   padding-top: 8px;
+  height: fit-content;
 }
 .ec-time-grid .ec-body .ec-event {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.5.0
+ * EventCalendar v4.5.2
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -1359,7 +1359,9 @@ function Buttons($$anchor, $$props) {
         $.template_effect(() => $.set_class(h2, 1, ($theme(), $.untrack(() => $theme().title))));
         $.append($$anchor3, h2);
       };
-      var alternate = ($$anchor3, $$elseif) => {
+      var alternate_4 = ($$anchor3) => {
+        var fragment_2 = $.comment();
+        var node_2 = $.first_child(fragment_2);
         {
           var consequent_1 = ($$anchor4) => {
             var button_1 = root_4$3();
@@ -1375,7 +1377,9 @@ function Buttons($$anchor, $$props) {
             $.event("click", button_1, prev);
             $.append($$anchor4, button_1);
           };
-          var alternate_1 = ($$anchor4, $$elseif2) => {
+          var alternate_3 = ($$anchor4) => {
+            var fragment_3 = $.comment();
+            var node_3 = $.first_child(fragment_3);
             {
               var consequent_2 = ($$anchor5) => {
                 var button_2 = root_6$1();
@@ -1391,7 +1395,9 @@ function Buttons($$anchor, $$props) {
                 $.event("click", button_2, next);
                 $.append($$anchor5, button_2);
               };
-              var alternate_2 = ($$anchor5, $$elseif3) => {
+              var alternate_2 = ($$anchor5) => {
+                var fragment_4 = $.comment();
+                var node_4 = $.first_child(fragment_4);
                 {
                   var consequent_3 = ($$anchor6) => {
                     var button_3 = root_8$1();
@@ -1405,7 +1411,9 @@ function Buttons($$anchor, $$props) {
                     $.event("click", button_3, () => $.store_set(date, cloneDate(today2)));
                     $.append($$anchor6, button_3);
                   };
-                  var alternate_3 = ($$anchor6, $$elseif4) => {
+                  var alternate_1 = ($$anchor6) => {
+                    var fragment_5 = $.comment();
+                    var node_5 = $.first_child(fragment_5);
                     {
                       var consequent_4 = ($$anchor7) => {
                         var button_4 = root_10$1();
@@ -1417,7 +1425,9 @@ function Buttons($$anchor, $$props) {
                         $.template_effect(() => $.set_class(button_4, 1, `${($theme(), $.untrack(() => $theme().button)) ?? ""} ec-${$.get(button) ?? ""}${($customButtons(), $.get(button), $theme(), $.untrack(() => $customButtons()[$.get(button)].active ? " " + $theme().active : "")) ?? ""}`));
                         $.append($$anchor7, button_4);
                       };
-                      var alternate_4 = ($$anchor7, $$elseif5) => {
+                      var alternate = ($$anchor7) => {
+                        var fragment_6 = $.comment();
+                        var node_6 = $.first_child(fragment_6);
                         {
                           var consequent_5 = ($$anchor8) => {
                             var button_5 = root_12$1();
@@ -1431,57 +1441,62 @@ function Buttons($$anchor, $$props) {
                             $.append($$anchor8, button_5);
                           };
                           $.if(
-                            $$anchor7,
+                            node_6,
                             ($$render) => {
                               if ($.get(button) != "") $$render(consequent_5);
                             },
-                            $$elseif5
+                            true
                           );
                         }
+                        $.append($$anchor7, fragment_6);
                       };
                       $.if(
-                        $$anchor6,
+                        node_5,
                         ($$render) => {
                           if ($customButtons(), $.get(button), $.untrack(() => $customButtons()[$.get(button)])) $$render(consequent_4);
-                          else $$render(alternate_4, false);
+                          else $$render(alternate, false);
                         },
-                        $$elseif4
+                        true
                       );
                     }
+                    $.append($$anchor6, fragment_5);
                   };
                   $.if(
-                    $$anchor5,
+                    node_4,
                     ($$render) => {
                       if ($.get(button) == "today") $$render(consequent_3);
-                      else $$render(alternate_3, false);
+                      else $$render(alternate_1, false);
                     },
-                    $$elseif3
+                    true
                   );
                 }
+                $.append($$anchor5, fragment_4);
               };
               $.if(
-                $$anchor4,
+                node_3,
                 ($$render) => {
                   if ($.get(button) == "next") $$render(consequent_2);
                   else $$render(alternate_2, false);
                 },
-                $$elseif2
+                true
               );
             }
+            $.append($$anchor4, fragment_3);
           };
           $.if(
-            $$anchor3,
+            node_2,
             ($$render) => {
               if ($.get(button) == "prev") $$render(consequent_1);
-              else $$render(alternate_1, false);
+              else $$render(alternate_3, false);
             },
-            $$elseif
+            true
           );
         }
+        $.append($$anchor3, fragment_2);
       };
       $.if(node_1, ($$render) => {
         if ($.get(button) == "title") $$render(consequent);
-        else $$render(alternate, false);
+        else $$render(alternate_4, false);
       });
     }
     $.append($$anchor2, fragment_1);
@@ -1753,13 +1768,14 @@ function Calendar($$anchor, $$props) {
   var node_2 = $.sibling(div, 2);
   Auxiliary$1(node_2, {});
   $.template_effect(
-    ($0) => {
+    ($0, $1) => {
       $.set_class(div, 1, `${$theme().calendar ?? ""} ${$theme().view ?? ""}${$_scrollable() ? " " + $theme().withScroll : ""}${$_iClass() ? " " + $theme()[$_iClass()] : ""}`);
       $.set_attribute(div, "role", $0);
-      styles = $.set_style(div, "", styles, { height: $height() });
+      styles = $.set_style(div, "", styles, $1);
     },
     [
-      () => listView($view()) ? "list" : "table"
+      () => listView($view()) ? "list" : "table",
+      () => ({ height: $height() })
     ]
   );
   $.append($$anchor, fragment);
@@ -1808,12 +1824,7 @@ function Header$1($$anchor, $$props) {
   const $_days = () => $.store_get(_days, "$_days", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
-  let {
-    theme,
-    _intlDayHeader,
-    _intlDayHeaderAL,
-    _days
-  } = getContext("state");
+  let { theme, _intlDayHeader, _intlDayHeaderAL, _days } = getContext("state");
   $.init();
   var div = root$p();
   var div_1 = $.child(div);
@@ -1833,8 +1844,7 @@ function Header$1($$anchor, $$props) {
           return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(day).getUTCDay()];
         },
         () => $_intlDayHeaderAL().format($.get(day))
-      ],
-      $.derived_safe_equal
+      ]
     );
     $.append($$anchor2, div_2);
   });
@@ -1890,10 +1900,7 @@ function BaseEvent($$anchor, $$props) {
   let display = $.derived(() => $$props.chunk.event.display);
   let bgColor = $.derived(() => $.get(event).backgroundColor ?? resourceBackgroundColor($.get(event), $resources()) ?? $eventBackgroundColor() ?? $eventColor());
   let txtColor = $.derived(() => $.get(event).textColor ?? resourceTextColor($.get(event), $resources()) ?? $eventTextColor());
-  let style = $.derived(() => entries(styles()({
-    "background-color": $.get(bgColor),
-    "color": $.get(txtColor)
-  })).map((entry) => `${entry[0]}:${entry[1]}`).concat($.get(event).styles).join(";"));
+  let style = $.derived(() => entries(styles()({ "background-color": $.get(bgColor), "color": $.get(txtColor) })).map((entry) => `${entry[0]}:${entry[1]}`).concat($.get(event).styles).join(";"));
   let classNames = $.derived(() => classes()([
     bgEvent($.get(display)) ? $theme().bgEvent : $theme().event,
     ...createEventClasses($eventClassNames(), $.get(event), $_view())
@@ -3061,11 +3068,7 @@ function Action($$anchor, $$props) {
       let payload = findPayload(findDayEl());
       if (payload) {
         let newAllDay;
-        ({
-          allDay: newAllDay,
-          date: newDate,
-          resource: newResource
-        } = payload);
+        ({ allDay: newAllDay, date: newDate, resource: newResource } = payload);
         if (newAllDay === allDay) {
           let candidate = copyIEventData({}, $_iEvents()[0]);
           let constraintFn = $resizeConstraint();
@@ -3326,13 +3329,7 @@ function Action($$anchor, $$props) {
   function createCallbackInfo(event2, oldEvent, jsEvent) {
     let info;
     if (resizing()) {
-      info = resizingStart() ? {
-        startDelta: delta,
-        endDelta: createDuration(0)
-      } : {
-        startDelta: createDuration(0),
-        endDelta: delta
-      };
+      info = resizingStart() ? { startDelta: delta, endDelta: createDuration(0) } : { startDelta: createDuration(0), endDelta: delta };
     } else {
       info = {
         delta,
@@ -3377,10 +3374,7 @@ function Action($$anchor, $$props) {
       selected = false;
       destroyIEvent();
       if (isFunction($unselectFn())) {
-        $unselectFn()({
-          jsEvent,
-          view: toViewWithLocalDates($_view())
-        });
+        $unselectFn()({ jsEvent, view: toViewWithLocalDates($_view()) });
       }
     }
   }
@@ -3702,10 +3696,6 @@ function Event$3($$anchor, $$props) {
     delete style["color"];
     return style;
   });
-  const expression = $.derived(() => {
-    var _a;
-    return (_a = $_interaction().action) == null ? void 0 : _a.noAction;
-  });
   {
     const body = ($$anchor2, defaultBody = $.noop, bgColor = $.noop, txtColor = $.noop) => {
       var fragment_1 = root_1$8();
@@ -3713,12 +3703,19 @@ function Event$3($$anchor, $$props) {
       let styles_1;
       var node = $.sibling(div, 2);
       $.snippet(node, defaultBody);
-      $.template_effect(() => {
-        $.set_class(div, 1, $theme().eventTag);
-        styles_1 = $.set_style(div, "", styles_1, { "background-color": bgColor() });
-      });
+      $.template_effect(
+        ($02) => {
+          $.set_class(div, 1, $theme().eventTag);
+          styles_1 = $.set_style(div, "", styles_1, $02);
+        },
+        [() => ({ "background-color": bgColor() })]
+      );
       $.append($$anchor2, fragment_1);
     };
+    let $0 = $.derived(() => {
+      var _a;
+      return (_a = $_interaction().action) == null ? void 0 : _a.noAction;
+    });
     BaseEvent($$anchor, {
       get chunk() {
         return $$props.chunk;
@@ -3727,7 +3724,7 @@ function Event$3($$anchor, $$props) {
         return $.get(styles);
       },
       get onpointerdown() {
-        return $.get(expression);
+        return $.get($0);
       },
       body,
       $$slots: { body: true }
@@ -3826,12 +3823,10 @@ function Day$3($$anchor, $$props) {
           $.set_class(time_1, 1, $theme().daySide);
           $.set_attribute(time_1, "datetime", $.get(datetime));
         },
-        [
-          () => {
-            var _a;
-            return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
-          }
-        ]
+        [() => {
+          var _a;
+          return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
+        }]
       );
       $.append($$anchor2, div);
     };
@@ -3846,10 +3841,7 @@ function Day$3($$anchor, $$props) {
 $.delegate(["pointerdown"]);
 function onclick$1(jsEvent, $noEventsClick, noEventsClick, $_view, _view) {
   if (isFunction($noEventsClick())) {
-    $noEventsClick()({
-      jsEvent,
-      view: toViewWithLocalDates($_view())
-    });
+    $noEventsClick()({ jsEvent, view: toViewWithLocalDates($_view()) });
   }
 }
 var root_1$6 = $.from_html(`<div></div>`);
@@ -3894,13 +3886,7 @@ function Body$2($$anchor, $$props) {
   {
     var consequent = ($$anchor2) => {
       var div_2 = root_1$6();
-      div_2.__click = [
-        onclick$1,
-        $noEventsClick,
-        noEventsClick,
-        $_view,
-        _view
-      ];
+      div_2.__click = [onclick$1, $noEventsClick, noEventsClick, $_view, _view];
       $.action(div_2, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(content));
       $.template_effect(() => $.set_class(div_2, 1, $theme().noEvents));
       $.append($$anchor2, div_2);
@@ -4051,12 +4037,7 @@ function Section($$anchor, $$props) {
   const $slotLabelInterval = () => $.store_get(slotLabelInterval, "$slotLabelInterval", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_times = () => $.store_get(_times, "$_times", $$stores);
-  let {
-    allDayContent,
-    slotLabelInterval,
-    theme,
-    _times
-  } = getContext("state");
+  let { allDayContent, slotLabelInterval, theme, _times } = getContext("state");
   let allDayText = $.derived(() => createAllDayContent($allDayContent()));
   let showAllTimes = $.derived(() => $slotLabelInterval() && $slotLabelInterval().seconds <= 0);
   var fragment = root$f();
@@ -4188,12 +4169,7 @@ function Event$2($$anchor, $$props) {
   const $_slotTimeLimits = () => $.store_get(_slotTimeLimits, "$_slotTimeLimits", $$stores);
   const $slotHeight = () => $.store_get(slotHeight, "$slotHeight", $$stores);
   const $slotEventOverlap = () => $.store_get(slotEventOverlap, "$slotEventOverlap", $$stores);
-  let {
-    slotEventOverlap,
-    slotDuration,
-    slotHeight,
-    _slotTimeLimits
-  } = getContext("state");
+  let { slotEventOverlap, slotDuration, slotHeight, _slotTimeLimits } = getContext("state");
   let display = $.derived(() => $$props.chunk.event.display);
   let styles = $.derived(() => (style) => {
     let step = $slotDuration().seconds;
@@ -4443,12 +4419,10 @@ function Day$2($$anchor, $$props) {
       $.set_class(div_2, 1, $theme().events);
       $.set_class(div_3, 1, $theme().extra);
     },
-    [
-      () => {
-        var _a;
-        return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
-      }
-    ]
+    [() => {
+      var _a;
+      return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
+    }]
   );
   $.append($$anchor, div);
   $.pop();
@@ -4506,13 +4480,7 @@ function Day$1($$anchor, $$props) {
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_interaction = () => $.store_get(_interaction, "$_interaction", $$stores);
   let iChunks = $.prop($$props, "iChunks", 19, () => []), resource = $.prop($$props, "resource", 3, void 0);
-  let {
-    highlightedDates,
-    theme,
-    validRange,
-    _interaction,
-    _today
-  } = getContext("state");
+  let { highlightedDates, theme, validRange, _interaction, _today } = getContext("state");
   let el = $.state(void 0);
   let refs = [];
   let dayChunks = $.derived(() => $$props.chunks.filter((chunk) => datesEqual(chunk.date, $$props.date)));
@@ -4613,12 +4581,10 @@ function Day$1($$anchor, $$props) {
       $.set_class(div_1, 1, $theme().bgEvents);
       $.set_class(div_3, 1, $theme().events);
     },
-    [
-      () => {
-        var _a;
-        return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
-      }
-    ]
+    [() => {
+      var _a;
+      return (_a = $theme().weekdays) == null ? void 0 : _a[$$props.date.getUTCDay()];
+    }]
   );
   $.append($$anchor, div);
   var $$pop = $.pop({ reposition });
@@ -4763,8 +4729,7 @@ function View$2($$anchor, $$props) {
             () => datesEqual($.get(date), $_today()) ? " " + $theme().today : "",
             () => toISOString($.get(date), 10),
             () => $_intlDayHeaderAL().format($.get(date))
-          ],
-          $.derived_safe_equal
+          ]
         );
         $.append($$anchor3, div_1);
       });
@@ -5080,15 +5045,17 @@ function View$1($$anchor, $$props) {
               $.each(node_10, 1, $_viewDates, $.index, ($$anchor5, date) => {
                 var div_10 = root_12();
                 $.each(div_10, 5, $_viewResources, $.index, ($$anchor6, resource) => {
-                  const expression = $.derived(() => [$.get(date)]);
-                  Week($$anchor6, {
-                    get dates() {
-                      return $.get(expression);
-                    },
-                    get resource() {
-                      return $.get(resource);
-                    }
-                  });
+                  {
+                    let $0 = $.derived(() => [$.get(date)]);
+                    Week($$anchor6, {
+                      get dates() {
+                        return $.get($0);
+                      },
+                      get resource() {
+                        return $.get(resource);
+                      }
+                    });
+                  }
                 });
                 $.reset(div_10);
                 $.template_effect(() => $.set_class(div_10, 1, $theme().resource));
@@ -5147,16 +5114,18 @@ function View$1($$anchor, $$props) {
       $.each(node_14, 17, () => $.get(loops)[0], $.index, ($$anchor3, item0) => {
         var div_13 = root_17();
         $.each(div_13, 21, () => $.get(loops)[1], $.index, ($$anchor4, item1) => {
-          const expression_1 = $.derived(() => $datesAboveResources() ? $.get(item0) : $.get(item1));
-          const expression_2 = $.derived(() => $datesAboveResources() ? $.get(item1) : $.get(item0));
-          Day$2($$anchor4, {
-            get date() {
-              return $.get(expression_1);
-            },
-            get resource() {
-              return $.get(expression_2);
-            }
-          });
+          {
+            let $0 = $.derived(() => $datesAboveResources() ? $.get(item0) : $.get(item1));
+            let $1 = $.derived(() => $datesAboveResources() ? $.get(item1) : $.get(item0));
+            Day$2($$anchor4, {
+              get date() {
+                return $.get($0);
+              },
+              get resource() {
+                return $.get($1);
+              }
+            });
+          }
         });
         $.reset(div_13);
         $.template_effect(() => $.set_class(div_13, 1, $theme().resource));
@@ -5241,9 +5210,10 @@ function Label($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $resourceLabelContent = () => $.store_get(resourceLabelContent, "$resourceLabelContent", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   const $resourceLabelDidMount = () => $.store_get(resourceLabelDidMount, "$resourceLabelDidMount", $$stores);
   let date = $.prop($$props, "date", 3, void 0);
-  let { resourceLabelContent, resourceLabelDidMount } = getContext("state");
+  let { resourceLabelContent, resourceLabelDidMount, _resHs } = getContext("state");
   let el = $.state(void 0);
   let content = $.derived(() => {
     if ($resourceLabelContent()) {
@@ -5255,6 +5225,13 @@ function Label($$anchor, $$props) {
       return $$props.resource.title;
     }
   });
+  $.user_effect(() => {
+    $.get(content);
+    untrack(() => {
+      $_resHs().set($$props.resource, ceil(height($.get(el)) + 10));
+      $.store_set(_resHs, $_resHs());
+    });
+  });
   onMount(() => {
     if (isFunction($resourceLabelDidMount())) {
       $resourceLabelDidMount()({
@@ -5312,13 +5289,7 @@ function Expander($$anchor, $$props) {
   {
     var consequent_1 = ($$anchor2) => {
       var button = root_2$2();
-      button.__click = [
-        onclick,
-        expanded,
-        payload,
-        toggle,
-        resources
-      ];
+      button.__click = [onclick, expanded, payload, toggle, resources];
       var node_2 = $.child(button);
       {
         var consequent = ($$anchor3) => {
@@ -5353,28 +5324,35 @@ $.delegate(["click"]);
 var root_1$3 = $.from_html(`<div role="rowheader"><!> <!></div>`);
 var root$5 = $.from_html(`<div><div></div> <div></div></div>`);
 function Sidebar($$anchor, $$props) {
-  $.push($$props, false);
+  $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
+  const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_headerHeight = () => $.store_get(_headerHeight, "$_headerHeight", $$stores);
   const $_sidebarEl = () => $.store_get(_sidebarEl, "$_sidebarEl", $$stores);
-  const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $_nestedResources = () => $.store_get(_nestedResources, "$_nestedResources", $$stores);
   let {
     _viewResources,
     _headerHeight,
     _bodyEl,
+    _daysHs,
     _resHs,
     _sidebarEl,
     _nestedResources,
     theme
   } = getContext("state");
+  $.user_pre_effect(() => {
+    $_viewResources();
+    untrack(() => {
+      $_resHs().clear();
+    });
+  });
   function onwheel(jsEvent) {
     $_bodyEl().scrollBy({ top: jsEvent.deltaY < 0 ? -30 : 30 });
   }
-  $.init();
   var div = root$5();
   var div_1 = $.child(div);
   var div_2 = $.sibling(div_1, 2);
@@ -5406,9 +5384,8 @@ function Sidebar($$anchor, $$props) {
         $.set_style(div_3, `flex-basis: ${$0 ?? ""}px`);
       },
       [
-        () => max($_resHs().get($.get(resource)) ?? 0, 34)
-      ],
-      $.derived_safe_equal
+        () => max($_daysHs().get($.get(resource)) ?? 0, $_resHs().get($.get(resource)) ?? 0, 34)
+      ]
     );
     $.append($$anchor2, div_3);
   });
@@ -5489,8 +5466,7 @@ function Header($$anchor, $$props) {
           [
             () => toISOString($.get(date), 10),
             () => $_intlDayHeaderAL().format($.get(date))
-          ],
-          $.derived_safe_equal
+          ]
         );
         $.append($$anchor3, fragment);
       };
@@ -5508,8 +5484,7 @@ function Header($$anchor, $$props) {
           [
             () => toISOString($.get(date), 10),
             () => $_intlDayHeaderAL().format($.get(date))
-          ],
-          $.derived_safe_equal
+          ]
         );
         $.append($$anchor3, div_6);
       };
@@ -5519,17 +5494,13 @@ function Header($$anchor, $$props) {
       });
     }
     $.reset(div_2);
-    $.template_effect(
-      ($0, $1) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`),
-      [
-        () => {
-          var _a;
-          return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
-        },
-        () => datesEqual($.get(date), $_today()) ? " " + $theme().today : ""
-      ],
-      $.derived_safe_equal
-    );
+    $.template_effect(($0, $1) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`), [
+      () => {
+        var _a;
+        return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
+      },
+      () => datesEqual($.get(date), $_today()) ? " " + $theme().today : ""
+    ]);
     $.append($$anchor2, div_2);
   });
   $.reset(div_1);
@@ -5890,20 +5861,21 @@ function Days($$anchor, $$props) {
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   let {
     _viewDates,
     _filteredEvents,
     _iEvents,
-    _resHs,
     _dayTimeLimits,
+    _daysHs,
+    _resHs,
     slotDuration,
     theme,
     validRange
   } = getContext("state");
   let refs = [];
-  let height2 = $.state(0);
   let $$d = $.derived(() => {
     let start2 = cloneDate(limitToRange($_viewDates()[0], $validRange()));
     let end2 = cloneDate(limitToRange($_viewDates().at(-1), $validRange()));
@@ -5946,9 +5918,8 @@ function Days($$anchor, $$props) {
     return chunk;
   }));
   function reposition() {
-    $.set(height2, ceil(max(...runReposition(refs, $_viewDates()))) + 10);
-    $_resHs().set($$props.resource, $.get(height2));
-    $.store_set(_resHs, $_resHs());
+    $_daysHs().set($$props.resource, ceil(max(...runReposition(refs, $_viewDates()))) + 10);
+    $.store_set(_daysHs, $_daysHs());
   }
   var div = root$2();
   $.each(div, 5, $_viewDates, $.index, ($$anchor2, date, i) => {
@@ -5984,7 +5955,9 @@ function Days($$anchor, $$props) {
       $.set_class(div, 1, $theme().days);
       $.set_style(div, `flex-basis: ${$0 ?? ""}px`);
     },
-    [() => max($.get(height2), 34)]
+    [
+      () => max($_daysHs().get($$props.resource) ?? 0, $_resHs().get($$props.resource) ?? 0, 34)
+    ]
   );
   $.append($$anchor, div);
   var $$pop = $.pop({ reposition });
@@ -6002,7 +5975,7 @@ function Body($$anchor, $$props) {
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $_headerEl = () => $.store_get(_headerEl, "$_headerEl", $$stores);
@@ -6020,7 +5993,7 @@ function Body($$anchor, $$props) {
     _dayTimes,
     _dayTimeLimits,
     _recheckScrollable,
-    _resHs,
+    _daysHs,
     _viewResources,
     _viewDates,
     scrollTime,
@@ -6040,7 +6013,7 @@ function Body($$anchor, $$props) {
     untrack(scrollToTime);
   });
   function reposition() {
-    $_resHs().clear();
+    $_daysHs().clear();
     runReposition(refs, $_viewResources());
   }
   $.user_effect(() => {
@@ -6154,14 +6127,19 @@ function NowIndicator($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var div = root_1();
       let styles;
-      $.template_effect(() => {
-        $.set_class(div, 1, $theme().nowIndicator);
-        styles = $.set_style(div, "", styles, {
-          top: `${$_headerHeight() + 2}px`,
-          left: `${$.get(left) ?? ""}px`,
-          height: `${$_bodyHeight() - 1}px`
-        });
-      });
+      $.template_effect(
+        ($0) => {
+          $.set_class(div, 1, $theme().nowIndicator);
+          styles = $.set_style(div, "", styles, $0);
+        },
+        [
+          () => ({
+            top: `${$_headerHeight() + 2}px`,
+            left: `${$.get(left) ?? ""}px`,
+            height: `${$_bodyHeight() - 1}px`
+          })
+        ]
+      );
       $.append($$anchor2, div);
     };
     $.if(node, ($$render) => {
@@ -6260,6 +6238,7 @@ const index = {
     state._headerHeight = writable(0);
     state._dayTimeLimits = dayTimeLimits(state);
     state._dayTimes = dayTimes(state);
+    state._daysHs = writable(/* @__PURE__ */ new Map());
     state._nestedResources = nestedResources(state);
     state._resHs = writable(/* @__PURE__ */ new Map());
     state._sidebarEl = writable(void 0);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [

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

@@ -5,7 +5,7 @@
     import Days from './Days.svelte';
     let {_bodyEl, _bodyHeight, _bodyWidth, _bodyScrollLeft, _headerEl, _filteredEvents, _sidebarEl, _dayTimes, _dayTimeLimits,
-        _recheckScrollable, _resHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
+        _recheckScrollable, _daysHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
     let refs = [];
@@ -21,7 +21,7 @@
     });
     function reposition() {
-        $_resHs.clear();
+        $_daysHs.clear();
         runReposition(refs, $_viewResources);
     }
     $effect(() => {

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

@@ -10,11 +10,10 @@
     let {resource} = $props();
     let {
-        _viewDates, _filteredEvents, _iEvents, _resHs, _dayTimeLimits, slotDuration, theme, validRange
+        _viewDates, _filteredEvents, _iEvents, _dayTimeLimits, _daysHs, _resHs, slotDuration, theme, validRange
     } = getContext('state');
     let refs = [];
-    let height = $state(0);
     let [start, end] = $derived.by(() => {
         let start = cloneDate(limitToRange($_viewDates[0], $validRange));
@@ -61,13 +60,12 @@
     }));
     export function reposition() {
-        height = ceil(max(...runReposition(refs, $_viewDates))) + 10;
-        $_resHs.set(resource, height);
-        $_resHs = $_resHs;
+        $_daysHs.set(resource, ceil(max(...runReposition(refs, $_viewDates))) + 10);
+        $_daysHs = $_daysHs;
     }
 </script>
-<div class="{$theme.days}" style="flex-basis: {max(height, 34)}px" role="row">
+<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]}/>

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

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

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

@@ -1,10 +1,17 @@
 <script>
-    import {getContext} from 'svelte';
+    import {getContext, untrack} from 'svelte';
     import {max} from '#lib';
     import Label from './Label.svelte';
     import Expander from './Expander.svelte';
-    let {_viewResources, _headerHeight, _bodyEl, _resHs, _sidebarEl, _nestedResources, theme} = getContext('state');
+    let {_viewResources, _headerHeight, _bodyEl, _daysHs, _resHs, _sidebarEl, _nestedResources, theme} = getContext('state');
+    $effect.pre(() => {
+        $_viewResources;
+        untrack(() => {
+            $_resHs.clear();
+        });
+    });
     function onwheel(jsEvent) {
         $_bodyEl.scrollBy({
@@ -17,7 +24,7 @@
     <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($_resHs.get(resource) ?? 0, 34)}px" role="rowheader">
+            <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}

package/src/plugins/resource-timeline/index.js CHANGED Viewed

@@ -58,6 +58,7 @@ export default {
 		state._headerHeight = writable(0);
 		state._dayTimeLimits = dayTimeLimits(state);  // flexible time limits per day
 		state._dayTimes = dayTimes(state);
+		state._daysHs = writable(new Map());  // days row heights
 		state._nestedResources = nestedResources(state);
 		state._resHs = writable(new Map());  // resource row heights
 		state._sidebarEl = writable(undefined);

package/src/styles/timeline.scss CHANGED Viewed

@@ -145,6 +145,7 @@
       span {
         padding-top: 8px;
+        height: fit-content;
       }
     }
   }