@happyvertical/smrt-svelte 0.55.23 → 0.56.0

package/dist/components/overview/widgets/record-widgets.js

@@ -0,0 +1,100 @@
+/**
+ * The record-page widget definitions (#3718 record page): `related` and
+ * `line-items` (the contract's `lineItems`), registered per record view by `registerRecordWidgets`
+ * because they are built from the record's relations. Loaders and the
+ * loader contract are in `record-loaders.ts`.
+ */
+import { defaultWidgetRegistry } from '../registry.js';
+import LineItemsWidget from './LineItemsWidget.svelte';
+import RelatedWidget from './RelatedWidget.svelte';
+import { createLineItemsLoader, createRelatedLoader, LINE_ITEMS_LIMIT, RELATED_WIDGET_LIMIT, } from './record-loaders.js';
+/** `related`: tabbed related records. Options: `title`, `relations`, `limit`. */
+export function createRelatedWidget(load) {
+    return {
+        type: 'related',
+        title: 'ui.overview.widget.related.title',
+        description: 'ui.overview.widget.related.description',
+        icon: 'layers',
+        options: [
+            {
+                key: 'title',
+                type: 'text',
+                label: 'ui.overview.opt.title',
+                help: 'ui.overview.opt.title_help',
+                maxLength: 80,
+            },
+            {
+                key: 'relations',
+                type: 'text',
+                label: 'ui.overview.opt.relations',
+                help: 'ui.overview.opt.relations_help',
+                maxLength: 1000,
+            },
+            {
+                key: 'limit',
+                type: 'integer',
+                label: 'ui.overview.opt.limit',
+                default: RELATED_WIDGET_LIMIT,
+                min: 1,
+                max: 20,
+            },
+        ],
+        component: RelatedWidget,
+        load,
+        defaultSpan: 4,
+    };
+}
+/**
+ * `line-items`: a document's lines and totals block. Options: `title`,
+ * `relation` (an `items` relation key; empty = the first), `limit`. The
+ * type id is kebab case (`line-items`): widget type ids are lowercase kebab.
+ */
+export function createLineItemsWidget(load) {
+    return {
+        type: 'line-items',
+        title: 'ui.overview.widget.line_items.title',
+        description: 'ui.overview.widget.line_items.description',
+        icon: 'fileText',
+        options: [
+            {
+                key: 'title',
+                type: 'text',
+                label: 'ui.overview.opt.title',
+                help: 'ui.overview.opt.title_help',
+                maxLength: 80,
+            },
+            {
+                key: 'relation',
+                type: 'identifier',
+                label: 'ui.overview.opt.relation',
+                help: 'ui.overview.opt.relation_help',
+            },
+            {
+                key: 'limit',
+                type: 'integer',
+                label: 'ui.overview.opt.limit',
+                default: LINE_ITEMS_LIMIT,
+                min: 1,
+                max: LINE_ITEMS_LIMIT,
+            },
+        ],
+        component: LineItemsWidget,
+        load,
+        defaultSpan: 4,
+    };
+}
+/**
+ * Register the record-page widgets for one record view's relations,
+ * `related` and `line-items`, both loading through the host's `records`
+ * loader. Returns a disposer.
+ */
+export function registerRecordWidgets(registry = defaultWidgetRegistry, options, registerOptions = {}) {
+    const disposers = [
+        registry.register(createRelatedWidget(createRelatedLoader(options)), registerOptions),
+        registry.register(createLineItemsWidget(createLineItemsLoader(options)), registerOptions),
+    ];
+    return () => {
+        for (const dispose of disposers)
+            dispose();
+    };
+}

package/dist/components/screens/DetailScreen.svelte

@@ -8,6 +8,12 @@
  * behind a "More details" disclosure. Hidden fields and fields outside the
  * policy never render, so a sensitive field the policy omits cannot leak
  * through this screen.
+ *
+ * Empty values (an empty JSON object or array included) show the "Not set"
+ * placeholder; a JSON object shows as a compact key/value list. A reference
+ * shows its target's label from `labels` (a link when `hrefFor` gives one);
+ * without a label it falls back to a shortened id in `<code>`, the full id in
+ * its tooltip.
  */
 import { Alert, ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
@@ -17,6 +23,7 @@ import { M } from '../../i18n/strings.screens.js';
 import {
   deriveScreenFields,
   groupScreenFields,
+  humanizeFieldName,
   screenSourceError,
   screenTitles,
 } from './fields.js';
@@ -27,7 +34,11 @@ import type {
   ScreenPolicy,
   ScreenRecord,
 } from './types.js';
-import { formatScreenValue } from './values.js';
+import {
+  formatScreenValue,
+  jsonScreenEntries,
+  shortScreenId,
+} from './values.js';
 
 let {
   definition,
@@ -45,6 +56,12 @@ let {
   ondelete,
   extraActions,
   children,
+  relations = [],
+  hrefFor,
+  labels,
+  exclude,
+  hideEmpty = false,
+  variant = 'plain',
 }: DetailScreenProps = $props();
 
 const { t } = useI18n();
@@ -57,8 +74,17 @@ const allFields = $derived(
     ? []
     : deriveScreenFields(definition, policy, { mode: 'view', include }),
 );
-const primary = $derived(allFields.filter((f) => f.tier === 'basic'));
-const secondary = $derived(allFields.filter((f) => f.tier === 'advanced'));
+const listed = $derived(
+  exclude ? allFields.filter((f) => !exclude.includes(f.name)) : allFields,
+);
+const filled = $derived(
+  hideEmpty ? listed.filter((f) => display(f) !== '') : listed,
+);
+const empty = $derived(
+  hideEmpty ? listed.filter((f) => display(f) === '') : [],
+);
+const primary = $derived(filled.filter((f) => f.tier === 'basic'));
+const secondary = $derived(filled.filter((f) => f.tier === 'advanced'));
 
 const heading = $derived.by(() => {
   if (title) return title;
@@ -87,6 +113,19 @@ function safeHref(field: ScreenField, text: string): string | null {
   return null;
 }
 
+/** A reference field's target model, from the `reference` relations. */
+function targetModel(field: ScreenField): string | undefined {
+  return relations.find((r) => r.kind === 'reference' && r.field === field.name)
+    ?.model;
+}
+
+/** The referenced record's label, or `undefined` when nothing names it. */
+function referenceLabel(field: ScreenField, id: string): string | undefined {
+  const model = targetModel(field);
+  const label = model ? labels?.[model]?.(id) : undefined;
+  return label && label.trim() !== '' ? label : undefined;
+}
+
 let confirmOpen = $state(false);
 let deleteError = $state(false);
 
@@ -102,6 +141,8 @@ async function confirmDelete(): Promise<void> {
 }
 </script>
 
+{#snippet shortId(id: string)}<code title={id}>{shortScreenId(id)}</code>{/snippet}
+
 {#snippet fieldList(list: ScreenField[])}
   {#each groupScreenFields(list) as [group, groupFields] (group ?? '')}
     <section class="smrt-detail-screen__group">
@@ -114,12 +155,34 @@ async function confirmDelete(): Promise<void> {
             <dd>
               {#if text === ''}
                 <span class="smrt-detail-screen__empty">{t(M['ui.screens.not_set'])}</span>
-              {:else if field.kind === 'json' || field.kind === 'textarea'}
+              {:else if field.kind === 'json'}
+                {@const entries = jsonScreenEntries(record[field.name])}
+                {#if entries}
+                  <dl class="smrt-detail-screen__pairs">
+                    {#each entries as entry (entry.key)}
+                      <div>
+                        <dt>{humanizeFieldName(entry.key)}</dt>
+                        <dd>{entry.value}</dd>
+                      </div>
+                    {/each}
+                  </dl>
+                {:else}
+                  <pre class="smrt-detail-screen__block">{text}</pre>
+                {/if}
+              {:else if field.kind === 'textarea'}
                 <pre class="smrt-detail-screen__block">{text}</pre>
               {:else if safeHref(field, text)}
                 <a href={safeHref(field, text)}>{text}</a>
               {:else if field.kind === 'reference'}
-                <code>{text}</code>
+                {@const href = hrefFor?.(field, text)}
+                {@const label = referenceLabel(field, text)}
+                {#if href}
+                  <a href={href} class="smrt-detail-screen__reference">{#if label}{label}{:else}{@render shortId(text)}{/if}</a>
+                {:else if label}
+                  <span class="smrt-detail-screen__reference">{label}</span>
+                {:else}
+                  {@render shortId(text)}
+                {/if}
               {:else}
                 {text}
               {/if}
@@ -152,7 +215,12 @@ async function confirmDelete(): Promise<void> {
   </PageHeader>
 {/if}
 
-<article class="smrt-detail-screen" aria-label={heading} data-smrt-component="DetailScreen">
+<article
+  class="smrt-detail-screen"
+  class:smrt-detail-screen--card={variant === 'card'}
+  aria-label={variant === 'card' ? t(M['ui.screens.details']) : heading}
+  data-smrt-component="DetailScreen"
+>
   {#if sourceError}
     <Alert variant="error">{sourceError}</Alert>
   {:else}
@@ -167,6 +235,11 @@ async function confirmDelete(): Promise<void> {
         {@render fieldList(secondary)}
       </Disclosure>
     {/if}
+    {#if empty.length > 0}
+      <Disclosure title={t(M['ui.screens.show_empty'], { count: empty.length })}>
+        {@render fieldList(empty)}
+      </Disclosure>
+    {/if}
     {@render children?.()}
   {/if}
 </article>
@@ -193,6 +266,15 @@ async function confirmDelete(): Promise<void> {
     flex-direction: column;
     gap: var(--smrt-spacing-lg, 1.5rem);
   }
+  .smrt-detail-screen--card {
+    padding: var(--smrt-spacing-md, 1rem);
+    border: var(--smrt-hairline);
+    border-radius: var(--smrt-radius-lg);
+    background: var(--smrt-color-surface);
+  }
+  .smrt-detail-screen--card .smrt-detail-screen__fields {
+    grid-template-columns: repeat(auto-fill, minmax(max(14rem, 40%), 1fr));
+  }
   .smrt-detail-screen__group-title {
     margin: 0 0 var(--smrt-spacing-sm, 0.5rem);
     font-size: var(--smrt-typography-title-medium-size, 1rem);
@@ -214,6 +296,23 @@ async function confirmDelete(): Promise<void> {
   .smrt-detail-screen__empty {
     color: var(--smrt-color-on-surface-variant);
   }
+  .smrt-detail-screen__pairs {
+    display: grid;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    margin: 0;
+  }
+  .smrt-detail-screen__pairs div {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0 var(--smrt-spacing-sm, 0.5rem);
+  }
+  .smrt-detail-screen__pairs dt {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+  }
+  .smrt-detail-screen__pairs dd {
+    margin: 0;
+  }
   .smrt-detail-screen__block {
     margin: 0;
     white-space: pre-wrap;

package/dist/components/screens/DetailScreen.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailScreen.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/DetailScreen.svelte.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,YAAY,CAAC;AAoKpB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DetailScreen.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/DetailScreen.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EACV,iBAAiB,EAKlB,MAAM,YAAY,CAAC;AAiOpB,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/screens/EditForm.svelte

@@ -25,6 +25,7 @@ import {
   FormActionBar,
   FormGroup,
   Input,
+  Select,
   Textarea,
 } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
@@ -32,6 +33,7 @@ import { PageHeader } from '@happyvertical/smrt-ui/layout';
 import { Button, Disclosure } from '@happyvertical/smrt-ui/ui';
 import { untrack } from 'svelte';
 import { M } from '../../i18n/strings.screens.js';
+import { statusLabel } from '../overview/widgets/record-table.js';
 import {
   deriveScreenFields,
   groupScreenFields,
@@ -51,6 +53,7 @@ import {
   DEFAULT_SCREEN_CURRENCY,
   draftForCreate,
   draftFromRecord,
+  formatScreenValue,
   parseDraft,
 } from './values.js';
 
@@ -67,6 +70,7 @@ let {
   error = null,
   onsubmit,
   oncancel,
+  derivedFields = [],
 }: EditFormProps = $props();
 
 const { t } = useI18n();
@@ -86,6 +90,9 @@ const allFields = $derived(
     ? []
     : deriveScreenFields(definition, policy, { mode: 'edit', include }),
 );
+/** Derived fields (a total computed from line items) show but never submit. */
+const isDerived = (field: ScreenField): boolean =>
+  derivedFields.includes(field.name);
 const basicFields = $derived(allFields.filter((f) => f.tier === 'basic'));
 const advancedFields = $derived(allFields.filter((f) => f.tier === 'advanced'));
 
@@ -153,7 +160,11 @@ async function submit(): Promise<void> {
   if (working || submitting) return;
   failed = false;
   hostErrors = {};
-  const parsed = parseDraft(allFields, draft, { currency, record });
+  const parsed = parseDraft(
+    allFields.filter((f) => !isDerived(f)),
+    draft,
+    { currency, record },
+  );
   localErrors = parsed.errors;
   if (Object.keys(parsed.errors).length > 0) {
     if (advancedFields.some((f) => parsed.errors[f.name])) advancedOpen = true;
@@ -182,7 +193,15 @@ const formError = $derived(
 </script>
 
 {#snippet control(field: ScreenField)}
-  {#if field.kind === 'boolean'}
+  {#if isDerived(field)}
+    <FormGroup label={label(field)} hint={t(M['ui.screens.derived_hint'])}>
+      <Input
+        name={field.name}
+        readonly
+        value={formatScreenValue(field, record?.[field.name], { currency })}
+      />
+    </FormGroup>
+  {:else if field.kind === 'boolean'}
     <div class="smrt-edit-form__check">
       <Checkbox
         name={field.name}
@@ -204,7 +223,24 @@ const formError = $derived(
       error={messageFor(field)}
       required={field.required}
     >
-      {#if field.kind === 'textarea' || field.kind === 'json'}
+      {#if field.kind === 'select'}
+        <Select
+          name={field.name}
+          disabled={busy}
+          required={field.required}
+          bind:value={() => text(field.name), (v) => setText(field.name, v)}
+        >
+          {#if !field.required || text(field.name) === ''}
+            <option value="">{t(M['ui.screens.select_none'])}</option>
+          {/if}
+          {#each field.options ?? [] as option (option)}
+            <option value={option}>{statusLabel(option)}</option>
+          {/each}
+          {#if text(field.name) !== '' && !(field.options ?? []).includes(text(field.name))}
+            <option value={text(field.name)}>{text(field.name)}</option>
+          {/if}
+        </Select>
+      {:else if field.kind === 'textarea' || field.kind === 'json'}
         <Textarea
           name={field.name}
           rows={field.kind === 'json' ? 8 : 4}

package/dist/components/screens/EditForm.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/EditForm.svelte.ts"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EACV,aAAa,EAOd,MAAM,YAAY,CAAC;AAmOpB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"EditForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/EditForm.svelte.ts"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EACV,aAAa,EAOd,MAAM,YAAY,CAAC;AA6PpB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/screens/RecipeScreens.svelte

@@ -5,7 +5,8 @@
  * screen set for a package that ships models but no consumer UI: tags, facts,
  * secrets, profiles, reports, prompts and the like.
  *
- * It composes `ListScreen`, `DetailScreen` and `EditForm` over a
+ * It composes `ListScreen`, `RecordScreen` (view and edit, the record view
+ * with its related-records overview) and `EditForm` (create) over a
  * transport-neutral `source` (list / get / create / update / delete). The
  * `view` and `recordId` props are bindable so an app can mirror them into its
  * router (`onnavigate` fires on every user navigation); left unbound, the
@@ -18,10 +19,11 @@ import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { untrack } from 'svelte';
 import { M } from '../../i18n/strings.screens.js';
-import DetailScreen from './DetailScreen.svelte';
 import EditForm from './EditForm.svelte';
 import { screenTitles } from './fields.js';
 import ListScreen from './ListScreen.svelte';
+import RecordScreen from './RecordScreen.svelte';
+import { deriveScreenRelations } from './relations.js';
 import type {
   RecipeScreensProps,
   RecipeScreensSource,
@@ -44,6 +46,8 @@ let {
   locale,
   can = {},
   onnavigate,
+  definitions,
+  record: recordProps = {},
 }: RecipeScreensProps = $props();
 
 const { t } = useI18n();
@@ -53,6 +57,9 @@ const idField = $derived(definition.idField ?? 'id');
 const allowCreate = $derived(can.create !== false && !!source.create);
 const allowUpdate = $derived(can.update !== false && !!source.update);
 const allowDelete = $derived(can.delete !== false && !!source.delete);
+const relations = $derived(
+  definitions ? deriveScreenRelations(definitions, definition.objectRef) : [],
+);
 
 let rows = $state<readonly ScreenRecord[]>([]);
 let loading = $state(true);
@@ -182,33 +189,26 @@ async function remove(): Promise<void> {
       />
   {:else if (view === 'view' || view === 'edit') && recordId !== null}
     {#if current}
-      {#if view === 'edit' && allowUpdate}
-        {#key recordId}
-          <EditForm
-            {definition}
-            {policy}
-            {currency}
-            {fields}
-            record={current}
-            submitting={saving}
-            onsubmit={update}
-            oncancel={() => navigate('view', recordId)}
-          />
-        {/key}
-      {:else}
-        <DetailScreen
+      {#key definition.objectRef}
+        <RecordScreen
           {definition}
           {policy}
           {currency}
           {locale}
           {fields}
+          {relations}
           record={current}
+          mode={view === 'edit' && allowUpdate ? 'edit' : 'view'}
           {deleting}
+          submitting={saving}
           onback={() => navigate('list')}
           onedit={allowUpdate ? () => navigate('edit', recordId) : undefined}
+          oncancel={() => navigate('view', recordId)}
+          onsave={allowUpdate ? update : undefined}
           ondelete={allowDelete ? remove : undefined}
+          {...recordProps}
         />
-      {/if}
+      {/key}
     {:else if !resolving}
       <Alert variant="warning">{t(M['ui.screens.not_found'])}</Alert>
       <Button variant="ghost" onclick={() => navigate('list')}>

package/dist/components/screens/RecipeScreens.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RecipeScreens.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/RecipeScreens.svelte.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,kBAAkB,EAMnB,MAAM,YAAY,CAAC;AAqLpB,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"RecipeScreens.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/RecipeScreens.svelte.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EACV,kBAAkB,EAMnB,MAAM,YAAY,CAAC;AAuLpB,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}