v4.5.2

rovshena · vkurko · commit bffb5d1166f0 · 2025-08-21T21:37:59.000+03:00
Fixed row height issue in resourceTimeline views
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # EventCalendar changelog
 
+## 4.5.2
+August 21, 2025
+* Fixed row height issue in `resourceTimeline` views ([401](https://github.com/vkurko/calendar/issues/401))
+
 ## 4.5.1
 August 11, 2025
-* Attempt to fix `Svelte error: await_outside_boundary` ([530](https://github.com/vkurko/calendar/issues/530))
+* Fixed `Svelte error: await_outside_boundary` ([530](https://github.com/vkurko/calendar/issues/530))
 
 ## 4.5.0
 June 27, 2025
diff --git a/README.md b/README.md
@@ -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>
diff --git a/docs/index.html b/docs/index.html
@@ -12,8 +12,8 @@
     <link rel="manifest" href="site.webmanifest">
     <link rel="stylesheet" href="global.css?20231021">
 
-    <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>
 
     <style>
         .ec-timeline .ec-time, .ec-timeline .ec-line {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "event-calendar",
   "private": true,
-  "version": "4.5.1",
+  "version": "4.5.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "sass": "^1.90.0",
-    "svelte": "^5.38.0",
+    "svelte": "^5.38.2",
     "vite": "^6.3.5",
     "vite-plugin-banner": "^0.8.1"
   }
diff --git a/packages/build/README.md b/packages/build/README.md
@@ -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>
diff --git a/packages/build/package.json b/packages/build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/build",
-  "version": "4.5.1",
+  "version": "4.5.2",
   "title": "Event Calendar",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -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>
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -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": [
diff --git a/packages/core/src/plugins/resource-timeline/Body.svelte b/packages/core/src/plugins/resource-timeline/Body.svelte
@@ -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(() => {
diff --git a/packages/core/src/plugins/resource-timeline/Days.svelte b/packages/core/src/plugins/resource-timeline/Days.svelte
@@ -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]}/>
diff --git a/packages/core/src/plugins/resource-timeline/Label.svelte b/packages/core/src/plugins/resource-timeline/Label.svelte
@@ -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({
diff --git a/packages/core/src/plugins/resource-timeline/Sidebar.svelte b/packages/core/src/plugins/resource-timeline/Sidebar.svelte
@@ -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}
diff --git a/packages/core/src/plugins/resource-timeline/index.js b/packages/core/src/plugins/resource-timeline/index.js
@@ -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);
diff --git a/packages/core/src/styles/timeline.scss b/packages/core/src/styles/timeline.scss
@@ -145,6 +145,7 @@
 
       span {
         padding-top: 8px;
+        height: fit-content;
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@event-calendar/build",`
`3`		`- "version": "4.5.1",`
	`3`	`+ "version": "4.5.2",`
`4`	`4`	`"title": "Event Calendar",`
`5`	`5`	`"description": "Full-sized drag & drop event calendar with resource & timeline views",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@event-calendar/core",`
`3`		`- "version": "4.5.1",`
	`3`	`+ "version": "4.5.2",`
`4`	`4`	`"title": "Event Calendar Core package",`
`5`	`5`	`"description": "Full-sized drag & drop event calendar with resource & timeline views",`
`6`	`6`	`"keywords": [`