@nomideusz/svelte-calendar 1.8.0 → 1.9.0

package/README.md

@@ -1112,7 +1112,7 @@ The widget renders inside shadow DOM: host-page CSS cannot affect the calendar a
 | `api` | — | Events endpoint, fetched as `GET {api}?start=…&end=…` (ISO instants; appended with `&` if `api` already has a query). It must answer JSON: an array of events, or `{ "events": [...] }`. |
 | `events` | — | Inline JSON array of events, used when there is no `api` |
 | `headers` | — | JSON object of extra request headers for `api`. Without it the GET is a simple CORS request (no preflight). |
-| `readonly` | read-only | The widget is read-only unless `readonly="false"`. There is no write endpoint: with `api`, drags are only visual; with `events`, they are kept in memory. |
+| `readonly` | read-only | The widget is read-only unless `readonly="false"`. There is no write endpoint: with `api`, drags are only visual; with `events`, they are kept in memory. Either way each committed drag fires `eventmove`. |
 | `view` | `week-planner` | Initial view ID (`week-planner`, `day-agenda`, `month-grid`, …) |
 | `theme` | `auto` | `auto`, `neutral` or `midnight` (unknown names fall back to `neutral`) |
 | `height` | `600` | Height in px (`"600"` or `"600px"`), or `auto` |
@@ -1131,6 +1131,21 @@ The widget renders inside shadow DOM: host-page CSS cannot affect the calendar a
 
 Each event in `api` responses and `events` needs `start` and `end` as date strings (ISO 8601) and may carry `id`, `title`, `color`, `allDay`, `subtitle` and `location`; other fields are ignored, as are events with an invalid or empty range. Changing an attribute updates the calendar in place.
 
+The element fires two DOM events (they bubble), with the event as the calendar holds it (`start` and `end` as `Date`s):
+
+| Event | `detail` | When |
+|-------|----------|------|
+| `eventclick` | `{ event, anchor }` | An event is clicked or activated with Enter; `anchor` is its block's viewport rect |
+| `eventmove` | `{ event, start, end }` | A drag or resize committed (only with `readonly="false"`); `event` is the one before the move |
+
+```js
+const cal = document.querySelector('day-calendar');
+cal.addEventListener('eventclick', (e) => open(e.detail.event.id));
+cal.addEventListener('eventmove', (e) => save(e.detail.event.id, e.detail.start, e.detail.end));
+```
+
+Keep your own copy in step with `eventmove` if you later set `events` again: a new `events` value replaces what the calendar holds.
+
 ## All Props
 
 Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.

package/dist/text-fit.d.ts

@@ -50,10 +50,14 @@ export declare function fontOf(el: Element): string;
  * that does not come from its own text (block, or a flex item with min-width: 0).
  */
 export declare function fitLabel(candidates: readonly string[], lines?: number): Attachment<HTMLElement>;
+/** The badness of the loosest line but the last, were `lines` justified at `width`. */
+export declare function looseness(lines: readonly string[], font: string, width: number): number;
 export declare function breakLines(text: string, font: string, width: number): string[];
 /**
  * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
  * lines, one block span per line, re-done on resize and after webfonts load.
+ * A paragraph that cannot be justified without gaps (`TOLERANCE`) goes back to
+ * the browser as plain text, set however the element sets it (ragged).
  * Progressive: the server-rendered text is what crawlers and no-JS get; if the
  * browser's own measure disagrees with ours (a line overflows), the plain
  * text goes back and the browser breaks it. Pass the text, not the DOM — the

package/dist/text-fit.js

@@ -96,6 +96,23 @@ export function fitLabel(candidates, lines = 1) {
 // (10 + badness)² plus 50² for ending inside a word, plus 10000 when the line
 // above did too. ponytail: no fitness classes, no shrink; O(n·k).
 const SHY = '­';
+const badness = (slackPx, spaces, space) => {
+    const r = slackPx / (Math.max(spaces, 1) * space * 0.5);
+    return Math.min(10000, 100 * r * r * r);
+};
+// TeX's default \tolerance. A narrow column (a phone) sometimes has no set of
+// breaks that keeps every space under ~1.6× its width; justified, those lines
+// read as holes, so typeset leaves that paragraph to the browser, ragged.
+const TOLERANCE = 200;
+/** The badness of the loosest line but the last, were `lines` justified at `width`. */
+export function looseness(lines, font, width) {
+    const measure = (s) => measureNaturalWidth(prepareWithSegments(s, font));
+    const space = measure('a a') - measure('aa');
+    let worst = 0;
+    for (const l of lines.slice(0, -1))
+        worst = Math.max(worst, badness(width - measure(l), l.split(' ').length - 1, space));
+    return worst;
+}
 export function breakLines(text, font, width) {
     const measure = (s) => measureNaturalWidth(prepareWithSegments(s, font));
     const boxes = [];
@@ -119,10 +136,6 @@ export function breakLines(text, font, width) {
     const bw = boxes.map(measure);
     const space = measure('a a') - measure('aa');
     const hyphen = measure('-');
-    const badness = (slackPx, spaces) => {
-        const r = slackPx / (Math.max(spaces, 1) * space * 0.5);
-        return Math.min(10000, 100 * r * r * r);
-    };
     // best[h][k]: cheapest way to set boxes[0..k) with a break after, h = 1 when
     // that last line ended inside a word; prev[h][k]: [start of that line, its h].
     const best = [new Array(n + 1).fill(Infinity), new Array(n + 1).fill(Infinity)];
@@ -144,7 +157,7 @@ export function breakLines(text, font, width) {
                         break;
                     continue; // only the hyphen overflows — try the next box
                 }
-                const b = last ? 0 : badness(width - lineW, spaces);
+                const b = last ? 0 : badness(width - lineW, spaces, space);
                 const cost = last ? 0 : (10 + b) ** 2 + (h ? 50 ** 2 : 0) + (h && ph ? 10000 : 0);
                 if (best[ph][i] + cost < best[h][j + 1]) {
                     best[h][j + 1] = best[ph][i] + cost;
@@ -177,6 +190,8 @@ export function breakLines(text, font, width) {
 /**
  * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
  * lines, one block span per line, re-done on resize and after webfonts load.
+ * A paragraph that cannot be justified without gaps (`TOLERANCE`) goes back to
+ * the browser as plain text, set however the element sets it (ragged).
  * Progressive: the server-rendered text is what crawlers and no-JS get; if the
  * browser's own measure disagrees with ours (a line overflows), the plain
  * text goes back and the browser breaks it. Pass the text, not the DOM — the
@@ -204,6 +219,10 @@ export function typeset(text) {
             'position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap';
         const set = (w) => {
             const lines = breakLines(text, font, w);
+            if (looseness(lines, font, w) > TOLERANCE) {
+                el.textContent = text;
+                return true;
+            }
             const spans = lines.map((l, i) => {
                 const s = document.createElement('span');
                 s.setAttribute('aria-hidden', 'true');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [

package/widget/widget.js

@@ -20756,6 +20756,7 @@ createHTML: (html) => {
 		/** Minimum day-column width in px for the week grid (default: 110) — a narrower container scrolls sideways */
 		/** Visible hours of the time grids, "start-end" in whole hours (e.g. "6-22") */
 		/** UI words as a JSON object over the English defaults, e.g. '{"today":"Dziś"}' */
+		/** Set by the <day-calendar> element: fires its `eventclick` / `eventmove` DOM events */
 		let theme = prop($$props, "theme", 3, "auto"), view = prop($$props, "view", 3, "week-planner"), height = prop($$props, "height", 3, "600"), mondaystart = prop($$props, "mondaystart", 3, "true");
 		const heightValue = /* @__PURE__ */ user_derived(() => {
 			const trimmed = height().trim();
@@ -20914,7 +20915,16 @@ createHTML: (html) => {
 				},
 				get labels() {
 					return get(labelsValue);
-				}
+				},
+				oneventclick: (event, anchor) => $$props.emit?.("eventclick", {
+					event,
+					anchor
+				}),
+				oneventmove: (event, start, end) => $$props.emit?.("eventmove", {
+					event,
+					start,
+					end
+				})
 			});
 		}
 		pop();
@@ -21030,9 +21040,13 @@ createHTML: (html) => {
 				this.stylesInjected = true;
 			}
 			const attrs = createReactiveProps(this.readProps());
+			const emit = (type, detail) => this.dispatchEvent(new CustomEvent(type, {
+				detail,
+				bubbles: true
+			}));
 			const component = mount(CalendarWidget, {
 				target: root,
-				props: attrs.props
+				props: Object.assign(attrs.props, { emit })
 			});
 			this.instance = {
 				component,
@@ -21056,5 +21070,15 @@ createHTML: (html) => {
 			return props;
 		}
 	};
-	if (!customElements.get("day-calendar")) customElements.define("day-calendar", DayCalendarElement);
+	if (!customElements.get("day-calendar")) {
+		customElements.define("day-calendar", DayCalendarElement);
+		const registry = customElements;
+		for (const el of document.querySelectorAll("day-calendar")) {
+			if (el instanceof DayCalendarElement) continue;
+			try {
+				registry.initialize?.(el);
+			} catch {}
+			customElements.upgrade(el);
+		}
+	}
 })();