@schukai/monster 4.148.8 → 4.149.0

package/test/cases/components/content/image-editor.mjs

@@ -1,5 +1,6 @@
 'use strict';
 
+import {readFileSync} from "node:fs";
 import * as chai from 'chai';
 import {getDocument} from "../../../../source/dom/util.mjs";
 import {chaiDom} from "../../../util/chai-dom.mjs";
@@ -90,4 +91,22 @@ describe('ImageEditor', function () {
             }
         }, 20);
     });
+
+    it('keeps narrow split-panel form controls in full-width field rows', function () {
+        const source = readFileSync(
+            new URL(
+                "../../../../source/components/content/image-editor.mjs",
+                import.meta.url,
+            ),
+            "utf8",
+        );
+
+        expect(source).to.include(".image-editor-field");
+        expect(source).to.include(
+            '<label class="grid-span-full image-editor-field">',
+        );
+        expect(source).to.include(
+            '<monster-button-bar class="grid-span-full monster-margin-top-2">',
+        );
+    });
 });

package/test/cases/components/datatable/accessibility-defaults.mjs

@@ -0,0 +1,112 @@
+import * as chai from "chai";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const { expect } = chai;
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+
+describe("Datatable accessibility defaults", function () {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+		const global = getGlobal();
+		global.ResizeObserver ??= ResizeObserverMock;
+		await Promise.all([
+			import("../../../../source/components/datatable/filter/date-range.mjs"),
+			import("../../../../source/components/datatable/filter/date-time.mjs"),
+			import("../../../../source/components/datatable/filter/range.mjs"),
+			import(
+				"../../../../source/components/datatable/filter/text-operator.mjs"
+			),
+			import("../../../../source/components/datatable/columnbar.mjs"),
+		]);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	for (const [tag, option, selector] of [
+		[
+			"monster-filter-date-range",
+			"Choose reporting period",
+			'[data-monster-role="input"]',
+		],
+		[
+			"monster-filter-range",
+			"Choose score range",
+			'[data-monster-role="input"]',
+		],
+	]) {
+		it(`should name the ${tag} trigger from labels.button`, async function () {
+			const filter = document.createElement(tag);
+			filter.setOption("labels.button", option);
+			document.getElementById("mocks").append(filter);
+			await nextTask();
+
+			expect(
+				filter.shadowRoot.querySelector(selector).getAttribute("aria-label"),
+			).to.equal(option);
+		});
+	}
+
+	it("should name the date-time query input", async function () {
+		const filter = document.createElement("monster-filter-date-time");
+		filter.setOption("labels.query", "Updated after");
+		document.getElementById("mocks").append(filter);
+		await nextTask();
+
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="query"]')
+				.getAttribute("aria-label"),
+		).to.equal("Updated after");
+	});
+
+	it("should name both text-operator controls", async function () {
+		const filter = document.createElement("monster-filter-text-operator");
+		filter.setOptions({
+			labels: {
+				operator: "Comparison",
+				query: "Search term",
+			},
+		});
+		document.getElementById("mocks").append(filter);
+		await nextTask();
+
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="operator"]')
+				.getAttribute("aria-label"),
+		).to.equal("Comparison");
+		expect(
+			filter.shadowRoot
+				.querySelector('[data-monster-role="query"]')
+				.getAttribute("aria-label"),
+		).to.equal("Search term");
+	});
+
+	it("should render column toggles as named stateful buttons", async function () {
+		const columnBar = document.createElement("monster-column-bar");
+		columnBar.setOption("columns", [
+			{ index: 0, name: "Name", visible: true },
+			{ index: 1, name: "Status", visible: false },
+		]);
+		document.getElementById("mocks").append(columnBar);
+		await nextTask();
+
+		const buttons = [
+			...columnBar.shadowRoot.querySelectorAll(
+				'[data-monster-role="dots"] button[data-monster-role="column"]',
+			),
+		];
+		expect(buttons).to.have.length(2);
+		expect(
+			buttons.map((button) => button.getAttribute("aria-label")),
+		).to.deep.equal(["Name", "Status"]);
+		expect(
+			buttons.map((button) => button.getAttribute("aria-pressed")),
+		).to.deep.equal(["true", "false"]);
+	});
+});

package/test/cases/components/datatable/filter-availability.mjs

@@ -0,0 +1,37 @@
+import { strict as assert } from "node:assert";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+describe("Datatable filter availability", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import("../../../../source/components/datatable/filter.mjs");
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("disables filter actions when no filter definitions exist", async () => {
+		globalThis.name = "";
+		globalThis.location = window.location;
+		const element = document.createElement("monster-datatable-filter");
+		document.getElementById("mocks").append(element);
+		await new Promise((resolve) => setTimeout(resolve, 100));
+
+		for (const role of ["filter-select", "search-button", "reset-button"]) {
+			const control = element.shadowRoot.querySelector(
+				`[data-monster-role="${role}"]`,
+			);
+			assert.equal(control.getOption("disabled"), true, role);
+		}
+	});
+});

package/test/cases/components/datatable/filter-date-range-layout.mjs

@@ -0,0 +1,40 @@
+import { strict as assert } from "node:assert";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+describe("Datatable date-range filter layout", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import(
+			"../../../../source/components/datatable/filter/date-range.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("keeps its fields inside the adaptive popper content area", async () => {
+		const element = document.createElement("monster-filter-date-range");
+		document.getElementById("mocks").append(element);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		const popper = element.shadowRoot.querySelector(
+			'[data-monster-role="popper"]',
+		);
+		const content = popper.querySelector("[part=content]");
+		assert.ok(content);
+
+		const filter = content.querySelector("[part=filter]");
+		assert.ok(filter);
+		assert.ok(filter.querySelector('[data-monster-role="form"]'));
+	});
+});

package/test/cases/components/datatable/filter-select-operator.mjs

@@ -0,0 +1,118 @@
+import { strict as assert } from "node:assert";
+import { readFileSync } from "node:fs";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const filterSelectSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/filter-select.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const filterSelectGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/filter-select.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const waitForUpdates = () =>
+	new Promise((resolve) => {
+		setTimeout(resolve, 300);
+	});
+
+describe("Datatable select operator filter", () => {
+	before(async () => {
+		await initJSDOM();
+		await import("element-internals-polyfill");
+
+		const global = getGlobal();
+		if (!global.ResizeObserver) {
+			global.ResizeObserver = ResizeObserverMock;
+		}
+
+		await import(
+			"../../../../source/components/datatable/filter/select-operator.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("keeps option markers compact after shared form defaults", () => {
+		for (const property of ["height", "min-height", "min-width", "width"]) {
+			assert.match(
+				filterSelectSource,
+				new RegExp(
+					`${property}: var\\(--monster-select-option-control-size, 1rem\\)`,
+					"u",
+				),
+			);
+		}
+		assert.match(
+			filterSelectGenerated,
+			/height:var\(--monster-select-option-control-size,1rem\)/u,
+		);
+		assert.match(
+			filterSelectGenerated,
+			/min-height:var\(--monster-select-option-control-size,1rem\)/u,
+		);
+	});
+
+	it("summarizes multiple selected values inside the fixed-height control", async () => {
+		const element = document.createElement(
+			"monster-filter-select-operator",
+		);
+		const options = [
+			{ value: "ready", label: "Ready" },
+			{ value: "review", label: "Review" },
+			{ value: "blocked", label: "Blocked" },
+			{ value: "progress", label: "In progress" },
+		];
+
+		element.setOptions({
+			select: {
+				options,
+			},
+		});
+		document.getElementById("mocks").append(element);
+		await waitForUpdates();
+		element.selection = options.map(({ value }) => value);
+		await waitForUpdates();
+
+		const select = element.shadowRoot.querySelector(
+			"monster-filter-select",
+		);
+		const summary = select.shadowRoot.querySelector('[part="summary"]');
+
+		assert.equal(
+			select.getAttribute("data-monster-selected-template"),
+			"summary",
+		);
+		assert.ok(summary);
+		assert.equal(
+			select.shadowRoot.querySelectorAll('[data-monster-role="badge"]')
+				.length,
+			0,
+		);
+		assert.match(
+			summary.querySelector('[part="summary-messages"]').textContent,
+			/4/u,
+		);
+		assert.deepEqual(element.selection, [
+			"ready",
+			"review",
+			"blocked",
+			"progress",
+		]);
+		assert.equal(
+			element.value,
+			"one-of:ready,review,blocked,progress",
+		);
+	});
+});

package/test/cases/components/datatable/mobile-layout.mjs

@@ -0,0 +1,203 @@
+import { readFileSync } from "node:fs";
+import { expect } from "chai";
+
+const source = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/datatable.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const generated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/datatable.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const columnBarSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/column-bar.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const columnBarGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/column-bar.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const embeddedPaginationSource = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/style/embedded-pagination.pcss",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+const embeddedPaginationGenerated = readFileSync(
+	new URL(
+		"../../../../source/components/datatable/stylesheet/embedded-pagination.mjs",
+		import.meta.url,
+	),
+	"utf8",
+);
+
+describe("Datatable mobile layout", () => {
+	it("groups responsive cells into readable row cards", () => {
+		expect(source).to.include("[data-monster-datatable-row-start]");
+		expect(source).to.include("[data-monster-datatable-row-end]");
+		expect(source).to.include("grid-template-columns:");
+		expect(source).to.include("content: attr(data-monster-head)");
+	});
+
+	it("gives mobile actions and multiselects the full card width", () => {
+		for (const selector of [
+			"monster-button",
+			"monster-button-bar",
+			"monster-filter-select",
+			"monster-select",
+			"select[multiple]",
+		]) {
+			expect(source).to.include(selector);
+		}
+
+		expect(source).to.include("var(--monster-control-min-block-size, 44px)");
+		expect(source).to.include("var(--monster-bg-color-selection-2)");
+		expect(source).to.include("width: 100%");
+	});
+
+	it("keeps adjoining mobile row actions visually joined", () => {
+		expect(source).to.include("--monster-button-bar-gap: 0");
+		expect(source).not.to.include("--monster-button-bar-gap: 0.5rem");
+		expect(generated).to.include("--monster-button-bar-gap:0");
+		expect(generated).not.to.include("--monster-button-bar-gap:0.5rem");
+	});
+
+	it("stacks labels above values when a responsive card becomes narrow", () => {
+		expect(source).to.include("container-name: monster-datatable-responsive");
+		expect(source).to.include("container-type: inline-size");
+		expect(source).to.include(
+			"@container monster-datatable-responsive (max-width: 26rem)",
+		);
+		expect(source).to.include("max-inline-size: 100%");
+		expect(source).to.include("min-inline-size: 0");
+		expect(source).to.include("grid-template-columns: minmax(0, 1fr)");
+	});
+
+	it("groups narrow toolbar utilities into a compact action cluster", () => {
+		expect(source).to.include('slot[name="bar"]::slotted(*)');
+		expect(source).to.include("flex-flow: row wrap");
+		expect(source).to.include(
+			"--monster-datatable-utility-action-size: 2.25rem",
+		);
+		expect(source).to.include("margin-inline-start: auto");
+		expect(source).to.include("font-size: 0");
+		expect(source).to.include("monster-context-help::part(button)");
+		expect(source).to.include("var(--monster-control-min-block-size, 44px)");
+		expect(columnBarSource).to.include(":host(.small)");
+		expect(columnBarSource).to.include(
+			"--monster-datatable-utility-action-size: 2.25rem",
+		);
+		expect(columnBarSource).to.include("font-size: 0");
+		expect(columnBarSource).to.include("display: none");
+		expect(columnBarSource).to.include("@media (pointer: coarse)");
+		expect(generated).to.include(
+			"--monster-datatable-utility-action-size:2.25rem",
+		);
+		expect(generated).to.include("flex-flow:row wrap");
+		expect(columnBarGenerated).to.include(
+			"--monster-datatable-utility-action-size:2.25rem",
+		);
+		expect(columnBarGenerated).to.include("font-size:0");
+	});
+
+	it("keeps column visibility dots compact and touch friendly", () => {
+		expect(columnBarSource).to.include(
+			"var(--monster-column-toggle-target-size, 16px)",
+		);
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-inline-size",
+		);
+		expect(columnBarSource).to.include(
+			"--monster-column-toggle-target-block-size",
+		);
+		expect(columnBarSource).to.include("& li {");
+		expect(columnBarSource).to.include("margin: 0;");
+		expect(columnBarSource).not.to.include("margin: 0 5px 0 0");
+		expect(columnBarSource).to.include("@media (pointer: coarse)");
+		expect(columnBarSource).to.include("min-width: 24px");
+		expect(columnBarSource).to.include("min-height: 24px");
+		expect(columnBarSource).to.include(
+			"min-height: var(--monster-column-settings-target-size, 24px)",
+		);
+		expect(columnBarGenerated).to.include(
+			"[data-monster-role=dots]) li{list-style:none;padding:0;margin:0;",
+		);
+		expect(columnBarGenerated).not.to.include("margin:0 5px 0 0");
+		expect(columnBarGenerated).to.include(
+			"--monster-column-toggle-target-size,16px",
+		);
+		expect(columnBarGenerated).to.include("@media (pointer:coarse)");
+		expect(columnBarGenerated).to.include("min-width:24px");
+	});
+
+	it("keeps embedded pagination compact and touch friendly", () => {
+		expect(embeddedPaginationSource).to.include("margin: 0");
+		expect(embeddedPaginationSource).to.include("grid-template-columns:");
+		expect(embeddedPaginationSource).to.include(
+			"var(--monster-control-min-block-size, 44px)",
+		);
+		expect(embeddedPaginationSource).to.include("min-width:");
+		expect(embeddedPaginationSource).to.include("&::after");
+		expect(embeddedPaginationSource).to.include(
+			"border: 1px solid var(--monster-theme-control-border-color)",
+		);
+		expect(embeddedPaginationSource).not.to.include(
+			"inset 0 0 0 1px",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"background-color: var(--monster-bg-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationSource).to.include(
+			"color: var(--monster-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationSource).to.include("opacity: 1");
+		expect(embeddedPaginationSource).not.to.include("@mixin viewport-7");
+	});
+
+	it("ships the generated responsive card styles", () => {
+		expect(generated).to.include("data-monster-datatable-row-start");
+		expect(generated).to.include("data-monster-datatable-row-end");
+		expect(generated).to.include("monster-filter-select");
+		expect(generated).to.include("container-name:monster-datatable-responsive");
+		expect(generated).to.include("container-type:inline-size");
+		expect(generated).to.include(
+			"@container monster-datatable-responsive (max-width: 26rem)",
+		);
+		expect(generated).to.include("slot[name=bar]::slotted(*)");
+		expect(generated).to.include("monster-context-help::part(button)");
+		expect(embeddedPaginationGenerated).to.include(
+			"grid-template-columns:var(--monster-control-min-block-size,44px)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"min-height:var(--monster-control-min-block-size,44px)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"border:1px solid var(--monster-theme-control-border-color)",
+		);
+		expect(embeddedPaginationGenerated).to.include(
+			"background-color:var(--monster-bg-color-primary-disabled-1)",
+		);
+		expect(embeddedPaginationGenerated).to.include("opacity:1");
+		expect(embeddedPaginationGenerated).not.to.include(
+			"box-shadow:inset 0 0 0 1px",
+		);
+	});
+});

package/test/cases/components/datatable/responsive-breakpoint.mjs

@@ -0,0 +1,41 @@
+import { expect } from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+const nextTask = () => new Promise((resolve) => setTimeout(resolve, 0));
+let declarativeBreakpoint;
+
+describe("Datatable responsive breakpoint", function () {
+	before(async function () {
+		await initJSDOM();
+		await import("element-internals-polyfill").catch(() => {});
+		globalThis.ResizeObserver ??= ResizeObserverMock;
+
+		document.getElementById("mocks").innerHTML = `
+			<monster-datatable
+				data-monster-responsive-breakpoint="720"
+			></monster-datatable>
+		`;
+		await import("../../../../source/components/datatable/datatable.mjs");
+		await nextTask();
+
+		declarativeBreakpoint = document
+			.querySelector("monster-datatable")
+			.getOption("responsive.breakpoint");
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	afterEach(function () {
+		document.getElementById("mocks").replaceChildren();
+	});
+
+	it("uses 960px as the default responsive threshold", function () {
+		const datatable = document.createElement("monster-datatable");
+
+		expect(datatable.getOption("responsive.breakpoint")).to.equal(960);
+	});
+
+	it("keeps the responsive breakpoint attribute as an explicit override", function () {
+		expect(declarativeBreakpoint).to.equal(720);
+	});
+});