npm - @event-calendar/core - Versions diffs - 5.2.1 → 5.2.2 - Mend

@event-calendar/core 5.2.1 → 5.2.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 (8) hide show

package/README.md +12 -3
package/dist/index.css +20 -1
package/dist/index.js +7 -3
package/package.json +1 -1
package/src/Calendar.svelte +3 -2
package/src/storage/options.svelte.js +3 -1
package/src/styles/index.css +1 -0
package/src/styles/scrollbars.css +19 -0

package/README.md CHANGED Viewed

@@ -41,6 +41,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [buttonText](#buttontext)
   - [columnWidth](#columnwidth)
   - [customButtons](#custombuttons)
+  - [customScrollbars](#customscrollbars)
   - [date](#date)
   - [dateClick](#dateclick)
   - [datesAboveResources](#datesaboveresources)
@@ -67,9 +68,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
-  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
+  - [eventDurationEditable](#eventdurationeditable)
   - [eventFilter](#eventfilter)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
@@ -246,8 +247,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@5.2.1/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.1/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.2/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.2/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -470,6 +471,14 @@ function (customButtons) {
 </tr>
 </table>
+### customScrollbars
+- Type `boolean`
+- Default `false`
+Enables scrollbars styling, which in turn prevents the scrollbars from being hidden in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
+This option can be useful, for example, for macOS users in `resourceTimeline` views to indicate that the calendar can be scrolled horizontally. On macOS, scrollbars can be hidden completely, and this option ensures they are always visible in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
 ### date
 - Type `Date` or `string`
 - Default `new Date()`

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.2.1
+ * EventCalendar v5.2.2
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -628,6 +628,25 @@
         pointer-events: auto;
     }
 }
+.ec-custom-scrollbars {
+    .ec-main {
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border: 4px solid transparent;
+            box-shadow: none;
+            background-color: var(--ec-border-color);
+            background-clip: padding-box;
+            border-radius: 8px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--ec-color-400);
+        }
+    }
+}
 .ec {
     display: flex;
     flex-direction: column;

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.2.1
+ * EventCalendar v5.2.2
  * https://github.com/vkurko/calendar
  */
 import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -762,6 +762,8 @@ function createOptions(plugins) {
   let options = {
     buttonText: { today: "today" },
     customButtons: {},
+    customScrollbars: false,
+    // ec option
     date: /* @__PURE__ */ new Date(),
     datesSet: void 0,
     dayHeaderFormat: { weekday: "short", month: "numeric", day: "numeric" },
@@ -805,6 +807,7 @@ function createOptions(plugins) {
       buttonGroup: "ec-button-group",
       calendar: "ec",
       colHead: "ec-col-head",
+      customScrollbars: "ec-custom-scrollbars",
       day: "ec-day",
       dayHead: "ec-day-head",
       disabled: "ec-disabled",
@@ -1690,7 +1693,7 @@ function Calendar($$anchor, $$props) {
   let plugins = $.prop($$props, "plugins", 19, () => []), options = $.prop($$props, "options", 19, () => ({}));
   let mainState = new State(plugins(), options());
   setContext("state", mainState);
-  let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme);
+  let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
   let prevOptions = { ...options() };
   $.user_pre_effect(() => {
     for (let [name, value] of diff(options(), prevOptions)) {
@@ -1828,7 +1831,8 @@ function Calendar($$anchor, $$props) {
       $.set_class(div, 1, $.clsx([
         $.get(theme).calendar,
         $.get(theme).view,
-        $.get(iClass) && $.get(theme)[$.get(iClass)]
+        $.get(iClass) && $.get(theme)[$.get(iClass)],
+        $.get(customScrollbars) && $.get(theme).customScrollbars
       ]));
       $.set_attribute(div, "role", $0);
       styles = $.set_style(div, "", styles, { height: $.get(height2) });

package/package.json CHANGED Viewed

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

package/src/Calendar.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
     let {
         auxComponents, features, events, interaction, iClass, view, viewComponent: View,
-        options: {date, duration, height, hiddenDays, theme}
+        options: {date, duration, height, hiddenDays, customScrollbars, theme}
     } = $derived(mainState);
     // Reactively update options that did change
@@ -131,7 +131,8 @@
     class={[
         theme.calendar,
         theme.view,
-        iClass && theme[iClass]
+        iClass && theme[iClass],
+        customScrollbars && theme.customScrollbars
     ]}
     style:height
     role="{features.includes('list') ? 'list' : 'table'}"

package/src/storage/options.svelte.js CHANGED Viewed

@@ -11,6 +11,7 @@ function createOptions(plugins) {
             today: 'today',
         },
         customButtons: {},
+        customScrollbars: false,  // ec option
         date: new Date(),
         datesSet: undefined,
         dayHeaderFormat: {
@@ -31,7 +32,7 @@ function createOptions(plugins) {
         eventColor: undefined,
         eventContent: undefined,
         eventDidMount: undefined,
-        eventFilter: undefined,    // ec option
+        eventFilter: undefined,  // ec option
         eventMouseEnter: undefined,
         eventMouseLeave: undefined,
         eventOrder: undefined,
@@ -65,6 +66,7 @@ function createOptions(plugins) {
             buttonGroup: 'ec-button-group',
             calendar: 'ec',
             colHead: 'ec-col-head',
+            customScrollbars: 'ec-custom-scrollbars',
             day: 'ec-day',
             dayHead: 'ec-day-head',
             disabled: 'ec-disabled',

package/src/styles/index.css CHANGED Viewed

@@ -6,6 +6,7 @@
 @import "./events.css";
 @import "./now-indicator.css";
 @import "./popup.css";
+@import "./scrollbars.css";
 .ec {
     display: flex;

package/src/styles/scrollbars.css ADDED Viewed

@@ -0,0 +1,19 @@
+.ec-custom-scrollbars {
+    .ec-main {
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border: 4px solid transparent;
+            box-shadow: none;
+            background-color: var(--ec-border-color);
+            background-clip: padding-box;
+            border-radius: 8px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--ec-color-400);
+        }
+    }
+}