@syware/jlib 0.5.1 → 0.7.0

package/dist/molecules/jl-facts.js

@@ -0,0 +1,64 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf, oneOf } from "../lib/attributes.js";
+import { setOrRemove } from "../lib/dom.js";
+import jl_facts_default from "./jl-facts.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-facts.tsx
+var FACTS_ORIENTATIONS = ["horizontal", "vertical"];
+var hasValue = (fact) => fact.value !== null && fact.value !== void 0 && fact.value !== "";
+/**
+* The facts about one thing, label and value: an object's size and digest, an order's customer and date. Facts
+* without a value are left out, and an element with none takes no room. Values can be code (monospace, broken
+* anywhere), links, or drawn by code (`renderers`, by a fact's `key`). Narrower than 420 pixels, labels go over
+* their values.
+*/
+var JlFacts = class extends JlElement {
+	static selector = "jl-facts";
+	items = this.useChange([], () => this.render(), {
+		attribute: "items",
+		parse: jsonOf([])
+	});
+	orientation = this.useChange("horizontal", (value) => this.reflect("orientation", value), {
+		attribute: "orientation",
+		parse: oneOf(FACTS_ORIENTATIONS, "horizontal")
+	});
+	/** Draws the values of some facts by code, by their `key`: `{ type: (fact) => <JlBadge label={…} /> }`. */
+	renderers = this.useChange({}, () => this.render());
+	/** The list's name for screen readers. */
+	label = this.useChange("", (value) => setOrRemove(this._refs.list, "aria-label", value), { attribute: "label" });
+	_refs = this.useRefs((ref) => ({ list: ref("dl") }));
+	templateHtml() {
+		return /* @__PURE__ */ jsx("dl", {
+			class: "facts",
+			attrs: { part: "base" }
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_facts_default}`;
+	}
+	render() {
+		const shown = this.items.get().filter(hasValue);
+		this._refs.list.replaceChildren(...shown.map((fact) => /* @__PURE__ */ jsxs("div", {
+			class: "fact",
+			children: [/* @__PURE__ */ jsx("dt", { children: fact.label }), /* @__PURE__ */ jsx("dd", {
+				title: fact.hint,
+				children: this.valueNode(fact)
+			})]
+		})));
+		this.reflect("empty", shown.length === 0);
+	}
+	valueNode(fact) {
+		const renderer = fact.key === void 0 ? void 0 : this.renderers.get()[fact.key];
+		if (renderer !== void 0) return renderer(fact);
+		const text = String(fact.value);
+		const content = fact.code ? /* @__PURE__ */ jsx("code", { children: text }) : document.createTextNode(text);
+		return fact.href === void 0 ? content : /* @__PURE__ */ jsx("a", {
+			href: fact.href,
+			children: content
+		});
+	}
+};
+JlFacts.register();
+export { FACTS_ORIENTATIONS, JlFacts };

package/dist/molecules/jl-file-drop.d.ts

@@ -61,6 +61,11 @@ export declare class JlFileDrop extends JlFormControl {
     focus(options?: FocusOptions): void;
     /** Opens the file chooser. */
     browse(): void;
+    /**
+     * Takes files as a drop would, such as files dropped elsewhere on the page: the ones it accepts join the list (or
+     * replace the file there) and fire `change`, the others say why not.
+     */
+    add(files: readonly File[]): void;
     /** Takes every file back, and empties the list of refused ones. */
     clear(): void;
     templateHtml(): Node;

package/dist/molecules/jl-file-drop.js

@@ -3,8 +3,9 @@ import { JlFormControl } from "../base/jl-form-control.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { registerIcons } from "../lib/icons.js";
 import { CONTROL_SIZES } from "../lib/options.js";
-import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { jlText } from "../lib/texts.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
 import { pageLocale } from "../lib/locale.js";
 import { checkFiles, describeAccept, formatFileSize, isSameFile } from "../lib/files.js";
 import jl_file_drop_default from "./jl-file-drop.css_raw.js";
@@ -30,15 +31,10 @@ var ALERT_ICON_SIZE = 14;
 var NO_LIMIT = 0;
 var FILES_TYPE = "Files";
 var IMAGE_FAMILY = "image/";
-var VALUE_MISSING = "Choose a file.";
-var DEFAULT_TEXT = {
-	multiple: "Drop files here",
-	single: "Drop a file here"
-};
 var REASONS = {
-	count: () => "is one too many: the field takes a single file",
-	size: (rules) => `is larger than ${formatFileSize(rules.maxSize, pageLocale())}`,
-	type: (rules) => `is not an accepted type (${describeAccept(rules.accept)})`
+	count: () => jlText("fileTooMany"),
+	size: (rules) => jlText("fileTooLarge", { size: formatFileSize(rules.maxSize, pageLocale()) }),
+	type: (rules) => jlText("fileWrongType", { types: describeAccept(rules.accept) })
 };
 var hasFiles = (event) => event.dataTransfer?.types.includes(FILES_TYPE) ?? false;
 /**
@@ -114,6 +110,13 @@ var JlFileDrop = class extends JlFormControl {
 			if (!this.disabled.get()) this._refs.picker.click();
 		});
 	}
+	/**
+	* Takes files as a drop would, such as files dropped elsewhere on the page: the ones it accepts join the list (or
+	* replace the file there) and fire `change`, the others say why not.
+	*/
+	add(files) {
+		this.whenRendered(() => this.take([...files]));
+	}
 	/** Takes every file back, and empties the list of refused ones. */
 	clear() {
 		this.whenRendered(() => {
@@ -148,7 +151,7 @@ var JlFileDrop = class extends JlFormControl {
 						class: "browse",
 						type: "button",
 						"aria-describedby": this._ids.hint,
-						children: "Browse"
+						children: jlText("browse")
 					})
 				]
 			}),
@@ -165,7 +168,7 @@ var JlFileDrop = class extends JlFormControl {
 			}),
 			/* @__PURE__ */ jsx("ul", {
 				class: "files",
-				"aria-label": "Chosen files",
+				"aria-label": jlText("chosenFiles"),
 				hidden: true
 			})
 		] });
@@ -297,7 +300,7 @@ var JlFileDrop = class extends JlFormControl {
 				editable ? /* @__PURE__ */ jsx("button", {
 					class: "file-remove",
 					type: "button",
-					"aria-label": `Remove ${file.name}`,
+					"aria-label": jlText("removeNamed", { name: file.name }),
 					"data-index": String(index),
 					children: /* @__PURE__ */ jsx(JlIcon, {
 						name: "x",
@@ -327,14 +330,14 @@ var JlFileDrop = class extends JlFormControl {
 	}
 	renderText() {
 		const text = this.text.get();
-		const fallback = this.multiple.get() ? DEFAULT_TEXT.multiple : DEFAULT_TEXT.single;
+		const fallback = jlText(this.multiple.get() ? "dropFiles" : "dropFile");
 		this._refs.text.textContent = text === "" ? fallback : text;
 	}
 	/** What it takes, under the text: `PNG, JPG · up to 5 MB`. */
 	renderHint() {
 		const types = describeAccept(this.accept.get());
 		const maxSize = this.maxSize.get();
-		const hint = [types, maxSize === NO_LIMIT ? "" : `up to ${formatFileSize(maxSize, pageLocale())}`].filter((part) => part !== "").join(" · ");
+		const hint = [types, maxSize === NO_LIMIT ? "" : jlText("fileUpTo", { size: formatFileSize(maxSize, pageLocale()) })].filter((part) => part !== "").join(" · ");
 		this._refs.hint.textContent = hint;
 		this._refs.hint.hidden = hint === "";
 	}
@@ -351,7 +354,7 @@ var JlFileDrop = class extends JlFormControl {
 	}
 	renderValidity() {
 		if (this.required.get() && this._state.files.length === 0) {
-			this.internals.setValidity({ valueMissing: true }, VALUE_MISSING, this._refs.browse);
+			this.internals.setValidity({ valueMissing: true }, jlText("chooseFile"), this._refs.browse);
 			return;
 		}
 		this.internals.setValidity({});

package/dist/molecules/jl-input-list.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-input-list.css?raw
+var jl_input_list_default = ":host {\n  display: block;\n}\n\n.list,\n.rows {\n  display: grid;\n  gap: var(--jl-space-2);\n}\n\n.row {\n  display: flex;\n  align-items: start;\n  gap: var(--jl-space-1);\n}\n\n.row > :first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n[hidden] {\n  display: none;\n}\n";
+export { jl_input_list_default as default };

package/dist/molecules/jl-input-list.d.ts

@@ -0,0 +1,79 @@
+import { JlElement } from '../base/jl-element';
+import type { InputType } from '../types/jl-input.types';
+import type { SelectOption } from '../types/jl-select.types';
+/**
+ * A field with several values, each in its own row: typed in an input (or a text area when `multiline`), or picked
+ * from `options`. People add a row and remove one; `max` caps how many. `values` holds those filled in, in their
+ * order, and `change` fires with them. Put it in a `jl-field` for its label, hint and error.
+ */
+export declare class JlInputList extends JlElement {
+    static readonly selector = "jl-input-list";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        change: string[];
+    }>>;
+    /** The values filled in, in their order; rows left empty are not among them. */
+    readonly values: Readonly<Readonly<{
+        get(): string[];
+        set(setter: string[] | ((prevState: string[]) => string[])): void;
+    }>>;
+    /** The input of each row: text, a number, a date, a link… */
+    readonly type: Readonly<Readonly<{
+        get(): InputType;
+        set(setter: ((prevState: InputType) => InputType) | InputType): void;
+    }>>;
+    /** Each value on several lines, in a text area. */
+    readonly multiline: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The values to pick from, each row a select; none lets people type. */
+    readonly options: Readonly<Readonly<{
+        get(): SelectOption[];
+        set(setter: SelectOption[] | ((prevState: SelectOption[]) => SelectOption[])): void;
+    }>>;
+    /** How many values it takes at most; 0 takes any number. */
+    readonly max: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    readonly placeholder: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The name of each row for screen readers: the field's label. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly disabled: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The add button's text. */
+    readonly addLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The text a screen reader says for each row's remove button. */
+    readonly removeLabel: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _state;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** Values set from outside start the rows again; those the rows themselves gave change nothing. */
+    private follow;
+    private renderRows;
+    private renderAdd;
+    private renderDisabled;
+    private row;
+    /** The control of a row: a select among the options, a text area, or an input of the type; `onInput` hears it. */
+    private control;
+    private change;
+    private addRow;
+    private removeRow;
+    private publish;
+}

package/dist/molecules/jl-input-list.js

@@ -0,0 +1,177 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { clampedNumber, jsonOf, oneOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { INPUT_TYPES, JlInput } from "../atoms/jl-input.js";
+import { JlSelect } from "../atoms/jl-select.js";
+import { JlTextarea } from "../atoms/jl-textarea.js";
+import { canAddRow, filledValues, rowsOf, sameValues, withRowAt, withoutRowAt } from "../lib/input-list.js";
+import jl_input_list_default from "./jl-input-list.css_raw.js";
+import { css } from "@jadis/core";
+import { Plus, X } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-input-list.tsx
+registerIcons({
+	plus: Plus,
+	x: X
+});
+var NO_LIMIT = 0;
+var MAX_LIMIT = 1e3;
+/**
+* A field with several values, each in its own row: typed in an input (or a text area when `multiline`), or picked
+* from `options`. People add a row and remove one; `max` caps how many. `values` holds those filled in, in their
+* order, and `change` fires with them. Put it in a `jl-field` for its label, hint and error.
+*/
+var JlInputList = class extends JlElement {
+	static selector = "jl-input-list";
+	events = this.useEvents();
+	/** The values filled in, in their order; rows left empty are not among them. */
+	values = this.useChange([], (values) => this.follow(values), {
+		attribute: "values",
+		parse: jsonOf([])
+	});
+	/** The input of each row: text, a number, a date, a link… */
+	type = this.useChange("text", () => this.renderRows(), {
+		attribute: "type",
+		parse: oneOf(INPUT_TYPES, "text")
+	});
+	/** Each value on several lines, in a text area. */
+	multiline = this.useChange(false, () => this.renderRows(), { attribute: "multiline" });
+	/** The values to pick from, each row a select; none lets people type. */
+	options = this.useChange([], () => this.renderRows(), {
+		attribute: "options",
+		parse: jsonOf([])
+	});
+	/** How many values it takes at most; 0 takes any number. */
+	max = this.useChange(NO_LIMIT, () => this.renderAdd(), {
+		attribute: "max",
+		parse: clampedNumber(NO_LIMIT, NO_LIMIT, MAX_LIMIT)
+	});
+	placeholder = this.useChange("", () => this.renderRows(), { attribute: "placeholder" });
+	/** The name of each row for screen readers: the field's label. */
+	label = this.useChange("", () => this.renderRows(), { attribute: "label" });
+	disabled = this.useChange(false, (value) => this.renderDisabled(value), { attribute: "disabled" });
+	/** The add button's text. */
+	addLabel = this.useChange(jlText("addValue"), () => this.renderAdd(), { attribute: "add-label" });
+	/** The text a screen reader says for each row's remove button. */
+	removeLabel = this.useChange(jlText("removeValue"), () => this.renderRows(), { attribute: "remove-label" });
+	_state = { rows: [""] };
+	_refs = this.useRefs((ref) => ({
+		add: ref(".add"),
+		rows: ref(".rows")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "list",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("div", { class: "rows" }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(JlButton, {
+				class: "add",
+				variant: "ghost",
+				size: "sm",
+				icon: "plus"
+			}) })]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_input_list_default}`;
+	}
+	onConnect() {
+		this._refs.add.events.register("press", () => this.addRow());
+	}
+	/** Values set from outside start the rows again; those the rows themselves gave change nothing. */
+	follow(values) {
+		if (sameValues(values, filledValues(this._state.rows))) return;
+		this._state.rows = rowsOf(values);
+		this.renderRows();
+	}
+	renderRows() {
+		this._refs.rows.replaceChildren(...this._state.rows.map((value, index) => this.row(value, index)));
+		this.renderAdd();
+	}
+	renderAdd() {
+		const add = this._refs.add;
+		add.label.set(this.addLabel.get());
+		add.hidden = this.disabled.get() || !canAddRow(this._state.rows.length, this.max.get());
+	}
+	renderDisabled(disabled) {
+		this.reflect("disabled", disabled);
+		this.renderRows();
+	}
+	row(value, index) {
+		const control = this.control(value, (text) => this.change(index, text));
+		const remove = /* @__PURE__ */ jsx(JlButton, {
+			class: "remove",
+			variant: "ghost",
+			size: "sm",
+			icon: "x",
+			hint: this.removeLabel.get()
+		});
+		remove.events.register("press", () => this.removeRow(index));
+		remove.hidden = this.disabled.get() || this._state.rows.length === 1;
+		return /* @__PURE__ */ jsxs("div", {
+			class: "row",
+			children: [control, remove]
+		});
+	}
+	/** The control of a row: a select among the options, a text area, or an input of the type; `onInput` hears it. */
+	control(value, onInput) {
+		const label = this.label.get();
+		const disabled = this.disabled.get();
+		const options = this.options.get();
+		if (options.length > 0) {
+			const select = /* @__PURE__ */ jsx(JlSelect, {
+				label,
+				options,
+				disabled
+			});
+			select.value.set(value);
+			select.events.register("change", onInput);
+			return select;
+		}
+		if (this.multiline.get()) {
+			const area = /* @__PURE__ */ jsx(JlTextarea, {
+				label,
+				value,
+				placeholder: this.placeholder.get(),
+				disabled,
+				autosize: true
+			});
+			area.events.register("input", onInput);
+			return area;
+		}
+		const input = /* @__PURE__ */ jsx(JlInput, {
+			label,
+			value,
+			type: this.type.get(),
+			placeholder: this.placeholder.get(),
+			disabled
+		});
+		input.events.register("input", onInput);
+		return input;
+	}
+	change(index, text) {
+		this._state.rows = withRowAt(this._state.rows, index, text);
+		this.publish();
+	}
+	addRow() {
+		if (!canAddRow(this._state.rows.length, this.max.get())) return;
+		this._state.rows = [...this._state.rows, ""];
+		this.renderRows();
+		const added = this._refs.rows.lastElementChild?.firstElementChild;
+		if (added instanceof HTMLElement) added.focus();
+	}
+	removeRow(index) {
+		this._state.rows = withoutRowAt(this._state.rows, index);
+		this.renderRows();
+		this.publish();
+	}
+	publish() {
+		const values = filledValues(this._state.rows);
+		this.values.set(values);
+		this.events.emit("change", values);
+	}
+};
+JlInputList.register();
+export { JlInputList };

package/dist/molecules/jl-list-item.js

@@ -1,9 +1,9 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { registerIcons } from "../lib/icons.js";
+import { JlIcon } from "../atoms/jl-icon.js";
 import { setOrRemove } from "../lib/dom.js";
 import { hasSlotted } from "../lib/slots.js";
-import { JlIcon } from "../atoms/jl-icon.js";
 import { isActivationKey, startedOnControl } from "../lib/surface.js";
 import jl_list_item_default from "./jl-list-item.css_raw.js";
 import { css } from "@jadis/core";

package/dist/molecules/jl-load-more.css_raw.js

@@ -0,0 +1,3 @@
+// src/molecules/jl-load-more.css?raw
+var jl_load_more_default = ":host {\n  display: block;\n}\n\n:host([complete]) {\n  display: none;\n}\n\n.more {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 0;\n  color: var(--jl-muted);\n  font-size: var(--jl-font-sm);\n}\n";
+export { jl_load_more_default as default };

package/dist/molecules/jl-load-more.d.ts

@@ -0,0 +1,41 @@
+import { JlElement } from '../base/jl-element';
+/**
+ * The end of a long list read a page at a time: how much of it shows ("30 of 120") and a button that asks for the
+ * next page (`more`). It shows the button's spinner while `loading`, and takes no room once the whole list shows.
+ */
+export declare class JlLoadMore extends JlElement {
+    static readonly selector = "jl-load-more";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        more: undefined;
+    }>>;
+    /** How many items the list shows. */
+    readonly shown: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** How many it has in all. */
+    readonly total: Readonly<Readonly<{
+        get(): number;
+        set(setter: number | ((prevState: number) => number)): void;
+    }>>;
+    /** The next page is on its way: the button shows a spinner and ignores presses. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The button's text. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What shows beside it; `{shown}` and `{total}` are filled. */
+    readonly countText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    private render;
+}

package/dist/molecules/jl-load-more.js

@@ -0,0 +1,62 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { fillText } from "../lib/text.js";
+import { jlText } from "../lib/texts.js";
+import { JlButton } from "../atoms/jl-button.js";
+import { pageLocale } from "../lib/locale.js";
+import jl_load_more_default from "./jl-load-more.css_raw.js";
+import { css } from "@jadis/core";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/molecules/jl-load-more.tsx
+/**
+* The end of a long list read a page at a time: how much of it shows ("30 of 120") and a button that asks for the
+* next page (`more`). It shows the button's spinner while `loading`, and takes no room once the whole list shows.
+*/
+var JlLoadMore = class extends JlElement {
+	static selector = "jl-load-more";
+	events = this.useEvents();
+	/** How many items the list shows. */
+	shown = this.useChange(0, () => this.render(), { attribute: "shown" });
+	/** How many it has in all. */
+	total = this.useChange(0, () => this.render(), { attribute: "total" });
+	/** The next page is on its way: the button shows a spinner and ignores presses. */
+	loading = this.useChange(false, (value) => this._refs.button.loading.set(value), { attribute: "loading" });
+	/** The button's text. */
+	label = this.useChange(jlText("showMore"), (value) => this._refs.button.label.set(value), { attribute: "label" });
+	/** What shows beside it; `{shown}` and `{total}` are filled. */
+	countText = this.useChange(jlText("shownOfTotal"), () => this.render(), { attribute: "count-text" });
+	_refs = this.useRefs((ref) => ({
+		button: ref(JlButton),
+		count: ref(".count")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("div", {
+			class: "more",
+			attrs: { part: "base" },
+			children: [/* @__PURE__ */ jsx("span", {
+				class: "count",
+				"aria-live": "polite"
+			}), /* @__PURE__ */ jsx(JlButton, { size: "sm" })]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_load_more_default}`;
+	}
+	onConnect() {
+		this._refs.button.events.register("press", () => {
+			if (!this.loading.get()) this.events.emit("more");
+		});
+	}
+	render() {
+		const locale = pageLocale();
+		const shown = this.shown.get();
+		const total = this.total.get();
+		this._refs.count.textContent = fillText(this.countText.get(), {
+			shown: shown.toLocaleString(locale),
+			total: total.toLocaleString(locale)
+		});
+		this.reflect("complete", shown >= total);
+	}
+};
+JlLoadMore.register();
+export { JlLoadMore };

package/dist/molecules/jl-load-state.d.ts

@@ -49,9 +49,12 @@ export declare class JlLoadState extends JlElement {
     /**
      * Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
      * (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
-     * worked: a refresh that fails says so only here, for the page to tell people.
+     * worked: a refresh that fails says so only here, for the page to tell people. A load overtaken by a later one
+     * (a search typed on, a poll during a reload) draws nothing and resolves true: the later one decides.
      */
     load<Value>(task: LoadTask<Value>): Promise<boolean>;
+    /** Whether data is shown (the content or the empty state), which a refresh keeps. */
+    private isShowing;
     templateHtml(): Node;
     templateCss(): string;
     onConnect(): void;

package/dist/molecules/jl-load-state.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
 import { define } from "../lib/define.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { JlButton } from "../atoms/jl-button.js";
 import { JlSkeleton } from "../atoms/jl-skeleton.js";
 import { JlEmpty } from "./jl-empty.js";
@@ -28,8 +29,6 @@ var LOAD_SKELETONS = [
 	"lines"
 ];
 var DEFAULT_ERROR_HEADING = "This could not be loaded";
-var DEFAULT_ERROR_TEXT = "Check the connection, then try again. Nothing was changed.";
-var DEFAULT_RETRY_LABEL = "Try again";
 var DEFAULT_DELAY_MS = 300;
 var MAX_DELAY_MS = 5e3;
 var DEFAULT_COUNT = 3;
@@ -95,36 +94,45 @@ var JlLoadState = class extends JlElement {
 		parse: clampedNumber(DEFAULT_DELAY_MS, 0, MAX_DELAY_MS)
 	});
 	errorHeading = this.useChange(DEFAULT_ERROR_HEADING, (value) => this._refs.error.heading.set(value), { attribute: "error-heading" });
-	errorText = this.useChange(DEFAULT_ERROR_TEXT, (value) => this._refs.error.description.set(value), { attribute: "error-text" });
-	retryLabel = this.useChange(DEFAULT_RETRY_LABEL, (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
-	_work = {};
+	errorText = this.useChange(jlText("loadStateError"), (value) => this._refs.error.description.set(value), { attribute: "error-text" });
+	retryLabel = this.useChange(jlText("retry"), (value) => this._refs.retry.label.set(value), { attribute: "retry-label" });
+	_work = { latest: 0 };
 	_refs = this.useRefs((ref) => ({
 		bones: ref(".bones"),
 		content: ref(".content"),
 		empty: ref(".empty"),
-		error: ref("jl-empty"),
+		error: ref(JlEmpty),
 		loading: ref(".loading"),
 		retry: ref(".retry")
 	}));
 	/**
 	* Fetches the data and draws it. The first time, and after a failure, the skeleton shows while it comes; later
 	* (a refresh), what is shown stays until the new data is there, and stays too if it fails. Resolves to whether it
-	* worked: a refresh that fails says so only here, for the page to tell people.
+	* worked: a refresh that fails says so only here, for the page to tell people. A load overtaken by a later one
+	* (a search typed on, a poll during a reload) draws nothing and resolves true: the later one decides.
 	*/
 	async load(task) {
+		this._work.latest += 1;
+		const ticket = this._work.latest;
 		this._work.retry = () => this.load(task);
-		const showing = this.state.get() === "ready" || this.state.get() === "empty";
-		if (!showing) this.state.set("loading");
+		if (!this.isShowing()) this.state.set("loading");
 		try {
 			const value = await task.fetch();
+			if (ticket !== this._work.latest) return true;
 			task.draw(value);
 			this.state.set(task.isEmpty?.(value) === true ? "empty" : "ready");
 			return true;
 		} catch {
-			if (!showing) this.state.set("error");
+			if (ticket !== this._work.latest) return true;
+			if (!this.isShowing()) this.state.set("error");
 			return false;
 		}
 	}
+	/** Whether data is shown (the content or the empty state), which a refresh keeps. */
+	isShowing() {
+		const state = this.state.get();
+		return state === "ready" || state === "empty";
+	}
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
 			class: "load-state",
@@ -143,12 +151,12 @@ var JlLoadState = class extends JlElement {
 					class: "error",
 					icon: "circle-alert",
 					heading: DEFAULT_ERROR_HEADING,
-					description: DEFAULT_ERROR_TEXT,
+					description: jlText("loadStateError"),
 					hidden: true,
 					children: /* @__PURE__ */ jsx(JlButton, {
 						class: "retry",
 						icon: "refresh",
-						label: DEFAULT_RETRY_LABEL
+						label: jlText("retry")
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {

package/dist/molecules/jl-menu.js

@@ -2,8 +2,8 @@ import { BASE_STYLES, FLOATING_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { jsonOf, oneOf } from "../lib/attributes.js";
 import { PLACEMENTS, followAnchor } from "../lib/floating.js";
-import { uniqueId } from "../lib/dom.js";
 import { JlIcon } from "../atoms/jl-icon.js";
+import { uniqueId } from "../lib/dom.js";
 import { firstIndex, lastIndex, letterIndex, stepIndex } from "../lib/roving.js";
 import { setTriggerAria } from "../lib/trigger.js";
 import jl_menu_default from "./jl-menu.css_raw.js";