tosijs-ui 1.16.12 → 1.16.14

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## 1.16.14
+
+More reach for curated schema forms (#221): into arrays and unions, grouped into sections,
+and usable as a review screen. All of it is off until you ask for it.
+
+- **A curation can reach inside arrays and unions.** Give an array's, a union's or an
+  object's entry its own `fields`, with paths relative to the property: for an array they
+  apply to every item (`thresholds: { fields: { value: 'Threshold' } }`), for a union to the
+  branch the value currently matches. Items and branches keep what is not shown, an error in
+  an item property that is not shown is listed by its real path, and a union's
+  `picker: false` hides the variant picker. One `fields` covers every branch of a union: a
+  path the active branch lacks is left out, a path no branch has says so.
+- **Sections.** An entry `{ section: 'Advanced', fields: {...}, collapsed?: true }` groups
+  fields in a titled panel. `collapsed: true` also works on an object or array entry. A
+  section or collapsed entry is marked `-invalid`, with a red title, while a field inside it
+  is in error. **TypeScript:** `FieldCuration`'s values now include `CuratedSection`, so code
+  that walks a curation and reads `entry.caption` needs the new guard: `isSection` is exported.
+- **Proposals, for review screens.** `form.proposals = { path: { value, reason?, source? } }`
+  shows each proposed value under its field with Accept and Reject. `value` stays the
+  current value until one is accepted; accepting fires `proposalaccept` then `change`,
+  rejecting fires `proposalreject`. `acceptProposal(path)` / `rejectProposal(path)` do it
+  from code, and `proposalView` renders a proposal your own way. A proposal can be for a
+  whole array, object or union, and an object item of an array can be proposed whole
+  (`list.0`). One for an array item follows its item when items move. `proposalView` is
+  given `ProposalContext.readOnly`, and its `accept` / `reject` do nothing while the form is
+  read-only. Works with or without a curation. New localized strings: `Proposed`, `Accept`, `Reject`,
+  `Proposed changes to fields not shown here`.
+- For TypeScript: `isSection` is exported; `ProposalContext.readOnly` tells a custom
+  `proposalView` that the form is read-only.
+- **Fixed: an array item with several fields laid them out in two columns**, so the second
+  field sat in the column meant for the move and remove buttons and the buttons wrapped
+  underneath. Fields now stack and the buttons sit beside the first. The form now places an
+  item's children itself (`grid-column`), so a stylesheet of your own that arranged
+  `.schema-item` children may need a look.
+- **Fixed: setting `value` with a different number of array items left the old rows.** A
+  longer array showed only the rows it had before, and a shorter one kept controls for items
+  that no longer existed. Arrays are now re-filled when their length changes.
+- **Fixed: a schema `title` that is not a string** was handed to the label, or to a union's
+  picker option, as element properties. Only a string is a title now, for properties and for
+  `anyOf` / `oneOf` branches; anything else falls back to the key or the branch's value.
+- Schema `title`s were already shown as written, never humanised or localized; the docs now
+  say so and a test holds it.
+
+## 1.16.13
+
+Documentation only; no library code changed.
+
+- **Better examples for the two 1.16.12 features**, in the package's doc comments and
+  `llms.txt` as well as on the site. The table's row detail example now opens each invoice to
+  a nested `<tosi-table>` of its line items with a totals line. The curated form example
+  starts from a valid value and has **View only** and **Every field** toggles; the
+  hidden-error case is a separate, smaller example.
+
 ## 1.16.12
 
 Two additions for task-focused screens: a table row can open to show a detail element, and a

package/dist/data-table.js

@@ -1005,41 +1005,65 @@ target `.tr-detail`. Add `Details` to your localized strings.
 import { tosiTable } from 'tosijs-ui'
 import { elements } from 'tosijs'
 
-const { div, table, tr, td, th, b } = elements
+const { div, span, b } = elements
 
 const invoices = Array.from({ length: 2000 }, (_, i) => ({
   id: `INV-${1000 + i}`,
   buyer: ['Acme', 'Globex', 'Initech', 'Umbrella'][i % 4],
-  lines: Array.from({ length: 1 + (i % 4) }, (_, n) => ({
-    item: ['Widget', 'Gasket', 'Sprocket', 'Flange'][(i + n) % 4],
-    qty: 1 + ((i + n) % 5),
-    price: 12.5 * (1 + ((i * 7 + n) % 9)),
-  })),
+  lines: Array.from({ length: 1 + (i % 4) }, (_, n) => {
+    const qty = 1 + ((i + n) % 5)
+    const price = 12.5 * (1 + ((i * 7 + n) % 9))
+    return {
+      item: ['Widget', 'Gasket', 'Sprocket', 'Flange'][(i + n) % 4],
+      qty,
+      price,
+      amount: qty * price,
+    }
+  }),
 }))
 for (const invoice of invoices) {
-  invoice.total = invoice.lines.reduce((sum, l) => sum + l.qty * l.price, 0)
+  invoice.total = invoice.lines.reduce((sum, line) => sum + line.amount, 0)
 }
 
+const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+
+// The detail is a component built from the row: here, a table of its line items.
+const invoiceDetail = (invoice) =>
+  div(
+    { class: 'invoice-detail' },
+    tosiTable({
+      rowHeight: 0,
+      nosort: true,
+      nohide: true,
+      noreorder: true,
+      array: invoice.lines,
+      columns: [
+        { prop: 'item', name: 'Item', width: 160 },
+        { prop: 'qty', name: 'Qty', width: 70, type: 'number' },
+        { prop: 'price', name: 'Unit price', width: 110, type: 'currency(USD)' },
+        { prop: 'amount', name: 'Amount', width: 110, type: 'currency(USD)' },
+      ],
+    }),
+    div(
+      { class: 'invoice-total' },
+      span(`${invoice.lines.length} line${invoice.lines.length === 1 ? '' : 's'}, billed to ${invoice.buyer}`),
+      b('Total ', usd.format(invoice.total))
+    )
+  )
+
 const invoiceTable = tosiTable({
-  style: { height: '320px' },
+  style: { height: '360px' },
   rowHeight: 32,
   select: true,
   array: invoices,
   columns: [
     { prop: 'detail', width: 40, expander: true },
     { prop: 'id', name: 'Invoice', width: 120 },
-    { prop: 'buyer', width: 160 },
-    { prop: 'total', width: 120, type: 'currency(USD)' },
+    { prop: 'buyer', name: 'Buyer', width: 160 },
+    { prop: 'total', name: 'Total', width: 120, type: 'currency(USD)' },
   ],
   rowId: (row) => row.id,
-  rowDetail: (row) =>
-    table(
-      { class: 'invoice-lines' },
-      tr(th('Item'), th('Qty'), th('Price')),
-      ...row.lines.map((line) =>
-        tr(td(line.item), td(String(line.qty)), td(line.price.toFixed(2)))
-      )
-    ),
+  rowDetail: invoiceDetail,
 })
 invoiceTable.expandedRowIds = ['INV-1001']
 
@@ -1054,12 +1078,13 @@ invoiceTable.addEventListener('rowcollapse', (event) => {
 preview.append(invoiceTable, log)
 ```
 ```css
-.preview .invoice-lines {
-  border-collapse: collapse;
+.preview .invoice-detail {
+  max-width: 480px;
 }
-.preview .invoice-lines :is(td, th) {
-  padding: 2px 16px 2px 0;
-  text-align: left;
+.preview .invoice-total {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0 0;
 }
 .preview .detail-log {
   padding: 8px 0;
@@ -1088,7 +1113,8 @@ test('a row expands to its detail and collapses again', async () => {
   const toggle = table.getCells(row)[0].querySelector('.row-expander')
   expect(toggle.getAttribute('aria-expanded')).toBe('true')
   const detail = document.getElementById(toggle.getAttribute('aria-controls'))
-  expect(detail.textContent).toContain('Qty')
+  expect(detail.textContent).toContain('billed to Umbrella')
+  expect(detail.querySelector('tosi-table').array).toBe(row.lines)
 
   toggle.click()
   expect(table.isRowExpanded(row)).toBe(false)