@inglorious/ui 9.10.1 → 9.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.10.1",
+  "version": "9.11.1",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -341,7 +341,7 @@
   "peerDependencies": {
     "@inglorious/store": "^12.1.1",
     "@inglorious/utils": "^5.1.0",
-    "@inglorious/web": "^6.14.0"
+    "@inglorious/web": "^6.14.1"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
@@ -353,7 +353,7 @@
     "@inglorious/store": "12.1.1",
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
-    "@inglorious/web": "6.14.0",
+    "@inglorious/web": "6.14.1",
     "@lit-labs/ssr": "^4.1.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",

package/src/controls/select/style.css

@@ -124,7 +124,7 @@
         user-select: none;
         padding: var(--iw-space-2) var(--iw-space-3);
 
-        &:focused {
+        &:focus-visible {
           background-color: var(--iw-color-bg-secondary);
         }
 

package/src/data-display/data-grid/filters/helpers.js

@@ -6,3 +6,27 @@ export function format(value, type) {
     return new Date(value).getTime()
   return value
 }
+
+const DATE_LENGTH = 10
+const DATETIME_LENGTH = 16
+const MINUTE_MS = 60_000
+
+/**
+ * A filter value as its field shows it. Date fields read their text as UTC,
+ * datetime fields as local time, so each turns back the same way.
+ * @param {any} value
+ * @param {string} inputType
+ * @returns {string|number}
+ */
+export function toField(value, inputType) {
+  if (value == null || Number.isNaN(value)) return ""
+  if (typeof value !== "number") return value
+  if (inputType === "date") {
+    return new Date(value).toISOString().slice(0, DATE_LENGTH)
+  }
+  if (inputType === "datetime-local") {
+    const offset = new Date(value).getTimezoneOffset() * MINUTE_MS
+    return new Date(value - offset).toISOString().slice(0, DATETIME_LENGTH)
+  }
+  return value
+}

package/src/data-display/data-grid/filters/input.js

@@ -1,5 +1,5 @@
 import { Input } from "../../../controls/input/index.js"
-import { format } from "./helpers.js"
+import { format, toField } from "./helpers.js"
 
 const DEFAULT_PLACEHOLDER = {
   number: "=",
@@ -10,7 +10,9 @@ export const InputFilter = {
   render(entity, column) {
     return Input.render({
       name: column.id,
+      ariaLabel: column.filter.ariaLabel ?? `Filter ${column.title}`,
       inputType: column.filter.type,
+      value: toField(entity.filters[column.id], column.filter.type),
       placeholder:
         column.filter.placeholder ?? DEFAULT_PLACEHOLDER[column.filter.type],
       size: "sm",

package/src/data-display/data-grid/filters/range.js

@@ -1,7 +1,7 @@
 import { html } from "@inglorious/web"
 
 import { Input } from "../../../controls/input/index.js"
-import { format } from "./helpers.js"
+import { format, toField } from "./helpers.js"
 
 const RANGE_TYPE = {
   range: "number",
@@ -15,7 +15,12 @@ export const RangeFilter = {
     return html`<div class="iw-data-grid-filter-range">
       ${Input.render({
         name: `${column.id}Min`,
+        ariaLabel: column.filter.minLabel ?? `Filter ${column.title}: min`,
         inputType: RANGE_TYPE[column.filter.type],
+        value: toField(
+          entity.filters[column.id]?.min,
+          RANGE_TYPE[column.filter.type],
+        ),
         placeholder: column.filter.placeholder ?? "≥",
         size: "sm",
         isFullWidth: true,
@@ -29,7 +34,12 @@ export const RangeFilter = {
       })}
       ${Input.render({
         name: `${column.id}Max`,
+        ariaLabel: column.filter.maxLabel ?? `Filter ${column.title}: max`,
         inputType: RANGE_TYPE[column.filter.type],
+        value: toField(
+          entity.filters[column.id]?.max,
+          RANGE_TYPE[column.filter.type],
+        ),
         placeholder: column.filter.placeholder ?? "≤",
         size: "sm",
         isFullWidth: true,

package/src/data-display/data-grid/filters/select.js

@@ -5,6 +5,8 @@ export const SelectFilter = {
   render(entity, column) {
     return Select.render({
       name: column.id,
+      ariaLabel: column.filter.ariaLabel ?? `Filter ${column.title}`,
+      value: entity.filters[column.id] ?? "",
       size: "sm",
       isFullWidth: true,
       options: column.filter.options,

package/src/data-display/data-grid/handlers.js

@@ -433,6 +433,8 @@ function initDataGrid(entity) {
   entity.isMultiSelect ??= true
   entity.isVirtualized ??= false
 
+  entity.totalRows ??= null
+
   entity.pagination ??= null
   if (entity.pagination) {
     entity.pagination.page ??= 0

package/src/data-display/data-grid/helpers.js

@@ -60,11 +60,15 @@ export function getEditedRows(entity) {
 }
 
 /**
- * Gets the processed rows (filtered, searched, sorted, paginated).
+ * Gets the processed rows (filtered, searched, sorted, paginated). A grid with
+ * `totalRows` holds the server's page already processed, so it gets the rows
+ * as they are.
  * @param {TableEntity} entity
  * @returns {any[]}
  */
 export function getRows(entity) {
+  if (entity.totalRows != null) return entity.rows
+
   let rows = entity.rows
   rows = applyFilters(entity, rows)
   rows = applySearch(entity, rows)
@@ -75,11 +79,14 @@ export function getRows(entity) {
 }
 
 /**
- * Gets the total number of rows after filtering and searching.
+ * Gets the total number of rows after filtering and searching, or the
+ * server's `totalRows` when the grid has it.
  * @param {TableEntity} entity
  * @returns {number}
  */
 export function getTotalRows(entity) {
+  if (entity.totalRows != null) return entity.totalRows
+
   let rows = entity.rows
   rows = applyFilters(entity, rows)
   rows = applySearch(entity, rows)

package/src/data-display/data-grid/template.js

@@ -117,16 +117,22 @@ export const DataGrid = {
       class="iw-data-grid-header-column"
       style=${getColumnStyle(column)}
     >
-      <div
-        @click=${() => column.isSortable && props.onSortChange?.(column.id)}
-        class="iw-data-grid-header-title"
-      >
-        ${column.title}
-        ${when(column.isSortable, () =>
-          getSortIcon(getSortDirection(props, column.id)),
-        )}
-      </div>
-
+      ${when(
+        column.isSortable,
+        () =>
+          html`<button
+            type="button"
+            class="iw-data-grid-header-title iw-data-grid-header-sort"
+            @click=${() => props.onSortChange?.(column.id)}
+          >
+            ${column.title}
+            <span aria-hidden="true"
+              >${getSortIcon(getSortDirection(props, column.id))}</span
+            >
+          </button>`,
+        () =>
+          html`<div class="iw-data-grid-header-title">${column.title}</div>`,
+      )}
       ${when(column.isFilterable, () => Filters.render(props, column))}
 
       <div
@@ -153,6 +159,7 @@ export const DataGrid = {
         size: "sm",
         isFullWidth: true,
         name: "search",
+        ariaLabel: props.search.ariaLabel ?? "Search",
         inputType: "text",
         placeholder: props.search.placeholder ?? "Fuzzy search...",
         value: props.search.value,

package/src/data-display/data-grid/theme.css

@@ -29,6 +29,22 @@
     white-space: nowrap;
   }
 
+  .iw-data-grid-header-sort {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: var(--iw-font-weight-bold);
+    text-align: start;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--iw-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
   .iw-data-grid-column-resizer {
     &::after {
       content: "";

package/types/data-display/data-grid.d.ts

@@ -36,6 +36,12 @@ export interface Column {
   filter?: {
     type: "text" | "number" | "range" | "select" | "date" | "time" | "datetime"
     options?: SelectOption[]
+    /** The filter field's accessible name. Defaults to "Filter <title>". */
+    ariaLabel?: string
+    /** A range filter's lower field's accessible name. */
+    minLabel?: string
+    /** A range filter's upper field's accessible name. */
+    maxLabel?: string
     [key: string]: any
   }
   /**
@@ -67,7 +73,12 @@ export interface DataGridProps<T extends Row = Row> {
   columns: Column[]
   sorts: { column: string; direction: "asc" | "desc" }[]
   filters: Record<string, any>
-  search: { value: string; placeholder?: string } | null
+  search: {
+    value: string
+    placeholder?: string
+    /** The search field's accessible name. Defaults to "Search". */
+    ariaLabel?: string
+  } | null
   isStriped?: boolean
   isVirtualized?: boolean
   virtualization?: DataGridVirtualization
@@ -75,6 +86,13 @@ export interface DataGridProps<T extends Row = Row> {
   selectionAnchor?: string | number | null
   pagination?: { page: number; pageSize: number; pageSizes: number[] } | null
   rowId?: string
+  /**
+   * How many rows the server has for the current filters and search. When it
+   * is set, `rows` is the page the server already filtered, sorted and sliced,
+   * so the grid shows them as they are and pages by this total. Set it to `0`
+   * before the first load to start the grid server-side.
+   */
+  totalRows?: number | null
   isMultiSelect: boolean
   /**
    * The user's unsaved edits, by row key and column id, shown over the rows
@@ -159,36 +177,41 @@ export type DataGridType = {
   virtualMount(entity: DataGridProps, containerEl: HTMLElement): void
   virtualScroll(entity: DataGridProps, containerEl: HTMLElement): void
   render(entity: DataGridProps, api: Api): TemplateResult
-  renderDataGrid(entity: DataGridProps, api: Api): TemplateResult
-  renderHeader(entity: DataGridProps, api: Api): TemplateResult
-  renderToolbar(entity: DataGridProps, api: Api): TemplateResult
+  renderDataGrid(entity: DataGridProps): TemplateResult
+  renderHeader(entity: DataGridProps): TemplateResult
+  renderToolbar(entity: DataGridProps): TemplateResult
+  renderSearchbar(entity: DataGridProps): TemplateResult
   renderHeaderColumn(
     entity: DataGridProps,
     payload: { column: Column; index: number },
-    api: Api,
   ): TemplateResult
-  renderBody(entity: DataGridProps, api: Api): TemplateResult
+  renderBody(entity: DataGridProps): TemplateResult
   renderRow(
     entity: DataGridProps,
     payload: { row: Row; index: number },
-    api: Api,
   ): TemplateResult
   renderCell(
     entity: DataGridProps,
     payload: { cell: any; index: number; row?: Row },
-    api: Api,
   ): TemplateResult
   renderEditor(
     entity: DataGridProps,
     payload: { value: any; column: Column; row: Row; index: number },
-    api: Api,
   ): TemplateResult
-  renderEdits(entity: DataGridProps, editCount: number): TemplateResult
   renderValue(
     entity: DataGridProps,
     payload: { value: any; column: Column; index: number },
-    api: Api,
   ): any
+  renderFooter(entity: DataGridProps): TemplateResult
+  renderEdits(entity: DataGridProps, editCount: number): TemplateResult
+  renderPagination(
+    entity: DataGridProps,
+    pagination: DataGridPaginationInfo,
+  ): TemplateResult
+  renderPageSize(
+    entity: DataGridProps,
+    pagination: DataGridPaginationInfo,
+  ): TemplateResult
 }
 
 export declare const DataGrid: DataGridType