npm - @event-calendar/core - Versions diffs - 3.6.2 → 3.7.1 - Mend

@event-calendar/core 3.6.2 → 3.7.1

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 (11) hide show

package/README.md CHANGED Viewed

@@ -203,8 +203,8 @@ Or in your Svelte component, use the calendar like this:
 ### Pre-built browser ready bundle
 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@3.6.2/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.2/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.7.1/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.7.1/event-calendar.min.js"></script>
 ```
 <details>
@@ -2095,7 +2095,7 @@ Defines the time slot width in pixels in `ResourceTimeline` views. When changing
 ### theme
 - Type `object` or `function`
-- Default `{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
+- Default `{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', expander: 'ec-expander', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
 > Views override the default value as follows:
 > - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
 > - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
@@ -2890,8 +2890,36 @@ Here are all admissible fields for the resource’s input object:
 `object` A plain object with any miscellaneous properties. It will be directly transferred to the `extendedProps` property of the Resource object. Default `{}`
 </td>
 </tr>
+<tr>
+<td>
+`children`
+</td>
+<td>Nested resources. See below</td>
+</tr>
 </table>
+The `timeline` views support displaying nested resources. Nested resources can be collapsed or expanded using an additional button that appears before the parent resource name. To pass nested resources, use the `children` field:
+```js
+resources: [
+  {
+    id: 1,
+    title: 'Resource A',
+    children: [
+      {
+        id: 11,
+        title: 'Resource A1'
+      },
+      {
+        id: 12,
+        title: 'Resource A2'
+      }
+    ]
+  }
+]
+```
 ## View object
 A View object contains information about a calendar view, such as title and date range.

package/index.css CHANGED Viewed

@@ -359,6 +359,17 @@
   z-index: 1;
 }
+.ec-expander {
+  margin-right: 0.25em;
+  width: 1.25em;
+}
+.ec-expander .ec-button {
+  line-height: normal;
+  padding: 0;
+  aspect-ratio: 1;
+  height: 1.25em;
+}
 .ec-button-group {
   display: inline-flex;
 }
@@ -582,6 +593,7 @@
   white-space: nowrap;
   margin: 0 0 1px 0;
   flex-shrink: 0;
+  max-height: 100%;
 }
 .ec-day-grid .ec-event-time, .ec-timeline .ec-event-time {
   margin: 0 3px 0 0;

package/index.js CHANGED Viewed

@@ -294,6 +294,19 @@ function task(fn, handle, tasks) {
     }
 }
+let payloadProp = symbol();
+function setPayload(obj, payload) {
+    obj[payloadProp] = payload;
+}
+function hasPayload(obj) {
+    return !!obj?.[payloadProp];
+}
+function getPayload(obj) {
+    return obj[payloadProp];
+}
 function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
     el.className = className;
@@ -329,19 +342,6 @@ function height(el) {
     return rect(el).height;
 }
-let payloadProp = symbol();
-function setPayload(el, payload) {
-    el[payloadProp] = payload;
-}
-function hasPayload(el) {
-    return !!el?.[payloadProp];
-}
-function getPayload(el) {
-    return el[payloadProp];
-}
 function getElementWithPayload(x, y, root = document) {
     for (let el of root.elementsFromPoint(x, y)) {
         if (hasPayload(el)) {
@@ -703,13 +703,39 @@ function themeView(view) {
 }
 function createResources(input) {
-    return input.map(resource => ({
-        id: String(resource.id),
-        title: resource.title || '',
-        eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor,
-        extendedProps: resource.extendedProps ?? {}
-    }));
+    let result = [];
+    _createResources(input, 0, result);
+    return result;
+}
+function _createResources(input, level, flat) {
+    let result = [];
+    for (let item of input) {
+        let resource = createResource(item);
+        result.push(resource);
+        flat.push(resource);
+        let payload = {
+            level,
+            children: [],
+            expanded: true,
+            hidden: false
+        };
+        setPayload(resource, payload);
+        if (item.children) {
+            payload.children = _createResources(item.children, level + 1, flat);
+        }
+    }
+    return result;
+}
+function createResource(input) {
+    return {
+        id: String(input.id),
+        title: input.title || '',
+        eventBackgroundColor: input.eventBackgroundColor,
+        eventTextColor: input.eventTextColor,
+        extendedProps: input.extendedProps ?? {}
+    };
 }
 function resourceBackgroundColor(event, resources) {
@@ -788,7 +814,7 @@ function viewResources(state) {
     return derived(
         [state.resources, state.filterResourcesWithEvents, state._events, state._activeRange],
         ([$resources, $filterResourcesWithEvents, $_events, $_activeRange]) => {
-            let result = $resources;
+            let result = $resources.filter(resource => !getPayload(resource).hidden);
             if ($filterResourcesWithEvents) {
                 result = $resources.filter(resource => {
@@ -2906,4 +2932,4 @@ class index extends Calendar {
     }
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, index as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, identity, intl, intlRange, isArray, isFunction, keyEnter, keys, listView, listen, max, min, nextClosestDay, nextDate, noTimePart, noop, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, run, runAll, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResource, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, index as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, identity, intl, intlRange, isArray, isFunction, keyEnter, keys, listView, listen, max, min, nextClosestDay, nextDate, noTimePart, noop, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, run, runAll, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "3.6.2",
+  "version": "3.7.1",
   "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,8 @@
         flushDebounce,
         hasYScroll,
         listView,
-        task, prevDate, nextDate
+        task,
+        prevDate, nextDate
     } from './lib.js';
     export let plugins = [];

package/src/lib/dom.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {symbol} from './utils.js';
+import {hasPayload} from './payload.js';
 export function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
@@ -35,19 +35,6 @@ export function height(el) {
     return rect(el).height;
 }
-let payloadProp = symbol();
-export function setPayload(el, payload) {
-    el[payloadProp] = payload;
-}
-export function hasPayload(el) {
-    return !!el?.[payloadProp];
-}
-export function getPayload(el) {
-    return el[payloadProp];
-}
 export function getElementWithPayload(x, y, root = document) {
     for (let el of root.elementsFromPoint(x, y)) {
         if (hasPayload(el)) {

package/src/lib/payload.js ADDED Viewed

@@ -0,0 +1,14 @@
+import {symbol} from './utils.js';
+let payloadProp = symbol();
+export function setPayload(obj, payload) {
+    obj[payloadProp] = payload;
+}
+export function hasPayload(obj) {
+    return !!obj?.[payloadProp];
+}
+export function getPayload(obj) {
+    return obj[payloadProp];
+}

package/src/lib/resources.js CHANGED Viewed

@@ -1,11 +1,39 @@
+import {setPayload} from './payload.js';
 export function createResources(input) {
-    return input.map(resource => ({
-        id: String(resource.id),
-        title: resource.title || '',
-        eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor,
-        extendedProps: resource.extendedProps ?? {}
-    }));
+    let result = [];
+    _createResources(input, 0, result);
+    return result;
+}
+function _createResources(input, level, flat) {
+    let result = [];
+    for (let item of input) {
+        let resource = createResource(item);
+        result.push(resource);
+        flat.push(resource);
+        let payload = {
+            level,
+            children: [],
+            expanded: true,
+            hidden: false
+        };
+        setPayload(resource, payload);
+        if (item.children) {
+            payload.children = _createResources(item.children, level + 1, flat);
+        }
+    }
+    return result;
+}
+export function createResource(input) {
+    return {
+        id: String(input.id),
+        title: input.title || '',
+        eventBackgroundColor: input.eventBackgroundColor,
+        eventTextColor: input.eventTextColor,
+        extendedProps: input.extendedProps ?? {}
+    };
 }
 export function resourceBackgroundColor(event, resources) {

package/src/lib/stores.js CHANGED Viewed

@@ -2,6 +2,7 @@ import {derived} from 'svelte/store';
 import {isFunction} from './utils.js';
 import {toLocalDate} from './date';
 import {createResources} from './resources.js';
+import {getPayload} from './payload.js';
 export function intl(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
@@ -67,7 +68,7 @@ export function viewResources(state) {
     return derived(
         [state.resources, state.filterResourcesWithEvents, state._events, state._activeRange],
         ([$resources, $filterResourcesWithEvents, $_events, $_activeRange]) => {
-            let result = $resources;
+            let result = $resources.filter(resource => !getPayload(resource).hidden);
             if ($filterResourcesWithEvents) {
                 result = $resources.filter(resource => {

package/src/lib.js CHANGED Viewed

@@ -5,6 +5,7 @@ export * from './lib/debounce.js';
 export * from './lib/dom.js';
 export * from './lib/events.js';
 export * from './lib/options.js';
+export * from './lib/payload.js';
 export * from './lib/resources.js';
 export * from './lib/stores.js';
 export * from './lib/times.js';

package/src/styles/index.scss CHANGED Viewed

@@ -96,6 +96,18 @@
   }
 }
+.ec-expander {
+  margin-right: .25em;
+  width: 1.25em;
+  .ec-button {
+    line-height: normal;
+    padding: 0;
+    aspect-ratio: 1;
+    height: 1.25em;
+  }
+}
 .ec-button-group {
   display: inline-flex;
@@ -359,6 +371,7 @@
   white-space: nowrap;
   margin: 0 0 1px 0;
   flex-shrink: 0;
+  max-height: 100%;
   .ec-day-grid &,
   .ec-timeline & {