diff --git a/CHANGELOG.md b/CHANGELOG.md index 8526076c5..0ecd933ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ - Added a `toast` component with plain-text or Markdown content, icons, colors, six screen placements, configurable auto-dismiss timing, optional manual dismissal, URL-fragment triggers, and automatic stacking of queued notifications. - `sqlpage.send_mail` now supports rich email bodies. Use `body_html` for a caller-provided HTML alternative, or `body_md` to render Markdown as HTML. Messages retain a plain-text alternative; `body` may be omitted when `body_md` is used, and `body_md` and `body_html` cannot be combined. - Form `options_source` URLs now preserve existing query parameters when adding the dynamic `search` parameter. + - Map coordinates that are not a pair of numbers, like a latitude with no longitude, are now ignored instead of breaking the whole map. + - Screen readers now announce the title of the modal component instead of an unnamed dialog. ## v0.45 diff --git a/biome.json b/biome.json index 874cb3e21..3ffd84277 100644 --- a/biome.json +++ b/biome.json @@ -6,7 +6,8 @@ "!**/*.svg", "!examples/official-site/pgconf", "!tests/end-to-end/test-results", - "!.zed/*.json" + "!.zed/*.json", + "!.claude/*.json" ], "ignoreUnknown": true }, diff --git a/examples/CRUD - Authentication/www/css/style.css b/examples/CRUD - Authentication/www/css/style.css index a6bace37d..e34f5f082 100644 --- a/examples/CRUD - Authentication/www/css/style.css +++ b/examples/CRUD - Authentication/www/css/style.css @@ -1,9 +1,9 @@ .menu_options_slim { - min-width: inherit !important; + min-width: inherit; } .menu_language_slim { - min-width: inherit !important; + min-width: inherit; } .menu_language { @@ -11,13 +11,13 @@ } div.dropdown-menu- { - min-width: inherit !important; + min-width: inherit; } a.dropdown-item- { - min-width: inherit !important; + min-width: inherit; } .slim_item { - min-width: inherit !important; + min-width: inherit; } diff --git a/examples/official-site/assets/highlightjs-and-tabler-theme.css b/examples/official-site/assets/highlightjs-and-tabler-theme.css index e7d72eb0f..24064eacf 100644 --- a/examples/official-site/assets/highlightjs-and-tabler-theme.css +++ b/examples/official-site/assets/highlightjs-and-tabler-theme.css @@ -60,8 +60,8 @@ --tblr-red: var(--tblr-danger); /* Luminous links */ - --tblr-link-color: hsl(212, 70%, 75%) !important; /* Star glow */ - --tblr-link-hover-color: hsl(212, 70%, 85%) !important; /* Supernova */ + --tblr-link-color: hsl(212, 70%, 75%); /* Star glow */ + --tblr-link-hover-color: hsl(212, 70%, 85%); /* Supernova */ --tblr-carousel-caption-color: var(--tblr-muted-color); /* Ethereal shadows */ @@ -241,7 +241,8 @@ pre:has(code) { @media print { pre:has(code) { + /* biome-ignore lint/complexity/noImportantStyles: .markdown pre is more specific and caps the height at 20rem */ max-height: none !important; - box-shadow: none !important; + box-shadow: none; } } diff --git a/examples/rich-text-editor/rich_text_editor.js b/examples/rich-text-editor/rich_text_editor.js index 335933430..3a12aa4bd 100644 --- a/examples/rich-text-editor/rich_text_editor.js +++ b/examples/rich-text-editor/rich_text_editor.js @@ -141,7 +141,7 @@ function markdownToDelta(markdown) { */ function mdastToDelta(tree) { const delta = { ops: [] }; - if (!tree || !tree.children) return delta; + if (!tree?.children) return delta; for (const node of tree.children) { traverseMdastNode(node, delta); @@ -230,7 +230,6 @@ function traverseMdastNode(node, delta, attributes = {}) { break; case "listItem": { - // biome-ignore lint/correctness/noUnusedVariables: object destructuring with a spread const { list, ...listItemChildrenAttributes } = attributes; for (const child of node.children || []) { diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css index f1c32cdd3..a6e0b769a 100644 --- a/sqlpage/sqlpage.css +++ b/sqlpage/sqlpage.css @@ -19,6 +19,7 @@ td > p { /** Removes the margin-bottom from the last element */ .remove-bottom-margin > :last-child { + /* biome-ignore lint/complexity/noImportantStyles: the last child is often a tabler spacing utility such as .my-2, which is itself !important */ margin-bottom: 0 !important; } @@ -29,7 +30,7 @@ td > p { /* orchidjs/tom-select#712 */ .ts-wrapper.multi .ts-control > div.active { - border: 1px solid transparent !important; + border: 1px solid transparent; } /* remove the ugly text highlight in the default tom-select */ @@ -55,7 +56,7 @@ code { .apexcharts-text, .apexcharts-datalabel { - fill: var(--tblr-body-color) !important; + fill: var(--tblr-body-color); font-weight: var(--tblr-body-font-weight); } @@ -117,6 +118,7 @@ li p { } .leaflet-container { + /* biome-ignore lint/complexity/noImportantStyles: leaflet's stylesheet is injected after this one, at the same specificity */ background: var(--tblr-active-bg) !important; } @@ -189,7 +191,7 @@ See https://github.com/tabler/tabler/issues/2404 } .text-black-fg { - color: var(--tblr-dark-fg) !important; + color: var(--tblr-dark-fg); } .toast-colored .toast-description a { diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js index 82e26f649..d029ef237 100644 --- a/sqlpage/sqlpage.js +++ b/sqlpage/sqlpage.js @@ -182,12 +182,14 @@ function sqlpage_map() { onLeafletLoad(); } /** - * * @param {string|undefined} coords * @returns {[number, number] | undefined} */ function parseCoords(coords) { - return coords?.split(",", 2).map((c) => Number.parseFloat(c)); + const parsed = coords?.split(",", 2).map((c) => Number.parseFloat(c)); + if (parsed?.length !== 2 || !parsed.every(Number.isFinite)) + return undefined; + return [parsed[0], parsed[1]]; } function onLeafletLoad() { is_leaflet_loaded = true; @@ -230,6 +232,7 @@ function sqlpage_map() { const marker = dataset.coords ? createMarker(marker_elem, options) : createGeoJSONMarker(marker_elem, options); + if (!marker) return; marker.addTo(map); map._sqlpage_markers.push(marker); if (marker_elem.textContent.trim()) marker.bindPopup(marker_elem); @@ -241,6 +244,7 @@ function sqlpage_map() { } function createMarker(marker_elem, options) { const coords = parseCoords(marker_elem.dataset.coords); + if (!coords) return undefined; const icon_obj = marker_elem.getElementsByClassName("mapicon")[0]; if (icon_obj) { const size = @@ -441,7 +445,7 @@ function open_modal_for_hash() { const hash = window.location.hash.substring(1); if (!hash) return; const modal = document.getElementById(hash); - if (!modal || !modal.classList.contains("modal")) return; + if (!modal?.classList.contains("modal")) return; const bootstrap_modal = window.tabler.bootstrap.Modal.getOrCreateInstance(modal); bootstrap_modal.show(); diff --git a/sqlpage/templates/modal.handlebars b/sqlpage/templates/modal.handlebars index 8b13ba2ee..c2ce2a763 100644 --- a/sqlpage/templates/modal.handlebars +++ b/sqlpage/templates/modal.handlebars @@ -2,11 +2,11 @@ id="{{id}}" tabindex="-1" aria-hidden="false" - aria-labelledby="{{title}}"> + aria-labelledby="{{id}}-title">
-
{{title}}
+
diff --git a/tests/end-to-end/map-component.spec.ts b/tests/end-to-end/map-component.spec.ts new file mode 100644 index 000000000..f0265efaf --- /dev/null +++ b/tests/end-to-end/map-component.spec.ts @@ -0,0 +1,99 @@ +import { expect, type Page, test } from "@playwright/test"; + +const BASE = process.env.SQLPAGE_TEST_BASE ?? "http://localhost:8080/"; + +declare global { + function sqlpage_map(): void; +} + +type Marker = { coords?: string; title: string }; + +const PARIS = "48.85,2.35"; +const PARIS_WITHOUT_ITS_LONGITUDE = "48.85,"; +const NOT_COORDINATES = "somewhere nice"; + +async function renderMap( + page: Page, + center: string | null, + markers: Marker[] = [], +) { + return page.evaluate( + async ({ center, markers }) => { + document.getElementById("test-map")?.remove(); + const container = document.createElement("div"); + container.id = "test-map"; + container.className = "leaflet"; + container.style.height = "200px"; + container.dataset.zoom = "5"; + container.dataset.max_zoom = "18"; + if (center !== null) container.dataset.center = center; + container.innerHTML = markers + .map( + (m) => + `

${m.title}

`, + ) + .join(""); + container.dataset.preInit = "map"; + document.body.appendChild(container); + + const errors: string[] = []; + const record = (e: ErrorEvent) => errors.push(e.message); + window.addEventListener("error", record); + sqlpage_map(); + await new Promise((resolve) => setTimeout(resolve, 500)); + window.removeEventListener("error", record); + + return { + errors, + markers: container.querySelectorAll(".leaflet-marker-icon").length, + initialized: !!container.querySelector(".leaflet-map-pane"), + }; + }, + { center, markers }, + ); +} + +test.beforeEach(async ({ page }) => { + await page.goto(`${BASE}/documentation.sql?component=map#component`); + await page.waitForFunction(() => "L" in window); +}); + +test("centers the map on a pair of coordinates", async ({ page }) => { + const map = await renderMap(page, PARIS); + + expect(map.errors).toEqual([]); + expect(map.initialized).toBe(true); +}); + +test("ignores a center whose longitude is missing", async ({ page }) => { + const map = await renderMap(page, PARIS_WITHOUT_ITS_LONGITUDE); + + expect(map.errors).toEqual([]); + expect(map.initialized).toBe(true); +}); + +test("ignores a center that is not a pair of numbers", async ({ page }) => { + const map = await renderMap(page, NOT_COORDINATES); + + expect(map.errors).toEqual([]); + expect(map.initialized).toBe(true); +}); + +test("draws a marker at a pair of coordinates", async ({ page }) => { + const map = await renderMap(page, PARIS, [{ coords: PARIS, title: "Paris" }]); + + expect(map.errors).toEqual([]); + expect(map.markers).toBe(1); +}); + +test("skips a marker whose longitude is missing, keeping the others", async ({ + page, +}) => { + const map = await renderMap(page, PARIS, [ + { coords: PARIS_WITHOUT_ITS_LONGITUDE, title: "Half of Paris" }, + { coords: PARIS, title: "Paris" }, + ]); + + expect(map.errors).toEqual([]); + expect(map.markers).toBe(1); +}); diff --git a/tests/end-to-end/official-site.spec.ts b/tests/end-to-end/official-site.spec.ts index e5e9efa48..d3a14de37 100644 --- a/tests/end-to-end/official-site.spec.ts +++ b/tests/end-to-end/official-site.spec.ts @@ -249,7 +249,6 @@ test("File upload", async ({ page }) => { await page.getByRole("button", { name: "Examples", exact: true }).click(); await page.getByText("File uploads").click(); const my_svg = 'Hello World'; - // @ts-ignore const buffer = Buffer.from(my_svg); await page.getByLabel("Picture").setInputFiles({ name: "small.svg", @@ -307,14 +306,14 @@ test("table sorting", async ({ page }) => { // Test numeric sorting on id column await tableSection.getByRole("button", { name: "id" }).click(); let ids = await tableSection.locator("td.id").allInnerTexts(); - let numericIds = ids.map((id) => Number.parseInt(id)); + let numericIds = ids.map((id) => Number.parseInt(id, 10)); const sortedIds = [...numericIds].sort((a, b) => a - b); expect(numericIds).toEqual(sortedIds); // Test reverse sorting await tableSection.getByRole("button", { name: "id" }).click(); ids = await tableSection.locator("td.id").allInnerTexts(); - numericIds = ids.map((id) => Number.parseInt(id)); + numericIds = ids.map((id) => Number.parseInt(id, 10)); const reverseSortedIds = [...numericIds].sort((a, b) => b - a); expect(numericIds).toEqual(reverseSortedIds); @@ -322,7 +321,7 @@ test("table sorting", async ({ page }) => { await tableSection.getByRole("button", { name: "Amount in stock" }).click(); const amounts = await tableSection.locator("td.Amount").allInnerTexts(); const numericAmounts = amounts.map((amount) => - Number.parseInt(amount.replace(/[^0-9]/g, "")), + Number.parseInt(amount.replace(/[^0-9]/g, ""), 10), ); const sortedAmounts = [...numericAmounts].sort((a, b) => a - b); expect(numericAmounts).toEqual(sortedAmounts); @@ -481,7 +480,7 @@ test("modal", async ({ page }) => { const openButton = page.getByRole("button", { name: "Open a simple modal" }); await openButton.click(); - const modal = page.getByRole("dialog", { label: "A modal box" }); + const modal = page.getByRole("dialog", { name: "A modal box" }); await expect(modal).toBeVisible(); // close the modal @@ -490,7 +489,7 @@ test("modal", async ({ page }) => { await openButton.click(); await expect(modal).toBeVisible(); - await modal.getByRole("button", { label: "Close" }).first().click(); + await modal.getByRole("button", { name: "Close" }).first().click(); await expect(modal).not.toBeVisible(); });