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

@event-calendar/core 4.5.1 → 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 +2 -2
package/dist/index.css +2 -1
package/dist/index.js +37 -17
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

@@ -243,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.1/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.1/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.1
+ * 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.1
+ * EventCalendar v4.5.2
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -5210,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()) {
@@ -5224,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()({
@@ -5316,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);
@@ -5368,7 +5383,9 @@ function Sidebar($$anchor, $$props) {
         $.set_class(div_3, 1, $theme().resource);
         $.set_style(div_3, `flex-basis: ${$0 ?? ""}px`);
       },
-      [() => max($_resHs().get($.get(resource)) ?? 0, 34)]
+      [
+        () => max($_daysHs().get($.get(resource)) ?? 0, $_resHs().get($.get(resource)) ?? 0, 34)
+      ]
     );
     $.append($$anchor2, div_3);
   });
@@ -5844,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()));
@@ -5900,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) => {
@@ -5938,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 });
@@ -5956,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);
@@ -5974,7 +5993,7 @@ function Body($$anchor, $$props) {
     _dayTimes,
     _dayTimeLimits,
     _recheckScrollable,
-    _resHs,
+    _daysHs,
     _viewResources,
     _viewDates,
     scrollTime,
@@ -5994,7 +6013,7 @@ function Body($$anchor, $$props) {
     untrack(scrollToTime);
   });
   function reposition() {
-    $_resHs().clear();
+    $_daysHs().clear();
     runReposition(refs, $_viewResources());
   }
   $.user_effect(() => {
@@ -6219,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.1",
+  "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;
       }
     }
   }