@cssints/apg-specs 0.0.0-stage → 0.5.1

package/dist/apg/grid-sort.bridge.d.mts

@@ -0,0 +1,12 @@
+import { ActionStep, Probe, ScenarioConfig, SpecBridge } from "../scenario.mjs";
+import { GridConfig } from "./grid.bridge.mjs";
+//#region src/apg/grid-sort.bridge.d.ts
+/**
+ * `grid-sort.qnt`: the header row of a sortable data grid. Mounts `createGrid`
+ * with `sortEnabled: true`; reads `aria-sort` and the header roving tabindex.
+ */
+export declare const gridSortConfig: (config: ScenarioConfig) => GridConfig;
+export declare const gridSortBridge: SpecBridge;
+export declare const gridSortSteps: ReadonlyArray<ActionStep>;
+export declare const gridSortProbe: Probe;
+//#endregion

package/dist/apg/grid-sort.bridge.mjs

@@ -0,0 +1,138 @@
+import { Unsupported } from "../scenario.mjs";
+import { isSortValue, normalizeGridConfig } from "./grid.bridge.mjs";
+//#region src/apg/grid-sort.bridge.ts
+const specEvent = (tag, params = {}) => ({
+	_tag: tag,
+	...params
+});
+const num = (value) => Number(value ?? 0);
+/** The sort spec's fixed header row (`grid-sort.qnt`). */
+const SORT_COLS = 3;
+/** Columns 0 and 2 sort; column 1 does not (`sortable`). */
+const sortable = (col) => col !== 1;
+/**
+* `grid-sort.qnt`: the header row of a sortable data grid. Mounts `createGrid`
+* with `sortEnabled: true`; reads `aria-sort` and the header roving tabindex.
+*/
+const gridSortConfig = (config) => normalizeGridConfig(config, { sortEnabled: true });
+const HEADER = /^header:(\d+)$/;
+const headerOf = (target) => {
+	const match = HEADER.exec(target ?? "");
+	if (match === null) throw new Unsupported(`target ${target ?? ""}`);
+	return Number(match[1]);
+};
+const SORT_KEYS = /* @__PURE__ */ new Set([
+	"ArrowRight",
+	"ArrowLeft",
+	"Home",
+	"End",
+	"Enter",
+	"Space"
+]);
+/** The DOM reports the space bar as `" "`, the spec as `"Space"`. */
+const canonicalKey = (key) => key === " " ? "Space" : key ?? "";
+const gridSortBridge = {
+	setup: (config) => {
+		const value = gridSortConfig(config);
+		const events = value.sortEnabled ? [] : [specEvent("set_sort_enabled", { flag: false })];
+		if (value.sortControlled) {
+			events.push(specEvent("control"));
+			const initial = value.sortValue ?? -1;
+			if (initial !== -1) events.push(specEvent("setValue", { v: BigInt(initial) }));
+			if (value.sortAccepts) events.push(specEvent("acceptRequests"));
+		}
+		return events;
+	},
+	event: (step) => {
+		switch (step.event) {
+			case "focus":
+				if (step.target === void 0 || step.target === "grid") return [specEvent("focus_in")];
+				throw new Unsupported(`focus ${step.target}`);
+			case "blur": return [specEvent("focus_out")];
+			case "click": return [specEvent("click", { column: BigInt(headerOf(step.target)) })];
+			case "key": {
+				const key = canonicalKey(step.key);
+				if (!SORT_KEYS.has(key)) throw new Unsupported(`key ${step.key ?? ""}`);
+				return [specEvent("key", { key })];
+			}
+			case "hover":
+			case "unhover": return [];
+			case "prop":
+				if (step.prop === "sortEnabled") return [specEvent("set_sort_enabled", { flag: step.value === true })];
+				if (step.prop === "setValue") {
+					if (typeof step.value !== "number" || !isSortValue(step.value)) throw new Unsupported(`prop setValue=${JSON.stringify(step.value)}`);
+					return [specEvent("setValue", { v: BigInt(step.value) })];
+				}
+				if (step.prop === "hostToggle") return [specEvent("hostToggle")];
+				throw new Unsupported(`prop ${step.prop ?? ""}`);
+			default: throw new Unsupported(`event ${step.event}`);
+		}
+	},
+	focus: (state) => state["hasFocus"] === true ? `header:${num(state["headerCol"])}` : null,
+	attr: (state, target, name) => {
+		const col = headerOf(target);
+		if (name === "aria-sort") {
+			if (state["sortEnabled"] !== true || !sortable(col)) return null;
+			if (col !== num(state["sortCol"])) return "none";
+			return String(state["sortDir"]);
+		}
+		if (name === "tabindex") return col === num(state["headerCol"]) ? "0" : "-1";
+		throw new Unsupported(`attribute ${name} on ${target}`);
+	},
+	visible: () => [],
+	events: (before, after) => before["requests"] === after["requests"] ? [] : [["onValueChange", Number(after["requested"])]]
+};
+const gridSortSteps = [
+	...Array.from({ length: SORT_COLS }, (_, col) => ({
+		event: "click",
+		target: `header:${col}`
+	})),
+	...[
+		"ArrowRight",
+		"ArrowLeft",
+		"Home",
+		"End",
+		"Enter",
+		" "
+	].map((key) => ({
+		event: "key",
+		key,
+		target: "grid"
+	})),
+	{
+		event: "blur",
+		target: "grid"
+	},
+	{
+		event: "prop",
+		prop: "sortEnabled",
+		value: false
+	},
+	{
+		event: "prop",
+		prop: "sortEnabled",
+		value: true
+	},
+	{
+		event: "prop",
+		prop: "setValue",
+		value: 4
+	},
+	{
+		event: "prop",
+		prop: "setValue",
+		value: -1
+	},
+	{
+		event: "prop",
+		prop: "hostToggle"
+	}
+];
+const gridSortProbe = {
+	attrs: Array.from({ length: SORT_COLS }, (_, col) => {
+		return [[`header:${col}`, "tabindex"], [`header:${col}`, "aria-sort"]];
+	}).flat(),
+	events: ["onValueChange"]
+};
+//#endregion
+export { gridSortBridge, gridSortConfig, gridSortProbe, gridSortSteps };