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

@event-calendar/core 0.16.1 → 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

@@ -117,6 +117,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   </td><td>
   - [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.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.16.1/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>
@@ -2001,6 +2002,11 @@ Using this method, you can, for example, find out on which day a click occurred
 </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

@@ -199,7 +199,6 @@
   height: 100%;
 }
 .ec-month .ec-uniform .ec-content {
-  /* Remove scroll because of hidden events */
   overflow: hidden;
 }
 .ec-list .ec-content {
@@ -221,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 {
@@ -238,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,11 @@ 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],
-        ([$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading], set) => {
+        (values, set) => debounce(() => {
+            let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
                 return;
@@ -336,7 +338,7 @@ function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        },
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);
@@ -371,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});
@@ -426,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];
@@ -1298,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;
 			}
 		},
@@ -1384,6 +1388,7 @@ function create_fragment(ctx) {
 }
 function instance($$self, $$props, $$invalidate) {
+	let $_queue;
 	let $_ignoreClick;
 	let $events;
 	let $_events;
@@ -1396,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));
@@ -1436,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);
 			}
@@ -1497,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);
@@ -1512,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);
@@ -1539,6 +1554,7 @@ function instance($$self, $$props, $$invalidate) {
 		_interaction,
 		_iClass,
 		_events,
+		_queue,
 		events,
 		eventSources,
 		height,
@@ -1556,7 +1572,8 @@ function instance($$self, $$props, $$invalidate) {
 		removeEventById,
 		getView,
 		unselect,
-		dateFromPoint
+		dateFromPoint,
+		destroy
 	];
 }
@@ -1571,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]
@@ -1591,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.1",
+  "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.1",
+    "@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

@@ -226,8 +226,7 @@
   }
   .ec-month .ec-uniform & {
-    /* Remove scroll because of hidden events */
-    overflow: hidden;
+    overflow: hidden;  // remove scrolling due to hidden events
   }
   .ec-list & {
@@ -253,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;
   }
 }
@@ -274,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,11 @@ 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],
-        ([$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading], set) => {
+        (values, set) => debounce(() => {
+            let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
                 return;
@@ -198,7 +201,7 @@ export function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        },
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);