@event-calendar/list - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

index.js

@@ -0,4 +1,4 @@
+import { setContent, toEventWithLocalDates, toViewWithLocalDates, createEventClasses, createEventContent, setMidnight, createDate, addDay, cloneDate, bgEvent, eventIntersects, createEventChunk, sortEventChunks, datesEqual, setPayload, intl } from '@event-calendar/core';
 import { SvelteComponent, init, safe_not_equal, create_slot, element, attr, insert, append, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, detach, component_subscribe, binding_callbacks, space, action_destroyer, listen, is_function, noop, run_all, empty, group_outros, check_outros, text, set_data, update_keyed_each, outro_and_destroy_block, create_component, mount_component, destroy_component, set_store_value, destroy_each } from 'svelte/internal';
-import { getContext, onMount, setContext } from 'svelte';
-import { setContent, toEventWithLocalDates, toViewWithLocalDates, createEventContent, setMidnight, createDate, addDay, cloneDate, bgEvent, eventIntersects, createEventChunk, sortEventChunks, datesEqual, setPayload, intl } from '@event-calendar/core';
+import { getContext, onMount } from 'svelte';
 
@@ -115,3 +115,2 @@ /* packages/list/src/Body.svelte generated by Svelte v3.59.1 */
 	let setContent_action;
-	let div2_class_value;
 	let mounted;
@@ -127,5 +126,5 @@ let dispose;
 			attr(div0, "class", div0_class_value = /*$theme*/ ctx[0].eventTag);
-			attr(div0, "style", /*style*/ ctx[2]);
+			attr(div0, "style", /*style*/ ctx[3]);
 			attr(div1, "class", div1_class_value = /*$theme*/ ctx[0].eventBody);
-			attr(div2, "class", div2_class_value = /*$theme*/ ctx[0].event);
+			attr(div2, "class", /*classes*/ ctx[2]);
 		},
@@ -137,15 +136,15 @@ m(target, anchor) {
 			append(div2, div1);
-			/*div2_binding*/ ctx[33](div2);
+			/*div2_binding*/ ctx[36](div2);
 
 			if (!mounted) {
 				dispose = [
-					action_destroyer(setContent_action = setContent.call(null, div1, /*content*/ ctx[3])),
+					action_destroyer(setContent_action = setContent.call(null, div1, /*content*/ ctx[4])),
 					listen(div2, "click", function () {
-						if (is_function(/*createHandler*/ ctx[21](/*$eventClick*/ ctx[4]))) /*createHandler*/ ctx[21](/*$eventClick*/ ctx[4]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[23](/*$eventClick*/ ctx[5]))) /*createHandler*/ ctx[23](/*$eventClick*/ ctx[5]).apply(this, arguments);
 					}),
 					listen(div2, "mouseenter", function () {
-						if (is_function(/*createHandler*/ ctx[21](/*$eventMouseEnter*/ ctx[5]))) /*createHandler*/ ctx[21](/*$eventMouseEnter*/ ctx[5]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[23](/*$eventMouseEnter*/ ctx[6]))) /*createHandler*/ ctx[23](/*$eventMouseEnter*/ ctx[6]).apply(this, arguments);
 					}),
 					listen(div2, "mouseleave", function () {
-						if (is_function(/*createHandler*/ ctx[21](/*$eventMouseLeave*/ ctx[6]))) /*createHandler*/ ctx[21](/*$eventMouseLeave*/ ctx[6]).apply(this, arguments);
+						if (is_function(/*createHandler*/ ctx[23](/*$eventMouseLeave*/ ctx[7]))) /*createHandler*/ ctx[23](/*$eventMouseLeave*/ ctx[7]).apply(this, arguments);
 					})
@@ -164,4 +163,4 @@ ];
 
-			if (dirty[0] & /*style*/ 4) {
-				attr(div0, "style", /*style*/ ctx[2]);
+			if (dirty[0] & /*style*/ 8) {
+				attr(div0, "style", /*style*/ ctx[3]);
 			}
@@ -173,6 +172,6 @@
 
-			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*content*/ 8) setContent_action.update.call(null, /*content*/ ctx[3]);
+			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*content*/ 16) setContent_action.update.call(null, /*content*/ ctx[4]);
 
-			if (dirty[0] & /*$theme*/ 1 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[0].event)) {
-				attr(div2, "class", div2_class_value);
+			if (dirty[0] & /*classes*/ 4) {
+				attr(div2, "class", /*classes*/ ctx[2]);
 			}
@@ -184,3 +183,3 @@ },
 			if (detaching) detach(div2);
-			/*div2_binding*/ ctx[33](null);
+			/*div2_binding*/ ctx[36](null);
 			mounted = false;
@@ -199,2 +198,3 @@ run_all(dispose);
 	let $displayEventEnd;
+	let $eventClassNames;
 	let $eventTextColor;
@@ -209,19 +209,21 @@ let $_resTxtColor;
 	let { chunk } = $$props;
-	let { displayEventEnd, eventBackgroundColor, eventTextColor, eventColor, eventContent, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, theme, _view, _intlEventTime, _resBgColor, _resTxtColor } = getContext('state');
-	component_subscribe($$self, displayEventEnd, value => $$invalidate(27, $displayEventEnd = value));
-	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(31, $eventBackgroundColor = value));
-	component_subscribe($$self, eventTextColor, value => $$invalidate(28, $eventTextColor = value));
-	component_subscribe($$self, eventColor, value => $$invalidate(30, $eventColor = value));
-	component_subscribe($$self, eventContent, value => $$invalidate(26, $eventContent = value));
-	component_subscribe($$self, eventClick, value => $$invalidate(4, $eventClick = value));
-	component_subscribe($$self, eventDidMount, value => $$invalidate(35, $eventDidMount = value));
-	component_subscribe($$self, eventMouseEnter, value => $$invalidate(5, $eventMouseEnter = value));
-	component_subscribe($$self, eventMouseLeave, value => $$invalidate(6, $eventMouseLeave = value));
+	let { displayEventEnd, eventBackgroundColor, eventTextColor, eventColor, eventContent, eventClassNames, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, theme, _view, _intlEventTime, _resBgColor, _resTxtColor } = getContext('state');
+	component_subscribe($$self, displayEventEnd, value => $$invalidate(29, $displayEventEnd = value));
+	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(34, $eventBackgroundColor = value));
+	component_subscribe($$self, eventTextColor, value => $$invalidate(31, $eventTextColor = value));
+	component_subscribe($$self, eventColor, value => $$invalidate(33, $eventColor = value));
+	component_subscribe($$self, eventContent, value => $$invalidate(28, $eventContent = value));
+	component_subscribe($$self, eventClassNames, value => $$invalidate(30, $eventClassNames = value));
+	component_subscribe($$self, eventClick, value => $$invalidate(5, $eventClick = value));
+	component_subscribe($$self, eventDidMount, value => $$invalidate(38, $eventDidMount = value));
+	component_subscribe($$self, eventMouseEnter, value => $$invalidate(6, $eventMouseEnter = value));
+	component_subscribe($$self, eventMouseLeave, value => $$invalidate(7, $eventMouseLeave = value));
 	component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
-	component_subscribe($$self, _view, value => $$invalidate(24, $_view = value));
-	component_subscribe($$self, _intlEventTime, value => $$invalidate(25, $_intlEventTime = value));
-	component_subscribe($$self, _resBgColor, value => $$invalidate(32, $_resBgColor = value));
-	component_subscribe($$self, _resTxtColor, value => $$invalidate(29, $_resTxtColor = value));
+	component_subscribe($$self, _view, value => $$invalidate(26, $_view = value));
+	component_subscribe($$self, _intlEventTime, value => $$invalidate(27, $_intlEventTime = value));
+	component_subscribe($$self, _resBgColor, value => $$invalidate(35, $_resBgColor = value));
+	component_subscribe($$self, _resTxtColor, value => $$invalidate(32, $_resTxtColor = value));
 	let el;
 	let event;
+	let classes;
 	let style;
@@ -263,14 +265,14 @@ let content;
 	$$self.$$set = $$props => {
-		if ('chunk' in $$props) $$invalidate(22, chunk = $$props.chunk);
+		if ('chunk' in $$props) $$invalidate(24, chunk = $$props.chunk);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*chunk*/ 4194304) {
-			$$invalidate(23, event = chunk.event);
+		if ($$self.$$.dirty[0] & /*chunk*/ 16777216) {
+			$$invalidate(25, event = chunk.event);
 		}
 
-		if ($$self.$$.dirty[0] & /*event, $eventColor, $_resTxtColor, $eventTextColor, style*/ 1887436804 | $$self.$$.dirty[1] & /*$_resBgColor, $eventBackgroundColor*/ 3) {
+		if ($$self.$$.dirty[0] & /*event, style, $theme, $eventClassNames, $_view*/ 1174405129 | $$self.$$.dirty[1] & /*$_resBgColor, $eventBackgroundColor, $eventColor, $_resTxtColor, $eventTextColor*/ 31) {
 			{
 				// Class & Style
-				$$invalidate(2, style = '');
+				$$invalidate(3, style = '');
 
@@ -280,3 +282,3 @@ let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
 				if (bgColor) {
-					$$invalidate(2, style = `background-color:${bgColor};`);
+					$$invalidate(3, style = `background-color:${bgColor};`);
 				}
@@ -287,11 +289,13 @@
 				if (txtColor) {
-					$$invalidate(2, style += `color:${txtColor};`);
+					$$invalidate(3, style += `color:${txtColor};`);
 				}
+
+				$$invalidate(2, classes = [$theme.event, ...createEventClasses($eventClassNames, event, $_view)].join(' '));
 			}
 		}
 
-		if ($$self.$$.dirty[0] & /*chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view*/ 255852545) {
+		if ($$self.$$.dirty[0] & /*chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view*/ 1023410177) {
 			{
 				// Content
-				$$invalidate(3, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
+				$$invalidate(4, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
 			}
@@ -304,2 +308,3 @@ }
 		el,
+		classes,
 		style,
@@ -315,2 +320,3 @@ content,
 		eventContent,
+		eventClassNames,
 		eventClick,
@@ -332,2 +338,3 @@ eventDidMount,
 		$displayEventEnd,
+		$eventClassNames,
 		$eventTextColor,
@@ -345,3 +352,3 @@ $_resTxtColor,
 		super();
-		init(this, options, instance$2, create_fragment$2, safe_not_equal, { chunk: 22 }, null, [-1, -1]);
+		init(this, options, instance$2, create_fragment$2, safe_not_equal, { chunk: 24 }, null, [-1, -1]);
 	}
@@ -358,3 +365,3 @@ }
 
-// (50:0) {#if chunks.length}
+// (49:0) {#if chunks.length}
 function create_if_block$1(ctx) {
@@ -486,3 +493,3 @@ let div;
 
-// (59:4) {#each chunks as chunk (chunk.event)}
+// (58:4) {#each chunks as chunk (chunk.event)}
 function create_each_block$1(key_1, ctx) {
@@ -592,10 +599,9 @@ let first;
 	let { date } = $$props;
-	let { _events, _interaction, highlightedDates, theme } = getContext('state');
+	let { _events, _interaction, _intlListDayFormat, _intlListDaySideFormat, highlightedDates, theme } = getContext('state');
 	component_subscribe($$self, _events, value => $$invalidate(16, $_events = value));
 	component_subscribe($$self, _interaction, value => $$invalidate(6, $_interaction = value));
+	component_subscribe($$self, _intlListDayFormat, value => $$invalidate(7, $_intlListDayFormat = value));
+	component_subscribe($$self, _intlListDaySideFormat, value => $$invalidate(8, $_intlListDaySideFormat = value));
 	component_subscribe($$self, highlightedDates, value => $$invalidate(15, $highlightedDates = value));
 	component_subscribe($$self, theme, value => $$invalidate(5, $theme = value));
-	let { _intlListDayFormat, _intlListDaySideFormat } = getContext('view-state');
-	component_subscribe($$self, _intlListDayFormat, value => $$invalidate(7, $_intlListDayFormat = value));
-	component_subscribe($$self, _intlListDaySideFormat, value => $$invalidate(8, $_intlListDaySideFormat = value));
 	let el;
@@ -666,6 +672,6 @@ let chunks;
 		_interaction,
+		_intlListDayFormat,
+		_intlListDaySideFormat,
 		highlightedDates,
 		theme,
-		_intlListDayFormat,
-		_intlListDaySideFormat,
 		$highlightedDates,
@@ -684,9 +690,2 @@ $_events,
 
-class State {
-    constructor(state) {
-        this._intlListDayFormat = intl(state.locale, state.listDayFormat);
-        this._intlListDaySideFormat = intl(state.locale, state.listDaySideFormat);
-    }
-}
-
 /* packages/list/src/View.svelte generated by Svelte v3.59.1 */
@@ -696,7 +695,7 @@
 	const child_ctx = ctx.slice();
-	child_ctx[18] = list[i];
+	child_ctx[17] = list[i];
 	return child_ctx;
 }
 
-// (49:0) {:else}
+// (45:0) {:else}
 function create_else_block(ctx) {
@@ -787,3 +786,3 @@ let each_1_anchor;
 
-// (47:0) {#if noEvents}
+// (43:0) {#if noEvents}
 function create_if_block(ctx) {
@@ -830,7 +829,7 @@ let div;
 
-// (50:4) {#each $_viewDates as date}
+// (46:4) {#each $_viewDates as date}
 function create_each_block(ctx) {
 	let day;
 	let current;
-	day = new Day({ props: { date: /*date*/ ctx[18] } });
+	day = new Day({ props: { date: /*date*/ ctx[17] } });
 
@@ -847,3 +846,3 @@ return {
 			const day_changes = {};
-			if (dirty & /*$_viewDates*/ 2) day_changes.date = /*date*/ ctx[18];
+			if (dirty & /*$_viewDates*/ 2) day_changes.date = /*date*/ ctx[17];
 			day.$set(day_changes);
@@ -866,3 +865,3 @@ },
 
-// (46:0) <Body>
+// (42:0) <Body>
 function create_default_slot(ctx) {
@@ -959,3 +958,3 @@ let current_block_type_index;
 
-			if (dirty & /*$$scope, $theme, content, noEvents, $_viewDates*/ 2097167) {
+			if (dirty & /*$$scope, $theme, content, noEvents, $_viewDates*/ 1048591) {
 				body_changes.$$scope = { dirty, ctx };
@@ -997,4 +996,2 @@ }
 	component_subscribe($$self, theme, value => $$invalidate(3, $theme = value));
-	let state = new State(getContext('state'));
-	setContext('view-state', state);
 	set_store_value(_viewClass, $_viewClass = 'list', $_viewClass);
@@ -1101,2 +1098,7 @@ let noEvents, content;
 		};
+	},
+
+	createStores(state) {
+		state._intlListDayFormat = intl(state.locale, state.listDayFormat);
+		state._intlListDaySideFormat = intl(state.locale, state.listDaySideFormat);
 	}
@@ -1103,0 +1105,0 @@ };

package.json

 {
   "name": "@event-calendar/list",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "title": "Event Calendar List plugin",
@@ -29,5 +29,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/core": "~1.4.1",
+    "@event-calendar/core": "~1.5.0",
     "svelte": "^3.59.1"
   }
 }

README.md

@@ -38,2 +38,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core)
   - [eventBackgroundColor](#eventbackgroundcolor)
+  - [eventClassNames](#eventclassnames)
   - [eventClick](#eventclick)
@@ -197,4 +198,4 @@ - [eventColor](#eventcolor)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.4.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.4.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.0/event-calendar.min.js"></script>
 ```
@@ -547,2 +548,39 @@
 
+### eventClassNames
+- Type `string`, `array` or `function`
+- Default `undefined`
+
+Sets additional CSS classes for events.
+
+This value can be either a string containing class names `'class-1 class-2 ...'`, an array of strings `['class-1', 'class-2', ...]` or a function that returns any of the above formats:
+
+```js
+function (info) {
+    // return string or array
+}
+```
+`info` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`event`
+</td>
+<td>
+
+The associated [Event](#event-object) object
+</td>
+</tr>
+<tr>
+<td>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+</table>
+
 ### eventClick
@@ -602,3 +640,3 @@ - Type `function`
 ### eventContent
-- Type `string`, `object`or `function`
+- Type `string`, `object` or `function`
 - Default `undefined`
@@ -605,0 +643,0 @@

src/index.js

@@ -0,1 +1,2 @@
+import {intl} from '@event-calendar/core';
 import View from './View.svelte';
@@ -35,3 +36,8 @@
 		};
+	},
+
+	createStores(state) {
+		state._intlListDayFormat = intl(state.locale, state.listDayFormat);
+		state._intlListDaySideFormat = intl(state.locale, state.listDaySideFormat);
 	}
-}
+}

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

96190

increased by0.82%

Lines of code

996

increased by0.1%

Number of lines in readme file

2670

increased by1.44%

Worsened metrics

Number of package files

8

decreased by-11.11%

Dependency changes

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@event-calendar/core@1.5.1(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/estree@1.0.6(transitive)

• + Addedacorn@8.14.0(transitive)

• + Addedaria-query@5.3.2(transitive)

• + Addedaxobject-query@4.1.0(transitive)

• + Addedcode-red@1.0.4(transitive)

• + Addedcss-tree@2.3.1(transitive)

• + Addedestree-walker@3.0.3(transitive)

• + Addedis-reference@3.0.3(transitive)

• + Addedlocate-character@3.0.0(transitive)

• + Addedmagic-string@0.30.15(transitive)

• + Addedmdn-data@2.0.30(transitive)

• + Addedperiscopic@3.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedsvelte@4.2.19(transitive)

• - Removed@event-calendar/core@1.4.1(transitive)

• Updated@event-calendar/core@~1.5.0