@syware/jlib 0.0.0-stage → 0.1.3

package/dist/organisms/jl-side-nav.js

@@ -0,0 +1,269 @@
+import { BASE_STYLES } from "../styles/shared.js";
+import { JlElement } from "../base/jl-element.js";
+import { jsonOf } from "../lib/attributes.js";
+import { registerIcons } from "../lib/icons.js";
+import { setOrRemove, uniqueId } from "../lib/dom.js";
+import { JlIcon } from "../atoms/jl-icon.js";
+import { findItem, firstLeaf, pathInSections } from "../lib/nav-tree.js";
+import jl_side_nav_default from "./jl-side-nav.css_raw.js";
+import { css } from "@jadis/core";
+import { ChevronRight } from "lucide";
+import { jsx, jsxs } from "@jadis/core/jsx-runtime";
+// src/organisms/jl-side-nav.tsx
+registerIcons({ "chevron-right": ChevronRight });
+var ICON_SIZE = 16;
+var CHEVRON_SIZE = 14;
+var DEFAULT_LABEL = "Main";
+var ROW_SELECTOR = ".item";
+/** A JSON attribute that should hold a list of sections; anything else gives none. */
+var parseSections = (value) => {
+	const parsed = jsonOf([])(value);
+	return Array.isArray(parsed) ? parsed : [];
+};
+var hasChildren = (item) => (item.children?.length ?? 0) > 0;
+/** A row is reachable when no closed list hides it. */
+var isReachable = (row) => row.closest("[hidden]") === null && row.offsetParent !== null;
+/**
+* The navigation of an app, down its side: sections of items with icons, badges and nested items that open with
+* a chevron. `value` is the active item (its parents open to show it); `collapsed` makes it a rail of icons, with
+* the labels as tooltips. Items with an `href` are links; the others fire `select`.
+*/
+var JlSideNav = class extends JlElement {
+	static selector = "jl-side-nav";
+	events = this.useEvents();
+	sections = this.useChange([], () => this.render(), {
+		attribute: "sections",
+		parse: parseSections
+	});
+	/** The id of the active item. */
+	value = this.useChange("", (value) => this.renderActive(value), { attribute: "value" });
+	/** Shows only the icons, in a narrow rail; the labels become tooltips. */
+	collapsed = this.useChange(false, (value) => {
+		this.reflect("collapsed", value);
+		this.render();
+	}, { attribute: "collapsed" });
+	/** The name of the navigation for screen readers. */
+	label = this.useChange(DEFAULT_LABEL, (value) => {
+		this._refs.nav.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	}, { attribute: "label" });
+	_prefix = uniqueId("jl-side-nav");
+	/** The parents people opened, or that hold the active item. */
+	_state = { open: /* @__PURE__ */ new Set() };
+	_refs = this.useRefs((ref) => ({
+		nav: ref("nav"),
+		sections: ref(".sections")
+	}));
+	templateHtml() {
+		return /* @__PURE__ */ jsxs("nav", {
+			attrs: { part: "base" },
+			children: [
+				/* @__PURE__ */ jsx("slot", { name: "header" }),
+				/* @__PURE__ */ jsx("div", { class: "sections" }),
+				/* @__PURE__ */ jsx("slot", { name: "footer" })
+			]
+		});
+	}
+	templateCss() {
+		return css`${BASE_STYLES}${jl_side_nav_default}`;
+	}
+	onConnect() {
+		this.on(this._refs.sections, "click", (event) => this.onClick(event));
+		this.on(this._refs.sections, "keydown", (event) => this.onKey(event));
+	}
+	/** Opens or closes a parent item. */
+	toggleItem(id, force) {
+		if (force ?? !this._state.open.has(id)) this._state.open.add(id);
+		else this._state.open.delete(id);
+		this.whenRendered(() => this.renderOpen());
+	}
+	onClick(event) {
+		const target = event.target;
+		const expander = target.closest(".expander");
+		if (expander !== null) {
+			this.toggleItem(expander.dataset.id ?? "");
+			return;
+		}
+		const row = target.closest(ROW_SELECTOR);
+		const item = findItem(this.sections.get(), row?.dataset.id ?? "");
+		if (item === null) return;
+		if (hasChildren(item) && item.href === void 0 && !this.collapsed.get()) {
+			this.toggleItem(item.id);
+			return;
+		}
+		this.choose(row?.dataset.target ?? item.id);
+	}
+	choose(id) {
+		this.value.set(id);
+		this.events.emit("select", id);
+	}
+	/** Up and Down move between the rows people can see, Right opens a parent, Left closes it or goes up to it. */
+	onKey(event) {
+		const row = event.target.closest(ROW_SELECTOR);
+		if (row === null) return;
+		const rows = [...this._refs.sections.querySelectorAll(ROW_SELECTOR)].filter(isReachable);
+		const index = rows.indexOf(row);
+		const id = row.dataset.id ?? "";
+		const move = (/* @__PURE__ */ new Map([
+			["ArrowDown", () => rows[Math.min(rows.length - 1, index + 1)]?.focus()],
+			["ArrowLeft", () => this.closeOrGoUp(id, row)],
+			["ArrowRight", () => this.openOrGoDown(id, row)],
+			["ArrowUp", () => rows[Math.max(0, index - 1)]?.focus()],
+			["End", () => rows.at(-1)?.focus()],
+			["Home", () => rows[0]?.focus()]
+		])).get(event.key);
+		if (move !== void 0) {
+			event.preventDefault();
+			move();
+		}
+	}
+	openOrGoDown(id, row) {
+		if (row.dataset.parent === void 0 || this.collapsed.get()) return;
+		if (!this._state.open.has(id)) {
+			this.toggleItem(id, true);
+			return;
+		}
+		row.closest("li")?.querySelector(`.children ${ROW_SELECTOR}`)?.focus();
+	}
+	closeOrGoUp(id, row) {
+		if (row.dataset.parent !== void 0 && this._state.open.has(id)) {
+			this.toggleItem(id, false);
+			return;
+		}
+		row.closest(".children")?.closest("li")?.querySelector(ROW_SELECTOR)?.focus();
+	}
+	render() {
+		for (const id of pathInSections(this.sections.get(), this.value.get()).slice(0, -1)) this._state.open.add(id);
+		this._refs.sections.replaceChildren(...this.sections.get().map((section, index) => this.sectionNode(section, index)));
+		this.renderOpen();
+		this.renderActive(this.value.get());
+	}
+	sectionNode(section, index) {
+		const headingId = `${this._prefix}-section-${index}`;
+		const label = section.label ?? "";
+		return /* @__PURE__ */ jsxs("div", {
+			class: "section",
+			children: [label === "" ? null : /* @__PURE__ */ jsx("p", {
+				class: "section-label",
+				id: headingId,
+				children: label
+			}), /* @__PURE__ */ jsx("ul", {
+				class: "items",
+				role: "list",
+				"aria-labelledby": label === "" ? void 0 : headingId,
+				children: section.items.map((item) => this.itemNode(item, 0))
+			})]
+		});
+	}
+	itemNode(item, depth) {
+		const parent = hasChildren(item);
+		const childrenId = `${this._prefix}-${item.id}-children`;
+		return /* @__PURE__ */ jsxs("li", {
+			class: "entry",
+			children: [
+				this.rowNode(item, depth, childrenId),
+				parent && item.href !== void 0 && !this.collapsed.get() ? /* @__PURE__ */ jsx("button", {
+					class: "expander",
+					type: "button",
+					"data-id": item.id,
+					"aria-label": `Show the pages of ${item.label}`,
+					"aria-controls": childrenId,
+					children: /* @__PURE__ */ jsx(JlIcon, {
+						name: "chevron-right",
+						size: CHEVRON_SIZE
+					})
+				}) : null,
+				parent ? /* @__PURE__ */ jsx("ul", {
+					class: "children",
+					id: childrenId,
+					role: "list",
+					hidden: true,
+					children: (item.children ?? []).map((child) => this.itemNode(child, depth + 1))
+				}) : null
+			]
+		});
+	}
+	/**
+	* The row of an item: a link when it has an `href`, otherwise a button. In the rail, a parent leads to its first
+	* leaf, since its children cannot show there.
+	*/
+	rowNode(item, depth, childrenId) {
+		const collapsed = this.collapsed.get();
+		const parent = hasChildren(item);
+		const target = collapsed ? firstLeaf(item) : item;
+		const toggles = parent && item.href === void 0 && !collapsed;
+		const content = this.rowContent(item, toggles);
+		const attributes = {
+			class: "item",
+			"data-depth": String(depth),
+			"data-id": item.id,
+			"data-parent": parent ? "" : void 0,
+			"data-target": target.id,
+			title: collapsed ? item.label : void 0
+		};
+		if (target.href !== void 0) return /* @__PURE__ */ jsx("a", {
+			href: target.href,
+			...attributes,
+			children: content
+		});
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-expanded": toggles ? "false" : void 0,
+			"aria-controls": toggles ? childrenId : void 0,
+			...attributes,
+			children: content
+		});
+	}
+	rowContent(item, toggles) {
+		const badge = item.badge === void 0 ? "" : String(item.badge);
+		return [
+			item.icon === void 0 ? /* @__PURE__ */ jsx("span", {
+				class: "item-initial",
+				"aria-hidden": "true",
+				children: item.label.charAt(0)
+			}) : /* @__PURE__ */ jsx(JlIcon, {
+				class: "item-icon",
+				name: item.icon,
+				size: ICON_SIZE
+			}),
+			/* @__PURE__ */ jsx("span", {
+				class: "item-label",
+				children: item.label
+			}),
+			badge === "" ? null : /* @__PURE__ */ jsx("span", {
+				class: "item-badge",
+				children: badge
+			}),
+			toggles ? /* @__PURE__ */ jsx(JlIcon, {
+				class: "chevron",
+				name: "chevron-right",
+				size: CHEVRON_SIZE
+			}) : null
+		].filter((node) => node !== null);
+	}
+	/** Shows the children of open parents, and says so on their chevrons. */
+	renderOpen() {
+		for (const list of this._refs.sections.querySelectorAll(".children")) {
+			const entry = list.closest("li");
+			const id = (entry?.querySelector(ROW_SELECTOR))?.dataset.id ?? "";
+			const open = this._state.open.has(id);
+			list.hidden = !open;
+			entry?.classList.toggle("open", open);
+			for (const control of entry?.querySelectorAll(`[aria-controls="${list.id}"]`) ?? []) control.setAttribute("aria-expanded", String(open));
+		}
+	}
+	/** Marks the active row, and the parents above it; opens them so it shows. */
+	renderActive(value) {
+		const path = pathInSections(this.sections.get(), value);
+		const opened = path.slice(0, -1).filter((id) => !this._state.open.has(id));
+		for (const id of opened) this._state.open.add(id);
+		if (opened.length > 0) this.renderOpen();
+		for (const row of this._refs.sections.querySelectorAll(ROW_SELECTOR)) {
+			const id = row.dataset.id ?? "";
+			const active = id === value || this.collapsed.get() && row.dataset.target === value;
+			setOrRemove(row, "aria-current", active ? "page" : "");
+			row.classList.toggle("holds-active", !active && path.includes(id));
+		}
+	}
+};
+JlSideNav.register();
+export { JlSideNav };

package/dist/organisms/jl-table.css_raw.js

@@ -0,0 +1,3 @@
+// src/organisms/jl-table.css?raw
+var jl_table_default = ":host {\n  display: block;\n  /* The table scrolls sideways inside its frame: its width never pushes the page, or a grid around it, wider. */\n  contain: inline-size;\n  --max-height: none;\n  --cell-y: 10px;\n  --cell-x: 14px;\n}\n\n:host([dense]) {\n  --cell-y: 6px;\n  --cell-x: 12px;\n}\n\n.scroll {\n  max-height: var(--max-height);\n  overflow: auto;\n  border: 1px solid var(--jl-line);\n  border-radius: var(--jl-radius);\n  background: var(--jl-surface);\n  overscroll-behavior-x: contain;\n}\n\ntable {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n  color: var(--jl-text);\n  font-size: var(--jl-font-md);\n  line-height: 20px;\n}\n\nth,\ntd {\n  padding: var(--cell-y) var(--cell-x);\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\nth {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  border-bottom: 1px solid var(--jl-line);\n  background: var(--jl-surface-2);\n  color: var(--jl-muted);\n  font-size: var(--jl-font-xs);\n  font-weight: 600;\n  letter-spacing: 0.01em;\n  text-align: left;\n}\n\ntd {\n  border-top: 1px solid var(--jl-line-soft);\n}\n\ntbody tr:first-child td {\n  border-top: none;\n}\n\ntbody tr.empty td {\n  padding: 40px var(--cell-x);\n  color: var(--jl-muted);\n  text-align: center;\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.sort {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin: -2px -4px;\n  padding: 2px 4px;\n  border: none;\n  border-radius: var(--jl-radius-xs);\n  background: none;\n  color: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n\n.sort:hover {\n  color: var(--jl-text);\n}\n\n.sort-icon {\n  color: var(--jl-faint);\n}\n\nth[data-sorted] {\n  color: var(--jl-text);\n}\n\nth[data-sorted] .sort-icon {\n  color: var(--jl-accent);\n}\n\n/* Selected rows keep their shade: the hover and the stripes leave them alone. */\ntbody tr[data-selected] td {\n  background: var(--jl-accent-soft);\n}\n\ntbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:nth-child(even):not(.empty, [data-selected]) td {\n  background: var(--jl-surface-2);\n}\n\n:host([striped]) tbody tr:not(.empty, .skeleton, [data-selected]):hover td {\n  background: var(--jl-surface-3);\n}\n\n.format-number {\n  font-variant-numeric: tabular-nums;\n}\n\n.format-date {\n  color: var(--jl-text-2);\n  font-variant-numeric: tabular-nums;\n}\n\ncode {\n  padding: 2px 6px;\n  border-radius: var(--jl-radius-xs);\n  background: var(--jl-code-bg);\n  font-size: var(--jl-font-xs);\n}\n\n.select-cell {\n  width: 44px;\n  padding-right: 0;\n  line-height: 0;\n}\n\n/* The checkbox: the native input keeps the keyboard and the states, the mark beside it draws the tick. */\n.check {\n  position: relative;\n  display: inline-flex;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  margin: 0;\n  border: 1.5px solid var(--jl-line-strong);\n  border-radius: 4px;\n  background: var(--jl-surface);\n  cursor: pointer;\n  appearance: none;\n  transition:\n    background var(--jl-fast) var(--jl-ease),\n    border-color var(--jl-fast) var(--jl-ease);\n}\n\n.checkbox:hover {\n  border-color: var(--jl-muted);\n}\n\n.checkbox:checked,\n.checkbox:indeterminate {\n  border-color: var(--jl-accent);\n  background: var(--jl-accent);\n}\n\n.checkbox:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.mark {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.checkbox:checked + .mark::after {\n  position: absolute;\n  top: 2.5px;\n  left: 5.5px;\n  width: 5px;\n  height: 9px;\n  border: solid var(--jl-on-accent);\n  border-width: 0 2px 2px 0;\n  rotate: 45deg;\n  content: \"\";\n}\n\n.checkbox:indeterminate + .mark::after {\n  position: absolute;\n  top: 7px;\n  right: 4px;\n  left: 4px;\n  height: 2px;\n  border-radius: 1px;\n  background: var(--jl-on-accent);\n  content: \"\";\n}\n\n.empty-content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty jl-icon {\n  color: var(--jl-faint);\n}\n\n.bone {\n  display: inline-block;\n  width: 70%;\n  max-width: 160px;\n  height: 10px;\n  border-radius: var(--jl-radius-pill);\n  background:\n    linear-gradient(90deg, var(--jl-surface-3) 30%, var(--jl-surface-2) 50%, var(--jl-surface-3) 70%) 0 0 / 300%\n    100%;\n  vertical-align: middle;\n  animation: shimmer 1.4s linear infinite;\n}\n\n.bone.box {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n}\n\ntbody tr.skeleton:nth-child(3n + 2) .bone:not(.box) {\n  width: 50%;\n}\n\ntbody tr.skeleton:nth-child(3n) .bone:not(.box) {\n  width: 85%;\n}\n\n/* Shortened to a millisecond by the base styles, an endless shimmer would flicker: it stands still instead. */\n@media (prefers-reduced-motion: reduce) {\n  .bone {\n    animation: none;\n  }\n}\n\n@keyframes shimmer {\n  from {\n    background-position: 100% 0;\n  }\n\n  to {\n    background-position: 0 0;\n  }\n}\n";
+export { jl_table_default as default };

package/dist/organisms/jl-table.d.ts

@@ -0,0 +1,109 @@
+import { JlElement } from '../base/jl-element';
+import type { TableCellRenderer, TableColumn, TableRow, TableRowKey, TableSort, TableSortDirection } from '../types/jl-table.types';
+export declare const TABLE_SORT_DIRECTIONS: readonly TableSortDirection[];
+/**
+ * Rows of data under column headings. `columns` say what each column shows and how (`format`: text, number, date,
+ * badge, code); `rows` are plain objects. Sortable headings cycle ascending, descending and unsorted, and sort the
+ * rows in place; `selectable` adds a checkbox column. The header stays on top while the rows scroll within
+ * `max-height`, and the table scrolls sideways on narrow screens. Cells of a column can be drawn by code with
+ * `renderers`.
+ */
+export declare class JlTable extends JlElement {
+    static readonly selector = "jl-table";
+    readonly events: Readonly<import("@jadis/core").UseEventsHandler<{
+        sort: TableSort;
+        selection: TableRowKey[];
+    }>>;
+    readonly columns: Readonly<Readonly<{
+        get(): TableColumn[];
+        set(setter: TableColumn[] | ((prevState: TableColumn[]) => TableColumn[])): void;
+    }>>;
+    readonly rows: Readonly<Readonly<{
+        get(): TableRow[];
+        set(setter: TableRow[] | ((prevState: TableRow[]) => TableRow[])): void;
+    }>>;
+    /** The field that tells rows apart, for the selection. */
+    readonly rowKey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** The column the rows are sorted by. */
+    readonly sortKey: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    readonly sortDirection: Readonly<Readonly<{
+        get(): TableSortDirection;
+        set(setter: ((prevState: TableSortDirection) => TableSortDirection) | TableSortDirection): void;
+    }>>;
+    /** Adds a checkbox to each row, and one in the header that selects them all. */
+    readonly selectable: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The keys of the selected rows. */
+    readonly selected: Readonly<Readonly<{
+        get(): TableRowKey[];
+        set(setter: TableRowKey[] | ((prevState: TableRowKey[]) => TableRowKey[])): void;
+    }>>;
+    /** Shorter rows, for long lists. */
+    readonly dense: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** Shades every other row. */
+    readonly striped: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** A CSS height past which the rows scroll under the header: `320px`, `50vh`; a number is pixels. */
+    readonly maxHeight: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** What the table says when it has no rows. */
+    readonly emptyText: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Shows placeholder rows while the data loads. */
+    readonly loading: Readonly<Readonly<{
+        get(): boolean;
+        set(setter: boolean | ((prevState: boolean) => boolean)): void;
+    }>>;
+    /** The table's name for screen readers. */
+    readonly label: Readonly<Readonly<{
+        get(): string;
+        set(setter: string | ((prevState: string) => string)): void;
+    }>>;
+    /** Draws the cells of some columns by code, by column key: `{ name: (row) => <strong>{row.name}</strong> }`. */
+    readonly renderers: Readonly<Readonly<{
+        get(): Record<string, TableCellRenderer>;
+        set(setter: Record<string, TableCellRenderer> | ((prevState: Record<string, TableCellRenderer>) => Record<string, TableCellRenderer>)): void;
+    }>>;
+    private readonly _pending;
+    /** The keys of the rows as drawn, by their place: the checkboxes carry the place. */
+    private readonly _view;
+    private readonly _refs;
+    templateHtml(): Node;
+    templateCss(): string;
+    onConnect(): void;
+    /** Draws on the next microtask: the inputs set while connecting give one drawing, not one each. */
+    private schedule;
+    private flush;
+    private sortBy;
+    private changeSelection;
+    private renderMaxHeight;
+    private renderHead;
+    private headerCell;
+    /** The arrows and `aria-sort` of the headings, changed in place so a pressed heading keeps the focus. */
+    private renderSortState;
+    private sortedRows;
+    private renderBody;
+    private bodyRow;
+    private cell;
+    private skeletonRows;
+    private emptyRow;
+    /** The checkboxes and the shading of selected rows, changed in place. */
+    private renderSelection;
+}