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

Comparing version 0.2.0 to 0.3.0

index.js

@@ -8,7 +8,7 @@ import { SvelteComponent, init, safe_not_equal, create_component, space, mount_component, insert, transition_in, transition_out, destroy_component, detach, component_subscribe, element, text, attr, append, set_data, destroy_each, empty, group_outros, check_outros } from 'svelte/internal';
     return derived(
-        [state.resources, state.hideResourcesWithNoEvents, state._events, state._activeRange],
-        ([$resources, $hideResourcesWithNoEvents, $_events, $_activeRange]) => {
+        [state.resources, state.filterResourcesWithEvents, state._events, state._activeRange],
+        ([$resources, $filterResourcesWithEvents, $_events, $_activeRange]) => {
             let result = $resources;
 
-            if ($hideResourcesWithNoEvents) {
+            if ($filterResourcesWithEvents) {
                 result = $resources.filter(resource => {
@@ -46,7 +46,7 @@ for (let event of $_events) {
 
-/* packages/resource-time-grid/src/View.svelte generated by Svelte v3.38.3 */
+/* packages/resource-time-grid/src/View.svelte generated by Svelte v3.42.1 */
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
@@ -57,3 +57,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[17] = list[i];
 	return child_ctx;
@@ -64,3 +64,3 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
@@ -71,11 +71,11 @@ }
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[17] = list[i];
 	return child_ctx;
 }
 
-// (19:3) {#if $_viewDates.length > 1}
+// (29:3) {#if loops[1].length > 1}
 function create_if_block(ctx) {
 	let div;
 	let div_class_value;
-	let each_value_3 = /*$_viewDates*/ ctx[2];
+	let each_value_3 = /*loops*/ ctx[0][1];
 	let each_blocks = [];
@@ -95,3 +95,3 @@
 
-			attr(div, "class", div_class_value = /*$theme*/ ctx[1].days);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[3].days);
 		},
@@ -106,4 +106,4 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*$theme, $_intlDayHeader, $_viewDates*/ 14) {
-				each_value_3 = /*$_viewDates*/ ctx[2];
+			if (dirty & /*$theme, titles, loops*/ 11) {
+				each_value_3 = /*loops*/ ctx[0][1];
 				let i;
@@ -130,3 +130,3 @@
 
-			if (dirty & /*$theme*/ 2 && div_class_value !== (div_class_value = /*$theme*/ ctx[1].days)) {
+			if (dirty & /*$theme*/ 8 && div_class_value !== (div_class_value = /*$theme*/ ctx[3].days)) {
 				attr(div, "class", div_class_value);
@@ -142,6 +142,6 @@ }
 
-// (21:5) {#each $_viewDates as date}
+// (31:5) {#each loops[1] as item1}
 function create_each_block_3(ctx) {
 	let div;
-	let t_value = /*$_intlDayHeader*/ ctx[3].format(/*date*/ ctx[13]) + "";
+	let t_value = /*titles*/ ctx[1][1](/*item1*/ ctx[17]) + "";
 	let t;
@@ -154,3 +154,3 @@ let div_class_value;
 			t = text(t_value);
-			attr(div, "class", div_class_value = /*$theme*/ ctx[1].day);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[3].day);
 		},
@@ -162,5 +162,5 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*$_intlDayHeader, $_viewDates*/ 12 && t_value !== (t_value = /*$_intlDayHeader*/ ctx[3].format(/*date*/ ctx[13]) + "")) set_data(t, t_value);
+			if (dirty & /*titles, loops*/ 3 && t_value !== (t_value = /*titles*/ ctx[1][1](/*item1*/ ctx[17]) + "")) set_data(t, t_value);
 
-			if (dirty & /*$theme*/ 2 && div_class_value !== (div_class_value = /*$theme*/ ctx[1].day)) {
+			if (dirty & /*$theme*/ 8 && div_class_value !== (div_class_value = /*$theme*/ ctx[3].day)) {
 				attr(div, "class", div_class_value);
@@ -175,7 +175,7 @@ }
 
-// (16:1) {#each $_viewResources as resource}
+// (26:1) {#each loops[0] as item0}
 function create_each_block_2(ctx) {
 	let div1;
 	let div0;
-	let t0_value = /*resource*/ ctx[10].title + "";
+	let t0_value = /*titles*/ ctx[1][0](/*item0*/ ctx[14]) + "";
 	let t0;
@@ -186,3 +186,3 @@ let div0_class_value;
 	let div1_class_value;
-	let if_block = /*$_viewDates*/ ctx[2].length > 1 && create_if_block(ctx);
+	let if_block = /*loops*/ ctx[0][1].length > 1 && create_if_block(ctx);
 
@@ -197,4 +197,4 @@ return {
 			t2 = space();
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[1].day);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[1].resource);
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[3].day);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[3].resource);
 		},
@@ -210,9 +210,9 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*$_viewResources*/ 1 && t0_value !== (t0_value = /*resource*/ ctx[10].title + "")) set_data(t0, t0_value);
+			if (dirty & /*titles, loops*/ 3 && t0_value !== (t0_value = /*titles*/ ctx[1][0](/*item0*/ ctx[14]) + "")) set_data(t0, t0_value);
 
-			if (dirty & /*$theme*/ 2 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[1].day)) {
+			if (dirty & /*$theme*/ 8 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[3].day)) {
 				attr(div0, "class", div0_class_value);
 			}
 
-			if (/*$_viewDates*/ ctx[2].length > 1) {
+			if (/*loops*/ ctx[0][1].length > 1) {
 				if (if_block) {
@@ -230,3 +230,3 @@ if_block.p(ctx, dirty);
 
-			if (dirty & /*$theme*/ 2 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[1].resource)) {
+			if (dirty & /*$theme*/ 8 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[3].resource)) {
 				attr(div1, "class", div1_class_value);
@@ -242,6 +242,6 @@ }
 
-// (15:0) <Header>
+// (25:0) <Header>
 function create_default_slot_1(ctx) {
 	let each_1_anchor;
-	let each_value_2 = /*$_viewResources*/ ctx[0];
+	let each_value_2 = /*loops*/ ctx[0][0];
 	let each_blocks = [];
@@ -269,4 +269,4 @@
 		p(ctx, dirty) {
-			if (dirty & /*$theme, $_viewDates, $_intlDayHeader, $_viewResources*/ 15) {
-				each_value_2 = /*$_viewResources*/ ctx[0];
+			if (dirty & /*$theme, loops, titles*/ 11) {
+				each_value_2 = /*loops*/ ctx[0][0];
 				let i;
@@ -300,3 +300,3 @@
 
-// (32:3) {#each $_viewDates as date}
+// (42:3) {#each loops[1] as item1}
 function create_each_block_1(ctx) {
@@ -308,4 +308,8 @@ let day;
 			props: {
-				date: /*date*/ ctx[13],
-				resource: /*resource*/ ctx[10]
+				date: /*$datesAboveResources*/ ctx[2]
+				? /*item0*/ ctx[14]
+				: /*item1*/ ctx[17],
+				resource: /*$datesAboveResources*/ ctx[2]
+				? /*item1*/ ctx[17]
+				: /*item0*/ ctx[14]
 			}
@@ -324,4 +328,11 @@ });
 			const day_changes = {};
-			if (dirty & /*$_viewDates*/ 4) day_changes.date = /*date*/ ctx[13];
-			if (dirty & /*$_viewResources*/ 1) day_changes.resource = /*resource*/ ctx[10];
+
+			if (dirty & /*$datesAboveResources, loops*/ 5) day_changes.date = /*$datesAboveResources*/ ctx[2]
+			? /*item0*/ ctx[14]
+			: /*item1*/ ctx[17];
+
+			if (dirty & /*$datesAboveResources, loops*/ 5) day_changes.resource = /*$datesAboveResources*/ ctx[2]
+			? /*item1*/ ctx[17]
+			: /*item0*/ ctx[14];
+
 			day.$set(day_changes);
@@ -344,3 +355,3 @@ },
 
-// (30:1) {#each $_viewResources as resource}
+// (40:1) {#each loops[0] as item0}
 function create_each_block(ctx) {
@@ -351,3 +362,3 @@ let div;
 	let current;
-	let each_value_1 = /*$_viewDates*/ ctx[2];
+	let each_value_1 = /*loops*/ ctx[0][1];
 	let each_blocks = [];
@@ -372,3 +383,3 @@
 			t = space();
-			attr(div, "class", div_class_value = /*$theme*/ ctx[1].resource);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[3].resource);
 		},
@@ -386,4 +397,4 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*$_viewDates, $_viewResources*/ 5) {
-				each_value_1 = /*$_viewDates*/ ctx[2];
+			if (dirty & /*$datesAboveResources, loops*/ 5) {
+				each_value_1 = /*loops*/ ctx[0][1];
 				let i;
@@ -414,3 +425,3 @@
 
-			if (!current || dirty & /*$theme*/ 2 && div_class_value !== (div_class_value = /*$theme*/ ctx[1].resource)) {
+			if (!current || dirty & /*$theme*/ 8 && div_class_value !== (div_class_value = /*$theme*/ ctx[3].resource)) {
 				attr(div, "class", div_class_value);
@@ -444,7 +455,7 @@ }
 
-// (29:0) <Body>
+// (39:0) <Body>
 function create_default_slot(ctx) {
 	let each_1_anchor;
 	let current;
-	let each_value = /*$_viewResources*/ ctx[0];
+	let each_value = /*loops*/ ctx[0][0];
 	let each_blocks = [];
@@ -477,4 +488,4 @@
 		p(ctx, dirty) {
-			if (dirty & /*$theme, $_viewDates, $_viewResources*/ 7) {
-				each_value = /*$_viewResources*/ ctx[0];
+			if (dirty & /*$theme, loops, $datesAboveResources*/ 13) {
+				each_value = /*loops*/ ctx[0][0];
 				let i;
@@ -565,3 +576,3 @@
 
-			if (dirty & /*$$scope, $_viewResources, $theme, $_viewDates, $_intlDayHeader*/ 1048591) {
+			if (dirty & /*$$scope, loops, $theme, titles*/ 16777227) {
 				header_changes.$$scope = { dirty, ctx };
@@ -573,3 +584,3 @@ }
 
-			if (dirty & /*$$scope, $_viewResources, $theme, $_viewDates*/ 1048583) {
+			if (dirty & /*$$scope, loops, $theme, $datesAboveResources*/ 16777229) {
 				body_changes.$$scope = { dirty, ctx };
@@ -600,25 +611,49 @@ }
 function instance($$self, $$props, $$invalidate) {
+	let $_intlDayHeader;
 	let $_viewResources;
+	let $_viewDates;
+	let $datesAboveResources;
 	let $theme;
-	let $_viewDates;
-	let $_intlDayHeader;
-	let state = getContext("state");
-	let { _viewDates, _intlDayHeader, theme } = state;
-	component_subscribe($$self, _viewDates, value => $$invalidate(2, $_viewDates = value));
-	component_subscribe($$self, _intlDayHeader, value => $$invalidate(3, $_intlDayHeader = value));
-	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
+	let state = getContext('state');
+	let { datesAboveResources, _viewDates, _intlDayHeader, theme } = state;
+	component_subscribe($$self, datesAboveResources, value => $$invalidate(2, $datesAboveResources = value));
+	component_subscribe($$self, _viewDates, value => $$invalidate(11, $_viewDates = value));
+	component_subscribe($$self, _intlDayHeader, value => $$invalidate(9, $_intlDayHeader = value));
+	component_subscribe($$self, theme, value => $$invalidate(3, $theme = value));
 	let viewState = new State(state);
-	setContext("view-state", viewState);
+	setContext('view-state', viewState);
 	let { _viewResources } = viewState;
-	component_subscribe($$self, _viewResources, value => $$invalidate(0, $_viewResources = value));
+	component_subscribe($$self, _viewResources, value => $$invalidate(10, $_viewResources = value));
+	let loops, titles;
 
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*$datesAboveResources, loops, $_viewDates, $_viewResources, titles, $_intlDayHeader*/ 3591) {
+			{
+				$$invalidate(0, loops = []);
+				$$invalidate(1, titles = []);
+
+				for (let i of $datesAboveResources ? [1, 0] : [0, 1]) {
+					loops.push(i ? $_viewDates : $_viewResources);
+
+					titles.push(i
+					? date => $_intlDayHeader.format(date)
+					: resource => resource.title);
+				}
+			}
+		}
+	};
+
 	return [
-		$_viewResources,
+		loops,
+		titles,
+		$datesAboveResources,
 		$theme,
-		$_viewDates,
-		$_intlDayHeader,
+		datesAboveResources,
 		_viewDates,
 		_intlDayHeader,
 		theme,
-		_viewResources
+		_viewResources,
+		$_intlDayHeader,
+		$_viewResources,
+		$_viewDates
 	];
@@ -637,3 +672,4 @@ }
 		options.resources = [];
-		options.hideResourcesWithNoEvents = false;
+		options.datesAboveResources = false;
+		options.filterResourcesWithEvents = false;
 		// Common options
@@ -666,2 +702,2 @@ options.buttonText.resourceTimeGridDay = 'day';
 
-export default index;
+export { index as default };

package.json

 {
   "name": "@event-calendar/resource-time-grid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "title": "Event Calendar ResourceTimeGrid plugin",
@@ -20,5 +20,5 @@ "description": "Full-sized event calendar with resource view",
   "dependencies": {
-    "@event-calendar/time-grid": "~0.2.0",
-    "svelte": "^3.38.3"
+    "@event-calendar/time-grid": "~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

52342

increased by2.56%

Lines of code

576

increased by5.49%

Number of lines in readme file

1552

increased by1.31%

Dependency changes

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

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

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

• - Removed@event-calendar/time-grid@0.2.0(transitive)

• Updated@event-calendar/time-grid@~0.3.0

• Updatedsvelte@^3.42.1