@inglorious/ui 9.10.0 → 9.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.10.0",
+  "version": "9.11.0",
   "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",
@@ -354,6 +354,7 @@
     "@inglorious/vite-plugin-jsx": "2.0.6",
     "@inglorious/vite-plugin-vue": "1.0.7",
     "@inglorious/web": "6.14.0",
+    "@lit-labs/ssr": "^4.1.0",
     "@storybook/addon-docs": "^10.6.5",
     "@storybook/web-components-vite": "^10.6.5",
     "happy-dom": "^20.14.0",

package/src/controls/checkbox/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a labeled checkbox for boolean input.
@@ -51,7 +52,8 @@ export function render(props) {
         class="iw-checkbox-input"
         type="checkbox"
         name=${name}
-        .checked=${isChecked}
+        ?checked=${isChecked}
+        ${liveBoolean("checked", isChecked)}
         ?disabled=${isDisabled}
         ?required=${isRequired}
         @change=${(event) => onChange?.(event.target.checked)}

package/src/controls/combobox/handlers.js

@@ -46,6 +46,7 @@ export function open(entity) {
 /** @param {SelectEntity} entity */
 export function close(entity) {
   entity.isOpen = false
+  entity.searchTerm = ""
   entity.focusedIndex = NONE
 }
 
@@ -67,7 +68,7 @@ export function optionSelect(entity, option, api) {
   if (normalizedOption.isDisabled) return
   const optionValue = getOptionValue(normalizedOption)
 
-  if (normalizedOption.isCreated) {
+  if (normalizedOption.isCreated || entity.searchTerm) {
     entity.searchTerm = ""
     entity.focusedIndex = NONE
   }

package/src/controls/combobox/template.js

@@ -12,6 +12,7 @@ import { when } from "@inglorious/web/directives/when"
 
 import { Chip } from "../../data-display/chip/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 import { syncPopover } from "../../shared/top-layer.js"
 import {
   formatOption,
@@ -384,7 +385,8 @@ export const Combobox = {
         () =>
           html`<input
             type="checkbox"
-            .checked=${isSelected}
+            ?checked=${isSelected}
+            ${liveBoolean("checked", isSelected)}
             ?disabled=${!!normalized.isDisabled}
           />`,
       )}

package/src/controls/radio-group/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a group of radio options for single selection.
@@ -72,7 +73,8 @@ export function render(props) {
               type="radio"
               name=${groupName || nothing}
               value=${optionValue}
-              .checked=${value === optionValue}
+              ?checked=${value === optionValue}
+              ${liveBoolean("checked", value === optionValue)}
               ?disabled=${isDisabled || optionDisabled}
               @change=${(event) => onChange?.(event.target.value)}
               ${ref((element) => applyElementProps(element, optionRest))}

package/src/controls/rating/template.js

@@ -6,6 +6,8 @@
 import { html, nothing } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
 
+import { liveBoolean } from "../../shared/live-boolean.js"
+
 const DEFAULT_VALUE = 0
 const DEFAULT_MAX = 5
 const INDEX_TO_RATING = 1
@@ -62,7 +64,8 @@ export function render(props) {
               name=${groupName || nothing}
               value=${ratingValue}
               aria-label=${`${ratingValue} of ${max}`}
-              .checked=${ratingValue === value}
+              ?checked=${ratingValue === value}
+              ${liveBoolean("checked", ratingValue === value)}
               @change=${() => onChange?.(ratingValue)}
             />
             <span aria-hidden="true">${isActive ? symbol : emptySymbol}</span>

package/src/controls/select/template.js

@@ -10,6 +10,7 @@ import { when } from "@inglorious/web/directives/when"
 
 import { Icon } from "../../data-display/icon/index.js"
 import { fallbackLabel } from "../../shared/fallback-label.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
 /**
@@ -111,10 +112,6 @@ export const Select = {
       "iw-select-control-error": !!error,
     }
 
-    const selectedOption = options.find(
-      (option) => getOptionValue(option) === value,
-    )
-
     return html`<div class="iw-select-frame" @click=${openFromArrowStrip}>
       ${when(icon, () => Icon.render({ children: icon, size }))}
 
@@ -137,15 +134,11 @@ export const Select = {
           (option) => getOptionValue(option),
           (option) => {
             const {
-              value,
+              value: optionValue,
               label,
               isDisabled: isOptionDisabled,
             } = formatOption(option)
-            const isSelected = isOptionSelected(
-              option,
-              selectedOption?.value,
-              isMulti,
-            )
+            const isSelected = isOptionSelected(option, value, isMulti)
 
             const optionClasses = {
               "iw-select-option": true,
@@ -153,8 +146,9 @@ export const Select = {
             }
 
             return html`<option
-              value=${value}
-              .selected=${value === selectedOption?.value}
+              value=${optionValue}
+              ?selected=${isSelected}
+              ${liveBoolean("selected", isSelected)}
               ?disabled=${isOptionDisabled}
               class=${classMap(optionClasses)}
             >

package/src/controls/switch/template.js

@@ -9,6 +9,7 @@ import { ref } from "@inglorious/web/directives/ref"
 import { when } from "@inglorious/web/directives/when"
 
 import { applyElementProps } from "../../shared/apply-element-props.js"
+import { liveBoolean } from "../../shared/live-boolean.js"
 
 /**
  * Renders a toggle switch backed by a checkbox input, which `role="switch"`
@@ -49,7 +50,8 @@ export function render(props) {
         type="checkbox"
         role="switch"
         name=${name}
-        .checked=${isChecked}
+        ?checked=${isChecked}
+        ${liveBoolean("checked", isChecked)}
         ?disabled=${isDisabled}
         @change=${(event) => onChange?.(event.target.checked)}
         ${ref((element) => applyElementProps(element, rest))}

package/src/data-display/badge/style.css

@@ -13,6 +13,7 @@
   color: var(--iw-badge-on-accent);
   font-size: var(--iw-font-size-xs, 0.75rem);
   line-height: 1;
+  white-space: nowrap;
 
   &.iw-badge-sm {
     --iw-badge-shape-size: 0.5rem;

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/shared/live-boolean.js

@@ -0,0 +1,17 @@
+import { ref } from "@inglorious/web/directives/ref"
+
+/**
+ * Keeps an element's `checked` or `selected` property in step with the state.
+ *
+ * A `.checked=${false}` binding can't be used instead: server rendering
+ * reflects it as `checked="false"`, which HTML reads as checked. Templates pair
+ * this with the boolean attribute (`?checked=${value}`), which renders right on
+ * the server but stops counting once the user has touched the control.
+ * @param {"checked" | "selected"} name
+ * @param {boolean} value
+ */
+export function liveBoolean(name, value) {
+  return ref((element) => {
+    if (element) element[name] = value
+  })
+}

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

@@ -75,6 +75,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