@event-calendar/core 1.5.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [
@@ -27,6 +27,6 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "svelte": "^3.59.1"
+    "svelte": "^4.1.1"
   }
 }

package/src/Buttons.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from './lib.js';
+    import {createDate, cloneDate, subtractDay, addDuration, setContent, subtractDuration, setMidnight} from './lib.js';
 
     export let buttons;
 
@@ -26,16 +26,16 @@
 </script>
 
 {#each buttons as button}
-    {#if button == ''}
-    {:else if button == 'title'}
-        <h2 class="{$theme.title}">{$_viewTitle}</h2>
+    {#if button == 'title'}
+        <!-- svelte-ignore a11y-missing-content -->
+        <h2 class="{$theme.title}" use:setContent={$_viewTitle}></h2>
     {:else if button == 'prev'}
-        <button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
-    {:else if button === 'next'}
-        <button class="{$theme.button} ec-{button}" on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
-    {:else if button === 'today'}
+        <button class="{$theme.button} ec-{button}" aria-label={$buttonText.prev} on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
+    {:else if button == 'next'}
+        <button class="{$theme.button} ec-{button}" aria-label={$buttonText.next} on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
+    {:else if button == 'today'}
         <button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
-    {:else}
+    {:else if button != ''}
         <button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
     {/if}
 {/each}

package/src/lib/a11y.js

@@ -0,0 +1,30 @@
+
+export function keyEnter(fn) {
+    return function (e) {
+        return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
+    };
+}
+
+export function btnTextDay(text) {
+    return btnText(text, 'day');
+}
+
+export function btnTextWeek(text) {
+    return btnText(text, 'week');
+}
+
+export function btnTextMonth(text) {
+    return btnText(text, 'month');
+}
+
+export function btnTextYear(text) {
+    return btnText(text, 'year');
+}
+
+function btnText(text, period) {
+    return {
+        ...text,
+        next: 'Next ' + period,
+        prev: 'Previous ' + period
+    };
+}

package/src/lib/actions.js

@@ -1,18 +1,12 @@
-import {isObject} from './utils.js';
 
 export function setContent(node, content) {
     let actions = {
         update(content) {
-            while (node.firstChild) {
-                node.removeChild(node.lastChild);
-            }
-            if (!isObject(content)) {
+            if (typeof content == 'string') {
                 node.innerText = content;
-            } else if (content.domNodes) {
-                for (let child of content.domNodes) {
-                    node.appendChild(child);
-                }
-            } else if (content.html) {
+            } else if (content?.domNodes) {
+                node.replaceChildren(...content.domNodes);
+            } else if (content?.html) {
                 node.innerHTML = content.html;
             }
         }

package/src/lib/date.js

@@ -91,43 +91,6 @@ export function toISOString(date) {
     return date.toISOString().substring(0, 19);
 }
 
-export function formatRange(start, end, intl) {
-    if (start.getFullYear() !== end.getFullYear()) {
-        return intl.format(start) + ' - ' + intl.format(end);
-    }
-
-    let diff = [];
-    if (start.getMonth() !== end.getMonth()) {
-        diff.push('month');
-    }
-    if (start.getDate() !== end.getDate()) {
-        diff.push('day');
-    }
-
-    if (!diff.length) {
-        return intl.format(start);
-    }
-
-    let opts1 = intl.resolvedOptions();
-    let opts2 = {};
-    for (let key of diff) {
-        opts2[key] = opts1[key];
-    }
-    let intl2 = new Intl.DateTimeFormat(opts1.locale, opts2);
-
-    let full1 = intl.format(start);
-    let full2 = intl.format(end);
-    let part1 = intl2.format(start);
-    let part2 = intl2.format(end);
-
-    let common = _commonChunks(full1, part1, full2, part2);
-    if (common) {
-        return common.head + part1 + ' - ' + part2 + common.tail;
-    }
-
-    return full1 + ' - ' + full2;
-}
-
 export function datesEqual(date1, ...dates2) {
     return dates2.every(date2 => date1.getTime() === date2.getTime());
 }
@@ -151,6 +114,15 @@ export function noTimePart(date) {
     return typeof date === 'string' && date.length <= 10;
 }
 
+/**
+ * Copy time from one date to another
+ */
+export function copyTime(toDate, fromDate) {
+    toDate.setUTCHours(fromDate.getUTCHours(), fromDate.getUTCMinutes(), fromDate.getUTCSeconds(), 0);
+
+    return toDate;
+}
+
 /**
  * Private functions
  */
@@ -177,43 +149,3 @@ function _fromISOString(str) {
         Number(parts[5] || 0)
     ));
 }
-
-function _commonChunks(str1, substr1, str2, substr2) {
-    let i = 0;
-    while (i < str1.length) {
-        let res1;
-        [i, res1] = _cut(str1, substr1, i);
-        if (!res1) {
-            break;
-        }
-
-        let j = 0;
-        while (j < str2.length) {
-            let res2;
-            [j, res2] = _cut(str2, substr2, j);
-            if (!res2) {
-                break;
-            }
-
-            if (res1.head === res2.head && res1.tail === res2.tail) {
-                return res1;
-            }
-        }
-    }
-
-    return null
-}
-
-function _cut(str, substr, from) {
-    let start = str.indexOf(substr, from);
-    if (start >= 0) {
-        let end = start + substr.length;
-
-        return [end, {
-            head: str.substr(0, start),
-            tail: str.substr(end)
-        }];
-    }
-
-    return [-1, null];
-}

package/src/lib/dom.js

@@ -1,12 +1,14 @@
 import {symbol} from './utils.js';
 
-export function createElement(tag, className, html, text) {
+export function createElement(tag, className, content) {
     let el = document.createElement(tag);
     el.className = className;
-    if (html) {
-        el.innerHTML = html;
-    } else if (text) {
-        el.innerText = text;
+    if (typeof content == 'string') {
+        el.innerText = content;
+    } else if (content.domNodes) {
+        el.replaceChildren(...content.domNodes);
+    } else if (content.html) {
+        el.innerHTML = content.html;
     }
     return el;
 }

package/src/lib/events.js

@@ -1,4 +1,4 @@
-import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart} from './date';
+import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
 import {assign} from './utils';
 import {toViewWithLocalDates} from './view';
@@ -131,10 +131,14 @@ export function repositionEvent(chunk, longChunks, height) {
 }
 
 export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
-    let timeText = _intlEventTime.format(chunk.start), content;
-    if (displayEventEnd && chunk.event.display !== 'pointer') {
-        timeText += ` - ${_intlEventTime.format(chunk.end)}`;
-    }
+    let timeText = _intlEventTime.formatRange(
+        chunk.start,
+        displayEventEnd && chunk.event.display !== 'pointer'
+            ? copyTime(cloneDate(chunk.start), chunk.end)  // make Intl.formatRange output only the time part
+            : chunk.start
+    );
+    let content;
+
     if (eventContent) {
         content = is_function(eventContent)
             ? eventContent({
@@ -150,14 +154,14 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
                 break;
             case 'pointer':
                 content = {
-                    domNodes: [createElement('div', theme.eventTime, null, timeText)]
+                    domNodes: [createElement('div', theme.eventTime, timeText)]
                 };
                 break;
             default:
                 content = {
                     domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, null, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.titleHTML, chunk.event.title)
+                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
+                        createElement('div', theme.eventTitle, chunk.event.title)
                     ]
                 };
         }

package/src/lib/stores.js

@@ -1,10 +1,10 @@
 import {derived, writable, get} from 'svelte/store';
 import {is_function} from 'svelte/internal';
-import {toLocalDate, formatRange} from './date';
+import {toLocalDate} from './date';
 
 export function writable2(value, parser, start) {
     return {
-        ...writable(parser ? parser(value) : value, start),
+        ...writable(value, start),
         parse: parser
     };
 }
@@ -43,12 +43,11 @@ export function intl(locale, format) {
 
 export function intlRange(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
-        if (is_function($format)) {
-            return {format: (start, end) => $format(toLocalDate(start), toLocalDate(end))};
-        }
-        let intl = new Intl.DateTimeFormat($locale, $format);
+        let intl = is_function($format)
+            ? {formatRange: $format}
+            : new Intl.DateTimeFormat($locale, $format);
         return {
-            format: (start, end) => formatRange(toLocalDate(start), toLocalDate(end), intl)
+            formatRange: (start, end) => intl.formatRange(toLocalDate(start), toLocalDate(end))
         };
     });
 }

package/src/lib/utils.js

@@ -2,6 +2,10 @@ export function assign(...args) {
     return Object.assign(...args);
 }
 
+export function keys(object) {
+    return Object.keys(object);
+}
+
 export function floor(value) {
     return Math.floor(value);
 }
@@ -14,10 +18,6 @@ export function max(...args) {
     return Math.max(...args);
 }
 
-export function isObject(test) {
-    return typeof test === 'object' && test !== null;
-}
-
 export function symbol() {
     return Symbol('ec');
 }

package/src/lib.js

@@ -1,3 +1,4 @@
+export * from './lib/a11y.js';
 export * from './lib/actions';
 export * from './lib/date';
 export * from './lib/debounce';

package/src/storage/state.js

@@ -12,16 +12,20 @@ import {
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
 } from './stores';
-import {assign, writable2, intl, intlRange} from '../lib.js';
+import {assign, keys, writable2, intl, intlRange} from '../lib.js';
 
 export default class {
     constructor(plugins, input) {
         plugins = plugins || [];
 
         // Create options
-        let options = createOptions(plugins);
+        let options= createOptions(plugins);
         let parsers = createParsers(options, plugins);
 
+        // Parse options
+        options = parseOpts(options, parsers);
+        input = parseOpts(input, parsers);
+
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
             this[option] = writable2(value, parsers[option]);
@@ -37,10 +41,10 @@ export default class {
         this._events = events(this);
         this._now = now();
         this._today = today(this);
-        this._intlEventTime = intl(this.locale, this.eventTimeFormat);
+        this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
-        this._titleIntlRange = intlRange(this.locale, this.titleFormat);
+        this._intlTitle = intlRange(this.locale, this.titleFormat);
         this._bodyEl = writable(undefined);
         this._scrollable = writable(false);
         this._viewTitle = viewTitle(this);
@@ -68,13 +72,9 @@ export default class {
         }
 
         // Set options for each view
-        let commonOpts = assign({}, options, input);
-        parseOpts(commonOpts, this);
-        let views = new Set([...Object.keys(options.views), ...Object.keys(input.views || {})]);
+        let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let viewOpts = assign({}, options.views[view] || {}, input.views && input.views[view] || {});
-            parseOpts(viewOpts, this);
-            let opts = assign({}, commonOpts, viewOpts);
+            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -85,7 +85,7 @@ export default class {
                 }
             });
             // Process options
-            for (let key of Object.keys(opts)) {
+            for (let key of keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];
 
@@ -113,12 +113,15 @@ export default class {
     }
 }
 
-function parseOpts(opts, state) {
-    for (let key of Object.keys(opts)) {
-        if (state.hasOwnProperty(key) && key[0] !== '_') {
-            if (state[key].parse) {
-                opts[key] = state[key].parse(opts[key]);
-            }
+function parseOpts(opts, parsers) {
+    let result = {};
+    for (let key of keys(opts)) {
+        result[key] = parsers[key] ? parsers[key](opts[key]) : opts[key];
+    }
+    if (opts.views) {
+        for (let view of keys(opts.views)) {
+            result.views[view] = parseOpts(opts.views[view], parsers);
         }
     }
+    return result;
 }

package/src/storage/stores.js

@@ -20,7 +20,7 @@ import {
 } from '../lib.js';
 
 export function monthMode(state) {
-    return derived(state.view, $view => $view.startsWith?.('dayGrid'));
+    return derived(state.view, $view => $view?.startsWith('dayGrid'));
 }
 
 export function activeRange(state) {
@@ -93,11 +93,11 @@ export function viewDates(state) {
 
 export function viewTitle(state) {
     return derived(
-        [state.date, state._activeRange, state._titleIntlRange, state._monthMode],
-        ([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
+        [state.date, state._activeRange, state._intlTitle, state._monthMode],
+        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
             return $_monthMode
-                ? $_titleIntlRange.format($date, $date)
-                : $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
+                ? $_intlTitle.formatRange($date, $date)
+                : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
         }
     );
 }