npm - @event-calendar/core - Versions diffs - 0.16.0 → 0.17.0 - Mend

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

package/README.md CHANGED Viewed

@@ -116,7 +116,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [refetchEvents](#refetchevents)
   </td><td>
-  - [dateFromPoint](#datefrompoint)
+  - [dateFromPoint](#datefrompoint-x-y-)
+  - [destroy](#destroy)
   - [getView](#getview)
   - [unselect](#unselect-1)
   </td></tr>
@@ -191,8 +192,8 @@ import '@event-calendar/core/index.css';
 ### 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@0.16.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.16.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.17.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.17.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -1990,17 +1991,22 @@ Refetches events from all sources.
 ### dateFromPoint( x, y )
 - Return value `Date` or `null`
-Returns the date and time that would be determined if a click was made on the specified coordinates within the application's [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport).
+Returns the date and time as if the [dateClick](#dateclick) event had fired for that point.
-Using this method, you can get the date and time for any point inside the calendar, as if it was clicked. For example, you want to know, when you click on a multi-day event, which day the click happened on. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the date that corresponds to the place in the calendar where the click was.
+Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
 <details>
   <summary>Note</summary>
-> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside of the day container, so the method will return `null` for the coordinates that are inside the events.
+> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside the day container, so the method will return `null` for the coordinates that are inside the events.
 </details>
+### destroy()
+- Return value `undefined`
+Destroys the calendar, removing all DOM elements, event handlers, and internal data.
 ### getView()
 - Return value `View`

package/index.css CHANGED Viewed

@@ -198,6 +198,9 @@
   flex-direction: column;
   height: 100%;
 }
+.ec-month .ec-uniform .ec-content {
+  overflow: hidden;
+}
 .ec-list .ec-content {
   flex-direction: column;
 }
@@ -217,8 +220,8 @@
   flex: 1 0 auto;
 }
 .ec-month .ec-uniform .ec-days {
-  flex: 1 1 0;
-  min-height: calc(5em + 1px);
+  flex: 1 1 0%;
+  min-height: 0;
 }
 .ec-day {
@@ -234,6 +237,9 @@
   min-height: 5em;
   position: relative;
 }
+.ec-month .ec-uniform .ec-day {
+  min-height: 0;
+}
 .ec-month .ec-day:first-child {
   border-left: none;
 }

package/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { is_function, tick, noop, identity, SvelteComponent, init, safe_not_equal, empty, insert, destroy_each, detach, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style } from 'svelte/internal';
-import { getContext, setContext } from 'svelte';
+import { is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, empty, insert, destroy_each, detach, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
+import { getContext, setContext, beforeUpdate } from 'svelte';
 import { derived, writable, readable, get } from 'svelte/store';
-import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates, hasFn, runFn, ignore } from '@event-calendar/common';
+import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, debounce, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, flushDebounce, toEventWithLocalDates, toViewWithLocalDates, hasFn, runFn, ignore } from '@event-calendar/common';
 function createOptions(plugins) {
     let options = {
@@ -179,19 +179,19 @@ function activeRange(state) {
         }
     );
-    let debounce = 0;
-    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
-        if ($datesSet && !debounce) {
-            ++debounce;
-            tick().then(() => {
-                --debounce;
+    let debounceHandle = {};
+    derived([_activeRange, state.datesSet], values => {
+        let [, $datesSet] = values;
+        if ($datesSet) {
+            debounce(() => {
+                let [$_activeRange, $datesSet] = values;
                 $datesSet({
                     start: toLocalDate($_activeRange.start),
                     end: toLocalDate($_activeRange.end),
                     startStr: toISOString($_activeRange.start),
                     endStr: toISOString($_activeRange.end)
                 });
-            });
+            }, debounceHandle, state._queue);
         }
     }).subscribe(noop);
@@ -261,9 +261,10 @@ function events(state) {
     let _events = writable([]);
     let abortController;
     let fetching = 0;
+    let debounceHandle = {};
     derived(
         [state.events, state.eventSources, state._activeRange, state._fetchedRange, state.lazyFetching, state.loading],
-        (values, set) => tick().then(() => {
+        (values, set) => debounce(() => {
             let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
@@ -337,7 +338,7 @@ function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        }),
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);
@@ -372,6 +373,7 @@ class State {
         }
         // Private stores
+        this._queue = writable(new Map());  // debounce queue
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -427,6 +429,7 @@ class State {
                     }
                 }
             });
+            // Process options
             for (let key of Object.keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];
@@ -1299,7 +1302,7 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "click", /*handleClick*/ ctx[16], true);
+				dispose = listen(window, "click", /*handleClick*/ ctx[17], true);
 				mounted = true;
 			}
 		},
@@ -1385,6 +1388,7 @@ function create_fragment(ctx) {
 }
 function instance($$self, $$props, $$invalidate) {
+	let $_queue;
 	let $_ignoreClick;
 	let $events;
 	let $_events;
@@ -1397,17 +1401,19 @@ function instance($$self, $$props, $$invalidate) {
 	let $_viewComponent;
 	let { plugins = [] } = $$props;
 	let { options = {} } = $$props;
+	let component = get_current_component();
 	let state = new State(plugins, options);
 	setContext('state', state);
-	let { _viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
+	let { _viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, _queue, events, eventSources, height, theme } = state;
 	component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
 	component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
-	component_subscribe($$self, _ignoreClick, value => $$invalidate(30, $_ignoreClick = value));
+	component_subscribe($$self, _ignoreClick, value => $$invalidate(33, $_ignoreClick = value));
 	component_subscribe($$self, _interaction, value => $$invalidate(0, $_interaction = value));
 	component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(32, $_events = value));
-	component_subscribe($$self, events, value => $$invalidate(31, $events = value));
-	component_subscribe($$self, eventSources, value => $$invalidate(33, $eventSources = value));
+	component_subscribe($$self, _events, value => $$invalidate(35, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
+	component_subscribe($$self, events, value => $$invalidate(34, $events = value));
+	component_subscribe($$self, eventSources, value => $$invalidate(36, $eventSources = value));
 	component_subscribe($$self, height, value => $$invalidate(4, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
@@ -1437,11 +1443,11 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function getEvents() {
-		return get(state._events).map(toEventWithLocalDates);
+		return $_events.map(toEventWithLocalDates);
 	}
 	function getEventById(id) {
-		for (let event of get(state._events)) {
+		for (let event of $_events) {
 			if (event.id == id) {
 				return toEventWithLocalDates(event);
 			}
@@ -1498,6 +1504,10 @@ function instance($$self, $$props, $$invalidate) {
 		return null;
 	}
+	function destroy() {
+		destroy_component(component, true);
+	}
 	function updateEvents(func) {
 		if ($eventSources.length) {
 			set_store_value(_events, $_events = func($_events), $_events);
@@ -1513,13 +1523,17 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	}
+	beforeUpdate(() => {
+		flushDebounce($_queue);
+	});
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(18, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(18, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(19, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 262144) {
+		if ($$self.$$.dirty[0] & /*options*/ 524288) {
 			// Reactively update options that did change
 			for (let [name, value] of diff(options)) {
 				setOption(name, value);
@@ -1540,6 +1554,7 @@ function instance($$self, $$props, $$invalidate) {
 		_interaction,
 		_iClass,
 		_events,
+		_queue,
 		events,
 		eventSources,
 		height,
@@ -1557,7 +1572,8 @@ function instance($$self, $$props, $$invalidate) {
 		removeEventById,
 		getView,
 		unselect,
-		dateFromPoint
+		dateFromPoint,
+		destroy
 	];
 }
@@ -1572,19 +1588,20 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 17,
-				options: 18,
-				setOption: 19,
-				getOption: 20,
-				refetchEvents: 21,
-				getEvents: 22,
-				getEventById: 23,
-				addEvent: 24,
-				updateEvent: 25,
-				removeEventById: 26,
-				getView: 27,
-				unselect: 28,
-				dateFromPoint: 29
+				plugins: 18,
+				options: 19,
+				setOption: 20,
+				getOption: 21,
+				refetchEvents: 22,
+				getEvents: 23,
+				getEventById: 24,
+				addEvent: 25,
+				updateEvent: 26,
+				removeEventById: 27,
+				getView: 28,
+				unselect: 29,
+				dateFromPoint: 30,
+				destroy: 31
 			},
 			null,
 			[-1, -1]
@@ -1592,47 +1609,51 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[20];
 	}
 	get getOption() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[21];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[22];
 	}
 	get getEvents() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[23];
 	}
 	get getEventById() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[24];
 	}
 	get addEvent() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[25];
 	}
 	get updateEvent() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[26];
 	}
 	get removeEventById() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[27];
 	}
 	get getView() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[28];
 	}
 	get unselect() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[29];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[30];
+	}
+	get destroy() {
+		return this.$$.ctx[31];
 	}
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [
@@ -37,7 +37,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@event-calendar/common": "~0.16.0",
+    "@event-calendar/common": "~0.17.0",
     "svelte": "^3.55.1"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script>
     import '../index.css';
-    import {setContext} from 'svelte';
+    import {setContext, beforeUpdate} from 'svelte';
+    import {destroy_component, get_current_component} from 'svelte/internal';
     import {get} from 'svelte/store';
     import {diff} from './storage/options';
     import State from './storage/state';
@@ -12,16 +13,19 @@
         toLocalDate,
         ignore,
         hasFn,
-        runFn
+        runFn,
+        flushDebounce
     } from '@event-calendar/common';
     export let plugins = [];
     export let options = {};
+    let component = get_current_component();
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events,
+    let {_viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, _queue,
         events, eventSources, height, theme} = state;
     // Reactively update options that did change
@@ -50,11 +54,11 @@
     }
     export function getEvents() {
-        return get(state._events).map(toEventWithLocalDates);
+        return $_events.map(toEventWithLocalDates);
     }
     export function getEventById(id) {
-        for (let event of get(state._events)) {
+        for (let event of $_events) {
             if (event.id == id) {
                 return toEventWithLocalDates(event);
             }
@@ -106,6 +110,10 @@
         return null;
     }
+    export function destroy() {
+        destroy_component(component, true);
+    }
     function updateEvents(func) {
         if ($eventSources.length) {
             $_events = func($_events);
@@ -120,6 +128,10 @@
             $_ignoreClick = false;
         }
     }
+    beforeUpdate(() => {
+        flushDebounce($_queue);
+    });
 </script>
 <div

package/src/index.scss CHANGED Viewed

@@ -225,6 +225,10 @@
     height: 100%;
   }
+  .ec-month .ec-uniform & {
+    overflow: hidden;  // remove scrolling due to hidden events
+  }
   .ec-list & {
     flex-direction: column;
   }
@@ -248,8 +252,8 @@
   }
   .ec-month .ec-uniform & {
-    flex: 1 1 0;
-    min-height: calc(5em + 1px);
+    flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
+    min-height: 0;
   }
 }
@@ -269,6 +273,10 @@
     position: relative;
   }
+  .ec-month .ec-uniform & {
+    min-height: 0;
+  }
   .ec-month &:first-child {
     border-left: none;
   }

package/src/storage/state.js CHANGED Viewed

@@ -28,6 +28,7 @@ export default class {
         }
         // Private stores
+        this._queue = writable(new Map());  // debounce queue
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -83,6 +84,7 @@ export default class {
                     }
                 }
             });
+            // Process options
             for (let key of Object.keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];

package/src/storage/stores.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import {derived, writable, readable} from 'svelte/store';
-import {is_function, noop, tick} from 'svelte/internal';
+import {is_function, noop} from 'svelte/internal';
 import {
     DAY_IN_SECONDS,
     cloneDate,
@@ -11,7 +11,8 @@ import {
     nextClosestDay,
     prevClosestDay,
     setMidnight,
-    toLocalDate
+    toLocalDate,
+    debounce
 } from '@event-calendar/common';
 import {derived2} from '@event-calendar/common';
 import {createEvents} from '@event-calendar/common';
@@ -41,19 +42,19 @@ export function activeRange(state) {
         }
     );
-    let debounce = 0;
-    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
-        if ($datesSet && !debounce) {
-            ++debounce;
-            tick().then(() => {
-                --debounce;
+    let debounceHandle = {};
+    derived([_activeRange, state.datesSet], values => {
+        let [, $datesSet] = values;
+        if ($datesSet) {
+            debounce(() => {
+                let [$_activeRange, $datesSet] = values;
                 $datesSet({
                     start: toLocalDate($_activeRange.start),
                     end: toLocalDate($_activeRange.end),
                     startStr: toISOString($_activeRange.start),
                     endStr: toISOString($_activeRange.end)
                 });
-            });
+            }, debounceHandle, state._queue);
         }
     }).subscribe(noop);
@@ -123,9 +124,10 @@ export function events(state) {
     let _events = writable([]);
     let abortController;
     let fetching = 0;
+    let debounceHandle = {};
     derived(
         [state.events, state.eventSources, state._activeRange, state._fetchedRange, state.lazyFetching, state.loading],
-        (values, set) => tick().then(() => {
+        (values, set) => debounce(() => {
             let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
@@ -199,7 +201,7 @@ export function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        }),
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);