@inglorious/ui 9.3.0 → 9.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "9.3.0",
+  "version": "9.4.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",
@@ -315,7 +315,7 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "12.2.0",
+    "@inglorious/charts": "12.2.1",
     "@inglorious/eslint-config": "1.2.0",
     "@inglorious/store": "12.0.0",
     "@inglorious/vite-plugin-jsx": "2.0.5",

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

@@ -35,9 +35,16 @@
     gap: var(--iw-space-2);
   }
 
-  .iw-data-grid-filter-range-input {
-    min-width: 0;
+  /* The two ends of a range share the column; native date and number
+     fields would otherwise keep a width of their own and spill out. */
+  .iw-data-grid-filter-range > .iw-input {
     flex: 1 1 0;
+    min-width: 0;
+
+    .iw-input-frame,
+    .iw-input-control {
+      min-width: 0;
+    }
   }
 
   .iw-data-grid-row {

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

@@ -19,7 +19,6 @@ export const RangeFilter = {
         placeholder: column.filter.placeholder ?? "≥",
         size: "sm",
         isFullWidth: true,
-        className: "iw-data-grid-filter-range-input",
         onChange: (value) => {
           const formattedValue = value ? format(value, column.type) : null
           entity.onFilterChange?.({
@@ -34,7 +33,6 @@ export const RangeFilter = {
         placeholder: column.filter.placeholder ?? "≤",
         size: "sm",
         isFullWidth: true,
-        className: "iw-data-grid-filter-range-input",
         onChange: (value) => {
           const formattedValue = value ? format(value, column.type) : null
           entity.onFilterChange?.({

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

@@ -302,7 +302,7 @@ export function cellChange(entity, { rowId, columnId, value }) {
 
   entity.edits ??= {}
   const edits = (entity.edits[rowId] ??= {})
-  if (Object.is(row[columnId], value)) {
+  if (isSameValue(row[columnId], value)) {
     delete edits[columnId]
   } else {
     edits[columnId] = value
@@ -500,7 +500,7 @@ function getDefaultColumnFilter(type) {
  */
 function getDefaultColumnWidth(filterType) {
   if (filterType === "number") return 70
-  if (filterType === "range") return 120
+  if (filterType === "range") return 160
   if (filterType === "select") return 70
   if (filterType === "date") return 120
   if (filterType === "time") return 120
@@ -564,3 +564,14 @@ function assertRowKeys(entity) {
     seen.add(rowKey)
   })
 }
+
+/**
+ * Whether two cell values are the same, dates by their time.
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+function isSameValue(a, b) {
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime()
+  return Object.is(a, b)
+}

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

@@ -33,6 +33,13 @@ const PRETTY_PAGE = 1
 const FIRST_PAGE = 0
 const LAST_PAGE = 1
 const ONE_EDIT = 1
+const WEB_URL = /^https?:\/\//i
+/** Fields edit dates as `YYYY-MM-DD`. */
+const DATE_LENGTH = 10
+const DATE_PART_LENGTH = 2
+/** Date's months count from zero, people's from one. */
+const MONTH_OFFSET = 1
+const INPUT_TYPES = { number: "number", date: "date", url: "url" }
 
 export const DataGrid = {
   /**
@@ -317,15 +324,14 @@ export const DataGrid = {
       })
     }
 
-    const isNumber = column.type === "number"
+    const saved = row[column.id]
     return Input.render({
       size: "sm",
       ariaLabel: column.title,
-      inputType: isNumber ? "number" : column.type === "date" ? "date" : "text",
-      value: value == null ? "" : String(value),
+      inputType: INPUT_TYPES[column.type] ?? "text",
+      value: column.type === "date" ? toDateField(value) : (value ?? ""),
       isFullWidth: true,
-      onChange: (text) =>
-        change(isNumber ? (text === "" ? null : Number(text)) : text),
+      onChange: (text) => change(fromField(text, column.type, saved)),
     })
   },
 
@@ -337,8 +343,16 @@ export const DataGrid = {
    * @param {any} payload.value The value to render.
    * @returns {any} The value to be rendered.
    */
-  renderValue(_props, { value }) {
-    return value
+  renderValue(_props, { value, column }) {
+    // A link only for a web address: a `javascript:` one must not run.
+    return when(
+      column.type === "url" && WEB_URL.test(String(value ?? "")),
+      () =>
+        html`<a href=${value} target="_blank" rel="noopener noreferrer"
+          >${value}</a
+        >`,
+      () => value,
+    )
   },
 
   /**
@@ -581,3 +595,38 @@ function getVirtualizationState(props, totalItems) {
     visibleRange: { start, end },
   }
 }
+
+/**
+ * A date, in whatever form a row keeps it, as a date field shows it.
+ * @param {Date|number|string|null|undefined} value
+ * @returns {string}
+ */
+function toDateField(value) {
+  if (value == null || value === "") return ""
+  if (typeof value === "string") return value.slice(0, DATE_LENGTH)
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ""
+  const pad = (part) => String(part).padStart(DATE_PART_LENGTH, "0")
+  return `${date.getFullYear()}-${pad(date.getMonth() + MONTH_OFFSET)}-${pad(date.getDate())}`
+}
+
+/**
+ * What a field holds, back in the form the row kept the value in: a number,
+ * or a date as a `Date`, a timestamp or a string, as it was. A date that had
+ * a time of day keeps it.
+ * @param {string} text
+ * @param {string} type The column's type.
+ * @param {any} saved The row's own value.
+ * @returns {any}
+ */
+function fromField(text, type, saved) {
+  if (type === "number") return text === "" ? null : Number(text)
+  if (type !== "date") return text
+  if (text === "") return null
+  if (!(saved instanceof Date) && typeof saved !== "number") return text
+
+  const [year, month, day] = text.split("-").map(Number)
+  const date = new Date(saved)
+  date.setFullYear(year, month - MONTH_OFFSET, day)
+  return saved instanceof Date ? date : date.getTime()
+}

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

@@ -26,7 +26,11 @@ export interface DataGridVirtualization {
 export interface Column {
   id: string
   title: string
-  type?: "string" | "number" | "boolean" | "date"
+  /**
+   * `"url"` cells show web addresses as links. A date column's editor gives
+   * back dates in the form the row keeps them: `Date`, timestamp or string.
+   */
+  type?: "string" | "number" | "boolean" | "date" | "url"
   isSortable?: boolean
   isFilterable?: boolean
   filter?: {