@event-calendar/time-grid - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

index.js

@@ -1,2 +0,2 @@
-import { SvelteComponent, init, safe_not_equal, element, text, attr, insert, append, set_data, detach, create_slot, space, update_slot, transition_in, transition_out, destroy_each, component_subscribe, listen, run_all, set_store_value, binding_callbacks, action_destroyer, is_function, noop, create_component, mount_component, destroy_component, group_outros, check_outros, empty } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, element, text, attr, insert, append, set_data, detach, create_slot, space, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_each, component_subscribe, listen, run_all, set_store_value, binding_callbacks, action_destroyer, is_function, noop, create_component, mount_component, destroy_component, group_outros, check_outros, empty } from 'svelte/internal';
 import { getContext, tick, onMount, setContext } from 'svelte';
@@ -77,3 +77,3 @@ import { derived } from 'svelte/store';
 
-/* packages/time-grid/src/Header.svelte generated by Svelte v3.38.3 */
+/* packages/time-grid/src/Header.svelte generated by Svelte v3.42.1 */
 
@@ -167,4 +167,4 @@ function get_each_context$3(ctx, list, i) {
 			attr(div5, "class", div5_class_value = "" + (/*$theme*/ ctx[0].header + (/*$_scrollable*/ ctx[1]
-			? " " + /*$theme*/ ctx[0].withScroll
-			: "")));
+			? ' ' + /*$theme*/ ctx[0].withScroll
+			: '')));
 		},
@@ -231,3 +231,12 @@ m(target, anchor) {
 				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
-					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[6], !current ? -1 : dirty, null, null);
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[6],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
+						null
+					);
 				}
@@ -245,4 +254,4 @@ }
 			if (!current || dirty & /*$theme, $_scrollable*/ 3 && div5_class_value !== (div5_class_value = "" + (/*$theme*/ ctx[0].header + (/*$_scrollable*/ ctx[1]
-			? " " + /*$theme*/ ctx[0].withScroll
-			: "")))) {
+			? ' ' + /*$theme*/ ctx[0].withScroll
+			: '')))) {
 				attr(div5, "class", div5_class_value);
@@ -273,10 +282,10 @@ }
 	let { $$slots: slots = {}, $$scope } = $$props;
-	let { _scrollable, theme } = getContext("state");
+	let { _scrollable, theme } = getContext('state');
 	component_subscribe($$self, _scrollable, value => $$invalidate(1, $_scrollable = value));
 	component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
-	let { _times } = getContext("view-state");
+	let { _times } = getContext('view-state');
 	component_subscribe($$self, _times, value => $$invalidate(2, $_times = value));
 
 	$$self.$$set = $$props => {
-		if ("$$scope" in $$props) $$invalidate(6, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(6, $$scope = $$props.$$scope);
 	};
@@ -294,7 +303,7 @@
 
-/* packages/time-grid/src/Body.svelte generated by Svelte v3.38.3 */
+/* packages/time-grid/src/Body.svelte generated by Svelte v3.42.1 */
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[26] = list[i];
+	child_ctx[28] = list[i];
 	return child_ctx;
@@ -305,3 +314,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[29] = list[i];
+	child_ctx[31] = list[i];
 	return child_ctx;
@@ -313,3 +322,3 @@ }
 	let div;
-	let t_value = /*time*/ ctx[29] + "";
+	let t_value = /*time*/ ctx[31] + "";
 	let t;
@@ -329,3 +338,3 @@ let div_class_value;
 		p(ctx, dirty) {
-			if (dirty[0] & /*$_times*/ 2 && t_value !== (t_value = /*time*/ ctx[29] + "")) set_data(t, t_value);
+			if (dirty[0] & /*$_times*/ 2 && t_value !== (t_value = /*time*/ ctx[31] + "")) set_data(t, t_value);
 
@@ -396,4 +405,4 @@ if (dirty[0] & /*$theme*/ 16 && div_class_value !== (div_class_value = /*$theme*/ ctx[4].time)) {
 
-	const default_slot_template = /*#slots*/ ctx[21].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], null);
+	const default_slot_template = /*#slots*/ ctx[23].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[22], null);
 
@@ -426,4 +435,4 @@ return {
 			attr(div4, "class", div4_class_value = "" + (/*$theme*/ ctx[4].body + " " + /*$theme*/ ctx[4].week + (/*compact*/ ctx[2]
-			? " " + /*$theme*/ ctx[4].compact
-			: "")));
+			? ' ' + /*$theme*/ ctx[4].compact
+			: '')));
 		},
@@ -453,3 +462,3 @@ m(target, anchor) {
 
-			/*div4_binding*/ ctx[22](div4);
+			/*div4_binding*/ ctx[24](div4);
 			current = true;
@@ -459,4 +468,4 @@
 				dispose = [
-					listen(window, "resize", /*recheckScrollable*/ ctx[13]),
-					listen(div4, "scroll", /*handleScroll*/ ctx[14])
+					listen(window, "resize", /*recheckScrollable*/ ctx[14]),
+					listen(div4, "scroll", /*handleScroll*/ ctx[15])
 				];
@@ -523,4 +532,13 @@
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 1048576)) {
-					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[20], !current ? [-1, -1] : dirty, null, null);
+				if (default_slot.p && (!current || dirty[0] & /*$$scope*/ 4194304)) {
+					update_slot_base(
+						default_slot,
+						default_slot_template,
+						ctx,
+						/*$$scope*/ ctx[22],
+						!current
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[22])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[22], dirty, null),
+						null
+					);
 				}
@@ -538,4 +556,4 @@ }
 			if (!current || dirty[0] & /*$theme, compact*/ 20 && div4_class_value !== (div4_class_value = "" + (/*$theme*/ ctx[4].body + " " + /*$theme*/ ctx[4].week + (/*compact*/ ctx[2]
-			? " " + /*$theme*/ ctx[4].compact
-			: "")))) {
+			? ' ' + /*$theme*/ ctx[4].compact
+			: '')))) {
 				attr(div4, "class", div4_class_value);
@@ -558,3 +576,3 @@ }
 			if (default_slot) default_slot.d(detaching);
-			/*div4_binding*/ ctx[22](null);
+			/*div4_binding*/ ctx[24](null);
 			mounted = false;
@@ -567,20 +585,22 @@ run_all(dispose);
 function instance$3($$self, $$props, $$invalidate) {
+	let $_interaction;
+	let $_scrollable;
 	let $slotDuration;
 	let $_times;
+	let $slotHeight;
+	let $scrollTime;
+	let $_viewDates;
 	let $_slotTimeLimits;
-	let $_viewDates;
-	let $scrollTime;
-	let $_scrollable;
-	let $_interaction;
 	let $theme;
 	let { $$slots: slots = {}, $$scope } = $$props;
-	let { slotDuration, _intlSlotLabel, _viewDates, scrollTime, _scrollable, theme, _interaction } = getContext("state");
-	component_subscribe($$self, slotDuration, value => $$invalidate(16, $slotDuration = value));
-	component_subscribe($$self, _viewDates, value => $$invalidate(18, $_viewDates = value));
+	let { slotDuration, slotHeight, _intlSlotLabel, _viewDates, scrollTime, _scrollable, theme, _interaction } = getContext('state');
+	component_subscribe($$self, slotDuration, value => $$invalidate(17, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(18, $slotHeight = value));
+	component_subscribe($$self, _viewDates, value => $$invalidate(20, $_viewDates = value));
 	component_subscribe($$self, scrollTime, value => $$invalidate(19, $scrollTime = value));
-	component_subscribe($$self, _scrollable, value => $$invalidate(23, $_scrollable = value));
+	component_subscribe($$self, _scrollable, value => $$invalidate(26, $_scrollable = value));
 	component_subscribe($$self, theme, value => $$invalidate(4, $theme = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(24, $_interaction = value));
-	let { _slotTimeLimits, _times } = getContext("view-state");
-	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(17, $_slotTimeLimits = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(25, $_interaction = value));
+	let { _slotTimeLimits, _times } = getContext('view-state');
+	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(21, $_slotTimeLimits = value));
 	component_subscribe($$self, _times, value => $$invalidate(1, $_times = value));
@@ -603,5 +623,5 @@ let el;
 	function div4_binding($$value) {
-		binding_callbacks[$$value ? "unshift" : "push"](() => {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			(((((($$invalidate(0, el), $$invalidate(18, $_viewDates)), $$invalidate(19, $scrollTime)), $$invalidate(15, timeLimitMin)), $$invalidate(16, $slotDuration)), $$invalidate(1, $_times)), $$invalidate(17, $_slotTimeLimits));
+			((((((($$invalidate(0, el), $$invalidate(20, $_viewDates)), $$invalidate(19, $scrollTime)), $$invalidate(16, timeLimitMin)), $$invalidate(17, $slotDuration)), $$invalidate(18, $slotHeight)), $$invalidate(1, $_times)), $$invalidate(21, $_slotTimeLimits));
 		});
@@ -611,7 +631,7 @@ }
 	$$self.$$set = $$props => {
-		if ("$$scope" in $$props) $$invalidate(20, $$scope = $$props.$$scope);
+		if ('$$scope' in $$props) $$invalidate(22, $$scope = $$props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*$slotDuration, $_times, $_slotTimeLimits*/ 196610) {
+		if ($$self.$$.dirty[0] & /*$slotDuration, $_times, $_slotTimeLimits*/ 2228226) {
 			{
@@ -622,13 +642,13 @@ $$invalidate(2, compact = $slotDuration.seconds >= 3600);
 				// Use intermediate variable so that changes in _slotTimeLimits do not trigger setting the el.scrollTop
-				$$invalidate(15, timeLimitMin = $_slotTimeLimits.min.seconds);
+				$$invalidate(16, timeLimitMin = $_slotTimeLimits.min.seconds);
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*el, $_viewDates, $scrollTime, timeLimitMin, $slotDuration*/ 884737) {
+		if ($$self.$$.dirty[0] & /*el, $_viewDates, $scrollTime, timeLimitMin, $slotDuration, $slotHeight*/ 2031617) {
 			if (el && $_viewDates) {
-				$$invalidate(0, el.scrollTop = ($scrollTime.seconds - timeLimitMin) / $slotDuration.seconds * 24 - 12, el);
+				$$invalidate(0, el.scrollTop = (($scrollTime.seconds - timeLimitMin) / $slotDuration.seconds - 0.5) * $slotHeight, el);
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*el, $_times, $slotDuration*/ 65539) {
+		if ($$self.$$.dirty[0] & /*el, $_times, $slotDuration*/ 131075) {
 			if (el && $_times && $slotDuration) {
@@ -647,2 +667,3 @@ tick().then(recheckScrollable);
 		slotDuration,
+		slotHeight,
 		_viewDates,
@@ -659,5 +680,6 @@ scrollTime,
 		$slotDuration,
+		$slotHeight,
+		$scrollTime,
+		$_viewDates,
 		$_slotTimeLimits,
-		$_viewDates,
-		$scrollTime,
 		$$scope,
@@ -672,3 +694,3 @@ slots,
 		super();
-		init(this, options, instance$3, create_fragment$3, safe_not_equal, {}, [-1, -1]);
+		init(this, options, instance$3, create_fragment$3, safe_not_equal, {}, null, [-1, -1]);
 	}
@@ -717,3 +739,3 @@ }
 
-/* packages/time-grid/src/Event.svelte generated by Svelte v3.38.3 */
+/* packages/time-grid/src/Event.svelte generated by Svelte v3.42.1 */
 
@@ -734,3 +756,3 @@ function create_fragment$2(ctx) {
 			insert(target, div, anchor);
-			/*div_binding*/ ctx[36](div);
+			/*div_binding*/ ctx[38](div);
 
@@ -741,15 +763,15 @@ if (!mounted) {
 					listen(div, "click", function () {
-						if (is_function(/*createHandler*/ ctx[23](/*$eventClick*/ ctx[6], /*display*/ ctx[0]))) /*createHandler*/ ctx[23](/*$eventClick*/ ctx[6], /*display*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[24](/*$eventClick*/ ctx[6], /*display*/ ctx[0]))) /*createHandler*/ ctx[24](/*$eventClick*/ ctx[6], /*display*/ ctx[0]).apply(this, arguments);
 					}),
 					listen(div, "mouseenter", function () {
-						if (is_function(/*createHandler*/ ctx[23](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[0]))) /*createHandler*/ ctx[23](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[24](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[0]))) /*createHandler*/ ctx[24](/*$eventMouseEnter*/ ctx[7], /*display*/ ctx[0]).apply(this, arguments);
 					}),
 					listen(div, "mouseleave", function () {
-						if (is_function(/*createHandler*/ ctx[23](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[0]))) /*createHandler*/ ctx[23](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[24](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[0]))) /*createHandler*/ ctx[24](/*$eventMouseLeave*/ ctx[8], /*display*/ ctx[0]).apply(this, arguments);
 					}),
 					listen(div, "mousedown", function () {
-						if (is_function(/*createDragStartHandler*/ ctx[24](/*$_interaction*/ ctx[1], /*display*/ ctx[0]))) /*createDragStartHandler*/ ctx[24](/*$_interaction*/ ctx[1], /*display*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createDragStartHandler*/ ctx[25](/*$_interaction*/ ctx[1], /*display*/ ctx[0]))) /*createDragStartHandler*/ ctx[25](/*$_interaction*/ ctx[1], /*display*/ ctx[0]).apply(this, arguments);
 					}),
 					listen(div, "touchstart", function () {
-						if (is_function(/*createDragStartHandler*/ ctx[24](/*$_interaction*/ ctx[1], /*display*/ ctx[0]))) /*createDragStartHandler*/ ctx[24](/*$_interaction*/ ctx[1], /*display*/ ctx[0]).apply(this, arguments);
+						if (is_function(/*createDragStartHandler*/ ctx[25](/*$_interaction*/ ctx[1], /*display*/ ctx[0]))) /*createDragStartHandler*/ ctx[25](/*$_interaction*/ ctx[1], /*display*/ ctx[0]).apply(this, arguments);
 					})
@@ -778,3 +800,3 @@ ];
 			if (detaching) detach(div);
-			/*div_binding*/ ctx[36](null);
+			/*div_binding*/ ctx[38](null);
 			mounted = false;
@@ -787,13 +809,14 @@ run_all(dispose);
 function instance$2($$self, $$props, $$invalidate) {
-	let $slotDuration;
-	let $_slotTimeLimits;
-	let $eventBackgroundColor;
-	let $eventColor;
+	let $_view;
+	let $eventDidMount;
+	let $_intlEventTime;
 	let $theme;
+	let $eventContent;
+	let $displayEventEnd;
 	let $_interaction;
-	let $displayEventEnd;
-	let $eventContent;
-	let $_intlEventTime;
-	let $_view;
-	let $eventDidMount;
+	let $eventColor;
+	let $eventBackgroundColor;
+	let $slotHeight;
+	let $_slotTimeLimits;
+	let $slotDuration;
 	let $eventClick;
@@ -804,18 +827,19 @@ let $eventMouseEnter;
 	let { chunk } = $$props;
-	let { displayEventEnd, eventBackgroundColor, eventColor, eventContent, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, slotDuration, theme, _view, _intlEventTime, _interaction } = getContext("state");
+	let { displayEventEnd, eventBackgroundColor, eventColor, eventContent, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, slotDuration, slotHeight, theme, _view, _intlEventTime, _interaction } = getContext('state');
 	component_subscribe($$self, displayEventEnd, value => $$invalidate(32, $displayEventEnd = value));
-	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(29, $eventBackgroundColor = value));
-	component_subscribe($$self, eventColor, value => $$invalidate(30, $eventColor = value));
-	component_subscribe($$self, eventContent, value => $$invalidate(33, $eventContent = value));
+	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(34, $eventBackgroundColor = value));
+	component_subscribe($$self, eventColor, value => $$invalidate(33, $eventColor = value));
+	component_subscribe($$self, eventContent, value => $$invalidate(31, $eventContent = value));
 	component_subscribe($$self, eventClick, value => $$invalidate(6, $eventClick = value));
-	component_subscribe($$self, eventDidMount, value => $$invalidate(38, $eventDidMount = value));
+	component_subscribe($$self, eventDidMount, value => $$invalidate(40, $eventDidMount = value));
 	component_subscribe($$self, eventMouseEnter, value => $$invalidate(7, $eventMouseEnter = value));
 	component_subscribe($$self, eventMouseLeave, value => $$invalidate(8, $eventMouseLeave = value));
-	component_subscribe($$self, slotDuration, value => $$invalidate(27, $slotDuration = value));
-	component_subscribe($$self, theme, value => $$invalidate(31, $theme = value));
-	component_subscribe($$self, _view, value => $$invalidate(35, $_view = value));
-	component_subscribe($$self, _intlEventTime, value => $$invalidate(34, $_intlEventTime = value));
+	component_subscribe($$self, slotDuration, value => $$invalidate(37, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(35, $slotHeight = value));
+	component_subscribe($$self, theme, value => $$invalidate(30, $theme = value));
+	component_subscribe($$self, _view, value => $$invalidate(28, $_view = value));
+	component_subscribe($$self, _intlEventTime, value => $$invalidate(29, $_intlEventTime = value));
 	component_subscribe($$self, _interaction, value => $$invalidate(1, $_interaction = value));
-	let { _slotTimeLimits, _viewResources } = getContext("view-state");
-	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(28, $_slotTimeLimits = value));
+	let { _slotTimeLimits, _viewResources } = getContext('view-state');
+	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(36, $_slotTimeLimits = value));
 	let el;
@@ -840,3 +864,3 @@ let display;
 	function createHandler(fn, display) {
-		return display !== "preview" && is_function(fn)
+		return display !== 'preview' && is_function(fn)
 		? jsEvent => fn({
@@ -852,3 +876,3 @@ event: toEventWithLocalDates(chunk.event),
 	function createDragStartHandler(interaction, display) {
-		return display === "auto" && interaction.drag
+		return display === 'auto' && interaction.drag
 		? jsEvent => interaction.drag.startTimeGrid(chunk.event, el, jsEvent, _viewResources)
@@ -859,3 +883,3 @@ : undefined;
 	function div_binding($$value) {
-		binding_callbacks[$$value ? "unshift" : "push"](() => {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
@@ -867,8 +891,8 @@ $$invalidate(2, el);
 	$$self.$$set = $$props => {
-		if ("date" in $$props) $$invalidate(25, date = $$props.date);
-		if ("chunk" in $$props) $$invalidate(26, chunk = $$props.chunk);
+		if ('date' in $$props) $$invalidate(26, date = $$props.date);
+		if ('chunk' in $$props) $$invalidate(27, chunk = $$props.chunk);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*chunk, $slotDuration, $_slotTimeLimits, date, $eventBackgroundColor, $eventColor, style, display, $_interaction*/ 2113929235 | $$self.$$.dirty[1] & /*$theme*/ 1) {
+		if ($$self.$$.dirty[0] & /*chunk, date, style, display, $theme, $_interaction*/ 1275068435 | $$self.$$.dirty[1] & /*$slotDuration, $_slotTimeLimits, $slotHeight, $eventBackgroundColor, $eventColor*/ 124) {
 			{
@@ -883,5 +907,5 @@ $$invalidate(0, display = chunk.event.display);
 				let end = (chunk.end - date) / 1000 / 60;
-				let top = (start - offset) / step * 24;
-				let height = (end - start) / step * 24;
-				let maxHeight = ($_slotTimeLimits.max.seconds / 60 - start) / step * 24;
+				let top = (start - offset) / step * $slotHeight;
+				let height = (end - start) / step * $slotHeight;
+				let maxHeight = ($_slotTimeLimits.max.seconds / 60 - start) / step * $slotHeight;
 				let bgColor = chunk.event.backgroundColor || $eventBackgroundColor || $eventColor;
@@ -894,3 +918,3 @@ $$invalidate(4, style = `top:${top}px;` + `min-height:${height}px;` + `height:${height}px;` + `max-height:${maxHeight}px;`);
 
-				if (display === "auto" || display === "ghost") {
+				if (display === 'auto' || display === 'ghost') {
 					$$invalidate(4, style += `z-index:${chunk.column + 1};` + `left:${100 / chunk.group.columns.length * chunk.column}%;` + `width:${100 / chunk.group.columns.length * 0.5 * (1 + chunk.group.columns.length - chunk.column)}%;`);
@@ -900,3 +924,3 @@ }
 				// Class
-				let className = display === "background" ? $theme.bgEvent : $theme.event;
+				let className = display === 'background' ? $theme.bgEvent : $theme.event;
 
@@ -909,3 +933,3 @@ $$invalidate(3, classes = $_interaction.drag
 
-		if ($$self.$$.dirty[0] & /*chunk*/ 67108864 | $$self.$$.dirty[1] & /*$displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view*/ 31) {
+		if ($$self.$$.dirty[0] & /*chunk, $theme, $_intlEventTime, $_view*/ 2013265920 | $$self.$$.dirty[1] & /*$displayEventEnd, $eventContent*/ 3) {
 			// Content
@@ -935,2 +959,3 @@ $$invalidate(5, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
 		slotDuration,
+		slotHeight,
 		theme,
@@ -945,11 +970,12 @@ _view,
 		chunk,
-		$slotDuration,
-		$_slotTimeLimits,
-		$eventBackgroundColor,
-		$eventColor,
+		$_view,
+		$_intlEventTime,
 		$theme,
+		$eventContent,
 		$displayEventEnd,
-		$eventContent,
-		$_intlEventTime,
-		$_view,
+		$eventColor,
+		$eventBackgroundColor,
+		$slotHeight,
+		$_slotTimeLimits,
+		$slotDuration,
 		div_binding
@@ -962,11 +988,11 @@ ];
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, { date: 25, chunk: 26 }, [-1, -1]);
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { date: 26, chunk: 27 }, null, [-1, -1]);
 	}
 }
 
-/* packages/time-grid/src/Day.svelte generated by Svelte v3.38.3 */
+/* packages/time-grid/src/Day.svelte generated by Svelte v3.42.1 */
 
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[28] = list[i];
+	child_ctx[30] = list[i];
 	return child_ctx;
@@ -977,3 +1003,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[28] = list[i];
+	child_ctx[30] = list[i];
 	return child_ctx;
@@ -990,3 +1016,3 @@ }
 				date: /*date*/ ctx[0],
-				chunk: /*chunk*/ ctx[28]
+				chunk: /*chunk*/ ctx[30]
 			}
@@ -1006,3 +1032,3 @@ });
 			if (dirty[0] & /*date*/ 1) event_changes.date = /*date*/ ctx[0];
-			if (dirty[0] & /*bgChunks*/ 4) event_changes.chunk = /*chunk*/ ctx[28];
+			if (dirty[0] & /*bgChunks*/ 4) event_changes.chunk = /*chunk*/ ctx[30];
 			event.$set(event_changes);
@@ -1033,3 +1059,3 @@ },
 				date: /*date*/ ctx[0],
-				chunk: /*chunk*/ ctx[28]
+				chunk: /*chunk*/ ctx[30]
 			}
@@ -1049,3 +1075,3 @@ });
 			if (dirty[0] & /*date*/ 1) event_changes.date = /*date*/ ctx[0];
-			if (dirty[0] & /*chunks*/ 2) event_changes.chunk = /*chunk*/ ctx[28];
+			if (dirty[0] & /*chunks*/ 2) event_changes.chunk = /*chunk*/ ctx[30];
 			event.$set(event_changes);
@@ -1166,5 +1192,5 @@ },
 
-			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[6].day + (/*isToday*/ ctx[4] ? " " + /*$theme*/ ctx[6].today : "") + (/*highlight*/ ctx[5]
-			? " " + /*$theme*/ ctx[6].highlight
-			: "")));
+			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[6].day + (/*isToday*/ ctx[4] ? ' ' + /*$theme*/ ctx[6].today : '') + (/*highlight*/ ctx[5]
+			? ' ' + /*$theme*/ ctx[6].highlight
+			: '')));
 		},
@@ -1192,3 +1218,3 @@ m(target, anchor) {
 				dispose = listen(div2, "click", function () {
-					if (is_function(/*createClickHandler*/ ctx[16](/*$dateClick*/ ctx[7]))) /*createClickHandler*/ ctx[16](/*$dateClick*/ ctx[7]).apply(this, arguments);
+					if (is_function(/*createClickHandler*/ ctx[17](/*$dateClick*/ ctx[7]))) /*createClickHandler*/ ctx[17](/*$dateClick*/ ctx[7]).apply(this, arguments);
 				});
@@ -1287,5 +1313,5 @@
 
-			if (!current || dirty[0] & /*$theme, isToday, highlight*/ 112 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[6].day + (/*isToday*/ ctx[4] ? " " + /*$theme*/ ctx[6].today : "") + (/*highlight*/ ctx[5]
-			? " " + /*$theme*/ ctx[6].highlight
-			: "")))) {
+			if (!current || dirty[0] & /*$theme, isToday, highlight*/ 112 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[6].day + (/*isToday*/ ctx[4] ? ' ' + /*$theme*/ ctx[6].today : '') + (/*highlight*/ ctx[5]
+			? ' ' + /*$theme*/ ctx[6].highlight
+			: '')))) {
 				attr(div2, "class", div2_class_value);
@@ -1336,8 +1362,9 @@ }
 function instance$1($$self, $$props, $$invalidate) {
+	let $_view;
+	let $slotDuration;
 	let $_slotTimeLimits;
+	let $slotHeight;
+	let $highlightedDates;
+	let $_dragEvent;
 	let $_events;
-	let $_dragEvent;
-	let $highlightedDates;
-	let $slotDuration;
-	let $_view;
 	let $theme;
@@ -1347,12 +1374,13 @@ let $dateClick;
 	let { resource = undefined } = $$props;
-	let { _events, _dragEvent, dateClick, highlightedDates, slotDuration, _view, theme } = getContext("state");
-	component_subscribe($$self, _events, value => $$invalidate(21, $_events = value));
-	component_subscribe($$self, _dragEvent, value => $$invalidate(22, $_dragEvent = value));
+	let { _events, _dragEvent, dateClick, highlightedDates, slotDuration, slotHeight, _view, theme } = getContext('state');
+	component_subscribe($$self, _events, value => $$invalidate(24, $_events = value));
+	component_subscribe($$self, _dragEvent, value => $$invalidate(23, $_dragEvent = value));
 	component_subscribe($$self, dateClick, value => $$invalidate(7, $dateClick = value));
-	component_subscribe($$self, highlightedDates, value => $$invalidate(23, $highlightedDates = value));
-	component_subscribe($$self, slotDuration, value => $$invalidate(24, $slotDuration = value));
+	component_subscribe($$self, highlightedDates, value => $$invalidate(22, $highlightedDates = value));
+	component_subscribe($$self, slotDuration, value => $$invalidate(26, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(27, $slotHeight = value));
 	component_subscribe($$self, _view, value => $$invalidate(25, $_view = value));
 	component_subscribe($$self, theme, value => $$invalidate(6, $theme = value));
-	let { _slotTimeLimits } = getContext("view-state");
-	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(20, $_slotTimeLimits = value));
+	let { _slotTimeLimits } = getContext('view-state');
+	component_subscribe($$self, _slotTimeLimits, value => $$invalidate(21, $_slotTimeLimits = value));
 	let chunks, bgChunks, dragChunk;
@@ -1367,3 +1395,3 @@ let today = setMidnight(createDate()), isToday, highlight;
 				let y = jsEvent.clientY - r.top;
-				let d = addDuration(cloneDate(date), $slotDuration, Math.floor(y / 24 + $_slotTimeLimits.min.seconds / $slotDuration.seconds));
+				let d = addDuration(cloneDate(date), $slotDuration, Math.floor(y / $slotHeight + $_slotTimeLimits.min.seconds / $slotDuration.seconds));
 
@@ -1385,15 +1413,15 @@ fn({
 	$$self.$$set = $$props => {
-		if ("date" in $$props) $$invalidate(0, date = $$props.date);
-		if ("resource" in $$props) $$invalidate(17, resource = $$props.resource);
+		if ('date' in $$props) $$invalidate(0, date = $$props.date);
+		if ('resource' in $$props) $$invalidate(18, resource = $$props.resource);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*date, $_slotTimeLimits*/ 1048577) {
+		if ($$self.$$.dirty[0] & /*date, $_slotTimeLimits*/ 2097153) {
 			{
-				$$invalidate(18, start = addDuration(cloneDate(date), $_slotTimeLimits.min));
-				$$invalidate(19, end = addDuration(cloneDate(date), $_slotTimeLimits.max));
+				$$invalidate(19, start = addDuration(cloneDate(date), $_slotTimeLimits.min));
+				$$invalidate(20, end = addDuration(cloneDate(date), $_slotTimeLimits.max));
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*$_events, start, end, bgChunks, chunks*/ 2883590) {
+		if ($$self.$$.dirty[0] & /*$_events, start, end, bgChunks, chunks*/ 18350086) {
 			{
@@ -1408,3 +1436,3 @@ $$invalidate(1, chunks = []);
 						switch (event.display) {
-							case "background":
+							case 'background':
 								bgChunks.push(chunk);
@@ -1422,3 +1450,3 @@ break;
 
-		if ($$self.$$.dirty[0] & /*$_dragEvent, start, end*/ 4980736) {
+		if ($$self.$$.dirty[0] & /*$_dragEvent, start, end*/ 9961472) {
 			// Drag & drop
@@ -1432,3 +1460,3 @@ if ($_dragEvent && intersects($_dragEvent)) {
 
-		if ($$self.$$.dirty[0] & /*date, $highlightedDates*/ 8388609) {
+		if ($$self.$$.dirty[0] & /*date, $highlightedDates*/ 4194305) {
 			{
@@ -1455,2 +1483,3 @@ $$invalidate(4, isToday = datesEqual(date, today));
 		slotDuration,
+		slotHeight,
 		_view,
@@ -1464,5 +1493,5 @@ theme,
 		$_slotTimeLimits,
-		$_events,
+		$highlightedDates,
 		$_dragEvent,
-		$highlightedDates
+		$_events
 	];
@@ -1474,7 +1503,7 @@ }
 		super();
-		init(this, options, instance$1, create_fragment$1, safe_not_equal, { date: 0, resource: 17 }, [-1, -1]);
+		init(this, options, instance$1, create_fragment$1, safe_not_equal, { date: 0, resource: 18 }, null, [-1, -1]);
 	}
 }
 
-/* packages/time-grid/src/View.svelte generated by Svelte v3.38.3 */
+/* packages/time-grid/src/View.svelte generated by Svelte v3.42.1 */
 
@@ -1768,3 +1797,3 @@ function get_each_context(ctx, list, i) {
 	let $_intlDayHeader;
-	let state = getContext("state");
+	let state = getContext('state');
 	let { _viewDates, _intlDayHeader, theme } = state;
@@ -1774,3 +1803,3 @@ component_subscribe($$self, _viewDates, value => $$invalidate(0, $_viewDates = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
-	setContext("view-state", new State(state));
+	setContext('view-state', new State(state));
 	return [$_viewDates, $theme, $_intlDayHeader, _viewDates, _intlDayHeader, theme];
@@ -1805,3 +1834,2 @@ }
 
-export default index;
-export { Body, Day, Header, State };
+export { Body, Day, Header, State, index as default };

package.json

 {
   "name": "@event-calendar/time-grid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "title": "Event Calendar TimeGrid plugin",
@@ -20,5 +20,5 @@ "description": "Full-sized event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.2.0",
-    "svelte": "^3.38.3"
+    "@event-calendar/common": "~0.3.0",
+    "svelte": "^3.42.1"
   }
 }

README.md

@@ -7,3 +7,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build)
 
-* Lightweight (34kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (37.8kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
@@ -16,11 +16,12 @@ * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 - [Usage](#usage)
-    - [Svelte component / ES6 module](#svelte-component--es6-module)
-    - [Pre-built browser ready bundle](#pre-built-browser-ready-bundle)
+  - [Svelte component / ES6 module](#svelte-component--es6-module)
+  - [Pre-built browser ready bundle](#pre-built-browser-ready-bundle)
 - [Options](#options)
   <table>
   <tr><td>
-  
+
   - [buttonText](#buttontext)
   - [date](#date)
   - [dateClick](#dateclick)
+  - [datesAboveResources](#datesaboveresources)
   - [dayHeaderFormat](#dayheaderformat)
@@ -47,2 +48,3 @@ - [displayEventEnd](#displayeventend)
   - [eventTimeFormat](#eventtimeformat)
+  - [filterResourcesWithEvents](#filterresourceswithevents)
   - [firstDay](#firstday)
@@ -53,3 +55,2 @@ - [flexibleSlotTimeLimits](#flexibleslottimelimits)
   - [hiddenDays](#hiddendays)
-  - [hideResourcesWithNoEvents](#hideresourceswithnoevents)
   - [highlightedDates](#highlighteddates)
@@ -59,5 +60,5 @@ - [lazyFetching](#lazyfetching)
   - [listDaySideFormat](#listdaysideformat)
+  - [loading](#loading)
   </td><td>
 
-  - [loading](#loading)
   - [locale](#locale)
@@ -70,2 +71,3 @@ - [monthMode](#monthmode)
   - [slotDuration](#slotduration)
+  - [slotHeight](#slotheight)
   - [slotLabelFormat](#slotlabelformat)
@@ -81,7 +83,7 @@ - [slotMaxTime](#slotmaxtime)
 - [Event object](#event-object)
-    - [Parsing event from a plain object](#parsing-event-from-a-plain-object)
+  - [Parsing event from a plain object](#parsing-event-from-a-plain-object)
 - [Duration object](#duration-object)
-    - [Parsing duration from input values](#parsing-duration-from-input-values)
+  - [Parsing duration from input values](#parsing-duration-from-input-values)
 - [Resource object](#resource-object)
-    - [Parsing resource from a plain object](#parsing-resource-from-a-plain-object)
+  - [Parsing resource from a plain object](#parsing-resource-from-a-plain-object)
 - [View object](#view-object)
@@ -224,2 +226,8 @@ - [Browser support](#browser-support)
 
+### datesAboveResources
+- Type `boolean`
+- Default `false`
+
+Determines whether the resource view should render the date headings above the resource headings.
+
 ### dayHeaderFormat
@@ -735,3 +743,3 @@ - Type `object` or `function`
 
-###### 1. Fetch events from a URL
+#### 1. Fetch events from a URL
 <table>
@@ -770,3 +778,3 @@ <tr>
 
-###### 2. Execute custom function
+#### 2. Execute custom function
 <table>
@@ -841,2 +849,8 @@ <tr>
 
+### filterResourcesWithEvents
+- Type `boolean`
+- Default `false`
+
+Determines whether resources with no events for the current range should be hidden in the resource view.
+
 ### firstDay
@@ -913,8 +927,2 @@ - Type `integer`
 
-### hideResourcesWithNoEvents
-- Type `boolean`
-- Default `false`
-
-Determines whether resources with no events for the current range should be hidden in the resource view.
-
 ### highlightedDates
@@ -948,3 +956,3 @@ - Type `Array`
 function (date) {
-    // return formatted date string
+  // return formatted date string
 }
@@ -972,3 +980,3 @@ ```
 function (date) {
-    // return formatted date string
+  // return formatted date string
 }
@@ -1062,3 +1070,3 @@ ```
 function () {
-    // return string or object
+  // return string or object
 }
@@ -1089,2 +1097,14 @@ ```
 
+### slotHeight
+- Type `integer`
+- Default `24`
+
+Defines the time slot height in pixels. When changing the setting, you must additionally override the following CSS styles:
+
+```css
+.ec-time, .ec-line {
+  height: 24px;  /* override this value */
+}
+```
+
 ### slotLabelFormat
@@ -1100,3 +1120,3 @@ - Type `object` or `function`
 function (time) {
-    // return formatted time string
+  // return formatted time string
 }
@@ -1140,3 +1160,3 @@ ```
 function (theme) {
-    // return actual theme object
+  // return actual theme object
 }
@@ -1167,3 +1187,3 @@ ```
 function (date) {
-    // return formatted date string
+  // return formatted date string
 }
@@ -1170,0 +1190,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84877

increased by1.67%

Lines of code

1541

increased by1.85%

Number of lines in readme file

1552

increased by1.31%

Dependency changes

• + Added@event-calendar/common@0.3.3(transitive)

• - Removed@event-calendar/common@0.2.0(transitive)

• Updated@event-calendar/common@~0.3.0

• Updatedsvelte@^3.42.1