npm - @event-calendar/core - Versions diffs - 4.1.0 → 4.2.0 - Mend

@event-calendar/core 4.1.0 → 4.2.0

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 +3 -3
package/dist/index.css +8 -1
package/dist/index.js +30 -27
package/package.json +2 -2
package/src/Calendar.svelte +7 -8
package/src/lib/components/BaseEvent.svelte +2 -2
package/src/plugins/list/Event.svelte +1 -1
package/src/plugins/resource-time-grid/View.svelte +7 -4
package/src/plugins/time-grid/View.svelte +6 -3
package/src/styles/index.scss +7 -0

package/README.md CHANGED Viewed

@@ -227,8 +227,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.1.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.1.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.2.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.2.0/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -1552,7 +1552,7 @@ function (start, end) {
 - Type `string`
 - Default `undefined`
-Sets the default text color for events on the calendar.
+Sets the default text color for calendar events (except for `list` view).
 You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.1.0
+ * EventCalendar v4.2.0
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -541,6 +541,13 @@
   top: 0;
   z-index: 2;
 }
+.ec-list .ec-day.ec-today .ec-day-head:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-color: var(--ec-today-bg-color);
+}
 .ec-list .ec-day:first-child .ec-day-head {
   border-top: none;
 }

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.1.0
+ * EventCalendar v4.2.0
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -1670,18 +1670,17 @@ function Calendar($$anchor, $$props) {
     return toEventWithLocalDates(event);
   }
   function updateEvent(event) {
-    for (let e of $_events()) {
-      if (e.id == event.id) {
-        event = createEvents([event])[0];
-        assign(e, event);
-        $.store_set(_events, $_events());
-        return toEventWithLocalDates(event);
-      }
+    let id = String(event.id);
+    let idx = $_events().findIndex((event2) => event2.id === id);
+    if (idx >= 0) {
+      $.store_mutate(_events, $.untrack($_events)[idx] = createEvents([event])[0], $.untrack($_events));
+      return toEventWithLocalDates(event);
     }
     return null;
   }
   function removeEventById(id) {
-    let idx = $_events().findIndex((event) => event.id == id);
+    id = String(id);
+    let idx = $_events().findIndex((event) => event.id === id);
     if (idx >= 0) {
       $_events().splice(idx, 1);
       $.store_set(_events, $_events());
@@ -1909,13 +1908,10 @@ function BaseEvent($$anchor, $$props) {
     (_a = $$props.onpointerdown) == null ? void 0 : _a.apply(this, $$args);
   };
   {
-    const defaultBody = ($$anchor2, style2 = $.noop) => {
+    const defaultBody = ($$anchor2) => {
       var div = root_1$a();
       $.action(div, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(content));
-      $.template_effect(() => {
-        $.set_class(div, 1, $.clsx($theme().eventBody));
-        $.set_style(div, style2());
-      });
+      $.template_effect(() => $.set_class(div, 1, $.clsx($theme().eventBody)));
       $.append($$anchor2, div);
     };
     var node = $.child(article);
@@ -3689,7 +3685,7 @@ function Event$3($$anchor, $$props) {
       var div = $.first_child(fragment_1);
       let styles_1;
       var node = $.sibling(div, 2);
-      $.snippet(node, defaultBody, () => `color:${txtColor()}`);
+      $.snippet(node, defaultBody);
       $.template_effect(() => {
         $.set_class(div, 1, $theme().eventTag);
         styles_1 = $.set_style(div, "", styles_1, { "background-color": bgColor() });
@@ -4701,6 +4697,7 @@ function View$2($$anchor, $$props) {
   const [$$stores, $$cleanup] = $.setup_stores();
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
   const $allDaySlot = () => $.store_get(allDaySlot, "$allDaySlot", $$stores);
@@ -4708,6 +4705,7 @@ function View$2($$anchor, $$props) {
     _viewDates,
     _intlDayHeader,
     _intlDayHeaderAL,
+    _today,
     allDaySlot,
     theme
   } = getContext("state");
@@ -4725,16 +4723,17 @@ function View$2($$anchor, $$props) {
         $.action(time, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(date)));
         $.reset(div_1);
         $.template_effect(
-          ($0, $1, $2) => {
-            $.set_class(div_1, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-            $.set_attribute(time, "datetime", $1);
-            $.set_attribute(time, "aria-label", $2);
+          ($0, $1, $2, $3) => {
+            $.set_class(div_1, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+            $.set_attribute(time, "datetime", $2);
+            $.set_attribute(time, "aria-label", $3);
           },
           [
             () => {
               var _a;
               return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
             },
+            () => datesEqual($.get(date), $_today()) ? " " + $theme().today : "",
             () => toISOString($.get(date), 10),
             () => $_intlDayHeaderAL().format($.get(date))
           ],
@@ -4898,11 +4897,13 @@ function View$1($$anchor, $$props) {
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
   const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
   const $allDaySlot = () => $.store_get(allDaySlot, "$allDaySlot", $$stores);
   let {
     datesAboveResources,
+    _today,
     _viewDates,
     _viewResources,
     _intlDayHeader,
@@ -4929,16 +4930,17 @@ function View$1($$anchor, $$props) {
             $.action(time, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(item0)));
             $.reset(div_2);
             $.template_effect(
-              ($0, $1, $2) => {
-                $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-                $.set_attribute(time, "datetime", $1);
-                $.set_attribute(time, "aria-label", $2);
+              ($0, $1, $2, $3) => {
+                $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+                $.set_attribute(time, "datetime", $2);
+                $.set_attribute(time, "aria-label", $3);
               },
               [
                 () => {
                   var _a;
                   return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(item0).getUTCDay()];
                 },
+                () => datesEqual($.get(item0), $_today()) ? " " + $theme().today : "",
                 () => toISOString($.get(item0), 10),
                 () => $_intlDayHeaderAL().format($.get(item0))
               ]
@@ -4992,16 +4994,17 @@ function View$1($$anchor, $$props) {
                   $.action(time_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(item1)));
                   $.reset(div_6);
                   $.template_effect(
-                    ($0, $1, $2) => {
-                      $.set_class(div_6, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-                      $.set_attribute(time_1, "datetime", $1);
-                      $.set_attribute(time_1, "aria-label", `${resourceLabels[i] ?? ""}${$2 ?? ""}`);
+                    ($0, $1, $2, $3) => {
+                      $.set_class(div_6, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+                      $.set_attribute(time_1, "datetime", $2);
+                      $.set_attribute(time_1, "aria-label", `${resourceLabels[i] ?? ""}${$3 ?? ""}`);
                     },
                     [
                       () => {
                         var _a;
                         return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(item1).getUTCDay()];
                       },
+                      () => datesEqual($.get(item1), $_today()) ? " " + $theme().today : "",
                       () => toISOString($.get(item1), 10),
                       () => $_intlDayHeaderAL().format($.get(item1))
                     ]

package/package.json CHANGED Viewed

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

package/src/Calendar.svelte CHANGED Viewed

@@ -68,19 +68,18 @@
     }
     export function updateEvent(event) {
-        for (let e of $_events) {
-            if (e.id == event.id) {
-                event = createEvents([event])[0];
-                assign(e, event);
-                $_events = $_events;
-                return toEventWithLocalDates(event);
-            }
+        let id = String(event.id);
+        let idx = $_events.findIndex(event => event.id === id);
+        if (idx >= 0) {
+            $_events[idx] = createEvents([event])[0];
+            return toEventWithLocalDates(event);
         }
         return null;
     }
     export function removeEventById(id) {
-        let idx = $_events.findIndex(event => event.id == id);
+        id = String(id);
+        let idx = $_events.findIndex(event => event.id === id);
         if (idx >= 0) {
             $_events.splice(idx, 1);
             $_events = $_events;

package/src/lib/components/BaseEvent.svelte CHANGED Viewed

@@ -77,8 +77,8 @@
     {onmouseleave}
     {onpointerdown}
 >
-    {#snippet defaultBody(style)}
-        <div class={$theme.eventBody} {style} use:setContent={content}></div>
+    {#snippet defaultBody()}
+        <div class={$theme.eventBody} use:setContent={content}></div>
     {/snippet}
     {#if body}
         {@render body(defaultBody, bgColor, txtColor)}

package/src/plugins/list/Event.svelte CHANGED Viewed

@@ -17,6 +17,6 @@
 <BaseEvent {chunk} {styles} onpointerdown={$_interaction.action?.noAction}>
     {#snippet body(defaultBody, bgColor, txtColor)}
         <div class="{$theme.eventTag}" style:background-color={bgColor}></div>
-        {@render defaultBody(`color:${txtColor}`)}
+        {@render defaultBody()}
     {/snippet}
 </BaseEvent>

package/src/plugins/resource-time-grid/View.svelte CHANGED Viewed

@@ -1,11 +1,11 @@
 <script>
     import {getContext} from 'svelte';
-    import {setContent, toISOString} from '#lib';
+    import {datesEqual, setContent, toISOString} from '#lib';
     import {Section, Body, Day, Week} from '../time-grid/index.js';
     import Label from './Label.svelte';
     let {
-        datesAboveResources, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme
+        datesAboveResources, _today, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme
     } = getContext('state');
     let loops = $derived($datesAboveResources ? [$_viewDates, $_viewResources] : [$_viewResources, $_viewDates]);
@@ -18,7 +18,7 @@
         {#each loops[0] as item0, i}
             <div class="{$theme.resource}">
                 {#if $datesAboveResources}
-                    <div class="{$theme.day} {$theme.weekdays?.[item0.getUTCDay()]}">
+                    <div class="{$theme.day} {$theme.weekdays?.[item0.getUTCDay()]}{datesEqual(item0, $_today) ? ' ' + $theme.today : ''}">
                         <time
                             datetime="{toISOString(item0, 10)}"
                             aria-label="{$_intlDayHeaderAL.format(item0)}"
@@ -38,7 +38,10 @@
                                     <Label resource={item1} date={item0} />
                                 </div>
                             {:else}
-                                <div class="{$theme.day} {$theme.weekdays?.[item1.getUTCDay()]}" role="columnheader">
+                                <div
+                                    class="{$theme.day} {$theme.weekdays?.[item1.getUTCDay()]}{datesEqual(item1, $_today) ? ' ' + $theme.today : ''}"
+                                    role="columnheader"
+                                >
                                     <time
                                         datetime="{toISOString(item1, 10)}"
                                         aria-label="{resourceLabels[i]}{$_intlDayHeaderAL.format(item1)}"

package/src/plugins/time-grid/View.svelte CHANGED Viewed

@@ -1,18 +1,21 @@
 <script>
     import {getContext} from 'svelte';
-    import {setContent, toISOString} from '#lib';
+    import {datesEqual, setContent, toISOString} from '#lib';
     import Section from './Section.svelte';
     import Body from './Body.svelte';
     import Day from './Day.svelte';
     import Week from './all-day/Week.svelte';
-    let {_viewDates, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme} = getContext('state');
+    let {_viewDates, _intlDayHeader, _intlDayHeaderAL, _today, allDaySlot, theme} = getContext('state');
 </script>
 <div class="{$theme.header}">
     <Section>
         {#each $_viewDates as date}
-            <div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}" role="columnheader">
+            <div
+                class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}"
+                role="columnheader"
+            >
                 <time
                     datetime="{toISOString(date, 10)}"
                     aria-label="{$_intlDayHeaderAL.format(date)}"

package/src/styles/index.scss CHANGED Viewed

@@ -284,6 +284,13 @@
     top: 0;
     z-index: 2;
   }
+  .ec-day.ec-today .ec-day-head:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-color: var(--ec-today-bg-color);
+  }
   .ec-day:first-child .ec-day-head {
     border-top: none;